@elementor/editor-global-classes 4.0.0-573 → 4.0.0-597

package/dist/index.js

@@ -564,12 +564,12 @@ var import_editor_styles_repository5 = require("@elementor/editor-styles-reposit
 var import_store26 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_editor_documents4 = require("@elementor/editor-documents");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
 var import_editor_ui10 = require("@elementor/editor-ui");
-var import_ui16 = require("@elementor/ui");
-var import_i18n15 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_i18n16 = require("@wordpress/i18n");
 
 // src/hooks/use-prefetch-css-class-usage.ts
 var import_query = require("@elementor/query");
@@ -593,8 +593,9 @@ var PrefetchCssClassUsage = () => {
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-var React18 = __toESM(require("react"));
-var import_react8 = require("react");
+var React19 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui9 = require("@elementor/editor-ui");
@@ -602,8 +603,8 @@ var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons11 = require("@elementor/icons");
 var import_query3 = require("@elementor/query");
 var import_store20 = require("@elementor/store");
-var import_ui15 = require("@elementor/ui");
-var import_i18n14 = require("@wordpress/i18n");
+var import_ui16 = require("@elementor/ui");
+var import_i18n15 = require("@wordpress/i18n");
 
 // src/hooks/use-classes-order.ts
 var import_store6 = require("@elementor/store");
@@ -1893,7 +1894,7 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
 );
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = ({ disabled, onStopSyncRequest }) => {
+var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) => {
   const {
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
@@ -1974,6 +1975,8 @@ var GlobalClassesList = ({ disabled, onStopSyncRequest }) => {
           onToggleSync: (id2, newValue) => {
             if (!newValue && onStopSyncRequest) {
               onStopSyncRequest(id2);
+            } else if (newValue && onStartSyncRequest) {
+              onStartSyncRequest(id2);
             } else {
               dispatch5(
                 slice.actions.update({
@@ -2052,7 +2055,41 @@ function unblockPanelInteractions() {
   extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
 }
 
+// src/components/class-manager/start-sync-to-v3-modal.tsx
+var React18 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_ui15 = require("@elementor/ui");
+var import_i18n14 = require("@wordpress/i18n");
+var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
+var StartSyncToV3Modal = ({ externalOpen, onExternalClose, onConfirm } = {}) => {
+  const [shouldShowAgain, setShouldShowAgain] = (0, import_react8.useState)(true);
+  const handleClose = () => {
+    onExternalClose?.();
+  };
+  const handleConfirm = () => {
+    onConfirm?.();
+    onExternalClose?.();
+  };
+  return /* @__PURE__ */ React18.createElement(import_ui15.Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(import_ui15.DialogContent, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "h6" }, (0, import_i18n14.__)("Sync class to version 3 Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, (0, import_i18n14.__)(
+    "Only typography settings supported in version 3 will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to version 3.",
+    "elementor"
+  )))), /* @__PURE__ */ React18.createElement(import_ui15.DialogActions, { sx: { justifyContent: "space-between", px: 3, pb: 2 } }, /* @__PURE__ */ React18.createElement(
+    import_ui15.FormControlLabel,
+    {
+      control: /* @__PURE__ */ React18.createElement(
+        import_ui15.Checkbox,
+        {
+          checked: !shouldShowAgain,
+          onChange: (e) => setShouldShowAgain(!e.target.checked)
+        }
+      ),
+      label: /* @__PURE__ */ React18.createElement(import_ui15.Typography, { variant: "body2", color: "secondary" }, (0, import_i18n14.__)("Don't show again", "elementor"))
+    }
+  ), /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleClose, color: "secondary", size: "small" }, (0, import_i18n14.__)("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(import_ui15.Button, { onClick: handleConfirm, variant: "contained", size: "small" }, (0, import_i18n14.__)("Sync to version 3", "elementor")))));
+};
+
 // src/components/class-manager/class-manager-panel.tsx
+var STOP_SYNC_MESSAGE_KEY = "stop-sync-class";
 var id = "global-classes-manager";
 var reloadDocument = () => {
   const currentDocument = (0, import_editor_documents3.getCurrentDocument)();
@@ -2083,13 +2120,15 @@ function ClassManagerPanel() {
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui9.useDialog)();
-  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react8.useState)(null);
+  const [stopSyncConfirmation, setStopSyncConfirmation] = (0, import_react9.useState)(null);
+  const [startSyncConfirmation, setStartSyncConfirmation] = (0, import_react9.useState)(null);
+  const [isStopSyncSuppressed] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     (0, import_store20.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
     closeSaveChangesDialog();
   };
-  const handleStopSync = (0, import_react8.useCallback)((classId) => {
+  const handleStopSync = (0, import_react9.useCallback)((classId) => {
     (0, import_store20.__dispatch)(
       slice.actions.update({
         style: {
@@ -2100,8 +2139,29 @@ function ClassManagerPanel() {
     );
     setStopSyncConfirmation(null);
   }, []);
+  const handleStartSync = (0, import_react9.useCallback)((classId) => {
+    (0, import_store20.__dispatch)(
+      slice.actions.update({
+        style: {
+          id: classId,
+          sync_to_v3: true
+        }
+      })
+    );
+    setStartSyncConfirmation(null);
+  }, []);
+  const handleStopSyncRequest = (0, import_react9.useCallback)(
+    (classId) => {
+      if (!isStopSyncSuppressed) {
+        setStopSyncConfirmation(classId);
+      } else {
+        handleStopSync(classId);
+      }
+    },
+    [isStopSyncSuppressed, handleStopSync]
+  );
   usePreventUnload();
-  return /* @__PURE__ */ React18.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React18.createElement(import_ui15.ErrorBoundary, { fallback: /* @__PURE__ */ React18.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React18.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React18.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n14.__)("Class Manager", "elementor")), /* @__PURE__ */ React18.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ThemeProvider, null, /* @__PURE__ */ React19.createElement(import_ui16.ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n15.__)("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -2114,7 +2174,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React18.createElement(
+  ))), /* @__PURE__ */ React19.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -2123,10 +2183,10 @@ function ClassManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React18.createElement(import_ui15.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React18.createElement(import_ui15.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React18.createElement(import_ui15.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React18.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React18.createElement(CssClassFilter, null)), /* @__PURE__ */ React18.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React18.createElement(import_ui15.Divider, null),
-    /* @__PURE__ */ React18.createElement(
-      import_ui15.Box,
+    /* @__PURE__ */ React19.createElement(import_ui16.Box, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(import_ui16.Stack, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(import_ui16.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
+    /* @__PURE__ */ React19.createElement(import_ui16.Divider, null),
+    /* @__PURE__ */ React19.createElement(
+      import_ui16.Box,
       {
         px: 2,
         sx: {
@@ -2134,16 +2194,17 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React18.createElement(
+      /* @__PURE__ */ React19.createElement(
         GlobalClassesList,
         {
           disabled: isPublishing,
-          onStopSyncRequest: (classId) => setStopSyncConfirmation(classId)
+          onStopSyncRequest: handleStopSyncRequest,
+          onStartSyncRequest: (classId) => setStartSyncConfirmation(classId)
         }
       )
     )
-  ), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React18.createElement(
-    import_ui15.Button,
+  ), /* @__PURE__ */ React19.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React19.createElement(
+    import_ui16.Button,
     {
       fullWidth: true,
       size: "small",
@@ -2153,26 +2214,33 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n14.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), stopSyncConfirmation && /* @__PURE__ */ React18.createElement(
+    (0, import_i18n15.__)("Save changes", "elementor")
+  ))))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), startSyncConfirmation && /* @__PURE__ */ React19.createElement(
+    StartSyncToV3Modal,
+    {
+      externalOpen: true,
+      onExternalClose: () => setStartSyncConfirmation(null),
+      onConfirm: () => handleStartSync(startSyncConfirmation)
+    }
+  ), stopSyncConfirmation && /* @__PURE__ */ React19.createElement(
     StopSyncConfirmationDialog,
     {
       open: true,
       onClose: () => setStopSyncConfirmation(null),
       onConfirm: () => handleStopSync(stopSyncConfirmation)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(import_ui15.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n14.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n14.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React18.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_ui16.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n15.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.SaveChangesDialog.ContentText, null, (0, import_i18n15.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
     import_editor_ui9.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: (0, import_i18n14.__)("Discard", "elementor"),
+          label: (0, import_i18n15.__)("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: (0, import_i18n14.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n15.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -2183,11 +2251,11 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React18.createElement(import_ui15.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React18.createElement(import_icons11.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React18.createElement(import_ui15.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React18.createElement(import_ui15.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React18.createElement("strong", null, (0, import_i18n14.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React19.createElement(import_icons11.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(import_ui16.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(import_ui16.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, (0, import_i18n15.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -2213,27 +2281,32 @@ var usePublish = () => {
 var TotalCssClassCounter = () => {
   const filters = useFilters();
   const cssClasses = useClassesOrder();
-  return /* @__PURE__ */ React18.createElement(
-    import_ui15.Chip,
+  return /* @__PURE__ */ React19.createElement(
+    import_ui16.Chip,
     {
       size: "small",
       label: filters ? `${filters.length} / ${cssClasses?.length}` : cssClasses?.length
     }
   );
 };
-var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "secondary" }, (0, import_i18n14.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n14.__)("You're about to stop syncing a typography class to Version 3.", "elementor")), /* @__PURE__ */ React18.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n14.__)(
-  "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
-  "elementor"
-))), /* @__PURE__ */ React18.createElement(
-  import_editor_ui9.ConfirmationDialog.Actions,
-  {
-    onClose,
-    onConfirm,
-    cancelLabel: (0, import_i18n14.__)("Cancel", "elementor"),
-    confirmLabel: (0, import_i18n14.__)("Got it", "elementor"),
-    color: "secondary"
-  }
-));
+var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
+  const [, suppressStopSyncMessage] = (0, import_editor_current_user2.useSuppressedMessage)(STOP_SYNC_MESSAGE_KEY);
+  return /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog, { open, onClose }, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, (0, import_i18n15.__)("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, null, (0, import_i18n15.__)("You're about to stop syncing a typography class to version 3.", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui9.ConfirmationDialog.ContentText, { sx: { mt: 1 } }, (0, import_i18n15.__)(
+    "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
+    "elementor"
+  ))), /* @__PURE__ */ React19.createElement(
+    import_editor_ui9.ConfirmationDialog.Actions,
+    {
+      onClose,
+      onConfirm,
+      cancelLabel: (0, import_i18n15.__)("Cancel", "elementor"),
+      confirmLabel: (0, import_i18n15.__)("Got it", "elementor"),
+      color: "primary",
+      onSuppressMessage: suppressStopSyncMessage,
+      suppressLabel: (0, import_i18n15.__)("Don't show again", "elementor")
+    }
+  ));
+};
 
 // src/components/class-manager/class-manager-button.tsx
 var trackGlobalClassesButton = () => {
@@ -2266,19 +2339,19 @@ var ClassManagerButton = () => {
     });
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui16.Tooltip, { title: (0, import_i18n15.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React19.createElement(import_ui16.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(import_editor_ui10.SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(import_editor_ui10.SaveChangesDialog.Title, null, (0, import_i18n15.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React19.createElement(import_editor_ui10.SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(import_editor_ui10.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n15.__)(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(import_ui17.Tooltip, { title: (0, import_i18n16.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(import_ui17.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Title, null, (0, import_i18n16.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.Content, null, /* @__PURE__ */ React20.createElement(import_editor_ui10.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n16.__)(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React19.createElement(
+  ))), /* @__PURE__ */ React20.createElement(
     import_editor_ui10.SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n15.__)("Stay here", "elementor"),
+          label: (0, import_i18n16.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n15.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n16.__)("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -2293,11 +2366,11 @@ var ClassManagerButton = () => {
 };
 
 // src/components/convert-local-class-to-global-class.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
 var import_editor_ui11 = require("@elementor/editor-ui");
-var import_ui17 = require("@elementor/ui");
-var import_i18n16 = require("@wordpress/i18n");
+var import_ui18 = require("@elementor/ui");
+var import_i18n17 = require("@wordpress/i18n");
 var ConvertLocalClassToGlobalClass = (props) => {
   const localStyleData = props.styleDef;
   const handleConversion = () => {
@@ -2316,7 +2389,7 @@ var ConvertLocalClassToGlobalClass = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     import_editor_ui11.MenuListItem,
     {
       disabled: !props.canConvert,
@@ -2330,8 +2403,8 @@ var ConvertLocalClassToGlobalClass = (props) => {
         }
       }
     },
-    (0, import_i18n16.__)("Convert to global class", "elementor")
-  ), /* @__PURE__ */ React20.createElement(import_ui17.Divider, null));
+    (0, import_i18n17.__)("Convert to global class", "elementor")
+  ), /* @__PURE__ */ React21.createElement(import_ui18.Divider, null));
 };
 function createClassName(prefix) {
   let i = 1;
@@ -2343,15 +2416,15 @@ function createClassName(prefix) {
 }
 
 // src/components/open-panel-from-url.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = (0, import_react9.useRef)(false);
-  (0, import_react9.useEffect)(() => {
+  const hasOpened = (0, import_react10.useRef)(false);
+  (0, import_react10.useEffect)(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2372,11 +2445,11 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_store22 = require("@elementor/store");
 function PopulateStore() {
   const dispatch5 = (0, import_store22.__useDispatch)();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -2841,11 +2914,11 @@ var initMcpIntegration = () => {
 };
 
 // src/sync-with-document.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 
 // src/sync-with-document-save.ts
-var import_editor_current_user2 = require("@elementor/editor-current-user");
+var import_editor_current_user3 = require("@elementor/editor-current-user");
 var import_editor_documents5 = require("@elementor/editor-documents");
 var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store24 = require("@elementor/store");
@@ -2864,7 +2937,7 @@ function syncDirtyState() {
 }
 function bindSaveAction(panelActions) {
   (0, import_editor_v1_adapters5.registerDataHook)("dependency", "document/save/save", (args) => {
-    const user = (0, import_editor_current_user2.getCurrentUser)();
+    const user = (0, import_editor_current_user3.getCurrentUser)();
     const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
     if (!canEdit) {
       return true;
@@ -2883,7 +2956,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
       syncWithDocumentSave(panelActions);
     });