@elementor/editor-default-styles 4.3.0-1050 → 4.3.0-1052

package/dist/index.d.mts

@@ -1,3 +1,11 @@
+import * as React from 'react';
+
+type DefaultStylesTabEmbeddedProps = {
+    onRequestClose: () => void | Promise<void>;
+    onExposeCloseAttempt?: (attemptClose: (() => void) | null) => void;
+};
+declare function DefaultStylesTabEmbedded({ onRequestClose, onExposeCloseAttempt }: DefaultStylesTabEmbeddedProps): React.JSX.Element;
+
 declare function init(): void;
 
-export { init };
+export { DefaultStylesTabEmbedded, init };

package/dist/index.d.ts

@@ -1,3 +1,11 @@
+import * as React from 'react';
+
+type DefaultStylesTabEmbeddedProps = {
+    onRequestClose: () => void | Promise<void>;
+    onExposeCloseAttempt?: (attemptClose: (() => void) | null) => void;
+};
+declare function DefaultStylesTabEmbedded({ onRequestClose, onExposeCloseAttempt }: DefaultStylesTabEmbeddedProps): React.JSX.Element;
+
 declare function init(): void;
 
-export { init };
+export { DefaultStylesTabEmbedded, init };

package/dist/index.js

@@ -30,25 +30,45 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DefaultStylesTabEmbedded: () => DefaultStylesTabEmbedded,
   init: () => init
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/init.ts
-var import_editor = require("@elementor/editor");
-var import_editor_app_bar = require("@elementor/editor-app-bar");
-var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_panels3 = require("@elementor/editor-panels");
-var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
-var import_store12 = require("@elementor/store");
-
-// src/components/populate-store.tsx
-var import_react = require("react");
-var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+// src/components/default-styles-tab-embedded.tsx
+var React3 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
+var import_editor_responsive = require("@elementor/editor-responsive");
+var import_editor_ui = require("@elementor/editor-ui");
+var import_menus = require("@elementor/menus");
+var import_query = require("@elementor/query");
+var import_session = require("@elementor/session");
 var import_store4 = require("@elementor/store");
+var import_ui3 = require("@elementor/ui");
+var import_i18n2 = require("@wordpress/i18n");
 
-// src/load-default-styles.ts
+// src/allowed-tags.ts
+var getElementorConfig = () => window.elementor?.config ?? {};
+var getAllowedDefaultStyleTags = () => {
+  const tags = getElementorConfig().atomic?.default_styles?.allowed_tags;
+  if (!tags?.length) {
+    return [];
+  }
+  return tags;
+};
+var getDefaultActiveTag = (tags) => {
+  if (tags.includes("h1")) {
+    return "h1";
+  }
+  return tags[0] ?? "";
+};
+var isAllowedDefaultStyleTag = (tag, tags = getAllowedDefaultStyleTags()) => tags.includes(tag);
+
+// src/save-default-styles.ts
 var import_store2 = require("@elementor/store");
+var import_utils = require("@elementor/utils");
 
 // src/api.ts
 var import_http_client = require("@elementor/http-client");
@@ -153,96 +173,7 @@ var selectTagStyle = (0, import_store.__createSelector)(
   (data, id) => data[id]
 );
 
