@redocly/theme 0.64.0-next.1 → 0.64.0-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.1",
+  "version": "0.64.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.44.1"
+    "@redocly/config": "0.46.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Admonition/Admonition.tsx

@@ -7,9 +7,10 @@ import { WarningCycleIcon } from '@redocly/theme/icons/WarningCycleIcon/WarningC
 import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
 import { ErrorIcon } from '@redocly/theme/icons/ErrorIcon/ErrorIcon';
 import { InformationIcon } from '@redocly/theme/icons/InformationIcon/InformationIcon';
+import { IdeaIcon } from '@redocly/theme/icons/IdeaIcon/IdeaIcon';
 
 type AdmonitionTypeProps = {
-  type: 'warning' | 'success' | 'danger' | 'info';
+  type: 'warning' | 'success' | 'danger' | 'info' | 'default';
 };
 
 export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
@@ -24,6 +25,7 @@ const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
   success: CheckmarkOutlineIcon,
   danger: ErrorIcon,
   info: InformationIcon,
+  default: IdeaIcon,
 };
 
 export function Admonition({

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

@@ -12,4 +12,7 @@ export const admonitionDarkMode = css`
 
   --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
   --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+
+  --admonition-default-bg-color: color-mix(in srgb, var(--color-primary-bg, var(--admonition-default-bg-color-legacy)) 40%, transparent); // @presenter Color
+  --admonition-default-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-primary-border, var(--admonition-default-border-color-legacy)) 40%, transparent); // @presenter Border
 `;

package/src/components/Admonition/variables.ts

@@ -89,5 +89,18 @@ export const admonition = css`
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
 
+  /**
+  * @tokens Admonition type primary
+  */
+
+  --admonition-default-bg-color: var(--color-primary-bg, var(--admonition-default-bg-color-legacy)); // @presenter Color
+  --admonition-default-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-default-icon-color: var(--color-primary-base, var(--admonition-default-icon-color-legacy)); // @presenter Color
+  --admonition-default-border-color: var(--color-primary-border, var(--admonition-default-border-color-legacy)); // @presenter Color
+  --admonition-default-border-style: var(--admonition-border-style); // @presenter Color
+  --admonition-default-border-width: var(--admonition-border-width); // @presenter Color
+  --admonition-default-border: var(--admonition-default-border-width) var(--admonition-default-border-style) var(--admonition-default-border-color); // @presenter Border
+  
   // @tokens End
 `;

package/src/components/Banner/Banner.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { BannerConfig } from '@redocly/config';
+import type { ResolvedBannerConfig } from '@redocly/config';
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -23,11 +23,12 @@ function setBannerHeight(height: number): void {
 }
 
 export function Banner({ className }: BannerProps): JSX.Element | null {
-  const { useBanner, useMarkdownText } = useThemeHooks();
+  const { useBanner, useMarkdocRenderer } = useThemeHooks();
   const { banner, dismissBanner } = useBanner();
-  const [displayBanner, setDisplayBanner] = useState<BannerConfig | undefined>(undefined);
+  const [displayBanner, setDisplayBanner] = useState<ResolvedBannerConfig | undefined>(undefined);
   const [isVisible, setIsVisible] = useState(false);
-  const markdownContent = useMarkdownText(displayBanner?.content || '');
+
+  const markdownContent = useMarkdocRenderer(displayBanner?.ast);
   const bannerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -101,8 +102,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
     return null;
   }
 
-  const bannerColor =
-    ((displayBanner as BannerConfig & { color?: BannerColor }).color as BannerColor) || 'info';
+  const bannerColor = displayBanner.color || 'info';
 
   return (
     <BannerWrapper
@@ -120,7 +120,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
           variant="ghost"
           size="var(--banner-button-size)"
           icon={<CloseIcon color={`var(--banner-${bannerColor}-icon-color)`} size="16px" />}
-          onClick={() => dismissBanner(displayBanner.content)}
+          onClick={() => dismissBanner(displayBanner.hash)}
           aria-label="Dismiss banner"
         />
       )}

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

@@ -17,8 +17,8 @@ export const buttonDarkMode = css`
   --button-bg-color-secondary-hover: var(--color-warm-grey-5);
   --button-bg-color-secondary-pressed: var(--color-warm-grey-6);
   --button-bg-color-secondary-danger-pressed: var(--color-raspberry-9);
-  --button-bg-color-primary-hover: var(--color-blue-5);
-  --button-bg-color-primary-pressed: var(--color-blue-4);
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy));
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy));
   --button-bg-color-primary-danger-hover: var(--color-raspberry-5);
   --button-bg-color-primary-danger-pressed: var(--color-raspberry-4);
   --button-bg-color-disabled: var(--color-warm-grey-3);

package/src/components/Button/variables.ts

@@ -24,9 +24,9 @@ export const button = css`
   --button-content-color-primary-hover: var(--color-blue-7); // @presenter Color
   --button-content-color-primary-pressed: var(--color-blue-8); // @presenter Color
 
-  --button-bg-color-primary: var(--color-blue-6); // @presenter Color
-  --button-bg-color-primary-hover: var(--color-blue-7); // @presenter Color
-  --button-bg-color-primary-pressed: var(--color-blue-8); // @presenter Color
+  --button-bg-color-primary: var(--color-primary-base, var(--button-bg-color-primary-legacy)); // @presenter Color
+  --button-bg-color-primary-hover: var(--color-primary-hover, var(--button-bg-color-primary-hover-legacy)); // @presenter Color
+  --button-bg-color-primary-pressed: var(--color-primary-active, var(--button-bg-color-primary-pressed-legacy)); // @presenter Color
 
   --button-bg-color-primary-danger: var(--color-raspberry-6); // @presenter Color
   --button-bg-color-primary-danger-hover: var(--color-raspberry-7); // @presenter Color

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -1,7 +1,7 @@
 import React, { JSX } from 'react';
 import styled, { css } from 'styled-components';
 
-import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
+import { CatalogViewMode } from '@redocly/theme/core/types';
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
@@ -10,8 +10,8 @@ import { breakpoints } from '@redocly/theme/core';
 export type CatalogActionsRowProps = {
   searchQuery: string;
   setSearchQuery: (updatedTerm: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (option: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (option: string | null) => void;
   viewMode?: CatalogViewMode;
   onViewModeChange?: (mode: CatalogViewMode) => void;
   isDetailsPage?: boolean;

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -9,7 +9,7 @@ import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighl
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 
@@ -54,7 +54,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
         <CardMetadataSection>
           <MetadataRow>
             <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
-            <CatalogTagsWithTooltip
+            <CatalogTags
               items={entity.domains?.map((domain) => domain.title) || []}
               showPlaceholder={true}
               tagProps={{
@@ -71,7 +71,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
           <MetadataRow>
             <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
-            <CatalogTagsWithTooltip
+            <CatalogTags
               items={entity.owners?.map((owner) => owner.key) || []}
               showPlaceholder={true}
               showAvatars={true}
@@ -80,7 +80,6 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   fontSize: 'var(--catalog-card-font-size)',
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
-                  paddingLeft: 'var(--catalog-card-metadata-owner-tag-left-padding)',
                 },
                 textTransform: 'none',
                 variant: 'outline',
@@ -93,7 +92,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
       <Divider />
 
       <CardFooter hasTags={!!entity.tags?.length}>
-        <CatalogTagsWithTooltip
+        <CatalogTags
           items={entity.tags || []}
           tagProps={{
             style: {
@@ -179,7 +178,6 @@ const ArrowCircle = styled.div`
 const CardContent = styled.div`
   min-width: 0;
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
-  height: 100%;
 `;
 
 const CardFooter = styled.div<{ hasTags: boolean }>`

package/src/components/Catalog/CatalogEntities.tsx

@@ -2,7 +2,7 @@ import React, { JSX, useEffect } from 'react';
 
 import type { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntity, BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
+import { BffCatalogEntity, BffCatalogEntityList } from '@redocly/theme/core/types';
 import {
   useThemeHooks,
   useCatalogEntities,
@@ -24,7 +24,7 @@ export type CatalogEntitiesProps = {
   viewMode: string;
   setEntitiesCounter: (counter: number) => void;
   initialEntitiesList?: BffCatalogEntityList;
-  sortOption: SortOption | null;
+  sortOption: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -66,7 +66,7 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
         initialFilter && filterQuery
           ? `(${initialFilter}) AND (${filterQuery})`
           : initialFilter || filterQuery,
-      sort: sortOption || undefined,
+      sort: sortOption || (viewMode === 'table' ? 'updated_at' : 'type,title'),
       search: searchQuery,
     },
     props.initialEntitiesList,

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

@@ -2,12 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { Route, Routes, useSearchParams } from 'react-router-dom';
 
-import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  BffCatalogRelatedEntityList,
-} from '@redocly/theme/core/types';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import type { CatalogEntityPageProps, CatalogEntityProps } from '@redocly/theme/core/types';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
@@ -22,24 +19,6 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
-export type CatalogEntityProps = {
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  RedocSchema: React.ComponentType<any>;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  StoreProvider: React.ComponentType<any>;
-  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
-};
-
-type CatalogEntityPageProps = {
-  status: 'success';
-  entity: BffCatalogEntity;
-  relatedEntity: BffCatalogRelatedEntity | null;
-  relations: BffCatalogRelatedEntityList;
-  entitiesCatalogConfig: EntitiesCatalogConfig;
-  catalogConfig: CatalogEntityConfig;
-  sharedDataIds?: Record<string, string>;
-};
-
 const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactElement => {
   switch (entity.type) {
     case 'api-operation':

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityVersionItem.tsx

@@ -187,7 +187,9 @@ const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
   flex-shrink: 0;
   border-radius: 50%;
   background-color: ${({ $isCurrent }) =>
-    $isCurrent ? 'var(--color-primary-base)' : 'var(--catalog-avatar-bg-color)'};
+    $isCurrent
+      ? 'var(--color-primary-base, var(--color-blueberry-6))'
+      : 'var(--catalog-avatar-bg-color)'};
   transition: background-color 0.2s ease;
   margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
 

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

@@ -85,7 +85,7 @@ const MetadataWrapper = styled.div`
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin-bottom: var(--spacing-base);
 `;
 
 const Label = styled.span`

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

@@ -52,7 +52,7 @@ const LinksWrapper = styled.div`
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
   transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin: 0 0 var(--spacing-base) 0;
 `;
 
 const Label = styled.div`

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

@@ -81,6 +81,7 @@ const CatalogEntityPropertiesGridWrapper = styled.div`
   display: grid;
   gap: var(--spacing-base);
   grid-template-columns: 1fr;
+  margin-bottom: var(--spacing-lg);
 
   @media screen and (min-width: ${breakpoints.small}) {
     grid-template-columns: repeat(2, 1fr);

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard.tsx

@@ -64,10 +64,11 @@ const CardHeader = styled.div`
 const CardContent = styled.div`
   flex: 1;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);
   font-size: var(--font-size-lg);
   line-height: var(--line-height-lg);
+  font-weight: var(--font-weight-semibold);
 `;

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/ContactProperty.tsx

@@ -2,9 +2,9 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type ContactPropertyProps = {
   entity: BffCatalogEntity;
@@ -28,18 +28,16 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         content={
           <>
             {channels?.map((channel) => (
-              <Tag
+              <Button
                 key={channel.name}
-                textTransform="none"
-                style={{ backgroundColor: 'var(--bg-color)', cursor: 'pointer' }}
-                onClick={() => {
-                  if (channel.url) {
-                    window.open(channel.url, '_blank');
-                  }
-                }}
+                variant="outlined"
+                size="small"
+                style={{ backgroundColor: 'var(--bg-color)' }}
+                to={channel.url}
+                external={true}
               >
                 {channel.name}
-              </Tag>
+              </Button>
             ))}
           </>
         }

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/DomainsProperty.tsx

@@ -1,17 +1,19 @@
 import React, { JSX } from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useCatalogEntityLink, useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type DomainsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
+  const { entitiesCatalogConfig } = usePageProps<CatalogEntityPageProps>();
+  const { getEntityLink } = useCatalogEntityLink(entitiesCatalogConfig);
   const { translate } = useTranslate();
 
   const { domains = [] } = entity;
@@ -28,14 +30,17 @@ export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
         content={
           <>
             {domains?.map((domain) => (
-              <Tag
+              <Button
                 key={domain?.id}
+                variant="outlined"
+                size="small"
                 style={{ backgroundColor: 'var(--bg-color)' }}
-                variant="outline"
+                to={getEntityLink(domain)}
+                icon={<GraphIcon />}
+                external={true}
               >
-                <GraphIcon />
                 {domain?.title}
-              </Tag>
+              </Button>
             ))}
           </>
         }

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty.tsx

@@ -26,6 +26,7 @@ export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
         content={
           <>
             <Tag
+              variant="outline"
               textTransform="none"
               key={entity.metadata?.specType}
               style={{ backgroundColor: 'var(--bg-color)' }}

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty.tsx

@@ -1,18 +1,22 @@
 import React, { JSX } from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
+import { useCatalogEntityLink } from '@redocly/theme/core/hooks';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
 
 export type OwnersPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
   const { translate } = useTranslate();
+  const { entitiesCatalogConfig } = usePageProps<CatalogEntityPageProps>();
+  const { getEntityLink } = useCatalogEntityLink(entitiesCatalogConfig);
 
   const { owners = [] } = entity;
 
@@ -27,18 +31,26 @@ export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
         }
         content={
           <>
-            {owners.map((owner) => (
-              <Tag
-                key={owner?.id}
-                style={{
-                  backgroundColor: 'var(--bg-color)',
-                  borderRadius: 'var(--border-radius-xl)',
-                }}
-                variant="outline"
-              >
-                {owner?.title}
-              </Tag>
-            ))}
+            {owners.map((owner) => {
+              const entityLink = getEntityLink(owner);
+              return (
+                <Button
+                  key={owner?.id}
+                  variant="outlined"
+                  size="small"
+                  style={{
+                    backgroundColor: 'var(--bg-color)',
+                    borderRadius: 'var(--border-radius-xl)',
+                    paddingLeft: '2px',
+                  }}
+                  to={entityLink}
+                  icon={<CatalogAvatar value={owner?.key} size="small" />}
+                  external={true}
+                >
+                  {owner?.title}
+                </Button>
+              );
+            })}
           </>
         }
       />

package/src/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.tsx

@@ -2,7 +2,7 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
@@ -24,7 +24,7 @@ export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
           </>
         }
         content={
-          <CatalogTagsWithTooltip
+          <CatalogTags
             itemsToShow={8}
             items={entity.tags || []}
             tagProps={{

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

@@ -2,11 +2,7 @@ import React, { JSX, ReactNode } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
@@ -27,8 +23,8 @@ export type CatalogEntityApiDescriptionRelationsProps = {
   searchQuery: string;
   setSearchQuery: (query: string) => void;
   setFilter: (filter?: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -50,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
   shouldShowLoadMore,
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
-    <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
+    <TabsWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
       <Tabs key={entity.id} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
@@ -121,10 +117,14 @@ export function CatalogEntityApiDescriptionRelations({
           />
         </TabItem>
       </Tabs>
-    </div>
+    </TabsWrapper>
   );
 }
 
 const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
   padding: var(--spacing-sm);
 `;
+
+const TabsWrapper = styled.div`
+  --md-tabs-container-margin: none;
+`;

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

@@ -2,17 +2,14 @@ import React, { JSX } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { ListType } from '@redocly/theme/core/types';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  SortOption,
-} from '@redocly/theme/core/types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 import { CatalogEntityRelationCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityRelationCell';
+import { CatalogLastUpdateCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogLastUpdateCell';
 
 export type CatalogEntityDefaultRelationsProps = {
   entity: BffCatalogEntity;
@@ -25,8 +22,8 @@ export type CatalogEntityDefaultRelationsProps = {
   };
   searchQuery: string;
   setSearchQuery: (query: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (sortOption: string | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
   shouldShowLoadMore: boolean;
@@ -81,7 +78,7 @@ function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalog
       render: (entity) => <CatalogEntityCell entity={entity} />,
       sortable: true,
       sortKey: 'title',
-      width: '2.5fr',
+      width: '4fr',
     },
     {
       key: 'type',
@@ -89,7 +86,7 @@ function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalog
       render: (entity) => <CatalogEntityTypeTag entityType={entity.type} />,
       sortable: true,
       sortKey: 'type',
-      width: '1fr',
+      width: '2fr',
     },
     {
       key: 'relationType',
@@ -100,7 +97,18 @@ function getRelationsTableColumns(listType?: ListType): CatalogColumn<BffCatalog
           relationRole={entity.relationRole}
         />
       ),
+      width: '2fr',
+      sortable: true,
+      sortKey: 'relation_type',
+    },
+    {
+      key: 'lastUpdate',
+      title: 'Last update',
+      render: (entity) => <CatalogLastUpdateCell lastModified={entity.updatedAt} />,
       width: '1fr',
+      minWidth: '112px',
+      sortable: true,
+      sortKey: 'updated_at',
     },
   ];
 

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

@@ -32,7 +32,7 @@ export function CatalogEntityRelations({
   setSearchQuery,
 }: CatalogEntityRelationsProps): JSX.Element | null {
   const { useCatalogSort, useFetchCatalogEntitiesRelations } = useThemeHooks();
-  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort('title');
+  const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
 
   const [filter, setFilter] = useState<string | undefined>(ENTITY_DEFAULT_FILTERS[entity.type]);