@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.
@@ -86,20 +86,18 @@ function DropZone({
86
86
  );
87
87
  const rootStyle = {
88
88
  ...vars,
89
- fontFamily: "var(--silo-font)",
90
- border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
91
- borderRadius: "var(--silo-radius)",
92
- backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
93
- color: "var(--silo-text)",
94
- cursor: disabled ? "not-allowed" : "pointer",
95
- transition: "border-color 0.15s, background-color 0.15s",
96
- opacity: disabled ? 0.5 : 1,
97
89
  ...style
98
90
  };
91
+ const cls = [
92
+ "silo-dropzone",
93
+ dragging ? "silo-dropzone--dragging" : "",
94
+ disabled ? "silo-dropzone--disabled" : "",
95
+ className
96
+ ].filter(Boolean).join(" ");
99
97
  return /* @__PURE__ */ jsxs(
100
98
  "div",
101
99
  {
102
- className: `silo-dropzone${className ? ` ${className}` : ""}`,
100
+ className: cls,
103
101
  style: rootStyle,
104
102
  onDragOver: (e) => {
105
103
  e.preventDefault();
@@ -137,30 +135,12 @@ function ProgressBar({ progress, className = "", style }) {
137
135
  "div",
138
136
  {
139
137
  className: `silo-progress-track${className ? ` ${className}` : ""}`,
140
- style: {
141
- height: "6px",
142
- borderRadius: "3px",
143
- backgroundColor: "rgba(99,102,241,0.15)",
144
- overflow: "hidden",
145
- ...style
146
- },
138
+ style,
147
139
  role: "progressbar",
148
140
  "aria-valuenow": progress,
149
141
  "aria-valuemin": 0,
150
142
  "aria-valuemax": 100,
151
- children: /* @__PURE__ */ jsx(
152
- "div",
153
- {
154
- className: "silo-progress-fill",
155
- style: {
156
- height: "100%",
157
- width: `${progress}%`,
158
- backgroundColor: "var(--silo-accent, #6366f1)",
159
- borderRadius: "3px",
160
- transition: "width 0.2s ease"
161
- }
162
- }
163
- )
143
+ children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
164
144
  }
165
145
  );
166
146
  }
@@ -329,13 +309,13 @@ function ImageUploader({
329
309
  style: { padding: "32px 24px", textAlign: "center" },
330
310
  children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
331
311
  /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
332
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
312
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
333
313
  ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
334
- 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" }) }),
314
+ 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" }) }),
335
315
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
336
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
337
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
338
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
316
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste sua imagem aqui" }),
317
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
318
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
339
319
  "Tamanho m\xE1ximo: ",
340
320
  formatBytes(maxSize)
341
321
  ] })
@@ -344,41 +324,27 @@ function ImageUploader({
344
324
  }
345
325
  ),
346
326
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
347
- 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)" } }) }),
348
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
349
- /* @__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" }),
327
+ 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)" } }) }),
328
+ /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
329
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
350
330
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
351
331
  ] }),
352
332
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
353
- /* @__PURE__ */ jsx(
354
- "button",
355
- {
356
- onClick: () => {
357
- setStagedFile(null);
358
- setPreview(null);
359
- },
360
- 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" },
361
- children: "Cancelar"
362
- }
363
- ),
364
- /* @__PURE__ */ jsx(
365
- "button",
366
- {
367
- onClick: () => {
368
- const f = stagedFile;
369
- setStagedFile(null);
370
- void doUpload(f, imageOpts);
371
- },
372
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
373
- children: "Enviar imagem"
374
- }
375
- )
333
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
334
+ setStagedFile(null);
335
+ setPreview(null);
336
+ }, children: "Cancelar" }),
337
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
338
+ const f = stagedFile;
339
+ setStagedFile(null);
340
+ void doUpload(f, imageOpts);
341
+ }, children: "Enviar imagem" })
376
342
  ] })
377
343
  ] }),
378
- 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: [
344
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
379
345
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
380
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
381
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
346
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(state.status, progress) }),
347
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
382
348
  progress,
383
349
  "%"
384
350
  ] })
@@ -386,61 +352,33 @@ function ImageUploader({
386
352
  /* @__PURE__ */ jsx(ProgressBar, { progress })
387
353
  ] })),
388
354
  isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
389
- /* @__PURE__ */ jsx(
390
- "button",
391
- {
392
- onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }),
393
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
394
- children: "\u25B6 Retomar envio"
395
- }
396
- ),
397
- /* @__PURE__ */ jsx(
398
- "button",
399
- {
400
- onClick: () => {
401
- abort();
402
- setPreview(null);
403
- },
404
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
405
- children: "Cancelar"
406
- }
407
- )
355
+ /* @__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" }),
356
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
357
+ abort();
358
+ setPreview(null);
359
+ }, children: "Cancelar" })
408
360
  ] }),
409
- 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: [
361
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
410
362
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
411
363
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
412
364
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
413
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
365
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
414
366
  ] }),
415
- /* @__PURE__ */ jsx(
416
- "button",
417
- {
418
- onClick: () => {
419
- reset();
420
- setPreview(null);
421
- },
422
- 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 },
423
- children: "Enviar outra"
424
- }
425
- )
367
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
368
+ reset();
369
+ setPreview(null);
370
+ }, children: "Enviar outra" })
426
371
  ] }),
