@geekapps/silo-elements-nextjs 0.2.35 → 0.2.36

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.
Files changed (17) hide show
  1. package/dist/FileUploader.js +51 -81
  2. package/dist/FileUploader.js.map +1 -1
  3. package/dist/ImageUploader.js +47 -109
  4. package/dist/ImageUploader.js.map +1 -1
  5. package/dist/MediaUploader.js +132 -246
  6. package/dist/MediaUploader.js.map +1 -1
  7. package/dist/VideoUploader.js +52 -114
  8. package/dist/VideoUploader.js.map +1 -1
  9. package/dist/components/DropZone.js +7 -9
  10. package/dist/components/DropZone.js.map +1 -1
  11. package/dist/components/ProgressBar.js +2 -20
  12. package/dist/components/ProgressBar.js.map +1 -1
  13. package/dist/index.d.ts +0 -3
  14. package/dist/index.js +164 -407
  15. package/dist/index.js.map +1 -1
  16. package/dist/styles.css +1 -2
  17. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -91,20 +91,18 @@ function DropZone({
91
91
  );
92
92
  const rootStyle = {
93
93
  ...vars,
94
- fontFamily: "var(--silo-font)",
95
- border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
96
- borderRadius: "var(--silo-radius)",
97
- backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
98
- color: "var(--silo-text)",
99
- cursor: disabled ? "not-allowed" : "pointer",
100
- transition: "border-color 0.15s, background-color 0.15s",
101
- opacity: disabled ? 0.5 : 1,
102
94
  ...style
103
95
  };
96
+ const cls = [
97
+ "silo-dropzone",
98
+ dragging ? "silo-dropzone--dragging" : "",
99
+ disabled ? "silo-dropzone--disabled" : "",
100
+ className
101
+ ].filter(Boolean).join(" ");
104
102
  return /* @__PURE__ */ jsxs(
105
103
  "div",
106
104
  {
107
- className: `silo-dropzone${className ? ` ${className}` : ""}`,
105
+ className: cls,
108
106
  style: rootStyle,
109
107
  onDragOver: (e) => {
110
108
  e.preventDefault();
@@ -142,30 +140,12 @@ function ProgressBar({ progress, className = "", style }) {
142
140
  "div",
143
141
  {
144
142
  className: `silo-progress-track${className ? ` ${className}` : ""}`,
145
- style: {
146
- height: "6px",
147
- borderRadius: "3px",
148
- backgroundColor: "rgba(99,102,241,0.15)",
149
- overflow: "hidden",
150
- ...style
151
- },
143
+ style,
152
144
  role: "progressbar",
153
145
  "aria-valuenow": progress,
154
146
  "aria-valuemin": 0,
155
147
  "aria-valuemax": 100,
156
- children: /* @__PURE__ */ jsx(
157
- "div",
158
- {
159
- className: "silo-progress-fill",
160
- style: {
161
- height: "100%",
162
- width: `${progress}%`,
163
- backgroundColor: "var(--silo-accent, #6366f1)",
164
- borderRadius: "3px",
165
- transition: "width 0.2s ease"
166
- }
167
- }
168
- )
148
+ children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
169
149
  }
170
150
  );
171
151
  }
@@ -334,13 +314,13 @@ function ImageUploader({
334
314
  style: { padding: "32px 24px", textAlign: "center" },
335
315
  children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
336
316
  /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
337
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
317
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
338
318
  ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
339
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
319
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
340
320
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
341
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
342
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
343
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
321
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste sua imagem aqui" }),
322
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
323
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
344
324
  "Tamanho m\xE1ximo: ",
345
325
  formatBytes(maxSize)
346
326
  ] })
@@ -349,41 +329,27 @@ function ImageUploader({
349
329
  }
350
330
  ),
351
331
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
352
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
353
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
354
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
332
+ preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
333
+ /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
334
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
355
335
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
356
336
  ] }),
