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

package/lib/icons/ColorPaletteIcon/ColorPaletteIcon.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPaletteIcon = 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 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M3.5 5.25456C3.98325 5.25456 4.375 4.86281 4.375 4.37956C4.375 3.89631 3.98325 3.50456 3.5 3.50456C3.01675 3.50456 2.625 3.89631 2.625 4.37956C2.625 4.86281 3.01675 5.25456 3.5 5.25456Z" }),
+    react_1.default.createElement("path", { d: "M6.125 3.94206C6.60825 3.94206 7 3.55031 7 3.06706C7 2.58381 6.60825 2.19206 6.125 2.19206C5.64175 2.19206 5.25 2.58381 5.25 3.06706C5.25 3.55031 5.64175 3.94206 6.125 3.94206Z" }),
+    react_1.default.createElement("path", { d: "M8.75 5.25456C9.23325 5.25456 9.625 4.86281 9.625 4.37956C9.625 3.89631 9.23325 3.50456 8.75 3.50456C8.26675 3.50456 7.875 3.89631 7.875 4.37956C7.875 4.86281 8.26675 5.25456 8.75 5.25456Z" }),
+    react_1.default.createElement("path", { d: "M9.1875 7.87956C9.67075 7.87956 10.0625 7.48781 10.0625 7.00456C10.0625 6.52131 9.67075 6.12956 9.1875 6.12956C8.70425 6.12956 8.3125 6.52131 8.3125 7.00456C8.3125 7.48781 8.70425 7.87956 9.1875 7.87956Z" }),
+    react_1.default.createElement("path", { d: "M7.4375 10.0671C7.92075 10.0671 8.3125 9.67531 8.3125 9.19206C8.3125 8.70881 7.92075 8.31706 7.4375 8.31706C6.95425 8.31706 6.5625 8.70881 6.5625 9.19206C6.5625 9.67531 6.95425 10.0671 7.4375 10.0671Z" }),
+    react_1.default.createElement("path", { d: "M6.36125 0.00455826C5.53725 -0.0272487 4.7153 0.107661 3.9447 0.401198C3.17409 0.694735 2.4707 1.14086 1.87668 1.71281C1.28266 2.28477 0.810249 2.97079 0.487771 3.72974C0.165293 4.48869 -0.000611956 5.30494 1.69613e-06 6.12956C-2.00107e-05 6.45389 0.074769 6.77385 0.218553 7.06457C0.362337 7.35528 0.57124 7.60891 0.829017 7.80574C1.08679 8.00256 1.3865 8.13728 1.70482 8.1994C2.02315 8.26153 2.35151 8.24939 2.66438 8.16393L3.15438 8.02831C3.3493 7.9751 3.55388 7.96761 3.75217 8.00643C3.95047 8.04526 4.13712 8.12934 4.29759 8.25212C4.45806 8.37491 4.58801 8.53309 4.67733 8.71433C4.76664 8.89558 4.8129 9.095 4.8125 9.29706V10.9421C4.8125 11.2902 4.95078 11.624 5.19692 11.8701C5.44307 12.1163 5.77691 12.2546 6.125 12.2546C6.94962 12.2552 7.76587 12.0893 8.52482 11.7668C9.28377 11.4443 9.96979 10.9719 10.5417 10.3779C11.1137 9.78386 11.5598 9.08046 11.8534 8.30986C12.1469 7.53926 12.2818 6.71731 12.25 5.89331C12.1865 4.35185 11.5457 2.89063 10.4548 1.79973C9.36393 0.708834 7.90271 0.0680368 6.36125 0.00455826ZM9.90938 9.76518C9.42087 10.2766 8.83352 10.6835 8.18297 10.961C7.53243 11.2385 6.83227 11.3809 6.125 11.3796C6.00897 11.3796 5.89769 11.3335 5.81564 11.2514C5.7336 11.1694 5.6875 11.0581 5.6875 10.9421V9.29706C5.6875 8.7169 5.45703 8.1605 5.0468 7.75026C4.63656 7.34003 4.08016 7.10956 3.5 7.10956C3.30341 7.10991 3.10774 7.13639 2.91813 7.18831L2.42813 7.32393C2.24511 7.37298 2.05326 7.37922 1.86744 7.34216C1.68163 7.3051 1.50685 7.22574 1.35665 7.11024C1.20645 6.99474 1.08488 6.84619 1.00135 6.67612C0.917824 6.50605 0.87459 6.31903 0.875002 6.12956C0.874459 5.42247 1.01676 4.72256 1.29336 4.07181C1.56996 3.42107 1.97517 2.83291 2.48466 2.34261C2.99416 1.85232 3.59745 1.47 4.25833 1.21859C4.91922 0.967181 5.62408 0.851864 6.33063 0.879558C7.64627 0.948081 8.8899 1.50154 9.82146 2.4331C10.753 3.36466 11.3065 4.60829 11.375 5.92393C11.4051 6.63092 11.2907 7.33662 11.0387 7.99785C10.7867 8.65908 10.4024 9.26195 9.90938 9.76956V9.76518Z" })));
+exports.ColorPaletteIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ColorPaletteIcon/ColorPaletteIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ColorPaletteIcon.js.map

