@redocly/theme 0.61.0 → 0.62.0-custom.0

package/lib/markdoc/default.d.ts

@@ -23,6 +23,7 @@ import { toggle } from '../markdoc/tags/code-toggle';
 import { codeGroup } from '../markdoc/tags/code-group';
 import { icon } from '../markdoc/tags/icon';
 import { connectMcp } from '../markdoc/tags/connect-mcp';
+import { loginButton } from '../markdoc/tags/login-button';
 export declare const tags: {
     [admonition.tagName]: import("@markdoc/markdoc").Schema & {
         attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
@@ -119,4 +120,9 @@ export declare const tags: {
             resolver?: string;
         }>;
     };
+    [loginButton.tagName]: import("@markdoc/markdoc").Schema & {
+        attributes?: Record<string, import("@markdoc/markdoc").SchemaAttribute & {
+            resolver?: string;
+        }>;
+    };
 };

package/lib/markdoc/default.js

@@ -65,6 +65,7 @@ const code_toggle_1 = require("../markdoc/tags/code-toggle");
 const code_group_1 = require("../markdoc/tags/code-group");
 const icon_1 = require("../markdoc/tags/icon");
 const connect_mcp_1 = require("../markdoc/tags/connect-mcp");
+const login_button_1 = require("../markdoc/tags/login-button");
 exports.tags = {
     [admonition_1.admonition.tagName]: admonition_1.admonition.schema,
     [debug_1.debug.tagName]: debug_1.debug.schema,
@@ -85,5 +86,6 @@ exports.tags = {
     [code_group_1.codeGroup.tagName]: code_group_1.codeGroup.schema,
     [icon_1.icon.tagName]: icon_1.icon.schema,
     [connect_mcp_1.connectMcp.tagName]: connect_mcp_1.connectMcp.schema,
+    [login_button_1.loginButton.tagName]: login_button_1.loginButton.schema,
 };
 //# sourceMappingURL=default.js.map

package/lib/markdoc/tags/login-button.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdocSchemaWrapper } from '../../markdoc/tags/types';
+export declare const loginButton: MarkdocSchemaWrapper;

package/lib/markdoc/tags/login-button.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loginButton = void 0;
+exports.loginButton = {
+    schema: {
+        render: 'LoginButton',
+        attributes: {
+            variant: {
+                type: String,
+                default: 'primary',
+                matches: ['primary', 'secondary', 'outlined', 'text', 'link', 'ghost'],
+            },
+            size: {
+                type: String,
+                default: 'medium',
+                matches: ['small', 'medium', 'large'],
+            },
+            label: {
+                type: String,
+                description: 'Custom button label text. Overrides translation.',
+            },
+            labelTranslationKey: {
+                type: String,
+                default: 'userMenu.login',
+                description: 'Translation key for the button label.',
+            },
+        },
+        selfClosing: true,
+    },
+    tagName: 'login-button',
+};
+//# sourceMappingURL=login-button.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.61.0",
+  "version": "0.62.0-custom.0",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,14 +29,14 @@
     "@markdoc/markdoc": "0.5.2",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "react-router-dom": "^6.21.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-router-dom": "^6.30.3",
     "styled-components": "^4.1.1 || ^5.3.11 || ^6.0.0"
   },
   "devDependencies": {
     "@markdoc/markdoc": "0.5.2",
-    "@shikijs/types": "1.24.2",
+    "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/file-saver": "2.0.7",
@@ -51,7 +51,7 @@
     "@vitest/coverage-v8": "4.0.10",
     "@vitest/ui": "3.2.4",
     "concurrently": "7.6.0",
-    "react-router-dom": "^6.21.1",
+    "react-router-dom": "^6.30.3",
     "resize-observer-polyfill": "1.5.1",
     "rimraf": "5.0.7",
     "styled-components": "5.3.11",
@@ -63,7 +63,7 @@
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
     "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.7.0"
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.0"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -81,14 +81,14 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.2"
+    "@redocly/config": "0.43.0-custom.0"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",
     "ts:check": "tsc --noEmit --skipLibCheck",
     "clean": "rimraf lib",
     "compile": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
-    "build": "npm run clean && npm run compile",
+    "build": "pnpm run clean && pnpm run compile",
     "test": "vitest run",
     "test:update": "vitest run --update",
     "test:watch": "vitest",

package/src/components/Admonition/Admonition.tsx

@@ -3,10 +3,10 @@ import styled, { css } from 'styled-components';
 
 import type { FC, JSX } from 'react';
 
-import { WarningFilledIcon } from '@redocly/theme/icons/WarningFilledIcon/WarningFilledIcon';
-import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
-import { CloseFilledIcon } from '@redocly/theme/icons/CloseFilledIcon/CloseFilledIcon';
-import { InformationFilledIcon } from '@redocly/theme/icons/InformationFilledIcon/InformationFilledIcon';
+import { WarningCycleIcon } from '@redocly/theme/icons/WarningCycleIcon/WarningCycleIcon';
+import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { ErrorIcon } from '@redocly/theme/icons/ErrorIcon/ErrorIcon';
+import { InformationIcon } from '@redocly/theme/icons/InformationIcon/InformationIcon';
 
 type AdmonitionTypeProps = {
   type: 'warning' | 'success' | 'danger' | 'info';
@@ -20,10 +20,10 @@ export type AdmonitionProps = Partial<AdmonitionTypeProps> & {
 };
 
 const IconsMap: Record<AdmonitionTypeProps['type'], FC<{ color?: string }>> = {
-  warning: WarningFilledIcon,
-  success: CheckmarkFilledIcon,
-  danger: CloseFilledIcon,
-  info: InformationFilledIcon,
+  warning: WarningCycleIcon,
+  success: CheckmarkOutlineIcon,
+  danger: ErrorIcon,
+  info: InformationIcon,
 };
 
 export function Admonition({
@@ -65,9 +65,9 @@ const Content = styled.div`
 const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
   display: flex;
   flex-direction: row;
-  gap: var(--spacing-base);
-  margin: var(--admonition-margin-vertical) var(--admonition-margin-horizontal);
-  padding: var(--admonition-padding-vertical-xs) var(--admonition-padding-horizontal);
+  gap: var(--admonition-gap);
+  margin: var(--admonition-margin);
+  padding: var(--admonition-padding);
   border-radius: var(--admonition-border-radius);
   font-size: var(--admonition-font-size);
   font-weight: var(--admonition-font-weight);
@@ -79,17 +79,12 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
   ${({ type }) => css`
     background-color: var(--admonition-${type}-bg-color);
     color: var(--admonition-${type}-text-color);
-    border-left: var(--admonition-${type}-border);
+    border: var(--admonition-${type}-border);
   `};
 
-  &:has(${Content}) {
-    padding: var(--admonition-padding-vertical-md) var(--admonition-padding-horizontal);
-  }
-
   &:not(:has(${Content})) {
     --admonition-heading-font-size: var(--admonition-font-size);
     --admonition-heading-line-height: var(--admonition-line-height);
-    --admonition-icon-size: 16px;
 
     align-items: center;
     gap: calc(var(--spacing-xxs) * 1.5);
@@ -99,6 +94,7 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
     width: var(--admonition-icon-size);
     height: var(--admonition-icon-size);
     flex-shrink: 0;
+    margin: var(--admonition-icon-margin);
 
     fill: ${({ type }) => `var(--admonition-${type}-icon-color)`};
 
@@ -112,7 +108,7 @@ const AdmonitionWrapper = styled.div<AdmonitionTypeProps>`
 const TextContainer = styled.div`
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-unit);
+  gap: var(--admonition-text-gap);
   width: 100%;
 `;
 

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

@@ -0,0 +1,15 @@
+import { css } from "styled-components";
+
+export const admonitionDarkMode = css`
+  --admonition-info-bg-color: color-mix(in srgb, var(--color-blue-1) 40%, transparent); // @presenter Color
+  --admonition-info-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-blue-3) 40%, transparent); // @presenter Border
+
+  --admonition-warning-bg-color: color-mix(in srgb, var(--color-carrot-1) 40%, transparent); // @presenter Color
+  --admonition-warning-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-carrot-3) 40%, transparent); // @presenter Border
+
+  --admonition-danger-bg-color: color-mix(in srgb, var(--color-raspberry-1) 40%, transparent); // @presenter Color
+  --admonition-danger-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-raspberry-3) 40%, transparent); // @presenter Border
+
+  --admonition-success-bg-color: color-mix(in srgb, var(--color-green-1) 40%, transparent); // @presenter Color
+  --admonition-success-border: var(--admonition-border-width) var(--admonition-border-style) color-mix(in srgb, var(--color-green-3) 40%, transparent); // @presenter Border
+`;

package/src/components/Admonition/variables.ts

@@ -10,23 +10,23 @@ export const admonition = css`
   --admonition-font-size: var(--font-size-base); // @presenter FontSize
   --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --admonition-line-height: var(--line-height-base); // @presenter LineHeight
-  --admonition-heading-font-size: var(--font-size-lg); // @presenter FontSize
-  --admonition-heading-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --admonition-heading-line-height: var(--line-height-lg); // @presenter LineHeight
-  --admonition-heading-letter-spacing: 0.3px; // @presenter LetterSpacing
+  --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize
+  --admonition-heading-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --admonition-heading-line-height: var(--line-height-base); // @presenter LineHeight
+  --admonition-heading-letter-spacing: 0; // @presenter LetterSpacing
   --admonition-heading-transform: none;
-
+  --admonition-heading-text-color: var(--color-warm-grey-11); // @presenter Color
   /**
   * @tokens Admonition spacing
   * @presenter Spacing
   */
 
-  --admonition-margin-horizontal: 0;
-  --admonition-margin-vertical: var(--spacing-lg);
-  --admonition-padding-horizontal: var(--spacing-base);
-  --admonition-padding-vertical-xs: var(--spacing-xs);
-  --admonition-padding-vertical-md: var(--spacing-md);
-  --admonition-icon-size: 24px;
+  --admonition-gap: var(--spacing-sm); // @presenter Spacing
+  --admonition-text-gap: var(--spacing-xxs); // @presenter Spacing
+  --admonition-margin: var(--spacing-base) 0 var(--spacing-md) 0; // @presenter Spacing
+  --admonition-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing
+  --admonition-icon-margin: calc(var(--spacing-unit) / 2) 0; // @presenter Spacing
+  --admonition-icon-size: 18px; // @presenter Spacing
 
   /**
   * @tokens Admonition border
@@ -34,21 +34,20 @@ export const admonition = css`
 
   --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius
   --admonition-border-style: var(--border-style);
-  --admonition-border-width: calc(var(--border-width) * 4);
+  --admonition-border-width: 1px;
 
   /**
   * @tokens Admonition type info
   */
 
   --admonition-info-bg-color: var(--color-info-bg); // @presenter Color
-  --admonition-info-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-info-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-info-icon-color: var(--color-info-base); // @presenter Color
+  --admonition-info-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-info-icon-color: var(--color-info-active); // @presenter Color
   --admonition-info-border-color: var(--color-info-border); // @presenter Color
   --admonition-info-border-style: var(--admonition-border-style);
   --admonition-info-border-width: var(--admonition-border-width);
   --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border
-  --admonition-info-icon: none;
 
   /**
   * @tokens Admonition type warning
@@ -56,42 +55,39 @@ export const admonition = css`
 
   /* warning */
   --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color
-  --admonition-warning-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-warning-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-warning-icon-color: var(--color-warning-base); // @presenter Color
+  --admonition-warning-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-warning-icon-color: var(--color-warning-active); // @presenter Color
   --admonition-warning-border-color: var(--color-warning-border); // @presenter Color
   --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border
-  --admonition-warning-icon: none;
 
   /**
   * @tokens Admonition type danger
   */
 
   --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color
-  --admonition-danger-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-danger-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-danger-icon-color: var(--color-error-base); // @presenter Color
+  --admonition-danger-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-danger-icon-color: var(--color-error-active); // @presenter Color
   --admonition-danger-border-color: var(--color-error-border); // @presenter Color
   --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border
-  --admonition-danger-icon: none;
 
   /**
   * @tokens Admonition type success
   */
 
   --admonition-success-bg-color: var(--color-success-bg); // @presenter Color
-  --admonition-success-text-color: var(--text-color-secondary); // @presenter Color
-  --admonition-success-heading-text-color: var(--text-color-primary); // @presenter Color
-  --admonition-success-icon-color: var(--color-success-base); // @presenter Color
+  --admonition-success-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-heading-text-color: var(--admonition-heading-text-color); // @presenter Color
+  --admonition-success-icon-color: var(--color-success-active); // @presenter Color
   --admonition-success-border-color: var(--color-success-border); // @presenter Color
   --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
   --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
-  --admonition-success-icon: none;
 
   // @tokens End
 `;

package/src/components/AsyncApiDocs/hooks/AfterAsyncApiChannelDescription.tsx

@@ -0,0 +1,10 @@
+// interface AfterAsyncApiChannelDescriptionProps {
+//   channel: any;
+// }
+
+// export function AfterAsyncApiChannelDescription(_props: AfterAsyncApiChannelDescriptionProps) {
+//   return null;
+// }
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+export const AfterAsyncApiChannelDescription: any = null;

package/src/components/Badge/Badge.tsx

@@ -3,15 +3,23 @@ import styled, { css } from 'styled-components';
 
 import type { PropsWithChildren, JSX } from 'react';
 
+import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
+
 export type BadgeProps = PropsWithChildren<{
   deprecated?: boolean;
   color?: string;
   key?: string;
   className?: string;
+  icon?: string;
 }>;
 
-export function Badge(props: BadgeProps): JSX.Element {
-  return <BadgeComponent {...props} data-component-name="Badge/Badge" />;
+export function Badge({ icon, children, ...props }: BadgeProps): JSX.Element {
+  return (
+    <BadgeComponent {...props} data-component-name="Badge/Badge">
+      {icon ? <BadgeIcon icon={icon} /> : null}
+      {children}
+    </BadgeComponent>
+  );
 }
 
 const BadgeComponent = styled.span<BadgeProps>`
@@ -34,3 +42,11 @@ const BadgeComponent = styled.span<BadgeProps>`
       border-radius: var(--badge-deprecated-border-radius);
     `}
 `;
+
+const BadgeIcon = styled(GenericIcon)`
+  --icon-width: var(--font-size-sm);
+  --icon-height: var(--font-size-sm);
+  margin-right: var(--spacing-xxs);
+  flex-shrink: 0;
+  vertical-align: middle;
+`;

package/src/components/Banner/Banner.tsx

@@ -5,10 +5,13 @@ import type { BannerConfig } from '@redocly/config';
 import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { getNavbarElement } from '@redocly/theme/core/utils';
 import { Markdown } from '@redocly/theme/components/Markdown/Markdown';
 import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
 
+const ANIMATION_DURATION = 0.4;
+
 type BannerColor = 'info' | 'success' | 'warning' | 'error';
 
 type BannerProps = {
@@ -67,6 +70,25 @@ export function Banner({ className }: BannerProps): JSX.Element | null {
 
     updateHeight();
 
+    if (window.location.hash) {
+      setTimeout(
+        () => {
+          const hash = window.location.hash;
+          const el = document.getElementById(hash.slice(1));
+          if (el) {
+            const navbar = getNavbarElement();
+            const navbarHeight = navbar?.getBoundingClientRect().height ?? 0;
+            const elementTop = el.getBoundingClientRect().top + window.scrollY;
+            const scrollPosition = elementTop - navbarHeight;
+            if (Math.abs(window.scrollY - scrollPosition) > 1) {
+              window.scrollTo({ top: scrollPosition });
+            }
+          }
+        },
+        ANIMATION_DURATION * 1000 + 100,
+      );
+    }
+
     const resizeObserver = new ResizeObserver(updateHeight);
     resizeObserver.observe(bannerElement);
 
@@ -154,7 +176,7 @@ const BannerWrapper = styled.div<{ $color?: BannerColor; $isVisible?: boolean }>
   width: 100%;
   z-index: var(--z-index-overlay);
   transform: ${({ $isVisible }) => ($isVisible ? 'translateY(0)' : 'translateY(-100%)')};
-  transition: transform 0.4s ease-out;
+  transition: transform ${ANIMATION_DURATION}s ease-out;
   ${({ $color }) =>
     $color &&
     css`

package/src/components/Banner/variables.ts

@@ -4,6 +4,7 @@ export const banner = css`
   /**
   * @tokens Banner
   */
+  --banner-height: 0px; /* default 0px so calc formulas work on page load */
   --banner-button-size: 22px;
   --banner-button-padding: 3px; // @presenter Spacing
   --banner-button-font-size: var(--font-size-base);

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import type { JSX } from 'react';
 
 import { Link } from '@redocly/theme/components/Link/Link';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
 import { trimText } from '@redocly/theme/core/utils';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
@@ -48,9 +48,9 @@ export function Breadcrumb({ label, link, isActive, onClick, icon }: BreadcrumbP
   );
 
   return isTruncated ? (
-    <TooltipComponent tip={label} placement="bottom" width="max-content">
+    <Tooltip tip={label} placement="bottom">
       {breadcrumbContent}
-    </TooltipComponent>
+    </Tooltip>
   ) : (
     breadcrumbContent
   );

package/src/components/Breadcrumbs/BreadcrumbDropdown.tsx

@@ -8,7 +8,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
-import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
+import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 import { BREADCRUMB_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { BreadcrumbIcon } from '@redocly/theme/components/Breadcrumbs/BreadcrumbIcon';
@@ -39,9 +39,9 @@ export function BreadcrumbDropdown({
   const isTruncated = label.length > BREADCRUMB_MAX_LENGTH;
 
   const triggerContent = isTruncated ? (
-    <TooltipComponent tip={label} placement="bottom" width="max-content">
+    <Tooltip tip={label} placement="bottom">
       <TriggerContentWrapper>{children}</TriggerContentWrapper>
-    </TooltipComponent>
+    </Tooltip>
   ) : (
     children
   );
@@ -66,11 +66,14 @@ export function BreadcrumbDropdown({
                 key={index}
                 onAction={() => {
                   onItemClick?.(item, index);
-                  telemetry.sendBreadcrumbClickedMessage({
-                    link: item.link,
-                    position: index + 1,
-                    totalBreadcrumbs: items.length,
-                  });
+                  telemetry.sendBreadcrumbClickedMessage([
+                    {
+                      object: 'breadcrumb',
+                      link: item.link,
+                      position: index + 1,
+                      totalBreadcrumbs: items.length,
+                    },
+                  ]);
                 }}
                 $hasLink={hasLink}
                 to={item.link}

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -66,11 +66,14 @@ export function Breadcrumbs(props: {
           label={translatedLabel}
           items={siblingsWithActive}
           onItemClick={(item, itemIdx) =>
-            telemetry.sendBreadcrumbClickedMessage({
-              link: item.link,
-              position: itemIdx + 1,
-              totalBreadcrumbs: siblingsWithActive.length,
-            })
+            telemetry.sendBreadcrumbClickedMessage([
+              {
+                object: 'breadcrumb',
+                link: item.link,
+                position: itemIdx + 1,
+                totalBreadcrumbs: siblingsWithActive.length,
+              },
+            ])
           }
         >
           <BreadcrumbIcon icon={breadcrumb.icon} />
@@ -87,11 +90,14 @@ export function Breadcrumbs(props: {
         isActive={isActive}
         icon={breadcrumb.icon}
         onClick={() =>
-          telemetry.sendBreadcrumbClickedMessage({
-            link: breadcrumb.link,
-            position: idx + 1,
-            totalBreadcrumbs: breadcrumbs.length,
-          })
+          telemetry.sendBreadcrumbClickedMessage([
+            {
+              object: 'breadcrumb',
+              link: breadcrumb.link,
+              position: idx + 1,
+              totalBreadcrumbs: breadcrumbs.length,
+            },
+          ])
         }
       />
     );
@@ -112,11 +118,14 @@ export function Breadcrumbs(props: {
                 label="..."
                 items={collapsedBreadcrumbs}
                 onItemClick={(item, itemIdx) =>
-                  telemetry.sendBreadcrumbClickedMessage({
-                    link: item.link,
-                    position: itemIdx + 1,
-                    totalBreadcrumbs: breadcrumbs.length,
-                  })
+                  telemetry.sendBreadcrumbClickedMessage([
+                    {
+                      object: 'breadcrumb',
+                      link: item.link,
+                      position: itemIdx + 1,
+                      totalBreadcrumbs: breadcrumbs.length,
+                    },
+                  ])
                 }
               >
                 ...

package/src/components/Buttons/AIAssistantButton.tsx

@@ -77,9 +77,12 @@ export function AIAssistantButton() {
 
   const handleOpen = () => {
     setIsOpen(true);
-    telemetry.sendSearchAiOpenedMessage({
-      method: 'ai_trigger_button',
-    });
+    telemetry.sendSearchAiOpenedMessage([
+      {
+        object: 'search',
+        method: 'ai_trigger_button',
+      },
+    ]);
   };
 
   const handleClose = () => {
@@ -108,7 +111,7 @@ export function AIAssistantButton() {
 const StyledAIAssistantButton = styled(Button)<{ $inputType?: AIAssistantButtonType }>`
   position: fixed;
   bottom: var(--ai-assistant-button-bottom);
-  right: var(--ai-assistant-button-right);
+  right: calc(var(--ai-assistant-button-right) + var(--modal-scrollbar-width, 0px));
   ${({ $inputType }) =>
     $inputType === 'icon'
       ? `

package/src/components/Catalog/CatalogEntities.tsx

@@ -76,14 +76,16 @@ export function CatalogEntities(props: CatalogEntitiesProps): JSX.Element {
 
   const onRowClick = (entity: BffCatalogEntity) => {
     if (searchQuery) {
-      telemetry.sendCatalogEntitiesListSearchResultClickedMessage({
-        id: entity.id,
-        object: 'catalog_entity',
-        uri: getEntityDetailsLink(entity),
-        query: searchQuery,
-        entityKey: entity.key,
-        entityType: entity.type,
-      });
+      telemetry.sendCatalogEntitiesListSearchResultClickedMessage([
+        {
+          id: entity.id,
+          object: 'catalog_entity',
+          uri: getEntityDetailsLink(entity),
+          query: searchQuery,
+          entityKey: entity.key,
+          entityType: entity.type,
+        },
+      ]);
     }
   };
 

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

@@ -20,7 +20,7 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
-import { CatalogEntityHistorySidebar } from '@redocly/theme';
+import { CatalogEntityHistorySidebar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar';
 
 export type CatalogEntityProps = {
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */