<!-- source-hash: a3c5543a6675d1ff7a726459eb736d56 -->
Animated filter dropdown component for selecting, applying, and resetting multi-section filter configurations with support for checkbox, radio, and select modes.

## Key Components

### Interfaces
- **`FilterOption`** — Individual filter item with `id`, `label`, `value`, optional `count`, and `type`
- **`FilterSection`** — Grouping of options with a selection `type` (`"checkbox"` | `"radio"` | `"select"`), optional `allowSelectAll`, and `defaultSelected`
- **`FiltersDropdownProps`** — Full component props including `sections`, `onApply`, `onReset`, `currentFilters`, and `placement`

### Internal Components
- **`FilterCheckbox`** — Styled checkbox with accent fill and checkmark icon when selected

### Main Export
- **`FiltersDropdown`** — Dropdown panel with animated open/close (mount/unmount + CSS transitions), smart viewport-aware placement, mobile-responsive layout, outside-click and Escape key dismissal, and active filter count indicator

## Usage Example

```typescript
const sections: FilterSection[] = [
  {
    id: "status",
    title: "Status",
    type: "checkbox",
    allowSelectAll: true,
    options: [
      { id: "open", label: "Open", value: "open", count: 12 },
      { id: "closed", label: "Closed", value: "closed", count: 4 },
    ],
  },
]

const [appliedFilters, setAppliedFilters] = useState<Record<string, string[]>>({})

<FiltersDropdown
  sections={sections}
  triggerLabel="STATUS"
  placement="bottom-start"
  currentFilters={appliedFilters}
  onApply={(filters) => setAppliedFilters(filters)}
  onReset={() => setAppliedFilters({})}
/>
```

### Key Behaviors
- `currentFilters` syncs external state back into the dropdown when reopened
- Placement auto-adjusts (`bottom-start` ↔ `bottom-end`) based on available viewport space
- On mobile (`< 640px`), the panel switches to a fixed, full-width overlay mode