@redocly/theme 0.82.2-rc.2 → 0.82.4-rc.1

package/lib/components/Typography/H1.js

@@ -13,6 +13,6 @@ exports.H1 = styled_components_1.default.h1.attrs(({ className }) => ({
   color: var(--h1-text-color);
   margin: var(--h1-margin-top) 0 var(--h1-margin-bottom);
 
-  ${(0, utils_1.typography)('h1', 'h')};
+  ${(0, utils_1.typography)('h1')};
 `;
 //# sourceMappingURL=H1.js.map

package/lib/components/Typography/H2.js

@@ -13,6 +13,6 @@ exports.H2 = styled_components_1.default.h2.attrs(({ className }) => ({
   color: var(--h2-text-color);
   margin: var(--h2-margin-top) 0 var(--h2-margin-bottom);
 
-  ${(0, utils_1.typography)('h2', 'h')};
+  ${(0, utils_1.typography)('h2')};
 `;
 //# sourceMappingURL=H2.js.map

package/lib/components/Typography/H3.js

@@ -13,6 +13,6 @@ exports.H3 = styled_components_1.default.h3.attrs(({ className }) => ({
   color: var(--h3-text-color);
   margin: var(--h3-margin-top) 0 var(--h3-margin-bottom);
 
-  ${(0, utils_1.typography)('h3', 'h')};
+  ${(0, utils_1.typography)('h3')};
 `;
 //# sourceMappingURL=H3.js.map

package/lib/components/Typography/H4.js

@@ -13,6 +13,6 @@ exports.H4 = styled_components_1.default.h4.attrs(({ className }) => ({
   color: var(--h4-text-color);
   margin: var(--h4-margin-top) 0 var(--h4-margin-bottom);
 
-  ${(0, utils_1.typography)('h4', 'h')};
+  ${(0, utils_1.typography)('h4')};
 `;
 //# sourceMappingURL=H4.js.map

package/lib/components/UserMenu/UserAvatar.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-type UserAvatarProps = {
+export type UserAvatarProps = {
     picture?: string;
     className?: string;
     height?: `var(${string})` | `${number}px`;
     width?: `var(${string})` | `${number}px`;
 };
 export declare function UserAvatar({ picture, className, height, width, }: UserAvatarProps): JSX.Element;
-export {};

package/lib/components/UserMenu/UserInfoMenuItem.d.ts

@@ -1,9 +1,8 @@
 /// <reference types="react" />
-type UserInfoMenuItemProps = {
+export type UserInfoMenuItemProps = {
     name: string;
     email?: string;
     picture?: string;
     className?: string;
 };
 export declare function UserInfoMenuItem({ name, picture, email, className, }: UserInfoMenuItemProps): JSX.Element;
-export {};

package/lib/components/UserMenu/UserMenu.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-type UserMenuProps = {
+export type UserMenuProps = {
     className?: string;
 };
 export declare function UserMenu({ className }: UserMenuProps): React.JSX.Element | null;
-export {};

package/lib/components/UserMenu/UserMenu.js

@@ -72,7 +72,6 @@ const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).att
   --dropdown-menu-padding: var(--user-menu-dropdown-padding);
   --dropdown-menu-border-radius: var(--user-menu-dropdown-border-radius);
   --dropdown-menu-box-shadow: var(--user-menu-dropdown-box-shadow);
-  --dropdown-menu-color-disabled: var(--user-menu-dropdown-color-disabled);
   --dropdown-menu-border-color: var(--user-menu-dropdown-border-color);
   --dropdown-menu-bg-color: var(--user-menu-dropdown-bg-color);
   --dropdown-menu-item-padding-horizontal: var(--user-menu-dropdown-item-padding-horizontal);
@@ -84,9 +83,13 @@ const StyledDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown).att
   --dropdown-menu-item-border-radius: var(--user-menu-dropdown-item-border-radius);
   --dropdown-menu-item-bg-color-active: var(--user-menu-dropdown-item-bg-color-active);
   --dropdown-menu-item-bg-color-hover: var(--user-menu-dropdown-item-bg-color-hover);
+  --dropdown-menu-item-bg-color-disabled: var(--user-menu-dropdown-item-bg-color-disabled);
   --dropdown-menu-item-separator-border-color: var(
     --user-menu-dropdown-item-separator-border-color
   );
   --dropdown-menu-item-color-dangerous: var(--user-menu-dropdown-item-color-dangerous);
+  --dropdown-menu-item-color-disabled: var(--user-menu-dropdown-item-color-disabled);
+  --dropdown-menu-item-color-active: var(--user-menu-dropdown-item-color-active);
+  --dropdown-menu-item-color-hover: var(--user-menu-dropdown-item-color-hover);
 `;
 //# sourceMappingURL=UserMenu.js.map

package/lib/components/UserMenu/UserMenuMobile.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-type UserMenuMobileProps = {
+export type UserMenuMobileProps = {
     className?: string;
 };
 export declare function UserMenuMobile({ className }: UserMenuMobileProps): JSX.Element | null;
-export {};

package/lib/components/UserMenu/variables.js

@@ -44,7 +44,6 @@ exports.userMenu = (0, styled_components_1.css) `
   --user-menu-dropdown-padding: var(--dropdown-menu-padding ); // @presenter Spacing
   --user-menu-dropdown-border-radius: var(--dropdown-menu-border-radius); // @presenter BorderRadius
   --user-menu-dropdown-box-shadow: var(--dropdown-menu-box-shadow); // @presenter Shadow
-  --user-menu-dropdown-color-disabled: var(--dropdown-menu-color-disabled); // @presenter Color
   --user-menu-dropdown-border-color: var(--dropdown-menu-border-color); // @presenter Color
   --user-menu-dropdown-bg-color: var(--dropdown-menu-bg-color); // @presenter Color
 
@@ -55,8 +54,12 @@ exports.userMenu = (0, styled_components_1.css) `
   --user-menu-dropdown-item-border-radius: var(--dropdown-menu-item-border-radius ); // @presenter BorderRadius
   --user-menu-dropdown-item-bg-color-active: var(--dropdown-menu-item-bg-color-active); // @presenter Color
   --user-menu-dropdown-item-bg-color-hover: var(--dropdown-menu-item-bg-color-hover); // @presenter Color
+  --user-menu-dropdown-item-bg-color-disabled: var(--dropdown-menu-item-bg-color-disabled); // @presenter Color
   --user-menu-dropdown-item-separator-border-color: var(--dropdown-menu-item-separator-border-color); // @presenter Color
   --user-menu-dropdown-item-color-dangerous: var(--dropdown-menu-item-color-dangerous);
+  --user-menu-dropdown-item-color-disabled: var(--dropdown-menu-item-color-disabled);
+  --user-menu-dropdown-item-color-active: var(--dropdown-menu-item-color-active);
+  --user-menu-dropdown-item-color-hover: var(--dropdown-menu-item-color-hover);
   --user-menu-dropdown-item-border-color-focused: var(--dropdown-menu-item-border-color-focused);
 
   // @tokens End

package/lib/components/VersionPicker/VersionPicker.d.ts

@@ -7,4 +7,4 @@ export declare function VersionPicker(props: {
     versions?: Version[];
     onChange: (v: Version) => void;
 }): React.JSX.Element | null;
-export declare const VersionPickerSelect: import("styled-components").StyledComponent<typeof Select, any, SelectProps<any>, never>;
+export declare const VersionPickerSelect: import("styled-components").StyledComponent<typeof Select, any, SelectProps, never>;

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

@@ -39,5 +39,8 @@ export type CatalogItem = {
     }>;
     scoreCardSlug?: string;
     tags?: unknown[];
+    versions?: CatalogItem[];
+    version?: string;
+    versionFolderId?: string;
     [k: string]: unknown;
 };

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ResolvedNavItemWithLink, Version } from '@redocly/config';
+import type { PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location } from 'react-router-dom';
 import type { CatalogConfig, ProductUiConfig } from '../../config';
@@ -60,6 +60,8 @@ export type ThemeHooks = {
     useTelemetry: () => {
         send(action: TelemetryEvent, data: unknown): void;
     };
+    useUserTeams: () => string[];
+    usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
 };
 export type I18nConfig = {
     currentLocale: string;

package/lib/layouts/DocumentationLayout.js

@@ -35,6 +35,13 @@ const LayoutWrapper = styled_components_1.default.div.attrs(({ className }) => (
   width: 100%;
 `;
 const ContentWrapper = styled_components_1.default.section `
+  --md-content-font-size: var(--font-size-lg);
+  --md-content-line-height: var(--line-height-lg);
+  --md-table-font-size: var(--md-content-font-size);
+  --md-table-line-height: var(--md-content-line-height);
+  --md-tabs-content-font-size: var(--md-content-font-size);
+  --md-tabs-content-line-height: var(--md-content-line-height);
+
   max-width: var(--md-content-max-width);
   width: 90%;
   margin: 0 auto;

package/lib/layouts/NotFound.js

@@ -12,14 +12,14 @@ const ArrowLeftIcon_1 = require("../icons/ArrowLeftIcon/ArrowLeftIcon");
 function NotFound() {
     const { useTranslate } = (0, hooks_1.useThemeHooks)();
     const { translate } = useTranslate();
-    return (react_1.default.createElement(Wrapper, { "data-component-name": "Pages/NotFound" },
+    return (react_1.default.createElement(NotFoundWrapper, { "data-component-name": "Pages/NotFound" },
         react_1.default.createElement(StatusText, null, "404"),
         react_1.default.createElement(Title, { "data-translation-key": "theme.page.notFound.title" }, translate('theme.page.notFound.title', 'Something went missing...')),
         react_1.default.createElement(Description, { "data-translation-key": "theme.page.notFound.description" }, translate('theme.page.notFound.description', "The page you were trying to reach doesn't exist or may have been moved. You can go back to the previous page, return to the homepage, or use the search bar to find what you're looking for.")),
         react_1.default.createElement(Button_1.Button, { variant: "primary", size: "large", to: "/", "data-translation-key": "theme.page.homeButton", icon: react_1.default.createElement(ArrowLeftIcon_1.ArrowLeftIcon, null) }, translate('theme.page.homeButton', 'Go home'))));
 }
 exports.NotFound = NotFound;
-const Wrapper = styled_components_1.default.div `
+const NotFoundWrapper = styled_components_1.default.div `
   height: 100%;
   max-width: var(--page-404-max-width);
   display: flex;

package/lib/layouts/RootLayout.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-interface LayoutConfig {
+export type LayoutConfig = {
     children: React.ReactNode;
-}
+};
 export declare function RootLayout({ children }: LayoutConfig): JSX.Element;
-export {};

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
-export declare function InlineSvg({ fileRawContent }: {
+export declare function InlineSvg({ fileRawContent, className, }: {
     fileRawContent: string;
+    className?: string;
 }): React.JSX.Element;

package/lib/markdoc/components/InlineSvg/InlineSvg.js

@@ -25,8 +25,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InlineSvg = void 0;
 const React = __importStar(require("react"));
-function InlineSvg({ fileRawContent }) {
-    return (React.createElement("span", { "data-component-name": "Markdoc/InlineSvg/InlineSvg", dangerouslySetInnerHTML: { __html: fileRawContent } }));
+function InlineSvg({ fileRawContent, className, }) {
+    return (React.createElement("span", { className: className, "data-component-name": "Markdoc/InlineSvg/InlineSvg", dangerouslySetInnerHTML: { __html: fileRawContent } }));
 }
 exports.InlineSvg = InlineSvg;
 //# sourceMappingURL=InlineSvg.js.map

package/lib/markdoc/components/Tabs/variables.js

@@ -8,8 +8,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
   */
 
   --md-tabs-container-text-color: inherit; // @presenter Color
-  --md-tabs-container-font-size: var(--font-size-base); // @presenter FontSize
-  --md-tabs-container-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-container-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-container-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-container-font-style: normal; // @presenter FontStyle
   --md-tabs-container-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-container-bg-color: inherit; // @presenter Color
@@ -22,8 +22,8 @@ exports.markdownTabs = (0, styled_components_1.css) `
   --md-tabs-padding: 0; // @presenter Spacing
 
   --md-tabs-content-text-color: inherit; // @presenter Color
-  --md-tabs-content-font-size: var(--font-size-base); // @presenter FontSize
-  --md-tabs-content-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-content-font-size: var(--md-content-font-size); // @presenter FontSize
+  --md-tabs-content-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-content-font-style: normal; // @presenter FontStyle
   --md-tabs-content-font-weight: var(--font-weight-regular); // @presenter FontWeight
   --md-tabs-content-bg-color: inherit; // @presenter Color
@@ -33,7 +33,7 @@ exports.markdownTabs = (0, styled_components_1.css) `
 
   --md-tabs-tab-text-color: var(--text-color-primary); // @presenter Color
   --md-tabs-tab-font-size: var(--font-size-lg); // @presenter FontSize
-  --md-tabs-tab-font-family: var(--font-size-base); // @presenter FontFamily
+  --md-tabs-tab-font-family: var(--md-content-font-family); // @presenter FontFamily
   --md-tabs-tab-font-style: normal; // @presenter FontStyle
   --md-tabs-tab-font-weight: var(--font-weight-bold); // @presenter FontWeight
   --md-tabs-tab-bg-color: none; // @presenter Color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.82.2-rc.2",
+  "version": "0.82.4-rc.1",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -72,7 +72,7 @@
     "json-schema-to-ts": "2.7.2",
     "lodash.throttle": "4.1.1",
     "npm-run-all2": "5.0.2",
-    "react-refresh": "0.14.0",
+    "react-refresh": "0.14.2",
     "react-router-dom": "6.21.1",
     "rimraf": "5.0.5",
     "storybook": "7.6.4",
@@ -87,7 +87,7 @@
     "tsconfig-paths": "4.2.0",
     "tsconfig-paths-webpack-plugin": "3.5.2",
     "typescript": "5.2.2",
-    "webpack": "5.88.2"
+    "webpack": "5.91.0"
   },
   "dependencies": {
     "copy-to-clipboard": "^3.3.3",
@@ -98,7 +98,7 @@
     "timeago.js": "^4.0.2",
     "i18next": "^22.4.12",
     "nprogress": "^0.2.0",
-    "@redocly/config": "0.82.2-rc.2"
+    "@redocly/config": "0.82.4-rc.1"
   },
   "scripts": {
     "start": "npm-run-all --parallel storybook storybook:tokens:watch",

package/src/components/Badge/Badge.tsx

@@ -1,8 +1,18 @@
+import React, { type PropsWithChildren } from 'react';
 import styled, { css } from 'styled-components';
 
-export const Badge = styled.span.attrs({
-  'data-component-name': 'Badge/Badge',
-})<{ deprecated?: boolean }>`
+export type BadgeProps = PropsWithChildren<{
+  deprecated?: boolean;
+  color?: string;
+  key?: string;
+  className?: string;
+}>;
+
+export function Badge(props: BadgeProps): JSX.Element {
+  return <BadgeComponent {...props} data-component-name="Badge/Badge" />;
+}
+
+const BadgeComponent = styled.span<BadgeProps>`
   display: inline-block;
   padding: 0 var(--spacing-xs);
   vertical-align: middle;

package/src/components/Breadcrumbs/Breadcrumb.tsx

@@ -10,7 +10,7 @@ type BreadcrumbProps = {
   onClick?: () => void;
 };
 
-export const Breadcrumb = ({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element => {
+export function Breadcrumb({ label, link, isActive, onClick }: BreadcrumbProps): JSX.Element {
   return (
     <BreadcrumbWrapper
       data-component-name="Breadcrumbs/Breadcrumb"
@@ -25,7 +25,7 @@ export const Breadcrumb = ({ label, link, isActive, onClick }: BreadcrumbProps):
       )}
     </BreadcrumbWrapper>
   );
-};
+}
 
 const BreadcrumbText = styled.div`
   cursor: default;

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Breadcrumb } from '@redocly/theme/components/Breadcrumbs/Breadcrumb';
 
-export const Breadcrumbs = (props: { className?: string }) => {
+export function Breadcrumbs(props: { className?: string }): JSX.Element | null {
   const { useBreadcrumbs, useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
   const breadcrumbs = useBreadcrumbs();
@@ -37,7 +37,7 @@ export const Breadcrumbs = (props: { className?: string }) => {
       })}
     </BreadcrumbsWrapper>
   );
-};
+}
 
 const BreadcrumbsWrapper = styled.div`
   display: flex;

package/src/components/Button/Button.tsx

@@ -191,7 +191,11 @@ const ButtonComponent: React.FC<ButtonProps> = (props) => {
   );
 
   if (props.to) {
-    return <StyledButtonLink to={props.to}>{button}</StyledButtonLink>;
+    return (
+      <StyledButtonLink to={props.to} onClick={props.onClick}>
+        {button}
+      </StyledButtonLink>
+    );
   } else {
     return button;
   }

package/src/components/Buttons/CopyButton.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
-type CopyButtonProps = {
+export type CopyButtonProps = {
   data: unknown;
   type?: ControlItemType;
   toasterPlacement?: TooltipProps['placement'];
@@ -19,9 +19,10 @@ type CopyButtonProps = {
   onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
   dataTestId?: string;
   className?: string;
+  variant?: string;
 };
 
-const CopyButtonComponent = ({
+function CopyButtonComponent({
   data,
   type = 'icon',
   toasterPlacement = 'top',
@@ -31,7 +32,8 @@ const CopyButtonComponent = ({
   onCopyClick,
   dataTestId = 'copy-button',
   className,
-}: CopyButtonProps): JSX.Element => {
+  variant = 'text',
+}: CopyButtonProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
   const { translate } = useTranslate();
@@ -64,12 +66,12 @@ const CopyButtonComponent = ({
         data-testid={dataTestId}
         icon={type === 'icon' ? <CopyIcon /> : undefined}
         size="small"
-        variant="text"
+        variant={variant}
       >
         {type !== 'icon' && translate('theme.codeSnippet.copy.toasterText', buttonText || 'Copy')}
       </Button>
     </Tooltip>
   );
-};
+}
 
 export const CopyButton = memo<CopyButtonProps>(CopyButtonComponent);

package/src/components/Buttons/EditPageButton.tsx

@@ -5,11 +5,11 @@ import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { EditIcon } from '@redocly/theme/icons/EditIcon/EditIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-type EditPageButtonProps = {
+export type EditPageButtonProps = {
   to: string;
 };
 
-export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
+export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
   const { useTranslate, useTelemetry } = useThemeHooks();
   const { translate } = useTranslate();
   const telemetry = useTelemetry();
@@ -26,7 +26,7 @@ export const EditPageButton = ({ to }: EditPageButtonProps): JSX.Element => {
       </ButtonText>
     </EditPageButtonWrapper>
   );
-};
+}
 
 const EditPageButtonWrapper = styled(Link)`
   height: fit-content;

package/src/components/Buttons/EmailButton.tsx

@@ -3,12 +3,12 @@ import React from 'react';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
 
-interface EmailButtonProps {
+export type EmailButtonProps = {
   data: string;
   dataTestId?: string;
-}
+};
 
-export const EmailButton = ({ data, dataTestId = 'email-button' }: EmailButtonProps) => {
+export function EmailButton({ data, dataTestId = 'email-button' }: EmailButtonProps): JSX.Element {
   const onClick = () => {
     window.location.href = `mailto:${data}`;
   };
@@ -25,4 +25,4 @@ export const EmailButton = ({ data, dataTestId = 'email-button' }: EmailButtonPr
       />
     </div>
   );
-};
+}

package/src/components/Buttons/NewTabButton.tsx

@@ -3,12 +3,15 @@ import React from 'react';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ArrowUpRightIcon } from '@redocly/theme/icons/ArrowUpRightIcon/ArrowUpRightIcon';
 
-interface NewTabButtonProps {
+export type NewTabButtonProps = {
   data: string;
   dataTestId?: string;
-}
+};
 
-export const NewTabButton = ({ data, dataTestId = 'new-tab-button' }: NewTabButtonProps) => {
+export function NewTabButton({
+  data,
+  dataTestId = 'new-tab-button',
+}: NewTabButtonProps): JSX.Element {
   const onClick = () => {
     window.open(data, '_blank');
   };
@@ -25,4 +28,4 @@ export const NewTabButton = ({ data, dataTestId = 'new-tab-button' }: NewTabButt
       />
     </div>
   );
-};
+}

package/src/components/Catalog/Catalog.tsx

@@ -12,15 +12,16 @@ import { FilterPopover } from '@redocly/theme/components/Filter/FilterPopover';
 import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { CatalogActions } from '@redocly/theme/components/Catalog/CatalogActions';
 import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { MenuContainer } from '@redocly/theme/components/Menu/MenuContainer';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 
-export default function Catalog(props: {
+export type CatalogProps = {
   pageProps: {
     catalogId: string;
     catalogConfig: CatalogConfig;
   };
-}): JSX.Element {
+};
+
+export default function Catalog(props: CatalogProps): JSX.Element {
   const { catalogConfig } = props.pageProps;
   const { useTranslate, useCatalog } = useThemeHooks();
 
@@ -184,8 +185,5 @@ const FiltersSidebar = styled(Sidebar)`
   @media screen and (min-width: ${breakpoints.medium}) {
     display: flex;
   }
-
-  ${MenuContainer} {
-    padding: 0;
-  }
+  --menu-container-padding-top: 0;
 `;

package/src/components/Catalog/CatalogActions.tsx

@@ -9,7 +9,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';
 import { CounterTag } from '@redocly/theme/components/Tags/CounterTag';
 
-type CatalogActionsProps = {
+export type CatalogActionsProps = {
   onOpenFilter: () => void;
   filters: ResolvedFilter[];
   filterTerm: string;

package/src/components/Catalog/CatalogCard.tsx

@@ -11,12 +11,13 @@ import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { Button } from '@redocly/theme/components/Button/Button';
 
-type CatalogCardProps = { item: CatalogItem };
+export type CatalogCardProps = {
+  item: CatalogItem;
+};
 
 export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
   const { useTelemetry } = useThemeHooks();
   const telemetry = useTelemetry();
-  const hasTags = item.scorecardLevel || item.tags?.length;
   return (
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
@@ -34,28 +35,26 @@ export function CatalogCard({ item }: CatalogCardProps): JSX.Element {
           </CardDescription>
         </CardContent>
         <CardFooter>
-          {hasTags && (
-            <CardTags>
-              {((item.tags as string[]) || []).map((tag, index) => (
-                <CardTag key={tag + index} color={slug(tag)}>
-                  <CatalogHighlight>{capitalize(tag)}</CatalogHighlight>
-                </CardTag>
-              ))}
-              {(item.scorecardLevel && (
-                <Tag
-                  borderless
-                  withStatusDot
-                  statusDotColor={`var(${getScorecardColorVariable(
-                    item.scorecardLevelIdx || 0,
-                    Object.keys(item.scorecardLevels || {}).length,
-                  )})`}
-                >
-                  <CatalogHighlight>{item.scorecardLevel}</CatalogHighlight>
-                </Tag>
-              )) ||
-                null}
-            </CardTags>
-          )}
+          <CardTags>
+            {((item.tags as string[]) || []).map((tag, index) => (
+              <CardTag key={tag + index} color={slug(tag)}>
+                <CatalogHighlight>{capitalize(tag)}</CatalogHighlight>
+              </CardTag>
+            ))}
+            {(item.scorecardLevel && (
+              <Tag
+                borderless
+                withStatusDot
+                statusDotColor={`var(${getScorecardColorVariable(
+                  item.scorecardLevelIdx || 0,
+                  Object.keys(item.scorecardLevels || {}).length,
+                )})`}
+              >
+                <CatalogHighlight>{item.scorecardLevel}</CatalogHighlight>
+              </Tag>
+            )) ||
+              null}
+          </CardTags>
           <SelectButton size="medium" variant="secondary" icon={<ArrowRightIcon />} />
         </CardFooter>
       </StyledCard>

package/src/components/Catalog/CatalogHighlight.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 export const HighlightContext = React.createContext<string[]>([]);
 
-type CatalogHighlightProps = React.PropsWithChildren;
+export type CatalogHighlightProps = React.PropsWithChildren;
 
 export function CatalogHighlight(props: CatalogHighlightProps): JSX.Element | null {
   const { children } = props;

package/src/components/Catalog/CatalogInfoBlock.tsx

@@ -6,7 +6,7 @@ import { getScorecardColorVariable } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { Link } from '@redocly/theme/components/Link/Link';
 
-type CatalogInfoBlockProps = {
+export type CatalogInfoBlockProps = {
   metadata?: {
     scorecardLevel?: string;
     scoreCardSlug?: string;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -69,7 +69,7 @@ export function CodeBlock({
     (source || externalSource?.sample?.get?.(externalSource)) ?? '',
   );
 
-  const highlightedCode = highlightedHtml || children ? null : highlight(sourceCode, lang);
+  const highlightedCode = highlightedHtml || (children ? null : highlight(sourceCode, lang));
 
   // The same initial value should be returned for ssr and frontend to avoid issues
   // Because we don't have session storage in ssr and can't get the security details there