@redocly/theme 0.42.3 → 0.44.0

package/lib/components/Buttons/CopyButton.js

@@ -46,8 +46,8 @@ 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('theme.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('theme.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 },
+        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'))));
 }
 exports.CopyButton = (0, react_1.memo)(CopyButtonComponent);
 //# sourceMappingURL=CopyButton.js.map

package/lib/components/Buttons/EditPageButton.js

@@ -15,7 +15,7 @@ function EditPageButton({ to }) {
     const telemetry = useTelemetry();
     return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.send('edit_page_link_clicked', {}) },
         react_1.default.createElement(ButtonIcon, null),
-        react_1.default.createElement(ButtonText, { "data-translation-key": "theme.markdown.editPage.text" }, translate('theme.markdown.editPage.text', 'Edit'))));
+        react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }
 exports.EditPageButton = EditPageButton;
 const EditPageButtonWrapper = (0, styled_components_1.default)(Link_1.Link) `

package/lib/components/Catalog/CatalogActions.js

@@ -52,7 +52,7 @@ function CatalogActions(props) {
         React.createElement(Button_1.Button, { variant: "ghost", size: "small", icon: React.createElement(FilterIcon_1.FilterIcon, null), iconPosition: "left", onClick: () => {
                 onOpenFilter();
                 telemetry.send('catalog_actions_button_clicked', {});
-            }, "data-translation-key": "theme.catalog.filters.title" }, translate('theme.catalog.filters.title', 'Filters')),
+            }, "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
         activeFilters > 0 ? React.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFilters) : null));
 }
 exports.CatalogActions = CatalogActions;

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

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

package/lib/components/Dropdown/DropdownMenu.js

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

package/lib/components/Feedback/Comment.js

@@ -53,17 +53,17 @@ function Comment({ settings, onSubmit, onCancel, className, standAlone = true, i
     if (submitValue) {
         return (react_1.default.createElement(StateWrapper, { "data-component-name": "Feedback/Comment", className: className },
             react_1.default.createElement(StyledFormMandatoryFields, null,
-                react_1.default.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.submitText", standAlone: standAlone }, submitText ||
-                    translate('theme.feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
+                react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.submitText", standAlone: standAlone }, submitText ||
+                    translate('feedback.settings.comment.submitText', 'Thank you for helping improve our documentation!')),
                 react_1.default.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (react_1.default.createElement(CommentWrapper, { ref: modalRef, "data-component-name": "Feedback/Comment", className: className, style: standAlone ? { width: 'var(--feedback-report-dialog-width)' } : { width: 'auto' } },
-        react_1.default.createElement(Label, { "data-translation-key": "theme.feedback.settings.comment.label", standAlone: standAlone }, label ||
-            translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')),
+        react_1.default.createElement(Label, { "data-translation-key": "feedback.settings.comment.label", standAlone: standAlone }, label ||
+            translate('feedback.settings.comment.label', 'Please share your feedback with us.')),
         react_1.default.createElement(TextArea, { rows: 3, onChange: handleTextAreaChange }),
         standAlone && (react_1.default.createElement(ButtonsContainer, null,
-            onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel'))),
-            react_1.default.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.send", onClick: send, variant: isDialog ? 'primary' : 'secondary', size: "small" }, translate('theme.feedback.settings.comment.send', 'Send'))))));
+            onCancel && (react_1.default.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.cancel", onClick: onCancel, variant: "text", size: "small" }, translate('feedback.settings.comment.cancel', 'Cancel'))),
+            react_1.default.createElement(Button_1.Button, { "data-translation-key": "feedback.settings.comment.send", onClick: send, variant: isDialog ? 'primary' : 'secondary', size: "small" }, translate('feedback.settings.comment.send', 'Send'))))));
 }
 exports.Comment = Comment;
 const StyledFormMandatoryFields = styled_components_1.default.div `

package/lib/components/Feedback/Mood.js

