@geekapps/silo-elements-nextjs 0.2.36 → 0.2.38

package/dist/MediaUploader.js

@@ -89,9 +89,9 @@ function DropZone({
     ...style
   };
   const cls = [
-    "silo-dropzone",
-    dragging ? "silo-dropzone--dragging" : "",
-    disabled ? "silo-dropzone--disabled" : "",
+    "silo-border-2 silo-border-dashed silo-border-slate-200 silo-rounded-xl silo-bg-slate-50 silo-text-slate-900 silo-cursor-pointer silo-outline-none silo-transition-colors silo-duration-150",
+    dragging ? "silo-border-indigo-500 silo-bg-slate-100" : "hover:silo-border-indigo-500 hover:silo-bg-slate-100",
+    disabled ? "silo-opacity-50 silo-cursor-not-allowed" : "",
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
@@ -120,7 +120,7 @@ function DropZone({
             type: "file",
             accept,
             multiple,
-            style: { display: "none" },
+            className: "hidden",
             onChange: handleChange,
             disabled
           }
@@ -134,13 +134,19 @@ function ProgressBar({ progress, className = "", style }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `silo-progress-track${className ? ` ${className}` : ""}`,
+      className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
       style,
       role: "progressbar",
       "aria-valuenow": progress,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
+          style: { width: `${progress}%` }
+        }
+      )
     }
   );
 }
@@ -153,60 +159,38 @@ var FORMATS = [
 function ImageOptions({ value, onChange, style }) {
   const fmt = value.format ?? "webp";
   const optimize = value.optimize ?? true;
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", 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: "Formato de sa\xEDda" }),
-      /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: FORMATS.map((f) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Formato de sa\xEDda" }),
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
           onClick: () => onChange({ ...value, format: f.value }),
           title: f.hint,
-          style: {
-            padding: "4px 12px",
-            borderRadius: 6,
-            border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
-            background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
-            color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
-            fontSize: 12,
-            fontWeight: 600,
-            cursor: "pointer"
-          },
+          className: `py-1 px-3 rounded-md text-xs font-semibold cursor-pointer transition-colors border${fmt === f.value ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`,
           children: f.label
         },
         f.value
       )) })
     ] }),
-    /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
+    /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
       /* @__PURE__ */ jsx(
         "span",
         {
           onClick: () => onChange({ ...value, optimize: !optimize }),
-          style: {
-            width: 36,
-            height: 20,
-            borderRadius: 10,
-            background: optimize ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
-            position: "relative",
-            flexShrink: 0,
-            transition: "background 0.15s",
-            cursor: "pointer"
-          },
-          children: /* @__PURE__ */ jsx("span", { style: {
-            position: "absolute",
-            top: 2,
-            left: optimize ? 18 : 2,
-            width: 16,
-            height: 16,
-            borderRadius: "50%",
-            background: "#fff",
-            transition: "left 0.15s",
-            boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
-          } })
+          className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
+          children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
+              style: { left: optimize ? "18px" : "2px" }
+            }
+          )
         }
       ),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text, #0f172a)", fontWeight: 500 }, children: "Otimizar tamanho" }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
+      /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
+      /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
     ] })
   ] });
 }
@@ -284,19 +268,14 @@ function ImageUploader({
   }, [showImageOptions, image, imageOpts, 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-image-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,
       {
@@ -307,15 +286,15 @@ function ImageUploader({
         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("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
-          /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
-        ] }) : /* @__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", 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" }) }),
+        children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "max-w-full max-h-[200px] rounded-lg object-contain" }),
+          /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar a imagem" })
+        ] }) : /* @__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: "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" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste sua imagem 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: [
+            /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste sua imagem aqui" }),
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
               "Tamanho m\xE1ximo: ",
               formatBytes(maxSize)
             ] })
@@ -324,61 +303,103 @@ function ImageUploader({
       }
     ),
     showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      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)" } }) }),
-      /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
-        /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
+      preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "w-full max-h-[200px] object-contain block bg-slate-50" }) }),
+      /* @__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{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
         /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
       ] }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
-          setStagedFile(null);
-          setPreview(null);
-        }, children: "Cancelar" }),
-        /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
-          const f = stagedFile;
-          setStagedFile(null);
-          void doUpload(f, imageOpts);
-        }, children: "Enviar imagem" })
+      /* @__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 transition-colors hover:bg-slate-100",
+            onClick: () => {
+              setStagedFile(null);
+              setPreview(null);
+            },
+            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 transition-opacity hover:opacity-90",
+            onClick: () => {
+              const f = stagedFile;
+              setStagedFile(null);
+              void doUpload(f, imageOpts);
+            },
+            children: "Enviar imagem"
+          }
+        )
       ] })
     ] }),
-    isUploading && (renderProgress ? renderProgress(progress) : /* @__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", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(state.status, progress) }),
-        /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, 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("span", { className: "text-[13px] font-bold text-indigo-500", children: [
           progress,
           "%"
         ] })
       ] }),
       /* @__PURE__ */ jsx(ProgressBar, { progress })
     ] })),
