import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ReactNode, PropsWithChildren, ReactElement, HTMLProps, Component, ErrorInfo, FormEvent, HTMLAttributes, ComponentType, SVGAttributes, ComponentProps, ComponentPropsWithoutRef } from 'react';
import * as react_aria_components from 'react-aria-components';
import { ButtonProps as ButtonProps$1, PressEvent, HeadingProps, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, CheckboxGroupProps as CheckboxGroupProps$1, ValidationResult, TagProps, TagGroupProps, TextProps, DialogTriggerProps as DialogTriggerProps$1, DialogProps as DialogProps$1, FormProps as FormProps$1, FieldErrorProps as FieldErrorProps$1, OverlayArrowProps as OverlayArrowProps$1, TooltipTriggerComponentProps, TooltipProps as TooltipProps$1, TextFieldProps, LabelProps as LabelProps$1, DropZoneProps, TextAreaProps as TextAreaProps$1, MenuProps as MenuProps$1, MenuItemProps as MenuItemProps$1, MenuSectionProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, SeparatorProps as SeparatorProps$1, ModalOverlayProps, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, ProgressBarProps, PopoverProps as PopoverProps$1, ListBoxProps, SelectProps as SelectProps$1, ListBoxSectionProps, ListBoxItemProps, SelectValueProps as SelectValueProps$1, SliderProps as SliderProps$1, SliderRenderProps, SliderOutputProps as SliderOutputProps$1, SliderThumbProps as SliderThumbProps$1, SliderTrackRenderProps, SliderTrackProps as SliderTrackProps$1, SwitchProps as SwitchProps$1, Key, TableBodyProps as TableBodyProps$1, TableProps as TableProps$1, TableHeaderProps as TableHeaderProps$1, RowProps as RowProps$1, CellProps as CellProps$1, ColumnProps as ColumnProps$1, ResizableTableContainerProps as ResizableTableContainerProps$1, ColumnResizerProps as ColumnResizerProps$1, TabPanelProps as TabPanelProps$1, TabProps as TabProps$1, TabsProps as TabsProps$1, TabListProps as TabListProps$1 } from 'react-aria-components';
export { DIRECTORY_DRAG_TYPE, TabsContext, isDirectoryDropItem, isFileDropItem, useDragAndDrop } from 'react-aria-components';
import * as _allenai_varnish_panda_runtime_types from '@allenai/varnish-panda-runtime/types';
import { RecipeVariantProps, SystemStyleObject } from '@allenai/varnish-panda-runtime/types';
import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
import { RecipeVariantProps as RecipeVariantProps$1 } from '@allenai/varnish-panda-runtime/css';
import { Options, Components } from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Placement } from '@react-types/overlays';
import VarnishTheme, { PaletteModes } from '@allenai/varnish-theme';

type Argument = string | boolean | null | undefined;
declare function cx(...args: Argument[]): string;

declare const alertRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "icon" | "title" | "message" | "actions" | "closeButton", {
    severity: {
        success: {
            root: {
                colorPalette: "elements.confirmation";
                color: "colorPalette.fill";
            };
        };
        info: {
            root: {
                colorPalette: "elements.information";
                color: "colorPalette.fill";
            };
        };
        warning: {
            root: {
                colorPalette: "elements.warning";
                color: "colorPalette.fill";
            };
        };
        error: {
            root: {
                colorPalette: "elements.error";
                color: "colorPalette.fill";
            };
        };
    };
    variant: {
        outlined: {
            root: {
                borderColor: "colorPalette.stroke";
            };
        };
        contained: {
            root: {
                backgroundColor: "colorPalette.fill";
                color: "colorPalette.contrast";
            };
        };
    };
}>;
type AlertRecipeProps = RecipeVariantProps<typeof alertRecipe>;

/**
 *  On the surface, building a custom styled button seems simple. However, there are many cross
 *  browser inconsistencies in interactions and accessibility features to consider. Button handles
 *  all of these interactions for you, so you can focus on the styling.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Button.html
 */
/**
 * Button component allows users to perform actions and make selections with a single tap.
 * It supports different visual styles based on its variants: text (default), contained, and outlined.
 *
 * @variant variant Defines the visual appearance of the button.
 * - `text`: Default style with no background, minimal padding.
 * - `contained`: Button with a solid background and padding.
 * - `outlined`: Button with a border and no background.
 *
 * @variant size Defines the size of the button.
 * - `small`: Smaller button for compact UI areas.
 * - `medium`: Default size for the button.
 * - `large`: Larger button for increased touch targets.
 *
 * @variant color Controls the color scheme of the button.
 * - `primary`: Button styled with the primary color.
 * - `secondary`: Button styled with the secondary color.
 * - `tertiary`: Button styled with a less prominent tertiary color.
 */
declare const buttonRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "startIcon" | "endIcon", {
    color: {
        default: {
            root: {
                colorPalette: "elements.default";
            };
        };
        primary: {
            root: {
                colorPalette: "elements.primary";
            };
        };
        secondary: {
            root: {
                colorPalette: "elements.secondary";
            };
        };
        tertiary: {
            root: {
                colorPalette: "elements.tertiary";
            };
        };
        warning: {
            root: {
                colorPalette: "elements.warning";
            };
        };
        error: {
            root: {
                colorPalette: "elements.error";
            };
        };
        info: {
            root: {
                colorPalette: "elements.information";
            };
        };
        confirmation: {
            root: {
                colorPalette: "elements.confirmation";
            };
        };
    };
    variant: {
        text: {
            root: {
                color: "colorPalette.fill";
                _hover: {
                    _notDisabled: {
                        backgroundColor: "elements.overrides.button.text.hovered.fill";
                    };
                };
                _disabled: {
                    color: "elements.disabled.contrast-reversed";
                };
            };
        };
        outlined: {
            root: {
                color: "colorPalette.fill";
                borderColor: "colorPalette.stroke";
                _hover: {
                    _notDisabled: {
                        borderColor: "colorPalette.hovered.stroke";
                    };
                };
                _disabled: {
                    color: "elements.disabled.contrast-reversed";
                    borderColor: "elements.disabled.stroke";
                };
            };
        };
        contained: {
            root: {
                color: "colorPalette.contrast";
                backgroundColor: "colorPalette.fill";
                _hover: {
                    _notDisabled: {
                        backgroundColor: "colorPalette.hovered.fill";
                    };
                };
                _disabled: {
                    color: "elements.disabled.contrast";
                    backgroundColor: "elements.disabled.fill";
                };
            };
        };
    };
    size: {
        small: {
            root: {
                padding: "[7px 15px]";
                fontSize: "sm";
                lineHeight: "[1rem]";
            };
            startIcon: {
                fontSize: "icon.xs";
            };
            endIcon: {
                fontSize: "icon.xs";
            };
        };
        medium: {
            root: {
                padding: "[7px 19px]";
                fontSize: "sm";
                lineHeight: "[1.25rem]";
            };
            startIcon: {
                fontSize: "[20px]";
            };
            endIcon: {
                fontSize: "[20px]";
            };
        };
        large: {
            root: {
                padding: "[15px 23px]";
                fontSize: "md";
                lineHeight: "[1.5rem]";
            };
            startIcon: {
                fontSize: "icon.sm";
            };
            endIcon: {
                fontSize: "icon.sm";
            };
        };
    };
    iconOnly: {
        true: {};
    };
    shape: {
        rounded: {
            root: {
                borderRadius: "full";
            };
        };
        box: {};
    };
}>;
type ButtonRecipeProps = RecipeVariantProps<typeof buttonRecipe>;

/**
 *  On the surface, building a custom styled button seems simple. However, there are many cross
 *  browser inconsistencies in interactions and accessibility features to consider. Button handles
 *  all of these interactions for you, so you can focus on the styling.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Button.html
 */
type ButtonProps = {
    className?: string;
    startIcon?: ReactNode;
    endIcon?: ReactNode;
    buttonAriaLabel?: string;
    children?: ReactNode;
    startIconClassName?: string;
    endIconClassName?: string;
} & ButtonProps$1 & ButtonRecipeProps;
/**
 * Button component that renders a button with customizable styles based on variant, size, and color.
 *
 * @param props The props for the button including variant, size, color, and additional HTML button props.
 *
 * @returns A button element with the combined styles from the MUI base button and the custom variants.
 */
declare const Button: ({ className, startIconClassName, endIconClassName, startIcon, endIcon, buttonAriaLabel, children, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;

type IconButtonProps = Omit<ButtonProps, 'startIcon' | 'endIcon' | 'startIconClassName' | 'endIconClassName'>;
declare const IconButton: (props: IconButtonProps) => react_jsx_runtime.JSX.Element;

interface AlertProps extends PropsWithChildren, Exclude<AlertRecipeProps, undefined> {
    icon?: ReactNode;
    title?: ReactNode;
    action?: ReactElement;
    onClose?: (_: PressEvent) => void;
    closeText?: string;
    className?: string;
    titleClassName?: string;
    messageClassName?: string;
    iconClassName?: string;
    actionClassName?: string;
}
declare const Alert: ({ icon, action, title, children, onClose, closeText, className, titleClassName, messageClassName, iconClassName, actionClassName, ...rest }: AlertProps) => react_jsx_runtime.JSX.Element;
declare const AlertTitle: ({ level, className, children, }: Pick<HeadingProps, 'level' | 'className' | 'children'>) => react_jsx_runtime.JSX.Element;
declare const AlertCloseButton: ({ children, className, ...props }: IconButtonProps) => react_jsx_runtime.JSX.Element;

declare const avatarRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "image", {
    size: {
        small: {
            root: {
                fontSize: "[0.75rem]";
                width: "[1.5rem]";
                height: "[1.5rem]";
            };
        };
        medium: {
            root: {
                fontSize: "[1rem]";
                width: "[2rem]";
                height: "[2rem]";
            };
        };
        large: {
            root: {
                fontSize: "[1.125rem]";
                width: "[2.25rem]";
                height: "[2.25rem]";
            };
        };
    };
    color: {
        default: {
            root: {
                colorPalette: "elements.default";
            };
        };
        primary: {
            root: {
                colorPalette: "elements.primary";
            };
        };
        secondary: {
            root: {
                colorPalette: "elements.secondary";
            };
        };
        tertiary: {
            root: {
                colorPalette: "elements.tertiary";
            };
        };
    };
    shape: {
        square: {
            root: {
                borderRadius: "sm";
            };
        };
        circle: {
            root: {
                borderRadius: "[50%]";
            };
        };
    };
}>;
type AvatarRecipeProps = RecipeVariantProps<typeof avatarRecipe>;

type AvatarProps = {
    className?: string;
    src?: string;
    alt?: string;
    children?: ReactNode;
} & AvatarRecipeProps;
declare function Avatar({ className, src, alt, children, ...rest }: AvatarProps): react_jsx_runtime.JSX.Element;

/**
 *  On the surface, building a custom styled button seems simple. However, there are many cross
 *  browser inconsistencies in interactions and accessibility features to consider. Button handles
 *  all of these interactions for you, so you can focus on the styling.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Button.html
 */
type ButtonLinkProps = {
    className?: string;
    startIcon?: ReactNode;
    endIcon?: ReactNode;
    buttonAriaLabel?: string;
    children?: ReactNode;
    startIconClassName?: string;
    endIconClassName?: string;
} & LinkProps$1 & ButtonRecipeProps;
/**
 * Button component that renders a button with customizable styles based on variant, size, and color.
 *
 * @param props The props for the button including variant, size, color, and additional HTML button props.
 *
 * @returns A button element with the combined styles from the MUI base button and the custom variants.
 */
declare const ButtonLink: ({ className, startIconClassName, endIconClassName, startIcon, endIcon, buttonAriaLabel, children, ...rest }: ButtonLinkProps) => react_jsx_runtime.JSX.Element;

declare const cardRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "media" | "body" | "footer" | "header", _allenai_varnish_panda_runtime_types.SlotRecipeVariantRecord<"root" | "media" | "body" | "footer" | "header">>;
type CardRecipeProps = RecipeVariantProps<typeof cardRecipe>;

type CardProps = {
    className?: string;
    children?: ReactNode;
    ariaLabel?: string;
} & CardRecipeProps;
declare const Card: ({ className, children, ariaLabel, ...rest }: PropsWithChildren<CardProps>) => react_jsx_runtime.JSX.Element;

type CardBodyProps = {
    className?: string;
    children?: ReactNode;
    ariaLabel?: string;
} & CardRecipeProps;
declare const CardBody: ({ className, children, ariaLabel, ...rest }: PropsWithChildren<CardBodyProps>) => react_jsx_runtime.JSX.Element;

type CardFooterProps = {
    className?: string;
    children?: ReactNode;
    ariaLabel?: string;
} & CardRecipeProps;
declare const CardFooter: ({ className, children, ariaLabel, ...rest }: PropsWithChildren<CardFooterProps>) => react_jsx_runtime.JSX.Element;

type CardHeaderProps = {
    className?: string;
    children?: ReactNode;
    ariaLabel?: string;
} & CardRecipeProps;
declare const CardHeader: ({ className, children, ariaLabel, ...rest }: PropsWithChildren<CardHeaderProps>) => react_jsx_runtime.JSX.Element;

type CardMediaProps = {
    className?: string;
    children?: ReactNode;
    ariaLabel?: string;
} & CardRecipeProps;
declare const CardMedia: ({ className, children, ariaLabel, ...rest }: PropsWithChildren<CardMediaProps>) => react_jsx_runtime.JSX.Element;

/**
 *  Checkboxes can be built with the <input> HTML element, but this can be difficult to style.
 *   Checkbox helps achieve accessible checkboxes that can be styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Checkbox.html
 */
/**
 * @remarks A checkbox recipe
 *
 * @param size - Size of the checkbox, values are `small`, `medium` (default), and `large`
 * @param color - Color of the checkbox, values are:
 *   `primary` (default), `secondary`, `tertiary`, `teal`, and `cream`
 */
declare const checkboxRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "icon" | "box", {
    size: {
        small: {
            root: {
                fontSize: "[12px]";
            };
            box: {
                width: "[0.75rem]";
                height: "[0.75rem]";
            };
        };
        medium: {
            root: {
                fontSize: "sm";
            };
            box: {
                width: "[0.875rem]";
                height: "[0.875rem]";
            };
        };
        large: {
            root: {
                fontSize: "md";
            };
            box: {
                width: "[1.25rem]";
                height: "[1.25rem]";
            };
            icon: {
                width: "[0.75rem]";
            };
        };
    };
    color: {
        default: {
            root: {
                _selected: {
                    colorPalette: "elements.overrides.form.checkbox.checked";
                };
            };
        };
        primary: {
            root: {
                colorPalette: "elements.primary";
            };
        };
        secondary: {
            root: {
                colorPalette: "elements.secondary";
            };
        };
        tertiary: {
            root: {
                colorPalette: "elements.tertiary";
            };
        };
    };
}>;
type CheckboxRecipeProps = RecipeVariantProps<typeof checkboxRecipe>;

/**
 *  Checkboxes can be built with the <input> HTML element, but this can be difficult to style.
 *  Checkbox helps achieve accessible checkboxes that can be styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Checkbox.html
 */
type CheckboxProps = {
    className?: string;
    iconClassName?: string;
    boxClassName?: string;
} & CheckboxProps$1 & CheckboxRecipeProps;
declare function Checkbox({ className, boxClassName, iconClassName, children, ...rest }: CheckboxProps): react_jsx_runtime.JSX.Element;

declare const CheckboxVariantContext: react.Context<CheckboxRecipeProps>;
/**
 * Checkbox groups can be built in HTML with the <fieldset> and <input> elements, however these
 * can be difficult to style. CheckboxGroup helps achieve accessible checkbox groups that can be
 * styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/CheckboxGroup.html
 */
type CheckboxGroupProps = Omit<CheckboxGroupProps$1, 'children'> & CheckboxRecipeProps & {
    label?: string;
    children?: ReactNode;
    description?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    className?: string;
    labelClassName?: string;
    descriptionClassName?: string;
    errorClassName?: string;
};
declare function CheckboxGroup({ label, children, description, errorMessage, className, labelClassName, descriptionClassName, errorClassName, ...props }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;

declare const chipGroupRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "error" | "label" | "description" | "chipList", _allenai_varnish_panda_runtime_types.SlotRecipeVariantRecord<"root" | "error" | "label" | "description" | "chipList">>;
type ChipGroupRecipeProps = RecipeVariantProps<typeof chipGroupRecipe>;

declare const chipRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "text" | "removeButton", {
    variant: {
        contained: {
            root: {
                color: "colorPalette.contrast";
                backgroundColor: "colorPalette.fill";
            };
        };
        outlined: {
            root: {
                borderColor: "colorPalette.stroke";
                color: "colorPalette.fill";
            };
        };
    };
    shape: {
        rounded: {
            root: {
                borderRadius: "full";
            };
        };
        box: {
            root: {
                borderRadius: "[4px]";
            };
        };
    };
    color: {
        default: {
            root: {
                colorPalette: "elements.default";
            };
        };
        faded: {
            root: {
                colorPalette: "elements.faded";
            };
        };
        primary: {
            root: {
                colorPalette: "elements.primary";
            };
        };
        secondary: {
            root: {
                colorPalette: "elements.secondary";
            };
        };
        tertiary: {
            root: {
                colorPalette: "elements.tertiary";
            };
        };
    };
    size: {
        xsmall: {
            root: {
                height: "[24px]";
                padding: "[3px 5px]";
                fontSize: "[12px]";
                gap: "[4px]";
            };
            text: {};
        };
        small: {
            root: {
                height: "[32px]";
                padding: "[3px 7px]";
                fontSize: "[14px]";
                gap: "[6px]";
            };
            text: {};
        };
        medium: {
            root: {
                height: "[36px]";
                padding: "[7px 15px]";
                fontSize: "sm";
                gap: "[6px]";
            };
            text: {};
        };
        large: {
            root: {
                height: "[48px]";
                padding: "[11px 19px]";
                fontSize: "md";
                gap: "[8px]";
            };
            text: {};
            removeButton: {
                fontSize: "[32px]";
            };
        };
    };
    hasIcon: {
        true: {};
    };
}>;
type ChipRecipeProps = RecipeVariantProps<typeof chipRecipe>;

type ChipItem = {
    id: string;
    text?: string;
    icon?: ReactNode;
    href?: string;
    isDisabled?: boolean;
    className?: string;
    removeButtonClassName?: string;
    onClick: TagProps['onClick'];
};
type ChipProps = TagProps & ChipItem & ChipRecipeProps;
declare const Chip: ({ icon, text, className, removeButtonClassName, ...rest }: ChipProps) => react_jsx_runtime.JSX.Element;

type ChipGroupProps = {
    items?: ChipItem[];
    label?: string;
    description?: string;
    errorMessage?: string;
    content?: ReactNode;
    className?: string;
    chipClassName?: string;
    labelClassName?: string;
    descriptionClassName?: string;
    errorClassName?: string;
} & TagGroupProps & ChipGroupRecipeProps & ChipRecipeProps;
declare const ChipGroupContext: react.Context<TagGroupProps & {}>;
declare const ChipGroup: ({ items, selectedKeys, label, description, errorMessage, className, chipClassName, labelClassName, descriptionClassName, errorClassName, children, ...rest }: PropsWithChildren<ChipGroupProps>) => react_jsx_runtime.JSX.Element;

type RemoveIndex<T> = {
    [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
};

declare const codeBlockRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "code", {
    colorMode: {
        light: {
            root: {
                backgroundColor: "var(--allenai-content-markdown-code-background-light)";
            };
        };
        dark: {
            root: {
                backgroundColor: "var(--allenai-content-markdown-code-background-dark)";
            };
        };
    };
}>;
type CodeBlockRecipeProps = RecipeVariantProps<typeof codeBlockRecipe>;

type SyntaxHighlighterPropsBase = Omit<RemoveIndex<SyntaxHighlighterProps>, 'style' | 'children'>;
type RequireChildrenOrValue = {
    value: string;
    children?: never;
} | PropsWithChildren<{
    value?: never;
}>;
type CodeBlockProps = {
    language?: SyntaxHighlighterProps['language'];
    PreTag?: SyntaxHighlighterProps['PreTag'];
    CodeTag?: SyntaxHighlighterProps['CodeTag'];
    inline?: boolean;
    className?: string;
    codeTagClassName?: string;
    codeStyle?: SyntaxHighlighterProps['style'];
    customStyle?: SyntaxHighlighterProps['customStyle'];
    colorMode?: 'light' | 'dark';
} & CodeBlockRecipeProps & RequireChildrenOrValue & SyntaxHighlighterPropsBase;
declare const CodeBlock: ({ language, PreTag, CodeTag, codeStyle, customStyle, colorMode, wrapLongLines, value, codeTagClassName, className, inline, children, ...rest }: CodeBlockProps) => react_jsx_runtime.JSX.Element;

declare const descriptionRecipe: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    size: {
        small: {
            fontSize: "[12px]";
        };
        medium: {
            fontSize: "sm";
        };
        large: {
            fontSize: "md";
        };
    };
}>;
type DescriptionRecipeProps = RecipeVariantProps$1<typeof descriptionRecipe>;

type DescriptionProps = {
    className?: string;
} & TextProps & DescriptionRecipeProps;
declare const Description: ({ className, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element | null;

declare const dialogStyles: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "actions" | "heading", {}>;
type DialogRecipeProps = Exclude<RecipeVariantProps<typeof dialogStyles>, undefined>;

type DialogHeadingProps = HeadingProps & DialogRecipeProps;
declare const DialogHeadingBase: (props: DialogHeadingProps) => react_jsx_runtime.JSX.Element;
declare const DialogHeading: ({ className, ...rest }: DialogHeadingProps) => react_jsx_runtime.JSX.Element;

interface CssProp {
    css?: SystemStyleObject;
}
type DialogActionsProps = HTMLProps<HTMLDivElement> & DialogRecipeProps & CssProp;
declare const DialogActions: ({ className, css: cssProp, children, ...rest }: DialogActionsProps) => react_jsx_runtime.JSX.Element;
declare const DialogCloseButton: ({ children, ...rest }: ButtonProps) => react_jsx_runtime.JSX.Element;

interface DialogTriggerProps extends DialogTriggerProps$1 {
    content?: ReactNode;
}
declare const DialogTrigger: ({ children, content, ...rest }: DialogTriggerProps) => react_jsx_runtime.JSX.Element;

interface DialogClassNames {
    headingClassName?: string;
    actionsClassName?: string;
}
interface DialogProps extends DialogProps$1, DialogRecipeProps, DialogClassNames {
    heading?: ReactNode;
    buttons?: ReactNode;
    children: ReactNode;
}
declare const Dialog: ({ heading, buttons, className, headingClassName, actionsClassName, children, ...rest }: DialogProps) => react_jsx_runtime.JSX.Element;

declare const drawerRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "backdrop" | "content" | "header" | "defaultHeader", {
    placement: {
        left: {
            root: {
                top: "[0]";
                left: "[0]";
                width: "[320px]";
                height: "[100%]";
                transform: "[translateX(-100%)]";
                lg: {
                    width: "[320px]";
                    height: "[100%]";
                };
                md: {
                    width: "[320px]";
                    height: "[100%]";
                };
                sm: {
                    width: "[100%]";
                    height: "[100%]";
                };
            };
        };
        right: {
            root: {
                top: "[0]";
                right: "[0]";
                left: "[unset]";
                width: "[320px]";
                height: "[100%]";
                transform: "[translateX(100%)]";
                lg: {
                    width: "[320px]";
                    height: "[100%]";
                };
                md: {
                    width: "[320px]";
                    height: "[100%]";
                };
                sm: {
                    width: "[100%]";
                    height: "[100%]";
                };
            };
        };
        top: {
            root: {
                top: "[0]";
                left: "[0]";
                right: "[0]";
                width: "[100%]";
                height: "[320px]";
                transform: "[translateY(-100%)]";
                lg: {
                    width: "[100%]";
                    height: "[320px]";
                };
                md: {
                    width: "[100%]";
                    height: "[320px]";
                };
                sm: {
                    height: "[100%]";
                };
            };
        };
        bottom: {
            root: {
                bottom: "[0]";
                left: "[0]";
                right: "[unset]";
                top: "[unset]";
                width: "[100%]";
                height: "[320px]";
                transform: "[translateY(100%)]";
                lg: {
                    width: "[100%]";
                    height: "[320px]";
                };
                md: {
                    width: "[100%]";
                    height: "[320px]";
                };
                sm: {
                    height: "[100%]";
                };
            };
        };
    };
    isOpen: {
        true: {
            root: {
                transform: "translate(0)";
                zIndex: "drawer";
            };
            backdrop: {
                visibility: "visible";
                opacity: "1";
                pointerEvents: "auto";
                zIndex: "backdrop";
                transition: "[opacity 0.3s ease, visibility 0s 0.3s]";
            };
        };
        false: {};
    };
    backdrop: {
        true: {
            backdrop: {};
        };
        false: {
            backdrop: {
                display: "none";
            };
        };
    };
    variant: {
        temporary: {
            root: {
                position: "fixed";
            };
        };
        persistent: {
            root: {
                position: "relative";
                transform: "none";
                width: "[20%]";
                height: "[100%]";
                transition: "[transform 0.3s ease]";
            };
            backdrop: {
                display: "none";
            };
        };
        permanent: {
            root: {
                position: "relative";
                transform: "none";
                width: "[20%]";
                height: "[100%]";
            };
            backdrop: {
                display: "none";
            };
        };
    };
}>;
type DrawerRecipeProps = RecipeVariantProps<typeof drawerRecipe>;

type DrawerProps = {
    className?: string;
    backdropClassName?: string;
    headerClassName?: string;
    contentClassName?: string;
    header: ReactNode;
    isOpen: boolean;
    placement?: 'left' | 'right' | 'top' | 'bottom';
    variant?: 'temporary' | 'persistent' | 'permanent';
    backdrop?: boolean;
    children: ReactNode;
    ariaLabel?: string;
    onClose?: () => void;
} & DrawerRecipeProps;
declare function Drawer({ className, isOpen, placement, backdrop, children, variant, header, backdropClassName, headerClassName, contentClassName, ariaLabel, onClose, ...rest }: DrawerProps): react_jsx_runtime.JSX.Element | null;

declare const errorBoundaryRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "errorSection", _allenai_varnish_panda_runtime_types.SlotRecipeVariantRecord<"root" | "errorSection">>;
type ErrorBoundaryRecipeProps = RecipeVariantProps<typeof errorBoundaryRecipe>;

type ErrorBoundaryProps = {
    fallback?: ReactNode;
    children: ReactNode;
    className?: string;
    errorSectionClassName?: string;
} & ErrorBoundaryRecipeProps;
type ErrorBoundaryState = {
    hasError: boolean;
    error?: Error;
    errorInfo?: ErrorInfo;
};
declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
    constructor(props: ErrorBoundaryProps);
    static getDerivedStateFromError(): ErrorBoundaryState;
    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
    render(): string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element | null | undefined;
}

declare const formRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root", _allenai_varnish_panda_runtime_types.SlotRecipeVariantRecord<"root">>;
type FormRecipeProps = RecipeVariantProps<typeof formRecipe>;

type FormProps = {
    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
    onReset?: () => void;
    className?: string;
} & FormProps$1 & FormRecipeProps;
declare function Form({ className, onSubmit, onReset, children, ...rest }: FormProps): react_jsx_runtime.JSX.Element;

declare const footerRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "linksGroup" | "copyRight", {
    variant: {
        full: {
            root: {
                flexDirection: "column";
                gap: "[16px]";
            };
        };
        slimLeft: {
            root: {
                justifyContent: "flex-start";
            };
            copyRight: {
                display: "flex";
                alignItems: "center";
            };
        };
        slimCenter: {
            root: {
                justifyContent: "center";
            };
            copyRight: {
                display: "flex";
                alignItems: "center";
                justifyContent: "center";
            };
        };
    };
    color: {
        default: {
            root: {
                backgroundColor: "background.opacity-100";
            };
        };
        filled: {
            root: {
                backgroundColor: "background.opacity-10.reversed";
            };
        };
    };
}>;
type FooterRecipeProps = RecipeVariantProps<typeof footerRecipe>;

type FooterProps = {
    className?: string;
    linksGroupClassName?: string;
    copyRightClassName?: string;
    variant?: 'full' | 'slimLeft' | 'slimCenter';
    linksGroup?: ReactNode[];
} & FooterRecipeProps;
declare function Footer({ className, linksGroupClassName, copyRightClassName, variant, linksGroup, ...rest }: FooterProps): react_jsx_runtime.JSX.Element;

declare const fieldErrorRecipe: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    size: {
        small: {
            fontSize: "[12px]";
        };
        medium: {
            fontSize: "sm";
        };
        large: {
            fontSize: "md";
        };
    };
}>;
type FieldErrorRecipeProps = RecipeVariantProps$1<typeof fieldErrorRecipe>;

type FieldErrorProps = {
    className?: string;
} & FieldErrorProps$1 & FieldErrorRecipeProps;
declare const FieldError: ({ className, ...rest }: FieldErrorProps) => react_jsx_runtime.JSX.Element | null;

declare const headerRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "icon" | "container" | "search" | "nav" | "action" | "logo" | "slots", {
    position: {
        fixed: {
            root: {
                position: "fixed";
            };
        };
        sticky: {
            root: {
                position: "sticky";
            };
        };
    };
    shape: {
        box: {
            root: {
                borderRadius: "[16px]";
                smOnly: {
                    borderRadius: "[8px]";
                };
            };
            container: {
                padding: "[16px]";
                smOnly: {
                    padding: "[16px]";
                };
            };
        };
        rounded: {
            root: {
                borderRadius: "full";
            };
            container: {
                padding: "[16px 32px]";
                smOnly: {
                    padding: "[16px 24px]";
                };
            };
        };
        full: {
            root: {
                border: "none";
                backgroundColor: "[transparent]";
            };
            container: {
                padding: "[16px 24px]";
                smOnly: {
                    padding: "[16px]";
                };
            };
        };
    };
    fullWidth: {
        false: {};
        true: {
            root: {
                width: "[100%]";
                backgroundColor: "[transparent]";
                border: "none";
            };
        };
    };
}>;
type HeaderRecipeProps = RecipeVariantProps<typeof headerRecipe>;

type HeaderProps = {
    logo?: ReactNode;
    navItem?: ReactNode;
    search?: ReactNode;
    action?: ReactNode;
    className?: string;
    searchClassName?: string;
    actionClassName?: string;
    navClassName?: string;
    logoClassName?: string;
    iconClassName?: string;
} & HeaderRecipeProps;
declare function Header({ logo, navItem, search, action, className, searchClassName, actionClassName, navClassName, logoClassName, ...rest }: HeaderProps): react_jsx_runtime.JSX.Element;

declare const menuRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "separator" | "header" | "menuItem" | "menuSection", _allenai_varnish_panda_runtime_types.SlotRecipeVariantRecord<"root" | "separator" | "header" | "menuItem" | "menuSection">>;
type MenuRecipeProps = Exclude<RecipeVariantProps<typeof menuRecipe>, undefined>;

type MenuHeaderProps = {
    className?: string;
    children?: ReactNode;
} & MenuRecipeProps;
declare const MenuHeader: ({ className, children, ...rest }: PropsWithChildren<MenuHeaderProps>) => react_jsx_runtime.JSX.Element;

type MarkdownProps = Options & {
    markdownContianerClass?: string;
    className?: string;
};
declare const defaultRemarkPlugins: (typeof remarkGfm)[];
declare const defaultComponents: Components;
declare const Markdown: ({ markdownContianerClass, className, children, components, remarkPlugins, ...rest }: MarkdownProps) => react_jsx_runtime.JSX.Element;

interface OverlayArrowProps extends Omit<OverlayArrowProps$1, 'className' | 'children'> {
    className?: string;
}

declare const tooltipRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "arrow", {
    shape: {
        box: {
            root: {
                borderRadius: "sm";
            };
        };
        rounded: {
            root: {
                padding: "[6px 18px]";
                borderRadius: "[full]";
            };
        };
    };
    color: {
        default: {
            root: {
                backgroundColor: "background.opacity-100";
                color: "text";
            };
            arrow: {
                color: "background.opacity-100";
            };
        };
        reversed: {
            root: {
                backgroundColor: "background.opacity-100.reversed";
                color: "text.reversed";
            };
            arrow: {
                color: "background.opacity-100.reversed";
            };
        };
    };
}>;
type TooltipRecipeProps = RecipeVariantProps<typeof tooltipRecipe>;

type TooltipProps = {
    content: ReactNode;
    className?: string;
    arrow: boolean;
    arrowClassName?: string;
} & Pick<TooltipTriggerComponentProps, 'isDisabled' | 'isOpen' | 'onOpenChange' | 'delay' | 'closeDelay'> & TooltipProps$1 & TooltipRecipeProps;
declare const Tooltip: ({ content, isOpen, className, placement, offset, delay, closeDelay, arrow, arrowClassName, onOpenChange, children, ...rest }: PropsWithChildren<TooltipProps>) => react_jsx_runtime.JSX.Element;
type TooltipOverlayArrowProps = OverlayArrowProps & TooltipRecipeProps;
declare const TooltipOverlayArrow: ({ className, ...rest }: TooltipOverlayArrowProps) => react_jsx_runtime.JSX.Element;

declare const inputRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "container" | "error" | "input" | "label" | "description" | "startControls" | "endControls", {
    variant: {
        contained: {};
        outlined: {};
    };
    size: {
        small: {
            input: {
                lineHeight: "[16px]";
            };
        };
        medium: {
            input: {
                lineHeight: "[20px]";
            };
        };
        large: {
            input: {
                lineHeight: "[24px]";
            };
        };
    };
    shape: {
        box: {};
        rounded: {};
    };
    fullWidth: {
        false: {};
        true: {
            root: {
                width: "[100%]";
            };
            input: {
                width: "[100%]";
            };
        };
    };
}>;
type InputRecipeProps = Exclude<RecipeVariantProps<typeof inputRecipe>, undefined>;

interface InputProps extends TextFieldProps, InputRecipeProps {
    label?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    description?: string;
    startControls?: ReactNode;
    endControls?: ReactNode;
    startControlsClassName?: string;
    endControlsClassName?: string;
    className?: string;
    containerClassName?: string;
    inputClassName?: string;
    labelClassName?: string;
    errorClassName?: string;
    descriptionClassName?: string;
}
declare const Input: ({ label, errorMessage, description, startControls, endControls, startControlsClassName, endControlsClassName, className, containerClassName, inputClassName, labelClassName, errorClassName, descriptionClassName, ...rest }: InputProps) => react_jsx_runtime.JSX.Element;

/**
 * @remarks A label recipe
 *
 * @param size - Size of the label, values are `small`, `medium` (default), and `large`
 *
 */
declare const labelRecipe: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    size: {
        small: {
            fontSize: "[12px]";
        };
        medium: {
            fontSize: "sm";
        };
        large: {
            fontSize: "md";
        };
    };
}>;
type LabelRecipeProps = RecipeVariantProps$1<typeof labelRecipe>;

type LabelProps = {
    className?: string;
} & LabelProps$1 & LabelRecipeProps;
declare const Label: ({ className, ...rest }: LabelProps) => react_jsx_runtime.JSX.Element | null;

declare const fileInputRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "icon" | "text" | "button", {
    iconOnly: {
        false: {};
        true: {
            button: {
                padding: "[0]";
                border: "[none]";
                cursor: "pointer";
                backgroundColor: "[transparent]";
                _dark: {
                    backgroundColor: "[transparent]";
                };
            };
        };
    };
    variant: {
        contained: {};
        outlined: {
            button: {
                border: "[1px solid]";
                borderColor: "dark-teal.20";
                _dark: {
                    borderColor: "[color-mix(in srgb, {colors.cream.100} 20%, {colors.background})]";
                    color: "text";
                };
            };
        };
    };
    size: {
        small: {
            button: {
                padding: "[6px 12px]";
                fontSize: "[12px]";
            };
        };
        medium: {
            button: {
                padding: "[12px 24px]";
                fontSize: "[14px]";
            };
        };
        large: {
            button: {
                padding: "[24px 36px]";
                fontSize: "[16px]";
            };
        };
        full: {
            root: {
                width: "[100%]";
                height: "[100%]";
            };
            button: {
                padding: "[12px 24px]";
                fontSize: "[14px]";
                width: "[100%]";
                height: "[100%]";
            };
        };
    };
}>;
type FileInputRecipeProps = RecipeVariantProps<typeof fileInputRecipe>;

/**
 * FileInput is an area where a user can upload files via drag & drop.
 */
type FileInputProps = {
    onSelect?: (files: FileList | null) => void;
    acceptedFileTypes?: string[];
    allowsMultiple?: boolean;
    icon?: ReactNode;
    defaultText?: string | ReactNode;
    className?: string;
    buttonClassName?: string;
    textClassName?: string;
    iconClassName?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    errorClassName?: string;
} & ButtonProps$1 & DropZoneProps & FileInputRecipeProps;
declare const FileInput: ({ onSelect, acceptedFileTypes, allowsMultiple, icon, defaultText, className, buttonClassName, textClassName, iconClassName, children, ...rest }: PropsWithChildren<FileInputProps>) => react_jsx_runtime.JSX.Element;

/**
 * FileInputButton allows user to click and browser files to upload.
 */
type FileInputButtonProps = {
    onSelect?: (files: FileList | null) => void;
    acceptedFileTypes?: string[];
    allowsMultiple?: boolean;
    icon?: ReactNode | false;
    buttonText?: string | ReactNode;
    className?: string;
    textClassName?: string;
    iconClassName?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    errorClassName?: string;
} & ButtonProps$1 & FileInputRecipeProps;
declare const FileInputButton: ({ onSelect, acceptedFileTypes, allowsMultiple, icon, buttonText, className, textClassName, iconClassName, children, onClick, ...rest }: PropsWithChildren<FileInputButtonProps>) => react_jsx_runtime.JSX.Element;

declare const textAreaRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "error" | "label" | "description" | "shared" | "growContainer" | "textArea", {
    variant: {
        contained: {};
        outlined: {};
    };
    size: {
        small: {};
        medium: {};
        large: {};
    };
    shape: {
        box: {};
        rounded: {};
    };
    fullWidth: {
        false: {};
        true: {
            root: {
                width: "[100%]";
            };
            shared: {
                width: "[100%]";
            };
        };
    };
}>;
type TextAreaRecipeProps = RecipeVariantProps<typeof textAreaRecipe>;

type TextAreaProps = {
    children?: string;
    minRows?: number;
    maxRows?: number;
    label?: string;
    description?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    className?: string;
    textAreaClassName?: string;
    growContainerClassName?: string;
    labelClassName?: string;
    descriptionClassName?: string;
    errorClassName?: string;
} & TextAreaProps$1 & TextFieldProps & TextAreaRecipeProps;
declare const TextArea: ({ minRows, maxRows, label, description, errorMessage, className, textAreaClassName, growContainerClassName, labelClassName, descriptionClassName, errorClassName, isDisabled, ...rest }: TextAreaProps) => react_jsx_runtime.JSX.Element;

type TextAreaControlProps = {
    includeTextField?: boolean;
} & Omit<TextAreaProps, 'label' | 'description' | 'errorMessage' | 'labelClassName' | 'descriptionClassName' | 'errorClassName'>;
declare const TextAreaControl: ({ includeTextField, minRows, maxRows, onChange, className, growContainerClassName, textAreaClassName, ...rest }: TextAreaControlProps) => react_jsx_runtime.JSX.Element;

declare const iconStyles: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    size: {
        inherit: {};
        small: {
            fontSize: "icon.sm";
        };
        medium: {
            fontSize: "icon.md";
        };
        large: {
            fontSize: "icon.lg";
        };
    };
}>;
type IconRecipeProps = Exclude<RecipeVariantProps<typeof iconStyles>, undefined>;

declare const svgStyles: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    color: {
        default: {
            color: "elements.default.fill";
        };
        primary: {
            color: "elements.primary.fill";
        };
        secondary: {
            color: "elements.secondary.fill";
        };
        tertiary: {
            color: "elements.tertiary.fill";
        };
    };
}>;
type SVGRecipePropsBase = RecipeVariantProps<typeof svgStyles>;
type SVGRecipeColorProp = Exclude<SVGRecipePropsBase, undefined>['color'];
type SystemColorProp = SystemStyleObject['color'];
type SVGColorPropType = SystemColorProp | SVGRecipeColorProp | false;
type SVGColorProp = {
    color?: SVGColorPropType;
};
type SVGRecipeProps = Omit<SVGRecipePropsBase, 'color'> & SVGColorProp;

