@redocly/theme 0.2.2 → 0.4.0

package/Navbar/MobileNavbarMenu.js

@@ -19,14 +19,14 @@ function MobileNavbarMenu(_a) {
     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(NavbarItemsWrapper, { "data-component-name": "Navbar/MobileNavbarMenu" },
+        react_1.default.createElement(NavbarItemsContainer, 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 })));
+        react_1.default.createElement(NavbarItemsClosableArea, { 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 NavbarItemsWrapper = 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 NavbarItemsClosableArea = 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 NavbarItemsContainer = 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\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\n  ", " {\n    background-color: var(--navbar-background-color);\n    width: 100%;\n    padding: 0;\n    position: relative;\n  }\n"])), NavbarItem_1.NavbarMenuItem, NavbarItem_1.NavbarMenuItemWithDropdownWrapper, NavbarItem_1.NavbarMenuItem, NavbarDropdown_1.DropdownWrapper);
 var templateObject_1, templateObject_2, templateObject_3;

package/Navbar/Navbar.d.ts

@@ -8,4 +8,5 @@ interface NavbarProps {
 }
 export declare function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null;
 export declare const NavbarContainer: import("styled-components").StyledComponent<"nav", any, {}, never>;
+export declare const NavbarRow: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/Navbar/Navbar.js

@@ -23,7 +23,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarContainer = exports.Navbar = void 0;
+exports.NavbarRow = 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");
@@ -32,6 +32,7 @@ var Navbar_1 = require("../Navbar");
 var useMobileMenu_1 = require("../hooks/useMobileMenu");
 var MobileNavbarMenuButton_1 = require("../Navbar/MobileNavbarMenuButton");
 var MobileNavbarMenu_1 = require("../Navbar/MobileNavbarMenu");
+var ColorModeSwitcher_1 = require("../ColorModeSwitcher/ColorModeSwitcher");
 function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search, profile = _a.profile;
     var _b = __read((0, useMobileMenu_1.useMobileMenu)(false), 2), isOpen = _b[0], setIsOpen = _b[1];
@@ -45,17 +46,20 @@ function Navbar(_a) {
     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,
-        profile));
+        react_1.default.createElement(exports.NavbarRow, null,
+            logo,
+            react_1.default.createElement(Navbar_1.NavbarMenu, { menuItems: menu }),
+            hideSearch ? null : search,
+            profile,
+            react_1.default.createElement(ColorModeSwitcher_1.ColorModeSwitcher, null))));
 }
 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) {
+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  align-items: center;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  background: var(--navbar-background-color);\n  font-family: var(--navbar-item-font-family);\n\n  ", " {\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  align-items: center;\n  flex-shrink: 0;\n\n  font-size: 0.875rem;\n  position: sticky;\n  top: 0;\n  z-index: 200;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  background: var(--navbar-background-color);\n  font-family: var(--navbar-item-font-family);\n\n  ", " {\n    font-size: 1rem;\n  }\n\n  ", " {\n    background: transparent;\n    display: none;\n    > :not(a, img) {\n      display: none !important;\n    }\n    img {\n      padding: 0;\n      margin: 0;\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 }, function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.print;
 });
-var templateObject_1;
+exports.NavbarRow = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 auto;\n  width: 100%;\n\n  max-width: var(--navbar-container-max-width);\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin: 0 auto;\n  width: 100%;\n\n  max-width: var(--navbar-container-max-width);\n"])));
+var templateObject_1, templateObject_2;

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 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"])));
+exports.DropdownWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: none;\n  position: absolute;\n  background: var(--navbar-dropdown-background);\n  border: var(--navbar-item-border);\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-dropdown-background);\n  border: var(--navbar-item-border);\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

@@ -6,8 +6,8 @@ export interface NavbarItemProps {
     className?: string;
 }
 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, {
+export declare const NavbarMenuItemWithDropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const NavbarLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
+export declare const NavbarMenuItem: 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.NavLink = exports.NavMenuItem = exports.NavMenuItemWithDropdownWrapper = exports.NavbarItem = void 0;
+exports.NavbarMenuItem = exports.NavbarLink = exports.NavbarMenuItemWithDropdownWrapper = 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");
@@ -20,31 +20,34 @@ function NavbarItem(_a) {
     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/NavbarItem", className: className },
-            react_1.default.createElement(exports.NavLink, { to: item.link, active: isActive },
-                react_1.default.createElement(NavLabel, null, item.label))));
+        return (react_1.default.createElement(exports.NavbarMenuItem, { active: isActive, "data-component-name": "Navbar/NavbarItem", className: className },
+            react_1.default.createElement(exports.NavbarLink, { to: item.link, active: isActive },
+                react_1.default.createElement(NavbarLabel, null, item.label))));
     }
     if (navItem.items) {
         var item = navItem;
-        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)),
+        return (react_1.default.createElement(exports.NavbarMenuItemWithDropdownWrapper, null,
+            react_1.default.createElement(exports.NavbarMenuItem, { active: false, "data-component-name": "Navbar/NavbarItem", className: className },
+                react_1.default.createElement(NavbarLabel, null, item.label)),
             react_1.default.createElement(NavbarDropdown_1.NavbarDropdown, { items: item.items })));
     }
     return null;
 }
 exports.NavbarItem = NavbarItem;