package/lib/icons/StopIcon/StopIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const StopIcon: 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/StopIcon/StopIcon.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.StopIcon = 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", viewBox: "0 0 14 14", fill: "none" }, props),
+    react_1.default.createElement("path", { d: "M10.5 3.5V10.5H3.5V3.5H10.5ZM10.5 2.625H3.5C3.26794 2.625 3.04538 2.71719 2.88128 2.88128C2.71719 3.04538 2.625 3.26794 2.625 3.5V10.5C2.625 10.7321 2.71719 10.9546 2.88128 11.1187C3.04538 11.2828 3.26794 11.375 3.5 11.375H10.5C10.7321 11.375 10.9546 11.2828 11.1187 11.1187C11.2828 10.9546 11.375 10.7321 11.375 10.5V3.5C11.375 3.26794 11.2828 3.04538 11.1187 2.88128C10.9546 2.71719 10.7321 2.625 10.5 2.625Z" })));
+exports.StopIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/StopIcon/StopIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=StopIcon.js.map

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';
@@ -247,6 +247,7 @@ export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
 export * from './icons/PlayIcon/PlayIcon';
+export * from './icons/StopIcon/StopIcon';
 export * from './icons/PlaylistIcon/PlaylistIcon';
 export * from './icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from './icons/TaskViewIcon/TaskViewIcon';
@@ -269,6 +270,7 @@ export * from './icons/GenericIcon/GenericIcon';
 export * from './icons/ShareIcon/ShareIcon';
 export * from './icons/HashtagIcon/HashtagIcon';
 export * from './icons/FitToViewIcon/FitToViewIcon';
+export * from './icons/ColorPaletteIcon/ColorPaletteIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

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);
@@ -310,6 +310,7 @@ __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
 __exportStar(require("./icons/PlayIcon/PlayIcon"), exports);
+__exportStar(require("./icons/StopIcon/StopIcon"), exports);
 __exportStar(require("./icons/PlaylistIcon/PlaylistIcon"), exports);
 __exportStar(require("./icons/WorkflowAutomationIcon/WorkflowAutomationIcon"), exports);
 __exportStar(require("./icons/TaskViewIcon/TaskViewIcon"), exports);
@@ -332,6 +333,7 @@ __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 __exportStar(require("./icons/ShareIcon/ShareIcon"), exports);
 __exportStar(require("./icons/HashtagIcon/HashtagIcon"), exports);
 __exportStar(require("./icons/FitToViewIcon/FitToViewIcon"), exports);
+__exportStar(require("./icons/ColorPaletteIcon/ColorPaletteIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.d.ts

@@ -0,0 +1,7 @@
+import type { JSX } from 'react';
+type ExcalidrawDiagramProps = {
+    diagramHtml: string;
+    className?: string;
+};
+export declare function ExcalidrawDiagram({ diagramHtml, className }: ExcalidrawDiagramProps): JSX.Element;
+export {};

package/lib/markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram.js

@@ -0,0 +1,95 @@
+"use strict";
+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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExcalidrawDiagram = ExcalidrawDiagram;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
+function ExcalidrawDiagram({ diagramHtml, className }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const open = () => setIsOpen(true);
+    const close = () => setIsOpen(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('excalidraw-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/ExcalidrawDiagram/ExcalidrawDiagram", onClick: open, onKeyDown: (e) => (e.key === 'Enter' || e.key === ' ') && open(), role: "button", tabIndex: 0, "aria-label": translate('excalidraw.openFullscreen', 'Click to open diagram in fullscreen') }),
+        react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
+                zoomIn: translate('excalidraw.zoomIn', 'Zoom in'),
+                zoomOut: translate('excalidraw.zoomOut', 'Zoom out'),
+                fitToView: translate('excalidraw.reset', 'Fit to view'),
+                close: translate('excalidraw.close', 'Close'),
+                dialogLabel: translate('excalidraw.viewer', 'Excalidraw diagram viewer'),
+            } },
+            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
+}
+const Wrapper = styled_components_1.default.div `
+  background-color: var(--excalidraw-bg-color);
+  border-radius: var(--excalidraw-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+  overflow: hidden;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
+
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+
+    > rect {
+      fill: var(--excalidraw-bg-color);
+    }
+  }
+
+  & + & {
+    margin-top: var(--spacing-md);
+  }
+`;
+const ViewerContent = styled_components_1.default.div `
+  svg {
+    display: block;
+    max-width: none !important;
+  }
+`;
+//# sourceMappingURL=ExcalidrawDiagram.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.d.ts

@@ -0,0 +1 @@
+export declare const excalidraw: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.d.ts

@@ -0,0 +1 @@
+export declare const excalidrawDarkMode: import("styled-components").FlattenSimpleInterpolation;

package/lib/markdoc/components/ExcalidrawDiagram/variables.dark.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.excalidrawDarkMode = void 0;
+const styled_components_1 = require("styled-components");
+exports.excalidrawDarkMode = (0, styled_components_1.css) `
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+`;
+//# sourceMappingURL=variables.dark.js.map

package/lib/markdoc/components/ExcalidrawDiagram/variables.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.excalidraw = void 0;
+const styled_components_1 = require("styled-components");
+exports.excalidraw = (0, styled_components_1.css) `
+  /**
+  * @tokens Excalidraw
+  */
+
+  --excalidraw-bg-color: var(--bg-color); // @presenter Color
+  --excalidraw-border-radius: var(--border-radius-lg); // @presenter BorderRadius
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

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/lib/markdoc/components/Mermaid/Mermaid.js

@@ -81,6 +81,8 @@ const Wrapper = styled_components_1.default.div `
   }
 `;
 const ViewerContent = styled_components_1.default.div `
+  background-color: var(--mermaid-bg-color);
+
   * {
     font-family: var(--mermaid-font-family) !important;
   }

package/lib/markdoc/components/default.d.ts

@@ -3,6 +3,7 @@ export * from '../../markdoc/components/InlineSvg/InlineSvg';
 export * from '../../markdoc/components/MarkdocExample/MarkdocExample';
 export * from '../../markdoc/components/Heading/Heading';
 export * from '../../markdoc/components/Mermaid/Mermaid';
+export * from '../../markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram';
 export * from '../../markdoc/components/HtmlBlock/HtmlBlock';
 export * from '../../markdoc/components/Tabs/Tab';
 export * from '../../markdoc/components/Tabs/TabList';

package/lib/markdoc/components/default.js

@@ -19,6 +19,7 @@ __exportStar(require("../../markdoc/components/InlineSvg/InlineSvg"), exports);
 __exportStar(require("../../markdoc/components/MarkdocExample/MarkdocExample"), exports);
 __exportStar(require("../../markdoc/components/Heading/Heading"), exports);
 __exportStar(require("../../markdoc/components/Mermaid/Mermaid"), exports);
+__exportStar(require("../../markdoc/components/ExcalidrawDiagram/ExcalidrawDiagram"), exports);
 __exportStar(require("../../markdoc/components/HtmlBlock/HtmlBlock"), exports);
 __exportStar(require("../../markdoc/components/Tabs/Tab"), exports);
 __exportStar(require("../../markdoc/components/Tabs/TabList"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.64.0-next.0",
+  "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 }>`

package/src/components/Catalog/CatalogEntities.tsx

@@ -2,7 +2,7 @@ import React, { JSX, useEffect } from 'react';
 
 import type { CatalogEntityConfig } from '@redocly/config';
 
-import { BffCatalogEntity, BffCatalogEntityList, SortOption } from '@redocly/theme/core/types';
+import { BffCatalogEntity, BffCatalogEntityList } from '@redocly/theme/core/types';
 import {
   useThemeHooks,
   useCatalogEntities,
@@ -24,7 +24,7 @@ export type CatalogEntitiesProps = {
   viewMode: string;
   setEntitiesCounter: (counter: number) => void;
   initialEntitiesList?: BffCatalogEntityList;
-  sortOption: SortOption | null;
+  sortOption: string | null;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -66,7 +66,7 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
         initialFilter && filterQuery
           ? `(${initialFilter}) AND (${filterQuery})`
           : initialFilter || filterQuery,
-      sort: sortOption || undefined,
+      sort: sortOption || (viewMode === 'table' ? 'updated_at' : 'type,title'),
       search: searchQuery,
     },
     props.initialEntitiesList,

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

@@ -2,12 +2,9 @@ import React from 'react';
 import styled from 'styled-components';
 import { Route, Routes, useSearchParams } from 'react-router-dom';
 
-import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type {
-  BffCatalogEntity,
-  BffCatalogRelatedEntity,
-  BffCatalogRelatedEntityList,
-} from '@redocly/theme/core/types';
+import type { CatalogEntityConfig } from '@redocly/config';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import type { CatalogEntityPageProps, CatalogEntityProps } from '@redocly/theme/core/types';
 
 import { breakpoints } from '@redocly/theme/core/utils';
 import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
@@ -22,24 +19,6 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
-export type CatalogEntityProps = {
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  RedocSchema: React.ComponentType<any>;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  StoreProvider: React.ComponentType<any>;
-  GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
-};
-
-type CatalogEntityPageProps = {
-  status: 'success';
-  entity: BffCatalogEntity;
-  relatedEntity: BffCatalogRelatedEntity | null;
-  relations: BffCatalogRelatedEntityList;
-  entitiesCatalogConfig: EntitiesCatalogConfig;
-  catalogConfig: CatalogEntityConfig;
-  sharedDataIds?: Record<string, string>;
-};
-
 const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactElement => {
   switch (entity.type) {
     case 'api-operation':

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

@@ -85,7 +85,7 @@ const MetadataWrapper = styled.div`
   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-bottom: var(--spacing-base);
 `;
 
 const Label = styled.span`

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

@@ -52,7 +52,7 @@ const LinksWrapper = styled.div`
   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: 0 0 var(--spacing-base) 0;
 `;
 
 const Label = styled.div`

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

@@ -81,6 +81,7 @@ const CatalogEntityPropertiesGridWrapper = styled.div`
   display: grid;
   gap: var(--spacing-base);
   grid-template-columns: 1fr;
+  margin-bottom: var(--spacing-lg);
 
   @media screen and (min-width: ${breakpoints.small}) {
     grid-template-columns: repeat(2, 1fr);

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

@@ -64,10 +64,11 @@ const CardHeader = styled.div`
 const CardContent = styled.div`
   flex: 1;
   display: flex;
-  align-items: flex-end;
+  align-items: center;
   gap: var(--catalog-card-content-gap);
   flex-wrap: wrap;
   color: var(--text-color-primary);
   font-size: var(--font-size-lg);
   line-height: var(--line-height-lg);
+  font-weight: var(--font-weight-semibold);
 `;

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

@@ -2,9 +2,9 @@ import React, { JSX } from 'react';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type ContactPropertyProps = {
   entity: BffCatalogEntity;
@@ -28,18 +28,16 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         content={
           <>
             {channels?.map((channel) => (
-              <Tag
+              <Button
                 key={channel.name}
-                textTransform="none"
-                style={{ backgroundColor: 'var(--bg-color)', cursor: 'pointer' }}
-                onClick={() => {
-                  if (channel.url) {
-                    window.open(channel.url, '_blank');
-                  }
-                }}
+                variant="outlined"
+                size="small"
+                style={{ backgroundColor: 'var(--bg-color)' }}
+                to={channel.url}
+                external={true}
               >
                 {channel.name}
-              </Tag>
+              </Button>
             ))}
           </>
         }

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

@@ -1,17 +1,19 @@
 import React, { JSX } from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useCatalogEntityLink, useThemeHooks } from '@redocly/theme/core/hooks';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type DomainsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
-  const { useTranslate } = useThemeHooks();
+  const { useTranslate, usePageProps } = useThemeHooks();
+  const { entitiesCatalogConfig } = usePageProps<CatalogEntityPageProps>();
+  const { getEntityLink } = useCatalogEntityLink(entitiesCatalogConfig);
   const { translate } = useTranslate();
 
   const { domains = [] } = entity;
@@ -28,14 +30,17 @@ export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
         content={
           <>
             {domains?.map((domain) => (
-              <Tag
+              <Button
                 key={domain?.id}
+                variant="outlined"
+                size="small"
                 style={{ backgroundColor: 'var(--bg-color)' }}
-                variant="outline"
+                to={getEntityLink(domain)}
+                icon={<GraphIcon />}
+                external={true}
               >
-                <GraphIcon />
                 {domain?.title}
-              </Tag>
+              </Button>
             ))}
           </>
         }

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

@@ -26,6 +26,7 @@ export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
         content={
           <>
             <Tag
+              variant="outline"
               textTransform="none"
               key={entity.metadata?.specType}
               style={{ backgroundColor: 'var(--bg-color)' }}