@elementor/editor-global-classes 0.22.0 → 3.32.0-20

package/dist/index.js

@@ -36,23 +36,22 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
-var import_store22 = require("@elementor/store");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_store24 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React11 = __toESM(require("react"));
-var import_editor_documents3 = require("@elementor/editor-documents");
+var React18 = __toESM(require("react"));
+var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_ui10 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_ui16 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
 
 // src/global-classes-styles-provider.ts
 var import_editor_styles2 = require("@elementor/editor-styles");
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_store2 = require("@elementor/store");
 var import_i18n = require("@wordpress/i18n");
 
@@ -209,13 +208,14 @@ var slice = (0, import_store.__createSlice)({
       }
       localHistory.next(state.data);
       const variant = (0, import_editor_styles.getVariantByMeta)(style, payload.meta);
+      let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
+      customCss = customCss?.raw ? customCss : null;
       if (variant) {
         variant.props = (0, import_editor_props.mergeProps)(variant.props, payload.props);
-        if (Object.keys(variant.props).length === 0) {
-          style.variants = style.variants.filter((v) => v !== variant);
-        }
+        variant.custom_css = customCss;
+        style.variants = getNonEmptyVariants(style);
       } else {
-        style.variants.push({ meta: payload.meta, props: payload.props });
+        style.variants.push({ meta: payload.meta, props: payload.props, custom_css: customCss });
       }
       state.isDirty = true;
     },
@@ -256,6 +256,11 @@ var slice = (0, import_store.__createSlice)({
     }
   }
 });
+var getNonEmptyVariants = (style) => {
+  return style.variants.filter(
+    ({ props, custom_css: customCss }) => Object.keys(props).length || customCss?.raw
+  );
+};
 var selectData = (state) => state[SLICE_NAME].data;
 var selectFrontendInitialData = (state) => state[SLICE_NAME].initialData.frontend;
 var selectPreviewInitialData = (state) => state[SLICE_NAME].initialData.preview;
@@ -268,6 +273,10 @@ var selectOrderedClasses = (0, import_store.__createSelector)(
   (items, order) => order.map((id2) => items[id2])
 );
 var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
+var selectEmptyCssClass = (0, import_store.__createSelector)(
+  selectData,
+  ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
+);
 
 // src/global-classes-styles-provider.ts
 var MAX_CLASSES = 50;
@@ -286,12 +295,9 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
     all: () => selectOrderedClasses((0, import_store2.__getState)()),
     get: (id2) => selectClass((0, import_store2.__getState)(), id2),
     resolveCssName: (id2) => {
-      if (!(0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30")) {
-        return id2;
-      }
       return selectClass((0, import_store2.__getState)(), id2)?.label ?? id2;
     },
-    create: (label) => {
+    create: (label, variants = []) => {
       const classes = selectGlobalClasses((0, import_store2.__getState)());
       const existingLabels = Object.values(classes).map((style) => style.label);
       if (existingLabels.includes(label)) {
@@ -304,7 +310,7 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
           id: id2,
           type: "class",
           label,
-          variants: []
+          variants
         })
       );
       return id2;
@@ -327,39 +333,31 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
           props: args.props
         })
       );
+    },
+    updateCustomCss: (args) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          custom_css: args.custom_css,
+          props: {}
+        })
+      );
     }
   }
 });
 
-// src/components/class-manager/class-manager-panel.tsx
-var import_react6 = require("react");
-var React10 = __toESM(require("react"));
-var import_editor_documents2 = require("@elementor/editor-documents");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui3 = require("@elementor/editor-ui");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_icons7 = require("@elementor/icons");
+// src/hooks/use-prefetch-css-class-usage.ts
 var import_query = require("@elementor/query");
-var import_store16 = require("@elementor/store");
-var import_ui9 = require("@elementor/ui");
-var import_utils2 = require("@elementor/utils");
-var import_i18n8 = require("@wordpress/i18n");
-
-// src/hooks/use-dirty-state.ts
-var import_store4 = require("@elementor/store");
-var useDirtyState = () => {
-  return (0, import_store4.__useSelector)(selectIsDirty);
-};
-
-// src/save-global-classes.ts
-var import_store6 = require("@elementor/store");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
 var RESOURCE_URL = "/global-classes";
+var BASE_URL = "elementor/v1";
+var RESOURCE_USAGE_URL = `${RESOURCE_URL}/usage`;
 var apiClient = {
-  all: (context2 = "preview") => (0, import_http_client.httpService)().get("elementor/v1" + RESOURCE_URL, {
+  usage: () => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_USAGE_URL}`),
+  all: (context2 = "preview") => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`, {
     params: { context: context2 }
   }),
   publish: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
@@ -374,23 +372,225 @@ var apiClient = {
   })
 };
 
+// src/components/css-class-usage/utils.ts
+var transformData = (data) => Object.entries(data).reduce((acc, [key, value]) => {
+  acc[key] = {
+    content: value || [],
+    total: value.reduce((total, val) => total + (val?.total || 0), 0)
+  };
+  return acc;
+}, {});
+
+// service/css-class-usage-service.ts
+var fetchCssClassUsage = async () => {
+  const response = await apiClient.usage();
+  return transformData(response.data.data);
+};
+
+// src/components/css-class-usage/types.ts
+var QUERY_KEY = "css-classes-usage";
+
+// src/hooks/use-prefetch-css-class-usage.ts
+function usePrefetchCssClassUsage() {
+  const queryClient = (0, import_query.useQueryClient)();
+  const prefetchClassesUsage = () => queryClient.prefetchQuery({
+    queryKey: [QUERY_KEY],
+    queryFn: fetchCssClassUsage
+  });
+  return { prefetchClassesUsage };
+}
+
+// src/components/class-manager/class-manager-panel.tsx
+var React17 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui6 = require("@elementor/editor-ui");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_icons12 = require("@elementor/icons");
+var import_query3 = require("@elementor/query");
+var import_store18 = require("@elementor/store");
+var import_ui15 = require("@elementor/ui");
+var import_i18n13 = require("@wordpress/i18n");
+
+// src/hooks/use-classes-order.ts
+var import_store4 = require("@elementor/store");
+var useClassesOrder = () => {
+  return (0, import_store4.__useSelector)(selectOrder);
+};
+
+// src/hooks/use-dirty-state.ts
+var import_store6 = require("@elementor/store");
+var useDirtyState = () => {
+  return (0, import_store6.__useSelector)(selectIsDirty);
+};
+
+// src/hooks/use-filters.ts
+var import_react3 = require("react");
+
+// src/components/search-and-filter/context.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
+var import_utils3 = require("@elementor/utils");
+var SearchAndFilterContext = (0, import_react.createContext)(void 0);
+var INIT_CHECKED_FILTERS = {
+  empty: false,
+  onThisPage: false,
+  unused: false
+};
+var SearchAndFilterProvider = ({ children }) => {
+  const [filters, setFilters] = React.useState(INIT_CHECKED_FILTERS);
+  const { debouncedValue, inputValue, handleChange } = (0, import_utils3.useDebounceState)({
+    delay: 300,
+    initialValue: ""
+  });
+  const onClearSearch = () => {
+    handleChange("");
+  };
+  const onClearFilter = () => {
+    setFilters(INIT_CHECKED_FILTERS);
+  };
+  return /* @__PURE__ */ React.createElement(
+    SearchAndFilterContext.Provider,
+    {
+      value: {
+        search: {
+          debouncedValue,
+          inputValue,
+          handleChange,
+          onClearSearch
+        },
+        filters: {
+          filters,
+          setFilters,
+          onClearFilter
+        }
+      }
+    },
+    children
+  );
+};
+var useSearchAndFilters = () => {
+  const context2 = (0, import_react.useContext)(SearchAndFilterContext);
+  if (!context2) {
+    throw new Error("useSearchContext must be used within a SearchContextProvider");
+  }
+  return context2;
+};
+
+// src/hooks/use-filtered-css-class-usage.tsx
+var import_react2 = require("react");
+var import_editor_documents = require("@elementor/editor-documents");
+
+// src/hooks/use-css-class-usage.ts
+var import_query2 = require("@elementor/query");
+var useCssClassUsage = () => {
+  return (0, import_query2.useQuery)({
+    queryKey: [QUERY_KEY],
+    queryFn: fetchCssClassUsage,
+    refetchOnMount: false,
+    refetchOnWindowFocus: true
+  });
+};
+
+// src/hooks/use-empty-css-class.ts
+var import_store8 = require("@elementor/store");
+var useEmptyCssClass = () => {
+  return (0, import_store8.__useSelector)(selectEmptyCssClass);
+};
+var useAllCssClassesIDs = () => {
+  const cssClasses = (0, import_store8.__useSelector)(selectGlobalClasses);
+  return Object.keys(cssClasses);
+};
+
+// src/hooks/use-filtered-css-class-usage.tsx
+var findCssClassKeysByPageID = (data, pageId) => {
+  const result = [];
+  for (const key in data) {
+    data[key].content.forEach((content) => {
+      if (+content.pageId === pageId) {
+        result.push(key);
+      }
+    });
+  }
+  return result;
+};
+var getUnusedClasses = (usedCssClass, potentialUnused) => {
+  const set = new Set(usedCssClass);
+  return potentialUnused.filter((cssClass) => !set.has(cssClass));
+};
+var EMPTY_FILTERED_CSS_CLASS_RESPONSE = {
+  empty: [],
+  onThisPage: [],
+  unused: []
+};
+var useFilteredCssClassUsage = () => {
+  const document = (0, import_editor_documents.__useActiveDocument)();
+  const emptyCssClasses = useEmptyCssClass();
+  const { data, isLoading } = useCssClassUsage();
+  const listOfCssClasses = useAllCssClassesIDs();
+  const emptyCssClassesIDs = (0, import_react2.useMemo)(() => emptyCssClasses.map(({ id: id2 }) => id2), [emptyCssClasses]);
+  const onThisPage = (0, import_react2.useMemo)(() => {
+    if (!data || !document) {
+      return [];
+    }
+    return findCssClassKeysByPageID(data, document.id);
+  }, [data, document]);
+  const unused = (0, import_react2.useMemo)(() => {
+    if (!data) {
+      return [];
+    }
+    return getUnusedClasses(Object.keys(data), listOfCssClasses);
+  }, [data, listOfCssClasses]);
+  if (isLoading || !data || !document) {
+    return EMPTY_FILTERED_CSS_CLASS_RESPONSE;
+  }
+  return {
+    onThisPage,
+    unused,
+    empty: emptyCssClassesIDs
+  };
+};
+
+// src/hooks/use-filters.ts
+var useFilters = () => {
+  const {
+    filters: { filters }
+  } = useSearchAndFilters();
+  const allFilters = useFilteredCssClassUsage();
+  return (0, import_react3.useMemo)(() => {
+    const activeEntries = Object.entries(filters).filter(([, isActive]) => isActive);
+    if (activeEntries.length === 0) {
+      return null;
+    }
+    return activeEntries.reduce((acc, [key], index) => {
+      const current = allFilters[key] || [];
+      if (index === 0) {
+        return current;
+      }
+      return acc.filter((val) => current.includes(val));
+    }, []);
+  }, [filters, allFilters]);
+};
+
 // src/save-global-classes.ts
