@redocly/theme 0.69.0-next.1 → 0.69.0-next.11

package/lib/components/Product/variables.js

@@ -27,7 +27,7 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-item-padding-vertical: var(--dropdown-menu-item-padding-vertical); // @presenter Spacing
   --product-picker-dropdown-item-separator-padding-top: var(--dropdown-menu-item-separator-padding-top ); // @presenter Spacing
   --product-picker-dropdown-item-separator-padding-bottom: var(--dropdown-menu-item-separator-padding-bottom ); // @presenter Spacing
-  --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
+  --product-picker-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius); // @presenter BorderRadius
   --product-picker-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --product-picker-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
   --product-picker-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
@@ -38,5 +38,6 @@ exports.productPicker = (0, styled_components_1.css) `
   --product-picker-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --product-picker-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
+  // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/ReplayGate/ReplayGate.d.ts

@@ -7,6 +7,7 @@ export type ReplayGateProps = {
     setSelectedEnvironment: (envName: string) => void;
     selectedEnvironment?: string;
     apiId?: string;
+    onClose: () => void;
     children: React.ReactNode;
 };
 export declare function ReplayGate({ children }: ReplayGateProps): React.JSX.Element;

package/lib/components/Search/FilterFields/SearchFilterFieldSelect.js

@@ -47,13 +47,7 @@ function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChang
     const { useFacetQuery, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
-    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    const [selectOptions, setSelectOptions] = (0, react_1.useState)([]);
     const isMultiple = facet.type === 'multi-select';
-    (0, react_1.useEffect)(() => {
-        setSelectOptions(getSelectOptions());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchFacet, facet]);
     const onSearch = (value) => {
         if (value === null) {
             setSearchFacet(null);
@@ -67,38 +61,34 @@ function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChang
             });
         }
     };
-    const getSelectOptions = () => {
-        return searchFacet
-            ? searchFacet.values.map(facetValueToSelectOption)
-            : facet.values.map(facetValueToSelectOption);
-    };
-    const facetValueToSelectOption = (facetValue) => {
-        if (!facetValue) {
-            return { element: null, value: '' };
-        }
-        if (typeof facetValue === 'string') {
-            return {
-                element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
-                    react_1.default.createElement(FilterSelectOptionText, null, facetValue))),
-                value: facetValue,
-            };
-        }
-        else {
-            const { value, count, isCounterVisible } = facetValue;
-            return {
-                element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
-                    react_1.default.createElement(FilterSelectOptionText, null, value),
-                    isCounterVisible && react_1.default.createElement(CounterTag_1.CounterTag, null, count))),
-                value: value,
-            };
-        }
-    };
+    const selectOptions = (0, react_1.useMemo)(() => (searchFacet ? searchFacet.values : facet.values).map(facetValueToSelectOption), [searchFacet, facet]);
     return (react_1.default.createElement(Select_1.Select, { value: selectedValues.length
             ? isMultiple
                 ? selectedValues.map((value) => facetValueToSelectOption(value))
                 : facetValueToSelectOption(selectedValues[0])
             : undefined, options: selectOptions, onChange: onChange, placeholder: `${translate('search.filter.field.placeholder', 'Search')} ${facet.name.toLowerCase()}...`, alignment: "start", multiple: isMultiple, searchable: true, footer: selectOptions.length === MAX_SELECT_OPTIONS ? (react_1.default.createElement(FilterSelectFooter, null, translate('search.filter.field.footer', 'Search to show more items...'))) : null, onSearch: onSearch, checkmarkIconPosition: "start" }));
 }
+function facetValueToSelectOption(facetValue) {
+    if (!facetValue) {
+        return { element: null, value: '' };
+    }
+    if (typeof facetValue === 'string') {
+        return {
+            element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
+                react_1.default.createElement(FilterSelectOptionText, null, facetValue))),
+            value: facetValue,
+        };
+    }
+    else {
+        const { value, count, isCounterVisible } = facetValue;
+        return {
+            element: (react_1.default.createElement(FilterSelectOptionWrapper, null,
+                react_1.default.createElement(FilterSelectOptionText, null, value),
+                isCounterVisible && react_1.default.createElement(CounterTag_1.CounterTag, null, count))),
+            value: value,
+        };
+    }
+}
 const FilterSelectOptionWrapper = styled_components_1.default.div `
   width: 100%;
   display: flex;

package/lib/components/Search/SearchAiDialog.js

@@ -80,6 +80,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         if (!(initialMessage === null || initialMessage === void 0 ? void 0 : initialMessage.trim().length)) {
             return;
         }
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- appends the initial message into the conversation state lifted to the search root once the dialog mounts
         setConversation((prev) => [
             ...prev,
             { role: constants_1.AiSearchConversationRole.USER, content: initialMessage },
@@ -89,6 +90,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
         if (response === undefined || conversation.length === 0 || error) {
             return;
         }
+        // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- merges the streamed assistant response into the lifted conversation state as chunks arrive
         setConversation((prev) => {
             const lastMessage = prev[prev.length - 1];
             const content = response || '';
@@ -127,6 +129,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     ]);
     (0, react_1.useEffect)(() => {
         if (error) {
+            // oxlint-disable-next-line react-you-might-not-need-an-effect/no-pass-data-to-parent -- drops the pending message from the lifted conversation state once the request errors
             setConversation((prev) => prev.slice(0, -1));
         }
     }, [error, setConversation]);
@@ -139,7 +142,7 @@ function SearchAiDialog({ isGeneratingResponse, response, initialMessage, error,
     return (react_1.default.createElement(SearchAiDialogWrapper, { "data-component-name": "Search/SearchAiDialog", className: className },
         !conversation.length && (react_1.default.createElement(WelcomeWrapper, null,
             react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { color: "var(--search-ai-icon-color)", size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", margin: "0 var(--spacing-xs) 0 0" }),
-            translate('search.ai.welcomeText', 'Welcome to AI search! Feel free to ask me anything. How can I help you? '))),
+            translate('search.ai.welcomeText', 'Welcome to AI assistant! Feel free to ask me anything. How can I help you? '))),
         react_1.default.createElement(ConversationWrapper, null,
             conversation.map((item, index) => (react_1.default.createElement(SearchAiMessage_1.SearchAiMessage, { key: `search-ai-message-${index}`, role: item.role, content: item.content, isThinking: item.role === constants_1.AiSearchConversationRole.ASSISTANT &&
                     isGeneratingResponse &&

package/lib/components/Search/SearchAiMessage.js

@@ -218,7 +218,7 @@ const MessageWrapper = styled_components_1.default.div `
   padding: ${({ $role }) => $role === constants_2.AiSearchConversationRole.USER
     ? 'var(--spacing-sm)'
     : 'var(--spacing-sm) var(--spacing-sm) var(--spacing-xs) var(--spacing-sm)'};
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
   width: fit-content;
   max-width: 100%;
   word-wrap: break-word;

package/lib/components/Search/SearchAiNegativeFeedbackForm.js

@@ -93,7 +93,7 @@ const FeedbackFormWrapper = styled_components_1.default.div `
   padding: var(--spacing-xs);
   background: var(--search-ai-feedback-form-bg-color);
   border: 1px solid var(--search-ai-feedback-form-border-color);
-  border-radius: var(--border-radius-lg);
+  border-radius: var(--border-radius-xl);
 `;
 const FeedbackHeader = styled_components_1.default.div `
   display: flex;
@@ -128,7 +128,7 @@ const FeedbackTextArea = styled_components_1.default.textarea `
   padding: var(--spacing-xs);
   padding-right: 3rem;
   border: 1px solid var(--border-color-primary);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-lg);
   font-family: inherit;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);

package/lib/components/Search/SearchDialog.js

@@ -263,7 +263,7 @@ function SearchDialog({ onClose, className, initialMode = 'search', }) {
                                     focusSearchInput();
                                 } }),
                             react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))))) : (react_1.default.createElement(SearchAiDialog_1.SearchAiDialog, { initialMessage: query, response: aiSearch.response, isGeneratingResponse: aiSearch.isGeneratingResponse, error: aiSearch.error, resources: aiSearch.resources, conversation: aiSearch.conversation, setConversation: aiSearch.setConversation, onMessageSent: aiSearch.askQuestion, toolCalls: aiSearch.toolCalls, contentSegments: aiSearch.contentSegments }))),
-                react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI search might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(SearchDialogFooter, null, mode === 'ai-dialog' ? (react_1.default.createElement(AiDisclaimer, null, translate('search.ai.disclaimer', 'AI assistant might provide incomplete or incorrect results. Verify important information.'))) : (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(SearchShortcuts, null,
                         react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.navigate", combination: "Tab", text: translate('search.keys.navigate', 'to navigate') }),
                         react_1.default.createElement(SearchShortcut_1.SearchShortcut, { "data-translation-key": "search.keys.select", combination: "\u23CE", text: translate('search.keys.select', 'to select') }),
@@ -396,7 +396,6 @@ const SearchMessage = styled_components_1.default.div `
   gap: var(--search-message-gap);
 `;
 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;
 `;
@@ -462,6 +461,7 @@ const SearchWithAI = styled_components_1.default.div `
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   transition: all 0.3s ease;
 

package/lib/components/Search/SearchItem.js

@@ -48,7 +48,7 @@ const utils_1 = require("../../core/utils");
 const ReturnKeyIcon_1 = require("../../icons/ReturnKeyIcon/ReturnKeyIcon");
 const hooks_1 = require("../../core/hooks");
 function SearchItem({ onClick, item, className, product, innerRef, }) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const ref = (0, react_1.useRef)(null);
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
@@ -95,11 +95,13 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                 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(' → ')) + ' → ' : '',
+                    ((_b = parameter.path) === null || _b === void 0 ? void 0 : _b.length) ? (react_1.default.createElement(react_1.default.Fragment, null,
+                        (0, SearchHighlight_1.searchHighlight)(parameter.path.join(' → ')),
+                        ` → `)) : null,
                     (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(' → '))))),
+                : (_c = document.path) === null || _c === void 0 ? void 0 : _c.join(' → '))))),
         react_1.default.createElement(ReturnKeyIcon_1.ReturnKeyIcon, { color: "var(--search-item-text-color)" })));
 }
 const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
@@ -113,6 +115,7 @@ const SearchItemWrapper = (0, styled_components_1.default)(Link_1.Link) `
   outline: none;
   border-top: 1px solid var(--search-item-border-color);
   border-bottom: 1px solid var(--search-item-border-color);
+  border-radius: var(--search-item-border-radius);
 
   ${ReturnKeyIcon_1.ReturnKeyIcon} {
     align-self: center;

package/lib/components/Search/SearchRecent.js

@@ -97,6 +97,7 @@ const SearchRecentItem = styled_components_1.default.div `
   font-weight: var(--search-recent-item-font-weight);
   line-height: var(--search-recent-item-line-height);
   padding: var(--search-recent-item-padding);
+  border-radius: var(--search-recent-item-border-radius);
   color: var(--search-recent-item-text-color);
   cursor: pointer;
 

package/lib/components/Search/SearchSuggestedPages.js

@@ -80,6 +80,7 @@ const SearchSuggestedItem = (0, styled_components_1.default)(Link_1.Link) `
   line-height: var(--search-suggested-item-line-height);
   color: var(--search-suggested-item-text-color);
   padding: var(--search-suggested-item-padding);
+  border-radius: var(--search-suggested-item-border-radius);
   cursor: pointer;
 
   &:hover {

package/lib/components/Search/variables.js

@@ -11,7 +11,7 @@ exports.search = (0, styled_components_1.css) `
   --search-modal-min-height: 705px;
   --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-radius: var(--border-radius-xxl);
   --search-modal-border: 1px solid var(--border-color-secondary);
 
   --search-modal-header-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -35,7 +35,7 @@ exports.search = (0, styled_components_1.css) `
   --search-input-gap: var(--spacing-sm);
   --search-input-height: 40px;
   --search-input-border: none;
-  --search-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --search-input-border-radius: var(--border-radius-xl); // @presenter BorderRadius
 
   --search-group-title-padding: var(--spacing-sm);
   --search-group-title-bg-color: var(--bg-color-tonal); // @presenter Color
@@ -54,6 +54,7 @@ exports.search = (0, styled_components_1.css) `
   --search-item-bg-color-hover: var(--layer-color-ontonal-hover); // @presenter Color
   --search-item-border-color-focused: var(--color-blue-4); // @presenter Color
   --search-item-border-color: transparent; // @presenter Color
+  --search-item-border-radius: var(--border-radius-lg);
   --search-item-padding: var(--spacing-sm) var(--spacing-lg);
   --search-item-gap: var(--spacing-xxs);
   --search-item-product-icon-size: 16px;
@@ -72,6 +73,7 @@ exports.search = (0, styled_components_1.css) `
   --search-recent-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-recent-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-recent-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-recent-item-border-radius: var(--search-item-border-radius);
 
   --search-suggested-item-font-size: var(--font-size-base); // @presenter FontSize
   --search-suggested-item-font-weight: var(--font-weight-regular); // @presenter FontWeight
@@ -87,6 +89,7 @@ exports.search = (0, styled_components_1.css) `
   --search-suggested-item-title-padding: var(--spacing-md) var(--spacing-lg) var(--spacing-xxs) var(--spacing-lg); // @presenter Color
   --search-suggested-item-bg-color-active: var(--layer-color); // @presenter Color
   --search-suggested-item-border-color-focused: var(--color-blue-4); // @presenter Color
+  --search-suggested-item-border-radius: var(--search-item-border-radius);
 
   --search-shortcuts-gap: var(--spacing-xs);
 
@@ -95,6 +98,7 @@ exports.search = (0, styled_components_1.css) `
   --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);
+  --search-message-padding: var(--spacing-md);
 
   --search-header-buttons-gap: var(--spacing-sm);
   --search-header-buttons-padding-left: var(--spacing-sm);
@@ -134,7 +138,7 @@ exports.search = (0, styled_components_1.css) `
   --search-trigger-border-style: var(--border-style);
   --search-trigger-border-color: var(--input-border-color);
   --search-trigger-border-color-hover: var(--input-border-color-hover);
-  --search-trigger-border-radius: var(--border-radius-md);
+  --search-trigger-border-radius: var(--border-radius-lg);
   --search-trigger-padding-vertical: var(--input-padding-vertical);
   --search-trigger-padding-horizontal: var(--input-padding-horizontal);
   --search-trigger-padding: var(--search-trigger-padding-vertical) var(--search-trigger-padding-horizontal);
@@ -245,7 +249,7 @@ exports.search = (0, styled_components_1.css) `
   --search-ai-conversation-input-bg-color-disabled: var(--color-warm-grey-1);
   --search-ai-conversation-input-padding: var(--spacing-sm) var(--spacing-md);
   --search-ai-conversation-input-border: 1px solid var(--border-color-secondary);
-  --search-ai-conversation-input-border-radius: var(--border-radius-lg);
+  --search-ai-conversation-input-border-radius: var(--border-radius-xl);
   --search-ai-conversation-input-font-size: var(--font-size-base);
   --search-ai-conversation-input-placeholder-color: var(--search-input-placeholder-color);
   --search-ai-conversation-input-border-color-focus: var(--color-primary-base, var(--search-ai-conversation-input-border-color-focus-legacy));
@@ -253,7 +257,7 @@ exports.search = (0, styled_components_1.css) `
 
   --search-ai-conversation-input-send-button-right: 12px;
   --search-ai-conversation-input-send-button-padding: 5px;
-  --search-ai-conversation-input-send-button-border-radius: var(--border-radius);
+  --search-ai-conversation-input-send-button-border-radius: var(--border-radius-md);
   --search-ai-conversation-input-send-button-border-disabled: 1px solid var(--button-border-color-disabled);
 
   --search-ai-conversation-input-min-height: 48px;

package/lib/components/Segmented/Segmented.js

@@ -38,7 +38,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const typed_memo_1 = require("../../core/hoc/typed-memo");
 function SegmentedComponent({ options, onChange, value, className = '', size = 'regular' }, ref) {
-    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist" }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
+    return (react_1.default.createElement(SegmentedGroup, { ref: ref, "data-component-name": "Segmented/Segmented", className: `tag-grey ${size} ${className}`, role: "tablist", $size: size }, options.map((opt, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
         opt.divider,
         react_1.default.createElement(SegmentedItem, { key: opt.label, role: "tab", title: opt.label, onClick: () => onChange(opt), $isActive: value == opt.value, $size: size }, opt.element || opt.label))))));
 }
@@ -48,7 +48,7 @@ const SegmentedGroup = styled_components_1.default.div `
   background: var(--segmented-buttons-bg-color-main);
   padding: calc(var(--spacing-xxs) / 2);
   gap: calc(var(--spacing-xxs) / 2);
-  border-radius: var(--border-radius-md);
+  border-radius: ${({ $size }) => $size === 'small' ? 'var(--border-radius-md)' : 'var(--border-radius-lg)'};
   max-width: 100%;
   width: fit-content;
 `;
@@ -75,7 +75,7 @@ const SegmentedItem = styled_components_1.default.button `
           cursor: pointer;
         `}
   line-height: var(--segmented-line-height);
-  border-radius: var(--border-radius);
+  border-radius: ${({ $size }) => $size === 'small' ? 'var(--border-radius)' : 'var(--border-radius-md)'};
   padding: ${({ $size }) => ($size === 'small' ? 0 : '3px')} var(--spacing-sm);
   white-space: nowrap;
   text-overflow: ellipsis;

package/lib/components/Select/Select.js

@@ -71,32 +71,39 @@ function Select(props) {
     (0, hooks_1.useOutsideClick)(selectRef, () => {
         setDropdownActive(false);
     });
-    (0, react_1.useEffect)(() => {
+    const [prevOptions, setPrevOptions] = (0, react_1.useState)(options);
+    const [prevValue, setPrevValue] = (0, react_1.useState)(value);
+    const [prevMultiple, setPrevMultiple] = (0, react_1.useState)(multiple);
+    if (prevOptions !== options) {
+        setPrevOptions(options);
         setFilteredOptions(options);
-    }, [options]);
-    (0, react_1.useEffect)(() => {
+    }
+    if (prevValue !== value || prevMultiple !== multiple) {
+        setPrevValue(value);
+        setPrevMultiple(multiple);
         setSelectedOptions(getSelectedOptionsFromPropsValue());
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [multiple, value]);
-    (0, react_1.useEffect)(() => {
+    }
+    const changeSearchValue = (newSearchValue) => {
+        if (newSearchValue === searchValue) {
+            return;
+        }
+        setSearchValue(newSearchValue);
         if (onSearch) {
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch(searchValue);
+            onSearch(newSearchValue);
+            return;
+        }
+        if (typeof newSearchValue === 'string') {
+            setFilteredOptions(options.filter((option) => {
+                var _a, _b;
+                const valueForSearch = String((_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '');
+                return (!valueForSearch ||
+                    valueForSearch.toLowerCase().indexOf(newSearchValue.toLowerCase()) > -1);
+            }));
         }
         else {
-            if (typeof searchValue === 'string') {
-                const filteredOptions = options.filter((option) => {
-                    var _a, _b;
-                    const valueForSearch = String((_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.value) !== null && _b !== void 0 ? _b : '');
-                    return (!valueForSearch || valueForSearch.toLowerCase().indexOf(searchValue.toLowerCase()) > -1);
-                });
-                setFilteredOptions(filteredOptions);
-            }
-            else {
-                setFilteredOptions(options);
-            }
+            setFilteredOptions(options);
         }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [searchValue]);
+    };
     const selectHandler = (selectedOption) => {
         var _a;
         const newSelectedOptions = multiple
@@ -113,7 +120,7 @@ function Select(props) {
                 : '';
         setSelectedOptions(newSelectedOptions);
         onChange === null || onChange === void 0 ? void 0 : onChange(newSelectedValues);
-        setSearchValue(null);
+        changeSearchValue(null);
         setDropdownActive(false);
         if (!multiple) {
             setStickyInputValue('');
@@ -122,7 +129,7 @@ function Select(props) {
     };
     const searchHandler = (e) => {
         const targetValue = e.target.value;
-        setSearchValue(targetValue);
+        changeSearchValue(targetValue);
         setDropdownActive(true);
     };
     const clearHandler = (option) => {
@@ -146,7 +153,7 @@ function Select(props) {
             if (!e.relatedTarget || ((_b = e.relatedTarget) === null || _b === void 0 ? void 0 : _b.id) !== inputId) {
                 setDropdownActive(false);
             }
-            setSearchValue(null);
+            changeSearchValue(null);
             setStickyInputValue('');
         }
     };

package/lib/components/Select/variables.js

@@ -10,7 +10,7 @@ exports.select = (0, styled_components_1.css) `
   --select-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-line-height: var(--line-height-base); // @presenter LineHeight
   --select-text-color: var(--text-color-secondary); // @presenter Color
-  --select-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-border: var(--border-width) var(--border-style) var(--border-color-primary); // @presenter Border
   
   --select-input-padding-vertical: 6px; // @presenter Spacing
@@ -18,7 +18,7 @@ exports.select = (0, styled_components_1.css) `
   --select-input-padding: var(--select-input-padding-vertical) var(--select-input-padding-horizontal);
   --select-input-gap: var(--spacing-xs); // @presenter Spacing
   --select-input-value-gap: var(--spacing-unit); // @presenter Spacing
-  --select-input-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-input-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --select-input-font-size: var(--font-size-base); // @presenter FontSize
   --select-input-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --select-input-line-height: var(--line-height-base); // @presenter LineHeight
@@ -37,7 +37,7 @@ exports.select = (0, styled_components_1.css) `
   --select-list-item-padding: var(--select-list-item-padding-vertical) var(--select-list-item-padding-horizontal);
 
   --select-list-item-gap: var(--spacing-xs); // @presenter Spacing
-  --select-list-item-border-radius: var(--border-radius); // @presenter BorderRadius
+  --select-list-item-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --select-list-item-bg-color-active: transparent; // @presenter Color
   --select-list-item-bg-color-hover: var(--menu-item-bg-color-hover); // @presenter Color
   --select-list-item-font-weight-active: var(--font-weight-medium); // @presenter Color  

package/lib/components/Sidebar/Sidebar.js

@@ -1,54 +1,18 @@
 "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 () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __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.SidebarHeader = void 0;
 exports.Sidebar = Sidebar;
-const react_1 = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const MenuContainer_1 = require("../../components/Menu/MenuContainer");
 function Sidebar({ versions, menu, footer, header, growContent, collapsed, className, menuItemsAnimation, }) {
     const { isOpen } = (0, hooks_1.useMobileMenu)();
-    const [mappedCollapsed, setMappedCollapsed] = react_1.default.useState(collapsed);
-    (0, react_1.useEffect)(() => {
-        setMappedCollapsed(collapsed && !isOpen);
-    }, [isOpen, collapsed, setMappedCollapsed]);
+    const mappedCollapsed = collapsed && !isOpen;
     const { sidebar } = (0, hooks_1.useThemeConfig)();
     if (sidebar === null || sidebar === void 0 ? void 0 : sidebar.hide) {
         return null;

package/lib/components/SplitButton/SplitButton.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { ComponentProps, JSX } from 'react';
+import type { ButtonProps } from '../../components/Button/Button';
+import type { ButtonGroupSize, ButtonGroupVariant } from '../../core/types';
+import { Dropdown } from '../../components/Dropdown/Dropdown';
+export type SplitButtonProps = {
+    button: React.ReactElement<ButtonProps>;
+    children: ComponentProps<typeof Dropdown>['children'];
+    variant?: ButtonGroupVariant;
+    size?: ButtonGroupSize;
+    placement?: 'top' | 'bottom';
+    alignment?: 'start' | 'end';
+    portalled?: boolean;
+    closeOnSelect?: boolean;
+    disabled?: boolean;
+    toggleAriaLabel: string;
+    onOpen?: () => void;
+    onClose?: () => void;
+    className?: string;
+};
+export declare function SplitButton(props: SplitButtonProps): JSX.Element;

package/lib/components/SplitButton/SplitButton.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SplitButton = SplitButton;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../components/Button/Button");
+const ButtonGroup_1 = require("../../components/Button/ButtonGroup");
+const Dropdown_1 = require("../../components/Dropdown/Dropdown");
+function SplitButton(props) {
+    const { button, children, variant, size, placement = 'bottom', alignment = 'end', portalled, closeOnSelect = true, disabled, toggleAriaLabel, onOpen, onClose, className, } = props;
+    const hasMenu = typeof children === 'function' || react_1.default.Children.toArray(children).length > 0;
+    return (react_1.default.createElement(SplitButtonWrapper, { "data-component-name": "SplitButton/SplitButton", className: className },
+        react_1.default.createElement(ButtonGroup_1.ButtonGroup, { variant: variant, size: size },
+            button,
+            hasMenu ? (react_1.default.createElement(ToggleDropdown, { closeOnClick: closeOnSelect, placement: placement, alignment: alignment, portalled: portalled, withArrow: true, onOpen: onOpen, onClose: onClose, trigger: react_1.default.createElement(Button_1.Button, { "aria-label": toggleAriaLabel, "aria-haspopup": "menu", variant: variant, size: size, disabled: disabled }) }, children)) : null)));
+}
+const SplitButtonWrapper = styled_components_1.default.div `
+  position: relative;
+  display: inline-flex;
+
+  /* Themed button margins must not split the group apart. Direct-child chains
+     keep the rule off buttons rendered inside the dropdown menu. */
+  > * > .button,
+  > * > * > .button {
+    margin: 0;
+  }
+`;
+/* The non-portalled menu is absolutely positioned against the nearest positioned
+   ancestor; keep the dropdown segment static so that ancestor is the whole
+   split button rather than the toggle segment. */
+const ToggleDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  position: static;
+`;
+//# sourceMappingURL=SplitButton.js.map

package/lib/components/Switch/variables.dark.js

@@ -16,7 +16,7 @@ exports.switcherDarkMode = (0, styled_components_1.css) `
     --switch-border-color-disabled: var(--color-warm-grey-5); // @presenter Color
     --switch-border-color-selected: var(--color-primary-base, var(--switch-border-color-selected-legacy)); // @presenter Color
     --switch-border-width: var(--border-width); // @presenter Border
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
 
     --switch-width: 32px; // @presenter Width
     --switch-height: 18px; // @presenter Height
@@ -29,7 +29,7 @@ exports.switcherDarkMode = (0, styled_components_1.css) `
     --switch-knob-bg-color-selected: var(--color-static-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-6); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: all 0.3s; // @presenter Transition

package/lib/components/Switch/variables.js

@@ -15,7 +15,7 @@ exports.switcher = (0, styled_components_1.css) `
     --switch-border-color-pressed: transparent; // @presenter Color
     --switch-border-color-disabled: transparent; // @presenter Color
     --switch-border-color-selected: transparent; // @presenter Color
-    --switch-border-radius: var(--border-radius); // @presenter BorderRadius
+    --switch-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-border-width: var(--border-width); // @presenter Border
 
     --switch-width: 32px; // @presenter Width
@@ -29,7 +29,7 @@ exports.switcher = (0, styled_components_1.css) `
     --switch-knob-bg-color-selected: var(--color-white); // @presenter Color
     --switch-knob-bg-color-disabled: var(--color-warm-grey-1); // @presenter Color
 
-    --switch-knob-border-radius: calc(var(--border-radius) / 2); // @presenter BorderRadius
+    --switch-knob-border-radius: var(--border-radius-full); // @presenter BorderRadius
     --switch-knob-height: 14px; // @presenter Height
     --switch-knob-width: 14px; // @presenter Width
     --switch-knob-transition: transform 0.3s; // @presenter Transition

package/lib/components/Tag/variables.js

@@ -10,9 +10,9 @@ 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); // @presenter BorderRadius
+  --tag-border-radius: var(--border-radius-md); // @presenter BorderRadius
   --tag-box-shadow: none; // @presenter Shadow
-  --tag-border-radius-focused: var(--border-radius); // @presenter BorderRadius
+  --tag-border-radius-focused: var(--tag-border-radius); // @presenter BorderRadius
 
   --tag-status-dot-color-default: var(--color-persian-green-7);
   --tag-badge-size: var(--spacing-xs);

package/lib/components/Tags/variables.js

@@ -15,7 +15,7 @@ exports.httpTag = (0, styled_components_1.css) `
   --http-tag-bg-color: none;
 
   --counter-tag-padding: 0px var(--spacing-xxs);
-  --counter-tag-border-radius: var(--border-radius);
+  --counter-tag-border-radius: var(--tag-border-radius);
   --counter-tag-min-width: var(--spacing-md);
 `;
 //# sourceMappingURL=variables.js.map