@redocly/theme 0.1.8 → 0.1.11

package/Navbar/Navbar.js

@@ -18,15 +18,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavbarContainer = void 0;
+exports.NavbarContainer = exports.Navbar = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function Navbar(_a) {
     var menu = _a.menu, logo = _a.logo, search = _a.search;
     return ((0, jsx_runtime_1.jsxs)(exports.NavbarContainer, __assign({ "data-component-name": "Navbar/Navbar" }, { children: [logo, menu, search] })));
 }
-exports.default = 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-color-text);\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-color-background);\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-color-text);\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-color-background);\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.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) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;
 }, function (_a) {

package/Navbar/NavbarItem.d.ts

@@ -36,5 +36,5 @@ export declare type ResolvedNavItem = ResolvedNavLinkItem | ResolvedNavGroupItem
 interface NavbarItemProps {
     navItem: ResolvedNavLinkItem;
 }
-export default function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
+export declare function NavbarItem({ navItem }: NavbarItemProps): JSX.Element;
 export {};

package/Navbar/NavbarItem.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuStyle = void 0;
+exports.NavbarItem = exports.MenuStyle = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var react_router_dom_1 = require("react-router-dom");
@@ -34,14 +34,14 @@ function NavbarItem(_a) {
     var isActive = pathname === (0, utils_1.withPathPrefix)(navItem.link);
     return ((0, jsx_runtime_1.jsx)(NavMenuItem, __assign({ active: isActive, "data-component-name": "Navbar/NavbarItem" }, { children: (0, jsx_runtime_1.jsx)(NavLink, __assign({ to: navItem.link, active: isActive }, { children: (0, jsx_runtime_1.jsx)(NavLabel, { children: navItem.label }) })) })));
 }
-exports.default = NavbarItem;
+exports.NavbarItem = NavbarItem;
 var NavMenuItem = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"], ["\n  display: inline-block;\n  padding: 20px calc(var(--sidebar-spacing-horizontal) * 2);\n  text-align: center;\n  line-height: 1;\n  font-size: var(--navbar-item-font-size);\n  margin-left: var(--navbar-item-margin-horizontal);\n  margin-right: var(--navbar-item-margin-horizontal);\n  border-radius: var(--navbar-item-border-radius);\n  font-weight: var(--navbar-item-font-weight);\n  background: ", ";\n"])), function (_a) {
     var active = _a.active;
     return (active ? 'var(--navbar-item-active-background-color)' : 'none');
 });
 var NavLink = (0, styled_components_1.default)(Link_1.Link)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  text-decoration: ", ";\n"], ["\n  color: ", ";\n  text-decoration: ", ";\n"])), function (_a) {
     var active = _a.active;
-    return active ? 'var(--navbar-item-active-text-color)' : 'var(--navbar-color-text)';
+    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';

