styled-elements.js

import styled from 'styled-components';
import { border, color, compose, flexbox, layout, position, shadow, space, typography } from 'styled-system';


export const Div = styled('div')(
	compose(border, space, layout, typography, color, position, shadow, flexbox)
);

export const Flex = styled(Div)`
	display: flex;
`;

export const Button = styled('button')(
    compose(border, space, layout, typography, color, position, flexbox)
);

// and then extend the Button function to create multiple variants