@redocly/theme 0.4.8 → 0.4.9

package/LastUpdated/LastUpdated.js

@@ -3,23 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LastUpdated = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var timeago_js_1 = require("timeago.js");
 var hooks_1 = require("../mocks/hooks");
@@ -30,7 +19,9 @@ function LastUpdated(_a) {
     if (lastUpdatedBlock === null || lastUpdatedBlock === void 0 ? void 0 : lastUpdatedBlock.hide) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "LastUpdated/LastUpdated" }, { children: ["Last updated ", (0, timeago_js_1.format)(lastModified)] })));
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "LastUpdated/LastUpdated" },
+        "Last updated ",
+        (0, timeago_js_1.format)(lastModified)));
 }
 exports.LastUpdated = LastUpdated;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--last-updated-text-color);\n  font-size: var(--last-updated-font-size);\n  font-family: var(--last-updated-font-family);\n  line-height: var(--last-updated-line-height);\n  padding-bottom: 30px;\n"], ["\n  color: var(--last-updated-text-color);\n  font-size: var(--last-updated-font-size);\n  font-family: var(--last-updated-font-family);\n  line-height: var(--last-updated-line-height);\n  padding-bottom: 30px;\n"])));

package/Layout/PageLayout.d.ts

@@ -1,6 +1,6 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
 interface PageLayoutProps {
-    sidebar?: ReactNode;
+    sidebar?: React.ReactNode;
 }
-export declare function PageLayout({ sidebar, children }: PropsWithChildren<PageLayoutProps>): JSX.Element;
+export declare function PageLayout({ sidebar, children, }: React.PropsWithChildren<PageLayoutProps>): JSX.Element;
 export {};

package/Layout/PageLayout.js

@@ -3,27 +3,18 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageLayout = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function PageLayout(_a) {
     var sidebar = _a.sidebar, children = _a.children;
-    return ((0, jsx_runtime_1.jsxs)(Container, __assign({ "data-component-name": "Layout/PageLayout" }, { children: [sidebar, (0, jsx_runtime_1.jsx)(ContentContainer, { children: children })] })));
+    return (react_1.default.createElement(Container, { "data-component-name": "Layout/PageLayout" },
+        sidebar,
+        react_1.default.createElement(ContentContainer, null, children)));
 }
 exports.PageLayout = PageLayout;
 var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100vh - var(--navbar-height));\n"], ["\n  display: flex;\n  flex-direction: row;\n  min-height: calc(100vh - var(--navbar-height));\n"])));

package/Layout/RootLayout.d.ts

@@ -1,7 +1,7 @@
-import type { PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
 interface LayoutConfig {
-    navbar: ReactNode;
-    footer: ReactNode;
+    navbar: React.ReactNode;
+    footer: React.ReactNode;
 }
-export declare function RootLayout({ navbar, footer, children, }: PropsWithChildren<LayoutConfig>): JSX.Element;
+export declare function RootLayout({ navbar, footer, children, }: React.PropsWithChildren<LayoutConfig>): JSX.Element;
 export {};

package/Layout/RootLayout.js

@@ -3,30 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RootLayout = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 function RootLayout(_a) {
     var navbar = _a.navbar, footer = _a.footer, children = _a.children;
     return (
     // TODO: rewrite it to avoid passing components as props
-    (0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Layout/RootLayout" }, { children: [navbar, children, footer] })));
+    react_1.default.createElement(Wrapper, { "data-component-name": "Layout/RootLayout" },
+        navbar,
+        children,
+        footer));
 }
 exports.RootLayout = RootLayout;
 var templateObject_1;

package/Markdown/Admonition.d.ts

@@ -1,9 +1,9 @@
-import type { PropsWithChildren } from 'react';
+import React from 'react';
 interface AdmonitionTypeProps {
     type: 'warning' | 'success' | 'danger' | 'attention' | 'info';
 }
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
     name?: string;
 }
-export declare function Admonition({ type, name, children, }: PropsWithChildren<AdmonitionProps>): JSX.Element;
+export declare function Admonition({ type, name, children, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
 export {};

package/Markdown/Admonition.js

@@ -3,28 +3,20 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
 function Admonition(_a) {
     var _b = _a.type, type = _b === void 0 ? 'info' : _b, name = _a.name, children = _a.children;
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ type: type, "data-component-name": "Markdown/Admonition" }, { children: [(0, jsx_runtime_1.jsx)(AlertIcon_1.AlertIcon, { type: type }), name ? (0, jsx_runtime_1.jsx)(Heading, __assign({ type: type }, { children: name })) : null, (0, jsx_runtime_1.jsx)(Content, { children: children })] })));
+    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition" },
+        react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
+        name ? react_1.default.createElement(Heading, { type: type }, name) : null,
+        react_1.default.createElement(Content, null, children)));
 }
 exports.Admonition = Admonition;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  align-items: center;\n  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);\n  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);\n  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));\n  border-radius: var(--admonition-border-radius);\n  font-size: var(--admonition-font-size);\n  font-weight: var(--admonition-font-weight);\n  line-height: var(--admonition-line-height);\n\n  ", "\n"], ["\n  position: relative;\n  align-items: center;\n  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);\n  padding: var(--admonition-padding-vertical) var(--admonition-padding-horizontal);\n  padding-left: calc(var(--admonition-padding-horizontal) * 2 + var(--admonition-icon-size));\n  border-radius: var(--admonition-border-radius);\n  font-size: var(--admonition-font-size);\n  font-weight: var(--admonition-font-weight);\n  line-height: var(--admonition-line-height);\n\n  ", "\n"])), function (_a) {

package/Markdown/CodeSample/CodeSample.d.ts

@@ -1,8 +1,15 @@
 /// <reference types="react" />
-declare type CodeSampleProps = {
+export interface MdCopyCodeProps {
+    enabled?: boolean;
+    buttonText?: string;
+    tooltipText?: string;
+    toasterText?: string;
+    toasterDuration?: number;
+}
+export declare type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;
+    copyCodeSnippet: MdCopyCodeProps;
 };
-export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
-export {};
+export declare function CodeSample({ rawContent, highlighted, language, copyCodeSnippet, }: CodeSampleProps): JSX.Element;

package/Markdown/CodeSample/CodeSample.js

@@ -55,20 +55,32 @@ var __read = (this && this.__read) || function (o, n) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeSample = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var ClipboardService_1 = require("../../utils/ClipboardService");
+var defaultCopyCodeSnippet = {
+    enabled: true,
+    buttonText: 'Copy',
+    tooltipText: 'Copy the code snippet',
+    toasterText: 'Copied',
+    toasterDuration: 1500,
+};
 function CodeSample(_a) {
-    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
+    var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language, copyCodeSnippet = _a.copyCodeSnippet;
     var langClassName = language ? "language-".concat(language) : '';
+    var copyCodeProps = __assign(__assign({}, defaultCopyCodeSnippet), copyCodeSnippet);
     var _b = __read((0, react_1.useState)(false), 2), isCopied = _b[0], setIsCopied = _b[1];
     var copyCode = function (code) {
         ClipboardService_1.ClipboardService.copyCustom(code);
         setIsCopied(true);
-        setTimeout(function () { return setIsCopied(false); }, 1500);
+        setTimeout(function () { return setIsCopied(false); }, copyCodeProps.toasterDuration);
     };
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" }, { children: [(0, jsx_runtime_1.jsxs)(CodeSampleButtonContainer, __assign({ onClick: function () { return copyCode(rawContent); } }, { children: [!isCopied && (0, jsx_runtime_1.jsx)(CopyCodeButton, __assign({ title: "Copy the code snippet" }, { children: "Copy" })), isCopied && (0, jsx_runtime_1.jsx)(DoneIndicator, { children: "Copied" })] })), (0, jsx_runtime_1.jsx)("pre", __assign({ className: langClassName }, { children: (0, jsx_runtime_1.jsx)("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }) }))] })));
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+        copyCodeProps.enabled && (react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
+            !isCopied && (react_1.default.createElement(CopyCodeButton, { title: copyCodeProps.tooltipText }, copyCodeProps.buttonText)),
+            isCopied && react_1.default.createElement(DoneIndicator, null, copyCodeProps.toasterText))),
+        react_1.default.createElement("pre", { className: langClassName },
+            react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }
 exports.CodeSample = CodeSample;
 var CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));

package/Markdown/Details.d.ts

@@ -1,6 +1,6 @@
-import type { PropsWithChildren } from 'react';
+import React from 'react';
 declare type DetailsProps = {
     summary: string;
 };
-export declare function Details({ summary, children }: PropsWithChildren<DetailsProps>): JSX.Element;
+export declare function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element;
 export {};

package/Markdown/Details.js

@@ -8,11 +8,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Details = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Details(_a) {
     var summary = _a.summary, children = _a.children;
-    return ((0, jsx_runtime_1.jsxs)(StyledDetails, { children: [(0, jsx_runtime_1.jsx)("summary", { children: summary }), (0, jsx_runtime_1.jsx)(StyledDetailsContent, { children: children })] }));
+    return (react_1.default.createElement(StyledDetails, null,
+        react_1.default.createElement("summary", null, summary),
+        react_1.default.createElement(StyledDetailsContent, null, children)));
 }
 exports.Details = Details;
 var StyledDetails = styled_components_1.default.details(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));

