@elementor/editor-controls 3.32.0-84 → 3.32.0-86

package/dist/index.mjs

@@ -1021,7 +1021,7 @@ var SizeControl = createControl(
         popupState,
         min
       }
-    ), anchorRef?.current && /* @__PURE__ */ React18.createElement(
+    ), anchorRef?.current && popupState.isOpen && /* @__PURE__ */ React18.createElement(
       TextFieldPopover,
       {
         popupState,
@@ -1151,11 +1151,11 @@ var StrokeControl = createControl(() => {
 var Control = forwardRef3(({ bind, label, children }, ref) => /* @__PURE__ */ React21.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React21.createElement(Grid2, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref }, /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 6 }, /* @__PURE__ */ React21.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React21.createElement(Grid2, { item: true, xs: 6 }, children))));
 
 // src/controls/box-shadow-repeater-control.tsx
-import * as React28 from "react";
+import * as React37 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 __6 } from "@wordpress/i18n";
+import { FormLabel as FormLabel2, Grid as Grid4, styled as styled4, UnstableColorIndicator } from "@elementor/ui";
+import { __ as __10 } from "@wordpress/i18n";
 
 // src/components/popover-content.tsx
 import * as React22 from "react";
@@ -1170,34 +1170,138 @@ var PopoverGridContainer = forwardRef4(
   ({ gap = 1.5, alignItems = "center", flexWrap = "nowrap", children }, ref) => /* @__PURE__ */ React23.createElement(Grid3, { container: true, gap, alignItems, flexWrap, ref }, children)
 );
 
-// src/components/repeater.tsx
-import * as React27 from "react";
-import { useEffect as useEffect4, useState as useState6 } from "react";
-import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from "@elementor/icons";
-import {
-  bindPopover as bindPopover2,
-  bindTrigger as bindTrigger2,
-  Box as Box2,
-  IconButton,
-  Popover as Popover2,
-  Stack as Stack5,
-  Tooltip,
-  Typography as Typography2,
-  UnstableTag,
-  usePopupState as usePopupState3
-} from "@elementor/ui";
+// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
+import * as React25 from "react";
+import { PlusIcon } from "@elementor/icons";
+import { Box as Box2, IconButton, Infotip } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
 
+// src/components/unstable-repeater/context/repeater-context.tsx
+import * as React24 from "react";
+import { createContext as createContext6, useState as useState6 } from "react";
+import { usePopupState as usePopupState3 } from "@elementor/ui";
+var RepeaterContext = createContext6(null);
+var EMPTY_OPEN_ITEM = -1;
+var useRepeaterContext = () => {
+  const context = React24.useContext(RepeaterContext);
+  if (!context) {
+    throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
+  }
+  return context;
+};
+var RepeaterContextProvider = ({
+  children,
+  initial,
+  propTypeUtil
+}) => {
+  const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp(propTypeUtil);
+  const [items2, setItems] = useSyncExternalState({
+    external: repeaterValues,
+    fallback: () => [],
+    setExternal: setRepeaterValues,
+    persistWhen: () => true
+  });
+  const [itemsWithKeys, setItemsWithKeys] = useState6(() => {
+    return items2?.map((item) => ({ key: generateUniqueKey(), item })) ?? [];
+  });
+  React24.useEffect(() => {
+    setItemsWithKeys((prevItemsWithKeys) => {
+      const newItemsWithKeys = items2?.map((item) => {
+        const existingItem = prevItemsWithKeys.find((i) => i.item === item);
+        return existingItem || { key: generateUniqueKey(), item };
+      }) ?? [];
+      return newItemsWithKeys;
+    });
+  }, [items2]);
+  const handleSetItems = (newItemsWithKeys) => {
+    setItems(newItemsWithKeys.map(({ item }) => item));
+  };
+  const [openItemIndex, setOpenItemIndex] = useState6(EMPTY_OPEN_ITEM);
+  const [rowRef, setRowRef] = useState6(null);
+  const isOpen = openItemIndex !== EMPTY_OPEN_ITEM;
+  const popoverState = usePopupState3({ variant: "popover" });
+  const addItem = (ev, config) => {
+    const item = config?.item ?? { ...initial };
+    const newIndex = config?.index ?? items2.length;
+    const newItems = [...items2];
+    newItems.splice(newIndex, 0, item);
+    setItems(newItems);
+    setOpenItemIndex(newIndex);
+    popoverState.open(rowRef ?? ev);
+  };
+  const removeItem = (index) => {
+    setItems(items2.filter((_, pos) => pos !== index));
+  };
+  const updateItem = (updatedItem, index) => {
+    const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
+    setItems(newItems);
+  };
+  return /* @__PURE__ */ React24.createElement(
+    RepeaterContext.Provider,
+    {
+      value: {
+        isOpen,
+        openItemIndex,
+        setOpenItemIndex,
+        items: itemsWithKeys ?? [],
+        setItems: handleSetItems,
+        popoverState,
+        initial,
+        updateItem,
+        addItem,
+        removeItem,
+        rowRef,
+        setRowRef
+      }
+    },
+    children
+  );
+};
+var generateUniqueKey = () => {
+  return Date.now() + Math.floor(Math.random() * 1e6);
+};
+
+// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
+var SIZE2 = "tiny";
+var TooltipAddItemAction = ({
+  disabled = false,
+  enableTooltip = false,
+  tooltipContent = null,
+  newItemIndex
+}) => {
+  const { addItem } = useRepeaterContext();
+  const onClick = (ev) => addItem(ev, { index: newItemIndex });
+  return /* @__PURE__ */ React25.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React25.createElement(Box2, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React25.createElement(
+    IconButton,
+    {
+      size: SIZE2,
+      disabled,
+      onClick,
+      "aria-label": __5("Add item", "elementor")
+    },
+    /* @__PURE__ */ React25.createElement(PlusIcon, { fontSize: SIZE2 })
+  )));
+};
+var ConditionalToolTip = ({
+  children,
+  enable,
+  content
+}) => enable && content ? /* @__PURE__ */ React25.createElement(Infotip, { placement: "right", color: "secondary", content }, children) : children;
+
+// src/components/unstable-repeater/header/header.tsx
+import * as React28 from "react";
+import { Box as Box3, Stack as Stack5, Typography as Typography2 } from "@elementor/ui";
+
 // src/control-adornments/control-adornments.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 
 // src/control-adornments/control-adornments-context.tsx
-import * as React24 from "react";
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var Context2 = createContext6(null);
-var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React24.createElement(Context2.Provider, { value: { items: items2 } }, children);
+import * as React26 from "react";
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var Context2 = createContext7(null);
+var ControlAdornmentsProvider = ({ children, items: items2 }) => /* @__PURE__ */ React26.createElement(Context2.Provider, { value: { items: items2 } }, children);
 var useControlAdornments = () => {
-  const context = useContext6(Context2);
+  const context = useContext7(Context2);
   return context?.items ?? [];
 };
 
@@ -1207,11 +1311,27 @@ function ControlAdornments() {
   if (items2?.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React25.createElement(Adornment, { key: id })));
+  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, items2.map(({ Adornment, id }) => /* @__PURE__ */ React27.createElement(Adornment, { key: id })));
 }
 
+// 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/unstable-repeater/header/header.tsx
+var Header = React28.forwardRef(({ label, children }, ref) => {
+  const { value } = useBoundProp();
+  return /* @__PURE__ */ React28.createElement(Stack5, { direction: "row", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75, py: 0.25 }, ref }, /* @__PURE__ */ React28.createElement(Box3, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React28.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React28.createElement(ControlAdornments, null)), /* @__PURE__ */ React28.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React28.createElement(SlotChildren, { whitelist: [TooltipAddItemAction], sorted: true }, children));
+});
+
+// src/components/unstable-repeater/items/items-container.tsx
+import * as React30 from "react";
+
 // src/components/sortable.tsx
-import * as React26 from "react";
+import * as React29 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
   Divider,
@@ -1222,10 +1342,10 @@ import {
   UnstableSortableProvider
 } from "@elementor/ui";
 var SortableProvider = (props) => {
-  return /* @__PURE__ */ React26.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React26.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
+  return /* @__PURE__ */ React29.createElement(List, { sx: { p: 0, my: -0.5, mx: 0 } }, /* @__PURE__ */ React29.createElement(UnstableSortableProvider, { restrictAxis: true, disableDragOverlay: false, variant: "static", ...props }));
 };
 var SortableItem = ({ id, children, disabled }) => {
-  return /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React29.createElement(
     UnstableSortableItem,
     {
       id,
@@ -1238,7 +1358,7 @@ var SortableItem = ({ id, children, disabled }) => {
         showDropIndication,
         dropIndicationStyle
       }) => {
-        return /* @__PURE__ */ React26.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React26.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React26.createElement(StyledDivider, { style: dropIndicationStyle }));
+        return /* @__PURE__ */ React29.createElement(StyledListItem, { ...itemProps, style: itemStyle }, !disabled && /* @__PURE__ */ React29.createElement(SortableTrigger, { ...triggerProps, style: triggerStyle }), children, showDropIndication && /* @__PURE__ */ React29.createElement(StyledDivider, { style: dropIndicationStyle }));
       }
     }
   );
@@ -1272,7 +1392,7 @@ var StyledListItem = styled3(ListItem)`
 		}
 	}
 `;
