@redocly/theme 0.70.0-next.8 → 0.70.0

package/src/core/constants/prompt.ts

@@ -0,0 +1,34 @@
+import type { AiPromptActionOption, AiPromptTarget } from '../types/prompt';
+
+export const PROMPT_TAG = 'prompt';
+
+export const AI_PROMPT_TARGETS = Object.freeze({
+  CURSOR: 'cursor',
+  CLAUDE: 'claude',
+  CHATGPT: 'chatgpt',
+} as const);
+
+/* Block width, not viewport width: a prompt in a narrow desktop column stacks like one on a
+   phone. The viewport `breakpoints` in core/utils/media-css.ts do not apply here. */
+export const PROMPT_NARROW_BLOCK_MAX_WIDTH = '440px';
+
+export const AI_PROMPT_ACTION_OPTIONS: Record<AiPromptTarget, AiPromptActionOption> = {
+  cursor: {
+    titleTranslationKey: 'promptTag.openIn.cursor',
+    titleDefault: 'Open in Cursor',
+    descriptionTranslationKey: 'promptTag.openIn.cursorDescription',
+    descriptionDefault: 'Send this prompt to Cursor',
+  },
+  claude: {
+    titleTranslationKey: 'promptTag.openIn.claude',
+    titleDefault: 'Open in Claude',
+    descriptionTranslationKey: 'promptTag.openIn.claudeDescription',
+    descriptionDefault: 'Send this prompt to Claude',
+  },
+  chatgpt: {
+    titleTranslationKey: 'promptTag.openIn.chatgpt',
+    titleDefault: 'Open in ChatGPT',
+    descriptionTranslationKey: 'promptTag.openIn.chatgptDescription',
+    descriptionDefault: 'Send this prompt to ChatGPT',
+  },
+};

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

@@ -30,3 +30,6 @@ export * from './use-element-size';
 export * from './use-time-ago';
 export * from './use-input-key-commands';
 export * from '../use-tooltip-fallback-placement';
+export * from '../use-pointer-border-highlight';
+export * from '../prompt/use-prompt-text-limit';
+export * from '../prompt/use-prompt-actions';

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

