import * as React from 'react' ; import styled from 'styled-components' ; interface IProps { id ? : string ; items : string [ ] ; } const StyledList = styled . ul `
  width: 100%;
  padding: 24px;
  overflow: auto;
` ; const StyledListItem = styled . li `
  margin-bottom: 16px;
  &:last-child {
    margin-bottom: 0;
  }

  ${ ( { theme } ) => `color: ${ theme . colors . copy }` };
` ; const StyledText = styled . div `
  margin-left: 8px;
  ${ ( { theme } ) => `${ theme . fonts . h5Style };
    font-family: ${ theme . fonts . regularFont };
    color: ${ theme . colors . copy }
  ` }
` ; function renderListItem ( text , index ) { return ( < StyledListItem key = { index } > < StyledText > { text } < /StyledText> < /StyledListItem>); } export function BulletList ( props ) { return ( < StyledList id = { props . id } > { props . items . map ( renderListItem ) } < /StyledList>); }