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

package/dist/index.mjs

@@ -1,32 +1,13 @@
 // src/components/class-manager/class-manager-panel.tsx
 import * as React19 from "react";
-import { useCallback, useEffect as useEffect4, useMemo as useMemo4, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect4, useState as useState7 } from "react";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
-import { reloadCurrentDocument, setDocumentModifiedStatus } from "@elementor/editor-documents";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { XIcon } from "@elementor/icons";
+import { setDocumentModifiedStatus } from "@elementor/editor-documents";
+import { PanelFooter } from "@elementor/editor-panels";
+import { ConfirmationDialog as ConfirmationDialog2, SaveChangesDialog, useDialog } from "@elementor/editor-ui";
 import { useMutation } from "@elementor/query";
 import { __dispatch as dispatch3 } from "@elementor/store";
-import {
-  Alert as Alert2,
-  Box as Box11,
-  Button as Button3,
-  Chip as Chip4,
-  DialogHeader as DialogHeader2,
-  Divider as Divider4,
-  ErrorBoundary,
-  IconButton as IconButton4,
-  Stack as Stack9
-} from "@elementor/ui";
+import { Alert as Alert2, Box as Box11, Button as Button3, Chip as Chip4, DialogHeader as DialogHeader2, Divider as Divider4, ErrorBoundary, Stack as Stack9 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
 
 // src/hooks/use-classes-order.ts
@@ -151,9 +132,9 @@ var slice = 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;
     },
@@ -174,9 +155,9 @@ var slice = 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;
     },
@@ -245,22 +226,22 @@ var slice = 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;
         }
       });
     },