-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');
-});
-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) {
+exports.NavbarMenuItemWithDropdownWrapper = 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.NavbarLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
     var active = _a.active;
     return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-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_4 || (templateObject_4 = __makeTemplateObject(["\n  cursor: pointer;\n  vertical-align: middle;\n"], ["\n  cursor: pointer;\n  vertical-align: middle;\n"])));
+exports.NavbarMenuItem = styled_components_1.default.li(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  margin-left: var(--navbar-item-margin-horizontal);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  color: ", ";\n  &:hover {\n    color: var(--navbar-item-hover-text-color);\n    text-decoration: var(--navbar-item-hover-text-decoration);\n    background: var(--navbar-item-hover-background-color);\n    ", " {\n      color: var(--navbar-item-hover-text-color);\n      text-decoration: var(--navbar-item-hover-text-decoration);\n    }\n  }\n"], ["\n  display: inline-block;\n  padding: var(--navbar-item-paddin-vertical) var(--navbar-item-padding-horizontal);\n  margin-left: var(--navbar-item-margin-horizontal);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n  color: ", ";\n  &:hover {\n    color: var(--navbar-item-hover-text-color);\n    text-decoration: var(--navbar-item-hover-text-decoration);\n    background: var(--navbar-item-hover-background-color);\n    ", " {\n      color: var(--navbar-item-hover-text-color);\n      text-decoration: var(--navbar-item-hover-text-decoration);\n    }\n  }\n"])), function (_a) {
+    var active = _a.active;
+    return active && 'var(--navbar-item-active-background-color)';
+}, function (_a) {
+    var active = _a.active;
+    return active && 'var(--navbar-item-active-text-color)';
+}, exports.NavbarLink);
+var NavbarLabel = 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.js

@@ -14,7 +14,7 @@ var NavbarItem_1 = require("../Navbar/NavbarItem");
 var utils_1 = require("../utils");
 function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
