@elementor/editor-controls 4.4.0-1120 → 4.4.0-1122

package/dist/index.mjs

@@ -381,7 +381,7 @@ function ControlActions({ children }) {
   if (items2.length === 0 || disabled) {
     return children;
   }
-  const menuItems = items2.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React10.createElement(MenuItem4, { key: id }));
+  const menuItems = items2.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React10.createElement(MenuItem3, { key: id }));
   return /* @__PURE__ */ React10.createElement(FloatingActionsBar, { actions: menuItems }, children);
 }
 
@@ -5376,11 +5376,11 @@ var AspectRatioControl = createControl(({ label }) => {
 });
 
 // src/controls/svg-media-control.tsx
-import * as React88 from "react";
+import * as React89 from "react";
 import { useEffect as useEffect16, useRef as useRef17, useState as useState19 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
-import { Box as Box21, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack17, styled as styled11, usePopupState as usePopupState10 } from "@elementor/ui";
+import { Box as Box21, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack16, styled as styled11, usePopupState as usePopupState9 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
 import { __ as __38 } from "@wordpress/i18n";
 
@@ -5460,7 +5460,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 }
 
 // src/controls/icon-library/icon-library-popover.tsx
-import * as React85 from "react";
+import * as React86 from "react";
 import { useMemo as useMemo12, useState as useState18 } from "react";
 import {
   PopoverBody as PopoverBody2,
@@ -5469,9 +5469,9 @@ import {
   SearchField as SearchField2,
   StyledMenuList
 } from "@elementor/editor-ui";
-import { ComponentsIcon } from "@elementor/icons";
+import { LibraryIcon as LibraryIcon2 } from "@elementor/icons";
 import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
-import { Box as Box18, CircularProgress as CircularProgress3, Divider as Divider5, Link as Link3, Stack as Stack15, styled as styled9, Typography as Typography9 } from "@elementor/ui";
+import { Box as Box18, CircularProgress as CircularProgress3, Divider as Divider5, Link as Link3, Stack as Stack14, styled as styled9, Typography as Typography8 } from "@elementor/ui";
 import { useDebounceState } from "@elementor/utils";
 import { __ as __35 } from "@wordpress/i18n";
 
@@ -6425,7 +6425,15 @@ var FontAwesomeGlyph = ({ icon, size, color, label }) => {
 // src/controls/icon-library/icon-library-filter.tsx
 import * as React82 from "react";
 import { useId as useId4 } from "react";
-import { CheckIcon, FilterIcon as FilterIcon2, LibraryIcon, ListIcon, StarFilledIcon, StarIcon } from "@elementor/icons";
+import {
+  CheckIcon,
+  FilterIcon as FilterIcon2,
+  LibraryIcon,
+  MenuIcon,
+  RosetteDiscountCheckIcon,
+  StarFilledIcon,
+  StarIcon
+} from "@elementor/icons";
 import {
   bindMenu as bindMenu3,
   bindToggle as bindToggle2,
@@ -6448,21 +6456,22 @@ var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
 // src/controls/icon-library/icon-library-filter.tsx
 var FILTER_MENU_WIDTH = 280;
 var FILTER_INDICATOR_SIZE = 6;
-var FILTER_INDICATOR_OFFSET = 4;
+var FILTER_INDICATOR_CORNER_OFFSET = -(FILTER_INDICATOR_SIZE / 2);
 var FILTER_TYPE_ALL = "all";
 var FILTER_TYPE_GROUP = "group";
 var FILTER_TYPE_ITEM = "item";
 var FILTER_ICONS = {
-  list: ListIcon,
+  list: MenuIcon,
   star: StarIcon,
   "star-filled": StarFilledIcon,
-  library: LibraryIcon
+  library: LibraryIcon,
+  rosette: RosetteDiscountCheckIcon
 };
 var DEFAULT_FILTER = [
   { type: FILTER_TYPE_ALL, label: "All icons", icon: "list" },
   { type: FILTER_TYPE_ITEM, value: "fa-regular", label: "Font Awesome - Regular", icon: "star" },
   { type: FILTER_TYPE_ITEM, value: "fa-solid", label: "Font Awesome - Solid", icon: "star-filled" },
-  { type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "library" }
+  { type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "rosette" }
 ];
 var IconLibraryFilter = ({ value, onChange }) => {
   const popupId = useId4();
@@ -6494,7 +6503,7 @@ var IconLibraryFilter = ({ value, onChange }) => {
         value: "filter",
         size: "tiny",
         selected: popupState.isOpen,
-        sx: { position: "relative", flexShrink: 0 },
+        sx: { position: "relative", flexShrink: 0, overflow: "visible" },
         ...bindToggle2(popupState),
         "aria-expanded": popupState.isOpen
       },
@@ -6506,12 +6515,12 @@ var IconLibraryFilter = ({ value, onChange }) => {
           "aria-hidden": "true",
           sx: {
             position: "absolute",
-            insetBlockStart: FILTER_INDICATOR_OFFSET,
-            insetInlineEnd: FILTER_INDICATOR_OFFSET,
+            insetBlockStart: FILTER_INDICATOR_CORNER_OFFSET,
+            insetInlineEnd: FILTER_INDICATOR_CORNER_OFFSET,
             width: FILTER_INDICATOR_SIZE,
             height: FILTER_INDICATOR_SIZE,
             borderRadius: "50%",
-            bgcolor: "secondary.main"
+            bgcolor: "text.primary"
           }
         }
       ) : null
@@ -6619,8 +6628,9 @@ var ICON_LIBRARY_GRID_MIN_CELL_SIZE = 52;
 var ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY = 1e3;
 var ICON_GLYPH_SIZE = 20;
 var GRID_OVERSCAN = 6;
-var GRID_COLUMN_GAP = 1;
-var GRID_HORIZONTAL_PADDING = 1;
+var GRID_CELL_GAP = 1;
+var GRID_HORIZONTAL_PADDING = 2;
+var GRID_VERTICAL_PADDING = 1.5;
 var HOME_END_KEYS = /* @__PURE__ */ new Set(["Home", "End"]);
 var getGridMetrics = (containerWidth, columnGap, inlinePadding) => {
   const availableWidth = containerWidth - inlinePadding;
@@ -6655,10 +6665,15 @@ var IconLibraryGrid = ({
   const [focusedIndex, setFocusedIndex] = useState17(selectedIndex >= 0 ? selectedIndex : 0);
   const [{ columnCount, cellSize }, setGridMetrics] = useState17(() => getGridMetrics(0, 0, 0));
   const rowCount = Math.ceil(items2.length / columnCount);
+  const cellGap = Number.parseFloat(theme.spacing(GRID_CELL_GAP));
+  const verticalPadding = Number.parseFloat(theme.spacing(GRID_VERTICAL_PADDING));
   const virtualizer = useVirtualizer({
     count: rowCount,
     getScrollElement: () => containerRef.current,
     estimateSize: () => cellSize,
+    gap: cellGap,
+    paddingStart: verticalPadding,
+    paddingEnd: verticalPadding,
     overscan: GRID_OVERSCAN
   });
   const focusedItem = items2[focusedIndex];
@@ -6674,9 +6689,10 @@ var IconLibraryGrid = ({
       return Math.min(current, items2.length - 1);
     });
     if (selectedIndex >= 0) {
-      virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount));
+      virtualizer.measure();
+      virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount), { align: "center" });
     }
-  }, [columnCount, items2, selectedIndex, selectedValue]);
+  }, [cellSize, columnCount, items2, selectedIndex, selectedValue]);
   useLayoutEffect3(() => {
     if (!shouldRestoreFocusRef.current || !focusedItem) {
       return;
@@ -6694,9 +6710,8 @@ var IconLibraryGrid = ({
       return;
     }
     const measureGrid = () => {
-      const columnGap = Number.parseFloat(theme.spacing(GRID_COLUMN_GAP));
       const inlinePadding = Number.parseFloat(theme.spacing(GRID_HORIZONTAL_PADDING)) * 2;
-      setGridMetrics(getGridMetrics(container.clientWidth, columnGap, inlinePadding));
+      setGridMetrics(getGridMetrics(container.clientWidth, cellGap, inlinePadding));
     };
     measureGrid();
     const resizeObserver = new ResizeObserver(measureGrid);
@@ -6704,7 +6719,7 @@ var IconLibraryGrid = ({
     return () => {
       resizeObserver.disconnect();
     };
-  }, [theme, items2.length]);
+  }, [theme, cellGap, items2.length]);
   useLayoutEffect3(() => {
     virtualizer.measure();
   }, [cellSize, columnCount]);
@@ -6801,7 +6816,7 @@ var IconLibraryGrid = ({
               transform: `translateY(${virtualRow.start}px)`,
               display: "grid",
               gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
-              gap: GRID_COLUMN_GAP,
+              gap: GRID_CELL_GAP,
               px: GRID_HORIZONTAL_PADDING,
               boxSizing: "border-box"
             }
@@ -6902,31 +6917,17 @@ var IconLibraryGrid = ({
 
 // src/controls/icon-library/icon-library-view-toggle.tsx
 import * as React84 from "react";
-import { useId as useId5 } from "react";
-import { CheckIcon as CheckIcon2, ListIcon as ListIcon2, WidgetsIcon } from "@elementor/icons";
-import {
-  bindMenu as bindMenu4,
-  bindToggle as bindToggle3,
-  Menu as Menu5,
-  MenuItem as MenuItem3,
-  Stack as Stack14,
-  ToggleButton as ToggleButton3,
-  Tooltip as Tooltip10,
-  Typography as Typography8,
-  usePopupState as usePopupState9
-} from "@elementor/ui";
+import { ListIcon, WidgetsIcon } from "@elementor/icons";
+import { IconButton as IconButton8, Tooltip as Tooltip10 } from "@elementor/ui";
 import { __ as __34 } from "@wordpress/i18n";
-var VIEW_MENU_WIDTH = 122;
+var HEADER_ACTION_GAP = 0.5;
 var IconLibraryViewToggle = ({ value, onChange }) => {
-  const popupId = useId5();
-  const popupState = usePopupState9({
-    variant: "popover",
-    popupId
-  });
   const isGrid = value === "grid";
-  const ViewIcon = isGrid ? WidgetsIcon : ListIcon2;
+  const nextView = isGrid ? "list" : "grid";
+  const ViewIcon = isGrid ? WidgetsIcon : ListIcon;
   const viewButtonLabel = isGrid ? __34("Grid view", "elementor") : __34("List view", "elementor");
-  return /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(
+  const viewButtonAction = isGrid ? __34("Switch to list view", "elementor") : __34("Switch to grid view", "elementor");
+  return /* @__PURE__ */ React84.createElement(
     Tooltip10,
     {
       title: viewButtonLabel,
@@ -6936,54 +6937,25 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
       disableInteractive: true
     },
     /* @__PURE__ */ React84.createElement(
-      ToggleButton3,
+      IconButton8,
       {
-        "aria-label": viewButtonLabel,
-        value: "view",
+        "aria-label": viewButtonAction,
         size: "tiny",
-        selected: popupState.isOpen,
-        sx: { flexShrink: 0 },
-        ...bindToggle3(popupState),
-        "aria-expanded": popupState.isOpen
+        onClick: () => onChange(nextView),
+        sx: { flexShrink: 0, mr: HEADER_ACTION_GAP }
       },
       /* @__PURE__ */ React84.createElement(ViewIcon, { fontSize: "tiny" })
     )
-  ), /* @__PURE__ */ React84.createElement(
-    Menu5,
-    {
-      ...bindMenu4(popupState),
-      MenuListProps: {
-        dense: true,
-        autoFocusItem: true,
-        "aria-label": __34("View", "elementor")
-      },
-      sx: { "& .MuiPaper-root": { minWidth: VIEW_MENU_WIDTH } }
-    },
-    /* @__PURE__ */ React84.createElement(
-      ViewMenuItem,
-      {
-        label: __34("List", "elementor"),
-        selected: value === "list",
-        onClick: () => {
-          onChange("list");
-          popupState.close();
-        }
-      }
-    ),
-    /* @__PURE__ */ React84.createElement(
-      ViewMenuItem,
-      {
-        label: __34("Grid", "elementor"),
-        selected: value === "grid",
-        onClick: () => {
-          onChange("grid");
-          popupState.close();
-        }
-      }
-    )
-  ));
+  );
 };
-var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(MenuItem3, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(Stack14, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(Typography8, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(CheckIcon2, { fontSize: "tiny", "aria-hidden": "true" }) : null));
+
+// src/controls/icon-library/svg-element-icon.tsx
+import * as React85 from "react";
+import { SvgIcon } from "@elementor/ui";
+var SVG_ELEMENT_ICON_PATH = "M502 772c10 0 19-6 24-14l201-351c4-9 4-19 0-27-5-9-14-14-24-14h-401c-10 0-19 5-24 14-4 8-5 18 0 27l201 351c5 8 14 14 23 14z m0-82l-154-270h309l-154 270z m-323-471c-6 0-12-2-16-7-4-4-7-10-7-16v-201c0-6 3-12 7-16 4-5 10-7 16-7h201c6 0 12 2 16 7 5 4 7 10 7 16v201c0 6-2 12-7 16-4 5-10 7-16 7h-201z m-54 32c14 14 34 22 54 22h201c20 0 40-8 55-22 14-15 22-35 22-55v-201c0-20-8-40-22-54-15-15-35-23-55-23h-201c-20 0-40 8-54 23-15 14-23 34-23 54v201c0 20 8 40 23 55z m480-30c34 33 79 52 126 52s92-19 125-52c34-33 52-78 52-125s-18-93-52-126c-33-33-78-52-125-52s-92 19-126 52c-33 33-52 78-52 126s19 92 52 125z m126-2c-33 0-64-13-87-36-24-23-37-55-37-87s13-65 37-88c23-23 54-36 87-36s64 13 87 36c23 23 36 55 36 88s-13 64-36 87c-23 23-54 36-87 36z";
+var SvgElementIcon = React85.forwardRef(
+  (props, ref) => /* @__PURE__ */ React85.createElement(SvgIcon, { viewBox: "0 0 1000 1000", ...props, ref }, /* @__PURE__ */ React85.createElement("g", { transform: "translate(0, 850) scale(1, -1)" }, /* @__PURE__ */ React85.createElement("path", { d: SVG_ELEMENT_ICON_PATH })))
+);
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
 import { useQuery as useQuery3 } from "@elementor/query";
@@ -6999,20 +6971,24 @@ function useFontAwesome7Catalog(enabled) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 var ICON_LIBRARY_POPOVER_WIDTH = 300;
-var ICON_LIBRARY_ROW_HEIGHT = 48;
 var ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY = 300;
 var ICON_LIBRARY_VIEW_STORAGE_KEY = "icon-library-view";
 var ICON_LIBRARY_VIEW_STORAGE_PREFIX = "editor-controls";
-var DEFAULT_ICON_LIBRARY_VIEW = "list";
+var DEFAULT_ICON_LIBRARY_VIEW = "grid";
 var isIconLibraryView = (value) => {
   return value === "grid" || value === "list";
 };
 var ICON_TILE_SIZE = 40;
+var ICON_LIBRARY_ROW_VERTICAL_PADDING = 0.5;
+var ICON_LIBRARY_ROW_VERTICAL_PADDING_PX = 4;
+var ICON_LIBRARY_ROW_HEIGHT = ICON_TILE_SIZE + ICON_LIBRARY_ROW_VERTICAL_PADDING_PX * 2;
 var ICON_GLYPH_SIZE2 = 20;
-var ICON_LIBRARY_INLINE_SPACING = 1;
+var ICON_LIBRARY_INLINE_SPACING = 2;
+var ICON_LIBRARY_SEARCH_PADDING_BOTTOM = 2;
+var ICON_LIBRARY_TITLE_SIZE = "14px";
 var CompactIconLibraryMenuList = styled9(StyledMenuList)(({ theme }) => ({
   '& > [role="option"]': {
-    padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
+    padding: theme.spacing(ICON_LIBRARY_ROW_VERTICAL_PADDING, ICON_LIBRARY_INLINE_SPACING)
   }
 }));
 var IconLibraryPopover = ({
@@ -7065,25 +7041,39 @@ var IconLibraryPopover = ({
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React85.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React86.createElement(
     PopoverHeader4,
     {
       title: __35("Icon library", "elementor"),
       onClose: handleClose,
-      icon: /* @__PURE__ */ React85.createElement(ComponentsIcon, { fontSize: "tiny" }),
-      actions: [/* @__PURE__ */ React85.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
-      sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
+      icon: /* @__PURE__ */ React86.createElement(LibraryIcon2, { fontSize: "tiny" }),
+      actions: [/* @__PURE__ */ React86.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
+      sx: {
+        pl: ICON_LIBRARY_INLINE_SPACING,
+        pr: 1,
+        "& .MuiTypography-subtitle2": { fontSize: ICON_LIBRARY_TITLE_SIZE }
+      }
     }
-  ), /* @__PURE__ */ React85.createElement(Stack15, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React85.createElement(
-    SearchField2,
+  ), /* @__PURE__ */ React86.createElement(
+    Stack14,
     {
-      value: searchInputValue,
-      onSearch: handleSearchChange,
-      placeholder: __35("Search", "elementor"),
-      id: "icon-library-search",
-      sx: { flex: 1, px: 0, pb: 0 }
-    }
-  ), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(Divider5, null), /* @__PURE__ */ React85.createElement(Box18, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
+      direction: "row",
+      alignItems: "center",
+      gap: 1,
+      sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: ICON_LIBRARY_SEARCH_PADDING_BOTTOM }
+    },
+    /* @__PURE__ */ React86.createElement(
+      SearchField2,
+      {
+        value: searchInputValue,
+        onSearch: handleSearchChange,
+        placeholder: __35("Search", "elementor"),
+        id: "icon-library-search",
+        sx: { flex: 1, px: 0, pb: 0 }
+      }
+    ),
+    /* @__PURE__ */ React86.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })
+  ), /* @__PURE__ */ React86.createElement(Divider5, null), /* @__PURE__ */ React86.createElement(Box18, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React86.createElement(
     IconLibraryContent,
     {
       isLoading,
@@ -7110,9 +7100,9 @@ var IconLibraryContent = ({
   onClearSearch
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ React85.createElement(IconLibraryLoadingState, null);
+    return /* @__PURE__ */ React86.createElement(IconLibraryLoadingState, null);
   }
-  const emptyState = /* @__PURE__ */ React85.createElement(
+  const emptyState = /* @__PURE__ */ React86.createElement(
     IconLibraryEmptyState,
     {
       searchValue,
@@ -7121,7 +7111,7 @@ var IconLibraryContent = ({
     }
   );
   if (view === "grid") {
-    return /* @__PURE__ */ React85.createElement(Box18, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
+    return /* @__PURE__ */ React86.createElement(Box18, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React86.createElement(
       IconLibraryGrid,
       {
         items: items2,
@@ -7132,7 +7122,7 @@ var IconLibraryContent = ({
       }
     ));
   }
-  return /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(
     PopoverMenuList2,
     {
       items: items2,
@@ -7147,20 +7137,20 @@ var IconLibraryContent = ({
     }
   );
 };
-var IconLibraryLoadingState = () => /* @__PURE__ */ React85.createElement(Stack15, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React85.createElement(CircularProgress3, { role: "progressbar", size: 24 }));
+var IconLibraryLoadingState = () => /* @__PURE__ */ React86.createElement(Stack14, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React86.createElement(CircularProgress3, { role: "progressbar", size: 24 }));
 var IconLibraryEmptyState = ({
   searchValue,
   isCatalogAvailable,
   onClear
 }) => {
   if (!isCatalogAvailable) {
-    return /* @__PURE__ */ React85.createElement(CatalogUnavailable, null);
+    return /* @__PURE__ */ React86.createElement(CatalogUnavailable, null);
   }
-  return /* @__PURE__ */ React85.createElement(NoResults, { searchValue, onClear });
+  return /* @__PURE__ */ React86.createElement(NoResults, { searchValue, onClear });
 };
 var IconLibraryRow = (item) => {
   const icon = item;
-  return /* @__PURE__ */ React85.createElement(Stack15, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React86.createElement(Stack14, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React86.createElement(
     Box18,
     {
       sx: {
@@ -7176,11 +7166,11 @@ var IconLibraryRow = (item) => {
         flexShrink: 0
       }
     },
-    /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
-  ), /* @__PURE__ */ React85.createElement(Typography9, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
+    /* @__PURE__ */ React86.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
+  ), /* @__PURE__ */ React86.createElement(Typography8, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
-var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(Stack15, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary" }, __35("Icons couldn't be loaded.", "elementor")));
-var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React85.createElement(Stack15, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary" }, __35("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React85.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __35("Clear & try again", "elementor"))) : null);
+var CatalogUnavailable = () => /* @__PURE__ */ React86.createElement(Stack14, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React86.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React86.createElement(Typography8, { align: "center", variant: "subtitle2", color: "text.secondary" }, __35("Icons couldn't be loaded.", "elementor")));
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React86.createElement(Stack14, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React86.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React86.createElement(Typography8, { align: "center", variant: "subtitle2", color: "text.secondary" }, __35("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React86.createElement(React86.Fragment, null, /* @__PURE__ */ React86.createElement(Typography8, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React86.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __35("Clear & try again", "elementor"))) : null);
 var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
   ...icon,
   type: "item",
@@ -7188,32 +7178,39 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
 }));
 
 // src/controls/svg-media-overlay.tsx
-import * as React86 from "react";
-import { LibraryIcon as LibraryIcon2, UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Box as Box19, Button as Button5, Stack as Stack16, styled as styled10, ThemeProvider, Typography as Typography10 } from "@elementor/ui";
+import * as React87 from "react";
+import { LibraryIcon as LibraryIcon3, UploadIcon as UploadIcon2 } from "@elementor/icons";
+import { Box as Box19, Button as Button5, Stack as Stack15, styled as styled10, ThemeProvider, Typography as Typography9 } from "@elementor/ui";
 import { __ as __36 } from "@wordpress/i18n";
 var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
 var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
-var MEDIA_ACTION_PADDING_Y = 0.75;
-var MEDIA_ACTION_PADDING_X = 2;
+var SELECT_AREA_WIDTH = 72;
+var UPLOAD_AREA_WIDTH = 48;
+var SPLIT_BUTTON_MIN_HEIGHT = 32;
+var SPLIT_BUTTON_CORNER_RADIUS = "8px";
+var SPLIT_BUTTON_FONT_SIZE = "14px";
 var ICON_LIBRARY_PADDING = 0.625;
 var svgButtonSx = {
-  px: MEDIA_ACTION_PADDING_X,
-  py: MEDIA_ACTION_PADDING_Y
-};
-var MediaActionGroup = styled10(Stack16)(({ theme }) => ({
+  minWidth: 0,
+  minHeight: SPLIT_BUTTON_MIN_HEIGHT,
+  px: 2,
+  fontSize: SPLIT_BUTTON_FONT_SIZE,
+  fontWeight: 500,
+  lineHeight: 1
+};
+var MediaActionGroup = styled10(Stack15)({
   display: "inline-flex",
   flexDirection: "row",
   alignItems: "stretch",
   border: "1px solid currentColor",
-  borderRadius: theme.shape.borderRadius,
+  borderRadius: SPLIT_BUTTON_CORNER_RADIUS,
   overflow: "hidden",
   "& .MuiButton-root": {
     border: "none",
     borderRadius: 0,
     lineHeight: 1
   }
-}));
+});
 var SvgMediaOverlay = ({
   isAdmin,
   showIconLibrary,
@@ -7223,7 +7220,7 @@ var SvgMediaOverlay = ({
   onOpenIconLibrary,
   infotipTitle,
   infotipDescription
-}) => /* @__PURE__ */ React86.createElement(Stack16, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React86.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React86.createElement(
+}) => /* @__PURE__ */ React87.createElement(Stack15, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React87.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React87.createElement(
   Button5,
   {
     size: "tiny",
@@ -7231,10 +7228,10 @@ var SvgMediaOverlay = ({
     variant: "text",
     onClick: onSelectSvg,
     "aria-label": __36("Select", "elementor"),
-    sx: svgButtonSx
+    sx: { ...svgButtonSx, minWidth: SELECT_AREA_WIDTH }
   },
   __36("Select", "elementor")
-), /* @__PURE__ */ React86.createElement(
+), /* @__PURE__ */ React87.createElement(
   Box19,
   {
     sx: {
@@ -7244,21 +7241,21 @@ var SvgMediaOverlay = ({
       flexShrink: 0
     }
   }
-), /* @__PURE__ */ React86.createElement(
+), /* @__PURE__ */ React87.createElement(
   ConditionalControlInfotip,
   {
     title: infotipTitle,
     description: infotipDescription,
     isEnabled: !isAdmin
   },
-  /* @__PURE__ */ React86.createElement(Box19, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
-)), showIconLibrary ? /* @__PURE__ */ React86.createElement(
+  /* @__PURE__ */ React87.createElement(Box19, { component: "span", sx: { display: "flex", width: UPLOAD_AREA_WIDTH } }, /* @__PURE__ */ React87.createElement(UploadControl, { isAdmin, onUpload }))
+)), showIconLibrary ? /* @__PURE__ */ React87.createElement(
   Button5,
   {
     size: "tiny",
     color: "inherit",
     variant: "text",
-    startIcon: /* @__PURE__ */ React86.createElement(LibraryIcon2, { sx: { height: "18px", width: "16px" } }),
+    startIcon: /* @__PURE__ */ React87.createElement(LibraryIcon3, { sx: { height: "18px", width: "16px" } }),
     "aria-label": __36("Icon library", "elementor"),
     onClick: onOpenIconLibrary,
     sx: {
@@ -7267,22 +7264,22 @@ var SvgMediaOverlay = ({
       ".MuiButton-icon": { ml: 0 }
     }
   },
-  /* @__PURE__ */ React86.createElement(Typography10, null, __36("Icon library", "elementor"))
+  /* @__PURE__ */ React87.createElement(Typography9, null, __36("Icon library", "elementor"))
 ) : null);
 var UploadControl = ({ isAdmin, onUpload }) => {
   if (isAdmin) {
-    return /* @__PURE__ */ React86.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
+    return /* @__PURE__ */ React87.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
   }
-  return /* @__PURE__ */ React86.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React86.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
+  return /* @__PURE__ */ React87.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React87.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
 };
 var UploadButton = ({
   disabled = false,
   sx,
   onClick
-}) => /* @__PURE__ */ React86.createElement(
+}) => /* @__PURE__ */ React87.createElement(
   Button5,
   {
-    sx,
+    sx: { ...sx, width: "100%" },
     size: "tiny",
     color: "inherit",
     variant: "text",
@@ -7290,11 +7287,11 @@ var UploadButton = ({
     onClick,
     "aria-label": __36("Upload", "elementor")
   },
-  /* @__PURE__ */ React86.createElement(UploadIcon2, null)
+  /* @__PURE__ */ React87.createElement(UploadIcon2, { fontSize: "small" })
 );
 
 // src/controls/svg-media-preview.tsx
-import * as React87 from "react";
+import * as React88 from "react";
 import { Box as Box20, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
 import { __ as __37 } from "@wordpress/i18n";
 var ICON_PREVIEW_SIZE = 50;
@@ -7307,17 +7304,17 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
   const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isCustomLoading);
   if (isFetching || isLoadingCatalog) {
-    return /* @__PURE__ */ React87.createElement(CircularProgress4, { role: "progressbar" });
+    return /* @__PURE__ */ React88.createElement(CircularProgress4, { role: "progressbar" });
   }
   if (selectedIcon) {
-    return /* @__PURE__ */ React87.createElement(IconPreview, { icon: selectedIcon });
+    return /* @__PURE__ */ React88.createElement(IconPreview, { icon: selectedIcon });
   }
   if (shouldLoadIconCatalog) {
-    return /* @__PURE__ */ React87.createElement(IconPreviewPlaceholder, null);
+    return /* @__PURE__ */ React88.createElement(IconPreviewPlaceholder, null);
   }
-  return /* @__PURE__ */ React87.createElement(SvgPreview, { src });
+  return /* @__PURE__ */ React88.createElement(SvgPreview, { src });
 };
-var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(Box20, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React88.createElement(Box20, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React88.createElement(
   FontAwesomeGlyph,
   {
     icon,
@@ -7326,7 +7323,7 @@ var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(Box20, { s
     label: __37("Preview icon", "elementor")
   }
 ));
-var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
+var IconPreviewPlaceholder = () => /* @__PURE__ */ React88.createElement(
   Box20,
   {
     "aria-hidden": true,
@@ -7337,7 +7334,7 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
     }
   }
 );
-var SvgPreview = ({ src }) => /* @__PURE__ */ React87.createElement(
+var SvgPreview = ({ src }) => /* @__PURE__ */ React88.createElement(
   CardMedia2,
   {
     component: "img",
@@ -7363,7 +7360,7 @@ var StyledCard = styled11(Card2)`
 	border: none;
 `;
 var PREVIEW_ICON_COLOR = "#000000";
-var StyledCardMediaContainer = styled11(Stack17)`
+var StyledCardMediaContainer = styled11(Stack16)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -7384,7 +7381,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState19(false);
-  const iconLibraryPopoverState = usePopupState10({ variant: "popover" });
+  const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
   const controlContainerRef = useRef17(null);
   const buttonGroupRef = useRef17(null);
   const [iconLibraryAnchor, setIconLibraryAnchor] = useState19(null);
@@ -7455,7 +7452,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
     };
   }, [iconLibraryPopoverState.isOpen]);
   const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
-  return /* @__PURE__ */ React88.createElement(Stack17, { gap: 1, "aria-label": __38("SVG control", "elementor") }, /* @__PURE__ */ React88.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React89.createElement(Stack16, { gap: 1, "aria-label": __38("SVG control", "elementor") }, /* @__PURE__ */ React89.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React89.createElement(
     Popover6,
     {
       disableScrollLock: true,
@@ -7475,7 +7472,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         }
       }
     },
-    /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(
       IconLibraryPopover,
       {
         open: iconLibraryPopoverState.isOpen,
@@ -7486,14 +7483,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         width: iconLibraryWidth
       }
     )
-  ) : null, /* @__PURE__ */ React88.createElement(
+  ) : null, /* @__PURE__ */ React89.createElement(
     Box21,
     {
       ref: controlContainerRef,
       "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
       sx: { width: "100%" }
     },
-    /* @__PURE__ */ React88.createElement(ControlActions, null, /* @__PURE__ */ React88.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React88.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React89.createElement(
       SvgMediaPreview,
       {
         isFetching,
@@ -7501,7 +7498,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         iconClassName: selectedIconClass,
         iconLibrary: selectedIconLibrary
       }
-    )), /* @__PURE__ */ React88.createElement(
+    )), /* @__PURE__ */ React89.createElement(
       CardOverlay2,
       {
         sx: {
@@ -7510,7 +7507,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
           }
         }
       },
-      /* @__PURE__ */ React88.createElement(
+      /* @__PURE__ */ React89.createElement(
         SvgMediaOverlay,
         {
           isAdmin,
@@ -7520,19 +7517,19 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
           onUpload: handleUpload,
           onOpenIconLibrary: handleOpenIconLibrary,
           infotipTitle: __38("Sorry, you can't upload that file yet.", "elementor"),
-          infotipDescription: /* @__PURE__ */ React88.createElement(UnfilteredUploadInfotipDescription, null)
+          infotipDescription: /* @__PURE__ */ React89.createElement(UnfilteredUploadInfotipDescription, null)
         }
       )
     )))
   ));
 });
-var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React88.createElement(React88.Fragment, null, __38("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React88.createElement("br", null), __38("file uploads.", "elementor"));
+var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React89.createElement(React89.Fragment, null, __38("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React89.createElement("br", null), __38("file uploads.", "elementor"));
 
 // src/controls/video-media-control.tsx
-import * as React89 from "react";
+import * as React90 from "react";
 import { urlPropTypeUtil as urlPropTypeUtil5, videoSrcPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon3 } from "@elementor/icons";
-import { Button as Button6, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress5, Stack as Stack18 } from "@elementor/ui";
+import { Button as Button6, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress5, Stack as Stack17 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
 import { __ as __39 } from "@wordpress/i18n";
 var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
@@ -7564,7 +7561,7 @@ var VideoMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(
+  return /* @__PURE__ */ React90.createElement(ControlActions, null, /* @__PURE__ */ React90.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React90.createElement(
     CardMedia3,
     {
       sx: {
@@ -7579,8 +7576,8 @@ var VideoMediaControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React89.createElement(VideoPreview, { isFetching, videoUrl })
-  ), /* @__PURE__ */ React89.createElement(CardOverlay3, null, /* @__PURE__ */ React89.createElement(Stack18, { gap: 1 }, /* @__PURE__ */ React89.createElement(
+    /* @__PURE__ */ React90.createElement(VideoPreview, { isFetching, videoUrl })
+  ), /* @__PURE__ */ React90.createElement(CardOverlay3, null, /* @__PURE__ */ React90.createElement(Stack17, { gap: 1 }, /* @__PURE__ */ React90.createElement(
     Button6,
     {
       size: "tiny",
@@ -7589,17 +7586,17 @@ var VideoMediaControl = createControl(() => {
       onClick: () => open({ mode: "browse" })
     },
     __39("Select video", "elementor")
-  ), /* @__PURE__ */ React89.createElement(
+  ), /* @__PURE__ */ React90.createElement(
     Button6,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React89.createElement(UploadIcon3, null),
+      startIcon: /* @__PURE__ */ React90.createElement(UploadIcon3, null),
       onClick: () => open({ mode: "upload" })
     },
     __39("Upload", "elementor")
-  ), /* @__PURE__ */ React89.createElement(
+  ), /* @__PURE__ */ React90.createElement(
     Button6,
     {
       size: "tiny",
@@ -7612,10 +7609,10 @@ var VideoMediaControl = createControl(() => {
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
   if (isFetching) {
-    return /* @__PURE__ */ React89.createElement(CircularProgress5, null);
+    return /* @__PURE__ */ React90.createElement(CircularProgress5, null);
   }
   if (videoUrl) {
-    return /* @__PURE__ */ React89.createElement(
+    return /* @__PURE__ */ React90.createElement(
       "video",
       {
         "aria-label": __39("Video preview", "elementor"),
@@ -7631,17 +7628,17 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ React89.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
+  return /* @__PURE__ */ React90.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
 };
 
 // src/controls/background-control/background-control.tsx
-import * as React96 from "react";
+import * as React97 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid18 } from "@elementor/ui";
 import { __ as __45 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React95 from "react";
+import * as React96 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
@@ -7657,7 +7654,7 @@ import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React90 from "react";
+import * as React91 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -7704,7 +7701,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React90.createElement(
+  return /* @__PURE__ */ React91.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -7729,7 +7726,7 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React91 from "react";
+import * as React92 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid14 } from "@elementor/ui";
 import { __ as __40 } from "@wordpress/i18n";
@@ -7737,22 +7734,22 @@ var attachmentControlOptions = [
   {
     value: "fixed",
     label: __40("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(PinIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
     label: __40("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(PinnedOffIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, __40("Attachment", "elementor"))), /* @__PURE__ */ React91.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __40("Attachment", "elementor"))), /* @__PURE__ */ React92.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React92 from "react";
+import * as React93 from "react";
 import { useRef as useRef18 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
@@ -7784,7 +7781,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React92.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __41("Position", "elementor"))), /* @__PURE__ */ React92.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ControlActions, null, /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React93.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React93.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, __41("Position", "elementor"))), /* @__PURE__ */ React93.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React93.createElement(ControlActions, null, /* @__PURE__ */ React93.createElement(
     Select4,
     {
       fullWidth: true,
@@ -7793,18 +7790,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React92.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React93.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
+  ))))), isCustom ? /* @__PURE__ */ React93.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React93.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React93.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React93.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React92.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React93.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React92.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
+  ))), /* @__PURE__ */ React93.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React93.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React92.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React93.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -7812,7 +7809,7 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React93 from "react";
+import * as React94 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid16 } from "@elementor/ui";
 import { __ as __42 } from "@wordpress/i18n";
@@ -7820,34 +7817,34 @@ var repeatControlOptions = [
   {
     value: "repeat",
     label: __42("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(GridDotsIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
     label: __42("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(DotsHorizontalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
     label: __42("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(DotsVerticalIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
     label: __42("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(XIcon3, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, __42("Repeat", "elementor"))), /* @__PURE__ */ React93.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React93.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, __42("Repeat", "elementor"))), /* @__PURE__ */ React94.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React94 from "react";
+import * as React95 from "react";
 import { useRef as useRef19 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import {
@@ -7864,25 +7861,25 @@ var sizeControlOptions = [
   {
     value: "auto",
     label: __43("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(LetterAIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
     label: __43("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
     label: __43("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(ArrowBarBothIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
     label: __43("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(PencilIcon, { fontSize: size }),
+    renderContent: ({ size }) => /* @__PURE__ */ React95.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -7898,7 +7895,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React94.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, __43("Size", "elementor"))), /* @__PURE__ */ React94.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React95.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(ControlFormLabel, null, __43("Size", "elementor"))), /* @__PURE__ */ React95.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React95.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -7907,17 +7904,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React94.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React94.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React94.createElement(
+  )))), isCustom ? /* @__PURE__ */ React95.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React95.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React95.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React94.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React95.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React94.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React94.createElement(
+  ))), /* @__PURE__ */ React95.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React95.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React94.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React95.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -8025,22 +8022,22 @@ var backgroundResolutionOptions = [
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React95.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React96.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React95.createElement(RepeaterHeader, { label: __44("Overlay", "elementor") }, /* @__PURE__ */ React95.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
+    /* @__PURE__ */ React96.createElement(RepeaterHeader, { label: __44("Overlay", "elementor") }, /* @__PURE__ */ React96.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React96.createElement(ItemsContainer, null, /* @__PURE__ */ React96.createElement(
       Item,
       {
         Icon: ItemIcon2,
         Label: ItemLabel3,
-        actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DuplicateItemAction, null), /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React96.createElement(React96.Fragment, null, /* @__PURE__ */ React96.createElement(DuplicateItemAction, null), /* @__PURE__ */ React96.createElement(DisableItemAction, null), /* @__PURE__ */ React96.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(ItemContent2, null))
+    /* @__PURE__ */ React96.createElement(EditItemPopover, null, /* @__PURE__ */ React96.createElement(ItemContent2, null))
   ));
 });
 var ItemContent2 = () => {
@@ -8050,7 +8047,7 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React95.createElement(Box22, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(Box22, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(Box22, { sx: { width: "100%" } }, /* @__PURE__ */ React96.createElement(Box22, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React96.createElement(
     Tabs,
     {
       size: "small",
@@ -8058,19 +8055,19 @@ var ItemContent2 = () => {
       ...getTabsProps(),
       "aria-label": __44("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React95.createElement(Tab, { label: __44("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React95.createElement(Tab, { label: __44("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React95.createElement(Tab, { label: __44("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React95.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React95.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React95.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React95.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React96.createElement(Tab, { label: __44("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React96.createElement(Tab, { label: __44("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React96.createElement(Tab, { label: __44("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React96.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React96.createElement(PopoverContent, null, /* @__PURE__ */ React96.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React96.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React96.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React96.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React96.createElement(PopoverContent, null, /* @__PURE__ */ React96.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React95.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React96.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React95.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React96.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React95.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React96.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -8083,11 +8080,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React96.createElement(
     CardMedia4,
     {
       image: imageUrl,
@@ -8102,41 +8099,41 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React96.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React95.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React96.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React95.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React96.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React95.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React96.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React95.createElement("span", null, color);
+  return /* @__PURE__ */ React96.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React95.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React96.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React95.createElement("span", null, __44("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React96.createElement("span", null, __44("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React95.createElement("span", null, __44("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React96.createElement("span", null, __44("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React95.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React95.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React96.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React96.createElement(BackgroundImageOverlayAttachment, null)));
 };
 var StyledUnstableColorIndicator3 = styled12(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
@@ -8186,17 +8183,17 @@ var colorLabel = __45("Color", "elementor");
 var clipLabel = __45("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React96.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React96.createElement(BackgroundColorField, null), /* @__PURE__ */ React96.createElement(BackgroundClipField, null));
+  return /* @__PURE__ */ React97.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React97.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React97.createElement(BackgroundColorField, null), /* @__PURE__ */ React97.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React96.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React97.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React97.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React96.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React96.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React97.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React97.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
-import * as React97 from "react";
+import * as React98 from "react";
 import { useMemo as useMemo13 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
 import { Box as Box23 } from "@elementor/ui";
@@ -8232,14 +8229,14 @@ var RepeatableControl = createControl(
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
     const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
-    return /* @__PURE__ */ React97.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React97.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React97.createElement(
+    return /* @__PURE__ */ React98.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React98.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React98.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil2,
         isItemDisabled: isItemDisabled2
       },
-      /* @__PURE__ */ React97.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React97.createElement(
+      /* @__PURE__ */ React98.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React98.createElement(
         TooltipAddItemAction,
         {
           ...addItemTooltipProps,
@@ -8247,22 +8244,22 @@ var RepeatableControl = createControl(
           ariaLabel: repeaterLabel
         }
       )),
-      /* @__PURE__ */ React97.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React97.createElement(
+      /* @__PURE__ */ React98.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React98.createElement(
         Item,
         {
           Icon: ItemIcon3,
           Label: ItemLabel4,
-          actions: /* @__PURE__ */ React97.createElement(React97.Fragment, null, showDuplicate && /* @__PURE__ */ React97.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React97.createElement(DisableItemAction, null), /* @__PURE__ */ React97.createElement(RemoveItemAction, null))
+          actions: /* @__PURE__ */ React98.createElement(React98.Fragment, null, showDuplicate && /* @__PURE__ */ React98.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React98.createElement(DisableItemAction, null), /* @__PURE__ */ React98.createElement(RemoveItemAction, null))
         }
       )),
-      /* @__PURE__ */ React97.createElement(EditItemPopover, null, /* @__PURE__ */ React97.createElement(Content2, null))
+      /* @__PURE__ */ React98.createElement(EditItemPopover, null, /* @__PURE__ */ React98.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon3 = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null);
+var ItemIcon3 = () => /* @__PURE__ */ React98.createElement(React98.Fragment, null);
 var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React97.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React98.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, null, /* @__PURE__ */ React98.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -8345,7 +8342,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React97.createElement(Box23, { component: "span", color }, label);
+  return /* @__PURE__ */ React98.createElement(Box23, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -8353,7 +8350,7 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React98 from "react";
+import * as React99 from "react";
 import { useMemo as useMemo14, useState as useState20 } from "react";
 import {
   isTransformable,
@@ -8450,14 +8447,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React98.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React98.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React99.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React99.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React99.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React99.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React99.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React98.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React98.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React98.createElement(
+  )), !!keyError && /* @__PURE__ */ React99.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React99.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React99.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React99.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -8465,11 +8462,11 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React98.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React99.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React99 from "react";
+import * as React100 from "react";
 import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
@@ -8500,7 +8497,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React99.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React99.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, __47("Object position", "elementor"))), /* @__PURE__ */ React99.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React100.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React100.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlFormLabel, null, __47("Object position", "elementor"))), /* @__PURE__ */ React100.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React100.createElement(
     Select5,
     {
       size: "tiny",
@@ -8511,28 +8508,28 @@ var PositionControl = () => {
       renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React99.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React99.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React99.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React99.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React100.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React100.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React100.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React100.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React99.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React100.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React99.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React99.createElement(
+  ))), /* @__PURE__ */ React100.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React100.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React99.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React100.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React112 from "react";
+import * as React113 from "react";
 import { useRef as useRef28 } 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 Box27, IconButton as IconButton8, Tooltip as Tooltip11, Typography as Typography11, usePopupState as usePopupState11 } from "@elementor/ui";
+import { bindTrigger as bindTrigger5, Box as Box27, IconButton as IconButton9, Tooltip as Tooltip11, Typography as Typography10, usePopupState as usePopupState10 } from "@elementor/ui";
 import { __ as __57 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
@@ -8587,12 +8584,12 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-import * as React106 from "react";
+import * as React107 from "react";
 import { Box as Box24, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
 import { __ as __52 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React101 from "react";
+import * as React102 from "react";
 import { useRef as useRef21 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
@@ -8600,11 +8597,11 @@ import { Grid as Grid22 } from "@elementor/ui";
 import { __ as __48 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React100 from "react";
+import * as React101 from "react";
 import { Grid as Grid21 } from "@elementor/ui";
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React100.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React100.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React101.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React101.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React101.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React101.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(
     SizeControl,
     {
       anchorRef,
@@ -8622,26 +8619,26 @@ var moveAxisControls = [
   {
     label: __48("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React101.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React102.createElement(ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
     label: __48("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React101.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React102.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
     label: __48("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React101.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React102.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
   const rowRefs = [useRef21(null), useRef21(null), useRef21(null)];
-  return /* @__PURE__ */ React101.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React102.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8654,7 +8651,7 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-import * as React102 from "react";
+import * as React103 from "react";
 import { useRef as useRef22 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
@@ -8664,24 +8661,24 @@ var rotateAxisControls = [
   {
     label: __49("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React102.createElement(Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React103.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
     label: __49("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React102.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React103.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
     label: __49("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React102.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React103.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
   const rowRefs = [useRef22(null), useRef22(null), useRef22(null)];
-  return /* @__PURE__ */ React102.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React103.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React103.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8693,7 +8690,7 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-import * as React104 from "react";
+import * as React105 from "react";
 import { useRef as useRef23 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
@@ -8701,10 +8698,10 @@ import { Grid as Grid25 } from "@elementor/ui";
 import { __ as __50 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-import * as React103 from "react";
+import * as React104 from "react";
 import { Grid as Grid24 } from "@elementor/ui";
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React103.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React103.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, label)), /* @__PURE__ */ React103.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React104.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React104.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React104.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(ControlLabel, null, label)), /* @__PURE__ */ React104.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React104.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
@@ -8712,27 +8709,27 @@ var scaleAxisControls = [
   {
     label: __50("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React104.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React105.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
     label: __50("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React104.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React105.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
     label: __50("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React104.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React105.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
   const rowRefs = [useRef23(null), useRef23(null), useRef23(null)];
-  return /* @__PURE__ */ React104.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  return /* @__PURE__ */ React105.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-import * as React105 from "react";
+import * as React106 from "react";
 import { useRef as useRef24 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
@@ -8742,19 +8739,19 @@ var skewAxisControls = [
   {
     label: __51("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React105.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React106.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
     label: __51("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React105.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React106.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
   const rowRefs = [useRef24(null), useRef24(null), useRef24(null)];
-  return /* @__PURE__ */ React105.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React106.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8859,7 +8856,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(Box24, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(Box24, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React107.createElement(PopoverContent, null, /* @__PURE__ */ React107.createElement(Box24, { sx: { width: "100%" } }, /* @__PURE__ */ React107.createElement(Box24, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React107.createElement(
     Tabs2,
     {
       size: "small",
@@ -8872,33 +8869,33 @@ var TransformContent = () => {
       ...getTabsProps(),
       "aria-label": __52("Transform", "elementor")
     },
-    /* @__PURE__ */ React106.createElement(Tab2, { label: __52("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React106.createElement(Tab2, { label: __52("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React106.createElement(Tab2, { label: __52("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React106.createElement(Tab2, { label: __52("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React106.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React106.createElement(Move, null)), /* @__PURE__ */ React106.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React106.createElement(Scale, null)), /* @__PURE__ */ React106.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React106.createElement(Rotate, null)), /* @__PURE__ */ React106.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React106.createElement(Skew, null))));
+    /* @__PURE__ */ React107.createElement(Tab2, { label: __52("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React107.createElement(Tab2, { label: __52("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React107.createElement(Tab2, { label: __52("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React107.createElement(Tab2, { label: __52("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React107.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React107.createElement(Move, null)), /* @__PURE__ */ React107.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React107.createElement(Scale, null)), /* @__PURE__ */ React107.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React107.createElement(Rotate, null)), /* @__PURE__ */ React107.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React107.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React107 from "react";
+import * as React108 from "react";
 import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React107.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+      return /* @__PURE__ */ React108.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React107.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React108.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React107.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React108.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React107.createElement(SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React108.createElement(SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-import * as React108 from "react";
+import * as React109 from "react";
 import { Box as Box25 } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
@@ -8918,33 +8915,33 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React108.createElement(Label2, { label: __53("Move", "elementor"), value: formatLabel(value, "move") });
+      return /* @__PURE__ */ React109.createElement(Label2, { label: __53("Move", "elementor"), value: formatLabel(value, "move") });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React108.createElement(Label2, { label: __53("Scale", "elementor"), value: formatLabel(value, "scale") });
+      return /* @__PURE__ */ React109.createElement(Label2, { label: __53("Scale", "elementor"), value: formatLabel(value, "scale") });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React108.createElement(Label2, { label: __53("Rotate", "elementor"), value: formatLabel(value, "rotate") });
+      return /* @__PURE__ */ React109.createElement(Label2, { label: __53("Rotate", "elementor"), value: formatLabel(value, "rotate") });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React108.createElement(Label2, { label: __53("Skew", "elementor"), value: formatLabel(value, "skew") });
+      return /* @__PURE__ */ React109.createElement(Label2, { label: __53("Skew", "elementor"), value: formatLabel(value, "skew") });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React108.createElement(Box25, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React109.createElement(Box25, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-import * as React111 from "react";
+import * as React112 from "react";
 import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
 import { bindPopover as bindPopover6, Box as Box26, Divider as Divider6, Popover as Popover7 } from "@elementor/ui";
 import { __ as __56 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-import * as React109 from "react";
+import * as React110 from "react";
 import { useRef as useRef26 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
+import { Grid as Grid27, Stack as Stack18 } from "@elementor/ui";
 import { __ as __54 } from "@wordpress/i18n";
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
@@ -8965,24 +8962,24 @@ var CHILDREN_PERSPECTIVE_FIELDS = [
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React109.createElement(Stack19, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, __54("Children perspective", "elementor")), /* @__PURE__ */ React109.createElement(PerspectiveControl, null), /* @__PURE__ */ React109.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React110.createElement(Stack18, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, __54("Children perspective", "elementor")), /* @__PURE__ */ React110.createElement(PerspectiveControl, null), /* @__PURE__ */ React110.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React109.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React109.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveControl = () => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React110.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React110.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React109.createElement(ControlFields, { control }))));
+  return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React110.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
   const rowRef = useRef26(null);
-  return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  return /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React110 from "react";
+import * as React111 from "react";
 import { useRef as useRef27 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
+import { Grid as Grid28, Stack as Stack19 } from "@elementor/ui";
 import { __ as __55 } from "@wordpress/i18n";
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
@@ -9004,12 +9001,12 @@ var TRANSFORM_ORIGIN_FIELDS = [
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React110.createElement(Stack20, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, __55("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React111.createElement(Stack19, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, __55("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React111.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
   const rowRef = useRef27(null);
-  return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React111.createElement(PropProvider, { ...context }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React111.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React111.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React111.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -9023,7 +9020,7 @@ var TransformSettingsControl = ({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React112.createElement(
     Popover7,
     {
       disablePortal: true,
@@ -9038,16 +9035,16 @@ var TransformSettingsControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React111.createElement(
+    /* @__PURE__ */ React112.createElement(
       PopoverHeader5,
       {
         title: __56("Transform settings", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React111.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
+        icon: /* @__PURE__ */ React112.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
       }
     ),
-    /* @__PURE__ */ React111.createElement(Divider6, null),
-    /* @__PURE__ */ React111.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React111.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(Box26, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(Divider6, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React112.createElement(Divider6, null),
+    /* @__PURE__ */ React112.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React112.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(Box26, { sx: { my: 0.5 } }, /* @__PURE__ */ React112.createElement(Divider6, null)), /* @__PURE__ */ React112.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -9057,26 +9054,26 @@ var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
     const headerRef = useRef28(null);
-    const popupState = usePopupState11({ variant: "popover" });
-    return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
+    const popupState = usePopupState10({ variant: "popover" });
+    return /* @__PURE__ */ React113.createElement(PropProvider, { ...context }, /* @__PURE__ */ React113.createElement(
       TransformSettingsControl,
       {
         popupState,
         anchorRef: headerRef,
         showChildrenPerspective
       }
-    ), /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React112.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
+    ), /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React113.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
   }
 );
-var ToolTip = /* @__PURE__ */ React112.createElement(
+var ToolTip = /* @__PURE__ */ React113.createElement(
   Box27,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React112.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React112.createElement(Typography11, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __57("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React113.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React113.createElement(Typography10, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __57("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -9090,21 +9087,21 @@ var Repeater2 = ({
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue2();
-  return /* @__PURE__ */ React112.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React112.createElement(
+  return /* @__PURE__ */ React113.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React113.createElement(
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(
       RepeaterHeader,
       {
         label: __57("Transform", "elementor"),
-        adornment: () => /* @__PURE__ */ React112.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
+        adornment: () => /* @__PURE__ */ React113.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
         ref: headerRef
       },
-      /* @__PURE__ */ React112.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
-      /* @__PURE__ */ React112.createElement(
+      /* @__PURE__ */ React113.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
+      /* @__PURE__ */ React113.createElement(
         TooltipAddItemAction,
         {
           disabled: shouldDisableAddItem,
@@ -9114,15 +9111,15 @@ var Repeater2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React112.createElement(ItemsContainer, null, /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React113.createElement(ItemsContainer, null, /* @__PURE__ */ React113.createElement(
       Item,
       {
         Icon: TransformIcon,
         Label: TransformLabel,
-        actions: /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(DisableItemAction, null), /* @__PURE__ */ React112.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(DisableItemAction, null), /* @__PURE__ */ React113.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React112.createElement(EditItemPopover, null, /* @__PURE__ */ React112.createElement(TransformContent, null))
+    /* @__PURE__ */ React113.createElement(EditItemPopover, null, /* @__PURE__ */ React113.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -9131,23 +9128,23 @@ var TransformBasePopoverTrigger = ({
 }) => {
   const { bind } = useBoundProp();
   const titleLabel = __57("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React112.createElement(Tooltip11, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React112.createElement(IconButton8, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React112.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React113.createElement(Tooltip11, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React113.createElement(IconButton9, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React113.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-import * as React115 from "react";
+import * as React116 from "react";
 import { useEffect as useEffect17, useMemo as useMemo17, useState as useState21 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box29, Typography as Typography12 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box29, Typography as Typography11 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __60 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
-import * as React113 from "react";
+import * as React114 from "react";
 import { useMemo as useMemo15, useRef as useRef29 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid29 } from "@elementor/ui";
@@ -9167,7 +9164,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React113.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React113.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React113.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React113.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React113.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React113.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React113.createElement(
+    return /* @__PURE__ */ React114.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React114.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React114.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React114.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React114.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React114.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React114.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React114.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -9368,12 +9365,12 @@ function subscribeToTransitionEvent() {
 }
 
 // src/controls/transition-control/transition-selector.tsx
-import * as React114 from "react";
+import * as React115 from "react";
 import { useMemo as useMemo16, useRef as useRef30 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box28, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState12 } from "@elementor/ui";
+import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box28, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState11 } from "@elementor/ui";
 import { __ as __59 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
@@ -9456,7 +9453,7 @@ var TransitionSelector = ({
     key: { value: transitionLabel }
   } = value;
   const defaultRef = useRef30(null);
-  const popoverState = usePopupState12({ variant: "popover" });
+  const popoverState = usePopupState11({ variant: "popover" });
   const disabledCategories = useMemo16(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
@@ -9501,16 +9498,16 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React114.createElement(Box28, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React115.createElement(Box28, { ref: defaultRef }, /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
     UnstableTag3,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React114.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React115.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
       ...bindTrigger6(popoverState),
       fullWidth: true
     }
-  )), /* @__PURE__ */ React114.createElement(
+  )), /* @__PURE__ */ React115.createElement(
     Popover8,
     {
       disablePortal: true,
@@ -9521,7 +9518,7 @@ var TransitionSelector = ({
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React114.createElement(
+    /* @__PURE__ */ React115.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -9532,7 +9529,7 @@ var TransitionSelector = ({
         title: __59("Transition Property", "elementor"),
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
-        categoryItemContentTemplate: (item) => /* @__PURE__ */ React114.createElement(
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React115.createElement(
           Box28,
           {
             sx: {
@@ -9542,10 +9539,10 @@ var TransitionSelector = ({
               width: "100%"
             }
           },
-          /* @__PURE__ */ React114.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React114.createElement(PromotionChip, null)
+          /* @__PURE__ */ React115.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React115.createElement(PromotionChip, null)
         ),
-        footer: showPromotion ? /* @__PURE__ */ React114.createElement(
+        footer: showPromotion ? /* @__PURE__ */ React115.createElement(
           PromotionAlert,
           {
             message: __59(
@@ -9664,7 +9661,7 @@ var getInitialValue = (values = []) => {
   }
   return initialTransitionValue;
 };
-var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
+var disableAddItemTooltipContent = /* @__PURE__ */ React116.createElement(
   Alert2,
   {
     sx: {
@@ -9672,10 +9669,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React115.createElement(InfoCircleFilledIcon3, null)
+    icon: /* @__PURE__ */ React116.createElement(InfoCircleFilledIcon3, null)
   },
-  /* @__PURE__ */ React115.createElement(AlertTitle3, null, __60("Transitions", "elementor")),
-  /* @__PURE__ */ React115.createElement(Box29, { component: "span" }, /* @__PURE__ */ React115.createElement(Typography12, { variant: "body2" }, __60("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React116.createElement(AlertTitle3, null, __60("Transitions", "elementor")),
+  /* @__PURE__ */ React116.createElement(Box29, { component: "span" }, /* @__PURE__ */ React116.createElement(Typography11, { variant: "body2" }, __60("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -9718,7 +9715,7 @@ var TransitionRepeaterControl = createControl(
     }, [recentlyUsedListGetter]);
     const allPropertiesUsed = useMemo17(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
-    return /* @__PURE__ */ React115.createElement(
+    return /* @__PURE__ */ React116.createElement(
       RepeatableControl,
       {
         label: __60("Transitions", "elementor"),
@@ -9745,7 +9742,7 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/controls/date-time-control.tsx
-import * as React116 from "react";
+import * as React117 from "react";
 import * as dayjs from "dayjs";
 import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
@@ -9793,7 +9790,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(LocalizationProvider, null, /* @__PURE__ */ React116.createElement(Box30, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React117.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(LocalizationProvider, null, /* @__PURE__ */ React117.createElement(Box30, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React117.createElement(
     DatePicker,
     {
       value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
@@ -9805,7 +9802,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
         openPickerIcon: { fontSize: "tiny" }
       }
     }
-  )), /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React116.createElement(
+  )), /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React117.createElement(
     TimePicker,
     {
       value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
@@ -9821,13 +9818,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/date-range-control.tsx
-import * as React118 from "react";
+import * as React119 from "react";
 import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
-import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack21 } from "@elementor/ui";
+import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack20 } from "@elementor/ui";
 import { __ as __61 } from "@wordpress/i18n";
 
 // src/controls/date-string-control.tsx
-import * as React117 from "react";
+import * as React118 from "react";
 import { dateStringPropTypeUtil } from "@elementor/editor-props";
 import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
 
@@ -9886,7 +9883,7 @@ var DateStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React117.createElement(LocalizationProvider2, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
+    return /* @__PURE__ */ React118.createElement(LocalizationProvider2, null, /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
       DatePicker2,
       {
         value: parseDateString(value ?? ""),
@@ -9915,32 +9912,32 @@ var DateRangeControl = createControl(() => {
   const minString = dateStringPropTypeUtil2.extract(value?.min);
   const maxString = dateStringPropTypeUtil2.extract(value?.max);
   const hasInvalidRange = isMaxBeforeMin(minString, maxString);
-  return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(Stack21, { gap: 0.75 }, /* @__PURE__ */ React118.createElement(Stack21, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React118.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React119.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React119.createElement(Stack20, { gap: 0.75 }, /* @__PURE__ */ React119.createElement(Stack20, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React119.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React119.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React119.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(
     BoundDateStringControl,
     {
       bind: "min",
       ariaLabel: RANGE_LABELS.min,
       error: hasInvalidRange
     }
-  ))), /* @__PURE__ */ React118.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React118.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
+  ))), /* @__PURE__ */ React119.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React119.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React119.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React119.createElement(
     BoundDateStringControl,
     {
       bind: "max",
       ariaLabel: RANGE_LABELS.max,
       error: hasInvalidRange
     }
-  )))), hasInvalidRange && /* @__PURE__ */ React118.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
+  )))), hasInvalidRange && /* @__PURE__ */ React119.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
 });
 var BoundDateStringControl = ({
   bind,
   ariaLabel,
   error
 }) => {
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React118.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
 };
 
 // src/controls/time-string-control.tsx
-import * as React119 from "react";
+import * as React120 from "react";
 import { timeStringPropTypeUtil } from "@elementor/editor-props";
 import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
 var TimeStringControl = createControl(
@@ -9968,7 +9965,7 @@ var TimeStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React119.createElement(LocalizationProvider3, null, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
+    return /* @__PURE__ */ React120.createElement(LocalizationProvider3, null, /* @__PURE__ */ React120.createElement(ControlActions, null, /* @__PURE__ */ React120.createElement(
       TimePicker2,
       {
         value: parseTimeString(value ?? ""),
@@ -9981,9 +9978,9 @@ var TimeStringControl = createControl(
 );
 
 // src/controls/time-range-control.tsx
-import * as React120 from "react";
+import * as React121 from "react";
 import { timeRangePropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid31, Stack as Stack22 } from "@elementor/ui";
+import { Grid as Grid31, Stack as Stack21 } from "@elementor/ui";
 import { __ as __62 } from "@wordpress/i18n";
 var RANGE_LABELS2 = {
   min: __62("Start time", "elementor"),
@@ -9991,20 +9988,20 @@ var RANGE_LABELS2 = {
 };
 var TimeRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
-  return /* @__PURE__ */ React120.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React120.createElement(Stack22, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React120.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React120.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React120.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React120.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
+  return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(Stack21, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React121.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React121.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React121.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React121.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React121.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React121.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React121.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
 });
 var BoundTimeStringControl = ({ bind, ariaLabel }) => {
-  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React120.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React121.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React121.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
 };
 
 // src/controls/inline-editing-control.tsx
-import * as React124 from "react";
+import * as React125 from "react";
 import { useCallback as useCallback4, useState as useState23 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box33 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
-import * as React121 from "react";
+import * as React122 from "react";
 import { useEffect as useEffect18, useRef as useRef31 } from "react";
 import { Box as Box31 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
@@ -10051,7 +10048,7 @@ function extractInlineHtmlContent(propValue) {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React121.forwardRef((props, ref) => {
+var InlineEditor = React122.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -10164,7 +10161,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React121.createElement(Box31, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React122.createElement(Box31, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React122.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef31(false);
@@ -10178,7 +10175,7 @@ var useOnUpdate = (callback, dependencies) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React123 from "react";
+import * as React124 from "react";
 import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef33, useState as useState22 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
@@ -10193,21 +10190,21 @@ import {
 } from "@elementor/icons";
 import {
   Box as Box32,
-  IconButton as IconButton9,
-  ToggleButton as ToggleButton5,
+  IconButton as IconButton10,
+  ToggleButton as ToggleButton4,
   ToggleButtonGroup as ToggleButtonGroup2,
   toggleButtonGroupClasses,
   Tooltip as Tooltip13,
-  usePopupState as usePopupState13
+  usePopupState as usePopupState12
 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
 import { __ as __64 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React122 from "react";
+import * as React123 from "react";
 import { useEffect as useEffect19, useRef as useRef32 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField11, ToggleButton as ToggleButton4, Tooltip as Tooltip12 } from "@elementor/ui";
+import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack22, TextField as TextField11, ToggleButton as ToggleButton3, Tooltip as Tooltip12 } from "@elementor/ui";
 import { __ as __63 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
@@ -10228,7 +10225,7 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React122.createElement(
+  return /* @__PURE__ */ React123.createElement(
     Popover9,
     {
       slotProps: {
@@ -10239,7 +10236,7 @@ var UrlPopover = ({
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React122.createElement(Stack23, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
+    /* @__PURE__ */ React123.createElement(Stack22, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React123.createElement(
       TextField11,
       {
         value,
@@ -10252,8 +10249,8 @@ var UrlPopover = ({
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React122.createElement(Tooltip12, { title: __63("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
-      ToggleButton4,
+    ), /* @__PURE__ */ React123.createElement(Tooltip12, { title: __63("Open in a new tab", "elementor") }, /* @__PURE__ */ React123.createElement(
+      ToggleButton3,
       {
         size: "tiny",
         value: "newTab",
@@ -10262,7 +10259,7 @@ var UrlPopover = ({
         "aria-label": __63("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React122.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React123.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -10277,7 +10274,7 @@ var InlineEditorToolbar = ({
   const [urlValue, setUrlValue] = useState22("");
   const [openInNewTab, setOpenInNewTab] = useState22(false);
   const toolbarRef = useRef33(null);
-  const linkPopupState = usePopupState13({ variant: "popover" });
+  const linkPopupState = usePopupState12({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
@@ -10325,7 +10322,7 @@ var InlineEditorToolbar = ({
       editor?.commands?.focus();
     }
   }, [editor, inControlPanel]);
-  return /* @__PURE__ */ React123.createElement(
+  return /* @__PURE__ */ React124.createElement(
     Box32,
     {
       ref: toolbarRef,
@@ -10359,8 +10356,8 @@ var InlineEditorToolbar = ({
         }
       }
     },
-    /* @__PURE__ */ React123.createElement(Tooltip13, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React123.createElement(IconButton9, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React123.createElement(
+    /* @__PURE__ */ React124.createElement(Tooltip13, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React124.createElement(IconButton10, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React124.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -10390,8 +10387,8 @@ var InlineEditorToolbar = ({
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(Tooltip13, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
-        ToggleButton5,
+      formatButtonsList.map((button) => /* @__PURE__ */ React124.createElement(Tooltip13, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React124.createElement(
+        ToggleButton4,
         {
           value: button.action,
           "aria-label": button.label,
@@ -10408,7 +10405,7 @@ var InlineEditorToolbar = ({
         button.icon
       )))
     ),
-    /* @__PURE__ */ React123.createElement(
+    /* @__PURE__ */ React124.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -10432,7 +10429,7 @@ var checkIfElementIsClickable = (elementId) => {
 var toolbarButtons = {
   clear: {
     label: __64("Clear", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(MinusIcon2, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
@@ -10440,7 +10437,7 @@ var toolbarButtons = {
   },
   bold: {
     label: __64("Bold", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(BoldIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
@@ -10448,7 +10445,7 @@ var toolbarButtons = {
   },
   italic: {
     label: __64("Italic", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(ItalicIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
@@ -10456,7 +10453,7 @@ var toolbarButtons = {
   },
   underline: {
     label: __64("Underline", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
@@ -10464,7 +10461,7 @@ var toolbarButtons = {
   },
   strike: {
     label: __64("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
@@ -10472,7 +10469,7 @@ var toolbarButtons = {
   },
   superscript: {
     label: __64("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
@@ -10480,7 +10477,7 @@ var toolbarButtons = {
   },
   subscript: {
     label: __64("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
@@ -10488,7 +10485,7 @@ var toolbarButtons = {
   },
   link: {
     label: __64("Link", "elementor"),
-    icon: /* @__PURE__ */ React123.createElement(LinkIcon3, { fontSize: "tiny" }),
+    icon: /* @__PURE__ */ React124.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -10509,7 +10506,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
     },
     [setValue]
   );
-  return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(Box33, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
+  return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(Box33, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React125.createElement(
     InlineEditorToolbar,
     {
       editor,
@@ -10522,7 +10519,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       }),
       inControlPanel: true
     }
-  ), /* @__PURE__ */ React124.createElement(
+  ), /* @__PURE__ */ React125.createElement(
     Box33,
     {
       sx: (theme) => ({
@@ -10567,7 +10564,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       ...attributes,
       ...props
     },
-    /* @__PURE__ */ React124.createElement(
+    /* @__PURE__ */ React125.createElement(
       InlineEditor,
       {
         value: content,
@@ -10584,16 +10581,16 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
 });
 
 // src/controls/email-form-action-control/index.tsx
-import * as React128 from "react";
+import * as React129 from "react";
 import { emailsPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
-import { Box as Box34, Divider as Divider7, Stack as Stack25 } from "@elementor/ui";
+import { Box as Box34, Divider as Divider7, Stack as Stack24 } from "@elementor/ui";
 import { __ as __66 } from "@wordpress/i18n";
 
 // src/controls/email-form-action-control/fields.tsx
-import * as React127 from "react";
+import * as React128 from "react";
 import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
-import { Grid as Grid34, Stack as Stack24 } from "@elementor/ui";
+import { Grid as Grid34, Stack as Stack23 } from "@elementor/ui";
 import { __ as __65 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
@@ -10683,7 +10680,7 @@ function useFormFieldSuggestions(options) {
 }
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-import * as React125 from "react";
+import * as React126 from "react";
 import { useMemo as useMemo19, useState as useState24 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
@@ -10760,7 +10757,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
+  return /* @__PURE__ */ React126.createElement(ControlActions, null, /* @__PURE__ */ React126.createElement(
     Autocomplete4,
     {
       fullWidth: true,
@@ -10785,31 +10782,31 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React125.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
-      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React125.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
+      renderInput: (params) => /* @__PURE__ */ React126.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React126.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React125.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(Grid32, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React125.createElement(Grid32, { item: true }, /* @__PURE__ */ React125.createElement(EmailChipsControl, { placeholder, suggestions })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React126.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(Grid32, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React126.createElement(Grid32, { item: true }, /* @__PURE__ */ React126.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
-import * as React126 from "react";
+import * as React127 from "react";
 import { Grid as Grid33 } from "@elementor/ui";
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(Grid33, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(Grid33, { item: true }, /* @__PURE__ */ React126.createElement(TextControl, { placeholder }))));
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React127.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(Grid33, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React127.createElement(Grid33, { item: true }, /* @__PURE__ */ React127.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
 var SendToField = ({ placeholder }) => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React127.createElement(Stack24, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React128.createElement(Stack23, { gap: 0.5 }, /* @__PURE__ */ React128.createElement(
     EmailChipsField,
     {
       fieldLabel: __65("Send to", "elementor"),
       placeholder,
       suggestions
     }
-  ), shouldShowMentionsInfo() && /* @__PURE__ */ React127.createElement(InfoAlert2, null, __65("Type @ or an email field name to insert its submitted value.", "elementor"))));
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React128.createElement(InfoAlert2, null, __65("Type @ or an email field name to insert its submitted value.", "elementor"))));
 };
-var SubjectField = () => /* @__PURE__ */ React127.createElement(
+var SubjectField = () => /* @__PURE__ */ React128.createElement(
   EmailField,
   {
     bind: "subject",
@@ -10819,12 +10816,12 @@ var SubjectField = () => /* @__PURE__ */ React127.createElement(
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React127.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, __65("Message", "elementor"))), /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __65(
+  return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React128.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, __65("Message", "elementor"))), /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __65(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
   ) : __65("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React127.createElement(
+var FromEmailField = () => /* @__PURE__ */ React128.createElement(
   EmailField,
   {
     bind: "from",
@@ -10832,7 +10829,7 @@ var FromEmailField = () => /* @__PURE__ */ React127.createElement(
     placeholder: __65("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React127.createElement(
+var FromNameField = () => /* @__PURE__ */ React128.createElement(
   EmailField,
   {
     bind: "from-name",
@@ -10842,7 +10839,7 @@ var FromNameField = () => /* @__PURE__ */ React127.createElement(
 );
 var ReplyToField = () => {
   const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React127.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, __65("Reply-to", "elementor"))), /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React128.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, __65("Reply-to", "elementor"))), /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
@@ -10854,13 +10851,13 @@ var ReplyToField = () => {
 };
 var CcField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: __65("Cc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React128.createElement(EmailChipsField, { fieldLabel: __65("Cc", "elementor"), suggestions }));
 };
 var BccField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: __65("Bcc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React128.createElement(EmailChipsField, { fieldLabel: __65("Bcc", "elementor"), suggestions }));
 };
-var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React127.createElement(Stack24, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, __65("Metadata", "elementor")), /* @__PURE__ */ React127.createElement(
+var MetaDataField = () => /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React128.createElement(Stack23, { gap: 0.5 }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, __65("Metadata", "elementor")), /* @__PURE__ */ React128.createElement(
   ChipsControl,
   {
     options: [
@@ -10872,7 +10869,7 @@ var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React127.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, __65("Send as", "elementor"))), /* @__PURE__ */ React127.createElement(Grid34, { item: true }, /* @__PURE__ */ React127.createElement(
+var SendAsField = () => /* @__PURE__ */ React128.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React128.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(ControlFormLabel, null, __65("Send as", "elementor"))), /* @__PURE__ */ React128.createElement(Grid34, { item: true }, /* @__PURE__ */ React128.createElement(
   SelectControl,
   {
     options: [
@@ -10886,29 +10883,29 @@ var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
-    return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(Stack25, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + __66("settings", "elementor") : __66("Email settings", "elementor")), /* @__PURE__ */ React128.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React128.createElement(SubjectField, null), /* @__PURE__ */ React128.createElement(MessageField, null), /* @__PURE__ */ React128.createElement(FromEmailField, null), /* @__PURE__ */ React128.createElement(AdvancedSettings, null)));
+    return /* @__PURE__ */ React129.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React129.createElement(Stack24, { gap: 2 }, /* @__PURE__ */ React129.createElement(ControlLabel, null, label ? label + " " + __66("settings", "elementor") : __66("Email settings", "elementor")), /* @__PURE__ */ React129.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React129.createElement(SubjectField, null), /* @__PURE__ */ React129.createElement(MessageField, null), /* @__PURE__ */ React129.createElement(FromEmailField, null), /* @__PURE__ */ React129.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(Box34, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(Stack25, { gap: 2 }, /* @__PURE__ */ React128.createElement(FromNameField, null), /* @__PURE__ */ React128.createElement(ReplyToField, null), /* @__PURE__ */ React128.createElement(CcField, null), /* @__PURE__ */ React128.createElement(BccField, null), /* @__PURE__ */ React128.createElement(Divider7, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React129.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React129.createElement(Box34, { sx: { pt: 2 } }, /* @__PURE__ */ React129.createElement(Stack24, { gap: 2 }, /* @__PURE__ */ React129.createElement(FromNameField, null), /* @__PURE__ */ React129.createElement(ReplyToField, null), /* @__PURE__ */ React129.createElement(CcField, null), /* @__PURE__ */ React129.createElement(BccField, null), /* @__PURE__ */ React129.createElement(Divider7, null), /* @__PURE__ */ React129.createElement(MetaDataField, null), /* @__PURE__ */ React129.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
-import * as React129 from "react";
+import * as React130 from "react";
 import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
 import { Grid as Grid35 } from "@elementor/ui";
 import { __ as __67 } from "@wordpress/i18n";
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React129.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React129.createElement(Grid35, { item: true }, /* @__PURE__ */ React129.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React129.createElement(Grid35, { item: true }, /* @__PURE__ */ React129.createElement(SelectControl, { options })), /* @__PURE__ */ React129.createElement(Grid35, { item: true }, /* @__PURE__ */ React129.createElement(InfoAlert3, null, __67(
+  return /* @__PURE__ */ React130.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React130.createElement(Grid35, { item: true }, /* @__PURE__ */ React130.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React130.createElement(Grid35, { item: true }, /* @__PURE__ */ React130.createElement(SelectControl, { options })), /* @__PURE__ */ React130.createElement(Grid35, { item: true }, /* @__PURE__ */ React130.createElement(InfoAlert3, null, __67(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
 });
 
 // src/controls/notice-control.tsx
-import * as React130 from "react";
+import * as React131 from "react";
 import { useState as useState25 } from "react";
 import { ajax } from "@elementor/editor-v1-adapters";
 import { BulbIcon } from "@elementor/icons";
-import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle4, styled as styled13, Typography as Typography13 } from "@elementor/ui";
+import { Alert as Alert3, AlertAction as AlertAction2, AlertTitle as AlertTitle4, styled as styled13, Typography as Typography12 } from "@elementor/ui";
 var NoticeTitle = styled13(AlertTitle4)({
   "&.MuiAlertTitle-root.MuiAlertTitle-root": {
     marginBottom: 4,
@@ -10928,7 +10925,7 @@ var NoticeControl = createControl(
       return null;
     }
     const severity = noticeType === "danger" ? "error" : noticeType;
-    const icon = noticeType === "info" ? /* @__PURE__ */ React130.createElement(BulbIcon, { fontSize: "inherit" }) : void 0;
+    const icon = noticeType === "info" ? /* @__PURE__ */ React131.createElement(BulbIcon, { fontSize: "inherit" }) : void 0;
     const handleDismiss = () => {
       setIsDismissed(true);
       if (!dismissible) {
@@ -10948,7 +10945,7 @@ var NoticeControl = createControl(
         markNoticeAsDismissedInSession(dismissible);
       }
     };
-    return /* @__PURE__ */ React130.createElement(Alert3, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React130.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React130.createElement(Typography13, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React130.createElement(
+    return /* @__PURE__ */ React131.createElement(Alert3, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React131.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React131.createElement(Typography12, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React131.createElement(
       AlertAction2,
       {
         variant: "contained",
@@ -10965,7 +10962,7 @@ var NoticeControl = createControl(
 );
 
 // src/controls/grid-span-control.tsx
-import * as React131 from "react";
+import * as React132 from "react";
 import { spanPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField13 } from "@elementor/ui";
 var GridSpanControl = createControl(
@@ -10984,7 +10981,7 @@ var GridSpanControl = createControl(
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
+    return /* @__PURE__ */ React132.createElement(ControlActions, null, /* @__PURE__ */ React132.createElement(
       TextField13,
       {
         size: "tiny",
@@ -11005,21 +11002,21 @@ var GridSpanControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React133 from "react";
+import * as React134 from "react";
 import { useRef as useRef34 } from "react";
 import { SitemapIcon } from "@elementor/icons";
-import { IconButton as IconButton10, Stack as Stack26, Tooltip as Tooltip14 } from "@elementor/ui";
+import { IconButton as IconButton11, Stack as Stack25, Tooltip as Tooltip14 } from "@elementor/ui";
 import { __ as __68 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React132 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState26 } from "react";
+import * as React133 from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback5, useImperativeHandle, useState as useState26 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box35 } from "@elementor/ui";
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = forwardRef12(
+var PromotionTrigger = forwardRef13(
   ({ promotionKey, children, trackingData }, ref) => {
     const [isOpen, setIsOpen] = useState26(false);
     const promotion = getV4Promotion(promotionKey);
@@ -11032,7 +11029,7 @@ var PromotionTrigger = forwardRef12(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React132.createElement(React132.Fragment, null, promotion && /* @__PURE__ */ React132.createElement(
+    return /* @__PURE__ */ React133.createElement(React133.Fragment, null, promotion && /* @__PURE__ */ React133.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -11046,7 +11043,7 @@ var PromotionTrigger = forwardRef12(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React132.createElement(
+      /* @__PURE__ */ React133.createElement(
         Box35,
         {
           onClick: (e) => {
@@ -11055,7 +11052,7 @@ var PromotionTrigger = forwardRef12(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React132.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React133.createElement(PromotionChip2, null)
       )
     ));
   }
@@ -11066,8 +11063,8 @@ var ARIA_LABEL = __68("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = useRef34(null);
-  return /* @__PURE__ */ React133.createElement(
-    Stack26,
+  return /* @__PURE__ */ React134.createElement(
+    Stack25,
     {
       direction: "row",
       spacing: 2,
@@ -11076,9 +11073,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React133.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React133.createElement(Tooltip14, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React133.createElement(
-      IconButton10,
+    /* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React134.createElement(Tooltip14, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React134.createElement(
+      IconButton11,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -11090,23 +11087,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React133.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React134.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React134 from "react";
+import * as React135 from "react";
 import { useRef as useRef35 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
-import { Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
+import { Stack as Stack26, Tooltip as Tooltip15 } from "@elementor/ui";
 import { __ as __69 } from "@wordpress/i18n";
 var ARIA_LABEL2 = __69("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = useRef35(null);
-  return /* @__PURE__ */ React134.createElement(
-    Stack27,
+  return /* @__PURE__ */ React135.createElement(
+    Stack26,
     {
       direction: "row",
       spacing: 2,
@@ -11115,8 +11112,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React134.createElement(Tooltip15, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React134.createElement(
+    /* @__PURE__ */ React135.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React135.createElement(Tooltip15, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React135.createElement(
       PlusIcon4,
       {
         "aria-label": ARIA_LABEL2,
@@ -11130,27 +11127,27 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React135 from "react";
+import * as React136 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { IconButton as IconButton11, styled as styled14, Tooltip as Tooltip16 } from "@elementor/ui";
-var CustomIconButton = styled14(IconButton11)(({ theme }) => ({
+import { IconButton as IconButton12, styled as styled14, Tooltip as Tooltip16 } from "@elementor/ui";
+var CustomIconButton = styled14(IconButton12)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React135.createElement(Tooltip16, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React135.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React135.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React136.createElement(Tooltip16, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React136.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React136.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React136 from "react";
+import * as React137 from "react";
 import { useEffect as useEffect21, useState as useState27 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
   bindTrigger as bindTrigger7,
   Box as Box36,
-  IconButton as IconButton12,
+  IconButton as IconButton13,
   Infotip as Infotip4,
   Tooltip as Tooltip17,
-  usePopupState as usePopupState14
+  usePopupState as usePopupState13
 } from "@elementor/ui";
 import { __ as __70 } from "@wordpress/i18n";
 var SIZE12 = "tiny";
@@ -11234,8 +11231,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React136.createElement(
-    IconButton12,
+  const addButton = /* @__PURE__ */ React137.createElement(
+    IconButton13,
     {
       size: SIZE12,
       sx: {
@@ -11245,9 +11242,9 @@ var Repeater3 = ({
       onClick: addRepeaterItem,
       "aria-label": __70("Add item", "elementor")
     },
-    /* @__PURE__ */ React136.createElement(PlusIcon5, { fontSize: SIZE12 })
+    /* @__PURE__ */ React137.createElement(PlusIcon5, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React136.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React136.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React136.createElement(
+  return /* @__PURE__ */ React137.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React137.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React137.createElement(
     Infotip4,
     {
       placement: "right",
@@ -11255,20 +11252,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React136.createElement(Box36, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React136.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React137.createElement(Box36, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React137.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React136.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React136.createElement(
+    return /* @__PURE__ */ React137.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React137.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React136.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React136.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React136.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React136.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React137.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React137.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React137.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React137.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -11282,7 +11279,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React136.createElement(
+      (props) => /* @__PURE__ */ React137.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -11327,7 +11324,7 @@ var RepeaterItem = ({
   const duplicateLabel = __70("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __70("Show", "elementor") : __70("Hide", "elementor");
   const removeLabel = __70("Remove", "elementor");
-  return /* @__PURE__ */ React136.createElement(Box36, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
+  return /* @__PURE__ */ React137.createElement(Box36, { sx: { display: "contents" } }, /* @__PURE__ */ React137.createElement(
     RepeaterTag,
     {
       disabled,
@@ -11342,13 +11339,13 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(Tooltip17, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(Tooltip17, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(Tooltip17, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(XIcon4, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React137.createElement(React137.Fragment, null, showDuplicate && /* @__PURE__ */ React137.createElement(Tooltip17, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(IconButton13, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React137.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React137.createElement(Tooltip17, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(IconButton13, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React137.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React137.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React137.createElement(Tooltip17, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React137.createElement(IconButton13, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React137.createElement(XIcon4, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(Box36, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React137.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React137.createElement(Box36, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState27(null);
-  const popoverState = usePopupState14({ variant: "popover" });
+  const popoverState = usePopupState13({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect21(() => {
     if (openOnMount && ref) {
@@ -11369,7 +11366,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/size/unstable-size-field.tsx
-import * as React139 from "react";
+import * as React140 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -11412,25 +11409,25 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React137 from "react";
-import { useId as useId6 } from "react";
+import * as React138 from "react";
+import { useId as useId5 } from "react";
 import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu5, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu6, styled as styled15, usePopupState as usePopupState15 } from "@elementor/ui";
+import { bindMenu as bindMenu4, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu5, styled as styled15, usePopupState as usePopupState14 } from "@elementor/ui";
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = usePopupState15({
+  const popupState = usePopupState14({
     variant: "popover",
-    popupId: useId6()
+    popupId: useId5()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React137.createElement(Menu6, { MenuListProps: { dense: true }, ...bindMenu5(popupState) }, options.map((option, index) => /* @__PURE__ */ React137.createElement(
+  return /* @__PURE__ */ React138.createElement(React138.Fragment, null, /* @__PURE__ */ React138.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React138.createElement(Menu5, { MenuListProps: { dense: true }, ...bindMenu4(popupState) }, options.map((option, index) => /* @__PURE__ */ React138.createElement(
     MenuListItem8,
     {
       key: option,
@@ -11459,11 +11456,11 @@ var StyledButton3 = styled15(Button7, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React138 from "react";
-import { forwardRef as forwardRef13 } from "react";
-var UnstableSizeInput = forwardRef13(
+import * as React139 from "react";
+import { forwardRef as forwardRef14 } from "react";
+var UnstableSizeInput = forwardRef14(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React138.createElement(
+    return /* @__PURE__ */ React139.createElement(
       NumberInput,
       {
         ref,
@@ -11501,7 +11498,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React139.createElement(
+  return /* @__PURE__ */ React140.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -11510,8 +11507,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React139.createElement(InputAdornment6, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React139.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React139.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React140.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React140.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React140.createElement(
           UnitSelect,
           {
             options: units2,