@redocly/theme 0.61.1 → 0.62.0-next.1

package/lib/components/Catalog/CatalogEntity/CatalogEntity.js

@@ -18,7 +18,7 @@ const hooks_1 = require("../../../core/hooks");
 const CatalogEntitySchema_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntitySchema");
 const CatalogEntityMethodAndPath_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityMethodAndPath");
 const CatalogEntityRelationsGraph_lazy_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy");
-const theme_1 = require("../../../index.js");
+const CatalogEntityHistorySidebar_1 = require("../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar");
 const renderFirstColumnEntitySection = (entity) => {
     switch (entity.type) {
         case 'api-operation':
@@ -45,7 +45,7 @@ function CatalogEntity({ RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
     const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
     const { searchQuery, setSearchQuery } = useCatalog();
     return (react_1.default.createElement(CatalogPageWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntity" },
-        react_1.default.createElement(theme_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
+        react_1.default.createElement(CatalogEntityHistorySidebar_1.CatalogEntityHistorySidebar, { entityKey: entity.key, revision: revision, version: version }),
         react_1.default.createElement(CatalogPageContent, null,
             react_1.default.createElement(Breadcrumbs_1.Breadcrumbs, { additionalBreadcrumbs: [
                     { label: linkToMainCatalogLabel, link: linkToMainCatalog },

package/lib/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.js

@@ -45,7 +45,7 @@ const hooks_1 = require("../../../../core/hooks");
 const MenuContainer_1 = require("../../../../components/Menu/MenuContainer");
 const utils_1 = require("../../../../core/utils");
 const constants_1 = require("../../../../core/constants");
-const CatalogEntityVersionItem_1 = require("./CatalogEntityVersionItem");
+const CatalogEntityVersionItem_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem");
 function CatalogEntityHistorySidebar({ entityKey, revision, version, className, }) {
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const location = (0, react_router_dom_1.useLocation)();

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TagsProperty = TagsProperty;
 const react_1 = __importDefault(require("react"));
 const TagsIcon_1 = require("../../../../icons/TagsIcon/TagsIcon");
-const theme_1 = require("../../../../index.js");
+const CatalogTagsWithTooltip_1 = require("../../../../components/Catalog/CatalogTagsWithTooltip");
 const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
 const hooks_1 = require("../../../../core/hooks");
 function TagsProperty({ entity }) {
@@ -15,7 +15,7 @@ function TagsProperty({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty" },
         react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(TagsIcon_1.TagsIcon, null),
-                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(theme_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
+                translate('catalog.tags.label', 'Tags')), content: react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
                     style: {
                         fontSize: 'var(--font-size-base)',
                         borderRadius: 'var(--border-radius)',

package/lib/components/Catalog/CatalogTableView/CatalogTableViewRow.js

@@ -12,7 +12,7 @@ const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableVie
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const hooks_1 = require("../../../core/hooks");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
-const Link_1 = require("../../Link/Link");
+const Link_1 = require("../../../components/Link/Link");
 const baseColumns = [
     {
         key: 'entity',

package/lib/components/JsonViewer/JsonViewer.js

@@ -40,7 +40,7 @@ exports.JsonViewerWrap = exports.JsonViewer = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
-const Helpers_1 = require("./Helpers");
+const Helpers_1 = require("../../components/JsonViewer/Helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);

package/lib/components/Search/SearchAiMessage.js

@@ -48,8 +48,8 @@ const Markdown_1 = require("../../components/Markdown/Markdown");
 const DocumentIcon_1 = require("../../icons/DocumentIcon/DocumentIcon");
 const AiStarsIcon_1 = require("../../icons/AiStarsIcon/AiStarsIcon");
 const CheckmarkOutlineIcon_1 = require("../../icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon");
-const SearchAiActionButtons_1 = require("./SearchAiActionButtons");
-const SearchAiNegativeFeedbackForm_1 = require("./SearchAiNegativeFeedbackForm");
+const SearchAiActionButtons_1 = require("../../components/Search/SearchAiActionButtons");
+const SearchAiNegativeFeedbackForm_1 = require("../../components/Search/SearchAiNegativeFeedbackForm");
 function SearchAiMessageComponent({ role, content, isThinking, resources, className, messageId, feedback, onFeedbackChange, }) {
     var _a;
     const { useMarkdownText, useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();

package/lib/core/hooks/use-page-actions.js

@@ -181,7 +181,7 @@ function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, })
     return Object.assign(Object.assign({}, sharedProps), { buttonText: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), title: translate('page.actions.connectMcp.vscode', 'Connect to VS Code'), description: translate('page.actions.connectMcp.vscodeDescription', 'Install MCP server on VS Code'), iconComponent: VSCodeIcon_1.VSCodeIcon });
 }
 function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch) {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     // Can't use any actions if no markdown files are generated for LLMs
     if ((_b = (_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.seo) === null || _a === void 0 ? void 0 : _a.llmstxt) === null || _b === void 0 ? void 0 : _b.hide) {
         return true;
@@ -191,8 +191,8 @@ function shouldHidePageActions(pageProps, themeConfig, openapiExcludeFromSearch)
         return true;
     }
     // Page is excluded from search
-    const isPageExcludedFromSearch = ((_e = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _e === void 0 ? void 0 : _e.excludeFromSearch) ||
-        (((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.type) === 'openapi' && openapiExcludeFromSearch);
+    const isOpenApiPage = ((_e = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _e === void 0 ? void 0 : _e.type) === 'openapi' || ((_f = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _f === void 0 ? void 0 : _f.subType) === 'openapi-operation';
+    const isPageExcludedFromSearch = ((_g = pageProps === null || pageProps === void 0 ? void 0 : pageProps.frontmatter) === null || _g === void 0 ? void 0 : _g.excludeFromSearch) || (isOpenApiPage && openapiExcludeFromSearch);
     if (isPageExcludedFromSearch) {
         return true;
     }

package/lib/core/hooks/use-unique-svg-ids.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+export declare function useUniqueSvgIds(): (id: string) => string;

package/lib/core/hooks/use-unique-svg-ids.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUniqueSvgIds = useUniqueSvgIds;
+const react_1 = require("react");
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+function useUniqueSvgIds() {
+    const reactId = (0, react_1.useId)();
+    const safeSuffix = reactId.replace(/:/g, '_');
+    return (id) => `${id}-${safeSuffix}`;
+}
+//# sourceMappingURL=use-unique-svg-ids.js.map

package/lib/core/openapi/index.d.ts

@@ -25,3 +25,4 @@ export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
+export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';

package/lib/core/openapi/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
+exports.useUniqueSvgIds = exports.SearchSessionContext = exports.SearchSessionProvider = exports.ThemeDataContext = exports.isObject = exports.isNotNull = exports.isString = exports.isUndefined = exports.SecurityVariablesEnvSuffix = exports.useDialogHotKeys = exports.useSearchDialog = exports.useModalScrollLock = exports.useActiveSectionId = exports.useOutsideClick = exports.useThemeHooks = exports.useFocusTrap = exports.getUserAgent = exports.ClipboardService = exports.getOperationColor = exports.isPrimitive = exports.breakpoints = exports.GlobalStyle = exports.useMount = exports.typedMemo = exports.capitalize = exports.withPathPrefix = exports.addTrailingSlash = exports.combineUrls = exports.getPathPrefix = exports.removeLeadingSlash = exports.addLeadingSlash = exports.IS_BROWSER = void 0;
 var dom_1 = require("../utils/dom");
 Object.defineProperty(exports, "IS_BROWSER", { enumerable: true, get: function () { return dom_1.IS_BROWSER; } });
 var urls_1 = require("../utils/urls");
@@ -54,4 +54,6 @@ Object.defineProperty(exports, "ThemeDataContext", { enumerable: true, get: func
 var SearchContext_1 = require("../contexts/SearchContext");
 Object.defineProperty(exports, "SearchSessionProvider", { enumerable: true, get: function () { return SearchContext_1.SearchSessionProvider; } });
 Object.defineProperty(exports, "SearchSessionContext", { enumerable: true, get: function () { return SearchContext_1.SearchSessionContext; } });
+var use_unique_svg_ids_1 = require("../hooks/use-unique-svg-ids");
+Object.defineProperty(exports, "useUniqueSvgIds", { enumerable: true, get: function () { return use_unique_svg_ids_1.useUniqueSvgIds; } });
 //# sourceMappingURL=index.js.map

package/lib/core/styles/global.js

@@ -958,23 +958,41 @@ const pages = (0, styled_components_1.css) `
     */
 
   --page-403-font-family: var(--font-family-base); // @presenter FontFamily
+  --page-403-margin-vertical: var(--spacing-xl); // @presenter Spacing
+  --page-403-margin-horizontal: calc(var(--spacing-xxl) * 2); // @presenter Spacing
+  --page-403-gap: var(--spacing-lg); // @presenter Spacing
+  --page-403-max-width: 680px; // @presenter Width
+
+  --page-403-status-text-color: var(--text-color-helper); // @presenter Color
+  --page-403-status-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-403-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-403-title-text-color: var(--text-color-primary); // @presenter Color
+  --page-403-title-font-size: 42px; // @presenter FontSize
+  --page-403-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-403-title-line-height: 50px; // @presenter LineHeight
+
+  --page-403-description-text-color: var(--text-color-secondary); // @presenter Color
+  --page-403-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-403-description-line-height: var(--line-height-xl); // @presenter LineHeight
+
+  // @tokens End
 
-  --page-403-header-text-color: var(--h1-text-color);
+  /**
+    * @tokens 403 Page OIDC Forbidden
+    * @presenter Color
+    */
+
+  --page-403-header-text-color: var(--h1-text-color); // @presenter Color
   --page-403-header-font-size: var(--h1-font-size); // @presenter FontSize
   --page-403-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
   --page-403-header-line-height: var(--h1-line-height); // @presenter LineHeight
   --page-403-header-margin: 0; // @presenter Spacing
-
-  --page-403-description-text-color: var(--text-color-secondary);
-  --page-403-description-font-size: 1.5em; // @presenter FontSize
-  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-403-description-line-height: 1; // @presenter LineHeight
   --page-403-description-margin: 0; // @presenter Spacing
-
-  --page-403-button-margin: 4em; // @presenter Spacing
-
-  --page-403-oidc-description-font-size: var(--font-size-lg);
-  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
+  --page-403-oidc-description-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm); // @presenter Spacing
 
   // @tokens End
 

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.tags.more' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.back' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.feedback.title' | 'search.ai.feedback.detailsPlaceholder' | 'search.ai.feedback.thanks' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'search.ai.feedback.more' | 'search.searchItem.deprecated' | 'search.groups.all' | 'search.filter.field.footer' | 'aiAssistant.trigger' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.forbidden.description' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'catalog.backToAllLabel' | 'catalog.tags.more' | 'catalog.tags.label' | 'catalog.sort' | 'catalog.catalogs.label' | 'catalog.owners.label' | 'catalog.repositories.label' | 'catalog.email.label' | 'catalog.format.label' | 'catalog.entityType.label' | 'catalog.domains.label' | 'catalog.contact.label' | 'catalog.methodAndPath.label' | 'catalog.links.label' | 'catalog.metadata.domains' | 'catalog.metadata.owners' | 'catalog.history.button.label' | 'catalog.history.sidebar.title' | 'catalog.history.sidebar.close' | 'catalog.history.version.label' | 'catalog.history.version.notSpecified' | 'catalog.history.version.default' | 'catalog.history.revisions.limitMessage' | 'catalog.history.revision.current' | 'catalog.history.revisions.showLess' | 'catalog.history.revisions.showMore' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'page.actions.cursorMcpButtonText' | 'page.actions.cursorMcpTitle' | 'page.actions.cursorMcpDescription' | 'page.actions.connectMcp' | 'page.actions.connectMcp.cursor' | 'page.actions.connectMcp.cursorDescription' | 'page.actions.connectMcp.vscode' | 'page.actions.connectMcp.vscodeDescription' | 'page.actions.connectMcp.copyConfig' | 'page.actions.connectMcp.copyConfigDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.discriminator.defaultMapping' | 'openapi.discriminator.defaultMappingTooltip' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'openapi.mcp.title' | 'openapi.mcp.endpoint' | 'openapi.mcp.tools' | 'openapi.mcp.protocolVersion' | 'openapi.mcp.capabilities' | 'openapi.mcp.experimentalCapabilities' | 'openapi.mcp.inputSchema' | 'openapi.mcp.inputExample' | 'openapi.mcp.outputSchema' | 'openapi.mcp.outputExample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.download.description.title' | 'graphql.info.title' | 'graphql.info.contact.url' | 'graphql.info.contact.name' | 'graphql.info.license' | 'graphql.info.termsOfService' | 'graphql.overview' | 'graphql.metadata' | 'graphql.key' | 'graphql.value' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label' | 'select.noResults' | 'loaders.loading' | 'filter.dateRange.from' | 'filter.dateRange.to';
 export type Locale = {
     code: string;
     name: string;

package/lib/index.d.ts

@@ -274,5 +274,8 @@ export * from './layouts/OIDCForbidden';
 export * from './layouts/ThreePanelLayout';
 export * from './layouts/CodeWalkthroughLayout';
 export * from './layouts/InternalServerErrorLayout';
+export * from './layouts/DocumentationLayout';
+export * from './layouts/DocumentationLayoutTop';
+export * from './layouts/DocumentationLayoutBottom';
 export * as markdoc from './markdoc/default';
 export * from './components/DatePicker/DatePicker';

package/lib/index.js

@@ -338,6 +338,9 @@ __exportStar(require("./layouts/OIDCForbidden"), exports);
 __exportStar(require("./layouts/ThreePanelLayout"), exports);
 __exportStar(require("./layouts/CodeWalkthroughLayout"), exports);
 __exportStar(require("./layouts/InternalServerErrorLayout"), exports);
+__exportStar(require("./layouts/DocumentationLayout"), exports);
+__exportStar(require("./layouts/DocumentationLayoutTop"), exports);
+__exportStar(require("./layouts/DocumentationLayoutBottom"), exports);
 /* Markdoc */
 exports.markdoc = __importStar(require("./markdoc/default"));
 /* DatePicker */

package/lib/layouts/DocumentationLayout.js

@@ -6,26 +6,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DocumentationLayout = DocumentationLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const EditPageButton_1 = require("../components/Buttons/EditPageButton");
 const utils_1 = require("../core/utils");
-const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
-const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
-const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
 const CodeSnippetContext_1 = require("../core/contexts/CodeSnippetContext");
+const DocumentationLayoutTop_1 = require("../layouts/DocumentationLayoutTop");
+const DocumentationLayoutBottom_1 = require("../layouts/DocumentationLayoutBottom");
 function DocumentationLayout({ tableOfContent, feedback, config, editPage, lastModified, nextPage, prevPage, className, children, }) {
     var _a;
-    const { editPage: themeEditPage } = config || {};
-    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
     return (react_1.default.createElement(CodeSnippetContext_1.CodeSnippetProvider, null,
         react_1.default.createElement(LayoutWrapper, { "data-component-name": "Layout/DocumentationLayout", className: className },
             react_1.default.createElement(ContentWrapper, { withToc: !((_a = config === null || config === void 0 ? void 0 : config.toc) === null || _a === void 0 ? void 0 : _a.hide) },
-                react_1.default.createElement(Breadcrumbs, null),
-                react_1.default.createElement(LayoutTop, null,
-                    lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
-                    mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to })),
+                react_1.default.createElement(DocumentationLayoutTop_1.DocumentationLayoutTop, { config: config, editPage: editPage, lastModified: lastModified }),
                 children,
-                react_1.default.createElement(LayoutBottom, null, feedback),
-                react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })),
+                react_1.default.createElement(DocumentationLayoutBottom_1.DocumentationLayoutBottom, { feedback: feedback, nextPage: nextPage, prevPage: prevPage })),
             tableOfContent)));
 }
 const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => ({
@@ -58,17 +50,4 @@ const ContentWrapper = styled_components_1.default.section `
     width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
   }
 `;
-const LayoutTop = styled_components_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-`;
-const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
-  margin-bottom: var(--breadcrumbs-margin-bottom);
-`;
-const LayoutBottom = (0, styled_components_1.default)(LayoutTop) `
-  > * {
-    margin: 25px 0;
-  }
-`;
 //# sourceMappingURL=DocumentationLayout.js.map

package/lib/layouts/DocumentationLayoutBottom.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { ResolvedNavItemWithLink } from '@redocly/config';
+type DocumentationLayoutBottomProps = {
+    feedback: React.ReactNode;
+    nextPage?: ResolvedNavItemWithLink | null;
+    prevPage?: ResolvedNavItemWithLink | null;
+    className?: string;
+};
+export declare function DocumentationLayoutBottom({ feedback, nextPage, prevPage, }: React.PropsWithChildren<DocumentationLayoutBottomProps>): JSX.Element;
+export {};

package/lib/layouts/DocumentationLayoutBottom.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentationLayoutBottom = DocumentationLayoutBottom;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const PageNavigation_1 = require("../components/PageNavigation/PageNavigation");
+function DocumentationLayoutBottom({ feedback, nextPage, prevPage, }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Layout/DocumentationLayoutBottom" },
+        react_1.default.createElement(LayoutBottom, null, feedback),
+        react_1.default.createElement(PageNavigation_1.PageNavigation, { nextPage: nextPage, prevPage: prevPage })));
+}
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const LayoutBottom = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+
+  > * {
+    margin: 25px 0;
+  }
+`;
+//# sourceMappingURL=DocumentationLayoutBottom.js.map

package/lib/layouts/DocumentationLayoutTop.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { JSX } from 'react';
+import type { MarkdownConfig } from '@redocly/config';
+type DocumentationLayoutTopProps = {
+    config?: MarkdownConfig;
+    editPage?: {
+        to: string;
+    };
+    /** String in ISO format */
+    lastModified?: string | null;
+};
+export declare function DocumentationLayoutTop({ config, editPage, lastModified, }: React.PropsWithChildren<DocumentationLayoutTopProps>): JSX.Element;
+export {};

package/lib/layouts/DocumentationLayoutTop.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DocumentationLayoutTop = DocumentationLayoutTop;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const EditPageButton_1 = require("../components/Buttons/EditPageButton");
+const LastUpdated_1 = require("../components/LastUpdated/LastUpdated");
+const Breadcrumbs_1 = require("../components/Breadcrumbs/Breadcrumbs");
+function DocumentationLayoutTop({ config, editPage, lastModified, }) {
+    const { editPage: themeEditPage } = config || {};
+    const mergedConf = editPage ? Object.assign(Object.assign({}, themeEditPage), editPage) : undefined;
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Layout/DocumentationLayoutTop" },
+        react_1.default.createElement(Breadcrumbs, null),
+        react_1.default.createElement(LayoutTop, null,
+            lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: new Date(lastModified) }),
+            mergedConf && react_1.default.createElement(EditPageButton_1.EditPageButton, { to: mergedConf.to }))));
+}
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const LayoutTop = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+const Breadcrumbs = (0, styled_components_1.default)(Breadcrumbs_1.Breadcrumbs) `
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;
+//# sourceMappingURL=DocumentationLayoutTop.js.map

package/lib/layouts/Forbidden.js

@@ -8,38 +8,42 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../core/hooks");
 const Button_1 = require("../components/Button/Button");
+const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
 function Forbidden() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/Forbidden" },
-        react_1.default.createElement(Header, null, "403"),
-        react_1.default.createElement(Description, { "data-translation-key": "page.forbidden.title" }, translate('page.forbidden.title', 'Access forbidden')),
-        react_1.default.createElement(HomeButton, { variant: "primary", size: "large", to: "/", "data-translation-key": "page.homeButton" }, translate('page.homeButton', 'Go home'))));
+    return (react_1.default.createElement(ForbiddenWrapper, { "data-component-name": "layouts/Forbidden" },
+        react_1.default.createElement(StatusText, null, "403"),
+        react_1.default.createElement(Title, { "data-translation-key": "page.forbidden.title" }, translate('page.forbidden.title', 'Access forbidden')),
+        react_1.default.createElement(Description, { "data-translation-key": "page.forbidden.description" }, translate('page.forbidden.description', "You don't have permission to access this page. If you believe this is an error, contact your administrator or return to the homepage.")),
+        react_1.default.createElement(Button_1.Button, { variant: "primary", size: "large", to: "/", "data-translation-key": "page.homeButton", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }, translate('page.homeButton', 'Go home'))));
 }
-const Wrapper = styled_components_1.default.div `
+const ForbiddenWrapper = styled_components_1.default.div `
+  height: 100%;
+  max-width: var(--page-403-max-width);
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
-  margin: 25px auto;
+  margin: var(--page-403-margin-vertical) var(--page-403-margin-horizontal);
   font-family: var(--page-403-font-family);
-  text-align: center;
+  gap: var(--page-403-gap);
 `;
-const Header = styled_components_1.default.div `
-  color: var(--page-403-header-text-color);
-  margin: var(--page-403-header-margin);
-  font-size: var(--page-403-header-font-size);
-  line-height: var(--page-403-header-line-height);
-  font-weight: var(--page-403-header-font-weight);
+const StatusText = styled_components_1.default.div `
+  color: var(--page-403-status-text-color);
+  font-size: var(--page-403-status-font-size);
+  line-height: var(--page-403-status-line-height);
+  font-weight: var(--page-403-status-font-weight);
+`;
+const Title = styled_components_1.default.div `
+  color: var(--page-403-title-text-color);
+  font-size: var(--page-403-title-font-size);
+  line-height: var(--page-403-title-line-height);
+  font-weight: var(--page-403-title-font-weight);
 `;
 const Description = styled_components_1.default.div `
   color: var(--page-403-description-text-color);
-  margin: var(--page-403-description-margin);
   font-size: var(--page-403-description-font-size);
   line-height: var(--page-403-description-line-height);
   font-weight: var(--page-403-description-font-weight);
 `;
-const HomeButton = (0, styled_components_1.default)(Button_1.Button) `
-  margin-top: var(--page-403-button-margin);
-`;
 //# sourceMappingURL=Forbidden.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.61.1",
+  "version": "0.62.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.7.0"
+    "@redocly/realm-asyncapi-sdk": "0.8.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -88,7 +88,7 @@
     "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build": "npm run clean && npm run compile",
+    "build": "pnpm run clean && pnpm run compile",
     "test": "vitest run",
     "test:update": "vitest run --update",
     "test:watch": "vitest",

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -20,7 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
-import { CatalogEntityHistorySidebar } from '@redocly/theme';
+import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
 export type CatalogEntityProps = {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -7,8 +7,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { transformRevisionsToVersionHistory } from '@redocly/theme/core/utils';
 import { DEFAULT_LOCALE_PLACEHOLDER } from '@redocly/theme/core/constants';
-
-import { CatalogEntityVersionItem } from './CatalogEntityVersionItem';
+import { CatalogEntityVersionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem';
 
 export type CatalogHistorySidebarProps = {
   entityKey: string;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme';
+import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 

package/src/components/Catalog/CatalogTableView/CatalogTableViewRow.tsx

@@ -10,8 +10,7 @@ import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
 import { useCatalogEntityDetails } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
-
-import { Link } from '../../Link/Link';
+import { Link } from '@redocly/theme/components/Link/Link';
 
 export type BaseEntity = {
   id: string;

package/src/components/JsonViewer/JsonViewer.tsx

@@ -5,8 +5,7 @@ import type { JSX } from 'react';
 import type { CodeBlockControlsProps } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
 
 import { CodeBlock } from '@redocly/theme/components/CodeBlock/CodeBlock';
-
-import { JsonValue } from './Helpers';
+import { JsonValue } from '@redocly/theme/components/JsonViewer/Helpers';
 
 export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-samples';
 

package/src/components/Search/SearchAiMessage.tsx

@@ -12,9 +12,8 @@ import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { DocumentIcon } from '@redocly/theme/icons/DocumentIcon/DocumentIcon';
 import { AiStarsIcon } from '@redocly/theme/icons/AiStarsIcon/AiStarsIcon';
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
-
-import { SearchAiActionButtons } from './SearchAiActionButtons';
-import { SearchAiNegativeFeedbackForm } from './SearchAiNegativeFeedbackForm';
+import { SearchAiActionButtons } from '@redocly/theme/components/Search/SearchAiActionButtons';
+import { SearchAiNegativeFeedbackForm } from '@redocly/theme/components/Search/SearchAiNegativeFeedbackForm';
 
 export type SearchAiMessageProps = {
   role: AiSearchConversationRole;

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -16,6 +16,7 @@ export const useThemeHooks = vi.fn(() => ({
     send: vi.fn(),
     sendCodeSnippetReportedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
+    sendColorModeSwitchedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue({ breadcrumbs: [], siblings: undefined }),
   useBanner: vi.fn(() => ({

package/src/core/hooks/use-page-actions.ts

@@ -280,9 +280,10 @@ function shouldHidePageActions(
   }
 
   // Page is excluded from search
+  const isOpenApiPage =
+    pageProps?.metadata?.type === 'openapi' || pageProps?.metadata?.subType === 'openapi-operation';
   const isPageExcludedFromSearch =
-    pageProps?.frontmatter?.excludeFromSearch ||
-    (pageProps?.metadata?.type === 'openapi' && openapiExcludeFromSearch);
+    pageProps?.frontmatter?.excludeFromSearch || (isOpenApiPage && openapiExcludeFromSearch);
 
   if (isPageExcludedFromSearch) {
     return true;

package/src/core/hooks/use-unique-svg-ids.ts

@@ -0,0 +1,12 @@
+import { useId } from 'react';
+
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+export function useUniqueSvgIds(): (id: string) => string {
+  const reactId = useId();
+  const safeSuffix = reactId.replace(/:/g, '_');
+  return (id: string): string => `${id}-${safeSuffix}`;
+}

package/src/core/openapi/index.ts

@@ -38,3 +38,4 @@ export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
+export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';

package/src/core/styles/global.ts

@@ -971,23 +971,41 @@ const pages = css`
     */
 
   --page-403-font-family: var(--font-family-base); // @presenter FontFamily
+  --page-403-margin-vertical: var(--spacing-xl); // @presenter Spacing
+  --page-403-margin-horizontal: calc(var(--spacing-xxl) * 2); // @presenter Spacing
+  --page-403-gap: var(--spacing-lg); // @presenter Spacing
+  --page-403-max-width: 680px; // @presenter Width
+
+  --page-403-status-text-color: var(--text-color-helper); // @presenter Color
+  --page-403-status-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-403-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-403-title-text-color: var(--text-color-primary); // @presenter Color
+  --page-403-title-font-size: 42px; // @presenter FontSize
+  --page-403-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-403-title-line-height: 50px; // @presenter LineHeight
+
+  --page-403-description-text-color: var(--text-color-secondary); // @presenter Color
+  --page-403-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-403-description-line-height: var(--line-height-xl); // @presenter LineHeight
+
+  // @tokens End
 
-  --page-403-header-text-color: var(--h1-text-color);
+  /**
+    * @tokens 403 Page OIDC Forbidden
+    * @presenter Color
+    */
+
+  --page-403-header-text-color: var(--h1-text-color); // @presenter Color
   --page-403-header-font-size: var(--h1-font-size); // @presenter FontSize
   --page-403-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
   --page-403-header-line-height: var(--h1-line-height); // @presenter LineHeight
   --page-403-header-margin: 0; // @presenter Spacing
-
-  --page-403-description-text-color: var(--text-color-secondary);
-  --page-403-description-font-size: 1.5em; // @presenter FontSize
-  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-403-description-line-height: 1; // @presenter LineHeight
   --page-403-description-margin: 0; // @presenter Spacing
-
-  --page-403-button-margin: 4em; // @presenter Spacing
-
-  --page-403-oidc-description-font-size: var(--font-size-lg);
-  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
+  --page-403-oidc-description-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm); // @presenter Spacing
 
   // @tokens End
 

package/src/core/types/l10n.ts

@@ -116,6 +116,7 @@ export type TranslationKey =
   | 'footer.copyrightText'
   | 'page.homeButton'
   | 'page.forbidden.title'
+  | 'page.forbidden.description'
   | 'page.notFound.title'
   | 'page.notFound.description'
   | 'page.lastUpdated.timeago'

package/src/index.ts

@@ -302,6 +302,9 @@ export * from '@redocly/theme/layouts/OIDCForbidden';
 export * from '@redocly/theme/layouts/ThreePanelLayout';
 export * from '@redocly/theme/layouts/CodeWalkthroughLayout';
 export * from '@redocly/theme/layouts/InternalServerErrorLayout';
+export * from '@redocly/theme/layouts/DocumentationLayout';
+export * from '@redocly/theme/layouts/DocumentationLayoutTop';
+export * from '@redocly/theme/layouts/DocumentationLayoutBottom';
 /* Markdoc */
 export * as markdoc from '@redocly/theme/markdoc/default';
 /* DatePicker */

package/src/layouts/DocumentationLayout.tsx

@@ -4,12 +4,10 @@ import styled from 'styled-components';
 import type { JSX } from 'react';
 import type { ResolvedNavItemWithLink, MarkdownConfig } from '@redocly/config';
 
-import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
 import { breakpoints } from '@redocly/theme/core/utils';
-import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
-import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
-import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
 import { CodeSnippetProvider } from '@redocly/theme/core/contexts/CodeSnippetContext';
+import { DocumentationLayoutTop } from '@redocly/theme/layouts/DocumentationLayoutTop';
+import { DocumentationLayoutBottom } from '@redocly/theme/layouts/DocumentationLayoutBottom';
 
 type DocumentationLayoutProps = {
   tableOfContent: React.ReactNode;
@@ -36,21 +34,13 @@ export function DocumentationLayout({
   className,
   children,
 }: React.PropsWithChildren<DocumentationLayoutProps>): JSX.Element {
-  const { editPage: themeEditPage } = config || {};
-  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
-
   return (
     <CodeSnippetProvider>
       <LayoutWrapper data-component-name="Layout/DocumentationLayout" className={className}>
         <ContentWrapper withToc={!config?.toc?.hide}>
-          <Breadcrumbs />
-          <LayoutTop>
-            {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
-            {mergedConf && <EditPageButton to={mergedConf.to} />}
-          </LayoutTop>
+          <DocumentationLayoutTop config={config} editPage={editPage} lastModified={lastModified} />
           {children}
-          <LayoutBottom>{feedback}</LayoutBottom>
-          <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+          <DocumentationLayoutBottom feedback={feedback} nextPage={nextPage} prevPage={prevPage} />
         </ContentWrapper>
         {tableOfContent}
       </LayoutWrapper>
@@ -89,19 +79,3 @@ const ContentWrapper = styled.section<{ withToc: boolean }>`
     width: ${({ withToc }) => (withToc ? `calc(90% - var(--toc-width))` : '90%')};
   }
 `;
-
-const LayoutTop = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-flow: row nowrap;
-`;
-
-const Breadcrumbs = styled(ThemeBreadcrumbs)`
-  margin-bottom: var(--breadcrumbs-margin-bottom);
-`;
-
-const LayoutBottom = styled(LayoutTop)`
-  > * {
-    margin: 25px 0;
-  }
-`;

package/src/layouts/DocumentationLayoutBottom.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ResolvedNavItemWithLink } from '@redocly/config';
+
+import { PageNavigation } from '@redocly/theme/components/PageNavigation/PageNavigation';
+
+type DocumentationLayoutBottomProps = {
+  feedback: React.ReactNode;
+  nextPage?: ResolvedNavItemWithLink | null;
+  prevPage?: ResolvedNavItemWithLink | null;
+  className?: string;
+};
+
+export function DocumentationLayoutBottom({
+  feedback,
+  nextPage,
+  prevPage,
+}: React.PropsWithChildren<DocumentationLayoutBottomProps>): JSX.Element {
+  return (
+    <Wrapper data-component-name="Layout/DocumentationLayoutBottom">
+      <LayoutBottom>{feedback}</LayoutBottom>
+      <PageNavigation nextPage={nextPage} prevPage={prevPage} />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LayoutBottom = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+
+  > * {
+    margin: 25px 0;
+  }
+`;

package/src/layouts/DocumentationLayoutTop.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { MarkdownConfig } from '@redocly/config';
+
+import { EditPageButton } from '@redocly/theme/components/Buttons/EditPageButton';
+import { LastUpdated } from '@redocly/theme/components/LastUpdated/LastUpdated';
+import { Breadcrumbs as ThemeBreadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
+
+type DocumentationLayoutTopProps = {
+  config?: MarkdownConfig;
+  editPage?: {
+    to: string;
+  };
+  /** String in ISO format */
+  lastModified?: string | null;
+};
+
+export function DocumentationLayoutTop({
+  config,
+  editPage,
+  lastModified,
+}: React.PropsWithChildren<DocumentationLayoutTopProps>): JSX.Element {
+  const { editPage: themeEditPage } = config || {};
+  const mergedConf = editPage ? { ...themeEditPage, ...editPage } : undefined;
+
+  return (
+    <Wrapper data-component-name="Layout/DocumentationLayoutTop">
+      <Breadcrumbs />
+      <LayoutTop>
+        {lastModified && <LastUpdated lastModified={new Date(lastModified)} />}
+        {mergedConf && <EditPageButton to={mergedConf.to} />}
+      </LayoutTop>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const LayoutTop = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+`;
+
+const Breadcrumbs = styled(ThemeBreadcrumbs)`
+  margin-bottom: var(--breadcrumbs-margin-bottom);
+`;

package/src/layouts/Forbidden.tsx

@@ -5,50 +5,65 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
+import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 
 export function Forbidden(): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
   return (
-    <Wrapper data-component-name="Pages/Forbidden">
-      <Header>403</Header>
-      <Description data-translation-key="page.forbidden.title">
+    <ForbiddenWrapper data-component-name="layouts/Forbidden">
+      <StatusText>403</StatusText>
+      <Title data-translation-key="page.forbidden.title">
         {translate('page.forbidden.title', 'Access forbidden')}
+      </Title>
+      <Description data-translation-key="page.forbidden.description">
+        {translate(
+          'page.forbidden.description',
+          "You don't have permission to access this page. If you believe this is an error, contact your administrator or return to the homepage.",
+        )}
       </Description>
-      <HomeButton variant="primary" size="large" to="/" data-translation-key="page.homeButton">
+      <Button
+        variant="primary"
+        size="large"
+        to="/"
+        data-translation-key="page.homeButton"
+        icon={<ArrowLeftIcon />}
+      >
         {translate('page.homeButton', 'Go home')}
-      </HomeButton>
-    </Wrapper>
+      </Button>
+    </ForbiddenWrapper>
   );
 }
 
-const Wrapper = styled.div`
+const ForbiddenWrapper = styled.div`
+  height: 100%;
+  max-width: var(--page-403-max-width);
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
-  margin: 25px auto;
+  margin: var(--page-403-margin-vertical) var(--page-403-margin-horizontal);
   font-family: var(--page-403-font-family);
-  text-align: center;
+  gap: var(--page-403-gap);
 `;
 
-const Header = styled.div`
-  color: var(--page-403-header-text-color);
-  margin: var(--page-403-header-margin);
-  font-size: var(--page-403-header-font-size);
-  line-height: var(--page-403-header-line-height);
-  font-weight: var(--page-403-header-font-weight);
+const StatusText = styled.div`
+  color: var(--page-403-status-text-color);
+  font-size: var(--page-403-status-font-size);
+  line-height: var(--page-403-status-line-height);
+  font-weight: var(--page-403-status-font-weight);
+`;
+
+const Title = styled.div`
+  color: var(--page-403-title-text-color);
+  font-size: var(--page-403-title-font-size);
+  line-height: var(--page-403-title-line-height);
+  font-weight: var(--page-403-title-font-weight);
 `;
 
 const Description = styled.div`
   color: var(--page-403-description-text-color);
-  margin: var(--page-403-description-margin);
   font-size: var(--page-403-description-font-size);
   line-height: var(--page-403-description-line-height);
   font-weight: var(--page-403-description-font-weight);
 `;
-
-const HomeButton = styled(Button)`
-  margin-top: var(--page-403-button-margin);
-`;