-    if ((0, utils_1.isPrimitive)(menuItems) || (0, utils_1.isEmptyArray)(menuItems)) {
+    if ((0, utils_1.isPrimitive)(menuItems)) {
         return null;
     }
     return (react_1.default.createElement(NavItemsContainer, { "data-component-name": "Navbar/NavbarMenu" }, menuItems.map(function (navItem, index) {
@@ -22,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 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 NavItemsContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0 var(--navbar-item-margin-horizontal);\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 var(--navbar-item-margin-horizontal);\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/NavbarLogo/NavbarLogo.js

@@ -20,5 +20,5 @@ function NavbarLogo(_a) {
     return logo.link ? react_1.default.createElement(Link_1.Link, { to: logo.link }, img) : img;
 }
 exports.NavbarLogo = NavbarLogo;
-var NavLogo = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--logo-max-width);\n  max-height: var(--logo-max-height);\n  height: var(--logo-height);\n  margin: var(--logo-margin);\n"], ["\n  max-width: var(--logo-max-width);\n  max-height: var(--logo-max-height);\n  height: var(--logo-height);\n  margin: var(--logo-margin);\n"])));
+var NavLogo = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: var(--navbar-logo-max-width);\n  max-height: var(--navbar-logo-max-height);\n  height: var(--navbar-logo-height);\n  margin: var(--navbar-logo-margin);\n"], ["\n  max-width: var(--navbar-logo-max-width);\n  max-height: var(--navbar-logo-max-height);\n  height: var(--navbar-logo-height);\n  margin: var(--navbar-logo-margin);\n"])));
 var templateObject_1;

package/OperationBadge/OperationBadge.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 exports.OperationBadge = styled_components_1.default.span.attrs(function (props) { return ({
     className: "operation-type ".concat(props.type),
     'data-component-name': 'OperationBadge/OperationBadge',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic,\n  &.schema {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic,\n  &.schema {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--badge-http-font-size);\n  font-family: var(--badge-http-font-family);\n  font-weight: var(--badge-http-font-weight);\n  line-height: var(--badge-http-line-height);\n  color: var(--badge-http-text-color);\n  background-color: var(--badge-background-color);\n  border-radius: var(--badge-http-border-radius);\n  width: 58px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic,\n  &.schema {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-size: var(--badge-http-font-size);\n  font-family: var(--badge-http-font-family);\n  font-weight: var(--badge-http-font-weight);\n  line-height: var(--badge-http-line-height);\n  color: var(--badge-http-text-color);\n  background-color: var(--badge-background-color);\n  border-radius: var(--badge-http-border-radius);\n  width: 58px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic,\n  &.schema {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"])));
 var templateObject_1;

package/PageNavigation/PageNavigation.d.ts

@@ -1,2 +1,7 @@
 /// <reference types="react" />
-export declare function PageNavigation(): JSX.Element | null;
+declare type PageNavigationProps = {
+    showPrevButton?: boolean;
+    showNextButton?: boolean;
+};
+export declare function PageNavigation({ showPrevButton, showNextButton, }: PageNavigationProps): JSX.Element | null;
+export {};

package/PageNavigation/PageNavigation.js

@@ -14,14 +14,15 @@ var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
 var NextPageLink_1 = require("../PageNavigation/NextPageLink");
 var hooks_1 = require("../mocks/hooks");
 var constants_1 = require("../mocks/constants");
-function PageNavigation() {
+function PageNavigation(_a) {
+    var _b = _a.showPrevButton, showPrevButton = _b === void 0 ? true : _b, _c = _a.showNextButton, showNextButton = _c === void 0 ? true : _c;
     var navigation = (0, hooks_1.useThemeSettings)(constants_1.DEFAULT_THEME_NAME).navigation;
     if (navigation === null || navigation === void 0 ? void 0 : navigation.hide) {
         return null;
     }
     return (react_1.default.createElement(PageNavigationWrapper, { "data-component-name": "PageNavigation/PageNavigation" },
-        react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
-        react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
+        showPrevButton && react_1.default.createElement(PreviousPageLink_1.PreviousPageLink, null),
+        showNextButton && react_1.default.createElement(NextPageLink_1.NextPageLink, null)));
 }
 exports.PageNavigation = PageNavigation;
 var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0;\n"])));

package/Panel/Panel.d.ts

@@ -1,4 +1,5 @@
 import { PanelComponent } from '../Panel/PanelComponent';
 export declare const Panel: import("styled-components").StyledComponent<typeof PanelComponent, any, {
     'data-component-name': string;
-}, "data-component-name">;
+    className: string;
+}, "className" | "data-component-name">;

package/Panel/Panel.js

@@ -12,7 +12,12 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var PanelHeader_1 = require("../Panel/PanelHeader");
 var PanelBody_1 = require("../Panel/PanelBody");
 var PanelComponent_1 = require("../Panel/PanelComponent");
-exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent).attrs(function () { return ({
-    'data-component-name': 'Panel/Panel',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"], ["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
+var ShelfIcon_1 = require("../icons/ShelfIcon");
+exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent).attrs(function (_a) {
+    var className = _a.className;
+    return ({
+        'data-component-name': 'Panel/Panel',
+        className: className || 'panel-default',
+    });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--panel-background-color);\n  color: var(--panel-text-color);\n  font-family: var(--panel-font-family-local);\n  font-size: var(--panel-font-size-local);\n  font-weight: var(--panel-font-weight-local);\n  border: var(--panel-border-local);\n  border-radius: var(--panel-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  ", " {\n    ", " {\n      fill: var(--panel-chevron-icon-color); // ?????\n    }\n  }\n\n  &:not(:last-child) {\n    margin-bottom: var(--panel-gap-vertical);\n  }\n"], ["\n  background-color: var(--panel-background-color);\n  color: var(--panel-text-color);\n  font-family: var(--panel-font-family-local);\n  font-size: var(--panel-font-size-local);\n  font-weight: var(--panel-font-weight-local);\n  border: var(--panel-border-local);\n  border-radius: var(--panel-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  ", " {\n    ", " {\n      fill: var(--panel-chevron-icon-color); // ?????\n    }\n  }\n\n  &:not(:last-child) {\n    margin-bottom: var(--panel-gap-vertical);\n  }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, ShelfIcon_1.ShelfIcon);
 var templateObject_1;

package/Panel/PanelBody.js

@@ -33,7 +33,7 @@ var showPanel = (0, styled_components_1.keyframes)(templateObject_1 || (template
 var showPanelAnimation = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  animation: ", " 0.2s;\n"], ["\n  animation: ", " 0.2s;\n"])), showPanel);
 exports.PanelBody = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Panel/PanelBody',
-}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"], ["\n  ", ";\n  ", ";\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: var(--panels-border-radius);\n  border-bottom-left-radius: var(--panels-border-radius);\n  background-color: var(--panels-background-color);\n"])), function (_a) {
+}); })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", ";\n  ", ";\n\n  background-color: var(--panel-body-background-color);\n\n  font-family: var(--panel-body-font-family-local);\n  font-size: var(--panel-body-font-size-local);\n  font-weight: var(--panel-body-font-weight-local);\n  border: var(--panel-body-border-local);\n  padding: var(--panel-body-padding-local);\n  color: var(--panel-body-text-color);\n\n  border-top-left-radius: var(--panel-border-radius);\n  border-top-right-radius: var(--panel-border-radius);\n  border-bottom-right-radius: var(--panel-border-radius);\n  border-bottom-left-radius: var(--panel-border-radius);\n"], ["\n  ", ";\n  ", ";\n\n  background-color: var(--panel-body-background-color);\n\n  font-family: var(--panel-body-font-family-local);\n  font-size: var(--panel-body-font-size-local);\n  font-weight: var(--panel-body-font-weight-local);\n  border: var(--panel-body-border-local);\n  padding: var(--panel-body-padding-local);\n  color: var(--panel-body-text-color);\n\n  border-top-left-radius: var(--panel-border-radius);\n  border-top-right-radius: var(--panel-border-radius);\n  border-bottom-right-radius: var(--panel-border-radius);\n  border-bottom-left-radius: var(--panel-border-radius);\n"])), function (_a) {
     var animate = _a.animate;
     return animate && showPanelAnimation;
 }, function (_a) {

package/Panel/PanelComponent.d.ts

@@ -1,10 +1,11 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { PanelHeaderProps } from '../Panel/PanelHeader';
 export interface PanelComponentProps {
     expanded?: boolean;
     className?: string;
     header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
     onToggle?: (expanded: boolean) => void;
+    description?: React.ReactNode;
 }
-export declare function PanelComponent({ expanded, header, className, children, onToggle, }: PropsWithChildren<PanelComponentProps>): JSX.Element;
+export declare function PanelComponent({ expanded, header, className, children, onToggle, description, }: PropsWithChildren<PanelComponentProps>): JSX.Element;
 export declare const InlineBox: import("styled-components").StyledComponent<"div", any, {}, never>;

package/Panel/PanelComponent.js

@@ -54,7 +54,7 @@ var PanelBody_1 = require("../Panel/PanelBody");
 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 _b = _a.expanded, expanded = _b === void 0 ? true : _b, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle, description = _a.description;
     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) {
@@ -71,7 +71,8 @@ function PanelComponent(_a) {
             (typeof header === 'function' ? (header({ expanded: isExpanded, toggle: toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-cy": "panel-header", onClick: toggle, expanded: isExpanded },
                 react_1.default.createElement(exports.InlineBox, null,
                     react_1.default.createElement(PanelHeaderTitle_1.PanelHeaderTitle, { "data-cy": "title" }, header),
-                    react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }))))),
+                    react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }),
+                    description)))),
         isExpanded && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
 }
 exports.PanelComponent = PanelComponent;

package/Panel/PanelHeader.d.ts

@@ -1,6 +1,6 @@
 import { BaseSyntheticEvent } from 'react';
 export interface PanelHeaderProps {
-    expanded: boolean;
+    expanded?: boolean;
     disabled?: boolean;
     toggle?: (e: BaseSyntheticEvent) => void;
 }

package/Panel/PanelHeader.js

@@ -11,12 +11,12 @@ exports.PanelHeader = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.PanelHeader = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Panel/PanelHeader',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: nowrap;\n  cursor: pointer;\n\n  border-top-left-radius: var(--panels-border-radius);\n  border-top-right-radius: var(--panels-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"])), function (_a) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: var(--panel-heading-white-space-local);\n\n  cursor: pointer;\n\n  line-height: var(--panel-heading-line-height-local);\n  font-size: var(--panel-heading-font-size-local);\n  padding: var(--panel-heading-padding-local);\n  border: var(--panel-heading-border);\n  background-color: var(--panel-heading-background-color);\n\n  border-top-left-radius: var(--panel-border-radius);\n  border-top-right-radius: var(--panel-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"], ["\n  position: relative;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  white-space: var(--panel-heading-white-space-local);\n\n  cursor: pointer;\n\n  line-height: var(--panel-heading-line-height-local);\n  font-size: var(--panel-heading-font-size-local);\n  padding: var(--panel-heading-padding-local);\n  border: var(--panel-heading-border);\n  background-color: var(--panel-heading-background-color);\n\n  border-top-left-radius: var(--panel-border-radius);\n  border-top-right-radius: var(--panel-border-radius);\n  border-bottom-right-radius: ", ";\n  border-bottom-left-radius: ", ";\n\n  pointer-events: ", ";\n"])), function (_a) {
     var expanded = _a.expanded;
-    return (expanded ? '0' : 'var(--panels-border-radius)');
+    return (expanded ? '0' : 'var(--panel-border-radius)');
 }, function (_a) {
     var expanded = _a.expanded;
-    return (expanded ? '0' : 'var(--panels-border-radius)');
+    return (expanded ? '0' : 'var(--panel-border-radius)');
 }, function (_a) {
     var disabled = _a.disabled;
     return (disabled ? 'none' : 'auto');

package/Panel/PanelHeaderTitle.js

@@ -11,5 +11,5 @@ exports.PanelHeaderTitle = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.PanelHeaderTitle = styled_components_1.default.span.attrs(function () { return ({
     'data-component-name': 'Panel/PanelHeaderTitle',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"], ["\n  line-height: 1;\n  margin-right: 5px;\n  font-weight: 700;\n  /* changed from var(--color-content-inverse) to var(--color-content)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--color-content);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-right: 5px;\n  font-weight: var(--panel-heading-font-weight-local);\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  /* changed from var(--text-color-inverse) to var(--text-color)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--panel-heading-text-color);\n"], ["\n  margin-right: 5px;\n  font-weight: var(--panel-heading-font-weight-local);\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  /* changed from var(--text-color-inverse) to var(--text-color)\n     should change several components in openapi/graphql reference-docs to use inverse color\n   */\n  color: var(--panel-heading-text-color);\n"])));
 var templateObject_1;

package/Panel/index.d.ts

@@ -1,6 +1,3 @@
-export * from '../Panel/CodePanel';
-export * from '../Panel/ContentPanel';
-export * from '../Panel/DarkHeader';
 export * from '../Panel/Panel';
 export * from '../Panel/PanelBody';
 export * from '../Panel/PanelComponent';

package/Panel/index.js

@@ -14,9 +14,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../Panel/CodePanel"), exports);
-__exportStar(require("../Panel/ContentPanel"), exports);
-__exportStar(require("../Panel/DarkHeader"), exports);
 __exportStar(require("../Panel/Panel"), exports);
 __exportStar(require("../Panel/PanelBody"), exports);
 __exportStar(require("../Panel/PanelComponent"), exports);

package/Profile/Profile.js

@@ -47,7 +47,7 @@ function ProfileComponent(_a) {
             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  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n  padding-left: calc(var(--sidebar-spacing-horizontal) * 2);\n"])));
+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  padding: 0 var(--navbar-item-padding-horizontal);\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: auto;\n  padding: 0 var(--navbar-item-padding-horizontal);\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(--navbar-text-color)';

package/SamplesPanelControls/SamplesPanelControls.js

@@ -12,14 +12,16 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var CodeBlock_1 = require("../CodeBlock");
 exports.SamplesControlButton = styled_components_1.default.button.attrs(function () { return ({
     'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"], ["\n  background-color: var(--samples-panel-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--global-border-radius);\n  height: 20px;\n  color: var(--color-content-inverse);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--samples-panel-controls-hover-background-color);\n  }\n"])), function (_a) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: var(--panel-samples-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--border-radius);\n  height: 20px;\n  color: var(--panel-samples-controls-text-color);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--panel-samples-controls-hover-background-color);\n  }\n"], ["\n  background-color: var(--panel-samples-controls-background-color);\n  border: 0;\n  outline: 0;\n  border-radius: var(--border-radius);\n  height: 20px;\n  color: var(--panel-samples-controls-text-color);\n  font-size: 12px;\n  line-height: 12px;\n  cursor: pointer;\n  padding: 1px 6px;\n  min-width: 90px;\n\n  ", " {\n    padding: 2px 20px;\n  }\n\n  :hover,\n  :focus {\n    background-color: var(--panel-samples-controls-hover-background-color);\n  }\n"])), function (_a) {
+    var _b;
     var theme = _a.theme;
-    return theme.mediaQueries.small;
+    return (_b = theme.mediaQueries) === null || _b === void 0 ? void 0 : _b.small;
 });
 exports.SampleControls = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"], ["\n  padding: 10px 0;\n  opacity: 0.7;\n  transition: opacity 0.3s ease;\n  text-align: right;\n\n  &:focus-within {\n    opacity: 1;\n  }\n\n  > div,\n  > ", " {\n    /* can have tooltip wrapper div also */\n    margin-top: 5px;\n    margin-left: 10px;\n\n    ", " {\n      margin-top: 0;\n    }\n\n    &:first-child {\n      margin-left: 0;\n    }\n  }\n"])), exports.SamplesControlButton, function (_a) {
+    var _b;
     var theme = _a.theme;
-    return theme.mediaQueries.small;
+    return (_b = theme.mediaQueries) === null || _b === void 0 ? void 0 : _b.small;
 });
 exports.SampleControlsWrap = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &:hover ", " {\n    opacity: 1;\n  }\n"], ["\n  &:hover ", " {\n    opacity: 1;\n  }\n"])), exports.SampleControls);
-exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre'))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\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  white-space: var(--code-wrap, pre);\n"], ["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\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  white-space: var(--code-wrap, pre);\n"])));
+exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre'))(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--border-radius);\n  background-color: var(--panel-samples-controls-background-color);\n  color: var(--text-color-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"], ["\n  overflow-x: auto;\n  margin: 0;\n  font-family: var(--code-font-family);\n  padding: 20px;\n  border-radius: var(--border-radius);\n  background-color: var(--panel-samples-controls-background-color);\n  color: var(--text-color-inverse);\n  font-size: var(--code-font-size);\n  white-space: var(--code-wrap, pre);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Search/Autocomplete.js

@@ -118,5 +118,5 @@ exports.Autocomplete = Autocomplete;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
 var AutocompleteBox = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  position: relative;\n  z-index: 1;\n"], ["\n  display: flex;\n  align-items: center;\n  position: relative;\n  z-index: 1;\n"])));
 var Overlay = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1;\n"])));
-var Message = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 24px;\n  color: var(--color-content);\n"], ["\n  padding: 24px;\n  color: var(--color-content);\n"])));
+var Message = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: 24px;\n  color: var(--text-color);\n"], ["\n  padding: 24px;\n  color: var(--text-color);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Search/Input.js

@@ -11,5 +11,5 @@ exports.FormInput = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.FormInput = styled_components_1.default.input.attrs(function () { return ({
     'data-component-name': 'Search/Input',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--search-input-background-color);\n  border-radius: var(--search-input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--search-input-text-color);\n  font-size: var(--search-input-font-size);\n  font-family: var(--search-input-font-family);\n  line-height: var(--search-input-line-height);\n\n  ::placeholder {\n    color: var(--search-input-text-color);\n  }\n"], ["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--search-input-background-color);\n  border-radius: var(--search-input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--search-input-text-color);\n  font-size: var(--search-input-font-size);\n  font-family: var(--search-input-font-family);\n  line-height: var(--search-input-line-height);\n\n  ::placeholder {\n    color: var(--search-input-text-color);\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--search-input-background-color);\n  border-radius: var(--search-input-border-radius);\n  border: var(--search-input-border);\n  outline: none;\n  color: var(--search-input-text-color);\n  font-size: var(--search-input-font-size);\n  font-family: var(--search-input-font-family);\n  line-height: var(--search-input-line-height);\n\n  ::placeholder {\n    color: var(--search-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--search-input-hover-background-color);\n    border: var(--search-input-hover-border);\n  }\n"], ["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--search-input-background-color);\n  border-radius: var(--search-input-border-radius);\n  border: var(--search-input-border);\n  outline: none;\n  color: var(--search-input-text-color);\n  font-size: var(--search-input-font-size);\n  font-family: var(--search-input-font-family);\n  line-height: var(--search-input-line-height);\n\n  ::placeholder {\n    color: var(--search-input-placeholder-color);\n  }\n\n  &:hover {\n    background-color: var(--search-input-hover-background-color);\n    border: var(--search-input-hover-border);\n  }\n"])));
 var templateObject_1;

package/Search/Parameters.js

@@ -36,7 +36,7 @@ function Parameters(_a) {
             " more...") : null));
 }
 exports.Parameters = Parameters;
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-left: 1px solid var(--global-border-color);\n  padding: 0 12px;\n  margin-top: 8px;\n  margin-bottom: 4px;\n"], ["\n  border-left: 1px solid var(--global-border-color);\n  padding: 0 12px;\n  margin-top: 8px;\n  margin-bottom: 4px;\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-left: 1px solid var(--border-color);\n  padding: 0 12px;\n  margin-top: 8px;\n  margin-bottom: 4px;\n"], ["\n  border-left: 1px solid var(--border-color);\n  padding: 0 12px;\n  margin-top: 8px;\n  margin-bottom: 4px;\n"])));
 var Place = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: var(--font-size-small);\n  padding-top: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &:first-child {\n    padding-top: 0;\n  }\n"], ["\n  font-size: var(--font-size-small);\n  padding-top: 8px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  &:first-child {\n    padding-top: 0;\n  }\n"])));
 var MoreText = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-regular);\n  padding-top: 4px;\n"], ["\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-regular);\n  padding-top: 4px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Search/Popover.js

@@ -11,5 +11,5 @@ exports.Popover = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Popover = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Search/Popover',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4);\n  background: var(--search-popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--search-popover-border-radius);\n"], ["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),\n    0 8px 10px -5px rgba(0, 0, 0, 0.4);\n  background: var(--search-popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--search-popover-border-radius);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: var(--search-popover-shadow);\n  background: var(--search-popover-background-color);\n  list-style: none;\n  border-radius: var(--search-popover-border-radius);\n  border: var(--search-popover-border);\n"], ["\n  position: absolute;\n  top: calc(100% + 10px);\n  right: 0;\n  z-index: 100;\n  min-width: 100%;\n  width: 550px;\n  max-width: 90vw;\n  max-height: 400px;\n  overflow-y: auto;\n  box-shadow: var(--search-popover-shadow);\n  background: var(--search-popover-background-color);\n  list-style: none;\n  border-radius: var(--search-popover-border-radius);\n  border: var(--search-popover-border);\n"])));
 var templateObject_1;

package/Search/Search.js

@@ -25,5 +25,5 @@ function Search() {
         react_1.default.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: function (item) { return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }); } }, function (isOpen, reset) { return (isOpen ? react_1.default.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : react_1.default.createElement(SearchIcon_1.SearchIcon, null)); })));
 }
 exports.Search = Search;
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0 auto;\n"], ["\n  margin: 0 auto;\n"])));
 var templateObject_1;

package/Search/SearchItem.js

@@ -56,9 +56,9 @@ function SearchItem(_a) {
         ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement(Parameters_1.Parameters, { parameters: item.parameters })) : (react_1.default.createElement(Path, null, (_c = item.path) === null || _c === void 0 ? void 0 : _c.join(' → ')))));
 }
 exports.SearchItem = SearchItem;
