import { Control } from 'react-hook-form';
import { CSSProperties } from 'react';
import { default as default_2 } from 'react';
import { FC } from 'react';
import { FieldPath } from 'react-hook-form';
import { FieldValues } from 'react-hook-form';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { ReactNode } from 'react';
import { UseFormReturn } from 'react-hook-form';

export declare const Accordion: default_2.FC<AccordionProps>;

declare interface AccordionBaseProps {
    className?: string;
    children?: default_2.ReactNode;
    /**
     * Content pinned to the right of the header, OUTSIDE the toggle button — so it may
     * be interactive (e.g. a Checkbox) without nesting a button inside a button.
     */
    trailing?: default_2.ReactNode;
    defaultExpanded?: boolean;
    isExpanded?: boolean;
    onToggle?: (expanded: boolean) => void;
    /** Disables the toggle (and its hover). Trailing controls manage their own state. */
    disabled?: boolean;
}

/**
 * Requires at least one of `title` (simple text header) or `header` (rich ReactNode
 * content for the toggle area, e.g. avatar + badges) so the toggle is never empty.
 */
export declare type AccordionProps = AccordionBaseProps & ({
    title: string;
    header?: default_2.ReactNode;
} | {
    title?: string;
    header: default_2.ReactNode;
});

/**
 * ActionMenu is a kebab-style overflow action menu. The trigger renders a
 * three-dot icon button; on click, a popover appears with the given items.
 * The popover is rendered to document.body via createPortal so it escapes
 * any Shadow DOM or overflow:hidden ancestors.
 */
export declare const ActionMenu: default_2.FC<ActionMenuProps>;

export declare type ActionMenuItem = {
    type?: 'item';
    key: string;
    label: default_2.ReactNode;
    onClick?: () => void;
    disabled?: boolean;
    danger?: boolean;
    tooltip?: string;
    icon?: default_2.ReactNode;
} | {
    type: 'divider';
    key: string;
};

export declare interface ActionMenuProps {
    items: ActionMenuItem[];
    label?: string;
    triggerIcon?: default_2.ReactNode;
    minWidth?: number;
    size?: 'small' | 'xsmall';
}

export declare const Alert: default_2.FC<AlertProps>;

declare interface AlertProps {
    type?: AlertType;
    message: string;
    hasMargin?: boolean;
    className?: string;
    children?: default_2.ReactNode;
    isExpanded?: boolean;
    onToggle?: (expanded: boolean) => void;
}

declare type AlertType = 'info' | 'success' | 'error' | 'warning';

/**
 * Apply a custom theme while preserving the current theme mode (light/dark)
 */
export declare function applyCustomTheme(customTheme: PartialMalachiteTheme): void;

/**
 * Apply the dark theme
 */
export declare function applyDarkTheme(): void;

/**
 * Apply the default (light) theme
 */
export declare function applyLightTheme(): void;

/**
 * Apply a custom theme to Malachite components
 * This function sets CSS custom properties that will be used by all Malachite components
 * Works with Shadow DOM isolation by applying to all registered shadow roots
 */
export declare function applyTheme(theme: PartialMalachiteTheme): void;

/** Scope the active theme (base mode + any persisted custom overrides) to one element/root, without changing global mode. Used by <ThemeScope>. */
export declare function applyThemeVars(target: HTMLElement | ShadowRoot, mode: ThemeMode): void;

/**
 * A logo/initial avatar. Renders `src` when available, otherwise a coloured tile
 * with the first letter of `name`. Encapsulates the fallback colour so consumers
 * never hand-roll it.
 */
export declare const Avatar: default_2.FC<AvatarProps>;

export declare interface AvatarProps {
    /** Image URL (logo/photo). Falls back to the initial of `name` when missing or it fails to load. */
    src?: string;
    /** Used for the initial fallback and as the image alt / accessible label. */
    name?: string;
    /** Pixel size of the (square) avatar. */
    size?: number;
    shape?: AvatarShape;
    className?: string;
}

export declare type AvatarShape = 'square' | 'circle';

export declare const BaseFormComponent: default_2.FC<BaseFormComponentProps>;

declare interface BaseFormComponentProps {
    label?: string;
    description?: string;
    hint?: string;
    tooltip?: string;
    required?: boolean;
    name: FieldPath<FieldValues>;
    defaultValue?: string;
    loading?: boolean;
    formControl?: Control<FieldValues, unknown>;
    loadingComponent: default_2.ReactNode;
    children?: default_2.ReactNode;
}

declare interface BaseSkeletonProps {
    active?: boolean;
    className?: string;
}

export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;

declare interface ButtonDefinition {
    label: string;
    onClick?: (e?: default_2.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | void;
    disabled?: boolean;
    danger?: boolean;
    icon?: default_2.ReactNode;
    tooltip?: string;
    variant?: ButtonVariant;
    size?: ButtonSize;
}

declare interface ButtonDefinition_2 {
    label: string;
    onClick?: (e?: default_2.MouseEvent<HTMLElement, MouseEvent>) => Promise<void> | void;
    disabled?: boolean;
    danger?: boolean;
    icon?: default_2.ReactNode;
    tooltip?: string;
}

export declare const ButtonList: default_2.FC<ButtonListProps>;

declare interface ButtonListProps {
    buttons: Array<{
        key: string;
        children: ReactNode;
        onClick?: (event: default_2.MouseEvent) => void;
        /** When set, the item renders as an anchor so it can be opened in a new tab. */
        href?: string;
    }>;
    className?: string;
    /** Renders shorter, denser rows. */
    compact?: boolean;
}

declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
    variant: ButtonVariant;
    size?: ButtonSize;
    radius?: ButtonRadius;
    loading?: boolean;
    disabled?: boolean;
    icon?: default_2.ReactNode;
    iconPosition?: 'start' | 'end';
    flexGrow?: boolean;
    fill?: boolean;
    tooltip?: string;
    tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
    iconOnly?: boolean;
    children?: default_2.ReactNode;
    onClick?: default_2.MouseEventHandler<HTMLButtonElement>;
}

declare type ButtonRadius = 'md' | 'lg' | 'xl';

declare type ButtonSize = 'xsmall' | 'small' | 'medium' | 'large';

declare type ButtonVariant = 'filled' | 'outline' | 'destructive' | 'success' | 'warning' | 'error' | 'ghost' | 'no-style';

export declare const Card: default_2.FC<CardProps>;

declare interface CardProps {
    title?: string | default_2.ReactNode;
    padding?: string;
    children?: default_2.ReactNode;
    size?: 'default' | 'small';
    width?: string;
    minWidth?: string;
    direction?: 'row' | 'column';
    align?: 'center';
    dimmed?: boolean;
    fullHeight?: boolean;
    border?: 'base' | 'rounded';
    alignSelf?: 'center';
    height?: string;
    footer?: default_2.ReactNode;
    glassFooter?: boolean;
    className?: string;
    style?: default_2.CSSProperties;
    headerConfig?: {
        padding?: string;
    };
}

export declare const Checkbox: default_2.FC<CheckboxProps>;

export declare interface CheckboxProps {
    checked: boolean;
    /** Tri-state "partial" look — overrides the checked tick with a square. */
    indeterminate?: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
    size?: number;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
    id?: string;
}

export declare const CodeBlock: default_2.FC<CodeBlockProps>;

declare interface CodeBlockProps {
    /** The code content to display */
    code?: string;
    /** JSON object to display as formatted JSON */
    json?: object;
    /** Show line numbers */
    showLineNumbers?: boolean;
    /** Custom class name */
    className?: string;
    /** Custom styles */
    style?: default_2.CSSProperties;
    /** Height of the code block */
    height?: string | number;
    /** Enable copy functionality */
    enableCopy?: boolean;
}

