@elementor/editor-global-classes 0.17.9 → 0.19.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # @elementor/editor-global-classes
 
+## 0.19.0
+
+### Minor Changes
+
+- 6e1d5ff: Enforce capabilities on global classes.
+
+### Patch Changes
+
+- 615baa1: upgrade elementor/ui version
+- Updated dependencies [93642ee]
+- Updated dependencies [ab07642]
+- Updated dependencies [12fab9e]
+- Updated dependencies [6e1d5ff]
+- Updated dependencies [d80a316]
+- Updated dependencies [35cdc76]
+- Updated dependencies [615baa1]
+- Updated dependencies [ae40ebe]
+  - @elementor/editor-editing-panel@1.39.0
+  - @elementor/editor-ui@0.9.0
+  - @elementor/editor-styles-repository@0.10.0
+  - @elementor/editor-current-user@0.5.0
+  - @elementor/editor-panels@0.15.4
+  - @elementor/editor@0.19.4
+  - @elementor/editor-documents@0.13.6
+
+## 0.18.0
+
+### Minor Changes
+
+- 15450a8: Allow render labels of global classes as css selector
+
+### Patch Changes
+
+- Updated dependencies [15450a8]
+- Updated dependencies [89dfaf2]
+- Updated dependencies [27c4c1f]
+  - @elementor/editor-styles-repository@0.9.0
+  - @elementor/editor-current-user@0.4.0
+  - @elementor/editor-editing-panel@1.38.1
+  - @elementor/editor-props@0.12.1
+  - @elementor/editor-styles@0.6.8
+
 ## 0.17.9
 
 ### Patch Changes

package/dist/index.js

@@ -38,35 +38,39 @@ module.exports = __toCommonJS(index_exports);
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 var import_store20 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
 var React8 = __toESM(require("react"));
 var import_editor_documents3 = require("@elementor/editor-documents");
+var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
 var import_ui7 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_i18n6 = require("@wordpress/i18n");
 
-// src/components/class-manager/class-manager-panel.tsx
-var React7 = __toESM(require("react"));
-var import_react5 = require("react");
-var import_editor_documents2 = require("@elementor/editor-documents");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui3 = require("@elementor/editor-ui");
+// src/global-classes-styles-provider.ts
+var import_editor_styles2 = require("@elementor/editor-styles");
+var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-var import_icons6 = require("@elementor/icons");
-var import_query = require("@elementor/query");
-var import_ui6 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
-
-// src/hooks/use-dirty-state.ts
 var import_store2 = require("@elementor/store");
+var import_i18n = require("@wordpress/i18n");
 
-// src/store.ts
-var import_editor_props = require("@elementor/editor-props");
-var import_editor_styles = require("@elementor/editor-styles");
-var import_store = require("@elementor/store");
+// src/capabilities.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var EXPERIMENT_KEY = "global_classes_should_enforce_capabilities";
+var UPDATE_CLASS_CAPABILITY_KEY = "elementor_global_classes_update_class";
+var getCapabilities = () => {
+  const shouldEnforceCapabilities = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENT_KEY);
+  if (shouldEnforceCapabilities) {
+    return {
+      update: UPDATE_CLASS_CAPABILITY_KEY,
+      create: UPDATE_CLASS_CAPABILITY_KEY,
+      delete: UPDATE_CLASS_CAPABILITY_KEY,
+      updateProps: UPDATE_CLASS_CAPABILITY_KEY
+    };
+  }
+};
 
 // src/errors.ts
 var import_utils = require("@elementor/utils");
@@ -80,6 +84,9 @@ var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
 });
 
 // src/store.ts
