type BreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
type ResponsiveProp<T extends number | string> = T | Partial<{
    [K in BreakPoints]: T;
}>;
declare const breakpoints: {
    values: Record<BreakPoints, number>;
    up: (key: BreakPoints) => string;
    down: (key: BreakPoints) => string;
};

declare const base: {
    breakpoints: {
        values: Record<BreakPoints, number>;
        up: (key: BreakPoints) => string;
        down: (key: BreakPoints) => string;
    };
    colors: {
        textPrimary: string;
        textSecondary: string;
        textTertiary: string;
        bgPrimary: string;
        warn: string;
        error: string;
        warning: string;
        success: string;
    };
    font: {
        primary: string;
    };
    fontWeight: {
        light: string;
        book: string;
        medium: string;
        semibold: string;
        bold: string;
        extrabold: string;
    };
    text: {
        xs: string;
        s: string;
        base: string;
        lg: string;
        xl: string;
        xl2: string;
        xl3: string;
        xl4: string;
        xl5: string;
        xl6: string;
    };
    lineHeight: {
        base: string;
        s: string;
        lg: string;
        xl: string;
    };
    spacing: {
        spacing0: string;
        spacing1: string;
        spacing2: string;
        spacing3: string;
        spacing4: string;
        spacing5: string;
        spacing6: string;
        spacing8: string;
        spacing10: string;
        spacing12: string;
        spacing14: string;
        spacing16: string;
        spacing18: string;
        spacing28: string;
    };
    rounded: {
        sm: string;
        rg: string;
        md: string;
        lg: string;
        xl: string;
        full: string;
    };
    border: {
        default: string;
        hover: string;
        focus: string;
        disabled: string;
        error: string;
    };
    outline: {
        default: string;
    };
    boxShadow: {
        default: string;
        focus: string;
    };
    input: {
        color: string;
        background: string;
        height: string;
        default: {
            border: string;
        };
        hover: {
            border: string;
        };
        focus: {
            border: string;
            boxShadow: string;
        };
        error: {
            color: string;
            border: string;
        };
        disabled: {
            color: string;
            bg: string;
            border: string;
        };
        helperText: {
            error: {
                color: string;
            };
        };
        small: {
            text: string;
            maxHeight: string;
            weight: string;
        };
        medium: {
            text: string;
            maxHeight: string;
            weight: string;
        };
        large: {
            text: string;
            maxHeight: string;
            weight: string;
        };
        overflow: {
            large: {
                text: string;
            };
        };
        paddingX: {
            s: string;
            md: string;
            lg: string;
            xl: string;
            xl2: string;
        };
    };
    label: {
        text: string;
    };
    tokenInput: {
        endAdornment: {
            bg: string;
        };
        list: {
            item: {
                default: {
                    text: string;
                };
                selected: {
                    text: string;
                };
            };
        };
    };
    card: {
        outlined: {
            border: string;
        };
        bg: {
            primary: string;
            secondary: string;
            tertiary: string;
        };
    };
    cta: {
        primary: {
            bg: string;
            bgHover: string;
            text: string;
        };
        secondary: {
            bg: string;
            text: string;
        };
        outlined: {
            text: string;
            border: string;
            bgHover: string;
        };
        text: {
            text: string;
            bgHover: string;
        };
        'x-small': {
            padding: string;
            text: string;
            lineHeight: string;
        };
        small: {
            padding: string;
            text: string;
            lineHeight: string;
        };
        medium: {
            padding: string;
            text: string;
            lineHeight: string;
        };
        large: {
            padding: string;
            text: string;
            lineHeight: string;
        };
    };
    table: {
        border: string;
        header: {
            bg: string;
        };
        row: {
            odd: {
                bg: string;
            };
            even: {
                bg: string;
            };
            bgHover: string;
        };
    };
    alert: {
        status: {
            error: string;
            warning: string;
            success: string;
        };
        bg: {
            error: string;
            warning: string;
            success: string;
        };
    };
    transition: {
        default: string;
        duration: {
            duration100: number;
            duration150: number;
            duration250: number;
        };
    };
    tabs: {
        bg: string;
        color: string;
        active: {
            color: string;
            bg: string;
        };
        border: string;
        small: {
            wrapper: {
                padding: string;
            };
            tab: {
                padding: string;
                text: string;
                fontWeight: string;
            };
            selection: {
                padding: string;
            };
        };
        medium: {
            wrapper: {
                padding: string;
            };
            tab: {
                padding: string;
                text: string;
                fontWeight: string;
            };
            selection: {
                padding: string;
            };
        };
        large: {
            wrapper: {
                padding: string;
            };
            tab: {
                padding: string;
                text: string;
                fontWeight: string;
            };
            selection: {
                padding: string;
            };
        };
    };
    meter: {
        bar: {
            status: {
                error: string;
                warning: string;
                success: string;
            };
            primary: {
                bg: string;
            };
            secondary: {
                bg: string;
            };
            height: string;
            radius: string;
            indicator: {
                border: {
                    left: string;
                    right: string;
                    bottom: string;
                };
                color: string;
                primary: {
                    marginTop: string;
                };
                secondary: {
                    marginTop: string;
                };
            };
            separator: {
                color: string;
            };
        };
    };
    progressBar: {
        bg: string;
    };
    spinner: {
        determinate: {
            color: string;
            bg: string;
        };
        indeterminate: {
            primary: {
                color: string;
                bg: string;
            };
            secondary: {
                color: string;
                bg: string;
            };
            outlined: {
                color: string;
                bg: string;
            };
            text: {
                color: string;
                bg: string;
            };
        };
    };
    progress: {
        circle: {
            mask: string;
            fill: string;
        };
    };
    overlay: {
        placement: {
            transform: string;
        };
        bg: string;
    };
    transaction: {
        status: {
            color: {
                error: string;
                warning: string;
                success: string;
            };
            bg: {
                error: string;
                warning: string;
                success: string;
            };
        };
    };
    coinIcon: {
        small: {
            width: string;
        };
        medium: {
            width: string;
        };
        large: {
            width: string;
        };
    };
    dialog: {
        small: {
            width: string;
            header: {
                paddingTop: string;
                paddingBottom: string;
                paddingX: string;
                padding: string;
            };
            divider: {
                marginX: string;
                marginBottom: string;
            };
            body: {
                paddingY: string;
                paddingX: string;
            };
            footer: {
                paddingTop: string;
                paddingBottom: string;
                paddingX: string;
                padding: string;
            };
        };
        medium: {
            width: string;
            header: {
                paddingY: string;
                paddingX: string;
                padding: string;
            };
            divider: {
                marginX: string;
                marginBottom: string;
            };
            body: {
                paddingY: string;
                paddingX: string;
            };
            footer: {
                paddingTop: string;
                paddingBottom: string;
                paddingX: string;
                padding: string;
            };
        };
        large: {
            width: string;
            header: {
                paddingY: string;
                paddingX: string;
                padding: string;
            };
            divider: {
                marginX: string;
                marginBottom: string;
            };
            body: {
                paddingY: string;
                paddingX: string;
            };
            footer: {
                paddingTop: string;
                paddingBottom: string;
                paddingX: string;
                padding: string;
            };
        };
        closeBtn: {
            zIndex: number;
        };
    };
    modal: {
        maxHeight: string;
        zIndex: number;
        underlay: {
            zIndex: number;
            bg: string;
            transition: {
                entering: string;
                exiting: string;
            };
        };
        transition: {
            entering: string;
            exiting: string;
        };
    };
    switch: {
        unchecked: {
            bg: string;
        };
        checked: {
            bg: string;
        };
        indicator: {
            bg: string;
        };
    };
    tooltip: {
        bg: string;
        offset: string;
        tip: {
            bg: string;
            width: string;
        };
    };
    divider: {
        bg: string;
        size: {
            small: string;
            medium: string;
            large: string;
        };
    };
    icon: {
        sizes: {
            xs: string;
            s: string;
            md: string;
            lg: string;
            xl: string;
            xl2: string;
        };
        fallback: {
            color: string;
            stroke: string;
        };
    };
    list: {
        text: string;
        primary: {
            bg: string;
            border: string;
            rounded: string;
        };
        secondary: {
            bg: string;
            border: string;
            rounded: string;
        };
        card: {
            bg: string;
            border: string;
            rounded: string;
        };
        item: {
            primary: {
                bg: string;
                border: string;
                hover: {
                    bg: string;
                };
                rounded: string;
            };
            secondary: {
                bg: string;
                border: string;
                hover: {
                    bg: string;
                };
                rounded: string;
            };
            card: {
                bg: string;
                border: string;
                hover: {
                    bg: string;
                };
                rounded: string;
            };
        };
    };
    select: {
        placeholder: string;
        color: string;
        size: {
            small: {
                padding: string;
                text: string;
                maxHeight: string;
            };
            medium: {
                padding: string;
                text: string;
                maxHeight: string;
            };
            large: {
                padding: string;
                text: string;
                maxHeight: string;
            };
        };
    };
    slider: {
        thumb: {
            size: string;
            bg: string;
            hover: {
                bg: string;
            };
        };
        track: {
            size: string;
            bg: string;
            fillBg: string;
        };
        mark: {
            width: string;
            height: string;
        };
    };
};
type ComponentLibraryTheme = typeof base;

