@elementor/editor-controls 4.4.0-1095 → 4.4.0-1096

package/dist/index.js

@@ -508,7 +508,7 @@ function ControlActions({ children }) {
   if (items2.length === 0 || disabled) {
     return children;
   }
-  const menuItems = items2.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React10.createElement(MenuItem3, { key: id }));
+  const menuItems = items2.map(({ MenuItem: MenuItem4, id }) => /* @__PURE__ */ React10.createElement(MenuItem4, { key: id }));
   return /* @__PURE__ */ React10.createElement(import_editor_ui.FloatingActionsBar, { actions: menuItems }, children);
 }
 
@@ -5388,13 +5388,13 @@ var AspectRatioControl = createControl(({ label }) => {
 });
 
 // src/controls/svg-media-control.tsx
-var React86 = __toESM(require("react"));
-var import_react51 = require("react");
+var React88 = __toESM(require("react"));
+var import_react53 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props35 = require("@elementor/editor-props");
-var import_ui68 = require("@elementor/ui");
+var import_ui70 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
-var import_i18n36 = require("@wordpress/i18n");
+var import_i18n38 = require("@wordpress/i18n");
 
 // src/components/enable-unfiltered-modal.tsx
 var React80 = __toESM(require("react"));
@@ -5462,13 +5462,14 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 }
 
 // src/controls/icon-library/icon-library-popover.tsx
-var React83 = __toESM(require("react"));
-var import_react50 = require("react");
+var React85 = __toESM(require("react"));
+var import_react52 = require("react");
 var import_editor_ui11 = require("@elementor/editor-ui");
-var import_icons22 = require("@elementor/icons");
-var import_ui65 = require("@elementor/ui");
+var import_icons23 = require("@elementor/icons");
+var import_session2 = require("@elementor/session");
+var import_ui67 = require("@elementor/ui");
 var import_utils6 = require("@elementor/utils");
-var import_i18n33 = require("@wordpress/i18n");
+var import_i18n35 = require("@wordpress/i18n");
 
 // src/controls/icon-library/font-awesome-7-data.ts
 var FONT_AWESOME_7_LIBRARIES = [
@@ -5734,6 +5735,11 @@ var import_react49 = require("react");
 var import_icons21 = require("@elementor/icons");
 var import_ui64 = require("@elementor/ui");
 var import_i18n32 = require("@wordpress/i18n");
+
+// src/controls/icon-library/icon-library-tooltip.ts
+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;
@@ -5780,35 +5786,45 @@ var IconLibraryFilter = ({ value, onChange }) => {
     const nextValue = value.includes(library) ? value.filter((selectedLibrary) => selectedLibrary !== library) : [...value, library];
     onChange(nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue);
   };
-  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(import_ui64.Tooltip, { title: (0, import_i18n32.__)("Filter by library", "elementor"), placement: "top" }, /* @__PURE__ */ React82.createElement(
-    import_ui64.ToggleButton,
+  return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
+    import_ui64.Tooltip,
     {
-      "aria-label": filterButtonLabel,
-      value: "filter",
-      size: "tiny",
-      selected: popupState.isOpen,
-      sx: { position: "relative", flexShrink: 0 },
-      ...(0, import_ui64.bindToggle)(popupState),
-      "aria-expanded": popupState.isOpen
+      title: (0, import_i18n32.__)("Filter by library", "elementor"),
+      placement: "top",
+      enterDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
+      enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
+      disableInteractive: true
     },
-    /* @__PURE__ */ React82.createElement(import_icons21.FilterIcon, { fontSize: "tiny" }),
-    isFiltered ? /* @__PURE__ */ React82.createElement(
-      import_ui64.Box,
+    /* @__PURE__ */ React82.createElement(
+      import_ui64.ToggleButton,
       {
-        component: "span",
-        "aria-hidden": "true",
-        sx: {
-          position: "absolute",
-          insetBlockStart: FILTER_INDICATOR_OFFSET,
-          insetInlineEnd: FILTER_INDICATOR_OFFSET,
-          width: FILTER_INDICATOR_SIZE,
-          height: FILTER_INDICATOR_SIZE,
-          borderRadius: "50%",
-          bgcolor: "secondary.main"
+        "aria-label": filterButtonLabel,
+        value: "filter",
+        size: "tiny",
+        selected: popupState.isOpen,
+        sx: { position: "relative", flexShrink: 0 },
+        ...(0, import_ui64.bindToggle)(popupState),
+        "aria-expanded": popupState.isOpen
+      },
+      /* @__PURE__ */ React82.createElement(import_icons21.FilterIcon, { fontSize: "tiny" }),
+      isFiltered ? /* @__PURE__ */ React82.createElement(
+        import_ui64.Box,
+        {
+          component: "span",
+          "aria-hidden": "true",
+          sx: {
+            position: "absolute",
+            insetBlockStart: FILTER_INDICATOR_OFFSET,
+            insetInlineEnd: FILTER_INDICATOR_OFFSET,
+            width: FILTER_INDICATOR_SIZE,
+            height: FILTER_INDICATOR_SIZE,
+            borderRadius: "50%",
+            bgcolor: "secondary.main"
+          }
         }
-      }
-    ) : null
-  )), /* @__PURE__ */ React82.createElement(
+      ) : null
+    )
+  ), /* @__PURE__ */ React82.createElement(
     import_ui64.Menu,
     {
       ...(0, import_ui64.bindMenu)(popupState),
@@ -5842,7 +5858,374 @@ var IconLibraryFilter = ({ value, onChange }) => {
     ))
   ));
 };
