@redocly/theme 0.56.0-next.2 → 0.56.0-next.4

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { BffCatalogRelatedEntity } from '../../../core/types';
-export type CatalogEntityCellProps = {
-    entity: BffCatalogRelatedEntity;
+import { BffCatalogEntity } from '../../../core/types';
+type Entity = Pick<BffCatalogEntity, 'type' | 'title' | 'summary'>;
+export type CatalogEntityCellProps<T extends Entity> = {
+    entity: T;
 };
-export declare function CatalogEntityCell({ entity }: CatalogEntityCellProps): React.JSX.Element;
+export declare function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>): React.JSX.Element;
+export {};

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

@@ -7,11 +7,10 @@ exports.CatalogEntityCell = CatalogEntityCell;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CatalogHighlight_1 = require("../../../components/Catalog/CatalogHighlight");
-const CatalogEntityIcon_1 = require("../../../components/Catalog/CatalogEntityIcon");
+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(IconContainer, null,
-            react_1.default.createElement(CatalogEntityIcon_1.CatalogEntityIcon, { entityType: entity.type })),
+        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type, defaultColor: true }),
         react_1.default.createElement(EntityTitleContent, null,
             react_1.default.createElement(EntityTitle, null,
                 react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, entity.title)),
@@ -24,17 +23,6 @@ const EntityTitleCellWrapper = styled_components_1.default.div `
   gap: var(--catalog-table-title-cell-gap);
   max-width: 100%;
 `;
-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);
-`;
 const EntityTitleContent = styled_components_1.default.div `
   display: flex;
   flex-direction: column;

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

@@ -0,0 +1,3 @@
+import type { BffCatalogRelatedEntity } from '../../../core/types';
+export type CatalogEntityRelationCellProps = Pick<BffCatalogRelatedEntity, 'relationType' | 'relationRole'>;
+export declare function CatalogEntityRelationCell({ relationType, relationRole, }: CatalogEntityRelationCellProps): "partOf" | "hasParts" | "creates" | "createdBy" | "owns" | "ownedBy" | "implements" | "implementedBy" | "dependsOn" | "dependencyOf" | "uses" | "usedBy" | "produces" | "consumes" | "linksTo" | "supersedes" | "supersededBy" | "compatibleWith" | "extends" | "extendedBy" | "relatesTo" | "hasMember" | "memberOf" | "triggers" | "triggeredBy";

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

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CatalogEntityRelationCell = CatalogEntityRelationCell;
+const constants_1 = require("../../../core/constants");
+function CatalogEntityRelationCell({ relationType, relationRole, }) {
+    if (relationRole === 'source') {
+        return constants_1.reverseRelationMap[relationType];
+    }
+    return relationType;
+}
+//# sourceMappingURL=CatalogEntityRelationCell.js.map

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SortOption } from '../../../core/types';
-import { BaseEntity, CatalogColumn } from './CatalogTableView';
+import { BaseEntity, CatalogColumn } from '../../../components/Catalog/CatalogTableView/CatalogTableView';
 export type CatalogTableHeaderCellProps<T extends BaseEntity> = {
     column: CatalogColumn<T>;
     setSortOption: (sortOption: SortOption | null) => void;

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { EntityType, SortOption } from '../../../core/types';
+import { SortOption } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -27,5 +27,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const getEntityTagColor: (type: EntityType) => string;
 export declare const CatalogTableView: <T extends BaseEntity>({ entities, entitiesCatalogConfig, catalogConfig, columns, setSortOption, currentSortOption, handleSortClick, isColumnSorted, }: CatalogTableViewProps<T>) => React.JSX.Element;

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

@@ -3,34 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTableView = exports.getEntityTagColor = void 0;
+exports.CatalogTableView = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tag_1 = require("../../../components/Tag/Tag");
 const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
 const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
 const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
 const CatalogTableHeaderCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableHeaderCell");
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const CatalogTableViewRow_1 = require("../../../components/Catalog/CatalogTableView/CatalogTableViewRow");
-const getEntityTagColor = (type) => {
-    switch (type) {
-        case 'service':
-            return 'blue';
-        case 'domain':
-            return 'grass';
-        case 'team':
-            return 'purple';
-        case 'user':
-            return 'yellow';
-        case 'api-description':
-            return 'sky';
-        default:
-            const exhaustiveCheck = type;
-            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-    }
-};
-exports.getEntityTagColor = getEntityTagColor;
+const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
 const baseColumns = [
     {
         key: 'entity',
@@ -44,7 +26,7 @@ const baseColumns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, exports.getEntityTagColor)(entity.type) }, entity.type)),
+        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
         width: '2fr',
         minWidth: '120px',
         sortable: true,
@@ -84,11 +66,6 @@ const CatalogTableView = ({ entities, entitiesCatalogConfig, catalogConfig, colu
         react_1.default.createElement("div", null, entities.map((entity) => (react_1.default.createElement(CatalogTableViewRow_1.CatalogTableViewRow, { key: entity.id, entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, columns: columns }))))));
 };
 exports.CatalogTableView = CatalogTableView;
-const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  font-size: var(--font-size-base);
-  background-color: transparent;
-  text-transform: lowercase;
-`;
 const CatalogTableWrapper = styled_components_1.default.div `
   width: 100%;
   border-bottom: 1px solid var(--catalog-table-border-color);

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

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { EntityType } from '../../../core/types';
 export type BaseEntity = {
     id: string;
     key: string;
@@ -23,5 +22,4 @@ export type CatalogColumn<T> = {
     sortable?: boolean;
     sortKey?: string;
 };
-export declare const getEntityTagColor: (type: EntityType) => string;
 export declare const CatalogTableViewRow: <T extends BaseEntity>({ entity, entitiesCatalogConfig, catalogConfig, columns, }: CatalogTableViewRowProps<T>) => React.JSX.Element;

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

@@ -3,33 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogTableViewRow = exports.getEntityTagColor = void 0;
+exports.CatalogTableViewRow = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Tag_1 = require("../../../components/Tag/Tag");
 const CatalogOwnersCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogOwnersCell");
 const CatalogDomainsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogDomainsCell");
 const CatalogEntityCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogEntityCell");
 const CatalogTagsCell_1 = require("../../../components/Catalog/CatalogTableView/CatalogTagsCell");
 const useCatalogTableViewRow_1 = require("../../../core/hooks/catalog/useCatalogTableViewRow");
-const getEntityTagColor = (type) => {
-    switch (type) {
-        case 'service':
-            return 'blue';
-        case 'domain':
-            return 'grass';
-        case 'team':
-            return 'purple';
-        case 'user':
-            return 'yellow';
-        case 'api-description':
-            return 'sky';
-        default:
-            const exhaustiveCheck = type;
-            throw new Error(`Unhandled entity type: ${exhaustiveCheck}`);
-    }
-};
-exports.getEntityTagColor = getEntityTagColor;
+const CatalogEntityTypeTag_1 = require("../../../components/Catalog/CatalogEntityTypeTag");
 const baseColumns = [
     {
         key: 'entity',
@@ -43,7 +25,7 @@ const baseColumns = [
     {
         key: 'type',
         title: 'Type',
-        render: (entity) => (react_1.default.createElement(EntityTypeTag, { color: (0, exports.getEntityTagColor)(entity.type) }, entity.type)),
+        render: (entity) => react_1.default.createElement(CatalogEntityTypeTag_1.CatalogEntityTypeTag, { entityType: entity.type }),
         width: '2fr',
         minWidth: '120px',
         sortable: true,
@@ -90,11 +72,6 @@ const CatalogTableViewRow = ({ entity, entitiesCatalogConfig, catalogConfig, col
     return (react_1.default.createElement(TableRow, { key: entity.id, columnsWidths: columns.map((column) => column.width || '1fr'), columnsMinWidths: columns.map((column) => column.minWidth || 'auto'), onClick: () => handleRowClick() }, columns.map((column) => (react_1.default.createElement(TableCell, { key: column.key, className: column.key === 'entity' ? '' : 'tooltip-cell-container' }, column.render(entity))))));
 };
 exports.CatalogTableViewRow = CatalogTableViewRow;
-const EntityTypeTag = (0, styled_components_1.default)(Tag_1.Tag) `
-  font-size: var(--font-size-base);
-  background-color: transparent;
-  text-transform: lowercase;
-`;
 const TableRow = styled_components_1.default.div `
   display: grid;
   grid-template-columns: ${({ columnsWidths, columnsMinWidths }) => columnsWidths
@@ -123,5 +100,7 @@ const TableCell = styled_components_1.default.div `
   &.tooltip-cell-container {
     overflow: visible;
   }
+
+  height: 52px;
 `;
 //# sourceMappingURL=CatalogTableViewRow.js.map

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

@@ -1,5 +1,5 @@
 import { JSX } from 'react';
-import { TagProps } from '../Tag/Tag';
+import { TagProps } from '../../components/Tag/Tag';
 export type CatalogTagsWithTooltipProps = {
     items: string[];
     itemsToShow?: number;

package/lib/components/Catalog/CatalogTagsWithTooltip.js

@@ -7,9 +7,9 @@ exports.CatalogTagsWithTooltip = CatalogTagsWithTooltip;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const constants_1 = require("../../core/constants");
-const Tag_1 = require("../Tag/Tag");
-const CatalogHighlight_1 = require("./CatalogHighlight");
-const Tooltip_1 = require("../Tooltip/Tooltip");
+const Tag_1 = require("../../components/Tag/Tag");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
 function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true, tagProps, }) {
     if (!items || items.length === 0) {
         if (showPlaceholder) {
@@ -19,9 +19,8 @@ function CatalogTagsWithTooltip({ items, itemsToShow = 1, showPlaceholder = true
         return null;
     }
     if (items.length <= itemsToShow) {
-        return (react_1.default.createElement(Tooltip_1.TooltipComponent, { tip: items.join(', '), placement: "bottom", className: "catalog", width: "400px", disabled: items.join(', ').length <= constants_1.CATALOG_TAG_MAX_LENGTH },
-            react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
-                react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item)))))));
+        return (react_1.default.createElement(CatalogTagsWrapper, { "data-component-name": "Catalog/CatalogTagsWithTooltip" }, items.map((item, index) => (react_1.default.createElement(Tag_1.Tag, Object.assign({ key: `${item}-${index}` }, tagProps, { maxLength: constants_1.CATALOG_TAG_MAX_LENGTH }),
+            react_1.default.createElement(CatalogHighlight_1.CatalogHighlight, null, item))))));
     }
     const displayedItems = items.slice(0, itemsToShow);
     const remainingCount = items.length - itemsToShow;

package/lib/components/Catalog/variables.js

@@ -101,6 +101,36 @@ exports.catalog = (0, styled_components_1.css) `
     * @tokens Catalog entity icon
     */
   --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-border-color: var(--border-color-secondary);
+  --catalog-entity-bg-color: var(--bg-color-tonal);
+
+  --catalog-entity-icon-color-service: var(--color-blue-6);
+  --catalog-entity-border-color-service: var(--color-blueberry-3);
+  --catalog-entity-bg-color-service: var(--color-blue-1);
+
+  --catalog-entity-icon-color-domain: var(--color-grass-8);
+  --catalog-entity-border-color-domain: var(--color-grass-4);
+  --catalog-entity-bg-color-domain: var(--color-grass-1);
+
+  --catalog-entity-icon-color-team: var(--color-purple-7);
+  --catalog-entity-border-color-team: var(--color-purple-4);
+  --catalog-entity-bg-color-team: var(--color-purple-1);
+
+  --catalog-entity-icon-color-user: var(--color-orange-7);
+  --catalog-entity-border-color-user: var(--color-orange-4);
+  --catalog-entity-bg-color-user: var(--color-orange-1);
+
+  --catalog-entity-icon-color-api-description: var(--color-sky-8);
+  --catalog-entity-border-color-api-description: var(--color-sky-5);
+  --catalog-entity-bg-color-api-description: var(--color-sky-1);
+
+  --catalog-entity-icon-color-data-schema: var(--color-carrot-8);
+  --catalog-entity-border-color-data-schema: var(--color-carrot-6);
+  --catalog-entity-bg-color-data-schema: var(--color-carrot-1);
+
+  --catalog-entity-icon-color-api-operation: var(--color-raspberry-7);
+  --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
+  --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
   /**
     * @tokens Catalog tags
@@ -256,9 +286,9 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-table-border-color: var(--border-color-primary);
   --catalog-table-header-bg-color: var(--bg-color-secondary);
-  --catalog-table-header-font-weight: var(--font-weight-semibold);
-  --catalog-table-header-cell-padding: 5px 8px;
-  --catalog-table-cell-padding: 5px 8px;
+  --catalog-table-header-font-weight: var(--font-weight-medium);
+  --catalog-table-header-cell-padding: 4px 8px;
+  --catalog-table-cell-padding: 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);
@@ -276,8 +306,8 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog table icon
     */
-  --catalog-table-icon-width: 30px;
-  --catalog-table-icon-height: 30px;
+  --catalog-table-icon-width: 32px;
+  --catalog-table-icon-height: 32px;
   --catalog-table-icon-border-radius: 4px;
   --catalog-table-icon-bg-color: var(--bg-color-tonal);
   --catalog-table-icon-border-color: var(--border-color-secondary);
@@ -288,7 +318,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-table-entity-title-font-size: var(--catalog-card-title-font-size);
   --catalog-table-entity-title-line-height: var(--line-height-lg);
-  --catalog-table-entity-title-font-weight: var(--font-weight-semibold);
+  --catalog-table-entity-title-font-weight: var(--font-weight-medium);
 
   /**
     * @tokens Catalog table description
@@ -347,7 +377,6 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-empty-state-font-size: var(--font-size-base);
   --catalog-empty-state-line-height: var(--line-height-base);
 
-
   --catalog-avatar-bg-color: #ededf2;
   // @tokens End
 `;

package/lib/components/Menu/variables.js

@@ -129,7 +129,9 @@ exports.mobileMenu = (0, styled_components_1.css) `
   /**
     * @tokens Mobile Menu
     * */
+  /* Fallback for older browsers. dvh accounts for dynamic UI elements like mobile address bars */
   --menu-mobile-height: calc(100vh - var(--navbar-height));
+  --menu-mobile-height: calc(100dvh - var(--navbar-height));
   --menu-mobile-width: 100%;
   --menu-mobile-z-index: var(--z-index-raised);
   --menu-mobile-left: 0;

package/lib/components/Tag/Tag.d.ts

@@ -26,7 +26,8 @@ export type TagProps = {
     onKeyDown?: (event: React.KeyboardEvent) => void;
     onClose?: (event: React.MouseEvent) => void;
     maxLength?: number;
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
 };
-export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, ...otherProps }: TagProps): JSX.Element;
+export declare function Tag({ children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor, maxLength, textTransform, ...otherProps }: TagProps): JSX.Element;
 export declare const ContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/lib/components/Tag/Tag.js

@@ -21,7 +21,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const CloseIcon_1 = require("../../icons/CloseIcon/CloseIcon");
 const CheckmarkFilledIcon_1 = require("../../icons/CheckmarkFilledIcon/CheckmarkFilledIcon");
 function Tag(_a) {
-    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength"]);
+    var { children, color, icon, active, closable, tabIndex, onClick, onKeyDown, onClose, size, borderless, withStatusDot, statusDotColor = 'var(--tag-status-dot-color-default)', maxLength, textTransform } = _a, otherProps = __rest(_a, ["children", "color", "icon", "active", "closable", "tabIndex", "onClick", "onKeyDown", "onClose", "size", "borderless", "withStatusDot", "statusDotColor", "maxLength", "textTransform"]);
     const truncateText = (text, maxLen) => {
         if (text.length <= maxLen)
             return text;
@@ -74,7 +74,7 @@ function Tag(_a) {
         }
         return children;
     };
-    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable }, otherProps),
+    return (react_1.default.createElement(TagWrapper, Object.assign({ tabIndex: tabIndex, "data-component-name": "Tag/Tag", borderless: borderless, color: color, size: size, onClick: onClick, onKeyDown: onKeyDown, hasCloseButton: closable, textTransform: textTransform }, otherProps),
         withStatusDot ? react_1.default.createElement(StatusDot, { color: statusDotColor }) : icon ? icon : null,
         react_1.default.createElement(exports.ContentWrapper, null, renderChildren()),
         closable && (react_1.default.createElement(CloseButton, { onClick: (event) => {
@@ -128,7 +128,7 @@ const TagWrapper = styled_components_1.default.div.attrs(({ className, color, si
   font-weight: var(--tag-font-weight);
   line-height: var(--tag-line-height);
   box-shadow: var(--tag-box-shadow);
-  text-transform: var(--tag-text-transform);
+  ${({ textTransform }) => `text-transform: ${textTransform ? `${textTransform}` : 'var(--tag-text-transform)'};`}
 
   color: var(--tag-color);
   background-color: var(--tag-bg-color);

package/lib/components/Tag/variables.js

@@ -183,6 +183,20 @@ exports.tag = (0, styled_components_1.css) `
     --tag-close-button-bg-color-hover: var(--color-sky-2); // @presenter Color
   }
 
+  .tag-raspberry {
+    --tag-color: var(--color-raspberry-7); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-raspberry-3); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-raspberry-1); // @presenter Color
+  }
+
+  .tag-carrot {
+    --tag-color: var(--color-carrot-8); // @presenter Color
+    --tag-bg-color: transparent; // @presenter Color
+    --tag-border-color: var(--color-carrot-6); // @presenter Color
+    --tag-close-button-bg-color-hover: var(--color-carrot-3); // @presenter Color
+  }
+
   /**
     * @tokens Tag http
     */

package/lib/components/Tags/CounterTag.d.ts

@@ -2,4 +2,4 @@ import { Tag } from '../../components/Tag/Tag';
 export declare const CounterTag: import("styled-components").StyledComponent<typeof Tag, any, {
     className: "tag-counter";
     'data-component-name': string;
-}, "className" | "data-component-name">;
+}, "data-component-name" | "className">;

package/lib/components/Tags/HttpTag.d.ts

@@ -2,4 +2,4 @@ import { Tag } from '../../components/Tag/Tag';
 export declare const HttpTag: import("styled-components").StyledComponent<typeof Tag, any, {
     className: "tag-http";
     'data-component-name': string;
-}, "className" | "data-component-name">;
+}, "data-component-name" | "className">;

package/lib/core/constants/catalog.d.ts

@@ -1 +1,4 @@
+import type { EntityRelationType } from '../types/catalog';
 export declare const CATALOG_TAG_MAX_LENGTH = 15;
+export declare const ENTITY_RELATION_TYPES: readonly ["partOf", "hasParts", "creates", "createdBy", "owns", "ownedBy", "implements", "implementedBy", "dependsOn", "dependencyOf", "uses", "usedBy", "produces", "consumes", "linksTo", "supersedes", "supersededBy", "compatibleWith", "extends", "extendedBy", "relatesTo", "hasMember", "memberOf", "triggers", "triggeredBy"];
+export declare const reverseRelationMap: Record<EntityRelationType, EntityRelationType>;

package/lib/core/constants/catalog.js

@@ -1,5 +1,59 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CATALOG_TAG_MAX_LENGTH = void 0;
+exports.reverseRelationMap = exports.ENTITY_RELATION_TYPES = exports.CATALOG_TAG_MAX_LENGTH = void 0;
 exports.CATALOG_TAG_MAX_LENGTH = 15;
+exports.ENTITY_RELATION_TYPES = [
+    'partOf',
+    'hasParts',
+    'creates',
+    'createdBy',
+    'owns',
+    'ownedBy',
+    'implements',
+    'implementedBy',
+    'dependsOn',
+    'dependencyOf',
+    'uses',
+    'usedBy',
+    'produces',
+    'consumes',
+    'linksTo',
+    'supersedes',
+    'supersededBy',
+    'compatibleWith',
+    'extends',
+    'extendedBy',
+    'relatesTo',
+    'hasMember',
+    'memberOf',
+    'triggers',
+    'triggeredBy',
+];
+exports.reverseRelationMap = {
+    partOf: 'hasParts',
+    hasParts: 'partOf',
+    creates: 'createdBy',
+    createdBy: 'creates',
+    owns: 'ownedBy',
+    ownedBy: 'owns',
+    implements: 'implementedBy',
+    implementedBy: 'implements',
+    dependsOn: 'dependencyOf',
+    dependencyOf: 'dependsOn',
+    uses: 'usedBy',
+    usedBy: 'uses',
+    produces: 'consumes',
+    consumes: 'produces',
+    linksTo: 'linksTo',
+    supersedes: 'supersededBy',
+    supersededBy: 'supersedes',
+    compatibleWith: 'compatibleWith',
+    extends: 'extendedBy',
+    extendedBy: 'extends',
+    relatesTo: 'relatesTo',
+    hasMember: 'memberOf',
+    memberOf: 'hasMember',
+    triggers: 'triggeredBy',
+    triggeredBy: 'triggers',
+};
 //# sourceMappingURL=catalog.js.map

package/lib/core/constants/index.d.ts

@@ -1,5 +1,5 @@
-export * from '../../core/constants/common';
-export * from '../../core/constants/environments';
-export * from '../../core/constants/code-walkthrough';
-export * from '../../core/constants/search';
-export * from '../../core/constants/catalog';
+export * from './common';
+export * from './environments';
+export * from './code-walkthrough';
+export * from './search';
+export * from './catalog';

package/lib/core/constants/index.js

@@ -14,9 +14,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../core/constants/common"), exports);
-__exportStar(require("../../core/constants/environments"), exports);
-__exportStar(require("../../core/constants/code-walkthrough"), exports);
-__exportStar(require("../../core/constants/search"), exports);
-__exportStar(require("../../core/constants/catalog"), exports);
+__exportStar(require("./common"), exports);
+__exportStar(require("./environments"), exports);
+__exportStar(require("./code-walkthrough"), exports);
+__exportStar(require("./search"), exports);
+__exportStar(require("./catalog"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/search.d.ts

@@ -1,4 +1,4 @@
-import type { AiSearchErrorConfig } from '../../core/types';
+import type { AiSearchErrorConfig } from '../types/search';
 export declare enum AiSearchError {
     Unauthorized = "ai_search_unauthorized",
     Forbidden = "ai_search_forbidden",

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.d.ts

@@ -1,2 +1,2 @@
-import type { WalkthroughControlsState } from '../../../core/hooks';
+import type { WalkthroughControlsState } from '../../hooks/code-walkthrough/use-code-walkthrough-controls';
 export declare const CodeWalkthroughControlsStateContext: import("react").Context<WalkthroughControlsState>;

package/lib/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.d.ts

@@ -1,2 +1,2 @@
-import type { WalkthroughStepsState } from '../../../core/types';
+import type { WalkthroughStepsState } from '../../types/code-walkthrough';
 export declare const CodeWalkthroughStepsContext: import("react").Context<WalkthroughStepsState>;

package/lib/core/contexts/ThemeDataContext.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { ThemeHooks } from '../../core/types';
+import type { ThemeHooks } from '../types/hooks';
 import type { LinkProps } from '../../components/Link/Link';
 import type { UiAccessibleConfig } from '../../config';
 export interface ThemeDataTransferObject {

package/lib/core/contexts/index.d.ts

@@ -1,3 +1,3 @@
-export * from '../../core/contexts/ThemeDataContext';
-export * from '../../core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
-export * from '../../core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext';
+export * from './ThemeDataContext';
+export * from './CodeWalkthrough/CodeWalkthroughControlsContext';
+export * from './CodeWalkthrough/CodeWalkthroughStepsContext';

package/lib/core/contexts/index.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../core/contexts/ThemeDataContext"), exports);
-__exportStar(require("../../core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
-__exportStar(require("../../core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
+__exportStar(require("./ThemeDataContext"), exports);
+__exportStar(require("./CodeWalkthrough/CodeWalkthroughControlsContext"), exports);
+__exportStar(require("./CodeWalkthrough/CodeWalkthroughStepsContext"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hoc/index.d.ts

@@ -1 +1 @@
-export * from '../../core/hoc/typedMemo';
+export * from './typedMemo';

package/lib/core/hoc/index.js

@@ -14,5 +14,5 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("../../core/hoc/typedMemo"), exports);
+__exportStar(require("./typedMemo"), exports);
 //# sourceMappingURL=index.js.map