-// src/load-default-styles.ts
-async function loadDefaultStyles() {
-  const response = await apiClient.all();
-  const items = response.data.data;
-  (0, import_store2.__dispatch)(
-    slice.actions.load({
-      data: items
-    })
-  );
-}
-
-// src/components/populate-store.tsx
-var V2_PANEL_ROUTE = "panel/v2";
-function PopulateStore() {
-  (0, import_react.useEffect)(() => {
-    void loadDefaultStyles();
-    (0, import_editor_v1_adapters.registerDataHook)("after", "editor/documents/attach-preview", async () => {
-      if (selectIsDirty((0, import_store4.__getState)())) {
-        return;
-      }
-      await loadDefaultStyles();
-    });
-    const unsubscribe = (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL_ROUTE), () => {
-      if (selectIsDirty((0, import_store4.__getState)())) {
-        return;
-      }
-      void loadDefaultStyles();
-    });
-    return unsubscribe;
-  }, []);
-  return null;
-}
-
-// src/default-styles-open-gate.tsx
-var React5 = __toESM(require("react"));
-var import_react4 = require("react");
-var import_editor_documents = require("@elementor/editor-documents");
-var import_editor_ui2 = require("@elementor/editor-ui");
-var import_i18n3 = require("@wordpress/i18n");
-
-// src/default-styles-panel.tsx
-var React4 = __toESM(require("react"));
-var import_editor_panels2 = require("@elementor/editor-panels");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
-
-// src/components/default-styles-panel-content.tsx
-var React3 = __toESM(require("react"));
-var import_react3 = require("react");
-var import_editor_controls = require("@elementor/editor-controls");
-var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_responsive = require("@elementor/editor-responsive");
-var import_editor_ui = require("@elementor/editor-ui");
-var import_menus = require("@elementor/menus");
-var import_query = require("@elementor/query");
-var import_session = require("@elementor/session");
-var import_store8 = require("@elementor/store");
-var import_ui3 = require("@elementor/ui");
-var import_i18n2 = require("@wordpress/i18n");
-
-// src/allowed-tags.ts
-var getElementorConfig = () => window.elementor?.config ?? {};
-var getAllowedDefaultStyleTags = () => {
-  const tags = getElementorConfig().atomic?.default_styles?.allowed_tags;
-  if (!tags?.length) {
-    return [];
-  }
-  return tags;
-};
-var getDefaultActiveTag = (tags) => {
-  if (tags.includes("h1")) {
-    return "h1";
-  }
-  return tags[0] ?? "";
-};
-var isAllowedDefaultStyleTag = (tag, tags = getAllowedDefaultStyleTags()) => tags.includes(tag);
-
-// src/panel-interactions.ts
-function blockPanelInteractions() {
-  const extendedWindow = window;
-  extendedWindow.$e?.components?.get?.("panel")?.blockUserInteractions?.();
-}
-function unblockPanelInteractions() {
-  const extendedWindow = window;
-  extendedWindow.$e?.components?.get?.("panel")?.unblockUserInteractions?.();
-}
-
 // src/save-default-styles.ts
-var import_store6 = require("@elementor/store");
-var import_utils = require("@elementor/utils");
 function getChangedTags(state) {
   const current = selectData(state);
   const initial = selectInitialData(state);
@@ -262,7 +193,7 @@ function getChangedTags(state) {
   return changed;
 }
 async function saveDefaultStyles() {
-  const state = (0, import_store6.__getState)();
+  const state = (0, import_store2.__getState)();
   if (!selectIsDirty(state)) {
     return;
   }
@@ -278,12 +209,12 @@ async function saveDefaultStyles() {
       await apiClient.put(tag, style.variants);
     })
   );
-  (0, import_store6.__dispatch)(slice.actions.commit());
+  (0, import_store2.__dispatch)(slice.actions.commit());
 }
 
 // src/components/tag-chip.tsx
 var React2 = __toESM(require("react"));
-var import_react2 = require("react");
+var import_react = require("react");
 var import_icons = require("@elementor/icons");
 var import_ui2 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
@@ -322,7 +253,7 @@ function TagChip({ label, chipProps, activeState, onSelectState }) {
     variant: "popover",
     popupId: "tag-state-menu"
   });
-  const [chipRef, setChipRef] = (0, import_react2.useState)(null);
+  const [chipRef, setChipRef] = (0, import_react.useState)(null);
   const { onDelete: _onDelete, ...chipGroupProps } = chipProps;
   const isShowingState = Boolean(activeState);
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
@@ -387,7 +318,7 @@ function TagChip({ label, chipProps, activeState, onSelectState }) {
   ));
 }
 
