@redocly/theme 0.1.7 → 0.1.10

package/Markdown/CodeSample/styled.js

@@ -0,0 +1,109 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.Wrapper = exports.DoneIndicator = exports.CopyCodeButton = exports.CodeSampleButtonContainer = exports.CodeButton = void 0;
+var polished_1 = require("polished");
+var styled_components_1 = __importStar(require("styled-components"));
+var Typography_1 = require("../../ui/Typography");
+function genTokens(tokens) {
+    var _a;
+    if (!tokens) {
+        return '';
+    }
+    var res = '';
+    for (var _i = 0, _b = Object.keys(tokens); _i < _b.length; _i++) {
+        var token = _b[_i];
+        if (token !== 'default') {
+            res += ".token.".concat(token, " { color: ").concat((_a = tokens[token]) === null || _a === void 0 ? void 0 : _a.color, "; }\n");
+        }
+    }
+    if (tokens.default) {
+        return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      pre& {\n        ", "\n      }\n      ", "\n    "], ["\n      pre& {\n        ", "\n      }\n      ", "\n    "])), (0, Typography_1.typography)(tokens.default), res);
+    }
+    return res;
+}
+var getCodeBlockBackgroundColor = function (theme) {
+    return Array.isArray(theme.codeBlock.backgroundColor)
+        ? theme.codeBlock.backgroundColor[0]
+        : theme.codeBlock.backgroundColor;
+};
+exports.CodeButton = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n"])));
+exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
+exports.CopyCodeButton = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", "\n  display: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  ", "\n  display: none;\n\n  &:hover {\n    cursor: pointer;\n  }\n"])), exports.CodeButton);
+exports.DoneIndicator = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  cursor: default;\n"], ["\n  ", "\n  cursor: default;\n"])), exports.CodeButton);
+var lightStyleCodeButton = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: ", ";\n    outline: 1px solid ", ";\n  }\n"], ["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: ", ";\n    outline: 1px solid ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.copyButton.visibleText;
+}, exports.CopyCodeButton, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.copyButton.visibleText;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.copyButton.visibleText;
+});
+var darkStyleCodeButton = (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: white;\n    color: ", ";\n    background-color: ", ";\n  }\n"], ["\n  ", ",\n  ", " {\n    color: ", ";\n  }\n\n  ", ":hover {\n    color: white;\n    color: ", ";\n    background-color: ", ";\n  }\n"])), exports.CopyCodeButton, exports.DoneIndicator, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.copyButton.visibleText;
+}, exports.CopyCodeButton, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.copyButton.contrastText;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.copyButton.background;
+});
+var lightStyleTokens = (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n\n  .token.namespace {\n    opacity: 0.7;\n  }\n\n  .token.string,\n  .token.attr-value {\n    color: #e3116c;\n  }\n  .token.punctuation,\n  .token.operator {\n    color: #393a34; /* no highlight */\n  }\n\n  .token.entity,\n  .token.url,\n  .token.symbol,\n  .token.number,\n  .token.boolean,\n  .token.variable,\n  .token.constant,\n  .token.property,\n  .token.regex,\n  .token.inserted {\n    color: #36acaa;\n  }\n\n  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\n  }\n\n  .token.tag,\n  .token.selector,\n  .language-autohotkey .token.keyword {\n    color: #00009f;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n\n  .token.namespace {\n    opacity: 0.7;\n  }\n\n  .token.string,\n  .token.attr-value {\n    color: #e3116c;\n  }\n  .token.punctuation,\n  .token.operator {\n    color: #393a34; /* no highlight */\n  }\n\n  .token.entity,\n  .token.url,\n  .token.symbol,\n  .token.number,\n  .token.boolean,\n  .token.variable,\n  .token.constant,\n  .token.property,\n  .token.regex,\n  .token.inserted {\n    color: #36acaa;\n  }\n\n  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\n  }\n\n  .token.tag,\n  .token.selector,\n  .language-autohotkey .token.keyword {\n    color: #00009f;\n  }\n"])));
+var darkStyleTokens = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"], ["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\n  }\n\n  .token.property,\n  .token.tag,\n  .token.number,\n  .token.constant,\n  .token.symbol {\n    color: #62bff9;\n  }\n  .token.boolean {\n    color: firebrick;\n  }\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    color: #a0fbaa;\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n  .token.operator,\n  .token.entity,\n  .token.url,\n  .token.variable {\n    color: hsl(40, 90%, 60%);\n  }\n  .token.atrule,\n  .token.attr-value,\n  .token.keyword {\n    color: hsl(350, 40%, 70%);\n  }\n  .token.regex,\n  .token.important {\n    color: #e90;\n  }\n\n  .token.deleted {\n    color: red;\n  }\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", "\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n\n  pre {\n    white-space: ", ";\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n\n    font-family: ", ";\n    background-color: ", ";\n\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n\n      color: ", ";\n\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: ", ";\n  }\n\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", "\n    ", "\n  }\n"], ["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", "\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n\n  pre {\n    white-space: ", ";\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n\n    font-family: ", ";\n    background-color: ", ";\n\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n\n      color: ", ";\n\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: ", ";\n  }\n\n  code[class='language-text'] {\n    line-height: 1.2em;\n    display: inline-flex;\n    white-space: pre-wrap;\n    overflow-wrap: anywhere;\n  }\n\n  code[class*='language-'],\n  pre[class*='language-'] {\n    text-align: left;\n    white-space: pre;\n    word-spacing: normal;\n    word-break: normal;\n    word-wrap: normal;\n    line-height: 1.5;\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n\n    .token.important,\n    .token.bold {\n      font-weight: bold;\n    }\n    .token.italic {\n      font-style: italic;\n    }\n    .token.entity {\n      cursor: help;\n    }\n    .token.punctuation {\n      opacity: 0.7;\n    }\n    .namespace {\n      opacity: 0.7;\n    }\n\n    ", "\n    ", "\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.25
+        ? darkStyleCodeButton
+        : lightStyleCodeButton;
+}, exports.CodeSampleButtonContainer, exports.CopyCodeButton, function (_a) {
+    var theme = _a.theme;
+    return (theme.typography.code.wrap ? 'pre-wrap' : 'pre');
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.typography.code.fontFamily;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.codeBlock.backgroundColor;
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, polished_1.getLuminance)(theme.codeBlock.backgroundColor) < 0.5 ? 'white' : '#393A34';
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.shape.borderRadius;
+}, function (_a) {
+    var theme = _a.theme;
+    return (0, polished_1.getLuminance)(getCodeBlockBackgroundColor(theme)) < 0.5 ? darkStyleTokens : lightStyleTokens;
+}, function (_a) {
+    var theme = _a.theme;
+    return genTokens(theme.codeBlock.tokens);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/Markdown/CodeSample/types.d.ts

@@ -0,0 +1,9 @@
+import { ITypography } from '../../ui/Typography';
+export declare type Token = 'comment' | 'prolog' | 'doctype' | 'cdata' | 'punctuation' | 'property' | 'tag' | 'number' | 'constant' | 'symbol' | 'boolean' | 'selector' | 'string' | 'char' | 'builtin' | 'inserted' | 'operator' | 'entity' | 'url' | 'variable' | 'atrule' | 'keyword' | 'regex' | 'important' | 'important' | 'bold' | 'italic' | 'entity' | 'deleted';
+export declare type Tokens = {
+    [P in Token]?: {
+        color: string;
+    };
+} & {
+    default?: ITypography;
+};

package/Markdown/CodeSample/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/Markdown/ContentWrapper.d.ts

@@ -0,0 +1,5 @@
+export declare const ContentWrapper: import("styled-components").StyledComponent<"section", any, {
+    'data-component-name': string;
+} & {
+    withToc: boolean;
+}, "data-component-name">;

package/Markdown/ContentWrapper.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.ContentWrapper = styled_components_1.default.section.attrs(function () { return ({
+    'data-component-name': 'Markdown/ContentWrapper',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--content-wrapper-max-width);\n  width: 90%;\n  margin: 0 auto;\n\n  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);\n\n  & > article:first-child > h1:first-child {\n    // disable margin top for h1 on the title heading if there is no \"Last updated at\" block\n    /* margin-top: 0; */\n  }\n\n  ", " {\n    width: ", ";\n  }\n"], ["\n  max-width: var(--content-wrapper-max-width);\n  width: 90%;\n  margin: 0 auto;\n\n  padding: var(--content-wrapper-padding-vertical) var(--content-wrapper-padding-horizontal);\n\n  & > article:first-child > h1:first-child {\n    // disable margin top for h1 on the title heading if there is no \"Last updated at\" block\n    /* margin-top: 0; */\n  }\n\n  ", " {\n    width: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+}, function (_a) {
+    var withToc = _a.withToc;
+    return (withToc ? "calc(90% - var(--toc-width))" : '90%');
+});
+var templateObject_1;

package/Markdown/Heading.d.ts

@@ -0,0 +1,5 @@
+import { PropsWithChildren } from 'react';
+export declare function Heading({ level, id, children, }: PropsWithChildren<{
+    level: number;
+    id: string;
+}>): JSX.Element;

package/Markdown/Heading.js

@@ -0,0 +1,23 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+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" }) })));
+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: "anchor before" }, { children: SvgIcon })));
+    return (0, react_1.createElement)("h".concat(level), { id: id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' }, (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [linkEl, children] }));
+}
+exports.Heading = Heading;

package/Markdown/MarkdownLayout.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type MarkdownLayoutProps = {
+    tableOfContent: React.ReactNode;
+    markdownWrapper: React.ReactNode;
+};
+export declare function MarkdownLayout({ tableOfContent, markdownWrapper, }: MarkdownLayoutProps): JSX.Element;
+export {};

package/Markdown/MarkdownLayout.js

@@ -0,0 +1,23 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MarkdownLayout = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var PageWrapper_1 = require("../Markdown/PageWrapper");
+var ContentWrapper_1 = require("../Markdown/ContentWrapper");
+var PageNavigation_1 = require("../PageNavigation/PageNavigation");
+function MarkdownLayout(_a) {
+    var tableOfContent = _a.tableOfContent, markdownWrapper = _a.markdownWrapper;
+    return ((0, jsx_runtime_1.jsxs)(PageWrapper_1.PageWrapper, __assign({ "data-component-name": "Markdown/MarkdownLayout" }, { children: [(0, jsx_runtime_1.jsxs)(ContentWrapper_1.ContentWrapper, __assign({ withToc: true }, { children: [markdownWrapper, (0, jsx_runtime_1.jsx)(PageNavigation_1.PageNavigation, {})] })), tableOfContent] })));
+}
+exports.MarkdownLayout = MarkdownLayout;

package/Markdown/Mermaid.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type MermaidProps = {
+    diagramHtml: string;
+};
+export declare function Mermaid({ diagramHtml }: MermaidProps): JSX.Element;
+export {};

package/Markdown/Mermaid.js

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mermaid = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+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/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"])));
+var templateObject_1;

package/Markdown/PageWrapper.d.ts

@@ -0,0 +1,3 @@
+export declare const PageWrapper: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Markdown/PageWrapper.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageWrapper = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.PageWrapper = styled_components_1.default.div.attrs(function () { return ({
+    'data-component-name': 'Markdown/PageWrapper',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  width: 100%;\n"], ["\n  display: flex;\n  flex: 1;\n  width: 100%;\n"])));
+var templateObject_1;

package/Markdown/StyledMarkdown.d.ts

@@ -0,0 +1,8 @@
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { ITypography } from '../ui/Typography';
+export declare const baseTable: FlattenSimpleInterpolation;
+export declare function margins(theme: ITypography): FlattenSimpleInterpolation | string;
+export declare function headingAnchor(className?: string): FlattenSimpleInterpolation;
+export declare const StyledMarkdown: import("styled-components").StyledComponent<"main", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Markdown/StyledMarkdown.js

@@ -0,0 +1,54 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.StyledMarkdown = exports.headingAnchor = exports.margins = exports.baseTable = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+var Typography_1 = require("../ui/Typography");
+exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  table th,\n  table td {\n    padding: 12px;\n    border-bottom: 1px solid var(--global-border-color);\n  }\n\n  table th {\n    text-align: left;\n    font-weight: bold;\n    background-color: var(--color-secondary-300);\n  }\n\n  table tr th:first-child,\n  table tr td:first-child {\n    border-left: 1px solid var(--global-border-color);\n  }\n\n  table tr td:last-child,\n  table tr th:last-child {\n    border-right: 1px solid var(--global-border-color);\n  }\n\n  table thead td,\n  table thead th {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* top-left border */\n\n  table thead tr:first-child th:first-child {\n    border-top-left-radius: var(--panels-border-radius);\n  }\n\n  /* top-right border */\n\n  table thead tr:first-child th:last-child {\n    border-top-right-radius: var(--panels-border-radius);\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* bottom-left border */\n\n  table tbody tr:last-child td:first-child {\n    border-bottom-left-radius: var(--panels-border-radius);\n  }\n\n  /* bottom-right border */\n\n  table tbody tr:last-child td:last-child {\n    border-bottom-right-radius: var(--panels-border-radius);\n  }\n"], ["\n  table {\n    display: block;\n    width: 100%;\n    overflow: auto;\n    word-break: keep-all;\n    border-collapse: separate;\n    border-spacing: 0;\n    margin-top: 20px;\n    margin-bottom: 20px;\n    font-size: 14px;\n  }\n\n  table th,\n  table td {\n    padding: 12px;\n    border-bottom: 1px solid var(--global-border-color);\n  }\n\n  table th {\n    text-align: left;\n    font-weight: bold;\n    background-color: var(--color-secondary-300);\n  }\n\n  table tr th:first-child,\n  table tr td:first-child {\n    border-left: 1px solid var(--global-border-color);\n  }\n\n  table tr td:last-child,\n  table tr th:last-child {\n    border-right: 1px solid var(--global-border-color);\n  }\n\n  table thead td,\n  table thead th {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* top-left border */\n\n  table thead tr:first-child th:first-child {\n    border-top-left-radius: var(--panels-border-radius);\n  }\n\n  /* top-right border */\n\n  table thead tr:first-child th:last-child {\n    border-top-right-radius: var(--panels-border-radius);\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  /* bottom-left border */\n\n  table tbody tr:last-child td:first-child {\n    border-bottom-left-radius: var(--panels-border-radius);\n  }\n\n  /* bottom-right border */\n\n  table tbody tr:last-child td:last-child {\n    border-bottom-right-radius: var(--panels-border-radius);\n  }\n"])));
+function margins(theme) {
+    if (!theme)
+        return '';
+    return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    ", "\n  "], ["\n    ", "\n  "])), {
+        marginTop: theme.marginTop || theme.marginVertical || '',
+        marginBottom: theme.marginBottom || theme.marginVertical || '',
+        marginLeft: theme.marginLeft || theme.marginHorizontal || '',
+        marginRight: theme.marginRight || theme.marginHorizontal || '',
+    });
+}
+exports.margins = margins;
+// TODO: Can users specify another className or we should hardcode it?
+function headingAnchor(className) {
+    if (className === void 0) { className = 'anchor'; }
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: 4px;\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "], ["\n    .", ".before {\n      position: absolute;\n      left: 0;\n      transform: translateX(-100%);\n      padding-right: 4px;\n    }\n\n    .", ".after {\n      display: inline-block;\n      padding-left: 4px;\n    }\n\n    svg,\n    .", " svg {\n      visibility: hidden;\n    }\n\n    :hover .", " svg,\n    .", ":focus svg {\n      visibility: visible;\n    }\n  "])), className, className, className, className, className);
+}
+exports.headingAnchor = headingAnchor;
+exports.StyledMarkdown = styled_components_1.default.main.attrs(function () { return ({
+    'data-component-name': 'Markdown/StyledMarkdown',
+}); })(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    ", ";\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n\n    ", ";\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"], ["\n  font-weight: var(--font-weight-regular);\n  padding: 0;\n\n  color: var(--color-content);\n  font-size: var(--font-size-base);\n  font-family: var(--font-family-base);\n  line-height: var(--line-height-base);\n\n  a:not([role='button']) {\n    text-decoration: var(--link-decoration);\n    color: var(--link-color);\n\n    &:visited {\n      color: var(--link-color);\n    }\n\n    &:hover {\n      color: var(--link-color-hover);\n    }\n  }\n\n  img {\n    max-width: 100%;\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    font-weight: var(--h-font-weight);\n    font-family: var(--h-font-family);\n    position: relative;\n\n    scroll-margin-top: 60px;\n  }\n\n  strong {\n    font-weight: var(--font-weight-bold);\n  }\n\n  hr {\n    border-top: 1px solid var(--global-border-color);\n  }\n\n  details {\n    margin: 1.125em 0;\n\n    summary {\n      color: var(--color-content);\n      font-weight: var(--font-weight-regular);\n      outline: 0;\n      padding: 0;\n      cursor: pointer;\n    }\n\n    > :not(summary):first-of-type {\n      margin-top: 1.25em;\n    }\n\n    > *:last-child {\n      margin-bottom: 1.25em;\n    }\n  }\n\n  ", ";\n\n  .code-snippets-tabs {\n    .snippets-tabs-headers {\n      font-size: 0.9em;\n\n      font-family: var(--h-font-family);\n\n      .tab-header {\n        text-align: center;\n        padding: 0.2em 0.5em;\n        display: inline-block;\n        cursor: pointer;\n        color: var(--color-content-secondary);\n\n        &.active {\n          color: var(--h-color);\n          font-weight: var(--font-weight-bold);\n        }\n      }\n    }\n\n    .tab-content {\n      margin-top: 4px;\n      display: none;\n\n      pre {\n        margin-top: 0;\n      }\n\n      &.active {\n        display: block;\n      }\n    }\n  }\n\n  p {\n    &:last-child {\n      margin-bottom: 0;\n    }\n  }\n\n  h1 {\n    ", ";\n    ", ";\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    ", ";\n    ", ";\n  }\n\n  code {\n    color: var(--inline-code-color);\n    background-color: var(--inline-code-background-color);\n\n    border-radius: 2px;\n    border: 1px solid var(--global-border-color);\n    padding: 0.1em 0.25em 0.2em;\n    font-weight: var(--code-font-weight);\n    word-break: break-word;\n    font-size: var(--code-font-size);\n    font-family: var(--code-font-family);\n  }\n\n  blockquote {\n    margin: var(--bloquote-margin-vertical) var(--bloquote-margin-horizontal);\n    padding: var(--bloquote-padding-vertical) var(--bloquote-padding-horizontal);\n    border-left: 4px solid var(--global-border-color);\n    background-color: var(--bloquote-background-color);\n\n    ", ";\n\n    & > p:first-child {\n      margin-top: 0;\n    }\n  }\n\n  img {\n    max-width: 100%;\n    box-sizing: content-box;\n    margin: 0 auto;\n\n    &:only-child {\n      display: block;\n    }\n  }\n\n  > ul,\n  > p ul {\n    > ol,\n    > p ol {\n      padding-left: 2em;\n      margin: 0 0 1em;\n\n      ul,\n      ol {\n        margin-bottom: 0;\n        margin-top: 0;\n      }\n    }\n  }\n"])), exports.baseTable, (0, Typography_1.typography)(Typography_1.typographyTokens.heading1), margins(Typography_1.typographyTokens.heading1), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading2), margins(Typography_1.typographyTokens.heading2), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading3), margins(Typography_1.typographyTokens.heading3), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading4), margins(Typography_1.typographyTokens.heading4), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading5), margins(Typography_1.typographyTokens.heading5), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.heading6), margins(Typography_1.typographyTokens.heading6), headingAnchor(), (0, Typography_1.typography)(Typography_1.typographyTokens.blockquote));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Markdown/Tabs/Tab.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type TabProps = {
+    activeTab: string;
+    label: string;
+    onClick: (e: string) => void;
+};
+export declare function Tab({ activeTab, label, onClick }: TabProps): JSX.Element;
+export {};

package/Markdown/Tabs/Tab.js

@@ -0,0 +1,35 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    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 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 })));
+}
+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) {
+    var active = _a.active;
+    return active &&
+        "\n    background-color: white;\n    border: solid #ccc;\n    border-width: 1px 1px 0 1px;\n  ";
+});
+var templateObject_1;

package/Markdown/Tabs/Tabs.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+declare type TabsProps = PropsWithChildren<{
+    children: {
+        props: {
+            label: string;
+        } & TabsProps;
+    }[];
+}>;
+export declare function Tabs({ children }: TabsProps): JSX.Element;
+export {};

package/Markdown/Tabs/Tabs.js

@@ -0,0 +1,43 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    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.Tabs = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = 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 = (0, react_1.useState)(children[0].props.label), 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;
+                }) })] })));
+}
+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  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/Markdown/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../Markdown/Tabs/Tab';
+export * from '../../Markdown/Tabs/Tabs';

package/Markdown/Tabs/index.js

@@ -0,0 +1,18 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../../Markdown/Tabs/Tab"), exports);
+__exportStar(require("../../Markdown/Tabs/Tabs"), exports);

package/Markdown/index.d.ts

@@ -0,0 +1,9 @@
+export * from '../Markdown/CodeSample';
+export * from '../Markdown/Tabs';
+export * from '../Markdown/Admonition';
+export * from '../Markdown/ContentWrapper';
+export * from '../Markdown/Heading';
+export * from '../Markdown/MarkdownLayout';
+export * from '../Markdown/Mermaid';
+export * from '../Markdown/PageWrapper';
+export * from '../Markdown/StyledMarkdown';

