@redocly/theme 0.41.0-rc.4 → 0.41.0

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -39,8 +39,9 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
             copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
+                    var _a;
                     copy === null || copy === void 0 ? void 0 : copy.onClick;
-                    telemetry.send('code_snippet_copied', {});
+                    (_a = telemetry === null || telemetry === void 0 ? void 0 : telemetry.send) === null || _a === void 0 ? void 0 : _a.call(telemetry, 'code_snippet_copied', {});
                 } })) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }

package/lib/components/Dropdown/DropdownMenu.d.ts

@@ -1,10 +1,8 @@
-import React from 'react';
 import type { ReactNode } from 'react';
 import type { DropdownMenuItemProps } from '../../components/Dropdown/DropdownMenuItem';
 export type DropdownMenuProps = {
     className?: string;
     role?: string;
-    footer?: React.ReactNode;
 } & ({
     items: DropdownMenuItemProps[];
 } | {

package/lib/components/Dropdown/DropdownMenu.js

@@ -15,9 +15,7 @@ function DropdownMenu(props) {
     if ('items' in props) {
         content = props.items.map((item, idx) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, Object.assign({ key: idx }, item), item.content)));
     }
-    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' },
-        content,
-        props.footer || null));
+    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' }, content));
 }
 exports.DropdownMenu = DropdownMenu;
 const DropdownMenuWrapper = styled_components_1.default.ul `

package/lib/components/Search/Search.js

@@ -10,7 +10,7 @@ const SearchTrigger_1 = require("../../components/Search/SearchTrigger");
 const SearchDialog_1 = require("../../components/Search/SearchDialog");
 const hooks_1 = require("../../core/hooks");
 function Search({ className }) {
-    const { isOpen, onOpen, onClose } = (0, hooks_1.useSearchDialog)();
+    const { isOpen, onOpen, onClose } = (0, hooks_1.useSearch)();
     return (react_1.default.createElement(SearchWrapper, { "data-component-name": "Search/Search", className: className },
         react_1.default.createElement(SearchTrigger_1.SearchTrigger, { onClick: onOpen }),
         isOpen && react_1.default.createElement(SearchDialog_1.SearchDialog, { onClose: onClose })));

package/lib/components/Search/SearchDialog.js

@@ -39,16 +39,12 @@ const SearchSuggestedPages_1 = require("../../components/Search/SearchSuggestedP
 const hooks_1 = require("../../core/hooks");
 const Tag_1 = require("../../components/Tag/Tag");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
-const SearchFilter_1 = require("../../components/Search/SearchFilter");
-const SearchGroups_1 = require("../../components/Search/SearchGroups");
-const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 function SearchDialog({ onClose, className }) {
-    const { useTranslate, useCurrentProduct, useSearch, useProducts } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useCurrentProduct, useFuseSearch, useProducts } = (0, hooks_1.useThemeHooks)();
     const products = useProducts();
     const currentProduct = useCurrentProduct();
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore } = useSearch(product === null || product === void 0 ? void 0 : product.name);
-    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onTopFacetsReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    const { query, setQuery, items, isLoading } = useFuseSearch(product === null || product === void 0 ? void 0 : product.name);
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
     (0, hooks_1.useDialogHotKeys)(modalRef, onClose);
@@ -63,64 +59,29 @@ function SearchDialog({ onClose, className }) {
     };
     const mapItem = (item) => {
         let itemProduct;
-        if (!product && item.document.product) {
-            const resolvedProduct = products.find((product) => { var _a; return product.slug.match(`/${(_a = item.document.product) === null || _a === void 0 ? void 0 : _a.folder}/`); });
+        if (!product && item.product) {
+            const resolvedProduct = products.find((product) => { var _a; return product.slug.match(`/${(_a = item.product) === null || _a === void 0 ? void 0 : _a.folder}/`); });
             itemProduct = resolvedProduct
                 ? { name: resolvedProduct.name, icon: resolvedProduct.icon }
                 : undefined;
         }
-        return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.document.id, item: item, product: itemProduct });
+        return react_1.default.createElement(SearchItem_1.SearchItem, { key: item.id, item: item, product: itemProduct });
     };
-    const showLoadMore = (groupKey, currentCount = 0) => {
-        const topFacet = facets.find((facet) => facet.isTop);
-        let needLoadMore = false;
-        if (topFacet) {
-            const groupValue = topFacet.values.find((value) => {
-                if (typeof value === 'object') {
-                    return value.value === groupKey;
-                }
-                else
-                    return false;
-            });
-            needLoadMore = groupValue ? groupValue.count > currentCount : false;
-        }
-        return needLoadMore;
-    };
-    const showResults = !!((filter && filter.length) || query);
     return (react_1.default.createElement(SearchOverlay, { "data-component-name": "Search/SearchDialog", ref: modalRef, onClick: handleOverlayClick, className: (0, utils_1.concatClassNames)('overlay', className) },
         react_1.default.createElement(SearchDialogWrapper, { className: "scroll-lock", role: "dialog" },
             react_1.default.createElement(SearchDialogHeader, null,
-                product && (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(SearchProductTag, { color: "product" },
-                        product.name,
-                        react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
-                react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, onFilterToggle: onFilterToggle, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isSearchLoading, "data-translation-key": "theme.search.label" })),
-            react_1.default.createElement(SearchDialogBody, null,
-                react_1.default.createElement(SearchDialogBodyMainView, null,
-                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onTopFacetsReset: onTopFacetsReset }),
-                    showResults ? (items && Object.keys(items).some((key) => { var _a; return (_a = items[key]) === null || _a === void 0 ? void 0 : _a.length; }) ? (Object.keys(items).map((key) => {
-                        var _a, _b, _c;
-                        return ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) ? (react_1.default.createElement(react_1.Fragment, { key: key },
-                            react_1.default.createElement(SearchGroupTitle, null, key), (_b = items[key]) === null || _b === void 0 ? void 0 :
-                            _b.map(mapItem),
-                            showLoadMore(key, ((_c = items[key]) === null || _c === void 0 ? void 0 : _c.length) || 0) && (react_1.default.createElement(SearchGroupFooter, { "data-translation-key": "theme.search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('theme.search.showMore', 'Show more'))))) : null;
-                    })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, null,
-                        react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "26px", color: "var(--search-input-icon-color)" }),
-                        translate('theme.search.loading', 'Loading...'))) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "theme.search.noResults" },
-                        react_1.default.createElement("b", null, translate('theme.search.noResults.title', 'No results')),
-                        translate('theme.search.noResults.description', 'Prease, try with a different query.')))) : (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
-                        react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
-                isFilterOpen && (react_1.default.createElement(SearchDialogBodyFilterView, null,
-                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset })))),
+                react_1.default.createElement(SearchInput_1.SearchInput, { value: query, onChange: setQuery, placeholder: translate('theme.search.label', 'Search docs...'), isLoading: isLoading, "data-translation-key": "theme.search.label" }),
+                product && (react_1.default.createElement(SearchProductTag, { color: "product" },
+                    product.name,
+                    react_1.default.createElement(CloseIcon_1.CloseIcon, { onClick: () => setProduct(undefined), color: "--icon-color-additional" })))),
+            react_1.default.createElement(SearchDialogBody, null, items !== null ? (items.length ? (items.map(mapItem)) : (react_1.default.createElement(SearchMessage, { "data-translation-key": "theme.search.noResults" }, translate('theme.search.noResults', 'No results')))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
+                react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
             react_1.default.createElement(SearchDialogFooter, null,
                 react_1.default.createElement(SearchShortcuts, null,
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "theme.search.keys.navigate", combination: "Tab", text: translate('theme.search.keys.navigate', 'to navigate') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "theme.search.keys.select", combination: "\u23CE", text: translate('theme.search.keys.select', 'to select') }),
                     react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "theme.search.keys.exit", combination: "Esc", text: translate('theme.search.keys.exit', 'to exit') })),
-                isSearchLoading && (react_1.default.createElement(SearchLoading, null,
-                    react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { size: "16px", color: "var(--search-input-icon-color)" }),
-                    translate('theme.search.loading', 'Loading...'))),
                 react_1.default.createElement(SearchCancelButton, { "data-translation-key": "theme.search.cancel", variant: "secondary", size: "small", onClick: onClose }, translate('theme.search.cancel', 'Cancel'))))));
 }
 exports.SearchDialog = SearchDialog;
@@ -139,6 +100,7 @@ const SearchOverlay = styled_components_1.default.div `
 const SearchDialogWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
   overflow: auto;
   width: 100vw;
   height: 100vh;
