@redocly/theme 0.4.14 → 0.4.16

package/lib/PageNavigation/PreviousPageLink.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.PreviousPageLink = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../mocks/hooks");
+const useDefaultThemeSettings_1 = require("../hooks/useDefaultThemeSettings");
+const Button_1 = require("../Button/Button");
+function PreviousPageLink() {
+    var _a, _b;
+    const { prevPage } = (0, hooks_1.useSidebarSiblingsData)() || {};
+    const { navigation } = (0, useDefaultThemeSettings_1.useDefaultThemeSettings)();
+    if (!prevPage || (navigation === null || navigation === void 0 ? void 0 : navigation.hide) || ((_a = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _a === void 0 ? void 0 : _a.hide)) {
+        return react_1.default.createElement("div", null, "\u00A0");
+    }
+    const label = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.prevPageLink) === null || _b === void 0 ? void 0 : _b.label) || `Back to ${prevPage.label}`;
+    return (react_1.default.createElement(StyledButton, { variant: "outlined", size: "large", to: prevPage.link, "data-component-name": "PageNavigation/PreviousPageLink" }, label));
+}
+exports.PreviousPageLink = PreviousPageLink;
+const StyledButton = (0, styled_components_1.default)(Button_1.Button) `
+  font-family: var(--font-family-base);
+`;
+//# sourceMappingURL=PreviousPageLink.js.map

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

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../PageNavigation/NextPageLink"), exports);
 __exportStar(require("../PageNavigation/PageNavigation"), exports);
 __exportStar(require("../PageNavigation/PreviousPageLink"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Panel/Panel.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.Panel = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const PanelHeader_1 = require("../Panel/PanelHeader");
+const PanelBody_1 = require("../Panel/PanelBody");
+const PanelComponent_1 = require("../Panel/PanelComponent");
+const ShelfIcon_1 = require("../icons/ShelfIcon");
+exports.Panel = (0, styled_components_1.default)(PanelComponent_1.PanelComponent).attrs(({ className }) => ({
+    'data-component-name': 'Panel/Panel',
+    className: className || 'panel-default',
+})) `
+  background-color: var(--panel-background-color);
+  color: var(--panel-text-color);
+  font-family: var(--panel-font-family-local);
+  font-size: var(--panel-font-size-local);
+  font-weight: var(--panel-font-weight-local);
+  border-radius: var(--panel-border-radius-local);
+  border: var(--panel-border-local);
+
+  ${PanelHeader_1.PanelHeader} + ${PanelBody_1.PanelBody} {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  ${PanelHeader_1.PanelHeader} {
+    ${ShelfIcon_1.ShelfIcon} {
+      fill: var(--panel-chevron-icon-color);
+    }
+  }
+
+  &:not(:last-child) {
+    margin-bottom: var(--panel-gap-vertical);
+  }
+`;
+//# sourceMappingURL=Panel.js.map

package/lib/Panel/PanelBody.js

@@ -0,0 +1,59 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelBody = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const showPanel = (0, styled_components_1.keyframes) `
+  0% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+`;
+const showPanelAnimation = (0, styled_components_1.css) `
+  animation: ${showPanel} 0.2s;
+`;
+exports.PanelBody = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Panel/PanelBody',
+})) `
+  ${({ animate }) => animate && showPanelAnimation};
+  ${({ hidden }) => hidden && 'visibility: hidden'};
+
+  background-color: var(--panel-body-background-color);
+
+  font-family: var(--panel-body-font-family-local);
+  font-size: var(--panel-body-font-size-local);
+  font-weight: var(--panel-body-font-weight-local);
+  border: var(--panel-body-border-local);
+  padding: var(--panel-body-padding-local);
+  color: var(--panel-body-text-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: var(--panel-border-radius);
+  border-bottom-left-radius: var(--panel-border-radius);
+`;
+//# sourceMappingURL=PanelBody.js.map

package/{Panel → lib/Panel}/PanelComponent.d.ts

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

