@elementor/editor-global-classes 4.1.0-825 → 4.1.0-826

package/dist/index.js

@@ -30,32 +30,32 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  ClassManagerPanelEmbedded: () => ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI: () => GLOBAL_CLASSES_URI,
   init: () => init
 });
 module.exports = __toCommonJS(index_exports);
 
-// 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_store4 = require("@elementor/store");
-var import_i18n = require("@wordpress/i18n");
-
-// src/capabilities.ts
+// src/components/class-manager/class-manager-panel.tsx
+var React19 = __toESM(require("react"));
+var import_react10 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
-var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
-var getCapabilities = () => {
-  const shouldEnforceCapabilities = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENT_KEY);
-  if (shouldEnforceCapabilities) {
-    return {
-      update: UPDATE_CLASS_CAPABILITY_KEY,
-      create: UPDATE_CLASS_CAPABILITY_KEY,
-      delete: UPDATE_CLASS_CAPABILITY_KEY,
-      updateProps: UPDATE_CLASS_CAPABILITY_KEY
-    };
-  }
-};
+var import_icons11 = require("@elementor/icons");
+var import_query2 = require("@elementor/query");
+var import_store18 = require("@elementor/store");
+var import_ui16 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+
+// src/hooks/use-classes-order.ts
+var import_store2 = require("@elementor/store");
+
+// src/store.ts
+var import_editor_styles = require("@elementor/editor-styles");
+var import_store = require("@elementor/store");
 
 // src/errors.ts
 var import_utils = require("@elementor/utils");
@@ -72,10 +72,6 @@ var GlobalClassTrackingError = (0, import_utils.createError)({
   message: "Error tracking global classes event."
 });
 
