@redocly/theme 0.59.0-rc.3 → 0.60.0-custom.2

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

@@ -4,12 +4,16 @@ import styled from 'styled-components';
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { HttpTag } from '@redocly/theme/components/Tags/HttpTag';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogEntityMethodAndPathProps = {
   entity: BffCatalogEntity;
 };
 
 export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPathProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const method = entity.metadata?.method;
   const path = entity.metadata?.path;
 
@@ -19,7 +23,7 @@ export function CatalogEntityMethodAndPath({ entity }: CatalogEntityMethodAndPat
 
   return (
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityMethodAndPath">
-      <Heading>Method & Path</Heading>
+      <Heading>{translate('catalog.methodAndPath.label', 'Method & Path')}</Heading>
       <CatalogEntityInfoBar
         leftContent={
           <Label>

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

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type ContactPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const channels = entity.contact?.slack?.channels;
 
   return (
@@ -18,7 +22,7 @@ export function ContactProperty({ entity }: ContactPropertyProps): JSX.Element {
         header={
           <>
             <SlackIcon />
-            Slack channels
+            {translate('catalog.contact.label', 'Slack channels')}
           </>
         }
         content={

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

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type DomainsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const { domains = [] } = entity;
 
   return (
@@ -18,7 +22,7 @@ export function DomainsProperty({ entity }: DomainsPropertyProps): JSX.Element {
         header={
           <>
             <GraphIcon />
-            Domains
+            {translate('catalog.domains.label', 'Domains')}
           </>
         }
         content={

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

@@ -5,6 +5,7 @@ import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIc
 import { capitalize } from '@redocly/theme/core/utils';
 import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type EntityTypePropertyProps = {
   entity: BffCatalogEntity;
@@ -19,13 +20,16 @@ const formatEntityType = (entityType: string) => {
 };
 
 export function EntityTypeProperty({ entity }: EntityTypePropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty">
       <CatalogEntityPropertyCard
         header={
           <>
             <EntityTypeIcon />
-            Entity type
+            {translate('catalog.entityType.label', 'Entity type')}
           </>
         }
         content={

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

@@ -4,19 +4,23 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { NotesIcon } from '@redocly/theme/icons/NotesIcon/NotesIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type FormatPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function FormatProperty({ entity }: FormatPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/FormatProperty">
       <CatalogEntityPropertyCard
         header={
           <>
             <NotesIcon />
-            Format
+            {translate('catalog.format.label', 'Format')}
           </>
         }
         content={

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

@@ -5,12 +5,16 @@ import { GithubIcon } from '@redocly/theme/icons/GithubIcon/GithubIcon';
 import { removeLeadingSlash } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type GitPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const git = entity.git;
 
   return (
@@ -19,7 +23,7 @@ export function GitProperty({ entity }: GitPropertyProps): JSX.Element {
         header={
           <>
             <GithubIcon />
-            Repositories
+            {translate('catalog.repositories.label', 'Repositories')}
           </>
         }
         content={

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

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type OwnersPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const { owners = [] } = entity;
 
   return (
@@ -18,7 +22,7 @@ export function OwnersProperty({ entity }: OwnersPropertyProps): JSX.Element {
         header={
           <>
             <PeopleIcon />
-            Owners
+            {translate('catalog.owners.label', 'Owners')}
           </>
         }
         content={

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

@@ -4,19 +4,23 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
 import { CatalogTagsWithTooltip } from '@redocly/theme';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type TagsPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function TagsProperty({ entity }: TagsPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty">
       <CatalogEntityPropertyCard
         header={
           <>
             <TagsIcon />
-            Tags
+            {translate('catalog.tags.label', 'Tags')}
           </>
         }
         content={

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

@@ -4,12 +4,16 @@ import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { EmailIcon } from '@redocly/theme/icons/EmailIcon/EmailIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { Email } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type UserEmailPropertyProps = {
   entity: BffCatalogEntity;
 };
 
 export function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const email = entity.metadata?.email;
 
   return (
@@ -18,7 +22,7 @@ export function UserEmailProperty({ entity }: UserEmailPropertyProps): JSX.Eleme
         header={
           <>
             <EmailIcon />
-            Email
+            {translate('catalog.email.label', 'Email')}
           </>
         }
         content={<Email>{email}</Email>}

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

@@ -46,7 +46,7 @@ export function CatalogEntityApiDescriptionRelations({
 }: CatalogEntityApiDescriptionRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityApiDescriptionRelations">
-      <Tabs key={entity.id} size={TabsSize.MEDIUM}>
+      <Tabs key={entity.id} forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem
           label="Operations"
           icon={<MoleculesIcon />}

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

@@ -74,7 +74,7 @@ export function CatalogEntityTeamRelations({
 }: CatalogEntityTeamRelationsProps): JSX.Element {
   return (
     <div data-component-name="Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityTeamRelations">
-      <Tabs size={TabsSize.MEDIUM}>
+      <Tabs forceReady={relations.length > 0} size={TabsSize.MEDIUM}>
         <TabItem label="Members" icon={<PeopleIcon />} onClick={() => setFilter('type:user')}>
           <CatalogEntityRelationsTable
             key="members-table"

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

@@ -4,14 +4,16 @@ import * as Sampler from 'openapi-sampler';
 
 import { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { useCatalogEntitySchema } from '@redocly/theme/core/hooks/catalog/useCatalogEntitySchema';
+import { useCatalogEntitySchema } from '@redocly/theme/core/hooks';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
 
 export type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;
   relatedEntity: BffCatalogRelatedEntity | null;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   RedocSchema: React.ComponentType<any>;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   StoreProvider: React.ComponentType<any>;
   GraphqlTypeRenderer?: React.ComponentType<{ sdl: string; typeName: string }>;
 };

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -11,6 +11,7 @@ import { HierarchyIcon } from '@redocly/theme/icons/HierarchyIcon/HierarchyIcon'
 import { Image } from '@redocly/theme/components/Image/Image';
 import { PREDEFINED_ENTITY_TYPES, useThemeConfig } from '@redocly/theme/core';
 import { NoteIcon } from '@redocly/theme/icons/NoteIcon/NoteIcon';
+import { CubeIcon } from '@redocly/theme/icons/CubeIcon/CubeIcon';
 
 export type CatalogEntityIconProps = {
   entityType: string;
@@ -59,7 +60,7 @@ const getEntityIcon = ({
     );
   }
 
-  return <CodeIcon color="var(--catalog-entity-icon-color)" />; // @TODO: add default icon
+  return <CubeIcon color="var(--catalog-entity-icon-color)" />;
 };
 
 export function CatalogEntityIcon({

package/src/components/Catalog/CatalogFilter/CatalogFilter.tsx

@@ -26,6 +26,11 @@ export function CatalogFilter({
 }: CatalogFilterProps): JSX.Element | null {
   if (!filter.parentUsed) return null;
 
+  const filteredOptions = filter.filteredOptions || filter.options;
+  if (!filteredOptions || filteredOptions.length === 0) {
+    return null;
+  }
+
   const FilterComponent = filterComponents[(filter.type || 'checkboxes') as FilterTypes];
 
   return (

package/src/components/Catalog/CatalogFilter/CatalogFilterDateRange.tsx

@@ -52,7 +52,7 @@ export function CatalogFilterDateRange({
         <FilterOptions>
           <DateRangeWrapper>
             <DateRangeRow>
-              <span>From:</span>
+              <span>{translate('filter.dateRange.from', 'From:')}</span>
               <DatePicker
                 closeCalendar={true}
                 format="y-MM-dd"
@@ -72,7 +72,7 @@ export function CatalogFilterDateRange({
               />
             </DateRangeRow>
             <DateRangeRow>
-              <span>To:</span>
+              <span>{translate('filter.dateRange.to', 'To:')}</span>
               <DatePicker
                 closeCalendar={true}
                 dayPlaceholder="DD"

package/src/components/Catalog/CatalogSelector.tsx

@@ -20,8 +20,8 @@ export function CatalogSelector({
   setSortOption,
 }: CatalogSelectorProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
-
   const { translate } = useTranslate();
+
   const navigate = useNavigate();
   const pathPrefix = getPathPrefix();
 
@@ -35,7 +35,7 @@ export function CatalogSelector({
 
   return (
     <CatalogSelectWrapper data-component-name="Catalog/CatalogSelector">
-      <CatalogSelectLabel>Catalogs</CatalogSelectLabel>
+      <CatalogSelectLabel>{translate('catalog.catalogs.label', 'Catalogs')}</CatalogSelectLabel>
       <CatalogSelect
         value={selectedCatalogItem?.slug}
         options={options}

package/src/components/Catalog/CatalogSortButton.tsx

@@ -7,6 +7,7 @@ import { DescSortIcon } from '@redocly/theme/icons/DescSortIcon/DescSortIcon';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogSortButtonProps = {
   onSortChange: (sortOption: SortOption | null) => void;
@@ -20,6 +21,9 @@ export function CatalogSortButton({
   onSortChange: (sortOption: SortOption | null) => void;
   currentSort?: SortOption | null;
 }) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const toggleSort = useCallback(
     (field: string): void => {
       const newSort = currentSort === `-${field}` ? field : `-${field}`;
@@ -36,7 +40,7 @@ export function CatalogSortButton({
             <SortIconWrapper>
               {currentSort === '-title' ? <DescSortIcon /> : <AscSortIcon />}
             </SortIconWrapper>
-            <SortText>Sort</SortText>
+            <SortText>{translate('catalog.sort', 'Sort')}</SortText>
           </SortTrigger>
         }
         alignment="end"

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

@@ -4,7 +4,7 @@ import styled, { css } from 'styled-components';
 import { SortOption } from '@redocly/theme/core/types';
 import { CaretDownIcon } from '@redocly/theme/icons/CaretDownIcon/CaretDownIcon';
 import { CaretUpIcon } from '@redocly/theme/icons/CaretUpIcon/CaretUpIcon';
-import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks/catalog/useCatalogTableHeaderCellActions';
+import { useCatalogTableHeaderCellActions } from '@redocly/theme/core/hooks';
 import {
   BaseEntity,
   CatalogColumn,

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

@@ -7,7 +7,7 @@ import { CatalogOwnersCell } from '@redocly/theme/components/Catalog/CatalogTabl
 import { CatalogDomainsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogDomainsCell';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogTagsCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTagsCell';
-import { useCatalogTableViewRow } from '@redocly/theme/core/hooks/catalog/useCatalogTableViewRow';
+import { useCatalogTableViewRow } from '@redocly/theme/core/hooks';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';
 
 import { Link } from '../../Link/Link';

package/src/components/Catalog/CatalogTagsWithTooltip.tsx

@@ -5,6 +5,7 @@ import { CATALOG_TAG_MAX_LENGTH } from '@redocly/theme/core/constants';
 import { Tag, TagProps } from '@redocly/theme/components/Tag/Tag';
 import { TooltipComponent } from '@redocly/theme/components/Tooltip/Tooltip';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogTagsWithTooltipProps = {
   items: string[];
@@ -19,6 +20,9 @@ export function CatalogTagsWithTooltip({
   showPlaceholder = true,
   tagProps,
 }: CatalogTagsWithTooltipProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   if (!items || items.length === 0) {
     if (showPlaceholder) {
       return (
@@ -27,6 +31,7 @@ export function CatalogTagsWithTooltip({
             variant="outline"
             style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
             color="grey"
+            // eslint-disable-next-line theme/require-translate
           >
             N/A
           </Tag>
@@ -65,7 +70,9 @@ export function CatalogTagsWithTooltip({
           </Tag>
         ))}
 
-        <MoreTagsButton>+{remainingCount} more</MoreTagsButton>
+        <MoreTagsButton>
+          +{remainingCount} {translate('catalog.tags.more', 'more')}
+        </MoreTagsButton>
       </CatalogTagsWrapper>
     </TooltipComponent>
   );

package/src/components/Catalog/variables.dark.ts

@@ -1,5 +1,5 @@
 import { css } from 'styled-components';
 
 export const catalogDarkMode = css`
-  --catalog-avatar-bg-color: #3b3c45;
+  --catalog-avatar-bg-color: var(--color-warm-grey-4);
 `;

package/src/components/Catalog/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const catalog = css`
   /* === Catalog === */
   /**
@@ -97,7 +98,7 @@ export const catalog = css`
   /**
     * @tokens Catalog entity icon
     */
-  --catalog-entity-icon-color: var(--color-primary-base);
+  --catalog-entity-icon-color: var(--color-persian-green-8);
   --catalog-entity-border-color: var(--border-color-secondary);
   --catalog-entity-bg-color: var(--bg-color-tonal);
 
@@ -284,7 +285,7 @@ export const catalog = css`
   --catalog-page-badge-line-height: var(--line-height-base);
 
   --catalog-page-badge-dot-size: 6px;
-  --catalog-page-badge-dot-border-color: #ffffff;
+  --catalog-page-badge-dot-border-color: var(--color-static-white);
 
   /**
     * @tokens Catalog table
@@ -405,8 +406,8 @@ export const catalog = css`
   --catalog-entity-relations-node-font-weight-root: 600;
 
   --catalog-entity-relations-node-root-bg-color: var(--color-blue-6);
-  --catalog-entity-relations-node-root-text-color: #ffffff;
-  --catalog-entity-relations-node-root-icon-color: #ffffff;
+  --catalog-entity-relations-node-root-text-color: var(--color-static-white);
+  --catalog-entity-relations-node-root-icon-color: var(--color-static-white);
   // @tokens End
 
   /**
@@ -427,3 +428,4 @@ export const catalog = css`
   --catalog-entity-relations-edge-label-line-height: 1.2;
   // @tokens End
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -13,6 +13,7 @@ export type CatalogClassicInfoBlockProps = {
     scorecardLevel?: string;
     scoreCardSlug?: string;
     scorecardLevelIdx?: number;
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     scorecardLevels?: Record<string, any>;
 
     [key: string]: unknown;

package/src/components/CatalogClassic/variables.ts

@@ -100,7 +100,7 @@ export const catalogClassic = css`
   --catalog-classic-page-badge-line-height: var(--line-height-base);
 
   --catalog-classic-page-badge-dot-size: 6px;
-  --catalog-classic-page-badge-dot-border-color: #ffffff;
+  --catalog-classic-page-badge-dot-border-color: var(--color-static-white);
 
   // @tokens End
 `;

package/src/components/CodeBlock/CodeBlock.tsx

@@ -46,8 +46,11 @@ export type CodeBlockItems = {
 type ExternalSource = {
   sample: UnstableExternalCodeSample;
   exampleName?: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   pathParams?: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   properties?: any;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   operation?: any;
 };
 
@@ -128,6 +131,7 @@ export function CodeBlock({
                 }
               : undefined
           }
+          /* eslint-disable-next-line no-warning-comments */
           suppressHydrationWarning // TODO: investigate issue
           data-testid={dataTestId}
           hideCodeColors={hideCodeColors}

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -39,6 +39,7 @@ type ControlProps = {
   label?: string;
   tooltipText?: string;
   onClick?: () => void;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   props?: Record<string, any>;
 };
 

package/src/components/CodeBlock/CodeBlockTabs.tsx

@@ -8,7 +8,7 @@ import { useCodeBlockTabsControls } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronLeftIcon } from '@redocly/theme/icons/ChevronLeftIcon/ChevronLeftIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
-import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils/get-file-icon';
+import { getFileIconByExt, getFileIconByLanguage } from '@redocly/theme/core/utils';
 
 export type CodeBlockTabsProps = {
   tabs: CodeBlockItems;

package/src/components/DatePicker/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const datePicker = css`
   --date-picker-nav-color: #000000;
   --date-picker-tile-bg-color: var(--color-blue-2);
@@ -18,4 +19,5 @@ export const datePicker = css`
   --date-picker-wrapper-border-color: var(--border-color-primary);
   --date-picker-wrapper-radius: var(--border-radius-md);
   --date-picker-wrapper-padding: calc(var(--spacing-xxs) / 2) var(--spacing-xs);
-`
+`;
+/* eslint-enable theme/no-raw-colors-in-styles */