@redocly/theme 0.58.0-next.0 → 0.58.0-next.10

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

@@ -13,7 +13,6 @@ 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 CatalogEntityRelationCell_1 = require("../../../../components/Catalog/CatalogTableView/CatalogEntityRelationCell");
 const teamColumns = [
     {
         key: 'entity',
@@ -32,11 +31,6 @@ const teamColumns = [
         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: 'relationType',
-        title: 'Relations',
-        render: (entity) => (react_1.default.createElement(CatalogEntityRelationCell_1.CatalogEntityRelationCell, { relationType: entity.relationType, relationRole: entity.relationRole })),
-    },
     {
         key: 'description',
         title: 'Description',
@@ -50,10 +44,10 @@ function CatalogEntityTeamRelations({ entity, relations, query, searchQuery, set
             react_1.default.createElement(TabItem, { label: "Members", icon: react_1.default.createElement(PeopleIcon_1.PeopleIcon, null), onClick: () => setFilter('type:user') },
                 react_1.default.createElement(CatalogEntityRelationsTable_1.CatalogEntityRelationsTable, { key: "members-table", entity: entity, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, columns: teamColumns, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, listType: "team" })),
             react_1.default.createElement(TabItem, { label: "Related entities", icon: react_1.default.createElement(EntityTypeIcon_1.EntityTypeIcon, null), onClick: () => setFilter('-type:user') },
-                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, setFilter: setFilter, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
+                react_1.default.createElement(CatalogEntityDefaultRelations_1.CatalogEntityDefaultRelations, { key: "related-entities-table", entity: entity, relations: relations, query: query, searchQuery: searchQuery, setSearchQuery: setSearchQuery, entitiesCatalogConfig: entitiesCatalogConfig, catalogConfig: catalogConfig, sortOption: sortOption, setSortOption: setSortOption, handleSortClick: handleSortClick, isColumnSorted: isColumnSorted, shouldShowLoadMore: shouldShowLoadMore, shouldShowHeading: false })))));
 }
 const TabItem = styled_components_1.default.div `
-  padding: 12px;
+  padding: var(--spacing-sm);
 `;
 const EntityDescription = styled_components_1.default.div `
   font-size: var(--catalog-table-entity-summary-font-size);

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

@@ -1,6 +1,13 @@
 import React from 'react';
-import { BffCatalogEntity } from '../../../core/types';
+import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../../core/types';
 export type CatalogEntitySchemaProps = {
     entity: BffCatalogEntity;
+    relatedEntity: BffCatalogRelatedEntity | null;
+    RedocSchema: React.ComponentType<any>;
+    StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
 };
-export declare function CatalogEntitySchema({ entity }: CatalogEntitySchemaProps): React.JSX.Element | null;
+export declare function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }: CatalogEntitySchemaProps): React.JSX.Element;

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

@@ -1,14 +1,26 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -17,39 +29,63 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogEntitySchema = CatalogEntitySchema;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
+const Sampler = __importStar(require("openapi-sampler"));
 const hooks_1 = require("../../../core/hooks");
+const useCatalogEntitySchema_1 = require("../../../core/hooks/catalog/useCatalogEntitySchema");
 const JsonViewer_1 = require("../../../components/JsonViewer/JsonViewer");
-function CatalogEntitySchema({ entity }) {
+const CopyButton_1 = require("../../../components/Buttons/CopyButton");
+function CatalogEntitySchema({ entity, relatedEntity, RedocSchema, StoreProvider, GraphqlTypeRenderer, }) {
+    var _a, _b;
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const _a = entity.metadata || {}, { schema } = _a, metadataToShow = __rest(_a, ["schema"]);
-    const metadata = Object.entries(metadataToShow);
-    if (!metadata.length) {
-        return null;
-    }
-    let parsedSchema;
-    try {
-        parsedSchema = JSON.parse(schema);
-    }
-    catch (error) {
-        return null;
-    }
+    const { definition, parsedSchema, rawSchema } = (0, useCatalogEntitySchema_1.useCatalogEntitySchema)({ entity, relatedEntity });
+    const isGraphql = ((_a = entity.metadata) === null || _a === void 0 ? void 0 : _a.specType) === 'graphql';
+    const graphqlSDL = (_b = entity === null || entity === void 0 ? void 0 : entity.metadata) === null || _b === void 0 ? void 0 : _b.sdl;
     return (react_1.default.createElement(MetadataWrapper, { "data-component-name": "Catalog/CatalogEntity/CatalogEntityMetadata" },
-        react_1.default.createElement(Heading, null, translate('catalog.entity.metadata.title')),
-        react_1.default.createElement(JsonViewer_1.JsonViewer, { data: parsedSchema, expandLevel: 3, title: "JSON" })));
+        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" }))),
+        react_1.default.createElement(SplitViewWrapper, null,
+            react_1.default.createElement(SchemaContentWrapper, null, isGraphql && graphqlSDL && GraphqlTypeRenderer ? (react_1.default.createElement(GraphqlTypeRenderer, { sdl: graphqlSDL, typeName: entity.title })) : (react_1.default.createElement(StoreProvider, { definition: definition },
+                react_1.default.createElement(RedocSchema, { schema: parsedSchema })))),
+            !isGraphql && (react_1.default.createElement(SchemaSampleWrapper, null,
+                react_1.default.createElement(JsonViewer_1.JsonViewer, { data: Sampler.sample(Object.assign({}, parsedSchema)), expandLevel: 3, hideHeader: false }))))));
 }
 const MetadataWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-xs);
   border-radius: var(--border-radius);
   background-color: var(--catalog-metadata-bg-color);
-  transition: all 0.2s ease-in-out;
-  margin: var(--spacing-lg) 0;
+  margin-top: var(--spacing-base);
+  margin-bottom: var(--spacing-xs);
+`;
+const SchemaContentWrapper = styled_components_1.default.div `
+  flex: 1;
+  & > div > div {
+    padding-left: 0;
+    padding-top: 0;
+  }
+`;
+const HeaderWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-sm);
 `;
 const Heading = styled_components_1.default.h2 `
-  margin-bottom: var(--spacing-base);
-  margin-top: 0;
   font-size: var(--catalog-metadata-heading-size);
 `;
+const SplitViewWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-base);
+`;
+const SchemaSampleWrapper = styled_components_1.default.div `
+  flex: 1;
+  position: sticky;
+  top: calc(var(--navbar-height) + var(--spacing-md));
+  align-self: flex-start;
+  padding-top: var(--spacing-sm);
+`;
 //# sourceMappingURL=CatalogEntitySchema.js.map

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

@@ -1,7 +1,9 @@
 import { JSX } from 'react';
+import { UiAccessibleConfig } from '@redocly/config';
 export type CatalogEntityIconProps = {
     entityType: string;
     defaultColor?: boolean;
     forceColor?: string;
+    entitiesCatalogConfig?: UiAccessibleConfig['entitiesCatalog'];
 };
 export declare function CatalogEntityIcon({ entityType, defaultColor, forceColor, }: CatalogEntityIconProps): JSX.Element;

package/lib/components/Catalog/CatalogEntityIcon.js

@@ -9,24 +9,41 @@ 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 NetworkIcon_1 = require("../../icons/NetworkIcon/NetworkIcon");
 const MoleculesIcon_1 = require("../../icons/MoleculesIcon/MoleculesIcon");
+const HierarchyIcon_1 = require("../../icons/HierarchyIcon/HierarchyIcon");
+const Image_1 = require("../../components/Image/Image");
+const core_1 = require("../../core");
+const NoteIcon_1 = require("../../icons/NoteIcon/NoteIcon");
 const getIconColor = (entityType) => `var(--catalog-entity-icon-color-${entityType})`;
-const getEntityIcon = ({ entityType, defaultColor, forceColor }) => {
-    const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
-    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 }),
-        'data-schema': react_1.default.createElement(NetworkIcon_1.NetworkIcon, { color: iconColor }),
-        'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
-    };
-    return entityIconMap[entityType];
+const getEntityIcon = ({ entityType, defaultColor, forceColor, entitiesCatalogConfig, }) => {
+    var _a, _b;
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        const iconColor = forceColor !== null && forceColor !== void 0 ? forceColor : (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType));
+        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(NoteIcon_1.NoteIcon, { color: iconColor }),
+            'data-schema': react_1.default.createElement(HierarchyIcon_1.HierarchyIcon, { color: iconColor }),
+            'api-operation': react_1.default.createElement(MoleculesIcon_1.MoleculesIcon, { color: iconColor }),
+        };
+        return entityIconMap[entityType];
+    }
+    const iconConfig = (_b = (_a = entitiesCatalogConfig === null || entitiesCatalogConfig === void 0 ? void 0 : entitiesCatalogConfig.entityTypes) === null || _a === void 0 ? void 0 : _a[entityType]) === null || _b === void 0 ? void 0 : _b.icon;
+    if ((iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src) || (iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet)) {
+        return (react_1.default.createElement(Image_1.Image, { src: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.src, srcSet: iconConfig === null || iconConfig === void 0 ? void 0 : iconConfig.srcSet, alt: `${entityType} icon`, width: "16", height: "16" }));
+    }
+    return react_1.default.createElement(CodeIcon_1.CodeIcon, { color: "var(--catalog-entity-icon-color)" }); // @TODO: add default icon
 };
 function CatalogEntityIcon({ entityType, defaultColor = false, forceColor, }) {
-    const icon = getEntityIcon({ entityType, defaultColor, forceColor });
+    const themeConfig = (0, core_1.useThemeConfig)();
+    const icon = getEntityIcon({
+        entityType,
+        defaultColor,
+        forceColor,
+        entitiesCatalogConfig: themeConfig.entitiesCatalog,
+    });
     if (!icon) {
         throw new Error(`Unhandled entity type: ${entityType}`);
     }

package/lib/components/Catalog/CatalogEntityTypeIcon.js

@@ -7,6 +7,7 @@ exports.CatalogEntityTypeIcon = CatalogEntityTypeIcon;
 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 })));
@@ -18,13 +19,25 @@ const IconContainer = styled_components_1.default.div `
   width: var(--catalog-table-icon-width);
   height: var(--catalog-table-icon-height);
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-bg-color)'
-    : `var(--catalog-entity-bg-color-${entityType})`};
+  background-color: ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+        return 'var(--catalog-entity-bg-color)';
+    }
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-bg-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-bg-color-custom)';
+}};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColor, entityType }) => defaultColor
-    ? 'var(--catalog-entity-border-color)'
-    : `var(--catalog-entity-border-color-${entityType})`};
+    ${({ defaultColor, entityType }) => {
+    if (defaultColor) {
+        return 'var(--catalog-entity-border-color)';
+    }
+    if (core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-border-color-${entityType})`;
+    }
+    return 'var(--catalog-entity-border-color-custom)';
+}};
 `;
 //# sourceMappingURL=CatalogEntityTypeIcon.js.map

package/lib/components/Catalog/CatalogEntityTypeTag.js

@@ -9,6 +9,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const Tag_1 = require("../../components/Tag/Tag");
 const CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const core_1 = require("../../core");
 const entityTagColorMap = {
     service: 'blue',
     domain: 'grass',
@@ -33,8 +34,13 @@ function CatalogEntityTypeTag({ entityType }) {
 const EntityTypeTagWrapper = (0, styled_components_1.default)(Tag_1.Tag) `
   font-size: var(--font-size-base);
   background-color: transparent;
-  text-transform: lowercase;
-  border: 1px solid ${({ entityType }) => `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+  text-transform: none;
+  border: 1px solid
+    ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ? 'var(--catalog-entity-border-color-custom)'
+    : `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) => !core_1.PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ? 'var(--catalog-entity-icon-color-custom)'
+    : `var(--catalog-entity-icon-color-${entityType})`};
 `;
 //# sourceMappingURL=CatalogEntityTypeTag.js.map

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

@@ -1,6 +1,6 @@
 import { JSX } from 'react';
 import { Select } from '../../components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '../../core/types/catalog';
+import { CatalogSwitcherItem, SortOption } from '../../core/types';
 export type CatalogSelectorProps = {
     catalogSwitcherItems: CatalogSwitcherItem[];
     setSearchQuery: (query: string) => void;

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, defaultColor: true }),
+        react_1.default.createElement(CatalogEntityTypeIcon_1.CatalogEntityTypeIcon, { entityType: entity.type }),
         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)),

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

@@ -1,3 +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";
+export declare function CatalogEntityRelationCell({ relationType, relationRole, }: CatalogEntityRelationCellProps): string;

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

@@ -4,8 +4,8 @@ exports.CatalogEntityRelationCell = CatalogEntityRelationCell;
 const constants_1 = require("../../../core/constants");
 function CatalogEntityRelationCell({ relationType, relationRole, }) {
     if (relationRole === 'source') {
-        return constants_1.reverseRelationMap[relationType];
+        return constants_1.relationTypeMap[constants_1.reverseRelationMap[relationType]];
     }
-    return relationType;
+    return constants_1.relationTypeMap[relationType];
 }
 //# sourceMappingURL=CatalogEntityRelationCell.js.map

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CatalogViewMode } from '../../core/types/catalog';
+import { CatalogViewMode } from '../../core/types';
 export type CatalogViewModeToggleProps = {
     viewMode: CatalogViewMode;
     onViewModeChange: (mode: CatalogViewMode) => void;

package/lib/components/Catalog/variables.js

@@ -15,7 +15,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-filter-padding-vertical-mobile: 0;
   --catalog-filter-padding-horizontal-mobile: var(--spacing-base);
 
-  --catalog-heading-margin: 0 0 var(--spacing-xl) 0;
+  --catalog-heading-margin: 0 0 var(--spacing-sm) 0;
   --catalog-sidebar-width: 285px;
 
   /**
@@ -132,10 +132,14 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-entity-border-color-api-operation: var(--color-raspberry-3);
   --catalog-entity-bg-color-api-operation: var(--color-raspberry-1);
 
+  --catalog-entity-icon-color-custom: var(--color-persian-green-8);
+  --catalog-entity-border-color-custom: var(--color-persian-green-5);
+  --catalog-entity-bg-color-custom: var(--color-persian-green-1);
+
   /**
     * @tokens Catalog tags
     */
-  --catalog-tags-wrapper-gap: 4px;
+  --catalog-tags-wrapper-gap: var(--spacing-xs) calc(var(--spacing-xs) - 5px);
   --catalog-tags-more-button-font-size: var(--font-size-base);
   --catalog-tags-more-button-margin-left: 4px;
   --catalog-tags-placeholder-bg-color: var(--bg-color);
@@ -195,7 +199,7 @@ exports.catalog = (0, styled_components_1.css) `
     */
   --catalog-card-height: 241px;
   --catalog-card-min-width: 400px;
-  --catalog-card-padding-vertical: var(--spacing-md);
+  --catalog-card-padding-vertical: var(--spacing-base);
   --catalog-card-padding-horizontal: var(--spacing-md);
   --catalog-card-gap: var(--spacing-sm);
   --catalog-card-text-color: var(--text-color-secondary);
@@ -225,12 +229,11 @@ exports.catalog = (0, styled_components_1.css) `
   /**
     * @tokens Catalog metadata
     */
-  --catalog-metadata-section-margin-top: var(--spacing-md);
-  --catalog-metadata-section-gap: var(--spacing-lg);
+  --catalog-metadata-section-margin-top: var(--spacing-base);
+  --catalog-metadata-section-gap: var(--spacing-xs);
   --catalog-metadata-label-font-size: var(--font-size-base);
   --catalog-metadata-label-font-weight: var(--font-weight-medium);
   --catalog-metadata-label-color: var(--text-color-secondary);
-  --catalog-metadata-label-margin-bottom: var(--spacing-unit);
   --catalog-metadata-column-half-gap: var(--spacing-sm);
   --catalog-metadata-heading-size: var(--font-size-md);
 
@@ -265,7 +268,7 @@ exports.catalog = (0, styled_components_1.css) `
   --catalog-card-description-line-height: var(--line-height-base);
   --catalog-card-description-font-weight: var(--font-weight-regular);
   --catalog-card-description-height: 62px;
-  --catalog-card-description-margin-top: 2px;
+  --catalog-card-description-margin-top: 8px;
 
   --catalog-card-content-gap: var(--spacing-xs);
   --catalog-card-content-gap-vertical: var(--spacing-sm);

package/lib/components/CatalogClassic/CatalogClassic.js

@@ -11,6 +11,7 @@ const utils_1 = require("../../core/utils");
 const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
+const FilterInput_1 = require("../../components/Filter/FilterInput");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
 const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
 const CatalogClassicActions_1 = require("../../components/CatalogClassic/CatalogClassicActions");
@@ -25,7 +26,7 @@ function CatalogClassic(props) {
     (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
     return (react_1.default.createElement(CatalogClassicHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
         react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogClassic/CatalogClassic", withoutFilters: !filters.length },
-            react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) }),
+            Boolean(filters.length) && (react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) })),
             filterPopoverVisible && (react_1.default.createElement(FilterPopover_1.FilterPopover, { onClose: () => setFilterPopoverVisible(false), setFilterTerm: setFilterTerm, filterTerm: filterTerm, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
             react_1.default.createElement(CatalogClassicActions_1.CatalogClassicActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
             react_1.default.createElement(exports.CatalogPageContent, null,
@@ -37,7 +38,9 @@ function CatalogClassic(props) {
                     catalogConfig.description ? (react_1.default.createElement(exports.CatalogDescription, { "data-translation-key": catalogConfig.descriptionTranslationKey },
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
-                        ' ')) : null),
+                        ' ')) : null,
+                    !filters.length && (react_1.default.createElement(CatalogSearchWrapper, null,
+                        react_1.default.createElement(FilterInput_1.FilterInput, { value: filterTerm, onChange: (updatedTerm) => setFilterTerm(updatedTerm) })))),
                 react_1.default.createElement(CatalogClassicVirtualizedGroups_1.CatalogClassicVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
 exports.CatalogPageContent = styled_components_1.default.main `
@@ -110,4 +113,8 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   }
   --menu-container-padding-top: 0;
 `;
+const CatalogSearchWrapper = styled_components_1.default.div `
+  margin-top: var(--spacing-base);
+  max-width: 300px;
+`;
 //# sourceMappingURL=CatalogClassic.js.map

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -8,8 +8,8 @@ export type CodeBlockProps = {
     header?: CodeBlockControlsProps;
     dataTestId?: string;
     className?: string;
-    tabs?: CodeBlockTabItems;
-    dropdown?: CodeBlockDropdownItems;
+    tabs?: CodeBlockItems;
+    dropdown?: CodeBlockItems;
     withLineNumbers?: boolean;
     startLineNumber?: number;
     highlightedHtml?: string;
@@ -25,20 +25,13 @@ type UnstableExternalCodeSample = {
     label?: string;
     get: (source: ExternalSource) => string;
 };
-export type CodeBlockTabItems = {
+export type CodeBlockItems = {
     items: {
         name: string;
         lang?: string;
+        id: string;
     }[];
-    onChange: (name: string) => void;
-    value: string;
-};
-export type CodeBlockDropdownItems = {
-    items: {
-        name: string;
-        lang?: string;
-    }[];
-    onChange: (name: string | string[]) => void;
+    onChange: (id: string) => void;
     value: string;
 };
 type ExternalSource = {

package/lib/components/CodeBlock/CodeBlockControls.d.ts

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { CodeBlockDropdownItems, CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockControlsProps = {
     children?: React.ReactNode;
     className?: string;
     title?: React.ReactNode | string;
     controls?: ControlItems | false;
-    tabs?: CodeBlockTabItems;
-    dropdown?: CodeBlockDropdownItems;
+    tabs?: CodeBlockItems;
+    dropdown?: CodeBlockItems;
 };
 type ControlItems = {
     copy?: CopyControlProps;

package/lib/components/CodeBlock/CodeBlockDropdown.d.ts

@@ -1,3 +1,3 @@
 import { type JSX } from 'react';
-import type { CodeBlockDropdownItems } from '../../components/CodeBlock/CodeBlock';
-export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockDropdownItems): JSX.Element;
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
+export declare function CodeBlockDropdown({ items, onChange, value }: CodeBlockItems): JSX.Element;

package/lib/components/CodeBlock/CodeBlockDropdown.js

@@ -5,31 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CodeBlockDropdown = CodeBlockDropdown;
 const react_1 = __importDefault(require("react"));
-const styled_components_1 = __importDefault(require("styled-components"));
 const Dropdown_1 = require("../../components/Dropdown/Dropdown");
 const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
 const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
 const Button_1 = require("../../components/Button/Button");
-const ChevronSortIcon_1 = require("../../icons/ChevronSortIcon/ChevronSortIcon");
 const NoneIcon_1 = require("../../icons/NoneIcon/NoneIcon");
 const utils_1 = require("../../core/utils");
 function CodeBlockDropdown({ items, onChange, value }) {
-    const activeItem = items.find((item) => item.name === value) || items[0];
+    const activeItem = items.find((item) => item.id === value) || items[0];
     const icon = (activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) ? (0, utils_1.getFileIconByLanguage)(activeItem === null || activeItem === void 0 ? void 0 : activeItem.lang) : null;
-    return (react_1.default.createElement(StyledDropdown, { alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { icon: react_1.default.createElement(ChevronSortIcon_1.ChevronSortIcon, null), iconPosition: "right", variant: "text", size: "small" },
+    return (react_1.default.createElement(Dropdown_1.Dropdown, { withArrow: true, alignment: "end", trigger: react_1.default.createElement(Button_1.Button, { iconPosition: "right", variant: "ghost", size: "small" },
             icon,
             activeItem.name) },
         react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item) => {
             const icon = (0, utils_1.getFileIconByLanguage)(item.lang || '');
-            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.lang, onAction: () => onChange(item.name), active: item.name === activeItem.name, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
+            const isActive = item.id === value;
+            return (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: item.id, onAction: () => onChange(item.id), active: isActive, prefix: item.lang ? icon : react_1.default.createElement(NoneIcon_1.NoneIcon, { size: "var(--icon-size)" }) }, item.name));
         }))));
 }
-const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
-  margin-left: auto;
-  --icon-size: 18px;
-  --button-color: var(--text-color-secondary);
-  button.button-size-small {
-    --button-icon-size: 18px;
-  }
-`;
 //# sourceMappingURL=CodeBlockDropdown.js.map

package/lib/components/CodeBlock/CodeBlockTabs.d.ts

@@ -1,6 +1,6 @@
 import type { JSX } from 'react';
-import type { CodeBlockTabItems } from '../../components/CodeBlock/CodeBlock';
+import type { CodeBlockItems } from '../../components/CodeBlock/CodeBlock';
 export type CodeBlockTabsProps = {
-    tabs: CodeBlockTabItems;
+    tabs: CodeBlockItems;
 };
 export declare function CodeBlockTabs({ tabs }: CodeBlockTabsProps): JSX.Element;

package/lib/components/CodeBlock/CodeBlockTabs.js

@@ -40,15 +40,16 @@ function CodeBlockTabs({ tabs }) {
         tabRefs,
     });
     (0, react_1.useEffect)(() => {
-        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.name) === tabs.value);
+        const activeTab = tabRefs.current.find((tab) => (tab === null || tab === void 0 ? void 0 : tab.dataset.id) === tabs.value);
         if (activeTab) {
             activeTab.scrollIntoView({ block: 'nearest', inline: 'center' });
         }
     }, [tabs.value]);
     return (react_1.default.createElement(CodeBlockTabsWrapper, { ref: containerRef, "data-component-name": "CodeBlock/CodeBlockTabs" },
         react_1.default.createElement(ShadowWrapper, null,
-            react_1.default.createElement(Tabs, null, tabs.items.map(({ name, lang }, i) => {
+            react_1.default.createElement(Tabs, null, tabs.items.map((item, i) => {
                 var _a;
+                const { name, lang, id } = item;
                 const ext = (_a = name.match(/\.([^.]+)$/)) === null || _a === void 0 ? void 0 : _a[1];
                 const fileIcon = lang
                     ? (0, get_file_icon_1.getFileIconByLanguage)(lang)
@@ -57,7 +58,7 @@ function CodeBlockTabs({ tabs }) {
                         : null;
                 return (react_1.default.createElement(Tab, { ref: (el) => {
                         tabRefs.current[i] = el;
-                    }, "data-name": name, active: name === tabs.value, key: name + i, onClick: () => tabs.onChange(name) },
+                    }, "data-name": name, active: id === tabs.value, key: id, onClick: () => tabs.onChange(id) },
                     fileIcon,
                     name));
             }))),

package/lib/components/Filter/FilterContent.d.ts

@@ -5,7 +5,7 @@ export type FilterContentProps = {
     setFilterTerm: (value: string) => void;
     filters: ResolvedFilter[];
     filterTerm: string;
-    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'];
+    filterValuesCasing?: NonNullable<RedoclyConfig['catalog']>[string]['filterValuesCasing'] | ((str: string) => string);
     hideSearch?: boolean;
     showCounter?: boolean;
 };