@redocly/theme 0.69.0 → 0.70.0-next.1

package/src/components/Tooltip/JsTooltip.tsx

@@ -125,15 +125,20 @@ function TooltipComponent({
 
 export const Tooltip = memo<PropsWithChildren<TooltipProps>>(TooltipComponent);
 
+type TooltipArrowProps = {
+  $withArrow: boolean;
+  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
+};
+
 const PLACEMENTS = {
-  top: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+  top: css<TooltipArrowProps>`
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(0, -100%);
             margin-top: -10px;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(-100%, -100%);
               margin-top: -10px;
@@ -143,30 +148,28 @@ const PLACEMENTS = {
               margin-top: -10px;
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-top-width: 8px;
-          border-top-style: solid;
-          border-radius: 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 0H16L9.414 6.586A2 2 0 0 1 6.586 6.586Z');
           bottom: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(99%);'}
         }
       `}
   `,
-  bottom: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
-    ${({ withArrow, arrowPosition }) =>
-      withArrow && arrowPosition === 'left'
+  bottom: css<TooltipArrowProps>`
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow && $arrowPosition === 'left'
         ? css`
             transform: translate(0, 10px);
             margin-top: 0;
           `
-        : arrowPosition === 'right'
+        : $arrowPosition === 'right'
           ? css`
               transform: translate(-100%, 10px);
               margin-top: 0;
@@ -176,61 +179,55 @@ const PLACEMENTS = {
               margin-top: 0;
             `}
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-left: 14px solid transparent;
-          border-right: 14px solid transparent;
-          border-bottom-width: 8px;
-          border-bottom-style: solid;
-          border-radius: 0 0 2px 2px;
+          width: 16px;
+          height: 8px;
+          clip-path: path('M0 8H16L9.414 1.414A2 2 0 0 0 6.586 1.414Z');
           top: 0;
-          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-99%);'}
-          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
-          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'left' && 'left: 22px; transform: translateY(-99%);'}
+          ${$arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -99%);'}
+          ${$arrowPosition === 'right' && 'right: 22px; transform: translateY(-99%);'}
         }
       `}
   `,
