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

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

@@ -1,11 +1,11 @@
 import type { CatalogConfig } from '../../config';
-export type CatalogProps = {
+export type CatalogLegacyProps = {
     pageProps: {
         catalogId: string;
         catalogConfig: CatalogConfig;
     };
 };
-export default function Catalog(props: CatalogProps): JSX.Element;
+export default function CatalogLegacy(props: CatalogLegacyProps): 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/{Catalog/Catalog.js → CatalogLegacy/CatalogLegacy.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 = Catalog;
+exports.default = CatalogLegacy;
 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 CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
-const CatalogActions_1 = require("../../components/Catalog/CatalogActions");
+const CatalogLegacyHighlight_1 = require("../../components/CatalogLegacy/CatalogLegacyHighlight");
+const CatalogLegacyActions_1 = require("../../components/CatalogLegacy/CatalogLegacyActions");
 const Sidebar_1 = require("../../components/Sidebar/Sidebar");
-const CatalogVirtualizedGroups_1 = require("../../components/Catalog/CatalogVirtualizedGroups");
-function Catalog(props) {
+const CatalogLegacyVirtualizedGroups_1 = require("../../components/CatalogLegacy/CatalogLegacyVirtualizedGroups");
+function CatalogLegacy(props) {
     const { catalogConfig } = props.pageProps;
-    const { useTranslate, useCatalog } = (0, hooks_1.useThemeHooks)();
-    const { filterTerm, setFilterTerm, groups, filters } = useCatalog(catalogConfig);
+    const { useTranslate, useCatalogLegacy } = (0, hooks_1.useThemeHooks)();
+    const { filterTerm, setFilterTerm, groups, filters } = useCatalogLegacy(catalogConfig);
     const [filterPopoverVisible, setFilterPopoverVisible] = react_1.default.useState(false);
     const { translate } = useTranslate();
     (0, hooks_1.useModalScrollLock)(filterPopoverVisible);
-    return (react_1.default.createElement(CatalogHighlight_1.HighlightContext.Provider, { value: [filterTerm] },
-        react_1.default.createElement(exports.CatalogPageWrapper, { "data-component-name": "Catalog/Catalog", withoutFilters: !filters.length },
+    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 },
             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(CatalogActions_1.CatalogActions, { onOpenFilter: () => setFilterPopoverVisible(true), filters: filters, filterTerm: filterTerm }),
+            react_1.default.createElement(CatalogLegacyActions_1.CatalogLegacyActions, { 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 Catalog(props) {
                         ' ',
                         translate(catalogConfig.descriptionTranslationKey, catalogConfig.description),
                         ' ')) : null),
-                react_1.default.createElement(CatalogVirtualizedGroups_1.CatalogVirtualizedGroups, { groups: groups, filters: filters, filterTerm: filterTerm })))));
+                react_1.default.createElement(CatalogLegacyVirtualizedGroups_1.CatalogLegacyVirtualizedGroups, { 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-page-padding);
+    padding: var(--catalog-legacy-page-padding);
   }
 `;
 exports.CatalogTitle = (0, styled_components_1.default)(H2_1.H2) `
-  color: var(--catalog-title-text-color);
-  font-weight: var(--catalog-title-font-weight);
-  font-size: var(--catalog-title-font-size);
-  margin: var(--catalog-title-margin);
+  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);
 `;
 exports.CatalogDescription = styled_components_1.default.p `
-  color: var(--catalog-description-text-color);
-  font-weight: var(--catalog-description-font-weight);
-  font-size: var(--catalog-description-font-size);
-  margin: var(--catalog-description-margin);
+  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);
 `;
 exports.CatalogPageWrapper = styled_components_1.default.div `
-  --sidebar-width: var(--catalog-sidebar-width, 285px);
+  --sidebar-width: var(--catalog-legacy-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-heading-margin);
+  margin: var(--catalog-legacy-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=Catalog.js.map
+//# sourceMappingURL=CatalogLegacy.js.map

package/lib/components/{Catalog/CatalogActions.d.ts → CatalogLegacy/CatalogLegacyActions.d.ts}

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

package/lib/components/{Catalog/CatalogActions.js → CatalogLegacy/CatalogLegacyActions.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.CatalogActions = CatalogActions;
+exports.CatalogLegacyActions = CatalogLegacyActions;
 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 CatalogActions(props) {
+function CatalogLegacyActions(props) {
     const { onOpenFilter, filterTerm, filters } = props;
     let activeFilters = filterTerm.trim().length > 0 ? 1 : 0;
     for (const filter of filters) {
@@ -48,7 +48,7 @@ function CatalogActions(props) {
     const { useTranslate, useTelemetry } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
     const telemetry = useTelemetry();
-    return (React.createElement(CatalogActionsWrapper, { "data-component-name": "Catalog/CatalogActions" },
+    return (React.createElement(CatalogActionsWrapper, { "data-component-name": "CatalogLegacy/CatalogLegacyActions" },
         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', {});
@@ -58,13 +58,14 @@ function CatalogActions(props) {
 const CatalogActionsWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  gap: var(--catalog-actions-gap);
-  padding: var(--catalog-actions-padding-vertical) var(--catalog-actions-padding-horizontal);
-  min-height: var(--catalog-actions-min-height);
-  background-color: var(--catalog-actions-bg-color);
+  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);
 
   @media screen and (min-width: ${utils_1.breakpoints.medium}) {
     display: none;
   }
 `;
-//# sourceMappingURL=CatalogActions.js.map
+//# sourceMappingURL=CatalogLegacyActions.js.map

package/lib/components/CatalogLegacy/CatalogLegacyCard.d.ts

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

package/lib/components/{Catalog/CatalogCard.js → CatalogLegacy/CatalogLegacyCard.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.CatalogCard = CatalogCard;
+exports.CatalogLegacyCard = CatalogLegacyCard;
 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 CatalogHighlight_1 = require("../../components/Catalog/CatalogHighlight");
+const CatalogLegacyHighlight_1 = require("../../components/CatalogLegacy/CatalogLegacyHighlight");
 const Button_1 = require("../../components/Button/Button");
-function CatalogCard({ item }) {
+function CatalogLegacyCard({ item }) {
     var _a, _b;
     const { useTelemetry } = (0, hooks_1.useThemeHooks)();
     const telemetry = useTelemetry();
     return (React.createElement(Link_1.Link, { key: item.docsLink || item.link, to: item.docsLink || item.link },
-        React.createElement(StyledCard, { "data-component-name": "Catalog/CatalogCard", onClick: () => telemetry.send('catalog_item_clicked', {}) },
+        React.createElement(StyledCard, { "data-component-name": "CatalogLegacy/CatalogLegacyCard", onClick: () => telemetry.send('catalog_item_clicked', {}) },
             React.createElement(CardContent, null,
                 React.createElement(CardTitleWrapper, null,
                     React.createElement(CardTitle, null,
-                        React.createElement(CatalogHighlight_1.CatalogHighlight, null, item.title))),
+                        React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, null, item.title))),
                 React.createElement(CardDescription, null,
-                    React.createElement(CatalogHighlight_1.CatalogHighlight, null, (_b = (_a = item.summary) !== null && _a !== void 0 ? _a : item.description) !== null && _b !== void 0 ? _b : ''))),
+                    React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, 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(CatalogHighlight_1.CatalogHighlight, null, (0, utils_1.capitalize)(tag))))),
+                        React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, 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(CatalogHighlight_1.CatalogHighlight, null, item.scorecardLevel)))) ||
+                        React.createElement(CatalogLegacyHighlight_1.CatalogLegacyHighlight, null, item.scorecardLevel)))) ||
                         null),
                 React.createElement(SelectButton, { size: "medium", variant: "secondary", icon: React.createElement(ArrowRightIcon_1.ArrowRightIcon, null) })))));
 }
@@ -62,20 +62,20 @@ 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-card-min-height);
+  min-height: var(--catalog-legacy-card-min-height);
   height: 100%;
-  color: var(--catalog-card-text-color);
-  font-size: var(--catalog-card-font-size);
-  font-weight: var(--catalog-card-font-weight);
-  background-color: var(--catalog-card-bg-color);
-  border: var(--catalog-card-border-width) var(--catalog-card-border-style)
-    var(--catalog-card-border-color);
+  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);
   transition: all 0.2s ease-in-out;
-  border-radius: var(--catalog-card-border-radius);
+  border-radius: var(--catalog-legacy-card-border-radius);
   cursor: pointer;
   display: flex;
-  gap: var(--catalog-card-gap);
-  padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
+  gap: var(--catalog-legacy-card-gap);
+  padding: var(--catalog-legacy-card-padding-vertical) var(--catalog-legacy-card-padding-horizontal);
   flex-direction: column;
 
   &:hover ${SelectButton} {
@@ -85,37 +85,37 @@ const StyledCard = styled_components_1.default.div `
 const CardTitleWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  min-height: var(--catalog-card-title-min-height);
+  min-height: var(--catalog-legacy-card-title-min-height);
 `;
 const CardTitle = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-title-line-clamp);
+  -webkit-line-clamp: var(--catalog-legacy-card-title-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
 
-  color: var(--catalog-card-title-color);
-  font-size: var(--catalog-card-title-font-size);
-  font-weight: var(--catalog-card-title-font-weight);
-  line-height: var(--catalog-card-title-line-height);
+  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);
   margin: 0;
 `;
 const CardDescription = styled_components_1.default.div `
   display: -webkit-box;
-  -webkit-line-clamp: var(--catalog-card-description-line-clamp);
+  -webkit-line-clamp: var(--catalog-legacy-card-description-line-clamp);
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: var(--catalog-card-description-color);
-  font-size: var(--catalog-card-description-font-size);
-  font-weight: var(--catalog-card-description-font-weight);
-  line-height: var(--catalog-card-description-line-height);
-  height: var(--catalog-card-description-height);
+  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);
 `;
 const CardContent = styled_components_1.default.div `
   flex: 1;
   display: flex;
-  gap: var(--catalog-card-content-gap);
+  gap: var(--catalog-legacy-card-content-gap);
   flex-direction: column;
 `;
 const CardFooter = styled_components_1.default.div `
@@ -133,6 +133,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-card-tag-bg);
+  background-color: var(--catalog-legacy-card-tag-bg);
 `;
-//# sourceMappingURL=CatalogCard.js.map
+//# sourceMappingURL=CatalogLegacyCard.js.map

package/lib/components/CatalogLegacy/CatalogLegacyHighlight.d.ts

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

package/lib/components/{Catalog/CatalogHighlight.js → CatalogLegacy/CatalogLegacyHighlight.js}

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HighlightContext = void 0;
-exports.CatalogHighlight = CatalogHighlight;
+exports.CatalogLegacyHighlight = CatalogLegacyHighlight;
 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 CatalogHighlight(props) {
+function CatalogLegacyHighlight(props) {
     const { children } = props;
     const searchWords = React.useContext(exports.HighlightContext);
     if (!searchWords.length) {
@@ -43,7 +43,7 @@ function CatalogHighlight(props) {
             searchWords,
             textToHighlight: str,
         });
-        return (React.createElement("span", { "data-component-name": "Catalog/CatalogHighlight", key: childIdx }, chunks.map((chunk, idx) => {
+        return (React.createElement("span", { "data-component-name": "CatalogLegacy/CatalogLegacyHighlight", 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=CatalogHighlight.js.map
+//# sourceMappingURL=CatalogLegacyHighlight.js.map

package/lib/components/{Catalog/CatalogInfoBlock.d.ts → CatalogLegacy/CatalogLegacyInfoBlock.d.ts}

@@ -1,4 +1,4 @@
-export type CatalogInfoBlockProps = {
+export type CatalogLegacyInfoBlockProps = {
     metadata?: {
         scorecardLevel?: string;
         scoreCardSlug?: string;
@@ -7,4 +7,4 @@ export type CatalogInfoBlockProps = {
         [key: string]: unknown;
     };
 };
-export declare function CatalogInfoBlock(props: CatalogInfoBlockProps): JSX.Element;
+export declare function CatalogLegacyInfoBlock(props: CatalogLegacyInfoBlockProps): JSX.Element;

package/lib/components/{Catalog/CatalogInfoBlock.js → CatalogLegacy/CatalogLegacyInfoBlock.js}

@@ -3,18 +3,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogInfoBlock = CatalogInfoBlock;
+exports.CatalogLegacyInfoBlock = CatalogLegacyInfoBlock;
 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 CatalogInfoBlock(props) {
+function CatalogLegacyInfoBlock(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": "Catalog/CatalogInfoBlock" }, scorecardBadge)));
+        react_1.default.createElement(CatalogBadgesWrapper, { "data-component-name": "CatalogLegacy/CatalogLegacyInfoBlock" }, scorecardBadge)));
 }
 function ScorecardBadge(props) {
     const { level, slug, colorVariable } = props;
@@ -37,11 +37,11 @@ const CatalogBadgesWrapper = styled_components_1.default.div `
   right: 0;
   margin-top: var(--panel-gap-vertical);
 
-  --badge-border-radius: var(--catalog-page-badge-border-radius);
-  --badge-padding: var(--catalog-page-badge-padding);
-  --badge-font-size: var(--catalog-page-badge-font-size);
-  --badge-line-height: var(--catalog-page-badge-line-height);
-  --badge-dot-size: var(--catalog-page-badge-dot-size);
-  --badge-dot-border-color: var(--catalog-page-badge-dot-border-color);
+  --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);
 `;
-//# sourceMappingURL=CatalogInfoBlock.js.map
+//# sourceMappingURL=CatalogLegacyInfoBlock.js.map

package/lib/components/{Catalog/CatalogVirtualizedGroups.d.ts → CatalogLegacy/CatalogLegacyVirtualizedGroups.d.ts}

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

package/lib/components/{Catalog/CatalogVirtualizedGroups.js → CatalogLegacy/CatalogLegacyVirtualizedGroups.js}

@@ -26,19 +26,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CatalogVirtualizedGroups = CatalogVirtualizedGroups;
+exports.CatalogLegacyVirtualizedGroups = CatalogLegacyVirtualizedGroups;
 const react_1 = __importStar(require("react"));
 const react_virtual_1 = require("@tanstack/react-virtual");
 const styled_components_1 = __importDefault(require("styled-components"));
 const hooks_1 = require("../../core/hooks");
-const CatalogCard_1 = require("../../components/Catalog/CatalogCard");
+const CatalogLegacyCard_1 = require("../../components/CatalogLegacy/CatalogLegacyCard");
 const CounterTag_1 = require("../../components/Tags/CounterTag");
 const SpinnerLoader_1 = require("../../components/Loaders/SpinnerLoader");
 const GAP_SIZE = 32;
 const ESTIMATED_HEADER_HEIGHT = 43;
 const ESTIMATED_CARD_HEIGHT = 194 + GAP_SIZE;
-const CARD_MIN_WIDTH_VAR = '--catalog-card-min-width';
-function CatalogVirtualizedGroups({ groups, filters, filterTerm, }) {
+const CARD_MIN_WIDTH_VAR = '--catalog-legacy-card-min-width';
+function CatalogLegacyVirtualizedGroups({ groups, filters, filterTerm, }) {
     const [isClient, setIsClient] = (0, react_1.useState)(false);
     const [size, parentRef] = (0, hooks_1.useElementSize)({ delay: 50, detectSizes: 'width' });
     (0, react_1.useEffect)(() => {
@@ -107,7 +107,7 @@ function CatalogVirtualizedGroups({ groups, filters, filterTerm, }) {
         overscan: 5,
     });
     if (!isClient) {
-        return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "Catalog/CatalogVirtualizedGroups" },
+        return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "CatalogLegacy/CatalogLegacyVirtualizedGroups" },
             flatRows.slice(0, 15).map((rowData) => {
                 if (rowData.type === 'header') {
                     return (react_1.default.createElement(SSRHeaderRow, { key: rowData.key },
@@ -115,12 +115,12 @@ function CatalogVirtualizedGroups({ groups, filters, filterTerm, }) {
                         react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
                 }
                 return (react_1.default.createElement(SSRRow, { key: rowData.key }, rowData.items.map((item) => (react_1.default.createElement(CardWrapper, { key: item.link },
-                    react_1.default.createElement(CatalogCard_1.CatalogCard, { item: item }))))));
+                    react_1.default.createElement(CatalogLegacyCard_1.CatalogLegacyCard, { item: item }))))));
             }),
             react_1.default.createElement(LoadingWrapper, null,
-                react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { color: "var(--catalog-description-text-color)", size: "20px" }))));
+                react_1.default.createElement(SpinnerLoader_1.SpinnerLoader, { color: "var(--catalog-legacy-description-text-color)", size: "20px" }))));
     }
-    return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "Catalog/CatalogVirtualizedGroups" },
+    return (react_1.default.createElement("div", { ref: parentRef, "data-component-name": "CatalogLegacy/CatalogLegacyVirtualizedGroups" },
         react_1.default.createElement("div", { style: {
                 position: 'relative',
                 height: `${virtualizer.getTotalSize()}px`,
@@ -131,26 +131,26 @@ function CatalogVirtualizedGroups({ groups, filters, filterTerm, }) {
                     react_1.default.createElement(CatalogSeparatorLabel, null, rowData.groupTitle),
                     react_1.default.createElement(CounterTag_1.CounterTag, { borderless: true }, rowData.groupCount)));
             }
-            return (react_1.default.createElement(GridRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogCard_1.CatalogCard, { key: item.link, item: item })))));
+            return (react_1.default.createElement(GridRow, { key: rowData.key, ref: virtualizer.measureElement, "data-index": virtualRow.index, style: { transform: `translateY(${virtualRow.start}px)` } }, rowData.items.map((item) => (react_1.default.createElement(CatalogLegacyCard_1.CatalogLegacyCard, { key: item.link, item: item })))));
         }))));
 }
 const SSRHeaderRow = styled_components_1.default.div `
   width: 100%;
   display: flex;
   align-items: center;
-  padding: var(--catalog-separator-padding);
-  border-top: 1px solid var(--catalog-separator-border-color);
+  padding: var(--catalog-legacy-separator-padding);
+  border-top: 1px solid var(--catalog-legacy-separator-border-color);
   padding-bottom: calc(4px * 4);
-  color: var(--catalog-separator-color);
-  font-size: var(--catalog-separator-font-size);
-  font-weight: var(--catalog-separator-font-weight);
+  color: var(--catalog-legacy-separator-color);
+  font-size: var(--catalog-legacy-separator-font-size);
+  font-weight: var(--catalog-legacy-separator-font-weight);
 `;
 const SSRRow = styled_components_1.default.div `
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-  gap: var(--catalog-cards-group-gap, 32px);
-  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  gap: var(--catalog-legacy-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-legacy-cards-group-gap, 32px);
 `;
 const HeaderRow = (0, styled_components_1.default)(SSRHeaderRow) `
   position: absolute;
@@ -162,22 +162,22 @@ const GridRow = styled_components_1.default.div `
   left: 0;
   width: 100%;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-card-min-width), 1fr));
-  gap: var(--catalog-cards-group-gap, 32px);
-  padding-bottom: var(--catalog-cards-group-gap, 32px);
+  grid-template-columns: repeat(auto-fill, minmax(var(--catalog-legacy-card-min-width), 1fr));
+  gap: var(--catalog-legacy-cards-group-gap, 32px);
+  padding-bottom: var(--catalog-legacy-cards-group-gap, 32px);
   will-change: transform;
 `;
 const CardWrapper = styled_components_1.default.div `
-  flex: 1 0 var(--catalog-card-min-width);
+  flex: 1 0 var(--catalog-legacy-card-min-width);
   max-width: 100%;
-  min-width: var(--catalog-card-min-width);
+  min-width: var(--catalog-legacy-card-min-width);
 `;
 const CatalogSeparatorLabel = styled_components_1.default.div `
-  margin: var(--catalog-separator-label-margin);
+  margin: var(--catalog-legacy-separator-label-margin);
 `;
 const LoadingWrapper = styled_components_1.default.div `
   display: flex;
   justify-content: center;
   align-items: center;
 `;
-//# sourceMappingURL=CatalogVirtualizedGroups.js.map
+//# sourceMappingURL=CatalogLegacyVirtualizedGroups.js.map