+var import_editor_props = require("@elementor/editor-props");
+var import_editor_styles = require("@elementor/editor-styles");
+var import_store = require("@elementor/store");
 var initialState = {
   data: { items: {}, order: [] },
   initialData: {
@@ -163,13 +170,87 @@ var selectOrderedClasses = (0, import_store.__createSelector)(
 );
 var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
 
+// src/global-classes-styles-provider.ts
+var MAX_CLASSES = 50;
+var globalClassesStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
+  key: "global-classes",
+  priority: 30,
+  limit: MAX_CLASSES,
+  labels: {
+    singular: (0, import_i18n.__)("class", "elementor"),
+    plural: (0, import_i18n.__)("classes", "elementor")
+  },
+  subscribe: (cb) => (0, import_store2.__subscribeWithSelector)((state) => state.globalClasses, cb),
+  capabilities: getCapabilities(),
+  actions: {
+    all: () => selectOrderedClasses((0, import_store2.__getState)()),
+    get: (id2) => selectClass((0, import_store2.__getState)(), id2),
+    resolveCssName: (id2) => {
+      if (!(0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30")) {
+        return id2;
+      }
+      return selectClass((0, import_store2.__getState)(), id2)?.label ?? id2;
+    },
+    create: (label) => {
+      const classes = selectGlobalClasses((0, import_store2.__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 = (0, import_editor_styles2.generateId)("g-", existingIds);
+      (0, import_store2.__dispatch)(
+        slice.actions.add({
+          id: id2,
+          type: "class",
+          label,
+          variants: []
+        })
+      );
+      return id2;
+    },
+    update: (payload) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id2) => {
+      (0, import_store2.__dispatch)(slice.actions.delete(id2));
+    },
+    updateProps: (args) => {
+      (0, import_store2.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props
+        })
+      );
+    }
+  }
+});
+
+// src/components/class-manager/class-manager-panel.tsx
+var React7 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_panels = require("@elementor/editor-panels");
+var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_icons6 = require("@elementor/icons");
+var import_query = require("@elementor/query");
+var import_ui6 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
 // src/hooks/use-dirty-state.ts
+var import_store4 = require("@elementor/store");
 var useDirtyState = () => {
-  return (0, import_store2.__useSelector)(selectIsDirty);
+  return (0, import_store4.__useSelector)(selectIsDirty);
 };
 
 // src/save-global-classes.ts
