@wordpress/editor 14.36.1-next.8fd3f8831.0 → 14.37.0

package/build/components/global-styles/menu.js

@@ -0,0 +1,97 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/global-styles/menu.js
+var menu_exports = {};
+__export(menu_exports, {
+  GlobalStylesActionMenu: () => GlobalStylesActionMenu
+});
+module.exports = __toCommonJS(menu_exports);
+var import_components = require("@wordpress/components");
+var import_data = require("@wordpress/data");
+var import_i18n = require("@wordpress/i18n");
+var import_preferences = require("@wordpress/preferences");
+var import_icons = require("@wordpress/icons");
+var import_core_data = require("@wordpress/core-data");
+var import_hooks = require("./hooks");
+var import_jsx_runtime = require("react/jsx-runtime");
+function GlobalStylesActionMenu({
+  hideWelcomeGuide = false,
+  onChangePath
+}) {
+  const { user, setUser } = (0, import_hooks.useGlobalStyles)();
+  const canReset = !!user && (Object.keys(user?.styles ?? {}).length > 0 || Object.keys(user?.settings ?? {}).length > 0);
+  const onReset = () => {
+    setUser({ styles: {}, settings: {} });
+  };
+  const { toggle } = (0, import_data.useDispatch)(import_preferences.store);
+  const { canEditCSS } = (0, import_data.useSelect)((select) => {
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      canEditCSS: !!globalStyles?._links?.["wp:action-edit-css"]
+    };
+  }, []);
+  const loadCustomCSS = () => {
+    onChangePath("/css");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_components.DropdownMenu,
+    {
+      icon: import_icons.moreVertical,
+      label: (0, import_i18n.__)("More"),
+      toggleProps: { size: "compact" },
+      children: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.MenuGroup, { children: [
+          canEditCSS && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { onClick: loadCustomCSS, children: (0, import_i18n.__)("Additional CSS") }),
+          !hideWelcomeGuide && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_components.MenuItem,
+            {
+              onClick: () => {
+                toggle(
+                  "core/edit-site",
+                  "welcomeGuideStyles"
+                );
+                onClose();
+              },
+              children: (0, import_i18n.__)("Welcome Guide")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuGroup, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_components.MenuItem,
+          {
+            onClick: () => {
+              onReset();
+              onClose();
+            },
+            disabled: !canReset,
+            children: (0, import_i18n.__)("Reset styles")
+          }
+        ) })
+      ] })
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesActionMenu
+});
+//# sourceMappingURL=menu.js.map

package/build/components/global-styles-provider/index.js

@@ -0,0 +1,181 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/global-styles-provider/index.js
+var global_styles_provider_exports = {};
+__export(global_styles_provider_exports, {
+  useGlobalStylesContext: () => useGlobalStylesContext
+});
+module.exports = __toCommonJS(global_styles_provider_exports);
+var import_block_editor = require("@wordpress/block-editor");
+var import_core_data = require("@wordpress/core-data");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_global_styles_engine = require("@wordpress/global-styles-engine");
+var import_lock_unlock = require("../../lock-unlock");
+var { cleanEmptyObject } = (0, import_lock_unlock.unlock)(import_block_editor.privateApis);
+function useGlobalStylesUserConfig() {
+  const { globalStylesId, isReady, settings, styles, _links } = (0, import_data.useSelect)(
+    (select) => {
+      const {
+        getEntityRecord,
+        getEditedEntityRecord: getEditedEntityRecord2,
+        hasFinishedResolution,
+        canUser
+      } = select(import_core_data.store);
+      const _globalStylesId = select(import_core_data.store).__experimentalGetCurrentGlobalStylesId();
+      let record;
+      const userCanEditGlobalStyles = _globalStylesId ? canUser("update", {
+        kind: "root",
+        name: "globalStyles",
+        id: _globalStylesId
+      }) : null;
+      if (_globalStylesId && /*
+       * Test that the OPTIONS request for user capabilities is complete
+       * before fetching the global styles entity record.
+       * This is to avoid fetching the global styles entity unnecessarily.
+       */
+      typeof userCanEditGlobalStyles === "boolean") {
+        if (userCanEditGlobalStyles) {
+          record = getEditedEntityRecord2(
+            "root",
+            "globalStyles",
+            _globalStylesId
+          );
+        } else {
+          record = getEntityRecord(
+            "root",
+            "globalStyles",
+            _globalStylesId,
+            { context: "view" }
+          );
+        }
+      }
+      let hasResolved = false;
+      if (hasFinishedResolution(
+        "__experimentalGetCurrentGlobalStylesId"
+      )) {
+        if (_globalStylesId) {
+          hasResolved = userCanEditGlobalStyles ? hasFinishedResolution("getEditedEntityRecord", [
+            "root",
+            "globalStyles",
+            _globalStylesId
+          ]) : hasFinishedResolution("getEntityRecord", [
+            "root",
+            "globalStyles",
+            _globalStylesId,
+            { context: "view" }
+          ]);
+        } else {
+          hasResolved = true;
+        }
+      }
+      return {
+        globalStylesId: _globalStylesId,
+        isReady: hasResolved,
+        settings: record?.settings,
+        styles: record?.styles,
+        _links: record?._links
+      };
+    },
+    []
+  );
+  const { getEditedEntityRecord } = (0, import_data.useSelect)(import_core_data.store);
+  const { editEntityRecord } = (0, import_data.useDispatch)(import_core_data.store);
+  const config = (0, import_element.useMemo)(() => {
+    return {
+      settings: settings ?? {},
+      styles: styles ?? {},
+      _links: _links ?? {}
+    };
+  }, [settings, styles, _links]);
+  const setConfig = (0, import_element.useCallback)(
+    /**
+     * Set the global styles config.
+     * @param {Function|Object} callbackOrObject If the callbackOrObject is a function, pass the current config to the callback so the consumer can merge values.
+     *                                           Otherwise, overwrite the current config with the incoming object.
+     * @param {Object}          options          Options for editEntityRecord Core selector.
+     */
+    (callbackOrObject, options = {}) => {
+      const record = getEditedEntityRecord(
+        "root",
+        "globalStyles",
+        globalStylesId
+      );
+      const currentConfig = {
+        styles: record?.styles ?? {},
+        settings: record?.settings ?? {},
+        _links: record?._links ?? {}
+      };
+      const updatedConfig = typeof callbackOrObject === "function" ? callbackOrObject(currentConfig) : callbackOrObject;
+      editEntityRecord(
+        "root",
+        "globalStyles",
+        globalStylesId,
+        {
+          styles: cleanEmptyObject(updatedConfig.styles) || {},
+          settings: cleanEmptyObject(updatedConfig.settings) || {},
+          _links: cleanEmptyObject(updatedConfig._links) || {}
+        },
+        options
+      );
+    },
+    [globalStylesId, editEntityRecord, getEditedEntityRecord]
+  );
+  return [isReady, config, setConfig];
+}
+function useGlobalStylesBaseConfig() {
+  const baseConfig = (0, import_data.useSelect)(
+    (select) => select(import_core_data.store).__experimentalGetCurrentThemeBaseGlobalStyles(),
+    []
+  );
+  return [!!baseConfig, baseConfig];
+}
+function useGlobalStylesContext() {
+  const [isUserConfigReady, userConfig, setUserConfig] = useGlobalStylesUserConfig();
+  const [isBaseConfigReady, baseConfig] = useGlobalStylesBaseConfig();
+  const mergedConfig = (0, import_element.useMemo)(() => {
+    if (!baseConfig || !userConfig) {
+      return {};
+    }
+    return (0, import_global_styles_engine.mergeGlobalStyles)(baseConfig, userConfig);
+  }, [userConfig, baseConfig]);
+  const context = (0, import_element.useMemo)(() => {
+    return {
+      isReady: isUserConfigReady && isBaseConfigReady,
+      user: userConfig,
+      base: baseConfig,
+      merged: mergedConfig,
+      setUserConfig
+    };
+  }, [
+    mergedConfig,
+    userConfig,
+    baseConfig,
+    setUserConfig,
+    isUserConfigReady,
+    isBaseConfigReady
+  ]);
+  return context;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useGlobalStylesContext
+});
+//# sourceMappingURL=index.js.map

package/build/components/global-styles-renderer/index.js

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/global-styles-renderer/index.js
+var global_styles_renderer_exports = {};
+__export(global_styles_renderer_exports, {
+  GlobalStylesRenderer: () => GlobalStylesRenderer
+});
+module.exports = __toCommonJS(global_styles_renderer_exports);
+var import_element = require("@wordpress/element");
+var import_data = require("@wordpress/data");
+var import_store = require("../../store");
+var import_use_global_styles_output = require("../../hooks/use-global-styles-output");
+function useGlobalStylesRenderer(disableRootPadding) {
+  const [styles, settings] = (0, import_use_global_styles_output.useGlobalStylesOutput)(disableRootPadding);
+  const { getEditorSettings } = (0, import_data.useSelect)(import_store.store);
+  const { updateEditorSettings } = (0, import_data.useDispatch)(import_store.store);
+  (0, import_element.useEffect)(() => {
+    if (!styles || !settings) {
+      return;
+    }
+    const currentStoreSettings = getEditorSettings();
+    const nonGlobalStyles = Object.values(
+      currentStoreSettings.styles ?? []
+    ).filter((style) => !style.isGlobalStyles);
+    updateEditorSettings({
+      ...currentStoreSettings,
+      styles: [...nonGlobalStyles, ...styles],
+      __experimentalFeatures: settings
+    });
+  }, [styles, settings, updateEditorSettings, getEditorSettings]);
+}
+function GlobalStylesRenderer({ disableRootPadding }) {
+  useGlobalStylesRenderer(disableRootPadding);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  GlobalStylesRenderer
+});
+//# sourceMappingURL=index.js.map

package/build/components/global-styles-sidebar/default-sidebar.js

@@ -0,0 +1,68 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/global-styles-sidebar/default-sidebar.js
+var default_sidebar_exports = {};
+__export(default_sidebar_exports, {
+  default: () => DefaultSidebar
+});
+module.exports = __toCommonJS(default_sidebar_exports);
+var import_interface = require("@wordpress/interface");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DefaultSidebar({
+  className,
+  identifier,
+  title,
+  icon,
+  children,
+  closeLabel,
+  header,
+  headerClassName,
+  panelClassName,
+  isActiveByDefault
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_interface.ComplementaryArea,
+      {
+        className,
+        scope: "core",
+        identifier,
+        title,
+        icon,
+        closeLabel,
+        header,
+        headerClassName,
+        panelClassName,
+        isActiveByDefault,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_interface.ComplementaryAreaMoreMenuItem,
+      {
+        scope: "core",
+        identifier,
+        icon,
+        children: title
+      }
+    )
+  ] });
+}
+//# sourceMappingURL=default-sidebar.js.map

package/build/components/global-styles-sidebar/index.js

@@ -0,0 +1,184 @@
+"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);
+
+// packages/editor/src/components/global-styles-sidebar/index.js
+var global_styles_sidebar_exports = {};
+__export(global_styles_sidebar_exports, {
+  default: () => GlobalStylesSidebar
+});
+module.exports = __toCommonJS(global_styles_sidebar_exports);
+var import_components = require("@wordpress/components");
+var import_i18n = require("@wordpress/i18n");
+var import_icons = require("@wordpress/icons");
+var import_data = require("@wordpress/data");
+var import_element = require("@wordpress/element");
+var import_preferences = require("@wordpress/preferences");
+var import_compose = require("@wordpress/compose");
+var import_core_data = require("@wordpress/core-data");
+var import_interface = require("@wordpress/interface");
+var import_global_styles = __toESM(require("../global-styles"));
+var import_menu = require("../global-styles/menu");
+var import_store = require("../../store");
+var import_lock_unlock = require("../../lock-unlock");
+var import_default_sidebar = __toESM(require("./default-sidebar"));
+var import_welcome_guide = __toESM(require("./welcome-guide"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function GlobalStylesSidebar() {
+  const {
+    shouldResetNavigation,
+    stylesPath,
+    showStylebook,
+    showListViewByDefault,
+    hasRevisions,
+    activeComplementaryArea
+  } = (0, import_data.useSelect)((select) => {
+    const { getActiveComplementaryArea } = select(import_interface.store);
+    const { getStylesPath, getShowStylebook } = (0, import_lock_unlock.unlock)(
+      select(import_store.store)
+    );
+    const _isVisualEditorMode = "visual" === select(import_store.store).getEditorMode();
+    const _showListViewByDefault = select(import_preferences.store).get(
+      "core",
+      "showListViewByDefault"
+    );
+    const { getEntityRecord, __experimentalGetCurrentGlobalStylesId } = select(import_core_data.store);
+    const globalStylesId = __experimentalGetCurrentGlobalStylesId();
+    const globalStyles = globalStylesId ? getEntityRecord("root", "globalStyles", globalStylesId) : void 0;
+    return {
+      stylesPath: getStylesPath(),
+      showStylebook: getShowStylebook(),
+      shouldResetNavigation: "edit-site/global-styles" !== getActiveComplementaryArea("core") || !_isVisualEditorMode,
+      showListViewByDefault: _showListViewByDefault,
+      hasRevisions: !!globalStyles?._links?.["version-history"]?.[0]?.count,
+      activeComplementaryArea: select(import_interface.store).getActiveComplementaryArea("core")
+    };
+  }, []);
+  const { setStylesPath, setShowStylebook, resetStylesNavigation } = (0, import_lock_unlock.unlock)(
+    (0, import_data.useDispatch)(import_store.store)
+  );
+  const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
+  const isRevisionsOpened = stylesPath.startsWith("/revisions") && !showStylebook;
+  const isRevisionsStyleBookOpened = stylesPath.startsWith("/revisions") && showStylebook;
+  const previousActiveArea = (0, import_compose.usePrevious)(activeComplementaryArea);
+  (0, import_element.useEffect)(() => {
+    if (activeComplementaryArea === "edit-site/global-styles" && previousActiveArea !== "edit-site/global-styles") {
+      resetStylesNavigation();
+    }
+  }, [activeComplementaryArea, previousActiveArea, resetStylesNavigation]);
+  (0, import_element.useEffect)(() => {
+    if (shouldResetNavigation) {
+      resetStylesNavigation();
+    }
+  }, [shouldResetNavigation, resetStylesNavigation]);
+  const { setIsListViewOpened } = (0, import_data.useDispatch)(import_store.store);
+  const toggleRevisions = () => {
+    setIsListViewOpened(false);
+    if (isRevisionsOpened || isRevisionsStyleBookOpened) {
+      setStylesPath("/");
+    } else {
+      setStylesPath("/revisions");
+    }
+  };
+  const toggleStyleBook = () => {
+    setIsListViewOpened(showStylebook && showListViewByDefault);
+    setShowStylebook(!showStylebook);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_default_sidebar.default,
+      {
+        className: "editor-global-styles-sidebar",
+        identifier: "edit-site/global-styles",
+        title: (0, import_i18n.__)("Styles"),
+        icon: import_icons.styles,
+        closeLabel: (0, import_i18n.__)("Close Styles"),
+        panelClassName: "editor-global-styles-sidebar__panel",
+        header: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_components.Flex,
+          {
+            className: "editor-global-styles-sidebar__header",
+            gap: 1,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "editor-global-styles-sidebar__header-title", children: (0, import_i18n.__)("Styles") }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                import_components.Flex,
+                {
+                  justify: "flex-end",
+                  gap: 1,
+                  className: "editor-global-styles-sidebar__header-actions",
+                  children: [
+                    !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.Button,
+                      {
+                        icon: import_icons.seen,
+                        label: (0, import_i18n.__)("Style Book"),
+                        isPressed: showStylebook,
+                        accessibleWhenDisabled: true,
+                        disabled: shouldResetNavigation,
+                        onClick: toggleStyleBook,
+                        size: "compact"
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.FlexItem, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_components.Button,
+                      {
+                        label: (0, import_i18n.__)("Revisions"),
+                        icon: import_icons.backup,
+                        onClick: toggleRevisions,
+                        accessibleWhenDisabled: true,
+                        disabled: !hasRevisions,
+                        isPressed: isRevisionsOpened || isRevisionsStyleBookOpened,
+                        size: "compact"
+                      }
+                    ) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      import_menu.GlobalStylesActionMenu,
+                      {
+                        onChangePath: setStylesPath
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_global_styles.default,
+          {
+            path: stylesPath,
+            onPathChange: setStylesPath
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_welcome_guide.default, {})
+  ] });
+}
+//# sourceMappingURL=index.js.map

package/build/components/global-styles-sidebar/welcome-guide-image.js

@@ -0,0 +1,39 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/editor/src/components/global-styles-sidebar/welcome-guide-image.js
+var welcome_guide_image_exports = {};
+__export(welcome_guide_image_exports, {
+  default: () => WelcomeGuideImage
+});
+module.exports = __toCommonJS(welcome_guide_image_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+function WelcomeGuideImage({ nonAnimatedSrc, animatedSrc }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("picture", { className: "editor-welcome-guide__image", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "source",
+      {
+        srcSet: nonAnimatedSrc,
+        media: "(prefers-reduced-motion: reduce)"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: animatedSrc, width: "312", height: "240", alt: "" })
+  ] });
+}
+//# sourceMappingURL=welcome-guide-image.js.map