@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
106 lines • 2.75 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@reservoir0x/relay-design-system/css");
const TextCss = (0, css_1.cva)({
base: {
color: 'text-default',
fontFamily: 'body'
},
variants: {
style: {
h2: {
fontWeight: 700,
fontSize: '48px'
},
h3: {
fontWeight: 700,
fontSize: '32px'
},
h4: {
fontWeight: 700,
fontSize: '24px'
},
h5: {
fontWeight: 700,
fontSize: '20px'
},
h6: {
fontWeight: 700,
fontSize: '16px'
},
subtitle1: {
fontWeight: 500,
fontSize: '16px'
},
subtitle2: {
fontWeight: 500,
fontSize: '14px'
},
subtitle3: {
fontWeight: 500,
fontSize: '12px'
},
body1: {
fontWeight: 400,
fontSize: '16px'
},
body2: {
fontWeight: 400,
fontSize: '14px'
},
body3: {
fontWeight: 400,
fontSize: '12px'
},
tiny: {
fontWeight: 500,
fontSize: 10,
color: 'gray11'
}
},
color: {
subtle: {
color: 'text-subtle'
},
subtleSecondary: {
color: 'text-subtle-secondary'
},
error: {
color: 'text-error'
},
red: {
color: 'red11'
},
blue: {
color: 'blue12'
},
success: {
color: 'text-success'
},
warning: {
color: 'amber12'
},
warningSecondary: {
color: 'amber11'
}
},
italic: {
true: {
fontStyle: 'italic'
}
},
ellipsify: {
true: {
textOverflow: 'ellipsis',
overflow: 'hidden',
whiteSpace: 'nowrap'
}
}
}
});
const Text = ({ css, children, ...props }) => {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.css)(TextCss.raw(props), css_1.css.raw(css)), children: children }));
};
exports.default = Text;
//# sourceMappingURL=Text.js.map