-var import_store4 = require("@elementor/store");
+var import_store6 = require("@elementor/store");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -192,21 +273,21 @@ var apiClient = {
 
 // src/save-global-classes.ts
 async function saveGlobalClasses({ context: context2 }) {
-  const state = selectData((0, import_store4.__getState)());
+  const state = selectData((0, import_store6.__getState)());
   if (context2 === "preview") {
     await apiClient.saveDraft({
       items: state.items,
       order: state.order,
-      changes: calculateChanges(state, selectPreviewInitialData((0, import_store4.__getState)()))
+      changes: calculateChanges(state, selectPreviewInitialData((0, import_store6.__getState)()))
     });
   } else {
     await apiClient.publish({
       items: state.items,
       order: state.order,
-      changes: calculateChanges(state, selectFrontendInitialData((0, import_store4.__getState)()))
+      changes: calculateChanges(state, selectFrontendInitialData((0, import_store6.__getState)()))
     });
   }
-  (0, import_store4.__dispatch)(slice.actions.reset({ context: context2 }));
+  (0, import_store6.__dispatch)(slice.actions.reset({ context: context2 }));
 }
 function calculateChanges(state, initialData) {
   const stateIds = Object.keys(state.items);
@@ -238,7 +319,7 @@ var import_react = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui = require("@elementor/ui");
-var import_i18n = require("@wordpress/i18n");
+var import_i18n2 = require("@wordpress/i18n");
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user.useSuppressedMessage)(MESSAGE_KEY);
@@ -247,7 +328,7 @@ var ClassManagerIntroduction = () => {
     import_editor_ui.IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: (0, import_i18n.__)("Class Manager", "elementor"),
+      title: (0, import_i18n2.__)("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -267,10 +348,10 @@ var ClassManagerIntroduction = () => {
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React.createElement(import_ui.Box, { p: 3 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
+  return /* @__PURE__ */ React.createElement(import_ui.Box, { p: 3 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
     "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
-  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n.__)(
+  )), /* @__PURE__ */ React.createElement("br", null), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, (0, import_i18n2.__)(
     "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
@@ -278,11 +359,11 @@ var IntroductionContent = () => {
 
 // src/components/class-manager/delete-class.ts
 var import_editor_documents = require("@elementor/editor-documents");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_store6 = require("@elementor/store");
+var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_store8 = require("@elementor/store");
 var isDeleted = false;
 var deleteClass = (id2) => {
-  (0, import_store6.__dispatch)(slice.actions.delete(id2));
+  (0, import_store8.__dispatch)(slice.actions.delete(id2));
   isDeleted = true;
 };
 var onDelete = async () => {
@@ -294,7 +375,7 @@ var reloadDocument = () => {
   const currentDocument = (0, import_editor_documents.getCurrentDocument)();
   const documentsManager = (0, import_editor_documents.getV1DocumentsManager)();
   documentsManager.invalidateCache();
-  return (0, import_editor_v1_adapters.__privateRunCommand)("editor/documents/switch", {
+  return (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
     id: currentDocument?.id,
     shouldScroll: false,
     shouldNavigateToDefaultRoute: false
@@ -309,23 +390,23 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.create
 // src/components/class-manager/global-classes-list.tsx
 var React5 = __toESM(require("react"));
 var import_react3 = require("react");
-var import_editor_styles_repository = require("@elementor/editor-styles-repository");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons4 = require("@elementor/icons");
-var import_store12 = require("@elementor/store");
+var import_store14 = require("@elementor/store");
 var import_ui4 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_i18n4 = require("@wordpress/i18n");
 
 // src/hooks/use-classes-order.ts
-var import_store8 = require("@elementor/store");
+var import_store10 = require("@elementor/store");
 var useClassesOrder = () => {
-  return (0, import_store8.__useSelector)(selectOrder);
+  return (0, import_store10.__useSelector)(selectOrder);
 };
 
 // src/hooks/use-ordered-classes.ts
-var import_store10 = require("@elementor/store");
+var import_store12 = require("@elementor/store");
 var useOrderedClasses = () => {
-  return (0, import_store10.__useSelector)(selectOrderedClasses);
+  return (0, import_store12.__useSelector)(selectOrderedClasses);
 };
 
 // src/components/class-manager/delete-confirmation-dialog.tsx
@@ -333,7 +414,7 @@ var React3 = __toESM(require("react"));
 var import_react2 = require("react");
 var import_icons2 = require("@elementor/icons");
 var import_ui2 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 var context = (0, import_react2.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = (0, import_react2.useState)(null);
@@ -352,10 +433,10 @@ var DeleteConfirmationDialog = ({ label, id: id2 }) => {
     deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n2.__)("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n2.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n2.__)(
+  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
     "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(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n2.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n2.__)("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React3.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react2.useContext)(context);
@@ -429,7 +510,7 @@ var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
-  const dispatch4 = (0, import_store12.__useDispatch)();
+  const dispatch4 = (0, import_store14.__useDispatch)();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
@@ -459,7 +540,7 @@ var GlobalClassesList = ({ disabled }) => {
   }))));
 };
 var useReorder = () => {
-  const dispatch4 = (0, import_store12.__useDispatch)();
+  const dispatch4 = (0, import_store14.__useDispatch)();
   const order = useClassesOrder();
   const reorder = (newIds) => {
     dispatch4(slice.actions.setOrder(newIds));
@@ -522,7 +603,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: (0, import_i18n3.__)("More actions", "elementor")
+          title: (0, import_i18n4.__)("More actions", "elementor")
         },
         /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
       )
@@ -549,7 +630,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n3.__)("Rename", "elementor"))
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n4.__)("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       import_editor_ui2.MenuListItem,
@@ -559,7 +640,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n3.__)("Delete", "elementor"))
+      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n4.__)("Delete", "elementor"))
     )
   ));
 };
