@geekapps/silo-elements-nextjs 0.2.34 → 0.2.36

package/dist/FileUploader.d.ts

@@ -2,6 +2,6 @@ import * as react from 'react';
 import { FileUploaderProps } from './types.js';
 import '@geekapps/silo-nextjs';
 
-declare function FileUploader({ bucket, visibility, onUpload, onBatchUpload, onError, className, style, disabled, maxSize, accept, multiple, allowRename, showImageOptions, showVideoOptions, image, video, theme, renderIcon, renderProgress, renderSuccess, renderError, children, }: FileUploaderProps): react.JSX.Element;
+declare function FileUploader({ bucket, onUpload, onBatchUpload, onError, className, style, disabled, maxSize, accept, multiple, allowRename, showImageOptions, showVideoOptions, image, video, theme, renderIcon, renderProgress, renderSuccess, renderError, children, }: FileUploaderProps): react.JSX.Element;
 
 export { FileUploader };

package/dist/FileUploader.js

@@ -86,20 +86,18 @@ function DropZone({
   );
   const rootStyle = {
     ...vars,
-    fontFamily: "var(--silo-font)",
-    border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
-    borderRadius: "var(--silo-radius)",
-    backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
-    color: "var(--silo-text)",
-    cursor: disabled ? "not-allowed" : "pointer",
-    transition: "border-color 0.15s, background-color 0.15s",
-    opacity: disabled ? 0.5 : 1,
     ...style
   };
+  const cls = [
+    "silo-dropzone",
+    dragging ? "silo-dropzone--dragging" : "",
+    disabled ? "silo-dropzone--disabled" : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `silo-dropzone${className ? ` ${className}` : ""}`,
+      className: cls,
       style: rootStyle,
       onDragOver: (e) => {
         e.preventDefault();
@@ -137,30 +135,12 @@ function ProgressBar({ progress, className = "", style }) {
     "div",
     {
       className: `silo-progress-track${className ? ` ${className}` : ""}`,
-      style: {
-        height: "6px",
-        borderRadius: "3px",
-        backgroundColor: "rgba(99,102,241,0.15)",
-        overflow: "hidden",
-        ...style
-      },
+      style,
       role: "progressbar",
       "aria-valuenow": progress,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "silo-progress-fill",
-          style: {
-            height: "100%",
-            width: `${progress}%`,
-            backgroundColor: "var(--silo-accent, #6366f1)",
-            borderRadius: "3px",
-            transition: "width 0.2s ease"
-          }
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
     }
   );
 }
@@ -391,7 +371,6 @@ function uploadLabel(status, progress) {
 }
 function FileUploader({
   bucket,
-  visibility = "private",
   onUpload,
   onBatchUpload,
   onError,
@@ -456,7 +435,7 @@ function FileUploader({
     const effectiveVideo = showVideoOptions ? resolvedVideo : video ?? resolvedVideo;
     if (multiple && files.length > 1) {
       try {
-        const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
+        const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, image: effectiveImage, video: effectiveVideo });
         onBatchUpload?.(results);
         results.forEach((r) => onUpload?.(r));
       } catch (err) {
@@ -466,13 +445,13 @@ function FileUploader({
       const file = files[0];
       if (!file) return;
       try {
-        const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
+        const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, image: effectiveImage, video: effectiveVideo });
         if (result) onUpload?.(result);
       } catch (err) {
         onError?.(err instanceof Error ? err : new Error(String(err)));
       }
     }
-  }, [single, batch, multiple, bucket, visibility, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
+  }, [single, batch, multiple, bucket, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
   const handleFiles = useCallback(async (files) => {
     const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
     if (needsStaging) {
@@ -513,11 +492,11 @@ function FileUploader({
         onFiles: handleFiles,
         style: { padding: "28px 24px", textAlign: "center" },
         children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
-          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" }) }),
+          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" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
-            maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
+            /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
+            /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
               "Tamanho m\xE1ximo: ",
               formatBytes(maxSize)
             ] })
@@ -526,8 +505,8 @@ function FileUploader({
       }
     ),
     staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__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` }),
-      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: [
+      /* @__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` }),
+      staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "silo-card", children: [
         /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
         /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
           editingIndex === i ? /* @__PURE__ */ jsx(
@@ -547,28 +526,30 @@ function FileUploader({
                 }
                 if (e.key === "Escape") setEditingIndex(null);
               },
-              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)" }
+              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)" }
             }
           ) : /* @__PURE__ */ jsxs(
             "div",
             {
-              style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
+              className: "silo-text",
+              style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
               onClick: () => allowRename && setEditingIndex(i),
               title: allowRename ? "Clique para renomear" : void 0,
               children: [
                 effectiveName(i, staged),
-                renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
+                renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
+          /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
         ] }),
         allowRename && /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setEditingIndex(i),
             title: "Renomear",
-            style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
+            className: "silo-text-muted",
+            style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
             children: "\u270F\uFE0F"
           }
         ),
@@ -580,42 +561,29 @@ function FileUploader({
               if (next.length === 0) clearStaging();
               else setStaged(next);
             },
-            style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
+            className: "silo-text-muted",
+            style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
             children: "\xD7"
           }
         )
       ] }, i)),
-      showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
-        /* @__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" }),
+      showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
         /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
       ] }),
-      showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
-        /* @__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" }),
+      showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
+        /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
         /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
       ] }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: clearStaging,
-            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" },
-            children: "Cancelar"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: handleConfirmUpload,
-            style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
-            children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
-          }
-        )
+        /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: clearStaging, children: "Cancelar" }),
+        /* @__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" })
       ] })
     ] }),
-    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: [
+    isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(single.state.status, singleProgress) }),
-        /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(single.state.status, singleProgress) }),
+        /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
           singleProgress,
           "%"
         ] })
@@ -629,17 +597,17 @@ function FileUploader({
         const isPaused = st.status === "paused";
         const isDone = st.status === "done";
         const isErr = st.status === "error";
-        return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
-          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
+        return /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
             /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
             /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
-              /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
+              /* @__PURE__ */ jsx("div", { className: "silo-text", style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
+              /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11 }, children: formatBytes(f.file.size) })
             ] }),
             isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
-            isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
-            !isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
-            !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)
+            isErr && /* @__PURE__ */ jsx("span", { className: "silo-text-error", style: { fontSize: 12, fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
+            !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: isPaused ? "silo-text-muted" : "silo-text-accent", style: { fontSize: 12, fontWeight: 700, flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
+            !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)
           ] }),
           !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
         ] }, i);
@@ -648,40 +616,41 @@ function FileUploader({
         batch.state.status !== "done" && /* @__PURE__ */ jsx(
           "button",
           {
+            className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
+            style: { flex: 1 },
             onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
-            style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
             children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
           }
         ),
         /* @__PURE__ */ jsx(
           "button",
           {
+            className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
             onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
-            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" },
             children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
           }
         )
       ] }),
-      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: [
+      batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
         /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
         /* @__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!` })
       ] })
     ] }),
-    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: [
+    single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
+        /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
       ] }),
-      /* @__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" })
+      /* @__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" })
     ] }),
-    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: [
+    single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
       /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
+        /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
+        /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: single.state.error.message })
       ] }),
-      /* @__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" })
+      /* @__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" })
     ] })
   ] });
 }