@redocly/theme 0.53.0-next.2 → 0.53.0-next.3

package/lib/components/CodeBlock/CodeBlockControls.js

@@ -8,6 +8,7 @@ const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlockTabs_1 = require("../../components/CodeBlock/CodeBlockTabs");
 const CopyButton_1 = require("../../components/Buttons/CopyButton");
+const TooltipWrapper_1 = require("../../components/Tooltip/TooltipWrapper");
 const hooks_1 = require("../../core/hooks");
 const DeselectIcon_1 = require("../../icons/DeselectIcon/DeselectIcon");
 const MaximizeIcon_1 = require("../../icons/MaximizeIcon/MaximizeIcon");
@@ -33,16 +34,18 @@ function CodeBlockControls({ children, className, title, controls, tabs, }) {
         title && react_1.default.createElement(Title, null, title),
         tabs && react_1.default.createElement(CodeBlockTabs_1.CodeBlockTabs, { tabs: tabs }),
         react_1.default.createElement(ControlsWrapper, null,
-            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report'))) : null,
+            report && !((_a = report === null || report === void 0 ? void 0 : report.props) === null || _a === void 0 ? void 0 : _a.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipKey: "codeSnippet.report.tooltipText", placement: "top" },
+                react_1.default.createElement(ControlButton, Object.assign({ variant: "text", size: "small", "data-testid": "report-button", icon: controlsType === 'icon' ? react_1.default.createElement(WarningSquareIcon_1.WarningSquareIcon, { size: "18px" }) : undefined }, report.props), controlsType != 'icon' && (((_b = report.props) === null || _b === void 0 ? void 0 : _b.buttonText) || 'Report')))) : null,
             expand && !((_c = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.expand) === null || _c === void 0 ? void 0 : _c.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "expand-all", icon: controlsType === 'icon' ? react_1.default.createElement(MaximizeIcon_1.MaximizeIcon, null) : undefined, onClick: expand === null || expand === void 0 ? void 0 : expand.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Expand all'))) : null,
             collapse && !((_d = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.collapse) === null || _d === void 0 ? void 0 : _d.hide) ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "collapse-all", icon: controlsType === 'icon' ? react_1.default.createElement(MinimizeIcon_1.MinimizeIcon, null) : undefined, onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onClick }, controlsType !== 'icon' && ((expand === null || expand === void 0 ? void 0 : expand.label) || 'Collapse all'))) : null,
             select ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "select-all", icon: controlsType === 'icon' ? react_1.default.createElement(SelectIcon_1.SelectIcon, null) : undefined, onClick: select === null || select === void 0 ? void 0 : select.onClick }, controlsType !== 'icon' && (select === null || select === void 0 ? void 0 : select.label) ? select.label : 'Select all')) : null,
             deselect ? (react_1.default.createElement(ControlButton, { variant: "text", size: "small", "data-testid": "clear-all", icon: controlsType === 'icon' ? react_1.default.createElement(DeselectIcon_1.DeselectIcon, null) : undefined, onClick: deselect === null || deselect === void 0 ? void 0 : deselect.onClick }, controlsType !== 'icon' && (deselect === null || deselect === void 0 ? void 0 : deselect.label) ? deselect.label : 'Clear all')) : null,
-            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
-                    var _a, _b;
-                    (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
-                    (_b = telemetry === null || telemetry === void 0 ? void 0 : telemetry.send) === null || _b === void 0 ? void 0 : _b.call(telemetry, 'code_snippet_copied', {});
-                } })) : null))) : null;
+            copy && !((_e = codeSnippet === null || codeSnippet === void 0 ? void 0 : codeSnippet.copy) === null || _e === void 0 ? void 0 : _e.hide) ? (react_1.default.createElement(TooltipWrapper_1.TooltipWrapper, { tooltipKey: "codeSnippet.copy.tooltipText", placement: "top" },
+                react_1.default.createElement(CopyButton_1.CopyButton, { data: copy.data, "data-source": copy.dataSource, "data-hash": copy.dataHash, type: controlsType, toasterPlacement: copy.toasterPlacement, toasterDuration: copy.toasterDuration, buttonText: copy.label, onCopyClick: () => {
+                        var _a, _b;
+                        (_a = copy === null || copy === void 0 ? void 0 : copy.onClick) === null || _a === void 0 ? void 0 : _a.call(copy);
+                        (_b = telemetry === null || telemetry === void 0 ? void 0 : telemetry.send) === null || _b === void 0 ? void 0 : _b.call(telemetry, 'code_snippet_copied', {});
+                    } }))) : null))) : null;
     return children || controls ? (react_1.default.createElement(ContainerWrapper, { "data-component-name": "CodeBlock/CodeBlockControls", className: className }, children ? children : defaultControls)) : null;
 }
 const ContainerWrapper = styled_components_1.default.div `

package/lib/components/JsonViewer/JsonViewer.d.ts

@@ -6,6 +6,7 @@ export type JsonProps = {
     className?: string;
     expandLevel: number;
     startLineNumber?: number;
+    hideHeader?: boolean;
     onCopyClick?: () => void;
 };
 export declare const JsonViewer: React.NamedExoticComponent<JsonProps>;

package/lib/components/JsonViewer/JsonViewer.js

@@ -31,7 +31,7 @@ const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const CodeBlock_1 = require("../../components/CodeBlock/CodeBlock");
 const helpers_1 = require("./helpers");
-function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, }) {
+function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, hideHeader, }) {
     const showFoldingButtons = data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
     const [expandAllSignal, setExpandAllSignal] = react_1.default.useState(undefined);
     const expandAll = () => {
@@ -48,15 +48,17 @@ function JsonComponent({ data, expandLevel = 1, className, onCopyClick, title, }
     };
     const source = JSON.stringify(data, null, 2);
     return (react_1.default.createElement(exports.JsonViewerWrap, { "data-testid": "json-viewer", "data-component-name": "JsonViewer/JsonViewer", className: className },
-        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: {
-                title,
-                className: 'code-block-header',
-                controls: {
-                    copy: { data, onClick: onCopyClick, handleOutside: true },
-                    expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-                    collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
-                },
-            }, source: source },
+        react_1.default.createElement(CodeBlock_1.CodeBlock, { header: hideHeader
+                ? undefined
+                : {
+                    title,
+                    className: 'code-block-header',
+                    controls: {
+                        copy: { data, onClick: onCopyClick, handleOutside: true },
+                        expand: showFoldingButtons ? { onClick: expandAll } : undefined,
+                        collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+                    },
+                }, source: source },
             react_1.default.createElement(FoldingWrap, null,
                 react_1.default.createElement(helpers_1.JsonValue, { value: data, level: 0, standalone: true, expandAllSignal: expandAllSignal, defaultExpandLevel: Math.max(1, expandLevel) })))));
 }

package/lib/components/Menu/MenuItem.js

@@ -51,7 +51,7 @@ function MenuItem(props) {
     const isDrilldown = type === constants_1.MenuItemType.DrillDown;
     const isNested = type === constants_1.MenuItemType.Group;
     const hasChevron = isNested && !isDrilldown;
-    const isOperation = type === constants_1.MenuItemType.Operation;
+    const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
     const handleOnClick = () => {
         var _a;
         (_a = telemetry.send) === null || _a === void 0 ? void 0 : _a.call(telemetry, 'sidebar_item_clicked', { label: item.label, type: item.type });
@@ -72,7 +72,7 @@ function MenuItem(props) {
                 item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
             item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
         isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
-        isOperation ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
+        hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
     return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
         item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
         isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,

package/lib/components/Panel/variables.js

@@ -333,6 +333,7 @@ exports.apiReferencePanels = (0, styled_components_1.css) `
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,
+  .panel-messages-samples,
   .panel-callback-samples {
     --text-color: var(--panel-samples-text-color);
     --panel-text-color: var(--panel-samples-text-color); // @presenter Color

package/lib/components/SidebarActions/SidebarActions.d.ts

@@ -4,11 +4,11 @@ export { LayoutVariant };
 export type SidebarActionsProps = {
     layout: LayoutVariant;
     collapsedSidebar: boolean;
-    isOpenapiDocs: boolean;
+    isApiDocs: boolean;
     hideCollapseSidebarButton?: boolean;
     onChangeViewClick: () => void;
     onChangeCollapseSidebarClick: () => void;
     requestAccessButton?: React.ReactElement | null;
     className?: string;
 };
-export declare const SidebarActions: ({ layout, hideCollapseSidebarButton, collapsedSidebar, isOpenapiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;
+export declare const SidebarActions: ({ layout, hideCollapseSidebarButton, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }: SidebarActionsProps) => React.JSX.Element;

package/lib/components/SidebarActions/SidebarActions.js

@@ -13,7 +13,7 @@ const Button_1 = require("../../components/Button/Button");
 const SidePanelCloseIcon_1 = require("../../icons/SidePanelCloseIcon/SidePanelCloseIcon");
 const SidePanelOpenIcon_1 = require("../../icons/SidePanelOpenIcon/SidePanelOpenIcon");
 const styled_1 = require("../../components/SidebarActions/styled");
-const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isOpenapiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
+const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSidebar, isApiDocs, onChangeViewClick, onChangeCollapseSidebarClick, requestAccessButton, className, }) => {
     const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
@@ -30,7 +30,7 @@ const SidebarActions = ({ layout, hideCollapseSidebarButton = false, collapsedSi
             }, title: collapsedSidebar
                 ? translate('sidebar.actions.show', 'Show sidebar')
                 : translate('sidebar.actions.hide', 'Hide sidebar'), size: "small", variant: "outlined", icon: collapsedSidebar ? react_1.default.createElement(SidePanelOpenIcon_1.SidePanelOpenIcon, null) : react_1.default.createElement(SidePanelCloseIcon_1.SidePanelCloseIcon, null) })),
-        isOpenapiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
+        isApiDocs && (react_1.default.createElement(styled_1.ControlsWrapChangeLayoutButtons, { isCollapsed: collapsedSidebar },
             react_1.default.createElement(ChangeViewButton_1.ChangeViewButton, { collapsedSidebar: collapsedSidebar, layout: layout, onClick: () => {
                     var _a;
                     onChangeViewClick();

package/lib/components/Tag/Tag.d.ts

@@ -3,8 +3,10 @@ type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'defa
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
+type ActionColor = 'receive' | 'send';
+type ChannelColor = 'channel';
 type HttpStatusColor = 'http-deprecated';
-type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | HttpStatusColor;
+type StatusColor = DefaultStatusColor | ActionStatusColor | SubjectStatusColor | HttpColor | ActionColor | ChannelColor | HttpStatusColor;
 type Color = 'red' | 'green' | 'blue' | 'grey' | 'gold' | 'cyan' | 'magenta' | 'purple' | 'lime' | 'geekblue' | 'yellow';
 export type TagProps = {
     className?: string;

package/lib/components/Tag/variables.dark.js

@@ -24,6 +24,19 @@ exports.tagDarkMode = (0, styled_components_1.css) `
   --tag-operation-color-options: #1a1c21; // @presenter Color
   --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-consume: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144F6; // @presenter Color
+  --tag-action-color-pub: #4144F6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #C79CF2; // @presenter Color
+
   .tag-grey,
   .tag-draft,
   .tag-schema,

package/lib/components/Tag/variables.js

@@ -197,9 +197,23 @@ exports.tag = (0, styled_components_1.css) `
   
   --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
 
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-consume: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144f6; // @presenter Color
+  --tag-action-color-pub: #4144f6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #9B51E0; // @presenter Color
+
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color
   }
+
   .tag-get {
       --tag-color: var(--tag-operation-color-get); // @presenter Color
   }
@@ -219,7 +233,52 @@ exports.tag = (0, styled_components_1.css) `
   .tag-http-deprecated {
       --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
   }
+  
+  .tag-receive {
+      --tag-color: var(--tag-action-color-receive); // @presenter Color
+  }
+
+  .tag-send {
+      --tag-color: var(--tag-action-color-send); // @presenter Color
+  }
+
+  .tag-pub {
+      --tag-color: var(--tag-action-color-pub); // @presenter Color
+  }
+
+  .tag-sub {
+      --tag-color: var(--tag-action-color-sub); // @presenter Color
+  }
 
+  .tag-consume {
+      --tag-color: var(--tag-action-color-consume); // @presenter Color
+  }
+
+  .tag-publish {
+      --tag-color: var(--tag-action-color-publish); // @presenter Color
+  }
+
+  .tag-channel {
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
+  }
+
+  .tag-topic {
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
+  }
+
+  .tag-queue {
+      --tag-color: var(--tag-action-color-queue); // @presenter Color
+  }
+
+  .tag-exchange {
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+  }
+      
+  // shorten alias for exchange tag:
+  .tag-exch {
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+  }
+      
   // @tokens End
 `;
 //# sourceMappingURL=variables.js.map

package/lib/components/Tooltip/TooltipWrapper.d.ts

@@ -0,0 +1,12 @@
+import { ReactElement } from 'react';
+import type { TooltipProps } from '../../components/Tooltip/Tooltip';
+export type TooltipWrapperProps = {
+    children: ReactElement;
+    tooltipKey: string;
+    placement?: TooltipProps['placement'];
+    width?: string;
+    className?: string;
+    showOnHover?: boolean;
+    disabled?: boolean;
+};
+export declare function TooltipWrapper({ children, tooltipKey, placement, width, className, showOnHover, disabled, }: TooltipWrapperProps): JSX.Element;

package/lib/components/Tooltip/TooltipWrapper.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipWrapper = TooltipWrapper;
+const styled_components_1 = __importDefault(require("styled-components"));
+const react_1 = __importDefault(require("react"));
+const hooks_1 = require("../../core/hooks");
+const Tooltip_1 = require("../../components/Tooltip/Tooltip");
+function TooltipWrapper({ children, tooltipKey, placement = 'top', width = 'max-content', className = '', showOnHover = true, disabled = false, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const tooltip = (0, hooks_1.useControl)();
+    const { translate } = useTranslate();
+    const handleMouseEnter = () => {
+        if (showOnHover && !disabled) {
+            tooltip.handleOpen();
+        }
+    };
+    const handleMouseLeave = () => {
+        if (showOnHover) {
+            tooltip.handleClose();
+        }
+    };
+    const handleClick = () => {
+        if (showOnHover) {
+            tooltip.handleClose();
+        }
+    };
+    return (react_1.default.createElement(Tooltip_1.Tooltip, { className: className, tip: translate(tooltipKey), isOpen: tooltip.isOpened, placement: placement, width: width },
+        react_1.default.createElement(TooltipEventWrapper, { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleClick }, children)));
+}
+const TooltipEventWrapper = styled_components_1.default.div `
+  display: contents;
+`;
+//# sourceMappingURL=TooltipWrapper.js.map

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

@@ -130,5 +130,5 @@ export type L10nConfig = {
     }[];
 };
 type TelemetryEvent = 'search_opened' | 'client_error_caught' | 'breadcrumb_clicked' | 'color_mode_switched' | 'sidebar_item_clicked' | 'sidebar_item_expanded' | 'sidebar_item_collapsed' | 'edit_page_link_clicked' | 'code_snippet_copied' | 'code_snippet_reported' | 'feedback_sent' | 'navbar_menu_item_clicked' | 'login_button_clicked' | 'login_provider_button_clicked' | 'logout_menu_item_clicked' | 'logo_clicked' | 'toc_item_clicked' | 'version_switched' | 'catalog_filter_changed' | 'catalog_item_clicked' | 'scorecard_link_clicked' | 'markdown_anchor_link_clicked' | 'back_to_catalog_button_clicked' | 'sidebar_drilldown_back_button_clicked' | 'footer_item_clicked' | 'request_api_access_button_clicked' | 'sidebar_samples_button_clicked' | 'change_layout_button_clicked' | 'version_picker_selection_change' | 'openapi_docs' | 'replay' | 'catalog_actions_button_clicked' | 'catalog_item_clicked' | 'filter_checkbox_toggled' | 'language_picker_locale_changed' | 'mobile_menu_button_close_clicked' | 'mobile_menu_button_open_clicked' | 'search_input_reset_button_clicked' | 'search_recent_remove_button_clicked' | 'product_picked';
-type OtelTelemetryEvent = 'page.viewed' | 'error' | 'search.ai.query' | 'search.query' | 'search.result.clicked' | 'openapi_docs.viewed' | 'openapi_docs.performance_metrics' | 'openapi_docs.download_definition.clicked' | 'openapi_docs.select_language.clicked' | 'openapi_docs.expand_collapse_all.clicked' | 'openapi_docs.copy_code_snippet.clicked' | 'openapi_docs.switch_servers.clicked' | 'openapi_docs.examples_switcher.clicked' | 'openapi_docs.try_it.opened';
+type OtelTelemetryEvent = 'page.viewed' | 'error' | 'search.ai.query' | 'search.query' | 'search.result.clicked' | 'openapi_docs.viewed' | 'openapi_docs.performance_metrics' | 'openapi_docs.download_definition.clicked' | 'openapi_docs.select_language.clicked' | 'openapi_docs.expand_collapse_all.clicked' | 'openapi_docs.copy_code_snippet.clicked' | 'openapi_docs.switch_servers.clicked' | 'openapi_docs.examples_switcher.clicked' | 'openapi_docs.try_it.opened' | 'asyncapi_docs.performance_metrics' | 'asyncapi_docs.viewed' | 'asyncapi_docs.switch_message.clicked' | 'asyncapi_docs.switch_example.clicked' | 'asyncapi_docs.message.clicked';
 export {};

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

@@ -1,5 +1,5 @@
 import type { TOptions } from 'i18next';
-export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
+export type TranslationKey = 'dev.newApp' | 'dev.newApp.text' | 'dev.sidebar.header' | 'dev.sidebar.footer.text' | 'dev.create.app.dialog.appName.placeholder' | 'dev.create.app.dialog.appName.error' | 'dev.create.app.dialog.selectAPIs' | 'dev.create.app.dialog.description' | 'dev.create.app.dialog.description.placeholder' | 'dev.create.app.dialog.create' | 'dev.create.app.dialog.cancel' | 'dev.main.tab.appKeys' | 'dev.main.tab.logs' | 'dev.app.description.title' | 'dev.edit.description.dialog.title' | 'dev.edit.description.dialog.save' | 'dev.edit.description.dialog.cancel' | 'dev.edit.apis.dialog.selectedAPIs' | 'dev.app.key.create' | 'dev.create.key.dialog.title' | 'dev.create.key.dialog.create' | 'dev.create.key.dialog.cancel' | 'dev.app.edit' | 'dev.app.delete' | 'dev.edit.app.dialog.title' | 'dev.edit.app.dialog.save' | 'dev.edit.app.dialog.cancel' | 'dev.delete.app.dialog.title' | 'dev.delete.app.dialog.confirmation' | 'dev.delete.app.dialog.delete' | 'dev.delete.app.dialog.cancel' | 'dev.app.key.roll' | 'dev.roll.key.dialog.title' | 'dev.roll.key.dialog.apiKey' | 'dev.roll.key.dialog.expires' | 'dev.roll.key.dialog.confirmation' | 'dev.roll.key.dialog.cancel' | 'dev.roll.key.dialog.roll' | 'dev.update.key.dialog.title' | 'dev.update.key.dialog.update' | 'dev.update.key.dialog.cancel' | 'dev.app.key.api.name' | 'dev.app.key.api.status' | 'dev.app.key.api.edit' | 'dev.edit.apis.dialog.title' | 'dev.edit.apis.dialog.apiKey' | 'dev.edit.apis.dialog.save' | 'dev.edit.apis.dialog.cancel' | 'dev.select.placeholder' | 'dev.app.overview.status.pending' | 'dev.app.overview.status.approved' | 'dev.app.overview.status.revoked' | 'dev.app.overview.status' | 'dev.app.overview.non-production' | 'dev.app.overview.production' | 'dev.app.overview.clientId' | 'dev.app.overview.apiKey' | 'dev.app.key.revoke' | 'dev.revoke.key.dialog.title' | 'dev.revoke.key.dialog.apiKey' | 'dev.revoke.key.dialog.expires' | 'dev.revoke.key.dialog.confirmation' | 'dev.revoke.key.dialog.revoke' | 'dev.revoke.key.dialog.cancel' | 'dev.app.overview.expires' | 'dev.app.overview.created' | 'dev.app.overview.visibilityToggle.hide' | 'dev.app.overview.visibilityToggle.show' | 'search.loading' | 'search.noResults.title' | 'search.keys.navigate' | 'search.keys.select' | 'search.keys.exit' | 'search.label' | 'search.cancel' | 'search.recent' | 'search.navbar.label' | 'search.suggested' | 'search.showMore' | 'search.filter.title' | 'search.filter.reset' | 'search.filter.field.reset' | 'search.ai.welcomeText' | 'search.ai.newConversation' | 'search.ai.backToSearch' | 'search.ai.placeholder' | 'search.ai.generatingResponse' | 'search.ai.followUpQuestion' | 'search.ai.suggestionsTitle' | 'search.ai.thinkingText' | 'search.ai.resourcesFound' | 'search.ai.resourcesFound.basedOn' | 'search.ai.resourcesFound.resources' | 'search.ai.button' | 'search.ai.label' | 'search.ai.disclaimer' | 'search.ai.error.description' | 'search.ai.error.description.forbidden' | 'search.ai.error.description.unauthorized' | 'search.ai.error.header' | 'search.ai.error.header.forbidden' | 'search.ai.error.header.unauthorized' | 'toc.header' | 'footer.copyrightText' | 'page.homeButton' | 'page.forbidden.title' | 'page.notFound.title' | 'page.notFound.description' | 'page.lastUpdated.timeago' | 'page.lastUpdated.on' | 'catalog.filters.placeholder' | 'catalog.filters.title' | 'catalog.filters.clearAll' | 'catalog.filters.select.addFilter' | 'catalog.filters.select.all' | 'catalog.filters.done' | 'sidebar.menu.backLabel' | 'sidebar.menu.backToLabel' | 'sidebar.actions.show' | 'sidebar.actions.hide' | 'sidebar.actions.changeLayout' | 'versionPicker.label' | 'versionPicker.unversioned' | 'codeSnippet.copy.buttonText' | 'codeSnippet.copy.tooltipText' | 'codeSnippet.copy.toasterText' | 'markdown.editPage.text' | 'feedback.settings.comment.submitText' | 'feedback.settings.comment.label' | 'feedback.settings.comment.send' | 'feedback.settings.comment.cancel' | 'feedback.settings.comment.satisfiedLabel' | 'feedback.settings.comment.neutralLabel' | 'feedback.settings.comment.dissatisfiedLabel' | 'feedback.settings.submitText' | 'feedback.settings.label' | 'feedback.settings.reasons.label' | 'feedback.settings.reasons.send' | 'feedback.settings.comment.likeLabel' | 'feedback.settings.comment.dislikeLabel' | 'feedback.sentiment.thumbUp' | 'feedback.sentiment.thumbDown' | 'feedback.settings.leftScaleLabel' | 'feedback.settings.rightScaleLabel' | 'feedback.settings.optionalEmail.placeholder' | 'feedback.settings.optionalEmail.label' | 'codeSnippet.report.buttonText' | 'codeSnippet.report.tooltipText' | 'codeSnippet.report.label' | 'userMenu.login' | 'userMenu.logout' | 'userMenu.devOnboardingLabel' | 'mobileMenu.mainMenu' | 'mobileMenu.previous' | 'mobileMenu.products' | 'page.nextButton' | 'page.previousButton' | 'openapi.download.description.title' | 'openapi.info.title' | 'openapi.info.contact.url' | 'openapi.info.contact.name' | 'openapi.info.license' | 'openapi.info.termsOfService' | 'openapi.info.metadata.title' | 'openapi.key' | 'openapi.value' | 'openapi.enum' | 'openapi.items' | 'openapi.default' | 'openapi.variable' | 'openapi.variables' | 'openapi.actions.show' | 'openapi.actions.hide' | 'openapi.actions.more' | 'openapi.languages.title' | 'openapi.servers.title' | 'openapi.operations' | 'openapi.webhooks' | 'openapi.description' | 'openapi.badges.deprecated' | 'openapi.badges.required' | 'openapi.badges.webhook' | 'openapi.request' | 'openapi.path' | 'openapi.query' | 'openapi.cookie' | 'openapi.header' | 'openapi.body' | 'openapi.responses' | 'openapi.response' | 'openapi.callbacks' | 'openapi.callbackRequest' | 'openapi.callbackResponse' | 'openapi.payload' | 'openapi.discriminator' | 'openapi.contentType' | 'openapi.tryIt' | 'openapi.loading' | 'openapi.example' | 'openapi.examples' | 'openapi.additionalProperties' | 'openapi.patternProperties' | 'openapi.required' | 'openapi.recursive' | 'openapi.complex' | 'openapi.deprecated' | 'openapi.hideExample' | 'openapi.showExample' | 'openapi.expandAll' | 'openapi.collapseAll' | 'openapi.noResponseExample' | 'openapi.noResponseContent' | 'openapi.noRequestPayload' | 'openapi.hidePattern' | 'openapi.showPattern' | 'openapi.authorizationUrl' | 'openapi.tokenUrl' | 'openapi.refreshUrl' | 'openapi.scopes' | 'openapi.security' | 'openapi.httpAuthorizationScheme' | 'openapi.bearerFormat' | 'openapi.parameterName' | 'openapi.flowType' | 'openapi.connectUrl' | 'openapi.requiredScopes' | 'openapi.unsupportedLanguage' | 'openapi.failedToGenerateCodeSample' | 'asyncapi.download.description.title' | 'asyncapi.info.title' | 'graphql.queries' | 'graphql.mutations' | 'graphql.subscriptions' | 'graphql.directives' | 'graphql.objects' | 'graphql.interfaces' | 'graphql.unions' | 'graphql.enums' | 'graphql.inputs' | 'graphql.scalars' | 'graphql.arguments.label' | 'graphql.arguments.show' | 'graphql.arguments.hide' | 'graphql.arguments.here' | 'graphql.returnTypes.label' | 'graphql.returnTypes.show' | 'graphql.returnTypes.hide' | 'graphql.possibleTypes' | 'graphql.defaultValue' | 'graphql.deprecationReason' | 'graphql.implementedInterfaces' | 'graphql.nonNull' | 'graphql.required' | 'graphql.deprecated' | 'graphql.variables' | 'graphql.querySample' | 'graphql.mutationSample' | 'graphql.subscriptionSample' | 'graphql.responseSample' | 'graphql.locations' | 'graphql.sample' | 'graphql.referenced' | 'codeWalkthrough.download' | 'codeWalkthrough.preview';
 export type Locale = {
     code: string;
     name: string;

package/lib/icons/ArrowDownIcon/ArrowDownIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const ArrowDownIcon: 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/ArrowDownIcon/ArrowDownIcon.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.ArrowDownIcon = 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({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M12.295 8.295L8.5 12.085V2H7.5V12.085L3.705 8.295L3 9L8 14L13 9L12.295 8.295Z", fill: "#1A1C21" })));
+exports.ArrowDownIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/ArrowDownIcon/ArrowDownIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ArrowDownIcon.js.map

package/lib/icons/CurveAutoColonIcon/CurveAutoColonIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+export declare const CurveAutoColonIcon: 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/CurveAutoColonIcon/CurveAutoColonIcon.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.CurveAutoColonIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M4.74999 4.00001H10.05C10.1739 4.60703 10.5188 5.14642 11.0178 5.5136C11.5168 5.88079 12.1344 6.04962 12.7508 5.98735C13.3672 5.92508 13.9385 5.63615 14.354 5.17658C14.7694 4.71701 14.9995 4.11954 14.9995 3.50001C14.9995 2.88047 14.7694 2.283 14.354 1.82343C13.9385 1.36386 13.3672 1.07493 12.7508 1.01267C12.1344 0.950396 11.5168 1.11922 11.0178 1.48641C10.5188 1.85359 10.1739 2.39298 10.05 3.00001H4.74999C4.02065 3.00001 3.32117 3.28974 2.80545 3.80546C2.28972 4.32119 1.99999 5.02066 1.99999 5.75001C1.99999 6.47935 2.28972 7.17882 2.80545 7.69455C3.32117 8.21027 4.02065 8.50001 4.74999 8.50001H10.25C10.7141 8.50001 11.1592 8.68438 11.4874 9.01257C11.8156 9.34076 12 9.78588 12 10.25C12 10.7141 11.8156 11.1593 11.4874 11.4874C11.1592 11.8156 10.7141 12 10.25 12H5.94999C5.82609 11.393 5.4812 10.8536 4.9822 10.4864C4.4832 10.1192 3.86563 9.9504 3.24923 10.0127C2.63283 10.0749 2.06151 10.3639 1.64603 10.8234C1.23054 11.283 1.0005 11.8805 1.0005 12.5C1.0005 13.1195 1.23054 13.717 1.64603 14.1766C2.06151 14.6362 2.63283 14.9251 3.24923 14.9873C3.86563 15.0496 4.4832 14.8808 4.9822 14.5136C5.4812 14.1464 5.82609 13.607 5.94999 13H10.25C10.9793 13 11.6788 12.7103 12.1945 12.1945C12.7103 11.6788 13 10.9794 13 10.25C13 9.52066 12.7103 8.82119 12.1945 8.30546C11.6788 7.78974 10.9793 7.50001 10.25 7.50001H4.74999C4.28586 7.50001 3.84075 7.31563 3.51256 6.98744C3.18437 6.65925 2.99999 6.21413 2.99999 5.75001C2.99999 5.28588 3.18437 4.84076 3.51256 4.51257C3.84075 4.18438 4.28586 4.00001 4.74999 4.00001ZM12.5 2.00001C12.7967 2.00001 13.0867 2.08798 13.3333 2.2528C13.58 2.41762 13.7723 2.65189 13.8858 2.92598C13.9993 3.20007 14.029 3.50167 13.9712 3.79264C13.9133 4.08361 13.7704 4.35089 13.5607 4.56067C13.3509 4.77044 13.0836 4.91331 12.7926 4.97118C12.5017 5.02906 12.2001 4.99936 11.926 4.88582C11.6519 4.77229 11.4176 4.58003 11.2528 4.33336C11.088 4.08669 11 3.79668 11 3.50001C11 3.10218 11.158 2.72065 11.4393 2.43935C11.7206 2.15804 12.1022 2.00001 12.5 2.00001ZM3.49999 14C3.20332 14 2.91331 13.912 2.66664 13.7472C2.41996 13.5824 2.22771 13.3481 2.11417 13.074C2.00064 12.7999 1.97094 12.4983 2.02882 12.2074C2.08669 11.9164 2.22955 11.6491 2.43933 11.4393C2.64911 11.2296 2.91639 11.0867 3.20736 11.0288C3.49833 10.971 3.79993 11.0007 4.07402 11.1142C4.34811 11.2277 4.58238 11.42 4.7472 11.6667C4.91202 11.9133 4.99999 12.2033 4.99999 12.5C4.99999 12.8978 4.84196 13.2794 4.56065 13.5607C4.27935 13.842 3.89782 14 3.49999 14Z", fill: "#1A1C21" })));
+exports.CurveAutoColonIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/CurveAutoColonIcon/CurveAutoColonIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=CurveAutoColonIcon.js.map

package/lib/icons/KafkaIcon/KafkaIcon.d.ts

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

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KafkaIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("g", { clipPath: "url(#clip0_8551_41)" },
+        react_1.default.createElement("path", { d: "M6.7631 1.83344C6.59429 1.66741 6.35877 1.56488 6.09695 1.56488C5.83611 1.56488 5.60241 1.66741 5.43559 1.83344H5.43079C5.26247 1.99867 5.1577 2.22933 5.1577 2.48462C5.1577 2.74087 5.26247 2.96959 5.43079 3.13385L5.43559 3.13757C5.60241 3.30279 5.83611 3.40436 6.09695 3.40436C6.35877 3.40436 6.59429 3.30279 6.7631 3.13757L6.76559 3.13385C6.93473 2.96959 7.03851 2.74087 7.03851 2.48462C7.03851 2.22933 6.93473 1.99867 6.76559 1.83344H6.7631ZM6.09695 14.4233C6.35877 14.4233 6.59429 14.3189 6.7631 14.1557L6.76559 14.1508C6.93473 13.9878 7.03851 13.7572 7.03851 13.5037C7.03851 13.2474 6.93473 13.0177 6.76559 12.8517H6.7631C6.59429 12.6837 6.35877 12.5822 6.09695 12.5822C5.83611 12.5822 5.60241 12.6837 5.43559 12.8517H5.43079C5.26247 13.0177 5.1577 13.2474 5.1577 13.5037C5.1577 13.7572 5.26247 13.9878 5.43079 14.1508L5.43559 14.1557C5.60241 14.3189 5.83611 14.4233 6.09695 14.4233ZM11.217 11.6368C11.4499 11.5771 11.6607 11.4308 11.7893 11.2097L11.8067 11.1774C11.9211 10.9677 11.9419 10.7257 11.8809 10.5112C11.8193 10.2815 11.668 10.0784 11.4426 9.95123L11.4295 9.94264C11.2099 9.82488 10.9597 9.79929 10.7298 9.86003C10.4961 9.91705 10.2862 10.0698 10.1583 10.2891C10.0287 10.5063 10.0015 10.7569 10.0636 10.9876C10.1277 11.2144 10.2774 11.4194 10.5014 11.5476H10.5029C10.7273 11.6738 10.9815 11.6966 11.217 11.6368ZM7.06134 7.05157C6.81441 6.81054 6.47413 6.65957 6.09695 6.65957C5.72125 6.65957 5.3818 6.81054 5.13536 7.05157C4.89008 7.29179 4.73881 7.62402 4.73881 7.9922C4.73881 8.36136 4.89008 8.69456 5.13536 8.93754C5.3818 9.17663 5.72125 9.32662 6.09695 9.32662C6.47413 9.32662 6.81441 9.17663 7.06134 8.93754C7.30712 8.69456 7.45839 8.36136 7.45839 7.9922C7.45839 7.62402 7.30712 7.29179 7.06134 7.05157ZM6.51915 5.4839C7.06565 5.57201 7.55736 5.82827 7.93257 6.1984H7.93554C7.99513 6.2572 8.05338 6.32086 8.10717 6.38533L9.04542 5.85403C8.91931 5.48098 8.91352 5.09092 9.0148 4.72549C9.1487 4.23565 9.47309 3.79717 9.95934 3.52196L9.9754 3.51256C10.4564 3.24578 11.0032 3.1907 11.4969 3.32175C11.9967 3.45263 12.4477 3.77157 12.7284 4.24715V4.24813C13.0078 4.72079 13.0646 5.2636 12.9312 5.75149C12.7983 6.241 12.4724 6.68241 11.9866 6.95567L11.8585 7.02986H11.8454C11.3961 7.23947 10.9019 7.27187 10.4481 7.15508C10.0754 7.05821 9.73343 6.85508 9.46581 6.56562L8.52905 7.0953C8.63663 7.37424 8.69637 7.6752 8.69637 7.9922C8.69637 8.30823 8.63663 8.61292 8.52905 8.8938L9.46581 9.42154C9.73343 9.12835 10.0754 8.92895 10.4481 8.83209C10.9479 8.69829 11.5022 8.75531 11.9866 9.03149L12.0176 9.04574V9.04769C12.4856 9.32468 12.7997 9.75377 12.9312 10.2378C13.0646 10.7228 13.0078 11.2657 12.7284 11.7394L12.7115 11.7726L12.7095 11.7696C12.4288 12.2263 11.9866 12.5357 11.4984 12.6666C10.9974 12.7957 10.4433 12.7406 9.95934 12.4683V12.4644C9.47309 12.1892 9.1487 11.7497 9.0148 11.261C8.91352 10.8966 8.91931 10.5063 9.04542 10.1335L8.10717 9.60377C8.05338 9.66841 7.99513 9.72915 7.93554 9.78795L7.93257 9.7907C7.55736 10.1591 7.06565 10.4153 6.51915 10.5007V11.5618C6.90858 11.6415 7.25763 11.8323 7.53121 12.0999L7.53254 12.1028C7.89913 12.4597 8.12604 12.957 8.12604 13.5037C8.12604 14.0486 7.89913 14.5428 7.53254 14.9016L7.53121 14.9073C7.16214 15.2661 6.65553 15.4881 6.09695 15.4881C5.54134 15.4881 5.03407 15.2661 4.66599 14.9073H4.66466V14.9016C4.29757 14.5428 4.07017 14.0486 4.07017 13.5037C4.07017 12.957 4.29757 12.4597 4.66466 12.1028V12.0999H4.66599C4.93907 11.8323 5.28862 11.6415 5.67706 11.5618V10.5007C5.13006 10.4153 4.63984 10.1591 4.26513 9.7907L4.26116 9.78795C3.79278 9.32759 3.5 8.69456 3.5 7.9922C3.5 7.29179 3.79278 6.65876 4.26116 6.1984H4.26513C4.63984 5.82827 5.13006 5.57201 5.67706 5.4839V4.42744C5.28862 4.34483 4.93907 4.15418 4.66599 3.88836H4.66466V3.88545C4.29757 3.52487 4.07017 3.03131 4.07017 2.48462C4.07017 1.94068 4.29757 1.44242 4.66466 1.08363L4.66599 1.08184C5.03407 0.722079 5.54134 0.5 6.09695 0.5C6.65553 0.5 7.16214 0.722079 7.53121 1.08184V1.08363H7.53254C7.89913 1.44242 8.12604 1.94068 8.12604 2.48462C8.12604 3.03131 7.89913 3.52487 7.53254 3.88545L7.53121 3.88836C7.25763 4.15418 6.90858 4.34483 6.51915 4.42744V5.4839ZM11.7893 4.77959L11.7816 4.76825C11.652 4.5546 11.4454 4.41222 11.217 4.3505C10.9815 4.28976 10.7273 4.31551 10.5014 4.4417H10.5029C10.2774 4.56691 10.1267 4.77198 10.0636 5.00167C10.0015 5.22942 10.0287 5.48098 10.1583 5.70014L10.1626 5.70597C10.2925 5.92222 10.4991 6.06736 10.7298 6.12616C10.9616 6.18982 11.22 6.16325 11.4426 6.0361L11.4547 6.03043C11.6738 5.9023 11.8198 5.70014 11.8809 5.47807C11.9429 5.24934 11.9183 4.99876 11.7893 4.77959Z", fill: "#1A1919" })),
+    react_1.default.createElement("defs", null,
+        react_1.default.createElement("clipPath", { id: "clip0_8551_41" },
+            react_1.default.createElement("rect", { width: "9.5", height: "15", fill: "white", transform: "translate(3.5 0.5)" })))));
+exports.KafkaIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/KafkaIcon/KafkaIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=KafkaIcon.js.map

package/lib/index.d.ts

@@ -119,6 +119,7 @@ export * from './components/Search/SearchFilterField';
 export * from './components/Search/FilterFields/SearchFilterFieldSelect';
 export * from './components/Search/FilterFields/SearchFilterFieldTags';
 export * from './components/Search/SearchAiResponse';
+export * from './icons/ArrowDownIcon/ArrowDownIcon';
 export * from './icons/ArrowRightIcon/ArrowRightIcon';
 export * from './icons/ArrowUpRightIcon/ArrowUpRightIcon';
 export * from './icons/ArrowLeftIcon/ArrowLeftIcon';
@@ -223,6 +224,8 @@ export * from './icons/ErrorFilledIcon/ErrorFilledIcon';
 export * from './icons/CheckboxFilledIcon/CheckboxFilledIcon';
 export * from './icons/WarningAltFilled/WarningAltFilled';
 export * from './icons/SettingsCogIcon/SettingsCogIcon';
+export * from './icons/KafkaIcon/KafkaIcon';
+export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';
 export * from './layouts/NotFound';

package/lib/index.js

@@ -171,6 +171,7 @@ __exportStar(require("./components/Search/FilterFields/SearchFilterFieldSelect")
 __exportStar(require("./components/Search/FilterFields/SearchFilterFieldTags"), exports);
 __exportStar(require("./components/Search/SearchAiResponse"), exports);
 /* Icons */
+__exportStar(require("./icons/ArrowDownIcon/ArrowDownIcon"), exports);
 __exportStar(require("./icons/ArrowRightIcon/ArrowRightIcon"), exports);
 __exportStar(require("./icons/ArrowUpRightIcon/ArrowUpRightIcon"), exports);
 __exportStar(require("./icons/ArrowLeftIcon/ArrowLeftIcon"), exports);
@@ -275,6 +276,8 @@ __exportStar(require("./icons/ErrorFilledIcon/ErrorFilledIcon"), exports);
 __exportStar(require("./icons/CheckboxFilledIcon/CheckboxFilledIcon"), exports);
 __exportStar(require("./icons/WarningAltFilled/WarningAltFilled"), exports);
 __exportStar(require("./icons/SettingsCogIcon/SettingsCogIcon"), exports);
+__exportStar(require("./icons/KafkaIcon/KafkaIcon"), exports);
+__exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);
 __exportStar(require("./layouts/PageLayout"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.53.0-next.2",
+  "version": "0.53.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -62,6 +62,7 @@
     "npm-run-all2": "5.0.2",
     "react-refresh": "0.14.2",
     "react-router-dom": "6.21.1",
+    "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
     "styled-system": "5.1.5",
@@ -88,7 +89,7 @@
     "react-calendar": "4.2.1",
     "react-date-picker": "10.0.3",
     "timeago.js": "4.0.2",
-    "@redocly/config": "0.24.0"
+    "@redocly/config": "0.24.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -5,6 +5,7 @@ import type { FileTabs } from '@redocly/theme/components/CodeBlock/CodeBlock';
 
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+import { TooltipWrapper } from '@redocly/theme/components/Tooltip/TooltipWrapper';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
@@ -76,15 +77,17 @@ export function CodeBlockControls({
       {tabs && <CodeBlockTabs tabs={tabs} />}
       <ControlsWrapper>
         {report && !report?.props?.hide ? (
-          <ControlButton
-            variant="text"
-            size="small"
-            data-testid="report-button"
-            icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
-            {...report.props}
-          >
-            {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
-          </ControlButton>
+          <TooltipWrapper tooltipKey="codeSnippet.report.tooltipText" placement="top">
+            <ControlButton
+              variant="text"
+              size="small"
+              data-testid="report-button"
+              icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
+              {...report.props}
+            >
+              {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
+            </ControlButton>
+          </TooltipWrapper>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
@@ -136,19 +139,21 @@ export function CodeBlockControls({
         ) : null}
 
         {copy && !codeSnippet?.copy?.hide ? (
-          <CopyButton
-            data={copy.data}
-            data-source={copy.dataSource}
-            data-hash={copy.dataHash}
-            type={controlsType}
-            toasterPlacement={copy.toasterPlacement}
-            toasterDuration={copy.toasterDuration}
-            buttonText={copy.label}
-            onCopyClick={() => {
-              copy?.onClick?.();
-              telemetry?.send?.('code_snippet_copied', {});
-            }}
-          />
+          <TooltipWrapper tooltipKey="codeSnippet.copy.tooltipText" placement="top">
+            <CopyButton
+              data={copy.data}
+              data-source={copy.dataSource}
+              data-hash={copy.dataHash}
+              type={controlsType}
+              toasterPlacement={copy.toasterPlacement}
+              toasterDuration={copy.toasterDuration}
+              buttonText={copy.label}
+              onCopyClick={() => {
+                copy?.onClick?.();
+                telemetry?.send?.('code_snippet_copied', {});
+              }}
+            />
+          </TooltipWrapper>
         ) : null}
       </ControlsWrapper>
     </>

package/src/components/JsonViewer/JsonViewer.tsx

@@ -13,6 +13,7 @@ export type JsonProps = {
   className?: string;
   expandLevel: number;
   startLineNumber?: number;
+  hideHeader?: boolean;
   onCopyClick?: () => void;
 };
 
@@ -22,6 +23,7 @@ function JsonComponent({
   className,
   onCopyClick,
   title,
+  hideHeader,
 }: JsonProps): JSX.Element {
   const showFoldingButtons =
     data && Object.values(data).some((value) => typeof value === 'object' && value !== null);
@@ -51,15 +53,19 @@ function JsonComponent({
       className={className}
     >
       <CodeBlock
-        header={{
-          title,
-          className: 'code-block-header',
-          controls: {
-            copy: { data, onClick: onCopyClick, handleOutside: true },
-            expand: showFoldingButtons ? { onClick: expandAll } : undefined,
-            collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
-          },
-        }}
+        header={
+          hideHeader
+            ? undefined
+            : {
+                title,
+                className: 'code-block-header',
+                controls: {
+                  copy: { data, onClick: onCopyClick, handleOutside: true },
+                  expand: showFoldingButtons ? { onClick: expandAll } : undefined,
+                  collapse: showFoldingButtons ? { onClick: collapseAll } : undefined,
+                },
+              }
+        }
         source={source}
       >
         <FoldingWrap>

package/src/components/Menu/MenuItem.tsx

@@ -31,7 +31,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const isDrilldown = type === MenuItemType.DrillDown;
   const isNested = type === MenuItemType.Group;
   const hasChevron = isNested && !isDrilldown;
-  const isOperation = type === MenuItemType.Operation;
+  const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
   const handleOnClick = () => {
     telemetry.send?.('sidebar_item_clicked', { label: item.label, type: item.type });
@@ -87,7 +87,7 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
       </MenuItemLabelTextWrapper>
 
       {isDrilldown ? <ArrowRightIcon size="12px" /> : null}
-      {isOperation ? (
+      {hasHttpTag ? (
         <HttpTag color={httpColor || ''}>
           {item.httpVerb === 'hook' ? 'event' : item.httpVerb}
         </HttpTag>

package/src/components/Panel/variables.ts

@@ -332,6 +332,7 @@ export const apiReferencePanels = css`
   .panel-servers-list,
   .panel-request-samples,
   .panel-response-samples,
+  .panel-messages-samples,
   .panel-callback-samples {
     --text-color: var(--panel-samples-text-color);
     --panel-text-color: var(--panel-samples-text-color); // @presenter Color

package/src/components/SidebarActions/SidebarActions.tsx

@@ -16,7 +16,7 @@ export { LayoutVariant };
 export type SidebarActionsProps = {
   layout: LayoutVariant;
   collapsedSidebar: boolean;
-  isOpenapiDocs: boolean;
+  isApiDocs: boolean;
   hideCollapseSidebarButton?: boolean;
   onChangeViewClick: () => void;
   onChangeCollapseSidebarClick: () => void;
@@ -28,7 +28,7 @@ export const SidebarActions = ({
   layout,
   hideCollapseSidebarButton = false,
   collapsedSidebar,
-  isOpenapiDocs,
+  isApiDocs,
   onChangeViewClick,
   onChangeCollapseSidebarClick,
   requestAccessButton,
@@ -63,7 +63,7 @@ export const SidebarActions = ({
           icon={collapsedSidebar ? <SidePanelOpenIcon /> : <SidePanelCloseIcon />}
         />
       )}
-      {isOpenapiDocs && (
+      {isApiDocs && (
         <ControlsWrapChangeLayoutButtons isCollapsed={collapsedSidebar}>
           <ChangeViewButton
             collapsedSidebar={collapsedSidebar}

package/src/components/Tag/Tag.tsx

@@ -8,12 +8,16 @@ type DefaultStatusColor = 'success' | 'processing' | 'error' | 'warning' | 'defa
 type ActionStatusColor = 'approved' | 'declined' | 'pending';
 type SubjectStatusColor = 'active' | 'draft' | 'deprecated' | 'product';
 type HttpColor = 'get' | 'post' | 'put' | 'delete' | 'option' | 'patch' | 'head' | 'hook' | 'link';
+type ActionColor = 'receive' | 'send';
+type ChannelColor = 'channel';
 type HttpStatusColor = 'http-deprecated';
 type StatusColor =
   | DefaultStatusColor
   | ActionStatusColor
   | SubjectStatusColor
   | HttpColor
+  | ActionColor
+  | ChannelColor
   | HttpStatusColor;
 type Color =
   | 'red'

package/src/components/Tag/variables.dark.ts

@@ -22,6 +22,19 @@ export const tagDarkMode = css`
   --tag-operation-color-options: #1a1c21; // @presenter Color
   --tag-operation-bg-color-options: #2a2b33; // @presenter Color
 
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-consume: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144F6; // @presenter Color
+  --tag-action-color-pub: #4144F6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #C79CF2; // @presenter Color
+
   .tag-grey,
   .tag-draft,
   .tag-schema,

package/src/components/Tag/variables.ts

@@ -195,9 +195,23 @@ export const tag = css`
   
   --tag-operation-color-deprecated: var(--text-color-disabled); // @presenter Color
 
+  --tag-action-color-receive: #4db144; // @presenter Color
+  --tag-action-color-sub: #4db144; // @presenter Color
+  --tag-action-color-consume: #4db144; // @presenter Color
+
+  --tag-action-color-send: #4144f6; // @presenter Color
+  --tag-action-color-pub: #4144f6; // @presenter Color
+  --tag-action-color-publish: #4144f6; // @presenter Color
+
+  --tag-action-color-channel: #F0870E; // @presenter Color
+  --tag-action-color-topic: #F0870E; // @presenter Color
+  --tag-action-color-queue: #D72E81; // @presenter Color
+  --tag-action-color-exchange: #9B51E0; // @presenter Color
+
   .tag-delete {
       --tag-color: var(--tag-operation-color-delete); // @presenter Color
   }
+
   .tag-get {
       --tag-color: var(--tag-operation-color-get); // @presenter Color
   }
@@ -217,6 +231,51 @@ export const tag = css`
   .tag-http-deprecated {
       --tag-color: var(--tag-operation-color-deprecated) // @presenter Color
   }
+  
+  .tag-receive {
+      --tag-color: var(--tag-action-color-receive); // @presenter Color
+  }
+
+  .tag-send {
+      --tag-color: var(--tag-action-color-send); // @presenter Color
+  }
+
+  .tag-pub {
+      --tag-color: var(--tag-action-color-pub); // @presenter Color
+  }
+
+  .tag-sub {
+      --tag-color: var(--tag-action-color-sub); // @presenter Color
+  }
 
+  .tag-consume {
+      --tag-color: var(--tag-action-color-consume); // @presenter Color
+  }
+
+  .tag-publish {
+      --tag-color: var(--tag-action-color-publish); // @presenter Color
+  }
+
+  .tag-channel {
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
+  }
+
+  .tag-topic {
+      --tag-color: var(--tag-action-color-channel); // @presenter Color
+  }
+
+  .tag-queue {
+      --tag-color: var(--tag-action-color-queue); // @presenter Color
+  }
+
+  .tag-exchange {
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+  }
+      
+  // shorten alias for exchange tag:
+  .tag-exch {
+      --tag-color: var(--tag-action-color-exchange); // @presenter Color
+  }
+      
   // @tokens End
 `;

package/src/components/Tooltip/TooltipWrapper.tsx

@@ -0,0 +1,71 @@
+import styled from 'styled-components';
+import React, { ReactElement } from 'react';
+
+import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
+
+import { useThemeHooks, useControl } from '@redocly/theme/core/hooks';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
+
+export type TooltipWrapperProps = {
+  children: ReactElement;
+  tooltipKey: string;
+  placement?: TooltipProps['placement'];
+  width?: string;
+  className?: string;
+  showOnHover?: boolean;
+  disabled?: boolean;
+};
+
+export function TooltipWrapper({
+  children,
+  tooltipKey,
+  placement = 'top',
+  width = 'max-content',
+  className = '',
+  showOnHover = true,
+  disabled = false,
+}: TooltipWrapperProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const tooltip = useControl();
+  const { translate } = useTranslate();
+
+  const handleMouseEnter = (): void => {
+    if (showOnHover && !disabled) {
+      tooltip.handleOpen();
+    }
+  };
+
+  const handleMouseLeave = (): void => {
+    if (showOnHover) {
+      tooltip.handleClose();
+    }
+  };
+
+  const handleClick = (): void => {
+    if (showOnHover) {
+      tooltip.handleClose();
+    }
+  };
+
+  return (
+    <Tooltip
+      className={className}
+      tip={translate(tooltipKey)}
+      isOpen={tooltip.isOpened}
+      placement={placement}
+      width={width}
+    >
+      <TooltipEventWrapper
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+      >
+        {children}
+      </TooltipEventWrapper>
+    </Tooltip>
+  );
+}
+
+const TooltipEventWrapper = styled.div`
+  display: contents;
+`;

package/src/core/styles/dark.ts

@@ -24,6 +24,7 @@ const replayDarkMode = css`
   // @tokens End
 `;
 
+
 export const darkMode = css`
   /* === Dark Theme Colors  === */
 

package/src/core/styles/global.ts

@@ -1197,6 +1197,7 @@ const replay = css`
   // @tokens End
 `;
 
+
 export const styles = css`
   :root {
     ${admonition}

package/src/core/types/hooks.ts

@@ -197,4 +197,9 @@ type OtelTelemetryEvent =
   | 'openapi_docs.copy_code_snippet.clicked'
   | 'openapi_docs.switch_servers.clicked'
   | 'openapi_docs.examples_switcher.clicked'
-  | 'openapi_docs.try_it.opened';
+  | 'openapi_docs.try_it.opened'
+  | 'asyncapi_docs.performance_metrics'
+  | 'asyncapi_docs.viewed'
+  | 'asyncapi_docs.switch_message.clicked'
+  | 'asyncapi_docs.switch_example.clicked'
+  | 'asyncapi_docs.message.clicked';

package/src/core/types/l10n.ts

@@ -229,6 +229,8 @@ export type TranslationKey =
   | 'openapi.requiredScopes'
   | 'openapi.unsupportedLanguage'
   | 'openapi.failedToGenerateCodeSample'
+  | 'asyncapi.download.description.title'
+  | 'asyncapi.info.title'
   | 'graphql.queries'
   | 'graphql.mutations'
   | 'graphql.subscriptions'

package/src/icons/ArrowDownIcon/ArrowDownIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M12.295 8.295L8.5 12.085V2H7.5V12.085L3.705 8.295L3 9L8 14L13 9L12.295 8.295Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const ArrowDownIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ArrowDownIcon/ArrowDownIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CurveAutoColonIcon/CurveAutoColonIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path
+      d="M4.74999 4.00001H10.05C10.1739 4.60703 10.5188 5.14642 11.0178 5.5136C11.5168 5.88079 12.1344 6.04962 12.7508 5.98735C13.3672 5.92508 13.9385 5.63615 14.354 5.17658C14.7694 4.71701 14.9995 4.11954 14.9995 3.50001C14.9995 2.88047 14.7694 2.283 14.354 1.82343C13.9385 1.36386 13.3672 1.07493 12.7508 1.01267C12.1344 0.950396 11.5168 1.11922 11.0178 1.48641C10.5188 1.85359 10.1739 2.39298 10.05 3.00001H4.74999C4.02065 3.00001 3.32117 3.28974 2.80545 3.80546C2.28972 4.32119 1.99999 5.02066 1.99999 5.75001C1.99999 6.47935 2.28972 7.17882 2.80545 7.69455C3.32117 8.21027 4.02065 8.50001 4.74999 8.50001H10.25C10.7141 8.50001 11.1592 8.68438 11.4874 9.01257C11.8156 9.34076 12 9.78588 12 10.25C12 10.7141 11.8156 11.1593 11.4874 11.4874C11.1592 11.8156 10.7141 12 10.25 12H5.94999C5.82609 11.393 5.4812 10.8536 4.9822 10.4864C4.4832 10.1192 3.86563 9.9504 3.24923 10.0127C2.63283 10.0749 2.06151 10.3639 1.64603 10.8234C1.23054 11.283 1.0005 11.8805 1.0005 12.5C1.0005 13.1195 1.23054 13.717 1.64603 14.1766C2.06151 14.6362 2.63283 14.9251 3.24923 14.9873C3.86563 15.0496 4.4832 14.8808 4.9822 14.5136C5.4812 14.1464 5.82609 13.607 5.94999 13H10.25C10.9793 13 11.6788 12.7103 12.1945 12.1945C12.7103 11.6788 13 10.9794 13 10.25C13 9.52066 12.7103 8.82119 12.1945 8.30546C11.6788 7.78974 10.9793 7.50001 10.25 7.50001H4.74999C4.28586 7.50001 3.84075 7.31563 3.51256 6.98744C3.18437 6.65925 2.99999 6.21413 2.99999 5.75001C2.99999 5.28588 3.18437 4.84076 3.51256 4.51257C3.84075 4.18438 4.28586 4.00001 4.74999 4.00001ZM12.5 2.00001C12.7967 2.00001 13.0867 2.08798 13.3333 2.2528C13.58 2.41762 13.7723 2.65189 13.8858 2.92598C13.9993 3.20007 14.029 3.50167 13.9712 3.79264C13.9133 4.08361 13.7704 4.35089 13.5607 4.56067C13.3509 4.77044 13.0836 4.91331 12.7926 4.97118C12.5017 5.02906 12.2001 4.99936 11.926 4.88582C11.6519 4.77229 11.4176 4.58003 11.2528 4.33336C11.088 4.08669 11 3.79668 11 3.50001C11 3.10218 11.158 2.72065 11.4393 2.43935C11.7206 2.15804 12.1022 2.00001 12.5 2.00001ZM3.49999 14C3.20332 14 2.91331 13.912 2.66664 13.7472C2.41996 13.5824 2.22771 13.3481 2.11417 13.074C2.00064 12.7999 1.97094 12.4983 2.02882 12.2074C2.08669 11.9164 2.22955 11.6491 2.43933 11.4393C2.64911 11.2296 2.91639 11.0867 3.20736 11.0288C3.49833 10.971 3.79993 11.0007 4.07402 11.1142C4.34811 11.2277 4.58238 11.42 4.7472 11.6667C4.91202 11.9133 4.99999 12.2033 4.99999 12.5C4.99999 12.8978 4.84196 13.2794 4.56065 13.5607C4.27935 13.842 3.89782 14 3.49999 14Z"
+      fill="#1A1C21"
+    />
+  </svg>
+);
+
+export const CurveAutoColonIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CurveAutoColonIcon/CurveAutoColonIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/KafkaIcon/KafkaIcon.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <g clipPath="url(#clip0_8551_41)">
+      <path
+        d="M6.7631 1.83344C6.59429 1.66741 6.35877 1.56488 6.09695 1.56488C5.83611 1.56488 5.60241 1.66741 5.43559 1.83344H5.43079C5.26247 1.99867 5.1577 2.22933 5.1577 2.48462C5.1577 2.74087 5.26247 2.96959 5.43079 3.13385L5.43559 3.13757C5.60241 3.30279 5.83611 3.40436 6.09695 3.40436C6.35877 3.40436 6.59429 3.30279 6.7631 3.13757L6.76559 3.13385C6.93473 2.96959 7.03851 2.74087 7.03851 2.48462C7.03851 2.22933 6.93473 1.99867 6.76559 1.83344H6.7631ZM6.09695 14.4233C6.35877 14.4233 6.59429 14.3189 6.7631 14.1557L6.76559 14.1508C6.93473 13.9878 7.03851 13.7572 7.03851 13.5037C7.03851 13.2474 6.93473 13.0177 6.76559 12.8517H6.7631C6.59429 12.6837 6.35877 12.5822 6.09695 12.5822C5.83611 12.5822 5.60241 12.6837 5.43559 12.8517H5.43079C5.26247 13.0177 5.1577 13.2474 5.1577 13.5037C5.1577 13.7572 5.26247 13.9878 5.43079 14.1508L5.43559 14.1557C5.60241 14.3189 5.83611 14.4233 6.09695 14.4233ZM11.217 11.6368C11.4499 11.5771 11.6607 11.4308 11.7893 11.2097L11.8067 11.1774C11.9211 10.9677 11.9419 10.7257 11.8809 10.5112C11.8193 10.2815 11.668 10.0784 11.4426 9.95123L11.4295 9.94264C11.2099 9.82488 10.9597 9.79929 10.7298 9.86003C10.4961 9.91705 10.2862 10.0698 10.1583 10.2891C10.0287 10.5063 10.0015 10.7569 10.0636 10.9876C10.1277 11.2144 10.2774 11.4194 10.5014 11.5476H10.5029C10.7273 11.6738 10.9815 11.6966 11.217 11.6368ZM7.06134 7.05157C6.81441 6.81054 6.47413 6.65957 6.09695 6.65957C5.72125 6.65957 5.3818 6.81054 5.13536 7.05157C4.89008 7.29179 4.73881 7.62402 4.73881 7.9922C4.73881 8.36136 4.89008 8.69456 5.13536 8.93754C5.3818 9.17663 5.72125 9.32662 6.09695 9.32662C6.47413 9.32662 6.81441 9.17663 7.06134 8.93754C7.30712 8.69456 7.45839 8.36136 7.45839 7.9922C7.45839 7.62402 7.30712 7.29179 7.06134 7.05157ZM6.51915 5.4839C7.06565 5.57201 7.55736 5.82827 7.93257 6.1984H7.93554C7.99513 6.2572 8.05338 6.32086 8.10717 6.38533L9.04542 5.85403C8.91931 5.48098 8.91352 5.09092 9.0148 4.72549C9.1487 4.23565 9.47309 3.79717 9.95934 3.52196L9.9754 3.51256C10.4564 3.24578 11.0032 3.1907 11.4969 3.32175C11.9967 3.45263 12.4477 3.77157 12.7284 4.24715V4.24813C13.0078 4.72079 13.0646 5.2636 12.9312 5.75149C12.7983 6.241 12.4724 6.68241 11.9866 6.95567L11.8585 7.02986H11.8454C11.3961 7.23947 10.9019 7.27187 10.4481 7.15508C10.0754 7.05821 9.73343 6.85508 9.46581 6.56562L8.52905 7.0953C8.63663 7.37424 8.69637 7.6752 8.69637 7.9922C8.69637 8.30823 8.63663 8.61292 8.52905 8.8938L9.46581 9.42154C9.73343 9.12835 10.0754 8.92895 10.4481 8.83209C10.9479 8.69829 11.5022 8.75531 11.9866 9.03149L12.0176 9.04574V9.04769C12.4856 9.32468 12.7997 9.75377 12.9312 10.2378C13.0646 10.7228 13.0078 11.2657 12.7284 11.7394L12.7115 11.7726L12.7095 11.7696C12.4288 12.2263 11.9866 12.5357 11.4984 12.6666C10.9974 12.7957 10.4433 12.7406 9.95934 12.4683V12.4644C9.47309 12.1892 9.1487 11.7497 9.0148 11.261C8.91352 10.8966 8.91931 10.5063 9.04542 10.1335L8.10717 9.60377C8.05338 9.66841 7.99513 9.72915 7.93554 9.78795L7.93257 9.7907C7.55736 10.1591 7.06565 10.4153 6.51915 10.5007V11.5618C6.90858 11.6415 7.25763 11.8323 7.53121 12.0999L7.53254 12.1028C7.89913 12.4597 8.12604 12.957 8.12604 13.5037C8.12604 14.0486 7.89913 14.5428 7.53254 14.9016L7.53121 14.9073C7.16214 15.2661 6.65553 15.4881 6.09695 15.4881C5.54134 15.4881 5.03407 15.2661 4.66599 14.9073H4.66466V14.9016C4.29757 14.5428 4.07017 14.0486 4.07017 13.5037C4.07017 12.957 4.29757 12.4597 4.66466 12.1028V12.0999H4.66599C4.93907 11.8323 5.28862 11.6415 5.67706 11.5618V10.5007C5.13006 10.4153 4.63984 10.1591 4.26513 9.7907L4.26116 9.78795C3.79278 9.32759 3.5 8.69456 3.5 7.9922C3.5 7.29179 3.79278 6.65876 4.26116 6.1984H4.26513C4.63984 5.82827 5.13006 5.57201 5.67706 5.4839V4.42744C5.28862 4.34483 4.93907 4.15418 4.66599 3.88836H4.66466V3.88545C4.29757 3.52487 4.07017 3.03131 4.07017 2.48462C4.07017 1.94068 4.29757 1.44242 4.66466 1.08363L4.66599 1.08184C5.03407 0.722079 5.54134 0.5 6.09695 0.5C6.65553 0.5 7.16214 0.722079 7.53121 1.08184V1.08363H7.53254C7.89913 1.44242 8.12604 1.94068 8.12604 2.48462C8.12604 3.03131 7.89913 3.52487 7.53254 3.88545L7.53121 3.88836C7.25763 4.15418 6.90858 4.34483 6.51915 4.42744V5.4839ZM11.7893 4.77959L11.7816 4.76825C11.652 4.5546 11.4454 4.41222 11.217 4.3505C10.9815 4.28976 10.7273 4.31551 10.5014 4.4417H10.5029C10.2774 4.56691 10.1267 4.77198 10.0636 5.00167C10.0015 5.22942 10.0287 5.48098 10.1583 5.70014L10.1626 5.70597C10.2925 5.92222 10.4991 6.06736 10.7298 6.12616C10.9616 6.18982 11.22 6.16325 11.4426 6.0361L11.4547 6.03043C11.6738 5.9023 11.8198 5.70014 11.8809 5.47807C11.9429 5.24934 11.9183 4.99876 11.7893 4.77959Z"
+        fill="#1A1919"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_8551_41">
+        <rect width="9.5" height="15" fill="white" transform="translate(3.5 0.5)" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export const KafkaIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/KafkaIcon/KafkaIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/index.ts

@@ -143,6 +143,7 @@ export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldSe
 export * from '@redocly/theme/components/Search/FilterFields/SearchFilterFieldTags';
 export * from '@redocly/theme/components/Search/SearchAiResponse';
 /* Icons */
+export * from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 export * from '@redocly/theme/icons/ArrowRightIcon/ArrowRightIcon';
 export * from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 export * from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
@@ -247,6 +248,8 @@ export * from '@redocly/theme/icons/ErrorFilledIcon/ErrorFilledIcon';
 export * from '@redocly/theme/icons/CheckboxFilledIcon/CheckboxFilledIcon';
 export * from '@redocly/theme/icons/WarningAltFilled/WarningAltFilled';
 export * from '@redocly/theme/icons/SettingsCogIcon/SettingsCogIcon';
+export * from '@redocly/theme/icons/KafkaIcon/KafkaIcon';
+export * from '@redocly/theme/icons/CurveAutoColonIcon/CurveAutoColonIcon';
 /* Layouts */
 export * from '@redocly/theme/layouts/RootLayout';
 export * from '@redocly/theme/layouts/PageLayout';