@redocly/theme 0.1.7 → 0.1.8

package/Search/Autocomplete.js

@@ -0,0 +1,79 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Autocomplete = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Input_1 = require("../Search/Input");
+var Popover_1 = require("../Search/Popover");
+function Autocomplete(_a) {
+    var placeholder = _a.placeholder, value = _a.value, items = _a.items, change = _a.change, select = _a.select, renderItem = _a.renderItem, children = _a.children;
+    var location = (0, react_router_dom_1.useLocation)();
+    var _b = (0, react_1.useState)(false), isOpen = _b[0], setIsOpen = _b[1];
+    var _c = (0, react_1.useState)(-1), activeIdx = _c[0], setActiveIdx = _c[1];
+    var open = function () { return setIsOpen(true); };
+    var close = function () {
+        setIsOpen(false);
+        setActiveIdx(-1);
+    };
+    var reset = function () {
+        change('');
+        close();
+    };
+    var stopPropagation = function (event) { return event.stopPropagation(); };
+    var onChange = function (event) {
+        setActiveIdx(-1);
+        change(event.target.value);
+    };
+    var onKeydown = function (event) {
+        switch (event.code) {
+            case 'Escape':
+                close();
+                event.currentTarget.blur();
+                break;
+            case 'ArrowDown':
+                setActiveIdx(Math.min(activeIdx + 1, items.length - 1));
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                setActiveIdx(Math.max(0, activeIdx - 1));
+                break;
+            case 'Enter':
+                if (activeIdx > -1) {
+                    select(items[activeIdx]);
+                }
+                break;
+        }
+    };
+    var mapItem = function (item, idx) {
+        var active = idx === activeIdx;
+        return renderItem(__assign(__assign({}, item), { active: active }));
+    };
+    (0, react_1.useEffect)(close, [location]);
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Search/Autocomplete" }, { children: [isOpen ? (0, jsx_runtime_1.jsx)(Overlay, { onClick: close }) : null, (0, jsx_runtime_1.jsxs)(AutocompleteBox, __assign({ onKeyDown: onKeydown }, { children: [(0, jsx_runtime_1.jsx)(Input_1.FormInput, { value: value, placeholder: placeholder, onChange: onChange, onFocus: open, onClick: stopPropagation }), children === null || children === void 0 ? void 0 : children(isOpen, reset), isOpen && value ? ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { children: items.length ? items.map(mapItem) : (0, jsx_runtime_1.jsx)(Message, { children: "No results" }) })) : null] }))] })));
+}
+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 templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/Search/ClearIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const ClearIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;

package/Search/ClearIcon.js

@@ -0,0 +1,29 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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 " }) })) }))); };
+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;
+});
+var templateObject_1;

package/Search/Input.d.ts

@@ -0,0 +1,3 @@
+export declare const FormInput: import("styled-components").StyledComponent<"input", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Search/Input.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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(--input-background-color);\n  border-radius: var(--input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--input-text-color);\n  font-size: var(--input-font-size);\n  font-family: var(--input-font-family);\n  line-height: var(--input-line-height);\n\n  ::placeholder {\n    color: var(--input-text-color);\n  }\n"], ["\n  padding: 1em 2.5em 1em 1em;\n  background-color: var(--input-background-color);\n  border-radius: var(--input-border-radius);\n  border: none;\n  outline: none;\n  color: var(--input-text-color);\n  font-size: var(--input-font-size);\n  font-family: var(--input-font-family);\n  line-height: var(--input-line-height);\n\n  ::placeholder {\n    color: var(--input-text-color);\n  }\n"])));
+var templateObject_1;

package/Search/Parameters.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { OperationParameter } from '../mocks/models';
+interface ParametersProps {
+    parameters: OperationParameter[];
+}
+export declare function Parameters({ parameters }: ParametersProps): JSX.Element;
+export {};

package/Search/Parameters.js

