@redocly/theme 0.58.0-next.4 → 0.58.0-next.6

package/lib/core/types/l10n.d.ts

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.add' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'catalog.catalogs.all.title' | 'catalog.catalogs.all.description' | 'catalog.catalogs.all.switcherLabel' | 'catalog.catalogs.service.title' | 'catalog.catalogs.service.description' | 'catalog.catalogs.service.switcherLabel' | 'catalog.catalogs.user.title' | 'catalog.catalogs.user.description' | 'catalog.catalogs.user.switcherLabel' | 'catalog.catalogs.team.title' | 'catalog.catalogs.team.description' | 'catalog.catalogs.team.switcherLabel' | 'catalog.catalogs.domain.title' | 'catalog.catalogs.domain.description' | 'catalog.catalogs.domain.switcherLabel' | 'catalog.catalogs.apiDescription.title' | 'catalog.catalogs.apiDescription.description' | 'catalog.catalogs.apiDescription.switcherLabel' | 'catalog.catalogs.dataSchema.title' | 'catalog.catalogs.dataSchema.description' | 'catalog.catalogs.dataSchema.switcherLabel' | 'catalog.catalogs.apiOperation.title' | 'catalog.catalogs.apiOperation.description' | 'catalog.catalogs.apiOperation.switcherLabel' | 'catalog.entity.metadata.title' | 'catalog.entity.schema.title' | 'catalog.entity.properties.apiDescription.title' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeToSingleColumn' | 'sidebar.actions.changeToTwoColumns' | 'sidebar.actions.singleColumn' | 'sidebar.actions.twoColumns' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.submit' | 'feedback.cancel' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'codeSnippet.expand.tooltipText' | 'codeSnippet.collapse.tooltipText' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'mobileMenu.version' | 'navbar.products' | 'page.nextButton' | 'page.previousButton' | 'page.actions.copyButtonText' | 'page.actions.copyTitle' | 'page.actions.copyDescription' | 'page.actions.viewAsMdTitle' | 'page.actions.viewAsMdButtonText' | 'page.actions.viewAsMdDescription' | 'page.actions.chatGptTitle' | 'page.actions.chatGptButtonText' | 'page.actions.chatGptDescription' | 'page.actions.claudeTitle' | 'page.actions.claudeButtonText' | 'page.actions.claudeDescription' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.viewSecurityDetails' | 'openapi.noResponseExample' | 'openapi.discriminator.searchPlaceholder' | 'openapi.discriminator.searchNoResults' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.showOptionalScopes' | 'openapi.hideOptionalScopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'openapi.schemaCatalogLink.title' | 'openapi.schemaCatalogLink.copyButtonTooltip' | 'openapi.schemaCatalogLink.copiedTooltip' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.requiredScopes' | 'graphql.viewSecurityDetails' | 'graphql.objectScopes' | 'graphql.fieldScopes' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'graphql.content.fragment' | 'codeWalkthrough.download' | 'codeWalkthrough.preview' | 'time.justNow' | 'time.past.second' | 'time.past.seconds' | 'time.past.minute' | 'time.past.minutes' | 'time.past.hour' | 'time.past.hours' | 'time.past.day' | 'time.past.days' | 'time.past.week' | 'time.past.weeks' | 'time.past.month' | 'time.past.months' | 'time.past.year' | 'time.past.years' | 'page.internalServerError.title' | 'page.internalServerError.description' | 'page.skipToContent.label';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/HierarchyIcon/HierarchyIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const HierarchyIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/HierarchyIcon/HierarchyIcon.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.HierarchyIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18" }, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.0625 7.3125H15.1875C15.4858 7.31216 15.7717 7.19352 15.9826 6.98262C16.1935 6.77171 16.3122 6.48576 16.3125 6.1875V2.8125C16.3122 2.51424 16.1935 2.22829 15.9826 2.01738C15.7717 1.80648 15.4858 1.68784 15.1875 1.6875H2.8125C2.51424 1.68784 2.22829 1.80648 2.01738 2.01738C1.80648 2.22829 1.68784 2.51424 1.6875 2.8125V6.1875C1.68784 6.48576 1.80648 6.77171 2.01738 6.98262C2.22829 7.19352 2.51424 7.31216 2.8125 7.3125H3.9375H5.0625ZM15.1875 2.8125H2.8125V6.1875H15.1875V2.8125Z" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.1875 10.6875H9.5625C9.26424 10.6878 8.97829 10.8065 8.76738 11.0174C8.55648 11.2283 8.43784 11.5142 8.4375 11.8125V12.9375H5.0625V10.4546V9.5625V7.3125H3.9375V10.4546V12.9375C3.93784 13.2358 4.05648 13.5217 4.26738 13.7326C4.47829 13.9435 4.76424 14.0622 5.0625 14.0625H8.4375V15.1875C8.43784 15.4858 8.55648 15.7717 8.76738 15.9826C8.97829 16.1935 9.26424 16.3122 9.5625 16.3125H15.1875C15.4858 16.3122 15.7717 16.1935 15.9826 15.9826C16.1935 15.7717 16.3122 15.4858 16.3125 15.1875V11.8125C16.3122 11.5142 16.1935 11.2283 15.9826 11.0174C15.7717 10.8065 15.4858 10.6878 15.1875 10.6875ZM9.5625 11.8125V15.1875H15.1875V11.8125H9.5625Z" })));
+exports.HierarchyIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/HierarchyIcon/HierarchyIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=HierarchyIcon.js.map