@@ -296,8 +277,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: []
@@ -312,21 +293,21 @@ var selectIsDirty = (state) => state[SLICE_NAME].isDirty;
 var selectOrderedClasses = 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 = 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 = () => {
@@ -501,7 +482,7 @@ var useFilteredCssClassUsage = () => {
   const emptyCssClasses = useEmptyCssClass();
   const { data, isLoading } = useCssClassUsage();
   const listOfCssClasses = useAllCssClassesIDs();
-  const emptyCssClassesIDs = useMemo(() => emptyCssClasses.map(({ id: id2 }) => id2), [emptyCssClasses]);
+  const emptyCssClassesIDs = useMemo(() => emptyCssClasses.map(({ id }) => id), [emptyCssClasses]);
   const onThisPage = useMemo(() => {
     if (!data || !document) {
       return [];
@@ -819,7 +800,7 @@ async function saveGlobalClasses2({ context: context2, onApprove }) {
   const changes = calculateChanges(state, currentContext(getState2()));
   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,
@@ -851,13 +832,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 && hash(state.items[id2]) !== hash(initialData.items[id2]);
+    modified: stateIds.filter((id) => {
+      return id in initialData.items && hash(state.items[id]) !== hash(initialData.items[id]);
     }),
     order
   };
@@ -1154,12 +1135,12 @@ var IntroductionContent = () => {
 // src/components/class-manager/delete-class.ts
 import { __dispatch as dispatch2 } from "@elementor/store";
 var isDeleted = false;
-var deleteClass = (id2) => {
+var deleteClass = (id) => {
   trackGlobalClasses({
     event: "classDeleted",
-    classId: id2,
+    classId: id,
     runAction: () => {
-      dispatch2(slice.actions.delete(id2));
+      dispatch2(slice.actions.delete(id));
       isDeleted = true;
     }
   });
@@ -1235,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 };
 };
 
@@ -1382,11 +1363,11 @@ import {
   usePopupState as usePopupState2
 } from "@elementor/ui";
 import { __ as __8 } from "@wordpress/i18n";
-var CssClassUsageTrigger = ({ id: id2, onClick }) => {
+var CssClassUsageTrigger = ({ id, onClick }) => {
   const {
     data: { total },
     isLoading
-  } = useCssClassUsageByID(id2);
+  } = useCssClassUsageByID(id);
   const cssClassUsagePopover = usePopupState2({ variant: "popover", popupId: "css-class-usage-popover" });
   if (isLoading) {
     return null;
@@ -1395,17 +1376,17 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const handleMouseEnter = () => {
     trackGlobalClasses({
       event: "classUsageHovered",
-      classId: id2,
+      classId: id,
       usage: total
     });
   };
   const handleClick = (e) => {
     if (total !== 0) {
       bindTrigger(cssClassUsagePopover).onClick(e);
-      onClick(id2);
+      onClick(id);
       trackGlobalClasses({
         event: "classUsageClicked",
-        classId: id2
+        classId: id
       });
     }
   };
@@ -1440,7 +1421,7 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
       {
         onClose: cssClassUsagePopover.close,
         "aria-label": "css-class-usage-popover",
-        cssClassID: id2
+        cssClassID: id
       }
     )
   )));
@@ -1497,14 +1478,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 ? __9(
     "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.",
@@ -1542,12 +1523,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(GripVerticalIcon, { fontSize: "tiny" }));
-var SortableItem = ({ children, id: id2, style, ...props }) => {
+var SortableItem = ({ children, id, style, ...props }) => {
   return /* @__PURE__ */ React14.createElement(
     UnstableSortableItem,
     {
       ...props,
-      id: id2,
+      id,
       render: ({
         itemProps,
         isDragged,
@@ -1599,7 +1580,7 @@ var SortableItemIndicator = styled4(Box7)`
 
 // src/components/class-manager/class-item.tsx
 var ClassItem = ({
-  id: id2,
+  id,
   label,
   renameClass,
   selected,
@@ -1627,7 +1608,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(Stack6, { p: 0 }, /* @__PURE__ */ React15.createElement(
     WarningInfotip,
     {
@@ -1661,7 +1642,7 @@ var ClassItem = ({
           ...getEditableProps()
         }
       ) : /* @__PURE__ */ React15.createElement(EllipsisWithTooltip3, { title: label, as: Typography6, variant: "caption" })),
-      /* @__PURE__ */ React15.createElement(Box8, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
+      /* @__PURE__ */ React15.createElement(Box8, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id, onClick: setSelectedCssUsage })),
       /* @__PURE__ */ React15.createElement(
         Tooltip5,
         {
@@ -1701,7 +1682,7 @@ var ClassItem = ({
       {
         onClick: () => {
           popupState.close();
-          onToggleSync(id2, !syncToV3);
+          onToggleSync(id, !syncToV3);
         }
       },
       /* @__PURE__ */ React15.createElement(Stack6, { direction: "row", alignItems: "center", gap: 1 }, syncToV3 ? /* @__PURE__ */ React15.createElement(RefreshOffIcon, { fontSize: "tiny" }) : /* @__PURE__ */ React15.createElement(RefreshIcon, { fontSize: "tiny" }), /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? __10("Stop syncing to Global Fonts", "elementor") : __10("Sync to Global Fonts", "elementor")))
@@ -1711,7 +1692,7 @@ var ClassItem = ({
       {
         onClick: () => {
           popupState.close();
-          openDialog2({ id: id2, label });
+          openDialog2({ id, label });
         }
       },
       /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "error.light" } }, __10("Delete", "elementor"))
@@ -2014,16 +1995,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
                       }
                     })
@@ -2165,47 +2146,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
-    }
-  );
+  return /* @__PURE__ */ React19.createElement(ClassManagerPanelContent, { onRequestClose, onExposeCloseAttempt });
 }
-function ClassManagerPanel() {
-  return /* @__PURE__ */ React19.createElement(ClassManagerPanelRoot, null);
-}
-var { panel, usePanelActions } = createPanel({
-  id,
-  component: ClassManagerPanel,
-  allowedEditModes: ["edit", id],
-  onOpen: () => {
-    changeEditMode(id);
-    blockPanelInteractions();
-  },
-  onClose: async () => {
-    changeEditMode("edit");
-    await reloadCurrentDocument();
-    unblockPanelInteractions();
-  },
-  isOpenPreviousElement: true
-});
-function ClassManagerPanelRoot({
-  embedded = false,
-  onRequestClose,
-  onExposeCloseAttempt
-} = {}) {
+function ClassManagerPanelContent({ onRequestClose, onExposeCloseAttempt }) {
   const isDirty2 = useDirtyState();
-  const { close: closeStandalonePanel } = usePanelActions();
-  const closePanel = useMemo4(
-    () => embedded ? onRequestClose ?? (async () => {
-    }) : closeStandalonePanel,
-    [embedded, onRequestClose, closeStandalonePanel]
-  );
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const [stopSyncConfirmation, setStopSyncConfirmation] = useState7(null);
   const [startSyncConfirmation, setStartSyncConfirmation] = useState7(null);
@@ -2221,24 +2166,21 @@ function ClassManagerPanelRoot({
       openSaveChangesDialog();
       return;
     }
-    void closePanel();
-  }, [isDirty2, openSaveChangesDialog, closePanel]);
+    void onRequestClose();
+  }, [isDirty2, openSaveChangesDialog, onRequestClose]);
   useEffect4(() => {
-    if (!embedded || !onExposeCloseAttempt) {
+    if (!onExposeCloseAttempt) {
       return;
     }
     onExposeCloseAttempt(() => handleClosePanel());
     return () => onExposeCloseAttempt(null);
-  }, [embedded, onExposeCloseAttempt, handleClosePanel]);
+  }, [onExposeCloseAttempt, handleClosePanel]);
   useEffect4(() => {
-    if (!embedded) {
-      return;
-    }
     blockPanelInteractions();
     return () => {
       unblockPanelInteractions();
     };
-  }, [embedded]);
+  }, []);
   const handleStopSync = useCallback((classId) => {
     dispatch3(
       slice.actions.update({
@@ -2274,42 +2216,67 @@ function ClassManagerPanelRoot({
     [isStopSyncSuppressed, handleStopSync]
   );
   usePreventUnload();
-  const searchFiltersBlock = /* @__PURE__ */ React19.createElement(Box11, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(Stack9, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(Box11, { 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(
-    Box11,
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(
+    Stack9,
     {
-      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(Box11, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(
+      Stack9,
+      {
+        direction: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 0.5,
+        sx: { pb: 0.5 }
+      },
+      /* @__PURE__ */ React19.createElement(Box11, { 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(Divider4, null),
     /* @__PURE__ */ React19.createElement(
-      GlobalClassesList,
+      Box11,
       {
-        disabled: isPublishing,
-        scrollElement,
-        onStopSyncRequest: handleStopSyncRequest,
-        onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
-      }
-    )
-  );
-  const saveFooter = /* @__PURE__ */ React19.createElement(PanelFooter, null, /* @__PURE__ */ React19.createElement(
-    Button3,
-    {
-      fullWidth: true,
-      size: "small",
-      color: "global",
-      variant: "contained",
-      onClick: publish,
-      disabled: !isDirty2,
-      loading: isPublishing
-    },
-    __14("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(PanelFooter, null, /* @__PURE__ */ React19.createElement(
+      Button3,
+      {
+        fullWidth: true,
+        size: "small",
+        color: "global",
+        variant: "contained",
+        onClick: publish,
+        disabled: !isDirty2,
+        loading: isPublishing
+      },
+      __14("Save changes", "elementor")
+    ))
+  ))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StartSyncToV3Modal,
     {
       externalOpen: true,
@@ -2339,68 +2306,13 @@ function ClassManagerPanelRoot({
           action: async () => {
             await publish();
             closeSaveChangesDialog();
-            void closePanel();
+            void onRequestClose();
           }
         }
       }
     }
   )));
-  const classManagerLayout = embedded ? /* @__PURE__ */ React19.createElement(
-    Stack9,
-    {
-      direction: "column",
-      sx: {
-        height: "100%",
-        width: "100%",
-        flex: 1,
-        minHeight: 0,
-        overflow: "hidden"
-      }
-    },
-    searchFiltersBlock,
-    /* @__PURE__ */ React19.createElement(Divider4, null),
-    listArea,
-    saveFooter
-  ) : /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(Stack9, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(Stack9, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __14("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
-    ClassPanelCloseButton,
-    {
-      disabled: isPublishing,
-      onClose: () => {
-        if (isDirty2) {
-          openSaveChangesDialog();
-          return;
-        }
-        void closeStandalonePanel();
-      }
-    }
-  ))), /* @__PURE__ */ React19.createElement(
-    PanelBody,
-    {
-      sx: {
-        display: "flex",
-        flexDirection: "column",
-        height: "100%"
-      }
-    },
-    searchFiltersBlock,
-    /* @__PURE__ */ React19.createElement(Divider4, null),
-    listArea
-  ), saveFooter);
-  const core = /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(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(ThemeProvider, null, core);
 }
-var ClassPanelCloseButton = ({ onClose, sx, ...props }) => /* @__PURE__ */ React19.createElement(
-  IconButton4,
-  {
-    size: "small",
-    color: "secondary",
-    onClick: onClose,
-    "aria-label": "Close",
-    sx: { marginLeft: "auto", ...sx },
-    ...props
-  },
-  /* @__PURE__ */ React19.createElement(XIcon, { fontSize: "small" })
-);
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(Box11, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, __14("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
@@ -2561,11 +2473,11 @@ var pendingLoad = null;
 var pendingIds = /* @__PURE__ */ new Set();
 async function loadExistingClasses(classIds) {
   const existingClasses = selectGlobalClasses(getState3());
-  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);
@@ -2598,7 +2510,7 @@ var globalClassesStylesProvider = createStylesProvider({
   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: __15("class", "elementor"),
     plural: __15("classes", "elementor")
@@ -2607,45 +2519,45 @@ var globalClassesStylesProvider = createStylesProvider({
   capabilities: getCapabilities(),
   actions: {
     all: () => selectOrderedClasses(getState4()),
-    get: (id2) => {
+    get: (id) => {
       const state = getState4();
-      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 = getState4();
-      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(getState4()));
       const existingLabels = existingClasses.map(([, classLabel]) => classLabel);
       if (existingLabels.includes(label)) {
         throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
       }
       const existingIds = existingClasses.map(([existingId]) => existingId);
-      if (!id2) {
-        id2 = generateId("g-", existingIds);
+      if (!id) {
+        id = generateId("g-", existingIds);
       }
       dispatch6(
         slice.actions.add({
-          id: id2,
+          id,
           type: "class",
           label,
           variants
         })
       );
-      return id2;
+      return id;
     },
     update: (payload) => {
       dispatch6(
@@ -2654,8 +2566,8 @@ var globalClassesStylesProvider = createStylesProvider({
         })
       );
     },
-    delete: (id2) => {
-      dispatch6(slice.actions.delete(id2));
+    delete: (id) => {
+      dispatch6(slice.actions.delete(id));
     },
     updateProps: (args) => {
       dispatch6(
@@ -2735,9 +2647,7 @@ import {
   registerStyleProviderToColors
 } from "@elementor/editor-editing-panel";
 import { getMCPByDomain } from "@elementor/editor-mcp";
-import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
-import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
@@ -2748,8 +2658,7 @@ import {
 } from "@elementor/editor-documents";
 import { useUserStylesCapability } from "@elementor/editor-styles-repository";
 import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
-import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
-import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
+import { IconButton as IconButton4, Tooltip as Tooltip6 } from "@elementor/ui";
 import { __ as __16 } from "@wordpress/i18n";
 
 // src/hooks/use-prefetch-css-class-usage.ts
@@ -2777,7 +2686,6 @@ var trackGlobalClassesButton = () => {
 };
 var ClassManagerButton = () => {
   const document = useActiveDocument2();
-  const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = useActiveDocumentActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog2();
   const { prefetchClassesUsage } = usePrefetchCssClassUsage();
@@ -2787,15 +2695,11 @@ var ClassManagerButton = () => {
     return null;
   }
   const toggleClassesManagerPanel = () => {
-    if (isExperimentActive2("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) {
@@ -2806,7 +2710,7 @@ var ClassManagerButton = () => {
     trackGlobalClassesButton();
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip6, { title: __16("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(IconButton5, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Title, null, __16("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __16(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip6, { title: __16("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(IconButton4, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Title, null, __16("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __16(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
   ))), /* @__PURE__ */ React20.createElement(
@@ -2912,53 +2816,11 @@ function GlobalStylesImportListener() {
   return null;
 }
 
-// src/components/open-panel-from-event.tsx
-import { useEffect as useEffect6 } from "react";
-var EVENT_OPEN_GLOBAL_CLASSES_MANAGER = "elementor/open-global-classes-manager";
-function OpenPanelFromEvent() {
-  const { open } = usePanelActions();
-  useEffect6(() => {
-    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
-import { useEffect as useEffect7, useRef as useRef3 } from "react";
-import { __privateListenTo as listenTo, routeOpenEvent } from "@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 = useRef3(false);
-  useEffect7(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
-    if (activePanel !== PANEL_ID) {
-      return;
-    }
-    const cleanup = listenTo(routeOpenEvent(DEFAULT_PANEL_ROUTE), () => {
-      if (hasOpened.current) {
-        return;
-      }
-      hasOpened.current = true;
-      requestAnimationFrame(() => {
-        open();
-      });
-    });
-    return cleanup;
-  }, [open]);
-  return null;
-}
-
 // src/components/populate-store.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect6 } from "react";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 function PopulateStore() {
-  useEffect8(() => {
+  useEffect6(() => {
     loadCurrentDocumentClasses();
     registerDataHook("after", "editor/documents/attach-preview", async () => {
       await loadCurrentDocumentClasses();
@@ -3394,8 +3256,8 @@ var initMcpIntegration = (reg, canvasMcpEntry) => {
 };
 
 // src/sync-with-document.tsx
-import { useEffect as useEffect9 } from "react";
-import { __privateListenTo as listenTo2, isExperimentActive as isExperimentActive3, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+import { useEffect as useEffect7 } from "react";
+import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync-with-document-save.ts
 import { getCurrentUser } from "@elementor/editor-current-user";
@@ -3458,12 +3320,11 @@ function isDirty() {
 
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
-  const { open: openClassPanel } = usePanelActions();
-  useEffect9(() => {
-    const unsubscribe = listenTo2(v1ReadyEvent(), () => {
-      const open = isExperimentActive3("e_editor_design_system_panel") ? () => {
+  useEffect7(() => {
+    const unsubscribe = listenTo(v1ReadyEvent(), () => {
+      const open = () => {
         window.dispatchEvent(new CustomEvent("elementor/open-global-classes-manager"));
-      } : openClassPanel;
+      };
       syncWithDocumentSave({ open });
     });
     return unsubscribe;
@@ -3474,9 +3335,6 @@ function SyncWithDocumentSave() {
 // src/init.ts
 function init() {
   registerSlice(slice);
-  if (!isExperimentActive4("e_editor_design_system_panel")) {
-    registerPanel(panel);
-  }
   stylesRepository.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-populate-store",
@@ -3494,16 +3352,6 @@ function init() {
     id: "global-classes-prefetch-css-class-usage",
     component: PrefetchCssClassUsage
   });
-  if (!isExperimentActive4("e_editor_design_system_panel")) {
-    injectIntoLogic({
-      id: "global-classes-open-panel-from-url",
-      component: OpenPanelFromUrl
-    });
-    injectIntoLogic({
-      id: "global-classes-open-panel-from-event",
-      component: OpenPanelFromEvent
-    });
-  }
   injectIntoCssClassConvert({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass