@redocly/theme 0.63.0 → 0.64.0-next.1

package/lib/core/styles/global.js

@@ -31,20 +31,21 @@ const variables_26 = require("../../components/Markdown/variables");
 const variables_27 = require("../../components/Banner/variables");
 const variables_28 = require("../../markdoc/components/Tabs/variables");
 const variables_29 = require("../../markdoc/components/Mermaid/variables");
-const variables_30 = require("../../components/LastUpdated/variables");
-const variables_31 = require("../../components/Logo/variables");
-const variables_32 = require("../../components/StatusCode/variables");
-const variables_33 = require("../../components/Segmented/variables");
-const variables_34 = require("../../components/UserMenu/variables");
-const variables_35 = require("../../components/Tags/variables");
-const variables_36 = require("../../components/VersionPicker/variables");
-const variables_37 = require("../../components/DatePicker/variables");
-const variables_38 = require("../../components/Switch/variables");
-const variables_39 = require("../../markdoc/components/Cards/variables");
-const variables_40 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_41 = require("../../components/SkipContent/variables");
-const variables_42 = require("../../components/PageActions/variables");
-const variables_43 = require("../../components/SvgViewer/variables");
+const variables_30 = require("../../markdoc/components/ExcalidrawDiagram/variables");
+const variables_31 = require("../../components/LastUpdated/variables");
+const variables_32 = require("../../components/Logo/variables");
+const variables_33 = require("../../components/StatusCode/variables");
+const variables_34 = require("../../components/Segmented/variables");
+const variables_35 = require("../../components/UserMenu/variables");
+const variables_36 = require("../../components/Tags/variables");
+const variables_37 = require("../../components/VersionPicker/variables");
+const variables_38 = require("../../components/DatePicker/variables");
+const variables_39 = require("../../components/Switch/variables");
+const variables_40 = require("../../markdoc/components/Cards/variables");
+const variables_41 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_42 = require("../../components/SkipContent/variables");
+const variables_43 = require("../../components/PageActions/variables");
+const variables_44 = require("../../components/SvgViewer/variables");
 const dark_1 = require("./dark");
 const themeColors = (0, styled_components_1.css) `
   /* === Palette === */
@@ -1148,7 +1149,7 @@ const icon = (0, styled_components_1.css) `
 
   --icon-color-primary: var(--color-warm-grey-11); // @presenter Color
   --icon-color-secondary: var(--color-warm-grey-8); // @presenter Color
-  --icon-color-on-color: var(--color-warm-grey-1); // @presenter Color
+  --icon-color-on-color: var(--color-static-white); // @presenter Color
   --icon-color-interactive: var(--color-blueberry-6); // @presenter Color
   --icon-color-inverse: var(--color-white); // @presenter Color
   --icon-color-disabled: var(--color-warm-grey-5); // @presenter Color
@@ -1230,6 +1231,11 @@ const replay = (0, styled_components_1.css) `
   --replay-runtime-expression-bg-color: rgba(54, 90, 249, 0.08); // @presenter Color
   --replay-operators-color: rgba(193, 142, 31, 1); // @presenter Color
 
+  --replay-ai-gradient-soft: linear-gradient(62.6deg, rgba(113, 94, 254, 0.16) 0%, rgba(255, 92, 220, 0.16) 100%);
+  --replay-ai-gradient-disabled: linear-gradient(62.6deg, rgba(113, 94, 254, 0.6) 0%, rgba(255, 92, 220, 0.6) 100%);
+  --replay-ai-user-message-gradient: linear-gradient(73.52deg, rgba(113, 94, 254, 0.08) 10.13%, rgba(255, 92, 220, 0.08) 87.29%);
+
+  --replay-ai-send-button-disabled-border: 1px solid #ffffff33;
   // @tokens End
 `;
 exports.styles = (0, styled_components_1.css) `
@@ -1245,27 +1251,28 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_19.button}
     ${variables_20.aiAssistantButton}
     ${variables_20.connectMCPButton}
-    ${variables_39.cards}
+    ${variables_40.cards}
     ${variables_8.catalog}
     ${variables_10.catalogClassic}
     ${variables_24.code}
-    ${variables_40.codeWalkthrough}
+    ${variables_41.codeWalkthrough}
     ${docsDropdown}
     ${variables_14.dropdown}
     ${error}
     ${variables_9.filter}
     ${variables_18.footer}
     ${headingsTypography}
-    ${variables_35.httpTag}
+    ${variables_36.httpTag}
     ${inputs}
     ${variables_1.languagePicker}
-    ${variables_30.lastUpdated}
+    ${variables_31.lastUpdated}
     ${links}
     ${loadProgressBar}
-    ${variables_31.logo}
+    ${variables_32.logo}
     ${variables_26.markdown}
     ${variables_28.markdownTabs}
     ${variables_29.mermaid}
+    ${variables_30.excalidraw}
     ${variables_23.menu}
     ${variables_23.mobileMenu}
     ${modal}
@@ -1283,24 +1290,24 @@ exports.styles = (0, styled_components_1.css) `
     ${variables_7.toc}
     ${variables_15.tooltip}
     ${typography}
-    ${variables_34.userMenu}
-    ${variables_36.versionPicker}
+    ${variables_35.userMenu}
+    ${variables_37.versionPicker}
     ${zIndexDepth}
     ${scorecardColors}
-    ${variables_32.statusCode}
+    ${variables_33.statusCode}
     ${tab}
     ${icon}
     ${tree}
-    ${variables_33.segmented}
-    ${variables_38.switcher}
+    ${variables_34.segmented}
+    ${variables_39.switcher}
     ${variables_16.checkbox}
     ${variables_3.feedback}
     ${variables_2.scorecard}
-    ${variables_37.datePicker}
+    ${variables_38.datePicker}
     ${replay}
-    ${variables_41.skipContent}
-    ${variables_42.pageActions}
-    ${variables_43.svgViewer}
+    ${variables_42.skipContent}
+    ${variables_43.pageActions}
+    ${variables_44.svgViewer}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

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

@@ -5,7 +5,7 @@ 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 } from './catalog';
+import type { UseCatalogResponse, FilteredCatalog, UseCatalogSortResponse, UseCatalogSearchResponse, UseCatalogProps, CatalogApiParams, CatalogApiResults, SortOption } from './catalog';
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem, ToolCallName, ContentSegment } from './search';
@@ -137,7 +137,7 @@ export type ThemeHooks = {
         nextPage?: ResolvedNavItemWithLink;
     } | undefined;
     useCatalog: (props?: UseCatalogProps) => UseCatalogResponse;
-    useCatalogSort: () => UseCatalogSortResponse;
+    useCatalogSort: (defaultSortOption?: SortOption | null) => UseCatalogSortResponse;
     useCatalogSearch: () => UseCatalogSearchResponse;
     useFetchCatalogEntities: (params: CatalogApiParams, initialData?: BffCatalogEntityList) => CatalogApiResults<BffCatalogEntity>;
     useFetchCatalogEntitiesRelations: (params: CatalogApiParams & {

package/lib/icons/ColorPaletteIcon/ColorPaletteIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ColorPaletteIcon: 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/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

@@ -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

@@ -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/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.63.0",
+  "version": "0.64.0-next.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.105.2",
-    "@redocly/realm-asyncapi-sdk": "0.9.0"
+    "@redocly/realm-asyncapi-sdk": "0.10.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",

package/src/components/Catalog/Catalog.tsx

@@ -22,11 +22,10 @@ import { CatalogSelector } from '@redocly/theme/components/Catalog/CatalogSelect
 import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 import { FilterInput } from '@redocly/theme/components/Filter/FilterInput';
-import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogEntities } from '@redocly/theme/components/Catalog/CatalogEntities';
 import { CatalogMobileTopBar } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar';
 import { CatalogMobileFiltersPanelOverlay } from '@redocly/theme/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay';
+import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
 
 type CatalogFiltersWithCounts = Record<string, { value: string; count: number }[]>;
 
@@ -173,20 +172,14 @@ export function Catalog(props: CatalogProps): JSX.Element {
                 {translate(catalogConfig?.descriptionTranslationKey)}
               </CatalogDescription>
 
-              <CatalogActionsRow>
-                <CatalogSearchInputWrapper>
-                  <FilterInput
-                    value={searchQuery}
-                    onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
-                    dataTestId="catalog-search-input"
-                  />
-                </CatalogSearchInputWrapper>
-
-                <CatalogControlsWrapper>
-                  <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
-                  <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
-                </CatalogControlsWrapper>
-              </CatalogActionsRow>
+              <CatalogActionsRow
+                searchQuery={searchQuery}
+                setSearchQuery={setSearchQuery}
+                sortOption={sortOption}
+                setSortOption={setSortOption}
+                viewMode={viewMode}
+                onViewModeChange={setViewMode}
+              />
 
               <CatalogEntities
                 catalogConfig={catalogConfig}
@@ -198,7 +191,6 @@ export function Catalog(props: CatalogProps): JSX.Element {
                 viewMode={viewMode}
                 setEntitiesCounter={setEntitiesCounter}
                 initialEntitiesList={initialEntitiesList}
-                setSortOption={setSortOption}
                 handleSortClick={handleSortClick}
                 isColumnSorted={isColumnSorted}
               />
@@ -210,23 +202,6 @@ export function Catalog(props: CatalogProps): JSX.Element {
   );
 }
 
-const CatalogActionsRow = styled.div`
-  display: flex;
-  align-items: center;
-  margin-bottom: var(--spacing-xl);
-
-  @media screen and (max-width: ${breakpoints.medium}) {
-    display: none;
-  }
-`;
-
-const CatalogControlsWrapper = styled.div`
-  display: var(--catalog-controls-wrapper-display);
-  align-items: var(--catalog-controls-wrapper-align-items);
-  margin-left: var(--catalog-controls-wrapper-margin-left);
-  gap: var(--catalog-controls-wrapper-gap);
-`;
-
 const CatalogContentWrapper = styled.div`
   flex: 1;
   min-width: 0;
@@ -326,12 +301,3 @@ const FiltersSidebar = styled(Sidebar)`
     border: none;
   }
 `;
-
-const CatalogSearchInputWrapper = styled.div`
-  display: none;
-  width: var(--catalog-search-input-wrapper-width);
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: block;
-  }
-`;

package/src/components/Catalog/CatalogActionsRow.tsx

@@ -1,10 +1,11 @@
 import React, { JSX } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { SortOption, 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';
+import { breakpoints } from '@redocly/theme/core';
 
 export type CatalogActionsRowProps = {
   searchQuery: string;
@@ -13,7 +14,7 @@ export type CatalogActionsRowProps = {
   setSortOption: (option: SortOption | null) => void;
   viewMode?: CatalogViewMode;
   onViewModeChange?: (mode: CatalogViewMode) => void;
-  style?: React.CSSProperties;
+  isDetailsPage?: boolean;
 };
 
 export function CatalogActionsRow({
@@ -23,16 +24,22 @@ export function CatalogActionsRow({
   setSortOption,
   viewMode,
   onViewModeChange,
-  style,
+  isDetailsPage = false,
 }: CatalogActionsRowProps): JSX.Element {
   return (
-    <CatalogActionsRowWrapper style={style}>
+    <CatalogActionsRowWrapper isDetailsPage={isDetailsPage}>
       <CatalogSearchInputWrapper>
-        <FilterInput value={searchQuery} onChange={(updatedTerm) => setSearchQuery(updatedTerm)} />
+        <FilterInput
+          value={searchQuery}
+          onChange={(updatedTerm) => setSearchQuery(updatedTerm)}
+          dataTestId="catalog-search-input"
+        />
       </CatalogSearchInputWrapper>
 
       <CatalogControlsWrapper>
-        <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        {viewMode === 'cards' && (
+          <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
+        )}
         {viewMode && onViewModeChange && (
           <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={onViewModeChange} />
         )}
@@ -41,9 +48,20 @@ export function CatalogActionsRow({
   );
 }
 
-export const CatalogActionsRowWrapper = styled.div`
+export const CatalogActionsRowWrapper = styled.div<{ isDetailsPage: boolean }>`
   display: flex;
   align-items: center;
+
+  margin-bottom: ${({ isDetailsPage }) => (isDetailsPage ? 'var(--spacing-sm)' : 'var(--spacing-xl)')};
+  
+
+  ${({ isDetailsPage }) =>
+    !isDetailsPage &&
+    css`
+    @media screen and (max-width: ${breakpoints.medium}) {
+      display: none;
+    }
+  `}
 `;
 
 export const CatalogControlsWrapper = styled.div`

package/src/components/Catalog/CatalogEntities.tsx

@@ -25,7 +25,6 @@ export type CatalogEntitiesProps = {
   setEntitiesCounter: (counter: number) => void;
   initialEntitiesList?: BffCatalogEntityList;
   sortOption: SortOption | null;
-  setSortOption: (sortOption: SortOption | null) => void;
   handleSortClick: (sortKey: string, direction: 'asc' | 'desc') => void;
   isColumnSorted: (sortKey: string, direction: 'asc' | 'desc') => boolean;
 };
@@ -42,7 +41,6 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
     searchQuery,
     viewMode,
     setEntitiesCounter,
-    setSortOption,
     handleSortClick,
     isColumnSorted,
   } = props;
@@ -109,7 +107,6 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
         <CatalogTableView<BffCatalogEntity>
           entities={entities}
           catalogConfig={catalogConfig}
-          setSortOption={setSortOption}
           currentSortOption={sortOption}
           handleSortClick={handleSortClick}
           isColumnSorted={isColumnSorted}