@redocly/theme 0.1.26 → 0.1.29

package/Navbar/MobileNavbarItem.js

@@ -0,0 +1,102 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavLink = exports.NavMenuItemWithDropdownWrapper = exports.NavMenuItem = exports.MobileNavbarItem = void 0;
+var react_1 = __importStar(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 MobileNavbarDropdown_1 = require("../Navbar/MobileNavbarDropdown");
+function MobileNavbarItem(_a) {
+    var navItem = _a.navItem, className = _a.className;
+    var pathname = (0, react_router_dom_1.useLocation)().pathname;
+    var _b = __read((0, react_1.useState)(false), 2), expandedDropdown = _b[0], setExpandedDropdown = _b[1];
+    var toggleDropdown = function () { return setExpandedDropdown(!expandedDropdown); };
+    if (navItem.link) {
+        var item = navItem;
+        var isActive = pathname === (0, utils_1.withPathPrefix)(item.link);
+        return (react_1.default.createElement(exports.NavMenuItem, { active: isActive, "data-component-name": "Navbar/MobileNavbarItem", className: className },
+            react_1.default.createElement(exports.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(exports.NavMenuItemWithDropdownWrapper, { expanded: expandedDropdown },
+            react_1.default.createElement(exports.NavMenuItem, { active: false, onClick: toggleDropdown, "data-component-name": "Navbar/MobileNavbarItem", className: className },
+                react_1.default.createElement(NavLabel, null, item.label),
+                react_1.default.createElement(ExpandedArrow, null)),
+            react_1.default.createElement(MobileNavbarDropdown_1.MobileNavbarDropdown, { items: item.items })));
+    }
+    return null;
+}
+exports.MobileNavbarItem = MobileNavbarItem;
+var ExpandedArrow = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 5px;\n  height: 5px;\n  border: 1px solid;\n  border-left: none;\n  border-top: none;\n  transition: all 0.3s ease-out;\n"], ["\n  width: 5px;\n  height: 5px;\n  border: 1px solid;\n  border-left: none;\n  border-top: none;\n  transition: all 0.3s ease-out;\n"])));
+exports.NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: left;\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  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n  }\n"], ["\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: left;\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  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  &:not(:last-child) {\n    border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n  }\n"])), function (_a) {
+    var active = _a.active;
+    return (active ? 'var(--navbar-item-active-background-color)' : 'none');
+});
+exports.NavMenuItemWithDropdownWrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n\n  ", " {\n    transform: rotate(", "45deg);\n  }\n\n  ", " {\n    height: ", ";\n    opacity: ", ";\n  }\n\n  ", " {\n    border-bottom: none;\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n\n  ", " {\n    transform: rotate(", "45deg);\n  }\n\n  ", " {\n    height: ", ";\n    opacity: ", ";\n  }\n\n  ", " {\n    border-bottom: none;\n  }\n"])), ExpandedArrow, function (_a) {
+    var expanded = _a.expanded;
+    return (expanded ? '' : '-');
+}, MobileNavbarDropdown_1.MobileDropdownWrapper, function (_a) {
+    var expanded = _a.expanded;
+    return (expanded ? '100%' : '0');
+}, function (_a) {
+    var expanded = _a.expanded;
+    return (expanded ? '1' : '0');
+}, exports.NavMenuItem);
+exports.NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __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, templateObject_5;

package/Navbar/MobileNavbarMenu.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { ResolvedConfigLinks } from '@theme/types/portal';
+export declare function MobileNavbarMenu({ menuItems, closeMenu, }: {
+    menuItems: ResolvedConfigLinks;
+    closeMenu: () => void;
+}): JSX.Element | null;

package/Navbar/MobileNavbarMenu.js

