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

package/lib/core/styles/palette.dark.js

@@ -0,0 +1,216 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activeBrandPaletteDark = void 0;
+const styled_components_1 = require("styled-components");
+function brandPaletteDark(palette) {
+    switch (palette) {
+        case 'default':
+            return (0, styled_components_1.css) `
+        --color-brand-1: var(--color-blueberry-1);
+        --color-brand-2: var(--color-blueberry-2);
+        --color-brand-3: var(--color-blueberry-3);
+        --color-brand-4: var(--color-blueberry-4);
+        --color-brand-5: var(--color-blueberry-5);
+        --color-brand-6: var(--color-blueberry-6);
+        --color-brand-7: var(--color-blueberry-7);
+        --color-brand-8: var(--color-blueberry-8);
+        --color-brand-9: var(--color-blueberry-9);
+        --color-brand-10: var(--color-blueberry-10);
+        --color-brand-11: var(--color-blueberry-11);
+      `;
+        case 'slate':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #2a2b33;
+        --color-brand-2: #3b3c45;
+        --color-brand-3: #555761;
+        --color-brand-4: #6e6f7a;
+        --color-brand-5: #9b9ca8;
+        --color-brand-6: #fbfbfc;
+        --color-brand-7: #ededf2;
+        --color-brand-8: #dcdde5;
+        --color-brand-9: #c4c6d1;
+        --color-brand-10: #9b9ca8;
+        --color-brand-11: #6e6f7a;
+        --color-brand-subtle-1: #2a2b3366;
+        --color-brand-subtle-2: #3b3c4566;
+        --color-brand-subtle-3: #55576166;
+        --color-brand-subtle-4: #6e6f7a66;
+        --text-color-on-color: #000000;
+      `;
+        case 'pink':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #4f2841;
+        --color-brand-2: #6a3055;
+        --color-brand-3: #853668;
+        --color-brand-4: #a03a7b;
+        --color-brand-5: #bb3d8d;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #de59ad;
+        --color-brand-8: #e677bd;
+        --color-brand-9: #ef99cf;
+        --color-brand-10: #f7bfe2;
+        --color-brand-11: #ffe8f7;
+        --color-brand-subtle-1: #4f284166;
+        --color-brand-subtle-2: #6a305566;
+        --color-brand-subtle-3: #85366866;
+        --color-brand-subtle-4: #a03a7b66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'coral':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #4f282b;
+        --color-brand-2: #6d3338;
+        --color-brand-3: #8b3c42;
+        --color-brand-4: #a9434c;
+        --color-brand-5: #c74b55;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #ea6a75;
+        --color-brand-8: #ef858d;
+        --color-brand-9: #f5a3aa;
+        --color-brand-10: #fac5c9;
+        --color-brand-11: #ffe8ea;
+        --color-brand-subtle-1: #4f282b66;
+        --color-brand-subtle-2: #6d333866;
+        --color-brand-subtle-3: #8b3c4266;
+        --color-brand-subtle-4: #a9434c66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'amber':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #4f3c28;
+        --color-brand-2: #71512e;
+        --color-brand-3: #93632f;
+        --color-brand-4: #b6732a;
+        --color-brand-5: #d88121;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #fb9f3a;
+        --color-brand-8: #fcb261;
+        --color-brand-9: #fdc78c;
+        --color-brand-10: #feddba;
+        --color-brand-11: #fff4e8;
+        --color-brand-subtle-1: #4f3c2866;
+        --color-brand-subtle-2: #71512e66;
+        --color-brand-subtle-3: #93632f66;
+        --color-brand-subtle-4: #b6732a66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'jade':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #284f45;
+        --color-brand-2: #2a6052;
+        --color-brand-3: #2b715e;
+        --color-brand-4: #2b816b;
+        --color-brand-5: #2a9277;
+        --color-brand-6: #29a383;
+        --color-brand-7: #42b597;
+        --color-brand-8: #61c8ad;
+        --color-brand-9: #88dac4;
+        --color-brand-10: #b5edde;
+        --color-brand-11: #e8fff9;
+        --color-brand-subtle-1: #284f4566;
+        --color-brand-subtle-2: #2a605266;
+        --color-brand-subtle-3: #2b715e66;
+        --color-brand-subtle-4: #2b816b66;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'cyan':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #28484f;
+        --color-brand-2: #285c67;
+        --color-brand-3: #246e7f;
+        --color-brand-4: #1b8097;
+        --color-brand-5: #0f91af;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #22b2d2;
+        --color-brand-8: #4ac2dd;
+        --color-brand-9: #79d4e9;
+        --color-brand-10: #aee7f4;
+        --color-brand-11: #e8fbff;
+        --color-brand-subtle-1: #28484f66;
+        --color-brand-subtle-2: #285c6766;
+        --color-brand-subtle-3: #246e7f66;
+        --color-brand-subtle-4: #1b809766;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'ocean':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #283e4f;
+        --color-brand-2: #2d5472;
+        --color-brand-3: #2a6795;
+        --color-brand-4: #2277b9;
+        --color-brand-5: #1384dc;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #29a2ff;
+        --color-brand-8: #56b5ff;
+        --color-brand-9: #85caff;
+        --color-brand-10: #b6dfff;
+        --color-brand-11: #e8f5ff;
+        --color-brand-subtle-1: #283e4f66;
+        --color-brand-subtle-2: #2d547266;
+        --color-brand-subtle-3: #2a679566;
+        --color-brand-subtle-4: #2277b966;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'indigo':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #28314f;
+        --color-brand-2: #303e6b;
+        --color-brand-3: #364988;
+        --color-brand-4: #3952a4;
+        --color-brand-5: #3c5bc1;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #5879e4;
+        --color-brand-8: #7691eb;
+        --color-brand-9: #99aef1;
+        --color-brand-10: #bfcdf8;
+        --color-brand-11: #e8edff;
+        --color-brand-subtle-1: #28314f66;
+        --color-brand-subtle-2: #303e6b66;
+        --color-brand-subtle-3: #36498866;
+        --color-brand-subtle-4: #3952a466;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'iris':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #2e2e4f;
+        --color-brand-2: #3a3a6a;
+        --color-brand-3: #434385;
+        --color-brand-4: #4c4ca0;
+        --color-brand-5: #5353bb;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #7070de;
+        --color-brand-8: #8a8ae6;
+        --color-brand-9: #a7a7ef;
+        --color-brand-10: #c8c8f7;
+        --color-brand-11: #ebebff;
+        --color-brand-subtle-1: #2e2e4f80;
+        --color-brand-subtle-2: #3a3a6a80;
+        --color-brand-subtle-3: #43438580;
+        --color-brand-subtle-4: #4c4ca080;
+        --text-color-on-color: #ffffff;
+      `;
+        default:
+            return (0, styled_components_1.css) `
+        --color-brand-1: #232a61;
+        --color-brand-2: #222d7a;
+        --color-brand-3: #1e2f93;
+        --color-brand-4: #2f46b7;
+        --color-brand-5: #4561db;
+        --color-brand-6: #5f81ff;
+        --color-brand-7: #87a3ff;
+        --color-brand-8: #9fb7ff;
+        --color-brand-9: #bfd0ff;
+        --color-brand-10: #dfe8ff;
+        --color-brand-11: #f0f4ff;
+        --color-brand-subtle-1: #232a6166;
+        --color-brand-subtle-2: #222d7a66;
+        --color-brand-subtle-3: #1e2f9366;
+        --color-brand-subtle-4: #2f46b766;
+        --text-color-on-color: #ffffff;
+      `;
+    }
+}
+exports.activeBrandPaletteDark = (0, styled_components_1.css) `
+  ${({ palette }) => brandPaletteDark(palette)}
+`;
+//# sourceMappingURL=palette.dark.js.map

package/lib/core/styles/palette.js

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.activeBrandPaletteLight = void 0;
+const styled_components_1 = require("styled-components");
+function brandPaletteLight(palette) {
+    switch (palette) {
+        case 'default':
+            return (0, styled_components_1.css) `
+        --color-brand-1: var(--color-blueberry-1);
+        --color-brand-2: var(--color-blueberry-2);
+        --color-brand-3: var(--color-blueberry-3);
+        --color-brand-4: var(--color-blueberry-4);
+        --color-brand-5: var(--color-blueberry-5);
+        --color-brand-6: var(--color-blueberry-6);
+        --color-brand-7: var(--color-blueberry-7);
+        --color-brand-8: var(--color-blueberry-8);
+        --color-brand-9: var(--color-blueberry-9);
+        --color-brand-10: var(--color-blueberry-10);
+        --color-brand-11: var(--color-blueberry-11);
+      `;
+        case 'slate':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ededf2;
+        --color-brand-2: #dcdde5;
+        --color-brand-3: #c4c6d1;
+        --color-brand-4: #9b9ca8;
+        --color-brand-5: #6e6f7a;
+        --color-brand-6: #1a1c21;
+        --color-brand-7: #22242b;
+        --color-brand-8: #2a2b33;
+        --color-brand-9: #3b3c45;
+        --color-brand-10: #555761;
+        --color-brand-11: #6e6f7a;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'pink':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ffe8f7;
+        --color-brand-2: #f7bfe2;
+        --color-brand-3: #ef99cf;
+        --color-brand-4: #e677bd;
+        --color-brand-5: #de59ad;
+        --color-brand-6: #d6409f;
+        --color-brand-7: #bb3d8d;
+        --color-brand-8: #a03a7b;
+        --color-brand-9: #853668;
+        --color-brand-10: #6a3055;
+        --color-brand-11: #4f2841;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'coral':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ffe8ea;
+        --color-brand-2: #fac5c9;
+        --color-brand-3: #f5a3aa;
+        --color-brand-4: #ef858d;
+        --color-brand-5: #ea6a75;
+        --color-brand-6: #e5535f;
+        --color-brand-7: #c74b55;
+        --color-brand-8: #a9434c;
+        --color-brand-9: #8b3c42;
+        --color-brand-10: #6d3338;
+        --color-brand-11: #4f282b;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'amber':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #fff4e8;
+        --color-brand-2: #feddba;
+        --color-brand-3: #fdc78c;
+        --color-brand-4: #fcb261;
+        --color-brand-5: #fb9f3a;
+        --color-brand-6: #fa8d15;
+        --color-brand-7: #d88121;
+        --color-brand-8: #b6732a;
+        --color-brand-9: #93632f;
+        --color-brand-10: #71512e;
+        --color-brand-11: #4f3c28;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'jade':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8fff9;
+        --color-brand-2: #b5edde;
+        --color-brand-3: #88dac4;
+        --color-brand-4: #61c8ad;
+        --color-brand-5: #42b597;
+        --color-brand-6: #29a383;
+        --color-brand-7: #2a9277;
+        --color-brand-8: #2b816b;
+        --color-brand-9: #2b715e;
+        --color-brand-10: #2a6052;
+        --color-brand-11: #284f45;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'cyan':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8fbff;
+        --color-brand-2: #aee7f4;
+        --color-brand-3: #79d4e9;
+        --color-brand-4: #4ac2dd;
+        --color-brand-5: #22b2d2;
+        --color-brand-6: #00a2c7;
+        --color-brand-7: #0f91af;
+        --color-brand-8: #1b8097;
+        --color-brand-9: #246e7f;
+        --color-brand-10: #285c67;
+        --color-brand-11: #28484f;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'ocean':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8f5ff;
+        --color-brand-2: #b6dfff;
+        --color-brand-3: #85caff;
+        --color-brand-4: #56b5ff;
+        --color-brand-5: #29a2ff;
+        --color-brand-6: #0090ff;
+        --color-brand-7: #1384dc;
+        --color-brand-8: #2277b9;
+        --color-brand-9: #2a6795;
+        --color-brand-10: #2d5472;
+        --color-brand-11: #283e4f;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'indigo':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #e8edff;
+        --color-brand-2: #b5d7ff;
+        --color-brand-3: #99aef1;
+        --color-brand-4: #7691eb;
+        --color-brand-5: #5879e4;
+        --color-brand-6: #3e63dd;
+        --color-brand-7: #3c5bc1;
+        --color-brand-8: #3952a4;
+        --color-brand-9: #364988;
+        --color-brand-10: #303e6b;
+        --color-brand-11: #28314f;
+        --text-color-on-color: #ffffff;
+      `;
+        case 'iris':
+            return (0, styled_components_1.css) `
+        --color-brand-1: #ebebff;
+        --color-brand-2: #c8c8f7;
+        --color-brand-3: #a7a7ef;
+        --color-brand-4: #8a8ae6;
+        --color-brand-5: #7070de;
+        --color-brand-6: #5b5bd6;
+        --color-brand-7: #5353bb;
+        --color-brand-8: #4c4ca0;
+        --color-brand-9: #434385;
+        --color-brand-10: #3a3a6a;
+        --color-brand-11: #2e2e4f;
+        --text-color-on-color: #ffffff;
+      `;
+        default:
+            return (0, styled_components_1.css) `
+        --color-brand-1: #f0f4ff;
+        --color-brand-2: #dfe8ff;
+        --color-brand-3: #bfd0ff;
+        --color-brand-4: #9fb7ff;
+        --color-brand-5: #87a3ff;
+        --color-brand-6: #5f81ff;
+        --color-brand-7: #4561db;
+        --color-brand-8: #2f46b7;
+        --color-brand-9: #1e2f93;
+        --color-brand-10: #222d7a;
+        --color-brand-11: #232a61;
+        --text-color-on-color: #ffffff;
+      `;
+    }
+}
+/**
+ * @tokens Palette
+ */
+exports.activeBrandPaletteLight = (0, styled_components_1.css) `
+  ${({ palette }) => brandPaletteLight(palette)}
+`;
+//# sourceMappingURL=palette.js.map

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

@@ -2,7 +2,6 @@ import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
 import { ENTITY_RELATION_TYPES } from '@redocly/config';
 import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '../../config';
-export type SortOption = 'title' | '-title' | 'type' | '-type';
 export type FilterResult = {
     value: string;
     count: number;
@@ -20,8 +19,8 @@ export type UseCatalogResponse = {
     filterQuery: string;
     searchQuery: string;
     setSearchQuery: (query: string) => void;
-    sortOption: SortOption | null;
-    setSortOption: (option: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (option: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
     viewMode: CatalogViewMode;
@@ -34,8 +33,8 @@ export type UseCatalogResponse = {
     collapsedSidebar: boolean;
 };
 export type UseCatalogSortResponse = {
-    sortOption: SortOption | null;
-    setSortOption: (option: SortOption | null) => void;
+    sortOption: string | null;
+    setSortOption: (option: string | null) => void;
     handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
     isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -134,8 +133,8 @@ export type BffCatalogRelatedEntity = {
     metadata?: Record<string, any>;
     version?: string | null;
     revision?: string | null;
-    readonly createdAt: string | null;
-    readonly updatedAt: string | null;
+    readonly createdAt: string;
+    readonly updatedAt: string;
 };
 export type BffCatalogEntity = {
     readonly id: string;
@@ -220,3 +219,20 @@ export type SidebarConnectedEntity = {
     key: string;
     version?: string;
 };
+export type CatalogEntityPageProps = {
+    status: 'success';
+    entity: BffCatalogEntity;
+    relatedEntity: BffCatalogRelatedEntity | null;
+    relations: BffCatalogRelatedEntityList;
+    entitiesCatalogConfig: EntitiesCatalogConfig;
+    catalogConfig: CatalogEntityConfig;
+    sharedDataIds?: Record<string, string>;
+};
+export type CatalogEntityProps = {
+    RedocSchema: React.ComponentType<any>;
+    StoreProvider: React.ComponentType<any>;
+    GraphqlTypeRenderer?: React.ComponentType<{
+        sdl: string;
+        typeName: string;
+    }>;
+};

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

@@ -1,11 +1,12 @@
+import type { ResolvedBannerConfig } from '@redocly/config';
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { BannerConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router-dom';
 import type { UseQueryResult } from '@tanstack/react-query';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
-import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults, SortOption } from './catalog';
+import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ToolCallName, ContentSegment } from './search';
@@ -65,7 +66,7 @@ export type ThemeHooks = {
         currentItemSiblings?: BreadcrumbItem[];
     };
     useBanner: () => {
-        banner: BannerConfig | undefined;
+        banner: ResolvedBannerConfig | undefined;
         dismissBanner: (content: string) => void;
     };
     useSearch: (product?: string, autoSearchDisabled?: boolean) => {
@@ -111,6 +112,7 @@ export type ThemeHooks = {
         contentSegments: ContentSegment[];
     };
     useMarkdownText: (text: string) => React.ReactNode;
+    useMarkdocRenderer: (ast: unknown) => React.ReactNode;
     useFacetQuery: (field: string) => {
         searchFacet: SearchFacet | null;
         setSearchFacet: React.Dispatch<React.SetStateAction<SearchFacet | null>>;
@@ -137,7 +139,7 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
     useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-    useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
+    useCatalogSort: (defaultSortOption?: string | null) => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity>;
     useFetchCatalogEntitiesRelations: (params: CatalogApiParams & {

package/lib/index.d.ts

@@ -115,7 +115,7 @@ export * from './components/Catalog/CatalogTableView/CatalogTableHeaderCell';
 export * from './components/Catalog/CatalogTableView/CatalogTableView';
 export * from './components/Catalog/CatalogSelector';
 export * from './components/Catalog/CatalogSortButton';
-export * from './components/Catalog/CatalogTagsWithTooltip';
+export * from './components/Catalog/CatalogTags';
 export * from './components/Catalog/CatalogViewModeToggle';
 export * from './components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton';
 export * from './components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';

package/lib/index.js

@@ -173,7 +173,7 @@ __exportStar(require("./components/Catalog/CatalogTableView/CatalogTableHeaderCe
 __exportStar(require("./components/Catalog/CatalogTableView/CatalogTableView"), exports);
 __exportStar(require("./components/Catalog/CatalogSelector"), exports);
 __exportStar(require("./components/Catalog/CatalogSortButton"), exports);
-__exportStar(require("./components/Catalog/CatalogTagsWithTooltip"), exports);
+__exportStar(require("./components/Catalog/CatalogTags"), exports);
 __exportStar(require("./components/Catalog/CatalogViewModeToggle"), exports);
 __exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistoryButton"), exports);
 __exportStar(require("./components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar"), exports);

package/lib/markdoc/components/Heading/Heading.js

@@ -70,11 +70,11 @@ function renderWithSpanWrapper(children) {
  */
 const mdClassName = 'md';
 function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, className, __idx, }) {
-    var _a;
+    var _a, _b;
     const { pathname } = (0, react_router_dom_1.useLocation)();
     const { usePageProps } = (0, hooks_1.useThemeHooks)();
     const pageProps = usePageProps();
-    const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown';
+    const isMarkdownPage = ((_a = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _a === void 0 ? void 0 : _a.type) === 'markdown' || ((_b = pageProps === null || pageProps === void 0 ? void 0 : pageProps.metadata) === null || _b === void 0 ? void 0 : _b.type) === 'asciidoc';
     const linkEl = (react_1.default.createElement("a", { "aria-label": `link  to ${id}`, href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
         react_1.default.createElement(LinkIcon_1.LinkIcon, { size: "14px", color: "--heading-anchor-color" })));
     return (0, react_1.createElement)(`h${level}`, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.1",
+  "version": "0.64.0-next.2",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -81,7 +81,7 @@
     "openapi-sampler": "^1.7.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.44.1"
+    "@redocly/config": "0.44.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/Banner/Banner.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react';
 import styled, { css } from 'styled-components';
 
-import type { BannerConfig } from '@redocly/config';
+import type { ResolvedBannerConfig } from '@redocly/config';
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
@@ -23,11 +23,12 @@ function setBannerHeight(height: number): void {
 }
 
 export function Banner({ className }: BannerProps): JSX.Element | null {
-  const { useBanner, useMarkdownText } = useThemeHooks();
+  const { useBanner, useMarkdocRenderer } = useThemeHooks();
   const { banner, dismissBanner } = useBanner();
-  const [displayBanner, setDisplayBanner] = useState<BannerConfig | undefined>(undefined);
+  const [displayBanner, setDisplayBanner] = useState<ResolvedBannerConfig | undefined>(undefined);
   const [isVisible, setIsVisible] = useState(false);
-  const markdownContent = useMarkdownText(displayBanner?.content || '');
+
+  const markdownContent = useMarkdocRenderer(displayBanner?.ast);
   const bannerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -101,8 +102,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
     return null;
   }
 
-  const bannerColor =
-    ((displayBanner as BannerConfig & { color?: BannerColor }).color as BannerColor) || 'info';
+  const bannerColor = displayBanner.color || 'info';
 
   return (
     <BannerWrapper
@@ -120,7 +120,7 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
           variant="ghost"
           size="var(--banner-button-size)"
           icon={<CloseIcon color={`var(--banner-${bannerColor}-icon-color)`} size="16px" />}
-          onClick={() => dismissBanner(displayBanner.content)}
+          onClick={() => dismissBanner(displayBanner.hash)}
           aria-label="Dismiss banner"
         />
       )}

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -1,7 +1,7 @@
 import React, { JSX } from 'react';
 import styled, { css } from 'styled-components';
 
-import { SortOption, CatalogViewMode } from '@redocly/theme/core/types';
+import { CatalogViewMode } from '@redocly/theme/core/types';
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
@@ -10,8 +10,8 @@ import { breakpoints } from '@redocly/theme/core';
 export type CatalogActionsRowProps = {
   searchQuery: string;
   setSearchQuery: (updatedTerm: string) => void;
-  sortOption: SortOption | null;
-  setSortOption: (option: SortOption | null) => void;
+  sortOption: string | null;
+  setSortOption: (option: string | null) => void;
   viewMode?: CatalogViewMode;
   onViewModeChange?: (mode: CatalogViewMode) => void;
   isDetailsPage?: boolean;

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

@@ -9,7 +9,7 @@ import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighl
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { ArrowRightIcon } from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
-import { CatalogTagsWithTooltip } from '@redocly/theme/components/Catalog/CatalogTagsWithTooltip';
+import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityIcon } from '@redocly/theme/components/Catalog/CatalogEntityIcon';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 
@@ -54,7 +54,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
         <CardMetadataSection>
           <MetadataRow>
             <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
-            <CatalogTagsWithTooltip
+            <CatalogTags
               items={entity.domains?.map((domain) => domain.title) || []}
               showPlaceholder={true}
               tagProps={{
@@ -71,7 +71,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
           <MetadataRow>
             <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
-            <CatalogTagsWithTooltip
+            <CatalogTags
               items={entity.owners?.map((owner) => owner.key) || []}
               showPlaceholder={true}
               showAvatars={true}
@@ -80,7 +80,6 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
                   fontSize: 'var(--catalog-card-font-size)',
                   backgroundColor: 'var(--catalog-card-icon-bg-color)',
                   borderRadius: 'var(--border-radius-xl)',
-                  paddingLeft: 'var(--catalog-card-metadata-owner-tag-left-padding)',
                 },
                 textTransform: 'none',
                 variant: 'outline',
@@ -93,7 +92,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
       <Divider />
 
       <CardFooter hasTags={!!entity.tags?.length}>
-        <CatalogTagsWithTooltip
+        <CatalogTags
           items={entity.tags || []}
           tagProps={{
             style: {
@@ -179,7 +178,6 @@ const ArrowCircle = styled.div`
 const CardContent = styled.div`
   min-width: 0;
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
-  height: 100%;
 `;
 
 const CardFooter = styled.div<{ hasTags: boolean }>`