@geekapps/silo-elements-nextjs 0.2.35 → 0.2.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/FileUploader.js +131 -182
  2. package/dist/FileUploader.js.map +1 -1
  3. package/dist/ImageUploader.js +63 -104
  4. package/dist/ImageUploader.js.map +1 -1
  5. package/dist/MediaUploader.js +271 -341
  6. package/dist/MediaUploader.js.map +1 -1
  7. package/dist/VideoUploader.js +91 -127
  8. package/dist/VideoUploader.js.map +1 -1
  9. package/dist/components/DropZone.js +8 -10
  10. package/dist/components/DropZone.js.map +1 -1
  11. package/dist/components/ProgressBar.js +4 -16
  12. package/dist/components/ProgressBar.js.map +1 -1
  13. package/dist/index.d.ts +1 -4
  14. package/dist/index.js +444 -627
  15. package/dist/index.js.map +1 -1
  16. package/dist/styles.css +1 -1
  17. package/package.json +6 -6
  18. package/styles.css +2 -0
package/dist/index.js CHANGED
@@ -91,20 +91,18 @@ function DropZone({
91
91
  );
92
92
  const rootStyle = {
93
93
  ...vars,
94
- fontFamily: "var(--silo-font)",
95
- border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
96
- borderRadius: "var(--silo-radius)",
97
- backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
98
- color: "var(--silo-text)",
99
- cursor: disabled ? "not-allowed" : "pointer",
100
- transition: "border-color 0.15s, background-color 0.15s",
101
- opacity: disabled ? 0.5 : 1,
102
94
  ...style
103
95
  };
96
+ const cls = [
97
+ "border-2 border-dashed border-slate-200 rounded-xl bg-slate-50 text-slate-900 cursor-pointer outline-none transition-colors duration-150",
98
+ dragging ? "border-indigo-500 bg-slate-100" : "hover:border-indigo-500 hover:bg-slate-100",
99
+ disabled ? "opacity-50 cursor-not-allowed" : "",
100
+ className
101
+ ].filter(Boolean).join(" ");
104
102
  return /* @__PURE__ */ jsxs(
105
103
  "div",
106
104
  {
107
- className: `silo-dropzone${className ? ` ${className}` : ""}`,
105
+ className: cls,
108
106
  style: rootStyle,
109
107
  onDragOver: (e) => {
110
108
  e.preventDefault();
@@ -127,7 +125,7 @@ function DropZone({
127
125
  type: "file",
128
126
  accept,
129
127
  multiple,
130
- style: { display: "none" },
128
+ className: "hidden",
131
129
  onChange: handleChange,
132
130
  disabled
133
131
  }
@@ -141,14 +139,8 @@ function ProgressBar({ progress, className = "", style }) {
141
139
  return /* @__PURE__ */ jsx(
142
140
  "div",
143
141
  {
144
- className: `silo-progress-track${className ? ` ${className}` : ""}`,
145
- style: {
146
- height: "6px",
147
- borderRadius: "3px",
148
- backgroundColor: "rgba(99,102,241,0.15)",
149
- overflow: "hidden",
150
- ...style
151
- },
142
+ className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
143
+ style,
152
144
  role: "progressbar",
153
145
  "aria-valuenow": progress,
154
146
  "aria-valuemin": 0,
@@ -156,14 +148,8 @@ function ProgressBar({ progress, className = "", style }) {
156
148
  children: /* @__PURE__ */ jsx(
157
149
  "div",
158
150
  {
159
- className: "silo-progress-fill",
160
- style: {
161
- height: "100%",
162
- width: `${progress}%`,
163
- backgroundColor: "var(--silo-accent, #6366f1)",
164
- borderRadius: "3px",
165
- transition: "width 0.2s ease"
166
- }
151
+ className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
152
+ style: { width: `${progress}%` }
167
153
  }
168
154
  )
169
155
  }
@@ -178,60 +164,38 @@ var FORMATS = [
178
164
  function ImageOptions({ value, onChange, style }) {
179
165
  const fmt = value.format ?? "webp";
180
166
  const optimize = value.optimize ?? true;
181
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, ...style }, children: [
167
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
182
168
  /* @__PURE__ */ jsxs("div", { children: [
183
- /* @__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" }),
184
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: FORMATS.map((f) => /* @__PURE__ */ jsx(
169
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Formato de sa\xEDda" }),
170
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
185
171
  "button",
186
172
  {
187
173
  type: "button",
188
174
  onClick: () => onChange({ ...value, format: f.value }),
189
175
  title: f.hint,
190
- style: {
191
- padding: "4px 12px",
192
- borderRadius: 6,
193
- border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
194
- background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
195
- color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
196
- fontSize: 12,
197
- fontWeight: 600,
198
- cursor: "pointer"
199
- },
176
+ 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"}`,
200
177
  children: f.label
201
178
  },
202
179
  f.value
203
180
  )) })
204
181
  ] }),
205
- /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
182
+ /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
206
183
  /* @__PURE__ */ jsx(
207
184
  "span",
208
185
  {
209
186
  onClick: () => onChange({ ...value, optimize: !optimize }),
210
- style: {
211
- width: 36,
212
- height: 20,
213
- borderRadius: 10,
214
- background: optimize ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
215
- position: "relative",
216
- flexShrink: 0,
217
- transition: "background 0.15s",
218
- cursor: "pointer"
219
- },
220
- children: /* @__PURE__ */ jsx("span", { style: {
221
- position: "absolute",
222
- top: 2,
223
- left: optimize ? 18 : 2,
224
- width: 16,
225
- height: 16,
226
- borderRadius: "50%",
227
- background: "#fff",
228
- transition: "left 0.15s",
229
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
230
- } })
187
+ className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150 ${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
188
+ children: /* @__PURE__ */ jsx(
189
+ "span",
190
+ {
191
+ className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
192
+ style: { left: optimize ? "18px" : "2px" }
193
+ }
194
+ )
231
195
  }
232
196
  ),
233
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text, #0f172a)", fontWeight: 500 }, children: "Otimizar tamanho" }),
234
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
197
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
198
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
235
199
  ] })
236
200
  ] });
237
201
  }
@@ -309,19 +273,14 @@ function ImageUploader({
309
273
  }, [showImageOptions, image, imageOpts, doUpload, showPreview]);
310
274
  const containerStyle = {
311
275
  ...vars,
312
- display: "flex",
313
- flexDirection: "column",
314
- gap: "12px",
315
- width: "100%",
316
- fontFamily: "var(--silo-font)",
317
276
  ...style
318
277
  };
319
278
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
320
279
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
321
280
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
322
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
323
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
324
- return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
281
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
282
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
283
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
325
284
  /* @__PURE__ */ jsx(
326
285
  DropZone,
327
286
  {
@@ -332,15 +291,15 @@ function ImageUploader({
332
291
  disabled: disabled || isUploading,
333
292
  onFiles: handleFiles,
334
293
  style: { padding: "32px 24px", textAlign: "center" },
335
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
336
- /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
337
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
338
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
339
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
294
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
295
+ /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "max-w-full max-h-[200px] rounded-lg object-contain" }),
296
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar a imagem" })
297
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
298
+ 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" }) }),
340
299
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
341
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
342
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
343
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
300
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste sua imagem aqui" }),
301
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
302
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
344
303
  "Tamanho m\xE1ximo: ",
345
304
  formatBytes(maxSize)
346
305
  ] })