-// src/components/default-styles-panel-content.tsx
+// src/components/default-styles-tab-embedded.tsx
 var { useMenuItems } = import_menus.controlActionsMenu;
 var SHIM_ELEMENT_ID = "default-styles-editor-shim";
 var SHIM_CLASSES_PROP = "__default_styles_classes__";
@@ -415,37 +346,38 @@ var shimElementType = {
   propsSchema: {},
   title: (0, import_i18n2.__)("Default Style", "elementor")
 };
-function DefaultStylesPanelContent({ onRequestClose }) {
-  const allowedTags = (0, import_react3.useMemo)(() => getAllowedDefaultStyleTags(), []);
-  const tagOptions = (0, import_react3.useMemo)(
+function DefaultStylesTabEmbedded({ onRequestClose, onExposeCloseAttempt }) {
+  const allowedTags = (0, import_react2.useMemo)(() => getAllowedDefaultStyleTags(), []);
+  const tagOptions = (0, import_react2.useMemo)(
     () => allowedTags.map((tag) => ({ label: tag, value: tag })),
     [allowedTags]
   );
-  const [selectedTag, setSelectedTagState] = (0, import_react3.useState)(() => readStoredActiveTag(allowedTags));
-  const [activeStyleState, setActiveStyleState] = (0, import_react3.useState)(null);
+  const [selectedTag, setSelectedTagState] = (0, import_react2.useState)(() => readStoredActiveTag(allowedTags));
+  const [activeStyleState, setActiveStyleState] = (0, import_react2.useState)(null);
   const breakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
   const menuItems = useMenuItems().default;
   const controlReplacements = (0, import_editor_controls.getControlReplacements)();
-  const isDirty = (0, import_store8.__useSelector)(selectIsDirty);
+  const isDirty = (0, import_store4.__useSelector)(selectIsDirty);
   const { mutateAsync: save, isPending: isSaving } = useSave();
   const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui.useDialog)();
   const setSelectedTag = (tag) => {
     setSelectedTagState(tag);
     (0, import_session.setSessionStorageItem)(LAST_ACTIVE_TAG_STORAGE_KEY, tag);
   };
-  const handleClosePanel = (0, import_react3.useCallback)(() => {
+  const handleClosePanel = (0, import_react2.useCallback)(() => {
     if (isDirty) {
       openSaveChangesDialog();
       return;
     }
-    onRequestClose();
+    void onRequestClose();
   }, [isDirty, onRequestClose, openSaveChangesDialog]);
-  (0, import_react3.useEffect)(() => {
-    blockPanelInteractions();
-    return () => {
-      unblockPanelInteractions();
-    };
-  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [onExposeCloseAttempt, handleClosePanel]);
   usePreventUnload(isDirty);
   const handleTagSelect = (_selected, reason, option) => {
     if (reason !== "selectOption" || !option.value) {
@@ -455,9 +387,9 @@ function DefaultStylesPanelContent({ onRequestClose }) {
     setActiveStyleState(null);
   };
   const resetAndClosePanel = () => {
-    (0, import_store8.__dispatch)(slice.actions.reset());
+    (0, import_store4.__dispatch)(slice.actions.reset());
     closeSaveChangesDialog();
-    onRequestClose();
+    void onRequestClose();
   };
   const handleSaveAndContinue = async () => {
     try {
@@ -466,89 +398,82 @@ function DefaultStylesPanelContent({ onRequestClose }) {
       return;
     }
     closeSaveChangesDialog();
-    onRequestClose();
+    void onRequestClose();
   };
-  return /* @__PURE__ */ React3.createElement(import_ui3.ErrorBoundary, { fallback: null }, /* @__PURE__ */ React3.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React3.createElement(import_editor_controls.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React3.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React3.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React3.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(import_ui3.ErrorBoundary, { fallback: null }, /* @__PURE__ */ React3.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React3.createElement(import_editor_controls.ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React3.createElement(import_editor_controls.ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React3.createElement(
     import_ui3.Stack,
     {
-      p: 1,
-      pl: 2,
-      width: "100%",
-      direction: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      spacing: 0.5
+      sx: {
+        flex: 1,
+        minHeight: 0,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      }
     },
-    /* @__PURE__ */ React3.createElement(import_editor_panels.PanelHeaderTitle, { sx: { flex: 1, minWidth: 0 } }, (0, import_i18n2.__)("Default Styles", "elementor")),
-    /* @__PURE__ */ React3.createElement(
-      import_ui3.CloseButton,
+    /* @__PURE__ */ React3.createElement(import_ui3.Box, { sx: { flex: 1, minHeight: 0, overflow: "auto" } }, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { sx: { px: 2, pt: 1, gap: 1 } }, /* @__PURE__ */ React3.createElement(import_ui3.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { htmlFor: TAG_SELECTOR_ID, size: "small", sx: { mb: 1 } }, (0, import_i18n2.__)("Tag", "elementor")), /* @__PURE__ */ React3.createElement(
+      import_editor_editing_panel2.CreatableAutocomplete,
       {
-        "aria-label": (0, import_i18n2.__)("Close", "elementor"),
-        sx: { flexShrink: 0 },
-        onClick: handleClosePanel
+        id: TAG_SELECTOR_ID,
+        size: "tiny",
+        placeholder: (0, import_i18n2.__)("Type tag name", "elementor"),
+        options: tagOptions,
+        selected: [toTagChip(selectedTag)],
+        onSelect: handleTagSelect,
+        renderTags: (values, getTagProps) => values.map((value, index) => /* @__PURE__ */ React3.createElement(
+          TagChip,
+          {
+            key: value.value ?? value.label,
+            label: value.label,
+            chipProps: getTagProps({ index }),
+            activeState: activeStyleState,
+            onSelectState: setActiveStyleState
+          }
+        ))
       }
-    )
-  )), /* @__PURE__ */ React3.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React3.createElement(import_ui3.Stack, { sx: { px: 2, pt: 1, gap: 1 } }, /* @__PURE__ */ React3.createElement(import_ui3.FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ React3.createElement(import_ui3.FormLabel, { htmlFor: TAG_SELECTOR_ID, size: "small", sx: { mb: 1 } }, (0, import_i18n2.__)("Tag", "elementor")), /* @__PURE__ */ React3.createElement(
-    import_editor_editing_panel2.CreatableAutocomplete,
-    {
-      id: TAG_SELECTOR_ID,
-      size: "tiny",
-      placeholder: (0, import_i18n2.__)("Type tag name", "elementor"),
-      options: tagOptions,
-      selected: [toTagChip(selectedTag)],
-      onSelect: handleTagSelect,
-      renderTags: (values, getTagProps) => values.map((value, index) => /* @__PURE__ */ React3.createElement(
-        TagChip,
-        {
-          key: value.value ?? value.label,
-          label: value.label,
-          chipProps: getTagProps({ index }),
-          activeState: activeStyleState,
-          onSelectState: setActiveStyleState
-        }
-      ))
-    }
-  ))), /* @__PURE__ */ React3.createElement(
-    import_editor_editing_panel2.ElementProvider,
-    {
-      element: shimElement,
-      elementType: shimElementType,
-      settings: {}
-    },
-    /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.ClassesPropProvider, { prop: SHIM_CLASSES_PROP }, /* @__PURE__ */ React3.createElement(
-      import_editor_editing_panel2.StyleProvider,
+    ))), /* @__PURE__ */ React3.createElement(
+      import_editor_editing_panel2.ElementProvider,
       {
-        meta: {
-          breakpoint,
-          state: activeStyleState
-        },
-        id: selectedTag,
-        setId: () => {
-        },
-        setMetaState: setActiveStyleState
+        element: shimElement,
+        elementType: shimElementType,
+        settings: {}
       },
-      /* @__PURE__ */ React3.createElement(import_session.SessionStorageProvider, { prefix: selectedTag }, /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.StyleInheritanceProvider, null, /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.SectionsList, null, /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.StyleSections, null)), /* @__PURE__ */ React3.createElement(
-        import_ui3.Box,
+      /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.ClassesPropProvider, { prop: SHIM_CLASSES_PROP }, /* @__PURE__ */ React3.createElement(
+        import_editor_editing_panel2.StyleProvider,
         {
-          sx: {
-            height: "150px"
+          meta: {
+            breakpoint,
+            state: activeStyleState
+          },
+          id: selectedTag,
+          setId: () => {
+          },
+          setMetaState: setActiveStyleState
+        },
+        /* @__PURE__ */ React3.createElement(import_session.SessionStorageProvider, { prefix: selectedTag }, /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.StyleInheritanceProvider, null, /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.SectionsList, null, /* @__PURE__ */ React3.createElement(import_editor_editing_panel2.StyleSections, null)), /* @__PURE__ */ React3.createElement(
+          import_ui3.Box,
+          {
+            sx: {
+              height: "150px"
+            }
           }
-        }
-      )))
+        )))
+      ))
+    )),
+    /* @__PURE__ */ React3.createElement(import_ui3.Box, { sx: { flexShrink: 0, px: 2, py: 1.5 } }, /* @__PURE__ */ React3.createElement(
+      import_ui3.Button,
+      {
+        fullWidth: true,
+        size: "small",
+        color: "global",
+        variant: "contained",
+        onClick: () => void save(),
+        disabled: !isDirty,
+        loading: isSaving
+      },
+      (0, import_i18n2.__)("Save changes", "elementor")
     ))
-  )), /* @__PURE__ */ React3.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React3.createElement(
-    import_ui3.Button,
-    {
-      fullWidth: true,
-      size: "small",
-      color: "global",
-      variant: "contained",
-      onClick: () => void save(),
-      disabled: !isDirty,
-      loading: isSaving
-    },
-    (0, import_i18n2.__)("Save changes", "elementor")
-  ))))), isSaveChangesDialogOpen && /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog, null, /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n2.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.Content, null, /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.ContentText, null, (0, import_i18n2.__)("You have unsaved changes in Default Styles.", "elementor")), /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.ContentText, null, (0, import_i18n2.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React3.createElement(
+  ))), isSaveChangesDialogOpen && /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog, null, /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n2.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.Content, null, /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.ContentText, null, (0, import_i18n2.__)("You have unsaved changes in Default Styles.", "elementor")), /* @__PURE__ */ React3.createElement(import_editor_ui.SaveChangesDialog.ContentText, null, (0, import_i18n2.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React3.createElement(
     import_editor_ui.SaveChangesDialog.Actions,
     {
       actions: {
@@ -570,7 +495,7 @@ function useSave() {
   });
 }
 function usePreventUnload(isDirty) {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -583,104 +508,56 @@ function usePreventUnload(isDirty) {
   }, [isDirty]);
 }
 
-// src/default-styles-panel.tsx
-var DEFAULT_STYLES_PANEL_ID = "default-styles";
-var { panel, usePanelStatus, usePanelActions } = (0, import_editor_panels2.__createPanel)({
-  id: DEFAULT_STYLES_PANEL_ID,
-  component: DefaultStylesPanelRoot,
-  allowedEditModes: ["edit", DEFAULT_STYLES_PANEL_ID],
-  onOpen: () => {
-    (0, import_editor_v1_adapters2.changeEditMode)(DEFAULT_STYLES_PANEL_ID);
-  },
-  onClose: async () => {
-    (0, import_editor_v1_adapters2.changeEditMode)("edit");
-  },
-  isOpenPreviousElement: true
-});
-function DefaultStylesPanelRoot() {
-  const { close } = usePanelActions();
-  return /* @__PURE__ */ React4.createElement(
-    DefaultStylesPanelContent,
-    {
-      onRequestClose: () => {
-        void close();
-      }
-    }
+// src/init.ts
+var import_editor = require("@elementor/editor");
+var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
+var import_editor_styles_repository2 = require("@elementor/editor-styles-repository");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var import_store12 = require("@elementor/store");
+
+// src/components/populate-store.tsx
+var import_react3 = require("react");
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_store8 = require("@elementor/store");
+
+// src/load-default-styles.ts
+var import_store6 = require("@elementor/store");
+async function loadDefaultStyles() {
+  const response = await apiClient.all();
+  const items = response.data.data;
+  (0, import_store6.__dispatch)(
+    slice.actions.load({
+      data: items
+    })
   );
 }
 
-// src/default-styles-open-gate.tsx
-var EVENT_REQUEST_OPEN_DEFAULT_STYLES = "elementor/default-styles/request-open";
-function DefaultStylesOpenGate() {
-  const { open } = usePanelActions();
-  const document = (0, import_editor_documents.__useActiveDocument)();
-  const { save: saveDocument } = (0, import_editor_documents.__useActiveDocumentActions)();
-  const { open: openSaveDialog, close: closeSaveDialog, isOpen: isSaveDialogOpen } = (0, import_editor_ui2.useDialog)();
-  const documentRef = (0, import_react4.useRef)(document);
-  documentRef.current = document;
-  const pendingOpenRef = (0, import_react4.useRef)(null);
-  const gatedOpen = (0, import_react4.useCallback)(
-    (onClean) => {
-      if (documentRef.current?.isDirty) {
-        pendingOpenRef.current = onClean;
-        openSaveDialog();
+// src/components/populate-store.tsx
+var V2_PANEL_ROUTE = "panel/v2";
+function PopulateStore() {
+  (0, import_react3.useEffect)(() => {
+    void loadDefaultStyles();
+    (0, import_editor_v1_adapters.registerDataHook)("after", "editor/documents/attach-preview", async () => {
+      if (selectIsDirty((0, import_store8.__getState)())) {
         return;
       }
-      onClean();
-    },
-    [openSaveDialog]
-  );
-  const handleSaveAndContinue = (0, import_react4.useCallback)(async () => {
-    try {
-      await saveDocument();
-      closeSaveDialog();
-      pendingOpenRef.current?.();
-      pendingOpenRef.current = null;
-    } catch {
-    }
-  }, [saveDocument, closeSaveDialog]);
-  const handleStayHere = (0, import_react4.useCallback)(() => {
-    closeSaveDialog();
-    pendingOpenRef.current = null;
-  }, [closeSaveDialog]);
-  (0, import_react4.useEffect)(() => {
-    const handler = () => {
-      gatedOpen(() => {
-        void open();
-      });
-    };
-    window.addEventListener(EVENT_REQUEST_OPEN_DEFAULT_STYLES, handler);
-    return () => {
-      window.removeEventListener(EVENT_REQUEST_OPEN_DEFAULT_STYLES, handler);
-    };
-  }, [gatedOpen, open]);
-  if (!isSaveDialogOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ React5.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React5.createElement(import_editor_ui2.SaveChangesDialog, null, /* @__PURE__ */ React5.createElement(import_editor_ui2.SaveChangesDialog.Title, null, (0, import_i18n3.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React5.createElement(import_editor_ui2.SaveChangesDialog.Content, null, /* @__PURE__ */ React5.createElement(import_editor_ui2.SaveChangesDialog.ContentText, { sx: { mb: 2 } }, (0, import_i18n3.__)(
-    "To open Default Styles, save your page first. You can't continue without saving.",
-    "elementor"
-  ))), /* @__PURE__ */ React5.createElement(
-    import_editor_ui2.SaveChangesDialog.Actions,
-    {
-      actions: {
-        cancel: {
-          label: (0, import_i18n3.__)("Stay here", "elementor"),
-          action: handleStayHere
-        },
-        confirm: {
-          label: (0, import_i18n3.__)("Save & Continue", "elementor"),
-          action: handleSaveAndContinue
-        }
+      await loadDefaultStyles();
+    });
+    const unsubscribe = (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL_ROUTE), () => {
+      if (selectIsDirty((0, import_store8.__getState)())) {
+        return;
       }
-    }
-  )));
+      void loadDefaultStyles();
+    });
+    return unsubscribe;
+  }, []);
+  return null;
 }
 
 // src/default-styles-provider.ts
 var import_editor_styles_repository = require("@elementor/editor-styles-repository");
 var import_store10 = require("@elementor/store");
-var import_i18n4 = require("@wordpress/i18n");
+var import_i18n3 = require("@wordpress/i18n");
 var DEFAULT_STYLES_PROVIDER_KEY = "default-styles";
 var DEFAULT_STYLES_CSS_NAME_PREFIX = "e-default-";
 var resolveCssName = (id) => `${DEFAULT_STYLES_CSS_NAME_PREFIX}${id}`;
@@ -698,8 +575,8 @@ var defaultStylesStylesProvider = (0, import_editor_styles_repository.createStyl
   key: DEFAULT_STYLES_PROVIDER_KEY,
   priority: 15,
   labels: {
-    singular: (0, import_i18n4.__)("tag", "elementor"),
-    plural: (0, import_i18n4.__)("tags", "elementor")
+    singular: (0, import_i18n3.__)("tag", "elementor"),
+    plural: (0, import_i18n3.__)("tags", "elementor")
   },
   subscribe: (cb) => subscribeWithStates(cb),
   actions: {
@@ -755,21 +632,12 @@ var subscribeWithStates = (cb) => {
   );
 };
 
-// src/hooks/use-default-styles-action-props.ts
-var import_icons2 = require("@elementor/icons");
-var import_i18n5 = require("@wordpress/i18n");
-function useDefaultStylesActionProps() {
-  return {
-    title: (0, import_i18n5.__)("Default Styles", "elementor"),
-    icon: import_icons2.TextIcon,
-    onClick: () => {
-      window.dispatchEvent(new CustomEvent(EVENT_REQUEST_OPEN_DEFAULT_STYLES));
-    }
-  };
-}
-
 // src/init.ts
+var DEFAULT_STYLES_EXPERIMENT = "e_default_styles";
 function init() {
+  if (!(0, import_editor_v1_adapters2.isExperimentActive)(DEFAULT_STYLES_EXPERIMENT)) {
+    return;
+  }
   (0, import_store12.__registerSlice)(slice);
   (0, import_editor_editing_panel3.registerElementPanelDefaults)("default-style", {
     defaultTab: "style",
@@ -777,24 +645,15 @@ function init() {
       style: [...import_editor_editing_panel3.STYLE_SECTION_NAMES]
     }
   });
-  (0, import_editor_panels3.__registerPanel)(panel);
   import_editor_styles_repository2.stylesRepository.register(defaultStylesStylesProvider);
-  import_editor_app_bar.toolsMenu.registerAction({
-    id: "default-styles-button",
-    priority: 4,
-    useProps: useDefaultStylesActionProps
-  });
   (0, import_editor.injectIntoLogic)({
     id: "default-styles-populate-store",
     component: PopulateStore
   });
-  (0, import_editor.injectIntoLogic)({
-    id: "default-styles-open-gate",
-    component: DefaultStylesOpenGate
-  });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DefaultStylesTabEmbedded,
   init
 });
 //# sourceMappingURL=index.js.map