package/lib/icons/NoteIcon/NoteIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const NoteIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/NoteIcon/NoteIcon.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.NoteIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "8", height: "12", viewBox: "0 0 8 12", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M7.6375 3.4875L5.0125 0.8625C4.9375 0.7875 4.8625 0.75 4.75 0.75H1C0.5875 0.75 0.25 1.0875 0.25 1.5V10.5C0.25 10.9125 0.5875 11.25 1 11.25H7C7.4125 11.25 7.75 10.9125 7.75 10.5V3.75C7.75 3.6375 7.7125 3.5625 7.6375 3.4875ZM4.75 1.65L6.85 3.75H4.75V1.65ZM7 10.5H1V1.5H4V3.75C4 4.1625 4.3375 4.5 4.75 4.5H7V10.5Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M6.25 8.25H1.75V9H6.25V8.25Z", fill: "currentColor" }),
+    react_1.default.createElement("path", { d: "M6.25 6H1.75V6.75H6.25V6Z", fill: "currentColor" })));
+exports.NoteIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/NoteIcon/NoteIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=NoteIcon.js.map

package/lib/icons/ShareIcon/ShareIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ShareIcon: import("styled-components").StyledComponent<(props: IconProps) => React.JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string;
+    size?: string;
+    className?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/icons/ShareIcon/ShareIcon.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M11.5 10.0001C11.1257 10.002 10.7566 10.0879 10.42 10.2514C10.0834 10.415 9.78776 10.652 9.55497 10.9451L5.89997 8.6601C6.03318 8.23018 6.03318 7.77002 5.89997 7.3401L9.55497 5.0551C9.92594 5.51446 10.4475 5.82769 11.0273 5.93931C11.6071 6.05092 12.2077 5.95372 12.7227 5.66491C13.2377 5.37611 13.6339 4.91435 13.841 4.36143C14.0482 3.8085 14.0529 3.20011 13.8544 2.64402C13.656 2.08793 13.2671 1.62003 12.7567 1.32322C12.2462 1.0264 11.6472 0.919827 11.0657 1.02237C10.4843 1.12491 9.95785 1.42996 9.57975 1.88346C9.20164 2.33697 8.99626 2.90966 8.99997 3.5001C9.00233 3.72369 9.03599 3.94585 9.09997 4.1601L5.44497 6.4451C5.12229 6.03889 4.68124 5.74313 4.18295 5.5988C3.68465 5.45447 3.1538 5.46873 2.66398 5.63961C2.17415 5.81048 1.74961 6.1295 1.44921 6.55245C1.14881 6.9754 0.987427 7.48133 0.987427 8.0001C0.987427 8.51888 1.14881 9.0248 1.44921 9.44775C1.74961 9.8707 2.17415 10.1897 2.66398 10.3606C3.1538 10.5315 3.68465 10.5457 4.18295 10.4014C4.68124 10.2571 5.12229 9.96131 5.44497 9.5551L9.09997 11.8401C9.03599 12.0544 9.00233 12.2765 8.99997 12.5001C8.99997 12.9946 9.14659 13.4779 9.4213 13.889C9.696 14.3002 10.0864 14.6206 10.5433 14.8098C11.0001 14.999 11.5027 15.0485 11.9877 14.9521C12.4726 14.8556 12.9181 14.6175 13.2677 14.2679C13.6174 13.9182 13.8555 13.4728 13.9519 12.9878C14.0484 12.5029 13.9989 12.0002 13.8097 11.5434C13.6204 11.0866 13.3 10.6961 12.8889 10.4214C12.4778 10.1467 11.9944 10.0001 11.5 10.0001ZM11.5 2.0001C11.7966 2.0001 12.0867 2.08808 12.3333 2.2529C12.58 2.41772 12.7723 2.65199 12.8858 2.92608C12.9993 3.20017 13.029 3.50177 12.9711 3.79274C12.9133 4.08371 12.7704 4.35098 12.5606 4.56076C12.3509 4.77054 12.0836 4.9134 11.7926 4.97128C11.5016 5.02916 11.2 4.99945 10.9259 4.88592C10.6519 4.77239 10.4176 4.58013 10.2528 4.33346C10.0879 4.08678 9.99997 3.79677 9.99997 3.5001C9.99997 3.10228 10.158 2.72075 10.4393 2.43944C10.7206 2.15814 11.1021 2.0001 11.5 2.0001ZM3.49997 9.5001C3.2033 9.5001 2.91329 9.41213 2.66661 9.24731C2.41994 9.08248 2.22768 8.84822 2.11415 8.57413C2.00062 8.30004 1.97091 7.99844 2.02879 7.70747C2.08667 7.4165 2.22953 7.14922 2.43931 6.93944C2.64909 6.72966 2.91636 6.5868 3.20733 6.52892C3.49831 6.47105 3.79991 6.50075 4.074 6.61428C4.34808 6.72781 4.58235 6.92007 4.74717 7.16675C4.912 7.41342 4.99997 7.70343 4.99997 8.0001C4.99997 8.39793 4.84193 8.77946 4.56063 9.06076C4.27933 9.34207 3.89779 9.5001 3.49997 9.5001ZM11.5 14.0001C11.2033 14.0001 10.9133 13.9121 10.6666 13.7473C10.4199 13.5825 10.2277 13.3482 10.1142 13.0741C10.0006 12.8 9.97091 12.4984 10.0288 12.2075C10.0867 11.9165 10.2295 11.6492 10.4393 11.4394C10.6491 11.2297 10.9164 11.0868 11.2073 11.0289C11.4983 10.971 11.7999 11.0008 12.074 11.1143C12.3481 11.2278 12.5824 11.4201 12.7472 11.6667C12.912 11.9134 13 12.2034 13 12.5001C13 12.8979 12.8419 13.2795 12.5606 13.5608C12.2793 13.8421 11.8978 14.0001 11.5 14.0001Z" })));
+exports.ShareIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ShareIcon/ShareIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ShareIcon.js.map

package/lib/index.d.ts

@@ -219,6 +219,7 @@ export * from './icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from './icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from './icons/WarningSquareIcon/WarningSquareIcon';
 export * from './icons/MenuIcon/MenuIcon';
+export * from './icons/NoteIcon/NoteIcon';
 export * from './icons/GlobalOutlinedIcon/GlobalOutlinedIcon';
 export * from './icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon';
 export * from './icons/FaceNeutralIcon/FaceNeutralIcon';
@@ -257,6 +258,7 @@ export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
 export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
+export * from './icons/ShareIcon/ShareIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -272,6 +272,7 @@ __exportStar(require("./icons/MarkdownFullIcon/MarkdownFullIcon"), exports);
 __exportStar(require("./icons/DocumentBlankIcon/DocumentBlankIcon"), exports);
 __exportStar(require("./icons/WarningSquareIcon/WarningSquareIcon"), exports);
 __exportStar(require("./icons/MenuIcon/MenuIcon"), exports);
+__exportStar(require("./icons/NoteIcon/NoteIcon"), exports);
 __exportStar(require("./icons/GlobalOutlinedIcon/GlobalOutlinedIcon"), exports);
 __exportStar(require("./icons/FaceDissatisfiedIcon/FaceDissatisfiedIcon"), exports);
 __exportStar(require("./icons/FaceNeutralIcon/FaceNeutralIcon"), exports);
@@ -310,6 +311,7 @@ __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
 __exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
+__exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.58.0-next.4",
+  "version": "0.58.0-next.6",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,8 +87,8 @@
     "openapi-sampler": "1.6.1",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/realm-asyncapi-sdk": "0.4.0-next.1",
-    "@redocly/config": "0.31.0"
+    "@redocly/config": "0.34.0",
+    "@redocly/realm-asyncapi-sdk": "0.4.0-next.2"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Catalog/Catalog.tsx

@@ -2,13 +2,16 @@ import React, { JSX } from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntityList } from '@redocly/theme/core/types';
+import {
+  BffCatalogEntityList,
+  CatalogSwitcherItem,
+  CatalogViewMode,
+} from '@redocly/theme/core/types';
 import { breakpoints } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { H3 } from '@redocly/theme/components/Typography/H3';
 import { FilterContent } from '@redocly/theme/components/Filter/FilterContent';
 import { Sidebar, SidebarHeader } from '@redocly/theme/components/Sidebar/Sidebar';
-import { CatalogSwitcherItem } from '@redocly/theme/core/types/catalog';
 import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelector';
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
@@ -22,6 +25,7 @@ export type CatalogProps = {
   entitiesTypes: string[];
   initialEntitiesList?: BffCatalogEntityList;
   catalogSwitcherItems: CatalogSwitcherItem[];
+  initialViewMode?: CatalogViewMode;
 };
 
 const customCatalogOptionsCasing = (str: string): string => {
@@ -33,13 +37,19 @@ const customCatalogOptionsCasing = (str: string): string => {
       if (index === 0 && word.toLowerCase() === 'api') {
         return 'API';
       }
-      return word[0].toUpperCase() + word.slice(1).toLowerCase();
+      return word[0].toUpperCase() + word.slice(1);
     })
     .join(' ');
 };
 
 export function Catalog(props: CatalogProps): JSX.Element {
-  const { catalogConfig, entitiesTypes, initialEntitiesList, catalogSwitcherItems } = props;
+  const {
+    catalogConfig,
+    entitiesTypes,
+    initialEntitiesList,
+    catalogSwitcherItems,
+    initialViewMode,
+  } = props;
 
   const { useTranslate, useCatalog } = useThemeHooks();
 
@@ -62,7 +72,7 @@ export function Catalog(props: CatalogProps): JSX.Element {
     onChangeCollapseSidebarClick,
     layout,
     collapsedSidebar,
-  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0);
+  } = useCatalog(catalogConfig, initialEntitiesList?.page.total || 0, initialViewMode);
 
   return (
     <>

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

@@ -11,7 +11,6 @@ import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpR
 import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 import { getPathPrefix } from '@redocly/theme/core/utils';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CatalogCardProps = {
   entity: BffCatalogEntity;
@@ -35,22 +34,21 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
     >
       <CardContent>
         <CardHeader>
-          <TooltipComponent tip={entity.type} placement="bottom" className="catalog">
-            <HeaderIconWrapper>
-              <CatalogEntityIcon entityType={entity.type} defaultColor={true} />
-            </HeaderIconWrapper>
-          </TooltipComponent>
-          <CardTitle>
-            <CatalogHighlight>{entity.title}</CatalogHighlight>
-          </CardTitle>
+          <HeaderIconWrapper>
+            <CatalogEntityIcon entityType={entity.type} />
+          </HeaderIconWrapper>
+          <HeaderIconText entityType={entity.type}>{entity.type}</HeaderIconText>
         </CardHeader>
 
         <CardDescription>
+          <CardTitle>
+            <CatalogHighlight>{entity.title}</CatalogHighlight>
+          </CardTitle>
           <CatalogHighlight>{entity.summary ?? ''}</CatalogHighlight>
         </CardDescription>
 
         <CardMetadataSection>
-          <MetadataColumn>
+          <MetadataRow>
             <MetadataLabel>Domains:</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.domains?.map((domain) => domain.title) || []}
@@ -63,9 +61,9 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                 textTransform: 'none',
               }}
             />
