@redocly/theme 0.61.1 → 0.62.0-custom.1

package/lib/core/utils/transform-revisions-to-version-history.js

@@ -3,44 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.transformRevisionsToVersionHistory = transformRevisionsToVersionHistory;
 const constants_1 = require("../../core/constants");
 const date_1 = require("./date");
-function compareVersionsDescending(versionA, versionB) {
-    return versionB.localeCompare(versionA, undefined, { numeric: true });
-}
-function extractGroupComparisonData(group) {
-    var _a, _b;
-    const version = group.version;
-    const isNotSpecified = version === constants_1.VERSION_NOT_SPECIFIED;
-    // Get version dates (oldest revision date for each group - the version's creation date)
-    // This ensures versions stay in their original order even when new revisions are added
-    const date = group.singleRevisionDate ||
-        (group.revisions && group.revisions.length > 0
-            ? (_a = group.revisions[group.revisions.length - 1]) === null || _a === void 0 ? void 0 : _a.revisionDate
-            : undefined) ||
-        '';
-    const time = date ? new Date(date).getTime() : 0;
-    const hasCurrent = (_b = group.hasCurrentRevisionFromBackend) !== null && _b !== void 0 ? _b : false;
-    return { version, isNotSpecified, time, hasCurrent };
-}
-function compareVersionGroupsDescending(groupA, groupB) {
-    const { version: versionA, isNotSpecified: isNotSpecifiedA, time: timeA, hasCurrent: hasCurrentA, } = extractGroupComparisonData(groupA);
-    const { version: versionB, isNotSpecified: isNotSpecifiedB, time: timeB, hasCurrent: hasCurrentB, } = extractGroupComparisonData(groupB);
-    // First, compare by version date (oldest first, so most recent versions come first)
-    const dateComparison = timeB - timeA;
-    if (dateComparison !== 0) {
-        return dateComparison;
-    }
-    // If dates are equal, prioritize the one with isCurrent from backend
-    if (hasCurrentA !== hasCurrentB) {
-        return hasCurrentB ? 1 : -1; // hasCurrentB comes first if true
-    }
-    // If both have same isCurrent status, compare by version
-    // If both are unknown or both are real versions, compare by version
-    if (isNotSpecifiedA === isNotSpecifiedB) {
-        return compareVersionsDescending(versionA, versionB);
-    }
-    // If one is unknown and one is a real version, unknown comes last
-    return isNotSpecifiedA ? 1 : -1;
-}
 function transformRevisionsToVersionHistory({ revisions, currentRevisionDate, currentVersion, locale = typeof navigator !== 'undefined' ? navigator.language : 'en-US', }) {
     const normalizedCurrentVersion = currentVersion === null ? constants_1.VERSION_NOT_SPECIFIED : currentVersion;
     const versionMap = new Map();
@@ -54,17 +16,12 @@ function transformRevisionsToVersionHistory({ revisions, currentRevisionDate, cu
     });
     const versionGroups = Array.from(versionMap.entries()).map(([version, versionRevisions]) => {
         var _a, _b, _c;
-        const sortedRevisions = [...versionRevisions].sort((a, b) => {
-            const dateA = a.revision ? new Date(a.revision).getTime() : 0;
-            const dateB = b.revision ? new Date(b.revision).getTime() : 0;
-            return dateB - dateA;
-        });
-        const latestRevision = sortedRevisions[0];
+        const latestRevision = versionRevisions[0];
         const versionMatches = normalizedCurrentVersion === undefined || normalizedCurrentVersion === version;
         let isCurrent;
         if (currentRevisionDate !== undefined) {
             // Check if revision matches AND version matches
-            const revisionMatches = sortedRevisions.some((rev) => rev.revision === currentRevisionDate);
+            const revisionMatches = versionRevisions.some((rev) => rev.revision === currentRevisionDate);
             isCurrent = revisionMatches && versionMatches;
         }
         else {
@@ -73,27 +30,20 @@ function transformRevisionsToVersionHistory({ revisions, currentRevisionDate, cu
             isCurrent = ((_a = latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.isCurrent) !== null && _a !== void 0 ? _a : false) && versionMatches;
         }
         // Check if any revision in this version group is the default version
-        const isDefaultVersion = sortedRevisions.some((rev) => rev.isDefaultVersion === true);
-        const revisions = sortedRevisions.length > 1
-            ? sortedRevisions.map((rev, index) => {
-                var _a;
-                const revisionMatches = currentRevisionDate
-                    ? rev.revision === currentRevisionDate
-                    : false;
-                const isActiveRevision = revisionMatches && versionMatches;
-                const isCurrentByDefault = !currentRevisionDate &&
-                    normalizedCurrentVersion === undefined &&
-                    index === 0 &&
-                    isCurrent;
-                return {
-                    name: `r.${sortedRevisions.length - index}`,
-                    date: (0, date_1.toLocalizedShortDateTime)(rev.revision, locale),
-                    revisionDate: rev.revision,
-                    isActive: isActiveRevision || isCurrentByDefault,
-                    isCurrent: (_a = rev.isCurrent) !== null && _a !== void 0 ? _a : false,
-                };
-            })
-            : undefined;
+        const isDefaultVersion = versionRevisions.some((rev) => rev.isDefaultVersion === true);
+        const revisions = versionRevisions.map((rev, index) => {
+            var _a;
+            const revisionMatches = currentRevisionDate ? rev.revision === currentRevisionDate : false;
+            const isActiveRevision = revisionMatches && versionMatches;
+            const isCurrentByDefault = !currentRevisionDate && normalizedCurrentVersion === undefined && index === 0 && isCurrent;
+            return {
+                name: `r.${versionRevisions.length - index}`,
+                date: (0, date_1.toLocalizedShortDateTime)(rev.revision, locale),
+                revisionDate: rev.revision,
+                isActive: isActiveRevision || isCurrentByDefault,
+                isCurrent: (_a = rev.isCurrent) !== null && _a !== void 0 ? _a : false,
+            };
+        });
         return {
             version,
             date: (0, date_1.toLocalizedShortDate)((latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.revision) || null, locale),
@@ -102,9 +52,9 @@ function transformRevisionsToVersionHistory({ revisions, currentRevisionDate, cu
             hasCurrentRevisionFromBackend: (_b = latestRevision === null || latestRevision === void 0 ? void 0 : latestRevision.isCurrent) !== null && _b !== void 0 ? _b : false,
             isDefaultVersion,
             revisions,
-            singleRevisionDate: sortedRevisions.length === 1 ? (_c = sortedRevisions[0]) === null || _c === void 0 ? void 0 : _c.revision : undefined,
+            singleRevisionDate: versionRevisions.length === 1 ? (_c = versionRevisions[0]) === null || _c === void 0 ? void 0 : _c.revision : undefined,
         };
     });
-    return versionGroups.sort(compareVersionGroupsDescending);
+    return versionGroups;
 }
 //# sourceMappingURL=transform-revisions-to-version-history.js.map

package/lib/ext/process-scorecard.d.ts

@@ -0,0 +1,49 @@
+import type { CatalogItem } from '../core/types';
+import type { ReactNode } from 'react';
+export type ScorecardApiTableRow<TScorecard = unknown> = {
+    api: CatalogItem;
+    scorecard?: TScorecard;
+};
+export type ScorecardApiTableColumnStatus = 'error' | 'warning' | 'success';
+export type ScorecardApiTableColumnDetails<TScorecard = unknown> = {
+    hidden?: boolean;
+    tabLabel?: string;
+    description?: ReactNode | ((row: ScorecardApiTableRow<TScorecard>) => ReactNode);
+    render?: (params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+    }) => ReactNode;
+    status?: ScorecardApiTableColumnStatus | ((params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+    }) => ScorecardApiTableColumnStatus);
+    statusRule?: 'problem-if-truthy' | 'problem-if-falsy';
+};
+export type ScorecardApiTableColumn<TScorecard = unknown> = {
+    id: string;
+    header: string;
+    placement?: 'beforeLevels' | 'afterLevels';
+    size?: number;
+    minSize?: number;
+    maxSize?: number;
+    sortRule?: 'string' | 'number' | 'date';
+    sortDescFirst?: boolean;
+    getValue?: (row: ScorecardApiTableRow<TScorecard>) => unknown;
+    getSortValue?: (row: ScorecardApiTableRow<TScorecard>) => unknown;
+    render?: (params: {
+        row: ScorecardApiTableRow<TScorecard>;
+        value: unknown;
+    }) => ReactNode;
+    details?: ScorecardApiTableColumnDetails<TScorecard>;
+    sortingFn?: (params: {
+        rowA: ScorecardApiTableRow<TScorecard>;
+        rowB: ScorecardApiTableRow<TScorecard>;
+        valueA: unknown;
+        valueB: unknown;
+    }) => number;
+};
+export declare function useProcessScorecard(): {
+    processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
+    processInfo: <T>(info: T) => T;
+    getApiTableColumns: () => ScorecardApiTableColumn[];
+};

package/lib/ext/process-scorecard.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProcessScorecard = useProcessScorecard;
+const react_1 = require("react");
+function useProcessScorecard() {
+    return {
+        processScorecard: (0, react_1.useCallback)((scorecard) => scorecard, []),
+        processInfo: (0, react_1.useCallback)((info) => info, []),
+        getApiTableColumns: (0, react_1.useCallback)(() => [], []),
+    };
+}
+//# sourceMappingURL=process-scorecard.js.map

package/lib/icons/DirectionRightIcon/DirectionRightIcon.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const DirectionRightIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/lib/icons/DirectionRightIcon/DirectionRightIcon.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DirectionRightIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9.5 4L8.79295 4.70705L11.0859 7H5C4.73478 7 4.48043 7.10536 4.29289 7.29289C4.10536 7.48043 4 7.73478 4 8V14H5V8H11.0859L8.79295 10.2929L9.5 11L13 7.5L9.5 4Z", fill: "#1A1C21" }),
+    react_1.default.createElement("path", { d: "M5 2H4V6H5V2Z", fill: "#1A1C21" })));
+exports.DirectionRightIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/DirectionRightIcon/DirectionRightIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  vertical-align: middle;
+`;
+//# sourceMappingURL=DirectionRightIcon.js.map

package/lib/icons/FitToViewIcon/FitToViewIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const FitToViewIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/FitToViewIcon/FitToViewIcon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FitToViewIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M1 1H5V2.5H2.5V5H1V1Z" }),
+    react_1.default.createElement("path", { d: "M15 1H11V2.5H13.5V5H15V1Z" }),
+    react_1.default.createElement("path", { d: "M1 15H5V13.5H2.5V11H1V15Z" }),
+    react_1.default.createElement("path", { d: "M15 15H11V13.5H13.5V11H15V15Z" })));
+exports.FitToViewIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/FitToViewIcon/FitToViewIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=FitToViewIcon.js.map

package/lib/index.d.ts

@@ -25,6 +25,7 @@ export * from './components/Tags/CounterTag';
 export * from './components/VersionPicker/VersionPicker';
 export * from './components/Marker/Marker';
 export * from './components/PageActions/PageActions';
+export * from './components/SvgViewer/SvgViewer';
 export * from './components/Buttons/CopyButton';
 export * from './components/Buttons/EditPageButton';
 export * from './components/Buttons/EmailButton';
@@ -79,9 +80,12 @@ export * from './components/UserMenu/UserMenuMobile';
 export * from './components/Sidebar/Sidebar';
 export * from './components/OpenApiDocs/hooks/AfterOpenApiOperation';
 export * from './components/OpenApiDocs/hooks/AfterOpenApiTitle';
+export * from './components/OpenApiDocs/hooks/AfterOpenApiDescription';
 export * from './components/OpenApiDocs/hooks/BeforeOpenApiOperation';
 export * from './components/OpenApiDocs/hooks/OpenApiFooter';
 export * from './components/OpenApiDocs/hooks/OpenApiHeader';
+export * from './components/OpenApiDocs/hooks/AdditionalOverviewInfo';
+export * from './components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription';
 export * from './components/SidebarActions/ChangeViewButton';
 export * from './components/SidebarActions/SidebarActions';
 export * from './components/SidebarActions/styled';
@@ -266,6 +270,7 @@ export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
 export * from './icons/ShareIcon/ShareIcon';
 export * from './icons/HashtagIcon/HashtagIcon';
+export * from './icons/FitToViewIcon/FitToViewIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';
@@ -274,5 +279,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

@@ -64,6 +64,7 @@ __exportStar(require("./components/Tags/CounterTag"), exports);
 __exportStar(require("./components/VersionPicker/VersionPicker"), exports);
 __exportStar(require("./components/Marker/Marker"), exports);
 __exportStar(require("./components/PageActions/PageActions"), exports);
+__exportStar(require("./components/SvgViewer/SvgViewer"), exports);
 /* Buttons */
 __exportStar(require("./components/Buttons/CopyButton"), exports);
 __exportStar(require("./components/Buttons/EditPageButton"), exports);
@@ -132,9 +133,12 @@ __exportStar(require("./components/Sidebar/Sidebar"), exports);
 /* OpenApiDocs */
 __exportStar(require("./components/OpenApiDocs/hooks/AfterOpenApiOperation"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/AfterOpenApiTitle"), exports);
+__exportStar(require("./components/OpenApiDocs/hooks/AfterOpenApiDescription"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/BeforeOpenApiOperation"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/OpenApiFooter"), exports);
 __exportStar(require("./components/OpenApiDocs/hooks/OpenApiHeader"), exports);
+__exportStar(require("./components/OpenApiDocs/hooks/AdditionalOverviewInfo"), exports);
+__exportStar(require("./components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription"), exports);
 /* SidebarActions */
 __exportStar(require("./components/SidebarActions/ChangeViewButton"), exports);
 __exportStar(require("./components/SidebarActions/SidebarActions"), exports);
@@ -329,6 +333,7 @@ __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exp
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 __exportStar(require("./icons/HashtagIcon/HashtagIcon"), exports);
+__exportStar(require("./icons/FitToViewIcon/FitToViewIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);
@@ -338,6 +343,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/lib/markdoc/components/Cards/Card.js

@@ -95,6 +95,7 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
   overflow: hidden;
   transition: box-shadow 0.3s ease;
   position: relative;
+  text-decoration: none;
   --md-paragraph-margin: 0;
   --link-decoration-hover: none;
 

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -46,7 +46,7 @@ const FilterWrapper = styled_components_1.default.div `
   padding-bottom: var(--spacing-xs);
   top: var(--navbar-height);
   background-color: var(--bg-color);