@@ -349,100 +308,100 @@ function ImageUploader({
349
308
  }
350
309
  ),
351
310
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
352
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
353
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
354
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
311
+ 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" }) }),
312
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
313
+ /* @__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" }),
355
314
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
356
315
  ] }),
357
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
316
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
358
317
  /* @__PURE__ */ jsx(
359
318
  "button",
360
319
  {
320
+ 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",
361
321
  onClick: () => {
362
322
  setStagedFile(null);
363
323
  setPreview(null);
364
324
  },
365
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
366
325
  children: "Cancelar"
367
326
  }
368
327
  ),
369
328
  /* @__PURE__ */ jsx(
370
329
  "button",
371
330
  {
331
+ 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",
372
332
  onClick: () => {
373
333
  const f = stagedFile;
374
334
  setStagedFile(null);
375
335
  void doUpload(f, imageOpts);
376
336
  },
377
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
378
337
  children: "Enviar imagem"
379
338
  }
380
339
  )
381
340
  ] })
382
341
  ] }),
383
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
384
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
385
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
386
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
342
+ 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: [
343
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
344
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel(state.status, progress) }),
345
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
387
346
  progress,
388
347
  "%"
389
348
  ] })
390
349
  ] }),
391
350
  /* @__PURE__ */ jsx(ProgressBar, { progress })
392
351
  ] })),
393
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
352
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
394
353
  /* @__PURE__ */ jsx(
395
354
  "button",
396
355
  {
356
+ 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",
397
357
  onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }),
398
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
399
358
  children: "\u25B6 Retomar envio"
400
359
  }
401
360
  ),
402
361
  /* @__PURE__ */ jsx(
403
362
  "button",
404
363
  {
364
+ 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",
405
365
  onClick: () => {
406
366
  abort();
407
367
  setPreview(null);
408
368
  },
409
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
410
369
  children: "Cancelar"
411
370
  }
412
371
  )
413
372
  ] }),
414
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
415
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
416
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
417
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
418
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
373
+ 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: [
374
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
375
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
376
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Imagem enviada com sucesso!" }),
377
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
419
378
  ] }),
420
379
  /* @__PURE__ */ jsx(
421
380
  "button",
422
381
  {
382
+ 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",
423
383
  onClick: () => {
424
384
  reset();
425
385
  setPreview(null);
426
386
  },
427
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
428
387
  children: "Enviar outra"
429
388
  }
430
389
  )
431
390
  ] }),
432
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
433
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
434
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
435
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
436
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
391
+ 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: [
392
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
393
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
394
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
395
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
437
396
  ] }),
438
397
  /* @__PURE__ */ jsx(
439
398
  "button",
440
399
  {
400
+ 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",
441
401
  onClick: () => {
442
402
  reset();
443
403
  setPreview(null);
444
404
  },
445
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
446
405
  children: "Tentar novamente"
447
406
  }
448
407
  )
@@ -464,6 +423,27 @@ var RESOLUTION_LABELS = {
464
423
  "1440": "1440p",
465
424
  "2160": "4K"
466
425
  };
426
+ function optionBtnCls(active) {
427
+ 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"}`;
428
+ }
429
+ function Toggle({ checked, onToggle, label }) {
430
+ 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: [
431
+ /* @__PURE__ */ jsx(
432
+ "span",
433
+ {
434
+ 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"}`,
435
+ children: /* @__PURE__ */ jsx(
436
+ "span",
437
+ {
438
+ className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
439
+ style: { left: checked ? "16px" : "2px" }
440
+ }
441
+ )
442
+ }
443
+ ),
444
+ label
445
+ ] });
446
+ }
467
447
  function VideoOptions({ value, onChange, style }) {
468
448
  const codec = value.codec ?? "h264";
469
449
  const transcoding = value.transcoding ?? "auto";
@@ -480,76 +460,31 @@ function VideoOptions({ value, onChange, style }) {
480
460
  function toggleFeature(key) {
481
461
  onChange({ ...value, [key]: !value[key] });
482
462
  }
483
- const btn = (active) => ({
484
- padding: "4px 10px",
485
- borderRadius: 6,
486
- border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
487
- background: active ? "var(--silo-accent, #6366f1)" : "transparent",
488
- color: active ? "#fff" : "var(--silo-text, #0f172a)",
489
- fontSize: 12,
490
- fontWeight: 600,
491
- cursor: "pointer"
492
- });
493
- const toggle = (on) => ({
494
- display: "inline-flex",
495
- alignItems: "center",
496
- gap: 6,
497
- cursor: "pointer",
498
- userSelect: "none",
499
- fontSize: 12,
500
- color: "var(--silo-text, #0f172a)",
501
- fontWeight: 500
502
- });
503
- function Toggle({ checked, onToggle, label }) {
504
- return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
505
- /* @__PURE__ */ jsx("span", { style: {
506
- width: 32,
507
- height: 18,
508
- borderRadius: 9,
509
- flexShrink: 0,
510
- background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
511
- position: "relative",
512
- transition: "background 0.15s",
513
- cursor: "pointer"
514
- }, children: /* @__PURE__ */ jsx("span", { style: {
515
- position: "absolute",
516
- top: 2,
517
- left: checked ? 16 : 2,
518
- width: 14,
519
- height: 14,
520
- borderRadius: "50%",
521
- background: "#fff",
522
- transition: "left 0.15s",
523
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
524
- } }) }),
525
- label
526
- ] });
527
- }
528
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
463
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
529
464
  /* @__PURE__ */ jsxs("div", { children: [
530
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Codec" }),
531
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: CODECS.map((c) => /* @__PURE__ */ jsx(
465
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Codec" }),
466
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
532
467
  "button",
533
468
  {
534
469
  type: "button",
535
470
  title: c.hint,
536
471
  onClick: () => onChange({ ...value, codec: c.value }),
537
- style: btn(codec === c.value),
472
+ className: optionBtnCls(codec === c.value),
538
473
  children: c.label
539
474
  },
540
475
  c.value
541
476
  )) })
542
477
  ] }),
543
478
  /* @__PURE__ */ jsxs("div", { children: [
544
- /* @__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" }),
545
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
546
- /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Auto" }),
479
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Resolu\xE7\xF5es" }),
480
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
481
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), className: optionBtnCls(isAuto), children: "Auto" }),
547
482
  RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
548
483
  "button",
549
484
  {
550
485
  type: "button",
551
486
  onClick: () => toggleRes(r),
552
- style: btn(!isAuto && selectedRes.includes(r)),
487
+ className: optionBtnCls(!isAuto && selectedRes.includes(r)),
553
488
  children: RESOLUTION_LABELS[r]
554
489
  },
555
490
  r
@@ -557,8 +492,8 @@ function VideoOptions({ value, onChange, style }) {
557
492
  ] })
558
493
  ] }),
559
494
  /* @__PURE__ */ jsxs("div", { children: [
560
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 8 }, children: "Recursos" }),
561
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
495
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-2", children: "Recursos" }),
496
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
562
497
  /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
563
498
  /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
564
499
  /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
@@ -635,19 +570,14 @@ function VideoUploader({
635
570
  }, [showVideoOptions, video, videoOpts, doUpload, showPreview]);
636
571
  const containerStyle = {
637
572
  ...vars,
638
- display: "flex",
639
- flexDirection: "column",
640
- gap: "12px",
641
- width: "100%",
642
- fontFamily: "var(--silo-font)",
643
573
  ...style
644
574
  };
645
575
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
646
576
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
647
577
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
648
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
649
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
650
- return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
578
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
579
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
580
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
651
581
  /* @__PURE__ */ jsx(
652
582
  DropZone,
653
583
  {
@@ -658,15 +588,15 @@ function VideoUploader({
658
588
  disabled: disabled || isUploading,
659
589
  onFiles: handleFiles,
660
590
  style: { padding: "32px 24px", textAlign: "center" },
661
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
662
- /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
663
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
664
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
665
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
591
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
592
+ /* @__PURE__ */ jsx("video", { src: preview, className: "max-w-full max-h-[180px] rounded-lg", muted: true, playsInline: true }),
593
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar o v\xEDdeo" })
594
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
595
+ 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" }) }),
666
596
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
667
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
668
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
669
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
597
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste seu v\xEDdeo aqui" }),
598
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
599
+ /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
670
600
  "MP4, MOV, MKV, WebM",
671
601
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
672
602
  ] })
@@ -675,109 +605,116 @@ function VideoUploader({
675
605
  }
676
606
  ),
677
607
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
678
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)", background: "#000" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
679
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
680
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
608
+ 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 }) }),
609
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
610
+ /* @__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" }),
681
611
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
682
612
  ] }),
683
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
613
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
684
614
  /* @__PURE__ */ jsx(
685
615
  "button",
686
616
  {
617
+ 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",
687
618
  onClick: () => {
688
619
  setStagedFile(null);
689
620
  setPreview(null);
690
621
  setVideoOpts(createInitialVideoOpts(video));
691
622
  },
692
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
693
623
  children: "Cancelar"
694
624
  }
695
625
  ),
696
626
  /* @__PURE__ */ jsx(
697
627
  "button",
698
628
  {
629
+ 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",
699
630
  onClick: () => {
700
631
  const f = stagedFile;
701
632
  setStagedFile(null);
702
633
  void doUpload(f, videoOpts);
703
634
  setVideoOpts(createInitialVideoOpts(video));
704
635
  },
705
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
706
636
  children: "Enviar v\xEDdeo"
707
637
  }
708
638
  )
709
639
  ] })
710
640
  ] }),
711
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
712
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
713
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
714
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
715
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
641
+ 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: [
642
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
643
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel2(state.status, progress) }),
644
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
645
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
716
646
  progress,
717
647
  "%"
718
648
  ] }),
719
- /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "1px solid var(--silo-border)", borderRadius: 6, cursor: "pointer", fontSize: 11, color: "var(--silo-text-muted)", padding: "2px 8px" }, children: "Pausar" })
649
+ /* @__PURE__ */ jsx(
650
+ "button",
651
+ {
652
+ 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",
653
+ onClick: pause,
654
+ children: "Pausar"
655
+ }
656
+ )
720
657
  ] })
721
658
  ] }),
722
659
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
723
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
660
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
724
661
  ] })),
725
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
662
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
726
663
  /* @__PURE__ */ jsx(
727
664
  "button",
728
665
  {
666
+ 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",
729
667
  onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
730
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
731
668
  children: "\u25B6 Retomar envio"
732
669
  }
733
670
  ),
734
671
  /* @__PURE__ */ jsx(
735
672
  "button",
736
673
  {
674
+ 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",
737
675
  onClick: () => {
738
676
  abort();
739
677
  setPreview(null);
740
678
  },
741
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
742
679
  children: "Cancelar"
743
680
  }
744
681
  )
745
682
  ] }),
746
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
747
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
748
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
749
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
750
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
751
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
683
+ 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: [
684
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
685
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
686
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
687
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "V\xEDdeo enviado com sucesso!" }),
688
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
752
689
  ] }),
753
690
  /* @__PURE__ */ jsx(
754
691
  "button",
755
692
  {
693
+ 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",
756
694
  onClick: () => {
757
695
  reset();
758
696
  setPreview(null);
759
697
  },
760
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
761
698
  children: "Enviar outro"
762
699
  }
763
700
  )
764
701
  ] }),
765
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
702
+ /* @__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." })
766
703
  ] }),
767
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
768
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
769
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
770
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
771
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
704
+ 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: [
705
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
706
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
707
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
708
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
772
709
  ] }),
773
710
  /* @__PURE__ */ jsx(
774
711
  "button",
775
712
  {
713
+ 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",
776
714
  onClick: () => {
777
715
  reset();
778
716
  setPreview(null);
779
717
  },
780
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
781
718
  children: "Tentar novamente"
782
719
  }
783
720
  )
@@ -833,11 +770,6 @@ function FileUploader({
833
770
  const vars = themeToVars(t);
834
771
  const containerStyle = {
835
772
  ...vars,
836
- display: "flex",
837
- flexDirection: "column",
838
- gap: "12px",
839
- width: "100%",
840
- fontFamily: "var(--silo-font)",
841
773
  ...style
842
774
  };
843
775
  const single = useMultipartUpload(bucket);
@@ -914,9 +846,9 @@ function FileUploader({
914
846
  const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
915
847
  const isUploading = isSingleUploading || isBatchUploading;
916
848
  const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
917
- if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
918
- if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
919
- return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
849
+ 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) });
850
+ 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) });
851
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
920
852
  !isBatch && !staged && /* @__PURE__ */ jsx(
921
853
  DropZone,
922
854
  {
@@ -928,12 +860,12 @@ function FileUploader({
928
860
  disabled: disabled || isUploading,
929
861
  onFiles: handleFiles,
930
862
  style: { padding: "28px 24px", textAlign: "center" },
931
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
932
- renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
863
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
864
+ 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" }) }),
933
865
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
934
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
935
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
936
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
866
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
867
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
868
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
937
869
  "Tamanho m\xE1ximo: ",
938
870
  formatBytes(maxSize)
939
871
  ] })
@@ -941,11 +873,11 @@ function FileUploader({
941
873
  ] })
942
874
  }
943
875
  ),
944
- staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
945
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text-muted)", marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
946
- staged.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
947
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
948
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
876
+ staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
877
+ /* @__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` }),
878
+ 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: [
879
+ /* @__PURE__ */ jsx("span", { className: "text-xl shrink-0", children: getFileIcon(f.type) }),
880
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
949
881
  editingIndex === i ? /* @__PURE__ */ jsx(
950
882
  "input",
951
883
  {
@@ -963,28 +895,28 @@ function FileUploader({
963
895
  }
964
896
  if (e.key === "Escape") setEditingIndex(null);
965
897
  },
966
- style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg)", color: "var(--silo-text)", fontFamily: "var(--silo-font)" }
898
+ 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"
967
899
  }
968
900
  ) : /* @__PURE__ */ jsxs(
969
901
  "div",
970
902
  {
971
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
903
+ className: `text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap ${allowRename ? "cursor-text" : "cursor-default"}`,
972
904
  onClick: () => allowRename && setEditingIndex(i),
973
905
  title: allowRename ? "Clique para renomear" : void 0,
974
906
  children: [
975
907
  effectiveName(i, staged),
976
- renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
908
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "text-indigo-500 ml-1.5 text-[10px] font-bold", children: "renomeado" })
977
909
  ]
978
910
  }
979
911
  ),
980
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
912
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 mt-0.5", children: formatBytes(f.size) })
981
913
  ] }),