declare const tuple: <T extends string[]>(...args: T) => T;
declare const variant: ["primary", "secondary", "tertiary"];
declare const ctaVariant: ["primary", "secondary", "outlined", "text"];
declare const status: ["error", "warning", "success"];
declare const sizes: ["small", "medium", "large"];
declare const colors: ["primary", "secondary", "tertiary", "success", "warning", "error"];
declare const justifyContent: ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
declare const alignItems: ["flex-start", "center", "flex-end", "stretch", "baseline"];
declare const normalAlignments: ["start", "center", "end"];
declare const direction: ["row", "row-reverse", "column", "column-reverse"];
declare const wrap: ["wrap", "nowrap", "wrap-reverse"];
declare const alignSelf: ["auto", "normal", "start", "end", "center", "flex-start", "flex-end", "self-start", "self-end", "stretch"];
type Variants = (typeof variant)[number];
type CTAVariants = (typeof ctaVariant)[number];
type CardVariants = 'default' | 'bordered';
type ListVariants = Exclude<Variants, 'tertiary'> | 'card';
type MeterVariants = Exclude<Variants, 'tertiary'>;
type DividerVariants = Colors | 'default';
type CTASizes = 'x-small' | 'small' | 'medium' | 'large';
type Status = (typeof status)[number];
type Sizes = (typeof sizes)[number];
type Colors = (typeof colors)[number];
type JustifyContent = (typeof justifyContent)[number];
type AlignItems = (typeof alignItems)[number];
type Wrap = (typeof wrap)[number];
type AlignSelf = (typeof alignSelf)[number];
type NormalAlignments = (typeof normalAlignments)[number];
type Direction = (typeof direction)[number];
type FontSize = keyof typeof base.text;
type Spacing = keyof typeof base.spacing;
type Placement = 'top' | 'right' | 'bottom' | 'left';
interface MarginProps {
    margin?: Spacing;
    marginTop?: Spacing;
    marginBottom?: Spacing;
    marginLeft?: Spacing;
    marginRight?: Spacing;
    marginX?: Spacing;
    marginY?: Spacing;
}
type FontWeight = keyof typeof base.fontWeight;
type Orientation = 'horizontal' | 'vertical';
type Overflow = 'auto' | 'hidden' | 'scroll' | 'visible' | 'inherit';
type ProgressBarColors = 'default' | 'red';
type BorderRadius = keyof typeof base.rounded;
type LabelPosition = 'top' | 'side';

declare const resolveColor: (color: Colors | undefined) => string;
declare const resolveHeight: (size: FontSize | undefined) => string | undefined;

export { AlignItems, AlignSelf, BorderRadius, BreakPoints, CTASizes, CTAVariants, CardVariants, Colors, ComponentLibraryTheme, Direction, DividerVariants, FontSize, FontWeight, JustifyContent, LabelPosition, ListVariants, MarginProps, MeterVariants, NormalAlignments, Orientation, Overflow, Placement, ProgressBarColors, ResponsiveProp, Sizes, Spacing, Status, Variants, Wrap, alignItems, alignSelf, breakpoints, colors, ctaVariant, direction, justifyContent, normalAlignments, resolveColor, resolveHeight, sizes, status, base as theme, tuple, variant, wrap };