package/Navbar/NavbarMenu.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export default function NavbarMenu({ menuItems }: {
+export declare function NavbarMenu({ menuItems }: {
     menuItems: any[];
 }): JSX.Element | null;

package/Navbar/NavbarMenu.js

@@ -18,19 +18,20 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.NavbarMenu = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var NavbarItem_1 = __importDefault(require("../Navbar/NavbarItem"));
+var NavbarItem_1 = require("../Navbar/NavbarItem");
 function NavbarMenu(_a) {
     var menuItems = _a.menuItems;
-    if (!menuItems || !menuItems.length) {
+    if (!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)) {
         return null;
     }
     return ((0, jsx_runtime_1.jsx)(NavItemsContainer, __assign({ "data-component-name": "Navbar/NavbarMenu" }, { children: menuItems.map(function (navItem, index) {
-            return (0, jsx_runtime_1.jsx)(NavbarItem_1.default, { "data-cy": navItem.label, navItem: navItem }, index);
+            return (0, jsx_runtime_1.jsx)(NavbarItem_1.NavbarItem, { "data-cy": navItem.label, navItem: navItem }, index);
         }) })));
 }
-exports.default = NavbarMenu;
+exports.NavbarMenu = NavbarMenu;
 var NavItemsContainer = styled_components_1.default.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n\n  ", " {\n    display: block;\n  }\n"], ["\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n\n  ", " {\n    display: block;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;

package/Navbar/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../Navbar/Navbar';
+export * from '../Navbar/NavbarItem';
+export * from '../Navbar/NavbarMenu';

package/Navbar/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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("../Navbar/Navbar"), exports);
+__exportStar(require("../Navbar/NavbarItem"), exports);
+__exportStar(require("../Navbar/NavbarMenu"), exports);

package/NavbarLogo/NavbarLogo.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { LogoConfig } from '@theme/types/portal';
+export declare type NavbarLogoProps = {
+    logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;
+};
+export declare function NavbarLogo({ logo }: NavbarLogoProps): JSX.Element | null;

package/{Logo/Logo.js → NavbarLogo/NavbarLogo.js}

@@ -18,15 +18,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Logo = void 0;
+exports.NavbarLogo = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Link_1 = require("../mocks/Link");
-function Logo(_a) {
+function NavbarLogo(_a) {
     var logo = _a.logo;
-    var img = (0, jsx_runtime_1.jsx)(NavLogo, { src: logo.image, alt: logo.altText, "data-component-name": "Logo/Logo" });
-    return (logo === null || logo === void 0 ? void 0 : logo.image) ? logo.link ? (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ to: logo.link }, { children: img })) : img : null;
+    if (!logo.image) {
+        return null;
+    }
+    var img = ((0, jsx_runtime_1.jsx)(NavLogo, { src: logo.image, alt: logo.altText, "data-component-name": "NavbarLogo/NavbarLogo" }));
+    return logo.link ? (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ to: logo.link }, { children: img })) : img;
 }
-exports.Logo = Logo;
+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 templateObject_1;

package/NavbarLogo/index.d.ts

@@ -0,0 +1 @@
+export * from '../NavbarLogo/NavbarLogo';

package/NavbarLogo/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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("../NavbarLogo/NavbarLogo"), exports);

package/OperationBadge/index.d.ts

@@ -1 +1 @@
-export * from './OperationBadge';
+export * from '../OperationBadge/OperationBadge';

package/OperationBadge/index.js

@@ -14,4 +14,4 @@ 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("./OperationBadge"), exports);
+__exportStar(require("../OperationBadge/OperationBadge"), exports);

package/PageNavigation/index.d.ts

@@ -0,0 +1,3 @@
+export * from '../PageNavigation/NextPageLink';
+export * from '../PageNavigation/PageNavigation';
+export * from '../PageNavigation/PreviousPageLink';

package/PageNavigation/index.js

@@ -0,0 +1,19 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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("../PageNavigation/NextPageLink"), exports);
+__exportStar(require("../PageNavigation/PageNavigation"), exports);
+__exportStar(require("../PageNavigation/PreviousPageLink"), exports);

package/Panel/index.d.ts

@@ -1,8 +1,8 @@
-export * from './CodePanel';
-export * from './ContentPanel';
-export * from './DarkHeader';
-export * from './Panel';
-export * from './PanelBody';
-export * from './PanelComponent';
-export * from './PanelHeader';
-export * from './PanelHeaderTitle';
+export * from '../Panel/CodePanel';
+export * from '../Panel/ContentPanel';
+export * from '../Panel/DarkHeader';
+export * from '../Panel/Panel';
+export * from '../Panel/PanelBody';
+export * from '../Panel/PanelComponent';
+export * from '../Panel/PanelHeader';
+export * from '../Panel/PanelHeaderTitle';

package/Panel/index.js

@@ -14,11 +14,11 @@ 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("./CodePanel"), exports);
-__exportStar(require("./ContentPanel"), exports);
-__exportStar(require("./DarkHeader"), exports);
-__exportStar(require("./Panel"), exports);
-__exportStar(require("./PanelBody"), exports);
-__exportStar(require("./PanelComponent"), exports);
-__exportStar(require("./PanelHeader"), exports);
-__exportStar(require("./PanelHeaderTitle"), exports);
+__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);
+__exportStar(require("../Panel/PanelHeader"), exports);
+__exportStar(require("../Panel/PanelHeaderTitle"), exports);

package/REAMDE.md

@@ -0,0 +1 @@
+For more details, contact team@redocly.com

package/SamplesPanelControls/index.d.ts

@@ -1 +1 @@
-export * from './SamplesPanelControls';
+export * from '../SamplesPanelControls/SamplesPanelControls';

package/SamplesPanelControls/index.js

@@ -14,4 +14,4 @@ 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("./SamplesPanelControls"), exports);
+__exportStar(require("../SamplesPanelControls/SamplesPanelControls"), exports);

package/Search/Autocomplete.js

@@ -75,5 +75,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-text-main);\n"], ["\n  padding: 24px;\n  color: var(--color-text-main);\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 templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Search/ClearIcon.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ClearIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "Search/ClearIcon" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 298.7 298.7" }, props, { children: (0, jsx_runtime_1.jsx)("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " }) })) }))); };
+var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 298.7 298.7", "data-component-name": "Search/ClearIcon" }, props, { children: (0, jsx_runtime_1.jsx)("polygon", { points: "298.7 30.2 268.5 0 149.3 119.1 30.2 0 0 30.2 119.1 149.3 0 268.5 30.2 298.7 149.3 179.5 268.5 298.7 298.7 268.5 179.5 149.3 " }) }))); };
 exports.ClearIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 0.5em;\n  height: 0.5em;\n  right: 1.2em;\n  fill: var(--input-text-color);\n\n  ", " {\n    width: 0.625em;\n    height: 0.625em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;

package/Search/Parameters.js

@@ -36,7 +36,7 @@ function Parameters(_a) {
             }), moreItems ? (0, jsx_runtime_1.jsxs)(MoreText, { children: ["and ", moreItems, " more..."] }) : null] })));
 }
 exports.Parameters = Parameters;
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-left: 1px solid var(--color-border-light);\n  padding: 0 12px;\n  margin-top: 8px;\n  margin-bottom: 4px;\n"], ["\n  border-left: 1px solid var(--color-border-light);\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(--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 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-light);\n  padding-top: 4px;\n"], ["\n  font-size: var(--font-size-small);\n  font-weight: var(--font-weight-light);\n  padding-top: 4px;\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/SearchIcon.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchIcon = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "Search/SearchIcon" }, { children: (0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" }) })) }))); };
+var Icon = function (props) { return ((0, jsx_runtime_1.jsx)("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0", y: "0", viewBox: "0 0 490 490", "data-component-name": "Search/SearchIcon" }, props, { children: (0, jsx_runtime_1.jsx)("path", { d: "M484 455.2L366.2 337.4c29.2-35.6 46.8-81.2 46.8-130.9C413 92.5 320.5 0 206.5 0 92.4 0 0 92.5 0 206.5S92.4 413 206.5 413c49.7 0 95.2-17.5 130.8-46.7L455.1 484c8 8 20.9 8 28.9 0C492 476.1 492 463.1 484 455.2zM206.5 371.9C115.2 371.9 41 297.7 41 206.5S115.2 41 206.5 41C297.7 41 372 115.3 372 206.5S297.7 371.9 206.5 371.9z" }) }))); };
 exports.SearchIcon = (0, styled_components_1.default)(Icon)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"], ["\n  position: absolute;\n  cursor: pointer;\n  width: 1em;\n  height: 1em;\n  right: 1em;\n  fill: var(--input-text-color);\n  z-index: -1;\n\n  ", " {\n    width: 1.2em;\n    height: 1.2em;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.mediaQueries.medium;

package/Search/SearchItem.js

@@ -40,8 +40,8 @@ function SearchItem(_a) {
 }
 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-light);\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-light);\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-m);\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-m);\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 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/index.d.ts

@@ -0,0 +1,9 @@
+export * from '../Search/Autocomplete';
+export * from '../Search/ClearIcon';
+export * from '../Search/Input';
+export * from '../Search/Parameters';
+export * from '../Search/Popover';
+export * from '../Search/Search';
+export * from '../Search/SearchIcon';
+export * from '../Search/SearchItem';
+export * from '../Search/utils';

