@redocly/theme 0.57.0-next.2 → 0.57.0-next.4

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -0,0 +1,60 @@
+export declare const useTelemetryFallback: () => {
+    send: () => void;
+    sendPageViewedMessage: () => void;
+    sendErrorMessage: () => void;
+    sendClientErrorMessage: () => void;
+    sendBreadcrumbClickedMessage: () => void;
+    sendColorModeSwitchedMessage: () => void;
+    sendSidebarItemClickedMessage: () => void;
+    sendSidebarItemExpandedMessage: () => void;
+    sendSidebarItemCollapsedMessage: () => void;
+    sendChangeLayoutButtonClickedMessage: () => void;
+    sendEditPageLinkClickedMessage: () => void;
+    sendCodeSnippetReportedMessage: () => void;
+    sendNavbarMenuItemClickedMessage: () => void;
+    sendLoginButtonClickedMessage: () => void;
+    sendLoginProviderButtonClickedMessage: () => void;
+    sendLogoutMenuItemClickedMessage: () => void;
+    sendLogoClickedMessage: () => void;
+    sendTocItemClickedMessage: () => void;
+    sendCatalogFilterChangedMessage: () => void;
+    sendCatalogItemClickedMessage: () => void;
+    sendScorecardLinkClickedMessage: () => void;
+    sendBackToCatalogButtonClickedMessage: () => void;
+    sendSidebarDrilldownBackButtonClickedMessage: () => void;
+    sendFooterItemClickedMessage: () => void;
+    sendCatalogActionsButtonClickedMessage: () => void;
+    sendMobileMenuButtonCloseClickedMessage: () => void;
+    sendMobileMenuButtonOpenClickedMessage: () => void;
+    sendSearchInputResetButtonClickedMessage: () => void;
+    sendSearchRecentRemoveButtonClickedMessage: () => void;
+    sendSearchRecentClickedMessage: () => void;
+    sendRequestApiAccessButtonClickedMessage: () => void;
+    sendVersionPickerSelectionChangeMessage: () => void;
+    sendProductPickedMessage: () => void;
+    sendFilterCheckboxToggledMessage: () => void;
+    sendLanguagePickerLocaleChangedMessage: () => void;
+    sendSearchOpenedMessage: () => void;
+    sendSearchQueryMessage: () => void;
+    sendSearchAIQueryMessage: () => void;
+    sendFeedbackMessage: () => void;
+    sendSearchResultClickedMessage: () => void;
+    sendRedirectMessage: () => void;
+    sendOpenapiDocsMessage: () => void;
+    sendCopyCodeSnippetClickedMessage: () => void;
+    sendOpenapiDocsViewedMessage: () => void;
+    sendOpenapiDocsPerformanceMetricsMessage: () => void;
+    sendOpenapiDocsDownloadDefinitionClickedMessage: () => void;
+    sendOpenapiDocsSelectLanguageClickedMessage: () => void;
+    sendOpenapiDocsExpandCollapseAllClickedMessage: () => void;
+    sendOpenapiDocsSwitchServersClickedMessage: () => void;
+    sendOpenapiDocsExamplesSwitcherClickedMessage: () => void;
+    sendOpenapiDocsTryItOpenedMessage: () => void;
+    sendAsyncapiDocsViewedMessage: () => void;
+    sendAsyncapiDocsPerformanceMetricsMessage: () => void;
+    sendAsyncapiDocsSwitchMessageClickedMessage: () => void;
+    sendAsyncapiDocsSwitchExampleClickedMessage: () => void;
+    sendAsyncapiDocsMessageClickedMessage: () => void;
+    sendAsyncapiDocsServerModalOpenedMessage: () => void;
+    sendAsyncapiDocsDownloadDefinitionClickedMessage: () => void;
+};