-var SearchLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  padding: 8px 24px;\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n\n  &:hover,\n  &:focus {\n    background-color: var(--search-item-active-background-color);\n  }\n"], ["\n  display: block;\n  text-decoration: none;\n  padding: 8px 24px;\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n\n  &:hover,\n  &:focus {\n    background-color: var(--search-item-active-background-color);\n  }\n"])));
-var Operation = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-small);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-small);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
-var Title = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: var(--line-height-base);\n"], ["\n  font-weight: var(--font-weight-bold);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: var(--line-height-base);\n"])));
+var Title = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-weight: var(--font-weight-bold);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: var(--line-height-base);\n"], ["\n  font-weight: var(--font-weight-bold);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: var(--line-height-base);\n"])));
+var SearchLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  text-decoration: none;\n  padding: var(--search-item-padding);\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n  background-color: var(--search-item-background-color);\n\n  &:hover,\n  &:focus {\n    color: var(--search-item-active-text-color);\n    background-color: var(--search-item-active-background-color);\n    ", " {\n      color: var(--search-item-active-title-text-color);\n    }\n  }\n"], ["\n  display: block;\n  text-decoration: none;\n  padding: var(--search-item-padding);\n  transition: background-color 0.3s ease;\n  outline: none;\n  white-space: nowrap;\n  color: var(--search-item-text-color);\n  background-color: var(--search-item-background-color);\n\n  &:hover,\n  &:focus {\n    color: var(--search-item-active-text-color);\n    background-color: var(--search-item-active-background-color);\n    ", " {\n      color: var(--search-item-active-title-text-color);\n    }\n  }\n"])), Title);
+var Operation = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-small);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font-weight: var(--font-weight-regular);\n  font-size: var(--font-size-small);\n  color: var(--search-item-title-text-color);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 var Description = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: var(--font-size-base);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  font-size: var(--font-size-base);\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])));
 var Path = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: var(--font-size-small);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 22px;\n"], ["\n  font-size: var(--font-size-small);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  line-height: 22px;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Search/utils.js