-// src/store.ts
-var import_editor_styles = require("@elementor/editor-styles");
-var import_store = require("@elementor/store");
-
 // src/utils/snapshot-history.ts
 function createLink({ value, next, prev }) {
   return {
@@ -263,402 +259,44 @@ var mergeProps = (current, updates) => {
   const props = Array.isArray(current) ? {} : current;
   Object.entries(updates).forEach(([key, value]) => {
     if (value === null || value === void 0) {
-      delete props[key];
-    } else {
-      props[key] = value;
-    }
-  });
-  return props;
-};
-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;
-var selectOrder = (0, import_store.__createSelector)(selectData, ({ order }) => order);
-var selectGlobalClasses = (0, import_store.__createSelector)(selectData, ({ items }) => items);
-var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
-var selectOrderedClasses = (0, import_store.__createSelector)(
-  selectGlobalClasses,
-  selectOrder,
-  (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/utils/tracking.ts
-var import_events = require("@elementor/events");
-var import_store2 = 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 = {
-  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, {
-    params: {
-      context: "frontend"
-    }
-  }),
-  saveDraft: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
-    params: {
-      context: "preview"
-    }
-  })
-};
-var API_ERROR_CODES = {
-  DUPLICATED_LABEL: "DUPLICATED_LABEL"
-};
-
-// 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/utils/tracking.ts
-var trackGlobalClasses = async (payload) => {
-  const { runAction } = payload;
-  const data = await getSanitizedData(payload);
-  if (data) {
-    track(data);
-    if (data.event === "classCreated" && "classId" in data) {
-      fireClassApplied(data.classId);
-    }
-  }
-  runAction?.();
-};
-var fireClassApplied = async (classId) => {
-  const appliedInfo = await getAppliedInfo(classId);
-  track({
-    event: "classApplied",
-    classId,
-    ...appliedInfo,
-    totalInstancesAfterApply: 1
-  });
-};
-var getSanitizedData = async (payload) => {
-  switch (payload.event) {
-    case "classApplied":
-      if ("classId" in payload && payload.classId) {
-        const appliedInfo = await getAppliedInfo(payload.classId);
-        return { ...payload, ...appliedInfo };
-      }
-      break;
-    case "classRemoved":
-      if ("classId" in payload && payload.classId) {
-        const deleteInfo = getRemovedInfo(payload.classId);
-        return { ...payload, ...deleteInfo };
-      }
-      break;
-    case "classDeleted":
-      if ("classId" in payload && payload.classId) {
-        const deleteInfo = await trackDeleteClass(payload.classId);
-        return { ...payload, ...deleteInfo };
-      }
-      break;
-    case "classCreated":
-      if ("source" in payload && payload.source !== "created") {
-        if ("classId" in payload && payload.classId) {
-          return { ...payload, classTitle: getCssClass(payload.classId).label };
-        }
-      }
-      return payload;
-    case "classStateClicked":
-      if ("classId" in payload && payload.classId) {
-        return { ...payload, classTitle: getCssClass(payload.classId).label };
-      }
-      break;
-    case "classSyncToV3PopupShown":
-      return {
-        ...payload,
-        interaction_type: "popup_shown",
-        target_type: "popup",
-        target_name: "sync_to_v3_popup",
-        interaction_result: "popup_viewed",
-        target_location: "widget_panel",
-        location_l1: "class_manager"
-      };
-    case "classSyncToV3": {
-      const classLabel = getCssClass(payload.classId).label;
-      const isSync = payload.action === "sync";
-      return {
-        ...payload,
-        interaction_type: "click",
-        target_type: classLabel,
-        target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
-        interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
-        target_location: "widget_panel",
-        location_l1: "class_manager",
-        interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
-      };
-    }
-    case "classSyncToV3PopupClick": {
-      const isSyncAction = payload.action === "sync";
-      return {
-        ...payload,
-        interaction_type: "click",
-        target_type: "button",
-        target_name: isSyncAction ? "sync_to_v3" : "cancel",
-        interaction_result: isSyncAction ? "class_is_synced" : "cancel",
-        target_location: "sync_to_v3_popup"
-      };
-    }
-    default:
-      return payload;
-  }
-};
-var track = (data) => {
-  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
-  if (!config?.names?.global_classes?.[data.event]) {
-    console.error("Global class tracking event not found", { event: data.event });
-    return;
-  }
-  const name = config.names.global_classes[data.event];
-  const { event, ...eventData } = data;
-  try {
-    dispatchEvent?.(name, {
-      event,
-      ...eventData
-    });
-  } catch (error) {
-    throw new GlobalClassTrackingError({ cause: error });
-  }
-};
-var extractCssClassData = (classId) => {
-  const cssClass = getCssClass(classId);
-  const classTitle = cssClass.label;
-  return { classTitle };
-};
-var getCssClass = (classId) => {
-  const cssClass = selectClass((0, import_store2.__getState)(), classId);
-  if (!cssClass) {
-    throw new Error(`CSS class with ID ${classId} not found`);
-  }
-  return cssClass;
-};
-var trackDeleteClass = async (classId) => {
-  const totalInstances = await getTotalInstancesByCssClassID(classId);
-  const classTitle = getCssClass(classId).label;
-  return { totalInstances, classTitle };
-};
-var getTotalInstancesByCssClassID = async (classId) => {
-  const cssClassUsage = await fetchCssClassUsage();
-  return cssClassUsage[classId]?.total ?? 1;
-};
-var getAppliedInfo = async (classId) => {
-  const { classTitle } = extractCssClassData(classId);
-  const totalInstancesAfterApply = await getTotalInstancesByCssClassID(classId) + 1;
-  return { classTitle, totalInstancesAfterApply };
-};
-var getRemovedInfo = (classId) => {
-  const { classTitle } = extractCssClassData(classId);
-  return {
-    classTitle
-  };
-};
-
-// src/global-classes-styles-provider.ts
-var MAX_CLASSES = 100;
-var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
-var PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
-var globalClassesStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
-  key: GLOBAL_CLASSES_PROVIDER_KEY,
-  priority: 30,
-  limit: MAX_CLASSES,
-  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
-  labels: {
-    singular: (0, import_i18n.__)("class", "elementor"),
-    plural: (0, import_i18n.__)("classes", "elementor")
-  },
-  subscribe: (cb) => subscribeWithStates(cb),
-  capabilities: getCapabilities(),
-  actions: {
-    all: () => selectOrderedClasses((0, import_store4.__getState)()),
-    get: (id2) => selectClass((0, import_store4.__getState)(), id2),
-    resolveCssName: (id2) => {
-      return selectClass((0, import_store4.__getState)(), id2)?.label ?? id2;
-    },
-    create: (label, variants = [], id2) => {
-      const classes = selectGlobalClasses((0, import_store4.__getState)());
-      const existingLabels = Object.values(classes).map((style) => style.label);
-      if (existingLabels.includes(label)) {
-        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
-      }
-      if (!id2) {
-        id2 = (0, import_editor_styles2.generateId)("g-", Object.keys(classes));
-      }
-      (0, import_store4.__dispatch)(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      (0, import_store4.__dispatch)(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      (0, import_store4.__dispatch)(slice.actions.delete(id2));
-    },
-    updateProps: (args) => {
-      (0, import_store4.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props,
-          mode: args.mode
-        })
-      );
-    },
-    updateCustomCss: (args) => {
-      (0, import_store4.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          custom_css: args.custom_css,
-          props: {}
-        })
-      );
-    },
-    tracking: (data) => {
-      trackGlobalClasses(data).catch((error) => {
-        throw new GlobalClassTrackingError({ cause: error });
-      });
-    }
-  }
-});
-var subscribeWithStates = (cb) => {
-  let previousState = selectData((0, import_store4.__getState)());
-  return (0, import_store4.__subscribeWithSelector)(
-    (state) => state.globalClasses,
-    (currentState) => {
-      cb(previousState.items, currentState.data.items);
-      previousState = currentState.data;
-    }
-  );
-};
-
-// src/mcp-integration/classes-resource.ts
-var GLOBAL_CLASSES_URI = "elementor://global-classes";
-var STORAGE_KEY = "elementor-global-classes";
-var updateLocalStorageCache = () => {
-  const classes = globalClassesStylesProvider.actions.all();
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
-};
-var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
-  [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
-    const { sendResourceUpdated, resource, waitForReady } = entry;
-    resource(
-      "global-classes",
-      GLOBAL_CLASSES_URI,
-      {
-        description: "Global classes list."
-      },
-      async () => {
-        return {
-          contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage[STORAGE_KEY] ?? "[]" }]
-        };
-      }
-    );
-    waitForReady().then(() => {
-      updateLocalStorageCache();
-      globalClassesStylesProvider.subscribe(() => {
-        updateLocalStorageCache();
-        sendResourceUpdated({ uri: GLOBAL_CLASSES_URI });
-      });
-    });
-  });
-};
-
-// src/init.ts
-var import_editor = require("@elementor/editor");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_mcp = require("@elementor/editor-mcp");
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
-var import_store28 = require("@elementor/store");
-
-// src/components/class-manager/class-manager-button.tsx
-var React20 = __toESM(require("react"));
-var import_editor_documents4 = require("@elementor/editor-documents");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_ui10 = require("@elementor/editor-ui");
-var import_ui17 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
-
-// src/hooks/use-prefetch-css-class-usage.ts
-var import_query = require("@elementor/query");
-
-// 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 };
-}
-var PrefetchCssClassUsage = () => {
-  const { prefetchClassesUsage } = usePrefetchCssClassUsage();
-  prefetchClassesUsage();
-  return null;
-};
-
-// src/components/class-manager/class-manager-panel.tsx
-var React19 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_editor_current_user2 = require("@elementor/editor-current-user");
-var import_editor_documents3 = require("@elementor/editor-documents");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui9 = require("@elementor/editor-ui");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons11 = require("@elementor/icons");
-var import_query3 = require("@elementor/query");
-var import_store20 = require("@elementor/store");
-var import_ui16 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+      delete props[key];
+    } else {
+      props[key] = value;
+    }
+  });
+  return props;
+};
+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;
+var selectOrder = (0, import_store.__createSelector)(selectData, ({ order }) => order);
+var selectGlobalClasses = (0, import_store.__createSelector)(selectData, ({ items }) => items);
+var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
+var selectOrderedClasses = (0, import_store.__createSelector)(
+  selectGlobalClasses,
+  selectOrder,
+  (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/hooks/use-classes-order.ts
-var import_store6 = require("@elementor/store");
 var useClassesOrder = () => {
-  return (0, import_store6.__useSelector)(selectOrder);
+  return (0, import_store2.__useSelector)(selectOrder);
 };
 
 // src/hooks/use-dirty-state.ts
-var import_store8 = require("@elementor/store");
+var import_store4 = require("@elementor/store");
 var useDirtyState = () => {
-  return (0, import_store8.__useSelector)(selectIsDirty);
+  return (0, import_store4.__useSelector)(selectIsDirty);
 };
 
 // src/hooks/use-filters.ts
@@ -667,7 +305,7 @@ 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 import_utils2 = require("@elementor/utils");
 var SearchAndFilterContext = (0, import_react.createContext)(void 0);
 var INIT_CHECKED_FILTERS = {
   empty: false,
@@ -684,7 +322,7 @@ var SearchAndFilterProvider = ({ children }) => {
     }
     return "";
   };
-  const { debouncedValue, inputValue, handleChange } = (0, import_utils3.useDebounceState)({
+  const { debouncedValue, inputValue, handleChange } = (0, import_utils2.useDebounceState)({
     delay: 300,
     initialValue: getInitialSearchValue()
   });
@@ -727,9 +365,54 @@ 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 import_query = require("@elementor/query");
+
+// 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 = {
+  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, {
+    params: {
+      context: "frontend"
+    }
+  }),
+  saveDraft: (payload) => (0, import_http_client.httpService)().put("elementor/v1" + RESOURCE_URL, payload, {
+    params: {
+      context: "preview"
+    }
+  })
+};
+var API_ERROR_CODES = {
+  DUPLICATED_LABEL: "DUPLICATED_LABEL"
+};
+
+// 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-css-class-usage.ts
 var useCssClassUsage = () => {
-  return (0, import_query2.useQuery)({
+  return (0, import_query.useQuery)({
     queryKey: [QUERY_KEY],
     queryFn: fetchCssClassUsage,
     refetchOnMount: false,
@@ -738,12 +421,12 @@ var useCssClassUsage = () => {
 };
 
 // src/hooks/use-empty-css-class.ts
-var import_store10 = require("@elementor/store");
+var import_store6 = require("@elementor/store");
 var useEmptyCssClass = () => {
-  return (0, import_store10.__useSelector)(selectEmptyCssClass);
+  return (0, import_store6.__useSelector)(selectEmptyCssClass);
 };
 var useAllCssClassesIDs = () => {
-  const cssClasses = (0, import_store10.__useSelector)(selectGlobalClasses);
+  const cssClasses = (0, import_store6.__useSelector)(selectGlobalClasses);
   return Object.keys(cssClasses);
 };
 
@@ -820,7 +503,7 @@ var useFilters = () => {
 // src/save-global-classes.tsx
 var React3 = __toESM(require("react"));
 var import_editor_ui2 = require("@elementor/editor-ui");
-var import_store12 = require("@elementor/store");
+var import_store10 = require("@elementor/store");
 var import_utils4 = require("@elementor/utils");
 
 // src/components/class-manager/duplicate-label-dialog.tsx
@@ -828,7 +511,7 @@ var React2 = __toESM(require("react"));
 var import_editor_ui = require("@elementor/editor-ui");
 var import_icons = require("@elementor/icons");
 var import_ui = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n = require("@wordpress/i18n");
 var DUP_PREFIX = "DUP_";
 var DuplicateLabelDialog = ({
   modifiedLabels,
@@ -839,7 +522,7 @@ var DuplicateLabelDialog = ({
     onApprove?.();
     (0, import_editor_ui.closeDialog)();
   };
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui.DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(import_ui.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(import_ui.Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "subtitle1" }, (0, import_i18n2.__)("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(import_ui.DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(import_ui.Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(import_ui.Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "subtitle1" }, (0, import_i18n.__)("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(import_ui.DialogContent, null, /* @__PURE__ */ React2.createElement(import_ui.Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
     "Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix",
     "elementor"
   ), /* @__PURE__ */ React2.createElement("strong", null, " ", DUP_PREFIX)), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(
@@ -864,7 +547,7 @@ var DuplicateLabelDialog = ({
           minWidth: 0
         }
       },
-      (0, import_i18n2.__)("Before", "elementor")
+      (0, import_i18n.__)("Before", "elementor")
     ),
     /* @__PURE__ */ React2.createElement(
       import_ui.Typography,
@@ -879,7 +562,7 @@ var DuplicateLabelDialog = ({
           maxWidth: "200px"
         }
       },
-      (0, import_i18n2.__)("After", "elementor")
+      (0, import_i18n.__)("After", "elementor")
     )
   ), /* @__PURE__ */ React2.createElement(import_ui.Divider, { sx: { mt: 0.5, mb: 0.5 } }), /* @__PURE__ */ React2.createElement(import_ui.Stack, { direction: "column", gap: 0.5, sx: { pb: 2 } }, Object.values(modifiedLabels).map(({ original, modified }, index) => /* @__PURE__ */ React2.createElement(
     import_ui.Box,
@@ -917,26 +600,170 @@ var DuplicateLabelDialog = ({
       },
       /* @__PURE__ */ React2.createElement(import_editor_ui.EllipsisWithTooltip, { title: modified }, /* @__PURE__ */ React2.createElement(import_ui.Typography, { variant: "body2", sx: { color: "text.primary" } }, modified))
     )
-  ))), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(import_ui.Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n2.__)("Your designs and classes are safe.", "elementor")), (0, import_i18n2.__)(
+  ))), /* @__PURE__ */ React2.createElement(import_ui.Box, null, /* @__PURE__ */ React2.createElement(import_ui.Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, (0, import_i18n.__)("Your designs and classes are safe.", "elementor")), (0, import_i18n.__)(
     "Only the prefixes were added. Find them in Class Manager by searching",
     "elementor"
-  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, (0, import_i18n2.__)("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui.closeDialog }, (0, import_i18n2.__)("Done", "elementor"))));
+  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(import_ui.DialogActions, null, /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, (0, import_i18n.__)("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(import_ui.Button, { color: "secondary", variant: "contained", onClick: import_editor_ui.closeDialog }, (0, import_i18n.__)("Done", "elementor"))));
+};
+
+// src/utils/tracking.ts
+var import_events = require("@elementor/events");
+var import_store8 = require("@elementor/store");
+var trackGlobalClasses = async (payload) => {
+  const { runAction } = payload;
+  const data = await getSanitizedData(payload);
+  if (data) {
+    track(data);
+    if (data.event === "classCreated" && "classId" in data) {
+      fireClassApplied(data.classId);
+    }
+  }
+  runAction?.();
+};
+var fireClassApplied = async (classId) => {
+  const appliedInfo = await getAppliedInfo(classId);
+  track({
+    event: "classApplied",
+    classId,
+    ...appliedInfo,
+    totalInstancesAfterApply: 1
+  });
+};
+var getSanitizedData = async (payload) => {
+  switch (payload.event) {
+    case "classApplied":
+      if ("classId" in payload && payload.classId) {
+        const appliedInfo = await getAppliedInfo(payload.classId);
+        return { ...payload, ...appliedInfo };
+      }
+      break;
+    case "classRemoved":
+      if ("classId" in payload && payload.classId) {
+        const deleteInfo = getRemovedInfo(payload.classId);
+        return { ...payload, ...deleteInfo };
+      }
+      break;
+    case "classDeleted":
+      if ("classId" in payload && payload.classId) {
+        const deleteInfo = await trackDeleteClass(payload.classId);
+        return { ...payload, ...deleteInfo };
+      }
+      break;
+    case "classCreated":
+      if ("source" in payload && payload.source !== "created") {
+        if ("classId" in payload && payload.classId) {
+          return { ...payload, classTitle: getCssClass(payload.classId).label };
+        }
+      }
+      return payload;
+    case "classStateClicked":
+      if ("classId" in payload && payload.classId) {
+        return { ...payload, classTitle: getCssClass(payload.classId).label };
+      }
+      break;
+    case "classSyncToV3PopupShown":
+      return {
+        ...payload,
+        interaction_type: "popup_shown",
+        target_type: "popup",
+        target_name: "sync_to_v3_popup",
+        interaction_result: "popup_viewed",
+        target_location: "widget_panel",
+        location_l1: "class_manager"
+      };
+    case "classSyncToV3": {
+      const classLabel = getCssClass(payload.classId).label;
+      const isSync = payload.action === "sync";
+      return {
+        ...payload,
+        interaction_type: "click",
+        target_type: classLabel,
+        target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
+        interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
+        target_location: "widget_panel",
+        location_l1: "class_manager",
+        interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
+      };
+    }
+    case "classSyncToV3PopupClick": {
+      const isSyncAction = payload.action === "sync";
+      return {
+        ...payload,
+        interaction_type: "click",
+        target_type: "button",
+        target_name: isSyncAction ? "sync_to_v3" : "cancel",
+        interaction_result: isSyncAction ? "class_is_synced" : "cancel",
+        target_location: "sync_to_v3_popup"
+      };
+    }
+    default:
+      return payload;
+  }
+};
+var track = (data) => {
+  const { dispatchEvent, config } = (0, import_events.getMixpanel)();
+  if (!config?.names?.global_classes?.[data.event]) {
+    console.error("Global class tracking event not found", { event: data.event });
+    return;
+  }
+  const name = config.names.global_classes[data.event];
+  const { event, ...eventData } = data;
+  try {
+    dispatchEvent?.(name, {
+      event,
+      ...eventData
+    });
+  } catch (error) {
+    throw new GlobalClassTrackingError({ cause: error });
+  }
+};
+var extractCssClassData = (classId) => {
+  const cssClass = getCssClass(classId);
+  const classTitle = cssClass.label;
+  return { classTitle };
+};
+var getCssClass = (classId) => {
+  const cssClass = selectClass((0, import_store8.__getState)(), classId);
+  if (!cssClass) {
+    throw new Error(`CSS class with ID ${classId} not found`);
+  }
+  return cssClass;
+};
+var trackDeleteClass = async (classId) => {
+  const totalInstances = await getTotalInstancesByCssClassID(classId);
+  const classTitle = getCssClass(classId).label;
+  return { totalInstances, classTitle };
+};
+var getTotalInstancesByCssClassID = async (classId) => {
+  const cssClassUsage = await fetchCssClassUsage();
+  return cssClassUsage[classId]?.total ?? 1;
+};
+var getAppliedInfo = async (classId) => {
+  const { classTitle } = extractCssClassData(classId);
+  const totalInstancesAfterApply = await getTotalInstancesByCssClassID(classId) + 1;
+  return { classTitle, totalInstancesAfterApply };
+};
+var getRemovedInfo = (classId) => {
+  const { classTitle } = extractCssClassData(classId);
+  return {
+    classTitle
+  };
 };
 
 // src/save-global-classes.tsx
 async function saveGlobalClasses({ context: context2, onApprove }) {
-  const state = selectData((0, import_store12.__getState)());
+  const state = selectData((0, import_store10.__getState)());
   const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
   const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
   const response = await apiAction({
     items: state.items,
     order: state.order,
-    changes: calculateChanges(state, currentContext((0, import_store12.__getState)()))
+    changes: calculateChanges(state, currentContext((0, import_store10.__getState)()))
   });
-  (0, import_store12.__dispatch)(slice.actions.reset({ context: context2 }));
+  (0, import_store10.__dispatch)(slice.actions.reset({ context: context2 }));
   window.dispatchEvent(new CustomEvent("classes:updated", { detail: { context: context2 } }));
   if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
-    (0, import_store12.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    (0, import_store10.__dispatch)(slice.actions.updateMultiple(response.data.data.modifiedLabels));
     trackGlobalClasses({
       event: "classPublishConflict",
       numOfConflicts: Object.keys(response.data.data.modifiedLabels).length
@@ -967,7 +794,7 @@ function calculateChanges(state, initialData) {
 // src/components/search-and-filter/components/filter/active-filters.tsx
 var React6 = __toESM(require("react"));
 var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 
 // src/components/search-and-filter/components/filter/clear-icon-button.tsx
 var React4 = __toESM(require("react"));
@@ -998,11 +825,11 @@ var CustomIconButton = (0, import_ui2.styled)(import_ui2.IconButton)(({ theme })
 // src/components/search-and-filter/components/filter/filter-list.tsx
 var React5 = __toESM(require("react"));
 var import_ui3 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var filterConfig = {
-  unused: (0, import_i18n3.__)("Unused", "elementor"),
-  empty: (0, import_i18n3.__)("Empty", "elementor"),
-  onThisPage: (0, import_i18n3.__)("On this page", "elementor")
+  unused: (0, import_i18n2.__)("Unused", "elementor"),
+  empty: (0, import_i18n2.__)("Empty", "elementor"),
+  onThisPage: (0, import_i18n2.__)("On this page", "elementor")
 };
 var FilterList = () => {
   const {
@@ -1085,7 +912,7 @@ var ActiveFilters = () => {
     ClearIconButton,
     {
       trigger: "header",
-      tooltipText: (0, import_i18n4.__)("Clear Filters", "elementor"),
+      tooltipText: (0, import_i18n3.__)("Clear Filters", "elementor"),
       sx: { margin: "0 0 auto auto" }
     }
   ));
@@ -1106,7 +933,7 @@ var import_react4 = require("react");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons3 = require("@elementor/icons");
 var import_ui5 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 var CssClassFilter = () => {
   const {
     filters: { filters }
@@ -1123,7 +950,7 @@ var CssClassFilter = () => {
     }
   }, [popupState.isOpen]);
   const showCleanIcon = Object.values(filters).some((value) => value);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { title: (0, import_i18n5.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(import_ui5.Tooltip, { title: (0, import_i18n4.__)("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
     import_ui5.ToggleButton,
     {
       value: "filter",
@@ -1157,12 +984,12 @@ var CssClassFilter = () => {
             {
               trigger: "menu",
               key: "clear-all-button",
-              tooltipText: (0, import_i18n5.__)("Clear all", "elementor")
+              tooltipText: (0, import_i18n4.__)("Clear all", "elementor")
             }
           )
         ] : [],
         onClose: popupState.close,
-        title: (0, import_i18n5.__)("Filters", "elementor"),
+        title: (0, import_i18n4.__)("Filters", "elementor"),
         icon: /* @__PURE__ */ React7.createElement(import_icons3.FilterIcon, { fontSize: "tiny" })
       }
     ),
@@ -1182,7 +1009,7 @@ var CssClassFilter = () => {
 var React8 = __toESM(require("react"));
 var import_icons4 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_i18n5 = require("@wordpress/i18n");
 var ClassManagerSearch = () => {
   const {
     search: { inputValue, handleChange }
@@ -1199,7 +1026,7 @@ var ClassManagerSearch = () => {
           event: "classManagerSearched"
         });
       },
-      placeholder: (0, import_i18n6.__)("Search", "elementor"),
+      placeholder: (0, import_i18n5.__)("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
         startAdornment: /* @__PURE__ */ React8.createElement(import_ui6.InputAdornment, { position: "start" }, /* @__PURE__ */ React8.createElement(import_icons4.SearchIcon, { fontSize: "tiny" }))
@@ -1214,7 +1041,7 @@ var import_react5 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_ui4 = require("@elementor/editor-ui");
 var import_ui7 = require("@elementor/ui");
-var import_i18n7 = require("@wordpress/i18n");
+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);
@@ -1223,7 +1050,7 @@ var ClassManagerIntroduction = () => {
     import_editor_ui4.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n7.__)("Class Manager", "elementor"),
+      title: (0, import_i18n6.__)("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -1243,24 +1070,24 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React9.createElement(import_ui7.Box, { p: 3 }, /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n7.__)(
+  return /* @__PURE__ */ React9.createElement(import_ui7.Box, { p: 3 }, /* @__PURE__ */ React9.createElement(import_ui7.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__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(import_ui7.Typography, { variant: "body2" }, (0, import_i18n7.__)(
+  )), /* @__PURE__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(import_ui7.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/delete-class.ts
-var import_store14 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 var isDeleted = false;
 var deleteClass = (id2) => {
   trackGlobalClasses({
     event: "classDeleted",
     classId: id2,
     runAction: () => {
-      (0, import_store14.__dispatch)(slice.actions.delete(id2));
+      (0, import_store12.__dispatch)(slice.actions.delete(id2));
       isDeleted = true;
     }
   });
@@ -1278,25 +1105,25 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React10.creat
 // src/components/class-manager/global-classes-list.tsx
 var React17 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_store18 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 var import_ui14 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_i18n13 = require("@wordpress/i18n");
+var import_i18n12 = require("@wordpress/i18n");
 
 // src/hooks/use-ordered-classes.ts
-var import_store16 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var useOrderedClasses = () => {
-  return (0, import_store16.__useSelector)(selectOrderedClasses);
+  return (0, import_store14.__useSelector)(selectOrderedClasses);
 };
 
 // src/components/class-manager/class-item.tsx
 var React15 = __toESM(require("react"));
 var import_react7 = require("react");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
-var import_i18n11 = require("@wordpress/i18n");
+var import_i18n10 = require("@wordpress/i18n");
 
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var React11 = __toESM(require("react"));
@@ -1304,7 +1131,7 @@ var import_editor_documents2 = require("@elementor/editor-documents");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons6 = require("@elementor/icons");
 var import_ui8 = require("@elementor/ui");
-var import_i18n8 = require("@wordpress/i18n");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/hooks/use-css-class-usage-by-id.ts
 var EMPTY_CLASS_USAGE = {
@@ -1320,23 +1147,23 @@ var useCssClassUsageByID = (id2) => {
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var iconMapper = {
   "wp-post": {
-    label: (0, import_i18n8.__)("Post", "elementor"),
+    label: (0, import_i18n7.__)("Post", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.PostTypeIcon, { fontSize: "inherit" })
   },
   "wp-page": {
-    label: (0, import_i18n8.__)("Page", "elementor"),
+    label: (0, import_i18n7.__)("Page", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.PagesIcon, { fontSize: "inherit" })
   },
   popup: {
-    label: (0, import_i18n8.__)("Popup", "elementor"),
+    label: (0, import_i18n7.__)("Popup", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.PopupTemplateIcon, { fontSize: "inherit" })
   },
   header: {
-    label: (0, import_i18n8.__)("Header", "elementor"),
+    label: (0, import_i18n7.__)("Header", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.HeaderTemplateIcon, { fontSize: "inherit" })
   },
   footer: {
-    label: (0, import_i18n8.__)("Footer", "elementor"),
+    label: (0, import_i18n7.__)("Footer", "elementor"),
     icon: /* @__PURE__ */ React11.createElement(import_icons6.FooterTemplateIcon, { fontSize: "inherit" })
   }
 };
@@ -1366,7 +1193,7 @@ var CssClassUsagePopover = ({
     import_editor_ui5.PopoverHeader,
     {
       icon: /* @__PURE__ */ React11.createElement(import_icons6.CurrentLocationIcon, { fontSize: "tiny" }),
-      title: /* @__PURE__ */ React11.createElement(import_ui8.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui8.Box, { "aria-label": "header-title" }, (0, import_i18n8.__)("Locator", "elementor")), /* @__PURE__ */ React11.createElement(import_ui8.Box, null, /* @__PURE__ */ React11.createElement(import_ui8.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
+      title: /* @__PURE__ */ React11.createElement(import_ui8.Stack, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(import_ui8.Box, { "aria-label": "header-title" }, (0, import_i18n7.__)("Locator", "elementor")), /* @__PURE__ */ React11.createElement(import_ui8.Box, null, /* @__PURE__ */ React11.createElement(import_ui8.Chip, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
       onClose
     }
   ), /* @__PURE__ */ React11.createElement(import_ui8.Divider, null), /* @__PURE__ */ React11.createElement(import_editor_ui5.PopoverBody, { width: 300 }, /* @__PURE__ */ React11.createElement(
@@ -1447,7 +1274,7 @@ var React12 = __toESM(require("react"));
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
-var import_i18n9 = require("@wordpress/i18n");
+var import_i18n8 = require("@wordpress/i18n");
 var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const {
     data: { total },
@@ -1528,9 +1355,9 @@ var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React12.createElem
   {
     disableInteractive: true,
     placement: "top",
-    title: `${(0, import_i18n9.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
+    title: `${(0, import_i18n8.__)("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
       "{{locations}}",
-      total === 1 ? (0, import_i18n9.__)("location", "elementor") : (0, import_i18n9.__)("locations", "elementor")
+      total === 1 ? (0, import_i18n8.__)("location", "elementor") : (0, import_i18n8.__)("locations", "elementor")
     )}`
   },
   /* @__PURE__ */ React12.createElement("span", null, children)
@@ -1541,7 +1368,7 @@ var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React12.createElement(
     disableInteractive: true,
     placement: "top",
     color: "secondary",
-    content: /* @__PURE__ */ React12.createElement(import_editor_ui6.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n9.__)("This class isn\u2019t being used yet.", "elementor"))
+    content: /* @__PURE__ */ React12.createElement(import_editor_ui6.InfoAlert, { sx: { mt: 1 } }, (0, import_i18n8.__)("This class isn\u2019t being used yet.", "elementor"))
   },
   /* @__PURE__ */ React12.createElement("span", null, children)
 );
@@ -1551,7 +1378,7 @@ var React13 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_ui7 = require("@elementor/editor-ui");
 var import_ui10 = require("@elementor/ui");
-var import_i18n10 = require("@wordpress/i18n");
+var import_i18n9 = require("@wordpress/i18n");
 var context = (0, import_react6.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = (0, import_react6.useState)(null);
@@ -1572,14 +1399,14 @@ var DeleteClassDialog = ({ label, id: id2 }) => {
     closeDialog2();
     deleteClass(id2);
   };
-  const text = total && content.length ? (0, import_i18n10.__)(
+  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_i18n10.__)(
+  ).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"
   );
-  return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n10.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n10.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
+  return /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog, { open: true, onClose: closeDialog2 }, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Title, null, (0, import_i18n9.__)("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Content, null, /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.ContentText, null, (0, import_i18n9.__)("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(import_ui10.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(import_editor_ui7.ConfirmationDialog.Actions, { onClose: closeDialog2, onConfirm: handleConfirm }));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react6.useContext)(context);
@@ -1728,7 +1555,7 @@ var ClassItem = ({
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: (0, import_i18n11.__)("More actions", "elementor")
+          title: (0, import_i18n10.__)("More actions", "elementor")
         },
         /* @__PURE__ */ React15.createElement(import_ui12.IconButton, { size: "tiny", ...(0, import_ui12.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(import_icons9.DotsVerticalIcon, { fontSize: "tiny" }))
       )
@@ -1755,7 +1582,7 @@ var ClassItem = ({
           openEditMode();
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n10.__)("Rename", "elementor"))
     ),
     onToggleSync && /* @__PURE__ */ React15.createElement(
       import_editor_ui8.MenuListItem,
@@ -1765,7 +1592,7 @@ var ClassItem = ({
           onToggleSync(id2, !syncToV3);
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(import_icons9.RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(import_icons9.RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n11.__)("Stop syncing to Global Fonts", "elementor") : (0, import_i18n11.__)("Sync to Global Fonts", "elementor")))
+      /* @__PURE__ */ React15.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(import_icons9.RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(import_icons9.RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n10.__)("Stop syncing to Global Fonts", "elementor") : (0, import_i18n10.__)("Sync to Global Fonts", "elementor")))
     ),
     /* @__PURE__ */ React15.createElement(
       import_editor_ui8.MenuListItem,
@@ -1775,7 +1602,7 @@ var ClassItem = ({
           openDialog2({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n11.__)("Delete", "elementor"))
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n10.__)("Delete", "elementor"))
     )
   ));
 };
@@ -1830,7 +1657,7 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
   return "none";
 };
 var validateLabel = (newLabel) => {
-  const result = (0, import_editor_styles_repository2.validateStyleLabel)(newLabel, "rename");
+  const result = (0, import_editor_styles_repository.validateStyleLabel)(newLabel, "rename");
   if (result.isValid) {
     return null;
   }
@@ -1841,7 +1668,7 @@ var validateLabel = (newLabel) => {
 var React16 = __toESM(require("react"));
 var import_icons10 = require("@elementor/icons");
 var import_ui13 = require("@elementor/ui");
-var import_i18n12 = require("@wordpress/i18n");
+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;
@@ -1859,18 +1686,18 @@ var getNotFoundType = (searchValue, filters, filteredClasses) => {
 };
 var notFound = {
   filterAndSearch: {
-    mainText: (0, import_i18n12.__)("Sorry, nothing matched.", "elementor"),
-    sceneryText: (0, import_i18n12.__)("Try something else.", "elementor"),
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched.", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   search: {
-    mainText: (0, import_i18n12.__)("Sorry, nothing matched", "elementor"),
-    sceneryText: (0, import_i18n12.__)("Clear your input and try something else.", "elementor"),
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Clear your input and try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(import_icons10.PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   filter: {
-    mainText: (0, import_i18n12.__)("Sorry, nothing matched that search.", "elementor"),
-    sceneryText: (0, import_i18n12.__)("Clear the filters and try something else.", "elementor"),
+    mainText: (0, import_i18n11.__)("Sorry, nothing matched that search.", "elementor"),
+    sceneryText: (0, import_i18n11.__)("Clear the filters and try something else.", "elementor"),
     icon: /* @__PURE__ */ React16.createElement(import_icons10.ColorSwatchIcon, { color: "inherit", fontSize: "large" })
   }
 };
@@ -1943,7 +1770,7 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
     )
   ),
   /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
-  /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui13.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n12.__)("Clear & try again", "elementor")))
+  /* @__PURE__ */ React16.createElement(import_ui13.Typography, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(import_ui13.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n11.__)("Clear & try again", "elementor")))
 );
 
 // src/components/class-manager/global-classes-list.tsx
@@ -1959,7 +1786,7 @@ var GlobalClassesList = ({
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
   const cssClasses = useOrderedClasses();
-  const dispatch5 = (0, import_store18.__useDispatch)();
+  const dispatch5 = (0, import_store16.__useDispatch)();
   const filters = useFilters();
   const [draggedItemId, setDraggedItemId] = (0, import_react8.useState)(null);
   const draggedItemLabel = cssClasses.find((cssClass) => cssClass.id === draggedItemId)?.label ?? "";
@@ -2098,7 +1925,7 @@ var GlobalClassesList = ({
     )
   ));
 };
-var EmptyState = () => /* @__PURE__ */ React17.createElement(import_ui14.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n13.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(import_ui14.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n13.__)(
+var EmptyState = () => /* @__PURE__ */ React17.createElement(import_ui14.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n12.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(import_ui14.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"
 )));
@@ -2108,7 +1935,7 @@ var StyledHeader = (0, import_ui14.styled)(import_ui14.Typography)(({ theme, var
   }
 }));
 var useReorder = (draggedItemId, setDraggedItemId, draggedItemLabel) => {
-  const dispatch5 = (0, import_store18.__useDispatch)();
+  const dispatch5 = (0, import_store16.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
     dispatch5(slice.actions.setOrder(newIds));
@@ -2164,7 +1991,7 @@ function unblockPanelInteractions() {
 var React18 = __toESM(require("react"));
 var import_react9 = require("react");
 var import_ui15 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_i18n13 = require("@wordpress/i18n");
 var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
 var StartSyncToV3Modal = ({
   externalOpen,
@@ -2196,7 +2023,7 @@ var StartSyncToV3Modal = ({
     onConfirm?.();
     onExternalClose?.();
   };
-  return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n14.__)("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n14.__)(
+  return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n13.__)("Sync class to Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n13.__)(
     "Only typography settings supported in Global Fonts will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to Global Fonts.",
     "elementor"
   )))), /* @__PURE__ */ React18.createElement(import_ui15.DialogActions, { sx: { justifyContent: "space-between", px: 3, pb: 2 } }, /* @__PURE__ */ React18.createElement(
@@ -2209,32 +2036,54 @@ var StartSyncToV3Modal = ({
           onChange: (e) => setShouldShowAgain(!e.target.checked)
         }
       ),
-      label: /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary" }, (0, import_i18n14.__)("Don't show again", "elementor"))
+      label: /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary" }, (0, import_i18n13.__)("Don't show again", "elementor"))
     }
-  ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n14.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n14.__)("Sync to Global Fonts", "elementor")))));
+  ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n13.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n13.__)("Sync to Global Fonts", "elementor")))));
 };
 
 // src/components/class-manager/class-manager-panel.tsx
 var STOP_SYNC_MESSAGE_KEY = "stop-sync-class";
 var id = "global-classes-manager";
+function ClassManagerPanelEmbedded({ onRequestClose, onExposeCloseAttempt }) {
+  return /* @__PURE__ */ React19.createElement(
+    ClassManagerPanelRoot,
+    {
+      embedded: true,
+      onRequestClose,
+      onExposeCloseAttempt
+    }
+  );
+}
+function ClassManagerPanel() {
+  return /* @__PURE__ */ React19.createElement(ClassManagerPanelRoot, null);
+}
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)(id);
+    (0, import_editor_v1_adapters.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: async () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
+    (0, import_editor_v1_adapters.changeEditMode)("edit");
     await (0, import_editor_documents3.reloadCurrentDocument)();
     unblockPanelInteractions();
   },
   isOpenPreviousElement: true
 });
-function ClassManagerPanel() {
+function ClassManagerPanelRoot({
+  embedded = false,
+  onRequestClose,
+  onExposeCloseAttempt
+} = {}) {
   const isDirty2 = useDirtyState();
-  const { close: closePanel } = usePanelActions();
+  const { close: closeStandalonePanel } = usePanelActions();
+  const closePanel = (0, import_react10.useMemo)(
+    () => embedded ? onRequestClose ?? (async () => {
+    }) : closeStandalonePanel,
+    [embedded, onRequestClose, closeStandalonePanel]
+  );
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
   const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react10.useState)(null);
   const [startSyncConfirmation, setStartSyncConfirmation] = (0, import_react10.useState)(null);
@@ -2242,11 +2091,34 @@ function ClassManagerPanel() {
   const [scrollElement, setScrollElement] = (0, import_react10.useState)(null);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
-    (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    (0, import_store18.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
+  const handleClosePanel = (0, import_react10.useCallback)(() => {
+    if (isDirty2) {
+      openSaveChangesDialog();
+      return;
+    }
+    void closePanel();
+  }, [isDirty2, openSaveChangesDialog, closePanel]);
+  (0, import_react10.useEffect)(() => {
+    if (!embedded || !onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  (0, import_react10.useEffect)(() => {
+    if (!embedded) {
+      return;
+    }
+    blockPanelInteractions();
+    return () => {
+      unblockPanelInteractions();
+    };
+  }, [embedded]);
   const handleStopSync = (0, import_react10.useCallback)((classId) => {
-    (0, import_store20.__dispatch)(
+    (0, import_store18.__dispatch)(
       slice.actions.update({
         style: {
           id: classId,
@@ -2258,7 +2130,7 @@ function ClassManagerPanel() {
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = (0, import_react10.useCallback)((classId) => {
-    (0, import_store20.__dispatch)(
+    (0, import_store18.__dispatch)(
       slice.actions.update({
         style: {
           id: classId,
@@ -2280,51 +2152,29 @@ function ClassManagerPanel() {
     [isStopSyncSuppressed, handleStopSync]
   );
   usePreventUnload();
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(import_ui16.ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n15.__)("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
-    CloseButton,
-    {
-      sx: { marginLeft: "auto" },
-      disabled: isPublishing,
-      onClose: () => {
-        if (isDirty2) {
-          openSaveChangesDialog();
-          return;
-        }
-        closePanel();
-      }
-    }
-  ))), /* @__PURE__ */ React19.createElement(
-    import_editor_panels.PanelBody,
+  const searchFiltersBlock = /* @__PURE__ */ React19.createElement(import_ui16.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(import_ui16.Box, { sx: embedded ? { flexGrow: 1, minWidth: 0 } : { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null), embedded && /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null));
+  const listArea = /* @__PURE__ */ React19.createElement(
+    import_ui16.Box,
     {
+      ref: setScrollElement,
+      px: 2,
       sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
+        flexGrow: 1,
+        overflowY: "auto",
+        ...embedded ? { minHeight: 0 } : {}
       }
     },
-    /* @__PURE__ */ React19.createElement(import_ui16.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(import_ui16.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
     /* @__PURE__ */ React19.createElement(
-      import_ui16.Box,
+      GlobalClassesList,
       {
-        ref: setScrollElement,
-        px: 2,
-        sx: {
-          flexGrow: 1,
-          overflowY: "auto"
-        }
-      },
-      /* @__PURE__ */ React19.createElement(
-        GlobalClassesList,
-        {
-          disabled: isPublishing,
-          scrollElement,
-          onStopSyncRequest: handleStopSyncRequest,
-          onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
-        }
-      )
+        disabled: isPublishing,
+        scrollElement,
+        onStopSyncRequest: handleStopSyncRequest,
+        onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
+      }
     )
-  ), /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
+  );
+  const saveFooter = /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
     import_ui16.Button,
     {
       fullWidth: true,
@@ -2335,8 +2185,9 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n15.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
+    (0, import_i18n14.__)("Save changes", "elementor")
+  ));
+  const dialogs = /* @__PURE__ */ React19.createElement(React19.Fragment, null, startSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StartSyncToV3Modal,
     {
       externalOpen: true,
@@ -2351,30 +2202,84 @@ function ClassManagerPanel() {
       onClose: () => setStopSyncConfirmation(null),
       onConfirm: () => handleStopSync(stopSyncConfirmation)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_ui16.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n15.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n15.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_ui16.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
     import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n15.__)("Discard", "elementor"),
+          label: (0, import_i18n14.__)("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n15.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n14.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
-            closePanel();
+            void closePanel();
           }
         }
       }
     }
   )));
+  const classManagerLayout = embedded ? /* @__PURE__ */ React19.createElement(
+    import_ui16.Stack,
+    {
+      direction: "column",
+      sx: {
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
+      }
+    },
+    searchFiltersBlock,
+    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
+    listArea,
+    saveFooter
+  ) : /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n14.__)("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
+    ClassPanelCloseButton,
+    {
+      disabled: isPublishing,
+      onClose: () => {
+        if (isDirty2) {
+          openSaveChangesDialog();
+          return;
+        }
+        void closeStandalonePanel();
+      }
+    }
+  ))), /* @__PURE__ */ React19.createElement(
+    import_editor_panels.PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    searchFiltersBlock,
+    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
+    listArea
+  ), saveFooter);
+  const core = /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui16.ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, classManagerLayout)), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), dialogs);
+  return embedded ? core : /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, core);
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React19.createElement(import_icons11.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(import_ui16.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(import_ui16.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, (0, import_i18n15.__)("Something went wrong", "elementor"))));
+var ClassPanelCloseButton = ({ onClose, sx, ...props }) => /* @__PURE__ */ React19.createElement(
+  import_ui16.IconButton,
+  {
+    size: "small",
+    color: "secondary",
+    onClick: onClose,
+    "aria-label": "Close",
+    sx: { marginLeft: "auto", ...sx },
+    ...props
+  },
+  /* @__PURE__ */ React19.createElement(import_icons11.XIcon, { fontSize: "small" })
+);
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(import_ui16.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(import_ui16.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, (0, import_i18n14.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   (0, import_react10.useEffect)(() => {
@@ -2390,7 +2295,7 @@ var usePreventUnload = () => {
   }, [isDirty2]);
 };
 var usePublish = () => {
-  return (0, import_query3.useMutation)({
+  return (0, import_query2.useMutation)({
     mutationFn: () => saveGlobalClasses({ context: "frontend" }),
     onSuccess: async () => {
       (0, import_editor_documents3.setDocumentModifiedStatus)(false);
@@ -2413,7 +2318,7 @@ var TotalCssClassCounter = () => {
 };
 var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
   const [, suppressStopSyncMessage] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
-  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n15.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n15.__)("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n15.__)(
+  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n14.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n14.__)("You're about to stop syncing a typography class to Global Fonts.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n14.__)(
     "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
     "elementor"
   ))), /* @__PURE__ */ React19.createElement(
@@ -2421,15 +2326,191 @@ var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
     {
       onClose,
       onConfirm,
-      cancelLabel: (0, import_i18n15.__)("Cancel", "elementor"),
-      confirmLabel: (0, import_i18n15.__)("Got it", "elementor"),
+      cancelLabel: (0, import_i18n14.__)("Cancel", "elementor"),
+      confirmLabel: (0, import_i18n14.__)("Got it", "elementor"),
       color: "primary",
       onSuppressMessage: suppressStopSyncMessage,
-      suppressLabel: (0, import_i18n15.__)("Don't show again", "elementor")
+      suppressLabel: (0, import_i18n14.__)("Don't show again", "elementor")
     }
   ));
 };
 
+// src/global-classes-styles-provider.ts
+var import_editor_styles2 = require("@elementor/editor-styles");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_store20 = require("@elementor/store");
+var import_i18n15 = require("@wordpress/i18n");
+
+// src/capabilities.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
+var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
+var getCapabilities = () => {
+  const shouldEnforceCapabilities = (0, import_editor_v1_adapters2.isExperimentActive)(EXPERIMENT_KEY);
+  if (shouldEnforceCapabilities) {
+    return {
+      update: UPDATE_CLASS_CAPABILITY_KEY,
+      create: UPDATE_CLASS_CAPABILITY_KEY,
+      delete: UPDATE_CLASS_CAPABILITY_KEY,
+      updateProps: UPDATE_CLASS_CAPABILITY_KEY
+    };
+  }
+};
+
+// src/global-classes-styles-provider.ts
+var MAX_CLASSES = 100;
+var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
+var PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
+var globalClassesStylesProvider = (0, import_editor_styles_repository2.createStylesProvider)({
+  key: GLOBAL_CLASSES_PROVIDER_KEY,
+  priority: 30,
+  limit: MAX_CLASSES,
+  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
+  labels: {
+    singular: (0, import_i18n15.__)("class", "elementor"),
+    plural: (0, import_i18n15.__)("classes", "elementor")
+  },
+  subscribe: (cb) => subscribeWithStates(cb),
+  capabilities: getCapabilities(),
+  actions: {
+    all: () => selectOrderedClasses((0, import_store20.__getState)()),
+    get: (id2) => selectClass((0, import_store20.__getState)(), id2),
+    resolveCssName: (id2) => {
+      return selectClass((0, import_store20.__getState)(), id2)?.label ?? id2;
+    },
+    create: (label, variants = [], id2) => {
+      const classes = selectGlobalClasses((0, import_store20.__getState)());
+      const existingLabels = Object.values(classes).map((style) => style.label);
+      if (existingLabels.includes(label)) {
+        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
+      }
+      if (!id2) {
+        id2 = (0, import_editor_styles2.generateId)("g-", Object.keys(classes));
+      }
+      (0, import_store20.__dispatch)(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      (0, import_store20.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      (0, import_store20.__dispatch)(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      (0, import_store20.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props,
+          mode: args.mode
+        })
+      );
+    },
+    updateCustomCss: (args) => {
+      (0, import_store20.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          custom_css: args.custom_css,
+          props: {}
+        })
+      );
+    },
+    tracking: (data) => {
+      trackGlobalClasses(data).catch((error) => {
+        throw new GlobalClassTrackingError({ cause: error });
+      });
+    }
+  }
+});
+var subscribeWithStates = (cb) => {
+  let previousState = selectData((0, import_store20.__getState)());
+  return (0, import_store20.__subscribeWithSelector)(
+    (state) => state.globalClasses,
+    (currentState) => {
+      cb(previousState.items, currentState.data.items);
+      previousState = currentState.data;
+    }
+  );
+};
+
+// src/mcp-integration/classes-resource.ts
+var GLOBAL_CLASSES_URI = "elementor://global-classes";
+var STORAGE_KEY = "elementor-global-classes";
+var updateLocalStorageCache = () => {
+  const classes = globalClassesStylesProvider.actions.all();
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(classes));
+};
+var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
+  [canvasMcpEntry, classesMcpEntry].forEach((entry) => {
+    const { sendResourceUpdated, resource, waitForReady } = entry;
+    resource(
+      "global-classes",
+      GLOBAL_CLASSES_URI,
+      {
+        description: "Global classes list."
+      },
+      async () => {
+        return {
+          contents: [{ uri: GLOBAL_CLASSES_URI, text: localStorage[STORAGE_KEY] ?? "[]" }]
+        };
+      }
+    );
+    waitForReady().then(() => {
+      updateLocalStorageCache();
+      globalClassesStylesProvider.subscribe(() => {
+        updateLocalStorageCache();
+        sendResourceUpdated({ uri: GLOBAL_CLASSES_URI });
+      });
+    });
+  });
+};
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_mcp = require("@elementor/editor-mcp");
+var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_styles_repository5 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_store28 = require("@elementor/store");
+
+// src/components/class-manager/class-manager-button.tsx
+var React20 = __toESM(require("react"));
+var import_editor_documents4 = require("@elementor/editor-documents");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
+var import_editor_ui10 = require("@elementor/editor-ui");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_ui17 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
+
+// src/hooks/use-prefetch-css-class-usage.ts
+var import_query3 = require("@elementor/query");
+function usePrefetchCssClassUsage() {
+  const queryClient = (0, import_query3.useQueryClient)();
+  const prefetchClassesUsage = () => queryClient.prefetchQuery({
+    queryKey: [QUERY_KEY],
+    queryFn: fetchCssClassUsage
+  });
+  return { prefetchClassesUsage };
+}
+var PrefetchCssClassUsage = () => {
+  const { prefetchClassesUsage } = usePrefetchCssClassUsage();
+  prefetchClassesUsage();
+  return null;
+};
+
 // src/components/class-manager/class-manager-button.tsx
 var trackGlobalClassesButton = () => {
   trackGlobalClasses({
@@ -2448,17 +2529,24 @@ var ClassManagerButton = () => {
   if (!isUserAllowedToUpdateClass) {
     return null;
   }
+  const toggleClassesManagerPanel = () => {
+    if ((0, import_editor_v1_adapters3.isExperimentActive)("e_editor_design_system_panel")) {
+      window.dispatchEvent(
+        new CustomEvent("elementor/toggle-design-system", {
+          detail: { tab: "classes" }
+        })
+      );
+    } else {
+      openPanel();
+    }
+  };
   const handleOpenPanel = () => {
     if (document?.isDirty) {
       openSaveChangesDialog();
       return;
     }
-    openPanel();
+    toggleClassesManagerPanel();
     trackGlobalClassesButton();
-    trackGlobalClasses({
-      event: "classManagerOpened",
-      source: "style-panel"
-    });
     prefetchClassesUsage();
   };
   return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui17.Tooltip, { title: (0, import_i18n16.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui17.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Title, null, (0, import_i18n16.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Content, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n16.__)(
@@ -2477,7 +2565,7 @@ var ClassManagerButton = () => {
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
-            openPanel();
+            toggleClassesManagerPanel();
             trackGlobalClassesButton();
             prefetchClassesUsage();
           }
@@ -2588,7 +2676,7 @@ function GlobalStylesImportListener() {
 
 // src/components/open-panel-from-url.tsx
 var import_react12 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
@@ -2601,7 +2689,7 @@ function OpenPanelFromUrl() {
     if (activePanel !== PANEL_ID) {
       return;
     }
-    const cleanup = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
       if (hasOpened.current) {
         return;
       }
@@ -3090,12 +3178,12 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 
 // src/sync-with-document.tsx
 var import_react14 = require("react");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_documents5 = require("@elementor/editor-documents");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store26 = require("@elementor/store");
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
@@ -3132,7 +3220,7 @@ function triggerSave(panelActions, context2 = "preview") {
   return promise;
 }
 function bindSaveAction(panelActions) {
-  (0, import_editor_v1_adapters4.registerDataHook)("dependency", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters5.registerDataHook)("dependency", "document/save/save", (args) => {
     triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
     return true;
   });
@@ -3153,11 +3241,15 @@ function isDirty() {
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
-  const panelActions = usePanelActions();
+  const { open: openClassPanel } = usePanelActions();
   (0, import_react14.useEffect)(() => {
-    (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
-      syncWithDocumentSave(panelActions);
+    const unsubscribe = (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
+      const open = (0, import_editor_v1_adapters6.isExperimentActive)("e_editor_design_system_panel") ? () => {
+        window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
+      } : openClassPanel;
+      syncWithDocumentSave({ open });
     });
+    return unsubscribe;
   }, []);
   return null;
 }
@@ -3165,7 +3257,9 @@ function SyncWithDocumentSave() {
 // src/init.ts
 function init() {
   (0, import_store28.__registerSlice)(slice);
-  (0, import_editor_panels2.__registerPanel)(panel);
+  if (!(0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel")) {
+    (0, import_editor_panels2.__registerPanel)(panel);
+  }
   import_editor_styles_repository5.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
@@ -3183,10 +3277,12 @@ function init() {
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage
   });
-  (0, import_editor.injectIntoLogic)({
-    id: "global-classes-open-panel-from-url",
-    component: OpenPanelFromUrl
-  });
+  if (!(0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel")) {
+    (0, import_editor.injectIntoLogic)({
+      id: "global-classes-open-panel-from-url",
+      component: OpenPanelFromUrl
+    });
+  }
   (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass
@@ -3206,6 +3302,7 @@ function init() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  ClassManagerPanelEmbedded,
   GLOBAL_CLASSES_URI,
   init
 });