@redocly/theme 0.61.0 → 0.62.0-custom.0

package/src/core/hooks/use-page-actions.ts

@@ -32,6 +32,7 @@ const DEFAULT_ENABLED_ACTIONS = [
   'claude',
   'docs-mcp-cursor',
   'docs-mcp-vscode',
+  'docs-mcp-json',
 ] as const;
 
 export type PageActionType =
@@ -41,6 +42,7 @@ export type PageActionType =
   | 'claude'
   | 'docs-mcp-cursor'
   | 'docs-mcp-vscode'
+  | 'docs-mcp-json'
   | 'mcp-cursor'
   | 'mcp-vscode';
 
@@ -88,10 +90,12 @@ export function usePageActions(
           translate,
           onClickCallback: isDocsMcp
             ? () =>
-                telemetry.sendPageActionsButtonClickedMessage({
-                  ...createPageActionResource(pageSlug, pageUrl),
-                  action_type: `docs-mcp-${clientType}` as const,
-                })
+                telemetry.sendPageActionsButtonClickedMessage([
+                  {
+                    ...createPageActionResource(pageSlug, pageUrl),
+                    action_type: `docs-mcp-${clientType}` as const,
+                  },
+                ])
             : undefined,
         });
       },
@@ -99,7 +103,7 @@ export function usePageActions(
   );
 
   const result: PageAction[] = useMemo(() => {
-    if (shouldHideAllActions) {
+    if (shouldHideAllActions && !actions?.length) {
       return [];
     }
 
@@ -131,10 +135,12 @@ export function usePageActions(
             }
             const text = await result.text();
             ClipboardService.copyCustom(text);
-            telemetry.sendPageActionsButtonClickedMessage({
-              ...createPageActionResource(pageSlug, pageUrl),
-              action_type: 'copy',
-            });
+            telemetry.sendPageActionsButtonClickedMessage([
+              {
+                ...createPageActionResource(pageSlug, pageUrl),
+                action_type: 'copy',
+              },
+            ]);
           } catch (error) {
             console.error(error);
           }
@@ -148,10 +154,13 @@ export function usePageActions(
         iconComponent: MarkdownFullIcon,
         link: mdPageUrl,
         onClick: () => {
-          telemetry.sendPageActionsButtonClickedMessage({
-            ...createPageActionResource(pageSlug, pageUrl),
-            action_type: 'view',
-          });
+          telemetry.sendPageActionsButtonClickedMessage([
+            {
+              ...createPageActionResource(pageSlug, pageUrl),
+              action_type: 'view',
+            },
+          ]);
+          window.location.href = mdPageUrl;
         },
       }),
 
@@ -159,17 +168,21 @@ export function usePageActions(
         if (!isPublic) {
           return null;
         }
+        const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
         return {
           buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
           title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
           description: translate('page.actions.chatGptDescription', 'Get insights from ChatGPT'),
           iconComponent: ChatGptIcon,
-          link: getExternalAiPromptLink('https://chat.openai.com', mdPageUrl),
+          link,
           onClick: () => {
-            telemetry.sendPageActionsButtonClickedMessage({
-              ...createPageActionResource(pageSlug, pageUrl),
-              action_type: 'chatgpt',
-            });
+            telemetry.sendPageActionsButtonClickedMessage([
+              {
+                ...createPageActionResource(pageSlug, pageUrl),
+                action_type: 'chatgpt',
+              },
+            ]);
+            window.location.href = link;
           },
         };
       },
@@ -178,17 +191,43 @@ export function usePageActions(
         if (!isPublic) {
           return null;
         }
+        const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
         return {
           buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
           title: translate('page.actions.claudeTitle', 'Open in Claude'),
           description: translate('page.actions.claudeDescription', 'Get insights from Claude'),
           iconComponent: ClaudeIcon,
-          link: getExternalAiPromptLink('https://claude.ai/new', mdPageUrl),
+          link,
           onClick: () => {
-            telemetry.sendPageActionsButtonClickedMessage({
-              ...createPageActionResource(pageSlug, pageUrl),
-              action_type: 'claude',
-            });
+            telemetry.sendPageActionsButtonClickedMessage([
+              {
+                ...createPageActionResource(pageSlug, pageUrl),
+                action_type: 'claude',
+              },
+            ]);
+            window.location.href = link;
+          },
+        };
+      },
+      'docs-mcp-json': () => {
+        return {
+          buttonText: 'Copy MCP configuration',
+          title: 'Copy MCP JSON configuration',
+          description: 'Copy MCP JSON configuration',
+          iconComponent: CopyIcon,
+          onClick: async () => {
+            ClipboardService.copyCustom(
+              JSON.stringify(
+                {
+                  'mcp-server': {
+                    url: mcpUrl,
+                    description: 'MCP Server',
+                  },
+                },
+                null,
+                2,
+              ),
+            );
           },
         };
       },
@@ -205,6 +244,7 @@ export function usePageActions(
     translate,
     isPublic,
     createMCPHandler,
+    mcpUrl,
     telemetry,
   ]);
 
