@elementor/editor-global-classes 0.20.5 → 0.21.1

package/dist/index.js

@@ -36,18 +36,18 @@ module.exports = __toCommonJS(index_exports);
 
 // src/init.ts
 var import_editor = require("@elementor/editor");
-var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
 var import_editor_styles_repository4 = require("@elementor/editor-styles-repository");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
-var import_store20 = require("@elementor/store");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_store22 = require("@elementor/store");
 
 // src/components/class-manager/class-manager-button.tsx
-var React8 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_styles_repository3 = require("@elementor/editor-styles-repository");
-var import_ui7 = require("@elementor/ui");
-var import_i18n6 = require("@wordpress/i18n");
+var import_ui10 = require("@elementor/ui");
+var import_i18n9 = require("@wordpress/i18n");
 
 // src/global-classes-styles-provider.ts
 var import_editor_styles2 = require("@elementor/editor-styles");
@@ -87,6 +87,69 @@ var GlobalClassLabelAlreadyExistsError = (0, import_utils.createError)({
 var import_editor_props = require("@elementor/editor-props");
 var import_editor_styles = require("@elementor/editor-styles");
 var import_store = require("@elementor/store");
+
+// src/utils/snapshot-history.ts
+function createLink({ value, next, prev }) {
+  return {
+    value,
+    prev: prev || null,
+    next: next || null
+  };
+}
+var SnapshotHistory = class _SnapshotHistory {
+  constructor(namespace) {
+    this.namespace = namespace;
+  }
+  static registry = {};
+  static get(namespace) {
+    if (!_SnapshotHistory.registry[namespace]) {
+      _SnapshotHistory.registry[namespace] = new _SnapshotHistory(namespace);
+    }
+    return _SnapshotHistory.registry[namespace];
+  }
+  first = null;
+  current = null;
+  transform(item) {
+    return JSON.parse(JSON.stringify(item));
+  }
+  reset() {
+    this.first = this.current = null;
+  }
+  prev() {
+    if (!this.current || this.current === this.first) {
+      return null;
+    }
+    this.current = this.current.prev;
+    return this.current?.value || null;
+  }
+  isLast() {
+    return !this.current || !this.current.next;
+  }
+  next(value) {
+    if (value) {
+      if (!this.current) {
+        this.first = createLink({ value: this.transform(value) });
+        this.current = this.first;
+        return this.current.value;
+      }
+      const nextLink = createLink({
+        value: this.transform(value),
+        prev: this.current
+      });
+      this.current.next = nextLink;
+      this.current = nextLink;
+      return this.current.value;
+    }
+    if (!this.current || !this.current.next) {
+      return null;
+    }
+    this.current = this.current.next;
+    return this.current.value;
+  }
+};
+
+// src/store.ts
+var localHistory = SnapshotHistory.get("global-classes");
 var initialState = {
   data: { items: {}, order: [] },
   initialData: {
@@ -109,11 +172,13 @@ var slice = (0, import_store.__createSlice)({
       state.isDirty = false;
     },
     add(state, { payload }) {
+      localHistory.next(state.data);
       state.data.items[payload.id] = payload;
       state.data.order.unshift(payload.id);
       state.isDirty = true;
     },
     delete(state, { payload }) {
+      localHistory.next(state.data);
       state.data.items = Object.fromEntries(
         Object.entries(state.data.items).filter(([id2]) => id2 !== payload)
       );
@@ -121,10 +186,12 @@ var slice = (0, import_store.__createSlice)({
       state.isDirty = true;
     },
     setOrder(state, { payload }) {
+      localHistory.next(state.data);
       state.data.order = payload;
       state.isDirty = true;
     },
     update(state, { payload }) {
+      localHistory.next(state.data);
       const style = state.data.items[payload.style.id];
       const mergedData = {
         ...style,
@@ -140,6 +207,7 @@ var slice = (0, import_store.__createSlice)({
       if (!style) {
         throw new GlobalClassNotFoundError({ context: { styleId: payload.id } });
       }
+      localHistory.next(state.data);
       const variant = (0, import_editor_styles.getVariantByMeta)(style, payload.meta);
       if (variant) {
         variant.props = (0, import_editor_props.mergeProps)(variant.props, payload.props);
@@ -153,10 +221,38 @@ var slice = (0, import_store.__createSlice)({
     },
     reset(state, { payload: { context: context2 } }) {
       if (context2 === "frontend") {
+        localHistory.reset();
         state.initialData.frontend = state.data;
         state.isDirty = false;
       }
       state.initialData.preview = state.data;
+    },
+    undo(state) {
+      if (localHistory.isLast()) {
+        localHistory.next(state.data);
+      }
+      const data = localHistory.prev();
+      if (data) {
+        state.data = data;
+        state.isDirty = true;
+      } else {
+        state.data = state.initialData.preview;
+      }
+    },
+    resetToInitialState(state, { payload: { context: context2 } }) {
+      localHistory.reset();
+      state.data = state.initialData[context2];
+      state.isDirty = false;
+    },
+    redo(state) {
+      const data = localHistory.next();
+      if (localHistory.isLast()) {
+        localHistory.prev();
+      }
+      if (data) {
+        state.data = data;
+        state.isDirty = true;
+      }
     }
   }
 });
@@ -175,8 +271,9 @@ var selectClass = (state, id2) => state[SLICE_NAME].data.items[id2] ?? null;
 
 // src/global-classes-styles-provider.ts
 var MAX_CLASSES = 50;
+var GLOBAL_CLASSES_PROVIDER_KEY = "global-classes";
 var globalClassesStylesProvider = (0, import_editor_styles_repository.createStylesProvider)({
-  key: "global-classes",
+  key: GLOBAL_CLASSES_PROVIDER_KEY,
   priority: 30,
   limit: MAX_CLASSES,
   labels: {
@@ -235,16 +332,19 @@ var globalClassesStylesProvider = (0, import_editor_styles_repository.createStyl
 });
 
 // src/components/class-manager/class-manager-panel.tsx
-var React7 = __toESM(require("react"));
-var import_react5 = require("react");
+var import_react6 = require("react");
+var React10 = __toESM(require("react"));
 var import_editor_documents2 = require("@elementor/editor-documents");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_panels = require("@elementor/editor-panels");
 var import_editor_ui3 = require("@elementor/editor-ui");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
-var import_icons6 = require("@elementor/icons");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_icons7 = require("@elementor/icons");
 var import_query = require("@elementor/query");
-var import_ui6 = require("@elementor/ui");
-var import_i18n5 = require("@wordpress/i18n");
+var import_store16 = require("@elementor/store");
+var import_ui9 = require("@elementor/ui");
+var import_utils2 = require("@elementor/utils");
+var import_i18n8 = require("@wordpress/i18n");
 
 // src/hooks/use-dirty-state.ts
 var import_store4 = require("@elementor/store");
@@ -360,6 +460,26 @@ var IntroductionContent = () => {
   )));
 };
 
+// src/components/class-manager/class-manager-search.tsx
+var React2 = __toESM(require("react"));
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n3 = require("@wordpress/i18n");
+var ClassManagerSearch = ({ searchValue, onChange }) => /* @__PURE__ */ React2.createElement(import_ui2.Grid, { item: true, xs: 6, px: 2, pb: 1 }, /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", gap: 0.5, sx: { width: "100%" } }, /* @__PURE__ */ React2.createElement(import_ui2.Box, { sx: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(
+  import_ui2.TextField,
+  {
+    role: "search",
+    fullWidth: true,
+    size: "tiny",
+    value: searchValue,
+    placeholder: (0, import_i18n3.__)("Search", "elementor"),
+    onChange: (e) => onChange(e.target.value),
+    InputProps: {
+      startAdornment: /* @__PURE__ */ React2.createElement(import_ui2.InputAdornment, { position: "start" }, /* @__PURE__ */ React2.createElement(import_icons.SearchIcon, { fontSize: "tiny" }))
+    }
+  }
+))));
+
 // src/components/class-manager/delete-class.ts
 var import_editor_documents = require("@elementor/editor-documents");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
@@ -386,19 +506,16 @@ var reloadDocument = () => {
 };
 
 // src/components/class-manager/flipped-color-swatch-icon.tsx
-var React2 = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
-var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React2.createElement(import_icons.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
+var React3 = __toESM(require("react"));
+var import_icons2 = require("@elementor/icons");
+var FlippedColorSwatchIcon = ({ sx, ...props }) => /* @__PURE__ */ React3.createElement(import_icons2.ColorSwatchIcon, { sx: { transform: "rotate(90deg)", ...sx }, ...props });
 
 // src/components/class-manager/global-classes-list.tsx
-var React5 = __toESM(require("react"));
-var import_react3 = require("react");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_icons4 = require("@elementor/icons");
+var React8 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_store14 = require("@elementor/store");
-var import_ui4 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var import_ui7 = require("@elementor/ui");
+var import_i18n7 = require("@wordpress/i18n");
 
 // src/hooks/use-classes-order.ts
 var import_store10 = require("@elementor/store");
@@ -412,12 +529,23 @@ var useOrderedClasses = () => {
   return (0, import_store12.__useSelector)(selectOrderedClasses);
 };
 
+// src/components/class-manager/class-item.tsx
+var React6 = __toESM(require("react"));
+var import_react3 = require("react");
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_ui2 = require("@elementor/editor-ui");
+var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_icons5 = require("@elementor/icons");
+var import_ui5 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
+
 // src/components/class-manager/delete-confirmation-dialog.tsx
-var React3 = __toESM(require("react"));
+var React4 = __toESM(require("react"));
 var import_react2 = require("react");
-var import_icons2 = require("@elementor/icons");
-var import_ui2 = require("@elementor/ui");
-var import_i18n3 = require("@wordpress/i18n");
+var import_icons3 = require("@elementor/icons");
+var import_ui3 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
 var context = (0, import_react2.createContext)(null);
 var DeleteConfirmationProvider = ({ children }) => {
   const [dialogProps, setDialogProps] = (0, import_react2.useState)(null);
@@ -427,7 +555,7 @@ var DeleteConfirmationProvider = ({ children }) => {
   const closeDialog = () => {
     setDialogProps(null);
   };
-  return /* @__PURE__ */ React3.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React3.createElement(DeleteConfirmationDialog, { ...dialogProps }));
+  return /* @__PURE__ */ React4.createElement(context.Provider, { value: { openDialog, closeDialog, dialogProps } }, children, !!dialogProps && /* @__PURE__ */ React4.createElement(DeleteConfirmationDialog, { ...dialogProps }));
 };
 var TITLE_ID = "delete-class-dialog";
 var DeleteConfirmationDialog = ({ label, id: id2 }) => {
@@ -436,10 +564,10 @@ var DeleteConfirmationDialog = ({ label, id: id2 }) => {
     deleteClass(id2);
     closeDialog();
   };
-  return /* @__PURE__ */ React3.createElement(import_ui2.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React3.createElement(import_ui2.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React3.createElement(import_icons2.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n3.__)("Delete this class?", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.DialogContent, null, /* @__PURE__ */ React3.createElement(import_ui2.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n3.__)("Deleting", "elementor"), /* @__PURE__ */ React3.createElement(import_ui2.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n3.__)(
+  return /* @__PURE__ */ React4.createElement(import_ui3.Dialog, { open: true, onClose: closeDialog, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, /* @__PURE__ */ React4.createElement(import_ui3.DialogTitle, { id: TITLE_ID, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React4.createElement(import_icons3.AlertOctagonFilledIcon, { color: "error" }), (0, import_i18n4.__)("Delete this class?", "elementor")), /* @__PURE__ */ React4.createElement(import_ui3.DialogContent, null, /* @__PURE__ */ React4.createElement(import_ui3.DialogContentText, { variant: "body2", color: "textPrimary" }, (0, import_i18n4.__)("Deleting", "elementor"), /* @__PURE__ */ React4.createElement(import_ui3.Typography, { variant: "subtitle2", component: "span" }, "\xA0", label, "\xA0"), (0, import_i18n4.__)(
     "will permanently remove it from your project and may affect the design across all elements using it. This action cannot be undone.",
     "elementor"
-  ))), /* @__PURE__ */ React3.createElement(import_ui2.DialogActions, null, /* @__PURE__ */ React3.createElement(import_ui2.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n3.__)("Not now", "elementor")), /* @__PURE__ */ React3.createElement(import_ui2.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n3.__)("Delete", "elementor"))));
+  ))), /* @__PURE__ */ React4.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React4.createElement(import_ui3.Button, { color: "secondary", onClick: closeDialog }, (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React4.createElement(import_ui3.Button, { variant: "contained", color: "error", onClick: onConfirm }, (0, import_i18n4.__)("Delete", "elementor"))));
 };
 var useDeleteConfirmation = () => {
   const contextValue = (0, import_react2.useContext)(context);
@@ -450,14 +578,14 @@ var useDeleteConfirmation = () => {
 };
 
 // src/components/class-manager/sortable.tsx
-var React4 = __toESM(require("react"));
-var import_icons3 = require("@elementor/icons");
-var import_ui3 = require("@elementor/ui");
-var SortableProvider = (props) => /* @__PURE__ */ React4.createElement(import_ui3.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
-var SortableTrigger = (props) => /* @__PURE__ */ React4.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React4.createElement(import_icons3.GripVerticalIcon, { fontSize: "tiny" }));
+var React5 = __toESM(require("react"));
+var import_icons4 = require("@elementor/icons");
+var import_ui4 = require("@elementor/ui");
+var SortableProvider = (props) => /* @__PURE__ */ React5.createElement(import_ui4.UnstableSortableProvider, { restrictAxis: true, variant: "static", dragPlaceholderStyle: { opacity: "1" }, ...props });
+var SortableTrigger = (props) => /* @__PURE__ */ React5.createElement(StyledSortableTrigger, { ...props, role: "button", className: "class-item-sortable-trigger" }, /* @__PURE__ */ React5.createElement(import_icons4.GripVerticalIcon, { fontSize: "tiny" }));
 var SortableItem = ({ children, id: id2, ...props }) => {
-  return /* @__PURE__ */ React4.createElement(
-    import_ui3.UnstableSortableItem,
+  return /* @__PURE__ */ React5.createElement(
+    import_ui4.UnstableSortableItem,
     {
       ...props,
       id: id2,
@@ -472,8 +600,8 @@ var SortableItem = ({ children, id: id2, ...props }) => {
         isDragOverlay,
         isDragPlaceholder
       }) => {
-        return /* @__PURE__ */ React4.createElement(
-          import_ui3.Box,
+        return /* @__PURE__ */ React5.createElement(
+          import_ui4.Box,
           {
             ...itemProps,
             style: itemStyle,
@@ -491,66 +619,36 @@ var SortableItem = ({ children, id: id2, ...props }) => {
             triggerStyle,
             isDragPlaceholder
           }),
-          showDropIndication && /* @__PURE__ */ React4.createElement(SortableItemIndicator, { style: dropIndicationStyle })
+          showDropIndication && /* @__PURE__ */ React5.createElement(SortableItemIndicator, { style: dropIndicationStyle })
         );
       }
     }
   );
 };
-var StyledSortableTrigger = (0, import_ui3.styled)("div")(({ theme }) => ({
+var StyledSortableTrigger = (0, import_ui4.styled)("div")(({ theme }) => ({
   position: "absolute",
   left: 0,
   top: "50%",
   transform: `translate( -${theme.spacing(1.5)}, -50% )`,
   color: theme.palette.action.active
 }));
-var SortableItemIndicator = (0, import_ui3.styled)(import_ui3.Box)`
+var SortableItemIndicator = (0, import_ui4.styled)(import_ui4.Box)`
 	width: 100%;
 	height: 1px;
 	background-color: ${({ theme }) => theme.palette.text.primary};
 `;
 
-// src/components/class-manager/global-classes-list.tsx
-var GlobalClassesList = ({ disabled }) => {
-  const cssClasses = useOrderedClasses();
-  const dispatch4 = (0, import_store14.__useDispatch)();
-  const [classesOrder, reorderClasses] = useReorder();
-  if (!cssClasses?.length) {
-    return /* @__PURE__ */ React5.createElement(EmptyState, null);
-  }
-  return /* @__PURE__ */ React5.createElement(DeleteConfirmationProvider, null, /* @__PURE__ */ React5.createElement(import_ui4.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React5.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, cssClasses?.map(({ id: id2, label }) => {
-    const renameClass = (newLabel) => {
-      dispatch4(
-        slice.actions.update({
-          style: {
-            id: id2,
-            label: newLabel
-          }
-        })
-      );
-    };
-    return /* @__PURE__ */ React5.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React5.createElement(
-      ClassItem,
-      {
-        id: id2,
-        label,
-        renameClass,
-        selected: isDragged,
-        disabled: disabled || isDragPlaceholder,
-        sortableTriggerProps: { ...triggerProps, style: triggerStyle }
-      }
-    ));
-  }))));
-};
-var useReorder = () => {
-  const dispatch4 = (0, import_store14.__useDispatch)();
-  const order = useClassesOrder();
-  const reorder = (newIds) => {
-    dispatch4(slice.actions.setOrder(newIds));
-  };
-  return [order, reorder];
-};
-var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTriggerProps }) => {
+// src/components/class-manager/class-item.tsx
+var isVersion311IsActive = (0, import_editor_v1_adapters4.isExperimentActive)(import_editor_editing_panel.EXPERIMENTAL_FEATURES.V_3_31);
+var ClassItem = ({
+  id: id2,
+  label,
+  renameClass,
+  selected,
+  disabled,
+  sortableTriggerProps,
+  isSearchActive
+}) => {
   const itemRef = (0, import_react3.useRef)(null);
   const {
     ref: editableRef,
@@ -564,12 +662,12 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
     validation: validateLabel
   });
   const { openDialog } = useDeleteConfirmation();
-  const popupState = (0, import_ui4.usePopupState)({
+  const popupState = (0, import_ui5.usePopupState)({
     variant: "popover",
     disableAutoFocus: true
   });
   const isSelected = (selected || popupState.isOpen) && !disabled;
-  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(import_ui4.Stack, { p: 0 }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(import_ui5.Stack, { p: 0 }, /* @__PURE__ */ React6.createElement(
     import_editor_ui2.WarningInfotip,
     {
       open: Boolean(error),
@@ -578,12 +676,13 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
       width: itemRef.current?.getBoundingClientRect().width,
       offset: [0, -15]
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       StyledListItemButton,
       {
         ref: itemRef,
         dense: true,
         disableGutters: true,
+        showSortIndicator: isSearchActive,
         showActions: isSelected || isEditing,
         shape: "rounded",
         onDoubleClick: openEditMode,
@@ -591,30 +690,30 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
         disabled,
         focusVisibleClassName: "visible-class-item"
       },
-      /* @__PURE__ */ React5.createElement(SortableTrigger, { ...sortableTriggerProps }),
-      /* @__PURE__ */ React5.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React5.createElement(
+      /* @__PURE__ */ React6.createElement(SortableTrigger, { ...sortableTriggerProps }),
+      /* @__PURE__ */ React6.createElement(Indicator, { isActive: isEditing, isError: !!error }, isEditing ? /* @__PURE__ */ React6.createElement(
         import_editor_ui2.EditableField,
         {
           ref: editableRef,
-          as: import_ui4.Typography,
+          as: import_ui5.Typography,
           variant: "caption",
           ...getEditableProps()
         }
-      ) : /* @__PURE__ */ React5.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui4.Typography, variant: "caption" })),
-      /* @__PURE__ */ React5.createElement(
-        import_ui4.Tooltip,
+      ) : /* @__PURE__ */ React6.createElement(import_editor_ui2.EllipsisWithTooltip, { title: label, as: import_ui5.Typography, variant: "caption" })),
+      /* @__PURE__ */ React6.createElement(
+        import_ui5.Tooltip,
         {
           placement: "top",
           className: "class-item-more-actions",
-          title: (0, import_i18n4.__)("More actions", "elementor")
+          title: (0, import_i18n5.__)("More actions", "elementor")
         },
-        /* @__PURE__ */ React5.createElement(import_ui4.IconButton, { size: "tiny", ...(0, import_ui4.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React5.createElement(import_icons4.DotsVerticalIcon, { fontSize: "tiny" }))
+        /* @__PURE__ */ React6.createElement(import_ui5.IconButton, { size: "tiny", ...(0, import_ui5.bindTrigger)(popupState), "aria-label": "More actions" }, /* @__PURE__ */ React6.createElement(import_icons5.DotsVerticalIcon, { fontSize: "tiny" }))
       )
     )
-  )), /* @__PURE__ */ React5.createElement(
-    import_ui4.Menu,
+  )), /* @__PURE__ */ React6.createElement(
+    import_ui5.Menu,
     {
-      ...(0, import_ui4.bindMenu)(popupState),
+      ...(0, import_ui5.bindMenu)(popupState),
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "right"
@@ -624,7 +723,7 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
         horizontal: "right"
       }
     },
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       import_editor_ui2.MenuListItem,
       {
         sx: { minWidth: "160px" },
@@ -633,9 +732,9 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openEditMode();
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n4.__)("Rename", "elementor"))
+      /* @__PURE__ */ React6.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "text.primary" } }, (0, import_i18n5.__)("Rename", "elementor"))
     ),
-    /* @__PURE__ */ React5.createElement(
+    /* @__PURE__ */ React6.createElement(
       import_editor_ui2.MenuListItem,
       {
         onClick: () => {
@@ -643,28 +742,43 @@ var ClassItem = ({ id: id2, label, renameClass, selected, disabled, sortableTrig
           openDialog({ id: id2, label });
         }
       },
-      /* @__PURE__ */ React5.createElement(import_ui4.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n4.__)("Delete", "elementor"))
+      /* @__PURE__ */ React6.createElement(import_ui5.Typography, { variant: "caption", sx: { color: "error.light" } }, (0, import_i18n5.__)("Delete", "elementor"))
     )
   ));
 };
-var StyledListItemButton = (0, import_ui4.styled)(import_ui4.ListItemButton, {
-  shouldForwardProp: (prop) => !["showActions"].includes(prop)
+var StyledListItemButtonV2 = (0, import_ui5.styled)(import_ui5.ListItemButton, {
+  shouldForwardProp: (prop) => !["showActions", "showSortIndicator"].includes(prop)
 })(
-  ({ showActions }) => `
+  ({ showActions, showSortIndicator }) => `
 	min-height: 36px;
 
 	&.visible-class-item {
 		box-shadow: none !important;
 	}
-
+	.class-item-sortable-trigger {
+		visibility: ${showSortIndicator && showActions ? "visible" : "hidden"};
+	}
+	&:hover&:not(:disabled) {
+		.class-item-sortable-trigger  {
+			visibility: ${showSortIndicator ? "visible" : "hidden"};
+		}
+	}
+`
+);
+var StyledListItemButtonV1 = (0, import_ui5.styled)(import_ui5.ListItemButton, {
+  shouldForwardProp: (prop) => !["showActions", "showSortIndicator"].includes(prop)
+})(
+  ({ showActions }) => `
+	min-height: 36px;
+	&.visible-class-item {
+		box-shadow: none !important;
+	}
 	.class-item-more-actions, .class-item-sortable-trigger {
 		visibility: ${showActions ? "visible" : "hidden"};
 	}
-
 	.class-item-sortable-trigger {
 		visibility: ${showActions ? "visible" : "hidden"};
 	}
-
 	&:hover&:not(:disabled) {
 		.class-item-more-actions, .class-item-sortable-trigger  {
 			visibility: visible;
@@ -672,16 +786,8 @@ var StyledListItemButton = (0, import_ui4.styled)(import_ui4.ListItemButton, {
 	}
 `
 );
-var EmptyState = () => /* @__PURE__ */ React5.createElement(import_ui4.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React5.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React5.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n4.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React5.createElement(import_ui4.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n4.__)(
-  "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 = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant }) => ({
-  "&.MuiTypography-root": {
-    ...theme.typography[variant]
-  }
-}));
-var Indicator = (0, import_ui4.styled)(import_ui4.Box, {
+var StyledListItemButton = isVersion311IsActive ? StyledListItemButtonV2 : StyledListItemButtonV1;
+var Indicator = (0, import_ui5.styled)(import_ui5.Box, {
   shouldForwardProp: (prop) => !["isActive", "isError"].includes(prop)
 })(({ theme, isActive, isError }) => ({
   display: "flex",
@@ -710,6 +816,129 @@ var validateLabel = (newLabel) => {
   return result.errorMessage;
 };
 
+// src/components/class-manager/class-manager-class-not-found.tsx
+var React7 = __toESM(require("react"));
+var import_ui6 = require("@elementor/ui");
+var import_i18n6 = require("@wordpress/i18n");
+var CssClassNotFound = ({ onClear, searchValue }) => /* @__PURE__ */ React7.createElement(
+  import_ui6.Stack,
+  {
+    color: "text.secondary",
+    pt: 5,
+    alignItems: "center",
+    gap: 1,
+    overflow: "hidden",
+    maxWidth: "170px",
+    justifySelf: "center"
+  },
+  /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { color: "inherit", fontSize: "large" }),
+  /* @__PURE__ */ React7.createElement(import_ui6.Box, null, /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "subtitle2", color: "inherit" }, (0, import_i18n6.__)("Sorry, nothing matched", "elementor")), /* @__PURE__ */ React7.createElement(
+    import_ui6.Typography,
+    {
+      variant: "subtitle2",
+      color: "inherit",
+      sx: {
+        display: "flex",
+        width: "100%",
+        justifyContent: "center"
+      }
+    },
+    /* @__PURE__ */ React7.createElement("span", null, "\u201C"),
+    /* @__PURE__ */ React7.createElement(
+      "span",
+      {
+        style: {
+          maxWidth: "80%",
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }
+      },
+      searchValue
+    ),
+    /* @__PURE__ */ React7.createElement("span", null, "\u201D.")
+  )),
+  /* @__PURE__ */ React7.createElement(import_ui6.Typography, { align: "center", variant: "caption", color: "inherit" }, (0, import_i18n6.__)("Try something else.", "elementor"), /* @__PURE__ */ React7.createElement(import_ui6.Link, { color: "secondary", variant: "caption", component: "button", onClick: onClear }, (0, import_i18n6.__)("Clear & try again", "elementor")))
+);
+
+// src/components/class-manager/global-classes-list.tsx
+var GlobalClassesList = ({ disabled, searchValue, onSearch }) => {
+  const cssClasses = useOrderedClasses();
+  const dispatch5 = (0, import_store14.__useDispatch)();
+  const [classesOrder, reorderClasses] = useReorder();
+  const lowercaseLabels = (0, import_react4.useMemo)(
+    () => cssClasses.map((cssClass) => ({
+      ...cssClass,
+      lowerLabel: cssClass.label.toLowerCase()
+    })),
+    [cssClasses]
+  );
+  const filteredClasses = (0, import_react4.useMemo)(() => {
+    return searchValue.length > 1 ? lowercaseLabels.filter(
+      (cssClass) => cssClass.lowerLabel.toLowerCase().includes(searchValue.toLowerCase())
+    ) : cssClasses;
+  }, [searchValue, cssClasses, lowercaseLabels]);
+  (0, import_react4.useEffect)(() => {
+    const handler = (event) => {
+      if (event.key === "z" && (event.ctrlKey || event.metaKey)) {
+        event.stopImmediatePropagation();
+        event.preventDefault();
+        if (event.shiftKey) {
+          dispatch5(slice.actions.redo());
+          return;
+        }
+        dispatch5(slice.actions.undo());
+      }
+    };
+    window.addEventListener("keydown", handler, {
+      capture: true
+    });
+    return () => window.removeEventListener("keydown", handler);
+  }, [dispatch5]);
+  if (!cssClasses?.length) {
+    return /* @__PURE__ */ React8.createElement(EmptyState, null);
+  }
+  return /* @__PURE__ */ React8.createElement(DeleteConfirmationProvider, null, filteredClasses.length <= 0 && searchValue.length > 1 ? /* @__PURE__ */ React8.createElement(CssClassNotFound, { onClear: () => onSearch(""), searchValue }) : /* @__PURE__ */ React8.createElement(import_ui7.List, { sx: { display: "flex", flexDirection: "column", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(SortableProvider, { value: classesOrder, onChange: reorderClasses }, filteredClasses?.map(({ id: id2, label }) => {
+    return /* @__PURE__ */ React8.createElement(SortableItem, { key: id2, id: id2 }, ({ isDragged, isDragPlaceholder, triggerProps, triggerStyle }) => /* @__PURE__ */ React8.createElement(
+      ClassItem,
+      {
+        isSearchActive: searchValue.length < 2,
+        id: id2,
+        label,
+        renameClass: (newLabel) => {
+          dispatch5(
+            slice.actions.update({
+              style: {
+                id: id2,
+                label: newLabel
+              }
+            })
+          );
+        },
+        selected: isDragged,
+        disabled: disabled || isDragPlaceholder,
+        sortableTriggerProps: { ...triggerProps, style: triggerStyle }
+      }
+    ));
+  }))));
+};
+var EmptyState = () => /* @__PURE__ */ React8.createElement(import_ui7.Stack, { alignItems: "center", gap: 1.5, pt: 10, px: 0.5, maxWidth: "260px", margin: "auto" }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "large" }), /* @__PURE__ */ React8.createElement(StyledHeader, { variant: "subtitle2", component: "h2", color: "text.secondary" }, (0, import_i18n7.__)("There are no global classes yet.", "elementor")), /* @__PURE__ */ React8.createElement(import_ui7.Typography, { align: "center", variant: "caption", color: "text.secondary" }, (0, import_i18n7.__)(
+  "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 = (0, import_ui7.styled)(import_ui7.Typography)(({ theme, variant }) => ({
+  "&.MuiTypography-root": {
+    ...theme.typography[variant]
+  }
+}));
+var useReorder = () => {
+  const dispatch5 = (0, import_store14.__useDispatch)();
+  const order = useClassesOrder();
+  const reorder = (newIds) => {
+    dispatch5(slice.actions.setOrder(newIds));
+  };
+  return [order, reorder];
+};
+
 // src/components/class-manager/panel-interactions.ts
 function blockPanelInteractions() {
   const extendedWindow = window;
@@ -721,58 +950,67 @@ function unblockPanelInteractions() {
 }
 
 // src/components/class-manager/save-changes-dialog.tsx
-var React6 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_icons5 = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var React9 = __toESM(require("react"));
+var import_react5 = require("react");
+var import_icons6 = require("@elementor/icons");
+var import_ui8 = require("@elementor/ui");
 var TITLE_ID2 = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React6.createElement(import_ui5.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React6.createElement(import_ui5.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React6.createElement(import_icons5.AlertTriangleFilledIcon, { color: "secondary" }), children);
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React6.createElement(import_ui5.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React6.createElement(import_ui5.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React9.createElement(import_ui8.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children }) => /* @__PURE__ */ React9.createElement(import_ui8.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React9.createElement(import_icons6.AlertTriangleFilledIcon, { color: "secondary" }), children);
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React9.createElement(import_ui8.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React9.createElement(import_ui8.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react4.useState)(false);
-  const { cancel, confirm } = actions;
+  const [isConfirming, setIsConfirming] = (0, import_react5.useState)(false);
+  const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React6.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), /* @__PURE__ */ React6.createElement(import_ui5.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React9.createElement(import_ui8.DialogActions, null, cancel && /* @__PURE__ */ React9.createElement(import_ui8.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React9.createElement(import_ui8.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React9.createElement(import_ui8.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react5.useState)(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
 };
 
 // src/components/class-manager/class-manager-panel.tsx
+var isVersion311IsActive2 = (0, import_editor_v1_adapters5.isExperimentActive)(import_editor_editing_panel2.EXPERIMENTAL_FEATURES.V_3_31);
 var id = "global-classes-manager";
 var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
   id,
   component: ClassManagerPanel,
   allowedEditModes: ["edit", id],
   onOpen: () => {
-    (0, import_editor_v1_adapters4.changeEditMode)(id);
+    (0, import_editor_v1_adapters5.changeEditMode)(id);
     blockPanelInteractions();
   },
   onClose: () => {
-    (0, import_editor_v1_adapters4.changeEditMode)("edit");
+    (0, import_editor_v1_adapters5.changeEditMode)("edit");
     unblockPanelInteractions();
   }
 });
 function ClassManagerPanel() {
+  const { debouncedValue, inputValue, handleChange } = (0, import_utils2.useDebounceState)({
+    delay: 300,
+    initialValue: ""
+  });
   const isDirty2 = useDirtyState();
   const { close: closePanel } = usePanelActions();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
   const { mutateAsync: publish, isPending: isPublishing } = usePublish();
+  const resetAndClosePanel = () => {
+    (0, import_store16.__dispatch)(slice.actions.resetToInitialState({ context: "frontend" }));
+    closeSaveChangesDialog();
+  };
   usePreventUnload();
-  return /* @__PURE__ */ React7.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React7.createElement(import_ui6.ErrorBoundary, { fallback: /* @__PURE__ */ React7.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React7.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React7.createElement(import_ui6.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React7.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React7.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Class Manager", "elementor")), /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React10.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React10.createElement(import_ui9.ErrorBoundary, { fallback: /* @__PURE__ */ React10.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React10.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React10.createElement(import_ui9.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React10.createElement(FlippedColorSwatchIcon, { fontSize: "inherit" }), (0, import_i18n8.__)("Class Manager", "elementor")), /* @__PURE__ */ React10.createElement(
     CloseButton,
     {
       sx: { marginLeft: "auto" },
@@ -785,8 +1023,43 @@ function ClassManagerPanel() {
         closePanel();
       }
     }
-  ))), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelBody, { px: 2 }, /* @__PURE__ */ React7.createElement(GlobalClassesList, { disabled: isPublishing })), /* @__PURE__ */ React7.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React7.createElement(
-    import_ui6.Button,
+  ))), /* @__PURE__ */ React10.createElement(
+    import_editor_panels.PanelBody,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%"
+      }
+    },
+    isVersion311IsActive2 && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ClassManagerSearch, { searchValue: inputValue, onChange: handleChange }), /* @__PURE__ */ React10.createElement(
+      import_ui9.Divider,
+      {
+        sx: {
+          borderWidth: "1px 0 0 0"
+        }
+      }
+    )),
+    /* @__PURE__ */ React10.createElement(
+      import_ui9.Box,
+      {
+        px: 2,
+        sx: {
+          flexGrow: 1,
+          overflowY: "auto"
+        }
+      },
+      /* @__PURE__ */ React10.createElement(
+        GlobalClassesList,
+        {
+          disabled: isPublishing,
+          searchValue: debouncedValue,
+          onSearch: handleChange
+        }
+      )
+    )
+  ), /* @__PURE__ */ React10.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React10.createElement(
+    import_ui9.Button,
     {
       fullWidth: true,
       size: "small",
@@ -796,17 +1069,19 @@ function ClassManagerPanel() {
       disabled: !isDirty2,
       loading: isPublishing
     },
-    (0, import_i18n5.__)("Save changes", "elementor")
-  )))), /* @__PURE__ */ React7.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React7.createElement(SaveChangesDialog, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.Title, null, (0, import_i18n5.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React7.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n5.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React7.createElement(
+    (0, import_i18n8.__)("Save changes", "elementor")
+  )))), /* @__PURE__ */ React10.createElement(ClassManagerIntroduction, null), isSaveChangesDialogOpen && /* @__PURE__ */ React10.createElement(SaveChangesDialog, null, /* @__PURE__ */ React10.createElement(import_ui9.DialogHeader, { onClose: closeSaveChangesDialog, logo: false }, /* @__PURE__ */ React10.createElement(SaveChangesDialog.Title, null, (0, import_i18n8.__)("You have unsaved changes", "elementor"))), /* @__PURE__ */ React10.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React10.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n8.__)("You have unsaved changes in the Class Manager.", "elementor")), /* @__PURE__ */ React10.createElement(SaveChangesDialog.ContentText, null, (0, import_i18n8.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React10.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
-        cancel: {
-          label: (0, import_i18n5.__)("Cancel", "elementor"),
-          action: closeSaveChangesDialog
+        discard: {
+          label: (0, import_i18n8.__)("Discard", "elementor"),
+          action: () => {
+            resetAndClosePanel();
+          }
         },
         confirm: {
-          label: (0, import_i18n5.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n8.__)("Save & Continue", "elementor"),
           action: async () => {
             await publish();
             closeSaveChangesDialog();
@@ -817,11 +1092,11 @@ function ClassManagerPanel() {
     }
   )));
 }
-var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React7.createElement(import_ui6.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React7.createElement(import_icons6.XIcon, { fontSize: "small" }));
-var ErrorBoundaryFallback = () => /* @__PURE__ */ React7.createElement(import_ui6.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React7.createElement(import_ui6.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React7.createElement("strong", null, (0, import_i18n5.__)("Something went wrong", "elementor"))));
+var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React10.createElement(import_ui9.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React10.createElement(import_icons7.XIcon, { fontSize: "small" }));
+var ErrorBoundaryFallback = () => /* @__PURE__ */ React10.createElement(import_ui9.Box, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React10.createElement(import_ui9.Alert, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React10.createElement("strong", null, (0, import_i18n8.__)("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -863,19 +1138,19 @@ var ClassManagerButton = () => {
     }
     openPanel();
   };
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(import_ui7.Tooltip, { title: (0, import_i18n6.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React8.createElement(import_ui7.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React8.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React8.createElement(SaveChangesDialog, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.Title, null, (0, import_i18n6.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React8.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React8.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n6.__)(
+  return /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(import_ui10.Tooltip, { title: (0, import_i18n9.__)("Class Manager", "elementor"), placement: "top" }, /* @__PURE__ */ React11.createElement(import_ui10.IconButton, { size: "tiny", onClick: handleOpenPanel, sx: { marginInlineEnd: -0.75 } }, /* @__PURE__ */ React11.createElement(FlippedColorSwatchIcon, { fontSize: "tiny" }))), isSaveChangesDialogOpen && /* @__PURE__ */ React11.createElement(SaveChangesDialog, null, /* @__PURE__ */ React11.createElement(SaveChangesDialog.Title, null, (0, import_i18n9.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React11.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React11.createElement(SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n9.__)(
     "To open the Class Manager, save your page first. You can't continue without saving.",
     "elementor"
-  ))), /* @__PURE__ */ React8.createElement(
+  ))), /* @__PURE__ */ React11.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
         cancel: {
-          label: (0, import_i18n6.__)("Stay here", "elementor"),
+          label: (0, import_i18n9.__)("Stay here", "elementor"),
           action: closeSaveChangesDialog
         },
         confirm: {
-          label: (0, import_i18n6.__)("Save & Continue", "elementor"),
+          label: (0, import_i18n9.__)("Save & Continue", "elementor"),
           action: async () => {
             await saveDocument();
             closeSaveChangesDialog();
@@ -888,16 +1163,16 @@ var ClassManagerButton = () => {
 };
 
 // src/components/populate-store.tsx
-var import_react6 = require("react");
-var import_store16 = require("@elementor/store");
+var import_react7 = require("react");
+var import_store18 = require("@elementor/store");
 function PopulateStore() {
-  const dispatch4 = (0, import_store16.__useDispatch)();
-  (0, import_react6.useEffect)(() => {
+  const dispatch5 = (0, import_store18.__useDispatch)();
+  (0, import_react7.useEffect)(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
         const { data: frontendData } = frontendRes;
-        dispatch4(
+        dispatch5(
           slice.actions.load({
             preview: {
               items: previewData.data,
@@ -911,21 +1186,21 @@ function PopulateStore() {
         );
       }
     );
-  }, [dispatch4]);
+  }, [dispatch5]);
   return null;
 }
 
 // src/sync-with-document-save.ts
 var import_editor_documents4 = require("@elementor/editor-documents");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
-var import_store18 = require("@elementor/store");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_store20 = require("@elementor/store");
 function syncWithDocumentSave() {
   const unsubscribe = syncDirtyState();
   bindSaveAction();
   return unsubscribe;
 }
 function syncDirtyState() {
-  return (0, import_store18.__subscribeWithSelector)(selectIsDirty, () => {
+  return (0, import_store20.__subscribeWithSelector)(selectIsDirty, () => {
     if (!isDirty()) {
       return;
     }
@@ -933,30 +1208,34 @@ function syncDirtyState() {
   });
 }
 function bindSaveAction() {
-  (0, import_editor_v1_adapters5.registerDataHook)("after", "document/save/save", (args) => {
+  (0, import_editor_v1_adapters6.registerDataHook)("after", "document/save/save", (args) => {
     return saveGlobalClasses({
       context: args.status === "publish" ? "frontend" : "preview"
     });
   });
 }
 function isDirty() {
-  return selectIsDirty((0, import_store18.__getState)());
+  return selectIsDirty((0, import_store20.__getState)());
 }
 
 // src/init.ts
 function init() {
-  (0, import_store20.__registerSlice)(slice);
+  (0, import_store22.__registerSlice)(slice);
   (0, import_editor_panels2.__registerPanel)(panel);
   import_editor_styles_repository4.stylesRepository.register(globalClassesStylesProvider);
   (0, import_editor.injectIntoLogic)({
     id: "global-classes-populate-store",
     component: PopulateStore
   });
-  (0, import_editor_editing_panel.injectIntoClassSelectorActions)({
+  (0, import_editor_editing_panel3.injectIntoClassSelectorActions)({
     id: "global-classes-manager-button",
     component: ClassManagerButton
   });
-  (0, import_editor_v1_adapters6.__privateListenTo)((0, import_editor_v1_adapters6.v1ReadyEvent)(), () => {
+  (0, import_editor_editing_panel3.registerStyleProviderToColors)(GLOBAL_CLASSES_PROVIDER_KEY, {
+    name: "global",
+    getThemeColor: (theme) => theme.palette.global.dark
+  });
+  (0, import_editor_v1_adapters7.__privateListenTo)((0, import_editor_v1_adapters7.v1ReadyEvent)(), () => {
     syncWithDocumentSave();
   });
 }