@elementor/editor-controls 4.4.0-1110 → 4.4.0-1112

package/dist/index.mjs

@@ -5380,7 +5380,7 @@ import * as React88 from "react";
 import { useEffect as useEffect16, useRef as useRef17, useState as useState19 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { iconPropTypeUtil, svgSrcPropTypeUtil, urlPropTypeUtil as urlPropTypeUtil4 } from "@elementor/editor-props";
-import { Box as Box20, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack17, styled as styled11, usePopupState as usePopupState10 } from "@elementor/ui";
+import { Box as Box21, Card as Card2, CardOverlay as CardOverlay2, Popover as Popover6, Stack as Stack17, styled as styled11, usePopupState as usePopupState10 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment2, useWpMediaFrame as useWpMediaFrame2 } from "@elementor/wp-media";
 import { __ as __38 } from "@wordpress/i18n";
 
@@ -5471,10 +5471,603 @@ import {
 } from "@elementor/editor-ui";
 import { ComponentsIcon } from "@elementor/icons";
 import { useSessionStorage as useSessionStorage2 } from "@elementor/session";
-import { Box as Box17, CircularProgress as CircularProgress3, Divider as Divider4, Link as Link3, Stack as Stack15, styled as styled9, Typography as Typography9 } from "@elementor/ui";
+import { Box as Box18, CircularProgress as CircularProgress3, Divider as Divider5, Link as Link3, Stack as Stack15, styled as styled9, Typography as Typography9 } from "@elementor/ui";
 import { useDebounceState } from "@elementor/utils";
 import { __ as __35 } 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" },
@@ -5500,7 +6093,8 @@ function getFontAwesome7EditorConfig() {
   }
   return {
     jsonFiles: config.jsonFiles,
-    jsonBaseUrl
+    jsonBaseUrl,
+    filter: config.filter
   };
 }
 var FONT_AWESOME_ICON_NAME_PATTERN = /^fa\S*\s+fa-([^\s]+)/;
@@ -5691,16 +6285,22 @@ function getSelectedIconId(iconClass, library) {
   return `${library}:${name}`;
 }
 function findFontAwesome7Icon(icons, iconClass, library) {
-  const selectedId = getSelectedIconId(iconClass, library);
-  if (!selectedId || !library) {
+  if (!iconClass || !library) {
     return void 0;
   }
-  const selectedName = selectedId.slice(`${library}:`.length);
+  const selectedId = getSelectedIconId(iconClass, library);
+  const selectedName = selectedId?.slice(`${library}:`.length);
   return icons.find((icon) => {
     if (icon.library !== library) {
       return false;
     }
-    return icon.id === selectedId || icon.name === selectedName || icon.aliases.includes(selectedName);
+    if (icon.value === iconClass || icon.id === selectedId) {
+      return true;
+    }
+    if (!selectedName) {
+      return false;
+    }
+    return icon.name === selectedName || icon.aliases.includes(selectedName);
   });
 }
 function toCatalogIcon(icon, library) {
@@ -5715,22 +6315,111 @@ function toCatalogIcon(icon, library) {
 
 // src/controls/icon-library/font-awesome-glyph.tsx
 import * as React81 from "react";
+import { Box as Box15 } from "@elementor/ui";
+
+// 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([
+  "d",
+  "fill",
+  "viewbox",
+  "xmlns",
+  "width",
+  "height",
+  "transform",
+  "overflow",
+  "aria-hidden",
+  "aria-label",
+  "role"
+]);
+function sanitizeIconSvgMarkup(markup) {
+  if (typeof markup !== "string" || markup === "") {
+    return "";
+  }
+  const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
+  if (doc.querySelector("parsererror")) {
+    return "";
+  }
+  const svg = doc.querySelector("svg");
+  if (!svg) {
+    return "";
+  }
+  pruneNode(svg);
+  return svg.tagName.toLowerCase() === "svg" ? svg.outerHTML : "";
+}
+function pruneNode(node) {
+  [...node.children].forEach((child) => {
+    if (!ALLOWED_SVG_TAGS.has(child.tagName.toLowerCase())) {
+      child.remove();
+      return;
+    }
+    pruneNode(child);
+  });
+  [...node.attributes].forEach((attribute) => {
+    if (!ALLOWED_SVG_ATTRS.has(attribute.name.toLowerCase())) {
+      node.removeAttribute(attribute.name);
+    }
+  });
+}
+
+// src/controls/icon-library/font-awesome-glyph.tsx
 var FontAwesomeGlyph = ({ icon, size, color, label }) => {
-  return /* @__PURE__ */ React81.createElement(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${icon.width} ${icon.height}`,
-      width: size,
-      height: size,
-      fill: color,
-      overflow: "visible",
-      "aria-hidden": label ? void 0 : true,
-      "aria-label": label,
-      role: label ? "img" : void 0
-    },
-    icon.paths.map((path, index) => /* @__PURE__ */ React81.createElement("path", { key: `${index}-${path}`, d: path }))
-  );
+  const svgMarkup = sanitizeIconSvgMarkup(icon.svgMarkup);
+  if (svgMarkup) {
+    return /* @__PURE__ */ React81.createElement(
+      Box15,
+      {
+        component: "span",
+        "aria-hidden": label ? void 0 : true,
+        "aria-label": label,
+        role: label ? "img" : void 0,
+        sx: {
+          width: size,
+          height: size,
+          color,
+          display: "inline-flex",
+          "& svg": {
+            width: "100%",
+            height: "100%",
+            fill: "currentColor"
+          },
+          "& path": {
+            fill: "currentColor"
+          }
+        },
+        dangerouslySetInnerHTML: { __html: svgMarkup }
+      }
+    );
+  }
+  if (icon.paths.length > 0) {
+    return /* @__PURE__ */ React81.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 0 ${icon.width} ${icon.height}`,
+        width: size,
+        height: size,
+        fill: color,
+        overflow: "visible",
+        "aria-hidden": label ? void 0 : true,
+        "aria-label": label,
+        role: label ? "img" : void 0
+      },
+      icon.paths.map((path, index) => /* @__PURE__ */ React81.createElement("path", { key: `${index}-${path}`, d: path }))
+    );
+  }
+  if (icon.glyphClass) {
+    return /* @__PURE__ */ React81.createElement(
+      "i",
+      {
+        className: icon.glyphClass,
+        "aria-hidden": label ? void 0 : true,
+        "aria-label": label,
+        style: { fontSize: size, color, lineHeight: 1 }
+      }
+    );
+  }
+  return null;
 };
 
 // src/controls/icon-library/icon-library-filter.tsx
