import { FC, ReactElement } from 'react';
import { MDXRemoteProps } from '../mdx-remote.js';
import '../evaluate.js';
import '../../types.js';
import 'mdast';
import 'next';
import 'zod';
import '../../server/schemas.js';
import './lib/index.js';
import 'rehype-katex/lib/index.js';
import 'better-react-mathjax';
import 'rehype-pretty-code';
import '../../types.generated.js';
import '@mdx-js/mdx';
import 'rehype-katex';
import '../mdx-components.js';
import 'url';
import 'next/link.js';
import 'next/image.js';
import './image-zoom.js';
import 'next/image';
import '../mdx-components/anchor.js';
import 'next/link';

type PlaygroundProps = {
    /**
     * String with source MDX.
     * @example '# hello world <br /> nice to see you'
     */
    source: string;
    /**
     * Fallback component for loading.
     * @default null
     */
    fallback?: ReactElement | null;
} & Pick<MDXRemoteProps, 'components' | 'scope'>;
/**
 * A built-in component lets you write Nextra-compatible MDX that renders only on the client.
 * @example
 * <PlaygroundDemo />
 *
 * @usage
 * ```mdx filename="Basic Usage"
 * import { Playground } from 'nextra/components'
 *
 * # Playground
 *
 * Below is a playground component. It mixes into the rest of your MDX perfectly.
 *
 * <Playground
 *   source="## Hello world"
 *   components={{ h2: props => <h2 {...props} className="myClass" /> }}
 * />
 * ```
 *
 * You may also specify a fallback component like so:
 *
 * ```mdx filename="Usage with Fallback"
 * import { Playground } from 'nextra/components'
 *
 * <Playground
 *   source="## Hello world"
 *   components={{ h2: props => <h2 {...props} className="myClass" /> }}
 *   fallback={<div>Loading playground...</div>}
 * />
 * ```
 *
 * ### Avoiding unstyled outputs
 *
 * To prevent unstyled elements, import `useMDXComponents` from your
 * `mdx-components` file. Call this function and pass the returned components to
 * the `components` prop. You can also include your custom components as the first
 * argument:
 *
 * ```mdx {1,6-8}
 * import { Playground } from 'nextra/components'
 * import { useMDXComponents } from '../path/to/my/mdx-components'
 *
 * <Playground
 *   source="## Hello world"
 *   components={useMDXComponents({
 *     h2: props => <h2 {...props} className="myClass" />
 *   })}
 *   fallback={<div>Loading playground...</div>}
 * />
 * ```
 */
declare const Playground: FC<PlaygroundProps>;

export { Playground };