@@ -154,65 +116,47 @@ const SearchDialogWrapper = styled_components_1.default.div `
     max-height: 95vh;
     height: auto;
     resize: both;
+    min-width: 300px;
+    min-height: 200px;
   }
 `;
 const SearchDialogHeader = styled_components_1.default.header `
   display: flex;
   align-items: center;
-  border-bottom: var(--search-modal-border);
-  background-color: var(--search-modal-header-bg-color);
-  padding: var(--search-modal-header-padding);
+  border-bottom: 1px solid var(--border-color-secondary);
+  background-color: var(--search-input-bg-color);
+  padding: var(--spacing-sm);
 `;
 const SearchDialogBody = styled_components_1.default.div `
-  display: flex;
-  flex-direction: row;
   flex-grow: 1;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     height: var(--search-modal-min-height);
   }
 `;
-const SearchDialogBodyMainView = styled_components_1.default.div `
-  flex: 2;
-  flex-grow: 2;
-  overflow-y: scroll;
-  overscroll-behavior: contain;
-  border-right: var(--search-modal-border);
-`;
-const SearchDialogBodyFilterView = styled_components_1.default.div `
-  overflow: scroll;
-`;
 const SearchDialogFooter = styled_components_1.default.footer `
-  display: flex;
-  gap: var(--search-modal-footer-gap);
-  padding: var(--search-modal-footer-padding);
-  border-top: var(--search-modal-border);
+  padding: var(--spacing-sm);
+  border-top: 1px solid var(--border-color-secondary);
 `;
 const SearchShortcuts = styled_components_1.default.div `
   display: none;
   justify-content: flex-start;
   align-items: center;
-  gap: var(--search-shortcuts-gap);
+  gap: var(--spacing-xs);
 
   @media screen and (min-width: ${utils_1.breakpoints.small}) {
     display: flex;
   }
 `;
 const SearchMessage = styled_components_1.default.div `
-  display: flex;
-  height: 40%;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-  font-size: var(--search-message-font-size);
-  font-weight: var(--search-message-font-weight);
-  line-height: var(--search-message-line-height);
-  color: var(--search-message-text-color);
-  gap: var(--search-message-gap);
+  padding: var(--spacing-lg);
+  color: var(--search-item-title-text-color);
 `;
 const SearchProductTag = (0, styled_components_1.default)(Tag_1.Tag) `
   --tag-border-radius: var(--border-radius);
-  border: none;
+
   margin: var(--spacing-xs) var(--spacing-sm) !important;
 `;
 const SearchCancelButton = (0, styled_components_1.default)(Button_1.Button) `
@@ -222,25 +166,4 @@ const SearchCancelButton = (0, styled_components_1.default)(Button_1.Button) `
     display: none;
   }
 `;
-const SearchGroupTitle = styled_components_1.default.div `
-  border-bottom: var(--search-modal-border);
-  padding: var(--search-group-title-padding);
-  background-color: var(--search-group-title-bg-color);
-`;
-const SearchGroupFooter = styled_components_1.default.div `
-  display: flex;
-  justify-content: center;
-  padding: var(--search-group-footer-padding);
-  color: var(--search-group-footer-text-color);
-  cursor: pointer;
-`;
-const SearchLoading = styled_components_1.default.div `
-  display: none;
-  align-items: center;
-  gap: var(--spacing-xs);
-
-  @media screen and (min-width: ${utils_1.breakpoints.small}) {
-    display: flex;
-  }
-`;
 //# sourceMappingURL=SearchDialog.js.map

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

@@ -1 +1 @@
-export declare function searchHighlight(text: string | string[]): JSX.Element | string;
+export declare function highlight(text: string | string[]): JSX.Element | string;

package/lib/components/Search/SearchHighlight.js

@@ -26,42 +26,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.searchHighlight = void 0;
+exports.highlight = void 0;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function slicer(str, arr) {
-    const markOpenIndex = str.indexOf('<mark>');
-    const markCloseIndex = str.indexOf('</mark>');
-    if (markOpenIndex !== -1 && markCloseIndex !== -1) {
-        const pre = str.slice(0, markOpenIndex);
-        const entry = str.slice(markOpenIndex + 6, markCloseIndex);
-        const suf = str.slice(markCloseIndex + 7, str.length);
-        return (arr = [...arr, pre, { entry }, ...slicer(suf, arr)]);
-    }
-    else
-        return [...arr, str];
-}
-function searchHighlight(text) {
-    if (!Array.isArray(text)) {
-        const arr = slicer(text, []);
-        if (arr.length === 1)
-            return text;
-        return (React.createElement("span", null, arr.map((item, index) => {
-            if (typeof item === 'object') {
-                return React.createElement(Highlight, { key: index }, item.entry);
-            }
-            else {
-                return item;
-            }
-        })));
-    }
+function highlight(text) {
+    if (!Array.isArray(text))
+        return text;
     const [pre, entry, suf] = text;
     return (React.createElement("span", { "data-component-name": "Search/SearchHighlight" },
         pre,
         React.createElement(Highlight, null, entry),
         suf));
 }
-exports.searchHighlight = searchHighlight;
+exports.highlight = highlight;
 const Highlight = styled_components_1.default.span `
   background-color: var(--search-highlight-bg-color);
   color: var(--search-highlight-text-color);

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