-var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui64.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui64.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.CheckIcon, { fontSize: "tiny" }) : null);
+var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui64.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui64.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
+
+// src/controls/icon-library/icon-library-grid.tsx
+var React83 = __toESM(require("react"));
+var import_react50 = require("react");
+var import_ui65 = require("@elementor/ui");
+var import_react_virtual = require("@tanstack/react-virtual");
+var import_i18n33 = require("@wordpress/i18n");
+var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
+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 HOME_END_KEYS = /* @__PURE__ */ new Set(["Home", "End"]);
+var getGridMetrics = (containerWidth, columnGap, inlinePadding) => {
+  const availableWidth = containerWidth - inlinePadding;
+  if (availableWidth <= 0) {
+    return {
+      columnCount: ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT,
+      cellSize: ICON_LIBRARY_GRID_MIN_CELL_SIZE
+    };
+  }
+  const columnCount = Math.max(
+    1,
+    Math.floor((availableWidth + columnGap) / (ICON_LIBRARY_GRID_MIN_CELL_SIZE + columnGap))
+  );
+  const cellSize = Math.floor((availableWidth - columnGap * (columnCount - 1)) / columnCount);
+  return {
+    columnCount,
+    cellSize: Math.max(cellSize, 1)
+  };
+};
+var IconLibraryGrid = ({
+  items: items2,
+  selectedValue,
+  onSelect,
+  onClose,
+  noResultsComponent
+}) => {
+  const theme = (0, import_ui65.useTheme)();
+  const containerRef = (0, import_react50.useRef)(null);
+  const cellRefs = (0, import_react50.useRef)(/* @__PURE__ */ new Map());
+  const shouldRestoreFocusRef = (0, import_react50.useRef)(false);
+  const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
+  const [focusedIndex, setFocusedIndex] = (0, import_react50.useState)(selectedIndex >= 0 ? selectedIndex : 0);
+  const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react50.useState)(() => getGridMetrics(0, 0, 0));
+  const rowCount = Math.ceil(items2.length / columnCount);
+  const virtualizer = (0, import_react_virtual.useVirtualizer)({
+    count: rowCount,
+    getScrollElement: () => containerRef.current,
+    estimateSize: () => cellSize,
+    overscan: GRID_OVERSCAN
+  });
+  const focusedItem = items2[focusedIndex];
+  const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
+  (0, import_react50.useLayoutEffect)(() => {
+    setFocusedIndex((current) => {
+      if (items2.length === 0) {
+        return 0;
+      }
+      if (selectedIndex >= 0) {
+        return selectedIndex;
+      }
+      return Math.min(current, items2.length - 1);
+    });
+    if (selectedIndex >= 0) {
+      virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount));
+    }
+  }, [columnCount, items2, selectedIndex, selectedValue]);
+  (0, import_react50.useLayoutEffect)(() => {
+    if (!shouldRestoreFocusRef.current || !focusedItem) {
+      return;
+    }
+    const cell = cellRefs.current.get(focusedItem.id);
+    if (!cell) {
+      return;
+    }
+    cell.focus();
+    shouldRestoreFocusRef.current = false;
+  }, [focusedItem, visibleRowIndexes]);
+  (0, import_react50.useLayoutEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      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));
+    };
+    measureGrid();
+    const resizeObserver = new ResizeObserver(measureGrid);
+    resizeObserver.observe(container);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [theme, items2.length]);
+  (0, import_react50.useLayoutEffect)(() => {
+    virtualizer.measure();
+  }, [cellSize, columnCount]);
+  const isRtl = theme.direction === "rtl" || document.documentElement.dir === "rtl";
+  const horizontalOffset = isRtl ? -1 : 1;
+  const moveFocus = (nextIndex) => {
+    if (nextIndex < 0 || nextIndex >= items2.length) {
+      return;
+    }
+    shouldRestoreFocusRef.current = true;
+    setFocusedIndex(nextIndex);
+    virtualizer.scrollToIndex(Math.floor(nextIndex / columnCount));
+  };
+  const handleKeyDown = (event, index) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      onSelect(items2[index].id);
+      onClose();
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      moveFocus(index + horizontalOffset);
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      moveFocus(index - horizontalOffset);
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveFocus(index + columnCount);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveFocus(index - columnCount);
+      return;
+    }
+    if (HOME_END_KEYS.has(event.key)) {
+      event.preventDefault();
+      if (event.ctrlKey) {
+        moveFocus(event.key === "Home" ? 0 : items2.length - 1);
+        return;
+      }
+      const rowStart = Math.floor(index / columnCount) * columnCount;
+      const rowEnd = Math.min(rowStart + columnCount - 1, items2.length - 1);
+      moveFocus(event.key === "Home" ? rowStart : rowEnd);
+    }
+  };
+  return /* @__PURE__ */ React83.createElement(
+    import_ui65.Box,
+    {
+      ref: containerRef,
+      sx: {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        overflowX: "hidden",
+        overflowY: "auto"
+      }
+    },
+    items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React83.createElement(
+      import_ui65.Box,
+      {
+        role: "grid",
+        "aria-label": (0, import_i18n33.__)("Icons", "elementor"),
+        "aria-rowcount": rowCount,
+        "aria-colcount": columnCount,
+        "data-testid": "icon-library-grid",
+        sx: {
+          width: "100%",
+          minWidth: 0,
+          height: virtualizer.getTotalSize(),
+          position: "relative"
+        }
+      },
+      virtualizer.getVirtualItems().map((virtualRow) => {
+        const startIndex = virtualRow.index * columnCount;
+        const rowItems = items2.slice(startIndex, startIndex + columnCount);
+        return /* @__PURE__ */ React83.createElement(
+          import_ui65.Box,
+          {
+            key: virtualRow.key,
+            role: "row",
+            "aria-rowindex": virtualRow.index + 1,
+            sx: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: virtualRow.size,
+              transform: `translateY(${virtualRow.start}px)`,
+              display: "grid",
+              gridTemplateColumns: `repeat(${columnCount}, minmax(0, 1fr))`,
+              gap: GRID_COLUMN_GAP,
+              px: GRID_HORIZONTAL_PADDING,
+              boxSizing: "border-box"
+            }
+          },
+          rowItems.map((item, columnIndex) => {
+            const index = startIndex + columnIndex;
+            const isSelected = selectedValue === item.id;
+            const tabIndex = focusedIndex === index ? 0 : -1;
+            return /* @__PURE__ */ React83.createElement(
+              import_ui65.Box,
+              {
+                key: item.id,
+                role: "presentation",
+                sx: { minWidth: 0, minHeight: 0, width: "100%", height: "100%" }
+              },
+              /* @__PURE__ */ React83.createElement(
+                import_ui65.Tooltip,
+                {
+                  title: item.label,
+                  placement: "top",
+                  enterDelay: ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY,
+                  enterNextDelay: ICON_LIBRARY_GRID_TOOLTIP_ENTER_DELAY,
+                  disableInteractive: true,
+                  disableFocusListener: true
+                },
+                /* @__PURE__ */ React83.createElement(
+                  import_ui65.Box,
+                  {
+                    component: "button",
+                    type: "button",
+                    role: "gridcell",
+                    "aria-colindex": columnIndex + 1,
+                    "aria-label": item.label,
+                    "aria-selected": isSelected,
+                    tabIndex,
+                    ref: (node) => {
+                      if (node) {
+                        cellRefs.current.set(item.id, node);
+                      } else {
+                        cellRefs.current.delete(item.id);
+                      }
+                    },
+                    onClick: () => {
+                      onSelect(item.id);
+                      onClose();
+                    },
+                    onFocus: () => setFocusedIndex(index),
+                    onKeyDown: (event) => handleKeyDown(event, index),
+                    sx: {
+                      boxSizing: "border-box",
+                      appearance: "none",
+                      m: 0,
+                      width: "100%",
+                      height: "100%",
+                      minWidth: 0,
+                      minHeight: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      border: "1px solid",
+                      borderColor: "divider",
+                      borderRadius: 1,
+                      color: "text.tertiary",
+                      bgcolor: "transparent",
+                      p: 0,
+                      cursor: "pointer",
+                      font: "inherit",
+                      lineHeight: 0,
+                      overflow: "hidden",
+                      "&:hover, &:focus": {
+                        bgcolor: "action.hover"
+                      },
+                      '&[aria-selected="true"]': {
+                        bgcolor: "action.selected"
+                      },
+                      '&[aria-selected="true"]:hover, &[aria-selected="true"]:focus': {
+                        bgcolor: "action.selected"
+                      }
+                    }
+                  },
+                  item.paths.length > 0 ? /* @__PURE__ */ React83.createElement(
+                    FontAwesomeGlyph,
+                    {
+                      icon: item,
+                      size: ICON_GLYPH_SIZE,
+                      color: "currentColor"
+                    }
+                  ) : null
+                )
+              )
+            );
+          })
+        );
+      })
+    )
+  );
+};
+
+// src/controls/icon-library/icon-library-view-toggle.tsx
+var React84 = __toESM(require("react"));
+var import_react51 = require("react");
+var import_icons22 = require("@elementor/icons");
+var import_ui66 = require("@elementor/ui");
+var import_i18n34 = require("@wordpress/i18n");
+var VIEW_MENU_WIDTH = 122;
+var IconLibraryViewToggle = ({ value, onChange }) => {
+  const popupId = (0, import_react51.useId)();
+  const popupState = (0, import_ui66.usePopupState)({
+    variant: "popover",
+    popupId
+  });
+  const isGrid = value === "grid";
+  const ViewIcon = isGrid ? import_icons22.WidgetsIcon : import_icons22.ListIcon;
+  const viewButtonLabel = isGrid ? (0, import_i18n34.__)("Grid view", "elementor") : (0, import_i18n34.__)("List view", "elementor");
+  return /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(
+    import_ui66.Tooltip,
+    {
+      title: viewButtonLabel,
+      placement: "top",
+      enterDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
+      enterNextDelay: ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY,
+      disableInteractive: true
+    },
+    /* @__PURE__ */ React84.createElement(
+      import_ui66.ToggleButton,
+      {
+        "aria-label": viewButtonLabel,
+        value: "view",
+        size: "tiny",
+        selected: popupState.isOpen,
+        sx: { flexShrink: 0 },
+        ...(0, import_ui66.bindToggle)(popupState),
+        "aria-expanded": popupState.isOpen
+      },
+      /* @__PURE__ */ React84.createElement(ViewIcon, { fontSize: "tiny" })
+    )
+  ), /* @__PURE__ */ React84.createElement(
+    import_ui66.Menu,
+    {
+      ...(0, import_ui66.bindMenu)(popupState),
+      MenuListProps: {
+        dense: true,
+        autoFocusItem: true,
+        "aria-label": (0, import_i18n34.__)("View", "elementor")
+      },
+      sx: { "& .MuiPaper-root": { minWidth: VIEW_MENU_WIDTH } }
+    },
+    /* @__PURE__ */ React84.createElement(
+      ViewMenuItem,
+      {
+        label: (0, import_i18n34.__)("List", "elementor"),
+        selected: value === "list",
+        onClick: () => {
+          onChange("list");
+          popupState.close();
+        }
+      }
+    ),
+    /* @__PURE__ */ React84.createElement(
+      ViewMenuItem,
+      {
+        label: (0, import_i18n34.__)("Grid", "elementor"),
+        selected: value === "grid",
+        onClick: () => {
+          onChange("grid");
+          popupState.close();
+        }
+      }
+    )
+  ));
+};
+var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(import_ui66.MenuItem, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(import_ui66.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(import_ui66.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(import_icons22.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null));
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
 var import_query2 = require("@elementor/query");
@@ -5860,10 +6243,16 @@ function useFontAwesome7Catalog(enabled) {
 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 isIconLibraryView = (value) => {
+  return value === "grid" || value === "list";
+};
 var ICON_TILE_SIZE = 40;
-var ICON_GLYPH_SIZE = 20;
+var ICON_GLYPH_SIZE2 = 20;
 var ICON_LIBRARY_INLINE_SPACING = 1;
-var CompactIconLibraryMenuList = (0, import_ui65.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
+var CompactIconLibraryMenuList = (0, import_ui67.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
   '& > [role="option"]': {
     padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
   }
@@ -5882,13 +6271,18 @@ var IconLibraryPopover = ({
     handleChange: handleSearchChange,
     setImmediateValue: setSearchValue
   } = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
-  const [activeLibraries, setActiveLibraries] = (0, import_react50.useState)([]);
+  const [activeLibraries, setActiveLibraries] = (0, import_react52.useState)([]);
+  const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
+    ICON_LIBRARY_VIEW_STORAGE_KEY,
+    ICON_LIBRARY_VIEW_STORAGE_PREFIX
+  );
+  const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
   const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
-  const items2 = (0, import_react50.useMemo)(
+  const items2 = (0, import_react52.useMemo)(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
   );
-  const selectedValue = (0, import_react50.useMemo)(
+  const selectedValue = (0, import_react52.useMemo)(
     () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
     [icons, selectedIconClass, selectedIconLibrary]
   );
@@ -5910,24 +6304,25 @@ var IconLibraryPopover = ({
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  return /* @__PURE__ */ React83.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React85.createElement(import_editor_ui11.PopoverBody, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React85.createElement(
     import_editor_ui11.PopoverHeader,
     {
-      title: (0, import_i18n33.__)("Icon library", "elementor"),
+      title: (0, import_i18n35.__)("Icon library", "elementor"),
       onClose: handleClose,
-      icon: /* @__PURE__ */ React83.createElement(import_icons22.ComponentsIcon, { fontSize: "tiny" }),
+      icon: /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "tiny" }),
+      actions: [/* @__PURE__ */ React85.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
       sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
     }
-  ), /* @__PURE__ */ React83.createElement(import_ui65.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React83.createElement(
+  ), /* @__PURE__ */ React85.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React85.createElement(
     import_editor_ui11.SearchField,
     {
       value: searchInputValue,
       onSearch: handleSearchChange,
-      placeholder: (0, import_i18n33.__)("Search", "elementor"),
+      placeholder: (0, import_i18n35.__)("Search", "elementor"),
       id: "icon-library-search",
       sx: { flex: 1, px: 0, pb: 0 }
     }
-  ), /* @__PURE__ */ React83.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React83.createElement(import_ui65.Divider, null), /* @__PURE__ */ React83.createElement(import_ui65.Box, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React83.createElement(
+  ), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(import_ui67.Divider, null), /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
     IconLibraryContent,
     {
       isLoading,
@@ -5935,6 +6330,7 @@ var IconLibraryPopover = ({
       selectedValue,
       searchValue,
       isCatalogAvailable: icons.length > 0,
+      view,
       onSelect: handleSelect,
       onClose: handleClose,
       onClearSearch: handleClearSearch
@@ -5947,14 +6343,35 @@ var IconLibraryContent = ({
   selectedValue,
   searchValue,
   isCatalogAvailable,
+  view,
   onSelect,
   onClose,
   onClearSearch
 }) => {
   if (isLoading) {
-    return /* @__PURE__ */ React83.createElement(IconLibraryLoadingState, null);
+    return /* @__PURE__ */ React85.createElement(IconLibraryLoadingState, null);
   }
-  return /* @__PURE__ */ React83.createElement(
+  const emptyState = /* @__PURE__ */ React85.createElement(
+    IconLibraryEmptyState,
+    {
+      searchValue,
+      isCatalogAvailable,
+      onClear: onClearSearch
+    }
+  );
+  if (view === "grid") {
+    return /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
+      IconLibraryGrid,
+      {
+        items: items2,
+        selectedValue,
+        onSelect,
+        onClose,
+        noResultsComponent: emptyState
+      }
+    ));
+  }
+  return /* @__PURE__ */ React85.createElement(
     import_editor_ui11.PopoverMenuList,
     {
       items: items2,
@@ -5964,33 +6381,26 @@ var IconLibraryContent = ({
       onClose,
       itemHeight: ICON_LIBRARY_ROW_HEIGHT,
       menuItemContentTemplate: IconLibraryRow,
-      noResultsComponent: /* @__PURE__ */ React83.createElement(
-        IconLibraryEmptyState,
-        {
-          searchValue,
-          isCatalogAvailable,
-          onClear: onClearSearch
-        }
-      ),
+      noResultsComponent: emptyState,
       "data-testid": "icon-library-list"
     }
   );
 };
-var IconLibraryLoadingState = () => /* @__PURE__ */ React83.createElement(import_ui65.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React83.createElement(import_ui65.CircularProgress, { role: "progressbar", size: 24 }));
+var IconLibraryLoadingState = () => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React85.createElement(import_ui67.CircularProgress, { role: "progressbar", size: 24 }));
 var IconLibraryEmptyState = ({
   searchValue,
   isCatalogAvailable,
   onClear
 }) => {
   if (!isCatalogAvailable) {
-    return /* @__PURE__ */ React83.createElement(CatalogUnavailable, null);
+    return /* @__PURE__ */ React85.createElement(CatalogUnavailable, null);
   }
-  return /* @__PURE__ */ React83.createElement(NoResults, { searchValue, onClear });
+  return /* @__PURE__ */ React85.createElement(NoResults, { searchValue, onClear });
 };
 var IconLibraryRow = (item) => {
   const icon = item;
-  return /* @__PURE__ */ React83.createElement(import_ui65.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React83.createElement(
-    import_ui65.Box,
+  return /* @__PURE__ */ React85.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
+    import_ui67.Box,
     {
       sx: {
         width: ICON_TILE_SIZE,
@@ -6005,11 +6415,11 @@ var IconLibraryRow = (item) => {
         flexShrink: 0
       }
     },
-    icon.paths.length > 0 ? /* @__PURE__ */ React83.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE, color: "currentColor" }) : null
-  ), /* @__PURE__ */ React83.createElement(import_ui65.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
+    icon.paths.length > 0 ? /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" }) : null
+  ), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
-var CatalogUnavailable = () => /* @__PURE__ */ React83.createElement(import_ui65.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React83.createElement(import_icons22.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React83.createElement(import_ui65.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n33.__)("Icons couldn't be loaded.", "elementor")));
-var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React83.createElement(import_ui65.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React83.createElement(import_icons22.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React83.createElement(import_ui65.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n33.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React83.createElement(React83.Fragment, null, /* @__PURE__ */ React83.createElement(import_ui65.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React83.createElement(import_ui65.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n33.__)("Clear & try again", "elementor"))) : null);
+var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React85.createElement(import_ui67.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
 var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
   ...icon,
   type: "item",
@@ -6026,10 +6436,10 @@ function createIconPropValue(icon, library) {
 }
 
 // src/controls/svg-media-overlay.tsx
-var React84 = __toESM(require("react"));
-var import_icons23 = require("@elementor/icons");
-var import_ui66 = require("@elementor/ui");
-var import_i18n34 = require("@wordpress/i18n");
+var React86 = __toESM(require("react"));
+var import_icons24 = require("@elementor/icons");
+var import_ui68 = require("@elementor/ui");
+var import_i18n36 = require("@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;
@@ -6039,7 +6449,7 @@ var svgButtonSx = {
   px: MEDIA_ACTION_PADDING_X,
   py: MEDIA_ACTION_PADDING_Y
 };
-var MediaActionGroup = (0, import_ui66.styled)(import_ui66.Stack)(({ theme }) => ({
+var MediaActionGroup = (0, import_ui68.styled)(import_ui68.Stack)(({ theme }) => ({
   display: "inline-flex",
   flexDirection: "row",
   alignItems: "stretch",
@@ -6061,19 +6471,19 @@ var SvgMediaOverlay = ({
   onOpenIconLibrary,
   infotipTitle,
   infotipDescription
-}) => /* @__PURE__ */ React84.createElement(import_ui66.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React84.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React84.createElement(
-  import_ui66.Button,
+}) => /* @__PURE__ */ React86.createElement(import_ui68.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React86.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React86.createElement(
+  import_ui68.Button,
   {
     size: "tiny",
     color: "inherit",
     variant: "text",
     onClick: onSelectSvg,
-    "aria-label": (0, import_i18n34.__)("Select", "elementor"),
+    "aria-label": (0, import_i18n36.__)("Select", "elementor"),
     sx: svgButtonSx
   },
-  (0, import_i18n34.__)("Select", "elementor")
-), /* @__PURE__ */ React84.createElement(
-  import_ui66.Box,
+  (0, import_i18n36.__)("Select", "elementor")
+), /* @__PURE__ */ React86.createElement(
+  import_ui68.Box,
   {
     sx: {
       width: "1px",
@@ -6082,22 +6492,22 @@ var SvgMediaOverlay = ({
       flexShrink: 0
     }
   }
-), /* @__PURE__ */ React84.createElement(
+), /* @__PURE__ */ React86.createElement(
   ConditionalControlInfotip,
   {
     title: infotipTitle,
     description: infotipDescription,
     isEnabled: !isAdmin
   },
-  /* @__PURE__ */ React84.createElement(import_ui66.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React84.createElement(UploadControl, { isAdmin, onUpload }))
-)), showIconLibrary ? /* @__PURE__ */ React84.createElement(
-  import_ui66.Button,
+  /* @__PURE__ */ React86.createElement(import_ui68.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
+)), showIconLibrary ? /* @__PURE__ */ React86.createElement(
+  import_ui68.Button,
   {
     size: "tiny",
     color: "inherit",
     variant: "text",
-    startIcon: /* @__PURE__ */ React84.createElement(import_icons23.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
-    "aria-label": (0, import_i18n34.__)("Icon library", "elementor"),
+    startIcon: /* @__PURE__ */ React86.createElement(import_icons24.LibraryIcon, { sx: { height: "18px", width: "16px" } }),
+    "aria-label": (0, import_i18n36.__)("Icon library", "elementor"),
     onClick: onOpenIconLibrary,
     sx: {
       height: "28px",
@@ -6105,20 +6515,20 @@ var SvgMediaOverlay = ({
       ".MuiButton-icon": { ml: 0 }
     }
   },
-  /* @__PURE__ */ React84.createElement(import_ui66.Typography, null, (0, import_i18n34.__)("Icon library", "elementor"))
+  /* @__PURE__ */ React86.createElement(import_ui68.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
 ) : null);
 var UploadControl = ({ isAdmin, onUpload }) => {
   if (isAdmin) {
-    return /* @__PURE__ */ React84.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
+    return /* @__PURE__ */ React86.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
   }
-  return /* @__PURE__ */ React84.createElement(import_ui66.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React84.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
+  return /* @__PURE__ */ React86.createElement(import_ui68.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React86.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
 };
 var UploadButton = ({
   disabled = false,
   sx,
   onClick
-}) => /* @__PURE__ */ React84.createElement(
-  import_ui66.Button,
+}) => /* @__PURE__ */ React86.createElement(
+  import_ui68.Button,
   {
     sx,
     size: "tiny",
@@ -6126,15 +6536,15 @@ var UploadButton = ({
     variant: "text",
     disabled,
     onClick,
-    "aria-label": (0, import_i18n34.__)("Upload", "elementor")
+    "aria-label": (0, import_i18n36.__)("Upload", "elementor")
   },
-  /* @__PURE__ */ React84.createElement(import_icons23.UploadIcon, null)
+  /* @__PURE__ */ React86.createElement(import_icons24.UploadIcon, null)
 );
 
 // src/controls/svg-media-preview.tsx
-var React85 = __toESM(require("react"));
-var import_ui67 = require("@elementor/ui");
-var import_i18n35 = require("@wordpress/i18n");
+var React87 = __toESM(require("react"));
+var import_ui69 = require("@elementor/ui");
+var import_i18n37 = require("@wordpress/i18n");
 var ICON_PREVIEW_SIZE = 50;
 var ICON_PREVIEW_COLOR = "#000000";
 var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
@@ -6142,27 +6552,27 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const { data: icons = [], isLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
   if (isFetching || shouldLoadIconCatalog && isLoading) {
-    return /* @__PURE__ */ React85.createElement(import_ui67.CircularProgress, { role: "progressbar" });
+    return /* @__PURE__ */ React87.createElement(import_ui69.CircularProgress, { role: "progressbar" });
   }
   if (selectedIcon) {
-    return /* @__PURE__ */ React85.createElement(IconPreview, { icon: selectedIcon });
+    return /* @__PURE__ */ React87.createElement(IconPreview, { icon: selectedIcon });
   }
   if (shouldLoadIconCatalog) {
-    return /* @__PURE__ */ React85.createElement(IconPreviewPlaceholder, null);
+    return /* @__PURE__ */ React87.createElement(IconPreviewPlaceholder, null);
   }
-  return /* @__PURE__ */ React85.createElement(SvgPreview, { src });
+  return /* @__PURE__ */ React87.createElement(SvgPreview, { src });
 };
-var IconPreview = ({ icon }) => /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React85.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui69.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
   FontAwesomeGlyph,
   {
     icon,
     size: ICON_PREVIEW_SIZE,
     color: ICON_PREVIEW_COLOR,
-    label: (0, import_i18n35.__)("Preview icon", "elementor")
+    label: (0, import_i18n37.__)("Preview icon", "elementor")
   }
 ));
-var IconPreviewPlaceholder = () => /* @__PURE__ */ React85.createElement(
-  import_ui67.Box,
+var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
+  import_ui69.Box,
   {
     "aria-hidden": true,
     sx: {
@@ -6172,12 +6582,12 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React85.createElement(
     }
   }
 );
-var SvgPreview = ({ src }) => /* @__PURE__ */ React85.createElement(
-  import_ui67.CardMedia,
+var SvgPreview = ({ src }) => /* @__PURE__ */ React87.createElement(
+  import_ui69.CardMedia,
   {
     component: "img",
     image: src,
-    alt: (0, import_i18n35.__)("Preview SVG", "elementor"),
+    alt: (0, import_i18n37.__)("Preview SVG", "elementor"),
     sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
   }
 );
@@ -6187,7 +6597,7 @@ var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = (0, import_ui68.styled)(import_ui68.Card)`
+var StyledCard = (0, import_ui70.styled)(import_ui70.Card)`
 	position: relative;
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
@@ -6198,7 +6608,7 @@ var StyledCard = (0, import_ui68.styled)(import_ui68.Card)`
 	border: none;
 `;
 var PREVIEW_ICON_COLOR = "#000000";
-var StyledCardMediaContainer = (0, import_ui68.styled)(import_ui68.Stack)`
+var StyledCardMediaContainer = (0, import_ui70.styled)(import_ui70.Stack)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -6218,11 +6628,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react51.useState)(false);
-  const iconLibraryPopoverState = (0, import_ui68.usePopupState)({ variant: "popover" });
-  const controlContainerRef = (0, import_react51.useRef)(null);
-  const buttonGroupRef = (0, import_react51.useRef)(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react51.useState)(null);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react53.useState)(false);
+  const iconLibraryPopoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
+  const controlContainerRef = (0, import_react53.useRef)(null);
+  const buttonGroupRef = (0, import_react53.useRef)(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react53.useState)(null);
   const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
   const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
   const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -6274,7 +6684,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
     setIconLibraryAnchor(anchor);
     iconLibraryPopoverState.open(event);
   };
-  (0, import_react51.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     if (!iconLibraryPopoverState.isOpen) {
       return;
     }
@@ -6290,8 +6700,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
     };
   }, [iconLibraryPopoverState.isOpen]);
   const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
-  return /* @__PURE__ */ React86.createElement(import_ui68.Stack, { gap: 1, "aria-label": (0, import_i18n36.__)("SVG control", "elementor") }, /* @__PURE__ */ React86.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React86.createElement(
-    import_ui68.Popover,
+  return /* @__PURE__ */ React88.createElement(import_ui70.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React88.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React88.createElement(
+    import_ui70.Popover,
     {
       disableScrollLock: true,
       open: iconLibraryPopoverState.isOpen,
@@ -6310,7 +6720,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         }
       }
     },
-    /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React88.createElement(
       IconLibraryPopover,
       {
         open: iconLibraryPopoverState.isOpen,
@@ -6321,14 +6731,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         width: iconLibraryWidth
       }
     )
-  ) : null, /* @__PURE__ */ React86.createElement(
-    import_ui68.Box,
+  ) : null, /* @__PURE__ */ React88.createElement(
+    import_ui70.Box,
     {
       ref: controlContainerRef,
       "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
       sx: { width: "100%" }
     },
-    /* @__PURE__ */ React86.createElement(ControlActions, null, /* @__PURE__ */ React86.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React86.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React86.createElement(
+    /* @__PURE__ */ React88.createElement(ControlActions, null, /* @__PURE__ */ React88.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React88.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React88.createElement(
       SvgMediaPreview,
       {
         isFetching,
@@ -6336,8 +6746,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         iconClassName: selectedIconClass,
         iconLibrary: selectedIconLibrary
       }
-    )), /* @__PURE__ */ React86.createElement(
-      import_ui68.CardOverlay,
+    )), /* @__PURE__ */ React88.createElement(
+      import_ui70.CardOverlay,
       {
         sx: {
           "&:hover": {
@@ -6345,7 +6755,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
           }
         }
       },
-      /* @__PURE__ */ React86.createElement(
+      /* @__PURE__ */ React88.createElement(
         SvgMediaOverlay,
         {
           isAdmin,
@@ -6354,22 +6764,22 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
           onSelectSvg: handleSelectSvg,
           onUpload: handleUpload,
           onOpenIconLibrary: handleOpenIconLibrary,
-          infotipTitle: (0, import_i18n36.__)("Sorry, you can't upload that file yet.", "elementor"),
-          infotipDescription: /* @__PURE__ */ React86.createElement(UnfilteredUploadInfotipDescription, null)
+          infotipTitle: (0, import_i18n38.__)("Sorry, you can't upload that file yet.", "elementor"),
+          infotipDescription: /* @__PURE__ */ React88.createElement(UnfilteredUploadInfotipDescription, null)
         }
       )
     )))
   ));
 });
-var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React86.createElement(React86.Fragment, null, (0, import_i18n36.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React86.createElement("br", null), (0, import_i18n36.__)("file uploads.", "elementor"));
+var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React88.createElement(React88.Fragment, null, (0, import_i18n38.__)("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React88.createElement("br", null), (0, import_i18n38.__)("file uploads.", "elementor"));
 
 // src/controls/video-media-control.tsx
-var React87 = __toESM(require("react"));
+var React89 = __toESM(require("react"));
 var import_editor_props36 = require("@elementor/editor-props");
-var import_icons24 = require("@elementor/icons");
-var import_ui69 = require("@elementor/ui");
+var import_icons25 = require("@elementor/icons");
+var import_ui71 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
-var import_i18n37 = require("@wordpress/i18n");
+var import_i18n39 = require("@wordpress/i18n");
 var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
 var VideoMediaControl = createControl(() => {
   const { value, setValue, propType } = useBoundProp(import_editor_props36.videoSrcPropTypeUtil);
@@ -6399,8 +6809,8 @@ var VideoMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React87.createElement(ControlActions, null, /* @__PURE__ */ React87.createElement(import_ui69.Card, { variant: "outlined" }, /* @__PURE__ */ React87.createElement(
-    import_ui69.CardMedia,
+  return /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(import_ui71.Card, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(
+    import_ui71.CardMedia,
     {
       sx: {
         height: 140,
@@ -6414,46 +6824,46 @@ var VideoMediaControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React87.createElement(VideoPreview, { isFetching, videoUrl })
-  ), /* @__PURE__ */ React87.createElement(import_ui69.CardOverlay, null, /* @__PURE__ */ React87.createElement(import_ui69.Stack, { gap: 1 }, /* @__PURE__ */ React87.createElement(
-    import_ui69.Button,
+    /* @__PURE__ */ React89.createElement(VideoPreview, { isFetching, videoUrl })
+  ), /* @__PURE__ */ React89.createElement(import_ui71.CardOverlay, null, /* @__PURE__ */ React89.createElement(import_ui71.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(
+    import_ui71.Button,
     {
       size: "tiny",
       color: "inherit",
       variant: "outlined",
       onClick: () => open({ mode: "browse" })
     },
-    (0, import_i18n37.__)("Select video", "elementor")
-  ), /* @__PURE__ */ React87.createElement(
-    import_ui69.Button,
+    (0, import_i18n39.__)("Select video", "elementor")
+  ), /* @__PURE__ */ React89.createElement(
+    import_ui71.Button,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React87.createElement(import_icons24.UploadIcon, null),
+      startIcon: /* @__PURE__ */ React89.createElement(import_icons25.UploadIcon, null),
       onClick: () => open({ mode: "upload" })
     },
-    (0, import_i18n37.__)("Upload", "elementor")
-  ), /* @__PURE__ */ React87.createElement(
-    import_ui69.Button,
+    (0, import_i18n39.__)("Upload", "elementor")
+  ), /* @__PURE__ */ React89.createElement(
+    import_ui71.Button,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
       onClick: () => open({ mode: "url", currentUrl: currentUrlForModal })
     },
-    (0, import_i18n37.__)("Insert from URL", "elementor")
+    (0, import_i18n39.__)("Insert from URL", "elementor")
   )))));
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
   if (isFetching) {
-    return /* @__PURE__ */ React87.createElement(import_ui69.CircularProgress, null);
+    return /* @__PURE__ */ React89.createElement(import_ui71.CircularProgress, null);
   }
   if (videoUrl) {
-    return /* @__PURE__ */ React87.createElement(
+    return /* @__PURE__ */ React89.createElement(
       "video",
       {
-        "aria-label": (0, import_i18n37.__)("Video preview", "elementor"),
+        "aria-label": (0, import_i18n39.__)("Video preview", "elementor"),
         src: videoUrl,
         muted: true,
         preload: "metadata",
@@ -6466,30 +6876,30 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ React87.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
+  return /* @__PURE__ */ React89.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
 };
 
 // src/controls/background-control/background-control.tsx
-var React94 = __toESM(require("react"));
+var React96 = __toESM(require("react"));
 var import_editor_props42 = require("@elementor/editor-props");
-var import_ui77 = require("@elementor/ui");
-var import_i18n43 = require("@wordpress/i18n");
+var import_ui79 = require("@elementor/ui");
+var import_i18n45 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-var React93 = __toESM(require("react"));
+var React95 = __toESM(require("react"));
 var import_editor_props41 = require("@elementor/editor-props");
-var import_ui76 = require("@elementor/ui");
+var import_ui78 = require("@elementor/ui");
 var import_wp_media4 = require("@elementor/wp-media");
-var import_i18n42 = require("@wordpress/i18n");
+var import_i18n44 = require("@wordpress/i18n");
 
 // src/env.ts
 var import_env = require("@elementor/env");
 var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-var React88 = __toESM(require("react"));
+var React90 = __toESM(require("react"));
 var import_editor_props37 = require("@elementor/editor-props");
-var import_ui70 = require("@elementor/ui");
+var import_ui72 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
   const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
@@ -6527,8 +6937,8 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React88.createElement(
-    import_ui70.UnstableGradientBox,
+  return /* @__PURE__ */ React90.createElement(
+    import_ui72.UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
@@ -6552,53 +6962,53 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-var React89 = __toESM(require("react"));
-var import_icons25 = require("@elementor/icons");
-var import_ui71 = require("@elementor/ui");
-var import_i18n38 = require("@wordpress/i18n");
+var React91 = __toESM(require("react"));
+var import_icons26 = require("@elementor/icons");
+var import_ui73 = require("@elementor/ui");
+var import_i18n40 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: (0, import_i18n38.__)("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React89.createElement(import_icons25.PinIcon, { fontSize: size }),
+    label: (0, import_i18n40.__)("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons26.PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: (0, import_i18n38.__)("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React89.createElement(import_icons25.PinnedOffIcon, { fontSize: size }),
+    label: (0, import_i18n40.__)("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons26.PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React89.createElement(PopoverGridContainer, null, /* @__PURE__ */ React89.createElement(import_ui71.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlFormLabel, null, (0, import_i18n38.__)("Attachment", "elementor"))), /* @__PURE__ */ React89.createElement(import_ui71.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React89.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-var React90 = __toESM(require("react"));
-var import_react52 = require("react");
+var React92 = __toESM(require("react"));
+var import_react54 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
 var import_editor_ui12 = require("@elementor/editor-ui");
-var import_icons26 = require("@elementor/icons");
-var import_ui72 = require("@elementor/ui");
-var import_i18n39 = require("@wordpress/i18n");
+var import_icons27 = require("@elementor/icons");
+var import_ui74 = require("@elementor/ui");
+var import_i18n41 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
-  { label: (0, import_i18n39.__)("Center center", "elementor"), value: "center center" },
-  { label: (0, import_i18n39.__)("Center left", "elementor"), value: "center left" },
-  { label: (0, import_i18n39.__)("Center right", "elementor"), value: "center right" },
-  { label: (0, import_i18n39.__)("Top center", "elementor"), value: "top center" },
-  { label: (0, import_i18n39.__)("Top left", "elementor"), value: "top left" },
-  { label: (0, import_i18n39.__)("Top right", "elementor"), value: "top right" },
-  { label: (0, import_i18n39.__)("Bottom center", "elementor"), value: "bottom center" },
-  { label: (0, import_i18n39.__)("Bottom left", "elementor"), value: "bottom left" },
-  { label: (0, import_i18n39.__)("Bottom right", "elementor"), value: "bottom right" },
-  { label: (0, import_i18n39.__)("Custom", "elementor"), value: "custom" }
+  { label: (0, import_i18n41.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n41.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n41.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n41.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n41.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n41.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n41.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n41.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n41.__)("Bottom right", "elementor"), value: "bottom right" },
+  { label: (0, import_i18n41.__)("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react52.useRef)(null);
+  const rowRef = (0, import_react54.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -6607,8 +7017,8 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React90.createElement(import_ui72.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React90.createElement(PopoverGridContainer, null, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(ControlFormLabel, null, (0, import_i18n39.__)("Position", "elementor"))), /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React90.createElement(ControlActions, null, /* @__PURE__ */ React90.createElement(
-    import_ui72.Select,
+  return /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ControlActions, null, /* @__PURE__ */ React92.createElement(
+    import_ui74.Select,
     {
       fullWidth: true,
       size: "tiny",
@@ -6616,18 +7026,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React90.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React90.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React90.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
+  ))))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React90.createElement(import_icons26.LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React90.createElement(import_ui72.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React90.createElement(
+  ))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React90.createElement(import_icons26.LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -6635,70 +7045,70 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-var React91 = __toESM(require("react"));
-var import_icons27 = require("@elementor/icons");
-var import_ui73 = require("@elementor/ui");
-var import_i18n40 = require("@wordpress/i18n");
+var React93 = __toESM(require("react"));
+var import_icons28 = require("@elementor/icons");
+var import_ui75 = require("@elementor/ui");
+var import_i18n42 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: (0, import_i18n40.__)("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.GridDotsIcon, { fontSize: size }),
+    label: (0, import_i18n42.__)("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: (0, import_i18n40.__)("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.DotsHorizontalIcon, { fontSize: size }),
+    label: (0, import_i18n42.__)("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: (0, import_i18n40.__)("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.DotsVerticalIcon, { fontSize: size }),
+    label: (0, import_i18n42.__)("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: (0, import_i18n40.__)("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(import_icons27.XIcon, { fontSize: size }),
+    label: (0, import_i18n42.__)("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React93.createElement(import_icons28.XIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Repeat", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React93.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-var React92 = __toESM(require("react"));
-var import_react53 = require("react");
+var React94 = __toESM(require("react"));
+var import_react55 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
-var import_icons28 = require("@elementor/icons");
-var import_ui74 = require("@elementor/ui");
-var import_i18n41 = require("@wordpress/i18n");
+var import_icons29 = require("@elementor/icons");
+var import_ui76 = require("@elementor/ui");
+var import_i18n43 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
     value: "auto",
-    label: (0, import_i18n41.__)("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.LetterAIcon, { fontSize: size }),
+    label: (0, import_i18n43.__)("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: (0, import_i18n41.__)("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.ArrowsMaximizeIcon, { fontSize: size }),
+    label: (0, import_i18n43.__)("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: (0, import_i18n41.__)("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.ArrowBarBothIcon, { fontSize: size }),
+    label: (0, import_i18n43.__)("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: (0, import_i18n41.__)("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React92.createElement(import_icons28.PencilIcon, { fontSize: size }),
+    label: (0, import_i18n43.__)("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React94.createElement(import_icons29.PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -6706,7 +7116,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react53.useRef)(null);
+  const rowRef = (0, import_react55.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -6714,7 +7124,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Size", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React94.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -6723,17 +7133,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React92.createElement(
+  )))), isCustom ? /* @__PURE__ */ React94.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React94.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React92.createElement(import_icons28.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React92.createElement(
+  ))), /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React94.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React92.createElement(import_icons28.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -6741,9 +7151,9 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react54 = require("react");
+var import_react56 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
-var import_ui75 = require("@elementor/ui");
+var import_ui77 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
@@ -6761,8 +7171,8 @@ var useBackgroundTabsHistory = ({
     }
     return "image";
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui75.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react54.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui77.useTabs)(getCurrentOverlayType());
+  const valuesHistory = (0, import_react56.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -6830,29 +7240,29 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: (0, import_i18n42.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: (0, import_i18n42.__)("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: (0, import_i18n42.__)("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: (0, import_i18n42.__)("Full", "elementor"), value: "full" }
+  { label: (0, import_i18n44.__)("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: (0, import_i18n44.__)("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: (0, import_i18n44.__)("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: (0, import_i18n44.__)("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(import_editor_props41.backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React93.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React95.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React95.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: import_editor_props41.backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React93.createElement(RepeaterHeader, { label: (0, import_i18n42.__)("Overlay", "elementor") }, /* @__PURE__ */ React93.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React93.createElement(ItemsContainer, null, /* @__PURE__ */ React93.createElement(
+    /* @__PURE__ */ React95.createElement(RepeaterHeader, { label: (0, import_i18n44.__)("Overlay", "elementor") }, /* @__PURE__ */ React95.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React95.createElement(ItemsContainer, null, /* @__PURE__ */ React95.createElement(
       Item,
       {
         Icon: ItemIcon2,
         Label: ItemLabel3,
-        actions: /* @__PURE__ */ React93.createElement(React93.Fragment, null, /* @__PURE__ */ React93.createElement(DuplicateItemAction, null), /* @__PURE__ */ React93.createElement(DisableItemAction, null), /* @__PURE__ */ React93.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, /* @__PURE__ */ React95.createElement(DuplicateItemAction, null), /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React93.createElement(EditItemPopover, null, /* @__PURE__ */ React93.createElement(ItemContent2, null))
+    /* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(ItemContent2, null))
   ));
 });
 var ItemContent2 = () => {
@@ -6862,27 +7272,27 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React93.createElement(import_ui76.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React93.createElement(import_ui76.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React93.createElement(
-    import_ui76.Tabs,
+  return /* @__PURE__ */ React95.createElement(import_ui78.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(import_ui78.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
+    import_ui78.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": (0, import_i18n42.__)("Background Overlay", "elementor")
+      "aria-label": (0, import_i18n44.__)("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React93.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React93.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React93.createElement(import_ui76.Tab, { label: (0, import_i18n42.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React93.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React93.createElement(PopoverContent, null, /* @__PURE__ */ React93.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React93.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React93.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React93.createElement(import_ui76.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React93.createElement(PopoverContent, null, /* @__PURE__ */ React93.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React95.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React93.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React95.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React93.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React95.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React93.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React95.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -6895,12 +7305,12 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React93.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React93.createElement(
-    import_ui76.CardMedia,
+  return /* @__PURE__ */ React95.createElement(
+    import_ui78.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -6914,43 +7324,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React93.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React95.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React93.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React95.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React93.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React95.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React93.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React95.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React93.createElement("span", null, color);
+  return /* @__PURE__ */ React95.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React93.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React95.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React93.createElement("span", null, (0, import_i18n42.__)("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React95.createElement("span", null, (0, import_i18n44.__)("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React93.createElement("span", null, (0, import_i18n42.__)("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React95.createElement("span", null, (0, import_i18n44.__)("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(import_editor_props41.backgroundColorOverlayPropTypeUtil);
-  return /* @__PURE__ */ React93.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React93.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React95.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
-  return /* @__PURE__ */ React93.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React93.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React93.createElement(BackgroundImageOverlayAttachment, null)));
+  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)));
 };
-var StyledUnstableColorIndicator3 = (0, import_ui76.styled)(import_ui76.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator3 = (0, import_ui78.styled)(import_ui78.UnstableColorIndicator)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -6989,29 +7399,29 @@ var getGradientValue = (value) => {
 
 // src/controls/background-control/background-control.tsx
 var clipOptions = [
-  { label: (0, import_i18n43.__)("Full element", "elementor"), value: "border-box" },
-  { label: (0, import_i18n43.__)("Padding edges", "elementor"), value: "padding-box" },
-  { label: (0, import_i18n43.__)("Content edges", "elementor"), value: "content-box" },
-  { label: (0, import_i18n43.__)("Text", "elementor"), value: "text" }
+  { label: (0, import_i18n45.__)("Full element", "elementor"), value: "border-box" },
+  { label: (0, import_i18n45.__)("Padding edges", "elementor"), value: "padding-box" },
+  { label: (0, import_i18n45.__)("Content edges", "elementor"), value: "content-box" },
+  { label: (0, import_i18n45.__)("Text", "elementor"), value: "text" }
 ];
-var colorLabel = (0, import_i18n43.__)("Color", "elementor");
-var clipLabel = (0, import_i18n43.__)("Clipping", "elementor");
+var colorLabel = (0, import_i18n45.__)("Color", "elementor");
+var clipLabel = (0, import_i18n45.__)("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(import_editor_props42.backgroundPropTypeUtil);
-  return /* @__PURE__ */ React94.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React94.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React94.createElement(BackgroundColorField, null), /* @__PURE__ */ React94.createElement(BackgroundClipField, null));
+  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));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
-var React95 = __toESM(require("react"));
-var import_react55 = require("react");
+var React97 = __toESM(require("react"));
+var import_react57 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
-var import_ui78 = require("@elementor/ui");
+var import_ui80 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -7030,11 +7440,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = (0, import_react55.useMemo)(
+    const childArrayPropTypeUtil2 = (0, import_react57.useMemo)(
       () => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react55.useMemo)(
+    const contextValue = (0, import_react57.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -7044,14 +7454,14 @@ var RepeatableControl = createControl(
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
     const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
-    return /* @__PURE__ */ React95.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React95.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React95.createElement(
+    return /* @__PURE__ */ React97.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React97.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React97.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil2,
         isItemDisabled: isItemDisabled2
       },
-      /* @__PURE__ */ React95.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React95.createElement(
+      /* @__PURE__ */ React97.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React97.createElement(
         TooltipAddItemAction,
         {
           ...addItemTooltipProps,
@@ -7059,22 +7469,22 @@ var RepeatableControl = createControl(
           ariaLabel: repeaterLabel
         }
       )),
-      /* @__PURE__ */ React95.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React95.createElement(
+      /* @__PURE__ */ React97.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React97.createElement(
         Item,
         {
           Icon: ItemIcon3,
           Label: ItemLabel4,
-          actions: /* @__PURE__ */ React95.createElement(React95.Fragment, null, showDuplicate && /* @__PURE__ */ React95.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React95.createElement(DisableItemAction, null), /* @__PURE__ */ React95.createElement(RemoveItemAction, null))
+          actions: /* @__PURE__ */ React97.createElement(React97.Fragment, null, showDuplicate && /* @__PURE__ */ React97.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React97.createElement(DisableItemAction, null), /* @__PURE__ */ React97.createElement(RemoveItemAction, null))
         }
       )),
-      /* @__PURE__ */ React95.createElement(EditItemPopover, null, /* @__PURE__ */ React95.createElement(Content2, null))
+      /* @__PURE__ */ React97.createElement(EditItemPopover, null, /* @__PURE__ */ React97.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon3 = () => /* @__PURE__ */ React95.createElement(React95.Fragment, null);
+var ItemIcon3 = () => /* @__PURE__ */ React97.createElement(React97.Fragment, null);
 var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React95.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React95.createElement(PopoverGridContainer, null, /* @__PURE__ */ React95.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React97.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, null, /* @__PURE__ */ React97.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -7157,7 +7567,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React95.createElement(import_ui78.Box, { component: "span", color }, label);
+  return /* @__PURE__ */ React97.createElement(import_ui80.Box, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -7165,11 +7575,11 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-var React96 = __toESM(require("react"));
-var import_react56 = require("react");
+var React98 = __toESM(require("react"));
+var import_react58 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
-var import_ui79 = require("@elementor/ui");
-var import_i18n44 = require("@wordpress/i18n");
+var import_ui81 = require("@elementor/ui");
+var import_i18n46 = require("@wordpress/i18n");
 
 // src/utils/escape-html-attr.ts
 var escapeHtmlAttr = (value) => {
@@ -7193,23 +7603,23 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react56.useState)("");
-  const [valueError, setValueError] = (0, import_react56.useState)("");
-  const [sessionState, setSessionState] = (0, import_react56.useState)({
+  const [keyError, setKeyError] = (0, import_react58.useState)("");
+  const [valueError, setValueError] = (0, import_react58.useState)("");
+  const [sessionState, setSessionState] = (0, import_react58.useState)({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
-  const keyLabel = props.keyName || (0, import_i18n44.__)("Key", "elementor");
-  const valueLabel = props.valueName || (0, import_i18n44.__)("Value", "elementor");
+  const keyLabel = props.keyName || (0, import_i18n46.__)("Key", "elementor");
+  const valueLabel = props.valueName || (0, import_i18n46.__)("Value", "elementor");
   const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = (0, import_react56.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react58.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || (0, import_i18n44.__)("Invalid Format", "elementor")
+      props.validationErrorMessage || (0, import_i18n46.__)("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -7258,14 +7668,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React96.createElement(import_ui79.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React96.createElement(
+  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui81.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React98.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React96.createElement(import_ui79.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React96.createElement(import_ui79.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React96.createElement(
+  )), !!keyError && /* @__PURE__ */ React98.createElement(import_ui81.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui81.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React98.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -7273,27 +7683,27 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React96.createElement(import_ui79.FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React98.createElement(import_ui81.FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-var React97 = __toESM(require("react"));
+var React99 = __toESM(require("react"));
 var import_editor_props45 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
-var import_icons29 = require("@elementor/icons");
-var import_ui80 = require("@elementor/ui");
-var import_i18n45 = require("@wordpress/i18n");
+var import_icons30 = require("@elementor/icons");
+var import_ui82 = require("@elementor/ui");
+var import_i18n47 = require("@wordpress/i18n");
 var positionOptions = [
-  { label: (0, import_i18n45.__)("Center center", "elementor"), value: "center center" },
-  { label: (0, import_i18n45.__)("Center left", "elementor"), value: "center left" },
-  { label: (0, import_i18n45.__)("Center right", "elementor"), value: "center right" },
-  { label: (0, import_i18n45.__)("Top center", "elementor"), value: "top center" },
-  { label: (0, import_i18n45.__)("Top left", "elementor"), value: "top left" },
-  { label: (0, import_i18n45.__)("Top right", "elementor"), value: "top right" },
-  { label: (0, import_i18n45.__)("Bottom center", "elementor"), value: "bottom center" },
-  { label: (0, import_i18n45.__)("Bottom left", "elementor"), value: "bottom left" },
-  { label: (0, import_i18n45.__)("Bottom right", "elementor"), value: "bottom right" },
-  { label: (0, import_i18n45.__)("Custom", "elementor"), value: "custom" }
+  { label: (0, import_i18n47.__)("Center center", "elementor"), value: "center center" },
+  { label: (0, import_i18n47.__)("Center left", "elementor"), value: "center left" },
+  { label: (0, import_i18n47.__)("Center right", "elementor"), value: "center right" },
+  { label: (0, import_i18n47.__)("Top center", "elementor"), value: "top center" },
+  { label: (0, import_i18n47.__)("Top left", "elementor"), value: "top left" },
+  { label: (0, import_i18n47.__)("Top right", "elementor"), value: "top right" },
+  { label: (0, import_i18n47.__)("Bottom center", "elementor"), value: "bottom center" },
+  { label: (0, import_i18n47.__)("Bottom left", "elementor"), value: "bottom left" },
+  { label: (0, import_i18n47.__)("Bottom right", "elementor"), value: "bottom right" },
+  { label: (0, import_i18n47.__)("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(import_editor_props45.positionPropTypeUtil);
@@ -7308,8 +7718,8 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlFormLabel, null, (0, import_i18n45.__)("Object position", "elementor"))), /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React97.createElement(
-    import_ui80.Select,
+  return /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React99.createElement(
+    import_ui82.Select,
     {
       size: "tiny",
       displayEmpty: true,
@@ -7319,29 +7729,29 @@ var PositionControl = () => {
       renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React97.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React97.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React97.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React99.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React99.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React99.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React97.createElement(import_icons29.LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterXIcon, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React97.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React97.createElement(
+  ))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React99.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React97.createElement(import_icons29.LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterYIcon, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-var React110 = __toESM(require("react"));
-var import_react64 = require("react");
+var React112 = __toESM(require("react"));
+var import_react66 = require("react");
 var import_editor_props54 = require("@elementor/editor-props");
-var import_icons36 = require("@elementor/icons");
-var import_ui93 = require("@elementor/ui");
-var import_i18n55 = require("@wordpress/i18n");
+var import_icons37 = require("@elementor/icons");
+var import_ui95 = require("@elementor/ui");
+var import_i18n57 = require("@wordpress/i18n");
 
 // src/controls/transform-control/initial-values.ts
 var import_editor_props46 = require("@elementor/editor-props");
@@ -7390,24 +7800,24 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-var React104 = __toESM(require("react"));
-var import_ui88 = require("@elementor/ui");
-var import_i18n50 = require("@wordpress/i18n");
+var React106 = __toESM(require("react"));
+var import_ui90 = require("@elementor/ui");
+var import_i18n52 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
-var React99 = __toESM(require("react"));
-var import_react57 = require("react");
+var React101 = __toESM(require("react"));
+var import_react59 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
-var import_icons30 = require("@elementor/icons");
-var import_ui82 = require("@elementor/ui");
-var import_i18n46 = require("@wordpress/i18n");
+var import_icons31 = require("@elementor/icons");
+var import_ui84 = require("@elementor/ui");
+var import_i18n48 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/axis-row.tsx
-var React98 = __toESM(require("react"));
-var import_ui81 = require("@elementor/ui");
+var React100 = __toESM(require("react"));
+var import_ui83 = require("@elementor/ui");
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React98.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(
     SizeControl,
     {
       anchorRef,
@@ -7423,28 +7833,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: (0, import_i18n46.__)("Move X", "elementor"),
+    label: (0, import_i18n48.__)("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React99.createElement(import_icons30.ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
-    label: (0, import_i18n46.__)("Move Y", "elementor"),
+    label: (0, import_i18n48.__)("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React99.createElement(import_icons30.ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
-    label: (0, import_i18n46.__)("Move Z", "elementor"),
+    label: (0, import_i18n48.__)("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React99.createElement(import_icons30.ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React101.createElement(import_icons31.ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
-  const rowRefs = [(0, import_react57.useRef)(null), (0, import_react57.useRef)(null), (0, import_react57.useRef)(null)];
-  return /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(PropProvider, { ...context }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React99.createElement(
+  const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
+  return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -7457,34 +7867,34 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-var React100 = __toESM(require("react"));
-var import_react58 = require("react");
+var React102 = __toESM(require("react"));
+var import_react60 = require("react");
 var import_editor_props48 = require("@elementor/editor-props");
-var import_icons31 = require("@elementor/icons");
-var import_ui83 = require("@elementor/ui");
-var import_i18n47 = require("@wordpress/i18n");
+var import_icons32 = require("@elementor/icons");
+var import_ui85 = require("@elementor/ui");
+var import_i18n49 = require("@wordpress/i18n");
 var rotateAxisControls = [
   {
-    label: (0, import_i18n47.__)("Rotate X", "elementor"),
+    label: (0, import_i18n49.__)("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React100.createElement(import_icons31.Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React102.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny" })
   },
   {
-    label: (0, import_i18n47.__)("Rotate Y", "elementor"),
+    label: (0, import_i18n49.__)("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React100.createElement(import_icons31.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React102.createElement(import_icons32.Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
-    label: (0, import_i18n47.__)("Rotate Z", "elementor"),
+    label: (0, import_i18n49.__)("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React100.createElement(import_icons31.RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React102.createElement(import_icons32.RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
-  const rowRefs = [(0, import_react58.useRef)(null), (0, import_react58.useRef)(null), (0, import_react58.useRef)(null)];
-  return /* @__PURE__ */ React100.createElement(import_ui83.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React100.createElement(PropProvider, { ...context }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React100.createElement(
+  const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
+  return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -7496,68 +7906,68 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-var React102 = __toESM(require("react"));
-var import_react59 = require("react");
+var React104 = __toESM(require("react"));
+var import_react61 = require("react");
 var import_editor_props49 = require("@elementor/editor-props");
-var import_icons32 = require("@elementor/icons");
-var import_ui85 = require("@elementor/ui");
-var import_i18n48 = require("@wordpress/i18n");
+var import_icons33 = require("@elementor/icons");
+var import_ui87 = require("@elementor/ui");
+var import_i18n50 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-var React101 = __toESM(require("react"));
-var import_ui84 = require("@elementor/ui");
+var React103 = __toESM(require("react"));
+var import_ui86 = require("@elementor/ui");
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React101.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React101.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(ControlLabel, null, label)), /* @__PURE__ */ React101.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React101.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, label)), /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var scaleAxisControls = [
   {
-    label: (0, import_i18n48.__)("Scale X", "elementor"),
+    label: (0, import_i18n50.__)("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React102.createElement(import_icons32.ArrowRightIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
-    label: (0, import_i18n48.__)("Scale Y", "elementor"),
+    label: (0, import_i18n50.__)("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React102.createElement(import_icons32.ArrowDownSmallIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowDownSmallIcon, { fontSize: "tiny" })
   },
   {
-    label: (0, import_i18n48.__)("Scale Z", "elementor"),
+    label: (0, import_i18n50.__)("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React102.createElement(import_icons32.ArrowDownLeftIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React104.createElement(import_icons33.ArrowDownLeftIcon, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
-  const rowRefs = [(0, import_react59.useRef)(null), (0, import_react59.useRef)(null), (0, import_react59.useRef)(null)];
-  return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
+  return /* @__PURE__ */ React104.createElement(import_ui87.Grid, { 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] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-var React103 = __toESM(require("react"));
-var import_react60 = require("react");
+var React105 = __toESM(require("react"));
+var import_react62 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
-var import_icons33 = require("@elementor/icons");
-var import_ui86 = require("@elementor/ui");
-var import_i18n49 = require("@wordpress/i18n");
+var import_icons34 = require("@elementor/icons");
+var import_ui88 = require("@elementor/ui");
+var import_i18n51 = require("@wordpress/i18n");
 var skewAxisControls = [
   {
-    label: (0, import_i18n49.__)("Skew X", "elementor"),
+    label: (0, import_i18n51.__)("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React103.createElement(import_icons33.ArrowRightIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React105.createElement(import_icons34.ArrowRightIcon, { fontSize: "tiny" })
   },
   {
-    label: (0, import_i18n49.__)("Skew Y", "elementor"),
+    label: (0, import_i18n51.__)("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React103.createElement(import_icons33.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React105.createElement(import_icons34.ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
-  const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
-  return /* @__PURE__ */ React103.createElement(import_ui86.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React103.createElement(
+  const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
+  return /* @__PURE__ */ React105.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -7569,9 +7979,9 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react61 = require("react");
+var import_react63 = require("react");
 var import_editor_props51 = require("@elementor/editor-props");
-var import_ui87 = require("@elementor/ui");
+var import_ui89 = require("@elementor/ui");
 var useTransformTabsHistory = ({
   move: initialMove,
   scale: initialScale,
@@ -7595,8 +8005,8 @@ var useTransformTabsHistory = ({
         return TransformFunctionKeys.move;
     }
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui87.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react61.useRef)({
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui89.useTabs)(getCurrentTransformType());
+  const valuesHistory = (0, import_react63.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -7657,8 +8067,8 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React104.createElement(PopoverContent, null, /* @__PURE__ */ React104.createElement(import_ui88.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React104.createElement(import_ui88.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React104.createElement(
-    import_ui88.Tabs,
+  return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(import_ui90.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(import_ui90.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
+    import_ui90.Tabs,
     {
       size: "small",
       variant: "fullWidth",
@@ -7668,37 +8078,37 @@ var TransformContent = () => {
         }
       },
       ...getTabsProps(),
-      "aria-label": (0, import_i18n50.__)("Transform", "elementor")
+      "aria-label": (0, import_i18n52.__)("Transform", "elementor")
     },
-    /* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React104.createElement(import_ui88.Tab, { label: (0, import_i18n50.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React104.createElement(Move, null)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React104.createElement(Scale, null)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React104.createElement(Rotate, null)), /* @__PURE__ */ React104.createElement(import_ui88.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React104.createElement(Skew, null))));
+    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React106.createElement(Move, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React106.createElement(Scale, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React106.createElement(Rotate, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React106.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-var React105 = __toESM(require("react"));
-var import_icons34 = require("@elementor/icons");
+var React107 = __toESM(require("react"));
+var import_icons35 = require("@elementor/icons");
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React105.createElement(import_icons34.ArrowsMaximizeIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React107.createElement(import_icons35.ArrowsMaximizeIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React105.createElement(import_icons34.ArrowAutofitHeightIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React107.createElement(import_icons35.ArrowAutofitHeightIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React105.createElement(import_icons34.RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React107.createElement(import_icons35.RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React105.createElement(import_icons34.SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React107.createElement(import_icons35.SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-var React106 = __toESM(require("react"));
-var import_ui89 = require("@elementor/ui");
-var import_i18n51 = require("@wordpress/i18n");
+var React108 = __toESM(require("react"));
+var import_ui91 = require("@elementor/ui");
+var import_i18n53 = require("@wordpress/i18n");
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
   return orderedAxis.map((axisKey) => {
@@ -7716,98 +8126,98 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Move", "elementor"), value: formatLabel(value, "move") });
+      return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Move", "elementor"), value: formatLabel(value, "move") });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
+      return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Scale", "elementor"), value: formatLabel(value, "scale") });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
+      return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Rotate", "elementor"), value: formatLabel(value, "rotate") });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React106.createElement(Label2, { label: (0, import_i18n51.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
+      return /* @__PURE__ */ React108.createElement(Label2, { label: (0, import_i18n53.__)("Skew", "elementor"), value: formatLabel(value, "skew") });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React106.createElement(import_ui89.Box, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React108.createElement(import_ui91.Box, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-var React109 = __toESM(require("react"));
+var React111 = __toESM(require("react"));
 var import_editor_ui14 = require("@elementor/editor-ui");
-var import_icons35 = require("@elementor/icons");
-var import_ui92 = require("@elementor/ui");
-var import_i18n54 = require("@wordpress/i18n");
+var import_icons36 = require("@elementor/icons");
+var import_ui94 = require("@elementor/ui");
+var import_i18n56 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-var React107 = __toESM(require("react"));
-var import_react62 = require("react");
+var React109 = __toESM(require("react"));
+var import_react64 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
-var import_ui90 = require("@elementor/ui");
-var import_i18n52 = require("@wordpress/i18n");
+var import_ui92 = require("@elementor/ui");
+var import_i18n54 = require("@wordpress/i18n");
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
-  label: (0, import_i18n52.__)("Perspective", "elementor"),
+  label: (0, import_i18n54.__)("Perspective", "elementor"),
   bind: "perspective",
   units: ["px", "em", "rem", "vw", "vh"]
 };
 var CHILDREN_PERSPECTIVE_FIELDS = [
   {
-    label: (0, import_i18n52.__)("Origin X", "elementor"),
+    label: (0, import_i18n54.__)("Origin X", "elementor"),
     bind: "x",
     units: ORIGIN_UNITS
   },
   {
-    label: (0, import_i18n52.__)("Origin Y", "elementor"),
+    label: (0, import_i18n54.__)("Origin Y", "elementor"),
     bind: "y",
     units: ORIGIN_UNITS
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React107.createElement(import_ui90.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React107.createElement(ControlFormLabel, null, (0, import_i18n52.__)("Children perspective", "elementor")), /* @__PURE__ */ React107.createElement(PerspectiveControl, null), /* @__PURE__ */ React107.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React109.createElement(import_ui92.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React109.createElement(PerspectiveControl, null), /* @__PURE__ */ React109.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React107.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React107.createElement(PerspectiveOriginControlProvider, 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 PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(import_editor_props52.perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React107.createElement(ControlFields, { control }))));
+  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 }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = (0, import_react62.useRef)(null);
-  return /* @__PURE__ */ React107.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React107.createElement(import_ui90.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React107.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React107.createElement(import_ui90.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React107.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  const rowRef = (0, import_react64.useRef)(null);
+  return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-var React108 = __toESM(require("react"));
-var import_react63 = require("react");
+var React110 = __toESM(require("react"));
+var import_react65 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
-var import_ui91 = require("@elementor/ui");
-var import_i18n53 = require("@wordpress/i18n");
+var import_ui93 = require("@elementor/ui");
+var import_i18n55 = require("@wordpress/i18n");
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
 var TRANSFORM_ORIGIN_FIELDS = [
   {
-    label: (0, import_i18n53.__)("Origin X", "elementor"),
+    label: (0, import_i18n55.__)("Origin X", "elementor"),
     bind: "x",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: (0, import_i18n53.__)("Origin Y", "elementor"),
+    label: (0, import_i18n55.__)("Origin Y", "elementor"),
     bind: "y",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: (0, import_i18n53.__)("Origin Z", "elementor"),
+    label: (0, import_i18n55.__)("Origin Z", "elementor"),
     bind: "z",
     units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React108.createElement(import_ui91.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, (0, import_i18n53.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React108.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React110.createElement(import_ui93.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
-  const rowRef = (0, import_react63.useRef)(null);
-  return /* @__PURE__ */ React108.createElement(PropProvider, { ...context }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React108.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React108.createElement(import_ui91.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React108.createElement(import_ui91.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React108.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
+  const rowRef = (0, import_react65.useRef)(null);
+  return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -7817,12 +8227,12 @@ var TransformSettingsControl = ({
   anchorRef,
   showChildrenPerspective
 }) => {
-  const popupProps = (0, import_ui92.bindPopover)({
+  const popupProps = (0, import_ui94.bindPopover)({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React109.createElement(
-    import_ui92.Popover,
+  return /* @__PURE__ */ React111.createElement(
+    import_ui94.Popover,
     {
       disablePortal: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
@@ -7836,16 +8246,16 @@ var TransformSettingsControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React109.createElement(
+    /* @__PURE__ */ React111.createElement(
       import_editor_ui14.PopoverHeader,
       {
-        title: (0, import_i18n54.__)("Transform settings", "elementor"),
+        title: (0, import_i18n56.__)("Transform settings", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React109.createElement(import_icons35.AdjustmentsIcon, { fontSize: SIZE10 })
+        icon: /* @__PURE__ */ React111.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE10 })
       }
     ),
-    /* @__PURE__ */ React109.createElement(import_ui92.Divider, null),
-    /* @__PURE__ */ React109.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React109.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(import_ui92.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React109.createElement(import_ui92.Divider, null)), /* @__PURE__ */ React109.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React111.createElement(import_ui94.Divider, 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(import_ui94.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(import_ui94.Divider, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -7854,27 +8264,27 @@ var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
-    const headerRef = (0, import_react64.useRef)(null);
-    const popupState = (0, import_ui93.usePopupState)({ variant: "popover" });
-    return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(
+    const headerRef = (0, import_react66.useRef)(null);
+    const popupState = (0, import_ui95.usePopupState)({ variant: "popover" });
+    return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
       TransformSettingsControl,
       {
         popupState,
         anchorRef: headerRef,
         showChildrenPerspective
       }
-    ), /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React110.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
+    ), /* @__PURE__ */ React112.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React112.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
   }
 );
-var ToolTip = /* @__PURE__ */ React110.createElement(
-  import_ui93.Box,
+var ToolTip = /* @__PURE__ */ React112.createElement(
+  import_ui95.Box,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React110.createElement(import_icons36.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React110.createElement(import_ui93.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n55.__)("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React112.createElement(import_icons37.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React112.createElement(import_ui95.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -7888,21 +8298,21 @@ var Repeater2 = ({
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue2();
-  return /* @__PURE__ */ React110.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React110.createElement(
+  return /* @__PURE__ */ React112.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React112.createElement(
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: import_editor_props54.transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React112.createElement(
       RepeaterHeader,
       {
-        label: (0, import_i18n55.__)("Transform", "elementor"),
-        adornment: () => /* @__PURE__ */ React110.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
+        label: (0, import_i18n57.__)("Transform", "elementor"),
+        adornment: () => /* @__PURE__ */ React112.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
         ref: headerRef
       },
-      /* @__PURE__ */ React110.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
-      /* @__PURE__ */ React110.createElement(
+      /* @__PURE__ */ React112.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
+      /* @__PURE__ */ React112.createElement(
         TooltipAddItemAction,
         {
           disabled: shouldDisableAddItem,
@@ -7912,15 +8322,15 @@ var Repeater2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React110.createElement(ItemsContainer, null, /* @__PURE__ */ React110.createElement(
+    /* @__PURE__ */ React112.createElement(ItemsContainer, null, /* @__PURE__ */ React112.createElement(
       Item,
       {
         Icon: TransformIcon,
         Label: TransformLabel,
-        actions: /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(DisableItemAction, null), /* @__PURE__ */ React110.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React112.createElement(React112.Fragment, null, /* @__PURE__ */ React112.createElement(DisableItemAction, null), /* @__PURE__ */ React112.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React110.createElement(EditItemPopover, null, /* @__PURE__ */ React110.createElement(TransformContent, null))
+    /* @__PURE__ */ React112.createElement(EditItemPopover, null, /* @__PURE__ */ React112.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -7928,30 +8338,30 @@ var TransformBasePopoverTrigger = ({
   repeaterBindKey
 }) => {
   const { bind } = useBoundProp();
-  const titleLabel = (0, import_i18n55.__)("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React110.createElement(import_ui93.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React110.createElement(import_ui93.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui93.bindTrigger)(popupState) }, /* @__PURE__ */ React110.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE11 })));
+  const titleLabel = (0, import_i18n57.__)("Transform settings", "elementor");
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React112.createElement(import_ui95.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React112.createElement(import_ui95.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui95.bindTrigger)(popupState) }, /* @__PURE__ */ React112.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-var React113 = __toESM(require("react"));
-var import_react67 = require("react");
+var React115 = __toESM(require("react"));
+var import_react69 = require("react");
 var import_editor_props57 = require("@elementor/editor-props");
-var import_icons38 = require("@elementor/icons");
-var import_ui96 = require("@elementor/ui");
+var import_icons39 = require("@elementor/icons");
+var import_ui98 = require("@elementor/ui");
 var import_utils8 = require("@elementor/utils");
-var import_i18n58 = require("@wordpress/i18n");
+var import_i18n60 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
-var React111 = __toESM(require("react"));
-var import_react65 = require("react");
+var React113 = __toESM(require("react"));
+var import_react67 = require("react");
 var import_editor_props55 = require("@elementor/editor-props");
-var import_ui94 = require("@elementor/ui");
+var import_ui96 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react65.useRef)(null);
+    const rowRef = (0, import_react67.useRef)(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = (0, import_react65.useMemo)(() => {
+    const currentSizeConfig = (0, import_react67.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -7962,7 +8372,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React111.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React111.createElement(import_ui94.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React111.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React111.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React111.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React111.createElement(
+    return /* @__PURE__ */ React113.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React113.createElement(import_ui96.Grid, { 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(import_ui96.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React113.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -7977,12 +8387,12 @@ var SelectionSizeControl = createControl(
 
 // src/controls/transition-control/data.ts
 var import_utils7 = require("@elementor/utils");
-var import_i18n56 = require("@wordpress/i18n");
+var import_i18n58 = require("@wordpress/i18n");
 var initialTransitionValue = {
   selection: {
     $$type: "key-value",
     value: {
-      key: { value: (0, import_i18n56.__)("All properties", "elementor"), $$type: "string" },
+      key: { value: (0, import_i18n58.__)("All properties", "elementor"), $$type: "string" },
       value: { value: "all", $$type: "string" }
     }
   },
@@ -8006,128 +8416,128 @@ var createTransitionPropertiesList = () => {
   const isSiteRtl = getIsSiteRtl();
   const baseProperties = [
     {
-      label: (0, import_i18n56.__)("Default", "elementor"),
+      label: (0, import_i18n58.__)("Default", "elementor"),
       type: "category",
-      properties: [{ label: (0, import_i18n56.__)("All properties", "elementor"), value: "all" }]
+      properties: [{ label: (0, import_i18n58.__)("All properties", "elementor"), value: "all" }]
     },
     {
-      label: (0, import_i18n56.__)("Margin", "elementor"),
+      label: (0, import_i18n58.__)("Margin", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
-        { label: (0, import_i18n56.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
+        { label: (0, import_i18n58.__)("Margin (all)", "elementor"), value: "margin", isDisabled: true },
+        { label: (0, import_i18n58.__)("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? (0, import_i18n56.__)("Margin right", "elementor") : (0, import_i18n56.__)("Margin left", "elementor"),
+          label: isSiteRtl ? (0, import_i18n58.__)("Margin right", "elementor") : (0, import_i18n58.__)("Margin left", "elementor"),
           value: "margin-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? (0, import_i18n56.__)("Margin left", "elementor") : (0, import_i18n56.__)("Margin right", "elementor"),
+          label: isSiteRtl ? (0, import_i18n58.__)("Margin left", "elementor") : (0, import_i18n58.__)("Margin right", "elementor"),
           value: "margin-inline-end",
           isDisabled: true
         },
-        { label: (0, import_i18n56.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
+        { label: (0, import_i18n58.__)("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Padding", "elementor"),
+      label: (0, import_i18n58.__)("Padding", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
-        { label: (0, import_i18n56.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
+        { label: (0, import_i18n58.__)("Padding (all)", "elementor"), value: "padding", isDisabled: true },
+        { label: (0, import_i18n58.__)("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? (0, import_i18n56.__)("Padding right", "elementor") : (0, import_i18n56.__)("Padding left", "elementor"),
+          label: isSiteRtl ? (0, import_i18n58.__)("Padding right", "elementor") : (0, import_i18n58.__)("Padding left", "elementor"),
           value: "padding-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? (0, import_i18n56.__)("Padding left", "elementor") : (0, import_i18n56.__)("Padding right", "elementor"),
+          label: isSiteRtl ? (0, import_i18n58.__)("Padding left", "elementor") : (0, import_i18n58.__)("Padding right", "elementor"),
           value: "padding-inline-end",
           isDisabled: true
         },
-        { label: (0, import_i18n56.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
+        { label: (0, import_i18n58.__)("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Flex", "elementor"),
+      label: (0, import_i18n58.__)("Flex", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
-        { label: (0, import_i18n56.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
-        { label: (0, import_i18n56.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
-        { label: (0, import_i18n56.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
+        { label: (0, import_i18n58.__)("Flex (all)", "elementor"), value: "flex", isDisabled: true },
+        { label: (0, import_i18n58.__)("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
+        { label: (0, import_i18n58.__)("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
+        { label: (0, import_i18n58.__)("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Size", "elementor"),
+      label: (0, import_i18n58.__)("Size", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Width", "elementor"), value: "width", isDisabled: true },
-        { label: (0, import_i18n56.__)("Height", "elementor"), value: "height", isDisabled: true },
-        { label: (0, import_i18n56.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
-        { label: (0, import_i18n56.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
-        { label: (0, import_i18n56.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
-        { label: (0, import_i18n56.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
+        { label: (0, import_i18n58.__)("Width", "elementor"), value: "width", isDisabled: true },
+        { label: (0, import_i18n58.__)("Height", "elementor"), value: "height", isDisabled: true },
+        { label: (0, import_i18n58.__)("Max height", "elementor"), value: "max-height", isDisabled: true },
+        { label: (0, import_i18n58.__)("Max width", "elementor"), value: "max-width", isDisabled: true },
+        { label: (0, import_i18n58.__)("Min height", "elementor"), value: "min-height", isDisabled: true },
+        { label: (0, import_i18n58.__)("Min width", "elementor"), value: "min-width", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Position", "elementor"),
+      label: (0, import_i18n58.__)("Position", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
+        { label: (0, import_i18n58.__)("Top", "elementor"), value: "inset-block-start", isDisabled: true },
         {
-          label: isSiteRtl ? (0, import_i18n56.__)("Right", "elementor") : (0, import_i18n56.__)("Left", "elementor"),
+          label: isSiteRtl ? (0, import_i18n58.__)("Right", "elementor") : (0, import_i18n58.__)("Left", "elementor"),
           value: "inset-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? (0, import_i18n56.__)("Left", "elementor") : (0, import_i18n56.__)("Right", "elementor"),
+          label: isSiteRtl ? (0, import_i18n58.__)("Left", "elementor") : (0, import_i18n58.__)("Right", "elementor"),
           value: "inset-inline-end",
           isDisabled: true
         },
-        { label: (0, import_i18n56.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
-        { label: (0, import_i18n56.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
+        { label: (0, import_i18n58.__)("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
+        { label: (0, import_i18n58.__)("Z-index", "elementor"), value: "z-index", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Typography", "elementor"),
+      label: (0, import_i18n58.__)("Typography", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Font color", "elementor"), value: "color", isDisabled: true },
-        { label: (0, import_i18n56.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
-        { label: (0, import_i18n56.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
-        { label: (0, import_i18n56.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
-        { label: (0, import_i18n56.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
-        { label: (0, import_i18n56.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
-        { label: (0, import_i18n56.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
+        { label: (0, import_i18n58.__)("Font color", "elementor"), value: "color", isDisabled: true },
+        { label: (0, import_i18n58.__)("Font size", "elementor"), value: "font-size", isDisabled: true },
+        { label: (0, import_i18n58.__)("Line height", "elementor"), value: "line-height", isDisabled: true },
+        { label: (0, import_i18n58.__)("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
+        { label: (0, import_i18n58.__)("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
+        { label: (0, import_i18n58.__)("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
+        { label: (0, import_i18n58.__)("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Background", "elementor"),
+      label: (0, import_i18n58.__)("Background", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
-        { label: (0, import_i18n56.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
-        { label: (0, import_i18n56.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
+        { label: (0, import_i18n58.__)("Background color", "elementor"), value: "background-color", isDisabled: true },
+        { label: (0, import_i18n58.__)("Background position", "elementor"), value: "background-position", isDisabled: true },
+        { label: (0, import_i18n58.__)("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Border", "elementor"),
+      label: (0, import_i18n58.__)("Border", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
-        { label: (0, import_i18n56.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
-        { label: (0, import_i18n56.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
-        { label: (0, import_i18n56.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
+        { label: (0, import_i18n58.__)("Border (all)", "elementor"), value: "border", isDisabled: true },
+        { label: (0, import_i18n58.__)("Border radius", "elementor"), value: "border-radius", isDisabled: true },
+        { label: (0, import_i18n58.__)("Border color", "elementor"), value: "border-color", isDisabled: true },
+        { label: (0, import_i18n58.__)("Border width", "elementor"), value: "border-width", isDisabled: true }
       ]
     },
     {
-      label: (0, import_i18n56.__)("Effects", "elementor"),
+      label: (0, import_i18n58.__)("Effects", "elementor"),
       type: "category",
       properties: [
-        { label: (0, import_i18n56.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
-        { label: (0, import_i18n56.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
-        { label: (0, import_i18n56.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
+        { label: (0, import_i18n58.__)("Opacity", "elementor"), value: "opacity", isDisabled: true },
+        { label: (0, import_i18n58.__)("Transform (all)", "elementor"), value: "transform", isDisabled: true },
+        { label: (0, import_i18n58.__)("Filter (all)", "elementor"), value: "filter", isDisabled: true }
       ]
     }
   ];
@@ -8163,13 +8573,13 @@ function subscribeToTransitionEvent() {
 }
 
 // src/controls/transition-control/transition-selector.tsx
-var React112 = __toESM(require("react"));
-var import_react66 = require("react");
+var React114 = __toESM(require("react"));
+var import_react68 = require("react");
 var import_editor_props56 = require("@elementor/editor-props");
 var import_editor_ui15 = require("@elementor/editor-ui");
-var import_icons37 = require("@elementor/icons");
-var import_ui95 = require("@elementor/ui");
-var import_i18n57 = require("@wordpress/i18n");
+var import_icons38 = require("@elementor/icons");
+var import_ui97 = require("@elementor/ui");
+var import_i18n59 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
 var import_editor_elements6 = require("@elementor/editor-elements");
@@ -8250,9 +8660,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react66.useRef)(null);
-  const popoverState = (0, import_ui95.usePopupState)({ variant: "popover" });
-  const disabledCategories = (0, import_react66.useMemo)(() => {
+  const defaultRef = (0, import_react68.useRef)(null);
+  const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
+  const disabledCategories = (0, import_react68.useMemo)(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -8272,7 +8682,7 @@ var TransitionSelector = ({
     return [
       first,
       {
-        label: (0, import_i18n57.__)("Recently Used", "elementor"),
+        label: (0, import_i18n59.__)("Recently Used", "elementor"),
         items: recentItems
       },
       ...rest
@@ -8296,27 +8706,27 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React112.createElement(import_ui95.Box, { ref: defaultRef }, /* @__PURE__ */ React112.createElement(ControlActions, null, /* @__PURE__ */ React112.createElement(
-    import_ui95.UnstableTag,
+  return /* @__PURE__ */ React114.createElement(import_ui97.Box, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
+    import_ui97.UnstableTag,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React112.createElement(import_icons37.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui95.bindTrigger)(popoverState),
+      endIcon: /* @__PURE__ */ React114.createElement(import_icons38.ChevronDownIcon, { fontSize: "tiny" }),
+      ...(0, import_ui97.bindTrigger)(popoverState),
       fullWidth: true
     }
-  )), /* @__PURE__ */ React112.createElement(
-    import_ui95.Popover,
+  )), /* @__PURE__ */ React114.createElement(
+    import_ui97.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
-      ...(0, import_ui95.bindPopover)(popoverState),
+      ...(0, import_ui97.bindPopover)(popoverState),
       anchorReference: "anchorPosition",
       anchorPosition: getAnchorPosition(),
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React112.createElement(
+    /* @__PURE__ */ React114.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -8324,11 +8734,11 @@ var TransitionSelector = ({
         onItemChange: handleTransitionPropertyChange,
         onClose: popoverState.close,
         sectionWidth: 268,
-        title: (0, import_i18n57.__)("Transition Property", "elementor"),
-        icon: import_icons37.VariationsIcon,
+        title: (0, import_i18n59.__)("Transition Property", "elementor"),
+        icon: import_icons38.VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
-        categoryItemContentTemplate: (item) => /* @__PURE__ */ React112.createElement(
-          import_ui95.Box,
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React114.createElement(
+          import_ui97.Box,
           {
             sx: {
               display: "flex",
@@ -8337,13 +8747,13 @@ var TransitionSelector = ({
               width: "100%"
             }
           },
-          /* @__PURE__ */ React112.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React112.createElement(import_editor_ui15.PromotionChip, null)
+          /* @__PURE__ */ React114.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React114.createElement(import_editor_ui15.PromotionChip, null)
         ),
-        footer: showPromotion ? /* @__PURE__ */ React112.createElement(
+        footer: showPromotion ? /* @__PURE__ */ React114.createElement(
           import_editor_ui15.PromotionAlert,
           {
-            message: (0, import_i18n57.__)(
+            message: (0, import_i18n59.__)(
               "Upgrade to customize transition properties and control effects.",
               "elementor"
             ),
@@ -8382,8 +8792,8 @@ var areAllPropertiesUsed = (value = []) => {
 };
 var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
-    selectionLabel: (0, import_i18n58.__)("Type", "elementor"),
-    sizeLabel: (0, import_i18n58.__)("Duration", "elementor"),
+    selectionLabel: (0, import_i18n60.__)("Type", "elementor"),
+    sizeLabel: (0, import_i18n60.__)("Duration", "elementor"),
     selectionConfig: {
       component: TransitionSelector,
       props: {
@@ -8459,18 +8869,18 @@ var getInitialValue = (values = []) => {
   }
   return initialTransitionValue;
 };
-var disableAddItemTooltipContent = /* @__PURE__ */ React113.createElement(
-  import_ui96.Alert,
+var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
+  import_ui98.Alert,
   {
     sx: {
       width: 280,
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React113.createElement(import_icons38.InfoCircleFilledIcon, null)
+    icon: /* @__PURE__ */ React115.createElement(import_icons39.InfoCircleFilledIcon, null)
   },
-  /* @__PURE__ */ React113.createElement(import_ui96.AlertTitle, null, (0, import_i18n58.__)("Transitions", "elementor")),
-  /* @__PURE__ */ React113.createElement(import_ui96.Box, { component: "span" }, /* @__PURE__ */ React113.createElement(import_ui96.Typography, { variant: "body2" }, (0, import_i18n58.__)("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React115.createElement(import_ui98.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
+  /* @__PURE__ */ React115.createElement(import_ui98.Box, { component: "span" }, /* @__PURE__ */ React115.createElement(import_ui98.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -8478,14 +8888,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react67.useState)([]);
+    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react69.useState)([]);
     const proInstalled = (0, import_utils8.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react67.useMemo)(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react69.useMemo)(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = (0, import_react67.useMemo)(() => {
+    const allowedTransitionSet = (0, import_react69.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -8496,7 +8906,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    (0, import_react67.useEffect)(() => {
+    (0, import_react69.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -8508,18 +8918,18 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    (0, import_react67.useEffect)(() => {
+    (0, import_react69.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = (0, import_react67.useMemo)(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = (0, import_react69.useMemo)(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
-    return /* @__PURE__ */ React113.createElement(
+    return /* @__PURE__ */ React115.createElement(
       RepeatableControl,
       {
-        label: (0, import_i18n58.__)("Transitions", "elementor"),
-        repeaterLabel: (0, import_i18n58.__)("Transitions", "elementor"),
+        label: (0, import_i18n60.__)("Transitions", "elementor"),
+        repeaterLabel: (0, import_i18n60.__)("Transitions", "elementor"),
         patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
-        placeholder: (0, import_i18n58.__)("Empty Transition", "elementor"),
+        placeholder: (0, import_i18n60.__)("Empty Transition", "elementor"),
         showDuplicate: false,
         showToggle: true,
         initialValues: getInitialValue(value),
@@ -8540,11 +8950,11 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/controls/date-time-control.tsx
-var React114 = __toESM(require("react"));
+var React116 = __toESM(require("react"));
 var dayjs = __toESM(require("dayjs"));
 var import_editor_props58 = require("@elementor/editor-props");
 var import_editor_props59 = require("@elementor/editor-props");
-var import_ui97 = require("@elementor/ui");
+var import_ui99 = require("@elementor/ui");
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -8588,8 +8998,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React114.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(import_ui97.LocalizationProvider, null, /* @__PURE__ */ React114.createElement(import_ui97.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React114.createElement(
-    import_ui97.DatePicker,
+  return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(import_ui99.LocalizationProvider, null, /* @__PURE__ */ React116.createElement(import_ui99.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
+    import_ui99.DatePicker,
     {
       value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
@@ -8600,8 +9010,8 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
         openPickerIcon: { fontSize: "tiny" }
       }
     }
-  )), /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React114.createElement(
-    import_ui97.TimePicker,
+  )), /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React116.createElement(
+    import_ui99.TimePicker,
     {
       value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
@@ -8616,15 +9026,15 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/date-range-control.tsx
-var React116 = __toESM(require("react"));
+var React118 = __toESM(require("react"));
 var import_editor_props61 = require("@elementor/editor-props");
-var import_ui99 = require("@elementor/ui");
-var import_i18n59 = require("@wordpress/i18n");
+var import_ui101 = require("@elementor/ui");
+var import_i18n61 = require("@wordpress/i18n");
 
 // src/controls/date-string-control.tsx
-var React115 = __toESM(require("react"));
+var React117 = __toESM(require("react"));
 var import_editor_props60 = require("@elementor/editor-props");
-var import_ui98 = require("@elementor/ui");
+var import_ui100 = require("@elementor/ui");
 
 // src/utils/date-time.ts
 var dayjs2 = __toESM(require("dayjs"));
@@ -8681,8 +9091,8 @@ var DateStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React115.createElement(import_ui98.LocalizationProvider, null, /* @__PURE__ */ React115.createElement(ControlActions, null, /* @__PURE__ */ React115.createElement(
-      import_ui98.DatePicker,
+    return /* @__PURE__ */ React117.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
+      import_ui100.DatePicker,
       {
         value: parseDateString(value ?? ""),
         onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
@@ -8695,8 +9105,8 @@ var DateStringControl = createControl(
 
 // src/controls/date-range-control.tsx
 var RANGE_LABELS = {
-  min: (0, import_i18n59.__)("Min date", "elementor"),
-  max: (0, import_i18n59.__)("Max date", "elementor")
+  min: (0, import_i18n61.__)("Min date", "elementor"),
+  max: (0, import_i18n61.__)("Max date", "elementor")
 };
 var isMaxBeforeMin = (minIso, maxIso) => {
   if (!minIso || !maxIso) {
@@ -8704,40 +9114,40 @@ var isMaxBeforeMin = (minIso, maxIso) => {
   }
   return maxIso < minIso;
 };
-var RANGE_ERROR_MESSAGE = (0, import_i18n59.__)("Max date must be on or after Min date", "elementor");
+var RANGE_ERROR_MESSAGE = (0, import_i18n61.__)("Max date must be on or after Min date", "elementor");
 var DateRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props61.dateRangePropTypeUtil);
   const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
   const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
   const hasInvalidRange = isMaxBeforeMin(minString, maxString);
-  return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(import_ui99.Stack, { gap: 0.75 }, /* @__PURE__ */ React116.createElement(import_ui99.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React116.createElement(import_ui99.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { gap: 0.75 }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
     BoundDateStringControl,
     {
       bind: "min",
       ariaLabel: RANGE_LABELS.min,
       error: hasInvalidRange
     }
-  ))), /* @__PURE__ */ React116.createElement(import_ui99.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React116.createElement(import_ui99.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React116.createElement(
+  ))), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
     BoundDateStringControl,
     {
       bind: "max",
       ariaLabel: RANGE_LABELS.max,
       error: hasInvalidRange
     }
-  )))), hasInvalidRange && /* @__PURE__ */ React116.createElement(import_ui99.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
+  )))), hasInvalidRange && /* @__PURE__ */ React118.createElement(import_ui101.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
 });
 var BoundDateStringControl = ({
   bind,
   ariaLabel,
   error
 }) => {
-  return /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React116.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React118.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
 };
 
 // src/controls/time-string-control.tsx
-var React117 = __toESM(require("react"));
+var React119 = __toESM(require("react"));
 var import_editor_props62 = require("@elementor/editor-props");
-var import_ui100 = require("@elementor/ui");
+var import_ui102 = require("@elementor/ui");
 var TimeStringControl = createControl(
   ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
     const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
@@ -8763,8 +9173,8 @@ var TimeStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React117.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
-      import_ui100.TimePicker,
+    return /* @__PURE__ */ React119.createElement(import_ui102.LocalizationProvider, null, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
+      import_ui102.TimePicker,
       {
         value: parseTimeString(value ?? ""),
         onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
@@ -8776,32 +9186,32 @@ var TimeStringControl = createControl(
 );
 
 // src/controls/time-range-control.tsx
-var React118 = __toESM(require("react"));
+var React120 = __toESM(require("react"));
 var import_editor_props63 = require("@elementor/editor-props");
-var import_ui101 = require("@elementor/ui");
-var import_i18n60 = require("@wordpress/i18n");
+var import_ui103 = require("@elementor/ui");
+var import_i18n62 = require("@wordpress/i18n");
 var RANGE_LABELS2 = {
-  min: (0, import_i18n60.__)("Start time", "elementor"),
-  max: (0, import_i18n60.__)("End time", "elementor")
+  min: (0, import_i18n62.__)("Start time", "elementor"),
+  max: (0, import_i18n62.__)("End time", "elementor")
 };
 var TimeRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
-  return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
+  return /* @__PURE__ */ React120.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React120.createElement(import_ui103.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
 });
 var BoundTimeStringControl = ({ bind, ariaLabel }) => {
-  return /* @__PURE__ */ React118.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React118.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React120.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
 };
 
 // src/controls/inline-editing-control.tsx
-var React122 = __toESM(require("react"));
-var import_react73 = require("react");
+var React124 = __toESM(require("react"));
+var import_react75 = require("react");
 var import_editor_props65 = require("@elementor/editor-props");
-var import_ui105 = require("@elementor/ui");
+var import_ui107 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
-var React119 = __toESM(require("react"));
-var import_react68 = require("react");
-var import_ui102 = require("@elementor/ui");
+var React121 = __toESM(require("react"));
+var import_react70 = require("react");
+var import_ui104 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
 var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
@@ -8814,7 +9224,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
 var import_extension_text = __toESM(require("@tiptap/extension-text"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
-var import_react69 = require("@tiptap/react");
+var import_react71 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
 var import_editor_props64 = require("@elementor/editor-props");
@@ -8846,7 +9256,7 @@ function extractInlineHtmlContent(propValue) {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React119.forwardRef((props, ref) => {
+var InlineEditor = React121.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -8863,8 +9273,8 @@ var InlineEditor = React119.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = (0, import_react68.useRef)(null);
-  const onBlurRef = (0, import_react68.useRef)(onBlur);
+  const containerRef = (0, import_react70.useRef)(null);
+  const onBlurRef = (0, import_react70.useRef)(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -8886,7 +9296,7 @@ var InlineEditor = React119.forwardRef((props, ref) => {
     ...HTMLAttributes,
     class: elementClasses
   });
-  const editor = (0, import_react69.useEditor)({
+  const editor = (0, import_react71.useEditor)({
     ...mountElement ? { element: mountElement } : {},
     extensions: [
       import_extension_document.default.extend({
@@ -8959,11 +9369,11 @@ var InlineEditor = React119.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React119.createElement(import_ui102.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React119.createElement(import_react69.EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react71.EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = (0, import_react68.useRef)(false);
-  (0, import_react68.useEffect)(() => {
+  const hasMounted = (0, import_react70.useRef)(false);
+  (0, import_react70.useEffect)(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -8973,20 +9383,20 @@ var useOnUpdate = (callback, dependencies) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-var React121 = __toESM(require("react"));
-var import_react71 = require("react");
+var React123 = __toESM(require("react"));
+var import_react73 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
-var import_icons40 = require("@elementor/icons");
-var import_ui104 = require("@elementor/ui");
-var import_react72 = require("@tiptap/react");
-var import_i18n62 = require("@wordpress/i18n");
+var import_icons41 = require("@elementor/icons");
+var import_ui106 = require("@elementor/ui");
+var import_react74 = require("@tiptap/react");
+var import_i18n64 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
-var React120 = __toESM(require("react"));
-var import_react70 = require("react");
-var import_icons39 = require("@elementor/icons");
-var import_ui103 = require("@elementor/ui");
-var import_i18n61 = require("@wordpress/i18n");
+var React122 = __toESM(require("react"));
+var import_react72 = require("react");
+var import_icons40 = require("@elementor/icons");
+var import_ui105 = require("@elementor/ui");
+var import_i18n63 = require("@wordpress/i18n");
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -8996,8 +9406,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react70.useRef)(null);
-  (0, import_react70.useEffect)(() => {
+  const inputRef = (0, import_react72.useRef)(null);
+  (0, import_react72.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -9006,41 +9416,41 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React120.createElement(
-    import_ui103.Popover,
+  return /* @__PURE__ */ React122.createElement(
+    import_ui105.Popover,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...(0, import_ui103.bindPopover)(popupState),
+      ...(0, import_ui105.bindPopover)(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React120.createElement(import_ui103.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React120.createElement(
-      import_ui103.TextField,
+    /* @__PURE__ */ React122.createElement(import_ui105.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
+      import_ui105.TextField,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: (0, import_i18n61.__)("Type a URL", "elementor"),
+        placeholder: (0, import_i18n63.__)("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React120.createElement(import_ui103.Tooltip, { title: (0, import_i18n61.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React120.createElement(
-      import_ui103.ToggleButton,
+    ), /* @__PURE__ */ React122.createElement(import_ui105.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
+      import_ui105.ToggleButton,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": (0, import_i18n61.__)("Open in a new tab", "elementor"),
+        "aria-label": (0, import_i18n63.__)("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React120.createElement(import_icons39.ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React122.createElement(import_icons40.ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -9052,16 +9462,16 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = (0, import_react71.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react71.useState)(false);
-  const toolbarRef = (0, import_react71.useRef)(null);
-  const linkPopupState = (0, import_ui104.usePopupState)({ variant: "popover" });
+  const [urlValue, setUrlValue] = (0, import_react73.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react73.useState)(false);
+  const toolbarRef = (0, import_react73.useRef)(null);
+  const linkPopupState = (0, import_ui106.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react72.useEditorState)({
+  const editorState = (0, import_react74.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react71.useMemo)(() => {
+  const formatButtonsList = (0, import_react73.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -9098,13 +9508,13 @@ var InlineEditorToolbar = ({
     }
     linkPopupState.close();
   };
-  (0, import_react71.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     if (!inControlPanel) {
       editor?.commands?.focus();
     }
   }, [editor, inControlPanel]);
-  return /* @__PURE__ */ React121.createElement(
-    import_ui104.Box,
+  return /* @__PURE__ */ React123.createElement(
+    import_ui106.Box,
     {
       ref: toolbarRef,
       sx: {
@@ -9137,9 +9547,9 @@ var InlineEditorToolbar = ({
         }
       }
     },
-    /* @__PURE__ */ React121.createElement(import_ui104.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React121.createElement(import_ui104.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React121.createElement(
-      import_ui104.ToggleButtonGroup,
+    /* @__PURE__ */ React123.createElement(import_ui106.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React123.createElement(import_ui106.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React123.createElement(
+      import_ui106.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -9147,7 +9557,7 @@ var InlineEditorToolbar = ({
           display: "flex",
           gap: 0.5,
           border: "none",
-          [`& .${import_ui104.toggleButtonGroupClasses.firstButton}, & .${import_ui104.toggleButtonGroupClasses.middleButton}, & .${import_ui104.toggleButtonGroupClasses.lastButton}`]: {
+          [`& .${import_ui106.toggleButtonGroupClasses.firstButton}, & .${import_ui106.toggleButtonGroupClasses.middleButton}, & .${import_ui106.toggleButtonGroupClasses.lastButton}`]: {
             borderRadius: "8px",
             border: "none",
             marginLeft: 0,
@@ -9168,8 +9578,8 @@ var InlineEditorToolbar = ({
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React121.createElement(import_ui104.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React121.createElement(
-        import_ui104.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(import_ui106.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
+        import_ui106.ToggleButton,
         {
           value: button.action,
           "aria-label": button.label,
@@ -9186,7 +9596,7 @@ var InlineEditorToolbar = ({
         button.icon
       )))
     ),
-    /* @__PURE__ */ React121.createElement(
+    /* @__PURE__ */ React123.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -9209,64 +9619,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: (0, import_i18n62.__)("Clear", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.MinusIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Clear", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.MinusIcon, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: (0, import_i18n62.__)("Bold", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.BoldIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Bold", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: (0, import_i18n62.__)("Italic", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.ItalicIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Italic", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: (0, import_i18n62.__)("Underline", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.UnderlineIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Underline", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: (0, import_i18n62.__)("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.StrikethroughIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: (0, import_i18n62.__)("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.SuperscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: (0, import_i18n62.__)("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.SubscriptIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: (0, import_i18n62.__)("Link", "elementor"),
-    icon: /* @__PURE__ */ React121.createElement(import_icons40.LinkIcon, { fontSize: "tiny" }),
+    label: (0, import_i18n64.__)("Link", "elementor"),
+    icon: /* @__PURE__ */ React123.createElement(import_icons41.LinkIcon, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -9279,15 +9689,15 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
   const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
   const { value: rawValue } = usePropKeyContext();
   const content = value ?? extractInlineHtmlContent(rawValue);
-  const [editor, setEditor] = (0, import_react73.useState)(null);
-  const handleChange = (0, import_react73.useCallback)(
+  const [editor, setEditor] = (0, import_react75.useState)(null);
+  const handleChange = (0, import_react75.useCallback)(
     (newValue) => {
       const html = newValue ?? "";
       setValue(html);
     },
     [setValue]
   );
-  return /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(import_ui105.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React122.createElement(
+  return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(import_ui107.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
     InlineEditorToolbar,
     {
       editor,
@@ -9300,8 +9710,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       }),
       inControlPanel: true
     }
-  ), /* @__PURE__ */ React122.createElement(
-    import_ui105.Box,
+  ), /* @__PURE__ */ React124.createElement(
+    import_ui107.Box,
     {
       sx: (theme) => ({
         p: 0.8,
@@ -9345,7 +9755,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       ...attributes,
       ...props
     },
-    /* @__PURE__ */ React122.createElement(
+    /* @__PURE__ */ React124.createElement(
       InlineEditor,
       {
         value: content,
@@ -9362,17 +9772,17 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
 });
 
 // src/controls/email-form-action-control/index.tsx
-var React126 = __toESM(require("react"));
+var React128 = __toESM(require("react"));
 var import_editor_props68 = require("@elementor/editor-props");
 var import_editor_ui17 = require("@elementor/editor-ui");
-var import_ui109 = require("@elementor/ui");
-var import_i18n64 = require("@wordpress/i18n");
+var import_ui111 = require("@elementor/ui");
+var import_i18n66 = require("@wordpress/i18n");
 
 // src/controls/email-form-action-control/fields.tsx
-var React125 = __toESM(require("react"));
+var React127 = __toESM(require("react"));
 var import_editor_ui16 = require("@elementor/editor-ui");
-var import_ui108 = require("@elementor/ui");
-var import_i18n63 = require("@wordpress/i18n");
+var import_ui110 = require("@elementor/ui");
+var import_i18n65 = require("@wordpress/i18n");
 
 // src/hooks/use-form-field-suggestions.ts
 var import_editor_elements8 = require("@elementor/editor-elements");
@@ -9461,10 +9871,10 @@ function useFormFieldSuggestions(options) {
 }
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-var React123 = __toESM(require("react"));
-var import_react74 = require("react");
+var React125 = __toESM(require("react"));
+var import_react76 = require("react");
 var import_editor_props67 = require("@elementor/editor-props");
-var import_ui106 = require("@elementor/ui");
+var import_ui108 = require("@elementor/ui");
 
 // src/controls/email-form-action-control/utils.ts
 var import_schema = require("@elementor/schema");
@@ -9500,10 +9910,10 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
-  const [inputValue, setInputValue] = (0, import_react74.useState)("");
+  const [inputValue, setInputValue] = (0, import_react76.useState)("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = (0, import_react74.useMemo)(
+  const suggestionOptions = (0, import_react76.useMemo)(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -9538,8 +9948,8 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
-    import_ui106.Autocomplete,
+  return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
+    import_ui108.Autocomplete,
     {
       fullWidth: true,
       multiple: true,
@@ -9563,99 +9973,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React123.createElement(import_ui106.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
-      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React123.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
+      renderInput: (params) => /* @__PURE__ */ React125.createElement(import_ui108.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React125.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React123.createElement(import_ui106.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React123.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React123.createElement(import_ui106.Grid, { item: true }, /* @__PURE__ */ React123.createElement(EmailChipsControl, { placeholder, suggestions })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
-var React124 = __toESM(require("react"));
-var import_ui107 = require("@elementor/ui");
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React124.createElement(import_ui107.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React124.createElement(import_ui107.Grid, { item: true }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React124.createElement(import_ui107.Grid, { item: true }, /* @__PURE__ */ React124.createElement(TextControl, { placeholder }))));
+var React126 = __toESM(require("react"));
+var import_ui109 = require("@elementor/ui");
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(import_ui109.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React126.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
 var SendToField = ({ placeholder }) => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React125.createElement(import_ui108.Stack, { gap: 0.5 }, /* @__PURE__ */ React125.createElement(
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React127.createElement(import_ui110.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(
     EmailChipsField,
     {
-      fieldLabel: (0, import_i18n63.__)("Send to", "elementor"),
+      fieldLabel: (0, import_i18n65.__)("Send to", "elementor"),
       placeholder,
       suggestions
     }
-  ), shouldShowMentionsInfo() && /* @__PURE__ */ React125.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n63.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, (0, import_i18n65.__)("Type @ or an email field name to insert its submitted value.", "elementor"))));
 };
-var SubjectField = () => /* @__PURE__ */ React125.createElement(
+var SubjectField = () => /* @__PURE__ */ React127.createElement(
   EmailField,
   {
     bind: "subject",
-    label: (0, import_i18n63.__)("Email subject", "elementor"),
-    placeholder: (0, import_i18n63.__)("New form submission", "elementor")
+    label: (0, import_i18n65.__)("Email subject", "elementor"),
+    placeholder: (0, import_i18n65.__)("New form submission", "elementor")
   }
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Message", "elementor"))), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n63.__)(
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
-  ) : (0, import_i18n63.__)("[all-fields] shortcode sends all fields.", "elementor")))));
+  ) : (0, import_i18n65.__)("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React125.createElement(
+var FromEmailField = () => /* @__PURE__ */ React127.createElement(
   EmailField,
   {
     bind: "from",
-    label: (0, import_i18n63.__)("From email", "elementor"),
-    placeholder: (0, import_i18n63.__)("What email should appear as the sender?", "elementor")
+    label: (0, import_i18n65.__)("From email", "elementor"),
+    placeholder: (0, import_i18n65.__)("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React125.createElement(
+var FromNameField = () => /* @__PURE__ */ React127.createElement(
   EmailField,
   {
     bind: "from-name",
-    label: (0, import_i18n63.__)("From name", "elementor"),
-    placeholder: (0, import_i18n63.__)("What name should appear as the sender?", "elementor")
+    label: (0, import_i18n65.__)("From name", "elementor"),
+    placeholder: (0, import_i18n65.__)("What name should appear as the sender?", "elementor")
   }
 );
 var ReplyToField = () => {
   const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Reply-to", "elementor"))), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
       rows: 1,
       triggerPosition: "start",
-      placeholder: (0, import_i18n63.__)("You can type @ to insert an email field", "elementor")
+      placeholder: (0, import_i18n65.__)("You can type @ to insert an email field", "elementor")
     }
   ))));
 };
 var CcField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React125.createElement(EmailChipsField, { fieldLabel: (0, import_i18n63.__)("Cc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Cc", "elementor"), suggestions }));
 };
 var BccField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React125.createElement(EmailChipsField, { fieldLabel: (0, import_i18n63.__)("Bcc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Bcc", "elementor"), suggestions }));
 };
-var MetaDataField = () => /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React125.createElement(import_ui108.Stack, { gap: 0.5 }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Metadata", "elementor")), /* @__PURE__ */ React125.createElement(
+var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React127.createElement(import_ui110.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React127.createElement(
   ChipsControl,
   {
     options: [
-      { label: (0, import_i18n63.__)("Date", "elementor"), value: "date" },
-      { label: (0, import_i18n63.__)("Time", "elementor"), value: "time" },
-      { label: (0, import_i18n63.__)("Page URL", "elementor"), value: "page-url" },
-      { label: (0, import_i18n63.__)("User agent", "elementor"), value: "user-agent" },
-      { label: (0, import_i18n63.__)("Credit", "elementor"), value: "credit" }
+      { label: (0, import_i18n65.__)("Date", "elementor"), value: "date" },
+      { label: (0, import_i18n65.__)("Time", "elementor"), value: "time" },
+      { label: (0, import_i18n65.__)("Page URL", "elementor"), value: "page-url" },
+      { label: (0, import_i18n65.__)("User agent", "elementor"), value: "user-agent" },
+      { label: (0, import_i18n65.__)("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React125.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, (0, import_i18n63.__)("Send as", "elementor"))), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(
+var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
   SelectControl,
   {
     options: [
-      { label: (0, import_i18n63.__)("HTML", "elementor"), value: "html" },
-      { label: (0, import_i18n63.__)("Plain Text", "elementor"), value: "plain" }
+      { label: (0, import_i18n65.__)("HTML", "elementor"), value: "html" },
+      { label: (0, import_i18n65.__)("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
@@ -9664,30 +10074,30 @@ var SendAsField = () => /* @__PURE__ */ React125.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
-    return /* @__PURE__ */ React126.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React126.createElement(import_ui109.Stack, { gap: 2 }, /* @__PURE__ */ React126.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n64.__)("settings", "elementor") : (0, import_i18n64.__)("Email settings", "elementor")), /* @__PURE__ */ React126.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React126.createElement(SubjectField, null), /* @__PURE__ */ React126.createElement(MessageField, null), /* @__PURE__ */ React126.createElement(FromEmailField, null), /* @__PURE__ */ React126.createElement(AdvancedSettings, null)));
+    return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(import_ui111.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("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)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React126.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React126.createElement(import_ui109.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React126.createElement(import_ui109.Stack, { gap: 2 }, /* @__PURE__ */ React126.createElement(FromNameField, null), /* @__PURE__ */ React126.createElement(ReplyToField, null), /* @__PURE__ */ React126.createElement(CcField, null), /* @__PURE__ */ React126.createElement(BccField, null), /* @__PURE__ */ React126.createElement(import_ui109.Divider, null), /* @__PURE__ */ React126.createElement(MetaDataField, null), /* @__PURE__ */ React126.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(import_ui111.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(import_ui111.Stack, { 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(import_ui111.Divider, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
-var React127 = __toESM(require("react"));
+var React129 = __toESM(require("react"));
 var import_editor_ui18 = require("@elementor/editor-ui");
-var import_ui110 = require("@elementor/ui");
-var import_i18n65 = require("@wordpress/i18n");
+var import_ui112 = require("@elementor/ui");
+var import_i18n67 = require("@wordpress/i18n");
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(SelectControl, { options })), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n65.__)(
+  return /* @__PURE__ */ React129.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(SelectControl, { options })), /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
 });
 
 // src/controls/notice-control.tsx
-var React128 = __toESM(require("react"));
-var import_react75 = require("react");
+var React130 = __toESM(require("react"));
+var import_react77 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_icons41 = require("@elementor/icons");
-var import_ui111 = require("@elementor/ui");
-var NoticeTitle = (0, import_ui111.styled)(import_ui111.AlertTitle)({
+var import_icons42 = require("@elementor/icons");
+var import_ui113 = require("@elementor/ui");
+var NoticeTitle = (0, import_ui113.styled)(import_ui113.AlertTitle)({
   "&.MuiAlertTitle-root.MuiAlertTitle-root": {
     marginBottom: 4,
     fontStyle: "italic"
@@ -9701,12 +10111,12 @@ var markNoticeAsDismissedInSession = (dismissId) => {
 };
 var NoticeControl = createControl(
   ({ noticeType = "info", heading, content, dismissible, buttonText, buttonUrl }) => {
-    const [isDismissed, setIsDismissed] = (0, import_react75.useState)(false);
+    const [isDismissed, setIsDismissed] = (0, import_react77.useState)(false);
     if (isDismissed || !content) {
       return null;
     }
     const severity = noticeType === "danger" ? "error" : noticeType;
-    const icon = noticeType === "info" ? /* @__PURE__ */ React128.createElement(import_icons41.BulbIcon, { fontSize: "inherit" }) : void 0;
+    const icon = noticeType === "info" ? /* @__PURE__ */ React130.createElement(import_icons42.BulbIcon, { fontSize: "inherit" }) : void 0;
     const handleDismiss = () => {
       setIsDismissed(true);
       if (!dismissible) {
@@ -9726,8 +10136,8 @@ var NoticeControl = createControl(
         markNoticeAsDismissedInSession(dismissible);
       }
     };
-    return /* @__PURE__ */ React128.createElement(import_ui111.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React128.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React128.createElement(import_ui111.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React128.createElement(
-      import_ui111.AlertAction,
+    return /* @__PURE__ */ React130.createElement(import_ui113.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React130.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React130.createElement(import_ui113.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React130.createElement(
+      import_ui113.AlertAction,
       {
         variant: "contained",
         color: severity,
@@ -9743,9 +10153,9 @@ var NoticeControl = createControl(
 );
 
 // src/controls/grid-span-control.tsx
-var React129 = __toESM(require("react"));
+var React131 = __toESM(require("react"));
 var import_editor_props69 = require("@elementor/editor-props");
-var import_ui112 = require("@elementor/ui");
+var import_ui114 = require("@elementor/ui");
 var GridSpanControl = createControl(
   ({
     placeholder: propPlaceholder,
@@ -9762,8 +10172,8 @@ var GridSpanControl = createControl(
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React129.createElement(ControlActions, null, /* @__PURE__ */ React129.createElement(
-      import_ui112.TextField,
+    return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
+      import_ui114.TextField,
       {
         size: "tiny",
         fullWidth: true,
@@ -9783,25 +10193,25 @@ var GridSpanControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var React131 = __toESM(require("react"));
-var import_react77 = require("react");
-var import_icons42 = require("@elementor/icons");
-var import_ui114 = require("@elementor/ui");
-var import_i18n66 = require("@wordpress/i18n");
+var React133 = __toESM(require("react"));
+var import_react79 = require("react");
+var import_icons43 = require("@elementor/icons");
+var import_ui116 = require("@elementor/ui");
+var import_i18n68 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
-var React130 = __toESM(require("react"));
-var import_react76 = require("react");
+var React132 = __toESM(require("react"));
+var import_react78 = require("react");
 var import_editor_ui19 = require("@elementor/editor-ui");
-var import_ui113 = require("@elementor/ui");
+var import_ui115 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react76.forwardRef)(
+var PromotionTrigger = (0, import_react78.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react76.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react78.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react76.useCallback)(() => {
+    const toggle = (0, import_react78.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -9809,8 +10219,8 @@ var PromotionTrigger = (0, import_react76.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react76.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React130.createElement(React130.Fragment, null, promotion && /* @__PURE__ */ React130.createElement(
+    (0, import_react78.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    return /* @__PURE__ */ React132.createElement(React132.Fragment, null, promotion && /* @__PURE__ */ React132.createElement(
       import_editor_ui19.PromotionInfotip,
       {
         title: promotion.title,
@@ -9824,8 +10234,8 @@ var PromotionTrigger = (0, import_react76.forwardRef)(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React130.createElement(
-        import_ui113.Box,
+      /* @__PURE__ */ React132.createElement(
+        import_ui115.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -9833,19 +10243,19 @@ var PromotionTrigger = (0, import_react76.forwardRef)(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React130.createElement(import_editor_ui19.PromotionChip, null)
+        children ?? /* @__PURE__ */ React132.createElement(import_editor_ui19.PromotionChip, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = (0, import_i18n66.__)("Display Conditions", "elementor");
+var ARIA_LABEL = (0, import_i18n68.__)("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react77.useRef)(null);
-  return /* @__PURE__ */ React131.createElement(
-    import_ui114.Stack,
+  const triggerRef = (0, import_react79.useRef)(null);
+  return /* @__PURE__ */ React133.createElement(
+    import_ui116.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -9854,9 +10264,9 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React131.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React131.createElement(import_ui114.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React131.createElement(
-      import_ui114.IconButton,
+    /* @__PURE__ */ React133.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React133.createElement(
+      import_ui116.IconButton,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -9868,23 +10278,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React131.createElement(import_icons42.SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React133.createElement(import_icons43.SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-var React132 = __toESM(require("react"));
-var import_react78 = require("react");
-var import_icons43 = require("@elementor/icons");
-var import_ui115 = require("@elementor/ui");
-var import_i18n67 = require("@wordpress/i18n");
-var ARIA_LABEL2 = (0, import_i18n67.__)("Attributes", "elementor");
+var React134 = __toESM(require("react"));
+var import_react80 = require("react");
+var import_icons44 = require("@elementor/icons");
+var import_ui117 = require("@elementor/ui");
+var import_i18n69 = require("@wordpress/i18n");
+var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react78.useRef)(null);
-  return /* @__PURE__ */ React132.createElement(
-    import_ui115.Stack,
+  const triggerRef = (0, import_react80.useRef)(null);
+  return /* @__PURE__ */ React134.createElement(
+    import_ui117.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -9893,9 +10303,9 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React132.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React132.createElement(import_ui115.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React132.createElement(
-      import_icons43.PlusIcon,
+    /* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React134.createElement(import_ui117.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React134.createElement(
+      import_icons44.PlusIcon,
       {
         "aria-label": ARIA_LABEL2,
         fontSize: "tiny",
@@ -9908,21 +10318,21 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-var React133 = __toESM(require("react"));
-var import_icons44 = require("@elementor/icons");
-var import_ui116 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui116.styled)(import_ui116.IconButton)(({ theme }) => ({
+var React135 = __toESM(require("react"));
+var import_icons45 = require("@elementor/icons");
+var import_ui118 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui118.styled)(import_ui118.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React133.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React133.createElement(import_icons44.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React135.createElement(import_ui118.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React135.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React135.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-var React134 = __toESM(require("react"));
-var import_react79 = require("react");
-var import_icons45 = require("@elementor/icons");
-var import_ui117 = require("@elementor/ui");
-var import_i18n68 = require("@wordpress/i18n");
+var React136 = __toESM(require("react"));
+var import_react81 = require("react");
+var import_icons46 = require("@elementor/icons");
+var import_ui119 = require("@elementor/ui");
+var import_i18n70 = require("@wordpress/i18n");
 var SIZE12 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -9941,7 +10351,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = (0, import_react79.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react81.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -10004,8 +10414,8 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React134.createElement(
-    import_ui117.IconButton,
+  const addButton = /* @__PURE__ */ React136.createElement(
+    import_ui119.IconButton,
     {
       size: SIZE12,
       sx: {
@@ -10013,32 +10423,32 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": (0, import_i18n68.__)("Add item", "elementor")
+      "aria-label": (0, import_i18n70.__)("Add item", "elementor")
     },
-    /* @__PURE__ */ React134.createElement(import_icons45.PlusIcon, { fontSize: SIZE12 })
+    /* @__PURE__ */ React136.createElement(import_icons46.PlusIcon, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React134.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React134.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React134.createElement(
-    import_ui117.Infotip,
+  return /* @__PURE__ */ React136.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React136.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React136.createElement(
+    import_ui119.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React134.createElement(import_ui117.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React134.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React136.createElement(import_ui119.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React136.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React134.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React134.createElement(
+    return /* @__PURE__ */ React136.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React136.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React134.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React134.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React134.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React134.createElement(itemSettings.Icon, { value })),
+        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 })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -10052,7 +10462,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React134.createElement(
+      (props) => /* @__PURE__ */ React136.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -10092,18 +10502,18 @@ var RepeaterItem = ({
     },
     wrappedOnPopoverClose
   );
-  const triggerProps = (0, import_ui117.bindTrigger)(popoverState);
+  const triggerProps = (0, import_ui119.bindTrigger)(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
-  const duplicateLabel = (0, import_i18n68.__)("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? (0, import_i18n68.__)("Show", "elementor") : (0, import_i18n68.__)("Hide", "elementor");
-  const removeLabel = (0, import_i18n68.__)("Remove", "elementor");
-  return /* @__PURE__ */ React134.createElement(import_ui117.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React134.createElement(
+  const duplicateLabel = (0, import_i18n70.__)("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? (0, import_i18n70.__)("Show", "elementor") : (0, import_i18n70.__)("Hide", "elementor");
+  const removeLabel = (0, import_i18n70.__)("Remove", "elementor");
+  return /* @__PURE__ */ React136.createElement(import_ui119.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": (0, import_i18n68.__)("Open item", "elementor"),
+      "aria-label": (0, import_i18n70.__)("Open item", "elementor"),
       ...triggerProps,
       onClick: (e) => {
         triggerProps.onClick(e);
@@ -10112,15 +10522,15 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React134.createElement(React134.Fragment, null, showDuplicate && /* @__PURE__ */ React134.createElement(import_ui117.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React134.createElement(import_ui117.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React134.createElement(import_icons45.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React134.createElement(import_ui117.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React134.createElement(import_ui117.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React134.createElement(import_icons45.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React134.createElement(import_icons45.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React134.createElement(import_ui117.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React134.createElement(import_ui117.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React134.createElement(import_icons45.XIcon, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React134.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React134.createElement(import_ui117.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui119.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = (0, import_react79.useState)(null);
-  const popoverState = (0, import_ui117.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui117.bindPopover)(popoverState);
-  (0, import_react79.useEffect)(() => {
+  const [ref, setRef] = (0, import_react81.useState)(null);
+  const popoverState = (0, import_ui119.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui119.bindPopover)(popoverState);
+  (0, import_react81.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -10139,8 +10549,8 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/size/unstable-size-field.tsx
-var React137 = __toESM(require("react"));
-var import_ui119 = require("@elementor/ui");
+var React139 = __toESM(require("react"));
+var import_ui121 = require("@elementor/ui");
 
 // src/hooks/use-size-value.ts
 var DEFAULT_UNIT2 = "px";
@@ -10182,25 +10592,25 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-var React135 = __toESM(require("react"));
-var import_react80 = require("react");
+var React137 = __toESM(require("react"));
+var import_react82 = require("react");
 var import_editor_ui20 = require("@elementor/editor-ui");
-var import_ui118 = require("@elementor/ui");
+var import_ui120 = require("@elementor/ui");
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = (0, import_ui118.usePopupState)({
+  const popupState = (0, import_ui120.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react80.useId)()
+    popupId: (0, import_react82.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React135.createElement(React135.Fragment, null, /* @__PURE__ */ React135.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui118.bindTrigger)(popupState) }, value), /* @__PURE__ */ React135.createElement(import_ui118.Menu, { MenuListProps: { dense: true }, ...(0, import_ui118.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React135.createElement(
+  return /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui120.bindTrigger)(popupState) }, value), /* @__PURE__ */ React137.createElement(import_ui120.Menu, { MenuListProps: { dense: true }, ...(0, import_ui120.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React137.createElement(
     import_editor_ui20.MenuListItem,
     {
       key: option,
@@ -10219,7 +10629,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton3 = (0, import_ui118.styled)(import_ui118.Button, {
+var StyledButton3 = (0, import_ui120.styled)(import_ui120.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -10229,11 +10639,11 @@ var StyledButton3 = (0, import_ui118.styled)(import_ui118.Button, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-var React136 = __toESM(require("react"));
-var import_react81 = require("react");
-var UnstableSizeInput = (0, import_react81.forwardRef)(
+var React138 = __toESM(require("react"));
+var import_react83 = require("react");
+var UnstableSizeInput = (0, import_react83.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React136.createElement(
+    return /* @__PURE__ */ React138.createElement(
       NumberInput,
       {
         ref,
@@ -10271,7 +10681,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React137.createElement(
+  return /* @__PURE__ */ React139.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -10280,8 +10690,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React137.createElement(import_ui119.InputAdornment, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React137.createElement(import_ui119.InputAdornment, { position: "end" }, /* @__PURE__ */ React137.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React139.createElement(import_ui121.InputAdornment, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React139.createElement(import_ui121.InputAdornment, { position: "end" }, /* @__PURE__ */ React139.createElement(
           UnitSelect,
           {
             options: units2,
@@ -10299,7 +10709,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react82 = require("react");
+var import_react84 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters4.getElementorConfig)();
@@ -10307,7 +10717,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react82.useMemo)(() => {
+  return (0, import_react84.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }