@redocly/theme 0.13.1 → 0.14.0

package/lib/components/Search/SearchDialog.js

@@ -0,0 +1,136 @@
+"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.SearchDialog = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const search_1 = require("../../mocks/search");
+const InputWrapper_1 = require("../../components/Search/InputWrapper");
+const SearchItem_1 = require("../../components/Search/SearchItem");
+const hooks_1 = require("../../mocks/hooks");
+const Shortcut_1 = require("../../components/Search/Shortcut");
+const RecentSearches_1 = require("../../components/Search/RecentSearches");
+const SuggestedPages_1 = require("../../components/Search/SuggestedPages");
+const CancelSearch_1 = require("../../components/Search/CancelSearch");
+const useDialogHotKeys_1 = require("../../hooks/useDialogHotKeys");
+const SearchDialog = ({ onClose }) => {
+    const { query, setQuery, items, isLoading } = (0, search_1.useFuseSearch)();
+    const modalRef = (0, react_1.useRef)(null);
+    const { translate } = (0, hooks_1.useTranslate)();
+    (0, useDialogHotKeys_1.useDialogHotKeys)(modalRef, onClose);
+    const handleOverlayClick = (event) => {
+        var _a;
+        const target = event.target;
+        if (typeof target.className !== 'string')
+            return;
+        if ((_a = target.className) === null || _a === void 0 ? void 0 : _a.includes(' overlay')) {
+            onClose();
+        }
+    };
+    const translationKeys = {
+        noResults: 'theme.search.noResults',
+        navigate: 'theme.search.keys.navigate',
+        select: 'theme.search.keys.select',
+        exit: 'theme.search.keys.exit',
+    };
+    const mapItem = (item) => {
+        return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item });
+    };
+    return (react_1.default.createElement(Overlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: "overlay" },
+        react_1.default.createElement(Container, null,
+            react_1.default.createElement(TopContainer, null,
+                react_1.default.createElement(InputWrapper_1.InputWrapper, { value: query, change: setQuery, placeholder: translate('theme.search.label', 'Search all products...'), isLoading: isLoading })),
+            react_1.default.createElement(Results, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(Message, { "data-translation-key": translationKeys.noResults }, translate(translationKeys.noResults, 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(RecentSearches_1.RecentSearches, { onSelect: setQuery }),
+                react_1.default.createElement(SuggestedPages_1.SuggestedPages, null)))),
+            react_1.default.createElement(BottomContainer, null,
+                react_1.default.createElement(Shortcuts, null,
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": translationKeys.navigate, combination: "Tab", text: translate(translationKeys.navigate, 'to navigate') }),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": translationKeys.select, combination: "\u21B5", text: translate(translationKeys.select, 'to select') }),
+                    react_1.default.createElement(Shortcut_1.Shortcut, { "data-translation-key": translationKeys.exit, combination: "Esc", text: translate(translationKeys.exit, 'to exit') })),
+                react_1.default.createElement(CancelSearch_1.CancelSearch, { onClick: onClose })))));
+};
+exports.SearchDialog = SearchDialog;
+const Overlay = styled_components_1.default.div `
+  font-family: var(--font-family-base);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: var(--modal-overlay-background-color);
+  z-index: 10000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  & > * {
+    background: var(--modal-background-color);
+    box-shadow: var(--modal-box-shadow);
+    border-radius: 0;
+    width: 100vw;
+    height: 100vh;
+
+    ${({ theme }) => theme.mediaQueries.small} {
+      border-radius: 8px;
+      width: 600px;
+      height: auto;
+    }
+  }
+`;
+const Container = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+const Results = styled_components_1.default.div `
+  flex-grow: 1;
+  overflow-y: scroll;
+
+  ${({ theme }) => theme.mediaQueries.small} {
+    height: 224px;
+  }
+`;
+const BottomContainer = styled_components_1.default.footer ``;
+const Shortcuts = styled_components_1.default.div `
+  display: none;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 8px 16px 12px;
+  gap: 16px;
+
+  ${({ theme }) => { var _a; return (_a = theme.mediaQueries) === null || _a === void 0 ? void 0 : _a.small; }} {
+    display: flex;
+  }
+`;
+const Message = styled_components_1.default.div `
+  padding: 24px;
+  color: var(--search-item-title-text-color);
+`;
+const TopContainer = styled_components_1.default.header ``;
+//# sourceMappingURL=SearchDialog.js.map