@@ -59,5 +59,5 @@ var highlight = function (text) {
         suf));
 };
 exports.highlight = highlight;
-var Strong = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-content);\n"], ["\n  color: var(--color-content);\n"])));
+var Strong = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--search-highlight-text-color);\n"], ["\n  color: var(--search-highlight-text-color);\n"])));
 var templateObject_1;

package/Sidebar/ApiCallItem.js

@@ -25,5 +25,5 @@ function ApiCallItem(_a) {
 }
 exports.ApiCallItem = ApiCallItem;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-top: 0;\n"], ["\n  flex-shrink: 0;\n  margin-top: 0;\n"])));
+exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  flex-shrink: 0;\n  margin-top: 0;\n  width: 36px;\n  height: 14px;\n  font-size: var(--sidebar-item-badge-http-font-size);\n  font-family: var(--sidebar-item-badge-http-font-family);\n  font-weight: var(--sidebar-item-badge-http-font-weight);\n  border-radius: var(--sidebar-item-badge-http-border-radius);\n  color: var(--sidebar-item-badge-http-text-color);\n"], ["\n  flex-shrink: 0;\n  margin-top: 0;\n  width: 36px;\n  height: 14px;\n  font-size: var(--sidebar-item-badge-http-font-size);\n  font-family: var(--sidebar-item-badge-http-font-family);\n  font-weight: var(--sidebar-item-badge-http-font-weight);\n  border-radius: var(--sidebar-item-badge-http-border-radius);\n  color: var(--sidebar-item-badge-http-text-color);\n"])));
 var templateObject_1, templateObject_2;

