```jsx
import FilterTypes from "./types";

function FilterDemo({ size }) {
  const [filters, setFilters] = React.useState([]);

  const handleChange = updatedFilters => {
    setFilters(updatedFilters);
  };

  return (
    <Filter
      size={size}
      className={size === "lg" ? "max-w-3xl" : "max-w-sm"}
      types={FilterTypes}
      filters={filters}
      onChange={handleChange}
    />
  );
};

<div className="p-4 font-sans bg-gray-50 text-gray-900">
  <h2 className="mb-2 font-lg font-semibold">Sequences filter size</h2>
  <FilterDemo />

  <h2 className="mt-8 mb-2 font-lg font-semibold">
    Broadcasts filter size
  </h2>
  <FilterDemo size="lg" />
</div>
```

### Use filter in popover

```jsx
import VisuallyHidden from "@reach/visually-hidden";
import Popover, { PopoverButton, PopoverContent } from "../popover";
import Icon from "../icon";
import FilterTypes from "./types";

function FilterDemo({ size }) {
  const [filters, setFilters] = React.useState([]);

  const handleChange = updatedFilters => {
    setFilters(updatedFilters);
  };

  return (
    <Filter
      size={size}
      className={size === "lg" ? "max-w-3xl" : "max-w-sm"}
      types={FilterTypes}
      filters={filters}
      onChange={handleChange}
    />
  );
};
<div className="p-4 font-sans">
  <Popover className="p-4" label="filter subscribers">
    <PopoverButton>
      <VisuallyHidden>Exclude Subscribers</VisuallyHidden>
      <Icon name="filter" />
    </PopoverButton>
    <PopoverContent className="p-4" style={{ width: "320px" }}>
      <p className="mb-1">Exclude subscribers from this email</p>
      <FilterDemo />
    </PopoverContent>
  </Popover>
</div>
```