declare interface CodeTextProps {
    bold?: boolean;
    size?: FontSize;
    hasBorder?: boolean;
    color?: string;
    backgroundColor?: string;
    children: default_2.ReactNode;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const Confetti: default_2.FC<ConfettiProps>;

export declare interface ConfettiProps {
    /** Number of confetti pieces. */
    count?: number;
    /** Colors cycled across the pieces. */
    colors?: string[];
    className?: string;
}

export declare interface ConnectionEndpoint {
    /** Icon/glyph shown in the tile (coloured white when a `background` is set). */
    icon: default_2.ReactNode;
    /** Optional name — shown as a caption under the tiles and used as the tile's label. */
    label?: string;
    /** Tile background. When omitted, a neutral surface is used. */
    background?: string;
}

export declare const ConnectionHeader: default_2.FC<ConnectionHeaderProps>;

export declare interface ConnectionHeaderProps {
    from: ConnectionEndpoint;
    to: ConnectionEndpoint;
    className?: string;
}

export declare const CustomIcons: {
    AccountIcon: FC<IconProps>;
    AccountsIcon: FC<IconProps>;
    AddIcon: FC<IconProps>;
    AdvancedLogsIcon: FC<IconProps>;
    ApiKeysIcon: FC<IconProps>;
    ArrowLeftIcon: FC<IconProps>;
    ArrowUpRightIcon: FC<IconProps>;
    AuthenticationIcon: FC<IconProps>;
    BiDirectionalArrowsIcon: FC<IconProps>;
    CardIcon: FC<IconProps>;
    CaretDownIcon: FC<IconProps>;
    CaretLeftIcon: FC<IconProps>;
    CaretRightIcon: FC<IconProps>;
    CaretUpIcon: FC<IconProps>;
    ChangePasswordIcon: FC<IconProps>;
    CheckCircleFilled: FC<IconProps>;
    CheckIcon: FC<IconProps>;
    ClearIcon: FC<IconProps>;
    CloseIcon: FC<IconProps>;
    CommandKeyIcon: FC<IconProps>;
    CopyIcon: FC<IconProps>;
    CsvIcon: FC<IconProps>;
    CustomFieldIcon: FC<IconProps>;
    DashboardIcon: FC<IconProps>;
    DateIcon: FC<IconProps>;
    DisabledIcon: FC<IconProps>;
    DisableIcon: FC<IconProps>;
    DismissIcon: FC<IconProps>;
    DocIcon: FC<IconProps>;
    DownloadIcon: FC<IconProps>;
    EditIcon: FC<IconProps>;
    EnableIcon: FC<IconProps>;
    EnumIcon: FC<IconProps>;
    ErrorCircleFilled: FC<IconProps>;
    ExpandIcon: FC<IconProps>;
    EyeClosedIcon: FC<IconProps>;
    EyeIcon: FC<IconProps>;
    FieldMappingIcon: FC<IconProps>;
    FilledCaretDownIcon: FC<IconProps>;
    FilledCaretRightIcon: FC<IconProps>;
    FilterIcon: FC<IconProps>;
    ForbiddenIcon: FC<IconProps>;
    GlobeIcon: FC<IconProps>;
    ForwardArrowIcon: FC<IconProps>;
    InfoIcon: FC<IconProps>;
    InfoCircleFilled: FC<IconProps>;
    IntegrationsIcon: FC<IconProps>;
    KeyIcon: FC<IconProps>;
    LogsIcon: FC<IconProps>;
    MagicWandIcon: FC<IconProps>;
    ManageTeamIcon: FC<IconProps>;
    ManualWebhookIcon: FC<IconProps>;
    MembersIcon: FC<IconProps>;
    ModalIcon: FC<IconProps>;
    MoreHorizontalIcon: FC<IconProps>;
    NavbarCollapseIcon: FC<IconProps>;
    NavbarExpandIcon: FC<IconProps>;
    NotFoundIcon: FC<IconProps>;
    OrganizationIcon: FC<IconProps>;
    PlusIcon: FC<IconProps>;
    PreviewIcon: FC<IconProps>;
    ProgrammaticWebhookIcon: FC<IconProps>;
    PulseIcon: FC<IconProps>;
    RefreshIcon: FC<IconProps>;
    RejectIcon: FC<IconProps>;
    ReloadIcon: FC<IconProps>;
    RequiredFieldIndicatorIcon: FC<IconProps>;
    SearchIcon: FC<IconProps>;
    SecurityIcon: FC<IconProps>;
    SettingsIcon: FC<IconProps>;
    SignOutIcon: FC<IconProps>;
    SliderIcon: FC<IconProps>;
    SortIcon: FC<IconProps>;
    SourceIcon: FC<IconProps>;
    SyntheticWebhookIcon: FC<IconProps>;
    TrashIcon: FC<IconProps>;
    TriangleDownIcon: FC<IconProps>;
    TriangleRightIcon: FC<IconProps>;
    UploadIcon: FC<IconProps>;
    WarningCircleFilled: FC<IconProps>;
    WarningTriangleIcon: FC<IconProps>;
    WebhookEventsIcon: FC<IconProps>;
    WebhookIcon: FC<IconProps>;
    WebhookSigningSecretIcon: FC<IconProps>;
};

export declare const darkTheme: MalachiteTheme;

export declare const defaultTheme: MalachiteTheme;

export declare const DefinitionRow: default_2.FC<DefinitionRowProps>;

declare interface DefinitionRowProps {
    icon: default_2.ReactNode;
    label: string;
    tag: string;
    description: string;
}

export declare const Divider: default_2.FC<DividerProps>;

export declare type DividerLineStyle = 'solid' | 'dashed';

declare interface DividerProps {
    margin?: SpacingSize;
    padding?: PaddingSize;
    className?: string;
    variant?: DividerVariant;
    lineStyle?: DividerLineStyle;
    grow?: boolean;
}

/**
 * A 1px horizontal divider component that uses the card border style from the theme.
 * The divider spans edge to edge of its container.
 * Supports configurable margin and padding using predefined spacing sizes.
 */
export declare enum DividerVariant {
    Default = "default",
    Muted = "muted",
    Emphasis = "emphasis"
}

export declare const Dropdown: ({ items, onItemSelected, defaultValue, disabled, error, label, hint, tooltip, name, required, loading, menuLoading, formControl, description, helperText, placeholder, search, size, }: DropdownProps) => JSX_2.Element;

export declare interface DropdownItem {
    id: string;
    label: string;
    /** Alternate label shown in the trigger when selected (falls back to `label`). */
    triggerLabel?: string;
    /** Items sharing a `group` render under a section header, in first-seen order. */
    group?: string;
    subtitle?: string;
    rightSideText?: string;
    rightSideTextVariant?: 'muted' | 'primary';
    rightSideTextAlignment?: 'left' | 'right';
}

export declare interface DropdownProps {
    label?: string;
    hint?: string;
    tooltip?: string;
    name: FieldPath<FieldValues> | string;
    loading?: boolean;
    menuLoading?: boolean;
    items: DropdownItem[];
    onItemSelected?: (id?: string) => void;
    defaultValue?: string;
    disabled?: boolean;
    error?: boolean;
    className?: string;
    formControl?: Control<FieldValues, unknown>;
    description?: string;
    required?: boolean;
    helperText?: default_2.ReactNode;
    placeholder?: string;
    search?: boolean;
    /** 'medium' (42px) for form inputs; 'small' (32px) for toolbar chips. */
    size?: DropdownSize;
}

export declare type DropdownSize = 'small' | 'medium';

declare interface EllipsisTextProps {
    children: default_2.ReactNode;
    tooltip?: default_2.ReactNode | string;
    maxWidth?: string;
    color?: TextColor;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const Flex: default_2.FC<FlexProps>;

export declare enum FlexAlign {
    Top = "flex-start",
    Bottom = "flex-end",
    Center = "center",
    Normal = "normal",
    Stretch = "stretch"
}

export declare enum FlexDirection {
    Horizontal = "horizontal",
    Vertical = "vertical"
}

export declare enum FlexGapSize {
    XSmall = "xsmall",
    Small = "small",
    Medium = "medium",
    Large = "large"
}

export declare enum FlexJustify {
    Left = "flex-start",
    Right = "flex-end",
    Center = "center",
    SpaceBetween = "space-between",
    SpaceAround = "space-around",
    SpaceEvenly = "space-evenly"
}

declare interface FlexProps {
    justify?: FlexJustify;
    align?: FlexAlign;
    gapSize?: FlexGapSize;
    direction?: FlexDirection;
    fullHeight?: boolean;
    grow?: boolean;
    shrink?: boolean;
    wrap?: boolean;
    width?: string;
    id?: string;
    children?: default_2.ReactNode;
    className?: string;
}

declare type FontSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';

declare type FontWeight = 'normal' | 'semi-bold' | 'bold';

export declare const FooterLinks: default_2.FC<FooterLinksProps>;

declare interface FooterLinksProps {
    fullWidth?: boolean;
    showDocsSupport?: boolean;
}

export declare const FooterNav: default_2.FC<FooterNavProps>;

export declare interface FooterNavLink {
    label: string;
    href?: string;
    onClick?: () => void;
}

export declare interface FooterNavProps {
    links: FooterNavLink[];
    className?: string;
}

export declare const Form: default_2.FC<FormProps>;

export declare const FormItem: default_2.FC<FormItemProps>;

declare interface FormItemProps {
    control: Control<FieldValues, unknown>;
    name: FieldPath<FieldValues>;
    children: default_2.ReactNode;
}

declare interface FormProps {
    children: default_2.ReactNode;
    onFinish?: (data: FieldValues) => void;
    formInstance?: UseFormReturn<FieldValues>;
    defaultValues?: FieldValues;
    className?: string;
}

declare interface FormSectionTitleProps {
    children: default_2.ReactNode;
    className?: string;
    style?: default_2.CSSProperties;
}

/**
 * Get current theme values from CSS custom properties
 */
export declare function getCurrentTheme(): MalachiteTheme;

/**
 * Get current theme mode from localStorage
 */
export declare function getCurrentThemeMode(): 'light' | 'dark';

declare interface IconProps {
    size?: number | string;
    className?: string;
    style?: CSSProperties;
    onClick?: () => void;
}

/**
 * Initialize the theme system - should be called on app startup
 */
export declare function initializeTheme(): void;

export declare const Input: default_2.FC<InputProps>;

declare interface InputProps {
    label?: string;
    hint?: string;
    tooltip?: string;
    placeholder?: string;
    icon?: default_2.ReactNode;
    readOnly?: boolean;
    name: FieldPath<FieldValues> | string;
    type?: InputType;
    description?: string;
    size?: InputSize;
    variant?: InputVariant;
    required?: boolean;
    error?: boolean;
    loading?: boolean;
    defaultValue?: string;
    disabled?: boolean;
    prefixValue?: string;
    prefixSecondaryValue?: string;
    ellipsis?: boolean;
    formControl?: Control<FieldValues, unknown>;
    buttons?: ButtonDefinition[];
    onCopyClick?: () => void;
    showCopyButton?: boolean;
    onChange?: (value: string) => void;
    onBlur?: () => void;
    helperText?: string;
    showPasswordToggle?: boolean;
}

declare type InputSize = 'small' | 'medium' | 'large';

declare type InputType = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url';

declare type InputVariant = 'default' | 'ghost';

export declare const Link: default_2.FC<LinkProps>;

export declare interface LinkProps {
    href: string;
    target?: '_blank' | '_self' | '_parent' | '_top';
    rel?: string;
    children: default_2.ReactNode;
    className?: string;
    color?: 'default' | 'dimmed';
    size?: FontSize;
    underline?: boolean;
}

declare interface LinkProps_2 {
    href: string;
    target?: '_blank' | '_self' | '_parent' | '_top';
    rel?: string;
    children: default_2.ReactNode;
    className?: string;
    showRightBorder?: boolean;
    showLeftBorder?: boolean;
    padding?: boolean;
    color?: 'default' | 'dimmed';
    fontSize?: 'sm' | 'base';
}

/**
 * MalachiteContext provides a Shadow DOM context with theme setup for Malachite components.
 * Use this to wrap groups of Malachite components instead of each component managing its own Shadow DOM.
 *
 * @example
 * <MalachiteContext>
 *   <Button variant="filled">Click me</Button>
 *   <Card>
 *     <CardContent>Hello world</CardContent>
 *   </Card>
 * </MalachiteContext>
 */
export declare const MalachiteContext: default_2.FC<MalachiteContextProps>;

declare interface MalachiteContextProps {
    children: default_2.ReactNode;
    className?: string;
}

export declare interface MalachiteTheme {
    fontSizes: {
        xsmall: string;
        small: string;
        medium: string;
        large: string;
        xlarge: string;
    };
    iconSizes: {
        xsmall: string;
        small: string;
        medium: string;
        large: string;
    };
    radius: {
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    shadows: {
        sm: string;
        md: string;
        lg: string;
        xl: string;
        default: string;
        success: string;
        warning: string;
        error: string;
    };
    colors: {
        shadowColor: string;
        shadowOpacity: number;
        card: {
            background: string;
            foreground: string;
            border: string;
            shadow: string;
            dimmedBackground: string;
            sunkenBackground: string;
            warmBackground: string;
            headerBackground: string;
            footerBackground: string;
            footerGlassBackground: string;
        };
        alert: {
            info: {
                background: string;
                foreground: string;
            };
            success: {
                background: string;
                foreground: string;
            };
            error: {
                background: string;
                foreground: string;
            };
            warning: {
                background: string;
                foreground: string;
            };
        };
        tooltip: {
            background: string;
            foreground: string;
            border: string;
            shadow: string;
        };
        primary: {
            background: string;
            foreground: string;
            border: string;
            borderHover: string;
        };
        outline: {
            foreground: string;
        };
        secondary: {
            background: string;
            foreground: string;
            border: string;
            borderHover: string;
        };
        destructive: {
            background: string;
            foreground: string;
            border: string;
            borderHover: string;
            shadow: string;
            shadowLight: string;
            shadowMedium: string;
        };
        success: {
            background: string;
            foreground: string;
            border: string;
            borderHover: string;
            backgroundGlass: string;
            shadowLight: string;
            shadowMedium: string;
        };
        warning: {
            background: string;
            foreground: string;
            border: string;
            borderHover: string;
            backgroundGlass: string;
            shadowLight: string;
            shadowMedium: string;
        };
        error: {
            background: string;
            foreground: string;
            border: string;
            borderHover: string;
            backgroundGlass: string;
            shadowLight: string;
            shadowMedium: string;
        };
        buttonList: {
            background: string;
            foreground: string;
            hoverBackground: string;
            hoverForeground: string;
        };
        pillButton: {
            background: string;
            foreground: string;
            hoverBackground: string;
            hoverForeground: string;
            pressedBackground: string;
            pressedForeground: string;
            pressedOpacity: string;
            activeBackground: string;
            activeForeground: string;
            staticBackground: string;
            staticForeground: string;
            invertedBackground: string;
            invertedForeground: string;
            invertedHoverBackground: string;
            invertedHoverForeground: string;
            invertedPressedBackground: string;
            invertedPressedForeground: string;
        };
        toggle: {
            track: string;
            trackChecked: string;
            knob: string;
        };
        dropdown: {
            border: string;
            borderHover: string;
            borderActive: string;
            borderFilter: string;
            borderError: string;
            shadow: string;
            shadowHover: string;
            shadowActive: string;
            shadowFilter: string;
            shadowError: string;
            disabledBackground: string;
        };
        tag: {
            primary: {
                background: string;
                foreground: string;
                border: string;
                shadow: string;
            };
            secondary: {
                background: string;
                foreground: string;
                border: string;
                shadow: string;
            };
            default: {
                background: string;
                foreground: string;
                border: string;
                shadow: string;
            };
            error: {
                background: string;
                foreground: string;
                border: string;
                shadow: string;
            };
            warning: {
                background: string;
                foreground: string;
                border: string;
                shadow: string;
            };
            success: {
                background: string;
                foreground: string;
                border: string;
                shadow: string;
            };
        };
        numberTag: {
            background: string;
            foreground: string;
            emphasisBackground: string;
            emphasisForeground: string;
        };
        table: {
            background: string;
            boxShadow: string;
            header: {
                background: string;
                foreground: string;
                border: string;
            };
            row: {
                background: string;
                foreground: string;
                hoverBackground: string;
                border: string;
            };
            border: string;
            borderedRow: {
                background: string;
                outline: string;
            };
            rowVariant: {
                success: {
                    background: string;
                };
                warning: {
                    background: string;
                };
                error: {
                    background: string;
                };
                info: {
                    background: string;
                };
            };
            error: {
                iconBackground: string;
                iconForeground: string;
                titleForeground: string;
                subtitleForeground: string;
            };
        };
        text: {
            primary: string;
            secondary: string;
            dimmed: string;
            emphasis: string;
            muted: string;
            placeholder: string;
            destructive: string;
            success: string;
            highlight: string;
            warning: string;
            warningMuted: string;
            error: string;
            linkForeground: string;
            linkForegroundHover: string;
            rightSideText: {
                muted: string;
                primary: string;
                alignment: 'left' | 'right';
            };
        };
        codeBlock: {
            background: string;
            foreground: string;
            border: string;
            lineNumber: string;
            keyword: string;
            comment: string;
            string: string;
            number: string;
            type: string;
        };
    };
}

declare interface MarkdownProps {
    text: string;
    color?: TextColor;
    size?: FontSize;
    omitMargin?: boolean;
}

export declare const MultiSelect: default_2.FC<MultiSelectProps>;

export declare interface MultiSelectOption {
    value: string;
    label: default_2.ReactNode;
    searchText?: string;
}

export declare interface MultiSelectProps {
    options: MultiSelectOption[];
    value: string[];
    onChange: (next: string[]) => void;
    placeholder?: string;
    renderTrigger?: (selected: MultiSelectOption[]) => default_2.ReactNode;
    searchable?: boolean;
    size?: MultiSelectSize;
    width?: string | number;
    minWidth?: number;
    disabled?: boolean;
    error?: boolean;
    loading?: boolean;
    label?: string;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare type MultiSelectSize = 'small' | 'medium';

export declare const NumberTag: default_2.FC<NumberTagProps>;

export declare interface NumberTagProps {
    value: number | string;
    emphasis?: boolean;
    className?: string;
}

export declare const OverflowRow: default_2.FC<OverflowRowProps>;

declare interface OverflowRowProps {
    children?: default_2.ReactNode;
    gap?: number | string;
    align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
    justify?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
    className?: string;
    renderOverflow?: (hiddenCount: number) => default_2.ReactNode;
}

export declare const Padded: default_2.FC<PaddedProps>;

declare interface PaddedProps {
    vertical: PaddingSize_2;
    horizontal: PaddingSize_2;
    children: default_2.ReactNode;
    fullHeight?: boolean;
    className?: string;
    overflow?: 'hidden' | 'visible' | 'scroll' | 'auto';
}

export declare enum PaddingSize {
    XSmall = "xsmall",
    Small = "small",
    Medium = "medium",
    Large = "large"
}

declare type PaddingSize_2 = 'xsmall' | 'small' | 'medium' | 'large' | 'none';

declare type PaddingSize_3 = 'default' | 'compact';

declare interface PageTitleProps {
    children: default_2.ReactNode;
    margin?: string;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare interface PartialMalachiteTheme {
    fontSizes?: Partial<MalachiteTheme['fontSizes']>;
    iconSizes?: Partial<MalachiteTheme['iconSizes']>;
    radius?: Partial<MalachiteTheme['radius']>;
    shadows?: Partial<MalachiteTheme['shadows']>;
    colors?: {
        shadowColor?: string;
        shadowOpacity?: number;
        card?: Partial<MalachiteTheme['colors']['card']>;
        alert?: Partial<MalachiteTheme['colors']['alert']>;
        tooltip?: Partial<MalachiteTheme['colors']['tooltip']>;
        primary?: Partial<MalachiteTheme['colors']['primary']>;
        outline?: Partial<MalachiteTheme['colors']['outline']>;
        secondary?: Partial<MalachiteTheme['colors']['secondary']>;
        destructive?: Partial<MalachiteTheme['colors']['destructive']>;
        success?: Partial<MalachiteTheme['colors']['success']>;
        warning?: Partial<MalachiteTheme['colors']['warning']>;
        error?: Partial<MalachiteTheme['colors']['error']>;
        buttonList?: Partial<MalachiteTheme['colors']['buttonList']>;
        pillButton?: Partial<MalachiteTheme['colors']['pillButton']>;
        toggle?: Partial<MalachiteTheme['colors']['toggle']>;
        dropdown?: Partial<MalachiteTheme['colors']['dropdown']>;
        tag?: Partial<MalachiteTheme['colors']['tag']>;
        numberTag?: Partial<MalachiteTheme['colors']['numberTag']>;
        table?: Partial<MalachiteTheme['colors']['table']>;
        text?: Partial<MalachiteTheme['colors']['text']>;
        codeBlock?: Partial<MalachiteTheme['colors']['codeBlock']>;
    };
}

export declare const PillButton: default_2.FC<PillButtonProps>;

declare interface PillButtonProps {
    label: string;
    icon?: default_2.ReactNode;
    className?: string;
    selected?: boolean;
    disabled?: boolean;
    interactive?: boolean;
    size?: PillButtonSize;
    variant?: PillButtonVariant;
    onClick?: () => void;
}

declare type PillButtonSize = 'small' | 'medium';

declare type PillButtonVariant = 'default' | 'inverted';

/** A translucent rounded card that groups {@link PreviewTreeRow}s into a tree preview. */
export declare const PreviewTree: default_2.FC<PreviewTreeProps>;

declare interface PreviewTreeProps {
    children: default_2.ReactNode;
}

export declare const PreviewTreeRow: default_2.FC<PreviewTreeRowProps>;

declare interface PreviewTreeRowProps {
    icon: default_2.ReactNode;
    label: string;
    tag: string;
    highlighted?: boolean;
    indented?: boolean;
    onToggle?: () => void;
    expanded?: boolean;
}

export declare const Progress: default_2.FC<ProgressProps>;

export declare interface ProgressProps {
    value: number;
    color?: string;
    trackColor?: string;
    height?: number;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const Radio: default_2.FC<RadioProps>;

export declare interface RadioProps {
    checked: boolean;
    /** Optional when `presentational` — a presentational radio is a visual indicator only. */
    onChange?: (checked: boolean) => void;
    disabled?: boolean;
    size?: number;
    /**
     * Render a visual-only indicator (a non-interactive, non-focusable `<span>`,
     * `aria-hidden`) instead of an interactive radio. Use this inside a clickable
     * row/card whose wrapper is the real control, so there's a single tab stop.
     */
    presentational?: boolean;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
    id?: string;
}

/**
 * Reset theme to default values
 */
export declare function resetTheme(): void;

export declare type RowVariant = 'success' | 'warning' | 'error' | 'info';

export declare const Search: default_2.FC<SearchProps>;

export declare interface SearchProps {
    value: string;
    onChange: (value: string) => void;
    placeholder?: string;
    size?: SearchSize;
    variant?: SearchVariant;
    disabled?: boolean;
    autoFocus?: boolean;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare type SearchSize = 'small' | 'medium';

export declare type SearchVariant = 'default' | 'muted';

declare interface SecondaryTextProps {
    children: default_2.ReactNode;
    fontWeight?: FontWeight;
    size?: FontSize;
    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
    className?: string;
    style?: default_2.CSSProperties;
}

declare interface SectionTitleProps {
    children: default_2.ReactNode;
    className?: string;
    style?: default_2.CSSProperties;
}

/**
 * ShadowEscape renders its children OUTSIDE the Shadow DOM to avoid React hook issues.
 * This is used internally by form components to escape Shadow DOM boundaries.
 *
 * The component finds the nearest non-shadow DOM ancestor and renders there.
 */
export declare const ShadowEscape: default_2.FC<ShadowEscapeProps>;

declare interface ShadowEscapeProps {
    children: default_2.ReactNode;
    className?: string;
}

export declare const Skeleton: {
    Button: default_2.FC<SkeletonButtonProps>;
    Input: default_2.FC<SkeletonInputProps>;
    Avatar: default_2.FC<SkeletonAvatarProps>;
};

declare interface SkeletonAvatarProps extends BaseSkeletonProps {
    size?: SkeletonSize | number;
    shape?: 'circle' | 'square';
}

declare interface SkeletonButtonProps extends BaseSkeletonProps {
    size?: SkeletonSize;
    shape?: SkeletonShape;
    block?: boolean;
    width?: number | string;
    height?: number | string;
    minWidth?: number | string;
}

declare interface SkeletonInputProps extends BaseSkeletonProps {
    size?: SkeletonSize;
    block?: boolean;
    width?: number | string;
    height?: number | string;
    minWidth?: number | string;
}

declare type SkeletonShape = 'default' | 'round' | 'circle' | 'square';

declare type SkeletonSize = 'small' | 'default' | 'large';

export declare const Spacer: default_2.FC<SpacerProps>;

declare interface SpacerProps {
    direction?: 'horizontal' | 'vertical';
    size?: number;
    align?: 'center' | 'start' | 'end' | 'baseline' | 'stretch';
    justifyContent?: 'space-between' | 'end' | 'center';
    padding?: string;
    children: default_2.ReactNode;
    id?: string;
    fullHeight?: boolean;
    fullWidth?: boolean;
    className?: string;
}

export declare enum SpacingSize {
    XSmall = "xsmall",
    Small = "small",
    Medium = "medium",
    Large = "large"
}

export declare const Spinner: default_2.FC<SpinnerProps>;

declare interface SpinnerProps {
    size?: 'xxxsmall' | 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large';
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const SplitScreenLayout: default_2.FC<SplitScreenLayoutProps>;

declare interface SplitScreenLayoutProps {
    left: default_2.ReactNode;
    right: default_2.ReactNode;
    logo?: default_2.ReactNode;
    onClose?: () => void;
    footer?: default_2.ReactNode;
}

export declare const StatBadge: default_2.FC<StatBadgeProps>;

export declare interface StatBadgeProps {
    /** The numeric value shown in the pill. */
    count: number;
    /** Caption shown next to the pill. */
    label: string;
    className?: string;
}

export declare const Statistic: default_2.FC<StatisticProps>;

declare interface StatisticLabelProps {
    bold?: boolean;
    children: default_2.ReactNode;
    secondary?: boolean;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare interface StatisticProps {
    label: string | default_2.ReactNode;
    value: string | number | default_2.ReactNode;
    sub?: string | default_2.ReactNode;
    accent?: string;
    valueSize?: StatisticValueSize;
    width?: string | number;
    minWidth?: string | number;
    padding?: string;
    align?: 'left' | 'center' | 'right';
    className?: string;
    style?: default_2.CSSProperties;
}

declare interface StatisticValueProps {
    children: default_2.ReactNode;
    secondary?: boolean;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare type StatisticValueSize = 'small' | 'medium' | 'large';

export declare const StatusBadge: default_2.FC<StatusBadgeProps>;

export declare interface StatusBadgeProps {
    type?: StatusBadgeType;
    size?: number;
    className?: string;
    'aria-label'?: string;
}

export declare type StatusBadgeType = 'success' | 'error' | 'warning' | 'info';

export declare const Stepper: default_2.FC<StepperProps>;

export declare interface StepperProps {
    /** Total number of steps. */
    steps: number;
    /** Active step index (0-based). */
    active: number;
    /** When provided, each step becomes a clickable control. */
    onChange?: (index: number) => void;
    className?: string;
    'aria-label'?: string;
}

export declare const Surface: SurfaceComponent;

declare interface SurfaceComponent extends default_2.FC<SurfaceProps> {
    Row: default_2.FC<SurfaceRowProps>;
}

export declare interface SurfaceProps {
    children?: default_2.ReactNode;
    padding?: boolean;
    role?: default_2.AriaRole;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
    style?: default_2.CSSProperties;
}

/**
 * A single full-bleed row inside a <Surface>. Owns the row chrome — hover
 * highlight, colour transition and an optional bottom divider — so consumers
 * compose their own content inside without re-implementing design-system styling.
 * Pass `onClick`/`href` to make the entire row clickable (rendered as a real
 * button/anchor, so keyboard navigation works natively).
 */
export declare const SurfaceRow: default_2.FC<SurfaceRowProps>;

export declare interface SurfaceRowProps {
    children?: default_2.ReactNode;
    /** Renders a bottom divider — omit on the last row in a Surface. */
    divider?: boolean;
    /** Removes the hover affordance / disables the control (e.g. while loading/busy). */
    disabled?: boolean;
    /**
     * When provided, the whole row becomes clickable: it renders as a `<button>`
     * (or `<a>` when `href` is set), so the entire row is the click target with
     * native focus + Enter/Space — no manual tabIndex/key handlers. For a
     * selectable row, put a presentational `<Radio>`/`<Checkbox>` inside as the
     * visual indicator; do NOT nest an interactive control (invalid + double tab stop).
     */
    onClick?: (event: default_2.MouseEvent) => void;
    /** Renders the clickable row as an anchor instead of a button. */
    href?: string;
    /** Selected state. Drives `aria-checked` when `role` is `radio`/`checkbox`. */
    selected?: boolean;
    /** ARIA role for a clickable row, e.g. `radio`/`checkbox` (wrap the list in a `radiogroup`). */
    role?: default_2.AriaRole;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const Swatch: default_2.FC<SwatchProps>;

export declare interface SwatchProps {
    color?: string;
    size?: number;
    on?: boolean;
    radius?: number;
    children?: default_2.ReactNode;
    onClick?: () => void;
    'aria-label'?: string;
    'aria-pressed'?: boolean;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare interface TabItem {
    key: string;
    label: default_2.ReactNode;
    disabled?: boolean;
}

export declare const Table: <T = Record<string, unknown>>({ columns, data, loading, error, errorTitle, errorSubTitle, bordered, showHeader, rowKey, scrollHeight, size, layout, headerVariant, rowClassName, rowVariant, onRow, onClickRow, rowSelection, pagination, className, style, stickyHeaderTop, scrollX, rowSection, renderSectionDivider, }: TableProps<T>) => JSX_2.Element;

export declare type TableColumnDefinition<T = Record<string, unknown>> = {
    title: string | default_2.ReactNode;
    dataIndex: keyof T | (string & {});
    key: string;
    width?: string | number;
    minWidth?: number;
    ellipsis?: boolean;
    render?: (value: unknown, record?: T, index?: number) => default_2.ReactNode;
    sorter?: boolean | ((a: T, b: T) => number);
    sortIcon?: (props: {
        sortOrder: 'desc' | 'asc' | null;
    }) => default_2.ReactNode;
    onHeaderCell?: (data: T, index?: number) => default_2.HTMLAttributes<HTMLTableCellElement> | default_2.TdHTMLAttributes<HTMLTableCellElement>;
    defaultSortOrder?: 'ascend' | 'descend';
    sortDirections?: ('ascend' | 'descend')[];
    fixed?: 'left' | 'right';
    align?: 'left' | 'center' | 'right';
};

export declare type TableColumns<T = Record<string, unknown>> = TableColumnDefinition<T>[];

declare type TableHeaderVariant = 'inline' | 'detached';

export declare type TablePaginationPosition = 'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight';

declare type TableProps<T = Record<string, unknown>> = {
    columns: TableColumns<T>;
    data: T[];
    loading?: boolean;
    error?: boolean;
    errorTitle?: string;
    errorSubTitle?: string;
    bordered?: boolean;
    showHeader?: boolean;
    rowKey?: string | ((record: T) => string);
    scrollHeight?: string | number;
    type?: TableType;
    size?: TableSize;
    layout?: 'fixed' | 'auto';
    headerVariant?: TableHeaderVariant;
    rowClassName?: (record: T, index: number) => string;
    rowVariant?: (record: T, index: number) => RowVariant | undefined;
    onRow?: (record: T, index: number) => TableRowActions<T>;
    onClickRow?: (record: T, index: number) => void;
    rowSelection?: TableRowSelection<T>;
    pagination?: {
        current?: number;
        pageSize?: number;
        total?: number;
        showSizeChanger?: boolean;
        showQuickJumper?: boolean;
        showTotal?: (total: number, range: [number, number]) => default_2.ReactNode;
        pageSizeOptions?: string[];
        position?: TablePaginationPosition[];
        onChange?: (page: number, pageSize: number) => void;
        onShowSizeChange?: (current: number, size: number) => void;
    };
    className?: string;
    style?: default_2.CSSProperties;
    /** When set, makes the detached-variant header sticky at this offset (px) from the
     *  top of the nearest scrolling ancestor. Use this when the table sits inside a
     *  page-level scroll container with other sticky elements (e.g. tabs + toolbar)
     *  stacked above. */
    stickyHeaderTop?: number;
    scrollX?: boolean;
    rowSection?: (record: T) => string;
    renderSectionDivider?: (sectionKey: string, records: T[]) => default_2.ReactNode;
};

declare type TableRowActions<T = Record<string, unknown>> = {
    onClick?: (record: T, index: number) => void;
    onDoubleClick?: (record: T, index: number) => void;
    onContextMenu?: (record: T, index: number) => void;
    onMouseEnter?: (record: T, index: number) => void;
    onMouseLeave?: (record: T, index: number) => void;
};

export declare type TableRowSelection<T = Record<string, unknown>> = {
    type?: 'checkbox' | 'radio';
    selectedRowKeys?: default_2.Key[];
    onChange?: (selectedRowKeys: default_2.Key[], selectedRows: T[]) => void;
    onSelect?: (record: T, selected: boolean, selectedRows: T[], nativeEvent: Event) => void;
    onSelectAll?: (selected: boolean, selectedRows: T[], changeRows: T[]) => void;
    getCheckboxProps?: (record: T) => {
        disabled?: boolean;
        name?: string;
    };
    hideSelectAll?: boolean;
    preserveSelectedRowKeys?: boolean;
    fixed?: boolean;
    columnWidth?: string | number;
    columnTitle?: string | default_2.ReactNode;
    selections?: boolean | default_2.ReactNode[];
};

export declare type TableSize = 'small' | 'medium' | 'large';

export declare type TableType = 'default' | 'compact' | 'bordered';

export declare const Tabs: default_2.FC<TabsProps>;

export declare interface TabsProps {
    items: TabItem[];
    activeKey: string;
    onChange: (key: string) => void;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const Tag: default_2.FC<TagProps>;

export declare interface TagProps {
    value: string | number | default_2.ReactNode;
    type?: TagType;
    bordered?: boolean;
    shadow?: boolean;
    textTransform?: 'none' | 'uppercase';
    width?: WidthSize;
    paddingSize?: PaddingSize_3;
    icon?: default_2.ReactNode;
    iconPosition?: 'left' | 'right';
    pointerType?: 'pointer' | 'default';
    onClick?: () => void;
    className?: string;
}

export declare type TagType = 'primary' | 'secondary' | 'default' | 'error' | 'warning' | 'success';

declare interface TerminalTextProps {
    bold?: boolean;
    size?: FontSize;
    children: default_2.ReactNode;
    color?: TextColor;
    className?: string;
    style?: default_2.CSSProperties;
}

export declare const TextArea: default_2.FC<TextAreaProps>;

declare interface TextAreaProps {
    label?: string;
    hint?: string;
    tooltip?: string;
    placeholder?: string;
    icon?: default_2.ReactNode;
    readOnly?: boolean;
    name: FieldPath<FieldValues> | string;
    description?: string;
    size?: TextAreaSize;
    required?: boolean;
    error?: boolean;
    loading?: boolean;
    defaultValue?: string;
    disabled?: boolean;
    prefixValue?: string;
    prefixSecondaryValue?: string;
    ellipsis?: boolean;
    formControl?: Control<FieldValues, unknown>;
    buttons?: ButtonDefinition_2[];
    onCopyClick?: () => void;
    onChange?: (value: string) => void;
    value?: string;
    onBlur?: () => void;
    rows?: number;
    maxLength?: number;
    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
}

declare type TextAreaSize = 'small' | 'medium' | 'large';

declare type TextColor = 'primary' | 'secondary' | 'dimmed' | 'placeholder' | 'emphasis' | 'muted' | 'destructive' | 'success' | 'highlight' | 'warning' | 'error' | 'link';

declare interface TextProps {
    color?: TextColor;
    size?: FontSize;
    underline?: boolean;
    fontWeight?: FontWeight;
    children: default_2.ReactNode;
    tooltip?: string;
    textAlign?: 'left' | 'center' | 'right' | 'justify';
    className?: string;
    style?: default_2.CSSProperties;
}

export declare type ThemeMode = 'light' | 'dark';

/**
 * Pins a subtree to a fixed Malachite theme via its own shadow root — a themed island (e.g. a dark
 * panel in a light app). The dedicated root is required: theme tokens are scoped per shadow root.
 */
export declare const ThemeScope: default_2.FC<ThemeScopeProps>;

export declare interface ThemeScopeProps {
    mode?: ThemeMode;
    fontFamily?: string;
    className?: string;
    style?: default_2.CSSProperties;
    children?: default_2.ReactNode;
}

export declare const Toggle: default_2.FC<ToggleProps>;

declare interface ToggleProps {
    checked: boolean;
    onChange: (checked: boolean) => void;
    disabled?: boolean;
    size?: ToggleSize;
    'aria-label'?: string;
    'aria-labelledby'?: string;
    className?: string;
    id?: string;
}

declare type ToggleSize = 'small' | 'medium';

/**
 * Toggle between light and dark themes
 */
export declare function toggleTheme(): 'light' | 'dark';

export declare const Tooltip: default_2.FC<TooltipProps>;

declare interface TooltipProps {
    text: default_2.ReactNode | string;
    children: default_2.ReactNode;
    delay?: number;
    wrapChildren?: boolean;
    placement?: 'top' | 'bottom' | 'left' | 'right';
    isShrinkable?: boolean;
    fill?: boolean;
}

/**
 * TruncatedTooltip renders its children in a single-line truncating container
 * (overflow:hidden + text-overflow:ellipsis + white-space:nowrap). It measures
 * the rendered content via ResizeObserver and only surfaces the malachite
 * Tooltip when the content is actually being cut off.
 */
export declare const TruncatedTooltip: default_2.FC<TruncatedTooltipProps>;

export declare interface TruncatedTooltipProps {
    text: default_2.ReactNode | string;
    children: default_2.ReactNode;
    delay?: number;
    placement?: 'top' | 'bottom' | 'left' | 'right';
    className?: string;
}

export declare const Typography: {
    CodeText: FC<CodeTextProps>;
    EllipsisText: FC<EllipsisTextProps>;
    FormSectionTitle: FC<FormSectionTitleProps>;
    LinkText: FC<LinkProps_2>;
    MarkdownBlock: FC<MarkdownProps>;
    PageTitle: FC<PageTitleProps>;
    SecondaryText: FC<SecondaryTextProps>;
    SectionTitle: FC<SectionTitleProps>;
    StatisticLabel: FC<StatisticLabelProps>;
    StatisticValue: FC<StatisticValueProps>;
    TerminalText: FC<TerminalTextProps>;
    Text: FC<TextProps>;
};

export declare type WidthSize = 'large' | 'medium' | 'small' | 'xsmall';

export declare const WizardLayout: default_2.FC<WizardLayoutProps>;

export declare interface WizardLayoutProps {
    /** Renders the outline back button in the top-left slot. */
    showBack?: boolean;
    onBack?: () => void;
    backDisabled?: boolean;
    /** Right top-bar slot (sits just before `trailing`) — typically a <Stepper />. */
    stepper?: default_2.ReactNode;
    /** Far-right top-bar slot — e.g. a theme toggle. */
    trailing?: default_2.ReactNode;
    /** Pinned to the bottom of the screen — typically a <FooterNav />. */
    footer?: default_2.ReactNode;
    /** Vertically centre the content (used for terminal/success screens). */
    center?: boolean;
    /** Max width of the centered content column. */
    contentWidth?: number;
    /** Minimum width of the whole layout, below which it scrolls horizontally. */
    minWidth?: number;
    children?: default_2.ReactNode;
    className?: string;
}

export { }
