@geekapps/silo-elements-nextjs 0.0.1 → 0.0.3

package/dist/index.js

@@ -1,11 +1,1697 @@
-export { ImageUploader } from "./ImageUploader.js";
-export { VideoUploader } from "./VideoUploader.js";
-export { FileUploader } from "./FileUploader.js";
-export { MediaUploader } from "./MediaUploader.js";
-export { Video, Sources, Source, Subtitles, Subtitle, Storyboard, StoryboardFrame, VideoPlayer, } from "./VideoPlayer.js";
-export { DropZone } from "./components/DropZone.js";
-export { ProgressBar } from "./components/ProgressBar.js";
-export { defaultTheme, resolveTheme } from "./utils/theme.js";
-// Re-export provider and hooks so consumers only need @silo/elements
-export { SiloProvider, useUpload, useSignedUrl, useFileStatus, useSiloClient, } from "@silo/nextjs";
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
+import { useUpload } from '@geekapps/silo-nextjs';
+export { SiloProvider, useFileStatus, useSignedUrl, useSiloClient, useUpload } from '@geekapps/silo-nextjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import gsap from 'gsap';
+
+// src/ImageUploader.tsx
+
+// src/utils/theme.ts
+var defaultTheme = {
+  borderColor: "#e2e8f0",
+  borderColorActive: "#6366f1",
+  backgroundColor: "#f8fafc",
+  backgroundColorHover: "#f1f5f9",
+  textColor: "#0f172a",
+  textColorMuted: "#64748b",
+  accentColor: "#6366f1",
+  accentColorHover: "#4f46e5",
+  errorColor: "#ef4444",
+  successColor: "#22c55e",
+  borderRadius: "12px",
+  fontFamily: "inherit"
+};
+function resolveTheme(theme) {
+  return { ...defaultTheme, ...theme };
+}
+function themeToVars(theme) {
+  return {
+    "--silo-border": theme.borderColor,
+    "--silo-border-active": theme.borderColorActive,
+    "--silo-bg": theme.backgroundColor,
+    "--silo-bg-hover": theme.backgroundColorHover,
+    "--silo-text": theme.textColor,
+    "--silo-text-muted": theme.textColorMuted,
+    "--silo-accent": theme.accentColor,
+    "--silo-accent-hover": theme.accentColorHover,
+    "--silo-error": theme.errorColor,
+    "--silo-success": theme.successColor,
+    "--silo-radius": theme.borderRadius,
+    "--silo-font": theme.fontFamily
+  };
+}
+function DropZone({
+  accept,
+  multiple = false,
+  disabled = false,
+  maxSize,
+  onFiles,
+  onError,
+  className = "",
+  style,
+  theme,
+  children
+}) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef(null);
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const validate = useCallback(
+    (files) => {
+      return files.filter((f) => {
+        if (maxSize && f.size > maxSize) {
+          onError?.(new Error(`File "${f.name}" exceeds max size of ${maxSize} bytes`));
+          return false;
+        }
+        return true;
+      });
+    },
+    [maxSize, onError]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      const valid = validate(files);
+      if (valid.length) onFiles(valid);
+    },
+    [disabled, validate, onFiles]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      const files = Array.from(e.target.files ?? []);
+      const valid = validate(files);
+      if (valid.length) onFiles(valid);
+      e.target.value = "";
+    },
+    [validate, onFiles]
+  );
+  const rootStyle = {
+    ...vars,
+    fontFamily: "var(--silo-font)",
+    border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
+    borderRadius: "var(--silo-radius)",
+    backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
+    color: "var(--silo-text)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "border-color 0.15s, background-color 0.15s",
+    opacity: disabled ? 0.5 : 1,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `silo-dropzone${className ? ` ${className}` : ""}`,
+      style: rootStyle,
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: handleDrop,
+      onClick: () => !disabled && inputRef.current?.click(),
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      },
+      "aria-label": "Upload area",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            style: { display: "none" },
+            onChange: handleChange,
+            disabled
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function ProgressBar({ progress, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `silo-progress-track${className ? ` ${className}` : ""}`,
+      style: {
+        height: "6px",
+        borderRadius: "3px",
+        backgroundColor: "rgba(99,102,241,0.15)",
+        overflow: "hidden",
+        ...style
+      },
+      role: "progressbar",
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "silo-progress-fill",
+          style: {
+            height: "100%",
+            width: `${progress}%`,
+            backgroundColor: "var(--silo-accent, #6366f1)",
+            borderRadius: "3px",
+            transition: "width 0.2s ease"
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/utils/format.ts
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+function ImageUploader({
+  bucket,
+  expiresIn,
+  private: isPrivate = true,
+  onUpload,
+  onError,
+  className = "",
+  style,
+  disabled = false,
+  maxSize,
+  accept = "image/*",
+  showPreview = true,
+  theme,
+  renderIcon,
+  renderProgress,
+  renderSuccess,
+  renderError,
+  children
+}) {
+  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
+  const { state, upload, reset } = useUpload(uploadOpts);
+  const [preview, setPreview] = useState(null);
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const handleFiles = useCallback(
+    async (files) => {
+      const file = files[0];
+      if (!file) return;
+      if (showPreview) {
+        const url = URL.createObjectURL(file);
+        setPreview(url);
+      }
+      try {
+        const result = await upload(file);
+        onUpload?.(result);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+    [upload, onUpload, onError, showPreview]
+  );
+  const containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    width: "100%",
+    fontFamily: "var(--silo-font)",
+    ...style
+  };
+  if (state.status === "error" && renderError) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  }
+  if (state.status === "done" && renderSuccess) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        ...accept !== void 0 && { accept },
+        ...maxSize !== void 0 && { maxSize },
+        ...onError !== void 0 && { onError },
+        ...theme !== void 0 && { theme },
+        disabled: disabled || state.status === "uploading",
+        onFiles: handleFiles,
+        style: { padding: "32px 24px", textAlign: "center" },
+        children: preview && state.status !== "uploading" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: "Preview",
+              style: {
+                maxWidth: "100%",
+                maxHeight: "200px",
+                borderRadius: "8px",
+                objectFit: "contain"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Click or drag to replace" })
+        ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
+          children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Drop image here" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
+              "Max ",
+              formatBytes(maxSize)
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: "Uploading\u2026" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          state.progress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+    ] }) }),
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "10px 14px",
+      borderRadius: "8px",
+      backgroundColor: "rgba(34,197,94,0.1)",
+      color: "var(--silo-success, #22c55e)",
+      fontSize: "14px"
+    }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsx("span", { children: "Upload complete" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            reset();
+            setPreview(null);
+          },
+          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
+          children: "Upload another"
+        }
+      )
+    ] }),
+    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      padding: "10px 14px",
+      borderRadius: "8px",
+      backgroundColor: "rgba(239,68,68,0.1)",
+      color: "var(--silo-error, #ef4444)",
+      fontSize: "14px"
+    }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx("span", { children: state.error.message }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            reset();
+          },
+          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
+          children: "Retry"
+        }
+      )
+    ] })
+  ] });
+}
+function VideoUploader({
+  bucket,
+  expiresIn,
+  private: isPrivate = true,
+  onUpload,
+  onError,
+  className = "",
+  style,
+  disabled = false,
+  maxSize,
+  accept = "video/*",
+  showPreview = true,
+  theme,
+  renderIcon,
+  renderProgress,
+  renderSuccess,
+  renderError,
+  children
+}) {
+  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
+  const { state, upload, reset } = useUpload(uploadOpts);
+  const [preview, setPreview] = useState(null);
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const handleFiles = useCallback(
+    async (files) => {
+      const file = files[0];
+      if (!file) return;
+      if (showPreview) {
+        const url = URL.createObjectURL(file);
+        setPreview(url);
+      }
+      try {
+        const result = await upload(file);
+        onUpload?.(result);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+    [upload, onUpload, onError, showPreview]
+  );
+  const containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    width: "100%",
+    fontFamily: "var(--silo-font)",
+    ...style
+  };
+  if (state.status === "error" && renderError) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  }
+  if (state.status === "done" && renderSuccess) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        ...accept !== void 0 && { accept },
+        ...maxSize !== void 0 && { maxSize },
+        ...onError !== void 0 && { onError },
+        ...theme !== void 0 && { theme },
+        disabled: disabled || state.status === "uploading",
+        onFiles: handleFiles,
+        style: { padding: "32px 24px", textAlign: "center" },
+        children: preview && state.status !== "uploading" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx(
+            "video",
+            {
+              src: preview,
+              style: { maxWidth: "100%", maxHeight: "180px", borderRadius: "8px" },
+              controls: false,
+              muted: true,
+              playsInline: true
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Click or drag to replace" })
+        ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
+          children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Drop video here" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
+              "MP4, MOV, MKV, WebM",
+              maxSize ? ` \xB7 Max ${formatBytes(maxSize)}` : ""
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: "Uploading video\u2026" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          state.progress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Processing will start after upload completes" })
+    ] }) }),
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.1)", color: "var(--silo-success, #22c55e)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsx("span", { children: "Video uploaded \u2014 processing in background" }),
+      /* @__PURE__ */ jsx("button", { onClick: (e) => {
+        e.stopPropagation();
+        reset();
+        setPreview(null);
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Upload another" })
+    ] }),
+    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+      /* @__PURE__ */ jsx("span", { children: state.error.message }),
+      /* @__PURE__ */ jsx("button", { onClick: (e) => {
+        e.stopPropagation();
+        reset();
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Retry" })
+    ] })
+  ] });
+}
+function FileUploader({
+  bucket,
+  expiresIn,
+  private: isPrivate = true,
+  onUpload,
+  onError,
+  className = "",
+  style,
+  disabled = false,
+  maxSize,
+  accept,
+  multiple = false,
+  theme,
+  renderIcon,
+  renderProgress,
+  renderSuccess,
+  renderError,
+  children
+}) {
+  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
+  const { state, upload, reset } = useUpload(uploadOpts);
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const handleFiles = useCallback(
+    async (files) => {
+      const file = files[0];
+      if (!file) return;
+      try {
+        const result = await upload(file);
+        onUpload?.(result);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    },
+    [upload, onUpload, onError]
+  );
+  const containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    width: "100%",
+    fontFamily: "var(--silo-font)",
+    ...style
+  };
+  if (state.status === "error" && renderError) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  }
+  if (state.status === "done" && renderSuccess) {
+    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        ...accept !== void 0 && { accept },
+        ...maxSize !== void 0 && { maxSize },
+        ...onError !== void 0 && { onError },
+        ...theme !== void 0 && { theme },
+        multiple,
+        disabled: disabled || state.status === "uploading",
+        onFiles: handleFiles,
+        style: { padding: "28px 24px", textAlign: "center" },
+        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
+          children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: multiple ? "Drop files here" : "Drop a file here" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
+              "Max ",
+              formatBytes(maxSize)
+            ] })
+          ] })
+        ] })
+      }
+    ),
+    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: "Uploading\u2026" }),
+        /* @__PURE__ */ jsxs("span", { children: [
+          state.progress,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+    ] }) }),
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "#22c55e", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: state.result.key }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(state.result.size) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: (e) => {
+        e.stopPropagation();
+        reset();
+      }, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Replace" })
+    ] }),
+    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("span", { children: state.error.message }),
+      /* @__PURE__ */ jsx("button", { onClick: (e) => {
+        e.stopPropagation();
+        reset();
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Retry" })
+    ] })
+  ] });
+}
+var TAB_LABELS = {
+  image: { label: "Image", icon: "\u{1F5BC}\uFE0F" },
+  video: { label: "Video", icon: "\u{1F3AC}" },
+  file: { label: "File", icon: "\u{1F4CE}" }
+};
+function MediaUploader({
+  tabs = ["image", "video", "file"],
+  defaultTab,
+  imageProps,
+  videoProps,
+  fileProps,
+  className = "",
+  style,
+  theme,
+  onUpload,
+  onError,
+  ...shared
+}) {
+  const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0] ?? "image");
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "0",
+    width: "100%",
+    fontFamily: "var(--silo-font)",
+    border: "1px solid var(--silo-border)",
+    borderRadius: "var(--silo-radius)",
+    overflow: "hidden",
+    backgroundColor: "var(--silo-bg)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setActiveTab(tab),
+        style: {
+          flex: 1,
+          padding: "10px 8px",
+          background: "none",
+          border: "none",
+          borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeTab === tab ? 600 : 400,
+          color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
+          transition: "color 0.15s, border-color 0.15s",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
+          /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
+        ]
+      },
+      tab
+    )) }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
+      activeTab === "image" && /* @__PURE__ */ jsx(
+        ImageUploader,
+        {
+          ...shared,
+          ...imageProps,
+          ...theme !== void 0 && { theme },
+          ...onUpload !== void 0 && { onUpload },
+          ...onError !== void 0 && { onError }
+        }
+      ),
+      activeTab === "video" && /* @__PURE__ */ jsx(
+        VideoUploader,
+        {
+          ...shared,
+          ...videoProps,
+          ...theme !== void 0 && { theme },
+          ...onUpload !== void 0 && { onUpload },
+          ...onError !== void 0 && { onError }
+        }
+      ),
+      activeTab === "file" && /* @__PURE__ */ jsx(
+        FileUploader,
+        {
+          ...shared,
+          ...fileProps,
+          ...theme !== void 0 && { theme },
+          ...onUpload !== void 0 && { onUpload },
+          ...onError !== void 0 && { onError }
+        }
+      )
+    ] })
+  ] });
+}
+var AUTO_QUALITY = {
+  id: "auto",
+  label: "Auto",
+  type: "auto"
+};
+function Sources(_props) {
+  return null;
+}
+function Source(_props) {
+  return null;
+}
+function Subtitles(_props) {
+  return null;
+}
+function Subtitle(_props) {
+  return null;
+}
+function Storyboard(_props) {
+  return null;
+}
+function StoryboardFrame(_props) {
+  return null;
+}
+function Video({
+  title,
+  description,
+  poster,
+  children,
+  className,
+  autoHideControls = true,
+  defaultVolume = 0.72
+}) {
+  const parsed = useMemo(() => parseVideoChildren(children), [children]);
+  const initialSourceIndex = useMemo(() => {
+    const index = parsed.sources.findIndex((source) => source.default);
+    return index >= 0 ? index : 0;
+  }, [parsed.sources]);
+  const initialSubtitleMode = useMemo(() => {
+    const track = parsed.subtitles.find((subtitle) => subtitle.default);
+    return track?.srclang ?? "off";
+  }, [parsed.subtitles]);
+  const containerRef = useRef(null);
+  const chromeRef = useRef(null);
+  const playerRef = useRef(null);
+  const videoRef = useRef(null);
+  const progressRef = useRef(null);
+  const hlsRef = useRef(null);
+  const dashRef = useRef(null);
+  const hideTimerRef = useRef(null);
+  const [sourceIndex, setSourceIndex] = useState(initialSourceIndex);
+  const [qualities, setQualities] = useState([AUTO_QUALITY]);
+  const [selectedQuality, setSelectedQuality] = useState("auto");
+  const [audioTracks, setAudioTracks] = useState([]);
+  const [selectedAudio, setSelectedAudio] = useState(0);
+  const [openMenu, setOpenMenu] = useState(null);
+  const [subtitleMode, setSubtitleMode] = useState(initialSubtitleMode);
+  const [storyboardCues, setStoryboardCues] = useState(
+    []
+  );
+  const [preview, setPreview] = useState(null);
+  const [duration, setDuration] = useState(0);
+  const [currentTime, setCurrentTime] = useState(0);
+  const [bufferedTime, setBufferedTime] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [controlsVisible, setControlsVisible] = useState(true);
+  const [volume, setVolume] = useState(defaultVolume);
+  const [isMuted, setIsMuted] = useState(false);
+  const [isFullscreen, setIsFullscreen] = useState(false);
+  const [error, setError] = useState(null);
+  const activeSource = parsed.sources[sourceIndex] ?? parsed.sources[0] ?? null;
+  const progressPercent = duration ? currentTime / duration * 100 : 0;
+  const bufferedPercent = duration ? bufferedTime / duration * 100 : 0;
+  const destroyMediaEngines = useCallback(() => {
+    if (hlsRef.current) {
+      hlsRef.current.destroy();
+      hlsRef.current = null;
+    }
+    if (dashRef.current) {
+      dashRef.current.reset();
+      dashRef.current = null;
+    }
+  }, []);
+  const applySubtitleMode = useCallback((mode) => {
+    const video = videoRef.current;
+    if (!video) return;
+    Array.from(video.textTracks).forEach((track) => {
+      track.mode = mode !== "off" && track.language === mode ? "showing" : "disabled";
+    });
+  }, []);
+  const showControlsTemporarily = useCallback(() => {
+    setControlsVisible(true);
+    if (hideTimerRef.current) {
+      window.clearTimeout(hideTimerRef.current);
+    }
+    const video = videoRef.current;
+    if (autoHideControls && video && !video.paused) {
+      hideTimerRef.current = window.setTimeout(() => {
+        setControlsVisible(false);
+      }, 2400);
+    }
+  }, [autoHideControls]);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    gsap.fromTo(
+      containerRef.current,
+      {
+        opacity: 0,
+        y: 36,
+        scale: 0.985,
+        filter: "blur(10px)"
+      },
+      {
+        opacity: 1,
+        y: 0,
+        scale: 1,
+        filter: "blur(0px)",
+        duration: 0.85,
+        ease: "power3.out"
+      }
+    );
+  }, []);
+  useEffect(() => {
+    if (!chromeRef.current) return;
+    gsap.to(chromeRef.current, {
+      opacity: controlsVisible ? 1 : 0,
+      y: controlsVisible ? 0 : 10,
+      duration: 0.22,
+      ease: "power2.out"
+    });
+  }, [controlsVisible]);
+  useEffect(() => {
+    if (sourceIndex >= parsed.sources.length) {
+      setSourceIndex(initialSourceIndex);
+    }
+  }, [sourceIndex, parsed.sources.length, initialSourceIndex]);
+  useEffect(() => {
+    if (subtitleMode !== "off" && !parsed.subtitles.some((subtitle) => subtitle.srclang === subtitleMode)) {
+      setSubtitleMode(initialSubtitleMode);
+    }
+  }, [subtitleMode, parsed.subtitles, initialSubtitleMode]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    const syncTime = () => {
+      setCurrentTime(video.currentTime || 0);
+      if (video.buffered.length > 0) {
+        setBufferedTime(video.buffered.end(video.buffered.length - 1));
+      }
+    };
+    const syncDuration = () => {
+      setDuration(Number.isFinite(video.duration) ? video.duration : 0);
+      applySubtitleMode(subtitleMode);
+    };
+    const onPlay = () => {
+      setIsPlaying(true);
+      showControlsTemporarily();
+    };
+    const onPause = () => {
+      setIsPlaying(false);
+      setControlsVisible(true);
+    };
+    const onWaiting = () => setIsLoading(true);
+    const onCanPlay = () => setIsLoading(false);
+    const onEnded = () => setControlsVisible(true);
+    video.addEventListener("timeupdate", syncTime);
+    video.addEventListener("progress", syncTime);
+    video.addEventListener("loadedmetadata", syncDuration);
+    video.addEventListener("durationchange", syncDuration);
+    video.addEventListener("play", onPlay);
+    video.addEventListener("pause", onPause);
+    video.addEventListener("waiting", onWaiting);
+    video.addEventListener("canplay", onCanPlay);
+    video.addEventListener("ended", onEnded);
+    return () => {
+      video.removeEventListener("timeupdate", syncTime);
+      video.removeEventListener("progress", syncTime);
+      video.removeEventListener("loadedmetadata", syncDuration);
+      video.removeEventListener("durationchange", syncDuration);
+      video.removeEventListener("play", onPlay);
+      video.removeEventListener("pause", onPause);
+      video.removeEventListener("waiting", onWaiting);
+      video.removeEventListener("canplay", onCanPlay);
+      video.removeEventListener("ended", onEnded);
+    };
+  }, [applySubtitleMode, subtitleMode, showControlsTemporarily]);
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.volume = volume;
+    video.muted = isMuted || volume === 0;
+  }, [volume, isMuted]);
+  useEffect(() => {
+    applySubtitleMode(subtitleMode);
+  }, [subtitleMode, applySubtitleMode]);
+  useEffect(() => {
+    const onFullscreenChange = () => {
+      setIsFullscreen(Boolean(document.fullscreenElement));
+    };
+    document.addEventListener("fullscreenchange", onFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", onFullscreenChange);
+    };
+  }, []);
+  useEffect(() => {
+    let cancelled = false;
+    async function loadStoryboard() {
+      if (!parsed.storyboard) {
+        setStoryboardCues([]);
+        return;
+      }
+      if (parsed.storyboard.frames.length > 0) {
+        setStoryboardCues(parsed.storyboard.frames);
+        return;
+      }
+      if (!parsed.storyboard.src) {
+        setStoryboardCues([]);
+        return;
+      }
+      try {
+        const response = await fetch(parsed.storyboard.src);
+        if (!response.ok) {
+          throw new Error("Storyboard not found");
+        }
+        const text = await response.text();
+        const cues = parseStoryboardVtt(
+          text,
+          new URL(parsed.storyboard.src, window.location.href).href
+        );
+        if (!cancelled) {
+          setStoryboardCues(cues);
+        }
+      } catch {
+        if (!cancelled && parsed.storyboard.fallbackImage) {
+          setStoryboardCues([
+            {
+              start: 0,
+              end: Number.MAX_SAFE_INTEGER,
+              image: parsed.storyboard.fallbackImage,
+              w: parsed.storyboard.width ?? 160,
+              h: parsed.storyboard.height ?? 90
+            }
+          ]);
+        }
+      }
+    }
+    loadStoryboard();
+    return () => {
+      cancelled = true;
+    };
+  }, [parsed.storyboard]);
+  useEffect(() => {
+    const video = videoRef.current;
+    let cancelled = false;
+    if (!video || !activeSource) {
+      return;
+    }
+    destroyMediaEngines();
+    setError(null);
+    setIsLoading(true);
+    setCurrentTime(0);
+    setBufferedTime(0);
+    setDuration(0);
+    setSelectedQuality("auto");
+    setQualities([AUTO_QUALITY]);
+    setAudioTracks([]);
+    setSelectedAudio(0);
+    setOpenMenu(null);
+    video.pause();
+    video.removeAttribute("src");
+    video.load();
+    const sourceType = inferSourceType(activeSource);
+    if (sourceType === "dash") {
+      void (async () => {
+        try {
+          const dashModule = await import('dashjs');
+          if (cancelled) return;
+          const dashjs = dashModule;
+          const dash = dashjs.MediaPlayer().create();
+          dashRef.current = dash;
+          dash.updateSettings({
+            streaming: {
+              abr: {
+                autoSwitchBitrate: {
+                  video: true
+                }
+              }
+            }
+          });
+          dash.on(dashjs.MediaPlayer.events.STREAM_INITIALIZED, () => {
+            const bitrates = dash.getBitrateInfoListFor("video") ?? [];
+            setQualities([
+              AUTO_QUALITY,
+              ...bitrates.map((item, index) => ({
+                id: `dash-${index}`,
+                label: item.height ? `${item.height}p` : `${Math.round((item.bitrate ?? 0) / 1e3)} kbps`,
+                type: "dash",
+                index
+              }))
+            ]);
+            setIsLoading(false);
+          });
+          dash.on(dashjs.MediaPlayer.events.ERROR, () => {
+            setError("N\xE3o foi poss\xEDvel reproduzir o stream MPEG-DASH.");
+            setIsLoading(false);
+          });
+          dash.initialize(video, activeSource.src, false);
+        } catch {
+          if (!cancelled) {
+            setError("N\xE3o foi poss\xEDvel carregar o player MPEG-DASH.");
+            setIsLoading(false);
+          }
+        }
+      })();
+      return () => {
+        cancelled = true;
+        destroyMediaEngines();
+      };
+    }
+    if (sourceType === "hls") {
+      void (async () => {
+        try {
+          const HlsModule = await import('hls.js');
+          if (cancelled) return;
+          const Hls = HlsModule.default;
+          if (Hls.isSupported()) {
+            const hls = new Hls({
+              enableWorker: true,
+              maxBufferLength: 30,
+              maxMaxBufferLength: 60,
+              maxBufferSize: 60 * 1e3 * 1e3
+            });
+            hlsRef.current = hls;
+            hls.loadSource(activeSource.src);
+            hls.attachMedia(video);
+            hls.on(Hls.Events.MANIFEST_PARSED, (_, data) => {
+              const levels = data.levels ?? hls.levels ?? [];
+              setQualities([
+                AUTO_QUALITY,
+                ...levels.map((level, index) => ({
+                  id: `hls-${index}`,
+                  label: level.height ? `${level.height}p` : `${Math.round((level.bitrate ?? 0) / 1e3)} kbps`,
+                  type: "hls",
+                  index
+                }))
+              ]);
+              const tracks = hls.audioTracks ?? [];
+              if (tracks.length > 1) {
+                setAudioTracks(tracks.map((t, i) => ({
+                  id: i,
+                  label: t.name ?? t.lang ?? `Track ${i + 1}`
+                })));
+                setSelectedAudio(hls.audioTrack ?? 0);
+              }
+              setIsLoading(false);
+            });
+            hls.on(Hls.Events.AUDIO_TRACKS_UPDATED, (_, data) => {
+              const tracks = data.audioTracks ?? [];
+              if (tracks.length > 1) {
+                setAudioTracks(tracks.map((t, i) => ({
+                  id: i,
+                  label: t.name ?? t.lang ?? `Track ${i + 1}`
+                })));
+              }
+            });
+            hls.on(Hls.Events.ERROR, (_, data) => {
+              if (!data.fatal) return;
+              if (data.type === Hls.ErrorTypes.MEDIA_ERROR) {
+                hls.recoverMediaError();
+                return;
+              }
+              setError("N\xE3o foi poss\xEDvel reproduzir o stream HLS.");
+              setIsLoading(false);
+            });
+            return;
+          }
+          if (video.canPlayType("application/vnd.apple.mpegurl")) {
+            video.src = activeSource.src;
+            video.load();
+            setIsLoading(false);
+            return;
+          }
+          setError("Este navegador n\xE3o suporta HLS.");
+          setIsLoading(false);
+        } catch {
+          if (!cancelled) {
+            setError("N\xE3o foi poss\xEDvel carregar o player HLS.");
+            setIsLoading(false);
+          }
+        }
+      })();
+      return () => {
+        cancelled = true;
+        destroyMediaEngines();
+      };
+    }
+    video.src = activeSource.src;
+    video.load();
+    setIsLoading(false);
+    return () => {
+      cancelled = true;
+      video.removeAttribute("src");
+      video.load();
+    };
+  }, [activeSource, destroyMediaEngines]);
+  const togglePlay = useCallback(async () => {
+    const video = videoRef.current;
+    if (!video) return;
+    try {
+      if (video.paused) {
+        await video.play();
+      } else {
+        video.pause();
+      }
+    } catch {
+      setError("O navegador bloqueou a reprodu\xE7\xE3o autom\xE1tica.");
+    }
+  }, []);
+  const seekRelative = useCallback((seconds) => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.currentTime = Math.max(
+      0,
+      Math.min(video.currentTime + seconds, video.duration || 0)
+    );
+  }, []);
+  const toggleFullscreen = useCallback(async () => {
+    const player = playerRef.current;
+    if (!player) return;
+    try {
+      if (!document.fullscreenElement) {
+        await player.requestFullscreen();
+      } else {
+        await document.exitFullscreen();
+      }
+    } catch {
+      setError("N\xE3o foi poss\xEDvel alterar o modo fullscreen.");
+    }
+  }, []);
+  const changeAudio = useCallback((trackId) => {
+    setSelectedAudio(trackId);
+    setOpenMenu(null);
+    if (hlsRef.current) {
+      hlsRef.current.audioTrack = trackId;
+    }
+  }, []);
+  const changeQuality = useCallback(
+    (qualityId) => {
+      const option = qualities.find((quality) => quality.id === qualityId);
+      if (!option) return;
+      setSelectedQuality(qualityId);
+      setOpenMenu(null);
+      if (option.type === "auto") {
+        if (hlsRef.current) {
+          hlsRef.current.currentLevel = -1;
+        }
+        if (dashRef.current) {
+          dashRef.current.updateSettings({
+            streaming: {
+              abr: {
+                autoSwitchBitrate: {
+                  video: true
+                }
+              }
+            }
+          });
+        }
+        return;
+      }
+      if (option.type === "hls" && hlsRef.current && option.index != null) {
+        hlsRef.current.currentLevel = option.index;
+        return;
+      }
+      if (option.type === "dash" && dashRef.current && option.index != null) {
+        dashRef.current.updateSettings({
+          streaming: {
+            abr: {
+              autoSwitchBitrate: {
+                video: false
+              }
+            }
+          }
+        });
+        dashRef.current.setQualityFor("video", option.index);
+      }
+    },
+    [qualities]
+  );
+  const handleProgressPointerMove = useCallback(
+    (event) => {
+      const progress = progressRef.current;
+      if (!progress || !duration || storyboardCues.length === 0) {
+        setPreview(null);
+        return;
+      }
+      const rect = progress.getBoundingClientRect();
+      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+      const time = x / rect.width * duration;
+      const cue = findStoryboardCue(storyboardCues, time);
+      if (!cue) {
+        setPreview(null);
+        return;
+      }
+      setPreview({
+        cue,
+        time,
+        left: Math.max(80, Math.min(x, rect.width - 80))
+      });
+    },
+    [duration, storyboardCues]
+  );
+  const handleProgressPointerLeave = useCallback(() => {
+    setPreview(null);
+  }, []);
+  const handleProgressPointerDown = useCallback(
+    (event) => {
+      const video = videoRef.current;
+      const progress = progressRef.current;
+      if (!video || !progress || !duration) return;
+      const rect = progress.getBoundingClientRect();
+      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width));
+      const nextTime = x / rect.width * duration;
+      video.currentTime = nextTime;
+      setCurrentTime(nextTime);
+    },
+    [duration]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      const target = event.target;
+      const tagName = target.tagName.toLowerCase();
+      if (["input", "select", "button"].includes(tagName)) {
+        return;
+      }
+      if (event.key === " ") {
+        event.preventDefault();
+        togglePlay();
+      }
+      if (event.key === "ArrowRight") {
+        seekRelative(10);
+      }
+      if (event.key === "ArrowLeft") {
+        seekRelative(-10);
+      }
+      if (event.key.toLowerCase() === "f") {
+        toggleFullscreen();
+      }
+      if (event.key.toLowerCase() === "m") {
+        setIsMuted((value) => !value);
+      }
+    },
+    [seekRelative, toggleFullscreen, togglePlay]
+  );
+  if (!activeSource) {
+    return /* @__PURE__ */ jsxs("div", { className: "rounded-xl border border-red-200 bg-red-50 p-4 text-sm text-red-700", children: [
+      "O componente Video precisa de pelo menos um",
+      " ",
+      /* @__PURE__ */ jsx("code", { children: "<Source />" }),
+      "."
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: `mx-auto w-full max-w-6xl ${className ?? ""}`,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: playerRef,
+          tabIndex: 0,
+          onKeyDown: handleKeyDown,
+          onMouseMove: showControlsTemporarily,
+          onMouseLeave: () => {
+            if (isPlaying && autoHideControls) {
+              setControlsVisible(false);
+            }
+          },
+          className: "relative aspect-video w-full overflow-hidden rounded-[14px] bg-black shadow-[0_30px_90px_rgba(15,15,15,0.22)] outline-none ring-1 ring-black/5",
+          children: [
+            /* @__PURE__ */ jsx(
+              "video",
+              {
+                ref: videoRef,
+                className: "h-full w-full object-contain",
+                poster,
+                playsInline: true,
+                preload: "metadata",
+                crossOrigin: "anonymous",
+                children: parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                  "track",
+                  {
+                    kind: "subtitles",
+                    src: subtitle.src,
+                    srcLang: subtitle.srclang,
+                    label: subtitle.label,
+                    default: subtitle.default
+                  },
+                  `${activeSource.src}-${subtitle.srclang}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `pointer-events-none absolute inset-0 z-10 grid place-items-center transition ${isPlaying ? "opacity-0" : "opacity-100"}`,
+                children: /* @__PURE__ */ jsx("span", { className: "grid size-20 place-items-center rounded-full bg-white/15 text-white backdrop-blur-xl ring-1 ring-white/20", children: /* @__PURE__ */ jsx(PlayIcon, { className: "ml-1 size-9" }) })
+              }
+            ),
+            isLoading && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-20 grid place-items-center bg-black/10", children: /* @__PURE__ */ jsx("div", { className: "size-9 animate-spin rounded-full border-2 border-white/25 border-t-white" }) }),
+            error && /* @__PURE__ */ jsx("div", { className: "absolute inset-x-8 top-1/2 z-40 -translate-y-1/2 rounded-2xl border border-white/10 bg-black/75 p-5 text-center text-sm text-white shadow-2xl backdrop-blur-xl", children: error }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: chromeRef,
+                onClick: togglePlay,
+                className: `absolute inset-0 z-30 flex flex-col justify-between bg-gradient-to-b from-black/55 via-black/10 to-black/75 ${controlsVisible ? "" : "pointer-events-none"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("header", { onClick: (e) => e.stopPropagation(), className: "flex items-start justify-between gap-4 px-7 pt-7 text-white md:px-9 md:pt-8", children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      title && /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-wide md:text-xl", children: title }),
+                      description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm font-medium text-white/85", children: description })
+                    ] }),
+                    parsed.sources.length > 1 && /* @__PURE__ */ jsx(
+                      "select",
+                      {
+                        value: String(sourceIndex),
+                        onChange: (e) => setSourceIndex(Number(e.target.value)),
+                        "aria-label": "Video source",
+                        className: "h-8 rounded-full border border-white/15 bg-white/10 px-3 text-xs font-semibold text-white outline-none backdrop-blur-md transition hover:bg-white/15",
+                        children: parsed.sources.map((source, index) => /* @__PURE__ */ jsx("option", { value: String(index), className: "text-black", children: source.label ?? source.type ?? `Source ${index + 1}` }, `${source.src}-${index}`))
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "px-7 pb-7 text-white md:px-9 md:pb-8", children: [
+                    /* @__PURE__ */ jsxs(
+                      "div",
+                      {
+                        ref: progressRef,
+                        onPointerMove: handleProgressPointerMove,
+                        onPointerLeave: handleProgressPointerLeave,
+                        onPointerDown: handleProgressPointerDown,
+                        className: "relative mb-6 h-5 cursor-pointer",
+                        children: [
+                          preview && /* @__PURE__ */ jsxs(
+                            "div",
+                            {
+                              className: "pointer-events-none absolute bottom-8 z-20 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur",
+                              style: { left: preview.left },
+                              children: [
+                                /* @__PURE__ */ jsx(
+                                  "div",
+                                  {
+                                    className: "overflow-hidden rounded-md bg-neutral-900",
+                                    style: {
+                                      width: preview.cue.w ?? 160,
+                                      height: preview.cue.h ?? 90,
+                                      backgroundImage: `url(${preview.cue.image})`,
+                                      backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x}px -${preview.cue.y}px` : "center",
+                                      backgroundSize: preview.cue.x != null ? "auto" : "cover",
+                                      backgroundRepeat: "no-repeat"
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 h-[5px] -translate-y-1/2 overflow-hidden rounded-full bg-white/22", children: [
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "absolute inset-y-0 left-0 bg-white/30",
+                                style: { width: `${bufferedPercent}%` }
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: "absolute inset-y-0 left-0 bg-white/85",
+                                style: { width: `${progressPercent}%` }
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-5", children: [
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-5", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: togglePlay,
+                            className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
+                            "aria-label": isPlaying ? "Pause" : "Play",
+                            children: isPlaying ? /* @__PURE__ */ jsx(PauseIcon, { className: "size-7" }) : /* @__PURE__ */ jsx(PlayIcon, { className: "size-7" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => seekRelative(10),
+                            className: "hidden size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80 sm:grid",
+                            "aria-label": "Forward 10 seconds",
+                            children: /* @__PURE__ */ jsx(ForwardIcon, { className: "size-7" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsxs("div", { className: "hidden items-center gap-2 text-sm font-semibold text-white/75 sm:flex", children: [
+                          /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
+                          /* @__PURE__ */ jsx("span", { className: "text-white/35", children: "/" }),
+                          /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: () => setIsMuted((value) => !value),
+                            className: "grid size-8 place-items-center text-white transition hover:scale-105 hover:text-white/80",
+                            "aria-label": isMuted ? "Unmute" : "Mute",
+                            children: isMuted || volume === 0 ? /* @__PURE__ */ jsx(MutedIcon, { className: "size-6" }) : /* @__PURE__ */ jsx(VolumeIcon, { className: "size-6" })
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "input",
+                          {
+                            type: "range",
+                            min: "0",
+                            max: "1",
+                            step: "0.01",
+                            value: isMuted ? 0 : volume,
+                            onChange: (event) => {
+                              const nextVolume = Number(event.target.value);
+                              setVolume(nextVolume);
+                              setIsMuted(nextVolume === 0);
+                            },
+                            className: "hidden h-1 w-20 accent-white md:block",
+                            "aria-label": "Audio level"
+                          }
+                        ),
+                        /* @__PURE__ */ jsx("div", { className: "mx-1 hidden h-4 w-px bg-white/20 md:block" }),
+                        audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setOpenMenu(openMenu === "audio" ? null : "audio"),
+                              className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${openMenu === "audio" ? "text-white" : "text-white/60"}`,
+                              "aria-label": "Audio track",
+                              children: /* @__PURE__ */ jsx(AudioIcon, { className: "size-5" })
+                            }
+                          ),
+                          openMenu === "audio" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: audioTracks.map((track) => /* @__PURE__ */ jsx(
+                            PopoverItem,
+                            {
+                              active: selectedAudio === track.id,
+                              onClick: () => changeAudio(track.id),
+                              children: track.label
+                            },
+                            track.id
+                          )) })
+                        ] }),
+                        parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                          /* @__PURE__ */ jsx(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setOpenMenu(openMenu === "captions" ? null : "captions"),
+                              className: `grid size-8 place-items-center rounded transition hover:text-white/80 ${subtitleMode !== "off" || openMenu === "captions" ? "text-white" : "text-white/60"}`,
+                              "aria-label": "Captions",
+                              children: /* @__PURE__ */ jsx(CaptionsIcon, { className: "size-5" })
+                            }
+                          ),
+                          openMenu === "captions" && /* @__PURE__ */ jsxs(PopoverMenu, { onClose: () => setOpenMenu(null), children: [
+                            /* @__PURE__ */ jsx(
+                              PopoverItem,
+                              {
+                                active: subtitleMode === "off",
+                                onClick: () => {
+                                  setSubtitleMode("off");
+                                  setOpenMenu(null);
+                                },
+                                children: "Off"
+                              }
+                            ),
+                            parsed.subtitles.map((subtitle) => /* @__PURE__ */ jsx(
+                              PopoverItem,
+                              {
+                                active: subtitleMode === subtitle.srclang,
+                                onClick: () => {
+                                  setSubtitleMode(subtitle.srclang);
+                                  setOpenMenu(null);
+                                },
+                                children: subtitle.label
+                              },
+                              subtitle.srclang
+                            ))
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+                          /* @__PURE__ */ jsxs(
+                            "button",
+                            {
+                              type: "button",
+                              onClick: () => setOpenMenu(openMenu === "quality" ? null : "quality"),
+                              className: `flex h-8 items-center gap-1 rounded px-2 text-xs font-semibold transition hover:text-white/80 ${openMenu === "quality" ? "text-white" : "text-white/60"}`,
+                              "aria-label": "Quality",
+                              children: [
+                                /* @__PURE__ */ jsx(QualityIcon, { className: "size-4" }),
+                                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" })
+                              ]
+                            }
+                          ),
+                          openMenu === "quality" && /* @__PURE__ */ jsx(PopoverMenu, { onClose: () => setOpenMenu(null), children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
+                            PopoverItem,
+                            {
+                              active: selectedQuality === quality.id,
+                              onClick: () => changeQuality(quality.id),
+                              children: [
+                                quality.label,
+                                quality.id === "auto" && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[10px] text-white/40", children: "ABR" })
+                              ]
+                            },
+                            quality.id
+                          )) })
+                        ] }),
+                        /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: toggleFullscreen,
+                            className: "grid size-8 place-items-center text-white/60 transition hover:scale-105 hover:text-white/80",
+                            "aria-label": isFullscreen ? "Exit fullscreen" : "Fullscreen",
+                            children: /* @__PURE__ */ jsx(FullscreenIcon, { className: "size-7" })
+                          }
+                        )
+                      ] })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+var VideoPlayer = Video;
+function PopoverMenu({ children, onClose }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: onClose }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-full right-0 z-50 mb-2 min-w-[120px] overflow-hidden rounded-xl border border-white/10 bg-black/85 py-1 shadow-2xl backdrop-blur-xl", children })
+  ] });
+}
+function PopoverItem({
+  children,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: `flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-medium transition hover:bg-white/10 ${active ? "text-white" : "text-white/55"}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: `size-1.5 rounded-full ${active ? "bg-white" : "bg-transparent"}` }),
+        children
+      ]
+    }
+  );
+}
+function parseVideoChildren(children) {
+  const parsed = {
+    sources: [],
+    subtitles: []
+  };
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === Sources) {
+      const element = child;
+      React.Children.forEach(element.props.children, (sourceChild) => {
+        if (!React.isValidElement(sourceChild)) return;
+        if (sourceChild.type !== Source) return;
+        const sourceElement = sourceChild;
+        parsed.sources.push(sourceElement.props);
+      });
+    }
+    if (child.type === Subtitles) {
+      const element = child;
+      React.Children.forEach(element.props.children, (subtitleChild) => {
+        if (!React.isValidElement(subtitleChild)) return;
+        if (subtitleChild.type !== Subtitle) return;
+        const subtitleElement = subtitleChild;
+        parsed.subtitles.push(subtitleElement.props);
+      });
+    }
+    if (child.type === Storyboard) {
+      const element = child;
+      const frames = [];
+      React.Children.forEach(element.props.children, (frameChild) => {
+        if (!React.isValidElement(frameChild)) return;
+        if (frameChild.type !== StoryboardFrame) return;
+        const frameElement = frameChild;
+        frames.push(frameElement.props);
+      });
+      parsed.storyboard = {
+        ...element.props.src !== void 0 && { src: element.props.src },
+        ...element.props.fallbackImage !== void 0 && { fallbackImage: element.props.fallbackImage },
+        ...element.props.width !== void 0 && { width: element.props.width },
+        ...element.props.height !== void 0 && { height: element.props.height },
+        frames
+      };
+    }
+  });
+  return parsed;
+}
+function inferSourceType(source) {
+  if (source.type) return source.type;
+  const src = source.src.toLowerCase();
+  if (src.includes(".mpd") || src.includes("/dash")) return "dash";
+  if (src.includes(".m3u8") || src.includes("/hls")) return "hls";
+  return "file";
+}
+function findStoryboardCue(cues, time) {
+  return cues.find((cue) => time >= cue.start && time <= cue.end) ?? null;
+}
+function parseStoryboardVtt(text, baseUrl) {
+  const lines = text.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
+  const cues = [];
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index];
+    if (!line || !line.includes("-->")) continue;
+    const parts = line.split(/\s+-->\s+/);
+    const startRaw = parts[0];
+    const endRaw = parts[1];
+    const imageLine = lines[index + 1];
+    if (!startRaw || !endRaw || !imageLine) continue;
+    const image = parseStoryboardImageLine(imageLine, baseUrl);
+    cues.push({
+      start: parseVttTimestamp(startRaw),
+      end: parseVttTimestamp(endRaw),
+      ...image
+    });
+  }
+  return cues;
+}
+function parseStoryboardImageLine(line, baseUrl) {
+  const splitIndex = line.indexOf("#xywh=");
+  const imageRaw = splitIndex >= 0 ? line.slice(0, splitIndex) : line;
+  const xywhRaw = splitIndex >= 0 ? line.slice(splitIndex + 6) : null;
+  const image = new URL(imageRaw, baseUrl).href;
+  if (!xywhRaw) {
+    return { image };
+  }
+  const [x, y, w, h] = xywhRaw.split(",").map(Number);
+  return {
+    image,
+    ...x !== void 0 && !isNaN(x) && { x },
+    ...y !== void 0 && !isNaN(y) && { y },
+    ...w !== void 0 && !isNaN(w) && { w },
+    ...h !== void 0 && !isNaN(h) && { h }
+  };
+}
+function parseVttTimestamp(value) {
+  const normalized = value.replace(",", ".");
+  const parts = normalized.split(":").map(Number);
+  if (parts.length === 3) {
+    return (parts[0] ?? 0) * 3600 + (parts[1] ?? 0) * 60 + (parts[2] ?? 0);
+  }
+  if (parts.length === 2) {
+    return (parts[0] ?? 0) * 60 + (parts[1] ?? 0);
+  }
+  return Number(normalized) || 0;
+}
+function formatTime(seconds) {
+  if (!Number.isFinite(seconds)) return "00:00";
+  const safeSeconds = Math.max(0, Math.floor(seconds));
+  const hours = Math.floor(safeSeconds / 3600);
+  const minutes = Math.floor(safeSeconds % 3600 / 60);
+  const secs = safeSeconds % 60;
+  if (hours > 0) {
+    return `${hours}:${String(minutes).padStart(2, "0")}:${String(secs).padStart(
+      2,
+      "0"
+    )}`;
+  }
+  return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+function PlayIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M8 5.14v13.72c0 .76.84 1.22 1.48.8l10.2-6.86a.96.96 0 0 0 0-1.6L9.48 4.34A.96.96 0 0 0 8 5.14Z" }) });
+}
+function PauseIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M7 5.5A1.5 1.5 0 0 1 8.5 4h1A1.5 1.5 0 0 1 11 5.5v13A1.5 1.5 0 0 1 9.5 20h-1A1.5 1.5 0 0 1 7 18.5v-13Zm6 0A1.5 1.5 0 0 1 14.5 4h1A1.5 1.5 0 0 1 17 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-13Z" }) });
+}
+function ForwardIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M5 5.14v13.72c0 .76.84 1.22 1.48.8l8.7-5.86a.96.96 0 0 0 0-1.6L6.48 4.34A.96.96 0 0 0 5 5.14Zm12.5-.64A1.5 1.5 0 0 0 16 6v12a1.5 1.5 0 0 0 3 0V6a1.5 1.5 0 0 0-1.5-1.5Z" }) });
+}
+function VolumeIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M4 9.5A2.5 2.5 0 0 1 6.5 7H9l5-4v18l-5-4H6.5A2.5 2.5 0 0 1 4 14.5v-5Zm12.5-2.15a1 1 0 0 1 1.4.2 7.5 7.5 0 0 1 0 8.9 1 1 0 1 1-1.6-1.2 5.5 5.5 0 0 0 0-6.5 1 1 0 0 1 .2-1.4Zm3-2.25a1 1 0 0 1 1.4.2 11.25 11.25 0 0 1 0 13.4 1 1 0 1 1-1.6-1.2 9.25 9.25 0 0 0 0-11.2 1 1 0 0 1 .2-1.2Z" }) });
+}
+function MutedIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M4 9.5A2.5 2.5 0 0 1 6.5 7H9l5-4v18l-5-4H6.5A2.5 2.5 0 0 1 4 14.5v-5Zm13.7.1a1 1 0 0 1 1.4 0l1.4 1.4 1.4-1.4a1 1 0 1 1 1.4 1.4L21.9 12l1.4 1.4a1 1 0 0 1-1.4 1.4l-1.4-1.4-1.4 1.4a1 1 0 1 1-1.4-1.4L19.1 12l-1.4-1.4a1 1 0 0 1 0-1Z" }) });
+}
+function FullscreenIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", className, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M8.5 4H5.75A1.75 1.75 0 0 0 4 5.75V8.5M15.5 4h2.75A1.75 1.75 0 0 1 20 5.75V8.5M20 15.5v2.75A1.75 1.75 0 0 1 18.25 20H15.5M8.5 20H5.75A1.75 1.75 0 0 1 4 18.25V15.5",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round"
+    }
+  ) });
+}
+function CaptionsIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 12h4M6 15h8M14 12h4", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" })
+  ] });
+}
+function AudioIcon({ className }) {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", className, children: /* @__PURE__ */ jsx("path", { d: "M12 3a1 1 0 0 0-1.707-.707l-4 4H4a2 2 0 0 0-2 2v3.414a2 2 0 0 0 2 2h2.293l4 4A1 1 0 0 0 12 17V3ZM17.5 8.5a1 1 0 0 1 1.414 0 6 6 0 0 1 0 8.486 1 1 0 1 1-1.414-1.414 4 4 0 0 0 0-5.657 1 1 0 0 1 0-1.415ZM15.086 10.914a1 1 0 0 1 1.414 0 3 3 0 0 1 0 4.243 1 1 0 0 1-1.414-1.414 1 1 0 0 0 0-1.415 1 1 0 0 1 0-1.414Z" }) });
+}
+function QualityIcon({ className }) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", className, children: [
+    /* @__PURE__ */ jsx("rect", { x: "2", y: "7", width: "20", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "1.75" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4h8", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M9 13.5v-3l1.5 1.5L12 10v3.5M14 10.5h2.5M14 12.5h2", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+
+export { DropZone, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
+//# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map