package/lib/core/hooks/use-telemetry-fallback.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTelemetryFallback = void 0;
+// TODO we need to create some common way to do this.
+const useTelemetryFallback = () => ({
+    send: () => { },
+    sendPageViewedMessage: () => { },
+    sendErrorMessage: () => { },
+    sendClientErrorMessage: () => { },
+    sendBreadcrumbClickedMessage: () => { },
+    sendColorModeSwitchedMessage: () => { },
+    sendSidebarItemClickedMessage: () => { },
+    sendSidebarItemExpandedMessage: () => { },
+    sendSidebarItemCollapsedMessage: () => { },
+    sendChangeLayoutButtonClickedMessage: () => { },
+    sendEditPageLinkClickedMessage: () => { },
+    sendCodeSnippetReportedMessage: () => { },
+    sendNavbarMenuItemClickedMessage: () => { },
+    sendLoginButtonClickedMessage: () => { },
+    sendLoginProviderButtonClickedMessage: () => { },
+    sendLogoutMenuItemClickedMessage: () => { },
+    sendLogoClickedMessage: () => { },
+    sendTocItemClickedMessage: () => { },
+    sendCatalogFilterChangedMessage: () => { },
+    sendCatalogItemClickedMessage: () => { },
+    sendScorecardLinkClickedMessage: () => { },
+    sendBackToCatalogButtonClickedMessage: () => { },
+    sendSidebarDrilldownBackButtonClickedMessage: () => { },
+    sendFooterItemClickedMessage: () => { },
+    sendCatalogActionsButtonClickedMessage: () => { },
+    sendMobileMenuButtonCloseClickedMessage: () => { },
+    sendMobileMenuButtonOpenClickedMessage: () => { },
+    sendSearchInputResetButtonClickedMessage: () => { },
+    sendSearchRecentRemoveButtonClickedMessage: () => { },
+    sendSearchRecentClickedMessage: () => { },
+    sendRequestApiAccessButtonClickedMessage: () => { },
+    sendVersionPickerSelectionChangeMessage: () => { },
+    sendProductPickedMessage: () => { },
+    sendFilterCheckboxToggledMessage: () => { },
+    sendLanguagePickerLocaleChangedMessage: () => { },
+    sendSearchOpenedMessage: () => { },
+    sendSearchQueryMessage: () => { },
+    sendSearchAIQueryMessage: () => { },
+    sendFeedbackMessage: () => { },
+    sendSearchResultClickedMessage: () => { },
+    sendRedirectMessage: () => { },
+    sendOpenapiDocsMessage: () => { },
+    sendCopyCodeSnippetClickedMessage: () => { },
+    sendOpenapiDocsViewedMessage: () => { },
+    sendOpenapiDocsPerformanceMetricsMessage: () => { },
+    sendOpenapiDocsDownloadDefinitionClickedMessage: () => { },
+    sendOpenapiDocsSelectLanguageClickedMessage: () => { },
+    sendOpenapiDocsExpandCollapseAllClickedMessage: () => { },
+    sendOpenapiDocsSwitchServersClickedMessage: () => { },
+    sendOpenapiDocsExamplesSwitcherClickedMessage: () => { },
+    sendOpenapiDocsTryItOpenedMessage: () => { },
+    sendAsyncapiDocsViewedMessage: () => { },
+    sendAsyncapiDocsPerformanceMetricsMessage: () => { },
+    sendAsyncapiDocsSwitchMessageClickedMessage: () => { },
+    sendAsyncapiDocsSwitchExampleClickedMessage: () => { },
+    sendAsyncapiDocsMessageClickedMessage: () => { },
+    sendAsyncapiDocsServerModalOpenedMessage: () => { },
+    sendAsyncapiDocsDownloadDefinitionClickedMessage: () => { },
+});
+exports.useTelemetryFallback = useTelemetryFallback;
+//# sourceMappingURL=use-telemetry-fallback.js.map

package/lib/core/hooks/use-theme-hooks.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemeHooks = void 0;
 const react_1 = require("react");
 const ThemeDataContext_1 = require("../contexts/ThemeDataContext");