@@ -2,10 +2,9 @@ import React from 'react';
 export type SearchInputProps = {
     placeholder?: string;
     value: string;
-    onChange: (value: string) => void;
-    onFilterToggle: () => void;
+    onChange(value: string): void;
     inputRef?: React.RefObject<HTMLInputElement>;
     isLoading: boolean;
     className?: string;
 };
-export declare function SearchInput({ placeholder, value, onChange, onFilterToggle, isLoading, className, }: SearchInputProps): JSX.Element;
+export declare function SearchInput({ placeholder, value, onChange, isLoading, className, }: SearchInputProps): JSX.Element;

package/lib/components/Search/SearchInput.js

@@ -8,11 +8,10 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const SearchIcon_1 = require("../../icons/SearchIcon/SearchIcon");
 const Spinner_1 = require("../../icons/Spinner/Spinner");
+const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const Button_1 = require("../../components/Button/Button");
 const hooks_1 = require("../../core/hooks");
-const CloseFilledIcon_1 = require("../../icons/CloseFilledIcon/CloseFilledIcon");
-const SettingsIcon_1 = require("../../icons/SettingsIcon/SettingsIcon");
-function SearchInput({ placeholder, value, onChange, onFilterToggle, isLoading, className, }) {
+function SearchInput({ placeholder, value, onChange, isLoading, className, }) {
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     const stopPropagation = (event) => event.stopPropagation();
@@ -26,8 +25,7 @@ function SearchInput({ placeholder, value, onChange, onFilterToggle, isLoading,
     return (react_1.default.createElement(SearchInputWrapper, { "data-component-name": "Search/SearchInput", className: className },
         value && isLoading ? (react_1.default.createElement(Spinner_1.Spinner, { size: "18px", color: "--search-input-icon-color" })) : (react_1.default.createElement(SearchIcon_1.SearchIcon, { size: "18px", color: "--search-input-icon-color" })),
         react_1.default.createElement(SearchInputField, { value: value, placeholder: placeholder, onChange: handleOnChange, onClick: stopPropagation }),
-        !!value && (react_1.default.createElement(ResetButton, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseFilledIcon_1.CloseFilledIcon, null) })),
-        react_1.default.createElement(FilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle })));
+        !!value && react_1.default.createElement(Button_1.Button, { variant: "ghost", onClick: handleOnReset, icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null) })));
 }
 exports.SearchInput = SearchInput;
 const SearchInputWrapper = styled_components_1.default.div `
@@ -54,10 +52,4 @@ const SearchInputField = styled_components_1.default.input `
     color: var(--search-input-placeholder-color);
   }
 `;
-const ResetButton = (0, styled_components_1.default)(Button_1.Button) `
-  color: var(--color-warm-grey-5);
-`;
-const FilterToggleButton = (0, styled_components_1.default)(Button_1.Button) `
-  margin-left: 0;
-`;
 //# sourceMappingURL=SearchInput.js.map

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

@@ -1,9 +1,9 @@
-import type { SearchItemData } from '../../core/types';
+import type { SearchDocument } from '../../core/types';
 type ActiveItem<T> = T & {
     active?: boolean;
 };
 export type SearchItemProps = {
-    item: ActiveItem<SearchItemData>;
+    item: ActiveItem<SearchDocument>;
     product?: {
         name: string;
         icon?: string;

package/lib/components/Search/SearchItem.js

@@ -43,33 +43,27 @@ function SearchItem({ item, className, product }) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [item.active]);
-    const { document, highlight } = item;
-    const parameter = highlight.parameters && highlight.parameters.length ? highlight.parameters[0] : null;
-    const shouldShowPath = document.path && ((_a = document.path) === null || _a === void 0 ? void 0 : _a.length) > 1;
-    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
+    const itemParam = (_a = item.parameters) === null || _a === void 0 ? void 0 : _a[0];
+    return (react_1.default.createElement(SearchItemWrapper, { className: className, to: item.url, tabIndex: 0, innerRef: ref, "data-component-name": "Search/SearchItem" },
         react_1.default.createElement(SearchItemHeader, null,
             product && (react_1.default.createElement(SearchItemProductTag, { "data-testid": "search-item-product-tag" },
                 react_1.default.createElement(Image_1.Image, { src: product.icon }),
                 product.name)),
-            document.httpMethod ? (react_1.default.createElement(SearchItemOperation, null,
-                react_1.default.createElement(SearchItemOperationTag, { color: document.httpMethod }, document.httpMethod.toUpperCase()),
-                highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : null,
+            item.httpVerb ? (react_1.default.createElement(SearchItemOperation, null,
+                react_1.default.createElement(SearchItemOperationTag, { color: item.httpVerb }, item.httpVerb.toUpperCase()),
+                item.pathName ? (0, SearchHighlight_1.highlight)(item.pathName) : null)) : null,
             react_1.default.createElement(SearchItemTitleWrapper, null,
-                react_1.default.createElement(SearchItemTitle, null, highlight.title ? (0, SearchHighlight_1.searchHighlight)(highlight.title) : document.title),
-                document.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
-                document.badges
-                    ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
+                react_1.default.createElement(SearchItemTitle, null, (0, SearchHighlight_1.highlight)(item.title)),
+                item.deprecated ? react_1.default.createElement(SearchItemBadge, { deprecated: true }, "Deprecated") : null,
+                item.badges
+                    ? item.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
                     : null),
-            react_1.default.createElement(SearchItemDescription, null, highlight.text ? (0, SearchHighlight_1.searchHighlight)(highlight.text) : document.text)),
-        parameter ? (react_1.default.createElement(SearchItemPlace, null,
+            Array.isArray(item.text) ? (react_1.default.createElement(SearchItemDescription, null, (0, SearchHighlight_1.highlight)(item.text))) : null),
+        itemParam ? (react_1.default.createElement(SearchItemPlace, null,
             react_1.default.createElement("div", null,
-                (0, SearchHighlight_1.searchHighlight)(parameter.place),
-                ` → `,
-                ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (0, SearchHighlight_1.searchHighlight)((_c = parameter.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : '',
-                (0, SearchHighlight_1.searchHighlight)(parameter.name)),
-            react_1.default.createElement("div", null, (0, SearchHighlight_1.searchHighlight)(parameter.description)))) : (shouldShowPath && (react_1.default.createElement(SearchItemPath, null, highlight.path && highlight.path.length
-            ? (0, SearchHighlight_1.searchHighlight)(highlight.path.join(' → '))
-            : (_d = document.path) === null || _d === void 0 ? void 0 : _d.join(' → '))))));
+                `${itemParam.place} → ${((_b = itemParam.path) === null || _b === void 0 ? void 0 : _b.length) ? ((_c = itemParam.path) === null || _c === void 0 ? void 0 : _c.join(' → ')) + ' → ' : ''}`,
+                (0, SearchHighlight_1.highlight)(itemParam.name)),
+            react_1.default.createElement("div", null, (0, SearchHighlight_1.highlight)(itemParam.description)))) : (react_1.default.createElement(SearchItemPath, null, (_d = item.path) === null || _d === void 0 ? void 0 : _d.join(' → ')))));
 }
 exports.SearchItem = SearchItem;
 const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
@@ -79,7 +73,7 @@ const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
   background-color: var(--search-item-bg-color);
   transition: background-color 0.3s ease;
   text-decoration: none;
-  white-space: normal;
+  white-space: nowrap;
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
@@ -140,7 +134,6 @@ const SearchItemPath = styled_components_1.default.div `
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
-  margin-top: var(--spacing-sm);
 `;
 const SearchItemPlace = styled_components_1.default.div `
   display: flex;
