@elementor/editor-controls 1.5.0 → 3.32.0-21

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/controls/image-control.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { imagePropTypeUtil } from "@elementor/editor-props";
 import { Grid, Stack as Stack2 } from "@elementor/ui";
 import { __ as __2 } from "@wordpress/i18n";
@@ -224,6 +224,30 @@ var createControlReplacementsRegistry = () => {
   }
   return { registerControlReplacement, getControlReplacements };
 };
+var SlotChildren = ({
+  children,
+  whitelist = [],
+  sorted = false,
+  props = {}
+}) => {
+  const filtered = !whitelist.length ? React4.Children.toArray(children) : React4.Children.toArray(children).filter(
+    (child) => React4.isValidElement(child) && whitelist.includes(child.type)
+  );
+  if (sorted) {
+    sort(filtered, whitelist);
+  }
+  return filtered.map((child, index) => /* @__PURE__ */ React4.createElement(React4.Fragment, { key: index }, React4.cloneElement(child, props)));
+};
+var sort = (childrenArray, whitelist) => {
+  childrenArray.sort((a, b) => {
+    const aIndex = whitelist.indexOf(a.type);
+    const bIndex = whitelist.indexOf(b.type);
+    if (aIndex === -1 || bIndex === -1) {
+      return 0;
+    }
+    return aIndex - bIndex;
+  });
+};
 
 // src/create-control.tsx
 var brandSymbol = Symbol("control");
@@ -274,7 +298,7 @@ var formatResponse = (response) => {
 };
 
 // src/controls/image-media-control.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { imageSrcPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon } from "@elementor/icons";
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from "@elementor/ui";
@@ -282,23 +306,12 @@ import { useWpMediaAttachment, useWpMediaFrame } from "@elementor/wp-media";
 import { __ } from "@wordpress/i18n";
 
 // src/control-actions/control-actions.tsx
-import * as React7 from "react";
-import { styled, UnstableFloatingActionBar } from "@elementor/ui";
+import * as React8 from "react";
 
-// src/control-actions/control-actions-context.tsx
+// src/components/floating-bar.tsx
 import * as React6 from "react";
