tachyons list using styled-components

list.js

import React, { PropTypes } from 'react'

import styled from 'styled-components'
import t      from 'tachyons-js'

export const List = ({
    className,
    children,
}) => (
    <ul className={className}>
        {React.Children.map(children, (child) => (
            <li>
                {child}
            </li>
        ))}
    </ul>
)

List.propTypes = {
    className: PropTypes.string.isRequired,
    children : PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node,
    ]).isRequired,
}

export const BlockItemDottedBorderList = styled(List)`
    ${{
        ...t.list,
        ...t.pl0,
        ...t.measure,
        ...t.center,
    }}

    li {${{
        ...t.lh_copy,
        ...t.pv3,
        ...t.ba,
        ...t.bl_0,
        ...t.bt_0,
        ...t.br_0,
        ...t.b__dotted,
        ...t.b__black_30,
    }}}
`

const BorderList = styled(List)`
    ${{
        ...t.list,
        ...t.pl0,
        ...t.ml0,
        ...t.center,
        ...t.ba,
        ...t.b__light_silver,
    }}

    li {${{
        ...t.ph3,
    }}}

    li:not(:last-child) {${{
        ...t.bb,
        ...t.b__light_silver,
    }}}
`

export const BorderSpacedList = styled(BorderList)`
    ${{
        ...t.mw6,
        ...t.br2,
    }}

    li {${{
        ...t.pv3,
    }}}
`
export const BorderTightList = styled(BorderList)`
    ${{
        ...t.mw5,
        ...t.br3,
    }}

    li {${{
        ...t.pv2,
    }}}
`

export default BlockItemDottedBorderList