@redocly/theme 0.59.0 → 0.60.0-custom.2

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

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { BffCatalogEntity } from '@redocly/theme/core/types';
 import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
-import { useGraph } from '@redocly/theme/core/hooks/catalog/useGraph';
+import { useGraph } from '@redocly/theme/core/hooks';
 import { CatalogEntityRelationsNode } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
 import { CatalogEntityRelationsEdge } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsEdge';
 import { xyflow } from '@redocly/theme/core/styles';

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

@@ -6,12 +6,16 @@ import { LaunchIcon } from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 import { LinkIcon } from '@redocly/theme/icons/LinkIcon/LinkIcon';
 import { CatalogEntityInfoBar } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityInfoBar';
 import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 export type CatalogEntityLinksProps = {
   entity: BffCatalogEntity;
 };
 
 export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   const links = Object.entries(entity.links || []);
 
   if (!links.length) {
@@ -20,7 +24,7 @@ export function CatalogEntityLinks({ entity }: CatalogEntityLinksProps) {
 
   return (
     <LinksWrapper data-component-name="Catalog/CatalogEntity/CatalogEntityLinks">
-      <Heading>Links</Heading>
+      <Heading>{translate('catalog.links.label', 'Links')}</Heading>
       {links.map(([key, value]) => (
         <Link key={key} color="var(--catalog-metadata-link-color)" to={value.url} target="_blank">
           <CatalogEntityInfoBar

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

@@ -14,6 +14,7 @@ export type CatalogEntityMetadataProps = {
   entity: BffCatalogEntity;
 };
 
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function renderMetadataValue(value: any): React.JSX.Element {
   if (isPlainObject(value)) {
     return <JsonViewerWrapper data={value} expandLevel={3} controls={false} />;

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/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/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,11 +20,19 @@ export function CatalogTagsWithTooltip({
   showPlaceholder = true,
   tagProps,
 }: CatalogTagsWithTooltipProps): JSX.Element | null {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+
   if (!items || items.length === 0) {
     if (showPlaceholder) {
       return (
         <CatalogTagsWrapper data-component-name="Catalog/CatalogTagsWithTooltip">
-          <Tag style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }} color="grey">
+          <Tag
+            variant="outline"
+            style={{ backgroundColor: 'var(--catalog-tags-placeholder-bg-color)' }}
+            color="grey"
+            // eslint-disable-next-line theme/require-translate
+          >
             N/A
           </Tag>
         </CatalogTagsWrapper>
@@ -61,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 === */
   /**
@@ -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 */

package/src/components/Feedback/Mood.tsx

@@ -269,10 +269,10 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelMoodForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button type="submit" variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Feedback/Rating.tsx

@@ -182,10 +182,10 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
         {displaySubmitBnt && (
           <ButtonsContainer>
             <Button onClick={onCancelRatingForm} variant="text" size="small">
-              Cancel
+              {translate('feedback.cancel', 'Cancel')}
             </Button>
             <Button onClick={onSubmitRatingForm} variant="secondary" size="small">
-              Submit
+              {translate('feedback.submit', 'Submit')}
             </Button>
           </ButtonsContainer>
         )}

package/src/components/Filter/FilterDateRange.tsx

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

package/src/components/Filter/FilterSelect.tsx

@@ -55,6 +55,7 @@ export function FilterSelect({
         {translate(filter.titleTranslationKey, filter.title)}
       </FilterTitle>
       <StyledSelect
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         value={(filter.selectedOptions as Set<any>).values().next()?.value || ''}
         onChange={(value) => filter.selectOption(value)}
         options={selectOptions}

package/src/components/JsonViewer/JsonViewer.tsx

@@ -13,6 +13,7 @@ export type PanelType = 'request' | 'responses' | 'request-samples' | 'response-
 export type JsonProps = {
   title?: CodeBlockControlsProps['title'];
   controls?: CodeBlockControlsProps['controls'];
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   data: any;
   className?: string;
   expandLevel: number;

package/src/components/JsonViewer/helpers.tsx

@@ -1,3 +1,4 @@
+ 
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 
@@ -7,6 +8,7 @@ import { Button } from '@redocly/theme/components/Button/Button';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 
 export function JsonValue(props: {
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   standalone?: boolean; // if true, will render the opening and closing punctuation (when it's an item inside array or top-level)
@@ -103,6 +105,7 @@ export function JsonValue(props: {
 
 function JsonKeyValue(props: {
   name: string;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   value: any;
   level: number;
   defaultExpandLevel: number;

package/src/components/LastUpdated/LastUpdated.tsx

@@ -63,6 +63,7 @@ export function LastUpdated(props: LastUpdatedProps): JSX.Element | null {
       data-print-datetime={isoDate}
       data-translation-key={translationKey}
     >
+      {/* eslint-disable-next-line no-warning-comments */}
       {text} {/* TODO: fix issue with snapshot tests - they should not depend on current date */}
       <time dateTime={isoDate}>{lastUpdatedString}</time>
     </LastUpdatedWrapper>