@redocly/theme 0.42.3 → 0.44.0

package/src/components/Feedback/Comment.tsx

@@ -53,12 +53,12 @@ export function Comment({
       <StateWrapper data-component-name="Feedback/Comment" className={className}>
         <StyledFormMandatoryFields>
           <Label
-            data-translation-key="theme.feedback.settings.comment.submitText"
+            data-translation-key="feedback.settings.comment.submitText"
             standAlone={standAlone}
           >
             {submitText ||
               translate(
-                'theme.feedback.settings.comment.submitText',
+                'feedback.settings.comment.submitText',
                 'Thank you for helping improve our documentation!',
               )}
           </Label>
@@ -75,30 +75,30 @@ export function Comment({
       className={className}
       style={standAlone ? { width: 'var(--feedback-report-dialog-width)' } : { width: 'auto' }}
     >
-      <Label data-translation-key="theme.feedback.settings.comment.label" standAlone={standAlone}>
+      <Label data-translation-key="feedback.settings.comment.label" standAlone={standAlone}>
         {label ||
-          translate('theme.feedback.settings.comment.label', 'Please share your feedback with us.')}
+          translate('feedback.settings.comment.label', 'Please share your feedback with us.')}
       </Label>
       <TextArea rows={3} onChange={handleTextAreaChange} />
       {standAlone && (
         <ButtonsContainer>
           {onCancel && (
             <Button
-              data-translation-key="theme.feedback.settings.comment.cancel"
+              data-translation-key="feedback.settings.comment.cancel"
               onClick={onCancel}
               variant="text"
               size="small"
             >
-              {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
+              {translate('feedback.settings.comment.cancel', 'Cancel')}
             </Button>
           )}
           <Button
-            data-translation-key="theme.feedback.settings.comment.send"
+            data-translation-key="feedback.settings.comment.send"
             onClick={send}
             variant={isDialog ? 'primary' : 'secondary'}
             size="small"
           >
-            {translate('theme.feedback.settings.comment.send', 'Send')}
+            {translate('feedback.settings.comment.send', 'Send')}
           </Button>
         </ButtonsContainer>
       )}

package/src/components/Feedback/Mood.tsx

@@ -56,20 +56,20 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
       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?');
     }
   };
 
@@ -101,10 +101,10 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     return (
       <MoodWrapper data-component-name="Feedback/Mood">
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.submitText">
+          <Label data-translation-key="feedback.settings.submitText">
             {submitText ||
               translate(
-                'theme.feedback.settings.submitText',
+                'feedback.settings.submitText',
                 'Thank you for helping improve our documentation!',
               )}
           </Label>
@@ -118,8 +118,8 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     <MoodWrapper data-component-name="Feedback/Mood" className={className}>
       <StyledForm>
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.label">
-            {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
+          <Label data-translation-key="feedback.settings.label">
+            {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
           <StyledMandatoryFieldContainer>
             <Button

package/src/components/Feedback/Rating.tsx

@@ -70,10 +70,10 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     return (
       <RatingWrapper data-component-name="Feedback/Rating">
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.submitText">
+          <Label data-translation-key="feedback.settings.submitText">
             {submitText ||
               translate(
-                'theme.feedback.settings.submitText',
+                'feedback.settings.submitText',
                 'Thank you for helping improve our documentation!',
               )}
           </Label>
@@ -87,8 +87,8 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     <RatingWrapper data-component-name="Feedback/Rating" className={className}>
       <StyledForm>
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.label">
-            {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
+          <Label data-translation-key="feedback.settings.label">
+            {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
 
           <StyledMandatoryFieldContainer>
@@ -117,7 +117,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
                   label:
                     commentSettings?.label ||
                     translate(
-                      'theme.feedback.settings.comment.label',
+                      'feedback.settings.comment.label',
                       'Please share your feedback with us.',
                     ),
                 }}

package/src/components/Feedback/Reasons.tsx

@@ -38,13 +38,13 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
   return (
     <ReasonsWrapper
       data-component-name="Feedback/Reasons"
-      data-translation-key="theme.feedback.settings.reasons.label"
+      data-translation-key="feedback.settings.reasons.label"
       className={className}
     >
       <Label>
         {label ||
           translate(
-            'theme.feedback.settings.reasons.label',
+            'feedback.settings.reasons.label',
             'Which statement describes your thoughts about this page?',
           )}
       </Label>
@@ -58,11 +58,11 @@ export function Reasons({ settings, onChange, className }: ReasonsProps): JSX.El
             onChange={() => handleOptionChange(idx)}
           />
           <label
-            data-translation-key={`theme.feedback.settings.reasons.items.${idx + 1}`}
+            data-translation-key={`feedback.settings.reasons.items.${idx + 1}`}
             id={reason}
             onClick={() => handleOptionChange(idx)}
           >
-            {translate(`theme.feedback.settings.reasons.items.${idx + 1}`, reason)}
+            {translate(`feedback.settings.reasons.items.${idx + 1}`, reason)}
           </label>
         </OptionWrapper>
       ))}

package/src/components/Feedback/Scale.tsx

@@ -96,10 +96,10 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   if (isSubmitted) {
     return (
       <ScaleWrapper data-component-name="Feedback/Scale">
-        <Label data-translation-key="theme.feedback.settings.submitText">
+        <Label data-translation-key="feedback.settings.submitText">
           {submitText ||
             translate(
-              'theme.feedback.settings.submitText',
+              'feedback.settings.submitText',
               'Thank you for helping improve our documentation!',
             )}
         </Label>
@@ -112,20 +112,20 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     <ScaleWrapper data-component-name="Feedback/Scale" className={className}>
       <StyledForm>
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.label">
-            {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
+          <Label data-translation-key="feedback.settings.label">
+            {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
 
           <ScaleOptionsWrapper>{scaleOptions}</ScaleOptionsWrapper>
 
           <SubLabelContainer>
-            <SubLabel data-translation-key="theme.feedback.settings.leftScaleLabel">
+            <SubLabel data-translation-key="feedback.settings.leftScaleLabel">
               {leftScaleLabel ||
-                translate('theme.feedback.settings.leftScaleLabel', 'Not helpful at all')}
+                translate('feedback.settings.leftScaleLabel', 'Not helpful at all')}
             </SubLabel>
-            <SubLabel data-translation-key="theme.feedback.settings.rightScaleLabel">
+            <SubLabel data-translation-key="feedback.settings.rightScaleLabel">
               {rightScaleLabel ||
-                translate('theme.feedback.settings.rightScaleLabel', 'Extremely helpful')}
+                translate('feedback.settings.rightScaleLabel', 'Extremely helpful')}
             </SubLabel>
           </SubLabelContainer>
         </StyledFormMandatoryFields>
@@ -149,7 +149,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
                 label:
                   commentSettings?.label ||
                   translate(
-                    'theme.feedback.settings.comment.label',
+                    'feedback.settings.comment.label',
                     'Please share your feedback with us.',
                   ),
               }}
@@ -159,21 +159,21 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button
-              data-translation-key="theme.feedback.settings.comment.cancel"
+              data-translation-key="feedback.settings.comment.cancel"
               onClick={handleCancel}
               variant="text"
               size="small"
             >
-              {translate('theme.feedback.settings.comment.cancel', 'Cancel')}
+              {translate('feedback.settings.comment.cancel', 'Cancel')}
             </Button>
 
             <Button
-              data-translation-key="theme.feedback.settings.scale.send"
+              data-translation-key="feedback.settings.scale.send"
               onClick={onSubmitScaleForm}
               variant="secondary"
               size="small"
             >
-              {translate('theme.feedback.settings.scale.send', 'Submit')}
+              {translate('feedback.settings.scale.send', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Feedback/Sentiment.tsx

@@ -48,9 +48,9 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   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({
@@ -76,10 +76,10 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     return (
       <SentimentWrapper data-component-name="Feedback/Sentiment">
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.submitText">
+          <Label data-translation-key="feedback.settings.submitText">
             {submitText ||
               translate(
-                'theme.feedback.settings.submitText',
+                'feedback.settings.submitText',
                 'Thank you for helping improve our documentation!',
               )}
           </Label>
@@ -93,8 +93,8 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     <SentimentWrapper data-component-name="Feedback/Sentiment" className={className}>
       <StyledForm>
         <StyledFormMandatoryFields>
-          <Label data-translation-key="theme.feedback.settings.label">
-            {label || translate('theme.feedback.settings.label', 'Was this helpful?')}
+          <Label data-translation-key="feedback.settings.label">
+            {label || translate('feedback.settings.label', 'Was this helpful?')}
           </Label>
 
           <StyledMandatoryFieldContainer>

package/src/components/Filter/FilterContent.tsx

@@ -42,12 +42,12 @@ export function FilterContent({
   return (
     <FilterContentWrapper data-component-name="Filter/FilterContent">
       <FiltersHeader>
-        <FiltersTitle data-translation-key="theme.catalog.filters.title">
-          {translate('theme.catalog.filters.title', 'Filters')}
+        <FiltersTitle data-translation-key="catalog.filters.title">
+          {translate('catalog.filters.title', 'Filters')}
         </FiltersTitle>
         {hasActiveFilters ? (
           <Button size="medium" tone="danger" variant="ghost" onClick={handleClearAll}>
-            {translate('theme.catalog.filters.clearAll', 'Clear filters')}
+            {translate('catalog.filters.clearAll', 'Clear filters')}
           </Button>
         ) : null}
       </FiltersHeader>

package/src/components/Filter/FilterInput.tsx

@@ -21,7 +21,7 @@ export function FilterInput(props: FilterInputProps): JSX.Element {
       <Input
         value={value}
         onChange={(e) => onChange(e.target.value)}
-        placeholder={translate('theme.catalog.filters.placeholder', 'Type to filter...')}
+        placeholder={translate('catalog.filters.placeholder', 'Type to filter...')}
       />
     </InputWrapper>
   );

package/src/components/Filter/FilterPopover.tsx

@@ -29,11 +29,11 @@ export function FilterPopover({
   return (
     <FilterPopoverWrapper data-component-name="Filter/FilterPopover">
       <FilterPopoverHeader>
-        <FilterPopoverHeaderLabel data-translation-key="theme.catalog.filters.add">
-          {translate('theme.catalog.filters.add', 'Add Filter')}
+        <FilterPopoverHeaderLabel data-translation-key="catalog.filters.add">
+          {translate('catalog.filters.add', 'Add Filter')}
         </FilterPopoverHeaderLabel>
         <FilterPopoverHeaderButton onClick={onClose}>
-          {translate('theme.catalog.filters.done', 'Done')}
+          {translate('catalog.filters.done', 'Done')}
         </FilterPopoverHeaderButton>
       </FilterPopoverHeader>
       <FilterContent

package/src/components/Filter/FilterSelect.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { FilterProps } from '@redocly/theme/core/types';
+import type { FilterProps, SelectProps, SelectOption } from '@redocly/theme/core/types';
 
 import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
 import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
@@ -15,7 +15,7 @@ export function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.E
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
-  let selectOptions: { value: string; element: React.ReactNode }[] = [];
+  let selectOptions: SelectOption<string>[] = [];
 
   const defaultOptionCount = filter.filteredOptions.reduce((acc, option) => acc + option.count, 0);
 
@@ -24,8 +24,8 @@ export function FilterSelect({ filter, filterValuesCasing }: FilterProps): JSX.E
       value: '',
       element: (
         <FilterOption key="all" onClick={() => filter.selectOption('')}>
-          <FilterOptionLabel data-translation-key="theme.catalog.filters.select.all">
-            {translate('theme.catalog.filters.select.all', 'All')}
+          <FilterOptionLabel data-translation-key="catalog.filters.select.all">
+            {translate('catalog.filters.select.all', 'All')}
           </FilterOptionLabel>
           <CounterTag borderless>{defaultOptionCount}</CounterTag>
         </FilterOption>
@@ -64,7 +64,7 @@ const FilterSelectWrapper = styled.div`
   gap: var(--filter-select-wrapper-gap);
 `;
 
-const StyledSelect = styled(Select)`
+const StyledSelect = styled(Select)<SelectProps>`
   --select-list-max-width: var(--filter-select-max-width);
 
   min-height: var(--filter-select-min-height);

package/src/components/Footer/FooterCopyright.tsx

@@ -21,10 +21,10 @@ export function FooterCopyright({
     <FooterCopyrightWrapper
       className={className}
       data-component-name="Footer/FooterCopyright"
-      data-translation-key="theme.footer.copyrightText"
+      data-translation-key="footer.copyrightText"
     >
-      <FooterCopyrightLabel data-translation-key="theme.footer.copyrightText">
-        {translate('theme.footer.copyrightText', copyrightText)}
+      <FooterCopyrightLabel data-translation-key="footer.copyrightText">
+        {translate('footer.copyrightText', copyrightText)}
       </FooterCopyrightLabel>
       <LanguagePicker onChangeLanguage={changeLanguage} placement="top" alignment="end" />
     </FooterCopyrightWrapper>

package/src/components/LastUpdated/LastUpdated.tsx

@@ -41,8 +41,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
   const isoDate = lastModified.toISOString().split('T')[0];
 
   const lastUpdatedString = FORMATS[format as keyof typeof FORMATS](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'

package/src/components/Loaders/SpinnerLoader.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from 'styled-components';
+
+export type LoadingProps = {
+  color: string;
+  size: string;
+};
+
+export function SpinnerLoader({ color, size }: LoadingProps): JSX.Element {
+  return <Spinner color={color} size={size} />;
+}
+
+const Spinner = styled.div<{ color: string; size: string }>`
+  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);
+    }
+  }
+`;

package/src/components/PageNavigation/NextButton.tsx

@@ -23,7 +23,7 @@ export function NextButton({ nextPage, className }: NextPageType): JSX.Element {
 
   const nextPageText = nextPage.label || nextPage.routeSlug || '';
   const defaultLabel = navigation?.nextButton?.text || 'Next page';
-  const translationKey = 'theme.page.nextButton';
+  const translationKey = 'page.nextButton';
   const label = translate(translationKey, { defaultValue: defaultLabel });
 
   return (

package/src/components/PageNavigation/PreviousButton.tsx

@@ -23,7 +23,7 @@ export function PreviousButton({ prevPage, className }: PreviousPageType): JSX.E
 
   const prevPageText = prevPage.label || prevPage.routeSlug || '';
   const defaultLabel = navigation?.previousButton?.text || 'Previous page';
-  const translationKey = 'theme.page.previousButton';
+  const translationKey = 'page.previousButton';
   const label = translate(translationKey, { defaultValue: defaultLabel });
 
   return (

package/src/components/Product/ProductPicker.tsx

@@ -31,8 +31,8 @@ export function ProductPicker(): JSX.Element | null {
           {currentProduct ? (
             <Product product={currentProduct} />
           ) : (
-            <span data-translation-key="theme.navbar.products">
-              {translate('theme.navbar.products', 'Products')}
+            <span data-translation-key="navbar.products">
+              {translate('navbar.products', 'Products')}
             </span>
           )}
         </Button>

package/src/components/Search/FilterFields/SearchFilterFieldSelect.tsx

@@ -0,0 +1,135 @@
+import React, { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme/core/types';
+
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Select } from '@redocly/theme/components/Select/Select';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+
+type SearchFilterFieldSelectProps = {
+  className?: string;
+  facet: SearchFacet;
+  filter: SearchFilterItem[];
+  query: string;
+  selectedValues: string[];
+  onChange: (value: string | string[]) => void;
+};
+
+export function SearchFilterFieldSelect({
+  facet,
+  filter,
+  query,
+  selectedValues,
+  onChange,
+}: SearchFilterFieldSelectProps) {
+  const MAX_SELECT_OPTIONS = 20;
+  const { useFacetQuery, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { searchFacet, setSearchFacet, setSearchFacetQuery } = useFacetQuery(facet.field);
+  const [selectOptions, setSelectOptions] = useState<any[]>([]);
+  const isMultiple = facet.type === 'multi-select';
+
+  useEffect(() => {
+    setSelectOptions(getSelectOptions());
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchFacet, facet]);
+
+  const onSearch = (value: string | null) => {
+    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?: SearchFacetCount | string) => {
+    if (!facetValue) {
+      return { element: null, value: '' };
+    }
+    if (typeof facetValue === 'string') {
+      return {
+        element: (
+          <FilterSelectOptionWrapper>
+            <FilterSelectOptionText>{facetValue}</FilterSelectOptionText>
+          </FilterSelectOptionWrapper>
+        ),
+        value: facetValue,
+      };
+    } else {
+      const { value, count, isCounterVisible } = facetValue as SearchFacetCount;
+      return {
+        element: (
+          <FilterSelectOptionWrapper>
+            <FilterSelectOptionText>{value}</FilterSelectOptionText>
+            {isCounterVisible && <CounterTag>{count}</CounterTag>}
+          </FilterSelectOptionWrapper>
+        ),
+        value: value,
+      };
+    }
+  };
+
+  return (
+    <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 ? (
+          <FilterSelectFooter>Search to show more items...</FilterSelectFooter>
+        ) : null
+      }
+      onSearch={onSearch}
+      checkmarkIconPosition="start"
+    />
+  );
+}
+
+const FilterSelectOptionWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--search-filter-field-select-option-gap);
+`;
+
+const FilterSelectOptionText = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--search-filter-field-select-option-text-padding);
+`;
+
+const FilterSelectFooter = styled.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);
+`;

package/src/components/Search/FilterFields/SearchFilterFieldTags.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { SearchFacet, SearchFacetCount } from '@redocly/theme/core/types';
+
+import { Tag, type TagProps } from '@redocly/theme/components/Tag/Tag';
+
+type SearchFilterFieldTagsProps = {
+  className?: string;
+  facet: SearchFacet;
+  selectedValues: string[];
+  onChange: (value: string | string[]) => void;
+};
+
+export function SearchFilterFieldTags({
+  className,
+  facet,
+  selectedValues,
+  onChange,
+}: SearchFilterFieldTagsProps) {
+  return (
+    <FilterTagsWrapper
+      data-component-name="Search/FilterFields/SearchFilterFieldTags"
+      className={className}
+    >
+      {facet.values.map((facetCount, index) => {
+        const { value, count, isCounterVisible } = facetCount as SearchFacetCount;
+        const active = selectedValues.includes(value);
+        return (
+          <FilterTagWrapper
+            key={`${count}-${index}`}
+            color={value}
+            onClick={() => {
+              const values = active
+                ? selectedValues.filter((item) => item !== value)
+                : [...selectedValues, value];
+              onChange(values);
+            }}
+            active={active}
+            borderless
+          >
+            {value} {isCounterVisible && <span>{count}</span>}
+          </FilterTagWrapper>
+        );
+      })}
+    </FilterTagsWrapper>
+  );
+}
+
+const FilterTagsWrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--search-filter-field-tags-gap);
+`;
+
+const FilterTagWrapper = styled(Tag)<{ color: TagProps['color'] }>`
+  text-transform: uppercase;
+  cursor: pointer;
+  ${({ color }) => color && `background-color: var(--tag-operation-bg-color-${color});`}
+  margin: var(--search-filter-field-tags-tag-margin);
+`;