357
337
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
358
- /* @__PURE__ */ jsx(
359
- "button",
360
- {
361
- onClick: () => {
362
- setStagedFile(null);
363
- setPreview(null);
364
- },
365
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
366
- children: "Cancelar"
367
- }
368
- ),
369
- /* @__PURE__ */ jsx(
370
- "button",
371
- {
372
- onClick: () => {
373
- const f = stagedFile;
374
- setStagedFile(null);
375
- void doUpload(f, imageOpts);
376
- },
377
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
378
- children: "Enviar imagem"
379
- }
380
- )
338
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
339
+ setStagedFile(null);
340
+ setPreview(null);
341
+ }, children: "Cancelar" }),
342
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
343
+ const f = stagedFile;
344
+ setStagedFile(null);
345
+ void doUpload(f, imageOpts);
346
+ }, children: "Enviar imagem" })
381
347
  ] })
382
348
  ] }),
383
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
349
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
384
350
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
385
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
386
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
351
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(state.status, progress) }),
352
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
387
353
  progress,
388
354
  "%"
389
355
  ] })
@@ -391,61 +357,33 @@ function ImageUploader({
391
357
  /* @__PURE__ */ jsx(ProgressBar, { progress })
392
358
  ] })),
393
359
  isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
394
- /* @__PURE__ */ jsx(
395
- "button",
396
- {
397
- onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }),
398
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
399
- children: "\u25B6 Retomar envio"
400
- }
401
- ),
402
- /* @__PURE__ */ jsx(
403
- "button",
404
- {
405
- onClick: () => {
406
- abort();
407
- setPreview(null);
408
- },
409
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
410
- children: "Cancelar"
411
- }
412
- )
360
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }), children: "\u25B6 Retomar envio" }),
361
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
362
+ abort();
363
+ setPreview(null);
364
+ }, children: "Cancelar" })
413
365
  ] }),
414
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
366
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
415
367
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
416
368
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
417
369
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
418
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
370
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
419
371
  ] }),
420
- /* @__PURE__ */ jsx(
421
- "button",
422
- {
423
- onClick: () => {
424
- reset();
425
- setPreview(null);
426
- },
427
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
428
- children: "Enviar outra"
429
- }
430
- )
372
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
373
+ reset();
374
+ setPreview(null);
375
+ }, children: "Enviar outra" })
431
376
  ] }),
432
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
377
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
433
378
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
434
379
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
435
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
436
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
380
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
381
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
437
382
  ] }),
438
- /* @__PURE__ */ jsx(
439
- "button",
440
- {
441
- onClick: () => {
442
- reset();
443
- setPreview(null);
444
- },
445
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
446
- children: "Tentar novamente"
447
- }
448
- )
383
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
384
+ reset();
385
+ setPreview(null);
386
+ }, children: "Tentar novamente" })
449
387
  ] })
450
388
  ] });
451
389
  }
@@ -660,13 +598,13 @@ function VideoUploader({
660
598
  style: { padding: "32px 24px", textAlign: "center" },
661
599
  children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
662
600
  /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
663
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
601
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar o v\xEDdeo" })
664
602
  ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
665
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
603
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
666
604
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
667
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
668
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
669
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
605
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste seu v\xEDdeo aqui" }),
606
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
607
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
670
608
  "MP4, MOV, MKV, WebM",
671
609
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
672
610
  ] })
@@ -675,112 +613,70 @@ function VideoUploader({
675
613
  }
676
614
  ),
677
615
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
678
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)", background: "#000" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
679
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
680
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
616
+ preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { background: "#000", overflow: "hidden" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
617
+ /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
618
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
681
619
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
682
620
  ] }),