@@ -5740,7 +6429,9 @@ import { CheckIcon, FilterIcon as FilterIcon2, LibraryIcon, ListIcon, StarFilled
 import {
   bindMenu as bindMenu3,
   bindToggle as bindToggle2,
-  Box as Box15,
+  Box as Box16,
+  Divider as Divider4,
+  ListSubheader,
   Menu as Menu4,
   MenuItem as MenuItem2,
   Stack as Stack13,
@@ -5758,48 +6449,34 @@ var ICON_LIBRARY_ACTION_TOOLTIP_ENTER_DELAY = 0;
 var FILTER_MENU_WIDTH = 280;
 var FILTER_INDICATOR_SIZE = 6;
 var FILTER_INDICATOR_OFFSET = 4;
-var LIBRARY_FILTER_ORDER = {
-  regular: 0,
-  solid: 1,
-  brands: 2
-};
-var LIBRARY_FILTER_CONFIG = {
-  "fa-regular": {
-    getLabel: () => __32("Font Awesome - Regular", "elementor"),
-    Icon: StarIcon,
-    order: LIBRARY_FILTER_ORDER.regular
-  },
-  "fa-solid": {
-    getLabel: () => __32("Font Awesome - Solid", "elementor"),
-    Icon: StarFilledIcon,
-    order: LIBRARY_FILTER_ORDER.solid
-  },
-  "fa-brands": {
-    getLabel: () => __32("Font Awesome - Brands", "elementor"),
-    Icon: LibraryIcon,
-    order: LIBRARY_FILTER_ORDER.brands
-  }
-};
+var FILTER_TYPE_ALL = "all";
+var FILTER_TYPE_GROUP = "group";
+var FILTER_TYPE_ITEM = "item";
+var FILTER_ICONS = {
+  list: ListIcon,
+  star: StarIcon,
+  "star-filled": StarFilledIcon,
+  library: LibraryIcon
+};
+var DEFAULT_FILTER = [
+  { type: FILTER_TYPE_ALL, label: "All icons", icon: "list" },
+  { type: FILTER_TYPE_ITEM, value: "fa-regular", label: "Font Awesome - Regular", icon: "star" },
+  { type: FILTER_TYPE_ITEM, value: "fa-solid", label: "Font Awesome - Solid", icon: "star-filled" },
+  { type: FILTER_TYPE_ITEM, value: "fa-brands", label: "Font Awesome - Brands", icon: "library" }
+];
 var IconLibraryFilter = ({ value, onChange }) => {
   const popupId = useId4();
   const popupState = usePopupState8({
     variant: "popover",
     popupId
   });
-  const options = FONT_AWESOME_7_LIBRARIES.map(({ library }) => ({
-    value: library,
-    label: LIBRARY_FILTER_CONFIG[library].getLabel(),
-    Icon: LIBRARY_FILTER_CONFIG[library].Icon,
-    order: LIBRARY_FILTER_CONFIG[library].order
-  })).sort((firstOption, secondOption) => firstOption.order - secondOption.order);
+  const entries = getFilterEntries();
+  const selectableValues = entries.flatMap((entry) => entry.type === FILTER_TYPE_ITEM ? [entry.value] : []);
   const isFiltered = value.length > 0;
   const filterButtonLabel = isFiltered ? __32("Filter by library, active", "elementor") : __32("Filter by library", "elementor");
-  const handleAllIconsClick = () => {
-    onChange([]);
-  };
   const handleLibraryClick = (library) => {
     const nextValue = value.includes(library) ? value.filter((selectedLibrary) => selectedLibrary !== library) : [...value, library];
-    onChange(nextValue.length === FONT_AWESOME_7_LIBRARIES.length ? [] : nextValue);
+    onChange(nextValue.length === selectableValues.length ? [] : nextValue);
   };
   return /* @__PURE__ */ React82.createElement(React82.Fragment, null, /* @__PURE__ */ React82.createElement(
     Tooltip8,
@@ -5823,7 +6500,7 @@ var IconLibraryFilter = ({ value, onChange }) => {
       },
       /* @__PURE__ */ React82.createElement(FilterIcon2, { fontSize: "tiny" }),
       isFiltered ? /* @__PURE__ */ React82.createElement(
-        Box15,
+        Box16,
         {
           component: "span",
           "aria-hidden": "true",
@@ -5850,35 +6527,91 @@ var IconLibraryFilter = ({ value, onChange }) => {
       },
       sx: { "& .MuiPaper-root": { minWidth: FILTER_MENU_WIDTH } }
     },
+    entries.flatMap(
+      (entry, index) => renderFilterEntry(entry, index, value, isFiltered, () => onChange([]), handleLibraryClick)
+    )
+  ));
+};
+var renderFilterEntry = (entry, index, selectedLibraries, isFiltered, onAllIconsClick, onLibraryClick) => {
+  if (entry.type === FILTER_TYPE_GROUP) {
+    return [
+      /* @__PURE__ */ React82.createElement(Divider4, { key: `divider-${index}` }),
+      /* @__PURE__ */ React82.createElement(ListSubheader, { key: `group-${index}`, disableSticky: true }, entry.label)
+    ];
+  }
+  if (entry.type === FILTER_TYPE_ALL) {
+    return [
+      /* @__PURE__ */ React82.createElement(
+        MenuItem2,
+        {
+          key: `all-${index}`,
+          role: "menuitemcheckbox",
+          "aria-checked": !isFiltered,
+          selected: !isFiltered,
+          onClick: onAllIconsClick
+        },
+        renderFilterMenuItemContent(entry.label, getFilterIcon(entry.icon), !isFiltered)
+      )
+    ];
+  }
+  const isSelected = selectedLibraries.includes(entry.value);
+  return [
     /* @__PURE__ */ React82.createElement(
       MenuItem2,
       {
+        key: entry.value,
         role: "menuitemcheckbox",
-        "aria-checked": !isFiltered,
-        selected: !isFiltered,
-        onClick: handleAllIconsClick
+        "aria-checked": isSelected,
+        selected: isSelected,
+        onClick: () => onLibraryClick(entry.value)
       },
-      renderFilterMenuItemContent(__32("All icons", "elementor"), ListIcon, !isFiltered)
-    ),
-    options.map(({ value: library, label, Icon }) => /* @__PURE__ */ React82.createElement(
-      MenuItem2,
-      {
-        key: library,
-        role: "menuitemcheckbox",
-        "aria-checked": value.includes(library),
-        selected: value.includes(library),
-        onClick: () => handleLibraryClick(library)
-      },
-      renderFilterMenuItemContent(label, Icon, value.includes(library))
-    ))
-  ));
+      renderFilterMenuItemContent(entry.label, getFilterIcon(entry.icon), isSelected)
+    )
+  ];
 };
