import styled , { css } from "styled-components/macro" ; export type IGaps = "none" | "small" | "medium" | "large" | "xlarge" | "huge" ; interface FlexProps { direction ? : React . CSSProperties [ "flexDirection" ] ; justify ? : React . CSSProperties [ "justifyContent" ] ; align ? : React . CSSProperties [ "alignItems" ] ; nowrap ? : boolean ; gap ? : IGaps ; } export const Flex = styled . div < FlexProps > ( ( { gap = "none" , direction , justify , align , nowrap } ) => css `
    display: flex;
    flex-direction: ${ direction };
    justify-content: ${ justify };
    align-items: ${ align };
    flex-wrap: ${ nowrap ? "no-wrap" : "wrap" };
    & > *:not(:last-child) {
      ${ direction === "column" ? css `
            margin-bottom: ${ ( p ) => p . theme . space [ gap ] }px;
          ` : css `
            margin-right: ${ ( p ) => p . theme . space [ gap ] }px;
          ` }
    }
  ` ) ; export default Flex ;