@navinc/base-react-components/dist/list.js

Nav's Pattern Library

import { jsx as _jsx } from "react/jsx-runtime";
import { styled } from 'styled-components';
import { getFromSize } from './copy.js';
export const ListItem = styled.li.withConfig({ displayName: "brc-sc-ListItem", componentId: "brc-sc-1scrk30" }) `
  color: ${({ light, theme }) => (light ? theme.navNeutral400 : theme.navNeutralDark)};
  font-family: ${({ theme }) => theme.fontPrimary};
  font-size: ${getFromSize('fontSize')};
  font-weight: ${({ bold }) => (bold ? 800 : 400)};
  line-height: ${getFromSize('lineHeight')};
`;
ListItem.displayName = 'ListItem';
/**
# List

```
<UnorderedList>
    <ListItem bold>First Li Child</ListItem>
    <ListItem light>Second Li Child</ListItem>
    <ListItem size="sm">Third Li Child</ListItem>
</UnorderedList>

```

UnorderedList - `<ul>` bulleted list
OrderedList - `<ol>` numbered list

It is recommended to use the `ListItem` component as the li child of `UnorderedList` and `OrderedList`

# ListItem

```
    <ListItem bold>First Li Child</ListItem>
```

The `ListItem` component uses the nav's styleguide for styling the html `li` element.

## Props

### `bold`

The `bold` is a boolean prop for adjusting the weight of the `li`

### `light`

The `light` is a boolean prop for adjusting the weight of the `li`

### `size`

The `size` adjusts the font-size of the `li` options are `md`, `sm`, `xs` and `xxs`

 */
export const UnorderedList = (props) => _jsx("ul", Object.assign({}, props));
export const OrderedList = (props) => _jsx("ol", Object.assign({}, props));
//# sourceMappingURL=list.js.map