package/Markdown/Heading.js

@@ -1,32 +1,46 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var utils_1 = require("../utils");
 /**
  * Class name for all MD tags
  */
 var mdClassName = 'md';
-var SvgIcon = ((0, jsx_runtime_1.jsx)("svg", __assign({ "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" }, { children: (0, jsx_runtime_1.jsx)("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" }) })));
+var SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
+    react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
 function Heading(_a) {
     var level = _a.level, id = _a.id, children = _a.children;
-    var linkEl = ((0, jsx_runtime_1.jsx)("a", __assign({ href: "#".concat(id), className: (0, utils_1.concatClassNames)('anchor', 'before') }, { children: SvgIcon })));
+    var linkEl = (react_1.default.createElement("a", { href: "#".concat(id), className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
     return (0, react_1.createElement)("h".concat(level), {
         id: id,
         className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
         'data-component-name': 'Markdown/Heading',
-    }, (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [linkEl, children] }));
+    }, react_1.default.createElement(react_1.default.Fragment, null,
+        linkEl,
+        children));
 }
 exports.Heading = Heading;

package/Markdown/MarkdownLayout.d.ts

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
+import React from 'react';
 declare type MarkdownLayoutProps = {
-    tableOfContent: ReactNode;
-    markdownWrapper: ReactNode;
+    tableOfContent: React.ReactNode;
+    markdownWrapper: React.ReactNode;
     showPrevButton?: boolean;
     showNextButton?: boolean;
     editPage?: {

package/Markdown/MarkdownLayout.js

@@ -3,23 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownLayout = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var PageWrapper_1 = require("../Markdown/PageWrapper");
 var ContainerWrapper_1 = require("../Markdown/ContainerWrapper");
@@ -28,7 +17,14 @@ var EditPageButton_1 = require("../EditPageButton");
 var LastUpdated_1 = require("../LastUpdated/LastUpdated");
 function MarkdownLayout(_a) {
     var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper, showPrevButton = _a.showPrevButton, showNextButton = _a.showNextButton, editPage = _a.editPage, lastModified = _a.lastModified;
-    return ((0, jsx_runtime_1.jsxs)(PageWrapper_1.PageWrapper, __assign({ "data-component-name": "Markdown/MarkdownLayout" }, { children: [(0, jsx_runtime_1.jsxs)(ContainerWrapper_1.ContainerWrapper, __assign({ withToc: true }, { children: [(0, jsx_runtime_1.jsxs)(LayoutTop, { children: [lastModified && (0, jsx_runtime_1.jsx)(LastUpdated_1.LastUpdated, { lastModified: lastModified }), editPage && ((0, jsx_runtime_1.jsx)(EditPageButton_1.EditPageButton, { text: editPage.text, to: editPage.to, icon: editPage.icon }))] }), markdownWrapper, (0, jsx_runtime_1.jsx)(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })] })), tableOfContent] })));
+    return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
+        react_1.default.createElement(ContainerWrapper_1.ContainerWrapper, { withToc: true },
+            react_1.default.createElement(LayoutTop, null,
+                lastModified && react_1.default.createElement(LastUpdated_1.LastUpdated, { lastModified: lastModified }),
+                editPage && (react_1.default.createElement(EditPageButton_1.EditPageButton, { text: editPage.text, to: editPage.to, icon: editPage.icon }))),
+            markdownWrapper,
+            react_1.default.createElement(PageNavigation_1.PageNavigation, { showPrevButton: showPrevButton, showNextButton: showNextButton })),
+        tableOfContent));
 }
 exports.MarkdownLayout = MarkdownLayout;
 var LayoutTop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  flex-flow: row nowrap;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  flex-flow: row nowrap;\n"])));

package/Markdown/Mermaid.js

@@ -8,11 +8,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Mermaid(_a) {
     var diagramHtml = _a.diagramHtml;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid" }));
+    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid" }));
 }
 exports.Mermaid = Mermaid;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .mermaid > svg {\n    font-size: 14px !important;\n    max-width: 100%;\n  }\n"], ["\n  .mermaid > svg {\n    font-size: 14px !important;\n    max-width: 100%;\n  }\n"])));

package/Markdown/Sup.js

@@ -3,27 +3,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Sup = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Sup(_a) {
     var children = _a.children;
-    return (0, jsx_runtime_1.jsx)(Wrapper, __assign({ "data-component-name": "Markdown/Sup" }, { children: children }));
+    return react_1.default.createElement(Wrapper, { "data-component-name": "Markdown/Sup" }, children);
 }
 exports.Sup = Sup;
 var Wrapper = styled_components_1.default.sup(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));

package/Markdown/Tabs/Tab.js