427
- 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: [
372
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
428
373
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
429
374
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
430
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
431
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
375
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
376
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
432
377
  ] }),
433
- /* @__PURE__ */ jsx(
434
- "button",
435
- {
436
- onClick: () => {
437
- reset();
438
- setPreview(null);
439
- },
440
- 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 },
441
- children: "Tentar novamente"
442
- }
443
- )
378
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
379
+ reset();
380
+ setPreview(null);
381
+ }, children: "Tentar novamente" })
444
382
  ] })
445
383
  ] });
446
384
  }
@@ -655,13 +593,13 @@ function VideoUploader({
655
593
  style: { padding: "32px 24px", textAlign: "center" },
656
594
  children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
657
595
  /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
658
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
596
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar o v\xEDdeo" })
659
597
  ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
660
- 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" }) }),
598
+ 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" }) }),
661
599
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
662
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
663
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
664
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
600
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste seu v\xEDdeo aqui" }),
601
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
602
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
665
603
  "MP4, MOV, MKV, WebM",
666
604
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
667
605
  ] })
@@ -670,112 +608,70 @@ function VideoUploader({
670
608
  }
671
609
  ),
672
610
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
673
- 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 }) }),
674
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
675
- /* @__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" }),
611
+ 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 }) }),
612
+ /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
613
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
676
614
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
677
615
  ] }),
678
616
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
679
- /* @__PURE__ */ jsx(
680
- "button",
681
- {
682
- onClick: () => {
683
- setStagedFile(null);
684
- setPreview(null);
685
- setVideoOpts(createInitialVideoOpts(video));
686
- },
687
- 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" },
688
- children: "Cancelar"
689
- }
690
- ),
691
- /* @__PURE__ */ jsx(
692
- "button",
693
- {
694
- onClick: () => {
695
- const f = stagedFile;
696
- setStagedFile(null);
697
- void doUpload(f, videoOpts);
698
- setVideoOpts(createInitialVideoOpts(video));
699
- },
700
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
701
- children: "Enviar v\xEDdeo"
702
- }
703
- )
617
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
618
+ setStagedFile(null);
619
+ setPreview(null);
620
+ setVideoOpts(createInitialVideoOpts(video));
621
+ }, children: "Cancelar" }),
622
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
623
+ const f = stagedFile;
624
+ setStagedFile(null);
625
+ void doUpload(f, videoOpts);
626
+ setVideoOpts(createInitialVideoOpts(video));
627
+ }, children: "Enviar v\xEDdeo" })
704
628
  ] })
705
629
  ] }),
706
- 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: [
630
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
707
631
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
708
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
632
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
709
633
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
710
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
634
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
711
635
  progress,
712
636
  "%"
713
637
  ] }),
714
- /* @__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" })
638
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, children: "Pausar" })
715
639
  ] })
716
640
  ] }),
717
641
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
718
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
642
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 11 }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
719
643
  ] })),
720
644
  isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
721
- /* @__PURE__ */ jsx(
722
- "button",
723
- {
724
- onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
725
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
726
- children: "\u25B6 Retomar envio"
727
- }
728
- ),
729
- /* @__PURE__ */ jsx(
730
- "button",
731
- {
732
- onClick: () => {
733
- abort();
734
- setPreview(null);
735
- },
736
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
737
- children: "Cancelar"
738
- }
739
- )
645
+ /* @__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" }),
646
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
647
+ abort();
648
+ setPreview(null);
649
+ }, children: "Cancelar" })
740
650
  ] }),
741
- 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: [
651
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, children: [
742
652
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
743
653
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
744
654
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
745
655
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
746
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
656
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
747
657
  ] }),
748
- /* @__PURE__ */ jsx(
749
- "button",
750
- {
751
- onClick: () => {
752
- reset();
753
- setPreview(null);
754
- },
755
- 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 },
756
- children: "Enviar outro"
757
- }
758
- )
658
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
659
+ reset();
660
+ setPreview(null);
661
+ }, children: "Enviar outro" })
759
662
  ] }),
760
- /* @__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." })
663
+ /* @__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." })
761
664
  ] }),
762
- 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: [
665
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
763
666
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
764
667
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
765
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
766
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
668
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
669
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
767
670
  ] }),
768
- /* @__PURE__ */ jsx(
769
- "button",
770
- {
771
- onClick: () => {
772
- reset();
773
- setPreview(null);
774
- },
775
- 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 },
776
- children: "Tentar novamente"
777
- }
778
- )
671
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
672
+ reset();
673
+ setPreview(null);
674
+ }, children: "Tentar novamente" })
779
675
  ] })
780
676
  ] });
781
677
  }
@@ -924,11 +820,11 @@ function FileUploader({
924
820
  onFiles: handleFiles,
925
821
  style: { padding: "28px 24px", textAlign: "center" },
926
822
  children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
927
- 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" }) }),
823
+ 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" }) }),
928
824
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
929
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
930
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
931
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
825
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
826
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
827
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
932
828
  "Tamanho m\xE1ximo: ",
933
829
  formatBytes(maxSize)
934
830
  ] })
