@redocly/theme 0.61.1 → 0.62.0-custom.1

package/lib/markdoc/components/LoginButton/LoginButton.js

@@ -0,0 +1,48 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoginButton = LoginButton;
+const React = __importStar(require("react"));
+const hooks_1 = require("../../../core/hooks");
+const LoginButton_1 = require("../../../components/UserMenu/LoginButton");
+function LoginButton({ variant, size, label, labelTranslationKey, }) {
+    const { useUserMenu } = (0, hooks_1.useThemeHooks)();
+    const { userData, loginUrl } = useUserMenu();
+    if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+        return null;
+    }
+    return (React.createElement(LoginButton_1.LoginButton, { href: loginUrl || '', variant: variant, size: size, label: label, labelTranslationKey: labelTranslationKey, "data-component-name": "Markdoc/LoginButton" }));
+}
+//# sourceMappingURL=LoginButton.js.map

package/lib/markdoc/components/Mermaid/Mermaid.js

@@ -1,18 +1,75 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = Mermaid;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../../core/utils");
+const hooks_1 = require("../../../core/hooks");
+const SvgViewer_1 = require("../../../components/SvgViewer/SvgViewer");
 function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, className, }) {
-    return (react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/Mermaid/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const open = () => setIsOpen(true);
+    const close = () => setIsOpen(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Wrapper, { className: (0, utils_1.concatClassNames)('mermaid-wrapper', className), dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdoc/Mermaid/Mermaid", "data-source": dataSource, "data-hash": dataHash, onClick: open, onKeyDown: (e) => e.key === 'Enter' || (e.key === ' ' && open()), role: "button", tabIndex: 0, "aria-label": translate('mermaid.openFullscreen', 'Click to open diagram in fullscreen') }),
+        react_1.default.createElement(SvgViewer_1.SvgViewer, { isOpen: isOpen, onClose: close, labels: {
+                zoomIn: translate('mermaid.zoomIn', 'Zoom in'),
+                zoomOut: translate('mermaid.zoomOut', 'Zoom out'),
+                fitToView: translate('mermaid.reset', 'Fit to view'),
+                close: translate('mermaid.close', 'Close'),
+                dialogLabel: translate('mermaid.viewer', 'Mermaid diagram viewer'),
+            } },
+            react_1.default.createElement(ViewerContent, { dangerouslySetInnerHTML: { __html: diagramHtml } }))));
 }
 const Wrapper = styled_components_1.default.div `
   background-color: var(--mermaid-bg-color);
   border-radius: var(--mermaid-border-radius);
+  cursor: pointer;
+  transition: box-shadow 0.2s ease;
+
+  &:hover,
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--border-color-input-focus);
+  }
 
   * {
     font-family: var(--mermaid-font-family) !important;
@@ -23,4 +80,15 @@ const Wrapper = styled_components_1.default.div `
     max-width: 100%;
   }
 `;
+const ViewerContent = styled_components_1.default.div `
+  * {
+    font-family: var(--mermaid-font-family) !important;
+  }
+
+  .mermaid > svg {
+    font-size: var(--font-size-base) !important;
+    display: block;
+    max-width: none !important;
+  }
+`;
 //# sourceMappingURL=Mermaid.js.map

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

@@ -21,3 +21,4 @@ export * from '../../markdoc/components/CodeWalkthrough/CodeContainer';
 export * from '../../markdoc/components/CodeGroup/CodeGroup';
 export * from '../../markdoc/components/Icon/Icon';
 export * from '../../markdoc/components/ConnectMCP/ConnectMCP';
+export * from '../../markdoc/components/LoginButton/LoginButton';

package/lib/markdoc/components/default.js

@@ -37,4 +37,5 @@ __exportStar(require("../../markdoc/components/CodeWalkthrough/CodeContainer"),
 __exportStar(require("../../markdoc/components/CodeGroup/CodeGroup"), exports);
 __exportStar(require("../../markdoc/components/Icon/Icon"), exports);
 __exportStar(require("../../markdoc/components/ConnectMCP/ConnectMCP"), exports);
+__exportStar(require("../../markdoc/components/LoginButton/LoginButton"), exports);
 //# sourceMappingURL=default.js.map

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.1",
+  "version": "0.62.0-custom.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -29,9 +29,9 @@
     "@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": {
@@ -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",
@@ -62,8 +62,8 @@
     "typescript": "5.9.3",
     "vitest": "4.0.10",
     "vitest-when": "0.6.2",
-    "webpack": "5.94.0",
-    "@redocly/realm-asyncapi-sdk": "0.7.0"
+    "webpack": "5.105.2",
+    "@redocly/realm-asyncapi-sdk": "0.9.0-next.1"
   },
   "dependencies": {
     "@tanstack/react-query": "5.62.3",
@@ -78,17 +78,17 @@
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "4.1.1",
     "nprogress": "0.2.0",
-    "openapi-sampler": "1.6.2",
+    "openapi-sampler": "1.7.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.41.2"
+    "@redocly/config": "0.43.0-custom.1"
   },
   "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/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/Buttons/EditPageButton.tsx

@@ -5,7 +5,7 @@ import type { JSX } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
-import { Link } from '@redocly/theme/components/Link/Link';
+import { Button } from '@redocly/theme/components/Button/Button';
 
 export type EditPageButtonProps = {
   to: string;
@@ -17,43 +17,22 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   const telemetry = useTelemetry();
 
   return (
-    <EditPageButtonWrapper
-      data-component-name="Buttons/EditPageButton"
-      target="_blank"
-      to={to}
-      onClick={() => telemetry.sendEditPageLinkClickedMessage()}
-    >
-      <ButtonIcon />
-      <ButtonText data-translation-key="markdown.editPage.text">
+    <EditPageButtonWrapper data-component-name="Buttons/EditPageButton">
+      <Button
+        to={to}
+        external={true}
+        variant="ghost"
+        size="small"
+        icon={<EditIcon />}
+        onClick={() => telemetry.sendEditPageLinkClickedMessage()}
+        data-translation-key="markdown.editPage.text"
+      >
         {translate('markdown.editPage.text', 'Edit')}
-      </ButtonText>
+      </Button>
     </EditPageButtonWrapper>
   );
 }
 
-const EditPageButtonWrapper = styled(Link)`
-  height: fit-content;
+const EditPageButtonWrapper = styled.div`
   margin-left: auto;
-  display: inline-flex;
-  color: var(--text-color-secondary);
-  font-weight: var(--font-weight-bold);
-  font-size: var(--font-size-base);
-  font-family: var(--font-family-base);
-  text-decoration: none;
-
-  &:hover {
-    color: var(--text-color-primary);
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-const ButtonIcon = styled(EditIcon)`
-  margin-right: 3px;
-`;
-
-const ButtonText = styled.span`
-  line-height: 14px;
 `;

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 */