@reservoir0x/relay-kit-ui
Version:
Relay is the Fastest and Cheapest Way to Bridge and Transact Across Chains.
76 lines • 2.12 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FlexCss = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@reservoir0x/relay-design-system/css");
exports.FlexCss = (0, css_1.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 ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.css)(exports.FlexCss.raw({ align, justify, direction, wrap }), css_1.css.raw(css)), style: style, id: id, ...htmlProps, children: children }));
};
exports.default = Flex;
//# sourceMappingURL=Flex.js.map