@@ -58,15 +58,15 @@ function Mood({ settings, onSubmit, className }) {
         switch (score) {
             case MOOD_STATES.SATISFIED:
                 return (commentSettings.satisfiedLabel ||
-                    translate('theme.feedback.settings.comment.satisfiedLabel', 'What was most helpful?'));
+                    translate('feedback.settings.comment.satisfiedLabel', 'What was most helpful?'));
             case MOOD_STATES.NEUTRAL:
                 return (commentSettings.neutralLabel ||
-                    translate('theme.feedback.settings.comment.neutralLabel', 'What can we improve?'));
+                    translate('feedback.settings.comment.neutralLabel', 'What can we improve?'));
             case MOOD_STATES.DISSATISFIED:
                 return (commentSettings.dissatisfiedLabel ||
-                    translate('theme.feedback.settings.comment.dissatisfiedLabel', 'What can we improve?'));
+                    translate('feedback.settings.comment.dissatisfiedLabel', 'What can we improve?'));
             default:
-                return translate('theme.feedback.settings.comment.satisfiedLabel', 'What can we improve?');
+                return translate('feedback.settings.comment.satisfiedLabel', 'What can we improve?');
         }
     };
     const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
@@ -92,14 +92,14 @@ function Mood({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
-                    translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                    translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(MoodWrapper, { "data-component-name": "Feedback/Mood", className: className },
         React.createElement(StyledForm, null,
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === MOOD_STATES.DISSATISFIED ? 'primary' : 'secondary', tone: score === MOOD_STATES.DISSATISFIED ? 'danger' : 'default', onClick: () => {
                             setScore(MOOD_STATES.DISSATISFIED);

package/lib/components/Feedback/Rating.js

@@ -69,14 +69,14 @@ function Rating({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
-                    translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                    translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(RatingWrapper, { "data-component-name": "Feedback/Rating", className: className },
         React.createElement(StyledForm, null,
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Stars_1.Stars, { max: exports.FEEDBACK_MAX_RATING, onChange: setScore, value: score }))),
             (displayReasons || displayComment) && (React.createElement(StyledFormOptionalFields, null,
@@ -87,7 +87,7 @@ function Rating({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
                         label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
-                            translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.'),
+                            translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } })))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
                 React.createElement(Button_1.Button, { onClick: onCancelRatingForm, variant: "text", size: "small" }, "Cancel"),

package/lib/components/Feedback/Reasons.js

@@ -46,12 +46,12 @@ function Reasons({ settings, onChange, className }) {
         setCheckedState(updatedCheckedState);
         onChange(items.filter((_, index) => !!updatedCheckedState[index]));
     };
-    return (React.createElement(ReasonsWrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "theme.feedback.settings.reasons.label", className: className },
+    return (React.createElement(ReasonsWrapper, { "data-component-name": "Feedback/Reasons", "data-translation-key": "feedback.settings.reasons.label", className: className },
         React.createElement(Label, null, label ||
-            translate('theme.feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
+            translate('feedback.settings.reasons.label', 'Which statement describes your thoughts about this page?')),
         items.map((reason, idx) => (React.createElement(OptionWrapper, { key: reason },
             React.createElement("input", { type: input_type, value: reason, checked: checkedState[idx], name: "reasons", onChange: () => handleOptionChange(idx) }),
-            React.createElement("label", { "data-translation-key": `theme.feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)))))));
+            React.createElement("label", { "data-translation-key": `feedback.settings.reasons.items.${idx + 1}`, id: reason, onClick: () => handleOptionChange(idx) }, translate(`feedback.settings.reasons.items.${idx + 1}`, reason)))))));
 }
 exports.Reasons = Reasons;
 const ReasonsWrapper = styled_components_1.default.div `

package/lib/components/Feedback/Scale.js

@@ -74,20 +74,20 @@ function Scale({ settings, onSubmit, className }) {
     }, [score, displayComment, displayReasons]);
     if (isSubmitted) {
         return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale" },
-            React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
-                translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
+            React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
             React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null)));
     }
     return (React.createElement(ScaleWrapper, { "data-component-name": "Feedback/Scale", className: className },
         React.createElement(StyledForm, null,
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(ScaleOptionsWrapper, null, scaleOptions),
                 React.createElement(SubLabelContainer, null,
-                    React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.leftScaleLabel" }, leftScaleLabel ||
-                        translate('theme.feedback.settings.leftScaleLabel', 'Not helpful at all')),
-                    React.createElement(SubLabel, { "data-translation-key": "theme.feedback.settings.rightScaleLabel" }, rightScaleLabel ||
-                        translate('theme.feedback.settings.rightScaleLabel', 'Extremely helpful')))),
+                    React.createElement(SubLabel, { "data-translation-key": "feedback.settings.leftScaleLabel" }, leftScaleLabel ||
+                        translate('feedback.settings.leftScaleLabel', 'Not helpful at all')),
+                    React.createElement(SubLabel, { "data-translation-key": "feedback.settings.rightScaleLabel" }, rightScaleLabel ||
+                        translate('feedback.settings.rightScaleLabel', 'Extremely helpful')))),
             React.createElement(StyledFormOptionalFields, null,
                 displayReasons && (React.createElement(Reasons_1.Reasons, { settings: {
                         label: reasonsSettings === null || reasonsSettings === void 0 ? void 0 : reasonsSettings.label,
@@ -96,11 +96,11 @@ function Scale({ settings, onSubmit, className }) {
                     }, onChange: setReasons })),
                 displayComment && (React.createElement(Comment_1.Comment, { standAlone: false, onSubmit: ({ comment }) => setComment(comment), settings: {
                         label: (commentSettings === null || commentSettings === void 0 ? void 0 : commentSettings.label) ||
-                            translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.'),
+                            translate('feedback.settings.comment.label', 'Please share your feedback with us.'),
                     } }))),
             displaySubmitBnt && (React.createElement(ButtonsContainer, null,
-                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.comment.cancel", onClick: handleCancel, variant: "text", size: "small" }, translate('theme.feedback.settings.comment.cancel', 'Cancel')),
-                React.createElement(Button_1.Button, { "data-translation-key": "theme.feedback.settings.scale.send", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('theme.feedback.settings.scale.send', 'Submit')))))));
+                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", onClick: onSubmitScaleForm, variant: "secondary", size: "small" }, translate('feedback.settings.scale.send', 'Submit')))))));
 }
 exports.Scale = Scale;
 const ScaleWrapper = styled_components_1.default.div `

package/lib/components/Feedback/Sentiment.js

@@ -50,9 +50,9 @@ function Sentiment({ settings, onSubmit, className }) {
     const displaySubmitBnt = !!(score && (displayReasons || displayComment));
     const commentLabel = score === 1
         ? (commentSettings && commentSettings.likeLabel) ||
-            translate('theme.feedback.settings.comment.likeLabel', 'What was most helpful?')
+            translate('feedback.settings.comment.likeLabel', 'What was most helpful?')
         : (commentSettings && commentSettings.dislikeLabel) ||
-            translate('theme.feedback.settings.comment.dislikeLabel', 'What can we improve?');
+            translate('feedback.settings.comment.dislikeLabel', 'What can we improve?');
     const onSubmitSentimentForm = () => {
         onSubmit({
             score,
@@ -73,14 +73,14 @@ function Sentiment({ settings, onSubmit, className }) {
     if (isSubmitted) {
         return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment" },
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.submitText" }, submitText ||
-                    translate('theme.feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.submitText" }, submitText ||
+                    translate('feedback.settings.submitText', 'Thank you for helping improve our documentation!')),
                 React.createElement(RadioCheckButtonIcon_1.RadioCheckButtonIcon, null))));
     }
     return (React.createElement(SentimentWrapper, { "data-component-name": "Feedback/Sentiment", className: className },
         React.createElement(StyledForm, null,
             React.createElement(StyledFormMandatoryFields, null,
-                React.createElement(Label, { "data-translation-key": "theme.feedback.settings.label" }, label || translate('theme.feedback.settings.label', 'Was this helpful?')),
+                React.createElement(Label, { "data-translation-key": "feedback.settings.label" }, label || translate('feedback.settings.label', 'Was this helpful?')),
                 React.createElement(StyledMandatoryFieldContainer, null,
                     React.createElement(Button_1.Button, { type: "button", size: "medium", variant: score === 1 ? 'primary' : 'secondary', onClick: () => {
                             setScore(1);

package/lib/components/Filter/FilterContent.js

@@ -29,8 +29,8 @@ function FilterContent({ setFilterTerm, filters, filterTerm, filterValuesCasing,
     };
     return (react_1.default.createElement(FilterContentWrapper, { "data-component-name": "Filter/FilterContent" },
         react_1.default.createElement(FiltersHeader, null,
-            react_1.default.createElement(FiltersTitle, { "data-translation-key": "theme.catalog.filters.title" }, translate('theme.catalog.filters.title', 'Filters')),
-            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('theme.catalog.filters.clearAll', 'Clear filters'))) : null),
+            react_1.default.createElement(FiltersTitle, { "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
+            hasActiveFilters ? (react_1.default.createElement(Button_1.Button, { size: "medium", tone: "danger", variant: "ghost", onClick: handleClearAll }, translate('catalog.filters.clearAll', 'Clear filters'))) : null),
         react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) }),
         react_1.default.createElement(FilterItems, null, filters.map((filter, idx) => (react_1.default.createElement(Filter_1.Filter, { filter: filter, key: filter.property + '-' + idx, filterValuesCasing: filterValuesCasing }))))));
 }

package/lib/components/Filter/FilterInput.js

@@ -14,7 +14,7 @@ function FilterInput(props) {
     const { translate } = useTranslate();
     return (react_1.default.createElement(InputWrapper, { "data-component-name": "Filter/FilterInput" },
         react_1.default.createElement(InputIcon, null),
-        react_1.default.createElement(Input, { value: value, onChange: (e) => onChange(e.target.value), placeholder: translate('theme.catalog.filters.placeholder', 'Type to filter...') })));
+        react_1.default.createElement(Input, { value: value, onChange: (e) => onChange(e.target.value), placeholder: translate('catalog.filters.placeholder', 'Type to filter...') })));
 }
 exports.FilterInput = FilterInput;
 const InputWrapper = styled_components_1.default.div `

package/lib/components/Filter/FilterPopover.js

@@ -14,8 +14,8 @@ function FilterPopover({ onClose, filters, filterValuesCasing, filterTerm, setFi
     const { translate } = useTranslate();
     return (react_1.default.createElement(FilterPopoverWrapper, { "data-component-name": "Filter/FilterPopover" },
         react_1.default.createElement(FilterPopoverHeader, null,
-            react_1.default.createElement(FilterPopoverHeaderLabel, { "data-translation-key": "theme.catalog.filters.add" }, translate('theme.catalog.filters.add', 'Add Filter')),
-            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: onClose }, translate('theme.catalog.filters.done', 'Done'))),
+            react_1.default.createElement(FilterPopoverHeaderLabel, { "data-translation-key": "catalog.filters.add" }, translate('catalog.filters.add', 'Add Filter')),
+            react_1.default.createElement(FilterPopoverHeaderButton, { onClick: onClose }, translate('catalog.filters.done', 'Done'))),
         react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: filterValuesCasing })));
 }
 exports.FilterPopover = FilterPopover;

package/lib/components/Filter/FilterSelect.js

@@ -23,7 +23,7 @@ function FilterSelect({ filter, filterValuesCasing }) {
         {
             value: '',
             element: (react_1.default.createElement(FilterOption_1.FilterOption, { key: "all", onClick: () => filter.selectOption('') },
-                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": "theme.catalog.filters.select.all" }, translate('theme.catalog.filters.select.all', 'All')),
+                react_1.default.createElement(FilterOptionLabel_1.FilterOptionLabel, { "data-translation-key": "catalog.filters.select.all" }, translate('catalog.filters.select.all', 'All')),
                 react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, defaultOptionCount))),
         },
         ...filter.filteredOptions.map((option) => ({

package/lib/components/Footer/FooterCopyright.js

@@ -12,8 +12,8 @@ function FooterCopyright({ copyrightText = '', className, }) {
     const { useTranslate, useL10n } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const { changeLanguage } = useL10n();
-    return copyrightText ? (react_1.default.createElement(FooterCopyrightWrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": "theme.footer.copyrightText" },
-        react_1.default.createElement(FooterCopyrightLabel, { "data-translation-key": "theme.footer.copyrightText" }, translate('theme.footer.copyrightText', copyrightText)),
+    return copyrightText ? (react_1.default.createElement(FooterCopyrightWrapper, { className: className, "data-component-name": "Footer/FooterCopyright", "data-translation-key": "footer.copyrightText" },
+        react_1.default.createElement(FooterCopyrightLabel, { "data-translation-key": "footer.copyrightText" }, translate('footer.copyrightText', copyrightText)),
         react_1.default.createElement(LanguagePicker_1.LanguagePicker, { onChangeLanguage: changeLanguage, placement: "top", alignment: "end" }))) : null;
 }
 exports.FooterCopyright = FooterCopyright;

package/lib/components/LastUpdated/LastUpdated.js

@@ -53,7 +53,7 @@ function LastUpdated(props) {
         (currentLocale !== constants_1.DEFAULT_LOCALE_PLACEHOLDER ? currentLocale || 'en-US' : 'en-US');
     const isoDate = lastModified.toISOString().split('T')[0];
     const lastUpdatedString = FORMATS[format](lastModified, locale);
-    const translationKey = format === 'timeago' ? 'theme.page.lastUpdated.timeago' : 'theme.page.lastUpdated.on';
+    const translationKey = format === 'timeago' ? 'page.lastUpdated.timeago' : 'page.lastUpdated.on';
     const text = format === 'timeago'
         ? translate(translationKey, 'Last updated') + ' '
         : translate(translationKey, 'Last updated on');

package/lib/components/Loaders/SpinnerLoader.d.ts

@@ -0,0 +1,5 @@
+export type LoadingProps = {
+    color: string;
+    size: string;
+};
+export declare function SpinnerLoader({ color, size }: LoadingProps): JSX.Element;

package/lib/components/Loaders/SpinnerLoader.js

@@ -0,0 +1,32 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinnerLoader = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+function SpinnerLoader({ color, size }) {
+    return react_1.default.createElement(Spinner, { color: color, size: size });
+}
+exports.SpinnerLoader = SpinnerLoader;
+const Spinner = styled_components_1.default.div `
+  width: ${({ size }) => size};
+  height: ${({ size }) => size};
+  border: 3px solid ${({ color }) => color};
+  border-bottom-color: transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+//# sourceMappingURL=SpinnerLoader.js.map

package/lib/components/PageNavigation/NextButton.js

@@ -42,7 +42,7 @@ function NextButton({ nextPage, className }) {
     }
     const nextPageText = nextPage.label || nextPage.routeSlug || '';
     const defaultLabel = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.nextButton) === null || _b === void 0 ? void 0 : _b.text) || 'Next page';
-    const translationKey = 'theme.page.nextButton';
+    const translationKey = 'page.nextButton';
     const label = translate(translationKey, { defaultValue: defaultLabel });
     return (React.createElement(NextButtonWrapper, { "data-component-name": "PageNavigation/NextButton", "data-translation-key": translationKey },
         React.createElement(NextPageLabel, null, label),

package/lib/components/PageNavigation/PreviousButton.js

@@ -19,7 +19,7 @@ function PreviousButton({ prevPage, className }) {
     }
     const prevPageText = prevPage.label || prevPage.routeSlug || '';
     const defaultLabel = ((_b = navigation === null || navigation === void 0 ? void 0 : navigation.previousButton) === null || _b === void 0 ? void 0 : _b.text) || 'Previous page';
-    const translationKey = 'theme.page.previousButton';
+    const translationKey = 'page.previousButton';
     const label = translate(translationKey, { defaultValue: defaultLabel });
     return (react_1.default.createElement(PreviousButtonWrapper, { "data-component-name": "PageNavigation/PreviousButton", "data-translation-key": translationKey },
         react_1.default.createElement(PreviousPageLabel, null, label),

package/lib/components/Product/ProductPicker.js

@@ -25,7 +25,7 @@ function ProductPicker() {
         },
         active: product === currentProduct,
     }));
-    return products.length ? (react_1.default.createElement(ProductDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, { variant: "ghost" }, currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : (react_1.default.createElement("span", { "data-translation-key": "theme.navbar.products" }, translate('theme.navbar.products', 'Products')))), triggerEvent: "hover" },
+    return products.length ? (react_1.default.createElement(ProductDropdown, { withArrow: true, trigger: react_1.default.createElement(Button_1.Button, { variant: "ghost" }, currentProduct ? (react_1.default.createElement(Product_1.Product, { product: currentProduct })) : (react_1.default.createElement("span", { "data-translation-key": "navbar.products" }, translate('navbar.products', 'Products')))), triggerEvent: "hover" },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, { items: productComponents }))) : null;
 }
 exports.ProductPicker = ProductPicker;

package/lib/components/Search/FilterFields/SearchFilterFieldSelect.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { SearchFacet, SearchFilterItem } from '../../../core/types';
+type SearchFilterFieldSelectProps = {
+    className?: string;
+    facet: SearchFacet;
+    filter: SearchFilterItem[];
+    query: string;
+    selectedValues: string[];
+    onChange: (value: string | string[]) => void;
+};
+export declare function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChange, }: SearchFilterFieldSelectProps): React.JSX.Element;
+export {};

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

@@ -0,0 +1,113 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.SearchFilterFieldSelect = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const hooks_1 = require("../../../core/hooks");
+const Select_1 = require("../../../components/Select/Select");
+const CounterTag_1 = require("../../../components/Tags/CounterTag");
+function SearchFilterFieldSelect({ facet, filter, query, selectedValues, onChange, }) {
+    const MAX_SELECT_OPTIONS = 20;
+    const { useFacetQuery, useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+    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);
+            setSearchFacetQuery(null);
+        }
+        else if (typeof value === 'string') {
+            setSearchFacetQuery({
+                query,
+                filter,
+                facetQuery: value,
+            });
+        }
+    };
+    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,
+            };
+        }
+    };
+    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, "Search to show more items...")) : null, onSearch: onSearch, checkmarkIconPosition: "start" }));
+}
+exports.SearchFilterFieldSelect = SearchFilterFieldSelect;
+const FilterSelectOptionWrapper = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--search-filter-field-select-option-gap);
+`;
+const FilterSelectOptionText = styled_components_1.default.span `
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--search-filter-field-select-option-text-padding);
+`;
+const FilterSelectFooter = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--search-filter-field-select-footer-padding);
+  color: var(--search-filter-field-select-footer-text-color);
+`;
+//# sourceMappingURL=SearchFilterFieldSelect.js.map

package/lib/components/Search/FilterFields/SearchFilterFieldTags.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { SearchFacet } from '../../../core/types';
+type SearchFilterFieldTagsProps = {
+    className?: string;
+    facet: SearchFacet;
+    selectedValues: string[];
+    onChange: (value: string | string[]) => void;
+};
+export declare function SearchFilterFieldTags({ className, facet, selectedValues, onChange, }: SearchFilterFieldTagsProps): React.JSX.Element;
+export {};

package/lib/components/Search/FilterFields/SearchFilterFieldTags.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.SearchFilterFieldTags = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tag_1 = require("../../../components/Tag/Tag");
+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;
+        const active = selectedValues.includes(value);
+        return (react_1.default.createElement(FilterTagWrapper, { key: `${count}-${index}`, color: value, onClick: () => {
+                const values = active
+                    ? selectedValues.filter((item) => item !== value)
+                    : [...selectedValues, value];
+                onChange(values);
+            }, active: active, borderless: true },
+            value,
+            " ",
+            isCounterVisible && react_1.default.createElement("span", null, count)));
+    })));
+}
+exports.SearchFilterFieldTags = SearchFilterFieldTags;
+const FilterTagsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-filter-field-tags-gap);
+`;
+const FilterTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
+  text-transform: uppercase;
+  cursor: pointer;
+  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
+  margin: var(--search-filter-field-tags-tag-margin);
+`;
+//# sourceMappingURL=SearchFilterFieldTags.js.map

package/lib/components/Search/Search.js

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