@geekapps/silo-elements-nextjs 0.2.35 → 0.2.37

package/dist/VideoUploader.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 = [
+    "border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 text-slate-900 cursor-pointer outline-none transition-colors duration-150",
+    dragging ? "border-indigo-500 bg-slate-100" : "hover:border-indigo-500 hover:bg-slate-100",
+    disabled ? "opacity-50 cursor-not-allowed" : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `silo-dropzone${className ? ` ${className}` : ""}`,
+      className: cls,
       style: rootStyle,
       onDragOver: (e) => {
         e.preventDefault();
@@ -122,7 +120,7 @@ function DropZone({
             type: "file",
             accept,
             multiple,
-            style: { display: "none" },
+            className: "hidden",
             onChange: handleChange,
             disabled
           }
@@ -136,14 +134,8 @@ function ProgressBar({ progress, className = "", style }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `silo-progress-track${className ? ` ${className}` : ""}`,
-      style: {
-        height: "6px",
-        borderRadius: "3px",
-        backgroundColor: "rgba(99,102,241,0.15)",
-        overflow: "hidden",
-        ...style
-      },
+      className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
+      style,
       role: "progressbar",
       "aria-valuenow": progress,
       "aria-valuemin": 0,
@@ -151,14 +143,8 @@ function ProgressBar({ progress, className = "", style }) {
       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"
-          }
+          className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
+          style: { width: `${progress}%` }
         }
       )
     }
@@ -179,6 +165,27 @@ var RESOLUTION_LABELS = {
   "1440": "1440p",
   "2160": "4K"
 };
+function optionBtnCls(active) {
+  return `py-1 px-2.5 rounded-md text-xs font-semibold cursor-pointer transition-colors border ${active ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`;
+}
+function Toggle({ checked, onToggle, label }) {
+  return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1.5 cursor-pointer select-none text-xs text-slate-900 font-medium", onClick: onToggle, children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `relative inline-block w-8 h-[18px] rounded-full shrink-0 cursor-pointer transition-colors duration-150 ${checked ? "bg-indigo-500" : "bg-slate-200"}`,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
+            style: { left: checked ? "16px" : "2px" }
+          }
+        )
+      }
+    ),
+    label
+  ] });
+}
 function VideoOptions({ value, onChange, style }) {
   const codec = value.codec ?? "h264";
   const transcoding = value.transcoding ?? "auto";
@@ -195,76 +202,31 @@ function VideoOptions({ value, onChange, style }) {
   function toggleFeature(key) {
     onChange({ ...value, [key]: !value[key] });
   }
-  const btn = (active) => ({
-    padding: "4px 10px",
-    borderRadius: 6,
-    border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
-    background: active ? "var(--silo-accent, #6366f1)" : "transparent",
-    color: active ? "#fff" : "var(--silo-text, #0f172a)",
-    fontSize: 12,
-    fontWeight: 600,
-    cursor: "pointer"
-  });
-  const toggle = (on) => ({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: 6,
-    cursor: "pointer",
-    userSelect: "none",
-    fontSize: 12,
-    color: "var(--silo-text, #0f172a)",
-    fontWeight: 500
-  });
-  function Toggle({ checked, onToggle, label }) {
-    return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
-      /* @__PURE__ */ jsx("span", { style: {
-        width: 32,
-        height: 18,
-        borderRadius: 9,
-        flexShrink: 0,
-        background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
-        position: "relative",
-        transition: "background 0.15s",
-        cursor: "pointer"
-      }, children: /* @__PURE__ */ jsx("span", { style: {
-        position: "absolute",
-        top: 2,
-        left: checked ? 16 : 2,
-        width: 14,
-        height: 14,
-        borderRadius: "50%",
-        background: "#fff",
-        transition: "left 0.15s",
-        boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
-      } }) }),
-      label
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Codec" }),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: CODECS.map((c) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Codec" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           title: c.hint,
           onClick: () => onChange({ ...value, codec: c.value }),
-          style: btn(codec === c.value),
+          className: optionBtnCls(codec === c.value),
           children: c.label
         },
         c.value
       )) })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Resolu\xE7\xF5es" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Auto" }),
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Resolu\xE7\xF5es" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), className: optionBtnCls(isAuto), children: "Auto" }),
         RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
             onClick: () => toggleRes(r),