package/lib/components/Search/SearchIcon.js

@@ -11,13 +11,11 @@ const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xm
 exports.SearchIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
     'data-component-name': 'Search/SearchIcon',
 })) `
-  position: absolute;
   cursor: pointer;
   width: 1em;
   height: 1em;
   left: 0.8em;
   fill: var(--search-input-text-color);
-  z-index: -1;
 
   ${({ theme }) => theme.mediaQueries.medium} {
     width: 1.2em;

package/lib/components/Search/SearchItem.js

@@ -31,7 +31,6 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const OperationBadge_1 = require("../../components/OperationBadge");
 const Link_1 = require("../../mocks/Link");
-const Parameters_1 = require("../../components/Search/Parameters");
 const utils_1 = require("../../components/Search/utils");
 function SearchItem({ item }) {
     var _a, _b;
@@ -42,18 +41,31 @@ function SearchItem({ item }) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [item.active]);
-    return (react_1.default.createElement(SearchLink, { to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    const header = (react_1.default.createElement(react_1.default.Fragment, null,
         item.httpVerb ? (react_1.default.createElement(Operation, null,
             react_1.default.createElement(OperationBadge_1.OperationBadge, { type: item.httpVerb }, item.httpVerb),
             item.pathName ? (0, utils_1.highlight)(item.pathName) : null)) : null,
         react_1.default.createElement(Title, null, (0, utils_1.highlight)(item.title)),
-        react_1.default.createElement(Description, null, (0, utils_1.highlight)(item.text)),
-        ((_a = item.parameters) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(Parameters_1.Parameters, { parameters: item.parameters })) : (react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → ')))));
+        Array.isArray(item.text) ? react_1.default.createElement(Description, null, (0, utils_1.highlight)(item.text)) : null));
+    return (react_1.default.createElement(react_1.default.Fragment, null, ((_a = item.parameters) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.default.Fragment, null, item.parameters.map((param, index) => {
+        var _a, _b;
+        const path = `${param.place} → ${((_a = param.path) === null || _a === void 0 ? void 0 : _a.length) ? ((_b = param.path) === null || _b === void 0 ? void 0 : _b.join(' → ')) + ' → ' : ''}`;
+        return (react_1.default.createElement(SearchLink, { key: `${item.id}-${index}`, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+            header,
+            react_1.default.createElement(Place, null,
+                react_1.default.createElement("div", null,
+                    path,
+                    (0, utils_1.highlight)(param.name)),
+                react_1.default.createElement("div", null, (0, utils_1.highlight)(param.description)))));
+    }))) : (react_1.default.createElement(SearchLink, { to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+        header,
+        react_1.default.createElement(Path, null, (_b = item.path) === null || _b === void 0 ? void 0 : _b.join(' → '))))));
 }
 exports.SearchItem = SearchItem;
 const Title = styled_components_1.default.div `
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-regular);
   color: var(--search-item-title-text-color);
+  padding: 6px 0 2px 0;
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: var(--line-height-base);
@@ -79,8 +91,8 @@ const SearchLink = (0, styled_components_1.default)(Link_1.Link) `
 `;
 const Operation = styled_components_1.default.div `
   font-weight: var(--font-weight-regular);
-  font-size: var(--font-size-small);
-  color: var(--search-item-title-text-color);
+  font-size: var(--font-size-base);
+  color: var(--search-item-path-text-color);
   overflow: hidden;
   text-overflow: ellipsis;
 `;
@@ -95,4 +107,16 @@ const Path = styled_components_1.default.div `
   text-overflow: ellipsis;
   line-height: 22px;
 `;
