import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import { ComponentProps, PropsWithChildren, ReactNode, ComponentPropsWithoutRef, ReactElement, InputHTMLAttributes, MouseEvent, HTMLProps } from 'react';
import { DayPickerProps } from 'react-day-picker';
export { DateRange } from 'react-day-picker';
import { InputVariant, CardVariant, AlertMessageVariant, ButtonVariant, IconButtonVariant } from '@onbeam/styled-system/recipes';
import { DropzoneOptions } from 'react-dropzone-esm';
export { Accept as DropzoneAccept, DropEvent as DropzoneDropEvent, ErrorCode as DropzoneErrorCode, FileError as DropzoneFileError, FileRejection as DropzoneFileRejection, DropzoneOptions } from 'react-dropzone-esm';
import * as input_otp from 'input-otp';
import * as _radix_ui_react_dialog from '@radix-ui/react-dialog';
import { CommonExternalProps, JSONTree } from 'react-json-tree';
import * as _radix_ui_react_popover from '@radix-ui/react-popover';
import { ToasterProps } from 'sonner';
import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
import { ColorToken } from '@onbeam/styled-system/tokens';
import { ConditionalValue } from '@onbeam/styled-system/types';
import { MDXComponents } from 'mdx/types';
import { Theme } from '@rainbow-me/rainbowkit';

type InnerCalendarProps = DayPickerProps;
type CalendarProps = ComponentProps<typeof Calendar>;