@@ -0,0 +1,42 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Parameters = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var utils_1 = require("../Search/utils");
+var MAX_ITEMS = 2;
+function Parameters(_a) {
+    var _b = _a.parameters, parameters = _b === void 0 ? [] : _b;
+    var moreItems = Math.max(0, parameters.length - MAX_ITEMS);
+    if (moreItems) {
+        parameters.length = MAX_ITEMS;
+    }
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, __assign({ "data-component-name": "Search/Parameters" }, { children: [parameters.map(function (param) {
+                var _a, _b;
+                var path = "".concat(param.place, " \u2192 ").concat(((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : '');
+                return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Place, { children: [path, (0, utils_1.highlight)(param.name), " ", (0, jsx_runtime_1.jsx)("br", {}), (0, utils_1.highlight)(param.description)] }) }));
+            }), 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 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 templateObject_1, templateObject_2, templateObject_3;

package/Search/Popover.d.ts

@@ -0,0 +1,3 @@
+export declare const Popover: import("styled-components").StyledComponent<"div", any, {
+    'data-component-name': string;
+}, "data-component-name">;

package/Search/Popover.js

@@ -0,0 +1,15 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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(--popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--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(--popover-backgrond-color);\n  list-style: none;\n  border-radius: var(--popover-border-radius);\n"])));
+var templateObject_1;

package/Search/Search.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Search(): JSX.Element;

package/Search/Search.js

@@ -0,0 +1,39 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Search = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var usePreloadHistory_1 = require("../mocks/usePreloadHistory");
+var search_1 = require("../mocks/search");
+var Autocomplete_1 = require("../Search/Autocomplete");
+var ClearIcon_1 = require("../Search/ClearIcon");
+var SearchIcon_1 = require("../Search/SearchIcon");
+var SearchItem_1 = require("../Search/SearchItem");
+function Search() {
+    var history = (0, usePreloadHistory_1.usePreloadHistory)();
+    var _a = (0, search_1.useFuseSearch)(), query = _a.query, setQuery = _a.setQuery, items = _a.items;
+    // TODO: ask somebody about typings
+    var navigate = function (item) { return history.push(item.url); };
+    return ((0, jsx_runtime_1.jsx)(Wrapper, __assign({ "data-component-name": "Search/Search" }, { children: (0, jsx_runtime_1.jsx)(Autocomplete_1.Autocomplete, __assign({ items: items, value: query, change: setQuery, select: navigate, placeholder: "Search the docs", renderItem: function (item) { return (0, jsx_runtime_1.jsx)(SearchItem_1.SearchItem, { item: item }, item.id); } }, { children: function (isOpen, reset) { return (isOpen ? (0, jsx_runtime_1.jsx)(ClearIcon_1.ClearIcon, { onClick: reset }) : (0, jsx_runtime_1.jsx)(SearchIcon_1.SearchIcon, {})); } })) })));
+}
+exports.Search = Search;
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([""], [""])));
+var templateObject_1;

package/Search/SearchIcon.d.ts

@@ -0,0 +1,2 @@
+import { SVGProps } from 'react';
+export declare const SearchIcon: import("styled-components").StyledComponent<(props: SVGProps<SVGSVGElement>) => JSX.Element, any, {}, never>;

package/Search/SearchIcon.js

@@ -0,0 +1,29 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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" }) })) }))); };
+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;
+});
+var templateObject_1;

package/Search/SearchItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ActiveItem, SearchDocument } from '../mocks/models';
+interface SearchItemProps {
+    item: ActiveItem<SearchDocument>;
+}
+export declare function SearchItem({ item }: SearchItemProps): JSX.Element;
+export {};

package/Search/SearchItem.js

@@ -0,0 +1,47 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SearchItem = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var OperationBadge_1 = require("../OperationBadge");
+var Link_1 = require("../mocks/Link");
+var Parameters_1 = require("../Search/Parameters");
+var utils_1 = require("../Search/utils");
+function SearchItem(_a) {
+    var _b, _c;
+    var item = _a.item;
+    var ref = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
+        var _a;
+        if (item.active) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [item.active]);
+    return ((0, jsx_runtime_1.jsxs)(SearchLink, __assign({ to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" }, { children: [item.httpVerb ? ((0, jsx_runtime_1.jsxs)(Operation, { children: [(0, jsx_runtime_1.jsx)(OperationBadge_1.OperationBadge, __assign({ type: item.httpVerb }, { children: item.httpVerb })), (0, utils_1.highlight)(item.pathName)] })) : null, (0, jsx_runtime_1.jsx)(Title, { children: (0, utils_1.highlight)(item.title) }), (0, jsx_runtime_1.jsx)(Description, { children: (0, utils_1.highlight)(item.text) }), ((_b = item.parameters) === null || _b === void 0 ? void 0 : _b.length) ? ((0, jsx_runtime_1.jsx)(Parameters_1.Parameters, { parameters: item.parameters })) : ((0, jsx_runtime_1.jsx)(Path, { children: (_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-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 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.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const highlight: (text: string | string[]) => JSX.Element | string;

package/Search/utils.js

@@ -0,0 +1,21 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.highlight = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var highlight = function (text) {
+    if (!Array.isArray(text))
+        return text;
+    var pre = text[0], entry = text[1], suf = text[2];
+    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 templateObject_1;

package/Sidebar/ApiCallItem.d.ts

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

package/Sidebar/ApiCallItem.js

@@ -0,0 +1,35 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = 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"));
+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] })));
+}
+exports.default = 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

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

package/Sidebar/ArrowBack.js

@@ -0,0 +1,28 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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"])));
+var templateObject_1;

package/Sidebar/BackButton.d.ts

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

package/Sidebar/BackButton.js

@@ -0,0 +1,30 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var ArrowBack_1 = __importDefault(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] })));
+}
+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"])));
+var templateObject_1;

package/Sidebar/Drilldown.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+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 {};

package/Sidebar/Drilldown.js

@@ -0,0 +1,45 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 });
+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"));
+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] })));
+}
+exports.default = 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 templateObject_1, templateObject_2;

package/Sidebar/DrilldownMenu.d.ts

@@ -0,0 +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;

package/Sidebar/DrilldownMenu.js

@@ -0,0 +1,57 @@
+"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 __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 });
+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"));
+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] }) })));
+}
+exports.default = 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);
+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 templateObject_1, templateObject_2, templateObject_3, templateObject_4;