+const Place = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  font-size: var(--font-size-small);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  &:first-child {
+    padding-top: 0;
+  }
+`;
 //# sourceMappingURL=SearchItem.js.map

package/lib/components/Search/SearchTrigger.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function SearchTrigger({ onClick }: {
+    onClick: () => void;
+}): JSX.Element;

package/lib/components/Search/SearchTrigger.js

@@ -0,0 +1,80 @@
+"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.SearchTrigger = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const hooks_1 = require("../../hooks");
+const hooks_2 = require("../../mocks/hooks");
+const SearchIcon_1 = require("../../components/Search/SearchIcon");
+const ShortcutKey_1 = require("../../components/Search/ShortcutKey");
+function SearchTrigger({ onClick }) {
+    var _a, _b;
+    const themeSettings = (0, hooks_1.useThemeConfig)();
+    const { translate } = (0, hooks_2.useTranslate)();
+    const translationKeys = {
+        label: 'theme.search.navbar.label',
+    };
+    const keyShortcuts = (_b = (_a = themeSettings === null || themeSettings === void 0 ? void 0 : themeSettings.search) === null || _a === void 0 ? void 0 : _a.shortcuts) !== null && _b !== void 0 ? _b : ['/'];
+    return (React.createElement(Wrapper, { "data-component-name": "Search/SearchTrigger", onClick: onClick },
+        React.createElement(SearchIconSmall, null),
+        React.createElement(Label, { "data-translation-key": translationKeys.label }, translate(translationKeys.label, 'Search')),
+        React.createElement(ShortcutKey_1.ShortcutKey, { keyShortcuts: keyShortcuts })));
+}
+exports.SearchTrigger = SearchTrigger;
+const Wrapper = styled_components_1.default.div `
+  display: none;
+  align-items: center;
+  cursor: pointer;
+  color: var(--search-trigger-text-color);
+  background-color: var(--search-trigger-background-color);
+  border: var(--search-trigger-border);
+  border-radius: var(--search-trigger-border-radius);
+  padding: 5px 10px 5px 14px;
+  user-select: none;
+
+  :hover {
+    background-color: var(--search-trigger-hover-background-color);
+  }
+
+  ${({ theme }) => {
+    return (0, styled_components_1.css) `
+      ${theme.mediaQueries.small} {
+        display: flex;
+      }
+    `;
+}}
+`;
+const Label = styled_components_1.default.span `
+  padding-left: 10px;
+  padding-right: 16px;
+  font-size: var(--search-trigger-font-size);
+`;
+const SearchIconSmall = (0, styled_components_1.default)(SearchIcon_1.SearchIcon) `
+  width: 13px;
+  height: 13px;
+  fill: var(--search-trigger-text-color);
+`;
+//# sourceMappingURL=SearchTrigger.js.map

package/lib/components/Search/Shortcut.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare function Shortcut({ combination, text, }: {
+    combination: string;
+    text: string;
+}): JSX.Element;

package/lib/components/Search/Shortcut.js

@@ -0,0 +1,51 @@
+"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.Shortcut = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function Shortcut({ combination, text, }) {
+    return (React.createElement(Wrapper, { "data-component-name": "Search/Shortcut" },
+        React.createElement(Key, null, combination),
+        text));
+}
+exports.Shortcut = Shortcut;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  padding: 2px 4px;
+  gap: 8px;
+  color: var(--search-item-text-color);
+`;
+const Key = styled_components_1.default.span `
+  background: rgba(150, 150, 150, 0.1);
+  border: 1px solid rgba(100, 100, 100, 0.2);
+  border-radius: 3px;
+  font-size: 12px;
+  padding: 2px 6px;
+`;
+//# sourceMappingURL=Shortcut.js.map

package/lib/components/Search/ShortcutKey.js

@@ -21,15 +21,10 @@ function ShortcutKey(props) {
 }
 exports.ShortcutKey = ShortcutKey;
 exports.Wrapper = styled_components_1.default.div `
-  position: absolute;
   cursor: pointer;
-  font-size: 0.8em;
-  height: 2em;
-  line-height: 2em;
+  font-size: 0.75em;
   right: 1em;
-  fill: var(--search-input-text-color);
-  color: var(--search-input-placeholder-color);
+  color: var(--search-trigger-shortcut-text-color);
   opacity: 0.5;
-  z-index: -1;
 `;
 //# sourceMappingURL=ShortcutKey.js.map

package/lib/components/Search/SuggestedPages.d.ts

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

package/lib/components/Search/SuggestedPages.js