982
914
  allowRename && /* @__PURE__ */ jsx(
983
915
  "button",
984
916
  {
985
917
  onClick: () => setEditingIndex(i),
986
918
  title: "Renomear",
987
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
919
+ className: "text-slate-400 bg-none border-none cursor-pointer text-sm px-1 shrink-0 hover:text-slate-600",
988
920
  children: "\u270F\uFE0F"
989
921
  }
990
922
  ),
@@ -996,108 +928,122 @@ function FileUploader({
996
928
  if (next.length === 0) clearStaging();
997
929
  else setStaged(next);
998
930
  },
999
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
931
+ className: "text-slate-400 bg-none border-none cursor-pointer text-lg px-1 leading-none shrink-0 hover:text-slate-600",
1000
932
  children: "\xD7"
1001
933
  }
1002
934
  )
1003
935
  ] }, i)),
1004
- showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1005
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
936
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
937
+ /* @__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" }),
1006
938
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
1007
939
  ] }),
1008
- showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1009
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
940
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
941
+ /* @__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" }),
1010
942
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
1011
943
  ] }),
1012
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
944
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
1013
945
  /* @__PURE__ */ jsx(
1014
946
  "button",
1015
947
  {
948
+ 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",
1016
949
  onClick: clearStaging,
1017
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
1018
950
  children: "Cancelar"
1019
951
  }
1020
952
  ),
1021
953
  /* @__PURE__ */ jsx(
1022
954
  "button",
1023
955
  {
956
+ 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",
1024
957
  onClick: handleConfirmUpload,
1025
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
1026
958
  children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
1027
959
  }
1028
960
  )
1029
961
  ] })
1030
962
  ] }),
1031
- isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "16px", borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
1032
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
1033
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
1034
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
963
+ 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: [
964
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
965
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel3(single.state.status, singleProgress) }),
966
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
1035
967
  singleProgress,
1036
968
  "%"
1037
969
  ] })
1038
970
  ] }),
1039
971
  /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
1040
972
  ] })),
1041
- isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
973
+ isBatch && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
1042
974
  batch.state.files.map((f, i) => {
1043
975
  const st = f.status;
1044
976
  const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
1045
977
  const isPaused = st.status === "paused";
1046
978
  const isDone = st.status === "done";
1047
979
  const isErr = st.status === "error";
1048
- return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
1049
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
1050
- /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
1051
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1052
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
1053
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
980
+ 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: [
981
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
982
+ /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: getFileIcon(f.file.type) }),
983
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
984
+ /* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: f.file.name }),
985
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: formatBytes(f.file.size) })
1054
986
  ] }),
1055
- isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
1056
- isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
1057
- !isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
1058
- !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "none", background: "#10b981", color: "#fff", cursor: "pointer", fontWeight: 600 }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", cursor: "pointer" }, children: "Pausar" }) : null)
987
+ isDone && /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: "\u2705" }),
988
+ isErr && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-red-500 shrink-0", children: "Erro no envio" }),
989
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: `text-[12px] font-bold shrink-0 ${isPaused ? "text-slate-400" : "text-indigo-500"}`, children: isPaused ? "Pausado" : `${p}%` }),
990
+ !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)
1059
991
  ] }),
1060
992
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
1061
993
  ] }, i);
1062
994
  }),
1063
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
995
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
1064
996
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
1065
997
  "button",
1066
998
  {
999
+ 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"}`,
1067
1000
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
1068
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1069
1001
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
1070
1002
  }
1071
1003
  ),
1072
1004
  /* @__PURE__ */ jsx(
1073
1005
  "button",
1074
1006
  {
1007
+ 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"}`,
1075
1008
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
1076
- style: { padding: "10px 16px", borderRadius: 8, border: "none", background: batch.state.status === "done" ? "var(--silo-accent, #6366f1)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1077
1009
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
1078
1010
  }
1079
1011
  )
1080
1012
  ] }),
1081
- batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
1082
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
1083
- /* @__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!` })
1013
+ 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: [
1014
+ /* @__PURE__ */ jsx("span", { className: "text-xl", children: "\u{1F389}" }),
1015
+ /* @__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!` })
1084
1016
  ] })
1085
1017
  ] }),
1086
- single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
1087
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
1088
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1089
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
1090
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
1018
+ 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: [
1019
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
1020
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1021
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Arquivo enviado com sucesso!" }),
1022
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(single.state.result.size) })
1091
1023
  ] }),
1092
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, children: "Enviar outro" })
1024
+ /* @__PURE__ */ jsx(
1025
+ "button",
1026
+ {
1027
+ 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",
1028
+ onClick: single.reset,
1029
+ children: "Enviar outro"
1030
+ }
1031
+ )
1093
1032
  ] }),
1094
- single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
1095
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
1096
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1097
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1098
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
1033
+ 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: [
1034
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
1035
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1036
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1037
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: single.state.error.message })
1099
1038
  ] }),
1100
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, children: "Tentar novamente" })
1039
+ /* @__PURE__ */ jsx(
1040
+ "button",
1041
+ {
1042
+ 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",
1043
+ onClick: single.reset,
1044
+ children: "Tentar novamente"
1045
+ }
1046
+ )
1101
1047
  ] })
1102
1048
  ] });
1103
1049
  }
