@elementor/editor-default-styles 4.3.0-1042

package/dist/index.js

@@ -0,0 +1,800 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  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");
+var import_store4 = require("@elementor/store");
+
+// src/load-default-styles.ts
+var import_store2 = require("@elementor/store");
+
+// src/api.ts
+var import_http_client = require("@elementor/http-client");
+var RESOURCE_URL = "/default-styles";
+var BASE_URL = "elementor/v1";
+var apiClient = {
+  all: () => (0, import_http_client.httpService)().get(`${BASE_URL}${RESOURCE_URL}`),
+  put: (tag, variants) => (0, import_http_client.httpService)().put(`${BASE_URL}${RESOURCE_URL}/${tag}`, {
+    type: "class",
+    variants
+  }),
+  delete: (tag) => (0, import_http_client.httpService)().delete(`${BASE_URL}${RESOURCE_URL}/${tag}`)
+};
+
+// src/store.ts
+var import_editor_styles = require("@elementor/editor-styles");
+var import_store = require("@elementor/store");
+var initialState = {
+  data: {},
+  initialData: {},
+  isDirty: false
+};
+var SLICE_NAME = "defaultStyles";
+var slice = (0, import_store.__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 = (0, import_editor_styles.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 = (0, import_store.__createSelector)(
+  (state) => state.defaultStyles.data,
+  (data) => data
+);
+var selectIsDirty = (0, import_store.__createSelector)(
+  (state) => state.defaultStyles.isDirty,
+  (isDirty) => isDirty
+);
+var selectInitialData = (0, import_store.__createSelector)(
+  (state) => state.defaultStyles.initialData,
+  (initialData) => initialData
+);
+var selectTagStyle = (0, import_store.__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;
+  (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);
+  const changed = [];
+  Object.keys(current).forEach((tag) => {
+    const currentStyle = current[tag];
+    const initialStyle = initial[tag];
+    if (!initialStyle || (0, import_utils.hash)(currentStyle) !== (0, import_utils.hash)(initialStyle)) {
+      changed.push(tag);
+    }
+  });
+  Object.keys(initial).forEach((tag) => {
+    if (!current[tag]) {
+      changed.push(tag);
+    }
+  });
+  return changed;
+}
+async function saveDefaultStyles() {
+  const state = (0, import_store6.__getState)();
+  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);
+    })
+  );
+  (0, import_store6.__dispatch)(slice.actions.commit());
+}
+
+// src/components/tag-chip.tsx
+var React2 = __toESM(require("react"));
+var import_react2 = require("react");
+var import_icons = require("@elementor/icons");
+var import_ui2 = require("@elementor/ui");
+var import_i18n = require("@wordpress/i18n");
+
+// src/components/tag-state-menu.tsx
+var React = __toESM(require("react"));
+var import_editor_editing_panel = require("@elementor/editor-editing-panel");
+var import_ui = require("@elementor/ui");
+function TagStateMenu({ popupState, anchorEl, activeState, onSelectState }) {
+  return /* @__PURE__ */ React.createElement(
+    import_ui.Menu,
+    {
+      MenuListProps: { dense: true, sx: { minWidth: "160px" } },
+      ...(0, import_ui.bindMenu)(popupState),
+      anchorEl,
+      anchorOrigin: { vertical: "bottom", horizontal: "left" },
+      transformOrigin: { horizontal: "left", vertical: -4 },
+      disableAutoFocusItem: true
+    },
+    /* @__PURE__ */ React.createElement(
+      import_editor_editing_panel.PseudoStateMenuItems,
+      {
+        states: import_editor_editing_panel.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 = (0, import_ui2.usePopupState)({
+    variant: "popover",
+    popupId: "tag-state-menu"
+  });
+  const [chipRef, setChipRef] = (0, import_react2.useState)(null);
+  const { onDelete: _onDelete, ...chipGroupProps } = chipProps;
+  const isShowingState = Boolean(activeState);
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
+    import_ui2.UnstableChipGroup,
+    {
+      ref: setChipRef,
+      ...chipGroupProps,
+      "aria-label": `Edit ${label}`,
+      role: "group",
+      sx: (theme) => ({
+        "&.MuiChipGroup-root.MuiAutocomplete-tag": {
+          margin: theme.spacing(0.125)
+        }
+      })
+    },
+    /* @__PURE__ */ React2.createElement(
+      import_ui2.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(
+      import_ui2.Chip,
+      {
+        icon: isShowingState ? void 0 : /* @__PURE__ */ React2.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" }),
+        size: CHIP_SIZE,
+        label: isShowingState ? /* @__PURE__ */ React2.createElement(import_ui2.Stack, { direction: "row", gap: 0.5, alignItems: "center" }, /* @__PURE__ */ React2.createElement(import_ui2.Typography, { variant: "inherit" }, activeState), /* @__PURE__ */ React2.createElement(import_icons.DotsVerticalIcon, { fontSize: "tiny" })) : void 0,
+        variant: "filled",
+        shape: "rounded",
+        color: "default",
+        ...(0, import_ui2.bindTrigger)(popupState),
+        "aria-label": (0, import_i18n.__)("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 } = import_menus.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 = (0, import_session.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: (0, import_i18n2.__)("Default Style", "elementor")
+};
+function DefaultStylesPanelContent({ onRequestClose }) {
+  const allowedTags = (0, import_react3.useMemo)(() => getAllowedDefaultStyleTags(), []);
+  const tagOptions = (0, import_react3.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 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 { 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)(() => {
+    if (isDirty) {
+      openSaveChangesDialog();
+      return;
+    }
+    onRequestClose();
+  }, [isDirty, onRequestClose, openSaveChangesDialog]);
+  (0, import_react3.useEffect)(() => {
+    blockPanelInteractions();
+    return () => {
+      unblockPanelInteractions();
+    };
+  }, []);
+  usePreventUnload(isDirty);
+  const handleTagSelect = (_selected, reason, option) => {
+    if (reason !== "selectOption" || !option.value) {
+      return;
+    }
+    setSelectedTag(option.value);
+    setActiveStyleState(null);
+  };
+  const resetAndClosePanel = () => {
+    (0, import_store8.__dispatch)(slice.actions.reset());
+    closeSaveChangesDialog();
+    onRequestClose();
+  };
+  const handleSaveAndContinue = async () => {
+    try {
+      await save();
+    } catch {
+      return;
+    }
+    closeSaveChangesDialog();
+    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(
+    import_ui3.Stack,
+    {
+      p: 1,
+      pl: 2,
+      width: "100%",
+      direction: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      spacing: 0.5
+    },
+    /* @__PURE__ */ React3.createElement(import_editor_panels.PanelHeaderTitle, { sx: { flex: 1, minWidth: 0 } }, (0, import_i18n2.__)("Default Styles", "elementor")),
+    /* @__PURE__ */ React3.createElement(
+      import_ui3.CloseButton,
+      {
+        "aria-label": (0, import_i18n2.__)("Close", "elementor"),
+        sx: { flexShrink: 0 },
+        onClick: handleClosePanel
+      }
+    )
+  )), /* @__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,
+      {
+        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_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(
+    import_editor_ui.SaveChangesDialog.Actions,
+    {
+      actions: {
+        discard: {
+          label: (0, import_i18n2.__)("Discard", "elementor"),
+          action: resetAndClosePanel
+        },
+        confirm: {
+          label: (0, import_i18n2.__)("Save & Continue", "elementor"),
+          action: handleSaveAndContinue
+        }
+      }
+    }
+  ))));
+}
+function useSave() {
+  return (0, import_query.useMutation)({
+    mutationFn: () => saveDefaultStyles()
+  });
+}
+function usePreventUnload(isDirty) {
+  (0, import_react3.useEffect)(() => {
+    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 } = (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/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();
+        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
+        }
+      }
+    }
+  )));
+}
+
+// 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 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 = (0, import_editor_styles_repository.createStylesProvider)({
+  key: DEFAULT_STYLES_PROVIDER_KEY,
+  priority: 15,
+  labels: {
+    singular: (0, import_i18n4.__)("tag", "elementor"),
+    plural: (0, import_i18n4.__)("tags", "elementor")
+  },
+  subscribe: (cb) => subscribeWithStates(cb),
+  actions: {
+    all: () => getAllowedDefaultStyleTags().map((tag) => {
+      const style = selectData((0, import_store10.__getState)())[tag];
+      return style ? asClassDefinition(style) : placeholderDefinition(tag);
+    }),
+    get: (id) => {
+      const style = selectData((0, import_store10.__getState)())[id];
+      return style ? asClassDefinition(style) : placeholderDefinition(id);
+    },
+    resolveCssName,
+    update: (payload) => {
+      (0, import_store10.__dispatch)(
+        slice.actions.update({
+          style: payload
+        })
+      );
+    },
+    delete: (id) => {
+      (0, import_store10.__dispatch)(slice.actions.deleteTag(id));
+    },
+    updateProps: (args) => {
+      (0, import_store10.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          props: args.props,
+          mode: args.mode
+        })
+      );
+    },
+    updateCustomCss: (args) => {
+      (0, import_store10.__dispatch)(
+        slice.actions.updateProps({
+          id: args.id,
+          meta: args.meta,
+          custom_css: args.custom_css,
+          props: {}
+        })
+      );
+    }
+  }
+});
+var subscribeWithStates = (cb) => {
+  let previousState = selectData((0, import_store10.__getState)());
+  return (0, import_store10.__subscribeWithSelector)(
+    (state) => selectData(state),
+    (currentState) => {
+      cb(previousState, currentState);
+      previousState = currentState;
+    }
+  );
+};
+
+// 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
+function init() {
+  (0, import_store12.__registerSlice)(slice);
+  (0, import_editor_editing_panel3.registerElementPanelDefaults)("default-style", {
+    defaultTab: "style",
+    defaultSectionsExpanded: {
+      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 = {
+  init
+});
+//# sourceMappingURL=index.js.map