@@ -150,7 +143,6 @@ const SearchItemPlace = styled_components_1.default.div `
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   font-weight: var(--font-weight-regular);
-  margin-top: var(--spacing-sm);
 
   &:first-child {
     padding-top: 0;

package/lib/components/Search/variables.js

@@ -6,18 +6,11 @@ exports.search = (0, styled_components_1.css) `
   /**
     * @tokens Search
     */
-  --search-modal-width: 1100px;
-  --search-modal-min-height: 705px;
+  --search-modal-width: 700px;
+  --search-modal-min-height: 530px;
   --search-modal-bg-color: var(--modal-bg-color);
   --search-modal-box-shadow: var(--modal-box-shadow);
   --search-modal-border-radius: var(--border-radius-lg);
-  --search-modal-border: 1px solid var(--border-color-secondary);
-
-  --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
-  --search-modal-header-padding: var(--spacing-sm);
-
-  --search-modal-footer-padding: var(--spacing-sm);
-  --search-modal-footer-gap: var(--spacing-md);
 
   --search-highlight-bg-color: none; // @presenter Color
   --search-highlight-text-color: var(--color-info-base); // @presenter Color
@@ -36,11 +29,6 @@ exports.search = (0, styled_components_1.css) `
   --search-input-border: none;
   --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
 
-  --search-group-title-padding: var(--spacing-sm);
-  --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
-  --search-group-footer-padding: var(--spacing-sm);
-  --search-group-footer-text-color: var(--link-color-primary); // @presenter Color
-
   --search-item-text-color: var(--text-color-secondary); // @presenter Color
   --search-item-text-color-hover: var(--text-color-primary); // @presenter Color
   --search-item-title-font-size: var(--font-size-base); // @presenter FontSize
@@ -88,40 +76,6 @@ exports.search = (0, styled_components_1.css) `
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
 