type ChildrenAsElement = {
    children: ReactElement;
};
type IconProps = Omit<HTMLAttributes<SVGElement>, 'color' | 'children'> & ChildrenAsElement & SVGColorProp & IconRecipeProps;
type IconPropsImpl = Omit<IconProps, 'children'>;
declare const Icon: ({ children, color, className: origClassName, ...rest }: IconProps) => ReactElement<any, string | react.JSXElementConstructor<any>>;
declare const varnishIcon: (IconComponent: ComponentType) => ComponentType<IconPropsImpl>;
declare const createVarnishIcon: (svgIcon: ReactElement) => ComponentType<IconPropsImpl>;

type SVGIconProps = Omit<SVGAttributes<SVGElement>, 'color' | 'children'> & IconRecipeProps & SVGColorProp;
declare const SVGIcon: ({ viewBox, color, className, ...rest }: SVGIconProps) => react_jsx_runtime.JSX.Element;

type SVGIconSpritePropsInternal = {
    icon: string;
    forceInternal?: boolean;
} & Omit<SVGIconProps, 'children' | 'viewBox'>;
type SVGIconSpriteProps = Omit<SVGIconSpritePropsInternal, 'icon'>;
declare const SVGIconSprite: ({ icon, ...rest }: SVGIconSpritePropsInternal) => react_jsx_runtime.JSX.Element;
declare const varnishIconSprite: (icon: string) => ComponentType<SVGIconSpriteProps>;