package/Markdown/index.js

@@ -0,0 +1,25 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("../Markdown/CodeSample"), exports);
+__exportStar(require("../Markdown/Tabs"), exports);
+__exportStar(require("../Markdown/Admonition"), exports);
+__exportStar(require("../Markdown/ContentWrapper"), exports);
+__exportStar(require("../Markdown/Heading"), exports);
+__exportStar(require("../Markdown/MarkdownLayout"), exports);
+__exportStar(require("../Markdown/Mermaid"), exports);
+__exportStar(require("../Markdown/PageWrapper"), exports);
+__exportStar(require("../Markdown/StyledMarkdown"), exports);

package/Navbar/Navbar.d.ts

@@ -4,6 +4,6 @@ interface NavbarProps {
     logo: React.ReactNode;
     search: React.ReactNode;
 }
-export default function Navbar({ menu, logo, search }: NavbarProps): JSX.Element;
+export declare function Navbar({ menu, logo, search }: NavbarProps): JSX.Element;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export {};

package/Navbar/Navbar.js

@@ -18,13 +18,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarContainer = void 0;
+exports.NavbarContainer = exports.Navbar = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search;
     return ((0, jsx_runtime_1.jsxs)(exports.NavbarContainer, __assign({ "data-component-name": "Navbar/Navbar" }, { children: [logo, menu, search] })));
 }