683
621
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
684
- /* @__PURE__ */ jsx(
685
- "button",
686
- {
687
- onClick: () => {
688
- setStagedFile(null);
689
- setPreview(null);
690
- setVideoOpts(createInitialVideoOpts(video));
691
- },
692
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
693
- children: "Cancelar"
694
- }
695
- ),
696
- /* @__PURE__ */ jsx(
697
- "button",
698
- {
699
- onClick: () => {
700
- const f = stagedFile;
701
- setStagedFile(null);
702
- void doUpload(f, videoOpts);
703
- setVideoOpts(createInitialVideoOpts(video));
704
- },
705
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
706
- children: "Enviar v\xEDdeo"
707
- }
708
- )
622
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
623
+ setStagedFile(null);
624
+ setPreview(null);
625
+ setVideoOpts(createInitialVideoOpts(video));
626
+ }, children: "Cancelar" }),
627
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
628
+ const f = stagedFile;
629
+ setStagedFile(null);
630
+ void doUpload(f, videoOpts);
631
+ setVideoOpts(createInitialVideoOpts(video));
632
+ }, children: "Enviar v\xEDdeo" })
709
633
  ] })
710
634
  ] }),
711
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
635
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
712
636
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
713
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
637
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
714
638
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
715
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
639
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
716
640
  progress,
717
641
  "%"
718
642
  ] }),
719
- /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "1px solid var(--silo-border)", borderRadius: 6, cursor: "pointer", fontSize: 11, color: "var(--silo-text-muted)", padding: "2px 8px" }, children: "Pausar" })
643
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, children: "Pausar" })
720
644
  ] })
721
645
  ] }),
722
646
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
723
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
647
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 11 }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
724
648
  ] })),
725
649
  isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
726
- /* @__PURE__ */ jsx(
727
- "button",
728
- {
729
- onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
730
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
731
- children: "\u25B6 Retomar envio"
732
- }
733
- ),
734
- /* @__PURE__ */ jsx(
735
- "button",
736
- {
737
- onClick: () => {
738
- abort();
739
- setPreview(null);
740
- },
741
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
742
- children: "Cancelar"
743
- }
744
- )
650
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }), children: "\u25B6 Retomar envio" }),
651
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
652
+ abort();
653
+ setPreview(null);
654
+ }, children: "Cancelar" })
745
655
  ] }),
746
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
656
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, children: [
747
657
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
748
658
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
749
659
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
750
660
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
751
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
661
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
752
662
  ] }),
753
- /* @__PURE__ */ jsx(
754
- "button",
755
- {
756
- onClick: () => {
757
- reset();
758
- setPreview(null);
759
- },
760
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
761
- children: "Enviar outro"
762
- }
763
- )
663
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
664
+ reset();
665
+ setPreview(null);
666
+ }, children: "Enviar outro" })
764
667
  ] }),
765
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
668
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
766
669
  ] }),
767
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
670
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
768
671
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
769
672
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
770
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
771
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
673
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
674
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
772
675
  ] }),
773
- /* @__PURE__ */ jsx(
774
- "button",
775
- {
776
- onClick: () => {
777
- reset();
778
- setPreview(null);
779
- },
780
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
781
- children: "Tentar novamente"
782
- }
783
- )
676
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
677
+ reset();
678
+ setPreview(null);
679
+ }, children: "Tentar novamente" })
784
680
  ] })
785
681
  ] });
786
682
  }
@@ -929,11 +825,11 @@ function FileUploader({
929
825
  onFiles: handleFiles,
930
826
  style: { padding: "28px 24px", textAlign: "center" },
931
827
  children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
932
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
828
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
933
829
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
934
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
935
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
936
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
830
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
831
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
832
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
937
833
  "Tamanho m\xE1ximo: ",
938
834
  formatBytes(maxSize)
939
835
  ] })
@@ -942,8 +838,8 @@ function FileUploader({
942
838
  }
943
839
  ),
944
840
  staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
945
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text-muted)", marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
946
- staged.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
841
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 13, fontWeight: 600, marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
842
+ staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "silo-card", children: [
947
843
  /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
948
844
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
949
845
  editingIndex === i ? /* @__PURE__ */ jsx(
@@ -963,28 +859,30 @@ function FileUploader({
963
859
  }
964
860
  if (e.key === "Escape") setEditingIndex(null);
965
861
  },
966
- style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg)", color: "var(--silo-text)", fontFamily: "var(--silo-font)" }
862
+ style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg, #f8fafc)", color: "var(--silo-text, #0f172a)", fontFamily: "var(--silo-font, inherit)" }
967
863
  }
968
864
  ) : /* @__PURE__ */ jsxs(
969
865
  "div",
970
866
  {
971
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
867
+ className: "silo-text",
868
+ style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
972
869
  onClick: () => allowRename && setEditingIndex(i),
973
870
  title: allowRename ? "Clique para renomear" : void 0,
974
871
  children: [
975
872
  effectiveName(i, staged),
976
- renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
873
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
977
874
  ]
978
875
  }
979
876
  ),
980
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
877
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
981
878
  ] }),
982
879
  allowRename && /* @__PURE__ */ jsx(
983
880
  "button",
984
881
  {
985
882
  onClick: () => setEditingIndex(i),
986
883
  title: "Renomear",
987
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
884
+ className: "silo-text-muted",
885
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
988
886
  children: "\u270F\uFE0F"
989
887
  }
990
888
  ),
@@ -996,42 +894,29 @@ function FileUploader({
996
894
  if (next.length === 0) clearStaging();
997
895
  else setStaged(next);
998
896
  },
999
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
897
+ className: "silo-text-muted",
898
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
1000
899
  children: "\xD7"
1001
900
  }
1002
901
  )
1003
902
  ] }, i)),
1004
- showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1005
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
903
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
904
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
1006
905
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
1007
906
  ] }),
1008
- showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1009
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
907
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
908
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
1010
909
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
1011
910
  ] }),
1012
911
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
1013
- /* @__PURE__ */ jsx(
1014
- "button",
1015
- {
1016
- onClick: clearStaging,
1017
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
1018
- children: "Cancelar"
1019
- }
1020
- ),
1021
- /* @__PURE__ */ jsx(
1022
- "button",
1023
- {
1024
- onClick: handleConfirmUpload,
1025
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
1026
- children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
1027
- }
1028
- )
912
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: clearStaging, children: "Cancelar" }),
913
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: handleConfirmUpload, children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo" })
1029
914
  ] })
1030
915
  ] }),
1031
- isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "16px", borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
916
+ isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
1032
917
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
1033
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
1034
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
918
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel3(single.state.status, singleProgress) }),
919
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
1035
920
  singleProgress,
1036
921
  "%"
1037
922
  ] })
@@ -1045,17 +930,17 @@ function FileUploader({
1045
930
  const isPaused = st.status === "paused";
1046
931
  const isDone = st.status === "done";
1047
932
  const isErr = st.status === "error";
1048
- return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
1049
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
933
+ return /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px" }, children: [
934
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
1050
935
  /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
1051
936
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1052
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
1053
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
937
+ /* @__PURE__ */ jsx("div", { className: "silo-text", style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
938
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11 }, children: formatBytes(f.file.size) })
1054
939
  ] }),
1055
940
  isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
1056
- isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
1057
- !isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
1058
- !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "none", background: "#10b981", color: "#fff", cursor: "pointer", fontWeight: 600 }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", cursor: "pointer" }, children: "Pausar" }) : null)
941
+ isErr && /* @__PURE__ */ jsx("span", { className: "silo-text-error", style: { fontSize: 12, fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
942
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: isPaused ? "silo-text-muted" : "silo-text-accent", style: { fontSize: 12, fontWeight: 700, flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
943
+ !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--success", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
1059
944
  ] }),
1060
945
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
1061
946
  ] }, i);