-import { createContext as createContext4, useContext as useContext4 } from "react";
-var Context = createContext4(null);
-var ControlActionsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React6.createElement(Context.Provider, { value: { items: items2 } }, children);
-var useControlActions = () => {
-  const context = useContext4(Context);
-  if (!context) {
-    throw new Error("useControlActions must be used within a ControlActionsProvider");
-  }
-  return context;
-};
-
-// src/control-actions/control-actions.tsx
+import { createContext as createContext4, useContext as useContext4, useState as useState2 } from "react";
+import { styled, UnstableFloatingActionBar } from "@elementor/ui";
 var FloatingBarContainer = styled("span")`
 	display: contents;
 
@@ -310,14 +323,41 @@ var FloatingBarContainer = styled("span")`
 		z-index: 1000;
 	}
 `;
+var FloatingActionsContext = createContext4(null);
+function FloatingActionsBar({ actions, children }) {
+  const [open, setOpen] = useState2(false);
+  return /* @__PURE__ */ React6.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React6.createElement(FloatingBarContainer, null, /* @__PURE__ */ React6.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
+}
+function useFloatingActionsBar() {
+  const context = useContext4(FloatingActionsContext);
+  if (!context) {
+    throw new Error("useFloatingActions must be used within a FloatingActionsBar");
+  }
+  return context;
+}
+
+// src/control-actions/control-actions-context.tsx
+import * as React7 from "react";
+import { createContext as createContext5, useContext as useContext5 } from "react";
+var Context = createContext5(null);
+var ControlActionsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React7.createElement(Context.Provider, { value: { items: items2 } }, children);
+var useControlActions = () => {
+  const context = useContext5(Context);
+  if (!context) {
+    throw new Error("useControlActions must be used within a ControlActionsProvider");
+  }
+  return context;
+};
+
+// src/control-actions/control-actions.tsx
 function ControlActions({ children }) {
   const { items: items2 } = useControlActions();
   const { disabled } = useBoundProp();
   if (items2.length === 0 || disabled) {
     return 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));
+  const menuItems = items2.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React8.createElement(MenuItem2, { key: id }));
+  return /* @__PURE__ */ React8.createElement(FloatingActionsBar, { actions: menuItems }, children);
 }
 
 // src/controls/image-media-control.tsx
@@ -340,7 +380,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       });
     }
   });
-  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(
+  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(Card, { variant: "outlined" }, /* @__PURE__ */ React9.createElement(CardMedia, { image: src, sx: { height: 150 } }, isFetching ? /* @__PURE__ */ React9.createElement(Stack, { justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, /* @__PURE__ */ React9.createElement(CircularProgress, null)) : /* @__PURE__ */ React9.createElement(React9.Fragment, null)), /* @__PURE__ */ React9.createElement(CardOverlay, null, /* @__PURE__ */ React9.createElement(Stack, { gap: 1 }, /* @__PURE__ */ React9.createElement(
     Button,
     {
       size: "tiny",
@@ -349,13 +389,13 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
       onClick: () => open({ mode: "browse" })
     },
     __("Select image", "elementor")
-  ), /* @__PURE__ */ React8.createElement(
+  ), /* @__PURE__ */ React9.createElement(
     Button,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React8.createElement(UploadIcon, null),
+      startIcon: /* @__PURE__ */ React9.createElement(UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
     __("Upload", "elementor")
@@ -363,7 +403,7 @@ var ImageMediaControl = createControl(({ mediaTypes = ["image"] }) => {
 });
 
 // src/controls/select-control.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { stringPropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem } from "@elementor/editor-ui";
 import { Select, Typography } from "@elementor/ui";
@@ -374,7 +414,7 @@ var SelectControl = createControl(({ options, onChange }) => {
     onChange?.(newValue, value);
     setValue(newValue);
   };
-  return /* @__PURE__ */ React9.createElement(ControlActions, null, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(ControlActions, null, /* @__PURE__ */ React10.createElement(
     Select,
     {
       sx: { overflow: "hidden" },
@@ -386,7 +426,7 @@ var SelectControl = createControl(({ options, onChange }) => {
           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 /* @__PURE__ */ React10.createElement(Typography, { component: "span", variant: "caption", color: "text.tertiary" }, displayText);
           }
           return "";
         }
@@ -398,7 +438,7 @@ var SelectControl = createControl(({ options, onChange }) => {
       disabled,
       fullWidth: true
     },
-    options.map(({ label, ...props }) => /* @__PURE__ */ React9.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
+    options.map(({ label, ...props }) => /* @__PURE__ */ React10.createElement(MenuListItem, { key: props.value, ...props, value: props.value ?? "" }, label))
   ));
 });
 
@@ -408,28 +448,28 @@ var ImageControl = createControl(({ sizes, showMode = "all" }) => {
   let componentToRender;
   switch (showMode) {
     case "media":
-      componentToRender = /* @__PURE__ */ React10.createElement(ImageSrcControl, null);
+      componentToRender = /* @__PURE__ */ React11.createElement(ImageSrcControl, null);
       break;
     case "sizes":
-      componentToRender = /* @__PURE__ */ React10.createElement(ImageSizeControl, { sizes });
+      componentToRender = /* @__PURE__ */ React11.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 }))));
+      componentToRender = /* @__PURE__ */ React11.createElement(Stack2, { gap: 1.5 }, /* @__PURE__ */ React11.createElement(ControlFormLabel, null, __2("Image", "elementor")), /* @__PURE__ */ React11.createElement(ImageSrcControl, null), /* @__PURE__ */ React11.createElement(Grid, { container: true, gap: 1.5, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React11.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React11.createElement(ControlFormLabel, null, __2("Resolution", "elementor"))), /* @__PURE__ */ React11.createElement(Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React11.createElement(ImageSizeControl, { sizes }))));
   }
-  return /* @__PURE__ */ React10.createElement(PropProvider, { ...propContext }, componentToRender);
+  return /* @__PURE__ */ React11.createElement(PropProvider, { ...propContext }, componentToRender);
 });
 var ImageSrcControl = () => {
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const mediaTypes = allowSvgUpload ? ["image", "svg"] : ["image"];
-  return /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React10.createElement(ImageMediaControl, { mediaTypes }));
+  return /* @__PURE__ */ React11.createElement(PropKeyProvider, { bind: "src" }, /* @__PURE__ */ React11.createElement(ImageMediaControl, { mediaTypes }));
 };
 var ImageSizeControl = ({ sizes }) => {
-  return /* @__PURE__ */ React10.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React10.createElement(SelectControl, { options: sizes }));
+  return /* @__PURE__ */ React11.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React11.createElement(SelectControl, { options: sizes }));
 };
 
 // src/controls/text-control.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil2 } from "@elementor/editor-props";
 import { TextField } from "@elementor/ui";
 var TextControl = createControl(
@@ -442,7 +482,7 @@ var TextControl = createControl(
   }) => {
     const { value, setValue, disabled } = useBoundProp(stringPropTypeUtil2);
     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(
       TextField,
       {
         size: "tiny",
@@ -459,7 +499,7 @@ var TextControl = createControl(
 );
 
 // src/controls/text-area-control.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil3 } from "@elementor/editor-props";
 import { TextField as TextField2 } from "@elementor/ui";
 var TextAreaControl = createControl(({ placeholder }) => {
@@ -467,7 +507,7 @@ var TextAreaControl = createControl(({ placeholder }) => {
   const handleChange = (event) => {
     setValue(event.target.value);
   };
-  return /* @__PURE__ */ React12.createElement(ControlActions, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(ControlActions, null, /* @__PURE__ */ React13.createElement(
     TextField2,
     {
       size: "tiny",
@@ -483,28 +523,33 @@ var TextAreaControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/size-control.tsx
-import * as React16 from "react";
-import { useEffect as useEffect2, useState as useState3 } from "react";
-import { sizePropTypeUtil } from "@elementor/editor-props";
+import * as React17 from "react";
+import { useEffect as useEffect3, useState as useState4 } from "react";
+import { sizePropTypeUtil as sizePropTypeUtil2 } from "@elementor/editor-props";
 import { useActiveBreakpoint } from "@elementor/editor-responsive";
 import { usePopupState as usePopupState2 } from "@elementor/ui";
 
 // src/components/size-control/size-input.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { useRef } from "react";
-import { PencilIcon } from "@elementor/icons";
+import { MathFunctionIcon } from "@elementor/icons";
 import { Box, InputAdornment as InputAdornment2 } from "@elementor/ui";
 
 // src/utils/size-control.ts
-var defaultUnits = ["px", "%", "em", "rem", "vw", "vh"];
+var lengthUnits = ["px", "%", "em", "rem", "vw", "vh"];
+var angleUnits = ["deg", "rad", "grad", "turn"];
+var timeUnits = ["s", "ms"];
 var defaultExtendedOptions = ["auto", "custom"];
+var DEFAULT_UNIT = "px";
+var DEFAULT_SIZE = NaN;
 function isUnitExtendedOption(unit) {
   return defaultExtendedOptions.includes(unit);
 }
 
 // src/components/size-control/text-field-inner-selection.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { forwardRef, useId } from "react";
+import { sizePropTypeUtil } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import {
   bindMenu,
@@ -512,6 +557,7 @@ import {
   Button as Button2,
   InputAdornment,
   Menu,
+  styled as styled2,
   TextField as TextField3,
   usePopupState
 } from "@elementor/ui";
@@ -524,25 +570,30 @@ var TextFieldInnerSelection = forwardRef(
     onBlur,
     onKeyDown,
     onKeyUp,
-    shouldBlockInput = false,
     inputProps,
-    disabled
+    disabled,
+    isPopoverOpen
   }, ref) => {
-    return /* @__PURE__ */ React13.createElement(
+    const { placeholder: boundPropPlaceholder } = useBoundProp(sizePropTypeUtil);
+    const getCursorStyle = () => ({
+      input: { cursor: inputProps.readOnly ? "default !important" : void 0 }
+    });
+    return /* @__PURE__ */ React14.createElement(
       TextField3,
       {
         ref,
-        sx: { input: { cursor: shouldBlockInput ? "default !important" : void 0 } },
+        sx: getCursorStyle(),
         size: "tiny",
         fullWidth: true,
-        type: shouldBlockInput ? void 0 : type,
+        type,
         value,
-        onChange: shouldBlockInput ? void 0 : onChange,
-        onKeyDown: shouldBlockInput ? void 0 : onKeyDown,
-        onKeyUp: shouldBlockInput ? void 0 : onKeyUp,
+        onChange,
+        onKeyDown,
+        onKeyUp,
         disabled,
         onBlur,
-        placeholder,
+        focused: isPopoverOpen ? true : void 0,
+        placeholder: placeholder ?? (String(boundPropPlaceholder?.size ?? "") || void 0),
         InputProps: inputProps
       }
     );
@@ -564,17 +615,17 @@ var SelectionEndAdornment = ({
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React13.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React13.createElement(
-    Button2,
+  const { placeholder, showPrimaryColor } = useUnitPlaceholder(value);
+  return /* @__PURE__ */ React14.createElement(InputAdornment, { position: "end" }, /* @__PURE__ */ React14.createElement(
+    StyledButton,
     {
+      isPrimaryColor: showPrimaryColor,
       size: "small",
-      color: "secondary",
       disabled,
-      sx: { font: "inherit", minWidth: "initial", textTransform: "uppercase" },
       ...bindTrigger(popupState)
     },
-    alternativeOptionLabels[value] ?? value
-  ), /* @__PURE__ */ React13.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React13.createElement(
+    placeholder ?? alternativeOptionLabels[value] ?? value
+  ), /* @__PURE__ */ React14.createElement(Menu, { MenuListProps: { dense: true }, ...bindMenu(popupState) }, options.map((option, index) => /* @__PURE__ */ React14.createElement(
     MenuListItem2,
     {
       key: option,
@@ -584,6 +635,34 @@ var SelectionEndAdornment = ({
     alternativeOptionLabels[option] ?? option.toUpperCase()
   ))));
 };
+function useUnitPlaceholder(value) {
+  const { value: externalValue, placeholder } = useBoundProp(sizePropTypeUtil);
+  const size = externalValue?.size;
+  const unit = externalValue?.unit;
+  const isCustomUnitWithSize = value === "custom" && Boolean(size);
+  const isAutoUnit = value === "auto";
+  const showPrimaryColor = isAutoUnit || isCustomUnitWithSize || Boolean(size);
+  if (!placeholder) {
+    return {
+      placeholder: null,
+      showPrimaryColor
+    };
+  }
+  const isMissingUnit = !unit;
+  const showPlaceholder = isMissingUnit && value === DEFAULT_UNIT;
+  return {
+    placeholder: showPlaceholder ? placeholder.unit : void 0,
+    showPrimaryColor
+  };
+}
+var StyledButton = styled2(Button2, {
+  shouldForwardProp: (prop) => prop !== "isPrimaryColor"
+})(({ isPrimaryColor, theme }) => ({
+  color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
+  font: "inherit",
+  minWidth: "initial",
+  textTransform: "uppercase"
+}));
 
 // src/components/size-control/size-input.tsx
 var RESTRICTED_INPUT_KEYS = ["e", "E", "+", "-"];
@@ -624,11 +703,12 @@ var SizeInput = ({
   };
   const inputProps = {
     ...popupAttributes,
+    readOnly: isUnitExtendedOption(unit),
     autoComplete: "off",
     onClick,
     onFocus,
-    startAdornment: startIcon ? /* @__PURE__ */ React14.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
-    endAdornment: /* @__PURE__ */ React14.createElement(
+    startAdornment: startIcon ? /* @__PURE__ */ React15.createElement(InputAdornment2, { position: "start", disabled }, startIcon) : void 0,
+    endAdornment: /* @__PURE__ */ React15.createElement(
       SelectionEndAdornment,
       {
         disabled,
@@ -636,7 +716,7 @@ var SizeInput = ({
         onClick: handleUnitChange,
         value: unit,
         alternativeOptionLabels: {
-          custom: /* @__PURE__ */ React14.createElement(PencilIcon, { fontSize: "small" })
+          custom: /* @__PURE__ */ React15.createElement(MathFunctionIcon, { fontSize: "tiny" })
         },
         menuItemsAttributes: units2.includes("custom") ? {
           custom: popupAttributes
@@ -644,7 +724,7 @@ var SizeInput = ({
       }
     )
   };
-  return /* @__PURE__ */ React14.createElement(ControlActions, null, /* @__PURE__ */ React14.createElement(Box, null, /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(ControlActions, null, /* @__PURE__ */ React15.createElement(Box, null, /* @__PURE__ */ React15.createElement(
     TextFieldInnerSelection,
     {
       disabled,
@@ -659,18 +739,37 @@ var SizeInput = ({
       },
       onKeyUp: handleKeyUp,
       onBlur,
-      shouldBlockInput: isUnitExtendedOption(unit),
-      inputProps
+      inputProps,
+      isPopoverOpen: popupState.isOpen
     }
   )));
 };
 
 // src/components/text-field-popover.tsx
-import * as React15 from "react";
+import * as React16 from "react";
+import { useEffect, useRef as useRef2 } from "react";
+import { PopoverHeader } from "@elementor/editor-ui";
+import { MathFunctionIcon as MathFunctionIcon2 } from "@elementor/icons";
 import { bindPopover, Popover, TextField as TextField4 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
+var SIZE = "tiny";
 var TextFieldPopover = (props) => {
   const { popupState, restoreValue, anchorRef, value, onChange } = props;
-  return /* @__PURE__ */ React15.createElement(
+  const inputRef = useRef2(null);
+  useEffect(() => {
+    if (popupState.isOpen) {
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      });
+    }
+  }, [popupState.isOpen]);
+  const handleClose = () => {
+    restoreValue();
+    popupState.close();
+  };
+  return /* @__PURE__ */ React16.createElement(
     Popover,
     {
       disablePortal: true,
@@ -678,20 +777,24 @@ var TextFieldPopover = (props) => {
         paper: {
           sx: {
             borderRadius: 2,
-            width: anchorRef.current?.offsetWidth + "px",
-            p: 1.5
+            width: anchorRef.current?.offsetWidth + "px"
           }
         }
       },
       ...bindPopover(popupState),
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       transformOrigin: { vertical: "top", horizontal: "center" },
-      onClose: () => {
-        restoreValue();
-        popupState.close();
-      }
+      onClose: handleClose
     },
-    /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement(
+      PopoverHeader,
+      {
+        title: __3("CSS function", "elementor"),
+        onClose: handleClose,
+        icon: /* @__PURE__ */ React16.createElement(MathFunctionIcon2, { fontSize: SIZE })
+      }
+    ),
+    /* @__PURE__ */ React16.createElement(
       TextField4,
       {
         value,
@@ -700,8 +803,9 @@ var TextFieldPopover = (props) => {
         type: "text",
         fullWidth: true,
         inputProps: {
-          autoFocus: true
-        }
+          ref: inputRef
+        },
+        sx: { pt: 0, pr: 1.5, pb: 1.5, pl: 1.5 }
       }
     )
   );
@@ -709,14 +813,10 @@ var TextFieldPopover = (props) => {
 
 // src/hooks/use-size-extended-options.ts
 import { useMemo } from "react";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
-var EXPERIMENT_ID = "e_v_3_30";
 function useSizeExtendedOptions(options, disableCustom) {
   return useMemo(() => {
-    const isVersion330Active = isExperimentActive(EXPERIMENT_ID);
-    const shouldDisableCustom = !isVersion330Active || disableCustom;
     const extendedOptions = [...options];
-    if (!shouldDisableCustom && !extendedOptions.includes("custom")) {
+    if (!disableCustom && !extendedOptions.includes("custom")) {
       extendedOptions.push("custom");
     } else if (options.includes("custom")) {
       extendedOptions.splice(extendedOptions.indexOf("custom"), 1);
@@ -726,7 +826,7 @@ function useSizeExtendedOptions(options, disableCustom) {
 }
 
 // src/hooks/use-sync-external-state.tsx
-import { useEffect, useState as useState2 } from "react";
+import { useEffect as useEffect2, useState as useState3 } from "react";
 var useSyncExternalState = ({
   external,
   setExternal,
@@ -745,8 +845,8 @@ var useSyncExternalState = ({
     }
     return externalValue;
   }
-  const [internal, setInternal] = useState2(toInternal(external, null));
-  useEffect(() => {
+  const [internal, setInternal] = useState3(toInternal(external, null));
+  useEffect2(() => {
     setInternal((prevInternal) => toInternal(external, prevInternal));
   }, [external]);
   const setInternalValue = (setter) => {
@@ -759,125 +859,149 @@ var useSyncExternalState = ({
 };
 
 // src/controls/size-control.tsx
-var DEFAULT_UNIT = "px";
-var DEFAULT_SIZE = NaN;
-var SizeControl = createControl((props) => {
-  const defaultUnit = props.defaultUnit ?? DEFAULT_UNIT;
-  const { units: units2 = [...defaultUnits], placeholder, startIcon, anchorRef } = props;
-  const { value: sizeValue, setValue: setSizeValue, disabled, restoreValue } = useBoundProp(sizePropTypeUtil);
-  const [internalState, setInternalState] = useState3(createStateFromSizeProp(sizeValue, defaultUnit));
-  const activeBreakpoint = useActiveBreakpoint();
-  const extendedOptions = useSizeExtendedOptions(props.extendedOptions || [], props.disableCustom ?? false);
-  const popupState = usePopupState2({ variant: "popover" });
-  const [state, setState] = useSyncExternalState({
-    external: internalState,
-    setExternal: (newState) => setSizeValue(extractValueFromState(newState)),
-    persistWhen: (newState) => {
-      if (!newState?.unit) {
-        return false;
+var defaultSelectedUnit = {
+  length: "px",
+  angle: "deg",
+  time: "ms"
+};
+var defaultUnits = {
+  length: [...lengthUnits],
+  angle: [...angleUnits],
+  time: [...timeUnits]
+};
+var SizeControl = createControl(
+  ({
+    variant = "length",
+    defaultUnit,
+    units: units2,
+    placeholder,
+    startIcon,
+    anchorRef,
+    extendedOptions,
+    disableCustom
+  }) => {
+    const {
+      value: sizeValue,
+      setValue: setSizeValue,
+      disabled,
+      restoreValue,
+      placeholder: externalPlaceholder
+    } = useBoundProp(sizePropTypeUtil2);
+    const actualDefaultUnit = defaultUnit ?? externalPlaceholder?.unit ?? defaultSelectedUnit[variant];
+    const actualUnits = units2 ?? [...defaultUnits[variant]];
+    const [internalState, setInternalState] = useState4(createStateFromSizeProp(sizeValue, actualDefaultUnit));
+    const activeBreakpoint = useActiveBreakpoint();
+    const actualExtendedOptions = useSizeExtendedOptions(extendedOptions || [], disableCustom ?? false);
+    const popupState = usePopupState2({ variant: "popover" });
+    const [state, setState] = useSyncExternalState({
+      external: internalState,
+      setExternal: (newState) => setSizeValue(extractValueFromState(newState)),
+      persistWhen: (newState) => {
+        if (!newState?.unit) {
+          return false;
+        }
+        if (isUnitExtendedOption(newState.unit)) {
+          return newState.unit === "auto" ? true : !!newState.custom;
+        }
+        return !!newState?.numeric || newState?.numeric === 0;
+      },
+      fallback: (newState) => ({
+        unit: newState?.unit ?? actualDefaultUnit,
+        numeric: newState?.numeric ?? DEFAULT_SIZE,
+        custom: newState?.custom ?? ""
+      })
+    });
+    const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = actualDefaultUnit } = extractValueFromState(state) || {};
+    const handleUnitChange = (newUnit) => {
+      if (newUnit === "custom") {
+        popupState.open(anchorRef?.current);
       }
-      if (isUnitExtendedOption(newState.unit)) {
-        return newState.unit === "auto" ? true : !!newState.custom;
+      setState((prev) => ({ ...prev, unit: newUnit }));
+    };
+    const handleSizeChange = (event) => {
+      const { value: size } = event.target;
+      if (controlUnit === "auto") {
+        setState((prev) => ({ ...prev, unit: controlUnit }));
+        return;
       }
-      return !!newState?.numeric || newState?.numeric === 0;
-    },
-    fallback: (newState) => ({
-      unit: newState?.unit ?? defaultUnit,
-      numeric: newState?.numeric ?? DEFAULT_SIZE,
-      custom: newState?.custom ?? ""
-    })
-  });
-  const { size: controlSize = DEFAULT_SIZE, unit: controlUnit = defaultUnit } = extractValueFromState(state) || {};
-  const handleUnitChange = (newUnit) => {
-    if (newUnit === "custom") {
-      popupState.open(anchorRef?.current);
-    }
-    setState((prev) => ({ ...prev, unit: newUnit }));
-  };
-  const handleSizeChange = (event) => {
-    const { value: size } = event.target;
-    if (controlUnit === "auto") {
-      setState((prev) => ({ ...prev, unit: controlUnit }));
-      return;
-    }
-    setState((prev) => ({
-      ...prev,
-      [controlUnit === "custom" ? "custom" : "numeric"]: formatSize(size, controlUnit),
-      unit: controlUnit
-    }));
-  };
-  const onInputFocus = (event) => {
-    if (isUnitExtendedOption(state.unit)) {
-      event.target?.blur();
-    }
-  };
-  const onInputClick = (event) => {
-    if (event.target.closest("input") && "custom" === state.unit) {
-      popupState.open(anchorRef?.current);
-    }
-  };
-  useEffect2(() => {
-    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]
+      setState((prev) => ({
+        ...prev,
+        [controlUnit === "custom" ? "custom" : "numeric"]: formatSize(size, controlUnit),
+        unit: controlUnit
+      }));
     };
-    if (mergedStates.unit !== "auto" && areStatesEqual(state, mergedStates)) {
-      return;
-    }
-    if (state.unit === newState.unit) {
-      setInternalState(mergedStates);
-      return;
-    }
-    setState(newState);
-  }, [sizeValue]);
-  useEffect2(() => {
-    const newState = createStateFromSizeProp(sizeValue, defaultUnit);
-    if (activeBreakpoint && !areStatesEqual(newState, state)) {
+    const onInputClick = (event) => {
+      if (event.target.closest("input") && "custom" === state.unit) {
+        popupState.open(anchorRef?.current);
+      }
+    };
+    useEffect3(() => {
+      const newState = createStateFromSizeProp(
+        sizeValue,
+        state.unit === "custom" ? state.unit : actualDefaultUnit,
+        "",
+        state.custom
+      );
+      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;
+      }
+      if (state.unit === newState.unit) {
+        setInternalState(mergedStates);
+        return;
+      }
       setState(newState);
-    }
-  }, [activeBreakpoint]);
-  return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
-    SizeInput,
-    {
-      disabled,
-      size: controlSize,
-      unit: controlUnit,
-      units: [...units2, ...extendedOptions || []],
-      placeholder,
-      startIcon,
-      handleSizeChange,
-      handleUnitChange,
-      onBlur: restoreValue,
-      onFocus: onInputFocus,
-      onClick: onInputClick,
-      popupState
-    }
-  ), anchorRef?.current && /* @__PURE__ */ React16.createElement(
-    TextFieldPopover,
-    {
-      popupState,
-      anchorRef,
-      restoreValue,
-      value: controlSize,
-      onChange: handleSizeChange
-    }
-  ));
-});
+    }, [sizeValue]);
+    useEffect3(() => {
+      const newState = createStateFromSizeProp(sizeValue, actualDefaultUnit, "", state.custom);
+      if (activeBreakpoint && !areStatesEqual(newState, state)) {
+        setState(newState);
+      }
+    }, [activeBreakpoint]);
+    return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(
+      SizeInput,
+      {
+        disabled,
+        size: controlSize,
+        unit: controlUnit,
+        units: [...actualUnits, ...actualExtendedOptions || []],
+        placeholder,
+        startIcon,
+        handleSizeChange,
+        handleUnitChange,
+        onBlur: restoreValue,
+        onClick: onInputClick,
+        popupState
+      }
+    ), anchorRef?.current && /* @__PURE__ */ React17.createElement(
+      TextFieldPopover,
+      {
+        popupState,
+        anchorRef,
+        restoreValue,
+        value: controlSize,
+        onChange: handleSizeChange
+      }
+    ));
+  }
+);
 function formatSize(size, unit) {
   if (isUnitExtendedOption(unit)) {
     return unit === "auto" ? "" : String(size ?? "");
   }
   return size || size === 0 ? Number(size) : NaN;
 }
-function createStateFromSizeProp(sizeValue, defaultUnit) {
+function createStateFromSizeProp(sizeValue, defaultUnit, defaultSize = "", customState = "") {
   const unit = sizeValue?.unit ?? defaultUnit;
-  const size = sizeValue?.size ?? "";
+  const size = sizeValue?.size ?? defaultSize;
   return {
     numeric: !isUnitExtendedOption(unit) && !isNaN(Number(size)) && (size || size === 0) ? Number(size) : DEFAULT_SIZE,
-    custom: unit === "custom" ? String(size) : "",
+    custom: unit === "custom" ? String(size) : customState,
     unit
   };
 }
@@ -908,19 +1032,19 @@ function areStatesEqual(state1, state2) {
 }
 
 // src/controls/stroke-control.tsx
-import * as React19 from "react";
-import { forwardRef as forwardRef2, useRef as useRef2 } from "react";
+import * as React20 from "react";
+import { forwardRef as forwardRef2, useRef as useRef3 } from "react";
 import { strokePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid2 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/section-content.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { Stack as Stack3 } from "@elementor/ui";
-var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React17.createElement(Stack3, { gap, sx: { ...sx } }, children);
+var SectionContent = ({ gap = 2, sx, children }) => /* @__PURE__ */ React18.createElement(Stack3, { gap, sx: { ...sx } }, children);
 
 // src/controls/color-control.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { colorPropTypeUtil } from "@elementor/editor-props";
 import { UnstableColorField } from "@elementor/ui";
 var ColorControl = createControl(
@@ -930,7 +1054,7 @@ var ColorControl = createControl(
     const handleChange = (selectedColor) => {
       setValue(selectedColor || null);
     };
-    return /* @__PURE__ */ React18.createElement(ControlActions, null, /* @__PURE__ */ React18.createElement(
+    return /* @__PURE__ */ React19.createElement(ControlActions, null, /* @__PURE__ */ React19.createElement(
       UnstableColorField,
       {
         size: "tiny",
@@ -971,34 +1095,34 @@ var ColorControl = createControl(
 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: __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))));
+  const rowRef = useRef3(null);
+  return /* @__PURE__ */ React20.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React20.createElement(SectionContent, null, /* @__PURE__ */ React20.createElement(Control, { bind: "width", label: __4("Stroke width", "elementor"), ref: rowRef }, /* @__PURE__ */ React20.createElement(SizeControl, { units, anchorRef: rowRef })), /* @__PURE__ */ React20.createElement(Control, { bind: "color", label: __4("Stroke color", "elementor") }, /* @__PURE__ */ React20.createElement(ColorControl, null))));
 });
-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))));
+var Control = forwardRef2(({ bind, label, children }, ref) => /* @__PURE__ */ React20.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React20.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React20.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React20.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React20.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 * as React27 from "react";
+import { useRef as useRef4 } from "react";
 import { boxShadowPropTypeUtil, shadowPropTypeUtil } from "@elementor/editor-props";
 import { FormLabel as FormLabel2, Grid as Grid4, UnstableColorIndicator } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 
 // src/components/popover-content.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { Stack as Stack4 } from "@elementor/ui";
-var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React20.createElement(Stack4, { ...props, gap }, children);
+var PopoverContent = ({ gap = 1.5, children, ...props }) => /* @__PURE__ */ React21.createElement(Stack4, { ...props, gap }, children);
 
 // src/components/popover-grid-container.tsx
 import { forwardRef as forwardRef3 } from "react";
-import * as React21 from "react";
+import * as React22 from "react";
 import { Grid as Grid3 } from "@elementor/ui";
 var PopoverGridContainer = forwardRef3(
-  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React21.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
+  ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React22.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
 // src/components/repeater.tsx
-import * as React25 from "react";
-import { useEffect as useEffect3, useState as useState4 } from "react";
+import * as React26 from "react";
+import { useEffect as useEffect4, useState as useState5 } from "react";
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
@@ -1012,18 +1136,18 @@ import {
   UnstableTag,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/control-adornments/control-adornments.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 
 // src/control-adornments/control-adornments-context.tsx
-import * as React22 from "react";
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var Context2 = createContext5(null);
-var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React22.createElement(Context2.Provider, { value: { items: items2 } }, children);
+import * as React23 from "react";
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var Context2 = createContext6(null);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React23.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
-  const context = useContext5(Context2);
+  const context = useContext6(Context2);
   return context?.items ?? [];
 };
 
@@ -1033,30 +1157,25 @@ function ControlAdornments() {
   if (items2?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(React23.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React23.createElement(Adornment, { key: id })));
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React24.createElement(Adornment, { key: id })));
 }
 
-// src/locations.ts
-import { createReplaceableLocation } from "@elementor/locations";
-var { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon } = createReplaceableLocation();
-var { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel } = createReplaceableLocation();
-
 // src/components/sortable.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Divider,
   List,
   ListItem,
-  styled as styled2,
+  styled as styled3,
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React24.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React24.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React25.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React25.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children, disabled }) => {
-  return /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(
     UnstableSortableItem,
     {
       id,
@@ -1069,12 +1188,12 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React24.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React24.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React24.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React25.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React25.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React25.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
 };
-var StyledListItem = styled2(ListItem)`
+var StyledListItem = styled3(ListItem)`
 	position: relative;
 	margin-inline: 0px;
 	padding-inline: 0px;
@@ -1103,8 +1222,8 @@ var StyledListItem = styled2(ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React24.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React24.createElement(GripVerticalIcon, { fontSize: "tiny" }));
-var StyledDivider = styled2(Divider)`
+var SortableTrigger = (props) => /* @__PURE__ */ React25.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React25.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var StyledDivider = styled3(Divider)`
 	height: 0px;
 	border: none;
 	overflow: visible;
@@ -1121,8 +1240,15 @@ var StyledDivider = styled2(Divider)`
 	}
 `;
 
+// src/components/unstable-repeater/locations.ts
+import { createLocation, createReplaceableLocation } from "@elementor/locations";
+var { Slot: RepeaterItemIconSlot, inject: injectIntoRepeaterItemIcon } = createReplaceableLocation();
+var { Slot: RepeaterItemLabelSlot, inject: injectIntoRepeaterItemLabel } = createReplaceableLocation();
+var { Slot: RepeaterHeaderActionsSlot, inject: injectIntoRepeaterHeaderActions } = createLocation();
+var { Slot: RepeaterItemActionsSlot, inject: injectIntoRepeaterItemActions } = createLocation();
+
 // src/components/repeater.tsx
-var SIZE = "tiny";
+var SIZE2 = "tiny";
 var EMPTY_OPEN_ITEM = -1;
 var Repeater = ({
   label,
@@ -1137,20 +1263,20 @@ var Repeater = ({
   isSortable = true,
   collectionPropUtil
 }) => {
-  const [openItem, setOpenItem] = useState4(EMPTY_OPEN_ITEM);
+  const [openItem, setOpenItem] = useState5(EMPTY_OPEN_ITEM);
   const [items2, setItems] = useSyncExternalState({
     external: repeaterValues,
     // @ts-expect-error - as long as persistWhen => true, value will never be null
     setExternal: setRepeaterValues,
     persistWhen: () => true
   });
-  const [uniqueKeys, setUniqueKeys] = useState4(items2.map((_, index) => index));
-  const generateNextKey = (source) => {
+  const [uniqueKeys, setUniqueKeys] = useState5(items2.map((_, index) => index));
+  const generateNextKey2 = (source) => {
     return 1 + Math.max(0, ...source);
   };
   const addRepeaterItem = () => {
     const newItem = structuredClone(itemSettings.initialValues);
-    const newKey = generateNextKey(uniqueKeys);
+    const newKey = generateNextKey2(uniqueKeys);
     if (addToBottom) {
       setItems([...items2, newItem]);
       setUniqueKeys([...uniqueKeys, newKey]);
@@ -1164,7 +1290,7 @@ var Repeater = ({
   };
   const duplicateRepeaterItem = (index) => {
     const newItem = structuredClone(items2[index]);
-    const newKey = generateNextKey(uniqueKeys);
+    const newKey = generateNextKey2(uniqueKeys);
     const atPosition = 1 + index;
     setItems([...items2.slice(0, atPosition), newItem, ...items2.slice(atPosition)]);
     setUniqueKeys([...uniqueKeys.slice(0, atPosition), newKey, ...uniqueKeys.slice(atPosition)]);
@@ -1201,7 +1327,7 @@ var Repeater = ({
       });
     });
   };
-  return /* @__PURE__ */ React25.createElement(SectionContent, null, /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(SectionContent, null, /* @__PURE__ */ React26.createElement(
     Stack5,
     {
       direction: "row",
@@ -1210,31 +1336,31 @@ var Repeater = ({
       gap: 1,
       sx: { marginInlineEnd: -0.75 }
     },
-    /* @__PURE__ */ React25.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React25.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React25.createElement(
+    /* @__PURE__ */ React26.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label),
+    /* @__PURE__ */ React26.createElement(ControlAdornments, null),
+    /* @__PURE__ */ React26.createElement(
       IconButton,
       {
-        size: SIZE,
+        size: SIZE2,
         sx: { ml: "auto" },
         disabled,
         onClick: addRepeaterItem,
-        "aria-label": __4("Add item", "elementor")
+        "aria-label": __5("Add item", "elementor")
       },
-      /* @__PURE__ */ React25.createElement(PlusIcon, { fontSize: SIZE })
+      /* @__PURE__ */ React26.createElement(PlusIcon, { fontSize: SIZE2 })
     )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React25.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
+  ), 0 < uniqueKeys.length && /* @__PURE__ */ React26.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React25.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React25.createElement(
+    return /* @__PURE__ */ React26.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React26.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React25.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React25.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React25.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React25.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React26.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React26.createElement(itemSettings.Label, { value })),
+        startIcon: /* @__PURE__ */ React26.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React26.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -1244,7 +1370,7 @@ var Repeater = ({
         showToggle,
         collectionPropUtil
       },
-      (props) => /* @__PURE__ */ React25.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
+      (props) => /* @__PURE__ */ React26.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
     ));
   })));
 };
@@ -1263,12 +1389,12 @@ var RepeaterItem = ({
   disabled,
   collectionPropUtil
 }) => {
-  const [anchorEl, setAnchorEl] = useState4(null);
+  const [anchorEl, setAnchorEl] = useState5(null);
   const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  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(
+  const duplicateLabel = __5("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __5("Show", "elementor") : __5("Hide", "elementor");
+  const removeLabel = __5("Remove", "elementor");
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(
     UnstableTag,
     {
       disabled,
@@ -1277,12 +1403,12 @@ var RepeaterItem = ({
       fullWidth: true,
       ref: setRef,
       variant: "outlined",
-      "aria-label": __4("Open item", "elementor"),
+      "aria-label": __5("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 }))))
+      actions: /* @__PURE__ */ React26.createElement(React26.Fragment, null, showDuplicate && /* @__PURE__ */ React26.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(IconButton, { size: SIZE2, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React26.createElement(CopyIcon, { fontSize: SIZE2 }))), showToggle && /* @__PURE__ */ React26.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(IconButton, { size: SIZE2, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React26.createElement(EyeOffIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React26.createElement(EyeIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React26.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React26.createElement(IconButton, { size: SIZE2, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React26.createElement(XIcon, { fontSize: SIZE2 }))))
     }
-  ), /* @__PURE__ */ React25.createElement(
+  ), /* @__PURE__ */ React26.createElement(
     Popover2,
     {
       disablePortal: true,
@@ -1296,14 +1422,14 @@ var RepeaterItem = ({
       ...popoverProps,
       anchorEl: ref
     },
-    /* @__PURE__ */ React25.createElement(Box2, null, children({ anchorEl, collectionPropUtil }))
+    /* @__PURE__ */ React26.createElement(Box2, null, children({ anchorEl, collectionPropUtil }))
   ));
 };
 var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState4(null);
+  const [ref, setRef] = useState5(null);
   const popoverState = usePopupState3({ variant: "popover" });
   const popoverProps = bindPopover2(popoverState);
-  useEffect3(() => {
+  useEffect4(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -1320,14 +1446,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, isDisabled: () => disabled }, /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React27.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React27.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: value ?? [],
       setValues: setValue,
-      label: __5("Box shadow", "elementor"),
+      label: __6("Box shadow", "elementor"),
       itemSettings: {
         Icon: ItemIcon,
         Label: ItemLabel,
@@ -1337,29 +1463,29 @@ var BoxShadowRepeaterControl = createControl(() => {
     }
   ));
 });
-var ItemIcon = ({ value }) => /* @__PURE__ */ React26.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
+var ItemIcon = ({ value }) => /* @__PURE__ */ React27.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
 var ItemContent = ({ anchorEl, bind }) => {
-  return /* @__PURE__ */ React26.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React26.createElement(Content, { anchorEl }));
+  return /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(Content, { anchorEl }));
 };
 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: __5("Color", "elementor") }, /* @__PURE__ */ React26.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React26.createElement(Control2, { bind: "position", label: __5("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React26.createElement(
+  const rowRef = [useRef4(null), useRef4(null)];
+  return /* @__PURE__ */ React27.createElement(PropProvider, { ...context }, /* @__PURE__ */ React27.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React27.createElement(PopoverGridContainer, null, /* @__PURE__ */ React27.createElement(Control2, { bind: "color", label: __6("Color", "elementor") }, /* @__PURE__ */ React27.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React27.createElement(Control2, { bind: "position", label: __6("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React27.createElement(
     SelectControl,
     {
       options: [
-        { label: __5("Inset", "elementor"), value: "inset" },
-        { label: __5("Outset", "elementor"), value: null }
+        { label: __6("Inset", "elementor"), value: "inset" },
+        { label: __6("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__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] })))));
+  ))), /* @__PURE__ */ React27.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React27.createElement(Control2, { bind: "hOffset", label: __6("Horizontal", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React27.createElement(Control2, { bind: "vOffset", label: __6("Vertical", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React27.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React27.createElement(Control2, { bind: "blur", label: __6("Blur", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React27.createElement(Control2, { bind: "spread", label: __6("Spread", "elementor") }, /* @__PURE__ */ React27.createElement(SizeControl, { anchorRef: rowRef[1] })))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__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))));
+}) => /* @__PURE__ */ React27.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React27.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React27.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React27.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React27.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React27.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 || {};
@@ -1373,7 +1499,7 @@ var ItemLabel = ({ value }) => {
     blurSize + blurUnit,
     spreadSize + spreadUnit
   ].join(" ");
-  return /* @__PURE__ */ React26.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
+  return /* @__PURE__ */ React27.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1404,65 +1530,49 @@ var initialShadow = {
 
 // src/controls/filter-repeater-control.tsx
 import * as React30 from "react";
-import { useRef as useRef5 } from "react";
+import { useRef as useRef6 } from "react";
 import {
-  blurFilterPropTypeUtil,
-  brightnessFilterPropTypeUtil,
-  contrastFilterPropTypeUtil,
-  dropShadowFilterPropTypeUtil,
-  filterPropTypeUtil,
-  grayscaleFilterPropTypeUtil,
-  hueRotateFilterPropTypeUtil,
-  invertFilterPropTypeUtil,
-  saturateFilterPropTypeUtil,
-  sepiaFilterPropTypeUtil
+  cssFilterFunctionPropUtil,
+  filterPropTypeUtil
 } from "@elementor/editor-props";
 import { backdropFilterPropTypeUtil } from "@elementor/editor-props";
-import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
-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";
-import { Stack as Stack6 } from "@elementor/ui";
-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));
-};
+import { Box as Box4, Grid as Grid6 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/controls/filter-control/drop-shadow-item-content.tsx
 import * as React28 from "react";
-import { useRef as useRef4 } from "react";
+import { useRef as useRef5 } from "react";
+import { dropShadowFilterPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid5 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 var items = [
   {
     bind: "xAxis",
-    label: __6("X-axis", "elementor"),
+    label: __7("X-axis", "elementor"),
     rowIndex: 0
   },
   {
     bind: "yAxis",
-    label: __6("Y-axis", "elementor"),
+    label: __7("Y-axis", "elementor"),
     rowIndex: 0
   },
   {
     bind: "blur",
-    label: __6("Blur", "elementor"),
+    label: __7("Blur", "elementor"),
     rowIndex: 1
   },
   {
     bind: "color",
-    label: __6("Color", "elementor"),
+    label: __7("Color", "elementor"),
     rowIndex: 1
   }
 ];
 var DropShadowItemContent = ({
-  propType,
   units: units2,
   anchorEl
 }) => {
-  const context = useBoundProp(propType);
-  const rowRefs = [useRef4(null), useRef4(null)];
+  const context = useBoundProp(dropShadowFilterPropTypeUtil);
+  const rowRefs = [useRef5(null), useRef5(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" }))))));
 };
 
@@ -1470,7 +1580,7 @@ var DropShadowItemContent = ({
 import * as React29 from "react";
 import { Box as Box3 } from "@elementor/ui";
 var DropShadowItemLabel = ({ value }) => {
-  const { xAxis, yAxis, blur } = value.value;
+  const { xAxis, yAxis, blur } = value.value.args.value;
   const xValue = `${xAxis?.value?.size ?? 0}${xAxis?.value?.unit ?? "px"}`;
   const yValue = `${yAxis?.value?.size ?? 0}${yAxis?.value?.unit ?? "px"}`;
   const blurValue = `${blur?.value?.size ?? 10}${blur?.value?.unit ?? "px"}`;
@@ -1478,78 +1588,123 @@ var DropShadowItemLabel = ({ value }) => {
 };
 
 // src/controls/filter-repeater-control.tsx
-var DEFAULT_FILTER_KEY = "blur";
+var DEFAULT_FILTER = "blur";
 var filterConfig = {
   blur: {
-    defaultValue: { $$type: "radius", radius: { $$type: "size", value: { size: 0, unit: "px" } } },
-    name: __7("Blur", "elementor"),
-    valueName: __7("Radius", "elementor"),
-    propType: blurFilterPropTypeUtil,
-    units: defaultUnits.filter((unit) => unit !== "%")
-  },
-  "drop-shadow": {
     defaultValue: {
-      $$type: "drop-shadow",
+      $$type: "css-filter-func",
       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)" }
+        func: { $$type: "string", value: "blur" },
+        args: { $$type: "size", value: { size: 0, unit: "px" } }
       }
     },
-    name: __7("Drop shadow", "elementor"),
-    valueName: __7("Drop-shadow", "elementor"),
-    propType: dropShadowFilterPropTypeUtil,
-    units: defaultUnits.filter((unit) => unit !== "%")
+    name: __8("Blur", "elementor"),
+    valueName: __8("Radius", "elementor"),
+    units: lengthUnits.filter((unit) => unit !== "%")
   },
   brightness: {
-    defaultValue: { $$type: "amount", amount: { $$type: "size", value: { size: 100, unit: "%" } } },
-    name: __7("Brightness", "elementor"),
-    valueName: __7("Amount", "elementor"),
-    propType: brightnessFilterPropTypeUtil,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "brightness" },
+        args: { $$type: "size", value: { size: 100, unit: "%" } }
+      }
+    },
+    name: __8("Brightness", "elementor"),
+    valueName: __8("Amount", "elementor"),
     units: ["%"]
   },
   contrast: {
-    defaultValue: { $$type: "contrast", contrast: { $$type: "size", value: { size: 100, unit: "%" } } },
-    name: __7("Contrast", "elementor"),
-    valueName: __7("Amount", "elementor"),
-    propType: contrastFilterPropTypeUtil,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "contrast" },
+        args: { $$type: "size", value: { size: 100, unit: "%" } }
+      }
+    },
+    name: __8("Contrast", "elementor"),
+    valueName: __8("Amount", "elementor"),
     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,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "hue-rotate" },
+        args: { $$type: "size", value: { size: 0, unit: "deg" } }
+      }
+    },
+    name: __8("Hue Rotate", "elementor"),
+    valueName: __8("Angle", "elementor"),
     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,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "saturate" },
+        args: { $$type: "size", value: { size: 100, unit: "%" } }
+      }
+    },
+    name: __8("Saturate", "elementor"),
+    valueName: __8("Amount", "elementor"),
     units: ["%"]
   },
   grayscale: {
-    defaultValue: { $$type: "grayscale", grayscale: { $$type: "size", value: { size: 0, unit: "%" } } },
-    name: __7("Grayscale", "elementor"),
-    valueName: __7("Amount", "elementor"),
-    propType: grayscaleFilterPropTypeUtil,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "grayscale" },
+        args: { $$type: "size", value: { size: 0, unit: "%" } }
+      }
+    },
+    name: __8("Grayscale", "elementor"),
+    valueName: __8("Amount", "elementor"),
     units: ["%"]
   },
   invert: {
-    defaultValue: { $$type: "invert", invert: { $$type: "size", value: { size: 0, unit: "%" } } },
-    name: __7("Invert", "elementor"),
-    valueName: __7("Amount", "elementor"),
-    propType: invertFilterPropTypeUtil,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "invert" },
+        args: { $$type: "size", value: { size: 0, unit: "%" } }
+      }
+    },
+    name: __8("Invert", "elementor"),
+    valueName: __8("Amount", "elementor"),
     units: ["%"]
   },
   sepia: {
-    defaultValue: { $$type: "sepia", sepia: { $$type: "size", value: { size: 0, unit: "%" } } },
-    name: __7("Sepia", "elementor"),
-    valueName: __7("Amount", "elementor"),
-    propType: sepiaFilterPropTypeUtil,
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "sepia" },
+        args: { $$type: "size", value: { size: 0, unit: "%" } }
+      }
+    },
+    name: __8("Sepia", "elementor"),
+    valueName: __8("Amount", "elementor"),
     units: ["%"]
+  },
+  "drop-shadow": {
+    defaultValue: {
+      $$type: "css-filter-func",
+      value: {
+        func: { $$type: "string", value: "drop-shadow" },
+        args: {
+          $$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: __8("Drop shadow", "elementor"),
+    valueName: __8("Drop-shadow", "elementor"),
+    units: lengthUnits.filter((unit) => unit !== "%")
   }
 };
 var filterKeys = Object.keys(filterConfig);
@@ -1557,7 +1712,7 @@ 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 [propUtil, label] = filterPropName === "backdrop-filter" ? [backdropFilterPropTypeUtil, __8("Backdrop Filters", "elementor")] : [filterPropTypeUtil, __8("Filters", "elementor")];
   const { propType, value: filterValues, setValue, disabled } = useBoundProp(propUtil);
   return /* @__PURE__ */ React30.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React30.createElement(
     Repeater,
@@ -1572,24 +1727,20 @@ var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
         Icon: ItemIcon2,
         Label: ItemLabel2,
         Content: ItemContent2,
-        initialValues: {
-          $$type: DEFAULT_FILTER_KEY,
-          value: filterConfig[DEFAULT_FILTER_KEY].defaultValue
-        }
+        initialValues: filterConfig[DEFAULT_FILTER].defaultValue
       }
     }
   ));
 });
 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 });
+  return isSingleSize(value.value.func.value ?? "") ? /* @__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__ */ React30.createElement(Box4, { component: "span", style: { textTransform: "capitalize" } }, value.$$type, ":");
+  const { func, args } = value.value;
+  const defaultUnit = filterConfig[func.value ?? ""].defaultValue.value.args.value.unit ?? lengthUnits[0];
+  const { unit, size } = args.value ?? { unit: defaultUnit, size: 0 };
+  const label = /* @__PURE__ */ React30.createElement(Box4, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
   return /* @__PURE__ */ React30.createElement(Box4, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
 };
 var ItemContent2 = ({
@@ -1597,41 +1748,45 @@ var ItemContent2 = ({
   collectionPropUtil,
   anchorEl
 }) => {
-  const { value: filterValues, setValue } = useBoundProp(collectionPropUtil ?? filterPropTypeUtil);
+  const { value: filterValues = [] } = useBoundProp(collectionPropUtil ?? filterPropTypeUtil);
   const itemIndex = parseInt(bind, 10);
   const item = filterValues?.[itemIndex];
-  const handleChange = (e) => {
-    const newFilterValues = [...filterValues];
-    const filterType = e.target.value;
-    newFilterValues[itemIndex] = {
-      $$type: filterType,
-      value: { ...filterConfig[filterType].defaultValue }
-    };
-    setValue(newFilterValues);
-  };
-  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" },
-      size: "tiny",
-      value: item?.$$type ?? DEFAULT_FILTER_KEY,
-      onChange: handleChange,
-      fullWidth: true
-    },
-    filterKeys.map((filterKey) => /* @__PURE__ */ React30.createElement(MenuListItem3, { key: filterKey, value: filterKey }, filterConfig[filterKey].name))
-  ))), /* @__PURE__ */ React30.createElement(Content2, { filterType: item?.$$type, anchorEl })));
+  return item ? /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React30.createElement(PropContent, { item, anchorEl })) : null;
+};
+var PropContent = ({ item, anchorEl }) => {
+  const propContext = useBoundProp(cssFilterFunctionPropUtil);
+  const handleValueChange = (changedValue, options, meta) => {
+    let newValue = structuredClone(changedValue);
+    const newFuncName = newValue?.func.value ?? "";
+    if (meta?.bind === "func") {
+      newValue = structuredClone(filterConfig[newFuncName].defaultValue.value);
+    }
+    if (!newValue.args) {
+      return;
+    }
+    propContext.setValue(newValue);
+  };
+  return /* @__PURE__ */ React30.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React30.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React30.createElement(PopoverGridContainer, null, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, __8("Filter", "elementor"))), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React30.createElement(
+    SelectControl,
+    {
+      options: filterKeys.map((filterKey) => ({
+        label: filterConfig[filterKey].name,
+        value: filterKey
+      }))
+    }
+  )))), /* @__PURE__ */ React30.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React30.createElement(Content2, { filterType: item?.value.func, anchorEl }))));
 };
 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 });
+  const filterName = filterType?.value || DEFAULT_FILTER;
+  const filterItemConfig = filterConfig[filterName];
+  const { units: units2 = [] } = filterItemConfig;
+  return isSingleSize(filterName) ? /* @__PURE__ */ React30.createElement(SingleSizeItemContent, { filterType: filterName }) : /* @__PURE__ */ React30.createElement(DropShadowItemContent, { units: units2, anchorEl });
 };
 var SingleSizeItemContent = ({ filterType }) => {
-  const { propType, valueName, defaultValue, units: units2 } = filterConfig[filterType];
-  const { $$type } = defaultValue;
-  const context = useBoundProp(propType);
-  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 })))));
+  const { valueName, defaultValue, units: units2 } = filterConfig[filterType];
+  const rowRef = useRef6(null);
+  const defaultUnit = defaultValue.value.args.value.unit;
+  return /* @__PURE__ */ React30.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React30.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React30.createElement(SizeControl, { anchorRef: rowRef, units: units2, defaultUnit })));
 };
 
 // src/controls/toggle-control.tsx
@@ -1640,13 +1795,13 @@ import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-pro
 
 // src/components/control-toggle-button-group.tsx
 import * as React32 from "react";
-import { useEffect as useEffect4, useMemo as useMemo2, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
   Menu as Menu2,
   MenuItem,
-  styled as styled3,
+  styled as styled4,
   ToggleButton,
   ToggleButtonGroup,
   Typography as Typography3,
@@ -1665,7 +1820,7 @@ var ConditionalTooltip = ({
 };
 
 // src/components/control-toggle-button-group.tsx
-var StyledToggleButtonGroup = styled3(ToggleButtonGroup)`
+var StyledToggleButtonGroup = styled4(ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
 	button:not( :last-of-type ) {
 		border-start-end-radius: 0;
@@ -1680,6 +1835,18 @@ var StyledToggleButtonGroup = styled3(ToggleButtonGroup)`
 		border-end-end-radius: 8px;
 	}
 `;
+var StyledToggleButton = styled4(ToggleButton, {
+  shouldForwardProp: (prop) => prop !== "isPlaceholder"
+})`
+	${({ theme, isPlaceholder }) => isPlaceholder && `
+		color: ${theme.palette.text.tertiary};
+		background-color: ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.04)" : "rgba(0,0,0,0.02)"};
+		
+		&:hover {
+			background-color: ${theme.palette.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.04)"};
+		}
+	`}
+`;
 var ControlToggleButtonGroup = ({
   justify = "end",
   size = "tiny",
@@ -1689,12 +1856,14 @@ var ControlToggleButtonGroup = ({
   maxItems,
   exclusive = false,
   fullWidth = false,
-  disabled
+  disabled,
+  placeholder
 }) => {
   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 theme = useTheme();
+  const isRtl = "rtl" === theme.direction;
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
@@ -1704,6 +1873,24 @@ var ControlToggleButtonGroup = ({
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
     return `repeat(${itemsCount}, minmax(0, 25%)) ${templateColumnsSuffix}`;
   }, [menuItems?.length, fixedItems.length]);
+  const shouldShowExclusivePlaceholder = exclusive && (value === null || value === void 0 || value === "");
+  const nonExclusiveSelectedValues = !exclusive && Array.isArray(value) ? value.map((v) => typeof v === "string" ? v : "").join(" ").trim().split(/\s+/).filter(Boolean) : [];
+  const shouldShowNonExclusivePlaceholder = !exclusive && nonExclusiveSelectedValues.length === 0;
+  const getPlaceholderArray = (placeholderValue) => {
+    if (Array.isArray(placeholderValue)) {
+      return placeholderValue.flatMap((p) => {
+        if (typeof p === "string") {
+          return p.trim().split(/\s+/).filter(Boolean);
+        }
+        return [];
+      });
+    }
+    if (typeof placeholderValue === "string") {
+      return placeholderValue.trim().split(/\s+/).filter(Boolean);
+    }
+    return [];
+  };
+  const placeholderArray = getPlaceholderArray(placeholder);
   return /* @__PURE__ */ React32.createElement(ControlActions, null, /* @__PURE__ */ React32.createElement(
     StyledToggleButtonGroup,
     {
@@ -1719,15 +1906,28 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content5, showTooltip }) => /* @__PURE__ */ React32.createElement(
-      ConditionalTooltip,
-      {
-        key: buttonValue,
-        label,
-        showTooltip: showTooltip || false
-      },
-      /* @__PURE__ */ React32.createElement(ToggleButton, { value: buttonValue, "aria-label": label, size, fullWidth }, /* @__PURE__ */ React32.createElement(Content5, { size }))
-    )),
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content6, showTooltip }) => {
+      const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
+      return /* @__PURE__ */ React32.createElement(
+        ConditionalTooltip,
+        {
+          key: buttonValue,
+          label,
+          showTooltip: showTooltip || false
+        },
+        /* @__PURE__ */ React32.createElement(
+          StyledToggleButton,
+          {
+            value: buttonValue,
+            "aria-label": label,
+            size,
+            fullWidth,
+            isPlaceholder
+          },
+          /* @__PURE__ */ React32.createElement(Content6, { size })
+        )
+      );
+    }),
     menuItems.length && exclusive && /* @__PURE__ */ React32.createElement(
       SplitButtonGroup,
       {
@@ -1748,8 +1948,8 @@ var SplitButtonGroup = ({
   value
 }) => {
   const previewButton = usePreviewButton(items2, value);
-  const [isMenuOpen, setIsMenuOpen] = useState5(false);
-  const menuButtonRef = useRef6(null);
+  const [isMenuOpen, setIsMenuOpen] = useState6(false);
+  const menuButtonRef = useRef7(null);
   const onMenuToggle = (ev) => {
     setIsMenuOpen((prev) => !prev);
     ev.preventDefault();
@@ -1818,10 +2018,10 @@ var SplitButtonGroup = ({
   ));
 };
 var usePreviewButton = (items2, value) => {
-  const [previewButton, setPreviewButton] = useState5(
+  const [previewButton, setPreviewButton] = useState6(
     items2.find((item) => item.value === value) ?? items2[0]
   );
-  useEffect4(() => {
+  useEffect5(() => {
     const selectedButton = items2.find((item) => item.value === value);
     if (selectedButton) {
       setPreviewButton(selectedButton);
@@ -1851,13 +2051,14 @@ var ToggleControl = createControl(
       items: options,
       maxItems,
       fullWidth,
-      size
+      size,
+      placeholder
     };
     return exclusive ? /* @__PURE__ */ React33.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
-        value: value ?? placeholder ?? null,
+        value: value ?? null,
         onChange: setValue,
         disabled,
         exclusive: true
@@ -1866,7 +2067,7 @@ var ToggleControl = createControl(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
-        value: (value ?? placeholder)?.split(" ") ?? [],
+        value: value?.split(" ") ?? [],
         onChange: handleNonExclusiveToggle,
         disabled,
         exclusive: false
@@ -1878,7 +2079,7 @@ var ToggleControl = createControl(
 // src/controls/number-control.tsx
 import * as React34 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
-import { TextField as TextField5 } from "@elementor/ui";
+import { InputAdornment as InputAdornment3, TextField as TextField5 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
 var RESTRICTED_INPUT_KEYS2 = ["e", "E", "+", "-"];
 var NumberControl = createControl(
@@ -1887,7 +2088,8 @@ var NumberControl = createControl(
     max = Number.MAX_VALUE,
     min = -Number.MAX_VALUE,
     step = 1,
-    shouldForceInt = false
+    shouldForceInt = false,
+    startIcon
   }) => {
     const { value, setValue, placeholder, disabled } = useBoundProp(numberPropTypeUtil);
     const handleChange = (event) => {
@@ -1910,6 +2112,9 @@ var NumberControl = createControl(
         onChange: handleChange,
         placeholder: labelPlaceholder ?? (placeholder ? String(placeholder) : ""),
         inputProps: { step },
+        InputProps: {
+          startAdornment: startIcon ? /* @__PURE__ */ React34.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0
+        },
         onKeyDown: (event) => {
           if (RESTRICTED_INPUT_KEYS2.includes(event.key)) {
             event.preventDefault();
@@ -1921,12 +2126,20 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-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 * as React36 from "react";
+import { useId as useId2, useRef as useRef8 } from "react";
+import { sizePropTypeUtil as sizePropTypeUtil3 } from "@elementor/editor-props";
 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";
+import { __ as __9 } from "@wordpress/i18n";
+
+// src/components/control-label.tsx
+import * as React35 from "react";
+import { Stack as Stack6 } from "@elementor/ui";
+var ControlLabel = ({ children }) => {
+  return /* @__PURE__ */ React35.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React35.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React35.createElement(ControlAdornments, null));
+};
+
+// src/controls/equal-unequal-sizes-control.tsx
 var isEqualSizes = (propValue, items2) => {
   const values = Object.values(propValue);
   if (values.length !== items2.length) {
@@ -1952,14 +2165,14 @@ function EqualUnequalSizesControl({
     setValue: setMultiSizeValue,
     disabled: multiSizeDisabled
   } = useBoundProp(multiSizePropTypeUtil);
-  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil2);
-  const rowRefs = [useRef7(null), useRef7(null)];
+  const { value: sizeValue, setValue: setSizeValue } = useBoundProp(sizePropTypeUtil3);
+  const rowRefs = [useRef8(null), useRef8(null)];
   const splitEqualValue = () => {
     if (!sizeValue) {
       return null;
     }
     return items2.reduce(
-      (acc, { bind }) => ({ ...acc, [bind]: sizePropTypeUtil2.create(sizeValue) }),
+      (acc, { bind }) => ({ ...acc, [bind]: sizePropTypeUtil3.create(sizeValue) }),
       {}
     );
   };
@@ -1980,15 +2193,15 @@ function EqualUnequalSizesControl({
     }
     return splitEqualValue() ?? null;
   };
-  const isShowingGeneralIndicator = !isExperimentActive2("e_v_3_30") || !popupState.isOpen;
+  const isShowingGeneralIndicator = !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  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(
+  return /* @__PURE__ */ React36.createElement(React36.Fragment, null, /* @__PURE__ */ React36.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React36.createElement(Grid7, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React36.createElement(ControlLabel, null, label)), /* @__PURE__ */ React36.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React36.createElement(
     SizeControl,
     {
-      placeholder: isMixed ? __8("Mixed", "elementor") : void 0,
+      placeholder: isMixed ? __9("Mixed", "elementor") : void 0,
       anchorRef: rowRefs[0]
     }
-  ), /* @__PURE__ */ React35.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React35.createElement(
+  ), /* @__PURE__ */ React36.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React36.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -1999,7 +2212,7 @@ function EqualUnequalSizesControl({
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React35.createElement(
+  ))))), /* @__PURE__ */ React36.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -2017,7 +2230,7 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React35.createElement(
+    /* @__PURE__ */ React36.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
@@ -2025,31 +2238,29 @@ function EqualUnequalSizesControl({
         setValue: setNestedProp,
         isDisabled: () => multiSizeDisabled
       },
-      /* @__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] })))
+      /* @__PURE__ */ React36.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React36.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React36.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React36.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
     )
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
-  const isUsingNestedProps = isExperimentActive2("e_v_3_30");
-  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 })))));
+  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React36.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React36.createElement(Grid7, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React36.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React36.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-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 * as React37 from "react";
+import { useRef as useRef9 } from "react";
+import { dimensionsPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from "@elementor/icons";
 import { Grid as Grid8, Stack as Stack8, ToggleButton as ToggleButton3, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 var LinkedDimensionsControl = createControl(
   ({
     label,
     isSiteRtl = false,
     extendedOptions
   }) => {
-    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil3);
-    const gridRowRefs = [useRef8(null), useRef8(null)];
+    const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
+    const gridRowRefs = [useRef9(null), useRef9(null)];
     const {
       value: dimensionsValue,
       setValue: setDimensionsValue,
@@ -2057,13 +2268,12 @@ var LinkedDimensionsControl = createControl(
       disabled: dimensionsDisabled
     } = useBoundProp(dimensionsPropTypeUtil);
     const isLinked = !dimensionsValue && !sizeValue ? true : !!sizeValue;
-    const isUsingNestedProps = isExperimentActive3("e_v_3_30");
     const onLinkToggle = () => {
       if (!isLinked) {
         setSizeValue(dimensionsValue["block-start"]?.value ?? null);
         return;
       }
-      const value = sizeValue ? sizePropTypeUtil3.create(sizeValue) : null;
+      const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
       setDimensionsValue({
         "block-start": value,
         "block-end": value,
@@ -2073,10 +2283,10 @@ var LinkedDimensionsControl = createControl(
     };
     const tooltipLabel = label.toLowerCase();
     const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-    const linkedLabel = __9("Link %s", "elementor").replace("%s", tooltipLabel);
-    const unlinkedLabel = __9("Unlink %s", "elementor").replace("%s", tooltipLabel);
+    const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
+    const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
     const disabled = sizeDisabled || dimensionsDisabled;
-    return /* @__PURE__ */ React36.createElement(
+    return /* @__PURE__ */ React37.createElement(
       PropProvider,
       {
         propType,
@@ -2084,7 +2294,7 @@ var LinkedDimensionsControl = createControl(
         setValue: setDimensionsValue,
         isDisabled: () => disabled
       },
-      /* @__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(
+      /* @__PURE__ */ React37.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React37.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React37.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
         ToggleButton3,
         {
           "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2095,9 +2305,9 @@ var LinkedDimensionsControl = createControl(
           onChange: onLinkToggle,
           disabled
         },
-        /* @__PURE__ */ React36.createElement(LinkedIcon, { fontSize: "tiny" })
+        /* @__PURE__ */ React37.createElement(LinkedIcon, { fontSize: "tiny" })
       ))),
-      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(
+      getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React37.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React37.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(Label, { ...props })), /* @__PURE__ */ React37.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(
         Control3,
         {
           bind: props.bind,
@@ -2118,94 +2328,89 @@ var Control3 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React36.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
+    return /* @__PURE__ */ React37.createElement(SizeControl, { startIcon, extendedOptions, anchorRef });
   }
-  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
+  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon, extendedOptions, anchorRef }));
 };
 var Label = ({ label, bind }) => {
-  const isUsingNestedProps = isExperimentActive3("e_v_3_30");
-  if (!isUsingNestedProps) {
-    return /* @__PURE__ */ React36.createElement(ControlFormLabel, null, label);
-  }
-  return /* @__PURE__ */ React36.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React36.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(ControlLabel, null, label));
 };
-function getCssMarginProps(isSiteRtl) {
+function getCssDimensionProps(isSiteRtl) {
   return [
     [
       {
         bind: "block-start",
-        label: __9("Top", "elementor"),
-        icon: /* @__PURE__ */ React36.createElement(SideTopIcon, { fontSize: "tiny" })
+        label: __10("Top", "elementor"),
+        icon: /* @__PURE__ */ React37.createElement(SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
-        label: isSiteRtl ? __9("Left", "elementor") : __9("Right", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React36.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React36.createElement(SideRightIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? __10("Left", "elementor") : __10("Right", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React37.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React37.createElement(SideRightIcon, { fontSize: "tiny" })
       }
     ],
     [
       {
         bind: "block-end",
-        label: __9("Bottom", "elementor"),
-        icon: /* @__PURE__ */ React36.createElement(SideBottomIcon, { fontSize: "tiny" })
+        label: __10("Bottom", "elementor"),
+        icon: /* @__PURE__ */ React37.createElement(SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
-        label: isSiteRtl ? __9("Right", "elementor") : __9("Left", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React36.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React36.createElement(SideLeftIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? __10("Right", "elementor") : __10("Left", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React37.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React37.createElement(SideLeftIcon, { fontSize: "tiny" })
       }
     ]
   ];
 }
 
 // src/controls/font-family-control/font-family-control.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
-import { ChevronDownIcon as ChevronDownIcon2 } from "@elementor/icons";
+import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 
-// src/components/font-family-selector.tsx
-import * as React37 from "react";
-import { useEffect as useEffect5, useState as useState6 } from "react";
-import { PopoverBody, PopoverHeader, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
-import { TextIcon } from "@elementor/icons";
+// src/components/item-selector.tsx
+import * as React38 from "react";
+import { useCallback, useEffect as useEffect6, useState as useState7 } from "react";
+import { PopoverBody, PopoverHeader as PopoverHeader2, PopoverMenuList, PopoverSearch } from "@elementor/editor-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 __10 } from "@wordpress/i18n";
-
-// src/controls/font-family-control/enqueue-font.tsx
-var enqueueFont = (fontFamily, context = "editor") => {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
-};
+import { __ as __11 } from "@wordpress/i18n";
 
-// src/hooks/use-filtered-font-families.ts
-var useFilteredFontFamilies = (fontFamilies, searchValue) => {
-  return fontFamilies.reduce((acc, category) => {
-    const filteredFonts = category.fonts.filter(
-      (font) => font.toLowerCase().includes(searchValue.toLowerCase())
+// src/hooks/use-filtered-items-list.ts
+var useFilteredItemsList = (itemsList, searchValue) => {
+  return itemsList.reduce((acc, category) => {
+    const filteredItems = category.items.filter(
+      (item) => item.toLowerCase().includes(searchValue.toLowerCase())
     );
-    if (filteredFonts.length) {
+    if (filteredItems.length) {
       acc.push({ type: "category", value: category.label });
-      filteredFonts.forEach((font) => {
-        acc.push({ type: "font", value: font });
+      filteredItems.forEach((item) => {
+        acc.push({ type: "item", value: item });
       });
     }
     return acc;
   }, []);
 };
 
-// src/components/font-family-selector.tsx
-var SIZE2 = "tiny";
-var FontFamilySelector = ({
-  fontFamilies,
-  fontFamily,
-  onFontFamilyChange,
+// src/components/item-selector.tsx
+var ItemSelector = ({
+  itemsList,
+  selectedItem,
+  onItemChange,
   onClose,
-  sectionWidth
+  sectionWidth,
+  title,
+  itemStyle = () => ({}),
+  onDebounce = () => {
+  },
+  icon
 }) => {
-  const [searchValue, setSearchValue] = useState6("");
-  const filteredFontFamilies = useFilteredFontFamilies(fontFamilies, searchValue);
+  const [searchValue, setSearchValue] = useState7("");
+  const filteredItemsList = useFilteredItemsList(itemsList, searchValue);
+  const IconComponent = icon;
   const handleSearch = (value) => {
     setSearchValue(value);
   };
@@ -2213,29 +2418,24 @@ var FontFamilySelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React37.createElement(PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React37.createElement(
-    PopoverHeader,
-    {
-      title: __10("Font Family", "elementor"),
-      onClose: handleClose,
-      icon: /* @__PURE__ */ React37.createElement(TextIcon, { fontSize: SIZE2 })
-    }
-  ), /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React38.createElement(PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React38.createElement(PopoverHeader2, { title, onClose: handleClose, icon: /* @__PURE__ */ React38.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React38.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __10("Search", "elementor")
+      placeholder: __11("Search", "elementor")
     }
-  ), /* @__PURE__ */ React37.createElement(Divider2, null), filteredFontFamilies.length > 0 ? /* @__PURE__ */ React37.createElement(
-    FontList,
+  ), /* @__PURE__ */ React38.createElement(Divider2, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React38.createElement(
+    ItemList,
     {
-      fontListItems: filteredFontFamilies,
-      setFontFamily: onFontFamilyChange,
+      itemListItems: filteredItemsList,
+      setSelectedItem: onItemChange,
       handleClose,
-      fontFamily
+      selectedItem,
+      itemStyle,
+      onDebounce
     }
-  ) : /* @__PURE__ */ React37.createElement(
+  ) : /* @__PURE__ */ React38.createElement(
     Stack9,
     {
       alignItems: "center",
@@ -2245,23 +2445,19 @@ var FontFamilySelector = ({
       gap: 1.5,
       overflow: "hidden"
     },
-    /* @__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(
+    /* @__PURE__ */ React38.createElement(IconComponent, { fontSize: "large" }),
+    /* @__PURE__ */ React38.createElement(Box5, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React38.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __11("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React38.createElement(
       Typography4,
       {
         variant: "subtitle2",
         color: "text.secondary",
-        sx: {
-          display: "flex",
-          width: "100%",
-          justifyContent: "center"
-        }
+        sx: { display: "flex", width: "100%", justifyContent: "center" }
       },
-      /* @__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__ */ React38.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React38.createElement("span", { style: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" } }, searchValue),
+      /* @__PURE__ */ React38.createElement("span", null, "\u201D.")
     )),
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React38.createElement(
       Typography4,
       {
         align: "center",
@@ -2269,8 +2465,8 @@ var FontFamilySelector = ({
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      __10("Try something else.", "elementor"),
-      /* @__PURE__ */ React37.createElement(
+      __11("Try something else.", "elementor"),
+      /* @__PURE__ */ React38.createElement(
         Link,
         {
           color: "secondary",
@@ -2278,52 +2474,72 @@ var FontFamilySelector = ({
           component: "button",
           onClick: () => setSearchValue("")
         },
-        __10("Clear & try again", "elementor")
+        __11("Clear & try again", "elementor")
       )
     )
   ));
 };
-var FontList = ({ fontListItems, setFontFamily, handleClose, fontFamily }) => {
-  const selectedItem = fontListItems.find((item) => item.value === fontFamily);
+var ItemList = ({
+  itemListItems,
+  setSelectedItem,
+  handleClose,
+  selectedItem,
+  itemStyle = () => ({}),
+  onDebounce = () => {
+  }
+}) => {
+  const selectedItemFound = itemListItems.find((item) => item.value === selectedItem);
   const debouncedVirtualizeChange = useDebounce(({ getVirtualIndexes }) => {
     getVirtualIndexes().forEach((index) => {
-      const item = fontListItems[index];
-      if (item && item.type === "font") {
-        enqueueFont(item.value);
+      const item = itemListItems[index];
+      if (item && item.type === "item") {
+        onDebounce(item.value);
       }
     });
   }, 100);
-  return /* @__PURE__ */ React37.createElement(
+  const memoizedItemStyle = useCallback((item) => itemStyle(item), [itemStyle]);
+  return /* @__PURE__ */ React38.createElement(
     PopoverMenuList,
     {
-      items: fontListItems,
-      selectedValue: selectedItem?.value,
+      items: itemListItems,
+      selectedValue: selectedItemFound?.value,
       onChange: debouncedVirtualizeChange,
-      onSelect: setFontFamily,
+      onSelect: setSelectedItem,
       onClose: handleClose,
-      itemStyle: (item) => ({ fontFamily: item.value }),
-      "data-testid": "font-list"
+      itemStyle: memoizedItemStyle,
+      "data-testid": "item-list"
     }
   );
 };
 var useDebounce = (fn, delay) => {
-  const [debouncedFn] = useState6(() => debounce(fn, delay));
-  useEffect5(() => () => debouncedFn.cancel(), [debouncedFn]);
+  const [debouncedFn] = useState7(() => debounce(fn, delay));
+  useEffect6(() => () => debouncedFn.cancel(), [debouncedFn]);
   return debouncedFn;
 };
 
+// src/controls/font-family-control/enqueue-font.tsx
+var enqueueFont = (fontFamily, context = "editor") => {
+  const extendedWindow = window;
+  return extendedWindow.elementor?.helpers?.enqueueFont?.(fontFamily, context) ?? null;
+};
+
 // src/controls/font-family-control/font-family-control.tsx
-var SIZE3 = "tiny";
 var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
   const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp(stringPropTypeUtil5);
   const popoverState = usePopupState5({ variant: "popover" });
   const isShowingPlaceholder = !fontFamily && placeholder;
-  return /* @__PURE__ */ React38.createElement(React38.Fragment, null, /* @__PURE__ */ React38.createElement(ControlActions, null, /* @__PURE__ */ React38.createElement(
+  const mapFontSubs = React39.useMemo(() => {
+    return fontFamilies.map(({ label, fonts }) => ({
+      label,
+      items: fonts
+    }));
+  }, [fontFamilies]);
+  return /* @__PURE__ */ React39.createElement(React39.Fragment, null, /* @__PURE__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
     UnstableTag2,
     {
       variant: "outlined",
       label: fontFamily || placeholder,
-      endIcon: /* @__PURE__ */ React38.createElement(ChevronDownIcon2, { fontSize: SIZE3 }),
+      endIcon: /* @__PURE__ */ React39.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
       ...bindTrigger3(popoverState),
       fullWidth: true,
       disabled,
@@ -2334,7 +2550,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
         textTransform: "capitalize"
       } : void 0
     }
-  )), /* @__PURE__ */ React38.createElement(
+  )), /* @__PURE__ */ React39.createElement(
     Popover4,
     {
       disablePortal: true,
@@ -2344,27 +2560,31 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
       sx: { my: 1.5 },
       ...bindPopover4(popoverState)
     },
-    /* @__PURE__ */ React38.createElement(
-      FontFamilySelector,
+    /* @__PURE__ */ React39.createElement(
+      ItemSelector,
       {
-        fontFamilies,
-        fontFamily,
-        onFontFamilyChange: setFontFamily,
+        itemsList: mapFontSubs,
+        selectedItem: fontFamily,
+        onItemChange: setFontFamily,
         onClose: popoverState.close,
-        sectionWidth
+        sectionWidth,
+        title: __12("Font Family", "elementor"),
+        itemStyle: (item) => ({ fontFamily: item.value }),
+        onDebounce: enqueueFont,
+        icon: TextIcon
       }
     )
   ));
 });
 
 // src/controls/url-control.tsx
-import * as React39 from "react";
+import * as React40 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__ */ React39.createElement(ControlActions, null, /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
     TextField6,
     {
       size: "tiny",
@@ -2378,34 +2598,31 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React42 from "react";
-import { useMemo as useMemo3, useState as useState7 } from "react";
-import { getLinkInLinkRestriction, selectElement } from "@elementor/editor-elements";
+import * as React44 from "react";
+import { useMemo as useMemo4, useState as useState8 } from "react";
+import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import {
-  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 { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Box as Box7, Collapse, Grid as Grid9, IconButton as IconButton3, Infotip, Stack as Stack10, Switch as Switch2 } from "@elementor/ui";
+import { Collapse, Grid as Grid9, IconButton as IconButton3, Stack as Stack10 } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { forwardRef as forwardRef4 } from "react";
 import { XIcon as XIcon2 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
   Box as Box6,
   IconButton as IconButton2,
-  InputAdornment as InputAdornment3,
+  InputAdornment as InputAdornment4,
   TextField as TextField7
 } from "@elementor/ui";
 var Autocomplete = forwardRef4((props, ref) => {
@@ -2424,7 +2641,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__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -2442,8 +2659,8 @@ var Autocomplete = forwardRef4((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React40.createElement(Box6, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React40.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React41.createElement(Box6, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React41.createElement(
         TextInput,
         {
           params,
@@ -2466,7 +2683,7 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React41.createElement(
     TextField7,
     {
       ...params,
@@ -2479,7 +2696,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React40.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React41.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2488,7 +2705,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__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 })));
+}) => /* @__PURE__ */ React41.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React41.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React41.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2509,8 +2726,67 @@ function _factoryFilter(newValue, options, minInputLength) {
   );
 }
 
+// src/components/restricted-link-infotip.tsx
+import * as React42 from "react";
+import { selectElement } from "@elementor/editor-elements";
+import { InfoCircleFilledIcon } from "@elementor/icons";
+import { Alert, AlertAction, AlertTitle, Box as Box7, Infotip, Link as Link2 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
+var learnMoreButton = {
+  label: __13("Learn More", "elementor"),
+  href: "https://go.elementor.com/element-link-inside-link-infotip"
+};
+var INFOTIP_CONTENT = {
+  descendant: __13(
+    "To add a link to this element, first remove the link from the elements inside of it.",
+    "elementor"
+  ),
+  ancestor: __13("To add a link to this element, first remove the link from its parent container.", "elementor")
+};
+var RestrictedLinkInfotip = ({
+  linkInLinkRestriction,
+  isVisible,
+  children
+}) => {
+  const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
+  const handleTakeMeClick = () => {
+    if (elementId) {
+      selectElement(elementId);
+    }
+  };
+  const content = /* @__PURE__ */ React42.createElement(
+    Alert,
+    {
+      severity: "secondary",
+      icon: /* @__PURE__ */ React42.createElement(InfoCircleFilledIcon, null),
+      action: /* @__PURE__ */ React42.createElement(
+        AlertAction,
+        {
+          sx: { width: "fit-content" },
+          variant: "contained",
+          color: "secondary",
+          onClick: handleTakeMeClick
+        },
+        __13("Take me there", "elementor")
+      )
+    },
+    /* @__PURE__ */ React42.createElement(AlertTitle, null, __13("Nested links", "elementor")),
+    /* @__PURE__ */ React42.createElement(Box7, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React42.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
+  );
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React42.createElement(
+    Infotip,
+    {
+      placement: "right",
+      content,
+      color: "secondary",
+      slotProps: { popper: { sx: { width: 300 } } }
+    },
+    /* @__PURE__ */ React42.createElement(Box7, null, children)
+  ) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, children);
+};
+
 // src/controls/switch-control.tsx
-import * as React41 from "react";
+import * as React43 from "react";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
 import { Switch } from "@elementor/ui";
 var SwitchControl = createControl(() => {
@@ -2518,7 +2794,7 @@ var SwitchControl = createControl(() => {
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React41.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React43.createElement("div", { style: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React43.createElement(
     Switch,
     {
       checked: !!value,
@@ -2533,25 +2809,21 @@ var SwitchControl = createControl(() => {
 });
 
 // src/controls/link-control.tsx
-var SIZE4 = "tiny";
-var learnMoreButton = {
-  label: __11("Learn More", "elementor"),
-  href: "https://go.elementor.com/element-link-inside-link-infotip"
-};
+var SIZE3 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
-  const [isActive, setIsActive] = useState7(!!value);
+  const [isActive, setIsActive] = useState8(!!value);
   const {
     allowCustomValues,
     queryOptions: { endpoint = "", requestParams = {} },
     placeholder,
     minInputLength = 2,
     context: { elementId },
-    label = __11("Link", "elementor")
+    label = __14("Link", "elementor")
   } = props || {};
-  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState7(getLinkInLinkRestriction(elementId));
-  const [options, setOptions] = useState7(
+  const [linkInLinkRestriction, setLinkInLinkRestriction] = useState8(getLinkInLinkRestriction(elementId));
+  const [options, setOptions] = useState8(
     generateFirstLoadedOption(value)
   );
   const shouldDisableAddingLink = !isActive && linkInLinkRestriction.shouldRestrict;
@@ -2602,7 +2874,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = useMemo3(
+  const debounceFetch = useMemo4(
     () => debounce2(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2611,7 +2883,7 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React42.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React42.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React44.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React44.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(
     Stack10,
     {
       direction: "row",
@@ -2621,17 +2893,17 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React42.createElement(ControlFormLabel, null, label),
-    /* @__PURE__ */ React42.createElement(ConditionalInfoTip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React42.createElement(
+    /* @__PURE__ */ React44.createElement(ControlFormLabel, null, label),
+    /* @__PURE__ */ React44.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React44.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
         active: isActive,
         onIconClick: onEnabledChange,
-        label: __11("Toggle link", "elementor")
+        label: __14("Toggle link", "elementor")
       }
     ))
-  ), /* @__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(
+  ), /* @__PURE__ */ React44.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React44.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React44.createElement(ControlActions, null, /* @__PURE__ */ React44.createElement(
     Autocomplete,
     {
       options,
@@ -2642,31 +2914,10 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__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 }))))))));
+  ))), /* @__PURE__ */ React44.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React44.createElement(Grid9, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React44.createElement(Grid9, { item: true }, /* @__PURE__ */ React44.createElement(ControlFormLabel, null, __14("Open in a new tab", "elementor"))), /* @__PURE__ */ React44.createElement(Grid9, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React44.createElement(SwitchControl, null))))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  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 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);
-  };
-  return /* @__PURE__ */ React42.createElement(
-    Switch2,
-    {
-      checked: value ?? false,
-      onClick,
-      disabled,
-      inputProps: {
-        ...disabled ? { style: { opacity: 0 } } : {}
-      }
-    }
-  );
+  return /* @__PURE__ */ React44.createElement(IconButton3, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React44.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React44.createElement(PlusIcon2, { fontSize: SIZE3 }));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -2696,45 +2947,14 @@ function generateFirstLoadedOption(unionValue) {
     }
   ] : [];
 }
-var ConditionalInfoTip = ({ linkInLinkRestriction, isVisible, children }) => {
-  const { shouldRestrict, reason, elementId } = linkInLinkRestriction;
-  const handleTakeMeClick = () => {
-    if (elementId) {
-      selectElement(elementId);
-    }
-  };
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React42.createElement(
-    Infotip,
-    {
-      placement: "right",
-      content: /* @__PURE__ */ React42.createElement(
-        InfoTipCard,
-        {
-          content: INFOTIP_CONTENT[reason],
-          svgIcon: /* @__PURE__ */ React42.createElement(AlertTriangleIcon, null),
-          learnMoreButton,
-          ctaButton: {
-            label: __11("Take me there", "elementor"),
-            onClick: handleTakeMeClick
-          }
-        }
-      )
-    },
-    /* @__PURE__ */ React42.createElement(Box7, null, children)
-  ) : /* @__PURE__ */ React42.createElement(React42.Fragment, null, children);
-};
-var INFOTIP_CONTENT = {
-  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 React43 from "react";
-import { useRef as useRef9 } from "react";
-import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil4 } from "@elementor/editor-props";
+import * as React45 from "react";
+import { useRef as useRef10 } from "react";
+import { layoutDirectionPropTypeUtil, sizePropTypeUtil as sizePropTypeUtil5 } from "@elementor/editor-props";
 import { DetachIcon as DetachIcon2, LinkIcon as LinkIcon2 } from "@elementor/icons";
 import { Grid as Grid10, Stack as Stack11, ToggleButton as ToggleButton4, Tooltip as Tooltip5 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 var GapControl = createControl(({ label }) => {
   const {
     value: directionValue,
@@ -2742,15 +2962,15 @@ var GapControl = createControl(({ label }) => {
     propType,
     disabled: directionDisabled
   } = useBoundProp(layoutDirectionPropTypeUtil);
-  const stackRef = useRef9(null);
-  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil4);
+  const stackRef = useRef10(null);
+  const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp(sizePropTypeUtil5);
   const isLinked = !directionValue && !sizeValue ? true : !!sizeValue;
   const onLinkToggle = () => {
     if (!isLinked) {
       setSizeValue(directionValue?.column?.value ?? null);
       return;
     }
-    const value = sizeValue ? sizePropTypeUtil4.create(sizeValue) : null;
+    const value = sizeValue ? sizePropTypeUtil5.create(sizeValue) : null;
     setDirectionValue({
       row: value,
       column: value
@@ -2758,10 +2978,10 @@ var GapControl = createControl(({ label }) => {
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  const linkedLabel = __12("Link %s", "elementor").replace("%s", tooltipLabel);
-  const unlinkedLabel = __12("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const linkedLabel = __15("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __15("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  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(
+  return /* @__PURE__ */ React45.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React45.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React45.createElement(ControlLabel, null, label), /* @__PURE__ */ React45.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React45.createElement(
     ToggleButton4,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2772,8 +2992,8 @@ var GapControl = createControl(({ label }) => {
       onChange: onLinkToggle,
       disabled
     },
-    /* @__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 })))));
+    /* @__PURE__ */ React45.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React45.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React45.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React45.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __15("Column", "elementor"))), /* @__PURE__ */ React45.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React45.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React45.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __15("Row", "elementor"))), /* @__PURE__ */ React45.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React45.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
 });
 var Control4 = ({
   bind,
@@ -2781,21 +3001,21 @@ var Control4 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef });
+    return /* @__PURE__ */ React45.createElement(SizeControl, { anchorRef });
   }
-  return /* @__PURE__ */ React43.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React43.createElement(SizeControl, { anchorRef }));
+  return /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React45.createElement(SizeControl, { anchorRef }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React44 from "react";
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import * as React46 from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
-import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
+import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
-import { Grid as Grid11, Select as Select3, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { Grid as Grid11, Select as Select2, Stack as Stack12, TextField as TextField8 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
-  { label: __13("Auto", "elementor"), value: "auto" },
+  { label: __16("Auto", "elementor"), value: "auto" },
   { label: "1/1", value: "1/1" },
   { label: "4/3", value: "4/3" },
   { label: "3/4", value: "3/4" },
@@ -2809,13 +3029,13 @@ var AspectRatioControl = createControl(({ label }) => {
   const { value: aspectRatioValue, setValue: setAspectRatioValue, disabled } = useBoundProp(stringPropTypeUtil7);
   const isCustomSelected = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
   const [initialWidth, initialHeight] = isCustomSelected ? aspectRatioValue.split("/") : ["", ""];
-  const [isCustom, setIsCustom] = useState8(isCustomSelected);
-  const [customWidth, setCustomWidth] = useState8(initialWidth);
-  const [customHeight, setCustomHeight] = useState8(initialHeight);
-  const [selectedValue, setSelectedValue] = useState8(
+  const [isCustom, setIsCustom] = useState9(isCustomSelected);
+  const [customWidth, setCustomWidth] = useState9(initialWidth);
+  const [customHeight, setCustomHeight] = useState9(initialHeight);
+  const [selectedValue, setSelectedValue] = useState9(
     isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ""
   );
-  useEffect6(() => {
+  useEffect7(() => {
     const isCustomValue = aspectRatioValue && !RATIO_OPTIONS.some((option) => option.value === aspectRatioValue);
     if (isCustomValue) {
       const [width, height] = aspectRatioValue.split("/");
@@ -2854,8 +3074,8 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  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,
+  return /* @__PURE__ */ React46.createElement(ControlActions, null, /* @__PURE__ */ React46.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React46.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(ControlLabel, null, label)), /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(
+    Select2,
     {
       size: "tiny",
       displayEmpty: true,
@@ -2865,10 +3085,10 @@ var AspectRatioControl = createControl(({ label }) => {
       onChange: handleSelectChange,
       fullWidth: true
     },
-    [...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)
+    [...RATIO_OPTIONS, { label: __16("Custom", "elementor"), value: CUSTOM_RATIO }].map(
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React46.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React44.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React44.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
+  ))), isCustom && /* @__PURE__ */ React46.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(
     TextField8,
     {
       size: "tiny",
@@ -2878,10 +3098,10 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React44.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React46.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React44.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React44.createElement(
+  )), /* @__PURE__ */ React46.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React46.createElement(
     TextField8,
     {
       size: "tiny",
@@ -2891,24 +3111,24 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React44.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React46.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React46 from "react";
-import { useState as useState10 } from "react";
+import * as React48 from "react";
+import { useState as useState11 } 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 { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled5 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React45 from "react";
-import { useState as useState9 } from "react";
+import * as React47 from "react";
+import { useState as useState10 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
   Button as Button3,
@@ -2921,19 +3141,19 @@ import {
   DialogTitle,
   Divider as Divider3
 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
-var ADMIN_TITLE_TEXT = __14("Enable Unfiltered Uploads", "elementor");
-var ADMIN_CONTENT_TEXT = __14(
+import { __ as __17 } from "@wordpress/i18n";
+var ADMIN_TITLE_TEXT = __17("Enable Unfiltered Uploads", "elementor");
+var ADMIN_CONTENT_TEXT = __17(
   "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 = __14("Sorry, you can't upload that file yet", "elementor");
-var NON_ADMIN_CONTENT_TEXT = __14(
+var NON_ADMIN_TITLE_TEXT = __17("Sorry, you can't upload that file yet", "elementor");
+var NON_ADMIN_CONTENT_TEXT = __17(
   "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 = __14("Failed to enable unfiltered files upload.", "elementor");
-var ADMIN_FAILED_CONTENT_TEXT_PT2 = __14(
+var ADMIN_FAILED_CONTENT_TEXT_PT1 = __17("Failed to enable unfiltered files upload.", "elementor");
+var ADMIN_FAILED_CONTENT_TEXT_PT2 = __17(
   "You can try again, if the problem persists, please contact support.",
   "elementor"
 );
@@ -2941,7 +3161,7 @@ var WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
 var EnableUnfilteredModal = (props) => {
   const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
   const { canUser } = useCurrentUserCapabilities();
-  const [isError, setIsError] = useState9(false);
+  const [isError, setIsError] = useState10(false);
   const canManageOptions = canUser("manage_options");
   const onClose = (enabled) => {
     props.onClose(enabled);
@@ -2960,9 +3180,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React45.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React45.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React47.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React47.createElement(NonAdminDialog, { ...dialogProps });
 };
-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(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React47.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React47.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React47.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React47.createElement(Divider3, null), /* @__PURE__ */ React47.createElement(DialogContent, null, /* @__PURE__ */ React47.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React47.createElement(React47.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React47.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React47.createElement(DialogActions, null, /* @__PURE__ */ React47.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __17("Cancel", "elementor")), /* @__PURE__ */ React47.createElement(
   Button3,
   {
     size: "medium",
@@ -2971,16 +3191,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React45.createElement(CircularProgress2, { size: 24 }) : __14("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React47.createElement(CircularProgress2, { size: 24 }) : __17("Enable", "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"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React47.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React47.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React47.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React47.createElement(Divider3, null), /* @__PURE__ */ React47.createElement(DialogContent, null, /* @__PURE__ */ React47.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React47.createElement(DialogActions, null, /* @__PURE__ */ React47.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __17("Got it", "elementor"))));
 
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = styled4(Card2)`
+var StyledCard = styled5(Card2)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -2989,7 +3209,7 @@ var StyledCard = styled4(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled4(Stack13)`
+var StyledCardMediaContainer = styled5(Stack13)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -3006,7 +3226,7 @@ var SvgMediaControl = createControl(() => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState10(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState11(false);
   const { open } = useWpMediaFrame2({
     mediaTypes: ["svg"],
     multiple: false,
@@ -3034,15 +3254,15 @@ var SvgMediaControl = createControl(() => {
       open(openOptions);
     }
   };
-  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(
+  return /* @__PURE__ */ React48.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React48.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React48.createElement(ControlActions, null, /* @__PURE__ */ React48.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React48.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React48.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React48.createElement(
     CardMedia2,
     {
       component: "img",
       image: src,
-      alt: __15("Preview SVG", "elementor"),
+      alt: __18("Preview SVG", "elementor"),
       sx: { maxHeight: "140px", width: "50px" }
     }
-  )), /* @__PURE__ */ React46.createElement(
+  )), /* @__PURE__ */ React48.createElement(
     CardOverlay2,
     {
       sx: {
@@ -3051,7 +3271,7 @@ var SvgMediaControl = createControl(() => {
         }
       }
     },
-    /* @__PURE__ */ React46.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React46.createElement(
+    /* @__PURE__ */ React48.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React48.createElement(
       Button4,
       {
         size: "tiny",
@@ -3059,95 +3279,420 @@ var SvgMediaControl = createControl(() => {
         variant: "outlined",
         onClick: () => handleClick(MODE_BROWSE)
       },
-      __15("Select SVG", "elementor")
-    ), /* @__PURE__ */ React46.createElement(
+      __18("Select SVG", "elementor")
+    ), /* @__PURE__ */ React48.createElement(
       Button4,
       {
         size: "tiny",
         variant: "text",
         color: "inherit",
-        startIcon: /* @__PURE__ */ React46.createElement(UploadIcon2, null),
+        startIcon: /* @__PURE__ */ React48.createElement(UploadIcon2, null),
         onClick: () => handleClick(MODE_UPLOAD)
       },
-      __15("Upload", "elementor")
+      __18("Upload", "elementor")
     ))
   ))));
 });
 
 // src/controls/background-control/background-control.tsx
-import * as React53 from "react";
+import * as React65 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { isExperimentActive as isExperimentActive5 } from "@elementor/editor-v1-adapters";
 import { Grid as Grid16 } from "@elementor/ui";
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __29 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React52 from "react";
+import * as React64 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box8, CardMedia as CardMedia3, styled as styled5, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+import { Box as Box9, CardMedia as CardMedia3, styled as styled6, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __28 } from "@wordpress/i18n";
 
-// src/env.ts
-import { parseEnv } from "@elementor/env";
-var { env } = parseEnv("@elementor/editor-controls");
+// src/components/unstable-repeater/actions/add-item-action.tsx
+import * as React50 from "react";
+import { PlusIcon as PlusIcon3 } from "@elementor/icons";
+import { IconButton as IconButton4, Tooltip as Tooltip6 } from "@elementor/ui";
+import { __ as __19 } from "@wordpress/i18n";
 
-// src/controls/background-control/background-gradient-color-control.tsx
-import * as React47 from "react";
-import {
-  backgroundGradientOverlayPropTypeUtil,
-  colorPropTypeUtil as colorPropTypeUtil2,
-  colorStopPropTypeUtil,
-  gradientColorStopPropTypeUtil,
-  numberPropTypeUtil as numberPropTypeUtil3,
-  stringPropTypeUtil as stringPropTypeUtil8
-} from "@elementor/editor-props";
-import { UnstableGradientBox } from "@elementor/ui";
-var BackgroundGradientColorControl = createControl(() => {
-  const { value, setValue } = useBoundProp(backgroundGradientOverlayPropTypeUtil);
-  const handleChange = (newValue) => {
-    const transformedValue = createTransformableValue(newValue);
-    if (transformedValue.positions) {
-      transformedValue.positions = stringPropTypeUtil8.create(newValue.positions.join(" "));
-    }
-    setValue(transformedValue);
+// src/components/unstable-repeater/context/repeater-context.tsx
+import * as React49 from "react";
+import { createContext as createContext7, useState as useState12 } from "react";
+var RepeaterContext = createContext7(null);
+var EMPTY_OPEN_ITEM2 = -1;
+var useRepeaterContext = () => {
+  const context = React49.useContext(RepeaterContext);
+  if (!context) {
+    throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
+  }
+  return {
+    isOpen: context.isOpen,
+    openItem: context.openItem,
+    setOpenItem: context.setOpenItem,
+    items: context.items,
+    setItems: context.setItems,
+    uniqueKeys: context.uniqueKeys,
+    setUniqueKeys: context.setUniqueKeys,
+    initial: context.initial,
+    isSortable: context.isSortable,
+    generateNextKey: context.generateNextKey,
+    sortItemsByKeys: context.sortItemsByKeys,
+    addItem: context.addItem,
+    updateItem: context.updateItem,
+    removeItem: context.removeItem
   };
-  const createTransformableValue = (newValue) => ({
-    ...newValue,
-    type: stringPropTypeUtil8.create(newValue.type),
-    angle: numberPropTypeUtil3.create(newValue.angle),
-    stops: gradientColorStopPropTypeUtil.create(
-      newValue.stops.map(
-        ({ color, offset }) => colorStopPropTypeUtil.create({
-          color: colorPropTypeUtil2.create(color),
-          offset: numberPropTypeUtil3.create(offset)
-        })
-      )
-    )
+};
+var RepeaterContextProvider = ({
+  children,
+  initial,
+  propTypeUtil,
+  isSortable = true
+}) => {
+  const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp(propTypeUtil);
+  const [items2, setItems] = useSyncExternalState({
+    external: repeaterValues,
+    fallback: () => [],
+    setExternal: setRepeaterValues,
+    persistWhen: () => true
   });
-  const normalizeValue = () => {
-    if (!value) {
-      return;
-    }
-    const { type, angle, stops, positions } = value;
-    return {
-      type: type.value,
-      angle: angle.value,
-      stops: stops.value.map(({ value: { color, offset } }) => ({
-        color: color.value,
-        offset: offset.value
-      })),
-      positions: positions?.value.split(" ")
-    };
-  };
-  return /* @__PURE__ */ React47.createElement(ControlActions, null, /* @__PURE__ */ React47.createElement(
-    UnstableGradientBox,
-    {
+  const [openItem, setOpenItem] = useState12(EMPTY_OPEN_ITEM2);
+  const [uniqueKeys, setUniqueKeys] = useState12(items2?.map((_, index) => index) ?? []);
+  const isOpen = openItem !== EMPTY_OPEN_ITEM2;
+  const sortItemsByKeys = (keysOrder) => {
+    setUniqueKeys(keysOrder);
+    setItems(
+      (prevItems) => keysOrder.map((key) => {
+        const index = uniqueKeys.indexOf(key);
+        return prevItems[index];
+      })
+    );
+  };
+  const addItem = (config) => {
+    const item = config?.item ?? initial;
+    const index = config?.index ?? items2.length;
+    const newItems = [...items2];
+    newItems.splice(index, 0, item);
+    setItems(newItems);
+    setUniqueKeys(newItems.map((_, i) => i));
+    setOpenItem(index);
+  };
+  const removeItem = (index) => {
+    setItems((prevItems) => prevItems.filter((_, pos) => pos !== index));
+    setUniqueKeys((prevKeys) => prevKeys.slice(0, -1));
+  };
+  const updateItem = (updatedItem, index) => {
+    setItems((prevItems) => prevItems.map((item, pos) => pos === index ? updatedItem : item));
+  };
+  return /* @__PURE__ */ React49.createElement(
+    RepeaterContext.Provider,
+    {
+      value: {
+        isOpen,
+        openItem,
+        setOpenItem,
+        items: items2 ?? [],
+        setItems,
+        initial,
+        uniqueKeys,
+        setUniqueKeys,
+        isSortable,
+        generateNextKey,
+        sortItemsByKeys,
+        addItem,
+        updateItem,
+        removeItem
+      }
+    },
+    children
+  );
+};
+var generateNextKey = (source) => {
+  return 1 + Math.max(0, ...source);
+};
+
+// src/components/unstable-repeater/actions/add-item-action.tsx
+var SIZE4 = "tiny";
+var AddItemAction = ({
+  disabled = false,
+  tooltip = false,
+  tooltipContent = null,
+  newItemIndex
+}) => {
+  const { addItem } = useRepeaterContext();
+  const shouldShowTooltip = tooltip && tooltipContent;
+  const onClick = () => addItem({ index: newItemIndex });
+  return /* @__PURE__ */ React50.createElement(ConditionalToolTip, { content: tooltipContent, shouldShowTooltip: !!shouldShowTooltip }, /* @__PURE__ */ React50.createElement(
+    IconButton4,
+    {
+      size: SIZE4,
+      sx: { ml: "auto" },
+      disabled,
+      onClick,
+      "aria-label": __19("Add item", "elementor")
+    },
+    /* @__PURE__ */ React50.createElement(PlusIcon3, { fontSize: SIZE4 })
+  ));
+};
+var ConditionalToolTip = ({
+  children,
+  content,
+  shouldShowTooltip
+}) => {
+  return shouldShowTooltip ? /* @__PURE__ */ React50.createElement(Tooltip6, { title: content }, children) : children;
+};
+
+// src/components/unstable-repeater/header/header.tsx
+import * as React51 from "react";
+import { Stack as Stack14, Typography as Typography5 } from "@elementor/ui";
+var Header = ({ label, children }) => {
+  const { value } = useBoundProp();
+  return /* @__PURE__ */ React51.createElement(Stack14, { direction: "row", justifyContent: "start", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React51.createElement(Typography5, { component: "label", variant: "caption", color: "text.secondary" }, label), /* @__PURE__ */ React51.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React51.createElement(SlotChildren, { whitelist: [AddItemAction] }, children), /* @__PURE__ */ React51.createElement(ControlAdornments, null));
+};
+
+// src/components/unstable-repeater/items/items-container.tsx
+import * as React52 from "react";
+var ItemsContainer = ({
+  itemTemplate,
+  children
+}) => {
+  const { items: items2, uniqueKeys, openItem, isSortable, sortItemsByKeys } = useRepeaterContext();
+  if (!itemTemplate) {
+    return null;
+  }
+  const onChangeOrder = (newOrder) => {
+    sortItemsByKeys(newOrder);
+  };
+  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys?.map((key, index) => {
+    const value = items2?.[index];
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ React52.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React52.isValidElement(itemTemplate) ? React52.cloneElement(itemTemplate, {
+      key,
+      value,
+      index,
+      openOnMount: key === openItem,
+      children
+    }) : null);
+  })));
+};
+
+// src/components/unstable-repeater/items/item.tsx
+import * as React57 from "react";
+import { useState as useState14 } from "react";
+import { bindTrigger as bindTrigger4, UnstableTag as UnstableTag3 } from "@elementor/ui";
+import { __ as __23 } from "@wordpress/i18n";
+
+// src/components/unstable-repeater/actions/disable-item-action.tsx
+import * as React53 from "react";
+import { EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2 } from "@elementor/icons";
+import { IconButton as IconButton5, Tooltip as Tooltip7 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
+var SIZE5 = "tiny";
+var DisableItemAction = ({ index = -1 }) => {
+  const { items: items2, updateItem } = useRepeaterContext();
+  if (index === -1) {
+    return null;
+  }
+  const propDisabled = items2[index]?.disabled ?? false;
+  const toggleLabel = propDisabled ? __20("Show", "elementor") : __20("Hide", "elementor");
+  const onClick = () => {
+    const self = structuredClone(items2[index]);
+    self.disabled = !self.disabled;
+    if (!self.disabled) {
+      delete self.disabled;
+    }
+    updateItem(self, index);
+  };
+  return /* @__PURE__ */ React53.createElement(Tooltip7, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React53.createElement(IconButton5, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React53.createElement(EyeOffIcon2, { fontSize: SIZE5 }) : /* @__PURE__ */ React53.createElement(EyeIcon2, { fontSize: SIZE5 })));
+};
+
+// src/components/unstable-repeater/actions/duplicate-item-action.tsx
+import * as React54 from "react";
+import { CopyIcon as CopyIcon2 } from "@elementor/icons";
+import { IconButton as IconButton6, Tooltip as Tooltip8 } from "@elementor/ui";
+import { __ as __21 } from "@wordpress/i18n";
+var SIZE6 = "tiny";
+var DuplicateItemAction = ({ index = -1 }) => {
+  const { items: items2, addItem } = useRepeaterContext();
+  if (index === -1) {
+    return null;
+  }
+  const duplicateLabel = __21("Duplicate", "elementor");
+  const onClick = () => {
+    const newItem = structuredClone(items2[index]);
+    addItem({ item: newItem, index: index + 1 });
+  };
+  return /* @__PURE__ */ React54.createElement(Tooltip8, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React54.createElement(CopyIcon2, { fontSize: SIZE6 })));
+};
+
+// src/components/unstable-repeater/actions/remove-item-action.tsx
+import * as React55 from "react";
+import { XIcon as XIcon3 } from "@elementor/icons";
+import { IconButton as IconButton7, Tooltip as Tooltip9 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
+var SIZE7 = "tiny";
+var RemoveItemAction = ({ index = -1 }) => {
+  const { removeItem } = useRepeaterContext();
+  if (index === -1) {
+    return null;
+  }
+  const removeLabel = __22("Remove", "elementor");
+  const onClick = () => removeItem(index);
+  return /* @__PURE__ */ React55.createElement(Tooltip9, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React55.createElement(XIcon3, { fontSize: SIZE7 })));
+};
+
+// src/components/unstable-repeater/items/edit-item-popover.tsx
+import * as React56 from "react";
+import { Box as Box8, Popover as Popover5 } from "@elementor/ui";
+var EditItemPopover = ({ children, anchorRef, setAnchorEl, popoverProps }) => {
+  return /* @__PURE__ */ React56.createElement(
+    Popover5,
+    {
+      disablePortal: true,
+      slotProps: {
+        paper: {
+          ref: setAnchorEl,
+          sx: { mt: 0.5, width: anchorRef?.offsetWidth }
+        }
+      },
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      anchorEl: anchorRef,
+      ...popoverProps
+    },
+    /* @__PURE__ */ React56.createElement(Box8, null, children)
+  );
+};
+
+// src/components/unstable-repeater/items/use-popover.tsx
+import { useEffect as useEffect8, useState as useState13 } from "react";
+import { bindPopover as bindPopover5, usePopupState as usePopupState6 } from "@elementor/ui";
+var usePopover2 = (openOnMount, onOpen) => {
+  const [ref, setRef] = useState13(null);
+  const popoverState = usePopupState6({ variant: "popover" });
+  const popoverProps = bindPopover5(popoverState);
+  useEffect8(() => {
+    if (openOnMount && ref) {
+      popoverState.open(ref);
+      onOpen?.();
+    }
+  }, [ref]);
+  return {
+    popoverState,
+    ref,
+    setRef,
+    popoverProps
+  };
+};
+
+// src/components/unstable-repeater/items/item.tsx
+var Item = ({
+  Label: Label3,
+  Icon,
+  Content: Content6,
+  key,
+  value,
+  index,
+  openOnMount,
+  children
+}) => {
+  const [anchorEl, setAnchorEl] = useState14(null);
+  const { popoverState, popoverProps, ref, setRef } = usePopover2(openOnMount, () => {
+  });
+  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
+    UnstableTag3,
+    {
+      key,
+      disabled: false,
+      label: /* @__PURE__ */ React57.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React57.createElement(Label3, { value })),
+      showActionsOnHover: true,
+      fullWidth: true,
+      ref: setRef,
+      variant: "outlined",
+      "aria-label": __23("Open item", "elementor"),
+      ...bindTrigger4(popoverState),
+      startIcon: /* @__PURE__ */ React57.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React57.createElement(Icon, { value })),
+      actions: /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React57.createElement(
+        SlotChildren,
+        {
+          whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
+          props: { index },
+          sorted: true
+        },
+        children
+      ))
+    }
+  ), /* @__PURE__ */ React57.createElement(EditItemPopover, { anchorRef: ref, setAnchorEl, popoverProps }, /* @__PURE__ */ React57.createElement(Content6, { anchorEl, bind: String(index), value })));
+};
+
+// src/components/unstable-repeater/unstable-repeater.tsx
+import * as React58 from "react";
+var UnstableRepeater = ({
+  children,
+  initial,
+  propTypeUtil
+}) => {
+  return /* @__PURE__ */ React58.createElement(SectionContent, null, /* @__PURE__ */ React58.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React58.createElement(SlotChildren, { whitelist: [Header, ItemsContainer], sorted: true }, children)));
+};
+
+// 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 React59 from "react";
+import {
+  backgroundGradientOverlayPropTypeUtil,
+  colorPropTypeUtil as colorPropTypeUtil2,
+  colorStopPropTypeUtil,
+  gradientColorStopPropTypeUtil,
+  numberPropTypeUtil as numberPropTypeUtil3,
+  stringPropTypeUtil as stringPropTypeUtil8
+} from "@elementor/editor-props";
+import { UnstableGradientBox } from "@elementor/ui";
+var BackgroundGradientColorControl = createControl(() => {
+  const { value, setValue } = useBoundProp(backgroundGradientOverlayPropTypeUtil);
+  const handleChange = (newValue) => {
+    const transformedValue = createTransformableValue(newValue);
+    if (transformedValue.positions) {
+      transformedValue.positions = stringPropTypeUtil8.create(newValue.positions.join(" "));
+    }
+    setValue(transformedValue);
+  };
+  const createTransformableValue = (newValue) => ({
+    ...newValue,
+    type: stringPropTypeUtil8.create(newValue.type),
+    angle: numberPropTypeUtil3.create(newValue.angle),
+    stops: gradientColorStopPropTypeUtil.create(
+      newValue.stops.map(
+        ({ color, offset }) => colorStopPropTypeUtil.create({
+          color: colorPropTypeUtil2.create(color),
+          offset: numberPropTypeUtil3.create(offset)
+        })
+      )
+    )
+  });
+  const normalizeValue = () => {
+    if (!value) {
+      return;
+    }
+    const { type, angle, stops, positions } = value;
+    return {
+      type: type.value,
+      angle: angle.value,
+      stops: stops.value.map(({ value: { color, offset } }) => ({
+        color: color.value,
+        offset: offset.value
+      })),
+      positions: positions?.value.split(" ")
+    };
+  };
+  return /* @__PURE__ */ React59.createElement(ControlActions, null, /* @__PURE__ */ React59.createElement(
+    UnstableGradientBox,
+    {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
       onChange: handleChange
@@ -3170,53 +3715,53 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React48 from "react";
+import * as React60 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid12 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __24 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __16("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(PinIcon, { fontSize: size }),
+    label: __24("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __16("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React48.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __24("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React60.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  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 })));
+  return /* @__PURE__ */ React60.createElement(PopoverGridContainer, null, /* @__PURE__ */ React60.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React60.createElement(ControlFormLabel, null, __24("Attachment", "elementor"))), /* @__PURE__ */ React60.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React60.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React49 from "react";
-import { useRef as useRef10 } from "react";
+import * as React61 from "react";
+import { useRef as useRef11 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
-import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
+import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
-import { Grid as Grid13, Select as Select4 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { Grid as Grid13, Select as Select3 } from "@elementor/ui";
+import { __ as __25 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { 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" }
+  { label: __25("Center center", "elementor"), value: "center center" },
+  { label: __25("Center left", "elementor"), value: "center left" },
+  { label: __25("Center right", "elementor"), value: "center right" },
+  { label: __25("Top center", "elementor"), value: "top center" },
+  { label: __25("Top left", "elementor"), value: "top left" },
+  { label: __25("Top right", "elementor"), value: "top right" },
+  { label: __25("Bottom center", "elementor"), value: "bottom center" },
+  { label: __25("Bottom left", "elementor"), value: "bottom left" },
+  { label: __25("Bottom right", "elementor"), value: "bottom right" },
+  { label: __25("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil9);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef10(null);
+  const rowRef = useRef11(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -3225,8 +3770,8 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  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,
+  return /* @__PURE__ */ React61.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React61.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(PopoverGridContainer, null, /* @__PURE__ */ React61.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlFormLabel, null, __25("Position", "elementor"))), /* @__PURE__ */ React61.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React61.createElement(
+    Select3,
     {
       fullWidth: true,
       size: "tiny",
@@ -3234,60 +3779,60 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    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(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React61.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React61.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React61.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(Grid13, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React61.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React61.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React49.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React61.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React49.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React49.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React49.createElement(
+  ))), /* @__PURE__ */ React61.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React61.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React49.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React61.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef
     }
   )))))) : null);
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React50 from "react";
-import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
+import * as React62 from "react";
+import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
 import { Grid as Grid14 } from "@elementor/ui";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __26 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __18("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(GridDotsIcon, { fontSize: size }),
+    label: __26("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __18("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __26("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __18("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __26("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __18("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React50.createElement(XIcon3, { fontSize: size }),
+    label: __26("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React62.createElement(XIcon4, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  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 })));
+  return /* @__PURE__ */ React62.createElement(PopoverGridContainer, null, /* @__PURE__ */ React62.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlFormLabel, null, __26("Repeat", "elementor"))), /* @__PURE__ */ React62.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React62.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React51 from "react";
-import { useRef as useRef11 } from "react";
+import * as React63 from "react";
+import { useRef as useRef12 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -3295,33 +3840,33 @@ import {
   ArrowsMoveHorizontalIcon as ArrowsMoveHorizontalIcon2,
   ArrowsMoveVerticalIcon as ArrowsMoveVerticalIcon2,
   LetterAIcon,
-  PencilIcon as PencilIcon2
+  PencilIcon
 } from "@elementor/icons";
 import { Grid as Grid15 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __27 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __19("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(LetterAIcon, { fontSize: size }),
+    label: __27("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __19("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __27("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __19("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __27("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __19("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React51.createElement(PencilIcon2, { fontSize: size }),
+    label: __27("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3329,7 +3874,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil10);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef11(null);
+  const rowRef = useRef12(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -3337,7 +3882,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  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(
+  return /* @__PURE__ */ React63.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React63.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlFormLabel, null, __27("Size", "elementor"))), /* @__PURE__ */ React63.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React63.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -3346,17 +3891,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), 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(
+  )))), isCustom ? /* @__PURE__ */ React63.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React63.createElement(Grid15, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React63.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React51.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React63.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React51.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React51.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React51.createElement(
+  ))), /* @__PURE__ */ React63.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React63.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React51.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React63.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -3364,7 +3909,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef12 } from "react";
+import { useRef as useRef13 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -3389,7 +3934,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef12({
+  const valuesHistory = useRef13({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -3457,32 +4002,17 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { 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" }
+  { label: __28("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __28("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __28("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __28("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
-  const { propType, value: overlayValues, setValue, disabled } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React52.createElement(PropProvider, { propType, value: overlayValues, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React52.createElement(
-    Repeater,
-    {
-      openOnAdd: true,
-      disabled,
-      values: overlayValues ?? [],
-      setValues: setValue,
-      label: __20("Overlay", "elementor"),
-      itemSettings: {
-        Icon: ItemIcon3,
-        Label: ItemLabel3,
-        Content: ItemContent3,
-        initialValues: getInitialBackgroundOverlay()
-      }
-    }
-  ));
+  const { propType, value: backgroundValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
+  return /* @__PURE__ */ React64.createElement(PropProvider, { propType, value: backgroundValues, setValue }, /* @__PURE__ */ React64.createElement(UnstableRepeater, { initial: getInitialBackgroundOverlay(), propTypeUtil: backgroundOverlayPropTypeUtil }, /* @__PURE__ */ React64.createElement(Header, { label: __28("Overlay", "elementor") }, /* @__PURE__ */ React64.createElement(AddItemAction, { newItemIndex: 0 })), /* @__PURE__ */ React64.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React64.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3, Content: ItemContent3 }) }, /* @__PURE__ */ React64.createElement(DuplicateItemAction, null), /* @__PURE__ */ React64.createElement(DisableItemAction, null), /* @__PURE__ */ React64.createElement(RemoveItemAction, null))));
 });
 var ItemContent3 = ({ anchorEl = null, bind }) => {
-  return /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React52.createElement(Content3, { anchorEl }));
+  return /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React64.createElement(Content3, { anchorEl }));
 };
 var Content3 = ({ anchorEl }) => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
@@ -3490,27 +4020,27 @@ var Content3 = ({ anchorEl }) => {
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
-  return /* @__PURE__ */ React52.createElement(Box8, { sx: { width: "100%" } }, /* @__PURE__ */ React52.createElement(Box8, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React64.createElement(Box9, { sx: { width: "100%" } }, /* @__PURE__ */ React64.createElement(Box9, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React64.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __20("Background Overlay", "elementor")
+      "aria-label": __28("Background Overlay", "elementor")
     },
-    /* @__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 }))));
+    /* @__PURE__ */ React64.createElement(Tab, { label: __28("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React64.createElement(Tab, { label: __28("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React64.createElement(Tab, { label: __28("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React64.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React64.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React64.createElement(PopoverContent, null, /* @__PURE__ */ React64.createElement(ColorOverlayContent, { anchorEl }))));
 };
 var ItemIcon3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React52.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React64.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React52.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React64.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React52.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React64.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -3523,11 +4053,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React52.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React64.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React52.createElement(
+  return /* @__PURE__ */ React64.createElement(
     CardMedia3,
     {
       image: imageUrl,
@@ -3542,43 +4072,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React52.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React64.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React52.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React64.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React52.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React64.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React52.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React64.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React52.createElement("span", null, color);
+  return /* @__PURE__ */ React64.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React52.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React64.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React52.createElement("span", null, __20("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React64.createElement("span", null, __28("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React52.createElement("span", null, __20("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React64.createElement("span", null, __28("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React52.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React52.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React64.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React64.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  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)));
+  return /* @__PURE__ */ React64.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React64.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React64.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React64.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React64.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React64.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator = styled5(UnstableColorIndicator2)(({ theme }) => ({
+var StyledUnstableColorIndicator = styled6(UnstableColorIndicator2)(({ theme }) => ({
   borderRadius: `${theme.shape.borderRadius / 2}px`
 }));
 var useImage = (image) => {
@@ -3614,22 +4144,21 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  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)))));
+  const colorLabel = __29("Color", "elementor");
+  return /* @__PURE__ */ React65.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React65.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React65.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React65.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React65.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React65.createElement(ColorControl, null)))));
 });
 
 // src/controls/repeatable-control.tsx
-import * as React54 from "react";
-import { useMemo as useMemo4 } from "react";
+import * as React66 from "react";
+import { useMemo as useMemo5 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
-import { Box as Box9 } from "@elementor/ui";
+import { Box as Box10 } from "@elementor/ui";
 
 // src/hooks/use-repeatable-control-context.ts
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var RepeatableControlContext = createContext6(void 0);
+import { createContext as createContext8, useContext as useContext8 } from "react";
+var RepeatableControlContext = createContext8(void 0);
 var useRepeatableControlContext = () => {
-  const context = useContext6(RepeatableControlContext);
+  const context = useContext8(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -3646,17 +4175,18 @@ var RepeatableControl = createControl(
     showToggle,
     initialValues,
     patternLabel,
-    placeholder
+    placeholder,
+    propKey
   }) => {
     const { propTypeUtil: childPropTypeUtil } = childControlConfig;
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil = useMemo4(
-      () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema),
-      [childPropTypeUtil.key, childPropTypeUtil.schema]
+    const childArrayPropTypeUtil = useMemo5(
+      () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
+      [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo4(
+    const contextValue = useMemo5(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -3665,7 +4195,7 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    return /* @__PURE__ */ React54.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React54.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React54.createElement(
+    return /* @__PURE__ */ React66.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React66.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React66.createElement(
       Repeater,
       {
         openOnAdd: true,
@@ -3686,12 +4216,12 @@ var RepeatableControl = createControl(
   }
 );
 var ItemContent4 = ({ bind }) => {
-  return /* @__PURE__ */ React54.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React54.createElement(Content4, null));
+  return /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React66.createElement(Content4, null));
 };
-var ItemIcon4 = () => /* @__PURE__ */ React54.createElement(React54.Fragment, null);
+var ItemIcon4 = () => /* @__PURE__ */ React66.createElement(React66.Fragment, null);
 var Content4 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React54.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React54.createElement(PopoverGridContainer, null, /* @__PURE__ */ React54.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React66.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -3750,8 +4280,10 @@ var shouldShowPlaceholder = (pattern, data) => {
 };
 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);
+  const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
+  const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
+  const color = showPlaceholder ? "text.tertiary" : "text.primary";
+  return /* @__PURE__ */ React66.createElement(Box10, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -3759,30 +4291,30 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React55 from "react";
-import { useMemo as useMemo5, useState as useState11 } from "react";
+import * as React67 from "react";
+import { useMemo as useMemo6, useState as useState15 } from "react";
 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";
+import { __ as __30 } from "@wordpress/i18n";
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState11("");
-  const [valueError, setValueError] = useState11("");
-  const [sessionState, setSessionState] = useState11({
+  const [keyError, setKeyError] = useState15("");
+  const [valueError, setValueError] = useState15("");
+  const [sessionState, setSessionState] = useState15({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
-  const keyLabel = props.keyName || __22("Key", "elementor");
-  const valueLabel = props.valueName || __22("Value", "elementor");
-  const [keyRegex, valueRegex, errMsg] = useMemo5(
+  const keyLabel = props.keyName || __30("Key", "elementor");
+  const valueLabel = props.valueName || __30("Value", "elementor");
+  const [keyRegex, valueRegex, errMsg] = useMemo6(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __22("Invalid Format", "elementor")
+      props.validationErrorMessage || __30("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -3831,59 +4363,49 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  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(
+  return /* @__PURE__ */ React67.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React67.createElement(Grid17, { container: true, gap: 1.5 }, /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React67.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React67.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError })), !!keyError && /* @__PURE__ */ React67.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React67.createElement(Grid17, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React67.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React67.createElement(
     TextControl,
     {
       inputValue: sessionState.value,
       error: !!valueError,
-      inputDisabled: !!keyError,
-      sx: { pt: 1 }
+      inputDisabled: !!keyError
     }
-  )), !!valueError && /* @__PURE__ */ React55.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React67.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React56 from "react";
-import { useMemo as useMemo6 } from "react";
+import * as React68 from "react";
 import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
-import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
-import { isExperimentActive as isExperimentActive6 } from "@elementor/editor-v1-adapters";
+import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
-import { Grid as Grid18, Select as Select5 } from "@elementor/ui";
-import { __ as __23 } from "@wordpress/i18n";
+import { Grid as Grid18, Select as Select4 } from "@elementor/ui";
+import { __ as __31 } from "@wordpress/i18n";
 var positionOptions = [
-  { 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" }
+  { label: __31("Center center", "elementor"), value: "center center" },
+  { label: __31("Center left", "elementor"), value: "center left" },
+  { label: __31("Center right", "elementor"), value: "center right" },
+  { label: __31("Top center", "elementor"), value: "top center" },
+  { label: __31("Top left", "elementor"), value: "top left" },
+  { label: __31("Top right", "elementor"), value: "top right" },
+  { label: __31("Bottom center", "elementor"), value: "bottom center" },
+  { label: __31("Bottom left", "elementor"), value: "bottom left" },
+  { label: __31("Bottom right", "elementor"), value: "bottom right" },
+  { label: __31("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
   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: __23("Custom", "elementor"), value: "custom" });
-    }
-    return options;
-  }, [isVersion331Active]);
+  const isCustom = !!positionContext.value;
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
-    if (value === "custom" && isVersion331Active) {
+    if (value === "custom") {
       positionContext.setValue({ x: null, y: null });
     } else {
       stringPropContext.setValue(value);
     }
   };
-  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,
+  return /* @__PURE__ */ React68.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, __31("Object position", "elementor"))), /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React68.createElement(
+    Select4,
     {
       size: "tiny",
       disabled: stringPropContext.disabled,
@@ -3891,123 +4413,384 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    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" }) })))))));
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React68.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React68.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React68.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React68.createElement(SizeControl, { startIcon: /* @__PURE__ */ React68.createElement(LetterXIcon2, { fontSize: "tiny" }) }))), /* @__PURE__ */ React68.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React68.createElement(SizeControl, { startIcon: /* @__PURE__ */ React68.createElement(LetterYIcon2, { fontSize: "tiny" }) })))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React62 from "react";
+import * as React78 from "react";
 import { transformPropTypeUtil } from "@elementor/editor-props";
-import { __ as __27 } from "@wordpress/i18n";
+import { __ as __38 } 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";
+import * as React75 from "react";
+import { Box as Box11, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { __ as __36 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React58 from "react";
-import { useRef as useRef13 } from "react";
+import * as React70 from "react";
+import { useRef as useRef14 } 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";
+import { __ as __32 } from "@wordpress/i18n";
+
+// src/controls/transform-control/types.ts
+import {
+  numberPropTypeUtil as numberPropTypeUtil4,
+  rotateTransformPropTypeUtil,
+  scaleTransformPropTypeUtil,
+  skewTransformPropTypeUtil
+} from "@elementor/editor-props";
+var TransformFunctionKeys = {
+  move: "transform-move",
+  scale: "transform-scale",
+  rotate: "transform-rotate",
+  skew: "transform-skew"
+};
+var defaultValues = {
+  move: {
+    size: 0,
+    unit: "px"
+  },
+  scale: 1,
+  rotate: {
+    size: 0,
+    unit: "deg"
+  },
+  skew: {
+    size: 0,
+    unit: "deg"
+  }
+};
+var initialTransformValue = {
+  $$type: TransformFunctionKeys.move,
+  value: {
+    x: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } },
+    y: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } },
+    z: { $$type: "size", value: { size: defaultValues.move.size, unit: defaultValues.move.unit } }
+  }
+};
+var initialScaleValue = scaleTransformPropTypeUtil.create({
+  x: numberPropTypeUtil4.create(defaultValues.scale),
+  y: numberPropTypeUtil4.create(defaultValues.scale),
+  z: numberPropTypeUtil4.create(defaultValues.scale)
+});
+var initialRotateValue = rotateTransformPropTypeUtil.create({
+  x: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
+  y: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } },
+  z: { $$type: "size", value: { size: defaultValues.rotate.size, unit: defaultValues.rotate.unit } }
+});
+var initialSkewValue = skewTransformPropTypeUtil.create({
+  x: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } },
+  y: { $$type: "size", value: { size: defaultValues.skew.size, unit: defaultValues.skew.unit } }
+});
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React57 from "react";
+import * as React69 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 })))));
+var AxisRow = ({ label, bindValue, startIcon, anchorRef, units: units2 }) => {
+  return /* @__PURE__ */ React69.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React69.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlLabel, null, label)), /* @__PURE__ */ React69.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React69.createElement(SizeControl, { anchorRef, startIcon, units: units2, variant: "angle" })))));
 };
 
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: __24("Move X", "elementor"),
+    label: __32("Move X", "elementor"),
     bindValue: "x",
-    startIcon: /* @__PURE__ */ React58.createElement(ArrowRightIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React70.createElement(ArrowRightIcon, { fontSize: "tiny" })
   },
   {
-    label: __24("Move Y", "elementor"),
+    label: __32("Move Y", "elementor"),
     bindValue: "y",
-    startIcon: /* @__PURE__ */ React58.createElement(ArrowDownSmallIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React70.createElement(ArrowDownSmallIcon, { fontSize: "tiny" })
   },
   {
-    label: __24("Move Z", "elementor"),
+    label: __32("Move Z", "elementor"),
     bindValue: "z",
-    startIcon: /* @__PURE__ */ React58.createElement(ArrowDownLeftIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React70.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 })))));
+  const rowRef = useRef14(null);
+  return /* @__PURE__ */ React70.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React70.createElement(PropProvider, { ...context }, /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control) => /* @__PURE__ */ React70.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
+};
+
+// src/controls/transform-control/functions/rotate.tsx
+import * as React71 from "react";
+import { useRef as useRef15 } from "react";
+import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
+import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
+import { Grid as Grid21 } from "@elementor/ui";
+import { __ as __33 } from "@wordpress/i18n";
+var rotateAxisControls = [
+  {
+    label: __33("Rotate X", "elementor"),
+    bindValue: "x",
+    startIcon: /* @__PURE__ */ React71.createElement(Arrow360Icon, { fontSize: "tiny" })
+  },
+  {
+    label: __33("Rotate Y", "elementor"),
+    bindValue: "y",
+    startIcon: /* @__PURE__ */ React71.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+  },
+  {
+    label: __33("Rotate Z", "elementor"),
+    bindValue: "z",
+    startIcon: /* @__PURE__ */ React71.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+  }
+];
+var rotateUnits = ["deg", "rad", "grad", "turn"];
+var Rotate = () => {
+  const context = useBoundProp(rotateTransformPropTypeUtil2);
+  const rowRef = useRef15(null);
+  return /* @__PURE__ */ React71.createElement(Grid21, { container: true, spacing: 1.5 }, /* @__PURE__ */ React71.createElement(PropProvider, { ...context }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control) => /* @__PURE__ */ React71.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: rotateUnits })))));
+};
+
+// src/controls/transform-control/functions/scale.tsx
+import * as React73 from "react";
+import { useRef as useRef16 } from "react";
+import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
+import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
+import { Grid as Grid23 } from "@elementor/ui";
+import { __ as __34 } from "@wordpress/i18n";
+
+// src/controls/transform-control/functions/scale-axis-row.tsx
+import * as React72 from "react";
+import { Grid as Grid22 } from "@elementor/ui";
+var ScaleAxisRow = ({ label, bindValue, startIcon, anchorRef }) => {
+  return /* @__PURE__ */ React72.createElement(Grid22, { item: true, xs: 12 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React72.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(ControlLabel, null, label)), /* @__PURE__ */ React72.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: bindValue }, /* @__PURE__ */ React72.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+};
+
+// src/controls/transform-control/functions/scale.tsx
+var scaleAxisControls = [
+  {
+    label: __34("Scale X", "elementor"),
+    bindValue: "x",
+    startIcon: /* @__PURE__ */ React73.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+  },
+  {
+    label: __34("Scale Y", "elementor"),
+    bindValue: "y",
+    startIcon: /* @__PURE__ */ React73.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+  },
+  {
+    label: __34("Scale Z", "elementor"),
+    bindValue: "z",
+    startIcon: /* @__PURE__ */ React73.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+  }
+];
+var Scale = () => {
+  const context = useBoundProp(scaleTransformPropTypeUtil2);
+  const rowRef = useRef16(null);
+  return /* @__PURE__ */ React73.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React73.createElement(PropProvider, { ...context }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control) => /* @__PURE__ */ React73.createElement(ScaleAxisRow, { key: control.bindValue, ...control, anchorRef: rowRef })))));
+};
+
+// src/controls/transform-control/functions/skew.tsx
+import * as React74 from "react";
+import { useRef as useRef17 } from "react";
+import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
+import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
+import { Grid as Grid24 } from "@elementor/ui";
+import { __ as __35 } from "@wordpress/i18n";
+var skewAxisControls = [
+  {
+    label: __35("Skew X", "elementor"),
+    bindValue: "x",
+    startIcon: /* @__PURE__ */ React74.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+  },
+  {
+    label: __35("Skew Y", "elementor"),
+    bindValue: "y",
+    startIcon: /* @__PURE__ */ React74.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+  }
+];
+var skewUnits = ["deg", "rad", "grad", "turn"];
+var Skew = () => {
+  const context = useBoundProp(skewTransformPropTypeUtil2);
+  const rowRef = useRef17(null);
+  return /* @__PURE__ */ React74.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control) => /* @__PURE__ */ React74.createElement(AxisRow, { key: control.bindValue, ...control, anchorRef: rowRef, units: skewUnits })))));
+};
+
+// src/controls/transform-control/use-transform-tabs-history.tsx
+import { useRef as useRef18 } from "react";
+import {
+  moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
+  rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
+  scaleTransformPropTypeUtil as scaleTransformPropTypeUtil3,
+  skewTransformPropTypeUtil as skewTransformPropTypeUtil3
+} from "@elementor/editor-props";
+import { useTabs as useTabs2 } from "@elementor/ui";
+var useTransformTabsHistory = ({
+  move: initialMove,
+  scale: initialScale,
+  rotate: initialRotate,
+  skew: initialSkew
+}) => {
+  const { value: moveValue, setValue: setMoveValue } = useBoundProp(moveTransformPropTypeUtil2);
+  const { value: scaleValue, setValue: setScaleValue } = useBoundProp(scaleTransformPropTypeUtil3);
+  const { value: rotateValue, setValue: setRotateValue } = useBoundProp(rotateTransformPropTypeUtil3);
+  const { value: skewValue, setValue: setSkewValue } = useBoundProp(skewTransformPropTypeUtil3);
+  const getCurrentTransformType = () => {
+    switch (true) {
+      case !!scaleValue:
+        return TransformFunctionKeys.scale;
+      case !!rotateValue:
+        return TransformFunctionKeys.rotate;
+      case !!skewValue:
+        return TransformFunctionKeys.skew;
+      default:
+        return TransformFunctionKeys.move;
+    }
+  };
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
+  const valuesHistory = useRef18({
+    move: initialMove,
+    scale: initialScale,
+    rotate: initialRotate,
+    skew: initialSkew
+  });
+  const saveToHistory = (key, value) => {
+    if (value) {
+      valuesHistory.current[key] = value;
+    }
+  };
+  const onTabChange = (e, tabName) => {
+    switch (tabName) {
+      case TransformFunctionKeys.move:
+        setMoveValue(valuesHistory.current.move);
+        saveToHistory("scale", scaleValue);
+        saveToHistory("rotate", rotateValue);
+        saveToHistory("skew", skewValue);
+        break;
+      case TransformFunctionKeys.scale:
+        setScaleValue(valuesHistory.current.scale);
+        saveToHistory("move", moveValue);
+        saveToHistory("rotate", rotateValue);
+        saveToHistory("skew", skewValue);
+        break;
+      case TransformFunctionKeys.rotate:
+        setRotateValue(valuesHistory.current.rotate);
+        saveToHistory("move", moveValue);
+        saveToHistory("scale", scaleValue);
+        saveToHistory("skew", skewValue);
+        break;
+      case TransformFunctionKeys.skew:
+        setSkewValue(valuesHistory.current.skew);
+        saveToHistory("move", moveValue);
+        saveToHistory("scale", scaleValue);
+        saveToHistory("rotate", rotateValue);
+        break;
+    }
+    return getTabsProps().onChange(e, tabName);
+  };
+  return {
+    getTabProps,
+    getTabPanelProps,
+    getTabsProps: () => ({ ...getTabsProps(), onChange: onTabChange })
+  };
 };
 
 // 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(
+  return /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React75.createElement(Content5, null));
+};
+var Content5 = () => {
+  const { getTabsProps, getTabProps, getTabPanelProps } = useTransformTabsHistory({
+    move: initialTransformValue.value,
+    scale: initialScaleValue.value,
+    rotate: initialRotateValue.value,
+    skew: initialSkewValue.value
+  });
+  return /* @__PURE__ */ React75.createElement(PopoverContent, null, /* @__PURE__ */ React75.createElement(Box11, { sx: { width: "100%" } }, /* @__PURE__ */ React75.createElement(Box11, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React75.createElement(
     Tabs2,
     {
       size: "small",
       variant: "fullWidth",
+      sx: {
+        "& .MuiTab-root": {
+          minWidth: "62px"
+        }
+      },
       ...getTabsProps(),
-      "aria-label": __25("Transform", "elementor")
+      "aria-label": __36("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)))));
+    /* @__PURE__ */ React75.createElement(Tab2, { label: __36("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React75.createElement(Tab2, { label: __36("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React75.createElement(Tab2, { label: __36("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React75.createElement(Tab2, { label: __36("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React75.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React75.createElement(Move, null)), /* @__PURE__ */ React75.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React75.createElement(Scale, null)), /* @__PURE__ */ React75.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React75.createElement(Rotate, null)), /* @__PURE__ */ React75.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React75.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React60 from "react";
-import { ArrowsMaximizeIcon as ArrowsMaximizeIcon2 } from "@elementor/icons";
+import * as React76 from "react";
+import { ArrowsMaximizeIcon as ArrowsMaximizeIcon2, ExpandIcon, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
-    case "transform-move":
-      return /* @__PURE__ */ React60.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+    case TransformFunctionKeys.move:
+      return /* @__PURE__ */ React76.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+    case TransformFunctionKeys.scale:
+      return /* @__PURE__ */ React76.createElement(ExpandIcon, { fontSize: "tiny" });
+    case TransformFunctionKeys.rotate:
+      return /* @__PURE__ */ React76.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+    case TransformFunctionKeys.skew:
+      return /* @__PURE__ */ React76.createElement(SkewXIcon, { 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(", ");
+import * as React77 from "react";
+import { Box as Box12 } from "@elementor/ui";
+import { __ as __37 } from "@wordpress/i18n";
+var transformMoveValue = (value) => Object.values(value).map((axis) => {
+  const size = axis?.value?.size ?? defaultValues.move.size;
+  const unit = axis?.value?.unit ?? defaultValues.move.unit;
+  return `${size}${unit}`;
+}).join(", ");
+var transformScaleValue = (value) => Object.values(value).map((axis) => axis?.value || defaultValues.scale).join(", ");
+var transformRotateValue = (value) => Object.values(value).map((axis) => {
+  const size = axis?.value?.size ?? defaultValues.rotate.size;
+  const unit = axis?.value?.unit ?? defaultValues.rotate.unit;
+  return `${size}${unit}`;
+}).join(", ");
+var transformSkewValue = (value) => Object.values(value).map((axis) => {
+  const size = axis?.value?.size ?? defaultValues.skew.size;
+  const unit = axis?.value?.unit ?? defaultValues.skew.unit;
+  return `${size}${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) });
+    case TransformFunctionKeys.move:
+      return /* @__PURE__ */ React77.createElement(Label2, { label: __37("Move", "elementor"), value: transformMoveValue(value) });
+    case TransformFunctionKeys.scale:
+      return /* @__PURE__ */ React77.createElement(Label2, { label: __37("Scale", "elementor"), value: transformScaleValue(value) });
+    case TransformFunctionKeys.rotate:
+      return /* @__PURE__ */ React77.createElement(Label2, { label: __37("Rotate", "elementor"), value: transformRotateValue(value) });
+    case TransformFunctionKeys.skew:
+      return /* @__PURE__ */ React77.createElement(Label2, { label: __37("Skew", "elementor"), value: transformSkewValue(value) });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React61.createElement(Box11, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React77.createElement(Box12, { 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(
+  return /* @__PURE__ */ React78.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React78.createElement(
     Repeater,
     {
       openOnAdd: true,
       disabled,
       values: transformValues ?? [],
       setValues: setValue,
-      label: __27("Transform", "elementor"),
+      label: __38("Transform", "elementor"),
       showDuplicate: false,
       itemSettings: {
         Icon: TransformIcon,
@@ -4018,6 +4801,213 @@ var TransformRepeaterControl = createControl(() => {
     }
   ));
 });
+
+// src/controls/transition-control/transition-repeater-control.tsx
+import * as React81 from "react";
+import { selectionSizePropTypeUtil as selectionSizePropTypeUtil2 } from "@elementor/editor-props";
+import { __ as __40 } from "@wordpress/i18n";
+
+// src/controls/selection-size-control.tsx
+import * as React79 from "react";
+import { useMemo as useMemo7, useRef as useRef19 } from "react";
+import { selectionSizePropTypeUtil } from "@elementor/editor-props";
+import { Grid as Grid25 } from "@elementor/ui";
+var SelectionSizeControl = createControl(
+  ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
+    const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
+    const rowRef = useRef19(null);
+    const currentSizeConfig = useMemo7(() => {
+      switch (value.selection.$$type) {
+        case "key-value":
+          return sizeConfigMap[value?.selection?.value.value.value || ""];
+        case "string":
+          return sizeConfigMap[value?.selection?.value || ""];
+        default:
+          return null;
+      }
+    }, [value, sizeConfigMap]);
+    const SelectionComponent = selectionConfig.component;
+    return /* @__PURE__ */ React79.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React79.createElement(Grid25, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React79.createElement(Grid25, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React79.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React79.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React79.createElement(React79.Fragment, null, /* @__PURE__ */ React79.createElement(Grid25, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React79.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React79.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React79.createElement(
+      SizeControl,
+      {
+        anchorRef: rowRef,
+        variant: currentSizeConfig.variant,
+        units: currentSizeConfig.units,
+        defaultUnit: currentSizeConfig.defaultUnit
+      }
+    ))))));
+  }
+);
+
+// src/controls/transition-control/data.ts
+var initialTransitionValue = {
+  selection: {
+    $$type: "key-value",
+    value: {
+      key: { value: "All properties", $$type: "string" },
+      value: { value: "all", $$type: "string" }
+    }
+  },
+  size: { $$type: "size", value: { size: 200, unit: "ms" } }
+};
+var transitionProperties = [
+  {
+    label: "Common",
+    type: "category",
+    properties: [{ label: "All properties", value: "all" }]
+  }
+];
+var transitionsItemsList = transitionProperties.map((category) => ({
+  label: category.label,
+  items: category.properties.map((property) => property.label)
+}));
+
+// src/controls/transition-control/transition-selector.tsx
+import * as React80 from "react";
+import { useRef as useRef20 } from "react";
+import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
+import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
+import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box13, Popover as Popover6, UnstableTag as UnstableTag4, usePopupState as usePopupState7 } from "@elementor/ui";
+import { __ as __39 } from "@wordpress/i18n";
+var toTransitionSelectorValue = (label) => {
+  for (const category of transitionProperties) {
+    const property = category.properties.find((prop) => prop.label === label);
+    if (property) {
+      return {
+        key: { value: property.label, $$type: "string" },
+        value: { value: property.value, $$type: "string" }
+      };
+    }
+  }
+  return null;
+};
+var TransitionSelector = () => {
+  const { value, setValue } = useBoundProp(keyValuePropTypeUtil2);
+  const {
+    value: { value: transitionValue },
+    key: { value: transitionLabel }
+  } = value;
+  const defaultRef = useRef20(null);
+  const popoverState = usePopupState7({ variant: "popover" });
+  const handleTransitionPropertyChange = (newLabel) => {
+    const newValue = toTransitionSelectorValue(newLabel);
+    if (!newValue) {
+      return;
+    }
+    setValue(newValue);
+    popoverState.close();
+  };
+  const getAnchorPosition = () => {
+    if (!defaultRef.current) {
+      return void 0;
+    }
+    const rect = defaultRef.current.getBoundingClientRect();
+    return {
+      top: rect.top,
+      left: rect.right + 36
+    };
+  };
+  return /* @__PURE__ */ React80.createElement(Box13, { ref: defaultRef }, /* @__PURE__ */ React80.createElement(
+    UnstableTag4,
+    {
+      variant: "outlined",
+      label: transitionLabel,
+      endIcon: /* @__PURE__ */ React80.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      ...bindTrigger5(popoverState),
+      fullWidth: true
+    }
+  ), /* @__PURE__ */ React80.createElement(
+    Popover6,
+    {
+      disablePortal: true,
+      disableScrollLock: true,
+      ...bindPopover6(popoverState),
+      anchorReference: "anchorPosition",
+      anchorPosition: getAnchorPosition(),
+      anchorOrigin: { vertical: "top", horizontal: "right" },
+      transformOrigin: { vertical: "top", horizontal: "left" }
+    },
+    /* @__PURE__ */ React80.createElement(
+      ItemSelector,
+      {
+        itemsList: transitionsItemsList,
+        selectedItem: transitionValue,
+        onItemChange: handleTransitionPropertyChange,
+        onClose: popoverState.close,
+        sectionWidth: 268,
+        title: __39("Transition Property", "elementor"),
+        icon: VariationsIcon
+      }
+    )
+  ));
+};
+
+// src/controls/transition-control/transition-repeater-control.tsx
+var DURATION_CONFIG = {
+  variant: "time",
+  units: ["s", "ms"],
+  defaultUnit: "ms"
+};
+var getSelectionSizeProps = () => {
+  return {
+    selectionLabel: __40("Type", "elementor"),
+    sizeLabel: __40("Duration", "elementor"),
+    selectionConfig: {
+      component: TransitionSelector,
+      props: {}
+    },
+    sizeConfigMap: {
+      ...transitionProperties.reduce(
+        (acc, category) => {
+          category.properties.forEach((property) => {
+            acc[property.value] = DURATION_CONFIG;
+          });
+          return acc;
+        },
+        {}
+      )
+    }
+  };
+};
+function getChildControlConfig() {
+  return {
+    propTypeUtil: selectionSizePropTypeUtil2,
+    component: SelectionSizeControl,
+    props: getSelectionSizeProps()
+  };
+}
+var TransitionRepeaterControl = createControl(() => {
+  return /* @__PURE__ */ React81.createElement(
+    RepeatableControl,
+    {
+      label: __40("Transitions", "elementor"),
+      repeaterLabel: __40("Transitions", "elementor"),
+      patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
+      placeholder: __40("Empty Transition", "elementor"),
+      showDuplicate: false,
+      showToggle: true,
+      initialValues: initialTransitionValue,
+      childControlConfig: getChildControlConfig(),
+      propKey: "transition"
+    }
+  );
+});
+
+// src/controls/unstable-transform-control/unstable-transform-repeater-control.tsx
+import * as React82 from "react";
+import { transformPropTypeUtil as transformPropTypeUtil2 } from "@elementor/editor-props";
+import { __ as __41 } from "@wordpress/i18n";
+var UnstableTransformRepeaterControl = createControl(() => {
+  const { propType, value: transformValues, setValue } = useBoundProp(transformPropTypeUtil2);
+  return /* @__PURE__ */ React82.createElement(PropProvider, { propType, value: transformValues, setValue }, /* @__PURE__ */ React82.createElement(UnstableRepeater, { initial: initialTransformValue, propTypeUtil: transformPropTypeUtil2 }, /* @__PURE__ */ React82.createElement(Header, { label: __41("Transform", "elementor") }, /* @__PURE__ */ React82.createElement(AddItemAction, null)), /* @__PURE__ */ React82.createElement(
+    ItemsContainer,
+    {
+      itemTemplate: /* @__PURE__ */ React82.createElement(Item, { Icon: TransformIcon, Label: TransformLabel, Content: TransformContent })
+    },
+    /* @__PURE__ */ React82.createElement(DisableItemAction, null),
+    /* @__PURE__ */ React82.createElement(RemoveItemAction, null)
+  )));
+});
 export {
   AspectRatioControl,
   BackgroundControl,
@@ -4032,9 +5022,9 @@ export {
   EqualUnequalSizesControl,
   FilterRepeaterControl,
   FontFamilyControl,
-  FontFamilySelector,
   GapControl,
   ImageControl,
+  ItemSelector,
   KeyValueControl,
   LinkControl,
   LinkedDimensionsControl,
@@ -4053,12 +5043,20 @@ export {
   TextControl,
   ToggleControl,
   TransformRepeaterControl,
+  TransitionRepeaterControl,
+  UnstableTransformRepeaterControl,
   UrlControl,
   createControlReplacementsRegistry,
+  enqueueFont,
+  injectIntoRepeaterHeaderActions,
+  injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel,
+  transitionProperties,
+  transitionsItemsList,
   useBoundProp,
   useControlActions,
+  useFloatingActionsBar,
   useSyncExternalState
 };
 //# sourceMappingURL=index.mjs.map