package/Search/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __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("../Search/Autocomplete"), exports);
+__exportStar(require("../Search/ClearIcon"), exports);
+__exportStar(require("../Search/Input"), exports);
+__exportStar(require("../Search/Parameters"), exports);
+__exportStar(require("../Search/Popover"), exports);
+__exportStar(require("../Search/Search"), exports);
+__exportStar(require("../Search/SearchIcon"), exports);
+__exportStar(require("../Search/SearchItem"), exports);
+__exportStar(require("../Search/utils"), exports);

package/Search/utils.js

@@ -17,5 +17,5 @@ var highlight = function (text) {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [pre, (0, jsx_runtime_1.jsx)(Strong, { children: entry }), suf] }));
 };
 exports.highlight = highlight;
-var Strong = styled_components_1.default.strong(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: var(--color-primary-main);\n"], ["\n  color: var(--color-primary-main);\n"])));
+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 templateObject_1;

package/Sidebar/ApiCallItem.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import MenuItemProps from '../Sidebar/types/MenuItemProps';
-export default function ApiCallItem({ item }: MenuItemProps): JSX.Element;
+import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+export declare function ApiCallItem({ item }: MenuItemProps): JSX.Element;
 export declare const Badge: import("styled-components").StyledComponent<"span", any, {
     className: `operation-type ${string}`;
 } & {

package/Sidebar/ApiCallItem.js

@@ -18,18 +18,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Badge = void 0;
+exports.Badge = exports.ApiCallItem = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var OperationBadge_1 = require("../OperationBadge");
-var MenuLinkItem_1 = __importDefault(require("../Sidebar/MenuLinkItem"));
-var SeparatorLine_1 = __importDefault(require("../Sidebar/SeparatorLine"));
-var MenuItemLabel_1 = __importDefault(require("../Sidebar/MenuItemLabel"));
+var MenuLinkItem_1 = require("../Sidebar/MenuLinkItem");
+var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
+var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
 function ApiCallItem(_a) {
     var item = _a.item;
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Sidebar/ApiCallItem" }, { children: [(0, jsx_runtime_1.jsx)(MenuLinkItem_1.default, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(MenuItemLabel_1.default, __assign({ active: item.active }, { children: [(0, jsx_runtime_1.jsx)(exports.Badge, __assign({ type: item.httpVerb || 'event' }, { children: item.httpVerb === 'hook' ? 'event' : item.httpVerb })), item.label] })) })), item.separatorLine ? (0, jsx_runtime_1.jsx)(SeparatorLine_1.default, {}) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Sidebar/ApiCallItem" }, { children: [(0, jsx_runtime_1.jsx)(MenuLinkItem_1.MenuLinkItem, __assign({ item: item }, { children: (0, jsx_runtime_1.jsxs)(MenuItemLabel_1.MenuItemLabel, __assign({ active: item.active }, { children: [(0, jsx_runtime_1.jsx)(exports.Badge, __assign({ type: item.httpVerb || 'event' }, { children: item.httpVerb === 'hook' ? 'event' : item.httpVerb })), item.label] })) })), item.separatorLine ? (0, jsx_runtime_1.jsx)(SeparatorLine_1.SeparatorLine, {}) : null] })));
 }
-exports.default = ApiCallItem;
+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"])));
 var templateObject_1, templateObject_2;

