@elementor/editor-controls 4.4.0-1144 → 4.4.0-1146

package/dist/index.mjs

@@ -558,24 +558,37 @@ var NoticeControl = createControl(
       });
     };
     const handleActionClick = () => {
-      setIsDismissed(true);
-      if (dismissible) {
-        markNoticeAsDismissedInSession(dismissible);
+      if (!dismissible) {
+        return;
       }
+      setIsDismissed(true);
+      markNoticeAsDismissedInSession(dismissible);
     };
-    return /* @__PURE__ */ React13.createElement(Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React13.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React13.createElement(Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React13.createElement(
-      AlertAction,
+    return /* @__PURE__ */ React13.createElement(
+      Alert,
       {
-        variant: "contained",
-        color: severity,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        href: buttonUrl,
-        onClick: handleActionClick,
-        sx: { mt: 2 }
+        variant: "outlined",
+        severity,
+        icon,
+        size: "small",
+        onClose: dismissible ? handleDismiss : void 0
       },
-      buttonText
-    ));
+      heading && /* @__PURE__ */ React13.createElement(NoticeTitle, null, heading),
+      /* @__PURE__ */ React13.createElement(Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content),
+      buttonText && buttonUrl && /* @__PURE__ */ React13.createElement(
+        AlertAction,
+        {
+          variant: "contained",
+          color: severity,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          href: buttonUrl,
+          onClick: handleActionClick,
+          sx: { mt: 2 }
+        },
+        buttonText
+      )
+    );
   }
 );
 