package/Sidebar/ArrowBack.js

@@ -17,5 +17,5 @@ var Arrow = function (_a) {
             react_1.default.createElement("path", { d: "M2.414 5l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L2.414 5z" }),
             react_1.default.createElement("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" }))));
 };
-exports.ArrowBack = (0, styled_components_1.default)(Arrow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: var(--sidebar-chevron-color);\n"], ["\n  fill: var(--sidebar-chevron-color);\n"])));
+exports.ArrowBack = (0, styled_components_1.default)(Arrow)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  fill: var(--sidebar-group-item-chevron-color);\n"], ["\n  fill: var(--sidebar-group-item-chevron-color);\n"])));
 var templateObject_1;

package/Sidebar/BackButton.js

@@ -18,5 +18,5 @@ function BackButton(_a) {
         children));
 }
 exports.BackButton = BackButton;
-var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  background-color: transparent;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: var(--color-content);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--sidebar-font-size);\n  transition: color 0.25s ease;\n  text-align: left;\n  margin-bottom: calc(var(--sidebar-spacing-padding-vertical) * 3);\n\n  svg {\n    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n  }\n\n  &:hover {\n    color: var(--sidebar-item-color);\n  }\n"], ["\n  width: 100%;\n  background-color: transparent;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: var(--color-content);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  font-size: var(--sidebar-font-size);\n  transition: color 0.25s ease;\n  text-align: left;\n  margin-bottom: calc(var(--sidebar-spacing-padding-vertical) * 3);\n\n  svg {\n    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n  }\n\n  &:hover {\n    color: var(--sidebar-item-color);\n  }\n"])));
+var Button = styled_components_1.default.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  background-color: var(--sidebar-back-button-background-color);\n  padding: 0;\n  border: 0;\n  outline: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: var(--sidebar-back-button-text-color);\n  font-size: var(--sidebar-back-button-font-size);\n  font-family: var(--sidebar-back-button-font-family);\n  text-transform: var(--sidebar-back-button-transform);\n\n  transition: color 0.25s ease;\n  text-align: left;\n  margin: var(--sidebar-back-button-margin);\n\n  svg {\n    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n    fill: var(--sidebar-back-button-icon-color);\n  }\n\n  &:hover {\n    color: var(--sidebar-back-button-hover-text-color);\n    background: var(--sidebar-back-button-hover-background-color);\n  }\n"], ["\n  width: 100%;\n  background-color: var(--sidebar-back-button-background-color);\n  padding: 0;\n  border: 0;\n  outline: 0;\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  color: var(--sidebar-back-button-text-color);\n  font-size: var(--sidebar-back-button-font-size);\n  font-family: var(--sidebar-back-button-font-family);\n  text-transform: var(--sidebar-back-button-transform);\n\n  transition: color 0.25s ease;\n  text-align: left;\n  margin: var(--sidebar-back-button-margin);\n\n  svg {\n    margin-right: calc(var(--sidebar-spacing-unit) * 1.5);\n    fill: var(--sidebar-back-button-icon-color);\n  }\n\n  &:hover {\n    color: var(--sidebar-back-button-hover-text-color);\n    background: var(--sidebar-back-button-hover-background-color);\n  }\n"])));
 var templateObject_1;

package/Sidebar/Drilldown.js

@@ -46,5 +46,5 @@ function Drilldown(_a) {
 }
 exports.Drilldown = Drilldown;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var DrilldownLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: calc(var(--sidebar-spacing-padding-vertical) * 2);\n  padding-bottom: calc(var(--sidebar-spacing-padding-vertical) * 2);\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  font-weight: var(--font-weight-bold);\n\n  &:hover {\n    color: initial;\n    background-color: initial;\n  }\n"], ["\n  padding-top: calc(var(--sidebar-spacing-padding-vertical) * 2);\n  padding-bottom: calc(var(--sidebar-spacing-padding-vertical) * 2);\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  font-weight: var(--font-weight-bold);\n\n  &:hover {\n    color: initial;\n    background-color: initial;\n  }\n"])));
+var DrilldownLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);\n  font-weight: var(--font-weight-bold);\n\n  &:hover {\n    color: initial;\n    background-color: initial;\n  }\n"], ["\n  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);\n  font-weight: var(--font-weight-bold);\n\n  &:hover {\n    color: initial;\n    background-color: initial;\n  }\n"])));
 var templateObject_1, templateObject_2;