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

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GitProperty = GitProperty;
+const react_1 = __importDefault(require("react"));
+const GithubIcon_1 = require("../../../../icons/GithubIcon/GithubIcon");
+const utils_1 = require("../../../../core/utils");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function GitProperty({ entity }) {
+    const git = entity.git;
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/GitProperty" },
+        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(GithubIcon_1.GithubIcon, null),
+                "Repositories"), content: react_1.default.createElement(react_1.default.Fragment, null, git === null || git === void 0 ? void 0 : git.map((repo) => {
+                const url = new URL(repo);
+                const repoName = (0, utils_1.removeLeadingSlash)(url.pathname);
+                return (react_1.default.createElement(Tag_1.Tag, { key: repo, style: { backgroundColor: 'var(--bg-color)' } }, repoName));
+            })) })));
+}
+//# sourceMappingURL=GitProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { BffCatalogEntity } from '../../../../core/types';
+export type OwnersPropertyProps = {
+    entity: BffCatalogEntity;
+};
+export declare function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OwnersProperty = OwnersProperty;
+const react_1 = __importDefault(require("react"));
+const PeopleIcon_1 = require("../../../../icons/PeopleIcon/PeopleIcon");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function OwnersProperty({ entity }) {
+    const { owners = [] } = entity;
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/OwnersProperty" },
+        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(PeopleIcon_1.PeopleIcon, null),
+                "Owners"), content: react_1.default.createElement(react_1.default.Fragment, null, owners.map((owner) => (react_1.default.createElement(Tag_1.Tag, { key: owner === null || owner === void 0 ? void 0 : owner.id, style: {
+                    backgroundColor: 'var(--bg-color)',
+                    borderRadius: 'var(--border-radius-xl)',
+                } }, owner === null || owner === void 0 ? void 0 : owner.title)))) })));
+}
+//# sourceMappingURL=OwnersProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { BffCatalogEntity } from '../../../../core/types';
+export type TagsPropertyProps = {
+    entity: BffCatalogEntity;
+};
+export declare function TagsProperty({ entity }: TagsPropertyProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TagsProperty = TagsProperty;
+const react_1 = __importDefault(require("react"));
+const TagsIcon_1 = require("../../../../icons/TagsIcon/TagsIcon");
+const theme_1 = require("../../../../index.js");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+function TagsProperty({ entity }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty" },
+        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(TagsIcon_1.TagsIcon, null),
+                "Tags"), content: react_1.default.createElement(theme_1.CatalogTagsWithTooltip, { itemsToShow: 8, items: entity.tags || [], tagProps: {
+                    style: {
+                        fontSize: 'var(--font-size-base)',
+                        borderRadius: 'var(--border-radius)',
+                    },
+                    borderless: true,
+                    color: 'grey',
+                } }) })));
+}
+//# sourceMappingURL=TagsProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty.d.ts

@@ -0,0 +1,6 @@
+import { JSX } from 'react';
+import { BffCatalogEntity } from '../../../../core/types';
+export type UserEmailPropertyProps = {
+    entity: BffCatalogEntity;
+};
+export declare function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Element;

package/lib/components/Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UserEmailProperty = UserEmailProperty;
+const react_1 = __importDefault(require("react"));
+const EmailIcon_1 = require("../../../../icons/EmailIcon/EmailIcon");
+const CatalogEntityPropertyCard_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard");
+const CatalogUserEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogUserEntityCell");
+function UserEmailProperty({ entity }) {
+    var _a;
+    const email = (_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.email;
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityProperties/UserEmailProperty" },
+        react_1.default.createElement(CatalogEntityPropertyCard_1.CatalogEntityPropertyCard, { header: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(EmailIcon_1.EmailIcon, null),
+                "Email"), content: react_1.default.createElement(CatalogUserEntityCell_1.Email, null, email), onClick: () => {
+                window.open(`mailto:${email}`, '_blank');
+            } })));
+}
+//# sourceMappingURL=UserEmailProperty.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+export type CatalogEntityDefaultRelationsProps = {
+    entity: BffCatalogEntity;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    relations: BffCatalogRelatedEntity[];
+    query: {
+        fetchNextPage: () => void;
+        isFetchingNextPage: boolean;
+    };
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    sortOption: SortOption | null;
+    setSortOption: (sortOption: SortOption | null) => void;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+    shouldShowLoadMore: boolean;
+};
+export declare function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityDefaultRelationsProps): JSX.Element;

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

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityDefaultRelations = CatalogEntityDefaultRelations;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
+const CatalogEntityCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityCell");
+const Tag_1 = require("../../../../components/Tag/Tag");
+const CatalogEntityRelationsTable_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable");
+const columns = [
+    {
+        key: 'entity',
+        title: 'Entity',
+        render: (entity) => react_1.default.createElement(CatalogEntityCell_1.CatalogEntityCell, { entity: entity }),
+        sortable: true,
+        sortKey: 'title',
+    },
+    {
+        key: 'type',
+        title: 'Type',
+        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, CatalogTableView_1.getEntityTagColor)(entity.type) }, entity.type)),
+        sortable: true,
+        sortKey: 'type',
+    },
+];
+function CatalogEntityDefaultRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations" },
+        react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: "Related entities", columns: columns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
+}
+const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
+  font-size: var(--font-size-base);
+  background-color: transparent;
+`;
+//# sourceMappingURL=CatalogEntityDefaultRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations.d.ts

@@ -0,0 +1,10 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { BffCatalogEntity, BffCatalogRelatedEntityList } from '../../../../core/types';
+export type CatalogEntityRelationsProps = {
+    entity: BffCatalogEntity;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    initialRelations: BffCatalogRelatedEntityList;
+};
+export declare function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, }: CatalogEntityRelationsProps): JSX.Element | null;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelations = CatalogEntityRelations;
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../../../core/hooks");
+const CatalogEntityDefaultRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations");
+const CatalogEntityTeamRelations_1 = require("../../../../components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations");
+const LOAD_MORE_THRESHOLD = 10;
+function CatalogEntityRelations({ entity, entitiesCatalogConfig, initialRelations, catalogConfig, }) {
+    const { useCatalogSort, useCatalogSearch, useFetchCatalogEntitiesRelations } = (0, hooks_1.useThemeHooks)();
+    const { sortOption, setSortOption, handleSortClick, isColumnSorted } = useCatalogSort();
+    const { searchQuery, setSearchQuery } = useCatalogSearch();
+    const { items: relations, query } = useFetchCatalogEntitiesRelations({ entityKey: entity.key, search: searchQuery, sort: sortOption !== null && sortOption !== void 0 ? sortOption : undefined }, initialRelations);
+    if (relations.length === 0) {
+        return null;
+    }
+    const shouldShowLoadMore = query.hasNextPage ||
+        (query.isPlaceholderData && relations && relations.length >= LOAD_MORE_THRESHOLD);
+    switch (entity.type) {
+        case 'team':
+            return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityTeamRelations" },
+                react_1.default.createElement(CatalogEntityTeamRelations_1.CatalogEntityTeamRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
+        default:
+            return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations/CatalogEntityDefaultRelations" },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { entity: entity, catalogConfig: catalogConfig, entitiesCatalogConfig: entitiesCatalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })));
+    }
+}
+//# sourceMappingURL=CatalogEntityRelations.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+import { CatalogColumn } from '../../../../components/Catalog/CatalogTableView/CatalogTableView';
+export type CatalogEntityRelationsTableProps = {
+    entity: BffCatalogEntity;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    relations: BffCatalogRelatedEntity[];
+    query: {
+        fetchNextPage: () => void;
+        isFetchingNextPage: boolean;
+    };
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    heading: string;
+    filter?: string;
+    columns: CatalogColumn<BffCatalogRelatedEntity>[];
+    sortOption: SortOption | null;
+    setSortOption: (sortOption: SortOption | null) => void;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+    shouldShowLoadMore: boolean;
+};
+export declare function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityRelationsTableProps): JSX.Element;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationsTable = CatalogEntityRelationsTable;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ArrowDownIcon_1 = require("../../../../icons/ArrowDownIcon/ArrowDownIcon");
+const LoadMore_1 = require("../../../../components/LoadMore/LoadMore");
+const CatalogTableView_1 = require("../../../../components/Catalog/CatalogTableView/CatalogTableView");
+const CatalogActionsRow_1 = require("../../../../components/Catalog/CatalogActionsRow");
+const CatalogHighlight_1 = require("../../../../components/Catalog/CatalogHighlight");
+function CatalogEntityRelationsTable({ entitiesCatalogConfig, catalogConfig, relations, query, searchQuery, setSearchQuery, heading, columns, setSortOption, sortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable" },
+        react_1.default.createElement(Heading, null, heading),
+        react_1.default.createElement(CatalogActionsRow_1.CatalogActionsRow, { searchQuery: searchQuery, setSearchQuery: setSearchQuery, sortOption: sortOption, setSortOption: setSortOption, style: { marginBottom: '12px' } }),
+        relations.length > 0 && (react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [searchQuery] },
+            react_1.default.createElement(CatalogTableView_1.CatalogTableView, { entities: relations, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns, setSortOption: setSortOption, currentSortOption: sortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted }))),
+        shouldShowLoadMore && (react_1.default.createElement(LoadMore_1.LoadMore, { icon: react_1.default.createElement(ArrowDownIcon_1.ArrowDownIcon, { size: "var(--catalog-load-more-icon-size)" }), onClick: query.fetchNextPage, disabled: query.isFetchingNextPage, blinking: query.isFetchingNextPage, label: query.isFetchingNextPage ? 'Loading...' : 'Load More' }))));
+}
+const Heading = styled_components_1.default.h2 `
+  margin: var(--spacing-base) 0;
+  font-size: var(--font-size-md);
+  color: var(--catalog-metadata-heading-color);
+`;
+//# sourceMappingURL=CatalogEntityRelationsTable.js.map

package/lib/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'react';
+import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
+import { BffCatalogEntity, BffCatalogRelatedEntity, SortOption } from '../../../../core/types';
+export type CatalogEntityTeamRelationsProps = {
+    entity: BffCatalogEntity;
+    catalogConfig: CatalogEntityConfig;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    relations: BffCatalogRelatedEntity[];
+    query: {
+        fetchNextPage: () => void;
+        isFetchingNextPage: boolean;
+        hasNextPage: boolean;
+    };
+    searchQuery: string;
+    setSearchQuery: (query: string) => void;
+    sortOption: SortOption | null;
+    setSortOption: (sortOption: SortOption | null) => void;
+    handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
+    isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
+    shouldShowLoadMore: boolean;
+};
+export declare function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }: CatalogEntityTeamRelationsProps): JSX.Element;

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

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityTeamRelations = CatalogEntityTeamRelations;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Tabs_1 = require("../../../../markdoc/components/Tabs/Tabs");
+const PeopleIcon_1 = require("../../../../icons/PeopleIcon/PeopleIcon");
+const EntityTypeIcon_1 = require("../../../../icons/EntityTypeIcon/EntityTypeIcon");
+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 teamColumns = [
+    {
+        key: 'entity',
+        title: 'User name',
+        render: (entity) => {
+            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',
+        sortable: true,
+        sortKey: 'title',
+    },
+    {
+        key: 'metadata',
+        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',
+    },
+    {
+        key: 'description',
+        title: 'Description',
+        render: (entity) => react_1.default.createElement(EntityDescription, null, entity.summary),
+        width: '3fr',
+    },
+];
+function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, setSearchQuery, entitiesCatalogConfig, catalogConfig, sortOption, setSortOption, handleSortClick, isColumnSorted, shouldShowLoadMore, }) {
+    return (react_1.default.createElement("div", { "data-component-name": "Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations" },
+        react_1.default.createElement(Tabs_1.Tabs, { forceReady: relations.length > 0, size: Tabs_1.TabsSize.MEDIUM },
+            react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null) },
+                react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, heading: "Members", filter: "type:user", columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })),
+            react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null) },
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore })))));
+}
+const TabItem = styled_components_1.default.div `
+  padding: 12px;
+`;
+const EntityDescription = styled_components_1.default.div `
+  font-size: var(--catalog-table-entity-summary-font-size);
+  line-height: var(--catalog-table-entity-summary-line-height);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+//# sourceMappingURL=CatalogEntityTeamRelations.js.map

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