@@ -1064,40 +949,41 @@ function FileUploader({
1064
949
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
1065
950
  "button",
1066
951
  {
952
+ className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
953
+ style: { flex: 1 },
1067
954
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
1068
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1069
955
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
1070
956
  }
1071
957
  ),
1072
958
  /* @__PURE__ */ jsx(
1073
959
  "button",
1074
960
  {
961
+ className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
1075
962
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
1076
- style: { padding: "10px 16px", borderRadius: 8, border: "none", background: batch.state.status === "done" ? "var(--silo-accent, #6366f1)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1077
963
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
1078
964
  }
1079
965
  )
1080
966
  ] }),
1081
- batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
967
+ batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
1082
968
  /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
1083
969
  /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "#16a34a" }, children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
1084
970
  ] })
1085
971
  ] }),
1086
- single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
972
+ single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
1087
973
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
1088
974
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1089
975
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
1090
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
976
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
1091
977
  ] }),
1092
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, children: "Enviar outro" })
978
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Enviar outro" })
1093
979
  ] }),
1094
- single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
980
+ single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
1095
981
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
1096
982
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1097
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1098
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
983
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
984
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: single.state.error.message })
1099
985
  ] }),
1100
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, children: "Tentar novamente" })
986
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Tentar novamente" })
1101
987
  ] })
1102
988
  ] });
1103
989
  }