-            style: btn(!isAuto && selectedRes.includes(r)),
+            className: optionBtnCls(!isAuto && selectedRes.includes(r)),
             children: RESOLUTION_LABELS[r]
           },
           r
@@ -272,8 +234,8 @@ function VideoOptions({ value, onChange, style }) {
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 8 }, children: "Recursos" }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-2", children: "Recursos" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
         /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
         /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
         /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
@@ -358,19 +320,14 @@ function VideoUploader({
   }, [showVideoOptions, video, videoOpts, doUpload, showPreview]);
   const containerStyle = {
     ...vars,
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    width: "100%",
-    fontFamily: "var(--silo-font)",
     ...style
   };
   const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
   const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
   const isPaused = state.status === "idle" && preview !== null && !stagedFile;
-  if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+  if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
+  if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx(
       DropZone,
       {
@@ -381,15 +338,15 @@ function VideoUploader({
         disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "32px 24px", textAlign: "center" },
-        children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
-          /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
-        ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, 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: "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" }) }),
+        children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx("video", { src: preview, className: "max-w-full max-h-[180px] rounded-lg", muted: true, playsInline: true }),
+          /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar o v\xEDdeo" })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "text-slate-400 opacity-50", 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" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
-            /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
+            /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste seu v\xEDdeo aqui" }),
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
+            /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
               "MP4, MOV, MKV, WebM",
               maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
             ] })
@@ -398,109 +355,116 @@ function VideoUploader({
       }
     ),
     showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      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 }) }),
-      /* @__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" }),
+      preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden bg-black", children: /* @__PURE__ */ jsx("video", { src: preview, className: "w-full max-h-[200px] block", muted: true, playsInline: true, controls: true }) }),
+      /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", 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 }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
+            className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
             onClick: () => {
               setStagedFile(null);
               setPreview(null);
               setVideoOpts(createInitialVideoOpts(video));
             },
-            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",
           {
+            className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer hover:opacity-90",
             onClick: () => {
               const f = stagedFile;
               setStagedFile(null);
               void doUpload(f, videoOpts);
               setVideoOpts(createInitialVideoOpts(video));
             },
-            style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
             children: "Enviar v\xEDdeo"
           }
         )
       ] })
     ] }),
-    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: [
-      /* @__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(state.status, progress) }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
+    isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel(state.status, progress) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
             progress,
             "%"
           ] }),
-          /* @__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" })
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "inline-flex items-center justify-center text-[11px] font-semibold py-0.5 px-2 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
+              onClick: pause,
+              children: "Pausar"
+            }
+          )
         ] })
       ] }),
       /* @__PURE__ */ jsx(ProgressBar, { progress }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
     ] })),
-    isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+    isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
       /* @__PURE__ */ jsx(
         "button",
         {
+          className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90",
           onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
-          style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
           children: "\u25B6 Retomar envio"
         }
       ),
       /* @__PURE__ */ jsx(
         "button",
         {
+          className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
           onClick: () => {
             abort();
             setPreview(null);
           },
-          style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
           children: "Cancelar"
         }
       )
     ] }),
-    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: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
-        /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "V\xEDdeo enviado com sucesso!" }),
+          /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
         ] }),
         /* @__PURE__ */ jsx(
           "button",
           {
+            className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-green-500/30 text-green-700 bg-transparent cursor-pointer hover:bg-green-500/10 shrink-0",
             onClick: () => {
               reset();
               setPreview(null);
             },
-            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("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." })
+      /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-500 px-3 py-2 rounded-lg bg-green-500/[0.06] border border-green-500/15", children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
     ] }),
-    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: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
-      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
+    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
+        /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
       ] }),
       /* @__PURE__ */ jsx(
         "button",
         {
+          className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-red-500/30 text-red-500 bg-transparent cursor-pointer hover:bg-red-500/10 shrink-0",
           onClick: () => {
             reset();
             setPreview(null);
           },
-          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"
         }
       )