@redocly/theme 0.61.1 → 0.62.0-custom.0

package/lib/ext/process-scorecard.js

@@ -0,0 +1,11 @@
+"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, []),
+    };
+}
+//# sourceMappingURL=process-scorecard.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;

package/lib/markdoc/components/LoginButton/LoginButton.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginButton = LoginButton;
+const React = __importStar(require("react"));
+const hooks_1 = require("../../../core/hooks");
+const LoginButton_1 = require("../../../components/UserMenu/LoginButton");
+function LoginButton({ variant, size, label, labelTranslationKey, }) {
+    const { useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData, loginUrl } = useUserMenu();
+    if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+        return null;
+    }
+    return (React.createElement(LoginButton_1.LoginButton, { href: loginUrl || '', variant: variant, size: size, label: label, labelTranslationKey: labelTranslationKey, "data-component-name": "Markdoc/LoginButton" }));
+}
+//# sourceMappingURL=LoginButton.js.map

package/lib/markdoc/components/Mermaid/Mermaid.js

@@ -1,18 +1,75 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = Mermaid;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
 function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
-    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/Mermaid/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const open = () => setIsOpen(true);
+    const close = () => setIsOpen(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/Mermaid/Mermaid", "data-source": dataSource, "data-hash": dataHash, onClick: open, onKeyDown: (e) => e.key === 'Enter' || (e.key === ' ' && open()), role: "button", tabIndex: 0, "aria-label": translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen') }),
+        react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
+                zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
+                zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
+                fitToView: translate('mermaid.reset', 'Fit to view'),
+                close: translate('mermaid.close', 'Close'),
+                dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
+            } },
+            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
 }
 const Wrapper = styled_components_1.default.div `
   background-color: var(--mermaid-bg-color);
   border-radius: var(--mermaid-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
 
   * {
     font-family: var(--mermaid-font-family) !important;
@@ -23,4 +80,15 @@ const Wrapper = styled_components_1.default.div `
     max-width: 100%;
   }
 `;
+const ViewerContent = styled_components_1.default.div `
+  * {
+    font-family: var(--mermaid-font-family) !important;
+  }
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    display: block;
+    max-width: none !important;
+  }
+`;
 //# sourceMappingURL=Mermaid.js.map

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

@@ -21,3 +21,4 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
 export * from '../../markdoc/components/ConnectMCP/ConnectMCP';
+export * from '../../markdoc/components/LoginButton/LoginButton';

package/lib/markdoc/components/default.js

@@ -37,4 +37,5 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"),
 __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 __exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
+__exportStar(require("../../markdoc/components/LoginButton/LoginButton"), exports);
 //# sourceMappingURL=default.js.map

package/lib/markdoc/default.d.ts

@@ -23,6 +23,7 @@ import { toggle } from '../markdoc/tags/code-toggle';
 import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
 import { connectMcp } from '../markdoc/tags/connect-mcp';
+import { loginButton } from '../markdoc/tags/login-button';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -119,4 +120,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [loginButton.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -65,6 +65,7 @@ const code_toggle_1 = require("../markdoc/tags/code-toggle");
 const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
 const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
+const login_button_1 = require("../markdoc/tags/login-button");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -85,5 +86,6 @@ exports.tags = {
     [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
     [icon_1.icon.tagName]: icon_1.icon.schema,
     [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
+    [login_button_1.loginButton.tagName]: login_button_1.loginButton.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/login-button.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const loginButton: MarkdocSchemaWrapper;