declare const Upload: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Spark: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Remove: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Menu$1: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Close: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Check: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Add: (props: SVGIconSpriteProps) => react_jsx_runtime.JSX.Element;

declare const index$1_Add: typeof Add;
declare const index$1_Check: typeof Check;
declare const index$1_Close: typeof Close;
declare const index$1_Remove: typeof Remove;
declare const index$1_Spark: typeof Spark;
declare const index$1_Upload: typeof Upload;
declare namespace index$1 {
  export { index$1_Add as Add, index$1_Check as Check, index$1_Close as Close, Menu$1 as Menu, index$1_Remove as Remove, index$1_Spark as Spark, index$1_Upload as Upload };
}

interface SVGBaseProps extends Omit<SVGAttributes<SVGElement>, 'color'>, SVGRecipeProps {
    aspectRatio?: string;
    title?: string;
}
declare const SVGBase: ({ viewBox, title, color, aspectRatio, className, role, children, ...rest }: SVGBaseProps) => react_jsx_runtime.JSX.Element;
interface SVGSpriteProps extends SVGBaseProps {
    forceInternal?: boolean;
}

declare const SVGSpriteLink: ({ href: hrefIn }: {
    href?: string;
}) => react_jsx_runtime.JSX.Element;

interface SpriteConfig {
    idPrefix?: string;
    external?: boolean;
    sprite?: string | null;
}
declare const SpriteProvider: ({ children, ...spriteState }: PropsWithChildren<SpriteConfig>) => react_jsx_runtime.JSX.Element;
declare const useSpriteConfig: () => SpriteConfig;

declare const Varnish: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Tulu3: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Tulu370B: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Tulu3405B: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Tulu: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Skiff: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const SafetyTool: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Playground: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const PixMo: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Paloma: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const OLMoE: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const OLMo: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const OLMES: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Molmo: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const EarthSystems: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Dolma: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const DataDecide: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Ai2Playground: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Ai2OpenScholar8B: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Ai2OLMoE: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const Ai2: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const ACE: ({ color, aspectRatio, ...rest }: SVGSpriteProps) => react_jsx_runtime.JSX.Element;

declare const index_ACE: typeof ACE;
declare const index_Ai2: typeof Ai2;
declare const index_Ai2OLMoE: typeof Ai2OLMoE;
declare const index_Ai2OpenScholar8B: typeof Ai2OpenScholar8B;
declare const index_Ai2Playground: typeof Ai2Playground;
declare const index_DataDecide: typeof DataDecide;
declare const index_Dolma: typeof Dolma;
declare const index_EarthSystems: typeof EarthSystems;
declare const index_Molmo: typeof Molmo;
declare const index_OLMES: typeof OLMES;
declare const index_OLMo: typeof OLMo;
declare const index_OLMoE: typeof OLMoE;
declare const index_Paloma: typeof Paloma;
declare const index_PixMo: typeof PixMo;
declare const index_Playground: typeof Playground;
declare const index_SafetyTool: typeof SafetyTool;
declare const index_Skiff: typeof Skiff;
declare const index_Tulu: typeof Tulu;
declare const index_Tulu3: typeof Tulu3;
declare const index_Tulu3405B: typeof Tulu3405B;
declare const index_Tulu370B: typeof Tulu370B;
declare const index_Varnish: typeof Varnish;
declare namespace index {
  export { index_ACE as ACE, index_Ai2 as Ai2, index_Ai2OLMoE as Ai2OLMoE, index_Ai2OpenScholar8B as Ai2OpenScholar8B, index_Ai2Playground as Ai2Playground, index_DataDecide as DataDecide, index_Dolma as Dolma, index_EarthSystems as EarthSystems, index_Molmo as Molmo, index_OLMES as OLMES, index_OLMo as OLMo, index_OLMoE as OLMoE, index_Paloma as Paloma, index_PixMo as PixMo, index_Playground as Playground, index_SafetyTool as SafetyTool, index_Skiff as Skiff, index_Tulu as Tulu, index_Tulu3 as Tulu3, index_Tulu3405B as Tulu3405B, index_Tulu370B as Tulu370B, index_Varnish as Varnish };
}

type MenuProps<T = object> = {
    children?: ReactNode;
    className?: string;
} & MenuProps$1<T> & MenuRecipeProps;
declare const Menu: ({ className, children, ...rest }: PropsWithChildren<MenuProps>) => react_jsx_runtime.JSX.Element;

type MenuItemProps<T = object> = {
    children?: ReactNode;
    className?: string;
} & MenuItemProps$1<T> & MenuRecipeProps;
declare const MenuItem: ({ className, children, ...rest }: PropsWithChildren<MenuItemProps>) => react_jsx_runtime.JSX.Element;

type MenuSelectionProps<T = object> = {
    children?: ReactNode;
    className?: string;
} & MenuSectionProps<T> & MenuRecipeProps;
declare const MenuSection: ({ className, children, ...rest }: PropsWithChildren<MenuSelectionProps>) => react_jsx_runtime.JSX.Element;

type MenuTriggerProps = {
    children?: ReactNode;
} & MenuTriggerProps$1;
declare const MenuTrigger: ({ children, ...rest }: PropsWithChildren<MenuTriggerProps>) => react_jsx_runtime.JSX.Element;

type SubmenuTriggerProps = {
    children?: ReactNode;
} & SubmenuTriggerProps$1;
declare const SubmenuTrigger: ({ children, ...rest }: PropsWithChildren<SubmenuTriggerProps>) => react_jsx_runtime.JSX.Element;

type SeparatorProps = {
    className?: string;
} & SeparatorProps$1;
declare const Separator: ({ className, ...rest }: PropsWithChildren<SeparatorProps>) => react_jsx_runtime.JSX.Element;

type KeyboardProps = {
    children?: ReactNode;
};
declare const Keyboard: ({ children, ...rest }: PropsWithChildren<KeyboardProps>) => react_jsx_runtime.JSX.Element;

type MenuTextProps = TextProps;
declare const MenuText: (props: PropsWithChildren<MenuTextProps>) => react_jsx_runtime.JSX.Element;

declare const modalStyles: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"actions" | "closeButton" | "heading" | "modal" | "content" | "overlay" | "dialog", {
    fullWidth: {
        true: {
            modal: {
                flex: "1";
                width: "[100%]";
            };
        };
    };
    size: {
        small: {
            modal: {
                maxWidth: "[300px]";
            };
        };
        medium: {
            modal: {
                maxWidth: "[500px]";
            };
        };
        large: {
            modal: {
                maxWidth: "[800px]";
            };
        };
    };
    color: {
        default: {
            modal: {
                backgroundColor: "background.opacity-100";
                color: "text";
            };
        };
        reversed: {
            modal: {
                backgroundColor: "background.opacity-100.reversed";
                color: "text.reversed";
            };
        };
    };
}>;
type ModalRecipeProps = Exclude<RecipeVariantProps<typeof modalStyles>, undefined>;

interface ModalBaseClassNames {
    dialogClassName?: string;
    overlayClassName?: string;
}
interface ModalBaseProps extends Omit<ModalOverlayProps, 'className'>, ModalRecipeProps, ModalBaseClassNames, Pick<DialogProps, 'heading'> {
    className?: string;
    children?: ReactNode;
}
declare const ModalBase: ({ className, style, overlayClassName, dialogClassName, heading, children, ...rest }: ModalBaseProps) => react_jsx_runtime.JSX.Element;
interface ModalClassNames extends Pick<DialogProps, 'actionsClassName'> {
    closeClassName?: string;
    headingClassName?: string;
    closeButtonClassName?: string;
    contentClassName?: string;
}
interface ModalProps extends ModalBaseProps, Pick<DialogProps, 'buttons'>, ModalClassNames {
    closeButton?: ReactNode;
    children: ReactNode;
}
declare const Modal: ({ heading, closeButton, buttons, headingClassName, closeButtonClassName, actionsClassName, contentClassName, children, ...rest }: ModalProps) => react_jsx_runtime.JSX.Element;

type ModalHeadingProps = DialogHeadingProps & ModalRecipeProps & Pick<ModalProps, 'closeButton' | 'closeButtonClassName'>;
declare const ModalHeading: ({ className, closeButton, closeButtonClassName, children, ...rest }: ModalHeadingProps) => react_jsx_runtime.JSX.Element;

interface ModalContentProps extends ModalRecipeProps, PropsWithChildren {
    className?: string;
}
declare const ModalContent: ({ className, children, ...rest }: ModalContentProps) => react_jsx_runtime.JSX.Element;

interface ModalCloseIconButtonProps extends ModalRecipeProps, PropsWithChildren {
    className?: string;
}
declare const ModalCloseIconButton: ({ className, children, ...rest }: ModalCloseIconButtonProps) => react_jsx_runtime.JSX.Element;
interface ModalActionsProps extends ModalRecipeProps, PropsWithChildren {
    className?: string;
}
declare const ModalActions: ({ className, children, ...rest }: ModalActionsProps) => react_jsx_runtime.JSX.Element;

/**
 *  Radio can be built with the <input> HTML element, but this can be difficult to style.
 *   Radio helps achieve accessible radio inputs that can be styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/RadioGroup.html
 */
/**
 * @remarks A radio recipe
 *
 * @param size - Size of the radio, values are `small`, `medium` (default), and `large`
 * @param color - Color of the radio, values are:
 *   `primary` (default), `secondary`, `tertiary`, `teal`, and `cream`
 */
declare const radioRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "circle", {
    size: {
        small: {
            root: {
                fontSize: "[12px]";
            };
            circle: {
                width: "[0.75rem]";
                height: "[0.75rem]";
                _before: {
                    width: "[0.25rem]";
                };
            };
        };
        medium: {
            root: {
                fontSize: "sm";
            };
            circle: {
                width: "[0.875rem]";
                height: "[0.875rem]";
                _before: {
                    width: "[0.375rem]";
                };
            };
        };
        large: {
            root: {
                fontSize: "md";
            };
            circle: {
                width: "[1.25rem]";
                height: "[1.25rem]";
                _before: {
                    width: "[0.5rem]";
                };
            };
        };
    };
    color: {
        default: {
            root: {
                _selectedNotDisabledNotInvalid: {
                    colorPalette: "elements.overrides.form.radio.checked";
                };
            };
        };
        primary: {
            root: {
                _selectedNotDisabledNotInvalid: {
                    colorPalette: "elements.primary";
                };
            };
        };
        secondary: {
            root: {
                _selectedNotDisabledNotInvalid: {
                    colorPalette: "elements.secondary";
                };
            };
        };
        tertiary: {
            root: {
                _selectedNotDisabledNotInvalid: {
                    colorPalette: "elements.tertiary";
                };
            };
        };
    };
}>;
type RadioRecipeProps = RecipeVariantProps<typeof radioRecipe>;

/**
 *  Radios can be built with the <input> HTML element, but this can be difficult to style.
 *  Radio helps achieve accessible radioes that can be styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Radio.html
 */
type RadioProps = {
    className?: string;
    circleClassName?: string;
} & RadioProps$1 & RadioRecipeProps;
declare function Radio({ className, circleClassName, children, ...rest }: RadioProps): react_jsx_runtime.JSX.Element;

declare const RadioVariantContext: react.Context<RadioRecipeProps>;
/**
 * Radio groups can be built in HTML with the <fieldset> and <input> elements, however these
 * can be difficult to style. RadioGroup helps achieve accessible radio groups that can be
 * styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/RadioGroup.html
 */
type RadioGroupProps = Omit<RadioGroupProps$1, 'children'> & RadioRecipeProps & {
    label?: string;
    children?: ReactNode;
    description?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    className?: string;
    labelClassName?: string;
    descriptionClassName?: string;
    errorClassName?: string;
};
declare function RadioGroup({ label, children, description, errorMessage, className, labelClassName, descriptionClassName, errorClassName, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;

declare const linkRecipe: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    color: {
        default: {
            color: "links";
            _hover: {
                color: "links.hovered";
            };
        };
        reversed: {
            color: "links.reversed";
            _hover: {
                color: "links.hovered.reversed";
            };
        };
        text: {
            color: "text";
        };
        primary: {
            color: "elements.primary.fill";
        };
        secondary: {
            color: "elements.secondary.fill";
        };
        tertiary: {
            color: "elements.tertiary.fill";
        };
    };
    underline: {
        always: {
            textDecorationLine: "underline";
            textDecorationColor: "[currentColor/50]";
            _hover: {
                _notDisabled: {
                    textDecorationColor: "[inherit]";
                };
            };
        };
        none: {
            textDecoration: "none";
        };
    };
    size: {
        small: {
            fontSize: "sm";
        };
        medium: {
            fontSize: "md";
        };
        large: {
            fontSize: "lg";
        };
    };
}>;
type LinkRecipeProps = RecipeVariantProps<typeof linkRecipe>;

type LinkProps = {
    className?: string;
    isDisabled?: boolean;
    target?: string;
} & LinkProps$1 & LinkRecipeProps;
declare function Link({ className, children, ...rest }: LinkProps): react_jsx_runtime.JSX.Element;

declare const loadingSpinnerRecipe: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    duration: {
        fast: {
            animationDuration: "0.5s";
        };
        medium: {
            animationDuration: "0.75s";
        };
        slow: {
            animationDuration: "1.0s";
        };
    };
    size: {
        small: {
            width: "[16px]";
            height: "[16px]";
            '& svg': {
                width: "[16px]";
                height: "[16px]";
            };
        };
        medium: {
            width: "[32px]";
            height: "[32px]";
            '& svg': {
                width: "[32px]";
                height: "[32px]";
            };
        };
        large: {
            width: "[64px]";
            height: "[64px]";
            '& svg': {
                width: "[64px]";
                height: "[64px]";
            };
        };
        full: {
            width: "[100%]";
            height: "[100%]";
            '& svg': {
                width: "[100%]";
                height: "[100%]";
            };
        };
        unset: {
            width: "[unset]";
            height: "[unset]";
        };
    };
    color: {
        primary: {
            color: "elements.primary.fill";
        };
        secondary: {
            color: "elements.secondary.fill";
        };
        tertiary: {
            color: "elements.tertiary.fill";
        };
    };
}>;
type LoadingSpinnerRecipeProps = RecipeVariantProps<typeof loadingSpinnerRecipe>;

