@redocly/theme 0.60.0-next.1 → 0.60.0-next.3

package/lib/components/JsonViewer/JsonViewer.js

@@ -40,7 +40,7 @@ exports.JsonViewerWrap = exports.JsonViewer = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
-const helpers_1 = require("./helpers");
+const Helpers_1 = require("./Helpers");
 function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelToggle, title, controls = {}, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
@@ -71,7 +71,7 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, onPanelT
                 }
                 : undefined, source: source },
             react_1.default.createElement(FoldingWrap, null,
-                react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
+                react_1.default.createElement(Helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
 }
 exports.JsonViewer = (0, react_1.memo)(JsonComponent);
 const FoldingWrap = styled_components_1.default.div `

package/lib/components/Loaders/Loading.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const Spinner_1 = require("../../icons/Spinner/Spinner");
+const hooks_1 = require("../../core/hooks");
 const LoadingMessage = styled_components_1.default.div `
   font-family: helvetica, sans, sans-serif;
   width: 100%;
@@ -17,8 +18,10 @@ const LoadingMessage = styled_components_1.default.div `
   color: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
 `;
 function Loading({ color }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     return (react_1.default.createElement("div", { style: { textAlign: 'center' } },
-        react_1.default.createElement(LoadingMessage, { color: color }, "Loading ..."),
+        react_1.default.createElement(LoadingMessage, { color: color }, translate('loaders.loading', 'Loading...')),
         react_1.default.createElement(Spinner_1.Spinner, { color: color })));
 }
 //# sourceMappingURL=Loading.js.map

package/lib/components/Markdown/Markdown.js

@@ -36,9 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Markdown = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
-const baseTable_1 = require("../../components/Markdown/styles/baseTable");
+const base_table_1 = require("../../components/Markdown/styles/base-table");
 const links_1 = require("../../components/Markdown/styles/links");
-const headingAnchor_1 = require("../../components/Markdown/styles/headingAnchor");
+const heading_anchor_1 = require("../../components/Markdown/styles/heading-anchor");
 exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     'data-component-name': 'Markdown/Markdown',
     className,
@@ -133,7 +133,7 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
     }
   }
 
-  ${baseTable_1.markdownBaseTableCss};
+  ${base_table_1.markdownBaseTableCss};
 
   p {
     margin: var(--md-paragraph-margin);
@@ -142,37 +142,37 @@ exports.Markdown = styled_components_1.default.main.attrs(({ className }) => ({
   h1.md {
     ${(0, utils_1.typography)('h1')};
     margin: var(--h1-margin-top) 0 var(--h1-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h2.md {
     ${(0, utils_1.typography)('h2')};
     margin: var(--h2-margin-top) 0 var(--h2-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h3.md {
     ${(0, utils_1.typography)('h3')};
     margin: var(--h3-margin-top) 0 var(--h3-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h4.md {
     ${(0, utils_1.typography)('h4')};
     margin: var(--h4-margin-top) 0 var(--h4-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h5.md {
     ${(0, utils_1.typography)('h5')};
     margin: var(--h5-margin-top) 0 var(--h5-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h6.md {
     ${(0, utils_1.typography)('h6')};
     margin: var(--h6-margin-top) 0 var(--h6-margin-bottom) 0;
-    ${(0, headingAnchor_1.headingAnchorCss)()};
+    ${(0, heading_anchor_1.headingAnchorCss)()};
   }
 
   h1.md code {

package/lib/components/Markdown/styles/{baseTable.js → base-table.js}

@@ -65,4 +65,4 @@ exports.markdownBaseTableCss = (0, styled_components_1.css) `
     }
   }
 `;
-//# sourceMappingURL=baseTable.js.map
+//# sourceMappingURL=base-table.js.map

package/lib/components/Markdown/styles/{headingAnchor.js → heading-anchor.js}

@@ -32,4 +32,4 @@ function headingAnchorCss(className = 'anchor') {
     }
   `;
 }
-//# sourceMappingURL=headingAnchor.js.map
+//# sourceMappingURL=heading-anchor.js.map

package/lib/components/Menu/MenuItem.js

@@ -80,7 +80,11 @@ function MenuItem(props) {
         }
     };
     const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
-    const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
+    const httpColor = (0, utils_1.getOperationColor)({
+        isAdditionalOperation: item.isAdditionalOperation,
+        deprecated: item.deprecated,
+        httpVerb: item.httpVerb || '',
+    });
     const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, onKeyDown: handleExpandOnEnter, ref: labelRef, role: item.link ? 'none' : 'link', tabIndex: !item.link ? 0 : undefined, "data-testid": "menu-item-label", "data-active": item.active },
         hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
         react_1.default.createElement(MenuItemIcon, { icon: item.icon, srcSet: item.srcSet }),

package/lib/components/OpenApiDocs/hooks/AfterOpenApiOperation.js

@@ -7,5 +7,6 @@ exports.AfterOpenApiOperation = void 0;
 // export function AfterOpenApiOperation(_props: AfterOpenAPIOperationProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AfterOpenApiOperation = null;
 //# sourceMappingURL=AfterOpenApiOperation.js.map

package/lib/components/OpenApiDocs/hooks/AfterOpenApiTitle.js

@@ -7,5 +7,6 @@ exports.AfterOpenApiTitle = void 0;
 // export function AfterOpenApiTitle(_props: AfterOpenApiTitleProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.AfterOpenApiTitle = null;
 //# sourceMappingURL=AfterOpenApiTitle.js.map

package/lib/components/OpenApiDocs/hooks/BeforeOpenApiOperation.js

@@ -7,5 +7,6 @@ exports.BeforeOpenApiOperation = void 0;
 // export function BeforeOpenApiOperation(_props: BeforeOpenAPIOperationProps) {
 //   return null;
 // }
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.BeforeOpenApiOperation = null;
 //# sourceMappingURL=BeforeOpenApiOperation.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiFooter.js

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiFooter = void 0;
 // export function OpenApiFooter() {
 //   return null;
 // }
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenApiFooter = void 0;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.OpenApiFooter = null;
 //# sourceMappingURL=OpenApiFooter.js.map

package/lib/components/OpenApiDocs/hooks/OpenApiHeader.js

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OpenApiHeader = void 0;
 // export function OpenApiHeader() {
 //   return null;
 // }
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OpenApiHeader = void 0;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 exports.OpenApiHeader = null;
 //# sourceMappingURL=OpenApiHeader.js.map

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

@@ -47,6 +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)(() => {
@@ -96,7 +97,7 @@ function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChang
             ? 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, "Search to show more items...")) : null, onSearch: onSearch, checkmarkIconPosition: "start" }));
+            : 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" }));
 }
 const FilterSelectOptionWrapper = styled_components_1.default.div `
   width: 100%;

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

@@ -7,6 +7,8 @@ exports.SearchFilterFieldTags = SearchFilterFieldTags;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../../components/Tag/Tag");
+const utils_1 = require("../../../core/utils");
+const constants_1 = require("../../../core/constants");
 function SearchFilterFieldTags({ className, facet, selectedValues, onChange, }) {
     return (react_1.default.createElement(FilterTagsWrapper, { "data-component-name": "Search/FilterFields/SearchFilterFieldTags", className: className }, facet.values.map((facetCount, index) => {
         const { value, count, isCounterVisible } = facetCount;
@@ -17,7 +19,11 @@ function SearchFilterFieldTags({ className, facet, selectedValues, onChange, })
                 : [...selectedValues, value];
             onChange(values);
         };
-        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: value, onClick: () => {
+        const color = (0, utils_1.getOperationColor)({
+            httpVerb: value,
+            isAdditionalOperation: !constants_1.REQUEST_METHODS.includes(value.toUpperCase()),
+        });
+        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, tabIndex: 0, color: color, onClick: () => {
                 updateSelectedValues();
             }, onKeyDown: (e) => {
                 if (e.key === 'Enter') {

package/lib/components/Search/SearchAiMessage.js

@@ -88,30 +88,32 @@ function SearchAiMessageComponent({ role, content, isThinking, resources, classN
     };
     return (react_1.default.createElement(SearchAiMessageWrapper, { "data-component-name": "Search/SearchAiMessage", role: role, className: className, "data-testid": "search-ai-message" },
         role === constants_1.AiSearchConversationRole.ASSISTANT && (react_1.default.createElement(AiStarsIcon_1.AiStarsIcon, { size: "32px", background: "var(--search-ai-icon-bg-color)", borderRadius: "var(--border-radius-lg)", color: "var(--search-ai-icon-color)", margin: "0 var(--spacing-xs) 0 0" })),
-        react_1.default.createElement(MessageContentWrapper, null,
+        react_1.default.createElement(MessageContentWrapper, null, role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(MessageWrapper, { role: role },
-                role === constants_1.AiSearchConversationRole.ASSISTANT ? (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
-                    hasResources && (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
-                            react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
-                                translate('search.ai.resourcesFound.basedOn', 'Based on'),
-                                " ",
-                                resourcesCount,
-                                ' ',
-                                translate('search.ai.resourcesFound.resources', 'resources')),
-                            react_1.default.createElement(ResourceTagsWrapper, null, resources === null || resources === void 0 ? void 0 : resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: `${resource.url}-${idx}`, to: resource.url, target: "_blank" },
-                                react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title)))))),
-                        react_1.default.createElement(FeedbackWrapper, null,
-                            react_1.default.createElement(SearchAiActionButtons_1.SearchAiActionButtons, { content: content, feedback: feedback, onFeedback: handleFeedbackClick, disabled: feedbackSent })))))) : (content),
+                react_1.default.createElement(ResponseText, { as: "div", children: markDownContent, "data-testid": "response-text" }),
+                hasResources && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(ResourcesWrapper, { "data-testid": "resources-wrapper" },
+                        react_1.default.createElement(ResourcesTitle, { "data-translation-key": "search.ai.resourcesFound" },
+                            translate('search.ai.resourcesFound.basedOn', 'Based on'),
+                            " ",
+                            resourcesCount,
+                            ' ',
+                            translate('search.ai.resourcesFound.resources', 'resources')),
+                        react_1.default.createElement(ResourceTagsWrapper, null, resources === null || resources === void 0 ? void 0 : resources.map((resource, idx) => (react_1.default.createElement(Link_1.Link, { key: `${resource.url}-${idx}`, to: resource.url, target: "_blank" },
+                            react_1.default.createElement(ResourceTag, { borderless: true, icon: react_1.default.createElement(DocumentIcon_1.DocumentIcon, { color: "--search-ai-resource-tag-icon-color" }) }, resource.title)))))))),
                 isThinking && content.length === 0 && (react_1.default.createElement(ThinkingDotsWrapper, { "data-testid": "thinking-dots-wrapper" },
                     react_1.default.createElement(ThinkingDot, null),
                     react_1.default.createElement(ThinkingDot, null),
-                    react_1.default.createElement(ThinkingDot, null)))),
-            messageId && feedback === types_1.FeedbackType.Dislike && !showSuccessMessage && (react_1.default.createElement(SearchAiNegativeFeedbackForm_1.SearchAiNegativeFeedbackForm, { messageId: messageId, onClose: onFeedbackChange, onSubmit: (reason) => handleFeedbackClick(types_1.FeedbackType.Dislike, reason) })),
+                    react_1.default.createElement(ThinkingDot, null))),
+                content.length > 0 && (react_1.default.createElement(FeedbackWrapper, null,
+                    react_1.default.createElement(SearchAiActionButtons_1.SearchAiActionButtons, { content: content, feedback: feedback, onFeedback: handleFeedbackClick, disabled: !!feedback })))),
+            messageId && feedback === types_1.FeedbackType.Dislike && !showSuccessMessage && (react_1.default.createElement(SearchAiNegativeFeedbackForm_1.SearchAiNegativeFeedbackForm, { messageId: messageId, onClose: (messageId, feedback) => {
+                    onFeedbackChange(messageId, feedback);
+                    setFeedbackSent(true);
+                }, onSubmit: (reason) => handleFeedbackClick(types_1.FeedbackType.Dislike, reason) })),
             showSuccessMessage && (react_1.default.createElement(SuccessMessageWrapper, { "data-component-name": "Search/SearchAiMessage/Success" },
                 react_1.default.createElement(CheckmarkOutlineIcon_1.CheckmarkOutlineIcon, { size: "20px", color: "var(--color-success-base)" }),
-                react_1.default.createElement(SuccessMessageText, null, translate('search.ai.feedback.thanks', 'Thank you for your feedback!')))))));
+                react_1.default.createElement(SuccessMessageText, null, translate('search.ai.feedback.thanks', 'Thank you for your feedback!')))))) : (react_1.default.createElement(MessageWrapper, { role: role }, content)))));
 }
 function areResourcesEqual(prev, next) {
     if (prev === next)

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

@@ -1,8 +1,10 @@
+import React from 'react';
 import type { JSX } from 'react';
-import type { FeedbackType } from '../../core/types';
+import { FeedbackType } from '../../core/types';
 export type SearchAiNegativeFeedbackFormProps = {
     messageId: string;
-    onClose: (messageId: string, feedback: FeedbackType | undefined) => void;
+    onClose: (messageId: string, feedback: FeedbackType, reason?: string) => void;
     onSubmit: (reason: string) => void;
+    formRef?: React.Ref<HTMLDivElement>;
 };
-export declare function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, }: SearchAiNegativeFeedbackFormProps): JSX.Element;
+export declare function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, formRef, }: SearchAiNegativeFeedbackFormProps): JSX.Element;