-    isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-      /* @__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" }),
-      /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
-        abort();
-        setPreview(null);
-      }, children: "Cancelar" })
+    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 }, image: imageOpts }),
+          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);
+          },
+          children: "Cancelar"
+        }
+      )
     ] }),
-    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 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
-        /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", 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: "Imagem enviada com sucesso!" }),
+        /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
       ] }),
-      /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
-        reset();
-        setPreview(null);
-      }, children: "Enviar outra" })
+      /* @__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);
+          },
+          children: "Enviar outra"
+        }
+      )
     ] }),
-    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 }, children: [
-        /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
-        /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, 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 a imagem" }),
+        /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
       ] }),
-      /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
-        reset();
-        setPreview(null);
-      }, children: "Tentar novamente" })
+      /* @__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);
+          },
+          children: "Tentar novamente"
+        }
+      )
     ] })
   ] });
 }
@@ -397,6 +418,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";
@@ -413,76 +455,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
@@ -490,8 +487,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)" }),
@@ -568,19 +565,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,
       {
@@ -591,15 +583,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", { className: "silo-text-muted", style: { fontSize: 12 }, 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", 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" }) }),
+        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", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste seu v\xEDdeo aqui" }),
-            /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
-            /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, 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)}` : ""
             ] })
@@ -608,70 +600,119 @@ function VideoUploader({
       }
     ),
     showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
-      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 }) }),
-      /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
-        /* @__PURE__ */ jsx("div", { className: "silo-section-header", 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__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
-          setStagedFile(null);
-          setPreview(null);
-          setVideoOpts(createInitialVideoOpts(video));
-        }, children: "Cancelar" }),
-        /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
-          const f = stagedFile;
-          setStagedFile(null);
-          void doUpload(f, videoOpts);
-          setVideoOpts(createInitialVideoOpts(video));
-        }, children: "Enviar v\xEDdeo" })
+      /* @__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));
+            },
+            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));
+            },
+            children: "Enviar v\xEDdeo"
+          }
+        )
       ] })
     ] }),
-    isUploading && (renderProgress ? renderProgress(progress) : /* @__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", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
-        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-          /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, 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: uploadLabel2(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", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, 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", { className: "silo-text-muted", style: { fontSize: 11 }, 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: [
-      /* @__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" }),
-      /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
-        abort();
-        setPreview(null);
-      }, children: "Cancelar" })
+    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 }),
+          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);
+          },
+          children: "Cancelar"
+        }
+      )
     ] }),
-    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, 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", { className: "silo-text-muted", style: { fontSize: 12, 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: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
-          reset();
-          setPreview(null);
-        }, children: "Enviar outro" })
+        /* @__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);
+            },
+            children: "Enviar outro"
+          }
+        )
       ] }),
-      /* @__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." })
+      /* @__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", { 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 }, children: [
-        /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
-        /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, 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: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
-        reset();
-        setPreview(null);
-      }, children: "Tentar novamente" })
+      /* @__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);
+          },
+          children: "Tentar novamente"
+        }
+      )
     ] })
   ] });
 }
@@ -724,11 +765,6 @@ function FileUploader({
   const vars = themeToVars(t);
   const containerStyle = {
     ...vars,
-    display: "flex",
-    flexDirection: "column",
-    gap: "12px",
-    width: "100%",
-    fontFamily: "var(--silo-font)",
     ...style
   };
   const single = useMultipartUpload(bucket);
@@ -805,9 +841,9 @@ function FileUploader({
   const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
   const isUploading = isSingleUploading || isBatchUploading;
   const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
-  if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
-  if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
-  return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+  if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(single.state.error, single.reset) });
+  if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(single.state.result) });
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
     !isBatch && !staged && /* @__PURE__ */ jsx(
       DropZone,
       {
@@ -819,12 +855,12 @@ function FileUploader({
         disabled: disabled || isUploading,
         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", 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("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: "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", { 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: [
+            /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
+            /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
               "Tamanho m\xE1ximo: ",
               formatBytes(maxSize)
             ] })
@@ -832,11 +868,11 @@ function FileUploader({
         ] })
       }
     ),