@@ -937,8 +833,8 @@ function FileUploader({
937
833
  }
938
834
  ),
939
835
  staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
940
- /* @__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` }),
941
- 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: [
836
+ /* @__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` }),
837
+ staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "silo-card", children: [
942
838
  /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
943
839
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
944
840
  editingIndex === i ? /* @__PURE__ */ jsx(
@@ -958,28 +854,30 @@ function FileUploader({
958
854
  }
959
855
  if (e.key === "Escape") setEditingIndex(null);
960
856
  },
961
- 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)" }
857
+ 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)" }
962
858
  }
963
859
  ) : /* @__PURE__ */ jsxs(
964
860
  "div",
965
861
  {
966
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
862
+ className: "silo-text",
863
+ style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
967
864
  onClick: () => allowRename && setEditingIndex(i),
968
865
  title: allowRename ? "Clique para renomear" : void 0,
969
866
  children: [
970
867
  effectiveName(i, staged),
971
- renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
868
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
972
869
  ]
973
870
  }
974
871
  ),
975
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
872
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
976
873
  ] }),
977
874
  allowRename && /* @__PURE__ */ jsx(
978
875
  "button",
979
876
  {
980
877
  onClick: () => setEditingIndex(i),
981
878
  title: "Renomear",
982
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
879
+ className: "silo-text-muted",
880
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
983
881
  children: "\u270F\uFE0F"
984
882
  }
985
883
  ),
@@ -991,42 +889,29 @@ function FileUploader({
991
889
  if (next.length === 0) clearStaging();
992
890
  else setStaged(next);
993
891
  },
994
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
892
+ className: "silo-text-muted",
893
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
995
894
  children: "\xD7"
996
895
  }
997
896
  )
998
897
  ] }, i)),
999
- showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1000
- /* @__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" }),
898
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
899
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
1001
900
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
1002
901
  ] }),
1003
- showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1004
- /* @__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" }),
902
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
903
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
1005
904
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
1006
905
  ] }),
1007
906
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
1008
- /* @__PURE__ */ jsx(
1009
- "button",
1010
- {
1011
- onClick: clearStaging,
1012
- 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" },
1013
- children: "Cancelar"
1014
- }
1015
- ),
1016
- /* @__PURE__ */ jsx(
1017
- "button",
1018
- {
1019
- onClick: handleConfirmUpload,
1020
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
1021
- children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
1022
- }
1023
- )
907
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: clearStaging, children: "Cancelar" }),
908
+ /* @__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" })
1024
909
  ] })
1025
910
  ] }),
1026
- 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: [
911
+ isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
1027
912
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
1028
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
1029
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
913
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel3(single.state.status, singleProgress) }),
914
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
1030
915
  singleProgress,
1031
916
  "%"
1032
917
  ] })
@@ -1040,17 +925,17 @@ function FileUploader({
1040
925
  const isPaused = st.status === "paused";
1041
926
  const isDone = st.status === "done";
1042
927
  const isErr = st.status === "error";
1043
- return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
1044
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
928
+ return /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px" }, children: [
929
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
1045
930
  /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
1046
931
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1047
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
1048
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
932
+ /* @__PURE__ */ jsx("div", { className: "silo-text", style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
933
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11 }, children: formatBytes(f.file.size) })
1049
934
  ] }),
1050
935
  isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
1051
- isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
1052
- !isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
1053
- !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)
936
+ isErr && /* @__PURE__ */ jsx("span", { className: "silo-text-error", style: { fontSize: 12, fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
937
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: isPaused ? "silo-text-muted" : "silo-text-accent", style: { fontSize: 12, fontWeight: 700, flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
938
+ !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)
1054
939
  ] }),
1055
940
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
1056
941
  ] }, i);
@@ -1059,40 +944,41 @@ function FileUploader({
1059
944
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
1060
945
  "button",
1061
946
  {
947
+ className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
948
+ style: { flex: 1 },
1062
949
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
1063
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1064
950
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
1065
951
  }
1066
952
  ),
1067
953
  /* @__PURE__ */ jsx(
1068
954
  "button",
1069
955
  {
956
+ className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
1070
957
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
1071
- 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" },
1072
958
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
1073
959
  }
1074
960
  )
1075
961
  ] }),
1076
- 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: [
962
+ batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
1077
963
  /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
1078
964
  /* @__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!` })
1079
965
  ] })
1080
966
  ] }),
1081
- 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: [
967
+ single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
1082
968
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
1083
969
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1084
970
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
1085
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
971
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
1086
972
  ] }),
1087
- /* @__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" })
973
+ /* @__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" })
1088
974
  ] }),
1089
- 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: [
975
+ single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
1090
976
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
1091
977
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1092
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1093
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
978
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
979
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: single.state.error.message })
1094
980
  ] }),
1095
- /* @__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" })
981
+ /* @__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" })
1096
982
  ] })
1097
983
  ] });
1098
984
  }