type LoadingSpinnerProps = {
    children?: ReactNode;
    className?: string;
} & ProgressBarProps & LoadingSpinnerRecipeProps;
declare const LoadingSpinner: ({ children, className, ...rest }: LoadingSpinnerProps) => react_jsx_runtime.JSX.Element;

declare const popoverStyles: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "heading" | "arrow", {
    shape: {
        rounded: {};
        box: {};
    };
    color: {
        default: {};
        reversed: {};
    };
}>;
type PopoverRecipeProps = Exclude<RecipeVariantProps<typeof popoverStyles>, undefined>;

interface PopoverClassNames {
    className?: string;
    arrowClassName?: string;
    headingClassName?: string;
    contentClassName?: string;
}
type PopoverProps = Omit<PopoverProps$1, 'className'> & Pick<DialogProps, 'heading'> & PopoverClassNames & PopoverRecipeProps & PropsWithChildren;
declare const Popover: ({ heading, className, arrowClassName, headingClassName, contentClassName, children, ...rest }: PopoverProps) => react_jsx_runtime.JSX.Element;
type PopoverHeadingProps = DialogHeadingProps & PopoverRecipeProps;
declare const PopoverHeading: ({ className, children, ...rest }: PopoverHeadingProps) => react_jsx_runtime.JSX.Element;
type PopoverOverlayArrowProps = OverlayArrowProps & PopoverRecipeProps;
declare const PopoverOverlayArrow: ({ className, ...rest }: PopoverOverlayArrowProps) => react_jsx_runtime.JSX.Element;

declare const selectRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "button" | "error" | "label" | "description" | "arrowIcon" | "listBox" | "listBoxSection" | "listBoxHeader" | "listBoxItem" | "listBoxItemIcon" | "listBoxItemText" | "popover" | "selectValue", {
    fullWidth: {
        false: {};
        true: {
            root: {
                width: "[100%]";
            };
            button: {
                width: "[100%]";
            };
        };
    };
    popoverAutoWidth: {
        true: {
            popover: {
                minWidth: "var(--trigger-width)";
            };
        };
    };
    variant: {
        contained: {};
        outlined: {};
    };
    shape: {
        box: {
            button: {
                borderRadius: "sm";
            };
            popover: {
                paddingInline: "[4px]";
            };
        };
        rounded: {
            button: {
                borderRadius: "full";
            };
            popover: {
                paddingInline: "[18px]";
            };
        };
    };
    size: {
        small: {
            root: {
                fontSize: "[12px]";
            };
            button: {
                padding: "[8px 20px]";
            };
            listBoxItem: {
                fontSize: "[12px]";
                lineHeight: "[14px]";
            };
            listBoxItemIcon: {
                width: "[16px]";
                height: "[16px]";
            };
        };
        medium: {
            root: {
                fontSize: "sm";
            };
            button: {
                padding: "[8px 24px]";
            };
            listBoxItem: {
                fontSize: "sm";
                lineHeight: "[22px]";
            };
            listBoxItemIcon: {
                width: "[20px]";
                height: "[20px]";
            };
        };
        large: {
            root: {
                fontSize: "md";
            };
            button: {
                padding: "[16px 24px]";
            };
            listBoxItem: {
                fontSize: "md";
                lineHeight: "[24px]";
            };
            listBoxItemIcon: {
                width: "[24px]";
                height: "[24px]";
            };
        };
    };
}>;
type SelectRecipeProps = RecipeVariantProps<typeof selectRecipe>;

type SelectItem = {
    id: string | number;
    name: string;
};
type SelectListBoxProps = {
    label?: string;
    className?: string;
} & ListBoxProps<object> & SelectRecipeProps;
declare const SelectListBox: ({ className, ...rest }: SelectListBoxProps) => react_jsx_runtime.JSX.Element;

declare const SelectVariantContext: react.Context<SelectRecipeProps>;
type SelectProps<T extends SelectItem> = {
    className?: string;
    items?: T[];
    popoverPlacement?: Placement;
    label?: string;
    description?: string;
    errorMessage?: string | ((validation: ValidationResult) => string);
    buttonClassName?: string;
    descriptionClassName?: string;
    labelClassName?: string;
    popoverClassName?: string;
    listBoxItemClassName?: string;
    errorClassName?: string;
    children?: ReactNode;
} & SelectProps$1<HTMLDivElement> & SelectRecipeProps;
declare function Select<T extends SelectItem>({ className, items, popoverPlacement, label, description, errorMessage, buttonClassName, descriptionClassName, labelClassName, popoverClassName, listBoxItemClassName, errorClassName, children, ...rest }: SelectProps<T>): react_jsx_runtime.JSX.Element;

type SelectButtonProps = {
    label?: string;
    className?: string;
    children?: ReactNode;
} & ButtonProps$1 & SelectRecipeProps;
declare const SelectButton: ({ className, ...rest }: SelectButtonProps) => react_jsx_runtime.JSX.Element;

type SelectListBoxHeaderProps = {
    className?: string;
} & SelectRecipeProps;
declare const SelectListBoxHeader: ({ className, ...rest }: SelectListBoxHeaderProps) => react_jsx_runtime.JSX.Element;

type SelectListBoxSectionProps = {
    className?: string;
} & ListBoxSectionProps<HTMLDivElement> & SelectRecipeProps;
declare const SelectListBoxSection: ({ className, ...rest }: SelectListBoxSectionProps) => react_jsx_runtime.JSX.Element;

type SelectListBoxItemProps = {
    icon?: ReactNode;
    text?: string;
    label?: string;
    className?: string;
    listBoxItemIconClassName?: string;
    listBoxItemText?: string;
    children?: ReactNode;
} & ListBoxItemProps & SelectRecipeProps;
declare const SelectListBoxItem: ({ icon, text, children, className, listBoxItemIconClassName, listBoxItemText, ...rest }: SelectListBoxItemProps) => react_jsx_runtime.JSX.Element;

type SelectPopoverProps = {
    label?: string;
    className?: string;
} & PopoverProps$1 & SelectRecipeProps;
declare const SelectPopover: ({ className, ...rest }: SelectPopoverProps) => react_jsx_runtime.JSX.Element;

type SelectValueProps = {
    label?: string;
    className?: string;
} & SelectValueProps$1<HTMLDivElement> & SelectRecipeProps;
declare const SelectValue: ({ className, ...rest }: SelectValueProps) => react_jsx_runtime.JSX.Element;

/**
 *  The <input type="range"> HTML element can be used to build a slider, however it is very
 *  difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as
 *  needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Slider.html
 */
declare const sliderRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "error" | "label" | "output" | "track" | "description" | "control" | "indicator" | "thumb", {
    color: {
        default: {
            control: {
                colorPalette: "elements.default";
            };
        };
        primary: {
            control: {
                colorPalette: "elements.primary";
            };
        };
        secondary: {
            control: {
                colorPalette: "elements.secondary";
            };
        };
        tertiary: {
            control: {
                colorPalette: "elements.tertiary";
            };
        };
    };
    size: {
        small: {
            root: {
                '--slider-control-size': "[0.75rem]";
                '--slider-track-size': "[0.25rem]";
            };
        };
        medium: {
            root: {
                '--slider-control-size': "[0.875rem]";
                '--slider-track-size': "[0.25rem]";
            };
        };
        large: {
            root: {
                '--slider-control-size': "[1.25rem]";
                '--slider-track-size': "[0.375rem]";
            };
        };
    };
    orientation: {
        horizontal: {
            root: {
                width: "[100%]";
            };
            output: {};
            control: {
                height: "var(--slider-control-size)";
                width: "[100%]";
            };
            track: {
                height: "var(--slider-track-size)";
                width: "[100%]";
            };
            indicator: {
                top: "[0]";
                height: "[100%]";
            };
            thumb: {
                top: "[50%]";
            };
        };
        vertical: {
            root: {
                height: "[100%]";
                display: "flex";
                flexDirection: "column";
                alignItems: "center";
            };
            output: {
                marginBottom: "[calc(var(--slider-control-size) / 2)]";
            };
            control: {
                width: "var(--slider-control-size)";
                height: "[100%]";
                justifyContent: "center";
            };
            track: {
                width: "var(--slider-track-size)";
                height: "[100%]";
            };
            indicator: {
                left: "[0]";
                width: "[100%]";
            };
            thumb: {
                left: "[50%]";
            };
        };
    };
}>;
type SliderRecipeProps = RecipeVariantProps<typeof sliderRecipe>;

type SliderBaseProps<T> = {
    className?: string;
} & SliderProps$1<T> & SliderRecipeProps;
declare const SliderBase: <T extends number | number[]>({ className, children, ...rest }: {
    className?: string | undefined;
} & SliderProps$1<T> & {
    color?: "default" | "primary" | "secondary" | "tertiary" | undefined;
    size?: "medium" | "small" | "large" | undefined;
    orientation?: "horizontal" | "vertical" | undefined;
}) => react_jsx_runtime.JSX.Element;

/**
 *  The <input type="range"> HTML element can be used to build a slider, however it is very
 *  difficult to style cross browser. Slider helps achieve accessible sliders that can be styled as
 *  needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Slider.html
 */
type SliderProps<T> = {
    label?: string;
    thumbLabels?: string[];
    description?: string;
    errorMessage?: string;
    className?: string;
    labelClassName?: string;
    outputClassName?: string;
    controlClassName?: string;
    trackClassName?: string;
    indicatorClassName?: string;
    thumbClassName?: string;
    descriptionClassName?: string;
    errorClassName?: string;
} & SliderBaseProps<T> & SliderRecipeProps;
declare const Slider: <T extends number | number[]>({ label, thumbLabels, description, errorMessage, className, labelClassName, outputClassName, controlClassName, trackClassName, indicatorClassName, thumbClassName, descriptionClassName, errorClassName, ...props }: {
    label?: string | undefined;
    thumbLabels?: string[] | undefined;
    description?: string | undefined;
    errorMessage?: string | undefined;
    className?: string | undefined;
    labelClassName?: string | undefined;
    outputClassName?: string | undefined;
    controlClassName?: string | undefined;
    trackClassName?: string | undefined;
    indicatorClassName?: string | undefined;
    thumbClassName?: string | undefined;
    descriptionClassName?: string | undefined;
    errorClassName?: string | undefined;
} & {
    className?: string | undefined;
} & react_aria_components.SliderProps<T> & {
    color?: "default" | "primary" | "secondary" | "tertiary" | undefined;
    size?: "medium" | "small" | "large" | undefined;
    orientation?: "horizontal" | "vertical" | undefined;
}) => react_jsx_runtime.JSX.Element;