@@ -5664,7 +5677,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React93 from "react";
-import { useEffect as useEffect17, useRef as useRef19, useState as useState23 } from "react";
+import { useEffect as useEffect18, useRef as useRef21, useState as useState24 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { Box as Box24, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack18, styled as styled12, usePopupState as usePopupState9 } from "@elementor/ui";
@@ -5748,7 +5761,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 import * as React90 from "react";
-import { useMemo as useMemo12, useState as useState22 } from "react";
+import { useMemo as useMemo12, useState as useState23 } from "react";
 import {
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader4,
@@ -6009,8 +6022,74 @@ function toCatalogIcon(icon, library) {
 
 // src/controls/icon-library/font-awesome-glyph.tsx
 import * as React84 from "react";
+import { useEffect as useEffect17, useRef as useRef18, useState as useState20 } from "react";
 import { Box as Box17 } from "@elementor/ui";
 
+// src/controls/icon-library/icon-library-providers.ts
+import { useRef as useRef17, useState as useState19 } from "react";
+import { useQuery as useQuery2 } from "@elementor/query";
+var PROVIDER_ICON_SVG_QUERY_KEY = "icon-library-provider-svg";
+var providers = /* @__PURE__ */ new Map();
+function registerIconLibraryProvider(provider) {
+  providers.set(provider.id, provider);
+}
+function unregisterIconLibraryProvider(id) {
+  providers.delete(id);
+}
+function useIconLibraryProviderIcons(enabled) {
+  const [snapshot] = useState19(() => [...providers.values()]);
+  const states = snapshot.map((provider) => provider.useIcons(enabled));
+  const data = useStableConcat(states.map((state) => state.data));
+  return {
+    data,
+    isLoading: states.some((state) => state.isLoading)
+  };
+}
+function resolveProviderIconSvg(library, iconValue, signal) {
+  return resolveFromProviders((provider) => provider.resolveSvg, library, iconValue, signal);
+}
+function resolveProviderIconPreviewSvg(library, iconValue, signal) {
+  return resolveFromProviders(
+    (provider) => provider.resolvePreviewSvg ?? provider.resolveSvg,
+    library,
+    iconValue,
+    signal
+  );
+}
+async function resolveFromProviders(pickResolver, library, iconValue, signal) {
+  for (const provider of providers.values()) {
+    try {
+      const markup = await pickResolver(provider)?.(library, iconValue, signal);
+      if (markup) {
+        return markup;
+      }
+    } catch (error) {
+      if (signal?.aborted) {
+        throw error;
+      }
+    }
+  }
+  return null;
+}
+function useStableConcat(lists) {
+  const previous = useRef17(null);
+  if (!previous.current || !areSameLists(previous.current.lists, lists)) {
+    previous.current = { lists, merged: lists.flatMap((list) => list ?? []) };
+  }
+  return previous.current.merged;
+}
+function areSameLists(a, b) {
+  return a.length === b.length && a.every((item, index) => item === b[index]);
+}
+function useProviderIconSvg(library, iconValue, enabled) {
+  return useQuery2({
+    queryKey: [PROVIDER_ICON_SVG_QUERY_KEY, library, iconValue],
+    queryFn: ({ signal }) => resolveProviderIconSvg(library, iconValue, signal),
+    enabled: enabled && Boolean(library && iconValue),
+    staleTime: Infinity
+  });
+}
+
 // src/controls/icon-library/sanitize-icon-svg-markup.ts
 var ALLOWED_SVG_TAGS = /* @__PURE__ */ new Set(["svg", "g", "path", "title", "desc"]);
 var ALLOWED_SVG_ATTRS = /* @__PURE__ */ new Set([
@@ -6057,7 +6136,56 @@ function pruneNode(node) {
 }
 
 // src/controls/icon-library/font-awesome-glyph.tsx
-var FontAwesomeGlyph = ({ icon, size, color, label }) => {
+var FontAwesomeGlyph = (props) => {
+  const { icon } = props;
+  if (icon.lazySvg && !icon.svgMarkup) {
+    return /* @__PURE__ */ React84.createElement(LazyProviderGlyph, { ...props });
+  }
+  return /* @__PURE__ */ React84.createElement(ResolvedGlyph, { ...props });
+};
+var LazyProviderGlyph = (props) => {
+  const { icon, size } = props;
+  const [resolved, setResolved] = useState20(null);
+  const [isVisible, setIsVisible] = useState20(typeof IntersectionObserver === "undefined");
+  const placeholderRef = useRef18(null);
+  const svgMarkup = resolved?.id === icon.id ? resolved.markup : null;
+  useEffect17(() => {
+    const element = placeholderRef.current;
+    if (isVisible || !element) {
+      return;
+    }
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) {
+        setIsVisible(true);
+        observer.disconnect();
+      }
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [isVisible]);
+  useEffect17(() => {
+    if (!isVisible) {
+      return;
+    }
+    const controller = new AbortController();
+    resolveProviderIconPreviewSvg(icon.library, icon.value, controller.signal).then((markup) => !controller.signal.aborted && setResolved({ id: icon.id, markup })).catch(() => {
+    });
+    return () => controller.abort();
+  }, [isVisible, icon.id, icon.library, icon.value]);
+  if (!svgMarkup) {
+    return /* @__PURE__ */ React84.createElement(
+      Box17,
+      {
+        component: "span",
+        ref: placeholderRef,
+        "aria-hidden": "true",
+        sx: { display: "inline-block", width: size, height: size }
+      }
+    );
+  }
+  return /* @__PURE__ */ React84.createElement(ResolvedGlyph, { ...props, icon: { ...icon, svgMarkup } });
+};
+var ResolvedGlyph = ({ icon, size, color, label }) => {
   const svgMarkup = sanitizeIconSvgMarkup(icon.svgMarkup);
   if (svgMarkup) {
     return /* @__PURE__ */ React84.createElement(
@@ -6313,7 +6441,7 @@ function parseFilterEntry(value) {
 
 // src/controls/icon-library/icon-library-grid.tsx
 import * as React86 from "react";
-import { useLayoutEffect as useLayoutEffect3, useRef as useRef17, useState as useState19 } from "react";
+import { useLayoutEffect as useLayoutEffect3, useRef as useRef19, useState as useState21 } from "react";
 import { Box as Box19, Tooltip as Tooltip9, useTheme as useTheme4 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __35 } from "@wordpress/i18n";
@@ -6352,12 +6480,12 @@ var IconLibraryGrid = ({
   noResultsComponent
 }) => {
   const theme = useTheme4();
-  const containerRef = useRef17(null);
-  const cellRefs = useRef17(/* @__PURE__ */ new Map());
-  const shouldRestoreFocusRef = useRef17(false);
+  const containerRef = useRef19(null);
+  const cellRefs = useRef19(/* @__PURE__ */ new Map());
+  const shouldRestoreFocusRef = useRef19(false);
   const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
-  const [focusedIndex, setFocusedIndex] = useState19(selectedIndex >= 0 ? selectedIndex : 0);
-  const [{ columnCount, cellSize }, setGridMetrics] = useState19(() => getGridMetrics(0, 0, 0));
+  const [focusedIndex, setFocusedIndex] = useState21(selectedIndex >= 0 ? selectedIndex : 0);
+  const [{ columnCount, cellSize }, setGridMetrics] = useState21(() => getGridMetrics(0, 0, 0));
   const rowCount = Math.ceil(items2.length / columnCount);
   const cellGap = Number.parseFloat(theme.spacing(GRID_CELL_GAP));
   const verticalPadding = Number.parseFloat(theme.spacing(GRID_VERTICAL_PADDING));
@@ -6594,7 +6722,7 @@ var IconLibraryGrid = ({
                   /* @__PURE__ */ React86.createElement(
                     FontAwesomeGlyph,
                     {
-                      icon: item,
+                      icon: { ...item, value: item.iconValue ?? item.value },
                       size: ICON_GLYPH_SIZE,
                       color: "currentColor"
                     }
@@ -6609,52 +6737,9 @@ var IconLibraryGrid = ({
   );
 };
 
-// src/controls/icon-library/icon-library-providers.ts
-import { useState as useState20 } from "react";
-import { useQuery as useQuery2 } from "@elementor/query";
-var PROVIDER_ICON_SVG_QUERY_KEY = "icon-library-provider-svg";
-var providers = /* @__PURE__ */ new Map();
-function registerIconLibraryProvider(provider) {
-  providers.set(provider.id, provider);
-}
-function unregisterIconLibraryProvider(id) {
-  providers.delete(id);
-}
-function useIconLibraryProviderIcons(enabled) {
-  const [snapshot] = useState20(() => [...providers.values()]);
-  const states = snapshot.map((provider) => provider.useIcons(enabled));
-  return {
-    data: states.flatMap((state) => state.data ?? []),
-    isLoading: states.some((state) => state.isLoading)
-  };
-}
-async function resolveProviderIconSvg(library, iconValue, signal) {
-  for (const provider of providers.values()) {
-    try {
-      const markup = await provider.resolveSvg?.(library, iconValue, signal);
-      if (markup) {
-        return markup;
-      }
-    } catch (error) {
-      if (signal?.aborted) {
-        throw error;
-      }
-    }
-  }
-  return null;
-}
-function useProviderIconSvg(library, iconValue, enabled) {
-  return useQuery2({
-    queryKey: [PROVIDER_ICON_SVG_QUERY_KEY, library, iconValue],
-    queryFn: ({ signal }) => resolveProviderIconSvg(library, iconValue, signal),
-    enabled: enabled && Boolean(library && iconValue),
-    staleTime: Infinity
-  });
-}
-
 // src/controls/icon-library/icon-library-upload-action.tsx
 import * as React87 from "react";
-import { forwardRef as forwardRef11, useRef as useRef18, useState as useState21 } from "react";
+import { forwardRef as forwardRef11, useRef as useRef20, useState as useState22 } from "react";
 import { PromotionPopover, useCanvasClickHandler } from "@elementor/editor-ui";
 import { UploadIcon as UploadIcon2 } from "@elementor/icons";
 import { createReplaceableLocation as createReplaceableLocation2 } from "@elementor/locations";
@@ -6715,8 +6800,8 @@ var IconLibraryUploadPromotion = ({
   title = __36("Upload custom icons", "elementor"),
   content = __36("Add your own icon font library to use across your site.", "elementor")
 }) => {
-  const [isOpen, setIsOpen] = useState21(false);
-  const triggerRef = useRef18(null);
+  const [isOpen, setIsOpen] = useState22(false);
+  const triggerRef = useRef20(null);
   const canSeePromotions = !!window.elementor?.config?.v4Promotions;
   const close = () => {
     setIsOpen(false);
@@ -6800,6 +6885,21 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
   );
 };
 
+// src/controls/icon-library/merge-icons-by-id.ts
+var getNames = (icon) => [icon.name, ...icon.aliases ?? []].filter(Boolean);
+function mergeIconsById(primary, secondary) {
+  const ids = new Set(primary.map((icon) => icon.id));
+  const names = new Set(
+    primary.flatMap((icon) => getNames(icon).map((name) => `${icon.library}:${name}`))
+  );
+  return [
+    ...primary,
+    ...secondary.filter(
+      (icon) => !ids.has(icon.id) && !getNames(icon).some((name) => names.has(`${icon.library}:${name}`))
+    )
+  ];
+}
+
 // src/controls/icon-library/svg-element-icon.tsx
 import * as React89 from "react";
 import { SvgIcon } from "@elementor/ui";
@@ -6856,7 +6956,7 @@ var IconLibraryPopover = ({
     handleChange: handleSearchChange,
     setImmediateValue: setSearchValue
   } = useDebounceState({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
-  const [activeLibraries, setActiveLibraries] = useState22([]);
+  const [activeLibraries, setActiveLibraries] = useState23([]);
   const [storedView, setStoredView] = useSessionStorage2(
     ICON_LIBRARY_VIEW_STORAGE_KEY,
     ICON_LIBRARY_VIEW_STORAGE_PREFIX
@@ -6864,12 +6964,15 @@ var IconLibraryPopover = ({
   const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
   const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
   const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(open);
-  const isLoading = isFontAwesomeLoading || isProviderLoading;
-  const icons = useMemo12(() => [...fontAwesomeIcons, ...providerIcons], [providerIcons, fontAwesomeIcons]);
+  const icons = useMemo12(
+    () => mergeIconsById(fontAwesomeIcons, providerIcons),
+    [providerIcons, fontAwesomeIcons]
+  );
   const items2 = useMemo12(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
   );
+  const isLoading = isFontAwesomeLoading || isProviderLoading && items2.length === 0;
   const selectedValue = useMemo12(
     () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
     [icons, selectedIconClass, selectedIconLibrary]
@@ -6991,7 +7094,7 @@ var IconLibraryContent = ({
     }
   );
 };
-var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(CircularProgress3, { role: "progressbar", size: 24 }));
+var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(CircularProgress3, { role: "progressbar", size: 24, "aria-label": __38("Loading icons", "elementor") }));
 var IconLibraryEmptyState = ({
   searchValue,
   isCatalogAvailable,
@@ -7020,7 +7123,14 @@ var IconLibraryRow = (item) => {
         flexShrink: 0
       }
     },
-    /* @__PURE__ */ React90.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
+    /* @__PURE__ */ React90.createElement(
+      FontAwesomeGlyph,
+      {
+        icon: { ...icon, value: icon.iconValue },
+        size: ICON_GLYPH_SIZE2,
+        color: "currentColor"
+      }
+    )
   ), /* @__PURE__ */ React90.createElement(Typography10, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
 var CatalogUnavailable = () => /* @__PURE__ */ React90.createElement(Stack16, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(Typography10, { align: "center", variant: "subtitle2", color: "text.secondary" }, __38("Icons couldn't be loaded.", "elementor")));
@@ -7028,7 +7138,8 @@ var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React90.createElem
 var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
   ...icon,
   type: "item",
-  value: icon.id
+  value: icon.id,
+  iconValue: icon.value
 }));
 
 // src/controls/open-icon-library.ts
@@ -7105,6 +7216,7 @@ var UploadControl = ({ isAdmin, onUpload }) => {
 
 // src/controls/svg-media-preview.tsx
 import * as React92 from "react";
+import { useMemo as useMemo13 } from "react";
 import { Box as Box23, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
 import { __ as __40 } from "@wordpress/i18n";
 var ICON_PREVIEW_SIZE = 50;
@@ -7112,21 +7224,30 @@ var ICON_PREVIEW_COLOR = "#000000";
 var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const shouldLoadIconCatalog = Boolean(iconClassName && iconLibrary);
   const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
-  const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(shouldLoadIconCatalog);
-  const icons = [...fontAwesomeIcons, ...providerIcons];
+  const isFontAwesomeLibrary = Boolean(iconLibrary?.startsWith("fa-"));
+  const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(
+    shouldLoadIconCatalog && !isFontAwesomeLibrary
+  );
+  const icons = useMemo13(
+    () => mergeIconsById(fontAwesomeIcons, providerIcons),
+    [fontAwesomeIcons, providerIcons]
+  );
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
-  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isProviderLoading);
+  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || !isFontAwesomeLibrary && isProviderLoading);
   const { data: savedIconSvg, isLoading: isSavedIconLoading } = useProviderIconSvg(
     iconLibrary,
     iconClassName,
-    shouldLoadIconCatalog && !isLoadingCatalog && !selectedIcon
+    shouldLoadIconCatalog && !isLoadingCatalog && !selectedIcon && !isFontAwesomeLibrary
   );
   if (isFetching || isLoadingCatalog || isSavedIconLoading) {
-    return /* @__PURE__ */ React92.createElement(CircularProgress4, { role: "progressbar" });
+    return /* @__PURE__ */ React92.createElement(CircularProgress4, { role: "progressbar", "aria-label": __40("Loading icon", "elementor") });
   }
   if (selectedIcon) {
     return /* @__PURE__ */ React92.createElement(IconPreview, { icon: selectedIcon });
   }
+  if (shouldLoadIconCatalog && iconClassName && iconLibrary && isFontAwesomeLibrary) {
+    return /* @__PURE__ */ React92.createElement(IconPreview, { icon: createLazyIcon(iconLibrary, iconClassName) });
+  }
   if (savedIconSvg) {
     return /* @__PURE__ */ React92.createElement(IconPreview, { icon: toSvgMarkupIcon(savedIconSvg, iconLibrary, iconClassName) });
   }
@@ -7135,6 +7256,18 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   }
   return /* @__PURE__ */ React92.createElement(SvgPreview, { src });
 };
+var createLazyIcon = (library, value) => ({
+  id: `${library}:${value}`,
+  name: value,
+  label: value,
+  library,
+  value,
+  aliases: [],
+  width: ICON_PREVIEW_SIZE,
+  height: ICON_PREVIEW_SIZE,
+  paths: [],
+  lazySvg: true
+});
 var toSvgMarkupIcon = (svgMarkup, library, value) => ({
   id: `${library}:${value}`,
   label: value ?? "",
@@ -7147,7 +7280,7 @@ var toSvgMarkupIcon = (svgMarkup, library, value) => ({
   paths: [],
   svgMarkup
 });
-var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React92.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(Box23, { sx: { color: ICON_PREVIEW_COLOR, minWidth: ICON_PREVIEW_SIZE, minHeight: ICON_PREVIEW_SIZE } }, /* @__PURE__ */ React92.createElement(
   FontAwesomeGlyph,
   {
     icon,
@@ -7216,11 +7349,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(previewSvgValue?.id?.value || null);
   const src = attachment?.url ?? previewSvgValue?.url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState23(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState24(false);
   const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
-  const controlContainerRef = useRef19(null);
-  const buttonGroupRef = useRef19(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = useState23(null);
+  const controlContainerRef = useRef21(null);
+  const buttonGroupRef = useRef21(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = useState24(null);
   const { isAdmin } = useCurrentUserCapabilities();
   const selectedIconClass = showIconLibrary && typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
   const selectedIconLibrary = showIconLibrary && typeof previewIconValue?.library?.value === "string" ? previewIconValue.library.value : null;
@@ -7272,7 +7405,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
     setIconLibraryAnchor(anchor);
     iconLibraryPopoverState.open(event);
   };
-  useEffect17(() => {
+  useEffect18(() => {
     if (!iconLibraryPopoverState.isOpen) {
       return;
     }
@@ -7566,7 +7699,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 import * as React97 from "react";
-import { useRef as useRef20 } from "react";
+import { useRef as useRef22 } 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";
@@ -7588,7 +7721,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil16);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = useRef20(null);
+  const rowRef = useRef22(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -7661,7 +7794,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 import * as React99 from "react";
-import { useRef as useRef21 } from "react";
+import { useRef as useRef23 } from "react";
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil as stringPropTypeUtil17 } from "@elementor/editor-props";
 import {
   ArrowBarBothIcon,
@@ -7703,7 +7836,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(stringPropTypeUtil17);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = useRef21(null);
+  const rowRef = useRef23(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7738,7 +7871,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-import { useRef as useRef22 } from "react";
+import { useRef as useRef24 } from "react";
 import {
   backgroundColorOverlayPropTypeUtil,
   backgroundGradientOverlayPropTypeUtil as backgroundGradientOverlayPropTypeUtil2,
@@ -7763,7 +7896,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs(getCurrentOverlayType());
-  const valuesHistory = useRef22({
+  const valuesHistory = useRef24({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -8014,7 +8147,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 import * as React102 from "react";
-import { useMemo as useMemo13 } from "react";
+import { useMemo as useMemo14 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
 import { Box as Box26 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -8035,11 +8168,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = useMemo13(
+    const childArrayPropTypeUtil2 = useMemo14(
       () => createArrayPropUtils2(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = useMemo13(
+    const contextValue = useMemo14(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -8171,7 +8304,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React103 from "react";
-import { useMemo as useMemo14, useState as useState24 } from "react";
+import { useMemo as useMemo15, useState as useState25 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -8202,9 +8335,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState24("");
-  const [valueError, setValueError] = useState24("");
-  const [sessionState, setSessionState] = useState24({
+  const [keyError, setKeyError] = useState25("");
+  const [valueError, setValueError] = useState25("");
+  const [sessionState, setSessionState] = useState25({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -8214,7 +8347,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = useMemo14(
+  const [keyRegex, valueRegex, errMsg] = useMemo15(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -8346,7 +8479,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 import * as React117 from "react";
-import { useRef as useRef30 } from "react";
+import { useRef as useRef32 } 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 Box30, IconButton as IconButton10, Tooltip as Tooltip12, Typography as Typography12, usePopupState as usePopupState10 } from "@elementor/ui";
@@ -8410,7 +8543,7 @@ import { __ as __55 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
 import * as React106 from "react";
-import { useRef as useRef23 } from "react";
+import { useRef as useRef25 } from "react";
 import { moveTransformPropTypeUtil } from "@elementor/editor-props";
 import { ArrowDownLeftIcon, ArrowDownSmallIcon, ArrowRightIcon } from "@elementor/icons";
 import { Grid as Grid22 } from "@elementor/ui";
@@ -8457,7 +8590,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(moveTransformPropTypeUtil);
-  const rowRefs = [useRef23(null), useRef23(null), useRef23(null)];
+  const rowRefs = [useRef25(null), useRef25(null), useRef25(null)];
   return /* @__PURE__ */ React106.createElement(Grid22, { container: true, spacing: 1.5 }, /* @__PURE__ */ React106.createElement(PropProvider, { ...context }, /* @__PURE__ */ React106.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React106.createElement(
     AxisRow,
     {
@@ -8472,7 +8605,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 import * as React107 from "react";
-import { useRef as useRef24 } from "react";
+import { useRef as useRef26 } from "react";
 import { rotateTransformPropTypeUtil as rotateTransformPropTypeUtil2 } from "@elementor/editor-props";
 import { Arrow360Icon, RotateClockwiseIcon } from "@elementor/icons";
 import { Grid as Grid23 } from "@elementor/ui";
@@ -8497,7 +8630,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(rotateTransformPropTypeUtil2);
-  const rowRefs = [useRef24(null), useRef24(null), useRef24(null)];
+  const rowRefs = [useRef26(null), useRef26(null), useRef26(null)];
   return /* @__PURE__ */ React107.createElement(Grid23, { container: true, spacing: 1.5 }, /* @__PURE__ */ React107.createElement(PropProvider, { ...context }, /* @__PURE__ */ React107.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React107.createElement(
     AxisRow,
     {
@@ -8511,7 +8644,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 import * as React109 from "react";
-import { useRef as useRef25 } from "react";
+import { useRef as useRef27 } 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";
@@ -8544,13 +8677,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(scaleTransformPropTypeUtil2);
-  const rowRefs = [useRef25(null), useRef25(null), useRef25(null)];
+  const rowRefs = [useRef27(null), useRef27(null), useRef27(null)];
   return /* @__PURE__ */ React109.createElement(Grid25, { container: true, spacing: 1.5 }, /* @__PURE__ */ React109.createElement(PropProvider, { ...context }, /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React109.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
 import * as React110 from "react";
-import { useRef as useRef26 } from "react";
+import { useRef as useRef28 } 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";
@@ -8570,7 +8703,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(skewTransformPropTypeUtil2);
-  const rowRefs = [useRef26(null), useRef26(null), useRef26(null)];
+  const rowRefs = [useRef28(null), useRef28(null), useRef28(null)];
   return /* @__PURE__ */ React110.createElement(Grid26, { container: true, spacing: 1.5 }, /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React110.createElement(
     AxisRow,
     {
@@ -8583,7 +8716,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-import { useRef as useRef27 } from "react";
+import { useRef as useRef29 } from "react";
 import {
   moveTransformPropTypeUtil as moveTransformPropTypeUtil2,
   rotateTransformPropTypeUtil as rotateTransformPropTypeUtil3,
@@ -8615,7 +8748,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = useTabs2(getCurrentTransformType());
-  const valuesHistory = useRef27({
+  const valuesHistory = useRef29({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -8759,7 +8892,7 @@ import { __ as __59 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 import * as React114 from "react";
-import { useRef as useRef28 } from "react";
+import { useRef as useRef30 } from "react";
 import { perspectiveOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid27, Stack as Stack19 } from "@elementor/ui";
 import { __ as __57 } from "@wordpress/i18n";
@@ -8791,13 +8924,13 @@ var PerspectiveOriginControlProvider = () => {
   return /* @__PURE__ */ React114.createElement(PropProvider, { ...context }, CHILDREN_PERSPECTIVE_FIELDS.map((control) => /* @__PURE__ */ React114.createElement(PropKeyProvider, { bind: control.bind, key: control.bind }, /* @__PURE__ */ React114.createElement(ControlFields, { control }))));
 };
 var ControlFields = ({ control }) => {
-  const rowRef = useRef28(null);
+  const rowRef = useRef30(null);
   return /* @__PURE__ */ React114.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React114.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React114.createElement(Grid27, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 import * as React115 from "react";
-import { useRef as useRef29 } from "react";
+import { useRef as useRef31 } from "react";
 import { transformOriginPropTypeUtil } from "@elementor/editor-props";
 import { Grid as Grid28, Stack as Stack20 } from "@elementor/ui";
 import { __ as __58 } from "@wordpress/i18n";
@@ -8825,7 +8958,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(transformOriginPropTypeUtil);
-  const rowRef = useRef29(null);
+  const rowRef = useRef31(null);
   return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(Grid28, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -8873,7 +9006,7 @@ var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(transformPropTypeUtil);
-    const headerRef = useRef30(null);
+    const headerRef = useRef32(null);
     const popupState = usePopupState10({ variant: "popover" });
     return /* @__PURE__ */ React117.createElement(PropProvider, { ...context }, /* @__PURE__ */ React117.createElement(
       TransformSettingsControl,
@@ -8953,7 +9086,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React120 from "react";
-import { useEffect as useEffect18, useMemo as useMemo17, useState as useState25 } from "react";
+import { useEffect as useEffect19, useMemo as useMemo18, useState as useState26 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -8965,15 +9098,15 @@ import { __ as __63 } from "@wordpress/i18n";
 
 // src/controls/selection-size-control.tsx
 import * as React118 from "react";
-import { useMemo as useMemo15, useRef as useRef31 } from "react";
+import { useMemo as useMemo16, useRef as useRef33 } 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 = useRef31(null);
+    const rowRef = useRef33(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = useMemo15(() => {
+    const currentSizeConfig = useMemo16(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -9186,7 +9319,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 import * as React119 from "react";
-import { useMemo as useMemo16, useRef as useRef32 } from "react";
+import { useMemo as useMemo17, useRef as useRef34 } 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";
@@ -9232,9 +9365,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = useRef32(null);
+  const defaultRef = useRef34(null);
   const popoverState = usePopupState11({ variant: "popover" });
-  const disabledCategories = useMemo16(() => {
+  const disabledCategories = useMemo17(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -9460,14 +9593,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState25([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState26([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo18(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = useMemo17(() => {
+    const allowedTransitionSet = useMemo18(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -9478,7 +9611,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    useEffect18(() => {
+    useEffect19(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -9490,10 +9623,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    useEffect18(() => {
+    useEffect19(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = useMemo17(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = useMemo18(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React120.createElement(
       RepeatableControl,
@@ -9776,13 +9909,13 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React129 from "react";
-import { useCallback as useCallback4, useState as useState27 } from "react";
+import { useCallback as useCallback4, useState as useState28 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box36, Stack as Stack24 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React126 from "react";
-import { useEffect as useEffect19, useRef as useRef33 } from "react";
+import { useEffect as useEffect20, useRef as useRef35 } from "react";
 import { Box as Box34 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
@@ -9845,8 +9978,8 @@ var InlineEditor = React126.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = useRef33(null);
-  const onBlurRef = useRef33(onBlur);
+  const containerRef = useRef35(null);
+  const onBlurRef = useRef35(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -9944,8 +10077,8 @@ var InlineEditor = React126.forwardRef((props, ref) => {
   return /* @__PURE__ */ React126.createElement(Box34, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React126.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = useRef33(false);
-  useEffect19(() => {
+  const hasMounted = useRef35(false);
+  useEffect20(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -9956,7 +10089,7 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React128 from "react";
-import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef35, useState as useState26 } from "react";
+import { useEffect as useEffect22, useMemo as useMemo19, useRef as useRef37, useState as useState27 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -9982,7 +10115,7 @@ import { __ as __67 } from "@wordpress/i18n";
 
 // src/components/url-popover.tsx
 import * as React127 from "react";
-import { useEffect as useEffect20, useRef as useRef34 } from "react";
+import { useEffect as useEffect21, useRef as useRef36 } from "react";
 import { ExternalLinkIcon } from "@elementor/icons";
 import { bindPopover as bindPopover8, Popover as Popover9, Stack as Stack23, TextField as TextField11, ToggleButton as ToggleButton3, Tooltip as Tooltip13 } from "@elementor/ui";
 import { __ as __66 } from "@wordpress/i18n";
@@ -9995,8 +10128,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = useRef34(null);
-  useEffect20(() => {
+  const inputRef = useRef36(null);
+  useEffect21(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -10051,16 +10184,16 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = useState26("");
-  const [openInNewTab, setOpenInNewTab] = useState26(false);
-  const toolbarRef = useRef35(null);
+  const [urlValue, setUrlValue] = useState27("");
+  const [openInNewTab, setOpenInNewTab] = useState27(false);
+  const toolbarRef = useRef37(null);
   const linkPopupState = usePopupState12({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = useEditorState({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = useMemo18(() => {
+  const formatButtonsList = useMemo19(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -10097,7 +10230,7 @@ var InlineEditorToolbar = ({
     }
     linkPopupState.close();
   };
-  useEffect21(() => {
+  useEffect22(() => {
     if (!inControlPanel) {
       editor?.commands?.focus();
     }
@@ -10279,7 +10412,7 @@ var InlineEditingControl = createControl(
     const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
     const { value: rawValue } = usePropKeyContext();
     const content = value ?? extractInlineHtmlContent(rawValue);
-    const [editor, setEditor] = useState27(null);
+    const [editor, setEditor] = useState28(null);
     const handleChange = useCallback4(
       (newValue) => {
         const html = newValue ?? "";
@@ -10467,7 +10600,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React130 from "react";
-import { useMemo as useMemo19, useState as useState28 } from "react";
+import { useMemo as useMemo20, useState as useState29 } 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";
 
@@ -10505,10 +10638,10 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
-  const [inputValue, setInputValue] = useState28("");
+  const [inputValue, setInputValue] = useState29("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = useMemo19(
+  const suggestionOptions = useMemo20(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -10736,14 +10869,14 @@ var GridSpanControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 import * as React137 from "react";
-import { useRef as useRef36 } from "react";
+import { useRef as useRef38 } from "react";
 import { SitemapIcon } from "@elementor/icons";
 import { IconButton as IconButton12, Stack as Stack27, Tooltip as Tooltip15 } from "@elementor/ui";
 import { __ as __71 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
 import * as React136 from "react";
-import { forwardRef as forwardRef14, useCallback as useCallback5, useImperativeHandle, useState as useState29 } from "react";
+import { forwardRef as forwardRef14, useCallback as useCallback5, useImperativeHandle, useState as useState30 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box38 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -10751,7 +10884,7 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef14(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState29(false);
+    const [isOpen, setIsOpen] = useState30(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -10795,7 +10928,7 @@ var PromotionTrigger = forwardRef14(
 var ARIA_LABEL = __71("Display Conditions", "elementor");
 var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = useRef36(null);
+  const triggerRef = useRef38(null);
   return /* @__PURE__ */ React137.createElement(
     Stack27,
     {
@@ -10827,14 +10960,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 import * as React138 from "react";
-import { useRef as useRef37 } from "react";
+import { useRef as useRef39 } from "react";
 import { PlusIcon as PlusIcon4 } from "@elementor/icons";
 import { Stack as Stack28, Tooltip as Tooltip16 } from "@elementor/ui";
 import { __ as __72 } from "@wordpress/i18n";
 var ARIA_LABEL2 = __72("Attributes", "elementor");
 var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = useRef37(null);
+  const triggerRef = useRef39(null);
   return /* @__PURE__ */ React138.createElement(
     Stack28,
     {
@@ -10871,7 +11004,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React140 from "react";
-import { useEffect as useEffect22, useState as useState30 } from "react";
+import { useEffect as useEffect23, useState as useState31 } 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,
@@ -10901,7 +11034,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState30(initialOpenItem);
+  const [openItem, setOpenItem] = useState31(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -11077,10 +11210,10 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React140.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React140.createElement(Box39, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState30(null);
+  const [ref, setRef] = useState31(null);
   const popoverState = usePopupState13({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
-  useEffect22(() => {
+  useEffect23(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -11259,7 +11392,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-import { useMemo as useMemo20 } from "react";
+import { useMemo as useMemo21 } from "react";
 import { getElementorConfig } from "@elementor/editor-v1-adapters";
 var getFontControlConfig = () => {
   const { controls } = getElementorConfig();
@@ -11267,7 +11400,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return useMemo20(() => {
+  return useMemo21(() => {
     if (!groups || !options) {
       return [];
     }
@@ -11377,6 +11510,7 @@ export {
   registerIconLibraryProvider,
   resetFontAwesome7IconsCache,
   resolveFontAwesome7Icon,
+  resolveProviderIconPreviewSvg,
   resolveProviderIconSvg,
   trackUpgradePromotionClick,
   trackViewPromotion,