@reservoir0x/relay-kit-ui/_esm/src/components/primitives/Pill.js

Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.

import { jsx as _jsx } from "react/jsx-runtime";
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
export const PillStyle = cva({
    base: {
        display: 'flex',
        background: 'subtle-background-color',
        px: '3',
        py: '1',
        gap: '1'
    },
    variants: {
        color: {
            red: {
                background: 'red3',
                color: 'red11'
            },
            gray: {
                background: 'gray2',
                color: 'gray8'
            },
            green: {
                background: 'green3',
                color: 'green12'
            },
            amber: {
                background: 'amber2',
                color: 'amber9'
            },
            transparent: {
                background: 'none',
                color: 'gray12'
            }
        },
        radius: {
            pill: {
                borderRadius: 25
            },
            rounded: {
                borderRadius: 12
            },
            squared: {
                borderRadius: 8
            }
        },
        bordered: {
            true: {
                '--borderColor': 'colors.gray.6',
                border: '1px solid var(--borderColor)'
            }
        }
    },
    defaultVariants: {
        radius: 'pill'
    }
});
export const Pill = ({ css, ...props }) => {
    return (_jsx("div", { ...props, className: designCss(PillStyle.raw(props), designCss.raw(css)) }));
};
export default Pill;
//# sourceMappingURL=Pill.js.map