@redocly/theme 0.67.0-next.0 → 0.67.0-next.1

package/src/components/Catalog/CatalogAvatar.tsx

@@ -1,6 +1,8 @@
 import styled, { css } from 'styled-components';
 import React from 'react';
 
+type CatalogAvatarSize = 'small' | 'medium' | 'large';
+
 const extractInitials = (value: string): string => {
   const trimmed = value.trim();
   if (!trimmed) return '';
@@ -23,21 +25,15 @@ const extractInitials = (value: string): string => {
   return initials[0] + initials[initials.length - 1];
 };
 
-export function CatalogAvatar({
-  value,
-  size,
-}: {
-  value: string;
-  size: 'small' | 'medium' | 'large';
-}) {
+export function CatalogAvatar({ value, size }: { value: string; size: CatalogAvatarSize }) {
   return (
-    <CatalogAvatarWrapper data-component-name="Catalog/CatalogAvatar" size={size}>
+    <CatalogAvatarWrapper data-component-name="Catalog/CatalogAvatar" $size={size}>
       {extractInitials(value)}
     </CatalogAvatarWrapper>
   );
 }
 
-const CatalogAvatarWrapper = styled.div<{ size: 'small' | 'medium' | 'large' }>`
+const CatalogAvatarWrapper = styled.div<{ $size: CatalogAvatarSize }>`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -46,7 +42,7 @@ const CatalogAvatarWrapper = styled.div<{ size: 'small' | 'medium' | 'large' }>`
   flex-shrink: 0;
   font-weight: var(--catalog-avatar-font-weight);
   line-height: var(--catalog-avatar-line-height);
-  ${({ size }) => SIZES[size]};
+  ${({ $size }) => SIZES[$size]};
 `;
 
 const SIZES = {

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

@@ -39,7 +39,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
           <HeaderIconWrapper>
             <CatalogEntityIcon entityType={entity.type} />
           </HeaderIconWrapper>
-          <HeaderIconText entityType={entity.type}>{entity.type}</HeaderIconText>
+          <HeaderIconText $entityType={entity.type}>{entity.type}</HeaderIconText>
         </CardHeader>
 
         <CardDescription>
@@ -91,7 +91,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
       <Divider />
 
-      <CardFooter hasTags={!!entity.tags?.length}>
+      <CardFooter $hasTags={!!entity.tags?.length}>
         <CatalogTags
           items={entity.tags || []}
           tagProps={{
@@ -128,8 +128,8 @@ const HeaderIconWrapper = styled.div`
   margin-right: var(--catalog-card-icon-margin-right);
 `;
 
-const HeaderIconText = styled.div<{ entityType: string }>`
-  color: ${({ entityType }) => `var(--catalog-entity-icon-color-${entityType})`};
+const HeaderIconText = styled.div<{ $entityType: string }>`
+  color: ${({ $entityType }) => `var(--catalog-entity-icon-color-${$entityType})`};
 `;
 
 const CardHeader = styled.div`
@@ -180,11 +180,11 @@ const CardContent = styled.div`
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 
-const CardFooter = styled.div<{ hasTags: boolean }>`
+const CardFooter = styled.div<{ $hasTags: boolean }>`
   height: var(--catalog-card-footer-height);
   display: flex;
   align-items: center;
-  justify-content: ${({ hasTags }) => (hasTags ? 'space-between' : 'flex-end')};
+  justify-content: ${({ $hasTags }) => ($hasTags ? 'space-between' : 'flex-end')};
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
 `;
 

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

@@ -19,10 +19,10 @@ export function CatalogEntityRelationsNodeContent({
 
   return (
     <CatalogEntityRelationsNodeContentWrapper
-      isRoot={isRoot}
+      $isRoot={isRoot}
       data-component-name="Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNodeContent"
     >
-      <CatalogEntityRelationsNodeTypeRow isRoot={isRoot}>
+      <CatalogEntityRelationsNodeTypeRow $isRoot={isRoot}>
         {isRoot ? (
           <CatalogEntityIcon
             entityType={entityType}
@@ -33,36 +33,36 @@ export function CatalogEntityRelationsNodeContent({
         )}
         <span>{formattedEntityType}</span>
       </CatalogEntityRelationsNodeTypeRow>
-      <CatalogEntityRelationsNodeLabelRow isRoot={isRoot}>
+      <CatalogEntityRelationsNodeLabelRow $isRoot={isRoot}>
         {label}
       </CatalogEntityRelationsNodeLabelRow>
     </CatalogEntityRelationsNodeContentWrapper>
   );
 }
 
-const CatalogEntityRelationsNodeTypeRow = styled.div<{ isRoot: boolean }>`
+const CatalogEntityRelationsNodeTypeRow = styled.div<{ $isRoot: boolean }>`
   display: flex;
   align-items: center;
   gap: var(--catalog-entity-relations-node-gap);
   line-height: var(--line-height-sm);
   font-size: var(--font-size-sm);
-  color: ${({ isRoot }) =>
-    isRoot
+  color: ${({ $isRoot }) =>
+    $isRoot
       ? 'var(--catalog-entity-relations-node-root-text-color)'
       : 'var(--text-color-description)'};
 `;
 
-const CatalogEntityRelationsNodeLabelRow = styled.div<{ isRoot: boolean }>`
+const CatalogEntityRelationsNodeLabelRow = styled.div<{ $isRoot: boolean }>`
   display: flex;
   align-items: center;
   gap: var(--catalog-entity-relations-node-gap);
   line-height: var(--line-height-lg);
   font-size: var(--font-size-lg);
-  color: ${({ isRoot }) =>
-    isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
+  color: ${({ $isRoot }) =>
+    $isRoot ? 'var(--catalog-entity-relations-node-root-text-color)' : 'var(--text-color-primary)'};
 `;
 
-const CatalogEntityRelationsNodeContentWrapper = styled.div<{ isRoot: boolean }>`
+const CatalogEntityRelationsNodeContentWrapper = styled.div<{ $isRoot: boolean }>`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -71,12 +71,12 @@ const CatalogEntityRelationsNodeContentWrapper = styled.div<{ isRoot: boolean }>
   border-radius: var(--catalog-entity-relations-node-border-radius);
   font-style: normal;
   font-weight: var(--catalog-entity-relations-node-font-weight);
-  background: ${({ isRoot }) =>
-    isRoot
+  background: ${({ $isRoot }) =>
+    $isRoot
       ? 'var(--catalog-entity-relations-node-root-bg-color)'
       : 'var(--catalog-entity-relations-node-bg-color)'};
-  border: ${({ isRoot }) =>
-    isRoot
+  border: ${({ $isRoot }) =>
+    $isRoot
       ? 'none'
       : `var(--catalog-entity-relations-node-border-width) var(--catalog-entity-relations-node-border-style) var(--catalog-entity-relations-node-border-color)`};
 `;

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

@@ -19,15 +19,15 @@ export function CatalogEntityInfoBar({
   return (
     <InfoBarWrapper
       data-component-name="Catalog/CatalogEntity/CatalogEntityInfoBar"
-      hoverEffect={hoverEffect}
+      $hoverEffect={hoverEffect}
     >
-      <LeftColumn withSeparator={withSeparator}>{leftContent}</LeftColumn>
-      {rightContent && <RightColumn isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
+      <LeftColumn $withSeparator={withSeparator}>{leftContent}</LeftColumn>
+      {rightContent && <RightColumn $isCodeBlock={isCodeBlock}>{rightContent}</RightColumn>}
     </InfoBarWrapper>
   );
 }
 
-const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
+const InfoBarWrapper = styled.div<{ $hoverEffect: boolean }>`
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas: 'left right';
@@ -43,8 +43,8 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   padding: var(--catalog-card-gap);
   margin-bottom: var(--spacing-xs);
 
-  ${({ hoverEffect }) =>
-    hoverEffect &&
+  ${({ $hoverEffect }) =>
+    $hoverEffect &&
     `
     &:hover {
       border-color: var(--catalog-card-border-color-hover);
@@ -53,25 +53,25 @@ const InfoBarWrapper = styled.div<{ hoverEffect: boolean }>`
   `}
 `;
 
-const LeftColumn = styled.div<{ withSeparator?: boolean }>`
+const LeftColumn = styled.div<{ $withSeparator: boolean }>`
   font-weight: var(--font-weight-medium);
   color: var(--catalog-metadata-label-color);
   width: 100%;
   grid-area: left;
   justify-self: start;
   text-align: left;
-  border-right: ${({ withSeparator }) =>
-    withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
+  border-right: ${({ $withSeparator }) =>
+    $withSeparator ? '1px solid var(--border-color-primary)' : 'none'};
   height: 100%;
   display: flex;
   align-items: center;
 `;
 
-const RightColumn = styled.div<{ isCodeBlock?: boolean }>`
+const RightColumn = styled.div<{ $isCodeBlock: boolean }>`
   color: var(--catalog-metadata-value-color);
   font-weight: var(--font-weight-medium);
   grid-area: right;
   justify-self: end;
   text-align: right;
-  width: ${({ isCodeBlock }) => (isCodeBlock ? '100%' : 'auto')};
+  width: ${({ $isCodeBlock }) => ($isCodeBlock ? '100%' : 'auto')};
 `;

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

@@ -18,7 +18,7 @@ export function CatalogEntityPropertyCard({
     <CatalogEntityPropertyWrapper
       data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard"
       onClick={onClick}
-      hoverEffect={hoverEffect}
+      $hoverEffect={hoverEffect}
     >
       <CardHeader>{header}</CardHeader>
       <CardContent>{content}</CardContent>
@@ -26,7 +26,7 @@ export function CatalogEntityPropertyCard({
   );
 }
 
-const CatalogEntityPropertyWrapper = styled.div<{ hoverEffect: boolean }>`
+const CatalogEntityPropertyWrapper = styled.div<{ $hoverEffect: boolean }>`
   display: flex;
   flex-direction: column;
   color: var(--catalog-card-text-color);
@@ -39,8 +39,8 @@ const CatalogEntityPropertyWrapper = styled.div<{ hoverEffect: boolean }>`
   padding: var(--catalog-card-padding-vertical) var(--catalog-card-padding-horizontal);
   gap: var(--catalog-card-content-gap-vertical);
 
-  ${({ hoverEffect }) =>
-    hoverEffect &&
+  ${({ $hoverEffect }) =>
+    $hoverEffect &&
     `
     &:hover {
       border-color: var(--catalog-card-border-color-hover);

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

@@ -1,10 +1,11 @@
-import React, { JSX, ReactNode } from 'react';
+import React, { JSX } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import { TabItemFragment } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
 import { CatalogEntityDefaultRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityDefaultRelations';
 import { MoleculesIcon } from '@redocly/theme/icons/MoleculesIcon/MoleculesIcon';
@@ -48,7 +49,7 @@ export function CatalogEntityApiDescriptionRelations({
   return (
     <TabsWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
       <Tabs key={entity.id} size={TabsSize.MEDIUM}>
-        <TabItem
+        <TabItemFragment
           label="Operations"
           icon={<MoleculesIcon />}
           onClick={() => setFilter('type:api-operation')}
@@ -70,8 +71,8 @@ export function CatalogEntityApiDescriptionRelations({
             shouldShowHeading={false}
             listType="api-operation"
           />
-        </TabItem>
-        <TabItem
+        </TabItemFragment>
+        <TabItemFragment
           label="Schemas"
           icon={<NetworkIcon />}
           onClick={() => setFilter('type:data-schema')}
@@ -93,8 +94,8 @@ export function CatalogEntityApiDescriptionRelations({
             shouldShowHeading={false}
             listType="data-schema"
           />
-        </TabItem>
-        <TabItem
+        </TabItemFragment>
+        <TabItemFragment
           label="Related entities"
           icon={<EntityTypeIcon />}
           onClick={() => setFilter('-type:api-operation,data-schema')}
@@ -115,16 +116,12 @@ export function CatalogEntityApiDescriptionRelations({
             shouldShowLoadMore={shouldShowLoadMore}
             shouldShowHeading={false}
           />
-        </TabItem>
+        </TabItemFragment>
       </Tabs>
     </TabsWrapper>
   );
 }
 
-const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
-  padding: var(--spacing-sm);
-`;
-
 const TabsWrapper = styled.div`
   --md-tabs-container-margin: none;
 `;

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

@@ -1,10 +1,11 @@
-import React, { JSX, ReactNode } from 'react';
+import React, { JSX } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { Tabs, TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import { TabItemFragment } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
 import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
@@ -86,7 +87,11 @@ export function CatalogEntityTeamRelations({
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
       <Tabs size={TabsSize.MEDIUM}>
-        <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
+        <TabItemFragment
+          label="Members"
+          icon={<PeopleIcon />}
+          onClick={() => setFilter('type:user')}
+        >
           <CatalogEntityRelationsTable
             key="members-table"
             entity={entity}
@@ -104,8 +109,8 @@ export function CatalogEntityTeamRelations({
             shouldShowLoadMore={shouldShowLoadMore}
             listType="team"
           />
-        </TabItem>
-        <TabItem
+        </TabItemFragment>
+        <TabItemFragment
           label="Related entities"
           icon={<EntityTypeIcon />}
           onClick={() => setFilter('-type:user')}
@@ -126,16 +131,12 @@ export function CatalogEntityTeamRelations({
             shouldShowLoadMore={shouldShowLoadMore}
             shouldShowHeading={false}
           />
-        </TabItem>
+        </TabItemFragment>
       </Tabs>
     </div>
   );
 }
 
-const TabItem = styled.div<{ label: string; icon?: ReactNode }>`
-  padding: var(--spacing-sm);
-`;
-
 const EntityDescription = styled.div`
   font-size: var(--catalog-table-entity-summary-font-size);
   line-height: var(--catalog-table-entity-summary-line-height);

package/src/components/Catalog/CatalogEntityTypeIcon.tsx

@@ -18,9 +18,9 @@ export function CatalogEntityTypeIcon({
   return (
     <IconContainer
       data-component-name="Catalog/CatalogEntityTypeIcon"
-      entityType={entityType}
-      defaultColors={defaultColors}
-      size={size}
+      $entityType={entityType}
+      $defaultColors={defaultColors}
+      $size={size}
     >
       <CatalogEntityIcon entityType={entityType} defaultColor={false} />
     </IconContainer>
@@ -28,33 +28,39 @@ export function CatalogEntityTypeIcon({
 }
 
 const IconContainer = styled.div<{
-  entityType: string;
-  defaultColors: boolean;
-  size: 'large' | 'medium';
+  $entityType: string;
+  $defaultColors: boolean;
+  $size: 'large' | 'medium';
 }>`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-width-large)' : 'var(--catalog-table-icon-width-medium)')};
-  height: ${({ size }) => (size === 'large' ? 'var(--catalog-table-icon-height-large)' : 'var(--catalog-table-icon-height-medium)')};
+  width: ${({ $size }) =>
+    $size === 'large'
+      ? 'var(--catalog-table-icon-width-large)'
+      : 'var(--catalog-table-icon-width-medium)'};
+  height: ${({ $size }) =>
+    $size === 'large'
+      ? 'var(--catalog-table-icon-height-large)'
+      : 'var(--catalog-table-icon-height-medium)'};
   border-radius: var(--catalog-table-icon-border-radius);
-  background-color: ${({ defaultColors, entityType }) => {
-    if (defaultColors) {
+  background-color: ${({ $defaultColors, $entityType }) => {
+    if ($defaultColors) {
       return 'var(--catalog-entity-bg-color)';
     }
-    if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
-      return `var(--catalog-entity-bg-color-${entityType})`;
+    if (PREDEFINED_ENTITY_TYPES.includes($entityType)) {
+      return `var(--catalog-entity-bg-color-${$entityType})`;
     }
     return 'var(--catalog-entity-bg-color-custom)';
   }};
   flex-shrink: 0;
   border: 1px solid
-    ${({ defaultColors, entityType }) => {
-      if (defaultColors) {
+    ${({ $defaultColors, $entityType }) => {
+      if ($defaultColors) {
         return 'var(--catalog-entity-border-color)';
       }
-      if (PREDEFINED_ENTITY_TYPES.includes(entityType)) {
-        return `var(--catalog-entity-border-color-${entityType})`;
+      if (PREDEFINED_ENTITY_TYPES.includes($entityType)) {
+        return `var(--catalog-entity-border-color-${$entityType})`;
       }
       return 'var(--catalog-entity-border-color-custom)';
     }};

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -33,7 +33,7 @@ export const getEntityTagColor = (type: EntityType): string => {
 export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps): JSX.Element {
   return (
     <EntityTypeTagWrapper
-      entityType={entityType as EntityType}
+      $entityType={entityType as EntityType}
       data-component-name="Catalog/CatalogEntityTypeTag"
     >
       <CatalogHighlight>{entityType}</CatalogHighlight>
@@ -41,17 +41,17 @@ export function CatalogEntityTypeTag({ entityType }: CatalogEntityTypeTagProps):
   );
 }
 
-const EntityTypeTagWrapper = styled(Tag)<{ entityType: EntityType }>`
+const EntityTypeTagWrapper = styled(Tag)<{ $entityType: EntityType }>`
   font-size: var(--font-size-base);
   background-color: transparent;
   text-transform: none;
   border: 1px solid
-    ${({ entityType }) =>
-      !PREDEFINED_ENTITY_TYPES.includes(entityType)
+    ${({ $entityType }) =>
+      !PREDEFINED_ENTITY_TYPES.includes($entityType)
         ? 'var(--catalog-entity-border-color-custom)'
-        : `var(--catalog-entity-border-color-${entityType})`};
-  color: ${({ entityType }) =>
-    !PREDEFINED_ENTITY_TYPES.includes(entityType)
+        : `var(--catalog-entity-border-color-${$entityType})`};
+  color: ${({ $entityType }) =>
+    !PREDEFINED_ENTITY_TYPES.includes($entityType)
       ? 'var(--catalog-entity-icon-color-custom)'
-      : `var(--catalog-entity-icon-color-${entityType})`};
+      : `var(--catalog-entity-icon-color-${$entityType})`};
 `;

package/src/components/Catalog/CatalogTableView/CatalogTableView.tsx

@@ -115,8 +115,8 @@ export const CatalogTableView = <T extends BaseEntity>({
   const tableContent = (
     <>
       <CatalogTableHeader
-        columnsWidths={columns.map((column) => column.width || '1fr')}
-        columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
+        $columnsWidths={columns.map((column) => column.width || '1fr')}
+        $columnsMinWidths={columns.map((column) => column.minWidth || 'auto')}
       >
         {columns.map((column) => (
           <CatalogTableHeaderCell<T>
@@ -174,12 +174,14 @@ const CatalogTableContentInner = styled.div<{ $contentMinWidth: number }>`
   min-width: ${({ $contentMinWidth }) => $contentMinWidth}px;
 `;
 
-const CatalogTableHeader = styled.div<{ columnsWidths: string[]; columnsMinWidths: string[] }>`
+const CatalogTableHeader = styled.div<{ $columnsWidths: string[]; $columnsMinWidths: string[] }>`
   display: grid;
-  grid-template-columns: ${({ columnsWidths, columnsMinWidths }) =>
-    columnsWidths
+  grid-template-columns: ${({ $columnsWidths, $columnsMinWidths }) =>
+    $columnsWidths
       .map((width, index) =>
-        columnsMinWidths[index] !== 'auto' ? `minmax(${columnsMinWidths[index]}, ${width})` : width,
+        $columnsMinWidths[index] !== 'auto'
+          ? `minmax(${$columnsMinWidths[index]}, ${width})`
+          : width,
       )
       .join(' ')};
   background: var(--catalog-table-header-bg-color);

package/src/components/CatalogClassic/CatalogClassic.tsx

@@ -124,7 +124,9 @@ export const CatalogDescription = styled.p`
   margin: var(--catalog-classic-description-margin);
 `;
 
-export const CatalogPageWrapper = styled.div<{ withoutFilters?: boolean }>`
+export const CatalogPageWrapper = styled.div.withConfig({
+  shouldForwardProp: (prop) => prop !== 'withoutFilters',
+})<{ withoutFilters?: boolean; className?: string }>`
   --sidebar-width: var(--catalog-classic-sidebar-width, 285px);
 
   display: flex;

package/src/components/CodeBlock/CodeBlockContainer.tsx

@@ -20,12 +20,28 @@ export type CodeBlockContainerProps = PropsWithChildren<{
 }>;
 
 export function CodeBlockContainer(props: CodeBlockContainerProps): JSX.Element {
+  const { hideCodeColors, wrapContents, maxHeight, ...rest } = props;
   return (
-    <CodeBlockContainerComponent {...props} data-component-name="CodeBlock/CodeBlockContainer" />
+    <CodeBlockContainerComponent
+      {...rest}
+      $hideCodeColors={hideCodeColors}
+      $wrapContents={wrapContents}
+      $maxHeight={maxHeight}
+      data-component-name="CodeBlock/CodeBlockContainer"
+    />
   );
 }
 
-const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
+const CodeBlockContainerComponent = styled.pre<{
+  $hideCodeColors?: boolean;
+  $wrapContents?: boolean;
+  $maxHeight?: string;
+  className?: string;
+  withLineNumbers?: boolean;
+  dangerouslySetInnerHTML?: CodeBlockContainerProps['dangerouslySetInnerHTML'];
+  suppressHydrationWarning?: boolean;
+  tabIndex?: number;
+}>`
   && {
     overflow-x: auto;
     font-family: var(--code-block-font-family);
@@ -35,9 +51,9 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
     margin: var(--code-block-margin);
     color: var(--code-block-text-color);
     font-size: var(--code-block-font-size);
-    white-space: ${({ wrapContents }) => (wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
-    max-height: ${({ maxHeight }) =>
-      maxHeight ? maxHeight : 'var(--code-block-max-height, 600px);'};
+    white-space: ${({ $wrapContents }) => ($wrapContents ? 'pre-wrap' : 'var(--code-wrap, pre)')};
+    max-height: ${({ $maxHeight }) =>
+      $maxHeight ? $maxHeight : 'var(--code-block-max-height, 600px);'};
     word-break: var(--code-block-word-break, initial);
 
     pre,
@@ -321,8 +337,8 @@ const CodeBlockContainerComponent = styled.pre<CodeBlockContainerProps>`
 
   ${generateCodeBlockTokens()}
 
-  ${({ hideCodeColors }) =>
-    hideCodeColors &&
+  ${({ $hideCodeColors }) =>
+    $hideCodeColors &&
     css`
       .line-number:not(.highlighted),
       .line-number:not(.highlighted) > span,

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -7,7 +7,7 @@ import type { CodeBlockItems } from '@redocly/theme/components/CodeBlock/CodeBlo
 import { CodeBlockTabs } from '@redocly/theme/components/CodeBlock/CodeBlockTabs';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
-import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useThemeConfig, ReportButtonProps } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
 import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
 import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
@@ -39,8 +39,7 @@ type ControlProps = {
   label?: string;
   tooltipText?: string;
   onClick?: () => void;
-  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-  props?: Record<string, any>;
+  props?: ReportButtonProps;
 };
 
 type CopyControlProps = ControlProps & {
@@ -87,7 +86,10 @@ export function CodeBlockControls({
         {dropdown && <CodeBlockDropdown {...dropdown} />}
         {report && !report.hidden && !report?.props?.hide ? (
           <Tooltip
-            tip={translate('codeSnippet.report.tooltipText', 'Report a problem')}
+            tip={
+              report.props?.tooltip ||
+              translate('codeSnippet.report.tooltipText', 'Report a problem')
+            }
             placement="top"
             arrowPosition="right"
           >
@@ -97,16 +99,15 @@ export function CodeBlockControls({
               data-testid="report-button"
               icon={controlsType === 'icon' ? <WarningSquareIcon size="18px" /> : undefined}
               aria-label="Report a problem"
-              {...report.props}
+              onClick={report.props?.onClick}
             >
-              {controlsType != 'icon' && (report.props?.buttonText || 'Report')}
+              {controlsType !== 'icon' && (report.props?.buttonText || 'Report')}
             </ControlButton>
           </Tooltip>
         ) : null}
-
         {expand && !codeSnippet?.expand?.hide ? (
           <Tooltip
-            tip={translate('codeSnippet.expand.tooltipText', 'Expand all')}
+            tip={expand.props?.tooltip || translate('codeSnippet.expand.tooltipText', 'Expand all')}
             placement="top"
             arrowPosition="right"
           >
@@ -125,7 +126,10 @@ export function CodeBlockControls({
 
         {collapse && !codeSnippet?.collapse?.hide ? (
           <Tooltip
-            tip={translate('codeSnippet.collapse.tooltipText', 'Collapse all')}
+            tip={
+              collapse.props?.tooltip ||
+              translate('codeSnippet.collapse.tooltipText', 'Collapse all')
+            }
             placement="top"
             arrowPosition="right"
           >
@@ -137,7 +141,7 @@ export function CodeBlockControls({
               onClick={collapse?.onClick}
               aria-label="Collapse all"
             >
-              {controlsType !== 'icon' && (expand?.label || 'Collapse all')}
+              {controlsType !== 'icon' && (collapse?.label || 'Collapse all')}
             </ControlButton>
           </Tooltip>
         ) : null}
@@ -149,6 +153,7 @@ export function CodeBlockControls({
             data-testid="select-all"
             icon={controlsType === 'icon' ? <SelectIcon /> : undefined}
             onClick={select?.onClick}
+            aria-label="Select all"
           >
             {controlsType !== 'icon' && select?.label ? select.label : 'Select all'}
           </ControlButton>
@@ -161,6 +166,7 @@ export function CodeBlockControls({
             data-testid="clear-all"
             icon={controlsType === 'icon' ? <DeselectIcon /> : undefined}
             onClick={deselect?.onClick}
+            aria-label="Clear all"
           >
             {controlsType !== 'icon' && deselect?.label ? deselect.label : 'Clear all'}
           </ControlButton>