@redocly/theme 0.61.0 → 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/icons/WarningCycleIcon/WarningCycleIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const WarningCycleIcon: 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/WarningCycleIcon/WarningCycleIcon.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.WarningCycleIcon = 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: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9 1.125C7.44248 1.125 5.91992 1.58686 4.62489 2.45218C3.32985 3.31749 2.32049 4.5474 1.72445 5.98637C1.12841 7.42534 0.972461 9.00874 1.27632 10.5363C1.58018 12.0639 2.3302 13.4671 3.43154 14.5685C4.53288 15.6698 5.93607 16.4198 7.46367 16.7237C8.99127 17.0275 10.5747 16.8716 12.0136 16.2756C13.4526 15.6795 14.6825 14.6702 15.5478 13.3751C16.4131 12.0801 16.875 10.5575 16.875 9C16.875 6.91142 16.0453 4.90838 14.5685 3.43153C13.0916 1.95469 11.0886 1.125 9 1.125ZM9 15.75C7.66498 15.75 6.35994 15.3541 5.2499 14.6124C4.13987 13.8707 3.27471 12.8165 2.76382 11.5831C2.25293 10.3497 2.11925 8.99251 2.3797 7.68314C2.64015 6.37377 3.28303 5.17103 4.22703 4.22703C5.17104 3.28302 6.37377 2.64015 7.68314 2.3797C8.99252 2.11925 10.3497 2.25292 11.5831 2.76381C12.8165 3.2747 13.8707 4.13987 14.6124 5.2499C15.3541 6.35993 15.75 7.66498 15.75 9C15.75 10.7902 15.0388 12.5071 13.773 13.773C12.5071 15.0388 10.7902 15.75 9 15.75Z" }),
+    react_1.default.createElement("path", { d: "M9.5625 4.5H8.4375V10.6875H9.5625V4.5Z" }),
+    react_1.default.createElement("path", { d: "M9 12.375C8.83313 12.375 8.67 12.4245 8.53124 12.5172C8.39249 12.6099 8.28434 12.7417 8.22048 12.8959C8.15662 13.05 8.13991 13.2197 8.17247 13.3834C8.20502 13.547 8.28538 13.6974 8.40338 13.8154C8.52138 13.9334 8.67172 14.0137 8.8354 14.0463C8.99907 14.0788 9.16872 14.0621 9.32289 13.9983C9.47707 13.9344 9.60884 13.8263 9.70156 13.6875C9.79427 13.5488 9.84375 13.3856 9.84375 13.2188C9.84375 12.995 9.75486 12.7804 9.59662 12.6221C9.43839 12.4639 9.22378 12.375 9 12.375Z" })));
+exports.WarningCycleIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WarningCycleIcon/WarningCycleIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WarningCycleIcon.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';
@@ -194,6 +198,7 @@ export * from './icons/ViewOffIcon/ViewOffIcon';
 export * from './icons/CircleDashIcon/CircleDashIcon';
 export * from './icons/RestartIcon/RestartIcon';
 export * from './icons/WarningFilledIcon/WarningFilledIcon';
+export * from './icons/WarningCycleIcon/WarningCycleIcon';
 export * from './icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
 export * from './icons/InformationFilledIcon/InformationFilledIcon';
 export * from './icons/BareMetalServerIcon/BareMetalServerIcon';
@@ -265,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';
@@ -273,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);
@@ -257,6 +261,7 @@ __exportStar(require("./icons/ViewOffIcon/ViewOffIcon"), exports);
 __exportStar(require("./icons/CircleDashIcon/CircleDashIcon"), exports);
 __exportStar(require("./icons/RestartIcon/RestartIcon"), exports);
 __exportStar(require("./icons/WarningFilledIcon/WarningFilledIcon"), exports);
+__exportStar(require("./icons/WarningCycleIcon/WarningCycleIcon"), exports);
 __exportStar(require("./icons/CheckmarkFilledIcon/CheckmarkFilledIcon"), exports);
 __exportStar(require("./icons/InformationFilledIcon/InformationFilledIcon"), exports);
 __exportStar(require("./icons/BareMetalServerIcon/BareMetalServerIcon"), exports);
@@ -328,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);
@@ -337,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