@elementor/editor-default-styles 4.3.0-1042

package/dist/index.mjs

@@ -0,0 +1,802 @@
+// 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/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/load-default-styles.ts
+import { __dispatch as dispatch } from "@elementor/store";
+
+// src/api.ts
+import { httpService } from "@elementor/http-client";
+var RESOURCE_URL = "/default-styles";
+var BASE_URL = "elementor/v1";
+var apiClient = {
+  all: () => httpService().get(`${BASE_URL}${RESOURCE_URL}`),
+  put: (tag, variants) => httpService().put(`${BASE_URL}${RESOURCE_URL}/${tag}`, {
+    type: "class",
+    variants
+  }),
+  delete: (tag) => httpService().delete(`${BASE_URL}${RESOURCE_URL}/${tag}`)
+};
+
+// src/store.ts
+import {
+  getVariantByMeta
+} from "@elementor/editor-styles";
+import {
+  __createSelector as createSelector,
+  __createSlice as createSlice
+} from "@elementor/store";
+var initialState = {
+  data: {},
+  initialData: {},
+  isDirty: false
+};
+var SLICE_NAME = "defaultStyles";
+var slice = createSlice({
+  name: SLICE_NAME,
+  initialState,
+  reducers: {
+    load(state, {
+      payload: { data }
+    }) {
+      state.initialData = structuredClone(data);
+      state.data = structuredClone(data);
+      state.isDirty = false;
+    },
+    update(state, { payload }) {
+      state.data[payload.style.id] = {
+        ...state.data[payload.style.id],
+        ...payload.style
+      };
+      state.isDirty = true;
+    },
+    updateProps(state, {
+      payload
+    }) {
+      const style = state.data[payload.id] ?? {
+        id: payload.id,
+        label: payload.id,
+        type: "class",
+        variants: []
+      };
+      const variant = getVariantByMeta(style, payload.meta);
+      let customCss = ("custom_css" in payload ? payload.custom_css : variant?.custom_css) ?? null;
+      customCss = customCss?.raw ? customCss : null;
+      if (variant) {
+        const payloadProps = JSON.parse(JSON.stringify(payload.props));
+        const mode = payload.mode ?? "merge";
+        if (mode === "replace") {
+          variant.props = payloadProps;
+        } else {
+          const variantProps = JSON.parse(JSON.stringify(variant.props));
+          variant.props = { ...variantProps, ...payloadProps };
+        }
+        variant.custom_css = customCss;
+      } else {
+        style.variants.push({
+          meta: payload.meta,
+          props: payload.props,
+          custom_css: customCss
+        });
+      }
+      state.data[payload.id] = style;
+      state.isDirty = true;
+    },
+    reset(state) {
+      state.data = structuredClone(state.initialData);
+      state.isDirty = false;
+    },
+    commit(state) {
+      state.initialData = structuredClone(state.data);
+      state.isDirty = false;
+    },
+    deleteTag(state, { payload }) {
+      delete state.data[payload];
+      state.isDirty = true;
+    }
+  }
+});
+var selectData = createSelector(
+  (state) => state.defaultStyles.data,
+  (data) => data
+);
+var selectIsDirty = createSelector(
+  (state) => state.defaultStyles.isDirty,
+  (isDirty) => isDirty
+);
+var selectInitialData = createSelector(
+  (state) => state.defaultStyles.initialData,
+  (initialData) => initialData
+);
+var selectTagStyle = createSelector(
+  [selectData, (_state, id) => id],
+  (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);
+  const changed = [];
+  Object.keys(current).forEach((tag) => {
+    const currentStyle = current[tag];
+    const initialStyle = initial[tag];
+    if (!initialStyle || hash(currentStyle) !== hash(initialStyle)) {
+      changed.push(tag);
+    }
+  });
+  Object.keys(initial).forEach((tag) => {
+    if (!current[tag]) {
+      changed.push(tag);
+    }
+  });
+  return changed;
+}
+async function saveDefaultStyles() {
+  const state = getState2();
+  if (!selectIsDirty(state)) {
+    return;
+  }
+  const data = selectData(state);
+  const changedTags = getChangedTags(state);
+  await Promise.all(
+    changedTags.map(async (tag) => {
+      const style = data[tag];
+      if (!style || style.variants.length === 0) {
+        await apiClient.delete(tag);
+        return;
+      }
+      await apiClient.put(tag, style.variants);
+    })
+  );
+  dispatch2(slice.actions.commit());
+}
+
+// src/components/tag-chip.tsx
+import * as React2 from "react";
+import { useState } from "react";
+import { DotsVerticalIcon } from "@elementor/icons";
+import {
+  bindTrigger,
+  Chip,
+  Stack,
+  Typography,
+  UnstableChipGroup,
+  usePopupState
+} from "@elementor/ui";
+import { __ } from "@wordpress/i18n";
+
+// src/components/tag-state-menu.tsx
+import * as React from "react";
+import { DEFAULT_PSEUDO_STATES, PseudoStateMenuItems } from "@elementor/editor-editing-panel";
+import { bindMenu, Menu } from "@elementor/ui";
+function TagStateMenu({ popupState, anchorEl, activeState, onSelectState }) {
+  return /* @__PURE__ */ React.createElement(
+    Menu,
+    {
+      MenuListProps: { dense: true, sx: { minWidth: "160px" } },
+      ...bindMenu(popupState),
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { horizontal: "left", vertical: -4 },
+      disableAutoFocusItem: true
+    },
+    /* @__PURE__ */ React.createElement(
+      PseudoStateMenuItems,
+      {
+        states: DEFAULT_PSEUDO_STATES,
+        activeState,
+        onSelectState,
+        onClose: popupState.close
+      }
+    )
+  );
+}
+
+// src/components/tag-chip.tsx
+var CHIP_SIZE = "tiny";
+function TagChip({ label, chipProps, activeState, onSelectState }) {
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: "tag-state-menu"
+  });
+  const [chipRef, setChipRef] = useState(null);
+  const { onDelete: _onDelete, ...chipGroupProps } = chipProps;
+  const isShowingState = Boolean(activeState);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    UnstableChipGroup,
+    {
+      ref: setChipRef,
+      ...chipGroupProps,
+      "aria-label": `Edit ${label}`,
+      role: "group",
+      sx: (theme) => ({
+        "&.MuiChipGroup-root.MuiAutocomplete-tag": {
+          margin: theme.spacing(0.125)
+        }
+      })
+    },
+    /* @__PURE__ */ React2.createElement(
+      Chip,
+      {
+        size: CHIP_SIZE,
+        label,
+        variant: isShowingState ? "standard" : "filled",
+        shape: "rounded",
+        color: "default",
+        onClick: () => {
+          if (isShowingState) {
+            onSelectState(null);
+          }
+        },
+        sx: (theme) => ({
+          lineHeight: 1,
+          borderRadius: `${theme.shape.borderRadius * 0.75}px`
+        })
+      }
+    ),
+    /* @__PURE__ */ React2.createElement(
+      Chip,
+      {
+        icon: isShowingState ? void 0 : /* @__PURE__ */ React2.createElement(DotsVerticalIcon, { fontSize: "tiny" }),
+        size: CHIP_SIZE,
+        label: isShowingState ? /* @__PURE__ */ React2.createElement(Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React2.createElement(Typography, { variant: "inherit" }, activeState), /* @__PURE__ */ React2.createElement(DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
+        variant: "filled",
+        shape: "rounded",
+        color: "default",
+        ...bindTrigger(popupState),
+        "aria-label": __("Open tag state menu", "elementor"),
+        sx: (theme) => ({
+          borderRadius: `${theme.shape.borderRadius * 0.75}px`,
+          paddingRight: 0,
+          ...!isShowingState ? { paddingLeft: 0 } : {},
+          ".MuiChip-label": isShowingState ? { paddingRight: 0 } : { padding: 0 }
+        })
+      }
+    )
+  ), /* @__PURE__ */ React2.createElement(
+    TagStateMenu,
+    {
+      popupState,
+      anchorEl: chipRef,
+      activeState,
+      onSelectState
+    }
+  ));
+}
+
+// src/components/default-styles-panel-content.tsx
+var { useMenuItems } = controlActionsMenu;
+var SHIM_ELEMENT_ID = "default-styles-editor-shim";
+var SHIM_CLASSES_PROP = "__default_styles_classes__";
+var TAG_SELECTOR_ID = "default-styles-tag-selector";
+var LAST_ACTIVE_TAG_SESSION_PREFIX = "default-styles";
+var LAST_ACTIVE_TAG_SESSION_KEY = "last-active-tag";
+var LAST_ACTIVE_TAG_STORAGE_KEY = `${LAST_ACTIVE_TAG_SESSION_PREFIX}/${LAST_ACTIVE_TAG_SESSION_KEY}`;
+function readStoredActiveTag(allowedTags) {
+  const storedTag = getSessionStorageItem(LAST_ACTIVE_TAG_STORAGE_KEY);
+  if (storedTag && isAllowedDefaultStyleTag(storedTag, allowedTags)) {
+    return storedTag;
+  }
+  return getDefaultActiveTag(allowedTags);
+}
+function toTagChip(tag) {
+  return { label: tag, value: tag, fixed: true };
+}
+var shimElement = {
+  id: SHIM_ELEMENT_ID,
+  type: "default-style"
+};
+var shimElementType = {
+  key: "default-style",
+  controls: [],
+  propsSchema: {},
+  title: __2("Default Style", "elementor")
+};
+function DefaultStylesPanelContent({ onRequestClose }) {
+  const allowedTags = useMemo(() => getAllowedDefaultStyleTags(), []);
+  const tagOptions = useMemo(
+    () => allowedTags.map((tag) => ({ label: tag, value: tag })),
+    [allowedTags]
+  );
+  const [selectedTag, setSelectedTagState] = useState2(() => readStoredActiveTag(allowedTags));
+  const [activeStyleState, setActiveStyleState] = useState2(null);
+  const breakpoint = useActiveBreakpoint();
+  const menuItems = useMenuItems().default;
+  const controlReplacements = getControlReplacements();
+  const isDirty = useSelector(selectIsDirty);
+  const { mutateAsync: save, isPending: isSaving } = useSave();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
+  const setSelectedTag = (tag) => {
+    setSelectedTagState(tag);
+    setSessionStorageItem(LAST_ACTIVE_TAG_STORAGE_KEY, tag);
+  };
+  const handleClosePanel = useCallback(() => {
+    if (isDirty) {
+      openSaveChangesDialog();
+      return;
+    }
+    onRequestClose();
+  }, [isDirty, onRequestClose, openSaveChangesDialog]);
+  useEffect2(() => {
+    blockPanelInteractions();
+    return () => {
+      unblockPanelInteractions();
+    };
+  }, []);
+  usePreventUnload(isDirty);
+  const handleTagSelect = (_selected, reason, option) => {
+    if (reason !== "selectOption" || !option.value) {
+      return;
+    }
+    setSelectedTag(option.value);
+    setActiveStyleState(null);
+  };
+  const resetAndClosePanel = () => {
+    dispatch3(slice.actions.reset());
+    closeSaveChangesDialog();
+    onRequestClose();
+  };
+  const handleSaveAndContinue = async () => {
+    try {
+      await save();
+    } catch {
+      return;
+    }
+    closeSaveChangesDialog();
+    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(
+    Stack2,
+    {
+      p: 1,
+      pl: 2,
+      width: "100%",
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      spacing: 0.5
+    },
+    /* @__PURE__ */ React3.createElement(PanelHeaderTitle, { sx: { flex: 1, minWidth: 0 } }, __2("Default Styles", "elementor")),
+    /* @__PURE__ */ React3.createElement(
+      CloseButton,
+      {
+        "aria-label": __2("Close", "elementor"),
+        sx: { flexShrink: 0 },
+        onClick: handleClosePanel
+      }
+    )
+  )), /* @__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,
+      {
+        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(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(
+    SaveChangesDialog.Actions,
+    {
+      actions: {
+        discard: {
+          label: __2("Discard", "elementor"),
+          action: resetAndClosePanel
+        },
+        confirm: {
+          label: __2("Save & Continue", "elementor"),
+          action: handleSaveAndContinue
+        }
+      }
+    }
+  ))));
+}
+function useSave() {
+  return useMutation({
+    mutationFn: () => saveDefaultStyles()
+  });
+}
+function usePreventUnload(isDirty) {
+  useEffect2(() => {
+    const handleBeforeUnload = (event) => {
+      if (isDirty) {
+        event.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [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/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();
+        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
+        }
+      }
+    }
+  )));
+}
+
+// src/default-styles-provider.ts
+import { createStylesProvider } from "@elementor/editor-styles-repository";
+import {
+  __dispatch as dispatch4,
+  __getState as getState3,
+  __subscribeWithSelector as subscribeWithSelector
+} from "@elementor/store";
+import { __ as __4 } 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}`;
+var placeholderDefinition = (id) => ({
+  id,
+  label: id,
+  type: "class",
+  variants: []
+});
+var asClassDefinition = (style) => ({
+  ...style,
+  type: "class"
+});
+var defaultStylesStylesProvider = createStylesProvider({
+  key: DEFAULT_STYLES_PROVIDER_KEY,
+  priority: 15,
+  labels: {
+    singular: __4("tag", "elementor"),
+    plural: __4("tags", "elementor")
+  },
+  subscribe: (cb) => subscribeWithStates(cb),
+  actions: {
+    all: () => getAllowedDefaultStyleTags().map((tag) => {
+      const style = selectData(getState3())[tag];
+      return style ? asClassDefinition(style) : placeholderDefinition(tag);
+    }),
+    get: (id) => {
+      const style = selectData(getState3())[id];
+      return style ? asClassDefinition(style) : placeholderDefinition(id);
+    },
+    resolveCssName,
+    update: (payload) => {
+      dispatch4(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id) => {
+      dispatch4(slice.actions.deleteTag(id));
+    },
+    updateProps: (args) => {
+      dispatch4(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props,
+          mode: args.mode
+        })
+      );
+    },
+    updateCustomCss: (args) => {
+      dispatch4(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          custom_css: args.custom_css,
+          props: {}
+        })
+      );
+    }
+  }
+});
+var subscribeWithStates = (cb) => {
+  let previousState = selectData(getState3());
+  return subscribeWithSelector(
+    (state) => selectData(state),
+    (currentState) => {
+      cb(previousState, currentState);
+      previousState = currentState;
+    }
+  );
+};
+
+// 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
+function init() {
+  registerSlice(slice);
+  registerElementPanelDefaults("default-style", {
+    defaultTab: "style",
+    defaultSectionsExpanded: {
+      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 {
+  init
+};
+//# sourceMappingURL=index.mjs.map