@@ -1125,80 +1071,64 @@ function MediaUploader({
1125
1071
  const vars = themeToVars(t);
1126
1072
  const containerStyle = {
1127
1073
  ...vars,
1128
- display: "flex",
1129
- flexDirection: "column",
1130
- gap: "0",
1131
- width: "100%",
1132
- fontFamily: "var(--silo-font)",
1133
- border: "1px solid var(--silo-border)",
1134
- borderRadius: "var(--silo-radius)",
1135
- overflow: "hidden",
1136
- backgroundColor: "var(--silo-bg)",
1137
1074
  ...style
1138
1075
  };
1139
- return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
1140
- /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1141
- "button",
1142
- {
1143
- onClick: () => setActiveTab(tab),
1144
- style: {
1145
- flex: 1,
1146
- padding: "10px 8px",
1147
- background: "none",
1148
- border: "none",
1149
- borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
1150
- cursor: "pointer",
1151
- fontSize: "13px",
1152
- fontWeight: activeTab === tab ? 600 : 400,
1153
- color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
1154
- transition: "color 0.15s, border-color 0.15s",
1155
- display: "flex",
1156
- alignItems: "center",
1157
- justifyContent: "center",
1158
- gap: "6px"
1159
- },
1160
- children: [
1161
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1162
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1163
- ]
1164
- },
1165
- tab
1166
- )) }),
1167
- /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
1168
- activeTab === "image" && /* @__PURE__ */ jsx(
1169
- ImageUploader,
1170
- {
1171
- ...shared,
1172
- ...imageProps,
1173
- ...theme !== void 0 && { theme },
1174
- ...onUpload !== void 0 && { onUpload },
1175
- ...onError !== void 0 && { onError }
1176
- }
1177
- ),
1178
- activeTab === "video" && /* @__PURE__ */ jsx(
1179
- VideoUploader,
1180
- {
1181
- ...shared,
1182
- ...videoProps,
1183
- ...theme !== void 0 && { theme },
1184
- ...onUpload !== void 0 && { onUpload },
1185
- ...onError !== void 0 && { onError }
1186
- }
1187
- ),
1188
- activeTab === "file" && /* @__PURE__ */ jsx(
1189
- FileUploader,
1190
- {
1191
- ...shared,
1192
- ...fileProps,
1193
- multiple: true,
1194
- ...theme !== void 0 && { theme },
1195
- ...onUpload !== void 0 && { onUpload },
1196
- ...onBatchUpload !== void 0 && { onBatchUpload },
1197
- ...onError !== void 0 && { onError }
1198
- }
1199
- )
1200
- ] })
1201
- ] });
1076
+ return /* @__PURE__ */ jsxs(
1077
+ "div",
1078
+ {
1079
+ className: `flex flex-col w-full border border-slate-200 rounded-xl overflow-hidden bg-slate-50${className ? ` ${className}` : ""}`,
1080
+ style: containerStyle,
1081
+ children: [
1082
+ /* @__PURE__ */ jsx("div", { className: "flex border-b border-slate-200", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1083
+ "button",
1084
+ {
1085
+ onClick: () => setActiveTab(tab),
1086
+ 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"}`,
1087
+ style: { borderBottom: `2px solid ${activeTab === tab ? "#6366f1" : "transparent"}` },
1088
+ children: [
1089
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1090
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1091
+ ]
1092
+ },
1093
+ tab
1094
+ )) }),
1095
+ /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
1096
+ activeTab === "image" && /* @__PURE__ */ jsx(
1097
+ ImageUploader,
1098
+ {
1099
+ ...shared,
1100
+ ...imageProps,
1101
+ ...theme !== void 0 && { theme },
1102
+ ...onUpload !== void 0 && { onUpload },
1103
+ ...onError !== void 0 && { onError }
1104
+ }
1105
+ ),
1106
+ activeTab === "video" && /* @__PURE__ */ jsx(
1107
+ VideoUploader,
1108
+ {
1109
+ ...shared,
1110
+ ...videoProps,
1111
+ ...theme !== void 0 && { theme },
1112
+ ...onUpload !== void 0 && { onUpload },
1113
+ ...onError !== void 0 && { onError }
1114
+ }
1115
+ ),
1116
+ activeTab === "file" && /* @__PURE__ */ jsx(
1117
+ FileUploader,
1118
+ {
1119
+ ...shared,
1120
+ ...fileProps,
1121
+ multiple: true,
1122
+ ...theme !== void 0 && { theme },
1123
+ ...onUpload !== void 0 && { onUpload },
1124
+ ...onBatchUpload !== void 0 && { onBatchUpload },
1125
+ ...onError !== void 0 && { onError }
1126
+ }
1127
+ )
1128
+ ] })
1129
+ ]
1130
+ }
1131
+ );
1202
1132
  }
1203
1133
  var AUTO_QUALITY = {
1204
1134
  id: "auto",
@@ -2516,7 +2446,7 @@ function formatTime(seconds) {
2516
2446
  }
2517
2447
  return `${minutes}:${String(secs).padStart(2, "0")}`;
2518
2448
  }
2519
- var RADIUS = { full: "50%", md: "12px", sm: "6px" };
2449
+ var RADIUS = { full: "9999px", md: "12px", sm: "6px" };
2520
2450
  function Avatar({
2521
2451
  fileKey,
2522
2452
  bucket,
@@ -2529,35 +2459,41 @@ function Avatar({
2529
2459
  }) {
2530
2460
  const { url } = useSignedUrl(fileKey ?? null);
2531
2461
  const [error, setError] = useState(false);
2532
- const radius = RADIUS[shape];
2533
2462
  const base = {
2534
2463
  width: size,
2535
2464
  height: size,
2536
- borderRadius: radius,
2537
- overflow: "hidden",
2538
- display: "inline-flex",
2539
- alignItems: "center",
2540
- justifyContent: "center",
2541
- flexShrink: 0,
2465
+ borderRadius: RADIUS[shape],
2542
2466
  fontSize: size * 0.38,
2543
- fontWeight: 600,
2544
- userSelect: "none",
2545
- background: "var(--silo-bg, #e2e8f0)",
2546
- color: "var(--silo-text-muted, #64748b)",
2467
+ flexShrink: 0,
2547
2468
  ...style
2548
2469
  };
2549
2470
  if (url && !error) {
2550
- return /* @__PURE__ */ jsx("span", { className, style: base, children: /* @__PURE__ */ jsx(
2551
- "img",
2471
+ return /* @__PURE__ */ jsx(
2472
+ "span",
2552
2473
  {
2553
- src: url,
2554
- alt,
2555
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
2556
- onError: () => setError(true)
2474
+ className: `overflow-hidden inline-flex items-center justify-center bg-slate-200 text-slate-500 select-none font-semibold ${className}`,
2475
+ style: base,
2476
+ children: /* @__PURE__ */ jsx(
2477
+ "img",
2478
+ {
2479
+ src: url,
2480
+ alt,
2481
+ className: "w-full h-full object-cover block",
2482
+ onError: () => setError(true)
2483
+ }
2484
+ )
2557
2485
  }
2558
- ) });
2486
+ );
2559
2487
  }
2560
- return /* @__PURE__ */ jsx("span", { className, style: base, "aria-label": alt, children: initials ? initials.slice(0, 2).toUpperCase() : "?" });
2488
+ return /* @__PURE__ */ jsx(
2489
+ "span",
2490
+ {
2491
+ className: `overflow-hidden inline-flex items-center justify-center bg-slate-200 text-slate-500 select-none font-semibold ${className}`,
2492
+ style: base,
2493
+ "aria-label": alt,
2494
+ children: initials ? initials.slice(0, 2).toUpperCase() : "?"
2495
+ }
2496
+ );
2561
2497
  }
2562
2498
  function Thumbnail({
2563
2499
  fileKey,
@@ -2567,7 +2503,7 @@ function Thumbnail({
2567
2503
  width = "100%",
2568
2504
  height = 160,
2569
2505
  fit = "cover",
2570
- borderRadius = "var(--silo-radius, 12px)",
2506
+ borderRadius = "12px",
2571
2507
  placeholder,
2572
2508
  className = "",
2573
2509
  style,
@@ -2586,16 +2522,16 @@ function Thumbnail({
2586
2522
  display: "flex",
2587
2523
  alignItems: "center",
2588
2524
  justifyContent: "center",
2589
- background: "var(--silo-bg, #f1f5f9)",
2525
+ background: "#f1f5f9",
2590
2526
  position: "relative",
2591
2527
  flexShrink: 0,
2592
2528
  ...style
2593
2529
  };
2594
2530
  if (loading) {
2595
- return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted, #94a3b8)", fontSize: 12 }, children: "..." }) });
2531
+ return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "..." }) });
2596
2532
  }
2597
2533
  if (error || !url) {
2598
- return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 28 }, children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
2534
+ return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { className: "text-[28px]", children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
2599
2535
  }
2600
2536
  if (isVideo) {
2601
2537
  return /* @__PURE__ */ jsxs("span", { className, style: wrapper, children: [
@@ -2609,20 +2545,7 @@ function Thumbnail({
2609
2545
  onError: () => setError(true)
2610
2546
  }
2611
2547
  ),
2612
- /* @__PURE__ */ jsx(
2613
- "span",
2614
- {
2615
- style: {
2616
- position: "absolute",
2617
- inset: 0,
2618
- display: "flex",
2619
- alignItems: "center",
2620
- justifyContent: "center",
2621
- pointerEvents: "none"
2622
- },
2623
- children: /* @__PURE__ */ jsx("span", { style: { fontSize: 24, opacity: 0.85 }, children: "\u25B6" })
2624
- }
2625
- )
2548
+ /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("span", { className: "text-[24px] opacity-85", children: "\u25B6" }) })
2626
2549
  ] });
2627
2550
  }
2628
2551
  return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx(
@@ -2659,15 +2582,11 @@ function Background({
2659
2582
  "div",
2660
2583
  {
2661
2584
  "aria-hidden": true,
2662
- style: {
2663
- position: "absolute",
2664
- inset: 0,
2665
- background: overlay,
2666
- pointerEvents: "none"
2667
- }
2585
+ className: "absolute inset-0 pointer-events-none",
2586
+ style: { background: overlay }
2668
2587
  }
2669
2588
  ),
2670
- children && /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
2589
+ children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
2671
2590
  ] });
