@redocly/theme 0.70.0-next.8 → 0.70.0

package/lib/components/LoadProgressBar/LoadProgressBar.d.ts

@@ -0,0 +1,8 @@
+import type { JSX } from 'react';
+export type LoadProgressBarProps = {
+    /** Also shows the bar while the host's own navigation is pending. */
+    pending?: boolean;
+    className?: string;
+};
+/** A top-of-page bar while a page load is pending. */
+export declare function LoadProgressBar({ pending, className, }: LoadProgressBarProps): JSX.Element | null;

package/lib/components/LoadProgressBar/LoadProgressBar.js

@@ -0,0 +1,122 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadProgressBar = LoadProgressBar;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const START = 0.08;
+const MAX_PENDING = 0.994;
+const TRICKLE_MS = 100;
+const SETTLE_MS = 200;
+// [below, step]: large steps at first, smaller ones near the end.
+const TRICKLE_STEPS = [
+    [0.2, 0.1],
+    [0.5, 0.04],
+    [0.8, 0.02],
+    [0.99, 0.005],
+];
+function trickle(progress) {
+    var _a;
+    var _b;
+    const step = (_b = (_a = TRICKLE_STEPS.find(([below]) => progress < below)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : 0;
+    return Math.min(progress + step, MAX_PENDING);
+}
+/** A top-of-page bar while a page load is pending. */
+function LoadProgressBar({ pending = false, className, }) {
+    const loading = (0, react_1.useSyncExternalStore)(utils_1.subscribeToLoadProgress, utils_1.isLoadInProgress, () => false);
+    const active = pending || loading;
+    const [progress, setProgress] = (0, react_1.useState)(null);
+    const [fading, setFading] = (0, react_1.useState)(false);
+    const shown = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (active) {
+            shown.current = true;
+            setFading(false);
+            setProgress((current) => (current === null || current === 1 ? START : current));
+            const timer = setInterval(() => setProgress((current) => trickle(current !== null && current !== void 0 ? current : START)), TRICKLE_MS);
+            return () => clearInterval(timer);
+        }
+        if (!shown.current)
+            return undefined;
+        setProgress(1);
+        const fade = setTimeout(() => setFading(true), SETTLE_MS);
+        const hide = setTimeout(() => {
+            shown.current = false;
+            setProgress(null);
+            setFading(false);
+        }, SETTLE_MS * 2);
+        return () => {
+            clearTimeout(fade);
+            clearTimeout(hide);
+        };
+    }, [active]);
+    if (progress === null)
+        return null;
+    // The id and class names come from the replaced nprogress library: custom styles target them.
+    return (react_1.default.createElement(LoadProgressBarWrapper, { id: "nprogress", "data-component-name": "LoadProgressBar/LoadProgressBar", className: className, "aria-hidden": "true", $fading: fading },
+        react_1.default.createElement(Bar, { className: "bar", $progress: progress },
+            react_1.default.createElement(Peg, { className: "peg" }))));
+}
+const LoadProgressBarWrapper = styled_components_1.default.div `
+  pointer-events: none;
+  opacity: ${({ $fading }) => ($fading ? 0 : 1)};
+  transition: opacity ${SETTLE_MS}ms linear;
+`;
+// The offset changes on each tick: as a styled rule, each value would add a class.
+const Bar = styled_components_1.default.div.attrs(({ $progress }) => ({
+    style: { transform: `translate3d(${($progress - 1) * 100}%, 0, 0)` },
+})) `
+  position: fixed;
+  z-index: var(--z-index-popover);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: var(--load-progress-bar-height);
+  background: var(--load-progress-bar-color);
+  transition: transform ${SETTLE_MS}ms ease;
+`;
+const Peg = styled_components_1.default.div `
+  position: absolute;
+  right: 0;
+  width: 100px;
+  height: 100%;
+  box-shadow: var(--load-progress-bar-shadow);
+  transform: rotate(3deg) translate(0, -4px);
+`;
+//# sourceMappingURL=LoadProgressBar.js.map

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

@@ -11,3 +11,4 @@ export * from './feedback';
 export * from './heading';
 export * from './markdown';
 export * from './consent';
+export * from './prompt';

package/lib/core/constants/index.js

@@ -27,4 +27,5 @@ __exportStar(require("./feedback"), exports);
 __exportStar(require("./heading"), exports);
 __exportStar(require("./markdown"), exports);
 __exportStar(require("./consent"), exports);
