@redocly/theme 0.40.6 → 0.41.0-rc.11

package/lib/components/Tag/variables.js

@@ -9,7 +9,7 @@ exports.tag = (0, styled_components_1.css) `
 
   --tag-border-width: 1px; //@presenter Border
   --tag-border-style: solid; //@presenter Border
-  --tag-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
@@ -22,8 +22,17 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Tag spacing
     */
 
-  --tag-padding: 1px 8px; //@presenter Spacing
-  --tag-large-padding: 4px 16px; //@presenter Spacing
+  --tag-padding-vertical: 1px; //@presenter Spacing
+  --tag-padding-horizontal: 8px; //@presenter Spacing
+  --tag-padding: 0 var(--tag-padding-horizontal); //@presenter Spacing
+  --tag-content-padding: var(--tag-padding-vertical) 0; //@presenter Spacing
+  --tag-content-gap: 4px; //@presenter Spacing
+
+  --tag-large-padding-vertical: 4px; //@presenter Spacing
+  --tag-large-padding-horizontal: 16px; //@presenter Spacing
+  --tag-large-padding: 0 var(--tag-large-padding-horizontal); //@presenter Spacing
+  --tag-large-content-padding: var(--tag-large-padding-vertical); //@presenter Spacing
+  
   --tag-margin: 0 5px 0 0; //@presenter Spacing
   --tag-gap: 5px; //@presenter Spacing
 
@@ -33,6 +42,7 @@ exports.tag = (0, styled_components_1.css) `
 
   .tag-size-large {
     --tag-padding: var(--tag-large-padding);
+    --tag-content-padding: var(--tag-large-content-padding);
     --tag-font-size: var(--font-size-base);
   }
 
@@ -67,6 +77,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--text-color-primary); // @presenter Color
     --tag-bg-color: var(--color-warm-grey-2); // @presenter Color
     --tag-border-color: var(--border-color-primary); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   .tag-green,
@@ -75,6 +86,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-success-active); // @presenter Color
     --tag-bg-color: var(--color-success-bg); // @presenter Color
     --tag-border-color: var(--color-success-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-success-bg-hover); // @presenter Color
   }
 
   .tag-red,
@@ -83,6 +95,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-error-active); // @presenter Color
     --tag-bg-color: var(--color-error-bg); // @presenter Color
     --tag-border-color: var(--color-error-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-error-hover); // @presenter Color
   }
 
   .tag-gold,
@@ -91,6 +104,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-warning-active); // @presenter Color
     --tag-bg-color: var(--color-warning-bg); // @presenter Color
     --tag-border-color: var(--color-warning-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warning-hover); // @presenter Color
   }
 
   .tag-blue,
@@ -98,6 +112,7 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-info-active); // @presenter Color
     --tag-bg-color: var(--color-info-bg); // @presenter Color
     --tag-border-color: var(--color-info-active); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-info-hover); // @presenter Color
   }
 
   .tag-purple,
@@ -105,26 +120,24 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-purple-7); // @presenter Color
     --tag-bg-color: var(--color-purple-1); // @presenter Color
     --tag-border-color: var(--color-purple-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-purple-3); // @presenter Color
   }
 
   .tag-cyan,
-  .tag-option {
+  .tag-option,
+  .tag-geekblue,
+  .tag-link {
     --tag-color: var(--color-turquoise-7); // @presenter Color
     --tag-bg-color: var(--color-turquoise-1); // @presenter Color
     --tag-border-color: var(--color-turquoise-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-turquoise-3); // @presenter Color
   }
 
   .tag-yellow {
     --tag-color: var(--color-carrot-7); // @presenter Color
     --tag-bg-color: var(--color-carrot-1); // @presenter Color
     --tag-border-color: var(--color-carrot-7); // @presenter Color
-  }
-
-  .tag-geekblue,
-  .tag-link {
-    --tag-color: var(--color-turquoise-7); // @presenter Color
-    --tag-bg-color: var(--color-turquoise-1); // @presenter Color
-    --tag-border-color: var(--color-turquoise-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
   }
 
   .tag-magenta,
@@ -132,18 +145,21 @@ exports.tag = (0, styled_components_1.css) `
     --tag-color: var(--color-magenta-7); // @presenter Color
     --tag-bg-color: var(--color-magenta-1); // @presenter Color
     --tag-border-color: var(--color-magenta-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-magenta-3); // @presenter Color
   }
 
   .tag-lime {
     --tag-color: var(--color-green-7); // @presenter Color
     --tag-bg-color: none; // @presenter Color
     --tag-border-color: var(--color-green-7); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-green-3); // @presenter Color
   }
 
   .tag-product {
     --tag-color: var(--color-warm-grey-7); // @presenter Color
     --tag-bg-color: transparent; // @presenter Color
     --tag-border-color: var(--color-warm-grey-4); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-warm-grey-3); // @presenter Color
   }
 
   /**
@@ -158,12 +174,28 @@ exports.tag = (0, styled_components_1.css) `
     * @tokens Operation tag colors
     */
 
-  --tag-operation-color-delete: #E70B46;
-  --tag-operation-color-get: #25B869;
-  --tag-operation-color-post: #1E65F5;
-  --tag-operation-color-put: #F5901D;
-  --tag-operation-color-patch: #F5C31D;
-  --tag-operation-color-deprecated: var(--text-color-disabled);
+  --tag-operation-color-delete: #e70b46; // @presenter Color
+  --tag-operation-bg-color-delete: #fee2e9; // @presenter Color
+  
+  --tag-operation-color-get: #25b869; // @presenter Color
+  --tag-operation-bg-color-get: #e5faef; // @presenter Color
+  
+  --tag-operation-color-post: #1e65f5; // @presenter Color
+  --tag-operation-bg-color-post: #e2ebfe; // @presenter Color
+  
+  --tag-operation-color-put: #f5901d; // @presenter Color
+  --tag-operation-bg-color-put: #fef1e2; // @presenter Color
+  
+  --tag-operation-color-patch: #f5c31d; // @presenter Color
+  --tag-operation-bg-color-patch: #fdf6dd; // @presenter Color
+
+  --tag-operation-color-head: #5b4ccc; // @presenter Color
+  --tag-operation-bg-color-head: #e6e1fe; // @presenter Color
+
+  --tag-operation-color-options: #1a1c21; // @presenter Color
+  --tag-operation-bg-color-options: #ededf2; // @presenter Color
+  
+  --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
 
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color

package/lib/components/VersionPicker/VersionPicker.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import type { Version } from '@redocly/config';
-import { Select, type SelectProps } from '../../components/Select/Select';
-export interface VersionPickerProps extends SelectProps {
-}
+import type { SelectProps } from '../../core/types/select';
+import { Select } from '../../components/Select/Select';
 export declare function VersionPicker(props: {
     versions?: Version[];
     onChange: (v: Version) => void;

package/lib/components/VersionPicker/VersionPicker.js

@@ -31,6 +31,7 @@ const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Select_1 = require("../../components/Select/Select");
+const SelectInput_1 = require("../../components/Select/SelectInput");
 function VersionPicker(props) {
     var _a;
     const themeConfig = (0, hooks_1.useThemeConfig)();
@@ -38,22 +39,24 @@ function VersionPicker(props) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { versions = [], onChange } = props;
-    const options = versions.map((version) => {
-        return {
-            element: version.label || version.version,
-            value: version,
-            active: version.active,
-        };
-    });
+    const options = versions.map(({ label, version, active }) => ({
+        element: label || version,
+        value: version,
+        active: active,
+    }));
+    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
     if (versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.hide) {
         return null;
     }
-    const value = (_a = options.find((item) => item.active)) === null || _a === void 0 ? void 0 : _a.value;
+    const handleOnChange = (value) => {
+        const selectedVersion = versions.find((v) => v.version === value);
+        onChange(selectedVersion);
+    };
     if (!options.length && !(versionPicker === null || versionPicker === void 0 ? void 0 : versionPicker.showForUnversioned))
         return null;
     return (React.createElement(VersionsPickerWrapper, { "data-component-name": "VersionPicker/VersionPicker" },
         React.createElement(VersionPickerLabel, { "data-translation-key": "theme.versionPicker.label" }, translate('theme.versionPicker.label', 'Version:')),
-        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: onChange })));
+        React.createElement(exports.VersionPickerSelect, { placeholder: translate('theme.versionPicker.unversioned', 'All versions'), disabled: !options.length, options: options, value: value, onChange: handleOnChange })));
 }
 exports.VersionPicker = VersionPicker;
 const VersionPickerLabel = styled_components_1.default.label `
@@ -72,32 +75,12 @@ exports.VersionPickerSelect = (0, styled_components_1.default)(Select_1.Select)
   line-height: var(--version-picker-line-height);
   color: var(--version-picker-text-color);
 
-  ${Select_1.SelectInput} {
+  ${SelectInput_1.SelectInputWrapper} {
     border: var(--version-picker-input-border);
     border-radius: var(--version-picker-input-border-radius);
     padding: var(--version-picker-input-padding-vertical)
       var(--version-picker-input-padding-horizontal);
   }
-
-  ${Select_1.SelectList} {
-    right: 0;
-    width: 100%;
-    min-width: var(--version-picker-list-min-width);
-    max-width: var(--version-picker-list-max-width);
-    padding: var(--version-picker-list-padding);
-    background-color: var(--version-picker-list-bg-color);
-    border-radius: var(--version-picker-list-border-radius);
-    box-shadow: var(--version-picker-list-box-shadow);
-  }
-
-  ${Select_1.SelectListItem} {
-    border-radius: var(--version-picker-list-item-border-radius);
-
-    & > * {
-      padding: var(--version-picker-list-item-vertical-padding)
-        var(--version-picker-list-item-horizontal-padding);
-    }
-  }
 `;
 const VersionsPickerWrapper = styled_components_1.default.div `
   display: flex;

package/lib/core/hooks/__mocks__/index.d.ts

@@ -20,5 +20,5 @@ export * from '../../../core/hooks/menu/use-menu-item-expanded';
 export * from '../../../core/hooks/menu/use-mobile-menu-levels';
 export * from '../../../core/hooks/feedback/use-report-dialog';
 export * from '../../../core/hooks/use-product-picker';
-export * from '../../../core/hooks/use-search';
+export * from '../../../core/hooks/search/use-search-dialog';
 export * from '../../../core/hooks/use-language-picker';

package/lib/core/hooks/__mocks__/index.js

@@ -36,6 +36,6 @@ __exportStar(require("../../../core/hooks/menu/use-menu-item-expanded"), exports
 __exportStar(require("../../../core/hooks/menu/use-mobile-menu-levels"), exports);
 __exportStar(require("../../../core/hooks/feedback/use-report-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-product-picker"), exports);
-__exportStar(require("../../../core/hooks/use-search"), exports);
+__exportStar(require("../../../core/hooks/search/use-search-dialog"), exports);
 __exportStar(require("../../../core/hooks/use-language-picker"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/__mocks__/use-theme-hooks.d.ts

@@ -30,7 +30,7 @@ export declare const useThemeHooks: jest.Mock<{
     }, [], any>;
     useCurrentProduct: jest.Mock<any, any, any>;
     useProducts: jest.Mock<never[], [], any>;
-    useFuseSearch: jest.Mock<{
+    useSearch: jest.Mock<{
         query: jest.Mock<any, any, any>;
         setQuery: jest.Mock<any, any, any>;
         items: never[];

package/lib/core/hooks/__mocks__/use-theme-hooks.js

@@ -37,7 +37,7 @@ exports.useThemeHooks = jest.fn(() => ({
     })),
     useCurrentProduct: jest.fn(),
     useProducts: jest.fn(() => []),
-    useFuseSearch: jest.fn(() => ({
+    useSearch: jest.fn(() => ({
         query: jest.fn().mockReturnValue(''),
         setQuery: jest.fn(),
         items: [],

package/lib/core/hooks/index.d.ts

@@ -24,6 +24,7 @@ export * from '../../core/hooks/use-tabs';
 export * from '../../core/hooks/use-focus-trap';
 export * from '../../core/hooks/use-language-picker';
 export * from '../../core/hooks/use-product-picker';
-export * from '../../core/hooks/use-search';
+export * from '../../core/hooks/search/use-search-dialog';
+export * from '../../core/hooks/search/use-search-filter';
 export * from '../../core/hooks/use-controlled-state';
 export * from '../../core/hooks/use-codeblock-tabs-controls';

package/lib/core/hooks/index.js

@@ -40,7 +40,8 @@ __exportStar(require("../../core/hooks/use-tabs"), exports);
 __exportStar(require("../../core/hooks/use-focus-trap"), exports);
 __exportStar(require("../../core/hooks/use-language-picker"), exports);
 __exportStar(require("../../core/hooks/use-product-picker"), exports);
-__exportStar(require("../../core/hooks/use-search"), exports);
+__exportStar(require("../../core/hooks/search/use-search-dialog"), exports);
+__exportStar(require("../../core/hooks/search/use-search-filter"), exports);
 __exportStar(require("../../core/hooks/use-controlled-state"), exports);
 __exportStar(require("../../core/hooks/use-codeblock-tabs-controls"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/search/use-recent-searches.js

@@ -17,6 +17,8 @@ function updateRecentSearches(value, isAdd) {
     if (!(0, utils_1.isBrowser)())
         return [];
     const recentSearches = getRecentSearches();
+    if (value === '')
+        return recentSearches;
     const valueIndex = recentSearches.indexOf(value);
     if (valueIndex !== -1)
         recentSearches.splice(valueIndex, 1);

package/lib/core/hooks/{use-search.d.ts → search/use-search-dialog.d.ts}

@@ -1,4 +1,4 @@
-export declare function useSearch(): {
+export declare function useSearchDialog(): {
     isOpen: boolean;
     onOpen: () => void;
     onClose: () => void;

package/lib/core/hooks/{use-search.js → search/use-search-dialog.js}

@@ -3,12 +3,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearch = void 0;
+exports.useSearchDialog = void 0;
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
 const hotkeys_js_1 = __importDefault(require("hotkeys-js"));
-const hooks_1 = require("../../core/hooks");
-function useSearch() {
+const hooks_1 = require("../../../core/hooks");
+function useSearchDialog() {
     var _a, _b;
     const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const themeSettings = (0, hooks_1.useThemeConfig)();
@@ -40,5 +40,5 @@ function useSearch() {
     (0, react_1.useEffect)(onClose, [location]);
     return { isOpen, onOpen, onClose };
 }
-exports.useSearch = useSearch;
-//# sourceMappingURL=use-search.js.map
+exports.useSearchDialog = useSearchDialog;
+//# sourceMappingURL=use-search-dialog.js.map

package/lib/core/hooks/search/use-search-filter.d.ts

@@ -0,0 +1,9 @@
+import type { SearchFilterItem } from '../../../core/types';
+export declare function useSearchFilter(filter: SearchFilterItem[], setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>): {
+    onFacetReset: (field: string) => void;
+    onTopFacetsReset: () => void;
+    onFilterChange: (field: string, value: string | string[] | undefined, isTop?: boolean) => void;
+    onFilterReset: () => void;
+    onFilterToggle: () => void;
+    isFilterOpen: boolean;
+};

package/lib/core/hooks/search/use-search-filter.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchFilter = void 0;
+const react_1 = require("react");
+function useSearchFilter(filter, setFilter) {
+    const [isFilterOpen, setIsFilterOpen] = (0, react_1.useState)(false);
+    const onFilterToggle = (0, react_1.useCallback)(() => {
+        setIsFilterOpen(!isFilterOpen);
+    }, [isFilterOpen]);
+    const onFilterChange = (field, value, isTop) => {
+        const values = value ? (Array.isArray(value) ? value : [value]) : [];
+        const _filter = [...filter];
+        const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+        if (fieldIndex > -1) {
+            // filter field already exists
+            _filter[fieldIndex].values = values;
+        }
+        else {
+            if (!values.length)
+                return;
+            _filter.push({ field, values, isTop });
+        }
+        setFilter(_filter.filter((item) => item.values.length));
+    };
+    const onFilterReset = () => {
+        setFilter([]);
+    };
+    const onTopFacetsReset = () => {
+        const _filter = [...filter];
+        setFilter(_filter.filter((item) => !item.isTop));
+    };
+    const onFacetReset = (field) => {
+        const _filter = [...filter];
+        const fieldIndex = _filter.findIndex((filter) => filter.field === field);
+        if (fieldIndex !== -1) {
+            _filter[fieldIndex].values = [];
+        }
+        setFilter(_filter.filter((item) => item.values.length));
+    };
+    return {
+        onFacetReset,
+        onTopFacetsReset,
+        onFilterChange,
+        onFilterReset,
+        onFilterToggle,
+        isFilterOpen,
+    };
+}
+exports.useSearchFilter = useSearchFilter;
+//# sourceMappingURL=use-search-filter.js.map

package/lib/core/types/hooks.d.ts

@@ -2,7 +2,7 @@ import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/confi
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UserMenuData, FilteredCatalog, ItemState, SearchDocument, SubmitFeedbackParams, TFunction, BreadcrumbItem, DrilldownMenuItemDetails } from '../../core/types';
+import type { UserMenuData, FilteredCatalog, ItemState, SearchItemData, SubmitFeedbackParams, TFunction, BreadcrumbItem, DrilldownMenuItemDetails, SearchFacet, SearchFilterItem, SearchFacetQuery } from '../../core/types';
 export type ThemeHooks = {
     useTranslate: () => {
         translate: TFunction;
@@ -45,11 +45,23 @@ export type ThemeHooks = {
         location: Location;
     };
     useBreadcrumbs: () => BreadcrumbItem[];
-    useFuseSearch: (product?: string) => {
+    useSearch: (product?: string) => {
         query: string;
         setQuery: React.Dispatch<React.SetStateAction<string>>;
-        items: SearchDocument[] | null;
-        isLoading: boolean;
+        filter: SearchFilterItem[];
+        setFilter: React.Dispatch<React.SetStateAction<SearchFilterItem[]>>;
+        items: Record<string, SearchItemData[] | null>;
+        isSearchLoading: boolean;
+        facets: SearchFacet[];
+        setLoadMore: React.Dispatch<React.SetStateAction<{
+            groupKey: string;
+            offset: number;
+        } | undefined>>;
+    };
+    useFacetQuery: (field: string) => {
+        searchFacet: SearchFacet | null;
+        setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
+        setSearchFacetQuery: React.Dispatch<React.SetStateAction<SearchFacetQuery | null>>;
     };
     useSidebarItems: (activeVersion?: Version | null) => {
         currentItems: ItemState[];

package/lib/core/types/index.d.ts

@@ -6,7 +6,7 @@ export * from '../../core/types/hooks';
 export * from '../../core/types/markdown';
 export * from '../../core/types/navbar';
 export * from '../../core/types/search';
-export * from '../../core/types/select-option';
+export * from '../../core/types/select';
 export * from '../../core/types/sidebar';
 export * from '../../core/types/filter';
 export * from '../../core/types/user-menu';

package/lib/core/types/index.js

@@ -22,7 +22,7 @@ __exportStar(require("../../core/types/hooks"), exports);
 __exportStar(require("../../core/types/markdown"), exports);
 __exportStar(require("../../core/types/navbar"), exports);
 __exportStar(require("../../core/types/search"), exports);
-__exportStar(require("../../core/types/select-option"), exports);
+__exportStar(require("../../core/types/select"), exports);
 __exportStar(require("../../core/types/sidebar"), exports);
 __exportStar(require("../../core/types/filter"), exports);
 __exportStar(require("../../core/types/user-menu"), exports);

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'theme.search.noResults' | 'theme.search.keys.navigate' | 'theme.search.keys.select' | 'theme.search.keys.exit' | 'theme.search.label' | 'theme.search.cancel' | 'theme.search.recent' | 'theme.search.navbar.label' | 'theme.search.suggested' | 'theme.toc.header' | 'theme.footer.copyrightText' | 'theme.page.homeButton' | 'theme.page.forbidden.title' | 'theme.page.notFound.title' | 'theme.page.notFound.description' | 'theme.page.lastUpdated.timeago' | 'theme.page.lastUpdated.on' | 'theme.catalog.filters.placeholder' | 'theme.catalog.filters.title' | 'theme.catalog.filters.clearAll' | 'theme.catalog.filters.select.addFilter' | 'theme.catalog.filters.select.all' | 'theme.catalog.filters.done' | 'theme.sidebar.menu.backLabel' | 'theme.sidebar.actions.show' | 'theme.sidebar.actions.hide' | 'theme.sidebar.actions.changeLayout' | 'theme.versionPicker.label' | 'theme.versionPicker.unversioned' | 'theme.codeSnippet.copy.buttonText' | 'theme.codeSnippet.copy.tooltipText' | 'theme.codeSnippet.copy.toasterText' | 'theme.markdown.editPage.text' | 'theme.feedback.settings.comment.submitText' | 'theme.feedback.settings.comment.label' | 'theme.feedback.settings.comment.send' | 'theme.feedback.settings.comment.cancel' | 'theme.feedback.settings.comment.satisfiedLabel' | 'theme.feedback.settings.comment.neutralLabel' | 'theme.feedback.settings.comment.dissatisfiedLabel' | 'theme.feedback.settings.submitText' | 'theme.feedback.settings.label' | 'theme.feedback.settings.reasons.label' | 'theme.feedback.settings.reasons.send' | 'theme.feedback.settings.comment.likeLabel' | 'theme.feedback.settings.comment.dislikeLabel' | 'theme.feedback.sentiment.thumbUp' | 'theme.feedback.sentiment.thumbDown' | 'theme.feedback.settings.leftScaleLabel' | 'theme.feedback.settings.rightScaleLabel' | 'theme.codeSnippet.report.buttonText' | 'theme.codeSnippet.report.tooltipText' | 'theme.codeSnippet.report.label' | 'theme.userMenu.login' | 'theme.userMenu.logout' | 'theme.userMenu.devOnboardingLabel' | 'theme.mobileMenu.mainMenu' | 'theme.mobileMenu.previous' | 'theme.mobileMenu.products' | 'theme.page.nextButton' | 'theme.page.previousButton';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'theme.search.loading' | 'theme.search.noResults.title' | 'theme.search.noResults.description' | 'theme.search.keys.navigate' | 'theme.search.keys.select' | 'theme.search.keys.exit' | 'theme.search.label' | 'theme.search.cancel' | 'theme.search.recent' | 'theme.search.navbar.label' | 'theme.search.suggested' | 'theme.search.showMore' | 'theme.search.filter.title' | 'theme.search.filter.reset' | 'theme.search.filter.field.reset' | 'theme.toc.header' | 'theme.footer.copyrightText' | 'theme.page.homeButton' | 'theme.page.forbidden.title' | 'theme.page.notFound.title' | 'theme.page.notFound.description' | 'theme.page.lastUpdated.timeago' | 'theme.page.lastUpdated.on' | 'theme.catalog.filters.placeholder' | 'theme.catalog.filters.title' | 'theme.catalog.filters.clearAll' | 'theme.catalog.filters.select.addFilter' | 'theme.catalog.filters.select.all' | 'theme.catalog.filters.done' | 'theme.sidebar.menu.backLabel' | 'theme.sidebar.actions.show' | 'theme.sidebar.actions.hide' | 'theme.sidebar.actions.changeLayout' | 'theme.versionPicker.label' | 'theme.versionPicker.unversioned' | 'theme.codeSnippet.copy.buttonText' | 'theme.codeSnippet.copy.tooltipText' | 'theme.codeSnippet.copy.toasterText' | 'theme.markdown.editPage.text' | 'theme.feedback.settings.comment.submitText' | 'theme.feedback.settings.comment.label' | 'theme.feedback.settings.comment.send' | 'theme.feedback.settings.comment.cancel' | 'theme.feedback.settings.comment.satisfiedLabel' | 'theme.feedback.settings.comment.neutralLabel' | 'theme.feedback.settings.comment.dissatisfiedLabel' | 'theme.feedback.settings.submitText' | 'theme.feedback.settings.label' | 'theme.feedback.settings.reasons.label' | 'theme.feedback.settings.reasons.send' | 'theme.feedback.settings.comment.likeLabel' | 'theme.feedback.settings.comment.dislikeLabel' | 'theme.feedback.sentiment.thumbUp' | 'theme.feedback.sentiment.thumbDown' | 'theme.feedback.settings.leftScaleLabel' | 'theme.feedback.settings.rightScaleLabel' | 'theme.codeSnippet.report.buttonText' | 'theme.codeSnippet.report.tooltipText' | 'theme.codeSnippet.report.label' | 'theme.userMenu.login' | 'theme.userMenu.logout' | 'theme.userMenu.devOnboardingLabel' | 'theme.mobileMenu.mainMenu' | 'theme.mobileMenu.previous' | 'theme.mobileMenu.products' | 'theme.page.nextButton' | 'theme.page.previousButton';
 export type Locale = {
     code: string;
     name: string;

package/lib/core/types/search.d.ts

@@ -12,9 +12,9 @@ export type SearchDocument = {
     title: string | string[];
     text: string | string[];
     path?: string[];
-    httpVerb?: string;
+    httpMethod?: string;
+    httpPath?: string | string[];
     deprecated?: boolean;
-    pathName?: string | string[];
     parameters?: OperationParameter[];
     metadata?: Record<string, any>;
     version?: string;
@@ -29,4 +29,45 @@ export type SearchDocument = {
         fsPath?: string;
     };
     badges?: ItemBadge[];
+    facets?: Record<string, string>;
+    filterTags?: string[];
+    parametersNames?: string[];
+    parametersDescriptons?: string[];
+};
+export type ParameterHighlight = {
+    name: string;
+    description: string;
+    place: string;
+    path: string[];
+};
+export type SearchItemData = {
+    document: SearchDocument;
+    highlight: Record<string, string> & {
+        parameters?: ParameterHighlight[];
+        path?: string[];
+    };
+};
+export type SearchFacet = {
+    name: string;
+    field: string;
+    type: SearchFacetType;
+    values: string[] | SearchFacetCount[];
+    isTop?: boolean;
+    index?: number;
+};
+export type SearchFacetCount = {
+    value: string;
+    count: number;
+    isCounterVisible?: boolean;
+};
+export type SearchFacetQuery = {
+    query: string;
+    filter: SearchFilterItem[];
+    facetQuery: string;
+};
+export type SearchFacetType = 'input' | 'multi-select' | 'select' | 'switch' | 'radio' | 'tags' | 'checkbox';
+export type SearchFilterItem = {
+    field: string;
+    values: string[];
+    isTop?: boolean;
 };

package/lib/core/types/select.d.ts

@@ -0,0 +1,30 @@
+import type React from 'react';
+export type SelectOption<T> = {
+    value: T;
+    element?: React.ReactNode | JSX.Element | string;
+    label?: string;
+};
+export type SelectProps<T = any> = {
+    value?: SelectOption<T> | SelectOption<T>[] | T | T[];
+    options: SelectOption<T>[];
+    multiple?: boolean;
+    searchable?: boolean;
+    clearable?: boolean;
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    onlyIcon?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    hideCheckmarkIcon?: boolean;
+    dataTestId?: string;
+    icon?: React.ReactNode;
+    footer?: React.ReactNode;
+    onChange?: (value: T | T[]) => void;
+    renderInput?: () => React.ReactElement;
+    renderDivider?: () => React.ReactElement;
+    onSearch?: (value: T | null) => void;
+};

package/lib/core/types/{select-option.js → select.js}

@@ -1,3 +1,3 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=select-option.js.map
+//# sourceMappingURL=select.js.map

package/lib/icons/ResetIcon/ResetIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ResetIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ResetIcon/ResetIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResetIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M9 14C10.1867 14 11.3467 13.6481 12.3334 12.9888C13.3201 12.3295 14.0892 11.3925 14.5433 10.2961C14.9974 9.19975 15.1162 7.99335 14.8847 6.82946C14.6532 5.66558 14.0818 4.59648 13.2426 3.75736C12.4035 2.91825 11.3344 2.3468 10.1705 2.11529C9.00666 1.88378 7.80026 2.0026 6.7039 2.45673C5.60754 2.91085 4.67047 3.67989 4.01118 4.66658C3.35189 5.65328 3 6.81331 3 8V11.1L1.2 9.3L0.5 10L3.5 13L6.5 10L5.8 9.3L4 11.1V8C4 7.0111 4.29324 6.0444 4.84265 5.22215C5.39206 4.39991 6.17295 3.75904 7.08658 3.38061C8.00021 3.00217 9.00555 2.90315 9.97545 3.09608C10.9454 3.289 11.8363 3.76521 12.5355 4.46447C13.2348 5.16373 13.711 6.05465 13.9039 7.02455C14.0969 7.99446 13.9978 8.99979 13.6194 9.91342C13.241 10.8271 12.6001 11.6079 11.7779 12.1574C10.9556 12.7068 9.98891 13 9 13V14Z", fill: "#1A1C21" })));
+exports.ResetIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ResetIcon/ResetIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ResetIcon.js.map

package/lib/icons/SettingsIcon/SettingsIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const SettingsIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;