2672
2591
  }
2673
2592
  function FileIcon({
@@ -2685,47 +2604,28 @@ function FileIcon({
2685
2604
  return /* @__PURE__ */ jsxs(
2686
2605
  "span",
2687
2606
  {
2688
- className,
2689
- style: {
2690
- display: "inline-flex",
2691
- flexDirection: "column",
2692
- alignItems: "center",
2693
- gap: 4,
2694
- fontFamily: "var(--silo-font, inherit)",
2695
- ...style
2696
- },
2607
+ className: `inline-flex flex-col items-center gap-1 ${className}`,
2608
+ style,
2697
2609
  children: [
2698
2610
  /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: icon }),
2699
2611
  ext && /* @__PURE__ */ jsx(
2700
2612
  "span",
2701
2613
  {
2702
- style: {
2703
- fontSize: iconSize * 0.22,
2704
- fontWeight: 700,
2705
- color: "var(--silo-text-muted, #64748b)",
2706
- letterSpacing: "0.04em",
2707
- textTransform: "uppercase"
2708
- },
2614
+ className: "font-bold text-slate-500 uppercase tracking-wide",
2615
+ style: { fontSize: iconSize * 0.22 },
2709
2616
  children: ext
2710
2617
  }
2711
2618
  ),
2712
2619
  showName && name && /* @__PURE__ */ jsx(
2713
2620
  "span",
2714
2621
  {
2715
- style: {
2716
- fontSize: 12,
2717
- color: "var(--silo-text, #0f172a)",
2718
- maxWidth: iconSize * 3,
2719
- overflow: "hidden",
2720
- textOverflow: "ellipsis",
2721
- whiteSpace: "nowrap",
2722
- textAlign: "center"
2723
- },
2622
+ className: "text-xs text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap text-center",
2623
+ style: { maxWidth: iconSize * 3 },
2724
2624
  title: name,
2725
2625
  children: name
2726
2626
  }
2727
2627
  ),
2728
- showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #64748b)" }, children: formatBytes(size) })
2628
+ showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-500", children: formatBytes(size) })
2729
2629
  ]
2730
2630
  }
2731
2631
  );
@@ -2742,12 +2642,12 @@ var STATUS_LABEL = {
2742
2642
  CANCELLED: "Cancelled"
2743
2643
  };
2744
2644
  var STATUS_COLOR = {
2745
- READY: "var(--silo-success, #22c55e)",
2746
- FAILED: "var(--silo-error, #ef4444)",
2747
- CANCELLED: "var(--silo-error, #ef4444)"
2645
+ READY: "#22c55e",
2646
+ FAILED: "#ef4444",
2647
+ CANCELLED: "#ef4444"
2748
2648
  };
2749
2649
  function statusColor(status) {
2750
- return STATUS_COLOR[status] ?? "var(--silo-accent, #6366f1)";
2650
+ return STATUS_COLOR[status] ?? "#6366f1";
2751
2651
  }
2752
2652
  function isProcessing(status) {
2753
2653
  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
@@ -2763,20 +2663,15 @@ function FileCard({
2763
2663
  style
2764
2664
  }) {
2765
2665
  const { file, loading } = useFileStatus(fileId, { pollInterval });
2766
- const card = {
2767
- display: "flex",
2768
- flexDirection: "column",
2769
- gap: 0,
2770
- borderRadius: "var(--silo-radius, 12px)",
2771
- border: "1px solid var(--silo-border, #e2e8f0)",
2772
- background: "var(--silo-bg, #f8fafc)",
2773
- overflow: "hidden",
2774
- fontFamily: "var(--silo-font, inherit)",
2775
- width: 220,
2776
- ...style
2777
- };
2778
2666
  if (loading && !file) {
2779
- return /* @__PURE__ */ jsx("div", { className, style: { ...card, padding: 16, color: "var(--silo-text-muted, #94a3b8)", fontSize: 13 }, children: "Loading..." });
2667
+ return /* @__PURE__ */ jsx(
2668
+ "div",
2669
+ {
2670
+ className: `flex flex-col rounded-xl border border-slate-200 bg-slate-50 overflow-hidden w-[220px] p-4 ${className}`,
2671
+ style,
2672
+ children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "Loading..." })
2673
+ }
2674
+ );
2780
2675
  }
2781
2676
  if (!file) return null;
2782
2677
  const status = file.status;
@@ -2785,116 +2680,90 @@ function FileCard({
2785
2680
  const showThumb = isImg || isVid;
2786
2681
  const progress = file.progress ?? null;
2787
2682
  const ext = file.originalName.split(".").pop()?.toUpperCase();
2788
- return /* @__PURE__ */ jsxs("div", { className, style: card, children: [
2789
- /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: 130, background: "var(--silo-bg-hover, #f1f5f9)", flexShrink: 0 }, children: [
2790
- showThumb ? /* @__PURE__ */ jsx(
2791
- Thumbnail,
2792
- {
2793
- fileKey: file.key,
2794
- mimeType: file.mimeType,
2795
- width: "100%",
2796
- height: 130,
2797
- borderRadius: "0",
2798
- style: { display: "block" }
2799
- }
2800
- ) : /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
2801
- /* @__PURE__ */ jsx(
2802
- "span",
2803
- {
2804
- style: {
2805
- position: "absolute",
2806
- top: 8,
2807
- right: 8,
2808
- fontSize: 10,
2809
- fontWeight: 700,
2810
- letterSpacing: "0.05em",
2811
- padding: "2px 7px",
2812
- borderRadius: 99,
2813
- background: "rgba(0,0,0,0.55)",
2814
- color: statusColor(status),
2815
- backdropFilter: "blur(4px)"
2816
- },
2817
- children: STATUS_LABEL[status] ?? status
2818
- }
2819
- ),
2820
- ext && /* @__PURE__ */ jsx(
2821
- "span",
2822
- {
2823
- style: {
2824
- position: "absolute",
2825
- top: 8,
2826
- left: 8,
2827
- fontSize: 9,
2828
- fontWeight: 700,
2829
- letterSpacing: "0.06em",
2830
- padding: "2px 6px",
2831
- borderRadius: 6,
2832
- background: "rgba(0,0,0,0.45)",
2833
- color: "#fff",
2834
- backdropFilter: "blur(4px)"
2835
- },
2836
- children: ext
2837
- }
2838
- )
2839
- ] }),
2840
- /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", display: "flex", flexDirection: "column", gap: 4 }, children: [
2841
- /* @__PURE__ */ jsx(
2842
- "span",
2843
- {
2844
- style: {
2845
- fontSize: 13,
2846
- fontWeight: 600,
2847
- color: "var(--silo-text, #0f172a)",
2848
- overflow: "hidden",
2849
- textOverflow: "ellipsis",
2850
- whiteSpace: "nowrap"
2851
- },
2852
- title: file.originalName,
2853
- children: file.originalName
2854
- }
2855
- ),
2856
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: [
2857
- formatBytes(file.size),
2858
- file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2859
- file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2860
- ] }),
2861
- isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
2862
- /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2863
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "var(--silo-text-muted, #94a3b8)", marginTop: 2, display: "block" }, children: [
2864
- STATUS_LABEL[status],
2865
- progress != null ? ` \xB7 ${progress}%` : ""
2683
+ return /* @__PURE__ */ jsxs(
2684
+ "div",
2685
+ {
2686
+ className: `flex flex-col rounded-xl border border-slate-200 bg-slate-50 overflow-hidden w-[220px] ${className}`,
2687
+ style,
2688
+ children: [
2689
+ /* @__PURE__ */ jsxs("div", { className: "relative h-[130px] bg-slate-100 shrink-0", children: [
2690
+ showThumb ? /* @__PURE__ */ jsx(
2691
+ Thumbnail,
2692
+ {
2693
+ fileKey: file.key,
2694
+ mimeType: file.mimeType,
2695
+ width: "100%",
2696
+ height: 130,
2697
+ borderRadius: "0",
2698
+ style: { display: "block" }
2699
+ }
2700
+ ) : /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
2701
+ /* @__PURE__ */ jsx(
2702
+ "span",
2703
+ {
2704
+ className: "absolute top-2 right-2 text-[10px] font-bold tracking-[0.05em] py-0.5 px-2 rounded-full backdrop-blur-sm bg-black/55",
2705
+ style: { color: statusColor(status) },
2706
+ children: STATUS_LABEL[status] ?? status
2707
+ }
2708
+ ),
2709
+ ext && /* @__PURE__ */ jsx("span", { className: "absolute top-2 left-2 text-[9px] font-bold tracking-[0.06em] py-0.5 px-1.5 rounded-md backdrop-blur-sm bg-black/45 text-white uppercase", children: ext })
2710
+ ] }),
2711
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-1", children: [
2712
+ /* @__PURE__ */ jsx(
2713
+ "span",
2714
+ {
2715
+ className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap",
2716
+ title: file.originalName,
2717
+ children: file.originalName
2718
+ }
2719
+ ),
2720
+ /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-slate-400", children: [
2721
+ formatBytes(file.size),
2722
+ file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2723
+ file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2724
+ ] }),
2725
+ isProcessing(status) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
2726
+ /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2727
+ /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 mt-0.5 block", children: [
2728
+ STATUS_LABEL[status],
2729
+ progress != null ? ` \xB7 ${progress}%` : ""
2730
+ ] })
2731
+ ] }),
2732
+ actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mt-1.5 flex-wrap", children: [
2733
+ actions.includes("preview") && onPreview && /* @__PURE__ */ jsx(
2734
+ "button",
2735
+ {
2736
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
2737
+ onClick: () => onPreview(fileId),
2738
+ children: "Preview"
2739
+ }
2740
+ ),
2741
+ actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2742
+ "button",
2743
+ {
2744
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
2745
+ onClick: () => {
2746
+ const url = `${file.key}`;
2747
+ navigator.clipboard.writeText(url).catch(() => void 0);
2748
+ onCopyUrl(url);
2749
+ },
2750
+ children: "Copy URL"
2751
+ }
2752
+ ),
2753
+ actions.includes("delete") && onDelete && /* @__PURE__ */ jsx(
2754
+ "button",
2755
+ {
2756
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border-transparent bg-red-500/10 text-red-500 cursor-pointer transition-colors hover:bg-red-500/20",
2757
+ onClick: () => onDelete(fileId),
2758
+ children: "Delete"
2759
+ }
2760
+ )
2761
+ ] })
2866
2762
  ] })
