<hr/>
  <br/>
  <img src='https://github.com/dash-ui/styles/raw/main/assets/logo.png'/>
  <blockquote>A utility for creating compound styles with Dash</blockquote>
  
  <pre>npm i @dash-ui/compound</pre>
  <br/>

<p>
  <a href="https://bundlephobia.com/result?p=@dash-ui/compound">
    <img alt="Bundlephobia" src="https://img.shields.io/bundlephobia/minzip/@dash-ui/compound?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Types" href="https://www.npmjs.com/package/@dash-ui/compound">
    <img alt="Types" src="https://img.shields.io/npm/types/@dash-ui/compound?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Code coverage report" href="https://codecov.io/gh/dash-ui/compound">
    <img alt="Code coverage" src="https://img.shields.io/codecov/c/gh/dash-ui/compound?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="Build status" href="https://github.com/dash-ui/compound/actions/workflows/release.yml">
    <img alt="Build status" src="https://img.shields.io/github/workflow/status/dash-ui/compound/release/main?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="NPM version" href="https://www.npmjs.com/package/@dash-ui/compound">
    <img alt="NPM Version" src="https://img.shields.io/npm/v/@dash-ui/compound?style=for-the-badge&labelColor=24292e">
  </a>
  <a aria-label="License" href="https://jaredlunde.mit-license.org/">
    <img alt="MIT License" src="https://img.shields.io/npm/l/@dash-ui/compound?style=for-the-badge&labelColor=24292e">
  </a>
</p>

---

## Quick start

```js
import compound from "@dash-ui/compound";
```

## API

### compound(styles)

#### Arguments

| Name   | Type     | Default | Required? | Description                                                      |
| ------ | -------- | ------- | --------- | ---------------------------------------------------------------- |
| styles | `Styles` |         | Yes       | Creates a compound styles utility on top of this styles instance |

## LICENSE

MIT
