@redocly/theme 0.55.0-next.7 → 0.55.0-next.9

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -85,4 +85,5 @@ export const useThemeHooks = jest.fn(() => ({
     submitFeedback: jest.fn(),
   })),
   useLoadAndNavigate: jest.fn(),
+  usePageProps: jest.fn().mockReturnValue({}),
 }));

package/src/core/hooks/catalog/useCatalogEntities.ts

@@ -0,0 +1,16 @@
+import type { UseCatalogEntitiesProps } from '@redocly/theme';
+
+export function useCatalogEntities({ entitiesTypes, excludedEntities }: UseCatalogEntitiesProps) {
+  const initialTypesWithoutAll = entitiesTypes.filter((type) => type !== 'all');
+  const initialTypesFilter = entitiesTypes.length ? `type:${initialTypesWithoutAll.join(',')}` : '';
+  const initialExcludedEntitiesFilter = excludedEntities?.length
+    ? `-key:${excludedEntities.map((entity) => entity.key).join(',')}`
+    : '';
+  const initialFilter = initialTypesFilter
+    ? `${initialTypesFilter} AND ${initialExcludedEntitiesFilter}`
+    : initialExcludedEntitiesFilter;
+
+  return {
+    initialFilter,
+  };
+}

package/src/core/hooks/catalog/useCatalogTableHeaderCellActions.ts

@@ -0,0 +1,38 @@
+import {
+  BaseEntity,
+  CatalogColumn,
+} from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+
+import { SortOption } from '../../types';
+
+type CatalogTableHeaderCellActionsProps<T extends BaseEntity> = {
+  column: CatalogColumn<T>;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  setSortOption: (sortOption: SortOption | null) => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export function useCatalogTableHeaderCellActions<T extends BaseEntity>({
+  column,
+  handleSortClick,
+  setSortOption,
+  isColumnSorted,
+}: CatalogTableHeaderCellActionsProps<T>) {
+  const sortKey = column.sortKey;
+  const isUpActive = sortKey ? isColumnSorted(sortKey, 'desc') : false;
+  const isDownActive = sortKey ? isColumnSorted(sortKey, 'asc') : false;
+
+  const handleCellClick = (): void => {
+    if (!column.sortable || !sortKey) return;
+
+    if (isDownActive) {
+      handleSortClick(sortKey, 'desc');
+    } else if (isUpActive) {
+      setSortOption(null);
+    } else {
+      handleSortClick(sortKey, 'asc');
+    }
+  };
+
+  return { handleCellClick, sortKey, isUpActive, isDownActive };
+}

package/src/core/hooks/catalog/useCatalogTableViewRow.ts

@@ -0,0 +1,40 @@
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+
+import { getPathPrefix } from '../../utils';
+
+type CatalogTableViewRowProps = {
+  entityKey: string;
+  entityType: string;
+  catalogConfig: CatalogEntityConfig;
+  entitiesCatalogConfig?: EntitiesCatalogConfig;
+};
+
+export function useCatalogTableViewRow({
+  entityKey,
+  entityType,
+  catalogConfig,
+  entitiesCatalogConfig,
+}: CatalogTableViewRowProps) {
+  const getCatalogSpecificConfigByEntityTypeIncluded = () => {
+    if (!entitiesCatalogConfig) {
+      return;
+    }
+
+    return Object.values(entitiesCatalogConfig.catalogs ?? {}).find((catalog) => {
+      return catalog.includes?.some((include) => include.type === entityType);
+    });
+  };
+
+  const getEntityDetailsLink = () => {
+    const pathPrefix = getPathPrefix();
+    const catalogSpecificConfig = getCatalogSpecificConfigByEntityTypeIncluded();
+
+    if (!catalogSpecificConfig || !entitiesCatalogConfig) {
+      return `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entityKey}`;
+    }
+
+    return `${pathPrefix}/catalogs/${catalogSpecificConfig.slug}/entities/${entityKey}`;
+  };
+
+  return { getEntityDetailsLink };
+}

package/src/core/hooks/index.ts

@@ -36,5 +36,7 @@ export * from '@redocly/theme/core/hooks/code-walkthrough/use-renderable-files';
 export * from '@redocly/theme/core/hooks/use-element-size';
 export * from '@redocly/theme/core/hooks/use-time-ago';
 export * from '@redocly/theme/core/hooks/use-input-key-commands';
+export * from '@redocly/theme/core/hooks/catalog/useCatalogEntities';
 export * from '@redocly/theme/core/hooks/use-active-page-version';
 export * from '@redocly/theme/core/hooks/use-page-versions';
+export * from '@redocly/theme/core/hooks/use-user-teams';

package/src/core/hooks/use-user-teams.ts

@@ -0,0 +1,8 @@
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function useUserTeams() {
+  const { useUserTeams } = useThemeHooks();
+  const userTeams = useUserTeams();
+
+  return userTeams;
+}

package/src/core/styles/dark.ts

@@ -10,6 +10,7 @@ import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
 import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
+import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
 
 
 const replayDarkMode = css`
@@ -316,6 +317,7 @@ export const darkMode = css`
   ${replayDarkMode}
   ${switcherDarkMode}
   ${cardsDarkMode}
+  ${catalogDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -8,6 +8,7 @@ import { sidebar } from '@redocly/theme/components/Sidebar/variables';
 import { breadcrumbs } from '@redocly/theme/components/Breadcrumbs/variables';
 import { tag } from '@redocly/theme/components/Tag/variables';
 import { toc } from '@redocly/theme/components/TableOfContent/variables';
+import { catalog } from '@redocly/theme/components/Catalog/variables';
 import { filter } from '@redocly/theme/components/Filter/variables';
 import { catalogClassic } from '@redocly/theme/components/CatalogClassic/variables';
 import { apiReferencePanels, responsePanelColors } from '@redocly/theme/components/Panel/variables';
@@ -37,6 +38,7 @@ import { datePicker } from '@redocly/theme/components/DatePicker/variables'
 import { switcher } from '@redocly/theme/components/Switch/variables';
 import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
 import { codeWalkthrough } from '@redocly/theme/markdoc/components/CodeWalkthrough/variables';
+import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 
 const themeColors = css`
   /* === Palette === */
@@ -367,6 +369,7 @@ const typography = css`
   --font-size-base: 14px; // Base font size of the entire system.
   --font-size-sm: 12px;
   --font-size-lg: 16px;
+  --font-size-md: 18px;
   --font-size-xl: 20px;
 
   /**
@@ -1211,6 +1214,7 @@ export const styles = css`
     ${breadcrumbs}
     ${button}
     ${cards}
+    ${catalog}
     ${catalogClassic}
     ${code}
     ${codeWalkthrough}
@@ -1262,6 +1266,7 @@ export const styles = css`
     ${scorecard}
     ${datePicker}
     ${replay}
+    ${skipContent}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/src/core/types/catalog.ts

@@ -1,5 +1,41 @@
+import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import { CatalogEntityConfig, LayoutVariant } from '@redocly/config';
+
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
+export type SortOption = 'title' | '-title' | 'type' | '-type';
+
+export type UseCatalogResponse = {
+  filters: ResolvedFilter[];
+  filterQuery: string;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+  viewMode: CatalogViewMode;
+  setViewMode: (mode: CatalogViewMode) => void;
+  entitiesCounter: number;
+  setEntitiesCounter: (counter: number) => void;
+  onChangeViewClick: () => void;
+  onChangeCollapseSidebarClick: () => void;
+  layout: LayoutVariant;
+  collapsedSidebar: boolean;
+};
+
+export type UseCatalogSortResponse = {
+  sortOption: SortOption | null;
+  setSortOption: (option: SortOption | null) => void;
+  handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+  isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+};
+
+export type UseCatalogSearchResponse = {
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+};
+
 export type FilteredCatalog = {
   groups: { title: string; items: CatalogItem[] }[];
   filters: ResolvedFilter[];
@@ -12,10 +48,6 @@ export type ResolvedFilter = Omit<CatalogFilterConfig, 'options'> & {
     value: string;
     count: number;
   }[];
-  filteredOptions: {
-    value: string;
-    count: number;
-  }[];
   toggleOption: (option: string) => void;
   selectOption: (option: string) => void;
   parentUsed: boolean;
@@ -34,9 +66,115 @@ export type CatalogItem = {
   scorecardLevelIdx?: number;
   scorecardLevels?: Record<string, { uniqueErrors: number; uniqueWarnings: number }>;
   scoreCardSlug?: string;
-  tags?: unknown[];
+  tags?: string[];
   versions?: CatalogItem[];
   version?: string;
   versionFolderId?: string;
   [k: string]: unknown;
 };
+
+export type DefaultCatalogSlug =
+  | 'services'
+  | 'users'
+  | 'teams'
+  | 'domains'
+  | 'api-descriptions'
+  | 'all';
+
+export type CatalogApiResults<T, L> = {
+  query: UseInfiniteQueryResult<InfiniteData<L, unknown>, Error>;
+  items: T[];
+  total: number;
+};
+
+export type CatalogApiParams = {
+  limit?: number;
+  filter?: string;
+  sort?: string;
+  search?: string;
+};
+
+export type UseCatalogEntitiesProps = {
+  entitiesTypes: string[];
+  excludedEntities?: CatalogEntityConfig['excludes'];
+};
+
+export type UseCatalogEntitiesResponse = {
+  setEntitiesCounter: (counter: number) => void;
+};
+
+export type EntityType = 'service' | 'domain' | 'team' | 'user' | 'api-description';
+
+export type CatalogViewMode = 'cards' | 'table';
+
+export type CatalogSwitcherItem = {
+  labelTranslationKey: string;
+  slug: string;
+  selected: boolean;
+};
+
+// TODO: remove this types after we make api-sdk package public and will be able import them from there
+export type BffCatalogRelatedEntity = {
+  readonly id: string;
+  type: string;
+  key: string;
+  title: string;
+  summary?: string | null;
+  readonly source: 'api' | 'file';
+  sourceFile?: string | null;
+  metadata?: Record<string, any>;
+  readonly createdAt: string | null;
+  readonly updatedAt: string | null;
+};
+
+export type BffCatalogEntity = {
+  readonly id: string;
+  readonly organizationId: string;
+  readonly projectId: string;
+  key: string;
+  type: string;
+  title: string;
+  readonly source: 'api' | 'file';
+  domains?: Array<BffCatalogRelatedEntity>;
+  owners?: Array<BffCatalogRelatedEntity>;
+  summary?: string;
+  tags?: Array<string>;
+  metadata?: Record<string, any>;
+  git?: Array<string>;
+  contact?: {
+    slack?: {
+      channels?: Array<{
+        name: string;
+      }>;
+    };
+  };
+  links?: Array<{
+    label: string;
+    url: string;
+  }>;
+  sourceFile?: string;
+  readonly object: 'catalogEntityView';
+  readonly createdAt: string;
+  readonly updatedAt: string;
+};
+
+export type BffCatalogEntityList = {
+  object: 'list';
+  page: Page;
+  items: Array<BffCatalogEntity>;
+};
+
+export type BffCatalogRelatedEntityList = {
+  object: 'list';
+  page: Page;
+  items: Array<BffCatalogRelatedEntity>;
+};
+
+export type Page = {
+  endCursor: string | null;
+  startCursor: string | null;
+  hasNextPage: boolean;
+  hasPrevPage: boolean;
+  limit: number;
+  total: number;
+};

package/src/core/types/filter.ts

@@ -4,6 +4,7 @@ import type { RedoclyConfig } from '@redocly/config';
 export type FilterProps = {
   filter: ResolvedFilter & { selectedOptions: any };
   filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+  showCounter?: boolean;
 };
 
 export type FilterTypes = NonNullable<FilterProps['filter']['type']>;

package/src/core/types/hooks.ts

@@ -1,13 +1,16 @@
-import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
-
-import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type {
+  CatalogEntityConfig,
+  PageProps,
+  ResolvedNavItemWithLink,
+  Version,
+} from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '@redocly/theme/config';
 import type {
   UserMenuData,
-  FilteredCatalog,
+  UseCatalogResponse,
   ItemState,
   SearchItemData,
   SubmitFeedbackParams,
@@ -18,8 +21,21 @@ import type {
   SearchFilterItem,
   SearchFacetQuery,
   AiSearchConversationItem,
+  CatalogApiResults,
+  CatalogApiParams,
+  FilteredCatalog,
+  UseCatalogSortResponse,
+  UseCatalogSearchResponse,
+  EventType,
+  SendEventParams,
 } from '@redocly/theme/core/types';
 
+import {
+  BffCatalogEntity,
+  BffCatalogEntityList,
+  BffCatalogRelatedEntity,
+  BffCatalogRelatedEntityList,
+} from '@redocly/theme/core/types';
 import { AiSearchError } from '@redocly/theme/core/constants';
 
 export type ThemeHooks = {
@@ -118,9 +134,20 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
       }
     | undefined;
+  useCatalog: (config?: CatalogEntityConfig, entitiesCounterInitial?: number) => UseCatalogResponse;
+  useCatalogSort: () => UseCatalogSortResponse;
+  useCatalogSearch: () => UseCatalogSearchResponse;
+  useFetchCatalogEntities: (
+    params: CatalogApiParams,
+    initialData?: BffCatalogEntityList,
+  ) => CatalogApiResults<BffCatalogEntity, BffCatalogEntityList>;
+  useFetchCatalogEntitiesRelations: (
+    params: CatalogApiParams & { entityKey: string },
+    initialData?: BffCatalogRelatedEntityList,
+  ) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
   useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
   useTelemetry: () => {
-    send(data: AsyncApiRealm.Messages): void;
+    send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
   };
   useUserTeams: () => string[];
   usePageProps: <T extends Record<string, unknown>>() => PageProps & T;

package/src/core/types/index.ts

@@ -15,3 +15,4 @@ export * from '@redocly/theme/core/types/common';
 export * from '@redocly/theme/core/types/open-api-server';
 export * from '@redocly/theme/core/types/marker';
 export * from '@redocly/theme/core/types/code-walkthrough';
+export * from '@redocly/theme/core/types/telemetry';

package/src/core/types/l10n.ts

@@ -118,6 +118,26 @@ export type TranslationKey =
   | 'catalog.filters.select.addFilter'
   | 'catalog.filters.select.all'
   | 'catalog.filters.done'
+  | 'catalog.catalogs.all.title'
+  | 'catalog.catalogs.all.description'
+  | 'catalog.catalogs.all.switcherLabel'
+  | 'catalog.catalogs.service.title'
+  | 'catalog.catalogs.service.description'
+  | 'catalog.catalogs.service.switcherLabel'
+  | 'catalog.catalogs.user.title'
+  | 'catalog.catalogs.user.description'
+  | 'catalog.catalogs.user.switcherLabel'
+  | 'catalog.catalogs.team.title'
+  | 'catalog.catalogs.team.description'
+  | 'catalog.catalogs.team.switcherLabel'
+  | 'catalog.catalogs.domain.title'
+  | 'catalog.catalogs.domain.description'
+  | 'catalog.catalogs.domain.switcherLabel'
+  | 'catalog.catalogs.apiDescription.title'
+  | 'catalog.catalogs.apiDescription.description'
+  | 'catalog.catalogs.apiDescription.switcherLabel'
+  | 'catalog.entity.metadata.title'
+  | 'catalog.entity.properties.apiDescription.title'
   | 'sidebar.menu.backLabel'
   | 'sidebar.menu.backToLabel'
   | 'sidebar.actions.show'
@@ -287,7 +307,8 @@ export type TranslationKey =
   | 'time.past.year'
   | 'time.past.years'
   | 'page.internalServerError.title'
-  | 'page.internalServerError.description';
+  | 'page.internalServerError.description'
+  | 'page.skipToContent.label';
 
 export type Locale = { code: string; name: string };
 

package/src/core/types/telemetry.ts

@@ -0,0 +1,36 @@
+import { AsyncApiRealm } from '@redocly/realm-asyncapi-sdk';
+
+type ExtractEventType<T> = T extends {
+  span?: { attributes?: { 'cloudevents.event_type': infer EventType } };
+}
+  ? EventType
+  : never;
+
+export type EventType = ExtractEventType<AsyncApiRealm.Messages>;
+
+type GetMessageForEventType<TEventType extends EventType> = Extract<
+  AsyncApiRealm.Messages,
+  { span?: { attributes?: { 'cloudevents.event_type': TEventType } } }
+>;
+
+type ExtractEventDataForType<TEventType extends EventType> =
+  GetMessageForEventType<TEventType> extends {
+    span?: { attributes?: infer Attrs };
+  }
+    ? {
+        [K in keyof Attrs as K extends `cloudevents.event_data.${string}` ? K : never]: Attrs[K];
+      }
+    : never;
+
+export type ConvertEventDataToPayload<T> = {
+  [K in keyof T as K extends `cloudevents.event_data.${infer FieldName}` ? FieldName : never]: T[K];
+};
+
+export type EventPayload<TEventType extends EventType> = ConvertEventDataToPayload<
+  ExtractEventDataForType<TEventType>
+>;
+
+export interface SendEventParams<TEventType extends EventType> {
+  type: TEventType;
+  payload?: EventPayload<TEventType>;
+}

package/src/core/utils/load-and-navigate.ts

@@ -32,10 +32,11 @@ export async function loadAndNavigate({
   if (result && lastNavigatedPath === to) {
     if (pathname !== window.location.pathname || search !== window.location.search) {
       // origin is used to prevent infinite loop when navigating from post message (from wysiwyg)
-      navigate(
-        { pathname, search, hash },
-        { ...options, state: { origin }, unstable_flushSync: true },
-      );
+      navigate({ pathname, search, hash }, {
+        ...options,
+        state: { origin },
+        unstable_flushSync: true,
+      } as NavigateOptions & { unstable_flushSync: boolean });
     }
     // @ts-ignore
     if (result.props?.disableAutoScroll) return;

package/src/icons/AscSortIcon/AscSortIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 11L9.707 10.293L11.5 12.086V2H12.5V12.086L14.293 10.293L15 11L12 14L9 11Z"
+      fill="#22242B"
+    />
+    <path d="M8 9H1V10H8V9Z" fill="#22242B" />
+    <path d="M8 6H3V7H8V6Z" fill="#22242B" />
+    <path d="M8 3H5V4H8V3Z" fill="#22242B" />
+  </svg>
+);
+
+export const AscSortIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/AscSortIcon/AscSortIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CardsIcon/CardsIcon.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M4 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1V4C0 4.26522 0.105357 4.51957 0.292893 4.70711C0.48043 4.89464 0.734784 5 1 5H4C4.26522 5 4.51957 4.89464 4.70711 4.70711C4.89464 4.51957 5 4.26522 5 4V1C5 0.734784 4.89464 0.48043 4.70711 0.292893C4.51957 0.105357 4.26522 0 4 0ZM4 4H1V1H4V4Z"
+      fill="#22242B"
+    />
+    <path
+      d="M11 0H8C7.73478 0 7.48043 0.105357 7.29289 0.292893C7.10536 0.48043 7 0.734784 7 1V4C7 4.26522 7.10536 4.51957 7.29289 4.70711C7.48043 4.89464 7.73478 5 8 5H11C11.2652 5 11.5196 4.89464 11.7071 4.70711C11.8946 4.51957 12 4.26522 12 4V1C12 0.734784 11.8946 0.48043 11.7071 0.292893C11.5196 0.105357 11.2652 0 11 0ZM11 4H8V1H11V4Z"
+      fill="#22242B"
+    />
+    <path
+      d="M4 7H1C0.734784 7 0.48043 7.10536 0.292893 7.29289C0.105357 7.48043 0 7.73478 0 8V11C0 11.2652 0.105357 11.5196 0.292893 11.7071C0.48043 11.8946 0.734784 12 1 12H4C4.26522 12 4.51957 11.8946 4.70711 11.7071C4.89464 11.5196 5 11.2652 5 11V8C5 7.73478 4.89464 7.48043 4.70711 7.29289C4.51957 7.10536 4.26522 7 4 7ZM4 11H1V8H4V11Z"
+      fill="#22242B"
+    />
+    <path
+      d="M11 7H8C7.73478 7 7.48043 7.10536 7.29289 7.29289C7.10536 7.48043 7 7.73478 7 8V11C7 11.2652 7.10536 11.5196 7.29289 11.7071C7.48043 11.8946 7.73478 12 8 12H11C11.2652 12 11.5196 11.8946 11.7071 11.7071C11.8946 11.5196 12 11.2652 12 11V8C12 7.73478 11.8946 7.48043 11.7071 7.29289C11.5196 7.10536 11.2652 7 11 7ZM11 11H8V8H11V11Z"
+      fill="#22242B"
+    />
+  </svg>
+);
+
+export const CardsIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CardsIcon/CardsIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CaretDownIcon/CaretDownIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M6.77566 0C7.04293 0 7.17678 0.323143 6.98779 0.512132L4.21205 3.28787C4.0949 3.40503 3.90495 3.40503 3.78779 3.28787L1.01205 0.512132C0.823064 0.323142 0.956914 0 1.22419 0H6.77566Z"
+      fill="#6E6F7A"
+    />
+  </svg>
+);
+
+export const CaretDownIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CaretDownIcon/CaretDownIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '4px'};
+  width: ${({ size }) => size || '8px'};
+`;

package/src/icons/CaretUpIcon/CaretUpIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M1.22419 3.99573C0.956914 3.99573 0.823064 3.67259 1.01205 3.4836L3.78779 0.707863C3.90495 0.590706 4.0949 0.590706 4.21205 0.707863L6.98779 3.4836C7.17678 3.67259 7.04293 3.99573 6.77566 3.99573L1.22419 3.99573Z"
+      fill="#6E6F7A"
+    />
+  </svg>
+);
+
+export const CaretUpIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CaretUpIcon/CaretUpIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '4px'};
+  width: ${({ size }) => size || '8px'};
+`;

package/src/icons/DescSortIcon/DescSortIcon.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M9 11L9.707 10.293L11.5 12.086V2H12.5V12.086L14.293 10.293L15 11L12 14L9 11Z"
+      fill="#22242B"
+    />
+    <path d="M8 3H1V4H8V3Z" fill="#22242B" />
+    <path d="M8 6H3V7H8V6Z" fill="#22242B" />
+    <path d="M8 9H5V10H8V9Z" fill="#22242B" />
+  </svg>
+);
+
+export const DescSortIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DescSortIcon/DescSortIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;