@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
64 lines • 1.71 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pill = exports.PillStyle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@reservoir0x/relay-design-system/css");
exports.PillStyle = (0, css_1.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'
}
});
const Pill = ({ css, ...props }) => {
return ((0, jsx_runtime_1.jsx)("div", { ...props, className: (0, css_1.css)(exports.PillStyle.raw(props), css_1.css.raw(css)) }));
};
exports.Pill = Pill;
exports.default = exports.Pill;
//# sourceMappingURL=Pill.js.map