@@ -17,6 +17,8 @@ export const useThemeHooks = vi.fn(() => ({
     sendCodeSnippetReportedMessage: vi.fn(),
     sendConnectMcpClickedMessage: vi.fn(),
     sendMcpConnectionSnippetCopiedMessage: vi.fn(),
+    sendPromptTagCopiedMessage: vi.fn(),
+    sendPromptTagOpenedMessage: vi.fn(),
     sendPageActionsButtonClickedMessage: vi.fn(),
     sendColorModeSwitchedMessage: vi.fn(),
     sendConsentChangedMessage: vi.fn(),

package/src/core/hooks/index.ts

@@ -62,3 +62,6 @@ export * from './use-banner-telemetry';
 export * from './use-tooltip-fallback-placement';
 export * from './use-anchor-positioning';
 export * from './use-scroll-item-into-view';
+export * from './use-pointer-border-highlight';
+export * from './prompt/use-prompt-text-limit';
+export * from './prompt/use-prompt-actions';

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

@@ -0,0 +1,28 @@
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
+import type { AiPromptTarget } from '../../types/prompt';
+
+import { useThemeHooks } from '../use-theme-hooks';
+import { getAiPromptLink } from '../../utils/get-ai-prompt-link';
+import { getBaseDataAttributes } from '../../utils/telemetry/get-base-data-attributes';
+
+type PromptTagData = Parameters<AsyncApiRealmUI.Telemetry['sendPromptTagCopiedMessage']>[0][0];
+
+export type PromptActionHandlers = {
+  reportCopy: () => void;
+  /** Opens the prompt in the AI tool and reports it. */
+  openIn: (target: AiPromptTarget) => void;
+};
+
+export function usePromptActions(prompt: string): PromptActionHandlers {
+  const { useTelemetry } = useThemeHooks();
+  const telemetry = useTelemetry();
+  const tagData: PromptTagData = getBaseDataAttributes('prompt', 'markdocTag');
+
+  return {
+    reportCopy: () => telemetry.sendPromptTagCopiedMessage([tagData]),
+    openIn: (target) => {
+      telemetry.sendPromptTagOpenedMessage([{ ...tagData, target }]);
+      window.open(getAiPromptLink(target, prompt), '_blank', 'noopener,noreferrer');
+    },
+  };
+}

package/src/core/hooks/prompt/use-prompt-text-limit.ts

@@ -0,0 +1,59 @@
+import { useLayoutEffect, useRef, useState } from 'react';
+
+import type { RefObject } from 'react';
+
+export type PromptTextLimit = 'none' | 'oneLine' | 'maxLines';
+
+export type UsePromptTextLimitParams = {
+  prompt: string;
+  singleLine: boolean;
+  isPromptVisible: boolean;
+};
+
+export type PromptTextLimitState = {
+  textRef: RefObject<HTMLDivElement | null>;
+  textLimit: PromptTextLimit;
+  isExpanded: boolean;
+  hasHiddenText: boolean;
+  toggleExpanded: () => void;
+};
+
+/**
+ * Tracks the line limit of the prompt text (one line or the maximum lines) and whether the
+ * reader expanded it. `hasHiddenText` is true only when the limit hides some text.
+ */
+export function usePromptTextLimit({
+  prompt,
+  singleLine,
+  isPromptVisible,
+}: UsePromptTextLimitParams): PromptTextLimitState {
+  const textRef = useRef<HTMLDivElement>(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [hasHiddenText, setHasHiddenText] = useState(false);
+
+  /* The text mounts late with hidePrompt and re-wraps on resize, so the observer is
+     attached each time the text (re)appears. */
+  useLayoutEffect(() => {
+    const text = textRef.current;
+    if (!text || isExpanded) return;
+
+    const measure = () =>
+      setHasHiddenText(
+        text.scrollHeight > text.clientHeight || text.scrollWidth > text.clientWidth,
+      );
+    measure();
+
+    if (typeof ResizeObserver === 'undefined') return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(text);
+    return () => observer.disconnect();
+  }, [prompt, singleLine, isExpanded, isPromptVisible]);
+
+  return {
+    textRef,
+    textLimit: isExpanded ? 'none' : singleLine ? 'oneLine' : 'maxLines',
+    isExpanded,
+    hasHiddenText,
+    toggleExpanded: () => setIsExpanded((expanded) => !expanded),
+  };
+}

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

@@ -23,6 +23,7 @@ import {
   withoutPathPrefix,
 } from '../utils/urls';
 import { getBaseDataAttributes } from '../utils/telemetry/get-base-data-attributes';
+import { getAiPromptLink } from '../utils/get-ai-prompt-link';
 
 const DEFAULT_ENABLED_ACTIONS = [
   'copy',
@@ -112,6 +113,7 @@ export function usePageActions(
     const mdPageUrl = isRoot
       ? combineUrls(origin, pathname, 'index.html.md')
       : combineUrls(origin, removeTrailingSlash(pathname) + '.md');
+    const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
 
     const actionHandlers: Record<PageActionType, () => PageAction> = {
       'docs-mcp-cursor': createMCPHandler('cursor', false),
@@ -162,7 +164,7 @@ export function usePageActions(
       }),
 
       chatgpt: () => {
-        const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
+        const link = getAiPromptLink('chatgpt', externalAiPrompt);
         return {
           buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
           title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
@@ -182,7 +184,7 @@ export function usePageActions(
       },
 
       claude: () => {
-        const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
+        const link = getAiPromptLink('claude', externalAiPrompt);
         return {
           buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
           title: translate('page.actions.claudeTitle', 'Open in Claude'),
@@ -223,13 +225,6 @@ export function usePageActions(
   return result;
 }
 
-function getExternalAiPromptLink(baseUrl: string, mdPageUrl: string): string {
-  const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-  const url = new URL(baseUrl);
-  url.searchParams.set('q', externalAiPrompt);
-  return url.toString();
-}
-
 type CreateMCPActionParams = {
   clientType: MCPClientType;
   mcpConfig: McpConnectionParams;

package/src/core/hooks/use-pointer-border-highlight.ts

@@ -0,0 +1,46 @@
+import { useCallback, useRef } from 'react';
+
+import type { PointerEvent, RefObject } from 'react';
+
+const EDGE_PROXIMITY_DISTANCE = 80;
+
+export type PointerBorderHighlight<T extends HTMLElement> = {
+  ref: RefObject<T | null>;
+  onPointerMove: (event: PointerEvent<T>) => void;
+  onPointerLeave: () => void;
+};
+
+/* Writes `--pointer-x`, `--pointer-y` and `--pointer-edge-proximity` (1 at the border, 0 at
+   `distance` px inside) to the element's inline style, so the highlight moves without re-renders. */
+export function usePointerBorderHighlight<T extends HTMLElement>(
+  distance = EDGE_PROXIMITY_DISTANCE,
+): PointerBorderHighlight<T> {
+  const ref = useRef<T | null>(null);
+
+  const onPointerMove = useCallback(
+    (event: PointerEvent<T>) => {
+      const element = ref.current;
+      if (!element) return;
+
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const edgeDistance = Math.min(x, y, rect.width - x, rect.height - y);
+      const proximity = Math.min(1, Math.max(0, 1 - edgeDistance / distance));
+
+      element.style.setProperty('--pointer-x', `${x}px`);
+      element.style.setProperty('--pointer-y', `${y}px`);
+      element.style.setProperty(
+        '--pointer-edge-proximity',
+        String(Math.round(proximity * 100) / 100),
+      );
+    },
+    [distance],
+  );
+
+  const onPointerLeave = useCallback(() => {
+    ref.current?.style.setProperty('--pointer-edge-proximity', '0');
+  }, []);
+
+  return { ref, onPointerMove, onPointerLeave };
+}

package/src/core/hooks/use-telemetry-fallback.ts

@@ -38,6 +38,8 @@ export const useTelemetryFallback = () => ({
   sendCodeSnippetReportedMessage: () => {},
   sendConnectMcpClickedMessage: () => {},
   sendMcpConnectionSnippetCopiedMessage: () => {},
+  sendPromptTagCopiedMessage: () => {},
+  sendPromptTagOpenedMessage: () => {},
   sendMobileMenuClosedMessage: () => {},
   sendMobileMenuOpenedMessage: () => {},
   sendPageViewedMessage: () => {},

package/src/core/styles/dark.ts

@@ -10,6 +10,7 @@ import { tagDarkMode } from '@redocly/theme/components/Tag/variables.dark';
 import { statusCodeDarkMode } from '@redocly/theme/components/StatusCode/variables.dark';
 import { switcherDarkMode } from '@redocly/theme/components/Switch/variables.dark';
 import { cardsDarkMode } from '@redocly/theme/markdoc/components/Cards/variables.dark';
+import { promptTagDarkMode } from '@redocly/theme/markdoc/components/Prompt/variables.dark';
 import { catalogDarkMode } from '@redocly/theme/components/Catalog/variables.dark';
 import { pageActionsDarkMode } from '@redocly/theme/components/PageActions/variables.dark';
 import { tooltipDarkMode } from '@redocly/theme/components/Tooltip/variables.dark';
@@ -357,6 +358,7 @@ export const darkMode = css`
   ${replayDarkMode}
   ${switcherDarkMode}
   ${cardsDarkMode}
+  ${promptTagDarkMode}
   ${catalogDarkMode}
   ${pageActionsDarkMode}
   ${tooltipDarkMode}

package/src/core/styles/global.ts

@@ -43,6 +43,7 @@ import { versionPicker } from '@redocly/theme/components/VersionPicker/variables
 import { datePicker } from '@redocly/theme/components/DatePicker/variables'
 import { switcher } from '@redocly/theme/components/Switch/variables';
 import { cards } from '@redocly/theme/markdoc/components/Cards/variables';
+import { promptTag } from '@redocly/theme/markdoc/components/Prompt/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';
@@ -872,46 +873,6 @@ const loadProgressBar = css`
   --load-progress-bar-height: 2px; // @presenter Height
 
   // @tokens End
-
-  /* Make clicks pass-through */
-  #nprogress {
-    pointer-events: none;
-  }
-
-  #nprogress .bar {
-    background: var(--load-progress-bar-color);
-
-    position: fixed;
-    z-index: var(--z-index-popover);
-    top: 0;
-    left: 0;
-
-    width: 100%;
-    height: var(--load-progress-bar-height);
-  }
-
-  #nprogress .peg {
-    display: block;
-    position: absolute;
-    right: 0;
-    width: 100px;
-    height: 100%;
-    box-shadow: var(--load-progress-bar-shadow);
-    opacity: 1;
-
-    -webkit-transform: rotate(3deg) translate(0px, -4px);
-    -ms-transform: rotate(3deg) translate(0px, -4px);
-    transform: rotate(3deg) translate(0px, -4px);
-  }
-
-  .nprogress-custom-parent {
-    overflow: hidden;
-    position: relative;
-  }
-
-  .nprogress-custom-parent #nprogress .bar {
-    position: absolute;
-  }
 `;
 
 const inputs = css`
@@ -1345,6 +1306,7 @@ export const tokens = css`
   ${aiAssistantButton}
   ${connectMcpButton}
   ${cards}
+  ${promptTag}
   ${catalog}
   ${catalogClassic}
   ${code}

package/src/core/types/index.ts

@@ -26,3 +26,4 @@ export type * from './toast';
 export type * from './link';
 export type * from './button-group';
 export type * from './dropdown';
+export type * from './prompt';

package/src/core/types/l10n.ts

@@ -310,6 +310,17 @@ export type TranslationKey =
   | 'page.actions.connectMcp.copyConfigDescription'
   | 'page.actions.connectMcp.moreOptions'
   | 'page.actions.moreActions'
+  | 'promptTag.copy.buttonText'
+  | 'promptTag.showPrompt'
+  | 'promptTag.hidePrompt'
+  | 'promptTag.showFullPrompt'
+  | 'promptTag.showLess'
+  | 'promptTag.openIn.cursor'
+  | 'promptTag.openIn.cursorDescription'
+  | 'promptTag.openIn.claude'
+  | 'promptTag.openIn.claudeDescription'
+  | 'promptTag.openIn.chatgpt'
+  | 'promptTag.openIn.chatgptDescription'
   | 'openapi.download.description.title'
   | 'openapi.info.title'
   | 'openapi.info.contact.url'

package/src/core/types/prompt.ts

@@ -0,0 +1,11 @@
+import type { AI_PROMPT_TARGETS } from '../constants/prompt';
+import type { TranslationKey } from './l10n';
+
+export type AiPromptTarget = (typeof AI_PROMPT_TARGETS)[keyof typeof AI_PROMPT_TARGETS];
+
+export type AiPromptActionOption = {
+  titleTranslationKey: TranslationKey;
+  titleDefault: string;
+  descriptionTranslationKey: TranslationKey;
+  descriptionDefault: string;
+};

package/src/core/utils/get-ai-prompt-link.ts

@@ -0,0 +1,30 @@
+import type { AiPromptTarget } from '../types/prompt';
+
+type AiPromptEndpoint = { baseUrl: string; queryParam: string };
+
+const AI_PROMPT_ENDPOINTS: Record<AiPromptTarget, AiPromptEndpoint> = {
+  chatgpt: { baseUrl: 'https://chat.openai.com', queryParam: 'q' },
+  claude: { baseUrl: 'https://claude.ai/new', queryParam: 'q' },
+  // Encoding: https://cursor.com/docs/integrations/deeplinks
+  cursor: { baseUrl: 'https://cursor.com/link/prompt', queryParam: 'text' },
+};
+
+/**
+ * Builds a link that opens an AI tool with the prompt prefilled.
+ *
+ * @param target - The AI tool to open.
+ * @param prompt - The plain-text prompt to prefill.
+ * @returns The absolute URL with the encoded prompt in the query string.
+ *
+ * @example
+ * ```ts
+ * getAiPromptLink('claude', 'Summarize this page');
+ * // 'https://claude.ai/new?q=Summarize+this+page'
+ * ```
+ */
+export function getAiPromptLink(target: AiPromptTarget, prompt: string): string {
+  const { baseUrl, queryParam } = AI_PROMPT_ENDPOINTS[target];
+  const url = new URL(baseUrl);
+  url.searchParams.set(queryParam, prompt);
+  return url.toString();
+}

package/src/core/utils/index.ts

@@ -53,3 +53,4 @@ export * from './RenderWithLink';
 export * from './consent-settings-link-placement';
 export * from './assign-ref';
 export * from './dropdown';
+export * from './get-ai-prompt-link';

package/src/core/utils/urls.ts

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

package/src/core/utils/with-load-progress.ts

@@ -1,25 +1,30 @@
-import nprogress from 'nprogress';
+let latestLoad: symbol | null = null;
+const listeners = new Set<() => void>();
 
-nprogress.configure({
-  trickleSpeed: 100,
-  template: '<div class="bar" role="bar"><div class="peg"></div></div>',
-});
-
-// Only the last caller should be able to call nprogress.done()
-let lastCalledBy: symbol;
+function setLatestLoad(load: symbol | null): void {
+  latestLoad = load;
+  // e2e suites wait for this class, named after the progress library it replaced, to clear.
+  document.documentElement.classList.toggle('nprogress-busy', load !== null);
+  listeners.forEach((listener) => listener());
+}
 
+/** Shows the load progress bar until the most recent `withLoadProgress` load settles. */
 export async function withLoadProgress<T>(loadTarget: Promise<T>): Promise<T> {
-  const callIdentifier = Symbol();
-  lastCalledBy = callIdentifier;
-
-  // Cancel any existing progress and restart
-  nprogress.done();
-  nprogress.start();
+  const load = Symbol();
+  setLatestLoad(load);
 
   return loadTarget.finally(() => {
-    if (lastCalledBy === callIdentifier) {
-      nprogress.done();
-      nprogress.remove();
-    }
+    if (latestLoad === load) setLatestLoad(null);
   });
 }
+
+export function subscribeToLoadProgress(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function isLoadInProgress(): boolean {
+  return latestLoad !== null;
+}

package/src/ext/configure.ts

@@ -1,6 +1,6 @@
 import type { UserClaims, OpenAPIServer } from '@redocly/theme/core/types';
 
-export * from '@redocly/theme/ext/configure-helpers';
+export type * from '@redocly/theme/ext/configure-helpers';
 export * from '@redocly/theme/ext/helpers/is-direct-configure-request-values';
 
 import type {

package/src/icons/LinkIcon/LinkIconSymbol.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const LINK_ICON_SYMBOL_ID = 'redocly-link-icon';
+
+/**
+ * The link icon drawing as a hidden SVG symbol, which every `SharedLinkIcon` refers to. Render it
+ * once per page that shows a `SharedLinkIcon`; without it the icon is empty.
+ */
+export function LinkIconSymbol(): JSX.Element {
+  return (
+    <svg
+      data-component-name="icons/LinkIcon/LinkIconSymbol"
+      display="none"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <symbol id={LINK_ICON_SYMBOL_ID} viewBox="0 0 20 20">
+        <path
+          d="M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z"
+          fill="var(--link-icon-bg-color, var(--layer-color))"
+        />
+        <path d="M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z" />
+      </symbol>
+    </svg>
+  );
+}
+
+/**
+ * `LinkIcon` drawn from the page's `LinkIconSymbol`, so a page with many of them carries one copy.
+ * `color` fills the glyph; `--link-icon-bg-color` overrides the background.
+ */
+export function SharedLinkIcon({ color, size = '20px', ...props }: IconProps): JSX.Element {
+  return (
+    <svg
+      data-component-name="icons/LinkIcon/SharedLinkIcon"
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill={getCssColorVariable(color)}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <use href={`#${LINK_ICON_SYMBOL_ID}`} />
+    </svg>
+  );
+}

package/src/index.ts

@@ -256,6 +256,7 @@ export * from '@redocly/theme/icons/MoonIcon/MoonIcon';
 export * from '@redocly/theme/icons/SunIcon/SunIcon';
 export * from '@redocly/theme/icons/ContrastIcon/ContrastIcon';
 export * from '@redocly/theme/icons/LinkIcon/LinkIcon';
+export * from '@redocly/theme/icons/LinkIcon/LinkIconSymbol';
 export * from '@redocly/theme/icons/LaunchIcon/LaunchIcon';
 export * from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
 export * from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';

package/src/markdoc/components/Cards/Card.tsx

@@ -276,7 +276,7 @@ const CardWrapper = styled.div.attrs<{
 `;
 
 const getCardWrapperClass = ($isCardLink: boolean, $variant?: string) => {
-  let classes = [];
+  const classes = [];
 
   classes.push(`card-variant-${$variant}`);