@redocly/theme 0.4.15 → 0.5.0

package/lib/Search/Parameters.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parameters = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../Search/utils");
+const MAX_ITEMS = 2;
+function Parameters({ parameters = [] }) {
+    const moreItems = Math.max(0, parameters.length - MAX_ITEMS);
+    if (moreItems) {
+        parameters.length = MAX_ITEMS;
+    }
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Parameters" },
+        parameters.map((param) => {
+            var _a, _b;
+            const path = `${param.place} → ${((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : ''}`;
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(Place, null,
+                    path,
+                    (0, utils_1.highlight)(param.name),
+                    " ",
+                    react_1.default.createElement("br", null),
+                    (0, utils_1.highlight)(param.description))));
+        }),
+        moreItems ? react_1.default.createElement(MoreText, null,
+            "and ",
+            moreItems,
+            " more...") : null));
+}
+exports.Parameters = Parameters;
+const Wrapper = styled_components_1.default.div `
+  border-left: 1px solid var(--border-color);
+  padding: 0 12px;
+  margin-top: 8px;
+  margin-bottom: 4px;
+`;
+const Place = styled_components_1.default.div `
+  font-size: var(--font-size-small);
+  padding-top: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:first-child {
+    padding-top: 0;
+  }
+`;
+const MoreText = styled_components_1.default.div `
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-regular);
+  padding-top: 4px;
+`;
+//# sourceMappingURL=Parameters.js.map

package/lib/Search/Popover.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Popover = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.Popover = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Search/Popover',
+})) `
+  position: absolute;
+  top: calc(100% + 10px);
+  right: 0;
+  z-index: 100;
+  min-width: 100%;
+  width: 550px;
+  max-width: 90vw;
+  max-height: 400px;
+  overflow-y: auto;
+  box-shadow: var(--search-popover-shadow);
+  background: var(--search-popover-background-color);
+  list-style: none;
+  border-radius: var(--search-popover-border-radius);
+  border: var(--search-popover-border);
+`;
+//# sourceMappingURL=Popover.js.map

package/lib/Search/Search.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const usePreloadHistory_1 = require("../mocks/usePreloadHistory");
+const search_1 = require("../mocks/search");
+const Autocomplete_1 = require("../Search/Autocomplete");
+const ClearIcon_1 = require("../Search/ClearIcon");
+const SearchIcon_1 = require("../Search/SearchIcon");
+const SearchItem_1 = require("../Search/SearchItem");
+function Search() {
+    const history = (0, usePreloadHistory_1.usePreloadHistory)();
+    const { query, setQuery, items } = (0, search_1.useFuseSearch)();
+    // TODO: ask somebody about typings
+    const navigate = (item) => history.push(item.url);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Search" },
+        react_1.default.createElement(Autocomplete_1.Autocomplete, { items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: (item) => react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item }) }, (isOpen, reset) => (isOpen ? react_1.default.createElement(ClearIcon_1.ClearIcon, { onClick: reset }) : react_1.default.createElement(SearchIcon_1.SearchIcon, null)))));
+}
+exports.Search = Search;
+const Wrapper = styled_components_1.default.div `
+  margin: 0 auto;
+`;
+//# sourceMappingURL=Search.js.map

package/lib/Search/SearchIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = (props) => (react_1.default.createElement("svg", Object.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),
+    react_1.default.createElement("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).attrs(() => ({
+    'data-component-name': 'Search/SearchIcon',
+})) `
+  position: absolute;
+  cursor: pointer;
+  width: 1em;
+  height: 1em;
+  right: 1em;
+  fill: var(--search-input-text-color);
+  z-index: -1;
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 1.2em;
+    height: 1.2em;
+  }
+`;
+//# sourceMappingURL=SearchIcon.js.map

package/lib/Search/SearchItem.js

@@ -0,0 +1,98 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchItem = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const OperationBadge_1 = require("../OperationBadge");
+const Link_1 = require("../mocks/Link");
+const Parameters_1 = require("../Search/Parameters");
+const utils_1 = require("../Search/utils");
+function SearchItem({ item }) {
+    var _a, _b;
+    const ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (item.active) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [item.active]);
+    return (react_1.default.createElement(SearchLink, { to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        item.httpVerb ? (react_1.default.createElement(Operation, null,
+            react_1.default.createElement(OperationBadge_1.OperationBadge, { type: item.httpVerb }, item.httpVerb),
+            item.pathName ? (0, utils_1.highlight)(item.pathName) : null)) : null,
+        react_1.default.createElement(Title, null, (0, utils_1.highlight)(item.title)),
+        react_1.default.createElement(Description, null, (0, utils_1.highlight)(item.text)),
+        ((_a = item.parameters) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(Parameters_1.Parameters, { parameters: item.parameters })) : (react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → ')))));
+}
+exports.SearchItem = SearchItem;
+const Title = styled_components_1.default.div `
+  font-weight: var(--font-weight-bold);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: var(--line-height-base);
+`;
+const SearchLink = (0, styled_components_1.default)(Link_1.Link) `
+  display: block;
+  text-decoration: none;
+  padding: var(--search-item-padding);
+  transition: background-color 0.3s ease;
+  outline: none;
+  white-space: nowrap;
+  color: var(--search-item-text-color);
+  background-color: var(--search-item-background-color);
+
+  &:hover,
+  &:focus {
+    color: var(--search-item-active-text-color);
+    background-color: var(--search-item-active-background-color);
+    ${Title} {
+      color: var(--search-item-active-title-text-color);
+    }
+  }
+`;
+const Operation = styled_components_1.default.div `
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-small);
+  color: var(--search-item-title-text-color);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Description = styled_components_1.default.div `
+  font-size: var(--font-size-base);
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+const Path = styled_components_1.default.div `
+  font-size: var(--font-size-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 22px;
+`;
+//# sourceMappingURL=SearchItem.js.map

package/lib/Search/SidebarSearch.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SidebarSearch = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const Search_1 = require("../Search/Search");
+const Popover_1 = require("../Search/Popover");
+exports.SidebarSearch = (0, styled_components_1.default)(Search_1.Search).attrs(() => ({
+    'data-component-name': 'Search/SidebarSearch',
+})) `
+  --search-input-text-color: var(--sidebar-item-active-color);
+
+  ${Popover_1.Popover} {
+    right: unset;
+    top: 100%;
+  }
+`;
+//# sourceMappingURL=SidebarSearch.js.map

package/{Search → lib/Search}/index.js

@@ -23,3 +23,4 @@ __exportStar(require("../Search/Search"), exports);
 __exportStar(require("../Search/SearchIcon"), exports);
 __exportStar(require("../Search/SearchItem"), exports);
 __exportStar(require("../Search/utils"), exports);
+//# sourceMappingURL=index.js.map

package/{Search → lib/Search}/utils.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -26,38 +22,24 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.highlight = void 0;
-var React = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var highlight = function (text) {
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const highlight = (text) => {
     if (!Array.isArray(text))
         return text;
-    var _a = __read(text, 3), pre = _a[0], entry = _a[1], suf = _a[2];
+    const [pre, entry, suf] = text;
     return (React.createElement(React.Fragment, null,
         pre,
         React.createElement(Strong, null, entry),
         suf));
 };
 exports.highlight = highlight;
-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;
+const Strong = styled_components_1.default.strong `
+  color: var(--search-highlight-text-color);
+`;
+//# sourceMappingURL=utils.js.map

package/lib/Sidebar/ApiCallItem.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = exports.ApiCallItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const OperationBadge_1 = require("../OperationBadge");
+const MenuLinkItem_1 = require("../Sidebar/MenuLinkItem");
+const SeparatorLine_1 = require("../Sidebar/SeparatorLine");
+const MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
+function ApiCallItem({ item }) {
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/ApiCallItem" },
+        react_1.default.createElement(MenuLinkItem_1.MenuLinkItem, { item: item },
+            react_1.default.createElement(MenuItemLabel_1.MenuItemLabel, { active: item.active },
+                react_1.default.createElement(exports.Badge, { type: item.httpVerb || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb),
+                item.label)),
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.ApiCallItem = ApiCallItem;
+const Wrapper = styled_components_1.default.div ``;
+exports.Badge = (0, styled_components_1.default)(OperationBadge_1.OperationBadge) `
+  flex-shrink: 0;
+  margin-top: 0;
+  width: 36px;
+  height: 14px;
+  font-size: var(--sidebar-item-badge-http-font-size);
+  font-family: var(--sidebar-item-badge-http-font-family);
+  font-weight: var(--sidebar-item-badge-http-font-weight);
+  border-radius: var(--sidebar-item-badge-http-border-radius);
+  color: var(--sidebar-item-badge-http-text-color);
+`;
+//# sourceMappingURL=ApiCallItem.js.map

package/lib/Sidebar/ArrowBack.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrowBack = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Arrow = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ArrowBack" },
+    react_1.default.createElement("svg", { fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 10", width: "12px", height: "10px", className: className },
+        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) `
+  fill: var(--sidebar-back-button-icon-color);
+  margin-right: calc(var(--sidebar-spacing-unit) * 1.5);
+
+  background-image: var(--sidebar-back-button-icon);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+`;
+//# sourceMappingURL=ArrowBack.js.map

package/lib/Sidebar/BackButton.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BackButton = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ArrowBack_1 = require("../Sidebar/ArrowBack");
+function BackButton({ children, back, }) {
+    return (react_1.default.createElement(Button, { onClick: back, "data-component-name": "Sidebar/BackButton" },
+        react_1.default.createElement(ArrowBack_1.ArrowBack, null),
+        children));
+}
+exports.BackButton = BackButton;
+const Button = styled_components_1.default.button `
+  width: 100%;
+  background-color: var(--sidebar-back-button-background-color);
+  padding: 0;
+  border: 0;
+  outline: 0;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  color: var(--sidebar-back-button-text-color);
+  font-size: var(--sidebar-back-button-font-size);
+  font-family: var(--sidebar-back-button-font-family);
+  text-transform: var(--sidebar-back-button-transform);
+
+  transition: color 0.25s ease;
+  text-align: left;
+  margin: var(--sidebar-back-button-margin);
+
+  &:hover {
+    color: var(--sidebar-back-button-hover-text-color);
+    background: var(--sidebar-back-button-hover-background-color);
+  }
+`;
+//# sourceMappingURL=BackButton.js.map

package/lib/Sidebar/Drilldown.js

@@ -0,0 +1,43 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drilldown = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const MenuItemLabel_1 = require("../Sidebar/MenuItemLabel");
+const SeparatorLine_1 = require("../Sidebar/SeparatorLine");
+const DrilldownMenuItem_1 = require("../Sidebar/DrilldownMenuItem");
+const DrilldownMenu_1 = require("../Sidebar/DrilldownMenu");
+function Drilldown(_a) {
+    var { isExpanded, item, expand } = _a, props = __rest(_a, ["isExpanded", "item", "expand"]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Sidebar/Drilldown" },
+        react_1.default.createElement(DrilldownLabel, { onClick: expand },
+            react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })),
+        isExpanded ? react_1.default.createElement(DrilldownMenu_1.DrilldownMenu, Object.assign({ item: item }, props)) : null,
+        item.separatorLine ? react_1.default.createElement(SeparatorLine_1.SeparatorLine, null) : null));
+}
+exports.Drilldown = Drilldown;
+const Wrapper = styled_components_1.default.div ``;
+const DrilldownLabel = (0, styled_components_1.default)(MenuItemLabel_1.MenuItemLabel) `
+  padding: var(--sidebar-item-nested-offset) var(--sidebar-item-padding-horizontal);
+  font-weight: var(--font-weight-bold);
+
+  &:hover {
+    color: initial;
+    background-color: initial;
+  }
+`;
+//# sourceMappingURL=Drilldown.js.map

package/lib/Sidebar/DrilldownMenu.js

@@ -0,0 +1,71 @@
+"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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrilldownMenu = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const BackButton_1 = require("../Sidebar/BackButton");
+const DrilldownMenuItem_1 = require("../Sidebar/DrilldownMenuItem");
+function DrilldownMenu({ item, back, prevActiveItem, children, }) {
+    return (react_1.default.createElement(MenuContainer, { "data-component-name": "Sidebar/DrilldownMenu" },
+        react_1.default.createElement(MenuContent, null,
+            react_1.default.createElement(MenuWrapper, null,
+                react_1.default.createElement(BackButton_1.BackButton, { back: back }, (prevActiveItem === null || prevActiveItem === void 0 ? void 0 : prevActiveItem.label) || 'Back'),
+                react_1.default.createElement(DrilldownMenuItem_1.DrilldownMenuItem, { item: item })),
+            children)));
+}
+exports.DrilldownMenu = DrilldownMenu;
+const MenuContainer = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: var(--sidebar-item-drilldown-background-color);
+`;
+const slideInAnimation = (0, styled_components_1.keyframes) `
+  0% {
+    transform: translateX(100%)
+  }
+  100% {
+    transform: translateX(0%)
+  }
+`;
+const MenuContent = styled_components_1.default.div `
+  animation-name: ${slideInAnimation};
+  animation-fill-mode: forwards;
+  animation-duration: 0.3s;
+  animation-timing-function: ease;
+  background-color: transparent;
+`;
+const MenuWrapper = styled_components_1.default.div `
+  padding: var(--sidebar-item-padding-vertical) var(--sidebar-item-padding-horizontal);
+  margin-bottom: calc(var(--sidebar-spacing-unit) * 3);
+  word-break: break-word;
+`;
+//# sourceMappingURL=DrilldownMenu.js.map

package/lib/Sidebar/DrilldownMenuItem.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DrilldownMenuItem = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function DrilldownMenuItem({ item }) {
+    return (react_1.default.createElement(Container, { "data-component-name": "Sidebar/DrilldownMenuItem" },
+        item.icon ? react_1.default.createElement(Icon, { src: item.icon }) : null,
+        react_1.default.createElement("div", null,
+            item.label,
+            item.sublabel ? react_1.default.createElement(SubLabel, null, item.sublabel) : null)));
+}
+exports.DrilldownMenuItem = DrilldownMenuItem;
+const Container = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  color: var(--sidebar-item-drilldown-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--sidebar-item-drilldown-font-size);
+  font-family: var(--sidebar-item-drilldown-font-family);
+  text-transform: var(--sidebar-text-drilldown-transform);
+  background: var(--sidebar-item-drilldown-background-color);
+`;
+const Icon = styled_components_1.default.img `
+  width: var(--sidebar-item-icon-size);
+  height: var(--sidebar-item-icon-size);
+  margin-right: var(--sidebar-spacing-unit);
+  border-radius: var(--sidebar-item-icon-border-radius);
+  flex-shrink: 0;
+  overflow: hidden;
+`;
+const SubLabel = styled_components_1.default.div `
+  margin-top: 2px;
+  color: var(--sidebar-item-sublabel-text-color);
+  font-weight: var(-sidebar-item-sublabel-font-weight);
+  font-size: var(--sidebar-item-sublabel-font-size);
+  font-family: var(--sidebar-item-sublabel-font-family);
+`;
+//# sourceMappingURL=DrilldownMenuItem.js.map

package/lib/Sidebar/ExternalIcon.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "Sidebar/ExternalIcon" },
+    react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", version: "1.1", x: "0px", y: "0px", viewBox: "0 0 100 125", enableBackground: "new 0 0 100 100", className: className },
+        react_1.default.createElement("path", { d: "M-408.167-318.5" }),
+        react_1.default.createElement("line", { fill: "none", stroke: "#ffffff", strokeWidth: "0.25", strokeMiterlimit: "10", x1: "57.5", y1: "11.75", x2: "57.5", y2: "17.5" }),
+        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) `
+  width: 10px;
+  height: 10px;
+  margin-left: 5px;
+  fill: var(--sidebar-group-item-chevron-color);
+`;
+//# sourceMappingURL=ExternalIcon.js.map