@redocly/theme 0.1.17 → 0.1.22

package/Button/Button.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { FlattenSimpleInterpolation } from 'styled-components';
 export declare type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
 export declare type ButtonColor = 'primary' | 'secondary' | 'default' | string;
@@ -10,8 +11,8 @@ export interface ButtonProps {
     variant?: ButtonVariant;
     size?: ButtonSize;
     extraClass?: string;
+    to?: string;
+    onClick?: (e?: any) => void;
 }
 export declare const baseButtonStyles: FlattenSimpleInterpolation;
-export declare const Button: import("styled-components").StyledComponent<"button", any, {
-    className: `button-color-${string}${string}`;
-} & ButtonProps, "className">;
+export declare const Button: React.FC<ButtonProps>;

package/Button/Button.js

@@ -3,6 +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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,19 +37,25 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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.Button = exports.baseButtonStyles = void 0;
+var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
+var Link_1 = require("../mocks/Link");
 var getBlink = function () { return (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"], ["\n  0% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n\n  50% {\n    background-color: var(--button-background-color);\n  }\n\n  100% {\n    color: var(--button-color);\n    background-color: var(--button-active-background-color);\n  }\n"]))); };
 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.Button = styled_components_1.default.button.attrs(function (_a) {
+var StyledButton = styled_components_1.default.button.attrs(function (_a) {
     var _b = _a.color, color = _b === void 0 ? 'default' : _b, extraClass = _a.extraClass;
     return ({
         className: "button-color-".concat(color).concat(extraClass ? " ".concat(extraClass) : ''),
+        'data-component-name': 'Button/Button',
     });
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  text-decoration: none;\n  text-align: center;\n\n  width: ", ";\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  & + & {\n    margin-left: 0.85em;\n  }\n\n  ", "\n\n  ", "\n"], ["\n  text-decoration: none;\n  text-align: center;\n\n  width: ", ";\n\n  ", "\n\n  ", ";\n\n  ", "\n\n  & + & {\n    margin-left: 0.85em;\n  }\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var fullWidth = _a.fullWidth;
@@ -57,4 +74,14 @@ exports.Button = styled_components_1.default.button.attrs(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    "])));
 });
+var Button = function (props) {
+    if (props.to) {
+        return (react_1.default.createElement(Link_1.Link, { to: props.to },
+            react_1.default.createElement(StyledButton, __assign({}, props))));
+    }
+    else {
+        return react_1.default.createElement(StyledButton, __assign({}, props));
+    }
+};
+exports.Button = Button;
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/Footer/CustomFooter.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { NavGroupRecord } from '@theme/types/portal';
+interface FooterProps {
+    data: NavGroupRecord;
+}
+export declare function CustomFooter({ data }: FooterProps): JSX.Element | null;
+export {};

package/Footer/CustomFooter.js

@@ -0,0 +1,31 @@
+"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.CustomFooter = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var CustomFooterNavItem_1 = require("../Footer/CustomFooterNavItem");
+var FooterCopyright_1 = require("../Footer/FooterCopyright");
+function CustomFooter(_a) {
+    var data = _a.data;
+    if (!data) {
+        return null;
+    }
+    return (react_1.default.createElement(FooterContainer, { "data-component-name": "Footer/CustomFooter" },
+        data.links.map(function (navItem, index) {
+            return (react_1.default.createElement(CustomFooterNavItem_1.CustomFooterNavItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
+        }),
+        react_1.default.createElement(FooterCopyright_1.FooterCopyright, { copyrightText: data.copyrightText })));
+}
+exports.CustomFooter = CustomFooter;
+var FooterContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n  background-color: var(--footer-background-color);\n  text-align: center;\n  font-family: var(--font-family-base);\n\n  ", " {\n    display: block;\n  }\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n  background-color: var(--footer-background-color);\n  text-align: center;\n  font-family: var(--font-family-base);\n\n  ", " {\n    display: block;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+});
+var templateObject_1;

package/Footer/CustomFooterNavItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ResolvedNavItem } from '@theme/types/portal';
+interface CustomFooterNavItemProps {
+    navItem: ResolvedNavItem;
+}
+export declare function CustomFooterNavItem({ navItem }: CustomFooterNavItemProps): JSX.Element;
+export {};

package/Footer/CustomFooterNavItem.js

@@ -0,0 +1,25 @@
+"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.CustomFooterNavItem = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Link_1 = require("../mocks/Link");
+function CustomFooterNavItem(_a) {
+    var navItem = _a.navItem;
+    var item = navItem;
+    return (react_1.default.createElement(FooterItem, { "data-component-name": "Navbar/NavbarItem" },
+        react_1.default.createElement(FooterLink, { to: item.link },
+            react_1.default.createElement(FooterLabel, null, item.label))));
+}
+exports.CustomFooterNavItem = CustomFooterNavItem;
+var FooterItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  text-align: center;\n  line-height: var(--line-height-base);\n  font-size: var(--navbar-item-font-size);\n  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);\n  font-weight: var(--font-weight-regular);\n"], ["\n  display: inline-block;\n  text-align: center;\n  line-height: var(--line-height-base);\n  font-size: var(--navbar-item-font-size);\n  margin: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);\n  font-weight: var(--font-weight-regular);\n"])));
+var FooterLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: var(--footer-text-color);\n  text-decoration: none;\n"], ["\n  color: var(--footer-text-color);\n  text-decoration: none;\n"])));
+var FooterLabel = 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;

package/Footer/Footer.d.ts

@@ -1,3 +1,7 @@
 /// <reference types="react" />
-import type { FooterConfig } from '@theme/types/portal';
-export declare function Footer({ columns, copyrightText }: FooterConfig): JSX.Element | null;
+import type { NavGroupRecord } from '@theme/types/portal';
+interface FooterProps {
+    data: NavGroupRecord;
+}
+export declare function Footer({ data: { columns, copyrightText } }: FooterProps): JSX.Element | null;
+export {};

package/Footer/Footer.js

@@ -12,9 +12,12 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumns_1 = require("../Footer/FooterColumns");
 var FooterCopyright_1 = require("../Footer/FooterCopyright");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
 function Footer(_a) {
-    var columns = _a.columns, copyrightText = _a.copyrightText;
-    if (!((columns === null || columns === void 0 ? void 0 : columns.length) || copyrightText)) {
+    var _b = _a.data, columns = _b.columns, copyrightText = _b.copyrightText;
+    var footer = (0, hooks_1.useThemeSettings)(constants_1.USER_THEME_ALIAS).footer;
+    if (!((columns === null || columns === void 0 ? void 0 : columns.length) || 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.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import type { FooterColumn as Column } from '@theme/types/portal';
+import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnProps {
-    column: Column;
+    column: ResolvedNavItem;
 }
 export declare function FooterColumn({ column }: FooterColumnProps): JSX.Element;
 export {};

package/Footer/FooterColumn.js

@@ -12,10 +12,11 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../mocks/Link");
 function FooterColumn(_a) {
+    var _b;
     var column = _a.column;
     return (react_1.default.createElement(FooterColumnContainer, { "data-component-name": "Footer/FooterColumn" },
-        react_1.default.createElement(FooterColumnTitle, null, column.group || column.label),
-        column.items.map(function (columnItem, columnItemIndex) {
+        react_1.default.createElement(FooterColumnTitle, null, column.label), (_b = column === null || column === void 0 ? void 0 : column.items) === null || _b === void 0 ? void 0 :
+        _b.map(function (columnItem, columnItemIndex) {
             if (columnItem.type === 'error') {
                 return null;
             }

package/Footer/FooterColumns.d.ts

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

package/Footer/FooterColumns.js

@@ -12,12 +12,12 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var FooterColumn_1 = require("../Footer/FooterColumn");
 function FooterColumns(_a) {
-    var _b = _a.columns, columns = _b === void 0 ? [] : _b;
-    if (!(columns === null || columns === void 0 ? void 0 : columns.length)) {
+    var columns = _a.columns;
+    if (typeof columns === 'string' || typeof columns === 'undefined' || !(columns === null || columns === void 0 ? void 0 : columns.length)) {
         return null;
     }
     return (react_1.default.createElement(exports.FooterColumnsContainer, { "data-component-name": "Footer/FooterColumns" },
-        react_1.default.createElement(exports.FooterRow, null, columns.map(function (column, index) { return (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: index, column: column })); }))));
+        react_1.default.createElement(exports.FooterRow, null, columns.map(function (column, index) { return (react_1.default.createElement(FooterColumn_1.FooterColumn, { key: "".concat(column.label, "_").concat(index), column: column })); }))));
 }
 exports.FooterColumns = FooterColumns;
 exports.FooterColumnsContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 3em 20px 1em 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 1200px;\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"], ["\n  padding: 3em 20px 1em 20px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  max-width: 1200px;\n  margin: 0 auto;\n\n  ", " {\n    padding: 5.625em 20px 3.9375em 20px;\n  }\n\n  ", " {\n    color: black;\n    display: none;\n  }\n"])), function (_a) {

package/Footer/FooterCopyright.d.ts

@@ -1,5 +1,7 @@
 /// <reference types="react" />
-import type { FooterConfig } from '@theme/types/portal';
-export declare function FooterCopyright({ copyrightText, }: {
-    copyrightText?: FooterConfig['copyrightText'];
-}): JSX.Element | null;
+import type { NavGroup } from '@theme/types/portal';
+interface FooterCopyrightProps {
+    copyrightText: NavGroup;
+}
+export declare function FooterCopyright({ copyrightText }: FooterCopyrightProps): JSX.Element | null;
+export {};

package/JsonViewer/JsonViewer.js

@@ -38,7 +38,6 @@ var SamplesPanelControls_1 = require("../SamplesPanelControls");
 var utils_1 = require("../utils");
 var hooks_1 = require("../hooks");
 var CodeBlock_1 = require("../CodeBlock");
-var styled_1 = require("../JsonViewer/styled");
 function JsonComponent(_a) {
     var data = _a.data, jsonSampleExpandLevel = _a.jsonSampleExpandLevel, className = _a.className;
     var node = (0, react_1.useRef)(null);
@@ -109,7 +108,7 @@ function JsonComponent(_a) {
     return (react_1.default.createElement(CopyButton_1.CopyButtonWrapper, { "data-cy": "copy-button", data: data }, renderInner));
 }
 exports.Json = (0, react_1.memo)(JsonComponent);
-exports.JsonViewer = (0, styled_components_1.default)(exports.Json)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), styled_1.jsonStyles);
+exports.JsonViewer = (0, styled_components_1.default)(exports.Json)(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"])));
 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/JsonViewer/index.d.ts

@@ -1,2 +1 @@
 export * from '../JsonViewer/JsonViewer';
-export * from '../JsonViewer/styled';

package/JsonViewer/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../JsonViewer/JsonViewer"), exports);
-__exportStar(require("../JsonViewer/styled"), exports);

package/Markdown/Admonition.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Admonition = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
-var AlertIcon_1 = require("../ui/AlertIcon");
+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" },

package/Markdown/CodeSample/CodeSample.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -25,8 +29,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeSample = void 0;
 var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
 var ClipboardService_1 = require("../../utils/ClipboardService");
-var styled_1 = require("../../Markdown/CodeSample/styled");
 function CodeSample(_a) {
     var rawContent = _a.rawContent, highlighted = _a.highlighted, language = _a.language;
     var langClassName = language ? "language-".concat(language) : '';
@@ -36,11 +40,17 @@ function CodeSample(_a) {
         setIsCopied(true);
         setTimeout(function () { return setIsCopied(false); }, 1500);
     };
-    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")),
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+        react_1.default.createElement(CodeSampleButtonContainer, { onClick: function () { return copyCode(rawContent); } },
+            !isCopied && react_1.default.createElement(CopyCodeButton, { title: "Copy the code snippet" }, "Copy"),
+            isCopied && react_1.default.createElement(DoneIndicator, null, "Copied")),
         react_1.default.createElement("pre", { className: langClassName },
             react_1.default.createElement("code", { className: langClassName, dangerouslySetInnerHTML: { __html: highlighted } }))));
 }
 exports.CodeSample = CodeSample;
+var CodeSampleButtonContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"], ["\n  position: absolute;\n  top: 12px;\n  right: 5px;\n"])));
+var 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"])));
+var 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 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"])));
+var 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"])), CopyCodeButton, DoneIndicator, CopyCodeButton, CodeSampleButtonContainer, CopyCodeButton, darkStyleTokens);
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Markdown/CodeSample/index.d.ts

@@ -1,2 +1 @@
 export * from '../../Markdown/CodeSample/CodeSample';
-export * from '../../Markdown/CodeSample/styled';

package/Markdown/CodeSample/index.js

@@ -15,4 +15,3 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../Markdown/CodeSample/CodeSample"), exports);
-__exportStar(require("../../Markdown/CodeSample/styled"), exports);

package/Navbar/Navbar.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { ResolvedConfigLinks } from '@theme/types/portal';
 interface NavbarProps {
-    menu: React.ReactNode;
+    menu: ResolvedConfigLinks;
     logo: React.ReactNode;
     search: React.ReactNode;
 }
-export declare function Navbar({ menu, logo, search }: NavbarProps): JSX.Element;
+export declare function Navbar({ menu, logo, search }: NavbarProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
 export {};

package/Navbar/Navbar.js

@@ -10,12 +10,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NavbarContainer = exports.Navbar = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+var Navbar_1 = require("../Navbar");
 function Navbar(_a) {
+    var _b;
     var menu = _a.menu, logo = _a.logo, search = _a.search;
+    var settings = (0, hooks_1.useThemeSettings)(constants_1.USER_THEME_ALIAS);
+    var searchSettings = settings.search;
+    var hideSearch = (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.hide) || ((searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) && (searchSettings === null || searchSettings === void 0 ? void 0 : searchSettings.placement) !== 'navbar');
+    if ((_b = settings === null || settings === void 0 ? void 0 : settings.navbar) === null || _b === void 0 ? void 0 : _b.hide) {
+        return null;
+    }
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
         logo,
-        menu,
-        search));
+        react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
+        hideSearch ? null : 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

@@ -7,35 +7,44 @@ 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;
+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 (react_1.default.createElement(NavMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem" },
-        react_1.default.createElement(NavLink, { to: navItem.link, active: isActive },
-            react_1.default.createElement(NavLabel, null, 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

@@ -17,7 +17,7 @@ function NavbarMenu(_a) {
         return null;
     }
     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: index, "data-cy": navItem.label, navItem: navItem });
+        return (react_1.default.createElement(NavbarItem_1.NavbarItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
     })));
 }
 exports.NavbarMenu = NavbarMenu;

package/PageNavigation/NextPageLink.js

@@ -6,14 +6,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NextPageLink = void 0;
 var react_1 = __importDefault(require("react"));
 var usePageData_1 = require("../mocks/hooks/usePageData");
-var ui_1 = require("../ui");
+var hooks_1 = require("../mocks/hooks");
+var constants_1 = require("../mocks/constants");
+var Button_1 = require("../Button/Button");
 function NextPageLink() {
+    var _a, _b, _c;
     var nextPage = ((0, usePageData_1.usePageData)() || {}).nextPage;
-    if (!nextPage) {
+    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).themeSettings;
+    if (!nextPage || ((_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _a === void 0 ? void 0 : _a.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    return (react_1.default.createElement(ui_1.Button, { variant: "outlined", size: "large", to: nextPage.link },
-        "Next to ",
-        nextPage.label));
+    var label = ((_c = (_b = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _b === void 0 ? void 0 : _b.nextPageLink) === null || _c === void 0 ? void 0 : _c.label) || "Next to ".concat(nextPage.label);
+    return (react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "large", to: nextPage.link }, label));
 }
 exports.NextPageLink = NextPageLink;