-exports.default = Navbar;
-exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-color-text);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 1.25rem;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-color-background);\n  font-family: var(--font-family-h);\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-color-text);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 1.25rem;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-color-background);\n  font-family: var(--font-family-h);\n"])));
+exports.Navbar = Navbar;
+exports.NavbarContainer = styled_components_1.default.nav(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"], ["\n  height: var(--navbar-height);\n  box-sizing: border-box;\n  display: flex;\n  color: var(--navbar-text-color);\n  align-items: center;\n  justify-content: space-between;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: 10px var(--sidebar-margin-left);\n  background: var(--navbar-background-color);\n  font-family: var(--h-font-family);\n\n  ", " {\n    padding: 10px var(--sidebar-margin-left);\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.print;
+});
 var templateObject_1;

package/Navbar/NavbarItem.d.ts

@@ -36,5 +36,5 @@ export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem
 interface NavbarItemProps {
     navItem: ResolvedNavLinkItem;
 }
-export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
+export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
 export {};

package/Navbar/NavbarItem.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuStyle = void 0;
+exports.NavbarItem = exports.MenuStyle = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var react_router_dom_1 = require("react-router-dom");
@@ -34,14 +34,14 @@ function NavbarItem(_a) {
     var isActive = pathname === (0, utils_1.withPathPrefix)(navItem.link);
     return ((0, jsx_runtime_1.jsx)(NavMenuItem, __assign({ active: isActive, "data-component-name": "Navbar/NavbarItem" }, { children: (0, jsx_runtime_1.jsx)(NavLink, __assign({ to: navItem.link, active: isActive }, { children: (0, jsx_runtime_1.jsx)(NavLabel, { children: navItem.label }) })) })));
 }
-exports.default = NavbarItem;
-var NavMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-padding-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
+exports.NavbarItem = NavbarItem;
+var NavMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
     var active = _a.active;
     return (active ? 'var(--navbar-item-active-background-color)' : 'none');
 });
 var NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
     var active = _a.active;
-    return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)';
+    return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-text-color)';
 }, function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-decoration)' : 'none';

package/Navbar/NavbarMenu.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export default function NavbarMenu({ menuItems }: {
+export declare function NavbarMenu({ menuItems }: {
     menuItems: any[];
 }): JSX.Element | null;