Showing preview only (2,259K chars total). Download the full file or copy to clipboard to get everything.
Repository: markmead/hyperui
Branch: main
Commit: e42bd733b1c7
Files: 620
Total size: 2.0 MB
Directory structure:
gitextract_drkid_2t/
├── .github/
│ └── copilot-instructions.md
├── .gitignore
├── .prettierignore
├── .prettierrc
├── .vscode/
│ ├── extensions.json
│ └── settings.json
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── astro.config.js
├── eslint.config.js
├── package.json
├── pnpm-workspace.yaml
├── public/
│ ├── component.css
│ ├── component.js
│ ├── examples/
│ │ ├── application/
│ │ │ ├── accordions/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── badges/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── breadcrumbs/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── button-groups/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── checkboxes/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── details-list/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ └── 4.html
│ │ │ ├── dividers/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ └── 6.html
│ │ │ ├── dropdown/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── empty-states/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── file-uploaders/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ └── 2.html
│ │ │ ├── filters/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ └── 2.html
│ │ │ ├── grids/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 10.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7.html
│ │ │ │ ├── 8.html
│ │ │ │ └── 9.html
│ │ │ ├── inputs/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ └── 4.html
│ │ │ ├── loaders/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7-dark.html
│ │ │ │ └── 7.html
│ │ │ ├── media/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7.html
│ │ │ │ └── 8.html
│ │ │ ├── modals/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ └── 6.html
│ │ │ ├── pagination/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── progress-bars/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ └── 4.html
│ │ │ ├── quantity-inputs/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ └── 4.html
│ │ │ ├── radio-groups/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ └── 3.html
│ │ │ ├── range-inputs/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4.html
│ │ │ │ └── 5.html
│ │ │ ├── selects/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── side-menu/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ └── 3.html
│ │ │ ├── skip-links/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ └── 3.html
│ │ │ ├── stats/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ └── 6.html
│ │ │ ├── steps/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── tables/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── tabs/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── textareas/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── timelines/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── toasts/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ └── 6.html
│ │ │ ├── toggles/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ └── 4.html
│ │ │ └── vertical-menu/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ ├── 3.html
│ │ │ ├── 4-dark.html
│ │ │ ├── 4.html
│ │ │ ├── 5-dark.html
│ │ │ ├── 5.html
│ │ │ ├── 6-dark.html
│ │ │ ├── 6.html
│ │ │ ├── 7-dark.html
│ │ │ ├── 7.html
│ │ │ ├── 8-dark.html
│ │ │ └── 8.html
│ │ ├── marketing/
│ │ │ ├── announcements/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ └── 6.html
│ │ │ ├── banners/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── blog-cards/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ ├── 6.html
│ │ │ │ └── 7.html
│ │ │ ├── buttons/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 10.html
│ │ │ │ ├── 11.html
│ │ │ │ ├── 12.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7.html
│ │ │ │ ├── 8.html
│ │ │ │ └── 9.html
│ │ │ ├── cards/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7.html
│ │ │ │ ├── 8.html
│ │ │ │ └── 9.html
│ │ │ ├── carts/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ └── 3.html
│ │ │ ├── contact-forms/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── ctas/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ └── 4.html
│ │ │ ├── empty-content/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ └── 5.html
│ │ │ ├── faqs/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── feature-grids/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ └── 4.html
│ │ │ ├── footers/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 10-dark.html
│ │ │ │ ├── 10.html
│ │ │ │ ├── 11-dark.html
│ │ │ │ ├── 11.html
│ │ │ │ ├── 12-dark.html
│ │ │ │ ├── 12.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5-dark.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6-dark.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7-dark.html
│ │ │ │ ├── 7.html
│ │ │ │ ├── 8-dark.html
│ │ │ │ ├── 8.html
│ │ │ │ ├── 9-dark.html
│ │ │ │ └── 9.html
│ │ │ ├── headers/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4-dark.html
│ │ │ │ └── 4.html
│ │ │ ├── logo-clouds/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ └── 4.html
│ │ │ ├── newsletter-signup/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ └── 2.html
│ │ │ ├── polls/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ ├── pricing/
│ │ │ │ ├── 1.html
│ │ │ │ └── 2.html
│ │ │ ├── product-cards/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ ├── 4.html
│ │ │ │ ├── 5.html
│ │ │ │ ├── 6.html
│ │ │ │ ├── 7.html
│ │ │ │ └── 8.html
│ │ │ ├── product-collections/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ └── 4.html
│ │ │ ├── sections/
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3.html
│ │ │ │ └── 4.html
│ │ │ ├── stats/
│ │ │ │ ├── 1-dark.html
│ │ │ │ ├── 1.html
│ │ │ │ ├── 2-dark.html
│ │ │ │ ├── 2.html
│ │ │ │ ├── 3-dark.html
│ │ │ │ └── 3.html
│ │ │ └── team-sections/
│ │ │ ├── 1-dark.html
│ │ │ ├── 1.html
│ │ │ ├── 2-dark.html
│ │ │ ├── 2.html
│ │ │ ├── 3-dark.html
│ │ │ └── 3.html
│ │ └── neobrutalism/
│ │ ├── accordions/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── alerts/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── badges/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── buttons/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ ├── 3.html
│ │ │ ├── 4.html
│ │ │ └── 5.html
│ │ ├── cards/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ ├── 3.html
│ │ │ └── 4.html
│ │ ├── checkboxes/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── inputs/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── progress-bars/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── selects/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ └── 3.html
│ │ ├── tabs/
│ │ │ ├── 1.html
│ │ │ ├── 2.html
│ │ │ ├── 3.html
│ │ │ └── 4.html
│ │ └── textareas/
│ │ ├── 1.html
│ │ ├── 2.html
│ │ └── 3.html
│ ├── llms.txt
│ └── robots.txt
├── src/
│ ├── components/
│ │ ├── BaseHead.astro
│ │ ├── BaseHero.astro
│ │ ├── BlogCard.astro
│ │ ├── CollectionFeature.astro
│ │ ├── ComponentCard.astro
│ │ ├── ComponentPreview.astro
│ │ ├── DropdownMenu.astro
│ │ ├── DropdownToggle.astro
│ │ ├── DropdownWrapper.astro
│ │ ├── FormattedDate.astro
│ │ ├── HeaderLink.astro
│ │ ├── PreviewBreakpoints.astro
│ │ ├── PreviewCopy.astro
│ │ ├── PreviewDetails.astro
│ │ ├── PreviewDirection.astro
│ │ ├── PreviewRefs.astro
│ │ ├── PreviewView.astro
│ │ ├── PreviewWrapper.astro
│ │ ├── RelatedComponents.astro
│ │ ├── SearchInput.astro
│ │ ├── SearchResults.astro
│ │ ├── SearchWrapper.astro
│ │ ├── SiteFooter.astro
│ │ └── SiteHeader.astro
│ ├── consts.ts
│ ├── content/
│ │ ├── blog/
│ │ │ ├── acknowledgements.mdx
│ │ │ ├── animated-border-gradient-with-tailwindcss.mdx
│ │ │ ├── animation-duration-delay-with-tailwindcss.mdx
│ │ │ ├── faqs.mdx
│ │ │ ├── highlight-hover-effect-with-tailwindcss.mdx
│ │ │ ├── how-to-clean-up-tailwindcss-code.mdx
│ │ │ ├── how-to-contribute.mdx
│ │ │ ├── how-to-write-better-containers-in-tailwindcss.mdx
│ │ │ ├── how-to-write-better-tailwindcss.mdx
│ │ │ ├── move-to-tailwindcss-without-breaking-changes.mdx
│ │ │ └── remove-number-input-spinners-with-tailwindcss.mdx
│ │ └── collection/
│ │ ├── application/
│ │ │ ├── accordions.mdx
│ │ │ ├── badges.mdx
│ │ │ ├── breadcrumbs.mdx
│ │ │ ├── button-groups.mdx
│ │ │ ├── checkboxes.mdx
│ │ │ ├── details-list.mdx
│ │ │ ├── dividers.mdx
│ │ │ ├── dropdown.mdx
│ │ │ ├── empty-states.mdx
│ │ │ ├── file-uploaders.mdx
│ │ │ ├── filters.mdx
│ │ │ ├── grids.mdx
│ │ │ ├── inputs.mdx
│ │ │ ├── loaders.mdx
│ │ │ ├── media.mdx
│ │ │ ├── modals.mdx
│ │ │ ├── pagination.mdx
│ │ │ ├── progress-bars.mdx
│ │ │ ├── quantity-inputs.mdx
│ │ │ ├── radio-groups.mdx
│ │ │ ├── range-inputs.mdx
│ │ │ ├── selects.mdx
│ │ │ ├── side-menu.mdx
│ │ │ ├── skip-links.mdx
│ │ │ ├── stats.mdx
│ │ │ ├── steps.mdx
│ │ │ ├── tables.mdx
│ │ │ ├── tabs.mdx
│ │ │ ├── textareas.mdx
│ │ │ ├── timelines.mdx
│ │ │ ├── toasts.mdx
│ │ │ ├── toggles.mdx
│ │ │ └── vertical-menu.mdx
│ │ ├── marketing/
│ │ │ ├── announcements.mdx
│ │ │ ├── banners.mdx
│ │ │ ├── blog-cards.mdx
│ │ │ ├── buttons.mdx
│ │ │ ├── cards.mdx
│ │ │ ├── carts.mdx
│ │ │ ├── contact-forms.mdx
│ │ │ ├── ctas.mdx
│ │ │ ├── empty-content.mdx
│ │ │ ├── faqs.mdx
│ │ │ ├── feature-grids.mdx
│ │ │ ├── footers.mdx
│ │ │ ├── headers.mdx
│ │ │ ├── logo-clouds.mdx
│ │ │ ├── newsletter-signup.mdx
│ │ │ ├── polls.mdx
│ │ │ ├── pricing.mdx
│ │ │ ├── product-cards.mdx
│ │ │ ├── product-collections.mdx
│ │ │ ├── sections.mdx
│ │ │ └── team-sections.mdx
│ │ └── neobrutalism/
│ │ ├── accordions.mdx
│ │ ├── alerts.mdx
│ │ ├── badges.mdx
│ │ ├── buttons.mdx
│ │ ├── cards.mdx
│ │ ├── checkboxes.mdx
│ │ ├── inputs.mdx
│ │ ├── progress-bars.mdx
│ │ ├── selects.mdx
│ │ ├── tabs.mdx
│ │ └── textareas.mdx
│ ├── content.config.ts
│ ├── layouts/
│ │ ├── BaseLayout.astro
│ │ ├── BlogPost.astro
│ │ ├── ComponentPost.astro
│ │ └── ErrorLayout.astro
│ ├── pages/
│ │ ├── 404.astro
│ │ ├── blog/
│ │ │ ├── [...slug].astro
│ │ │ └── index.astro
│ │ ├── components/
│ │ │ ├── application/
│ │ │ │ ├── [...slug].astro
│ │ │ │ └── index.astro
│ │ │ ├── marketing/
│ │ │ │ ├── [...slug].astro
│ │ │ │ └── index.astro
│ │ │ └── neobrutalism/
│ │ │ ├── [...slug].astro
│ │ │ └── index.astro
│ │ ├── index.astro
│ │ └── rss.xml.ts
│ ├── styles/
│ │ ├── component.css
│ │ └── global.css
│ ├── types/
│ │ └── component.ts
│ └── utils/
│ └── readingTime.ts
└── tsconfig.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/copilot-instructions.md
================================================
# Role & Tone
- You are a senior frontend developer maintaining HyperUI.
- **Be concise.** Give direct answers and code. Avoid conversational filler.
- If a request violates the component guidelines below, briefly explain why and offer a compliant alternative.
# Tech Stack
- **Tailwind CSS v4**: This project uses v4.
- Use `@theme` (Tailwind v4) where configuration is needed.
- Use `size-*` utilities where appropriate.
- Assume modern browser support (no vendor prefixes needed).
- **Astro**: The documentation site is built with Astro.
- **HTML**: Use semantic elements (`<nav>`, `<main>`, `<article>`) and ARIA attributes for accessibility.
# Component Guidelines
## Core Philosophy
HyperUI is a **component library for developers**. Components should be:
1. **Clean and neutral** - Use minimal styling that focuses on structure and usability
2. **Easily customizable** - Avoid unnecessary decorative styling (gradients, excessive color) that developers can't easily override
3. **Semantic and accessible** - Proper HTML structure, accessible markup, ARIA labels where needed
4. **Production-ready** - Components that can be dropped directly into projects with Tailwind CSS v4
5. **Copy-paste friendly** - Developers should understand and be able to modify the code easily
## What We DON'T Do
- ❌ Decorative gradients on backgrounds (unless essential to component function)
- ❌ Overly branded styling with proprietary color schemes
- ❌ Unnecessary animations or effects that don't improve UX
- ❌ External dependencies (date pickers, carousels, third-party libraries)
- ❌ Opinionated styling that forces a specific design direction
- ❌ Dark mode variants unless explicitly requested
## What We DO Do
- ✅ Neutral color palettes (grays, blacks, whites, primary accent color)
- ✅ Tailwind CSS v4 utilities only (no custom CSS where possible)
- ✅ Clear semantic HTML structure
- ✅ Accessibility-first approach
- ✅ Multiple variants that show different use cases, not different "themes"
- ✅ Components that are **blocks developers can build with**, not marketing fluff
## Styling Approach
- **Primary accent color**: Use for CTAs and interactive elements
- **Neutrals**: Grays for borders, text, secondary content
- **Backgrounds**: Prefer white/transparent or very subtle grays
- **Hover states**: Subtle color changes, not dramatic transformations
- **Text hierarchy**: Use font weights and sizes, not colors
## Component Structure
Each component should have:
1. Clear, descriptive title
2. Semantic HTML
3. Accessible ARIA attributes where needed
4. Responsive design (if applicable)
5. Obvious primary/secondary actions
6. No unnecessary decoration
## For Future Development
When adding new collections or components:
1. Ask: "Can a developer easily customize this?"
2. Ask: "Is this decoration or is it essential?"
3. Ask: "Would this work with any brand's color scheme?"
4. If the answer to any is no, reconsider the approach
**Remember**: We're not designing finished websites. We're providing building blocks that developers can use to build their own designs. Default to minimal, neutral output unless explicitly asked otherwise.
================================================
FILE: .gitignore
================================================
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
# logs
*.log
*.tmp
# environment variables
.env*
# macOS
.DS_Store
================================================
FILE: .prettierignore
================================================
# build output
dist/
# generated types
.astro/
# dependencies
node_modules/
pnpm-lock.yaml
# vs code
.vscode/
# css
public/component.css
================================================
FILE: .prettierrc
================================================
{
"printWidth": 100,
"semi": false,
"singleQuote": true,
"trailingComma": "all",
"plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
"overrides": [
{
"files": "*.astro",
"options": {
"parser": "astro"
}
}
]
}
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": [
"astro-build.astro-vscode",
"unifiedjs.vscode-mdx",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bradlc.vscode-tailwindcss"
]
}
================================================
FILE: .vscode/settings.json
================================================
{
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
"package.json": "pnpm-lock.yaml, pnpm-workspace.yaml",
"astro.config.js": "tsconfig.json",
"eslint.config.js": ".prettierrc",
"README.md": "CONTRIBUTING.md, LICENSE"
}
}
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing to HyperUI
Thanks for helping improve HyperUI.
## Before you start
Please open an issue first before starting work.
## Run the site locally
```bash
git clone git@github.com:markmead/hyperui.git
pnpm install
pnpm dev
pnpm run css --watch
```
## Submit a contribution
1. Open an issue.
2. Create a branch.
3. Make your change.
4. Open a PR for review.
For full examples and guidance, read: [How to contribute](https://www.hyperui.dev/blog/how-to-contribute)
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) Mark Mead
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# HyperUI
Free, open-source Tailwind CSS v4 components for marketing sites, web apps, and eCommerce projects.
Browse components on [hyperui.dev](https://hyperui.dev), copy the markup, and paste it into your Tailwind project.
## Use HyperUI
There is no package to install.
1. Find a component on [hyperui.dev](https://hyperui.dev).
2. Copy the code.
3. Paste it into your project.
## Run the site locally
```bash
pnpm install
pnpm dev
pnpm run css --watch
```
## Contributing
Please open an issue first before starting work.
- Contributing guide: [CONTRIBUTING.md](./CONTRIBUTING.md)
- Full walkthrough: [How to contribute](https://www.hyperui.dev/blog/how-to-contribute)
## License
[MIT](./LICENSE)
================================================
FILE: astro.config.js
================================================
// @ts-check
import { defineConfig, fontProviders } from 'astro/config'
import mdx from '@astrojs/mdx'
import sitemap from '@astrojs/sitemap'
import rehypeExternalLinks from 'rehype-external-links'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
site: 'https://hyperui.dev',
integrations: [
mdx({
optimize: true,
}),
sitemap(),
],
vite: {
plugins: [tailwindcss()],
},
markdown: {
rehypePlugins: [
[
rehypeExternalLinks,
{
rel: ['noreferrer'],
target: '_blank',
},
],
],
syntaxHighlight: false,
},
fonts: [
{
cssVariable: '--font-google-sans-flex',
name: 'Google Sans Flex',
provider: fontProviders.google(),
weights: [400, 500, 600, 700, 800],
},
],
redirects: {
'/components/marketing/forms': '/components/marketing/contact-forms',
},
})
================================================
FILE: eslint.config.js
================================================
// @ts-check
import { defineConfig, globalIgnores } from 'eslint/config'
import astro from 'eslint-plugin-astro'
import js from '@eslint/js'
import globals from 'globals'
import typescript from 'typescript-eslint'
export default defineConfig([
globalIgnores(['dist', '.astro']),
js.configs.recommended,
...typescript.configs.recommended,
...astro.configs.recommended,
{
files: ['public/**', 'src/**'],
languageOptions: {
globals: {
...globals.browser,
},
},
},
])
================================================
FILE: package.json
================================================
{
"name": "hyperui",
"type": "module",
"scripts": {
"dev": "astro dev",
"build": "astro build",
"check": "astro check",
"lint": "eslint .",
"format": "prettier --write . --ignore-path .prettierignore",
"css": "npx @tailwindcss/cli -i ./src/styles/component.css -o ./public/component.css -m"
},
"dependencies": {
"@astrojs/check": "^0.9.7",
"@astrojs/mdx": "5.0.0",
"@astrojs/rss": "^4.0.17",
"@astrojs/sitemap": "3.7.1",
"@lucide/astro": "^0.577.0",
"@vercel/analytics": "^1.6.1",
"astro": "6.0.1"
},
"devDependencies": {
"@eslint/js": "^10.0.1",
"@tailwindcss/cli": "^4.2.1",
"@tailwindcss/forms": "^0.5.11",
"@tailwindcss/typography": "^0.5.19",
"@tailwindcss/vite": "^4.2.1",
"eslint": "^10.0.2",
"eslint-plugin-astro": "^1.6.0",
"globals": "^17.4.0",
"prettier": "^3.8.1",
"prettier-plugin-astro": "^0.14.1",
"prettier-plugin-tailwindcss": "^0.7.2",
"rehype-external-links": "^3.0.0",
"tailwindcss": "^4.2.1",
"typescript": "^5.9.3",
"typescript-eslint": "^8.56.1"
}
}
================================================
FILE: pnpm-workspace.yaml
================================================
minimumReleaseAge: 1440
strictDepBuilds: true
onlyBuiltDependencies:
- '@parcel/watcher'
- esbuild
- sharp
================================================
FILE: public/component.css
================================================
/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */
@import "https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap";@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-divide-x-reverse:0;--tw-border-style:solid;--tw-divide-y-reverse:0;--tw-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1;--tw-content:"";--tw-outline-style:solid}}}@layer theme{:root,:host{--font-sans:"Google Sans Flex", sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-50:oklch(97.1% .013 17.38);--color-red-100:oklch(93.6% .032 17.717);--color-red-200:oklch(88.5% .062 18.334);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-red-900:oklch(39.6% .141 25.723);--color-amber-50:oklch(98.7% .022 95.277);--color-amber-100:oklch(96.2% .059 95.617);--color-amber-200:oklch(92.4% .12 95.746);--color-amber-400:oklch(82.8% .189 84.429);--color-amber-500:oklch(76.9% .188 70.08);--color-amber-700:oklch(55.5% .163 48.998);--color-amber-800:oklch(47.3% .137 46.201);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-300:oklch(90.5% .182 98.111);--color-yellow-400:oklch(85.2% .199 91.936);--color-yellow-500:oklch(79.5% .184 86.047);--color-green-50:oklch(98.2% .018 155.826);--color-green-100:oklch(96.2% .044 156.743);--color-green-200:oklch(92.5% .084 155.995);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-600:oklch(62.7% .194 149.214);--color-green-700:oklch(52.7% .154 150.069);--color-green-800:oklch(44.8% .119 151.328);--color-green-900:oklch(39.3% .095 152.535);--color-emerald-100:oklch(95% .052 163.051);--color-emerald-500:oklch(69.6% .17 162.48);--color-emerald-600:oklch(59.6% .145 163.225);--color-emerald-700:oklch(50.8% .118 165.612);--color-teal-300:oklch(85.5% .138 181.071);--color-teal-400:oklch(77.7% .152 181.912);--color-teal-500:oklch(70.4% .14 182.503);--color-teal-600:oklch(60% .118 184.704);--color-teal-700:oklch(51.1% .096 186.391);--color-blue-50:oklch(97% .014 254.604);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-200:oklch(88.2% .059 254.128);--color-blue-400:oklch(70.7% .165 254.624);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-blue-900:oklch(37.9% .146 265.522);--color-indigo-50:oklch(96.2% .018 272.314);--color-indigo-100:oklch(93% .034 272.788);--color-indigo-300:oklch(78.5% .115 274.713);--color-indigo-500:oklch(58.5% .233 277.117);--color-indigo-600:oklch(51.1% .262 276.966);--color-indigo-700:oklch(45.7% .24 277.023);--color-indigo-900:oklch(35.9% .144 278.697);--color-purple-100:oklch(94.6% .033 307.174);--color-purple-200:oklch(90.2% .063 306.703);--color-purple-300:oklch(82.7% .119 306.383);--color-purple-500:oklch(62.7% .265 303.9);--color-purple-600:oklch(55.8% .288 302.321);--color-purple-700:oklch(49.6% .265 301.924);--color-purple-800:oklch(43.8% .218 303.724);--color-purple-900:oklch(38.1% .176 304.987);--color-pink-500:oklch(65.6% .241 354.308);--color-pink-600:oklch(59.2% .249 .584);--color-rose-600:oklch(58.6% .253 17.585);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-800:oklch(27.8% .033 256.848);--color-gray-900:oklch(21% .034 264.665);--color-black:#000;--color-white:#fff;--spacing:.25rem;--breakpoint-2xl:96rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-3xl:48rem;--container-5xl:64rem;--container-7xl:80rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5 / 2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--tracking-wide:.025em;--tracking-wider:.05em;--tracking-widest:.1em;--leading-tight:1.25;--leading-relaxed:1.625;--radius-xs:.125rem;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--animate-spin:spin 1s linear infinite;--animate-ping:ping 1s cubic-bezier(0, 0, .2, 1) infinite;--animate-pulse:pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;--animate-bounce:bounce 1s infinite;--aspect-video:16 / 9;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select{appearance:none;--tw-shadow:0 0 #0000;background-color:#fff;border-width:1px;border-color:oklch(55.1% .027 264.364);border-radius:0;padding:.5rem .75rem;font-size:1rem;line-height:1.5rem}:is(input:where([type=text]),input:where(:not([type])),input:where([type=email]),input:where([type=url]),input:where([type=password]),input:where([type=number]),input:where([type=date]),input:where([type=datetime-local]),input:where([type=month]),input:where([type=search]),input:where([type=tel]),input:where([type=time]),input:where([type=week]),select:where([multiple]),textarea,select):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);border-color:oklch(54.6% .245 262.881);outline:2px solid #0000}input::placeholder,textarea::placeholder{color:oklch(55.1% .027 264.364);opacity:1}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-date-and-time-value{min-height:1.5em}::-webkit-date-and-time-value{text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-year-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-month-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-day-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-hour-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-minute-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-second-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-millisecond-field{padding-top:0;padding-bottom:0}::-webkit-datetime-edit-meridiem-field{padding-top:0;padding-bottom:0}select{-webkit-print-color-adjust:exact;print-color-adjust:exact;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='oklch(55.1%25 0.027 264.364)' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem}select:where([multiple]),select:where([size]:not([size="1"])){background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;print-color-adjust:unset;padding-right:.75rem}input:where([type=checkbox]),input:where([type=radio]){appearance:none;-webkit-print-color-adjust:exact;print-color-adjust:exact;vertical-align:middle;-webkit-user-select:none;user-select:none;color:oklch(54.6% .245 262.881);--tw-shadow:0 0 #0000;background-color:#fff;background-origin:border-box;border-width:1px;border-color:oklch(55.1% .027 264.364);flex-shrink:0;width:1rem;height:1rem;padding:0;display:inline-block}input:where([type=checkbox]){border-radius:0}input:where([type=radio]){border-radius:100%}input:where([type=checkbox]):focus,input:where([type=radio]):focus{outline-offset:2px;--tw-ring-inset:var(--tw-empty, );--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:oklch(54.6% .245 262.881);--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);outline:2px solid #0000}input:where([type=checkbox]):checked,input:where([type=radio]):checked{background-color:currentColor;background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}input:where([type=checkbox]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")}@media (forced-colors:active){input:where([type=checkbox]):checked{appearance:auto}}input:where([type=radio]):checked{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")}@media (forced-colors:active){input:where([type=radio]):checked{appearance:auto}}input:where([type=checkbox]):checked:hover,input:where([type=checkbox]):checked:focus,input:where([type=radio]):checked:hover,input:where([type=radio]):checked:focus{background-color:currentColor;border-color:#0000}input:where([type=checkbox]):indeterminate{background-color:currentColor;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");background-position:50%;background-repeat:no-repeat;background-size:100% 100%;border-color:#0000}@media (forced-colors:active){input:where([type=checkbox]):indeterminate{appearance:auto}}input:where([type=checkbox]):indeterminate:hover,input:where([type=checkbox]):indeterminate:focus{background-color:currentColor;border-color:#0000}input:where([type=file]){background:unset;border-color:inherit;font-size:unset;line-height:inherit;border-width:0;border-radius:0;padding:0}input:where([type=file]):focus{outline:1px solid buttontext;outline:1px auto -webkit-focus-ring-color}}@layer components;@layer utilities{.invisible{visibility:hidden}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.inset-x-0{inset-inline:calc(var(--spacing) * 0)}.inset-y-0{inset-block:calc(var(--spacing) * 0)}.-start-full{inset-inline-start:-100%}.-start-px{inset-inline-start:-1px}.start-0{inset-inline-start:calc(var(--spacing) * 0)}.start-3{inset-inline-start:calc(var(--spacing) * 3)}.start-full{inset-inline-start:100%}.-end-full{inset-inline-end:-100%}.end-0{inset-inline-end:calc(var(--spacing) * 0)}.end-1{inset-inline-end:calc(var(--spacing) * 1)}.end-4{inset-inline-end:calc(var(--spacing) * 4)}.-top-px{top:-1px}.top-0{top:calc(var(--spacing) * 0)}.top-1{top:calc(var(--spacing) * 1)}.top-1\/2{top:50%}.top-4{top:calc(var(--spacing) * 4)}.top-12{top:calc(var(--spacing) * 12)}.-right-2{right:calc(var(--spacing) * -2)}.-right-px{right:-1px}.right-0{right:calc(var(--spacing) * 0)}.right-1{right:calc(var(--spacing) * 1)}.right-2{right:calc(var(--spacing) * 2)}.-bottom-7{bottom:calc(var(--spacing) * -7)}.bottom-0{bottom:calc(var(--spacing) * 0)}.-left-2{left:calc(var(--spacing) * -2)}.left-0{left:calc(var(--spacing) * 0)}.left-1\/2{left:50%}.z-10{z-index:10}.z-50{z-index:50}.z-auto{z-index:auto}.order-last{order:9999}.col-span-1{grid-column:span 1/span 1}.col-span-2{grid-column:span 2/span 2}.-m-1{margin:calc(var(--spacing) * -1)}.m-1{margin:calc(var(--spacing) * 1)}.m-auto{margin:auto}.-mx-4{margin-inline:calc(var(--spacing) * -4)}.mx-auto{margin-inline:auto}.-my-2{margin-block:calc(var(--spacing) * -2)}.-my-3{margin-block:calc(var(--spacing) * -3)}.-my-4{margin-block:calc(var(--spacing) * -4)}.my-0\.5{margin-block:calc(var(--spacing) * .5)}.-ms-1{margin-inline-start:calc(var(--spacing) * -1)}.-ms-1\.5{margin-inline-start:calc(var(--spacing) * -1.5)}.-ms-px{margin-inline-start:-1px}.ms-1\.5{margin-inline-start:calc(var(--spacing) * 1.5)}.ms-4{margin-inline-start:calc(var(--spacing) * 4)}.-me-0\.5{margin-inline-end:calc(var(--spacing) * -.5)}.-me-1{margin-inline-end:calc(var(--spacing) * -1)}.-me-4{margin-inline-end:calc(var(--spacing) * -4)}.-me-px{margin-inline-end:-1px}.me-1\.5{margin-inline-end:calc(var(--spacing) * 1.5)}.-mt-0\.5{margin-top:calc(var(--spacing) * -.5)}.-mt-1\.5{margin-top:calc(var(--spacing) * -1.5)}.-mt-2{margin-top:calc(var(--spacing) * -2)}.-mt-4{margin-top:calc(var(--spacing) * -4)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:calc(var(--spacing) * 1)}.mt-1\.5{margin-top:calc(var(--spacing) * 1.5)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mt-6{margin-top:calc(var(--spacing) * 6)}.mt-8{margin-top:calc(var(--spacing) * 8)}.mt-12{margin-top:calc(var(--spacing) * 12)}.mt-14{margin-top:calc(var(--spacing) * 14)}.mt-16{margin-top:calc(var(--spacing) * 16)}.mt-32{margin-top:calc(var(--spacing) * 32)}.-mr-0\.5{margin-right:calc(var(--spacing) * -.5)}.-mb-0\.5{margin-bottom:calc(var(--spacing) * -.5)}.-mb-px{margin-bottom:-1px}.ml-auto{margin-left:auto}.line-clamp-2{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.line-clamp-3{-webkit-line-clamp:3;-webkit-box-orient:vertical;display:-webkit-box;overflow:hidden}.block{display:block}.flex{display:flex}.flow-root{display:flow-root}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.aspect-square{aspect-ratio:1}.aspect-video{aspect-ratio:var(--aspect-video)}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-14{width:calc(var(--spacing) * 14);height:calc(var(--spacing) * 14)}.size-16{width:calc(var(--spacing) * 16);height:calc(var(--spacing) * 16)}.size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.size-32{width:calc(var(--spacing) * 32);height:calc(var(--spacing) * 32)}.size-full{width:100%;height:100%}.h-0\.5{height:calc(var(--spacing) * .5)}.h-1{height:calc(var(--spacing) * 1)}.h-2{height:calc(var(--spacing) * 2)}.h-3{height:calc(var(--spacing) * 3)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-32{height:calc(var(--spacing) * 32)}.h-40{height:calc(var(--spacing) * 40)}.h-56{height:calc(var(--spacing) * 56)}.h-64{height:calc(var(--spacing) * 64)}.h-72{height:calc(var(--spacing) * 72)}.h-80{height:calc(var(--spacing) * 80)}.h-87\.5{height:calc(var(--spacing) * 87.5)}.h-full{height:100%}.h-px{height:1px}.h-screen{height:100vh}.max-h-46{max-height:calc(var(--spacing) * 46)}.min-h-screen{min-height:100vh}.w-0\.5{width:calc(var(--spacing) * .5)}.w-1\/2{width:50%}.w-2\/3{width:66.6667%}.w-4{width:calc(var(--spacing) * 4)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-20{width:calc(var(--spacing) * 20)}.w-24{width:calc(var(--spacing) * 24)}.w-32{width:calc(var(--spacing) * 32)}.w-56{width:calc(var(--spacing) * 56)}.w-64{width:calc(var(--spacing) * 64)}.w-96{width:calc(var(--spacing) * 96)}.w-\[80\%\]{width:80%}.w-full{width:100%}.w-px{width:1px}.w-screen{width:100vw}.max-w-3xl{max-width:var(--container-3xl)}.max-w-5xl{max-width:var(--container-5xl)}.max-w-7xl{max-width:var(--container-7xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-prose{max-width:65ch}.max-w-screen-2xl{max-width:var(--breakpoint-2xl)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.origin-center{transform-origin:50%}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0{--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-0\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-1\.5{--tw-translate-x:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-5{--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-full{--tw-translate-y:-100%;translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-0\.5{--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-1\.5{--tw-translate-y:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-y-8{--tw-translate-y:calc(var(--spacing) * 8);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-45{rotate:45deg}.rotate-180{rotate:180deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-bounce{animation:var(--animate-bounce)}.animate-ping{animation:var(--animate-ping)}.animate-pulse{animation:var(--animate-pulse)}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.appearance-none{appearance:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-\[24px_1fr\]{grid-template-columns:24px 1fr}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.place-content-center{place-content:center}.items-center{align-items:center}.items-end{align-items:flex-end}.items-start{align-items:flex-start}.items-stretch{align-items:stretch}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.justify-start{justify-content:flex-start}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-6{gap:calc(var(--spacing) * 6)}.gap-8{gap:calc(var(--spacing) * 8)}.gap-px{gap:1px}:where(.space-y-0>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-0\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * .5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * .5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-px>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(1px * var(--tw-space-y-reverse));margin-block-end:calc(1px * calc(1 - var(--tw-space-y-reverse)))}:where(.divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-y-2>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(2px * var(--tw-divide-y-reverse));border-bottom-width:calc(2px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-black>:not(:last-child)){border-color:var(--color-black)}:where(.divide-gray-100>:not(:last-child)){border-color:var(--color-gray-100)}:where(.divide-gray-200>:not(:last-child)){border-color:var(--color-gray-200)}:where(.divide-gray-300>:not(:last-child)){border-color:var(--color-gray-300)}.self-end{align-self:flex-end}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[10px\]{border-radius:10px}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-xs{border-radius:var(--radius-xs)}.rounded-s-sm{border-start-start-radius:var(--radius-sm);border-end-start-radius:var(--radius-sm)}.rounded-ss-xl{border-start-start-radius:var(--radius-xl)}.rounded-e-sm{border-start-end-radius:var(--radius-sm);border-end-end-radius:var(--radius-sm)}.rounded-se-3xl{border-start-end-radius:var(--radius-3xl)}.rounded-ee-xl{border-end-end-radius:var(--radius-xl)}.rounded-es-3xl{border-end-start-radius:var(--radius-3xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-s-4{border-inline-start-style:var(--tw-border-style);border-inline-start-width:4px}.border-s-\[3px\]{border-inline-start-style:var(--tw-border-style);border-inline-start-width:3px}.border-e{border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-t-2{border-top-style:var(--tw-border-style);border-top-width:2px}.border-r{border-right-style:var(--tw-border-style);border-right-width:1px}.border-r-2{border-right-style:var(--tw-border-style);border-right-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-none{--tw-border-style:none;border-style:none}.border-amber-500{border-color:var(--color-amber-500)}.border-black{border-color:var(--color-black)}.border-blue-500{border-color:var(--color-blue-500)}.border-blue-600{border-color:var(--color-blue-600)}.border-blue-700{border-color:var(--color-blue-700)}.border-current{border-color:currentColor}.border-emerald-500{border-color:var(--color-emerald-500)}.border-gray-100{border-color:var(--color-gray-100)}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-gray-400{border-color:var(--color-gray-400)}.border-gray-600{border-color:var(--color-gray-600)}.border-gray-700{border-color:var(--color-gray-700)}.border-gray-900\/10{border-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.border-gray-900\/10{border-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.border-green-500{border-color:var(--color-green-500)}.border-indigo-500{border-color:var(--color-indigo-500)}.border-indigo-600{border-color:var(--color-indigo-600)}.border-indigo-900{border-color:var(--color-indigo-900)}.border-purple-500{border-color:var(--color-purple-500)}.border-red-500{border-color:var(--color-red-500)}.border-red-600{border-color:var(--color-red-600)}.border-transparent{border-color:#0000}.border-white{border-color:var(--color-white)}.bg-\[\#91a5bb\]{background-color:#91a5bb}.bg-\[\#595759\]{background-color:#595759}.bg-\[\#afbfab\]{background-color:#afbfab}.bg-\[\#d2d3d4\]{background-color:#d2d3d4}.bg-\[\#d89f97\]{background-color:#d89f97}.bg-amber-50{background-color:var(--color-amber-50)}.bg-amber-100{background-color:var(--color-amber-100)}.bg-amber-500{background-color:var(--color-amber-500)}.bg-black{background-color:var(--color-black)}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab, red, red)){.bg-black\/50{background-color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.bg-blue-50{background-color:var(--color-blue-50)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-700{background-color:var(--color-blue-700)}.bg-emerald-100{background-color:var(--color-emerald-100)}.bg-emerald-600{background-color:var(--color-emerald-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-600{background-color:var(--color-gray-600)}.bg-gray-700{background-color:var(--color-gray-700)}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-gray-900\/10{background-color:#1018281a}@supports (color:color-mix(in lab, red, red)){.bg-gray-900\/10{background-color:color-mix(in oklab, var(--color-gray-900) 10%, transparent)}}.bg-green-50{background-color:var(--color-green-50)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-600{background-color:var(--color-green-600)}.bg-indigo-100{background-color:var(--color-indigo-100)}.bg-indigo-500{background-color:var(--color-indigo-500)}.bg-indigo-600{background-color:var(--color-indigo-600)}.bg-indigo-900{background-color:var(--color-indigo-900)}.bg-purple-100{background-color:var(--color-purple-100)}.bg-purple-200{background-color:var(--color-purple-200)}.bg-red-50{background-color:var(--color-red-50)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-rose-600{background-color:var(--color-rose-600)}.bg-teal-400{background-color:var(--color-teal-400)}.bg-teal-500{background-color:var(--color-teal-500)}.bg-teal-600{background-color:var(--color-teal-600)}.bg-white{background-color:var(--color-white)}.bg-yellow-300{background-color:var(--color-yellow-300)}.bg-yellow-400{background-color:var(--color-yellow-400)}.bg-linear-to-l{--tw-gradient-position:to left}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-l{--tw-gradient-position:to left in oklab}}.bg-linear-to-l{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-r{--tw-gradient-position:to right}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-r{--tw-gradient-position:to right in oklab}}.bg-linear-to-r{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-linear-to-t{--tw-gradient-position:to top}@supports (background-image:linear-gradient(in lab, red, red)){.bg-linear-to-t{--tw-gradient-position:to top in oklab}}.bg-linear-to-t{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-\[repeating-linear-gradient\(45deg\,var\(--tw-gradient-from\)_0\,var\(--tw-gradient-from\)_10px\,var\(--tw-gradient-to\)_10px\,var\(--tw-gradient-to\)_20px\)\]{background-image:repeating-linear-gradient(45deg,var(--tw-gradient-from) 0,var(--tw-gradient-from) 10px,var(--tw-gradient-to) 10px,var(--tw-gradient-to) 20px)}.from-gray-900\/50{--tw-gradient-from:#10182880}@supports (color:color-mix(in lab, red, red)){.from-gray-900\/50{--tw-gradient-from:color-mix(in oklab, var(--color-gray-900) 50%, transparent)}}.from-gray-900\/50{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-pink-500{--tw-gradient-from:var(--color-pink-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-yellow-400{--tw-gradient-from:var(--color-yellow-400);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-red-500{--tw-gradient-via:var(--color-red-500);--tw-gradient-via-stops:var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-gray-300{--tw-gradient-to:var(--color-gray-300);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-gray-900\/25{--tw-gradient-to:#10182840}@supports (color:color-mix(in lab, red, red)){.to-gray-900\/25{--tw-gradient-to:color-mix(in oklab, var(--color-gray-900) 25%, transparent)}}.to-gray-900\/25{--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-yellow-500{--tw-gradient-to:var(--color-yellow-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.object-cover{object-fit:cover}.p-0{padding:calc(var(--spacing) * 0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:calc(var(--spacing) * 1)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-2\.5{padding:calc(var(--spacing) * 2.5)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-0\.5{padding-inline:calc(var(--spacing) * .5)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.px-8{padding-inline:calc(var(--spacing) * 8)}.px-12{padding-inline:calc(var(--spacing) * 12)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-8{padding-block:calc(var(--spacing) * 8)}.py-16{padding-block:calc(var(--spacing) * 16)}.ps-4{padding-inline-start:calc(var(--spacing) * 4)}.pe-4{padding-inline-end:calc(var(--spacing) * 4)}.pe-8{padding-inline-end:calc(var(--spacing) * 8)}.pe-10{padding-inline-end:calc(var(--spacing) * 10)}.pe-32{padding-inline-end:calc(var(--spacing) * 32)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-6{padding-top:calc(var(--spacing) * 6)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-12{padding-top:calc(var(--spacing) * 12)}.pt-16{padding-top:calc(var(--spacing) * 16)}.pt-32{padding-top:calc(var(--spacing) * 32)}.pr-4{padding-right:calc(var(--spacing) * 4)}.pb-1{padding-bottom:calc(var(--spacing) * 1)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pb-6{padding-bottom:calc(var(--spacing) * 6)}.pb-8{padding-bottom:calc(var(--spacing) * 8)}.pl-4{padding-left:calc(var(--spacing) * 4)}.pl-6{padding-left:calc(var(--spacing) * 6)}.\[text-align\:_inherit\]{text-align:inherit}.text-center{text-align:center}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-3xl\/tight{font-size:var(--text-3xl);line-height:var(--leading-tight)}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-\[10px\]\/6{font-size:10px;line-height:calc(var(--spacing) * 6)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-lg\/tight{font-size:var(--text-lg);line-height:var(--leading-tight)}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-sm\/8{font-size:var(--text-sm);line-height:calc(var(--spacing) * 8)}.text-sm\/none{font-size:var(--text-sm);line-height:1}.text-sm\/relaxed{font-size:var(--text-sm);line-height:var(--leading-relaxed)}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-xs\/none{font-size:var(--text-xs);line-height:1}.text-xs\/relaxed{font-size:var(--text-xs);line-height:var(--leading-relaxed)}.text-\[10px\]{font-size:10px}.leading-10{--tw-leading:calc(var(--spacing) * 10);line-height:calc(var(--spacing) * 10)}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.tracking-widest{--tw-tracking:var(--tracking-widest);letter-spacing:var(--tracking-widest)}.text-pretty{text-wrap:pretty}.whitespace-nowrap{white-space:nowrap}.text-\[\#0072b1\]{color:#0072b1}.text-amber-700{color:var(--color-amber-700)}.text-amber-800{color:var(--color-amber-800)}.text-black{color:var(--color-black)}.text-blue-500{color:var(--color-blue-500)}.text-blue-600{color:var(--color-blue-600)}.text-blue-700{color:var(--color-blue-700)}.text-blue-800{color:var(--color-blue-800)}.text-blue-900{color:var(--color-blue-900)}.text-emerald-700{color:var(--color-emerald-700)}.text-gray-100{color:var(--color-gray-100)}.text-gray-200{color:var(--color-gray-200)}.text-gray-300{color:var(--color-gray-300)}.text-gray-400{color:var(--color-gray-400)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-600{color:var(--color-green-600)}.text-green-700{color:var(--color-green-700)}.text-green-800{color:var(--color-green-800)}.text-green-900{color:var(--color-green-900)}.text-indigo-600{color:var(--color-indigo-600)}.text-indigo-700{color:var(--color-indigo-700)}.text-pink-500{color:var(--color-pink-500)}.text-purple-600{color:var(--color-purple-600)}.text-purple-700{color:var(--color-purple-700)}.text-red-600{color:var(--color-red-600)}.text-red-700{color:var(--color-red-700)}.text-red-800{color:var(--color-red-800)}.text-red-900{color:var(--color-red-900)}.text-teal-600{color:var(--color-teal-600)}.text-teal-700{color:var(--color-teal-700)}.text-white{color:var(--color-white)}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab, red, red)){.text-white\/90{color:color-mix(in oklab, var(--color-white) 90%, transparent)}}.text-white\/95{color:#fffffff2}@supports (color:color-mix(in lab, red, red)){.text-white\/95{color:color-mix(in oklab, var(--color-white) 95%, transparent)}}.text-yellow-500{color:var(--color-yellow-500)}.uppercase{text-transform:uppercase}.not-italic{font-style:normal}.line-through{text-decoration-line:line-through}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-50{opacity:.5}.opacity-75{opacity:.75}.opacity-100{opacity:1}.shadow-\[2px_2px_0_0\]{--tw-shadow:2px 2px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\,8px_8px_0_0\,12px_12px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor), 12px 12px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\,8px_8px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor), 8px 8px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[4px_4px_0_0\]{--tw-shadow:4px 4px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,#0000000d);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-3{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-\[6px\]{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(6px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-black{--tw-shadow-color:#000}@supports (color:color-mix(in lab, red, red)){.shadow-black{--tw-shadow-color:color-mix(in oklab, var(--color-black) var(--tw-shadow-alpha), transparent)}}.shadow-indigo-100{--tw-shadow-color:oklch(93% .034 272.788)}@supports (color:color-mix(in lab, red, red)){.shadow-indigo-100{--tw-shadow-color:color-mix(in oklab, var(--color-indigo-100) var(--tw-shadow-alpha), transparent)}}.ring-black{--tw-ring-color:var(--color-black)}.ring-indigo-50{--tw-ring-color:var(--color-indigo-50)}.ring-indigo-600{--tw-ring-color:var(--color-indigo-600)}.ring-white{--tw-ring-color:var(--color-white)}.ring-offset-2{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.ring-offset-yellow-300{--tw-ring-offset-color:var(--color-yellow-300)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[filter\]{transition-property:filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[inset-inline-start\]{transition-property:inset-inline-start;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-none{transition-property:none}.duration-300{--tw-duration:.3s;transition-duration:.3s}.duration-500{--tw-duration:.5s;transition-duration:.5s}.\[-moz-appearance\:_textfield\],.\[-moz-appearance\:textfield\]{-moz-appearance:textfield}.\[-webkit-tap-highlight-color\:transparent\]{-webkit-tap-highlight-color:transparent}.\[animation-delay\:0\.2s\]{animation-delay:.2s}.\[animation-delay\:0\.4s\]{animation-delay:.4s}.\[clip-path\:_polygon\(0_0\,_0\%_100\%\,_100\%_50\%\)\]{clip-path:polygon(0 0,0% 100%,100% 50%)}.\[writing-mode\:vertical-lr\]{writing-mode:vertical-lr}.ring-inset{--tw-ring-inset:inset}:is(.\*\:bg-gray-100>*){background-color:var(--color-gray-100)}:is(.\*\:font-medium>*){--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.\*\:text-gray-900>*){color:var(--color-gray-900)}.group-odd\:flex-row-reverse:is(:where(.group):nth-child(odd) *){flex-direction:row-reverse}.group-odd\:text-right:is(:where(.group):nth-child(odd) *){text-align:right}.group-even\:order-last:is(:where(.group):nth-child(2n) *){order:9999}.group-open\:absolute:is(:where(.group):is([open],:popover-open,:open) *){position:absolute}.group-open\:start-0:is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}.group-open\:top-8:is(:where(.group):is([open],:popover-open,:open) *){top:calc(var(--spacing) * 8)}.group-open\:top-auto:is(:where(.group):is([open],:popover-open,:open) *){top:auto}.group-open\:mt-2:is(:where(.group):is([open],:popover-open,:open) *){margin-top:calc(var(--spacing) * 2)}.group-open\:-rotate-180:is(:where(.group):is([open],:popover-open,:open) *),.group-open\/keys\:-rotate-180:is(:where(.group\/keys):is([open],:popover-open,:open) *),.group-open\/members\:-rotate-180:is(:where(.group\/members):is([open],:popover-open,:open) *),.group-open\/roles\:-rotate-180:is(:where(.group\/roles):is([open],:popover-open,:open) *){rotate:-180deg}@media (hover:hover){.group-hover\:visible:is(:where(.group):hover *){visibility:visible}.group-hover\:absolute:is(:where(.group):hover *){position:absolute}.group-hover\:relative:is(:where(.group):hover *){position:relative}.group-hover\:start-4:is(:where(.group):hover *){inset-inline-start:calc(var(--spacing) * 4)}.group-hover\:end-4:is(:where(.group):hover *){inset-inline-end:calc(var(--spacing) * 4)}.group-hover\:ms-0\.5:is(:where(.group):hover *){margin-inline-start:calc(var(--spacing) * .5)}.group-hover\:ms-4:is(:where(.group):hover *){margin-inline-start:calc(var(--spacing) * 4)}.group-hover\:me-4:is(:where(.group):hover *){margin-inline-end:calc(var(--spacing) * 4)}.group-hover\:h-full:is(:where(.group):hover *){height:100%}.group-hover\:w-full:is(:where(.group):hover *){width:100%}.group-hover\:-translate-x-1:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-x-2:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-0:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-0\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-x-1\.5:is(:where(.group):hover *){--tw-translate-x:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-1:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:-translate-y-2:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-y-0:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-y-0\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:translate-y-1\.5:is(:where(.group):hover *){--tw-translate-y:calc(var(--spacing) * 1.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\:scale-105:is(:where(.group):hover *){--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.group-hover\:bg-gray-200:is(:where(.group):hover *){background-color:var(--color-gray-200)}.group-hover\:bg-transparent:is(:where(.group):hover *){background-color:#0000}.group-hover\:text-gray-700:is(:where(.group):hover *){color:var(--color-gray-700)}.group-hover\:text-gray-700\/75:is(:where(.group):hover *){color:#364153bf}@supports (color:color-mix(in lab, red, red)){.group-hover\:text-gray-700\/75:is(:where(.group):hover *){color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.group-hover\:text-indigo-600:is(:where(.group):hover *){color:var(--color-indigo-600)}.group-hover\:text-white:is(:where(.group):hover *){color:var(--color-white)}.group-hover\:underline:is(:where(.group):hover *){text-decoration-line:underline}.group-hover\:underline-offset-4:is(:where(.group):hover *){text-underline-offset:4px}.group-hover\:opacity-0:is(:where(.group):hover *){opacity:0}.group-hover\:opacity-50:is(:where(.group):hover *){opacity:.5}.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}.group-hover\:grayscale-50:is(:where(.group):hover *){--tw-grayscale:grayscale(50%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.group-hover\/card\:-translate-2:is(:where(.group\/card):hover *){--tw-translate-x:calc(var(--spacing) * -2);--tw-translate-y:calc(var(--spacing) * -2);translate:var(--tw-translate-x) var(--tw-translate-y)}.group-hover\/link\:block:is(:where(.group\/link):hover *){display:block}}.peer-checked\:start-6:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 6)}.peer-checked\:start-8:is(:where(.peer):checked~*){inset-inline-start:calc(var(--spacing) * 8)}.peer-checked\:block:is(:where(.peer):checked~*){display:block}.peer-checked\:hidden:is(:where(.peer):checked~*){display:none}.peer-checked\:w-2:is(:where(.peer):checked~*){width:calc(var(--spacing) * 2)}.peer-checked\:bg-white:is(:where(.peer):checked~*){background-color:var(--color-white)}.peer-checked\:ring-transparent:is(:where(.peer):checked~*){--tw-ring-color:transparent}:is(.peer-checked\:\*\:scale-0:is(:where(.peer):checked~*)>*){--tw-scale-x:0%;--tw-scale-y:0%;--tw-scale-z:0%;scale:var(--tw-scale-x) var(--tw-scale-y)}.peer-placeholder-shown\:translate-y-0:is(:where(.peer):placeholder-shown~*){--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus\:-translate-y-5:is(:where(.peer):focus~*){--tw-translate-y:calc(var(--spacing) * -5);translate:var(--tw-translate-x) var(--tw-translate-y)}.before\:absolute:before{content:var(--tw-content);position:absolute}.before\:top-0:before{content:var(--tw-content);top:calc(var(--spacing) * 0)}.before\:left-1\/2:before{content:var(--tw-content);left:50%}.before\:-ms-px:before{content:var(--tw-content);margin-inline-start:-1px}.before\:-mt-px:before{content:var(--tw-content);margin-top:-1px}.before\:h-0\.5:before{content:var(--tw-content);height:calc(var(--spacing) * .5)}.before\:h-full:before{content:var(--tw-content);height:100%}.before\:w-0\.5:before{content:var(--tw-content);width:calc(var(--spacing) * .5)}.before\:w-full:before{content:var(--tw-content);width:100%}.before\:-translate-x-1\/2:before{content:var(--tw-content);--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.before\:rounded-full:before{content:var(--tw-content);border-radius:3.40282e38px}.before\:bg-gray-200:before{content:var(--tw-content);background-color:var(--color-gray-200)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:inset-x-0:after{content:var(--tw-content);inset-inline:calc(var(--spacing) * 0)}.after\:top-1\/2:after{content:var(--tw-content);top:50%}.after\:bottom-0:after{content:var(--tw-content);bottom:calc(var(--spacing) * 0)}.after\:mt-4:after{content:var(--tw-content);margin-top:calc(var(--spacing) * 4)}.after\:block:after{content:var(--tw-content);display:block}.after\:h-0\.5:after{content:var(--tw-content);height:calc(var(--spacing) * .5)}.after\:h-1:after{content:var(--tw-content);height:calc(var(--spacing) * 1)}.after\:w-full:after{content:var(--tw-content);width:100%}.after\:-translate-y-1\/2:after{content:var(--tw-content);--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.after\:rounded-lg:after{content:var(--tw-content);border-radius:var(--radius-lg)}.after\:bg-black:after{content:var(--tw-content);background-color:var(--color-black)}.after\:bg-gray-200:after{content:var(--tw-content);background-color:var(--color-gray-200)}:is(.\*\:first\:sticky>*):first-child{position:sticky}:is(.\*\:first\:left-0>*):first-child{left:calc(var(--spacing) * 0)}:is(.\*\:first\:bg-white>*):first-child{background-color:var(--color-white)}:is(.\*\:first\:font-medium>*):first-child{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}:is(.peer-checked\:\*\:first\:hidden:is(:where(.peer):checked~*)>*):first-child,:is(.\*\:last\:hidden>*):last-child{display:none}:is(.peer-checked\:\*\:last\:block:is(:where(.peer):checked~*)>*):last-child{display:block}.odd\:-me-3:nth-child(odd){margin-inline-end:calc(var(--spacing) * -3)}.even\:-ms-3:nth-child(2n){margin-inline-start:calc(var(--spacing) * -3)}:is(.\*\:even\:bg-gray-50>*):nth-child(2n){background-color:var(--color-gray-50)}.checked\:bg-black:checked{background-color:var(--color-black)}.focus-within\:translate-y-0:focus-within{--tw-translate-y:calc(var(--spacing) * 0);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\:translate-y-4:focus-within{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus-within\:bg-yellow-300:focus-within{background-color:var(--color-yellow-300)}.focus-within\:ring:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-3:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-blue-600:focus-within{--tw-ring-color:var(--color-blue-600)}.focus-within\:ring-yellow-300:focus-within{--tw-ring-color:var(--color-yellow-300)}@media (hover:hover){.hover\:translate-0\.5:hover{--tw-translate-x:calc(var(--spacing) * .5);--tw-translate-y:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-1:hover{--tw-translate-x:calc(var(--spacing) * 1);--tw-translate-y:calc(var(--spacing) * 1);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:translate-3:hover{--tw-translate-x:calc(var(--spacing) * 3);--tw-translate-y:calc(var(--spacing) * 3);translate:var(--tw-translate-x) var(--tw-translate-y)}.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x) var(--tw-scale-y)}.hover\:-rotate-2:hover{rotate:-2deg}.hover\:rotate-2:hover{rotate:2deg}.hover\:border-gray-100:hover{border-color:var(--color-gray-100)}.hover\:border-gray-400:hover{border-color:var(--color-gray-400)}.hover\:border-gray-600:hover{border-color:var(--color-gray-600)}.hover\:border-pink-600:hover{border-color:var(--color-pink-600)}.hover\:bg-black:hover{background-color:var(--color-black)}.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-emerald-700:hover{background-color:var(--color-emerald-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-gray-300:hover{background-color:var(--color-gray-300)}.hover\:bg-gray-600:hover{background-color:var(--color-gray-600)}.hover\:bg-indigo-50:hover{background-color:var(--color-indigo-50)}.hover\:bg-indigo-600:hover{background-color:var(--color-indigo-600)}.hover\:bg-indigo-700:hover{background-color:var(--color-indigo-700)}.hover\:bg-purple-300:hover{background-color:var(--color-purple-300)}.hover\:bg-red-50:hover{background-color:var(--color-red-50)}.hover\:bg-teal-500:hover{background-color:var(--color-teal-500)}.hover\:bg-teal-600:hover{background-color:var(--color-teal-600)}.hover\:bg-teal-700:hover{background-color:var(--color-teal-700)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:bg-white:hover{background-color:var(--color-white)}.hover\:bg-yellow-100:hover{background-color:var(--color-yellow-100)}.hover\:bg-yellow-300:hover{background-color:var(--color-yellow-300)}.hover\:bg-yellow-400:hover{background-color:var(--color-yellow-400)}.hover\:bg-yellow-500:hover{background-color:var(--color-yellow-500)}.hover\:text-blue-600:hover{color:var(--color-blue-600)}.hover\:text-blue-700:hover{color:var(--color-blue-700)}.hover\:text-gray-500\/75:hover{color:#6a7282bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-500\/75:hover{color:color-mix(in oklab, var(--color-gray-500) 75%, transparent)}}.hover\:text-gray-600:hover{color:var(--color-gray-600)}.hover\:text-gray-600\/75:hover{color:#4a5565bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-600\/75:hover{color:color-mix(in oklab, var(--color-gray-600) 75%, transparent)}}.hover\:text-gray-700:hover{color:var(--color-gray-700)}.hover\:text-gray-700\/75:hover{color:#364153bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-700\/75:hover{color:color-mix(in oklab, var(--color-gray-700) 75%, transparent)}}.hover\:text-gray-900:hover{color:var(--color-gray-900)}.hover\:text-gray-900\/75:hover{color:#101828bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-gray-900\/75:hover{color:color-mix(in oklab, var(--color-gray-900) 75%, transparent)}}.hover\:text-indigo-600:hover{color:var(--color-indigo-600)}.hover\:text-indigo-900:hover{color:var(--color-indigo-900)}.hover\:text-red-600:hover{color:var(--color-red-600)}.hover\:text-teal-600\/75:hover{color:#009588bf}@supports (color:color-mix(in lab, red, red)){.hover\:text-teal-600\/75:hover{color:color-mix(in oklab, var(--color-teal-600) 75%, transparent)}}.hover\:text-teal-700\/75:hover{color:#00776ebf}@supports (color:color-mix(in lab, red, red)){.hover\:text-teal-700\/75:hover{color:color-mix(in oklab, var(--color-teal-700) 75%, transparent)}}.hover\:text-white:hover{color:var(--color-white)}.hover\:text-yellow-500:hover{color:var(--color-yellow-500)}.hover\:underline:hover{text-decoration-line:underline}.hover\:opacity-75:hover{opacity:.75}.hover\:opacity-90:hover{opacity:.9}.hover\:shadow-\[-1px_-1px_0_0\]:hover{--tw-shadow:-1px -1px 0 0 var(--tw-shadow-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-lg:hover{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-none:hover{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:shadow-xl:hover{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:ring-1:hover{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.hover\:ring-gray-400:hover{--tw-ring-color:var(--color-gray-400)}.hover\:ring-indigo-600:hover{--tw-ring-color:var(--color-indigo-600)}.hover\:ring-indigo-700:hover{--tw-ring-color:var(--color-indigo-700)}.hover\:grayscale-0:hover{--tw-grayscale:grayscale(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\:after\:h-full:hover:after{content:var(--tw-content);height:100%}}.focus\:relative:focus{position:relative}.focus\:z-10:focus{z-index:10}.focus\:translate-y-4:focus{--tw-translate-y:calc(var(--spacing) * 4);translate:var(--tw-translate-x) var(--tw-translate-y)}.focus\:border-indigo-500:focus{border-color:var(--color-indigo-500)}.focus\:border-transparent:focus{border-color:#0000}.focus\:border-white:focus{border-color:var(--color-white)}.focus\:bg-yellow-100:focus{background-color:var(--color-yellow-100)}.focus\:bg-yellow-300:focus{background-color:var(--color-yellow-300)}.focus\:bg-yellow-400:focus{background-color:var(--color-yellow-400)}.focus\:ring-0:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-black:focus{--tw-ring-color:var(--color-black)}.focus\:ring-blue-500:focus{--tw-ring-color:var(--color-blue-500)}.focus\:ring-indigo-500:focus{--tw-ring-color:var(--color-indigo-500)}.focus\:ring-transparent:focus{--tw-ring-color:transparent}.focus\:ring-yellow-300:focus{--tw-ring-color:var(--color-yellow-300)}.focus\:ring-yellow-400:focus{--tw-ring-color:var(--color-yellow-400)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:ring-offset-white:focus{--tw-ring-offset-color:var(--color-white)}.focus\:outline-hidden:focus{--tw-outline-style:none;outline-style:none}@media (forced-colors:active){.focus\:outline-hidden:focus{outline-offset:2px;outline:2px solid #0000}}.focus\:outline-0:focus{outline-style:var(--tw-outline-style);outline-width:0}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-blue-600:active{background-color:var(--color-blue-600)}.active\:text-blue-600:active{color:var(--color-blue-600)}.disabled\:pointer-events-auto:disabled{pointer-events:auto}.disabled\:opacity-50:disabled{opacity:.5}.has-checked\:border-blue-600:has(:checked){border-color:var(--color-blue-600)}.has-checked\:bg-blue-500:has(:checked){background-color:var(--color-blue-500)}.has-checked\:bg-green-500:has(:checked){background-color:var(--color-green-500)}.has-checked\:ring-1:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\:ring-2:has(:checked){--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.has-checked\:ring-amber-500:has(:checked){--tw-ring-color:var(--color-amber-500)}.has-checked\:ring-black:has(:checked){--tw-ring-color:var(--color-black)}.has-checked\:ring-blue-500:has(:checked){--tw-ring-color:var(--color-blue-500)}.has-checked\:ring-blue-600:has(:checked){--tw-ring-color:var(--color-blue-600)}.has-checked\:ring-red-500:has(:checked){--tw-ring-color:var(--color-red-500)}.has-checked\:ring-offset-2:has(:checked){--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}@media (min-width:40rem){.sm\:end-6{inset-inline-end:calc(var(--spacing) * 6)}.sm\:top-6{top:calc(var(--spacing) * 6)}.sm\:order-first{order:-9999}.sm\:order-last{order:9999}.sm\:col-span-1{grid-column:span 1/span 1}.sm\:col-span-2{grid-column:span 2/span 2}.sm\:mt-0{margin-top:calc(var(--spacing) * 0)}.sm\:mt-4{margin-top:calc(var(--spacing) * 4)}.sm\:mt-6{margin-top:calc(var(--spacing) * 6)}.sm\:mt-8{margin-top:calc(var(--spacing) * 8)}.sm\:mt-48{margin-top:calc(var(--spacing) * 48)}.sm\:block{display:block}.sm\:flex{display:flex}.sm\:grid{display:grid}.sm\:hidden{display:none}.sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.sm\:size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.sm\:size-18{width:calc(var(--spacing) * 18);height:calc(var(--spacing) * 18)}.sm\:size-20{width:calc(var(--spacing) * 20);height:calc(var(--spacing) * 20)}.sm\:h-56{height:calc(var(--spacing) * 56)}.sm\:h-64{height:calc(var(--spacing) * 64)}.sm\:h-72{height:calc(var(--spacing) * 72)}.sm\:h-80{height:calc(var(--spacing) * 80)}.sm\:h-112\.5{height:calc(var(--spacing) * 112.5)}.sm\:h-\[calc\(100\%-2rem\)\]{height:calc(100% - 2rem)}.sm\:h-full{height:100%}.sm\:h-px{height:1px}.sm\:w-8{width:calc(var(--spacing) * 8)}.sm\:w-auto{width:auto}.sm\:max-w-xs{max-width:var(--container-xs)}.sm\:flex-1{flex:1}.sm\:shrink-0{flex-shrink:0}.sm\:basis-56{flex-basis:calc(var(--spacing) * 56)}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:flex-row{flex-direction:row}.sm\:place-content-center{place-content:center}.sm\:items-center{align-items:center}.sm\:items-end{align-items:flex-end}.sm\:items-stretch{align-items:stretch}.sm\:justify-between{justify-content:space-between}.sm\:justify-center{justify-content:center}.sm\:justify-end{justify-content:flex-end}.sm\:justify-start{justify-content:flex-start}.sm\:gap-1\.5{gap:calc(var(--spacing) * 1.5)}.sm\:gap-2{gap:calc(var(--spacing) * 2)}.sm\:gap-4{gap:calc(var(--spacing) * 4)}.sm\:gap-6{gap:calc(var(--spacing) * 6)}.sm\:gap-8{gap:calc(var(--spacing) * 8)}:where(.sm\:divide-x>:not(:last-child)){--tw-divide-x-reverse:0;border-inline-style:var(--tw-border-style);border-inline-start-width:calc(1px * var(--tw-divide-x-reverse));border-inline-end-width:calc(1px * calc(1 - var(--tw-divide-x-reverse)))}:where(.sm\:divide-y-0>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(0px * var(--tw-divide-y-reverse));border-bottom-width:calc(0px * calc(1 - var(--tw-divide-y-reverse)))}.sm\:self-end{align-self:flex-end}.sm\:rounded-full{border-radius:3.40282e38px}.sm\:rounded-ss-\[30px\]{border-start-start-radius:30px}.sm\:border-2{border-style:var(--tw-border-style);border-width:2px}.sm\:border-indigo-500{border-color:var(--color-indigo-500)}.sm\:border-l-transparent{border-left-color:#0000}.sm\:bg-yellow-500{background-color:var(--color-yellow-500)}.sm\:p-3{padding:calc(var(--spacing) * 3)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}.sm\:px-8{padding-inline:calc(var(--spacing) * 8)}.sm\:py-12{padding-block:calc(var(--spacing) * 12)}.sm\:py-24{padding-block:calc(var(--spacing) * 24)}.sm\:pt-48{padding-top:calc(var(--spacing) * 48)}.sm\:pb-4{padding-bottom:calc(var(--spacing) * 4)}.sm\:text-left{text-align:left}.sm\:text-right{text-align:right}.sm\:text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.sm\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.sm\:text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.sm\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.sm\:text-lg\/relaxed{font-size:var(--text-lg);line-height:var(--leading-relaxed)}.sm\:text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.sm\:text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.sm\:text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.sm\:text-gray-500{color:var(--color-gray-500)}}@media (min-width:48rem){.md\:relative{position:relative}.md\:col-span-1{grid-column:span 1/span 1}.md\:col-span-2{grid-column:span 2/span 2}.md\:col-span-3{grid-column:span 3/span 3}.md\:mt-4{margin-top:calc(var(--spacing) * 4)}.md\:mt-8{margin-top:calc(var(--spacing) * 8)}.md\:block{display:block}.md\:flex{display:flex}.md\:grid{display:grid}.md\:hidden{display:none}.md\:h-\[calc\(100\%-4rem\)\]{height:calc(100% - 4rem)}.md\:h-full{height:100%}.md\:max-w-none{max-width:none}.md\:grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:items-center{align-items:center}.md\:justify-between{justify-content:space-between}.md\:gap-4{gap:calc(var(--spacing) * 4)}.md\:gap-8{gap:calc(var(--spacing) * 8)}.md\:gap-12{gap:calc(var(--spacing) * 12)}:where(.md\:space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 8) * calc(1 - var(--tw-space-y-reverse)))}.md\:rounded-ss-\[60px\]{border-start-start-radius:60px}.md\:p-12{padding:calc(var(--spacing) * 12)}.md\:py-4{padding-block:calc(var(--spacing) * 4)}.md\:text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.md\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}}@media (min-width:64rem){.lg\:end-8{inset-inline-end:calc(var(--spacing) * 8)}.lg\:top-8{top:calc(var(--spacing) * 8)}.lg\:order-last{order:9999}.lg\:col-span-2{grid-column:span 2/span 2}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:col-span-5{grid-column:span 5/span 5}.lg\:mt-0{margin-top:calc(var(--spacing) * 0)}.lg\:mt-8{margin-top:calc(var(--spacing) * 8)}.lg\:mt-24{margin-top:calc(var(--spacing) * 24)}.lg\:mt-64{margin-top:calc(var(--spacing) * 64)}.lg\:block{display:block}.lg\:flex{display:flex}.lg\:grid{display:grid}.lg\:hidden{display:none}.lg\:h-72{height:calc(var(--spacing) * 72)}.lg\:h-96{height:calc(var(--spacing) * 96)}.lg\:h-full{height:100%}.lg\:h-screen{height:100vh}.lg\:max-w-none{max-width:none}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:grid-cols-\[1fr_120px\]{grid-template-columns:1fr 120px}.lg\:grid-cols-\[120px_1fr\]{grid-template-columns:120px 1fr}.lg\:place-content-center{place-content:center}.lg\:items-end{align-items:flex-end}.lg\:items-start{align-items:flex-start}.lg\:justify-between{justify-content:space-between}.lg\:justify-end{justify-content:flex-end}.lg\:justify-start{justify-content:flex-start}.lg\:gap-6{gap:calc(var(--spacing) * 6)}.lg\:gap-8{gap:calc(var(--spacing) * 8)}.lg\:gap-12{gap:calc(var(--spacing) * 12)}.lg\:gap-32{gap:calc(var(--spacing) * 32)}:where(.lg\:space-y-16>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 16) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 16) * calc(1 - var(--tw-space-y-reverse)))}.lg\:gap-y-16{row-gap:calc(var(--spacing) * 16)}.lg\:border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.lg\:border-b-0{border-bottom-style:var(--tw-border-style);border-bottom-width:0}.lg\:p-4{padding:calc(var(--spacing) * 4)}.lg\:p-8{padding:calc(var(--spacing) * 8)}.lg\:p-12{padding:calc(var(--spacing) * 12)}.lg\:px-8{padding-inline:calc(var(--spacing) * 8)}.lg\:px-16{padding-inline:calc(var(--spacing) * 16)}.lg\:py-16{padding-block:calc(var(--spacing) * 16)}.lg\:py-24{padding-block:calc(var(--spacing) * 24)}.lg\:py-32{padding-block:calc(var(--spacing) * 32)}.lg\:ps-16{padding-inline-start:calc(var(--spacing) * 16)}.lg\:pe-16{padding-inline-end:calc(var(--spacing) * 16)}.lg\:pt-16{padding-top:calc(var(--spacing) * 16)}.lg\:pt-24{padding-top:calc(var(--spacing) * 24)}.lg\:pt-64{padding-top:calc(var(--spacing) * 64)}.lg\:pb-8{padding-bottom:calc(var(--spacing) * 8)}.lg\:text-left{text-align:left}.lg\:text-right{text-align:right}.lg\:text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}}.ltr\:border-s-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-inline-start-style:var(--tw-border-style);border-inline-start-width:0}.ltr\:border-b-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *){border-bottom-style:var(--tw-border-style);border-bottom-width:0}.ltr\:bg-gray-50:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-50)}.ltr\:bg-white:where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-white)}.ltr\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}.ltr\:group-open\:start-0:where(:dir(ltr),[dir=ltr],[dir=ltr] *):is(:where(.group):is([open],:popover-open,:open) *){inset-inline-start:calc(var(--spacing) * 0)}@media (min-width:40rem){.ltr\:sm\:justify-start:where(:dir(ltr),[dir=ltr],[dir=ltr] *){justify-content:flex-start}.ltr\:sm\:text-left:where(:dir(ltr),[dir=ltr],[dir=ltr] *){text-align:left}}.rtl\:rotate-180:where(:dir(rtl),[dir=rtl],[dir=rtl] *){rotate:180deg}.rtl\:border-e-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-inline-end-style:var(--tw-border-style);border-inline-end-width:0}.rtl\:border-t-0:where(:dir(rtl),[dir=rtl],[dir=rtl] *){border-top-style:var(--tw-border-style);border-top-width:0}.rtl\:bg-gray-50:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-50)}.rtl\:bg-white:where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-white)}.rtl\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}@media (min-width:40rem){.rtl\:sm\:justify-end:where(:dir(rtl),[dir=rtl],[dir=rtl] *){justify-content:flex-end}.rtl\:sm\:text-right:where(:dir(rtl),[dir=rtl],[dir=rtl] *){text-align:right}}:where(.dark\:divide-gray-600:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-600)}:where(.dark\:divide-gray-700:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-700)}:where(.dark\:divide-gray-800:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-800)}:where(.dark\:divide-gray-900:where(.dark,.dark *)>:not(:last-child)){border-color:var(--color-gray-900)}.dark\:border-amber-400:where(.dark,.dark *){border-color:var(--color-amber-400)}.dark\:border-blue-400:where(.dark,.dark *){border-color:var(--color-blue-400)}.dark\:border-blue-600:where(.dark,.dark *){border-color:var(--color-blue-600)}.dark\:border-gray-600:where(.dark,.dark *){border-color:var(--color-gray-600)}.dark\:border-gray-700:where(.dark,.dark *){border-color:var(--color-gray-700)}.dark\:border-gray-800:where(.dark,.dark *){border-color:var(--color-gray-800)}.dark\:border-green-400:where(.dark,.dark *){border-color:var(--color-green-400)}.dark\:border-red-400:where(.dark,.dark *){border-color:var(--color-red-400)}.dark\:border-white:where(.dark,.dark *){border-color:var(--color-white)}.dark\:border-white\/10:where(.dark,.dark *){border-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:border-white\/10:where(.dark,.dark *){border-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:bg-amber-700:where(.dark,.dark *){background-color:var(--color-amber-700)}.dark\:bg-amber-800:where(.dark,.dark *){background-color:var(--color-amber-800)}.dark\:bg-blue-500\/20:where(.dark,.dark *){background-color:#3080ff33}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-500\/20:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-500) 20%, transparent)}}.dark\:bg-blue-700:where(.dark,.dark *){background-color:var(--color-blue-700)}.dark\:bg-blue-700\/25:where(.dark,.dark *){background-color:#1447e640}@supports (color:color-mix(in lab, red, red)){.dark\:bg-blue-700\/25:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-blue-700) 25%, transparent)}}.dark\:bg-blue-800:where(.dark,.dark *){background-color:var(--color-blue-800)}.dark\:bg-emerald-700:where(.dark,.dark *){background-color:var(--color-emerald-700)}.dark\:bg-gray-400:where(.dark,.dark *){background-color:var(--color-gray-400)}.dark\:bg-gray-600:where(.dark,.dark *){background-color:var(--color-gray-600)}.dark\:bg-gray-700:where(.dark,.dark *){background-color:var(--color-gray-700)}.dark\:bg-gray-800:where(.dark,.dark *){background-color:var(--color-gray-800)}.dark\:bg-gray-900:where(.dark,.dark *){background-color:var(--color-gray-900)}.dark\:bg-green-700:where(.dark,.dark *){background-color:var(--color-green-700)}.dark\:bg-green-800:where(.dark,.dark *){background-color:var(--color-green-800)}.dark\:bg-indigo-300:where(.dark,.dark *){background-color:var(--color-indigo-300)}.dark\:bg-purple-600:where(.dark,.dark *){background-color:var(--color-purple-600)}.dark\:bg-purple-700:where(.dark,.dark *){background-color:var(--color-purple-700)}.dark\:bg-purple-800:where(.dark,.dark *){background-color:var(--color-purple-800)}.dark\:bg-red-700:where(.dark,.dark *){background-color:var(--color-red-700)}.dark\:bg-red-800:where(.dark,.dark *){background-color:var(--color-red-800)}.dark\:bg-white:where(.dark,.dark *){background-color:var(--color-white)}.dark\:bg-white\/10:where(.dark,.dark *){background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.dark\:bg-white\/10:where(.dark,.dark *){background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.dark\:to-gray-600:where(.dark,.dark *){--tw-gradient-to:var(--color-gray-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position))}.dark\:text-amber-100:where(.dark,.dark *){color:var(--color-amber-100)}.dark\:text-amber-200:where(.dark,.dark *){color:var(--color-amber-200)}.dark\:text-blue-50:where(.dark,.dark *){color:var(--color-blue-50)}.dark\:text-blue-100:where(.dark,.dark *){color:var(--color-blue-100)}.dark\:text-blue-200:where(.dark,.dark *){color:var(--color-blue-200)}.dark\:text-blue-400:where(.dark,.dark *){color:var(--color-blue-400)}.dark\:text-emerald-100:where(.dark,.dark *){color:var(--color-emerald-100)}.dark\:text-gray-200:where(.dark,.dark *){color:var(--color-gray-200)}.dark\:text-gray-300:where(.dark,.dark *){color:var(--color-gray-300)}.dark\:text-gray-400:where(.dark,.dark *){color:var(--color-gray-400)}.dark\:text-gray-500:where(.dark,.dark *){color:var(--color-gray-500)}.dark\:text-gray-900:where(.dark,.dark *){color:var(--color-gray-900)}.dark\:text-green-50:where(.dark,.dark *){color:var(--color-green-50)}.dark\:text-green-100:where(.dark,.dark *){color:var(--color-green-100)}.dark\:text-green-200:where(.dark,.dark *){color:var(--color-green-200)}.dark\:text-indigo-300:where(.dark,.dark *){color:var(--color-indigo-300)}.dark\:text-indigo-500:where(.dark,.dark *){color:var(--color-indigo-500)}.dark\:text-purple-100:where(.dark,.dark *){color:var(--color-purple-100)}.dark\:text-red-50:where(.dark,.dark *){color:var(--color-red-50)}.dark\:text-red-100:where(.dark,.dark *){color:var(--color-red-100)}.dark\:text-red-200:where(.dark,.dark *){color:var(--color-red-200)}.dark\:text-red-500:where(.dark,.dark *){color:var(--color-red-500)}.dark\:text-red-600:where(.dark,.dark *){color:var(--color-red-600)}.dark\:text-teal-300:where(.dark,.dark *){color:var(--color-teal-300)}.dark\:text-teal-500:where(.dark,.dark *){color:var(--color-teal-500)}.dark\:text-teal-600:where(.dark,.dark *){color:var(--color-teal-600)}.dark\:text-white:where(.dark,.dark *){color:var(--color-white)}.dark\:text-white\/75:where(.dark,.dark *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:text-white\/75:where(.dark,.dark *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}.dark\:shadow-gray-700\/25:where(.dark,.dark *){--tw-shadow-color:#36415340}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-gray-700\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-700) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\:shadow-gray-800\/25:where(.dark,.dark *){--tw-shadow-color:#1e293940}@supports (color:color-mix(in lab, red, red)){.dark\:shadow-gray-800\/25:where(.dark,.dark *){--tw-shadow-color:color-mix(in oklab, color-mix(in oklab, var(--color-gray-800) 25%, transparent) var(--tw-shadow-alpha), transparent)}}.dark\:ring-gray-900:where(.dark,.dark *){--tw-ring-color:var(--color-gray-900)}.dark\:ring-offset-gray-900:where(.dark,.dark *){--tw-ring-offset-color:var(--color-gray-900)}:is(.dark\:\*\:text-white:where(.dark,.dark *)>*){color:var(--color-white)}@media (hover:hover){.dark\:group-hover\:bg-gray-700:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-700)}.dark\:group-hover\:bg-gray-900:where(.dark,.dark *):is(:where(.group):hover *){background-color:var(--color-gray-900)}.dark\:group-hover\:text-gray-100:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-100)}.dark\:group-hover\:text-gray-300:where(.dark,.dark *):is(:where(.group):hover *){color:var(--color-gray-300)}.dark\:group-hover\:text-white\/75:where(.dark,.dark *):is(:where(.group):hover *){color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:group-hover\:text-white\/75:where(.dark,.dark *):is(:where(.group):hover *){color:color-mix(in oklab, var(--color-white) 75%, transparent)}}}.dark\:peer-checked\:bg-gray-900:where(.dark,.dark *):is(:where(.peer):checked~*){background-color:var(--color-gray-900)}.dark\:before\:bg-gray-700:where(.dark,.dark *):before,.dark\:after\:bg-gray-700:where(.dark,.dark *):after{content:var(--tw-content);background-color:var(--color-gray-700)}:is(.dark\:\*\:first\:bg-gray-900:where(.dark,.dark *)>*):first-child{background-color:var(--color-gray-900)}:is(.dark\:\*\:even\:bg-gray-800:where(.dark,.dark *)>*):nth-child(2n){background-color:var(--color-gray-800)}.dark\:checked\:bg-blue-600:where(.dark,.dark *):checked{background-color:var(--color-blue-600)}@media (hover:hover){.dark\:hover\:border-gray-700:where(.dark,.dark *):hover{border-color:var(--color-gray-700)}.dark\:hover\:bg-gray-600:where(.dark,.dark *):hover{background-color:var(--color-gray-600)}.dark\:hover\:bg-gray-700:where(.dark,.dark *):hover{background-color:var(--color-gray-700)}.dark\:hover\:bg-gray-800:where(.dark,.dark *):hover{background-color:var(--color-gray-800)}.dark\:hover\:bg-gray-800\/50:where(.dark,.dark *):hover{background-color:#1e293980}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-gray-800\/50:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-gray-800) 50%, transparent)}}.dark\:hover\:bg-indigo-700:where(.dark,.dark *):hover{background-color:var(--color-indigo-700)}.dark\:hover\:bg-purple-900:where(.dark,.dark *):hover{background-color:var(--color-purple-900)}.dark\:hover\:bg-red-600\/10:where(.dark,.dark *):hover{background-color:#e400141a}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-red-600\/10:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-600) 10%, transparent)}}.dark\:hover\:bg-red-700\/20:where(.dark,.dark *):hover{background-color:#bf000f33}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:bg-red-700\/20:where(.dark,.dark *):hover{background-color:color-mix(in oklab, var(--color-red-700) 20%, transparent)}}.dark\:hover\:bg-teal-500:where(.dark,.dark *):hover{background-color:var(--color-teal-500)}.dark\:hover\:text-blue-500:where(.dark,.dark *):hover{color:var(--color-blue-500)}.dark\:hover\:text-gray-200:where(.dark,.dark *):hover{color:var(--color-gray-200)}.dark\:hover\:text-gray-300:where(.dark,.dark *):hover{color:var(--color-gray-300)}.dark\:hover\:text-teal-500\/75:where(.dark,.dark *):hover{color:#00baa7bf}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:text-teal-500\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-teal-500) 75%, transparent)}}.dark\:hover\:text-white:where(.dark,.dark *):hover{color:var(--color-white)}.dark\:hover\:text-white\/75:where(.dark,.dark *):hover{color:#ffffffbf}@supports (color:color-mix(in lab, red, red)){.dark\:hover\:text-white\/75:where(.dark,.dark *):hover{color:color-mix(in oklab, var(--color-white) 75%, transparent)}}}.dark\:focus\:ring-offset-gray-900:where(.dark,.dark *):focus{--tw-ring-offset-color:var(--color-gray-900)}.dark\:has-checked\:bg-blue-600:where(.dark,.dark *):has(:checked){background-color:var(--color-blue-600)}.dark\:has-checked\:bg-green-600:where(.dark,.dark *):has(:checked){background-color:var(--color-green-600)}.dark\:ltr\:bg-gray-800:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-800)}.dark\:ltr\:bg-gray-900:where(.dark,.dark *):where(:dir(ltr),[dir=ltr],[dir=ltr] *){background-color:var(--color-gray-900)}.dark\:rtl\:bg-gray-800:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-800)}.dark\:rtl\:bg-gray-900:where(.dark,.dark *):where(:dir(rtl),[dir=rtl],[dir=rtl] *){background-color:var(--color-gray-900)}.\[\&_summary\:\:-webkit-details-marker\]\:hidden summary::-webkit-details-marker{display:none}.\[\&\:\:-webkit-calendar-picker-indicator\]\:opacity-0::-webkit-calendar-picker-indicator{opacity:0}.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker{display:none}.\[\&\:\:-webkit-inner-spin-button\]\:m-0::-webkit-inner-spin-button{margin:calc(var(--spacing) * 0)}.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button{appearance:none}.\[\&\:\:-webkit-outer-spin-button\]\:m-0::-webkit-outer-spin-button{margin:calc(var(--spacing) * 0)}.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:size-7::-webkit-slider-thumb{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.\[\&\:\:-webkit-slider-thumb\]\:cursor-pointer::-webkit-slider-thumb{cursor:pointer}.\[\&\:\:-webkit-slider-thumb\]\:appearance-none::-webkit-slider-thumb{appearance:none}.\[\&\:\:-webkit-slider-thumb\]\:rounded-full::-webkit-slider-thumb{border-radius:3.40282e38px}.\[\&\:\:-webkit-slider-thumb\]\:border-\[6px\]::-webkit-slider-thumb{border-style:var(--tw-border-style);border-width:6px}.\[\&\:\:-webkit-slider-thumb\]\:border-gray-500::-webkit-slider-thumb{border-color:var(--color-gray-500)}.\[\&\:\:-webkit-slider-thumb\]\:bg-gray-200::-webkit-slider-thumb{background-color:var(--color-gray-200)}@media (hover:hover){.hover\:\[\&\~label\]\:text-yellow-500:hover~label{color:var(--color-yellow-500)}}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0%}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(360deg)}}@keyframes ping{75%,to{opacity:0;transform:scale(2)}}@keyframes pulse{50%{opacity:.5}}@keyframes bounce{0%,to{animation-timing-function:cubic-bezier(.8,0,1,1);transform:translateY(-25%)}50%{animation-timing-function:cubic-bezier(0,0,.2,1);transform:none}}
================================================
FILE: public/component.js
================================================
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('a, input[type="file"]').forEach((iframeLink) => {
iframeLink.addEventListener('click', (e) => e.preventDefault())
iframeLink.addEventListener('keydown', (e) => e.key !== 'Tab' && e.preventDefault())
})
document.querySelectorAll('form').forEach((iframeForm) => {
iframeForm.addEventListener('submit', (e) => e.preventDefault())
})
})
================================================
FILE: public/examples/application/accordions/1-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-2">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span>What are the basic features?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span>How do I get started?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span>What support options are available?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/1.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-2">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>What are the basic features?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>How do I get started?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>What support options are available?</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/2-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-2">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
Getting Started
</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
/>
</svg>
Configuration
</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
/>
</svg>
Troubleshooting
</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/2.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-2">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
Getting Started
</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 0 1 1.37.49l1.296 2.247a1.125 1.125 0 0 1-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 0 1 0 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 0 1-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 0 1-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 0 1-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 0 1-1.369-.49l-1.297-2.247a1.125 1.125 0 0 1 .26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 0 1 0-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 0 1-.26-1.43l1.297-2.247a1.125 1.125 0 0 1 1.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28Z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
/>
</svg>
Configuration
</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span class="flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.625 9.75a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332 48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
/>
</svg>
Troubleshooting
</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/3-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="-mx-4 -my-2 space-y-0 divide-y divide-gray-200 dark:divide-gray-700">
<details class="group px-4 py-3 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-200"
>
<span>Account Settings</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="py-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group px-4 py-3 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-200"
>
<span>Privacy & Permissions</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="py-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group px-4 py-3 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700 dark:text-white dark:hover:text-gray-200"
>
<span>Notifications & Alerts</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="py-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/3.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="-mx-4 -my-2 space-y-0 divide-y divide-gray-200">
<details class="group px-4 py-3 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700"
>
<span>Account Settings</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="py-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group px-4 py-3 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700"
>
<span>Privacy & Permissions</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="py-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group px-4 py-3 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 font-medium text-gray-900 hover:text-gray-700"
>
<span>Notifications & Alerts</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="py-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/4-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-2">
<details class="group space-y-2 [&_summary::-webkit-details-marker]:hidden" open>
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span>Team Settings</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="space-y-2 pl-4">
<details class="group/members [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
>
<span>Members</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open/members:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
officia. Quos, temporibus perspiciatis!
</p>
</div>
</details>
<details class="group/roles [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
>
<span>Roles & Permissions</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open/roles:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
officia. Quos, temporibus perspiciatis!
</p>
</div>
</details>
</div>
</details>
<details class="group space-y-2 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-white dark:hover:bg-gray-800"
>
<span>Integration Settings</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="space-y-2 pl-4">
<details class="group/keys [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700"
>
<span>API Keys</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open/keys:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
officia. Quos, temporibus perspiciatis!
</p>
</div>
</details>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/4.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-2">
<details class="group space-y-2 [&_summary::-webkit-details-marker]:hidden" open>
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>Team Settings</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="space-y-2 pl-4">
<details class="group/members [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<span>Members</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open/members:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
officia. Quos, temporibus perspiciatis!
</p>
</div>
</details>
<details class="group/roles [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<span>Roles & Permissions</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open/roles:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
officia. Quos, temporibus perspiciatis!
</p>
</div>
</details>
</div>
</details>
<details class="group space-y-2 [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-white px-4 py-3 font-medium text-gray-900 hover:bg-gray-50"
>
<span>Integration Settings</span>
<svg
class="size-5 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="space-y-2 pl-4">
<details class="group/keys [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<span>API Keys</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open/keys:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-4">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae
hic dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut
minus iste odio consectetur molestias iusto cupiditate ullam laborum veniam quos
officia. Quos, temporibus perspiciatis!
</p>
</div>
</details>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/5-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-1">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800"
>
<span>Storage & Limits</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-3">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800"
>
<span>Active Sessions</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-3">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-gray-800"
>
<span>Billing History</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-3">
<p class="text-gray-700 dark:text-gray-200">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/accordions/5.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="mx-auto max-w-3xl p-6">
<div class="space-y-1">
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<span>Storage & Limits</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-3">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<span>Active Sessions</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-3">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
<details class="group [&_summary::-webkit-details-marker]:hidden">
<summary
class="flex cursor-pointer items-center justify-between gap-4 rounded px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100"
>
<span>Billing History</span>
<svg
class="size-4 shrink-0 transition-transform duration-300 group-open:-rotate-180"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 9l-7 7-7-7"
/>
</svg>
</summary>
<div class="p-3">
<p class="text-gray-700">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
temporibus perspiciatis!
</p>
</div>
</details>
</div>
</body>
</html>
================================================
FILE: public/examples/application/badges/1-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:bg-purple-700 dark:text-purple-100"
>
Live
</span>
<span
class="rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700 dark:text-purple-100"
>
Live
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/1.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="rounded-full bg-purple-100 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700"
>
Live
</span>
<span
class="rounded-full border border-purple-500 px-2.5 py-0.5 text-sm whitespace-nowrap text-purple-700"
>
Live
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/2-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Euro</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Euro</p>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/2.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Euro</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Euro</p>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/3-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700 dark:bg-purple-700 dark:text-purple-100"
>
<p class="text-sm whitespace-nowrap">Euro</p>
<button
class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900"
>
<span class="sr-only">Remove badge</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700 dark:text-purple-100"
>
<p class="text-sm whitespace-nowrap">Euro</p>
<button
class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300 dark:bg-purple-800 dark:text-purple-100 dark:hover:bg-purple-900"
>
<span class="sr-only">Remove badge</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/3.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-0.5 text-purple-700"
>
<p class="text-sm whitespace-nowrap">Euro</p>
<button
class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300"
>
<span class="sr-only">Remove badge</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-0.5 text-purple-700"
>
<p class="text-sm whitespace-nowrap">Euro</p>
<button
class="ms-1.5 -me-1 inline-block rounded-full bg-purple-200 p-0.5 text-purple-700 transition hover:bg-purple-300"
>
<span class="sr-only">Remove badge</span>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3"
>
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/4-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700 dark:bg-purple-700 dark:text-purple-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700 dark:text-purple-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/4.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-purple-100 px-2.5 py-1 text-purple-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-purple-500 px-2.5 py-1 text-purple-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M14.25 7.756a4.5 4.5 0 100 8.488M7.5 10.5h5.25m-5.25 3h5.25M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/5-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-emerald-700 dark:bg-emerald-700 dark:text-emerald-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Paid</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-emerald-500 px-2.5 py-0.5 text-emerald-700 dark:text-emerald-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Paid</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full bg-amber-100 px-2.5 py-0.5 text-amber-700 dark:bg-amber-700 dark:text-amber-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Refunded</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-amber-500 px-2.5 py-0.5 text-amber-700 dark:text-amber-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Refunded</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700 dark:bg-red-700 dark:text-red-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Failed</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-red-500 px-2.5 py-0.5 text-red-700 dark:text-red-100"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Failed</p>
</span>
</body>
</html>
================================================
FILE: public/examples/application/badges/5.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex flex-wrap justify-center gap-4 p-6">
<span
class="inline-flex items-center justify-center rounded-full bg-emerald-100 px-2.5 py-0.5 text-emerald-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Paid</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-emerald-500 px-2.5 py-0.5 text-emerald-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Paid</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full bg-amber-100 px-2.5 py-0.5 text-amber-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Refunded</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-amber-500 px-2.5 py-0.5 text-amber-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M8.25 9.75h4.875a2.625 2.625 0 010 5.25H12M8.25 9.75L10.5 7.5M8.25 9.75L10.5 12m9-7.243V21.75l-3.75-1.5-3.75 1.5-3.75-1.5-3.75 1.5V4.757c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0c1.1.128 1.907 1.077 1.907 2.185z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Refunded</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full bg-red-100 px-2.5 py-0.5 text-red-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Failed</p>
</span>
<span
class="inline-flex items-center justify-center rounded-full border border-red-500 px-2.5 py-0.5 text-red-700"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="-ms-1 me-1.5 size-4"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
/>
</svg>
<p class="text-sm whitespace-nowrap">Failed</p>
</span>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/1-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Home
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Category
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Product
</a>
</li>
</ol>
</nav>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/1.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700">
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Home </a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
</li>
</ol>
</nav>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/2-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
<li>
<a
href="#"
class="block transition-colors hover:text-gray-900 dark:hover:text-white"
aria-label="Home"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Category
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Product
</a>
</li>
</ol>
</nav>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/2.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700">
<li>
<a href="#" class="block transition-colors hover:text-gray-900" aria-label="Home">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
/>
</svg>
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
class="size-4"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd"
/>
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
</li>
</ol>
</nav>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/3-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Home
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Category
</a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900 dark:hover:text-white">
Product
</a>
</li>
</ol>
</nav>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/3.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700">
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Home </a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Category </a>
</li>
<li class="rtl:rotate-180">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-4"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m9 20.247 6-16.5" />
</svg>
</li>
<li>
<a href="#" class="block transition-colors hover:text-gray-900"> Product </a>
</li>
</ol>
</nav>
</body>
</html>
================================================
FILE: public/examples/application/breadcrumbs/4-dark.html
================================================
<!doctype html>
<html lang="en" class="dark font-sans antialiased">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/component.css" rel="stylesheet" />
<script src="/component.js" defer></script>
</head>
<body class="flex justify-center p-6">
<nav aria-label="Breadcrumb">
<ol class="flex items-center gap-1 text-sm text-gray-700 dark:text-gray-200">
<li>
<a
href="#"
class="block transition-colors hover:text-gray
gitextract_drkid_2t/ ├── .github/ │ └── copilot-instructions.md ├── .gitignore ├── .prettierignore ├── .prettierrc ├── .vscode/ │ ├── extensions.json │ └── settings.json ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── astro.config.js ├── eslint.config.js ├── package.json ├── pnpm-workspace.yaml ├── public/ │ ├── component.css │ ├── component.js │ ├── examples/ │ │ ├── application/ │ │ │ ├── accordions/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── badges/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── breadcrumbs/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── button-groups/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── checkboxes/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── details-list/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ └── 4.html │ │ │ ├── dividers/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ └── 6.html │ │ │ ├── dropdown/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── empty-states/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── file-uploaders/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ └── 2.html │ │ │ ├── filters/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ └── 2.html │ │ │ ├── grids/ │ │ │ │ ├── 1.html │ │ │ │ ├── 10.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7.html │ │ │ │ ├── 8.html │ │ │ │ └── 9.html │ │ │ ├── inputs/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ └── 4.html │ │ │ ├── loaders/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7-dark.html │ │ │ │ └── 7.html │ │ │ ├── media/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7.html │ │ │ │ └── 8.html │ │ │ ├── modals/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ └── 6.html │ │ │ ├── pagination/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── progress-bars/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ └── 4.html │ │ │ ├── quantity-inputs/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ └── 4.html │ │ │ ├── radio-groups/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ └── 3.html │ │ │ ├── range-inputs/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4.html │ │ │ │ └── 5.html │ │ │ ├── selects/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── side-menu/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ └── 3.html │ │ │ ├── skip-links/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ └── 3.html │ │ │ ├── stats/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ └── 6.html │ │ │ ├── steps/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── tables/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── tabs/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── textareas/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── timelines/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── toasts/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ └── 6.html │ │ │ ├── toggles/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ └── 4.html │ │ │ └── vertical-menu/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ ├── 3.html │ │ │ ├── 4-dark.html │ │ │ ├── 4.html │ │ │ ├── 5-dark.html │ │ │ ├── 5.html │ │ │ ├── 6-dark.html │ │ │ ├── 6.html │ │ │ ├── 7-dark.html │ │ │ ├── 7.html │ │ │ ├── 8-dark.html │ │ │ └── 8.html │ │ ├── marketing/ │ │ │ ├── announcements/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ └── 6.html │ │ │ ├── banners/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── blog-cards/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ ├── 6.html │ │ │ │ └── 7.html │ │ │ ├── buttons/ │ │ │ │ ├── 1.html │ │ │ │ ├── 10.html │ │ │ │ ├── 11.html │ │ │ │ ├── 12.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7.html │ │ │ │ ├── 8.html │ │ │ │ └── 9.html │ │ │ ├── cards/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7.html │ │ │ │ ├── 8.html │ │ │ │ └── 9.html │ │ │ ├── carts/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ └── 3.html │ │ │ ├── contact-forms/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── ctas/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ └── 4.html │ │ │ ├── empty-content/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ └── 5.html │ │ │ ├── faqs/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── feature-grids/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ └── 4.html │ │ │ ├── footers/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 10-dark.html │ │ │ │ ├── 10.html │ │ │ │ ├── 11-dark.html │ │ │ │ ├── 11.html │ │ │ │ ├── 12-dark.html │ │ │ │ ├── 12.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5-dark.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6-dark.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7-dark.html │ │ │ │ ├── 7.html │ │ │ │ ├── 8-dark.html │ │ │ │ ├── 8.html │ │ │ │ ├── 9-dark.html │ │ │ │ └── 9.html │ │ │ ├── headers/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4-dark.html │ │ │ │ └── 4.html │ │ │ ├── logo-clouds/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ └── 4.html │ │ │ ├── newsletter-signup/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ └── 2.html │ │ │ ├── polls/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ ├── pricing/ │ │ │ │ ├── 1.html │ │ │ │ └── 2.html │ │ │ ├── product-cards/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ ├── 4.html │ │ │ │ ├── 5.html │ │ │ │ ├── 6.html │ │ │ │ ├── 7.html │ │ │ │ └── 8.html │ │ │ ├── product-collections/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ └── 4.html │ │ │ ├── sections/ │ │ │ │ ├── 1.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3.html │ │ │ │ └── 4.html │ │ │ ├── stats/ │ │ │ │ ├── 1-dark.html │ │ │ │ ├── 1.html │ │ │ │ ├── 2-dark.html │ │ │ │ ├── 2.html │ │ │ │ ├── 3-dark.html │ │ │ │ └── 3.html │ │ │ └── team-sections/ │ │ │ ├── 1-dark.html │ │ │ ├── 1.html │ │ │ ├── 2-dark.html │ │ │ ├── 2.html │ │ │ ├── 3-dark.html │ │ │ └── 3.html │ │ └── neobrutalism/ │ │ ├── accordions/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── alerts/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── badges/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── buttons/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ ├── 4.html │ │ │ └── 5.html │ │ ├── cards/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ └── 4.html │ │ ├── checkboxes/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── inputs/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── progress-bars/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── selects/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ └── 3.html │ │ ├── tabs/ │ │ │ ├── 1.html │ │ │ ├── 2.html │ │ │ ├── 3.html │ │ │ └── 4.html │ │ └── textareas/ │ │ ├── 1.html │ │ ├── 2.html │ │ └── 3.html │ ├── llms.txt │ └── robots.txt ├── src/ │ ├── components/ │ │ ├── BaseHead.astro │ │ ├── BaseHero.astro │ │ ├── BlogCard.astro │ │ ├── CollectionFeature.astro │ │ ├── ComponentCard.astro │ │ ├── ComponentPreview.astro │ │ ├── DropdownMenu.astro │ │ ├── DropdownToggle.astro │ │ ├── DropdownWrapper.astro │ │ ├── FormattedDate.astro │ │ ├── HeaderLink.astro │ │ ├── PreviewBreakpoints.astro │ │ ├── PreviewCopy.astro │ │ ├── PreviewDetails.astro │ │ ├── PreviewDirection.astro │ │ ├── PreviewRefs.astro │ │ ├── PreviewView.astro │ │ ├── PreviewWrapper.astro │ │ ├── RelatedComponents.astro │ │ ├── SearchInput.astro │ │ ├── SearchResults.astro │ │ ├── SearchWrapper.astro │ │ ├── SiteFooter.astro │ │ └── SiteHeader.astro │ ├── consts.ts │ ├── content/ │ │ ├── blog/ │ │ │ ├── acknowledgements.mdx │ │ │ ├── animated-border-gradient-with-tailwindcss.mdx │ │ │ ├── animation-duration-delay-with-tailwindcss.mdx │ │ │ ├── faqs.mdx │ │ │ ├── highlight-hover-effect-with-tailwindcss.mdx │ │ │ ├── how-to-clean-up-tailwindcss-code.mdx │ │ │ ├── how-to-contribute.mdx │ │ │ ├── how-to-write-better-containers-in-tailwindcss.mdx │ │ │ ├── how-to-write-better-tailwindcss.mdx │ │ │ ├── move-to-tailwindcss-without-breaking-changes.mdx │ │ │ └── remove-number-input-spinners-with-tailwindcss.mdx │ │ └── collection/ │ │ ├── application/ │ │ │ ├── accordions.mdx │ │ │ ├── badges.mdx │ │ │ ├── breadcrumbs.mdx │ │ │ ├── button-groups.mdx │ │ │ ├── checkboxes.mdx │ │ │ ├── details-list.mdx │ │ │ ├── dividers.mdx │ │ │ ├── dropdown.mdx │ │ │ ├── empty-states.mdx │ │ │ ├── file-uploaders.mdx │ │ │ ├── filters.mdx │ │ │ ├── grids.mdx │ │ │ ├── inputs.mdx │ │ │ ├── loaders.mdx │ │ │ ├── media.mdx │ │ │ ├── modals.mdx │ │ │ ├── pagination.mdx │ │ │ ├── progress-bars.mdx │ │ │ ├── quantity-inputs.mdx │ │ │ ├── radio-groups.mdx │ │ │ ├── range-inputs.mdx │ │ │ ├── selects.mdx │ │ │ ├── side-menu.mdx │ │ │ ├── skip-links.mdx │ │ │ ├── stats.mdx │ │ │ ├── steps.mdx │ │ │ ├── tables.mdx │ │ │ ├── tabs.mdx │ │ │ ├── textareas.mdx │ │ │ ├── timelines.mdx │ │ │ ├── toasts.mdx │ │ │ ├── toggles.mdx │ │ │ └── vertical-menu.mdx │ │ ├── marketing/ │ │ │ ├── announcements.mdx │ │ │ ├── banners.mdx │ │ │ ├── blog-cards.mdx │ │ │ ├── buttons.mdx │ │ │ ├── cards.mdx │ │ │ ├── carts.mdx │ │ │ ├── contact-forms.mdx │ │ │ ├── ctas.mdx │ │ │ ├── empty-content.mdx │ │ │ ├── faqs.mdx │ │ │ ├── feature-grids.mdx │ │ │ ├── footers.mdx │ │ │ ├── headers.mdx │ │ │ ├── logo-clouds.mdx │ │ │ ├── newsletter-signup.mdx │ │ │ ├── polls.mdx │ │ │ ├── pricing.mdx │ │ │ ├── product-cards.mdx │ │ │ ├── product-collections.mdx │ │ │ ├── sections.mdx │ │ │ └── team-sections.mdx │ │ └── neobrutalism/ │ │ ├── accordions.mdx │ │ ├── alerts.mdx │ │ ├── badges.mdx │ │ ├── buttons.mdx │ │ ├── cards.mdx │ │ ├── checkboxes.mdx │ │ ├── inputs.mdx │ │ ├── progress-bars.mdx │ │ ├── selects.mdx │ │ ├── tabs.mdx │ │ └── textareas.mdx │ ├── content.config.ts │ ├── layouts/ │ │ ├── BaseLayout.astro │ │ ├── BlogPost.astro │ │ ├── ComponentPost.astro │ │ └── ErrorLayout.astro │ ├── pages/ │ │ ├── 404.astro │ │ ├── blog/ │ │ │ ├── [...slug].astro │ │ │ └── index.astro │ │ ├── components/ │ │ │ ├── application/ │ │ │ │ ├── [...slug].astro │ │ │ │ └── index.astro │ │ │ ├── marketing/ │ │ │ │ ├── [...slug].astro │ │ │ │ └── index.astro │ │ │ └── neobrutalism/ │ │ │ ├── [...slug].astro │ │ │ └── index.astro │ │ ├── index.astro │ │ └── rss.xml.ts │ ├── styles/ │ │ ├── component.css │ │ └── global.css │ ├── types/ │ │ └── component.ts │ └── utils/ │ └── readingTime.ts └── tsconfig.json
SYMBOL INDEX (15 symbols across 4 files)
FILE: src/consts.ts
constant SITE_DESCRIPTION (line 1) | const SITE_DESCRIPTION = 'Free Open Source Tailwind CSS v4 Components'
constant SITE_TITLE (line 2) | const SITE_TITLE = 'HyperUI'
constant SEO_DESCRIPTION_SITE (line 4) | const SEO_DESCRIPTION_SITE =
constant SEO_TITLE_SITE (line 6) | const SEO_TITLE_SITE = 'Free Tailwind CSS v4 Components'
constant SEO_DESCRIPTION_APPLICATION_COMPONENTS (line 8) | const SEO_DESCRIPTION_APPLICATION_COMPONENTS =
constant SEO_TITLE_APPLICATION_COMPONENTS (line 10) | const SEO_TITLE_APPLICATION_COMPONENTS = 'Tailwind CSS Application UI Co...
constant SEO_DESCRIPTION_MARKETING_COMPONENTS (line 12) | const SEO_DESCRIPTION_MARKETING_COMPONENTS =
constant SEO_TITLE_MARKETING_COMPONENTS (line 14) | const SEO_TITLE_MARKETING_COMPONENTS = 'Tailwind CSS Marketing Components'
constant SEO_DESCRIPTION_NEOBRUTALISM_COMPONENTS (line 16) | const SEO_DESCRIPTION_NEOBRUTALISM_COMPONENTS =
constant SEO_TITLE_NEOBRUTALISM_COMPONENTS (line 18) | const SEO_TITLE_NEOBRUTALISM_COMPONENTS = 'Neobrutalism Tailwind CSS Com...
constant SEO_DESCRIPTION_BLOG (line 20) | const SEO_DESCRIPTION_BLOG =
constant SEO_TITLE_BLOG (line 22) | const SEO_TITLE_BLOG = 'Tailwind CSS Tips & Tutorials'
FILE: src/pages/rss.xml.ts
function GET (line 9) | async function GET(context: APIContext) {
FILE: src/types/component.ts
type ComponentPreview (line 1) | interface ComponentPreview {
FILE: src/utils/readingTime.ts
function calculateReadingTime (line 1) | function calculateReadingTime(text: string): number {
Condensed preview — 620 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,269K chars).
[
{
"path": ".github/copilot-instructions.md",
"chars": 3165,
"preview": "# Role & Tone\n\n- You are a senior frontend developer maintaining HyperUI.\n- **Be concise.** Give direct answers and code"
},
{
"path": ".gitignore",
"chars": 148,
"preview": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\n\n# logs\n*.log\n*.tmp\n\n# environment variabl"
},
{
"path": ".prettierignore",
"chars": 141,
"preview": "# build output\ndist/\n\n# generated types\n.astro/\n\n# dependencies\nnode_modules/\npnpm-lock.yaml\n\n# vs code\n.vscode/\n\n# css\n"
},
{
"path": ".prettierrc",
"chars": 274,
"preview": "{\n \"printWidth\": 100,\n \"semi\": false,\n \"singleQuote\": true,\n \"trailingComma\": \"all\",\n \"plugins\": [\"prettier-plugin-"
},
{
"path": ".vscode/extensions.json",
"chars": 183,
"preview": "{\n \"recommendations\": [\n \"astro-build.astro-vscode\",\n \"unifiedjs.vscode-mdx\",\n \"dbaeumer.vscode-eslint\",\n \""
},
{
"path": ".vscode/settings.json",
"chars": 307,
"preview": "{\n \"explorer.fileNesting.enabled\": true,\n \"explorer.fileNesting.expand\": false,\n \"explorer.fileNesting.patterns\": {\n "
},
{
"path": "CONTRIBUTING.md",
"chars": 479,
"preview": "# Contributing to HyperUI\n\nThanks for helping improve HyperUI.\n\n## Before you start\n\nPlease open an issue first before s"
},
{
"path": "LICENSE",
"chars": 1061,
"preview": "MIT License\n\nCopyright (c) Mark Mead\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof th"
},
{
"path": "README.md",
"chars": 902,
"preview": "# HyperUI\n\n\n![](https://img.shields.io/github/issu"
},
{
"path": "astro.config.js",
"chars": 916,
"preview": "// @ts-check\nimport { defineConfig, fontProviders } from 'astro/config'\n\nimport mdx from '@astrojs/mdx'\nimport sitemap f"
},
{
"path": "eslint.config.js",
"chars": 512,
"preview": "// @ts-check\nimport { defineConfig, globalIgnores } from 'eslint/config'\n\nimport astro from 'eslint-plugin-astro'\nimport"
},
{
"path": "package.json",
"chars": 1101,
"preview": "{\n \"name\": \"hyperui\",\n \"type\": \"module\",\n \"scripts\": {\n \"dev\": \"astro dev\",\n \"build\": \"astro build\",\n \"check"
},
{
"path": "pnpm-workspace.yaml",
"chars": 113,
"preview": "minimumReleaseAge: 1440\nstrictDepBuilds: true\nonlyBuiltDependencies:\n - '@parcel/watcher'\n - esbuild\n - sharp\n"
},
{
"path": "public/component.css",
"chars": 99514,
"preview": "/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n@import \"https://fonts.googleapis.com/css2?family=Goog"
},
{
"path": "public/component.js",
"chars": 435,
"preview": "document.addEventListener('DOMContentLoaded', () => {\n document.querySelectorAll('a, input[type=\"file\"]').forEach((ifra"
},
{
"path": "public/examples/application/accordions/1-dark.html",
"chars": 4369,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/1.html",
"chars": 4081,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/2-dark.html",
"chars": 7404,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/2.html",
"chars": 7116,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/3-dark.html",
"chars": 4177,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/3.html",
"chars": 3976,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/4-dark.html",
"chars": 6617,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/4.html",
"chars": 6166,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/5-dark.html",
"chars": 4148,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/accordions/5.html",
"chars": 3965,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/1-dark.html",
"chars": 713,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/1.html",
"chars": 652,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/2-dark.html",
"chars": 1657,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/2.html",
"chars": 1596,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/3-dark.html",
"chars": 2001,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/3.html",
"chars": 1810,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/4-dark.html",
"chars": 1521,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/4.html",
"chars": 1460,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/5-dark.html",
"chars": 4592,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/badges/5.html",
"chars": 4418,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/1-dark.html",
"chars": 1904,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/1.html",
"chars": 1753,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/2-dark.html",
"chars": 2490,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/2.html",
"chars": 2314,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/3-dark.html",
"chars": 1728,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/3.html",
"chars": 1577,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/4-dark.html",
"chars": 2314,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/4.html",
"chars": 2138,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/5-dark.html",
"chars": 1275,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/breadcrumbs/5.html",
"chars": 1105,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/1-dark.html",
"chars": 1799,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/1.html",
"chars": 1448,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/2-dark.html",
"chars": 3648,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/2.html",
"chars": 3297,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/3-dark.html",
"chars": 1984,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/3.html",
"chars": 1750,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/4-dark.html",
"chars": 2701,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/4.html",
"chars": 2467,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/5-dark.html",
"chars": 2728,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/button-groups/5.html",
"chars": 2494,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/checkboxes/1-dark.html",
"chars": 1719,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/checkboxes/1.html",
"chars": 1257,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/checkboxes/2-dark.html",
"chars": 2376,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/checkboxes/2.html",
"chars": 1995,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/checkboxes/3-dark.html",
"chars": 2562,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/checkboxes/3.html",
"chars": 2160,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/1-dark.html",
"chars": 2004,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/1.html",
"chars": 1808,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/2-dark.html",
"chars": 2056,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/2.html",
"chars": 1821,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/3-dark.html",
"chars": 2066,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/3.html",
"chars": 1834,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/4-dark.html",
"chars": 2108,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/details-list/4.html",
"chars": 1867,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/1-dark.html",
"chars": 628,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/1.html",
"chars": 576,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/2-dark.html",
"chars": 690,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/2.html",
"chars": 640,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/3-dark.html",
"chars": 558,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/3.html",
"chars": 523,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/4-dark.html",
"chars": 590,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/4.html",
"chars": 555,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/5-dark.html",
"chars": 558,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/5.html",
"chars": 523,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/6-dark.html",
"chars": 590,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dividers/6.html",
"chars": 555,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dropdown/1-dark.html",
"chars": 2878,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dropdown/1.html",
"chars": 2414,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dropdown/2-dark.html",
"chars": 2995,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dropdown/2.html",
"chars": 2509,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dropdown/3-dark.html",
"chars": 3218,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/dropdown/3.html",
"chars": 2695,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/1-dark.html",
"chars": 1596,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/1.html",
"chars": 1479,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/2-dark.html",
"chars": 2012,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/2.html",
"chars": 1876,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/3-dark.html",
"chars": 1714,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/3.html",
"chars": 1555,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/4-dark.html",
"chars": 2342,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/4.html",
"chars": 2231,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/5-dark.html",
"chars": 2173,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/empty-states/5.html",
"chars": 1944,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/file-uploaders/1-dark.html",
"chars": 1362,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/file-uploaders/1.html",
"chars": 1283,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/file-uploaders/2-dark.html",
"chars": 1584,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/file-uploaders/2.html",
"chars": 1425,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/filters/1-dark.html",
"chars": 6085,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/filters/1.html",
"chars": 5199,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/filters/2-dark.html",
"chars": 5911,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/filters/2.html",
"chars": 5033,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/1.html",
"chars": 510,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/10.html",
"chars": 520,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/2.html",
"chars": 524,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/3.html",
"chars": 524,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/4.html",
"chars": 561,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/5.html",
"chars": 612,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/6.html",
"chars": 575,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/7.html",
"chars": 575,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/8.html",
"chars": 575,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/grids/9.html",
"chars": 520,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/1-dark.html",
"chars": 666,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/1.html",
"chars": 593,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/2-dark.html",
"chars": 1356,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/2.html",
"chars": 1250,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/3-dark.html",
"chars": 1527,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/3.html",
"chars": 1418,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/4-dark.html",
"chars": 896,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/inputs/4.html",
"chars": 809,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/1-dark.html",
"chars": 935,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/1.html",
"chars": 914,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/2-dark.html",
"chars": 1099,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/2.html",
"chars": 1059,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/3-dark.html",
"chars": 1105,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/3.html",
"chars": 1065,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/4-dark.html",
"chars": 703,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/4.html",
"chars": 648,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/5-dark.html",
"chars": 779,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/5.html",
"chars": 692,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/6-dark.html",
"chars": 776,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/6.html",
"chars": 689,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/7-dark.html",
"chars": 782,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/loaders/7.html",
"chars": 695,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/1.html",
"chars": 881,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/2.html",
"chars": 882,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/3.html",
"chars": 879,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/4.html",
"chars": 880,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/5.html",
"chars": 898,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/6.html",
"chars": 899,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/7.html",
"chars": 896,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/media/8.html",
"chars": 897,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/1-dark.html",
"chars": 1049,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/1.html",
"chars": 977,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/2-dark.html",
"chars": 1851,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/2.html",
"chars": 1708,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/3-dark.html",
"chars": 1606,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/3.html",
"chars": 1475,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/4-dark.html",
"chars": 2408,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/4.html",
"chars": 2206,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/5-dark.html",
"chars": 2055,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/5.html",
"chars": 1851,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/6-dark.html",
"chars": 2857,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/modals/6.html",
"chars": 2582,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/pagination/1-dark.html",
"chars": 2795,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/pagination/1.html",
"chars": 2559,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/pagination/2-dark.html",
"chars": 2174,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/pagination/2.html",
"chars": 2016,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/pagination/3-dark.html",
"chars": 1908,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/pagination/3.html",
"chars": 1804,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/progress-bars/1.html",
"chars": 659,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/progress-bars/2.html",
"chars": 1720,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/progress-bars/3.html",
"chars": 1497,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/progress-bars/4.html",
"chars": 2498,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/1-dark.html",
"chars": 1077,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/1.html",
"chars": 927,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/2-dark.html",
"chars": 1269,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/2.html",
"chars": 1119,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/3-dark.html",
"chars": 1281,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/3.html",
"chars": 1131,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/4-dark.html",
"chars": 1301,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/quantity-inputs/4.html",
"chars": 1151,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/radio-groups/1-dark.html",
"chars": 1905,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/radio-groups/1.html",
"chars": 1713,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/radio-groups/2-dark.html",
"chars": 2187,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/radio-groups/2.html",
"chars": 1817,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/radio-groups/3.html",
"chars": 1876,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/range-inputs/1.html",
"chars": 962,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/range-inputs/2.html",
"chars": 1110,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/range-inputs/3.html",
"chars": 1169,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/range-inputs/4.html",
"chars": 906,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/range-inputs/5.html",
"chars": 1056,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/selects/1-dark.html",
"chars": 1083,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/selects/1.html",
"chars": 1010,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/selects/2-dark.html",
"chars": 1347,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/selects/2.html",
"chars": 1267,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/selects/3-dark.html",
"chars": 1746,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/selects/3.html",
"chars": 1635,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/side-menu/1.html",
"chars": 5684,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/side-menu/2.html",
"chars": 8164,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/side-menu/3.html",
"chars": 13395,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/skip-links/1.html",
"chars": 613,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/skip-links/2.html",
"chars": 1272,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/skip-links/3.html",
"chars": 1259,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/stats/1-dark.html",
"chars": 2499,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/stats/1.html",
"chars": 2193,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
},
{
"path": "public/examples/application/stats/2-dark.html",
"chars": 3655,
"preview": "<!doctype html>\n<html lang=\"en\" class=\"dark font-sans antialiased\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name"
}
]
// ... and 420 more files (download for full content)
About this extraction
This page contains the full source code of the markmead/hyperui GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 620 files (2.0 MB), approximately 569.5k tokens, and a symbol index with 15 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.