@redocly/theme 0.1.26 → 0.1.29

package/Button/Button.js

@@ -50,7 +50,7 @@ var getSize = function (size) {
     if (size === void 0) { size = 'medium'; }
     return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"], ["\n  font-size: var(--button-", "-font-size);\n  padding: var(--button-", "-padding);\n  min-width: var(--button-", "-min-width);\n"])), size, size, size);
 };
-exports.baseButtonStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"], ["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"])));
+exports.baseButtonStyles = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  margin: var(--button-margin);\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"], ["\n  outline: none;\n  border: none;\n  border-radius: var(--button-border-radius);\n  font-weight: var(--button-font-weight);\n  font-size: 14px;\n  padding: 2px 20px;\n  margin: var(--button-margin);\n  cursor: pointer;\n  transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;\n  line-height: 1;\n\n  font-family: var(--button-font-family);\n  box-shadow: var(--button-box-shadow);\n\n  &:hover {\n    box-shadow: var(--button-active-box-shadow);\n  }\n\n  &:active {\n    box-shadow: var(--button-active-box-shadow);\n  }\n"])));
 var StyledButton = styled_components_1.default.button.attrs(function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'default' : _b, extraClass = _a.extraClass;
     return ({
@@ -63,7 +63,7 @@ var StyledButton = styled_components_1.default.button.attrs(function (_a) {
 }, exports.baseButtonStyles, function (_a) {
     var variant = _a.variant;
     return variant === 'outlined'
-        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "], ["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--button-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            background-color: var(--button-active-background-color);\n          }\n        "], ["\n          color: var(--button-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            background-color: var(--button-active-background-color);\n          }\n        "])));
+        ? (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "], ["\n          color: var(--button-background-color);\n          border: 2px solid var(--button-background-color);\n          background-color: transparent;\n          &:hover {\n            border: 2px solid var(--button-active-background-color);\n            background-color: transparent;\n          }\n\n          &:active {\n            border: 2px solid var(--button-outlined-active-border-color);\n          }\n        "]))) : (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n          color: var(--button-color);\n          border: 2px solid var(--button-background-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            border: 2px solid var(--button-hover-background-color);\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            border: 2px solid var(--button-active-background-color);\n            background-color: var(--button-active-background-color);\n          }\n        "], ["\n          color: var(--button-color);\n          border: 2px solid var(--button-background-color);\n          background-color: var(--button-background-color);\n          &:hover {\n            border: 2px solid var(--button-hover-background-color);\n            background-color: var(--button-hover-background-color);\n          }\n\n          &:active {\n            border: 2px solid var(--button-active-background-color);\n            background-color: var(--button-active-background-color);\n          }\n        "])));
 }, function (_a) {
     var size = _a.size;
     return getSize(size);
@@ -72,7 +72,7 @@ var StyledButton = styled_components_1.default.button.attrs(function (_a) {
     return blinking && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      pointer-events: none;\n      animation: ", " 1.2s infinite;\n    "], ["\n      pointer-events: none;\n      animation: ", " 1.2s infinite;\n    "])), getBlink());
 }, function (_a) {
     var disabled = _a.disabled;
-    return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999999;\n        pointer-events: none;\n      }\n    "])));
+    return disabled && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999;\n        pointer-events: none;\n      }\n    "], ["\n      &,\n      &:hover {\n        cursor: default;\n        color: #999;\n        pointer-events: none;\n      }\n    "])));
 });
 var ButtonComponent = function (props) {
     if (props.to) {

package/CodeBlock/CodeBlock.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var utils_1 = require("../utils");
 exports.CodeBlock = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'CodeBlock/CodeBlock',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\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\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  ", "\n"], ["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\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\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  ", "\n"])), (0, utils_1.generateCodeBlockTokens)());
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\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\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  .code-line {\n    &:before {\n      content: attr(data-line-number);\n      display: inline-block;\n      min-width: 2em;\n      padding-right: 0.8em;\n      text-align: right;\n      pointer-events: none;\n      user-select: none;\n    }\n  }\n\n  ", "\n"], ["\n  max-height: var(--code-block-max-height, 600px);\n  word-break: var(--code-block-word-break, initial);\n  /**\n  * Based on prism-dark.css\n  */\n  code[class*='language-'],\n  pre[class*='language-'] {\n    /* color: white;\n    background: none; */\n    text-shadow: 0 -0.1em 0.2em black;\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\n    -moz-tab-size: 4;\n    -o-tab-size: 4;\n    tab-size: 4;\n\n    -webkit-hyphens: none;\n    -moz-hyphens: none;\n    -ms-hyphens: none;\n    hyphens: none;\n  }\n\n  @media print {\n    code[class*='language-'],\n    pre[class*='language-'] {\n      text-shadow: none;\n    }\n  }\n\n  /* Code blocks */\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n  }\n\n  .token.punctuation {\n    opacity: 1;\n  }\n\n  .namespace {\n    opacity: 0.7;\n  }\n\n  .token.selector,\n  .token.attr-name,\n  .token.string,\n  .token.char,\n  .token.builtin,\n  .token.inserted {\n    & + a,\n    & + a:visited {\n      color: #4ed2ba;\n      text-decoration: underline;\n    }\n  }\n\n  .token.property.string {\n    color: #9efaa7;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: bold;\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.entity {\n    cursor: help;\n  }\n\n  .code-line {\n    &:before {\n      content: attr(data-line-number);\n      display: inline-block;\n      min-width: 2em;\n      padding-right: 0.8em;\n      text-align: right;\n      pointer-events: none;\n      user-select: none;\n    }\n  }\n\n  ", "\n"])), (0, utils_1.generateCodeBlockTokens)());
 var templateObject_1;

package/CopyButton/CopyButton.js

@@ -58,13 +58,29 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 var react_1 = __importStar(require("react"));
 var Button_1 = require("../Button");
 var CopyButton = function (_a) {
     var text = _a.text, _b = _a.dataTestId, dataTestId = _b === void 0 ? 'copy-button' : _b;
-    var _c = (0, react_1.useState)('Copy'), title = _c[0], setTitle = _c[1];
+    var _c = __read((0, react_1.useState)('Copy'), 2), title = _c[0], setTitle = _c[1];
     function write() {
         return __awaiter(this, void 0, void 0, function () {
             return __generator(this, function (_a) {

package/CopyButton/CopyButtonWrapper.js

@@ -44,7 +44,7 @@ function CopyButtonWrapperComponent(_a) {
         showTooltip();
     };
     var renderCopyButton = function () {
-        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', open: tooltip.isOpened },
+        return (react_1.default.createElement(Tooltip_1.Tooltip, { className: "copy-button", tip: utils_1.ClipboardService.isSupported() ? 'Copied' : 'Not supported in your browser', isOpen: tooltip.isOpened },
             react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: copy, "data-cy": dataTestId }, "Copy")));
     };
     return children({ renderCopyButton: renderCopyButton });

package/Footer/Footer.js

@@ -14,10 +14,11 @@ var FooterColumns_1 = require("../Footer/FooterColumns");
 var FooterCopyright_1 = require("../Footer/FooterCopyright");
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
+var utils_1 = require("../utils");
 function Footer(_a) {
     var _b = _a.data, columns = _b.columns, copyrightText = _b.copyrightText;
     var footer = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).footer;
-    if (!((columns === null || columns === void 0 ? void 0 : columns.length) || copyrightText) || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
+    if ((0, utils_1.isEmptyArray)(columns) || !copyrightText || (footer === null || footer === void 0 ? void 0 : footer.hide)) {
         return null;
     }
     return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/Footer" },

package/Footer/FooterColumn.js

@@ -26,6 +26,6 @@ function FooterColumn(_a) {
 exports.FooterColumn = FooterColumn;
 var FooterColumnTitle = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  font-size: 24px;\n  margin-bottom: 1.5em;\n  font-family: var(--h-font-family);\n"], ["\n  display: inline-block;\n  font-weight: var(--font-weight-regular);\n  font-size: 24px;\n  margin-bottom: 1.5em;\n  font-family: var(--h-font-family);\n"])));
 var FooterSeparator = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  opacity: 0.75;\n  margin: 10px 0 5px 0;\n  font-size: 0.75em;\n  text-transform: uppercase;\n  font-family: var(--h-font-family);\n"], ["\n  opacity: 0.75;\n  margin: 10px 0 5px 0;\n  font-size: 0.75em;\n  text-transform: uppercase;\n  font-family: var(--h-font-family);\n"])));
-var FooterColumnContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: 0 30px;\n"], ["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: 0 30px;\n"])));
+var FooterColumnContainer = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: 0 20px;\n  width: 20%;\n  word-break: break-word;\n"], ["\n  display: flex;\n  flex-direction: column;\n  text-align: left;\n  margin: 0 20px;\n  width: 20%;\n  word-break: break-word;\n"])));
 var FooterLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  padding-bottom: 0.75em;\n  color: var(--footer-text-color);\n  text-decoration: none;\n"], ["\n  font-weight: var(--font-weight-bold);\n  padding-bottom: 0.75em;\n  color: var(--footer-text-color);\n  text-decoration: none;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Footer/FooterColumns.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { NavGroup } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnsProps {
-    columns: NavGroup;
+    columns: ResolvedNavItem[];
 }
 export declare function FooterColumns({ columns }: FooterColumnsProps): JSX.Element | null;
 export declare const FooterColumnsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Footer/FooterColumns.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumn_1 = require("../Footer/FooterColumn");
 function FooterColumns(_a) {
     var columns = _a.columns;
-    if (typeof columns === 'string' || typeof columns === 'undefined' || !(columns === null || columns === void 0 ? void 0 : columns.length)) {
+    if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
         return null;
     }
     return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns" },

package/JsonViewer/JsonViewer.d.ts

@@ -3,6 +3,8 @@ export interface JsonProps {
     data: any;
     className?: string;
     jsonSampleExpandLevel: number;
+    withLineNumbers?: boolean;
+    startLineNumber?: number;
 }
 export declare const Json: React.NamedExoticComponent<JsonProps>;
 export declare const JsonViewer: import("styled-components").StyledComponent<React.NamedExoticComponent<JsonProps>, any, {

package/JsonViewer/JsonViewer.js

@@ -26,6 +26,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,7 +50,7 @@ var utils_1 = require("../utils");
 var hooks_1 = require("../hooks");
 var CodeBlock_1 = require("../CodeBlock");
 function JsonComponent(_a) {
-    var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className;
+    var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className, withLineNumbers = _a.withLineNumbers, startLineNumber = _a.startLineNumber;
     var node = (0, react_1.useRef)(null);
     (0, hooks_1.useMount)(function () {
         var _a;
@@ -50,29 +61,49 @@ function JsonComponent(_a) {
         (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', clickListener);
     });
     var expandAll = function () {
-        var _a, _b;
-        var elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
-        for (var _i = 0, _c = Array.prototype.slice.call(elements); _i < _c.length; _i++) {
-            var collapsed = _c[_i];
-            var parentNode = collapsed.parentNode;
-            if (!parentNode)
-                continue;
-            parentNode.classList.remove('collapsed');
-            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'collapse');
+        var e_1, _a;
+        var _b, _c;
+        var elements = (_b = node === null || node === void 0 ? void 0 : node.current) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('collapsible');
+        try {
+            for (var _d = __values(Array.prototype.slice.call(elements)), _e = _d.next(); !_e.done; _e = _d.next()) {
+                var collapsed = _e.value;
+                var parentNode = collapsed.parentNode;
+                if (!parentNode)
+                    continue;
+                parentNode.classList.remove('collapsed');
+                (_c = parentNode.querySelector('.collapser')) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-label', 'collapse');
+            }
+        }
+        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+        finally {
+            try {
+                if (_e && !_e.done && (_a = _d.return)) _a.call(_d);
+            }
+            finally { if (e_1) throw e_1.error; }
         }
     };
     var collapseAll = function () {
-        var _a, _b;
-        var elements = (_a = node === null || node === void 0 ? void 0 : node.current) === null || _a === void 0 ? void 0 : _a.getElementsByClassName('collapsible');
+        var e_2, _a;
+        var _b, _c;
+        var elements = (_b = node === null || node === void 0 ? void 0 : node.current) === null || _b === void 0 ? void 0 : _b.getElementsByClassName('collapsible');
         // skip first item to avoid collapsing whole object/array
         var elementsArr = Array.prototype.slice.call(elements, 1);
-        for (var _i = 0, elementsArr_1 = elementsArr; _i < elementsArr_1.length; _i++) {
-            var expanded = elementsArr_1[_i];
-            var parentNode = expanded.parentNode;
-            if (!parentNode)
-                continue;
-            parentNode.classList.add('collapsed');
-            (_b = parentNode.querySelector('.collapser')) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-label', 'expand');
+        try {
+            for (var elementsArr_1 = __values(elementsArr), elementsArr_1_1 = elementsArr_1.next(); !elementsArr_1_1.done; elementsArr_1_1 = elementsArr_1.next()) {
+                var expanded = elementsArr_1_1.value;
+                var parentNode = expanded.parentNode;
+                if (!parentNode)
+                    continue;
+                parentNode.classList.add('collapsed');
+                (_c = parentNode.querySelector('.collapser')) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-label', 'expand');
+            }
+        }
+        catch (e_2_1) { e_2 = { error: e_2_1 }; }
+        finally {
+            try {
+                if (elementsArr_1_1 && !elementsArr_1_1.done && (_a = elementsArr_1.return)) _a.call(elementsArr_1);
+            }
+            finally { if (e_2) throw e_2.error; }
         }
     };
     var collapseElement = function (target) {
@@ -101,8 +132,8 @@ function JsonComponent(_a) {
                 showFoldingButtons && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: expandAll, "data-cy": "expand-all" }, "Expand all"),
                     react_1.default.createElement(SamplesPanelControls_1.SamplesControlButton, { onClick: collapseAll, "data-cy": "collapse-all" }, "Collapse all")))),
-            react_1.default.createElement(exports.StyledCodeBlock, { className: className, ref: node, dangerouslySetInnerHTML: {
-                    __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel),
+            react_1.default.createElement(exports.StyledCodeBlock, { className: withLineNumbers ? "".concat(className, " line-numbers") : className, ref: node, dangerouslySetInnerHTML: {
+                    __html: (0, utils_1.jsonToHTML)(data, jsonSampleExpandLevel, startLineNumber),
                 } })));
     };
     return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data }, renderInner));
@@ -110,7 +141,7 @@ function JsonComponent(_a) {
 exports.Json = (0, react_1.memo)(JsonComponent);
 exports.JsonViewer = (0, styled_components_1.default)(exports.Json).attrs(function () { return ({
     'data-component-name': 'JsonViewer/JsonViewer',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n\n    & > .collapser {\n      display: none;\n      pointer-events: none;\n    }\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n\n    & > .collapser {\n      display: none;\n      pointer-events: none;\n    }\n  }\n\n  contain: content;\n  overflow-x: auto;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapser:after {\n    content: '-';\n    cursor: pointer;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    margin-left: 2ch;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    color: #fff;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 15px;\n    height: 15px;\n    position: absolute;\n    top: 4px;\n    left: -1.5em;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    padding: 2px;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n    &:focus {\n      outline: #fff dotted 1px;\n    }\n  }\n\n  ul {\n    list-style-type: none;\n    padding: 0;\n    margin: 0 0 0 26px;\n  }\n\n  li {\n    position: relative;\n    display: block;\n  }\n\n  .hoverable {\n    display: inline-block;\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inherit;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    display: inline-flex;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    color: #fff;\n    width: 0;\n    height: 15px;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 15px;\n      height: 100%;\n      padding: 2px 5px 2px 2px;\n      transform: translateX(-100%);\n\n      &:focus {\n        outline: #fff dotted 1px;\n      }\n    }\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inline;\n  }\n"], ["\n  .redoc-json code {\n    background-color: var(--samples-panel-controls-background-color);\n    color: var(--color-content-inverse);\n    padding: inherit;\n    border: none;\n  }\n\n  contain: content;\n  overflow-x: auto;\n  position: relative;\n  padding: 10px;\n  border-radius: var(--global-border-radius);\n  background-color: var(--samples-panel-controls-background-color);\n  color: var(--color-content-inverse);\n  font-size: var(--code-font-size);\n  font-family: var(--code-font-family);\n  white-space: var(--code-wrap, pre);\n\n  &.line-numbers {\n    padding: 20px 20px 20px 3em;\n\n    *[data-line]:not(.collapsed *[data-line]) {\n      &:before {\n        content: attr(data-line);\n        position: absolute;\n        left: 0;\n        min-width: 2em;\n        text-align: right;\n        pointer-events: none;\n        user-select: none;\n        padding: 0 0.5em;\n        font-size: 13px;\n      }\n    }\n  }\n\n  .callback-function {\n    color: gray;\n  }\n\n  .collapsed > .collapser:after {\n    content: '+';\n    cursor: pointer;\n  }\n\n  .ellipsis:after {\n    content: ' \u2026 ';\n  }\n\n  .collapsible {\n    padding-left: 2ch;\n    display: inline-block;\n  }\n\n  .hoverable {\n    padding: 1px 2px;\n    display: inline-block;\n  }\n\n  .collapsed {\n    display: inline-flex;\n  }\n\n  .hovered {\n    background-color: rgba(235, 238, 249, 1);\n  }\n\n  .collapser {\n    background-color: transparent;\n    border: 0;\n    padding: 0;\n    color: #fff;\n    width: 0;\n    height: 15px;\n    cursor: default;\n    user-select: none;\n    -webkit-user-select: none;\n    font-family: var(--code-font-family);\n    font-size: var(--code-font-size);\n\n    &:after {\n      content: '-';\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 15px;\n      height: 100%;\n      padding: 2px 5px 2px 2px;\n      transform: translateX(-100%);\n\n      &:focus {\n        outline: #fff dotted 1px;\n      }\n    }\n  }\n\n  .selected {\n    outline-width: 1px;\n    outline-style: dotted;\n  }\n\n  .collapsed > .collapsible {\n    display: none;\n  }\n\n  .ellipsis {\n    display: none;\n  }\n\n  .collapsed > .ellipsis {\n    display: inline;\n  }\n"])));
 exports.JsonViewerWrap = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n\n  &:hover > ", " {\n    opacity: 1;\n  }\n"])), SamplesPanelControls_1.SampleControls);
 exports.StyledCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"], ["\n  flex: 1;\n\n  code {\n    font-family: var(--code-font-family);\n    font-size: 14px;\n    line-height: 18px;\n  }\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Markdown/Admonition.js

@@ -13,7 +13,7 @@ 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 (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition/Admonition" },
+    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)));

package/Markdown/CodeSample/CodeSample.js

@@ -26,6 +26,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeSample = void 0;
 var react_1 = __importStar(require("react"));
@@ -34,7 +50,7 @@ var ClipboardService_1 = require("../../utils/ClipboardService");
 function CodeSample(_a) {
     var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
     var langClassName = language ? "language-".concat(language) : '';
-    var _b = (0, react_1.useState)(false), isCopied = _b[0], setIsCopied = _b[1];
+    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);

package/Markdown/Heading.js

@@ -25,12 +25,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 var react_1 = __importStar(require("react"));
+var utils_1 = require("../utils");
+/**
+ * Class name for all MD tags
+ */
+var mdClassName = 'md';
 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 = (react_1.default.createElement("a", { href: "#".concat(id), className: "anchor before" }, SvgIcon));
-    return (0, react_1.createElement)("h".concat(level), { id: id, className: 'heading-anchor', 'data-component-name': 'Markdown/Heading/Heading' }, react_1.default.createElement(react_1.default.Fragment, null,
+    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',
+    }, react_1.default.createElement(react_1.default.Fragment, null,
         linkEl,
         children));
 }

package/Markdown/MarkdownWrapper.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownWrapper = exports.headingAnchor = exports.baseTable = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var utils_1 = require("../utils");
-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"])));
+exports.baseTable = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  table.md {\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    th,\n    td {\n      padding: 12px;\n      border-bottom: 1px solid var(--global-border-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: bold;\n      background-color: var(--color-secondary-300);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--global-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--global-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--panels-border-radius);\n    }\n\n    /* top-right border */\n\n    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    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--panels-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--panels-border-radius);\n    }\n  }\n"], ["\n  table.md {\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    th,\n    td {\n      padding: 12px;\n      border-bottom: 1px solid var(--global-border-color);\n    }\n\n    th {\n      text-align: left;\n      font-weight: bold;\n      background-color: var(--color-secondary-300);\n    }\n\n    tr th:first-child,\n    tr td:first-child {\n      border-left: 1px solid var(--global-border-color);\n    }\n\n    tr td:last-child,\n    tr th:last-child {\n      border-right: 1px solid var(--global-border-color);\n    }\n\n    thead td,\n    thead th {\n      border-top: 1px solid var(--global-border-color);\n    }\n\n    /* top-left border */\n\n    thead tr:first-child th:first-child {\n      border-top-left-radius: var(--panels-border-radius);\n    }\n\n    /* top-right border */\n\n    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    tbody tr:last-child td:first-child {\n      border-bottom-left-radius: var(--panels-border-radius);\n    }\n\n    /* bottom-right border */\n\n    tbody tr:last-child td:last-child {\n      border-bottom-right-radius: var(--panels-border-radius);\n    }\n  }\n"])));
 // TODO: Can users specify another className or we should hardcode it?
 function headingAnchor(className) {
     if (className === void 0) { className = 'anchor'; }
@@ -39,5 +39,5 @@ function headingAnchor(className) {
 exports.headingAnchor = headingAnchor;
 exports.MarkdownWrapper = styled_components_1.default.main.attrs(function () { return ({
     'data-component-name': 'Markdown/MarkdownWrapper',
-}); })(templateObject_3 || (templateObject_3 = __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    margin: var(--h1-margin-top) var(--h1-margin-bottom);\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    margin: var(--h2-margin-top) var(--h2-margin-bottom);\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    margin: var(--h3-margin-top) var(--h3-margin-bottom);\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    margin: var(--h4-margin-top) var(--h4-margin-bottom);\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    margin: var(--h5-margin-top) var(--h5-margin-bottom);\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    margin: var(--h6-margin-top) var(--h6-margin-bottom);\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    color: var(--color-content);\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    margin: var(--h1-margin-top) var(--h1-margin-bottom);\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2 {\n    ", ";\n    margin: var(--h2-margin-top) var(--h2-margin-bottom);\n    ", ";\n  }\n\n  h3 {\n    ", ";\n    margin: var(--h3-margin-top) var(--h3-margin-bottom);\n    ", ";\n  }\n\n  h4 {\n    ", ";\n    margin: var(--h4-margin-top) var(--h4-margin-bottom);\n    ", ";\n  }\n\n  h5 {\n    ", ";\n    margin: var(--h5-margin-top) var(--h5-margin-bottom);\n    ", ";\n  }\n\n  h6 {\n    ", ";\n    margin: var(--h6-margin-top) var(--h6-margin-bottom);\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    color: var(--color-content);\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, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
+}); })(templateObject_3 || (templateObject_3 = __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.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\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.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\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    color: var(--color-content);\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.md,\n  h2.md,\n  h3.md,\n  h4.md,\n  h5.md,\n  h6.md {\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.md {\n    ", ";\n    margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;\n    ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  h2.md {\n    ", ";\n    margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;\n    ", ";\n  }\n\n  h3.md {\n    ", ";\n    margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;\n    ", ";\n  }\n\n  h4.md {\n    ", ";\n    margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;\n    ", ";\n  }\n\n  h5.md {\n    ", ";\n    margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;\n    ", ";\n  }\n\n  h6.md {\n    ", ";\n    margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;\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    color: var(--color-content);\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, utils_1.typography)('h1', 'h'), headingAnchor(), (0, utils_1.typography)('h2', 'h'), headingAnchor(), (0, utils_1.typography)('h3', 'h'), headingAnchor(), (0, utils_1.typography)('h4', 'h'), headingAnchor(), (0, utils_1.typography)('h5', 'h'), headingAnchor(), (0, utils_1.typography)('h6', 'h'), headingAnchor());
 var templateObject_1, templateObject_2, templateObject_3;

package/Markdown/Mermaid.js

@@ -12,7 +12,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Mermaid(_a) {
     var diagramHtml = _a.diagramHtml;
-    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid/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.d.ts

@@ -0,0 +1,2 @@
+import { PropsWithChildren } from 'react';
+export declare function Sup({ children }: PropsWithChildren<unknown>): JSX.Element;

package/Markdown/Sup.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.Sup = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+function Sup(_a) {
+    var children = _a.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([""], [""])));
+var templateObject_1;

package/Markdown/Tabs/Tabs.js

@@ -26,6 +26,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -36,7 +52,7 @@ 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 _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 (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
         react_1.default.createElement(TabList, null, children.map(function (child) {

package/Markdown/index.d.ts

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

package/Markdown/index.js

@@ -14,12 +14,13 @@ 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/CodeSample"), exports);
 __exportStar(require("../Markdown/ContentWrapper"), exports);
 __exportStar(require("../Markdown/Heading"), exports);
 __exportStar(require("../Markdown/MarkdownLayout"), exports);
+__exportStar(require("../Markdown/MarkdownWrapper"), exports);
 __exportStar(require("../Markdown/Mermaid"), exports);
 __exportStar(require("../Markdown/PageWrapper"), exports);
-__exportStar(require("../Markdown/MarkdownWrapper"), exports);
+__exportStar(require("../Markdown/Sup"), exports);
+__exportStar(require("../Markdown/Tabs"), exports);

package/Navbar/MobileNavbarDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import type { ResolvedNavLinkItem } from '@theme/types/portal';
+interface NavbarDropdownProps {
+    items: ResolvedNavLinkItem[];
+}
+export declare function MobileNavbarDropdown({ items }: NavbarDropdownProps): JSX.Element;
+export declare const MobileDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/Navbar/MobileNavbarDropdown.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.MobileDropdownWrapper = exports.MobileNavbarDropdown = void 0;
+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 (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"])));
+var templateObject_1;

package/Navbar/MobileNavbarItem.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '@theme/types/portal';
+import { Link } from '../mocks/Link';
+export interface NavbarItemProps {
+    navItem: ResolvedNavItem;
+    className?: string;
+}
+export declare function MobileNavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
+export declare const NavMenuItem: import("styled-components").StyledComponent<"li", any, {
+    active?: boolean | undefined;
+}, never>;
+export declare const NavMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {
+    expanded: boolean;
+}, never>;
+export declare const NavLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;