@elementor/editor-global-classes 0.15.3 → 0.16.0

package/dist/index.mjs

@@ -2,7 +2,7 @@
 import { injectIntoLogic } from "@elementor/editor";
 import { injectIntoClassSelectorActions } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository as stylesRepository2 } from "@elementor/editor-styles-repository";
+import { stylesRepository } from "@elementor/editor-styles-repository";
 import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
@@ -13,7 +13,7 @@ import {
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
 import { IconButton as IconButton3, Tooltip as Tooltip2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 
 // src/components/class-manager/class-manager-panel.tsx
 import * as React7 from "react";
@@ -32,7 +32,7 @@ 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";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/hooks/use-dirty-state.ts
 import { __useSelector as useSelector } from "@elementor/store";
@@ -176,7 +176,7 @@ import * as React from "react";
 import { useState } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { IntroductionModal } from "@elementor/editor-ui";
-import { Box, Typography } from "@elementor/ui";
+import { Box, Image, Typography } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
@@ -187,18 +187,22 @@ var ClassManagerIntroduction = () => {
     {
       open: shouldShowIntroduction,
       title: __("Class Manager", "elementor"),
-      content: /* @__PURE__ */ React.createElement(IntroductionContent, null),
-      image: {
-        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
-        alt: ""
-      },
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
         }
         setShouldShowIntroduction(false);
       }
-    }
+    },
+    /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        sx: { width: "100%", aspectRatio: "16 / 9" },
+        src: "https://assets.elementor.com/packages/v1/images/class-manager-intro.svg",
+        alt: ""
+      }
+    ),
+    /* @__PURE__ */ React.createElement(IntroductionContent, null)
   );
 };
 var IntroductionContent = () => {
@@ -214,75 +218,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";
-
-// src/global-classes-styles-provider.ts
-import { generateId } from "@elementor/editor-styles";
-import {
-  __dispatch as dispatch2,
-  __getState as getState2,
-  __subscribeWithSelector as subscribeWithSelector
-} from "@elementor/store";
-import { __ as __2 } from "@wordpress/i18n";
-var MAX_CLASSES = 50;
-var globalClassesStylesProvider = {
-  key: "global-classes",
-  priority: 30,
-  limit: MAX_CLASSES,
-  actions: {
-    get: () => selectOrderedClasses(getState2()),
-    getById: (id2) => selectClass(getState2(), 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);
-      dispatch2(
-        slice.actions.add({
-          id: id2,
-          type: "class",
-          label,
-          variants: []
-        })
-      );
-      return id2;
-    },
-    update: (payload) => {
-      dispatch2(
-        slice.actions.update({
-          style: payload
-        })
-      );
-    },
-    delete: (id2) => {
-      dispatch2(slice.actions.delete(id2));
-    },
-    setOrder: (order) => {
-      dispatch2(slice.actions.setOrder(order));
-    },
-    updateProps: (args) => {
-      dispatch2(
-        slice.actions.updateProps({
-          id: args.id,
-          meta: args.meta,
-          props: args.props
-        })
-      );
-    }
-  },
-  subscribe: (cb) => subscribeWithSelector((state) => state.globalClasses, cb),
-  labels: {
-    singular: __2("class", "elementor"),
-    plural: __2("classes", "elementor")
-  }
-};
-
-// src/components/class-manager/delete-class.ts
+import { __dispatch as dispatch2 } from "@elementor/store";
 var isDeleted = false;
 var deleteClass = (id2) => {
-  globalClassesStylesProvider.actions.delete(id2);
+  dispatch2(slice.actions.delete(id2));
   isDeleted = true;
 };
 var onDelete = async () => {
@@ -308,9 +247,10 @@ var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.create
 
 // src/components/class-manager/global-classes-list.tsx
 import * as React5 from "react";
-import { stylesRepository } from "@elementor/editor-styles-repository";
+import { validateStyleLabel } from "@elementor/editor-styles-repository";
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
+import { __useDispatch as useDispatch } from "@elementor/store";
 import {
   bindMenu,
   bindTrigger,
@@ -325,7 +265,7 @@ import {
   Typography as Typography3,
   usePopupState
 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __3 } from "@wordpress/i18n";
 
 // src/hooks/use-classes-order.ts
 import { __useSelector as useSelector2 } from "@elementor/store";
@@ -352,7 +292,7 @@ import {
   DialogTitle,
   Typography as Typography2
 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __2 } from "@wordpress/i18n";
 var context = createContext(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = useState2(null);
@@ -371,10 +311,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" }), __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(
+  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(
     "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 }, __3("Not now", "elementor")), /* @__PURE__ */ React3.createElement(Button, { variant: "contained", color: "error", onClick: onConfirm }, __3("Delete", "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"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = useContext(context);
@@ -453,13 +393,21 @@ var SortableItemIndicator = styled(Box2)`
 // src/components/class-manager/global-classes-list.tsx
 var GlobalClassesList = ({ disabled }) => {
   const cssClasses = useOrderedClasses();
+  const dispatch4 = useDispatch();
   const [classesOrder, reorderClasses] = useReorder();
   if (!cssClasses?.length) {
     return /* @__PURE__ */ React5.createElement(EmptyState, null);
   }
   return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id: id2, label }) => {
     const renameClass = (newLabel) => {
-      globalClassesStylesProvider.actions.update({ label: newLabel, id: id2 });
+      dispatch4(
+        slice.actions.update({
+          style: {
+            id: id2,
+            label: newLabel
+          }
+        })
+      );
     };
     return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React5.createElement(
       ClassItem,
@@ -475,9 +423,10 @@ var GlobalClassesList = ({ disabled }) => {
   }))));
 };
 var useReorder = () => {
+  const dispatch4 = useDispatch();
   const order = useClassesOrder();
   const reorder = (newIds) => {
-    globalClassesStylesProvider.actions.setOrder(newIds);
+    dispatch4(slice.actions.setOrder(newIds));
   };
   return [order, reorder];
 };
@@ -527,7 +476,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
       {
         placement: "top",
         className: "class-item-more-actions",
-        title: __4("More actions", "elementor")
+        title: __3("More actions", "elementor")
       },
       /* @__PURE__ */ React5.createElement(IconButton, { size: "tiny", ...bindTrigger(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
     )
@@ -553,7 +502,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __4("Rename", "elementor"))
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "text.primary" } }, __3("Rename", "elementor"))
     ),
     /* @__PURE__ */ React5.createElement(
       MenuListItem,
@@ -563,7 +512,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __4("Delete", "elementor"))
+      /* @__PURE__ */ React5.createElement(Typography3, { variant: "caption", sx: { color: "error.light" } }, __3("Delete", "elementor"))
     )
   ));
 };
@@ -592,7 +541,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" }, __4("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(Typography3, { align: "center", variant: "caption", color: "text.secondary" }, __4(
+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(
   "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"
 )));
@@ -623,15 +572,23 @@ var getIndicatorBorder = ({ isActive, isError, theme }) => {
   return "none";
 };
 var validateLabel = (newLabel) => {
-  if (!stylesRepository.isLabelValid(newLabel)) {
-    return __4("Invalid format", "elementor");
+  const result = validateStyleLabel(newLabel);
+  if (result.isValid) {
+    return null;
   }
-  if (stylesRepository.isLabelExist(newLabel)) {
-    return __4("Name exists", "elementor");
-  }
-  return null;
+  return result.error;
 };
 
+// src/components/class-manager/panel-interactions.ts
+function blockPanelInteractions() {
+  const extendedWindow = window;
+  extendedWindow.$e?.components?.get?.("panel")?.blockUserInteractions?.();
+}
+function unblockPanelInteractions() {
+  const extendedWindow = window;
+  extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
+}
+
 // src/components/class-manager/save-changes-dialog.tsx
 import * as React6 from "react";
 import { useState as useState3 } from "react";
@@ -678,9 +635,11 @@ var { panel, usePanelActions } = createPanel({
   allowedEditModes: ["edit", id],
   onOpen: () => {
     changeEditMode(id);
+    blockPanelInteractions();
   },
   onClose: () => {
     changeEditMode("edit");
+    unblockPanelInteractions();
   }
 });
 function ClassManagerPanel() {
@@ -689,7 +648,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" }), __5("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" }), __4("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -713,17 +672,17 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    __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(
+    __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(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: __5("Cancel", "elementor"),
+          label: __4("Cancel", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __5("Save & Continue", "elementor"),
+          label: __4("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -735,7 +694,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, __5("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, __4("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   useEffect(() => {
@@ -775,7 +734,7 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(Tooltip2, { title: __6("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(IconButton3, { onClick: handleOpenPanel }, /* @__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(
+  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(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
   ))), /* @__PURE__ */ React8.createElement(
@@ -783,11 +742,11 @@ var ClassManagerButton = () => {
     {
       actions: {
         cancel: {
-          label: __6("Stay here", "elementor"),
+          label: __5("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __6("Save & Continue", "elementor"),
+          label: __5("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -801,18 +760,80 @@ var ClassManagerButton = () => {
 
 // src/components/populate-store.tsx
 import { useEffect as useEffect2 } from "react";
-import { __useDispatch as useDispatch } from "@elementor/store";
+import { __useDispatch as useDispatch2 } from "@elementor/store";
 function PopulateStore() {
-  const dispatch3 = useDispatch();
+  const dispatch4 = useDispatch2();
   useEffect2(() => {
     apiClient.all().then((res) => {
       const { data, meta } = res.data;
-      dispatch3(slice.actions.init({ items: data, order: meta.order }));
+      dispatch4(slice.actions.init({ items: data, order: meta.order }));
     });
-  }, [dispatch3]);
+  }, [dispatch4]);
   return null;
 }
 
+// src/global-classes-styles-provider.ts
+import { generateId } from "@elementor/editor-styles";
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+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),
+    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";
@@ -845,7 +866,7 @@ function isDirty() {
 function init() {
   registerSlice(slice);
   registerPanel(panel);
-  stylesRepository2.register(globalClassesStylesProvider);
+  stylesRepository.register(globalClassesStylesProvider);
   injectIntoLogic({
     id: "global-classes-populate-store",
     component: PopulateStore
@@ -858,7 +879,7 @@ function init() {
     syncWithDocumentSave();
   });
 }
-
-// src/index.ts
-init();
+export {
+  init
+};
 //# sourceMappingURL=index.mjs.map