2867
- ] }),
2868
- actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }, children: [
2869
- actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { onClick: () => onPreview(fileId), style: btnStyle, children: "Preview" }),
2870
- actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2871
- "button",
2872
- {
2873
- onClick: () => {
2874
- const url = `${file.key}`;
2875
- navigator.clipboard.writeText(url).catch(() => void 0);
2876
- onCopyUrl(url);
2877
- },
2878
- style: btnStyle,
2879
- children: "Copy URL"
2880
- }
2881
- ),
2882
- actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { onClick: () => onDelete(fileId), style: { ...btnStyle, color: "var(--silo-error, #ef4444)" }, children: "Delete" })
2883
- ] })
2884
- ] })
2885
- ] });
2763
+ ]
2764
+ }
2765
+ );
2886
2766
  }
2887
- var btnStyle = {
2888
- fontSize: 11,
2889
- fontWeight: 600,
2890
- padding: "3px 9px",
2891
- borderRadius: 6,
2892
- border: "1px solid var(--silo-border, #e2e8f0)",
2893
- background: "transparent",
2894
- color: "var(--silo-text, #0f172a)",
2895
- cursor: "pointer",
2896
- lineHeight: 1.6
2897
- };
2898
2767
  var STATUS_LABEL2 = {
2899
2768
  CREATED: "Created",
2900
2769
  UPLOADING: "Uploading",
@@ -2933,40 +2802,42 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2933
2802
  /* @__PURE__ */ jsx(
2934
2803
  "div",
2935
2804
  {
2805
+ className: "fixed inset-0 z-[1000] bg-black/60 backdrop-blur-md",
2936
2806
  onClick: onClose,
2937
- "aria-hidden": true,
2938
- style: {
2939
- position: "fixed",
2940
- inset: 0,
2941
- zIndex: 1e3,
2942
- background: "rgba(0,0,0,0.6)",
2943
- backdropFilter: "blur(6px)"
2944
- }
2807
+ "aria-hidden": true
2945
2808
  }
2946
2809
  ),
2947
2810
  /* @__PURE__ */ jsxs(
2948
2811
  "div",
2949
2812
  {
2813
+ className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1001] w-[min(92vw,560px)] max-h-[90vh] flex flex-col rounded-2xl bg-white shadow-[0_24px_80px_rgba(0,0,0,0.35)] overflow-hidden",
2950
2814
  role: "dialog",
2951
2815
  "aria-modal": true,
2952
2816
  "aria-label": file?.originalName ?? "File preview",
2953
- style: modal,
2954
2817
  onKeyDown: (e) => {
2955
2818
  if (e.key === "Escape") onClose();
2956
2819
  },
2957
2820
  children: [
2958
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid var(--silo-border, #e2e8f0)" }, children: [
2959
- /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 14, fontWeight: 600, color: "var(--silo-text, #0f172a)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: file?.originalName ?? "Loading..." }),
2960
- /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", style: closeBtn, children: "\u2715" })
2821
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-slate-200", children: [
2822
+ /* @__PURE__ */ jsx("span", { className: "flex-1 text-[14px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: file?.originalName ?? "Loading..." }),
2823
+ /* @__PURE__ */ jsx(
2824
+ "button",
2825
+ {
2826
+ className: "bg-none border-none cursor-pointer text-base text-slate-400 leading-none p-0.5 px-1 shrink-0 hover:text-slate-600 transition-colors",
2827
+ onClick: onClose,
2828
+ "aria-label": "Close",
2829
+ children: "\u2715"
2830
+ }
2831
+ )
2961
2832
  ] }),
2962
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#0f0f0f", minHeight: 240, position: "relative" }, children: [
2963
- loading && !file && /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: 13 }, children: "Loading..." }),
2833
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center bg-[#0f0f0f] min-h-[240px] relative", children: [
2834
+ loading && !file && /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "Loading..." }),
2964
2835
  file && isImg && url && /* @__PURE__ */ jsx(
2965
2836
  "img",
2966
2837
  {
2967
2838
  src: url,
2968
2839
  alt: file.originalName,
2969
- style: { maxWidth: "100%", maxHeight: 420, objectFit: "contain", display: "block" }
2840
+ className: "max-w-full max-h-[420px] object-contain block"
2970
2841
  }
2971
2842
  ),
