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

package/dist/index.mjs

@@ -1,18 +1,56 @@
-// src/init.ts
-import { injectIntoLogic } from "@elementor/editor";
-import { toolsMenu } from "@elementor/editor-app-bar";
-import { registerElementPanelDefaults, STYLE_SECTION_NAMES } from "@elementor/editor-editing-panel";
-import { __registerPanel as registerPanel } from "@elementor/editor-panels";
-import { stylesRepository } from "@elementor/editor-styles-repository";
-import { __registerSlice as registerSlice } from "@elementor/store";
+// src/components/default-styles-tab-embedded.tsx
+import * as React3 from "react";
+import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
+import {
+  ControlActionsProvider,
+  ControlReplacementsProvider,
+  getControlReplacements
+} from "@elementor/editor-controls";
+import {
+  ClassesPropProvider,
+  CreatableAutocomplete,
+  ElementProvider,
+  SectionsList,
+  StyleInheritanceProvider,
+  StyleProvider,
+  StyleSections
+} from "@elementor/editor-editing-panel";
+import { useActiveBreakpoint } from "@elementor/editor-responsive";
+import { SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
+import { controlActionsMenu } from "@elementor/menus";
+import { useMutation } from "@elementor/query";
+import { getSessionStorageItem, SessionStorageProvider, setSessionStorageItem } from "@elementor/session";
+import { __dispatch as dispatch2, __useSelector as useSelector } from "@elementor/store";
+import {
+  Box,
+  Button,
+  ErrorBoundary,
+  FormControl,
+  FormLabel,
+  Stack as Stack2
+} from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
 
-// src/components/populate-store.tsx
-import { useEffect } from "react";
-import { __privateListenTo as listenTo, registerDataHook, routeCloseEvent } from "@elementor/editor-v1-adapters";
-import { __getState as getState } from "@elementor/store";
+// 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/load-default-styles.ts
-import { __dispatch as dispatch } from "@elementor/store";
+// src/save-default-styles.ts
+import { __dispatch as dispatch, __getState as getState } from "@elementor/store";
+import { hash } from "@elementor/utils";
 
 // src/api.ts
 import { httpService } from "@elementor/http-client";
@@ -122,119 +160,7 @@ var selectTagStyle = createSelector(
   (data, id) => data[id]
 );
 
-// src/load-default-styles.ts
-async function loadDefaultStyles() {
-  const response = await apiClient.all();
-  const items = response.data.data;
-  dispatch(
-    slice.actions.load({
-      data: items
-    })
-  );
-}
-
-// src/components/populate-store.tsx
-var V2_PANEL_ROUTE = "panel/v2";
-function PopulateStore() {
-  useEffect(() => {
-    void loadDefaultStyles();
-    registerDataHook("after", "editor/documents/attach-preview", async () => {
-      if (selectIsDirty(getState())) {
-        return;
-      }
-      await loadDefaultStyles();
-    });
-    const unsubscribe = listenTo(routeCloseEvent(V2_PANEL_ROUTE), () => {
-      if (selectIsDirty(getState())) {
-        return;
-      }
-      void loadDefaultStyles();
-    });
-    return unsubscribe;
-  }, []);
-  return null;
-}
-
-// src/default-styles-open-gate.tsx
-import * as React5 from "react";
-import { useCallback as useCallback2, useEffect as useEffect3, useRef } from "react";
-import {
-  __useActiveDocument as useActiveDocument,
-  __useActiveDocumentActions as useActiveDocumentActions
-} from "@elementor/editor-documents";
-import { SaveChangesDialog as SaveChangesDialog2, ThemeProvider as ThemeProvider2, useDialog as useDialog2 } from "@elementor/editor-ui";
-import { __ as __3 } from "@wordpress/i18n";
-
-// src/default-styles-panel.tsx
-import * as React4 from "react";
-import { __createPanel as createPanel } from "@elementor/editor-panels";
-import { changeEditMode } from "@elementor/editor-v1-adapters";
-
-// src/components/default-styles-panel-content.tsx
-import * as React3 from "react";
-import { useCallback, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
-import {
-  ControlActionsProvider,
-  ControlReplacementsProvider,
-  getControlReplacements
-} from "@elementor/editor-controls";
-import {
-  ClassesPropProvider,
-  CreatableAutocomplete,
-  ElementProvider,
-  SectionsList,
-  StyleInheritanceProvider,
-  StyleProvider,
-  StyleSections
-} from "@elementor/editor-editing-panel";
-import { Panel, PanelBody, PanelFooter, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
-import { useActiveBreakpoint } from "@elementor/editor-responsive";
-import { SaveChangesDialog, ThemeProvider, useDialog } from "@elementor/editor-ui";
-import { controlActionsMenu } from "@elementor/menus";
-import { useMutation } from "@elementor/query";
-import { getSessionStorageItem, SessionStorageProvider, setSessionStorageItem } from "@elementor/session";
-import { __dispatch as dispatch3, __useSelector as useSelector } from "@elementor/store";
-import {
-  Box,
-  Button,
-  CloseButton,
-  ErrorBoundary,
-  FormControl,
-  FormLabel,
-  Stack as Stack2
-} from "@elementor/ui";
-import { __ as __2 } from "@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
-import { __dispatch as dispatch2, __getState as getState2 } from "@elementor/store";
-import { hash } from "@elementor/utils";
 function getChangedTags(state) {
   const current = selectData(state);
   const initial = selectInitialData(state);
@@ -254,7 +180,7 @@ function getChangedTags(state) {
   return changed;
 }
 async function saveDefaultStyles() {
-  const state = getState2();
+  const state = getState();
   if (!selectIsDirty(state)) {
     return;
   }
@@ -270,7 +196,7 @@ async function saveDefaultStyles() {
       await apiClient.put(tag, style.variants);
     })
   );
-  dispatch2(slice.actions.commit());
+  dispatch(slice.actions.commit());
 }
 
 // src/components/tag-chip.tsx
@@ -386,7 +312,7 @@ function TagChip({ label, chipProps, activeState, onSelectState }) {
   ));
 }
 
