<!--
WARNING: Should your PR create a new release?
Make sure your PR title follows the conventions of semantic-release
Or else a new release won't be cut!

https://github.com/semantic-release/semantic-release#commit-message-format
-->

### Why

### What

### Figma Design

(enter link here)

### JIRA Ticket

(enter link here)

For PR request bumps, please ping the #front-end-platform team on Slack.

### Chromatic Visual Differ

If this PR introduces visual changes to any stories, it will be checked by our integration with [Chromatic](https://www.chromatic.com), a visual diff tool. These changes will need to be reviewed and the PR accepted in Chromatic's UI. [See here for a description of this workflow](https://wealthsimple.quip.com/0UZVA79f3EU0).

#### Pre-Merge Checklist

- [ ] My PR title follows the conventions of [semantic-release](https://github.com/semantic-release/semantic-release#commit-message-format)

### PR Author/Reviewer Checklist

- Follows the conventions in the [Implementers Guide](https://github.com/wealthsimple/patchwork/blob/master/docs/implementers-guide):
  - [ ] It used `yarn generate` for any new components so the file structure is respected.
  - [ ] It uses the theme for all colours
  - [ ] It follows the convention for i18n string inputs
- Follows the guidance in [Patchwork Do's & Don'ts](https://wealthsimple.quip.com/RBIpAauwcvGR/DRAFT-Writing-Patchwork-Components-Dos-and-Donts)
- Tested that it looks okay in:
  - [ ] Chrome
  - [ ] Firefox
  - [ ] Safari 9+
  - [ ] IE 11+ (browserstack creds in 1password)
  - [ ] Edge latest (browserstack creds in 1password)
- Adheres to the [Acceptance Criteria](https://wealthsimple.quip.com/PZmTA8MGu0WU/CompoundPatchwork-Acceptance-Criteria)
  - [ ] Accessibility (verified its usage - see [the testing guide](https://wealthsimple.quip.com/SOTJAKAU2wQA/A11y-Manual-Testing-Guide-Web-Edition))
  - [ ] Actions and behaviours
  - [ ] Input requirements including working demo
  - [ ] CSS guidelines
  - [ ] Design-related