+var getFilterIcon = (icon) => FILTER_ICONS[icon ?? ""] ?? LibraryIcon;
 var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(Stack13, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(Typography7, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
+function getFilterEntries() {
+  const filter = window.elementorCommon?.config?.fontAwesome?.v7?.filter;
+  if (!Array.isArray(filter)) {
+    return [...DEFAULT_FILTER];
+  }
+  const entries = filter.map(parseFilterEntry).filter((entry) => entry !== null);
+  return entries.length > 0 ? entries : [...DEFAULT_FILTER];
+}
+function parseFilterEntry(value) {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const entry = value;
+  if (typeof entry.label !== "string" || entry.label === "") {
+    return null;
+  }
+  if (entry.type === FILTER_TYPE_GROUP) {
+    return { type: FILTER_TYPE_GROUP, label: entry.label };
+  }
+  if (entry.type === FILTER_TYPE_ALL) {
+    return {
+      type: FILTER_TYPE_ALL,
+      label: entry.label,
+      icon: typeof entry.icon === "string" ? entry.icon : void 0
+    };
+  }
+  if (entry.type === FILTER_TYPE_ITEM && typeof entry.value === "string" && entry.value !== "") {
+    return {
+      type: FILTER_TYPE_ITEM,
+      value: entry.value,
+      label: entry.label,
+      icon: typeof entry.icon === "string" ? entry.icon : void 0
+    };
+  }
+  return null;
+}
 
 // src/controls/icon-library/icon-library-grid.tsx
 import * as React83 from "react";
 import { useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as useState17 } from "react";
-import { Box as Box16, Tooltip as Tooltip9, useTheme as useTheme3 } from "@elementor/ui";
+import { Box as Box17, Tooltip as Tooltip9, useTheme as useTheme3 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { __ as __33 } from "@wordpress/i18n";
 var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
@@ -6024,7 +6757,7 @@ var IconLibraryGrid = ({
     }
   };
   return /* @__PURE__ */ React83.createElement(
-    Box16,
+    Box17,
     {
       ref: containerRef,
       sx: {
@@ -6036,7 +6769,7 @@ var IconLibraryGrid = ({
       }
     },
     items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React83.createElement(
-      Box16,
+      Box17,
       {
         role: "grid",
         "aria-label": __33("Icons", "elementor"),
@@ -6054,7 +6787,7 @@ var IconLibraryGrid = ({
         const startIndex = virtualRow.index * columnCount;
         const rowItems = items2.slice(startIndex, startIndex + columnCount);
         return /* @__PURE__ */ React83.createElement(
-          Box16,
+          Box17,
           {
             key: virtualRow.key,
             role: "row",
@@ -6078,7 +6811,7 @@ var IconLibraryGrid = ({
             const isSelected = selectedValue === item.id;
             const tabIndex = focusedIndex === index ? 0 : -1;
             return /* @__PURE__ */ React83.createElement(
-              Box16,
+              Box17,
               {
                 key: item.id,
                 role: "presentation",
@@ -6095,7 +6828,7 @@ var IconLibraryGrid = ({
                   disableFocusListener: true
                 },
                 /* @__PURE__ */ React83.createElement(
-                  Box16,
+                  Box17,
                   {
                     component: "button",
                     type: "button",
@@ -6149,14 +6882,14 @@ var IconLibraryGrid = ({
                       }
                     }
                   },
-                  item.paths.length > 0 ? /* @__PURE__ */ React83.createElement(
+                  /* @__PURE__ */ React83.createElement(
                     FontAwesomeGlyph,
                     {
                       icon: item,
                       size: ICON_GLYPH_SIZE,
                       color: "currentColor"
                     }
-                  ) : null
+                  )
                 )
               )
             );
@@ -6253,10 +6986,10 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
 var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(MenuItem3, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(Stack14, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(Typography8, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(CheckIcon2, { fontSize: "tiny", "aria-hidden": "true" }) : null));
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
-import { useQuery as useQuery2 } from "@elementor/query";
+import { useQuery as useQuery3 } from "@elementor/query";
 var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
 function useFontAwesome7Catalog(enabled) {
-  return useQuery2({
+  return useQuery3({
     queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
     queryFn: ({ signal }) => loadFontAwesome7Catalog(signal),
     enabled,
@@ -6302,7 +7035,10 @@ var IconLibraryPopover = ({
     ICON_LIBRARY_VIEW_STORAGE_PREFIX
   );
   const view = isIconLibraryView(storedView) ? storedView : DEFAULT_ICON_LIBRARY_VIEW;
-  const { data: icons = [], isLoading } = useFontAwesome7Catalog(open);
+  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 items2 = useMemo12(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
@@ -6322,7 +7058,7 @@ var IconLibraryPopover = ({
       return;
     }
     onSelect({
-      value: createIconSelectionValue(icon.library, icon.name),
+      value: icon.glyphClass ?? createIconSelectionValue(icon.library, icon.name),
       library: icon.library
     });
   };
@@ -6347,7 +7083,7 @@ var IconLibraryPopover = ({
       id: "icon-library-search",
       sx: { flex: 1, px: 0, pb: 0 }
     }
-  ), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(Divider4, null), /* @__PURE__ */ React85.createElement(Box17, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
+  ), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(Divider5, null), /* @__PURE__ */ React85.createElement(Box18, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
     IconLibraryContent,
     {
       isLoading,
@@ -6385,7 +7121,7 @@ var IconLibraryContent = ({
     }
   );
   if (view === "grid") {
-    return /* @__PURE__ */ React85.createElement(Box17, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
+    return /* @__PURE__ */ React85.createElement(Box18, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
       IconLibraryGrid,
       {
         items: items2,
@@ -6425,7 +7161,7 @@ var IconLibraryEmptyState = ({
 var IconLibraryRow = (item) => {
   const icon = item;
   return /* @__PURE__ */ React85.createElement(Stack15, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
-    Box17,
+    Box18,
     {
       sx: {
         width: ICON_TILE_SIZE,
@@ -6440,7 +7176,7 @@ var IconLibraryRow = (item) => {
         flexShrink: 0
       }
     },
-    icon.paths.length > 0 ? /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" }) : null
+    /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
   ), /* @__PURE__ */ React85.createElement(Typography9, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
 var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(Stack15, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(Typography9, { align: "center", variant: "subtitle2", color: "text.secondary" }, __35("Icons couldn't be loaded.", "elementor")));
@@ -6451,19 +7187,10 @@ var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesom
   value: icon.id
 }));
 
-// src/controls/open-icon-library.ts
-import { stringPropTypeUtil as stringPropTypeUtil14 } from "@elementor/editor-props";
-function createIconPropValue(icon, library) {
-  return {
-    value: stringPropTypeUtil14.create(icon),
-    library: stringPropTypeUtil14.create(library)
-  };
-}
-
 // src/controls/svg-media-overlay.tsx
 import * as React86 from "react";
 import { LibraryIcon as LibraryIcon2, UploadIcon as UploadIcon2 } from "@elementor/icons";
-import { Box as Box18, Button as Button5, Stack as Stack16, styled as styled10, ThemeProvider, Typography as Typography10 } from "@elementor/ui";
+import { Box as Box19, Button as Button5, Stack as Stack16, styled as styled10, ThemeProvider, Typography as Typography10 } from "@elementor/ui";
 import { __ as __36 } from "@wordpress/i18n";
 var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
 var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
@@ -6508,7 +7235,7 @@ var SvgMediaOverlay = ({
   },
   __36("Select", "elementor")
 ), /* @__PURE__ */ React86.createElement(
-  Box18,
+  Box19,
   {
     sx: {
       width: "1px",
@@ -6524,7 +7251,7 @@ var SvgMediaOverlay = ({
     description: infotipDescription,
     isEnabled: !isAdmin
   },
-  /* @__PURE__ */ React86.createElement(Box18, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
+  /* @__PURE__ */ React86.createElement(Box19, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
 )), showIconLibrary ? /* @__PURE__ */ React86.createElement(
   Button5,
   {
@@ -6568,15 +7295,18 @@ var UploadButton = ({
 
 // src/controls/svg-media-preview.tsx
 import * as React87 from "react";
-import { Box as Box19, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
+import { Box as Box20, CardMedia as CardMedia2, CircularProgress as CircularProgress4 } from "@elementor/ui";
 import { __ as __37 } from "@wordpress/i18n";
 var ICON_PREVIEW_SIZE = 50;
 var ICON_PREVIEW_COLOR = "#000000";
 var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   const shouldLoadIconCatalog = Boolean(iconClassName && iconLibrary);
-  const { data: icons = [], isLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
+  const { data: fontAwesomeIcons = [], isLoading: isFontAwesomeLoading } = useFontAwesome7Catalog(shouldLoadIconCatalog);
+  const { data: customIcons = [], isLoading: isCustomLoading } = useCustomIconLibraries(shouldLoadIconCatalog);
+  const icons = [...fontAwesomeIcons, ...customIcons];
   const selectedIcon = findFontAwesome7Icon(icons, iconClassName, iconLibrary);
-  if (isFetching || shouldLoadIconCatalog && isLoading) {
+  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isCustomLoading);
+  if (isFetching || isLoadingCatalog) {
     return /* @__PURE__ */ React87.createElement(CircularProgress4, { role: "progressbar" });
   }
   if (selectedIcon) {
@@ -6587,7 +7317,7 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   }
   return /* @__PURE__ */ React87.createElement(SvgPreview, { src });
 };
-var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(Box19, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(Box20, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
   FontAwesomeGlyph,
   {
     icon,
@@ -6597,7 +7327,7 @@ var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(Box19, { s
   }
 ));
 var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
-  Box19,
+  Box20,
   {
     "aria-hidden": true,
     sx: {
@@ -6757,7 +7487,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
       }
     )
   ) : null, /* @__PURE__ */ React88.createElement(
-    Box20,
+    Box21,
     {
       ref: controlContainerRef,
       "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
@@ -6918,7 +7648,7 @@ import {
   backgroundOverlayPropTypeUtil,
   colorPropTypeUtil as colorPropTypeUtil3
 } from "@elementor/editor-props";
-import { Box as Box21, CardMedia as CardMedia4, styled as styled12, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
+import { Box as Box22, CardMedia as CardMedia4, styled as styled12, Tab, TabPanel, Tabs, UnstableColorIndicator as UnstableColorIndicator3 } from "@elementor/ui";
 import { useWpMediaAttachment as useWpMediaAttachment4 } from "@elementor/wp-media";
 import { __ as __44 } from "@wordpress/i18n";
 
@@ -7320,7 +8050,7 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React95.createElement(Box21, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(Box21, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
+  return /* @__PURE__ */ React95.createElement(Box22, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(Box22, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
     Tabs,
     {
       size: "small",
@@ -7469,7 +8199,7 @@ var BackgroundClipField = () => {
 import * as React97 from "react";
 import { useMemo as useMemo13 } from "react";
 import { createArrayPropUtils as createArrayPropUtils2 } from "@elementor/editor-props";
-import { Box as Box22 } from "@elementor/ui";
+import { Box as Box23 } from "@elementor/ui";
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -7615,7 +8345,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React97.createElement(Box22, { component: "span", color }, label);
+  return /* @__PURE__ */ React97.createElement(Box23, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -7802,7 +8532,7 @@ import * as React112 from "react";
 import { useRef as useRef28 } from "react";
 import { transformFunctionsPropTypeUtil, transformPropTypeUtil } from "@elementor/editor-props";
 import { AdjustmentsIcon as AdjustmentsIcon2, InfoCircleFilledIcon as InfoCircleFilledIcon2 } from "@elementor/icons";
-import { bindTrigger as bindTrigger5, Box as Box26, IconButton as IconButton8, Tooltip as Tooltip11, Typography as Typography11, usePopupState as usePopupState11 } from "@elementor/ui";
+import { bindTrigger as bindTrigger5, Box as Box27, IconButton as IconButton8, Tooltip as Tooltip11, Typography as Typography11, usePopupState as usePopupState11 } from "@elementor/ui";
 import { __ as __57 } from "@wordpress/i18n";
 
 // src/controls/transform-control/initial-values.ts
@@ -7858,7 +8588,7 @@ var initialSkewValue = skewTransformPropTypeUtil.create({
 
 // src/controls/transform-control/transform-content.tsx
 import * as React106 from "react";
-import { Box as Box23, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
+import { Box as Box24, Tab as Tab2, TabPanel as TabPanel2, Tabs as Tabs2 } from "@elementor/ui";
 import { __ as __52 } from "@wordpress/i18n";
 
 // src/controls/transform-control/functions/move.tsx
@@ -8129,7 +8859,7 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(Box23, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(Box23, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
+  return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(Box24, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(Box24, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
     Tabs2,
     {
       size: "small",
@@ -8169,7 +8899,7 @@ var TransformIcon = ({ value }) => {
 
 // src/controls/transform-control/transform-label.tsx
 import * as React108 from "react";
-import { Box as Box24 } from "@elementor/ui";
+import { Box as Box25 } from "@elementor/ui";
 import { __ as __53 } from "@wordpress/i18n";
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
@@ -8200,14 +8930,14 @@ var TransformLabel = (props) => {
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React108.createElement(Box24, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React108.createElement(Box25, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
 import * as React111 from "react";
 import { PopoverHeader as PopoverHeader5 } from "@elementor/editor-ui";
 import { AdjustmentsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover6, Box as Box25, Divider as Divider5, Popover as Popover7 } from "@elementor/ui";
+import { bindPopover as bindPopover6, Box as Box26, Divider as Divider6, Popover as Popover7 } from "@elementor/ui";
 import { __ as __56 } from "@wordpress/i18n";
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
@@ -8316,8 +9046,8 @@ var TransformSettingsControl = ({
         icon: /* @__PURE__ */ React111.createElement(AdjustmentsIcon, { fontSize: SIZE10 })
       }
     ),
-    /* @__PURE__ */ React111.createElement(Divider5, null),
-    /* @__PURE__ */ React111.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React111.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(Box25, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(Divider5, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React111.createElement(Divider6, null),
+    /* @__PURE__ */ React111.createElement(PopoverContent, { sx: { px: 2, py: 1.5 } }, /* @__PURE__ */ React111.createElement(PropKeyProvider, { bind: "transform-origin" }, /* @__PURE__ */ React111.createElement(TransformOriginControl, null)), showChildrenPerspective && /* @__PURE__ */ React111.createElement(React111.Fragment, null, /* @__PURE__ */ React111.createElement(Box26, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(Divider6, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -8339,7 +9069,7 @@ var TransformRepeaterControl = createControl(
   }
 );
 var ToolTip = /* @__PURE__ */ React112.createElement(
-  Box26,
+  Box27,
   {
     component: "span",
     "aria-label": void 0,
@@ -8412,7 +9142,7 @@ import {
   selectionSizePropTypeUtil as selectionSizePropTypeUtil2
 } from "@elementor/editor-props";
 import { InfoCircleFilledIcon as InfoCircleFilledIcon3 } from "@elementor/icons";
-import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box28, Typography as Typography12 } from "@elementor/ui";
+import { Alert as Alert2, AlertTitle as AlertTitle3, Box as Box29, Typography as Typography12 } from "@elementor/ui";
 import { hasProInstalled as hasProInstalled2 } from "@elementor/utils";
 import { __ as __60 } from "@wordpress/i18n";
 
@@ -8643,7 +9373,7 @@ import { useMemo as useMemo16, useRef as useRef30 } from "react";
 import { keyValuePropTypeUtil as keyValuePropTypeUtil2 } from "@elementor/editor-props";
 import { PromotionAlert, PromotionChip } from "@elementor/editor-ui";
 import { ChevronDownIcon as ChevronDownIcon3, VariationsIcon } from "@elementor/icons";
-import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box27, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState12 } from "@elementor/ui";
+import { bindPopover as bindPopover7, bindTrigger as bindTrigger6, Box as Box28, Popover as Popover8, UnstableTag as UnstableTag3, usePopupState as usePopupState12 } from "@elementor/ui";
 import { __ as __59 } from "@wordpress/i18n";
 
 // src/utils/tracking.ts
@@ -8771,7 +9501,7 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React114.createElement(Box27, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
+  return /* @__PURE__ */ React114.createElement(Box28, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
     UnstableTag3,
     {
       variant: "outlined",
@@ -8803,7 +9533,7 @@ var TransitionSelector = ({
         icon: VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
         categoryItemContentTemplate: (item) => /* @__PURE__ */ React114.createElement(
-          Box27,
+          Box28,
           {
             sx: {
               display: "flex",
@@ -8945,7 +9675,7 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
     icon: /* @__PURE__ */ React115.createElement(InfoCircleFilledIcon3, null)
   },
   /* @__PURE__ */ React115.createElement(AlertTitle3, null, __60("Transitions", "elementor")),
-  /* @__PURE__ */ React115.createElement(Box28, { component: "span" }, /* @__PURE__ */ React115.createElement(Typography12, { variant: "body2" }, __60("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React115.createElement(Box29, { component: "span" }, /* @__PURE__ */ React115.createElement(Typography12, { variant: "body2" }, __60("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -9019,7 +9749,7 @@ import * as React116 from "react";
 import * as dayjs from "dayjs";
 import { isTransformable as isTransformable2, stringPropTypeUtil as stringPropTypeUtil20 } from "@elementor/editor-props";
 import { DateTimePropTypeUtil } from "@elementor/editor-props";
-import { Box as Box29, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
+import { Box as Box30, DatePicker, LocalizationProvider, TimePicker } from "@elementor/ui";
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -9063,7 +9793,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
     const base = dayjs.default();
     return base.hour(h).minute(m).second(0).millisecond(0);
   };
-  return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(LocalizationProvider, null, /* @__PURE__ */ React116.createElement(Box29, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
+  return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(LocalizationProvider, null, /* @__PURE__ */ React116.createElement(Box30, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
     DatePicker,
     {
       value: parseDateValue(stringPropTypeUtil20.extract(value?.date)),
@@ -9271,12 +10001,12 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 import * as React124 from "react";
 import { useCallback as useCallback4, useState as useState23 } from "react";
 import { escapedHtmlPropTypeUtil as escapedHtmlPropTypeUtil2 } from "@elementor/editor-props";
-import { Box as Box32 } from "@elementor/ui";
+import { Box as Box33 } from "@elementor/ui";
 
 // src/components/inline-editor.tsx
 import * as React121 from "react";
 import { useEffect as useEffect18, useRef as useRef31 } from "react";
-import { Box as Box30 } from "@elementor/ui";
+import { Box as Box31 } from "@elementor/ui";
 import Bold from "@tiptap/extension-bold";
 import Document from "@tiptap/extension-document";
 import HardBreak from "@tiptap/extension-hard-break";
@@ -9434,7 +10164,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React121.createElement(Box30, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React121.createElement(Box31, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = useRef31(false);
@@ -9462,7 +10192,7 @@ import {
   UnderlineIcon
 } from "@elementor/icons";
 import {
-  Box as Box31,
+  Box as Box32,
   IconButton as IconButton9,
   ToggleButton as ToggleButton5,
   ToggleButtonGroup as ToggleButtonGroup2,
@@ -9596,7 +10326,7 @@ var InlineEditorToolbar = ({
     }
   }, [editor, inControlPanel]);
   return /* @__PURE__ */ React123.createElement(
-    Box31,
+    Box32,
     {
       ref: toolbarRef,
       sx: {
@@ -9779,7 +10509,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
     },
     [setValue]
   );
-  return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(Box32, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
+  return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(Box33, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
     InlineEditorToolbar,
     {
       editor,
@@ -9793,7 +10523,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       inControlPanel: true
     }
   ), /* @__PURE__ */ React124.createElement(
-    Box32,
+    Box33,
     {
       sx: (theme) => ({
         p: 0.8,
@@ -9857,7 +10587,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
 import * as React128 from "react";
 import { emailsPropTypeUtil } from "@elementor/editor-props";
 import { CollapsibleContent } from "@elementor/editor-ui";
-import { Box as Box33, Divider as Divider6, Stack as Stack25 } from "@elementor/ui";
+import { Box as Box34, Divider as Divider7, Stack as Stack25 } from "@elementor/ui";
 import { __ as __66 } from "@wordpress/i18n";
 
 // src/controls/email-form-action-control/fields.tsx
@@ -10159,7 +10889,7 @@ var EmailFormActionControl = createControl(
     return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(Stack25, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + __66("settings", "elementor") : __66("Email settings", "elementor")), /* @__PURE__ */ React128.createElement(SendToField, { placeholder: toPlaceholder }), /* @__PURE__ */ React128.createElement(SubjectField, null), /* @__PURE__ */ React128.createElement(MessageField, null), /* @__PURE__ */ React128.createElement(FromEmailField, null), /* @__PURE__ */ React128.createElement(AdvancedSettings, null)));
   }
 );
-var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(Box33, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(Stack25, { gap: 2 }, /* @__PURE__ */ React128.createElement(FromNameField, null), /* @__PURE__ */ React128.createElement(ReplyToField, null), /* @__PURE__ */ React128.createElement(CcField, null), /* @__PURE__ */ React128.createElement(BccField, null), /* @__PURE__ */ React128.createElement(Divider6, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(Box34, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(Stack25, { gap: 2 }, /* @__PURE__ */ React128.createElement(FromNameField, null), /* @__PURE__ */ React128.createElement(ReplyToField, null), /* @__PURE__ */ React128.createElement(CcField, null), /* @__PURE__ */ React128.createElement(BccField, null), /* @__PURE__ */ React128.createElement(Divider7, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
 import * as React129 from "react";
@@ -10285,7 +11015,7 @@ import { __ as __68 } from "@wordpress/i18n";
 import * as React132 from "react";
 import { forwardRef as forwardRef12, useCallback as useCallback5, useImperativeHandle, useState as useState26 } from "react";
 import { PromotionChip as PromotionChip2, PromotionInfotip } from "@elementor/editor-ui";
-import { Box as Box34 } from "@elementor/ui";
+import { Box as Box35 } from "@elementor/ui";
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
@@ -10317,7 +11047,7 @@ var PromotionTrigger = forwardRef12(
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React132.createElement(
-        Box34,
+        Box35,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -10416,7 +11146,7 @@ import { CopyIcon as CopyIcon2, EyeIcon as EyeIcon2, EyeOffIcon as EyeOffIcon2,
 import {
   bindPopover as bindPopover9,
   bindTrigger as bindTrigger7,
-  Box as Box35,
+  Box as Box36,
   IconButton as IconButton12,
   Infotip as Infotip4,
   Tooltip as Tooltip17,
@@ -10525,7 +11255,7 @@ var Repeater3 = ({
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React136.createElement(Box35, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+    /* @__PURE__ */ React136.createElement(Box36, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
   ) : addButton), 0 < uniqueKeys.length && /* @__PURE__ */ React136.createElement(SortableProvider, { value: uniqueKeys, onChange: onChangeOrder }, uniqueKeys.map((key) => {
     const index = uniqueKeys.indexOf(key);
     const value = items2[index];
@@ -10597,7 +11327,7 @@ var RepeaterItem = ({
   const duplicateLabel = __70("Duplicate", "elementor");
   const toggleLabel = propDisabled ? __70("Show", "elementor") : __70("Hide", "elementor");
   const removeLabel = __70("Remove", "elementor");
-  return /* @__PURE__ */ React136.createElement(Box35, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
+  return /* @__PURE__ */ React136.createElement(Box36, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
     RepeaterTag,
     {
       disabled,
@@ -10614,7 +11344,7 @@ var RepeaterItem = ({
       startIcon,
       actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(Tooltip17, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(IconButton12, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(CopyIcon2, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(Tooltip17, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(IconButton12, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(EyeOffIcon2, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(EyeIcon2, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(Tooltip17, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(IconButton12, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(XIcon4, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(Box35, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(Box36, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = useState27(null);
@@ -10908,9 +11638,11 @@ export {
   injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel,
+  isDeletedCustomIconLibrary,
   isUnitExtendedOption,
   registerControlReplacement,
   resetFontAwesome7IconsCache,
+  resolveCustomIconSvg,
   resolveFontAwesome7Icon,
   trackUpgradePromotionClick,
   trackViewPromotion,