@redocly/theme 0.3.0 → 0.4.2

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

@@ -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/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,12 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 import { PanelHeaderProps } from '../Panel/PanelHeader';
 export interface PanelComponentProps {
     expanded?: boolean;
     className?: string;
+    renderChildrenHidden?: boolean;
     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, renderChildrenHidden, 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,9 +54,9 @@ 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 _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 _b = _a.expanded, expanded = _b === void 0 ? true : _b, _c = _a.renderChildrenHidden, renderChildrenHidden = _c === void 0 ? false : _c, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle, description = _a.description;
+    var _d = __read((0, react_1.useState)(expanded), 2), isExpanded = _d[0], setExpanded = _d[1];
+    var _e = __read((0, react_1.useState)(false), 2), animate = _e[0], setAnimate = _e[1];
     var toggle = function (_a) {
         var target = _a.target;
         if (target instanceof HTMLAnchorElement)
@@ -71,8 +71,9 @@ 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' }))))),
-        isExpanded && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
+                    react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }),
+                    description)))),
+        (isExpanded || renderChildrenHidden) && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
 }
 exports.PanelComponent = PanelComponent;
 exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n"], ["\n  display: inline-flex;\n  align-items: center;\n"])));

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;

package/Sidebar/DrilldownMenu.js

@@ -45,8 +45,8 @@ function DrilldownMenu(_a) {
             children)));
 }
 exports.DrilldownMenu = DrilldownMenu;
-var MenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-background-color);\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-background-color);\n"])));
+var MenuContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-item-drilldown-background-color);\n"], ["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 100%;\n  z-index: 100;\n  background-color: var(--sidebar-item-drilldown-background-color);\n"])));
 var slideInAnimation = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  0% {\n    transform: translateX(100%)\n  }\n  100% {\n    transform: translateX(0%)\n  }\n"], ["\n  0% {\n    transform: translateX(100%)\n  }\n  100% {\n    transform: translateX(0%)\n  }\n"])));
 var MenuContent = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  animation-name: ", ";\n  animation-fill-mode: forwards;\n  animation-duration: 0.3s;\n  animation-timing-function: ease;\n  background-color: transparent;\n"], ["\n  animation-name: ", ";\n  animation-fill-mode: forwards;\n  animation-duration: 0.3s;\n  animation-timing-function: ease;\n  background-color: transparent;\n"])), slideInAnimation);
-var MenuWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"], ["\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"])));
+var MenuWrapper = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"], ["\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);\n  word-break: break-word;\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Sidebar/DrilldownMenuItem.js

@@ -19,7 +19,7 @@ function DrilldownMenuItem(_a) {
             item.sublabel ? react_1.default.createElement(SubLabel, null, item.sublabel) : null)));
 }
 exports.DrilldownMenuItem = DrilldownMenuItem;