@@ -588,7 +669,7 @@ var StyledListItemButton = (0, import_ui4.styled)(import_ui4.ListItemButton, {
 	}
 `
 );
-var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.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" }, (0, import_i18n3.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n3.__)(
+var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.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" }, (0, import_i18n4.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
   "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"
 )));
@@ -619,7 +700,7 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
   return "none";
 };
 var validateLabel = (newLabel) => {
-  const result = (0, import_editor_styles_repository.validateStyleLabel)(newLabel, "rename");
+  const result = (0, import_editor_styles_repository2.validateStyleLabel)(newLabel, "rename");
   if (result.isValid) {
     return null;
   }
@@ -674,11 +755,11 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)(id);
+    (0, import_editor_v1_adapters4.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
+    (0, import_editor_v1_adapters4.changeEditMode)("edit");
     unblockPanelInteractions();
   }
 });
@@ -688,7 +769,7 @@ function ClassManagerPanel() {
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   usePreventUnload();
-  return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n4.__)("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -712,17 +793,17 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n4.__)("Save changes", "elementor")
-  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n4.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n4.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n4.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+    (0, import_i18n5.__)("Save changes", "elementor")
+  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n4.__)("Cancel", "elementor"),
+          label: (0, import_i18n5.__)("Cancel", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n4.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -734,7 +815,7 @@ function ClassManagerPanel() {
   )));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons6.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n4.__)("Something went wrong", "elementor"))));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   (0, import_react5.useEffect)(() => {
@@ -767,6 +848,11 @@ var ClassManagerButton = () => {
   const { open: openPanel } = usePanelActions();
   const { save: saveDocument } = (0, import_editor_documents3.__useActiveDocumentActions)();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const { userCan } = (0, import_editor_styles_repository3.useUserStylesCapability)();
+  const isUserAllowedToUpdateClass = userCan(globalClassesStylesProvider.getKey()).update;
+  if (!isUserAllowedToUpdateClass) {
+    return null;
+  }
   const handleOpenPanel = () => {
     if (document?.isDirty) {
       openSaveChangesDialog();
@@ -774,7 +860,7 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n5.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { 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, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n5.__)(
+  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { 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, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n6.__)(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
   ))), /* @__PURE__ */ React8.createElement(
@@ -782,11 +868,11 @@ var ClassManagerButton = () => {
     {
       actions: {
         cancel: {
-          label: (0, import_i18n5.__)("Stay here", "elementor"),
+          label: (0, import_i18n6.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n6.__)("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -800,9 +886,9 @@ var ClassManagerButton = () => {
 
 // src/components/populate-store.tsx
 var import_react6 = require("react");
-var import_store14 = require("@elementor/store");
+var import_store16 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch4 = (0, import_store14.__useDispatch)();
+  const dispatch4 = (0, import_store16.__useDispatch)();
   (0, import_react6.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
@@ -826,67 +912,9 @@ function PopulateStore() {
   return null;
 }
 
-// src/global-classes-styles-provider.ts
-var import_editor_styles2 = require("@elementor/editor-styles");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_store16 = require("@elementor/store");
-var import_i18n6 = require("@wordpress/i18n");
-var MAX_CLASSES = 50;
-var globalClassesStylesProvider = (0, import_editor_styles_repository2.createStylesProvider)({
-  key: "global-classes",
-  priority: 30,
-  limit: MAX_CLASSES,
-  labels: {
-    singular: (0, import_i18n6.__)("class", "elementor"),
-    plural: (0, import_i18n6.__)("classes", "elementor")
-  },
-  subscribe: (cb) => (0, import_store16.__subscribeWithSelector)((state) => state.globalClasses, cb),
-  actions: {
-    all: () => selectOrderedClasses((0, import_store16.__getState)()),
-    get: (id2) => selectClass((0, import_store16.__getState)(), id2),
-    create: (label) => {
-      const classes = selectGlobalClasses((0, import_store16.__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 = (0, import_editor_styles2.generateId)("g-", existingIds);
-      (0, import_store16.__dispatch)(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants: []
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      (0, import_store16.__dispatch)(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      (0, import_store16.__dispatch)(slice.actions.delete(id2));
-    },
-    updateProps: (args) => {
-      (0, import_store16.__dispatch)(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
-    }
-  }
-});
-
 // src/sync-with-document-save.ts
 var import_editor_documents4 = require("@elementor/editor-documents");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store18 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
@@ -902,7 +930,7 @@ function syncDirtyState() {
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters3.registerDataHook)("after", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters5.registerDataHook)("after", "document/save/save", (args) => {
     return saveGlobalClasses({
       context: args.status === "publish" ? "frontend" : "preview"
     });
@@ -916,7 +944,7 @@ function isDirty() {
 function init() {
   (0, import_store20.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
-  import_editor_styles_repository3.stylesRepository.register(globalClassesStylesProvider);
+  import_editor_styles_repository4.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -925,7 +953,7 @@ function init() {
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.v1ReadyEvent)(), () => {
+  (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });
 }