+__exportStar(require("./prompt"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/constants/prompt.d.ts

@@ -0,0 +1,9 @@
+import type { AiPromptActionOption, AiPromptTarget } from '../types/prompt';
+export declare const PROMPT_TAG = "prompt";
+export declare const AI_PROMPT_TARGETS: Readonly<{
+    readonly CURSOR: 'cursor';
+    readonly CLAUDE: 'claude';
+    readonly CHATGPT: 'chatgpt';
+}>;
+export declare const PROMPT_NARROW_BLOCK_MAX_WIDTH = "440px";
+export declare const AI_PROMPT_ACTION_OPTIONS: Record<AiPromptTarget, AiPromptActionOption>;

package/lib/core/constants/prompt.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AI_PROMPT_ACTION_OPTIONS = exports.PROMPT_NARROW_BLOCK_MAX_WIDTH = exports.AI_PROMPT_TARGETS = exports.PROMPT_TAG = void 0;
+exports.PROMPT_TAG = 'prompt';
+exports.AI_PROMPT_TARGETS = Object.freeze({
+    CURSOR: 'cursor',
+    CLAUDE: 'claude',
+    CHATGPT: 'chatgpt',
+});
+/* 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. */
+exports.PROMPT_NARROW_BLOCK_MAX_WIDTH = '440px';
+exports.AI_PROMPT_ACTION_OPTIONS = {
+    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',
+    },
+};
+//# sourceMappingURL=prompt.js.map

package/lib/core/hooks/index.d.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/lib/core/hooks/index.js

@@ -78,4 +78,7 @@ __exportStar(require("./use-banner-telemetry"), exports);
 __exportStar(require("./use-tooltip-fallback-placement"), exports);
 __exportStar(require("./use-anchor-positioning"), exports);
 __exportStar(require("./use-scroll-item-into-view"), exports);
+__exportStar(require("./use-pointer-border-highlight"), exports);
+__exportStar(require("./prompt/use-prompt-text-limit"), exports);
+__exportStar(require("./prompt/use-prompt-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/core/hooks/prompt/use-prompt-actions.d.ts

@@ -0,0 +1,7 @@
+import type { AiPromptTarget } from '../../types/prompt';
+export type PromptActionHandlers = {
+    reportCopy: () => void;
+    /** Opens the prompt in the AI tool and reports it. */
+    openIn: (target: AiPromptTarget) => void;
+};
+export declare function usePromptActions(prompt: string): PromptActionHandlers;

package/lib/core/hooks/prompt/use-prompt-actions.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePromptActions = usePromptActions;
+const use_theme_hooks_1 = require("../use-theme-hooks");
+const get_ai_prompt_link_1 = require("../../utils/get-ai-prompt-link");
+const get_base_data_attributes_1 = require("../../utils/telemetry/get-base-data-attributes");
+function usePromptActions(prompt) {
+    const { useTelemetry } = (0, use_theme_hooks_1.useThemeHooks)();
+    const telemetry = useTelemetry();
+    const tagData = (0, get_base_data_attributes_1.getBaseDataAttributes)('prompt', 'markdocTag');
+    return {
+        reportCopy: () => telemetry.sendPromptTagCopiedMessage([tagData]),
+        openIn: (target) => {
+            telemetry.sendPromptTagOpenedMessage([Object.assign(Object.assign({}, tagData), { target })]);
+            window.open((0, get_ai_prompt_link_1.getAiPromptLink)(target, prompt), '_blank', 'noopener,noreferrer');
+        },
+    };
+}
+//# sourceMappingURL=use-prompt-actions.js.map

package/lib/core/hooks/prompt/use-prompt-text-limit.d.ts

@@ -0,0 +1,19 @@
+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 declare function usePromptTextLimit({ prompt, singleLine, isPromptVisible, }: UsePromptTextLimitParams): PromptTextLimitState;

package/lib/core/hooks/prompt/use-prompt-text-limit.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePromptTextLimit = usePromptTextLimit;
+const react_1 = require("react");
+/**
+ * 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.
+ */
+function usePromptTextLimit({ prompt, singleLine, isPromptVisible, }) {
+    const textRef = (0, react_1.useRef)(null);
+    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
+    const [hasHiddenText, setHasHiddenText] = (0, react_1.useState)(false);
+    /* The text mounts late with hidePrompt and re-wraps on resize, so the observer is
+       attached each time the text (re)appears. */
+    (0, react_1.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),
+    };
+}
+//# sourceMappingURL=use-prompt-text-limit.js.map

package/lib/core/hooks/use-page-actions.js

@@ -25,6 +25,7 @@ const dom_1 = require("../utils/dom");
 const mcp_1 = require("../utils/mcp");
 const urls_1 = require("../utils/urls");
 const get_base_data_attributes_1 = require("../utils/telemetry/get-base-data-attributes");
+const get_ai_prompt_link_1 = require("../utils/get-ai-prompt-link");
 const DEFAULT_ENABLED_ACTIONS = [
     'copy',
     'view',
@@ -82,6 +83,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
         const mdPageUrl = isRoot
             ? (0, urls_1.combineUrls)(origin, pathname, 'index.html.md')
             : (0, urls_1.combineUrls)(origin, (0, urls_1.removeTrailingSlash)(pathname) + '.md');
+        const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
         const actionHandlers = {
             'docs-mcp-cursor': createMCPHandler('cursor', false),
             'docs-mcp-vscode': createMCPHandler('vscode', false),
@@ -123,7 +125,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                 },
             }),
             chatgpt: () => {
-                const link = getExternalAiPromptLink('https://chat.openai.com', mdPageUrl);
+                const link = (0, get_ai_prompt_link_1.getAiPromptLink)('chatgpt', externalAiPrompt);
                 return {
                     buttonText: translate('page.actions.chatGptButtonText', 'Open in ChatGPT'),
                     title: translate('page.actions.chatGptTitle', 'Open in ChatGPT'),
@@ -139,7 +141,7 @@ function usePageActions(pageSlug, mcpUrl, actions) {
                 };
             },
             claude: () => {
-                const link = getExternalAiPromptLink('https://claude.ai/new', mdPageUrl);
+                const link = (0, get_ai_prompt_link_1.getAiPromptLink)('claude', externalAiPrompt);
                 return {
                     buttonText: translate('page.actions.claudeButtonText', 'Open in Claude'),
                     title: translate('page.actions.claudeTitle', 'Open in Claude'),
@@ -174,12 +176,6 @@ function usePageActions(pageSlug, mcpUrl, actions) {
     ]);
     return result;
 }
-function getExternalAiPromptLink(baseUrl, mdPageUrl) {
-    const externalAiPrompt = `Read ${mdPageUrl} and answer questions based on the content.`;
-    const url = new URL(baseUrl);
-    url.searchParams.set('q', externalAiPrompt);
-    return url.toString();
-}
 function createMCPAction({ clientType, mcpConfig, translate, onClickCallback, }) {
     const url = (0, mcp_1.generateMCPDeepLink)(clientType, mcpConfig);
     const sharedProps = {

package/lib/core/hooks/use-pointer-border-highlight.d.ts

@@ -0,0 +1,7 @@
+import type { PointerEvent, RefObject } from 'react';
+export type PointerBorderHighlight<T extends HTMLElement> = {
+    ref: RefObject<T | null>;
+    onPointerMove: (event: PointerEvent<T>) => void;
+    onPointerLeave: () => void;
+};
+export declare function usePointerBorderHighlight<T extends HTMLElement>(distance?: number): PointerBorderHighlight<T>;

package/lib/core/hooks/use-pointer-border-highlight.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePointerBorderHighlight = usePointerBorderHighlight;
+const react_1 = require("react");
+const EDGE_PROXIMITY_DISTANCE = 80;
+/* 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. */
+function usePointerBorderHighlight(distance = EDGE_PROXIMITY_DISTANCE) {
+    const ref = (0, react_1.useRef)(null);
+    const onPointerMove = (0, react_1.useCallback)((event) => {
+        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 = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.style.setProperty('--pointer-edge-proximity', '0');
+    }, []);
+    return { ref, onPointerMove, onPointerLeave };
+}
+//# sourceMappingURL=use-pointer-border-highlight.js.map

package/lib/core/hooks/use-telemetry-fallback.d.ts

@@ -36,6 +36,8 @@ export declare const useTelemetryFallback: () => {
     sendCodeSnippetReportedMessage: () => void;
     sendConnectMcpClickedMessage: () => void;
     sendMcpConnectionSnippetCopiedMessage: () => void;
+    sendPromptTagCopiedMessage: () => void;
+    sendPromptTagOpenedMessage: () => void;
     sendMobileMenuClosedMessage: () => void;
     sendMobileMenuOpenedMessage: () => void;
     sendPageViewedMessage: () => void;

package/lib/core/hooks/use-telemetry-fallback.js

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

package/lib/core/styles/dark.js

@@ -12,12 +12,13 @@ const variables_dark_7 = require("../../components/Tag/variables.dark");
 const variables_dark_8 = require("../../components/StatusCode/variables.dark");
 const variables_dark_9 = require("../../components/Switch/variables.dark");
 const variables_dark_10 = require("../../markdoc/components/Cards/variables.dark");
-const variables_dark_11 = require("../../components/Catalog/variables.dark");
-const variables_dark_12 = require("../../components/PageActions/variables.dark");
-const variables_dark_13 = require("../../components/Tooltip/variables.dark");
-const variables_dark_14 = require("../../components/Banner/variables.dark");
-const variables_dark_15 = require("../../components/Admonition/variables.dark");
-const variables_dark_16 = require("../../components/CodeBlock/variables.dark");
+const variables_dark_11 = require("../../markdoc/components/Prompt/variables.dark");
+const variables_dark_12 = require("../../components/Catalog/variables.dark");
+const variables_dark_13 = require("../../components/PageActions/variables.dark");
+const variables_dark_14 = require("../../components/Tooltip/variables.dark");
+const variables_dark_15 = require("../../components/Banner/variables.dark");
+const variables_dark_16 = require("../../components/Admonition/variables.dark");
+const variables_dark_17 = require("../../components/CodeBlock/variables.dark");
 const palette_dark_1 = require("./palette.dark");
 const replayDarkMode = (0, styled_components_1.css) `
   /**
@@ -353,15 +354,16 @@ exports.darkMode = (0, styled_components_1.css) `
   ${replayDarkMode}
   ${variables_dark_9.switcherDarkMode}
   ${variables_dark_10.cardsDarkMode}
-  ${variables_dark_11.catalogDarkMode}
-  ${variables_dark_12.pageActionsDarkMode}
-  ${variables_dark_13.tooltipDarkMode}
-  ${variables_dark_14.bannerDarkMode}
-  ${variables_dark_15.admonitionDarkMode}
+  ${variables_dark_11.promptTagDarkMode}
+  ${variables_dark_12.catalogDarkMode}
+  ${variables_dark_13.pageActionsDarkMode}
+  ${variables_dark_14.tooltipDarkMode}
+  ${variables_dark_15.bannerDarkMode}
+  ${variables_dark_16.admonitionDarkMode}
   ${badgesDarkMode}
   ${numberedListDarkMode}
   ${palette_dark_1.activeBrandPaletteDark}
-  ${variables_dark_16.codeBlockDarkMode}
+  ${variables_dark_17.codeBlockDarkMode}
   /**
     * @tokens Dark Theme Scrollbar Config
     * @presenter Color

package/lib/core/styles/global.js

@@ -45,13 +45,14 @@ const variables_40 = require("../../components/VersionPicker/variables");
 const variables_41 = require("../../components/DatePicker/variables");
 const variables_42 = require("../../components/Switch/variables");
 const variables_43 = require("../../markdoc/components/Cards/variables");
-const variables_44 = require("../../markdoc/components/CodeWalkthrough/variables");
-const variables_45 = require("../../components/SkipContent/variables");
-const variables_46 = require("../../components/PageActions/variables");
-const variables_47 = require("../../components/SvgViewer/variables");
-const variables_48 = require("../../components/Toast/variables");
-const variables_49 = require("../../components/PageNavigation/variables");
-const variables_50 = require("../../components/NavigationTabs/variables");
+const variables_44 = require("../../markdoc/components/Prompt/variables");
+const variables_45 = require("../../markdoc/components/CodeWalkthrough/variables");
+const variables_46 = require("../../components/SkipContent/variables");
+const variables_47 = require("../../components/PageActions/variables");
+const variables_48 = require("../../components/SvgViewer/variables");
+const variables_49 = require("../../components/Toast/variables");
+const variables_50 = require("../../components/PageNavigation/variables");
+const variables_51 = require("../../components/NavigationTabs/variables");
 const utils_1 = require("../../core/utils");
 const palette_1 = require("./palette");
 const dark_1 = require("./dark");
@@ -863,46 +864,6 @@ const loadProgressBar = (0, styled_components_1.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 = (0, styled_components_1.css) `
   /**
@@ -1322,10 +1283,11 @@ exports.tokens = (0, styled_components_1.css) `
   ${variables_21.aiAssistantButton}
   ${variables_21.connectMcpButton}
   ${variables_43.cards}
+  ${variables_44.promptTag}
   ${variables_8.catalog}
   ${variables_11.catalogClassic}
   ${variables_25.code}
-  ${variables_44.codeWalkthrough}
+  ${variables_45.codeWalkthrough}
   ${docsDropdown}
   ${variables_15.dropdown}
   ${error}
@@ -1353,7 +1315,7 @@ exports.tokens = (0, styled_components_1.css) `
   ${variables_26.productPicker}
   ${variables_12.responsePanelColors}
   ${variables_23.search}
-  ${variables_50.navigationTabs}
+  ${variables_51.navigationTabs}
   ${variables_14.select}
   ${variables_4.sidebar}
   ${sizeAndSpace}
@@ -1379,11 +1341,11 @@ exports.tokens = (0, styled_components_1.css) `
   ${variables_2.scorecard}
   ${variables_41.datePicker}
   ${replay}
-  ${variables_45.skipContent}
-  ${variables_46.pageActions}
-  ${variables_47.svgViewer}
-  ${variables_48.toast}
-  ${variables_49.pageNavigation}
+  ${variables_46.skipContent}
+  ${variables_47.pageActions}
+  ${variables_48.svgViewer}
+  ${variables_49.toast}
+  ${variables_50.pageNavigation}
 
 `;
 exports.styles = (0, styled_components_1.css) `

package/lib/core/types/index.d.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';