package/{Panel → lib/Panel}/PanelComponent.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,49 +22,31 @@ 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.InlineBox = exports.PanelComponent = void 0;
-var react_1 = __importStar(require("react"));
-var styled_components_1 = __importDefault(require("styled-components"));
-var icons_1 = require("../icons");
-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, _c = _a.renderChildrenHidden, renderChildrenHidden = _c === void 0 ? false : _c, header = _a.header, className = _a.className, children = _a.children, onToggle = _a.onToggle, description = _a.description;
-    var _d = __read((0, react_1.useState)(expanded), 2), isExpanded = _d[0], setExpanded = _d[1];
-    var _e = __read((0, react_1.useState)(false), 2), animate = _e[0], setAnimate = _e[1];
-    var toggle = function (_a) {
-        var target = _a.target;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const icons_1 = require("../icons");
+const PanelBody_1 = require("../Panel/PanelBody");
+const PanelHeader_1 = require("../Panel/PanelHeader");
+const PanelHeaderTitle_1 = require("../Panel/PanelHeaderTitle");
+function PanelComponent({ expanded = true, renderChildrenHidden = false, header, className, children, onToggle, description, }) {
+    const [isExpanded, setExpanded] = (0, react_1.useState)(expanded);
+    const [animate, setAnimate] = (0, react_1.useState)(false);
+    const toggle = ({ target }) => {
         if (target instanceof HTMLAnchorElement)
             return;
         setAnimate(true);
         setExpanded(!isExpanded);
         onToggle === null || onToggle === void 0 ? void 0 : onToggle(!isExpanded);
     };
-    (0, react_1.useEffect)(function () { return setExpanded(expanded); }, [expanded]);
+    (0, react_1.useEffect)(() => setExpanded(expanded), [expanded]);
     return (react_1.default.createElement("div", { className: className, "data-cy": typeof header === 'string' ? ('panel-' + header).replace(/ /g, '-').toLowerCase() : null, "data-component-name": "Panel/PanelComponent" },
         header &&
-            (typeof header === 'function' ? (header({ expanded: isExpanded, toggle: toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-cy": "panel-header", onClick: toggle, expanded: isExpanded },
+            (typeof header === 'function' ? (header({ expanded: isExpanded, toggle })) : (react_1.default.createElement(PanelHeader_1.PanelHeader, { "data-cy": "panel-header", onClick: toggle, expanded: isExpanded },
                 react_1.default.createElement(exports.InlineBox, null,
                     react_1.default.createElement(PanelHeaderTitle_1.PanelHeaderTitle, { "data-cy": "title" }, header),
                     react_1.default.createElement(icons_1.ShelfIcon, { direction: isExpanded ? 'down' : 'right' }),
@@ -76,5 +54,12 @@ function PanelComponent(_a) {
         (isExpanded || renderChildrenHidden) && (react_1.default.createElement(PanelBody_1.PanelBody, { "data-cy": "panel-body", hidden: !isExpanded, animate: animate }, children))));
 }
 exports.PanelComponent = PanelComponent;
-exports.InlineBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n\n  > span:last-child {\n    margin-left: 8px;\n  }\n"], ["\n  display: inline-flex;\n  align-items: center;\n\n  > span:last-child {\n    margin-left: 8px;\n  }\n"])));
-var templateObject_1;
+exports.InlineBox = styled_components_1.default.div `
+  display: inline-flex;
+  align-items: center;
+
+  > span:last-child {
+    margin-left: 8px;
+  }
+`;
+//# sourceMappingURL=PanelComponent.js.map

package/lib/Panel/PanelHeader.js

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PanelHeader = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelHeader = styled_components_1.default.div.attrs(() => ({
+    'data-component-name': 'Panel/PanelHeader',
+})) `
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  white-space: var(--panel-heading-white-space-local);
+
+  cursor: pointer;
+
+  line-height: var(--panel-heading-line-height-local);
+  font-size: var(--panel-heading-font-size-local);
+  padding: var(--panel-heading-padding-local);
+  border: var(--panel-heading-border);
+  background-color: var(--panel-heading-background-color);
+
+  border-top-left-radius: var(--panel-border-radius);
+  border-top-right-radius: var(--panel-border-radius);
+  border-bottom-right-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
+  border-bottom-left-radius: ${({ expanded }) => (expanded ? '0' : 'var(--panel-border-radius)')};
+
+  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
+`;
+//# sourceMappingURL=PanelHeader.js.map

package/lib/Panel/PanelHeaderTitle.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.PanelHeaderTitle = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.PanelHeaderTitle = styled_components_1.default.span.attrs(() => ({
+    'data-component-name': 'Panel/PanelHeaderTitle',
+})) `
+  margin-right: 5px;
+  font-weight: var(--panel-heading-font-weight-local);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  /* changed from var(--text-color-inverse) to var(--text-color)
+     should change several components in openapi/graphql reference-docs to use inverse color
+   */
+  color: var(--panel-heading-text-color);
+`;
+//# sourceMappingURL=PanelHeaderTitle.js.map

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

@@ -19,3 +19,4 @@ __exportStar(require("../Panel/PanelBody"), exports);
 __exportStar(require("../Panel/PanelComponent"), exports);
 __exportStar(require("../Panel/PanelHeader"), exports);
 __exportStar(require("../Panel/PanelHeaderTitle"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Profile/Profile.js

@@ -0,0 +1,87 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Profile = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../utils");
+function ProfileComponent({ name, imageUrl, onClick, color }) {
+    var _a;
+    if (imageUrl) {
+        return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+            react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+            imageUrl && (react_1.default.createElement(AvatarWrapper, null,
+                react_1.default.createElement("img", { "data-cy": "user-avatar", src: imageUrl, alt: "profile" })))));
+    }
+    const avatarLetters = `${name.charAt(0).toUpperCase()}${((_a = name.split(' ')[1]) === null || _a === void 0 ? void 0 : _a.charAt(0).toUpperCase()) || ''}`;
+    return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },
+        react_1.default.createElement(StyledUserName, { "data-cy": "user-name", color: color }, name),
+        react_1.default.createElement(AvatarWrapper, { background: (0, utils_1.stringToHslColor)(name) },
+            react_1.default.createElement("span", null, avatarLetters))));
+}
+exports.Profile = (0, react_1.memo)(ProfileComponent);
+const ProfileWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: auto;
+  padding: 0 var(--navbar-item-padding-horizontal);
+`;
+const StyledUserName = styled_components_1.default.span `
+  color: ${({ color }) => color || 'var(--navbar-text-color)'};
+`;
+const AvatarWrapper = styled_components_1.default.div `
+  width: 40px;
+  height: 40px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  font-size: 1.25rem;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 1;
+  user-select: none;
+  border-radius: 50%;
+  justify-content: center;
+  margin-left: 16px;
+
+  ${({ background }) => (0, styled_components_1.css) `
+    background-color: ${background};
+    span {
+      color: ${background};
+      filter: invert(100%);
+    }
+  `}
+
+  & > img {
+    color: transparent;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    text-align: center;
+    text-indent: 10000px;
+  }
+`;
+//# sourceMappingURL=Profile.js.map

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

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Profile = void 0;
 var Profile_1 = require("./Profile");
 Object.defineProperty(exports, "Profile", { enumerable: true, get: function () { return Profile_1.Profile; } });
+//# sourceMappingURL=index.js.map

package/lib/SamplesPanelControls/SamplesPanelControls.js

@@ -0,0 +1,74 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PreformattedCodeBlock = exports.SampleControlsWrap = exports.SampleControls = exports.SamplesControlButton = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+const CodeBlock_1 = require("../CodeBlock");
+exports.SamplesControlButton = styled_components_1.default.button.attrs(() => ({
+    'data-component-name': 'SamplesPanelControls/SamplesPanelControls',
+})) `
+  background-color: var(--panel-samples-controls-background-color);
+  border: 0;
+  outline: 0;
+  border-radius: var(--border-radius);
+  height: 20px;
+  color: var(--panel-samples-controls-text-color);
+  font-size: 12px;
+  line-height: 12px;
+  cursor: pointer;
+  padding: 1px 6px;
+  min-width: 90px;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    padding: 2px 20px;
+  }
+
+  :hover,
+  :focus {
+    background-color: var(--panel-samples-controls-hover-background-color);
+  }
+`;
+exports.SampleControls = styled_components_1.default.div `
+  padding: 10px 0;
+  opacity: 0.7;
+  transition: opacity 0.3s ease;
+  text-align: right;
+
+  &:focus-within {
+    opacity: 1;
+  }
+
+  > div,
+  > ${exports.SamplesControlButton} {
+    /* can have tooltip wrapper div also */
+    margin-top: 5px;
+    margin-left: 10px;
+
+    ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+      margin-top: 0;
+    }
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+`;
+exports.SampleControlsWrap = styled_components_1.default.div `
+  &:hover ${exports.SampleControls} {
+    opacity: 1;
+  }
+`;
+exports.PreformattedCodeBlock = (0, styled_components_1.default)(CodeBlock_1.CodeBlock.withComponent('pre')) `
+  overflow-x: auto;
+  margin: 0;
+  font-family: var(--code-font-family);
+  padding: 20px;
+  border-radius: var(--border-radius);
+  background-color: var(--panel-samples-controls-background-color);
+  color: var(--text-color-inverse);
+  font-size: var(--code-font-size);
+  white-space: var(--code-wrap, pre);
+`;
+//# sourceMappingURL=SamplesPanelControls.js.map

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

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../SamplesPanelControls/SamplesPanelControls"), exports);
+//# sourceMappingURL=index.js.map

package/lib/Search/Autocomplete.js

@@ -0,0 +1,105 @@
+"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.Autocomplete = void 0;
+const react_1 = __importStar(require("react"));
+const react_router_dom_1 = require("react-router-dom");
+const styled_components_1 = __importDefault(require("styled-components"));
+const Input_1 = require("../Search/Input");
+const Popover_1 = require("../Search/Popover");
+function Autocomplete({ placeholder, value, items, change, select, renderItem, children, }) {
+    const location = (0, react_router_dom_1.useLocation)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [activeIdx, setActiveIdx] = (0, react_1.useState)(-1);
+    const open = () => setIsOpen(true);
+    const close = () => {
+        setIsOpen(false);
+        setActiveIdx(-1);
+    };
+    const reset = () => {
+        change('');
+        close();
+    };
+    const stopPropagation = (event) => event.stopPropagation();
+    const onChange = (event) => {
+        setActiveIdx(-1);
+        change(event.target.value);
+    };
+    const onKeydown = (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;
+        }
+    };
+    const mapItem = (item, idx) => {
+        const active = idx === activeIdx;
+        return renderItem(Object.assign(Object.assign({}, item), { active }));
+    };
+    (0, react_1.useEffect)(close, [location]);
+    return (react_1.default.createElement(Wrapper, { "data-component-name": "Search/Autocomplete" },
+        isOpen ? react_1.default.createElement(Overlay, { onClick: close }) : null,
+        react_1.default.createElement(AutocompleteBox, { onKeyDown: onKeydown },
+            react_1.default.createElement(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 ? (react_1.default.createElement(Popover_1.Popover, null, items.length ? items.map(mapItem) : react_1.default.createElement(Message, null, "No results"))) : null)));
+}
+exports.Autocomplete = Autocomplete;
+const Wrapper = styled_components_1.default.div ``;
+const AutocompleteBox = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+`;
+const Overlay = styled_components_1.default.div `
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+`;
+const Message = styled_components_1.default.div `
+  padding: 24px;
+  color: var(--text-color);
+`;
+//# sourceMappingURL=Autocomplete.js.map

package/lib/Search/ClearIcon.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.ClearIcon = 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 298.7 298.7", "data-component-name": "Search/ClearIcon" }, props),
+    react_1.default.createElement("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).attrs(() => ({
+    'data-component-name': 'Search/ClearIcon',
+})) `
+  position: absolute;
+  cursor: pointer;
+  width: 0.5em;
+  height: 0.5em;
+  right: 1.2em;
+  fill: var(--search-input-text-color);
+
+  ${({ theme }) => theme.mediaQueries.medium} {
+    width: 0.625em;
+    height: 0.625em;
+  }
+`;
+//# sourceMappingURL=ClearIcon.js.map

package/lib/Search/Input.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormInput = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FormInput = styled_components_1.default.input.attrs(() => ({
+    'data-component-name': 'Search/Input',
+})) `
+  padding: 1em 2.5em 1em 1em;
+  background-color: var(--search-input-background-color);
+  border-radius: var(--search-input-border-radius);
+  border: var(--search-input-border);
+  outline: none;
+  color: var(--search-input-text-color);
+  font-size: var(--search-input-font-size);
+  font-family: var(--search-input-font-family);
+  line-height: var(--search-input-line-height);
+
+  ::placeholder {
+    color: var(--search-input-placeholder-color);
+  }
+
+  &:hover {
+    background-color: var(--search-input-hover-background-color);
+    border: var(--search-input-hover-border);
+  }
+`;
+//# sourceMappingURL=Input.js.map