@@ -2763,20 +2649,8 @@ function FileCard({
2763
2649
  style
2764
2650
  }) {
2765
2651
  const { file, loading } = useFileStatus(fileId, { pollInterval });
2766
- const card = {
2767
- display: "flex",
2768
- flexDirection: "column",
2769
- gap: 0,
2770
- borderRadius: "var(--silo-radius, 12px)",
2771
- border: "1px solid var(--silo-border, #e2e8f0)",
2772
- background: "var(--silo-bg, #f8fafc)",
2773
- overflow: "hidden",
2774
- fontFamily: "var(--silo-font, inherit)",
2775
- width: 220,
2776
- ...style
2777
- };
2778
2652
  if (loading && !file) {
2779
- return /* @__PURE__ */ jsx("div", { className, style: { ...card, padding: 16, color: "var(--silo-text-muted, #94a3b8)", fontSize: 13 }, children: "Loading..." });
2653
+ return /* @__PURE__ */ jsx("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style: { padding: 16, ...style }, children: /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "Loading..." }) });
2780
2654
  }
2781
2655
  if (!file) return null;
2782
2656
  const status = file.status;
@@ -2785,8 +2659,8 @@ function FileCard({
2785
2659
  const showThumb = isImg || isVid;
2786
2660
  const progress = file.progress ?? null;
2787
2661
  const ext = file.originalName.split(".").pop()?.toUpperCase();
2788
- return /* @__PURE__ */ jsxs("div", { className, style: card, children: [
2789
- /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: 130, background: "var(--silo-bg-hover, #f1f5f9)", flexShrink: 0 }, children: [
2662
+ return /* @__PURE__ */ jsxs("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style, children: [
2663
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-card__thumb-area", children: [
2790
2664
  showThumb ? /* @__PURE__ */ jsx(
2791
2665
  Thumbnail,
2792
2666
  {
@@ -2801,100 +2675,46 @@ function FileCard({
2801
2675
  /* @__PURE__ */ jsx(
2802
2676
  "span",
2803
2677
  {
2804
- style: {
2805
- position: "absolute",
2806
- top: 8,
2807
- right: 8,
2808
- fontSize: 10,
2809
- fontWeight: 700,
2810
- letterSpacing: "0.05em",
2811
- padding: "2px 7px",
2812
- borderRadius: 99,
2813
- background: "rgba(0,0,0,0.55)",
2814
- color: statusColor(status),
2815
- backdropFilter: "blur(4px)"
2816
- },
2678
+ className: "silo-file-card__badge silo-file-card__badge--status",
2679
+ style: { color: statusColor(status) },
2817
2680
  children: STATUS_LABEL[status] ?? status
2818
2681
  }
2819
2682
  ),
2820
- ext && /* @__PURE__ */ jsx(
2821
- "span",
2822
- {
2823
- style: {
2824
- position: "absolute",
2825
- top: 8,
2826
- left: 8,
2827
- fontSize: 9,
2828
- fontWeight: 700,
2829
- letterSpacing: "0.06em",
2830
- padding: "2px 6px",
2831
- borderRadius: 6,
2832
- background: "rgba(0,0,0,0.45)",
2833
- color: "#fff",
2834
- backdropFilter: "blur(4px)"
2835
- },
2836
- children: ext
2837
- }
2838
- )
2683
+ ext && /* @__PURE__ */ jsx("span", { className: "silo-file-card__badge silo-file-card__badge--ext", children: ext })
2839
2684
  ] }),
2840
- /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", display: "flex", flexDirection: "column", gap: 4 }, children: [
2841
- /* @__PURE__ */ jsx(
2842
- "span",
2843
- {
2844
- style: {
2845
- fontSize: 13,
2846
- fontWeight: 600,
2847
- color: "var(--silo-text, #0f172a)",
2848
- overflow: "hidden",
2849
- textOverflow: "ellipsis",
2850
- whiteSpace: "nowrap"
2851
- },
2852
- title: file.originalName,
2853
- children: file.originalName
2854
- }
2855
- ),
2856
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: [
2685
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-card__body", children: [
2686
+ /* @__PURE__ */ jsx("span", { className: "silo-file-card__name", title: file.originalName, children: file.originalName }),
2687
+ /* @__PURE__ */ jsxs("span", { className: "silo-file-card__meta", children: [
2857
2688
  formatBytes(file.size),
2858
2689
  file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2859
2690
  file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2860
2691
  ] }),
2861
2692
  isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
2862
2693
  /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2863
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "var(--silo-text-muted, #94a3b8)", marginTop: 2, display: "block" }, children: [
2694
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 10, marginTop: 2, display: "block" }, children: [
2864
2695
  STATUS_LABEL[status],
2865
2696
  progress != null ? ` \xB7 ${progress}%` : ""
2866
2697
  ] })
2867
2698
  ] }),
2868
- actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }, children: [
2869
- actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { onClick: () => onPreview(fileId), style: btnStyle, children: "Preview" }),
2699
+ actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "silo-file-card__actions", children: [
2700
+ actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { className: "silo-btn", onClick: () => onPreview(fileId), children: "Preview" }),
2870
2701
  actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2871
2702
  "button",
2872
2703
  {
2704
+ className: "silo-btn",
2873
2705
  onClick: () => {
2874
2706
  const url = `${file.key}`;
2875
2707
  navigator.clipboard.writeText(url).catch(() => void 0);
2876
2708
  onCopyUrl(url);
2877
2709
  },
2878
- style: btnStyle,
2879
2710
  children: "Copy URL"
2880
2711
  }
2881
2712
  ),
2882
- actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { onClick: () => onDelete(fileId), style: { ...btnStyle, color: "var(--silo-error, #ef4444)" }, children: "Delete" })
2713
+ actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--danger", onClick: () => onDelete(fileId), children: "Delete" })
2883
2714
  ] })
2884
2715
  ] })
2885
2716
  ] });
2886
2717
  }
