@redocly/theme 0.59.0-next.0 → 0.59.0-next.10

package/src/components/Buttons/AIAssistantButton.tsx

@@ -0,0 +1,145 @@
+import * as React from 'react';
+import { useState } from 'react';
+import styled from 'styled-components';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { SearchDialog } from '@redocly/theme/components/Search/SearchDialog';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { ChatIcon } from '@redocly/theme/icons/ChatIcon/ChatIcon';
+import { AiStarsGradientIcon } from '@redocly/theme/icons/AiStarsGradientIcon/AiStarsGradientIcon';
+import { RedoclyIcon } from '@redocly/theme/icons/RedoclyIcon/RedoclyIcon';
+
+type AIAssistantButtonIconType = 'chat' | 'sparkles' | 'redocly';
+type AIAssistantButtonType = 'button' | 'icon';
+
+interface AIAssistantButtonConfig {
+  hide?: boolean;
+  inputType?: AIAssistantButtonType;
+  inputIcon?: AIAssistantButtonIconType;
+}
+
+const defaultConfig: Required<AIAssistantButtonConfig> = {
+  hide: false,
+  inputType: 'button',
+  inputIcon: 'sparkles',
+};
+
+const getIcon = (
+  iconType: AIAssistantButtonIconType,
+  inputType: AIAssistantButtonType = 'button',
+) => {
+  const iconSize =
+    inputType === 'icon'
+      ? 'var(--ai-assistant-button-icon-icon-size)'
+      : 'var(--ai-assistant-button-text-icon-size)';
+
+  const redoclyIcon = (
+    <RedoclyIcon size={iconSize} color="var(--ai-assistant-button-redocly-icon-color)" />
+  );
+  const sparklesIcon = (
+    <AiStarsGradientIcon size={iconSize} color="var(--search-ai-button-icon-color)" />
+  );
+  const chatIcon = <ChatIcon size={iconSize} />;
+
+  switch (iconType) {
+    case 'chat':
+      return chatIcon;
+    case 'sparkles':
+      return sparklesIcon;
+    case 'redocly':
+      return redoclyIcon;
+    default:
+      return redoclyIcon;
+  }
+};
+
+export function AIAssistantButton() {
+  const [isOpen, setIsOpen] = useState(false);
+  const themeConfig = useThemeConfig();
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  const buttonConfig = {
+    ...defaultConfig,
+    ...(themeConfig.aiAssistant?.trigger ?? {}),
+  };
+
+  const { hide, inputIcon, inputType } = buttonConfig;
+
+  if (hide) {
+    return null;
+  }
+
+  const icon = getIcon(inputIcon, inputType);
+  const text = translate('aiAssistant.trigger', 'Ask AI');
+
+  const handleOpen = () => {
+    setIsOpen(true);
+    telemetry.sendSearchAiOpenedMessage({
+      method: 'ai_trigger_button',
+    });
+  };
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <>
+      <StyledAIAssistantButton
+        variant="outlined"
+        size="medium"
+        $inputType={inputType}
+        onClick={handleOpen}
+        aria-label={`AI Assistant button - ${inputIcon}`}
+        data-component-name="Buttons/AIAssistantButton"
+      >
+        {icon}
+        {inputType === 'button' && text}
+      </StyledAIAssistantButton>
+
+      {isOpen && <SearchDialog onClose={handleClose} initialMode="ai-dialog" />}
+    </>
+  );
+}
+
+const StyledAIAssistantButton = styled(Button)<{ $inputType?: AIAssistantButtonType }>`
+  position: fixed;
+  bottom: var(--ai-assistant-button-bottom);
+  right: var(--ai-assistant-button-right);
+  ${({ $inputType }) =>
+    $inputType === 'icon'
+      ? `
+    border-radius: var(--ai-assistant-button-border-radius-icon);
+    width: var(--ai-assistant-button-icon-size);
+    height: var(--ai-assistant-button-icon-size);
+  `
+      : `
+    border-radius: var(--ai-assistant-button-border-radius-text);
+    padding: var(--ai-assistant-button-text-padding);
+    height: var(--ai-assistant-button-text-height);
+  `}
+  min-width: var(--ai-assistant-button-min-width);
+  font-size: var(--ai-assistant-button-font-size);
+  font-weight: var(--ai-assistant-button-font-weight);
+  box-shadow: var(--bg-raised-shadow);
+  z-index: var(--ai-assistant-button-z-index);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ai-assistant-button-gap);
+  background-color: var(--ai-assistant-button-bg-color) !important;
+
+  transition: var(--ai-assistant-button-transition);
+
+  &:hover {
+    box-shadow: var(--ai-assistant-button-shadow-hover);
+    transform: var(--ai-assistant-button-transform-hover);
+  }
+
+  &:active {
+    transform: var(--bg-raised-shadow);
+    box-shadow: var(--ai-assistant-button-shadow-active);
+  }
+`;

package/src/components/Buttons/variables.dark.ts

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+export const aiAssistantButtonDarkMode = css`
+
+ /* Background color */
+ --ai-assistant-button-bg-color: var(--color-warm-grey-4);
+`;

package/src/components/Buttons/variables.ts

@@ -0,0 +1,48 @@
+import { css } from 'styled-components';
+
+export const aiAssistantButton = css`
+  /**
+   * @tokens AI Assistant Button
+   * @presenter Color
+   */
+
+  /* Button sizing */
+  --ai-assistant-button-icon-size: 40px;
+  --ai-assistant-button-text-height: 40px;
+  --ai-assistant-button-text-padding: var(--spacing-sm) var(--spacing-md);
+  --ai-assistant-button-border-radius-icon: 50%;
+  --ai-assistant-button-border-radius-text: 1.75rem;
+  --ai-assistant-button-min-width: auto;
+
+  /* Icon sizing */
+  --ai-assistant-button-icon-icon-size: 18px;
+  --ai-assistant-button-text-icon-size: 20px;
+
+  /* Positioning */
+  --ai-assistant-button-bottom: var(--spacing-xl);
+  --ai-assistant-button-right: var(--spacing-xl);
+  --ai-assistant-button-z-index: 50
+
+  /* Typography */
+  --ai-assistant-button-font-size: var(--font-size-base);
+  --ai-assistant-button-font-weight: var(--font-weight-medium);
+  --ai-assistant-button-gap: var(--spacing-xs);
+
+  /* Background color */
+  --ai-assistant-button-bg-color: var(--color-static-white);
+
+  /* Icon colors */
+  --ai-assistant-button-redocly-icon-color: #297AFE;
+
+  /* Transform */
+  --ai-assistant-button-transform-hover: none;
+  --ai-assistant-button-transform-active: translateY(0);
+
+  /* Shadow */
+  --ai-assistant-button-shadow-hover:
+    2px 1px 12px 4px rgba(143, 98, 254, 0.2),
+    -3px -2px 24px 0px rgba(41, 122, 254, 0.2);
+
+  /* Transition */
+  --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
+`;

package/src/components/Catalog/Catalog.tsx

@@ -10,7 +10,7 @@ import {
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
-import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
+import { CatalogFilterContent } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
@@ -20,8 +20,11 @@ import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/Catalog
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 
+type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
+
 export type CatalogProps = {
   catalogConfig: CatalogEntityConfig;
+  filters?: CatalogFiltersWithCounts;
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
@@ -29,9 +32,11 @@ export type CatalogProps = {
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
-  if (!str) return str;
+  const trimmedStr = str.trim();
+  if (!trimmedStr) return trimmedStr;
+
+  const words = trimmedStr.split(/[\s-_]+/);
 
-  const words = str.split(/[\s-_]+/);
   return words
     .map((word, index) => {
       if (index === 0 && word.toLowerCase() === 'api') {
@@ -45,6 +50,7 @@ const customCatalogOptionsCasing = (str: string): string => {
 export function Catalog(props: CatalogProps): JSX.Element {
   const {
     catalogConfig,
+    filters: serverFilters,
     entitiesTypes,
     initialEntitiesList,
     catalogSwitcherItems,
@@ -72,7 +78,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
+  } = useCatalog(
+    catalogConfig,
+    serverFilters,
+    initialEntitiesList?.page.total || 0,
+    initialViewMode,
+  );
 
   return (
     <>
@@ -89,12 +100,12 @@ export function Catalog(props: CatalogProps): JSX.Element {
             )
           }
           menu={
-            <FilterContent
+            <CatalogFilterContent
               setFilterTerm={setSearchQuery}
               filters={filters}
               filterTerm={searchQuery}
               hideSearch={true}
-              showCounter={false}
+              showCounter={true}
               filterValuesCasing={customCatalogOptionsCasing}
             />
           }
@@ -128,6 +139,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
               <FilterInput
                 value={searchQuery}
                 onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+                dataTestId="catalog-search-input"
               />
             </CatalogSearchInputWrapper>
 

package/src/components/Catalog/CatalogEntity/CatalogEntityInfoBar.tsx

@@ -41,6 +41,7 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   transition: all 0.2s ease-in-out;
   height: 100%;
   padding: var(--catalog-card-gap);
+  margin-bottom: var(--spacing-xs);
 
   ${({ hoverEffect }) =>
     hoverEffect &&

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations.tsx

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

package/src/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.tsx

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,6 +11,7 @@ import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon'
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
@@ -59,7 +60,7 @@ const getEntityIcon = ({
     );
   }
 
-  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
 };
 
 export function CatalogEntityIcon({

package/src/components/Catalog/CatalogFilter/CatalogFilter.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { FilterProps, FilterTypes } from '@redocly/theme/core/types';
+
+import { CatalogFilterSelect } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterSelect';
+import { CatalogFilterCheckboxes } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterCheckboxes';
+import { CatalogFilterDateRange } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilterDateRange';
+
+const filterComponents = {
+  select: CatalogFilterSelect,
+  'date-range': CatalogFilterDateRange,
+  checkboxes: CatalogFilterCheckboxes,
+} as const;
+
+export type CatalogFilterProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilter({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterProps): JSX.Element | null {
+  if (!filter.parentUsed) return null;
+
+  const filteredOptions = filter.filteredOptions || filter.options;
+  if (!filteredOptions || filteredOptions.length === 0) {
+    return null;
+  }
+
+  const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
+
+  return (
+    <CatalogFilterGroup
+      className={className}
+      data-component-name="Catalog/CatalogFilter"
+      key={filter.property + filter.title}
+    >
+      <FilterComponent
+        filter={filter}
+        filterValuesCasing={filterValuesCasing}
+        showCounter={showCounter}
+      />
+    </CatalogFilterGroup>
+  );
+}
+
+const CatalogFilterGroup = styled.div`
+  padding: var(--filter-group-padding);
+  display: flex;
+  flex-direction: column;
+  gap: var(--filter-group-gap);
+  border-bottom: 1px solid var(--catalog-table-border-color);
+
+  &:first-child {
+    border-top: 1px solid var(--catalog-table-border-color);
+  }
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -0,0 +1,169 @@
+import React, { useState, useMemo } from 'react';
+import styled from 'styled-components';
+import { findAll } from 'highlight-words-core';
+
+import type { JSX } from 'react';
+import type { FilterProps } from '@redocly/theme/core/types';
+
+import { FilterOptions } from '@redocly/theme/components/Filter/FilterOptions';
+import { FilterOption } from '@redocly/theme/components/Filter/FilterOption';
+import { FilterOptionLabel } from '@redocly/theme/components/Filter/FilterOptionLabel';
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { CheckboxIcon } from '@redocly/theme/icons/CheckboxIcon/CheckboxIcon';
+import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
+import { changeTextCasing } from '@redocly/theme/core/utils';
+import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
+
+export type CatalogFilterCheckboxesProps = FilterProps & {
+  className?: string;
+};
+
+export function CatalogFilterCheckboxes({
+  filter,
+  filterValuesCasing,
+  showCounter = true,
+  className,
+}: CatalogFilterCheckboxesProps): JSX.Element {
+  const { useTranslate, useTelemetry } = useThemeHooks();
+  const { translate } = useTranslate();
+  const telemetry = useTelemetry();
+
+  const [searchTerm, setSearchTerm] = useState('');
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const filteredOptions = useMemo(() => {
+    const options = filter.filteredOptions || filter.options;
+    if (!searchTerm.trim()) return options;
+
+    const lowerSearchTerm = searchTerm.toLowerCase();
+    return options.filter(({ value }) => {
+      const translatedValue = changeTextCasing(translate(value), filterValuesCasing);
+      if (!translatedValue) return false;
+      return translatedValue.toLowerCase().includes(lowerSearchTerm);
+    });
+  }, [searchTerm, filter.filteredOptions, filter.options, translate, filterValuesCasing]);
+
+  const selectedCount = useMemo(() => {
+    if (filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    }
+    return 0;
+  }, [filter.selectedOptions]);
+
+  const highlightText = (text: string): JSX.Element => {
+    if (!searchTerm.trim()) {
+      return <>{text}</>;
+    }
+
+    const chunks = findAll({
+      searchWords: [searchTerm],
+      textToHighlight: text,
+    });
+
+    return (
+      <>
+        {chunks.map((chunk, idx) => {
+          const { end, highlight, start } = chunk;
+          const chunkText = text.substr(start, end - start);
+          if (highlight) {
+            return <HighlightedText key={idx}>{chunkText}</HighlightedText>;
+          } else {
+            return <span key={idx}>{chunkText}</span>;
+          }
+        })}
+      </>
+    );
+  };
+
+  const headerContent = (
+    <AccordionHeaderContent>
+      <span>{translate(filter.titleTranslationKey, filter.title)}</span>
+      {selectedCount > 0 && <CounterTag borderless>{selectedCount}</CounterTag>}
+    </AccordionHeaderContent>
+  );
+
+  return (
+    <AccordionWrapper
+      className={className}
+      $hasSelection={selectedCount > 0 && !isExpanded}
+      data-component-name="Catalog/CatalogFilterCheckboxes"
+    >
+      <Accordion expanded={isExpanded} header={headerContent} onToggle={setIsExpanded}>
+        <FilterSearchWrapper>
+          <FilterInput value={searchTerm} onChange={setSearchTerm} />
+        </FilterSearchWrapper>
+        <FilterOptions>
+          {filteredOptions.map(({ value, count }) => {
+            const id = 'filter--' + filter.property + '--' + value;
+            return (
+              <FilterCheckboxOption
+                key={id}
+                role="link"
+                onClick={() => {
+                  filter.toggleOption(value);
+                  telemetry.sendFilterCheckboxToggledMessage({ id });
+                }}
+              >
+                <CheckboxIcon
+                  checked={
+                    filter.selectedOptions instanceof Set
+                      ? filter.selectedOptions.has(value) ||
+                        filter.selectedOptions.has(value?.toLowerCase())
+                      : false
+                  }
+                />
+                <FilterOptionLabel data-translation-key={value}>
+                  {highlightText(changeTextCasing(translate(value), filterValuesCasing) || '')}
+                </FilterOptionLabel>
+                {showCounter && <CounterTag borderless>{count}</CounterTag>}
+              </FilterCheckboxOption>
+            );
+          })}
+        </FilterOptions>
+      </Accordion>
+    </AccordionWrapper>
+  );
+}
+
+const AccordionWrapper = styled.div<{ $hasSelection: boolean }>`
+  position: relative;
+  border-right: 4px solid transparent;
+
+  ${({ $hasSelection }) =>
+    $hasSelection &&
+    `
+    border-right-color: var(--color-blueberry-6);
+    
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -1px;
+      right: -4px;
+      width: 4px;
+      height: 1px;
+      background-color: var(--color-blueberry-6);
+      z-index: 1;
+    }
+  `}
+`;
+
+const AccordionHeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+  width: 100%;
+`;
+
+const HighlightedText = styled.span`
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+
+const FilterCheckboxOption = styled(FilterOption)`
+  padding-left: var(--filter-option-checkbox-padding-left);
+`;
+
+const FilterSearchWrapper = styled.div`
+  padding: var(--filter-content-search-padding);
+`;

package/src/components/Catalog/CatalogFilter/CatalogFilterContent.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+
+import type { JSX } from 'react';
+import type { ResolvedFilter } from '@redocly/theme/core/types';
+import type { RedoclyConfig } from '@redocly/theme/config';
+
+import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CatalogFilter } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilter';
+import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
+
+export type CatalogFilterContentProps = {
+  setFilterTerm: (value: string) => void;
+  filters: ResolvedFilter[];
+  filterTerm: string;
+  filterValuesCasing?:
+    | NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing']
+    | ((str: string) => string);
+  hideSearch?: boolean;
+  showCounter?: boolean;
+  className?: string;
+};
+
+export function CatalogFilterContent({
+  setFilterTerm,
+  filters,
+  filterTerm,
+  filterValuesCasing,
+  hideSearch,
+  showCounter = true,
+  className,
+}: CatalogFilterContentProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
+  const hasActiveFilters = filters.some((filter) => {
+    if (filterTerm) return true;
+    if (filter.selectedOptions && filter.selectedOptions instanceof Set) {
+      return filter.selectedOptions.size;
+    } else if (
+      isFromToSelectedOptions(filter.selectedOptions) &&
+      filter.selectedOptions.from &&
+      filter.selectedOptions.to
+    ) {
+      return true;
+    }
+  });
+
+  const handleClearAll = (): void => {
+    filters.forEach((filter) => filter.selectOption(''));
+    setFilterTerm('');
+  };
+
+  if (!filters.length) {
+    return null;
+  }
+
+  return (
+    <CatalogFilterContentWrapper
+      className={className}
+      data-component-name="Catalog/CatalogFilterContent"
+    >
+      <FiltersHeader>
+        <FiltersTitle data-translation-key="catalog.filters.title">
+          {translate('catalog.filters.title', 'Filters')}
+        </FiltersTitle>
+        {hasActiveFilters ? (
+          <Button size="medium" tone="danger" variant="ghost" onClick={handleClearAll}>
+            {translate('catalog.filters.clearAll', 'Clear filters')}
+          </Button>
+        ) : null}
+      </FiltersHeader>
+      {!hideSearch && (
+        <FilterInput value={filterTerm} onChange={(updatedTerm) => setFilterTerm(updatedTerm)} />
+      )}
+      <FilterItems hideSearch={hideSearch}>
+        {filters.map((filter, idx) => (
+          <CatalogFilter
+            filter={filter}
+            key={filter.property + '-' + idx}
+            filterValuesCasing={filterValuesCasing}
+            showCounter={showCounter}
+          />
+        ))}
+      </FilterItems>
+    </CatalogFilterContentWrapper>
+  );
+}
+
+const CatalogFilterContentWrapper = styled.div`
+  padding: 0 0 var(--filter-content-padding-vertical) 0;
+  display: flex;
+  flex-direction: column;
+`;
+
+const FiltersHeader = styled.div`
+  display: flex;
+  padding: var(--filter-content-header-padding-vertical)
+    var(--filter-content-header-padding-horizontal);
+`;
+
+const FiltersTitle = styled.div`
+  margin-right: auto;
+  font-size: var(--filter-content-title-font-size);
+  font-weight: var(--filter-content-title-font-weight);
+  line-height: var(--filter-content-title-line-height);
+`;
+
+const FilterItems = styled.div<{ hideSearch?: boolean }>`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--border-color-secondary);
+  ${({ hideSearch }) =>
+    hideSearch &&
+    css`
+      border-top: none;
+    `}
+`;