-var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-color);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-bold);\n"], ["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-color);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-bold);\n"])));
-var Icon = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: calc(var(--sidebar-spacing-unit) * 4);\n  height: calc(var(--sidebar-spacing-unit) * 4);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: 50%;\n  flex-shrink: 0;\n  overflow: hidden;\n"], ["\n  width: calc(var(--sidebar-spacing-unit) * 4);\n  height: calc(var(--sidebar-spacing-unit) * 4);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: 50%;\n  flex-shrink: 0;\n  overflow: hidden;\n"])));
-var SubLabel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 2px;\n  font-size: 0.85rem;\n  color: var(--color-content);\n  font-weight: var(--font-weight-regular);\n"], ["\n  margin-top: 2px;\n  font-size: 0.85rem;\n  color: var(--color-content);\n  font-weight: var(--font-weight-regular);\n"])));
+var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-drilldown-text-color);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--sidebar-item-drilldown-font-size);\n  font-family: var(--sidebar-item-drilldown-font-family);\n  text-transform: var(--sidebar-text-drilldown-transform);\n  background: var(--sidebar-item-drilldown-background-color);\n"], ["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-item-drilldown-text-color);\n  font-weight: var(--font-weight-bold);\n  font-size: var(--sidebar-item-drilldown-font-size);\n  font-family: var(--sidebar-item-drilldown-font-family);\n  text-transform: var(--sidebar-text-drilldown-transform);\n  background: var(--sidebar-item-drilldown-background-color);\n"])));
+var Icon = styled_components_1.default.img(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: var(--sidebar-item-icon-size);\n  height: var(--sidebar-item-icon-size);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: var(--sidebar-item-icon-border-radius);\n  flex-shrink: 0;\n  overflow: hidden;\n"], ["\n  width: var(--sidebar-item-icon-size);\n  height: var(--sidebar-item-icon-size);\n  margin-right: var(--sidebar-spacing-unit);\n  border-radius: var(--sidebar-item-icon-border-radius);\n  flex-shrink: 0;\n  overflow: hidden;\n"])));
+var SubLabel = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin-top: 2px;\n  color: var(--sidebar-item-sublabel-text-color);\n  font-weight: var(-sidebar-item-sublabel-font-weight);\n  font-size: var(--sidebar-item-sublabel-font-size);\n  font-family: var(--sidebar-item-sublabel-font-family);\n"], ["\n  margin-top: 2px;\n  color: var(--sidebar-item-sublabel-text-color);\n  font-weight: var(-sidebar-item-sublabel-font-weight);\n  font-size: var(--sidebar-item-sublabel-font-size);\n  font-family: var(--sidebar-item-sublabel-font-family);\n"])));
 var templateObject_1, templateObject_2, templateObject_3;

package/Sidebar/ExternalIcon.js

@@ -19,5 +19,5 @@ var Icon = function (_a) {
             react_1.default.createElement("path", { d: "M98.57,4.784c-0.024-0.113-0.047-0.223-0.074-0.334c-0.035-0.117-0.075-0.231-0.117-0.346 c-0.023-0.062-0.037-0.125-0.064-0.187c-0.016-0.032-0.03-0.06-0.049-0.092c-0.048-0.119-0.107-0.227-0.17-0.336 c-0.05-0.089-0.095-0.179-0.152-0.265c-0.062-0.1-0.139-0.195-0.209-0.292C97.67,2.85,97.611,2.77,97.545,2.69 c-0.081-0.092-0.172-0.178-0.258-0.262c-0.07-0.068-0.139-0.139-0.212-0.202c-0.093-0.083-0.196-0.158-0.3-0.232 c-0.08-0.058-0.152-0.114-0.236-0.163c-0.104-0.069-0.219-0.128-0.329-0.186c-0.091-0.046-0.175-0.093-0.262-0.132 c-0.044-0.019-0.081-0.043-0.121-0.061c-0.074-0.03-0.154-0.046-0.234-0.072c-0.095-0.033-0.19-0.065-0.288-0.092 c-0.123-0.034-0.246-0.059-0.369-0.083c-0.096-0.019-0.188-0.036-0.289-0.046c-0.131-0.018-0.263-0.022-0.393-0.028 c-0.064-0.002-0.12-0.012-0.186-0.012L63.77,1.305c-2.535,0.017-4.566,2.078-4.554,4.605c0.019,2.525,2.084,4.563,4.604,4.546 l19.258-0.121l-29.79,30.162c-1.112,1.126-1.526,2.678-1.233,4.118c0.174,0.863,0.596,1.691,1.272,2.357 c0.897,0.888,2.073,1.325,3.245,1.32c1.17-0.007,2.337-0.459,3.227-1.361l0.002-0.001l29.787-30.158l0.121,19.255 c0.014,2.523,2.07,4.564,4.602,4.545c1.268-0.005,2.408-0.526,3.233-1.357c0.817-0.834,1.325-1.98,1.317-3.242L98.675,5.665 c0-0.063-0.016-0.124-0.016-0.189c-0.009-0.123-0.015-0.25-0.032-0.375C98.616,4.992,98.592,4.89,98.57,4.784z" }),
             react_1.default.createElement("path", { d: "M6.542,83.279c0,5.717,4.635,10.354,10.354,10.354l55.616,0.065c5.719,0,10.354-4.636,10.354-10.354l-0.091-40.782h6.135 v40.849c0,9.014-7.307,16.319-16.319,16.319l-56.36-0.066c-8.597,0-15.564-6.969-15.564-15.562L0.585,27.821 c0-9.014,7.306-16.32,16.32-16.32l41.138-0.084v6.142L16.98,17.535c-5.718,0-10.354,4.635-10.354,10.354L6.542,83.279z" }))));
 };
