@elementor/editor-controls 4.4.0-1077 → 4.4.0-1078

package/dist/index.mjs

@@ -5314,24 +5314,13 @@ var AspectRatioControl = createControl(({ label }) => {
 });
 
 // src/controls/svg-media-control.tsx
-import * as React81 from "react";
-import { useEffect as useEffect16, useState as useState16 } from "react";
+import * as React85 from "react";
+import { useEffect as useEffect16, useRef as useRef15, useState as useState17 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
-import { UploadIcon as UploadIcon2 } from "@elementor/icons";
-import {
-  Box as Box15,
-  Button as Button5,
-  Card as Card2,
-  CardMedia as CardMedia2,
-  CardOverlay as CardOverlay2,
-  CircularProgress as CircularProgress3,
-  Stack as Stack13,
-  styled as styled9,
-  ThemeProvider
-} from "@elementor/ui";
+import { Box as Box18, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack15, styled as styled11, usePopupState as usePopupState8 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
-import { __ as __32 } from "@wordpress/i18n";
+import { __ as __35 } from "@wordpress/i18n";
 
 // src/components/enable-unfiltered-modal.tsx
 import * as React80 from "react";
@@ -5393,37 +5382,442 @@ var AdminDialog = ({ open, onClose, handleEnable, isPending, isError }) => /* @_
   isPending ? /* @__PURE__ */ React80.createElement(CircularProgress2, { size: 24 }) : __31("Enable", "elementor")
 )));
 