@@ -0,0 +1,32 @@
+"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.MobileNavbarMenu = void 0;
+var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var NavbarItem_1 = require("../Navbar/NavbarItem");
+var MobileNavbarItem_1 = require("../Navbar/MobileNavbarItem");
+var NavbarDropdown_1 = require("../Navbar/NavbarDropdown");
+var utils_1 = require("../utils");
+function MobileNavbarMenu(_a) {
+    var menuItems = _a.menuItems, closeMenu = _a.closeMenu;
+    if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
+        return null;
+    }
+    return (react_1.default.createElement(NavItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
+        react_1.default.createElement(NavItemsContainer, null, menuItems.map(function (navItem, index) {
+            return (react_1.default.createElement(MobileNavbarItem_1.MobileNavbarItem, { key: "".concat(navItem.label, "_").concat(index), "data-cy": navItem.label, navItem: navItem }));
+        })),
+        react_1.default.createElement(NavItemsClosableArea, { onClick: closeMenu })));
+}
+exports.MobileNavbarMenu = MobileNavbarMenu;
+var NavItemsWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 100%;\n  width: 100%;\n  position: fixed;\n  z-index: 201; //more than Search\n  left: 0;\n  top: 0;\n  overflow-x: hidden;\n  transition: 0.5s;\n  display: flex;\n  ", " {\n    & > div {\n      text-align: center;\n      padding: 10px 0;\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"], ["\n  height: 100%;\n  width: 100%;\n  position: fixed;\n  z-index: 201; //more than Search\n  left: 0;\n  top: 0;\n  overflow-x: hidden;\n  transition: 0.5s;\n  display: flex;\n  ", " {\n    & > div {\n      text-align: center;\n      padding: 10px 0;\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"])), NavbarDropdown_1.DropdownWrapper);
+var NavItemsClosableArea = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex: 1;\n  min-width: 50px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.4);\n"], ["\n  display: flex;\n  flex: 1;\n  min-width: 50px;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.4);\n"])));
+var NavItemsContainer = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject([" \n  width: 70%;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--navbar-background-color);\n\n  ", "  { \n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n    }\n    border-radius: 0;\n    padding: 1em 0;\n    width: 100%;  \n  }\n  \n  ", " {\n    display: block;\n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n      border-radius: 0;\n    }\n    ", "  {\n      border-bottom: none;\n    }\n  ", " {\n    background-color: var(--navbar-background-color); \n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"], [" \n  width: 70%;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: var(--navbar-background-color);\n\n  ", "  { \n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n    }\n    border-radius: 0;\n    padding: 1em 0;\n    width: 100%;  \n  }\n  \n  ", " {\n    display: block;\n    &:not(:last-child){\n      border-bottom: 1px solid var(--navbar-item-separator-line-color, #dadada);\n      border-radius: 0;\n    }\n    ", "  {\n      border-bottom: none;\n    }\n  ", " {\n    background-color: var(--navbar-background-color); \n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"])), NavbarItem_1.NavMenuItem, NavbarItem_1.NavMenuItemWithDropdownWrapper, NavbarItem_1.NavMenuItem, NavbarDropdown_1.DropdownWrapper);
+var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/MobileNavbarMenuButton.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const MobileNavbarMenuButton: import("styled-components").StyledComponent<({ onClick, className }: import("../ui/Burger").BurgerProps) => JSX.Element, any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Navbar/MobileNavbarMenuButton.js

