import React from 'react';
import AvatarGroup from './avatar-group';
import { CSS } from '../theme/stitches.config';
import { AvatarVariantsProps } from './avatar.styles';
interface Props {
    text?: string;
    src?: string;
    icon?: React.ReactNode;
    alt?: string;
    className?: string;
    as?: keyof JSX.IntrinsicElements;
}
declare type NativeAttrs = Omit<Partial<React.ImgHTMLAttributes<unknown> & React.HTMLAttributes<unknown>>, keyof Props | 'sizes'>;
export declare type AvatarProps = Props & AvatarVariantsProps & NativeAttrs & {
    css?: CSS;
};
export declare const Avatar: React.ForwardRefExoticComponent<Props & import("@stitches/react/types/styled-component").TransformProps<import("@stitches/react/types/styled-component").StyledComponentProps<[{
    dflex: string;
    position: string;
    zIndex: string;
    boxSizing: string;
    overflow: string;
    verticalAlign: string;
    cursor: string;
    transition: string;
    '.tridentui-avatar-bg': {
        position: string;
        top: number;
        left: number;
        right: number;
        bottom: number;
        zIndex: string;
        transition: string;
        size: string;
    };
    '&:hover .tridentui-avatar-bg': {
        boxShadow: string;
    };
    '.tridentui-avatar-img': {
        opacity: number;
        zIndex: string;
        display: string;
        bg: string;
        transition: string;
        width: string;
        height: string;
        objectFit: string;
    };
    '&[data-state="ready"] .tridentui-avatar-img': {
        opacity: number;
    };
    '.tridentui-avatar-icon': {
        display: string;
        position: string;
        left: string;
        top: string;
        ta: string;
        zIndex: string;
        transform: string;
        whiteSpace: string;
        us: string;
    };
    '.tridentui-avatar-text': {
        position: string;
        zIndex: string;
        left: string;
        top: string;
        ta: string;
        color: string;
        fontWeight: string;
        transform: string;
        whiteSpace: string;
        us: string;
    };
    '@motion': {
        transition: string;
        '.tridentui-avatar-bg, .tridentui-avatar-img': {
            transition: string;
        };
    };
    variants: {
        color: {
            default: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
            primary: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
            secondary: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
            success: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
            warning: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
            error: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
            gradient: {
                '.tridentui-avatar-bg': {
                    bg: string;
                };
            };
        };
        textColor: {
            default: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
            white: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
            primary: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
            secondary: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
            success: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
            warning: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
            error: {
                '.tridentui-avatar-text': {
                    color: string;
                };
            };
        };
        size: {
            xs: {
                $$avatarXs: string;
                sizeMin: string;
                '.tridentui-avatar-text': {
                    fontSize: string;
                };
            };
            sm: {
                $$avatarSm: string;
                sizeMin: string;
                '.tridentui-avatar-text': {
                    fontSize: string;
                };
            };
            md: {
                $$avatarMd: string;
                sizeMin: string;
                '.tridentui-avatar-text': {
                    fontSize: string;
                };
            };
            lg: {
                $$avatarLg: string;
                sizeMin: string;
                '.tridentui-avatar-text': {
                    fontSize: string;
                };
            };
            xl: {
                $$avatarXl: string;
                sizeMin: string;
                '.tridentui-avatar-text': {
                    fontSize: string;
                };
            };
        };
        borderWeight: {
            light: {
                '.tridentui-avatar-img': {
                    borderWidth: string;
                };
            };
            normal: {
                '.tridentui-avatar-img': {
                    borderWidth: string;
                };
            };
            bold: {
                '.tridentui-avatar-img': {
                    borderWidth: string;
                };
            };
            extrabold: {
                '.tridentui-avatar-img': {
                    borderWidth: string;
                };
            };
            black: {
                '.tridentui-avatar-img': {
                    borderWidth: string;
                };
            };
        };
        bordered: {
            true: {
                '&:hover:not(.only-text-avatar) .tridentui-avatar-bg': {
                    opacity: string;
                };
                '.tridentui-avatar-img': {
                    borderStyle: string;
                    borderColor: string;
                };
            };
        };
        stacked: {
            true: {
                ml: string;
            };
        };
        pointer: {
            true: {
                cursor: string;
            };
        };
        rounded: {
            true: {
                borderRadius: string;
                '.tridentui-avatar-img': {
                    borderRadius: string;
                };
            };
        };
        squared: {
            true: {
                borderRadius: string;
                '.tridentui-avatar-img': {
                    borderRadius: string;
                };
            };
        };
        zoomed: {
            true: {
                '&:hover .tridentui-avatar-img': {
                    transform: string;
                };
            };
        };
    };
    compoundVariants: ({
        bordered: true;
        borderWeight: string;
        css: {
            padding: string;
            borderRadius?: undefined;
            '.tridentui-avatar-img'?: undefined;
        };
        rounded?: undefined;
        squared?: undefined;
    } | {
        rounded: true;
        squared: true;
        css: {
            borderRadius: string;
            '.tridentui-avatar-img': {
                borderRadius: string;
            };
            padding?: undefined;
        };
        bordered?: undefined;
        borderWeight?: undefined;
    })[];
    defaultVariants: {
        size: "md";
        rounded: true;
        color: "default";
        textColor: "default";
        borderWeight: "normal";
    };
}, import("@stitches/react/types/styled-component").CssComponent<never, {
    isFocusVisible?: boolean | "true" | "false" | undefined;
}, {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xsMax: string;
    smMax: string;
    mdMax: string;
    lgMax: string;
    xlMax: string;
    motion: string;
    safari: string;
    hover: string;
    dark: string;
    light: string;
}, import("@stitches/react/types/css-util").CSS<{
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xsMax: string;
    smMax: string;
    mdMax: string;
    lgMax: string;
    xlMax: string;
    motion: string;
    safari: string;
    hover: string;
    dark: string;
    light: string;
}, {
    shadows: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    dropShadows: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    colors: {
        text: string;
        link: string;
        codeLight: string;
        code: string;
        selection: string;
        gray50: string;
        gray100: string;
        gray200: string;
        gray300: string;
        gray400: string;
        gray500: string;
        gray600: string;
        gray700: string;
        gray800: string;
        gray900: string;
        pink50: string;
        pink100: string;
        pink200: string;
        pink300: string;
        pink400: string;
        pink500: string;
        pink600: string;
        pink700: string;
        pink800: string;
        pink900: string;
        cyan50: string;
        cyan100: string;
        cyan200: string;
        cyan300: string;
        cyan400: string;
        cyan500: string;
        cyan600: string;
        cyan700: string;
        cyan800: string;
        cyan900: string;
        red50: string;
        red100: string;
        red200: string;
        red300: string;
        red400: string;
        red500: string;
        red600: string;
        red700: string;
        red800: string;
        red900: string;
        yellow50: string;
        yellow100: string;
        yellow200: string;
        yellow300: string;
        yellow400: string;
        yellow500: string;
        yellow600: string;
        yellow700: string;
        yellow800: string;
        yellow900: string;
        green50: string;
        green100: string;
        green200: string;
        green300: string;
        green400: string;
        green500: string;
        green600: string;
        green700: string;
        green800: string;
        green900: string;
        purple50: string;
        purple100: string;
        purple200: string;
        purple300: string;
        purple400: string;
        purple500: string;
        purple600: string;
        purple700: string;
        purple800: string;
        purple900: string;
        blue50: string;
        blue100: string;
        blue200: string;
        blue300: string;
        blue400: string;
        blue500: string;
        blue600: string;
        blue700: string;
        blue800: string;
        blue900: string;
        background: string;
        foreground: string;
        backgroundContrast: string;
        white: string;
        black: string;
        primaryLight: string;
        primaryLightHover: string;
        primaryLightActive: string;
        primaryLightContrast: string;
        primary: string;
        primaryBorder: string;
        primaryBorderHover: string;
        primarySolidHover: string;
        primarySolidContrast: string;
        primaryShadow: string;
        secondaryLight: string;
        secondaryLightHover: string;
        secondaryLightActive: string;
        secondaryLightContrast: string;
        secondary: string;
        secondaryBorder: string;
        secondaryBorderHover: string;
        secondarySolidHover: string;
        secondarySolidContrast: string;
        secondaryShadow: string;
        successLight: string;
        successLightHover: string;
        successLightActive: string;
        successLightContrast: string;
        success: string;
        successBorder: string;
        successBorderHover: string;
        successSolidHover: string;
        successSolidContrast: string;
        successShadow: string;
        warningLight: string;
        warningLightHover: string;
        warningLightActive: string;
        warningLightContrast: string;
        warning: string;
        warningBorder: string;
        warningBorderHover: string;
        warningSolidHover: string;
        warningSolidContrast: string;
        warningShadow: string;
        errorLight: string;
        errorLightHover: string;
        errorLightActive: string;
        errorLightContrast: string;
        error: string;
        errorBorder: string;
        errorBorderHover: string;
        errorSolidHover: string;
        errorSolidContrast: string;
        errorShadow: string;
        neutralLight: string;
        neutralLightHover: string;
        neutralLightActive: string;
        neutralLightContrast: string;
        neutral: string;
        neutralBorder: string;
        neutralBorderHover: string;
        neutralSolidHover: string;
        neutralSolidContrast: string;
        neutralShadow: string;
        gradient: string;
        accents0: string;
        accents1: string;
        accents2: string;
        accents3: string;
        accents4: string;
        accents5: string;
        accents6: string;
        accents7: string;
        accents8: string;
        accents9: string;
        border: string;
    };
    fonts: {
        sans: string;
        mono: string;
    };
    fontSizes: {
        xs: string;
        sm: string;
        base: string;
        md: string;
        lg: string;
        xl: string;
        xl2: string;
        xl3: string;
        xl4: string;
        xl5: string;
        xl6: string;
        xl7: string;
        xl8: string;
        xl9: string;
    };
    fontWeights: {
        hairline: number;
        thin: number;
        light: number;
        normal: number;
        medium: number;
        semibold: number;
        bold: number;
        extrabold: number;
        black: number;
    };
    lineHeights: {
        xs: number;
        sm: number;
        base: number;
        md: number;
        lg: number;
        xl: number;
        xl2: number;
        xl3: number;
        xl4: number;
        xl5: number;
        xl6: number;
        xl7: number;
        xl8: number;
        xl9: number;
    };
    letterSpacings: {
        tighter: string;
        tight: string;
        normal: string;
        wide: string;
        wider: string;
        widest: string;
    };
    space: {
        0: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        px: string;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        6: string;
        7: string;
        8: string;
        9: string;
        10: string;
        11: string;
        12: string;
        13: string;
        14: string;
        15: string;
        16: string;
        17: string;
        18: string;
        20: string;
        24: string;
        28: string;
        32: string;
        36: string;
        40: string;
        44: string;
        48: string;
        52: string;
        56: string;
        60: string;
        64: string;
        72: string;
        80: string;
        96: string;
    };
    radii: {
        xs: string;
        sm: string;
        md: string;
        base: string;
        lg: string;
        xl: string;
        squared: string;
        rounded: string;
        pill: string;
    };
    zIndices: {
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        10: string;
        max: string;
    };
    borderWeights: {
        light: string;
        normal: string;
        bold: string;
        extrabold: string;
        black: string;
    };
    transitions: {
        default: string;
        button: string;
        avatar: string;
        link: string;
        card: string;
        dropdownItem: string;
    };
    breakpoints: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
}, {
    width: string;
    height: string;
    minWidth: string;
    maxWidth: string;
    minHeight: string;
    maxHeight: string;
    flexBasis: string;
    gridTemplateColumns: string;
    gridTemplateRows: string;
    blockSize: string;
    minBlockSize: string;
    maxBlockSize: string;
    inlineSize: string;
    minInlineSize: string;
    maxInlineSize: string;
    borderWidth: string;
    gap: "space";
    gridGap: "space";
    columnGap: "space";
    gridColumnGap: "space";
    rowGap: "space";
    gridRowGap: "space";
    inset: "space";
    insetBlock: "space";
    insetBlockEnd: "space";
    insetBlockStart: "space";
    insetInline: "space";
    insetInlineEnd: "space";
    insetInlineStart: "space";
    margin: "space";
    marginTop: "space";
    marginRight: "space";
    marginBottom: "space";
    marginLeft: "space";
    marginBlock: "space";
    marginBlockEnd: "space";
    marginBlockStart: "space";
    marginInline: "space";
    marginInlineEnd: "space";
    marginInlineStart: "space";
    padding: "space";
    paddingTop: "space";
    paddingRight: "space";
    paddingBottom: "space";
    paddingLeft: "space";
    paddingBlock: "space";
    paddingBlockEnd: "space";
    paddingBlockStart: "space";
    paddingInline: "space";
    paddingInlineEnd: "space";
    paddingInlineStart: "space";
    scrollMargin: "space";
    scrollMarginTop: "space";
    scrollMarginRight: "space";
    scrollMarginBottom: "space";
    scrollMarginLeft: "space";
    scrollMarginBlock: "space";
    scrollMarginBlockEnd: "space";
    scrollMarginBlockStart: "space";
    scrollMarginInline: "space";
    scrollMarginInlineEnd: "space";
    scrollMarginInlineStart: "space";
    scrollPadding: "space";
    scrollPaddingTop: "space";
    scrollPaddingRight: "space";
    scrollPaddingBottom: "space";
    scrollPaddingLeft: "space";
    scrollPaddingBlock: "space";
    scrollPaddingBlockEnd: "space";
    scrollPaddingBlockStart: "space";
    scrollPaddingInline: "space";
    scrollPaddingInlineEnd: "space";
    scrollPaddingInlineStart: "space";
    top: "space";
    right: "space";
    bottom: "space";
    left: "space";
    fontSize: "fontSizes";
    background: "colors";
    backgroundColor: "colors";
    backgroundImage: "colors";
    borderImage: "colors";
    border: "colors";
    borderBlock: "colors";
    borderBlockEnd: "colors";
    borderBlockStart: "colors";
    borderBottom: "colors";
    borderBottomColor: "colors";
    borderColor: "colors";
    borderInline: "colors";
    borderInlineEnd: "colors";
    borderInlineStart: "colors";
    borderLeft: "colors";
    borderLeftColor: "colors";
    borderRight: "colors";
    borderRightColor: "colors";
    borderTop: "colors";
    borderTopColor: "colors";
    caretColor: "colors";
    color: "colors";
    columnRuleColor: "colors";
    outline: "colors";
    outlineColor: "colors";
    fill: "colors";
    stroke: "colors";
    textDecorationColor: "colors";
    fontFamily: "fonts";
    fontWeight: "fontWeights";
    lineHeight: "lineHeights";
    letterSpacing: "letterSpacings";
    borderTopWidth: "borderWidths";
    borderLeftWidth: "borderWidths";
    borderRightWidth: "borderWidths";
    borderBottomWidth: "borderWidths";
    borderStyle: "borderStyles";
    borderTopStyle: "borderStyles";
    borderLeftStyle: "borderStyles";
    borderRightStyle: "borderStyles";
    borderBottomStyle: "borderStyles";
    borderRadius: "radii";
    borderTopLeftRadius: "radii";
    borderTopRightRadius: "radii";
    borderBottomRightRadius: "radii";
    borderBottomLeftRadius: "radii";
    boxShadow: "shadows";
    textShadow: "shadows";
    transition: "transitions";
    zIndex: "zIndices";
}, {
    p: (value: {
        readonly [$$PropertyValue]: "padding";
    }) => {
        padding: {
            readonly [$$PropertyValue]: "padding";
        };
    };
    pt: (value: {
        readonly [$$PropertyValue]: "paddingTop";
    }) => {
        paddingTop: {
            readonly [$$PropertyValue]: "paddingTop";
        };
    };
    pr: (value: {
        readonly [$$PropertyValue]: "paddingRight";
    }) => {
        paddingRight: {
            readonly [$$PropertyValue]: "paddingRight";
        };
    };
    pb: (value: {
        readonly [$$PropertyValue]: "paddingBottom";
    }) => {
        paddingBottom: {
            readonly [$$PropertyValue]: "paddingBottom";
        };
    };
    pl: (value: {
        readonly [$$PropertyValue]: "paddingLeft";
    }) => {
        paddingLeft: {
            readonly [$$PropertyValue]: "paddingLeft";
        };
    };
    px: (value: {
        readonly [$$PropertyValue]: "paddingLeft";
    }) => {
        paddingLeft: {
            readonly [$$PropertyValue]: "paddingLeft";
        };
        paddingRight: {
            readonly [$$PropertyValue]: "paddingLeft";
        };
    };
    py: (value: {
        readonly [$$PropertyValue]: "paddingTop";
    }) => {
        paddingTop: {
            readonly [$$PropertyValue]: "paddingTop";
        };
        paddingBottom: {
            readonly [$$PropertyValue]: "paddingTop";
        };
    };
    m: (value: {
        readonly [$$PropertyValue]: "margin";
    }) => {
        margin: {
            readonly [$$PropertyValue]: "margin";
        };
    };
    mt: (value: {
        readonly [$$PropertyValue]: "marginTop";
    }) => {
        marginTop: {
            readonly [$$PropertyValue]: "marginTop";
        };
    };
    mr: (value: {
        readonly [$$PropertyValue]: "marginRight";
    }) => {
        marginRight: {
            readonly [$$PropertyValue]: "marginRight";
        };
    };
    mb: (value: {
        readonly [$$PropertyValue]: "marginBottom";
    }) => {
        marginBottom: {
            readonly [$$PropertyValue]: "marginBottom";
        };
    };
    ml: (value: {
        readonly [$$PropertyValue]: "marginLeft";
    }) => {
        marginLeft: {
            readonly [$$PropertyValue]: "marginLeft";
        };
    };
    mx: (value: {
        readonly [$$PropertyValue]: "marginLeft";
    }) => {
        marginLeft: {
            readonly [$$PropertyValue]: "marginLeft";
        };
        marginRight: {
            readonly [$$PropertyValue]: "marginLeft";
        };
    };
    my: (value: {
        readonly [$$PropertyValue]: "marginTop";
    }) => {
        marginTop: {
            readonly [$$PropertyValue]: "marginTop";
        };
        marginBottom: {
            readonly [$$PropertyValue]: "marginTop";
        };
    };
    ta: (value: {
        readonly [$$PropertyValue]: "textAlign";
    }) => {
        textAlign: {
            readonly [$$PropertyValue]: "textAlign";
        };
    };
    tt: (value: {
        readonly [$$PropertyValue]: "textTransform";
    }) => {
        textTransform: {
            readonly [$$PropertyValue]: "textTransform";
        };
    };
    to: (value: {
        readonly [$$PropertyValue]: "textOverflow";
    }) => {
        textOverflow: {
            readonly [$$PropertyValue]: "textOverflow";
        };
    };
    d: (value: {
        readonly [$$PropertyValue]: "display";
    }) => {
        display: {
            readonly [$$PropertyValue]: "display";
        };
    };
    dflex: (value: {
        readonly [$$PropertyValue]: "alignItems";
    }) => {
        display: string;
        alignItems: {
            readonly [$$PropertyValue]: "alignItems";
        };
        justifyContent: {
            readonly [$$PropertyValue]: "alignItems";
        };
    };
    fd: (value: {
        readonly [$$PropertyValue]: "flexDirection";
    }) => {
        flexDirection: {
            readonly [$$PropertyValue]: "flexDirection";
        };
    };
    fw: (value: {
        readonly [$$PropertyValue]: "flexWrap";
    }) => {
        flexWrap: {
            readonly [$$PropertyValue]: "flexWrap";
        };
    };
    ai: (value: {
        readonly [$$PropertyValue]: "alignItems";
    }) => {
        alignItems: {
            readonly [$$PropertyValue]: "alignItems";
        };
    };
    ac: (value: {
        readonly [$$PropertyValue]: "alignContent";
    }) => {
        alignContent: {
            readonly [$$PropertyValue]: "alignContent";
        };
    };
    jc: (value: {
        readonly [$$PropertyValue]: "justifyContent";
    }) => {
        justifyContent: {
            readonly [$$PropertyValue]: "justifyContent";
        };
    };
    as: (value: {
        readonly [$$PropertyValue]: "alignSelf";
    }) => {
        alignSelf: {
            readonly [$$PropertyValue]: "alignSelf";
        };
    };
    fg: (value: {
        readonly [$$PropertyValue]: "flexGrow";
    }) => {
        flexGrow: {
            readonly [$$PropertyValue]: "flexGrow";
        };
    };
    fs: (value: {
        readonly [$$PropertyValue]: "fontSize";
    }) => {
        fontSize: {
            readonly [$$PropertyValue]: "fontSize";
        };
    };
    fb: (value: {
        readonly [$$PropertyValue]: "flexBasis";
    }) => {
        flexBasis: {
            readonly [$$PropertyValue]: "flexBasis";
        };
    };
    bc: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        backgroundColor: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    bf: (value: {
        readonly [$$PropertyValue]: "backdropFilter";
    }) => {
        backdropFilter: {
            readonly [$$PropertyValue]: "backdropFilter";
        };
    };
    bg: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        background: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    bgBlur: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        bf: string;
        bg: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    bgColor: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        backgroundColor: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    backgroundClip: (value: {
        readonly [$$PropertyValue]: "backgroundClip";
    }) => {
        WebkitBackgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
        backgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
    };
    bgClip: (value: {
        readonly [$$PropertyValue]: "backgroundClip";
    }) => {
        WebkitBackgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
        backgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
    };
    br: (value: {
        readonly [$$PropertyValue]: "borderRadius";
    }) => {
        borderRadius: {
            readonly [$$PropertyValue]: "borderRadius";
        };
    };
    bw: (value: {
        readonly [$$PropertyValue]: "borderWidth";
    }) => {
        borderWidth: {
            readonly [$$PropertyValue]: "borderWidth";
        };
    };
    btrr: (value: {
        readonly [$$PropertyValue]: "borderTopRightRadius";
    }) => {
        borderTopRightRadius: {
            readonly [$$PropertyValue]: "borderTopRightRadius";
        };
    };
    bbrr: (value: {
        readonly [$$PropertyValue]: "borderBottomRightRadius";
    }) => {
        borderBottomRightRadius: {
            readonly [$$PropertyValue]: "borderBottomRightRadius";
        };
    };
    bblr: (value: {
        readonly [$$PropertyValue]: "borderBottomLeftRadius";
    }) => {
        borderBottomLeftRadius: {
            readonly [$$PropertyValue]: "borderBottomLeftRadius";
        };
    };
    btlr: (value: {
        readonly [$$PropertyValue]: "borderTopLeftRadius";
    }) => {
        borderTopLeftRadius: {
            readonly [$$PropertyValue]: "borderTopLeftRadius";
        };
    };
    bs: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        boxShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    ds: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        dropShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    shadow: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        boxShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    dshadow: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        dropShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    dropShadow: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        filter: string;
    };
    normalShadow: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        boxShadow: string;
    };
    normalShadowVar: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        boxShadow: string;
    };
    lh: (value: {
        readonly [$$PropertyValue]: "lineHeight";
    }) => {
        lineHeight: {
            readonly [$$PropertyValue]: "lineHeight";
        };
    };
    ov: (value: {
        readonly [$$PropertyValue]: "overflow";
    }) => {
        overflow: {
            readonly [$$PropertyValue]: "overflow";
        };
    };
    ox: (value: {
        readonly [$$PropertyValue]: "overflowX";
    }) => {
        overflowX: {
            readonly [$$PropertyValue]: "overflowX";
        };
    };
    oy: (value: {
        readonly [$$PropertyValue]: "overflowY";
    }) => {
        overflowY: {
            readonly [$$PropertyValue]: "overflowY";
        };
    };
    pe: (value: {
        readonly [$$PropertyValue]: "pointerEvents";
    }) => {
        pointerEvents: {
            readonly [$$PropertyValue]: "pointerEvents";
        };
    };
    events: (value: {
        readonly [$$PropertyValue]: "pointerEvents";
    }) => {
        pointerEvents: {
            readonly [$$PropertyValue]: "pointerEvents";
        };
    };
    us: (value: {
        readonly [$$PropertyValue]: "userSelect";
    }) => {
        WebkitUserSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
        userSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
    };
    userSelect: (value: {
        readonly [$$PropertyValue]: "userSelect";
    }) => {
        WebkitUserSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
        userSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
    };
    w: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        width: {
            readonly [$$PropertyValue]: "width";
        };
    };
    h: (value: {
        readonly [$$PropertyValue]: "height";
    }) => {
        height: {
            readonly [$$PropertyValue]: "height";
        };
    };
    mw: (value: {
        readonly [$$PropertyValue]: "maxWidth";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "maxWidth";
        };
    };
    maxW: (value: {
        readonly [$$PropertyValue]: "maxWidth";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "maxWidth";
        };
    };
    mh: (value: {
        readonly [$$PropertyValue]: "maxHeight";
    }) => {
        maxHeight: {
            readonly [$$PropertyValue]: "maxHeight";
        };
    };
    maxH: (value: {
        readonly [$$PropertyValue]: "maxHeight";
    }) => {
        maxHeight: {
            readonly [$$PropertyValue]: "maxHeight";
        };
    };
    size: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        width: {
            readonly [$$PropertyValue]: "width";
        };
        height: {
            readonly [$$PropertyValue]: "width";
        };
    };
    minSize: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        minWidth: {
            readonly [$$PropertyValue]: "width";
        };
        minHeight: {
            readonly [$$PropertyValue]: "width";
        };
        width: {
            readonly [$$PropertyValue]: "width";
        };
        height: {
            readonly [$$PropertyValue]: "width";
        };
    };
    sizeMin: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        minWidth: {
            readonly [$$PropertyValue]: "width";
        };
        minHeight: {
            readonly [$$PropertyValue]: "width";
        };
        width: {
            readonly [$$PropertyValue]: "width";
        };
        height: {
            readonly [$$PropertyValue]: "width";
        };
    };
    maxSize: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "width";
        };
        maxHeight: {
            readonly [$$PropertyValue]: "width";
        };
    };
    sizeMax: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "width";
        };
        maxHeight: {
            readonly [$$PropertyValue]: "width";
        };
    };
    appearance: (value: {
        readonly [$$PropertyValue]: "appearance";
    }) => {
        WebkitAppearance: {
            readonly [$$PropertyValue]: "appearance";
        };
        appearance: {
            readonly [$$PropertyValue]: "appearance";
        };
    };
    scale: (value: {
        readonly [$$PropertyValue]: "scale";
    }) => {
        transform: string;
    };
    linearGradient: (value: {
        readonly [$$PropertyValue]: "backgroundImage";
    }) => {
        backgroundImage: string;
    };
    tdl: (value: {
        readonly [$$PropertyValue]: "textDecorationLine";
    }) => {
        textDecorationLine: {
            readonly [$$PropertyValue]: "textDecorationLine";
        };
    };
    truncateText: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "width";
        };
        whiteSpace: string;
        overflow: string;
        textOverflow: string;
    };
    textGradient: (value: {
        readonly [$$PropertyValue]: "backgroundImage";
    }) => {
        backgroundImage: string;
        WebkitBackgroundClip: string;
        WebkitTextFillColor: string;
        '&::selection': {
            WebkitTextFillColor: string;
        };
    };
}>>, import("@stitches/react/types/styled-component").CssComponent<never, {}, {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xsMax: string;
    smMax: string;
    mdMax: string;
    lgMax: string;
    xlMax: string;
    motion: string;
    safari: string;
    hover: string;
    dark: string;
    light: string;
}, import("@stitches/react/types/css-util").CSS<{
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xsMax: string;
    smMax: string;
    mdMax: string;
    lgMax: string;
    xlMax: string;
    motion: string;
    safari: string;
    hover: string;
    dark: string;
    light: string;
}, {
    shadows: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    dropShadows: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
    colors: {
        text: string;
        link: string;
        codeLight: string;
        code: string;
        selection: string;
        gray50: string;
        gray100: string;
        gray200: string;
        gray300: string;
        gray400: string;
        gray500: string;
        gray600: string;
        gray700: string;
        gray800: string;
        gray900: string;
        pink50: string;
        pink100: string;
        pink200: string;
        pink300: string;
        pink400: string;
        pink500: string;
        pink600: string;
        pink700: string;
        pink800: string;
        pink900: string;
        cyan50: string;
        cyan100: string;
        cyan200: string;
        cyan300: string;
        cyan400: string;
        cyan500: string;
        cyan600: string;
        cyan700: string;
        cyan800: string;
        cyan900: string;
        red50: string;
        red100: string;
        red200: string;
        red300: string;
        red400: string;
        red500: string;
        red600: string;
        red700: string;
        red800: string;
        red900: string;
        yellow50: string;
        yellow100: string;
        yellow200: string;
        yellow300: string;
        yellow400: string;
        yellow500: string;
        yellow600: string;
        yellow700: string;
        yellow800: string;
        yellow900: string;
        green50: string;
        green100: string;
        green200: string;
        green300: string;
        green400: string;
        green500: string;
        green600: string;
        green700: string;
        green800: string;
        green900: string;
        purple50: string;
        purple100: string;
        purple200: string;
        purple300: string;
        purple400: string;
        purple500: string;
        purple600: string;
        purple700: string;
        purple800: string;
        purple900: string;
        blue50: string;
        blue100: string;
        blue200: string;
        blue300: string;
        blue400: string;
        blue500: string;
        blue600: string;
        blue700: string;
        blue800: string;
        blue900: string;
        background: string;
        foreground: string;
        backgroundContrast: string;
        white: string;
        black: string;
        primaryLight: string;
        primaryLightHover: string;
        primaryLightActive: string;
        primaryLightContrast: string;
        primary: string;
        primaryBorder: string;
        primaryBorderHover: string;
        primarySolidHover: string;
        primarySolidContrast: string;
        primaryShadow: string;
        secondaryLight: string;
        secondaryLightHover: string;
        secondaryLightActive: string;
        secondaryLightContrast: string;
        secondary: string;
        secondaryBorder: string;
        secondaryBorderHover: string;
        secondarySolidHover: string;
        secondarySolidContrast: string;
        secondaryShadow: string;
        successLight: string;
        successLightHover: string;
        successLightActive: string;
        successLightContrast: string;
        success: string;
        successBorder: string;
        successBorderHover: string;
        successSolidHover: string;
        successSolidContrast: string;
        successShadow: string;
        warningLight: string;
        warningLightHover: string;
        warningLightActive: string;
        warningLightContrast: string;
        warning: string;
        warningBorder: string;
        warningBorderHover: string;
        warningSolidHover: string;
        warningSolidContrast: string;
        warningShadow: string;
        errorLight: string;
        errorLightHover: string;
        errorLightActive: string;
        errorLightContrast: string;
        error: string;
        errorBorder: string;
        errorBorderHover: string;
        errorSolidHover: string;
        errorSolidContrast: string;
        errorShadow: string;
        neutralLight: string;
        neutralLightHover: string;
        neutralLightActive: string;
        neutralLightContrast: string;
        neutral: string;
        neutralBorder: string;
        neutralBorderHover: string;
        neutralSolidHover: string;
        neutralSolidContrast: string;
        neutralShadow: string;
        gradient: string;
        accents0: string;
        accents1: string;
        accents2: string;
        accents3: string;
        accents4: string;
        accents5: string;
        accents6: string;
        accents7: string;
        accents8: string;
        accents9: string;
        border: string;
    };
    fonts: {
        sans: string;
        mono: string;
    };
    fontSizes: {
        xs: string;
        sm: string;
        base: string;
        md: string;
        lg: string;
        xl: string;
        xl2: string;
        xl3: string;
        xl4: string;
        xl5: string;
        xl6: string;
        xl7: string;
        xl8: string;
        xl9: string;
    };
    fontWeights: {
        hairline: number;
        thin: number;
        light: number;
        normal: number;
        medium: number;
        semibold: number;
        bold: number;
        extrabold: number;
        black: number;
    };
    lineHeights: {
        xs: number;
        sm: number;
        base: number;
        md: number;
        lg: number;
        xl: number;
        xl2: number;
        xl3: number;
        xl4: number;
        xl5: number;
        xl6: number;
        xl7: number;
        xl8: number;
        xl9: number;
    };
    letterSpacings: {
        tighter: string;
        tight: string;
        normal: string;
        wide: string;
        wider: string;
        widest: string;
    };
    space: {
        0: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        px: string;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        6: string;
        7: string;
        8: string;
        9: string;
        10: string;
        11: string;
        12: string;
        13: string;
        14: string;
        15: string;
        16: string;
        17: string;
        18: string;
        20: string;
        24: string;
        28: string;
        32: string;
        36: string;
        40: string;
        44: string;
        48: string;
        52: string;
        56: string;
        60: string;
        64: string;
        72: string;
        80: string;
        96: string;
    };
    radii: {
        xs: string;
        sm: string;
        md: string;
        base: string;
        lg: string;
        xl: string;
        squared: string;
        rounded: string;
        pill: string;
    };
    zIndices: {
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
        10: string;
        max: string;
    };
    borderWeights: {
        light: string;
        normal: string;
        bold: string;
        extrabold: string;
        black: string;
    };
    transitions: {
        default: string;
        button: string;
        avatar: string;
        link: string;
        card: string;
        dropdownItem: string;
    };
    breakpoints: {
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
    };
}, {
    width: string;
    height: string;
    minWidth: string;
    maxWidth: string;
    minHeight: string;
    maxHeight: string;
    flexBasis: string;
    gridTemplateColumns: string;
    gridTemplateRows: string;
    blockSize: string;
    minBlockSize: string;
    maxBlockSize: string;
    inlineSize: string;
    minInlineSize: string;
    maxInlineSize: string;
    borderWidth: string;
    gap: "space";
    gridGap: "space";
    columnGap: "space";
    gridColumnGap: "space";
    rowGap: "space";
    gridRowGap: "space";
    inset: "space";
    insetBlock: "space";
    insetBlockEnd: "space";
    insetBlockStart: "space";
    insetInline: "space";
    insetInlineEnd: "space";
    insetInlineStart: "space";
    margin: "space";
    marginTop: "space";
    marginRight: "space";
    marginBottom: "space";
    marginLeft: "space";
    marginBlock: "space";
    marginBlockEnd: "space";
    marginBlockStart: "space";
    marginInline: "space";
    marginInlineEnd: "space";
    marginInlineStart: "space";
    padding: "space";
    paddingTop: "space";
    paddingRight: "space";
    paddingBottom: "space";
    paddingLeft: "space";
    paddingBlock: "space";
    paddingBlockEnd: "space";
    paddingBlockStart: "space";
    paddingInline: "space";
    paddingInlineEnd: "space";
    paddingInlineStart: "space";
    scrollMargin: "space";
    scrollMarginTop: "space";
    scrollMarginRight: "space";
    scrollMarginBottom: "space";
    scrollMarginLeft: "space";
    scrollMarginBlock: "space";
    scrollMarginBlockEnd: "space";
    scrollMarginBlockStart: "space";
    scrollMarginInline: "space";
    scrollMarginInlineEnd: "space";
    scrollMarginInlineStart: "space";
    scrollPadding: "space";
    scrollPaddingTop: "space";
    scrollPaddingRight: "space";
    scrollPaddingBottom: "space";
    scrollPaddingLeft: "space";
    scrollPaddingBlock: "space";
    scrollPaddingBlockEnd: "space";
    scrollPaddingBlockStart: "space";
    scrollPaddingInline: "space";
    scrollPaddingInlineEnd: "space";
    scrollPaddingInlineStart: "space";
    top: "space";
    right: "space";
    bottom: "space";
    left: "space";
    fontSize: "fontSizes";
    background: "colors";
    backgroundColor: "colors";
    backgroundImage: "colors";
    borderImage: "colors";
    border: "colors";
    borderBlock: "colors";
    borderBlockEnd: "colors";
    borderBlockStart: "colors";
    borderBottom: "colors";
    borderBottomColor: "colors";
    borderColor: "colors";
    borderInline: "colors";
    borderInlineEnd: "colors";
    borderInlineStart: "colors";
    borderLeft: "colors";
    borderLeftColor: "colors";
    borderRight: "colors";
    borderRightColor: "colors";
    borderTop: "colors";
    borderTopColor: "colors";
    caretColor: "colors";
    color: "colors";
    columnRuleColor: "colors";
    outline: "colors";
    outlineColor: "colors";
    fill: "colors";
    stroke: "colors";
    textDecorationColor: "colors";
    fontFamily: "fonts";
    fontWeight: "fontWeights";
    lineHeight: "lineHeights";
    letterSpacing: "letterSpacings";
    borderTopWidth: "borderWidths";
    borderLeftWidth: "borderWidths";
    borderRightWidth: "borderWidths";
    borderBottomWidth: "borderWidths";
    borderStyle: "borderStyles";
    borderTopStyle: "borderStyles";
    borderLeftStyle: "borderStyles";
    borderRightStyle: "borderStyles";
    borderBottomStyle: "borderStyles";
    borderRadius: "radii";
    borderTopLeftRadius: "radii";
    borderTopRightRadius: "radii";
    borderBottomRightRadius: "radii";
    borderBottomLeftRadius: "radii";
    boxShadow: "shadows";
    textShadow: "shadows";
    transition: "transitions";
    zIndex: "zIndices";
}, {
    p: (value: {
        readonly [$$PropertyValue]: "padding";
    }) => {
        padding: {
            readonly [$$PropertyValue]: "padding";
        };
    };
    pt: (value: {
        readonly [$$PropertyValue]: "paddingTop";
    }) => {
        paddingTop: {
            readonly [$$PropertyValue]: "paddingTop";
        };
    };
    pr: (value: {
        readonly [$$PropertyValue]: "paddingRight";
    }) => {
        paddingRight: {
            readonly [$$PropertyValue]: "paddingRight";
        };
    };
    pb: (value: {
        readonly [$$PropertyValue]: "paddingBottom";
    }) => {
        paddingBottom: {
            readonly [$$PropertyValue]: "paddingBottom";
        };
    };
    pl: (value: {
        readonly [$$PropertyValue]: "paddingLeft";
    }) => {
        paddingLeft: {
            readonly [$$PropertyValue]: "paddingLeft";
        };
    };
    px: (value: {
        readonly [$$PropertyValue]: "paddingLeft";
    }) => {
        paddingLeft: {
            readonly [$$PropertyValue]: "paddingLeft";
        };
        paddingRight: {
            readonly [$$PropertyValue]: "paddingLeft";
        };
    };
    py: (value: {
        readonly [$$PropertyValue]: "paddingTop";
    }) => {
        paddingTop: {
            readonly [$$PropertyValue]: "paddingTop";
        };
        paddingBottom: {
            readonly [$$PropertyValue]: "paddingTop";
        };
    };
    m: (value: {
        readonly [$$PropertyValue]: "margin";
    }) => {
        margin: {
            readonly [$$PropertyValue]: "margin";
        };
    };
    mt: (value: {
        readonly [$$PropertyValue]: "marginTop";
    }) => {
        marginTop: {
            readonly [$$PropertyValue]: "marginTop";
        };
    };
    mr: (value: {
        readonly [$$PropertyValue]: "marginRight";
    }) => {
        marginRight: {
            readonly [$$PropertyValue]: "marginRight";
        };
    };
    mb: (value: {
        readonly [$$PropertyValue]: "marginBottom";
    }) => {
        marginBottom: {
            readonly [$$PropertyValue]: "marginBottom";
        };
    };
    ml: (value: {
        readonly [$$PropertyValue]: "marginLeft";
    }) => {
        marginLeft: {
            readonly [$$PropertyValue]: "marginLeft";
        };
    };
    mx: (value: {
        readonly [$$PropertyValue]: "marginLeft";
    }) => {
        marginLeft: {
            readonly [$$PropertyValue]: "marginLeft";
        };
        marginRight: {
            readonly [$$PropertyValue]: "marginLeft";
        };
    };
    my: (value: {
        readonly [$$PropertyValue]: "marginTop";
    }) => {
        marginTop: {
            readonly [$$PropertyValue]: "marginTop";
        };
        marginBottom: {
            readonly [$$PropertyValue]: "marginTop";
        };
    };
    ta: (value: {
        readonly [$$PropertyValue]: "textAlign";
    }) => {
        textAlign: {
            readonly [$$PropertyValue]: "textAlign";
        };
    };
    tt: (value: {
        readonly [$$PropertyValue]: "textTransform";
    }) => {
        textTransform: {
            readonly [$$PropertyValue]: "textTransform";
        };
    };
    to: (value: {
        readonly [$$PropertyValue]: "textOverflow";
    }) => {
        textOverflow: {
            readonly [$$PropertyValue]: "textOverflow";
        };
    };
    d: (value: {
        readonly [$$PropertyValue]: "display";
    }) => {
        display: {
            readonly [$$PropertyValue]: "display";
        };
    };
    dflex: (value: {
        readonly [$$PropertyValue]: "alignItems";
    }) => {
        display: string;
        alignItems: {
            readonly [$$PropertyValue]: "alignItems";
        };
        justifyContent: {
            readonly [$$PropertyValue]: "alignItems";
        };
    };
    fd: (value: {
        readonly [$$PropertyValue]: "flexDirection";
    }) => {
        flexDirection: {
            readonly [$$PropertyValue]: "flexDirection";
        };
    };
    fw: (value: {
        readonly [$$PropertyValue]: "flexWrap";
    }) => {
        flexWrap: {
            readonly [$$PropertyValue]: "flexWrap";
        };
    };
    ai: (value: {
        readonly [$$PropertyValue]: "alignItems";
    }) => {
        alignItems: {
            readonly [$$PropertyValue]: "alignItems";
        };
    };
    ac: (value: {
        readonly [$$PropertyValue]: "alignContent";
    }) => {
        alignContent: {
            readonly [$$PropertyValue]: "alignContent";
        };
    };
    jc: (value: {
        readonly [$$PropertyValue]: "justifyContent";
    }) => {
        justifyContent: {
            readonly [$$PropertyValue]: "justifyContent";
        };
    };
    as: (value: {
        readonly [$$PropertyValue]: "alignSelf";
    }) => {
        alignSelf: {
            readonly [$$PropertyValue]: "alignSelf";
        };
    };
    fg: (value: {
        readonly [$$PropertyValue]: "flexGrow";
    }) => {
        flexGrow: {
            readonly [$$PropertyValue]: "flexGrow";
        };
    };
    fs: (value: {
        readonly [$$PropertyValue]: "fontSize";
    }) => {
        fontSize: {
            readonly [$$PropertyValue]: "fontSize";
        };
    };
    fb: (value: {
        readonly [$$PropertyValue]: "flexBasis";
    }) => {
        flexBasis: {
            readonly [$$PropertyValue]: "flexBasis";
        };
    };
    bc: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        backgroundColor: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    bf: (value: {
        readonly [$$PropertyValue]: "backdropFilter";
    }) => {
        backdropFilter: {
            readonly [$$PropertyValue]: "backdropFilter";
        };
    };
    bg: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        background: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    bgBlur: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        bf: string;
        bg: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    bgColor: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        backgroundColor: {
            readonly [$$PropertyValue]: "backgroundColor";
        };
    };
    backgroundClip: (value: {
        readonly [$$PropertyValue]: "backgroundClip";
    }) => {
        WebkitBackgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
        backgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
    };
    bgClip: (value: {
        readonly [$$PropertyValue]: "backgroundClip";
    }) => {
        WebkitBackgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
        backgroundClip: {
            readonly [$$PropertyValue]: "backgroundClip";
        };
    };
    br: (value: {
        readonly [$$PropertyValue]: "borderRadius";
    }) => {
        borderRadius: {
            readonly [$$PropertyValue]: "borderRadius";
        };
    };
    bw: (value: {
        readonly [$$PropertyValue]: "borderWidth";
    }) => {
        borderWidth: {
            readonly [$$PropertyValue]: "borderWidth";
        };
    };
    btrr: (value: {
        readonly [$$PropertyValue]: "borderTopRightRadius";
    }) => {
        borderTopRightRadius: {
            readonly [$$PropertyValue]: "borderTopRightRadius";
        };
    };
    bbrr: (value: {
        readonly [$$PropertyValue]: "borderBottomRightRadius";
    }) => {
        borderBottomRightRadius: {
            readonly [$$PropertyValue]: "borderBottomRightRadius";
        };
    };
    bblr: (value: {
        readonly [$$PropertyValue]: "borderBottomLeftRadius";
    }) => {
        borderBottomLeftRadius: {
            readonly [$$PropertyValue]: "borderBottomLeftRadius";
        };
    };
    btlr: (value: {
        readonly [$$PropertyValue]: "borderTopLeftRadius";
    }) => {
        borderTopLeftRadius: {
            readonly [$$PropertyValue]: "borderTopLeftRadius";
        };
    };
    bs: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        boxShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    ds: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        dropShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    shadow: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        boxShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    dshadow: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        dropShadow: {
            readonly [$$PropertyValue]: "boxShadow";
        };
    };
    dropShadow: (value: {
        readonly [$$PropertyValue]: "boxShadow";
    }) => {
        filter: string;
    };
    normalShadow: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        boxShadow: string;
    };
    normalShadowVar: (value: {
        readonly [$$PropertyValue]: "backgroundColor";
    }) => {
        boxShadow: string;
    };
    lh: (value: {
        readonly [$$PropertyValue]: "lineHeight";
    }) => {
        lineHeight: {
            readonly [$$PropertyValue]: "lineHeight";
        };
    };
    ov: (value: {
        readonly [$$PropertyValue]: "overflow";
    }) => {
        overflow: {
            readonly [$$PropertyValue]: "overflow";
        };
    };
    ox: (value: {
        readonly [$$PropertyValue]: "overflowX";
    }) => {
        overflowX: {
            readonly [$$PropertyValue]: "overflowX";
        };
    };
    oy: (value: {
        readonly [$$PropertyValue]: "overflowY";
    }) => {
        overflowY: {
            readonly [$$PropertyValue]: "overflowY";
        };
    };
    pe: (value: {
        readonly [$$PropertyValue]: "pointerEvents";
    }) => {
        pointerEvents: {
            readonly [$$PropertyValue]: "pointerEvents";
        };
    };
    events: (value: {
        readonly [$$PropertyValue]: "pointerEvents";
    }) => {
        pointerEvents: {
            readonly [$$PropertyValue]: "pointerEvents";
        };
    };
    us: (value: {
        readonly [$$PropertyValue]: "userSelect";
    }) => {
        WebkitUserSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
        userSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
    };
    userSelect: (value: {
        readonly [$$PropertyValue]: "userSelect";
    }) => {
        WebkitUserSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
        userSelect: {
            readonly [$$PropertyValue]: "userSelect";
        };
    };
    w: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        width: {
            readonly [$$PropertyValue]: "width";
        };
    };
    h: (value: {
        readonly [$$PropertyValue]: "height";
    }) => {
        height: {
            readonly [$$PropertyValue]: "height";
        };
    };
    mw: (value: {
        readonly [$$PropertyValue]: "maxWidth";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "maxWidth";
        };
    };
    maxW: (value: {
        readonly [$$PropertyValue]: "maxWidth";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "maxWidth";
        };
    };
    mh: (value: {
        readonly [$$PropertyValue]: "maxHeight";
    }) => {
        maxHeight: {
            readonly [$$PropertyValue]: "maxHeight";
        };
    };
    maxH: (value: {
        readonly [$$PropertyValue]: "maxHeight";
    }) => {
        maxHeight: {
            readonly [$$PropertyValue]: "maxHeight";
        };
    };
    size: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        width: {
            readonly [$$PropertyValue]: "width";
        };
        height: {
            readonly [$$PropertyValue]: "width";
        };
    };
    minSize: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        minWidth: {
            readonly [$$PropertyValue]: "width";
        };
        minHeight: {
            readonly [$$PropertyValue]: "width";
        };
        width: {
            readonly [$$PropertyValue]: "width";
        };
        height: {
            readonly [$$PropertyValue]: "width";
        };
    };
    sizeMin: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        minWidth: {
            readonly [$$PropertyValue]: "width";
        };
        minHeight: {
            readonly [$$PropertyValue]: "width";
        };
        width: {
            readonly [$$PropertyValue]: "width";
        };
        height: {
            readonly [$$PropertyValue]: "width";
        };
    };
    maxSize: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "width";
        };
        maxHeight: {
            readonly [$$PropertyValue]: "width";
        };
    };
    sizeMax: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "width";
        };
        maxHeight: {
            readonly [$$PropertyValue]: "width";
        };
    };
    appearance: (value: {
        readonly [$$PropertyValue]: "appearance";
    }) => {
        WebkitAppearance: {
            readonly [$$PropertyValue]: "appearance";
        };
        appearance: {
            readonly [$$PropertyValue]: "appearance";
        };
    };
    scale: (value: {
        readonly [$$PropertyValue]: "scale";
    }) => {
        transform: string;
    };
    linearGradient: (value: {
        readonly [$$PropertyValue]: "backgroundImage";
    }) => {
        backgroundImage: string;
    };
    tdl: (value: {
        readonly [$$PropertyValue]: "textDecorationLine";
    }) => {
        textDecorationLine: {
            readonly [$$PropertyValue]: "textDecorationLine";
        };
    };
    truncateText: (value: {
        readonly [$$PropertyValue]: "width";
    }) => {
        maxWidth: {
            readonly [$$PropertyValue]: "width";
        };
        whiteSpace: string;
        overflow: string;
        textOverflow: string;
    };
    textGradient: (value: {
        readonly [$$PropertyValue]: "backgroundImage";
    }) => {
        backgroundImage: string;
        WebkitBackgroundClip: string;
        WebkitTextFillColor: string;
        '&::selection': {
            WebkitTextFillColor: string;
        };
    };
}>>]>, {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
    xsMax: string;
    smMax: string;
    mdMax: string;
    lgMax: string;
    xlMax: string;
    motion: string;
    safari: string;
    hover: string;
    dark: string;
    light: string;
}> & NativeAttrs & {
    css?: CSS | undefined;
} & React.RefAttributes<HTMLSpanElement>>;
declare type AvatarComponent<P = {}> = React.NamedExoticComponent<P> & {
    Group: typeof AvatarGroup;
};
declare const _default: AvatarComponent<AvatarProps>;
export default _default;