@deepcitation/deepcitation-js 1.0.2 → 1.0.3

package/lib/react/CitationComponent.js

@@ -0,0 +1,376 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { CheckIcon, WarningIcon } from "./icons.js";
+import { classNames, generateCitationInstanceId, generateCitationKey, getCitationDisplayText } from "./utils.js";
+import { getCitationStatus } from "../parsing/parseCitation.js";
+import "./styles.css";
+const TWO_DOTS_THINKING_CONTENT = "..";
+// =============================================================================
+// INDICATORS
+// =============================================================================
+/**
+ * Default indicator for verified citations (exact match).
+ * Shows a green checkmark.
+ */
+const DefaultVerifiedIndicator = () => (_jsx("span", { className: "dc-indicator dc-indicator--verified", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }));
+/**
+ * Default indicator for partial match citations.
+ * Shows an orange/warning checkmark.
+ */
+const DefaultPartialIndicator = () => (_jsx("span", { className: "dc-indicator dc-indicator--partial", "aria-hidden": "true", children: _jsx(CheckIcon, {}) }));
+// =============================================================================
+// HELPER FUNCTIONS
+// =============================================================================
+/**
+ * Get status label for display in popover.
+ */
+function getStatusLabel(status) {
+    if (status.isVerified && !status.isPartialMatch)
+        return "Verified";
+    if (status.isPartialMatch)
+        return "Partial Match";
+    if (status.isMiss)
+        return "Not Found";
+    if (status.isPending)
+        return "Verifying...";
+    return "";
+}
+/**
+ * Get popover status CSS class.
+ */
+function getPopoverStatusClass(status) {
+    if (status.isVerified && !status.isPartialMatch)
+        return "dc-popover-status--verified";
+    if (status.isPartialMatch)
+        return "dc-popover-status--partial";
+    if (status.isMiss)
+        return "dc-popover-status--miss";
+    if (status.isPending)
+        return "dc-popover-status--pending";
+    return "";
+}
+/**
+ * Get the "found status" class for text styling.
+ * This determines if the text appears as found (blue) or not found (gray).
+ *
+ * Key insight: Partial matches ARE found - they just don't match exactly.
+ * So partial matches get "verified" text styling (blue) but with a different indicator.
+ */
+function getFoundStatusClass(status) {
+    // Both verified AND partial are "found" - they get the same text styling
+    if (status.isVerified || status.isPartialMatch)
+        return "dc-citation--verified";
+    if (status.isMiss)
+        return "dc-citation--miss";
+    if (status.isPending)
+        return "dc-citation--pending";
+    return "";
+}
+// =============================================================================
+// SUB-COMPONENTS
+// =============================================================================
+/**
+ * Status tooltip content for miss/partial states.
+ * Shows explanation when hovering over citations with issues.
+ */
+const StatusTooltipContent = ({ citation, status, foundCitation, isExpanded, onToggleExpand, }) => {
+    const { isMiss, isPartialMatch } = status;
+    if (!isMiss && !isPartialMatch)
+        return null;
+    // Get search attempts from foundCitation
+    const searchAttempts = foundCitation?.searchState?.searchAttempts;
+    const failedAttempts = searchAttempts?.filter(a => !a.success) || [];
+    // Collect all unique phrases tried
+    const allPhrases = [];
+    const seenPhrases = new Set();
+    for (const attempt of failedAttempts) {
+        for (const phrase of attempt.searchPhrases || []) {
+            if (!seenPhrases.has(phrase)) {
+                seenPhrases.add(phrase);
+                allPhrases.push(phrase);
+            }
+        }
+    }
+    // Fallback to citation text if no phrases recorded
+    if (allPhrases.length === 0) {
+        const searchedText = citation.fullPhrase || citation.value || "";
+        if (searchedText) {
+            allPhrases.push(searchedText);
+        }
+    }
+    if (isMiss) {
+        const hiddenCount = allPhrases.length - 1;
+        return (_jsxs("span", { className: "dc-status-tooltip", role: "tooltip", children: [_jsxs("span", { className: "dc-status-header dc-status-header--miss", children: [_jsx(WarningIcon, {}), _jsx("span", { children: "Not found in source" })] }), allPhrases.length > 0 && (_jsxs("span", { className: "dc-search-phrases", children: [_jsxs("span", { className: "dc-search-phrases-header", children: [hiddenCount > 0 && (_jsx("button", { type: "button", className: "dc-search-phrases-toggle", onClick: onToggleExpand, children: isExpanded ? "collapse" : `+${hiddenCount} more` })), _jsxs("span", { className: "dc-status-label", children: ["Searched ", allPhrases.length, " phrase", allPhrases.length > 1 ? "s" : ""] })] }), _jsx("span", { className: "dc-search-phrases-list", children: (isExpanded ? allPhrases : allPhrases.slice(0, 1)).map((phrase, idx) => (_jsxs("span", { className: "dc-search-phrase-item", children: ["\"", phrase.length > 80 ? phrase.slice(0, 80) + "…" : phrase, "\""] }, idx))) })] }))] }));
+    }
+    if (isPartialMatch) {
+        const expectedText = citation.fullPhrase || citation.value || "";
+        const actualText = foundCitation?.matchSnippet || "";
+        const truncatedExpected = expectedText.length > 100 ? expectedText.slice(0, 100) + "…" : expectedText;
+        const truncatedActual = actualText.length > 100 ? actualText.slice(0, 100) + "…" : actualText;
+        return (_jsxs("span", { className: "dc-status-tooltip", role: "tooltip", children: [_jsxs("span", { className: "dc-status-header dc-status-header--partial", children: [_jsx(WarningIcon, {}), _jsx("span", { children: "Partial match" })] }), _jsx("span", { className: "dc-status-description", children: "Text differs from citation." }), truncatedExpected && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Expected" }), _jsx("span", { className: "dc-status-text", children: truncatedExpected })] })), truncatedActual && (_jsxs("span", { className: "dc-status-searched", children: [_jsx("span", { className: "dc-status-label", children: "Found" }), _jsx("span", { className: "dc-status-text", children: truncatedActual })] }))] }));
+    }
+    return null;
+};
+/**
+ * Full-size image overlay component.
+ * Uses portal to render at document body level.
+ */
+const ImageOverlay = ({ src, alt, onClose }) => {
+    const handleBackdropClick = useCallback((e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    }, [onClose]);
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape") {
+                onClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [onClose]);
+    // Use portal to render at body level, avoiding any parent positioning issues
+    return createPortal(_jsx("div", { className: "dc-overlay", onClick: handleBackdropClick, role: "dialog", "aria-modal": "true", "aria-label": "Full size verification image", children: _jsx("div", { className: "dc-overlay-content", onClick: onClose, children: _jsx("img", { src: src, alt: alt, className: "dc-overlay-image", draggable: false }) }) }), document.body);
+};
+/**
+ * Default popover content component.
+ * Shows verification image if available, otherwise shows text info.
+ */
+const DefaultPopoverContent = ({ foundCitation, status, onImageClick, }) => {
+    const hasImage = foundCitation?.verificationImageBase64;
+    const handleImageClick = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasImage && onImageClick) {
+            onImageClick(foundCitation.verificationImageBase64);
+        }
+    }, [hasImage, foundCitation?.verificationImageBase64, onImageClick]);
+    // If we have a verification image, show only the image
+    if (hasImage) {
+        return (_jsx("button", { type: "button", className: "dc-popover-image-button", onClick: handleImageClick, "aria-label": "Click to view full size", children: _jsx("img", { src: foundCitation.verificationImageBase64, alt: "Citation verification", className: "dc-popover-image", loading: "lazy" }) }));
+    }
+    // No image - show text info
+    const statusLabel = getStatusLabel(status);
+    const statusClass = getPopoverStatusClass(status);
+    const hasSnippet = foundCitation?.matchSnippet;
+    const pageNumber = foundCitation?.pageNumber;
+    if (!hasSnippet && !statusLabel) {
+        return null;
+    }
+    return (_jsxs(_Fragment, { children: [statusLabel && _jsx("span", { className: classNames("dc-popover-status", statusClass), children: statusLabel }), hasSnippet && _jsxs("span", { className: "dc-popover-snippet", children: ["\"", foundCitation.matchSnippet, "\""] }), pageNumber && pageNumber > 0 && _jsxs("span", { className: "dc-popover-page", children: ["Page ", pageNumber] })] }));
+};
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+/**
+ * CitationComponent displays a citation with verification status.
+ *
+ * The component separates two concepts:
+ * 1. **Found status** (text styling) - whether the citation was found in the document
+ *    - Verified & Partial both use "found" styling (blue text)
+ *    - Miss uses "not found" styling (gray/strikethrough)
+ *
+ * 2. **Match quality** (indicator styling) - how well the citation matched
+ *    - Exact match: green checkmark
+ *    - Partial match: orange checkmark
+ *    - Miss: no indicator
+ *
+ * This means partial matches have blue text (because they were found) but
+ * an orange indicator (because they didn't match exactly).
+ */
+export const CitationComponent = forwardRef(({ citation, children, className, displayCitationValue = false, fallbackDisplay, foundCitation, variant = "brackets", eventHandlers, isMobile = false, renderIndicator, renderContent, popoverPosition = "top", renderPopoverContent, }, ref) => {
+    const containerRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const [expandedImageSrc, setExpandedImageSrc] = useState(null);
+    const [isTooltipExpanded, setIsTooltipExpanded] = useState(false);
+    const [isPhrasesExpanded, setIsPhrasesExpanded] = useState(false);
+    const handleImageClick = useCallback((imageSrc) => {
+        setExpandedImageSrc(imageSrc);
+    }, []);
+    const handleCloseOverlay = useCallback(() => {
+        setExpandedImageSrc(null);
+    }, []);
+    const handleTogglePhrases = useCallback((e) => {
+        e?.preventDefault();
+        e?.stopPropagation();
+        setIsPhrasesExpanded(prev => !prev);
+    }, []);
+    // Handle click outside to close expanded tooltip
+    useEffect(() => {
+        if (!isTooltipExpanded)
+            return;
+        const handleClickOutside = (event) => {
+            if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+                setIsTooltipExpanded(false);
+            }
+        };
+        // Use capture phase to handle clicks before they bubble
+        document.addEventListener("mousedown", handleClickOutside, true);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside, true);
+        };
+    }, [isTooltipExpanded]);
+    // Handle escape key to close expanded tooltip
+    useEffect(() => {
+        if (!isTooltipExpanded)
+            return;
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                setIsTooltipExpanded(false);
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+        };
+    }, [isTooltipExpanded]);
+    const citationKey = useMemo(() => generateCitationKey(citation), [citation]);
+    const citationInstanceId = useMemo(() => generateCitationInstanceId(citationKey), [citationKey]);
+    const handleToggleTooltip = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // If we have a verification image
+        if (foundCitation?.verificationImageBase64) {
+            if (expandedImageSrc) {
+                // Image is open - close it and unpin
+                setExpandedImageSrc(null);
+                setIsTooltipExpanded(false);
+            }
+            else if (isTooltipExpanded) {
+                // Already pinned - second click expands image
+                setExpandedImageSrc(foundCitation.verificationImageBase64);
+            }
+            else {
+                // First click - just pin the popover open
+                setIsTooltipExpanded(true);
+            }
+        }
+        else {
+            // No image - toggle phrases expansion for miss/partial tooltips
+            setIsTooltipExpanded(prev => !prev);
+            setIsPhrasesExpanded(prev => !prev);
+        }
+        eventHandlers?.onClick?.(citation, citationKey, e);
+    }, [
+        eventHandlers,
+        citation,
+        citationKey,
+        foundCitation?.verificationImageBase64,
+        expandedImageSrc,
+        isTooltipExpanded,
+    ]);
+    const status = getCitationStatus(foundCitation ?? null);
+    // const { isVerified, isPending } = status;
+    const { isMiss, isPartialMatch, isVerified, isPending } = status;
+    const displayText = useMemo(() => {
+        // For numeric variant, always show the citation number
+        if (variant === "numeric") {
+            return citation.citationNumber?.toString() ?? "";
+        }
+        // For text/minimal/brackets, show the value or fullPhrase
+        return getCitationDisplayText(citation, {
+            displayCitationValue: variant === "text" || variant === "minimal" || variant === "brackets" || displayCitationValue,
+            fallbackDisplay,
+        });
+    }, [citation, variant, displayCitationValue, fallbackDisplay]);
+    // Found status class for text styling (blue for found, gray for miss)
+    const foundStatusClass = useMemo(() => getFoundStatusClass(status), [status]);
+    // Event handlers
+    const handleMouseEnter = useCallback(() => {
+        eventHandlers?.onMouseEnter?.(citation, citationKey);
+    }, [eventHandlers, citation, citationKey]);
+    const handleMouseLeave = useCallback(() => {
+        eventHandlers?.onMouseLeave?.(citation, citationKey);
+    }, [eventHandlers, citation, citationKey]);
+    const handleTouchEnd = useCallback((e) => {
+        if (isMobile) {
+            e.preventDefault();
+            e.stopPropagation();
+            eventHandlers?.onTouchEnd?.(citation, citationKey, e);
+        }
+    }, [eventHandlers, citation, citationKey, isMobile]);
+    // Early return for miss with fallback display
+    if (fallbackDisplay !== null && fallbackDisplay !== undefined && displayCitationValue && isMiss) {
+        return _jsx("span", { className: classNames("dc-citation-fallback", className), children: fallbackDisplay });
+    }
+    // Render the appropriate indicator based on match quality
+    const renderStatusIndicator = () => {
+        if (renderIndicator) {
+            return renderIndicator(status);
+        }
+        if (isVerified) {
+            return _jsx(DefaultVerifiedIndicator, {});
+        }
+        else if (isPartialMatch) {
+            return _jsx(DefaultPartialIndicator, {});
+        }
+        else if (isPending) {
+            return (_jsx("span", { className: "dc-indicator dc-indicator--pending", "aria-hidden": "true", children: TWO_DOTS_THINKING_CONTENT }));
+        }
+        else if (isMiss) {
+            return null;
+        }
+        return null;
+    };
+    // Render the citation content based on variant
+    const renderCitationContent = () => {
+        // Custom render function takes full control
+        if (renderContent) {
+            return renderContent({
+                citation,
+                status,
+                citationKey,
+                displayText,
+                isMergedDisplay: variant === "text" || variant === "brackets" || displayCitationValue,
+            });
+        }
+        // Indicator-only variant - just the checkmark/warning
+        if (variant === "indicator") {
+            return _jsx("span", { className: "dc-citation-text", children: renderStatusIndicator() });
+        }
+        // Text variant - no special styling, shows value with indicator
+        if (variant === "text") {
+            return (_jsxs("span", { className: "dc-citation-text dc-citation-text--plain", children: [displayText, renderStatusIndicator()] }));
+        }
+        // Minimal variant - no brackets, just text with indicator
+        if (variant === "minimal") {
+            return (_jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }));
+        }
+        // Numeric variant - shows citation number with indicator, no brackets
+        if (variant === "numeric") {
+            return (_jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }));
+        }
+        // Brackets variant (default) - value/number in brackets with styling
+        return (_jsxs("span", { className: "dc-citation-bracket", "aria-hidden": "true", role: "presentation", children: ["[", _jsxs("span", { className: "dc-citation-text", children: [displayText, renderStatusIndicator()] }), "]"] }));
+    };
+    // Determine if popover should be shown
+    const isPopoverHidden = popoverPosition === "hidden";
+    const shouldShowPopover = !isPopoverHidden && foundCitation && (foundCitation.verificationImageBase64 || foundCitation.matchSnippet);
+    // Determine if status tooltip should be shown (miss/partial without full verification)
+    const shouldShowStatusTooltip = !isPopoverHidden && (isMiss || isPartialMatch) && !shouldShowPopover;
+    // Popover content - determine position class (only "top" or "bottom" add classes)
+    const popoverPositionClass = popoverPosition === "bottom" ? "dc-popover--bottom" : "";
+    const popoverContent = shouldShowPopover ? (_jsx("span", { className: classNames("dc-popover", popoverPositionClass), children: renderPopoverContent ? (renderPopoverContent({ citation, foundCitation: foundCitation ?? null, status })) : (_jsx(DefaultPopoverContent, { citation: citation, foundCitation: foundCitation ?? null, status: status, onImageClick: handleImageClick })) })) : null;
+    // Status tooltip for miss/partial explanations
+    const statusTooltipContent = shouldShowStatusTooltip ? (_jsx(StatusTooltipContent, { citation: citation, status: status, foundCitation: foundCitation ?? null, isExpanded: isPhrasesExpanded, onToggleExpand: handleTogglePhrases })) : null;
+    const citationTrigger = (_jsx("span", { ref: node => {
+            containerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref) {
+                ref.current = node;
+            }
+        }, "data-citation-id": citationKey, "data-citation-instance": citationInstanceId, "data-tooltip-expanded": isTooltipExpanded, "data-has-image": !!foundCitation?.verificationImageBase64, className: classNames("dc-citation", `dc-citation--${variant}`, foundStatusClass, className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onClick: handleToggleTooltip, onTouchEndCapture: isMobile ? handleTouchEnd : undefined, "aria-label": displayText ? `[${displayText}]` : undefined, "aria-expanded": isTooltipExpanded, children: renderCitationContent() }));
+    // Image overlay for full-size view
+    const imageOverlay = expandedImageSrc ? (_jsx(ImageOverlay, { src: expandedImageSrc, alt: "Citation verification - full size", onClose: handleCloseOverlay })) : null;
+    // Wrap with popover or status tooltip if needed
+    if (shouldShowPopover || shouldShowStatusTooltip) {
+        return (_jsxs(_Fragment, { children: [children, _jsxs("span", { className: "dc-popover-wrapper", ref: wrapperRef, "data-expanded": isTooltipExpanded, children: [citationTrigger, popoverContent, statusTooltipContent] }), imageOverlay] }));
+    }
+    return (_jsxs(_Fragment, { children: [children, citationTrigger, imageOverlay] }));
+});
+CitationComponent.displayName = "CitationComponent";
+export const MemoizedCitationComponent = memo(CitationComponent);