-// src/controls/open-icon-library.ts
-import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
-var SVG_ICON_LIBRARY = "svg";
-function isSvgLibrarySelection(icon) {
-  return icon.library === SVG_ICON_LIBRARY && typeof icon.value === "object" && icon.value !== null;
+// src/controls/icon-library/get-icon-library-anchor.ts
+function getIconLibraryAnchor(containerRect, buttonGroupRect) {
+  if (!containerRect || containerRect.width <= 0) {
+    return null;
+  }
+  return {
+    top: buttonGroupRect?.top ?? containerRect.top,
+    left: containerRect.left,
+    width: containerRect.width
+  };
 }
-function openIconLibrary({ selected, onSelect } = {}) {
-  const iconManager = window.elementor?.iconManager;
-  if (!iconManager) {
-    return;
+function measureIconLibraryAnchor(container, buttonGroup) {
+  return getIconLibraryAnchor(container?.getBoundingClientRect(), buttonGroup?.getBoundingClientRect());
+}
+
+// src/controls/icon-library/icon-library-popover.tsx
+import * as React82 from "react";
+import { useMemo as useMemo12, useState as useState16 } from "react";
+import {
+  PopoverBody as PopoverBody2,
+  PopoverHeader as PopoverHeader4,
+  PopoverMenuList as PopoverMenuList2,
+  SearchField as SearchField2,
+  StyledMenuList
+} from "@elementor/editor-ui";
+import { ComponentsIcon } from "@elementor/icons";
+import { Box as Box15, CircularProgress as CircularProgress3, Divider as Divider4, Link as Link3, Stack as Stack13, styled as styled9, Typography as Typography7 } from "@elementor/ui";
+import { __ as __32 } from "@wordpress/i18n";
+
+// src/controls/icon-library/font-awesome-7-data.ts
+var FONT_AWESOME_7_LIBRARIES = [
+  { file: "solid", library: "fa-solid" },
+  { file: "regular", library: "fa-regular" },
+  { file: "brands", library: "fa-brands" }
+];
+var FONT_AWESOME_JSON = {
+  width: 0,
+  height: 1,
+  aliases: 2,
+  unicode: 3,
+  path: 4
+};
+var libraryCache = /* @__PURE__ */ new Map();
+function getFontAwesome7EditorConfig() {
+  const config = window.elementorCommon?.config?.fontAwesome?.v7;
+  if (!config || !Array.isArray(config.jsonFiles)) {
+    return null;
+  }
+  const jsonBaseUrl = getAllowedJsonBaseUrl(config.jsonBaseUrl);
+  if (!jsonBaseUrl) {
+    return null;
+  }
+  return {
+    jsonFiles: config.jsonFiles,
+    jsonBaseUrl
+  };
+}
+var FONT_AWESOME_ICON_NAME_PATTERN = /^fa\S*\s+fa-([^\s]+)/;
+function getFontAwesome7IconName(iconValue) {
+  return iconValue.match(FONT_AWESOME_ICON_NAME_PATTERN)?.[1] ?? null;
+}
+function resetFontAwesome7IconsCache() {
+  libraryCache.clear();
+}
+async function loadFontAwesome7Library(file, signal) {
+  const cached = await getCachedLibrary(file, signal);
+  return cached?.icons ?? [];
+}
+async function resolveFontAwesome7Icon(library, iconName, signal) {
+  const file = getLibraryFileName(library);
+  if (!file) {
+    return null;
   }
-  iconManager.loadIconLibraries();
-  iconManager.show({
-    view: createIconManagerControlView(selected, onSelect)
+  const cached = await getCachedLibrary(file, signal);
+  return cached?.lookup[iconName] ?? null;
+}
+async function getCachedLibrary(file, signal) {
+  const cached = libraryCache.get(file);
+  if (cached) {
+    return cached;
+  }
+  const loaded = await fetchLibrary(file, signal);
+  if (loaded) {
+    libraryCache.set(file, loaded);
+  }
+  return loaded;
+}
+function getLibraryFileName(library) {
+  const config = getFontAwesome7EditorConfig();
+  const match = FONT_AWESOME_7_LIBRARIES.find((item) => item.library === library);
+  if (!config || !match || !config.jsonFiles.includes(match.file)) {
+    return null;
+  }
+  return match.file;
+}
+async function fetchLibrary(file, signal) {
+  const config = getFontAwesome7EditorConfig();
+  if (!config?.jsonFiles.includes(file)) {
+    return null;
+  }
+  const catalogUrl = getCatalogFileUrl(config.jsonBaseUrl, file);
+  if (!catalogUrl) {
+    return null;
+  }
+  try {
+    const response = await fetch(catalogUrl, { signal });
+    if (!response.ok) {
+      return null;
+    }
+    const data = await response.json();
+    const icons = data.icons;
+    if (!icons || typeof icons !== "object") {
+      return null;
+    }
+    return indexLibrary(icons);
+  } catch {
+    return null;
+  }
+}
+function indexLibrary(icons) {
+  const definitions = [];
+  const lookup = /* @__PURE__ */ Object.create(null);
+  for (const [name, iconData] of Object.entries(icons)) {
+    const definition = toIconDefinition(name, iconData);
+    if (!definition) {
+      continue;
+    }
+    definitions.push(definition);
+    lookup[name] = definition;
+    for (const alias of definition.aliases) {
+      if (!lookup[alias]) {
+        lookup[alias] = definition;
+      }
+    }
+  }
+  return { icons: definitions, lookup };
+}
+function toIconDefinition(name, iconData) {
+  if (!isValidIconTuple(iconData)) {
+    return null;
+  }
+  const paths = normalizePaths(iconData[FONT_AWESOME_JSON.path]);
+  if (paths.length === 0) {
+    return null;
+  }
+  const aliases = iconData[FONT_AWESOME_JSON.aliases].filter(
+    (alias) => typeof alias === "string" && alias !== ""
+  );
+  return {
+    name,
+    aliases,
+    width: iconData[FONT_AWESOME_JSON.width],
+    height: iconData[FONT_AWESOME_JSON.height],
+    paths
+  };
+}
+function isValidIconTuple(iconData) {
+  return Array.isArray(iconData) && iconData.length > FONT_AWESOME_JSON.path && typeof iconData[FONT_AWESOME_JSON.width] === "number" && typeof iconData[FONT_AWESOME_JSON.height] === "number" && Array.isArray(iconData[FONT_AWESOME_JSON.aliases]);
+}
+function normalizePaths(pathData) {
+  if (typeof pathData === "string" && isSafeSvgPath(pathData)) {
+    return [pathData];
+  }
+  if (!Array.isArray(pathData)) {
+    return [];
+  }
+  return pathData.filter((path) => typeof path === "string" && isSafeSvgPath(path));
+}
+function isSafeSvgPath(path) {
+  return path !== "" && !/[<>"'`]/.test(path);
+}
+function getAllowedJsonBaseUrl(jsonBaseUrl) {
+  if (typeof jsonBaseUrl !== "string" || jsonBaseUrl === "") {
+    return null;
+  }
+  try {
+    const url = new URL(jsonBaseUrl);
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      return null;
+    }
+    return url.href;
+  } catch {
+    return null;
+  }
+}
+function getCatalogFileUrl(jsonBaseUrl, file) {
+  try {
+    const baseUrl = new URL(jsonBaseUrl);
+    const fileUrl = new URL(`${file}.json`, jsonBaseUrl);
+    if (fileUrl.origin !== baseUrl.origin || !fileUrl.pathname.startsWith(baseUrl.pathname)) {
+      return null;
+    }
+    if (fileUrl.protocol !== "http:" && fileUrl.protocol !== "https:") {
+      return null;
+    }
+    return fileUrl.href;
+  } catch {
+    return null;
+  }
+}
+
+// src/controls/icon-library/font-awesome-7-catalog.ts
+async function loadFontAwesome7Catalog(signal) {
+  const config = getFontAwesome7EditorConfig();
+  if (!config) {
+    return [];
+  }
+  const catalogs = await Promise.all(
+    FONT_AWESOME_7_LIBRARIES.map(async ({ file, library }) => {
+      if (!config.jsonFiles.includes(file)) {
+        return [];
+      }
+      const icons = await loadFontAwesome7Library(file, signal);
+      return icons.map((icon) => toCatalogIcon(icon, library));
+    })
+  );
+  return catalogs.flat();
+}
+function filterFontAwesome7Icons(icons, searchValue) {
+  const query = searchValue?.trim().toLowerCase() ?? "";
+  if (query === "") {
+    return icons;
+  }
+  return icons.filter((icon) => {
+    if (icon.name.includes(query) || icon.label.toLowerCase().includes(query)) {
+      return true;
+    }
+    return icon.aliases.some((alias) => alias.toLowerCase().includes(query));
   });
 }
-function enqueueIconFonts(library) {
-  window.elementor?.helpers?.enqueueIconFonts?.(library);
+function createIconSelectionValue(library, name) {
+  return `${library} fa-${name}`;
+}
+function getSelectedIconId(iconClass, library) {
+  if (!iconClass || !library) {
+    return void 0;
+  }
+  const name = getFontAwesome7IconName(iconClass);
+  if (!name) {
+    return void 0;
+  }
+  return `${library}:${name}`;
+}
+function findFontAwesome7Icon(icons, iconClass, library) {
+  const selectedId = getSelectedIconId(iconClass, library);
+  if (!selectedId || !library) {
+    return void 0;
+  }
+  const selectedName = selectedId.slice(`${library}:`.length);
+  return icons.find((icon) => {
+    if (icon.library !== library) {
+      return false;
+    }
+    return icon.id === selectedId || icon.name === selectedName || icon.aliases.includes(selectedName);
+  });
 }
-function createIconManagerControlView(selected, onSelect) {
+function toCatalogIcon(icon, library) {
   return {
-    model: {
-      get: () => false
-    },
-    getControlValue: () => selected ?? { value: "", library: "" },
-    setValue: (icon) => {
-      onSelect?.(icon);
-    },
-    applySavedValue: () => void 0
+    ...icon,
+    id: `${library}:${icon.name}`,
+    label: icon.name.replace(/-/g, " "),
+    library,
+    value: createIconSelectionValue(library, icon.name)
   };
 }
+
+// src/controls/icon-library/font-awesome-glyph.tsx
+import * as React81 from "react";
+var FontAwesomeGlyph = ({ icon, size, color, label }) => {
+  return /* @__PURE__ */ React81.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: `0 0 ${icon.width} ${icon.height}`,
+      width: size,
+      height: size,
+      fill: color,
+      overflow: "visible",
+      "aria-hidden": label ? void 0 : true,
+      "aria-label": label,
+      role: label ? "img" : void 0
+    },
+    icon.paths.map((path, index) => /* @__PURE__ */ React81.createElement("path", { key: `${index}-${path}`, d: path }))
+  );
+};
+
+// src/controls/icon-library/use-font-awesome-7-catalog.ts
+import { useQuery as useQuery2 } from "@elementor/query";
+var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
+function useFontAwesome7Catalog(enabled) {
+  return useQuery2({
+    queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
+    queryFn: ({ signal }) => loadFontAwesome7Catalog(signal),
+    enabled,
+    staleTime: Infinity
+  });
+}
+
+// src/controls/icon-library/icon-library-popover.tsx
+var ICON_LIBRARY_POPOVER_WIDTH = 300;
+var ICON_LIBRARY_ROW_HEIGHT = 48;
+var ICON_TILE_SIZE = 40;
+var ICON_GLYPH_SIZE = 20;
+var ICON_LIBRARY_INLINE_SPACING = 1;
+var CompactIconLibraryMenuList = styled9(StyledMenuList)(({ theme }) => ({
+  '& > [role="option"]': {
+    padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
+  }
+}));
+var IconLibraryPopover = ({
+  open,
+  selectedIconClass,
+  selectedIconLibrary,
+  onSelect,
+  onClose,
+  width = ICON_LIBRARY_POPOVER_WIDTH
+}) => {
+  const [searchValue, setSearchValue] = useState16("");
+  const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
+  const items2 = useMemo12(() => createIconLibraryItems(icons, searchValue), [icons, searchValue]);
+  const selectedValue = useMemo12(
+    () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
+    [icons, selectedIconClass, selectedIconLibrary]
+  );
+  const handleClose = () => {
+    setSearchValue("");
+    onClose();
+  };
+  const handleSelect = (id) => {
+    const icon = items2.find((item) => item.id === id);
+    if (!icon) {
+      return;
+    }
+    onSelect({
+      value: createIconSelectionValue(icon.library, icon.name),
+      library: icon.library
+    });
+  };
+  const handleClearSearch = () => {
+    setSearchValue("");
+  };
+  return /* @__PURE__ */ React82.createElement(PopoverBody2, { width, fillWidth: true, id: "icon-library" }, /* @__PURE__ */ React82.createElement(
+    PopoverHeader4,
+    {
+      title: __32("Icon library", "elementor"),
+      onClose: handleClose,
+      icon: /* @__PURE__ */ React82.createElement(ComponentsIcon, { fontSize: "tiny" }),
+      sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
+    }
+  ), /* @__PURE__ */ React82.createElement(
+    SearchField2,
+    {
+      value: searchValue,
+      onSearch: setSearchValue,
+      placeholder: __32("Search", "elementor"),
+      id: "icon-library-search",
+      sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 }
+    }
+  ), /* @__PURE__ */ React82.createElement(Divider4, null), /* @__PURE__ */ React82.createElement(Box15, { sx: { flex: 1, overflow: "auto", minHeight: 0 } }, /* @__PURE__ */ React82.createElement(
+    IconLibraryContent,
+    {
+      isLoading,
+      items: items2,
+      selectedValue,
+      searchValue,
+      onSelect: handleSelect,
+      onClose: handleClose,
+      onClearSearch: handleClearSearch
+    }
+  )));
+};
+var IconLibraryContent = ({
+  isLoading,
+  items: items2,
+  selectedValue,
+  searchValue,
+  onSelect,
+  onClose,
+  onClearSearch
+}) => {
+  if (isLoading) {
+    return /* @__PURE__ */ React82.createElement(IconLibraryLoadingState, null);
+  }
+  return /* @__PURE__ */ React82.createElement(
+    PopoverMenuList2,
+    {
+      items: items2,
+      selectedValue,
+      menuListTemplate: CompactIconLibraryMenuList,
+      onSelect,
+      onClose,
+      itemHeight: ICON_LIBRARY_ROW_HEIGHT,
+      menuItemContentTemplate: IconLibraryRow,
+      noResultsComponent: /* @__PURE__ */ React82.createElement(IconLibraryEmptyState, { searchValue, onClear: onClearSearch }),
+      "data-testid": "icon-library-list"
+    }
+  );
+};
+var IconLibraryLoadingState = () => /* @__PURE__ */ React82.createElement(Stack13, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React82.createElement(CircularProgress3, { role: "progressbar", size: 24 }));
+var IconLibraryEmptyState = ({ searchValue, onClear }) => {
+  if (searchValue.trim() === "") {
+    return /* @__PURE__ */ React82.createElement(CatalogUnavailable, null);
+  }
+  return /* @__PURE__ */ React82.createElement(NoResults, { searchValue, onClear });
+};
+var IconLibraryRow = (item) => {
+  const icon = item;
+  return /* @__PURE__ */ React82.createElement(Stack13, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React82.createElement(
+    Box15,
+    {
+      sx: {
+        width: ICON_TILE_SIZE,
+        height: ICON_TILE_SIZE,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        border: 1,
+        borderColor: "divider",
+        borderRadius: 1,
+        color: "text.tertiary",
+        flexShrink: 0
+      }
+    },
+    icon.paths.length > 0 ? /* @__PURE__ */ React82.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE, color: "currentColor" }) : null
+  ), /* @__PURE__ */ React82.createElement(Typography7, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
+};
+var CatalogUnavailable = () => /* @__PURE__ */ React82.createElement(Stack13, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React82.createElement(ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React82.createElement(Typography7, { align: "center", variant: "subtitle2", color: "text.secondary" }, __32("Icons couldn't be loaded.", "elementor")));
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React82.createElement(Stack13, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React82.createElement(ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React82.createElement(Typography7, { align: "center", variant: "subtitle2", color: "text.secondary" }, __32("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React82.createElement(Typography7, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React82.createElement(Link3, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, __32("Clear & try again", "elementor")));
+var createIconLibraryItems = (icons, searchValue) => filterFontAwesome7Icons(icons, searchValue).map((icon) => ({
+  ...icon,
+  type: "item",
+  value: icon.id
+}));
+
+// src/controls/open-icon-library.ts
+import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
 function createIconPropValue(icon, library) {
   return {
     value: stringPropTypeUtil14.create(icon),
@@ -5431,13 +5825,170 @@ function createIconPropValue(icon, library) {
   };
 }
 
+// src/controls/svg-media-overlay.tsx
+import * as React83 from "react";
+import { LibraryIcon, UploadIcon as UploadIcon2 } from "@elementor/icons";
+import { Box as Box16, Button as Button5, Stack as Stack14, styled as styled10, ThemeProvider, Typography as Typography8 } from "@elementor/ui";
+import { __ as __33 } from "@wordpress/i18n";
+var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
+var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
+var MEDIA_ACTION_PADDING_Y = 0.75;
+var MEDIA_ACTION_PADDING_X = 2;
+var ICON_LIBRARY_PADDING = 0.625;
+var svgButtonSx = {
+  px: MEDIA_ACTION_PADDING_X,
+  py: MEDIA_ACTION_PADDING_Y
+};
+var MediaActionGroup = styled10(Stack14)(({ theme }) => ({
+  display: "inline-flex",
+  flexDirection: "row",
+  alignItems: "stretch",
+  border: "1px solid currentColor",
+  borderRadius: theme.shape.borderRadius,
+  overflow: "hidden",
+  "& .MuiButton-root": {
+    border: "none",
+    borderRadius: 0,
+    lineHeight: 1
+  }
+}));
+var SvgMediaOverlay = ({
+  isAdmin,
+  showIconLibrary,
+  buttonGroupRef,
+  onSelectSvg,
+  onUpload,
+  onOpenIconLibrary,
+  infotipTitle,
+  infotipDescription
+}) => /* @__PURE__ */ React83.createElement(Stack14, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React83.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React83.createElement(
+  Button5,
+  {
+    size: "tiny",
+    color: "inherit",
+    variant: "text",
+    onClick: onSelectSvg,
+    "aria-label": __33("Select", "elementor"),
+    sx: svgButtonSx
+  },
+  __33("Select", "elementor")
+), /* @__PURE__ */ React83.createElement(
+  Box16,
+  {
+    sx: {
+      width: "1px",
+      alignSelf: "stretch",
+      bgcolor: "currentColor",
+      flexShrink: 0
+    }
+  }
+), /* @__PURE__ */ React83.createElement(
+  ConditionalControlInfotip,
+  {
+    title: infotipTitle,
+    description: infotipDescription,
+    isEnabled: !isAdmin
+  },
+  /* @__PURE__ */ React83.createElement(Box16, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React83.createElement(UploadControl, { isAdmin, onUpload }))
+)), showIconLibrary ? /* @__PURE__ */ React83.createElement(
+  Button5,
+  {
+    size: "tiny",
+    color: "inherit",
+    variant: "text",
+    startIcon: /* @__PURE__ */ React83.createElement(LibraryIcon, { sx: { height: "18px", width: "16px" } }),
+    "aria-label": __33("Icon library", "elementor"),
+    onClick: onOpenIconLibrary,
+    sx: {
+      height: "28px",
+      p: ICON_LIBRARY_PADDING,
+      ".MuiButton-icon": { ml: 0 }
+    }
+  },
+  /* @__PURE__ */ React83.createElement(Typography8, null, __33("Icon library", "elementor"))
+) : null);
+var UploadControl = ({ isAdmin, onUpload }) => {
+  if (isAdmin) {
+    return /* @__PURE__ */ React83.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
+  }
+  return /* @__PURE__ */ React83.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React83.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
+};
+var UploadButton = ({
+  disabled = false,
+  sx,
+  onClick
+}) => /* @__PURE__ */ React83.createElement(
+  Button5,
+  {
+    sx,
+    size: "tiny",
+    color: "inherit",
+    variant: "text",
+    disabled,
+    onClick,
+    "aria-label": __33("Upload", "elementor")
+  },
+  /* @__PURE__ */ React83.createElement(UploadIcon2, null)
+);
+
+// src/controls/svg-media-preview.tsx
+import * as React84 from "react";
+import { Box as Box17, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
+import { __ as __34 } from "@wordpress/i18n";
+var ICON_PREVIEW_SIZE = 50;
+var ICON_PREVIEW_COLOR = "#000000";
+var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
+  const shouldLoadIconCatalog = Boolean(iconClassName && iconLibrary);
+  const { data: icons = [], isLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
+  const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
+  if (isFetching || shouldLoadIconCatalog && isLoading) {
+    return /* @__PURE__ */ React84.createElement(CircularProgress4, { role: "progressbar" });
+  }
+  if (selectedIcon) {
+    return /* @__PURE__ */ React84.createElement(IconPreview, { icon: selectedIcon });
+  }
+  if (shouldLoadIconCatalog) {
+    return /* @__PURE__ */ React84.createElement(IconPreviewPlaceholder, null);
+  }
+  return /* @__PURE__ */ React84.createElement(SvgPreview, { src });
+};
+var IconPreview = ({ icon }) => /* @__PURE__ */ React84.createElement(Box17, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React84.createElement(
+  FontAwesomeGlyph,
+  {
+    icon,
+    size: ICON_PREVIEW_SIZE,
+    color: ICON_PREVIEW_COLOR,
+    label: __34("Preview icon", "elementor")
+  }
+));
+var IconPreviewPlaceholder = () => /* @__PURE__ */ React84.createElement(
+  Box17,
+  {
+    "aria-hidden": true,
+    sx: {
+      width: ICON_PREVIEW_SIZE,
+      height: ICON_PREVIEW_SIZE,
+      color: ICON_PREVIEW_COLOR
+    }
+  }
+);
+var SvgPreview = ({ src }) => /* @__PURE__ */ React84.createElement(
+  CardMedia2,
+  {
+    component: "img",
+    image: src,
+    alt: __34("Preview SVG", "elementor"),
+    sx: { maxHeight: "140px", width: `${ICON_PREVIEW_SIZE}px`, color: ICON_PREVIEW_COLOR }
+  }
+);
+
 // src/controls/svg-media-control.tsx
 var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
-var ICON_PREVIEW_FONT_SIZE = 50;
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = styled9(Card2)`
+var StyledCard = styled11(Card2)`
+	position: relative;
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
 	background-size: ${TILE_SIZE}px ${TILE_SIZE}px;
@@ -5446,7 +5997,8 @@ var StyledCard = styled9(Card2)`
 		${TILE_SIZE / 2}px ${TILE_SIZE / 2}px;
 	border: none;
 `;
-var StyledCardMediaContainer = styled9(Stack13)`
+var PREVIEW_ICON_COLOR = "#000000";
+var StyledCardMediaContainer = styled11(Stack15)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -5454,6 +6006,7 @@ var StyledCardMediaContainer = styled9(Stack13)`
 	justify-content: center;
 	align-items: center;
 	background-color: rgba( 255, 255, 255, 0.37 );
+	color: ${PREVIEW_ICON_COLOR};
 `;
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
@@ -5465,7 +6018,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState16(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState17(false);
+  const iconLibraryPopoverState = usePopupState8({ variant: "popover" });
+  const controlContainerRef = useRef15(null);
+  const buttonGroupRef = useRef15(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = useState17(null);
   const { isAdmin } = 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;
@@ -5483,7 +6040,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
       });
     }
   });
-  const onCloseUnfilteredModal = (enabled) => {
+  const handleCloseUnfilteredModal = (enabled) => {
     setUnfilteredModalOpenState(false);
     if (enabled) {
       open(MODE_UPLOAD);
@@ -5496,127 +6053,123 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
       open(openOptions);
     }
   };
+  const handleSelectSvg = () => {
+    handleClick(MODE_BROWSE);
+  };
+  const handleUpload = () => {
+    handleClick(MODE_UPLOAD);
+  };
+  const handleCloseIconLibrary = () => {
+    iconLibraryPopoverState.close();
+    setIconLibraryAnchor(null);
+  };
   const handleIconLibrarySelect = (icon) => {
-    if (!showIconLibrary) {
-      return;
-    }
-    if (isSvgLibrarySelection(icon)) {
-      setSvgValue({
-        id: icon.value.id ? {
-          $$type: "image-attachment-id",
-          value: icon.value.id
-        } : null,
-        url: icon.value.url ? urlPropTypeUtil4.create(icon.value.url) : null
-      });
+    setIconValue(createIconPropValue(icon.value, icon.library));
+  };
+  const handleOpenIconLibrary = (event) => {
+    const anchor = measureIconLibraryAnchor(controlContainerRef.current, buttonGroupRef.current);
+    if (!anchor) {
       return;
     }
-    if (typeof icon.value === "string") {
-      setIconValue(createIconPropValue(icon.value, icon.library));
-    }
-  };
-  const infotipProps = {
-    title: __32("Sorry, you can't upload that file yet.", "elementor"),
-    description: /* @__PURE__ */ React81.createElement(React81.Fragment, null, __32("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React81.createElement("br", null), __32("file uploads.", "elementor")),
-    isEnabled: !isAdmin
+    setIconLibraryAnchor(anchor);
+    iconLibraryPopoverState.open(event);
   };
-  return /* @__PURE__ */ React81.createElement(Stack13, { gap: 1, "aria-label": "SVG Control" }, /* @__PURE__ */ React81.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: onCloseUnfilteredModal }), /* @__PURE__ */ React81.createElement(ControlActions, null, /* @__PURE__ */ React81.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React81.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React81.createElement(
-    SvgMediaPreview,
-    {
-      isFetching,
-      src,
-      iconClassName: selectedIconClass,
-      iconLibrary: selectedIconLibrary
+  useEffect16(() => {
+    if (!iconLibraryPopoverState.isOpen) {
+      return;
     }
-  )), /* @__PURE__ */ React81.createElement(
-    CardOverlay2,
+    const handleResize = () => {
+      const nextAnchor = measureIconLibraryAnchor(controlContainerRef.current, buttonGroupRef.current);
+      if (nextAnchor) {
+        setIconLibraryAnchor(nextAnchor);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [iconLibraryPopoverState.isOpen]);
+  const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
+  return /* @__PURE__ */ React85.createElement(Stack15, { gap: 1, "aria-label": __35("SVG control", "elementor") }, /* @__PURE__ */ React85.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React85.createElement(
+    Popover6,
     {
-      sx: {
-        "&:hover": {
-          backgroundColor: "rgba( 0, 0, 0, 0.75 )"
+      disableScrollLock: true,
+      open: iconLibraryPopoverState.isOpen,
+      onClose: handleCloseIconLibrary,
+      anchorReference: "anchorPosition",
+      anchorPosition: { top: iconLibraryAnchor.top, left: iconLibraryAnchor.left },
+      anchorOrigin: { vertical: "top", horizontal: "left" },
+      transformOrigin: { vertical: "top", horizontal: "left" },
+      marginThreshold: 0,
+      PaperProps: {
+        sx: {
+          width: iconLibraryWidth,
+          minWidth: iconLibraryWidth,
+          maxWidth: iconLibraryWidth,
+          m: 0
         }
       }
     },
-    /* @__PURE__ */ React81.createElement(Stack13, { gap: 1 }, /* @__PURE__ */ React81.createElement(
-      Button5,
+    /* @__PURE__ */ React85.createElement(
+      IconLibraryPopover,
       {
-        size: "tiny",
-        color: "inherit",
-        variant: "outlined",
-        onClick: () => handleClick(MODE_BROWSE),
-        "aria-label": "Select SVG"
-      },
-      __32("Select SVG", "elementor")
-    ), showIconLibrary ? /* @__PURE__ */ React81.createElement(
-      Button5,
+        open: iconLibraryPopoverState.isOpen,
+        selectedIconClass,
+        selectedIconLibrary,
+        onSelect: handleIconLibrarySelect,
+        onClose: handleCloseIconLibrary,
+        width: iconLibraryWidth
+      }
+    )
+  ) : null, /* @__PURE__ */ React85.createElement(
+    Box18,
+    {
+      ref: controlContainerRef,
+      "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
+      sx: { width: "100%" }
+    },
+    /* @__PURE__ */ React85.createElement(ControlActions, null, /* @__PURE__ */ React85.createElement(StyledCard, { variant: "outlined" }, /* @__PURE__ */ React85.createElement(StyledCardMediaContainer, null, /* @__PURE__ */ React85.createElement(
+      SvgMediaPreview,
       {
-        size: "tiny",
-        variant: "text",
-        color: "inherit",
-        onClick: () => openIconLibrary({
-          selected: selectedIconClass && selectedIconLibrary ? { value: selectedIconClass, library: selectedIconLibrary } : void 0,
-          onSelect: handleIconLibrarySelect
-        }),
-        "aria-label": __32("Icon library", "elementor")
-      },
-      __32("Icon library", "elementor")
-    ) : null, /* @__PURE__ */ React81.createElement(ConditionalControlInfotip, { ...infotipProps }, /* @__PURE__ */ React81.createElement("span", null, /* @__PURE__ */ React81.createElement(ThemeProvider, { colorScheme: isAdmin ? "light" : "dark" }, /* @__PURE__ */ React81.createElement(
-      Button5,
+        isFetching,
+        src,
+        iconClassName: selectedIconClass,
+        iconLibrary: selectedIconLibrary
+      }
+    )), /* @__PURE__ */ React85.createElement(
+      CardOverlay2,
       {
-        size: "tiny",
-        variant: "text",
-        color: "inherit",
-        startIcon: /* @__PURE__ */ React81.createElement(UploadIcon2, null),
-        disabled: !isAdmin,
-        onClick: () => isAdmin && handleClick(MODE_UPLOAD),
-        "aria-label": "Upload SVG"
+        sx: {
+          "&:hover": {
+            backgroundColor: "rgba( 0, 0, 0, 0.75 )"
+          }
+        }
       },
-      __32("Upload", "elementor")
-    )))))
-  ))));
+      /* @__PURE__ */ React85.createElement(
+        SvgMediaOverlay,
+        {
+          isAdmin,
+          showIconLibrary,
+          buttonGroupRef,
+          onSelectSvg: handleSelectSvg,
+          onUpload: handleUpload,
+          onOpenIconLibrary: handleOpenIconLibrary,
+          infotipTitle: __35("Sorry, you can't upload that file yet.", "elementor"),
+          infotipDescription: /* @__PURE__ */ React85.createElement(UnfilteredUploadInfotipDescription, null)
+        }
+      )
+    )))
+  ));
 });
-function SvgMediaPreview({
-  isFetching,
-  src,
-  iconClassName,
-  iconLibrary
-}) {
-  useEffect16(() => {
-    if (iconLibrary) {
-      enqueueIconFonts(iconLibrary);
-    }
-  }, [iconLibrary]);
-  if (isFetching) {
-    return /* @__PURE__ */ React81.createElement(CircularProgress3, { role: "progressbar" });
-  }
-  if (iconClassName) {
-    return /* @__PURE__ */ React81.createElement(
-      Box15,
-      {
-        component: "i",
-        className: iconClassName,
-        "aria-label": __32("Preview icon", "elementor"),
-        sx: { fontSize: ICON_PREVIEW_FONT_SIZE }
-      }
-    );
-  }
-  return /* @__PURE__ */ React81.createElement(
-    CardMedia2,
-    {
-      component: "img",
-      image: src,
-      alt: __32("Preview SVG", "elementor"),
-      sx: { maxHeight: "140px", width: `${ICON_PREVIEW_FONT_SIZE}px` }
-    }
-  );
-}
+var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React85.createElement(React85.Fragment, null, __35("To upload them anyway, ask the site administrator to enable unfiltered", "elementor"), /* @__PURE__ */ React85.createElement("br", null), __35("file uploads.", "elementor"));
 
 // src/controls/video-media-control.tsx
-import * as React82 from "react";
+import * as React86 from "react";
 import { urlPropTypeUtil as urlPropTypeUtil5, videoSrcPropTypeUtil } from "@elementor/editor-props";
 import { UploadIcon as UploadIcon3 } from "@elementor/icons";
-import { Button as Button6, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress4, Stack as Stack14 } from "@elementor/ui";
+import { Button as Button6, Card as Card3, CardMedia as CardMedia3, CardOverlay as CardOverlay3, CircularProgress as CircularProgress5, Stack as Stack16 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment3, useWpMediaFrame as useWpMediaFrame3 } from "@elementor/wp-media";
-import { __ as __33 } from "@wordpress/i18n";
+import { __ as __36 } from "@wordpress/i18n";
 var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
 var VideoMediaControl = createControl(() => {
   const { value, setValue, propType } = useBoundProp(videoSrcPropTypeUtil);
@@ -5646,7 +6199,7 @@ var VideoMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React82.createElement(ControlActions, null, /* @__PURE__ */ React82.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React82.createElement(
+  return /* @__PURE__ */ React86.createElement(ControlActions, null, /* @__PURE__ */ React86.createElement(Card3, { variant: "outlined" }, /* @__PURE__ */ React86.createElement(
     CardMedia3,
     {
       sx: {
@@ -5661,8 +6214,8 @@ var VideoMediaControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React82.createElement(VideoPreview, { isFetching, videoUrl })
-  ), /* @__PURE__ */ React82.createElement(CardOverlay3, null, /* @__PURE__ */ React82.createElement(Stack14, { gap: 1 }, /* @__PURE__ */ React82.createElement(
+    /* @__PURE__ */ React86.createElement(VideoPreview, { isFetching, videoUrl })
+  ), /* @__PURE__ */ React86.createElement(CardOverlay3, null, /* @__PURE__ */ React86.createElement(Stack16, { gap: 1 }, /* @__PURE__ */ React86.createElement(
     Button6,
     {
       size: "tiny",
@@ -5670,18 +6223,18 @@ var VideoMediaControl = createControl(() => {
       variant: "outlined",
       onClick: () => open({ mode: "browse" })
     },
-    __33("Select video", "elementor")
-  ), /* @__PURE__ */ React82.createElement(
+    __36("Select video", "elementor")
+  ), /* @__PURE__ */ React86.createElement(
     Button6,
     {
       size: "tiny",
       variant: "text",
       color: "inherit",
-      startIcon: /* @__PURE__ */ React82.createElement(UploadIcon3, null),
+      startIcon: /* @__PURE__ */ React86.createElement(UploadIcon3, null),
       onClick: () => open({ mode: "upload" })
     },
-    __33("Upload", "elementor")
-  ), /* @__PURE__ */ React82.createElement(
+    __36("Upload", "elementor")
+  ), /* @__PURE__ */ React86.createElement(
     Button6,
     {
       size: "tiny",
@@ -5689,18 +6242,18 @@ var VideoMediaControl = createControl(() => {
       color: "inherit",
       onClick: () => open({ mode: "url", currentUrl: currentUrlForModal })
     },
-    __33("Insert from URL", "elementor")
+    __36("Insert from URL", "elementor")
   )))));
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
   if (isFetching) {
-    return /* @__PURE__ */ React82.createElement(CircularProgress4, null);
+    return /* @__PURE__ */ React86.createElement(CircularProgress5, null);
   }
   if (videoUrl) {
-    return /* @__PURE__ */ React82.createElement(
+    return /* @__PURE__ */ React86.createElement(
       "video",
       {
-        "aria-label": __33("Video preview", "elementor"),
+        "aria-label": __36("Video preview", "elementor"),
         src: videoUrl,
         muted: true,
         preload: "metadata",
@@ -5713,33 +6266,33 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
       }
     );
   }
-  return /* @__PURE__ */ React82.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
+  return /* @__PURE__ */ React86.createElement("img", { src: PLACEHOLDER_IMAGE, alt: "No video selected" });
 };
 
 // src/controls/background-control/background-control.tsx
-import * as React89 from "react";
+import * as React93 from "react";
 import { backgroundPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid18 } from "@elementor/ui";
-import { __ as __39 } from "@wordpress/i18n";
+import { __ as __42 } from "@wordpress/i18n";
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
-import * as React88 from "react";
+import * as React92 from "react";
 import {
   backgroundColorOverlayPropTypeUtil as backgroundColorOverlayPropTypeUtil2,
   backgroundImageOverlayPropTypeUtil as backgroundImageOverlayPropTypeUtil2,
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box16, CardMedia as CardMedia4, styled as styled10, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { Box as Box19, CardMedia as CardMedia4, styled as styled12, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
-import { __ as __38 } from "@wordpress/i18n";
+import { __ as __41 } from "@wordpress/i18n";
 
 // src/env.ts
 import { parseEnv } from "@elementor/env";
 var { env } = parseEnv("@elementor/editor-controls");
 
 // src/controls/background-control/background-gradient-color-control.tsx
-import * as React83 from "react";
+import * as React87 from "react";
 import {
   backgroundGradientOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil2,
@@ -5786,7 +6339,7 @@ var BackgroundGradientColorControl = createControl(() => {
       positions: positions?.value.split(" ")
     };
   };
-  return /* @__PURE__ */ React83.createElement(
+  return /* @__PURE__ */ React87.createElement(
     UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
@@ -5811,53 +6364,53 @@ var initialBackgroundGradientOverlay = backgroundGradientOverlayPropTypeUtil.cre
 });
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
-import * as React84 from "react";
+import * as React88 from "react";
 import { PinIcon, PinnedOffIcon } from "@elementor/icons";
 import { Grid as Grid14 } from "@elementor/ui";
-import { __ as __34 } from "@wordpress/i18n";
+import { __ as __37 } from "@wordpress/i18n";
 var attachmentControlOptions = [
   {
     value: "fixed",
-    label: __34("Fixed", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React84.createElement(PinIcon, { fontSize: size }),
+    label: __37("Fixed", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React88.createElement(PinIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "scroll",
-    label: __34("Scroll", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React84.createElement(PinnedOffIcon, { fontSize: size }),
+    label: __37("Scroll", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React88.createElement(PinnedOffIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React84.createElement(PopoverGridContainer, null, /* @__PURE__ */ React84.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React84.createElement(ControlFormLabel, null, __34("Attachment", "elementor"))), /* @__PURE__ */ React84.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React84.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React88.createElement(PopoverGridContainer, null, /* @__PURE__ */ React88.createElement(Grid14, { item: true, xs: 6 }, /* @__PURE__ */ React88.createElement(ControlFormLabel, null, __37("Attachment", "elementor"))), /* @__PURE__ */ React88.createElement(Grid14, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React88.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
-import * as React85 from "react";
-import { useRef as useRef15 } from "react";
+import * as React89 from "react";
+import { useRef as useRef16 } from "react";
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil16 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem6 } from "@elementor/editor-ui";
 import { LetterXIcon, LetterYIcon } from "@elementor/icons";
 import { Grid as Grid15, Select as Select4 } from "@elementor/ui";
-import { __ as __35 } from "@wordpress/i18n";
+import { __ as __38 } from "@wordpress/i18n";
 var backgroundPositionOptions = [
-  { label: __35("Center center", "elementor"), value: "center center" },
-  { label: __35("Center left", "elementor"), value: "center left" },
-  { label: __35("Center right", "elementor"), value: "center right" },
-  { label: __35("Top center", "elementor"), value: "top center" },
-  { label: __35("Top left", "elementor"), value: "top left" },
-  { label: __35("Top right", "elementor"), value: "top right" },
-  { label: __35("Bottom center", "elementor"), value: "bottom center" },
-  { label: __35("Bottom left", "elementor"), value: "bottom left" },
-  { label: __35("Bottom right", "elementor"), value: "bottom right" },
-  { label: __35("Custom", "elementor"), value: "custom" }
+  { label: __38("Center center", "elementor"), value: "center center" },
+  { label: __38("Center left", "elementor"), value: "center left" },
+  { label: __38("Center right", "elementor"), value: "center right" },
+  { label: __38("Top center", "elementor"), value: "top center" },
+  { label: __38("Top left", "elementor"), value: "top left" },
+  { label: __38("Top right", "elementor"), value: "top right" },
+  { label: __38("Bottom center", "elementor"), value: "bottom center" },
+  { label: __38("Bottom left", "elementor"), value: "bottom left" },
+  { label: __38("Bottom right", "elementor"), value: "bottom right" },
+  { label: __38("Custom", "elementor"), value: "custom" }
 ];
 var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil16);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef15(null);
+  const rowRef = useRef16(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -5866,7 +6419,7 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React85.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(PopoverGridContainer, null, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(ControlFormLabel, null, __35("Position", "elementor"))), /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React85.createElement(ControlActions, null, /* @__PURE__ */ React85.createElement(
+  return /* @__PURE__ */ React89.createElement(Grid15, { container: true, spacing: 1.5 }, /* @__PURE__ */ React89.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React89.createElement(PopoverGridContainer, null, /* @__PURE__ */ React89.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlFormLabel, null, __38("Position", "elementor"))), /* @__PURE__ */ React89.createElement(Grid15, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(
     Select4,
     {
       fullWidth: true,
@@ -5875,18 +6428,18 @@ var BackgroundImageOverlayPosition = () => {
       disabled: stringPropContext.disabled,
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
-    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React85.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React85.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React85.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React85.createElement(
+    backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React89.createElement(MenuListItem6, { key: value, value: value ?? "" }, label))
+  ))))), isCustom ? /* @__PURE__ */ React89.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React89.createElement(Grid15, { item: true, xs: 12 }, /* @__PURE__ */ React89.createElement(Grid15, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React89.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React89.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React85.createElement(LetterXIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React89.createElement(LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React85.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React85.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React85.createElement(
+  ))), /* @__PURE__ */ React89.createElement(Grid15, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React89.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React85.createElement(LetterYIcon, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React89.createElement(LetterYIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
@@ -5894,43 +6447,43 @@ var BackgroundImageOverlayPosition = () => {
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
-import * as React86 from "react";
+import * as React90 from "react";
 import { DotsHorizontalIcon, DotsVerticalIcon, GridDotsIcon, XIcon as XIcon3 } from "@elementor/icons";
 import { Grid as Grid16 } from "@elementor/ui";
-import { __ as __36 } from "@wordpress/i18n";
+import { __ as __39 } from "@wordpress/i18n";
 var repeatControlOptions = [
   {
     value: "repeat",
-    label: __36("Repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(GridDotsIcon, { fontSize: size }),
+    label: __39("Repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React90.createElement(GridDotsIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-x",
-    label: __36("Repeat-x", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(DotsHorizontalIcon, { fontSize: size }),
+    label: __39("Repeat-x", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React90.createElement(DotsHorizontalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "repeat-y",
-    label: __36("Repeat-y", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(DotsVerticalIcon, { fontSize: size }),
+    label: __39("Repeat-y", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React90.createElement(DotsVerticalIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "no-repeat",
-    label: __36("No-repeat", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React86.createElement(XIcon3, { fontSize: size }),
+    label: __39("No-repeat", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React90.createElement(XIcon3, { fontSize: size }),
     showTooltip: true
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React86.createElement(PopoverGridContainer, null, /* @__PURE__ */ React86.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React86.createElement(ControlFormLabel, null, __36("Repeat", "elementor"))), /* @__PURE__ */ React86.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React86.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React90.createElement(PopoverGridContainer, null, /* @__PURE__ */ React90.createElement(Grid16, { item: true, xs: 6 }, /* @__PURE__ */ React90.createElement(ControlFormLabel, null, __39("Repeat", "elementor"))), /* @__PURE__ */ React90.createElement(Grid16, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React90.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
-import * as React87 from "react";
-import { useRef as useRef16 } from "react";
+import * as React91 from "react";
+import { useRef as useRef17 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -5941,30 +6494,30 @@ import {
   PencilIcon
 } from "@elementor/icons";
 import { Grid as Grid17 } from "@elementor/ui";
-import { __ as __37 } from "@wordpress/i18n";
+import { __ as __40 } from "@wordpress/i18n";
 var sizeControlOptions = [
   {
     value: "auto",
-    label: __37("Auto", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(LetterAIcon, { fontSize: size }),
+    label: __40("Auto", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(LetterAIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "cover",
-    label: __37("Cover", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(ArrowsMaximizeIcon, { fontSize: size }),
+    label: __40("Cover", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(ArrowsMaximizeIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "contain",
-    label: __37("Contain", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(ArrowBarBothIcon, { fontSize: size }),
+    label: __40("Contain", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(ArrowBarBothIcon, { fontSize: size }),
     showTooltip: true
   },
   {
     value: "custom",
-    label: __37("Custom", "elementor"),
-    renderContent: ({ size }) => /* @__PURE__ */ React87.createElement(PencilIcon, { fontSize: size }),
+    label: __40("Custom", "elementor"),
+    renderContent: ({ size }) => /* @__PURE__ */ React91.createElement(PencilIcon, { fontSize: size }),
     showTooltip: true
   }
 ];
@@ -5972,7 +6525,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil17);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef16(null);
+  const rowRef = useRef17(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -5980,7 +6533,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React87.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, null, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(ControlFormLabel, null, __37("Size", "elementor"))), /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React87.createElement(
+  return /* @__PURE__ */ React91.createElement(Grid17, { container: true, spacing: 1.5 }, /* @__PURE__ */ React91.createElement(Grid17, { item: true, xs: 12 }, /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, __40("Size", "elementor"))), /* @__PURE__ */ React91.createElement(Grid17, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React91.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -5989,17 +6542,17 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React87.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React87.createElement(PopoverGridContainer, null, /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React87.createElement(
+  )))), isCustom ? /* @__PURE__ */ React91.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React91.createElement(Grid17, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React91.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React87.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React91.createElement(ArrowsMoveHorizontalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React87.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React87.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React87.createElement(
+  ))), /* @__PURE__ */ React91.createElement(Grid17, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React91.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React87.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React91.createElement(ArrowsMoveVerticalIcon2, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
@@ -6007,7 +6560,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef17 } from "react";
+import { useRef as useRef18 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -6032,7 +6585,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef17({
+  const valuesHistory = useRef18({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -6100,29 +6653,29 @@ var getInitialBackgroundOverlay = () => ({
   }
 });
 var backgroundResolutionOptions = [
-  { label: __38("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
-  { label: __38("Medium - 300 x 300", "elementor"), value: "medium" },
-  { label: __38("Large 1024 x 1024", "elementor"), value: "large" },
-  { label: __38("Full", "elementor"), value: "full" }
+  { label: __41("Thumbnail - 150 x 150", "elementor"), value: "thumbnail" },
+  { label: __41("Medium - 300 x 300", "elementor"), value: "medium" },
+  { label: __41("Large 1024 x 1024", "elementor"), value: "large" },
+  { label: __41("Full", "elementor"), value: "full" }
 ];
 var BackgroundOverlayRepeaterControl = createControl(() => {
   const { propType, value: overlayValues, setValue } = useBoundProp(backgroundOverlayPropTypeUtil);
-  return /* @__PURE__ */ React88.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React92.createElement(PropProvider, { propType, value: overlayValues, setValue }, /* @__PURE__ */ React92.createElement(
     ControlRepeater,
     {
       initial: getInitialBackgroundOverlay(),
       propTypeUtil: backgroundOverlayPropTypeUtil
     },
-    /* @__PURE__ */ React88.createElement(RepeaterHeader, { label: __38("Overlay", "elementor") }, /* @__PURE__ */ React88.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
-    /* @__PURE__ */ React88.createElement(ItemsContainer, null, /* @__PURE__ */ React88.createElement(
+    /* @__PURE__ */ React92.createElement(RepeaterHeader, { label: __41("Overlay", "elementor") }, /* @__PURE__ */ React92.createElement(TooltipAddItemAction, { newItemIndex: 0 })),
+    /* @__PURE__ */ React92.createElement(ItemsContainer, null, /* @__PURE__ */ React92.createElement(
       Item,
       {
         Icon: ItemIcon2,
         Label: ItemLabel3,
-        actions: /* @__PURE__ */ React88.createElement(React88.Fragment, null, /* @__PURE__ */ React88.createElement(DuplicateItemAction, null), /* @__PURE__ */ React88.createElement(DisableItemAction, null), /* @__PURE__ */ React88.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React92.createElement(React92.Fragment, null, /* @__PURE__ */ React92.createElement(DuplicateItemAction, null), /* @__PURE__ */ React92.createElement(DisableItemAction, null), /* @__PURE__ */ React92.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React88.createElement(EditItemPopover, null, /* @__PURE__ */ React88.createElement(ItemContent2, null))
+    /* @__PURE__ */ React92.createElement(EditItemPopover, null, /* @__PURE__ */ React92.createElement(ItemContent2, null))
   ));
 });
 var ItemContent2 = () => {
@@ -6132,27 +6685,27 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React88.createElement(Box16, { sx: { width: "100%" } }, /* @__PURE__ */ React88.createElement(Box16, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React92.createElement(Box19, { sx: { width: "100%" } }, /* @__PURE__ */ React92.createElement(Box19, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React92.createElement(
     Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
-      "aria-label": __38("Background Overlay", "elementor")
+      "aria-label": __41("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React88.createElement(Tab, { label: __38("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React88.createElement(Tab, { label: __38("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React88.createElement(Tab, { label: __38("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React88.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React88.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React88.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React88.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React88.createElement(PopoverContent, null, /* @__PURE__ */ React88.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React92.createElement(Tab, { label: __41("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React92.createElement(Tab, { label: __41("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React92.createElement(Tab, { label: __41("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React92.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React92.createElement(PopoverContent, null, /* @__PURE__ */ React92.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React92.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React92.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React92.createElement(TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React92.createElement(PopoverContent, null, /* @__PURE__ */ React92.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React88.createElement(ItemIconImage, { value });
+      return /* @__PURE__ */ React92.createElement(ItemIconImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React88.createElement(ItemIconColor, { value });
+      return /* @__PURE__ */ React92.createElement(ItemIconColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React88.createElement(ItemIconGradient, { value });
+      return /* @__PURE__ */ React92.createElement(ItemIconGradient, { value });
     default:
       return null;
   }
@@ -6165,11 +6718,11 @@ var extractColorFrom = (prop) => {
 };
 var ItemIconColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React88.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
+  return /* @__PURE__ */ React92.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: color });
 };
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
-  return /* @__PURE__ */ React88.createElement(
+  return /* @__PURE__ */ React92.createElement(
     CardMedia4,
     {
       image: imageUrl,
@@ -6184,43 +6737,43 @@ var ItemIconImage = ({ value }) => {
 };
 var ItemIconGradient = ({ value }) => {
   const gradient = getGradientValue(value);
-  return /* @__PURE__ */ React88.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
+  return /* @__PURE__ */ React92.createElement(StyledUnstableColorIndicator3, { size: "inherit", component: "span", value: gradient });
 };
 var ItemLabel3 = ({ value }) => {
   switch (value.$$type) {
     case "background-image-overlay":
-      return /* @__PURE__ */ React88.createElement(ItemLabelImage, { value });
+      return /* @__PURE__ */ React92.createElement(ItemLabelImage, { value });
     case "background-color-overlay":
-      return /* @__PURE__ */ React88.createElement(ItemLabelColor, { value });
+      return /* @__PURE__ */ React92.createElement(ItemLabelColor, { value });
     case "background-gradient-overlay":
-      return /* @__PURE__ */ React88.createElement(ItemLabelGradient, { value });
+      return /* @__PURE__ */ React92.createElement(ItemLabelGradient, { value });
     default:
       return null;
   }
 };
 var ItemLabelColor = ({ value: prop }) => {
   const color = extractColorFrom(prop);
-  return /* @__PURE__ */ React88.createElement("span", null, color);
+  return /* @__PURE__ */ React92.createElement("span", null, color);
 };
 var ItemLabelImage = ({ value }) => {
   const { imageTitle } = useImage(value);
-  return /* @__PURE__ */ React88.createElement("span", null, imageTitle);
+  return /* @__PURE__ */ React92.createElement("span", null, imageTitle);
 };
 var ItemLabelGradient = ({ value }) => {
   if (value.value.type.value === "linear") {
-    return /* @__PURE__ */ React88.createElement("span", null, __38("Linear Gradient", "elementor"));
+    return /* @__PURE__ */ React92.createElement("span", null, __41("Linear Gradient", "elementor"));
   }
-  return /* @__PURE__ */ React88.createElement("span", null, __38("Radial Gradient", "elementor"));
+  return /* @__PURE__ */ React92.createElement("span", null, __41("Radial Gradient", "elementor"));
 };
 var ColorOverlayContent = ({ anchorEl }) => {
   const propContext = useBoundProp(backgroundColorOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React88.createElement(ColorControl, { anchorEl })));
+  return /* @__PURE__ */ React92.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React92.createElement(ColorControl, { anchorEl })));
 };
 var ImageOverlayContent = () => {
   const propContext = useBoundProp(backgroundImageOverlayPropTypeUtil2);
-  return /* @__PURE__ */ React88.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React88.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React88.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React88.createElement(BackgroundImageOverlayAttachment, null)));
+  return /* @__PURE__ */ React92.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React92.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React92.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React92.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React92.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React92.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator3 = styled10(UnstableColorIndicator3)(({ theme }) => ({
+var StyledUnstableColorIndicator3 = styled12(UnstableColorIndicator3)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -6259,29 +6812,29 @@ var getGradientValue = (value) => {
 
 // src/controls/background-control/background-control.tsx
 var clipOptions = [
-  { label: __39("Full element", "elementor"), value: "border-box" },
-  { label: __39("Padding edges", "elementor"), value: "padding-box" },
-  { label: __39("Content edges", "elementor"), value: "content-box" },
-  { label: __39("Text", "elementor"), value: "text" }
+  { label: __42("Full element", "elementor"), value: "border-box" },
+  { label: __42("Padding edges", "elementor"), value: "padding-box" },
+  { label: __42("Content edges", "elementor"), value: "content-box" },
+  { label: __42("Text", "elementor"), value: "text" }
 ];
-var colorLabel = __39("Color", "elementor");
-var clipLabel = __39("Clipping", "elementor");
+var colorLabel = __42("Color", "elementor");
+var clipLabel = __42("Clipping", "elementor");
 var BackgroundControl = createControl(() => {
   const propContext = useBoundProp(backgroundPropTypeUtil);
-  return /* @__PURE__ */ React89.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React89.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React89.createElement(BackgroundColorField, null), /* @__PURE__ */ React89.createElement(BackgroundClipField, null));
+  return /* @__PURE__ */ React93.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React93.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React93.createElement(BackgroundColorField, null), /* @__PURE__ */ React93.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React89.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React93.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React93.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React93.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React89.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React89.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React89.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React89.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React93.createElement(Grid18, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React93.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React93.createElement(Grid18, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
-import * as React90 from "react";
-import { useMemo as useMemo12 } from "react";
+import * as React94 from "react";
+import { useMemo as useMemo13 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
-import { Box as Box17 } from "@elementor/ui";
+import { Box as Box20 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -6300,11 +6853,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo12(
+    const childArrayPropTypeUtil2 = useMemo13(
       () => createArrayPropUtils2(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo12(
+    const contextValue = useMemo13(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -6314,14 +6867,14 @@ var RepeatableControl = createControl(
     );
     const { propType, value, setValue } = useBoundProp(childArrayPropTypeUtil2);
     const newItemIndex = addItemTooltipProps?.newItemIndex === null ? void 0 : 0;
-    return /* @__PURE__ */ React90.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React90.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React90.createElement(
+    return /* @__PURE__ */ React94.createElement(PropProvider, { propType, value, setValue }, /* @__PURE__ */ React94.createElement(RepeatableControlContext.Provider, { value: contextValue }, /* @__PURE__ */ React94.createElement(
       ControlRepeater,
       {
         initial: childPropTypeUtil.create(initialValues || null),
         propTypeUtil: childArrayPropTypeUtil2,
         isItemDisabled: isItemDisabled2
       },
-      /* @__PURE__ */ React90.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React90.createElement(
+      /* @__PURE__ */ React94.createElement(RepeaterHeader, { label: repeaterLabel }, /* @__PURE__ */ React94.createElement(
         TooltipAddItemAction,
         {
           ...addItemTooltipProps,
@@ -6329,22 +6882,22 @@ var RepeatableControl = createControl(
           ariaLabel: repeaterLabel
         }
       )),
-      /* @__PURE__ */ React90.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React90.createElement(
+      /* @__PURE__ */ React94.createElement(ItemsContainer, { isSortable }, /* @__PURE__ */ React94.createElement(
         Item,
         {
           Icon: ItemIcon3,
           Label: ItemLabel4,
-          actions: /* @__PURE__ */ React90.createElement(React90.Fragment, null, showDuplicate && /* @__PURE__ */ React90.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React90.createElement(DisableItemAction, null), /* @__PURE__ */ React90.createElement(RemoveItemAction, null))
+          actions: /* @__PURE__ */ React94.createElement(React94.Fragment, null, showDuplicate && /* @__PURE__ */ React94.createElement(DuplicateItemAction, null), showToggle && /* @__PURE__ */ React94.createElement(DisableItemAction, null), /* @__PURE__ */ React94.createElement(RemoveItemAction, null))
         }
       )),
-      /* @__PURE__ */ React90.createElement(EditItemPopover, null, /* @__PURE__ */ React90.createElement(Content2, null))
+      /* @__PURE__ */ React94.createElement(EditItemPopover, null, /* @__PURE__ */ React94.createElement(Content2, null))
     )));
   }
 );
-var ItemIcon3 = () => /* @__PURE__ */ React90.createElement(React90.Fragment, null);
+var ItemIcon3 = () => /* @__PURE__ */ React94.createElement(React94.Fragment, null);
 var Content2 = () => {
   const { component: ChildControl, props = {} } = useRepeatableControlContext();
-  return /* @__PURE__ */ React90.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React90.createElement(PopoverGridContainer, null, /* @__PURE__ */ React90.createElement(ChildControl, { ...props })));
+  return /* @__PURE__ */ React94.createElement(PopoverContent, { p: 1.5 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(ChildControl, { ...props })));
 };
 var interpolate = (template, data) => {
   if (!data) {
@@ -6427,7 +6980,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React90.createElement(Box17, { component: "span", color }, label);
+  return /* @__PURE__ */ React94.createElement(Box20, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -6435,15 +6988,15 @@ var getAllProperties = (pattern) => {
 };
 
 // src/controls/key-value-control.tsx
-import * as React91 from "react";
-import { useMemo as useMemo13, useState as useState17 } from "react";
+import * as React95 from "react";
+import { useMemo as useMemo14, useState as useState18 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
   stringPropTypeUtil as stringPropTypeUtil18
 } from "@elementor/editor-props";
 import { FormHelperText, FormLabel as FormLabel3, Grid as Grid19 } from "@elementor/ui";
-import { __ as __40 } from "@wordpress/i18n";
+import { __ as __43 } from "@wordpress/i18n";
 
 // src/utils/escape-html-attr.ts
 var escapeHtmlAttr = (value) => {
@@ -6467,23 +7020,23 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState17("");
-  const [valueError, setValueError] = useState17("");
-  const [sessionState, setSessionState] = useState17({
+  const [keyError, setKeyError] = useState18("");
+  const [valueError, setValueError] = useState18("");
+  const [sessionState, setSessionState] = useState18({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
-  const keyLabel = props.keyName || __40("Key", "elementor");
-  const valueLabel = props.valueName || __40("Value", "elementor");
+  const keyLabel = props.keyName || __43("Key", "elementor");
+  const valueLabel = props.valueName || __43("Value", "elementor");
   const { keyHelper, valueHelper } = props.getHelperText?.(sessionState.key, sessionState.value) || {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo13(
+  const [keyRegex, valueRegex, errMsg] = useMemo14(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
-      props.validationErrorMessage || __40("Invalid Format", "elementor")
+      props.validationErrorMessage || __43("Invalid Format", "elementor")
     ],
     [props.regexKey, props.regexValue, props.validationErrorMessage]
   );
@@ -6532,14 +7085,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React91.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React91.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React91.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React91.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React91.createElement(
+  return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React95.createElement(Grid19, { container: true, gap: 1.5 }, /* @__PURE__ */ React95.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React95.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React95.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React91.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React91.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React91.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React91.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React91.createElement(
+  )), !!keyError && /* @__PURE__ */ React95.createElement(FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React95.createElement(Grid19, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React95.createElement(FormLabel3, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React95.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -6547,27 +7100,27 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React91.createElement(FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React95.createElement(FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
-import * as React92 from "react";
+import * as React96 from "react";
 import { positionPropTypeUtil, stringPropTypeUtil as stringPropTypeUtil19 } from "@elementor/editor-props";
 import { MenuListItem as MenuListItem7 } from "@elementor/editor-ui";
 import { LetterXIcon as LetterXIcon2, LetterYIcon as LetterYIcon2 } from "@elementor/icons";
 import { Grid as Grid20, Select as Select5 } from "@elementor/ui";
-import { __ as __41 } from "@wordpress/i18n";
+import { __ as __44 } from "@wordpress/i18n";
 var positionOptions = [
-  { label: __41("Center center", "elementor"), value: "center center" },
-  { label: __41("Center left", "elementor"), value: "center left" },
-  { label: __41("Center right", "elementor"), value: "center right" },
-  { label: __41("Top center", "elementor"), value: "top center" },
-  { label: __41("Top left", "elementor"), value: "top left" },
-  { label: __41("Top right", "elementor"), value: "top right" },
-  { label: __41("Bottom center", "elementor"), value: "bottom center" },
-  { label: __41("Bottom left", "elementor"), value: "bottom left" },
-  { label: __41("Bottom right", "elementor"), value: "bottom right" },
-  { label: __41("Custom", "elementor"), value: "custom" }
+  { label: __44("Center center", "elementor"), value: "center center" },
+  { label: __44("Center left", "elementor"), value: "center left" },
+  { label: __44("Center right", "elementor"), value: "center right" },
+  { label: __44("Top center", "elementor"), value: "top center" },
+  { label: __44("Top left", "elementor"), value: "top left" },
+  { label: __44("Top right", "elementor"), value: "top right" },
+  { label: __44("Bottom center", "elementor"), value: "bottom center" },
+  { label: __44("Bottom left", "elementor"), value: "bottom left" },
+  { label: __44("Bottom right", "elementor"), value: "bottom right" },
+  { label: __44("Custom", "elementor"), value: "custom" }
 ];
 var PositionControl = () => {
   const positionContext = useBoundProp(positionPropTypeUtil);
@@ -6582,7 +7135,7 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React92.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, __41("Object position", "elementor"))), /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(
+  return /* @__PURE__ */ React96.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React96.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(Grid20, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlFormLabel, null, __44("Object position", "elementor"))), /* @__PURE__ */ React96.createElement(Grid20, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React96.createElement(
     Select5,
     {
       size: "tiny",
@@ -6593,29 +7146,29 @@ var PositionControl = () => {
       renderValue: (selectedValue) => getSelectRenderValue(positionOptions, placeholder, selectedValue),
       fullWidth: true
     },
-    positionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React92.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
+    positionOptions.map(({ label, value }) => /* @__PURE__ */ React96.createElement(MenuListItem7, { key: value, value: value ?? "" }, label))
+  )))), isCustom && /* @__PURE__ */ React96.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React96.createElement(Grid20, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(Grid20, { container: true, spacing: 1.5 }, /* @__PURE__ */ React96.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React96.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React92.createElement(LetterXIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React96.createElement(LetterXIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React92.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
+  ))), /* @__PURE__ */ React96.createElement(Grid20, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React96.createElement(
     SizeControl,
     {
-      startIcon: /* @__PURE__ */ React92.createElement(LetterYIcon2, { fontSize: "tiny" }),
+      startIcon: /* @__PURE__ */ React96.createElement(LetterYIcon2, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
   )))))));
 };
 
 // src/controls/transform-control/transform-repeater-control.tsx
-import * as React105 from "react";
-import { useRef as useRef25 } from "react";
+import * as React109 from "react";
+import { useRef as useRef26 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { bindTrigger as bindTrigger5, Box as Box21, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography7, usePopupState as usePopupState8 } from "@elementor/ui";
-import { __ as __51 } from "@wordpress/i18n";
+import { bindTrigger as bindTrigger5, Box as Box24, IconButton as IconButton8, Tooltip as Tooltip8, Typography as Typography9, usePopupState as usePopupState9 } from "@elementor/ui";
+import { __ as __54 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
 import {
@@ -6669,24 +7222,24 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 });
 
 // src/controls/transform-control/transform-content.tsx
-import * as React99 from "react";
-import { Box as Box18, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
-import { __ as __46 } from "@wordpress/i18n";
+import * as React103 from "react";
+import { Box as Box21, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { __ as __49 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
-import * as React94 from "react";
-import { useRef as useRef18 } from "react";
+import * as React98 from "react";
+import { useRef as useRef19 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
-import { __ as __42 } from "@wordpress/i18n";
+import { __ as __45 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/axis-row.tsx
-import * as React93 from "react";
+import * as React97 from "react";
 import { Grid as Grid21 } from "@elementor/ui";
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React93.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React93.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React93.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React93.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React97.createElement(Grid21, { item: true, xs: 12 }, /* @__PURE__ */ React97.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React97.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React97.createElement(Grid21, { item: true, xs: 6 }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React97.createElement(
     SizeControl,
     {
       anchorRef,
@@ -6702,28 +7255,28 @@ var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "an
 // src/controls/transform-control/functions/move.tsx
 var moveAxisControls = [
   {
-    label: __42("Move X", "elementor"),
+    label: __45("Move X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React94.createElement(ArrowRightIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React98.createElement(ArrowRightIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw"]
   },
   {
-    label: __42("Move Y", "elementor"),
+    label: __45("Move Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React94.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React98.createElement(ArrowDownSmallIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vh"]
   },
   {
-    label: __42("Move Z", "elementor"),
+    label: __45("Move Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React94.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
+    startIcon: /* @__PURE__ */ React98.createElement(ArrowDownLeftIcon, { fontSize: "tiny" }),
     units: ["px", "%", "em", "rem", "vw", "vh"]
   }
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef18(null), useRef18(null), useRef18(null)];
-  return /* @__PURE__ */ React94.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(PropProvider, { ...context }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React94.createElement(
+  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
+  return /* @__PURE__ */ React98.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(PropProvider, { ...context }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React98.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -6736,34 +7289,34 @@ var Move = () => {
 };
 
 // src/controls/transform-control/functions/rotate.tsx
-import * as React95 from "react";
-import { useRef as useRef19 } from "react";
+import * as React99 from "react";
+import { useRef as useRef20 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
-import { __ as __43 } from "@wordpress/i18n";
+import { __ as __46 } from "@wordpress/i18n";
 var rotateAxisControls = [
   {
-    label: __43("Rotate X", "elementor"),
+    label: __46("Rotate X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React95.createElement(Arrow360Icon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React99.createElement(Arrow360Icon, { fontSize: "tiny" })
   },
   {
-    label: __43("Rotate Y", "elementor"),
+    label: __46("Rotate Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React95.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React99.createElement(Arrow360Icon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   },
   {
-    label: __43("Rotate Z", "elementor"),
+    label: __46("Rotate Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React95.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React99.createElement(RotateClockwiseIcon, { fontSize: "tiny" })
   }
 ];
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef19(null), useRef19(null), useRef19(null)];
-  return /* @__PURE__ */ React95.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React95.createElement(PropProvider, { ...context }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React95.createElement(
+  const rowRefs = [useRef20(null), useRef20(null), useRef20(null)];
+  return /* @__PURE__ */ React99.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(PropProvider, { ...context }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React99.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -6775,68 +7328,68 @@ var Rotate = () => {
 };
 
 // src/controls/transform-control/functions/scale.tsx
-import * as React97 from "react";
-import { useRef as useRef20 } from "react";
+import * as React101 from "react";
+import { useRef as useRef21 } from "react";
 import { scaleTransformPropTypeUtil as scaleTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowDownLeftIcon as ArrowDownLeftIcon2, ArrowDownSmallIcon as ArrowDownSmallIcon2, ArrowRightIcon as ArrowRightIcon2 } from "@elementor/icons";
 import { Grid as Grid25 } from "@elementor/ui";
-import { __ as __44 } from "@wordpress/i18n";
+import { __ as __47 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
-import * as React96 from "react";
+import * as React100 from "react";
 import { Grid as Grid24 } from "@elementor/ui";
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React96.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React96.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React96.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, label)), /* @__PURE__ */ React96.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React96.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React100.createElement(Grid24, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, null, label)), /* @__PURE__ */ React100.createElement(Grid24, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
 var scaleAxisControls = [
   {
-    label: __44("Scale X", "elementor"),
+    label: __47("Scale X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React97.createElement(ArrowRightIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React101.createElement(ArrowRightIcon2, { fontSize: "tiny" })
   },
   {
-    label: __44("Scale Y", "elementor"),
+    label: __47("Scale Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React97.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React101.createElement(ArrowDownSmallIcon2, { fontSize: "tiny" })
   },
   {
-    label: __44("Scale Z", "elementor"),
+    label: __47("Scale Z", "elementor"),
     bind: "z",
-    startIcon: /* @__PURE__ */ React97.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React101.createElement(ArrowDownLeftIcon2, { fontSize: "tiny" })
   }
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef20(null), useRef20(null), useRef20(null)];
-  return /* @__PURE__ */ React97.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React97.createElement(PropProvider, { ...context }, /* @__PURE__ */ React97.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React97.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  const rowRefs = [useRef21(null), useRef21(null), useRef21(null)];
+  return /* @__PURE__ */ React101.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
-import * as React98 from "react";
-import { useRef as useRef21 } from "react";
+import * as React102 from "react";
+import { useRef as useRef22 } from "react";
 import { skewTransformPropTypeUtil as skewTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { ArrowLeftIcon, ArrowRightIcon as ArrowRightIcon3 } from "@elementor/icons";
 import { Grid as Grid26 } from "@elementor/ui";
-import { __ as __45 } from "@wordpress/i18n";
+import { __ as __48 } from "@wordpress/i18n";
 var skewAxisControls = [
   {
-    label: __45("Skew X", "elementor"),
+    label: __48("Skew X", "elementor"),
     bind: "x",
-    startIcon: /* @__PURE__ */ React98.createElement(ArrowRightIcon3, { fontSize: "tiny" })
+    startIcon: /* @__PURE__ */ React102.createElement(ArrowRightIcon3, { fontSize: "tiny" })
   },
   {
-    label: __45("Skew Y", "elementor"),
+    label: __48("Skew Y", "elementor"),
     bind: "y",
-    startIcon: /* @__PURE__ */ React98.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
+    startIcon: /* @__PURE__ */ React102.createElement(ArrowLeftIcon, { fontSize: "tiny", style: { transform: "scaleX(-1) rotate(-90deg)" } })
   }
 ];
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef21(null), useRef21(null), useRef21(null)];
-  return /* @__PURE__ */ React98.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React98.createElement(PropProvider, { ...context }, /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React98.createElement(
+  const rowRefs = [useRef22(null), useRef22(null), useRef22(null)];
+  return /* @__PURE__ */ React102.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -6848,7 +7401,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef22 } from "react";
+import { useRef as useRef23 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -6880,7 +7433,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef22({
+  const valuesHistory = useRef23({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -6941,7 +7494,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React99.createElement(PopoverContent, null, /* @__PURE__ */ React99.createElement(Box18, { sx: { width: "100%" } }, /* @__PURE__ */ React99.createElement(Box18, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React99.createElement(
+  return /* @__PURE__ */ React103.createElement(PopoverContent, null, /* @__PURE__ */ React103.createElement(Box21, { sx: { width: "100%" } }, /* @__PURE__ */ React103.createElement(Box21, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React103.createElement(
     Tabs2,
     {
       size: "small",
@@ -6952,37 +7505,37 @@ var TransformContent = () => {
         }
       },
       ...getTabsProps(),
-      "aria-label": __46("Transform", "elementor")
+      "aria-label": __49("Transform", "elementor")
     },
-    /* @__PURE__ */ React99.createElement(Tab2, { label: __46("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React99.createElement(Tab2, { label: __46("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React99.createElement(Tab2, { label: __46("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React99.createElement(Tab2, { label: __46("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React99.createElement(Move, null)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React99.createElement(Scale, null)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React99.createElement(Rotate, null)), /* @__PURE__ */ React99.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React99.createElement(Skew, null))));
+    /* @__PURE__ */ React103.createElement(Tab2, { label: __49("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React103.createElement(Tab2, { label: __49("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React103.createElement(Tab2, { label: __49("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React103.createElement(Tab2, { label: __49("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React103.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React103.createElement(Move, null)), /* @__PURE__ */ React103.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React103.createElement(Scale, null)), /* @__PURE__ */ React103.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React103.createElement(Rotate, null)), /* @__PURE__ */ React103.createElement(TabPanel2, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React103.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
-import * as React100 from "react";
+import * as React104 from "react";
 import { ArrowAutofitHeightIcon, ArrowsMaximizeIcon as ArrowsMaximizeIcon2, RotateClockwise2Icon, SkewXIcon } from "@elementor/icons";
 var TransformIcon = ({ value }) => {
   switch (value.$$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React100.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
+      return /* @__PURE__ */ React104.createElement(ArrowsMaximizeIcon2, { fontSize: "tiny" });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React100.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React104.createElement(ArrowAutofitHeightIcon, { fontSize: "tiny" });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React100.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React104.createElement(RotateClockwise2Icon, { fontSize: "tiny" });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React100.createElement(SkewXIcon, { fontSize: "tiny" });
+      return /* @__PURE__ */ React104.createElement(SkewXIcon, { fontSize: "tiny" });
     default:
       return null;
   }
 };
 
 // src/controls/transform-control/transform-label.tsx
-import * as React101 from "react";
-import { Box as Box19 } from "@elementor/ui";
-import { __ as __47 } from "@wordpress/i18n";
+import * as React105 from "react";
+import { Box as Box22 } from "@elementor/ui";
+import { __ as __50 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
   return orderedAxis.map((axisKey) => {
@@ -7000,98 +7553,98 @@ var TransformLabel = (props) => {
   const { $$type, value } = props.value;
   switch ($$type) {
     case TransformFunctionKeys.move:
-      return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Move", "elementor"), value: formatLabel(value, "move") });
+      return /* @__PURE__ */ React105.createElement(Label2, { label: __50("Move", "elementor"), value: formatLabel(value, "move") });
     case TransformFunctionKeys.scale:
-      return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Scale", "elementor"), value: formatLabel(value, "scale") });
+      return /* @__PURE__ */ React105.createElement(Label2, { label: __50("Scale", "elementor"), value: formatLabel(value, "scale") });
     case TransformFunctionKeys.rotate:
-      return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Rotate", "elementor"), value: formatLabel(value, "rotate") });
+      return /* @__PURE__ */ React105.createElement(Label2, { label: __50("Rotate", "elementor"), value: formatLabel(value, "rotate") });
     case TransformFunctionKeys.skew:
-      return /* @__PURE__ */ React101.createElement(Label2, { label: __47("Skew", "elementor"), value: formatLabel(value, "skew") });
+      return /* @__PURE__ */ React105.createElement(Label2, { label: __50("Skew", "elementor"), value: formatLabel(value, "skew") });
     default:
       return "";
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React101.createElement(Box19, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React105.createElement(Box22, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
-import * as React104 from "react";
-import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
+import * as React108 from "react";
+import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, Box as Box20, Divider as Divider4, Popover as Popover6 } from "@elementor/ui";
-import { __ as __50 } from "@wordpress/i18n";
+import { bindPopover as bindPopover6, Box as Box23, Divider as Divider5, Popover as Popover7 } from "@elementor/ui";
+import { __ as __53 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
-import * as React102 from "react";
-import { useRef as useRef23 } from "react";
+import * as React106 from "react";
+import { useRef as useRef24 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid27, Stack as Stack15 } from "@elementor/ui";
-import { __ as __48 } from "@wordpress/i18n";
+import { Grid as Grid27, Stack as Stack17 } from "@elementor/ui";
+import { __ as __51 } from "@wordpress/i18n";
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
-  label: __48("Perspective", "elementor"),
+  label: __51("Perspective", "elementor"),
   bind: "perspective",
   units: ["px", "em", "rem", "vw", "vh"]
 };
 var CHILDREN_PERSPECTIVE_FIELDS = [
   {
-    label: __48("Origin X", "elementor"),
+    label: __51("Origin X", "elementor"),
     bind: "x",
     units: ORIGIN_UNITS
   },
   {
-    label: __48("Origin Y", "elementor"),
+    label: __51("Origin Y", "elementor"),
     bind: "y",
     units: ORIGIN_UNITS
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React102.createElement(Stack15, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, __48("Children perspective", "elementor")), /* @__PURE__ */ React102.createElement(PerspectiveControl, null), /* @__PURE__ */ React102.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React106.createElement(Stack17, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React106.createElement(ControlFormLabel, null, __51("Children perspective", "elementor")), /* @__PURE__ */ React106.createElement(PerspectiveControl, null), /* @__PURE__ */ React106.createElement(PerspectiveOriginControl, null));
 };
-var PerspectiveControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React102.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
-var PerspectiveOriginControl = () => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React102.createElement(PerspectiveOriginControlProvider, null));
+var PerspectiveControl = () => /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React106.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
+var PerspectiveOriginControl = () => /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React106.createElement(PerspectiveOriginControlProvider, null));
 var PerspectiveOriginControlProvider = () => {
   const context = useBoundProp(perspectiveOriginPropTypeUtil);
-  return /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React102.createElement(ControlFields, { control }))));
+  return /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React106.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef23(null);
-  return /* @__PURE__ */ React102.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React102.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React102.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React102.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  const rowRef = useRef24(null);
+  return /* @__PURE__ */ React106.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React106.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React106.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
-import * as React103 from "react";
-import { useRef as useRef24 } from "react";
+import * as React107 from "react";
+import { useRef as useRef25 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid28, Stack as Stack16 } from "@elementor/ui";
-import { __ as __49 } from "@wordpress/i18n";
+import { Grid as Grid28, Stack as Stack18 } from "@elementor/ui";
+import { __ as __52 } from "@wordpress/i18n";
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
 var TRANSFORM_ORIGIN_FIELDS = [
   {
-    label: __49("Origin X", "elementor"),
+    label: __52("Origin X", "elementor"),
     bind: "x",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __49("Origin Y", "elementor"),
+    label: __52("Origin Y", "elementor"),
     bind: "y",
     units: TRANSFORM_ORIGIN_UNITS
   },
   {
-    label: __49("Origin Z", "elementor"),
+    label: __52("Origin Z", "elementor"),
     bind: "z",
     units: TRANSFORM_ORIGIN_UNITS_Z_AXIS
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React103.createElement(Stack16, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, __49("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React103.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React107.createElement(Stack18, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React107.createElement(ControlFormLabel, null, __52("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React107.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef24(null);
-  return /* @__PURE__ */ React103.createElement(PropProvider, { ...context }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React103.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React103.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
+  const rowRef = useRef25(null);
+  return /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React107.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React107.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React107.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React107.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React107.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -7105,8 +7658,8 @@ var TransformSettingsControl = ({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
-  return /* @__PURE__ */ React104.createElement(
-    Popover6,
+  return /* @__PURE__ */ React108.createElement(
+    Popover7,
     {
       disablePortal: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
@@ -7120,16 +7673,16 @@ var TransformSettingsControl = ({
       },
       ...popupProps
     },
-    /* @__PURE__ */ React104.createElement(
-      PopoverHeader4,
+    /* @__PURE__ */ React108.createElement(
+      PopoverHeader5,
       {
-        title: __50("Transform settings", "elementor"),
+        title: __53("Transform settings", "elementor"),
         onClose: popupState.close,
-        icon: /* @__PURE__ */ React104.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
+        icon: /* @__PURE__ */ React108.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
       }
     ),
-    /* @__PURE__ */ React104.createElement(Divider4, null),
-    /* @__PURE__ */ React104.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React104.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React104.createElement(React104.Fragment, null, /* @__PURE__ */ React104.createElement(Box20, { sx: { my: 0.5 } }, /* @__PURE__ */ React104.createElement(Divider4, null)), /* @__PURE__ */ React104.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React108.createElement(Divider5, null),
+    /* @__PURE__ */ React108.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React108.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React108.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React108.createElement(React108.Fragment, null, /* @__PURE__ */ React108.createElement(Box23, { sx: { my: 0.5 } }, /* @__PURE__ */ React108.createElement(Divider5, null)), /* @__PURE__ */ React108.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -7138,27 +7691,27 @@ var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef25(null);
-    const popupState = usePopupState8({ variant: "popover" });
-    return /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(
+    const headerRef = useRef26(null);
+    const popupState = usePopupState9({ variant: "popover" });
+    return /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, /* @__PURE__ */ React109.createElement(
       TransformSettingsControl,
       {
         popupState,
         anchorRef: headerRef,
         showChildrenPerspective
       }
-    ), /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React105.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
+    ), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "transform-functions" }, /* @__PURE__ */ React109.createElement(Repeater2, { headerRef, propType: context.propType, popupState })));
   }
 );
-var ToolTip = /* @__PURE__ */ React105.createElement(
-  Box21,
+var ToolTip = /* @__PURE__ */ React109.createElement(
+  Box24,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
-  /* @__PURE__ */ React105.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React105.createElement(Typography7, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __51("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React109.createElement(InfoCircleFilledIcon2, { sx: { color: "secondary.main" } }),
+  /* @__PURE__ */ React109.createElement(Typography9, { variant: "body2", color: "text.secondary", fontSize: "14px" }, __54("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -7172,21 +7725,21 @@ var Repeater2 = ({
     return availableValues.find((value) => !transformValues?.some((item) => item.$$type === value.$$type));
   };
   const shouldDisableAddItem = !getInitialValue2();
-  return /* @__PURE__ */ React105.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React109.createElement(PropProvider, { ...transformFunctionsContext }, /* @__PURE__ */ React109.createElement(
     ControlRepeater,
     {
       initial: getInitialValue2() ?? initialTransformValue,
       propTypeUtil: transformFunctionsPropTypeUtil
     },
-    /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React109.createElement(
       RepeaterHeader,
       {
-        label: __51("Transform", "elementor"),
-        adornment: () => /* @__PURE__ */ React105.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
+        label: __54("Transform", "elementor"),
+        adornment: () => /* @__PURE__ */ React109.createElement(ControlAdornments, { customContext: { path: ["transform"], propType } }),
         ref: headerRef
       },
-      /* @__PURE__ */ React105.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
-      /* @__PURE__ */ React105.createElement(
+      /* @__PURE__ */ React109.createElement(TransformBasePopoverTrigger, { popupState, repeaterBindKey: bind }),
+      /* @__PURE__ */ React109.createElement(
         TooltipAddItemAction,
         {
           disabled: shouldDisableAddItem,
@@ -7196,15 +7749,15 @@ var Repeater2 = ({
         }
       )
     ),
-    /* @__PURE__ */ React105.createElement(ItemsContainer, null, /* @__PURE__ */ React105.createElement(
+    /* @__PURE__ */ React109.createElement(ItemsContainer, null, /* @__PURE__ */ React109.createElement(
       Item,
       {
         Icon: TransformIcon,
         Label: TransformLabel,
-        actions: /* @__PURE__ */ React105.createElement(React105.Fragment, null, /* @__PURE__ */ React105.createElement(DisableItemAction, null), /* @__PURE__ */ React105.createElement(RemoveItemAction, null))
+        actions: /* @__PURE__ */ React109.createElement(React109.Fragment, null, /* @__PURE__ */ React109.createElement(DisableItemAction, null), /* @__PURE__ */ React109.createElement(RemoveItemAction, null))
       }
     )),
-    /* @__PURE__ */ React105.createElement(EditItemPopover, null, /* @__PURE__ */ React105.createElement(TransformContent, null))
+    /* @__PURE__ */ React109.createElement(EditItemPopover, null, /* @__PURE__ */ React109.createElement(TransformContent, null))
   ));
 };
 var TransformBasePopoverTrigger = ({
@@ -7212,33 +7765,33 @@ var TransformBasePopoverTrigger = ({
   repeaterBindKey
 }) => {
   const { bind } = useBoundProp();
-  const titleLabel = __51("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React105.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React105.createElement(IconButton8, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React105.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
+  const titleLabel = __54("Transform settings", "elementor");
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React109.createElement(Tooltip8, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React109.createElement(IconButton8, { size: SIZE11, "aria-label": titleLabel, ...bindTrigger5(popupState) }, /* @__PURE__ */ React109.createElement(AdjustmentsIcon2, { fontSize: SIZE11 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
-import * as React108 from "react";
-import { useEffect as useEffect17, useMemo as useMemo16, useState as useState18 } from "react";
+import * as React112 from "react";
+import { useEffect as useEffect17, useMemo as useMemo17, useState as useState19 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box23, Typography as Typography8 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box26, Typography as Typography10 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
-import { __ as __54 } from "@wordpress/i18n";
+import { __ as __57 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
-import * as React106 from "react";
-import { useMemo as useMemo14, useRef as useRef26 } from "react";
+import * as React110 from "react";
+import { useMemo as useMemo15, useRef as useRef27 } from "react";
 import { selectionSizePropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid29 } from "@elementor/ui";
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(selectionSizePropTypeUtil);
-    const rowRef = useRef26(null);
+    const rowRef = useRef27(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo14(() => {
+    const currentSizeConfig = useMemo15(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -7249,7 +7802,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React106.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React106.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React106.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React106.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React106.createElement(React106.Fragment, null, /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React106.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React106.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React106.createElement(
+    return /* @__PURE__ */ React110.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React110.createElement(Grid29, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React110.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React110.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React110.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React110.createElement(React110.Fragment, null, /* @__PURE__ */ React110.createElement(Grid29, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React110.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React110.createElement(Grid29, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React110.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -7264,12 +7817,12 @@ var SelectionSizeControl = createControl(
 
 // src/controls/transition-control/data.ts
 import { hasProInstalled, isVersionGreaterOrEqual } from "@elementor/utils";
-import { __ as __52 } from "@wordpress/i18n";
+import { __ as __55 } from "@wordpress/i18n";
 var initialTransitionValue = {
   selection: {
     $$type: "key-value",
     value: {
-      key: { value: __52("All properties", "elementor"), $$type: "string" },
+      key: { value: __55("All properties", "elementor"), $$type: "string" },
       value: { value: "all", $$type: "string" }
     }
   },
@@ -7293,128 +7846,128 @@ var createTransitionPropertiesList = () => {
   const isSiteRtl = getIsSiteRtl();
   const baseProperties = [
     {
-      label: __52("Default", "elementor"),
+      label: __55("Default", "elementor"),
       type: "category",
-      properties: [{ label: __52("All properties", "elementor"), value: "all" }]
+      properties: [{ label: __55("All properties", "elementor"), value: "all" }]
     },
     {
-      label: __52("Margin", "elementor"),
+      label: __55("Margin", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Margin (all)", "elementor"), value: "margin", isDisabled: true },
-        { label: __52("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
+        { label: __55("Margin (all)", "elementor"), value: "margin", isDisabled: true },
+        { label: __55("Margin bottom", "elementor"), value: "margin-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? __52("Margin right", "elementor") : __52("Margin left", "elementor"),
+          label: isSiteRtl ? __55("Margin right", "elementor") : __55("Margin left", "elementor"),
           value: "margin-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __52("Margin left", "elementor") : __52("Margin right", "elementor"),
+          label: isSiteRtl ? __55("Margin left", "elementor") : __55("Margin right", "elementor"),
           value: "margin-inline-end",
           isDisabled: true
         },
-        { label: __52("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
+        { label: __55("Margin top", "elementor"), value: "margin-block-start", isDisabled: true }
       ]
     },
     {
-      label: __52("Padding", "elementor"),
+      label: __55("Padding", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Padding (all)", "elementor"), value: "padding", isDisabled: true },
-        { label: __52("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
+        { label: __55("Padding (all)", "elementor"), value: "padding", isDisabled: true },
+        { label: __55("Padding bottom", "elementor"), value: "padding-block-end", isDisabled: true },
         {
-          label: isSiteRtl ? __52("Padding right", "elementor") : __52("Padding left", "elementor"),
+          label: isSiteRtl ? __55("Padding right", "elementor") : __55("Padding left", "elementor"),
           value: "padding-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __52("Padding left", "elementor") : __52("Padding right", "elementor"),
+          label: isSiteRtl ? __55("Padding left", "elementor") : __55("Padding right", "elementor"),
           value: "padding-inline-end",
           isDisabled: true
         },
-        { label: __52("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
+        { label: __55("Padding top", "elementor"), value: "padding-block-start", isDisabled: true }
       ]
     },
     {
-      label: __52("Flex", "elementor"),
+      label: __55("Flex", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Flex (all)", "elementor"), value: "flex", isDisabled: true },
-        { label: __52("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
-        { label: __52("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
-        { label: __52("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
+        { label: __55("Flex (all)", "elementor"), value: "flex", isDisabled: true },
+        { label: __55("Flex grow", "elementor"), value: "flex-grow", isDisabled: true },
+        { label: __55("Flex shrink", "elementor"), value: "flex-shrink", isDisabled: true },
+        { label: __55("Flex basis", "elementor"), value: "flex-basis", isDisabled: true }
       ]
     },
     {
-      label: __52("Size", "elementor"),
+      label: __55("Size", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Width", "elementor"), value: "width", isDisabled: true },
-        { label: __52("Height", "elementor"), value: "height", isDisabled: true },
-        { label: __52("Max height", "elementor"), value: "max-height", isDisabled: true },
-        { label: __52("Max width", "elementor"), value: "max-width", isDisabled: true },
-        { label: __52("Min height", "elementor"), value: "min-height", isDisabled: true },
-        { label: __52("Min width", "elementor"), value: "min-width", isDisabled: true }
+        { label: __55("Width", "elementor"), value: "width", isDisabled: true },
+        { label: __55("Height", "elementor"), value: "height", isDisabled: true },
+        { label: __55("Max height", "elementor"), value: "max-height", isDisabled: true },
+        { label: __55("Max width", "elementor"), value: "max-width", isDisabled: true },
+        { label: __55("Min height", "elementor"), value: "min-height", isDisabled: true },
+        { label: __55("Min width", "elementor"), value: "min-width", isDisabled: true }
       ]
     },
     {
-      label: __52("Position", "elementor"),
+      label: __55("Position", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Top", "elementor"), value: "inset-block-start", isDisabled: true },
+        { label: __55("Top", "elementor"), value: "inset-block-start", isDisabled: true },
         {
-          label: isSiteRtl ? __52("Right", "elementor") : __52("Left", "elementor"),
+          label: isSiteRtl ? __55("Right", "elementor") : __55("Left", "elementor"),
           value: "inset-inline-start",
           isDisabled: true
         },
         {
-          label: isSiteRtl ? __52("Left", "elementor") : __52("Right", "elementor"),
+          label: isSiteRtl ? __55("Left", "elementor") : __55("Right", "elementor"),
           value: "inset-inline-end",
           isDisabled: true
         },
-        { label: __52("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
-        { label: __52("Z-index", "elementor"), value: "z-index", isDisabled: true }
+        { label: __55("Bottom", "elementor"), value: "inset-block-end", isDisabled: true },
+        { label: __55("Z-index", "elementor"), value: "z-index", isDisabled: true }
       ]
     },
     {
-      label: __52("Typography", "elementor"),
+      label: __55("Typography", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Font color", "elementor"), value: "color", isDisabled: true },
-        { label: __52("Font size", "elementor"), value: "font-size", isDisabled: true },
-        { label: __52("Line height", "elementor"), value: "line-height", isDisabled: true },
-        { label: __52("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
-        { label: __52("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
-        { label: __52("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
-        { label: __52("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
+        { label: __55("Font color", "elementor"), value: "color", isDisabled: true },
+        { label: __55("Font size", "elementor"), value: "font-size", isDisabled: true },
+        { label: __55("Line height", "elementor"), value: "line-height", isDisabled: true },
+        { label: __55("Letter spacing", "elementor"), value: "letter-spacing", isDisabled: true },
+        { label: __55("Word spacing", "elementor"), value: "word-spacing", isDisabled: true },
+        { label: __55("Font variations", "elementor"), value: "font-variation-settings", isDisabled: true },
+        { label: __55("Text stroke color", "elementor"), value: "-webkit-text-stroke-color", isDisabled: true }
       ]
     },
     {
-      label: __52("Background", "elementor"),
+      label: __55("Background", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Background color", "elementor"), value: "background-color", isDisabled: true },
-        { label: __52("Background position", "elementor"), value: "background-position", isDisabled: true },
-        { label: __52("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
+        { label: __55("Background color", "elementor"), value: "background-color", isDisabled: true },
+        { label: __55("Background position", "elementor"), value: "background-position", isDisabled: true },
+        { label: __55("Box shadow", "elementor"), value: "box-shadow", isDisabled: true }
       ]
     },
     {
-      label: __52("Border", "elementor"),
+      label: __55("Border", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Border (all)", "elementor"), value: "border", isDisabled: true },
-        { label: __52("Border radius", "elementor"), value: "border-radius", isDisabled: true },
-        { label: __52("Border color", "elementor"), value: "border-color", isDisabled: true },
-        { label: __52("Border width", "elementor"), value: "border-width", isDisabled: true }
+        { label: __55("Border (all)", "elementor"), value: "border", isDisabled: true },
+        { label: __55("Border radius", "elementor"), value: "border-radius", isDisabled: true },
+        { label: __55("Border color", "elementor"), value: "border-color", isDisabled: true },
+        { label: __55("Border width", "elementor"), value: "border-width", isDisabled: true }
       ]
     },
     {
-      label: __52("Effects", "elementor"),
+      label: __55("Effects", "elementor"),
       type: "category",
       properties: [
-        { label: __52("Opacity", "elementor"), value: "opacity", isDisabled: true },
-        { label: __52("Transform (all)", "elementor"), value: "transform", isDisabled: true },
-        { label: __52("Filter (all)", "elementor"), value: "filter", isDisabled: true }
+        { label: __55("Opacity", "elementor"), value: "opacity", isDisabled: true },
+        { label: __55("Transform (all)", "elementor"), value: "transform", isDisabled: true },
+        { label: __55("Filter (all)", "elementor"), value: "filter", isDisabled: true }
       ]
     }
   ];
@@ -7450,13 +8003,13 @@ function subscribeToTransitionEvent() {
 }
 
 // src/controls/transition-control/transition-selector.tsx
-import * as React107 from "react";
-import { useMemo as useMemo15, useRef as useRef27 } from "react";
+import * as React111 from "react";
+import { useMemo as useMemo16, useRef as useRef28 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box22, Popover as Popover7, UnstableTag as UnstableTag3, usePopupState as usePopupState9 } from "@elementor/ui";
-import { __ as __53 } from "@wordpress/i18n";
+import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box25, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState10 } from "@elementor/ui";
+import { __ as __56 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
 import { getSelectedElements as getSelectedElements2 } from "@elementor/editor-elements";
@@ -7537,9 +8090,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef27(null);
-  const popoverState = usePopupState9({ variant: "popover" });
-  const disabledCategories = useMemo15(() => {
+  const defaultRef = useRef28(null);
+  const popoverState = usePopupState10({ variant: "popover" });
+  const disabledCategories = useMemo16(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -7559,7 +8112,7 @@ var TransitionSelector = ({
     return [
       first,
       {
-        label: __53("Recently Used", "elementor"),
+        label: __56("Recently Used", "elementor"),
         items: recentItems
       },
       ...rest
@@ -7583,17 +8136,17 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React107.createElement(Box22, { ref: defaultRef }, /* @__PURE__ */ React107.createElement(ControlActions, null, /* @__PURE__ */ React107.createElement(
+  return /* @__PURE__ */ React111.createElement(Box25, { ref: defaultRef }, /* @__PURE__ */ React111.createElement(ControlActions, null, /* @__PURE__ */ React111.createElement(
     UnstableTag3,
     {
       variant: "outlined",
       label: transitionLabel,
-      endIcon: /* @__PURE__ */ React107.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
+      endIcon: /* @__PURE__ */ React111.createElement(ChevronDownIcon3, { fontSize: "tiny" }),
       ...bindTrigger6(popoverState),
       fullWidth: true
     }
-  )), /* @__PURE__ */ React107.createElement(
-    Popover7,
+  )), /* @__PURE__ */ React111.createElement(
+    Popover8,
     {
       disablePortal: true,
       disableScrollLock: true,
@@ -7603,7 +8156,7 @@ var TransitionSelector = ({
       anchorOrigin: { vertical: "top", horizontal: "right" },
       transformOrigin: { vertical: "top", horizontal: "left" }
     },
-    /* @__PURE__ */ React107.createElement(
+    /* @__PURE__ */ React111.createElement(
       ItemSelector,
       {
         itemsList: getItemList(),
@@ -7611,11 +8164,11 @@ var TransitionSelector = ({
         onItemChange: handleTransitionPropertyChange,
         onClose: popoverState.close,
         sectionWidth: 268,
-        title: __53("Transition Property", "elementor"),
+        title: __56("Transition Property", "elementor"),
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
-        categoryItemContentTemplate: (item) => /* @__PURE__ */ React107.createElement(
-          Box22,
+        categoryItemContentTemplate: (item) => /* @__PURE__ */ React111.createElement(
+          Box25,
           {
             sx: {
               display: "flex",
@@ -7624,13 +8177,13 @@ var TransitionSelector = ({
               width: "100%"
             }
           },
-          /* @__PURE__ */ React107.createElement("span", null, item.value),
-          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React107.createElement(PromotionChip, null)
+          /* @__PURE__ */ React111.createElement("span", null, item.value),
+          showPromotion && disabledCategories.has(item.value) && /* @__PURE__ */ React111.createElement(PromotionChip, null)
         ),
-        footer: showPromotion ? /* @__PURE__ */ React107.createElement(
+        footer: showPromotion ? /* @__PURE__ */ React111.createElement(
           PromotionAlert,
           {
-            message: __53(
+            message: __56(
               "Upgrade to customize transition properties and control effects.",
               "elementor"
             ),
@@ -7669,8 +8222,8 @@ var areAllPropertiesUsed = (value = []) => {
 };
 var getSelectionSizeProps = (recentlyUsedList, disabledItems, showPromotion) => {
   return {
-    selectionLabel: __54("Type", "elementor"),
-    sizeLabel: __54("Duration", "elementor"),
+    selectionLabel: __57("Type", "elementor"),
+    sizeLabel: __57("Duration", "elementor"),
     selectionConfig: {
       component: TransitionSelector,
       props: {
@@ -7746,7 +8299,7 @@ var getInitialValue = (values = []) => {
   }
   return initialTransitionValue;
 };
-var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
+var disableAddItemTooltipContent = /* @__PURE__ */ React112.createElement(
   Alert2,
   {
     sx: {
@@ -7754,10 +8307,10 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React108.createElement(
       gap: 0.5
     },
     color: "secondary",
-    icon: /* @__PURE__ */ React108.createElement(InfoCircleFilledIcon3, null)
+    icon: /* @__PURE__ */ React112.createElement(InfoCircleFilledIcon3, null)
   },
-  /* @__PURE__ */ React108.createElement(AlertTitle3, null, __54("Transitions", "elementor")),
-  /* @__PURE__ */ React108.createElement(Box23, { component: "span" }, /* @__PURE__ */ React108.createElement(Typography8, { variant: "body2" }, __54("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React112.createElement(AlertTitle3, null, __57("Transitions", "elementor")),
+  /* @__PURE__ */ React112.createElement(Box26, { component: "span" }, /* @__PURE__ */ React112.createElement(Typography10, { variant: "body2" }, __57("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -7765,14 +8318,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState18([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState19([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo16(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo16(() => {
+    const allowedTransitionSet = useMemo17(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -7798,15 +8351,15 @@ var TransitionRepeaterControl = createControl(
     useEffect17(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo16(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo17(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
-    return /* @__PURE__ */ React108.createElement(
+    return /* @__PURE__ */ React112.createElement(
       RepeatableControl,
       {
-        label: __54("Transitions", "elementor"),
-        repeaterLabel: __54("Transitions", "elementor"),
+        label: __57("Transitions", "elementor"),
+        repeaterLabel: __57("Transitions", "elementor"),
         patternLabel: "${value.selection.value.key.value}: ${value.size.value.size}${value.size.value.unit}",
-        placeholder: __54("Empty Transition", "elementor"),
+        placeholder: __57("Empty Transition", "elementor"),
         showDuplicate: false,
         showToggle: true,
         initialValues: getInitialValue(value),
@@ -7827,11 +8380,11 @@ var TransitionRepeaterControl = createControl(
 );
 
 // src/controls/date-time-control.tsx
-import * as React109 from "react";
+import * as React113 from "react";
 import * as dayjs from "dayjs";
 import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
-import { Box as Box24, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
+import { Box as Box27, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -7875,7 +8428,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React109.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React109.createElement(ControlActions, null, /* @__PURE__ */ React109.createElement(LocalizationProvider, null, /* @__PURE__ */ React109.createElement(Box24, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React109.createElement(
+  return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(ControlActions, null, /* @__PURE__ */ React113.createElement(LocalizationProvider, null, /* @__PURE__ */ React113.createElement(Box27, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React113.createElement(
     DatePicker,
     {
       value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
@@ -7887,7 +8440,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
         openPickerIcon: { fontSize: "tiny" }
       }
     }
-  )), /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React109.createElement(
+  )), /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React113.createElement(
     TimePicker,
     {
       value: parseTimeValue(stringPropTypeUtil20.extract(value?.time)),
@@ -7903,13 +8456,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 });
 
 // src/controls/date-range-control.tsx
-import * as React111 from "react";
+import * as React115 from "react";
 import { dateRangePropTypeUtil, dateStringPropTypeUtil as dateStringPropTypeUtil2 } from "@elementor/editor-props";
-import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack17 } from "@elementor/ui";
-import { __ as __55 } from "@wordpress/i18n";
+import { FormHelperText as FormHelperText2, Grid as Grid30, Stack as Stack19 } from "@elementor/ui";
+import { __ as __58 } from "@wordpress/i18n";
 
 // src/controls/date-string-control.tsx
-import * as React110 from "react";
+import * as React114 from "react";
 import { dateStringPropTypeUtil } from "@elementor/editor-props";
 import { DatePicker as DatePicker2, LocalizationProvider as LocalizationProvider2 } from "@elementor/ui";
 
@@ -7968,7 +8521,7 @@ var DateStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React110.createElement(LocalizationProvider2, null, /* @__PURE__ */ React110.createElement(ControlActions, null, /* @__PURE__ */ React110.createElement(
+    return /* @__PURE__ */ React114.createElement(LocalizationProvider2, null, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
       DatePicker2,
       {
         value: parseDateString(value ?? ""),
@@ -7982,8 +8535,8 @@ var DateStringControl = createControl(
 
 // src/controls/date-range-control.tsx
 var RANGE_LABELS = {
-  min: __55("Min date", "elementor"),
-  max: __55("Max date", "elementor")
+  min: __58("Min date", "elementor"),
+  max: __58("Max date", "elementor")
 };
 var isMaxBeforeMin = (minIso, maxIso) => {
   if (!minIso || !maxIso) {
@@ -7991,38 +8544,38 @@ var isMaxBeforeMin = (minIso, maxIso) => {
   }
   return maxIso < minIso;
 };
-var RANGE_ERROR_MESSAGE = __55("Max date must be on or after Min date", "elementor");
+var RANGE_ERROR_MESSAGE = __58("Max date must be on or after Min date", "elementor");
 var DateRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(dateRangePropTypeUtil);
   const minString = dateStringPropTypeUtil2.extract(value?.min);
   const maxString = dateStringPropTypeUtil2.extract(value?.max);
   const hasInvalidRange = isMaxBeforeMin(minString, maxString);
-  return /* @__PURE__ */ React111.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React111.createElement(Stack17, { gap: 0.75 }, /* @__PURE__ */ React111.createElement(Stack17, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React111.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
+  return /* @__PURE__ */ React115.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React115.createElement(Stack19, { gap: 0.75 }, /* @__PURE__ */ React115.createElement(Stack19, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React115.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React115.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React115.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React115.createElement(
     BoundDateStringControl,
     {
       bind: "min",
       ariaLabel: RANGE_LABELS.min,
       error: hasInvalidRange
     }
-  ))), /* @__PURE__ */ React111.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React111.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React111.createElement(
+  ))), /* @__PURE__ */ React115.createElement(Grid30, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React115.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React115.createElement(Grid30, { item: true, xs: 12 }, /* @__PURE__ */ React115.createElement(
     BoundDateStringControl,
     {
       bind: "max",
       ariaLabel: RANGE_LABELS.max,
       error: hasInvalidRange
     }
-  )))), hasInvalidRange && /* @__PURE__ */ React111.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
+  )))), hasInvalidRange && /* @__PURE__ */ React115.createElement(FormHelperText2, { error: true }, RANGE_ERROR_MESSAGE)));
 });
 var BoundDateStringControl = ({
   bind,
   ariaLabel,
   error
 }) => {
-  return /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React111.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React115.createElement(DateStringControl, { ariaLabel, error, coerceInvalidToNull: true }));
 };
 
 // src/controls/time-string-control.tsx
-import * as React112 from "react";
+import * as React116 from "react";
 import { timeStringPropTypeUtil } from "@elementor/editor-props";
 import { LocalizationProvider as LocalizationProvider3, TimePicker as TimePicker2 } from "@elementor/ui";
 var TimeStringControl = createControl(
@@ -8050,7 +8603,7 @@ var TimeStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React112.createElement(LocalizationProvider3, null, /* @__PURE__ */ React112.createElement(ControlActions, null, /* @__PURE__ */ React112.createElement(
+    return /* @__PURE__ */ React116.createElement(LocalizationProvider3, null, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(
       TimePicker2,
       {
         value: parseTimeString(value ?? ""),
@@ -8063,38 +8616,38 @@ var TimeStringControl = createControl(
 );
 
 // src/controls/time-range-control.tsx
-import * as React113 from "react";
+import * as React117 from "react";
 import { timeRangePropTypeUtil } from "@elementor/editor-props";
-import { Grid as Grid31, Stack as Stack18 } from "@elementor/ui";
-import { __ as __56 } from "@wordpress/i18n";
+import { Grid as Grid31, Stack as Stack20 } from "@elementor/ui";
+import { __ as __59 } from "@wordpress/i18n";
 var RANGE_LABELS2 = {
-  min: __56("Start time", "elementor"),
-  max: __56("End time", "elementor")
+  min: __59("Start time", "elementor"),
+  max: __59("End time", "elementor")
 };
 var TimeRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(timeRangePropTypeUtil);
-  return /* @__PURE__ */ React113.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React113.createElement(Stack18, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React113.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React113.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React113.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React113.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
+  return /* @__PURE__ */ React117.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React117.createElement(Stack20, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React117.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React117.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React117.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React117.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React117.createElement(Grid31, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React117.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React117.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React117.createElement(Grid31, { item: true, xs: 12 }, /* @__PURE__ */ React117.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
 });
 var BoundTimeStringControl = ({ bind, ariaLabel }) => {
-  return /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React113.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
+  return /* @__PURE__ */ React117.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React117.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
 };
 
 // src/controls/inline-editing-control.tsx
-import * as React117 from "react";
-import { useCallback as useCallback4, useState as useState20 } from "react";
+import * as React121 from "react";
+import { useCallback as useCallback4, useState as useState21 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
-import { Box as Box27 } from "@elementor/ui";
+import { Box as Box30 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
-import * as React114 from "react";
-import { useEffect as useEffect18, useRef as useRef28 } from "react";
-import { Box as Box25 } from "@elementor/ui";
+import * as React118 from "react";
+import { useEffect as useEffect18, useRef as useRef29 } from "react";
+import { Box as Box28 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
 import Heading from "@tiptap/extension-heading";
 import Italic from "@tiptap/extension-italic";
-import Link3 from "@tiptap/extension-link";
+import Link4 from "@tiptap/extension-link";
 import Paragraph from "@tiptap/extension-paragraph";
 import Strike from "@tiptap/extension-strike";
 import Subscript from "@tiptap/extension-subscript";
@@ -8133,7 +8686,7 @@ function extractInlineHtmlContent(propValue) {
 var ITALIC_KEYBOARD_SHORTCUT = "i";
 var BOLD_KEYBOARD_SHORTCUT = "b";
 var UNDERLINE_KEYBOARD_SHORTCUT = "u";
-var InlineEditor = React114.forwardRef((props, ref) => {
+var InlineEditor = React118.forwardRef((props, ref) => {
   const {
     value,
     setValue,
@@ -8150,8 +8703,8 @@ var InlineEditor = React114.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef28(null);
-  const onBlurRef = useRef28(onBlur);
+  const containerRef = useRef29(null);
+  const onBlurRef = useRef29(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -8196,7 +8749,7 @@ var InlineEditor = React114.forwardRef((props, ref) => {
       }).configure({
         levels: [1, 2, 3, 4, 5, 6]
       }),
-      Link3.configure({
+      Link4.configure({
         openOnClick: false
       }),
       Text,
@@ -8246,10 +8799,10 @@ var InlineEditor = React114.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React114.createElement(Box25, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React114.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React118.createElement(Box28, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React118.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef28(false);
+  const hasMounted = useRef29(false);
   useEffect18(() => {
     if (hasMounted.current) {
       callback();
@@ -8260,8 +8813,8 @@ var useOnUpdate = (callback, dependencies) => {
 };
 
 // src/components/inline-editor-toolbar.tsx
-import * as React116 from "react";
-import { useEffect as useEffect20, useMemo as useMemo17, useRef as useRef30, useState as useState19 } from "react";
+import * as React120 from "react";
+import { useEffect as useEffect20, useMemo as useMemo18, useRef as useRef31, useState as useState20 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -8274,23 +8827,23 @@ import {
   UnderlineIcon
 } from "@elementor/icons";
 import {
-  Box as Box26,
+  Box as Box29,
   IconButton as IconButton9,
   ToggleButton as ToggleButton3,
   ToggleButtonGroup as ToggleButtonGroup2,
   toggleButtonGroupClasses,
   Tooltip as Tooltip10,
-  usePopupState as usePopupState10
+  usePopupState as usePopupState11
 } from "@elementor/ui";
 import { useEditorState } from "@tiptap/react";
-import { __ as __58 } from "@wordpress/i18n";
+import { __ as __61 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
-import * as React115 from "react";
-import { useEffect as useEffect19, useRef as useRef29 } from "react";
+import * as React119 from "react";
+import { useEffect as useEffect19, useRef as useRef30 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
-import { bindPopover as bindPopover8, Popover as Popover8, Stack as Stack19, TextField as TextField11, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
-import { __ as __57 } from "@wordpress/i18n";
+import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack21, TextField as TextField11, ToggleButton as ToggleButton2, Tooltip as Tooltip9 } from "@elementor/ui";
+import { __ as __60 } from "@wordpress/i18n";
 var UrlPopover = ({
   popupState,
   restoreValue,
@@ -8300,7 +8853,7 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef29(null);
+  const inputRef = useRef30(null);
   useEffect19(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
@@ -8310,8 +8863,8 @@ var UrlPopover = ({
     restoreValue();
     popupState.close();
   };
-  return /* @__PURE__ */ React115.createElement(
-    Popover8,
+  return /* @__PURE__ */ React119.createElement(
+    Popover9,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
@@ -8321,30 +8874,30 @@ var UrlPopover = ({
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React115.createElement(Stack19, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React115.createElement(
+    /* @__PURE__ */ React119.createElement(Stack21, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React119.createElement(
       TextField11,
       {
         value,
         onChange,
         size: "tiny",
         fullWidth: true,
-        placeholder: __57("Type a URL", "elementor"),
+        placeholder: __60("Type a URL", "elementor"),
         inputProps: { ref: inputRef },
         color: "secondary",
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React115.createElement(Tooltip9, { title: __57("Open in a new tab", "elementor") }, /* @__PURE__ */ React115.createElement(
+    ), /* @__PURE__ */ React119.createElement(Tooltip9, { title: __60("Open in a new tab", "elementor") }, /* @__PURE__ */ React119.createElement(
       ToggleButton2,
       {
         size: "tiny",
         value: "newTab",
         selected: openInNewTab,
         onClick: onToggleNewTab,
-        "aria-label": __57("Open in a new tab", "elementor"),
+        "aria-label": __60("Open in a new tab", "elementor"),
         sx: { borderRadius: "8px" }
       },
-      /* @__PURE__ */ React115.createElement(ExternalLinkIcon, { fontSize: "tiny" })
+      /* @__PURE__ */ React119.createElement(ExternalLinkIcon, { fontSize: "tiny" })
     )))
   );
 };
@@ -8356,16 +8909,16 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = useState19("");
-  const [openInNewTab, setOpenInNewTab] = useState19(false);
-  const toolbarRef = useRef30(null);
-  const linkPopupState = usePopupState10({ variant: "popover" });
+  const [urlValue, setUrlValue] = useState20("");
+  const [openInNewTab, setOpenInNewTab] = useState20(false);
+  const toolbarRef = useRef31(null);
+  const linkPopupState = usePopupState11({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo17(() => {
+  const formatButtonsList = useMemo18(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -8407,8 +8960,8 @@ var InlineEditorToolbar = ({
       editor?.commands?.focus();
     }
   }, [editor, inControlPanel]);
-  return /* @__PURE__ */ React116.createElement(
-    Box26,
+  return /* @__PURE__ */ React120.createElement(
+    Box29,
     {
       ref: toolbarRef,
       sx: {
@@ -8441,8 +8994,8 @@ var InlineEditorToolbar = ({
         }
       }
     },
-    /* @__PURE__ */ React116.createElement(Tooltip10, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React116.createElement(IconButton9, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
-    /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React120.createElement(Tooltip10, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React120.createElement(IconButton9, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React120.createElement(
       ToggleButtonGroup2,
       {
         value: editorState,
@@ -8472,7 +9025,7 @@ var InlineEditorToolbar = ({
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React116.createElement(Tooltip10, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React116.createElement(
+      formatButtonsList.map((button) => /* @__PURE__ */ React120.createElement(Tooltip10, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React120.createElement(
         ToggleButton3,
         {
           value: button.action,
@@ -8490,7 +9043,7 @@ var InlineEditorToolbar = ({
         button.icon
       )))
     ),
-    /* @__PURE__ */ React116.createElement(
+    /* @__PURE__ */ React120.createElement(
       UrlPopover,
       {
         popupState: linkPopupState,
@@ -8513,64 +9066,64 @@ var checkIfElementIsClickable = (elementId) => {
 };
 var toolbarButtons = {
   clear: {
-    label: __58("Clear", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(MinusIcon2, { fontSize: "tiny" }),
+    label: __61("Clear", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(MinusIcon2, { fontSize: "tiny" }),
     action: "clear",
     method: (editor) => {
       editor.chain().focus().clearNodes().unsetAllMarks().run();
     }
   },
   bold: {
-    label: __58("Bold", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(BoldIcon, { fontSize: "tiny" }),
+    label: __61("Bold", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(BoldIcon, { fontSize: "tiny" }),
     action: "bold",
     method: (editor) => {
       editor.chain().focus().toggleBold().run();
     }
   },
   italic: {
-    label: __58("Italic", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(ItalicIcon, { fontSize: "tiny" }),
+    label: __61("Italic", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(ItalicIcon, { fontSize: "tiny" }),
     action: "italic",
     method: (editor) => {
       editor.chain().focus().toggleItalic().run();
     }
   },
   underline: {
-    label: __58("Underline", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(UnderlineIcon, { fontSize: "tiny" }),
+    label: __61("Underline", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(UnderlineIcon, { fontSize: "tiny" }),
     action: "underline",
     method: (editor) => {
       editor.chain().focus().toggleUnderline().run();
     }
   },
   strike: {
-    label: __58("Strikethrough", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(StrikethroughIcon, { fontSize: "tiny" }),
+    label: __61("Strikethrough", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(StrikethroughIcon, { fontSize: "tiny" }),
     action: "strike",
     method: (editor) => {
       editor.chain().focus().toggleStrike().run();
     }
   },
   superscript: {
-    label: __58("Superscript", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(SuperscriptIcon, { fontSize: "tiny" }),
+    label: __61("Superscript", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(SuperscriptIcon, { fontSize: "tiny" }),
     action: "superscript",
     method: (editor) => {
       editor.chain().focus().toggleSuperscript().run();
     }
   },
   subscript: {
-    label: __58("Subscript", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(SubscriptIcon, { fontSize: "tiny" }),
+    label: __61("Subscript", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(SubscriptIcon, { fontSize: "tiny" }),
     action: "subscript",
     method: (editor) => {
       editor.chain().focus().toggleSubscript().run();
     }
   },
   link: {
-    label: __58("Link", "elementor"),
-    icon: /* @__PURE__ */ React116.createElement(LinkIcon3, { fontSize: "tiny" }),
+    label: __61("Link", "elementor"),
+    icon: /* @__PURE__ */ React120.createElement(LinkIcon3, { fontSize: "tiny" }),
     action: "link",
     method: null
   }
@@ -8583,7 +9136,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
   const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
   const { value: rawValue } = usePropKeyContext();
   const content = value ?? extractInlineHtmlContent(rawValue);
-  const [editor, setEditor] = useState20(null);
+  const [editor, setEditor] = useState21(null);
   const handleChange = useCallback4(
     (newValue) => {
       const html = newValue ?? "";
@@ -8591,7 +9144,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
     },
     [setValue]
   );
-  return /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(Box27, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React117.createElement(
+  return /* @__PURE__ */ React121.createElement(ControlActions, null, /* @__PURE__ */ React121.createElement(Box30, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React121.createElement(
     InlineEditorToolbar,
     {
       editor,
@@ -8604,8 +9157,8 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       }),
       inControlPanel: true
     }
-  ), /* @__PURE__ */ React117.createElement(
-    Box27,
+  ), /* @__PURE__ */ React121.createElement(
+    Box30,
     {
       sx: (theme) => ({
         p: 0.8,
@@ -8649,7 +9202,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       ...attributes,
       ...props
     },
-    /* @__PURE__ */ React117.createElement(
+    /* @__PURE__ */ React121.createElement(
       InlineEditor,
       {
         value: content,
@@ -8666,17 +9219,17 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
 });
 
 // src/controls/email-form-action-control/index.tsx
-import * as React121 from "react";
+import * as React125 from "react";
 import { emailsPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
-import { Box as Box28, Divider as Divider5, Stack as Stack21 } from "@elementor/ui";
-import { __ as __60 } from "@wordpress/i18n";
+import { Box as Box31, Divider as Divider6, Stack as Stack23 } from "@elementor/ui";
+import { __ as __63 } from "@wordpress/i18n";
 
 // src/controls/email-form-action-control/fields.tsx
-import * as React120 from "react";
+import * as React124 from "react";
 import { InfoAlert as InfoAlert2 } from "@elementor/editor-ui";
-import { Grid as Grid34, Stack as Stack20 } from "@elementor/ui";
-import { __ as __59 } from "@wordpress/i18n";
+import { Grid as Grid34, Stack as Stack22 } from "@elementor/ui";
+import { __ as __62 } from "@wordpress/i18n";
 
 // src/hooks/use-form-field-suggestions.ts
 import { getContainer as getContainer3, getSelectedElements as getSelectedElements3, getWidgetsCache } from "@elementor/editor-elements";
@@ -8765,8 +9318,8 @@ function useFormFieldSuggestions(options) {
 }
 
 // src/controls/email-form-action-control/email-chips-field.tsx
-import * as React118 from "react";
-import { useMemo as useMemo18, useState as useState21 } from "react";
+import * as React122 from "react";
+import { useMemo as useMemo19, useState as useState22 } from "react";
 import { stringArrayPropTypeUtil as stringArrayPropTypeUtil3, stringPropTypeUtil as stringPropTypeUtil23 } from "@elementor/editor-props";
 import { Autocomplete as Autocomplete4, Grid as Grid32, TextField as TextField12 } from "@elementor/ui";
 
@@ -8804,10 +9357,10 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
-  const [inputValue, setInputValue] = useState21("");
+  const [inputValue, setInputValue] = useState22("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = useMemo18(
+  const suggestionOptions = useMemo19(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -8842,7 +9395,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       tryAddChip(inputValue);
     }
   };
-  return /* @__PURE__ */ React118.createElement(ControlActions, null, /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React122.createElement(ControlActions, null, /* @__PURE__ */ React122.createElement(
     Autocomplete4,
     {
       fullWidth: true,
@@ -8867,99 +9420,99 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React118.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
-      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React118.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
+      renderInput: (params) => /* @__PURE__ */ React122.createElement(TextField12, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React122.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React118.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React118.createElement(Grid32, { item: true }, /* @__PURE__ */ React118.createElement(EmailChipsControl, { placeholder, suggestions })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React122.createElement(Grid32, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React122.createElement(Grid32, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React122.createElement(Grid32, { item: true }, /* @__PURE__ */ React122.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
-import * as React119 from "react";
+import * as React123 from "react";
 import { Grid as Grid33 } from "@elementor/ui";
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React119.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React119.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React119.createElement(Grid33, { item: true }, /* @__PURE__ */ React119.createElement(TextControl, { placeholder }))));
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React123.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React123.createElement(Grid33, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React123.createElement(Grid33, { item: true }, /* @__PURE__ */ React123.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React123.createElement(Grid33, { item: true }, /* @__PURE__ */ React123.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
 var SendToField = ({ placeholder }) => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(
+  return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React124.createElement(Stack22, { gap: 0.5 }, /* @__PURE__ */ React124.createElement(
     EmailChipsField,
     {
-      fieldLabel: __59("Send to", "elementor"),
+      fieldLabel: __62("Send to", "elementor"),
       placeholder,
       suggestions
     }
-  ), shouldShowMentionsInfo() && /* @__PURE__ */ React120.createElement(InfoAlert2, null, __59("Type @ or an email field name to insert its submitted value.", "elementor"))));
+  ), shouldShowMentionsInfo() && /* @__PURE__ */ React124.createElement(InfoAlert2, null, __62("Type @ or an email field name to insert its submitted value.", "elementor"))));
 };
-var SubjectField = () => /* @__PURE__ */ React120.createElement(
+var SubjectField = () => /* @__PURE__ */ React124.createElement(
   EmailField,
   {
     bind: "subject",
-    label: __59("Email subject", "elementor"),
-    placeholder: __59("New form submission", "elementor")
+    label: __62("Email subject", "elementor"),
+    placeholder: __62("New form submission", "elementor")
   }
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Message", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __59(
+  return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React124.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, __62("Message", "elementor"))), /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(InfoAlert2, null, shouldShowMentionsInfo() ? __62(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
-  ) : __59("[all-fields] shortcode sends all fields.", "elementor")))));
+  ) : __62("[all-fields] shortcode sends all fields.", "elementor")))));
 };
-var FromEmailField = () => /* @__PURE__ */ React120.createElement(
+var FromEmailField = () => /* @__PURE__ */ React124.createElement(
   EmailField,
   {
     bind: "from",
-    label: __59("From email", "elementor"),
-    placeholder: __59("What email should appear as the sender?", "elementor")
+    label: __62("From email", "elementor"),
+    placeholder: __62("What email should appear as the sender?", "elementor")
   }
 );
-var FromNameField = () => /* @__PURE__ */ React120.createElement(
+var FromNameField = () => /* @__PURE__ */ React124.createElement(
   EmailField,
   {
     bind: "from-name",
-    label: __59("From name", "elementor"),
-    placeholder: __59("What name should appear as the sender?", "elementor")
+    label: __62("From name", "elementor"),
+    placeholder: __62("What name should appear as the sender?", "elementor")
   }
 );
 var ReplyToField = () => {
   const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Reply-to", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
+  return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React124.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, __62("Reply-to", "elementor"))), /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
       rows: 1,
       triggerPosition: "start",
-      placeholder: __59("You can type @ to insert an email field", "elementor")
+      placeholder: __62("You can type @ to insert an email field", "elementor")
     }
   ))));
 };
 var CcField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Cc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "cc" }, /* @__PURE__ */ React124.createElement(EmailChipsField, { fieldLabel: __62("Cc", "elementor"), suggestions }));
 };
 var BccField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React120.createElement(EmailChipsField, { fieldLabel: __59("Bcc", "elementor"), suggestions }));
+  return /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React124.createElement(EmailChipsField, { fieldLabel: __62("Bcc", "elementor"), suggestions }));
 };
-var MetaDataField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React120.createElement(Stack20, { gap: 0.5 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Metadata", "elementor")), /* @__PURE__ */ React120.createElement(
+var MetaDataField = () => /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React124.createElement(Stack22, { gap: 0.5 }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, __62("Metadata", "elementor")), /* @__PURE__ */ React124.createElement(
   ChipsControl,
   {
     options: [
-      { label: __59("Date", "elementor"), value: "date" },
-      { label: __59("Time", "elementor"), value: "time" },
-      { label: __59("Page URL", "elementor"), value: "page-url" },
-      { label: __59("User agent", "elementor"), value: "user-agent" },
-      { label: __59("Credit", "elementor"), value: "credit" }
+      { label: __62("Date", "elementor"), value: "date" },
+      { label: __62("Time", "elementor"), value: "time" },
+      { label: __62("Page URL", "elementor"), value: "page-url" },
+      { label: __62("User agent", "elementor"), value: "user-agent" },
+      { label: __62("Credit", "elementor"), value: "credit" }
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React120.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, __59("Send as", "elementor"))), /* @__PURE__ */ React120.createElement(Grid34, { item: true }, /* @__PURE__ */ React120.createElement(
+var SendAsField = () => /* @__PURE__ */ React124.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React124.createElement(Grid34, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(ControlFormLabel, null, __62("Send as", "elementor"))), /* @__PURE__ */ React124.createElement(Grid34, { item: true }, /* @__PURE__ */ React124.createElement(
   SelectControl,
   {
     options: [
-      { label: __59("HTML", "elementor"), value: "html" },
-      { label: __59("Plain Text", "elementor"), value: "plain" }
+      { label: __62("HTML", "elementor"), value: "html" },
+      { label: __62("Plain Text", "elementor"), value: "plain" }
     ]
   }
 ))));
@@ -8968,25 +9521,25 @@ var SendAsField = () => /* @__PURE__ */ React120.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(emailsPropTypeUtil);
-    return /* @__PURE__ */ React121.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(ControlLabel, null, label ? label + " " + __60("settings", "elementor") : __60("Email settings", "elementor")), /* @__PURE__ */ React121.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React121.createElement(SubjectField, null), /* @__PURE__ */ React121.createElement(MessageField, null), /* @__PURE__ */ React121.createElement(FromEmailField, null), /* @__PURE__ */ React121.createElement(AdvancedSettings, null)));
+    return /* @__PURE__ */ React125.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React125.createElement(Stack23, { gap: 2 }, /* @__PURE__ */ React125.createElement(ControlLabel, null, label ? label + " " + __63("settings", "elementor") : __63("Email settings", "elementor")), /* @__PURE__ */ React125.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React125.createElement(SubjectField, null), /* @__PURE__ */ React125.createElement(MessageField, null), /* @__PURE__ */ React125.createElement(FromEmailField, null), /* @__PURE__ */ React125.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React121.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React121.createElement(Box28, { sx: { pt: 2 } }, /* @__PURE__ */ React121.createElement(Stack21, { gap: 2 }, /* @__PURE__ */ React121.createElement(FromNameField, null), /* @__PURE__ */ React121.createElement(ReplyToField, null), /* @__PURE__ */ React121.createElement(CcField, null), /* @__PURE__ */ React121.createElement(BccField, null), /* @__PURE__ */ React121.createElement(Divider5, null), /* @__PURE__ */ React121.createElement(MetaDataField, null), /* @__PURE__ */ React121.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React125.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React125.createElement(Box31, { sx: { pt: 2 } }, /* @__PURE__ */ React125.createElement(Stack23, { gap: 2 }, /* @__PURE__ */ React125.createElement(FromNameField, null), /* @__PURE__ */ React125.createElement(ReplyToField, null), /* @__PURE__ */ React125.createElement(CcField, null), /* @__PURE__ */ React125.createElement(BccField, null), /* @__PURE__ */ React125.createElement(Divider6, null), /* @__PURE__ */ React125.createElement(MetaDataField, null), /* @__PURE__ */ React125.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
-import * as React122 from "react";
+import * as React126 from "react";
 import { InfoAlert as InfoAlert3 } from "@elementor/editor-ui";
 import { Grid as Grid35 } from "@elementor/ui";
-import { __ as __61 } from "@wordpress/i18n";
+import { __ as __64 } from "@wordpress/i18n";
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React122.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(SelectControl, { options })), /* @__PURE__ */ React122.createElement(Grid35, { item: true }, /* @__PURE__ */ React122.createElement(InfoAlert3, null, __61(
+  return /* @__PURE__ */ React126.createElement(Grid35, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React126.createElement(Grid35, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(Grid35, { item: true }, /* @__PURE__ */ React126.createElement(SelectControl, { options })), /* @__PURE__ */ React126.createElement(Grid35, { item: true }, /* @__PURE__ */ React126.createElement(InfoAlert3, null, __64(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
 });
 
 // src/controls/grid-span-control.tsx
-import * as React123 from "react";
+import * as React127 from "react";
 import { spanPropTypeUtil } from "@elementor/editor-props";
 import { TextField as TextField13 } from "@elementor/ui";
 var GridSpanControl = createControl(
@@ -9005,7 +9558,7 @@ var GridSpanControl = createControl(
       setValue(next === "" ? null : next);
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
-    return /* @__PURE__ */ React123.createElement(ControlActions, null, /* @__PURE__ */ React123.createElement(
+    return /* @__PURE__ */ React127.createElement(ControlActions, null, /* @__PURE__ */ React127.createElement(
       TextField13,
       {
         size: "tiny",
@@ -9026,23 +9579,23 @@ var GridSpanControl = createControl(
 );
 
 // src/components/promotions/display-conditions-control.tsx
-import * as React125 from "react";
-import { useRef as useRef31 } from "react";
+import * as React129 from "react";
+import { useRef as useRef32 } from "react";
 import { SitemapIcon } from "@elementor/icons";
-import { IconButton as IconButton10, Stack as Stack22, Tooltip as Tooltip11 } from "@elementor/ui";
-import { __ as __62 } from "@wordpress/i18n";
+import { IconButton as IconButton10, Stack as Stack24, Tooltip as Tooltip11 } from "@elementor/ui";
+import { __ as __65 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
-import * as React124 from "react";
-import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState22 } from "react";
+import * as React128 from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState23 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
-import { Box as Box29 } from "@elementor/ui";
+import { Box as Box32 } from "@elementor/ui";
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
 var PromotionTrigger = forwardRef12(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState22(false);
+    const [isOpen, setIsOpen] = useState23(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -9053,7 +9606,7 @@ var PromotionTrigger = forwardRef12(
       });
     }, [trackingData]);
     useImperativeHandle(ref, () => ({ toggle }), [toggle]);
-    return /* @__PURE__ */ React124.createElement(React124.Fragment, null, promotion && /* @__PURE__ */ React124.createElement(
+    return /* @__PURE__ */ React128.createElement(React128.Fragment, null, promotion && /* @__PURE__ */ React128.createElement(
       PromotionInfotip,
       {
         title: promotion.title,
@@ -9067,8 +9620,8 @@ var PromotionTrigger = forwardRef12(
         },
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
-      /* @__PURE__ */ React124.createElement(
-        Box29,
+      /* @__PURE__ */ React128.createElement(
+        Box32,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -9076,19 +9629,19 @@ var PromotionTrigger = forwardRef12(
           },
           sx: { cursor: "pointer", display: "inline-flex" }
         },
-        children ?? /* @__PURE__ */ React124.createElement(PromotionChip2, null)
+        children ?? /* @__PURE__ */ React128.createElement(PromotionChip2, null)
       )
     ));
   }
 );
 
 // src/components/promotions/display-conditions-control.tsx
-var ARIA_LABEL = __62("Display Conditions", "elementor");
+var ARIA_LABEL = __65("Display Conditions", "elementor");
 var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef31(null);
-  return /* @__PURE__ */ React125.createElement(
-    Stack22,
+  const triggerRef = useRef32(null);
+  return /* @__PURE__ */ React129.createElement(
+    Stack24,
     {
       direction: "row",
       spacing: 2,
@@ -9097,8 +9650,8 @@ var DisplayConditionsControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React125.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React125.createElement(Tooltip11, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React125.createElement(
+    /* @__PURE__ */ React129.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
+    /* @__PURE__ */ React129.createElement(Tooltip11, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React129.createElement(
       IconButton10,
       {
         size: "tiny",
@@ -9111,23 +9664,23 @@ var DisplayConditionsControl = createControl(() => {
           borderRadius: 1
         }
       },
-      /* @__PURE__ */ React125.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
+      /* @__PURE__ */ React129.createElement(SitemapIcon, { fontSize: "tiny", color: "disabled" })
     ))
   );
 });
 
 // src/components/promotions/attributes-control.tsx
-import * as React126 from "react";
-import { useRef as useRef32 } from "react";
+import * as React130 from "react";
+import { useRef as useRef33 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
-import { Stack as Stack23, Tooltip as Tooltip12 } from "@elementor/ui";
-import { __ as __63 } from "@wordpress/i18n";
-var ARIA_LABEL2 = __63("Attributes", "elementor");
+import { Stack as Stack25, Tooltip as Tooltip12 } from "@elementor/ui";
+import { __ as __66 } from "@wordpress/i18n";
+var ARIA_LABEL2 = __66("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef32(null);
-  return /* @__PURE__ */ React126.createElement(
-    Stack23,
+  const triggerRef = useRef33(null);
+  return /* @__PURE__ */ React130.createElement(
+    Stack25,
     {
       direction: "row",
       spacing: 2,
@@ -9136,8 +9689,8 @@ var AttributesControl = createControl(() => {
         alignItems: "center"
       }
     },
-    /* @__PURE__ */ React126.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React126.createElement(Tooltip12, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React126.createElement(
+    /* @__PURE__ */ React130.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
+    /* @__PURE__ */ React130.createElement(Tooltip12, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React130.createElement(
       PlusIcon4,
       {
         "aria-label": ARIA_LABEL2,
@@ -9151,29 +9704,29 @@ var AttributesControl = createControl(() => {
 });
 
 // src/components/icon-buttons/clear-icon-button.tsx
-import * as React127 from "react";
+import * as React131 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { IconButton as IconButton11, styled as styled11, Tooltip as Tooltip13 } from "@elementor/ui";
-var CustomIconButton = styled11(IconButton11)(({ theme }) => ({
+import { IconButton as IconButton11, styled as styled13, Tooltip as Tooltip13 } from "@elementor/ui";
+var CustomIconButton = styled13(IconButton11)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React127.createElement(Tooltip13, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React127.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React127.createElement(BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React131.createElement(Tooltip13, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React131.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React131.createElement(BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
-import * as React128 from "react";
-import { useEffect as useEffect21, useState as useState23 } from "react";
+import * as React132 from "react";
+import { useEffect as useEffect21, useState as useState24 } from "react";
 import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2, PlusIcon as PlusIcon5, XIcon as XIcon4 } from "@elementor/icons";
 import {
   bindPopover as bindPopover9,
   bindTrigger as bindTrigger7,
-  Box as Box30,
+  Box as Box33,
   IconButton as IconButton12,
   Infotip as Infotip4,
   Tooltip as Tooltip14,
-  usePopupState as usePopupState11
+  usePopupState as usePopupState12
 } from "@elementor/ui";
-import { __ as __64 } from "@wordpress/i18n";
+import { __ as __67 } from "@wordpress/i18n";
 var SIZE12 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
 var Repeater3 = ({
@@ -9192,7 +9745,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState23(initialOpenItem);
+  const [openItem, setOpenItem] = useState24(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -9255,7 +9808,7 @@ var Repeater3 = ({
   };
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
-  const addButton = /* @__PURE__ */ React128.createElement(
+  const addButton = /* @__PURE__ */ React132.createElement(
     IconButton12,
     {
       size: SIZE12,
@@ -9264,11 +9817,11 @@ var Repeater3 = ({
       },
       disabled: isButtonDisabled,
       onClick: addRepeaterItem,
-      "aria-label": __64("Add item", "elementor")
+      "aria-label": __67("Add item", "elementor")
     },
-    /* @__PURE__ */ React128.createElement(PlusIcon5, { fontSize: SIZE12 })
+    /* @__PURE__ */ React132.createElement(PlusIcon5, { fontSize: SIZE12 })
   );
-  return /* @__PURE__ */ React128.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React128.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React128.createElement(
+  return /* @__PURE__ */ React132.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React132.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React132.createElement(
     Infotip4,
     {
       placement: "right",
@@ -9276,20 +9829,20 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React128.createElement(Box30, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
-  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React128.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
+    /* @__PURE__ */ React132.createElement(Box33, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+  ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React132.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
     if (!value) {
       return null;
     }
-    return /* @__PURE__ */ React128.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React128.createElement(
+    return /* @__PURE__ */ React132.createElement(SortableItem, { id: key, key: `sortable-${key}`, disabled: !isSortable }, /* @__PURE__ */ React132.createElement(
       RepeaterItem,
       {
         disabled,
         propDisabled: value?.disabled,
-        label: /* @__PURE__ */ React128.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Label, { value, index })),
-        startIcon: /* @__PURE__ */ React128.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React128.createElement(itemSettings.Icon, { value })),
+        label: /* @__PURE__ */ React132.createElement(RepeaterItemLabelSlot, { value }, /* @__PURE__ */ React132.createElement(itemSettings.Label, { value, index })),
+        startIcon: /* @__PURE__ */ React132.createElement(RepeaterItemIconSlot, { value }, /* @__PURE__ */ React132.createElement(itemSettings.Icon, { value })),
         removeItem: () => removeRepeaterItem(index),
         duplicateItem: () => duplicateRepeaterItem(index),
         toggleDisableItem: () => toggleDisableRepeaterItem(index),
@@ -9303,7 +9856,7 @@ var Repeater3 = ({
         actions: itemSettings.actions,
         value
       },
-      (props) => /* @__PURE__ */ React128.createElement(
+      (props) => /* @__PURE__ */ React132.createElement(
         itemSettings.Content,
         {
           ...props,
@@ -9345,16 +9898,16 @@ var RepeaterItem = ({
   );
   const triggerProps = bindTrigger7(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
-  const duplicateLabel = __64("Duplicate", "elementor");
-  const toggleLabel = propDisabled ? __64("Show", "elementor") : __64("Hide", "elementor");
-  const removeLabel = __64("Remove", "elementor");
-  return /* @__PURE__ */ React128.createElement(Box30, { sx: { display: "contents" } }, /* @__PURE__ */ React128.createElement(
+  const duplicateLabel = __67("Duplicate", "elementor");
+  const toggleLabel = propDisabled ? __67("Show", "elementor") : __67("Hide", "elementor");
+  const removeLabel = __67("Remove", "elementor");
+  return /* @__PURE__ */ React132.createElement(Box33, { sx: { display: "contents" } }, /* @__PURE__ */ React132.createElement(
     RepeaterTag,
     {
       disabled,
       label,
       ref: setRef,
-      "aria-label": __64("Open item", "elementor"),
+      "aria-label": __67("Open item", "elementor"),
       ...triggerProps,
       onClick: (e) => {
         triggerProps.onClick(e);
@@ -9363,13 +9916,13 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React128.createElement(React128.Fragment, null, showDuplicate && /* @__PURE__ */ React128.createElement(Tooltip14, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React128.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React128.createElement(Tooltip14, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React128.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React128.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React128.createElement(Tooltip14, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React128.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React128.createElement(XIcon4, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React132.createElement(React132.Fragment, null, showDuplicate && /* @__PURE__ */ React132.createElement(Tooltip14, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React132.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React132.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React132.createElement(Tooltip14, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React132.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React132.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React132.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React132.createElement(Tooltip14, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React132.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React132.createElement(XIcon4, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React128.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React128.createElement(Box30, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React132.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React132.createElement(Box33, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState23(null);
-  const popoverState = usePopupState11({ variant: "popover" });
+  const [ref, setRef] = useState24(null);
+  const popoverState = usePopupState12({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect21(() => {
     if (openOnMount && ref) {
@@ -9390,7 +9943,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 };
 
 // src/components/size/unstable-size-field.tsx
-import * as React131 from "react";
+import * as React135 from "react";
 import { InputAdornment as InputAdornment6 } from "@elementor/ui";
 
 // src/hooks/use-size-value.ts
@@ -9433,17 +9986,17 @@ var differsFromExternal = (newState, externalState) => {
 };
 
 // src/components/size/unit-select.tsx
-import * as React129 from "react";
+import * as React133 from "react";
 import { useId as useId4 } from "react";
 import { MenuListItem as MenuListItem8 } from "@elementor/editor-ui";
-import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled12, usePopupState as usePopupState12 } from "@elementor/ui";
+import { bindMenu as bindMenu3, bindTrigger as bindTrigger8, Button as Button7, Menu as Menu4, styled as styled14, usePopupState as usePopupState13 } from "@elementor/ui";
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = usePopupState12({
+  const popupState = usePopupState13({
     variant: "popover",
     popupId: useId4()
   });
@@ -9451,7 +10004,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React129.createElement(React129.Fragment, null, /* @__PURE__ */ React129.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React129.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React129.createElement(
+  return /* @__PURE__ */ React133.createElement(React133.Fragment, null, /* @__PURE__ */ React133.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...bindTrigger8(popupState) }, value), /* @__PURE__ */ React133.createElement(Menu4, { MenuListProps: { dense: true }, ...bindMenu3(popupState) }, options.map((option, index) => /* @__PURE__ */ React133.createElement(
     MenuListItem8,
     {
       key: option,
@@ -9470,7 +10023,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton3 = styled12(Button7, {
+var StyledButton3 = styled14(Button7, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -9480,11 +10033,11 @@ var StyledButton3 = styled12(Button7, {
 }));
 
 // src/components/size/unstable-size-input.tsx
-import * as React130 from "react";
+import * as React134 from "react";
 import { forwardRef as forwardRef13 } from "react";
 var UnstableSizeInput = forwardRef13(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
-    return /* @__PURE__ */ React130.createElement(
+    return /* @__PURE__ */ React134.createElement(
       NumberInput,
       {
         ref,
@@ -9522,7 +10075,7 @@ var UnstableSizeField = ({
   const shouldHighlightUnit2 = () => {
     return hasValue(size);
   };
-  return /* @__PURE__ */ React131.createElement(
+  return /* @__PURE__ */ React135.createElement(
     UnstableSizeInput,
     {
       type: "number",
@@ -9531,8 +10084,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React131.createElement(InputAdornment6, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React131.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React131.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React135.createElement(InputAdornment6, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React135.createElement(InputAdornment6, { position: "end" }, /* @__PURE__ */ React135.createElement(
           UnitSelect,
           {
             options: units2,
@@ -9550,7 +10103,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo19 } from "react";
+import { useMemo as useMemo20 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -9558,7 +10111,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo19(() => {
+  return useMemo20(() => {
     if (!groups || !options) {
       return [];
     }
@@ -9654,11 +10207,14 @@ export {
   createControlReplacementsRegistry,
   enqueueFont,
   getControlReplacements,
+  getFontAwesome7IconName,
   injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel,
   isUnitExtendedOption,
   registerControlReplacement,
+  resetFontAwesome7IconsCache,
+  resolveFontAwesome7Icon,
   trackUpgradePromotionClick,
   trackViewPromotion,
   transitionProperties,