@@ -0,0 +1,19 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileNavbarMenuButton = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Burger_1 = require("../ui/Burger");
+exports.MobileNavbarMenuButton = (0, styled_components_1.default)(Burger_1.Burger).attrs(function () { return ({
+    'data-component-name': 'Navbar/MobileNavbarMenuButton',
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n\n  ", " {\n    display: none;\n  }\n"], ["\n  display: block;\n\n  ", " {\n    display: none;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.mediaQueries.medium;
+});
+var templateObject_1;

package/Navbar/Navbar.js

@@ -3,6 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,16 +29,22 @@ 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");
+var useMobileMenu_1 = require("../hooks/useMobileMenu");
+var MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
+var MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
 function Navbar(_a) {
-    var _b;
     var menu = _a.menu, logo = _a.logo, search = _a.search;
-    var settings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME);
-    var searchSettings = settings.search;
+    var _b = __read((0, useMobileMenu_1.useMobileMenu)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), searchSettings = _c.search, navbar = _c.navbar;
     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) {
+    if (navbar === null || navbar === void 0 ? void 0 : navbar.hide) {
         return null;
     }
+    var openMobileMenu = function () { return setIsOpen(true); };
+    var closeMobileMenu = function () { return setIsOpen(false); };
     return (react_1.default.createElement(exports.NavbarContainer, { "data-component-name": "Navbar/Navbar" },
+        react_1.default.createElement(MobileNavbarMenuButton_1.MobileNavbarMenuButton, { onClick: openMobileMenu }),
+        isOpen && react_1.default.createElement(MobileNavbarMenu_1.MobileNavbarMenu, { closeMenu: closeMobileMenu, menuItems: menu }),
         logo,
         react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
         hideSearch ? null : search));

package/Navbar/NavbarDropdown.js

@@ -17,5 +17,5 @@ function NavbarDropdown(_a) {
         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"])));
+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 0;\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 0;\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,7 +1,13 @@
 /// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
-interface NavbarItemProps {
+import { Link } from '../mocks/Link';
+export interface NavbarItemProps {
     navItem: ResolvedNavItem;
+    className?: string;
 }
-export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element | null;
-export {};
+export declare function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element | null;
+export declare const NavMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavMenuItem: import("styled-components").StyledComponent<"li", any, {
+    active?: boolean | undefined;
+}, never>;
+export declare const NavLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;

package/Navbar/NavbarItem.js

@@ -7,7 +7,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarItem = void 0;
+exports.NavLink = exports.NavMenuItem = exports.NavMenuItemWithDropdownWrapper = 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");
@@ -15,31 +15,31 @@ var Link_1 = require("../mocks/Link");
 var utils_1 = require("../mocks/utils");
 var NavbarDropdown_1 = require("../Navbar/NavbarDropdown");
 function NavbarItem(_a) {
-    var navItem = _a.navItem;
+    var navItem = _a.navItem, className = _a.className;
     var pathname = (0, react_router_dom_1.useLocation)().pathname;
     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 },
+        return (react_1.default.createElement(exports.NavMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
+            react_1.default.createElement(exports.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" },
+        return (react_1.default.createElement(exports.NavMenuItemWithDropdownWrapper, null,
+            react_1.default.createElement(exports.NavMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
                 react_1.default.createElement(NavLabel, null, item.label)),
             react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
     }
     return null;
 }
 exports.NavbarItem = NavbarItem;
-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) {
+exports.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);
+exports.NavMenuItem = styled_components_1.default.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 8px 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: 8px 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_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
+exports.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) {

package/Navbar/NavbarMenu.js

@@ -11,9 +11,10 @@ exports.NavbarMenu = void 0;
 var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var NavbarItem_1 = require("../Navbar/NavbarItem");
+var utils_1 = require("../utils");
 function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
-    if (!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)) {
+    if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map(function (navItem, index) {
@@ -21,7 +22,7 @@ function NavbarMenu(_a) {
     })));
 }
 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) {
+var NavItemsContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0 7px;\n  padding: 0;\n  display: none;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  flex: 1;\n\n  ", " {\n    display: flex;\n  }\n"], ["\n  list-style: none;\n  margin: 0 7px;\n  padding: 0;\n  display: none;\n  flex-wrap: nowrap;\n  align-items: center;\n  justify-content: flex-end;\n  flex: 1;\n\n  ", " {\n    display: flex;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 });

package/PageNavigation/NextPageLink.js

@@ -14,13 +14,13 @@ 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 _a;
     var nextPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).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)) {
+    var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
+    if (!nextPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    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);
+    var label = ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.label) || "Next to ".concat(nextPage.label);
     return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: nextPage.link, "data-component-name": "PageNavigation/NextPageLink" }, label));
 }
 exports.NextPageLink = NextPageLink;