@@ -3,28 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Tab(_a) {
     var activeTab = _a.activeTab, label = _a.label, onClick = _a.onClick;
     var isActive = activeTab === label;
-    return ((0, jsx_runtime_1.jsx)(TabItem, __assign({ active: isActive, onClick: function () { return onClick(label); }, "data-component-name": "Markdown/Tabs/Tab" }, { children: label })));
+    return (react_1.default.createElement(TabItem, { active: isActive, onClick: function () { return onClick(label); }, "data-component-name": "Markdown/Tabs/Tab" }, label));
 }
 exports.Tab = Tab;
 var TabItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  list-style: none;\n  margin-bottom: -1px;\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n\n  ", "\n"], ["\n  display: inline-block;\n  list-style: none;\n  margin-bottom: -1px;\n  padding: 0.75rem 1rem;\n  cursor: pointer;\n\n  ", "\n"])), function (_a) {

package/Markdown/Tabs/Tabs.js

@@ -3,16 +3,28 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __read = (this && this.__read) || function (o, n) {
     var m = typeof Symbol === "function" && o[Symbol.iterator];
@@ -35,25 +47,26 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Tab_1 = require("../../Markdown/Tabs/Tab");
 function Tabs(_a) {
     var children = _a.children;
     var _b = __read((0, react_1.useState)(children[0].props.label), 2), activeTab = _b[0], setActiveTab = _b[1];
     var onTabSelect = function (label) { return setActiveTab(label); };
-    return ((0, jsx_runtime_1.jsxs)(TabsContainer, __assign({ "data-component-name": "Markdown/Tabs/Tabs" }, { children: [(0, jsx_runtime_1.jsx)(TabList, { children: children.map(function (child) {
-                    var label = child.props.label;
-                    return (0, jsx_runtime_1.jsx)(Tab_1.Tab, { activeTab: activeTab, label: label, onClick: onTabSelect }, label);
-                }) }), (0, jsx_runtime_1.jsx)(TabContent, { children: children.map(function (child) {
-                    if (child.props.label !== activeTab)
-                        return undefined;
-                    return child.props.children;
-                }) })] })));
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
+        react_1.default.createElement(TabList, null, children.map(function (child) {
+            var label = child.props.label;
+            return react_1.default.createElement(Tab_1.Tab, { activeTab: activeTab, key: label, label: label, onClick: onTabSelect });
+        })),
+        react_1.default.createElement(TabContent, null, children.map(function (child) {
+            if (child.props.label !== activeTab)
+                return undefined;
+            return child.props.children;
+        }))));
 }
 exports.Tabs = Tabs;
 var TabsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 10px 0;\n"], ["\n  margin: 10px 0;\n"])));
 var TabList = styled_components_1.default.ol(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border-bottom: 1px solid #ccc;\n  padding: 0;\n  margin-block-end: 0;\n"], ["\n  border-bottom: 1px solid #ccc;\n  padding: 0;\n  margin-block-end: 0;\n"])));
-var TabContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  border: 1px solid #ccc;\n  border-top: none;\n  padding: 1rem;\n"], ["\n  border: 1px solid #ccc;\n  border-top: none;\n  padding: 1rem;\n"])));
+var TabContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 10px 5px;\n  border: 1px solid #ccc;\n  border-top: none;\n  padding: 1rem;\n"], ["\n  padding: 10px 5px;\n  border: 1px solid #ccc;\n  border-top: none;\n  padding: 1rem;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/MobileNavbarDropdown.js

@@ -3,28 +3,18 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileDropdownWrapper = exports.MobileNavbarDropdown = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../mocks/Link");
 function MobileNavbarDropdown(_a) {
     var items = _a.items;
-    return ((0, jsx_runtime_1.jsx)(exports.MobileDropdownWrapper, __assign({ "data-component-name": "Navbar/MobileNavbarDropdown" }, { children: items.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ to: item.link }, { children: item.label })) }, "".concat(item.label, "_").concat(index))); }) })));
+    return (react_1.default.createElement(exports.MobileDropdownWrapper, { "data-component-name": "Navbar/MobileNavbarDropdown" }, items.map(function (item, index) { return (react_1.default.createElement("div", { key: "".concat(item.label, "_").concat(index) },
+        react_1.default.createElement(Link_1.Link, { to: item.link }, item.label))); })));
 }
 exports.MobileNavbarDropdown = MobileNavbarDropdown;
 exports.MobileDropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0 15px;\n  width: max-content;\n  transition: all 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    padding: 10px 0;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n  }\n"], ["\n  padding: 0 15px;\n  width: max-content;\n  transition: all 0.2s ease-in-out;\n  overflow: hidden;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    padding: 10px 0;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n  }\n"])));