@redocly/theme 0.69.0 → 0.70.0-next.1

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

@@ -5,10 +5,9 @@ import type { CatalogEntityVersionHistoryGroup } from '@redocly/theme/core/types
 
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';
 import { ChevronRightIcon } from '@redocly/theme/icons/ChevronRightIcon/ChevronRightIcon';
-import { CheckmarkOutlineIcon } from '@redocly/theme/icons/CheckmarkOutlineIcon/CheckmarkOutlineIcon';
+import { RadioCheckButtonIcon } from '@redocly/theme/icons/RadioCheckButtonIcon/RadioCheckButtonIcon';
 import { NavaidMilitaryIcon } from '@redocly/theme/icons/NavaidMilitaryIcon/NavaidMilitaryIcon';
 import { Link } from '@redocly/theme/components/Link/Link';
-import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ShowMoreButton } from '@redocly/theme/components/Catalog/CatalogEntity/ShowMoreButton';
 import { CatalogEntityRevisionItem } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityRevisionItem';
@@ -23,6 +22,8 @@ export type CatalogEntityVersionItemProps = {
   basePath: string;
   isExpanded: boolean;
   onToggle: (version: string) => void;
+  /** This version's own page URL (from the host's usePageVersions). */
+  versionLink?: string;
 };
 
 export function CatalogEntityVersionItem({
@@ -30,13 +31,16 @@ export function CatalogEntityVersionItem({
   basePath,
   isExpanded,
   onToggle,
+  versionLink,
 }: CatalogEntityVersionItemProps): React.ReactElement {
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
   const [showAllRevisions, setShowAllRevisions] = useState(false);
 
   const revisions = group.revisions || [];
-  const hasRevisions = revisions.length > 0;
+  // A version with one revision links straight to its page instead of
+  // expanding.
+  const hasExpandableRevisions = revisions.length > 1;
   const hasMoreThanMax = revisions.length > MAX_INITIAL_REVISIONS;
   const hasMoreThanLimit = revisions.length > MAX_REVISIONS;
   const displayedRevisions = showAllRevisions
@@ -51,55 +55,43 @@ export function CatalogEntityVersionItem({
 
   const isNotSpecifiedVersion = group.version === VERSION_NOT_SPECIFIED;
 
-  const singleRevisionLink = buildRevisionUrl(basePath, group.singleRevisionDate, group.version);
+  // Hosts without page-version links (catalog entities) keep the legacy
+  // ?revision=&version= contract.
+  const versionRowLink = hasExpandableRevisions
+    ? undefined
+    : (versionLink ?? buildRevisionUrl(basePath, group.singleRevisionDate, group.version));
 
-  const versionTitle = isNotSpecifiedVersion
-    ? `${translate('catalog.history.version.label', 'Version')}:\u00a0${translate('catalog.history.version.notSpecified', 'not specified')}`
-    : `${translate('catalog.history.version.label', 'Version')}:\u00a0${group.version}`;
+  const versionName = isNotSpecifiedVersion
+    ? translate('catalog.history.version.notSpecified', 'not specified')
+    : group.version;
+  const latestWord = translate('catalog.history.version.latest', 'latest');
+  // A version named "latest" already says it: no "(latest)" suffix.
+  const latestSuffix =
+    group.isDefaultVersion && versionName.toLowerCase() !== latestWord.toLowerCase()
+      ? ` (${latestWord})`
+      : '';
+  const versionTitle = `${translate('catalog.history.version.label', 'Version')}:\u00a0${versionName}${latestSuffix}`;
 
   const versionButton = (
     <VersionButton
       type="button"
-      onClick={() => hasRevisions && onToggle(group.version)}
+      onClick={() => hasExpandableRevisions && onToggle(group.version)}
       $isCurrent={group.isCurrent}
     >
       <VersionIcon $isCurrent={group.isCurrent}>
         {group.isCurrent ? (
-          <CheckmarkOutlineIcon
-            size="16px"
-            color="--catalog-history-sidebar-version-icon-color-current"
-          />
+          <CurrentVersionIcon />
         ) : (
-          <NavaidMilitaryIcon size="16px" color="--catalog-history-sidebar-version-icon-color" />
+          <NavaidMilitaryIcon size="14px" color="--catalog-history-sidebar-version-icon-color" />
         )}
       </VersionIcon>
-      <VersionInfo>
-        <VersionTitleRow>
-          <VersionTitle>{versionTitle}</VersionTitle>
-          {group.isDefaultVersion && (
-            <Tag
-              color="grey"
-              borderless
-              textTransform="lowercase"
-              style={{
-                fontSize: 'var(--font-size-xs)',
-                borderRadius: 'var(--catalog-history-sidebar-version-tag-border-radius)',
-                flexShrink: 0,
-                marginLeft: 'var(--spacing-xxs)',
-              }}
-            >
-              {translate('catalog.history.version.default', 'default')}
-            </Tag>
-          )}
-        </VersionTitleRow>
-        {!isNotSpecifiedVersion && <VersionDate>{group.date}</VersionDate>}
-      </VersionInfo>
-      {hasRevisions && (
+      <VersionTitle>{versionTitle}</VersionTitle>
+      {hasExpandableRevisions && (
         <ChevronIcon>
           {isExpanded ? (
-            <ChevronDownIcon size="16px" color="--catalog-history-sidebar-chevron-icon-color" />
+            <ChevronDownIcon size="12px" color="--catalog-history-sidebar-chevron-icon-color" />
           ) : (
-            <ChevronRightIcon size="16px" color="--catalog-history-sidebar-chevron-icon-color" />
+            <ChevronRightIcon size="12px" color="--catalog-history-sidebar-chevron-icon-color" />
           )}
         </ChevronIcon>
       )}
@@ -108,9 +100,13 @@ export function CatalogEntityVersionItem({
 
   return (
     <li>
-      {singleRevisionLink ? <Link to={singleRevisionLink}>{versionButton}</Link> : versionButton}
+      {versionRowLink ? (
+        <VersionLinkWrapper to={versionRowLink}>{versionButton}</VersionLinkWrapper>
+      ) : (
+        versionButton
+      )}
 
-      {hasRevisions && isExpanded && (
+      {hasExpandableRevisions && isExpanded && (
         <RevisionsList>
           {displayedRevisions.map((revisionItem) => (
             <CatalogEntityRevisionItem
@@ -118,6 +114,7 @@ export function CatalogEntityVersionItem({
               revisionItem={revisionItem}
               basePath={basePath}
               version={group.version}
+              versionLink={versionLink}
             />
           ))}
           {hasMoreThanLimit && showAllRevisions && (
@@ -150,32 +147,41 @@ export function CatalogEntityVersionItem({
   );
 }
 
+const VersionLinkWrapper = styled(Link)`
+  display: block;
+  color: inherit;
+
+  &,
+  &:hover,
+  &:focus,
+  &:visited {
+    text-decoration: none;
+  }
+`;
+
 const VersionButton = styled.button<{
   $isCurrent?: boolean;
 }>`
   all: unset;
+  box-sizing: border-box;
   display: flex;
   align-items: center;
-  width: calc(100% - var(--catalog-history-sidebar-version-icon-margin-right));
+  width: 100%;
   padding: var(--catalog-history-sidebar-version-header-padding);
   cursor: pointer;
   border-radius: var(--catalog-history-sidebar-version-header-border-radius);
   transition: 0.2s ease;
   text-decoration: none;
   color: inherit;
-  background-color: 'transparent';
+  background-color: ${({ $isCurrent }) =>
+    $isCurrent ? 'var(--catalog-history-sidebar-version-header-bg-color-current)' : 'transparent'};
 
   &:hover {
-    background-color: var(--catalog-history-sidebar-version-header-bg-color-hover);
+    background-color: ${({ $isCurrent }) =>
+      $isCurrent
+        ? 'var(--catalog-history-sidebar-version-header-bg-color-current)'
+        : 'var(--catalog-history-sidebar-version-header-bg-color-hover)'};
   }
-
-  ${({ $isCurrent }) =>
-    !$isCurrent &&
-    `
-    &:hover ${VersionIcon} {
-      background-color: var(--color-static-white);
-    }
-  `}
 `;
 
 const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
@@ -190,25 +196,13 @@ const VersionIcon = styled.div<{ $isCurrent?: boolean }>`
     $isCurrent
       ? 'var(--color-primary-base, var(--color-blueberry-6))'
       : 'var(--catalog-avatar-bg-color)'};
-  transition: background-color 0.2s ease;
   margin-right: var(--catalog-history-sidebar-version-icon-margin-right);
-
-  svg path {
-    transition: fill 0.2s ease;
-  }
-`;
-
-const VersionInfo = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--catalog-history-sidebar-version-info-gap);
 `;
 
-const VersionTitleRow = styled.div`
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs, 8px);
+const CurrentVersionIcon = styled(RadioCheckButtonIcon)`
+  width: 14px;
+  height: 14px;
+  color: var(--catalog-history-sidebar-version-icon-color-current);
 `;
 
 const VersionTitle = styled.span`
@@ -223,14 +217,6 @@ const VersionTitle = styled.span`
   word-break: break-word;
 `;
 
-const VersionDate = styled.span`
-  font-family: var(--catalog-history-sidebar-version-date-font-family);
-  font-size: var(--catalog-history-sidebar-version-date-font-size);
-  font-weight: var(--catalog-history-sidebar-version-date-font-weight);
-  line-height: var(--catalog-history-sidebar-version-date-line-height);
-  color: var(--catalog-history-sidebar-version-date-color);
-`;
-
 const ChevronIcon = styled.div`
   display: flex;
   align-items: center;
@@ -250,7 +236,7 @@ const RevisionsList = styled.ul`
   &::before {
     content: '';
     position: absolute;
-    left: 22px;
+    left: var(--catalog-history-sidebar-revision-line-left);
     top: 0;
     bottom: var(--catalog-history-sidebar-revisions-padding-bottom);
     width: 1px;

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

@@ -1,4 +1,5 @@
-import React, { ReactNode, JSX } from 'react';
+import type { ReactNode, JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 export type CatalogEntityInfoBarProps = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 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';

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { capitalize, isPlainObject } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { 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';

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

@@ -1,7 +1,8 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { EntityTypeProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/EntityTypeProperty';
 import { GitProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/GitProperty';
 import { TagsProperty } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/TagsProperty';

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

@@ -1,4 +1,5 @@
-import React, { ReactNode, JSX } from 'react';
+import type { ReactNode, JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 export type CatalogEntityPropertyCardProps = {

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { SlackIcon } from '@redocly/theme/icons/SlackIcon/SlackIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
+import type { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
 import { useCatalogEntityLink, useThemeHooks } from '@redocly/theme/core/hooks';

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { EntityTypeIcon } from '@redocly/theme/icons/EntityTypeIcon/EntityTypeIcon';
 import { capitalize } from '@redocly/theme/core/utils';
 import { CatalogEntityTypeIcon } from '@redocly/theme/components/Catalog/CatalogEntityTypeIcon';

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { 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';

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { GithubIcon } from '@redocly/theme/icons/GithubIcon/GithubIcon';
 import { removeLeadingSlash } from '@redocly/theme/core/utils';
 import { Tag } from '@redocly/theme/components/Tag/Tag';

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

@@ -1,10 +1,9 @@
-import React, { JSX } from 'react';
+import React, { type JSX } from 'react';
 
-import { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
-import { useCatalogEntityLink } from '@redocly/theme/core/hooks';
+import type { BffCatalogEntity, CatalogEntityPageProps } from '@redocly/theme/core/types';
+import { useCatalogEntityLink, useThemeHooks } from '@redocly/theme/core/hooks';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogAvatar } from '@redocly/theme/components/Catalog/CatalogAvatar';
 

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { BffCatalogEntity } from '@redocly/theme/core/types';
 import { TagsIcon } from '@redocly/theme/icons/TagsIcon/TagsIcon';
 import { CatalogTags } from '@redocly/theme/components/Catalog/CatalogTags';
 import { CatalogEntityPropertyCard } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityPropertyCard';

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

@@ -1,6 +1,7 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
-import { BffCatalogEntity } from '@redocly/theme/core/types';
+import type { 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';

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

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';

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

@@ -1,10 +1,13 @@
-import React, { JSX } from 'react';
+import React, { type JSX } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { ListType } from '@redocly/theme/core/types';
-import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import type {
+  ListType,
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+} from '@redocly/theme/core/types';
 
-import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import type { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogEntityCell';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogEntityTypeTag } from '@redocly/theme/components/Catalog/CatalogEntityTypeTag';

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

@@ -1,4 +1,5 @@
-import React, { JSX, useState, useMemo } from 'react';
+import type { JSX } from 'react';
+import React, { useState, useMemo } from 'react';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';

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

@@ -1,11 +1,14 @@
-import React, { JSX } from 'react';
+import React, { type JSX } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { ListType } from '@redocly/theme/core/types';
-import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import type {
+  ListType,
+  BffCatalogEntity,
+  BffCatalogRelatedEntity,
+} from '@redocly/theme/core/types';
 
-import { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
+import type { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { CatalogActionsRow } from '@redocly/theme/components/Catalog/CatalogActionsRow';
 import { CatalogEntityRelationsTableContent } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTableContent';
 import { useThemeHooks } from '@redocly/theme/core/hooks';

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

@@ -1,14 +1,13 @@
-import React, { JSX } from 'react';
+import React, { type JSX } from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import type { ListType } from '@redocly/theme/core/types';
-import type { BffCatalogRelatedEntity } from '@redocly/theme/core/types';
+import type { ListType, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
 import { ArrowDownIcon } from '@redocly/theme/icons/ArrowDownIcon/ArrowDownIcon';
 import { LoadMore } from '@redocly/theme/components/LoadMore/LoadMore';
 import {
-  CatalogColumn,
+  type CatalogColumn,
   CatalogTableView,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { HighlightContext } from '@redocly/theme/components/Catalog/CatalogHighlight';

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

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import type { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
@@ -8,7 +9,7 @@ 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';
+import type { CatalogColumn } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogEntityRelationsTable } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelationsTable';
 import { CatalogUserEntityCell } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogUserEntityCell';

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

@@ -5,8 +5,7 @@ import * as Sampler from 'openapi-sampler';
 import type { CatalogEntityConfig } from '@redocly/config';
 import type { BffCatalogEntity, BffCatalogRelatedEntity } from '@redocly/theme/core/types';
 
-import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { useCatalogEntitySchema } from '@redocly/theme/core/hooks';
+import { useThemeHooks, useCatalogEntitySchema } from '@redocly/theme/core/hooks';
 import { getBaseDataAttributes } from '@redocly/theme/core/utils';
 import { JsonViewer } from '@redocly/theme/components/JsonViewer/JsonViewer';
 import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';

package/src/components/Catalog/CatalogEntityIcon.tsx

@@ -1,8 +1,9 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 
 import type { UiAccessibleConfig } from '@redocly/config';
 
-import { EntityType } from '@redocly/theme/core/types';
+import type { EntityType } from '@redocly/theme/core/types';
 import { CodeIcon } from '@redocly/theme/icons/CodeIcon/CodeIcon';
 import { GraphIcon } from '@redocly/theme/icons/GraphIcon/GraphIcon';
 import { PeopleIcon } from '@redocly/theme/icons/PeopleIcon/PeopleIcon';

package/src/components/Catalog/CatalogEntityTypeTag.tsx

@@ -1,7 +1,8 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
-import { EntityType } from '@redocly/theme/core/types';
+import type { EntityType } from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 import { CatalogHighlight } from '@redocly/theme/components/Catalog/CatalogHighlight';
 import { PREDEFINED_ENTITY_TYPES } from '@redocly/theme/core';

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

@@ -1,15 +1,13 @@
-import React from 'react';
+import React, { type JSX, type ReactNode } from 'react';
 import styled from 'styled-components';
 
-import type { JSX, ReactNode } from 'react';
 import type { ResolvedFilter } from '@redocly/theme/core/types';
 import type { RedoclyConfig } from '@redocly/theme/config';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogFilter } from '@redocly/theme/components/Catalog/CatalogFilter/CatalogFilter';
-import { breakpoints } from '@redocly/theme/core/utils';
-import { isFromToSelectedOptions } from '@redocly/theme/core/utils';
+import { breakpoints, isFromToSelectedOptions } from '@redocly/theme/core/utils';
 
 export type CatalogFilterContentProps = {
   onClear: () => void;

package/src/components/Catalog/CatalogHighlight.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import { findAll } from 'highlight-words-core';
 import styled from 'styled-components';
 

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogMobileFiltersPanelHeader } from '@redocly/theme/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader';

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelHeader.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { Button } from '@redocly/theme/components/Button/Button';

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { breakpoints } from '@redocly/theme/core';

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBar.tsx

@@ -1,10 +1,11 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogMobileTopBarFiltersButton } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton';
 import { CatalogMobileTopBarControls } from '@redocly/theme/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls';
 import { breakpoints } from '@redocly/theme/core';
-import { CatalogViewMode } from '@redocly/theme/core';
+import type { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarProps = {
   setMobileFiltersPanelOpen: (open: boolean) => void;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarControls.tsx

@@ -1,9 +1,10 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
 import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
-import { CatalogViewMode } from '@redocly/theme/core';
+import type { CatalogViewMode } from '@redocly/theme/core';
 
 type CatalogMobileTopBarControlsProps = {
   setSortOption: (sortOption: string | null) => void;

package/src/components/Catalog/CatalogMobileTopBar/CatalogMobileTopBarFiltersButton.tsx

@@ -1,4 +1,5 @@
-import React, { JSX } from 'react';
+import type { JSX } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import { FilterIcon } from '@redocly/theme/icons/FilterIcon/FilterIcon';

package/src/components/Catalog/CatalogSelector.tsx

@@ -1,10 +1,11 @@
-import React, { useState, JSX } from 'react';
+import type { JSX } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router';
 
 import { Accordion } from '@redocly/theme/components/Accordion/Accordion';
 import { Select } from '@redocly/theme/components/Select/Select';
-import { CatalogSwitcherItem } from '@redocly/theme/core/types';
+import type { CatalogSwitcherItem } from '@redocly/theme/core/types';
 import { getPathPrefix } from '@redocly/theme/core/utils';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronDownIcon } from '@redocly/theme/icons/ChevronDownIcon/ChevronDownIcon';