@redocly/theme 0.1.7 → 0.1.10

package/Navbar/NavbarMenu.js

@@ -18,18 +18,22 @@ 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) {
         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;
-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  list-style: none;\n  margin: 0;\n  padding: 0;\n  display: block;\n"])));
+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;
+});
 var templateObject_1;

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/OperationBadge.d.ts

@@ -0,0 +1,5 @@
+export declare const OperationBadge: import("styled-components").StyledComponent<"span", any, {
+    className: `operation-type ${string}`;
+} & {
+    type: string;
+}, "className">;

package/OperationBadge/OperationBadge.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.OperationBadge = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.OperationBadge = styled_components_1.default.span.attrs(function (props) { return ({
+    className: "operation-type ".concat(props.type),
+}); })(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"], ["\n  display: inline-block;\n  font-size: var(--http-badge-menu-font-size);\n  font-family: var(--http-badge-font-family);\n  font-weight: var(--http-badge-font-weight);\n  line-height: var(--http-badge-menu-line-height);\n  color: var(--http-badge-color);\n  background-color: #333;\n  border-radius: var(--http-badge-border-radius);\n  width: 36px;\n  height: 14px;\n  text-transform: uppercase;\n  text-align: center;\n  margin-right: 6px;\n\n  &.get {\n    background-color: var(--color-http-get);\n  }\n\n  &.post {\n    background-color: var(--color-http-post);\n  }\n\n  &.put {\n    background-color: var(--color-http-put);\n  }\n\n  &.options {\n    background-color: var(--color-http-options);\n  }\n\n  &.patch {\n    background-color: var(--color-http-patch);\n  }\n\n  &.delete {\n    background-color: var(--color-http-delete);\n  }\n\n  &.basic {\n    background-color: var(--color-http-basic);\n  }\n\n  &.link {\n    background-color: var(--color-http-link);\n  }\n\n  &.head {\n    background-color: var(--color-http-head);\n  }\n\n  &.hook {\n    background-color: var(--color-http-hook);\n  }\n"])));
+var templateObject_1;

package/OperationBadge/index.d.ts

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

package/OperationBadge/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("../OperationBadge/OperationBadge"), exports);

package/PageNavigation/NextPageLink.d.ts

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

package/PageNavigation/NextPageLink.js

@@ -0,0 +1,25 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NextPageLink = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var usePageData_1 = require("../mocks/hooks/usePageData");
+var ui_1 = require("../ui");
+function NextPageLink() {
+    var nextPage = (0, usePageData_1.usePageData)().nextPage;
+    if (!nextPage) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
+    }
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Button, __assign({ variant: "outlined", size: "large", to: nextPage.link }, { children: ["Next to ", nextPage.label] })));
+}
+exports.NextPageLink = NextPageLink;

package/PageNavigation/PageNavigation.d.ts

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

package/PageNavigation/PageNavigation.js

@@ -0,0 +1,31 @@
+"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.PageNavigation = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var PreviousPageLink_1 = require("../PageNavigation/PreviousPageLink");
+var NextPageLink_1 = require("../PageNavigation/NextPageLink");
+function PageNavigation() {
+    return ((0, jsx_runtime_1.jsxs)(PageNavigationWrapper, __assign({ "data-component-name": "PageNavigation/PageNavigation" }, { children: [(0, jsx_runtime_1.jsx)(PreviousPageLink_1.PreviousPageLink, {}), (0, jsx_runtime_1.jsx)(NextPageLink_1.NextPageLink, {})] })));
+}
+exports.PageNavigation = PageNavigation;
+var PageNavigationWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0px;\n"], ["\n  display: flex;\n  justify-content: space-between;\n  margin: 25px 0px;\n"])));
+var templateObject_1;

package/PageNavigation/PreviousPageLink.d.ts

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

package/PageNavigation/PreviousPageLink.js