-  left: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+  left: css<TooltipArrowProps>`
     transform: translate(-100%, -50%);
     margin-left: -10px;
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-left-width: 8px;
-          border-left-style: solid;
-          border-radius: 2px 0 0 2px;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M0 0V16L6.586 9.414A2 2 0 0 0 6.586 6.586Z');
           top: 50%;
           right: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(99%);'}
         }
       `}
   `,
-  right: css<Pick<TooltipProps, 'withArrow' | 'arrowPosition'>>`
+  right: css<TooltipArrowProps>`
     transform: translate(0, -50%);
     margin-left: 10px;
 
-    ${({ withArrow, arrowPosition }) =>
-      withArrow &&
+    ${({ $withArrow, $arrowPosition }) =>
+      $withArrow &&
       css`
         &::after {
-          border-top: 14px solid transparent;
-          border-bottom: 14px solid transparent;
-          border-right-width: 8px;
-          border-right-style: solid;
-          border-radius: 0 2px 2px 0;
+          width: 8px;
+          height: 16px;
+          clip-path: path('M8 0V16L1.414 9.414A2 2 0 0 1 1.414 6.586Z');
           top: 50%;
           left: 0;
-          ${arrowPosition === 'top' && 'top: 16px; transform: translateX(-99%);'}
-          ${arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
-          ${arrowPosition === 'bottom' && 'bottom: 16px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'top' && 'top: 22px; transform: translateX(-99%);'}
+          ${$arrowPosition === 'center' && 'top: 50%; transform: translate(-99%, -50%);'}
+          ${$arrowPosition === 'bottom' && 'bottom: 22px; transform: translateX(-99%);'}
         }
       `}
   `,
@@ -240,12 +237,12 @@ const TooltipWrapper = styled.div`
   position: relative;
   display: flex;
 `;
-const TooltipBody = styled.span<{
-  $placement: NonNullable<TooltipProps['placement']>;
-  $withArrow: boolean;
-  $arrowPosition: NonNullable<TooltipProps['arrowPosition']>;
-  $width?: string;
-}>`
+const TooltipBody = styled.span<
+  TooltipArrowProps & {
+    $placement: NonNullable<TooltipProps['placement']>;
+    $width?: string;
+  }
+>`
   display: inline-block;
 
   padding: var(--tooltip-padding);
@@ -267,9 +264,7 @@ const TooltipBody = styled.span<{
 
     content: ' ';
     display: inline-block;
-    width: 0;
-    height: 0;
-    border-color: var(--tooltip-arrow-color, var(--tooltip-bg-color));
+    background: var(--tooltip-arrow-color, var(--tooltip-bg-color));
   }
 
   background: var(--tooltip-bg-color);
@@ -279,7 +274,5 @@ const TooltipBody = styled.span<{
   box-shadow: var(--bg-raised-shadow);
 
   width: ${({ $width }) => $width || 'max-content'};
-  ${({ $placement }) => css`
-    ${PLACEMENTS[$placement]};
-  `}
+  ${({ $placement }) => PLACEMENTS[$placement]}
 `;

package/src/components/Tooltip/Tooltip.tsx

@@ -4,11 +4,10 @@ import type { TooltipProps } from '@redocly/theme/core/types';
 
 import { Tooltip as AnchorTooltip } from '@redocly/theme/components/Tooltip/AnchorTooltip';
 import { Tooltip as JsTooltip } from '@redocly/theme/components/Tooltip/JsTooltip';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useAnchorPositioning } from '@redocly/theme/core/hooks';
 import { getDefaultFallbackPlacements } from '@redocly/theme/core/utils';
 
 function TooltipComponent(props: TooltipProps): React.ReactElement {
-  const { useAnchorPositioning } = useThemeHooks();
   const { isSupported } = useAnchorPositioning();
 
   const fallbackPlacements =

package/src/core/constants/markdown.ts

@@ -1 +1,5 @@
 export const MARKDOWN_CLASS_NAME = 'md';
+
+export const MARKDOC_EXAMPLE_TAG = 'markdoc-example';
+
+export const EXAMPLE_CONTENT_ATTRIBUTE = 'exampleContent';

package/src/core/hooks/__mocks__/index.ts

@@ -1,5 +1,6 @@
 export * from './use-theme-config';
 export * from './use-theme-hooks';
+export * from './use-anchor-positioning';
 export * from './use-mobile-menu';
 export * from './use-controlled-state';
 export * from './search/use-recent-searches';

package/src/core/hooks/__mocks__/use-anchor-positioning.ts

@@ -0,0 +1,3 @@
+import { vi } from 'vitest';
+
+export const useAnchorPositioning = vi.fn(() => ({ isSupported: true }));

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -3,9 +3,6 @@ import { vi, type MockedFunction } from 'vitest';
 import type { ThemeHooks } from '../../types/hooks';
 
 export const useThemeHooks = vi.fn(() => ({
-  useAnchorPositioning: vi.fn(() => ({
-    isSupported: true,
-  })),
   useTranslate: vi.fn(() => ({
     translate: vi.fn((key: string, defaultValue: string | { defaultValue: string }) =>
       defaultValue

package/src/core/hooks/catalog/use-catalog-entity-schema.ts

@@ -1,4 +1,4 @@
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
 
 type CatalogEntitySchemaProps = {
   entity: BffCatalogEntity;
@@ -12,7 +12,7 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
 
   try {
     parsedSchema = JSON.parse(schema);
-  } catch (error) {
+  } catch {
     parsedSchema = undefined;
   }
 
@@ -22,7 +22,7 @@ export function useCatalogEntitySchema({ entity, relatedEntity }: CatalogEntityS
     parsedApiDefinition = relatedEntity?.metadata?.schema
       ? (JSON.parse(relatedEntity.metadata.schema) as Record<string, unknown>)
       : undefined;
-  } catch (err) {
+  } catch {
     parsedApiDefinition = undefined;
   }
 

package/src/core/hooks/catalog/use-catalog-table-header-cell-actions.ts

@@ -1,4 +1,4 @@
-import {
+import type {
   BaseEntity,
   CatalogColumn,
 } from '@redocly/theme/components/Catalog/CatalogTableView/CatalogTableView';

package/src/core/hooks/catalog/use-graph.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo } from 'react';
 import {
+  type OnNodesChange,
+  type OnEdgesChange,
   addEdge,
   type Node,
   type Edge,
@@ -7,13 +9,11 @@ import {
   useNodesState,
   useEdgesState,
   Position,
-  OnNodesChange,
-  OnEdgesChange,
 } from '@xyflow/react';
 
-import { type CatalogEntityNodeData } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
+import type { CatalogEntityNodeData } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsNode';
 
-import { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
+import type { BffCatalogEntity, BffCatalogRelatedEntity } from '../../types';
 import {
   GraphCustomEdgeType,
   GraphCustomNodeType,

package/src/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.ts

@@ -8,7 +8,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-ignore
+  // @ts-expect-error
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';

package/src/core/hooks/code-walkthrough/__mocks__/mock-intersection-observer.ts

@@ -9,7 +9,7 @@ export class MockIntersectionObserver {
   unobserve: (target: HTMLElement) => void;
   disconnect: () => void;
 
-  // @ts-ignore
+  // @ts-expect-error
   constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
     this.root = null;
     this.rootMargin = '0px';

package/src/core/hooks/code-walkthrough/use-code-walkthrough-controls.ts

@@ -98,7 +98,7 @@ export function useCodeWalkthroughControls(
     Object.entries(newState).forEach(([id, control]) => {
       const existingControl = controlsState[id];
       if (existingControl && existingControl.type === control.type) {
-        // @ts-ignore
+        // @ts-expect-error
         newState[id] = {
           ...control,
           value: existingControl.value,

package/src/core/hooks/index.ts

@@ -55,3 +55,4 @@ export * from './use-toast';
 export * from './use-toast-logic';
 export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
+export * from './use-anchor-positioning';

package/src/core/hooks/menu/__mocks__/use-mobile-menu-items.ts

@@ -2,7 +2,7 @@ import { vi, type MockedFunction } from 'vitest';
 
 import type { ResolvedNavItem } from '@redocly/config';
 
-import { MobileMenuType } from '../../../constants/common';
+import type { MobileMenuType } from '../../../constants/common';
 
 export const useMobileMenuItems: MockedFunction<
   (menuType: MobileMenuType) => {

package/src/core/hooks/menu/use-nested-menu.ts

@@ -47,9 +47,9 @@ export function useNestedMenu({ item, labelRef, nestedMenuRef }: NestedMenuProps
       rect.right <= (window.innerWidth || document.documentElement.clientWidth);
 
     // Only scroll if element is in viewport to prevent page jumping
-    // @ts-ignore
+    // @ts-expect-error
     if (isInViewport && typeof el.scrollIntoViewIfNeeded === 'function') {
-      // @ts-ignore
+      // @ts-expect-error
       el.scrollIntoViewIfNeeded(centerIfNeeded);
     }
   }

package/src/core/hooks/use-active-section-id.ts

@@ -43,6 +43,7 @@ export function useActiveSectionId(
           const section = sections[i];
           const rect = section.getBoundingClientRect();
           if (rect.y < heightOffset && rect.bottom > heightOffset) {
+            if (isSkippedContent(section)) continue;
             setItemId(section.getAttribute('data-section-id') || '');
             return;
           }
@@ -73,3 +74,10 @@ export function useActiveSectionId(
 
   return itemId;
 }
+
+function isSkippedContent(element: Element): boolean {
+  return (
+    typeof element.checkVisibility === 'function' &&
+    !element.checkVisibility({ contentVisibilityAuto: true })
+  );
+}

package/src/core/hooks/use-anchor-positioning.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+export const useAnchorPositioning = (): { isSupported: boolean } => {
+  const [isSupported, setIsSupported] = useState(false);
+
+  useEffect(() => {
+    setIsSupported(isAnchorPositioningSupported());
+  }, []);
+
+  return { isSupported };
+};
+
+function isAnchorPositioningSupported(): boolean {
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+    return false;
+  }
+  return (
+    CSS.supports('anchor-name: --a') &&
+    CSS.supports('position-anchor: --a') &&
+    CSS.supports('top: anchor(top)')
+  );
+}

package/src/core/hooks/use-element-size.ts

@@ -1,4 +1,5 @@
-import { useState, useCallback, RefObject, useLayoutEffect, useRef } from 'react';
+import type { RefObject } from 'react';
+import { useState, useCallback, useLayoutEffect, useRef } from 'react';
 
 type Size = {
   width: number;

package/src/core/hooks/use-theme-hooks.ts

@@ -6,7 +6,6 @@ import { ThemeDataContext } from '../contexts/ThemeDataContext';
 import { useTelemetryFallback } from './use-telemetry-fallback';
 
 const fallbacks = {
-  useAnchorPositioning: () => ({ isSupported: false }),
   useTranslate: () => ({
     translate: (value?: string, options?: { defaultValue: string } | string) =>
       (typeof options === 'string' ? options : options?.defaultValue) || value || '',

package/src/core/types/catalog.ts

@@ -1,7 +1,11 @@
-import { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
-import { ENTITY_RELATION_TYPES } from '@redocly/config';
+import type { InfiniteData, UseInfiniteQueryResult } from '@tanstack/react-query';
+import type {
+  ENTITY_RELATION_TYPES,
+  CatalogEntityConfig,
+  EntitiesCatalogConfig,
+  LayoutVariant,
+} from '@redocly/config';
 
-import type { CatalogEntityConfig, EntitiesCatalogConfig, LayoutVariant } from '@redocly/config';
 import type { CatalogFilterConfig } from '@redocly/theme/config';
 
 export type FilterResult = {

package/src/core/types/common.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-import { DEFAULT_COLOR_MODES } from '../constants';
+import type { DEFAULT_COLOR_MODES } from '../constants';
 
 export type Plural<T extends string> = `${T}s`;
 

package/src/core/types/hooks.ts

@@ -1,6 +1,11 @@
-import type { ResolvedBannerConfig } from '@redocly/config';
+import type {
+  ResolvedBannerConfig,
+  PageData,
+  PageProps,
+  ResolvedNavItemWithLink,
+  Version,
+} from '@redocly/config';
 import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
-import type { PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
 import type { To, Location, NavigateFunction } from 'react-router';
@@ -14,9 +19,15 @@ import type {
   UseCatalogProps,
   CatalogApiParams,
   CatalogApiResults,
+  BffCatalogEntity,
+  BffCatalogEntityList,
+  BffCatalogRelatedEntity,
+  BffCatalogRelatedEntityList,
+  BffCatalogEntityRevision,
+  BffCatalogEntityRevisionList,
 } from './catalog';
 import type { UserMenuData } from './user-menu';
-import type { ItemState } from './sidebar';
+import type { ItemState, DrilldownMenuItemDetails } from './sidebar';
 import type {
   SearchItemData,
   SearchFacet,
@@ -29,20 +40,10 @@ import type {
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
-import type { DrilldownMenuItemDetails } from './sidebar';
 
-import {
-  BffCatalogEntity,
-  BffCatalogEntityList,
-  BffCatalogRelatedEntity,
-  BffCatalogRelatedEntityList,
-  BffCatalogEntityRevision,
-  BffCatalogEntityRevisionList,
-} from './catalog';
-import { AiSearchError } from '../constants/search';
+import type { AiSearchError } from '../constants/search';
 
 export type ThemeHooks = {
-  useAnchorPositioning: () => { isSupported: boolean };
   useTranslate: () => { translate: TFunction };
   useTranslationKeys: () => string[];
   /**

package/src/core/utils/load-and-navigate.ts

@@ -25,9 +25,9 @@ export async function loadAndNavigate({
   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   const loader = (window as any)['__LOADER'];
   const result = await withLoadProgress(loader.tryLoad(pathname));
-  // @ts-ignore
+  // @ts-expect-error
   if (result?.redirectTo) {
-    // @ts-ignore
+    // @ts-expect-error
     return loadAndNavigate({ navigate, to: result.redirectTo, origin, options });
   }
 
@@ -40,7 +40,7 @@ export async function loadAndNavigate({
         unstable_flushSync: true,
       } as NavigateOptions & { unstable_flushSync: boolean });
     }
-    // @ts-ignore
+    // @ts-expect-error
     if (result.props?.disableAutoScroll) return;
 
     if (hash) {

package/src/core/utils/mcp.ts

@@ -42,23 +42,6 @@ export function slugifyMcpServerName(name: string): string {
     .replace(/^-+|-+$/g, '');
 }
 
-// Claude Desktop's config file only launches stdio commands, so remote servers
-// connect through the mcp-remote bridge.
-export function generateClaudeDesktopConfig(config: McpConnectionParams): string {
-  return JSON.stringify(
-    {
-      mcpServers: {
-        [slugifyMcpServerName(config.serverName)]: {
-          command: 'npx',
-          args: ['-y', 'mcp-remote', config.url],
-        },
-      },
-    },
-    null,
-    2,
-  );
-}
-
 export function generateClaudeCodeCommand(config: McpConnectionParams): string {
   return `claude mcp add --transport http ${slugifyMcpServerName(config.serverName)} ${config.url}`;
 }

package/src/core/utils/menu.ts

@@ -1,8 +1,8 @@
 import type { ResolvedNavItem, Version } from '@redocly/config';
 import type { Location } from 'react-router';
 
-import { type Locale, type TFunction } from '../types/l10n';
-import { type ItemState } from '../types/sidebar';
+import type { Locale, TFunction } from '../types/l10n';
+import type { ItemState } from '../types/sidebar';
 import { MenuItemType } from '../constants/common';
 import { getPathnameForLocale, withoutPathPrefix, withPathPrefix } from './urls';
 

package/src/core/utils/urls.ts

@@ -5,9 +5,7 @@ import { DEFAULT_LOCALE_PLACEHOLDER } from '../constants/common';
 export function combineUrls(baseURL: string, ...relativeURLs: (string | undefined)[]) {
   let res = baseURL;
   for (let relativeURL of relativeURLs) {
-    res = relativeURL
-      ? res.replace(/[\/\\]+$/, '') + '/' + relativeURL.replace(/^[\/\\]+/, '')
-      : res;
+    res = relativeURL ? res.replace(/[/\\]+$/, '') + '/' + relativeURL.replace(/^[/\\]+/, '') : res;
   }
 
   return res;

package/src/ext/use-configure-replay.ts

@@ -1,8 +1,8 @@
 import { useEffect, useState, useCallback, useRef } from 'react';
 
-import {
-  type ConfigureRequestValues,
-  type ConfigureServerRequestValues,
+import type {
+  ConfigureRequestValues,
+  ConfigureServerRequestValues,
 } from '@redocly/theme/ext/configure';
 import type { UserClaims, OpenAPIServer, OpenAPIInfo } from '@redocly/theme/core/types';
 

package/src/layouts/OIDCForbidden.tsx

@@ -14,7 +14,7 @@ export function OIDCForbidden(): JSX.Element {
 
   // use whatever you want here
   const URL_REGEX =
-    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/;
+    /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
 
   const renderText = (text: string) =>
     text.split(' ').map((part: string) =>

package/src/markdoc/components/CodeWalkthrough/CodePanelPreview.tsx

@@ -1,7 +1,7 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
+import type { JSX, PropsWithChildren } from 'react';
 
 import { useThemeHooks } from '@redocly/theme/core/hooks';
 import { ChevronUpIcon } from '@redocly/theme/icons/ChevronUpIcon/ChevronUpIcon';

package/src/markdoc/components/CodeWalkthrough/CodeWalkthrough.tsx

@@ -9,10 +9,8 @@ import {
 } from '@redocly/theme/core/contexts';
 import { CodePanel } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodePanel';
 import { useCodeWalkthrough } from '@redocly/theme/core/hooks';
-import {
-  CodeFilters,
-  GetFilterState,
-} from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
+import type { GetFilterState } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
+import { CodeFilters } from '@redocly/theme/markdoc/components/CodeWalkthrough/CodeFilters';
 
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 

package/src/markdoc/components/Diagram/Diagram.tsx

@@ -1,11 +1,8 @@
-import React, { useState } from 'react';
+import React, { useState, type JSX } from 'react';
 import styled from 'styled-components';
 
-import type { JSX } from 'react';
-
 import { concatClassNames } from '@redocly/theme/core/utils';
-import { useColorSwitcher } from '@redocly/theme/core/hooks';
-import { useThemeHooks } from '@redocly/theme/core/hooks';
+import { useColorSwitcher, useThemeHooks } from '@redocly/theme/core/hooks';
 import { SvgViewer } from '@redocly/theme/components/SvgViewer/SvgViewer';
 
 type DiagramProps = {

package/src/markdoc/components/Tabs/Tab.tsx

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 
 import type { JSX } from 'react';
 
-import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import type { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { TabButtonLink, TabItem } from '@redocly/theme/markdoc/components/Tabs/TabList';
 import { GenericIcon } from '@redocly/theme/icons/GenericIcon/GenericIcon';
 

package/src/markdoc/components/Tabs/TabList.tsx

@@ -5,7 +5,7 @@ import type { JSX } from 'react';
 import type { TabItemProps } from '@redocly/theme/markdoc/components/Tabs/TabItemFragment';
 
 import { Tab } from '@redocly/theme/markdoc/components/Tabs/Tab';
-import { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
+import type { TabsSize } from '@redocly/theme/markdoc/components/Tabs/Tabs';
 import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
 import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
 import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';