@elementor/editor-controls 4.4.0-1135 → 4.4.0-1137

package/dist/index.mjs

@@ -5664,7 +5664,7 @@ var AspectRatioControl = createControl(({ label }) => {
 
 // src/controls/svg-media-control.tsx
 import * as React92 from "react";
-import { useEffect as useEffect17, useRef as useRef18, useState as useState21 } from "react";
+import { useEffect as useEffect17, useRef as useRef18, useState as useState22 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
 import { Box as Box23, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack18, styled as styled12, usePopupState as usePopupState9 } from "@elementor/ui";
@@ -5748,7 +5748,7 @@ function measureIconLibraryAnchor(container, buttonGroup) {
 
 // src/controls/icon-library/icon-library-popover.tsx
 import * as React89 from "react";
-import { useMemo as useMemo12, useState as useState20 } from "react";
+import { useMemo as useMemo12, useState as useState21 } from "react";
 import {
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader4,
@@ -5762,599 +5762,6 @@ import { Box as Box20, CircularProgress as CircularProgress3, Divider as Divider
 import { useDebounceState } from "@elementor/utils";
 import { __ as __37 } from "@wordpress/i18n";
 
-// src/controls/icon-library/custom-icon-libraries.ts
-import { httpService as httpService3 } from "@elementor/http-client";
-import { useQuery as useQuery2 } from "@elementor/query";
-
-// src/controls/open-icon-library.ts
-import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
-function enqueueIconFonts(library) {
-  window.elementor?.helpers?.enqueueIconFonts?.(library);
-}
-function createIconPropValue(icon, library) {
-  return {
-    value: stringPropTypeUtil14.create(icon),
-    library: stringPropTypeUtil14.create(library)
-  };
-}
-
-// src/controls/icon-library/fontello-svg-font.ts
-function parseFontelloSvgFont(configJson, svgFont, prefix, displayPrefix, iconNames) {
-  const codepoints = parseConfigCodepoints(configJson, prefix);
-  const configPaths = parseConfigSvgPaths(configJson, prefix);
-  const glyphs = parseSvgFontGlyphs(svgFont);
-  const resolvedDisplayPrefix = displayPrefix || prefix.replace(/-$/, "");
-  const result = {};
-  for (const name of iconNames) {
-    const fromConfig = configPaths.get(name) ?? (prefix && name.startsWith(prefix) ? configPaths.get(name.slice(prefix.length)) : void 0);
-    const glyph = fromConfig ?? findGlyph(glyphs, codepoints, name, prefix);
-    if (!glyph) {
-      continue;
-    }
-    const value = `${resolvedDisplayPrefix} ${prefix}${name}`.trim();
-    result[value] = buildIconSvg(glyph);
-  }
-  return result;
-}
-function parseConfigCodepoints(configJson, prefix) {
-  const map = /* @__PURE__ */ new Map();
-  try {
-    const data = JSON.parse(configJson);
-    if (!Array.isArray(data.glyphs)) {
-      return map;
-    }
-    for (const glyph of data.glyphs) {
-      if (typeof glyph.css !== "string" || glyph.css === "" || typeof glyph.code !== "number") {
-        continue;
-      }
-      map.set(glyph.css, glyph.code);
-      if (prefix !== "" && !glyph.css.startsWith(prefix)) {
-        map.set(`${prefix}${glyph.css}`, glyph.code);
-      }
-    }
-  } catch {
-    return map;
-  }
-  return map;
-}
-function parseConfigSvgPaths(configJson, prefix) {
-  const map = /* @__PURE__ */ new Map();
-  try {
-    const data = JSON.parse(configJson);
-    if (!Array.isArray(data.glyphs)) {
-      return map;
-    }
-    for (const glyph of data.glyphs) {
-      if (typeof glyph.css !== "string" || glyph.css === "") {
-        continue;
-      }
-      let path = "";
-      let advance = 1e3;
-      if (typeof glyph.svg === "string") {
-        path = glyph.svg;
-      } else if (glyph.svg && typeof glyph.svg === "object" && "path" in glyph.svg && typeof glyph.svg.path === "string") {
-        path = glyph.svg.path;
-        if ("width" in glyph.svg && typeof glyph.svg.width === "number" && glyph.svg.width > 0) {
-          advance = glyph.svg.width;
-        }
-      }
-      if (path === "") {
-        continue;
-      }
-      const record = { d: path, units: 1e3, advance };
-      map.set(glyph.css, record);
-      if (prefix !== "" && !glyph.css.startsWith(prefix)) {
-        map.set(`${prefix}${glyph.css}`, record);
-      }
-    }
-  } catch {
-    return map;
-  }
-  return map;
-}
-function parseSvgFontGlyphs(svgFont) {
-  const byName = /* @__PURE__ */ new Map();
-  const byCode = /* @__PURE__ */ new Map();
-  const doc = new DOMParser().parseFromString(stripDoctype(svgFont), "image/svg+xml");
-  const font = doc.querySelector("font");
-  const face = doc.querySelector("font-face");
-  const fontAdvance = positiveInt(font?.getAttribute("horiz-adv-x"), 1e3);
-  const units2 = positiveInt(face?.getAttribute("units-per-em"), fontAdvance);
-  doc.querySelectorAll("glyph").forEach((node) => {
-    const d = node.getAttribute("d") ?? "";
-    if (d === "") {
-      return;
-    }
-    const record = {
-      d,
-      units: units2,
-      advance: positiveInt(node.getAttribute("horiz-adv-x"), fontAdvance)
-    };
-    const name = node.getAttribute("glyph-name") ?? "";
-    const unicode = node.getAttribute("unicode") ?? "";
-    const code = unicode.codePointAt(0);
-    if (name) {
-      byName.set(name, record);
-    }
-    if (code !== void 0) {
-      byCode.set(code, record);
-    }
-  });
-  return { byName, byCode };
-}
-function findGlyph(glyphs, codepoints, iconName, prefix) {
-  const names = [iconName];
-  if (prefix !== "" && iconName.startsWith(prefix)) {
-    names.push(iconName.slice(prefix.length));
-  }
-  for (const name of names) {
-    const byName = glyphs.byName.get(name);
-    if (byName) {
-      return byName;
-    }
-    const code = codepoints.get(name);
-    const byCode = code !== void 0 ? glyphs.byCode.get(code) : void 0;
-    if (byCode) {
-      return byCode;
-    }
-  }
-  return null;
-}
-function buildIconSvg(glyph) {
-  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${glyph.advance} ${glyph.units}" fill="currentColor" width="100%" height="100%"><g transform="translate(0,${glyph.units}) scale(1,-1)"><path d="${escapeAttribute(glyph.d)}" fill="currentColor"></path></g></svg>`;
-}
-function stripDoctype(svgFont) {
-  return svgFont.replace(/<!DOCTYPE[^>]*>/is, "");
-}
-function positiveInt(value, fallback) {
-  if (!value) {
-    return fallback;
-  }
-  const parsed = Number.parseInt(value, 10);
-  return parsed > 0 ? parsed : fallback;
-}
-function escapeAttribute(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-// src/controls/icon-library/icomoon-selection.ts
-var DEFAULT_ICOMOON_VIEWBOX = 1024;
-function parseIcomoonSelection(selectionJson, prefix, displayPrefix, iconNames) {
-  let data;
-  try {
-    data = JSON.parse(selectionJson);
-  } catch {
-    return {};
-  }
-  const resolvedDisplayPrefix = displayPrefix || prefix.replace(/-$/, "");
-  const names = iconNames.length > 0 ? iconNames : namesFromSelection(data);
-  const result = {};
-  for (const name of names) {
-    const markup = svgForName(data, name, prefix);
-    if (!markup) {
-      continue;
-    }
-    result[`${resolvedDisplayPrefix} ${prefix}${name}`.trim()] = markup;
-  }
-  return result;
-}
-function namesFromSelection(data) {
-  if (!Array.isArray(data.icons)) {
-    return [];
-  }
-  return data.icons.flatMap((icon) => {
-    const name = iconEntryName(icon);
-    return name ? [name] : [];
-  });
-}
-function svgForName(data, iconName, prefix) {
-  const candidates = [iconName];
-  if (prefix && iconName.startsWith(prefix)) {
-    candidates.push(iconName.slice(prefix.length));
-  }
-  for (const icon of data.icons ?? []) {
-    const name = iconEntryName(icon);
-    if (!name || !candidates.includes(name)) {
-      continue;
-    }
-    const paths = Array.isArray(icon.icon?.paths) ? icon.icon.paths.filter((path) => typeof path === "string" && path !== "") : [];
-    if (paths.length === 0) {
-      return null;
-    }
-    const size = typeof icon.icon?.width === "number" && icon.icon.width > 0 ? icon.icon.width : DEFAULT_ICOMOON_VIEWBOX;
-    const pathMarkup = paths.map((d) => `<path d="${escapeAttribute2(d)}" fill="currentColor"></path>`).join("");
-    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${size} ${size}" fill="currentColor" width="100%" height="100%">` + pathMarkup + "</svg>";
-  }
-  return null;
-}
-function iconEntryName(icon) {
-  if (typeof icon.properties?.name === "string") {
-    return icon.properties.name;
-  }
-  const tag = icon.icon?.tags;
-  return Array.isArray(tag) && typeof tag[0] === "string" ? tag[0] : "";
-}
-function escapeAttribute2(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-
-// src/controls/icon-library/custom-icon-libraries.ts
-var NATIVE_TAB_NAMES = /* @__PURE__ */ new Set(["all", "recommended", "GoPro"]);
-var DEFAULT_ICON_SIZE = 512;
-var CUSTOM_ICON_LIBRARIES_QUERY_KEY = ["custom-icon-libraries"];
-var CUSTOM_ICON_SVG_URL = "elementor/v1/atomic-widgets/custom-icon-svg";
-var SUPPORTED_CUSTOM_ICON_TYPES = /* @__PURE__ */ new Set(["fontello", "icomoon", "fontastic"]);
-var svgMapCache = /* @__PURE__ */ new Map();
-var inFlightSvgMaps = /* @__PURE__ */ new Map();
-function isDeletedCustomIconLibrary(library, iconValue) {
-  const libraryName = String(library);
-  if (!libraryName || !iconValue) {
-    return false;
-  }
-  if (NATIVE_TAB_NAMES.has(libraryName) || libraryName.startsWith("fa-")) {
-    return false;
-  }
-  return !getCustomIconLibraryConfigs().some((item) => item.name === libraryName);
-}
-function useCustomIconLibraries(enabled) {
-  return useQuery2({
-    queryKey: CUSTOM_ICON_LIBRARIES_QUERY_KEY,
-    queryFn: ({ signal }) => loadCustomIconLibraries(signal),
-    enabled: enabled && areCustomIconLibrariesEnabled(),
-    staleTime: Infinity
-  });
-}
-async function loadCustomIconLibraries(signal) {
-  const catalogs = await Promise.all(
-    getCustomIconLibraryConfigs().map((library) => loadCustomLibrary(library, signal))
-  );
-  return catalogs.flat();
-}
-async function resolveCustomIconSvg(library, iconValue, signal) {
-  const config = getCustomIconLibraryConfigs().find((item) => item.name === String(library));
-  if (!config) {
-    svgMapCache.delete(String(library));
-    return null;
-  }
-  const map = await loadLibrarySvgMap(String(library), config, signal);
-  const markup = map[iconValue];
-  return typeof markup === "string" && markup !== "" ? markup : null;
-}
-function areCustomIconLibrariesEnabled() {
-  return true === window.elementorCommon?.config?.fontAwesome?.v7?.customIconLibrariesEnabled;
-}
-function getCustomIconLibraryConfigs() {
-  if (!areCustomIconLibrariesEnabled()) {
-    return [];
-  }
-  const libraries = window.elementor?.config;
-  const items2 = Array.isArray(libraries?.icons?.libraries) ? libraries.icons.libraries : [];
-  return items2.flatMap((value) => {
-    const library = normalizeCustomIconLibraryConfig(value);
-    return library ? [library] : [];
-  });
-}
-function normalizeCustomIconLibraryConfig(value) {
-  if (!value || typeof value !== "object") {
-    return null;
-  }
-  const library = value;
-  const name = coerceLibraryName(library.name);
-  if (name === "" || NATIVE_TAB_NAMES.has(name) || library.native === true || name.startsWith("fa-")) {
-    return null;
-  }
-  if (typeof library.prefix !== "string") {
-    return null;
-  }
-  if (!library.fetchJson && library.icons === void 0) {
-    return null;
-  }
-  const resolved = {
-    ...library,
-    name,
-    prefix: library.prefix,
-    ...getPackUrls(name, library)
-  };
-  if (!resolveCustomIconType(resolved)) {
-    return null;
-  }
-  return resolved;
-}
-function coerceLibraryName(value) {
-  if (typeof value === "string") {
-    return value;
-  }
-  if (typeof value === "number" && Number.isFinite(value)) {
-    return String(value);
-  }
-  return "";
-}
-function getPackUrls(library, config) {
-  const derived = derivePackAssetUrls(config.fetchJson, resolveCustomIconType(config));
-  const packs = window.elementorCommon?.config?.fontAwesome?.v7?.customIconPacks;
-  if (!packs || typeof packs !== "object") {
-    return derived;
-  }
-  const pack = packs[library];
-  if (!pack || typeof pack !== "object") {
-    return derived;
-  }
-  const packType = typeof pack.type === "string" ? pack.type : config.custom_icon_type;
-  return {
-    ...derived,
-    configUrl: typeof pack.configUrl === "string" ? pack.configUrl : derived.configUrl,
-    fontUrl: typeof pack.fontUrl === "string" ? pack.fontUrl : derived.fontUrl,
-    selectionUrl: typeof pack.selectionUrl === "string" ? pack.selectionUrl : derived.selectionUrl,
-    custom_icon_type: packType ?? derived.custom_icon_type
-  };
-}
-function resolveCustomIconType(library) {
-  const type = typeof library.custom_icon_type === "string" ? library.custom_icon_type.toLowerCase() : "";
-  return SUPPORTED_CUSTOM_ICON_TYPES.has(type) ? type : "";
-}
-function derivePackAssetUrls(fetchJson, type) {
-  if (!fetchJson) {
-    return type ? { custom_icon_type: type } : {};
-  }
-  try {
-    const url = new URL(fetchJson, window.location.origin);
-    const base = url.href.replace(/\/[^/?#]+(?:\?.*)?$/, "");
-    if ("icomoon" === type) {
-      return {
-        custom_icon_type: type,
-        selectionUrl: `${base}/selection.json`,
-        fontUrl: `${base}/fonts/icomoon.svg`
-      };
-    }
-    if ("fontastic" === type) {
-      return {
-        custom_icon_type: type,
-        fontUrl: `${base}/fonts/fontastic.svg`
-      };
-    }
-    if ("fontello" === type) {
-      return {
-        custom_icon_type: type,
-        configUrl: `${base}/config.json`,
-        fontUrl: `${base}/font/fontello.svg`
-      };
-    }
-    return {};
-  } catch {
-    return type ? { custom_icon_type: type } : {};
-  }
-}
-async function loadCustomLibrary(library, signal) {
-  enqueueIconFonts(library.name);
-  const names = parseIconNames(await loadLibraryPayload(library, signal));
-  const svgMap = await loadLibrarySvgMap(library.name, library, signal);
-  return names.map((name) => {
-    const value = createCustomIconSelectionValue(library, name);
-    return {
-      id: `${library.name}:${name}`,
-      name,
-      label: name.replace(/-/g, " "),
-      library: library.name,
-      value,
-      aliases: [],
-      width: DEFAULT_ICON_SIZE,
-      height: DEFAULT_ICON_SIZE,
-      paths: [],
-      glyphClass: value,
-      svgMarkup: svgMap[value]
-    };
-  });
-}
-async function loadLibrarySvgMap(library, config, signal) {
-  if (!config) {
-    svgMapCache.delete(library);
-    inFlightSvgMaps.delete(library);
-    return {};
-  }
-  const cached = svgMapCache.get(library);
-  if (cached && Object.keys(cached).length > 0) {
-    return cached;
-  }
-  const pending = inFlightSvgMaps.get(library);
-  if (pending) {
-    return pending;
-  }
-  const request = fetchLibrarySvgMap(library, config, signal).finally(() => {
-    inFlightSvgMaps.delete(library);
-  });
-  inFlightSvgMaps.set(library, request);
-  return request;
-}
-async function fetchLibrarySvgMap(library, config, signal) {
-  const fromRest = await loadSvgMapFromRest(library, signal);
-  const restIcons = fromRest.icons;
-  if (Object.keys(restIcons).length > 0 && !fromRest.truncated) {
-    svgMapCache.set(library, restIcons);
-    return restIcons;
-  }
-  const fromPack = await loadSvgMapFromPackFiles(config, signal);
-  const merged = { ...fromPack, ...restIcons };
-  if (Object.keys(merged).length > 0) {
-    svgMapCache.set(library, merged);
-    return merged;
-  }
-  return {};
-}
-async function loadSvgMapFromRest(library, signal) {
-  try {
-    const response = await httpService3().get(CUSTOM_ICON_SVG_URL, { params: { library: String(library) }, signal });
-    return unwrapIconMap(response);
-  } catch {
-    return { icons: {}, truncated: false };
-  }
-}
-function unwrapIconMap(payload) {
-  let current = payload;
-  for (let depth = 0; depth < 4; depth++) {
-    if (!current || typeof current !== "object") {
-      return { icons: {}, truncated: false };
-    }
-    const record = current;
-    if (record.icons && typeof record.icons === "object" && !Array.isArray(record.icons)) {
-      const icons = {};
-      Object.entries(record.icons).forEach(([key, value]) => {
-        if (typeof value === "string" && value !== "") {
-          icons[key] = value;
-        }
-      });
-      return {
-        icons,
-        truncated: true === record.truncated
-      };
-    }
-    current = "data" in record ? record.data : void 0;
-  }
-  return { icons: {}, truncated: false };
-}
-async function loadSvgMapFromPackFiles(library, signal) {
-  const type = resolveCustomIconType(library);
-  if (!type) {
-    return {};
-  }
-  if ("icomoon" === type && library.selectionUrl) {
-    try {
-      const response = await fetch(library.selectionUrl, { signal, mode: "cors" });
-      if (response.ok) {
-        const selectionJson = await response.text();
-        const names2 = parseIconNames(safeJson(selectionJson));
-        const payloadNames2 = names2.length > 0 ? names2 : parseIconNames({ icons: library.icons });
-        const fromSelection = parseIcomoonSelection(
-          selectionJson,
-          library.prefix,
-          library.displayPrefix ?? "",
-          payloadNames2
-        );
-        if (Object.keys(fromSelection).length > 0) {
-          return fromSelection;
-        }
-      }
-    } catch {
-    }
-  }
-  const fontUrls = uniqueUrls([
-    library.fontUrl,
-    "fontello" === type && library.fetchJson ? packSiblingUrl(library.fetchJson, "font/fontello.svg") : null,
-    "fontastic" === type && library.fetchJson ? packSiblingUrl(library.fetchJson, "fonts/fontastic.svg") : null,
-    "icomoon" === type && library.fetchJson ? packSiblingUrl(library.fetchJson, "fonts/icomoon.svg") : null
-  ]);
-  if (fontUrls.length === 0) {
-    return {};
-  }
-  let configJson = "{}";
-  if (library.configUrl) {
-    try {
-      const configResponse = await fetch(library.configUrl, { signal, mode: "cors" });
-      if (configResponse.ok) {
-        configJson = await configResponse.text();
-      }
-    } catch {
-      configJson = "{}";
-    }
-  }
-  const names = parseIconNames(safeJson(configJson));
-  const payloadNames = names.length > 0 ? names : parseIconNames({ icons: library.icons });
-  for (const fontUrl of fontUrls) {
-    try {
-      const fontResponse = await fetch(fontUrl, { signal, mode: "cors" });
-      if (!fontResponse.ok) {
-        continue;
-      }
-      const fromFont = parseFontelloSvgFont(
-        configJson,
-        await fontResponse.text(),
-        library.prefix,
-        library.displayPrefix ?? "",
-        payloadNames
-      );
-      if (Object.keys(fromFont).length > 0) {
-        return fromFont;
-      }
-    } catch {
-      continue;
-    }
-  }
-  return {};
-}
-function packSiblingUrl(fetchJson, relativePath) {
-  try {
-    const url = new URL(fetchJson, window.location.origin);
-    url.pathname = url.pathname.replace(/\/[^/]+$/, `/${relativePath}`);
-    return url.href;
-  } catch {
-    return null;
-  }
-}
-function uniqueUrls(urls) {
-  return [...new Set(urls.filter((url) => typeof url === "string" && url !== ""))];
-}
-function safeJson(value) {
-  try {
-    return JSON.parse(value);
-  } catch {
-    return null;
-  }
-}
-async function loadLibraryPayload(library, signal) {
-  if (library.icons !== void 0) {
-    return { icons: library.icons };
-  }
-  if (!library.fetchJson) {
-    return null;
-  }
-  try {
-    const response = await fetch(library.fetchJson, { signal, mode: "cors" });
-    return response.ok ? response.json() : null;
-  } catch {
-    return null;
-  }
-}
-function parseIconNames(payload) {
-  if (!payload || typeof payload !== "object") {
-    return [];
-  }
-  const icons = payload.icons;
-  if (Array.isArray(icons)) {
-    return icons.flatMap((entry) => {
-      if (typeof entry === "string") {
-        return [normalizeIconName(entry)];
-      }
-      if (entry && typeof entry === "object" && "name" in entry && typeof entry.name === "string") {
-        return [normalizeIconName(entry.name)];
-      }
-      if (entry && typeof entry === "object" && "properties" in entry && entry.properties && typeof entry.properties === "object" && "name" in entry.properties && typeof entry.properties.name === "string") {
-        return [normalizeIconName(entry.properties.name)];
-      }
-      return [];
-    }).filter(Boolean);
-  }
-  if (icons && typeof icons === "object") {
-    return Object.keys(icons).map(normalizeIconName).filter(Boolean);
-  }
-  const glyphs = payload.glyphs;
-  if (Array.isArray(glyphs)) {
-    return glyphs.flatMap((entry) => {
-      if (entry && typeof entry === "object" && "css" in entry && typeof entry.css === "string") {
-        return [normalizeIconName(entry.css)];
-      }
-      return [];
-    }).filter(Boolean);
-  }
-  return [];
-}
-function normalizeIconName(name) {
-  return name.trim().replace(/^:/, "").replace(/:$/, "");
-}
-function createCustomIconSelectionValue(library, name) {
-  const prefix = library.prefix;
-  const displayPrefix = library.displayPrefix || prefix.replace(/-$/, "");
-  return `${displayPrefix} ${prefix}${name}`.trim();
-}
-
 // src/controls/icon-library/font-awesome-7-data.ts
 var FONT_AWESOME_7_LIBRARIES = [
   { file: "solid", library: "fa-solid" },
@@ -7202,6 +6609,39 @@ var IconLibraryGrid = ({
   );
 };
 
+// src/controls/icon-library/icon-library-providers.ts
+import { useState as useState20 } from "react";
+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;
+}
+
 // src/controls/icon-library/icon-library-view-toggle.tsx
 import * as React87 from "react";
 import { ListIcon, WidgetsIcon } from "@elementor/icons";
@@ -7245,10 +6685,10 @@ var SvgElementIcon = React88.forwardRef(
 );
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
-import { useQuery as useQuery3 } from "@elementor/query";
+import { useQuery as useQuery2 } from "@elementor/query";
 var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
 function useFontAwesome7Catalog(enabled) {
-  return useQuery3({
+  return useQuery2({
     queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
     queryFn: ({ signal }) => loadFontAwesome7Catalog(signal),
     enabled,
@@ -7292,16 +6732,16 @@ var IconLibraryPopover = ({
     handleChange: handleSearchChange,
     setImmediateValue: setSearchValue
   } = useDebounceState({ delay: ICON_LIBRARY_SEARCH_DEBOUNCE_DELAY });
-  const [activeLibraries, setActiveLibraries] = useState20([]);
+  const [activeLibraries, setActiveLibraries] = useState21([]);
   const [storedView, setStoredView] = useSessionStorage2(
     ICON_LIBRARY_VIEW_STORAGE_KEY,
     ICON_LIBRARY_VIEW_STORAGE_PREFIX
   );
   const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
   const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(open);
-  const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries(open);
-  const isLoading = isFontAwesomeLoading || isCustomLoading;
-  const icons = useMemo12(() => [...fontAwesomeIcons, ...customIcons], [customIcons, fontAwesomeIcons]);
+  const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(open);
+  const isLoading = isFontAwesomeLoading || isProviderLoading;
+  const icons = useMemo12(() => [...fontAwesomeIcons, ...providerIcons], [providerIcons, fontAwesomeIcons]);
   const items2 = useMemo12(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
@@ -7464,6 +6904,18 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
   value: icon.id
 }));
 
+// src/controls/open-icon-library.ts
+import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
+function enqueueIconFonts(library) {
+  window.elementor?.helpers?.enqueueIconFonts?.(library);
+}
+function createIconPropValue(icon, library) {
+  return {
+    value: stringPropTypeUtil14.create(icon),
+    library: stringPropTypeUtil14.create(library)
+  };
+}
+
 // src/controls/svg-media-overlay.tsx
 import * as React90 from "react";
 import { LibraryIcon as LibraryIcon3 } from "@elementor/icons";
@@ -7532,10 +6984,10 @@ 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: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries(shouldLoadIconCatalog);
-  const icons = [...fontAwesomeIcons, ...customIcons];
+  const { data: providerIcons = [], isLoading: isProviderLoading } = useIconLibraryProviderIcons(shouldLoadIconCatalog);
+  const icons = [...fontAwesomeIcons, ...providerIcons];
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
-  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isCustomLoading);
+  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isProviderLoading);
   if (isFetching || isLoadingCatalog) {
     return /* @__PURE__ */ React91.createElement(CircularProgress4, { role: "progressbar" });
   }
@@ -7614,11 +7066,11 @@ var SvgMediaControl = createControl(({ showIconLibrary = false, label }) => {
   const { data: attachment, isFetching } = useWpMediaAttachment2(id?.value || null);
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
-  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState21(false);
+  const [unfilteredModalOpenState, setUnfilteredModalOpenState] = useState22(false);
   const iconLibraryPopoverState = usePopupState9({ variant: "popover" });
   const controlContainerRef = useRef18(null);
   const buttonGroupRef = useRef18(null);
-  const [iconLibraryAnchor, setIconLibraryAnchor] = useState21(null);
+  const [iconLibraryAnchor, setIconLibraryAnchor] = useState22(null);
   const { isAdmin } = useCurrentUserCapabilities();
   const selectedIconClass = showIconLibrary && typeof iconValue?.value?.value === "string" ? iconValue.value.value : null;
   const selectedIconLibrary = showIconLibrary && typeof iconValue?.library?.value === "string" ? iconValue.library.value : null;
@@ -8565,7 +8017,7 @@ var getAllProperties = (pattern) => {
 
 // src/controls/key-value-control.tsx
 import * as React102 from "react";
-import { useMemo as useMemo14, useState as useState22 } from "react";
+import { useMemo as useMemo14, useState as useState23 } from "react";
 import {
   isTransformable,
   keyValuePropTypeUtil,
@@ -8596,9 +8048,9 @@ var getInitialFieldValue = (fieldValue) => {
 };
 var KeyValueControl = createControl((props = {}) => {
   const { value, setValue, ...propContext } = useBoundProp(keyValuePropTypeUtil);
-  const [keyError, setKeyError] = useState22("");
-  const [valueError, setValueError] = useState22("");
-  const [sessionState, setSessionState] = useState22({
+  const [keyError, setKeyError] = useState23("");
+  const [valueError, setValueError] = useState23("");
+  const [sessionState, setSessionState] = useState23({
     key: getInitialFieldValue(value?.key),
     value: getInitialFieldValue(value?.value)
   });
@@ -9347,7 +8799,7 @@ var TransformBasePopoverTrigger = ({
 
 // src/controls/transition-control/transition-repeater-control.tsx
 import * as React119 from "react";
-import { useEffect as useEffect18, useMemo as useMemo17, useState as useState23 } from "react";
+import { useEffect as useEffect18, useMemo as useMemo17, useState as useState24 } from "react";
 import {
   createArrayPropUtils as createArrayPropUtils3,
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
@@ -9894,7 +9346,7 @@ var TransitionRepeaterControl = createControl(
     currentStyleState
   }) => {
     const currentStyleIsNormal = currentStyleState === null;
-    const [recentlyUsedList, setRecentlyUsedList] = useState23([]);
+    const [recentlyUsedList, setRecentlyUsedList] = useState24([]);
     const proInstalled = hasProInstalled2();
     const { value, setValue } = useBoundProp(childArrayPropTypeUtil);
     const { allDisabled: disabledItems, proDisabled: proDisabledItems } = useMemo17(
@@ -10210,7 +9662,7 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 
 // src/controls/inline-editing-control.tsx
 import * as React128 from "react";
-import { useCallback as useCallback4, useState as useState25 } from "react";
+import { useCallback as useCallback4, useState as useState26 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
 import { Box as Box35, Stack as Stack24 } from "@elementor/ui";
 
@@ -10390,7 +9842,7 @@ var useOnUpdate = (callback, dependencies) => {
 
 // src/components/inline-editor-toolbar.tsx
 import * as React127 from "react";
-import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef34, useState as useState24 } from "react";
+import { useEffect as useEffect21, useMemo as useMemo18, useRef as useRef34, useState as useState25 } from "react";
 import { getContainer as getContainer2, getElementSetting } from "@elementor/editor-elements";
 import {
   BoldIcon,
@@ -10485,8 +9937,8 @@ var InlineEditorToolbar = ({
   sx = {},
   inControlPanel = false
 }) => {
-  const [urlValue, setUrlValue] = useState24("");
-  const [openInNewTab, setOpenInNewTab] = useState24(false);
+  const [urlValue, setUrlValue] = useState25("");
+  const [openInNewTab, setOpenInNewTab] = useState25(false);
   const toolbarRef = useRef34(null);
   const linkPopupState = usePopupState12({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
@@ -10713,7 +10165,7 @@ var InlineEditingControl = createControl(
     const { setValue, placeholder, value } = useBoundProp(escapedHtmlPropTypeUtil2);
     const { value: rawValue } = usePropKeyContext();
     const content = value ?? extractInlineHtmlContent(rawValue);
-    const [editor, setEditor] = useState25(null);
+    const [editor, setEditor] = useState26(null);
     const handleChange = useCallback4(
       (newValue) => {
         const html = newValue ?? "";
@@ -10901,7 +10353,7 @@ function useFormFieldSuggestions(options) {
 
 // src/controls/email-form-action-control/email-chips-field.tsx
 import * as React129 from "react";
-import { useMemo as useMemo19, useState as useState26 } from "react";
+import { useMemo as useMemo19, useState as useState27 } 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";
 
@@ -10939,7 +10391,7 @@ function resolveMention(raw, suggestions) {
 }
 var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
   const { value, setValue, disabled } = useBoundProp(stringArrayPropTypeUtil3);
-  const [inputValue, setInputValue] = useState26("");
+  const [inputValue, setInputValue] = useState27("");
   const items2 = value || [];
   const selectedValues = items2.map((item) => stringPropTypeUtil23.extract(item)).filter((val) => val !== null);
   const suggestionOptions = useMemo19(
@@ -11177,7 +10629,7 @@ import { __ as __70 } from "@wordpress/i18n";
 
 // src/components/promotions/promotion-trigger.tsx
 import * as React135 from "react";
-import { forwardRef as forwardRef13, useCallback as useCallback5, useImperativeHandle, useState as useState27 } from "react";
+import { forwardRef as forwardRef13, useCallback as useCallback5, useImperativeHandle, useState as useState28 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
 import { Box as Box37 } from "@elementor/ui";
 function getV4Promotion(key) {
@@ -11185,7 +10637,7 @@ function getV4Promotion(key) {
 }
 var PromotionTrigger = forwardRef13(
   ({ promotionKey, children, trackingData }, ref) => {
-    const [isOpen, setIsOpen] = useState27(false);
+    const [isOpen, setIsOpen] = useState28(false);
     const promotion = getV4Promotion(promotionKey);
     const toggle = useCallback5(() => {
       setIsOpen((prev) => {
@@ -11305,7 +10757,7 @@ var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /*
 
 // src/components/repeater/repeater.tsx
 import * as React139 from "react";
-import { useEffect as useEffect22, useState as useState28 } from "react";
+import { useEffect as useEffect22, useState as useState29 } 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,
@@ -11335,7 +10787,7 @@ var Repeater3 = ({
   isSortable = true,
   adornment = ControlAdornments
 }) => {
-  const [openItem, setOpenItem] = useState28(initialOpenItem);
+  const [openItem, setOpenItem] = useState29(initialOpenItem);
   const uniqueKeys = items2.map(
     (item, index) => isSortable && "getId" in itemSettings ? itemSettings.getId({ item, index }) : String(index)
   );
@@ -11511,7 +10963,7 @@ var RepeaterItem = ({
   ), /* @__PURE__ */ React139.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React139.createElement(Box38, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
-  const [ref, setRef] = useState28(null);
+  const [ref, setRef] = useState29(null);
   const popoverState = usePopupState13({ variant: "popover" });
   const popoverProps = bindPopover9(popoverState);
   useEffect22(() => {
@@ -11797,21 +11249,23 @@ export {
   createControl,
   createControlReplacementsRegistry,
   enqueueFont,
+  enqueueIconFonts,
   getControlReplacements,
   getFontAwesome7IconName,
   injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel,
-  isDeletedCustomIconLibrary,
   isUnitExtendedOption,
   registerControlReplacement,
+  registerIconLibraryProvider,
   resetFontAwesome7IconsCache,
-  resolveCustomIconSvg,
   resolveFontAwesome7Icon,
+  resolveProviderIconSvg,
   trackUpgradePromotionClick,
   trackViewPromotion,
   transitionProperties,
   transitionsItemsList,
+  unregisterIconLibraryProvider,
   useBoundProp,
   useControlActions,
   useControlReplacement,