@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
73 lines • 1.99 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { cva, css as designCss } from '@reservoir0x/relay-design-system/css';
export const FlexCss = cva({
base: {
display: 'flex'
},
variants: {
align: {
start: {
alignItems: 'flex-start'
},
center: {
alignItems: 'center'
},
end: {
alignItems: 'flex-end'
},
stretch: {
alignItems: 'stretch'
},
baseline: {
alignItems: 'baseline'
},
normal: {
alignItems: 'normal'
}
},
justify: {
start: {
justifyContent: 'flex-start'
},
center: {
justifyContent: 'center'
},
end: {
justifyContent: 'flex-end'
},
between: {
justifyContent: 'space-between'
}
},
direction: {
row: {
flexDirection: 'row'
},
column: {
flexDirection: 'column'
},
rowReverse: {
flexDirection: 'row-reverse'
},
columnReverse: {
flexDirection: 'column-reverse'
}
},
wrap: {
noWrap: {
flexWrap: 'nowrap'
},
wrap: {
flexWrap: 'wrap'
},
wrapReverse: {
flexWrap: 'wrap-reverse'
}
}
}
});
const Flex = ({ css, style, children, id, align, justify, direction, wrap, ...htmlProps }) => {
return (_jsx("div", { className: designCss(FlexCss.raw({ align, justify, direction, wrap }), designCss.raw(css)), style: style, id: id, ...htmlProps, children: children }));
};
export default Flex;
//# sourceMappingURL=Flex.js.map