2972
2843
  file && isVid && url && /* @__PURE__ */ jsx(
@@ -2974,43 +2845,34 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2974
2845
  {
2975
2846
  src: url,
2976
2847
  controls: true,
2977
- style: { maxWidth: "100%", maxHeight: 420, display: "block" }
2848
+ className: "max-w-full max-h-[420px] block"
2978
2849
  }
2979
2850
  ),
2980
- file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
2851
+ file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 p-10", children: [
2981
2852
  /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
2982
- /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: 13 }, children: "No preview available" })
2853
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "No preview available" })
2983
2854
  ] }),
2984
- file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
2985
- position: "absolute",
2986
- inset: 0,
2987
- display: "flex",
2988
- flexDirection: "column",
2989
- alignItems: "center",
2990
- justifyContent: "center",
2991
- gap: 12,
2992
- background: "rgba(0,0,0,0.65)"
2993
- }, children: [
2994
- /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
2995
- /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2996
- progress != null && /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8", fontSize: 12 }, children: [
2855
+ file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/65", children: [
2856
+ /* @__PURE__ */ jsx("span", { className: "text-white text-[14px] font-semibold", children: STATUS_LABEL2[status] }),
2857
+ /* @__PURE__ */ jsx("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2858
+ progress != null && /* @__PURE__ */ jsxs("span", { className: "text-[12px] text-slate-400", children: [
2997
2859
  progress,
2998
2860
  "%"
2999
2861
  ] })
3000
2862
  ] })
3001
2863
  ] }),
3002
- file && /* @__PURE__ */ jsxs("div", { style: { padding: "14px 20px", borderTop: "1px solid var(--silo-border, #e2e8f0)", display: "flex", flexDirection: "column", gap: 8 }, children: [
3003
- /* @__PURE__ */ jsxs("div", { style: metaGrid, children: [
2864
+ file && /* @__PURE__ */ jsxs("div", { className: "px-5 py-3.5 border-t border-slate-200 flex flex-col gap-2", children: [
2865
+ /* @__PURE__ */ jsxs("div", { className: "grid gap-x-4 gap-y-1.5 items-baseline", style: { gridTemplateColumns: "auto 1fr" }, children: [
3004
2866
  /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
3005
2867
  /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
3006
- /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucket }),
2868
+ /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucketName ?? file.bucket }),
3007
2869
  /* @__PURE__ */ jsx(MetaRow, { label: "Status", value: STATUS_LABEL2[status] ?? status, highlight: status === "READY" }),
3008
2870
  file.metadata?.width && /* @__PURE__ */ jsx(MetaRow, { label: "Dimensions", value: `${file.metadata.width}\xD7${file.metadata.height}` }),
3009
2871
  file.metadata?.duration && /* @__PURE__ */ jsx(MetaRow, { label: "Duration", value: `${Math.round(file.metadata.duration)}s` }),
3010
2872
  file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
3011
2873
  /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
3012
2874
  ] }),
3013
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }, children: [
2875
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap mt-1", children: [
3014
2876
  file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
3015
2877
  file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
3016
2878
  file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
@@ -3018,8 +2880,8 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
3018
2880
  url && /* @__PURE__ */ jsx(
3019
2881
  "button",
3020
2882
  {
2883
+ className: "w-full inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1.5 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100 mt-1",
3021
2884
  onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
3022
- style: { ...btnStyle2, marginTop: 4, width: "100%", textAlign: "center" },
3023
2885
  children: "Copy URL"
3024
2886
  }
3025
2887
  )
@@ -3031,64 +2893,19 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
3031
2893
  }
3032
2894
  function MetaRow({ label, value, highlight }) {
3033
2895
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3034
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)", fontWeight: 500 }, children: label }),
3035
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: highlight ? "var(--silo-success, #22c55e)" : "var(--silo-text, #0f172a)", fontWeight: highlight ? 600 : 400 }, children: value })
2896
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400 font-medium", children: label }),
2897
+ /* @__PURE__ */ jsx("span", { className: `text-[12px] ${highlight ? "text-green-500 font-semibold" : "text-slate-900"}`, children: value })
3036
2898
  ] });
3037
2899
  }
3038
2900
  function Badge({ children, muted }) {
3039
- return /* @__PURE__ */ jsx("span", { style: {
3040
- fontSize: 10,
3041
- fontWeight: 700,
3042
- letterSpacing: "0.05em",
3043
- padding: "2px 7px",
3044
- borderRadius: 99,
3045
- border: "1px solid var(--silo-border, #e2e8f0)",
3046
- color: muted ? "var(--silo-text-muted, #94a3b8)" : "var(--silo-accent, #6366f1)",
3047
- background: "transparent"
3048
- }, children });
2901
+ return /* @__PURE__ */ jsx(
2902
+ "span",
2903
+ {
2904
+ className: `inline-flex text-[10px] font-bold tracking-[0.05em] py-0.5 px-2 rounded-full border border-slate-200 ${muted ? "text-slate-400" : "text-indigo-500"}`,
2905
+ children
2906
+ }
2907
+ );
3049
2908
  }
3050
- var modal = {
3051
- position: "fixed",
3052
- top: "50%",
3053
- left: "50%",
3054
- transform: "translate(-50%, -50%)",
3055
- zIndex: 1001,
3056
- width: "min(92vw, 560px)",
3057
- maxHeight: "90vh",
3058
- display: "flex",
3059
- flexDirection: "column",
3060
- borderRadius: "var(--silo-radius, 16px)",
3061
- background: "var(--silo-bg, #fff)",
3062
- boxShadow: "0 24px 80px rgba(0,0,0,0.35)",
3063
- overflow: "hidden",
3064
- fontFamily: "var(--silo-font, inherit)"
3065
- };
3066
- var closeBtn = {
3067
- background: "none",
3068
- border: "none",
3069
- cursor: "pointer",
3070
- fontSize: 16,
3071
- color: "var(--silo-text-muted, #94a3b8)",
3072
- lineHeight: 1,
3073
- padding: "2px 4px",
3074
- flexShrink: 0
3075
- };
3076
- var btnStyle2 = {
3077
- fontSize: 12,
3078
- fontWeight: 600,
3079
- padding: "7px 14px",
3080
- borderRadius: 8,
3081
- border: "1px solid var(--silo-border, #e2e8f0)",
3082
- background: "transparent",
3083
- color: "var(--silo-text, #0f172a)",
3084
- cursor: "pointer"
3085
- };
3086
- var metaGrid = {
3087
- display: "grid",
3088
- gridTemplateColumns: "auto 1fr",
3089
- gap: "5px 16px",
3090
- alignItems: "baseline"
3091
- };
3092
2909
 
3093
2910
  export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoOptions, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
3094
2911
  //# sourceMappingURL=index.js.map