@elementor/editor-global-classes 3.33.0-116 → 3.33.0-118

package/dist/index.mjs

@@ -7,18 +7,17 @@ import {
 } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 import { __registerSlice as registerSlice } from "@elementor/store";
 
 // src/components/class-manager/class-manager-button.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 import {
   __useActiveDocument as useActiveDocument2,
   __useActiveDocumentActions as useActiveDocumentActions
 } from "@elementor/editor-documents";
 import { useUserStylesCapability } from "@elementor/editor-styles-repository";
 import { IconButton as IconButton5, Tooltip as Tooltip6 } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 
 // src/global-classes-styles-provider.ts
 import { generateId } from "@elementor/editor-styles";
@@ -179,6 +178,13 @@ var slice = createSlice({
       state.data.items[payload.style.id] = mergedData;
       state.isDirty = true;
     },
+    updateMultiple(state, { payload }) {
+      localHistory.next(state.data);
+      Object.entries(payload).forEach(([id2, { modified }]) => {
+        state.data.items[id2].label = modified;
+      });
+      state.isDirty = false;
+    },
     updateProps(state, {
       payload
     }) {
@@ -361,6 +367,9 @@ var apiClient = {
     }
   })
 };
+var API_ERROR_CODES = {
+  DUPLICATED_LABEL: "DUPLICATED_LABEL"
+};
 
 // src/components/css-class-usage/utils.ts
 var transformData = (data) => Object.entries(data).reduce((acc, [key, value]) => {
@@ -391,7 +400,7 @@ function usePrefetchCssClassUsage() {
 }
 
 // src/components/class-manager/class-manager-panel.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 import { useEffect as useEffect2 } from "react";
 import { setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
@@ -408,17 +417,17 @@ import { XIcon } from "@elementor/icons";
 import { useMutation } from "@elementor/query";
 import { __dispatch as dispatch4 } from "@elementor/store";
 import {
-  Alert,
-  Box as Box9,
-  Button as Button3,
+  Alert as Alert2,
+  Box as Box10,
+  Button as Button4,
   Chip as Chip4,
-  DialogHeader,
-  Divider as Divider3,
+  DialogHeader as DialogHeader2,
+  Divider as Divider4,
   ErrorBoundary,
   IconButton as IconButton4,
-  Stack as Stack8
+  Stack as Stack9
 } from "@elementor/ui";
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 
 // src/hooks/use-classes-order.ts
 import { __useSelector as useSelector } from "@elementor/store";
@@ -447,9 +456,17 @@ var INIT_CHECKED_FILTERS = {
 };
 var SearchAndFilterProvider = ({ children }) => {
   const [filters, setFilters] = React.useState(INIT_CHECKED_FILTERS);
+  const getInitialSearchValue = () => {
+    const storedValue = localStorage.getItem("elementor-global-classes-search");
+    if (storedValue) {
+      localStorage.removeItem("elementor-global-classes-search");
+      return storedValue;
+    }
+    return "";
+  };
   const { debouncedValue, inputValue, handleChange } = useDebounceState({
     delay: 300,
-    initialValue: ""
+    initialValue: getInitialSearchValue()
   });
   const onClearSearch = () => {
     handleChange("");
@@ -580,25 +597,146 @@ var useFilters = () => {
   }, [filters, allFilters]);
 };
 
-// src/save-global-classes.ts
+// src/save-global-classes.tsx
+import * as React3 from "react";
+import { openDialog } from "@elementor/editor-ui";
 import { __dispatch as dispatch2, __getState as getState2 } from "@elementor/store";
 import { hash } from "@elementor/utils";
-async function saveGlobalClasses({ context: context2 }) {
+
+// src/components/class-manager/duplicate-label-dialog.tsx
+import * as React2 from "react";
+import { closeDialog, EllipsisWithTooltip } from "@elementor/editor-ui";
+import { InfoCircleFilledIcon } from "@elementor/icons";
+import {
+  Alert,
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogHeader,
+  Divider,
+  Icon,
+  Stack,
+  Typography
+} from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+var DUP_PREFIX = "DUP_";
+var DuplicateLabelDialog = ({
+  modifiedLabels,
+  onApprove
+}) => {
+  const handleButtonClick = () => {
+    localStorage.setItem("elementor-global-classes-search", DUP_PREFIX);
+    onApprove?.();
+    closeDialog();
+  };
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(DialogHeader, { logo: false }, /* @__PURE__ */ React2.createElement(Box, { display: "flex", alignItems: "center", gap: 1 }, /* @__PURE__ */ React2.createElement(Icon, { color: "secondary" }, /* @__PURE__ */ React2.createElement(InfoCircleFilledIcon, { fontSize: "medium" })), /* @__PURE__ */ React2.createElement(Typography, { variant: "subtitle1" }, __2("We've published your page and updated class names.", "elementor")))), /* @__PURE__ */ React2.createElement(DialogContent, null, /* @__PURE__ */ React2.createElement(Stack, { spacing: 2, direction: "column" }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2" }, __2(
+    "Some new classes used the same names as existing ones. To prevent conflicts, we added the prefix",
+    "elementor"
+  ), /* @__PURE__ */ React2.createElement("strong", null, " ", DUP_PREFIX)), /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        display: "flex",
+        gap: 2,
+        alignItems: "flex-start"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      Typography,
+      {
+        variant: "subtitle2",
+        sx: {
+          fontWeight: "bold",
+          flex: 1,
+          flexShrink: 1,
+          flexGrow: 1,
+          minWidth: 0
+        }
+      },
+      __2("Before", "elementor")
+    ),
+    /* @__PURE__ */ React2.createElement(
+      Typography,
+      {
+        variant: "subtitle2",
+        sx: {
+          minWidth: "200px",
+          fontWeight: "bold",
+          flexShrink: 0,
+          flexGrow: 0,
+          width: "200px",
+          maxWidth: "200px"
+        }
+      },
+      __2("After", "elementor")
+    )
+  ), /* @__PURE__ */ React2.createElement(Divider, { sx: { mt: 0.5, mb: 0.5 } }), /* @__PURE__ */ React2.createElement(Stack, { direction: "column", gap: 0.5, sx: { pb: 2 } }, Object.values(modifiedLabels).map(({ original, modified }, index) => /* @__PURE__ */ React2.createElement(
+    Box,
+    {
+      key: index,
+      sx: {
+        width: "100%",
+        display: "flex",
+        gap: 2,
+        alignItems: "flex-start"
+      }
+    },
+    /* @__PURE__ */ React2.createElement(
+      Box,
+      {
+        sx: {
+          flex: 1,
+          flexShrink: 1,
+          flexGrow: 1,
+          minWidth: 0
+        }
+      },
+      /* @__PURE__ */ React2.createElement(EllipsisWithTooltip, { title: original }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2", sx: { color: "text.secondary" } }, original))
+    ),
+    /* @__PURE__ */ React2.createElement(
+      Box,
+      {
+        sx: {
+          minWidth: "200px",
+          flexShrink: 0,
+          flexGrow: 0,
+          width: "200px",
+          maxWidth: "200px"
+        }
+      },
+      /* @__PURE__ */ React2.createElement(EllipsisWithTooltip, { title: modified }, /* @__PURE__ */ React2.createElement(Typography, { variant: "body2", sx: { color: "text.primary" } }, modified))
+    )
+  ))), /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(Alert, { severity: "info", size: "small", color: "secondary" }, /* @__PURE__ */ React2.createElement("strong", null, __2("Your designs and classes are safe.", "elementor")), __2(
+    "Only the prefixes were added.Find them in Class Manager by searching",
+    "elementor"
+  ), /* @__PURE__ */ React2.createElement("strong", null, DUP_PREFIX)))))), /* @__PURE__ */ React2.createElement(DialogActions, null, /* @__PURE__ */ React2.createElement(Button, { color: "secondary", variant: "text", onClick: handleButtonClick }, __2("Go to Class Manager", "elementor")), /* @__PURE__ */ React2.createElement(Button, { color: "secondary", variant: "contained", onClick: closeDialog }, __2("Done", "elementor"))));
+};
+
+// src/save-global-classes.tsx
+async function saveGlobalClasses({ context: context2, onApprove }) {
   const state = selectData(getState2());
-  if (context2 === "preview") {
-    await apiClient.saveDraft({
-      items: state.items,
-      order: state.order,
-      changes: calculateChanges(state, selectPreviewInitialData(getState2()))
-    });
-  } else {
-    await apiClient.publish({
-      items: state.items,
-      order: state.order,
-      changes: calculateChanges(state, selectFrontendInitialData(getState2()))
+  const apiAction = context2 === "preview" ? apiClient.saveDraft : apiClient.publish;
+  const currentContext = context2 === "preview" ? selectPreviewInitialData : selectFrontendInitialData;
+  const response = await apiAction({
+    items: state.items,
+    order: state.order,
+    changes: calculateChanges(state, currentContext(getState2()))
+  });
+  dispatch2(slice.actions.reset({ context: context2 }));
+  if (response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL) {
+    dispatch2(slice.actions.updateMultiple(response.data.data.modifiedLabels));
+    openDialog({
+      component: /* @__PURE__ */ React3.createElement(
+        DuplicateLabelDialog,
+        {
+          modifiedLabels: response.data.data.modifiedLabels || [],
+          onApprove
+        }
+      )
     });
   }
-  dispatch2(slice.actions.reset({ context: context2 }));
 }
 function calculateChanges(state, initialData) {
   const stateIds = Object.keys(state.items);
@@ -613,19 +751,19 @@ function calculateChanges(state, initialData) {
 }
 
 // src/components/search-and-filter/components/filter/active-filters.tsx
-import * as React4 from "react";
-import { Chip as Chip2, Stack as Stack2 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import * as React6 from "react";
+import { Chip as Chip2, Stack as Stack3 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
 
 // src/components/search-and-filter/components/filter/clear-icon-button.tsx
-import * as React2 from "react";
+import * as React4 from "react";
 import { BrushBigIcon } from "@elementor/icons";
-import { Box, IconButton, styled, Tooltip } from "@elementor/ui";
+import { Box as Box2, IconButton, styled, Tooltip } from "@elementor/ui";
 var ClearIconButton = ({ tooltipText, sx }) => {
   const {
     filters: { onClearFilter }
   } = useSearchAndFilters();
-  return /* @__PURE__ */ React2.createElement(Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React2.createElement(Box, null, /* @__PURE__ */ React2.createElement(CustomIconButton, { "aria-label": tooltipText, size: "tiny", onClick: onClearFilter, sx }, /* @__PURE__ */ React2.createElement(BrushBigIcon, { fontSize: "tiny" }))));
+  return /* @__PURE__ */ React4.createElement(Tooltip, { title: tooltipText, placement: "top", disableInteractive: true }, /* @__PURE__ */ React4.createElement(Box2, null, /* @__PURE__ */ React4.createElement(CustomIconButton, { "aria-label": tooltipText, size: "tiny", onClick: onClearFilter, sx }, /* @__PURE__ */ React4.createElement(BrushBigIcon, { fontSize: "tiny" }))));
 };
 var CustomIconButton = styled(IconButton)(({ theme }) => ({
   "&.Mui-disabled": {
@@ -637,13 +775,13 @@ var CustomIconButton = styled(IconButton)(({ theme }) => ({
 }));
 
 // src/components/search-and-filter/components/filter/filter-list.tsx
-import * as React3 from "react";
-import { Checkbox, Chip, MenuItem, MenuList, Stack, Typography } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import * as React5 from "react";
+import { Checkbox, Chip, MenuItem, MenuList, Stack as Stack2, Typography as Typography2 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 var filterConfig = {
-  unused: __2("Unused", "elementor"),
-  empty: __2("Empty", "elementor"),
-  onThisPage: __2("On this page", "elementor")
+  unused: __3("Unused", "elementor"),
+  empty: __3("Empty", "elementor"),
+  onThisPage: __3("On this page", "elementor")
 };
 var FilterList = () => {
   const {
@@ -653,30 +791,30 @@ var FilterList = () => {
   const handleOnClick = (value) => {
     setFilters((prev) => ({ ...prev, [value]: !prev[value] }));
   };
-  return /* @__PURE__ */ React3.createElement(MenuList, null, /* @__PURE__ */ React3.createElement(MenuItem, { onClick: () => handleOnClick("unused") }, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React5.createElement(MenuList, null, /* @__PURE__ */ React5.createElement(MenuItem, { onClick: () => handleOnClick("unused") }, /* @__PURE__ */ React5.createElement(
     LabeledCheckbox,
     {
       label: filterConfig.unused,
       checked: filters.unused,
-      suffix: /* @__PURE__ */ React3.createElement(Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.unused.length })
+      suffix: /* @__PURE__ */ React5.createElement(Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.unused.length })
     }
-  )), /* @__PURE__ */ React3.createElement(MenuItem, { onClick: () => handleOnClick("empty") }, /* @__PURE__ */ React3.createElement(
+  )), /* @__PURE__ */ React5.createElement(MenuItem, { onClick: () => handleOnClick("empty") }, /* @__PURE__ */ React5.createElement(
     LabeledCheckbox,
     {
       label: filterConfig.empty,
       checked: filters.empty,
-      suffix: /* @__PURE__ */ React3.createElement(Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.empty.length })
+      suffix: /* @__PURE__ */ React5.createElement(Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.empty.length })
     }
-  )), /* @__PURE__ */ React3.createElement(MenuItem, { onClick: () => handleOnClick("onThisPage") }, /* @__PURE__ */ React3.createElement(
+  )), /* @__PURE__ */ React5.createElement(MenuItem, { onClick: () => handleOnClick("onThisPage") }, /* @__PURE__ */ React5.createElement(
     LabeledCheckbox,
     {
       label: filterConfig.onThisPage,
       checked: filters.onThisPage,
-      suffix: /* @__PURE__ */ React3.createElement(Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.onThisPage.length })
+      suffix: /* @__PURE__ */ React5.createElement(Chip, { size: "tiny", sx: { ml: "auto" }, label: filteredCssClass.onThisPage.length })
     }
   )));
 };
-var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React3.createElement(Stack, { direction: "row", alignItems: "center", gap: 0.5, flex: 1 }, /* @__PURE__ */ React3.createElement(
+var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React5.createElement(Stack2, { direction: "row", alignItems: "center", gap: 0.5, flex: 1 }, /* @__PURE__ */ React5.createElement(
   Checkbox,
   {
     size: "small",
@@ -689,7 +827,7 @@ var LabeledCheckbox = ({ label, suffix, checked }) => /* @__PURE__ */ React3.cre
       }
     }
   }
-), /* @__PURE__ */ React3.createElement(Typography, { variant: "caption", sx: { color: "text.secondary" } }, label), suffix);
+), /* @__PURE__ */ React5.createElement(Typography2, { variant: "caption", sx: { color: "text.secondary" } }, label), suffix);
 
 // src/components/search-and-filter/components/filter/active-filters.tsx
 var ActiveFilters = () => {
@@ -701,7 +839,7 @@ var ActiveFilters = () => {
   };
   const activeKeys = Object.keys(filters).filter((key) => filters[key]);
   const showClearIcon = activeKeys.length > 0;
-  return /* @__PURE__ */ React4.createElement(Stack2, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React4.createElement(Stack2, { direction: "row", gap: 0.5, alignItems: "center", flexWrap: "wrap" }, activeKeys.map((key) => /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React6.createElement(Stack3, { direction: "row", alignItems: "center", justifyContent: "space-between" }, /* @__PURE__ */ React6.createElement(Stack3, { direction: "row", gap: 0.5, alignItems: "center", flexWrap: "wrap" }, activeKeys.map((key) => /* @__PURE__ */ React6.createElement(
     Chip2,
     {
       key,
@@ -710,10 +848,10 @@ var ActiveFilters = () => {
       sx: chipSx,
       size: "tiny"
     }
-  ))), showClearIcon && /* @__PURE__ */ React4.createElement(
+  ))), showClearIcon && /* @__PURE__ */ React6.createElement(
     ClearIconButton,
     {
-      tooltipText: __3("Clear Filters", "elementor"),
+      tooltipText: __4("Clear Filters", "elementor"),
       sx: { margin: "0 0 auto auto" }
     }
   ));
@@ -729,11 +867,11 @@ var chipSx = {
 };
 
 // src/components/search-and-filter/components/filter/css-class-filter.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 import { PopoverBody, PopoverHeader } from "@elementor/editor-ui";
 import { FilterIcon } from "@elementor/icons";
-import { bindPopover, bindToggle, Divider, Popover, ToggleButton, Tooltip as Tooltip2, usePopupState } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { bindPopover, bindToggle, Divider as Divider2, Popover, ToggleButton, Tooltip as Tooltip2, usePopupState } from "@elementor/ui";
+import { __ as __5 } from "@wordpress/i18n";
 var CssClassFilter = () => {
   const {
     filters: { filters }
@@ -743,7 +881,7 @@ var CssClassFilter = () => {
     disableAutoFocus: true
   });
   const showCleanIcon = Object.values(filters).some((value) => value);
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Tooltip2, { title: __4("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Tooltip2, { title: __5("Filters", "elementor"), placement: "top" }, /* @__PURE__ */ React7.createElement(
     ToggleButton,
     {
       value: "filter",
@@ -751,8 +889,8 @@ var CssClassFilter = () => {
       selected: popupState.isOpen,
       ...bindToggle(popupState)
     },
-    /* @__PURE__ */ React5.createElement(FilterIcon, { fontSize: "tiny" })
-  )), /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React7.createElement(FilterIcon, { fontSize: "tiny" })
+  )), /* @__PURE__ */ React7.createElement(
     Popover,
     {
       sx: {
@@ -768,76 +906,76 @@ var CssClassFilter = () => {
       },
       ...bindPopover(popupState)
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React7.createElement(
       PopoverHeader,
       {
         actions: showCleanIcon ? [
-          /* @__PURE__ */ React5.createElement(
+          /* @__PURE__ */ React7.createElement(
             ClearIconButton,
             {
               key: "clear-all-button",
-              tooltipText: __4("Clear all", "elementor")
+              tooltipText: __5("Clear all", "elementor")
             }
           )
         ] : [],
         onClose: popupState.close,
-        title: __4("Filters", "elementor"),
-        icon: /* @__PURE__ */ React5.createElement(FilterIcon, { fontSize: "tiny" })
+        title: __5("Filters", "elementor"),
+        icon: /* @__PURE__ */ React7.createElement(FilterIcon, { fontSize: "tiny" })
       }
     ),
-    /* @__PURE__ */ React5.createElement(
-      Divider,
+    /* @__PURE__ */ React7.createElement(
+      Divider2,
       {
         sx: {
           borderWidth: "1px 0 0 0"
         }
       }
     ),
-    /* @__PURE__ */ React5.createElement(PopoverBody, { width: 344, height: 125 }, /* @__PURE__ */ React5.createElement(FilterList, null))
+    /* @__PURE__ */ React7.createElement(PopoverBody, { width: 344, height: 125 }, /* @__PURE__ */ React7.createElement(FilterList, null))
   ));
 };
 
 // src/components/search-and-filter/components/search/class-manager-search.tsx
-import * as React6 from "react";
+import * as React8 from "react";
 import { SearchIcon } from "@elementor/icons";
-import { Box as Box2, InputAdornment, Stack as Stack3, TextField } from "@elementor/ui";
-import { __ as __5 } from "@wordpress/i18n";
+import { Box as Box3, InputAdornment, Stack as Stack4, TextField } from "@elementor/ui";
+import { __ as __6 } from "@wordpress/i18n";
 var ClassManagerSearch = () => {
   const {
     search: { inputValue, handleChange }
   } = useSearchAndFilters();
-  return /* @__PURE__ */ React6.createElement(Stack3, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React6.createElement(Box2, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React8.createElement(Stack4, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React8.createElement(Box3, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React8.createElement(
     TextField,
     {
       role: "search",
       fullWidth: true,
       size: "tiny",
       value: inputValue,
-      placeholder: __5("Search", "elementor"),
+      placeholder: __6("Search", "elementor"),
       onChange: (e) => handleChange(e.target.value),
       InputProps: {
-        startAdornment: /* @__PURE__ */ React6.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React6.createElement(SearchIcon, { fontSize: "tiny" }))
+        startAdornment: /* @__PURE__ */ React8.createElement(InputAdornment, { position: "start" }, /* @__PURE__ */ React8.createElement(SearchIcon, { fontSize: "tiny" }))
       }
     }
   )));
 };
 
 // src/components/class-manager/class-manager-introduction.tsx
-import * as React7 from "react";
+import * as React9 from "react";
 import { useState as useState2 } from "react";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { IntroductionModal } from "@elementor/editor-ui";
-import { Box as Box3, Image, Typography as Typography2 } from "@elementor/ui";
-import { __ as __6 } from "@wordpress/i18n";
+import { Box as Box4, Image, Typography as Typography3 } from "@elementor/ui";
+import { __ as __7 } from "@wordpress/i18n";
 var MESSAGE_KEY = "global-class-manager";
 var ClassManagerIntroduction = () => {
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(MESSAGE_KEY);
   const [shouldShowIntroduction, setShouldShowIntroduction] = useState2(!isMessageSuppressed);
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React9.createElement(
     IntroductionModal,
     {
       open: shouldShowIntroduction,
-      title: __6("Class Manager", "elementor"),
+      title: __7("Class Manager", "elementor"),
       handleClose: (shouldShowAgain) => {
         if (!shouldShowAgain) {
           suppressMessage();
@@ -845,7 +983,7 @@ var ClassManagerIntroduction = () => {
         setShouldShowIntroduction(false);
       }
     },
-    /* @__PURE__ */ React7.createElement(
+    /* @__PURE__ */ React9.createElement(
       Image,
       {
         sx: { width: "100%", aspectRatio: "16 / 9" },
@@ -853,14 +991,14 @@ var ClassManagerIntroduction = () => {
         alt: ""
       }
     ),
-    /* @__PURE__ */ React7.createElement(IntroductionContent, null)
+    /* @__PURE__ */ React9.createElement(IntroductionContent, null)
   );
 };
 var IntroductionContent = () => {
-  return /* @__PURE__ */ React7.createElement(Box3, { p: 3 }, /* @__PURE__ */ React7.createElement(Typography2, { variant: "body2" }, __6(
+  return /* @__PURE__ */ React9.createElement(Box4, { p: 3 }, /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __7(
     "The Class Manager lets you see all the classes you've created, plus adjust their priority, rename them, and delete unused classes to keep your CSS structured.",
     "elementor"
-  )), /* @__PURE__ */ React7.createElement("br", null), /* @__PURE__ */ React7.createElement(Typography2, { variant: "body2" }, __6(
+  )), /* @__PURE__ */ React9.createElement("br", null), /* @__PURE__ */ React9.createElement(Typography3, { variant: "body2" }, __7(
     "Remember, when editing an item within a specific class, any changes you make will apply across all elements in that class.",
     "elementor"
   )));
@@ -892,16 +1030,16 @@ var reloadDocument = () => {
 };
 
 // src/components/class-manager/flipped-color-swatch-icon.tsx
-import * as React8 from "react";
+import * as React10 from "react";
 import { ColorSwatchIcon } from "@elementor/icons";
-var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React8.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React10.createElement(ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
 
 // src/components/class-manager/global-classes-list.tsx
-import * as React15 from "react";
+import * as React17 from "react";
 import { useEffect, useMemo as useMemo3 } from "react";
 import { __useDispatch as useDispatch } from "@elementor/store";
-import { List, Stack as Stack7, styled as styled6, Typography as Typography7 } from "@elementor/ui";
-import { __ as __12 } from "@wordpress/i18n";
+import { List, Stack as Stack8, styled as styled6, Typography as Typography8 } from "@elementor/ui";
+import { __ as __13 } from "@wordpress/i18n";
 
 // src/hooks/use-ordered-classes.ts
 import { __useSelector as useSelector3 } from "@elementor/store";
@@ -910,31 +1048,31 @@ var useOrderedClasses = () => {
 };
 
 // src/components/class-manager/class-item.tsx
-import * as React13 from "react";
+import * as React15 from "react";
 import { useRef, useState as useState4 } from "react";
 import { validateStyleLabel } from "@elementor/editor-styles-repository";
-import { EditableField, EllipsisWithTooltip as EllipsisWithTooltip2, MenuListItem, useEditable, WarningInfotip } from "@elementor/editor-ui";
+import { EditableField, EllipsisWithTooltip as EllipsisWithTooltip3, MenuListItem, useEditable, WarningInfotip } from "@elementor/editor-ui";
 import { DotsVerticalIcon } from "@elementor/icons";
 import {
   bindMenu,
   bindTrigger as bindTrigger2,
-  Box as Box7,
+  Box as Box8,
   IconButton as IconButton3,
   ListItemButton,
   Menu,
-  Stack as Stack5,
+  Stack as Stack6,
   styled as styled5,
   Tooltip as Tooltip5,
-  Typography as Typography5,
+  Typography as Typography6,
   usePopupState as usePopupState3
 } from "@elementor/ui";
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
-import * as React9 from "react";
+import * as React11 from "react";
 import { __useOpenDocumentInNewTab as useOpenDocumentInNewTab } from "@elementor/editor-documents";
 import {
-  EllipsisWithTooltip,
+  EllipsisWithTooltip as EllipsisWithTooltip2,
   PopoverBody as PopoverBody2,
   PopoverHeader as PopoverHeader2,
   PopoverMenuList
@@ -948,8 +1086,8 @@ import {
   PopupTemplateIcon,
   PostTypeIcon
 } from "@elementor/icons";
-import { Box as Box4, Chip as Chip3, Divider as Divider2, Icon, MenuList as MenuList2, Stack as Stack4, styled as styled2, Tooltip as Tooltip3, Typography as Typography3 } from "@elementor/ui";
-import { __ as __7 } from "@wordpress/i18n";
+import { Box as Box5, Chip as Chip3, Divider as Divider3, Icon as Icon2, MenuList as MenuList2, Stack as Stack5, styled as styled2, Tooltip as Tooltip3, Typography as Typography4 } from "@elementor/ui";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/hooks/use-css-class-usage-by-id.ts
 var EMPTY_CLASS_USAGE = {
@@ -965,24 +1103,24 @@ var useCssClassUsageByID = (id2) => {
 // src/components/css-class-usage/components/css-class-usage-popover.tsx
 var iconMapper = {
   "wp-post": {
-    label: __7("Post", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(PostTypeIcon, { fontSize: "inherit" })
+    label: __8("Post", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(PostTypeIcon, { fontSize: "inherit" })
   },
   "wp-page": {
-    label: __7("Page", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(PagesIcon, { fontSize: "inherit" })
+    label: __8("Page", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(PagesIcon, { fontSize: "inherit" })
   },
   popup: {
-    label: __7("Popup", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(PopupTemplateIcon, { fontSize: "inherit" })
+    label: __8("Popup", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(PopupTemplateIcon, { fontSize: "inherit" })
   },
   header: {
-    label: __7("Header", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(HeaderTemplateIcon, { fontSize: "inherit" })
+    label: __8("Header", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(HeaderTemplateIcon, { fontSize: "inherit" })
   },
   footer: {
-    label: __7("Footer", "elementor"),
-    icon: /* @__PURE__ */ React9.createElement(FooterTemplateIcon, { fontSize: "inherit" })
+    label: __8("Footer", "elementor"),
+    icon: /* @__PURE__ */ React11.createElement(FooterTemplateIcon, { fontSize: "inherit" })
   }
 };
 var CssClassUsagePopover = ({
@@ -1000,14 +1138,14 @@ var CssClassUsagePopover = ({
       docType: type
     })
   ) ?? [];
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
     PopoverHeader2,
     {
-      icon: /* @__PURE__ */ React9.createElement(CurrentLocationIcon, { fontSize: "tiny" }),
-      title: /* @__PURE__ */ React9.createElement(Stack4, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Box4, { "aria-label": "header-title" }, __7("Locator", "elementor")), /* @__PURE__ */ React9.createElement(Box4, null, /* @__PURE__ */ React9.createElement(Chip3, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
+      icon: /* @__PURE__ */ React11.createElement(CurrentLocationIcon, { fontSize: "tiny" }),
+      title: /* @__PURE__ */ React11.createElement(Stack5, { flexDirection: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(Box5, { "aria-label": "header-title" }, __8("Locator", "elementor")), /* @__PURE__ */ React11.createElement(Box5, null, /* @__PURE__ */ React11.createElement(Chip3, { sx: { lineHeight: 1 }, size: "tiny", label: classUsage.total }))),
       onClose
     }
-  ), /* @__PURE__ */ React9.createElement(Divider2, null), /* @__PURE__ */ React9.createElement(PopoverBody2, { width: 300 }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React11.createElement(Divider3, null), /* @__PURE__ */ React11.createElement(PopoverBody2, { width: 300 }, /* @__PURE__ */ React11.createElement(
     PopoverMenuList,
     {
       onSelect: (value) => onNavigate(+value),
@@ -1015,26 +1153,26 @@ var CssClassUsagePopover = ({
       onClose: () => {
       },
       menuListTemplate: StyledCssClassUsageItem,
-      menuItemContentTemplate: (cssClassUsageRecord) => /* @__PURE__ */ React9.createElement(Stack4, { flexDirection: "row", flex: 1, alignItems: "center" }, /* @__PURE__ */ React9.createElement(Box4, { display: "flex", sx: { pr: 1 } }, /* @__PURE__ */ React9.createElement(
+      menuItemContentTemplate: (cssClassUsageRecord) => /* @__PURE__ */ React11.createElement(Stack5, { flexDirection: "row", flex: 1, alignItems: "center" }, /* @__PURE__ */ React11.createElement(Box5, { display: "flex", sx: { pr: 1 } }, /* @__PURE__ */ React11.createElement(
         Tooltip3,
         {
           disableInteractive: true,
           title: iconMapper?.[cssClassUsageRecord.docType]?.label ?? cssClassUsageRecord.docType,
           placement: "top"
         },
-        /* @__PURE__ */ React9.createElement(Icon, { fontSize: "small" }, iconMapper?.[cssClassUsageRecord.docType]?.icon || /* @__PURE__ */ React9.createElement(PagesIcon, { fontSize: "inherit" }))
-      )), /* @__PURE__ */ React9.createElement(Box4, { sx: { pr: 0.5, maxWidth: "173px" }, display: "flex" }, /* @__PURE__ */ React9.createElement(
-        EllipsisWithTooltip,
+        /* @__PURE__ */ React11.createElement(Icon2, { fontSize: "small" }, iconMapper?.[cssClassUsageRecord.docType]?.icon || /* @__PURE__ */ React11.createElement(PagesIcon, { fontSize: "inherit" }))
+      )), /* @__PURE__ */ React11.createElement(Box5, { sx: { pr: 0.5, maxWidth: "173px" }, display: "flex" }, /* @__PURE__ */ React11.createElement(
+        EllipsisWithTooltip2,
         {
           title: cssClassUsageRecord.label,
-          as: Typography3,
+          as: Typography4,
           variant: "caption",
           maxWidth: "173px",
           sx: {
             lineHeight: 1
           }
         }
-      )), /* @__PURE__ */ React9.createElement(ExternalLinkIcon, { className: "hover-only-icon", fontSize: "tiny" }), /* @__PURE__ */ React9.createElement(
+      )), /* @__PURE__ */ React11.createElement(ExternalLinkIcon, { className: "hover-only-icon", fontSize: "tiny" }), /* @__PURE__ */ React11.createElement(
         Chip3,
         {
           sx: {
@@ -1081,13 +1219,13 @@ var StyledCssClassUsageItem = styled2(MenuList2)(({ theme }) => ({
 }));
 
 // src/components/css-class-usage/components/css-class-usage-trigger.tsx
-import * as React10 from "react";
+import * as React12 from "react";
 import { InfoAlert } from "@elementor/editor-ui";
 import { CurrentLocationIcon as CurrentLocationIcon2 } from "@elementor/icons";
 import {
   bindPopover as bindPopover2,
   bindTrigger,
-  Box as Box5,
+  Box as Box6,
   IconButton as IconButton2,
   Infotip,
   Popover as Popover2,
@@ -1095,7 +1233,7 @@ import {
   Tooltip as Tooltip4,
   usePopupState as usePopupState2
 } from "@elementor/ui";
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 var CssClassUsageTrigger = ({ id: id2, onClick }) => {
   const {
     data: { total },
@@ -1106,7 +1244,7 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
     return null;
   }
   const WrapperComponent = total !== 0 ? TooltipWrapper : InfoAlertMessage;
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(Box5, { position: "relative" }, /* @__PURE__ */ React10.createElement(WrapperComponent, { total }, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Box6, { position: "relative" }, /* @__PURE__ */ React12.createElement(WrapperComponent, { total }, /* @__PURE__ */ React12.createElement(
     CustomIconButton2,
     {
       disabled: total === 0,
@@ -1119,8 +1257,8 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
         }
       }
     },
-    /* @__PURE__ */ React10.createElement(CurrentLocationIcon2, { fontSize: "tiny" })
-  ))), /* @__PURE__ */ React10.createElement(Box5, null, /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement(CurrentLocationIcon2, { fontSize: "tiny" })
+  ))), /* @__PURE__ */ React12.createElement(Box6, null, /* @__PURE__ */ React12.createElement(
     Popover2,
     {
       anchorOrigin: {
@@ -1137,7 +1275,7 @@ var CssClassUsageTrigger = ({ id: id2, onClick }) => {
         onClick("");
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React12.createElement(
       CssClassUsagePopover,
       {
         onClose: cssClassUsagePopover.close,
@@ -1159,80 +1297,80 @@ var CustomIconButton2 = styled3(IconButton2)(({ theme }) => ({
   height: "22px",
   width: "22px"
 }));
-var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React10.createElement(
+var TooltipWrapper = ({ children, total }) => /* @__PURE__ */ React12.createElement(
   Tooltip4,
   {
     disableInteractive: true,
     placement: "top",
-    title: `${__8("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
+    title: `${__9("Show {{number}} {{locations}}", "elementor").replace("{{number}}", total.toString()).replace(
       "{{locations}}",
-      total === 1 ? __8("location", "elementor") : __8("locations", "elementor")
+      total === 1 ? __9("location", "elementor") : __9("locations", "elementor")
     )}`
   },
-  /* @__PURE__ */ React10.createElement("span", null, children)
+  /* @__PURE__ */ React12.createElement("span", null, children)
 );
-var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React10.createElement(
+var InfoAlertMessage = ({ children }) => /* @__PURE__ */ React12.createElement(
   Infotip,
   {
     disableInteractive: true,
     placement: "top",
     color: "secondary",
-    content: /* @__PURE__ */ React10.createElement(InfoAlert, { sx: { mt: 1 } }, __8("This class isn\u2019t being used yet.", "elementor"))
+    content: /* @__PURE__ */ React12.createElement(InfoAlert, { sx: { mt: 1 } }, __9("This class isn\u2019t being used yet.", "elementor"))
   },
-  /* @__PURE__ */ React10.createElement("span", null, children)
+  /* @__PURE__ */ React12.createElement("span", null, children)
 );
 
 // src/components/class-manager/delete-confirmation-dialog.tsx
-import * as React11 from "react";
+import * as React13 from "react";
 import { createContext as createContext2, useContext as useContext2, useState as useState3 } from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
-  Button,
+  Button as Button2,
   Dialog,
-  DialogActions,
-  DialogContent,
+  DialogActions as DialogActions2,
+  DialogContent as DialogContent2,
   DialogContentText,
   DialogTitle,
-  Typography as Typography4
+  Typography as Typography5
 } from "@elementor/ui";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 var context = createContext2(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = useState3(null);
-  const openDialog = (props) => {
+  const openDialog2 = (props) => {
     setDialogProps(props);
   };
-  const closeDialog = () => {
+  const closeDialog2 = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React11.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React11.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React13.createElement(context.Provider, { value: { openDialog: openDialog2, closeDialog: closeDialog2, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React13.createElement(DeleteConfirmationDialog, { ...dialogProps }));
 };
 var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
-  const { closeDialog } = useDeleteConfirmation();
+  const { closeDialog: closeDialog2 } = useDeleteConfirmation();
   const {
     data: { total, content }
   } = useCssClassUsageByID(id2);
   const onConfirm = () => {
     deleteClass(id2);
-    closeDialog();
+    closeDialog2();
   };
-  const text = total && content.length ? __9(
+  const text = total && content.length ? __10(
     "Will permanently remove it from your project and may affect the design across all elements using it. Used %1 times across %2 pages. This action cannot be undone.",
     "elementor"
-  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : __9(
+  ).replace("%1", total.toString()).replace("%2", content.length.toString()) : __10(
     "Will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
   );
-  return /* @__PURE__ */ React11.createElement(Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React11.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React11.createElement(AlertOctagonFilledIcon, { color: "error" }), __9("Delete this class?", "elementor")), /* @__PURE__ */ React11.createElement(DialogContent, null, /* @__PURE__ */ React11.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __9("Deleting", "elementor"), /* @__PURE__ */ React11.createElement(Typography4, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React11.createElement(DialogActions, null, /* @__PURE__ */ React11.createElement(Button, { color: "secondary", onClick: closeDialog }, __9("Not now", "elementor")), /* @__PURE__ */ React11.createElement(
-    Button,
+  return /* @__PURE__ */ React13.createElement(Dialog, { open: true, onClose: closeDialog2, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React13.createElement(DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React13.createElement(AlertOctagonFilledIcon, { color: "error" }), __10("Delete this class?", "elementor")), /* @__PURE__ */ React13.createElement(DialogContent2, null, /* @__PURE__ */ React13.createElement(DialogContentText, { variant: "body2", color: "textPrimary" }, __10("Deleting", "elementor"), /* @__PURE__ */ React13.createElement(Typography5, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), text)), /* @__PURE__ */ React13.createElement(DialogActions2, null, /* @__PURE__ */ React13.createElement(Button2, { color: "secondary", onClick: closeDialog2 }, __10("Not now", "elementor")), /* @__PURE__ */ React13.createElement(
+    Button2,
     {
       autoFocus: true,
       variant: "contained",
       color: "error",
       onClick: onConfirm
     },
-    __9("Delete", "elementor")
+    __10("Delete", "elementor")
   )));
 };
 var useDeleteConfirmation = () => {
@@ -1244,18 +1382,18 @@ var useDeleteConfirmation = () => {
 };
 
 // src/components/class-manager/sortable.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { GripVerticalIcon } from "@elementor/icons";
 import {
-  Box as Box6,
+  Box as Box7,
   styled as styled4,
   UnstableSortableItem,
   UnstableSortableProvider
 } from "@elementor/ui";
-var SortableProvider = (props) => /* @__PURE__ */ React12.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React12.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React12.createElement(GripVerticalIcon, { fontSize: "tiny" }));
+var SortableProvider = (props) => /* @__PURE__ */ React14.createElement(UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React14.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger", "aria-label": "sort" }, /* @__PURE__ */ React14.createElement(GripVerticalIcon, { fontSize: "tiny" }));
 var SortableItem = ({ children, id: id2, ...props }) => {
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React14.createElement(
     UnstableSortableItem,
     {
       ...props,
@@ -1271,8 +1409,8 @@ var SortableItem = ({ children, id: id2, ...props }) => {
         isDragOverlay,
         isDragPlaceholder
       }) => {
-        return /* @__PURE__ */ React12.createElement(
-          Box6,
+        return /* @__PURE__ */ React14.createElement(
+          Box7,
           {
             ...itemProps,
             style: itemStyle,
@@ -1290,7 +1428,7 @@ var SortableItem = ({ children, id: id2, ...props }) => {
             triggerStyle,
             isDragPlaceholder
           }),
-          showDropIndication && /* @__PURE__ */ React12.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+          showDropIndication && /* @__PURE__ */ React14.createElement(SortableItemIndicator, { style: dropIndicationStyle })
         );
       }
     }
@@ -1303,7 +1441,7 @@ var StyledSortableTrigger = styled4("div")(({ theme }) => ({
   transform: `translate( -${theme.spacing(1.5)}, -50% )`,
   color: theme.palette.action.active
 }));
-var SortableItemIndicator = styled4(Box6)`
+var SortableItemIndicator = styled4(Box7)`
 	width: 100%;
 	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
@@ -1332,13 +1470,13 @@ var ClassItem = ({
     validation: validateLabel
   });
   const [selectedCssUsage, setSelectedCssUsage] = useState4("");
-  const { openDialog } = useDeleteConfirmation();
+  const { openDialog: openDialog2 } = useDeleteConfirmation();
   const popupState = usePopupState3({
     variant: "popover",
     disableAutoFocus: true
   });
   const isSelected = (selectedCssUsage === id2 || selected || popupState.isOpen) && !disabled;
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(Stack5, { p: 0 }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(Stack6, { p: 0 }, /* @__PURE__ */ React15.createElement(
     WarningInfotip,
     {
       open: Boolean(error),
@@ -1347,7 +1485,7 @@ var ClassItem = ({
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement(
       StyledListItemButton,
       {
         ref: itemRef,
@@ -1361,28 +1499,28 @@ var ClassItem = ({
         disabled,
         focusVisibleClassName: "visible-class-item"
       },
-      /* @__PURE__ */ React13.createElement(SortableTrigger, { ...sortableTriggerProps }),
-      /* @__PURE__ */ React13.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React15.createElement(SortableTrigger, { ...sortableTriggerProps }),
+      /* @__PURE__ */ React15.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React15.createElement(
         EditableField,
         {
           ref: editableRef,
-          as: Typography5,
+          as: Typography6,
           variant: "caption",
           ...getEditableProps()
         }
-      ) : /* @__PURE__ */ React13.createElement(EllipsisWithTooltip2, { title: label, as: Typography5, variant: "caption" })),
-      /* @__PURE__ */ React13.createElement(Box7, { className: "class-item-locator" }, /* @__PURE__ */ React13.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
-      /* @__PURE__ */ React13.createElement(
+      ) : /* @__PURE__ */ React15.createElement(EllipsisWithTooltip3, { title: label, as: Typography6, variant: "caption" })),
+      /* @__PURE__ */ React15.createElement(Box8, { className: "class-item-locator" }, /* @__PURE__ */ React15.createElement(CssClassUsageTrigger, { id: id2, onClick: setSelectedCssUsage })),
+      /* @__PURE__ */ React15.createElement(
         Tooltip5,
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: __10("More actions", "elementor")
+          title: __11("More actions", "elementor")
         },
-        /* @__PURE__ */ React13.createElement(IconButton3, { size: "tiny", ...bindTrigger2(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React13.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
+        /* @__PURE__ */ React15.createElement(IconButton3, { size: "tiny", ...bindTrigger2(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React15.createElement(DotsVerticalIcon, { fontSize: "tiny" }))
       )
     )
-  )), /* @__PURE__ */ React13.createElement(
+  )), /* @__PURE__ */ React15.createElement(
     Menu,
     {
       ...bindMenu(popupState),
@@ -1395,7 +1533,7 @@ var ClassItem = ({
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement(
       MenuListItem,
       {
         sx: { minWidth: "160px" },
@@ -1404,17 +1542,17 @@ var ClassItem = ({
           openEditMode();
         }
       },
-      /* @__PURE__ */ React13.createElement(Typography5, { variant: "caption", sx: { color: "text.primary" } }, __10("Rename", "elementor"))
+      /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "text.primary" } }, __11("Rename", "elementor"))
     ),
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React15.createElement(
       MenuListItem,
       {
         onClick: () => {
           popupState.close();
-          openDialog({ id: id2, label });
+          openDialog2({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React13.createElement(Typography5, { variant: "caption", sx: { color: "error.light" } }, __10("Delete", "elementor"))
+      /* @__PURE__ */ React15.createElement(Typography6, { variant: "caption", sx: { color: "error.light" } }, __11("Delete", "elementor"))
     )
   ));
 };
@@ -1447,7 +1585,7 @@ var StyledListItemButton = styled5(ListItemButton, {
     }
   `
 );
-var Indicator = styled5(Box7, {
+var Indicator = styled5(Box8, {
   shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
 })(({ theme, isActive, isError }) => ({
   display: "flex",
@@ -1477,10 +1615,10 @@ var validateLabel = (newLabel) => {
 };
 
 // src/components/class-manager/not-found.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 import { ColorSwatchIcon as ColorSwatchIcon2, PhotoIcon } from "@elementor/icons";
-import { Box as Box8, Link, Stack as Stack6, Typography as Typography6 } from "@elementor/ui";
-import { __ as __11 } from "@wordpress/i18n";
+import { Box as Box9, Link, Stack as Stack7, Typography as Typography7 } from "@elementor/ui";
+import { __ as __12 } from "@wordpress/i18n";
 var getNotFoundType = (searchValue, filters, filteredClasses) => {
   const searchNotFound = filteredClasses.length <= 0 && searchValue.length > 1;
   const filterNotFound = filters && filters.length === 0;
@@ -1498,19 +1636,19 @@ var getNotFoundType = (searchValue, filters, filteredClasses) => {
 };
 var notFound = {
   filterAndSearch: {
-    mainText: __11("Sorry, nothing matched.", "elementor"),
-    sceneryText: __11("Try something else.", "elementor"),
-    icon: /* @__PURE__ */ React14.createElement(PhotoIcon, { color: "inherit", fontSize: "large" })
+    mainText: __12("Sorry, nothing matched.", "elementor"),
+    sceneryText: __12("Try something else.", "elementor"),
+    icon: /* @__PURE__ */ React16.createElement(PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   search: {
-    mainText: __11("Sorry, nothing matched", "elementor"),
-    sceneryText: __11("Clear your input and try something else.", "elementor"),
-    icon: /* @__PURE__ */ React14.createElement(PhotoIcon, { color: "inherit", fontSize: "large" })
+    mainText: __12("Sorry, nothing matched", "elementor"),
+    sceneryText: __12("Clear your input and try something else.", "elementor"),
+    icon: /* @__PURE__ */ React16.createElement(PhotoIcon, { color: "inherit", fontSize: "large" })
   },
   filter: {
-    mainText: __11("Sorry, nothing matched that search.", "elementor"),
-    sceneryText: __11("Clear the filters and try something else.", "elementor"),
-    icon: /* @__PURE__ */ React14.createElement(ColorSwatchIcon2, { color: "inherit", fontSize: "large" })
+    mainText: __12("Sorry, nothing matched that search.", "elementor"),
+    sceneryText: __12("Clear the filters and try something else.", "elementor"),
+    icon: /* @__PURE__ */ React16.createElement(ColorSwatchIcon2, { color: "inherit", fontSize: "large" })
   }
 };
 var NotFound = ({ notFoundType }) => {
@@ -1520,11 +1658,11 @@ var NotFound = ({ notFoundType }) => {
   } = useSearchAndFilters();
   switch (notFoundType) {
     case "filter":
-      return /* @__PURE__ */ React14.createElement(NotFoundLayout, { ...notFound.filter, onClear: onClearFilter });
+      return /* @__PURE__ */ React16.createElement(NotFoundLayout, { ...notFound.filter, onClear: onClearFilter });
     case "search":
-      return /* @__PURE__ */ React14.createElement(NotFoundLayout, { ...notFound.search, searchValue: inputValue, onClear: onClearSearch });
+      return /* @__PURE__ */ React16.createElement(NotFoundLayout, { ...notFound.search, searchValue: inputValue, onClear: onClearSearch });
     case "filterAndSearch":
-      return /* @__PURE__ */ React14.createElement(
+      return /* @__PURE__ */ React16.createElement(
         NotFoundLayout,
         {
           ...notFound.filterAndSearch,
@@ -1536,8 +1674,8 @@ var NotFound = ({ notFoundType }) => {
       );
   }
 };
-var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) => /* @__PURE__ */ React14.createElement(
-  Stack6,
+var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) => /* @__PURE__ */ React16.createElement(
+  Stack7,
   {
     color: "text.secondary",
     pt: 5,
@@ -1547,16 +1685,16 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
     justifySelf: "center"
   },
   icon,
-  /* @__PURE__ */ React14.createElement(
-    Box8,
+  /* @__PURE__ */ React16.createElement(
+    Box9,
     {
       sx: {
         width: "100%"
       }
     },
-    /* @__PURE__ */ React14.createElement(Typography6, { align: "center", variant: "subtitle2", color: "inherit" }, mainText),
-    searchValue && /* @__PURE__ */ React14.createElement(
-      Typography6,
+    /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "subtitle2", color: "inherit" }, mainText),
+    searchValue && /* @__PURE__ */ React16.createElement(
+      Typography7,
       {
         variant: "subtitle2",
         color: "inherit",
@@ -1566,8 +1704,8 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
           justifyContent: "center"
         }
       },
-      /* @__PURE__ */ React14.createElement("span", null, "\u201C"),
-      /* @__PURE__ */ React14.createElement(
+      /* @__PURE__ */ React16.createElement("span", null, "\u201C"),
+      /* @__PURE__ */ React16.createElement(
         "span",
         {
           style: {
@@ -1578,11 +1716,11 @@ var NotFoundLayout = ({ onClear, searchValue, mainText, sceneryText, icon }) =>
         },
         searchValue
       ),
-      /* @__PURE__ */ React14.createElement("span", null, "\u201D.")
+      /* @__PURE__ */ React16.createElement("span", null, "\u201D.")
     )
   ),
-  /* @__PURE__ */ React14.createElement(Typography6, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
-  /* @__PURE__ */ React14.createElement(Typography6, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React14.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, __11("Clear & try again", "elementor")))
+  /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", color: "inherit" }, sceneryText),
+  /* @__PURE__ */ React16.createElement(Typography7, { align: "center", variant: "caption", color: "inherit" }, /* @__PURE__ */ React16.createElement(Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, __12("Clear & try again", "elementor")))
 );
 
 // src/components/class-manager/global-classes-list.tsx
@@ -1613,22 +1751,22 @@ var GlobalClassesList = ({ disabled }) => {
     return () => window.removeEventListener("keydown", handler);
   }, [dispatch5]);
   if (!cssClasses?.length) {
-    return /* @__PURE__ */ React15.createElement(EmptyState, null);
+    return /* @__PURE__ */ React17.createElement(EmptyState, null);
   }
   const notFoundType = getNotFoundType(searchValue, filters, filteredCssClasses);
   if (notFoundType) {
-    return /* @__PURE__ */ React15.createElement(NotFound, { notFoundType });
+    return /* @__PURE__ */ React17.createElement(NotFound, { notFoundType });
   }
   const isFiltersApplied = filters?.length || searchValue;
   const allowSorting = filteredCssClasses.length > 1 && !isFiltersApplied;
-  return /* @__PURE__ */ React15.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React15.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React17.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React17.createElement(List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(
     SortableProvider,
     {
       value: classesOrder,
       onChange: reorderClasses,
       disableDragOverlay: !allowSorting
     },
-    filteredCssClasses?.map(({ id: id2, label }) => /* @__PURE__ */ React15.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React15.createElement(
+    filteredCssClasses?.map(({ id: id2, label }) => /* @__PURE__ */ React17.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React17.createElement(
       ClassItem,
       {
         id: id2,
@@ -1651,11 +1789,11 @@ var GlobalClassesList = ({ disabled }) => {
     )))
   )));
 };
-var EmptyState = () => /* @__PURE__ */ React15.createElement(Stack7, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React15.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React15.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __12("There are no global classes yet.", "elementor")), /* @__PURE__ */ React15.createElement(Typography7, { align: "center", variant: "caption", color: "text.secondary" }, __12(
+var EmptyState = () => /* @__PURE__ */ React17.createElement(Stack8, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React17.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, __13("There are no global classes yet.", "elementor")), /* @__PURE__ */ React17.createElement(Typography8, { align: "center", variant: "caption", color: "text.secondary" }, __13(
   "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"
 )));
-var StyledHeader = styled6(Typography7)(({ theme, variant }) => ({
+var StyledHeader = styled6(Typography8)(({ theme, variant }) => ({
   "&.MuiTypography-root": {
     ...theme.typography[variant]
   }
@@ -1706,22 +1844,22 @@ function unblockPanelInteractions() {
 }
 
 // src/components/class-manager/save-changes-dialog.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 import { useState as useState5 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import {
-  Button as Button2,
+  Button as Button3,
   Dialog as Dialog2,
-  DialogActions as DialogActions2,
-  DialogContent as DialogContent2,
+  DialogActions as DialogActions3,
+  DialogContent as DialogContent3,
   DialogContentText as DialogContentText2,
   DialogTitle as DialogTitle2
 } from "@elementor/ui";
 var TITLE_ID2 = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React16.createElement(Dialog2, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React16.createElement(DialogTitle2, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React16.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children);
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React16.createElement(DialogContent2, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React16.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React18.createElement(Dialog2, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React18.createElement(DialogTitle2, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React18.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React18.createElement(DialogContent3, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React18.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState5(false);
   const { cancel, confirm, discard } = actions;
@@ -1730,7 +1868,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React16.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React16.createElement(Button2, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React16.createElement(Button2, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React16.createElement(Button2, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React18.createElement(DialogActions3, null, cancel && /* @__PURE__ */ React18.createElement(Button3, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React18.createElement(Button3, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React18.createElement(Button3, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -1768,7 +1906,7 @@ function ClassManagerPanel() {
     closeSaveChangesDialog();
   };
   usePreventUnload();
-  return /* @__PURE__ */ React17.createElement(ThemeProvider, null, /* @__PURE__ */ React17.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React17.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React17.createElement(Panel, null, /* @__PURE__ */ React17.createElement(SearchAndFilterProvider, null, /* @__PURE__ */ React17.createElement(PanelHeader, null, /* @__PURE__ */ React17.createElement(Stack8, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React17.createElement(Stack8, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React17.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React17.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), __13("Class Manager", "elementor")), /* @__PURE__ */ React17.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React17.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" }), __14("Class Manager", "elementor")), /* @__PURE__ */ React19.createElement(TotalCssClassCounter, null)), /* @__PURE__ */ React19.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -1781,7 +1919,7 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React17.createElement(
+  ))), /* @__PURE__ */ React19.createElement(
     PanelBody,
     {
       sx: {
@@ -1790,10 +1928,10 @@ function ClassManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React17.createElement(Box9, { px: 2, pb: 1 }, /* @__PURE__ */ React17.createElement(Stack8, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React17.createElement(Box9, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React17.createElement(ClassManagerSearch, null)), /* @__PURE__ */ React17.createElement(CssClassFilter, null)), /* @__PURE__ */ React17.createElement(ActiveFilters, null)),
-    /* @__PURE__ */ React17.createElement(Divider3, null),
-    /* @__PURE__ */ React17.createElement(
-      Box9,
+    /* @__PURE__ */ React19.createElement(Box10, { px: 2, pb: 1 }, /* @__PURE__ */ React19.createElement(Stack9, { direction: "row", justifyContent: "spaceBetween", gap: 0.5, sx: { pb: 0.5 } }, /* @__PURE__ */ React19.createElement(Box10, { 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(
+      Box10,
       {
         px: 2,
         sx: {
@@ -1801,10 +1939,10 @@ function ClassManagerPanel() {
           overflowY: "auto"
         }
       },
-      /* @__PURE__ */ React17.createElement(GlobalClassesList, { disabled: isPublishing })
+      /* @__PURE__ */ React19.createElement(GlobalClassesList, { disabled: isPublishing })
     )
-  ), /* @__PURE__ */ React17.createElement(PanelFooter, null, /* @__PURE__ */ React17.createElement(
-    Button3,
+  ), /* @__PURE__ */ React19.createElement(PanelFooter, null, /* @__PURE__ */ React19.createElement(
+    Button4,
     {
       fullWidth: true,
       size: "small",
@@ -1814,19 +1952,19 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    __13("Save changes", "elementor")
-  ))))), /* @__PURE__ */ React17.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React17.createElement(SaveChangesDialog, null, /* @__PURE__ */ React17.createElement(DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React17.createElement(SaveChangesDialog.Title, null, __13("You have unsaved changes", "elementor"))), /* @__PURE__ */ React17.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React17.createElement(SaveChangesDialog.ContentText, null, __13("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React17.createElement(SaveChangesDialog.ContentText, null, __13("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React17.createElement(
+    __14("Save changes", "elementor")
+  ))))), /* @__PURE__ */ React19.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React19.createElement(SaveChangesDialog, null, /* @__PURE__ */ React19.createElement(DialogHeader2, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React19.createElement(SaveChangesDialog.Title, null, __14("You have unsaved changes", "elementor"))), /* @__PURE__ */ React19.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __14("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React19.createElement(SaveChangesDialog.ContentText, null, __14("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React19.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
-          label: __13("Discard", "elementor"),
+          label: __14("Discard", "elementor"),
           action: () => {
             resetAndClosePanel();
           }
         },
         confirm: {
-          label: __13("Save & Continue", "elementor"),
+          label: __14("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -1837,8 +1975,8 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React17.createElement(IconButton4, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React17.createElement(XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React17.createElement(Box9, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React17.createElement(Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React17.createElement("strong", null, __13("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(Box10, { 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, __14("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
   useEffect2(() => {
@@ -1867,7 +2005,7 @@ var usePublish = () => {
 var TotalCssClassCounter = () => {
   const filters = useFilters();
   const cssClasses = useClassesOrder();
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React19.createElement(
     Chip4,
     {
       size: "small",
@@ -1896,19 +2034,19 @@ var ClassManagerButton = () => {
     openPanel();
     prefetchClassesUsage();
   };
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(Tooltip6, { title: __14("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React18.createElement(IconButton5, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React18.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React18.createElement(SaveChangesDialog, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.Title, null, __14("You have unsaved changes", "elementor")), /* @__PURE__ */ React18.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React18.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __14(
+  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(Tooltip6, { title: __15("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(SaveChangesDialog, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog.Title, null, __15("You have unsaved changes", "elementor")), /* @__PURE__ */ React20.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React20.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, __15(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React18.createElement(
+  ))), /* @__PURE__ */ React20.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: __14("Stay here", "elementor"),
+          label: __15("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: __14("Save & Continue", "elementor"),
+          label: __15("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -1922,11 +2060,11 @@ var ClassManagerButton = () => {
 };
 
 // src/components/convert-local-class-to-global-class.tsx
-import * as React19 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 Divider4 } from "@elementor/ui";
-import { __ as __15 } from "@wordpress/i18n";
+import { Divider as Divider5 } from "@elementor/ui";
+import { __ as __16 } from "@wordpress/i18n";
 var ConvertLocalClassToGlobalClass = (props) => {
   const localStyleData = props.styleDef;
   const handleConversion = () => {
@@ -1939,7 +2077,7 @@ var ConvertLocalClassToGlobalClass = (props) => {
       props.successCallback(newId);
     }
   };
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(
     MenuListItem2,
     {
       disabled: !props.canConvert,
@@ -1953,8 +2091,8 @@ var ConvertLocalClassToGlobalClass = (props) => {
         }
       }
     },
-    __15("Convert to global class", "elementor")
-  ), /* @__PURE__ */ React19.createElement(Divider4, null));
+    __16("Convert to global class", "elementor")
+  ), /* @__PURE__ */ React21.createElement(Divider5, null));
 };
 function createClassName(prefix) {
   let i = 1;
@@ -1993,14 +2131,18 @@ function PopulateStore() {
   return null;
 }
 
+// src/sync-with-document.tsx
+import { useEffect as useEffect4 } from "react";
+import { __privateListenTo as listenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
+
 // src/sync-with-document-save.ts
 import { getCurrentUser } from "@elementor/editor-current-user";
 import { setDocumentModifiedStatus as setDocumentModifiedStatus2 } from "@elementor/editor-documents";
 import { registerDataHook } from "@elementor/editor-v1-adapters";
 import { __getState as getState3, __subscribeWithSelector as subscribeWithSelector2 } from "@elementor/store";
-function syncWithDocumentSave() {
+function syncWithDocumentSave(panelActions) {
   const unsubscribe = syncDirtyState();
-  bindSaveAction();
+  bindSaveAction(panelActions);
   return unsubscribe;
 }
 function syncDirtyState() {
@@ -2011,15 +2153,16 @@ function syncDirtyState() {
     setDocumentModifiedStatus2(true);
   });
 }
-function bindSaveAction() {
+function bindSaveAction(panelActions) {
   registerDataHook("after", "document/save/save", (args) => {
     const user = getCurrentUser();
     const canEdit = user?.capabilities.includes(UPDATE_CLASS_CAPABILITY_KEY);
     if (!canEdit) {
       return;
     }
-    return saveGlobalClasses({
-      context: args.status === "publish" ? "frontend" : "preview"
+    saveGlobalClasses({
+      context: args.status === "publish" ? "frontend" : "preview",
+      onApprove: panelActions?.open
     });
   });
 }
@@ -2027,6 +2170,17 @@ function isDirty() {
   return selectIsDirty(getState3());
 }
 
+// src/sync-with-document.tsx
+function SyncWithDocumentSave() {
+  const panelActions = usePanelActions();
+  useEffect4(() => {
+    listenTo(v1ReadyEvent(), () => {
+      syncWithDocumentSave(panelActions);
+    });
+  }, []);
+  return null;
+}
+
 // src/init.ts
 function init() {
   registerSlice(slice);
@@ -2036,6 +2190,10 @@ function init() {
     id: "global-classes-populate-store",
     component: PopulateStore
   });
+  injectIntoLogic({
+    id: "global-classes-sync-with-document",
+    component: SyncWithDocumentSave
+  });
   injectIntoCssClassConvert({
     id: "global-classes-convert-from-local-class",
     component: ConvertLocalClassToGlobalClass
@@ -2048,12 +2206,8 @@ function init() {
     name: "global",
     getThemeColor: (theme) => theme.palette.global.dark
   });
-  listenTo(v1ReadyEvent(), () => {
-    syncWithDocumentSave();
-  });
 }
 export {
-  ClearIconButton,
   init
 };
 //# sourceMappingURL=index.mjs.map