-var SortableTrigger = (props) => /* @__PURE__ */ React26.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React26.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableTrigger = (props) => /* @__PURE__ */ React29.createElement("div", { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React29.createElement(GripVerticalIcon, { fontSize: "tiny" }));
 var StyledDivider = styled3(Divider)`
 	height: 0px;
 	border: none;
@@ -1290,252 +1410,224 @@ var StyledDivider = styled3(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 SIZE2 = "tiny";
-var EMPTY_OPEN_ITEM = -1;
-var Repeater = ({
-  label,
-  itemSettings,
-  disabled = false,
-  openOnAdd = false,
-  addToBottom = false,
-  values: repeaterValues = [],
-  setValues: setRepeaterValues,
-  showDuplicate = true,
-  showToggle = true,
+// src/components/unstable-repeater/items/items-container.tsx
+var ItemsContainer = ({
+  itemTemplate,
   isSortable = true,
-  collectionPropUtil
+  children
 }) => {
-  const [openItem, setOpenItem] = useState6(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] = useState6(items2.map((_, index) => index));
-  const generateNextKey = (source) => {
-    return 1 + Math.max(0, ...source);
-  };
-  const addRepeaterItem = () => {
-    const newItem = structuredClone(itemSettings.initialValues);
-    const newKey = generateNextKey(uniqueKeys);
-    if (addToBottom) {
-      setItems([...items2, newItem]);
-      setUniqueKeys([...uniqueKeys, newKey]);
-    } else {
-      setItems([newItem, ...items2]);
-      setUniqueKeys([newKey, ...uniqueKeys]);
-    }
-    if (openOnAdd) {
-      setOpenItem(newKey);
-    }
-  };
-  const duplicateRepeaterItem = (index) => {
-    const newItem = structuredClone(items2[index]);
-    const newKey = generateNextKey(uniqueKeys);
-    const atPosition = 1 + index;
-    setItems([...items2.slice(0, atPosition), newItem, ...items2.slice(atPosition)]);
-    setUniqueKeys([...uniqueKeys.slice(0, atPosition), newKey, ...uniqueKeys.slice(atPosition)]);
-  };
-  const removeRepeaterItem = (index) => {
-    setUniqueKeys(
-      uniqueKeys.filter((_, pos) => {
-        return pos !== index;
-      })
-    );
+  const { items: items2, setItems } = useRepeaterContext();
+  const keys = items2.map(({ key }) => key);
+  if (!itemTemplate) {
+    return null;
+  }
+  const onChangeOrder = (newKeys) => {
     setItems(
-      items2.filter((_, pos) => {
-        return pos !== index;
+      newKeys.map((key) => {
+        const index = items2.findIndex((item) => item.key === key);
+        return items2[index];
       })
     );
   };
-  const toggleDisableRepeaterItem = (index) => {
-    setItems(
-      items2.map((value, pos) => {
-        if (pos === index) {
-          const { disabled: propDisabled, ...rest } = value;
-          return { ...rest, ...propDisabled ? {} : { disabled: true } };
-        }
-        return value;
-      })
-    );
+  return /* @__PURE__ */ React30.createElement(React30.Fragment, null, /* @__PURE__ */ React30.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
+    const value = items2[index].item;
+    return /* @__PURE__ */ React30.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React30.isValidElement(itemTemplate) ? React30.cloneElement(itemTemplate, {
+      key,
+      value,
+      index,
+      children
+    }) : null);
+  })));
+};
+
+// src/components/unstable-repeater/items/item.tsx
+import * as React34 from "react";
+import { bindTrigger as bindTrigger2, UnstableTag } from "@elementor/ui";
+import { __ as __9 } from "@wordpress/i18n";
+
+// src/components/unstable-repeater/actions/disable-item-action.tsx
+import * as React31 from "react";
+import { EyeIcon, EyeOffIcon } from "@elementor/icons";
+import { IconButton as IconButton2, Tooltip } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
+var SIZE3 = "tiny";
+var DisableItemAction = ({ index = -1 }) => {
+  const { items: items2, updateItem } = useRepeaterContext();
+  if (index === -1) {
+    return null;
+  }
+  const propDisabled = items2[index].item.disabled ?? false;
+  const toggleLabel = propDisabled ? __6("Show", "elementor") : __6("Hide", "elementor");
+  const onClick = () => {
+    const self = structuredClone(items2[index].item);
+    self.disabled = !self.disabled;
+    if (!self.disabled) {
+      delete self.disabled;
+    }
+    updateItem(self, index);
   };
-  const onChangeOrder = (reorderedKeys) => {
-    setUniqueKeys(reorderedKeys);
-    setItems((prevItems) => {
-      return reorderedKeys.map((keyValue) => {
-        const index = uniqueKeys.indexOf(keyValue);
-        return prevItems[index];
-      });
-    });
+  return /* @__PURE__ */ React31.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React31.createElement(IconButton2, { size: SIZE3, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React31.createElement(EyeOffIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React31.createElement(EyeIcon, { fontSize: SIZE3 })));
+};
+
+// src/components/unstable-repeater/actions/duplicate-item-action.tsx
+import * as React32 from "react";
+import { CopyIcon } from "@elementor/icons";
+import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
+var SIZE4 = "tiny";
+var DuplicateItemAction = ({ index = -1 }) => {
+  const { items: items2, addItem } = useRepeaterContext();
+  if (index === -1) {
+    return null;
+  }
+  const duplicateLabel = __7("Duplicate", "elementor");
+  const onClick = (ev) => {
+    const newItem = structuredClone(items2[index]?.item);
+    addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React27.createElement(SectionContent, null, /* @__PURE__ */ React27.createElement(
-    Stack5,
-    {
-      direction: "row",
-      justifyContent: "start",
-      alignItems: "center",
-      gap: 1,
-      sx: { marginInlineEnd: -0.75 }
-    },
-    /* @__PURE__ */ React27.createElement(Typography2, { component: "label", variant: "caption", color: "text.secondary" }, label),
-    /* @__PURE__ */ React27.createElement(ControlAdornments, null),
-    /* @__PURE__ */ React27.createElement(
-      IconButton,
-      {
-        size: SIZE2,
-        sx: { ml: "auto" },
-        disabled,
-        onClick: addRepeaterItem,
-        "aria-label": __5("Add item", "elementor")
-      },
-      /* @__PURE__ */ React27.createElement(PlusIcon, { fontSize: SIZE2 })
-    )
-  ), 0 < uniqueKeys.length && /* @__PURE__ */ React27.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key, index) => {
-    const value = items2[index];
-    if (!value) {
-      return null;
-    }
-    return /* @__PURE__ */ React27.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React27.createElement(
-      RepeaterItem,
-      {
-        disabled,
-        propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React27.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React27.createElement(itemSettings.Label, { value })),
-        startIcon: /* @__PURE__ */ React27.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React27.createElement(itemSettings.Icon, { value })),
-        removeItem: () => removeRepeaterItem(index),
-        duplicateItem: () => duplicateRepeaterItem(index),
-        toggleDisableItem: () => toggleDisableRepeaterItem(index),
-        openOnMount: openOnAdd && openItem === key,
-        onOpen: () => setOpenItem(EMPTY_OPEN_ITEM),
-        showDuplicate,
-        showToggle,
-        collectionPropUtil
-      },
-      (props) => /* @__PURE__ */ React27.createElement(itemSettings.Content, { ...props, value, bind: String(index) })
-    ));
-  })));
+  return /* @__PURE__ */ React32.createElement(Tooltip2, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React32.createElement(IconButton3, { size: SIZE4, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React32.createElement(CopyIcon, { fontSize: SIZE4 })));
 };
-var RepeaterItem = ({
-  label,
-  propDisabled,
-  startIcon,
-  children,
-  removeItem,
-  duplicateItem,
-  toggleDisableItem,
-  openOnMount,
-  onOpen,
-  showDuplicate,
-  showToggle,
-  disabled,
-  collectionPropUtil
+
+// src/components/unstable-repeater/actions/remove-item-action.tsx
+import * as React33 from "react";
+import { XIcon } from "@elementor/icons";
+import { IconButton as IconButton4, Tooltip as Tooltip3 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
+var SIZE5 = "tiny";
+var RemoveItemAction = ({ index = -1 }) => {
+  const { removeItem } = useRepeaterContext();
+  if (index === -1) {
+    return null;
+  }
+  const removeLabel = __8("Remove", "elementor");
+  const onClick = () => removeItem(index);
+  return /* @__PURE__ */ React33.createElement(Tooltip3, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React33.createElement(IconButton4, { size: SIZE5, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React33.createElement(XIcon, { fontSize: SIZE5 })));
+};
+
+// src/components/unstable-repeater/items/item.tsx
+var Item = ({
+  Label: Label3,
+  Icon,
+  value,
+  index = -1,
+  children
 }) => {
-  const [anchorEl, setAnchorEl] = useState6(null);
-  const { popoverState, popoverProps, ref, setRef } = usePopover(openOnMount, onOpen);
-  const duplicateLabel = __5("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __5("Show", "elementor") : __5("Hide", "elementor");
-  const removeLabel = __5("Remove", "elementor");
-  return /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(
+  const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
+  const triggerProps = bindTrigger2(popoverState);
+  const key = items2[index].key ?? -1;
+  const onClick = (ev) => {
+    triggerProps.onClick(ev);
+    setOpenItemIndex(index);
+  };
+  const setRef = (ref) => {
+    if (!ref || openItemIndex !== index || ref === popoverState.anchorEl) {
+      return;
+    }
+    setRowRef(ref);
+    popoverState.setAnchorEl(ref);
+  };
+  return /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(
     UnstableTag,
     {
-      disabled,
-      label,
+      key,
+      disabled: false,
+      label: /* @__PURE__ */ React34.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React34.createElement(Label3, { value })),
       showActionsOnHover: true,
       fullWidth: true,
       ref: setRef,
       variant: "outlined",
-      "aria-label": __5("Open item", "elementor"),
-      ...bindTrigger2(popoverState),
-      startIcon,
-      actions: /* @__PURE__ */ React27.createElement(React27.Fragment, null, showDuplicate && /* @__PURE__ */ React27.createElement(Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(IconButton, { size: SIZE2, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React27.createElement(CopyIcon, { fontSize: SIZE2 }))), showToggle && /* @__PURE__ */ React27.createElement(Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(IconButton, { size: SIZE2, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React27.createElement(EyeOffIcon, { fontSize: SIZE2 }) : /* @__PURE__ */ React27.createElement(EyeIcon, { fontSize: SIZE2 }))), /* @__PURE__ */ React27.createElement(Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React27.createElement(IconButton, { size: SIZE2, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React27.createElement(XIcon, { fontSize: SIZE2 }))))
+      "aria-label": __9("Open item", "elementor"),
+      sx: { minHeight: (theme) => theme.spacing(4) },
+      ...triggerProps,
+      onClick,
+      startIcon: /* @__PURE__ */ React34.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React34.createElement(Icon, { value })),
+      actions: /* @__PURE__ */ React34.createElement(React34.Fragment, null, /* @__PURE__ */ React34.createElement(RepeaterItemActionsSlot, { index: index ?? -1 }), /* @__PURE__ */ React34.createElement(
+        SlotChildren,
+        {
+          whitelist: [DuplicateItemAction, DisableItemAction, RemoveItemAction],
+          props: { index },
+          sorted: true
+        },
+        children
+      ))
     }
-  ), /* @__PURE__ */ React27.createElement(
+  ));
+};
+
+// src/components/unstable-repeater/unstable-repeater.tsx
+import * as React36 from "react";
+
+// src/components/unstable-repeater/items/edit-item-popover.tsx
+import * as React35 from "react";
+import { bindPopover as bindPopover2, Box as Box4, Popover as Popover2 } from "@elementor/ui";
+var EditItemPopover = ({ children }) => {
+  const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
+  if (!isOpen || !rowRef) {
+    return null;
+  }
+  const bind = items2[openItemIndex].item.$$type;
+  const onClose = () => {
+    setRowRef(null);
+    popoverState.setAnchorEl(null);
+    setOpenItemIndex(EMPTY_OPEN_ITEM);
+  };
+  return /* @__PURE__ */ React35.createElement(
     Popover2,
     {
       disablePortal: true,
       slotProps: {
         paper: {
-          ref: setAnchorEl,
-          sx: { mt: 0.5, width: ref?.getBoundingClientRect().width }
+          sx: { mt: 0.5, width: rowRef.offsetWidth }
         }
       },
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...popoverProps,
-      anchorEl: ref
+      ...bindPopover2(popoverState),
+      onClose
     },
-    /* @__PURE__ */ React27.createElement(Box2, null, children({ anchorEl, collectionPropUtil }))
-  ));
+    /* @__PURE__ */ React35.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React35.createElement(Box4, null, React35.isValidElement(children) && React35.cloneElement(children, { bind, index: openItemIndex })))
+  );
 };
-var usePopover = (openOnMount, onOpen) => {
-  const [ref, setRef] = useState6(null);
-  const popoverState = usePopupState3({ variant: "popover" });
-  const popoverProps = bindPopover2(popoverState);
-  useEffect4(() => {
-    if (openOnMount && ref) {
-      popoverState.open(ref);
-      onOpen?.();
-    }
-  }, [ref]);
-  return {
-    popoverState,
-    ref,
-    setRef,
-    popoverProps
-  };
+
+// src/components/unstable-repeater/unstable-repeater.tsx
+var UnstableRepeater = ({
+  children,
+  initial,
+  propTypeUtil
+}) => {
+  return /* @__PURE__ */ React36.createElement(SectionContent, null, /* @__PURE__ */ React36.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React36.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
 };
 
 // src/controls/box-shadow-repeater-control.tsx
 var BoxShadowRepeaterControl = createControl(() => {
   const { propType, value, setValue, disabled } = useBoundProp(boxShadowPropTypeUtil);
-  return /* @__PURE__ */ React28.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React28.createElement(
-    Repeater,
-    {
-      openOnAdd: true,
-      disabled,
-      values: value ?? [],
-      setValues: setValue,
-      label: __6("Box shadow", "elementor"),
-      itemSettings: {
-        Icon: ItemIcon,
-        Label: ItemLabel,
-        Content: ItemContent,
-        initialValues: initialShadow
-      }
-    }
-  ));
+  return /* @__PURE__ */ React37.createElement(PropProvider, { propType, value, setValue, isDisabled: () => disabled }, /* @__PURE__ */ React37.createElement(UnstableRepeater, { initial: initialShadow, propTypeUtil: boxShadowPropTypeUtil }, /* @__PURE__ */ React37.createElement(Header, { label: __10("Box shadow", "elementor") }, /* @__PURE__ */ React37.createElement(TooltipAddItemAction, { newItemIndex: 0, disabled })), /* @__PURE__ */ React37.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React37.createElement(Item, { Icon: ItemIcon, Label: ItemLabel }) }, /* @__PURE__ */ React37.createElement(DuplicateItemAction, null), /* @__PURE__ */ React37.createElement(DisableItemAction, null), /* @__PURE__ */ React37.createElement(RemoveItemAction, null)), /* @__PURE__ */ React37.createElement(EditItemPopover, null, /* @__PURE__ */ React37.createElement(Content, null))));
 });
-var ItemIcon = ({ value }) => /* @__PURE__ */ React28.createElement(UnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
-var ItemContent = ({ anchorEl, bind }) => {
-  return /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(Content, { anchorEl }));
-};
-var Content = ({ anchorEl }) => {
+var StyledUnstableColorIndicator = styled4(UnstableColorIndicator)(({ theme }) => ({
+  height: "1rem",
+  width: "1rem",
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+var ItemIcon = ({ value }) => /* @__PURE__ */ React37.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.color?.value });
+var Content = () => {
   const context = useBoundProp(shadowPropTypeUtil);
   const rowRef = [useRef4(null), useRef4(null)];
-  return /* @__PURE__ */ React28.createElement(PropProvider, { ...context }, /* @__PURE__ */ React28.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React28.createElement(PopoverGridContainer, null, /* @__PURE__ */ React28.createElement(Control2, { bind: "color", label: __6("Color", "elementor") }, /* @__PURE__ */ React28.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React28.createElement(Control2, { bind: "position", label: __6("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React28.createElement(
+  const { rowRef: anchorEl } = useRepeaterContext();
+  return /* @__PURE__ */ React37.createElement(PropProvider, { ...context }, /* @__PURE__ */ React37.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, null, /* @__PURE__ */ React37.createElement(Control2, { bind: "color", label: __10("Color", "elementor") }, /* @__PURE__ */ React37.createElement(ColorControl, { anchorEl })), /* @__PURE__ */ React37.createElement(Control2, { bind: "position", label: __10("Position", "elementor"), sx: { overflow: "hidden" } }, /* @__PURE__ */ React37.createElement(
     SelectControl,
     {
       options: [
-        { label: __6("Inset", "elementor"), value: "inset" },
-        { label: __6("Outset", "elementor"), value: null }
+        { label: __10("Inset", "elementor"), value: "inset" },
+        { label: __10("Outset", "elementor"), value: null }
       ]
     }
-  ))), /* @__PURE__ */ React28.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React28.createElement(Control2, { bind: "hOffset", label: __6("Horizontal", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React28.createElement(Control2, { bind: "vOffset", label: __6("Vertical", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React28.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React28.createElement(Control2, { bind: "blur", label: __6("Blur", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React28.createElement(Control2, { bind: "spread", label: __6("Spread", "elementor") }, /* @__PURE__ */ React28.createElement(SizeControl, { anchorRef: rowRef[1] })))));
+  ))), /* @__PURE__ */ React37.createElement(PopoverGridContainer, { ref: rowRef[0] }, /* @__PURE__ */ React37.createElement(Control2, { bind: "hOffset", label: __10("Horizontal", "elementor") }, /* @__PURE__ */ React37.createElement(SizeControl, { anchorRef: rowRef[0] })), /* @__PURE__ */ React37.createElement(Control2, { bind: "vOffset", label: __10("Vertical", "elementor") }, /* @__PURE__ */ React37.createElement(SizeControl, { anchorRef: rowRef[0] }))), /* @__PURE__ */ React37.createElement(PopoverGridContainer, { ref: rowRef[1] }, /* @__PURE__ */ React37.createElement(Control2, { bind: "blur", label: __10("Blur", "elementor") }, /* @__PURE__ */ React37.createElement(SizeControl, { anchorRef: rowRef[1] })), /* @__PURE__ */ React37.createElement(Control2, { bind: "spread", label: __10("Spread", "elementor") }, /* @__PURE__ */ React37.createElement(SizeControl, { anchorRef: rowRef[1] })))));
 };
 var Control2 = ({
   label,
   bind,
   children,
   sx
-}) => /* @__PURE__ */ React28.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React28.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React28.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React28.createElement(Grid4, { item: true, xs: 12 }, children))));
+}) => /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React37.createElement(Grid4, { item: true, xs: 6, sx }, /* @__PURE__ */ React37.createElement(Grid4, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid4, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(FormLabel2, { size: "tiny" }, label)), /* @__PURE__ */ React37.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 || {};
@@ -1549,7 +1641,7 @@ var ItemLabel = ({ value }) => {
     blurSize + blurUnit,
     spreadSize + spreadUnit
   ].join(" ");
-  return /* @__PURE__ */ React28.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
+  return /* @__PURE__ */ React37.createElement("span", { style: { textTransform: "capitalize" } }, positionLabel, ": ", sizes);
 };
 var initialShadow = {
   $$type: "shadow",
@@ -1578,285 +1670,343 @@ var initialShadow = {
   }
 };
 
-// src/controls/filter-repeater-control.tsx
-import * as React31 from "react";
-import { useRef as useRef6 } from "react";
+// src/controls/filter-control/filter-repeater-control.tsx
+import * as React46 from "react";
 import {
-  cssFilterFunctionPropUtil,
+  backdropFilterPropTypeUtil,
   filterPropTypeUtil
 } from "@elementor/editor-props";
-import { backdropFilterPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box4, Grid as Grid6, styled as styled4, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 
-// src/controls/filter-control/drop-shadow-item-content.tsx
-import * as React29 from "react";
+// src/controls/filter-control/context/filter-config-context.tsx
+import * as React38 from "react";
+import { createContext as createContext8, useContext as useContext8, useMemo as useMemo2 } from "react";
+import { cssFilterFunctionPropUtil } from "@elementor/editor-props";
+
+// src/controls/filter-control/utils.ts
+import { __ as __12 } from "@wordpress/i18n";
+
+// src/controls/filter-control/configs.ts
+import { __ as __11 } from "@wordpress/i18n";
+var FILTERS_BY_GROUP = {
+  blur: {
+    blur: {
+      name: __11("Blur", "elementor"),
+      valueName: __11("Radius", "elementor")
+    }
+  },
+  intensity: {
+    brightness: { name: __11("Brightness", "elementor") },
+    contrast: { name: __11("Contrast", "elementor") },
+    saturate: { name: __11("Saturate", "elementor") }
+  },
+  "hue-rotate": {
+    "hue-rotate": {
+      name: __11("Hue Rotate", "elementor"),
+      valueName: __11("Angle", "elementor")
+    }
+  },
+  "color-tone": {
+    grayscale: { name: __11("Grayscale", "elementor") },
+    invert: { name: __11("Invert", "elementor") },
+    sepia: { name: __11("Sepia", "elementor") }
+  },
+  "drop-shadow": {
+    "drop-shadow": { name: __11("Drop shadow", "elementor"), valueName: __11("Drop-shadow", "elementor") }
+  }
+};
+
+// src/controls/filter-control/utils.ts
+var AMOUNT_VALUE_NAME = __12("Amount", "elementor");
+var DEFAULT_FACTORIES = {
+  "drop-shadow": (propType) => buildDropShadowDefault(propType)
+};
+function buildFilterConfig(cssFilterPropType) {
+  function createEntry(filterFunctionGroup, filterFunction, { name, valueName }) {
+    const propType = extractPropType(cssFilterPropType, filterFunctionGroup);
+    const value = DEFAULT_FACTORIES[filterFunction]?.(propType) ?? buildSizeDefault(propType);
+    const defaultValue = createDefaultValue({
+      filterFunction,
+      filterFunctionGroup,
+      value
+    });
+    return [
+      filterFunction,
+      {
+        name,
+        valueName: valueName ?? AMOUNT_VALUE_NAME,
+        defaultValue,
+        filterFunctionGroup
+      }
+    ];
+  }
+  const entries = Object.entries(FILTERS_BY_GROUP).flatMap(
+    ([filterFunctionGroup, group]) => Object.entries(group).map(
+      ([filterFunction, meta]) => createEntry(filterFunctionGroup, filterFunction, meta)
+    )
+  );
+  return Object.fromEntries(entries);
+}
+function createDefaultValue({ filterFunction, filterFunctionGroup, value }) {
+  return {
+    $$type: "css-filter-func",
+    value: {
+      func: { $$type: "string", value: filterFunction },
+      args: {
+        $$type: filterFunctionGroup,
+        value
+      }
+    }
+  };
+}
+function buildSizeDefault(propType) {
+  const sizePropType = propType?.shape?.size;
+  return {
+    size: sizePropType?.default
+  };
+}
+function buildDropShadowDefault(propType) {
+  const dropShadowPropType = propType.shape;
+  return {
+    blur: dropShadowPropType?.blur?.default,
+    xAxis: dropShadowPropType?.xAxis?.default,
+    yAxis: dropShadowPropType?.yAxis?.default,
+    color: dropShadowPropType?.color?.default ?? (dropShadowPropType?.color).prop_types.color.default
+  };
+}
+function extractPropType(propType, filterFunctionGroup) {
+  return propType.shape?.args?.prop_types[filterFunctionGroup];
+}
+
+// src/controls/filter-control/context/filter-config-context.tsx
+var FilterConfigContext = createContext8(null);
+function FilterConfigProvider({ children }) {
+  const propContext = useBoundProp(cssFilterFunctionPropUtil);
+  const contextValue = useMemo2(() => {
+    const config = buildFilterConfig(propContext.propType.item_prop_type);
+    const filterOptions = Object.entries(config).map(([key, conf]) => ({
+      value: key,
+      label: conf.name
+    }));
+    return {
+      config,
+      filterOptions,
+      getFilterFunctionConfig: (filterFunction) => config[filterFunction],
+      getInitialValue: () => config.blur.defaultValue
+    };
+  }, [propContext.propType]);
+  return /* @__PURE__ */ React38.createElement(FilterConfigContext.Provider, { value: contextValue }, children);
+}
+function useFilterConfig() {
+  const context = useContext8(FilterConfigContext);
+  if (!context) {
+    throw new Error("useFilterConfig must be used within FilterConfigProvider");
+  }
+  return context;
+}
+
+// src/controls/filter-control/filter-content.tsx
+import * as React41 from "react";
+import {
+  cssFilterFunctionPropUtil as cssFilterFunctionPropUtil2
+} from "@elementor/editor-props";
+import { Grid as Grid7 } from "@elementor/ui";
+import { __ as __14 } from "@wordpress/i18n";
+
+// src/controls/filter-control/drop-shadow/drop-shadow-item-content.tsx
+import * as React39 from "react";
 import { useRef as useRef5 } from "react";
 import { dropShadowFilterPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid5 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 var items = [
   {
     bind: "xAxis",
-    label: __7("X-axis", "elementor"),
+    label: __13("X-axis", "elementor"),
     rowIndex: 0
   },
   {
     bind: "yAxis",
-    label: __7("Y-axis", "elementor"),
+    label: __13("Y-axis", "elementor"),
     rowIndex: 0
   },
   {
     bind: "blur",
-    label: __7("Blur", "elementor"),
+    label: __13("Blur", "elementor"),
     rowIndex: 1
   },
   {
     bind: "color",
-    label: __7("Color", "elementor"),
+    label: __13("Color", "elementor"),
     rowIndex: 1
   }
 ];
-var DropShadowItemContent = ({
-  units: units2,
-  anchorEl
-}) => {
+var DropShadowItemContent = ({ anchorEl }) => {
   const context = useBoundProp(dropShadowFilterPropTypeUtil);
   const rowRefs = [useRef5(null), useRef5(null)];
-  return /* @__PURE__ */ React29.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React29.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React29.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React29.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React29.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React29.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React29.createElement(SizeControl, { anchorRef: rowRefs[item.rowIndex], units: units2, defaultUnit: "px" }))))));
+  return /* @__PURE__ */ React39.createElement(PropProvider, { ...context }, items.map((item) => /* @__PURE__ */ React39.createElement(PopoverGridContainer, { key: item.bind, ref: rowRefs[item.rowIndex] ?? null }, /* @__PURE__ */ React39.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React39.createElement(Grid5, { item: true, xs: 6 }, /* @__PURE__ */ React39.createElement(ControlFormLabel, null, item.label)), /* @__PURE__ */ React39.createElement(Grid5, { item: true, xs: 6 }, item.bind === "color" ? /* @__PURE__ */ React39.createElement(ColorControl, { anchorEl }) : /* @__PURE__ */ React39.createElement(
+    SizeControl,
+    {
+      anchorRef: rowRefs[item.rowIndex],
+      enablePropTypeUnits: true,
+      defaultUnit: "px"
+    }
+  ))))));
 };
 
-// src/controls/filter-control/drop-shadow-item-label.tsx
-import * as React30 from "react";
-import { Box as Box3 } from "@elementor/ui";
+// src/controls/filter-control/single-size/single-size-item-content.tsx
+import { useRef as useRef6 } from "react";
+import * as React40 from "react";
+import {
+  blurFilterPropTypeUtil,
+  colorToneFilterPropTypeUtil,
+  hueRotateFilterPropTypeUtil,
+  intensityFilterPropTypeUtil
+} from "@elementor/editor-props";
+import { Grid as Grid6 } from "@elementor/ui";
+var propTypeMap = {
+  blur: blurFilterPropTypeUtil,
+  intensity: intensityFilterPropTypeUtil,
+  "hue-rotate": hueRotateFilterPropTypeUtil,
+  "color-tone": colorToneFilterPropTypeUtil
+};
+var SingleSizeItemContent = ({ filterFunc }) => {
+  const rowRef = useRef6(null);
+  const { getFilterFunctionConfig } = useFilterConfig();
+  const { valueName, filterFunctionGroup } = getFilterFunctionConfig(filterFunc);
+  const context = useBoundProp(propTypeMap[filterFunctionGroup]);
+  return /* @__PURE__ */ React40.createElement(PropProvider, { ...context }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: filterFunctionGroup }, /* @__PURE__ */ React40.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React40.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React40.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React40.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React40.createElement(SizeControl, { anchorRef: rowRef, enablePropTypeUnits: true }))))));
+};
+
+// src/controls/filter-control/filter-content.tsx
+var FilterContent = () => {
+  const propContext = useBoundProp(cssFilterFunctionPropUtil2);
+  const { filterOptions, getFilterFunctionConfig } = useFilterConfig();
+  const handleValueChange = (value, _, meta) => {
+    let newValue = structuredClone(value);
+    const funcConfig = getFilterFunctionConfig(newValue?.func.value);
+    if (meta?.bind === "func") {
+      newValue = funcConfig.defaultValue.value;
+    }
+    if (!newValue.args) {
+      return;
+    }
+    propContext.setValue(newValue);
+  };
+  return /* @__PURE__ */ React41.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "css-filter-func" }, /* @__PURE__ */ React41.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React41.createElement(PopoverGridContainer, null, /* @__PURE__ */ React41.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(ControlFormLabel, null, __14("Filter", "elementor"))), /* @__PURE__ */ React41.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React41.createElement(SelectControl, { options: filterOptions })))), /* @__PURE__ */ React41.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React41.createElement(FilterValueContent, null)))));
+};
+var FilterValueContent = () => {
+  const { openItemIndex, items: items2 } = useRepeaterContext();
+  const currentItem = items2[openItemIndex];
+  const filterFunc = currentItem.item.value.func.value;
+  const isDropShadow = filterFunc === "drop-shadow";
+  if (isDropShadow) {
+    return /* @__PURE__ */ React41.createElement(DropShadowItemContent, null);
+  }
+  return /* @__PURE__ */ React41.createElement(SingleSizeItemContent, { filterFunc });
+};
+
+// src/controls/filter-control/filter-icon.tsx
+import * as React42 from "react";
+import { styled as styled5, UnstableColorIndicator as UnstableColorIndicator2 } from "@elementor/ui";
+var FilterIcon = ({ value }) => {
+  if (value.value.func.value !== "drop-shadow") {
+    return null;
+  }
+  return /* @__PURE__ */ React42.createElement(
+    StyledUnstableColorIndicator2,
+    {
+      size: "inherit",
+      component: "span",
+      value: value.value.args.value?.color.value
+    }
+  );
+};
+var StyledUnstableColorIndicator2 = styled5(UnstableColorIndicator2)(({ theme }) => ({
+  borderRadius: `${theme.shape.borderRadius / 2}px`
+}));
+
+// src/controls/filter-control/filter-label.tsx
+import * as React45 from "react";
+
+// src/controls/filter-control/drop-shadow/drop-shadow-item-label.tsx
+import * as React43 from "react";
+import { Box as Box5 } from "@elementor/ui";
 var DropShadowItemLabel = ({ value }) => {
   const { xAxis, yAxis, blur } = value.value.args.value;
   const xValue = `${xAxis?.value?.size ?? 0}${xAxis?.value?.unit ?? "px"}`;
   const yValue = `${yAxis?.value?.size ?? 0}${yAxis?.value?.unit ?? "px"}`;
   const blurValue = `${blur?.value?.size ?? 10}${blur?.value?.unit ?? "px"}`;
-  return /* @__PURE__ */ React30.createElement(Box3, { component: "span" }, /* @__PURE__ */ React30.createElement(Box3, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), `${xValue} ${yValue} ${blurValue}`);
+  return /* @__PURE__ */ React43.createElement(Box5, { component: "span" }, /* @__PURE__ */ React43.createElement(Box5, { component: "span", style: { textTransform: "capitalize" } }, "Drop shadow:"), `${xValue} ${yValue} ${blurValue}`);
 };
 
-// src/controls/filter-repeater-control.tsx
-var DEFAULT_FILTER = "blur";
-var filterConfig = {
-  blur: {
-    defaultValue: {
-      $$type: "css-filter-func",
-      value: {
-        func: { $$type: "string", value: "blur" },
-        args: { $$type: "size", value: { size: 0, unit: "px" } }
-      }
-    },
-    name: __8("Blur", "elementor"),
-    valueName: __8("Radius", "elementor"),
-    units: lengthUnits.filter((unit) => unit !== "%")
-  },
-  brightness: {
-    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: "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: "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: "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: "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: "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: "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 !== "%")
+// src/controls/filter-control/single-size/single-size-item-label.tsx
+import * as React44 from "react";
+import { Box as Box6 } from "@elementor/ui";
+var SingleSizeItemLabel = ({ value }) => {
+  const { func, args } = value.value;
+  const { getFilterFunctionConfig } = useFilterConfig();
+  const { defaultValue } = getFilterFunctionConfig(func.value ?? "");
+  const defaultUnit = defaultValue.value.args.value?.size?.value?.unit ?? lengthUnits[0];
+  const { unit, size } = args.value.size?.value ?? { unit: defaultUnit, size: 0 };
+  const label = /* @__PURE__ */ React44.createElement(Box6, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
+  return /* @__PURE__ */ React44.createElement(Box6, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
+};
+
+// src/controls/filter-control/filter-label.tsx
+var FilterLabel = ({ value }) => {
+  if (value.value.func.value === "drop-shadow") {
+    return /* @__PURE__ */ React45.createElement(DropShadowItemLabel, { value });
   }
+  return /* @__PURE__ */ React45.createElement(SingleSizeItemLabel, { value });
 };
-var filterKeys = Object.keys(filterConfig);
-var isSingleSize = (key) => {
-  return !["drop-shadow"].includes(key);
+
+// src/controls/filter-control/filter-repeater-control.tsx
+var FILTER_CONFIG = {
+  filter: {
+    propTypeUtil: filterPropTypeUtil,
+    label: __15("Filters", "elementor")
+  },
+  "backdrop-filter": {
+    propTypeUtil: backdropFilterPropTypeUtil,
+    label: __15("Backdrop Filters", "elementor")
+  }
 };
 var FilterRepeaterControl = createControl(({ filterPropName = "filter" }) => {
-  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__ */ React31.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React31.createElement(
+  const { propTypeUtil, label } = ensureFilterConfig(filterPropName);
+  const { propType, value: filterValues, setValue } = useBoundProp(propTypeUtil);
+  return /* @__PURE__ */ React46.createElement(FilterConfigProvider, null, /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: filterValues, setValue }, /* @__PURE__ */ React46.createElement(
     Repeater,
     {
-      openOnAdd: true,
-      disabled,
-      values: filterValues ?? [],
-      setValues: setValue,
-      label,
-      collectionPropUtil: propUtil,
-      itemSettings: {
-        Icon: ItemIcon2,
-        Label: ItemLabel2,
-        Content: ItemContent2,
-        initialValues: filterConfig[DEFAULT_FILTER].defaultValue
-      }
+      propTypeUtil,
+      label
     }
-  ));
+  )));
 });
-var StyledUnstableColorIndicator = styled4(UnstableColorIndicator2)(({ theme }) => ({
-  borderRadius: `${theme.shape.borderRadius / 2}px`
-}));
-var ItemIcon2 = ({ value }) => {
-  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React31.createElement(React31.Fragment, null) : /* @__PURE__ */ React31.createElement(StyledUnstableColorIndicator, { size: "inherit", component: "span", value: value.value.args.value.color.value });
-};
-var ItemLabel2 = ({ value }) => {
-  return isSingleSize(value.value.func.value ?? "") ? /* @__PURE__ */ React31.createElement(SingleSizeItemLabel, { value }) : /* @__PURE__ */ React31.createElement(DropShadowItemLabel, { value });
-};
-var SingleSizeItemLabel = ({ value }) => {
-  const { func, args } = value.value;
-  const defaultUnit = filterConfig[func.value ?? ""].defaultValue.value.args.value.unit ?? lengthUnits[0];
-  const { unit, size } = args.value ?? { unit: defaultUnit, size: 0 };
-  const label = /* @__PURE__ */ React31.createElement(Box4, { component: "span", style: { textTransform: "capitalize" } }, func.value ?? "", ":");
-  return /* @__PURE__ */ React31.createElement(Box4, { component: "span" }, label, unit !== "custom" ? ` ${size ?? 0}${unit ?? defaultUnit}` : size);
-};
-var ItemContent2 = ({
-  bind,
-  collectionPropUtil,
-  anchorEl
-}) => {
-  const { value: filterValues = [] } = useBoundProp(collectionPropUtil ?? filterPropTypeUtil);
-  const itemIndex = parseInt(bind, 10);
-  const item = filterValues?.[itemIndex];
-  return item ? /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React31.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__ */ React31.createElement(PropProvider, { ...propContext, setValue: handleValueChange }, /* @__PURE__ */ React31.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React31.createElement(PopoverGridContainer, null, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, __8("Filter", "elementor"))), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "func" }, /* @__PURE__ */ React31.createElement(
-    SelectControl,
-    {
-      options: filterKeys.map((filterKey) => ({
-        label: filterConfig[filterKey].name,
-        value: filterKey
-      }))
-    }
-  )))), /* @__PURE__ */ React31.createElement(PropKeyProvider, { bind: "args" }, /* @__PURE__ */ React31.createElement(Content2, { filterType: item?.value.func, anchorEl }))));
-};
-var Content2 = ({ filterType, anchorEl }) => {
-  const filterName = filterType?.value || DEFAULT_FILTER;
-  const filterItemConfig = filterConfig[filterName];
-  const { units: units2 = [] } = filterItemConfig;
-  return isSingleSize(filterName) ? /* @__PURE__ */ React31.createElement(SingleSizeItemContent, { filterType: filterName }) : /* @__PURE__ */ React31.createElement(DropShadowItemContent, { units: units2, anchorEl });
-};
-var SingleSizeItemContent = ({ filterType }) => {
-  const { valueName, defaultValue, units: units2 } = filterConfig[filterType];
-  const rowRef = useRef6(null);
-  const defaultUnit = defaultValue.value.args.value.unit;
-  return /* @__PURE__ */ React31.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(ControlFormLabel, null, valueName)), /* @__PURE__ */ React31.createElement(Grid6, { item: true, xs: 6 }, /* @__PURE__ */ React31.createElement(SizeControl, { anchorRef: rowRef, units: units2, defaultUnit })));
+var Repeater = ({ propTypeUtil, label }) => {
+  const { getInitialValue } = useFilterConfig();
+  return /* @__PURE__ */ React46.createElement(UnstableRepeater, { initial: getInitialValue(), propTypeUtil }, /* @__PURE__ */ React46.createElement(Header, { label }, /* @__PURE__ */ React46.createElement(TooltipAddItemAction, { newItemIndex: 0 })), /* @__PURE__ */ React46.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React46.createElement(Item, { Label: FilterLabel, Icon: FilterIcon }) }, /* @__PURE__ */ React46.createElement(DuplicateItemAction, null), /* @__PURE__ */ React46.createElement(DisableItemAction, null), /* @__PURE__ */ React46.createElement(RemoveItemAction, null)), /* @__PURE__ */ React46.createElement(EditItemPopover, null, /* @__PURE__ */ React46.createElement(FilterContent, null)));
 };
+function ensureFilterConfig(name) {
+  if (name && name in FILTER_CONFIG) {
+    return FILTER_CONFIG[name];
+  }
+  return FILTER_CONFIG.filter;
+}
 
 // src/controls/toggle-control.tsx
-import * as React34 from "react";
+import * as React49 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil4 } from "@elementor/editor-props";
 
 // src/components/control-toggle-button-group.tsx
-import * as React33 from "react";
-import { useEffect as useEffect5, useMemo as useMemo2, useRef as useRef7, useState as useState7 } from "react";
+import * as React48 from "react";
+import { useEffect as useEffect5, useMemo as useMemo3, useRef as useRef7, useState as useState7 } from "react";
 import { ChevronDownIcon } from "@elementor/icons";
 import {
   ListItemText,
   Menu as Menu2,
   MenuItem,
-  styled as styled5,
+  styled as styled6,
   ToggleButton,
   ToggleButtonGroup,
   Typography as Typography3,
@@ -1864,18 +2014,18 @@ import {
 } from "@elementor/ui";
 
 // src/components/conditional-tooltip.tsx
-import * as React32 from "react";
-import { Tooltip as Tooltip2 } from "@elementor/ui";
+import * as React47 from "react";
+import { Tooltip as Tooltip4 } from "@elementor/ui";
 var ConditionalTooltip = ({
   showTooltip,
   children,
   label
 }) => {
-  return showTooltip && label ? /* @__PURE__ */ React32.createElement(Tooltip2, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
+  return showTooltip && label ? /* @__PURE__ */ React47.createElement(Tooltip4, { title: label, disableFocusListener: true, placement: "top" }, children) : children;
 };
 
 // src/components/control-toggle-button-group.tsx
-var StyledToggleButtonGroup = styled5(ToggleButtonGroup)`
+var StyledToggleButtonGroup = styled6(ToggleButtonGroup)`
 	${({ justify }) => `justify-content: ${justify};`}
 	button:not( :last-of-type ) {
 		border-start-end-radius: 0;
@@ -1890,7 +2040,7 @@ var StyledToggleButtonGroup = styled5(ToggleButtonGroup)`
 		border-end-end-radius: 8px;
 	}
 `;
-var StyledToggleButton = styled5(ToggleButton, {
+var StyledToggleButton = styled6(ToggleButton, {
   shouldForwardProp: (prop) => prop !== "isPlaceholder"
 })`
 	${({ theme, isPlaceholder }) => isPlaceholder && `
@@ -1922,7 +2072,7 @@ var ControlToggleButtonGroup = ({
   const handleChange = (_, newValue) => {
     onChange(newValue);
   };
-  const getGridTemplateColumns = useMemo2(() => {
+  const getGridTemplateColumns = useMemo3(() => {
     const isOffLimits = menuItems?.length;
     const itemsCount = isOffLimits ? fixedItems.length + 1 : fixedItems.length;
     const templateColumnsSuffix = isOffLimits ? "auto" : "";
@@ -1946,7 +2096,7 @@ var ControlToggleButtonGroup = ({
     return [];
   };
   const placeholderArray = getPlaceholderArray(placeholder);
-  return /* @__PURE__ */ React33.createElement(ControlActions, null, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React48.createElement(ControlActions, null, /* @__PURE__ */ React48.createElement(
     StyledToggleButtonGroup,
     {
       justify,
@@ -1961,16 +2111,16 @@ var ControlToggleButtonGroup = ({
         width: `100%`
       }
     },
-    fixedItems.map(({ label, value: buttonValue, renderContent: Content4, showTooltip }) => {
+    fixedItems.map(({ label, value: buttonValue, renderContent: Content3, showTooltip }) => {
       const isPlaceholder = placeholderArray.length > 0 && placeholderArray.includes(buttonValue) && (shouldShowExclusivePlaceholder || shouldShowNonExclusivePlaceholder);
-      return /* @__PURE__ */ React33.createElement(
+      return /* @__PURE__ */ React48.createElement(
         ConditionalTooltip,
         {
           key: buttonValue,
           label,
           showTooltip: showTooltip || false
         },
-        /* @__PURE__ */ React33.createElement(
+        /* @__PURE__ */ React48.createElement(
           StyledToggleButton,
           {
             value: buttonValue,
@@ -1979,11 +2129,11 @@ var ControlToggleButtonGroup = ({
             fullWidth,
             isPlaceholder
           },
-          /* @__PURE__ */ React33.createElement(Content4, { size })
+          /* @__PURE__ */ React48.createElement(Content3, { size })
         )
       );
     }),
-    menuItems.length && exclusive && /* @__PURE__ */ React33.createElement(
+    menuItems.length && exclusive && /* @__PURE__ */ React48.createElement(
       SplitButtonGroup,
       {
         size,
@@ -2017,7 +2167,7 @@ var SplitButtonGroup = ({
     const shouldRemove = newValue === value;
     onChange(shouldRemove ? null : newValue);
   };
-  return /* @__PURE__ */ React33.createElement(React33.Fragment, null, /* @__PURE__ */ React33.createElement(
+  return /* @__PURE__ */ React48.createElement(React48.Fragment, null, /* @__PURE__ */ React48.createElement(
     ToggleButton,
     {
       value: previewButton.value,
@@ -2031,7 +2181,7 @@ var SplitButtonGroup = ({
       ref: menuButtonRef
     },
     previewButton.renderContent({ size })
-  ), /* @__PURE__ */ React33.createElement(
+  ), /* @__PURE__ */ React48.createElement(
     ToggleButton,
     {
       size,
@@ -2042,8 +2192,8 @@ var SplitButtonGroup = ({
       ref: menuButtonRef,
       value: "__chevron-icon-button__"
     },
-    /* @__PURE__ */ React33.createElement(ChevronDownIcon, { fontSize: size })
-  ), /* @__PURE__ */ React33.createElement(
+    /* @__PURE__ */ React48.createElement(ChevronDownIcon, { fontSize: size })
+  ), /* @__PURE__ */ React48.createElement(
     Menu2,
     {
       open: isMenuOpen,
@@ -2061,14 +2211,14 @@ var SplitButtonGroup = ({
         mt: 0.5
       }
     },
-    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React33.createElement(
+    items2.map(({ label, value: buttonValue }) => /* @__PURE__ */ React48.createElement(
       MenuItem,
       {
         key: buttonValue,
         selected: buttonValue === value,
         onClick: () => onMenuItemClick(buttonValue)
       },
-      /* @__PURE__ */ React33.createElement(ListItemText, null, /* @__PURE__ */ React33.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
+      /* @__PURE__ */ React48.createElement(ListItemText, null, /* @__PURE__ */ React48.createElement(Typography3, { sx: { fontSize: "14px" } }, label))
     ))
   ));
 };
@@ -2109,7 +2259,7 @@ var ToggleControl = createControl(
       size,
       placeholder
     };
-    return exclusive ? /* @__PURE__ */ React34.createElement(
+    return exclusive ? /* @__PURE__ */ React49.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2118,7 +2268,7 @@ var ToggleControl = createControl(
         disabled,
         exclusive: true
       }
-    ) : /* @__PURE__ */ React34.createElement(
+    ) : /* @__PURE__ */ React49.createElement(
       ControlToggleButtonGroup,
       {
         ...toggleButtonGroupProps,
@@ -2132,7 +2282,7 @@ var ToggleControl = createControl(
 );
 
 // src/controls/number-control.tsx
-import * as React35 from "react";
+import * as React50 from "react";
 import { numberPropTypeUtil } from "@elementor/editor-props";
 import { InputAdornment as InputAdornment3 } from "@elementor/ui";
 var isEmptyOrNaN = (value) => value === null || value === void 0 || value === "" || Number.isNaN(Number(value));
@@ -2163,7 +2313,7 @@ var NumberControl = createControl(
       }
       setValue(updatedValue, void 0, { validation: () => isInputValid });
     };
-    return /* @__PURE__ */ React35.createElement(ControlActions, null, /* @__PURE__ */ React35.createElement(
+    return /* @__PURE__ */ React50.createElement(ControlActions, null, /* @__PURE__ */ React50.createElement(
       NumberInput,
       {
         size: "tiny",
@@ -2176,7 +2326,7 @@ var NumberControl = createControl(
         placeholder: labelPlaceholder ?? (isEmptyOrNaN(placeholder) ? "" : String(placeholder)),
         inputProps: { step, min },
         InputProps: {
-          startAdornment: startIcon ? /* @__PURE__ */ React35.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0
+          startAdornment: startIcon ? /* @__PURE__ */ React50.createElement(InputAdornment3, { position: "start", disabled }, startIcon) : void 0
         }
       }
     ));
@@ -2184,17 +2334,17 @@ var NumberControl = createControl(
 );
 
 // src/controls/equal-unequal-sizes-control.tsx
-import * as React37 from "react";
+import * as React52 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 __9 } from "@wordpress/i18n";
+import { bindPopover as bindPopover3, bindToggle, Grid as Grid8, Popover as Popover3, Stack as Stack7, ToggleButton as ToggleButton2, Tooltip as Tooltip5, usePopupState as usePopupState4 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/components/control-label.tsx
-import * as React36 from "react";
+import * as React51 from "react";
 import { Stack as Stack6 } from "@elementor/ui";
 var ControlLabel = ({ children }) => {
-  return /* @__PURE__ */ React36.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React36.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React36.createElement(ControlAdornments, null));
+  return /* @__PURE__ */ React51.createElement(Stack6, { direction: "row", alignItems: "center", justifyItems: "start", gap: 0.25 }, /* @__PURE__ */ React51.createElement(ControlFormLabel, null, children), /* @__PURE__ */ React51.createElement(ControlAdornments, null));
 };
 
 // src/controls/equal-unequal-sizes-control.tsx
@@ -2253,13 +2403,13 @@ function EqualUnequalSizesControl({
   };
   const isShowingGeneralIndicator = !popupState.isOpen;
   const isMixed = !!multiSizeValue;
-  return /* @__PURE__ */ React37.createElement(React37.Fragment, null, /* @__PURE__ */ React37.createElement(Grid7, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React37.createElement(Grid7, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React37.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React37.createElement(ControlLabel, null, label)), /* @__PURE__ */ React37.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React37.createElement(
+  return /* @__PURE__ */ React52.createElement(React52.Fragment, null, /* @__PURE__ */ React52.createElement(Grid8, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap", ref: rowRefs[0] }, /* @__PURE__ */ React52.createElement(Grid8, { item: true, xs: 6 }, !isShowingGeneralIndicator ? /* @__PURE__ */ React52.createElement(ControlFormLabel, null, label) : /* @__PURE__ */ React52.createElement(ControlLabel, null, label)), /* @__PURE__ */ React52.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(Stack7, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React52.createElement(
     SizeControl,
     {
-      placeholder: isMixed ? __9("Mixed", "elementor") : void 0,
+      placeholder: isMixed ? __16("Mixed", "elementor") : void 0,
       anchorRef: rowRefs[0]
     }
-  ), /* @__PURE__ */ React37.createElement(Tooltip3, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React37.createElement(
+  ), /* @__PURE__ */ React52.createElement(Tooltip5, { title: tooltipLabel, placement: "top" }, /* @__PURE__ */ React52.createElement(
     ToggleButton2,
     {
       size: "tiny",
@@ -2270,7 +2420,7 @@ function EqualUnequalSizesControl({
       "aria-label": tooltipLabel
     },
     icon
-  ))))), /* @__PURE__ */ React37.createElement(
+  ))))), /* @__PURE__ */ React52.createElement(
     Popover3,
     {
       disablePortal: true,
@@ -2288,7 +2438,7 @@ function EqualUnequalSizesControl({
         paper: { sx: { mt: 0.5, width: rowRefs[0].current?.getBoundingClientRect().width } }
       }
     },
-    /* @__PURE__ */ React37.createElement(
+    /* @__PURE__ */ React52.createElement(
       PropProvider,
       {
         propType: multiSizePropType,
@@ -2296,21 +2446,21 @@ function EqualUnequalSizesControl({
         setValue: setNestedProp,
         isDisabled: () => multiSizeDisabled
       },
-      /* @__PURE__ */ React37.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React37.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React37.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React37.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
+      /* @__PURE__ */ React52.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React52.createElement(PopoverGridContainer, { ref: rowRefs[1] }, /* @__PURE__ */ React52.createElement(MultiSizeValueControl, { item: items2[0], rowRef: rowRefs[1] }), /* @__PURE__ */ React52.createElement(MultiSizeValueControl, { item: items2[1], rowRef: rowRefs[1] })), /* @__PURE__ */ React52.createElement(PopoverGridContainer, { ref: rowRefs[2] }, /* @__PURE__ */ React52.createElement(MultiSizeValueControl, { item: items2[2], rowRef: rowRefs[2] }), /* @__PURE__ */ React52.createElement(MultiSizeValueControl, { item: items2[3], rowRef: rowRefs[2] })))
     )
   ));
 }
 var MultiSizeValueControl = ({ item, rowRef }) => {
-  return /* @__PURE__ */ React37.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React37.createElement(Grid7, { item: true, xs: 6 }, /* @__PURE__ */ React37.createElement(Grid7, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React37.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React37.createElement(Grid7, { item: true, xs: 12 }, /* @__PURE__ */ React37.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React52.createElement(PropKeyProvider, { bind: item.bind }, /* @__PURE__ */ React52.createElement(Grid8, { item: true, xs: 6 }, /* @__PURE__ */ React52.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React52.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(ControlLabel, null, item.label)), /* @__PURE__ */ React52.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React52.createElement(SizeControl, { startIcon: item.icon, anchorRef: rowRef })))));
 };
 
 // src/controls/linked-dimensions-control.tsx
-import * as React38 from "react";
+import * as React53 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, Tooltip as Tooltip4 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { Grid as Grid9, Stack as Stack8, Tooltip as Tooltip6 } from "@elementor/ui";
+import { __ as __17 } from "@wordpress/i18n";
 var LinkedDimensionsControl = ({
   label,
   isSiteRtl = false,
@@ -2349,10 +2499,10 @@ var LinkedDimensionsControl = ({
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
-  const linkedLabel = __10("Link %s", "elementor").replace("%s", tooltipLabel);
-  const unlinkedLabel = __10("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const linkedLabel = __17("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __17("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || dimensionsDisabled;
-  return /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React53.createElement(
     PropProvider,
     {
       propType,
@@ -2361,7 +2511,7 @@ var LinkedDimensionsControl = ({
       placeholder: dimensionsPlaceholder,
       isDisabled: () => disabled
     },
-    /* @__PURE__ */ React38.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React38.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React38.createElement(Tooltip4, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React38.createElement(
+    /* @__PURE__ */ React53.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React53.createElement(ControlFormLabel, null, label), /* @__PURE__ */ React53.createElement(Tooltip6, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React53.createElement(
       StyledToggleButton,
       {
         "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -2373,9 +2523,9 @@ var LinkedDimensionsControl = ({
         disabled,
         isPlaceholder: hasPlaceholders
       },
-      /* @__PURE__ */ React38.createElement(LinkedIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React53.createElement(LinkedIcon, { fontSize: "tiny" })
     ))),
-    getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React38.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React38.createElement(Grid8, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React38.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(Label, { ...props })), /* @__PURE__ */ React38.createElement(Grid8, { item: true, xs: 12 }, /* @__PURE__ */ React38.createElement(
+    getCssDimensionProps(isSiteRtl).map((row, index) => /* @__PURE__ */ React53.createElement(Stack8, { direction: "row", gap: 2, flexWrap: "nowrap", key: index, ref: gridRowRefs[index] }, row.map(({ icon, ...props }) => /* @__PURE__ */ React53.createElement(Grid9, { container: true, gap: 0.75, alignItems: "center", key: props.bind }, /* @__PURE__ */ React53.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(Label, { ...props })), /* @__PURE__ */ React53.createElement(Grid9, { item: true, xs: 12 }, /* @__PURE__ */ React53.createElement(
       Control3,
       {
         bind: props.bind,
@@ -2397,7 +2547,7 @@ var Control3 = ({
   min
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React38.createElement(
+    return /* @__PURE__ */ React53.createElement(
       SizeControl,
       {
         startIcon,
@@ -2407,7 +2557,7 @@ var Control3 = ({
       }
     );
   }
-  return /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React38.createElement(
+  return /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React53.createElement(
     SizeControl,
     {
       startIcon,
@@ -2418,51 +2568,51 @@ var Control3 = ({
   ));
 };
 var Label = ({ label, bind }) => {
-  return /* @__PURE__ */ React38.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React38.createElement(ControlLabel, null, label));
+  return /* @__PURE__ */ React53.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React53.createElement(ControlLabel, null, label));
 };
 function getCssDimensionProps(isSiteRtl) {
   return [
     [
       {
         bind: "block-start",
-        label: __10("Top", "elementor"),
-        icon: /* @__PURE__ */ React38.createElement(SideTopIcon, { fontSize: "tiny" })
+        label: __17("Top", "elementor"),
+        icon: /* @__PURE__ */ React53.createElement(SideTopIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-end",
-        label: isSiteRtl ? __10("Left", "elementor") : __10("Right", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React38.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React38.createElement(SideRightIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? __17("Left", "elementor") : __17("Right", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React53.createElement(SideLeftIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React53.createElement(SideRightIcon, { fontSize: "tiny" })
       }
     ],
     [
       {
         bind: "block-end",
-        label: __10("Bottom", "elementor"),
-        icon: /* @__PURE__ */ React38.createElement(SideBottomIcon, { fontSize: "tiny" })
+        label: __17("Bottom", "elementor"),
+        icon: /* @__PURE__ */ React53.createElement(SideBottomIcon, { fontSize: "tiny" })
       },
       {
         bind: "inline-start",
-        label: isSiteRtl ? __10("Right", "elementor") : __10("Left", "elementor"),
-        icon: isSiteRtl ? /* @__PURE__ */ React38.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React38.createElement(SideLeftIcon, { fontSize: "tiny" })
+        label: isSiteRtl ? __17("Right", "elementor") : __17("Left", "elementor"),
+        icon: isSiteRtl ? /* @__PURE__ */ React53.createElement(SideRightIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React53.createElement(SideLeftIcon, { fontSize: "tiny" })
       }
     ]
   ];
 }
 
 // src/controls/font-family-control/font-family-control.tsx
-import * as React40 from "react";
+import * as React55 from "react";
 import { stringPropTypeUtil as stringPropTypeUtil5 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon2, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag as UnstableTag2, usePopupState as usePopupState5 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 
 // src/components/item-selector.tsx
-import * as React39 from "react";
+import * as React54 from "react";
 import { useCallback, useEffect as useEffect6, useState as useState8 } 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 { Box as Box7, Divider as Divider2, Link, Stack as Stack9, Typography as Typography4 } from "@elementor/ui";
 import { debounce } from "@elementor/utils";
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 
 // src/hooks/use-filtered-items-list.ts
 var useFilteredItemsList = (itemsList, searchValue) => {
@@ -2503,14 +2653,14 @@ var ItemSelector = ({
     setSearchValue("");
     onClose();
   };
-  return /* @__PURE__ */ React39.createElement(PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React39.createElement(PopoverHeader2, { title, onClose: handleClose, icon: /* @__PURE__ */ React39.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React54.createElement(PopoverBody, { width: sectionWidth }, /* @__PURE__ */ React54.createElement(PopoverHeader2, { title, onClose: handleClose, icon: /* @__PURE__ */ React54.createElement(IconComponent, { fontSize: "tiny" }) }), /* @__PURE__ */ React54.createElement(
     PopoverSearch,
     {
       value: searchValue,
       onSearch: handleSearch,
-      placeholder: __11("Search", "elementor")
+      placeholder: __18("Search", "elementor")
     }
-  ), /* @__PURE__ */ React39.createElement(Divider2, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React39.createElement(
+  ), /* @__PURE__ */ React54.createElement(Divider2, null), filteredItemsList.length > 0 ? /* @__PURE__ */ React54.createElement(
     ItemList,
     {
       itemListItems: filteredItemsList,
@@ -2520,7 +2670,7 @@ var ItemSelector = ({
       itemStyle,
       onDebounce
     }
-  ) : /* @__PURE__ */ React39.createElement(
+  ) : /* @__PURE__ */ React54.createElement(
     Stack9,
     {
       alignItems: "center",
@@ -2530,26 +2680,26 @@ var ItemSelector = ({
       gap: 1.5,
       overflow: "hidden"
     },
-    /* @__PURE__ */ React39.createElement(IconComponent, { fontSize: "large" }),
-    /* @__PURE__ */ React39.createElement(Box5, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React39.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __11("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React54.createElement(IconComponent, { fontSize: "large" }),
+    /* @__PURE__ */ React54.createElement(Box7, { sx: { maxWidth: 160, overflow: "hidden" } }, /* @__PURE__ */ React54.createElement(Typography4, { align: "center", variant: "subtitle2", color: "text.secondary" }, __18("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React54.createElement(
       Typography4,
       {
         variant: "subtitle2",
         color: "text.secondary",
         sx: { display: "flex", width: "100%", justifyContent: "center" }
       },
-      /* @__PURE__ */ React39.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React39.createElement(
-        Box5,
+      /* @__PURE__ */ React54.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React54.createElement(
+        Box7,
         {
           component: "span",
           sx: { maxWidth: "80%", overflow: "hidden", textOverflow: "ellipsis" }
         },
         searchValue
       ),
-      /* @__PURE__ */ React39.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React54.createElement("span", null, "\u201D.")
     )),
-    /* @__PURE__ */ React39.createElement(
+    /* @__PURE__ */ React54.createElement(
       Typography4,
       {
         align: "center",
@@ -2557,8 +2707,8 @@ var ItemSelector = ({
         color: "text.secondary",
         sx: { display: "flex", flexDirection: "column" }
       },
-      __11("Try something else.", "elementor"),
-      /* @__PURE__ */ React39.createElement(
+      __18("Try something else.", "elementor"),
+      /* @__PURE__ */ React54.createElement(
         Link,
         {
           color: "secondary",
@@ -2566,7 +2716,7 @@ var ItemSelector = ({
           component: "button",
           onClick: () => setSearchValue("")
         },
-        __11("Clear & try again", "elementor")
+        __18("Clear & try again", "elementor")
       )
     )
   ));
@@ -2590,7 +2740,7 @@ var ItemList = ({
     });
   }, 100);
   const memoizedItemStyle = useCallback((item) => itemStyle(item), [itemStyle]);
-  return /* @__PURE__ */ React39.createElement(
+  return /* @__PURE__ */ React54.createElement(
     PopoverMenuList,
     {
       items: itemListItems,
@@ -2620,18 +2770,18 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
   const { value: fontFamily, setValue: setFontFamily, disabled, placeholder } = useBoundProp(stringPropTypeUtil5);
   const popoverState = usePopupState5({ variant: "popover" });
   const isShowingPlaceholder = !fontFamily && placeholder;
-  const mapFontSubs = React40.useMemo(() => {
+  const mapFontSubs = React55.useMemo(() => {
     return fontFamilies.map(({ label, fonts }) => ({
       label,
       items: fonts
     }));
   }, [fontFamilies]);
-  return /* @__PURE__ */ React40.createElement(React40.Fragment, null, /* @__PURE__ */ React40.createElement(ControlActions, null, /* @__PURE__ */ React40.createElement(
+  return /* @__PURE__ */ React55.createElement(React55.Fragment, null, /* @__PURE__ */ React55.createElement(ControlActions, null, /* @__PURE__ */ React55.createElement(
     UnstableTag2,
     {
       variant: "outlined",
       label: fontFamily || placeholder,
-      endIcon: /* @__PURE__ */ React40.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React55.createElement(ChevronDownIcon2, { fontSize: "tiny" }),
       ...bindTrigger3(popoverState),
       fullWidth: true,
       disabled,
@@ -2642,7 +2792,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
         textTransform: "capitalize"
       } : void 0
     }
-  )), /* @__PURE__ */ React40.createElement(
+  )), /* @__PURE__ */ React55.createElement(
     Popover4,
     {
       disablePortal: true,
@@ -2652,7 +2802,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
       sx: { my: 1.5 },
       ...bindPopover4(popoverState)
     },
-    /* @__PURE__ */ React40.createElement(
+    /* @__PURE__ */ React55.createElement(
       ItemSelector,
       {
         itemsList: mapFontSubs,
@@ -2660,7 +2810,7 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
         onItemChange: setFontFamily,
         onClose: popoverState.close,
         sectionWidth,
-        title: __12("Font Family", "elementor"),
+        title: __19("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
         onDebounce: enqueueFont,
         icon: TextIcon
@@ -2670,13 +2820,13 @@ var FontFamilyControl = createControl(({ fontFamilies, sectionWidth }) => {
 });
 
 // src/controls/url-control.tsx
-import * as React41 from "react";
+import * as React56 from "react";
 import { urlPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField5 } from "@elementor/ui";
 var UrlControl = createControl(({ placeholder }) => {
   const { value, setValue, disabled } = useBoundProp(urlPropTypeUtil);
   const handleChange = (event) => setValue(event.target.value);
-  return /* @__PURE__ */ React41.createElement(ControlActions, null, /* @__PURE__ */ React41.createElement(
+  return /* @__PURE__ */ React56.createElement(ControlActions, null, /* @__PURE__ */ React56.createElement(
     TextField5,
     {
       size: "tiny",
@@ -2690,8 +2840,8 @@ var UrlControl = createControl(({ placeholder }) => {
 });
 
 // src/controls/link-control.tsx
-import * as React45 from "react";
-import { useMemo as useMemo4, useState as useState9 } from "react";
+import * as React60 from "react";
+import { useMemo as useMemo5, useState as useState9 } from "react";
 import { getLinkInLinkRestriction } from "@elementor/editor-elements";
 import {
   linkPropTypeUtil,
@@ -2702,22 +2852,22 @@ import {
 import { httpService as httpService2 } from "@elementor/http-client";
 import { MinusIcon, PlusIcon as PlusIcon2 } from "@elementor/icons";
 import { useSessionStorage } from "@elementor/session";
-import { Collapse, Grid as Grid9, IconButton as IconButton3, Stack as Stack10 } from "@elementor/ui";
+import { Collapse, Grid as Grid10, IconButton as IconButton6, Stack as Stack10 } from "@elementor/ui";
 import { debounce as debounce2 } from "@elementor/utils";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 
 // src/components/autocomplete.tsx
-import * as React42 from "react";
-import { forwardRef as forwardRef5 } from "react";
+import * as React57 from "react";
+import { forwardRef as forwardRef6 } from "react";
 import { XIcon as XIcon2 } from "@elementor/icons";
 import {
   Autocomplete as AutocompleteBase,
-  Box as Box6,
-  IconButton as IconButton2,
+  Box as Box8,
+  IconButton as IconButton5,
   InputAdornment as InputAdornment4,
   TextField as TextField6
 } from "@elementor/ui";
-var Autocomplete = forwardRef5((props, ref) => {
+var Autocomplete = forwardRef6((props, ref) => {
   const {
     options,
     onOptionChange,
@@ -2733,7 +2883,7 @@ var Autocomplete = forwardRef5((props, ref) => {
   const muiWarningPreventer = allowCustomValues || !!value?.toString()?.length;
   const isOptionEqualToValue = muiWarningPreventer ? void 0 : () => true;
   const isValueFromOptions = typeof value === "number" && !!findMatchingOption(options, value);
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React57.createElement(
     AutocompleteBase,
     {
       ...restProps,
@@ -2751,8 +2901,8 @@ var Autocomplete = forwardRef5((props, ref) => {
       groupBy: isCategorizedOptionPool(options) ? (optionId) => findMatchingOption(options, optionId)?.groupLabel || optionId : void 0,
       isOptionEqualToValue,
       filterOptions: () => optionKeys,
-      renderOption: (optionProps, optionId) => /* @__PURE__ */ React42.createElement(Box6, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
-      renderInput: (params) => /* @__PURE__ */ React42.createElement(
+      renderOption: (optionProps, optionId) => /* @__PURE__ */ React57.createElement(Box8, { component: "li", ...optionProps, key: optionProps.id }, findMatchingOption(options, optionId)?.label ?? optionId),
+      renderInput: (params) => /* @__PURE__ */ React57.createElement(
         TextInput,
         {
           params,
@@ -2775,7 +2925,7 @@ var TextInput = ({
   const onChange = (event) => {
     handleChange(event.target.value);
   };
-  return /* @__PURE__ */ React42.createElement(
+  return /* @__PURE__ */ React57.createElement(
     TextField6,
     {
       ...params,
@@ -2788,7 +2938,7 @@ var TextInput = ({
       },
       InputProps: {
         ...params.InputProps,
-        endAdornment: /* @__PURE__ */ React42.createElement(ClearButton, { params, allowClear, handleChange })
+        endAdornment: /* @__PURE__ */ React57.createElement(ClearButton, { params, allowClear, handleChange })
       }
     }
   );
@@ -2797,7 +2947,7 @@ var ClearButton = ({
   allowClear,
   handleChange,
   params
-}) => /* @__PURE__ */ React42.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React42.createElement(IconButton2, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React42.createElement(XIcon2, { fontSize: params.size })));
+}) => /* @__PURE__ */ React57.createElement(InputAdornment4, { position: "end" }, allowClear && /* @__PURE__ */ React57.createElement(IconButton5, { size: params.size, onClick: () => handleChange(null), sx: { cursor: "pointer" } }, /* @__PURE__ */ React57.createElement(XIcon2, { fontSize: params.size })));
 function findMatchingOption(options, optionId = null) {
   const formattedOption = (optionId || "").toString();
   return options.find(({ id }) => formattedOption === id.toString());
@@ -2819,21 +2969,21 @@ function _factoryFilter(newValue, options, minInputLength) {
 }
 
 // src/components/restricted-link-infotip.tsx
-import * as React43 from "react";
+import * as React58 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";
+import { Alert, AlertAction, AlertTitle, Box as Box9, Infotip as Infotip2, Link as Link2 } from "@elementor/ui";
+import { __ as __20 } from "@wordpress/i18n";
 var learnMoreButton = {
-  label: __13("Learn More", "elementor"),
+  label: __20("Learn More", "elementor"),
   href: "https://go.elementor.com/element-link-inside-link-infotip"
 };
 var INFOTIP_CONTENT = {
-  descendant: __13(
+  descendant: __20(
     "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")
+  ancestor: __20("To add a link to this element, first remove the link from its parent container.", "elementor")
 };
 var RestrictedLinkInfotip = ({
   linkInLinkRestriction,
@@ -2846,12 +2996,12 @@ var RestrictedLinkInfotip = ({
       selectElement(elementId);
     }
   };
-  const content = /* @__PURE__ */ React43.createElement(
+  const content = /* @__PURE__ */ React58.createElement(
     Alert,
     {
       color: "secondary",
-      icon: /* @__PURE__ */ React43.createElement(InfoCircleFilledIcon, null),
-      action: /* @__PURE__ */ React43.createElement(
+      icon: /* @__PURE__ */ React58.createElement(InfoCircleFilledIcon, null),
+      action: /* @__PURE__ */ React58.createElement(
         AlertAction,
         {
           sx: { width: "fit-content" },
@@ -2859,34 +3009,34 @@ var RestrictedLinkInfotip = ({
           color: "secondary",
           onClick: handleTakeMeClick
         },
-        __13("Take me there", "elementor")
+        __20("Take me there", "elementor")
       )
     },
-    /* @__PURE__ */ React43.createElement(AlertTitle, null, __13("Nested links", "elementor")),
-    /* @__PURE__ */ React43.createElement(Box7, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React43.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
+    /* @__PURE__ */ React58.createElement(AlertTitle, null, __20("Nested links", "elementor")),
+    /* @__PURE__ */ React58.createElement(Box9, { component: "span" }, INFOTIP_CONTENT[reason ?? "descendant"], " ", /* @__PURE__ */ React58.createElement(Link2, { href: learnMoreButton.href, target: "_blank", color: "info.main" }, learnMoreButton.label))
   );
-  return shouldRestrict && isVisible ? /* @__PURE__ */ React43.createElement(
-    Infotip,
+  return shouldRestrict && isVisible ? /* @__PURE__ */ React58.createElement(
+    Infotip2,
     {
       placement: "right",
       content,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React43.createElement(Box7, null, children)
-  ) : /* @__PURE__ */ React43.createElement(React43.Fragment, null, children);
+    /* @__PURE__ */ React58.createElement(Box9, null, children)
+  ) : /* @__PURE__ */ React58.createElement(React58.Fragment, null, children);
 };
 
 // src/controls/switch-control.tsx
-import * as React44 from "react";
+import * as React59 from "react";
 import { booleanPropTypeUtil } from "@elementor/editor-props";
-import { Box as Box8, Switch } from "@elementor/ui";
+import { Box as Box10, Switch } from "@elementor/ui";
 var SwitchControl = createControl(() => {
   const { value, setValue, disabled } = useBoundProp(booleanPropTypeUtil);
   const handleChange = (event) => {
     setValue(event.target.checked);
   };
-  return /* @__PURE__ */ React44.createElement(Box8, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React44.createElement(
+  return /* @__PURE__ */ React59.createElement(Box10, { sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React59.createElement(
     Switch,
     {
       checked: !!value,
@@ -2901,7 +3051,7 @@ var SwitchControl = createControl(() => {
 });
 
 // src/controls/link-control.tsx
-var SIZE3 = "tiny";
+var SIZE6 = "tiny";
 var LinkControl = createControl((props) => {
   const { value, path, setValue, ...propContext } = useBoundProp(linkPropTypeUtil);
   const [linkSessionValue, setLinkSessionValue] = useSessionStorage(path.join("/"));
@@ -2912,7 +3062,7 @@ var LinkControl = createControl((props) => {
     placeholder,
     minInputLength = 2,
     context: { elementId },
-    label = __14("Link", "elementor")
+    label = __21("Link", "elementor")
   } = props || {};
   const [linkInLinkRestriction, setLinkInLinkRestriction] = useState9(getLinkInLinkRestriction(elementId));
   const [options, setOptions] = useState9(
@@ -2966,7 +3116,7 @@ var LinkControl = createControl((props) => {
     }
     debounceFetch({ ...requestParams, term: newValue });
   };
-  const debounceFetch = useMemo4(
+  const debounceFetch = useMemo5(
     () => debounce2(
       (params) => fetchOptions(endpoint, params).then((newOptions) => {
         setOptions(formatOptions(newOptions));
@@ -2975,7 +3125,7 @@ var LinkControl = createControl((props) => {
     ),
     [endpoint]
   );
-  return /* @__PURE__ */ React45.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React45.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React45.createElement(
+  return /* @__PURE__ */ React60.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React60.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React60.createElement(
     Stack10,
     {
       direction: "row",
@@ -2985,17 +3135,17 @@ var LinkControl = createControl((props) => {
         marginInlineEnd: -0.75
       }
     },
-    /* @__PURE__ */ React45.createElement(ControlFormLabel, null, label),
-    /* @__PURE__ */ React45.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React45.createElement(
+    /* @__PURE__ */ React60.createElement(ControlFormLabel, null, label),
+    /* @__PURE__ */ React60.createElement(RestrictedLinkInfotip, { isVisible: !isActive, linkInLinkRestriction }, /* @__PURE__ */ React60.createElement(
       ToggleIconControl,
       {
         disabled: shouldDisableAddingLink,
         active: isActive,
         onIconClick: onEnabledChange,
-        label: __14("Toggle link", "elementor")
+        label: __21("Toggle link", "elementor")
       }
     ))
-  ), /* @__PURE__ */ React45.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React45.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React45.createElement(ControlActions, null, /* @__PURE__ */ React45.createElement(
+  ), /* @__PURE__ */ React60.createElement(Collapse, { in: isActive, timeout: "auto", unmountOnExit: true }, /* @__PURE__ */ React60.createElement(Stack10, { gap: 1.5 }, /* @__PURE__ */ React60.createElement(PropKeyProvider, { bind: "destination" }, /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
     Autocomplete,
     {
       options,
@@ -3006,10 +3156,10 @@ var LinkControl = createControl((props) => {
       onTextChange,
       minInputLength
     }
-  ))), /* @__PURE__ */ React45.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React45.createElement(Grid9, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React45.createElement(Grid9, { item: true }, /* @__PURE__ */ React45.createElement(ControlFormLabel, null, __14("Open in a new tab", "elementor"))), /* @__PURE__ */ React45.createElement(Grid9, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React45.createElement(SwitchControl, null))))))));
+  ))), /* @__PURE__ */ React60.createElement(PropKeyProvider, { bind: "isTargetBlank" }, /* @__PURE__ */ React60.createElement(Grid10, { container: true, alignItems: "center", flexWrap: "nowrap", justifyContent: "space-between" }, /* @__PURE__ */ React60.createElement(Grid10, { item: true }, /* @__PURE__ */ React60.createElement(ControlFormLabel, null, __21("Open in a new tab", "elementor"))), /* @__PURE__ */ React60.createElement(Grid10, { item: true, sx: { marginInlineEnd: -1 } }, /* @__PURE__ */ React60.createElement(SwitchControl, null))))))));
 });
 var ToggleIconControl = ({ disabled, active, onIconClick, label }) => {
-  return /* @__PURE__ */ React45.createElement(IconButton3, { size: SIZE3, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React45.createElement(MinusIcon, { fontSize: SIZE3 }) : /* @__PURE__ */ React45.createElement(PlusIcon2, { fontSize: SIZE3 }));
+  return /* @__PURE__ */ React60.createElement(IconButton6, { size: SIZE6, onClick: onIconClick, "aria-label": label, disabled }, active ? /* @__PURE__ */ React60.createElement(MinusIcon, { fontSize: SIZE6 }) : /* @__PURE__ */ React60.createElement(PlusIcon2, { fontSize: SIZE6 }));
 };
 async function fetchOptions(ajaxUrl, params) {
   if (!params || !ajaxUrl) {
@@ -3041,12 +3191,12 @@ function generateFirstLoadedOption(unionValue) {
 }
 
 // src/controls/gap-control.tsx
-import * as React46 from "react";
+import * as React61 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 ToggleButton3, Tooltip as Tooltip5 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { Grid as Grid11, Stack as Stack11, ToggleButton as ToggleButton3, Tooltip as Tooltip7 } from "@elementor/ui";
+import { __ as __22 } from "@wordpress/i18n";
 var GapControl = ({ label }) => {
   const {
     value: directionValue,
@@ -3070,10 +3220,10 @@ var GapControl = ({ label }) => {
   };
   const tooltipLabel = label.toLowerCase();
   const LinkedIcon = isLinked ? LinkIcon2 : DetachIcon2;
-  const linkedLabel = __15("Link %s", "elementor").replace("%s", tooltipLabel);
-  const unlinkedLabel = __15("Unlink %s", "elementor").replace("%s", tooltipLabel);
+  const linkedLabel = __22("Link %s", "elementor").replace("%s", tooltipLabel);
+  const unlinkedLabel = __22("Unlink %s", "elementor").replace("%s", tooltipLabel);
   const disabled = sizeDisabled || directionDisabled;
-  return /* @__PURE__ */ React46.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React46.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React46.createElement(ControlLabel, null, label), /* @__PURE__ */ React46.createElement(Tooltip5, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React46.createElement(
+  return /* @__PURE__ */ React61.createElement(PropProvider, { propType, value: directionValue, setValue: setDirectionValue }, /* @__PURE__ */ React61.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React61.createElement(ControlLabel, null, label), /* @__PURE__ */ React61.createElement(Tooltip7, { title: isLinked ? unlinkedLabel : linkedLabel, placement: "top" }, /* @__PURE__ */ React61.createElement(
     ToggleButton3,
     {
       "aria-label": isLinked ? unlinkedLabel : linkedLabel,
@@ -3084,8 +3234,8 @@ var GapControl = ({ label }) => {
       onChange: onLinkToggle,
       disabled
     },
-    /* @__PURE__ */ React46.createElement(LinkedIcon, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React46.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React46.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, __15("Column", "elementor"))), /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React46.createElement(Grid10, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(ControlFormLabel, null, __15("Row", "elementor"))), /* @__PURE__ */ React46.createElement(Grid10, { item: true, xs: 12 }, /* @__PURE__ */ React46.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
+    /* @__PURE__ */ React61.createElement(LinkedIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React61.createElement(Stack11, { direction: "row", gap: 2, flexWrap: "nowrap", ref: stackRef }, /* @__PURE__ */ React61.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React61.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(ControlFormLabel, null, __22("Column", "elementor"))), /* @__PURE__ */ React61.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(Control4, { bind: "column", isLinked, anchorRef: stackRef }))), /* @__PURE__ */ React61.createElement(Grid11, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React61.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(ControlFormLabel, null, __22("Row", "elementor"))), /* @__PURE__ */ React61.createElement(Grid11, { item: true, xs: 12 }, /* @__PURE__ */ React61.createElement(Control4, { bind: "row", isLinked, anchorRef: stackRef })))));
 };
 var Control4 = ({
   bind,
@@ -3093,21 +3243,21 @@ var Control4 = ({
   anchorRef
 }) => {
   if (isLinked) {
-    return /* @__PURE__ */ React46.createElement(SizeControl, { anchorRef });
+    return /* @__PURE__ */ React61.createElement(SizeControl, { anchorRef });
   }
-  return /* @__PURE__ */ React46.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React46.createElement(SizeControl, { anchorRef }));
+  return /* @__PURE__ */ React61.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React61.createElement(SizeControl, { anchorRef }));
 };
 
 // src/controls/aspect-ratio-control.tsx
-import * as React47 from "react";
+import * as React62 from "react";
 import { useEffect as useEffect7, useState as useState10 } from "react";
 import { stringPropTypeUtil as stringPropTypeUtil7 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem3 } from "@elementor/editor-ui";
 import { ArrowsMoveHorizontalIcon, ArrowsMoveVerticalIcon } from "@elementor/icons";
-import { Grid as Grid11, Select as Select2, Stack as Stack12, TextField as TextField7 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { Grid as Grid12, Select as Select2, Stack as Stack12, TextField as TextField7 } from "@elementor/ui";
+import { __ as __23 } from "@wordpress/i18n";
 var RATIO_OPTIONS = [
-  { label: __16("Auto", "elementor"), value: "auto" },
+  { label: __23("Auto", "elementor"), value: "auto" },
   { label: "1/1", value: "1/1" },
   { label: "4/3", value: "4/3" },
   { label: "3/4", value: "3/4" },
@@ -3166,7 +3316,7 @@ var AspectRatioControl = createControl(({ label }) => {
       setAspectRatioValue(`${customWidth}/${newHeight}`);
     }
   };
-  return /* @__PURE__ */ React47.createElement(ControlActions, null, /* @__PURE__ */ React47.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React47.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(ControlLabel, null, label)), /* @__PURE__ */ React47.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(
+  return /* @__PURE__ */ React62.createElement(ControlActions, null, /* @__PURE__ */ React62.createElement(Stack12, { direction: "column", gap: 2 }, /* @__PURE__ */ React62.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlLabel, null, label)), /* @__PURE__ */ React62.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(
     Select2,
     {
       size: "tiny",
@@ -3177,10 +3327,10 @@ var AspectRatioControl = createControl(({ label }) => {
       onChange: handleSelectChange,
       fullWidth: true
     },
-    [...RATIO_OPTIONS, { label: __16("Custom", "elementor"), value: CUSTOM_RATIO }].map(
-      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React47.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
+    [...RATIO_OPTIONS, { label: __23("Custom", "elementor"), value: CUSTOM_RATIO }].map(
+      ({ label: optionLabel, ...props }) => /* @__PURE__ */ React62.createElement(MenuListItem3, { key: props.value, ...props, value: props.value ?? "" }, optionLabel)
     )
-  ))), isCustom && /* @__PURE__ */ React47.createElement(Grid11, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React47.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(
+  ))), isCustom && /* @__PURE__ */ React62.createElement(Grid12, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React62.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(
     TextField7,
     {
       size: "tiny",
@@ -3190,10 +3340,10 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customWidth,
       onChange: handleCustomWidthChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React47.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React62.createElement(ArrowsMoveHorizontalIcon, { fontSize: "tiny" })
       }
     }
-  )), /* @__PURE__ */ React47.createElement(Grid11, { item: true, xs: 6 }, /* @__PURE__ */ React47.createElement(
+  )), /* @__PURE__ */ React62.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(
     TextField7,
     {
       size: "tiny",
@@ -3203,23 +3353,23 @@ var AspectRatioControl = createControl(({ label }) => {
       value: customHeight,
       onChange: handleCustomHeightChange,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React47.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
+        startAdornment: /* @__PURE__ */ React62.createElement(ArrowsMoveVerticalIcon, { fontSize: "tiny" })
       }
     }
   )))));
 });
 
 // src/controls/svg-media-control.tsx
-import * as React49 from "react";
+import * as React64 from "react";
 import { useState as useState12 } 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 styled6 } from "@elementor/ui";
+import { Button as Button4, Card as Card2, CardMedia as CardMedia2, CardOverlay as CardOverlay2, CircularProgress as CircularProgress3, Stack as Stack13, styled as styled7 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __25 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
-import * as React48 from "react";
+import * as React63 from "react";
 import { useState as useState11 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import {
@@ -3233,19 +3383,19 @@ import {
   DialogTitle,
   Divider as Divider3
 } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
-var ADMIN_TITLE_TEXT = __17("Enable Unfiltered Uploads", "elementor");
-var ADMIN_CONTENT_TEXT = __17(
+import { __ as __24 } from "@wordpress/i18n";
+var ADMIN_TITLE_TEXT = __24("Enable Unfiltered Uploads", "elementor");
+var ADMIN_CONTENT_TEXT = __24(
   "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 = __17("Sorry, you can't upload that file yet", "elementor");
-var NON_ADMIN_CONTENT_TEXT = __17(
+var NON_ADMIN_TITLE_TEXT = __24("Sorry, you can't upload that file yet", "elementor");
+var NON_ADMIN_CONTENT_TEXT = __24(
   "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 = __17("Failed to enable unfiltered files upload.", "elementor");
-var ADMIN_FAILED_CONTENT_TEXT_PT2 = __17(
+var ADMIN_FAILED_CONTENT_TEXT_PT1 = __24("Failed to enable unfiltered files upload.", "elementor");
+var ADMIN_FAILED_CONTENT_TEXT_PT2 = __24(
   "You can try again, if the problem persists, please contact support.",
   "elementor"
 );
@@ -3272,9 +3422,9 @@ var EnableUnfilteredModal = (props) => {
     }
   };
   const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
-  return canManageOptions ? /* @__PURE__ */ React48.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React48.createElement(NonAdminDialog, { ...dialogProps });
+  return canManageOptions ? /* @__PURE__ */ React63.createElement(AdminDialog, { ...dialogProps }) : /* @__PURE__ */ React63.createElement(NonAdminDialog, { ...dialogProps });
 };
-var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React48.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React48.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React48.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React48.createElement(Divider3, null), /* @__PURE__ */ React48.createElement(DialogContent, null, /* @__PURE__ */ React48.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React48.createElement(React48.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React48.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React48.createElement(DialogActions, null, /* @__PURE__ */ React48.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __17("Cancel", "elementor")), /* @__PURE__ */ React48.createElement(
+var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @__PURE__ */ React63.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React63.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React63.createElement(DialogTitle, null, ADMIN_TITLE_TEXT)), /* @__PURE__ */ React63.createElement(Divider3, null), /* @__PURE__ */ React63.createElement(DialogContent, null, /* @__PURE__ */ React63.createElement(DialogContentText, null, isError ? /* @__PURE__ */ React63.createElement(React63.Fragment, null, ADMIN_FAILED_CONTENT_TEXT_PT1, " ", /* @__PURE__ */ React63.createElement("br", null), " ", ADMIN_FAILED_CONTENT_TEXT_PT2) : ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React63.createElement(DialogActions, null, /* @__PURE__ */ React63.createElement(Button3, { size: "medium", color: "secondary", onClick: () => onClose(false) }, __24("Cancel", "elementor")), /* @__PURE__ */ React63.createElement(
   Button3,
   {
     size: "medium",
@@ -3283,16 +3433,16 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
     color: "primary",
     disabled: isPending
   },
-  isPending ? /* @__PURE__ */ React48.createElement(CircularProgress2, { size: 24 }) : __17("Enable", "elementor")
+  isPending ? /* @__PURE__ */ React63.createElement(CircularProgress2, { size: 24 }) : __24("Enable", "elementor")
 )));
-var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React48.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React48.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React48.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React48.createElement(Divider3, null), /* @__PURE__ */ React48.createElement(DialogContent, null, /* @__PURE__ */ React48.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React48.createElement(DialogActions, null, /* @__PURE__ */ React48.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __17("Got it", "elementor"))));
+var NonAdminDialog = ({ open, onClose }) => /* @__PURE__ */ React63.createElement(Dialog, { open, maxWidth: "sm", onClose: () => onClose(false) }, /* @__PURE__ */ React63.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React63.createElement(DialogTitle, null, NON_ADMIN_TITLE_TEXT)), /* @__PURE__ */ React63.createElement(Divider3, null), /* @__PURE__ */ React63.createElement(DialogContent, null, /* @__PURE__ */ React63.createElement(DialogContentText, null, NON_ADMIN_CONTENT_TEXT)), /* @__PURE__ */ React63.createElement(DialogActions, null, /* @__PURE__ */ React63.createElement(Button3, { size: "medium", onClick: () => onClose(false), variant: "contained", color: "primary" }, __24("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 = styled6(Card2)`
+var StyledCard = styled7(Card2)`
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -3301,7 +3451,7 @@ var StyledCard = styled6(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled6(Stack13)`
+var StyledCardMediaContainer = styled7(Stack13)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -3333,392 +3483,83 @@ var SvgMediaControl = createControl(() => {
       });
     }
   });