-exports.ExternalIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-chevron-color);\n"], ["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-chevron-color);\n"])));
+exports.ExternalIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-group-item-chevron-color);\n"], ["\n  width: 10px;\n  height: 10px;\n  margin-left: 5px;\n  fill: var(--sidebar-group-item-chevron-color);\n"])));
 var templateObject_1;

package/Sidebar/Menu.js

@@ -11,5 +11,5 @@ exports.Menu = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.Menu = styled_components_1.default.ul.attrs(function () { return ({
     'data-component-name': 'Sidebar/Menu',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-color);\n  position: relative;\n"], ["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-color);\n  position: relative;\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-text-color);\n  position: relative;\n"], ["\n  padding: 0;\n  margin: 0;\n  list-style: none;\n  color: var(--sidebar-item-text-color);\n  position: relative;\n"])));
 var templateObject_1;

package/Sidebar/MenuContainer.js

@@ -11,5 +11,5 @@ exports.MenuContainer = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.MenuContainer = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Sidebar/MenuContainer',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-spacing-offset-top);\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-offset-top);\n"], ["\n  position: relative;\n  overflow-y: auto;\n  flex-grow: 1;\n  padding-top: var(--sidebar-offset-top);\n"])));
 var templateObject_1;

package/Sidebar/MenuGroup.js

@@ -26,7 +26,11 @@ function MenuGroup(_a) {
 }
 exports.MenuGroup = MenuGroup;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"], ["\n  padding-left: var(--sidebar-spacing-offset-nesting);\n"])));
-var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"], ["\n  padding-left: var(--sidebar-spacing-padding-horizontal);\n  cursor: ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); });
+var MenuWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-nested-offset);\n"], ["\n  padding-left: var(--sidebar-item-nested-offset);\n"])));
+var MenuGroupLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"], ["\n  padding-left: var(--sidebar-item-padding-horizontal);\n  cursor: ", ";\n  font-family: var(--sidebar-item-group-font-family);\n  font-size: var(--sidebar-item-group-font-size);\n  text-transform: var(--sidebar-text-group-transform);\n  color: var(--sidebar-item-group-text-color);\n  background: var(--sidebar-item-group-background-color);\n  ", ";\n"])), function (props) { return (props.isAlwaysExpanded ? 'default' : 'pointer'); }, function (props) {
+    return props.active
+        ? "color: var(--sidebar-item-group-active-text-color);\n        background-color: var(--sidebar-item-group-active-background-color);"
+        : null;
+});
 var MenuGroupArrow = (0, styled_components_1.default)(ArrowIcon_1.ArrowIcon)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"], ["\n  margin-right: calc(var(--sidebar-spacing-unit) / 2);\n"])));
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Sidebar/MenuItemLabel.js

@@ -11,7 +11,7 @@ exports.MenuItemLabel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.MenuItemLabel = styled_components_1.default.li.attrs(function () { return ({
     'data-component-name': 'Sidebar/MenuItemLabel',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  font-family: var(--sidebar-font-family);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-spacing-offset-left);\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-top-left-radius: var(--sidebar-border-radius);\n  border-bottom-left-radius: var(--sidebar-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  font-family: var(--sidebar-font-family);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-spacing-offset-left);\n  padding: var(--sidebar-spacing-padding-vertical) var(--sidebar-spacing-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-spacing-padding-horizontal) + var(--sidebar-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-top-left-radius: var(--sidebar-border-radius);\n  border-bottom-left-radius: var(--sidebar-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (props) {
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  background-color: var(--sidebar-item-background-color);\n  font-family: var(--sidebar-item-font-family);\n  font-size: var(--sidebar-item-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-offset-left);\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-radius: var(--sidebar-item-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  transition: background-color 0.3s, color 0.3s;\n  word-break: break-word;\n  margin-bottom: 1px;\n\n  background-color: var(--sidebar-item-background-color);\n  font-family: var(--sidebar-item-font-family);\n  font-size: var(--sidebar-item-font-size);\n  font-weight: var(--font-weight-regular);\n  margin-left: var(--sidebar-offset-left);\n  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);\n  padding-left: calc(\n    var(--sidebar-item-padding-horizontal) + var(--sidebar-group-item-chevron-size) +\n      var(--sidebar-spacing-unit) * 0.5\n  );\n  border-radius: var(--sidebar-item-border-radius);\n\n  ", ";\n\n  :hover {\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  }\n\n  :empty {\n    padding: 0;\n  }\n"])), function (props) {
     return props.active
         ? "\n    color: var(--sidebar-item-active-color);\n    background-color: var(--sidebar-item-active-background-color);\n  "
         : null;

package/Sidebar/MenuLink.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var UniversalLink_1 = require("../ui/UniversalLink");
 exports.MenuLink = (0, styled_components_1.default)(UniversalLink_1.UniversalLink).attrs(function () { return ({
     'data-component-name': 'Sidebar/MenuLink',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n  color: var(--sidebar-item-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"], ["\n  text-decoration: none;\n  color: var(--sidebar-item-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  text-decoration: none;\n  color: var(--sidebar-item-text-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"], ["\n  text-decoration: none;\n  color: var(--sidebar-item-text-color);\n\n  &&.external-url:after {\n    content: none;\n  }\n"])));
 var templateObject_1;

package/Sidebar/SeparatorItem.js

@@ -12,5 +12,5 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 exports.SeparatorItem = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel).attrs(function () { return ({
     'data-component-name': 'Sidebar/SeparatorItem',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"], ["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-label-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-item-color);\n  font-family: var(--sidebar-item-separator-font-family);\n  font-size: var(--sidebar-item-separator-font-size);\n  text-transform: var(--sidebar-item-separator-text-transform);\n  background: var(--sidebar-item-separator-background-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"], ["\n  cursor: default;\n  font-weight: var(--font-weight-bold);\n  color: var(--sidebar-separator-item-color);\n  font-family: var(--sidebar-item-separator-font-family);\n  font-size: var(--sidebar-item-separator-font-size);\n  text-transform: var(--sidebar-item-separator-text-transform);\n  background: var(--sidebar-item-separator-background-color);\n\n  :hover {\n    color: inherit;\n    background-color: inherit;\n  }\n"])));
 var templateObject_1;

package/Sidebar/SeparatorLine.js

@@ -11,5 +11,5 @@ exports.SeparatorLine = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 exports.SeparatorLine = styled_components_1.default.div.attrs(function () { return ({
     'data-component-name': 'Sidebar/SeparatorLine',
-}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--sidebar-separator-line-color);\n  margin: var(--sidebar-spacing-padding-vertical) 0;\n"], ["\n  height: 1px;\n  background-color: var(--sidebar-separator-line-color);\n  margin: var(--sidebar-spacing-padding-vertical) 0;\n"])));
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 1px;\n  background-color: var(--sidebar-item-separator-line-color);\n  margin: var(--sidebar-item-padding-vertical) 0;\n"], ["\n  height: 1px;\n  background-color: var(--sidebar-item-separator-line-color);\n  margin: var(--sidebar-item-padding-vertical) 0;\n"])));
 var templateObject_1;