sanity-plugin-mux-input 2.2.3 → 2.3.0

package/lib/index.esm.js

@@ -0,0 +1,4384 @@
+import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { ErrorOutlineIcon, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon, AddIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
+import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutside, Popover, MenuDivider, Radio, Autocomplete, rem } from "@sanity/ui";
+import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, createElement, forwardRef, Suspense } from "react";
+import { words, trim, toLower, uniq, compact, isString, isNumber } from "lodash";
+import styled, { css } from "styled-components";
+import { uuid } from "@sanity/uuid";
+import { defer, timer, of, Observable, concat, throwError, from, Subject } from "rxjs";
+import { expand, concatMap, tap, switchMap, mergeMap, catchError, mergeMapTo, takeUntil } from "rxjs/operators";
+import { suspend, clear, preload } from "suspend-react";
+import MuxPlayer from "@mux/mux-player-react";
+import { usePaneRouter } from "sanity/desk";
+import { IntentLink } from "sanity/router";
+import { useMemoObservable } from "react-rx";
+import useSWR from "swr";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { useErrorBoundary } from "use-error-boundary";
+import { UpChunk } from "@mux/upchunk";
+import { isValidElementType } from "react-is";
+import LanguagesList from "iso-639-1";
+const ToolIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    stroke: "currentColor",
+    fill: "currentColor",
+    strokeWidth: "0",
+    viewBox: "0 0 24 24",
+    height: "1em",
+    width: "1em",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2zm0 14H3V5h18v12zm-5-6l-7 4V7z" })
+  }
+), SANITY_API_VERSION = "2024-03-05";
+function useClient() {
+  return useClient$1({ apiVersion: SANITY_API_VERSION });
+}
+const SPECIAL_CHARS = /([^!@#$%^&*(),\\/?";:{}|[\]+<>\s-])+/g, STRIP_EDGE_CHARS = /(^[.]+)|([.]+$)/;
+function tokenize(string) {
+  return (string.match(SPECIAL_CHARS) || []).map((token) => token.replace(STRIP_EDGE_CHARS, ""));
+}
+function toGroqParams(terms) {
+  const params = {};
+  return terms.reduce((acc, term, i) => (acc[`t${i}`] = `*${term}*`, acc), params);
+}
+function extractTermsFromQuery(query) {
+  const quotedQueries = [], unquotedQuery = query.replace(/("[^"]*")/g, (match) => words(match).length > 1 ? (quotedQueries.push(match), "") : match), quotedTerms = quotedQueries.map((str) => trim(toLower(str))), remainingTerms = uniq(compact(tokenize(toLower(unquotedQuery))));
+  return [...quotedTerms, ...remainingTerms];
+}
+function createConstraints(terms, includeAssetId) {
+  const searchPaths = includeAssetId ? ["filename", "assetId"] : ["filename"];
+  return terms.map((_term, i) => searchPaths.map((joinedPath) => `${joinedPath} match $t${i}`)).filter((constraint) => constraint.length > 0).map((constraint) => `(${constraint.join(" || ")})`);
+}
+function createSearchFilter(query) {
+  const terms = extractTermsFromQuery(query);
+  return {
+    filter: createConstraints(terms, query.length >= 8),
+    // if the search is big enough, include the assetId (mux id) in the results
+    params: {
+      ...toGroqParams(terms)
+    }
+  };
+}
+const ASSET_SORT_OPTIONS = {
+  createdDesc: { groq: "_createdAt desc", label: "Newest first" },
+  createdAsc: { groq: "_createdAt asc", label: "First created (oldest)" },
+  filenameAsc: { groq: "filename asc", label: "By filename (A-Z)" },
+  filenameDesc: { groq: "filename desc", label: "By filename (Z-A)" }
+}, useAssetDocuments = createHookFromObservableFactory(({ documentStore, sort, searchQuery }) => {
+  const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
+  return documentStore.listenQuery(
+    /* groq */
+    `*[${filter}] | order(${sortFragment})`,
+    search.params,
+    {
+      apiVersion: SANITY_API_VERSION
+    }
+  );
+});
+function useAssets() {
+  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), [assetDocuments = [], isLoading] = useAssetDocuments({ documentStore, sort, searchQuery });
+  return {
+    assets: useMemo(
+      () => (
+        // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
+        collate(assetDocuments).map(
+          (collated) => ({
+            ...collated.draft || collated.published || {},
+            _id: collated.id
+          })
+        )
+      ),
+      [assetDocuments]
+    ),
+    isLoading,
+    sort,
+    searchQuery,
+    setSort,
+    setSearchQuery
+  };
+}
+function parseMuxDate(date) {
+  return new Date(Number(date) * 1e3);
+}
+const FIRST_PAGE = 1, ASSETS_PER_PAGE = 100;
+async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
+  try {
+    const json = await (await fetch(
+      `https://api.mux.com/video/v1/assets?limit=${ASSETS_PER_PAGE}&page=${pageNum}`,
+      {
+        headers: {
+          Authorization: `Basic ${btoa(`${token}:${secretKey}`)}`
+        }
+      }
+    )).json();
+    return json.error ? {
+      pageNum,
+      error: {
+        _tag: "MuxError",
+        error: json.error
+      }
+    } : {
+      pageNum,
+      data: json.data
+    };
+  } catch {
+    return {
+      pageNum,
+      error: { _tag: "FetchError" }
+    };
+  }
+}
+function accumulateIntermediateState(currentState, pageResult) {
+  const currentData = "data" in currentState && currentState.data || [];
+  return {
+    ...currentState,
+    data: [
+      ...currentData,
+      ...("data" in pageResult && pageResult.data || []).filter(
+        // De-duplicate assets for safety
+        (asset) => !currentData.some((a) => a.id === asset.id)
+      )
+    ],
+    error: "error" in pageResult ? pageResult.error : (
+      // Reset error if current page is successful
+      void 0
+    ),
+    pageNum: pageResult.pageNum,
+    loading: !0
+  };
+}
+function hasMorePages(pageResult) {
+  return typeof pageResult == "object" && "data" in pageResult && Array.isArray(pageResult.data) && pageResult.data.length > 0;
+}
+function useMuxAssets({ secrets, enabled }) {
+  const [state, setState] = useState({ loading: !0, pageNum: FIRST_PAGE });
+  return useEffect(() => {
+    if (!enabled)
+      return;
+    const subscription = defer(
+      () => fetchMuxAssetsPage(
+        secrets,
+        // When we've already successfully loaded before (fully or partially), we start from the following page to avoid re-fetching
+        "data" in state && state.data && state.data.length > 0 && !state.error ? state.pageNum + 1 : state.pageNum
+      )
+    ).pipe(
+      // Here we replace "concatMap" with "expand" to recursively fetch next pages
+      expand((pageResult) => hasMorePages(pageResult) ? timer(2e3).pipe(
+        // eslint-disable-next-line max-nested-callbacks
+        concatMap(() => defer(() => fetchMuxAssetsPage(secrets, pageResult.pageNum + 1)))
+      ) : of()),
+      // On each iteration, persist intermediate states to give feedback to users
+      tap(
+        (pageResult) => setState((prevState) => accumulateIntermediateState(prevState, pageResult))
+      )
+    ).subscribe({
+      // Once done, let the user know we've stopped loading
+      complete: () => {
+        setState((prev) => ({
+          ...prev,
+          loading: !1
+        }));
+      }
+    });
+    return () => subscription.unsubscribe();
+  }, [enabled]), state;
+}
+const name$1 = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumentId = "secrets.mux", DIALOGS_Z_INDEX = 6e4, THUMBNAIL_ASPECT_RATIO = 1.7777777777777777, MIN_ASPECT_RATIO = 5 / 4, path$1 = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"], useSecretsDocumentValues = () => {
+  const { error, isLoading, value } = useDocumentValues(
+    muxSecretsDocumentId,
+    path$1
+  ), cache = useMemo(() => {
+    const exists = !!value, secrets = {
+      token: (value == null ? void 0 : value.token) || null,
+      secretKey: (value == null ? void 0 : value.secretKey) || null,
+      enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || !1,
+      signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
+      signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
+    };
+    return {
+      isInitialSetup: !exists,
+      needsSetup: !(secrets != null && secrets.token) || !(secrets != null && secrets.secretKey),
+      secrets
+    };
+  }, [value]);
+  return { error, isLoading, value: cache };
+};
+function useImportMuxAssets() {
+  var _a;
+  const documentStore = useDocumentStore(), client = useClient$1({
+    apiVersion: SANITY_API_VERSION
+  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!((_a = secretDocumentValues.value.secrets) != null && _a.secretKey), [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
+    secrets: secretDocumentValues.value.secrets,
+    enabled: hasSecrets && dialogOpen
+  }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a) => !assetExistsInSanity(a, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
+    importState !== "importing" && setImportState("closed");
+  }, openDialog = () => {
+    importState === "closed" && setImportState("idle");
+  };
+  async function importAssets() {
+    setImportState("importing");
+    const documents = selectedAssets.map(muxAssetToSanityDocument), tx = client.transaction();
+    documents.forEach((doc) => tx.create(doc));
+    try {
+      await tx.commit({ returnDocuments: !1 }), setSelectedAssets([]), setImportState("done");
+    } catch (error) {
+      setImportState("error"), setImportError(error);
+    }
+  }
+  return {
+    assetsInSanityLoading,
+    closeDialog,
+    dialogOpen,
+    importState,
+    importError,
+    hasSecrets,
+    importAssets,
+    missingAssets,
+    muxAssets,
+    openDialog,
+    selectedAssets,
+    setSelectedAssets
+  };
+}
+function muxAssetToSanityDocument(asset) {
+  var _a;
+  return {
+    _id: uuid(),
+    _type: "mux.videoAsset",
+    _updatedAt: (/* @__PURE__ */ new Date()).toISOString(),
+    _createdAt: parseMuxDate(asset.created_at).toISOString(),
+    assetId: asset.id,
+    playbackId: (_a = asset.playback_ids.find((p) => p.id)) == null ? void 0 : _a.id,
+    filename: `Asset #${truncateString(asset.id, 15)}`,
+    status: asset.status,
+    data: asset
+  };
+}
+const useAssetsInSanity = createHookFromObservableFactory(
+  (documentStore) => documentStore.listenQuery(
+    /* groq */
+    `*[_type == "mux.videoAsset"] {
+      "uploadId": coalesce(uploadId, data.upload_id),
+      "assetId": coalesce(assetId, data.id),
+    }`,
+    {},
+    {
+      apiVersion: SANITY_API_VERSION
+    }
+  )
+);
+function assetExistsInSanity(asset, existingAssets) {
+  return asset.status !== "ready" ? !1 : existingAssets.some(
+    (existing) => existing.assetId === asset.id || existing.uploadId === asset.upload_id
+  );
+}
+function useInView(options = {}) {
+  const [inView, setInView] = useState(!1), ref = useRef(null);
+  return useEffect(() => {
+    if (!ref.current)
+      return;
+    const observer = new IntersectionObserver(([entry], obs) => {
+      var _a;
+      const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
+      setInView(nowInView), (_a = options == null ? void 0 : options.onChange) == null || _a.call(options, nowInView);
+    }, options), toObserve = ref.current;
+    return observer.observe(toObserve), () => {
+      toObserve && observer.unobserve(toObserve);
+    };
+  }, [options]), { inView, ref };
+}
+const _id = "secrets.mux";
+function readSecrets(client) {
+  const { projectId, dataset } = client.config();
+  return suspend(async () => {
+    const data = await client.fetch(
+      /* groq */
+      `*[_id == $_id][0]{
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      }`,
+      { _id }
+    );
+    return {
+      token: (data == null ? void 0 : data.token) || null,
+      secretKey: (data == null ? void 0 : data.secretKey) || null,
+      enableSignedUrls: !!(data != null && data.enableSignedUrls) || !1,
+      signingKeyId: (data == null ? void 0 : data.signingKeyId) || null,
+      signingKeyPrivate: (data == null ? void 0 : data.signingKeyPrivate) || null
+    };
+  }, [cacheNs, _id, projectId, dataset]);
+}
+function generateJwt(client, playbackId, aud, payload) {
+  const { signingKeyId, signingKeyPrivate } = readSecrets(client);
+  if (!signingKeyId)
+    throw new TypeError("Missing signingKeyId");
+  if (!signingKeyPrivate)
+    throw new TypeError("Missing signingKeyPrivate");
+  const { default: sign } = suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
+  return sign(
+    payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {},
+    atob(signingKeyPrivate),
+    {
+      algorithm: "RS256",
+      keyid: signingKeyId,
+      audience: aud,
+      subject: playbackId,
+      noTimestamp: !0,
+      expiresIn: "12h"
+    }
+  );
+}
+function getPlaybackId(asset) {
+  if (!(asset != null && asset.playbackId))
+    throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
+  return asset.playbackId;
+}
+function getPlaybackPolicy(asset) {
+  var _a, _b, _c, _d;
+  return (_d = (_c = (_b = (_a = asset.data) == null ? void 0 : _a.playback_ids) == null ? void 0 : _b[0]) == null ? void 0 : _c.policy) != null ? _d : "public";
+}
+function getAnimatedPosterSrc({
+  asset,
+  client,
+  height,
+  width,
+  start = asset.thumbTime ? Math.max(0, asset.thumbTime - 2.5) : 0,
+  end = start + 5,
+  fps = 15
+}) {
+  const params = { height, width, start, end, fps }, playbackId = getPlaybackId(asset);
+  let searchParams = new URLSearchParams(
+    JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0))
+  );
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, "g", params);
+    searchParams = new URLSearchParams({ token });
+  }
+  return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
+}
+const Image = styled.img`
+  transition: opacity 0.175s ease-out 0s;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center center;
+`, STATUS_TO_TONE = {
+  loading: "transparent",
+  error: "critical",
+  loaded: "default"
+};
+function VideoThumbnail({
+  asset,
+  width
+}) {
+  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), animatedSrc = useMemo(() => {
+    try {
+      return getAnimatedPosterSrc({ asset, client, width: posterWidth });
+    } catch {
+      status !== "error" && setStatus("error");
+      return;
+    }
+  }, [asset, client, width, status, setStatus]);
+  function handleLoad() {
+    setStatus("loaded");
+  }
+  function handleError() {
+    setStatus("error");
+  }
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      style: {
+        aspectRatio: THUMBNAIL_ASPECT_RATIO,
+        position: "relative",
+        maxWidth: width ? `${width}px` : void 0,
+        width: "100%",
+        flex: 1
+      },
+      border: !0,
+      radius: 2,
+      ref,
+      tone: STATUS_TO_TONE[status],
+      children: inView ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        status === "loading" && /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)"
+            },
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        ),
+        status === "error" && /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            space: 4,
+            style: {
+              position: "absolute",
+              width: "100%",
+              left: 0,
+              top: "50%",
+              transform: "translateY(-50%)",
+              justifyItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Text, { size: 4, muted: !0, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { fontSize: "1.75em" } }) }),
+              /* @__PURE__ */ jsx(Text, { muted: !0, align: "center", children: "Failed loading thumbnail" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: animatedSrc,
+            alt: `Preview for video ${asset.filename || asset.assetId}`,
+            onLoad: handleLoad,
+            onError: handleError,
+            style: {
+              opacity: status === "loaded" ? 1 : 0
+            }
+          }
+        )
+      ] }) : null
+    }
+  );
+}
+const MissingAssetCheckbox = styled(Checkbox)`
+  position: static !important;
+
+  input::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    display: block;
+    cursor: pointer;
+    z-index: 1000;
+  }
+`;
+function MissingAsset({
+  asset,
+  selectAsset,
+  selected
+}) {
+  var _a;
+  const duration = useFormattedDuration(asset.duration * 1e3);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      tone: selected ? "positive" : void 0,
+      border: !0,
+      paddingX: 2,
+      paddingY: 3,
+      style: { position: "relative" },
+      radius: 1,
+      children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          MissingAssetCheckbox,
+          {
+            checked: selected,
+            onChange: (e) => {
+              selectAsset(e.currentTarget.checked);
+            },
+            "aria-label": selected ? `Import video ${asset.id}` : `Skip import of video ${asset.id}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          VideoThumbnail,
+          {
+            asset: {
+              assetId: asset.id,
+              data: asset,
+              filename: asset.id,
+              playbackId: (_a = asset.playback_ids.find((p) => p.id)) == null ? void 0 : _a.id
+            },
+            width: 150
+          }
+        ),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 1, children: [
+            /* @__PURE__ */ jsx(Code, { size: 2, children: truncateString(asset.id, 15) }),
+            " ",
+            /* @__PURE__ */ jsxs(Text, { muted: !0, size: 2, children: [
+              "(",
+              duration.formatted,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "Uploaded at",
+            " ",
+            new Date(Number(asset.created_at) * 1e3).toLocaleDateString("en", {
+              year: "numeric",
+              day: "2-digit",
+              month: "2-digit"
+            })
+          ] })
+        ] })
+      ] })
+    },
+    asset.id
+  );
+}
+function ImportVideosDialog(props) {
+  var _a, _b;
+  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = ((_a = props.missingAssets) == null ? void 0 : _a.length) === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: "Import videos from Mux",
+      zOffset: DIALOGS_Z_INDEX,
+      id: "video-details-dialog",
+      onClose: props.closeDialog,
+      onClickOutside: props.closeDialog,
+      width: 1,
+      position: "fixed",
+      footer: importState !== "done" && !noAssetsToImport && /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            fontSize: 2,
+            padding: 3,
+            mode: "bleed",
+            text: "Cancel",
+            tone: "critical",
+            onClick: props.closeDialog,
+            disabled: isImporting
+          }
+        ),
+        props.missingAssets && /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: RetrieveIcon,
+            fontSize: 2,
+            padding: 3,
+            mode: "ghost",
+            text: ((_b = props.selectedAssets) == null ? void 0 : _b.length) > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
+            tone: "positive",
+            onClick: props.importAssets,
+            iconRight: isImporting && Spinner,
+            disabled: !canTriggerImport
+          }
+        )
+      ] }) }),
+      children: /* @__PURE__ */ jsxs(Box, { padding: 3, children: [
+        (props.muxAssets.loading || props.assetsInSanityLoading) && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "Loading assets from Mux" }),
+            /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+              "This may take a while.",
+              props.missingAssets && props.missingAssets.length > 0 && ` There are at least ${props.missingAssets.length} video${props.missingAssets.length > 1 ? "s" : ""} currently not in Sanity...`
+            ] })
+          ] })
+        ] }) }),
+        props.muxAssets.error && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error getting all data from Mux" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: props.missingAssets ? `But we've found ${props.missingAssets.length} video${props.missingAssets.length > 1 ? "s" : ""} not in Sanity, which you can start importing now.` : "Please try again or contact a developer for help." })
+          ] })
+        ] }) }),
+        importState === "importing" && /* @__PURE__ */ jsx(Card, { tone: "primary", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 4, children: [
+          /* @__PURE__ */ jsx(Spinner, { muted: !0, size: 4 }),
+          /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsxs(Text, { size: 2, weight: "semibold", children: [
+            "Importing ",
+            props.selectedAssets.length,
+            " video",
+            props.selectedAssets.length > 1 && "s",
+            " from Mux"
+          ] }) })
+        ] }) }),
+        importState === "error" && /* @__PURE__ */ jsx(Card, { tone: "critical", marginBottom: 5, padding: 3, border: !0, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }),
+          /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(Text, { size: 2, weight: "semibold", children: "There was an error importing videos" }),
+            /* @__PURE__ */ jsx(Text, { size: 1, children: props.importError ? `Error: ${props.importError}` : "Please try again or contact a developer for help." }),
+            /* @__PURE__ */ jsx(Box, { marginTop: 1, children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: RetryIcon,
+                text: "Retry",
+                tone: "primary",
+                onClick: props.importAssets
+              }
+            ) })
+          ] })
+        ] }) }),
+        (noAssetsToImport || importState === "done") && /* @__PURE__ */ jsxs(Stack, { paddingY: 5, marginBottom: 4, space: 3, style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
+          /* @__PURE__ */ jsx(Heading, { size: 2, children: importState === "done" ? "Videos imported successfully" : "There are no Mux videos to import" }),
+          /* @__PURE__ */ jsx(Text, { size: 2, children: importState === "done" ? "You can now use them in your Sanity content." : "They're all in Sanity and ready to be used in your content." })
+        ] }),
+        props.missingAssets && props.missingAssets.length > 0 && (importState === "idle" || importState === "error") && /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxs(Heading, { size: 1, children: [
+            "There are ",
+            props.missingAssets.length,
+            props.muxAssets.loading && "+",
+            " Mux video",
+            props.missingAssets.length > 1 && "s",
+            " ",
+            "not in Sanity"
+          ] }),
+          !props.muxAssets.loading && /* @__PURE__ */ jsxs(Flex, { align: "center", paddingX: 2, children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: "import-all",
+                style: { display: "block" },
+                onClick: (e) => {
+                  e.currentTarget.checked ? props.missingAssets && props.setSelectedAssets(props.missingAssets) : props.setSelectedAssets([]);
+                },
+                checked: props.selectedAssets.length === props.missingAssets.length
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, as: "label", htmlFor: "import-all", children: /* @__PURE__ */ jsx(Text, { children: "Import all" }) })
+          ] }),
+          props.missingAssets.map((asset) => /* @__PURE__ */ jsx(
+            MissingAsset,
+            {
+              asset,
+              selectAsset: (selected) => {
+                selected ? props.setSelectedAssets([...props.selectedAssets, asset]) : props.setSelectedAssets(props.selectedAssets.filter((a) => a.id !== asset.id));
+              },
+              selected: props.selectedAssets.some((a) => a.id === asset.id)
+            },
+            asset.id
+          ))
+        ] })
+      ] })
+    }
+  );
+}
+function ImportVideosFromMux() {
+  const importAssets = useImportMuxAssets();
+  if (importAssets.hasSecrets)
+    return importAssets.dialogOpen ? /* @__PURE__ */ jsx(ImportVideosDialog, { ...importAssets }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
+}
+const CONTEXT_MENU_POPOVER_PROPS = {
+  constrainSize: !0,
+  placement: "bottom",
+  portal: !0,
+  width: 0
+};
+function SelectSortOptions(props) {
+  const id = useId();
+  return /* @__PURE__ */ jsx(
+    MenuButton,
+    {
+      button: /* @__PURE__ */ jsx(Button, { text: "Sort", icon: SortIcon, mode: "bleed", padding: 3, style: { cursor: "pointer" } }),
+      id,
+      menu: /* @__PURE__ */ jsx(Menu, { children: Object.entries(ASSET_SORT_OPTIONS).map(([type2, { label }]) => /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          "data-as": "button",
+          onClick: () => props.setSort(type2),
+          padding: 3,
+          tone: "default",
+          text: label,
+          pressed: type2 === props.sort
+        },
+        type2
+      )) }),
+      popover: CONTEXT_MENU_POPOVER_PROPS
+    }
+  );
+}
+const SpinnerBox = () => /* @__PURE__ */ jsx(
+  Box,
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      minHeight: "150px"
+    },
+    children: /* @__PURE__ */ jsx(Spinner, {})
+  }
+);
+function FormField(props) {
+  const { children, title, description: description2, inputId } = props;
+  return /* @__PURE__ */ jsxs(Stack, { space: 1, children: [
+    /* @__PURE__ */ jsx(Flex, { align: "flex-end", children: /* @__PURE__ */ jsx(Box, { flex: 1, paddingY: 2, children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+      /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, weight: "semibold", size: 1, children: title || /* @__PURE__ */ jsx("em", { children: "Untitled" }) }),
+      description2 && /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: description2 })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+var FormField$1 = memo(FormField);
+const IconInfo = (props) => {
+  const Icon = props.icon;
+  return /* @__PURE__ */ jsxs(Flex, { gap: 2, align: "center", padding: 1, children: [
+    /* @__PURE__ */ jsx(Text, { size: (props.size || 1) + 1, muted: !0, children: /* @__PURE__ */ jsx(Icon, {}) }),
+    /* @__PURE__ */ jsx(Text, { size: props.size || 1, muted: props.muted, children: props.text })
+  ] });
+};
+function ResolutionIcon(props) {
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
+    }
+  ) });
+}
+function StopWatchIcon(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "1em",
+      height: "1em",
+      viewBox: "0 0 512 512",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M407.67 170.271l30.786-30.786-33.942-33.941-30.785 30.786C341.217 111.057 300.369 96 256 96 149.961 96 64 181.961 64 288s85.961 192 192 192 192-85.961 192-192c0-44.369-15.057-85.217-40.33-117.729zm-45.604 223.795C333.734 422.398 296.066 438 256 438s-77.735-15.602-106.066-43.934C121.602 365.735 106 328.066 106 288s15.602-77.735 43.934-106.066C178.265 153.602 215.934 138 256 138s77.734 15.602 106.066 43.934C390.398 210.265 406 247.934 406 288s-15.602 77.735-43.934 106.066z",
+            fill: "currentColor"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function getVideoSrc({ asset, client }) {
+  const playbackId = getPlaybackId(asset), searchParams = new URLSearchParams();
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, "v");
+    searchParams.set("token", token);
+  }
+  return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+}
+var name = "sanity-plugin-mux-input", version = "2.3.0", description = "An input component that integrates Sanity Studio with Mux video encoding/hosting service.", keywords = [
+  "sanity",
+  "video",
+  "mux",
+  "input",
+  "plugin",
+  "sanity-plugin",
+  "media"
+], homepage = "https://github.com/sanity-io/sanity-plugin-mux-input#readme", bugs = {
+  url: "https://github.com/sanity-io/sanity-plugin-mux-input/issues"
+}, repository = {
+  type: "git",
+  url: "git@github.com:sanity-io/sanity-plugin-mux-input.git"
+}, license = "MIT", author = "Sanity.io <hello@sanity.io>", sideEffects = !1, type = "module", exports = {
+  ".": {
+    source: "./src/_exports/index.ts",
+    import: "./lib/index.js",
+    require: "./lib/index.cjs",
+    default: "./lib/index.js"
+  },
+  "./package.json": "./package.json"
+}, main = "./lib/index.cjs", module = "./lib/index.esm.js", source = "./src/_exports/index.ts", types = "./lib/index.d.ts", files = [
+  "src",
+  "lib",
+  "sanity.json",
+  "v2-incompatible.js"
+], scripts = {
+  build: "run-s clean && pkg-utils build --strict && pkg-utils --strict",
+  clean: "rimraf lib",
+  dev: "plugin-kit link-watch",
+  format: "prettier --write --cache --ignore-unknown .",
+  "link-watch": "plugin-kit link-watch",
+  lint: "eslint .",
+  prepare: "husky install || true",
+  prepublishOnly: "run-s build",
+  test: "npm run lint && npm run type-check && npm run build",
+  "type-check": "tsc --noEmit",
+  watch: "pkg-utils watch --strict"
+}, dependencies = {
+  "@mux/mux-player-react": "^2.3.3",
+  "@mux/upchunk": "^3.3.2",
+  "@sanity/icons": "^2.10.2",
+  "@sanity/incompatible-plugin": "^1.0.4",
+  "@sanity/ui": "^2.0.3",
+  "@sanity/uuid": "^3.0.2",
+  "iso-639-1": "^3.1.2",
+  "jsonwebtoken-esm": "^1.0.5",
+  lodash: "^4.17.21",
+  "react-rx": "^2.1.3",
+  rxjs: "^7.8.1",
+  "scroll-into-view-if-needed": "^3.1.0",
+  "suspend-react": "^0.1.3",
+  swr: "^2.2.5",
+  "type-fest": "^4.10.2",
+  "use-error-boundary": "^2.0.6"
+}, devDependencies = {
+  "@commitlint/cli": "^18.6.1",
+  "@commitlint/config-conventional": "^18.6.2",
+  "@sanity/client": "^6.14.0",
+  "@sanity/pkg-utils": "^5.1.12",
+  "@sanity/plugin-kit": "^3.1.10",
+  "@sanity/semantic-release-preset": "^4.1.7",
+  "@sanity/vision": "^3.30.0",
+  "@types/lodash": "^4.14.202",
+  "@types/react": "^18.2.57",
+  "@types/react-is": "^18.2.4",
+  "@typescript-eslint/eslint-plugin": "^7.5.0",
+  "@typescript-eslint/parser": "^7.5.0",
+  "cz-conventional-changelog": "^3.3.0",
+  eslint: "^8.56.0",
+  "eslint-config-prettier": "^9.1.0",
+  "eslint-config-sanity": "^7.1.2",
+  "eslint-plugin-import": "^2.29.1",
+  "eslint-plugin-prettier": "^5.1.3",
+  "eslint-plugin-react-hooks": "^4.6.0",
+  "eslint-plugin-simple-import-sort": "^12.0.0",
+  husky: "^9.0.11",
+  "lint-staged": "^15.2.2",
+  "npm-run-all": "^4.1.5",
+  prettier: "^3.2.5",
+  "prettier-plugin-packagejson": "^2.4.11",
+  react: "^18.2.0",
+  "react-dom": "^18.2.0",
+  "react-is": "^18.2.0",
+  rimraf: "^5.0.5",
+  sanity: "^3.30.0",
+  "semantic-release": "^23.0.7",
+  "styled-components": "^6.1.8",
+  typescript: "5.4.2",
+  yalc: "1.0.0-pre.53"
+}, peerDependencies = {
+  react: "^18",
+  "react-is": "^18",
+  sanity: "^3",
+  "styled-components": "^6"
+}, engines = {
+  node: ">=14"
+}, publishConfig = {
+  access: "public",
+  provenance: !0
+}, sanityExchangeUrl = "https://www.sanity.io/plugins/sanity-plugin-mux-input", pluginPkg = {
+  name,
+  version,
+  description,
+  keywords,
+  homepage,
+  bugs,
+  repository,
+  license,
+  author,
+  sideEffects,
+  type,
+  exports,
+  main,
+  module,
+  source,
+  types,
+  files,
+  scripts,
+  dependencies,
+  devDependencies,
+  peerDependencies,
+  engines,
+  publishConfig,
+  sanityExchangeUrl
+};
+function VideoPlayer({
+  asset,
+  children,
+  ...props
+}) {
+  var _a, _b;
+  const client = useClient(), { src: videoSrc, error } = useMemo(() => {
+    try {
+      const src = (asset == null ? void 0 : asset.playbackId) && getVideoSrc({ client, asset });
+      return src ? { src } : { error: new TypeError("Asset has no playback ID") };
+    } catch (error2) {
+      return { error: error2 };
+    }
+  }, [asset, client]), signedToken = useMemo(() => {
+    try {
+      return new URL(videoSrc).searchParams.get("token");
+    } catch {
+      return !1;
+    }
+  }, [videoSrc]), [width, height] = ((_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.aspect_ratio) != null ? _b : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height), aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
+  return /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
+    videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        MuxPlayer,
+        {
+          ...props,
+          playsInline: !0,
+          playbackId: asset.playbackId,
+          tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
+          preload: "metadata",
+          crossOrigin: "anonymous",
+          metadata: {
+            player_name: "Sanity Admin Dashboard",
+            player_version: pluginPkg.version,
+            page_type: "Preview Player"
+          },
+          style: {
+            height: "100%",
+            width: "100%",
+            display: "block",
+            objectFit: "contain"
+          }
+        }
+      ),
+      children
+    ] }),
+    error ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)"
+        },
+        children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
+          /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
+          typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
+        ] })
+      }
+    ) : null,
+    children
+  ] });
+}
+function deleteAssetOnMux(client, assetId) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/${assetId}`,
+    withCredentials: !0,
+    method: "DELETE"
+  });
+}
+async function deleteAsset({
+  client,
+  asset,
+  deleteOnMux
+}) {
+  if (!(asset != null && asset._id))
+    return !0;
+  try {
+    await client.delete(asset._id);
+  } catch {
+    return "failed-sanity";
+  }
+  if (deleteOnMux && asset != null && asset.assetId)
+    try {
+      await deleteAssetOnMux(client, asset.assetId);
+    } catch {
+      return "failed-mux";
+    }
+  return !0;
+}
+function getAsset(client, assetId) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/assets/${dataset}/data/${assetId}`,
+    withCredentials: !0,
+    method: "GET"
+  });
+}
+const getUnknownTypeFallback = (id, typeName) => ({
+  title: /* @__PURE__ */ jsxs("em", { children: [
+    "No schema found for type ",
+    /* @__PURE__ */ jsx("code", { children: typeName })
+  ] }),
+  subtitle: /* @__PURE__ */ jsxs("em", { children: [
+    "Document: ",
+    /* @__PURE__ */ jsx("code", { children: id })
+  ] }),
+  media: () => /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+});
+function MissingSchemaType(props) {
+  const { layout, value } = props;
+  return /* @__PURE__ */ jsx(SanityDefaultPreview, { ...getUnknownTypeFallback(value._id, value._type), layout });
+}
+function TimeAgo({ time }) {
+  const timeAgo = useTimeAgo(time);
+  return /* @__PURE__ */ jsxs("span", { title: timeAgo, children: [
+    timeAgo,
+    " ago"
+  ] });
+}
+function DraftStatus(props) {
+  const { document: document2 } = props, updatedAt = document2 && "_updatedAt" in document2 && document2._updatedAt;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      portal: !0,
+      content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: document2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Edited ",
+        updatedAt && /* @__PURE__ */ jsx(TimeAgo, { time: updatedAt })
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "No unpublished edits" }) }) }),
+      children: /* @__PURE__ */ jsx(TextWithTone, { tone: "caution", dimmed: !document2, muted: !document2, size: 1, children: /* @__PURE__ */ jsx(EditIcon, {}) })
+    }
+  );
+}
+function PublishedStatus(props) {
+  const { document: document2 } = props, updatedAt = document2 && "_updatedAt" in document2 && document2._updatedAt;
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      portal: !0,
+      content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { size: 1, children: document2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "Published ",
+        updatedAt && /* @__PURE__ */ jsx(TimeAgo, { time: updatedAt })
+      ] }) : /* @__PURE__ */ jsx(Fragment, { children: "Not published" }) }) }),
+      children: /* @__PURE__ */ jsx(TextWithTone, { tone: "positive", dimmed: !document2, muted: !document2, size: 1, children: /* @__PURE__ */ jsx(PublishIcon, {}) })
+    }
+  );
+}
+function PaneItemPreview(props) {
+  const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, { draft, published, isLoading } = useMemoObservable(
+    () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
+    [props.documentPreviewStore, schemaType, value._id, title]
+  ), status = isLoading ? null : /* @__PURE__ */ jsxs(Inline, { space: 4, children: [
+    presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
+    /* @__PURE__ */ jsx(PublishedStatus, { document: published }),
+    /* @__PURE__ */ jsx(DraftStatus, { document: draft })
+  ] });
+  return /* @__PURE__ */ jsx(
+    SanityDefaultPreview,
+    {
+      ...getPreviewValueWithFallback({ value, draft, published }),
+      isPlaceholder: isLoading,
+      icon,
+      layout,
+      status
+    }
+  );
+}
+function getIconWithFallback(icon, schemaType, defaultIcon) {
+  return icon === !1 ? !1 : icon || schemaType && schemaType.icon || defaultIcon || !1;
+}
+function DocumentPreviewInInput(props) {
+  const { ChildLink } = usePaneRouter();
+  return (linkProps) => /* @__PURE__ */ jsx(
+    ChildLink,
+    {
+      childId: props.documentPair.id,
+      childParameters: { type: props.documentPair.type },
+      children: linkProps.children
+    }
+  );
+}
+function DocumentPreviewInRool(props) {
+  return (linkProps) => /* @__PURE__ */ jsx(IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
+}
+function DocumentPreview(props) {
+  const { schemaType, documentPair } = props, doc = (documentPair == null ? void 0 : documentPair.draft) || (documentPair == null ? void 0 : documentPair.published), id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
+    PaneItemPreview,
+    {
+      documentPreviewStore,
+      icon: getIconWithFallback(void 0, schemaType, DocumentIcon),
+      schemaType,
+      layout: "default",
+      value: doc,
+      presence: documentPresence
+    }
+  ) : null, [hasSchemaType, schemaType, documentPresence, doc, documentPreviewStore]);
+  return /* @__PURE__ */ jsx(
+    PreviewCard,
+    {
+      __unstable_focusRing: !0,
+      as: props.placement === "input" ? DocumentPreviewInInput(props) : DocumentPreviewInRool(props),
+      "data-as": "a",
+      "data-ui": "PaneItem",
+      padding: 2,
+      radius: 2,
+      tone: "inherit",
+      children: PreviewComponent
+    }
+  );
+}
+const Container = styled(Box)`
+  * {
+    color: ${(props) => props.theme.sanity.color.base.fg};
+  }
+  a {
+    text-decoration: none;
+  }
+  h2 {
+    font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
+  }
+`, VideoReferences = (props) => {
+  var _a;
+  const schema = useSchema();
+  if (!props.isLoaded)
+    return /* @__PURE__ */ jsx(SpinnerBox, {});
+  if (!((_a = props.references) != null && _a.length))
+    return /* @__PURE__ */ jsx(Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsx(Text, { size: 2, children: "No documents are using this video" }) });
+  const documentPairs = collate(props.references || []);
+  return /* @__PURE__ */ jsx(Container, { children: documentPairs == null ? void 0 : documentPairs.map((documentPair) => {
+    const schemaType = schema.get(documentPair.type);
+    return /* @__PURE__ */ jsx(
+      Card,
+      {
+        marginBottom: 2,
+        padding: 2,
+        radius: 2,
+        shadow: 1,
+        style: { overflow: "hidden" },
+        children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+          DocumentPreview,
+          {
+            documentPair,
+            schemaType,
+            placement: props.placement
+          }
+        ) })
+      },
+      documentPair.id
+    );
+  }) });
+};
+function DeleteDialog({
+  asset,
+  references,
+  referencesLoading,
+  cancelDelete,
+  placement,
+  succeededDeleting
+}) {
+  const client = useClient(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast();
+  useEffect(() => {
+    state !== "checkingReferences" || referencesLoading || setState(references != null && references.length ? "cantDelete" : "confirm");
+  }, [state, references, referencesLoading]);
+  async function confirmDelete() {
+    if (state !== "confirm")
+      return;
+    setState("processing_deletion");
+    const worked = await deleteAsset({ client, asset, deleteOnMux });
+    worked === !0 ? (toast.push({ title: "Successfully deleted video", status: "success" }), succeededDeleting()) : worked === "failed-mux" ? (toast.push({
+      title: "Deleted video in Sanity",
+      description: "But it wasn't deleted in Mux",
+      status: "warning"
+    }), succeededDeleting()) : (toast.push({ title: "Failed deleting video", status: "error" }), setState("error_deleting"));
+  }
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      header: "Delete video",
+      zOffset: DIALOGS_Z_INDEX,
+      id: "deleting-video-details-dialog",
+      onClose: cancelDelete,
+      onClickOutside: cancelDelete,
+      width: 1,
+      position: "fixed",
+      children: /* @__PURE__ */ jsx(
+        Card,
+        {
+          padding: 3,
+          style: {
+            minHeight: "150px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            state === "checkingReferences" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Checking if video can be deleted" }),
+              /* @__PURE__ */ jsx(SpinnerBox, {})
+            ] }),
+            state === "cantDelete" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Video can't be deleted" }),
+              /* @__PURE__ */ jsxs(Text, { size: 2, style: { marginBottom: "2rem" }, children: [
+                "There are ",
+                references == null ? void 0 : references.length,
+                " document",
+                references && references.length > 0 && "s",
+                " ",
+                "pointing to this video. Remove their references to this file or delete them before proceeding."
+              ] }),
+              /* @__PURE__ */ jsx(
+                VideoReferences,
+                {
+                  references,
+                  isLoaded: !referencesLoading,
+                  placement
+                }
+              )
+            ] }),
+            state === "confirm" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Are you sure you want to delete this video?" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "This action is irreversible" }),
+              /* @__PURE__ */ jsxs(Stack, { space: 4, marginY: 4, children: [
+                /* @__PURE__ */ jsxs(Flex, { align: "center", as: "label", children: [
+                  /* @__PURE__ */ jsx(
+                    Checkbox,
+                    {
+                      checked: deleteOnMux,
+                      onChange: () => setDeleteOnMux((prev) => !prev)
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { style: { margin: "0 10px" }, children: "Delete asset on Mux" })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { align: "center", as: "label", children: [
+                  /* @__PURE__ */ jsx(Checkbox, { disabled: !0, checked: !0 }),
+                  /* @__PURE__ */ jsx(Text, { style: { margin: "0 10px" }, children: "Delete video from dataset" })
+                ] }),
+                /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    icon: TrashIcon,
+                    fontSize: 2,
+                    padding: 3,
+                    text: "Delete video",
+                    tone: "critical",
+                    onClick: confirmDelete,
+                    disabled: ["processing_deletion", "checkingReferences", "cantDelete"].some(
+                      (s) => s === state
+                    )
+                  }
+                ) })
+              ] })
+            ] }),
+            state === "processing_deletion" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Deleting video..." }),
+              /* @__PURE__ */ jsx(SpinnerBox, {})
+            ] }),
+            state === "error_deleting" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Something went wrong!" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "Try deleting the video again by clicking the button below" })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+const useDocReferences = createHookFromObservableFactory(({ documentStore, id }) => documentStore.listenQuery(
+  /* groq */
+  "*[references($id)]{_id, _type, _rev, _updatedAt, _createdAt}",
+  { id },
+  {
+    apiVersion: SANITY_API_VERSION
+  }
+));
+function formatSeconds(seconds) {
+  if (typeof seconds != "number" || Number.isNaN(seconds))
+    return "";
+  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
+  let ret = "";
+  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+}
+function getVideoMetadata(doc) {
+  var _a, _b, _c, _d, _e, _f;
+  const id = doc.assetId || doc._id || "", date = (_a = doc.data) != null && _a.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
+  return {
+    title: doc.filename || id.slice(0, 12),
+    id,
+    createdAt: date,
+    duration: (_b = doc.data) != null && _b.duration ? formatSeconds((_c = doc.data) == null ? void 0 : _c.duration) : void 0,
+    aspect_ratio: (_d = doc.data) == null ? void 0 : _d.aspect_ratio,
+    max_stored_resolution: (_e = doc.data) == null ? void 0 : _e.max_stored_resolution,
+    max_stored_frame_rate: (_f = doc.data) == null ? void 0 : _f.max_stored_frame_rate
+  };
+}
+function useVideoDetails(props) {
+  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences({
+    documentStore,
+    id: props.asset._id
+  }), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
+  function handleClose() {
+    if (state === "idle") {
+      if (modified) {
+        setState("closing");
+        return;
+      }
+      props.closeDialog();
+    }
+  }
+  function confirmClose(shouldClose) {
+    state === "closing" && (shouldClose && props.closeDialog(), setState("idle"));
+  }
+  async function saveChanges() {
+    if (state === "idle") {
+      setState("saving");
+      try {
+        await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => ({ ...prev, filename })), toast.push({
+          title: "Video title updated",
+          description: `New title: ${filename}`,
+          status: "success"
+        }), props.closeDialog();
+      } catch (error) {
+        toast.push({
+          title: "Failed updating file name",
+          status: "error",
+          description: typeof error == "string" ? error : "Please try again"
+        }), setFilename(originalAsset.filename);
+      }
+      setState("idle");
+    }
+  }
+  return {
+    references,
+    referencesLoading,
+    modified,
+    filename,
+    setFilename,
+    displayInfo,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges
+  };
+}
+const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.label, description: props.description, inputId: props.label, children: /* @__PURE__ */ jsx(
+  TextInput,
+  {
+    id: props.label,
+    value: props.value,
+    placeholder: props.placeholder,
+    onInput: props.onInput,
+    disabled: props.disabled
+  }
+) }), VideoDetails = (props) => {
+  const [tab, setTab] = useState("details"), {
+    displayInfo,
+    filename,
+    modified,
+    references,
+    referencesLoading,
+    setFilename,
+    state,
+    setState,
+    handleClose,
+    confirmClose,
+    saveChanges
+  } = useVideoDetails(props), isSaving = state === "saving", [containerHeight, setContainerHeight] = useState(null), contentsRef = React.useRef(null);
+  return useEffect(() => {
+    !contentsRef.current || !("getBoundingClientRect" in contentsRef.current) || setContainerHeight(contentsRef.current.getBoundingClientRect().height);
+  }, []), /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      header: displayInfo.title,
+      zOffset: DIALOGS_Z_INDEX,
+      id: "video-details-dialog",
+      onClose: handleClose,
+      onClickOutside: handleClose,
+      width: 2,
+      position: "fixed",
+      footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: TrashIcon,
+            fontSize: 2,
+            padding: 3,
+            mode: "bleed",
+            text: "Delete",
+            tone: "critical",
+            onClick: () => setState("deleting"),
+            disabled: isSaving
+          }
+        ),
+        modified && /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: CheckmarkIcon,
+            fontSize: 2,
+            padding: 3,
+            mode: "ghost",
+            text: "Save and close",
+            tone: "positive",
+            onClick: saveChanges,
+            iconRight: isSaving && Spinner,
+            disabled: isSaving
+          }
+        )
+      ] }) }),
+      children: [
+        state === "deleting" && /* @__PURE__ */ jsx(
+          DeleteDialog,
+          {
+            asset: props.asset,
+            cancelDelete: () => setState("idle"),
+            placement: props.placement,
+            referencesLoading,
+            references,
+            succeededDeleting: () => {
+              props.closeDialog();
+            }
+          }
+        ),
+        state === "closing" && /* @__PURE__ */ jsx(
+          Dialog,
+          {
+            header: "You have unsaved changes",
+            zOffset: DIALOGS_Z_INDEX,
+            id: "closing-video-details-dialog",
+            onClose: () => confirmClose(!1),
+            onClickOutside: () => confirmClose(!1),
+            width: 1,
+            position: "fixed",
+            footer: /* @__PURE__ */ jsx(Card, { padding: 3, children: /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: ErrorOutlineIcon,
+                  fontSize: 2,
+                  padding: 3,
+                  text: "Discard changes",
+                  tone: "critical",
+                  onClick: () => confirmClose(!0)
+                }
+              ),
+              modified && /* @__PURE__ */ jsx(
+                Button,
+                {
+                  icon: RevertIcon,
+                  fontSize: 2,
+                  padding: 3,
+                  mode: "ghost",
+                  text: "Keep editing",
+                  tone: "primary",
+                  onClick: () => confirmClose(!1)
+                }
+              )
+            ] }) }),
+            children: /* @__PURE__ */ jsx(Card, { padding: 5, children: /* @__PURE__ */ jsxs(Stack, { style: { textAlign: "center" }, space: 3, children: [
+              /* @__PURE__ */ jsx(Heading, { size: 2, children: "Unsaved changes will be lost" }),
+              /* @__PURE__ */ jsx(Text, { size: 2, children: "Are you sure you want to discard them?" })
+            ] }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Card,
+          {
+            padding: 4,
+            sizing: "border",
+            style: {
+              containerType: "inline-size"
+            },
+            children: /* @__PURE__ */ jsxs(
+              Flex,
+              {
+                sizing: "border",
+                gap: 4,
+                direction: ["column", "column", "row"],
+                align: "flex-start",
+                ref: contentsRef,
+                style: typeof containerHeight == "number" ? {
+                  minHeight: containerHeight
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx(Stack, { space: 4, flex: 1, sizing: "border", children: /* @__PURE__ */ jsx(VideoPlayer, { asset: props.asset, autoPlay: props.asset.autoPlay || !1 }) }),
+                  /* @__PURE__ */ jsxs(Stack, { space: 4, flex: 1, sizing: "border", children: [
+                    /* @__PURE__ */ jsxs(TabList, { space: 2, children: [
+                      /* @__PURE__ */ jsx(
+                        Tab,
+                        {
+                          "aria-controls": "details-panel",
+                          icon: EditIcon,
+                          id: "details-tab",
+                          label: "Details",
+                          onClick: () => setTab("details"),
+                          selected: tab === "details"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Tab,
+                        {
+                          "aria-controls": "references-panel",
+                          icon: SearchIcon,
+                          id: "references-tab",
+                          label: `Used by ${references ? `(${references.length})` : ""}`,
+                          onClick: () => setTab("references"),
+                          selected: tab === "references"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx(
+                      TabPanel,
+                      {
+                        "aria-labelledby": "details-tab",
+                        id: "details-panel",
+                        hidden: tab !== "details",
+                        style: { wordBreak: "break-word" },
+                        children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+                          /* @__PURE__ */ jsx(
+                            AssetInput,
+                            {
+                              label: "Video title or file name",
+                              description: "Not visible to users. Useful for finding videos later.",
+                              value: filename || "",
+                              onInput: (e) => setFilename(e.currentTarget.value),
+                              disabled: state !== "idle"
+                            }
+                          ),
+                          /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+                            (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Duration: ${displayInfo.duration}`,
+                                icon: ClockIcon,
+                                size: 2
+                              }
+                            ),
+                            (displayInfo == null ? void 0 : displayInfo.max_stored_resolution) && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
+                                icon: ResolutionIcon,
+                                size: 2
+                              }
+                            ),
+                            (displayInfo == null ? void 0 : displayInfo.max_stored_frame_rate) && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
+                                icon: StopWatchIcon,
+                                size: 2
+                              }
+                            ),
+                            (displayInfo == null ? void 0 : displayInfo.aspect_ratio) && /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
+                                icon: CropIcon,
+                                size: 2
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              IconInfo,
+                              {
+                                text: `Uploaded on: ${displayInfo.createdAt.toLocaleDateString("en", {
+                                  year: "numeric",
+                                  month: "2-digit",
+                                  day: "2-digit",
+                                  hour: "2-digit",
+                                  minute: "2-digit",
+                                  hour12: !0
+                                })}`,
+                                icon: CalendarIcon,
+                                size: 2
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(IconInfo, { text: `Mux ID: 
+${displayInfo.id}`, icon: TagIcon, size: 2 })
+                          ] })
+                        ] })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      TabPanel,
+                      {
+                        "aria-labelledby": "references-tab",
+                        id: "references-panel",
+                        hidden: tab !== "references",
+                        children: /* @__PURE__ */ jsx(
+                          VideoReferences,
+                          {
+                            references,
+                            isLoaded: !referencesLoading,
+                            placement: props.placement
+                          }
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}, VideoMetadata = (props) => {
+  if (!props.asset)
+    return null;
+  const displayInfo = getVideoMetadata(props.asset);
+  return /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+    displayInfo.title && /* @__PURE__ */ jsx(
+      Text,
+      {
+        size: 1,
+        weight: "semibold",
+        style: {
+          wordWrap: "break-word"
+        },
+        children: displayInfo.title
+      }
+    ),
+    /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
+      (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
+      /* @__PURE__ */ jsx(
+        IconInfo,
+        {
+          text: displayInfo.createdAt.toISOString().split("T")[0],
+          icon: CalendarIcon,
+          size: 1,
+          muted: !0
+        }
+      ),
+      displayInfo.title != displayInfo.id.slice(0, 12) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.id.slice(0, 12), icon: TagIcon, size: 1, muted: !0 })
+    ] })
+  ] });
+}, PlayButton = styled.button`
+  display: block;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0.1875rem;
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    background: var(--card-fg-color);
+    opacity: 0;
+    display: block;
+    position: absolute;
+    inset: 0;
+    z-index: 10;
+    transition: 0.15s ease-out;
+    border-radius: inherit;
+  }
+
+  > div[data-play] {
+    z-index: 11;
+    opacity: 0;
+    transition: 0.15s 0.05s ease-out;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: var(--card-fg-color);
+    background: var(--card-bg-color);
+    width: auto;
+    height: 30%;
+    aspect-ratio: 1;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    > svg {
+      display: block;
+      width: 70%;
+      height: auto;
+      // Visual balance to center-align the icon
+      transform: translateX(5%);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    &::after {
+      opacity: 0.3;
+    }
+    > div[data-play] {
+      opacity: 1;
+    }
+  }
+`;
+function VideoInBrowser({
+  onSelect,
+  onEdit,
+  asset
+}) {
+  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect == null ? void 0 : onSelect(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit == null ? void 0 : onEdit(asset), [onEdit, asset]);
+  if (!asset)
+    return null;
+  const playbackPolicy = getPlaybackPolicy(asset);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      border: !0,
+      padding: 2,
+      sizing: "border",
+      radius: 2,
+      style: {
+        position: "relative"
+      },
+      children: [
+        playbackPolicy === "signed" && /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            content: /* @__PURE__ */ jsx(Card, { padding: 2, radius: 2, children: /* @__PURE__ */ jsx(IconInfo, { icon: LockIcon, text: "Signed playback policy", size: 2 }) }),
+            placement: "right",
+            fallbackPlacements: ["top", "bottom"],
+            portal: !0,
+            children: /* @__PURE__ */ jsx(
+              Card,
+              {
+                tone: "caution",
+                style: {
+                  borderRadius: "100%",
+                  position: "absolute",
+                  left: "1em",
+                  top: "1em",
+                  zIndex: 10
+                },
+                padding: 2,
+                border: !0,
+                children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsx(LockIcon, {}) })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            space: 3,
+            height: "fill",
+            style: {
+              gridTemplateRows: "min-content min-content 1fr"
+            },
+            children: [
+              renderVideo ? /* @__PURE__ */ jsx(VideoPlayer, { asset, autoPlay: !0, forceAspectRatio: THUMBNAIL_ASPECT_RATIO }) : /* @__PURE__ */ jsxs(PlayButton, { onClick: () => setRenderVideo(!0), children: [
+                /* @__PURE__ */ jsx("div", { "data-play": !0, children: /* @__PURE__ */ jsx(PlayIcon, {}) }),
+                /* @__PURE__ */ jsx(VideoThumbnail, { asset })
+              ] }),
+              /* @__PURE__ */ jsx(VideoMetadata, { asset }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    width: "100%",
+                    alignItems: "flex-end",
+                    justifyContent: "flex-start",
+                    gap: ".35rem"
+                  },
+                  children: [
+                    onSelect && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: CheckmarkIcon,
+                        fontSize: 2,
+                        padding: 2,
+                        mode: "ghost",
+                        text: "Select",
+                        style: { flex: 1 },
+                        tone: "positive",
+                        onClick: select
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        icon: EditIcon,
+                        fontSize: 2,
+                        padding: 2,
+                        mode: "ghost",
+                        text: "Details",
+                        style: { flex: 1 },
+                        onClick: edit
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function VideosBrowser({ onSelect }) {
+  const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = React.useState(null), freshEditedAsset = React.useMemo(
+    () => assets.find((a) => a._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
+    [editedAsset, assets]
+  ), placement = onSelect ? "input" : "tool";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 4, style: { minHeight: "50vh" }, children: [
+      /* @__PURE__ */ jsxs(Flex, { justify: "space-between", align: "center", children: [
+        /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 3, children: [
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              value: searchQuery,
+              icon: SearchIcon,
+              onInput: (e) => setSearchQuery(e.currentTarget.value),
+              placeholder: "Search videos"
+            }
+          ),
+          /* @__PURE__ */ jsx(SelectSortOptions, { setSort, sort })
+        ] }),
+        placement === "tool" && /* @__PURE__ */ jsx(ImportVideosFromMux, {})
+      ] }),
+      /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+        (assets == null ? void 0 : assets.length) > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
+          assets.length,
+          " video",
+          assets.length > 1 ? "s" : null,
+          " ",
+          searchQuery ? `matching "${searchQuery}"` : "found"
+        ] }),
+        /* @__PURE__ */ jsx(
+          Grid,
+          {
+            gap: 2,
+            style: {
+              gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))"
+            },
+            children: assets.map((asset) => /* @__PURE__ */ jsx(
+              VideoInBrowser,
+              {
+                asset,
+                onEdit: setEditedAsset,
+                onSelect
+              },
+              asset._id
+            ))
+          }
+        )
+      ] }),
+      isLoading && /* @__PURE__ */ jsx(SpinnerBox, {}),
+      !isLoading && assets.length === 0 && /* @__PURE__ */ jsx(Card, { marginY: 4, paddingX: 4, paddingY: 6, border: !0, radius: 2, tone: "transparent", children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 3, children: searchQuery ? `No videos found for "${searchQuery}"` : "No videos in this dataset" }) })
+    ] }),
+    freshEditedAsset && /* @__PURE__ */ jsx(
+      VideoDetails,
+      {
+        closeDialog: () => setEditedAsset(null),
+        asset: freshEditedAsset,
+        placement
+      }
+    )
+  ] });
+}
+const StudioTool = () => /* @__PURE__ */ jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
+  icon: ToolIcon,
+  title: "Videos"
+};
+function createStudioTool(config) {
+  const toolConfig = typeof config.tool == "object" ? config.tool : DEFAULT_TOOL_CONFIG;
+  return {
+    name: "mux",
+    icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
+    title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
+    component: (props) => /* @__PURE__ */ jsx(StudioTool, { ...config, ...props })
+  };
+}
+const path = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"], useAssetDocumentValues = (asset) => useDocumentValues(
+  isReference(asset) ? asset._ref : "",
+  path
+);
+function useDialogState() {
+  return useState(!1);
+}
+const useMuxPolling = (asset) => {
+  var _a, _b;
+  const client = useClient(), projectId = useProjectId(), dataset = useDataset(), shouldFetch = useMemo(
+    () => {
+      var _a2, _b2;
+      return !!(asset != null && asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
+    },
+    [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]
+  );
+  return useSWR(
+    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset == null ? void 0 : asset.assetId}` : null,
+    async () => {
+      const { data } = await client.request({
+        url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
+        withCredentials: !0,
+        method: "GET"
+      });
+      client.patch(asset._id).set({ status: data.status, data }).commit({ returnDocuments: !1 });
+    },
+    { refreshInterval: 2e3, refreshWhenHidden: !0, dedupingInterval: 1e3 }
+  );
+};
+function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
+  const doc = {
+    _id: "secrets.mux",
+    _type: "mux.apiKey",
+    token,
+    secretKey,
+    enableSignedUrls,
+    signingKeyId,
+    signingKeyPrivate
+  };
+  return client.createOrReplace(doc);
+}
+function createSigningKeys(client) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/signing-keys/${dataset}`,
+    withCredentials: !0,
+    method: "POST"
+  });
+}
+function testSecrets(client) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/secrets/${dataset}/test`,
+    withCredentials: !0,
+    method: "GET"
+  });
+}
+async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
+  if (!(signingKeyId && signingKeyPrivate))
+    return !1;
+  const { dataset } = client.config();
+  try {
+    const res = await client.request({
+      url: `/addons/mux/signing-keys/${dataset}/${signingKeyId}`,
+      withCredentials: !0,
+      method: "GET"
+    });
+    return !!(res.data && res.data.id);
+  } catch {
+    return console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid"), !1;
+  }
+}
+function testSecretsObservable(client) {
+  const { dataset } = client.config();
+  return defer(
+    () => client.observable.request({
+      url: `/addons/mux/secrets/${dataset}/test`,
+      withCredentials: !0,
+      method: "GET"
+    })
+  );
+}
+const useSaveSecrets = (client, secrets) => useCallback(
+  async ({
+    token,
+    secretKey,
+    enableSignedUrls
+  }) => {
+    let { signingKeyId, signingKeyPrivate } = secrets;
+    try {
+      await saveSecrets(
+        client,
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      );
+      const valid = await testSecrets(client);
+      if (!(valid != null && valid.status) && token && secretKey)
+        throw new Error("Invalid secrets");
+    } catch (err) {
+      throw console.error("Error while trying to save secrets:", err), err;
+    }
+    if (enableSignedUrls && !await haveValidSigningKeys(
+      client,
+      signingKeyId,
+      signingKeyPrivate
+    ))
+      try {
+        const { data } = await createSigningKeys(client);
+        signingKeyId = data.id, signingKeyPrivate = data.private_key, await saveSecrets(
+          client,
+          token,
+          secretKey,
+          enableSignedUrls,
+          signingKeyId,
+          signingKeyPrivate
+        );
+      } catch (err) {
+        throw console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message), err;
+      }
+    return {
+      token,
+      secretKey,
+      enableSignedUrls,
+      signingKeyId,
+      signingKeyPrivate
+    };
+  },
+  [client, secrets]
+);
+function init({ token, secretKey, enableSignedUrls }) {
+  return {
+    submitting: !1,
+    error: null,
+    // Form inputs don't set the state back to null when clearing a field, but uses empty strings
+    // This ensures the `dirty` check works correctly
+    token: token != null ? token : "",
+    secretKey: secretKey != null ? secretKey : "",
+    enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : !1
+  };
+}
+function reducer(state, action) {
+  switch (action == null ? void 0 : action.type) {
+    case "submit":
+      return { ...state, submitting: !0, error: null };
+    case "error":
+      return { ...state, submitting: !1, error: action.payload };
+    case "reset":
+      return init(action.payload);
+    case "change":
+      return { ...state, [action.payload.name]: action.payload.value };
+    default:
+      throw new Error(`Unknown action type: ${action == null ? void 0 : action.type}`);
+  }
+}
+const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), ids = [
+  "title",
+  "a",
+  "b",
+  "c",
+  "d",
+  "e",
+  "f",
+  "g",
+  "h",
+  "i",
+  "j",
+  "k",
+  "l",
+  "m",
+  "n",
+  "o",
+  "p",
+  "q",
+  "r"
+];
+function MuxLogo({ height = 26 }) {
+  const id = useId(), [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
+    () => ids.map((field) => `${id}-${field}`),
+    [id]
+  );
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-labelledby": titleId,
+      role: "img",
+      xmlns: "http://www.w3.org/2000/svg",
+      xmlSpace: "preserve",
+      viewBox: "92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",
+      style: { height: `${height}px` },
+      children: [
+        /* @__PURE__ */ jsx("title", { id: titleId, children: "Mux Logo" }),
+        /* @__PURE__ */ jsxs("defs", { children: [
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: c,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: d,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(523.66766 0 0 -523.66766 67.897 159.5)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: g,
+              spreadMethod: "pad",
+              gradientTransform: "rotate(180 296.075 79.75) scale(524.84045)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: i,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: j,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(523.08514 0 0 -523.08514 67.897 224.446)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: k,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.553)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: l,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: m,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.554)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: p,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(521.97632 0 0 -521.97632 69.067 191.973)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: q,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(523.09039 0 0 -523.09039 67.312 191.973)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "linearGradient",
+            {
+              id: r,
+              spreadMethod: "pad",
+              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
+              gradientUnits: "userSpaceOnUse",
+              y2: 0,
+              x2: 1,
+              y1: 0,
+              x1: 0,
+              children: [
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 0,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff4e00"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "stop",
+                  {
+                    offset: 1,
+                    style: {
+                      stopOpacity: 1,
+                      stopColor: "#ff1791"
+                    }
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("clipPath", { id: a, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: b, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M423.64 242h164.999V77H423.64Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: e, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: f, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M311.3 242h93.031V77H311.3Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: h, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M198.96 242h35.106V77H198.96Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: n, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
+          /* @__PURE__ */ jsx("clipPath", { id: o, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M69.067 242H169.12V141.947H69.067Z" }) })
+        ] }),
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${a})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
+          "g",
+          {
+            style: {
+              opacity: 0.69999701
+            },
+            clipPath: `url(#${b})`,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                style: {
+                  fill: `url(#${c})`,
+                  stroke: "none"
+                },
+                d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${d})`,
+              stroke: "none"
+            },
+            d: "M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        ),
+        /* @__PURE__ */ jsxs("g", { clipPath: `url(#${e})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: [
+          /* @__PURE__ */ jsx(
+            "g",
+            {
+              style: {
+                opacity: 0.69999701
+              },
+              clipPath: `url(#${f})`,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  style: {
+                    fill: `url(#${g})`,
+                    stroke: "none"
+                  },
+                  d: "M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "g",
+            {
+              style: {
+                opacity: 0.69999701
+              },
+              clipPath: `url(#${h})`,
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  style: {
+                    fill: `url(#${i})`,
+                    stroke: "none"
+                  },
+                  d: "M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${j})`,
+              stroke: "none"
+            },
+            d: "M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${k})`,
+              stroke: "none"
+            },
+            d: "M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${l})`,
+              stroke: "none"
+            },
+            d: "M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${m})`,
+              stroke: "none"
+            },
+            d: "M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        ),
+        /* @__PURE__ */ jsx("g", { clipPath: `url(#${n})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
+          "g",
+          {
+            style: {
+              opacity: 0.69999701
+            },
+            clipPath: `url(#${o})`,
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                style: {
+                  fill: `url(#${p})`,
+                  stroke: "none"
+                },
+                d: "M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${q})`,
+              stroke: "none"
+            },
+            d: "m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            style: {
+              fill: `url(#${r})`,
+              stroke: "none"
+            },
+            d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
+            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+          }
+        )
+      ]
+    }
+  );
+}
+const Logo = styled.span`
+  display: inline-block;
+  height: 0.8em;
+  margin-right: 1em;
+  transform: translate(0.3em, -0.2em);
+`, Header = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Logo, { children: /* @__PURE__ */ jsx(MuxLogo, { height: 13 }) }),
+  "API Credentials"
+] }), fieldNames = ["token", "secretKey", "enableSignedUrls"];
+function ConfigureApi({ secrets, setDialogState }) {
+  var _a, _b;
+  const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
+    () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
+    [secrets, state]
+  ), id = `ConfigureApi${useId()}`, [tokenId, secretKeyId, enableSignedUrlsId] = useMemo(
+    () => fieldNames.map((field) => `${id}-${field}`),
+    [id]
+  ), firstField = useRef(null), handleSaveSecrets = useSaveSecrets(client, secrets), saving = useRef(!1), handleSubmit = useCallback(
+    (event) => {
+      if (event.preventDefault(), !saving.current && event.currentTarget.reportValidity()) {
+        saving.current = !0, dispatch({ type: "submit" });
+        const { token, secretKey, enableSignedUrls } = state;
+        handleSaveSecrets({ token, secretKey, enableSignedUrls }).then((savedSecrets) => {
+          const { projectId, dataset } = client.config();
+          clear([cacheNs, _id, projectId, dataset]), preload(() => Promise.resolve(savedSecrets), [cacheNs, _id, projectId, dataset]), setDialogState(!1);
+        }).catch((err) => dispatch({ type: "error", payload: err.message })).finally(() => {
+          saving.current = !1;
+        });
+      }
+    },
+    [client, dispatch, handleSaveSecrets, setDialogState, state]
+  ), handleChangeToken = useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "token", value: event.currentTarget.value }
+      });
+    },
+    [dispatch]
+  ), handleChangeSecretKey = useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "secretKey", value: event.currentTarget.value }
+      });
+    },
+    [dispatch]
+  ), handleChangeEnableSignedUrls = useCallback(
+    (event) => {
+      dispatch({
+        type: "change",
+        payload: { name: "enableSignedUrls", value: event.currentTarget.checked }
+      });
+    },
+    [dispatch]
+  );
+  return useEffect(() => {
+    firstField.current && firstField.current.focus();
+  }, [firstField]), /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      id,
+      onClose: handleClose,
+      header: /* @__PURE__ */ jsx(Header, {}),
+      width: 1,
+      style: {
+        maxWidth: "550px"
+      },
+      children: /* @__PURE__ */ jsx(Box, { padding: 4, style: { position: "relative" }, children: /* @__PURE__ */ jsx("form", { onSubmit: handleSubmit, noValidate: !0, children: /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+        !hasSecretsInitially && /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "primary", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "To set up a new access token, go to your",
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: "https://dashboard.mux.com/settings/access-tokens",
+                target: "_blank",
+                rel: "noreferrer noopener",
+                children: "account on mux.com"
+              }
+            ),
+            "."
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+            "The access token needs permissions: ",
+            /* @__PURE__ */ jsx("strong", { children: "Mux Video " }),
+            "(Full Access) and ",
+            /* @__PURE__ */ jsx("strong", { children: "Mux Data" }),
+            " (Read)",
+            /* @__PURE__ */ jsx("br", {}),
+            "The credentials will be stored safely in a hidden document only available to editors."
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(FormField$1, { title: "Access Token", inputId: tokenId, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: tokenId,
+            ref: firstField,
+            onChange: handleChangeToken,
+            type: "text",
+            value: (_a = state.token) != null ? _a : "",
+            required: !!state.secretKey || state.enableSignedUrls
+          }
+        ) }),
+        /* @__PURE__ */ jsx(FormField$1, { title: "Secret Key", inputId: secretKeyId, children: /* @__PURE__ */ jsx(
+          TextInput,
+          {
+            id: secretKeyId,
+            onChange: handleChangeSecretKey,
+            type: "text",
+            value: (_b = state.secretKey) != null ? _b : "",
+            required: !!state.token || state.enableSignedUrls
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(Stack, { space: 4, children: [
+          /* @__PURE__ */ jsxs(Flex, { align: "center", children: [
+            /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                id: enableSignedUrlsId,
+                onChange: handleChangeEnableSignedUrls,
+                checked: state.enableSignedUrls,
+                style: { display: "block" }
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { flex: 1, paddingLeft: 3, children: /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: enableSignedUrlsId, children: "Enable Signed Urls" }) }) })
+          ] }),
+          secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "caution", children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+            /* @__PURE__ */ jsx(Text, { size: 1, children: "The signing key ID that Sanity will use is:" }),
+            /* @__PURE__ */ jsx(Code, { size: 1, children: secrets.signingKeyId }),
+            /* @__PURE__ */ jsxs(Text, { size: 1, children: [
+              "This key is only used for previewing content in the Sanity UI.",
+              /* @__PURE__ */ jsx("br", {}),
+              "You should generate a different key to use in your application server."
+            ] })
+          ] }) }) : null
+        ] }),
+        /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              text: "Save",
+              disabled: !dirty,
+              loading: state.submitting,
+              tone: "primary",
+              mode: "default",
+              type: "submit"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              disabled: state.submitting,
+              text: "Cancel",
+              mode: "bleed",
+              onClick: handleClose
+            }
+          )
+        ] }),
+        state.error && /* @__PURE__ */ jsx(Card, { padding: [3, 3, 3], radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsx(Text, { children: state.error }) })
+      ] }) }) })
+    }
+  );
+}
+var ConfigureApi$1 = memo(ConfigureApi);
+function ErrorBoundaryCard(props) {
+  const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = useErrorBoundary({
+    onDidCatch: (err, errorInfo) => {
+      console.group(err.toString()), console.groupCollapsed("console.error"), console.error(err), console.groupEnd(), err.stack && (console.groupCollapsed("error.stack"), console.log(err.stack), console.groupEnd()), errorInfo != null && errorInfo.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
+        status: "error",
+        title: "Plugin crashed",
+        description: /* @__PURE__ */ jsx(Flex, { align: "center", children: /* @__PURE__ */ jsxs(Inline, { space: 1, children: [
+          "An error happened while rendering",
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              padding: 1,
+              fontSize: 1,
+              style: { transform: "translateY(1px)" },
+              mode: "ghost",
+              text: schemaType.title,
+              onClick: () => {
+                errorRef.current && scrollIntoView(errorRef.current, {
+                  behavior: "smooth",
+                  scrollMode: "if-needed",
+                  block: "center"
+                });
+              }
+            }
+          )
+        ] }) })
+      });
+    }
+  }), handleRetry = useCallback(() => {
+    clear([name$1]), reset();
+  }, [reset]);
+  return didCatch ? /* @__PURE__ */ jsx(Card, { ref: errorRef, paddingX: [2, 3, 4, 4], height: "fill", shadow: 1, overflow: "auto", children: /* @__PURE__ */ jsx(Flex, { justify: "flex-start", align: "center", height: "fill", children: /* @__PURE__ */ jsxs(Grid, { columns: 1, gap: [2, 3, 4, 4], children: [
+    /* @__PURE__ */ jsxs(Heading, { as: "h1", children: [
+      "The ",
+      /* @__PURE__ */ jsx("code", { children: name$1 }),
+      " plugin crashed"
+    ] }),
+    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsx(Text, { children: error.message }) }),
+    /* @__PURE__ */ jsx(Inline, { children: /* @__PURE__ */ jsx(Button, { onClick: handleRetry, text: "Retry" }) })
+  ] }) }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { children });
+}
+var ErrorBoundaryCard$1 = memo(ErrorBoundaryCard);
+const InputFallback = () => /* @__PURE__ */ jsx("div", { style: { padding: 1 }, children: /* @__PURE__ */ jsx(
+  Card,
+  {
+    shadow: 1,
+    sizing: "border",
+    style: { aspectRatio: "16/9", width: "100%", borderRadius: "1px" },
+    children: /* @__PURE__ */ jsxs(Flex, { align: "center", direction: "column", height: "fill", justify: "center", children: [
+      /* @__PURE__ */ jsx(Spinner, { muted: !0 }),
+      /* @__PURE__ */ jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsx(Text, { align: "center", muted: !0, size: 1, children: "Loading\u2026" }) })
+    ] })
+  }
+) });
+function Onboard(props) {
+  const { setDialogState } = props, handleOpen = useCallback(() => setDialogState("secrets"), [setDialogState]);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("div", { style: { padding: 2 }, children: /* @__PURE__ */ jsx(
+    Card,
+    {
+      display: "flex",
+      sizing: "border",
+      style: {
+        aspectRatio: "16/9",
+        width: "100%",
+        boxShadow: "var(--card-bg-color) 0 0 0 2px"
+      },
+      paddingX: [2, 3, 4, 4],
+      radius: 1,
+      tone: "transparent",
+      children: /* @__PURE__ */ jsx(Flex, { justify: "flex-start", align: "center", children: /* @__PURE__ */ jsxs(Grid, { columns: 1, gap: [2, 3, 4, 4], children: [
+        /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: /* @__PURE__ */ jsx("div", { style: { height: "32px" }, children: /* @__PURE__ */ jsx(MuxLogo, {}) }) }),
+        /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: /* @__PURE__ */ jsx(Heading, { size: [0, 1, 2, 2], children: "Upload and preview videos directly from your studio." }) }),
+        /* @__PURE__ */ jsx(Inline, { paddingY: 1, children: /* @__PURE__ */ jsx(Button, { mode: "ghost", icon: PlugIcon, text: "Configure API", onClick: handleOpen }) })
+      ] }) })
+    }
+  ) }) });
+}
+function createUpChunkObservable(uuid2, uploadUrl2, source2) {
+  return new Observable((subscriber) => {
+    const upchunk = UpChunk.createUpload({
+      endpoint: uploadUrl2,
+      file: source2,
+      dynamicChunkSize: !0
+      // changes the chunk size based on network speeds
+    }), successHandler = () => {
+      subscriber.next({
+        type: "success",
+        id: uuid2
+      }), subscriber.complete();
+    }, errorHandler = (data) => subscriber.error(new Error(data.detail.message)), progressHandler = (data) => subscriber.next({ type: "progress", percent: data.detail }), offlineHandler = () => {
+      upchunk.pause(), subscriber.next({
+        type: "pause",
+        id: uuid2
+      });
+    }, onlineHandler = () => {
+      upchunk.resume(), subscriber.next({
+        type: "resume",
+        id: uuid2
+      });
+    };
+    return upchunk.on("success", successHandler), upchunk.on("error", errorHandler), upchunk.on("progress", progressHandler), upchunk.on("offline", offlineHandler), upchunk.on("online", onlineHandler), () => upchunk.abort();
+  });
+}
+function cancelUpload(client, uuid2) {
+  return client.observable.request({
+    url: `/addons/mux/uploads/${client.config().dataset}/${uuid2}`,
+    withCredentials: !0,
+    method: "DELETE"
+  });
+}
+function uploadUrl({
+  url,
+  settings,
+  client
+}) {
+  return testUrl(url).pipe(
+    switchMap((validUrl) => concat(
+      of({ type: "url", url: validUrl }),
+      testSecretsObservable(client).pipe(
+        switchMap((json) => {
+          if (!json || !json.status)
+            return throwError(new Error("Invalid credentials"));
+          const uuid$1 = uuid(), muxBody = settings;
+          muxBody.input || (muxBody.input = [{ type: "video" }]), muxBody.input[0].url = validUrl;
+          const query = {
+            muxBody: JSON.stringify(muxBody),
+            filename: validUrl.split("/").slice(-1)[0]
+          }, dataset = client.config().dataset;
+          return defer(
+            () => client.observable.request({
+              url: `/addons/mux/assets/${dataset}`,
+              withCredentials: !0,
+              method: "POST",
+              headers: {
+                "MUX-Proxy-UUID": uuid$1,
+                "Content-Type": "application/json"
+              },
+              query
+            })
+          ).pipe(
+            mergeMap((result) => {
+              const asset = result && result.results && result.results[0] && result.results[0].document || null;
+              return asset ? of({ type: "success", id: uuid$1, asset }) : throwError(new Error("No asset document returned"));
+            })
+          );
+        })
+      )
+    ))
+  );
+}
+function uploadFile({
+  settings,
+  client,
+  file
+}) {
+  return testFile(file).pipe(
+    switchMap((fileOptions) => concat(
+      of({ type: "file", file: fileOptions }),
+      testSecretsObservable(client).pipe(
+        switchMap((json) => {
+          if (!json || !json.status)
+            return throwError(() => new Error("Invalid credentials"));
+          const uuid$1 = uuid(), body = settings;
+          return concat(
+            of({ type: "uuid", uuid: uuid$1 }),
+            defer(
+              () => client.observable.request({
+                url: `/addons/mux/uploads/${client.config().dataset}`,
+                withCredentials: !0,
+                method: "POST",
+                headers: {
+                  "MUX-Proxy-UUID": uuid$1,
+                  "Content-Type": "application/json"
+                },
+                body
+              })
+            ).pipe(
+              mergeMap((result) => createUpChunkObservable(uuid$1, result.upload.url, file).pipe(
+                // eslint-disable-next-line no-warning-comments
+                // @TODO type the observable events
+                // eslint-disable-next-line max-nested-callbacks
+                mergeMap((event) => event.type !== "success" ? of(event) : from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
+                  // eslint-disable-next-line max-nested-callbacks
+                  mergeMap((doc) => of({ ...event, asset: doc }))
+                )),
+                // eslint-disable-next-line max-nested-callbacks
+                catchError((err) => cancelUpload(client, uuid$1).pipe(mergeMapTo(throwError(err))))
+              ))
+            )
+          );
+        })
+      )
+    ))
+  );
+}
+function getUpload(client, assetId) {
+  const { dataset } = client.config();
+  return client.request({
+    url: `/addons/mux/uploads/${dataset}/${assetId}`,
+    withCredentials: !0,
+    method: "GET"
+  });
+}
+function pollUpload(client, uuid2) {
+  let pollInterval, tries = 0, assetId, upload;
+  return new Promise((resolve, reject) => {
+    pollInterval = setInterval(async () => {
+      try {
+        upload = await getUpload(client, uuid2);
+      } catch (err) {
+        reject(err);
+        return;
+      }
+      assetId = upload && upload.data && upload.data.asset_id, assetId && (clearInterval(pollInterval), resolve(upload)), tries > 10 && (clearInterval(pollInterval), reject(new Error("Upload did not finish"))), tries++;
+    }, 2e3);
+  });
+}
+async function updateAssetDocumentFromUpload(client, uuid2) {
+  let upload, asset;
+  try {
+    upload = await pollUpload(client, uuid2);
+  } catch (err) {
+    return Promise.reject(err);
+  }
+  try {
+    asset = await getAsset(client, upload.data.asset_id);
+  } catch (err) {
+    return Promise.reject(err);
+  }
+  const doc = {
+    _id: uuid2,
+    _type: "mux.videoAsset",
+    status: asset.data.status,
+    data: asset.data,
+    assetId: asset.data.id,
+    playbackId: asset.data.playback_ids[0].id,
+    uploadId: upload.data.id
+  };
+  return client.createOrReplace(doc).then(() => doc);
+}
+function testFile(file) {
+  if (typeof window < "u" && file instanceof window.File) {
+    const fileOptions = optionsFromFile({}, file);
+    return of(fileOptions);
+  }
+  return throwError(new Error("Invalid file"));
+}
+function testUrl(url) {
+  const error = new Error("Invalid URL");
+  if (typeof url != "string")
+    return throwError(error);
+  let parsed;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return throwError(error);
+  }
+  return parsed && !parsed.protocol.match(/http:|https:/) ? throwError(error) : of(url);
+}
+function optionsFromFile(opts, file) {
+  if (!(typeof window > "u" || !(file instanceof window.File)))
+    return {
+      name: opts.preserveFilename === !1 ? void 0 : file.name,
+      type: file.type
+    };
+}
+function isValidUrl(url) {
+  try {
+    const parsed = new URL(url);
+    return parsed && !!parsed.protocol.match(/http:|https:/);
+  } catch {
+    return !1;
+  }
+}
+function extractDroppedFiles(dataTransfer) {
+  const files2 = Array.from(dataTransfer.files || []), items = Array.from(dataTransfer.items || []);
+  return files2 && files2.length > 0 ? Promise.resolve(files2) : normalizeItems(items).then((arr) => arr.flat());
+}
+function normalizeItems(items) {
+  return Promise.all(
+    items.map((item) => {
+      if (item.kind === "file" && item.webkitGetAsEntry) {
+        let entry;
+        try {
+          entry = item.webkitGetAsEntry();
+        } catch {
+          return [item.getAsFile()];
+        }
+        return entry ? entry.isDirectory ? walk(entry) : [item.getAsFile()] : [];
+      }
+      if (item.kind === "file") {
+        const file = item.getAsFile();
+        return Promise.resolve(file ? [file] : []);
+      }
+      return new Promise((resolve) => item.getAsString(resolve)).then(
+        (str) => str ? [new File([str], "unknown.txt", { type: item.type })] : []
+      );
+    })
+  );
+}
+function isFile(entry) {
+  return entry.isFile;
+}
+function isDirectory(entry) {
+  return entry.isDirectory;
+}
+function walk(entry) {
+  if (isFile(entry))
+    return new Promise((resolve) => entry.file(resolve)).then((file) => [file]);
+  if (isDirectory(entry)) {
+    const dir = entry.createReader();
+    return new Promise((resolve) => dir.readEntries(resolve)).then((entries) => entries.filter((entr) => !entr.name.startsWith("."))).then((entries) => Promise.all(entries.map(walk)).then((arr) => arr.flat()));
+  }
+  return Promise.resolve([]);
+}
+function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
+  const handleSelect = useCallback(
+    (chosenAsset) => {
+      chosenAsset != null && chosenAsset._id || onChange(PatchEvent.from([unset(["asset"])])), chosenAsset._id !== (selectedAsset == null ? void 0 : selectedAsset._id) && onChange(
+        PatchEvent.from([
+          setIfMissing({ asset: {}, _type: "mux.video" }),
+          set({ _type: "reference", _weak: !0, _ref: chosenAsset._id }, ["asset"])
+        ])
+      ), setDialogState(!1);
+    },
+    [onChange, setDialogState, selectedAsset]
+  );
+  return /* @__PURE__ */ jsx(VideosBrowser, { onSelect: handleSelect });
+}
+const StyledDialog = styled(Dialog)`
+  > div[data-ui='DialogCard'] > div[data-ui='Card'] {
+    height: 100%;
+  }
+`;
+function InputBrowser({
+  setDialogState,
+  asset,
+  onChange
+}) {
+  const id = `InputBrowser${useId()}`, handleClose = useCallback(() => setDialogState(!1), [setDialogState]);
+  return /* @__PURE__ */ jsx(
+    StyledDialog,
+    {
+      __unstable_autoFocus: !0,
+      header: "Select video",
+      id,
+      onClose: handleClose,
+      width: 2,
+      children: /* @__PURE__ */ jsx(SelectAssets, { asset, onChange, setDialogState })
+    }
+  );
+}
+const useCancelUpload = (asset, onChange) => {
+  const client = useClient();
+  return useCallback(() => {
+    asset && (onChange(PatchEvent.from(unset())), asset.assetId && deleteAssetOnMux(client, asset.assetId), asset._id && client.delete(asset._id));
+  }, [asset, client, onChange]);
+};
+styled.div`
+  && {
+    --media-background-color: transparent;
+    --media-button-icon-width: 100%;
+    --media-button-icon-height: auto;
+    pointer-events: none;
+    width: 100%;
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+    media-play-button {
+      --media-control-background: transparent;
+      --media-control-hover-background: transparent;
+      padding: 0;
+      width: max(27px, min(9%, 90px));
+    }
+  }
+`;
+const TopControls = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  justify-content: flex-end;
+  button {
+    height: auto;
+  }
+`, CardWrapper = styled(Card)`
+  min-height: 82px;
+  box-sizing: border-box;
+`, FlexWrapper = styled(Flex)`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`, LeftSection = styled(Stack)`
+  position: relative;
+  width: 60%;
+`, CodeWrapper = styled(Code)`
+  position: relative;
+  width: 100%;
+
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 200px;
+  }
+`, UploadProgress = ({
+  progress = 100,
+  onCancel,
+  filename,
+  text = "Uploading"
+}) => /* @__PURE__ */ jsx(CardWrapper, { tone: "primary", padding: 4, border: !0, height: "fill", children: /* @__PURE__ */ jsxs(FlexWrapper, { align: "center", justify: "space-between", height: "fill", direction: "row", gap: 2, children: [
+  /* @__PURE__ */ jsxs(LeftSection, { children: [
+    /* @__PURE__ */ jsx(Flex, { justify: "center", gap: [3, 3, 2, 2], direction: ["column", "column", "row"], children: /* @__PURE__ */ jsx(Text, { size: 1, children: /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+      text,
+      /* @__PURE__ */ jsx(CodeWrapper, { size: 1, children: filename || "..." })
+    ] }) }) }),
+    /* @__PURE__ */ jsx(Card, { marginTop: 3, radius: 5, shadow: 1, children: /* @__PURE__ */ jsx(LinearProgress, { value: progress }) })
+  ] }),
+  onCancel ? /* @__PURE__ */ jsx(
+    Button,
+    {
+      fontSize: 2,
+      text: "Cancel upload",
+      mode: "ghost",
+      tone: "critical",
+      onClick: onCancel
+    }
+  ) : null
+] }) }), Player = ({ asset, buttons, readOnly, onChange }) => {
+  var _a, _b, _c, _d;
+  const isLoading = useMemo(() => (asset == null ? void 0 : asset.status) === "preparing" ? "Preparing the video" : (asset == null ? void 0 : asset.status) === "waiting_for_upload" ? "Waiting for upload to start" : (asset == null ? void 0 : asset.status) === "waiting" ? "Processing upload" : !((asset == null ? void 0 : asset.status) === "ready" || typeof (asset == null ? void 0 : asset.status) > "u"), [asset]), isPreparingStaticRenditions = useMemo(() => {
+    var _a2, _b2;
+    return ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing";
+  }, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
+  return useEffect(() => {
+    var _a2, _b2;
+    const style = document.createElement("style");
+    style.innerHTML = "button svg { vertical-align: middle; }", (_a2 = playRef.current) != null && _a2.shadowRoot && playRef.current.shadowRoot.appendChild(style), (_b2 = muteRef == null ? void 0 : muteRef.current) != null && _b2.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
+  }, []), useEffect(() => {
+    var _a2, _b2, _c2;
+    if ((asset == null ? void 0 : asset.status) === "errored")
+      throw handleCancelUpload(), new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
+  }, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]), !asset || !asset.status ? null : isLoading ? /* @__PURE__ */ jsx(
+    UploadProgress,
+    {
+      progress: 100,
+      filename: asset == null ? void 0 : asset.filename,
+      text: isLoading !== !0 && isLoading || "Waiting for Mux to complete the upload",
+      onCancel: readOnly ? void 0 : () => handleCancelUpload()
+    }
+  ) : /* @__PURE__ */ jsxs(VideoPlayer, { asset, children: [
+    buttons && /* @__PURE__ */ jsx(TopControls, { slot: "top-chrome", children: buttons }),
+    isPreparingStaticRenditions && /* @__PURE__ */ jsx(
+      Card,
+      {
+        padding: 2,
+        radius: 1,
+        style: {
+          background: "var(--card-fg-color)",
+          position: "absolute",
+          top: "0.5em",
+          left: "0.5em"
+        },
+        children: /* @__PURE__ */ jsx(Text, { size: 1, style: { color: "var(--card-bg-color)" }, children: "MUX is preparing static renditions, please stand by" })
+      }
+    )
+  ] });
+};
+function focusRingBorderStyle(border) {
+  return `inset 0 0 0 ${border.width}px ${border.color}`;
+}
+function focusRingStyle(opts) {
+  const { base, border, focusRing } = opts, focusRingOutsetWidth = focusRing.offset + focusRing.width, focusRingInsetWidth = 0 - focusRing.offset, bgColor = base ? base.bg : "var(--card-bg-color)";
+  return [
+    focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
+    border && focusRingBorderStyle(border),
+    focusRingInsetWidth < 0 && `0 0 0 ${0 - focusRingInsetWidth}px ${bgColor}`,
+    focusRingOutsetWidth > 0 && `0 0 0 ${focusRingOutsetWidth}px var(--card-focus-ring-color)`
+  ].filter(Boolean).join(",");
+}
+const FileButton = styled(MenuItem)(({ theme }) => {
+  const { focusRing } = theme.sanity, base = theme.sanity.color.base;
+  return css`
+    position: relative;
+
+    &:not([data-disabled='true']) {
+      &:focus-within {
+        box-shadow: ${focusRingStyle({ base, border: { width: 1, color: "var(--card-border-color)" }, focusRing })};
+      }
+    }
+
+    & input {
+      overflow: hidden;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      min-width: 0;
+      display: block;
+      appearance: none;
+      padding: 0;
+      margin: 0;
+      border: 0;
+      opacity: 0;
+    }
+  `;
+}), FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
+  const {
+    icon,
+    id: idProp,
+    accept,
+    capture,
+    fontSize,
+    multiple,
+    onSelect,
+    space = 3,
+    textAlign,
+    text,
+    disabled,
+    ...rest
+  } = props, idHook = useId(), id = idProp || idHook, handleChange = React.useCallback(
+    (event) => {
+      onSelect && event.target.files && onSelect(Array.from(event.target.files));
+    },
+    [onSelect]
+  ), content = /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "flex-start", children: [
+    icon && /* @__PURE__ */ jsx(Box, { marginRight: text ? space : void 0, children: /* @__PURE__ */ jsxs(Text, { size: fontSize, children: [
+      isValidElement(icon) && icon,
+      isValidElementType(icon) && createElement(icon)
+    ] }) }),
+    text && /* @__PURE__ */ jsx(Text, { align: textAlign, size: fontSize, textOverflow: "ellipsis", children: text })
+  ] });
+  return /* @__PURE__ */ jsxs(FileButton, { ...rest, htmlFor: id, disabled, ref: forwardedRef, children: [
+    content,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "data-testid": "file-button-input",
+        accept,
+        capture,
+        id,
+        multiple,
+        onChange: handleChange,
+        type: "file",
+        value: "",
+        disabled
+      }
+    )
+  ] });
+}), LockCard = styled(Card)`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.6;
+  mix-blend-mode: screen;
+  background: transparent;
+`, LockButton = styled(Button)`
+  background: transparent;
+  color: white;
+`;
+function PlayerActionsMenu(props) {
+  const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
+  return useEffect(() => {
+    open && dialogState && setOpen(!1);
+  }, [dialogState, open]), useClickOutside(
+    useCallback(() => setOpen(!1), []),
+    [menuElement]
+  ), /* @__PURE__ */ jsxs(Inline, { space: 1, padding: 2, children: [
+    isSigned && /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        content: /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Text, { muted: !0, size: 1, children: "Signed playback policy" }) }),
+        placement: "right",
+        portal: !0,
+        children: /* @__PURE__ */ jsx(LockCard, { radius: 2, margin: 2, scheme: "dark", tone: "positive", children: /* @__PURE__ */ jsx(LockButton, { icon: LockIcon, mode: "bleed", tone: "positive" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        content: /* @__PURE__ */ jsxs(Menu, { ref: setMenuRef, children: [
+          /* @__PURE__ */ jsx(Box, { padding: 2, children: /* @__PURE__ */ jsx(Label$1, { muted: !0, size: 1, children: "Replace" }) }),
+          /* @__PURE__ */ jsx(
+            FileInputMenuItem,
+            {
+              accept: "video/*",
+              icon: UploadIcon,
+              onSelect,
+              text: "Upload",
+              disabled: readOnly,
+              fontSize: 1
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: SearchIcon,
+              text: "Browse",
+              onClick: () => setDialogState("select-video")
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: PlugIcon,
+              text: "Configure API",
+              onClick: () => setDialogState("secrets")
+            }
+          ),
+          /* @__PURE__ */ jsx(MenuDivider, {}),
+          /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              tone: "critical",
+              icon: ResetIcon,
+              text: "Clear field",
+              onClick: onReset,
+              disabled: readOnly
+            }
+          )
+        ] }),
+        portal: !0,
+        open,
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: EllipsisHorizontalIcon,
+            mode: "ghost",
+            fontSize: 1,
+            onClick: () => {
+              setDialogState(!1), setOpen(!0);
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+var PlayerActionsMenu$1 = memo(PlayerActionsMenu);
+function formatBytes(bytes, si = !1, dp = 1) {
+  const thresh = si ? 1e3 : 1024;
+  if (Math.abs(bytes) < thresh)
+    return bytes + " B";
+  const units = si ? ["kB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"] : ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"];
+  let u = -1;
+  const r = 10 ** dp;
+  do
+    bytes /= thresh, ++u;
+  while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+  return bytes.toFixed(dp) + " " + units[u];
+}
+const SUPPORTED_MUX_LANGUAGES = [
+  { label: "English", code: "en", state: "Stable" },
+  { label: "Spanish", code: "es", state: "Stable" },
+  { label: "Italian", code: "it", state: "Stable" },
+  { label: "Portuguese", code: "pt", state: "Stable" },
+  { label: "German", code: "de", state: "Stable" },
+  { label: "French", code: "fr", state: "Stable" },
+  { label: "Polish", code: "pl", state: "Beta" },
+  { label: "Russian", code: "ru", state: "Beta" },
+  { label: "Dutch", code: "nl", state: "Beta" },
+  { label: "Catalan", code: "ca", state: "Beta" },
+  { label: "Turkish", code: "tr", state: "Beta" },
+  { label: "Swedish", code: "sv", state: "Beta" },
+  { label: "Ukrainian", code: "uk", state: "Beta" },
+  { label: "Norwegian", code: "no", state: "Beta" },
+  { label: "Finnish", code: "fi", state: "Beta" },
+  { label: "Slovak", code: "sk", state: "Beta" },
+  { label: "Greek", code: "el", state: "Beta" },
+  { label: "Czech", code: "cs", state: "Beta" },
+  { label: "Croatian", code: "hr", state: "Beta" },
+  { label: "Danish", code: "da", state: "Beta" },
+  { label: "Romanian", code: "ro", state: "Beta" },
+  { label: "Bulgarian", code: "bg", state: "Beta" }
+];
+function isCustomTextTrack(track) {
+  return track.type !== "autogenerated";
+}
+function isAutogeneratedTrack(track) {
+  return track.type === "autogenerated";
+}
+const ALL_LANGUAGE_CODES = LanguagesList.getAllCodes().map((code) => ({
+  value: code,
+  label: LanguagesList.getNativeName(code)
+})), SUBTITLE_LANGUAGES = {
+  autogenerated: SUPPORTED_MUX_LANGUAGES.map((lang) => ({
+    value: lang.code,
+    label: lang.label
+  })),
+  subtitles: ALL_LANGUAGE_CODES,
+  captions: ALL_LANGUAGE_CODES
+}, TRACK_TYPES = [
+  { value: "autogenerated", label: "Auto-generated Subtitles" }
+  // {value: 'subtitles', label: 'Subtitles'},
+  // {value: 'captions', label: 'Closed Captions'},
+];
+function TrackEditor({
+  canAutoGenerate,
+  track,
+  dispatch
+}) {
+  const { _id: id, type: type2 } = track, dispatchTrackAction = (args) => dispatch({ action: "track", id, ...args }), trackTypes = TRACK_TYPES.filter(
+    ({ value }) => !(value === "autogenerated" && !canAutoGenerate)
+  );
+  return trackTypes.length === 0 ? null : /* @__PURE__ */ jsx(Card, { border: !0, padding: 3, radius: 2, style: { position: "relative" }, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
+    trackTypes.length > 1 && /* @__PURE__ */ jsx(FormField$2, { title: "Auto-generated subtitles", children: /* @__PURE__ */ jsx(Flex, { gap: 3, children: trackTypes.map(({ value, label }) => {
+      const inputId = `${id}--type-${value}`;
+      return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+        /* @__PURE__ */ jsx(
+          Radio,
+          {
+            checked: type2 === value,
+            name: "track-type",
+            onChange: (e) => dispatchTrackAction({
+              subAction: "update",
+              value: {
+                type: e.currentTarget.value
+              }
+            }),
+            value,
+            id: inputId
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, children: label })
+      ] }, value);
+    }) }) }),
+    /* @__PURE__ */ jsx(
+      Autocomplete,
+      {
+        id: `${id}--language`,
+        value: track.language_code,
+        onChange: (newValue) => dispatchTrackAction({
+          subAction: "update",
+          value: {
+            language_code: newValue,
+            name: LanguagesList.getNativeName(newValue)
+          }
+        }),
+        options: SUBTITLE_LANGUAGES[track.type],
+        icon: TranslateIcon,
+        placeholder: "Select language",
+        filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
+        openButton: !0,
+        renderValue: (value) => {
+          var _a;
+          return ((_a = SUBTITLE_LANGUAGES[track.type].find((l) => l.value === value)) == null ? void 0 : _a.label) || value;
+        },
+        renderOption: (option) => /* @__PURE__ */ jsx(Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxs(Text, { size: 2, textOverflow: "ellipsis", children: [
+          option.label,
+          " (",
+          option.value,
+          ")"
+        ] }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(Flex, { children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        icon: TrashIcon,
+        tone: "critical",
+        mode: "ghost",
+        onClick: () => dispatchTrackAction({ subAction: "delete" }),
+        text: "Delete"
+      }
+    ) })
+  ] }) });
+}
+function TextTracksEditor({
+  canAutoGenerate,
+  tracks,
+  dispatch
+}) {
+  return TRACK_TYPES.filter(
+    ({ value }) => !(value === "autogenerated" && !canAutoGenerate)
+  ).length === 0 ? null : /* @__PURE__ */ jsx(
+    FormField$2,
+    {
+      title: "Captions & Subtitles",
+      description: "Provide text tracks for video accessibility.",
+      children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+        tracks.map((track) => /* @__PURE__ */ jsx(
+          TrackEditor,
+          {
+            canAutoGenerate,
+            track,
+            dispatch
+          },
+          track._id
+        )),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: AddIcon,
+            onClick: () => dispatch({ action: "track", id: uuid(), subAction: "add" }),
+            text: "New caption/subtitle",
+            mode: "ghost"
+          }
+        )
+      ] })
+    }
+  );
+}
+const ENCODING_OPTIONS = [
+  { value: "smart", label: "Smart" },
+  { value: "baseline", label: "Baseline" }
+], RESOLUTION_TIERS = [
+  { value: "1080p", label: "1080p" },
+  { value: "1440p", label: "1440p (2k)" },
+  { value: "2160p", label: "2160p (4k)" }
+];
+function UploadConfiguration({
+  stagedUpload,
+  secrets,
+  pluginConfig,
+  startUpload,
+  onClose
+}) {
+  var _a;
+  const id = useId(), autoTextTracks = useRef(
+    pluginConfig.encoding_tier === "smart" && ((_a = pluginConfig.defaultAutogeneratedSubtitleLangs) == null ? void 0 : _a.map(
+      (language_code) => ({
+        _id: uuid(),
+        type: "autogenerated",
+        language_code,
+        name: LanguagesList.getNativeName(language_code)
+      })
+    )) || []
+  ).current, [config, dispatch] = useReducer(
+    (prev, action) => {
+      var _a2;
+      switch (action.action) {
+        case "encoding_tier":
+          return action.value === "baseline" ? Object.assign({}, prev, {
+            encoding_tier: action.value,
+            mp4_support: "none",
+            max_resolution_tier: "1080p",
+            text_tracks: (_a2 = prev.text_tracks) == null ? void 0 : _a2.filter(({ type: type2 }) => type2 !== "autogenerated")
+          }) : Object.assign({}, prev, {
+            encoding_tier: action.value,
+            mp4_support: pluginConfig.mp4_support,
+            max_resolution_tier: pluginConfig.max_resolution_tier,
+            text_tracks: [...autoTextTracks, ...prev.text_tracks || []]
+          });
+        case "mp4_support":
+        case "max_resolution_tier":
+        case "normalize_audio":
+        case "signed":
+          return Object.assign({}, prev, { [action.action]: action.value });
+        case "track": {
+          const text_tracks = [...prev.text_tracks], target_track_i = text_tracks.findIndex(({ _id: _id2 }) => _id2 === action.id);
+          switch (action.subAction) {
+            case "add":
+              if (target_track_i !== -1)
+                break;
+              text_tracks.push(
+                prev.encoding_tier === "smart" ? { _id: action.id, type: "autogenerated" } : { _id: action.id, type: "subtitles" }
+              );
+              break;
+            case "update":
+              if (target_track_i === -1)
+                break;
+              text_tracks[target_track_i] = {
+                ...text_tracks[target_track_i],
+                ...action.value
+              };
+              break;
+            case "delete":
+              if (target_track_i === -1)
+                break;
+              text_tracks.splice(target_track_i, 1);
+              break;
+          }
+          return Object.assign({}, prev, { text_tracks });
+        }
+        default:
+          return prev;
+      }
+    },
+    {
+      encoding_tier: pluginConfig.encoding_tier,
+      max_resolution_tier: pluginConfig.max_resolution_tier,
+      mp4_support: pluginConfig.mp4_support,
+      signed: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      normalize_audio: pluginConfig.normalize_audio,
+      text_tracks: autoTextTracks
+    }
+  ), { disableTextTrackConfig, disableUploadConfig } = pluginConfig, skipConfig = disableTextTrackConfig && disableUploadConfig;
+  if (useEffect(() => {
+    skipConfig && startUpload(formatUploadConfig(config));
+  }, []), skipConfig)
+    return null;
+  const maxSupportedResolution = RESOLUTION_TIERS.findIndex(
+    (rt) => rt.value === pluginConfig.max_resolution_tier
+  );
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      open: !0,
+      id: "upload-configuration",
+      zOffset: 1e3,
+      width: 1,
+      header: "Configure Mux Upload",
+      onClose,
+      children: /* @__PURE__ */ jsxs(Stack, { padding: 4, space: 2, children: [
+        /* @__PURE__ */ jsx(Label$1, { size: 3, children: "FILE TO UPLOAD" }),
+        /* @__PURE__ */ jsx(
+          Card,
+          {
+            tone: "transparent",
+            border: !0,
+            padding: 3,
+            paddingY: 4,
+            style: { borderRadius: "0.1865rem" },
+            children: /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+              /* @__PURE__ */ jsx(DocumentVideoIcon, { fontSize: "2em" }),
+              /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+                /* @__PURE__ */ jsx(Text, { textOverflow: "ellipsis", as: "h2", size: 3, children: stagedUpload.type === "file" ? stagedUpload.files[0].name : stagedUpload.url }),
+                /* @__PURE__ */ jsx(Text, { as: "p", size: 1, muted: !0, children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : "File From URL (Unknown size)" })
+              ] })
+            ] })
+          }
+        ),
+        !disableUploadConfig && /* @__PURE__ */ jsxs(Stack, { space: 3, paddingBottom: 2, children: [
+          /* @__PURE__ */ jsx(
+            FormField$2,
+            {
+              title: "Encoding Tier",
+              description: /* @__PURE__ */ jsxs(Fragment, { children: [
+                "The encoding tier informs the cost, quality, and available platform features for the asset.",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://docs.mux.com/guides/use-encoding-tiers",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: "See the Mux guide for more details."
+                  }
+                )
+              ] }),
+              children: /* @__PURE__ */ jsx(Flex, { gap: 3, children: ENCODING_OPTIONS.map(({ value, label }) => {
+                const inputId = `${id}--encodingtier-${value}`;
+                return /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+                  /* @__PURE__ */ jsx(
+                    Radio,
+                    {
+                      checked: config.encoding_tier === value,
+                      name: "asset-encodingtier",
+                      onChange: (e) => dispatch({
+                        action: "encoding_tier",
+                        value: e.currentTarget.value
+                      }),
+                      value,
+                      id: inputId
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, children: label })
+                ] }, value);
+              }) })
+            }
+          ),
+          config.encoding_tier === "smart" && maxSupportedResolution > 0 && /* @__PURE__ */ jsx(
+            FormField$2,
+            {
+              title: "Resolution Tier",
+              description: /* @__PURE__ */ jsxs(Fragment, { children: [
+                "The maximum",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: "https://docs.mux.com/api-reference#video/operation/create-direct-upload",
+                    target: "_blank",
+                    rel: "noopener noreferrer",
+                    children: "resolution_tier"
+                  }
+                ),
+                " ",
+                "your asset is encoded, stored, and streamed at."
+              ] }),
+              children: /* @__PURE__ */ jsx(Flex, { gap: 3, wrap: "wrap", children: RESOLUTION_TIERS.map(({ value, label }, index) => {
+                const inputId = `${id}--type-${value}`;
+                return index > maxSupportedResolution ? null : /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+                  /* @__PURE__ */ jsx(
+                    Radio,
+                    {
+                      checked: config.max_resolution_tier === value,
+                      name: "asset-resolutiontier",
+                      onChange: (e) => dispatch({
+                        action: "max_resolution_tier",
+                        value: e.currentTarget.value
+                      }),
+                      value,
+                      id: inputId
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Text, { as: "label", htmlFor: inputId, children: label })
+                ] }, value);
+              }) })
+            }
+          ),
+          (secrets.enableSignedUrls || config.encoding_tier === "smart") && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            secrets.enableSignedUrls && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: `${id}--signed`,
+                  style: { display: "block" },
+                  name: "signed",
+                  required: !0,
+                  checked: config.signed,
+                  onChange: (e) => dispatch({
+                    action: "signed",
+                    value: e.currentTarget.checked
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: `${id}--signed`, children: "Signed playback URL" }) })
+            ] }),
+            config.encoding_tier === "smart" && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+              /* @__PURE__ */ jsx(
+                Checkbox,
+                {
+                  id: `${id}--mp4_support`,
+                  style: { display: "block" },
+                  name: "mp4_support",
+                  required: !0,
+                  checked: config.mp4_support === "standard",
+                  onChange: (e) => dispatch({
+                    action: "mp4_support",
+                    value: e.currentTarget.checked ? "standard" : "none"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: `${id}--mp4_support`, children: "MP4 support (allow downloading)" }) })
+            ] })
+          ] }) })
+        ] }),
+        !disableTextTrackConfig && /* @__PURE__ */ jsx(
+          TextTracksEditor,
+          {
+            canAutoGenerate: config.encoding_tier === "smart",
+            tracks: config.text_tracks,
+            dispatch
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            icon: UploadIcon,
+            text: "Upload",
+            tone: "positive",
+            onClick: () => startUpload(formatUploadConfig(config))
+          }
+        )
+      ] })
+    }
+  );
+}
+function formatUploadConfig(config) {
+  const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
+    name: track.name,
+    language_code: track.language_code
+  }));
+  return {
+    input: [
+      {
+        type: "video",
+        generated_subtitles: generated_subtitles.length > 0 ? generated_subtitles : void 0
+      },
+      ...config.text_tracks.filter(isCustomTextTrack).reduce(
+        (acc, track) => (track.language_code && track.file && track.name && acc.push({
+          url: track.file.contents,
+          type: "text",
+          text_type: track.type === "subtitles" ? "subtitles" : void 0,
+          language_code: track.language_code,
+          name: track.name,
+          closed_captions: track.type === "captions"
+        }), acc),
+        []
+      )
+    ],
+    mp4_support: config.mp4_support,
+    playback_policy: config.signed ? ["public", "signed"] : ["public"],
+    max_resolution_tier: config.max_resolution_tier,
+    encoding_tier: config.encoding_tier,
+    normalize_audio: config.normalize_audio
+  };
+}
+function withFocusRing(component) {
+  return styled(component)((props) => {
+    const border = {
+      width: props.$border ? 1 : 0,
+      color: "var(--card-border-color)"
+    };
+    return css`
+      --card-focus-box-shadow: ${focusRingBorderStyle(border)};
+
+      border-radius: ${rem(props.theme.sanity.radius[1])};
+      outline: none;
+      box-shadow: var(--card-focus-box-shadow);
+
+      &:focus {
+        --card-focus-box-shadow: ${focusRingStyle({
+      base: props.theme.sanity.color.base,
+      border,
+      focusRing: props.theme.sanity.focusRing
+    })};
+      }
+    `;
+  });
+}
+const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card), UploadCard = forwardRef(
+  ({ children, tone, onPaste, onDrop, onDragEnter, onDragLeave, onDragOver }, forwardedRef) => {
+    const ctrlDown = useRef(!1), inputRef = useRef(null), handleKeyDown = useCallback((event) => {
+      (event.keyCode == ctrlKey || event.keyCode == cmdKey) && (ctrlDown.current = !0), ctrlDown.current && event.keyCode == 86 && inputRef.current.focus();
+    }, []), handleKeyUp = useCallback((event) => {
+      (event.keyCode == ctrlKey || event.keyCode == cmdKey) && (ctrlDown.current = !1);
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      UploadCardWithFocusRing,
+      {
+        tone,
+        ref: forwardedRef,
+        padding: 0,
+        radius: 2,
+        shadow: 0,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onPaste,
+        onDrop,
+        onDragEnter,
+        onDragLeave,
+        onDragOver,
+        children: [
+          /* @__PURE__ */ jsx(HiddenInput$1, { ref: inputRef, onPaste }),
+          children
+        ]
+      }
+    );
+  }
+), HiddenInput$1 = styled.input.attrs({ type: "text" })`
+  position: absolute;
+  border: 0;
+  color: white;
+  opacity: 0;
+
+  &:focus {
+    outline: none;
+  }
+`, HiddenInput = styled.input`
+  overflow: hidden;
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+`, Label = styled.label`
+  position: relative;
+`, FileInputButton = ({ onSelect, accept, ...props }) => {
+  const inputId = `FileSelect${useId()}`, inputRef = useRef(null), handleSelect = useCallback(
+    (event) => {
+      onSelect && onSelect(event.target.files);
+    },
+    [onSelect]
+  ), handleButtonClick = useCallback(() => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.click();
+  }, []);
+  return /* @__PURE__ */ jsxs(Label, { htmlFor: inputId, children: [
+    /* @__PURE__ */ jsx(
+      HiddenInput,
+      {
+        accept: accept || "video/*",
+        ref: inputRef,
+        tabIndex: 0,
+        type: "file",
+        id: inputId,
+        onChange: handleSelect,
+        value: ""
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleButtonClick,
+        mode: "default",
+        tone: "primary",
+        style: { width: "100%" },
+        ...props
+      }
+    )
+  ] });
+};
+function UploadPlaceholder(props) {
+  const { setDialogState, readOnly, onSelect, hovering, needsSetup } = props, handleBrowse = useCallback(() => setDialogState("select-video"), [setDialogState]), handleConfigureApi = useCallback(() => setDialogState("secrets"), [setDialogState]);
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      sizing: "border",
+      tone: readOnly ? "transparent" : "inherit",
+      border: !0,
+      radius: 2,
+      paddingX: 3,
+      paddingY: 1,
+      style: hovering ? { borderColor: "transparent" } : void 0,
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "space-between",
+          gap: 4,
+          direction: ["column", "column", "row"],
+          paddingY: 2,
+          sizing: "border",
+          children: [
+            /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "flex-start", gap: 2, flex: 1, children: [
+              /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { muted: !0, children: /* @__PURE__ */ jsx(DocumentVideoIcon, {}) }) }),
+              /* @__PURE__ */ jsx(Flex, { justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: "Drag video or paste URL here" }) })
+            ] }),
+            /* @__PURE__ */ jsxs(Inline, { space: 2, children: [
+              /* @__PURE__ */ jsx(
+                FileInputButton,
+                {
+                  mode: "bleed",
+                  tone: "default",
+                  icon: UploadIcon,
+                  text: "Upload",
+                  onSelect
+                }
+              ),
+              /* @__PURE__ */ jsx(Button, { mode: "bleed", icon: SearchIcon, text: "Select", onClick: handleBrowse }),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  padding: 3,
+                  radius: 3,
+                  tone: needsSetup ? "critical" : void 0,
+                  onClick: handleConfigureApi,
+                  icon: PlugIcon,
+                  mode: "bleed",
+                  title: "Configure plugin credentials"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+const INITIAL_STATE = {
+  stagedUpload: null,
+  uploadStatus: null,
+  error: null
+};
+function Uploader(props) {
+  var _a;
+  const toast = useToast(), containerRef = useRef(null), dragEnteredEls = useRef([]), [dragState, setDragState] = useState(null), cancelUploadButton = useRef(
+    (() => {
+      const events$ = new Subject();
+      return {
+        observable: events$.asObservable(),
+        handleClick: (event) => events$.next(event)
+      };
+    })()
+  ).current, uploadRef = useRef(null), [state, dispatch] = useReducer(
+    (prev, action) => {
+      var _a2, _b;
+      switch (action.action) {
+        case "stageUpload":
+          return Object.assign({}, INITIAL_STATE, { stagedUpload: action.input });
+        case "commitUpload":
+          return Object.assign({}, prev, { uploadStatus: { progress: 0 } });
+        case "progressInfo": {
+          const { type: type2, action: _, ...payload } = action;
+          return Object.assign({}, prev, {
+            uploadStatus: {
+              ...prev.uploadStatus,
+              progress: prev.uploadStatus.progress,
+              ...payload
+            }
+          });
+        }
+        case "progress":
+          return Object.assign({}, prev, {
+            uploadStatus: {
+              ...prev.uploadStatus,
+              progress: action.percent
+            }
+          });
+        case "reset":
+        case "complete":
+          return (_a2 = uploadRef.current) == null || _a2.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
+        case "error":
+          return (_b = uploadRef.current) == null || _b.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
+        default:
+          return prev;
+      }
+    },
+    {
+      stagedUpload: null,
+      uploadStatus: null,
+      error: null
+    }
+  );
+  useEffect(() => () => {
+    uploadRef.current && !uploadRef.current.closed && uploadRef.current.unsubscribe();
+  }, []);
+  const startUpload = (settings) => {
+    const { stagedUpload } = state;
+    if (!stagedUpload || uploadRef.current)
+      return;
+    dispatch({ action: "commitUpload" });
+    let uploadObservable;
+    switch (stagedUpload.type) {
+      case "url":
+        uploadObservable = uploadUrl({
+          client: props.client,
+          url: stagedUpload.url,
+          settings
+        });
+        break;
+      case "file":
+        uploadObservable = uploadFile({
+          client: props.client,
+          file: stagedUpload.files[0],
+          settings
+        }).pipe(
+          takeUntil(
+            cancelUploadButton.observable.pipe(
+              tap(() => {
+                var _a2;
+                (_a2 = state.uploadStatus) != null && _a2.uuid && props.client.delete(state.uploadStatus.uuid);
+              })
+            )
+          )
+        );
+        break;
+    }
+    uploadRef.current = uploadObservable.subscribe({
+      next: (event) => {
+        switch (event.type) {
+          case "uuid":
+          case "file":
+          case "url":
+            dispatch({ action: "progressInfo", ...event });
+            break;
+          case "progress":
+            dispatch({ action: "progress", percent: event.percent });
+            break;
+          case "success":
+            dispatch({ action: "progress", percent: 100 }), props.onChange(
+              PatchEvent.from([
+                setIfMissing({ asset: {} }),
+                set({ _type: "reference", _weak: !0, _ref: event.asset._id }, ["asset"])
+              ])
+            );
+            break;
+        }
+      },
+      complete: () => dispatch({ action: "complete" }),
+      error: (error) => dispatch({ action: "error", error })
+    });
+  }, handleUpload = (files2) => {
+    dispatch({
+      action: "stageUpload",
+      input: { type: "file", files: files2 }
+    });
+  }, handlePaste = (event) => {
+    event.preventDefault(), event.stopPropagation();
+    const url = (event.clipboardData || window.clipboardData).getData("text");
+    if (!isValidUrl(url)) {
+      toast.push({ status: "error", title: "Invalid URL for Mux video input." });
+      return;
+    }
+    dispatch({ action: "stageUpload", input: { type: "url", url } });
+  }, handleDrop = (event) => {
+    setDragState(null), event.preventDefault(), event.stopPropagation(), extractDroppedFiles(event.nativeEvent.dataTransfer).then((files2) => {
+      dispatch({
+        action: "stageUpload",
+        input: { type: "file", files: files2 }
+      });
+    });
+  }, handleDragOver = (event) => {
+    event.preventDefault(), event.stopPropagation();
+  }, handleDragEnter = (event) => {
+    var _a2, _b;
+    event.stopPropagation(), dragEnteredEls.current.push(event.target);
+    const type2 = (_b = (_a2 = event.dataTransfer.items) == null ? void 0 : _a2[0]) == null ? void 0 : _b.type;
+    setDragState(type2 != null && type2.startsWith("video/") ? "valid" : "invalid");
+  }, handleDragLeave = (event) => {
+    event.stopPropagation();
+    const idx = dragEnteredEls.current.indexOf(event.target);
+    idx > -1 && dragEnteredEls.current.splice(idx, 1), dragEnteredEls.current.length === 0 && setDragState(null);
+  };
+  if (state.error !== null) {
+    const error = { state };
+    return /* @__PURE__ */ jsxs(Flex, { gap: 3, direction: "column", justify: "center", align: "center", children: [
+      /* @__PURE__ */ jsx(Text, { size: 5, muted: !0, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}) }),
+      /* @__PURE__ */ jsx(Text, { children: "Something went wrong" }),
+      error instanceof Error && error.message && /* @__PURE__ */ jsx(Text, { size: 1, muted: !0, children: error.message }),
+      /* @__PURE__ */ jsx(Button, { text: "Upload another file", onClick: () => dispatch({ action: "reset" }) })
+    ] });
+  }
+  if (state.uploadStatus !== null) {
+    const { uploadStatus } = state;
+    return /* @__PURE__ */ jsx(
+      UploadProgress,
+      {
+        onCancel: cancelUploadButton.handleClick,
+        progress: uploadStatus.progress,
+        filename: ((_a = uploadStatus.file) == null ? void 0 : _a.name) || uploadStatus.url
+      }
+    );
+  }
+  if (state.stagedUpload !== null)
+    return /* @__PURE__ */ jsx(
+      UploadConfiguration,
+      {
+        stagedUpload: state.stagedUpload,
+        pluginConfig: props.config,
+        secrets: props.secrets,
+        startUpload,
+        onClose: () => dispatch({ action: "reset" })
+      }
+    );
+  let tone;
+  return dragState && (tone = dragState === "valid" ? "positive" : "critical"), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      UploadCard,
+      {
+        tone,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDragEnter: handleDragEnter,
+        onPaste: handlePaste,
+        ref: containerRef,
+        children: props.asset ? /* @__PURE__ */ jsx(
+          Player,
+          {
+            readOnly: props.readOnly,
+            asset: props.asset,
+            onChange: props.onChange,
+            buttons: /* @__PURE__ */ jsx(
+              PlayerActionsMenu$1,
+              {
+                asset: props.asset,
+                dialogState: props.dialogState,
+                setDialogState: props.setDialogState,
+                onChange: props.onChange,
+                onSelect: handleUpload,
+                readOnly: props.readOnly
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx(
+          UploadPlaceholder,
+          {
+            hovering: dragState !== null,
+            onSelect: handleUpload,
+            readOnly: !!props.readOnly,
+            setDialogState: props.setDialogState,
+            needsSetup: props.needsSetup
+          }
+        )
+      }
+    ),
+    props.dialogState === "select-video" && /* @__PURE__ */ jsx(
+      InputBrowser,
+      {
+        asset: props.asset,
+        onChange: props.onChange,
+        setDialogState: props.setDialogState
+      }
+    )
+  ] });
+}
+const Input = (props) => {
+  var _a;
+  const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset), poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0), [dialogState, setDialogState] = useDialogState(), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
+  if (error)
+    throw error;
+  const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ErrorBoundaryCard$1, { schemaType: props.schemaType, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsx(InputFallback, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsx(Onboard, { setDialogState }) : /* @__PURE__ */ jsx(
+      Uploader,
+      {
+        ...props,
+        config: props.config,
+        onChange: props.onChange,
+        client,
+        secrets: secretDocumentValues.value.secrets,
+        asset: assetDocumentValues.value,
+        dialogState,
+        setDialogState,
+        needsSetup: secretDocumentValues.value.needsSetup
+      }
+    ),
+    dialogState === "secrets" && /* @__PURE__ */ jsx(
+      ConfigureApi$1,
+      {
+        setDialogState,
+        secrets: secretDocumentValues.value.secrets
+      }
+    )
+  ] }) }) }) });
+};
+var Input$1 = memo(Input);
+function muxVideoCustomRendering(config) {
+  return {
+    components: {
+      input: (props) => /* @__PURE__ */ jsx(Input$1, { config: { ...config, ...props.schemaType.options }, ...props })
+    },
+    preview: {
+      select: {
+        filename: "asset.filename",
+        playbackId: "asset.playbackId",
+        status: "asset.status",
+        assetId: "asset.assetId",
+        thumbTime: "asset.thumbTime",
+        data: "asset.data"
+      },
+      prepare: (asset) => {
+        const { filename, playbackId, status } = asset;
+        return {
+          title: filename || playbackId || "",
+          subtitle: status ? `status: ${status}` : null,
+          media: asset.playbackId ? /* @__PURE__ */ jsx(VideoThumbnail, { asset, width: 64 }) : null
+        };
+      }
+    }
+  };
+}
+const muxVideo = {
+  name: "mux.video",
+  type: "object",
+  title: "Video asset reference",
+  fields: [
+    {
+      title: "Video",
+      name: "asset",
+      type: "reference",
+      weak: !0,
+      to: [{ type: "mux.videoAsset" }]
+    }
+  ]
+}, muxVideoAsset = {
+  name: "mux.videoAsset",
+  type: "object",
+  title: "Video asset",
+  fields: [
+    {
+      type: "string",
+      name: "status"
+    },
+    {
+      type: "string",
+      name: "assetId"
+    },
+    {
+      type: "string",
+      name: "playbackId"
+    },
+    {
+      type: "string",
+      name: "filename"
+    },
+    {
+      type: "number",
+      name: "thumbTime"
+    }
+  ]
+}, defaultConfig = {
+  mp4_support: "none",
+  encoding_tier: "smart",
+  max_resolution_tier: "1080p",
+  normalize_audio: !1,
+  defaultSigned: !1,
+  tool: DEFAULT_TOOL_CONFIG
+}, muxInput = definePlugin((userConfig) => {
+  const config = { ...defaultConfig, ...userConfig || {} };
+  return {
+    name: "mux-input",
+    schema: {
+      types: [
+        muxVideoAsset,
+        {
+          ...muxVideo,
+          ...muxVideoCustomRendering(config)
+        }
+      ]
+    },
+    tools: config.tool === !1 ? void 0 : [createStudioTool(config)]
+  };
+});
+export {
+  defaultConfig,
+  muxInput
+};
+//# sourceMappingURL=index.esm.js.map