-  z-index: 1;
+  z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);
 `;
 const ButtonsWrapper = styled_components_1.default.div `

package/lib/markdoc/components/Heading/Heading.js

@@ -40,10 +40,31 @@ exports.Heading = Heading;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const react_router_dom_1 = require("react-router-dom");
+const Image_1 = require("../../../markdoc/components/Image/Image");
 const utils_1 = require("../../../core/utils");
 const LinkIcon_1 = require("../../../icons/LinkIcon/LinkIcon");
 const PageActions_1 = require("../../../components/PageActions/PageActions");
 const hooks_1 = require("../../../core/hooks");
+function renderWithSpanWrapper(children) {
+    const childrenArray = react_1.default.Children.toArray(children);
+    if (childrenArray.length === 0)
+        return null;
+    const first = childrenArray[0];
+    const last = childrenArray[childrenArray.length - 1];
+    // Check if an element is an <img> or the Markdoc Image component
+    const isImage = (node) => {
+        if (!(0, react_1.isValidElement)(node))
+            return false;
+        if (typeof node.type === 'string')
+            return node.type === 'img';
+        return node.type === Image_1.Image;
+    };
+    const middleChildren = childrenArray.slice(isImage(first) ? 1 : 0, isImage(last) ? childrenArray.length - 1 : childrenArray.length);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        isImage(first) && first,
+        middleChildren.length > 0 && react_1.default.createElement(StyledHeadingText, null, middleChildren),
+        isImage(last) && last));
+}
 /**
  * Class name for all MD tags
  */
