Row.js

import * as React from 'react'
import styled from "styled-components";
import css, { SystemStyleObject } from "@styled-system/css";
import {
  border,
  BorderProps,
  color,
  ColorProps,
  flexbox,
  FlexboxProps,
  layout,
  LayoutProps,
  position,
  PositionProps,
  space,
  SpaceProps,
} from "styled-system";
import { IndigoSystemStyleProp } from "./tokens";

type Props = React.HTMLProps<HTMLDivElement> &
  BorderProps &
  ColorProps &
  FlexboxProps &
  LayoutProps &
  PositionProps &
  SpaceProps & {
    pitch?: IndigoSystemStyleProp;
  };

const Row: React.FunctionComponent<Props> = styled.div(
  ({ pitch }: Props) =>
    css({
      display: "flex",
      flexDirection: "column",
      "& > *": typeof pitch === "undefined" ? {} : { marginLeft: pitch },
      "& :first-child": typeof pitch === "undefined" ? {} : { marginLeft: 0 },
    } as SystemStyleObject),
  border,
  color,
  flexbox,
  layout,
  position,
  space
);

export default Row