+var import_store10 = require("@elementor/store");
 async function saveGlobalClasses({ context: context2 }) {
-  const state = selectData((0, import_store6.__getState)());
+  const state = selectData((0, import_store10.__getState)());
   if (context2 === "preview") {
     await apiClient.saveDraft({
       items: state.items,
       order: state.order,
-      changes: calculateChanges(state, selectPreviewInitialData((0, import_store6.__getState)()))
+      changes: calculateChanges(state, selectPreviewInitialData((0, import_store10.__getState)()))
     });
   } else {
     await apiClient.publish({
       items: state.items,
       order: state.order,
-      changes: calculateChanges(state, selectFrontendInitialData((0, import_store6.__getState)()))
+      changes: calculateChanges(state, selectFrontendInitialData((0, import_store10.__getState)()))
     });
   }
-  (0, import_store6.__dispatch)(slice.actions.reset({ context: context2 }));
+  (0, import_store10.__dispatch)(slice.actions.reset({ context: context2 }));
 }
 function calculateChanges(state, initialData) {
   const stateIds = Object.keys(state.items);
@@ -416,22 +616,232 @@ function isPlainObject(value) {
   return !!value && typeof value === "object" && !Array.isArray(value);
 }
 
-// src/components/class-manager/class-manager-introduction.tsx
-var React = __toESM(require("react"));
-var import_react = require("react");
-var import_editor_current_user = require("@elementor/editor-current-user");
-var import_editor_ui = require("@elementor/editor-ui");
+// src/components/search-and-filter/components/filter/active-filters.tsx
+var React4 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+
+// src/components/search-and-filter/components/filter/clear-icon-button.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
+var ClearIconButton = ({ tooltipText, sx }) => {
+  const {
+    filters: { onClearFilter }
+  } = useSearchAndFilters();
+  return /* @__PURE__ */ React2.createElement(import_ui.Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(CustomIconButton, { "aria-label": tooltipText, size: "tiny", onClick: onClearFilter, sx }, /* @__PURE__ */ React2.createElement(import_icons.BrushBigIcon, { fontSize: "tiny" }))));
+};
+var CustomIconButton = (0, import_ui.styled)(import_ui.IconButton)(({ theme }) => ({
+  "&.Mui-disabled": {
+    pointerEvents: "auto",
+    "&:hover": {
+      color: theme.palette.action.disabled
+    }
+  }
+}));
+
+// src/components/search-and-filter/components/filter/filter-list.tsx
+var React3 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
+var filterConfig = {
+  unused: (0, import_i18n2.__)("Unused", "elementor"),
+  empty: (0, import_i18n2.__)("Empty", "elementor"),
+  onThisPage: (0, import_i18n2.__)("On this page", "elementor")
+};
+var FilterList = () => {
+  const {
+    filters: { filters, setFilters }
+  } = useSearchAndFilters();
+  const filteredCssClass = useFilteredCssClassUsage();
+  const handleOnClick = (value) => {
+    setFilters((prev) => ({ ...prev, [value]: !prev[value] }));
+  };
+  return /* @__PURE__ */ React3.createElement(import_ui2.MenuList, null, /* @__PURE__ */ React3.createElement(import_ui2.MenuItem, { onClick: () => handleOnClick("unused") }, /* @__PURE__ */ React3.createElement(
+    LabeledCheckbox,
+    {
+      label: filterConfig.unused,
+      checked: filters.unused,
+      suffix: /* @__PURE__ */ React3.createElement(import_ui2.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.unused.length })
+    }
+  )), /* @__PURE__ */ React3.createElement(import_ui2.MenuItem, { onClick: () => handleOnClick("empty") }, /* @__PURE__ */ React3.createElement(
+    LabeledCheckbox,
+    {
+      label: filterConfig.empty,
+      checked: filters.empty,
+      suffix: /* @__PURE__ */ React3.createElement(import_ui2.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.empty.length })
+    }
+  )), /* @__PURE__ */ React3.createElement(import_ui2.MenuItem, { onClick: () => handleOnClick("onThisPage") }, /* @__PURE__ */ React3.createElement(
+    LabeledCheckbox,
+    {
+      label: filterConfig.onThisPage,
+      checked: filters.onThisPage,
+      suffix: /* @__PURE__ */ React3.createElement(import_ui2.Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.onThisPage.length })
+    }
+  )));
+};
+var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React3.createElement(import_ui2.Stack, { direction: "row", alignItems: "center", gap: 0.5, flex: 1 }, /* @__PURE__ */ React3.createElement(
+  import_ui2.Checkbox,
+  {
+    size: "small",
+    checked,
+    sx: {
+      padding: 0,
+      color: "text.tertiary",
+      "&.Mui-checked": {
+        color: "text.tertiary"
+      }
+    }
+  }
+), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "caption", sx: { color: "text.secondary" } }, label), suffix);
+
+// src/components/search-and-filter/components/filter/active-filters.tsx
+var ActiveFilters = () => {
+  const {
+    filters: { filters, setFilters }
+  } = useSearchAndFilters();
+  const handleRemove = (key) => {
+    setFilters((prev) => ({ ...prev, [key]: false }));
+  };
+  const activeKeys = Object.keys(filters).filter((key) => filters[key]);
+  const showClearIcon = activeKeys.length > 0;
+  return /* @__PURE__ */ React4.createElement(import_ui3.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React4.createElement(import_ui3.Stack, { direction: "row", gap: 0.5, alignItems: "center", flexWrap: "wrap" }, activeKeys.map((key) => /* @__PURE__ */ React4.createElement(
+    import_ui3.Chip,
+    {
+      key,
+      label: filterConfig[key],
+      onDelete: () => handleRemove(key),
+      sx: chipSx,
+      size: "tiny"
+    }
+  ))), showClearIcon && /* @__PURE__ */ React4.createElement(
+    ClearIconButton,
+    {
+      tooltipText: (0, import_i18n3.__)("Clear Filters", "elementor"),
+      sx: { margin: "0 0 auto auto" }
+    }
+  ));
+};
+var chipSx = {
+  "& .MuiChip-deleteIcon": {
+    display: "none",
+    transition: "opacity 0.2s"
+  },
+  "&:hover .MuiChip-deleteIcon": {
+    display: "block"
+  }
+};
+
+// src/components/search-and-filter/components/filter/css-class-filter.tsx
+var React5 = __toESM(require("react"));
+var import_editor_ui = require("@elementor/editor-ui");
+var import_icons2 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var CssClassFilter = () => {
+  const {
+    filters: { filters }
+  } = useSearchAndFilters();
+  const popupState = (0, import_ui4.usePopupState)({
+    variant: "popover",
+    disableAutoFocus: true
+  });
+  const showCleanIcon = Object.values(filters).some((value) => value);
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui4.Tooltip, { title: (0, import_i18n4.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React5.createElement(
+    import_ui4.ToggleButton,
+    {
+      value: "filter",
+      size: "tiny",
+      selected: popupState.isOpen,
+      ...(0, import_ui4.bindToggle)(popupState)
+    },
+    /* @__PURE__ */ React5.createElement(import_icons2.FilterIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React5.createElement(
+    import_ui4.Popover,
+    {
+      sx: {
+        maxWidth: "344px"
+      },
+      anchorOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: -21
+      },
+      ...(0, import_ui4.bindPopover)(popupState)
+    },
+    /* @__PURE__ */ React5.createElement(
+      import_editor_ui.PopoverHeader,
+      {
+        actions: showCleanIcon ? [
+          /* @__PURE__ */ React5.createElement(
+            ClearIconButton,
+            {
+              key: "clear-all-button",
+              tooltipText: (0, import_i18n4.__)("Clear all", "elementor")
+            }
+          )
+        ] : [],
+        onClose: popupState.close,
+        title: (0, import_i18n4.__)("Filters", "elementor"),
+        icon: /* @__PURE__ */ React5.createElement(import_icons2.FilterIcon, { fontSize: "tiny" })
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(
+      import_ui4.Divider,
+      {
+        sx: {
+          borderWidth: "1px 0 0 0"
+        }
+      }
+    ),
+    /* @__PURE__ */ React5.createElement(import_editor_ui.PopoverBody, { width: 344, height: 125 }, /* @__PURE__ */ React5.createElement(FilterList, null))
+  ));
+};
+
+// src/components/search-and-filter/components/search/class-manager-search.tsx
+var React6 = __toESM(require("react"));
+var import_icons3 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+var ClassManagerSearch = () => {
+  const {
+    search: { inputValue, handleChange }
+  } = useSearchAndFilters();
+  return /* @__PURE__ */ React6.createElement(import_ui5.Stack, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React6.createElement(import_ui5.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React6.createElement(
+    import_ui5.TextField,
+    {
+      role: "search",
+      fullWidth: true,
+      size: "tiny",
+      value: inputValue,
+      placeholder: (0, import_i18n5.__)("Search", "elementor"),
+      onChange: (e) => handleChange(e.target.value),
+      InputProps: {
+        startAdornment: /* @__PURE__ */ React6.createElement(import_ui5.InputAdornment, { position: "start" }, /* @__PURE__ */ React6.createElement(import_icons3.SearchIcon, { fontSize: "tiny" }))
+      }
+    }
+  )));
+};
+
+// src/components/class-manager/class-manager-introduction.tsx
+var React7 = __toESM(require("react"));
+var import_react4 = require("react");
+var import_editor_current_user = require("@elementor/editor-current-user");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_ui6 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
-  const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react.useState)(!isMessageSuppressed);
-  return /* @__PURE__ */ React.createElement(
-    import_editor_ui.IntroductionModal,
+  const [shouldShowIntroduction, setShouldShowIntroduction] = (0, import_react4.useState)(!isMessageSuppressed);
+  return /* @__PURE__ */ React7.createElement(
+    import_editor_ui2.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n2.__)("Class Manager", "elementor"),
+      title: (0, import_i18n6.__)("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -439,54 +849,34 @@ var ClassManagerIntroduction = () => {
         setShouldShowIntroduction(false);
       }
     },
-    /* @__PURE__ */ React.createElement(
-      import_ui.Image,
+    /* @__PURE__ */ React7.createElement(
+      import_ui6.Image,
       {
         sx: { width: "100%", aspectRatio: "16 / 9" },
         src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
         alt: ""
       }
     ),
-    /* @__PURE__ */ React.createElement(IntroductionContent, null)
+    /* @__PURE__ */ React7.createElement(IntroductionContent, null)
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(import_ui.Box, { p: 3 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+  return /* @__PURE__ */ React7.createElement(import_ui6.Box, { p: 3 }, /* @__PURE__ */ React7.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n6.__)(
     "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
-  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+  )), /* @__PURE__ */ React7.createElement("br", null), /* @__PURE__ */ React7.createElement(import_ui6.Typography, { variant: "body2" }, (0, import_i18n6.__)(
     "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
 };
 
-// src/components/class-manager/class-manager-search.tsx
-var React2 = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
-var ClassManagerSearch = ({ searchValue, onChange }) => /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 6, px: 2, pb: 1 }, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React2.createElement(import_ui2.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
-  import_ui2.TextField,
-  {
-    role: "search",
-    fullWidth: true,
-    size: "tiny",
-    value: searchValue,
-    placeholder: (0, import_i18n3.__)("Search", "elementor"),
-    onChange: (e) => onChange(e.target.value),
-    InputProps: {
-      startAdornment: /* @__PURE__ */ React2.createElement(import_ui2.InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(import_icons.SearchIcon, { fontSize: "tiny" }))
-    }
-  }
-))));
-
 // src/components/class-manager/delete-class.ts
-var import_editor_documents = require("@elementor/editor-documents");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
-var import_store8 = require("@elementor/store");
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store12 = require("@elementor/store");
 var isDeleted = false;
 var deleteClass = (id2) => {
-  (0, import_store8.__dispatch)(slice.actions.delete(id2));
+  (0, import_store12.__dispatch)(slice.actions.delete(id2));
   isDeleted = true;
 };
 var onDelete = async () => {
@@ -495,10 +885,10 @@ var onDelete = async () => {
 };
 var hasDeletedItems = () => isDeleted;
 var reloadDocument = () => {
-  const currentDocument = (0, import_editor_documents.getCurrentDocument)();
-  const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
+  const currentDocument = (0, import_editor_documents2.getCurrentDocument)();
+  const documentsManager = (0, import_editor_documents2.getV1DocumentsManager)();
   documentsManager.invalidateCache();
-  return (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
+  return (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
     id: currentDocument?.id,
     shouldScroll: false,
     shouldNavigateToDefaultRoute: false
@@ -506,71 +896,308 @@ var reloadDocument = () => {
 };
 
 // src/components/class-manager/flipped-color-swatch-icon.tsx
-var React3 = __toESM(require("react"));
-var import_icons2 = require("@elementor/icons");
-var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React3.createElement(import_icons2.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
-
-// src/components/class-manager/global-classes-list.tsx
 var React8 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_store14 = require("@elementor/store");
-var import_ui7 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+var import_icons4 = require("@elementor/icons");
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React8.createElement(import_icons4.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
 
-// src/hooks/use-classes-order.ts
-var import_store10 = require("@elementor/store");
-var useClassesOrder = () => {
-  return (0, import_store10.__useSelector)(selectOrder);
-};
+// src/components/class-manager/global-classes-list.tsx
+var React15 = __toESM(require("react"));
+var import_react7 = require("react");
+var import_store16 = require("@elementor/store");
+var import_ui13 = require("@elementor/ui");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/hooks/use-ordered-classes.ts
-var import_store12 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var useOrderedClasses = () => {
-  return (0, import_store12.__useSelector)(selectOrderedClasses);
+  return (0, import_store14.__useSelector)(selectOrderedClasses);
 };
 
 // src/components/class-manager/class-item.tsx
-var React6 = __toESM(require("react"));
-var import_react3 = require("react");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var React13 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_ui5 = require("@elementor/editor-ui");
+var import_icons9 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
+var import_i18n10 = require("@wordpress/i18n");
+
+// src/components/css-class-usage/components/css-class-usage-popover.tsx
+var React9 = __toESM(require("react"));
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_ui7 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
+
+// src/hooks/use-css-class-usage-by-id.ts
+var EMPTY_CLASS_USAGE = {
+  total: 0,
+  content: []
+};
+var useCssClassUsageByID = (id2) => {
+  const { data, ...rest } = useCssClassUsage();
+  const classData = data?.[id2] ?? EMPTY_CLASS_USAGE;
+  return { ...rest, data: classData };
+};
+
+// src/components/css-class-usage/components/css-class-usage-popover.tsx
+var iconMapper = {
+  "wp-post": {
+    label: (0, import_i18n7.__)("Post", "elementor"),
+    icon: /* @__PURE__ */ React9.createElement(import_icons5.PostTypeIcon, { fontSize: "inherit" })
+  },
+  "wp-page": {
+    label: (0, import_i18n7.__)("Page", "elementor"),
+    icon: /* @__PURE__ */ React9.createElement(import_icons5.PagesIcon, { fontSize: "inherit" })
+  },
+  popup: {
+    label: (0, import_i18n7.__)("Popup", "elementor"),
+    icon: /* @__PURE__ */ React9.createElement(import_icons5.PopupTemplateIcon, { fontSize: "inherit" })
+  },
+  header: {
+    label: (0, import_i18n7.__)("Header", "elementor"),
+    icon: /* @__PURE__ */ React9.createElement(import_icons5.HeaderTemplateIcon, { fontSize: "inherit" })
+  },
+  footer: {
+    label: (0, import_i18n7.__)("Footer", "elementor"),
+    icon: /* @__PURE__ */ React9.createElement(import_icons5.FooterTemplateIcon, { fontSize: "inherit" })
+  }
+};
+var CssClassUsagePopover = ({
+  cssClassID,
+  onClose
+}) => {
+  const { data: classUsage } = useCssClassUsageByID(cssClassID);
+  const onNavigate = (0, import_editor_documents3.__useOpenDocumentInNewTab)();
+  const cssClassUsageRecords = classUsage?.content.map(
+    ({ title, elements, pageId, type }) => ({
+      type: "item",
+      value: pageId,
+      label: title,
+      secondaryText: elements.length.toString(),
+      docType: type
+    })
+  ) ?? [];
+  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+    import_editor_ui3.PopoverHeader,
+    {
+      icon: /* @__PURE__ */ React9.createElement(import_icons5.CurrentLocationIcon, { fontSize: "tiny" }),
+      title: /* @__PURE__ */ React9.createElement(import_ui7.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui7.Box, { "aria-label": "header-title" }, (0, import_i18n7.__)("Locator", "elementor")), /* @__PURE__ */ React9.createElement(import_ui7.Box, null, /* @__PURE__ */ React9.createElement(import_ui7.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
+      onClose
+    }
+  ), /* @__PURE__ */ React9.createElement(import_ui7.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_ui3.PopoverBody, { width: 300 }, /* @__PURE__ */ React9.createElement(
+    import_editor_ui3.PopoverMenuList,
+    {
+      onSelect: (value) => onNavigate(+value),
+      items: cssClassUsageRecords,
+      onClose: () => {
+      },
+      menuListTemplate: StyledCssClassUsageItem,
+      menuItemContentTemplate: (cssClassUsageRecord) => /* @__PURE__ */ React9.createElement(import_ui7.Stack, { flexDirection: "row", flex: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(import_ui7.Box, { display: "flex", sx: { pr: 1 } }, /* @__PURE__ */ React9.createElement(
+        import_ui7.Tooltip,
+        {
+          disableInteractive: true,
+          title: iconMapper?.[cssClassUsageRecord.docType]?.label ?? cssClassUsageRecord.docType,
+          placement: "top"
+        },
+        /* @__PURE__ */ React9.createElement(import_ui7.Icon, { fontSize: "small" }, iconMapper?.[cssClassUsageRecord.docType]?.icon || /* @__PURE__ */ React9.createElement(import_icons5.PagesIcon, { fontSize: "inherit" }))
+      )), /* @__PURE__ */ React9.createElement(import_ui7.Box, { sx: { pr: 0.5, maxWidth: "173px" }, display: "flex" }, /* @__PURE__ */ React9.createElement(
+        import_editor_ui3.EllipsisWithTooltip,
+        {
+          title: cssClassUsageRecord.label,
+          as: import_ui7.Typography,
+          variant: "caption",
+          maxWidth: "173px",
+          sx: {
+            lineHeight: 1
+          }
+        }
+      )), /* @__PURE__ */ React9.createElement(import_icons5.ExternalLinkIcon, { className: "hover-only-icon", fontSize: "tiny" }), /* @__PURE__ */ React9.createElement(
+        import_ui7.Chip,
+        {
+          sx: {
+            ml: "auto"
+          },
+          size: "tiny",
+          label: cssClassUsageRecord.secondaryText
+        }
+      ))
+    }
+  )));
+};
+var StyledCssClassUsageItem = (0, import_ui7.styled)(import_ui7.MenuList)(({ theme }) => ({
+  "& > li": {
+    display: "flex",
+    cursor: "pointer",
+    height: 32,
+    width: "100%"
+  },
+  '& > [role="option"]': {
+    ...theme.typography.caption,
+    lineHeight: "inherit",
+    padding: theme.spacing(0.5, 1, 0.5, 2),
+    textOverflow: "ellipsis",
+    position: "absolute",
+    top: 0,
+    left: 0,
+    opacity: 1,
+    ".hover-only-icon": {
+      color: theme.palette.text.disabled,
+      opacity: 0
+    },
+    "&:hover": {
+      borderRadius: theme.spacing(0.5),
+      backgroundColor: theme.palette.action.hover,
+      ".hover-only-icon": {
+        color: theme.palette.text.disabled,
+        opacity: 1
+      }
+    }
+  },
+  width: "100%",
+  position: "relative"
+}));
+
+// src/components/css-class-usage/components/css-class-usage-trigger.tsx
+var React10 = __toESM(require("react"));
+var import_editor_ui4 = require("@elementor/editor-ui");
+var import_icons6 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
+var import_i18n8 = require("@wordpress/i18n");
+var CssClassUsageTrigger = ({ id: id2, onClick }) => {
+  const {
+    data: { total },
+    isLoading
+  } = useCssClassUsageByID(id2);
+  const cssClassUsagePopover = (0, import_ui8.usePopupState)({ variant: "popover", popupId: "css-class-usage-popover" });
+  if (isLoading) {
+    return null;
+  }
+  const WrapperComponent = total !== 0 ? TooltipWrapper : InfoAlertMessage;
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(import_ui8.Box, { position: "relative" }, /* @__PURE__ */ React10.createElement(WrapperComponent, { total }, /* @__PURE__ */ React10.createElement(
+    CustomIconButton2,
+    {
+      disabled: total === 0,
+      size: "tiny",
+      ...(0, import_ui8.bindTrigger)(cssClassUsagePopover),
+      onClick: (e) => {
+        if (total !== 0) {
+          (0, import_ui8.bindTrigger)(cssClassUsagePopover).onClick(e);
+          onClick(id2);
+        }
+      }
+    },
+    /* @__PURE__ */ React10.createElement(import_icons6.CurrentLocationIcon, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React10.createElement(import_ui8.Box, null, /* @__PURE__ */ React10.createElement(
+    import_ui8.Popover,
+    {
+      anchorOrigin: {
+        vertical: "center",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: 15,
+        horizontal: -50
+      },
+      ...(0, import_ui8.bindPopover)(cssClassUsagePopover),
+      onClose: () => {
+        (0, import_ui8.bindPopover)(cssClassUsagePopover).onClose();
+        onClick("");
+      }
+    },
+    /* @__PURE__ */ React10.createElement(
+      CssClassUsagePopover,
+      {
+        onClose: cssClassUsagePopover.close,
+        "aria-label": "css-class-usage-popover",
+        cssClassID: id2
+      }
+    )
+  )));
+};
+var CustomIconButton2 = (0, import_ui8.styled)(import_ui8.IconButton)(({ theme }) => ({
+  "&.Mui-disabled": {
+    pointerEvents: "auto",
+    // Enable hover
+    "&:hover": {
+      color: theme.palette.action.disabled
+      // optional
+    }
+  },
+  height: "22px",
+  width: "22px"
+}));
+var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React10.createElement(
+  import_ui8.Tooltip,
+  {
+    disableInteractive: true,
+    placement: "top",
+    title: `${(0, import_i18n8.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
+      "{{locations}}",
+      total === 1 ? (0, import_i18n8.__)("location", "elementor") : (0, import_i18n8.__)("locations", "elementor")
+    )}`
+  },
+  /* @__PURE__ */ React10.createElement("span", null, children)
+);
+var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React10.createElement(
+  import_ui8.Infotip,
+  {
+    disableInteractive: true,
+    placement: "top",
+    color: "secondary",
+    content: /* @__PURE__ */ React10.createElement(import_editor_ui4.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n8.__)("This class isn\u2019t being used yet.", "elementor"))
+  },
+  /* @__PURE__ */ React10.createElement("span", null, children)
+);
 
 // src/components/class-manager/delete-confirmation-dialog.tsx
-var React4 = __toESM(require("react"));
-var import_react2 = require("react");
-var import_icons3 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-var context = (0, import_react2.createContext)(null);
+var React11 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_icons7 = require("@elementor/icons");
+var import_ui9 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
+var context = (0, import_react5.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
-  const [dialogProps, setDialogProps] = (0, import_react2.useState)(null);
+  const [dialogProps, setDialogProps] = (0, import_react5.useState)(null);
   const openDialog = (props) => {
     setDialogProps(props);
   };
   const closeDialog = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React4.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React4.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React11.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React11.createElement(DeleteConfirmationDialog, { ...dialogProps }));
 };
 var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
   const { closeDialog } = useDeleteConfirmation();
+  const {
+    data: { total, content }
+  } = useCssClassUsageByID(id2);
   const onConfirm = () => {
     deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React4.createElement(import_ui3.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(import_ui3.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(import_icons3.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n4.__)("Delete this class?", "elementor")), /* @__PURE__ */ React4.createElement(import_ui3.DialogContent, null, /* @__PURE__ */ React4.createElement(import_ui3.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n4.__)("Deleting", "elementor"), /* @__PURE__ */ React4.createElement(import_ui3.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n4.__)(
-    "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
+  const text = total && content.length ? (0, import_i18n9.__)(
+    "Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.",
+    "elementor"
+  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : (0, import_i18n9.__)(
+    "Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React4.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React4.createElement(import_ui3.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React4.createElement(import_ui3.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n4.__)("Delete", "elementor"))));
+  );
+  return /* @__PURE__ */ React11.createElement(import_ui9.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React11.createElement(import_ui9.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React11.createElement(import_icons7.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n9.__)("Delete this class?", "elementor")), /* @__PURE__ */ React11.createElement(import_ui9.DialogContent, null, /* @__PURE__ */ React11.createElement(import_ui9.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n9.__)("Deleting", "elementor"), /* @__PURE__ */ React11.createElement(import_ui9.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React11.createElement(import_ui9.DialogActions, null, /* @__PURE__ */ React11.createElement(import_ui9.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n9.__)("Not now", "elementor")), /* @__PURE__ */ React11.createElement(
+    import_ui9.Button,
+    {
+      autoFocus: true,
+      variant: "contained",
+      color: "error",
+      onClick: onConfirm
+    },
+    (0, import_i18n9.__)("Delete", "elementor")
+  )));
 };
 var useDeleteConfirmation = () => {
-  const contextValue = (0, import_react2.useContext)(context);
+  const contextValue = (0, import_react5.useContext)(context);
   if (!contextValue) {
     throw new Error("useDeleteConfirmation must be used within a DeleteConfirmationProvider");
   }
@@ -578,14 +1205,14 @@ var useDeleteConfirmation = () => {
 };
 
 // src/components/class-manager/sortable.tsx
-var React5 = __toESM(require("react"));
-var import_icons4 = require("@elementor/icons");
-var import_ui4 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React5.createElement(import_ui4.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React5.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React5.createElement(import_icons4.GripVerticalIcon, { fontSize: "tiny" }));
+var React12 = __toESM(require("react"));
+var import_icons8 = require("@elementor/icons");
+var import_ui10 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React12.createElement(import_ui10.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React12.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React12.createElement(import_icons8.GripVerticalIcon, { fontSize: "tiny" }));
 var SortableItem = ({ children, id: id2, ...props }) => {
-  return /* @__PURE__ */ React5.createElement(
-    import_ui4.UnstableSortableItem,
+  return /* @__PURE__ */ React12.createElement(
+    import_ui10.UnstableSortableItem,
     {
       ...props,
       id: id2,
@@ -600,8 +1227,8 @@ var SortableItem = ({ children, id: id2, ...props }) => {
         isDragOverlay,
         isDragPlaceholder
       }) => {
-        return /* @__PURE__ */ React5.createElement(
-          import_ui4.Box,
+        return /* @__PURE__ */ React12.createElement(
+          import_ui10.Box,
           {
             ...itemProps,
             style: itemStyle,
@@ -619,56 +1246,51 @@ var SortableItem = ({ children, id: id2, ...props }) => {
             triggerStyle,
             isDragPlaceholder
           }),
-          showDropIndication && /* @__PURE__ */ React5.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+          showDropIndication && /* @__PURE__ */ React12.createElement(SortableItemIndicator, { style: dropIndicationStyle })
         );
       }
     }
   );
 };
-var StyledSortableTrigger = (0, import_ui4.styled)("div")(({ theme }) => ({
+var StyledSortableTrigger = (0, import_ui10.styled)("div")(({ theme }) => ({
   position: "absolute",
   left: 0,
   top: "50%",
   transform: `translate( -${theme.spacing(1.5)}, -50% )`,
   color: theme.palette.action.active
 }));
-var SortableItemIndicator = (0, import_ui4.styled)(import_ui4.Box)`
+var SortableItemIndicator = (0, import_ui10.styled)(import_ui10.Box)`
 	width: 100%;
 	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
 `;
 
 // src/components/class-manager/class-item.tsx
-var isVersion311IsActive = (0, import_editor_v1_adapters4.isExperimentActive)(import_editor_editing_panel.EXPERIMENTAL_FEATURES.V_3_31);
-var ClassItem = ({
-  id: id2,
-  label,
-  renameClass,
-  selected,
-  disabled,
-  sortableTriggerProps,
-  isSearchActive
-}) => {
-  const itemRef = (0, import_react3.useRef)(null);
+var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTriggerProps }) => {
+  const itemRef = (0, import_react6.useRef)(null);
+  const {
+    search: { inputValue }
+  } = useSearchAndFilters();
   const {
     ref: editableRef,
     openEditMode,
     isEditing,
     error,
     getProps: getEditableProps
-  } = (0, import_editor_ui2.useEditable)({
+  } = (0, import_editor_ui5.useEditable)({
     value: label,
     onSubmit: renameClass,
     validation: validateLabel
   });
+  const [selectedCssUsage, setSelectedCssUsage] = (0, import_react6.useState)("");
   const { openDialog } = useDeleteConfirmation();
-  const popupState = (0, import_ui5.usePopupState)({
+  const popupState = (0, import_ui11.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
-  const isSelected = (selected || popupState.isOpen) && !disabled;
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui5.Stack, { p: 0 }, /* @__PURE__ */ React6.createElement(
-    import_editor_ui2.WarningInfotip,
+  const isSelected = (selectedCssUsage === id2 || selected || popupState.isOpen) && !disabled;
+  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(import_ui11.Stack, { p: 0 }, /* @__PURE__ */ React13.createElement(
+    import_editor_ui5.WarningInfotip,
     {
       open: Boolean(error),
       text: error ?? "",
@@ -676,13 +1298,13 @@ var ClassItem = ({
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React13.createElement(
       StyledListItemButton,
       {
         ref: itemRef,
         dense: true,
         disableGutters: true,
-        showSortIndicator: isSearchActive,
+        showSortIndicator: inputValue.length >= 2,
         showActions: isSelected || isEditing,
         shape: "rounded",
         onDoubleClick: openEditMode,
@@ -690,30 +1312,31 @@ var ClassItem = ({
         disabled,
         focusVisibleClassName: "visible-class-item"
       },
-      /* @__PURE__ */ React6.createElement(SortableTrigger, { ...sortableTriggerProps }),
-      /* @__PURE__ */ React6.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React6.createElement(
-        import_editor_ui2.EditableField,
+      /* @__PURE__ */ React13.createElement(SortableTrigger, { ...sortableTriggerProps }),
+      /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React13.createElement(
+        import_editor_ui5.EditableField,
         {
           ref: editableRef,
-          as: import_ui5.Typography,
+          as: import_ui11.Typography,
           variant: "caption",
           ...getEditableProps()
         }
-      ) : /* @__PURE__ */ React6.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui5.Typography, variant: "caption" })),
-      /* @__PURE__ */ React6.createElement(
-        import_ui5.Tooltip,
+      ) : /* @__PURE__ */ React13.createElement(import_editor_ui5.EllipsisWithTooltip, { title: label, as: import_ui11.Typography, variant: "caption" })),
+      /* @__PURE__ */ React13.createElement(import_ui11.Box, { className: "class-item-locator" }, /* @__PURE__ */ React13.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
+      /* @__PURE__ */ React13.createElement(
+        import_ui11.Tooltip,
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: (0, import_i18n5.__)("More actions", "elementor")
+          title: (0, import_i18n10.__)("More actions", "elementor")
         },
-        /* @__PURE__ */ React6.createElement(import_ui5.IconButton, { size: "tiny", ...(0, import_ui5.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React6.createElement(import_icons5.DotsVerticalIcon, { fontSize: "tiny" }))
+        /* @__PURE__ */ React13.createElement(import_ui11.IconButton, { size: "tiny", ...(0, import_ui11.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
       )
     )
-  )), /* @__PURE__ */ React6.createElement(
-    import_ui5.Menu,
+  )), /* @__PURE__ */ React13.createElement(
+    import_ui11.Menu,
     {
-      ...(0, import_ui5.bindMenu)(popupState),
+      ...(0, import_ui11.bindMenu)(popupState),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -723,8 +1346,8 @@ var ClassItem = ({
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React6.createElement(
-      import_editor_ui2.MenuListItem,
+    /* @__PURE__ */ React13.createElement(
+      import_editor_ui5.MenuListItem,
       {
         sx: { minWidth: "160px" },
         onClick: () => {
@@ -732,62 +1355,50 @@ var ClassItem = ({
           openEditMode();
         }
       },
-      /* @__PURE__ */ React6.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n5.__)("Rename", "elementor"))
+      /* @__PURE__ */ React13.createElement(import_ui11.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n10.__)("Rename", "elementor"))
     ),
-    /* @__PURE__ */ React6.createElement(
-      import_editor_ui2.MenuListItem,
+    /* @__PURE__ */ React13.createElement(
+      import_editor_ui5.MenuListItem,
       {
         onClick: () => {
           popupState.close();
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React6.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n5.__)("Delete", "elementor"))
+      /* @__PURE__ */ React13.createElement(import_ui11.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n10.__)("Delete", "elementor"))
     )
   ));
 };
-var StyledListItemButtonV2 = (0, import_ui5.styled)(import_ui5.ListItemButton, {
+var StyledListItemButton = (0, import_ui11.styled)(import_ui11.ListItemButton, {
   shouldForwardProp: (prop) => !["showActions", "showSortIndicator"].includes(prop)
 })(
   ({ showActions, showSortIndicator }) => `
-	min-height: 36px;
+    min-height: 36px;
 
-	&.visible-class-item {
-		box-shadow: none !important;
-	}
-	.class-item-sortable-trigger {
-		visibility: ${showSortIndicator && showActions ? "visible" : "hidden"};
-	}
-	&:hover&:not(:disabled) {
-		.class-item-sortable-trigger  {
-			visibility: ${showSortIndicator ? "visible" : "hidden"};
-		}
-	}
-`
-);
-var StyledListItemButtonV1 = (0, import_ui5.styled)(import_ui5.ListItemButton, {
-  shouldForwardProp: (prop) => !["showActions", "showSortIndicator"].includes(prop)
-})(
-  ({ showActions }) => `
-	min-height: 36px;
-	&.visible-class-item {
-		box-shadow: none !important;
-	}
-	.class-item-more-actions, .class-item-sortable-trigger {
-		visibility: ${showActions ? "visible" : "hidden"};
-	}
-	.class-item-sortable-trigger {
-		visibility: ${showActions ? "visible" : "hidden"};
-	}
-	&:hover&:not(:disabled) {
-		.class-item-more-actions, .class-item-sortable-trigger  {
-			visibility: visible;
-		}
-	}
-`
+    &.visible-class-item {
+      box-shadow: none !important;
+    }
+
+    .class-item-locator {
+      visibility: hidden;
+    }
+
+    .class-item-sortable-trigger {
+      visibility: ${showSortIndicator && showActions ? "visible" : "hidden"};
+    }
+
+    &:hover:not(:disabled) {
+      .class-item-locator {
+        visibility: visible;
+      }
+
+      .class-item-sortable-trigger {
+        visibility: ${showSortIndicator ? "visible" : "hidden"};
+      }
+    }
+  `
 );
-var StyledListItemButton = isVersion311IsActive ? StyledListItemButtonV2 : StyledListItemButtonV1;
-var Indicator = (0, import_ui5.styled)(import_ui5.Box, {
+var Indicator = (0, import_ui11.styled)(import_ui11.Box, {
   shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
 })(({ theme, isActive, isError }) => ({
   display: "flex",
@@ -816,68 +1427,126 @@ var validateLabel = (newLabel) => {
   return result.errorMessage;
 };
 
-// src/components/class-manager/class-manager-class-not-found.tsx
-var React7 = __toESM(require("react"));
-var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
-var CssClassNotFound = ({ onClear, searchValue }) => /* @__PURE__ */ React7.createElement(
-  import_ui6.Stack,
+// src/components/class-manager/not-found.tsx
+var React14 = __toESM(require("react"));
+var import_icons10 = require("@elementor/icons");
+var import_ui12 = require("@elementor/ui");
+var import_i18n11 = require("@wordpress/i18n");
+var getNotFoundType = (searchValue, filters, filteredClasses) => {
+  const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
+  const filterNotFound = filters && filters.length === 0;
+  const filterAndSearchNotFound = searchNotFound && filterNotFound;
+  if (filterAndSearchNotFound) {
+    return "filterAndSearch";
+  }
+  if (searchNotFound) {
+    return "search";
+  }
+  if (filterNotFound) {
+    return "filter";
+  }
+  return void 0;
+};
+var notFound = {
+  filterAndSearch: {
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched.", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Try something else.", "elementor"),
+    icon: /* @__PURE__ */ React14.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
+  },
+  search: {
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Clear your input and try something else.", "elementor"),
+    icon: /* @__PURE__ */ React14.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
+  },
+  filter: {
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched that search.", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Clear the filters and try something else.", "elementor"),
+    icon: /* @__PURE__ */ React14.createElement(import_icons10.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
+  }
+};
+var NotFound = ({ notFoundType }) => {
+  const {
+    search: { onClearSearch, inputValue },
+    filters: { onClearFilter }
+  } = useSearchAndFilters();
+  switch (notFoundType) {
+    case "filter":
+      return /* @__PURE__ */ React14.createElement(NotFoundLayout, { ...notFound.filter, onClear: onClearFilter });
+    case "search":
+      return /* @__PURE__ */ React14.createElement(NotFoundLayout, { ...notFound.search, searchValue: inputValue, onClear: onClearSearch });
+    case "filterAndSearch":
+      return /* @__PURE__ */ React14.createElement(
+        NotFoundLayout,
+        {
+          ...notFound.filterAndSearch,
+          onClear: () => {
+            onClearFilter();
+            onClearSearch();
+          }
+        }
+      );
+  }
+};
+var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) => /* @__PURE__ */ React14.createElement(
+  import_ui12.Stack,
   {
     color: "text.secondary",
     pt: 5,
     alignItems: "center",
     gap: 1,
     overflow: "hidden",
-    maxWidth: "170px",
     justifySelf: "center"
   },
-  /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { color: "inherit", fontSize: "large" }),
-  /* @__PURE__ */ React7.createElement(import_ui6.Box, null, /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n6.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React7.createElement(
-    import_ui6.Typography,
+  icon,
+  /* @__PURE__ */ React14.createElement(
+    import_ui12.Box,
     {
-      variant: "subtitle2",
-      color: "inherit",
       sx: {
-        display: "flex",
-        width: "100%",
-        justifyContent: "center"
+        width: "100%"
       }
     },
-    /* @__PURE__ */ React7.createElement("span", null, "\u201C"),
-    /* @__PURE__ */ React7.createElement(
-      "span",
+    /* @__PURE__ */ React14.createElement(import_ui12.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, mainText),
+    searchValue && /* @__PURE__ */ React14.createElement(
+      import_ui12.Typography,
       {
-        style: {
-          maxWidth: "80%",
-          overflow: "hidden",
-          textOverflow: "ellipsis"
+        variant: "subtitle2",
+        color: "inherit",
+        sx: {
+          display: "flex",
+          width: "100%",
+          justifyContent: "center"
         }
       },
-      searchValue
-    ),
-    /* @__PURE__ */ React7.createElement("span", null, "\u201D.")
-  )),
-  /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n6.__)("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(import_ui6.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n6.__)("Clear & try again", "elementor")))
+      /* @__PURE__ */ React14.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React14.createElement(
+        "span",
+        {
+          style: {
+            maxWidth: "80%",
+            overflow: "hidden",
+            textOverflow: "ellipsis"
+          }
+        },
+        searchValue
+      ),
+      /* @__PURE__ */ React14.createElement("span", null, "\u201D.")
+    )
+  ),
+  /* @__PURE__ */ React14.createElement(import_ui12.Typography, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
+  /* @__PURE__ */ React14.createElement(import_ui12.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React14.createElement(import_ui12.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
 );
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = ({ disabled, searchValue, onSearch }) => {
+var GlobalClassesList = ({ disabled }) => {
+  const {
+    search: { debouncedValue: searchValue }
+  } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch5 = (0, import_store14.__useDispatch)();
+  const dispatch5 = (0, import_store16.__useDispatch)();
+  const filters = useFilters();
   const [classesOrder, reorderClasses] = useReorder();
-  const lowercaseLabels = (0, import_react4.useMemo)(
-    () => cssClasses.map((cssClass) => ({
-      ...cssClass,
-      lowerLabel: cssClass.label.toLowerCase()
-    })),
-    [cssClasses]
-  );
-  const filteredClasses = (0, import_react4.useMemo)(() => {
-    return searchValue.length > 1 ? lowercaseLabels.filter(
-      (cssClass) => cssClass.lowerLabel.toLowerCase().includes(searchValue.toLowerCase())
-    ) : cssClasses;
-  }, [searchValue, cssClasses, lowercaseLabels]);
-  (0, import_react4.useEffect)(() => {
+  const filteredCssClasses = useFilteredCssClasses();
+  (0, import_react7.useEffect)(() => {
     const handler = (event) => {
       if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
         event.stopImmediatePropagation();
@@ -895,13 +1564,16 @@ var GlobalClassesList = ({ disabled, searchValue, onSearch }) => {
     return () => window.removeEventListener("keydown", handler);
   }, [dispatch5]);
   if (!cssClasses?.length) {
-    return /* @__PURE__ */ React8.createElement(EmptyState, null);
+    return /* @__PURE__ */ React15.createElement(EmptyState, null);
+  }
+  const notFoundType = getNotFoundType(searchValue, filters, filteredCssClasses);
+  if (notFoundType) {
+    return /* @__PURE__ */ React15.createElement(NotFound, { notFoundType });
   }
-  return /* @__PURE__ */ React8.createElement(DeleteConfirmationProvider, null, filteredClasses.length <= 0 && searchValue.length > 1 ? /* @__PURE__ */ React8.createElement(CssClassNotFound, { onClear: () => onSearch(""), searchValue }) : /* @__PURE__ */ React8.createElement(import_ui7.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, filteredClasses?.map(({ id: id2, label }) => {
-    return /* @__PURE__ */ React8.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React15.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React15.createElement(import_ui13.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React15.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, filteredCssClasses?.map(({ id: id2, label }) => {
+    return /* @__PURE__ */ React15.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React15.createElement(
       ClassItem,
       {
-        isSearchActive: searchValue.length < 2,
         id: id2,
         label,
         renameClass: (newLabel) => {
@@ -921,23 +1593,49 @@ var GlobalClassesList = ({ disabled, searchValue, onSearch }) => {
     ));
   }))));
 };
-var EmptyState = () => /* @__PURE__ */ React8.createElement(import_ui7.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React8.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n7.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n7.__)(
+var EmptyState = () => /* @__PURE__ */ React15.createElement(import_ui13.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React15.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React15.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n12.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React15.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n12.__)(
   "CSS classes created in the editor panel will appear here. Once they are available, you can arrange their hierarchy, rename them, or delete them as needed.",
   "elementor"
 )));
-var StyledHeader = (0, import_ui7.styled)(import_ui7.Typography)(({ theme, variant }) => ({
+var StyledHeader = (0, import_ui13.styled)(import_ui13.Typography)(({ theme, variant }) => ({
   "&.MuiTypography-root": {
     ...theme.typography[variant]
   }
 }));
 var useReorder = () => {
-  const dispatch5 = (0, import_store14.__useDispatch)();
+  const dispatch5 = (0, import_store16.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
     dispatch5(slice.actions.setOrder(newIds));
   };
   return [order, reorder];
 };
+var useFilteredCssClasses = () => {
+  const cssClasses = useOrderedClasses();
+  const {
+    search: { debouncedValue: searchValue }
+  } = useSearchAndFilters();
+  const filters = useFilters();
+  const lowercaseLabels = (0, import_react7.useMemo)(
+    () => cssClasses.map((cssClass) => ({
+      ...cssClass,
+      lowerLabel: cssClass.label.toLowerCase()
+    })),
+    [cssClasses]
+  );
+  const filteredClasses = (0, import_react7.useMemo)(() => {
+    if (searchValue.length > 1) {
+      return lowercaseLabels.filter((cssClass) => cssClass.lowerLabel.includes(searchValue.toLowerCase()));
+    }
+    return cssClasses;
+  }, [searchValue, cssClasses, lowercaseLabels]);
+  return (0, import_react7.useMemo)(() => {
+    if (filters && filters.length > 0) {
+      return filteredClasses.filter((cssClass) => filters.includes(cssClass.id));
+    }
+    return filteredClasses;
+  }, [filteredClasses, filters]);
+};
 
 // src/components/class-manager/panel-interactions.ts
 function blockPanelInteractions() {
@@ -950,67 +1648,62 @@ function unblockPanelInteractions() {
 }
 
 // src/components/class-manager/save-changes-dialog.tsx
-var React9 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_icons6 = require("@elementor/icons");
-var import_ui8 = require("@elementor/ui");
+var React16 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_icons11 = require("@elementor/icons");
+var import_ui14 = require("@elementor/ui");
 var TITLE_ID2 = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React9.createElement(import_ui8.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React9.createElement(import_ui8.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React9.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), children);
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React9.createElement(import_ui8.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React9.createElement(import_ui8.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(import_ui14.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React16.createElement(import_ui14.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React16.createElement(import_icons11.AlertTriangleFilledIcon, { color: "secondary" }), children);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React16.createElement(import_ui14.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React16.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react5.useState)(false);
+  const [isConfirming, setIsConfirming] = (0, import_react8.useState)(false);
   const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React9.createElement(import_ui8.DialogActions, null, cancel && /* @__PURE__ */ React9.createElement(import_ui8.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React9.createElement(import_ui8.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React9.createElement(import_ui8.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React16.createElement(import_ui14.DialogActions, null, cancel && /* @__PURE__ */ React16.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React16.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React16.createElement(import_ui14.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-var isVersion311IsActive2 = (0, import_editor_v1_adapters5.isExperimentActive)(import_editor_editing_panel2.EXPERIMENTAL_FEATURES.V_3_31);
 var id = "global-classes-manager";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters5.changeEditMode)(id);
+    (0, import_editor_v1_adapters3.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: () => {
-    (0, import_editor_v1_adapters5.changeEditMode)("edit");
+    (0, import_editor_v1_adapters3.changeEditMode)("edit");
     unblockPanelInteractions();
   }
 });
 function ClassManagerPanel() {
-  const { debouncedValue, inputValue, handleChange } = (0, import_utils2.useDebounceState)({
-    delay: 300,
-    initialValue: ""
-  });
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    (0, import_store16.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    (0, import_store18.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
   usePreventUnload();
-  return /* @__PURE__ */ React10.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React10.createElement(import_ui9.ErrorBoundary, { fallback: /* @__PURE__ */ React10.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React10.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React10.createElement(import_ui9.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React10.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n8.__)("Class Manager", "elementor")), /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React17.createElement(import_editor_ui6.ThemeProvider, null, /* @__PURE__ */ React17.createElement(import_ui15.ErrorBoundary, { fallback: /* @__PURE__ */ React17.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React17.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React17.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React17.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React17.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n13.__)("Class Manager", "elementor")), /* @__PURE__ */ React17.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React17.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -1023,7 +1716,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React10.createElement(
+  ))), /* @__PURE__ */ React17.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -1032,16 +1725,10 @@ function ClassManagerPanel() {
         height: "100%"
       }
     },
-    isVersion311IsActive2 && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ClassManagerSearch, { searchValue: inputValue, onChange: handleChange }), /* @__PURE__ */ React10.createElement(
-      import_ui9.Divider,
-      {
-        sx: {
-          borderWidth: "1px 0 0 0"
-        }
-      }
-    )),
-    /* @__PURE__ */ React10.createElement(
-      import_ui9.Box,
+    /* @__PURE__ */ React17.createElement(import_ui15.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React17.createElement(import_ui15.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React17.createElement(import_ui15.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React17.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React17.createElement(CssClassFilter, null)), /* @__PURE__ */ React17.createElement(ActiveFilters, null)),
+    /* @__PURE__ */ React17.createElement(import_ui15.Divider, null),
+    /* @__PURE__ */ React17.createElement(
+      import_ui15.Box,
       {
         px: 2,
         sx: {
@@ -1049,17 +1736,10 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React10.createElement(
-        GlobalClassesList,
-        {
-          disabled: isPublishing,
-          searchValue: debouncedValue,
-          onSearch: handleChange
-        }
-      )
+      /* @__PURE__ */ React17.createElement(GlobalClassesList, { disabled: isPublishing })
     )
-  ), /* @__PURE__ */ React10.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React10.createElement(
-    import_ui9.Button,
+  ), /* @__PURE__ */ React17.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React17.createElement(
+    import_ui15.Button,
     {
       fullWidth: true,
       size: "small",
@@ -1069,19 +1749,19 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n8.__)("Save changes", "elementor")
-  )))), /* @__PURE__ */ React10.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React10.createElement(SaveChangesDialog, null, /* @__PURE__ */ React10.createElement(import_ui9.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React10.createElement(SaveChangesDialog.Title, null, (0, import_i18n8.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React10.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React10.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n8.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React10.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n8.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React10.createElement(
+    (0, import_i18n13.__)("Save changes", "elementor")
+  ))))), /* @__PURE__ */ React17.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React17.createElement(SaveChangesDialog, null, /* @__PURE__ */ React17.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React17.createElement(SaveChangesDialog.Title, null, (0, import_i18n13.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React17.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React17.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n13.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React17.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n13.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React17.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n8.__)("Discard", "elementor"),
+          label: (0, import_i18n13.__)("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n8.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n13.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -1092,11 +1772,11 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React10.createElement(import_ui9.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React10.createElement(import_icons7.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React10.createElement(import_ui9.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React10.createElement(import_ui9.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React10.createElement("strong", null, (0, import_i18n8.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React17.createElement(import_ui15.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React17.createElement(import_icons12.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React17.createElement(import_ui15.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React17.createElement(import_ui15.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React17.createElement("strong", null, (0, import_i18n13.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  (0, import_react6.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -1109,23 +1789,35 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  return (0, import_query.useMutation)({
+  return (0, import_query3.useMutation)({
     mutationFn: () => saveGlobalClasses({ context: "frontend" }),
     onSuccess: async () => {
-      (0, import_editor_documents2.setDocumentModifiedStatus)(false);
+      (0, import_editor_documents4.setDocumentModifiedStatus)(false);
       if (hasDeletedItems()) {
         await onDelete();
       }
     }
   });
 };
+var TotalCssClassCounter = () => {
+  const filters = useFilters();
+  const cssClasses = useClassesOrder();
+  return /* @__PURE__ */ React17.createElement(
+    import_ui15.Chip,
+    {
+      size: "small",
+      label: filters ? `${filters.length} / ${cssClasses?.length}` : cssClasses?.length
+    }
+  );
+};
 
 // src/components/class-manager/class-manager-button.tsx
 var ClassManagerButton = () => {
-  const document = (0, import_editor_documents3.__useActiveDocument)();
+  const document = (0, import_editor_documents5.__useActiveDocument)();
   const { open: openPanel } = usePanelActions();
-  const { save: saveDocument } = (0, import_editor_documents3.__useActiveDocumentActions)();
+  const { save: saveDocument } = (0, import_editor_documents5.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { prefetchClassesUsage } = usePrefetchCssClassUsage();
   const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
   const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
   if (!isUserAllowedToUpdateClass) {
@@ -1137,24 +1829,26 @@ var ClassManagerButton = () => {
       return;
     }
     openPanel();
+    prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui10.Tooltip, { title: (0, import_i18n9.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React11.createElement(import_ui10.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React11.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React11.createElement(SaveChangesDialog, null, /* @__PURE__ */ React11.createElement(SaveChangesDialog.Title, null, (0, import_i18n9.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React11.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React11.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n9.__)(
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(import_ui16.Tooltip, { title: (0, import_i18n14.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React18.createElement(import_ui16.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React18.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n14.__)(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React11.createElement(
+  ))), /* @__PURE__ */ React18.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n9.__)("Stay here", "elementor"),
+          label: (0, import_i18n14.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n9.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n14.__)("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
             openPanel();
+            prefetchClassesUsage();
           }
         }
       }
@@ -1162,12 +1856,56 @@ var ClassManagerButton = () => {
   )));
 };
 
+// src/components/convert-local-class-to-global-class.tsx
+var React19 = __toESM(require("react"));
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
+var import_editor_ui7 = require("@elementor/editor-ui");
+var import_ui17 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
+var ConvertLocalClassToGlobalClass = (props) => {
+  const localStyleData = props.styleDef;
+  const handleConversion = () => {
+    const newClassName = createClassName(`converted-class-`);
+    if (!localStyleData) {
+      throw new Error("Style definition is required for converting local class to global class.");
+    }
+    const newId = globalClassesStylesProvider.actions.create?.(newClassName, localStyleData.variants);
+    if (newId) {
+      props.successCallback(newId);
+    }
+  };
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    import_editor_ui7.MenuListItem,
+    {
+      disabled: !props.canConvert,
+      onClick: handleConversion,
+      dense: true,
+      sx: {
+        "&.Mui-focusVisible": {
+          border: "none",
+          boxShadow: "none !important",
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    (0, import_i18n15.__)("Convert to global class", "elementor")
+  ), /* @__PURE__ */ React19.createElement(import_ui17.Divider, null));
+};
+function createClassName(prefix) {
+  let i = 1;
+  let newClassName = `${prefix}${i}`;
+  while (!(0, import_editor_styles_repository4.validateStyleLabel)(newClassName, "create").isValid) {
+    newClassName = `${prefix}${++i}`;
+  }
+  return newClassName;
+}
+
 // src/components/populate-store.tsx
-var import_react7 = require("react");
-var import_store18 = require("@elementor/store");
+var import_react10 = require("react");
+var import_store20 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch5 = (0, import_store18.__useDispatch)();
-  (0, import_react7.useEffect)(() => {
+  const dispatch5 = (0, import_store20.__useDispatch)();
+  (0, import_react10.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -1191,51 +1929,55 @@ function PopulateStore() {
 }
 
 // src/sync-with-document-save.ts
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store20 = require("@elementor/store");
+var import_editor_documents6 = require("@elementor/editor-documents");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_store22 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
   bindSaveAction();
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store20.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store22.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
-    (0, import_editor_documents4.setDocumentModifiedStatus)(true);
+    (0, import_editor_documents6.setDocumentModifiedStatus)(true);
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters4.registerDataHook)("after", "document/save/save", (args) => {
     return saveGlobalClasses({
       context: args.status === "publish" ? "frontend" : "preview"
     });
   });
 }
 function isDirty() {
-  return selectIsDirty((0, import_store20.__getState)());
+  return selectIsDirty((0, import_store22.__getState)());
 }
 
 // src/init.ts
 function init() {
-  (0, import_store22.__registerSlice)(slice);
+  (0, import_store24.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository4.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
   });
-  (0, import_editor_editing_panel3.injectIntoClassSelectorActions)({
+  (0, import_editor_editing_panel.injectIntoCssClassConvert)({
+    id: "global-classes-convert-from-local-class",
+    component: ConvertLocalClassToGlobalClass
+  });
+  (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_editing_panel3.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
+  (0, import_editor_editing_panel.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
     name: "global",
     getThemeColor: (theme) => theme.palette.global.dark
   });
-  (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });
 }