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

package/dist/index.mjs

@@ -540,7 +540,7 @@ import { stylesRepository } from "@elementor/editor-styles-repository";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import {
   __useActiveDocument as useActiveDocument2,
   __useActiveDocumentActions as useActiveDocumentActions
@@ -548,7 +548,7 @@ import {
 import { useUserStylesCapability } from "@elementor/editor-styles-repository";
 import { SaveChangesDialog as SaveChangesDialog2, useDialog as useDialog2 } from "@elementor/editor-ui";
 import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 
 // src/hooks/use-prefetch-css-class-usage.ts
 import { useQueryClient } from "@elementor/query";
@@ -572,8 +572,9 @@ var PrefetchCssClassUsage = () => {
 };
 
 // src/components/class-manager/class-manager-panel.tsx
-import * as React18 from "react";
-import { useCallback, useEffect as useEffect3, useState as useState6 } from "react";
+import * as React19 from "react";
+import { useCallback, useEffect as useEffect3, useState as useState7 } from "react";
+import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { getCurrentDocument, getV1DocumentsManager, setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
   __createPanel as createPanel,
@@ -590,8 +591,8 @@ import { useMutation } from "@elementor/query";
 import { __dispatch as dispatch4 } from "@elementor/store";
 import {
   Alert as Alert2,
-  Box as Box10,
-  Button as Button2,
+  Box as Box11,
+  Button as Button3,
   Chip as Chip4,
   DialogHeader as DialogHeader2,
   Divider as Divider4,
@@ -599,7 +600,7 @@ import {
   IconButton as IconButton4,
   Stack as Stack9
 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/hooks/use-classes-order.ts
 import { __useSelector as useSelector } from "@elementor/store";
@@ -1940,7 +1941,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();
@@ -2021,6 +2022,8 @@ var GlobalClassesList = ({ disabled, onStopSyncRequest }) => {
           onToggleSync: (id2, newValue) => {
             if (!newValue && onStopSyncRequest) {
               onStopSyncRequest(id2);
+            } else if (newValue && onStartSyncRequest) {
+              onStartSyncRequest(id2);
             } else {
               dispatch5(
                 slice.actions.update({
@@ -2099,7 +2102,50 @@ function unblockPanelInteractions() {
   extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
 }
 
+// src/components/class-manager/start-sync-to-v3-modal.tsx
+import * as React18 from "react";
+import { useState as useState6 } from "react";
+import {
+  Box as Box10,
+  Button as Button2,
+  Checkbox as Checkbox2,
+  Dialog,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
+  FormControlLabel,
+  Typography as Typography9
+} from "@elementor/ui";
+import { __ as __14 } from "@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] = useState6(true);
+  const handleClose = () => {
+    onExternalClose?.();
+  };
+  const handleConfirm = () => {
+    onConfirm?.();
+    onExternalClose?.();
+  };
+  return /* @__PURE__ */ React18.createElement(Dialog, { open: !!externalOpen, onClose: handleClose, maxWidth: "sm", fullWidth: true }, /* @__PURE__ */ React18.createElement(DialogContent2, { sx: { p: 0 } }, /* @__PURE__ */ React18.createElement(Box10, { component: "img", src: IMAGE_URL, alt: "", sx: { width: "100%", display: "block" } }), /* @__PURE__ */ React18.createElement(Box10, { sx: { px: 3, pt: 4, pb: 1 } }, /* @__PURE__ */ React18.createElement(Typography9, { variant: "h6" }, __14("Sync class to version 3 Global Fonts", "elementor")), /* @__PURE__ */ React18.createElement(Typography9, { variant: "body2", color: "secondary", sx: { mb: 2, pt: 1 } }, __14(
+    "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(DialogActions2, { sx: { justifyContent: "space-between", px: 3, pb: 2 } }, /* @__PURE__ */ React18.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React18.createElement(
+        Checkbox2,
+        {
+          checked: !shouldShowAgain,
+          onChange: (e) => setShouldShowAgain(!e.target.checked)
+        }
+      ),
+      label: /* @__PURE__ */ React18.createElement(Typography9, { variant: "body2", color: "secondary" }, __14("Don't show again", "elementor"))
+    }
+  ), /* @__PURE__ */ React18.createElement(Box10, { sx: { display: "flex", gap: 1 } }, /* @__PURE__ */ React18.createElement(Button2, { onClick: handleClose, color: "secondary", size: "small" }, __14("Cancel", "elementor")), /* @__PURE__ */ React18.createElement(Button2, { onClick: handleConfirm, variant: "contained", size: "small" }, __14("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 = getCurrentDocument();
@@ -2130,7 +2176,9 @@ function ClassManagerPanel() {
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
-  const [stopSyncConfirmation, setStopSyncConfirmation] = useState6(null);
+  const [stopSyncConfirmation, setStopSyncConfirmation] = useState7(null);
+  const [startSyncConfirmation, setStartSyncConfirmation] = useState7(null);
+  const [isStopSyncSuppressed] = useSuppressedMessage2(STOP_SYNC_MESSAGE_KEY);
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
   const resetAndClosePanel = () => {
     dispatch4(slice.actions.resetToInitialState({ context: "frontend" }));
@@ -2147,8 +2195,29 @@ function ClassManagerPanel() {
     );
     setStopSyncConfirmation(null);
   }, []);
+  const handleStartSync = useCallback((classId) => {
+    dispatch4(
+      slice.actions.update({
+        style: {
+          id: classId,
+          sync_to_v3: true
+        }
+      })
+    );
+    setStartSyncConfirmation(null);
+  }, []);
+  const handleStopSyncRequest = useCallback(
+    (classId) => {
+      if (!isStopSyncSuppressed) {
+        setStopSyncConfirmation(classId);
+      } else {
+        handleStopSync(classId);
+      }
+    },
+    [isStopSyncSuppressed, handleStopSync]
+  );
   usePreventUnload();
-  return /* @__PURE__ */ React18.createElement(ThemeProvider, null, /* @__PURE__ */ React18.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React18.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React18.createElement(Panel, null, /* @__PURE__ */ React18.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React18.createElement(PanelHeader, null, /* @__PURE__ */ React18.createElement(Stack9, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React18.createElement(Stack9, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React18.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __14("Class Manager", "elementor")), /* @__PURE__ */ React18.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(ThemeProvider, null, /* @__PURE__ */ React19.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React19.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React19.createElement(Panel, null, /* @__PURE__ */ React19.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React19.createElement(PanelHeader, null, /* @__PURE__ */ React19.createElement(Stack9, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React19.createElement(Stack9, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React19.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __15("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -2161,7 +2230,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React18.createElement(
+  ))), /* @__PURE__ */ React19.createElement(
     PanelBody,
     {
       sx: {
@@ -2170,10 +2239,10 @@ function ClassManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React18.createElement(Box10, { px: 2, pb: 1 }, /* @__PURE__ */ React18.createElement(Stack9, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React18.createElement(Box10, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React18.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React18.createElement(CssClassFilter, null)), /* @__PURE__ */ React18.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React18.createElement(Divider4, null),
-    /* @__PURE__ */ React18.createElement(
-      Box10,
+    /* @__PURE__ */ React19.createElement(Box11, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(Stack9, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(Box11, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React19.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React19.createElement(CssClassFilter, null)), /* @__PURE__ */ React19.createElement(ActiveFilters, null)),
+    /* @__PURE__ */ React19.createElement(Divider4, null),
+    /* @__PURE__ */ React19.createElement(
+      Box11,
       {
         px: 2,
         sx: {
@@ -2181,16 +2250,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(PanelFooter, null, /* @__PURE__ */ React18.createElement(
-    Button2,
+  ), /* @__PURE__ */ React19.createElement(PanelFooter, null, /* @__PURE__ */ React19.createElement(
+    Button3,
     {
       fullWidth: true,
       size: "small",
@@ -2200,26 +2270,33 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    __14("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React18.createElement(ClassManagerIntroduction, null), stopSyncConfirmation && /* @__PURE__ */ React18.createElement(
+    __15("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(SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(DialogHeader2, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React18.createElement(SaveChangesDialog.Title, null, __14("You have unsaved changes", "elementor"))), /* @__PURE__ */ React18.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.ContentText, null, __14("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React18.createElement(SaveChangesDialog.ContentText, null, __14("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React18.createElement(
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(DialogHeader2, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(SaveChangesDialog.Title, null, __15("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __15("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __15("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: __14("Discard", "elementor"),
+          label: __15("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: __14("Save & Continue", "elementor"),
+          label: __15("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -2230,8 +2307,8 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React18.createElement(IconButton4, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React18.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React18.createElement(Box10, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React18.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React18.createElement("strong", null, __14("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createElement(IconButton4, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React19.createElement(XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(Box11, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, __15("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   useEffect3(() => {
@@ -2260,7 +2337,7 @@ var usePublish = () => {
 var TotalCssClassCounter = () => {
   const filters = useFilters();
   const cssClasses = useClassesOrder();
-  return /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Chip4,
     {
       size: "small",
@@ -2268,19 +2345,24 @@ var TotalCssClassCounter = () => {
     }
   );
 };
-var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => /* @__PURE__ */ React18.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React18.createElement(ConfirmationDialog2.Title, { icon: FlippedColorSwatchIcon, iconColor: "secondary" }, __14("Un-sync typography class", "elementor")), /* @__PURE__ */ React18.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React18.createElement(ConfirmationDialog2.ContentText, null, __14("You're about to stop syncing a typography class to Version 3.", "elementor")), /* @__PURE__ */ React18.createElement(ConfirmationDialog2.ContentText, { sx: { mt: 1 } }, __14(
-  "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
-  "elementor"
-))), /* @__PURE__ */ React18.createElement(
-  ConfirmationDialog2.Actions,
-  {
-    onClose,
-    onConfirm,
-    cancelLabel: __14("Cancel", "elementor"),
-    confirmLabel: __14("Got it", "elementor"),
-    color: "secondary"
-  }
-));
+var StopSyncConfirmationDialog = ({ open, onClose, onConfirm }) => {
+  const [, suppressStopSyncMessage] = useSuppressedMessage2(STOP_SYNC_MESSAGE_KEY);
+  return /* @__PURE__ */ React19.createElement(ConfirmationDialog2, { open, onClose }, /* @__PURE__ */ React19.createElement(ConfirmationDialog2.Title, { icon: FlippedColorSwatchIcon, iconColor: "primary" }, __15("Un-sync typography class", "elementor")), /* @__PURE__ */ React19.createElement(ConfirmationDialog2.Content, null, /* @__PURE__ */ React19.createElement(ConfirmationDialog2.ContentText, null, __15("You're about to stop syncing a typography class to version 3.", "elementor")), /* @__PURE__ */ React19.createElement(ConfirmationDialog2.ContentText, { sx: { mt: 1 } }, __15(
+    "Note that if it's being used anywhere, the affected elements will inherit the default typography.",
+    "elementor"
+  ))), /* @__PURE__ */ React19.createElement(
+    ConfirmationDialog2.Actions,
+    {
+      onClose,
+      onConfirm,
+      cancelLabel: __15("Cancel", "elementor"),
+      confirmLabel: __15("Got it", "elementor"),
+      color: "primary",
+      onSuppressMessage: suppressStopSyncMessage,
+      suppressLabel: __15("Don't show again", "elementor")
+    }
+  ));
+};
 
 // src/components/class-manager/class-manager-button.tsx
 var trackGlobalClassesButton = () => {
@@ -2313,19 +2395,19 @@ var ClassManagerButton = () => {
     });
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(Tooltip6, { title: __15("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React19.createElement(IconButton5, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React19.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog2.Title, null, __15("You have unsaved changes", "elementor")), /* @__PURE__ */ React19.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __15(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip6, { title: __16("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React20.createElement(IconButton5, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React20.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React20.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Title, null, __16("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __16(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React19.createElement(
+  ))), /* @__PURE__ */ React20.createElement(
     SaveChangesDialog2.Actions,
     {
       actions: {
         cancel: {
-          label: __15("Stay here", "elementor"),
+          label: __16("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __15("Save & Continue", "elementor"),
+          label: __16("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -2340,11 +2422,11 @@ var ClassManagerButton = () => {
 };
 
 // src/components/convert-local-class-to-global-class.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { validateStyleLabel as validateStyleLabel2 } from "@elementor/editor-styles-repository";
 import { MenuListItem as MenuListItem2 } from "@elementor/editor-ui";
 import { Divider as Divider5 } from "@elementor/ui";
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 var ConvertLocalClassToGlobalClass = (props) => {
   const localStyleData = props.styleDef;
   const handleConversion = () => {
@@ -2363,7 +2445,7 @@ var ConvertLocalClassToGlobalClass = (props) => {
       });
     }
   };
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     MenuListItem2,
     {
       disabled: !props.canConvert,
@@ -2377,8 +2459,8 @@ var ConvertLocalClassToGlobalClass = (props) => {
         }
       }
     },
-    __16("Convert to global class", "elementor")
-  ), /* @__PURE__ */ React20.createElement(Divider5, null));
+    __17("Convert to global class", "elementor")
+  ), /* @__PURE__ */ React21.createElement(Divider5, null));
 };
 function createClassName(prefix) {
   let i = 1;