@@ -0,0 +1,107 @@
+"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.SuggestedPages = void 0;
+const React = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClockBackwardsIcon_1 = require("../../components/Search/ClockBackwardsIcon");
+const search_1 = require("../../mocks/search");
+const Link_1 = require("../../mocks/Link");
+const hooks_1 = require("../../mocks/hooks");
+function SuggestedPages() {
+    const pages = (0, search_1.useSuggestedPages)();
+    const { translate } = (0, hooks_1.useTranslate)();
+    const translationKeys = {
+        title: 'theme.search.suggested',
+    };
+    if (!pages.length)
+        return null;
+    return (React.createElement(Wrapper, { "data-component-name": "Search/SuggestedPages" },
+        React.createElement(Title, { "data-translation-key": translationKeys.title }, translate(translationKeys.title, 'Suggested pages')),
+        React.createElement(SuggestedItems, null, pages.map((page) => page.link && (React.createElement(Item, { key: page.label },
+            React.createElement(PageLink, Object.assign({ to: page.link }, page),
+                React.createElement(Group, null,
+                    React.createElement(ClockBackwardsIcon, null),
+                    page.label))))))));
+}
+exports.SuggestedPages = SuggestedPages;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+`;
+const Title = styled_components_1.default.div `
+  color: var(--search-item-title-text-color);
+  font-weight: var(--font-weight-bold);
+  font-size: var(--font-size-small);
+  line-height: 20px;
+  padding: 8px 24px;
+`;
+const SuggestedItems = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  order: 1;
+`;
+const ClockBackwardsIcon = (0, styled_components_1.default)(ClockBackwardsIcon_1.ClockBackwardsIcon) `
+  width: 16px;
+  height: 16px;
+  fill: #8d8d8d;
+`;
+const Item = styled_components_1.default.div `
+  display: flex;
+  font-size: var(--font-size-base);
+  align-items: center;
+  padding: 0 12px 4px;
+  width: 100%;
+`;
+const PageLink = (0, styled_components_1.default)(Link_1.Link) `
+  text-decoration: none;
+  color: var(--search-item-text-color);
+  width: 100%;
+  padding: 8px 12px;
+  cursor: pointer;
+
+  :hover {
+    background-color: var(--search-item-active-background-color);
+    color: var(--search-item-active-text-color);
+
+    ${ClockBackwardsIcon} {
+      fill: var(--search-item-active-text-color);
+    }
+  }
+  :focus-visible {
+    outline: 2px solid var(--color-primary-200);
+    border-radius: 2px;
+  }
+`;
+const Group = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+//# sourceMappingURL=SuggestedPages.js.map

package/lib/components/Search/index.d.ts

@@ -1,9 +1,15 @@
-export * from '../../components/Search/Autocomplete';
+export * from '../../components/Search/InputWrapper';
 export * from '../../components/Search/ClearIcon';
 export * from '../../components/Search/Input';
-export * from '../../components/Search/Parameters';
 export * from '../../components/Search/Popover';
 export * from '../../components/Search/Search';
 export * from '../../components/Search/SearchIcon';
 export * from '../../components/Search/SearchItem';
+export * from '../../components/Search/SearchTrigger';
+export * from '../../components/Search/Shortcut';
+export * from '../../components/Search/RecentSearches';
+export * from '../../components/Search/ClockBackwardsIcon';
+export * from '../../components/Search/SuggestedPages';
+export * from '../../components/Search/MobileSearchTrigger';
+export * from '../../components/Search/CancelSearch';
 export * from '../../components/Search/utils';

package/lib/components/Search/index.js

@@ -14,13 +14,19 @@ 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("../../components/Search/Autocomplete"), exports);
+__exportStar(require("../../components/Search/InputWrapper"), exports);
 __exportStar(require("../../components/Search/ClearIcon"), exports);
 __exportStar(require("../../components/Search/Input"), exports);
-__exportStar(require("../../components/Search/Parameters"), exports);
 __exportStar(require("../../components/Search/Popover"), exports);
 __exportStar(require("../../components/Search/Search"), exports);
 __exportStar(require("../../components/Search/SearchIcon"), exports);
 __exportStar(require("../../components/Search/SearchItem"), exports);
+__exportStar(require("../../components/Search/SearchTrigger"), exports);
+__exportStar(require("../../components/Search/Shortcut"), exports);
+__exportStar(require("../../components/Search/RecentSearches"), exports);
+__exportStar(require("../../components/Search/ClockBackwardsIcon"), exports);
+__exportStar(require("../../components/Search/SuggestedPages"), exports);
+__exportStar(require("../../components/Search/MobileSearchTrigger"), exports);
+__exportStar(require("../../components/Search/CancelSearch"), exports);
 __exportStar(require("../../components/Search/utils"), exports);
 //# sourceMappingURL=index.js.map

package/lib/components/Search/utils.js