type SliderOutputProps = {
    className?: string;
    children: (d: SliderRenderProps) => ReactNode;
} & SliderOutputProps$1 & SliderRecipeProps;
declare const SliderOutput: ({ className, children, ...rest }: SliderOutputProps) => react_jsx_runtime.JSX.Element;

type SliderThumbProps = {
    label?: string;
    className?: string;
} & SliderThumbProps$1 & SliderRecipeProps;
declare const SliderThumb: ({ className, ...rest }: SliderThumbProps) => react_jsx_runtime.JSX.Element;

type SliderTrackProps = {
    className?: string;
    trackClassName?: string;
    indicatorClassName?: string;
    children: (d: SliderTrackRenderProps) => ReactNode;
} & SliderTrackProps$1 & SliderRecipeProps;
declare const SliderTrack: ({ className, trackClassName, indicatorClassName, children, ...rest }: SliderTrackProps) => react_jsx_runtime.JSX.Element;

type SliderTrackIndicatorProps = {
    className?: string;
} & Pick<SliderTrackRenderProps, 'orientation' | 'state'> & SliderRecipeProps;
declare const SliderTrackIndicator: ({ state, className, ...variantProps }: SliderTrackIndicatorProps) => react_jsx_runtime.JSX.Element;

declare const snackbarRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "message" | "exit" | "action", {
    variant: {
        default: {
            root: {
                backgroundColor: "extra-dark-teal.100";
                color: "text.reversed";
                _dark: {
                    backgroundColor: "cream.100";
                    color: "text";
                };
            };
            message: {
                color: "cream.100";
                _dark: {
                    color: "text.reversed";
                };
            };
            action: {
                color: "links.reversed";
            };
            exit: {
                color: "text";
                _hover: {
                    backgroundColor: "background.opacity-10";
                };
            };
        };
        confirmation: {
            root: {
                backgroundColor: "elements.confirmation.fill";
                color: "elements.confirmation.contrast-reversed";
            };
            action: {};
            exit: {
                _hover: {
                    backgroundColor: "elements.confirmation.contrast";
                };
            };
        };
        error: {
            root: {
                backgroundColor: "elements.error.fill";
                color: "elements.error.contrast";
            };
            action: {};
            exit: {
                _hover: {
                    backgroundColor: "elements.error.contrast";
                };
            };
        };
    };
    shape: {
        rounded: {
            root: {
                borderRadius: "full";
            };
        };
        square: {
            root: {
                borderRadius: "sm";
            };
        };
    };
}>;
type SnackbarRecipeProps = RecipeVariantProps<typeof snackbarRecipe>;

type SnackbarProps = {
    action?: ReactNode;
    actionClassName?: string;
    ariaLabel?: string;
    autoHideDuration?: number;
    className?: string;
    exitClassName?: string;
    index?: number;
    id?: string;
    messageClassName?: string;
    onClose?: () => void;
    variant?: 'default' | 'confirmation' | 'error';
    message: string;
    open: boolean;
} & SnackbarRecipeProps;
declare function Snackbar({ message, variant, autoHideDuration, className, action, actionClassName, messageClassName, open, onClose, index, id, exitClassName, ariaLabel, ...rest }: SnackbarProps): react_jsx_runtime.JSX.Element | null;

type AnchorOrigin = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';
interface SnackbarNotification extends SnackbarProps {
    id: string;
}
interface SnackbarNotificationContextProps {
    snackbarNotifications: {
        [key in AnchorOrigin]: SnackbarNotification[];
    };
    addSnackbarNotification: (anchorOrigin: AnchorOrigin, snackbarNotification: Omit<SnackbarNotification, 'id'>) => void;
    removeSnackbarNotification: (anchorOrigin: AnchorOrigin, id: string) => void;
    clearAllSnackbarNotification: (anchorOrigin: AnchorOrigin) => void;
}
declare const SnackbarNotificationProvider: ({ children, maxStack, }: {
    children: ReactNode;
    maxStack?: number | undefined;
}) => react_jsx_runtime.JSX.Element;
declare const useSnackbarNotification: () => SnackbarNotificationContextProps;

declare const snackbarListRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root", {
    anchorOrigin: {
        topLeft: {
            root: {
                top: "[1rem]";
                left: "[1rem]";
            };
        };
        topCenter: {
            root: {
                top: "[1rem]";
                left: "[50%]";
                transform: "translateX(-50%)";
            };
        };
        topRight: {
            root: {
                top: "[1rem]";
                right: "[1rem]";
            };
        };
        bottomLeft: {
            root: {
                bottom: "[1rem]";
                left: "[1rem]";
            };
        };
        bottomCenter: {
            root: {
                bottom: "[1rem]";
                left: "[50%]";
                transform: "translateX(-50%)";
            };
        };
        bottomRight: {
            root: {
                bottom: "[1rem]";
                right: "[1rem]";
            };
        };
    };
}>;
type SnackbarListRecipeProps = RecipeVariantProps<typeof snackbarListRecipe>;

type SnackbarListProps = {
    className?: string;
    anchorOrigin: AnchorOrigin;
    ariaLabel?: string;
} & SnackbarListRecipeProps;
declare function SnackbarList({ className, ariaLabel, anchorOrigin, ...rest }: SnackbarListProps): react.ReactPortal;

declare const stackRecipe: _allenai_varnish_panda_runtime_types.RecipeRuntimeFn<{
    direction: {
        row: {
            flexDirection: "row";
        };
        column: {
            flexDirection: "column";
        };
    };
    align: {
        start: {
            alignItems: "flex-start";
        };
        center: {
            alignItems: "center";
        };
        end: {
            alignItems: "flex-end";
        };
        stretch: {
            alignItems: "stretch";
        };
    };
    justify: {
        start: {
            justifyContent: "flex-start";
        };
        center: {
            justifyContent: "center";
        };
        end: {
            justifyContent: "flex-end";
        };
        between: {
            justifyContent: "space-between";
        };
        around: {
            justifyContent: "space-around";
        };
        evenly: {
            justifyContent: "space-evenly";
        };
    };
    fullWidth: {
        true: {
            width: "[100%]";
        };
    };
    spacing: Record<number, SystemStyleObject>;
}>;
type StackRecipeProps = RecipeVariantProps<typeof stackRecipe>;

/**
 * The Stack component organizes its immediate children along either the vertical or horizontal
 * axis, allowing for customizable spacing and optional dividers between each child.
 */
type StackProps = {
    className?: string;
} & StackRecipeProps & HTMLProps<HTMLDivElement>;
declare const Stack: ({ className, children, ...rest }: PropsWithChildren<StackProps>) => react_jsx_runtime.JSX.Element;

/**
 *  There is no native HTML element with switch styling. <input type="checkbox"> is the closest
 *  semantically, but isn't styled or exposed to assistive technology as a switch. Switch helps
 *  achieve accessible switches that can be styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Switch.html
 */
declare const switchRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "error" | "label" | "track" | "description" | "thumb" | "contentContainer", {
    size: {
        small: {
            root: {
                fontSize: "[12px]";
            };
            track: {
                width: "[1.375rem]";
                height: "[0.75rem]";
            };
            thumb: {
                width: "[0.5rem]";
                right: "[calc(100% - 0.5rem - 1px)]";
            };
        };
        medium: {
            root: {
                fontSize: "sm";
            };
            track: {
                width: "[1.625rem]";
                height: "[0.875rem]";
            };
            thumb: {
                width: "[0.625rem]";
                right: "[calc(100% - 0.625rem - 1px)]";
            };
        };
        large: {
            root: {
                fontSize: "md";
            };
            track: {
                width: "[2.3125rem]";
                height: "[1.25rem]";
            };
            thumb: {
                width: "[0.875rem]";
                right: "[calc(100% - 0.875rem - 2px)]";
                _groupSelected: {
                    right: "[2px]";
                };
            };
        };
    };
    color: {
        default: {
            root: {
                _selected: {
                    _notDisabled: {
                        colorPalette: "elements.overrides.form.switch.checked";
                    };
                };
            };
        };
        primary: {
            root: {
                _selected: {
                    _notDisabled: {
                        colorPalette: "elements.primary";
                    };
                };
            };
        };
        secondary: {
            root: {
                _selected: {
                    _notDisabled: {
                        colorPalette: "elements.secondary";
                    };
                };
            };
        };
        tertiary: {
            root: {
                _selected: {
                    _notDisabled: {
                        colorPalette: "elements.tertiary";
                    };
                };
            };
        };
    };
}>;
type SwitchRecipeProps = RecipeVariantProps<typeof switchRecipe>;

/**
 *  There is no native HTML element with switch styling. <input type="checkbox"> is the closest
 *  semantically, but isn't styled or exposed to assistive technology as a switch. Switch helps
 *  achieve accessible switches that can be styled as needed.
 *
 *  See: https://react-spectrum.adobe.com/react-aria/Switch.html
 */
type SwitchProps = {
    children?: ReactNode;
    label?: string;
    description?: string;
    errorMessage?: string;
    className?: string;
    trackClassName?: string;
    thumbClassName?: string;
    errorClassName?: string;
    labelClassName?: string;
    descriptionClassName?: string;
    contentContainerClassName?: string;
} & SwitchProps$1 & SwitchRecipeProps;
declare const Switch: ({ children, label, description, errorMessage, className, trackClassName, thumbClassName, errorClassName, labelClassName, descriptionClassName, contentContainerClassName, ...rest }: SwitchProps) => react_jsx_runtime.JSX.Element;

type TableHeaderItem = {
    id: string;
    name: string;
    isRowHeader?: boolean;
    width?: number;
    allowsSorting?: boolean;
    allowsResizing?: boolean;
};
type TableRowItem<T extends Record<string, unknown>> = T & {
    id: Key;
};
type TableProps<T extends Record<string, unknown>> = {
    className?: string;
    tableRowClassName?: string;
    tableHeaderClassName?: string;
    columnClassName?: string;
    rowClassName?: string;
    cellClassName?: string;
    checkboxClassName?: string;
    dragButtonClassname?: string;
    tableBodyClassName?: string;
    headers?: TableHeaderItem[];
    dataItems?: TableRowItem<T>[];
    renderEmptyState?: (props: TableBodyProps$1<object>) => ReactNode;
    children?: ReactNode;
} & TableProps$1;
declare const Table: <T extends Record<string, unknown>>({ className, tableRowClassName, tableHeaderClassName, tableBodyClassName, columnClassName, rowClassName, cellClassName, checkboxClassName, dragButtonClassname, headers, dataItems, renderEmptyState, children, ...rest }: PropsWithChildren<TableProps<T>>) => react_jsx_runtime.JSX.Element;

type TableHeaderProps = {
    columns: object[];
    children?: ReactNode;
    className?: string;
} & TableHeaderProps$1<object>;
declare const TableHeader: ({ columns, children, className, ...rest }: PropsWithChildren<TableHeaderProps>) => react_jsx_runtime.JSX.Element;