package/PageNavigation/PreviousPageLink.js

@@ -14,13 +14,13 @@ var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
 var Button_1 = require("../Button/Button");
 function PreviousPageLink() {
-    var _a, _b, _c;
+    var _a;
     var prevPage = ((0, hooks_1.useSidebarSiblingsData)() || {}).prevPage;
-    var themeSettings = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).themeSettings;
-    if (!prevPage || ((_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.navigation) === null || _a === void 0 ? void 0 : _a.hide)) {
+    var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
+    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide)) {
         return react_1.default.createElement("div", null, "\u00A0");
     }
-    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) || "Back to ".concat(prevPage.label);
+    var label = ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.nextPageLink) === null || _a === void 0 ? void 0 : _a.label) || "Back to ".concat(prevPage.label);
     return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
 }
 exports.PreviousPageLink = PreviousPageLink;

package/Panel/PanelComponent.js

@@ -26,6 +26,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -39,8 +55,8 @@ var PanelHeader_1 = require("../Panel/PanelHeader");
 var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
 function PanelComponent(_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? true : _b, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle;
-    var _c = (0, react_1.useState)(expanded), isExpanded = _c[0], setExpanded = _c[1];
-    var _d = (0, react_1.useState)(false), animate = _d[0], setAnimate = _d[1];
+    var _c = __read((0, react_1.useState)(expanded), 2), isExpanded = _c[0], setExpanded = _c[1];
+    var _d = __read((0, react_1.useState)(false), 2), animate = _d[0], setAnimate = _d[1];
     var toggle = function (_a) {
         var target = _a.target;
         if (target instanceof HTMLAnchorElement)

package/Profile/Profile.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface ProfileProps {
+    name: string;
+    imageUrl?: string;
+    color?: string;
+    onClick?: () => void;
+}
+export declare const Profile: React.NamedExoticComponent<ProfileProps>;

package/Profile/Profile.js

@@ -0,0 +1,60 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = void 0;
+var react_1 = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var utils_1 = require("../utils");
+var RANDOM_BG_COLOR = (0, utils_1.getRandomColor)();
+function ProfileComponent(_a) {
+    var _b;
+    var name = _a.name, imageUrl = _a.imageUrl, onClick = _a.onClick, color = _a.color;
+    if (imageUrl) {
+        return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+            react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+            imageUrl && (react_1.default.createElement(AvatarWrapper, null,
+                react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
+    }
+    var avatarLetters = "".concat(name.charAt(0).toUpperCase()).concat(((_b = name.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.charAt(0).toUpperCase()) || '');
+    return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+        react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+        react_1.default.createElement(AvatarWrapper, { background: RANDOM_BG_COLOR },
+            react_1.default.createElement("span", null, avatarLetters))));
+}
+exports.Profile = (0, react_1.memo)(ProfileComponent);
+var ProfileWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n"])));
+var StyledUserName = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), function (_a) {
+    var color = _a.color;
+    return color || 'var(--color-content)';
+});
+var AvatarWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  font-size: 1.25rem;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n  user-select: none;\n  border-radius: 50%;\n  justify-content: center;\n  margin-left: 16px;\n\n  ", "\n\n  & > img {\n    color: transparent;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    text-align: center;\n    text-indent: 10000px;\n  }\n"], ["\n  width: 40px;\n  height: 40px;\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  font-size: 1.25rem;\n  align-items: center;\n  flex-shrink: 0;\n  line-height: 1;\n  user-select: none;\n  border-radius: 50%;\n  justify-content: center;\n  margin-left: 16px;\n\n  ", "\n\n  & > img {\n    color: transparent;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    text-align: center;\n    text-indent: 10000px;\n  }\n"])), function (_a) {
+    var background = _a.background;
+    return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    background-color: ", ";\n    span {\n      color: ", ";\n      filter: invert(100%);\n    }\n  "], ["\n    background-color: ", ";\n    span {\n      color: ", ";\n      filter: invert(100%);\n    }\n  "])), background, background);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Profile/index.d.ts

@@ -0,0 +1,2 @@
+export { Profile } from './Profile';
+export type { ProfileProps } from './Profile';

package/Profile/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = void 0;
+var Profile_1 = require("./Profile");
+Object.defineProperty(exports, "Profile", { enumerable: true, get: function () { return Profile_1.Profile; } });

package/Search/Autocomplete.js

@@ -37,6 +37,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -50,8 +66,8 @@ var Popover_1 = require("../Search/Popover");
 function Autocomplete(_a) {
     var placeholder = _a.placeholder, value = _a.value, items = _a.items, change = _a.change, select = _a.select, renderItem = _a.renderItem, children = _a.children;
     var location = (0, react_router_dom_1.useLocation)();
-    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
-    var _c = (0, react_1.useState)(-1), activeIdx = _c[0], setActiveIdx = _c[1];
+    var _b = __read((0, react_1.useState)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = __read((0, react_1.useState)(-1), 2), activeIdx = _c[0], setActiveIdx = _c[1];
     var open = function () { return setIsOpen(true); };
     var close = function () {
         setIsOpen(false);

package/Search/utils.js

@@ -26,6 +26,22 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -36,7 +52,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var highlight = function (text) {
     if (!Array.isArray(text))
         return text;
-    var pre = text[0], entry = text[1], suf = text[2];
+    var _a = __read(text, 3), pre = _a[0], entry = _a[1], suf = _a[2];
     return (React.createElement(React.Fragment, null,
         pre,
         React.createElement(Strong, null, entry),

package/Sidebar/SidebarLayout.js

@@ -3,6 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __read = (this && this.__read) || function (o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -19,7 +35,7 @@ var constants_1 = require("../mocks/constants");
 var SidebarSearch_1 = require("../Search/SidebarSearch");
 function SidebarLayout(_a) {
     var versions = _a.versions, menu = _a.menu;
-    var _b = (0, useMobileMenu_1.useMobileMenu)(), isOpen = _b[0], setIsOpen = _b[1];
+    var _b = __read((0, useMobileMenu_1.useMobileMenu)(), 2), isOpen = _b[0], setIsOpen = _b[1];
     var toggleMenu = function () { return setIsOpen(!isOpen); };
     var _c = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME), search = _c.search, sidebar = _c.sidebar;
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {

package/SourceCode/SourceCode.d.ts

@@ -1,11 +1,17 @@
 /// <reference types="react" />
-export interface SourceCodeProps {
+interface CommonCodeProps {
+    withLineNumbers?: boolean;
+    startLineNumber?: number;
+}
+export interface SourceCodeProps extends CommonCodeProps {
     lang: string;
     source?: string;
     externalSource?: ExternalSource;
     withCopyButton?: boolean;
     dataTestId?: string;
 }
+interface CodeProps extends Required<Pick<SourceCodeProps, 'lang' | 'source' | 'dataTestId'>>, CommonCodeProps {
+}
 export interface Sample {
     lang: string;
     label?: string;
@@ -20,5 +26,6 @@ export interface ExternalSource {
     properties?: any;
     operation?: any;
 }
-export declare function Code({ source, lang, dataTestId, }: Required<Omit<SourceCodeProps, 'externalSource' | 'withCopyButton'>>): JSX.Element;
-export declare function SourceCode({ lang, source, externalSource, withCopyButton, dataTestId, }: SourceCodeProps): JSX.Element;
+export declare function Code({ source, lang, dataTestId, withLineNumbers, startLineNumber, }: CodeProps): JSX.Element;
+export declare function SourceCode({ lang, source, externalSource, withCopyButton, dataTestId, withLineNumbers, startLineNumber, }: SourceCodeProps): JSX.Element;
+export {};