-    staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, 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: [
+    staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "text-slate-500 text-[13px] font-semibold mb-0.5", children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
+      staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-slate-50 rounded-xl border border-slate-200", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xl shrink-0", children: getFileIcon(f.type) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
           editingIndex === i ? /* @__PURE__ */ jsx(
             "input",
             {
@@ -854,30 +890,28 @@ 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, #f8fafc)", color: "var(--silo-text, #0f172a)", fontFamily: "var(--silo-font, inherit)" }
+              className: "w-full text-[13px] font-medium border border-indigo-500 rounded-md py-0.5 px-2 outline-none bg-slate-50 text-slate-900"
             }
           ) : /* @__PURE__ */ jsxs(
             "div",
             {
-              className: "silo-text",
-              style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
+              className: `text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap${allowRename ? "cursor-text" : "cursor-default"}`,
               onClick: () => allowRename && setEditingIndex(i),
               title: allowRename ? "Clique para renomear" : void 0,
               children: [
                 effectiveName(i, staged),
-                renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
+                renames.has(i) && /* @__PURE__ */ jsx("span", { className: "text-indigo-500 ml-1.5 text-[10px] font-bold", children: "renomeado" })
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
+          /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 mt-0.5", children: formatBytes(f.size) })
         ] }),
         allowRename && /* @__PURE__ */ jsx(
           "button",
           {
             onClick: () => setEditingIndex(i),
             title: "Renomear",
-            className: "silo-text-muted",
-            style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
+            className: "text-slate-400 bg-none border-none cursor-pointer text-sm px-1 shrink-0 hover:text-slate-600",
             children: "\u270F\uFE0F"
           }
         ),
@@ -889,63 +923,75 @@ function FileUploader({
               if (next.length === 0) clearStaging();
               else setStaged(next);
             },
-            className: "silo-text-muted",
-            style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
+            className: "text-slate-400 bg-none border-none cursor-pointer text-lg px-1 leading-none shrink-0 hover:text-slate-600",
             children: "\xD7"
           }
         )
       ] }, i)),
-      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" }),
+      showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__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{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", { className: "silo-section-body", children: [
-        /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
+      showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__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, marginTop: 4 }, children: [
-        /* @__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" })
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", 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 transition-colors hover:bg-slate-100",
+            onClick: clearStaging,
+            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 transition-opacity hover:opacity-90",
+            onClick: handleConfirmUpload,
+            children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
+          }
+        )
       ] })
     ] }),
-    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", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel3(single.state.status, singleProgress) }),
-        /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
+    isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__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: uploadLabel3(single.state.status, singleProgress) }),
+        /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
           singleProgress,
           "%"
         ] })
       ] }),
       /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
     ] })),
-    isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
+    isBatch && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
       batch.state.files.map((f, i) => {
         const st = f.status;
         const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
         const isPaused = st.status === "paused";
         const isDone = st.status === "done";
         const isErr = st.status === "error";
-        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", { 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) })
+        return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2 px-3.5 py-3 bg-slate-50 rounded-xl border border-slate-200", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: getFileIcon(f.file.type) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: f.file.name }),
+              /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: formatBytes(f.file.size) })
             ] }),
-            isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
-            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 && /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: "\u2705" }),
+            isErr && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-red-500 shrink-0", children: "Erro no envio" }),
+            !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: `text-[12px] font-bold shrink-0${isPaused ? "text-slate-400" : "text-indigo-500"}`, children: isPaused ? "Pausado" : `${p}%` }),
+            !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90", onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100", onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
           ] }),
           !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
         ] }, i);
       }),
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
         batch.state.status !== "done" && /* @__PURE__ */ jsx(
           "button",
           {
-            className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
-            style: { flex: 1 },
+            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 text-white cursor-pointer hover:opacity-90${isBatchUploading ? "bg-amber-500" : "bg-emerald-500"}`,
             onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
             children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
           }
@@ -953,32 +999,46 @@ function FileUploader({
         /* @__PURE__ */ jsx(
           "button",
           {
-            className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
+            className: `inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90${batch.state.status === "done" ? "bg-indigo-500" : "bg-red-500/90"}`,
             onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
             children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
           }
         )
       ] }),
-      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!` })
+      batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-xl", children: "\u{1F389}" }),
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-green-700", 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", { 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", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
+    single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Arquivo enviado com sucesso!" }),
+        /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(single.state.result.size) })
       ] }),
-      /* @__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" })
+      /* @__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: single.reset,
+          children: "Enviar outro"
+        }
+      )
     ] }),
-    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", { 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 })
+    single.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 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
+        /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: single.state.error.message })
       ] }),
-      /* @__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" })
+      /* @__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: single.reset,
+          children: "Tentar novamente"
+        }
+      )
     ] })
   ] });
 }
@@ -1006,80 +1066,64 @@ function MediaUploader({
   const vars = themeToVars(t);
   const containerStyle = {
     ...vars,
-    display: "flex",
-    flexDirection: "column",
-    gap: "0",
-    width: "100%",
-    fontFamily: "var(--silo-font)",
-    border: "1px solid var(--silo-border)",
-    borderRadius: "var(--silo-radius)",
-    overflow: "hidden",
-    backgroundColor: "var(--silo-bg)",
     ...style
   };
-  return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
-    /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
-      "button",
-      {
-        onClick: () => setActiveTab(tab),
-        style: {
-          flex: 1,
-          padding: "10px 8px",
-          background: "none",
-          border: "none",
-          borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
-          cursor: "pointer",
-          fontSize: "13px",
-          fontWeight: activeTab === tab ? 600 : 400,
-          color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
-          transition: "color 0.15s, border-color 0.15s",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: "6px"
-        },
-        children: [
-          /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
-          /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
-        ]
-      },
-      tab
-    )) }),
-    /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
-      activeTab === "image" && /* @__PURE__ */ jsx(
-        ImageUploader,
-        {
-          ...shared,
-          ...imageProps,
-          ...theme !== void 0 && { theme },
-          ...onUpload !== void 0 && { onUpload },
-          ...onError !== void 0 && { onError }
-        }
-      ),
-      activeTab === "video" && /* @__PURE__ */ jsx(
-        VideoUploader,
-        {
-          ...shared,
-          ...videoProps,
-          ...theme !== void 0 && { theme },
-          ...onUpload !== void 0 && { onUpload },
-          ...onError !== void 0 && { onError }
-        }
-      ),
-      activeTab === "file" && /* @__PURE__ */ jsx(
-        FileUploader,
-        {
-          ...shared,
-          ...fileProps,
-          multiple: true,
-          ...theme !== void 0 && { theme },
-          ...onUpload !== void 0 && { onUpload },
-          ...onBatchUpload !== void 0 && { onBatchUpload },
-          ...onError !== void 0 && { onError }
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `flex flex-col w-full border border-slate-200 rounded-xl overflow-hidden bg-slate-50${className ? ` ${className}` : ""}`,
+      style: containerStyle,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex border-b border-slate-200", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setActiveTab(tab),
+            className: `flex-1 flex items-center justify-center gap-1.5 py-2.5 px-2 bg-transparent border-none border-b-2 cursor-pointer text-[13px] transition-colors duration-150${activeTab === tab ? "border-b-indigo-500 font-semibold text-indigo-500" : "border-b-transparent font-normal text-slate-400 hover:text-slate-600"}`,
+            style: { borderBottom: `2px solid ${activeTab === tab ? "#6366f1" : "transparent"}` },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
+              /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
+            ]
+          },
+          tab
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+          activeTab === "image" && /* @__PURE__ */ jsx(
+            ImageUploader,
+            {
+              ...shared,
+              ...imageProps,
+              ...theme !== void 0 && { theme },
+              ...onUpload !== void 0 && { onUpload },
+              ...onError !== void 0 && { onError }
+            }
+          ),
+          activeTab === "video" && /* @__PURE__ */ jsx(
+            VideoUploader,
+            {
+              ...shared,
+              ...videoProps,
+              ...theme !== void 0 && { theme },
+              ...onUpload !== void 0 && { onUpload },
+              ...onError !== void 0 && { onError }
+            }
+          ),
+          activeTab === "file" && /* @__PURE__ */ jsx(
+            FileUploader,
+            {
+              ...shared,
+              ...fileProps,
+              multiple: true,
+              ...theme !== void 0 && { theme },
+              ...onUpload !== void 0 && { onUpload },
+              ...onBatchUpload !== void 0 && { onBatchUpload },
+              ...onError !== void 0 && { onError }
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 export { MediaUploader };