-          </MetadataColumn>
+          </MetadataRow>
 
-          <MetadataColumn>
+          <MetadataRow>
             <MetadataLabel>Owners:</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.owners?.map((owner) => owner.key) || []}
@@ -78,7 +76,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                 textTransform: 'none',
               }}
             />
-          </MetadataColumn>
+          </MetadataRow>
         </CardMetadataSection>
       </CardContent>
 
@@ -121,6 +119,10 @@ const HeaderIconWrapper = styled.div`
   margin-right: var(--catalog-card-icon-margin-right);
 `;
 
+const HeaderIconText = styled.div<{ entityType: string }>`
+  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+`;
+
 const CardHeader = styled.div`
   display: flex;
   align-items: center;
@@ -130,22 +132,22 @@ const MetadataLabel = styled.div`
   font-size: var(--catalog-metadata-label-font-size);
   font-weight: var(--catalog-metadata-label-font-weight);
   color: var(--catalog-metadata-label-color);
-  margin-bottom: var(--catalog-metadata-label-margin-bottom);
 `;
 
 const CardMetadataSection = styled.div`
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   margin-top: var(--catalog-metadata-section-margin-top);
   gap: var(--catalog-metadata-section-gap);
   width: 100%;
 `;
 
-const MetadataColumn = styled.div`
+const MetadataRow = styled.div`
   display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: calc(50% - var(--catalog-metadata-column-half-gap)); /* 50% minus half the gap */
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--catalog-metadata-row-gap);
 `;
 
 const ArrowCircle = styled.div`
@@ -184,7 +186,6 @@ const Divider = styled.div`
 `;
 
 const CatalogCardWrapper = styled.div`
-  height: var(--catalog-card-height);
   color: var(--catalog-card-text-color);
   font-size: var(--catalog-card-font-size);
   font-weight: var(--catalog-card-font-weight);

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

@@ -41,7 +41,6 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
 const LinksWrapper = styled.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;

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

@@ -81,7 +81,6 @@ const JsonViewerWrapper = styled(JsonViewer)`
 const MetadataWrapper = styled.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;

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

@@ -45,7 +45,6 @@ const PathLabel = styled.label`
 const LinksWrapper = styled.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;

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

@@ -64,7 +64,7 @@ const CardHeader = styled.div`
 const CardContent = styled.div`
   flex: 1;
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -1,37 +1,65 @@
 import React, { JSX } from 'react';
+import { UiAccessibleConfig } from '@redocly/config';
 
 import { EntityType } from '@redocly/theme/core/types';
 import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { UserIcon } from '@redocly/theme/icons/UserIcon/UserIcon';
-import { NetworkIcon } from '@redocly/theme/icons/NetworkIcon/NetworkIcon';
 import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
+import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon';
+import { Image } from '@redocly/theme/components/Image/Image';
+import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
+import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
   defaultColor?: boolean;
   forceColor?: string;
+  entitiesCatalogConfig?: UiAccessibleConfig['entitiesCatalog'];
 };
 
 const getIconColor = (entityType: EntityType) => `var(--catalog-entity-icon-color-${entityType})`;
 
-const getEntityIcon = ({ entityType, defaultColor, forceColor }: CatalogEntityIconProps) => {
-  const iconColor =
-    forceColor ??
-    (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
-
-  const entityIconMap: Record<EntityType, JSX.Element> = {
-    service: <CodeIcon color={iconColor} />,
-    domain: <GraphIcon color={iconColor} />,
-    team: <PeopleIcon color={iconColor} />,
-    user: <UserIcon color={iconColor} />,
-    'api-description': <CodeIcon color={iconColor} />,
-    'data-schema': <NetworkIcon color={iconColor} />,
-    'api-operation': <MoleculesIcon color={iconColor} />,
-  };
-
-  return entityIconMap[entityType as EntityType];
+const getEntityIcon = ({
+  entityType,
+  defaultColor,
+  forceColor,
+  entitiesCatalogConfig,
+}: CatalogEntityIconProps) => {
+  if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+    const iconColor =
+      forceColor ??
+      (defaultColor ? `var(--catalog-entity-icon-color)` : getIconColor(entityType as EntityType));
+
+    const entityIconMap: Record<EntityType, JSX.Element> = {
+      service: <CodeIcon color={iconColor} />,
+      domain: <GraphIcon color={iconColor} />,
+      team: <PeopleIcon color={iconColor} />,
+      user: <UserIcon color={iconColor} />,
+      'api-description': <NoteIcon color={iconColor} />,
+      'data-schema': <HierarchyIcon color={iconColor} />,
+      'api-operation': <MoleculesIcon color={iconColor} />,
+    };
+
+    return entityIconMap[entityType as EntityType];
+  }
+
+  const iconConfig = entitiesCatalogConfig?.entityTypes?.[entityType]?.icon;
+
+  if (iconConfig?.src || iconConfig?.srcSet) {
+    return (
+      <Image
+        src={iconConfig?.src}
+        srcSet={iconConfig?.srcSet}
+        alt={`${entityType} icon`}
+        width="16"
+        height="16"
+      />
+    );
+  }
+
+  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
 };
 
 export function CatalogEntityIcon({
@@ -39,7 +67,14 @@ export function CatalogEntityIcon({
   defaultColor = false,
   forceColor,
 }: CatalogEntityIconProps): JSX.Element {
-  const icon = getEntityIcon({ entityType, defaultColor, forceColor });
+  const themeConfig = useThemeConfig();
+
+  const icon = getEntityIcon({
+    entityType,
+    defaultColor,
+    forceColor,
+    entitiesCatalogConfig: themeConfig.entitiesCatalog,
+  });
 
   if (!icon) {
     throw new Error(`Unhandled entity type: ${entityType}`);

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeIconProps = {
   entityType: string;
@@ -30,14 +31,24 @@ const IconContainer = styled.div<{ entityType: string; defaultColor: boolean }>`
   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 (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 (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
+        return `var(--catalog-entity-border-color-${entityType})`;
+      }
+      return 'var(--catalog-entity-border-color-custom)';
+    }};
 `;

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { EntityType } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';
 
 export type CatalogEntityTypeTagProps = {
   entityType: string;
@@ -43,7 +44,14 @@ export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps):
 const EntityTypeTagWrapper = styled(Tag)<{ entityType: EntityType }>`
   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 }) =>
+      !PREDEFINED_ENTITY_TYPES.includes(entityType)
+        ? 'var(--catalog-entity-border-color-custom)'
+        : `var(--catalog-entity-border-color-${entityType})`};
+  color: ${({ entityType }) =>
+    !PREDEFINED_ENTITY_TYPES.includes(entityType)
+      ? 'var(--catalog-entity-icon-color-custom)'
+      : `var(--catalog-entity-icon-color-${entityType})`};
 `;

package/src/components/Catalog/CatalogSelector.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types/catalog';
+import { CatalogSwitcherItem, SortOption } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';

package/src/components/Catalog/CatalogTableView/CatalogEntityCell.tsx

@@ -13,7 +13,7 @@ export type CatalogEntityCellProps<T extends Entity> = {
 export function CatalogEntityCell<T extends Entity>({ entity }: CatalogEntityCellProps<T>) {
   return (
     <EntityTitleCellWrapper data-component-name="Catalog/CatalogTableView/CatalogEntityCell">
-      <CatalogEntityTypeIcon entityType={entity.type} defaultColor={true} />
+      <CatalogEntityTypeIcon entityType={entity.type} />
       <EntityTitleContent>
         <EntityTitle data-component-name="Catalog/CatalogTableView/CatalogEntityTitle">
           <CatalogHighlight>{entity.title}</CatalogHighlight>

package/src/components/Catalog/CatalogViewModeToggle.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import { TableIcon } from '@redocly/theme/icons/TableIcon/TableIcon';
 import { CardsIcon } from '@redocly/theme/icons/CardsIcon/CardsIcon';
-import { CatalogViewMode } from '@redocly/theme/core/types/catalog';
+import { CatalogViewMode } from '@redocly/theme/core/types';
 
 function useViewMode(initialViewMode: CatalogViewMode) {
   const [viewMode, setViewMode] = useState<CatalogViewMode | null>(null);