@fdls/file-viewer 0.2.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +124 -440
- package/dist/style.css +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,125 +1,86 @@
|
|
|
1
|
-
[](https://www.npmjs.com/package/file-viewer)
|
|
1
|
+
[](https://www.npmjs.com/package/@fdls/file-viewer)
|
|
2
2
|
[](https://opensource.org/licenses/MIT)
|
|
3
3
|
|
|
4
|
-
# file-viewer
|
|
4
|
+
# @fdls/file-viewer
|
|
5
5
|
|
|
6
|
-
> React components for in-app file preview: a shell (`FileViewer`), PDF viewer
|
|
6
|
+
> React components for in-app file preview: a shell (`FileViewer`), PDF viewer, and image viewer with pan/zoom.
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
This library targets **React 18+** and **Node.js 18+** (recommended for local development).
|
|
11
|
-
|
|
12
|
-
Peer dependencies must be installed in your app (see [Installation](#installation)).
|
|
13
|
-
|
|
14
|
-
```sh
|
|
15
|
-
node -v && npm -v
|
|
16
|
-
```
|
|
8
|
+
This library provides a drop-in file viewing experience with a clean UI, robust PDF rendering, and image pan/zoom capabilities. It ships its own internal UI primitives (tooltips, dialogs, icons), so you **do not** need to install external UI libraries to use it.
|
|
17
9
|
|
|
18
10
|
## Table of contents
|
|
19
11
|
|
|
20
|
-
- [
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
- [
|
|
25
|
-
- [
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
- [
|
|
33
|
-
- [
|
|
34
|
-
- [
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
- [FileViewer](#fileviewer)
|
|
41
|
-
- [setFileViewerDefaults](#setfileviewerdefaults)
|
|
42
|
-
- [PdfViewer](#pdfviewer)
|
|
43
|
-
- [ImageViewer](#imageviewer)
|
|
44
|
-
- [Translations](#translations)
|
|
45
|
-
- [Customization slots](#customization-slots)
|
|
46
|
-
- [Contributing](#contributing)
|
|
47
|
-
- [Built with](#built-with)
|
|
48
|
-
- [Versioning](#versioning)
|
|
49
|
-
- [License](#license)
|
|
12
|
+
- [Getting Started](#getting-started)
|
|
13
|
+
- [Installation](#installation)
|
|
14
|
+
- [Supported File Types](#supported-file-types)
|
|
15
|
+
- [Quick Start](#quick-start)
|
|
16
|
+
- [1. Configure the PDF Worker](#1-configure-the-pdf-worker)
|
|
17
|
+
- [2. Use the FileViewer Component](#2-use-the-fileviewer-component)
|
|
18
|
+
- [Usage Guide](#usage-guide)
|
|
19
|
+
- [Inline vs Modal Layouts](#inline-vs-modal-layouts)
|
|
20
|
+
- [Global Defaults](#global-defaults)
|
|
21
|
+
- [Styling (Tailwind & CSS)](#styling-tailwind--css)
|
|
22
|
+
- [Framework Guides (Vite & Next.js)](#framework-guides-vite--nextjs)
|
|
23
|
+
- [API Reference](#api-reference)
|
|
24
|
+
- [FileViewer](#fileviewer)
|
|
25
|
+
- [PdfViewer](#pdfviewer)
|
|
26
|
+
- [ImageViewer](#imageviewer)
|
|
27
|
+
- [setFileViewerDefaults](#setfileviewerdefaults)
|
|
28
|
+
- [Local Development](#local-development)
|
|
29
|
+
- [License](#license)
|
|
30
|
+
|
|
31
|
+
---
|
|
50
32
|
|
|
51
33
|
## Getting Started
|
|
52
34
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
```sh
|
|
56
|
-
git clone https://github.com/fidelesdev/file-viewer.git
|
|
57
|
-
cd file-viewer
|
|
58
|
-
npm install
|
|
59
|
-
npm run dev
|
|
60
|
-
```
|
|
35
|
+
Your app must already use **React 18+**. The installer will automatically resolve and install the necessary peer dependencies.
|
|
61
36
|
|
|
62
37
|
## Installation
|
|
63
38
|
|
|
64
|
-
Your app must already use **React 18+**. Then install only the library — **npm 7+**, **Yarn 2+**, and **pnpm** install [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies) from `file-viewer` automatically (no separate `npm install react-pdf …` in your project).
|
|
65
|
-
|
|
66
39
|
```sh
|
|
67
|
-
npm install file-viewer
|
|
40
|
+
npm install @fdls/file-viewer
|
|
68
41
|
```
|
|
69
|
-
|
|
42
|
+
Or with Yarn:
|
|
70
43
|
```sh
|
|
71
|
-
yarn add file-viewer
|
|
44
|
+
yarn add @fdls/file-viewer
|
|
72
45
|
```
|
|
73
|
-
|
|
46
|
+
Or with pnpm:
|
|
74
47
|
```sh
|
|
75
|
-
pnpm add file-viewer
|
|
48
|
+
pnpm add @fdls/file-viewer
|
|
76
49
|
```
|
|
77
50
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
These are listed in this package’s `package.json`; the installer resolves them for you. You do not add them manually unless you use **npm 6** or disable peer auto-install.
|
|
81
|
-
|
|
82
|
-
| Package | Version | Purpose |
|
|
83
|
-
| ------- | ------- | ------- |
|
|
84
|
-
| `react`, `react-dom` | 18 or 19 | UI runtime (from your app) |
|
|
85
|
-
| `react-pdf` | 9.x | PDF rendering |
|
|
86
|
-
| `pdfjs-dist` | **~4.8.69** (same as react-pdf 9) | PDF.js engine — do not use 4.9+ / 4.10+ |
|
|
87
|
-
| `react-to-print` | 3.x | Print in `FileViewer` |
|
|
88
|
-
| `react-zoom-pan-pinch` | 4.x | Image pan/zoom |
|
|
51
|
+
---
|
|
89
52
|
|
|
90
|
-
|
|
53
|
+
## Supported File Types
|
|
91
54
|
|
|
92
|
-
|
|
55
|
+
The `FileViewer` component automatically chooses the correct internal viewer based on the `extension` prop.
|
|
93
56
|
|
|
94
|
-
|
|
57
|
+
| Type | Supported Extensions | Description |
|
|
58
|
+
| :--- | :--- | :--- |
|
|
59
|
+
| **PDF** | `.pdf` | Multi-page document viewer with continuous scroll, pagination, and zoom. |
|
|
60
|
+
| **Images** | `.jpg`, `.jpeg`, `.png` | Interactive image viewer with pan and zoom controls. |
|
|
61
|
+
| **Others** | *Coming soon* | We plan to support more extensions in the future! For now, unsupported types display a fallback message (which you can override using the `renderUnsupported` prop). |
|
|
95
62
|
|
|
96
|
-
|
|
97
|
-
- `@radix-ui/react-scroll-area`
|
|
98
|
-
- `@radix-ui/react-tooltip`
|
|
99
|
-
- `lucide-react`
|
|
63
|
+
---
|
|
100
64
|
|
|
101
|
-
|
|
65
|
+
## Quick Start
|
|
102
66
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
### Quick start
|
|
106
|
-
|
|
107
|
-
Styles load automatically when you import from `file-viewer`. **PDF preview** requires a one-time worker setup in your app entry (see [PDF.js worker](#pdfjs-worker-required-for-pdf)).
|
|
67
|
+
### 1. Configure the PDF Worker
|
|
68
|
+
You **must** configure the PDF worker path in your application's entry point before any PDFs are rendered.
|
|
108
69
|
|
|
109
70
|
```tsx
|
|
110
|
-
// main.tsx or
|
|
111
|
-
import {
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
configureFileViewerPdfWorker({
|
|
117
|
-
workerSrc: getFileViewerPdfWorkerSrc(),
|
|
118
|
-
})
|
|
71
|
+
// main.tsx (Vite) or providers.tsx (Next.js)
|
|
72
|
+
import { configureFileViewerPdfWorker } from '@fdls/file-viewer'
|
|
73
|
+
|
|
74
|
+
// Uses the recommended CDN URL automatically
|
|
75
|
+
configureFileViewerPdfWorker()
|
|
119
76
|
```
|
|
120
77
|
|
|
78
|
+
### 2. Use the FileViewer Component
|
|
79
|
+
The styles are automatically loaded when you import from `@fdls/file-viewer`.
|
|
80
|
+
|
|
121
81
|
```tsx
|
|
122
|
-
import {
|
|
82
|
+
import { useState } from 'react'
|
|
83
|
+
import { FileViewer } from '@fdls/file-viewer'
|
|
123
84
|
|
|
124
85
|
export function DocumentPreview() {
|
|
125
86
|
const [open, setOpen] = useState(true)
|
|
@@ -128,397 +89,120 @@ export function DocumentPreview() {
|
|
|
128
89
|
<FileViewer
|
|
129
90
|
open={open}
|
|
130
91
|
onOpenChange={setOpen}
|
|
131
|
-
name="report.pdf"
|
|
92
|
+
name="annual-report.pdf"
|
|
132
93
|
extension="pdf"
|
|
133
|
-
url="/files/report.pdf"
|
|
94
|
+
url="https://example.com/files/annual-report.pdf"
|
|
95
|
+
language="english" // or 'portuguese'
|
|
134
96
|
/>
|
|
135
97
|
)
|
|
136
98
|
}
|
|
137
99
|
```
|
|
138
100
|
|
|
139
|
-
|
|
101
|
+
---
|
|
140
102
|
|
|
141
|
-
|
|
103
|
+
## Usage Guide
|
|
142
104
|
|
|
143
|
-
|
|
105
|
+
### Inline vs Modal Layouts
|
|
106
|
+
The `FileViewer` can be rendered in two modes:
|
|
107
|
+
|
|
108
|
+
| `mode` | Behavior |
|
|
109
|
+
| :--- | :--- |
|
|
110
|
+
| **`inline`** (default) | Fills the parent container. The close button is hidden by default. A full-screen expand button is shown on the header. |
|
|
111
|
+
| **`modal`** | Full-screen dialog overlay with a backdrop and focus-trap. Perfect for popups. |
|
|
112
|
+
|
|
113
|
+
### Global Defaults
|
|
114
|
+
You can configure global behaviors (like language or UI tweaks) once at app startup:
|
|
144
115
|
|
|
145
116
|
```ts
|
|
146
|
-
import { setFileViewerDefaults } from 'file-viewer'
|
|
117
|
+
import { setFileViewerDefaults } from '@fdls/file-viewer'
|
|
147
118
|
|
|
148
119
|
setFileViewerDefaults({
|
|
149
120
|
language: 'portuguese',
|
|
150
121
|
fileViewer: { mode: 'inline' },
|
|
151
122
|
pdfViewer: { viewMode: 'continuous', zoomDebounceDelay: 500 },
|
|
152
123
|
})
|
|
153
|
-
|
|
154
|
-
setFileViewerDefaults({
|
|
155
|
-
translations: {
|
|
156
|
-
portuguese: { fileViewer: { downloadTooltip: 'Baixar arquivo' } },
|
|
157
|
-
},
|
|
158
|
-
})
|
|
159
|
-
```
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
| API | Description |
|
|
163
|
-
| -------------------------------- | ----------------------------------- |
|
|
164
|
-
| `setFileViewerDefaults(partial)` | Merge into global defaults |
|
|
165
|
-
| `getFileViewerDefaults()` | Read current defaults (debug/tests) |
|
|
166
|
-
| `resetFileViewerDefaults()` | Reset to library built-ins |
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
**Merge priority:** instance props → `setFileViewerDefaults` → built-in defaults.
|
|
170
|
-
|
|
171
|
-
**Never global** (instance only): `open`, `url`, `name`, `extension`, and callbacks such as `onOpenChange`, `onDownload`.
|
|
172
|
-
|
|
173
|
-
### Inline vs modal
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
| `mode` | Behavior |
|
|
177
|
-
| ------------------ | ---------------------------------------------------------- |
|
|
178
|
-
| `inline` (default) | Fills the parent container; close button hidden by default |
|
|
179
|
-
| `modal` | Full-screen dialog overlay with backdrop |
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
In **inline** mode, a header action can open the same file in a built-in full-screen modal (“Visualizar em tela cheia”), unless you pass `onOpenInModal` for custom behavior.
|
|
183
|
-
|
|
184
|
-
### Styling (automatic)
|
|
185
|
-
|
|
186
|
-
The published build runs **Tailwind v4** over this library and ships the result as `dist/style.css`. Importing any export from `file-viewer` pulls that CSS in (Vite, Webpack, Next with `transpilePackages`).
|
|
187
|
-
|
|
188
|
-
**Optional manual import** (same file, if your bundler does not follow CSS from `node_modules`):
|
|
189
|
-
|
|
190
|
-
```ts
|
|
191
|
-
import 'file-viewer/style.css'
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
**Option — Your app already uses Tailwind v4:** you may scan the package instead of relying on the pre-built CSS:
|
|
195
|
-
|
|
196
|
-
```css
|
|
197
|
-
@import "tailwindcss";
|
|
198
|
-
@source "./node_modules/file-viewer/dist";
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
**Customization without Tailwind:** use `styles` (`React.CSSProperties`) on `FileViewer`, `PdfViewer`, `ImageViewer`, or via `setFileViewerDefaults`.
|
|
202
|
-
|
|
203
|
-
**Dynamic `classNames` from props** (e.g. `classNames={{ header: 'text-[#235685]' }}`): Tailwind only emits utilities it finds during the build scan. Classes passed as **runtime strings** are not visible to the compiler unless they also appear as **static** text in files covered by `@source` (your app source), or you add them to a **safelist** / theme. Prefer `styles` for one-off colors, or define fixed utility classes in your own CSS.
|
|
204
|
-
|
|
205
|
-
### PDF.js worker (required for PDF)
|
|
206
|
-
|
|
207
|
-
`file-viewer` does **not** set the PDF.js worker path inside the published bundle (that would point to a non-existent file under `node_modules/file-viewer/dist/`). Call **`configureFileViewerPdfWorker`** once in your app entry, **before** any `FileViewer` / `PdfViewer` renders a PDF.
|
|
208
|
-
|
|
209
|
-
#### Recommended (matches react-pdf API version)
|
|
210
|
-
|
|
211
|
-
Uses `pdfjs.version` from react-pdf (e.g. `4.8.69`), so API and worker stay in sync:
|
|
212
|
-
|
|
213
|
-
```ts
|
|
214
|
-
// src/main.tsx
|
|
215
|
-
import {
|
|
216
|
-
configureFileViewerPdfWorker,
|
|
217
|
-
getFileViewerPdfWorkerSrc,
|
|
218
|
-
} from 'file-viewer'
|
|
219
|
-
|
|
220
|
-
configureFileViewerPdfWorker({
|
|
221
|
-
workerSrc: getFileViewerPdfWorkerSrc(),
|
|
222
|
-
})
|
|
223
|
-
|
|
224
|
-
// or simply (same default):
|
|
225
|
-
// configureFileViewerPdfWorker()
|
|
226
|
-
```
|
|
227
|
-
|
|
228
|
-
Requires network (unpkg). Fine for dev; for production you can self-host the same file or pin a local copy.
|
|
229
|
-
|
|
230
|
-
#### Version mismatch (`4.8.69` vs `4.10.x`)
|
|
231
|
-
|
|
232
|
-
If you see *The API version does not match the Worker version*, your app resolved a **newer** `pdfjs-dist` worker (often `4.10.x`) while react-pdf 9 uses **4.8.69** for the API.
|
|
233
|
-
|
|
234
|
-
Fix:
|
|
235
|
-
|
|
236
|
-
```sh
|
|
237
|
-
npm install pdfjs-dist@4.8.69
|
|
238
|
-
```
|
|
239
|
-
|
|
240
|
-
Or use `getFileViewerPdfWorkerSrc()` instead of `new URL('pdfjs-dist/...', import.meta.url)`.
|
|
241
|
-
|
|
242
|
-
Optional `package.json` override:
|
|
243
|
-
|
|
244
|
-
```json
|
|
245
|
-
{
|
|
246
|
-
"overrides": {
|
|
247
|
-
"pdfjs-dist": "4.8.69"
|
|
248
|
-
}
|
|
249
|
-
}
|
|
250
|
-
```
|
|
251
|
-
|
|
252
|
-
#### Vite — local worker (offline)
|
|
253
|
-
|
|
254
|
-
Only after pinning `pdfjs-dist@4.8.69`:
|
|
255
|
-
|
|
256
|
-
```ts
|
|
257
|
-
import { configureFileViewerPdfWorker } from 'file-viewer'
|
|
258
|
-
|
|
259
|
-
configureFileViewerPdfWorker({
|
|
260
|
-
workerSrc: new URL(
|
|
261
|
-
'pdfjs-dist/build/pdf.worker.min.mjs',
|
|
262
|
-
import.meta.url,
|
|
263
|
-
).href,
|
|
264
|
-
})
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
Or with `?url`:
|
|
268
|
-
|
|
269
|
-
```ts
|
|
270
|
-
import { configureFileViewerPdfWorker } from 'file-viewer'
|
|
271
|
-
import pdfWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
|
|
272
|
-
|
|
273
|
-
configureFileViewerPdfWorker({ workerSrc: pdfWorker })
|
|
274
|
-
```
|
|
275
|
-
|
|
276
|
-
#### Next.js (App Router)
|
|
277
|
-
|
|
278
|
-
In a Client Component loaded early (e.g. `providers.tsx` with `'use client'`):
|
|
279
|
-
|
|
280
|
-
```tsx
|
|
281
|
-
'use client'
|
|
282
|
-
|
|
283
|
-
import { configureFileViewerPdfWorker } from 'file-viewer'
|
|
284
|
-
|
|
285
|
-
import {
|
|
286
|
-
configureFileViewerPdfWorker,
|
|
287
|
-
getFileViewerPdfWorkerSrc,
|
|
288
|
-
} from 'file-viewer'
|
|
289
|
-
|
|
290
|
-
configureFileViewerPdfWorker({
|
|
291
|
-
workerSrc: getFileViewerPdfWorkerSrc(),
|
|
292
|
-
})
|
|
293
124
|
```
|
|
294
125
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
#### API
|
|
298
|
-
|
|
299
|
-
| Export | Description |
|
|
300
|
-
| ------ | ----------- |
|
|
301
|
-
| `configureFileViewerPdfWorker({ workerSrc? })` | Sets `pdfjs.GlobalWorkerOptions.workerSrc` |
|
|
302
|
-
| `getFileViewerPdfWorkerSrc()` | CDN URL locked to `pdfjs.version` (recommended) |
|
|
303
|
-
| `getFileViewerPdfWorkerCdnUrl()` | Alias of `getFileViewerPdfWorkerSrc` |
|
|
304
|
-
| `isFileViewerPdfWorkerConfigured()` | `true` after configure was called |
|
|
305
|
-
|
|
306
|
-
See [pdf.js getting started](https://mozilla.github.io/pdf.js/getting_started/) for more context.
|
|
307
|
-
|
|
308
|
-
### React-PDF layer CSS
|
|
309
|
-
|
|
310
|
-
Included in the bundled `style.css` (react-pdf 9 text/annotation layers). No extra imports.
|
|
126
|
+
**Merge priority:** Instance props > Global Defaults > Built-in defaults.
|
|
311
127
|
|
|
312
|
-
###
|
|
128
|
+
### Styling (Tailwind & CSS)
|
|
129
|
+
The library is built with Tailwind CSS v4 and ships its own CSS file (`dist/style.css`). Importing any component from the library will automatically inject this CSS into your bundle (via Vite, Webpack, or Next.js `transpilePackages`).
|
|
313
130
|
|
|
314
|
-
|
|
315
|
-
2. Use `FileViewer` in your components:
|
|
131
|
+
If you need to override styles, use the `styles` or `classNames` prop available on all components:
|
|
316
132
|
|
|
317
133
|
```tsx
|
|
318
|
-
|
|
134
|
+
<FileViewer
|
|
135
|
+
classNames={{ header: 'bg-blue-600 text-white' }}
|
|
136
|
+
dialogClassNames={{ panel: 'rounded-xl overflow-hidden' }}
|
|
137
|
+
/>
|
|
319
138
|
```
|
|
320
139
|
|
|
321
|
-
### Next.js
|
|
322
|
-
|
|
323
|
-
Add to `next.config.ts`:
|
|
140
|
+
### Framework Guides (Vite & Next.js)
|
|
324
141
|
|
|
142
|
+
#### Next.js (App Router)
|
|
143
|
+
1. Add to `next.config.ts`:
|
|
325
144
|
```ts
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
const nextConfig: NextConfig = {
|
|
329
|
-
transpilePackages: ['file-viewer'],
|
|
145
|
+
const nextConfig = {
|
|
146
|
+
transpilePackages: ['@fdls/file-viewer'],
|
|
330
147
|
}
|
|
331
|
-
|
|
332
|
-
export default nextConfig
|
|
333
148
|
```
|
|
149
|
+
2. Create a Client Component provider (`providers.tsx`) and call `configureFileViewerPdfWorker()` inside it.
|
|
150
|
+
3. Import and use `FileViewer` in your `'use client'` components.
|
|
334
151
|
|
|
335
|
-
|
|
152
|
+
#### Vite
|
|
153
|
+
1. Call `configureFileViewerPdfWorker()` in `main.tsx`.
|
|
154
|
+
2. Use `FileViewer` in your components.
|
|
336
155
|
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
### Serving the playground
|
|
340
|
-
|
|
341
|
-
```sh
|
|
342
|
-
npm run dev
|
|
343
|
-
```
|
|
156
|
+
---
|
|
344
157
|
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
### Building the library
|
|
348
|
-
|
|
349
|
-
```sh
|
|
350
|
-
npm run build:lib
|
|
351
|
-
```
|
|
352
|
-
|
|
353
|
-
Outputs ESM + types to `dist/` (`index.js`, `index.d.ts`, `style.css`).
|
|
354
|
-
|
|
355
|
-
Typecheck:
|
|
356
|
-
|
|
357
|
-
```sh
|
|
358
|
-
npx tsc --noEmit
|
|
359
|
-
```
|
|
360
|
-
|
|
361
|
-
### Building the playground
|
|
362
|
-
|
|
363
|
-
```sh
|
|
364
|
-
npm run build
|
|
365
|
-
```
|
|
366
|
-
|
|
367
|
-
Production build of the demo into `playground-dist/` (does not replace library `dist/` from `build:lib`).
|
|
368
|
-
|
|
369
|
-
Preview:
|
|
370
|
-
|
|
371
|
-
```sh
|
|
372
|
-
npm run preview
|
|
373
|
-
```
|
|
374
|
-
|
|
375
|
-
## API
|
|
158
|
+
## API Reference
|
|
376
159
|
|
|
377
160
|
### FileViewer
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
onOpenInModal={() => { /* optional custom handler */ }}
|
|
393
|
-
pdfViewerProps={{ viewMode: 'single' }}
|
|
394
|
-
classNames={{ header: 'my-header' }}
|
|
395
|
-
styles={{ header: { color: '#fff' } }}
|
|
396
|
-
dialogClassNames={{ panel: 'rounded-lg' }}
|
|
397
|
-
/>
|
|
398
|
-
```
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
| Prop | Type | Default | Description |
|
|
402
|
-
| ----------------------------------- | ------------------------------------------ | ---------------------------------- | --------------------------------------------- |
|
|
403
|
-
| `mode` | `'inline' | 'modal'` | `'inline'` | Layout mode |
|
|
404
|
-
| `open` | `boolean` | — | Controlled visibility |
|
|
405
|
-
| `onOpenChange` | `(open: boolean) => void` | — | Open state callback |
|
|
406
|
-
| `name` | `string` | — | Display name |
|
|
407
|
-
| `extension` | `string` | — | File extension (drives viewer choice) |
|
|
408
|
-
| `url` | `string` | — | File URL |
|
|
409
|
-
| `isLoading` | `boolean` | — | Shows loader in viewer area |
|
|
410
|
-
| `language` | `'english' | 'portuguese'` | `'english'` | UI strings |
|
|
411
|
-
| `hideCloseButton` | `boolean` | `true` in inline, `false` in modal | Hide header close control |
|
|
412
|
-
| `showOpenInModalButton` | `boolean` | `true` | Full-screen button (inline only) |
|
|
413
|
-
| `onOpenInModal` | `() => void` | — | Override built-in modal preview |
|
|
414
|
-
| `onDownload` | `() => void` | — | Custom download; default uses `url` |
|
|
415
|
-
| `pdfViewerProps` | `Omit<PdfViewerProps, 'url' | 'language'>` | — | Passed to embedded PDF viewer |
|
|
416
|
-
| `renderUnsupported` | `ReactNode` | — | Custom unsupported-type UI |
|
|
417
|
-
| `classNames` / `styles` | slot maps | — | Per-slot styling |
|
|
418
|
-
| `dialogClassNames` / `dialogStyles` | layer maps | — | Modal layers (`backdrop`, `content`, `panel`) |
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
There is **no** `hideHeader` prop yet; use `classNames.header` with `hidden` or `styles.header` as a workaround.
|
|
422
|
-
|
|
423
|
-
### setFileViewerDefaults
|
|
424
|
-
|
|
425
|
-
```ts
|
|
426
|
-
setFileViewerDefaults({
|
|
427
|
-
language: 'portuguese',
|
|
428
|
-
fileViewer: {
|
|
429
|
-
hideCloseButton: true,
|
|
430
|
-
showOpenInModalButton: true,
|
|
431
|
-
classNames: { header: 'app-viewer-header' },
|
|
432
|
-
pdfViewerProps: { viewMode: 'continuous' },
|
|
433
|
-
},
|
|
434
|
-
pdfViewer: { preloadAhead: 1, zoomDebounceDelay: 500 },
|
|
435
|
-
imageViewer: { classNames: { root: 'image-root' } },
|
|
436
|
-
toolbar: { classNames: { toolbar: 'my-toolbar' } },
|
|
437
|
-
tooltip: { delayDuration: 300 },
|
|
438
|
-
autoHide: { proximityThreshold: 160, timeout: 3000 },
|
|
439
|
-
translations: { /* deep partial per language */ },
|
|
440
|
-
})
|
|
441
|
-
```
|
|
161
|
+
The main shell component containing the header toolbar and the appropriate viewer (PDF or Image).
|
|
162
|
+
|
|
163
|
+
| Prop | Type | Default | Description |
|
|
164
|
+
| :--- | :--- | :--- | :--- |
|
|
165
|
+
| `open` | `boolean` | — | Controlled visibility state |
|
|
166
|
+
| `onOpenChange` | `(open: boolean) => void` | — | Callback when close button/backdrop is clicked |
|
|
167
|
+
| `url` | `string` | — | File URL |
|
|
168
|
+
| `name` | `string` | — | Display name in the header |
|
|
169
|
+
| `extension` | `string` | — | File extension (drives the viewer choice) |
|
|
170
|
+
| `mode` | `'inline' \| 'modal'` | `'inline'` | Layout mode |
|
|
171
|
+
| `language` | `'english' \| 'portuguese'` | `'english'` | Language for UI strings |
|
|
172
|
+
| `hideCloseButton` | `boolean` | `true` (inline) / `false` (modal) | Hide header close control |
|
|
173
|
+
| `onDownload` | `() => void` | — | Custom download handler (default uses `url`) |
|
|
174
|
+
| `pdfViewerProps` | `Object` | — | Props passed down to the PdfViewer |
|
|
442
175
|
|
|
443
176
|
### PdfViewer
|
|
177
|
+
Standalone PDF viewer component with continuous scroll, pagination, and zoom.
|
|
444
178
|
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
url="/doc.pdf"
|
|
452
|
-
viewMode="continuous"
|
|
453
|
-
language="english"
|
|
454
|
-
preloadAhead={1}
|
|
455
|
-
zoomDebounceDelay={500}
|
|
456
|
-
debounceDelay={300}
|
|
457
|
-
classNames={{ page: 'my-page' }}
|
|
458
|
-
/>
|
|
459
|
-
```
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
| Prop | Type | Default | Description |
|
|
463
|
-
| ----------------------------------------------------- | ------------------------- | -------------- | ------------------------------------------------ |
|
|
464
|
-
| `url` | `string` | — | PDF URL |
|
|
465
|
-
| `viewMode` | `'single' | 'continuous'` | `'continuous'` | Page layout |
|
|
466
|
-
| `debounceDelay` | `number` | `300` | Resize debounce (ms) |
|
|
467
|
-
| `zoomDebounceDelay` | `number` | `500` | Zoom canvas re-render debounce (ms) |
|
|
468
|
-
| `preloadAhead` | `number` | `1` | Pages mounted outside viewport (continuous) |
|
|
469
|
-
| `renderPagination` | `function | null` | default UI | Custom pagination; `null` hides |
|
|
470
|
-
| `className` / `pageClassName` / `paginationClassName` | `string` | — | Legacy aliases → `classNames` |
|
|
471
|
-
| `classNames` / `styles` | slot maps | — | `root`, `scrollArea`, `page`, `pagination`, etc. |
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
Page width in both modes is capped at **50rem** (same sizing rules).
|
|
179
|
+
| Prop | Type | Default | Description |
|
|
180
|
+
| :--- | :--- | :--- | :--- |
|
|
181
|
+
| `url` | `string` | — | PDF URL |
|
|
182
|
+
| `viewMode` | `'single' \| 'continuous'` | `'continuous'` | Page layout |
|
|
183
|
+
| `preloadAhead` | `number` | `1` | Pages mounted outside viewport (continuous) |
|
|
184
|
+
| `zoomDebounceDelay` | `number` | `500` | Canvas re-render debounce (ms) |
|
|
475
185
|
|
|
476
186
|
### ImageViewer
|
|
187
|
+
Standalone Image viewer with pan/zoom and auto-hide floating toolbar.
|
|
188
|
+
Accepts `url`, `name`, `language`, and custom styles.
|
|
477
189
|
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
<ImageViewer url="/photo.jpg" name="photo.jpg" language="portuguese" />
|
|
482
|
-
```
|
|
483
|
-
|
|
484
|
-
Pan/zoom via `react-zoom-pan-pinch`, floating toolbar with auto-hide.
|
|
485
|
-
|
|
486
|
-
### Translations
|
|
487
|
-
|
|
488
|
-
- Bundled: `english`, `portuguese`
|
|
489
|
-
- `getFileViewerTranslations(language)` — applies global overlay from `setFileViewerDefaults({ translations })`
|
|
490
|
-
- `resolveFormattedMessage` — for `FormattableMessage` entries
|
|
491
|
-
- Exports: `fileViewerTranslationsByLanguage`, `defaultFileViewerTranslations`
|
|
492
|
-
|
|
493
|
-
### Customization slots
|
|
494
|
-
|
|
495
|
-
Shared types: `FileViewerClassNames`, `PdfViewerClassNames`, `ImageViewerClassNames`, `ViewerToolbarClassNames`, `FileViewerTooltipClassNames`, and matching `*Styles` (`SlotStyle` = `CSSProperties`).
|
|
496
|
-
|
|
497
|
-
See `src/features/file-viewer/customization-types.ts` for all keys.
|
|
498
|
-
|
|
499
|
-
## Contributing
|
|
500
|
-
|
|
501
|
-
1. Fork the repository
|
|
502
|
-
2. Create a feature branch: `git checkout -b my-feature`
|
|
503
|
-
3. Commit changes: `git commit -am 'Add feature'`
|
|
504
|
-
4. Push: `git push origin my-feature`
|
|
505
|
-
5. Open a pull request
|
|
506
|
-
|
|
507
|
-
Run `npx tsc --noEmit` and `npm run build:lib` before submitting.
|
|
190
|
+
### setFileViewerDefaults
|
|
191
|
+
Function to merge settings globally.
|
|
192
|
+
`setFileViewerDefaults(partial)` / `getFileViewerDefaults()` / `resetFileViewerDefaults()`
|
|
508
193
|
|
|
509
|
-
|
|
194
|
+
---
|
|
510
195
|
|
|
511
|
-
|
|
512
|
-
- [react-pdf](https://github.com/wojtekmaj/react-pdf) / [pdf.js](https://mozilla.github.io/pdf.js/)
|
|
513
|
-
- [react-zoom-pan-pinch](https://github.com/BetterTyped/react-zoom-pan-pinch)
|
|
514
|
-
- Internal UI primitives (dialog, scroll area, tooltip) and inline SVG icons — no Radix UI or Lucide at runtime
|
|
515
|
-
- [Tailwind CSS](https://tailwindcss.com/) v4 (utilities in components; optional pre-built `file-viewer/style.css`)
|
|
516
|
-
- [Vite](https://vitejs.dev/) + [tsup](https://tsup.egoist.dev/) (playground + library build)
|
|
196
|
+
## Local Development
|
|
517
197
|
|
|
518
|
-
|
|
198
|
+
If you want to run the playground locally:
|
|
519
199
|
|
|
520
|
-
|
|
200
|
+
```sh
|
|
201
|
+
git clone https://github.com/fidelesdev/file-viewer.git
|
|
202
|
+
cd file-viewer
|
|
203
|
+
npm install
|
|
204
|
+
npm run dev
|
|
205
|
+
```
|
|
521
206
|
|
|
522
207
|
## License
|
|
523
|
-
|
|
524
|
-
[MIT](LICENSE) © file-viewer contributors
|
|
208
|
+
[MIT](LICENSE) © file-viewer contributors
|
package/dist/style.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@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-border-style:solid;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-950:oklch(14.1% .005 285.823);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-xl:36rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--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{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-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}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-1\/2{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\[100\]{z-index:100}.z-\[101\]{z-index:101}.z-\[200\]{z-index:200}.\!container{width:100%!important}@media (min-width:40rem){.\!container{max-width:40rem!important}}@media (min-width:48rem){.\!container{max-width:48rem!important}}@media (min-width:64rem){.\!container{max-width:64rem!important}}@media (min-width:80rem){.\!container{max-width:80rem!important}}@media (min-width:96rem){.\!container{max-width:96rem!important}}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-1{margin-inline:calc(var(--spacing) * 1)}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.\!size-full{width:100%!important;height:100%!important}.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-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-full{width:100%;height:100%}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-\[3\.25rem\]{height:3.25rem}.h-\[600px\]{height:600px}.h-full{height:100%}.max-h-\[105dvh\]{max-height:105dvh}.max-h-\[calc\(100dvh-10rem\)\]{max-height:calc(100dvh - 10rem)}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-dvh{min-height:100dvh}.min-h-full{min-height:100%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-10{gap:calc(var(--spacing) * 10)}: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)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-neutral-700\/50{border-color:#40404080}@supports (color:color-mix(in lab, red, red)){.border-neutral-700\/50{border-color:color-mix(in oklab, var(--color-neutral-700) 50%, transparent)}}.border-zinc-800{border-color:var(--color-zinc-800)}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.\!bg-transparent{background-color:#0000!important}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.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-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.bg-neutral-500\/50{background-color:#73737380}@supports (color:color-mix(in lab, red, red)){.bg-neutral-500\/50{background-color:color-mix(in oklab, var(--color-neutral-500) 50%, transparent)}}.bg-neutral-800\/95{background-color:#262626f2}@supports (color:color-mix(in lab, red, red)){.bg-neutral-800\/95{background-color:color-mix(in oklab, var(--color-neutral-800) 95%, transparent)}}.bg-neutral-900\/60{background-color:#17171799}@supports (color:color-mix(in lab, red, red)){.bg-neutral-900\/60{background-color:color-mix(in oklab, var(--color-neutral-900) 60%, transparent)}}.bg-neutral-900\/75{background-color:#171717bf}@supports (color:color-mix(in lab, red, red)){.bg-neutral-900\/75{background-color:color-mix(in oklab, var(--color-neutral-900) 75%, transparent)}}.bg-neutral-950\/40{background-color:#0a0a0a66}@supports (color:color-mix(in lab, red, red)){.bg-neutral-950\/40{background-color:color-mix(in oklab, var(--color-neutral-950) 40%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-zinc-800{background-color:var(--color-zinc-800)}.bg-zinc-950{background-color:var(--color-zinc-950)}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.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-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-\[\#235685\]{color:#235685}.text-emerald-400\/90{color:#00d294e6}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/90{color:color-mix(in oklab, var(--color-emerald-400) 90%, transparent)}}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.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-zinc-100{color:var(--color-zinc-100)}.text-zinc-400{color:var(--color-zinc-400)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--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-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-none{--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)}.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-zinc-700{--tw-ring-color:var(--color-zinc-700)}.blur{--tw-blur:blur(8px);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,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.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-\[width\,height\]{transition-property:width,height;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))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.fade-out{--tw-exit-opacity:0}@media (hover:hover){.hover\:bg-black\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/10:hover{background-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.hover\:bg-neutral-500\/80:hover{background-color:#737373cc}@supports (color:color-mix(in lab, red, red)){.hover\:bg-neutral-500\/80:hover{background-color:color-mix(in oklab, var(--color-neutral-500) 80%, transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:bg-zinc-700:hover{background-color:var(--color-zinc-700)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-100:hover{opacity:1}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:opacity-100:focus-visible{opacity:1}.focus-visible\:ring-1:focus-visible{--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-visible\:ring-2:focus-visible{--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-visible\:ring-emerald-500:focus-visible{--tw-ring-color:var(--color-emerald-500)}.focus-visible\:ring-white:focus-visible{--tw-ring-color:var(--color-white)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}.disabled\:hover\:text-white\/40:disabled:hover{color:#fff6}@supports (color:color-mix(in lab, red, red)){.disabled\:hover\:text-white\/40:disabled:hover{color:color-mix(in oklab, var(--color-white) 40%, transparent)}}}.data-\[visible\=false\]\:animate-out[data-visible=false]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\[visible\=false\]\:fade-out-0[data-visible=false]{--tw-exit-opacity:0}.data-\[visible\=true\]\:animate-in[data-visible=true]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.data-\[visible\=true\]\:fade-in-0[data-visible=true]{--tw-enter-opacity:0}.\[\&_canvas\]\:\!h-full canvas{height:100%!important}.\[\&_canvas\]\:\!w-full canvas{width:100%!important}.\[\&\>div\]\:min-h-full>div{min-height:100%}}:root{--react-pdf-text-layer:1;--highlight-bg-color:#b400aa;--highlight-selected-bg-color:#006400}@media screen and (forced-colors:active){:root{--highlight-bg-color:Highlight;--highlight-selected-bg-color:ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg)translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg)translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg)translate(-100%)}.textLayer{text-align:initial;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2;line-height:1;position:absolute;inset:0;overflow:hidden}.textLayer :is(span,br){color:#0000;white-space:pre;cursor:text;transform-origin:0 0;margin:0;position:absolute}.textLayer span.markedContent{height:0;top:0}.textLayer .highlight{background-color:var(--highlight-bg-color);border-radius:4px;margin:-1px;padding:1px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:0 0}.textLayer .endOfContent{z-index:-1;cursor:default;-webkit-user-select:none;user-select:none;display:block;position:absolute;inset:100% 0 0}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{width:0;height:0;display:none;position:absolute;top:0;left:0}:root{--react-pdf-annotation-layer:1;--annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color:Highlight;--input-focus-outline:1px solid Canvas;--input-unfocused-border-color:transparent;--input-disabled-border-color:transparent;--input-hover-border-color:black;--link-outline:none}@media screen and (forced-colors:active){:root{--input-focus-border-color:CanvasText;--input-unfocused-border-color:ActiveText;--input-disabled-border-color:GrayText;--input-hover-border-color:Highlight;--link-outline:1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selecteditem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert();backdrop-filter:invert()}}.annotationLayer{pointer-events:none;transform-origin:0 0;z-index:3;position:absolute;top:0;left:0}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg)translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg)translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg)translateY(-100%)}.annotationLayer canvas{width:100%;height:100%;position:absolute}.annotationLayer section{text-align:initial;pointer-events:auto;box-sizing:border-box;transform-origin:0 0;margin:0;position:absolute}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{width:100%;height:100%;font-size:1em;position:absolute;top:0;left:0}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;vertical-align:top;width:100%;height:100%;margin:0}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{border:2px solid var(--input-disabled-border-color);cursor:not-allowed;background:0 0}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline);background:0 0;border-radius:2px}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-color:#0000;background-image:none}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline);border-radius:2px}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{content:"";background-color:canvastext;display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{width:1px;height:80%;left:45%}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;width:50%;height:50%;top:20%;left:30%}.annotationLayer .textWidgetAnnotation input.comb{padding-left:2px;padding-right:0;font-family:monospace}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{appearance:none}.annotationLayer .popupTriggerArea{width:100%;height:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{font-size:calc(9px * var(--scale-factor));width:100%;min-width:calc(180px * var(--scale-factor));pointer-events:none;position:absolute}.annotationLayer .popup{max-width:calc(180px * var(--scale-factor));box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888;border-radius:calc(2px * var(--scale-factor));padding:calc(6px * var(--scale-factor));margin-left:calc(5px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto;background-color:#ff9;position:absolute}.annotationLayer .popup>*{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{margin-left:calc(5px * var(--scale-factor));display:inline-block}.annotationLayer .popupContent{margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor));border-top:1px solid #333}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{width:100%;height:100%;position:absolute;top:0;left:0}.annotationLayer .annotationTextContent{opacity:0;color:#0000;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;position:absolute}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}.pdf-viewer .textLayer ::-moz-selection{background:#0000ff40;background:color-mix(in srgb, AccentColor, transparent 75%);color:#0000}.pdf-viewer .textLayer ::selection{background:#0000ff40;background:color-mix(in srgb, AccentColor, transparent 75%);color:#0000;-webkit-text-fill-color:transparent}.pdf-viewer .textLayer br::selection{background:0 0}.pdf-viewer [data-layout-syncing=true] .textLayer{opacity:0;pointer-events:none}.pdf-viewer [data-layout-syncing=true] canvas{object-fit:contain}.pdf-viewer .pdf-scroll-viewport{scrollbar-width:none}.pdf-viewer .pdf-scroll-viewport::-webkit-scrollbar{display:none}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
|
|
2
|
+
@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-border-style:solid;--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-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-emerald-400:oklch(76.5% .177 163.223);--color-emerald-500:oklch(69.6% .17 162.48);--color-blue-600:oklch(54.6% .245 262.881);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-950:oklch(14.1% .005 285.823);--color-neutral-500:oklch(55.6% 0 0);--color-neutral-700:oklch(37.1% 0 0);--color-neutral-800:oklch(26.9% 0 0);--color-neutral-900:oklch(20.5% 0 0);--color-neutral-950:oklch(14.5% 0 0);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-xs:20rem;--container-xl:36rem;--container-4xl:56rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--tracking-tight:-.025em;--radius-sm:.25rem;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--blur-sm:8px;--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{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-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}}@layer components;@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing) * 0)}.bottom-4{bottom:calc(var(--spacing) * 4)}.left-1\/2{left:50%}.z-10{z-index:10}.z-20{z-index:20}.z-30{z-index:30}.z-\[100\]{z-index:100}.z-\[101\]{z-index:101}.z-\[200\]{z-index:200}.\!container{width:100%!important}@media (min-width:40rem){.\!container{max-width:40rem!important}}@media (min-width:48rem){.\!container{max-width:48rem!important}}@media (min-width:64rem){.\!container{max-width:64rem!important}}@media (min-width:80rem){.\!container{max-width:80rem!important}}@media (min-width:96rem){.\!container{max-width:96rem!important}}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.m-auto{margin:auto}.mx-1{margin-inline:calc(var(--spacing) * 1)}.block{display:block}.contents{display:contents}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.\!size-full{width:100%!important;height:100%!important}.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-10{width:calc(var(--spacing) * 10);height:calc(var(--spacing) * 10)}.size-full{width:100%;height:100%}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-\[3\.25rem\]{height:3.25rem}.h-\[600px\]{height:600px}.h-full{height:100%}.max-h-\[105dvh\]{max-height:105dvh}.max-h-\[calc\(100dvh-10rem\)\]{max-height:calc(100dvh - 10rem)}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.min-h-dvh{min-height:100dvh}.min-h-full{min-height:100%}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-full{width:100%}.w-max{width:max-content}.w-px{width:1px}.max-w-4xl{max-width:var(--container-4xl)}.max-w-full{max-width:100%}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:calc(var(--spacing) * 0)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-move{cursor:move}.cursor-pointer{cursor:pointer}.touch-none{touch-action:none}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-10{gap:calc(var(--spacing) * 10)}: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)))}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-y-scroll{overflow-y:scroll}.rounded{border-radius:.25rem}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-none{border-radius:0}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.rounded-t-lg{border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg)}.border{border-style:var(--tw-border-style);border-width:1px}.border-0{border-style:var(--tw-border-style);border-width:0}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-neutral-700\/50{border-color:#40404080}@supports (color:color-mix(in lab, red, red)){.border-neutral-700\/50{border-color:color-mix(in oklab, var(--color-neutral-700) 50%, transparent)}}.border-zinc-800{border-color:var(--color-zinc-800)}.border-t-transparent{border-top-color:#0000}.border-l-transparent{border-left-color:#0000}.\!bg-transparent{background-color:#0000!important}.bg-black\/20{background-color:#0003}@supports (color:color-mix(in lab, red, red)){.bg-black\/20{background-color:color-mix(in oklab, var(--color-black) 20%, transparent)}}.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-black\/80{background-color:#000c}@supports (color:color-mix(in lab, red, red)){.bg-black\/80{background-color:color-mix(in oklab, var(--color-black) 80%, transparent)}}.bg-blue-600{background-color:var(--color-blue-600)}.bg-neutral-500\/50{background-color:#73737380}@supports (color:color-mix(in lab, red, red)){.bg-neutral-500\/50{background-color:color-mix(in oklab, var(--color-neutral-500) 50%, transparent)}}.bg-neutral-800\/95{background-color:#262626f2}@supports (color:color-mix(in lab, red, red)){.bg-neutral-800\/95{background-color:color-mix(in oklab, var(--color-neutral-800) 95%, transparent)}}.bg-neutral-900\/60{background-color:#17171799}@supports (color:color-mix(in lab, red, red)){.bg-neutral-900\/60{background-color:color-mix(in oklab, var(--color-neutral-900) 60%, transparent)}}.bg-neutral-900\/75{background-color:#171717bf}@supports (color:color-mix(in lab, red, red)){.bg-neutral-900\/75{background-color:color-mix(in oklab, var(--color-neutral-900) 75%, transparent)}}.bg-neutral-950\/40{background-color:#0a0a0a66}@supports (color:color-mix(in lab, red, red)){.bg-neutral-950\/40{background-color:color-mix(in oklab, var(--color-neutral-950) 40%, transparent)}}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\/20{background-color:#fff3}@supports (color:color-mix(in lab, red, red)){.bg-white\/20{background-color:color-mix(in oklab, var(--color-white) 20%, transparent)}}.bg-zinc-800{background-color:var(--color-zinc-800)}.bg-zinc-950{background-color:var(--color-zinc-950)}.object-contain{object-fit:contain}.p-0{padding:calc(var(--spacing) * 0)}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-2{padding:calc(var(--spacing) * 2)}.p-4{padding:calc(var(--spacing) * 4)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:calc(var(--spacing) * 1)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.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-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-emerald-400\/90{color:#00d294e6}@supports (color:color-mix(in lab, red, red)){.text-emerald-400\/90{color:color-mix(in oklab, var(--color-emerald-400) 90%, transparent)}}.text-white{color:var(--color-white)}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab, red, red)){.text-white\/70{color:color-mix(in oklab, var(--color-white) 70%, transparent)}}.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-zinc-100{color:var(--color-zinc-100)}.text-zinc-400{color:var(--color-zinc-400)}.opacity-0{opacity:0}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--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-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-none{--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)}.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-zinc-700{--tw-ring-color:var(--color-zinc-700)}.blur{--tw-blur:blur(8px);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,)}.backdrop-blur-sm{--tw-backdrop-blur:blur(var(--blur-sm));-webkit-backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);backdrop-filter:var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,)}.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-\[width\,height\]{transition-property:width,height;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))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}.duration-200{animation-duration:.2s}.duration-300{animation-duration:.3s}.ease-out{animation-timing-function:cubic-bezier(0,0,.2,1)}.fade-out{--tw-exit-opacity:0}@media (hover:hover){.hover\:bg-black\/10:hover{background-color:#0000001a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-black\/10:hover{background-color:color-mix(in oklab, var(--color-black) 10%, transparent)}}.hover\:bg-neutral-500\/80:hover{background-color:#737373cc}@supports (color:color-mix(in lab, red, red)){.hover\:bg-neutral-500\/80:hover{background-color:color-mix(in oklab, var(--color-neutral-500) 80%, transparent)}}.hover\:bg-white\/10:hover{background-color:#ffffff1a}@supports (color:color-mix(in lab, red, red)){.hover\:bg-white\/10:hover{background-color:color-mix(in oklab, var(--color-white) 10%, transparent)}}.hover\:bg-zinc-700:hover{background-color:var(--color-zinc-700)}.hover\:text-white:hover{color:var(--color-white)}.hover\:opacity-100:hover{opacity:1}}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:opacity-100:focus-visible{opacity:1}.focus-visible\:ring-1:focus-visible{--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-visible\:ring-2:focus-visible{--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-visible\:ring-emerald-500:focus-visible{--tw-ring-color:var(--color-emerald-500)}.focus-visible\:ring-white:focus-visible{--tw-ring-color:var(--color-white)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}@media (hover:hover){.disabled\:hover\:bg-transparent:disabled:hover{background-color:#0000}.disabled\:hover\:text-white\/40:disabled:hover{color:#fff6}@supports (color:color-mix(in lab, red, red)){.disabled\:hover\:text-white\/40:disabled:hover{color:color-mix(in oklab, var(--color-white) 40%, transparent)}}}.data-\[visible\=false\]\:animate-out[data-visible=false]{--tw-exit-opacity:initial;--tw-exit-scale:initial;--tw-exit-rotate:initial;--tw-exit-translate-x:initial;--tw-exit-translate-y:initial;animation-name:exit;animation-duration:.15s}.data-\[visible\=false\]\:fade-out-0[data-visible=false]{--tw-exit-opacity:0}.data-\[visible\=true\]\:animate-in[data-visible=true]{--tw-enter-opacity:initial;--tw-enter-scale:initial;--tw-enter-rotate:initial;--tw-enter-translate-x:initial;--tw-enter-translate-y:initial;animation-name:enter;animation-duration:.15s}.data-\[visible\=true\]\:fade-in-0[data-visible=true]{--tw-enter-opacity:0}.\[\&_canvas\]\:\!h-full canvas{height:100%!important}.\[\&_canvas\]\:\!w-full canvas{width:100%!important}.\[\&\>div\]\:min-h-full>div{min-height:100%}}:root{--react-pdf-text-layer:1;--highlight-bg-color:#b400aa;--highlight-selected-bg-color:#006400}@media screen and (forced-colors:active){:root{--highlight-bg-color:Highlight;--highlight-selected-bg-color:ButtonText}}[data-main-rotation="90"]{transform:rotate(90deg)translateY(-100%)}[data-main-rotation="180"]{transform:rotate(180deg)translate(-100%,-100%)}[data-main-rotation="270"]{transform:rotate(270deg)translate(-100%)}.textLayer{text-align:initial;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;forced-color-adjust:none;transform-origin:0 0;z-index:2;line-height:1;position:absolute;inset:0;overflow:hidden}.textLayer :is(span,br){color:#0000;white-space:pre;cursor:text;transform-origin:0 0;margin:0;position:absolute}.textLayer span.markedContent{height:0;top:0}.textLayer .highlight{background-color:var(--highlight-bg-color);border-radius:4px;margin:-1px;padding:1px}.textLayer .highlight.appended{position:initial}.textLayer .highlight.begin{border-radius:4px 0 0 4px}.textLayer .highlight.end{border-radius:0 4px 4px 0}.textLayer .highlight.middle{border-radius:0}.textLayer .highlight.selected{background-color:var(--highlight-selected-bg-color)}.textLayer br::selection{background:0 0}.textLayer .endOfContent{z-index:-1;cursor:default;-webkit-user-select:none;user-select:none;display:block;position:absolute;inset:100% 0 0}.textLayer.selecting .endOfContent{top:0}.hiddenCanvasElement{width:0;height:0;display:none;position:absolute;top:0;left:0}:root{--react-pdf-annotation-layer:1;--annotation-unfocused-field-background:url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");--input-focus-border-color:Highlight;--input-focus-outline:1px solid Canvas;--input-unfocused-border-color:transparent;--input-disabled-border-color:transparent;--input-hover-border-color:black;--link-outline:none}@media screen and (forced-colors:active){:root{--input-focus-border-color:CanvasText;--input-unfocused-border-color:ActiveText;--input-disabled-border-color:GrayText;--input-hover-border-color:Highlight;--link-outline:1.5px solid LinkText}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid selecteditem}.annotationLayer .linkAnnotation:hover{-webkit-backdrop-filter:invert();backdrop-filter:invert()}}.annotationLayer{pointer-events:none;transform-origin:0 0;z-index:3;position:absolute;top:0;left:0}.annotationLayer[data-main-rotation="90"] .norotate{transform:rotate(270deg)translate(-100%)}.annotationLayer[data-main-rotation="180"] .norotate{transform:rotate(180deg)translate(-100%,-100%)}.annotationLayer[data-main-rotation="270"] .norotate{transform:rotate(90deg)translateY(-100%)}.annotationLayer canvas{width:100%;height:100%;position:absolute}.annotationLayer section{text-align:initial;pointer-events:auto;box-sizing:border-box;transform-origin:0 0;margin:0;position:absolute}.annotationLayer .linkAnnotation{outline:var(--link-outline)}.textLayer.selecting~.annotationLayer section{pointer-events:none}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a{width:100%;height:100%;font-size:1em;position:absolute;top:0;left:0}.annotationLayer :is(.linkAnnotation,.buttonWidgetAnnotation.pushButton)>a:hover{opacity:.2;background:#ff0;box-shadow:0 2px 10px #ff0}.annotationLayer .textAnnotation img{cursor:pointer;width:100%;height:100%;position:absolute;top:0;left:0}.annotationLayer .textWidgetAnnotation :is(input,textarea),.annotationLayer .choiceWidgetAnnotation select,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{background-image:var(--annotation-unfocused-field-background);border:2px solid var(--input-unfocused-border-color);box-sizing:border-box;font:calc(9px * var(--scale-factor)) sans-serif;vertical-align:top;width:100%;height:100%;margin:0}.annotationLayer .textWidgetAnnotation :is(input,textarea):required,.annotationLayer .choiceWidgetAnnotation select:required,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:required{outline:1.5px solid red}.annotationLayer .choiceWidgetAnnotation select option{padding:0}.annotationLayer .buttonWidgetAnnotation.radioButton input{border-radius:50%}.annotationLayer .textWidgetAnnotation textarea{resize:none}.annotationLayer .textWidgetAnnotation :is(input,textarea)[disabled],.annotationLayer .choiceWidgetAnnotation select[disabled],.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input[disabled]{border:2px solid var(--input-disabled-border-color);cursor:not-allowed;background:0 0}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input:hover{border:2px solid var(--input-hover-border-color)}.annotationLayer .textWidgetAnnotation :is(input,textarea):hover,.annotationLayer .choiceWidgetAnnotation select:hover,.annotationLayer .buttonWidgetAnnotation.checkBox input:hover{border-radius:2px}.annotationLayer .textWidgetAnnotation :is(input,textarea):focus,.annotationLayer .choiceWidgetAnnotation select:focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline);background:0 0;border-radius:2px}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) :focus{background-color:#0000;background-image:none}.annotationLayer .buttonWidgetAnnotation.checkBox :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline);border-radius:2px}.annotationLayer .buttonWidgetAnnotation.radioButton :focus{border:2px solid var(--input-focus-border-color);outline:var(--input-focus-outline)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after,.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{content:"";background-color:canvastext;display:block;position:absolute}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before,.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{width:1px;height:80%;left:45%}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:before{transform:rotate(45deg)}.annotationLayer .buttonWidgetAnnotation.checkBox input:checked:after{transform:rotate(-45deg)}.annotationLayer .buttonWidgetAnnotation.radioButton input:checked:before{border-radius:50%;width:50%;height:50%;top:20%;left:30%}.annotationLayer .textWidgetAnnotation input.comb{padding-left:2px;padding-right:0;font-family:monospace}.annotationLayer .textWidgetAnnotation input.comb:focus{width:103%}.annotationLayer .buttonWidgetAnnotation:is(.checkBox,.radioButton) input{appearance:none}.annotationLayer .popupTriggerArea{width:100%;height:100%}.annotationLayer .fileAttachmentAnnotation .popupTriggerArea{position:absolute}.annotationLayer .popupWrapper{font-size:calc(9px * var(--scale-factor));width:100%;min-width:calc(180px * var(--scale-factor));pointer-events:none;position:absolute}.annotationLayer .popup{max-width:calc(180px * var(--scale-factor));box-shadow:0 calc(2px * var(--scale-factor)) calc(5px * var(--scale-factor)) #888;border-radius:calc(2px * var(--scale-factor));padding:calc(6px * var(--scale-factor));margin-left:calc(5px * var(--scale-factor));cursor:pointer;font:message-box;white-space:normal;word-wrap:break-word;pointer-events:auto;background-color:#ff9;position:absolute}.annotationLayer .popup>*{font-size:calc(9px * var(--scale-factor))}.annotationLayer .popup h1{display:inline-block}.annotationLayer .popupDate{margin-left:calc(5px * var(--scale-factor));display:inline-block}.annotationLayer .popupContent{margin-top:calc(2px * var(--scale-factor));padding-top:calc(2px * var(--scale-factor));border-top:1px solid #333}.annotationLayer .richText>*{white-space:pre-wrap;font-size:calc(9px * var(--scale-factor))}.annotationLayer .highlightAnnotation,.annotationLayer .underlineAnnotation,.annotationLayer .squigglyAnnotation,.annotationLayer .strikeoutAnnotation,.annotationLayer .freeTextAnnotation,.annotationLayer .lineAnnotation svg line,.annotationLayer .squareAnnotation svg rect,.annotationLayer .circleAnnotation svg ellipse,.annotationLayer .polylineAnnotation svg polyline,.annotationLayer .polygonAnnotation svg polygon,.annotationLayer .caretAnnotation,.annotationLayer .inkAnnotation svg polyline,.annotationLayer .stampAnnotation,.annotationLayer .fileAttachmentAnnotation{cursor:pointer}.annotationLayer section svg{width:100%;height:100%;position:absolute;top:0;left:0}.annotationLayer .annotationTextContent{opacity:0;color:#0000;-webkit-user-select:none;user-select:none;pointer-events:none;width:100%;height:100%;position:absolute}.annotationLayer .annotationTextContent span{width:100%;display:inline-block}.pdf-viewer .textLayer ::-moz-selection{background:#0000ff40;background:color-mix(in srgb, AccentColor, transparent 75%);color:#0000}.pdf-viewer .textLayer ::selection{background:#0000ff40;background:color-mix(in srgb, AccentColor, transparent 75%);color:#0000;-webkit-text-fill-color:transparent}.pdf-viewer .textLayer br::selection{background:0 0}.pdf-viewer [data-layout-syncing=true] .textLayer{opacity:0;pointer-events:none}.pdf-viewer [data-layout-syncing=true] canvas{object-fit:contain}.pdf-viewer .pdf-scroll-viewport{scrollbar-width:none}.pdf-viewer .pdf-scroll-viewport::-webkit-scrollbar{display:none}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0), var(--tw-enter-translate-y,0), 0) scale3d(var(--tw-enter-scale,1), var(--tw-enter-scale,1), var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0), var(--tw-exit-translate-y,0), 0) scale3d(var(--tw-exit-scale,1), var(--tw-exit-scale,1), var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}@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-border-style{syntax:"*";inherits:false;initial-value:solid}@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-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fdls/file-viewer",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "React components for in-app file preview: shell (FileViewer), PDF viewer, and image pan/zoom. No Radix UI or icon library peer dependencies.",
|
|
6
6
|
"license": "MIT",
|