2887
- var btnStyle = {
2888
- fontSize: 11,
2889
- fontWeight: 600,
2890
- padding: "3px 9px",
2891
- borderRadius: 6,
2892
- border: "1px solid var(--silo-border, #e2e8f0)",
2893
- background: "transparent",
2894
- color: "var(--silo-text, #0f172a)",
2895
- cursor: "pointer",
2896
- lineHeight: 1.6
2897
- };
2898
2718
  var STATUS_LABEL2 = {
2899
2719
  CREATED: "Created",
2900
2720
  UPLOADING: "Uploading",
@@ -2930,37 +2750,24 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2930
2750
  const isVid = file?.mimeType.startsWith("video/");
2931
2751
  const progress = file?.progress ?? null;
2932
2752
  return /* @__PURE__ */ jsxs(Fragment, { children: [
2933
- /* @__PURE__ */ jsx(
2934
- "div",
2935
- {
2936
- onClick: onClose,
2937
- "aria-hidden": true,
2938
- style: {
2939
- position: "fixed",
2940
- inset: 0,
2941
- zIndex: 1e3,
2942
- background: "rgba(0,0,0,0.6)",
2943
- backdropFilter: "blur(6px)"
2944
- }
2945
- }
2946
- ),
2753
+ /* @__PURE__ */ jsx("div", { className: "silo-file-preview-backdrop", onClick: onClose, "aria-hidden": true }),
2947
2754
  /* @__PURE__ */ jsxs(
2948
2755
  "div",
2949
2756
  {
2757
+ className: "silo-file-preview",
2950
2758
  role: "dialog",
2951
2759
  "aria-modal": true,
2952
2760
  "aria-label": file?.originalName ?? "File preview",
2953
- style: modal,
2954
2761
  onKeyDown: (e) => {
2955
2762
  if (e.key === "Escape") onClose();
2956
2763
  },
2957
2764
  children: [
2958
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid var(--silo-border, #e2e8f0)" }, children: [
2959
- /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 14, fontWeight: 600, color: "var(--silo-text, #0f172a)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: file?.originalName ?? "Loading..." }),
2960
- /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", style: closeBtn, children: "\u2715" })
2765
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__header", children: [
2766
+ /* @__PURE__ */ jsx("span", { className: "silo-file-preview__title", children: file?.originalName ?? "Loading..." }),
2767
+ /* @__PURE__ */ jsx("button", { className: "silo-file-preview__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
2961
2768
  ] }),
2962
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#0f0f0f", minHeight: 240, position: "relative" }, children: [
2963
- loading && !file && /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: 13 }, children: "Loading..." }),
2769
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__media", children: [
2770
+ loading && !file && /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "Loading..." }),
2964
2771
  file && isImg && url && /* @__PURE__ */ jsx(
2965
2772
  "img",
2966
2773
  {
@@ -2979,7 +2786,7 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2979
2786
  ),
2980
2787
  file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
2981
2788
  /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
2982
- /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: 13 }, children: "No preview available" })
2789
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "No preview available" })
2983
2790
  ] }),
2984
2791
  file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
2985
2792
  position: "absolute",
@@ -2993,24 +2800,24 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2993
2800
  }, children: [
2994
2801
  /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
2995
2802
  /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2996
- progress != null && /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8", fontSize: 12 }, children: [
2803
+ progress != null && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
2997
2804
  progress,
2998
2805
  "%"
2999
2806
  ] })
3000
2807
  ] })
3001
2808
  ] }),
3002
- file && /* @__PURE__ */ jsxs("div", { style: { padding: "14px 20px", borderTop: "1px solid var(--silo-border, #e2e8f0)", display: "flex", flexDirection: "column", gap: 8 }, children: [
3003
- /* @__PURE__ */ jsxs("div", { style: metaGrid, children: [
2809
+ file && /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta", children: [
2810
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta-grid", children: [
3004
2811
  /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
3005
2812
  /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
3006
- /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucket }),
2813
+ /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucketName ?? file.bucket }),
3007
2814
  /* @__PURE__ */ jsx(MetaRow, { label: "Status", value: STATUS_LABEL2[status] ?? status, highlight: status === "READY" }),
3008
2815
  file.metadata?.width && /* @__PURE__ */ jsx(MetaRow, { label: "Dimensions", value: `${file.metadata.width}\xD7${file.metadata.height}` }),
3009
2816
  file.metadata?.duration && /* @__PURE__ */ jsx(MetaRow, { label: "Duration", value: `${Math.round(file.metadata.duration)}s` }),
3010
2817
  file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
3011
2818
  /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
3012
2819
  ] }),
