Sheet

<div class="sheet-root is-open" data-open="true">
  <button type="button" class="sheet-backdrop" aria-label="Close sheet"></button>
  <div class="sheet-dialog" role="dialog" aria-modal="true" aria-labelledby="sheet-title" tabindex="-1">
    <div class="sheet-handle sheet-drag" aria-hidden="true"></div>
    <div class="sheet-head sheet-drag">
      <h2 class="sheet-title" id="sheet-title">Quick filters</h2>
      <button type="button" class="sheet-close" aria-label="Close">…</button>
    </div>
    <div class="sheet-body">…</div>
  </div>
</div>

import {
  Sheet, SheetDialog, SheetHandle, SheetHead, SheetTitle, SheetClose, SheetBody, Button,
} from 'caustica-design/core'
import 'caustica-design/css'

<Sheet open={open} onOpenChange={setOpen} backdropLabel="Close sheet">
  <SheetDialog labelledBy={titleId}>
    <SheetHandle />
    <SheetHead>
      <SheetTitle id={titleId}>Quick filters</SheetTitle>
      <SheetClose label="Close" onClick={() => setOpen(false)} />
    </SheetHead>
    <SheetBody>
      <Button variant="primary" onClick={() => setOpen(false)}>Done</Button>
    </SheetBody>
  </SheetDialog>
</Sheet>