@redocly/theme 0.47.0 → 0.48.0

package/lib/components/Buttons/CopyButton.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { TooltipProps } from '../../components/Tooltip/Tooltip';
-import type { ControlItemType } from '../../components/CodeBlock/CodeBlockControls';
+import type { ButtonProps } from '../../components/Button/Button';
 export type CopyButtonProps = {
     data: unknown;
-    type?: ControlItemType;
+    type?: 'icon' | 'text' | 'compound';
     toasterPlacement?: TooltipProps['placement'];
     toasterText?: string;
     toasterDuration?: number;
@@ -11,6 +11,11 @@ export type CopyButtonProps = {
     onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
     dataTestId?: string;
     className?: string;
-    variant?: string;
+    variant?: ButtonProps['variant'];
+    size?: ButtonProps['size'];
+    disabled?: ButtonProps['disabled'];
+    fullWidth?: ButtonProps['fullWidth'];
+    tone?: ButtonProps['tone'];
+    extraClass?: ButtonProps['extraClass'];
 };
 export declare const CopyButton: React.NamedExoticComponent<CopyButtonProps>;

package/lib/components/Buttons/CopyButton.js

@@ -30,7 +30,7 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const CopyIcon_1 = require("../../icons/CopyIcon/CopyIcon");
 const Tooltip_1 = require("../../components/Tooltip/Tooltip");
-function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', }) {
+function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', toasterText, toasterDuration, buttonText, onCopyClick, dataTestId = 'copy-button', className, variant = 'text', size = 'small', disabled, fullWidth, tone, extraClass, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const tooltip = (0, hooks_1.useControl)();
     const { translate } = useTranslate();
@@ -46,8 +46,9 @@ function CopyButtonComponent({ data, type = 'icon', toasterPlacement = 'top', to
         showTooltip(duration);
         onCopyClick === null || onCopyClick === void 0 ? void 0 : onCopyClick(e);
     };
-    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement },
-        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: "small", variant: variant }, type !== 'icon' && translate('codeSnippet.copy.toasterText', buttonText || 'Copy'))));
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: `copy-button ${className ? className : ''}`, tip: translate('codeSnippet.copy.buttonText', toasterText || 'Copied!'), isOpen: tooltip.isOpened, placement: toasterPlacement, width: "fit-content" },
+        react_1.default.createElement(Button_1.Button, { "data-component-name": "Buttons/CopyButton", onClick: (e) => copy(e, toasterDuration), "data-testid": dataTestId, icon: type === 'icon' || type === 'compound' ? react_1.default.createElement(CopyIcon_1.CopyIcon, null) : undefined, size: size, variant: variant, disabled: disabled, fullWidth: fullWidth, tone: tone, extraClass: extraClass }, (type === 'text' || type === 'compound') &&
+            translate('codeSnippet.copy.toasterText', buttonText || 'Copy'))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/Feedback/Mood.d.ts

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export declare enum MOOD_STATES {
     SATISFIED = "satisfied",
     NEUTRAL = "neutral",
@@ -25,7 +25,7 @@ export type MoodProps = {
             neutral?: ReasonsSettingsSchema;
             dissatisfied?: ReasonsSettingsSchema;
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Mood.js

@@ -46,7 +46,7 @@ var MOOD_STATES;
     MOOD_STATES["DISSATISFIED"] = "dissatisfied";
 })(MOOD_STATES || (exports.MOOD_STATES = MOOD_STATES = {}));
 function Mood({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [score, setScore] = React.useState('');
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
@@ -109,7 +109,7 @@ function Mood({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const onSubmitMoodForm = () => {
         onSubmit({
             score: remapScore(score),
@@ -160,10 +160,10 @@ function Mood({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: renderCommentLabel(score) } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelMoodForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { type: "submit", variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Feedback/Rating.d.ts

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 export declare const FEEDBACK_MAX_RATING = 5;
 export type RatingProps = {
     onSubmit: (value: {
@@ -21,7 +21,7 @@ export type RatingProps = {
             component?: string;
             items: string[];
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Rating.js

@@ -39,7 +39,7 @@ const Stars_1 = require("../../components/Feedback/Stars");
 const Button_1 = require("../../components/Button/Button");
 exports.FEEDBACK_MAX_RATING = 5;
 function Rating({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [reasons, setReasons] = React.useState([]);
@@ -71,7 +71,7 @@ function Rating({ settings, onSubmit, className }) {
     const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     (0, react_1.useEffect)(() => {
         if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
             onSubmitRatingForm();
@@ -102,10 +102,10 @@ function Rating({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitRatingForm, variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Feedback/Scale.d.ts

@@ -1,4 +1,4 @@
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 export declare const MAX_SCALE = 10;
 export type ScaleProps = {
     onSubmit: (value: {
@@ -23,7 +23,7 @@ export type ScaleProps = {
             component?: string;
             items: string[];
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Scale.js

@@ -39,7 +39,7 @@ const Reasons_1 = require("../../components/Feedback/Reasons");
 const Button_1 = require("../../components/Button/Button");
 exports.MAX_SCALE = 10;
 function Scale({ settings, onSubmit, className }) {
-    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, leftScaleLabel, rightScaleLabel, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [score, setScore] = React.useState(0);
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [comment, setComment] = React.useState('');
@@ -59,7 +59,7 @@ function Scale({ settings, onSubmit, className }) {
     const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!score && (displayReasons || displayComment);
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const handleCancel = () => {
         setScore(0);
         setComment('');
@@ -109,10 +109,10 @@ function Scale({ settings, onSubmit, className }) {
                             translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } }))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel')),
                 React.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.scale.send", type: "submit", variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));

package/lib/components/Feedback/Sentiment.d.ts

@@ -1,4 +1,4 @@
-import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 export type SentimentProps = {
     onSubmit: (value: {
         score: number;
@@ -18,7 +18,7 @@ export type SentimentProps = {
             like?: ReasonsSettingsSchema;
             dislike?: ReasonsSettingsSchema;
         };
-        anonymousUserEmail?: AnonymousUserEmailSettings;
+        optionalEmail?: OptionalEmailSettings;
     };
     className?: string;
 };

package/lib/components/Feedback/Sentiment.js

@@ -38,7 +38,7 @@ const Button_1 = require("../../components/Button/Button");
 const ThumbDownIcon_1 = require("../../icons/ThumbDownIcon/ThumbDownIcon");
 const ThumbUpIcon_1 = require("../../icons/ThumbUpIcon/ThumbUpIcon");
 function Sentiment({ settings, onSubmit, className }) {
-    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, anonymousUserEmail: anonymousUserEmailSettings, } = settings || {};
+    const { label, submitText, comment: commentSettings, reasons: reasonsSettings, optionalEmail: optionalEmailSettings, } = settings || {};
     const [isSubmitted, setIsSubmitted] = React.useState(false);
     const [score, setScore] = React.useState(0);
     const [comment, setComment] = React.useState('');
@@ -74,7 +74,7 @@ function Sentiment({ settings, onSubmit, className }) {
     const displayReasons = checkIfShouldDisplayReasons(score);
     const displayComment = !!(score && !(commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.hide));
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-    const displayFeedbackEmail = !!score && (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.enabled) && !userData.isAuthenticated;
+    const displayFeedbackEmail = !!score && !(optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.hide) && !userData.isAuthenticated;
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
             translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
@@ -141,10 +141,10 @@ function Sentiment({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: { label: commentLabel } })))),
             displayFeedbackEmail && (React.createElement(StyledFormOptionalFields, null,
-                React.createElement(Label, { "data-translation-key": "feedback.settings.anonymousUserEmail.label" }, (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.label) ||
-                    translate('feedback.settings.anonymousUserEmail.label', 'Your email (optional, for follow-up)')),
-                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (anonymousUserEmailSettings === null || anonymousUserEmailSettings === void 0 ? void 0 : anonymousUserEmailSettings.placeholder) ||
-                        translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com'), type: "email", required: !!email }))),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.optionalEmail.label" }, (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.label) ||
+                    translate('feedback.settings.optionalEmail.label', 'Your email (optional, for follow-up)')),
+                React.createElement(EmailInput, { onChange: onEmailChange, placeholder: (optionalEmailSettings === null || optionalEmailSettings === void 0 ? void 0 : optionalEmailSettings.placeholder) ||
+                        translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com'), type: "email", required: !!email }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelSentimentForm, variant: "text", size: "small" }, "Cancel"),
                 React.createElement(Button_1.Button, { onClick: onSubmitSentimentForm, variant: "secondary", size: "small" }, "Submit"))))));

package/lib/components/Search/SearchDialog.js

@@ -52,8 +52,8 @@ function SearchDialog({ onClose, className }) {
     const [product, setProduct] = (0, react_1.useState)(currentProduct);
     const [mode, setMode] = (0, react_1.useState)('search');
     const autoSearchDisabled = mode !== 'search';
-    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
-    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onTopFacetsReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
+    const { query, setQuery, filter, setFilter, items, isSearchLoading, facets, setLoadMore, advancedSearch, askAi, groupField, } = useSearch(product === null || product === void 0 ? void 0 : product.name, autoSearchDisabled);
+    const { isFilterOpen, onFilterToggle, onFilterChange, onFilterReset, onFacetReset, onQuickFilterReset, } = (0, hooks_1.useSearchFilter)(filter, setFilter);
     const aiSearch = useAiSearch({ filter });
     const modalRef = (0, react_1.useRef)(null);
     const { translate } = useTranslate();
@@ -80,10 +80,10 @@ function SearchDialog({ onClose, className }) {
         return react_1.default.createElement(SearchItem_1.SearchItem, { key: `${index}-${item.document.id}`, item: item, product: itemProduct });
     };
     const showLoadMore = (groupKey, currentCount = 0) => {
-        const topFacet = facets.find((facet) => facet.isTop);
+        const groupFacet = facets.find((facet) => facet.field === groupField);
         let needLoadMore = false;
-        if (topFacet) {
-            const groupValue = topFacet.values.find((value) => {
+        if (groupFacet) {
+            const groupValue = groupFacet.values.find((value) => {
                 if (typeof value === 'object') {
                     return value.value === groupKey;
                 }
@@ -124,11 +124,11 @@ function SearchDialog({ onClose, className }) {
                     showSearchFilterButton && (react_1.default.createElement(SearchFilterToggleButton, { icon: react_1.default.createElement(SettingsIcon_1.SettingsIcon, null), onClick: onFilterToggle }))))),
             react_1.default.createElement(SearchDialogBody, null, mode === 'search' ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(SearchDialogBodyMainView, null,
-                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onTopFacetsReset: onTopFacetsReset }),
+                    react_1.default.createElement(SearchGroups_1.SearchGroups, { facets: facets, searchFilter: filter, onFilterChange: onFilterChange, onQuickFilterReset: onQuickFilterReset, groupField: groupField }),
                     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 :
+                            react_1.default.createElement(SearchGroupTitle, { "data-testid": "search-group-title" }, 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": "search.showMore", onClick: () => { var _a; return setLoadMore({ groupKey: key, offset: ((_a = items[key]) === null || _a === void 0 ? void 0 : _a.length) || 0 }); } }, translate('search.showMore', 'Show more'))))) : null;
                     })) : isSearchLoading ? (react_1.default.createElement(SearchMessage, null,
@@ -138,7 +138,7 @@ function SearchDialog({ onClose, className }) {
                         react_1.default.createElement(SearchRecent_1.SearchRecent, { onSelect: setQuery }),
                         react_1.default.createElement(SearchSuggestedPages_1.SearchSuggestedPages, null)))),
                 advancedSearch && mode === 'search' && 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(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
+                    react_1.default.createElement(SearchFilter_1.SearchFilter, { facets: facets, filter: filter, query: query, quickFilterFields: [groupField], onFilterChange: onFilterChange, onFilterReset: onFilterReset, onFacetReset: onFacetReset }))))) : (react_1.default.createElement(SearchAiResponse_1.SearchAiResponse, { question: aiSearch.question, isGeneratingResponse: aiSearch.isGeneratingResponse, response: aiSearch.response, resources: aiSearch.resources }))),
             mode === 'search' && (react_1.default.createElement(SearchDialogFooter, 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') }),

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

@@ -4,8 +4,9 @@ export type SearchFilterProps = {
     facets: SearchFacet[];
     filter: SearchFilterItem[];
     query: string;
-    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
     onFilterReset: () => void;
     onFacetReset: (field: string) => void;
 };
-export declare function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;
+export declare function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }: SearchFilterProps): JSX.Element;

package/lib/components/Search/SearchFilter.js

@@ -33,14 +33,14 @@ const Button_1 = require("../../components/Button/Button");
 const CleanIcon_1 = require("../../icons/CleanIcon/CleanIcon");
 const SearchFilterField_1 = require("../../components/Search/SearchFilterField");
 const hooks_1 = require("../../core/hooks");
-function SearchFilter({ className, facets, filter, query, onFilterChange, onFilterReset, onFacetReset, }) {
+function SearchFilter({ className, facets, filter, query, quickFilterFields, onFilterChange, onFilterReset, onFacetReset, }) {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     return (React.createElement(SearchFilterWrapper, { "data-component-name": "Search/SearchFilter", className: className },
         React.createElement(SearchFilterHeader, null,
             React.createElement("span", { "data-translation-key": "search.filter.title" }, translate('search.filter.title', 'Advanced filter')),
             React.createElement(Button_1.Button, { "data-translation-key": "search.filter.reset", onClick: onFilterReset, variant: "ghost", icon: React.createElement(CleanIcon_1.CleanIcon, null) }, translate('search.filter.reset', 'Reset filters'))),
-        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, onFilterChange: onFilterChange, onFacetReset: onFacetReset, filter: filter, query: query }))))));
+        React.createElement(SearchFilterFields, null, facets.map((facet, index) => (React.createElement(SearchFilterField_1.SearchFilterField, { key: `${facet.field}-${index}`, facet: facet, filter: filter, query: query, quickFilterFields: quickFilterFields, onFilterChange: onFilterChange, onFacetReset: onFacetReset }))))));
 }
 const SearchFilterWrapper = styled_components_1.default.div `
   width: var(--search-filter-width);

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

@@ -4,8 +4,9 @@ type SearchFilterFieldProps = {
     facet: SearchFacet;
     filter: SearchFilterItem[];
     query: string;
-    onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+    quickFilterFields: string[];
+    onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
     onFacetReset: (filed: string) => void;
 };
-export declare function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
+export declare function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }: SearchFilterFieldProps): JSX.Element;
 export {};

package/lib/components/Search/SearchFilterField.js

@@ -11,13 +11,13 @@ const ResetIcon_1 = require("../../icons/ResetIcon/ResetIcon");
 const hooks_1 = require("../../core/hooks");
 const SearchFilterFieldSelect_1 = require("../../components/Search/FilterFields/SearchFilterFieldSelect");
 const SearchFilterFieldTags_1 = require("../../components/Search/FilterFields/SearchFilterFieldTags");
-function SearchFilterField({ className, facet, filter, query, onFilterChange, onFacetReset, }) {
+function SearchFilterField({ className, facet, filter, query, quickFilterFields, onFilterChange, onFacetReset, }) {
     var _a;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const selectedValues = ((_a = filter.find((item) => item.field === facet.field)) === null || _a === void 0 ? void 0 : _a.values) || [];
     const onChange = (value) => {
-        onFilterChange(facet.field, value, facet.isTop);
+        onFilterChange(facet.field, value, facet.field in quickFilterFields);
     };
     const onReset = () => {
         onFacetReset(facet.field);

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

@@ -1,9 +1,10 @@
-import type { SearchFacet, SearchFilterItem } from '../../index.js';
+import { type SearchFacet, type SearchFilterItem } from '../../core/types';
 type SearchGroupsProps = {
     facets: SearchFacet[];
     searchFilter: SearchFilterItem[];
-    onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
-    onTopFacetsReset: () => void;
+    groupField: string;
+    onFilterChange: (field: string, value: string[], isQuickFilter?: boolean) => void;
+    onQuickFilterReset: () => void;
 };
-export declare function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }: SearchGroupsProps): JSX.Element;
+export declare function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }: SearchGroupsProps): JSX.Element;
 export {};

package/lib/components/Search/SearchGroups.js

@@ -30,8 +30,8 @@ exports.SearchGroups = SearchGroups;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
-function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset, }) {
-    const groupFacets = facets.filter((facet) => facet.isTop);
+function SearchGroups({ facets, searchFilter, groupField, onFilterChange, onQuickFilterReset, }) {
+    const groupFacets = facets.filter((facet) => facet.field === groupField);
     const handleGroupTagClick = (value, fieldId, active, currentValues) => {
         const values = active
             ? currentValues.filter((item) => item !== value)
@@ -39,7 +39,7 @@ function SearchGroups({ facets, searchFilter, onFilterChange, onTopFacetsReset,
         onFilterChange(fieldId, values, true);
     };
     return (React.createElement(SearchGroupsWrapper, null,
-        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isTop), onClick: () => searchFilter.some((item) => item.isTop) && onTopFacetsReset() }, "All"),
+        React.createElement(GroupTag, { borderless: true, active: !searchFilter.some((item) => item.isQuickFilter), onClick: () => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset() }, "All"),
         React.createElement(Divider, null),
         groupFacets.flatMap((facet) => facet.values.map((facetCount, index) => {
             var _a;

package/lib/components/StatusCode/StatusCode.js

@@ -20,20 +20,17 @@ exports.StatusCode = styled_components_1.default.button.attrs({ 'data-component-
     width: var(--status-code-width);
     border: var(--status-code-border);
     background-color: ${({ status }) => {
-    if (Math.floor(Number(status) / 100) === 2) {
-        return 'var(--status-code-200-bg-color)';
-    }
-    else if (Math.floor(Number(status) / 100) === 4) {
-        return 'var(--status-code-400-bg-color)';
-    }
-    else if (Math.floor(Number(status) / 100) === 5) {
-        return 'var(--status-code-500-bg-color)';
-    }
-    else if (Math.floor(Number(status) / 100) === 3) {
-        return 'var(--status-code-300-bg-color)';
-    }
-    else {
-        return 'var(--status-code-100-bg-color)';
+    switch (true) {
+        case status.startsWith('2'):
+            return 'var(--status-code-200-bg-color)';
+        case status.startsWith('3'):
+            return 'var(--status-code-300-bg-color)';
+        case status.startsWith('4'):
+            return 'var(--status-code-400-bg-color)';
+        case status.startsWith('5'):
+            return 'var(--status-code-500-bg-color)';
+        default:
+            return 'var(--status-code-100-bg-color)';
     }
 }}
 `;

package/lib/core/constants/code-walkthrough.d.ts

@@ -0,0 +1 @@
+export declare const ACTIVE_STEP_QUERY_PARAM = "__step";

package/lib/core/constants/code-walkthrough.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ACTIVE_STEP_QUERY_PARAM = void 0;
+exports.ACTIVE_STEP_QUERY_PARAM = '__step';
+//# sourceMappingURL=code-walkthrough.js.map

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

@@ -1,2 +1,3 @@
 export * from '../../core/constants/common';
 export * from '../../core/constants/environments';
+export * from '../../core/constants/code-walkthrough';

package/lib/core/constants/index.js

@@ -16,4 +16,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/constants/common"), exports);
 __exportStar(require("../../core/constants/environments"), exports);
+__exportStar(require("../../core/constants/code-walkthrough"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.d.ts

@@ -0,0 +1,2 @@
+import type { WalkthroughControlsState } from '../../../core/hooks';
+export declare const CodeWalkthroughControlsStateContext: import("react").Context<WalkthroughControlsState>;

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeWalkthroughControlsStateContext = void 0;
+const react_1 = require("react");
+exports.CodeWalkthroughControlsStateContext = (0, react_1.createContext)({
+    activeFilters: [],
+    getToggleState: () => null,
+    changeToggleState: () => { },
+    getInputState: () => null,
+    changeInputState: () => { },
+    getFilterState: () => null,
+    changeFilterState: () => { },
+    getFileText: () => '',
+    areConditionsMet: () => false,
+    handleDownloadCode: () => Promise.resolve(),
+    populateInputsWithValue: (node) => node,
+});
+//# sourceMappingURL=CodeWalkthroughControlsContext.js.map

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.d.ts

@@ -0,0 +1,2 @@
+import type { WalkthroughStepsState } from '../../../core/hooks';
+export declare const CodeWalkthroughStepsContext: import("react").Context<WalkthroughStepsState>;

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeWalkthroughStepsContext = void 0;
+const react_1 = require("react");
+exports.CodeWalkthroughStepsContext = (0, react_1.createContext)({
+    activeStep: null,
+    setActiveStep: () => { },
+    register: () => { },
+    unregister: () => { },
+});
+//# sourceMappingURL=CodeWalkthroughStepsContext.js.map

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

@@ -1 +1,3 @@
 export * from '../../core/contexts/ThemeDataContext';
+export * from '../../core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
+export * from '../../core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

package/lib/core/contexts/index.js

@@ -15,4 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/contexts/ThemeDataContext"), exports);
+__exportStar(require("../../core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
+__exportStar(require("../../core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -4,5 +4,5 @@ export declare const useSearchFilter: jest.Mock<{
     onFilterChange: () => void;
     onFilterToggle: () => void;
     onFilterReset: () => void;
-    onTopFacetsReset: () => void;
+    onQuickFilterReset: () => void;
 }, [], any>;

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

@@ -8,7 +8,7 @@ exports.useSearchFilter = jest.fn(() => {
         onFilterChange: () => { },
         onFilterToggle: () => { },
         onFilterReset: () => { },
-        onTopFacetsReset: () => { },
+        onQuickFilterReset: () => { },
     };
 });
 //# sourceMappingURL=use-search-filter.js.map

package/lib/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.d.ts

@@ -0,0 +1,10 @@
+export declare class MockIntersectionObserver {
+    readonly root: Element | Document | null;
+    readonly rootMargin: string;
+    readonly thresholds: ReadonlyArray<number>;
+    observe: (target: HTMLElement) => void;
+    unobserve: (target: HTMLElement) => void;
+    disconnect: () => void;
+    constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit);
+    takeRecords(): any[];
+}

package/lib/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MockIntersectionObserver = void 0;
+class MockIntersectionObserver {
+    // @ts-ignore
+    constructor(callback, options) {
+        Object.defineProperty(this, "root", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "rootMargin", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "thresholds", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "observe", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "unobserve", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "disconnect", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.root = null;
+        this.rootMargin = '0px';
+        this.thresholds = [1];
+        this.observe = jest.fn;
+        this.unobserve = jest.fn;
+        this.disconnect = jest.fn;
+    }
+    takeRecords() {
+        return [];
+    }
+}
+exports.MockIntersectionObserver = MockIntersectionObserver;
+//# sourceMappingURL=MockIntersectionObserver.js.map