-  const onCloseUnfilteredModal = (enabled) => {
-    setUnfilteredModalOpenState(false);
-    if (enabled) {
-      open(MODE_UPLOAD);
-    }
-  };
-  const handleClick = (openOptions) => {
-    if (!allowSvgUpload && openOptions === MODE_UPLOAD) {
-      setUnfilteredModalOpenState(true);
-    } else {
-      open(openOptions);
-    }
-  };
-  return /* @__PURE__ */ React49.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React49.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React49.createElement(ControlActions, null, /* @__PURE__ */ React49.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React49.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React49.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React49.createElement(
-    CardMedia2,
-    {
-      component: "img",
-      image: src,
-      alt: __18("Preview SVG", "elementor"),
-      sx: { maxHeight: "140px", width: "50px" }
-    }
-  )), /* @__PURE__ */ React49.createElement(
-    CardOverlay2,
-    {
-      sx: {
-        "&:hover": {
-          backgroundColor: "rgba( 0, 0, 0, 0.75 )"
-        }
-      }
-    },
-    /* @__PURE__ */ React49.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React49.createElement(
-      Button4,
-      {
-        size: "tiny",
-        color: "inherit",
-        variant: "outlined",
-        onClick: () => handleClick(MODE_BROWSE)
-      },
-      __18("Select SVG", "elementor")
-    ), /* @__PURE__ */ React49.createElement(
-      Button4,
-      {
-        size: "tiny",
-        variant: "text",
-        color: "inherit",
-        startIcon: /* @__PURE__ */ React49.createElement(UploadIcon2, null),
-        onClick: () => handleClick(MODE_UPLOAD)
-      },
-      __18("Upload", "elementor")
-    ))
-  ))));
-});
-
-// src/controls/background-control/background-control.tsx
-import * as React66 from "react";
-import { backgroundPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid16 } from "@elementor/ui";
-import { __ as __29 } from "@wordpress/i18n";
-
-// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React65 from "react";
-import {
-  backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
-  backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
-  backgroundOverlayPropTypeUtil,
-  colorPropTypeUtil as colorPropTypeUtil3
-} from "@elementor/editor-props";
-import { Box as Box12, CardMedia as CardMedia3, styled as styled7, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
-import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
-import { __ as __28 } from "@wordpress/i18n";
-
-// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
-import * as React51 from "react";
-import { PlusIcon as PlusIcon3 } from "@elementor/icons";
-import { Box as Box9, IconButton as IconButton4, Infotip as Infotip2 } from "@elementor/ui";
-import { __ as __19 } from "@wordpress/i18n";
-
-// src/components/unstable-repeater/context/repeater-context.tsx
-import * as React50 from "react";
-import { createContext as createContext7, useState as useState13 } from "react";
-import { usePopupState as usePopupState6 } from "@elementor/ui";
-var RepeaterContext = createContext7(null);
-var EMPTY_OPEN_ITEM2 = -1;
-var useRepeaterContext = () => {
-  const context = React50.useContext(RepeaterContext);
-  if (!context) {
-    throw new Error("useRepeaterContext must be used within a RepeaterContextProvider");
-  }
-  return context;
-};
-var RepeaterContextProvider = ({
-  children,
-  initial,
-  propTypeUtil
-}) => {
-  const { value: repeaterValues, setValue: setRepeaterValues } = useBoundProp(propTypeUtil);
-  const [items2, setItems] = useSyncExternalState({
-    external: repeaterValues,
-    fallback: () => [],
-    setExternal: setRepeaterValues,
-    persistWhen: () => true
-  });
-  const [itemsWithKeys, setItemsWithKeys] = useState13(() => {
-    return items2?.map((item) => ({ key: generateUniqueKey(), item })) ?? [];
-  });
-  React50.useEffect(() => {
-    setItemsWithKeys((prevItemsWithKeys) => {
-      const newItemsWithKeys = items2?.map((item) => {
-        const existingItem = prevItemsWithKeys.find((i) => i.item === item);
-        return existingItem || { key: generateUniqueKey(), item };
-      }) ?? [];
-      return newItemsWithKeys;
-    });
-  }, [items2]);
-  const handleSetItems = (newItemsWithKeys) => {
-    setItems(newItemsWithKeys.map(({ item }) => item));
-  };
-  const [openItemIndex, setOpenItemIndex] = useState13(EMPTY_OPEN_ITEM2);
-  const [rowRef, setRowRef] = useState13(null);
-  const isOpen = openItemIndex !== EMPTY_OPEN_ITEM2;
-  const popoverState = usePopupState6({ variant: "popover" });
-  const addItem = (ev, config) => {
-    const item = config?.item ?? initial;
-    const newIndex = config?.index ?? items2.length;
-    const newItems = [...items2];
-    newItems.splice(newIndex, 0, item);
-    setItems(newItems);
-    setOpenItemIndex(newIndex);
-    popoverState.open(rowRef ?? ev);
-  };
-  const removeItem = (index) => {
-    setItems(items2.filter((_, pos) => pos !== index));
-  };
-  const updateItem = (updatedItem, index) => {
-    const newItems = [...items2.slice(0, index), updatedItem, ...items2.slice(index + 1)];
-    setItems(newItems);
-  };
-  return /* @__PURE__ */ React50.createElement(
-    RepeaterContext.Provider,
-    {
-      value: {
-        isOpen,
-        openItemIndex,
-        setOpenItemIndex,
-        items: itemsWithKeys ?? [],
-        setItems: handleSetItems,
-        popoverState,
-        initial,
-        updateItem,
-        addItem,
-        removeItem,
-        rowRef,
-        setRowRef
-      }
-    },
-    children
-  );
-};
-var generateUniqueKey = () => {
-  return Date.now() + Math.floor(Math.random() * 1e6);
-};
-
-// src/components/unstable-repeater/actions/tooltip-add-item-action.tsx
-var SIZE4 = "tiny";
-var TooltipAddItemAction = ({
-  disabled = false,
-  enableTooltip = false,
-  tooltipContent = null,
-  newItemIndex
-}) => {
-  const { addItem } = useRepeaterContext();
-  const onClick = (ev) => addItem(ev, { index: newItemIndex });
-  return /* @__PURE__ */ React51.createElement(ConditionalToolTip, { content: tooltipContent, enable: enableTooltip }, /* @__PURE__ */ React51.createElement(Box9, { component: "span", sx: { cursor: disabled ? "not-allowed" : "pointer" } }, /* @__PURE__ */ React51.createElement(
-    IconButton4,
-    {
-      size: SIZE4,
-      disabled,
-      onClick,
-      "aria-label": __19("Add item", "elementor")
-    },
-    /* @__PURE__ */ React51.createElement(PlusIcon3, { fontSize: SIZE4 })
-  )));
-};
-var ConditionalToolTip = ({
-  children,
-  enable,
-  content
-}) => enable && content ? /* @__PURE__ */ React51.createElement(Infotip2, { placement: "right", color: "secondary", content }, children) : children;
-
-// src/components/unstable-repeater/header/header.tsx
-import * as React52 from "react";
-import { Box as Box10, Stack as Stack14, Typography as Typography5 } from "@elementor/ui";
-var Header = React52.forwardRef(({ label, children }, ref) => {
-  const { value } = useBoundProp();
-  return /* @__PURE__ */ React52.createElement(Stack14, { direction: "row", alignItems: "center", gap: 1, sx: { marginInlineEnd: -0.75, py: 0.25 }, ref }, /* @__PURE__ */ React52.createElement(Box10, { display: "flex", alignItems: "center", gap: 1, sx: { flexGrow: 1 } }, /* @__PURE__ */ React52.createElement(Typography5, { component: "label", variant: "caption", color: "text.secondary", sx: { lineHeight: 1 } }, label), /* @__PURE__ */ React52.createElement(ControlAdornments, null)), /* @__PURE__ */ React52.createElement(RepeaterHeaderActionsSlot, { value }), /* @__PURE__ */ React52.createElement(SlotChildren, { whitelist: [TooltipAddItemAction], sorted: true }, children));
-});
-
-// src/components/unstable-repeater/items/items-container.tsx
-import * as React53 from "react";
-var ItemsContainer = ({
-  itemTemplate,
-  isSortable = true,
-  children
-}) => {
-  const { items: items2, setItems } = useRepeaterContext();
-  const keys = items2.map(({ key }) => key);
-  if (!itemTemplate) {
-    return null;
-  }
-  const onChangeOrder = (newKeys) => {
-    setItems(
-      newKeys.map((key) => {
-        const index = items2.findIndex((item) => item.key === key);
-        return items2[index];
-      })
-    );
-  };
-  return /* @__PURE__ */ React53.createElement(React53.Fragment, null, /* @__PURE__ */ React53.createElement(SortableProvider, { value: keys, onChange: onChangeOrder }, keys.map((key, index) => {
-    const value = items2[index].item;
-    return /* @__PURE__ */ React53.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, React53.isValidElement(itemTemplate) ? React53.cloneElement(itemTemplate, {
-      key,
-      value,
-      index,
-      children
-    }) : null);
-  })));
-};
-
-// src/components/unstable-repeater/items/item.tsx
-import * as React57 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 React54 from "react";
-import { EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2 } from "@elementor/icons";
-import { IconButton as IconButton5, Tooltip as Tooltip6 } 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].item.disabled ?? false;
-  const toggleLabel = propDisabled ? __20("Show", "elementor") : __20("Hide", "elementor");
-  const onClick = () => {
-    const self = structuredClone(items2[index].item);
-    self.disabled = !self.disabled;
-    if (!self.disabled) {
-      delete self.disabled;
+  const onCloseUnfilteredModal = (enabled) => {
+    setUnfilteredModalOpenState(false);
+    if (enabled) {
+      open(MODE_UPLOAD);
     }
-    updateItem(self, index);
-  };
-  return /* @__PURE__ */ React54.createElement(Tooltip6, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React54.createElement(IconButton5, { size: SIZE5, onClick, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React54.createElement(EyeOffIcon2, { fontSize: SIZE5 }) : /* @__PURE__ */ React54.createElement(EyeIcon2, { fontSize: SIZE5 })));
-};
-
-// src/components/unstable-repeater/actions/duplicate-item-action.tsx
-import * as React55 from "react";
-import { CopyIcon as CopyIcon2 } from "@elementor/icons";
-import { IconButton as IconButton6, Tooltip as Tooltip7 } 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 = (ev) => {
-    const newItem = structuredClone(items2[index]?.item);
-    addItem(ev, { item: newItem, index: index + 1 });
   };
-  return /* @__PURE__ */ React55.createElement(Tooltip7, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React55.createElement(IconButton6, { size: SIZE6, onClick, "aria-label": duplicateLabel }, /* @__PURE__ */ React55.createElement(CopyIcon2, { fontSize: SIZE6 })));
-};
-
-// src/components/unstable-repeater/actions/remove-item-action.tsx
-import * as React56 from "react";
-import { XIcon as XIcon3 } from "@elementor/icons";
-import { IconButton as IconButton7, Tooltip as Tooltip8 } 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__ */ React56.createElement(Tooltip8, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React56.createElement(IconButton7, { size: SIZE7, onClick, "aria-label": removeLabel }, /* @__PURE__ */ React56.createElement(XIcon3, { fontSize: SIZE7 })));
-};
-
-// src/components/unstable-repeater/items/item.tsx
-var Item = ({
-  Label: Label3,
-  Icon,
-  value,
-  index = -1,
-  children
-}) => {
-  const { items: items2, popoverState, setRowRef, openItemIndex, setOpenItemIndex } = useRepeaterContext();
-  const triggerProps = bindTrigger4(popoverState);
-  const key = items2[index].key ?? -1;
-  const onClick = (ev) => {
-    triggerProps.onClick(ev);
-    setOpenItemIndex(index);
+  const handleClick = (openOptions) => {
+    if (!allowSvgUpload && openOptions === MODE_UPLOAD) {
+      setUnfilteredModalOpenState(true);
+    } else {
+      open(openOptions);
+    }
   };
-  return /* @__PURE__ */ React57.createElement(React57.Fragment, null, /* @__PURE__ */ React57.createElement(
-    UnstableTag3,
+  return /* @__PURE__ */ React64.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React64.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React64.createElement(ControlActions, null, /* @__PURE__ */ React64.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React64.createElement(StyledCardMediaContainer, null, isFetching ? /* @__PURE__ */ React64.createElement(CircularProgress3, { role: "progressbar" }) : /* @__PURE__ */ React64.createElement(
+    CardMedia2,
     {
-      key,
-      disabled: false,
-      label: /* @__PURE__ */ React57.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React57.createElement(Label3, { value })),
-      showActionsOnHover: true,
-      fullWidth: true,
-      ref: (ref) => ref && openItemIndex === index && setRowRef(ref),
-      variant: "outlined",
-      "aria-label": __23("Open item", "elementor"),
-      sx: { minHeight: (theme) => theme.spacing(4) },
-      ...triggerProps,
-      onClick,
-      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
-      ))
+      component: "img",
+      image: src,
+      alt: __25("Preview SVG", "elementor"),
+      sx: { maxHeight: "140px", width: "50px" }
     }
-  ));
-};
-
-// src/components/unstable-repeater/unstable-repeater.tsx
-import * as React59 from "react";
-
-// src/components/unstable-repeater/items/edit-item-popover.tsx
-import * as React58 from "react";
-import { bindPopover as bindPopover5, Box as Box11, Popover as Popover5 } from "@elementor/ui";
-var EditItemPopover = ({ children }) => {
-  const { popoverState, openItemIndex, isOpen, rowRef, setOpenItemIndex, setRowRef, items: items2 } = useRepeaterContext();
-  const popoverProps = bindPopover5(popoverState);
-  if (!isOpen || !rowRef) {
-    return null;
-  }
-  const bind = items2[openItemIndex].item.$$type;
-  const onClose = () => {
-    popoverProps.onClose?.();
-    setRowRef(null);
-    setOpenItemIndex(EMPTY_OPEN_ITEM2);
-  };
-  return /* @__PURE__ */ React58.createElement(
-    Popover5,
+  )), /* @__PURE__ */ React64.createElement(
+    CardOverlay2,
     {
-      disablePortal: true,
-      slotProps: {
-        paper: {
-          sx: { mt: 0.5, width: rowRef.offsetWidth }
+      sx: {
+        "&:hover": {
+          backgroundColor: "rgba( 0, 0, 0, 0.75 )"
         }
-      },
-      anchorOrigin: { vertical: "bottom", horizontal: "left" },
-      ...popoverProps,
-      anchorEl: rowRef,
-      onClose
+      }
     },
-    /* @__PURE__ */ React58.createElement(PropKeyProvider, { bind: String(openItemIndex) }, /* @__PURE__ */ React58.createElement(Box11, null, React58.isValidElement(children) && React58.cloneElement(children, { bind, index: openItemIndex })))
-  );
-};
+    /* @__PURE__ */ React64.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React64.createElement(
+      Button4,
+      {
+        size: "tiny",
+        color: "inherit",
+        variant: "outlined",
+        onClick: () => handleClick(MODE_BROWSE)
+      },
+      __25("Select SVG", "elementor")
+    ), /* @__PURE__ */ React64.createElement(
+      Button4,
+      {
+        size: "tiny",
+        variant: "text",
+        color: "inherit",
+        startIcon: /* @__PURE__ */ React64.createElement(UploadIcon2, null),
+        onClick: () => handleClick(MODE_UPLOAD)
+      },
+      __25("Upload", "elementor")
+    ))
+  ))));
+});
 
