@elementor/editor-global-classes 0.18.0 → 0.19.0

package/dist/index.mjs

@@ -12,40 +12,36 @@ import {
   __useActiveDocument as useActiveDocument,
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
+import { useUserStylesCapability } from "@elementor/editor-styles-repository";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
-
-// src/components/class-manager/class-manager-panel.tsx
-import * as React7 from "react";
-import { useEffect } from "react";
-import { setDocumentModifiedStatus } from "@elementor/editor-documents";
-import {
-  __createPanel as createPanel,
-  Panel,
-  PanelBody,
-  PanelFooter,
-  PanelHeader,
-  PanelHeaderTitle
-} from "@elementor/editor-panels";
-import { ThemeProvider } from "@elementor/editor-ui";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-import { XIcon } from "@elementor/icons";
-import { useMutation } from "@elementor/query";
-import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack2 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
-
-// src/hooks/use-dirty-state.ts
-import { __useSelector as useSelector } from "@elementor/store";
+import { __ as __6 } from "@wordpress/i18n";
 
-// src/store.ts
-import { mergeProps } from "@elementor/editor-props";
-import {
-  getVariantByMeta
-} from "@elementor/editor-styles";
+// src/global-classes-styles-provider.ts
+import { generateId } from "@elementor/editor-styles";
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
 import {
-  __createSelector as createSelector,
-  __createSlice as createSlice
+  __dispatch as dispatch,
+  __getState as getState,
+  __subscribeWithSelector as subscribeWithSelector
 } from "@elementor/store";
+import { __ } from "@wordpress/i18n";
+
+// src/capabilities.ts
+import { isExperimentActive } from "@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 = 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/errors.ts
 import { createError } from "@elementor/utils";
@@ -59,6 +55,14 @@ var GlobalClassLabelAlreadyExistsError = createError({
 });
 
 // src/store.ts
+import { mergeProps } from "@elementor/editor-props";
+import {
+  getVariantByMeta
+} from "@elementor/editor-styles";
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice
+} from "@elementor/store";
 var initialState = {
   data: { items: {}, order: [] },
   initialData: {
@@ -142,13 +146,94 @@ var selectOrderedClasses = createSelector(
 );
 var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
 
+// src/global-classes-styles-provider.ts
+var MAX_CLASSES = 50;
+var globalClassesStylesProvider = createStylesProvider({
+  key: "global-classes",
+  priority: 30,
+  limit: MAX_CLASSES,
+  labels: {
+    singular: __("class", "elementor"),
+    plural: __("classes", "elementor")
+  },
+  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
+  capabilities: getCapabilities(),
+  actions: {
+    all: () => selectOrderedClasses(getState()),
+    get: (id2) => selectClass(getState(), id2),
+    resolveCssName: (id2) => {
+      if (!isExperimentActive2("e_v_3_30")) {
+        return id2;
+      }
+      return selectClass(getState(), id2)?.label ?? id2;
+    },
+    create: (label) => {
+      const classes = selectGlobalClasses(getState());
+      const existingLabels = Object.values(classes).map((style) => style.label);
+      if (existingLabels.includes(label)) {
+        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
+      }
+      const existingIds = Object.keys(classes);
+      const id2 = generateId("g-", existingIds);
+      dispatch(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      dispatch(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      dispatch(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      dispatch(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  }
+});
+
+// src/components/class-manager/class-manager-panel.tsx
+import * as React7 from "react";
+import { useEffect } from "react";
+import { setDocumentModifiedStatus } from "@elementor/editor-documents";
+import {
+  __createPanel as createPanel,
+  Panel,
+  PanelBody,
+  PanelFooter,
+  PanelHeader,
+  PanelHeaderTitle
+} from "@elementor/editor-panels";
+import { ThemeProvider } from "@elementor/editor-ui";
+import { changeEditMode } from "@elementor/editor-v1-adapters";
+import { XIcon } from "@elementor/icons";
+import { useMutation } from "@elementor/query";
+import { Alert, Box as Box4, Button as Button3, ErrorBoundary, IconButton as IconButton2, Stack as Stack2 } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
+
 // src/hooks/use-dirty-state.ts
+import { __useSelector as useSelector } from "@elementor/store";
 var useDirtyState = () => {
   return useSelector(selectIsDirty);
 };
 
 // src/save-global-classes.ts
-import { __dispatch as dispatch, __getState as getState } from "@elementor/store";
+import { __dispatch as dispatch2, __getState as getState2 } from "@elementor/store";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -171,21 +256,21 @@ var apiClient = {
 
 // src/save-global-classes.ts
 async function saveGlobalClasses({ context: context2 }) {
-  const state = selectData(getState());
+  const state = selectData(getState2());
   if (context2 === "preview") {
     await apiClient.saveDraft({
       items: state.items,
       order: state.order,
-      changes: calculateChanges(state, selectPreviewInitialData(getState()))
+      changes: calculateChanges(state, selectPreviewInitialData(getState2()))
     });
   } else {
     await apiClient.publish({
       items: state.items,
       order: state.order,
-      changes: calculateChanges(state, selectFrontendInitialData(getState()))
+      changes: calculateChanges(state, selectFrontendInitialData(getState2()))
     });
   }
-  dispatch(slice.actions.reset({ context: context2 }));
+  dispatch2(slice.actions.reset({ context: context2 }));
 }
 function calculateChanges(state, initialData) {
   const stateIds = Object.keys(state.items);
@@ -217,7 +302,7 @@ import { useState } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { IntroductionModal } from "@elementor/editor-ui";
 import { Box, Image, Typography } from "@elementor/ui";
-import { __ } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
@@ -226,7 +311,7 @@ var ClassManagerIntroduction = () => {
     IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: __("Class Manager", "elementor"),
+      title: __2("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -246,10 +331,10 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(Box, { p: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+  return /* @__PURE__ */ React.createElement(Box, { p: 3 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
     "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
-  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __(
+  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, __2(
     "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
@@ -258,10 +343,10 @@ var IntroductionContent = () => {
 // src/components/class-manager/delete-class.ts
 import { getCurrentDocument, getV1DocumentsManager } from "@elementor/editor-documents";
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
-import { __dispatch as dispatch2 } from "@elementor/store";
+import { __dispatch as dispatch3 } from "@elementor/store";
 var isDeleted = false;
 var deleteClass = (id2) => {
-  dispatch2(slice.actions.delete(id2));
+  dispatch3(slice.actions.delete(id2));
   isDeleted = true;
 };
 var onDelete = async () => {
@@ -306,7 +391,7 @@ import {
   Typography as Typography3,
   usePopupState
 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/hooks/use-classes-order.ts
 import { __useSelector as useSelector2 } from "@elementor/store";
@@ -333,7 +418,7 @@ import {
   DialogTitle,
   Typography as Typography2
 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 var context = createContext(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = useState2(null);
@@ -352,10 +437,10 @@ var DeleteConfirmationDialog = ({ label, id: id2 }) => {
     deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __2("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __2("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __2(
+  return /* @__PURE__ */ React3.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(AlertOctagonFilledIcon, { color: "error" }), __3("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(DialogContent, null, /* @__PURE__ */ React3.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __3("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(Typography2, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), __3(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __2("Not now", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __2("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(DialogActions, null, /* @__PURE__ */ React3.createElement(Button, { color: "secondary", onClick: closeDialog }, __3("Not now", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = useContext(context);
@@ -527,7 +612,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: __3("More actions", "elementor")
+          title: __4("More actions", "elementor")
         },
         /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
       )
@@ -554,7 +639,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __3("Rename", "elementor"))
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __4("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       MenuListItem,
@@ -564,7 +649,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __3("Delete", "elementor"))
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __4("Delete", "elementor"))
     )
   ));
 };
@@ -593,7 +678,7 @@ var StyledListItemButton = styled2(ListItemButton, {
 	}
 `
 );
-var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __3("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __3(
+var EmptyState = () => /* @__PURE__ */ React5.createElement(Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __4("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
   "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"
 )));
@@ -700,7 +785,7 @@ function ClassManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   usePreventUnload();
-  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __4("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(ThemeProvider, null, /* @__PURE__ */ React7.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(Panel, null, /* @__PURE__ */ React7.createElement(PanelHeader, null, /* @__PURE__ */ React7.createElement(Stack2, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __5("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -724,17 +809,17 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    __4("Save changes", "elementor")
-  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __4("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __4("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __4("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+    __5("Save changes", "elementor")
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, __5("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: __4("Cancel", "elementor"),
+          label: __5("Cancel", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __4("Save & Continue", "elementor"),
+          label: __5("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -746,7 +831,7 @@ function ClassManagerPanel() {
   )));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(IconButton2, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __4("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(Box4, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, __5("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   useEffect(() => {
@@ -779,6 +864,11 @@ var ClassManagerButton = () => {
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = useActiveDocumentActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { userCan } = useUserStylesCapability();
+  const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
+  if (!isUserAllowedToUpdateClass) {
+    return null;
+  }
   const handleOpenPanel = () => {
     if (document?.isDirty) {
       openSaveChangesDialog();
@@ -786,7 +876,7 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __5("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __5("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __5(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __6("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, __6("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __6(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
   ))), /* @__PURE__ */ React8.createElement(
@@ -794,11 +884,11 @@ var ClassManagerButton = () => {
     {
       actions: {
         cancel: {
-          label: __5("Stay here", "elementor"),
+          label: __6("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __5("Save & Continue", "elementor"),
+          label: __6("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -838,75 +928,6 @@ function PopulateStore() {
   return null;
 }
 
-// src/global-classes-styles-provider.ts
-import { generateId } from "@elementor/editor-styles";
-import { createStylesProvider } from "@elementor/editor-styles-repository";
-import { isExperimentActive } from "@elementor/editor-v1-adapters";
-import {
-  __dispatch as dispatch3,
-  __getState as getState2,
-  __subscribeWithSelector as subscribeWithSelector
-} from "@elementor/store";
-import { __ as __6 } from "@wordpress/i18n";
-var MAX_CLASSES = 50;
-var globalClassesStylesProvider = createStylesProvider({
-  key: "global-classes",
-  priority: 30,
-  limit: MAX_CLASSES,
-  labels: {
-    singular: __6("class", "elementor"),
-    plural: __6("classes", "elementor")
-  },
-  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
-  actions: {
-    all: () => selectOrderedClasses(getState2()),
-    get: (id2) => selectClass(getState2(), id2),
-    resolveCssName: (id2) => {
-      if (!isExperimentActive("e_v_3_30")) {
-        return id2;
-      }
-      return selectClass(getState2(), id2)?.label ?? id2;
-    },
-    create: (label) => {
-      const classes = selectGlobalClasses(getState2());
-      const existingLabels = Object.values(classes).map((style) => style.label);
-      if (existingLabels.includes(label)) {
-        throw new GlobalClassLabelAlreadyExistsError({ context: { label } });
-      }
-      const existingIds = Object.keys(classes);
-      const id2 = generateId("g-", existingIds);
-      dispatch3(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants: []
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      dispatch3(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      dispatch3(slice.actions.delete(id2));
-    },
-    updateProps: (args) => {
-      dispatch3(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
-    }
-  }
-});
-
 // src/sync-with-document-save.ts
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { registerDataHook } from "@elementor/editor-v1-adapters";