3013
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }, children: [
2820
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__badges", children: [
3014
2821
  file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
3015
2822
  file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
3016
2823
  file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
@@ -3018,8 +2825,9 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
3018
2825
  url && /* @__PURE__ */ jsx(
3019
2826
  "button",
3020
2827
  {
2828
+ className: "silo-btn silo-btn--full",
2829
+ style: { marginTop: 4 },
3021
2830
  onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
3022
- style: { ...btnStyle2, marginTop: 4, width: "100%", textAlign: "center" },
3023
2831
  children: "Copy URL"
3024
2832
  }
3025
2833
  )
@@ -3031,64 +2839,13 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
3031
2839
  }
3032
2840
  function MetaRow({ label, value, highlight }) {
3033
2841
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3034
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)", fontWeight: 500 }, children: label }),
3035
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: highlight ? "var(--silo-success, #22c55e)" : "var(--silo-text, #0f172a)", fontWeight: highlight ? 600 : 400 }, children: value })
2842
+ /* @__PURE__ */ jsx("span", { className: "silo-file-preview__meta-label", children: label }),
2843
+ /* @__PURE__ */ jsx("span", { className: `silo-file-preview__meta-value${highlight ? " silo-file-preview__meta-value--highlight" : ""}`, children: value })
3036
2844
  ] });
3037
2845
  }
3038
2846
  function Badge({ children, muted }) {
3039
- return /* @__PURE__ */ jsx("span", { style: {
3040
- fontSize: 10,
3041
- fontWeight: 700,
3042
- letterSpacing: "0.05em",
3043
- padding: "2px 7px",
3044
- borderRadius: 99,
3045
- border: "1px solid var(--silo-border, #e2e8f0)",
3046
- color: muted ? "var(--silo-text-muted, #94a3b8)" : "var(--silo-accent, #6366f1)",
3047
- background: "transparent"
3048
- }, children });
2847
+ return /* @__PURE__ */ jsx("span", { className: `silo-file-preview__badge${muted ? " silo-file-preview__badge--muted" : ""}`, children });
3049
2848
  }
3050
- var modal = {
3051
- position: "fixed",
3052
- top: "50%",
3053
- left: "50%",
3054
- transform: "translate(-50%, -50%)",
3055
- zIndex: 1001,
3056
- width: "min(92vw, 560px)",
3057
- maxHeight: "90vh",
3058
- display: "flex",
3059
- flexDirection: "column",
3060
- borderRadius: "var(--silo-radius, 16px)",
3061
- background: "var(--silo-bg, #fff)",
3062
- boxShadow: "0 24px 80px rgba(0,0,0,0.35)",
3063
- overflow: "hidden",
3064
- fontFamily: "var(--silo-font, inherit)"
3065
- };
3066
- var closeBtn = {
3067
- background: "none",
3068
- border: "none",
3069
- cursor: "pointer",
3070
- fontSize: 16,
3071
- color: "var(--silo-text-muted, #94a3b8)",
3072
- lineHeight: 1,
3073
- padding: "2px 4px",
3074
- flexShrink: 0
3075
- };
3076
- var btnStyle2 = {
3077
- fontSize: 12,
3078
- fontWeight: 600,
3079
- padding: "7px 14px",
3080
- borderRadius: 8,
3081
- border: "1px solid var(--silo-border, #e2e8f0)",
3082
- background: "transparent",
3083
- color: "var(--silo-text, #0f172a)",
3084
- cursor: "pointer"
3085
- };
3086
- var metaGrid = {
3087
- display: "grid",
3088
- gridTemplateColumns: "auto 1fr",
3089
- gap: "5px 16px",
3090
- alignItems: "baseline"
3091
- };
3092
2849
 
3093
2850
  export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoOptions, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
3094
2851
  //# sourceMappingURL=index.js.map