@@ -280,9 +320,10 @@ function shouldHidePageActions(
   }
 
   // Page is excluded from search
+  const isOpenApiPage =
+    pageProps?.metadata?.type === 'openapi' || pageProps?.metadata?.subType === 'openapi-operation';
   const isPageExcludedFromSearch =
-    pageProps?.frontmatter?.excludeFromSearch ||
-    (pageProps?.metadata?.type === 'openapi' && openapiExcludeFromSearch);
+    pageProps?.frontmatter?.excludeFromSearch || (isOpenApiPage && openapiExcludeFromSearch);
 
   if (isPageExcludedFromSearch) {
     return true;

package/src/core/hooks/use-product-picker.ts

@@ -14,7 +14,7 @@ export function useProductPicker() {
   const loadAndNavigate = useLoadAndNavigate();
   function setProduct(product: typeof currentProduct) {
     if (!product) return;
-    telemetry.sendProductPickedMessage({ product: product.slug });
+    telemetry.sendProductPickedMessage([{ object: 'product', product: product.slug }]);
     if (typeof document === 'undefined') return;
 
     if (product.name) {

package/src/core/hooks/use-unique-svg-ids.ts

@@ -0,0 +1,12 @@
+import { useId } from 'react';
+
+/**
+ * Returns a function that appends a per-component-instance suffix to SVG ids.
+ * This prevents collisions when multiple identical SVGs are rendered on the same page,
+ * which can break `url(#...)` references (gradients, clipPath, masks, filters) on reflow.
+ */
+export function useUniqueSvgIds(): (id: string) => string {
+  const reactId = useId();
+  const safeSuffix = reactId.replace(/:/g, '_');
+  return (id: string): string => `${id}-${safeSuffix}`;
+}

package/src/core/openapi/index.ts

@@ -38,3 +38,4 @@ export { SecurityVariablesEnvSuffix } from '../constants/environments';
 export { isUndefined, isString, isNotNull, isObject } from '../utils/type-guards';
 export { ThemeDataContext, type ThemeDataTransferObject } from '../contexts/ThemeDataContext';
 export { SearchSessionProvider, SearchSessionContext } from '../contexts/SearchContext';
+export { useUniqueSvgIds } from '../hooks/use-unique-svg-ids';

package/src/core/styles/dark.ts

@@ -15,6 +15,8 @@ import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dar
 import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/variables.dark';
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
 import { bannerDarkMode } from '@redocly/theme/components/Banner/variables.dark';
+import { admonitionDarkMode } from '@redocly/theme/components/Admonition/variables.dark';
+import { svgViewerDarkMode } from '@redocly/theme/components/SvgViewer/variables.dark';
 
 const replayDarkMode = css`
   /**
@@ -330,6 +332,8 @@ export const darkMode = css`
   ${pageActionsDarkMode}
   ${tooltipDarkMode}
   ${bannerDarkMode}
+  ${admonitionDarkMode}
+  ${svgViewerDarkMode}
 
   /**
     * @tokens Dark Theme Scrollbar Config

package/src/core/styles/global.ts

@@ -42,6 +42,7 @@ import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
 import { codeWalkthrough } from '@redocly/theme/markdoc/components/CodeWalkthrough/variables';
 import { skipContent } from '@redocly/theme/components/SkipContent/variables';
 import { pageActions } from '@redocly/theme/components/PageActions/variables';
+import { svgViewer } from '@redocly/theme/components/SvgViewer/variables';
 
 import { darkMode } from './dark';
 
@@ -971,23 +972,41 @@ const pages = css`
     */
 
   --page-403-font-family: var(--font-family-base); // @presenter FontFamily
+  --page-403-margin-vertical: var(--spacing-xl); // @presenter Spacing
+  --page-403-margin-horizontal: calc(var(--spacing-xxl) * 2); // @presenter Spacing
+  --page-403-gap: var(--spacing-lg); // @presenter Spacing
+  --page-403-max-width: 680px; // @presenter Width
+
+  --page-403-status-text-color: var(--text-color-helper); // @presenter Color
+  --page-403-status-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-status-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --page-403-status-line-height: var(--line-height-lg); // @presenter LineHeight
+
+  --page-403-title-text-color: var(--text-color-primary); // @presenter Color
+  --page-403-title-font-size: 42px; // @presenter FontSize
+  --page-403-title-font-weight: var(--font-weight-bold); // @presenter FontWeight
+  --page-403-title-line-height: 50px; // @presenter LineHeight
+
+  --page-403-description-text-color: var(--text-color-secondary); // @presenter Color
+  --page-403-description-font-size: var(--font-size-xl); // @presenter FontSize
+  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
+  --page-403-description-line-height: var(--line-height-xl); // @presenter LineHeight
+
+  // @tokens End
+
+  /**
+    * @tokens 403 Page OIDC Forbidden
+    * @presenter Color
+    */
 
-  --page-403-header-text-color: var(--h1-text-color);
+  --page-403-header-text-color: var(--h1-text-color); // @presenter Color
   --page-403-header-font-size: var(--h1-font-size); // @presenter FontSize
   --page-403-header-font-weight: var(--h1-font-weight); // @presenter FontWeight
   --page-403-header-line-height: var(--h1-line-height); // @presenter LineHeight
   --page-403-header-margin: 0; // @presenter Spacing
-
-  --page-403-description-text-color: var(--text-color-secondary);
-  --page-403-description-font-size: 1.5em; // @presenter FontSize
-  --page-403-description-font-weight: var(--font-weight-regular); // @presenter FontWeight
-  --page-403-description-line-height: 1; // @presenter LineHeight
   --page-403-description-margin: 0; // @presenter Spacing
-
-  --page-403-button-margin: 4em; // @presenter Spacing
-
-  --page-403-oidc-description-font-size: var(--font-size-lg);
-  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm);
+  --page-403-oidc-description-font-size: var(--font-size-lg); // @presenter FontSize
+  --page-403-oidc-description-margin: var(--spacing-md) var(--spacing-sm); // @presenter Spacing
 
   // @tokens End
 
@@ -1085,10 +1104,6 @@ const error = css`
 `;
 
 const modal = css`
-  body:has(.scroll-lock) {
-    overflow: hidden;
-  }
-
   --modal-box-shadow: var(--bg-raised-shadow);
   --modal-bg-color: var(--bg-color);
 `;
@@ -1301,6 +1316,7 @@ export const styles = css`
     ${replay}
     ${skipContent}
     ${pageActions}
+    ${svgViewer}
 
     background-color: var(--bg-color);
     color: var(--text-color-primary);

package/src/core/types/catalog.ts

@@ -154,7 +154,7 @@ export type BffCatalogRelatedEntity = {
   key: string;
   title: string;
   summary?: string | null;
-  readonly source: 'api' | 'file';
+  readonly source: 'remote' | 'file';
   relationRole: 'source' | 'target';
   relationType: EntityRelationType;
   sourceFile?: string | null;

package/src/core/types/hooks.ts

@@ -28,6 +28,8 @@ import type {
   SearchFilterItem,
   SearchFacetQuery,
   AiSearchConversationItem,
+  ToolCallName,
+  ContentSegment,
 } from './search';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
@@ -127,6 +129,13 @@ export type ThemeHooks = {
     error: null | AiSearchError;
     conversation: AiSearchConversationItem[];
     setConversation: React.Dispatch<React.SetStateAction<AiSearchConversationItem[]>>;
+    toolCalls: Array<{
+      name: ToolCallName;
+      args: unknown;
+      position: number;
+      result?: { documentCount: number };
+    }>;
+    contentSegments: ContentSegment[];
   };
   useMarkdownText: (text: string) => React.ReactNode;
   useFacetQuery: (field: string) => {
@@ -177,7 +186,26 @@ export type ThemeHooks = {
     | 'startSpan'
     | 'constructCloudEvent'
     | 'sendToOtelService'
-  >;
+  > & {
+    send<TEventType extends AsyncApiRealmUI.EventType>(
+      event: TEventType,
+      data?: AsyncApiRealmUI.EventPayload<TEventType>,
+    ): void;
+    /**
+     * @deprecated This method is deprecated. Use send(event, data) instead.
+     */
+    send<TEventType extends AsyncApiRealmUI.EventType>(
+      params: AsyncApiRealmUI.SendEventParams<TEventType>,
+    ): void;
+  };
+  /**
+   * @deprecated This hook is deprecated. Use `useTelemetry` instead.
+   */
+  useOtelTelemetry: () => {
+    send<TEventType extends AsyncApiRealmUI.EventType>(
+      params: AsyncApiRealmUI.SendEventParams<TEventType>,
+    ): void;
+  };
   useUserTeams: () => string[];
   usePageData: () => PageData | null;
   usePageSharedData: <T = unknown>(dataId: string) => T;

package/src/core/types/l10n.ts

@@ -87,6 +87,7 @@ export type TranslationKey =
   | 'search.ai.newConversation'
   | 'search.ai.backToSearch'
   | 'search.ai.back'
+  | 'search.ai.assistant'
   | 'search.ai.placeholder'
   | 'search.ai.generatingResponse'
   | 'search.ai.followUpQuestion'
@@ -98,6 +99,9 @@ export type TranslationKey =
   | 'search.ai.feedback.title'
   | 'search.ai.feedback.detailsPlaceholder'
   | 'search.ai.feedback.thanks'
+  | 'search.ai.toolResult.found'
+  | 'search.ai.toolResult.found.documents'
+  | 'search.ai.toolCall.searching'
   | 'search.ai.button'
   | 'search.ai.label'
   | 'search.ai.disclaimer'
@@ -116,6 +120,7 @@ export type TranslationKey =
   | 'footer.copyrightText'
   | 'page.homeButton'
   | 'page.forbidden.title'
+  | 'page.forbidden.description'
   | 'page.notFound.title'
   | 'page.notFound.description'
   | 'page.lastUpdated.timeago'
@@ -412,7 +417,13 @@ export type TranslationKey =
   | 'select.noResults'
   | 'loaders.loading'
   | 'filter.dateRange.from'
-  | 'filter.dateRange.to';
+  | 'filter.dateRange.to'
+  | 'mermaid.openFullscreen'
+  | 'mermaid.zoomIn'
+  | 'mermaid.zoomOut'
+  | 'mermaid.reset'
+  | 'mermaid.close'
+  | 'mermaid.viewer';
 
 export type Locale = { code: string; name: string };
 

package/src/core/types/search.ts

@@ -104,10 +104,29 @@ export type SearchAiMessageResource = {
   title: string;
 };
 
+export type ToolCall = {
+  name: ToolCallName;
+  args: unknown;
+  position: number;
+  result?: { documentCount: number };
+};
+
+export type ContentSegment = { type: 'text'; text: string } | { type: 'tool'; toolCall: ToolCall };
+
 export type AiSearchConversationItem = {
   role: AiSearchConversationRole;
   content: string;
   resources?: SearchAiMessageResource[];
   messageId?: string;
   feedback?: FeedbackType;
+  toolCalls?: ToolCall[];
+  contentSegments?: ContentSegment[];
 };
+
+export enum ToolCallName {
+  SearchDocumentation = 'search_documentation',
+  ListApis = 'list-apis',
+  GetEndpoints = 'get-endpoints',
+  GetSecuritySchemes = 'get-security-schemes',
+  GetFullApiDescription = 'get-full-api-description',
+}

package/src/core/utils/content-segments.ts

@@ -0,0 +1,27 @@
+import type { ToolCall, ContentSegment } from '../types/search';
+
+export function splitContentByToolCalls(
+  content: string | undefined,
+  toolCalls: ToolCall[] | undefined,
+): ContentSegment[] {
+  if (!toolCalls || toolCalls.length === 0) {
+    return [{ type: 'text', text: content || '' }];
+  }
+
+  const segments: ContentSegment[] = [];
+  let lastPos = 0;
+
+  for (const toolCall of toolCalls) {
+    if (content && toolCall.position > lastPos) {
+      segments.push({ type: 'text', text: content.substring(lastPos, toolCall.position) });
+    }
+    segments.push({ type: 'tool', toolCall });
+    lastPos = toolCall.position;
+  }
+
+  if (content && lastPos < content.length) {
+    segments.push({ type: 'text', text: content.substring(lastPos) });
+  }
+
+  return segments;
+}

package/src/core/utils/index.ts

@@ -43,3 +43,4 @@ export * from './get-operation-color';
 export * from './frontmatter-translate';
 export * from './transform-revisions-to-version-history';
 export * from './build-revision-url';
+export * from './content-segments';

package/src/core/utils/transform-revisions-to-version-history.ts

@@ -8,72 +8,6 @@ import { VERSION_NOT_SPECIFIED } from '@redocly/theme/core/constants';
 
 import { toLocalizedShortDate, toLocalizedShortDateTime } from './date';
 
-function compareVersionsDescending(versionA: string, versionB: string): number {
-  return versionB.localeCompare(versionA, undefined, { numeric: true });
-}
-
-function extractGroupComparisonData(group: CatalogEntityVersionHistoryGroup): {
-  version: string;
-  isNotSpecified: boolean;
-  time: number;
-  hasCurrent: boolean;
-} {
-  const version = group.version;
-  const isNotSpecified = version === VERSION_NOT_SPECIFIED;
-
-  // Get version dates (oldest revision date for each group - the version's creation date)
-  // This ensures versions stay in their original order even when new revisions are added
-  const date =
-    group.singleRevisionDate ||
-    (group.revisions && group.revisions.length > 0
-      ? group.revisions[group.revisions.length - 1]?.revisionDate
-      : undefined) ||
-    '';
-  const time = date ? new Date(date).getTime() : 0;
-
-  const hasCurrent = group.hasCurrentRevisionFromBackend ?? false;
-
-  return { version, isNotSpecified, time, hasCurrent };
-}
-
-function compareVersionGroupsDescending(
-  groupA: CatalogEntityVersionHistoryGroup,
-  groupB: CatalogEntityVersionHistoryGroup,
-): number {
-  const {
-    version: versionA,
-    isNotSpecified: isNotSpecifiedA,
-    time: timeA,
-    hasCurrent: hasCurrentA,
-  } = extractGroupComparisonData(groupA);
-  const {
-    version: versionB,
-    isNotSpecified: isNotSpecifiedB,
-    time: timeB,
-    hasCurrent: hasCurrentB,
-  } = extractGroupComparisonData(groupB);
-
-  // First, compare by version date (oldest first, so most recent versions come first)
-  const dateComparison = timeB - timeA;
-  if (dateComparison !== 0) {
-    return dateComparison;
-  }
-
-  // If dates are equal, prioritize the one with isCurrent from backend
-  if (hasCurrentA !== hasCurrentB) {
-    return hasCurrentB ? 1 : -1; // hasCurrentB comes first if true
-  }
-
-  // If both have same isCurrent status, compare by version
-  // If both are unknown or both are real versions, compare by version
-  if (isNotSpecifiedA === isNotSpecifiedB) {
-    return compareVersionsDescending(versionA, versionB);
-  }
-
-  // If one is unknown and one is a real version, unknown comes last
-  return isNotSpecifiedA ? 1 : -1;
-}
-
 export type TransformRevisionsToVersionHistoryParams = {
   revisions: BffCatalogEntityRevision[];
   currentRevisionDate?: string;
@@ -100,13 +34,7 @@ export function transformRevisionsToVersionHistory({
   });
 
   const versionGroups = Array.from(versionMap.entries()).map(([version, versionRevisions]) => {
-    const sortedRevisions = [...versionRevisions].sort((a, b) => {
-      const dateA = a.revision ? new Date(a.revision).getTime() : 0;
-      const dateB = b.revision ? new Date(b.revision).getTime() : 0;
-      return dateB - dateA;
-    });
-
-    const latestRevision = sortedRevisions[0];
+    const latestRevision = versionRevisions[0];
 
     const versionMatches =
       normalizedCurrentVersion === undefined || normalizedCurrentVersion === version;
@@ -114,7 +42,7 @@ export function transformRevisionsToVersionHistory({
     let isCurrent: boolean;
     if (currentRevisionDate !== undefined) {
       // Check if revision matches AND version matches
-      const revisionMatches = sortedRevisions.some((rev) => rev.revision === currentRevisionDate);
+      const revisionMatches = versionRevisions.some((rev) => rev.revision === currentRevisionDate);
       isCurrent = revisionMatches && versionMatches;
     } else {
       // When no revision is specified, use isCurrent flag from the latest revision
@@ -123,11 +51,11 @@ export function transformRevisionsToVersionHistory({
     }
 
     // Check if any revision in this version group is the default version
-    const isDefaultVersion = sortedRevisions.some((rev) => rev.isDefaultVersion === true);
+    const isDefaultVersion = versionRevisions.some((rev) => rev.isDefaultVersion === true);
 
     const revisions =
-      sortedRevisions.length > 1
-        ? sortedRevisions.map((rev, index): CatalogEntityRevision => {
+      versionRevisions.length > 1
+        ? versionRevisions.map((rev, index): CatalogEntityRevision => {
             const revisionMatches = currentRevisionDate
               ? rev.revision === currentRevisionDate
               : false;
@@ -138,7 +66,7 @@ export function transformRevisionsToVersionHistory({
               index === 0 &&
               isCurrent;
             return {
-              name: `r.${sortedRevisions.length - index}`,
+              name: `r.${versionRevisions.length - index}`,
               date: toLocalizedShortDateTime(rev.revision, locale),
               revisionDate: rev.revision,
               isActive: isActiveRevision || isCurrentByDefault,
@@ -155,9 +83,9 @@ export function transformRevisionsToVersionHistory({
       hasCurrentRevisionFromBackend: latestRevision?.isCurrent ?? false,
       isDefaultVersion,
       revisions,
-      singleRevisionDate: sortedRevisions.length === 1 ? sortedRevisions[0]?.revision : undefined,
+      singleRevisionDate: versionRevisions.length === 1 ? versionRevisions[0]?.revision : undefined,
     };
   });
 
-  return versionGroups.sort(compareVersionGroupsDescending);
+  return versionGroups;
 }

package/src/ext/process-scorecard.ts

@@ -0,0 +1,14 @@
+import { useCallback } from 'react';
+
+import type { CatalogItem } from '@redocly/theme';
+
+export function useProcessScorecard(): {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  processScorecard: <T = any>(scorecard: T, api: CatalogItem) => T;
+  processInfo: <T>(info: T) => T;
+} {
+  return {
+    processScorecard: useCallback((scorecard) => scorecard, []),
+    processInfo: useCallback((info) => info, []),
+  };
+}

package/src/icons/FitToViewIcon/FitToViewIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M1 1H5V2.5H2.5V5H1V1Z" />
+    <path d="M15 1H11V2.5H13.5V5H15V1Z" />
+    <path d="M1 15H5V13.5H2.5V11H1V15Z" />
+    <path d="M15 15H11V13.5H13.5V11H15V15Z" />
+  </svg>
+);
+
+export const FitToViewIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/FitToViewIcon/FitToViewIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/WarningCycleIcon/WarningCycleIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M9 1.125C7.44248 1.125 5.91992 1.58686 4.62489 2.45218C3.32985 3.31749 2.32049 4.5474 1.72445 5.98637C1.12841 7.42534 0.972461 9.00874 1.27632 10.5363C1.58018 12.0639 2.3302 13.4671 3.43154 14.5685C4.53288 15.6698 5.93607 16.4198 7.46367 16.7237C8.99127 17.0275 10.5747 16.8716 12.0136 16.2756C13.4526 15.6795 14.6825 14.6702 15.5478 13.3751C16.4131 12.0801 16.875 10.5575 16.875 9C16.875 6.91142 16.0453 4.90838 14.5685 3.43153C13.0916 1.95469 11.0886 1.125 9 1.125ZM9 15.75C7.66498 15.75 6.35994 15.3541 5.2499 14.6124C4.13987 13.8707 3.27471 12.8165 2.76382 11.5831C2.25293 10.3497 2.11925 8.99251 2.3797 7.68314C2.64015 6.37377 3.28303 5.17103 4.22703 4.22703C5.17104 3.28302 6.37377 2.64015 7.68314 2.3797C8.99252 2.11925 10.3497 2.25292 11.5831 2.76381C12.8165 3.2747 13.8707 4.13987 14.6124 5.2499C15.3541 6.35993 15.75 7.66498 15.75 9C15.75 10.7902 15.0388 12.5071 13.773 13.773C12.5071 15.0388 10.7902 15.75 9 15.75Z" />
+    <path d="M9.5625 4.5H8.4375V10.6875H9.5625V4.5Z" />
+    <path d="M9 12.375C8.83313 12.375 8.67 12.4245 8.53124 12.5172C8.39249 12.6099 8.28434 12.7417 8.22048 12.8959C8.15662 13.05 8.13991 13.2197 8.17247 13.3834C8.20502 13.547 8.28538 13.6974 8.40338 13.8154C8.52138 13.9334 8.67172 14.0137 8.8354 14.0463C8.99907 14.0788 9.16872 14.0621 9.32289 13.9983C9.47707 13.9344 9.60884 13.8263 9.70156 13.6875C9.79427 13.5488 9.84375 13.3856 9.84375 13.2188C9.84375 12.995 9.75486 12.7804 9.59662 12.6221C9.43839 12.4639 9.22378 12.375 9 12.375Z" />
+  </svg>
+);
+
+export const WarningCycleIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/WarningCycleIcon/WarningCycleIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;