package/lib/components/Search/SearchAiNegativeFeedbackForm.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchAiNegativeFeedbackForm = SearchAiNegativeFeedbackForm;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const types_1 = require("../../core/types");
 const Button_1 = require("../../components/Button/Button");
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const ArrowLeftIcon_1 = require("../../icons/ArrowLeftIcon/ArrowLeftIcon");
@@ -50,7 +51,7 @@ const NEGATIVE_FEEDBACK_DEFAULT_REASONS = [
     'Wrong topic',
     'Partially helpful, but missing details',
 ];
-function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, }) {
+function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, formRef, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const [showMoreInput, setShowMoreInput] = (0, react_1.useState)(false);
@@ -72,14 +73,14 @@ function SearchAiNegativeFeedbackForm({ messageId, onClose, onSubmit, }) {
             adjustTextAreaHeight();
         }
     }, [showMoreInput]);
-    return (react_1.default.createElement(FeedbackFormWrapper, { "data-component-name": "Search/SearchAiNegativeFeedbackForm" },
+    return (react_1.default.createElement(FeedbackFormWrapper, { "data-component-name": "Search/SearchAiNegativeFeedbackForm", ref: formRef },
         react_1.default.createElement(FeedbackHeader, null,
             showMoreInput ? (react_1.default.createElement(BackButton, { variant: "text", size: "small", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null), onClick: () => setShowMoreInput(false), "aria-label": "Back to feedback reasons" })) : null,
             react_1.default.createElement(FeedbackTitle, { "data-translation-key": "search.ai.feedback.title" }, translate('search.ai.feedback.title', "What didn't you like about this response?")),
-            react_1.default.createElement(CloseButton, { variant: "text", size: "small", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: () => onClose(messageId, undefined), "aria-label": "Close feedback form" })),
+            react_1.default.createElement(CloseButton, { variant: "text", size: "small", icon: react_1.default.createElement(CloseIcon_1.CloseIcon, null), onClick: () => onClose(messageId, types_1.FeedbackType.Dislike, undefined), "aria-label": "Close feedback form" })),
         !showMoreInput ? (react_1.default.createElement(FeedbackReasonsWrapper, null,
             NEGATIVE_FEEDBACK_DEFAULT_REASONS.map((reason) => (react_1.default.createElement(Button_1.Button, { key: reason, variant: "outlined", size: "small", onClick: () => onSubmit(reason) }, reason))),
-            react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", onClick: () => setShowMoreInput(true) }, "More..."))) : (react_1.default.createElement(FeedbackInputWrapper, null,
+            react_1.default.createElement(Button_1.Button, { variant: "outlined", size: "small", onClick: () => setShowMoreInput(true) }, translate('search.ai.feedback.more', 'More...')))) : (react_1.default.createElement(FeedbackInputWrapper, null,
             react_1.default.createElement(FeedbackTextArea, { ref: textAreaRef, placeholder: translate('search.ai.feedback.detailsPlaceholder', 'Add specific details'), value: detailedFeedback, onChange: handleTextChange, rows: 1, autoFocus: true }),
             react_1.default.createElement(SendButton, { size: "small", icon: react_1.default.createElement(SendIcon_1.SendIcon, { color: !detailedFeedback.trim()
                         ? '--button-content-color-disabled'

package/lib/components/Search/SearchGroups.js

@@ -40,8 +40,11 @@ exports.SearchGroups = SearchGroups;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
+const hooks_1 = require("../../core/hooks");
 function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }) {
     const groupFacets = facets.filter((facet) => facet.field === groupField);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const handleGroupTagClick = (value, fieldId, active, currentValues) => {
         const values = active
             ? currentValues.filter((item) => item !== value)
@@ -49,7 +52,7 @@ function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuic
         onFilterChange(fieldId, values, true);
     };
     return (React.createElement(SearchGroupsWrapper, null,
-        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset(), selectable: true }, "All"),
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset(), selectable: true }, translate('search.groups.all', 'All')),
         React.createElement(Divider, null),
         groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
             var _a;

package/lib/components/Search/SearchHighlight.js

@@ -39,6 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.searchHighlight = searchHighlight;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function slicer(str, arr) {
     const markOpenIndex = str.indexOf('<mark>');
     const markCloseIndex = str.indexOf('</mark>');

package/lib/components/Search/SearchItem.js

@@ -46,9 +46,12 @@ const SearchHighlight_1 = require("../../components/Search/SearchHighlight");
 const Badge_1 = require("../../components/Badge/Badge");
 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;
     const ref = (0, react_1.useRef)(null);
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     (0, react_1.useEffect)(() => {
         var _a;
         if (item.active) {
@@ -58,6 +61,10 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
     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;
+    const httpColor = (0, utils_1.getOperationColor)({
+        isAdditionalOperation: document.isAdditionalOperation,
+        httpVerb: document.httpMethod || '',
+    });
     return (react_1.default.createElement(SearchItemWrapper, { className: className, to: document.url, onClick: onClick, tabIndex: 0, innerRef: (el) => {
             ref.current = el;
             if (!innerRef)
@@ -75,11 +82,11 @@ function SearchItem({ onClick, item, className, product, innerRef, }) {
                     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()),
+                    react_1.default.createElement(SearchItemOperationTag, { color: httpColor }, document.httpMethod.toUpperCase()),
                     highlight.httpPath ? (0, SearchHighlight_1.searchHighlight)(highlight.httpPath) : document.httpPath)) : 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.deprecated ? (react_1.default.createElement(SearchItemBadge, { deprecated: true }, translate('search.searchItem.deprecated', 'Deprecated'))) : null,
                     document.badges
                         ? document.badges.map(({ name, color }) => (react_1.default.createElement(SearchItemBadge, { color: color || 'var(--color-info-base)', key: name }, name)))
                         : null),

package/lib/components/Search/variables.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.search = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.search = (0, styled_components_1.css) `
   /**
     * @tokens Search
@@ -263,4 +264,5 @@ exports.search = (0, styled_components_1.css) `
 
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

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

@@ -1,5 +1,5 @@
 import type { ForwardedRef, ReactElement } from 'react';
-import type { SegmentedProps } from '../../core/types/segmented';
+import type { SegmentedProps } from '../../core/types';
 export declare const Segmented: <T>(props: SegmentedProps<T> & {
     ref?: ForwardedRef<HTMLDivElement>;
 }) => ReactElement;

package/lib/components/Segmented/Segmented.js

@@ -36,13 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Segmented = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
-const typedMemo_1 = require("../../core/hoc/typedMemo");
+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 },
         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))))));
 }
-exports.Segmented = (0, typedMemo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
+exports.Segmented = (0, typed_memo_1.typedMemo)((0, react_1.forwardRef)(SegmentedComponent));
 const SegmentedGroup = styled_components_1.default.div `
   display: flex;
   background: var(--segmented-buttons-bg-color-main);

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

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { SelectProps } from '../../core/types/select';
+import type { SelectProps } from '../../core/types';
 export declare function Select<T>(props: SelectProps<T>): JSX.Element;
 export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {
     disabled?: boolean;

package/lib/components/Select/Select.js

@@ -48,6 +48,8 @@ const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem")
 const hooks_1 = require("../../core/hooks");
 function Select(props) {
     const { className, value, options, dataAttributes, withArrow = true, triggerEvent = 'click', placement, alignment, icon, onlyIcon, disabled, placeholder, hideCheckmarkIcon, checkmarkIconPosition, dataTestId = 'select', multiple, searchable, clearable, footer, onChange, onSearch, renderInput, renderDivider, } = props;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
     const getSelectedOptionsFromPropsValue = () => {
         const values = Array.isArray(value) ? value : [value];
         return values
@@ -176,7 +178,7 @@ function Select(props) {
             e.preventDefault();
         } }),
         react_1.default.createElement(SelectDropdown, { closeOnClick: !multiple, withArrow: withArrow, trigger: renderInput ? renderInput() : renderDefaultInput(selectInputRef), triggerEvent: triggerEvent, placement: placement, alignment: alignment, active: !renderInput ? dropdownActive : undefined },
-            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, "No results")) : (filteredOptions.map((option, index) => {
+            react_1.default.createElement(SelectDropdownMenu, { role: "listbox", footer: footer }, filteredOptions.length === 0 ? (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { disabled: true }, translate('select.noResults', 'No results'))) : (filteredOptions.map((option, index) => {
                 return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { onAction: () => selectHandler(option), prefix: !hideCheckmarkIcon &&
                             (checkmarkIconPosition ? checkmarkIconPosition === 'start' : false) &&
@@ -184,7 +186,7 @@ function Select(props) {
                             (checkmarkIconPosition ? checkmarkIconPosition === 'end' : true) &&
                             isSelected(option) && react_1.default.createElement(CheckmarkIcon_1.CheckmarkIcon, null) }, typeof option.element === 'string' ? (react_1.default.createElement("div", null, option.element)) : (option.element)),
                     renderDivider && index !== options.length - 1 ? renderDivider() : null));
-            }) || 'No results')))));
+            }) || translate('select.noResults', 'No results'))))));
 }
 exports.SelectWrapper = styled_components_1.default.div `
   display: flex;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { SelectOption } from '../../core/types/select';
+import type { SelectOption } from '../../core/types';
 type SelectInputProps<T> = {
     id?: string;
     listboxId?: string;

package/lib/components/Select/SelectInput.js

@@ -46,11 +46,13 @@ const Button_1 = require("../../components/Button/Button");
 function SelectInput(props) {
     const { id, listboxId, onlyIcon, icon, customIcon, selectedOptions, placeholder, stickyValue, multiple, searchable, clearable, clearHandler, searchHandler, clickHandler, searchValue, inputBlurHandler, inputFocusHandler, } = props;
     const inputRef = (0, react_1.useRef)(null);
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onChangeHandler = (e) => {
         var _a;
         searchHandler === null || searchHandler === void 0 ? void 0 : searchHandler(e);
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const onKeyDownHandler = (e) => {
         var _a;
         if (e.key === 'Backspace' && !searchValue && selectedOptions.length) {

package/lib/components/SidebarActions/styled.d.ts

@@ -1,13 +1,14 @@
-export declare const StyledChangeViewButton: import("styled-components").StyledComponent<"span", any, {
+declare const StyledChangeViewButton: import("styled-components").StyledComponent<"span", any, {
     collapsedSidebar?: boolean;
 }, never>;
-export declare const StyledChangeViewButtonWrap: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("react").PropsWithChildren<import("../../components/Tooltip/Tooltip").TooltipProps>>, any, {
+declare const StyledChangeViewButtonWrap: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("react").PropsWithChildren<import("../../components/Tooltip/Tooltip").TooltipProps>>, any, {
     active?: boolean;
 }, never>;
-export declare const ControlsWrap: import("styled-components").StyledComponent<"span", any, {
+declare const ControlsWrap: import("styled-components").StyledComponent<"span", any, {
     iconCount?: number;
     isCollapsed?: boolean;
 }, never>;
-export declare const ControlsWrapChangeLayoutButtons: import("styled-components").StyledComponent<"span", any, {
+declare const ControlsWrapChangeLayoutButtons: import("styled-components").StyledComponent<"span", any, {
     isCollapsed?: boolean;
 }, never>;
+export { StyledChangeViewButton, StyledChangeViewButtonWrap, ControlsWrapChangeLayoutButtons, ControlsWrap, };

package/lib/components/SidebarActions/styled.js

@@ -33,11 +33,11 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ControlsWrapChangeLayoutButtons = exports.ControlsWrap = exports.StyledChangeViewButtonWrap = exports.StyledChangeViewButton = void 0;
+exports.ControlsWrap = exports.ControlsWrapChangeLayoutButtons = exports.StyledChangeViewButtonWrap = exports.StyledChangeViewButton = void 0;
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../../core/utils");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-exports.StyledChangeViewButton = styled_components_1.default.span `
+const StyledChangeViewButton = styled_components_1.default.span `
   display: flex;
   position: relative;
   flex-direction: ${({ collapsedSidebar }) => (collapsedSidebar ? 'column' : 'row')};
@@ -49,7 +49,8 @@ exports.StyledChangeViewButton = styled_components_1.default.span `
   z-index: 1;
   padding: calc(var(--spacing-unit) / 2);
 `;
-exports.StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
+exports.StyledChangeViewButton = StyledChangeViewButton;
+const StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.Tooltip) `
   width: 20px;
   height: 20px;
   border-radius: var(--border-radius);
@@ -58,7 +59,8 @@ exports.StyledChangeViewButtonWrap = (0, styled_components_1.default)(Tooltip_1.
   justify-content: center;
   background-color: ${({ active }) => active && 'var(--segmented-buttons-bg-color-inner)'};
 `;
-exports.ControlsWrap = styled_components_1.default.span `
+exports.StyledChangeViewButtonWrap = StyledChangeViewButtonWrap;
+const ControlsWrap = styled_components_1.default.span `
   display: none;
   justify-content: flex-end;
   bottom: 0;
@@ -86,11 +88,13 @@ exports.ControlsWrap = styled_components_1.default.span `
     display: none;
   }
 `;
-exports.ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
+exports.ControlsWrap = ControlsWrap;
+const ControlsWrapChangeLayoutButtons = styled_components_1.default.span `
   display: flex;
   bottom: 0;
   flex-direction: ${({ isCollapsed }) => (isCollapsed ? 'column-reverse' : 'row')};
   gap: ${({ isCollapsed }) => (isCollapsed ? '10px' : 'var(--spacing-xs)')};
   align-items: center;
 `;
+exports.ControlsWrapChangeLayoutButtons = ControlsWrapChangeLayoutButtons;
 //# sourceMappingURL=styled.js.map

package/lib/components/Tag/Tag.d.ts

@@ -6,7 +6,7 @@ type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
 type ActionColor = 'receive' | 'send';
 type ChannelColor = 'channel';
-type HttpStatusColor = 'http-deprecated';
+type HttpStatusColor = 'http-deprecated' | 'http-additional-operation';
 type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'turquoise' | 'magenta' | 'purple' | 'carrot' | 'raspberry' | 'orange' | 'grass' | 'persian-green' | 'sky' | 'blueberry';
 export type TagProps = {

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tagDarkMode = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.tagDarkMode = (0, styled_components_1.css) `
   --tag-close-button-bg-color-focus: var(--color-warm-grey-6); // @presenter Color
 
@@ -231,6 +232,12 @@ exports.tagDarkMode = (0, styled_components_1.css) `
     --tag-bg-color-hover: #373776; // @presenter Color
   }
 
+  .tag-http-additional-operation {
+    --tag-color: #FCAB69; // @presenter Color
+    --tag-bg-color: #523926; // @presenter Color
+    --tag-bg-color-hover: #694830; // @presenter Color
+  }
+
   .tag-receive {
     --tag-color: #88CF82; // @presenter Color
     --tag-bg-color: #23421F; // @presenter Color
@@ -278,4 +285,5 @@ exports.tagDarkMode = (0, styled_components_1.css) `
     --tag-bg-color-hover: transparent;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.dark.js.map