+const use_telemetry_fallback_1 = require("./use-telemetry-fallback");
 const fallbacks = {
     useTranslate: () => ({
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),
     useSubmitFeedback: () => ({ submitFeedback: () => { } }),
-    useTelemetry: () => ({ send: () => { } }),
+    useTelemetry: use_telemetry_fallback_1.useTelemetryFallback,
     /**
      * @deprecated use `useTelemetry` instead
      **/

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

@@ -1,3 +1,4 @@
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type { CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
@@ -7,7 +8,6 @@ import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredC
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem } from './search';
-import type { EventType, SendEventParams } from './telemetry';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
@@ -117,9 +117,7 @@ export type ThemeHooks = {
         entityKey: string;
     }, initialData?: BffCatalogRelatedEntityList) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
     useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
-    useTelemetry: () => {
-        send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
-    };
+    useTelemetry: () => Omit<AsyncApiRealmUI.Telemetry, 'init' | 'updateCloudEventData' | 'forceFlush' | 'startSpan' | 'constructCloudEvent' | 'sendToOtelService'>;
     useUserTeams: () => string[];
     usePageData: () => PageData | null;
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;

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

@@ -15,5 +15,4 @@ export * from './common';
 export * from './open-api-server';
 export * from './marker';
 export * from './code-walkthrough';
-export * from './telemetry';
 export * from './page-actions';

package/lib/core/types/index.js

@@ -31,6 +31,5 @@ __exportStar(require("./common"), exports);
 __exportStar(require("./open-api-server"), exports);
 __exportStar(require("./marker"), exports);
 __exportStar(require("./code-walkthrough"), exports);
-__exportStar(require("./telemetry"), exports);
 __exportStar(require("./page-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/icons/PlayIcon/PlayIcon.d.ts

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

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayIcon = 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 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { d: "M3.0625 12.25C2.94647 12.25 2.83519 12.2039 2.75314 12.1219C2.67109 12.0398 2.625 11.9286 2.625 11.8125V2.18753C2.62499 2.1115 2.6448 2.03678 2.68247 1.97074C2.72014 1.9047 2.77437 1.84961 2.83981 1.81092C2.90526 1.77222 2.97965 1.75124 3.05567 1.75005C3.13169 1.74887 3.20671 1.76751 3.27333 1.80415L12.0233 6.61665C12.092 6.6544 12.1492 6.70989 12.1891 6.77733C12.229 6.84476 12.25 6.92167 12.25 7.00001C12.25 7.07835 12.229 7.15526 12.1891 7.22269C12.1492 7.29013 12.092 7.34562 12.0233 7.38337L3.27333 12.1959C3.20874 12.2314 3.13622 12.25 3.0625 12.25ZM3.5 2.9273V11.0726L10.9046 7.00003L3.5 2.9273Z" })));
+exports.PlayIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/PlayIcon/PlayIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=PlayIcon.js.map

package/lib/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon.d.ts

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

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WorkflowHierarchyIcon = 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", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 6.5H13.5C13.7651 6.4997 14.0193 6.39424 14.2068 6.20677C14.3942 6.0193 14.4997 5.76512 14.5 5.5V2.5C14.4997 2.23488 14.3942 1.9807 14.2068 1.79323C14.0193 1.60576 13.7651 1.5003 13.5 1.5H2.5C2.23488 1.5003 1.9807 1.60576 1.79323 1.79323C1.60576 1.9807 1.5003 2.23488 1.5 2.5V5.5C1.5003 5.76512 1.60576 6.0193 1.79323 6.20677C1.9807 6.39424 2.23488 6.4997 2.5 6.5H3.5H4.5ZM13.5 2.5H2.5V5.5H13.5V2.5Z" }),
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.5 9.5H8.5C8.23488 9.5003 7.9807 9.60576 7.79323 9.79323C7.60576 9.9807 7.5003 10.2349 7.5 10.5V11.5H4.5V9.29295V8.5V6.5H3.5V9.29295V11.5C3.5003 11.7651 3.60576 12.0193 3.79323 12.2068C3.9807 12.3942 4.23488 12.4997 4.5 12.5H7.5V13.5C7.5003 13.7651 7.60576 14.0193 7.79323 14.2068C7.9807 14.3942 8.23488 14.4997 8.5 14.5H13.5C13.7651 14.4997 14.0193 14.3942 14.2068 14.2068C14.3942 14.0193 14.4997 13.7651 14.5 13.5V10.5C14.4997 10.2349 14.3942 9.9807 14.2068 9.79323C14.0193 9.60576 13.7651 9.5003 13.5 9.5ZM8.5 10.5V13.5H13.5V10.5H8.5Z" })));
+exports.WorkflowHierarchyIcon = (0, styled_components_1.default)(Icon).attrs(() => ({
+    'data-component-name': 'icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon',
+})) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=WorkflowHierarchyIcon.js.map

package/lib/index.d.ts

@@ -238,6 +238,7 @@ export * from './icons/CharacterIcon/CharacterIcon';
 export * from './icons/FileIcon/FileIcon';
 export * from './icons/ExportIcon/ExportIcon';
 export * from './icons/CertificateIcon/CertificateIcon';
+export * from './icons/PlayIcon/PlayIcon';
 export * from './icons/PlaylistIcon/PlaylistIcon';
 export * from './icons/WorkflowAutomationIcon/WorkflowAutomationIcon';
 export * from './icons/TaskViewIcon/TaskViewIcon';
@@ -254,6 +255,7 @@ export * from './icons/RabbitMQIcon/RabbitMQIcon';
 export * from './icons/CurveAutoColonIcon/CurveAutoColonIcon';
 export * from './icons/AiStarsIcon/AiStarsIcon';
 export * from './icons/AiStarsGradientIcon/AiStarsGradientIcon';
+export * from './icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon';
 export * from './icons/GenericIcon/GenericIcon';
 export * from './layouts/RootLayout';
 export * from './layouts/PageLayout';

package/lib/index.js

@@ -291,6 +291,7 @@ __exportStar(require("./icons/CharacterIcon/CharacterIcon"), exports);
 __exportStar(require("./icons/FileIcon/FileIcon"), exports);
 __exportStar(require("./icons/ExportIcon/ExportIcon"), exports);
 __exportStar(require("./icons/CertificateIcon/CertificateIcon"), exports);
+__exportStar(require("./icons/PlayIcon/PlayIcon"), exports);
 __exportStar(require("./icons/PlaylistIcon/PlaylistIcon"), exports);
 __exportStar(require("./icons/WorkflowAutomationIcon/WorkflowAutomationIcon"), exports);
 __exportStar(require("./icons/TaskViewIcon/TaskViewIcon"), exports);
@@ -307,6 +308,7 @@ __exportStar(require("./icons/RabbitMQIcon/RabbitMQIcon"), exports);
 __exportStar(require("./icons/CurveAutoColonIcon/CurveAutoColonIcon"), exports);
 __exportStar(require("./icons/AiStarsIcon/AiStarsIcon"), exports);
 __exportStar(require("./icons/AiStarsGradientIcon/AiStarsGradientIcon"), exports);
+__exportStar(require("./icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon"), exports);
 __exportStar(require("./icons/GenericIcon/GenericIcon"), exports);
 /* Layouts */
 __exportStar(require("./layouts/RootLayout"), exports);

package/lib/layouts/ThreePanelLayout.js

@@ -54,14 +54,11 @@ const Wrapper = styled_components_1.default.div `
   margin: 0 auto;
   width: 100%;
 
-  ${({ layout = config_1.LayoutVariant.THREE_PANEL, collapsedSidebar }) => {
+  ${({ layout = config_1.LayoutVariant.THREE_PANEL }) => {
     return (0, styled_components_1.css) `
       max-width: ${layout === config_1.LayoutVariant.THREE_PANEL ? '100%' : ''};
 
       @media screen and (min-width: ${media_css_1.breakpoints.small}) {
-        width: ${collapsedSidebar
-        ? `var(--layout-${layout}-small-max-width)`
-        : 'calc(100% - var(--sidebar-width))'};
         max-width: var(--layout-${layout}-small-max-width);
       }
 

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -40,11 +40,11 @@ const FilterWrapper = styled_components_1.default.div `
   flex-wrap: wrap;
   position: sticky;
 
-  padding-top: calc(var(--spacing-xs) + var(--spacing-xl));
+  padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: calc(var(--navbar-height));
+  top: var(--navbar-height);
   background-color: var(--bg-color);
   z-index: 1;
   max-width: var(--md-content-max-width);

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -52,6 +52,7 @@ const CodePanelWrapper = styled_components_1.default.div `
   min-width: 0;
   height: 100%;
   word-wrap: break-word;
+  margin-top: var(--spacing-xl);
 
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);

package/lib/markdoc/components/CodeWalkthrough/CodeToggle.js

@@ -44,7 +44,7 @@ function CodeToggle(props) {
     return (react_1.default.createElement(exports.ToggleWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeToggle" },
         react_1.default.createElement(ToggleContentWrapper, null,
             react_1.default.createElement(exports.ToggleSubtitle, null,
-                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeControlState(id, newValue) }),
+                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeControlState(id, newValue), stopPropagation: true }),
                 react_1.default.createElement("div", null, label)),
             description ? (react_1.default.createElement("div", null, description.map((paragraph, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, paragraph))))) : null),
         checked ? children : null));

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -87,9 +87,14 @@ const DocsPanel = styled_components_1.default.div `
   min-height: 0;
   min-height: calc(100vh - var(--navbar-height));
 
+  padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);
   padding-bottom: calc(var(--spacing-xs) + var(--spacing-xl));
   gap: var(--spacing-xl);
+
+  &:has([data-component-name='Markdoc/CodeWalkthrough/CodeFilters']) {
+    padding-top: 0;
+  }
 `;
 const ContentWrapper = styled_components_1.default.div `
   flex-grow: 1;
@@ -115,14 +120,8 @@ const ContentWrapper = styled_components_1.default.div `
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
-  &:first-child {
-    padding-top: var(--spacing-sm);
-  }
-
-  &:not(:first-child) {
-    & > *:first-child {
-      margin-top: 0;
-    }
+  && > *:first-child {
+    margin-top: 0;
   }
 `;
 //# sourceMappingURL=CodeWalkthrough.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.57.0-next.2",
+  "version": "0.57.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,7 +87,7 @@
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
     "@redocly/config": "0.28.0",
-    "@redocly/realm-asyncapi-sdk": "0.3.0-next.0"
+    "@redocly/realm-asyncapi-sdk": "0.3.0-next.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/Breadcrumbs/Breadcrumbs.tsx

@@ -31,13 +31,10 @@ export function Breadcrumbs(props: {
               label={breadcrumb.label}
               isActive={isLast}
               onClick={() => {
-                telemetry.send({
-                  type: 'breadcrumb.clicked',
-                  payload: {
-                    link: breadcrumb.link,
-                    position: idx + 1,
-                    totalBreadcrumbs: breadcrumbs.length,
-                  },
+                telemetry.sendBreadcrumbClickedMessage({
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  totalBreadcrumbs: breadcrumbs.length,
                 });
               }}
             />

package/src/components/Buttons/EditPageButton.tsx

@@ -21,7 +21,7 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
       data-component-name="Buttons/EditPageButton"
       target="_blank"
       to={to}
-      onClick={() => telemetry.send({ type: 'edit_page_link.clicked' })}
+      onClick={() => telemetry.sendEditPageLinkClickedMessage(undefined)}
     >
       <ButtonIcon />
       <ButtonText data-translation-key="markdown.editPage.text">

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -30,7 +30,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
         window.location.assign(
           `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
         );
-        telemetry.send({ type: 'catalog_item.clicked' });
+        telemetry.sendCatalogItemClickedMessage(undefined);
       }}
     >
       <CardContent>

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

@@ -1,23 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { Route, Routes, useLocation, matchPath } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
 
 import { breakpoints } from '@redocly/theme/core/utils';
-import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
 import { CatalogEntityProperties } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties';
 import { CatalogEntityMetadata } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMetadata';
 import { CatalogEntityLinks } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityLinks';
 import { Breadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
-import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { Menu } from '@redocly/theme/components/Menu/Menu';
-import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogEntityRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 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';
@@ -48,64 +43,14 @@ export function CatalogEntity({
 }: CatalogEntityProps) {
   const { useTranslate, useCatalog } = useThemeHooks();
   const { translate } = useTranslate();
+
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-  const {
-    layout,
-    collapsedSidebar,
-    onChangeViewClick,
-    onChangeCollapseSidebarClick,
-    searchQuery,
-    setSearchQuery,
-  } = useCatalog();
-
-  const { pathname } = useLocation();
-  const linkBase = `${linkToMainCatalog}/entities/${entity.key}`;
-  const menuItemDefs = [
-    { label: 'Overview', path: linkBase, end: true },
-    { label: 'Relations Graph', path: `${linkBase}/relations-graph`, end: true },
-  ];
-  const sidebarMenuItems = menuItemDefs.map(({ label, path, end }) => ({
-    label,
-    link: path,
-    active: Boolean(matchPath({ path: `/${path}`, end }, pathname)),
-    items: [],
-    hasActiveSubItem: false,
-  }));
+
+  const { searchQuery, setSearchQuery } = useCatalog();
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
-      <CatalogSidebar
-        collapsed={collapsedSidebar}
-        header={
-          <BackLink
-            icon={<ArrowLeftIcon />}
-            iconPosition="left"
-            variant="ghost"
-            size="medium"
-            data-component-name="Sidebar/BackButton"
-            to={linkToMainCatalog}
-          >
-            {collapsedSidebar ? (
-              ''
-            ) : (
-              <div data-translation-key="sidebar.menu.backLabel">
-                {translate('sidebar.menu.backLabel')}
-              </div>
-            )}
-          </BackLink>
-        }
-        menu={<Menu items={sidebarMenuItems} />}
-        footer={
-          <SidebarActions
-            layout={layout}
-            collapsedSidebar={collapsedSidebar}
-            isApiDocs={false}
-            onChangeViewClick={onChangeViewClick}
-            onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
-          />
-        }
-      />
       <CatalogPageContent>
         <Breadcrumbs
           additionalBreadcrumbs={[
@@ -196,15 +141,6 @@ const CatalogPageContent = styled.main`
   }
 `;
 
-const CatalogSidebar = styled(Sidebar)`
-  display: none;
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: flex;
-  }
-  --menu-container-padding-top: 0;
-`;
-
 const CatalogEntityPageWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -223,11 +159,3 @@ const CatalogTwoColumnsSection = styled.section`
   gap: 24px;
   align-items: start;
 `;
-
-const BackLink = styled(Button)`
-  padding: var(--spacing-unit) 0;
-  height: calc(var(--line-height-base) + var(--spacing-unit) * 2);
-  justify-content: flex-start;
-  width: 100%;
-  margin-bottom: 0px;
-`;

package/src/components/CatalogClassic/CatalogClassicActions.tsx

@@ -42,7 +42,7 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
         iconPosition="left"
         onClick={() => {
           onOpenFilter();
-          telemetry.send({ type: 'catalog_actions_button.clicked' });
+          telemetry.sendCatalogActionsButtonClickedMessage(undefined);
         }}
         data-translation-key="catalog.filters.title"
       >

package/src/components/CatalogClassic/CatalogClassicCard.tsx

@@ -38,7 +38,7 @@ export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Eleme
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
         data-component-name="CatalogClassic/CatalogClassicCard"
-        onClick={() => telemetry.send({ type: 'catalog_item.clicked' })}
+        onClick={() => telemetry.sendCatalogItemClickedMessage(undefined)}
       >
         <CardContent>
           <CardTitleWrapper>

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -51,9 +51,7 @@ function ScorecardBadge(props: {
   return (
     <Link to={slug}>
       <Tag
-        onClick={() =>
-          telemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } })
-        }
+        onClick={() => telemetry.sendScorecardLinkClickedMessage({ action: 'click' })}
         withStatusDot
         statusDotColor={`var(${colorVariable})`}
       >