@redocly/theme 0.1.15 → 0.1.20

package/Markdown/CodeSample/CodeSample.js

@@ -1,19 +1,30 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeSample = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
+var react_1 = __importStar(require("react"));
 var ClipboardService_1 = require("../../utils/ClipboardService");
 var styled_1 = require("../../Markdown/CodeSample/styled");
 function CodeSample(_a) {
@@ -25,6 +36,11 @@ function CodeSample(_a) {
         setIsCopied(true);
         setTimeout(function () { return setIsCopied(false); }, 1500);
     };
-    return ((0, jsx_runtime_1.jsxs)(styled_1.Wrapper, __assign({ className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" }, { children: [(0, jsx_runtime_1.jsxs)(styled_1.CodeSampleButtonContainer, __assign({ onClick: function () { return copyCode(rawContent); } }, { children: [!isCopied && (0, jsx_runtime_1.jsx)(styled_1.CopyCodeButton, __assign({ title: "Copy the code snippet" }, { children: "Copy" })), isCopied && (0, jsx_runtime_1.jsx)(styled_1.DoneIndicator, { children: "Copied" })] })), (0, jsx_runtime_1.jsx)("pre", __assign({ className: langClassName }, { children: (0, jsx_runtime_1.jsx)("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }) }))] })));
+    return (react_1.default.createElement(styled_1.Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+        react_1.default.createElement(styled_1.CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
+            !isCopied && react_1.default.createElement(styled_1.CopyCodeButton, { title: "Copy the code snippet" }, "Copy"),
+            isCopied && react_1.default.createElement(styled_1.DoneIndicator, null, "Copied")),
+        react_1.default.createElement("pre", { className: langClassName },
+            react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }
 exports.CodeSample = CodeSample;

package/Markdown/CodeSample/styled.js

@@ -32,7 +32,54 @@ var styled_components_1 = __importStar(require("styled-components"));
 exports.CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
 exports.CopyCodeButton = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  display: none;\n  &:hover {\n    cursor: pointer;\n  }\n"])));
 exports.DoneIndicator = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"], ["\n  padding: 0 5px;\n  border-radius: 4px;\n  cursor: default;\n"])));
-var lightStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: #999988;\n    font-style: italic;\n  }\n  .token.namespace {\n    opacity: 0.7;\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  .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  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\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  .token.namespace {\n    opacity: 0.7;\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  .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  .token.atrule,\n  .token.keyword,\n  .token.attr-name,\n  .language-autohotkey .token.selector {\n    color: #00a4db;\n  }\n  .token.function,\n  .token.deleted,\n  .language-autohotkey .token.tag {\n    color: #9a050f;\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_5 || (templateObject_5 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\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  .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  .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  .token.deleted {\n    color: red;\n  }\n"])));
-exports.Wrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\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  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    .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  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\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  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    .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"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, darkStyleTokens);
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+// const lightStyleTokens = css`
+//   .token.comment,
+//   .token.prolog,
+//   .token.doctype,
+//   .token.cdata {
+//     color: #999988;
+//     font-style: italic;
+//   }
+//   .token.namespace {
+//     opacity: 0.7;
+//   }
+//   .token.string,
+//   .token.attr-value {
+//     color: #e3116c;
+//   }
+//   .token.punctuation,
+//   .token.operator {
+//     color: #393a34; /* no highlight */
+//   }
+//   .token.entity,
+//   .token.url,
+//   .token.symbol,
+//   .token.number,
+//   .token.boolean,
+//   .token.variable,
+//   .token.constant,
+//   .token.property,
+//   .token.regex,
+//   .token.inserted {
+//     color: #36acaa;
+//   }
+//   .token.atrule,
+//   .token.keyword,
+//   .token.attr-name,
+//   .language-autohotkey .token.selector {
+//     color: #00a4db;
+//   }
+//   .token.function,
+//   .token.deleted,
+//   .language-autohotkey .token.tag {
+//     color: #9a050f;
+//   }
+//   .token.tag,
+//   .token.selector,
+//   .language-autohotkey .token.keyword {
+//     color: #00009f;
+//   }
+// `;
+var darkStyleTokens = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata {\n    color: hsl(30, 20%, 50%);\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  .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  .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  .token.deleted {\n    color: red;\n  }\n"])));
+exports.Wrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\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  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    .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  overflow: auto;\n  border-radius: 4px;\n  position: relative;\n\n  ", ",\n  ", " {\n    color: rgba(255, 255, 255, 0.15);\n  }\n  ", ":hover {\n    color: #fff;\n    background-color: rgba(255, 255, 255, 0.15);\n  }\n\n  &:hover {\n    ", " ", " {\n      display: block;\n    }\n  }\n  pre {\n    white-space: var(--code-wrap);\n    color: white;\n    padding: 12px 14px 15px 14px;\n    overflow-x: auto;\n    line-height: normal;\n    border-radius: 4px;\n    font-family: var(--code-font-family);\n    background-color: var(--code-block-preformatted-background-color);\n    code {\n      background-color: transparent;\n      border: 0;\n      padding: 0;\n      color: white;\n      &:before,\n      &:after {\n        content: none;\n      }\n    }\n  }\n  pre[class*='language-'] {\n    padding: 1em;\n    margin: 0.5em 0;\n    overflow: auto;\n    border: 0;\n    border-radius: var(--global-border-radius);\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  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    .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"])), exports.CopyCodeButton, exports.DoneIndicator, exports.CopyCodeButton, exports.CodeSampleButtonContainer, exports.CopyCodeButton, darkStyleTokens);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Markdown/Heading.js

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

package/Markdown/MarkdownLayout.js

@@ -1,23 +1,19 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MarkdownLayout = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var 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] })));
+    return (react_1.default.createElement(PageWrapper_1.PageWrapper, { "data-component-name": "Markdown/MarkdownLayout" },
+        react_1.default.createElement(ContentWrapper_1.ContentWrapper, { withToc: true },
+            markdownWrapper,
+            react_1.default.createElement(PageNavigation_1.PageNavigation, null)),
+        tableOfContent));
 }
 exports.MarkdownLayout = MarkdownLayout;

package/Markdown/Mermaid.js

@@ -8,11 +8,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 function Mermaid(_a) {
     var diagramHtml = _a.diagramHtml;
-    return ((0, jsx_runtime_1.jsx)(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid/Mermaid" }));
+    return (react_1.default.createElement(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"])));

package/Markdown/Tabs/Tab.js

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

package/Markdown/Tabs/Tabs.js

@@ -3,38 +3,51 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __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 react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Tab_1 = require("../../Markdown/Tabs/Tab");
 function Tabs(_a) {
     var children = _a.children;
     var _b = (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;
-                }) })] })));
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
+        react_1.default.createElement(TabList, null, children.map(function (child) {
+            var label = child.props.label;
+            return react_1.default.createElement(Tab_1.Tab, { activeTab: activeTab, key: label, label: label, onClick: onTabSelect });
+        })),
+        react_1.default.createElement(TabContent, null, children.map(function (child) {
+            if (child.props.label !== activeTab)
+                return undefined;
+            return child.props.children;
+        }))));
 }
 exports.Tabs = Tabs;
 var TabsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 10px 0;\n"], ["\n  margin: 10px 0;\n"])));

package/Navbar/Navbar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { ResolvedConfigLinks } from '@theme/types/portal';
 interface NavbarProps {
-    menu: React.ReactNode;
+    menu: ResolvedConfigLinks;
     logo: React.ReactNode;
     search: React.ReactNode;
 }

package/Navbar/Navbar.js

@@ -3,27 +3,20 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarContainer = exports.Navbar = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var Navbar_1 = require("../Navbar");
 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] })));
