/** @jsx jsx */
import { BoxProps } from 'theme-ui';
import { FC } from 'react';
export interface ShieldProps {
    /**
     * shield label/text
     */
    label: string;
    /**
     * value displayed with background color
     */
    value?: string | number;
    /**
     * if true, treat the value as a percentage number from 0 to 100
     */
    percent?: boolean;
    /**
     * background color for the value.
     */
    color?: string;
}
/**
 * A container component to display label/value pairs, where the value is colord. Similar design to github shields.
 */
export declare const Shield: FC<ShieldProps & Omit<BoxProps, 'variant'>>;