type TableBodyProps = {
    renderEmptyState?: (props: TableBodyProps$1<object>) => ReactNode;
    children?: ReactNode;
    items: object[];
    className?: string;
} & TableBodyProps$1<object>;
declare const TableBody: ({ renderEmptyState, children, items, className, ...rest }: PropsWithChildren<TableBodyProps>) => react_jsx_runtime.JSX.Element;

type RowProps = {
    columns?: object[];
    children?: ReactNode;
    textValue?: string;
    isDisabled?: boolean;
    id?: Key;
    className?: string;
    href?: string;
} & RowProps$1<object>;
declare const Row: ({ columns, children, textValue, isDisabled, id, className, href, ...rest }: PropsWithChildren<RowProps>) => react_jsx_runtime.JSX.Element;

type CellProps = {
    textValue?: string;
    children?: ReactNode;
    className?: string;
} & CellProps$1;
declare const Cell: ({ textValue, children, className, ...rest }: PropsWithChildren<CellProps>) => react_jsx_runtime.JSX.Element;

type ColumnProps = {
    id?: Key;
    allowsSorting?: boolean;
    isRowHeader?: boolean;
    textValue?: string;
    children?: ReactNode;
    className?: string;
    width?: number;
    minWidth?: number;
    maxWidth?: number;
    defaultWidth?: number;
    sortDirection?: 'ascending' | 'descending';
} & ColumnProps$1;
declare const Column: ({ id, allowsSorting, isRowHeader, textValue, children, className, width, minWidth, maxWidth, defaultWidth, sortDirection, ...rest }: PropsWithChildren<ColumnProps>) => react_jsx_runtime.JSX.Element;

type ResizableTableContainerProps = {
    children?: ReactNode;
    className?: string;
} & ResizableTableContainerProps$1;
declare const ResizableTableContainer: ({ children, className, ...rest }: PropsWithChildren<ResizableTableContainerProps>) => react_jsx_runtime.JSX.Element;

type ColumnResizerProps = {
    children?: ReactNode;
    className?: string;
} & ColumnResizerProps$1;
declare const ColumnResizer: ({ children, className, ...rest }: PropsWithChildren<ColumnResizerProps>) => react_jsx_runtime.JSX.Element;

declare const tabsRecipe: _allenai_varnish_panda_runtime_types.SlotRecipeRuntimeFn<"root" | "tab" | "tabList" | "tabPanel", {
    orientation: {
        horizontal: {
            root: {
                gridTemplateRows: "auto 1fr";
            };
            tabList: {
                flexDirection: "row";
            };
            tab: {
                paddingBottom: "[5px]";
                borderBottom: "3px solid transparent";
                _hover: {
                    _notDisabled: {
                        borderBottomColor: "[currentColor]";
                    };
                };
                _selected: {
                    borderBottomColor: "[currentColor]";
                };
            };
        };
        vertical: {
            root: {
                gridTemplateColumns: "auto 1fr";
            };
            tabList: {
                flexDirection: "column";
            };
            tab: {
                paddingInlineEnd: "[5px]";
                borderInlineEnd: "3px solid transparent";
                _hover: {
                    _notDisabled: {
                        borderInlineEndColor: "[currentColor]";
                    };
                };
                _selected: {
                    borderInlineEndColor: "[currentColor]";
                };
            };
        };
    };
}>;
type TabsRecipeProps = Exclude<RecipeVariantProps<typeof tabsRecipe>, undefined>;

type TabPanelProps = {
    className?: string;
    children?: ReactNode;
} & TabPanelProps$1 & TabsRecipeProps;
declare const TabPanel: ({ className, children, ...rest }: PropsWithChildren<TabPanelProps>) => react_jsx_runtime.JSX.Element;

interface TabProps extends TabProps$1, TabsRecipeProps {
    children?: ReactNode;
    className?: string;
}
declare const Tab: ({ className, children, ...rest }: PropsWithChildren<TabProps>) => react_jsx_runtime.JSX.Element;

type Items = {
    id: string;
    header: (props?: ComponentProps<typeof Tab>) => ReactElement;
    content: (props?: ComponentProps<typeof TabPanel>) => ReactElement;
    isDisabled?: boolean;
};
type TabsProps = {
    className?: string;
    disabledKeys?: Key[];
    isDisabled?: boolean;
    selectedKey?: Key | null;
    orientation?: 'horizontal' | 'vertical';
    onSelectionChange?: (key: string) => void;
    items?: Items[];
    tabListClassName?: string;
    tabClassName?: string;
    tabPanelClassName?: string;
    children?: ReactNode;
} & TabsProps$1 & TabsRecipeProps;
declare const Tabs: ({ className, disabledKeys, selectedKey, orientation, isDisabled, onSelectionChange, items, tabListClassName, tabClassName, tabPanelClassName, children, ...rest }: PropsWithChildren<TabsProps>) => react_jsx_runtime.JSX.Element;

type TabListProps<T extends object> = {
    className?: string;
    children?: ReactNode;
} & TabListProps$1<T> & TabsRecipeProps;
declare const TabList: <T extends object>({ className, children, ...rest }: PropsWithChildren<TabListProps<T>>) => react_jsx_runtime.JSX.Element;

declare const systemColorModeName = "system";
type SystemColorMode = typeof systemColorModeName;
type ColorMode = PaletteModes | SystemColorMode;
type ExplicitColorMode = Exclude<ColorMode, SystemColorMode>;
interface ThemeContextType {
    colorMode: ColorMode;
    systemPrefersColorMode: ExplicitColorMode;
    computedColorMode: ExplicitColorMode;
    setColorMode: (_: ColorMode) => void;
}
interface ThemeProviderProps extends PropsWithChildren {
    localStorageKey?: string;
    defaultColorMode?: ColorMode;
    colorModes?: ColorMode[];
    forceClassForSystem?: boolean;
    classElement?: HTMLElement;
}
declare const ThemeProviderBase: ({ localStorageKey, defaultColorMode, colorModes, forceClassForSystem, classElement, children, }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
declare const useTheme: () => ThemeContextType;

type VarnishThemeType = typeof VarnishTheme;
declare const EmotionThemeProvider: ({ children }: PropsWithChildren) => react_jsx_runtime.JSX.Element;
declare module '@emotion/react' {
    interface Theme extends VarnishThemeType {
        palette: VarnishThemeType['palette'][PaletteModes];
    }
}

interface AppProviderProps extends PropsWithChildren {
    themeProvider?: ComponentType;
    themeDefaults?: ComponentPropsWithoutRef<typeof ThemeProviderBase>;
}
declare const AppProvider: ({ themeProvider, themeDefaults, children }: AppProviderProps) => react_jsx_runtime.JSX.Element;

interface LegalProviderProps extends PropsWithChildren {
    localStorageKey: string;
}
interface LegalContextType {
    hasAgreed: boolean | undefined;
    setAgreed: (_: boolean) => void;
}
declare const LegalProvider: ({ localStorageKey, children }: LegalProviderProps) => react_jsx_runtime.JSX.Element;
declare const useLegalTerms: () => LegalContextType;

export { Add, Alert, AlertCloseButton, type AlertProps, AlertTitle, type AnchorOrigin, AppProvider, Menu as AriaMenu, Avatar, type AvatarProps, Button, ButtonLink, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, CardMedia, type CardMediaProps, type CardProps, Cell, type CellProps, Check, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, CheckboxVariantContext, Chip, ChipGroup, ChipGroupContext, type ChipGroupProps, type ChipItem, type ChipProps, Close, CodeBlock, type CodeBlockProps, Column, type ColumnProps, ColumnResizer, type ColumnResizerProps, Description, type DescriptionProps, Dialog, DialogActions, type DialogActionsProps, DialogCloseButton, type ButtonProps as DialogCloseButtonProps, DialogHeading, DialogHeadingBase, type DialogHeadingProps, type DialogProps, DialogTrigger, type DialogTriggerProps, Drawer, type DrawerProps, EmotionThemeProvider, ErrorBoundary, type ErrorBoundaryProps, FieldError, type FieldErrorProps, FileInput, FileInputButton, type FileInputButtonProps, type FileInputProps, Footer, type FooterProps, Form, type FormProps, Header, type HeaderProps, Icon, IconButton, type IconButtonProps, type IconProps, index$1 as Icons, Input, type InputProps, type Items, Keyboard, type KeyboardProps, Label, type LabelProps, LegalProvider, Link, type LinkProps, LoadingSpinner, type LoadingSpinnerProps, index as Logos, Markdown, type MarkdownProps, Menu$1 as Menu, MenuHeader, type MenuHeaderProps, MenuItem, type MenuItemProps, type MenuProps, MenuSection, type MenuSelectionProps, MenuText, type MenuTextProps, MenuTrigger, type MenuTriggerProps, Modal, ModalActions, type ModalActionsProps, ModalBase, type ModalBaseProps, DialogCloseButton as ModalCloseButton, type ButtonProps as ModalCloseButtonProps, ModalCloseIconButton, type ModalCloseIconButtonProps, ModalContent, type ModalContentProps, ModalHeading, type ModalHeadingProps, type ModalProps, DialogTrigger as ModalTrigger, type DialogTriggerProps as ModalTriggerProps, Popover, PopoverHeading, type PopoverHeadingProps, PopoverOverlayArrow, type PopoverOverlayArrowProps, type PopoverProps, DialogTrigger as PopoverTrigger, type DialogTriggerProps as PopoverTriggerProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, RadioVariantContext, Remove, ResizableTableContainer, type ResizableTableContainerProps, Row, type RowProps, SVGBase, type SVGBaseProps, SVGIcon, type SVGIconProps, SVGIconSprite, type SVGIconSpriteProps, SVGSpriteLink, Select, SelectButton, type SelectButtonProps, type SelectItem, SelectListBox, SelectListBoxHeader, type SelectListBoxHeaderProps, SelectListBoxItem, type SelectListBoxItemProps, type SelectListBoxProps, SelectListBoxSection, type SelectListBoxSectionProps, SelectPopover, type SelectPopoverProps, type SelectProps, SelectValue, type SelectValueProps, SelectVariantContext, Separator, type SeparatorProps, Slider, SliderBase, type SliderBaseProps, SliderOutput, type SliderOutputProps, type SliderProps, SliderThumb, type SliderThumbProps, SliderTrack, SliderTrackIndicator, type SliderTrackIndicatorProps, type SliderTrackProps, Snackbar, SnackbarList, type SnackbarListProps, SnackbarNotificationProvider, type SnackbarProps, Spark, SpriteProvider, Stack, type StackProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, type SwitchProps, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, type TableBodyProps, TableHeader, type TableHeaderItem, type TableHeaderProps, type TableProps, type TableRowItem, Tabs, type TabsProps, TextArea, TextAreaControl, type TextAreaControlProps, type TextAreaProps, type ThemeContextType, ThemeProviderBase, type ThemeProviderProps, Tooltip, TooltipOverlayArrow, type TooltipOverlayArrowProps, type TooltipProps, Upload, createVarnishIcon, cx, defaultComponents, defaultRemarkPlugins, useLegalTerms, useSnackbarNotification, useSpriteConfig, useTheme, varnishIcon, varnishIconSprite };