@elementor/editor-global-classes 4.2.0-880 → 4.2.0-881

package/dist/index.js

@@ -46,8 +46,6 @@ 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 import_icons11 = require("@elementor/icons");
 var import_query2 = require("@elementor/query");
 var import_store18 = require("@elementor/store");
 var import_ui16 = require("@elementor/ui");
@@ -170,9 +168,9 @@ var slice = (0, import_store.__createSlice)({
     delete(state, { payload }) {
       localHistory.next(state.data);
       state.data.items = Object.fromEntries(
-        Object.entries(state.data.items).filter(([id2]) => id2 !== payload)
+        Object.entries(state.data.items).filter(([id]) => id !== payload)
       );
-      state.data.order = state.data.order.filter((id2) => id2 !== payload);
+      state.data.order = state.data.order.filter((id) => id !== payload);
       delete state.classLabels[payload];
       state.isDirty = true;
     },
@@ -193,9 +191,9 @@ var slice = (0, import_store.__createSlice)({
     },
     updateMultiple(state, { payload }) {
       localHistory.next(state.data);
-      Object.entries(payload).forEach(([id2, { modified }]) => {
-        state.data.items[id2].label = modified;
-        state.classLabels[id2] = modified;
+      Object.entries(payload).forEach(([id, { modified }]) => {
+        state.data.items[id].label = modified;
+        state.classLabels[id] = modified;
       });
       state.isDirty = false;
     },
@@ -264,22 +262,22 @@ var slice = (0, import_store.__createSlice)({
     mergeExistingClasses(state, {
       payload: { preview, frontend }
     }) {
-      Object.entries(preview).forEach(([id2, previewClassData]) => {
-        const frontendClassData = frontend[id2];
+      Object.entries(preview).forEach(([id, previewClassData]) => {
+        const frontendClassData = frontend[id];
         if (previewClassData === null || previewClassData === void 0) {
           return;
         }
-        if (!(id2 in state.data.items)) {
-          state.data.items[id2] = previewClassData;
+        if (!(id in state.data.items)) {
+          state.data.items[id] = previewClassData;
         }
-        if (!(id2 in state.initialData.frontend.items)) {
-          state.initialData.frontend.items[id2] = frontendClassData;
+        if (!(id in state.initialData.frontend.items)) {
+          state.initialData.frontend.items[id] = frontendClassData;
         }
-        if (!(id2 in state.initialData.preview.items)) {
-          state.initialData.preview.items[id2] = previewClassData;
+        if (!(id in state.initialData.preview.items)) {
+          state.initialData.preview.items[id] = previewClassData;
         }
-        if (!(id2 in state.classLabels)) {
-          state.classLabels[id2] = previewClassData.label;
+        if (!(id in state.classLabels)) {
+          state.classLabels[id] = previewClassData.label;
         }
       });
     },
@@ -315,8 +313,8 @@ var getNonEmptyVariants = (style) => {
     ({ props, custom_css: customCss }) => Object.keys(props).length || customCss?.raw
   );
 };
-var placeholderDefinition = (id2, label) => ({
-  id: id2,
+var placeholderDefinition = (id, label) => ({
+  id,
   type: "class",
   label,
   variants: []
@@ -331,21 +329,21 @@ var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
 var selectOrderedClasses = (0, import_store.__createSelector)(
   selectData,
   selectClassLabels,
-  ({ items, order }, classLabels) => order.map((id2) => {
-    const loaded = items[id2];
+  ({ items, order }, classLabels) => order.map((id) => {
+    const loaded = items[id];
     if (loaded) {
       return loaded;
     }
-    const label = classLabels[id2];
-    return label !== void 0 ? placeholderDefinition(id2, label) : null;
+    const label = classLabels[id];
+    return label !== void 0 ? placeholderDefinition(id, label) : null;
   }).filter((s) => s !== null)
 );
-var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
+var selectClass = (state, id) => state[SLICE_NAME].data.items[id] ?? null;
 var selectEmptyCssClass = (0, import_store.__createSelector)(
   selectData,
   ({ items }) => Object.values(items).filter((cssClass) => cssClass.variants.length === 0)
 );
-var selectIsClassFetched = (state, id2) => !!state[SLICE_NAME].initialData.preview.items[id2] || !!state[SLICE_NAME].initialData.frontend.items[id2] || false;
+var selectIsClassFetched = (state, id) => !!state[SLICE_NAME].initialData.preview.items[id] || !!state[SLICE_NAME].initialData.frontend.items[id] || false;
 
 // src/hooks/use-classes-order.ts
 var useClassesOrder = () => {
@@ -520,7 +518,7 @@ var useFilteredCssClassUsage = () => {
   const emptyCssClasses = useEmptyCssClass();
   const { data, isLoading } = useCssClassUsage();
   const listOfCssClasses = useAllCssClassesIDs();
-  const emptyCssClassesIDs = (0, import_react2.useMemo)(() => emptyCssClasses.map(({ id: id2 }) => id2), [emptyCssClasses]);
+  const emptyCssClassesIDs = (0, import_react2.useMemo)(() => emptyCssClasses.map(({ id }) => id), [emptyCssClasses]);
   const onThisPage = (0, import_react2.useMemo)(() => {
     if (!data || !document) {
       return [];
@@ -827,7 +825,7 @@ async function saveGlobalClasses2({ context: context2, onApprove }) {
   const changes = calculateChanges(state, currentContext((0, import_store10.__getState)()));
   const touchedIds = [...changes.added, ...changes.modified];
   const touchedItems = Object.fromEntries(
-    touchedIds.map((id2) => [id2, state.items[id2]]).filter(([, v]) => v)
+    touchedIds.map((id) => [id, state.items[id]]).filter(([, v]) => v)
   );
   const response = await apiAction({
     items: touchedItems,
@@ -859,13 +857,13 @@ function calculateChanges(state, initialData) {
   const { order: stateOrder } = state;
   const { order: initialDataOrder } = initialData;
   const stateOrderIdSet = new Set(stateOrder);
-  const deleted = initialDataOrder.filter((id2) => !stateOrderIdSet.has(id2));
+  const deleted = initialDataOrder.filter((id) => !stateOrderIdSet.has(id));
   const order = stateOrder.join(";") !== initialDataOrder.join(";");
   return {
-    added: stateIds.filter((id2) => !initialDataIds.includes(id2)),
+    added: stateIds.filter((id) => !initialDataIds.includes(id)),
     deleted,
-    modified: stateIds.filter((id2) => {
-      return id2 in initialData.items && (0, import_utils4.hash)(state.items[id2]) !== (0, import_utils4.hash)(initialData.items[id2]);
+    modified: stateIds.filter((id) => {
+      return id in initialData.items && (0, import_utils4.hash)(state.items[id]) !== (0, import_utils4.hash)(initialData.items[id]);
     }),
     order
   };
@@ -1162,12 +1160,12 @@ var IntroductionContent = () => {
 // src/components/class-manager/delete-class.ts
 var import_store12 = require("@elementor/store");
 var isDeleted = false;
-var deleteClass = (id2) => {
+var deleteClass = (id) => {
   trackGlobalClasses({
     event: "classDeleted",
-    classId: id2,
+    classId: id,
     runAction: () => {
-      (0, import_store12.__dispatch)(slice.actions.delete(id2));
+      (0, import_store12.__dispatch)(slice.actions.delete(id));
       isDeleted = true;
     }
   });
@@ -1218,9 +1216,9 @@ var EMPTY_CLASS_USAGE = {
   total: 0,
   content: []
 };
-var useCssClassUsageByID = (id2) => {
+var useCssClassUsageByID = (id) => {
   const { data, ...rest } = useCssClassUsage();
-  const classData = data?.[id2] ?? EMPTY_CLASS_USAGE;
+  const classData = data?.[id] ?? EMPTY_CLASS_USAGE;
   return { ...rest, data: classData };
 };
 
@@ -1355,11 +1353,11 @@ var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui9 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
-var CssClassUsageTrigger = ({ id: id2, onClick }) => {
+var CssClassUsageTrigger = ({ id, onClick }) => {
   const {
     data: { total },
     isLoading
-  } = useCssClassUsageByID(id2);
+  } = useCssClassUsageByID(id);
   const cssClassUsagePopover = (0, import_ui9.usePopupState)({ variant: "popover", popupId: "css-class-usage-popover" });
   if (isLoading) {
     return null;
@@ -1368,17 +1366,17 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const handleMouseEnter = () => {
     trackGlobalClasses({
       event: "classUsageHovered",
-      classId: id2,
+      classId: id,
       usage: total
     });
   };
   const handleClick = (e) => {
     if (total !== 0) {
       (0, import_ui9.bindTrigger)(cssClassUsagePopover).onClick(e);
-      onClick(id2);
+      onClick(id);
       trackGlobalClasses({
         event: "classUsageClicked",
-        classId: id2
+        classId: id
       });
     }
   };
@@ -1413,7 +1411,7 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
       {
         onClose: cssClassUsagePopover.close,
         "aria-label": "css-class-usage-popover",
-        cssClassID: id2
+        cssClassID: id
       }
     )
   )));
@@ -1470,14 +1468,14 @@ var DeleteConfirmationProvider = ({ children }) => {
   };
   return /* @__PURE__ */ React13.createElement(context.Provider, { value: { openDialog: openDialog2, closeDialog: closeDialog2, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React13.createElement(DeleteClassDialog, { ...dialogProps }));
 };
-var DeleteClassDialog = ({ label, id: id2 }) => {
+var DeleteClassDialog = ({ label, id }) => {
   const { closeDialog: closeDialog2 } = useDeleteConfirmation();
   const {
     data: { total, content }
-  } = useCssClassUsageByID(id2);
+  } = useCssClassUsageByID(id);
   const handleConfirm = () => {
     closeDialog2();
-    deleteClass(id2);
+    deleteClass(id);
   };
   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.",
@@ -1510,12 +1508,12 @@ var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(
   }
 );
 var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(import_icons8.GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id: id2, style, ...props }) => {
+var SortableItem = ({ children, id, style, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     import_ui11.UnstableSortableItem,
     {
       ...props,
-      id: id2,
+      id,
       render: ({
         itemProps,
         isDragged,
@@ -1567,7 +1565,7 @@ var SortableItemIndicator = (0, import_ui11.styled)(import_ui11.Box)`
 
 // src/components/class-manager/class-item.tsx
 var ClassItem = ({
-  id: id2,
+  id,
   label,
   renameClass,
   selected,
@@ -1595,7 +1593,7 @@ var ClassItem = ({
     variant: "popover",
     disableAutoFocus: true
   });
-  const isSelected = (selectedCssUsage === id2 || selected || popupState.isOpen) && !disabled;
+  const isSelected = (selectedCssUsage === id || selected || popupState.isOpen) && !disabled;
   return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(import_ui12.Stack, { p: 0 }, /* @__PURE__ */ React15.createElement(
     import_editor_ui8.WarningInfotip,
     {
@@ -1629,7 +1627,7 @@ var ClassItem = ({
           ...getEditableProps()
         }
       ) : /* @__PURE__ */ React15.createElement(import_editor_ui8.EllipsisWithTooltip, { title: label, as: import_ui12.Typography, variant: "caption" })),
-      /* @__PURE__ */ React15.createElement(import_ui12.Box, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
+      /* @__PURE__ */ React15.createElement(import_ui12.Box, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id, onClick: setSelectedCssUsage })),
       /* @__PURE__ */ React15.createElement(
         import_ui12.Tooltip,
         {
@@ -1669,7 +1667,7 @@ var ClassItem = ({
       {
         onClick: () => {
           popupState.close();
-          onToggleSync(id2, !syncToV3);
+          onToggleSync(id, !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_i18n10.__)("Stop syncing to Global Fonts", "elementor") : (0, import_i18n10.__)("Sync to Global Fonts", "elementor")))
@@ -1679,7 +1677,7 @@ var ClassItem = ({
       {
         onClick: () => {
           popupState.close();
-          openDialog2({ id: id2, label });
+          openDialog2({ id, label });
         }
       },
       /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n10.__)("Delete", "elementor"))
@@ -1982,16 +1980,16 @@ var GlobalClassesList = ({
               },
               showSortIndicator: allowSorting,
               syncToV3: cssClass.sync_to_v3,
-              onToggleSync: (id2, newValue) => {
+              onToggleSync: (id, newValue) => {
                 if (!newValue && onStopSyncRequest) {
-                  onStopSyncRequest(id2);
+                  onStopSyncRequest(id);
                 } else if (newValue && onStartSyncRequest) {
-                  onStartSyncRequest(id2);
+                  onStartSyncRequest(id);
                 } else {
                   dispatch7(
                     slice.actions.update({
                       style: {
-                        id: id2,
+                        id,
                         sync_to_v3: newValue
                       }
                     })
@@ -2124,47 +2122,11 @@ var StartSyncToV3Modal = ({
 
 // 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);
+  return /* @__PURE__ */ React19.createElement(ClassManagerPanelContent, { onRequestClose, onExposeCloseAttempt });
 }
-var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
-  id,
-  component: ClassManagerPanel,
-  allowedEditModes: ["edit", id],
-  onOpen: () => {
-    (0, import_editor_v1_adapters.changeEditMode)(id);
-    blockPanelInteractions();
-  },
-  onClose: async () => {
-    (0, import_editor_v1_adapters.changeEditMode)("edit");
-    await (0, import_editor_documents3.reloadCurrentDocument)();
-    unblockPanelInteractions();
-  },
-  isOpenPreviousElement: true
-});
-function ClassManagerPanelRoot({
-  embedded = false,
-  onRequestClose,
-  onExposeCloseAttempt
-} = {}) {
+function ClassManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
   const isDirty2 = useDirtyState();
-  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);
@@ -2180,24 +2142,21 @@ function ClassManagerPanelRoot({
       openSaveChangesDialog();
       return;
     }
-    void closePanel();
-  }, [isDirty2, openSaveChangesDialog, closePanel]);
+    void onRequestClose();
+  }, [isDirty2, openSaveChangesDialog, onRequestClose]);
   (0, import_react10.useEffect)(() => {
-    if (!embedded || !onExposeCloseAttempt) {
+    if (!onExposeCloseAttempt) {
       return;
     }
     onExposeCloseAttempt(() => handleClosePanel());
     return () => onExposeCloseAttempt(null);
-  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  }, [onExposeCloseAttempt, handleClosePanel]);
   (0, import_react10.useEffect)(() => {
-    if (!embedded) {
-      return;
-    }
     blockPanelInteractions();
     return () => {
       unblockPanelInteractions();
     };
-  }, [embedded]);
+  }, []);
   const handleStopSync = (0, import_react10.useCallback)((classId) => {
     (0, import_store18.__dispatch)(
       slice.actions.update({
@@ -2233,42 +2192,67 @@ function ClassManagerPanelRoot({
     [isStopSyncSuppressed, handleStopSync]
   );
   usePreventUnload();
-  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,
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui16.ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(
+    import_ui16.Stack,
     {
-      ref: setScrollElement,
-      px: 2,
+      direction: "column",
       sx: {
-        flexGrow: 1,
-        overflowY: "auto",
-        ...embedded ? { minHeight: 0 } : {}
+        height: "100%",
+        width: "100%",
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden"
       }
     },
+    /* @__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: { flexGrow: 1, minWidth: 0 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)),
+      /* @__PURE__ */ React19.createElement(CssClassFilter, null),
+      /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)
+    ), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
+    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
     /* @__PURE__ */ React19.createElement(
-      GlobalClassesList,
+      import_ui16.Box,
       {
-        disabled: isPublishing,
-        scrollElement,
-        onStopSyncRequest: handleStopSyncRequest,
-        onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
-      }
-    )
-  );
-  const saveFooter = /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
-    import_ui16.Button,
-    {
-      fullWidth: true,
-      size: "small",
-      color: "global",
-      variant: "contained",
-      onClick: publish,
-      disabled: !isDirty2,
-      loading: isPublishing
-    },
-    (0, import_i18n14.__)("Save changes", "elementor")
-  ));
-  const dialogs = /* @__PURE__ */ React19.createElement(React19.Fragment, null, startSyncConfirmation && /* @__PURE__ */ React19.createElement(
+        ref: setScrollElement,
+        px: 2,
+        sx: {
+          flexGrow: 1,
+          overflowY: "auto",
+          minHeight: 0
+        }
+      },
+      /* @__PURE__ */ React19.createElement(
+        GlobalClassesList,
+        {
+          disabled: isPublishing,
+          scrollElement,
+          onStopSyncRequest: handleStopSyncRequest,
+          onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
+        }
+      )
+    ),
+    /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
+      import_ui16.Button,
+      {
+        fullWidth: true,
+        size: "small",
+        color: "global",
+        variant: "contained",
+        onClick: publish,
+        disabled: !isDirty2,
+        loading: isPublishing
+      },
+      (0, import_i18n14.__)("Save changes", "elementor")
+    ))
+  ))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StartSyncToV3Modal,
     {
       externalOpen: true,
@@ -2298,68 +2282,13 @@ function ClassManagerPanelRoot({
           action: async () => {
             await publish();
             closeSaveChangesDialog();
-            void closePanel();
+            void onRequestClose();
           }
         }
       }
     }
   )));
-  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 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();
@@ -2426,11 +2355,11 @@ var import_store24 = require("@elementor/store");
 var import_i18n15 = require("@wordpress/i18n");
 
 // src/capabilities.ts
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+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_adapters2.isExperimentActive)(EXPERIMENT_KEY);
+  const shouldEnforceCapabilities = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENT_KEY);
   if (shouldEnforceCapabilities) {
     return {
       update: UPDATE_CLASS_CAPABILITY_KEY,
@@ -2514,11 +2443,11 @@ var pendingLoad = null;
 var pendingIds = /* @__PURE__ */ new Set();
 async function loadExistingClasses(classIds) {
   const existingClasses = selectGlobalClasses((0, import_store22.__getState)());
-  const missingIds = classIds.filter((id2) => !(id2 in existingClasses));
+  const missingIds = classIds.filter((id) => !(id in existingClasses));
   if (missingIds.length === 0) {
     return;
   }
-  missingIds.forEach((id2) => pendingIds.add(id2));
+  missingIds.forEach((id) => pendingIds.add(id));
   if (pendingLoad) {
     await pendingLoad;
     return loadExistingClasses(classIds);
@@ -2551,7 +2480,7 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
   key: GLOBAL_CLASSES_PROVIDER_KEY,
   priority: 30,
   limit: MAX_CLASSES,
-  isPregeneratedLink: ({ id: id2 }) => PREGENERATED_LINK_PATTERN.test(id2),
+  isPregeneratedLink: ({ id }) => PREGENERATED_LINK_PATTERN.test(id),
   labels: {
     singular: (0, import_i18n15.__)("class", "elementor"),
     plural: (0, import_i18n15.__)("classes", "elementor")
@@ -2560,45 +2489,45 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
   capabilities: getCapabilities(),
   actions: {
     all: () => selectOrderedClasses((0, import_store24.__getState)()),
-    get: (id2) => {
+    get: (id) => {
       const state = (0, import_store24.__getState)();
-      const isFetched = selectIsClassFetched(state, id2);
-      const style = selectClass(state, id2);
+      const isFetched = selectIsClassFetched(state, id);
+      const style = selectClass(state, id);
       if (isFetched || style) {
         return style;
       }
-      loadExistingClasses([id2]);
-      const label = selectClassLabels(state)[id2] ?? id2;
-      return placeholderDefinition(id2, label);
+      loadExistingClasses([id]);
+      const label = selectClassLabels(state)[id] ?? id;
+      return placeholderDefinition(id, label);
     },
-    resolveCssName: (id2) => {
+    resolveCssName: (id) => {
       const state = (0, import_store24.__getState)();
-      const loaded = selectClass(state, id2);
+      const loaded = selectClass(state, id);
       if (loaded) {
         return loaded.label;
       }
-      const fromIndex = selectClassLabels(state)[id2];
-      return fromIndex ?? id2;
+      const fromIndex = selectClassLabels(state)[id];
+      return fromIndex ?? id;
     },
-    create: (label, variants = [], id2) => {
+    create: (label, variants = [], id) => {
       const existingClasses = Object.entries(selectClassLabels((0, import_store24.__getState)()));
       const existingLabels = existingClasses.map(([, classLabel]) => classLabel);
       if (existingLabels.includes(label)) {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = existingClasses.map(([existingId]) => existingId);
-      if (!id2) {
-        id2 = (0, import_editor_styles2.generateId)("g-", existingIds);
+      if (!id) {
+        id = (0, import_editor_styles2.generateId)("g-", existingIds);
       }
       (0, import_store24.__dispatch)(
         slice.actions.add({
-          id: id2,
+          id,
           type: "class",
           label,
           variants
         })
       );
-      return id2;
+      return id;
     },
     update: (payload) => {
       (0, import_store24.__dispatch)(
@@ -2607,8 +2536,8 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository2.createSty
         })
       );
     },
-    delete: (id2) => {
-      (0, import_store24.__dispatch)(slice.actions.delete(id2));
+    delete: (id) => {
+      (0, import_store24.__dispatch)(slice.actions.delete(id));
     },
     updateProps: (args) => {
       (0, import_store24.__dispatch)(
@@ -2684,9 +2613,7 @@ var initClassesResource = (classesMcpEntry, canvasMcpEntry) => {
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_mcp2 = 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_adapters8 = require("@elementor/editor-v1-adapters");
 var import_store32 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
@@ -2694,7 +2621,6 @@ var React20 = __toESM(require("react"));
 var import_editor_documents5 = 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");
 
@@ -2723,7 +2649,6 @@ var trackGlobalClassesButton = () => {
 };
 var ClassManagerButton = () => {
   const document = (0, import_editor_documents5.__useActiveDocument)();
-  const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = (0, import_editor_documents5.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui10.useDialog)();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
@@ -2733,15 +2658,11 @@ var ClassManagerButton = () => {
     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();
-    }
+    window.dispatchEvent(
+      new CustomEvent("elementor/toggle-design-system", {
+        detail: { tab: "classes" }
+      })
+    );
   };
   const handleOpenPanel = () => {
     if (document?.isDirty) {
@@ -2858,55 +2779,13 @@ function GlobalStylesImportListener() {
   return null;
 }
 
-// src/components/open-panel-from-event.tsx
-var import_react12 = require("react");
-var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
-function OpenPanelFromEvent() {
-  const { open } = usePanelActions();
-  (0, import_react12.useEffect)(() => {
-    const handler2 = () => open();
-    window.addEventListener(EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler2);
-    return () => window.removeEventListener(EVENT_OPEN_GLOBAL_CLASSES_MANAGER, handler2);
-  }, [open]);
-  return null;
-}
-
-// src/components/open-panel-from-url.tsx
-var import_react13 = require("react");
-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";
-function OpenPanelFromUrl() {
-  const { open } = usePanelActions();
-  const hasOpened = (0, import_react13.useRef)(false);
-  (0, import_react13.useEffect)(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
-    if (activePanel !== PANEL_ID) {
-      return;
-    }
-    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
-      if (hasOpened.current) {
-        return;
-      }
-      hasOpened.current = true;
-      requestAnimationFrame(() => {
-        open();
-      });
-    });
-    return cleanup;
-  }, [open]);
-  return null;
-}
-
 // src/components/populate-store.tsx
-var import_react14 = require("react");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_react12 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 function PopulateStore() {
-  (0, import_react14.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     loadCurrentDocumentClasses();
-    (0, import_editor_v1_adapters5.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+    (0, import_editor_v1_adapters2.registerDataHook)("after", "editor/documents/attach-preview", async () => {
       await loadCurrentDocumentClasses();
     });
   }, []);
@@ -3340,13 +3219,13 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 };
 
 // src/sync-with-document.tsx
-var import_react15 = require("react");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_react13 = require("react");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
 var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_documents6 = require("@elementor/editor-documents");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_store30 = require("@elementor/store");
 var pendingSave = null;
 function syncWithDocumentSave(panelActions) {
@@ -3383,7 +3262,7 @@ function triggerSave(panelActions, context2 = "preview") {
   return promise;
 }
 function bindSaveAction(panelActions) {
-  (0, import_editor_v1_adapters6.registerDataHook)("dependency", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters3.registerDataHook)("dependency", "document/save/save", (args) => {
     triggerSave(panelActions, args.status === "publish" ? "frontend" : "preview");
     return true;
   });
@@ -3404,12 +3283,11 @@ function isDirty() {
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
-  const { open: openClassPanel } = usePanelActions();
-  (0, import_react15.useEffect)(() => {
-    const unsubscribe = (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
-      const open = (0, import_editor_v1_adapters7.isExperimentActive)("e_editor_design_system_panel") ? () => {
+  (0, import_react13.useEffect)(() => {
+    const unsubscribe = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
+      const open = () => {
         window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
-      } : openClassPanel;
+      };
       syncWithDocumentSave({ open });
     });
     return unsubscribe;
@@ -3420,9 +3298,6 @@ function SyncWithDocumentSave() {
 // src/init.ts
 function init() {
   (0, import_store32.__registerSlice)(slice);
-  if (!(0, import_editor_v1_adapters8.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",
@@ -3440,16 +3315,6 @@ function init() {
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage
   });
-  if (!(0, import_editor_v1_adapters8.isExperimentActive)("e_editor_design_system_panel")) {
-    (0, import_editor.injectIntoLogic)({
-      id: "global-classes-open-panel-from-url",
-      component: OpenPanelFromUrl
-    });
-    (0, import_editor.injectIntoLogic)({
-      id: "global-classes-open-panel-from-event",
-      component: OpenPanelFromEvent
-    });
-  }
   (0, import_editor_editing_panel2.injectIntoCssClassConvert)({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass