@redocly/theme 0.60.0-next.1 → 0.60.0-next.3

package/lib/core/utils/get-operation-color.d.ts

@@ -0,0 +1,7 @@
+type OperationColorProps = {
+    deprecated?: boolean;
+    isAdditionalOperation?: boolean;
+    httpVerb: string;
+};
+export declare function getOperationColor({ deprecated, isAdditionalOperation, httpVerb, }: OperationColorProps): string;
+export {};

package/lib/core/utils/get-operation-color.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOperationColor = getOperationColor;
+function getOperationColor({ deprecated, isAdditionalOperation, httpVerb, }) {
+    if (deprecated) {
+        return 'http-deprecated';
+    }
+    else if (isAdditionalOperation) {
+        return 'http-additional-operation';
+    }
+    return httpVerb;
+}
+//# sourceMappingURL=get-operation-color.js.map

package/lib/core/utils/get-user-agent.js

@@ -5,6 +5,7 @@ exports.getUserAgent = getUserAgent;
  * Returns user agent. Handles SSR and browser.
  */
 function getUserAgent() {
+    /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     const ssrUserAgent = globalThis['SSR_USER_AGENT'];
     if (ssrUserAgent) {
         return ssrUserAgent;

package/lib/core/utils/index.d.ts

@@ -28,7 +28,7 @@ export * from './with-load-progress';
 export * from './text-trimmer';
 export * from './get-code-walkthrough-file-text';
 export * from './download-code-walkthrough';
-export * from './get-file-icon';
+export * from './GetFileIcon';
 export * from './match-code-walkthrough-conditions';
 export * from './replace-inputs-with-value';
 export * from './find-closest-common-directory';
@@ -37,6 +37,7 @@ export * from './parse-style-string';
 export * from './lang-to-name';
 export * from './enhanced-smoothstep';
 export * from './icon-resolver';
-export * from './dynamic';
+export * from './Dynamic';
 export * from './tabs';
+export * from './get-operation-color';
 export * from './frontmatter-translate';

package/lib/core/utils/index.js

@@ -44,7 +44,7 @@ __exportStar(require("./with-load-progress"), exports);
 __exportStar(require("./text-trimmer"), exports);
 __exportStar(require("./get-code-walkthrough-file-text"), exports);
 __exportStar(require("./download-code-walkthrough"), exports);
-__exportStar(require("./get-file-icon"), exports);
+__exportStar(require("./GetFileIcon"), exports);
 __exportStar(require("./match-code-walkthrough-conditions"), exports);
 __exportStar(require("./replace-inputs-with-value"), exports);
 __exportStar(require("./find-closest-common-directory"), exports);
@@ -53,7 +53,8 @@ __exportStar(require("./parse-style-string"), exports);
 __exportStar(require("./lang-to-name"), exports);
 __exportStar(require("./enhanced-smoothstep"), exports);
 __exportStar(require("./icon-resolver"), exports);
-__exportStar(require("./dynamic"), exports);
+__exportStar(require("./Dynamic"), exports);
 __exportStar(require("./tabs"), exports);
+__exportStar(require("./get-operation-color"), exports);
 __exportStar(require("./frontmatter-translate"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/utils/js-utils.d.ts

@@ -6,7 +6,7 @@ export declare function toStringIfDefined(value: unknown): string | undefined;
  * Returns true when the function executed in browser.
  */
 export declare function isBrowser(): boolean;
-export declare function isPlainObject(obj: any): boolean;
+export declare function isPlainObject(obj: unknown): boolean;
 /**
  * Returns the previous and next values in an array for a given index.
  *

package/lib/core/utils/load-and-navigate.js

@@ -19,6 +19,7 @@ function loadAndNavigate(_a) {
         lastNavigatedPath = to;
         const { pathname, hash, search } = new URL(to, window.location.origin + window.location.pathname);
         // use window-shared loader instead of importing to prevent circular import issue
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         const loader = window['__LOADER'];
         const result = yield (0, with_load_progress_1.withLoadProgress)(loader.tryLoad(pathname));
         // @ts-ignore

package/lib/core/utils/markdoc.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.isTag = isTag;
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
 function isTag(value) {
     return !!((value === null || value === void 0 ? void 0 : value.$$mdtype) === 'Tag');
 }

package/lib/core/utils/parse-style-string.js

@@ -15,6 +15,7 @@ function parseStyleString(styleString) {
             const camelCaseKey = key.replace(/-[a-z]/g, (match) => {
                 return match[1].toUpperCase();
             });
+            /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             styleObj[camelCaseKey] = value;
         }
         return styleObj;

package/lib/ext/configure.d.ts

@@ -1,4 +1,4 @@
-import { UserClaims, OpenAPIServer } from '../core/types';
+import type { UserClaims, OpenAPIServer } from '../core/types';
 export type SecurityDetails = {
     password?: string;
     username?: string;

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 export * from './core';
-export * from './config';
+export type * from './config';
 export * from './ext/configure';
 export * from './components/Button/Button';
 export * from './components/Button/ButtonGroup';
@@ -31,8 +31,8 @@ export * from './components/Buttons/EmailButton';
 export * from './components/Buttons/NewTabButton';
 export * from './components/Buttons/AIAssistantButton';
 export * from './components/Markdown/Markdown';
-export * from './components/Markdown/styles/baseTable';
-export * from './components/Markdown/styles/headingAnchor';
+export * from './components/Markdown/styles/base-table';
+export * from './components/Markdown/styles/heading-anchor';
 export * from './components/Markdown/styles/links';
 export * from './components/Admonition/Admonition';
 export * from './components/ApiOnboarding/AppCustomAttributes';

package/lib/index.js

@@ -38,7 +38,6 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.markdoc = void 0;
 __exportStar(require("./core"), exports);
-__exportStar(require("./config"), exports);
 __exportStar(require("./ext/configure"), exports);
 /* Components */
 __exportStar(require("./components/Button/Button"), exports);
@@ -73,8 +72,8 @@ __exportStar(require("./components/Buttons/NewTabButton"), exports);
 __exportStar(require("./components/Buttons/AIAssistantButton"), exports);
 /* Markdown */
 __exportStar(require("./components/Markdown/Markdown"), exports);
-__exportStar(require("./components/Markdown/styles/baseTable"), exports);
-__exportStar(require("./components/Markdown/styles/headingAnchor"), exports);
+__exportStar(require("./components/Markdown/styles/base-table"), exports);
+__exportStar(require("./components/Markdown/styles/heading-anchor"), exports);
 __exportStar(require("./components/Markdown/styles/links"), exports);
 /* Admonition */
 __exportStar(require("./components/Admonition/Admonition"), exports);

package/lib/layouts/ThreePanelLayout.js

@@ -51,7 +51,7 @@ exports.ThreePanelLayout = ThreePanelLayout;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const config_1 = require("@redocly/config");
-const media_css_1 = require("../core/utils/media-css");
+const utils_1 = require("../core/utils");
 function ThreePanelLayout(_a) {
     var { children } = _a, props = __rest(_a, ["children"]);
     return (react_1.default.createElement(Wrapper, Object.assign({ "data-component-name": "Layout/ThreePanelLayout" }, props), children));
@@ -68,15 +68,15 @@ const Wrapper = styled_components_1.default.div `
     return (0, styled_components_1.css) `
       max-width: ${layout === config_1.LayoutVariant.THREE_PANEL ? '100%' : ''};
 
-      @media screen and (min-width: ${media_css_1.breakpoints.small}) {
+      @media screen and (min-width: ${utils_1.breakpoints.small}) {
         max-width: var(--layout-${layout}-small-max-width);
       }
 
-      @media screen and (min-width: ${media_css_1.breakpoints.medium}) {
+      @media screen and (min-width: ${utils_1.breakpoints.medium}) {
         max-width: var(--layout-${layout}-medium-max-width);
       }
 
-      @media screen and (min-width: ${media_css_1.breakpoints.large}) {
+      @media screen and (min-width: ${utils_1.breakpoints.large}) {
         max-width: var(--layout-${layout}-large-max-width);
       }
 

package/lib/markdoc/components/Cards/variables.dark.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cardsDarkMode = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.cardsDarkMode = (0, styled_components_1.css) `
   --card-icon-border-color: var(--color-warm-grey-4);
   --card-icon-bg-color: var(--color-warm-grey-3);
@@ -24,4 +25,5 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.dark.js.map

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cards = void 0;
 const styled_components_1 = require("styled-components");
+/* eslint-disable theme/no-raw-colors-in-styles */
 exports.cards = (0, styled_components_1.css) `
   --cards-gap: var(--spacing-sm);
 
@@ -68,4 +69,5 @@ exports.cards = (0, styled_components_1.css) `
   }
 
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */ 
 //# sourceMappingURL=variables.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.js

@@ -162,6 +162,7 @@ const Tab = styled_components_1.default.button `
           }
         `}
 `;
+// eslint-disable-next-line no-warning-comments
 // code-walk-todo: figure it our why we could not do it differently
 const StyledDropdownMenu = (0, styled_components_1.default)(DropdownMenu_1.DropdownMenu) `
   --md-list-left-padding: var(--dropdown-menu-padding);

package/lib/markdoc/tags/code-walkthrough.js

@@ -63,6 +63,7 @@ exports.codeWalkthrough = {
         },
         validate(node) {
             const errors = [];
+            /* eslint-disable-next-line no-warning-comments */
             // code-walk-todo: validate when/unless for steps, toggles, inputs, and chunks
             const toggleIds = Object.keys(collectTogglesFromChildren(node.children));
             if ((0, utils_1.isObject)(node.attributes.filters)) {

package/lib/markdoc/tags/html.js

@@ -14,6 +14,7 @@ exports.html = {
             name: { type: String, required: true },
             attrs: { type: Object },
         },
+        /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
         transform(node, config) {
             const { name, attrs } = node.attributes;
             const children = node.transformChildren(config);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.60.0-next.1",
+  "version": "0.60.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -87,7 +87,7 @@
     "openapi-sampler": "1.6.2",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/config": "0.38.0",
+    "@redocly/config": "0.39.0",
     "@redocly/realm-asyncapi-sdk": "0.6.0-next.0"
   },
   "scripts": {

package/src/components/Button/Button.tsx

@@ -32,6 +32,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
   iconPosition?: 'left' | 'right';
   title?: string;
   tabIndex?: number;
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   onClick?: (e?: any) => void;
   ref?: React.Ref<HTMLButtonElement>;
 }

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -13,7 +13,7 @@ import { VSCodeIcon } from '@redocly/theme/icons/VSCodeIcon/VSCodeIcon';
 import { CopyIcon } from '@redocly/theme/icons/CopyIcon/CopyIcon';
 import { CheckmarkFilledIcon } from '@redocly/theme/icons/CheckmarkFilledIcon/CheckmarkFilledIcon';
 import { ConnectIcon } from '@redocly/theme/icons/ConnectIcon/ConnectIcon';
-import { useConnectMCPButton } from '@redocly/theme/core/hooks/use-connect-mcp-button';
+import { useConnectMCPButton } from '@redocly/theme/core/hooks';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 
 type TriggerButtonProps = {

package/src/components/Buttons/variables.ts

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 
+/* eslint-disable theme/no-raw-colors-in-styles */
 export const aiAssistantButton = css`
   /**
    * @tokens AI Assistant Button
@@ -46,6 +47,7 @@ export const aiAssistantButton = css`
   /* Transition */
   --ai-assistant-button-transition: box-shadow 0.3s ease, transform 0.2s ease;
 `;
+/* eslint-enable theme/no-raw-colors-in-styles */
 
 export const connectMCPButton = css`
   /**

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

@@ -18,7 +18,8 @@ export type CatalogCardProps = {
 };
 
 export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.Element {
-  const { useTelemetry } = useThemeHooks();
+  const { useTelemetry, useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
   const telemetry = useTelemetry();
   const pathPrefix = getPathPrefix();
 
@@ -49,7 +50,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
 
         <CardMetadataSection>
           <MetadataRow>
-            <MetadataLabel>Domains:</MetadataLabel>
+            <MetadataLabel>{translate('catalog.metadata.domains', 'Domains:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.domains?.map((domain) => domain.title) || []}
               tagProps={{
@@ -64,7 +65,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
           </MetadataRow>
 
           <MetadataRow>
-            <MetadataLabel>Owners:</MetadataLabel>
+            <MetadataLabel>{translate('catalog.metadata.owners', 'Owners:')}</MetadataLabel>
             <CatalogTagsWithTooltip
               items={entity.owners?.map((owner) => owner.key) || []}
               tagProps={{

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

@@ -22,7 +22,9 @@ import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/Ca
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
 
 export type CatalogEntityProps = {
+  /* 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 }>;
 };
@@ -49,7 +51,9 @@ const renderFirstColumnEntitySection = (entity: BffCatalogEntity): React.ReactEl
 const renderDataSchemaSection = (
   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 }>,
 ): React.ReactElement | null => {

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>}