package/Sidebar/ArrowBack.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-declare const _default: import("styled-components").StyledComponent<({ className }: {
+export declare const ArrowBack: import("styled-components").StyledComponent<({ className }: {
     className?: string | undefined;
 }) => JSX.Element, any, {}, never>;
-export default _default;

package/Sidebar/ArrowBack.js

@@ -18,11 +18,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowBack = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var Arrow = function (_a) {
     var className = _a.className;
     return ((0, jsx_runtime_1.jsx)("span", __assign({ "data-component-name": "Sidebar/ArrowBack" }, { children: (0, jsx_runtime_1.jsxs)("svg", __assign({ fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className }, { children: [(0, jsx_runtime_1.jsx)("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" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 5a1 1 0 011-1h8a1 1 0 110 2H3a1 1 0 01-1-1z" })] })) })));
 };
-exports.default = (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-chevron-color);\n"], ["\n  fill: var(--sidebar-chevron-color);\n"])));
 var templateObject_1;

package/Sidebar/BackButton.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface BackButtonProps {
     back: () => void;
 }
-export default function BackButton({ children, back, }: React.PropsWithChildren<BackButtonProps>): JSX.Element;
+export declare function BackButton({ children, back, }: React.PropsWithChildren<BackButtonProps>): JSX.Element;
 export {};

package/Sidebar/BackButton.js

@@ -18,13 +18,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackButton = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var ArrowBack_1 = __importDefault(require("../Sidebar/ArrowBack"));
+var ArrowBack_1 = require("../Sidebar/ArrowBack");
 function BackButton(_a) {
     var children = _a.children, back = _a.back;
-    return ((0, jsx_runtime_1.jsxs)(Button, __assign({ onClick: back, "data-component-name": "Sidebar/BackButton" }, { children: [(0, jsx_runtime_1.jsx)(ArrowBack_1.default, {}), children] })));
+    return ((0, jsx_runtime_1.jsxs)(Button, __assign({ onClick: back, "data-component-name": "Sidebar/BackButton" }, { children: [(0, jsx_runtime_1.jsx)(ArrowBack_1.ArrowBack, {}), children] })));
 }
-exports.default = 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-secondary-contrast);\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-text-color);\n  }\n"], ["\n  width: 100%;\n  background-color: transparent;\n  padding: 0;\n  border: 0;\n  outline: 0;\n  color: var(--color-secondary-contrast);\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-text-color);\n  }\n"])));
+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 templateObject_1;

package/Sidebar/Drilldown.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import DrilldownMenuProps from '../Sidebar/types/DrilldownMenuProps';
+import { DrilldownMenuProps } from '../Sidebar/types/DrilldownMenuProps';
 interface DrilldownProps extends DrilldownMenuProps {
     isExpanded: boolean;
     expand: () => void;
 }
-export default function Drilldown({ isExpanded, item, expand, ...props }: React.PropsWithChildren<DrilldownProps>): JSX.Element;
+export declare function Drilldown({ isExpanded, item, expand, ...props }: React.PropsWithChildren<DrilldownProps>): JSX.Element;
 export {};

package/Sidebar/Drilldown.js

@@ -29,17 +29,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drilldown = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
-var MenuItemLabel_1 = __importDefault(require("../Sidebar/MenuItemLabel"));
-var SeparatorLine_1 = __importDefault(require("../Sidebar/SeparatorLine"));
-var DrilldownMenuItem_1 = __importDefault(require("../Sidebar/DrilldownMenuItem"));
-var DrilldownMenu_1 = __importDefault(require("../Sidebar/DrilldownMenu"));
+var MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
+var SeparatorLine_1 = require("../Sidebar/SeparatorLine");
+var DrilldownMenuItem_1 = require("../Sidebar/DrilldownMenuItem");
+var DrilldownMenu_1 = require("../Sidebar/DrilldownMenu");
 function Drilldown(_a) {
     var isExpanded = _a.isExpanded, item = _a.item, expand = _a.expand, props = __rest(_a, ["isExpanded", "item", "expand"]);
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Sidebar/Drilldown" }, { children: [(0, jsx_runtime_1.jsx)(DrilldownLabel, __assign({ onClick: expand }, { children: (0, jsx_runtime_1.jsx)(DrilldownMenuItem_1.default, { item: item }) })), isExpanded ? (0, jsx_runtime_1.jsx)(DrilldownMenu_1.default, __assign({ item: item }, props)) : null, item.separatorLine ? (0, jsx_runtime_1.jsx)(SeparatorLine_1.default, {}) : null] })));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Sidebar/Drilldown" }, { children: [(0, jsx_runtime_1.jsx)(DrilldownLabel, __assign({ onClick: expand }, { children: (0, jsx_runtime_1.jsx)(DrilldownMenuItem_1.DrilldownMenuItem, { item: item }) })), isExpanded ? (0, jsx_runtime_1.jsx)(DrilldownMenu_1.DrilldownMenu, __assign({ item: item }, props)) : null, item.separatorLine ? (0, jsx_runtime_1.jsx)(SeparatorLine_1.SeparatorLine, {}) : null] })));
 }
-exports.default = Drilldown;
+exports.Drilldown = Drilldown;
 var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
-var DrilldownLabel = (0, styled_components_1.default)(MenuItemLabel_1.default)(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-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 templateObject_1, templateObject_2;

package/Sidebar/DrilldownMenu.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import DrilldownMenuProps from '../Sidebar/types/DrilldownMenuProps';
-export default function DrilldownMenu({ item, back, prevActiveItem, children, }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element;
+import { DrilldownMenuProps } from '../Sidebar/types/DrilldownMenuProps';
+export declare function DrilldownMenu({ item, back, prevActiveItem, children, }: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element;

package/Sidebar/DrilldownMenu.js

@@ -37,19 +37,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrilldownMenu = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
-var BackButton_1 = __importDefault(require("../Sidebar/BackButton"));
-var DrilldownMenuItem_1 = __importDefault(require("../Sidebar/DrilldownMenuItem"));
+var BackButton_1 = require("../Sidebar/BackButton");
+var DrilldownMenuItem_1 = require("../Sidebar/DrilldownMenuItem");
 function DrilldownMenu(_a) {
     var item = _a.item, back = _a.back, prevActiveItem = _a.prevActiveItem, children = _a.children;
-    return ((0, jsx_runtime_1.jsx)(MenuContainer, __assign({ "data-component-name": "Sidebar/DrilldownMenu" }, { children: (0, jsx_runtime_1.jsxs)(MenuContent, { children: [(0, jsx_runtime_1.jsxs)(MenuWrapper, { children: [(0, jsx_runtime_1.jsx)(BackButton_1.default, __assign({ back: back }, { children: (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || 'Back' })), (0, jsx_runtime_1.jsx)(DrilldownMenuItem_1.default, { item: item })] }), children] }) })));
+    return ((0, jsx_runtime_1.jsx)(MenuContainer, __assign({ "data-component-name": "Sidebar/DrilldownMenu" }, { children: (0, jsx_runtime_1.jsxs)(MenuContent, { children: [(0, jsx_runtime_1.jsxs)(MenuWrapper, { children: [(0, jsx_runtime_1.jsx)(BackButton_1.BackButton, __assign({ back: back }, { children: (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || 'Back' })), (0, jsx_runtime_1.jsx)(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })] }), children] }) })));
 }
-exports.default = DrilldownMenu;
+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 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);

package/Sidebar/DrilldownMenuItem.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import MenuItemProps from '../Sidebar/types/MenuItemProps';
-export default function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element;
+import { MenuItemProps } from '../Sidebar/types/MenuItemProps';
+export declare function DrilldownMenuItem({ item }: MenuItemProps): JSX.Element;

package/Sidebar/DrilldownMenuItem.js

@@ -18,14 +18,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrilldownMenuItem = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function DrilldownMenuItem(_a) {
     var item = _a.item;
-    return ((0, jsx_runtime_1.jsxs)(Container, __assign({ "data-component-name": "Sidebar/DrilldownMenuItem" }, { children: [item.icon ? (0, jsx_runtime_1.jsx)(Icon, { src: item.icon }) : null, (0, jsx_runtime_1.jsxs)("div", { children: [item.label, item.sublabel ? (0, jsx_runtime_1.jsx)(Sublabel, { children: item.sublabel }) : null] })] })));
+    return ((0, jsx_runtime_1.jsxs)(Container, __assign({ "data-component-name": "Sidebar/DrilldownMenuItem" }, { children: [item.icon ? (0, jsx_runtime_1.jsx)(Icon, { src: item.icon }) : null, (0, jsx_runtime_1.jsxs)("div", { children: [item.label, item.sublabel ? (0, jsx_runtime_1.jsx)(SubLabel, { children: item.sublabel }) : null] })] })));
 }
-exports.default = DrilldownMenuItem;
-var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  color: var(--sidebar-text-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-text-color);\n  font-size: var(--sidebar-font-size);\n  font-weight: var(--font-weight-bold);\n"])));
+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-secondary-contrast);\n  font-weight: var(--font-weight-regular);\n"], ["\n  margin-top: 2px;\n  font-size: 0.85rem;\n  color: var(--color-secondary-contrast);\n  font-weight: var(--font-weight-regular);\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 templateObject_1, templateObject_2, templateObject_3;