import { HTMLAttributes, SVGAttributes } from 'react';
import { ResponsiveStyleValue } from 'theme-ui';
import { FontSize, SxColor } from '../../tokens';
export type BaseProps = {
    /** Whether `display` should be `inline-block` instead of `block`. Defaults to `false`. */
    inline?: ResponsiveStyleValue<boolean>;
    /** Size of the icon. Defaults to `16px`. */
    size?: ResponsiveStyleValue<'4px' | '6px' | '8px' | keyof typeof FontSize | '1em'>;
    /** Color of the icon. Defaults to `currentColor`. */
    color?: ResponsiveStyleValue<SxColor>;
    /** Custom `viewBox` for the inner SVG. Defaults to `0 0 16 16`. */
    viewBox?: SVGAttributes<SVGElement>['viewBox'];
} & Omit<HTMLAttributes<HTMLElement>, 'color'>;
export type BaseIconProps = BaseProps & {
    /** Alternative text that describes the icon to people using screen readers. */
    title?: string;
    /** Direction the icon is pointing in, if it’s an arrow or something like that. */
    direction?: 'right' | 'down' | 'left' | 'up';
};
export type IconProps = Omit<BaseProps, 'viewBox' | 'children'> & {
    /** Alternative text that describes the icon to people using screen readers. */
    title?: string;
};
//# sourceMappingURL=BaseIcon.types.d.ts.map