@@ -0,0 +1,5 @@
+import { JSX } from 'react';
+export type CatalogEntityIconProps = {
+    entityType: string;
+};
+export declare function CatalogEntityIcon({ entityType }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityIcon = CatalogEntityIcon;
+const react_1 = __importDefault(require("react"));
+const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
+const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
+const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
+const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
+const iconColor = 'var(--catalog-entity-icon-color)';
+const entityIconMap = {
+    service: react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+    domain: react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor }),
+    team: react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor }),
+    user: react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor }),
+    'api-description': react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor }),
+};
+function CatalogEntityIcon({ entityType }) {
+    const key = entityType.toLowerCase();
+    switch (key) {
+        case 'service':
+            return entityIconMap.service;
+        case 'domain':
+            return entityIconMap.domain;
+        case 'team':
+            return entityIconMap.team;
+        case 'user':
+            return entityIconMap.user;
+        case 'api-description':
+            return entityIconMap['api-description'];
+        default:
+            const exhaustiveCheck = key;
+            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
+    }
+}
+//# sourceMappingURL=CatalogEntityIcon.js.map

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export type CatalogEntityTypeIconProps = {
+    entityType: string;
+};
+export declare function CatalogEntityTypeIcon({ entityType }: CatalogEntityTypeIconProps): React.JSX.Element;

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const CodeIcon_1 = require("../../icons/CodeIcon/CodeIcon");
+const GraphIcon_1 = require("../../icons/GraphIcon/GraphIcon");
+const PeopleIcon_1 = require("../../icons/PeopleIcon/PeopleIcon");
+const UserIcon_1 = require("../../icons/UserIcon/UserIcon");
+const getEntityIcon = (entityType) => {
+    const iconColor = 'var(--catalog-entity-icon-color)';
+    switch (entityType.toLowerCase()) {
+        case 'service':
+            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
+        case 'domain':
+            return react_1.default.createElement(GraphIcon_1.GraphIcon, { color: iconColor });
+        case 'team':
+            return react_1.default.createElement(PeopleIcon_1.PeopleIcon, { color: iconColor });
+        case 'user':
+            return react_1.default.createElement(UserIcon_1.UserIcon, { color: iconColor });
+        default:
+            return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: iconColor });
+    }
+};
+function CatalogEntityTypeIcon({ entityType }) {
+    return (react_1.default.createElement(IconContainer, { "data-component-name": "Catalog/CatalogEntityTypeIcon" }, getEntityIcon(entityType)));
+}
+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);
+  border-radius: var(--catalog-table-icon-border-radius);
+  background-color: var(--catalog-table-icon-bg-color);
+  flex-shrink: 0;
+  border: var(--catalog-table-icon-border-width) solid var(--catalog-table-icon-border-color);
+`;
+//# sourceMappingURL=CatalogEntityTypeIcon.js.map

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

@@ -0,0 +1,4 @@
+import React, { JSX } from 'react';
+export declare const HighlightContext: React.Context<string[]>;
+export type CatalogHighlightProps = React.PropsWithChildren;
+export declare function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null;

package/lib/components/Catalog/CatalogHighlight.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HighlightContext = void 0;
+exports.CatalogHighlight = CatalogHighlight;
+const react_1 = __importDefault(require("react"));
+const highlight_words_core_1 = require("highlight-words-core");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.HighlightContext = react_1.default.createContext([]);
+function CatalogHighlight(props) {
+    const { children } = props;
+    const searchWords = react_1.default.useContext(exports.HighlightContext);
+    if (!searchWords.length) {
+        return children ? react_1.default.createElement(react_1.default.Fragment, null, children) : null;
+    }
+    function highlight(str, childIdx = 0) {
+        const chunks = (0, highlight_words_core_1.findAll)({
+            searchWords,
+            textToHighlight: str,
+        });
+        return (react_1.default.createElement("span", { "data-component-name": "Catalog/CatalogHighlight", key: childIdx }, chunks.map((chunk, idx) => {
+            const { end, highlight, start } = chunk;
+            const text = str.substr(start, end - start);
+            if (highlight) {
+                return react_1.default.createElement(HighlightedText, { key: idx }, text);
+            }
+            else {
+                return text;
+            }
+        })));
+    }
+    if (typeof children === 'string') {
+        return highlight(children);
+    }
+    else if (Array.isArray(children)) {
+        return (react_1.default.createElement(react_1.default.Fragment, null, children.map((child, idx) => typeof children === 'string' ? highlight(child, idx) : child || null)));
+    }
+    else {
+        return react_1.default.createElement(react_1.default.Fragment, null, children);
+    }
+}
+const HighlightedText = styled_components_1.default.span `
+  background-color: var(--catalog-highlight-bg-color);
+  color: var(--catalog-highlight-text-color);
+`;
+//# sourceMappingURL=CatalogHighlight.js.map

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CatalogPageDescriptionProps = {
+    title: string;
+    titleTranslationKey?: string;
+    description: string;
+    descriptionTranslationKey?: string;
+    tag: number | string;
+};
+export declare function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }: CatalogPageDescriptionProps): React.JSX.Element;

package/lib/components/Catalog/CatalogPageDescription.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogPageDescription = CatalogPageDescription;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const H3_1 = require("../../components/Typography/H3");
+const CounterTag_1 = require("../Tags/CounterTag");
+function CatalogPageDescription({ title, titleTranslationKey, description, descriptionTranslationKey, tag, }) {
+    return (react_1.default.createElement(CatalogPageDescriptionWrapper, null,
+        react_1.default.createElement(CatalogTitleWrapper, null,
+            react_1.default.createElement(CatalogTitle, { "data-translation-key": titleTranslationKey }, title),
+            react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, tag)),
+        react_1.default.createElement(CatalogDescription, { "data-translation-key": descriptionTranslationKey }, description)));
+}
+const CatalogPageDescriptionWrapper = styled_components_1.default.div `
+  margin: var(--catalog-heading-margin);
+  display: var(--catalog-page-description-display-mobile);
+
+  @media screen and (min-width: ${utils_1.breakpoints.medium}) {
+    display: var(--catalog-page-description-display-desktop);
+  }
+`;
+const CatalogTitleWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+`;
+const CatalogTitle = (0, styled_components_1.default)(H3_1.H3) `
+  color: var(--catalog-title-text-color);
+  font-weight: var(--catalog-title-font-weight) !important;
+  font-size: var(--catalog-title-font-size);
+  margin: var(--catalog-title-margin);
+  margin-right: var(--catalog-title-spacing-right);
+`;
+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);
+  line-height: var(--catalog-description-line-height);
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+`;
+//# sourceMappingURL=CatalogPageDescription.js.map

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

@@ -0,0 +1,12 @@
+import { JSX } from 'react';
+import { Select } from '../../components/Select/Select';
+import { CatalogSwitcherItem, SortOption } from '../../core';
+export type CatalogSelectorProps = {
+    catalogSwitcherItems: CatalogSwitcherItem[];
+    setSearchQuery: (query: string) => void;
+    setSortOption: (option: SortOption | null) => void;
+};
+export declare function CatalogSelector({ catalogSwitcherItems, setSearchQuery, setSortOption, }: CatalogSelectorProps): JSX.Element;
+export declare const CatalogSelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CatalogSelectLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const CatalogSelect: import("styled-components").StyledComponent<typeof Select, any, {}, never>;