@elementor/editor-controls 4.4.0-1145 → 4.4.0-1147

package/dist/index.js

@@ -117,6 +117,7 @@ __export(index_exports, {
   registerIconLibraryProvider: () => registerIconLibraryProvider,
   resetFontAwesome7IconsCache: () => resetFontAwesome7IconsCache,
   resolveFontAwesome7Icon: () => resolveFontAwesome7Icon,
+  resolveProviderIconPreviewSvg: () => resolveProviderIconPreviewSvg,
   resolveProviderIconSvg: () => resolveProviderIconSvg,
   trackUpgradePromotionClick: () => trackUpgradePromotionClick,
   trackViewPromotion: () => trackViewPromotion,
@@ -5750,7 +5751,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 var React93 = __toESM(require("react"));
-var import_react57 = require("react");
+var import_react59 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props35 = require("@elementor/editor-props");
 var import_ui76 = require("@elementor/ui");
@@ -5824,7 +5825,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 var React90 = __toESM(require("react"));
-var import_react56 = require("react");
+var import_react57 = require("react");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons26 = require("@elementor/icons");
 var import_session2 = require("@elementor/session");
@@ -6079,8 +6080,74 @@ function toCatalogIcon(icon, library) {
 
 // src/controls/icon-library/font-awesome-glyph.tsx
 var React84 = __toESM(require("react"));
+var import_react53 = require("react");
 var import_ui67 = require("@elementor/ui");
 
+// src/controls/icon-library/icon-library-providers.ts
+var import_react52 = require("react");
+var import_query2 = require("@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] = (0, import_react52.useState)(() => [...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 = (0, import_react52.useRef)(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 (0, import_query2.useQuery)({
+    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([
@@ -6127,7 +6194,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] = (0, import_react53.useState)(null);
+  const [isVisible, setIsVisible] = (0, import_react53.useState)(typeof IntersectionObserver === "undefined");
+  const placeholderRef = (0, import_react53.useRef)(null);
+  const svgMarkup = resolved?.id === icon.id ? resolved.markup : null;
+  (0, import_react53.useEffect)(() => {
+    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]);
+  (0, import_react53.useEffect)(() => {
+    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(
+      import_ui67.Box,
+      {
+        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(
@@ -6188,7 +6304,7 @@ var FontAwesomeGlyph = ({ icon, size, color, label }) => {
 
 // src/controls/icon-library/icon-library-filter.tsx
 var React85 = __toESM(require("react"));
-var import_react52 = require("react");
+var import_react54 = require("react");
 var import_icons23 = require("@elementor/icons");
 var import_ui68 = require("@elementor/ui");
 var import_i18n34 = require("@wordpress/i18n");
@@ -6217,7 +6333,7 @@ var DEFAULT_FILTER = [
   { type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "rosette" }
 ];
 var IconLibraryFilter = ({ value, onChange }) => {
-  const popupId = (0, import_react52.useId)();
+  const popupId = (0, import_react54.useId)();
   const popupState = (0, import_ui68.usePopupState)({
     variant: "popover",
     popupId
@@ -6362,7 +6478,7 @@ function parseFilterEntry(value) {
 
 // src/controls/icon-library/icon-library-grid.tsx
 var React86 = __toESM(require("react"));
-var import_react53 = require("react");
+var import_react55 = require("react");
 var import_ui69 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n35 = require("@wordpress/i18n");
@@ -6401,12 +6517,12 @@ var IconLibraryGrid = ({
   noResultsComponent
 }) => {
   const theme = (0, import_ui69.useTheme)();
-  const containerRef = (0, import_react53.useRef)(null);
-  const cellRefs = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
-  const shouldRestoreFocusRef = (0, import_react53.useRef)(false);
+  const containerRef = (0, import_react55.useRef)(null);
+  const cellRefs = (0, import_react55.useRef)(/* @__PURE__ */ new Map());
+  const shouldRestoreFocusRef = (0, import_react55.useRef)(false);
   const selectedIndex = items2.findIndex((item) => item.id === selectedValue);
-  const [focusedIndex, setFocusedIndex] = (0, import_react53.useState)(selectedIndex >= 0 ? selectedIndex : 0);
-  const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react53.useState)(() => getGridMetrics(0, 0, 0));
+  const [focusedIndex, setFocusedIndex] = (0, import_react55.useState)(selectedIndex >= 0 ? selectedIndex : 0);
+  const [{ columnCount, cellSize }, setGridMetrics] = (0, import_react55.useState)(() => 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));
@@ -6421,7 +6537,7 @@ var IconLibraryGrid = ({
   });
   const focusedItem = items2[focusedIndex];
   const visibleRowIndexes = virtualizer.getVirtualIndexes().join(",");
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react55.useLayoutEffect)(() => {
     setFocusedIndex((current) => {
       if (items2.length === 0) {
         return 0;
@@ -6436,7 +6552,7 @@ var IconLibraryGrid = ({
       virtualizer.scrollToIndex(Math.floor(selectedIndex / columnCount), { align: "center" });
     }
   }, [cellSize, columnCount, items2, selectedIndex, selectedValue]);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react55.useLayoutEffect)(() => {
     if (!shouldRestoreFocusRef.current || !focusedItem) {
       return;
     }
@@ -6447,7 +6563,7 @@ var IconLibraryGrid = ({
     cell.focus();
     shouldRestoreFocusRef.current = false;
   }, [focusedItem, visibleRowIndexes]);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react55.useLayoutEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -6463,7 +6579,7 @@ var IconLibraryGrid = ({
       resizeObserver.disconnect();
     };
   }, [theme, cellGap, items2.length]);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react55.useLayoutEffect)(() => {
     virtualizer.measure();
   }, [cellSize, columnCount]);
   const isRtl = theme.direction === "rtl" || document.documentElement.dir === "rtl";
@@ -6643,7 +6759,7 @@ var IconLibraryGrid = ({
                   /* @__PURE__ */ React86.createElement(
                     FontAwesomeGlyph,
                     {
-                      icon: item,
+                      icon: { ...item, value: item.iconValue ?? item.value },
                       size: ICON_GLYPH_SIZE,
                       color: "currentColor"
                     }
@@ -6658,52 +6774,9 @@ var IconLibraryGrid = ({
   );
 };
 
-// src/controls/icon-library/icon-library-providers.ts
-var import_react54 = require("react");
-var import_query2 = require("@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] = (0, import_react54.useState)(() => [...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 (0, import_query2.useQuery)({
-    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
 var React87 = __toESM(require("react"));
-var import_react55 = require("react");
+var import_react56 = require("react");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons24 = require("@elementor/icons");
 var import_locations3 = require("@elementor/locations");
@@ -6752,7 +6825,7 @@ var trackUpgradePromotionClick = (data) => {
 var ICON_LIBRARY_UPLOAD_UPGRADE_URL = "https://go.elementor.com/go-pro-svg-library-upload-upgrade/";
 var TRACKING_DATA = { target_name: "icon_library_upload", location_l2: "general" };
 var { Slot: IconLibraryUploadActionSlot, inject: injectIntoIconLibraryUploadAction } = (0, import_locations3.createReplaceableLocation)();
-var IconLibraryUploadButton = (0, import_react55.forwardRef)(
+var IconLibraryUploadButton = (0, import_react56.forwardRef)(
   (props, ref) => {
     const label = (0, import_i18n36.__)("Upload library", "elementor");
     return /* @__PURE__ */ React87.createElement(import_ui70.Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React87.createElement(import_ui70.IconButton, { ref, size: "tiny", "aria-label": label, ...props }, /* @__PURE__ */ React87.createElement(import_icons24.UploadIcon, { fontSize: "tiny" })));
@@ -6764,8 +6837,8 @@ var IconLibraryUploadPromotion = ({
   title = (0, import_i18n36.__)("Upload custom icons", "elementor"),
   content = (0, import_i18n36.__)("Add your own icon font library to use across your site.", "elementor")
 }) => {
-  const [isOpen, setIsOpen] = (0, import_react55.useState)(false);
-  const triggerRef = (0, import_react55.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react56.useState)(false);
+  const triggerRef = (0, import_react56.useRef)(null);
   const canSeePromotions = !!window.elementor?.config?.v4Promotions;
   const close = () => {
     setIsOpen(false);
@@ -6849,6 +6922,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
 var React89 = __toESM(require("react"));
 var import_ui72 = require("@elementor/ui");
@@ -6905,7 +6993,7 @@ var IconLibraryPopover = ({
     handleChange: handleSearchChange,
     setImmediateValue: setSearchValue
   } = (0, import_utils6.useDebounceState)({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
-  const [activeLibraries, setActiveLibraries] = (0, import_react56.useState)([]);
+  const [activeLibraries, setActiveLibraries] = (0, import_react57.useState)([]);
   const [storedView, setStoredView] = (0, import_session2.useSessionStorage)(
     ICON_LIBRARY_VIEW_STORAGE_KEY,
     ICON_LIBRARY_VIEW_STORAGE_PREFIX
@@ -6913,13 +7001,16 @@ 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 = (0, import_react56.useMemo)(() => [...fontAwesomeIcons, ...providerIcons], [providerIcons, fontAwesomeIcons]);
-  const items2 = (0, import_react56.useMemo)(
+  const icons = (0, import_react57.useMemo)(
+    () => mergeIconsById(fontAwesomeIcons, providerIcons),
+    [providerIcons, fontAwesomeIcons]
+  );
+  const items2 = (0, import_react57.useMemo)(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
   );
-  const selectedValue = (0, import_react56.useMemo)(
+  const isLoading = isFontAwesomeLoading || isProviderLoading && items2.length === 0;
+  const selectedValue = (0, import_react57.useMemo)(
     () => findFontAwesome7Icon(icons, selectedIconClass, selectedIconLibrary)?.id,
     [icons, selectedIconClass, selectedIconLibrary]
   );
@@ -7040,7 +7131,7 @@ var IconLibraryContent = ({
     }
   );
 };
-var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(import_ui73.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(import_ui73.CircularProgress, { role: "progressbar", size: 24 }));
+var IconLibraryLoadingState = () => /* @__PURE__ */ React90.createElement(import_ui73.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React90.createElement(import_ui73.CircularProgress, { role: "progressbar", size: 24, "aria-label": (0, import_i18n38.__)("Loading icons", "elementor") }));
 var IconLibraryEmptyState = ({
   searchValue,
   isCatalogAvailable,
@@ -7069,7 +7160,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(import_ui73.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
 var CatalogUnavailable = () => /* @__PURE__ */ React90.createElement(import_ui73.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React90.createElement(SvgElementIcon, { fontSize: "large" }), /* @__PURE__ */ React90.createElement(import_ui73.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n38.__)("Icons couldn't be loaded.", "elementor")));
@@ -7077,7 +7175,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
@@ -7104,7 +7203,6 @@ var ICON_LIBRARY_PADDING = 0.625;
 var SvgMediaOverlay = ({
   label,
   isAdmin,
-  showIconLibrary,
   buttonGroupRef,
   onSelectSvg,
   onUpload,
@@ -7128,7 +7226,7 @@ var SvgMediaOverlay = ({
       /* @__PURE__ */ React91.createElement(import_ui74.Box, { component: "span", sx: { display: "flex", width: "100%" } }, /* @__PURE__ */ React91.createElement(UploadControl, { isAdmin, onUpload }))
     )
   }
-), showIconLibrary ? /* @__PURE__ */ React91.createElement(
+), /* @__PURE__ */ React91.createElement(
   import_ui74.Button,
   {
     size: "tiny",
@@ -7144,7 +7242,7 @@ var SvgMediaOverlay = ({
     }
   },
   /* @__PURE__ */ React91.createElement(import_ui74.Typography, null, (0, import_i18n39.__)("Icon library", "elementor"))
-) : null);
+));
 var UploadControl = ({ isAdmin, onUpload }) => {
   if (isAdmin) {
     return /* @__PURE__ */ React91.createElement(MediaUploadButton, { onClick: onUpload });
@@ -7154,6 +7252,7 @@ var UploadControl = ({ isAdmin, onUpload }) => {
 
 // src/controls/svg-media-preview.tsx
 var React92 = __toESM(require("react"));
+var import_react58 = require("react");
 var import_ui75 = require("@elementor/ui");
 var import_i18n40 = require("@wordpress/i18n");
 var ICON_PREVIEW_SIZE = 50;
@@ -7161,21 +7260,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 = (0, import_react58.useMemo)(
+    () => 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(import_ui75.CircularProgress, { role: "progressbar" });
+    return /* @__PURE__ */ React92.createElement(import_ui75.CircularProgress, { role: "progressbar", "aria-label": (0, import_i18n40.__)("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) });
   }
@@ -7184,6 +7292,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 ?? "",
@@ -7196,7 +7316,7 @@ var toSvgMarkupIcon = (svgMarkup, library, value) => ({
   paths: [],
   svgMarkup
 });
-var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(import_ui75.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React92.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React92.createElement(import_ui75.Box, { sx: { color: ICON_PREVIEW_COLOR, minWidth: ICON_PREVIEW_SIZE, minHeight: ICON_PREVIEW_SIZE } }, /* @__PURE__ */ React92.createElement(
   FontAwesomeGlyph,
   {
     icon,
@@ -7254,7 +7374,7 @@ var StyledCardMediaContainer = (0, import_ui76.styled)(import_ui76.Stack)`
 `;
 var MODE_BROWSE = { mode: "browse" };
 var MODE_UPLOAD = { mode: "upload" };
-var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
+var SvgMediaControl = createControl(({ label }) => {
   const groupLabel = label ?? (0, import_i18n41.__)("SVG", "elementor");
   const { value: svgValue, setValue: setSvgValue, placeholder: svgPlaceholder } = useBoundProp(import_editor_props35.svgSrcPropTypeUtil);
   const { value: iconValue, setValue: setIconValue, placeholder: iconPlaceholder } = useBoundProp(import_editor_props35.iconPropTypeUtil);
@@ -7265,14 +7385,14 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
   const { data: attachment, isFetching } = (0, import_wp_media2.useWpMediaAttachment)(previewSvgValue?.id?.value || null);
   const src = attachment?.url ?? previewSvgValue?.url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react57.useState)(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react59.useState)(false);
   const iconLibraryPopoverState = (0, import_ui76.usePopupState)({ variant: "popover" });
-  const controlContainerRef = (0, import_react57.useRef)(null);
-  const buttonGroupRef = (0, import_react57.useRef)(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react57.useState)(null);
+  const controlContainerRef = (0, import_react59.useRef)(null);
+  const buttonGroupRef = (0, import_react59.useRef)(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react59.useState)(null);
   const { isAdmin } = (0, import_editor_current_user.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;
+  const selectedIconClass = typeof previewIconValue?.value?.value === "string" ? previewIconValue.value.value : null;
+  const selectedIconLibrary = typeof previewIconValue?.library?.value === "string" ? previewIconValue.library.value : null;
   const { open } = (0, import_wp_media2.useWpMediaFrame)({
     mediaTypes: ["svg"],
     multiple: false,
@@ -7321,7 +7441,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
     setIconLibraryAnchor(anchor);
     iconLibraryPopoverState.open(event);
   };
-  (0, import_react57.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!iconLibraryPopoverState.isOpen) {
       return;
     }
@@ -7337,7 +7457,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
     };
   }, [iconLibraryPopoverState.isOpen]);
   const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
-  return /* @__PURE__ */ React93.createElement(import_ui76.Stack, { gap: 1, "aria-label": (0, import_i18n41.__)("SVG control", "elementor") }, /* @__PURE__ */ React93.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React93.createElement(
+  return /* @__PURE__ */ React93.createElement(import_ui76.Stack, { gap: 1, "aria-label": (0, import_i18n41.__)("SVG control", "elementor") }, /* @__PURE__ */ React93.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), iconLibraryAnchor ? /* @__PURE__ */ React93.createElement(
     import_ui76.Popover,
     {
       disableScrollLock: true,
@@ -7397,7 +7517,6 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
         {
           label: groupLabel,
           isAdmin,
-          showIconLibrary,
           buttonGroupRef,
           onSelectSvg: handleSelectSvg,
           onUpload: handleUpload,
@@ -7603,7 +7722,7 @@ var BackgroundImageOverlayAttachment = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
 var React97 = __toESM(require("react"));
-var import_react58 = require("react");
+var import_react60 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons29 = require("@elementor/icons");
@@ -7625,7 +7744,7 @@ var BackgroundImageOverlayPosition = () => {
   const backgroundImageOffsetContext = useBoundProp(import_editor_props38.backgroundImagePositionOffsetPropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props38.stringPropTypeUtil);
   const isCustom = !!backgroundImageOffsetContext.value;
-  const rowRef = (0, import_react58.useRef)(null);
+  const rowRef = (0, import_react60.useRef)(null);
   const handlePositionChange = (event) => {
     const value = event.target.value || null;
     if (value === "custom") {
@@ -7698,7 +7817,7 @@ var BackgroundImageOverlayRepeat = () => {
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
 var React99 = __toESM(require("react"));
-var import_react59 = require("react");
+var import_react61 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
 var import_icons31 = require("@elementor/icons");
 var import_ui82 = require("@elementor/ui");
@@ -7733,7 +7852,7 @@ var BackgroundImageOverlaySize = () => {
   const backgroundImageScaleContext = useBoundProp(import_editor_props39.backgroundImageSizeScalePropTypeUtil);
   const stringPropContext = useBoundProp(import_editor_props39.stringPropTypeUtil);
   const isCustom = !!backgroundImageScaleContext.value;
-  const rowRef = (0, import_react59.useRef)(null);
+  const rowRef = (0, import_react61.useRef)(null);
   const handleSizeChange = (size) => {
     if (size === "custom") {
       backgroundImageScaleContext.setValue({ width: null, height: null });
@@ -7768,7 +7887,7 @@ var BackgroundImageOverlaySize = () => {
 };
 
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
-var import_react60 = require("react");
+var import_react62 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
 var import_ui83 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
@@ -7789,7 +7908,7 @@ var useBackgroundTabsHistory = ({
     return "image";
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui83.useTabs)(getCurrentOverlayType());
-  const valuesHistory = (0, import_react60.useRef)({
+  const valuesHistory = (0, import_react62.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
     gradient: initialBackgroundGradientOverlay2
@@ -8040,7 +8159,7 @@ var BackgroundClipField = () => {
 
 // src/controls/repeatable-control.tsx
 var React102 = __toESM(require("react"));
-var import_react61 = require("react");
+var import_react63 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
 var import_ui86 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
@@ -8061,11 +8180,11 @@ var RepeatableControl = createControl(
     if (!childPropTypeUtil) {
       return null;
     }
-    const childArrayPropTypeUtil2 = (0, import_react61.useMemo)(
+    const childArrayPropTypeUtil2 = (0, import_react63.useMemo)(
       () => (0, import_editor_props43.createArrayPropUtils)(childPropTypeUtil.key, childPropTypeUtil.schema, propKey),
       [childPropTypeUtil.key, childPropTypeUtil.schema, propKey]
     );
-    const contextValue = (0, import_react61.useMemo)(
+    const contextValue = (0, import_react63.useMemo)(
       () => ({
         ...childControlConfig,
         placeholder: placeholder || "",
@@ -8197,7 +8316,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 var React103 = __toESM(require("react"));
-var import_react62 = require("react");
+var import_react64 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
 var import_ui87 = require("@elementor/ui");
 var import_i18n49 = require("@wordpress/i18n");
@@ -8224,9 +8343,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props44.keyValuePropTypeUtil);
-  const [keyError, setKeyError] = (0, import_react62.useState)("");
-  const [valueError, setValueError] = (0, import_react62.useState)("");
-  const [sessionState, setSessionState] = (0, import_react62.useState)({
+  const [keyError, setKeyError] = (0, import_react64.useState)("");
+  const [valueError, setValueError] = (0, import_react64.useState)("");
+  const [sessionState, setSessionState] = (0, import_react64.useState)({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -8236,7 +8355,7 @@ var KeyValueControl = createControl((props = {}) => {
     keyHelper: void 0,
     valueHelper: void 0
   };
-  const [keyRegex, valueRegex, errMsg] = (0, import_react62.useMemo)(
+  const [keyRegex, valueRegex, errMsg] = (0, import_react64.useMemo)(
     () => [
       props.regexKey ? new RegExp(props.regexKey) : void 0,
       props.regexValue ? new RegExp(props.regexValue) : void 0,
@@ -8368,7 +8487,7 @@ var PositionControl = () => {
 
 // src/controls/transform-control/transform-repeater-control.tsx
 var React117 = __toESM(require("react"));
-var import_react70 = require("react");
+var import_react72 = require("react");
 var import_editor_props54 = require("@elementor/editor-props");
 var import_icons39 = require("@elementor/icons");
 var import_ui101 = require("@elementor/ui");
@@ -8427,7 +8546,7 @@ var import_i18n55 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
 var React106 = __toESM(require("react"));
-var import_react63 = require("react");
+var import_react65 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
 var import_ui90 = require("@elementor/ui");
@@ -8474,7 +8593,7 @@ var moveAxisControls = [
 ];
 var Move = () => {
   const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
-  const rowRefs = [(0, import_react63.useRef)(null), (0, import_react63.useRef)(null), (0, import_react63.useRef)(null)];
+  const rowRefs = [(0, import_react65.useRef)(null), (0, import_react65.useRef)(null), (0, import_react65.useRef)(null)];
   return /* @__PURE__ */ React106.createElement(import_ui90.Grid, { 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,
     {
@@ -8489,7 +8608,7 @@ var Move = () => {
 
 // src/controls/transform-control/functions/rotate.tsx
 var React107 = __toESM(require("react"));
-var import_react64 = require("react");
+var import_react66 = require("react");
 var import_editor_props48 = require("@elementor/editor-props");
 var import_icons34 = require("@elementor/icons");
 var import_ui91 = require("@elementor/ui");
@@ -8514,7 +8633,7 @@ var rotateAxisControls = [
 var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
-  const rowRefs = [(0, import_react64.useRef)(null), (0, import_react64.useRef)(null), (0, import_react64.useRef)(null)];
+  const rowRefs = [(0, import_react66.useRef)(null), (0, import_react66.useRef)(null), (0, import_react66.useRef)(null)];
   return /* @__PURE__ */ React107.createElement(import_ui91.Grid, { 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,
     {
@@ -8528,7 +8647,7 @@ var Rotate = () => {
 
 // src/controls/transform-control/functions/scale.tsx
 var React109 = __toESM(require("react"));
-var import_react65 = require("react");
+var import_react67 = require("react");
 var import_editor_props49 = require("@elementor/editor-props");
 var import_icons35 = require("@elementor/icons");
 var import_ui93 = require("@elementor/ui");
@@ -8561,13 +8680,13 @@ var scaleAxisControls = [
 ];
 var Scale = () => {
   const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
-  const rowRefs = [(0, import_react65.useRef)(null), (0, import_react65.useRef)(null), (0, import_react65.useRef)(null)];
+  const rowRefs = [(0, import_react67.useRef)(null), (0, import_react67.useRef)(null), (0, import_react67.useRef)(null)];
   return /* @__PURE__ */ React109.createElement(import_ui93.Grid, { 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
 var React110 = __toESM(require("react"));
-var import_react66 = require("react");
+var import_react68 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons36 = require("@elementor/icons");
 var import_ui94 = require("@elementor/ui");
@@ -8587,7 +8706,7 @@ var skewAxisControls = [
 var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
-  const rowRefs = [(0, import_react66.useRef)(null), (0, import_react66.useRef)(null), (0, import_react66.useRef)(null)];
+  const rowRefs = [(0, import_react68.useRef)(null), (0, import_react68.useRef)(null), (0, import_react68.useRef)(null)];
   return /* @__PURE__ */ React110.createElement(import_ui94.Grid, { 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,
     {
@@ -8600,7 +8719,7 @@ var Skew = () => {
 };
 
 // src/controls/transform-control/use-transform-tabs-history.tsx
-var import_react67 = require("react");
+var import_react69 = require("react");
 var import_editor_props51 = require("@elementor/editor-props");
 var import_ui95 = require("@elementor/ui");
 var useTransformTabsHistory = ({
@@ -8627,7 +8746,7 @@ var useTransformTabsHistory = ({
     }
   };
   const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui95.useTabs)(getCurrentTransformType());
-  const valuesHistory = (0, import_react67.useRef)({
+  const valuesHistory = (0, import_react69.useRef)({
     move: initialMove,
     scale: initialScale,
     rotate: initialRotate,
@@ -8771,7 +8890,7 @@ var import_i18n59 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 var React114 = __toESM(require("react"));
-var import_react68 = require("react");
+var import_react70 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
 var import_ui98 = require("@elementor/ui");
 var import_i18n57 = require("@wordpress/i18n");
@@ -8803,13 +8922,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 = (0, import_react68.useRef)(null);
+  const rowRef = (0, import_react70.useRef)(null);
   return /* @__PURE__ */ React114.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React114.createElement(import_ui98.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React114.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React114.createElement(import_ui98.Grid, { 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
 var React115 = __toESM(require("react"));
-var import_react69 = require("react");
+var import_react71 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
 var import_ui99 = require("@elementor/ui");
 var import_i18n58 = require("@wordpress/i18n");
@@ -8837,7 +8956,7 @@ var TransformOriginControl = () => {
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
-  const rowRef = (0, import_react69.useRef)(null);
+  const rowRef = (0, import_react71.useRef)(null);
   return /* @__PURE__ */ React115.createElement(PropProvider, { ...context }, /* @__PURE__ */ React115.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React115.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React115.createElement(import_ui99.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React115.createElement(import_ui99.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React115.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
@@ -8885,7 +9004,7 @@ var SIZE11 = "tiny";
 var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
-    const headerRef = (0, import_react70.useRef)(null);
+    const headerRef = (0, import_react72.useRef)(null);
     const popupState = (0, import_ui101.usePopupState)({ variant: "popover" });
     return /* @__PURE__ */ React117.createElement(PropProvider, { ...context }, /* @__PURE__ */ React117.createElement(
       TransformSettingsControl,
@@ -8965,7 +9084,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 var React120 = __toESM(require("react"));
-var import_react73 = require("react");
+var import_react75 = require("react");
 var import_editor_props57 = require("@elementor/editor-props");
 var import_icons41 = require("@elementor/icons");
 var import_ui104 = require("@elementor/ui");
@@ -8974,15 +9093,15 @@ var import_i18n63 = require("@wordpress/i18n");
 
 // src/controls/selection-size-control.tsx
 var React118 = __toESM(require("react"));
-var import_react71 = require("react");
+var import_react73 = require("react");
 var import_editor_props55 = require("@elementor/editor-props");
 var import_ui102 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
-    const rowRef = (0, import_react71.useRef)(null);
+    const rowRef = (0, import_react73.useRef)(null);
     const sizeFieldId = sizeLabel.replace(/\s+/g, "-").toLowerCase();
-    const currentSizeConfig = (0, import_react71.useMemo)(() => {
+    const currentSizeConfig = (0, import_react73.useMemo)(() => {
       switch (value.selection.$$type) {
         case "key-value":
           return sizeConfigMap[value?.selection?.value.value.value || ""];
@@ -9195,7 +9314,7 @@ function subscribeToTransitionEvent() {
 
 // src/controls/transition-control/transition-selector.tsx
 var React119 = __toESM(require("react"));
-var import_react72 = require("react");
+var import_react74 = require("react");
 var import_editor_props56 = require("@elementor/editor-props");
 var import_editor_ui17 = require("@elementor/editor-ui");
 var import_icons40 = require("@elementor/icons");
@@ -9241,9 +9360,9 @@ var TransitionSelector = ({
   const {
     key: { value: transitionLabel }
   } = value;
-  const defaultRef = (0, import_react72.useRef)(null);
+  const defaultRef = (0, import_react74.useRef)(null);
   const popoverState = (0, import_ui103.usePopupState)({ variant: "popover" });
-  const disabledCategories = (0, import_react72.useMemo)(() => {
+  const disabledCategories = (0, import_react74.useMemo)(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
     );
@@ -9469,14 +9588,14 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react73.useState)([]);
+    const [recentlyUsedList, setRecentlyUsedList] = (0, import_react75.useState)([]);
     const proInstalled = (0, import_utils8.hasProInstalled)();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
-    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react73.useMemo)(
+    const { allDisabled: disabledItems, proDisabled: proDisabledItems } = (0, import_react75.useMemo)(
       () => getDisabledItemLabels(value),
       [value]
     );
-    const allowedTransitionSet = (0, import_react73.useMemo)(() => {
+    const allowedTransitionSet = (0, import_react75.useMemo)(() => {
       const set = /* @__PURE__ */ new Set();
       transitionProperties.forEach((category) => {
         category.properties.forEach((prop) => {
@@ -9487,7 +9606,7 @@ var TransitionRepeaterControl = createControl(
       });
       return set;
     }, [proInstalled]);
-    (0, import_react73.useEffect)(() => {
+    (0, import_react75.useEffect)(() => {
       if (!value || value.length === 0) {
         return;
       }
@@ -9499,10 +9618,10 @@ var TransitionRepeaterControl = createControl(
         setValue(sanitized);
       }
     }, [allowedTransitionSet]);
-    (0, import_react73.useEffect)(() => {
+    (0, import_react75.useEffect)(() => {
       recentlyUsedListGetter().then(setRecentlyUsedList);
     }, [recentlyUsedListGetter]);
-    const allPropertiesUsed = (0, import_react73.useMemo)(() => areAllPropertiesUsed(value), [value]);
+    const allPropertiesUsed = (0, import_react75.useMemo)(() => areAllPropertiesUsed(value), [value]);
     const isAddItemDisabled = !currentStyleIsNormal || allPropertiesUsed;
     return /* @__PURE__ */ React120.createElement(
       RepeatableControl,
@@ -9785,13 +9904,13 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 var React129 = __toESM(require("react"));
-var import_react79 = require("react");
+var import_react81 = require("react");
 var import_editor_props65 = require("@elementor/editor-props");
 var import_ui113 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
 var React126 = __toESM(require("react"));
-var import_react74 = require("react");
+var import_react76 = require("react");
 var import_ui110 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
@@ -9805,7 +9924,7 @@ var import_extension_subscript = __toESM(require("@tiptap/extension-subscript"))
 var import_extension_superscript = __toESM(require("@tiptap/extension-superscript"));
 var import_extension_text = __toESM(require("@tiptap/extension-text"));
 var import_extension_underline = __toESM(require("@tiptap/extension-underline"));
-var import_react75 = require("@tiptap/react");
+var import_react77 = require("@tiptap/react");
 
 // src/utils/inline-editing.ts
 var import_editor_props64 = require("@elementor/editor-props");
@@ -9854,8 +9973,8 @@ var InlineEditor = React126.forwardRef((props, ref) => {
     onSelectionEnd,
     mountElement = null
   } = props;
-  const containerRef = (0, import_react74.useRef)(null);
-  const onBlurRef = (0, import_react74.useRef)(onBlur);
+  const containerRef = (0, import_react76.useRef)(null);
+  const onBlurRef = (0, import_react76.useRef)(onBlur);
   onBlurRef.current = onBlur;
   const documentContentSettings = !!expectedTag ? "block+" : "inline*";
   const onUpdate = ({ editor: updatedEditor }) => {
@@ -9877,7 +9996,7 @@ var InlineEditor = React126.forwardRef((props, ref) => {
     ...HTMLAttributes,
     class: elementClasses
   });
-  const editor = (0, import_react75.useEditor)({
+  const editor = (0, import_react77.useEditor)({
     ...mountElement ? { element: mountElement } : {},
     extensions: [
       import_extension_document.default.extend({
@@ -9950,11 +10069,11 @@ var InlineEditor = React126.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React126.createElement(import_ui110.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React126.createElement(import_react75.EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React126.createElement(import_ui110.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React126.createElement(import_react77.EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
-  const hasMounted = (0, import_react74.useRef)(false);
-  (0, import_react74.useEffect)(() => {
+  const hasMounted = (0, import_react76.useRef)(false);
+  (0, import_react76.useEffect)(() => {
     if (hasMounted.current) {
       callback();
     } else {
@@ -9965,16 +10084,16 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 var React128 = __toESM(require("react"));
-var import_react77 = require("react");
+var import_react79 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_icons43 = require("@elementor/icons");
 var import_ui112 = require("@elementor/ui");
-var import_react78 = require("@tiptap/react");
+var import_react80 = require("@tiptap/react");
 var import_i18n67 = require("@wordpress/i18n");
 
 // src/components/url-popover.tsx
 var React127 = __toESM(require("react"));
-var import_react76 = require("react");
+var import_react78 = require("react");
 var import_icons42 = require("@elementor/icons");
 var import_ui111 = require("@elementor/ui");
 var import_i18n66 = require("@wordpress/i18n");
@@ -9987,8 +10106,8 @@ var UrlPopover = ({
   openInNewTab,
   onToggleNewTab
 }) => {
-  const inputRef = (0, import_react76.useRef)(null);
-  (0, import_react76.useEffect)(() => {
+  const inputRef = (0, import_react78.useRef)(null);
+  (0, import_react78.useEffect)(() => {
     if (popupState.isOpen) {
       requestAnimationFrame(() => inputRef.current?.focus());
     }
@@ -10043,16 +10162,16 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = (0, import_react77.useState)("");
-  const [openInNewTab, setOpenInNewTab] = (0, import_react77.useState)(false);
-  const toolbarRef = (0, import_react77.useRef)(null);
+  const [urlValue, setUrlValue] = (0, import_react79.useState)("");
+  const [openInNewTab, setOpenInNewTab] = (0, import_react79.useState)(false);
+  const toolbarRef = (0, import_react79.useRef)(null);
   const linkPopupState = (0, import_ui112.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
-  const editorState = (0, import_react78.useEditorState)({
+  const editorState = (0, import_react80.useEditorState)({
     editor,
     selector: (ctx) => possibleFormats.filter((format) => ctx.editor.isActive(format))
   });
-  const formatButtonsList = (0, import_react77.useMemo)(() => {
+  const formatButtonsList = (0, import_react79.useMemo)(() => {
     const buttons = Object.values(formatButtons);
     if (isElementClickable) {
       return buttons.filter((button) => button.action !== "link");
@@ -10089,7 +10208,7 @@ var InlineEditorToolbar = ({
     }
     linkPopupState.close();
   };
-  (0, import_react77.useEffect)(() => {
+  (0, import_react79.useEffect)(() => {
     if (!inControlPanel) {
       editor?.commands?.focus();
     }
@@ -10271,8 +10390,8 @@ var InlineEditingControl = createControl(
     const { setValue, placeholder, value } = useBoundProp(import_editor_props65.escapedHtmlPropTypeUtil);
     const { value: rawValue } = usePropKeyContext();
     const content = value ?? extractInlineHtmlContent(rawValue);
-    const [editor, setEditor] = (0, import_react79.useState)(null);
-    const handleChange = (0, import_react79.useCallback)(
+    const [editor, setEditor] = (0, import_react81.useState)(null);
+    const handleChange = (0, import_react81.useCallback)(
       (newValue) => {
         const html = newValue ?? "";
         setValue(html);
@@ -10459,7 +10578,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 var React130 = __toESM(require("react"));
-var import_react80 = require("react");
+var import_react82 = require("react");
 var import_editor_props67 = require("@elementor/editor-props");
 var import_ui114 = require("@elementor/ui");
 
@@ -10497,10 +10616,10 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(import_editor_props67.stringArrayPropTypeUtil);
-  const [inputValue, setInputValue] = (0, import_react80.useState)("");
+  const [inputValue, setInputValue] = (0, import_react82.useState)("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => import_editor_props67.stringPropTypeUtil.extract(item)).filter((val) => val !== null);
-  const suggestionOptions = (0, import_react80.useMemo)(
+  const suggestionOptions = (0, import_react82.useMemo)(
     () => suggestions.map((suggestion) => `[${suggestion.value}]`),
     [suggestions]
   );
@@ -10728,24 +10847,24 @@ var GridSpanControl = createControl(
 
 // src/components/promotions/display-conditions-control.tsx
 var React137 = __toESM(require("react"));
-var import_react82 = require("react");
+var import_react84 = require("react");
 var import_icons44 = require("@elementor/icons");
 var import_ui121 = require("@elementor/ui");
 var import_i18n71 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React136 = __toESM(require("react"));
-var import_react81 = require("react");
+var import_react83 = require("react");
 var import_editor_ui21 = require("@elementor/editor-ui");
 var import_ui120 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
-var PromotionTrigger = (0, import_react81.forwardRef)(
+var PromotionTrigger = (0, import_react83.forwardRef)(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react81.useState)(false);
+    const [isOpen, setIsOpen] = (0, import_react83.useState)(false);
     const promotion = getV4Promotion(promotionKey);
-    const toggle = (0, import_react81.useCallback)(() => {
+    const toggle = (0, import_react83.useCallback)(() => {
       setIsOpen((prev) => {
         if (!prev) {
           trackViewPromotion(trackingData);
@@ -10753,7 +10872,7 @@ var PromotionTrigger = (0, import_react81.forwardRef)(
         return !prev;
       });
     }, [trackingData]);
-    (0, import_react81.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
+    (0, import_react83.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     return /* @__PURE__ */ React136.createElement(React136.Fragment, null, promotion && /* @__PURE__ */ React136.createElement(
       import_editor_ui21.PromotionInfotip,
       {
@@ -10787,7 +10906,7 @@ var PromotionTrigger = (0, import_react81.forwardRef)(
 var ARIA_LABEL = (0, import_i18n71.__)("Display Conditions", "elementor");
 var TRACKING_DATA2 = { target_name: "display_conditions", location_l2: "general" };
 var DisplayConditionsControl = createControl(() => {
-  const triggerRef = (0, import_react82.useRef)(null);
+  const triggerRef = (0, import_react84.useRef)(null);
   return /* @__PURE__ */ React137.createElement(
     import_ui121.Stack,
     {
@@ -10819,14 +10938,14 @@ var DisplayConditionsControl = createControl(() => {
 
 // src/components/promotions/attributes-control.tsx
 var React138 = __toESM(require("react"));
-var import_react83 = require("react");
+var import_react85 = require("react");
 var import_icons45 = require("@elementor/icons");
 var import_ui122 = require("@elementor/ui");
 var import_i18n72 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n72.__)("Attributes", "elementor");
 var TRACKING_DATA3 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
-  const triggerRef = (0, import_react83.useRef)(null);
+  const triggerRef = (0, import_react85.useRef)(null);
   return /* @__PURE__ */ React138.createElement(
     import_ui122.Stack,
     {
@@ -10863,7 +10982,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 var React140 = __toESM(require("react"));
-var import_react84 = require("react");
+var import_react86 = require("react");
 var import_icons47 = require("@elementor/icons");
 var import_ui124 = require("@elementor/ui");
 var import_i18n73 = require("@wordpress/i18n");
@@ -10885,7 +11004,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = (0, import_react84.useState)(initialOpenItem);
+  const [openItem, setOpenItem] = (0, import_react86.useState)(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -11061,10 +11180,10 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React140.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React140.createElement(import_ui124.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = (0, import_react84.useState)(null);
+  const [ref, setRef] = (0, import_react86.useState)(null);
   const popoverState = (0, import_ui124.usePopupState)({ variant: "popover" });
   const popoverProps = (0, import_ui124.bindPopover)(popoverState);
-  (0, import_react84.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
       onOpen?.();
@@ -11127,7 +11246,7 @@ var differsFromExternal = (newState, externalState) => {
 
 // src/components/size/unit-select.tsx
 var React141 = __toESM(require("react"));
-var import_react85 = require("react");
+var import_react87 = require("react");
 var import_editor_ui22 = require("@elementor/editor-ui");
 var import_ui125 = require("@elementor/ui");
 var menuItemContentStyles2 = {
@@ -11138,7 +11257,7 @@ var menuItemContentStyles2 = {
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
   const popupState = (0, import_ui125.usePopupState)({
     variant: "popover",
-    popupId: (0, import_react85.useId)()
+    popupId: (0, import_react87.useId)()
   });
   const handleMenuItemClick = (index) => {
     onClick(options[index]);
@@ -11174,8 +11293,8 @@ var StyledButton3 = (0, import_ui125.styled)(import_ui125.Button, {
 
 // src/components/size/unstable-size-input.tsx
 var React142 = __toESM(require("react"));
-var import_react86 = require("react");
-var UnstableSizeInput = (0, import_react86.forwardRef)(
+var import_react88 = require("react");
+var UnstableSizeInput = (0, import_react88.forwardRef)(
   ({ type, value, onChange, onKeyDown, onKeyUp, InputProps, onBlur, focused, disabled }, ref) => {
     return /* @__PURE__ */ React142.createElement(
       NumberInput,
@@ -11243,7 +11362,7 @@ var hasValue = (value) => {
 };
 
 // src/hooks/use-font-families.ts
-var import_react87 = require("react");
+var import_react89 = require("react");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var getFontControlConfig = () => {
   const { controls } = (0, import_editor_v1_adapters5.getElementorConfig)();
@@ -11251,7 +11370,7 @@ var getFontControlConfig = () => {
 };
 var useFontFamilies = () => {
   const { groups, options } = getFontControlConfig();
-  return (0, import_react87.useMemo)(() => {
+  return (0, import_react89.useMemo)(() => {
     if (!groups || !options) {
       return [];
     }
@@ -11362,6 +11481,7 @@ var useFontFamilies = () => {
   registerIconLibraryProvider,
   resetFontAwesome7IconsCache,
   resolveFontAwesome7Icon,
+  resolveProviderIconPreviewSvg,
   resolveProviderIconSvg,
   trackUpgradePromotionClick,
   trackViewPromotion,