declare const Calendar: {
    ({ classNames, showOutsideDays, ...props }: InnerCalendarProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

/**
 * All credit goes to Chance (Reach UI), Haz (Reakit) and (fluentui)
 * for creating the base type definitions upon which we improved on
 */
type As<Props = any> = React.ElementType<Props>;
/**
 * Extract the props of a React element or component
 */
type PropsOf<T extends As> = React.ComponentPropsWithoutRef<T> & {
    as?: As;
};
type OmitCommonProps<Target, OmitAdditionalProps extends keyof any = never> = Omit<Target, 'transition' | 'as' | 'color' | 'translate' | OmitAdditionalProps> & {
    htmlTranslate?: 'yes' | 'no' | undefined;
};
type RightJoinProps<SourceProps extends object = {}, OverrideProps extends object = {}> = OmitCommonProps<SourceProps, keyof OverrideProps> & OverrideProps;
type MergeWithAs<ComponentProps extends object, AsProps extends object, AdditionalProps extends object = {}, AsComponent extends As = As> = RightJoinProps<ComponentProps, AdditionalProps> & RightJoinProps<AsProps, AdditionalProps> & {
    as?: AsComponent;
};
type ComponentWithAs<Component extends As, Props extends object = {}> = {
    <AsComponent extends As = Component>(props: MergeWithAs<React.ComponentProps<Component>, React.ComponentProps<AsComponent>, Props, AsComponent>): JSX.Element;
    displayName?: string;
    propTypes?: React.WeakValidationMap<any>;
    contextTypes?: React.ValidationMap<any>;
    id?: string;
};

type InnerInputProps = PropsWithChildren<Pick<Partial<InputVariant>, 'size'> & {
    /**
     * The label for the input, placed above the component
     */
    label?: ReactNode;
    /**
     * When true, will color the background and border red
     */
    hasError?: boolean;
    /**
     * The message that will be shown if there is an error
     */
    errorMessage?: ReactNode;
    /**
     * An element to render at the very start of the component
     */
    leftAddon?: ReactNode;
    /**
     * An element to render at the very end of the component
     */
    rightAddon?: ReactNode;
}>;
type InputProps = ComponentProps<typeof Input>;

declare const Input: ComponentWithAs<"input", InnerInputProps>;

type InnerDatePickerProps = PropsWithChildren & InputProps & {
    type?: 'date';
    calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'month' | 'onMonthChange' | 'className' | 'required'>;
};
type DatePickerProps = ComponentProps<typeof DatePicker>;

declare const DatePicker: ComponentWithAs<"input", InnerDatePickerProps>;

type InnerDropzoneProps = {
    /**
     * Options passed to `react-dropzone`
     * https://react-dropzone.js.org/#src
     */
    options?: Omit<DropzoneOptions, 'noKeyboard' | 'maxFiles' | 'multiple'>;
    /**
     * The label for the input, placed above the component
     */
    label?: ReactNode;
    /**
     * When true, will color the border red
     */
    hasError?: boolean;
    /**
     * The message that will be shown if there is an error
     */
    errorMessage?: ReactNode;
    /**
     * Text that will be rendered within the component
     */
    i18n?: {
        placeholderTitle?: string;
        placeholderSubtitle?: string;
        uploadButton?: string;
        replaceButton?: string;
        removeButton?: string;
        loadingText?: string;
    };
    /**
     * The source of the file to display within the Dropzone
     */
    fileSrc?: string;
    /**
     * Will be called when the remove button of a file is pressed
     */
    onRemoveFile?: () => void;
    /**
     * Whether the component should show the loading state
     */
    isLoading?: boolean;
};
type DropzoneProps = ComponentProps<typeof Dropzone>;

declare const Dropzone: ComponentWithAs<"div", InnerDropzoneProps>;

declare const InputOTP: react.ForwardRefExoticComponent<Omit<Omit<ComponentPropsWithoutRef<react.ForwardRefExoticComponent<input_otp.OTPInputProps & react.RefAttributes<HTMLInputElement>>>, "maxLength"> & Omit<input_otp.OTPInputProps, "maxLength"> & {
    errorMessage?: string;
    hasError?: boolean;
    maxLength?: number;
}, "children" | "render"> & react.RefAttributes<HTMLInputElement>>;

type InnerMarqueeProps = {
    /**
     * The speed, in milliseconds, at which the text will scroll fully from right to left. Smaller values will make the text scroll faster
     * @default 35000
     */
    speed?: number;
    /**
     * Amount of times you want to duplicate the given text within the Marquee. If your text doesn't scroll infinitely but leaves gaps, try increasing this number
     * @default 15
     */
    duplicationCount?: number;
    /**
     * The text to display in the Marquee
     */
    children?: string;
};
type MarqueeProps = ComponentProps<typeof Marquee>;

declare const Marquee: ComponentWithAs<"div", InnerMarqueeProps>;

declare const Modal: react.ForwardRefExoticComponent<Pick<_radix_ui_react_dialog.DialogProps, "open" | "onOpenChange"> & _radix_ui_react_dialog.DialogContentProps & {
    trigger?: react.ReactNode;
    size?: CardProps["size"];
    title: react.ReactNode;
    description: react.ReactNode;
    hideTitle?: boolean;
    hideDescription?: boolean;
    hideCloseButton?: boolean;
} & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;
declare const ModalPrimitive: {
    Root: react.FC<_radix_ui_react_dialog.DialogProps>;
    Trigger: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
    Portal: react.FC<_radix_ui_react_dialog.DialogPortalProps>;
    Close: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
    Overlay: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
    Content: react.ForwardRefExoticComponent<Omit<_radix_ui_react_dialog.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
    Title: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
    Description: react.ForwardRefExoticComponent<_radix_ui_react_dialog.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
};

type InnerCardProps = PropsWithChildren<Partial<CardVariant>>;
type CardProps = ComponentProps<typeof Card>;

declare const Card: ComponentWithAs<"div", InnerCardProps>;

type ModalProps = ComponentProps<typeof Modal>;

type InnerObjectTreeProps = Partial<Omit<CommonExternalProps, 'hideRoot'>> & {
    data: ComponentProps<typeof JSONTree>['data'];
};
type ObjectTreeProps = ComponentProps<typeof ObjectTree>;

declare const ObjectTree: ComponentWithAs<"div", InnerObjectTreeProps>;

declare const Popover: react.ForwardRefExoticComponent<Pick<_radix_ui_react_popover.PopoverProps, "open" | "onOpenChange"> & _radix_ui_react_popover.PopoverContentProps & {
    trigger?: react.ReactNode;
    size?: CardProps["size"];
    title?: react.ReactNode;
    anchor?: react.ReactNode;
} & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;
declare const PopoverPrimitive: {
    Portal: react.FC<_radix_ui_react_popover.PopoverPortalProps>;
    Root: react.FC<_radix_ui_react_popover.PopoverProps>;
    Trigger: react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
    Content: react.ForwardRefExoticComponent<Omit<_radix_ui_react_popover.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
    Close: react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverCloseProps & react.RefAttributes<HTMLButtonElement>>;
    Arrow: react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverArrowProps & react.RefAttributes<SVGSVGElement>>;
    Anchor: react.ForwardRefExoticComponent<_radix_ui_react_popover.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
};

type PopoverProps = ComponentProps<typeof Popover>;

declare const SelectModalItem$1: ComponentWithAs<"div", InnerSelectModalItemProps>;

type InnerSelectModalProps = {
    /**
     * The label of the trigger SelectButton
     */
    label?: string;
    /**
     * Title of the modal
     */
    title?: string;
    /**
     * Placeholder of the search input. Defaults to `search`
     */
    searchPlaceholder?: string;
    /**
     * Title of the of the list
     */
    listTitle?: string;
    /**
     * List of items
     */
    items?: SelectModalItem[];
    /**
     * The item that is selected.
     */
    selectedId?: string;
    /**
     * You can sort items by testing itemA against itemB.
     */
    sort?: (a: SelectModalItem, b: SelectModalItem) => number;
    /**
     * You can filter which items should be displayed
     */
    filter?: (item: SelectModalItem) => boolean;
    /**
     * A callback that will return the id of the selected item and the selected item itself when the user clicks on an item.
     */
    onChange?: (id: string, item: SelectModalItem) => void;
    /**
     * The controlled search query of the search input.
     */
    searchQuery?: string;
    /**
     * A callback that will return the search query when the user types in the search input.
     */
    onSearch?: (searchQuery: string) => void;
    /**
     * A callback that will return the open state of the modal.
     */
    onOpenChange?: (isOpen: boolean) => void;
};
type SelectModalItem = {
    /**
     * Unique id used for the object. Will be returned in the `onChange` event
     */
    id: string;
    /**
     * The name of the item. For example, the symbol of the currency or the name of the chain
     */
    name: string;
    /**
     * Address of the currency
     */
    address?: string;
    /**
     * Chain id of the currency
     */
    chainId?: number;
    /**
     * Displayed in small text underneath the name. For example, the name of the currency's chain
     */
    subname?: string;
    /**
     * Logo of the item
     */
    logo: ReactElement;
    /**
     * Displayed at the right side of the row. For example, the amount of owned tokens
     */
    detailLabel?: string;
    /**
     * Displayed at the right side of the row as small text underneath the `detailLabel`. For example, the total price of the amount of tokens in usd
     */
    detailCaption?: string;
    /**
     * An action allows you to add a button or any other element to give the user more options
     */
    action?: {
        title: string;
        buttonLabel: string;
        onClick: () => void;
    };
    /**
     * Disables the item within the list
     */
    isDisabled?: boolean;
};
type InnerSelectModalItemProps = SelectModalItem & {
    /**
     * Sets if the item was selected
     */
    isSelected?: boolean;
    /**
     * Will return the item's id when clicked.
     */
    onClick?: (id: string) => void;
};
type SelectModalProps = ComponentProps<typeof SelectModal>;
type SelectModalItemProps = ComponentProps<typeof SelectModalItem$1>;

declare const SelectModal: ComponentWithAs<"div", InnerSelectModalProps>;
declare const SelectModalPrimitive: {
    Item: ComponentWithAs<"div", InnerSelectModalItemProps>;
};

type InnerSwitchProps = {
    label?: ReactNode;
};
type SwitchProps = ComponentProps<typeof Switch>;

declare const Switch: ComponentWithAs<"input", InnerSwitchProps>;

type InnerTimePickerProps = InputProps & {
    type?: 'time';
};
type TimePickerProps = ComponentProps<typeof TimePicker>;

declare const TimePicker: ComponentWithAs<"input", InnerTimePickerProps>;

/**
 * A functional component that renders a customized Sonner toaster, supposed to be placed at the root level of the application.
 * This component is meant to be used in conjunction with the `toast` helper function from `@onbeam/ui`.
 *
 * @param props - The properties to customize the toaster.
 * @returns The rendered toaster component.
 *
 */
declare const Toaster: {
    ({ toastOptions, ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
    displayName: string;
};

declare const Toggle: ComponentWithAs<"input", {}>;

type ToggleProps = ComponentProps<typeof Toggle>;

declare const Tooltip: react.ForwardRefExoticComponent<{
    label?: react.ReactNode;
    width?: number;
    disabled?: boolean;
} & {
    children?: react.ReactNode | undefined;
} & react.RefAttributes<HTMLDivElement>>;
declare const TooltipPrimitive: {
    Root: react.FC<_radix_ui_react_tooltip.TooltipProps>;
    Trigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
    Content: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
    Provider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
};

type TooltipProps = ComponentProps<typeof Tooltip>;

type NavigationItem = {
    /**
     * Used to display the navigation item
     */
    label: string;
    /**
     * Used to identify the navigation item. Actual navigation is done through the `onRouteChange` prop
     */
    href: string;
    /**
     * Whether the link navigates to an external page. Will add `target="_blank"`
     */
    isExternal?: boolean;
};
type InnerTopNavProps = PropsWithChildren<{
    title?: string;
    /**
     * Defaults to `/`
     */
    homeHref?: string;
    /**
     * The items to render in the navigation bar
     */
    navItems?: NavigationItem[];
    /**
     * The page's current active pathname
     */
    activePath?: string;
    /**
     * A function that checks whether a navigation item is currently active
     */
    isNavigationItemActive?: (navItem: NavigationItem) => boolean;
    /**
     * The function called when a navigation item inside the (mobile) select is clicked. Routing should be handled by the consumer
     */
    onRouteChange?: (navItem: NavigationItem) => void;
    /**
     * Defaults to `a`
     */
    linkComponent?: As;
}>;
type TopNavProps = ComponentProps<typeof TopNav>;

declare const TopNav: ComponentWithAs<"div" | "header", InnerTopNavProps>;

type InnerTransactionConfirmationModalProps = PropsWithChildren<ModalProps & {
    icon?: ReactElement;
}>;
type TransactionConfirmationModalProps = ComponentProps<typeof TransactionConfirmationModal>;

declare const TransactionConfirmationModal: react.ForwardRefExoticComponent<Omit<InnerTransactionConfirmationModalProps, "ref"> & react.RefAttributes<HTMLDivElement>>;

declare const TransactionDeadlineSettings: react.ForwardRefExoticComponent<Omit<InnerTransactionDeadlineSettingsProps, "ref"> & react.RefAttributes<HTMLInputElement>>;

type InnerTransactionDeadlineSettingsProps = Omit<InputProps & InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
    /**
     * In seconds
     */
    value: number;
    /**
     * Returns the new value in seconds
     */
    onChange: (value: number) => void;
};
type TransactionDeadlineSettingsProps = ComponentProps<typeof TransactionDeadlineSettings>;

type InnerTransactionDetailsRowProps = {
    /**
     * The label describing the details of the row. Rendered at the left side of the row.
     */
    label?: string;
    /**
     * Will render next to the label
     */
    tooltipLabel?: ReactNode;
    /**
     * The details of what is described by the label. Rendered at the right side of the row.
     */
    details?: {
        /**
         * The visual label of the detail
         */
        label?: string;
        /**
         * Will be rendered in grey to the right of the optional icon
         */
        sublabel?: string;
        /**
         * Will be fired when the user clicks on the detail label
         */
        onClick?: () => void;
        /**
         * This icon is shown next to the label
         */
        icon?: ReactElement;
    };
};
type TransactionDetailsBoxProps = ComponentProps<typeof TransactionDetailsBox>;
type TransactionDetailsRowProps = ComponentProps<typeof TransactionDetailsRow>;

declare const TransactionDetailsBox: ComponentWithAs<"div" | "ul", {
    children?: react.ReactNode | undefined;
}>;
declare const TransactionDetailsRow: ComponentWithAs<"div" | "li", InnerTransactionDetailsRowProps>;

type TransactionInterfaceSettingsProps = SwitchProps;

declare const TransactionInterfaceSettings: react.ForwardRefExoticComponent<Omit<Omit<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "label" | "color" | "transition" | "as" | "translate"> & {
    htmlTranslate?: "yes" | "no" | undefined;
} & InnerSwitchProps & Omit<any, "label" | "color" | "transition" | "as" | "translate"> & {
    as?: As<any> | undefined;
}, "ref"> & react.RefAttributes<HTMLInputElement>>;

declare const TransactionSlippageSettings: react.ForwardRefExoticComponent<Omit<InnerTransactionSlippageSettingsProps, "ref"> & react.RefAttributes<HTMLInputElement>>;

type InnerTransactionSlippageSettingsProps = Omit<InputProps & InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> & {
    /**
     * As an integer. For example, `0.5%` is `50`
     */
    value: number;
    /**
     * Returns the new value as an integer. For example, `0.5%` is `50`
     */
    onChange: (value: number) => void;
};
declare enum TransactionSlippageOption {
    MIN = 0.1,
    DEFAULT = 0.5,
    MAX = 1
}
type TransactionSlippageOptionKey = keyof typeof TransactionSlippageOption;
type TransactionSlippageSettingsProps = ComponentProps<typeof TransactionSlippageSettings>;

type InnerAlertMessageProps = PropsWithChildren & Partial<AlertMessageVariant>;
type AlertMessageProps = ComponentProps<typeof AlertMessage>;

declare const AlertMessage: ComponentWithAs<"div", InnerAlertMessageProps>;

declare const AppBackground: ComponentWithAs<"div", {
    children?: react.ReactNode | undefined;
}>;

type AppBackgroundProps = ComponentProps<typeof AppBackground>;

type InnerButtonProps = PropsWithChildren<Pick<Partial<ButtonVariant>, 'variant' | 'size'> & {
    /**
     * Adds an icon to the left of the button. Combining this with `iconRight` or `hasLed` could cause unexpected results.
     */
    iconLeft?: ReactElement;
    /**
     * Adds an icon to the right of the button. Combining this with `iconLeft` or `hasLed` could cause unexpected results.
     */
    iconRight?: ReactElement;
    /**
     * Disables the button and adds the Loader component to the left of the button.
     */
    isLoading?: boolean;
    /**
     * Shows a different text when the component is in loading state.
     */
    loadingMessage?: string;
    /**
     * Adds an LED to the button. Combining this with `iconLeft` or `iconRight` could cause unexpected results.
     */
    hasLed?: boolean;
    /**
     * Turns the LED on or off. Only works when `hasLed` is `true`.
     */
    ledOn?: boolean;
    /**
     * Disabled state, explicitly typed as the supported anchor element doesn't have this attribute
     */
    disabled?: boolean;
}>;
type ButtonProps = ComponentProps<typeof Button>;

declare const Button: ComponentWithAs<"a" | "button", InnerButtonProps>;

type InnerCheckboxButtonProps = {
    /**
     * When true, will color the border red
     */
    hasError?: boolean;
};
type CheckboxButtonProps = ComponentProps<typeof CheckboxButton>;

declare const CheckboxButton: ComponentWithAs<"input", InnerCheckboxButtonProps>;

declare const DappInputField: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
    className?: string;
    nativeBalance?: string | number;
    usdBalance?: string | number;
    currency?: string;
    topRightAddon?: react.ReactNode;
    bottomRightAddon?: react.ReactNode;
} & react.RefAttributes<HTMLInputElement>>;

type DappInputFieldProps = ComponentProps<typeof DappInputField>;

declare const Divider: ComponentWithAs<"div", object>;

declare const ErrorMessage: ComponentWithAs<"span", {
    children?: react.ReactNode | undefined;
}>;

type ErrorMessageProps = ComponentProps<typeof ErrorMessage>;

type InnerGameCardProps = {
    /**
     * The label for the game card.
     */
    label: string;
    /**
     * Image element that will be shown in the card.
     */
    image: ReactNode;
    /**
     * Hyperlink that the card needs to redirect to.
     */
    href: string;
    /**
     * Whether the link navigates to an external page. Will add `target="_blank"` to the link component
     */
    isExternal?: boolean;
    onClick?: (e: MouseEvent) => void;
    /**
     * Defaults to `a`
     */
    linkComponent?: As;
};
type GameCardProps = ComponentProps<typeof GameCard>;

declare const GameCard: ComponentWithAs<"div", InnerGameCardProps>;

type InnerIconProps = HTMLProps<SVGElement> & {
    children: ReactElement;
    size?: number;
};
type IconProps = ComponentProps<typeof Icon>;

declare const Icon: react.ForwardRefExoticComponent<Omit<InnerIconProps, "ref"> & react.RefAttributes<"svg">>;

type InnerIconButtonProps = Pick<Partial<IconButtonVariant>, 'size'> & {
    children: ReactElement<HTMLProps<SVGElement>, 'svg'>;
    /**
     * Disabled state, explicitly typed as the supported anchor element doesn't have this attribute
     */
    disabled?: boolean;
};
type IconButtonProps = ComponentProps<typeof IconButton>;

declare const IconButton: ComponentWithAs<"a" | "button", InnerIconButtonProps>;

declare const Label: ComponentWithAs<"label" | "span", {
    children?: react.ReactNode | undefined;
}>;

type LabelProps = ComponentProps<typeof Label>;

/* eslint-disable */




type WithColorOpacityModifier<T> = [T] extends [string] ? `${T}/${string}` & { __colorOpacityModifier?: true } : never

type ImportantMark = "!" | "!important"
type WhitespaceImportant = ` ${ImportantMark}`
type Important = ImportantMark | WhitespaceImportant
type WithImportant<T> = [T] extends [string] ? `${T}${Important}` & { __important?: true } : never

/**
 * Only relevant when using `strictTokens` or `strictPropertyValues` in your config.
 * - Allows you to use an escape hatch (e.g. `[123px]`) to use any string as a value.
 * - Allows you to use a color opacity modifier (e.g. `red/300`) with known color values.
 * - Allows you to use an important mark (e.g. `!` or `!important`) in the value.
 *
 * This is useful when you want to use a value that is not defined in the config or want to opt-out of the defaults.
 *
 * @example
 * css({
 *   fontSize: '[123px]', // ⚠️ will not throw even if you haven't defined 123px as a token
 * })
 *
 * @see https://panda-css.com/docs/concepts/writing-styles#stricttokens
 * @see https://panda-css.com/docs/concepts/writing-styles#strictpropertyvalues
 */
type WithEscapeHatch<T> = T | `[${string}]` | WithColorOpacityModifier<T> | WithImportant<T>

type InnerLinkProps = PropsWithChildren & {
    /**
     * Color of the text.
     */
    color?: ConditionalValue<WithEscapeHatch<`var(--${string})` | ColorToken>> | undefined;
};
type LinkProps = ComponentProps<typeof Link>;

/**
 * @deprecated Use the `link` pattern from `@onbeam/styled-system/patterns` instead.
 * Due to the conflicting dynamic nature of the `color` property with the static nature of PandaCSS, it is inefficient to use this component.
 * @see https://panda-css.com/docs/guides/dynamic-styling
 */
declare const Link: ComponentWithAs<"a", InnerLinkProps>;

type InnerLoaderProps = {
    variant?: 'bar' | 'spinner';
};
type LoaderProps = ComponentProps<typeof Loader>;

declare const Loader: ComponentWithAs<"div", InnerLoaderProps>;

type InnerNativeSelectProps = {
    /**
     * Because the select is absolutely positioned, it is required to set the width of the component either through this prop or a className
     */
    width?: number;
    /**
     * Options for the native select element
     */
    children: ReactElement<'option'>[];
};
type NativeSelectProps = ComponentProps<typeof NativeSelect>;

declare const NativeSelect: ComponentWithAs<"select", InnerNativeSelectProps>;

type InnerNotificationProps = {
    title?: string;
    description?: ReactNode;
    icon?: ReactElement;
    onClose?: () => void;
};
type NotificationProps = ComponentProps<typeof Notification>;

declare const Notification: ComponentWithAs<"div", InnerNotificationProps>;

type InnerNumberBadgeProps = {
    children: string | number;
};
type NumberBadgeProps = ComponentProps<typeof NumberBadge>;

declare const NumberBadge: ComponentWithAs<"div", InnerNumberBadgeProps>;

declare const PixelBackground: ComponentWithAs<"div" | "ul", {}>;

declare const PoweredByBeamBanner: ComponentWithAs<"div", object>;

type InnerRadioButtonProps = {
    /**
     * When true, will color the border red
     */
    hasError?: boolean;
};

declare const RadioButton: ComponentWithAs<"input", InnerRadioButtonProps>;

type InnerSelectButtonProps = PropsWithChildren<{
    /**
     * The label for the select, placed above the component
     */
    label?: ReactNode;
    /**
     * Adds an icon to the left of the component
     */
    icon?: ReactElement;
    /**
     * Removes the chevron icon from the right of the component
     */
    disableChevron?: boolean;
}>;
type SelectButtonProps = ComponentProps<typeof SelectButton>;

declare const SelectButton: ComponentWithAs<"button", InnerSelectButtonProps>;

declare const Skeleton: ComponentWithAs<"div", {}>;

type SkeletonProps = ComponentProps<typeof Skeleton>;

declare const textStyles: {
    xl: {
        value: {
            fontSize: "1.25rem";
            fontFamily: "{fonts.main}";
            fontWeight: number;
            lineHeight: "28px";
        };
    };
    md: {
        value: {
            fontSize: "1rem";
            fontFamily: "{fonts.main}";
            fontWeight: number;
            lineHeight: "28px";
        };
    };
    base: {
        value: {
            fontSize: "0.875rem";
            fontFamily: "{fonts.main}";
            fontWeight: number;
            lineHeight: "20px";
        };
    };
    sm: {
        value: {
            fontSize: "0.75rem";
            fontFamily: "{fonts.main}";
            fontWeight: number;
            lineHeight: "18px";
        };
    };
    xs: {
        value: {
            fontSize: "0.625rem";
            fontFamily: "{fonts.main}";
            fontWeight: number;
            lineHeight: "16px";
        };
    };
    marquee: {
        value: {
            fontSize: "1.125rem";
            fontFamily: "{fonts.main}";
            letterSpacing: "-0.23999999463558197px";
            fontWeight: number;
            lineHeight: "16px";
        };
    };
    header: {
        value: {
            fontSize: "1.625rem";
            fontFamily: "{fonts.main}";
            fontWeight: number;
            lineHeight: "35px";
        };
    };
    caption: {
        value: {
            fontSize: "0.75rem";
            fontFamily: "{fonts.main}";
            letterSpacing: "-0.23999999463558197px";
            fontWeight: number;
            lineHeight: "16px";
        };
    };
    code: {
        value: {
            fontSize: "1rem";
            fontFamily: "{fonts.code}";
            fontWeight: number;
            lineHeight: "20px";
        };
    };
};

type TextStyleKey = keyof typeof textStyles;
type InnerTextProps = PropsWithChildren & {
    color?: ConditionalValue<WithEscapeHatch<`var(--${string})` | ColorToken>> | undefined;
    textStyle?: TextStyleKey;
};
type TextProps = ComponentProps<typeof Text>;

/**
 * @deprecated Use the `text` pattern from `@onbeam/styled-system/patterns` instead.
 * Due to the conflicting dynamic nature of the `color` and `textStyle` properties with the static nature of PandaCSS, it is inefficient to use this component.
 * @see https://panda-css.com/docs/guides/dynamic-styling
 */
declare const Text: ComponentWithAs<"p", InnerTextProps>;

declare function beamRef<Props extends object, Component extends As>(component: React.ForwardRefRenderFunction<any, RightJoinProps<PropsOf<Component>, Props> & {
    as?: As;
}>): ComponentWithAs<Component, Props>;

declare const mdxComponents: MDXComponents;

declare const rainbowKitTheme: Theme;

type ToastData = {
    description?: ReactNode;
    duration?: number;
    icon?: ReactElement;
};
/**
 * An object for displaying various types of toast notifications using Sonner, including custom,
 * success, and error notifications. Each type allows for a specified message and optional data.
 * The `dismiss` method allows for dismissing a toast notification by its ID.
 *
 * @remarks
 * To display toast notifications, ensure to include the `Toaster` component from `@onbeam/ui`
 * at the root level of your application.
 *
 * @property `[type]` - Displays a custom toast notification with a specified message and optional data.
 * @param message - The message to be displayed in the toast notification.
 * @param data - Optional data for the toast notification, including a description, duration and icon (only for type message).
 */
declare const toast: {
    message: (message: string, { icon, description, duration }?: ToastData) => string | number;
    success: (message: string, data?: Omit<ToastData, "icon">) => string | number;
    error: (message: string, data?: Omit<ToastData, "icon">) => string | number;
    dismiss: (id: string | number) => string | number;
};

export { AlertMessage, type AlertMessageProps, AppBackground, type AppBackgroundProps, Button, type ButtonProps, Calendar, type CalendarProps, Card, type CardProps, CheckboxButton, type CheckboxButtonProps, DappInputField, type DappInputFieldProps, DatePicker, type DatePickerProps, Divider, Dropzone, type DropzoneProps, ErrorMessage, type ErrorMessageProps, GameCard, type GameCardProps, Icon, IconButton, type IconButtonProps, type IconProps, Input, InputOTP, type InputProps, Label, type LabelProps, Link, type LinkProps, Loader, type LoaderProps, Marquee, type MarqueeProps, Modal, ModalPrimitive, type ModalProps, NativeSelect, type NativeSelectProps, type NavigationItem, Notification, type NotificationProps, NumberBadge, type NumberBadgeProps, ObjectTree, type ObjectTreeProps, PixelBackground, Popover, PopoverPrimitive, type PopoverProps, PoweredByBeamBanner, RadioButton, SelectButton, type SelectButtonProps, SelectModal, type SelectModalItem, type SelectModalItemProps, SelectModalPrimitive, type SelectModalProps, Skeleton, type SkeletonProps, Switch, type SwitchProps, Text, type TextProps, TimePicker, type TimePickerProps, Toaster, Toggle, type ToggleProps, Tooltip, TooltipPrimitive, type TooltipProps, TopNav, type TopNavProps, TransactionConfirmationModal, type TransactionConfirmationModalProps, TransactionDeadlineSettings, type TransactionDeadlineSettingsProps, TransactionDetailsBox, type TransactionDetailsBoxProps, TransactionDetailsRow, type TransactionDetailsRowProps, TransactionInterfaceSettings, type TransactionInterfaceSettingsProps, TransactionSlippageOption, type TransactionSlippageOptionKey, TransactionSlippageSettings, type TransactionSlippageSettingsProps, beamRef, mdxComponents, rainbowKitTheme, toast };