package/lib/react/CitationVariants.d.ts

@@ -0,0 +1,135 @@
+import React, { type ReactNode } from "react";
+import type { CitationStatus } from "../types/citation.js";
+import type { FoundHighlightLocation } from "../types/foundHighlight.js";
+import type { SearchState } from "../types/search.js";
+import type { BaseCitationProps, CitationVariant as CitationVariantType, CitationEventHandlers } from "./types.js";
+/**
+ * Shared props for all citation variant components.
+ */
+export interface CitationVariantProps extends BaseCitationProps {
+    /** Found citation highlight location data */
+    foundCitation?: FoundHighlightLocation | null;
+    /** Current search state for the citation */
+    searchState?: SearchState | null;
+    /** Event handlers */
+    eventHandlers?: CitationEventHandlers;
+    /** Whether on mobile device */
+    isMobile?: boolean;
+    /** Whether tooltips should be prevented */
+    preventTooltips?: boolean;
+    /** Custom pending text content */
+    pendingContent?: ReactNode;
+    /** Custom render function for verified indicator */
+    renderVerifiedIndicator?: (status: CitationStatus) => ReactNode;
+    /** Custom render function for partial match indicator */
+    renderPartialIndicator?: (status: CitationStatus) => ReactNode;
+}
+export interface ChipCitationProps extends CitationVariantProps {
+    /** Chip size */
+    size?: "sm" | "md" | "lg";
+    /** Whether to show an icon before the text */
+    showIcon?: boolean;
+    /** Custom icon to display */
+    icon?: ReactNode;
+}
+/**
+ * Chip/Badge style citation component.
+ * Displays citation as a rounded pill/badge.
+ *
+ * @example
+ * ```tsx
+ * <ChipCitation citation={citation} foundCitation={found} size="md" />
+ * ```
+ */
+export declare const ChipCitation: React.ForwardRefExoticComponent<ChipCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export interface SuperscriptCitationProps extends CitationVariantProps {
+    /** Whether to show brackets around the superscript */
+    showBrackets?: boolean;
+}
+/**
+ * Superscript style citation component.
+ * Displays citation as a superscript number like academic papers.
+ *
+ * @example
+ * ```tsx
+ * <SuperscriptCitation citation={citation} foundCitation={found} />
+ * // Renders: Text content¹
+ * ```
+ */
+export declare const SuperscriptCitation: React.ForwardRefExoticComponent<SuperscriptCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export interface FootnoteCitationProps extends CitationVariantProps {
+    /** Footnote symbol style */
+    symbolStyle?: "number" | "asterisk" | "dagger" | "custom";
+    /** Custom symbol (when symbolStyle is "custom") */
+    customSymbol?: string;
+}
+/**
+ * Footnote style citation component.
+ * Displays citation as a footnote marker.
+ *
+ * @example
+ * ```tsx
+ * <FootnoteCitation citation={citation} symbolStyle="asterisk" />
+ * // Renders: Text content*
+ * ```
+ */
+export declare const FootnoteCitation: React.ForwardRefExoticComponent<FootnoteCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export interface InlineCitationProps extends CitationVariantProps {
+    /** Underline style */
+    underlineStyle?: "solid" | "dotted" | "dashed" | "none";
+}
+/**
+ * Inline style citation component.
+ * Displays citation inline with subtle underline decoration.
+ *
+ * @example
+ * ```tsx
+ * <InlineCitation citation={citation} underlineStyle="dotted" />
+ * // Renders: "quoted text" with subtle underline
+ * ```
+ */
+export declare const InlineCitation: React.ForwardRefExoticComponent<InlineCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export interface MinimalCitationProps extends CitationVariantProps {
+    /** Whether to show status indicator */
+    showStatusIndicator?: boolean;
+}
+/**
+ * Minimal style citation component.
+ * Displays just the citation number with minimal decoration.
+ *
+ * @example
+ * ```tsx
+ * <MinimalCitation citation={citation} />
+ * // Renders: 1
+ * ```
+ */
+export declare const MinimalCitation: React.ForwardRefExoticComponent<MinimalCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export interface VariantCitationProps extends CitationVariantProps {
+    /** The variant to render */
+    variant?: CitationVariantType;
+    /** Chip-specific props */
+    chipProps?: Partial<ChipCitationProps>;
+    /** Superscript-specific props */
+    superscriptProps?: Partial<SuperscriptCitationProps>;
+    /** Footnote-specific props */
+    footnoteProps?: Partial<FootnoteCitationProps>;
+    /** Inline-specific props */
+    inlineProps?: Partial<InlineCitationProps>;
+    /** Minimal-specific props */
+    minimalProps?: Partial<MinimalCitationProps>;
+}
+/**
+ * Factory component that renders the appropriate citation variant.
+ *
+ * @example
+ * ```tsx
+ * <CitationVariantFactory variant="chip" citation={citation} chipProps={{ size: "lg" }} />
+ * ```
+ */
+export declare const CitationVariantFactory: React.ForwardRefExoticComponent<VariantCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MemoizedChipCitation: React.NamedExoticComponent<ChipCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MemoizedSuperscriptCitation: React.NamedExoticComponent<SuperscriptCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MemoizedFootnoteCitation: React.NamedExoticComponent<FootnoteCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MemoizedInlineCitation: React.NamedExoticComponent<InlineCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MemoizedMinimalCitation: React.NamedExoticComponent<MinimalCitationProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const MemoizedCitationVariantFactory: React.NamedExoticComponent<VariantCitationProps & React.RefAttributes<HTMLSpanElement>>;