@elementor/editor-controls 4.4.0-1109 → 4.4.0-1111

package/dist/index.js

@@ -108,9 +108,11 @@ __export(index_exports, {
   injectIntoRepeaterItemActions: () => injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon: () => injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel: () => injectIntoRepeaterItemLabel,
+  isDeletedCustomIconLibrary: () => isDeletedCustomIconLibrary,
   isUnitExtendedOption: () => isUnitExtendedOption,
   registerControlReplacement: () => registerControlReplacement,
   resetFontAwesome7IconsCache: () => resetFontAwesome7IconsCache,
+  resolveCustomIconSvg: () => resolveCustomIconSvg,
   resolveFontAwesome7Icon: () => resolveFontAwesome7Icon,
   trackUpgradePromotionClick: () => trackUpgradePromotionClick,
   trackViewPromotion: () => trackViewPromotion,
@@ -5446,7 +5448,7 @@ var React88 = __toESM(require("react"));
 var import_react54 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_props35 = require("@elementor/editor-props");
-var import_ui70 = require("@elementor/ui");
+var import_ui71 = require("@elementor/ui");
 var import_wp_media2 = require("@elementor/wp-media");
 var import_i18n38 = require("@wordpress/i18n");
 
@@ -5521,10 +5523,603 @@ var import_react53 = require("react");
 var import_editor_ui11 = require("@elementor/editor-ui");
 var import_icons23 = require("@elementor/icons");
 var import_session2 = require("@elementor/session");
-var import_ui67 = require("@elementor/ui");
+var import_ui68 = require("@elementor/ui");
 var import_utils6 = require("@elementor/utils");
 var import_i18n35 = require("@wordpress/i18n");
 
+// src/controls/icon-library/custom-icon-libraries.ts
+var import_http_client3 = require("@elementor/http-client");
+var import_query2 = require("@elementor/query");
+
+// src/controls/open-icon-library.ts
+var import_editor_props34 = require("@elementor/editor-props");
+function enqueueIconFonts(library) {
+  window.elementor?.helpers?.enqueueIconFonts?.(library);
+}
+function createIconPropValue(icon, library) {
+  return {
+    value: import_editor_props34.stringPropTypeUtil.create(icon),
+    library: import_editor_props34.stringPropTypeUtil.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 (0, import_query2.useQuery)({
+    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 (0, import_http_client3.httpService)().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" },
@@ -5550,7 +6145,8 @@ function getFontAwesome7EditorConfig() {
   }
   return {
     jsonFiles: config.jsonFiles,
-    jsonBaseUrl
+    jsonBaseUrl,
+    filter: config.filter
   };
 }
 var FONT_AWESOME_ICON_NAME_PATTERN = /^fa\S*\s+fa-([^\s]+)/;
@@ -5741,16 +6337,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) {
@@ -5765,29 +6367,118 @@ function toCatalogIcon(icon, library) {
 
 // src/controls/icon-library/font-awesome-glyph.tsx
 var React81 = __toESM(require("react"));
+var import_ui64 = require("@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(
+      import_ui64.Box,
+      {
+        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
 var React82 = __toESM(require("react"));
 var import_react50 = require("react");
 var import_icons21 = require("@elementor/icons");
-var import_ui64 = require("@elementor/ui");
+var import_ui65 = require("@elementor/ui");
 var import_i18n32 = require("@wordpress/i18n");
 
 // src/controls/icon-library/icon-library-tooltip.ts
@@ -5797,51 +6488,37 @@ 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: () => (0, import_i18n32.__)("Font Awesome - Regular", "elementor"),
-    Icon: import_icons21.StarIcon,
-    order: LIBRARY_FILTER_ORDER.regular
-  },
-  "fa-solid": {
-    getLabel: () => (0, import_i18n32.__)("Font Awesome - Solid", "elementor"),
-    Icon: import_icons21.StarFilledIcon,
-    order: LIBRARY_FILTER_ORDER.solid
-  },
-  "fa-brands": {
-    getLabel: () => (0, import_i18n32.__)("Font Awesome - Brands", "elementor"),
-    Icon: import_icons21.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: import_icons21.ListIcon,
+  star: import_icons21.StarIcon,
+  "star-filled": import_icons21.StarFilledIcon,
+  library: import_icons21.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 = (0, import_react50.useId)();
-  const popupState = (0, import_ui64.usePopupState)({
+  const popupState = (0, import_ui65.usePopupState)({
     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 ? (0, import_i18n32.__)("Filter by library, active", "elementor") : (0, import_i18n32.__)("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(
-    import_ui64.Tooltip,
+    import_ui65.Tooltip,
     {
       title: (0, import_i18n32.__)("Filter by library", "elementor"),
       placement: "top",
@@ -5850,19 +6527,19 @@ var IconLibraryFilter = ({ value, onChange }) => {
       disableInteractive: true
     },
     /* @__PURE__ */ React82.createElement(
-      import_ui64.ToggleButton,
+      import_ui65.ToggleButton,
       {
         "aria-label": filterButtonLabel,
         value: "filter",
         size: "tiny",
         selected: popupState.isOpen,
         sx: { position: "relative", flexShrink: 0 },
-        ...(0, import_ui64.bindToggle)(popupState),
+        ...(0, import_ui65.bindToggle)(popupState),
         "aria-expanded": popupState.isOpen
       },
       /* @__PURE__ */ React82.createElement(import_icons21.FilterIcon, { fontSize: "tiny" }),
       isFiltered ? /* @__PURE__ */ React82.createElement(
-        import_ui64.Box,
+        import_ui65.Box,
         {
           component: "span",
           "aria-hidden": "true",
@@ -5879,9 +6556,9 @@ var IconLibraryFilter = ({ value, onChange }) => {
       ) : null
     )
   ), /* @__PURE__ */ React82.createElement(
-    import_ui64.Menu,
+    import_ui65.Menu,
     {
-      ...(0, import_ui64.bindMenu)(popupState),
+      ...(0, import_ui65.bindMenu)(popupState),
       MenuListProps: {
         dense: true,
         autoFocusItem: true,
@@ -5889,35 +6566,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(import_ui65.Divider, { key: `divider-${index}` }),
+      /* @__PURE__ */ React82.createElement(import_ui65.ListSubheader, { key: `group-${index}`, disableSticky: true }, entry.label)
+    ];
+  }
+  if (entry.type === FILTER_TYPE_ALL) {
+    return [
+      /* @__PURE__ */ React82.createElement(
+        import_ui65.MenuItem,
+        {
+          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(
-      import_ui64.MenuItem,
-      {
-        role: "menuitemcheckbox",
-        "aria-checked": !isFiltered,
-        selected: !isFiltered,
-        onClick: handleAllIconsClick
-      },
-      renderFilterMenuItemContent((0, import_i18n32.__)("All icons", "elementor"), import_icons21.ListIcon, !isFiltered)
-    ),
-    options.map(({ value: library, label, Icon }) => /* @__PURE__ */ React82.createElement(
-      import_ui64.MenuItem,
+      import_ui65.MenuItem,
       {
-        key: library,
+        key: entry.value,
         role: "menuitemcheckbox",
-        "aria-checked": value.includes(library),
-        selected: value.includes(library),
-        onClick: () => handleLibraryClick(library)
+        "aria-checked": isSelected,
+        selected: isSelected,
+        onClick: () => onLibraryClick(entry.value)
       },
-      renderFilterMenuItemContent(label, Icon, value.includes(library))
-    ))
-  ));
+      renderFilterMenuItemContent(entry.label, getFilterIcon(entry.icon), isSelected)
+    )
+  ];
 };
-var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui64.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui64.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null);
+var getFilterIcon = (icon) => FILTER_ICONS[icon ?? ""] ?? import_icons21.LibraryIcon;
+var renderFilterMenuItemContent = (label, Icon, selected) => /* @__PURE__ */ React82.createElement(import_ui65.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React82.createElement(Icon, { fontSize: "tiny" }), /* @__PURE__ */ React82.createElement(import_ui65.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React82.createElement(import_icons21.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
 var React83 = __toESM(require("react"));
 var import_react51 = require("react");
-var import_ui65 = require("@elementor/ui");
+var import_ui66 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 var import_i18n33 = require("@wordpress/i18n");
 var ICON_LIBRARY_GRID_FALLBACK_COLUMN_COUNT = 4;
@@ -5953,7 +6686,7 @@ var IconLibraryGrid = ({
   onClose,
   noResultsComponent
 }) => {
-  const theme = (0, import_ui65.useTheme)();
+  const theme = (0, import_ui66.useTheme)();
   const containerRef = (0, import_react51.useRef)(null);
   const cellRefs = (0, import_react51.useRef)(/* @__PURE__ */ new Map());
   const shouldRestoreFocusRef = (0, import_react51.useRef)(false);
@@ -6063,7 +6796,7 @@ var IconLibraryGrid = ({
     }
   };
   return /* @__PURE__ */ React83.createElement(
-    import_ui65.Box,
+    import_ui66.Box,
     {
       ref: containerRef,
       sx: {
@@ -6075,7 +6808,7 @@ var IconLibraryGrid = ({
       }
     },
     items2.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React83.createElement(
-      import_ui65.Box,
+      import_ui66.Box,
       {
         role: "grid",
         "aria-label": (0, import_i18n33.__)("Icons", "elementor"),
@@ -6093,7 +6826,7 @@ var IconLibraryGrid = ({
         const startIndex = virtualRow.index * columnCount;
         const rowItems = items2.slice(startIndex, startIndex + columnCount);
         return /* @__PURE__ */ React83.createElement(
-          import_ui65.Box,
+          import_ui66.Box,
           {
             key: virtualRow.key,
             role: "row",
@@ -6117,14 +6850,14 @@ var IconLibraryGrid = ({
             const isSelected = selectedValue === item.id;
             const tabIndex = focusedIndex === index ? 0 : -1;
             return /* @__PURE__ */ React83.createElement(
-              import_ui65.Box,
+              import_ui66.Box,
               {
                 key: item.id,
                 role: "presentation",
                 sx: { minWidth: 0, minHeight: 0, width: "100%", height: "100%" }
               },
               /* @__PURE__ */ React83.createElement(
-                import_ui65.Tooltip,
+                import_ui66.Tooltip,
                 {
                   title: item.label,
                   placement: "top",
@@ -6134,7 +6867,7 @@ var IconLibraryGrid = ({
                   disableFocusListener: true
                 },
                 /* @__PURE__ */ React83.createElement(
-                  import_ui65.Box,
+                  import_ui66.Box,
                   {
                     component: "button",
                     type: "button",
@@ -6188,14 +6921,14 @@ var IconLibraryGrid = ({
                       }
                     }
                   },
-                  item.paths.length > 0 ? /* @__PURE__ */ React83.createElement(
+                  /* @__PURE__ */ React83.createElement(
                     FontAwesomeGlyph,
                     {
                       icon: item,
                       size: ICON_GLYPH_SIZE,
                       color: "currentColor"
                     }
-                  ) : null
+                  )
                 )
               )
             );
@@ -6210,12 +6943,12 @@ var IconLibraryGrid = ({
 var React84 = __toESM(require("react"));
 var import_react52 = require("react");
 var import_icons22 = require("@elementor/icons");
-var import_ui66 = require("@elementor/ui");
+var import_ui67 = require("@elementor/ui");
 var import_i18n34 = require("@wordpress/i18n");
 var VIEW_MENU_WIDTH = 122;
 var IconLibraryViewToggle = ({ value, onChange }) => {
   const popupId = (0, import_react52.useId)();
-  const popupState = (0, import_ui66.usePopupState)({
+  const popupState = (0, import_ui67.usePopupState)({
     variant: "popover",
     popupId
   });
@@ -6223,7 +6956,7 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
   const ViewIcon = isGrid ? import_icons22.WidgetsIcon : import_icons22.ListIcon;
   const viewButtonLabel = isGrid ? (0, import_i18n34.__)("Grid view", "elementor") : (0, import_i18n34.__)("List view", "elementor");
   return /* @__PURE__ */ React84.createElement(React84.Fragment, null, /* @__PURE__ */ React84.createElement(
-    import_ui66.Tooltip,
+    import_ui67.Tooltip,
     {
       title: viewButtonLabel,
       placement: "top",
@@ -6232,22 +6965,22 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
       disableInteractive: true
     },
     /* @__PURE__ */ React84.createElement(
-      import_ui66.ToggleButton,
+      import_ui67.ToggleButton,
       {
         "aria-label": viewButtonLabel,
         value: "view",
         size: "tiny",
         selected: popupState.isOpen,
         sx: { flexShrink: 0 },
-        ...(0, import_ui66.bindToggle)(popupState),
+        ...(0, import_ui67.bindToggle)(popupState),
         "aria-expanded": popupState.isOpen
       },
       /* @__PURE__ */ React84.createElement(ViewIcon, { fontSize: "tiny" })
     )
   ), /* @__PURE__ */ React84.createElement(
-    import_ui66.Menu,
+    import_ui67.Menu,
     {
-      ...(0, import_ui66.bindMenu)(popupState),
+      ...(0, import_ui67.bindMenu)(popupState),
       MenuListProps: {
         dense: true,
         autoFocusItem: true,
@@ -6279,13 +7012,13 @@ var IconLibraryViewToggle = ({ value, onChange }) => {
     )
   ));
 };
-var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(import_ui66.MenuItem, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(import_ui66.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(import_ui66.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(import_icons22.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null));
+var ViewMenuItem = ({ label, selected, onClick }) => /* @__PURE__ */ React84.createElement(import_ui67.MenuItem, { role: "menuitemradio", "aria-checked": selected, selected, onClick }, /* @__PURE__ */ React84.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, width: "100%" }, /* @__PURE__ */ React84.createElement(import_ui67.Typography, { variant: "caption", sx: { flex: 1 } }, label), selected ? /* @__PURE__ */ React84.createElement(import_icons22.CheckIcon, { fontSize: "tiny", "aria-hidden": "true" }) : null));
 
 // src/controls/icon-library/use-font-awesome-7-catalog.ts
-var import_query2 = require("@elementor/query");
+var import_query3 = require("@elementor/query");
 var FONT_AWESOME_7_CATALOG_QUERY_KEY = ["font-awesome-7-catalog"];
 function useFontAwesome7Catalog(enabled) {
-  return (0, import_query2.useQuery)({
+  return (0, import_query3.useQuery)({
     queryKey: FONT_AWESOME_7_CATALOG_QUERY_KEY,
     queryFn: ({ signal }) => loadFontAwesome7Catalog(signal),
     enabled,
@@ -6306,7 +7039,7 @@ var isIconLibraryView = (value) => {
 var ICON_TILE_SIZE = 40;
 var ICON_GLYPH_SIZE2 = 20;
 var ICON_LIBRARY_INLINE_SPACING = 1;
-var CompactIconLibraryMenuList = (0, import_ui67.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
+var CompactIconLibraryMenuList = (0, import_ui68.styled)(import_editor_ui11.StyledMenuList)(({ theme }) => ({
   '& > [role="option"]': {
     padding: theme.spacing(0.75, ICON_LIBRARY_INLINE_SPACING)
   }
@@ -6331,7 +7064,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 = (0, import_react53.useMemo)(() => [...fontAwesomeIcons, ...customIcons], [customIcons, fontAwesomeIcons]);
   const items2 = (0, import_react53.useMemo)(
     () => createIconLibraryItems(icons, searchValue, activeLibraries),
     [activeLibraries, icons, searchValue]
@@ -6351,7 +7087,7 @@ var IconLibraryPopover = ({
       return;
     }
     onSelect({
-      value: createIconSelectionValue(icon.library, icon.name),
+      value: icon.glyphClass ?? createIconSelectionValue(icon.library, icon.name),
       library: icon.library
     });
   };
@@ -6367,7 +7103,7 @@ var IconLibraryPopover = ({
       actions: [/* @__PURE__ */ React85.createElement(IconLibraryViewToggle, { key: "view", value: view, onChange: setStoredView })],
       sx: { pl: ICON_LIBRARY_INLINE_SPACING, pr: 0.5 }
     }
-  ), /* @__PURE__ */ React85.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React85.createElement(
+  ), /* @__PURE__ */ React85.createElement(import_ui68.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { px: ICON_LIBRARY_INLINE_SPACING, pb: 1 } }, /* @__PURE__ */ React85.createElement(
     import_editor_ui11.SearchField,
     {
       value: searchInputValue,
@@ -6376,7 +7112,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(import_ui67.Divider, null), /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
+  ), /* @__PURE__ */ React85.createElement(IconLibraryFilter, { value: activeLibraries, onChange: setActiveLibraries })), /* @__PURE__ */ React85.createElement(import_ui68.Divider, null), /* @__PURE__ */ React85.createElement(import_ui68.Box, { sx: { flex: 1, overflow: "hidden", minHeight: 0, minWidth: 0 } }, /* @__PURE__ */ React85.createElement(
     IconLibraryContent,
     {
       isLoading,
@@ -6414,7 +7150,7 @@ var IconLibraryContent = ({
     }
   );
   if (view === "grid") {
-    return /* @__PURE__ */ React85.createElement(import_ui67.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
+    return /* @__PURE__ */ React85.createElement(import_ui68.Box, { sx: { width: "100%", height: "100%", minWidth: 0, minHeight: 0 } }, /* @__PURE__ */ React85.createElement(
       IconLibraryGrid,
       {
         items: items2,
@@ -6440,7 +7176,7 @@ var IconLibraryContent = ({
     }
   );
 };
-var IconLibraryLoadingState = () => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React85.createElement(import_ui67.CircularProgress, { role: "progressbar", size: 24 }));
+var IconLibraryLoadingState = () => /* @__PURE__ */ React85.createElement(import_ui68.Stack, { alignItems: "center", justifyContent: "center", height: "100%" }, /* @__PURE__ */ React85.createElement(import_ui68.CircularProgress, { role: "progressbar", size: 24 }));
 var IconLibraryEmptyState = ({
   searchValue,
   isCatalogAvailable,
@@ -6453,8 +7189,8 @@ var IconLibraryEmptyState = ({
 };
 var IconLibraryRow = (item) => {
   const icon = item;
-  return /* @__PURE__ */ React85.createElement(import_ui67.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
-    import_ui67.Box,
+  return /* @__PURE__ */ React85.createElement(import_ui68.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { width: "100%" } }, /* @__PURE__ */ React85.createElement(
+    import_ui68.Box,
     {
       sx: {
         width: ICON_TILE_SIZE,
@@ -6469,30 +7205,21 @@ var IconLibraryRow = (item) => {
         flexShrink: 0
       }
     },
-    icon.paths.length > 0 ? /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" }) : null
-  ), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
+    /* @__PURE__ */ React85.createElement(FontAwesomeGlyph, { icon, size: ICON_GLYPH_SIZE2, color: "currentColor" })
+  ), /* @__PURE__ */ React85.createElement(import_ui68.Typography, { variant: "caption", color: "text.primary", noWrap: true }, icon.label));
 };
-var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
-var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React85.createElement(import_ui67.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(import_ui67.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React85.createElement(import_ui67.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
+var CatalogUnavailable = () => /* @__PURE__ */ React85.createElement(import_ui68.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui68.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Icons couldn't be loaded.", "elementor")));
+var NoResults = ({ searchValue, onClear }) => /* @__PURE__ */ React85.createElement(import_ui68.Stack, { alignItems: "center", justifyContent: "center", height: "100%", p: 2.5, gap: 1.5 }, /* @__PURE__ */ React85.createElement(import_icons23.ComponentsIcon, { fontSize: "large" }), /* @__PURE__ */ React85.createElement(import_ui68.Typography, { align: "center", variant: "subtitle2", color: "text.secondary" }, (0, import_i18n35.__)("Sorry, nothing matched", "elementor")), searchValue ? /* @__PURE__ */ React85.createElement(React85.Fragment, null, /* @__PURE__ */ React85.createElement(import_ui68.Typography, { align: "center", variant: "subtitle2", color: "text.secondary", noWrap: true, sx: { maxWidth: "80%" } }, "\u201C", searchValue, "\u201D."), /* @__PURE__ */ React85.createElement(import_ui68.Link, { color: "secondary", variant: "caption", component: "button", type: "button", onClick: onClear }, (0, import_i18n35.__)("Clear & try again", "elementor"))) : null);
 var createIconLibraryItems = (icons, searchValue, libraries) => filterFontAwesome7Icons(icons, searchValue, libraries).map((icon) => ({
   ...icon,
   type: "item",
   value: icon.id
 }));
 
-// src/controls/open-icon-library.ts
-var import_editor_props34 = require("@elementor/editor-props");
-function createIconPropValue(icon, library) {
-  return {
-    value: import_editor_props34.stringPropTypeUtil.create(icon),
-    library: import_editor_props34.stringPropTypeUtil.create(library)
-  };
-}
-
 // src/controls/svg-media-overlay.tsx
 var React86 = __toESM(require("react"));
 var import_icons24 = require("@elementor/icons");
-var import_ui68 = require("@elementor/ui");
+var import_ui69 = require("@elementor/ui");
 var import_i18n36 = require("@wordpress/i18n");
 var SVG_MEDIA_CONTROL_CONTAINER_TEST_ID = "svg-media-control-container";
 var SVG_MEDIA_ACTION_GROUP_TEST_ID = "svg-media-action-group";
@@ -6503,7 +7230,7 @@ var svgButtonSx = {
   px: MEDIA_ACTION_PADDING_X,
   py: MEDIA_ACTION_PADDING_Y
 };
-var MediaActionGroup = (0, import_ui68.styled)(import_ui68.Stack)(({ theme }) => ({
+var MediaActionGroup = (0, import_ui69.styled)(import_ui69.Stack)(({ theme }) => ({
   display: "inline-flex",
   flexDirection: "row",
   alignItems: "stretch",
@@ -6525,8 +7252,8 @@ var SvgMediaOverlay = ({
   onOpenIconLibrary,
   infotipTitle,
   infotipDescription
-}) => /* @__PURE__ */ React86.createElement(import_ui68.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React86.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React86.createElement(
-  import_ui68.Button,
+}) => /* @__PURE__ */ React86.createElement(import_ui69.Stack, { alignItems: "center", gap: 1 }, /* @__PURE__ */ React86.createElement(MediaActionGroup, { ref: buttonGroupRef, direction: "row", "data-testid": SVG_MEDIA_ACTION_GROUP_TEST_ID }, /* @__PURE__ */ React86.createElement(
+  import_ui69.Button,
   {
     size: "tiny",
     color: "inherit",
@@ -6537,7 +7264,7 @@ var SvgMediaOverlay = ({
   },
   (0, import_i18n36.__)("Select", "elementor")
 ), /* @__PURE__ */ React86.createElement(
-  import_ui68.Box,
+  import_ui69.Box,
   {
     sx: {
       width: "1px",
@@ -6553,9 +7280,9 @@ var SvgMediaOverlay = ({
     description: infotipDescription,
     isEnabled: !isAdmin
   },
-  /* @__PURE__ */ React86.createElement(import_ui68.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
+  /* @__PURE__ */ React86.createElement(import_ui69.Box, { component: "span", sx: { display: "inline-flex" } }, /* @__PURE__ */ React86.createElement(UploadControl, { isAdmin, onUpload }))
 )), showIconLibrary ? /* @__PURE__ */ React86.createElement(
-  import_ui68.Button,
+  import_ui69.Button,
   {
     size: "tiny",
     color: "inherit",
@@ -6569,20 +7296,20 @@ var SvgMediaOverlay = ({
       ".MuiButton-icon": { ml: 0 }
     }
   },
-  /* @__PURE__ */ React86.createElement(import_ui68.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
+  /* @__PURE__ */ React86.createElement(import_ui69.Typography, null, (0, import_i18n36.__)("Icon library", "elementor"))
 ) : null);
 var UploadControl = ({ isAdmin, onUpload }) => {
   if (isAdmin) {
     return /* @__PURE__ */ React86.createElement(UploadButton, { sx: svgButtonSx, onClick: onUpload });
   }
-  return /* @__PURE__ */ React86.createElement(import_ui68.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React86.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
+  return /* @__PURE__ */ React86.createElement(import_ui69.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React86.createElement(UploadButton, { disabled: true, sx: svgButtonSx }));
 };
 var UploadButton = ({
   disabled = false,
   sx,
   onClick
 }) => /* @__PURE__ */ React86.createElement(
-  import_ui68.Button,
+  import_ui69.Button,
   {
     sx,
     size: "tiny",
@@ -6597,16 +7324,19 @@ var UploadButton = ({
 
 // src/controls/svg-media-preview.tsx
 var React87 = __toESM(require("react"));
-var import_ui69 = require("@elementor/ui");
+var import_ui70 = require("@elementor/ui");
 var import_i18n37 = require("@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) {
-    return /* @__PURE__ */ React87.createElement(import_ui69.CircularProgress, { role: "progressbar" });
+  const isLoadingCatalog = shouldLoadIconCatalog && (isFontAwesomeLoading || isCustomLoading);
+  if (isFetching || isLoadingCatalog) {
+    return /* @__PURE__ */ React87.createElement(import_ui70.CircularProgress, { role: "progressbar" });
   }
   if (selectedIcon) {
     return /* @__PURE__ */ React87.createElement(IconPreview, { icon: selectedIcon });
@@ -6616,7 +7346,7 @@ var SvgMediaPreview = ({ isFetching, src, iconClassName, iconLibrary }) => {
   }
   return /* @__PURE__ */ React87.createElement(SvgPreview, { src });
 };
-var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui69.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
+var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui70.Box, { sx: { color: ICON_PREVIEW_COLOR } }, /* @__PURE__ */ React87.createElement(
   FontAwesomeGlyph,
   {
     icon,
@@ -6626,7 +7356,7 @@ var IconPreview = ({ icon }) => /* @__PURE__ */ React87.createElement(import_ui6
   }
 ));
 var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
-  import_ui69.Box,
+  import_ui70.Box,
   {
     "aria-hidden": true,
     sx: {
@@ -6637,7 +7367,7 @@ var IconPreviewPlaceholder = () => /* @__PURE__ */ React87.createElement(
   }
 );
 var SvgPreview = ({ src }) => /* @__PURE__ */ React87.createElement(
-  import_ui69.CardMedia,
+  import_ui70.CardMedia,
   {
     component: "img",
     image: src,
@@ -6651,7 +7381,7 @@ var TILE_SIZE = 8;
 var TILE_WHITE = "transparent";
 var TILE_BLACK = "#c1c1c1";
 var TILES_GRADIENT_FORMULA = `linear-gradient(45deg, ${TILE_BLACK} 25%, ${TILE_WHITE} 0, ${TILE_WHITE} 75%, ${TILE_BLACK} 0, ${TILE_BLACK})`;
-var StyledCard = (0, import_ui70.styled)(import_ui70.Card)`
+var StyledCard = (0, import_ui71.styled)(import_ui71.Card)`
 	position: relative;
 	background-color: white;
 	background-image: ${TILES_GRADIENT_FORMULA}, ${TILES_GRADIENT_FORMULA};
@@ -6662,7 +7392,7 @@ var StyledCard = (0, import_ui70.styled)(import_ui70.Card)`
 	border: none;
 `;
 var PREVIEW_ICON_COLOR = "#000000";
-var StyledCardMediaContainer = (0, import_ui70.styled)(import_ui70.Stack)`
+var StyledCardMediaContainer = (0, import_ui71.styled)(import_ui71.Stack)`
 	position: relative;
 	height: 140px;
 	object-fit: contain;
@@ -6683,7 +7413,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
   const src = attachment?.url ?? url?.value ?? null;
   const { data: allowSvgUpload } = useUnfilteredFilesUpload();
   const [unfilteredModalOpenState, setUnfilteredModalOpenState] = (0, import_react54.useState)(false);
-  const iconLibraryPopoverState = (0, import_ui70.usePopupState)({ variant: "popover" });
+  const iconLibraryPopoverState = (0, import_ui71.usePopupState)({ variant: "popover" });
   const controlContainerRef = (0, import_react54.useRef)(null);
   const buttonGroupRef = (0, import_react54.useRef)(null);
   const [iconLibraryAnchor, setIconLibraryAnchor] = (0, import_react54.useState)(null);
@@ -6754,8 +7484,8 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
     };
   }, [iconLibraryPopoverState.isOpen]);
   const iconLibraryWidth = iconLibraryAnchor?.width ?? ICON_LIBRARY_POPOVER_WIDTH;
-  return /* @__PURE__ */ React88.createElement(import_ui70.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React88.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React88.createElement(
-    import_ui70.Popover,
+  return /* @__PURE__ */ React88.createElement(import_ui71.Stack, { gap: 1, "aria-label": (0, import_i18n38.__)("SVG control", "elementor") }, /* @__PURE__ */ React88.createElement(EnableUnfilteredModal, { open: unfilteredModalOpenState, onClose: handleCloseUnfilteredModal }), showIconLibrary && iconLibraryAnchor ? /* @__PURE__ */ React88.createElement(
+    import_ui71.Popover,
     {
       disableScrollLock: true,
       open: iconLibraryPopoverState.isOpen,
@@ -6786,7 +7516,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
       }
     )
   ) : null, /* @__PURE__ */ React88.createElement(
-    import_ui70.Box,
+    import_ui71.Box,
     {
       ref: controlContainerRef,
       "data-testid": SVG_MEDIA_CONTROL_CONTAINER_TEST_ID,
@@ -6801,7 +7531,7 @@ var SvgMediaControl = createControl(({ showIconLibrary = false }) => {
         iconLibrary: selectedIconLibrary
       }
     )), /* @__PURE__ */ React88.createElement(
-      import_ui70.CardOverlay,
+      import_ui71.CardOverlay,
       {
         sx: {
           "&:hover": {
@@ -6831,7 +7561,7 @@ var UnfilteredUploadInfotipDescription = () => /* @__PURE__ */ React88.createEle
 var React89 = __toESM(require("react"));
 var import_editor_props36 = require("@elementor/editor-props");
 var import_icons25 = require("@elementor/icons");
-var import_ui71 = require("@elementor/ui");
+var import_ui72 = require("@elementor/ui");
 var import_wp_media3 = require("@elementor/wp-media");
 var import_i18n39 = require("@wordpress/i18n");
 var PLACEHOLDER_IMAGE = window.elementorCommon?.config?.urls?.assets + "/shapes/play-triangle.svg";
@@ -6863,8 +7593,8 @@ var VideoMediaControl = createControl(() => {
       });
     }
   });
-  return /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(import_ui71.Card, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(
-    import_ui71.CardMedia,
+  return /* @__PURE__ */ React89.createElement(ControlActions, null, /* @__PURE__ */ React89.createElement(import_ui72.Card, { variant: "outlined" }, /* @__PURE__ */ React89.createElement(
+    import_ui72.CardMedia,
     {
       sx: {
         height: 140,
@@ -6879,8 +7609,8 @@ var VideoMediaControl = createControl(() => {
       }
     },
     /* @__PURE__ */ React89.createElement(VideoPreview, { isFetching, videoUrl })
-  ), /* @__PURE__ */ React89.createElement(import_ui71.CardOverlay, null, /* @__PURE__ */ React89.createElement(import_ui71.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(
-    import_ui71.Button,
+  ), /* @__PURE__ */ React89.createElement(import_ui72.CardOverlay, null, /* @__PURE__ */ React89.createElement(import_ui72.Stack, { gap: 1 }, /* @__PURE__ */ React89.createElement(
+    import_ui72.Button,
     {
       size: "tiny",
       color: "inherit",
@@ -6889,7 +7619,7 @@ var VideoMediaControl = createControl(() => {
     },
     (0, import_i18n39.__)("Select video", "elementor")
   ), /* @__PURE__ */ React89.createElement(
-    import_ui71.Button,
+    import_ui72.Button,
     {
       size: "tiny",
       variant: "text",
@@ -6899,7 +7629,7 @@ var VideoMediaControl = createControl(() => {
     },
     (0, import_i18n39.__)("Upload", "elementor")
   ), /* @__PURE__ */ React89.createElement(
-    import_ui71.Button,
+    import_ui72.Button,
     {
       size: "tiny",
       variant: "text",
@@ -6911,7 +7641,7 @@ var VideoMediaControl = createControl(() => {
 });
 var VideoPreview = ({ isFetching = false, videoUrl }) => {
   if (isFetching) {
-    return /* @__PURE__ */ React89.createElement(import_ui71.CircularProgress, null);
+    return /* @__PURE__ */ React89.createElement(import_ui72.CircularProgress, null);
   }
   if (videoUrl) {
     return /* @__PURE__ */ React89.createElement(
@@ -6936,13 +7666,13 @@ var VideoPreview = ({ isFetching = false, videoUrl }) => {
 // src/controls/background-control/background-control.tsx
 var React96 = __toESM(require("react"));
 var import_editor_props42 = require("@elementor/editor-props");
-var import_ui79 = require("@elementor/ui");
+var import_ui80 = require("@elementor/ui");
 var import_i18n45 = require("@wordpress/i18n");
 
 // src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx
 var React95 = __toESM(require("react"));
 var import_editor_props41 = require("@elementor/editor-props");
-var import_ui78 = require("@elementor/ui");
+var import_ui79 = require("@elementor/ui");
 var import_wp_media4 = require("@elementor/wp-media");
 var import_i18n44 = require("@wordpress/i18n");
 
@@ -6953,7 +7683,7 @@ var { env } = (0, import_env.parseEnv)("@elementor/editor-controls");
 // src/controls/background-control/background-gradient-color-control.tsx
 var React90 = __toESM(require("react"));
 var import_editor_props37 = require("@elementor/editor-props");
-var import_ui72 = require("@elementor/ui");
+var import_ui73 = require("@elementor/ui");
 var BackgroundGradientColorControl = createControl(() => {
   const { value, setValue } = useBoundProp(import_editor_props37.backgroundGradientOverlayPropTypeUtil);
   const handleChange = (newValue) => {
@@ -6992,7 +7722,7 @@ var BackgroundGradientColorControl = createControl(() => {
     };
   };
   return /* @__PURE__ */ React90.createElement(
-    import_ui72.UnstableGradientBox,
+    import_ui73.UnstableGradientBox,
     {
       sx: { width: "auto", padding: 1.5 },
       value: normalizeValue(),
@@ -7018,7 +7748,7 @@ var initialBackgroundGradientOverlay = import_editor_props37.backgroundGradientO
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-attachment.tsx
 var React91 = __toESM(require("react"));
 var import_icons26 = require("@elementor/icons");
-var import_ui73 = require("@elementor/ui");
+var import_ui74 = require("@elementor/ui");
 var import_i18n40 = require("@wordpress/i18n");
 var attachmentControlOptions = [
   {
@@ -7035,7 +7765,7 @@ var attachmentControlOptions = [
   }
 ];
 var BackgroundImageOverlayAttachment = () => {
-  return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui73.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: attachmentControlOptions })));
+  return /* @__PURE__ */ React91.createElement(PopoverGridContainer, null, /* @__PURE__ */ React91.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React91.createElement(ControlFormLabel, null, (0, import_i18n40.__)("Attachment", "elementor"))), /* @__PURE__ */ React91.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React91.createElement(ToggleControl, { options: attachmentControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx
@@ -7044,7 +7774,7 @@ var import_react55 = require("react");
 var import_editor_props38 = require("@elementor/editor-props");
 var import_editor_ui12 = require("@elementor/editor-ui");
 var import_icons27 = require("@elementor/icons");
-var import_ui74 = require("@elementor/ui");
+var import_ui75 = require("@elementor/ui");
 var import_i18n41 = require("@wordpress/i18n");
 var backgroundPositionOptions = [
   { label: (0, import_i18n41.__)("Center center", "elementor"), value: "center center" },
@@ -7071,8 +7801,8 @@ var BackgroundImageOverlayPosition = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ControlActions, null, /* @__PURE__ */ React92.createElement(
-    import_ui74.Select,
+  return /* @__PURE__ */ React92.createElement(import_ui75.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(PopoverGridContainer, null, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(ControlFormLabel, null, (0, import_i18n41.__)("Position", "elementor"))), /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end", overflow: "hidden" } }, /* @__PURE__ */ React92.createElement(ControlActions, null, /* @__PURE__ */ React92.createElement(
+    import_ui75.Select,
     {
       fullWidth: true,
       size: "tiny",
@@ -7081,14 +7811,14 @@ var BackgroundImageOverlayPosition = () => {
       value: (backgroundImageOffsetContext.value ? "custom" : stringPropContext.value) ?? ""
     },
     backgroundPositionOptions.map(({ label, value }) => /* @__PURE__ */ React92.createElement(import_editor_ui12.MenuListItem, { key: value, value: value ?? "" }, label))
-  ))))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
+  ))))), isCustom ? /* @__PURE__ */ React92.createElement(PropProvider, { ...backgroundImageOffsetContext }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React92.createElement(
     SizeControl,
     {
       startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterXIcon, { fontSize: "tiny" }),
       anchorRef: rowRef,
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React92.createElement(import_ui74.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
+  ))), /* @__PURE__ */ React92.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React92.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React92.createElement(
     SizeControl,
     {
       startIcon: /* @__PURE__ */ React92.createElement(import_icons27.LetterYIcon, { fontSize: "tiny" }),
@@ -7101,7 +7831,7 @@ var BackgroundImageOverlayPosition = () => {
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-repeat.tsx
 var React93 = __toESM(require("react"));
 var import_icons28 = require("@elementor/icons");
-var import_ui75 = require("@elementor/ui");
+var import_ui76 = require("@elementor/ui");
 var import_i18n42 = require("@wordpress/i18n");
 var repeatControlOptions = [
   {
@@ -7130,7 +7860,7 @@ var repeatControlOptions = [
   }
 ];
 var BackgroundImageOverlayRepeat = () => {
-  return /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui75.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui75.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React93.createElement(ToggleControl, { options: repeatControlOptions })));
+  return /* @__PURE__ */ React93.createElement(PopoverGridContainer, null, /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React93.createElement(ControlFormLabel, null, (0, import_i18n42.__)("Repeat", "elementor"))), /* @__PURE__ */ React93.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React93.createElement(ToggleControl, { options: repeatControlOptions })));
 };
 
 // src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx
@@ -7138,7 +7868,7 @@ var React94 = __toESM(require("react"));
 var import_react56 = require("react");
 var import_editor_props39 = require("@elementor/editor-props");
 var import_icons29 = require("@elementor/icons");
-var import_ui76 = require("@elementor/ui");
+var import_ui77 = require("@elementor/ui");
 var import_i18n43 = require("@wordpress/i18n");
 var sizeControlOptions = [
   {
@@ -7178,7 +7908,7 @@ var BackgroundImageOverlaySize = () => {
       stringPropContext.setValue(size);
     }
   };
-  return /* @__PURE__ */ React94.createElement(import_ui76.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(
+  return /* @__PURE__ */ React94.createElement(import_ui77.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(ControlFormLabel, null, (0, import_i18n43.__)("Size", "elementor"))), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6, sx: { display: "flex", justifyContent: "flex-end" } }, /* @__PURE__ */ React94.createElement(
     ControlToggleButtonGroup,
     {
       exclusive: true,
@@ -7187,14 +7917,14 @@ var BackgroundImageOverlaySize = () => {
       disabled: stringPropContext.disabled,
       value: backgroundImageScaleContext.value ? "custom" : stringPropContext.value
     }
-  )))), isCustom ? /* @__PURE__ */ React94.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React94.createElement(
+  )))), isCustom ? /* @__PURE__ */ React94.createElement(PropProvider, { ...backgroundImageScaleContext }, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 12, ref: rowRef }, /* @__PURE__ */ React94.createElement(PopoverGridContainer, null, /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "width" }, /* @__PURE__ */ React94.createElement(
     SizeControl,
     {
       startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveHorizontalIcon, { fontSize: "tiny" }),
       extendedOptions: ["auto"],
       anchorRef: rowRef
     }
-  ))), /* @__PURE__ */ React94.createElement(import_ui76.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React94.createElement(
+  ))), /* @__PURE__ */ React94.createElement(import_ui77.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React94.createElement(PropKeyProvider, { bind: "height" }, /* @__PURE__ */ React94.createElement(
     SizeControl,
     {
       startIcon: /* @__PURE__ */ React94.createElement(import_icons29.ArrowsMoveVerticalIcon, { fontSize: "tiny" }),
@@ -7207,7 +7937,7 @@ var BackgroundImageOverlaySize = () => {
 // src/controls/background-control/background-overlay/use-background-tabs-history.ts
 var import_react57 = require("react");
 var import_editor_props40 = require("@elementor/editor-props");
-var import_ui77 = require("@elementor/ui");
+var import_ui78 = require("@elementor/ui");
 var useBackgroundTabsHistory = ({
   color: initialBackgroundColorOverlay2,
   image: initialBackgroundImageOverlay,
@@ -7225,7 +7955,7 @@ var useBackgroundTabsHistory = ({
     }
     return "image";
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui77.useTabs)(getCurrentOverlayType());
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui78.useTabs)(getCurrentOverlayType());
   const valuesHistory = (0, import_react57.useRef)({
     image: initialBackgroundImageOverlay,
     color: initialBackgroundColorOverlay2,
@@ -7326,18 +8056,18 @@ var ItemContent2 = () => {
     gradient: initialBackgroundGradientOverlay.value
   });
   const { rowRef } = useRepeaterContext();
-  return /* @__PURE__ */ React95.createElement(import_ui78.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(import_ui78.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
-    import_ui78.Tabs,
+  return /* @__PURE__ */ React95.createElement(import_ui79.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React95.createElement(import_ui79.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React95.createElement(
+    import_ui79.Tabs,
     {
       size: "small",
       variant: "fullWidth",
       ...getTabsProps(),
       "aria-label": (0, import_i18n44.__)("Background Overlay", "elementor")
     },
-    /* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
-    /* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
-    /* @__PURE__ */ React95.createElement(import_ui78.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
-  )), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React95.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React95.createElement(import_ui78.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
+    /* @__PURE__ */ React95.createElement(import_ui79.Tab, { label: (0, import_i18n44.__)("Image", "elementor"), ...getTabProps("image") }),
+    /* @__PURE__ */ React95.createElement(import_ui79.Tab, { label: (0, import_i18n44.__)("Gradient", "elementor"), ...getTabProps("gradient") }),
+    /* @__PURE__ */ React95.createElement(import_ui79.Tab, { label: (0, import_i18n44.__)("Color", "elementor"), ...getTabProps("color") })
+  )), /* @__PURE__ */ React95.createElement(import_ui79.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("image") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ImageOverlayContent, null))), /* @__PURE__ */ React95.createElement(import_ui79.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("gradient") }, /* @__PURE__ */ React95.createElement(BackgroundGradientColorControl, null)), /* @__PURE__ */ React95.createElement(import_ui79.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps("color") }, /* @__PURE__ */ React95.createElement(PopoverContent, null, /* @__PURE__ */ React95.createElement(ColorOverlayContent, { anchorEl: rowRef }))));
 };
 var ItemIcon2 = ({ value }) => {
   switch (value.$$type) {
@@ -7364,7 +8094,7 @@ var ItemIconColor = ({ value: prop }) => {
 var ItemIconImage = ({ value }) => {
   const { imageUrl } = useImage(value);
   return /* @__PURE__ */ React95.createElement(
-    import_ui78.CardMedia,
+    import_ui79.CardMedia,
     {
       image: imageUrl,
       sx: (theme) => ({
@@ -7414,7 +8144,7 @@ var ImageOverlayContent = () => {
   const propContext = useBoundProp(import_editor_props41.backgroundImageOverlayPropTypeUtil);
   return /* @__PURE__ */ React95.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "image" }, /* @__PURE__ */ React95.createElement(ImageControl, { sizes: backgroundResolutionOptions })), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "position" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayPosition, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "repeat" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayRepeat, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlaySize, null)), /* @__PURE__ */ React95.createElement(PropKeyProvider, { bind: "attachment" }, /* @__PURE__ */ React95.createElement(BackgroundImageOverlayAttachment, null)));
 };
-var StyledUnstableColorIndicator3 = (0, import_ui78.styled)(import_ui78.UnstableColorIndicator)(({ theme }) => ({
+var StyledUnstableColorIndicator3 = (0, import_ui79.styled)(import_ui79.UnstableColorIndicator)(({ theme }) => ({
   height: "1rem",
   width: "1rem",
   borderRadius: `${theme.shape.borderRadius / 2}px`
@@ -7465,17 +8195,17 @@ var BackgroundControl = createControl(() => {
   return /* @__PURE__ */ React96.createElement(PropProvider, { ...propContext }, /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "background-overlay" }, /* @__PURE__ */ React96.createElement(BackgroundOverlayRepeaterControl, null)), /* @__PURE__ */ React96.createElement(BackgroundColorField, null), /* @__PURE__ */ React96.createElement(BackgroundClipField, null));
 });
 var BackgroundColorField = () => {
-  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ColorControl, null))));
+  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "color" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, colorLabel)), /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ColorControl, null))));
 };
 var BackgroundClipField = () => {
-  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React96.createElement(import_ui79.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(SelectControl, { options: clipOptions }))));
+  return /* @__PURE__ */ React96.createElement(PropKeyProvider, { bind: "clip" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(ControlLabel, null, clipLabel)), /* @__PURE__ */ React96.createElement(import_ui80.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React96.createElement(SelectControl, { options: clipOptions }))));
 };
 
 // src/controls/repeatable-control.tsx
 var React97 = __toESM(require("react"));
 var import_react58 = require("react");
 var import_editor_props43 = require("@elementor/editor-props");
-var import_ui80 = require("@elementor/ui");
+var import_ui81 = require("@elementor/ui");
 var PLACEHOLDER_REGEX = /\$\{([^}]+)\}/g;
 var RepeatableControl = createControl(
   ({
@@ -7621,7 +8351,7 @@ var ItemLabel4 = ({ value }) => {
   const label = showPlaceholder ? placeholder : interpolate(patternLabel, value);
   const isReadOnly = !!childProps?.readOnly;
   const color = getTextColor(isReadOnly, showPlaceholder);
-  return /* @__PURE__ */ React97.createElement(import_ui80.Box, { component: "span", color }, label);
+  return /* @__PURE__ */ React97.createElement(import_ui81.Box, { component: "span", color }, label);
 };
 var getAllProperties = (pattern) => {
   const properties = pattern.match(PLACEHOLDER_REGEX)?.map((match) => match.slice(2, -1)) || [];
@@ -7632,7 +8362,7 @@ var getAllProperties = (pattern) => {
 var React98 = __toESM(require("react"));
 var import_react59 = require("react");
 var import_editor_props44 = require("@elementor/editor-props");
-var import_ui81 = require("@elementor/ui");
+var import_ui82 = require("@elementor/ui");
 var import_i18n46 = require("@wordpress/i18n");
 
 // src/utils/escape-html-attr.ts
@@ -7722,14 +8452,14 @@ var KeyValueControl = createControl((props = {}) => {
       });
     }
   };
-  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui81.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React98.createElement(
+  return /* @__PURE__ */ React98.createElement(PropProvider, { ...propContext, value, setValue: handleChange }, /* @__PURE__ */ React98.createElement(import_ui82.Grid, { container: true, gap: 1.5 }, /* @__PURE__ */ React98.createElement(import_ui82.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui82.FormLabel, { size: "tiny", sx: { pb: 1 } }, keyLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "key" }, /* @__PURE__ */ React98.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.key) : sessionState.key,
       error: !!keyError,
       helperText: keyHelper
     }
-  )), !!keyError && /* @__PURE__ */ React98.createElement(import_ui81.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React98.createElement(import_ui81.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui81.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React98.createElement(
+  )), !!keyError && /* @__PURE__ */ React98.createElement(import_ui82.FormHelperText, { error: true }, keyError)), /* @__PURE__ */ React98.createElement(import_ui82.Grid, { item: true, xs: 12, display: "flex", flexDirection: "column" }, /* @__PURE__ */ React98.createElement(import_ui82.FormLabel, { size: "tiny", sx: { pb: 1 } }, valueLabel), /* @__PURE__ */ React98.createElement(PropKeyProvider, { bind: "value" }, /* @__PURE__ */ React98.createElement(
     TextControl,
     {
       inputValue: props.escapeHtml ? escapeHtmlAttr(sessionState.value) : sessionState.value,
@@ -7737,7 +8467,7 @@ var KeyValueControl = createControl((props = {}) => {
       inputDisabled: !!keyError,
       helperText: valueHelper
     }
-  )), !!valueError && /* @__PURE__ */ React98.createElement(import_ui81.FormHelperText, { error: true }, valueError))));
+  )), !!valueError && /* @__PURE__ */ React98.createElement(import_ui82.FormHelperText, { error: true }, valueError))));
 });
 
 // src/controls/position-control.tsx
@@ -7745,7 +8475,7 @@ var React99 = __toESM(require("react"));
 var import_editor_props45 = require("@elementor/editor-props");
 var import_editor_ui13 = require("@elementor/editor-ui");
 var import_icons30 = require("@elementor/icons");
-var import_ui82 = require("@elementor/ui");
+var import_ui83 = require("@elementor/ui");
 var import_i18n47 = require("@wordpress/i18n");
 var positionOptions = [
   { label: (0, import_i18n47.__)("Center center", "elementor"), value: "center center" },
@@ -7772,8 +8502,8 @@ var PositionControl = () => {
       stringPropContext.setValue(value);
     }
   };
-  return /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React99.createElement(
-    import_ui82.Select,
+  return /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, gap: 2, alignItems: "center", flexWrap: "nowrap" }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(ControlFormLabel, null, (0, import_i18n47.__)("Object position", "elementor"))), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6, sx: { overflow: "hidden" } }, /* @__PURE__ */ React99.createElement(
+    import_ui83.Select,
     {
       size: "tiny",
       displayEmpty: true,
@@ -7784,13 +8514,13 @@ var PositionControl = () => {
       fullWidth: true
     },
     positionOptions.map(({ label, value }) => /* @__PURE__ */ React99.createElement(import_editor_ui13.MenuListItem, { key: value, value: value ?? "" }, label))
-  )))), isCustom && /* @__PURE__ */ React99.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React99.createElement(
+  )))), isCustom && /* @__PURE__ */ React99.createElement(PropProvider, { ...positionContext }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "x" }, /* @__PURE__ */ React99.createElement(
     SizeControl,
     {
       startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterXIcon, { fontSize: "tiny" }),
       min: -Number.MAX_SAFE_INTEGER
     }
-  ))), /* @__PURE__ */ React99.createElement(import_ui82.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React99.createElement(
+  ))), /* @__PURE__ */ React99.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React99.createElement(PropKeyProvider, { bind: "y" }, /* @__PURE__ */ React99.createElement(
     SizeControl,
     {
       startIcon: /* @__PURE__ */ React99.createElement(import_icons30.LetterYIcon, { fontSize: "tiny" }),
@@ -7804,7 +8534,7 @@ var React112 = __toESM(require("react"));
 var import_react67 = require("react");
 var import_editor_props54 = require("@elementor/editor-props");
 var import_icons37 = require("@elementor/icons");
-var import_ui95 = require("@elementor/ui");
+var import_ui96 = require("@elementor/ui");
 var import_i18n57 = require("@wordpress/i18n");
 
 // src/controls/transform-control/initial-values.ts
@@ -7855,7 +8585,7 @@ var initialSkewValue = import_editor_props46.skewTransformPropTypeUtil.create({
 
 // src/controls/transform-control/transform-content.tsx
 var React106 = __toESM(require("react"));
-var import_ui90 = require("@elementor/ui");
+var import_ui91 = require("@elementor/ui");
 var import_i18n52 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/move.tsx
@@ -7863,15 +8593,15 @@ var React101 = __toESM(require("react"));
 var import_react60 = require("react");
 var import_editor_props47 = require("@elementor/editor-props");
 var import_icons31 = require("@elementor/icons");
-var import_ui84 = require("@elementor/ui");
+var import_ui85 = require("@elementor/ui");
 var import_i18n48 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/axis-row.tsx
 var React100 = __toESM(require("react"));
-var import_ui83 = require("@elementor/ui");
+var import_ui84 = require("@elementor/ui");
 var AxisRow = ({ label, bind, startIcon, anchorRef, units: units2, variant = "angle" }) => {
   const safeId = label.replace(/\s+/g, "-").toLowerCase();
-  return /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React100.createElement(import_ui83.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(
+  return /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React100.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(ControlLabel, { htmlFor: safeId }, label)), /* @__PURE__ */ React100.createElement(import_ui84.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React100.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React100.createElement(
     SizeControl,
     {
       anchorRef,
@@ -7908,7 +8638,7 @@ var moveAxisControls = [
 var Move = () => {
   const context = useBoundProp(import_editor_props47.moveTransformPropTypeUtil);
   const rowRefs = [(0, import_react60.useRef)(null), (0, import_react60.useRef)(null), (0, import_react60.useRef)(null)];
-  return /* @__PURE__ */ React101.createElement(import_ui84.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
+  return /* @__PURE__ */ React101.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React101.createElement(PropProvider, { ...context }, /* @__PURE__ */ React101.createElement(PropKeyProvider, { bind: TransformFunctionKeys.move }, moveAxisControls.map((control, index) => /* @__PURE__ */ React101.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -7925,7 +8655,7 @@ var React102 = __toESM(require("react"));
 var import_react61 = require("react");
 var import_editor_props48 = require("@elementor/editor-props");
 var import_icons32 = require("@elementor/icons");
-var import_ui85 = require("@elementor/ui");
+var import_ui86 = require("@elementor/ui");
 var import_i18n49 = require("@wordpress/i18n");
 var rotateAxisControls = [
   {
@@ -7948,7 +8678,7 @@ var rotateUnits = ["deg", "rad", "grad", "turn"];
 var Rotate = () => {
   const context = useBoundProp(import_editor_props48.rotateTransformPropTypeUtil);
   const rowRefs = [(0, import_react61.useRef)(null), (0, import_react61.useRef)(null), (0, import_react61.useRef)(null)];
-  return /* @__PURE__ */ React102.createElement(import_ui85.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
+  return /* @__PURE__ */ React102.createElement(import_ui86.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React102.createElement(PropProvider, { ...context }, /* @__PURE__ */ React102.createElement(PropKeyProvider, { bind: TransformFunctionKeys.rotate }, rotateAxisControls.map((control, index) => /* @__PURE__ */ React102.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -7964,14 +8694,14 @@ var React104 = __toESM(require("react"));
 var import_react62 = require("react");
 var import_editor_props49 = require("@elementor/editor-props");
 var import_icons33 = require("@elementor/icons");
-var import_ui87 = require("@elementor/ui");
+var import_ui88 = require("@elementor/ui");
 var import_i18n50 = require("@wordpress/i18n");
 
 // src/controls/transform-control/functions/scale-axis-row.tsx
 var React103 = __toESM(require("react"));
-var import_ui86 = require("@elementor/ui");
+var import_ui87 = require("@elementor/ui");
 var ScaleAxisRow = ({ label, bind, startIcon, anchorRef }) => {
-  return /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, label)), /* @__PURE__ */ React103.createElement(import_ui86.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
+  return /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React103.createElement(PopoverGridContainer, { ref: anchorRef }, /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(ControlLabel, null, label)), /* @__PURE__ */ React103.createElement(import_ui87.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React103.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React103.createElement(NumberControl, { step: 0.1, placeholder: "1", startIcon })))));
 };
 
 // src/controls/transform-control/functions/scale.tsx
@@ -7995,7 +8725,7 @@ var scaleAxisControls = [
 var Scale = () => {
   const context = useBoundProp(import_editor_props49.scaleTransformPropTypeUtil);
   const rowRefs = [(0, import_react62.useRef)(null), (0, import_react62.useRef)(null), (0, import_react62.useRef)(null)];
-  return /* @__PURE__ */ React104.createElement(import_ui87.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
+  return /* @__PURE__ */ React104.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React104.createElement(PropProvider, { ...context }, /* @__PURE__ */ React104.createElement(PropKeyProvider, { bind: TransformFunctionKeys.scale }, scaleAxisControls.map((control, index) => /* @__PURE__ */ React104.createElement(ScaleAxisRow, { key: control.bind, ...control, anchorRef: rowRefs[index] })))));
 };
 
 // src/controls/transform-control/functions/skew.tsx
@@ -8003,7 +8733,7 @@ var React105 = __toESM(require("react"));
 var import_react63 = require("react");
 var import_editor_props50 = require("@elementor/editor-props");
 var import_icons34 = require("@elementor/icons");
-var import_ui88 = require("@elementor/ui");
+var import_ui89 = require("@elementor/ui");
 var import_i18n51 = require("@wordpress/i18n");
 var skewAxisControls = [
   {
@@ -8021,7 +8751,7 @@ var skewUnits = ["deg", "rad", "grad", "turn"];
 var Skew = () => {
   const context = useBoundProp(import_editor_props50.skewTransformPropTypeUtil);
   const rowRefs = [(0, import_react63.useRef)(null), (0, import_react63.useRef)(null), (0, import_react63.useRef)(null)];
-  return /* @__PURE__ */ React105.createElement(import_ui88.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
+  return /* @__PURE__ */ React105.createElement(import_ui89.Grid, { container: true, spacing: 1.5 }, /* @__PURE__ */ React105.createElement(PropProvider, { ...context }, /* @__PURE__ */ React105.createElement(PropKeyProvider, { bind: TransformFunctionKeys.skew }, skewAxisControls.map((control, index) => /* @__PURE__ */ React105.createElement(
     AxisRow,
     {
       key: control.bind,
@@ -8035,7 +8765,7 @@ var Skew = () => {
 // src/controls/transform-control/use-transform-tabs-history.tsx
 var import_react64 = require("react");
 var import_editor_props51 = require("@elementor/editor-props");
-var import_ui89 = require("@elementor/ui");
+var import_ui90 = require("@elementor/ui");
 var useTransformTabsHistory = ({
   move: initialMove,
   scale: initialScale,
@@ -8059,7 +8789,7 @@ var useTransformTabsHistory = ({
         return TransformFunctionKeys.move;
     }
   };
-  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui89.useTabs)(getCurrentTransformType());
+  const { getTabsProps, getTabProps, getTabPanelProps } = (0, import_ui90.useTabs)(getCurrentTransformType());
   const valuesHistory = (0, import_react64.useRef)({
     move: initialMove,
     scale: initialScale,
@@ -8121,8 +8851,8 @@ var TransformContent = () => {
     rotate: initialRotateValue.value,
     skew: initialSkewValue.value
   });
-  return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(import_ui90.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(import_ui90.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
-    import_ui90.Tabs,
+  return /* @__PURE__ */ React106.createElement(PopoverContent, null, /* @__PURE__ */ React106.createElement(import_ui91.Box, { sx: { width: "100%" } }, /* @__PURE__ */ React106.createElement(import_ui91.Box, { sx: { borderBottom: 1, borderColor: "divider" } }, /* @__PURE__ */ React106.createElement(
+    import_ui91.Tabs,
     {
       size: "small",
       variant: "fullWidth",
@@ -8134,11 +8864,11 @@ var TransformContent = () => {
       ...getTabsProps(),
       "aria-label": (0, import_i18n52.__)("Transform", "elementor")
     },
-    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
-    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
-    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
-    /* @__PURE__ */ React106.createElement(import_ui90.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
-  )), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React106.createElement(Move, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React106.createElement(Scale, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React106.createElement(Rotate, null)), /* @__PURE__ */ React106.createElement(import_ui90.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React106.createElement(Skew, null))));
+    /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Move", "elementor"), ...getTabProps(TransformFunctionKeys.move) }),
+    /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Scale", "elementor"), ...getTabProps(TransformFunctionKeys.scale) }),
+    /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Rotate", "elementor"), ...getTabProps(TransformFunctionKeys.rotate) }),
+    /* @__PURE__ */ React106.createElement(import_ui91.Tab, { label: (0, import_i18n52.__)("Skew", "elementor"), ...getTabProps(TransformFunctionKeys.skew) })
+  )), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.move) }, /* @__PURE__ */ React106.createElement(Move, null)), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.scale) }, /* @__PURE__ */ React106.createElement(Scale, null)), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.rotate) }, /* @__PURE__ */ React106.createElement(Rotate, null)), /* @__PURE__ */ React106.createElement(import_ui91.TabPanel, { sx: { p: 1.5 }, ...getTabPanelProps(TransformFunctionKeys.skew) }, /* @__PURE__ */ React106.createElement(Skew, null))));
 };
 
 // src/controls/transform-control/transform-icon.tsx
@@ -8161,7 +8891,7 @@ var TransformIcon = ({ value }) => {
 
 // src/controls/transform-control/transform-label.tsx
 var React108 = __toESM(require("react"));
-var import_ui91 = require("@elementor/ui");
+var import_ui92 = require("@elementor/ui");
 var import_i18n53 = require("@wordpress/i18n");
 var orderedAxis = ["x", "y", "z"];
 var formatLabel = (value, functionType) => {
@@ -8192,21 +8922,21 @@ var TransformLabel = (props) => {
   }
 };
 var Label2 = ({ label, value }) => {
-  return /* @__PURE__ */ React108.createElement(import_ui91.Box, { component: "span" }, label, ": ", value);
+  return /* @__PURE__ */ React108.createElement(import_ui92.Box, { component: "span" }, label, ": ", value);
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
 var React111 = __toESM(require("react"));
 var import_editor_ui14 = require("@elementor/editor-ui");
 var import_icons36 = require("@elementor/icons");
-var import_ui94 = require("@elementor/ui");
+var import_ui95 = require("@elementor/ui");
 var import_i18n56 = require("@wordpress/i18n");
 
 // src/controls/transform-control/transform-base-controls/children-perspective-control.tsx
 var React109 = __toESM(require("react"));
 var import_react65 = require("react");
 var import_editor_props52 = require("@elementor/editor-props");
-var import_ui92 = require("@elementor/ui");
+var import_ui93 = require("@elementor/ui");
 var import_i18n54 = require("@wordpress/i18n");
 var ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var PERSPECTIVE_CONTROL_FIELD = {
@@ -8227,7 +8957,7 @@ var CHILDREN_PERSPECTIVE_FIELDS = [
   }
 ];
 var ChildrenPerspectiveControl = () => {
-  return /* @__PURE__ */ React109.createElement(import_ui92.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React109.createElement(PerspectiveControl, null), /* @__PURE__ */ React109.createElement(PerspectiveOriginControl, null));
+  return /* @__PURE__ */ React109.createElement(import_ui93.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, (0, import_i18n54.__)("Children perspective", "elementor")), /* @__PURE__ */ React109.createElement(PerspectiveControl, null), /* @__PURE__ */ React109.createElement(PerspectiveOriginControl, null));
 };
 var PerspectiveControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective" }, /* @__PURE__ */ React109.createElement(ControlFields, { control: PERSPECTIVE_CONTROL_FIELD, key: PERSPECTIVE_CONTROL_FIELD.bind }));
 var PerspectiveOriginControl = () => /* @__PURE__ */ React109.createElement(PropKeyProvider, { bind: "perspective-origin" }, /* @__PURE__ */ React109.createElement(PerspectiveOriginControlProvider, null));
@@ -8237,14 +8967,14 @@ var PerspectiveOriginControlProvider = () => {
 };
 var ControlFields = ({ control }) => {
   const rowRef = (0, import_react65.useRef)(null);
-  return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui92.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
+  return /* @__PURE__ */ React109.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React109.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React109.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React109.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef, disableCustom: true })));
 };
 
 // src/controls/transform-control/transform-base-controls/transform-origin-control.tsx
 var React110 = __toESM(require("react"));
 var import_react66 = require("react");
 var import_editor_props53 = require("@elementor/editor-props");
-var import_ui93 = require("@elementor/ui");
+var import_ui94 = require("@elementor/ui");
 var import_i18n55 = require("@wordpress/i18n");
 var TRANSFORM_ORIGIN_UNITS = ["px", "%", "em", "rem"];
 var TRANSFORM_ORIGIN_UNITS_Z_AXIS = TRANSFORM_ORIGIN_UNITS.filter((unit) => unit !== "%");
@@ -8266,12 +8996,12 @@ var TRANSFORM_ORIGIN_FIELDS = [
   }
 ];
 var TransformOriginControl = () => {
-  return /* @__PURE__ */ React110.createElement(import_ui93.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(ControlFields2, { control, key: control.bind })));
+  return /* @__PURE__ */ React110.createElement(import_ui94.Stack, { direction: "column", spacing: 1.5 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, (0, import_i18n55.__)("Transform", "elementor")), TRANSFORM_ORIGIN_FIELDS.map((control) => /* @__PURE__ */ React110.createElement(ControlFields2, { control, key: control.bind })));
 };
 var ControlFields2 = ({ control }) => {
   const context = useBoundProp(import_editor_props53.transformOriginPropTypeUtil);
   const rowRef = (0, import_react66.useRef)(null);
-  return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui93.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
+  return /* @__PURE__ */ React110.createElement(PropProvider, { ...context }, /* @__PURE__ */ React110.createElement(PropKeyProvider, { bind: control.bind }, /* @__PURE__ */ React110.createElement(PopoverGridContainer, { ref: rowRef }, /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(ControlFormLabel, null, control.label)), /* @__PURE__ */ React110.createElement(import_ui94.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React110.createElement(SizeControl, { variant: "length", units: control.units, anchorRef: rowRef })))));
 };
 
 // src/controls/transform-control/transform-settings-control.tsx
@@ -8281,12 +9011,12 @@ var TransformSettingsControl = ({
   anchorRef,
   showChildrenPerspective
 }) => {
-  const popupProps = (0, import_ui94.bindPopover)({
+  const popupProps = (0, import_ui95.bindPopover)({
     ...popupState,
     anchorEl: anchorRef.current ?? void 0
   });
   return /* @__PURE__ */ React111.createElement(
-    import_ui94.Popover,
+    import_ui95.Popover,
     {
       disablePortal: true,
       anchorOrigin: { vertical: "bottom", horizontal: "left" },
@@ -8308,8 +9038,8 @@ var TransformSettingsControl = ({
         icon: /* @__PURE__ */ React111.createElement(import_icons36.AdjustmentsIcon, { fontSize: SIZE10 })
       }
     ),
-    /* @__PURE__ */ React111.createElement(import_ui94.Divider, 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(import_ui94.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(import_ui94.Divider, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
+    /* @__PURE__ */ React111.createElement(import_ui95.Divider, 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(import_ui95.Box, { sx: { my: 0.5 } }, /* @__PURE__ */ React111.createElement(import_ui95.Divider, null)), /* @__PURE__ */ React111.createElement(ChildrenPerspectiveControl, null)))
   );
 };
 
@@ -8319,7 +9049,7 @@ var TransformRepeaterControl = createControl(
   ({ showChildrenPerspective }) => {
     const context = useBoundProp(import_editor_props54.transformPropTypeUtil);
     const headerRef = (0, import_react67.useRef)(null);
-    const popupState = (0, import_ui95.usePopupState)({ variant: "popover" });
+    const popupState = (0, import_ui96.usePopupState)({ variant: "popover" });
     return /* @__PURE__ */ React112.createElement(PropProvider, { ...context }, /* @__PURE__ */ React112.createElement(
       TransformSettingsControl,
       {
@@ -8331,14 +9061,14 @@ var TransformRepeaterControl = createControl(
   }
 );
 var ToolTip = /* @__PURE__ */ React112.createElement(
-  import_ui95.Box,
+  import_ui96.Box,
   {
     component: "span",
     "aria-label": void 0,
     sx: { display: "flex", gap: 0.5, p: 2, width: 320, borderRadius: 1 }
   },
   /* @__PURE__ */ React112.createElement(import_icons37.InfoCircleFilledIcon, { sx: { color: "secondary.main" } }),
-  /* @__PURE__ */ React112.createElement(import_ui95.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
+  /* @__PURE__ */ React112.createElement(import_ui96.Typography, { variant: "body2", color: "text.secondary", fontSize: "14px" }, (0, import_i18n57.__)("You can use each kind of transform only once per element.", "elementor"))
 );
 var Repeater2 = ({
   headerRef,
@@ -8393,7 +9123,7 @@ var TransformBasePopoverTrigger = ({
 }) => {
   const { bind } = useBoundProp();
   const titleLabel = (0, import_i18n57.__)("Transform settings", "elementor");
-  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React112.createElement(import_ui95.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React112.createElement(import_ui95.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui95.bindTrigger)(popupState) }, /* @__PURE__ */ React112.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
+  return bind !== repeaterBindKey ? null : /* @__PURE__ */ React112.createElement(import_ui96.Tooltip, { title: titleLabel, placement: "top" }, /* @__PURE__ */ React112.createElement(import_ui96.IconButton, { size: SIZE11, "aria-label": titleLabel, ...(0, import_ui96.bindTrigger)(popupState) }, /* @__PURE__ */ React112.createElement(import_icons37.AdjustmentsIcon, { fontSize: SIZE11 })));
 };
 
 // src/controls/transition-control/transition-repeater-control.tsx
@@ -8401,7 +9131,7 @@ var React115 = __toESM(require("react"));
 var import_react70 = require("react");
 var import_editor_props57 = require("@elementor/editor-props");
 var import_icons39 = require("@elementor/icons");
-var import_ui98 = require("@elementor/ui");
+var import_ui99 = require("@elementor/ui");
 var import_utils8 = require("@elementor/utils");
 var import_i18n60 = require("@wordpress/i18n");
 
@@ -8409,7 +9139,7 @@ var import_i18n60 = require("@wordpress/i18n");
 var React113 = __toESM(require("react"));
 var import_react68 = require("react");
 var import_editor_props55 = require("@elementor/editor-props");
-var import_ui96 = require("@elementor/ui");
+var import_ui97 = require("@elementor/ui");
 var SelectionSizeControl = createControl(
   ({ selectionLabel, sizeLabel, selectionConfig, sizeConfigMap }) => {
     const { value, setValue, propType } = useBoundProp(import_editor_props55.selectionSizePropTypeUtil);
@@ -8426,7 +9156,7 @@ var SelectionSizeControl = createControl(
       }
     }, [value, sizeConfigMap]);
     const SelectionComponent = selectionConfig.component;
-    return /* @__PURE__ */ React113.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React113.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React113.createElement(import_ui96.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React113.createElement(
+    return /* @__PURE__ */ React113.createElement(PropProvider, { value, setValue, propType }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { container: true, spacing: 1.5, ref: rowRef }, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, null, selectionLabel)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "selection" }, /* @__PURE__ */ React113.createElement(SelectionComponent, { ...selectionConfig.props }))), currentSizeConfig && /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6, sx: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React113.createElement(ControlFormLabel, { htmlFor: sizeFieldId }, sizeLabel)), /* @__PURE__ */ React113.createElement(import_ui97.Grid, { item: true, xs: 6 }, /* @__PURE__ */ React113.createElement(PropKeyProvider, { bind: "size" }, /* @__PURE__ */ React113.createElement(
       SizeControl,
       {
         anchorRef: rowRef,
@@ -8632,7 +9362,7 @@ var import_react69 = require("react");
 var import_editor_props56 = require("@elementor/editor-props");
 var import_editor_ui15 = require("@elementor/editor-ui");
 var import_icons38 = require("@elementor/icons");
-var import_ui97 = require("@elementor/ui");
+var import_ui98 = require("@elementor/ui");
 var import_i18n59 = require("@wordpress/i18n");
 
 // src/utils/tracking.ts
@@ -8715,7 +9445,7 @@ var TransitionSelector = ({
     key: { value: transitionLabel }
   } = value;
   const defaultRef = (0, import_react69.useRef)(null);
-  const popoverState = (0, import_ui97.usePopupState)({ variant: "popover" });
+  const popoverState = (0, import_ui98.usePopupState)({ variant: "popover" });
   const disabledCategories = (0, import_react69.useMemo)(() => {
     return new Set(
       transitionProperties.filter((cat) => cat.properties.some((prop) => prop.isDisabled)).map((cat) => cat.label)
@@ -8760,21 +9490,21 @@ var TransitionSelector = ({
       left: rect.right + 36
     };
   };
-  return /* @__PURE__ */ React114.createElement(import_ui97.Box, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
-    import_ui97.UnstableTag,
+  return /* @__PURE__ */ React114.createElement(import_ui98.Box, { ref: defaultRef }, /* @__PURE__ */ React114.createElement(ControlActions, null, /* @__PURE__ */ React114.createElement(
+    import_ui98.UnstableTag,
     {
       variant: "outlined",
       label: transitionLabel,
       endIcon: /* @__PURE__ */ React114.createElement(import_icons38.ChevronDownIcon, { fontSize: "tiny" }),
-      ...(0, import_ui97.bindTrigger)(popoverState),
+      ...(0, import_ui98.bindTrigger)(popoverState),
       fullWidth: true
     }
   )), /* @__PURE__ */ React114.createElement(
-    import_ui97.Popover,
+    import_ui98.Popover,
     {
       disablePortal: true,
       disableScrollLock: true,
-      ...(0, import_ui97.bindPopover)(popoverState),
+      ...(0, import_ui98.bindPopover)(popoverState),
       anchorReference: "anchorPosition",
       anchorPosition: getAnchorPosition(),
       anchorOrigin: { vertical: "top", horizontal: "right" },
@@ -8792,7 +9522,7 @@ var TransitionSelector = ({
         icon: import_icons38.VariationsIcon,
         disabledItems: includeCurrentValueInOptions(value, disabledItems),
         categoryItemContentTemplate: (item) => /* @__PURE__ */ React114.createElement(
-          import_ui97.Box,
+          import_ui98.Box,
           {
             sx: {
               display: "flex",
@@ -8924,7 +9654,7 @@ var getInitialValue = (values = []) => {
   return initialTransitionValue;
 };
 var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
-  import_ui98.Alert,
+  import_ui99.Alert,
   {
     sx: {
       width: 280,
@@ -8933,8 +9663,8 @@ var disableAddItemTooltipContent = /* @__PURE__ */ React115.createElement(
     color: "secondary",
     icon: /* @__PURE__ */ React115.createElement(import_icons39.InfoCircleFilledIcon, null)
   },
-  /* @__PURE__ */ React115.createElement(import_ui98.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
-  /* @__PURE__ */ React115.createElement(import_ui98.Box, { component: "span" }, /* @__PURE__ */ React115.createElement(import_ui98.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
+  /* @__PURE__ */ React115.createElement(import_ui99.AlertTitle, null, (0, import_i18n60.__)("Transitions", "elementor")),
+  /* @__PURE__ */ React115.createElement(import_ui99.Box, { component: "span" }, /* @__PURE__ */ React115.createElement(import_ui99.Typography, { variant: "body2" }, (0, import_i18n60.__)("Switch to 'Normal' state to add a transition.", "elementor")))
 );
 var TransitionRepeaterControl = createControl(
   ({
@@ -9008,7 +9738,7 @@ var React116 = __toESM(require("react"));
 var dayjs = __toESM(require("dayjs"));
 var import_editor_props58 = require("@elementor/editor-props");
 var import_editor_props59 = require("@elementor/editor-props");
-var import_ui99 = require("@elementor/ui");
+var import_ui100 = require("@elementor/ui");
 var DATE_FORMAT = "YYYY-MM-DD";
 var TIME_FORMAT = "HH:mm";
 var DateTimeControl = createControl(({ inputDisabled }) => {
@@ -9052,8 +9782,8 @@ 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(import_ui99.LocalizationProvider, null, /* @__PURE__ */ React116.createElement(import_ui99.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
-    import_ui99.DatePicker,
+  return /* @__PURE__ */ React116.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React116.createElement(ControlActions, null, /* @__PURE__ */ React116.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React116.createElement(import_ui100.Box, { display: "flex", gap: 1, alignItems: "center" }, /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "date" }, /* @__PURE__ */ React116.createElement(
+    import_ui100.DatePicker,
     {
       value: parseDateValue(import_editor_props58.stringPropTypeUtil.extract(value?.date)),
       onChange: (v) => handleChange({ date: v }, { bind: "date" }),
@@ -9065,7 +9795,7 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
       }
     }
   )), /* @__PURE__ */ React116.createElement(PropKeyProvider, { bind: "time" }, /* @__PURE__ */ React116.createElement(
-    import_ui99.TimePicker,
+    import_ui100.TimePicker,
     {
       value: parseTimeValue(import_editor_props58.stringPropTypeUtil.extract(value?.time)),
       onChange: (v) => handleChange({ time: v }, { bind: "time" }),
@@ -9082,13 +9812,13 @@ var DateTimeControl = createControl(({ inputDisabled }) => {
 // src/controls/date-range-control.tsx
 var React118 = __toESM(require("react"));
 var import_editor_props61 = require("@elementor/editor-props");
-var import_ui101 = require("@elementor/ui");
+var import_ui102 = require("@elementor/ui");
 var import_i18n61 = require("@wordpress/i18n");
 
 // src/controls/date-string-control.tsx
 var React117 = __toESM(require("react"));
 var import_editor_props60 = require("@elementor/editor-props");
-var import_ui100 = require("@elementor/ui");
+var import_ui101 = require("@elementor/ui");
 
 // src/utils/date-time.ts
 var dayjs2 = __toESM(require("dayjs"));
@@ -9145,8 +9875,8 @@ var DateStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React117.createElement(import_ui100.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
-      import_ui100.DatePicker,
+    return /* @__PURE__ */ React117.createElement(import_ui101.LocalizationProvider, null, /* @__PURE__ */ React117.createElement(ControlActions, null, /* @__PURE__ */ React117.createElement(
+      import_ui101.DatePicker,
       {
         value: parseDateString(value ?? ""),
         onChange: (newValue) => handleChange(newValue, DATE_FORMAT2),
@@ -9174,21 +9904,21 @@ var DateRangeControl = createControl(() => {
   const minString = import_editor_props61.dateStringPropTypeUtil.extract(value?.min);
   const maxString = import_editor_props61.dateStringPropTypeUtil.extract(value?.max);
   const hasInvalidRange = isMaxBeforeMin(minString, maxString);
-  return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { gap: 0.75 }, /* @__PURE__ */ React118.createElement(import_ui101.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
+  return /* @__PURE__ */ React118.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { gap: 0.75 }, /* @__PURE__ */ React118.createElement(import_ui102.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.min)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
     BoundDateStringControl,
     {
       bind: "min",
       ariaLabel: RANGE_LABELS.min,
       error: hasInvalidRange
     }
-  ))), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React118.createElement(import_ui101.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
+  ))), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(ControlFormLabel, null, RANGE_LABELS.max)), /* @__PURE__ */ React118.createElement(import_ui102.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React118.createElement(
     BoundDateStringControl,
     {
       bind: "max",
       ariaLabel: RANGE_LABELS.max,
       error: hasInvalidRange
     }
-  )))), hasInvalidRange && /* @__PURE__ */ React118.createElement(import_ui101.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
+  )))), hasInvalidRange && /* @__PURE__ */ React118.createElement(import_ui102.FormHelperText, { error: true }, RANGE_ERROR_MESSAGE)));
 });
 var BoundDateStringControl = ({
   bind,
@@ -9201,7 +9931,7 @@ var BoundDateStringControl = ({
 // src/controls/time-string-control.tsx
 var React119 = __toESM(require("react"));
 var import_editor_props62 = require("@elementor/editor-props");
-var import_ui102 = require("@elementor/ui");
+var import_ui103 = require("@elementor/ui");
 var TimeStringControl = createControl(
   ({ inputDisabled, ariaLabel, error, coerceInvalidToNull = false }) => {
     const { value, setValue, disabled } = useBoundProp(import_editor_props62.timeStringPropTypeUtil);
@@ -9227,8 +9957,8 @@ var TimeStringControl = createControl(
       }
       setValue(newValue.format(format));
     };
-    return /* @__PURE__ */ React119.createElement(import_ui102.LocalizationProvider, null, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
-      import_ui102.TimePicker,
+    return /* @__PURE__ */ React119.createElement(import_ui103.LocalizationProvider, null, /* @__PURE__ */ React119.createElement(ControlActions, null, /* @__PURE__ */ React119.createElement(
+      import_ui103.TimePicker,
       {
         value: parseTimeString(value ?? ""),
         onChange: (newValue) => handleChange(newValue, TIME_FORMAT2),
@@ -9242,7 +9972,7 @@ var TimeStringControl = createControl(
 // src/controls/time-range-control.tsx
 var React120 = __toESM(require("react"));
 var import_editor_props63 = require("@elementor/editor-props");
-var import_ui103 = require("@elementor/ui");
+var import_ui104 = require("@elementor/ui");
 var import_i18n62 = require("@wordpress/i18n");
 var RANGE_LABELS2 = {
   min: (0, import_i18n62.__)("Start time", "elementor"),
@@ -9250,7 +9980,7 @@ var RANGE_LABELS2 = {
 };
 var TimeRangeControl = createControl(() => {
   const { value, setValue, ...propContext } = useBoundProp(import_editor_props63.timeRangePropTypeUtil);
-  return /* @__PURE__ */ React120.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React120.createElement(import_ui103.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React120.createElement(import_ui103.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
+  return /* @__PURE__ */ React120.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React120.createElement(import_ui104.Stack, { direction: "row", gap: 2, flexWrap: "nowrap" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.min)), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "min", ariaLabel: RANGE_LABELS2.min }))), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { container: true, gap: 0.75, alignItems: "center" }, /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(ControlFormLabel, null, RANGE_LABELS2.max)), /* @__PURE__ */ React120.createElement(import_ui104.Grid, { item: true, xs: 12 }, /* @__PURE__ */ React120.createElement(BoundTimeStringControl, { bind: "max", ariaLabel: RANGE_LABELS2.max })))));
 });
 var BoundTimeStringControl = ({ bind, ariaLabel }) => {
   return /* @__PURE__ */ React120.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React120.createElement(TimeStringControl, { ariaLabel, coerceInvalidToNull: true }));
@@ -9260,12 +9990,12 @@ var BoundTimeStringControl = ({ bind, ariaLabel }) => {
 var React124 = __toESM(require("react"));
 var import_react76 = require("react");
 var import_editor_props65 = require("@elementor/editor-props");
-var import_ui107 = require("@elementor/ui");
+var import_ui108 = require("@elementor/ui");
 
 // src/components/inline-editor.tsx
 var React121 = __toESM(require("react"));
 var import_react71 = require("react");
-var import_ui104 = require("@elementor/ui");
+var import_ui105 = require("@elementor/ui");
 var import_extension_bold = __toESM(require("@tiptap/extension-bold"));
 var import_extension_document = __toESM(require("@tiptap/extension-document"));
 var import_extension_hard_break = __toESM(require("@tiptap/extension-hard-break"));
@@ -9423,7 +10153,7 @@ var InlineEditor = React121.forwardRef((props, ref) => {
   if (mountElement) {
     return null;
   }
-  return /* @__PURE__ */ React121.createElement(import_ui104.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react72.EditorContent, { ref, editor }));
+  return /* @__PURE__ */ React121.createElement(import_ui105.Box, { ref: containerRef, sx, className: wrapperClassName }, /* @__PURE__ */ React121.createElement(import_react72.EditorContent, { ref, editor }));
 });
 var useOnUpdate = (callback, dependencies) => {
   const hasMounted = (0, import_react71.useRef)(false);
@@ -9441,7 +10171,7 @@ var React123 = __toESM(require("react"));
 var import_react74 = require("react");
 var import_editor_elements7 = require("@elementor/editor-elements");
 var import_icons41 = require("@elementor/icons");
-var import_ui106 = require("@elementor/ui");
+var import_ui107 = require("@elementor/ui");
 var import_react75 = require("@tiptap/react");
 var import_i18n64 = require("@wordpress/i18n");
 
@@ -9449,7 +10179,7 @@ var import_i18n64 = require("@wordpress/i18n");
 var React122 = __toESM(require("react"));
 var import_react73 = require("react");
 var import_icons40 = require("@elementor/icons");
-var import_ui105 = require("@elementor/ui");
+var import_ui106 = require("@elementor/ui");
 var import_i18n63 = require("@wordpress/i18n");
 var UrlPopover = ({
   popupState,
@@ -9471,18 +10201,18 @@ var UrlPopover = ({
     popupState.close();
   };
   return /* @__PURE__ */ React122.createElement(
-    import_ui105.Popover,
+    import_ui106.Popover,
     {
       slotProps: {
         paper: { sx: { borderRadius: "16px", width: anchorRef.current?.offsetWidth + "px", marginTop: -1 } }
       },
-      ...(0, import_ui105.bindPopover)(popupState),
+      ...(0, import_ui106.bindPopover)(popupState),
       anchorOrigin: { vertical: "top", horizontal: "left" },
       transformOrigin: { vertical: "top", horizontal: "left" },
       onClose: handleClose
     },
-    /* @__PURE__ */ React122.createElement(import_ui105.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
-      import_ui105.TextField,
+    /* @__PURE__ */ React122.createElement(import_ui106.Stack, { direction: "row", alignItems: "center", gap: 1, sx: { p: 1.5 } }, /* @__PURE__ */ React122.createElement(
+      import_ui106.TextField,
       {
         value,
         onChange,
@@ -9494,8 +10224,8 @@ var UrlPopover = ({
         InputProps: { sx: { borderRadius: "8px" } },
         onKeyUp: (event) => event.key === "Enter" && handleClose()
       }
-    ), /* @__PURE__ */ React122.createElement(import_ui105.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
-      import_ui105.ToggleButton,
+    ), /* @__PURE__ */ React122.createElement(import_ui106.Tooltip, { title: (0, import_i18n63.__)("Open in a new tab", "elementor") }, /* @__PURE__ */ React122.createElement(
+      import_ui106.ToggleButton,
       {
         size: "tiny",
         value: "newTab",
@@ -9519,7 +10249,7 @@ var InlineEditorToolbar = ({
   const [urlValue, setUrlValue] = (0, import_react74.useState)("");
   const [openInNewTab, setOpenInNewTab] = (0, import_react74.useState)(false);
   const toolbarRef = (0, import_react74.useRef)(null);
-  const linkPopupState = (0, import_ui106.usePopupState)({ variant: "popover" });
+  const linkPopupState = (0, import_ui107.usePopupState)({ variant: "popover" });
   const isElementClickable = elementId ? checkIfElementIsClickable(elementId) : false;
   const editorState = (0, import_react75.useEditorState)({
     editor,
@@ -9568,7 +10298,7 @@ var InlineEditorToolbar = ({
     }
   }, [editor, inControlPanel]);
   return /* @__PURE__ */ React123.createElement(
-    import_ui106.Box,
+    import_ui107.Box,
     {
       ref: toolbarRef,
       sx: {
@@ -9601,9 +10331,9 @@ var InlineEditorToolbar = ({
         }
       }
     },
-    /* @__PURE__ */ React123.createElement(import_ui106.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React123.createElement(import_ui106.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
+    /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: clearButton.label, placement: "top", sx: { borderRadius: "8px" } }, /* @__PURE__ */ React123.createElement(import_ui107.IconButton, { "aria-label": clearButton.label, onClick: () => clearButton.method(editor), size: "tiny" }, clearButton.icon)),
     /* @__PURE__ */ React123.createElement(
-      import_ui106.ToggleButtonGroup,
+      import_ui107.ToggleButtonGroup,
       {
         value: editorState,
         size: "tiny",
@@ -9611,7 +10341,7 @@ var InlineEditorToolbar = ({
           display: "flex",
           gap: 0.5,
           border: "none",
-          [`& .${import_ui106.toggleButtonGroupClasses.firstButton}, & .${import_ui106.toggleButtonGroupClasses.middleButton}, & .${import_ui106.toggleButtonGroupClasses.lastButton}`]: {
+          [`& .${import_ui107.toggleButtonGroupClasses.firstButton}, & .${import_ui107.toggleButtonGroupClasses.middleButton}, & .${import_ui107.toggleButtonGroupClasses.lastButton}`]: {
             borderRadius: "8px",
             border: "none",
             marginLeft: 0,
@@ -9632,8 +10362,8 @@ var InlineEditorToolbar = ({
           }
         }
       },
-      formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(import_ui106.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
-        import_ui106.ToggleButton,
+      formatButtonsList.map((button) => /* @__PURE__ */ React123.createElement(import_ui107.Tooltip, { title: button.label, key: button.action, placement: "top" }, /* @__PURE__ */ React123.createElement(
+        import_ui107.ToggleButton,
         {
           value: button.action,
           "aria-label": button.label,
@@ -9751,7 +10481,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
     },
     [setValue]
   );
-  return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(import_ui107.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
+  return /* @__PURE__ */ React124.createElement(ControlActions, null, /* @__PURE__ */ React124.createElement(import_ui108.Box, { sx: { position: "relative" } }, editor && editor.isEditable && /* @__PURE__ */ React124.createElement(
     InlineEditorToolbar,
     {
       editor,
@@ -9765,7 +10495,7 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
       inControlPanel: true
     }
   ), /* @__PURE__ */ React124.createElement(
-    import_ui107.Box,
+    import_ui108.Box,
     {
       sx: (theme) => ({
         p: 0.8,
@@ -9829,13 +10559,13 @@ var InlineEditingControl = createControl(({ sx, attributes, props, context: { el
 var React128 = __toESM(require("react"));
 var import_editor_props68 = require("@elementor/editor-props");
 var import_editor_ui17 = require("@elementor/editor-ui");
-var import_ui111 = require("@elementor/ui");
+var import_ui112 = require("@elementor/ui");
 var import_i18n66 = require("@wordpress/i18n");
 
 // src/controls/email-form-action-control/fields.tsx
 var React127 = __toESM(require("react"));
 var import_editor_ui16 = require("@elementor/editor-ui");
-var import_ui110 = require("@elementor/ui");
+var import_ui111 = require("@elementor/ui");
 var import_i18n65 = require("@wordpress/i18n");
 
 // src/hooks/use-form-field-suggestions.ts
@@ -9928,7 +10658,7 @@ function useFormFieldSuggestions(options) {
 var React125 = __toESM(require("react"));
 var import_react77 = require("react");
 var import_editor_props67 = require("@elementor/editor-props");
-var import_ui108 = require("@elementor/ui");
+var import_ui109 = require("@elementor/ui");
 
 // src/controls/email-form-action-control/utils.ts
 var import_schema = require("@elementor/schema");
@@ -10003,7 +10733,7 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
     }
   };
   return /* @__PURE__ */ React125.createElement(ControlActions, null, /* @__PURE__ */ React125.createElement(
-    import_ui108.Autocomplete,
+    import_ui109.Autocomplete,
     {
       fullWidth: true,
       multiple: true,
@@ -10027,22 +10757,22 @@ var EmailChipsControl = createControl(({ placeholder, suggestions = [] }) => {
       onBlur: handleBlur,
       getOptionLabel: (option) => option,
       isOptionEqualToValue: (option, val) => option === val,
-      renderInput: (params) => /* @__PURE__ */ React125.createElement(import_ui108.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
+      renderInput: (params) => /* @__PURE__ */ React125.createElement(import_ui109.TextField, { ...params, placeholder, onKeyDown: handleKeyDown }),
       renderTags: (tagValues, getTagProps) => /* @__PURE__ */ React125.createElement(ChipsList, { getLabel: (option) => option, getTagProps, values: tagValues })
     }
   ));
 });
-var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React125.createElement(import_ui108.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React125.createElement(import_ui108.Grid, { item: true }, /* @__PURE__ */ React125.createElement(EmailChipsControl, { placeholder, suggestions })));
+var EmailChipsField = ({ fieldLabel, placeholder, suggestions }) => /* @__PURE__ */ React125.createElement(import_ui109.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React125.createElement(ControlFormLabel, null, fieldLabel)), /* @__PURE__ */ React125.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React125.createElement(EmailChipsControl, { placeholder, suggestions })));
 
 // src/controls/email-form-action-control/email-field.tsx
 var React126 = __toESM(require("react"));
-var import_ui109 = require("@elementor/ui");
-var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(import_ui109.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(import_ui109.Grid, { item: true }, /* @__PURE__ */ React126.createElement(TextControl, { placeholder }))));
+var import_ui110 = require("@elementor/ui");
+var EmailField = ({ bind, label, placeholder }) => /* @__PURE__ */ React126.createElement(PropKeyProvider, { bind }, /* @__PURE__ */ React126.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React126.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React126.createElement(TextControl, { placeholder }))));
 
 // src/controls/email-form-action-control/fields.tsx
 var SendToField = ({ placeholder }) => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React127.createElement(import_ui110.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "to" }, /* @__PURE__ */ React127.createElement(import_ui111.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(
     EmailChipsField,
     {
       fieldLabel: (0, import_i18n65.__)("Send to", "elementor"),
@@ -10061,7 +10791,7 @@ var SubjectField = () => /* @__PURE__ */ React127.createElement(
 );
 var MessageField = () => {
   const suggestions = useFormFieldSuggestions();
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "message" }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Message", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(MentionTextAreaControl, { suggestions })), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(import_editor_ui16.InfoAlert, null, shouldShowMentionsInfo() ? (0, import_i18n65.__)(
     "[all-fields] shortcode sends all fields. Type @ to insert specific fields and customize your message.",
     "elementor"
   ) : (0, import_i18n65.__)("[all-fields] shortcode sends all fields.", "elementor")))));
@@ -10084,7 +10814,7 @@ var FromNameField = () => /* @__PURE__ */ React127.createElement(
 );
 var ReplyToField = () => {
   const emailSuggestions = useFormFieldSuggestions({ inputType: "email" });
-  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
+  return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "reply-to" }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Reply-to", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
     MentionTextAreaControl,
     {
       suggestions: emailSuggestions,
@@ -10102,7 +10832,7 @@ var BccField = () => {
   const suggestions = useFormFieldSuggestions({ inputType: "email" });
   return /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "bcc" }, /* @__PURE__ */ React127.createElement(EmailChipsField, { fieldLabel: (0, import_i18n65.__)("Bcc", "elementor"), suggestions }));
 };
-var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React127.createElement(import_ui110.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React127.createElement(
+var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "meta-data" }, /* @__PURE__ */ React127.createElement(import_ui111.Stack, { gap: 0.5 }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Metadata", "elementor")), /* @__PURE__ */ React127.createElement(
   ChipsControl,
   {
     options: [
@@ -10114,7 +10844,7 @@ var MetaDataField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider
     ]
   }
 )));
-var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui110.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
+var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider, { bind: "send-as" }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { container: true, direction: "column", gap: 0.5 }, /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(ControlFormLabel, null, (0, import_i18n65.__)("Send as", "elementor"))), /* @__PURE__ */ React127.createElement(import_ui111.Grid, { item: true }, /* @__PURE__ */ React127.createElement(
   SelectControl,
   {
     options: [
@@ -10128,18 +10858,18 @@ var SendAsField = () => /* @__PURE__ */ React127.createElement(PropKeyProvider,
 var EmailFormActionControl = createControl(
   ({ toPlaceholder, label }) => {
     const { value, setValue, ...propContext } = useBoundProp(import_editor_props68.emailsPropTypeUtil);
-    return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(import_ui111.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("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)));
+    return /* @__PURE__ */ React128.createElement(PropProvider, { ...propContext, value, setValue }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { gap: 2 }, /* @__PURE__ */ React128.createElement(ControlLabel, null, label ? label + " " + (0, import_i18n66.__)("settings", "elementor") : (0, import_i18n66.__)("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(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(import_ui111.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(import_ui111.Stack, { 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(import_ui111.Divider, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
+var AdvancedSettings = () => /* @__PURE__ */ React128.createElement(import_editor_ui17.CollapsibleContent, { defaultOpen: false }, /* @__PURE__ */ React128.createElement(import_ui112.Box, { sx: { pt: 2 } }, /* @__PURE__ */ React128.createElement(import_ui112.Stack, { 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(import_ui112.Divider, null), /* @__PURE__ */ React128.createElement(MetaDataField, null), /* @__PURE__ */ React128.createElement(SendAsField, null))));
 
 // src/controls/attachment-type-control.tsx
 var React129 = __toESM(require("react"));
 var import_editor_ui18 = require("@elementor/editor-ui");
-var import_ui112 = require("@elementor/ui");
+var import_ui113 = require("@elementor/ui");
 var import_i18n67 = require("@wordpress/i18n");
 var AttachmentTypeControl = createControl(({ label, options }) => {
-  return /* @__PURE__ */ React129.createElement(import_ui112.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(SelectControl, { options })), /* @__PURE__ */ React129.createElement(import_ui112.Grid, { item: true }, /* @__PURE__ */ React129.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
+  return /* @__PURE__ */ React129.createElement(import_ui113.Grid, { container: true, direction: "column", gap: 1 }, label && /* @__PURE__ */ React129.createElement(import_ui113.Grid, { item: true }, /* @__PURE__ */ React129.createElement(ControlFormLabel, null, label)), /* @__PURE__ */ React129.createElement(import_ui113.Grid, { item: true }, /* @__PURE__ */ React129.createElement(SelectControl, { options })), /* @__PURE__ */ React129.createElement(import_ui113.Grid, { item: true }, /* @__PURE__ */ React129.createElement(import_editor_ui18.InfoAlert, null, (0, import_i18n67.__)(
     "Linked uploads are saved to the server. Direct attachments will not appear under Submissions.",
     "elementor"
   ))));
@@ -10150,8 +10880,8 @@ var React130 = __toESM(require("react"));
 var import_react78 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons42 = require("@elementor/icons");
-var import_ui113 = require("@elementor/ui");
-var NoticeTitle = (0, import_ui113.styled)(import_ui113.AlertTitle)({
+var import_ui114 = require("@elementor/ui");
+var NoticeTitle = (0, import_ui114.styled)(import_ui114.AlertTitle)({
   "&.MuiAlertTitle-root.MuiAlertTitle-root": {
     marginBottom: 4,
     fontStyle: "italic"
@@ -10190,8 +10920,8 @@ var NoticeControl = createControl(
         markNoticeAsDismissedInSession(dismissible);
       }
     };
-    return /* @__PURE__ */ React130.createElement(import_ui113.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React130.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React130.createElement(import_ui113.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React130.createElement(
-      import_ui113.AlertAction,
+    return /* @__PURE__ */ React130.createElement(import_ui114.Alert, { variant: "outlined", severity, icon, size: "small", onClose: handleDismiss }, heading && /* @__PURE__ */ React130.createElement(NoticeTitle, null, heading), /* @__PURE__ */ React130.createElement(import_ui114.Typography, { variant: "caption", color: "textSecondary", sx: { fontStyle: "italic" } }, content), buttonText && buttonUrl && /* @__PURE__ */ React130.createElement(
+      import_ui114.AlertAction,
       {
         variant: "contained",
         color: severity,
@@ -10209,7 +10939,7 @@ var NoticeControl = createControl(
 // src/controls/grid-span-control.tsx
 var React131 = __toESM(require("react"));
 var import_editor_props69 = require("@elementor/editor-props");
-var import_ui114 = require("@elementor/ui");
+var import_ui115 = require("@elementor/ui");
 var GridSpanControl = createControl(
   ({
     placeholder: propPlaceholder,
@@ -10227,7 +10957,7 @@ var GridSpanControl = createControl(
     };
     const placeholder = propPlaceholder ?? boundPlaceholder ?? `e.g: 'span 2' or '1 / 3'`;
     return /* @__PURE__ */ React131.createElement(ControlActions, null, /* @__PURE__ */ React131.createElement(
-      import_ui114.TextField,
+      import_ui115.TextField,
       {
         size: "tiny",
         fullWidth: true,
@@ -10250,14 +10980,14 @@ var GridSpanControl = createControl(
 var React133 = __toESM(require("react"));
 var import_react80 = require("react");
 var import_icons43 = require("@elementor/icons");
-var import_ui116 = require("@elementor/ui");
+var import_ui117 = require("@elementor/ui");
 var import_i18n68 = require("@wordpress/i18n");
 
 // src/components/promotions/promotion-trigger.tsx
 var React132 = __toESM(require("react"));
 var import_react79 = require("react");
 var import_editor_ui19 = require("@elementor/editor-ui");
-var import_ui115 = require("@elementor/ui");
+var import_ui116 = require("@elementor/ui");
 function getV4Promotion(key) {
   return window.elementor?.config?.v4Promotions?.[key];
 }
@@ -10289,7 +11019,7 @@ var PromotionTrigger = (0, import_react79.forwardRef)(
         onCtaClick: () => trackUpgradePromotionClick(trackingData)
       },
       /* @__PURE__ */ React132.createElement(
-        import_ui115.Box,
+        import_ui116.Box,
         {
           onClick: (e) => {
             e.stopPropagation();
@@ -10309,7 +11039,7 @@ var TRACKING_DATA = { target_name: "display_conditions", location_l2: "general"
 var DisplayConditionsControl = createControl(() => {
   const triggerRef = (0, import_react80.useRef)(null);
   return /* @__PURE__ */ React133.createElement(
-    import_ui116.Stack,
+    import_ui117.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -10319,8 +11049,8 @@ var DisplayConditionsControl = createControl(() => {
       }
     },
     /* @__PURE__ */ React133.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "displayConditions", trackingData: TRACKING_DATA }),
-    /* @__PURE__ */ React133.createElement(import_ui116.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React133.createElement(
-      import_ui116.IconButton,
+    /* @__PURE__ */ React133.createElement(import_ui117.Tooltip, { title: ARIA_LABEL, placement: "top" }, /* @__PURE__ */ React133.createElement(
+      import_ui117.IconButton,
       {
         size: "tiny",
         "aria-label": ARIA_LABEL,
@@ -10341,14 +11071,14 @@ var DisplayConditionsControl = createControl(() => {
 var React134 = __toESM(require("react"));
 var import_react81 = require("react");
 var import_icons44 = require("@elementor/icons");
-var import_ui117 = require("@elementor/ui");
+var import_ui118 = require("@elementor/ui");
 var import_i18n69 = require("@wordpress/i18n");
 var ARIA_LABEL2 = (0, import_i18n69.__)("Attributes", "elementor");
 var TRACKING_DATA2 = { target_name: "attributes", location_l2: "general" };
 var AttributesControl = createControl(() => {
   const triggerRef = (0, import_react81.useRef)(null);
   return /* @__PURE__ */ React134.createElement(
-    import_ui117.Stack,
+    import_ui118.Stack,
     {
       direction: "row",
       spacing: 2,
@@ -10358,7 +11088,7 @@ var AttributesControl = createControl(() => {
       }
     },
     /* @__PURE__ */ React134.createElement(PromotionTrigger, { ref: triggerRef, promotionKey: "attributes", trackingData: TRACKING_DATA2 }),
-    /* @__PURE__ */ React134.createElement(import_ui117.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React134.createElement(
+    /* @__PURE__ */ React134.createElement(import_ui118.Tooltip, { title: ARIA_LABEL2, placement: "top" }, /* @__PURE__ */ React134.createElement(
       import_icons44.PlusIcon,
       {
         "aria-label": ARIA_LABEL2,
@@ -10374,18 +11104,18 @@ var AttributesControl = createControl(() => {
 // src/components/icon-buttons/clear-icon-button.tsx
 var React135 = __toESM(require("react"));
 var import_icons45 = require("@elementor/icons");
-var import_ui118 = require("@elementor/ui");
-var CustomIconButton = (0, import_ui118.styled)(import_ui118.IconButton)(({ theme }) => ({
+var import_ui119 = require("@elementor/ui");
+var CustomIconButton = (0, import_ui119.styled)(import_ui119.IconButton)(({ theme }) => ({
   width: theme.spacing(2.5),
   height: theme.spacing(2.5)
 }));
-var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React135.createElement(import_ui118.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React135.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React135.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
+var ClearIconButton = ({ tooltipText, onClick, disabled, size = "tiny" }) => /* @__PURE__ */ React135.createElement(import_ui119.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React135.createElement(CustomIconButton, { "aria-label": tooltipText, size, onClick, disabled }, /* @__PURE__ */ React135.createElement(import_icons45.BrushBigIcon, { fontSize: size })));
 
 // src/components/repeater/repeater.tsx
 var React136 = __toESM(require("react"));
 var import_react82 = require("react");
 var import_icons46 = require("@elementor/icons");
-var import_ui119 = require("@elementor/ui");
+var import_ui120 = require("@elementor/ui");
 var import_i18n70 = require("@wordpress/i18n");
 var SIZE12 = "tiny";
 var EMPTY_OPEN_ITEM2 = -1;
@@ -10469,7 +11199,7 @@ var Repeater3 = ({
   const isButtonDisabled = disabled || disableAddItemButton;
   const shouldShowInfotip = isButtonDisabled && addButtonInfotipContent;
   const addButton = /* @__PURE__ */ React136.createElement(
-    import_ui119.IconButton,
+    import_ui120.IconButton,
     {
       size: SIZE12,
       sx: {
@@ -10482,14 +11212,14 @@ var Repeater3 = ({
     /* @__PURE__ */ React136.createElement(import_icons46.PlusIcon, { fontSize: SIZE12 })
   );
   return /* @__PURE__ */ React136.createElement(SectionContent, { gap: 2 }, /* @__PURE__ */ React136.createElement(RepeaterHeader, { label, adornment }, shouldShowInfotip ? /* @__PURE__ */ React136.createElement(
-    import_ui119.Infotip,
+    import_ui120.Infotip,
     {
       placement: "right",
       content: addButtonInfotipContent,
       color: "secondary",
       slotProps: { popper: { sx: { width: 300 } } }
     },
-    /* @__PURE__ */ React136.createElement(import_ui119.Box, { sx: { ...isButtonDisabled ? { cursor: "not-allowed" } : {} } }, addButton)
+    /* @__PURE__ */ React136.createElement(import_ui120.Box, { 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];
@@ -10556,12 +11286,12 @@ var RepeaterItem = ({
     },
     wrappedOnPopoverClose
   );
-  const triggerProps = (0, import_ui119.bindTrigger)(popoverState);
+  const triggerProps = (0, import_ui120.bindTrigger)(popoverState);
   usePopoverDismiss({ isOpen: popoverState.isOpen, onClose: popoverProps.onClose });
   const duplicateLabel = (0, import_i18n70.__)("Duplicate", "elementor");
   const toggleLabel = propDisabled ? (0, import_i18n70.__)("Show", "elementor") : (0, import_i18n70.__)("Hide", "elementor");
   const removeLabel = (0, import_i18n70.__)("Remove", "elementor");
-  return /* @__PURE__ */ React136.createElement(import_ui119.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
+  return /* @__PURE__ */ React136.createElement(import_ui120.Box, { sx: { display: "contents" } }, /* @__PURE__ */ React136.createElement(
     RepeaterTag,
     {
       disabled,
@@ -10576,14 +11306,14 @@ var RepeaterItem = ({
         }
       },
       startIcon,
-      actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(import_ui119.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui119.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
+      actions: /* @__PURE__ */ React136.createElement(React136.Fragment, null, showDuplicate && /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: duplicateLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui120.IconButton, { size: SIZE12, onClick: duplicateItem, "aria-label": duplicateLabel }, /* @__PURE__ */ React136.createElement(import_icons46.CopyIcon, { fontSize: SIZE12 }))), showToggle && /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: toggleLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui120.IconButton, { size: SIZE12, onClick: toggleDisableItem, "aria-label": toggleLabel }, propDisabled ? /* @__PURE__ */ React136.createElement(import_icons46.EyeOffIcon, { fontSize: SIZE12 }) : /* @__PURE__ */ React136.createElement(import_icons46.EyeIcon, { fontSize: SIZE12 }))), actions?.(value), showRemove && /* @__PURE__ */ React136.createElement(import_ui120.Tooltip, { title: removeLabel, placement: "top" }, /* @__PURE__ */ React136.createElement(import_ui120.IconButton, { size: SIZE12, onClick: removeItem, "aria-label": removeLabel }, /* @__PURE__ */ React136.createElement(import_icons46.XIcon, { fontSize: SIZE12 }))))
     }
-  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui119.Box, null, children({ anchorEl: ref }))));
+  ), /* @__PURE__ */ React136.createElement(RepeaterPopover, { width: ref?.getBoundingClientRect().width, ...popoverProps, anchorEl: ref }, /* @__PURE__ */ React136.createElement(import_ui120.Box, null, children({ anchorEl: ref }))));
 };
 var usePopover = (openOnMount, onOpen, onPopoverClose) => {
   const [ref, setRef] = (0, import_react82.useState)(null);
-  const popoverState = (0, import_ui119.usePopupState)({ variant: "popover" });
-  const popoverProps = (0, import_ui119.bindPopover)(popoverState);
+  const popoverState = (0, import_ui120.usePopupState)({ variant: "popover" });
+  const popoverProps = (0, import_ui120.bindPopover)(popoverState);
   (0, import_react82.useEffect)(() => {
     if (openOnMount && ref) {
       popoverState.open(ref);
@@ -10604,7 +11334,7 @@ var usePopover = (openOnMount, onOpen, onPopoverClose) => {
 
 // src/components/size/unstable-size-field.tsx
 var React139 = __toESM(require("react"));
-var import_ui121 = require("@elementor/ui");
+var import_ui122 = require("@elementor/ui");
 
 // src/hooks/use-size-value.ts
 var DEFAULT_UNIT2 = "px";
@@ -10649,14 +11379,14 @@ var differsFromExternal = (newState, externalState) => {
 var React137 = __toESM(require("react"));
 var import_react83 = require("react");
 var import_editor_ui20 = require("@elementor/editor-ui");
-var import_ui120 = require("@elementor/ui");
+var import_ui121 = require("@elementor/ui");
 var menuItemContentStyles2 = {
   display: "flex",
   flexDirection: "column",
   justifyContent: "center"
 };
 var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
-  const popupState = (0, import_ui120.usePopupState)({
+  const popupState = (0, import_ui121.usePopupState)({
     variant: "popover",
     popupId: (0, import_react83.useId)()
   });
@@ -10664,7 +11394,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     onClick(options[index]);
     popupState.close();
   };
-  return /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui120.bindTrigger)(popupState) }, value), /* @__PURE__ */ React137.createElement(import_ui120.Menu, { MenuListProps: { dense: true }, ...(0, import_ui120.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React137.createElement(
+  return /* @__PURE__ */ React137.createElement(React137.Fragment, null, /* @__PURE__ */ React137.createElement(StyledButton3, { isPrimaryColor: showPrimaryColor, size: "small", ...(0, import_ui121.bindTrigger)(popupState) }, value), /* @__PURE__ */ React137.createElement(import_ui121.Menu, { MenuListProps: { dense: true }, ...(0, import_ui121.bindMenu)(popupState) }, options.map((option, index) => /* @__PURE__ */ React137.createElement(
     import_editor_ui20.MenuListItem,
     {
       key: option,
@@ -10683,7 +11413,7 @@ var UnitSelect = ({ value, showPrimaryColor, onClick, options }) => {
     option.toUpperCase()
   ))));
 };
-var StyledButton3 = (0, import_ui120.styled)(import_ui120.Button, {
+var StyledButton3 = (0, import_ui121.styled)(import_ui121.Button, {
   shouldForwardProp: (prop) => prop !== "isPrimaryColor"
 })(({ isPrimaryColor, theme }) => ({
   color: isPrimaryColor ? theme.palette.text.primary : theme.palette.text.tertiary,
@@ -10744,8 +11474,8 @@ var UnstableSizeField = ({
       onChange: (event) => setSize(event.target.value),
       InputProps: {
         ...InputProps,
-        startAdornment: startIcon && /* @__PURE__ */ React139.createElement(import_ui121.InputAdornment, { position: "start" }, startIcon),
-        endAdornment: /* @__PURE__ */ React139.createElement(import_ui121.InputAdornment, { position: "end" }, /* @__PURE__ */ React139.createElement(
+        startAdornment: startIcon && /* @__PURE__ */ React139.createElement(import_ui122.InputAdornment, { position: "start" }, startIcon),
+        endAdornment: /* @__PURE__ */ React139.createElement(import_ui122.InputAdornment, { position: "end" }, /* @__PURE__ */ React139.createElement(
           UnitSelect,
           {
             options: units2,
@@ -10873,9 +11603,11 @@ var useFontFamilies = () => {
   injectIntoRepeaterItemActions,
   injectIntoRepeaterItemIcon,
   injectIntoRepeaterItemLabel,
+  isDeletedCustomIconLibrary,
   isUnitExtendedOption,
   registerControlReplacement,
   resetFontAwesome7IconsCache,
+  resolveCustomIconSvg,
   resolveFontAwesome7Icon,
   trackUpgradePromotionClick,
   trackViewPromotion,