How to use the styled-system.compose function in styled-system

}

const textColor = system({
  textColor: {
    property: 'color',
    scale: 'textColors',
  },
});
const textDecoration = system({textDecoration: true});

const Text = styled.span(
  {
    margin: 0,
    padding: 0,
  },
  compose(
    space,
    display,
    verticalAlign,
    overflow,
    textDecoration,
    typography,
    textColor
  )
  // we do this because the default typings of emotion styled
  // means Text gets typed as a span, and can't be extended
  // correctly to utilise the as prop. The new HTML element attributes
  // always clash with the span html attributes. To override this,
  // we retype as a basic functional component which is easy to extend
) as React.FC

},
  borderTopRightRadius: {
    property: 'borderTopRightRadius',
    scale: 'radii',
  },
  borderBottomLeftRadius: {
    property: 'borderBottomLeftRadius',
    scale: 'radii',
  },
  borderBottomRightRadius: {
    property: 'borderBottomRightRadius',
    scale: 'radii',
  },
});

const border = compose(
  borderRadii,
  styledSystemBorder,
);

type AsProps = { as?: string };
export type FlameBoxProps = SpaceProps &
  LayoutProps &
  FlexboxProps &
  TypographyProps &
  Partial> & // Fun clashing between native color prop & styled-system color prop
  AsProps;
export const Box = styled('div')(
  compose(
    space,
    layout,
    typography,

}

const daySizeGridTemplateColumns = style({
  // React prop name and CSS property
  prop: 'daySizeGridTemplateColumns',
  // CSS property (if different from prop argument)
  cssProperty: 'gridTemplateColumns',
  // key for theme values
  key: 'gridTemplateColumns',
  // accessor function for transforming the value
  transformValue: n => `repeat(7, ${n}px)`,
  // add a fallback scale object or array, if theme is not present
  scale: [0, 4, 8, 16, 32],
})

const composeGridStyles = compose(
  gridAutoColumns,
  gridAutoFlow,
  gridAutoRows,
  gridColumnGap,
  gridGap,
  gridRowGap,
  gridTemplateAreas,
  gridTemplateColumns,
  gridTemplateRows,
  alignItems,
  justifyContent,
  space,
)

const Grid = styled('div')`
  display: grid;

position: relative;
  width: 100%;

  &:after {
    content: '';
    position: absolute;
    height: 1px;
    width: 100%;
    background: #e6e7e8;
    bottom: 0;
    left: 0;
  }
`

interface CloseWrapperProps extends JustifyContentProps, DisplayProps {}
const composeCloseWrapperStyles = compose(display, justifyContent)

const CloseWrapper = styled(Box)`
  ${composeCloseWrapperStyles}
`

interface MonthGridProps extends HeightProps, OverflowProps {}
const composeMonthGridStyles = compose(overflow, height)

const MonthGrid = styled(Grid)`
  ${composeMonthGridStyles}
`

export interface DatepickerProps extends UseDatepickerProps {
  phrases?: DatepickerPhrases
  displayFormat?: string | FormatFunction
  onClose?(): void

FontFamilyProps,
    FontWeightProps {
  isSelected: boolean
  disabledDate: boolean
  isSelectedStartOrEnd: boolean
  isWithinHoverRange: boolean
  dayHeight: number | (number | null)[] | undefined
  dayWidth: number | (number | null)[] | undefined
  borderAccessibilityColor: string
  daySelectedHoverBackground: ResponsiveValue>
  dayHoverBackground: ResponsiveValue>
  dayHoverColor: ResponsiveValue
  daySelectedHoverColor: ResponsiveValue
}

const composeStyledDayStyles = compose(
  boxShadow,
  background,
  color,
  fontFamily,
  fontWeight,
  fontSize,
)

const StyledDay = styled('button')`
  ${dayHeight}
  ${dayWidth}
  ${composeStyledDayStyles}
  cursor: pointer;
  border: 0;
  padding: 0;
  outline: 0;

color,
  ColorProps,
  compose,
  flexbox,
  FlexboxProps,
  layout,
  LayoutProps,
  position,
  PositionProps,
  shadow,
  ShadowProps,
  space,
  SpaceProps
} from 'styled-system'

export const systemProps = compose(
  space,
  layout,
  color,
  flexbox,
  background,
  border,
  position,
  shadow
)

export type BoxProps = SpaceProps &
  ColorProps &
  LayoutProps &
  FlexboxProps &
  BackgroundProps &
  BorderProps &

space,
  color,
  layout,
  typography,
  flexbox,
  border,
  background,
  position,
  grid,
  shadow
} from 'styled-system'

const themed = key => props => props.theme[key]

const El = styled('div')(
  compose(
    space,
    color,
    layout,
    typography,
    flexbox,
    border,
    background,
    position,
    grid,
    shadow,
    themed('El')
  )
)

tags.forEach(tag => {
  module.exports[tag.charAt(0).toUpperCase() + tag.slice(1)] = props =>

export const COMMON = compose(
  color,
  space
);

export const TYPOGRAPHY = compose(
  fontFamily,
  fontSize,
  fontWeight,
  lineHeight,
  textAlign,
  letterSpacing
);

export const LAYOUT = compose(
  display,
  size,
  width,
  height,
  minWidth,
  minHeight,
  maxWidth,
  maxHeight,
  overflow,
  verticalAlign
);

export const POSITION = compose(
  position,
  zIndex,
  top,

import styled, { css } from 'styled-components';
import { compose, layout, position } from 'styled-system';

const Image = styled('img')(
  compose(
    layout,
    position
  ),
  css`
    max-height: 100%;
    max-width: 100%;
  `
);

export { Image };

color,
  layout,
  space,
  typography,
  position,
} from 'styled-system';
import styledPropTypes from '@styled-system/prop-types';
import { overflow } from '../lib/styled_system_custom';

/**
 * A simple styled-component to contain content in a card UI using styled-system.
 *
 * @see See [styled-system docs](https://github.com/jxnblk/styled-system/blob/master/docs/api.md) for usage of those props
 */
const StyledCard = styled.div(
  compose(flexbox, typography, background, border, shadow, color, layout, position, space, overflow),
);

StyledCard.propTypes = {
  ...styledPropTypes.typography,
  ...styledPropTypes.background,
  ...styledPropTypes.border,
  ...styledPropTypes.shadow,
  ...styledPropTypes.color,
  ...styledPropTypes.layout,
  ...styledPropTypes.space,
  /** styled-system prop: accepts any css 'overflow' value */
  overflow: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.array]),
};

StyledCard.defaultProps = {
  bg: 'white.full',