@@ -0,0 +1,25 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreviousPageLink = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var usePageData_1 = require("../mocks/hooks/usePageData");
+var ui_1 = require("../ui");
+function PreviousPageLink() {
+    var prevPage = (0, usePageData_1.usePageData)().prevPage;
+    if (!prevPage) {
+        return (0, jsx_runtime_1.jsx)("div", { children: "\u00A0" });
+    }
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Button, __assign({ variant: "outlined", size: "large", to: prevPage.link }, { children: ["Back to ", prevPage.label] })));
+}
+exports.PreviousPageLink = PreviousPageLink;

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/CodePanel.js

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodePanel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var ShelfIcon_1 = require("../icons/ShelfIcon");
-var Panel_1 = require("./Panel");
-var PanelHeader_1 = require("./PanelHeader");
-var DarkHeader_1 = require("./DarkHeader");
-var PanelBody_1 = require("./PanelBody");
-var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
-exports.CodePanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"], ["\n  > ", " {\n    ", ";\n    min-height: 50px;\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"])), PanelHeader_1.PanelHeader, DarkHeader_1.DarkHeader, ShelfIcon_1.ShelfIcon, PanelHeaderTitle_1.PanelHeaderTitle, PanelBody_1.PanelBody);
+var Panel_1 = require("../Panel/Panel");
+var PanelHeader_1 = require("../Panel/PanelHeader");
+var DarkHeader_1 = require("../Panel/DarkHeader");
+var PanelBody_1 = require("../Panel/PanelBody");
+var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
+exports.CodePanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > ", " {\n    ", ";\n    min-height: 50px;\n\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"], ["\n  > ", " {\n    ", ";\n    min-height: 50px;\n\n    ", " {\n      fill: var(--color-content-inverse);\n      position: relative;\n    }\n\n    ", " {\n      color: var(--color-content-inverse);\n    }\n  }\n\n  && {\n    ", " {\n      padding: 10px 20px 20px;\n      background-color: var(--samples-panel-background-color);\n      color: var(--color-content-inverse);\n    }\n  }\n"])), PanelHeader_1.PanelHeader, DarkHeader_1.DarkHeader, ShelfIcon_1.ShelfIcon, PanelHeaderTitle_1.PanelHeaderTitle, PanelBody_1.PanelBody);
 var templateObject_1;

package/Panel/ContentPanel.js

@@ -10,9 +10,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContentPanel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var ShelfIcon_1 = require("../icons/ShelfIcon");
-var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
-var Panel_1 = require("./Panel");
-var PanelBody_1 = require("./PanelBody");
-var PanelHeader_1 = require("./PanelHeader");
+var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
+var Panel_1 = require("../Panel/Panel");
+var PanelBody_1 = require("../Panel/PanelBody");
+var PanelHeader_1 = require("../Panel/PanelHeader");
 exports.ContentPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"], ["\n  border: 1px solid var(--global-border-color);\n\n  font-size: var(--font-size-base);\n  font-weight: var(--font-weight-regular);\n  line-height: var(--line-height-base);\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n    font-size: 18px;\n    font-weight: var(--font-weight-bold);\n    background-color: var(--panels-background-color);\n\n    ", " {\n      color: var(--color-content);\n    }\n\n    ", " {\n      fill: var(--color-content);\n    }\n  }\n\n  > ", " {\n    padding: calc(var(--spacing-unit) * 4);\n  }\n\n  > ", " + ", " {\n    padding-top: 1px; /* to prevent border overflow */\n  }\n"])), PanelHeader_1.PanelHeader, PanelHeaderTitle_1.PanelHeaderTitle, ShelfIcon_1.ShelfIcon, PanelBody_1.PanelBody, PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
 var templateObject_1;

package/Panel/Panel.d.ts

@@ -1,2 +1,2 @@
-import { PanelComponent } from './PanelComponent';
+import { PanelComponent } from '../Panel/PanelComponent';
 export declare const Panel: import("styled-components").StyledComponent<typeof PanelComponent, any, {}, never>;

package/Panel/Panel.js

@@ -9,8 +9,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Panel = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
-var PanelBody_1 = require("./PanelBody");
-var PanelComponent_1 = require("./PanelComponent");
-var PanelHeader_1 = require("./PanelHeader");
+var PanelHeader_1 = require("../Panel/PanelHeader");
+var PanelBody_1 = require("../Panel/PanelBody");
+var PanelComponent_1 = require("../Panel/PanelComponent");
 exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"], ["\n  border-radius: var(--panels-border-radius);\n\n  ", " + ", " {\n    border-top-left-radius: 0;\n    border-top-right-radius: 0;\n  }\n\n  &:not(:last-child) {\n    margin-bottom: 10px;\n  }\n"])), PanelHeader_1.PanelHeader, PanelBody_1.PanelBody);
 var templateObject_1;

package/Panel/PanelComponent.d.ts

@@ -1,5 +1,5 @@
 import { PropsWithChildren, ReactNode } from 'react';
-import { PanelHeaderProps } from './PanelHeader';
+import { PanelHeaderProps } from '../Panel/PanelHeader';
 export interface PanelComponentProps {
     expanded?: boolean;
     className?: string;

package/Panel/PanelComponent.js

@@ -23,9 +23,9 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var styled_components_1 = __importDefault(require("styled-components"));
 var icons_1 = require("../icons");
-var PanelBody_1 = require("./PanelBody");
-var PanelHeader_1 = require("./PanelHeader");
-var PanelHeaderTitle_1 = require("./PanelHeaderTitle");
+var PanelBody_1 = require("../Panel/PanelBody");
+var PanelHeader_1 = require("../Panel/PanelHeader");
+var PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
 function PanelComponent(_a) {
     var _b = _a.expanded, expanded = _b === void 0 ? true : _b, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle;
     var _c = (0, react_1.useState)(expanded), isExpanded = _c[0], setExpanded = _c[1];

package/Panel/index.d.ts

@@ -1,7 +1,8 @@
-export * from './CodePanel';
-export * from './ContentPanel';
-export * from './DarkHeader';
-export * from './Panel';
-export * from './PanelBody';
-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,10 +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("./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.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+import { ActiveItem } from '../mocks/models';
+interface AutocompleteProps<T> {
+    placeholder?: string;
+    value: string;
+    items: T[];
+    renderItem(item: ActiveItem<T>): ReactNode;
+    change(value: string): void;
+    select(item: T): void;
+    children?(isOpen: boolean, close: () => void): ReactNode;
+}
+export declare function Autocomplete<T>({ placeholder, value, items, change, select, renderItem, children, }: AutocompleteProps<T>): JSX.Element;
+export {};

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-content);\n"], ["\n  padding: 24px;\n  color: var(--color-content);\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 {};