-// src/components/unstable-repeater/unstable-repeater.tsx
-var UnstableRepeater = ({
-  children,
-  initial,
-  propTypeUtil
-}) => {
-  return /* @__PURE__ */ React59.createElement(SectionContent, null, /* @__PURE__ */ React59.createElement(RepeaterContextProvider, { initial, propTypeUtil }, /* @__PURE__ */ React59.createElement(SlotChildren, { whitelist: [Header, ItemsContainer, EditItemPopover], sorted: true }, children)));
-};
+// src/controls/background-control/background-control.tsx
+import * as React71 from "react";
+import { backgroundPropTypeUtil } from "@elementor/editor-props";
+import { Grid as Grid17 } from "@elementor/ui";
+import { __ as __31 } from "@wordpress/i18n";
+
+// src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
+import * as React70 from "react";
+import {
+  backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
+  backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
+  backgroundOverlayPropTypeUtil,
+  colorPropTypeUtil as colorPropTypeUtil3
+} from "@elementor/editor-props";
+import { Box as Box11, CardMedia as CardMedia3, styled as styled8, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { useWpMediaAttachment as useWpMediaAttachment3 } from "@elementor/wp-media";
+import { __ as __30 } from "@wordpress/i18n";
 
 // src/env.ts
 import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React60 from "react";
+import * as React65 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -3765,7 +3606,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React60.createElement(ControlActions, null, /* @__PURE__ */ React60.createElement(
+  return /* @__PURE__ */ React65.createElement(ControlActions, null, /* @__PURE__ */ React65.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -3790,47 +3631,47 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React61 from "react";
+import * as React66 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
-import { Grid as Grid12 } from "@elementor/ui";
-import { __ as __24 } from "@wordpress/i18n";
+import { Grid as Grid13 } from "@elementor/ui";
+import { __ as __26 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __24("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(PinIcon, { fontSize: size }),
+    label: __26("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __24("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React61.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __26("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React66.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React61.createElement(PopoverGridContainer, null, /* @__PURE__ */ React61.createElement(Grid12, { item: true, xs: 6 }, /* @__PURE__ */ React61.createElement(ControlFormLabel, null, __24("Attachment", "elementor"))), /* @__PURE__ */ React61.createElement(Grid12, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React61.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React66.createElement(PopoverGridContainer, null, /* @__PURE__ */ React66.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlFormLabel, null, __26("Attachment", "elementor"))), /* @__PURE__ */ React66.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React66.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React62 from "react";
+import * as React67 from "react";
 import { useRef as useRef11 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil9 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem4 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
-import { Grid as Grid13, Select as Select3 } from "@elementor/ui";
-import { __ as __25 } from "@wordpress/i18n";
+import { Grid as Grid14, Select as Select3 } from "@elementor/ui";
+import { __ as __27 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { 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" }
+  { label: __27("Center center", "elementor"), value: "center center" },
+  { label: __27("Center left", "elementor"), value: "center left" },
+  { label: __27("Center right", "elementor"), value: "center right" },
+  { label: __27("Top center", "elementor"), value: "top center" },
+  { label: __27("Top left", "elementor"), value: "top left" },
+  { label: __27("Top right", "elementor"), value: "top right" },
+  { label: __27("Bottom center", "elementor"), value: "bottom center" },
+  { label: __27("Bottom left", "elementor"), value: "bottom left" },
+  { label: __27("Bottom right", "elementor"), value: "bottom right" },
+  { label: __27("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
@@ -3845,7 +3686,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React62.createElement(Grid13, { container: true, spacing: 1.5 }, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(PopoverGridContainer, null, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(ControlFormLabel, null, __25("Position", "elementor"))), /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React62.createElement(
+  return /* @__PURE__ */ React67.createElement(Grid14, { container: true, spacing: 1.5 }, /* @__PURE__ */ React67.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(ControlFormLabel, null, __27("Position", "elementor"))), /* @__PURE__ */ React67.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React67.createElement(
     Select3,
     {
       fullWidth: true,
@@ -3854,18 +3695,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React62.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
-  )))), isCustom ? /* @__PURE__ */ React62.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 12 }, /* @__PURE__ */ React62.createElement(Grid13, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React62.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React67.createElement(MenuListItem4, { key: value, value: value ?? "" }, label))
+  )))), isCustom ? /* @__PURE__ */ React67.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React67.createElement(Grid14, { item: true, xs: 12 }, /* @__PURE__ */ React67.createElement(Grid14, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React67.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React67.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React62.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React67.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React62.createElement(Grid13, { item: true, xs: 6 }, /* @__PURE__ */ React62.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React62.createElement(
+  ))), /* @__PURE__ */ React67.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React67.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React67.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React62.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React67.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -3873,42 +3714,42 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React63 from "react";
-import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon4 } from "@elementor/icons";
-import { Grid as Grid14 } from "@elementor/ui";
-import { __ as __26 } from "@wordpress/i18n";
+import * as React68 from "react";
+import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
+import { Grid as Grid15 } from "@elementor/ui";
+import { __ as __28 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __26("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(GridDotsIcon, { fontSize: size }),
+    label: __28("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __26("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __28("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __26("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __28("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __26("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React63.createElement(XIcon4, { fontSize: size }),
+    label: __28("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React68.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React63.createElement(PopoverGridContainer, null, /* @__PURE__ */ React63.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React63.createElement(ControlFormLabel, null, __26("Repeat", "elementor"))), /* @__PURE__ */ React63.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React63.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React68.createElement(PopoverGridContainer, null, /* @__PURE__ */ React68.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React68.createElement(ControlFormLabel, null, __28("Repeat", "elementor"))), /* @__PURE__ */ React68.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React68.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React64 from "react";
+import * as React69 from "react";
 import { useRef as useRef12 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil10 } from "@elementor/editor-props";
 import {
@@ -3919,31 +3760,31 @@ import {
   LetterAIcon,
   PencilIcon
 } from "@elementor/icons";
-import { Grid as Grid15 } from "@elementor/ui";
-import { __ as __27 } from "@wordpress/i18n";
+import { Grid as Grid16 } from "@elementor/ui";
+import { __ as __29 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __27("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(LetterAIcon, { fontSize: size }),
+    label: __29("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __27("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __29("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __27("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __29("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __27("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React64.createElement(PencilIcon, { fontSize: size }),
+    label: __29("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React69.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -3959,7 +3800,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React64.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(ControlFormLabel, null, __27("Size", "elementor"))), /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React64.createElement(
+  return /* @__PURE__ */ React69.createElement(Grid16, { container: true, spacing: 1.5 }, /* @__PURE__ */ React69.createElement(Grid16, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(PopoverGridContainer, null, /* @__PURE__ */ React69.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlFormLabel, null, __29("Size", "elementor"))), /* @__PURE__ */ React69.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React69.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -3968,17 +3809,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React64.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React64.createElement(PopoverGridContainer, null, /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React64.createElement(
+  )))), isCustom ? /* @__PURE__ */ React69.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React69.createElement(Grid16, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React69.createElement(PopoverGridContainer, null, /* @__PURE__ */ React69.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React69.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React64.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React69.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React64.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React64.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React64.createElement(
+  ))), /* @__PURE__ */ React69.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React69.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React64.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React69.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -4079,52 +3920,52 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { 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" }
+  { label: __30("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __30("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __30("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __30("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React65.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React70.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React70.createElement(
     UnstableRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React65.createElement(Header, { label: __28("Overlay", "elementor") }, /* @__PURE__ */ React65.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React65.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React65.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 }) }, /* @__PURE__ */ React65.createElement(DuplicateItemAction, null), /* @__PURE__ */ React65.createElement(DisableItemAction, null), /* @__PURE__ */ React65.createElement(RemoveItemAction, null)),
-    /* @__PURE__ */ React65.createElement(EditItemPopover, null, /* @__PURE__ */ React65.createElement(ItemContent3, null))
+    /* @__PURE__ */ React70.createElement(Header, { label: __30("Overlay", "elementor") }, /* @__PURE__ */ React70.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React70.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React70.createElement(Item, { Icon: ItemIcon2, Label: ItemLabel2 }) }, /* @__PURE__ */ React70.createElement(DuplicateItemAction, null), /* @__PURE__ */ React70.createElement(DisableItemAction, null), /* @__PURE__ */ React70.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React70.createElement(EditItemPopover, null, /* @__PURE__ */ React70.createElement(ItemContent, null))
   ));
 });
-var ItemContent3 = () => {
+var ItemContent = () => {
   const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory({
     image: getInitialBackgroundOverlay().value,
     color: initialBackgroundColorOverlay.value,
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React65.createElement(Box12, { sx: { width: "100%" } }, /* @__PURE__ */ React65.createElement(Box12, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React70.createElement(Box11, { sx: { width: "100%" } }, /* @__PURE__ */ React70.createElement(Box11, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React70.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __28("Background Overlay", "elementor")
+      "aria-label": __30("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React65.createElement(Tab, { label: __28("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React65.createElement(Tab, { label: __28("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React65.createElement(Tab, { label: __28("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React65.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React65.createElement(PopoverContent, null, /* @__PURE__ */ React65.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React65.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React65.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React65.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React65.createElement(PopoverContent, null, /* @__PURE__ */ React65.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React70.createElement(Tab, { label: __30("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React70.createElement(Tab, { label: __30("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React70.createElement(Tab, { label: __30("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React70.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React70.createElement(PopoverContent, null, /* @__PURE__ */ React70.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React70.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React70.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React70.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React70.createElement(PopoverContent, null, /* @__PURE__ */ React70.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
-var ItemIcon3 = ({ value }) => {
+var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React65.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React70.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React65.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React70.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React65.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React70.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -4137,11 +3978,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React65.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React70.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React65.createElement(
+  return /* @__PURE__ */ React70.createElement(
     CardMedia3,
     {
       image: imageUrl,
@@ -4156,43 +3997,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React65.createElement(StyledUnstableColorIndicator2, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React70.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
-var ItemLabel3 = ({ value }) => {
+var ItemLabel2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React65.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React70.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React65.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React70.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React65.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React70.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React65.createElement("span", null, color);
+  return /* @__PURE__ */ React70.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React65.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React70.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React65.createElement("span", null, __28("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React70.createElement("span", null, __30("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React65.createElement("span", null, __28("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React70.createElement("span", null, __30("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React65.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React65.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React70.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React65.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React65.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React65.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React65.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React70.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React70.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React70.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React70.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React70.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React70.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator2 = styled7(UnstableColorIndicator3)(({ theme }) => ({
+var StyledUnstableColorIndicator3 = styled8(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -4230,21 +4071,21 @@ var getGradientValue = (value) => {
 // src/controls/background-control/background-control.tsx
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  const colorLabel = __29("Color", "elementor");
-  return /* @__PURE__ */ React66.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React66.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React66.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React66.createElement(Grid16, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React66.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React66.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React66.createElement(ColorControl, null)))));
+  const colorLabel = __31("Color", "elementor");
+  return /* @__PURE__ */ React71.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React71.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React71.createElement(Grid17, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React71.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React71.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ColorControl, null)))));
 });
 
 // src/controls/repeatable-control.tsx
-import * as React67 from "react";
-import { useMemo as useMemo5 } from "react";
+import * as React72 from "react";
+import { useMemo as useMemo6 } from "react";
 import { createArrayPropUtils } from "@elementor/editor-props";
-import { Box as Box13 } from "@elementor/ui";
+import { Box as Box12 } from "@elementor/ui";
 
 // src/hooks/use-repeatable-control-context.ts
-import { createContext as createContext8, useContext as useContext8 } from "react";
-var RepeatableControlContext = createContext8(void 0);
+import { createContext as createContext9, useContext as useContext9 } from "react";
+var RepeatableControlContext = createContext9(void 0);
 var useRepeatableControlContext = () => {
-  const context = useContext8(RepeatableControlContext);
+  const context = useContext9(RepeatableControlContext);
   if (!context) {
     throw new Error("useRepeatableControlContext must be used within RepeatableControl");
   }
@@ -4269,11 +4110,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil = useMemo5(
+    const childArrayPropTypeUtil = useMemo6(
       () => createArrayPropUtils(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo5(
+    const contextValue = useMemo6(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -4282,31 +4123,31 @@ var RepeatableControl = createControl(
       [childControlConfig, placeholder, patternLabel]
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    return /* @__PURE__ */ React67.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React67.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React67.createElement(
+    return /* @__PURE__ */ React72.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React72.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React72.createElement(
       UnstableRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil
       },
-      /* @__PURE__ */ React67.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React67.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
-      /* @__PURE__ */ React67.createElement(
+      /* @__PURE__ */ React72.createElement(Header, { label: repeaterLabel }, /* @__PURE__ */ React72.createElement(TooltipAddItemAction, { ...addItemTooltipProps, newItemIndex: 0 })),
+      /* @__PURE__ */ React72.createElement(
         ItemsContainer,
         {
           isSortable: false,
-          itemTemplate: /* @__PURE__ */ React67.createElement(Item, { Icon: ItemIcon4, Label: ItemLabel4 })
+          itemTemplate: /* @__PURE__ */ React72.createElement(Item, { Icon: ItemIcon3, Label: ItemLabel3 })
         },
-        showDuplicate && /* @__PURE__ */ React67.createElement(DuplicateItemAction, null),
-        showToggle && /* @__PURE__ */ React67.createElement(DisableItemAction, null),
-        /* @__PURE__ */ React67.createElement(RemoveItemAction, null)
+        showDuplicate && /* @__PURE__ */ React72.createElement(DuplicateItemAction, null),
+        showToggle && /* @__PURE__ */ React72.createElement(DisableItemAction, null),
+        /* @__PURE__ */ React72.createElement(RemoveItemAction, null)
       ),
-      /* @__PURE__ */ React67.createElement(EditItemPopover, null, /* @__PURE__ */ React67.createElement(Content3, null))
+      /* @__PURE__ */ React72.createElement(EditItemPopover, null, /* @__PURE__ */ React72.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon4 = () => /* @__PURE__ */ React67.createElement(React67.Fragment, null);
-var Content3 = () => {
+var ItemIcon3 = () => /* @__PURE__ */ React72.createElement(React72.Fragment, null);
+var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React67.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React67.createElement(PopoverGridContainer, null, /* @__PURE__ */ React67.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React72.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React72.createElement(PopoverGridContainer, null, /* @__PURE__ */ React72.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -4363,12 +4204,12 @@ var shouldShowPlaceholder = (pattern, data) => {
   }
   return false;
 };
-var ItemLabel4 = ({ value }) => {
+var ItemLabel3 = ({ value }) => {
   const { placeholder, patternLabel } = useRepeatableControlContext();
   const showPlaceholder = shouldShowPlaceholder(patternLabel, value);
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const color = showPlaceholder ? "text.tertiary" : "text.primary";
-  return /* @__PURE__ */ React67.createElement(Box13, { component: "span", color }, label);
+  return /* @__PURE__ */ React72.createElement(Box12, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -4376,34 +4217,34 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React68 from "react";
-import { useMemo as useMemo6, useState as useState14 } from "react";
+import * as React73 from "react";
+import { useMemo as useMemo7, useState as useState13 } 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 __30 } from "@wordpress/i18n";
+import { FormHelperText, FormLabel as FormLabel3, Grid as Grid18 } from "@elementor/ui";
+import { __ as __32 } from "@wordpress/i18n";
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState14("");
-  const [valueError, setValueError] = useState14("");
-  const [sessionState, setSessionState] = useState14({
+  const [keyError, setKeyError] = useState13("");
+  const [valueError, setValueError] = useState13("");
+  const [sessionState, setSessionState] = useState13({
     key: value?.key?.value || "",
     value: value?.value?.value || ""
   });
-  const keyLabel = props.keyName || __30("Key", "elementor");
-  const valueLabel = props.valueName || __30("Value", "elementor");
+  const keyLabel = props.keyName || __32("Key", "elementor");
+  const valueLabel = props.valueName || __32("Value", "elementor");
   const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo6(
+  const [keyRegex, valueRegex, errMsg] = useMemo7(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __30("Invalid Format", "elementor")
+      props.validationErrorMessage || __32("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -4452,7 +4293,7 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React68.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React68.createElement(Grid17, { container: true, gap: 1.5 }, /* @__PURE__ */ React68.createElement(Grid17, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React68.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React68.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, helperText: keyHelper })), !!keyError && /* @__PURE__ */ React68.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React68.createElement(Grid17, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React68.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React68.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React68.createElement(
+  return /* @__PURE__ */ React73.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React73.createElement(Grid18, { container: true, gap: 1.5 }, /* @__PURE__ */ React73.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React73.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React73.createElement(TextControl, { inputValue: sessionState.key, error: !!keyError, helperText: keyHelper })), !!keyError && /* @__PURE__ */ React73.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React73.createElement(Grid18, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React73.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React73.createElement(
     TextControl,
     {
       inputValue: sessionState.value,
@@ -4460,27 +4301,27 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React68.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React73.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React69 from "react";
+import * as React74 from "react";
 import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil12 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem5 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
-import { Grid as Grid18, Select as Select4 } from "@elementor/ui";
-import { __ as __31 } from "@wordpress/i18n";
+import { Grid as Grid19, Select as Select4 } from "@elementor/ui";
+import { __ as __33 } from "@wordpress/i18n";
 var positionOptions = [
-  { 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" }
+  { label: __33("Center center", "elementor"), value: "center center" },
+  { label: __33("Center left", "elementor"), value: "center left" },
+  { label: __33("Center right", "elementor"), value: "center right" },
+  { label: __33("Top center", "elementor"), value: "top center" },
+  { label: __33("Top left", "elementor"), value: "top left" },
+  { label: __33("Top right", "elementor"), value: "top right" },
+  { label: __33("Bottom center", "elementor"), value: "bottom center" },
+  { label: __33("Bottom left", "elementor"), value: "bottom left" },
+  { label: __33("Bottom right", "elementor"), value: "bottom right" },
+  { label: __33("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
@@ -4494,7 +4335,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React69.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(ControlFormLabel, null, __31("Object position", "elementor"))), /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React69.createElement(
+  return /* @__PURE__ */ React74.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(Grid19, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React74.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(ControlFormLabel, null, __33("Object position", "elementor"))), /* @__PURE__ */ React74.createElement(Grid19, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React74.createElement(
     Select4,
     {
       size: "tiny",
@@ -4503,29 +4344,29 @@ var PositionControl = () => {
       onChange: handlePositionChange,
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React69.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React69.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 12 }, /* @__PURE__ */ React69.createElement(Grid18, { container: true, spacing: 1.5 }, /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React69.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React74.createElement(MenuListItem5, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React74.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React74.createElement(Grid19, { item: true, xs: 12 }, /* @__PURE__ */ React74.createElement(Grid19, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React74.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React69.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React74.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React69.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React69.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React69.createElement(
+  ))), /* @__PURE__ */ React74.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React74.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React69.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React74.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React82 from "react";
+import * as React87 from "react";
 import { useRef as useRef21 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { bindTrigger as bindTrigger5, Box as Box17, IconButton as IconButton8, Typography as Typography6, usePopupState as usePopupState7 } from "@elementor/ui";
-import { __ as __41 } from "@wordpress/i18n";
+import { bindTrigger as bindTrigger4, Box as Box16, IconButton as IconButton7, Typography as Typography5, usePopupState as usePopupState6 } from "@elementor/ui";
+import { __ as __43 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
 import {
@@ -4579,94 +4420,94 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-base-control.tsx
-import * as React72 from "react";
+import * as React77 from "react";
 import { PopoverHeader as PopoverHeader3 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, Box as Box14, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
-import { __ as __34 } from "@wordpress/i18n";
+import { bindPopover as bindPopover5, Box as Box13, Divider as Divider4, Popover as Popover5 } from "@elementor/ui";
+import { __ as __36 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-import * as React70 from "react";
+import * as React75 from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid19, Stack as Stack15 } from "@elementor/ui";
-import { __ as __32 } from "@wordpress/i18n";
+import { Grid as Grid20, Stack as Stack14 } from "@elementor/ui";
+import { __ as __34 } from "@wordpress/i18n";
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
-  label: __32("Perspective", "elementor"),
+  label: __34("Perspective", "elementor"),
   bind: "perspective",
   units: ["px", "em", "rem", "vw", "vh"]
 };
 var CHILDREN_PERSPECTIVE_FIELDS = [
   {
-    label: __32("Origin X", "elementor"),
+    label: __34("Origin X", "elementor"),
     bind: "x",
     units: ORIGIN_UNITS
   },
   {
-    label: __32("Origin Y", "elementor"),
+    label: __34("Origin Y", "elementor"),
     bind: "y",
     units: ORIGIN_UNITS
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React70.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React70.createElement(ControlFormLabel, null, __32("Children perspective", "elementor")), /* @__PURE__ */ React70.createElement(PerspectiveControl, null), /* @__PURE__ */ React70.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React75.createElement(Stack14, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, __34("Children perspective", "elementor")), /* @__PURE__ */ React75.createElement(PerspectiveControl, null), /* @__PURE__ */ React75.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React70.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React70.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveControl = () => /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React75.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React75.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React70.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React70.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React70.createElement(ControlFields, { control }))));
+  return /* @__PURE__ */ React75.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React75.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = React70.useRef(null);
-  return /* @__PURE__ */ React70.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React70.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React70.createElement(Grid19, { item: true, xs: 6 }, /* @__PURE__ */ React70.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  const rowRef = React75.useRef(null);
+  return /* @__PURE__ */ React75.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React75.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React75.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React75.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React71 from "react";
+import * as React76 from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid20, Stack as Stack16 } from "@elementor/ui";
-import { __ as __33 } from "@wordpress/i18n";
+import { Grid as Grid21, Stack as Stack15 } from "@elementor/ui";
+import { __ as __35 } from "@wordpress/i18n";
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
 var TRANSFORM_ORIGIN_FIELDS = [
   {
-    label: __33("Origin X", "elementor"),
+    label: __35("Origin X", "elementor"),
     bind: "x",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __33("Origin Y", "elementor"),
+    label: __35("Origin Y", "elementor"),
     bind: "y",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __33("Origin Z", "elementor"),
+    label: __35("Origin Z", "elementor"),
     bind: "z",
     units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React71.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, __33("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React71.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React76.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, __35("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React76.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = React71.useRef(null);
-  return /* @__PURE__ */ React71.createElement(PropProvider, { ...context }, /* @__PURE__ */ React71.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React71.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React71.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React71.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
+  const rowRef = React76.useRef(null);
+  return /* @__PURE__ */ React76.createElement(PropProvider, { ...context }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React76.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React76.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })))));
 };
 
 // src/controls/transform-control/transform-base-control.tsx
-var SIZE8 = "tiny";
+var SIZE7 = "tiny";
 var TransformBaseControl = ({
   popupState,
   anchorRef
 }) => {
-  const popupProps = bindPopover6({
+  const popupProps = bindPopover5({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React72.createElement(
-    Popover6,
+  return /* @__PURE__ */ React77.createElement(
+    Popover5,
     {
       disablePortal: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
@@ -4680,37 +4521,37 @@ var TransformBaseControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React72.createElement(
+    /* @__PURE__ */ React77.createElement(
       PopoverHeader3,
       {
-        title: __34("Base Transform", "elementor"),
+        title: __36("Base Transform", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React72.createElement(AdjustmentsIcon, { fontSize: SIZE8 })
+        icon: /* @__PURE__ */ React77.createElement(AdjustmentsIcon, { fontSize: SIZE7 })
       }
     ),
-    /* @__PURE__ */ React72.createElement(Divider4, null),
-    /* @__PURE__ */ React72.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React72.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React72.createElement(TransformOriginControl, null)), /* @__PURE__ */ React72.createElement(Box14, { sx: { my: 0.5 } }, /* @__PURE__ */ React72.createElement(Divider4, null)), /* @__PURE__ */ React72.createElement(ChildrenPerspectiveControl, null))
+    /* @__PURE__ */ React77.createElement(Divider4, null),
+    /* @__PURE__ */ React77.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React77.createElement(TransformOriginControl, null)), /* @__PURE__ */ React77.createElement(Box13, { sx: { my: 0.5 } }, /* @__PURE__ */ React77.createElement(Divider4, null)), /* @__PURE__ */ React77.createElement(ChildrenPerspectiveControl, null))
   );
 };
 
 // src/controls/transform-control/transform-content.tsx
-import * as React79 from "react";
-import { Box as Box15, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
-import { __ as __39 } from "@wordpress/i18n";
+import * as React84 from "react";
+import { Box as Box14, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { __ as __41 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React74 from "react";
+import * as React79 from "react";
 import { useRef as useRef16 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
-import { Grid as Grid22 } from "@elementor/ui";
-import { __ as __35 } from "@wordpress/i18n";
+import { Grid as Grid23 } from "@elementor/ui";
+import { __ as __37 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React73 from "react";
-import { Grid as Grid21 } from "@elementor/ui";
+import * as React78 from "react";
+import { Grid as Grid22 } from "@elementor/ui";
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
-  return /* @__PURE__ */ React73.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React73.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React73.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(ControlLabel, null, label)), /* @__PURE__ */ React73.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React73.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React73.createElement(
+  return /* @__PURE__ */ React78.createElement(Grid22, { item: true, xs: 12 }, /* @__PURE__ */ React78.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React78.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(ControlLabel, null, label)), /* @__PURE__ */ React78.createElement(Grid22, { item: true, xs: 6 }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React78.createElement(
     SizeControl,
     {
       anchorRef,
@@ -4725,28 +4566,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: __35("Move X", "elementor"),
+    label: __37("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React74.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React79.createElement(ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
-    label: __35("Move Y", "elementor"),
+    label: __37("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React74.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React79.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
-    label: __35("Move Z", "elementor"),
+    label: __37("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React74.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React79.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
   const rowRefs = [useRef16(null), useRef16(null), useRef16(null)];
-  return /* @__PURE__ */ React74.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React74.createElement(PropProvider, { ...context }, /* @__PURE__ */ React74.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React74.createElement(
+  return /* @__PURE__ */ React79.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React79.createElement(PropProvider, { ...context }, /* @__PURE__ */ React79.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React79.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -4759,34 +4600,34 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-import * as React75 from "react";
+import * as React80 from "react";
 import { useRef as useRef17 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
-import { Grid as Grid23 } from "@elementor/ui";
-import { __ as __36 } from "@wordpress/i18n";
+import { Grid as Grid24 } from "@elementor/ui";
+import { __ as __38 } from "@wordpress/i18n";
 var rotateAxisControls = [
   {
-    label: __36("Rotate X", "elementor"),
+    label: __38("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React75.createElement(Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React80.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
-    label: __36("Rotate Y", "elementor"),
+    label: __38("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React75.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React80.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
-    label: __36("Rotate Z", "elementor"),
+    label: __38("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React75.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React80.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
   const rowRefs = [useRef17(null), useRef17(null), useRef17(null)];
-  return /* @__PURE__ */ React75.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React75.createElement(PropProvider, { ...context }, /* @__PURE__ */ React75.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React75.createElement(
+  return /* @__PURE__ */ React80.createElement(Grid24, { container: true, spacing: 1.5 }, /* @__PURE__ */ React80.createElement(PropProvider, { ...context }, /* @__PURE__ */ React80.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React80.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -4798,68 +4639,68 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-import * as React77 from "react";
+import * as React82 from "react";
 import { useRef as useRef18 } 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 Grid25 } from "@elementor/ui";
-import { __ as __37 } from "@wordpress/i18n";
+import { Grid as Grid26 } from "@elementor/ui";
+import { __ as __39 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-import * as React76 from "react";
-import { Grid as Grid24 } from "@elementor/ui";
+import * as React81 from "react";
+import { Grid as Grid25 } from "@elementor/ui";
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React76.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React76.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React76.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(ControlLabel, null, label)), /* @__PURE__ */ React76.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React76.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React76.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React81.createElement(Grid25, { item: true, xs: 12 }, /* @__PURE__ */ React81.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React81.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React81.createElement(ControlLabel, null, label)), /* @__PURE__ */ React81.createElement(Grid25, { item: true, xs: 6 }, /* @__PURE__ */ React81.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React81.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var scaleAxisControls = [
   {
-    label: __37("Scale X", "elementor"),
+    label: __39("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React77.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React82.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
-    label: __37("Scale Y", "elementor"),
+    label: __39("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React77.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React82.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
-    label: __37("Scale Z", "elementor"),
+    label: __39("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React77.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React82.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
   const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
-  return /* @__PURE__ */ React77.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React77.createElement(PropProvider, { ...context }, /* @__PURE__ */ React77.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React77.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  return /* @__PURE__ */ React82.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React82.createElement(PropProvider, { ...context }, /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React82.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-import * as React78 from "react";
+import * as React83 from "react";
 import { useRef as useRef19 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
-import { Grid as Grid26 } from "@elementor/ui";
-import { __ as __38 } from "@wordpress/i18n";
+import { Grid as Grid27 } from "@elementor/ui";
+import { __ as __40 } from "@wordpress/i18n";
 var skewAxisControls = [
   {
-    label: __38("Skew X", "elementor"),
+    label: __40("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React78.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React83.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
-    label: __38("Skew Y", "elementor"),
+    label: __40("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React78.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React83.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
   const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
-  return /* @__PURE__ */ React78.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React78.createElement(PropProvider, { ...context }, /* @__PURE__ */ React78.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React78.createElement(
+  return /* @__PURE__ */ React83.createElement(Grid27, { container: true, spacing: 1.5 }, /* @__PURE__ */ React83.createElement(PropProvider, { ...context }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React83.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -4964,7 +4805,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React79.createElement(PopoverContent, null, /* @__PURE__ */ React79.createElement(Box15, { sx: { width: "100%" } }, /* @__PURE__ */ React79.createElement(Box15, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React79.createElement(
+  return /* @__PURE__ */ React84.createElement(PopoverContent, null, /* @__PURE__ */ React84.createElement(Box14, { sx: { width: "100%" } }, /* @__PURE__ */ React84.createElement(Box14, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React84.createElement(
     Tabs2,
     {
       size: "small",
@@ -4975,37 +4816,37 @@ var TransformContent = () => {
         }
       },
       ...getTabsProps(),
-      "aria-label": __39("Transform", "elementor")
+      "aria-label": __41("Transform", "elementor")
     },
-    /* @__PURE__ */ React79.createElement(Tab2, { label: __39("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React79.createElement(Tab2, { label: __39("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React79.createElement(Tab2, { label: __39("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React79.createElement(Tab2, { label: __39("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React79.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React79.createElement(Move, null)), /* @__PURE__ */ React79.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React79.createElement(Scale, null)), /* @__PURE__ */ React79.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React79.createElement(Rotate, null)), /* @__PURE__ */ React79.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React79.createElement(Skew, null))));
+    /* @__PURE__ */ React84.createElement(Tab2, { label: __41("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React84.createElement(Tab2, { label: __41("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React84.createElement(Tab2, { label: __41("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React84.createElement(Tab2, { label: __41("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React84.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React84.createElement(Move, null)), /* @__PURE__ */ React84.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React84.createElement(Scale, null)), /* @__PURE__ */ React84.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React84.createElement(Rotate, null)), /* @__PURE__ */ React84.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React84.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React80 from "react";
+import * as React85 from "react";
 import { ArrowsMaximizeIcon as ArrowsMaximizeIcon2, ExpandIcon, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React80.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+      return /* @__PURE__ */ React85.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React80.createElement(ExpandIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React85.createElement(ExpandIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React80.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React85.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React80.createElement(SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React85.createElement(SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-import * as React81 from "react";
-import { Box as Box16 } from "@elementor/ui";
-import { __ as __40 } from "@wordpress/i18n";
+import * as React86 from "react";
+import { Box as Box15 } from "@elementor/ui";
+import { __ as __42 } 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;
@@ -5026,44 +4867,44 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React81.createElement(Label2, { label: __40("Move", "elementor"), value: transformMoveValue(value) });
+      return /* @__PURE__ */ React86.createElement(Label2, { label: __42("Move", "elementor"), value: transformMoveValue(value) });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React81.createElement(Label2, { label: __40("Scale", "elementor"), value: transformScaleValue(value) });
+      return /* @__PURE__ */ React86.createElement(Label2, { label: __42("Scale", "elementor"), value: transformScaleValue(value) });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React81.createElement(Label2, { label: __40("Rotate", "elementor"), value: transformRotateValue(value) });
+      return /* @__PURE__ */ React86.createElement(Label2, { label: __42("Rotate", "elementor"), value: transformRotateValue(value) });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React81.createElement(Label2, { label: __40("Skew", "elementor"), value: transformSkewValue(value) });
+      return /* @__PURE__ */ React86.createElement(Label2, { label: __42("Skew", "elementor"), value: transformSkewValue(value) });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React81.createElement(Box16, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React86.createElement(Box15, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-var SIZE9 = "tiny";
+var SIZE8 = "tiny";
 var TransformRepeaterControl = createControl(() => {
   const context = useBoundProp(transformPropTypeUtil);
   const headerRef = useRef21(null);
-  const popupState = usePopupState7({ variant: "popover" });
+  const popupState = usePopupState6({ variant: "popover" });
   const repeaterBindKey = "transform-functions";
   injectIntoRepeaterHeaderActions({
     id: "transform-base-control",
-    component: () => /* @__PURE__ */ React82.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey }),
+    component: () => /* @__PURE__ */ React87.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey }),
     options: { overwrite: true }
   });
-  return /* @__PURE__ */ React82.createElement(PropProvider, { ...context }, /* @__PURE__ */ React82.createElement(TransformBaseControl, { popupState, anchorRef: headerRef }), /* @__PURE__ */ React82.createElement(PropKeyProvider, { bind: repeaterBindKey }, /* @__PURE__ */ React82.createElement(Repeater2, { headerRef })));
+  return /* @__PURE__ */ React87.createElement(PropProvider, { ...context }, /* @__PURE__ */ React87.createElement(TransformBaseControl, { popupState, anchorRef: headerRef }), /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: repeaterBindKey }, /* @__PURE__ */ React87.createElement(Repeater2, { headerRef })));
 });
-var ToolTip = /* @__PURE__ */ React82.createElement(
-  Box17,
+var ToolTip = /* @__PURE__ */ React87.createElement(
+  Box16,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React82.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React82.createElement(Typography6, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __41("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React87.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React87.createElement(Typography5, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __43("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({ headerRef }) => {
   const transformFunctionsContext = useBoundProp(transformFunctionsPropTypeUtil);
@@ -5073,13 +4914,13 @@ var Repeater2 = ({ headerRef }) => {
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue();
-  return /* @__PURE__ */ React82.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React87.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React87.createElement(
     UnstableRepeater,
     {
       initial: getInitialValue() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React82.createElement(Header, { label: __41("Transform", "elementor"), ref: headerRef }, /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React87.createElement(Header, { label: __43("Transform", "elementor"), ref: headerRef }, /* @__PURE__ */ React87.createElement(
       TooltipAddItemAction,
       {
         disabled: shouldDisableAddItem,
@@ -5087,8 +4928,8 @@ var Repeater2 = ({ headerRef }) => {
         enableTooltip: shouldDisableAddItem
       }
     )),
-    /* @__PURE__ */ React82.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React82.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React82.createElement(DisableItemAction, null), /* @__PURE__ */ React82.createElement(RemoveItemAction, null)),
-    /* @__PURE__ */ React82.createElement(EditItemPopover, null, /* @__PURE__ */ React82.createElement(TransformContent, null))
+    /* @__PURE__ */ React87.createElement(ItemsContainer, { itemTemplate: /* @__PURE__ */ React87.createElement(Item, { Icon: TransformIcon, Label: TransformLabel }) }, /* @__PURE__ */ React87.createElement(DisableItemAction, null), /* @__PURE__ */ React87.createElement(RemoveItemAction, null)),
+    /* @__PURE__ */ React87.createElement(EditItemPopover, null, /* @__PURE__ */ React87.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -5096,27 +4937,27 @@ var TransformBasePopoverTrigger = ({
   repeaterBindKey
 }) => {
   const { bind } = useBoundProp();
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React82.createElement(IconButton8, { size: SIZE9, "aria-label": __41("Base Transform", "elementor"), ...bindTrigger5(popupState) }, /* @__PURE__ */ React82.createElement(AdjustmentsIcon2, { fontSize: SIZE9 }));
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React87.createElement(IconButton7, { size: SIZE8, "aria-label": __43("Base Transform", "elementor"), ...bindTrigger4(popupState) }, /* @__PURE__ */ React87.createElement(AdjustmentsIcon2, { fontSize: SIZE8 }));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-import * as React85 from "react";
-import { useEffect as useEffect9, useState as useState15 } from "react";
+import * as React90 from "react";
+import { useEffect as useEffect8, useState as useState14 } from "react";
 import { selectionSizePropTypeUtil as selectionSizePropTypeUtil2 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle2, Box as Box19, Typography as Typography7 } from "@elementor/ui";
-import { __ as __44 } from "@wordpress/i18n";
+import { Alert as Alert2, AlertTitle as AlertTitle2, Box as Box18, Typography as Typography6 } from "@elementor/ui";
+import { __ as __46 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
-import * as React83 from "react";
-import { useMemo as useMemo7, useRef as useRef22 } from "react";
+import * as React88 from "react";
+import { useMemo as useMemo8, useRef as useRef22 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid27 } from "@elementor/ui";
+import { Grid as Grid28 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
     const rowRef = useRef22(null);
-    const currentSizeConfig = useMemo7(() => {
+    const currentSizeConfig = useMemo8(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -5127,7 +4968,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React83.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React83.createElement(Grid27, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React83.createElement(Grid27, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React83.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React83.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React83.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(Grid27, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React83.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React83.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React83.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React83.createElement(
+    return /* @__PURE__ */ React88.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React88.createElement(Grid28, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React88.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React88.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React88.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React88.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(Grid28, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React88.createElement(ControlFormLabel, null, sizeLabel)), /* @__PURE__ */ React88.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React88.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -5140,12 +4981,12 @@ var SelectionSizeControl = createControl(
 );
 
 // src/controls/transition-control/data.ts
-import { __ as __42 } from "@wordpress/i18n";
+import { __ as __44 } from "@wordpress/i18n";
 var initialTransitionValue = {
   selection: {
     $$type: "key-value",
     value: {
-      key: { value: __42("All properties", "elementor"), $$type: "string" },
+      key: { value: __44("All properties", "elementor"), $$type: "string" },
       value: { value: "all", $$type: "string" }
     }
   },
@@ -5153,9 +4994,9 @@ var initialTransitionValue = {
 };
 var transitionProperties = [
   {
-    label: __42("Default", "elementor"),
+    label: __44("Default", "elementor"),
     type: "category",
-    properties: [{ label: __42("All properties", "elementor"), value: "all" }]
+    properties: [{ label: __44("All properties", "elementor"), value: "all" }]
   }
 ];
 var transitionsItemsList = transitionProperties.map((category) => ({
@@ -5164,12 +5005,12 @@ var transitionsItemsList = transitionProperties.map((category) => ({
 }));
 
 // src/controls/transition-control/transition-selector.tsx
-import * as React84 from "react";
+import * as React89 from "react";
 import { useRef as useRef23 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box18, Popover as Popover7, UnstableTag as UnstableTag4, usePopupState as usePopupState8 } from "@elementor/ui";
-import { __ as __43 } from "@wordpress/i18n";
+import { bindPopover as bindPopover6, bindTrigger as bindTrigger5, Box as Box17, Popover as Popover6, UnstableTag as UnstableTag3, usePopupState as usePopupState7 } from "@elementor/ui";
+import { __ as __45 } from "@wordpress/i18n";
 var toTransitionSelectorValue = (label) => {
   for (const category of transitionProperties) {
     const property = category.properties.find((prop) => prop.label === label);
@@ -5196,7 +5037,7 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
     key: { value: transitionLabel }
   } = value;
   const defaultRef = useRef23(null);
-  const popoverState = usePopupState8({ variant: "popover" });
+  const popoverState = usePopupState7({ variant: "popover" });
   const getItemList = () => {
     const recentItems = recentlyUsedList.map((item) => findByValue(item)).filter((item) => !!item);
     const filteredItems = transitionsItemsList.map((category) => {
@@ -5212,7 +5053,7 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
     return [
       first,
       {
-        label: __43("Recently Used", "elementor"),
+        label: __45("Recently Used", "elementor"),
         items: recentItems
       },
       ...rest
@@ -5236,27 +5077,27 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React84.createElement(Box18, { ref: defaultRef }, /* @__PURE__ */ React84.createElement(
-    UnstableTag4,
+  return /* @__PURE__ */ React89.createElement(Box17, { ref: defaultRef }, /* @__PURE__ */ React89.createElement(
+    UnstableTag3,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React84.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
-      ...bindTrigger6(popoverState),
+      endIcon: /* @__PURE__ */ React89.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      ...bindTrigger5(popoverState),
       fullWidth: true
     }
-  ), /* @__PURE__ */ React84.createElement(
-    Popover7,
+  ), /* @__PURE__ */ React89.createElement(
+    Popover6,
     {
       disablePortal: true,
       disableScrollLock: true,
-      ...bindPopover7(popoverState),
+      ...bindPopover6(popoverState),
       anchorReference: "anchorPosition",
       anchorPosition: getAnchorPosition(),
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React84.createElement(
+    /* @__PURE__ */ React89.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -5264,7 +5105,7 @@ var TransitionSelector = ({ recentlyUsedList = [] }) => {
         onItemChange: handleTransitionPropertyChange,
         onClose: popoverState.close,
         sectionWidth: 268,
-        title: __43("Transition Property", "elementor"),
+        title: __45("Transition Property", "elementor"),
         icon: VariationsIcon
       }
     )
@@ -5279,8 +5120,8 @@ var DURATION_CONFIG = {
 };
 var getSelectionSizeProps = (recentlyUsedList) => {
   return {
-    selectionLabel: __44("Type", "elementor"),
-    sizeLabel: __44("Duration", "elementor"),
+    selectionLabel: __46("Type", "elementor"),
+    sizeLabel: __46("Duration", "elementor"),
     selectionConfig: {
       component: TransitionSelector,
       props: {
@@ -5307,7 +5148,7 @@ function getChildControlConfig(recentlyUsedList) {
     props: getSelectionSizeProps(recentlyUsedList)
   };
 }
-var disableAddItemTooltipContent = /* @__PURE__ */ React85.createElement(
+var disableAddItemTooltipContent = /* @__PURE__ */ React90.createElement(
   Alert2,
   {
     sx: {
@@ -5315,10 +5156,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React85.createElement(
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React85.createElement(InfoCircleFilledIcon3, null)
+    icon: /* @__PURE__ */ React90.createElement(InfoCircleFilledIcon3, null)
   },
-  /* @__PURE__ */ React85.createElement(AlertTitle2, null, __44("Transitions", "elementor")),
-  /* @__PURE__ */ React85.createElement(Box19, { component: "span" }, /* @__PURE__ */ React85.createElement(Typography7, { variant: "body2" }, __44("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React90.createElement(AlertTitle2, null, __46("Transitions", "elementor")),
+  /* @__PURE__ */ React90.createElement(Box18, { component: "span" }, /* @__PURE__ */ React90.createElement(Typography6, { variant: "body2" }, __46("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -5326,17 +5167,17 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState15([]);
-    useEffect9(() => {
+    const [recentlyUsedList, setRecentlyUsedList] = useState14([]);
+    useEffect8(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    return /* @__PURE__ */ React85.createElement(
+    return /* @__PURE__ */ React90.createElement(
       RepeatableControl,
       {
-        label: __44("Transitions", "elementor"),
-        repeaterLabel: __44("Transitions", "elementor"),
+        label: __46("Transitions", "elementor"),
+        repeaterLabel: __46("Transitions", "elementor"),
         patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
-        placeholder: __44("Empty Transition", "elementor"),
+        placeholder: __46("Empty Transition", "elementor"),
         showDuplicate: false,
         showToggle: true,
         initialValues: initialTransitionValue,
@@ -5353,14 +5194,14 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/components/css-code-editor/css-editor.tsx
-import * as React87 from "react";
+import * as React92 from "react";
 import { useActiveBreakpoint as useActiveBreakpoint2 } from "@elementor/editor-responsive";
 import { useTheme as useTheme2 } from "@elementor/ui";
 import { Editor } from "@monaco-editor/react";
 
 // src/components/css-code-editor/css-editor.styles.ts
-import { Box as Box20, Button as Button5, styled as styled8 } from "@elementor/ui";
-var EditorWrapper = styled8(Box20)`
+import { Box as Box19, Button as Button5, styled as styled9 } from "@elementor/ui";
+var EditorWrapper = styled9(Box19)`
 	border: 1px solid var( --e-a-border-color );
 	border-radius: 8px;
 	padding: 10px 12px;
@@ -5371,7 +5212,7 @@ var EditorWrapper = styled8(Box20)`
 		z-index: 99999999 !important;
 	}
 `;
-var ResizeHandle = styled8(Button5)`
+var ResizeHandle = styled9(Button5)`
 	position: absolute;
 	bottom: 0;
 	left: 0;
@@ -5404,25 +5245,25 @@ var ResizeHandle = styled8(Button5)`
 `;
 
 // src/components/css-code-editor/css-validation.ts
-import { __ as __45 } from "@wordpress/i18n";
+import { __ as __47 } from "@wordpress/i18n";
 var forbiddenPatterns = [
   {
     pattern: ":hover",
-    message: __45(
+    message: __47(
       "The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
       "elementor"
     )
   },
   {
     pattern: ":active",
-    message: __45(
+    message: __47(
       "The use of pseudo-states is not permitted. Instead, switch to the desired pseudo state and add your custom code there.",
       "elementor"
     )
   },
   {
     pattern: "@media",
-    message: __45(
+    message: __47(
       "The use of @media is not permitted. Instead, switch to the desired breakpoint and add your custom code there.",
       "elementor"
     )
@@ -5461,9 +5302,9 @@ function validate(editor, monaco) {
 }
 
 // src/components/css-code-editor/resize-handle.tsx
-import * as React86 from "react";
+import * as React91 from "react";
 var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
-  const handleResizeMove = React86.useCallback(
+  const handleResizeMove = React91.useCallback(
     (e) => {
       const container = containerRef.current;
       if (!container) {
@@ -5476,11 +5317,11 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [containerRef, onResize, onHeightChange]
   );
-  const handleResizeEnd = React86.useCallback(() => {
+  const handleResizeEnd = React91.useCallback(() => {
     document.removeEventListener("mousemove", handleResizeMove);
     document.removeEventListener("mouseup", handleResizeEnd);
   }, [handleResizeMove]);
-  const handleResizeStart = React86.useCallback(
+  const handleResizeStart = React91.useCallback(
     (e) => {
       e.preventDefault();
       e.stopPropagation();
@@ -5489,13 +5330,13 @@ var ResizeHandleComponent = ({ onResize, containerRef, onHeightChange }) => {
     },
     [handleResizeMove, handleResizeEnd]
   );
-  React86.useEffect(() => {
+  React91.useEffect(() => {
     return () => {
       document.removeEventListener("mousemove", handleResizeMove);
       document.removeEventListener("mouseup", handleResizeEnd);
     };
   }, [handleResizeMove, handleResizeEnd]);
-  return /* @__PURE__ */ React86.createElement(
+  return /* @__PURE__ */ React91.createElement(
     ResizeHandle,
     {
       onMouseDown: handleResizeStart,
@@ -5579,21 +5420,21 @@ var createEditorDidMountHandler = (editorRef, monacoRef, debounceTimer, onChange
 };
 var CssEditor = ({ value, onChange }) => {
   const theme = useTheme2();
-  const containerRef = React87.useRef(null);
-  const editorRef = React87.useRef(null);
-  const monacoRef = React87.useRef(null);
-  const debounceTimer = React87.useRef(null);
+  const containerRef = React92.useRef(null);
+  const editorRef = React92.useRef(null);
+  const monacoRef = React92.useRef(null);
+  const debounceTimer = React92.useRef(null);
   const activeBreakpoint = useActiveBreakpoint2();
-  const handleResize = React87.useCallback(() => {
+  const handleResize = React92.useCallback(() => {
     editorRef.current?.layout();
   }, []);
-  const handleHeightChange = React87.useCallback((height) => {
+  const handleHeightChange = React92.useCallback((height) => {
     if (containerRef.current) {
       containerRef.current.style.height = `${height}px`;
     }
   }, []);
   const handleEditorDidMount = createEditorDidMountHandler(editorRef, monacoRef, debounceTimer, onChange);
-  React87.useEffect(() => {
+  React92.useEffect(() => {
     const timerRef = debounceTimer;
     return () => {
       const timer = timerRef.current;
@@ -5602,7 +5443,7 @@ var CssEditor = ({ value, onChange }) => {
       }
     };
   }, []);
-  return /* @__PURE__ */ React87.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React92.createElement(EditorWrapper, { ref: containerRef }, /* @__PURE__ */ React92.createElement(
     Editor,
     {
       key: activeBreakpoint,
@@ -5623,7 +5464,7 @@ var CssEditor = ({ value, onChange }) => {
         fixedOverflowWidgets: true
       }
     }
-  ), /* @__PURE__ */ React87.createElement(
+  ), /* @__PURE__ */ React92.createElement(
     ResizeHandleComponent,
     {
       onResize: handleResize,