+    return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
+        logo,
+        react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
+        search));
 }
 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) {

package/Navbar/NavbarDropdown.d.ts

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

package/Navbar/NavbarDropdown.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.DropdownWrapper = exports.NavbarDropdown = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+function NavbarDropdown(_a) {
+    var items = _a.items;
+    return (react_1.default.createElement(exports.DropdownWrapper, { "data-component-name": "Navbar/NavbarDropdown" }, 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.NavbarDropdown = NavbarDropdown;
+exports.DropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background: var(--navbar-item-active-background-color);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0px;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"], ["\n  display: none;\n  position: absolute;\n  background: var(--navbar-item-active-background-color);\n  border-radius: var(--navbar-item-border-radius);\n  padding: 10px 15px;\n  width: max-content;\n  line-height: 1rem;\n  box-shadow: var(--navbar-dropdown-shadow);\n  & > div {\n    text-align: left;\n    padding: 10px 0px;\n    cursor: pointer;\n    a {\n      color: var(--navbar-text-color);\n      text-decoration: none;\n    }\n    :hover {\n      text-decoration: underline;\n    }\n  }\n"])));
+var templateObject_1;

package/Navbar/NavbarItem.d.ts

@@ -1,40 +1,7 @@
 /// <reference types="react" />
-export declare enum MenuStyle {
-    Drilldown = "drilldown"
-}
-export declare type ResolvedNavLinkItem = {
-    type: 'link';
-    link: string;
-    label: string;
-    items?: ResolvedNavItem[];
-    external?: boolean;
-    version?: string;
-    default?: string;
-    httpVerb?: string;
-    separatorLine?: boolean;
-    active?: boolean;
-};
-export declare type ResolvedNavGroupItem = {
-    type: 'group';
-    link?: string;
-    label: string;
-    items: ResolvedNavItem[];
-    version?: string;
-    default?: string;
-    menuStyle?: MenuStyle;
-    separatorLine?: boolean;
-    active?: boolean;
-};
-export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem | {
-    type: 'separator';
-    label?: string;
-    separatorLine?: boolean;
-} | {
-    type: 'error';
-    label: string;
-};
+import type { ResolvedNavItem } from '@theme/types/portal';
 interface NavbarItemProps {
-    navItem: ResolvedNavLinkItem;
+    navItem: ResolvedNavItem;
 }
-export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
+export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null;
 export {};

package/Navbar/NavbarItem.js

@@ -3,48 +3,48 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarItem = exports.MenuStyle = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+exports.NavbarItem = void 0;
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var react_router_dom_1 = require("react-router-dom");
 var Link_1 = require("../mocks/Link");
 var utils_1 = require("../mocks/utils");
-var MenuStyle;
-(function (MenuStyle) {
-    MenuStyle["Drilldown"] = "drilldown";
-})(MenuStyle = exports.MenuStyle || (exports.MenuStyle = {}));
+var NavbarDropdown_1 = require("../Navbar/NavbarDropdown");
 function NavbarItem(_a) {
     var navItem = _a.navItem;
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
-    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 }) })) })));
+    if (navItem.link) {
+        var item = navItem;
+        var isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        return (react_1.default.createElement(NavMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem" },
+            react_1.default.createElement(NavLink, { to: item.link, active: isActive },
+                react_1.default.createElement(NavLabel, null, item.label))));
+    }
+    if (navItem.items) {
+        var item = navItem;
+        return (react_1.default.createElement(NavMenuItemWithDropdownWrapper, null,
+            react_1.default.createElement(NavMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem" },
+                react_1.default.createElement(NavLabel, null, item.label)),
+            react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
+    }
+    return null;
 }
 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 NavMenuItemWithDropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  border-radius: var(--navbar-item-border-radius);\n  &:hover {\n    background: var(--navbar-item-active-background-color);\n    ", " {\n      display: block;\n    }\n  }\n"])), NavbarDropdown_1.DropdownWrapper);
+var NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __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 NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_3 || (templateObject_3 = __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-text-color)';
 }, function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-decoration)' : 'none';
 });
-var NavLabel = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+var NavLabel = styled_components_1.default.span(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Navbar/NavbarMenu.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { ResolvedConfigLinks } from '@theme/types/portal';
 export declare function NavbarMenu({ menuItems }: {
-    menuItems: any[];
+    menuItems: ResolvedConfigLinks;
 }): JSX.Element | null;

package/Navbar/NavbarMenu.js

@@ -3,23 +3,12 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarMenu = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var NavbarItem_1 = require("../Navbar/NavbarItem");
 function NavbarMenu(_a) {
@@ -27,9 +16,9 @@ function NavbarMenu(_a) {
     if (!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(NavItemsContainer, __assign({ "data-component-name": "Navbar/NavbarMenu" }, { children: menuItems.map(function (navItem, index) {
-            return (0, jsx_runtime_1.jsx)(NavbarItem_1.NavbarItem, { "data-cy": navItem.label, navItem: navItem }, index);
-        }) })));
+    return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map(function (navItem, index) {
+        return (react_1.default.createElement(NavbarItem_1.NavbarItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
+    })));
 }
 exports.NavbarMenu = NavbarMenu;
 var NavItemsContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n\n  ", " {\n    display: block;\n  }\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n\n  ", " {\n    display: block;\n  }\n"])), function (_a) {