import { type APIOptions, type DeviceType } from "@khanacademy/perseus";
import * as React from "react";
import type { PerseusRenderer } from "@khanacademy/perseus-core";
import type { LinterContextProps } from "@khanacademy/perseus-linter";
/**
 * The `ContentPreview` component provides a simple preview system for Perseus
 * Content. Due to how Persus styles are built, the preview styling matches the
 * current device based on the viewport width (using `@media` queries for
 * `min-width` and `max-width`).
 *
 * The preview will render the mobile variant (styling and layout) when the
 * `previewDevice` is phone or tablet. Note that the styling cannot be matched
 * 100% due to the above `@media` query limitation.
 */
declare function ContentPreview({ question, apiOptions, seamless, linterContext, legacyPerseusLint, previewDevice, reviewMode, }: {
    /** The Perseus question to preview. */
    question?: PerseusRenderer;
    /** API Options to use when previewing. */
    apiOptions?: APIOptions;
    /**
     * When `true`, renders a seamless preview without any extra spacing. When
     * `false`, renders a gutter where linting issues are displayed.
     */
    seamless?: boolean;
    linterContext?: LinterContextProps;
    legacyPerseusLint?: ReadonlyArray<string>;
    /**
     * The type of device to simulate the preview for. Note that this preview
     * may not be 100% accurate with regards to styling (due to styles that use
     * media queries based on the screen width).
     */
    previewDevice: DeviceType;
    /**
     * Whether the preview is in review mode. When true, widgets will show
     * correct answers with explanations and prevent interaction.
     */
    reviewMode?: boolean;
}): React.JSX.Element;
export default ContentPreview;