@@ -40,7 +40,7 @@ const highlight = (text) => {
 };
 exports.highlight = highlight;
 const Highlight = styled_components_1.default.span `
-  background-color: var(--search-highlight-text-color);
-  color: var(--color-emphasis-900);
+  background-color: var(--search-highlight-background-color);
+  color: var(--search-highlight-text-color);
 `;
 //# sourceMappingURL=utils.js.map

package/lib/components/Tabs/Tab.d.ts

@@ -2,7 +2,8 @@
 type TabProps = {
     activeTab: string;
     label: string;
+    className?: string;
     onClick: (e: string) => void;
 };
-export declare function Tab({ activeTab, label, onClick }: TabProps): JSX.Element;
+export declare function Tab({ activeTab, label, onClick, className }: TabProps): JSX.Element;
 export {};

package/lib/components/Tabs/Tab.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tab = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Tab({ activeTab, label, onClick }) {
+function Tab({ activeTab, label, onClick, className }) {
     const isActive = activeTab === label;
-    return (react_1.default.createElement(TabItem, { active: isActive, onClick: () => onClick(label), "data-component-name": "Markdown/Tabs/Tab" }, label));
+    return (react_1.default.createElement(TabItem, { active: isActive, onClick: () => onClick(label), "data-component-name": "Markdown/Tabs/Tab", className: className }, label));
 }
 exports.Tab = Tab;
 const TabItem = styled_components_1.default.li `

package/lib/components/Tabs/Tabs.d.ts

@@ -6,6 +6,7 @@ type Child = {
 };
 type TabsProps = PropsWithChildren<{
     children: Child[];
+    className?: string;
 }>;
 export declare function Tabs(props: TabsProps): JSX.Element;
 export {};

package/lib/components/Tabs/Tabs.js

@@ -35,7 +35,7 @@ function Tabs(props) {
     const children = react_1.default.Children.toArray(props.children);
     const [activeTab, setActiveTab] = (0, react_1.useState)((_a = children[0]) === null || _a === void 0 ? void 0 : _a.props.label);
     const onTabSelect = (label) => setActiveTab(label);
-    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs" },
+    return (react_1.default.createElement(TabsContainer, { "data-component-name": "Markdown/Tabs/Tabs", className: props.className },
         react_1.default.createElement(TabList, null, children.map((child) => {
             const { label } = child.props;
             return react_1.default.createElement(Tabs_1.Tab, { activeTab: activeTab, key: label, label: label, onClick: onTabSelect });

package/lib/config.d.ts

@@ -553,6 +553,24 @@ export declare const themeConfigSchema: {
                     };
                     readonly default: readonly ["/"];
                 };
+                readonly suggestedPages: {
+                    readonly type: "array";
+                    readonly items: {
+                        readonly type: "object";
+                        readonly properties: {
+                            readonly page: {
+                                readonly type: "string";
+                            };
+                            readonly label: {
+                                readonly type: "string";
+                            };
+                            readonly labelTranslationKey: {
+                                readonly type: "string";
+                            };
+                        };
+                        readonly required: readonly ["page"];
+                    };
+                };
             };
             readonly additionalProperties: false;
             readonly default: {};
@@ -802,6 +820,7 @@ export type ThemeUIConfig = ThemeConfig & {
     };
     search?: {
         shortcuts?: string[];
+        suggestedPages?: any[];
     };
 };
 export type MarkdownConfig = FromSchema<typeof markdownConfigSchema>;

package/lib/config.js

@@ -112,6 +112,15 @@ const navItemsSchema = {
     type: 'array',
     items: Object.assign(Object.assign({}, navItemSchema), { properties: Object.assign(Object.assign({}, navItemSchema.properties), { items: { type: 'array', items: navItemSchema } }) }),
 };
+const suggestedPageSchema = {
+    type: 'object',
+    properties: {
+        page: { type: 'string' },
+        label: { type: 'string' },
+        labelTranslationKey: { type: 'string' },
+    },
+    required: ['page'],
+};
 exports.themeConfigSchema = {
     type: 'object',
     properties: {
@@ -194,6 +203,9 @@ exports.themeConfigSchema = {
                     type: 'array',
                     items: { type: 'string' },
                     default: ['/'],
+                }, suggestedPages: {
+                    type: 'array',
+                    items: suggestedPageSchema,
                 } }, hideConfigSchema.properties),
             additionalProperties: false,
             default: {},