-// src/components/default-styles-panel-content.tsx
+// src/components/default-styles-tab-embedded.tsx
 var { useMenuItems } = controlActionsMenu;
 var SHIM_ELEMENT_ID = "default-styles-editor-shim";
 var SHIM_CLASSES_PROP = "__default_styles_classes__";
@@ -414,7 +340,7 @@ var shimElementType = {
   propsSchema: {},
   title: __2("Default Style", "elementor")
 };
-function DefaultStylesPanelContent({ onRequestClose }) {
+function DefaultStylesTabEmbedded({ onRequestClose, onExposeCloseAttempt }) {
   const allowedTags = useMemo(() => getAllowedDefaultStyleTags(), []);
   const tagOptions = useMemo(
     () => allowedTags.map((tag) => ({ label: tag, value: tag })),
@@ -437,14 +363,15 @@ function DefaultStylesPanelContent({ onRequestClose }) {
       openSaveChangesDialog();
       return;
     }
-    onRequestClose();
+    void onRequestClose();
   }, [isDirty, onRequestClose, openSaveChangesDialog]);
-  useEffect2(() => {
-    blockPanelInteractions();
-    return () => {
-      unblockPanelInteractions();
-    };
-  }, []);
+  useEffect(() => {
+    if (!onExposeCloseAttempt) {
+      return;
+    }
+    onExposeCloseAttempt(() => handleClosePanel());
+    return () => onExposeCloseAttempt(null);
+  }, [onExposeCloseAttempt, handleClosePanel]);
   usePreventUnload(isDirty);
   const handleTagSelect = (_selected, reason, option) => {
     if (reason !== "selectOption" || !option.value) {
@@ -454,9 +381,9 @@ function DefaultStylesPanelContent({ onRequestClose }) {
     setActiveStyleState(null);
   };
   const resetAndClosePanel = () => {
-    dispatch3(slice.actions.reset());
+    dispatch2(slice.actions.reset());
     closeSaveChangesDialog();
-    onRequestClose();
+    void onRequestClose();
   };
   const handleSaveAndContinue = async () => {
     try {
@@ -465,89 +392,82 @@ function DefaultStylesPanelContent({ onRequestClose }) {
       return;
     }
     closeSaveChangesDialog();
-    onRequestClose();
+    void onRequestClose();
   };
-  return /* @__PURE__ */ React3.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React3.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React3.createElement(Panel, null, /* @__PURE__ */ React3.createElement(PanelHeader, null, /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React3.createElement(ThemeProvider, null, /* @__PURE__ */ React3.createElement(ControlActionsProvider, { items: menuItems }, /* @__PURE__ */ React3.createElement(ControlReplacementsProvider, { replacements: controlReplacements }, /* @__PURE__ */ React3.createElement(
     Stack2,
     {
-      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(PanelHeaderTitle, { sx: { flex: 1, minWidth: 0 } }, __2("Default Styles", "elementor")),
-    /* @__PURE__ */ React3.createElement(
-      CloseButton,
+    /* @__PURE__ */ React3.createElement(Box, { sx: { flex: 1, minHeight: 0, overflow: "auto" } }, /* @__PURE__ */ React3.createElement(Stack2, { sx: { px: 2, pt: 1, gap: 1 } }, /* @__PURE__ */ React3.createElement(FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ React3.createElement(FormLabel, { htmlFor: TAG_SELECTOR_ID, size: "small", sx: { mb: 1 } }, __2("Tag", "elementor")), /* @__PURE__ */ React3.createElement(
+      CreatableAutocomplete,
       {
-        "aria-label": __2("Close", "elementor"),
-        sx: { flexShrink: 0 },
-        onClick: handleClosePanel
+        id: TAG_SELECTOR_ID,
+        size: "tiny",
+        placeholder: __2("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(PanelBody, null, /* @__PURE__ */ React3.createElement(Stack2, { sx: { px: 2, pt: 1, gap: 1 } }, /* @__PURE__ */ React3.createElement(FormControl, { fullWidth: true, size: "small" }, /* @__PURE__ */ React3.createElement(FormLabel, { htmlFor: TAG_SELECTOR_ID, size: "small", sx: { mb: 1 } }, __2("Tag", "elementor")), /* @__PURE__ */ React3.createElement(
-    CreatableAutocomplete,
-    {
-      id: TAG_SELECTOR_ID,
-      size: "tiny",
-      placeholder: __2("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(
-    ElementProvider,
-    {
-      element: shimElement,
-      elementType: shimElementType,
-      settings: {}
-    },
-    /* @__PURE__ */ React3.createElement(ClassesPropProvider, { prop: SHIM_CLASSES_PROP }, /* @__PURE__ */ React3.createElement(
-      StyleProvider,
+    ))), /* @__PURE__ */ React3.createElement(
+      ElementProvider,
       {
-        meta: {
-          breakpoint,
-          state: activeStyleState
-        },
-        id: selectedTag,
-        setId: () => {
-        },
-        setMetaState: setActiveStyleState
+        element: shimElement,
+        elementType: shimElementType,
+        settings: {}
       },
-      /* @__PURE__ */ React3.createElement(SessionStorageProvider, { prefix: selectedTag }, /* @__PURE__ */ React3.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React3.createElement(SectionsList, null, /* @__PURE__ */ React3.createElement(StyleSections, null)), /* @__PURE__ */ React3.createElement(
-        Box,
+      /* @__PURE__ */ React3.createElement(ClassesPropProvider, { prop: SHIM_CLASSES_PROP }, /* @__PURE__ */ React3.createElement(
+        StyleProvider,
         {
-          sx: {
-            height: "150px"
+          meta: {
+            breakpoint,
+            state: activeStyleState
+          },
+          id: selectedTag,
+          setId: () => {
+          },
+          setMetaState: setActiveStyleState
+        },
+        /* @__PURE__ */ React3.createElement(SessionStorageProvider, { prefix: selectedTag }, /* @__PURE__ */ React3.createElement(StyleInheritanceProvider, null, /* @__PURE__ */ React3.createElement(SectionsList, null, /* @__PURE__ */ React3.createElement(StyleSections, null)), /* @__PURE__ */ React3.createElement(
+          Box,
+          {
+            sx: {
+              height: "150px"
+            }
           }
-        }
-      )))
+        )))
+      ))
+    )),
+    /* @__PURE__ */ React3.createElement(Box, { sx: { flexShrink: 0, px: 2, py: 1.5 } }, /* @__PURE__ */ React3.createElement(
+      Button,
+      {
+        fullWidth: true,
+        size: "small",
+        color: "global",
+        variant: "contained",
+        onClick: () => void save(),
+        disabled: !isDirty,
+        loading: isSaving
+      },
+      __2("Save changes", "elementor")
     ))
-  )), /* @__PURE__ */ React3.createElement(PanelFooter, null, /* @__PURE__ */ React3.createElement(
-    Button,
-    {
-      fullWidth: true,
-      size: "small",
-      color: "global",
-      variant: "contained",
-      onClick: () => void save(),
-      disabled: !isDirty,
-      loading: isSaving
-    },
-    __2("Save changes", "elementor")
-  ))))), isSaveChangesDialogOpen && /* @__PURE__ */ React3.createElement(SaveChangesDialog, null, /* @__PURE__ */ React3.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __2("You have unsaved changes", "elementor")), /* @__PURE__ */ React3.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React3.createElement(SaveChangesDialog.ContentText, null, __2("You have unsaved changes in Default Styles.", "elementor")), /* @__PURE__ */ React3.createElement(SaveChangesDialog.ContentText, null, __2("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React3.createElement(
+  ))), isSaveChangesDialogOpen && /* @__PURE__ */ React3.createElement(SaveChangesDialog, null, /* @__PURE__ */ React3.createElement(SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, __2("You have unsaved changes", "elementor")), /* @__PURE__ */ React3.createElement(SaveChangesDialog.Content, null, /* @__PURE__ */ React3.createElement(SaveChangesDialog.ContentText, null, __2("You have unsaved changes in Default Styles.", "elementor")), /* @__PURE__ */ React3.createElement(SaveChangesDialog.ContentText, null, __2("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React3.createElement(
     SaveChangesDialog.Actions,
     {
       actions: {
@@ -569,7 +489,7 @@ function useSave() {
   });
 }
 function usePreventUnload(isDirty) {
-  useEffect2(() => {
+  useEffect(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty) {
         event.preventDefault();
@@ -582,98 +502,50 @@ function usePreventUnload(isDirty) {
   }, [isDirty]);
 }
 
-// src/default-styles-panel.tsx
-var DEFAULT_STYLES_PANEL_ID = "default-styles";
-var { panel, usePanelStatus, usePanelActions } = createPanel({
-  id: DEFAULT_STYLES_PANEL_ID,
-  component: DefaultStylesPanelRoot,
-  allowedEditModes: ["edit", DEFAULT_STYLES_PANEL_ID],
-  onOpen: () => {
-    changeEditMode(DEFAULT_STYLES_PANEL_ID);
-  },
-  onClose: async () => {
-    changeEditMode("edit");
-  },
-  isOpenPreviousElement: true
-});
-function DefaultStylesPanelRoot() {
-  const { close } = usePanelActions();
-  return /* @__PURE__ */ React4.createElement(
-    DefaultStylesPanelContent,
-    {
-      onRequestClose: () => {
-        void close();
-      }
-    }
+// src/init.ts
+import { injectIntoLogic } from "@elementor/editor";
+import { registerElementPanelDefaults, STYLE_SECTION_NAMES } from "@elementor/editor-editing-panel";
+import { stylesRepository } from "@elementor/editor-styles-repository";
+import { isExperimentActive } from "@elementor/editor-v1-adapters";
+import { __registerSlice as registerSlice } from "@elementor/store";
+
+// src/components/populate-store.tsx
+import { useEffect as useEffect2 } from "react";
+import { __privateListenTo as listenTo, registerDataHook, routeCloseEvent } from "@elementor/editor-v1-adapters";
+import { __getState as getState2 } from "@elementor/store";
+
+// src/load-default-styles.ts
+import { __dispatch as dispatch3 } from "@elementor/store";
+async function loadDefaultStyles() {
+  const response = await apiClient.all();
+  const items = response.data.data;
+  dispatch3(
+    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 = useActiveDocument();
-  const { save: saveDocument } = useActiveDocumentActions();
-  const { open: openSaveDialog, close: closeSaveDialog, isOpen: isSaveDialogOpen } = useDialog2();
-  const documentRef = useRef(document);
-  documentRef.current = document;
-  const pendingOpenRef = useRef(null);
-  const gatedOpen = useCallback2(
-    (onClean) => {
-      if (documentRef.current?.isDirty) {
-        pendingOpenRef.current = onClean;
-        openSaveDialog();
+// src/components/populate-store.tsx
+var V2_PANEL_ROUTE = "panel/v2";
+function PopulateStore() {
+  useEffect2(() => {
+    void loadDefaultStyles();
+    registerDataHook("after", "editor/documents/attach-preview", async () => {
+      if (selectIsDirty(getState2())) {
         return;
       }
-      onClean();
-    },
-    [openSaveDialog]
-  );
-  const handleSaveAndContinue = useCallback2(async () => {
-    try {
-      await saveDocument();
-      closeSaveDialog();
-      pendingOpenRef.current?.();
-      pendingOpenRef.current = null;
-    } catch {
-    }
-  }, [saveDocument, closeSaveDialog]);
-  const handleStayHere = useCallback2(() => {
-    closeSaveDialog();
-    pendingOpenRef.current = null;
-  }, [closeSaveDialog]);
-  useEffect3(() => {
-    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(ThemeProvider2, null, /* @__PURE__ */ React5.createElement(SaveChangesDialog2, null, /* @__PURE__ */ React5.createElement(SaveChangesDialog2.Title, null, __3("You have unsaved changes", "elementor")), /* @__PURE__ */ React5.createElement(SaveChangesDialog2.Content, null, /* @__PURE__ */ React5.createElement(SaveChangesDialog2.ContentText, { sx: { mb: 2 } }, __3(
-    "To open Default Styles, save your page first. You can't continue without saving.",
-    "elementor"
-  ))), /* @__PURE__ */ React5.createElement(
-    SaveChangesDialog2.Actions,
-    {
-      actions: {
-        cancel: {
-          label: __3("Stay here", "elementor"),
-          action: handleStayHere
-        },
-        confirm: {
-          label: __3("Save & Continue", "elementor"),
-          action: handleSaveAndContinue
-        }
+      await loadDefaultStyles();
+    });
+    const unsubscribe = listenTo(routeCloseEvent(V2_PANEL_ROUTE), () => {
+      if (selectIsDirty(getState2())) {
+        return;
       }
-    }
-  )));
+      void loadDefaultStyles();
+    });
+    return unsubscribe;
+  }, []);
+  return null;
 }
 
 // src/default-styles-provider.ts
@@ -683,7 +555,7 @@ import {
   __getState as getState3,
   __subscribeWithSelector as subscribeWithSelector
 } from "@elementor/store";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __3 } from "@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}`;
@@ -701,8 +573,8 @@ var defaultStylesStylesProvider = createStylesProvider({
   key: DEFAULT_STYLES_PROVIDER_KEY,
   priority: 15,
   labels: {
-    singular: __4("tag", "elementor"),
-    plural: __4("tags", "elementor")
+    singular: __3("tag", "elementor"),
+    plural: __3("tags", "elementor")
   },
   subscribe: (cb) => subscribeWithStates(cb),
   actions: {
@@ -758,21 +630,12 @@ var subscribeWithStates = (cb) => {
   );
 };
 
-// src/hooks/use-default-styles-action-props.ts
-import { TextIcon } from "@elementor/icons";
-import { __ as __5 } from "@wordpress/i18n";
-function useDefaultStylesActionProps() {
-  return {
-    title: __5("Default Styles", "elementor"),
-    icon: TextIcon,
-    onClick: () => {
-      window.dispatchEvent(new CustomEvent(EVENT_REQUEST_OPEN_DEFAULT_STYLES));
-    }
-  };
-}
-
 // src/init.ts
+var DEFAULT_STYLES_EXPERIMENT = "e_default_styles";
 function init() {
+  if (!isExperimentActive(DEFAULT_STYLES_EXPERIMENT)) {
+    return;
+  }
   registerSlice(slice);
   registerElementPanelDefaults("default-style", {
     defaultTab: "style",
@@ -780,23 +643,14 @@ function init() {
       style: [...STYLE_SECTION_NAMES]
     }
   });
-  registerPanel(panel);
   stylesRepository.register(defaultStylesStylesProvider);
-  toolsMenu.registerAction({
-    id: "default-styles-button",
-    priority: 4,
-    useProps: useDefaultStylesActionProps
-  });
   injectIntoLogic({
     id: "default-styles-populate-store",
     component: PopulateStore
   });
-  injectIntoLogic({
-    id: "default-styles-open-gate",
-    component: DefaultStylesOpenGate
-  });
 }
 export {
+  DefaultStylesTabEmbedded,
   init
 };
 //# sourceMappingURL=index.mjs.map