-  --search-shortcuts-gap: var(--spacing-xs);
-
-  --search-message-font-size: var(--font-size-lg); // @presenter FontSize
-  --search-message-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --search-message-line-height: var(--line-height-lg); // @presenter LineHeight
-  --search-message-text-color: var(--text-color-secondary); // @presenter Color
-  --search-message-gap: var(--spacing-md);
-
-    /**
-  * @tokens Search filter
-  */
-  --search-filter-width: 450px;
-  --search-filter-bg-color: var(--search-modal-bg-color);
-  --search-filter-padding: var(--spacing-lg);
-  --search-filter-font-size: var(--font-size-base);
-  --search-filter-font-weight: var(--font-weight-regular);
-  --search-filter-line-height: var(--line-height-base);
-
-  --search-filter-header-padding: var(--spacing-md) 0;
-  --search-filter-header-text-color: var(--text-color-helper);
-  --search-filter-header-z-index: var(--z-index-raised);
-
-  --search-filter-fields-gap: var(--spacing-base);
-
-  --search-filter-field-select-option-gap: var(--spacing-unit);
-  --search-filter-field-select-option-text-padding: 0 0 0 var(--spacing-unit);
-  --search-filter-field-select-footer-padding: 0 0 0 var(--spacing-unit);
-  --search-filter-field-select-footer-text-color: var(--text-color-helper);
-
-  --search-filter-field-tags-gap: var(--spacing-unit);
-  --search-filter-field-tags-tag-margin: var(--spacing-unit) 0 0 0;
-
-  // @tokens End
-
   /**
   * @tokens Navbar Search Trigger
   */

package/lib/components/Segmented/Segmented.d.ts

@@ -1,9 +1,12 @@
 import type { ReactElement } from 'react';
-import type { SelectOption } from '../../core/types/select';
+import type { SelectOption } from '../../core/types/select-option';
 export type SegmentedProps<T> = {
     options: SelectOption<T>[];
     value: T;
-    onChange: ({ label, value }: SelectOption<T>) => void;
+    onChange: ({ label, value }: {
+        label: string;
+        value: T;
+    }) => void;
     className?: string;
     size?: 'regular' | 'small';
 };

package/lib/components/Select/Select.d.ts

@@ -1,5 +1,39 @@
-import type { SelectProps } from '../../core/types/select';
+import React from 'react';
+export type SelectProps<T = any> = {
+    value: T;
+    options: {
+        element: React.ReactNode | JSX.Element | string;
+        value: T;
+        label?: string;
+    }[];
+    dataAttributes?: Record<string, string>;
+    className?: string;
+    withArrow?: boolean;
+    triggerEvent?: 'click' | 'hover';
+    onChange?: (value: any) => void;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    icon?: React.ReactNode;
+    onlyIcon?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    hideCheckmarkIcon?: boolean;
+    dataTestId?: string;
+    renderInput?: (props: {
+        isOpen: boolean;
+    }) => React.ReactElement;
+    renderDivider?: () => React.ReactElement;
+};
 export declare function Select<T>(props: SelectProps<T>): JSX.Element;
-export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {
+export declare const SelectContainer: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean | undefined;
 }, never>;
+export declare const SelectInput: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectInputValue: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectList: import("styled-components").StyledComponent<"ul", any, {
+    placement?: string | undefined;
+    alignment?: string | undefined;
+}, never>;
+export declare const SelectListItem: import("styled-components").StyledComponent<"li", any, {
+    selected: boolean;
+}, never>;