@elementor/editor-global-classes 4.0.0-564 → 4.0.0-591

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,17 +593,18 @@ 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");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+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");
@@ -1247,6 +1248,7 @@ var React15 = __toESM(require("react"));
 var import_react6 = require("react");
 var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
 var import_editor_ui8 = require("@elementor/editor-ui");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons9 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
 var import_i18n11 = require("@wordpress/i18n");
@@ -1611,7 +1613,9 @@ var ClassItem = ({
   selected,
   disabled,
   sortableTriggerProps,
-  showSortIndicator
+  showSortIndicator,
+  syncToV3,
+  onToggleSync
 }) => {
   const itemRef = (0, import_react6.useRef)(null);
   const {
@@ -1700,6 +1704,16 @@ var ClassItem = ({
       },
       /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n11.__)("Rename", "elementor"))
     ),
+    (0, import_editor_v1_adapters2.isExperimentActive)("e_design_system_sync") && onToggleSync && /* @__PURE__ */ React15.createElement(
+      import_editor_ui8.MenuListItem,
+      {
+        onClick: () => {
+          popupState.close();
+          onToggleSync(id2, !syncToV3);
+        }
+      },
+      /* @__PURE__ */ React15.createElement(import_ui12.Typography, { variant: "caption", sx: { color: "text.primary" } }, syncToV3 ? (0, import_i18n11.__)("Stop syncing to Version 3", "elementor") : (0, import_i18n11.__)("Sync to Version 3", "elementor"))
+    ),
     /* @__PURE__ */ React15.createElement(
       import_editor_ui8.MenuListItem,
       {
@@ -1880,7 +1894,7 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
 );
 
 // src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = ({ disabled }) => {
+var GlobalClassesList = ({ disabled, onStopSyncRequest, onStartSyncRequest }) => {
   const {
     search: { debouncedValue: searchValue }
   } = useSearchAndFilters();
@@ -1924,27 +1938,27 @@ var GlobalClassesList = ({ disabled }) => {
       onChange: reorderClasses,
       disableDragOverlay: !allowSorting
     },
-    filteredCssClasses?.map(({ id: id2, label }) => /* @__PURE__ */ React17.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
+    filteredCssClasses?.map((cssClass) => /* @__PURE__ */ React17.createElement(SortableItem, { key: cssClass.id, id: cssClass.id }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => {
       if (isDragged && !draggedItemId) {
-        setDraggedItemId(id2);
+        setDraggedItemId(cssClass.id);
       }
       return /* @__PURE__ */ React17.createElement(
         ClassItem,
         {
-          id: id2,
-          label,
+          id: cssClass.id,
+          label: cssClass.label,
           renameClass: (newLabel) => {
             trackGlobalClasses({
               event: "classRenamed",
-              classId: id2,
-              oldValue: label,
+              classId: cssClass.id,
+              oldValue: cssClass.label,
               newValue: newLabel,
               source: "class-manager"
             });
             dispatch5(
               slice.actions.update({
                 style: {
-                  id: id2,
+                  id: cssClass.id,
                   label: newLabel
                 }
               })
@@ -1956,7 +1970,24 @@ var GlobalClassesList = ({ disabled }) => {
             ...triggerProps,
             style: triggerStyle
           },
-          showSortIndicator: allowSorting
+          showSortIndicator: allowSorting,
+          syncToV3: cssClass.sync_to_v3,
+          onToggleSync: (id2, newValue) => {
+            if (!newValue && onStopSyncRequest) {
+              onStopSyncRequest(id2);
+            } else if (newValue && onStartSyncRequest) {
+              onStartSyncRequest(id2);
+            } else {
+              dispatch5(
+                slice.actions.update({
+                  style: {
+                    id: id2,
+                    sync_to_v3: newValue
+                  }
+                })
+              );
+            }
+          }
         }
       );
     }))
@@ -2024,13 +2055,47 @@ 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)();
   const documentsManager = (0, import_editor_documents3.getV1DocumentsManager)();
   documentsManager.invalidateCache();
-  return (0, import_editor_v1_adapters2.__privateRunCommand)("editor/documents/switch", {
+  return (0, import_editor_v1_adapters3.__privateRunCommand)("editor/documents/switch", {
     id: currentDocument?.id,
     shouldScroll: false,
     shouldNavigateToDefaultRoute: false
@@ -2041,11 +2106,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_adapters3.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: async () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
+    (0, import_editor_v1_adapters3.changeEditMode)("edit");
     await reloadDocument();
     unblockPanelInteractions();
   },
@@ -2055,13 +2120,48 @@ 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_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_react9.useCallback)((classId) => {
+    (0, import_store20.__dispatch)(
+      slice.actions.update({
+        style: {
+          id: classId,
+          sync_to_v3: false
+        }
+      })
+    );
+    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" },
@@ -2074,7 +2174,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React18.createElement(
+  ))), /* @__PURE__ */ React19.createElement(
     import_editor_panels.PanelBody,
     {
       sx: {
@@ -2083,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: {
@@ -2094,10 +2194,17 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React18.createElement(GlobalClassesList, { disabled: isPublishing })
+      /* @__PURE__ */ React19.createElement(
+        GlobalClassesList,
+        {
+          disabled: isPublishing,
+          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",
@@ -2107,19 +2214,33 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n14.__)("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), 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(
+    (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__ */ 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();
@@ -2130,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();
@@ -2160,14 +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 }) => {
+  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 = () => {
@@ -2200,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();
@@ -2227,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 = () => {
@@ -2250,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,
@@ -2264,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;
@@ -2277,21 +2416,21 @@ function createClassName(prefix) {
 }
 
 // src/components/open-panel-from-url.tsx
-var import_react9 = require("react");
-var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
+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) {
       return;
     }
-    const cleanup = (0, import_editor_v1_adapters3.__privateListenTo)((0, import_editor_v1_adapters3.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
+    const cleanup = (0, import_editor_v1_adapters4.__privateListenTo)((0, import_editor_v1_adapters4.routeOpenEvent)(DEFAULT_PANEL_ROUTE), () => {
       if (hasOpened.current) {
         return;
       }
@@ -2306,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;
@@ -2775,13 +2914,13 @@ var initMcpIntegration = () => {
 };
 
 // src/sync-with-document.tsx
-var import_react11 = require("react");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+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_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 var import_store24 = require("@elementor/store");
 function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
@@ -2797,8 +2936,8 @@ function syncDirtyState() {
   });
 }
 function bindSaveAction(panelActions) {
-  (0, import_editor_v1_adapters4.registerDataHook)("dependency", "document/save/save", (args) => {
-    const user = (0, import_editor_current_user2.getCurrentUser)();
+  (0, import_editor_v1_adapters5.registerDataHook)("dependency", "document/save/save", (args) => {
+    const user = (0, import_editor_current_user3.getCurrentUser)();
     const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
     if (!canEdit) {
       return true;
@@ -2817,8 +2956,8 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
-  (0, import_react11.useEffect)(() => {
-    (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
+  (0, import_react12.useEffect)(() => {
+    (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
       syncWithDocumentSave(panelActions);
     });
   }, []);