@redocly/theme 0.54.0-next.5 → 0.54.0-next.7

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -9,8 +9,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const Breadcrumb_1 = require("../../components/Breadcrumbs/Breadcrumb");
 function Breadcrumbs(props) {
-    const { useBreadcrumbs, useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useBreadcrumbs, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     const breadcrumbs = useBreadcrumbs();
     if (breadcrumbs.length === 0) {
         return null;
@@ -19,10 +19,13 @@ function Breadcrumbs(props) {
         const isLast = idx === breadcrumbs.length - 1;
         return (react_1.default.createElement(react_1.default.Fragment, { key: idx },
             react_1.default.createElement(Breadcrumb_1.Breadcrumb, { link: breadcrumb.link, label: breadcrumb.label, isActive: isLast, onClick: () => {
-                    telemetry.send('breadcrumb_clicked', {
-                        link: breadcrumb.link,
-                        position: idx + 1,
-                        total_breadcrumbs: breadcrumbs.length,
+                    otelTelemetry.send({
+                        type: 'breadcrumb.clicked',
+                        payload: {
+                            link: breadcrumb.link,
+                            position: idx + 1,
+                            total_breadcrumbs: breadcrumbs.length,
+                        },
                     });
                 } }),
             isLast ? null : react_1.default.createElement("span", null, "/")));

package/lib/components/Buttons/EditPageButton.js

@@ -10,10 +10,10 @@ const hooks_1 = require("../../core/hooks");
 const EditIcon_1 = require("../../icons/EditIcon/EditIcon");
 const Link_1 = require("../../components/Link/Link");
 function EditPageButton({ to }) {
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
-    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => telemetry.send('edit_page_link_clicked', {}) },
+    const otelTelemetry = useOtelTelemetry();
+    return (react_1.default.createElement(EditPageButtonWrapper, { "data-component-name": "Buttons/EditPageButton", target: "_blank", to: to, onClick: () => otelTelemetry.send({ type: 'edit_page_link.clicked' }) },
         react_1.default.createElement(ButtonIcon, null),
         react_1.default.createElement(ButtonText, { "data-translation-key": "markdown.editPage.text" }, translate('markdown.editPage.text', 'Edit'))));
 }

package/lib/components/{CatalogLegacy/CatalogLegacy.d.ts → CatalogClassic/CatalogClassic.d.ts}

@@ -1,12 +1,12 @@
 import type { JSX } from 'react';
 import type { CatalogConfig } from '../../config';
-export type CatalogLegacyProps = {
+export type CatalogClassicProps = {
     pageProps: {
         catalogId: string;
         catalogConfig: CatalogConfig;
     };
 };
-export default function CatalogLegacy(props: CatalogLegacyProps): JSX.Element;
+export default function CatalogClassic(props: CatalogClassicProps): JSX.Element;
 export declare const CatalogPageContent: import("styled-components").StyledComponent<"main", any, {}, never>;
 export declare const CatalogTitle: import("styled-components").StyledComponent<"h2", any, {}, never>;
 export declare const CatalogDescription: import("styled-components").StyledComponent<"p", any, {}, never>;

package/lib/components/{CatalogLegacy/CatalogLegacy.js → CatalogClassic/CatalogClassic.js}

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CatalogPageDescriptionWrapper = exports.CatalogPageWrapper = exports.CatalogDescription = exports.CatalogTitle = exports.CatalogPageContent = void 0;
-exports.default = CatalogLegacy;
+exports.default = CatalogClassic;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
@@ -12,22 +12,22 @@ const hooks_1 = require("../../core/hooks");
 const H2_1 = require("../../components/Typography/H2");
 const FilterContent_1 = require("../../components/Filter/FilterContent");
 const FilterPopover_1 = require("../../components/Filter/FilterPopover");
-const CatalogLegacyHighlight_1 = require("../../components/CatalogLegacy/CatalogLegacyHighlight");
-const CatalogLegacyActions_1 = require("../../components/CatalogLegacy/CatalogLegacyActions");
+const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
+const CatalogClassicActions_1 = require("../../components/CatalogClassic/CatalogClassicActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CatalogLegacyVirtualizedGroups_1 = require("../../components/CatalogLegacy/CatalogLegacyVirtualizedGroups");
-function CatalogLegacy(props) {
+const CatalogClassicVirtualizedGroups_1 = require("../../components/CatalogClassic/CatalogClassicVirtualizedGroups");
+function CatalogClassic(props) {
     const { catalogConfig } = props.pageProps;
-    const { useTranslate, useCatalogLegacy } = (0, hooks_1.useThemeHooks)();
-    const { filterTerm, setFilterTerm, groups, filters } = useCatalogLegacy(catalogConfig);
+    const { useTranslate, useCatalogClassic } = (0, hooks_1.useThemeHooks)();
+    const { filterTerm, setFilterTerm, groups, filters } = useCatalogClassic(catalogConfig);
     const [filterPopoverVisible, setFilterPopoverVisible] = react_1.default.useState(false);
     const { translate } = useTranslate();
     (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
-    return (react_1.default.createElement(CatalogLegacyHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
-        react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogLegacy/CatalogLegacy", withoutFilters: !filters.length },
+    return (react_1.default.createElement(CatalogClassicHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
+        react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "CatalogClassic/CatalogClassic", withoutFilters: !filters.length },
             react_1.default.createElement(FiltersSidebar, { menu: react_1.default.createElement(FilterContent_1.FilterContent, { setFilterTerm: setFilterTerm, filters: filters, filterTerm: filterTerm, filterValuesCasing: catalogConfig.filterValuesCasing }) }),
             filterPopoverVisible && (react_1.default.createElement(FilterPopover_1.FilterPopover, { onClose: () => setFilterPopoverVisible(false), setFilterTerm: setFilterTerm, filterTerm: filterTerm, filters: filters, filterValuesCasing: catalogConfig.filterValuesCasing })),
-            react_1.default.createElement(CatalogLegacyActions_1.CatalogLegacyActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
+            react_1.default.createElement(CatalogClassicActions_1.CatalogClassicActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
             react_1.default.createElement(exports.CatalogPageContent, null,
                 react_1.default.createElement(exports.CatalogPageDescriptionWrapper, null,
                     catalogConfig.title ? (react_1.default.createElement(exports.CatalogTitle, { "data-translation-key": catalogConfig.titleTranslationKey },
@@ -38,7 +38,7 @@ function CatalogLegacy(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                react_1.default.createElement(CatalogLegacyVirtualizedGroups_1.CatalogLegacyVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
+                react_1.default.createElement(CatalogClassicVirtualizedGroups_1.CatalogClassicVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
 }
 exports.CatalogPageContent = styled_components_1.default.main `
   flex: 1;
@@ -47,23 +47,23 @@ exports.CatalogPageContent = styled_components_1.default.main `
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     width: 100%;
-    padding: var(--catalog-legacy-page-padding);
+    padding: var(--catalog-classic-page-padding);
   }
 `;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
-  color: var(--catalog-legacy-title-text-color);
-  font-weight: var(--catalog-legacy-title-font-weight);
-  font-size: var(--catalog-legacy-title-font-size);
-  margin: var(--catalog-legacy-title-margin);
+  color: var(--catalog-classic-title-text-color);
+  font-weight: var(--catalog-classic-title-font-weight);
+  font-size: var(--catalog-classic-title-font-size);
+  margin: var(--catalog-classic-title-margin);
 `;
 exports.CatalogDescription = styled_components_1.default.p `
-  color: var(--catalog-legacy-description-text-color);
-  font-weight: var(--catalog-legacy-description-font-weight);
-  font-size: var(--catalog-legacy-description-font-size);
-  margin: var(--catalog-legacy-description-margin);
+  color: var(--catalog-classic-description-text-color);
+  font-weight: var(--catalog-classic-description-font-weight);
+  font-size: var(--catalog-classic-description-font-size);
+  margin: var(--catalog-classic-description-margin);
 `;
 exports.CatalogPageWrapper = styled_components_1.default.div `
-  --sidebar-width: var(--catalog-legacy-sidebar-width, 285px);
+  --sidebar-width: var(--catalog-classic-sidebar-width, 285px);
 
   display: flex;
   flex-direction: column;
@@ -95,7 +95,7 @@ exports.CatalogPageWrapper = styled_components_1.default.div `
   }
 `;
 exports.CatalogPageDescriptionWrapper = styled_components_1.default.div `
-  margin: var(--catalog-legacy-heading-margin);
+  margin: var(--catalog-classic-heading-margin);
   display: none;
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
@@ -110,4 +110,4 @@ const FiltersSidebar = (0, styled_components_1.default)(Sidebar_1.Sidebar) `
   }
   --menu-container-padding-top: 0;
 `;
-//# sourceMappingURL=CatalogLegacy.js.map
+//# sourceMappingURL=CatalogClassic.js.map

package/lib/components/{CatalogLegacy/CatalogLegacyActions.d.ts → CatalogClassic/CatalogClassicActions.d.ts}

@@ -1,8 +1,8 @@
 import type { JSX } from 'react';
 import type { ResolvedFilter } from '../../core/types';
-export type CatalogLegacyActionsProps = {
+export type CatalogClassicActionsProps = {
     onOpenFilter: () => void;
     filters: ResolvedFilter[];
     filterTerm: string;
 };
-export declare function CatalogLegacyActions(props: CatalogLegacyActionsProps): JSX.Element;
+export declare function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.Element;

package/lib/components/{CatalogLegacy/CatalogLegacyActions.js → CatalogClassic/CatalogClassicActions.js}

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogLegacyActions = CatalogLegacyActions;
+exports.CatalogClassicActions = CatalogClassicActions;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
@@ -34,7 +34,7 @@ const hooks_1 = require("../../core/hooks");
 const Button_1 = require("../../components/Button/Button");
 const FilterIcon_1 = require("../../icons/FilterIcon/FilterIcon");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
-function CatalogLegacyActions(props) {
+function CatalogClassicActions(props) {
     const { onOpenFilter, filterTerm, filters } = props;
     let activeFilters = filterTerm.trim().length > 0 ? 1 : 0;
     for (const filter of filters) {
@@ -45,27 +45,27 @@ function CatalogLegacyActions(props) {
             activeFilters++;
         }
     }
-    const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
+    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    const telemetry = useTelemetry();
-    return (React.createElement(CatalogActionsWrapper, { "data-component-name": "CatalogLegacy/CatalogLegacyActions" },
+    const otelTelemetry = useOtelTelemetry();
+    return (React.createElement(CatalogActionsWrapper, { "data-component-name": "CatalogClassic/CatalogClassicActions" },
         React.createElement(Button_1.Button, { variant: "ghost", size: "small", icon: React.createElement(FilterIcon_1.FilterIcon, null), iconPosition: "left", onClick: () => {
                 onOpenFilter();
-                telemetry.send('catalog_actions_button_clicked', {});
+                otelTelemetry.send({ type: 'catalog_actions_button.clicked' });
             }, "data-translation-key": "catalog.filters.title" }, translate('catalog.filters.title', 'Filters')),
         activeFilters > 0 ? React.createElement(CounterTag_1.CounterTag, { borderless: true }, activeFilters) : null));
 }
 const CatalogActionsWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  gap: var(--catalog-legacy-actions-gap);
-  padding: var(--catalog-legacy-actions-padding-vertical)
-    var(--catalog-legacy-actions-padding-horizontal);
-  min-height: var(--catalog-legacy-actions-min-height);
-  background-color: var(--catalog-legacy-actions-bg-color);
+  gap: var(--catalog-classic-actions-gap);
+  padding: var(--catalog-classic-actions-padding-vertical)
+    var(--catalog-classic-actions-padding-horizontal);
+  min-height: var(--catalog-classic-actions-min-height);
+  background-color: var(--catalog-classic-actions-bg-color);
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     display: none;
   }
 `;
-//# sourceMappingURL=CatalogLegacyActions.js.map
+//# sourceMappingURL=CatalogClassicActions.js.map

package/lib/components/CatalogClassic/CatalogClassicCard.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'react';
+import type { CatalogItem } from '../../core/types';
+export type CatalogClassicCardProps = {
+    item: CatalogItem;
+};
+export declare function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Element;

package/lib/components/{CatalogLegacy/CatalogLegacyCard.js → CatalogClassic/CatalogClassicCard.js}

@@ -26,7 +26,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogLegacyCard = CatalogLegacyCard;
+exports.CatalogClassicCard = CatalogClassicCard;
 const React = __importStar(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../../core/utils");
@@ -34,26 +34,26 @@ const hooks_1 = require("../../core/hooks");
 const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
 const Link_1 = require("../../components/Link/Link");
 const Tag_1 = require("../../components/Tag/Tag");
-const CatalogLegacyHighlight_1 = require("../../components/CatalogLegacy/CatalogLegacyHighlight");
+const CatalogClassicHighlight_1 = require("../../components/CatalogClassic/CatalogClassicHighlight");
 const Button_1 = require("../../components/Button/Button");
-function CatalogLegacyCard({ item }) {
+function CatalogClassicCard({ item }) {
     var _a, _b;
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
-        React.createElement(StyledCard, { "data-component-name": "CatalogLegacy/CatalogLegacyCard", onClick: () => telemetry.send('catalog_item_clicked', {}) },
+        React.createElement(StyledCard, { "data-component-name": "CatalogClassic/CatalogClassicCard", onClick: () => otelTelemetry.send({ type: 'catalog_item.clicked' }) },
             React.createElement(CardContent, null,
                 React.createElement(CardTitleWrapper, null,
                     React.createElement(CardTitle, null,
-                        React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, null, item.title))),
+                        React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, item.title))),
                 React.createElement(CardDescription, null,
-                    React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, null, (_b = (_a = item.summary) !== null && _a !== void 0 ? _a : item.description) !== null && _b !== void 0 ? _b : ''))),
+                    React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, (_b = (_a = item.summary) !== null && _a !== void 0 ? _a : item.description) !== null && _b !== void 0 ? _b : ''))),
             React.createElement(CardFooter, null,
                 React.createElement(CardTags, null,
                     (item.tags || []).map((tag, index) => (React.createElement(CardTag, { key: tag + index, color: (0, utils_1.slug)(tag) },
-                        React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, null, (0, utils_1.capitalize)(tag))))),
+                        React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, (0, utils_1.capitalize)(tag))))),
                     (item.scorecardLevel && (React.createElement(Tag_1.Tag, { borderless: true, withStatusDot: true, statusDotColor: `var(${(0, utils_1.getScorecardColorVariable)(item.scorecardLevelIdx || 0, Object.keys(item.scorecardLevels || {}).length)})` },
-                        React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, null, item.scorecardLevel)))) ||
+                        React.createElement(CatalogClassicHighlight_1.CatalogClassicHighlight, null, item.scorecardLevel)))) ||
                         null),
                 React.createElement(SelectButton, { size: "medium", variant: "secondary", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) })))));
 }
@@ -62,20 +62,21 @@ const SelectButton = (0, styled_components_1.default)(Button_1.Button) `
   transition: all 0.2s ease-in-out;
 `;
 const StyledCard = styled_components_1.default.div `
-  min-height: var(--catalog-legacy-card-min-height);
+  min-height: var(--catalog-classic-card-min-height);
   height: 100%;
-  color: var(--catalog-legacy-card-text-color);
-  font-size: var(--catalog-legacy-card-font-size);
-  font-weight: var(--catalog-legacy-card-font-weight);
-  background-color: var(--catalog-legacy-card-bg-color);
-  border: var(--catalog-legacy-card-border-width) var(--catalog-legacy-card-border-style)
-    var(--catalog-legacy-card-border-color);
+  color: var(--catalog-classic-card-text-color);
+  font-size: var(--catalog-classic-card-font-size);
+  font-weight: var(--catalog-classic-card-font-weight);
+  background-color: var(--catalog-classic-card-bg-color);
+  border: var(--catalog-classic-card-border-width) var(--catalog-classic-card-border-style)
+    var(--catalog-classic-card-border-color);
   transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-legacy-card-border-radius);
+  border-radius: var(--catalog-classic-card-border-radius);
   cursor: pointer;
   display: flex;
-  gap: var(--catalog-legacy-card-gap);
-  padding: var(--catalog-legacy-card-padding-vertical) var(--catalog-legacy-card-padding-horizontal);
+  gap: var(--catalog-classic-card-gap);
+  padding: var(--catalog-classic-card-padding-vertical)
+    var(--catalog-classic-card-padding-horizontal);
   flex-direction: column;
 
   &:hover ${SelectButton} {
@@ -85,37 +86,37 @@ const StyledCard = styled_components_1.default.div `
 const CardTitleWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  min-height: var(--catalog-legacy-card-title-min-height);
+  min-height: var(--catalog-classic-card-title-min-height);
 `;
 const CardTitle = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-legacy-card-title-line-clamp);
+  -webkit-line-clamp: var(--catalog-classic-card-title-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 
-  color: var(--catalog-legacy-card-title-color);
-  font-size: var(--catalog-legacy-card-title-font-size);
-  font-weight: var(--catalog-legacy-card-title-font-weight);
-  line-height: var(--catalog-legacy-card-title-line-height);
+  color: var(--catalog-classic-card-title-color);
+  font-size: var(--catalog-classic-card-title-font-size);
+  font-weight: var(--catalog-classic-card-title-font-weight);
+  line-height: var(--catalog-classic-card-title-line-height);
   margin: 0;
 `;
 const CardDescription = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-legacy-card-description-line-clamp);
+  -webkit-line-clamp: var(--catalog-classic-card-description-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--catalog-legacy-card-description-color);
-  font-size: var(--catalog-legacy-card-description-font-size);
-  font-weight: var(--catalog-legacy-card-description-font-weight);
-  line-height: var(--catalog-legacy-card-description-line-height);
-  height: var(--catalog-legacy-card-description-height);
+  color: var(--catalog-classic-card-description-color);
+  font-size: var(--catalog-classic-card-description-font-size);
+  font-weight: var(--catalog-classic-card-description-font-weight);
+  line-height: var(--catalog-classic-card-description-line-height);
+  height: var(--catalog-classic-card-description-height);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;
   display: flex;
-  gap: var(--catalog-legacy-card-content-gap);
+  gap: var(--catalog-classic-card-content-gap);
   flex-direction: column;
 `;
 const CardFooter = styled_components_1.default.div `
@@ -133,6 +134,6 @@ const CardTags = styled_components_1.default.div `
 const CardTag = (0, styled_components_1.default)(Tag_1.Tag) `
   text-transform: inherit;
   margin: 0;
-  background-color: var(--catalog-legacy-card-tag-bg);
+  background-color: var(--catalog-classic-card-tag-bg);
 `;
-//# sourceMappingURL=CatalogLegacyCard.js.map
+//# sourceMappingURL=CatalogClassicCard.js.map

package/lib/components/CatalogClassic/CatalogClassicHighlight.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { JSX } from 'react';
+export declare const HighlightContext: React.Context<string[]>;
+export type CatalogClassicHighlightProps = React.PropsWithChildren;
+export declare function CatalogClassicHighlight(props: CatalogClassicHighlightProps): JSX.Element | null;

package/lib/components/{CatalogLegacy/CatalogLegacyHighlight.js → CatalogClassic/CatalogClassicHighlight.js}

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HighlightContext = void 0;
-exports.CatalogLegacyHighlight = CatalogLegacyHighlight;
+exports.CatalogClassicHighlight = CatalogClassicHighlight;
 const React = __importStar(require("react"));
 const highlight_words_core_1 = require("highlight-words-core");
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.HighlightContext = React.createContext([]);
-function CatalogLegacyHighlight(props) {
+function CatalogClassicHighlight(props) {
     const { children } = props;
     const searchWords = React.useContext(exports.HighlightContext);
     if (!searchWords.length) {
@@ -43,7 +43,7 @@ function CatalogLegacyHighlight(props) {
             searchWords,
             textToHighlight: str,
         });
-        return (React.createElement("span", { "data-component-name": "CatalogLegacy/CatalogLegacyHighlight", key: childIdx }, chunks.map((chunk, idx) => {
+        return (React.createElement("span", { "data-component-name": "CatalogClassic/CatalogClassicHighlight", key: childIdx }, chunks.map((chunk, idx) => {
             const { end, highlight, start } = chunk;
             const text = str.substr(start, end - start);
             if (highlight) {
@@ -68,4 +68,4 @@ const HighlightedText = styled_components_1.default.span `
   background-color: var(--search-highlight-bg-color);
   color: var(--search-highlight-text-color);
 `;
-//# sourceMappingURL=CatalogLegacyHighlight.js.map
+//# sourceMappingURL=CatalogClassicHighlight.js.map

package/lib/components/{CatalogLegacy/CatalogLegacyInfoBlock.d.ts → CatalogClassic/CatalogClassicInfoBlock.d.ts}

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-export type CatalogLegacyInfoBlockProps = {
+export type CatalogClassicInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;
         scoreCardSlug?: string;
@@ -8,4 +8,4 @@ export type CatalogLegacyInfoBlockProps = {
         [key: string]: unknown;
     };
 };
-export declare function CatalogLegacyInfoBlock(props: CatalogLegacyInfoBlockProps): JSX.Element;
+export declare function CatalogClassicInfoBlock(props: CatalogClassicInfoBlockProps): JSX.Element;

package/lib/components/{CatalogLegacy/CatalogLegacyInfoBlock.js → CatalogClassic/CatalogClassicInfoBlock.js}

@@ -3,25 +3,25 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogLegacyInfoBlock = CatalogLegacyInfoBlock;
+exports.CatalogClassicInfoBlock = CatalogClassicInfoBlock;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
 const utils_1 = require("../../core/utils");
 const Tag_1 = require("../../components/Tag/Tag");
 const Link_1 = require("../../components/Link/Link");
-function CatalogLegacyInfoBlock(props) {
+function CatalogClassicInfoBlock(props) {
     var _a, _b, _c, _d;
     const scorecardBadge = ((_a = props.metadata) === null || _a === void 0 ? void 0 : _a.scorecardLevel) ? (react_1.default.createElement(ScorecardBadge, { level: props.metadata.scorecardLevel, slug: (_b = props.metadata) === null || _b === void 0 ? void 0 : _b.scoreCardSlug, colorVariable: (0, utils_1.getScorecardColorVariable)(((_c = props.metadata) === null || _c === void 0 ? void 0 : _c.scorecardLevelIdx) || 0, Object.keys(((_d = props.metadata) === null || _d === void 0 ? void 0 : _d.scorecardLevels) || {}).length) })) : null;
     return (react_1.default.createElement(CatalogInfoBlockWrapper, null,
-        react_1.default.createElement(CatalogBadgesWrapper, { "data-component-name": "CatalogLegacy/CatalogLegacyInfoBlock" }, scorecardBadge)));
+        react_1.default.createElement(CatalogBadgesWrapper, { "data-component-name": "CatalogClassic/CatalogClassicInfoBlock" }, scorecardBadge)));
 }
 function ScorecardBadge(props) {
     const { level, slug, colorVariable } = props;
-    const { useTelemetry } = (0, hooks_1.useThemeHooks)();
-    const telemetry = useTelemetry();
+    const { useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
+    const otelTelemetry = useOtelTelemetry();
     return (react_1.default.createElement(Link_1.Link, { to: slug },
-        react_1.default.createElement(Tag_1.Tag, { onClick: () => telemetry.send('scorecard_link_clicked', { action: 'click' }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
+        react_1.default.createElement(Tag_1.Tag, { onClick: () => otelTelemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } }), withStatusDot: true, statusDotColor: `var(${colorVariable})` }, level)));
 }
 const CatalogInfoBlockWrapper = styled_components_1.default.div `
   position: relative;
@@ -37,11 +37,11 @@ const CatalogBadgesWrapper = styled_components_1.default.div `
   right: 0;
   margin-top: var(--panel-gap-vertical);
 
-  --badge-border-radius: var(--catalog-legacy-page-badge-border-radius);
-  --badge-padding: var(--catalog-legacy-page-badge-padding);
-  --badge-font-size: var(--catalog-legacy-page-badge-font-size);
-  --badge-line-height: var(--catalog-legacy-page-badge-line-height);
-  --badge-dot-size: var(--catalog-legacy-page-badge-dot-size);
-  --badge-dot-border-color: var(--catalog-legacy-page-badge-dot-border-color);
+  --badge-border-radius: var(--catalog-classic-page-badge-border-radius);
+  --badge-padding: var(--catalog-classic-page-badge-padding);
+  --badge-font-size: var(--catalog-classic-page-badge-font-size);
+  --badge-line-height: var(--catalog-classic-page-badge-line-height);
+  --badge-dot-size: var(--catalog-classic-page-badge-dot-size);
+  --badge-dot-border-color: var(--catalog-classic-page-badge-dot-border-color);
 `;
-//# sourceMappingURL=CatalogLegacyInfoBlock.js.map
+//# sourceMappingURL=CatalogClassicInfoBlock.js.map

package/lib/components/{CatalogLegacy/CatalogLegacyVirtualizedGroups.d.ts → CatalogClassic/CatalogClassicVirtualizedGroups.d.ts}

@@ -15,11 +15,11 @@ export type VirtualRowData = {
     items: CatalogItem[];
     key: string;
 };
-export type CatalogLegacyVirtualizedGroupsProps = {
+export type CatalogClassicVirtualizedGroupsProps = {
     groups: Group[];
     filters: (ResolvedFilter & {
         isFilterUsed?: boolean;
     })[];
     filterTerm: string;
 };
-export declare function CatalogLegacyVirtualizedGroups({ groups, filters, filterTerm, }: CatalogLegacyVirtualizedGroupsProps): React.JSX.Element;
+export declare function CatalogClassicVirtualizedGroups({ groups, filters, filterTerm, }: CatalogClassicVirtualizedGroupsProps): React.JSX.Element;