@@ -64,12 +85,29 @@ function Heading({ level, id, children, 'data-source': dataSource, 'data-hash':
         'data-hash': dataHash,
     }, react_1.default.createElement(HeadingContentWrapper, null,
         linkEl,
-        react_1.default.createElement("span", null, children),
+        react_1.default.createElement("span", null, renderWithSpanWrapper(children)),
         isMarkdownPage && __idx === 0 ? react_1.default.createElement(PageActions_1.PageActions, { pageSlug: pathname }) : null));
 }
 const HeadingContentWrapper = styled_components_1.default.div `
   display: flex;
   gap: var(--spacing-xs);
-  align-items: center;
+
+  & > span {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+  }
+
+  &:has([data-component-name='PageActions/PageActions']:hover) {
+    && .anchor svg {
+      visibility: hidden;
+    }
+  }
+`;
+const StyledHeadingText = styled_components_1.default.span `
+  margin: auto 0;
+  && > img:only-child {
+    display: inline-block;
+  }
 `;
 //# sourceMappingURL=Heading.js.map

package/lib/markdoc/components/LoginButton/LoginButton.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import type { ButtonVariant, ButtonSize } from '../../../components/Button/Button';
+export type MarkdocLoginButtonProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    label?: string;
+    labelTranslationKey?: string;
+};
+export declare function LoginButton({ variant, size, label, labelTranslationKey, }: MarkdocLoginButtonProps): React.JSX.Element | null;