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

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.js

@@ -13,6 +13,7 @@ const Tag_1 = require("../../../../components/Tag/Tag");
 const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
 const CatalogUserEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogUserEntityCell");
 const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
+const CatalogLastUpdateCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogLastUpdateCell");
 const teamColumns = [
     {
         key: 'entity',
@@ -21,12 +22,12 @@ const teamColumns = [
             var _a;
             return (react_1.default.createElement(CatalogUserEntityCell_1.CatalogUserEntityCell, { name: entity.title, email: (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.email }));
         },
-        width: '2fr',
+        width: '3fr',
         sortable: true,
         sortKey: 'title',
     },
     {
-        key: 'metadata',
+        key: 'metadata.role',
         title: 'Role',
         render: (entity) => { var _a, _b; return (((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.role) ? react_1.default.createElement(Tag_1.Tag, null, (_b = entity.metadata) === null || _b === void 0 ? void 0 : _b.role) : null); },
         width: '2fr',
@@ -35,7 +36,16 @@ const teamColumns = [
         key: 'description',
         title: 'Description',
         render: (entity) => react_1.default.createElement(EntityDescription, null, entity.summary),
-        width: '3fr',
+        width: '2fr',
+    },
+    {
+        key: 'lastUpdate',
+        title: 'Last update',
+        render: (entity) => react_1.default.createElement(CatalogLastUpdateCell_1.CatalogLastUpdateCell, { lastModified: entity.updatedAt }),
+        width: '1fr',
+        minWidth: '112px',
+        sortable: true,
+        sortKey: 'updated_at',
     },
 ];
 function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, setFilter, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {

package/lib/components/Catalog/CatalogEntity/CatalogEntitySchema.js

@@ -55,7 +55,7 @@ function CatalogEntitySchema({ entity, relatedEntity, catalogConfig, RedocSchema
     const { getEntityDetailsLink } = (0, hooks_1.useCatalogEntityDetails)({
         catalogConfig,
     });
-    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
+    return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntitySchema" },
         react_1.default.createElement(HeaderWrapper, null,
             react_1.default.createElement(Heading, null, translate('catalog.entity.schema.title')),
             !isGraphql && (react_1.default.createElement(CopyButton_1.CopyButton, { data: rawSchema, buttonText: "Copy Schema", type: "compound", variant: "secondary", iconPosition: "right", size: "medium", onCopyClick: () => telemetry.sendCatalogEntitiesCopyDataSchemaClickedMessage([
@@ -76,8 +76,7 @@ const MetadataWrapper = styled_components_1.default.div `
   flex-direction: column;
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
-  margin-top: var(--spacing-base);
-  margin-bottom: var(--spacing-xs);
+  margin-bottom: var(--spacing-lg);
 `;
 const SchemaContentWrapper = styled_components_1.default.div `
   flex: 1;
@@ -94,6 +93,8 @@ const HeaderWrapper = styled_components_1.default.div `
 `;
 const Heading = styled_components_1.default.h2 `
   font-size: var(--catalog-metadata-heading-size);
+  line-height: var(--line-height-lg);
+  margin: 0;
 `;
 const SplitViewWrapper = styled_components_1.default.div `
   display: flex;

package/lib/components/Catalog/CatalogEntityTypeIcon.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export type CatalogEntityTypeIconProps = {
     entityType: string;
-    defaultColor?: boolean;
+    defaultColors?: boolean;
+    size?: 'large' | 'medium';
 };
-export declare function CatalogEntityTypeIcon({ entityType, defaultColor, }: CatalogEntityTypeIconProps): React.JSX.Element;
+export declare function CatalogEntityTypeIcon({ entityType, defaultColors, size, }: CatalogEntityTypeIconProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -8,19 +8,19 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogEntityIcon_1 = require("../../components/Catalog/CatalogEntityIcon");
 const core_1 = require("../../core");
-function CatalogEntityTypeIcon({ entityType, defaultColor = false, }) {
-    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColor: defaultColor },
-        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: defaultColor })));
+function CatalogEntityTypeIcon({ entityType, defaultColors = false, size = 'medium', }) {
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon", entityType: entityType, defaultColors: defaultColors, size: size },
+        react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entityType, defaultColor: false })));
 }
 const IconContainer = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--catalog-table-icon-width);
-  height: var(--catalog-table-icon-height);
+  width: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-width-large)' : 'var(--catalog-table-icon-width-medium)')};
+  height: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-height-large)' : 'var(--catalog-table-icon-height-medium)')};
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => {
-    if (defaultColor) {
+  background-color: ${({ defaultColors, entityType }) => {
+    if (defaultColors) {
         return 'var(--catalog-entity-bg-color)';
     }
     if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
@@ -30,8 +30,8 @@ const IconContainer = styled_components_1.default.div `
 }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => {
-    if (defaultColor) {
+    ${({ defaultColors, entityType }) => {
+    if (defaultColors) {
         return 'var(--catalog-entity-border-color)';
     }
     if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.d.ts

@@ -1,11 +1,10 @@
 import { JSX } from 'react';
-import { SortOption } from '../../../core';
 import { CatalogViewMode } from '../../../core';
 type CatalogMobileTopBarProps = {
     setMobileFiltersPanelOpen: (open: boolean) => void;
     activeFiltersCount: number;
-    setSortOption: (sortOption: SortOption | null) => void;
-    sortOption: SortOption | null;
+    setSortOption: (sortOption: string | null) => void;
+    sortOption: string | null;
     viewMode: CatalogViewMode;
     setViewMode: (viewMode: CatalogViewMode) => void;
 };

package/lib/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.d.ts

@@ -1,9 +1,8 @@
 import { JSX } from 'react';
-import { SortOption } from '../../../core';
 import { CatalogViewMode } from '../../../core';
 type CatalogMobileTopBarControlsProps = {
-    setSortOption: (sortOption: SortOption | null) => void;
-    sortOption: SortOption | null;
+    setSortOption: (sortOption: string | null) => void;
+    sortOption: string | null;
     viewMode: CatalogViewMode;
     setViewMode: (viewMode: CatalogViewMode) => void;
 };

package/lib/components/Catalog/CatalogPageDescription.js

@@ -36,7 +36,7 @@ const CatalogDescription = styled_components_1.default.p `
   color: var(--catalog-description-text-color);
   font-weight: var(--catalog-description-font-weight);
   font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin);
+  margin: 0;
   line-height: var(--catalog-description-line-height);
   display: -webkit-box;
   -webkit-line-clamp: 3;

package/lib/components/Catalog/CatalogSortButton.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { SortOption } from '../../core/types';
 export type CatalogSortButtonProps = {
-    onSortChange: (sortOption: SortOption | null) => void;
-    currentSort?: SortOption | null;
+    onSortChange: (sortOption: string | null) => void;
+    currentSort?: string | null;
 };
 export declare function CatalogSortButton({ onSortChange, currentSort, }: {
-    onSortChange: (sortOption: SortOption | null) => void;
-    currentSort?: SortOption | null;
+    onSortChange: (sortOption: string | null) => void;
+    currentSort?: string | null;
 }): React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogDomainsCell.js

@@ -5,14 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogDomainsCell = CatalogDomainsCell;
 const react_1 = __importDefault(require("react"));
-const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+const CatalogTags_1 = require("../../../components/Catalog/CatalogTags");
+const GraphIcon_1 = require("../../../icons/GraphIcon/GraphIcon");
 function CatalogDomainsCell({ domains }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogDomainsCell" },
-        react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { "data-testid": "catalog-domains-cell", items: domains, showPlaceholder: false, tagProps: {
+        react_1.default.createElement(CatalogTags_1.CatalogTags, { "data-testid": "catalog-domains-cell", items: domains, showPlaceholder: false, tagProps: {
+                variant: 'outline',
+                icon: react_1.default.createElement(GraphIcon_1.GraphIcon, null),
                 style: {
                     fontSize: 'var(--font-size-base)',
                     backgroundColor: 'transparent',
                     borderRadius: 'var(--border-radius-xl)',
+                    margin: 0,
                 },
                 textTransform: 'none',
             } })));

package/lib/components/Catalog/CatalogTableView/CatalogEntityCell.js

@@ -10,7 +10,7 @@ const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight
 const CatalogEntityTypeIcon_1 = require("../../../components/Catalog/CatalogEntityTypeIcon");
 function CatalogEntityCell({ entity }) {
     return (react_1.default.createElement(EntityTitleCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityCell" },
-        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
+        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type, size: "large", defaultColors: true }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, { "data-component-name": "Catalog/CatalogTableView/CatalogEntityTitle" },
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
@@ -28,7 +28,7 @@ const EntityTitleContent = styled_components_1.default.div `
   flex-direction: column;
   max-width: calc(
     100% - var(--catalog-table-entity-title-content-offset)
-  ); /* Account for icon width (30px) + gap (12px) */
+  ); /* Account for icon width (32px) + gap (8px) */
   overflow: hidden;
 `;
 const EntityTitle = styled_components_1.default.div `

package/lib/components/Catalog/CatalogTableView/CatalogLastUpdateCell.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export type CatalogLastUpdateCellProps = {
+    lastModified: string;
+};
+export declare function CatalogLastUpdateCell({ lastModified, }: CatalogLastUpdateCellProps): React.ReactElement;

package/lib/components/Catalog/CatalogTableView/CatalogLastUpdateCell.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogLastUpdateCell = CatalogLastUpdateCell;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tooltip_1 = require("../../../components/Tooltip/Tooltip");
+function formatLastModified(isoString) {
+    const date = new Date(isoString);
+    if (Number.isNaN(date.getTime())) {
+        return isoString;
+    }
+    return date.toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        timeZone: 'UTC',
+    });
+}
+function formatLastModifiedTooltip(isoString) {
+    const date = new Date(isoString);
+    if (Number.isNaN(date.getTime())) {
+        return isoString;
+    }
+    return date.toLocaleString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hour12: false,
+        timeZone: 'UTC',
+    });
+}
+function CatalogLastUpdateCell({ lastModified, }) {
+    return (react_1.default.createElement(CatalogLastUpdateCellWrapper, { "data-component-name": "Catalog/CatalogTableView/CatalogLastUpdateCell" },
+        react_1.default.createElement(Tooltip_1.Tooltip, { tip: formatLastModifiedTooltip(lastModified), placement: "bottom" }, formatLastModified(lastModified))));
+}
+const CatalogLastUpdateCellWrapper = styled_components_1.default.div `
+  color: var(--text-color-helper);
+`;
+//# sourceMappingURL=CatalogLastUpdateCell.js.map

package/lib/components/Catalog/CatalogTableView/CatalogOwnersCell.js

@@ -5,16 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogOwnersCell = CatalogOwnersCell;
 const react_1 = __importDefault(require("react"));
-const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+const CatalogTags_1 = require("../../../components/Catalog/CatalogTags");
 function CatalogOwnersCell({ owners }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogOwnersCell" },
-        react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { "data-testid": "catalog-owners-cell", items: owners, showPlaceholder: false, tagProps: {
+        react_1.default.createElement(CatalogTags_1.CatalogTags, { "data-testid": "catalog-owners-cell", items: owners, showPlaceholder: false, tagProps: {
+                variant: 'outline',
                 style: {
                     fontSize: 'var(--font-size-base)',
                     backgroundColor: 'transparent',
                     borderRadius: 'var(--border-radius-xl)',
+                    margin: 0,
                 },
                 textTransform: 'none',
-            } })));
+            }, showAvatars: true })));
 }
 //# sourceMappingURL=CatalogOwnersCell.js.map

package/lib/components/Catalog/CatalogTableView/CatalogTableHeaderCell.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
-import { SortOption } from '../../../core/types';
 import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
-    currentSortOption?: SortOption | null;
+    currentSortOption?: string | null;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
-export declare const CatalogTableHeaderCell: <T extends BaseEntity>({ column, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellProps<T>) => React.JSX.Element;
+export declare const CatalogTableHeaderCell: <T extends BaseEntity>({ column, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableHeaderCellProps<T>) => React.JSX.Element;

package/lib/components/Catalog/CatalogTableView/CatalogTableHeaderCell.js

@@ -42,9 +42,10 @@ const styled_components_1 = __importStar(require("styled-components"));
 const CaretDownIcon_1 = require("../../../icons/CaretDownIcon/CaretDownIcon");
 const CaretUpIcon_1 = require("../../../icons/CaretUpIcon/CaretUpIcon");
 const hooks_1 = require("../../../core/hooks");
-const CatalogTableHeaderCell = ({ column, handleSortClick, isColumnSorted, }) => {
+const CatalogTableHeaderCell = ({ column, currentSortOption, handleSortClick, isColumnSorted, }) => {
     const { handleCellClick, sortKey, isUpActive, isDownActive } = (0, hooks_1.useCatalogTableHeaderCellActions)({
         column,
+        currentSortOption,
         handleSortClick,
         isColumnSorted,
     });
@@ -81,7 +82,7 @@ const SortIndicator = styled_components_1.default.div `
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-left: 8px;
+  margin-left: 4px;
   gap: 2px;
   color: var(--catalog-table-header-sort-indicator-color);
 `;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { SortOption } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -13,7 +12,7 @@ export type CatalogTableViewProps<T extends BaseEntity> = {
     entitiesCatalogConfig?: EntitiesCatalogConfig;
     catalogConfig: CatalogEntityConfig;
     columns?: CatalogColumn<T>[];
-    currentSortOption?: SortOption | null;
+    currentSortOption?: string | null;
     onRowClick?: (entity: T) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;

package/lib/components/Catalog/CatalogTableView/CatalogTableView.js

@@ -14,13 +14,14 @@ const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/
 const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
 const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
 const core_1 = require("../../../core");
+const CatalogLastUpdateCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogLastUpdateCell");
 const baseColumns = [
     {
         key: 'entity',
         title: 'Entity',
         render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
         width: '3fr',
-        minWidth: '250px',
+        minWidth: '164px',
         sortable: true,
         sortKey: 'title',
     },
@@ -29,7 +30,7 @@ const baseColumns = [
         title: 'Type',
         render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
         width: '2fr',
-        minWidth: '120px',
+        minWidth: '162px',
         sortable: true,
         sortKey: 'type',
     },
@@ -41,7 +42,7 @@ const baseColumns = [
             return (react_1.default.createElement(CatalogDomainsCell_1.CatalogDomainsCell, { domains: ((_a = entity.domains) === null || _a === void 0 ? void 0 : _a.map((domain) => domain.title)) || [] }));
         },
         width: '2fr',
-        minWidth: '150px',
+        minWidth: '162px',
     },
     {
         key: 'owners',
@@ -51,14 +52,23 @@ const baseColumns = [
             return (react_1.default.createElement(CatalogOwnersCell_1.CatalogOwnersCell, { owners: ((_a = entity.owners) === null || _a === void 0 ? void 0 : _a.map((owner) => owner.title)) || [] }));
         },
         width: '2fr',
-        minWidth: '150px',
+        minWidth: '162px',
     },
     {
         key: 'tags',
         title: 'Tags',
         render: (entity) => react_1.default.createElement(CatalogTagsCell_1.CatalogTagsCell, { entity: entity }),
         width: '2fr',
-        minWidth: '120px',
+        minWidth: '160px',
+    },
+    {
+        key: 'lastUpdate',
+        title: 'Last update',
+        render: (entity) => react_1.default.createElement(CatalogLastUpdateCell_1.CatalogLastUpdateCell, { lastModified: entity.updatedAt }),
+        width: '1fr',
+        minWidth: '112px',
+        sortable: true,
+        sortKey: 'updated_at',
     },
 ];
 const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, columns = baseColumns, currentSortOption, onRowClick, handleSortClick, isColumnSorted, style, contentMinWidth, }) => {

package/lib/components/Catalog/CatalogTableView/CatalogTagsCell.js

@@ -5,13 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogTagsCell = CatalogTagsCell;
 const react_1 = __importDefault(require("react"));
-const CatalogTagsWithTooltip_1 = require("../../../components/Catalog/CatalogTagsWithTooltip");
+const CatalogTags_1 = require("../../../components/Catalog/CatalogTags");
 function CatalogTagsCell({ entity }) {
     return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogTableView/CatalogTagsCell" },
-        react_1.default.createElement(CatalogTagsWithTooltip_1.CatalogTagsWithTooltip, { "data-testid": "catalog-tags-cell", items: entity.tags || [], showPlaceholder: false, tagProps: {
+        react_1.default.createElement(CatalogTags_1.CatalogTags, { "data-testid": "catalog-tags-cell", items: entity.tags || [], showPlaceholder: false, tagProps: {
                 style: {
                     fontSize: 'var(--font-size-base)',
                     borderRadius: 'var(--border-radius)',
+                    margin: 0,
                 },
                 borderless: true,
                 color: 'grey',

package/lib/components/Catalog/CatalogTableView/CatalogUserEntityCell.js

@@ -38,8 +38,8 @@ const EntityTitle = styled_components_1.default.div `
   text-overflow: ellipsis;
 `;
 exports.Email = styled_components_1.default.div `
-  font-size: var(--catalog-table-entity-summary-font-size);
-  line-height: var(--catalog-table-entity-summary-line-height);
+  font-size: var(--catalog-user-entity-cell-email-font-size);
+  line-height: var(--catalog-user-entity-cell-email-line-height);
   color: var(--color-blue-6);
   white-space: nowrap;
   overflow: hidden;

package/lib/components/Catalog/CatalogTags.d.ts

@@ -0,0 +1,11 @@
+import { JSX } from 'react';
+import { TagProps } from '../../components/Tag/Tag';
+export type CatalogTagsProps = {
+    items: string[];
+    itemsToShow?: number;
+    showPlaceholder?: boolean;
+    tagProps?: TagProps;
+    showAvatars?: boolean;
+    maxItemLength?: number;
+};
+export declare function CatalogTags({ items, itemsToShow, showPlaceholder, showAvatars, tagProps, maxItemLength, }: CatalogTagsProps): JSX.Element | null;

package/lib/components/Catalog/CatalogTags.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogTags = CatalogTags;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../../core/constants");
+const Tag_1 = require("../../components/Tag/Tag");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const hooks_1 = require("../../core/hooks");
+const CatalogAvatar_1 = require("../../components/Catalog/CatalogAvatar");
+function CatalogTags({ items, itemsToShow = 1, showPlaceholder = false, showAvatars, tagProps, maxItemLength = constants_1.CATALOG_TAG_MAX_LENGTH, }) {
+    var _a;
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    if (!items || items.length === 0) {
+        if (showPlaceholder) {
+            return (react_1.default.createElement(CatalogTagsNotConnectedWrapper, { "data-component-name": "Catalog/CatalogTags" }, translate('catalog.notConnected', 'Not connected')));
+        }
+        return null;
+    }
+    const maxLength = showAvatars || (tagProps === null || tagProps === void 0 ? void 0 : tagProps.icon) ? maxItemLength - 3 : maxItemLength;
+    const isFirstItemTruncated = ((_a = items[0]) === null || _a === void 0 ? void 0 : _a.length) > maxLength;
+    const anyItemHidden = items.length > itemsToShow;
+    const shouldUseVariantWithTooltip = anyItemHidden || isFirstItemTruncated;
+    if (shouldUseVariantWithTooltip) {
+        const displayedItems = items.slice(0, itemsToShow);
+        const remainingCount = items.length - itemsToShow;
+        return (react_1.default.createElement(Tooltip_1.Tooltip, { tip: items.join(', '), placement: "bottom", className: "catalog" },
+            react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTags" },
+                displayedItems.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
+                    icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
+                    style: Object.assign(Object.assign({}, tagProps === null || tagProps === void 0 ? void 0 : tagProps.style), { paddingLeft: 'var(--catalog-tags-tag-left-padding)' }),
+                }), { textTransform: "none", maxLength: maxLength }),
+                    react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))),
+                remainingCount > 0 && react_1.default.createElement(MoreTagsButton, null,
+                    "+ ",
+                    remainingCount))));
+    }
+    return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTags" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, (showAvatars && {
+        icon: react_1.default.createElement(CatalogAvatar_1.CatalogAvatar, { value: item, size: "small" }),
+        style: Object.assign(Object.assign({}, tagProps === null || tagProps === void 0 ? void 0 : tagProps.style), { paddingLeft: 'var(--catalog-tags-tag-left-padding)' }),
+    }), { maxLength: maxLength }),
+        react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
+}
+const CatalogTagsWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+`;
+const MoreTagsButton = styled_components_1.default.span `
+  font-size: var(--catalog-tags-more-button-font-size);
+  margin-left: var(--catalog-tags-more-button-margin-left);
+`;
+const CatalogTagsNotConnectedWrapper = styled_components_1.default.span `
+  font-size: var(--catalog-tags-not-connected-font-size);
+  line-height: var(--catalog-tags-not-connected-line-height);
+  color: var(--catalog-tags-not-connected-color);
+`;
+//# sourceMappingURL=CatalogTags.js.map

package/lib/components/Catalog/variables.js

@@ -49,7 +49,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-description-text-color: var(--text-color-secondary);
   --catalog-description-font-weight: var(--font-weight-regular);
   --catalog-description-font-size: var(--font-size-lg);
-  --catalog-description-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-description-margin: 0 0 var(--spacing-base) 0;
   --catalog-description-line-height: var(--line-height-lg);
 
   /**
@@ -154,6 +154,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-tags-not-connected-font-size: var(--font-size-base);
   --catalog-tags-not-connected-line-height: var(--line-height-base);
   --catalog-tags-not-connected-color: var(--text-color-disabled);
+  --catalog-tags-tag-left-padding: 2px;
 
   /**
     * @tokens Catalog empty state
@@ -208,7 +209,7 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog card
     */
   --catalog-card-height: 241px;
-  --catalog-card-padding-vertical: var(--spacing-base);
+  --catalog-card-padding-vertical: var(--spacing-md);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -283,7 +284,7 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog card footer
     */
-  --catalog-card-footer-height: 72px;
+  --catalog-card-footer-height: 68px;
 
   /**
     * @tokens Catalog card description
@@ -315,11 +316,6 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-page-badge-dot-size: 6px;
   --catalog-page-badge-dot-border-color: var(--color-static-white);
 
-  /**
-   * @tokens Catalog card metadata
-   */
-  --catalog-card-metadata-owner-tag-left-padding: 2px;
-
 
   /**
     * @tokens Catalog table
@@ -327,13 +323,13 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-table-border-color: var(--border-color-secondary);
   --catalog-table-header-bg-color: var(--layer-color);
   --catalog-table-header-font-weight: var(--font-weight-medium);
-  --catalog-table-header-cell-padding: 4px 8px;
-  --catalog-table-cell-padding: 4px 8px;
+  --catalog-table-header-cell-padding: 4px 6px 4px 8px;
+  --catalog-table-cell-padding: 4px 6px 4px 8px;
   --catalog-table-row-hover-bg-color: var(--bg-color-hover, rgba(0, 0, 0, 0.04));
   --catalog-table-empty-state-padding: 32px;
   --catalog-table-empty-state-color: var(--text-color-secondary);
-  --catalog-table-title-cell-gap: 12px;
-  --catalog-table-entity-title-content-offset: 42px;
+  --catalog-table-title-cell-gap: var(--spacing-xs);
+  --catalog-table-entity-title-content-offset: 40px;
 
   /**
     * @tokens Catalog table header
@@ -503,8 +499,6 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-history-pill-line-height: var(--line-height-base);
   --catalog-history-pill-text-color: var(--text-color-primary);
   --catalog-history-pill-min-width: calc(100% - 118px - var(--catalog-history-item-gap));
-
-
   // @tokens End
 
   /**
@@ -583,6 +577,20 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-history-sidebar-version-tag-border-radius: var(--border-radius-xl);
   --catalog-history-sidebar-revision-tag-border-radius: var(--border-radius-xl);
   // @tokens End
+
+  /**
+   * @tokens Catalog entity type icon
+   */
+  --catalog-table-icon-width-large: 32px;
+  --catalog-table-icon-height-large: 32px;
+  --catalog-table-icon-width-medium: 24px;
+  --catalog-table-icon-height-medium: 24px;
+
+  /**
+   * @tokens Catalog user entity cell
+   */
+  --catalog-user-entity-cell-email-font-size: var(--font-size-base);
+  --catalog-user-entity-cell-email-line-height: var(--line-height-base);
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/components/Filter/variables.js

@@ -24,7 +24,7 @@ exports.filter = (0, styled_components_1.css) `
   --filter-option-margin: 0;
 
   --filter-option-label-font-size: var(--font-size-base);
-  --filter-option-label-color: var(--text-color-secondary);
+  --filter-option-label-color: var(--text-color-primary);
 
   --filter-option-checkbox-padding-left: var(--spacing-xs);
 

package/lib/components/Link/Link.js

@@ -48,9 +48,9 @@ exports.Link = Link;
 const React = __importStar(require("react"));
 const react_1 = require("react");
 const react_router_dom_1 = require("react-router-dom");
-const contexts_1 = require("../../core/contexts");
+const ThemeDataContext_1 = require("../../core/contexts/ThemeDataContext");
 function Link(props) {
-    const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);
+    const context = (0, react_1.useContext)(ThemeDataContext_1.ThemeDataContext);
     if (context === null || context === void 0 ? void 0 : context.components) {
         const { LinkComponent } = context.components;
         return React.createElement(LinkComponent, Object.assign({}, props));

package/lib/components/Menu/MenuItem.js

@@ -200,6 +200,7 @@ const MenuItemLabelWrapper = styled_components_1.default.li `
     (0, styled_components_1.css) `
       color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
       background-color: var(--menu-item-bg-color-active);
+      font-weight: var(--menu-item-font-weight-active);
 
       ${ChevronDownIcon_1.ChevronDownIcon} path {
         fill: var(--menu-item-color-active);