sanity-plugin-mux-input 1.2.0-main.3 → 1.2.0-main.4

package/lib/cjs/index.js

@@ -1,11 +1,26 @@
 var $dyHF6$reactjsxruntime = require("react/jsx-runtime");
-var $dyHF6$sanityui = require("@sanity/ui");
 var $dyHF6$react = require("react");
-var $dyHF6$styledcomponents = require("styled-components");
 var $dyHF6$sanity = require("sanity");
+var $dyHF6$sanityui = require("@sanity/ui");
 var $dyHF6$scrollintoviewifneeded = require("scroll-into-view-if-needed");
 var $dyHF6$suspendreact = require("suspend-react");
 var $dyHF6$useerrorboundary = require("use-error-boundary");
+var $dyHF6$sanity_unstable = require("sanity/_unstable");
+var $dyHF6$swr = require("swr");
+var $dyHF6$rxjs = require("rxjs");
+var $dyHF6$rxjsoperators = require("rxjs/operators");
+var $dyHF6$sanityform = require("sanity/form");
+var $dyHF6$sanityuuid = require("@sanity/uuid");
+var $dyHF6$muxupchunk = require("@mux/upchunk");
+var $dyHF6$reachautoid = require("@reach/auto-id");
+var $dyHF6$sanityicons = require("@sanity/icons");
+var $dyHF6$motion = require("motion");
+var $dyHF6$styledcomponents = require("styled-components");
+var $dyHF6$usedevicepixelratio = require("use-device-pixel-ratio");
+var $dyHF6$jsonwebtokenesmsign = require("jsonwebtoken-esm/sign");
+var $dyHF6$muxplaybackcore = require("@mux/playback-core");
+var $dyHF6$mediachromedistreact = require("media-chrome/dist/react");
+var $dyHF6$reactis = require("react-is");
 
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
@@ -13,122 +28,12 @@ function $parcel$export(e, n, v, s) {
 function $parcel$interopDefault(a) {
   return a && a.__esModule ? a.default : a;
 }
-var $parcel$global =
-typeof globalThis !== 'undefined'
-  ? globalThis
-  : typeof self !== 'undefined'
-  ? self
-  : typeof window !== 'undefined'
-  ? window
-  : typeof global !== 'undefined'
-  ? global
-  : {};
-var $parcel$modules = {};
-var $parcel$inits = {};
-
-var parcelRequire = $parcel$global["parcelRequire4c51"];
-if (parcelRequire == null) {
-  parcelRequire = function(id) {
-    if (id in $parcel$modules) {
-      return $parcel$modules[id].exports;
-    }
-    if (id in $parcel$inits) {
-      var init = $parcel$inits[id];
-      delete $parcel$inits[id];
-      var module = {id: id, exports: {}};
-      $parcel$modules[id] = module;
-      init.call(module.exports, module, module.exports);
-      return module.exports;
-    }
-    var err = new Error("Cannot find module '" + id + "'");
-    err.code = 'MODULE_NOT_FOUND';
-    throw err;
-  };
-
-  parcelRequire.register = function register(id, init) {
-    $parcel$inits[id] = init;
-  };
-
-  $parcel$global["parcelRequire4c51"] = parcelRequire;
-}
-parcelRequire.register("bf6Cb", function(module, exports) {
-
-$parcel$export(module.exports, "name", () => $2ffcb7ef2a4a67d0$export$a8ff84c12d48cfa6);
-$parcel$export(module.exports, "cacheNs", () => $2ffcb7ef2a4a67d0$export$13cdb654d47e0703);
-$parcel$export(module.exports, "muxSecretsDocumentId", () => $2ffcb7ef2a4a67d0$export$64952397958089dd);
-const $2ffcb7ef2a4a67d0$export$a8ff84c12d48cfa6 = "mux-input";
-const $2ffcb7ef2a4a67d0$export$13cdb654d47e0703 = "sanity-plugin-mux-input";
-const $2ffcb7ef2a4a67d0$export$64952397958089dd = "secrets.mux";
-
-});
-
-parcelRequire.register("3PT7X", function(module, exports) {
-
-$parcel$export(module.exports, "AspectRatioCard", () => $5f180d117773fee7$export$f0c88bc5a320387d);
-$parcel$export(module.exports, "InputFallback", () => $5f180d117773fee7$export$18fe723e8683ca03);
-
-
-
-
-const $5f180d117773fee7$export$f0c88bc5a320387d = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
-  aspect-ratio: 16 / 9;
-  position: relative;
-  width: 100%;
-`;
-const $5f180d117773fee7$export$18fe723e8683ca03 = ()=>{
-    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
-        style: {
-            padding: 1
-        },
-        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
-            shadow: 1,
-            sizing: "border",
-            style: {
-                aspectRatio: "16/9",
-                width: "100%",
-                borderRadius: "1px"
-            },
-            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
-                align: "center",
-                direction: "column",
-                height: "fill",
-                justify: "center",
-                children: [
-                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Spinner), {
-                        muted: true
-                    }),
-                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
-                        marginTop: 3,
-                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
-                            align: "center",
-                            muted: true,
-                            size: 1,
-                            children: "Loading\u2026"
-                        })
-                    })
-                ]
-            })
-        })
-    });
-};
-
-});
 
-parcelRequire.register("4M4Xk", function(module, exports) {
-module.exports = Promise.resolve(require("./Input.832bb406.js")).then(()=>parcelRequire("lo0FW"));
-
-});
-
-parcelRequire.register("2vLfV", function(module, exports) {
-module.exports = Promise.resolve(require("./Preview.3e13819d.js")).then(()=>parcelRequire("cjJaV"));
-
-});
-
-
-$parcel$export(module.exports, "Input", () => $329a1cedcedb1349$export$f5b8910cec6cf069);
-$parcel$export(module.exports, "Preview", () => $329a1cedcedb1349$export$133773870222880f);
 $parcel$export(module.exports, "defaultConfig", () => $329a1cedcedb1349$export$f84bd70098573c5c);
 $parcel$export(module.exports, "muxInput", () => $329a1cedcedb1349$export$4d2e76c338bb9fbd);
+$parcel$export(module.exports, "Input", () => $6bca891f5dd9dfc9$export$2e2bcd8739ae039);
+$parcel$export(module.exports, "Preview", () => $cbaf0acf64ca3573$export$2e2bcd8739ae039);
+
 
 
 
@@ -137,9 +42,11 @@ $parcel$export(module.exports, "muxInput", () => $329a1cedcedb1349$export$4d2e76
 
 
 
+const $2ffcb7ef2a4a67d0$export$a8ff84c12d48cfa6 = "mux-input";
+const $2ffcb7ef2a4a67d0$export$13cdb654d47e0703 = "sanity-plugin-mux-input";
+const $2ffcb7ef2a4a67d0$export$64952397958089dd = "secrets.mux";
 
 
-var $bf6Cb = parcelRequire("bf6Cb");
 function $440e5e6a7a1a5e7d$var$ErrorBoundaryCard(props) {
     const { children: children , schemaType: schemaType  } = props;
     const { push: pushToast  } = (0, $dyHF6$sanityui.useToast)();
@@ -195,7 +102,7 @@ function $440e5e6a7a1a5e7d$var$ErrorBoundaryCard(props) {
     const handleRetry = (0, $dyHF6$react.useCallback)(()=>{
         // Purge request cache before retrying, otherwise the cached errors will rethrow
         (0, $dyHF6$suspendreact.clear)([
-            (0, $bf6Cb.name)
+            (0, $2ffcb7ef2a4a67d0$export$a8ff84c12d48cfa6)
         ]);
         reset();
     }, [
@@ -230,7 +137,7 @@ function $440e5e6a7a1a5e7d$var$ErrorBoundaryCard(props) {
                         children: [
                             "The ",
                             /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("code", {
-                                children: (0, $bf6Cb.name)
+                                children: (0, $2ffcb7ef2a4a67d0$export$a8ff84c12d48cfa6)
                             }),
                             " plugin crashed"
                         ]
@@ -262,77 +169,3758 @@ var $440e5e6a7a1a5e7d$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $dyHF6$react.me
 
 
 
-var $3PT7X = parcelRequire("3PT7X");
 
 
-const $75523cdda380b780$export$a8ff84c12d48cfa6 = "mux.videoAsset";
-const $75523cdda380b780$var$videoAsset = (0, $dyHF6$sanity.defineField)({
-    name: $75523cdda380b780$export$a8ff84c12d48cfa6,
-    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"
-        }, 
-    ]
-});
-var $75523cdda380b780$export$2e2bcd8739ae039 = $75523cdda380b780$var$videoAsset;
 
 
-const $ac55e63956aa9e84$export$a8ff84c12d48cfa6 = "mux.video";
-const $ac55e63956aa9e84$var$video = (0, $dyHF6$sanity.defineField)({
-    name: $ac55e63956aa9e84$export$a8ff84c12d48cfa6,
-    type: "object",
-    title: "Video asset reference",
-    fields: [
-        {
-            title: "Video",
-            name: "asset",
-            type: "reference",
-            weak: true,
-            to: [
-                {
-                    type: (0, $75523cdda380b780$export$a8ff84c12d48cfa6)
-                }
-            ]
-        }, 
-    ]
-});
-var $ac55e63956aa9e84$export$2e2bcd8739ae039 = $ac55e63956aa9e84$var$video;
+const $eef844dd0892040d$var$path = [
+    "assetId",
+    "data",
+    "playbackId",
+    "status",
+    "thumbTime",
+    "filename"
+];
+const $eef844dd0892040d$export$e11a382d55e07f75 = (asset)=>(0, $dyHF6$sanity_unstable.useDocumentValues)((0, $dyHF6$sanity.isReference)(asset) ? asset._ref : "", $eef844dd0892040d$var$path);
 
 
 
+function $af23ed16e7325a21$export$573903f1c655c034() {
+    return (0, $dyHF6$react.useState)(false);
+}
 
 
-function $0c6ceed5d95aa3e9$export$c8119cbbd1c84da1(props) {
-    return (0, $dyHF6$sanity.isObjectSchemaType)(props.schemaType) && props.schemaType.type?.name === (0, $ac55e63956aa9e84$export$a8ff84c12d48cfa6);
+
+
+
+const $9427a85db5895988$export$fd270df25d7dbb88 = (asset)=>{
+    const client = (0, $dyHF6$sanity.useClient)();
+    const projectId = (0, $dyHF6$sanity.useProjectId)();
+    const dataset = (0, $dyHF6$sanity.useDataset)();
+    const shouldFetch = (0, $dyHF6$react.useMemo)(()=>!!asset?.assetId && (asset?.status === "preparing" || asset?.data?.static_renditions?.status === "preparing"), [
+        asset?.assetId,
+        asset?.data?.static_renditions?.status,
+        asset?.status
+    ]);
+    return (0, ($parcel$interopDefault($dyHF6$swr)))(shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null, async ()=>{
+        const { data: data  } = await client.request({
+            url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
+            withCredentials: true,
+            method: "GET"
+        });
+        client.patch(asset._id).set({
+            status: data.status,
+            data: data
+        }).commit({
+            returnDocuments: false
+        });
+    }, {
+        refreshInterval: 2000,
+        refreshWhenHidden: true,
+        dedupingInterval: 1000
+    });
+};
+
+
+
+
+
+const $8a0ef7d2f7c4ca7e$var$path = [
+    "token",
+    "secretKey",
+    "enableSignedUrls",
+    "signingKeyId",
+    "signingKeyPrivate"
+];
+const $8a0ef7d2f7c4ca7e$export$4c2801830a129eb = ()=>{
+    const { error: error , isLoading: isLoading , value: value  } = (0, $dyHF6$sanity_unstable.useDocumentValues)((0, $2ffcb7ef2a4a67d0$export$64952397958089dd), $8a0ef7d2f7c4ca7e$var$path);
+    const cache = (0, $dyHF6$react.useMemo)(()=>{
+        const exists = Boolean(value);
+        const secrets = {
+            token: value?.token || null,
+            secretKey: value?.secretKey || null,
+            enableSignedUrls: value?.enableSignedUrls || false,
+            signingKeyId: value?.signingKeyId || null,
+            signingKeyPrivate: value?.signingKeyPrivate || null
+        };
+        return {
+            isInitialSetup: !exists,
+            needsSetup: !secrets?.token || !secrets?.secretKey,
+            secrets: secrets
+        };
+    }, [
+        value
+    ]);
+    return {
+        error: error,
+        isLoading: isLoading,
+        value: cache
+    };
+};
+
+
+
+
+
+
+
+
+
+
+
+
+function $3dde8b7caa07e0e7$export$ad6eab20b4b3876f(uuid, uploadUrl, source) {
+    return new (0, $dyHF6$rxjs.Observable)((subscriber)=>{
+        const upchunk = $dyHF6$muxupchunk.createUpload({
+            endpoint: uploadUrl,
+            file: source,
+            chunkSize: 30720
+        });
+        const successHandler = ()=>{
+            subscriber.next({
+                type: "success",
+                id: uuid
+            });
+            subscriber.complete();
+        };
+        const errorHandler = (data)=>subscriber.error(new Error(data.detail.message));
+        const progressHandler = (data)=>{
+            return subscriber.next({
+                type: "progress",
+                percent: data.detail
+            });
+        };
+        const offlineHandler = ()=>{
+            upchunk.pause();
+            subscriber.next({
+                type: "pause",
+                id: uuid
+            });
+        };
+        const onlineHandler = ()=>{
+            upchunk.resume();
+            subscriber.next({
+                type: "resume",
+                id: uuid
+            });
+        };
+        upchunk.on("success", successHandler);
+        upchunk.on("error", errorHandler);
+        upchunk.on("progress", progressHandler);
+        upchunk.on("offline", offlineHandler);
+        upchunk.on("online", onlineHandler);
+        return ()=>upchunk.abort();
+    });
 }
-function $0c6ceed5d95aa3e9$export$3542974c36e4d83f(props) {
-    return props.schemaType.type?.name === (0, $ac55e63956aa9e84$export$a8ff84c12d48cfa6);
+
+
+function $a0485042ac477352$export$df987b50509121ea(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/assets/${dataset}/${assetId}`,
+        withCredentials: true,
+        method: "DELETE"
+    });
+}
+function $a0485042ac477352$export$da446a5ee2572b7(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/assets/${dataset}/data/${assetId}`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+
+
+
+function $58acdddf66edce65$export$f16c6d66b9790f06(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
+    const doc = {
+        _id: "secrets.mux",
+        _type: "mux.apiKey",
+        token: token,
+        secretKey: secretKey,
+        enableSignedUrls: enableSignedUrls,
+        signingKeyId: signingKeyId,
+        signingKeyPrivate: signingKeyPrivate
+    };
+    return client.createOrReplace(doc);
+}
+function $58acdddf66edce65$export$21cc0cab779cfac1(client) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/signing-keys/${dataset}`,
+        withCredentials: true,
+        method: "POST"
+    });
+}
+function $58acdddf66edce65$export$3a1df1322191b3ef(client) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/secrets/${dataset}/test`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+async function $58acdddf66edce65$export$f5836111430d17bc(client, signingKeyId, signingKeyPrivate) {
+    if (!(signingKeyId && signingKeyPrivate)) return false;
+    const { dataset: dataset  } = client.config();
+    try {
+        const res = await client.request({
+            url: `/addons/mux/signing-keys/${dataset}/${signingKeyId}`,
+            withCredentials: true,
+            method: "GET"
+        });
+        //
+        // if this signing key is valid it will return { data: { id: 'xxxx' } }
+        //
+        return !!(res.data && res.data.id);
+    } catch (e) {
+        console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid");
+        return false;
+    }
+}
+function $58acdddf66edce65$export$7d1f83854429bc73(client) {
+    const { dataset: dataset  } = client.config();
+    return (0, $dyHF6$rxjs.defer)(()=>client.observable.request({
+            url: `/addons/mux/secrets/${dataset}/test`,
+            withCredentials: true,
+            method: "GET"
+        }));
+}
+
+
+function $4a210fa13f9688e9$export$5130fb4c263997a4(client, uuid) {
+    return client.observable.request({
+        url: `/addons/mux/uploads/${client.clientConfig.dataset}/${uuid}`,
+        withCredentials: true,
+        method: "DELETE"
+    });
+}
+function $4a210fa13f9688e9$export$f35af194eb27b25f(config, client, url, options = {}) {
+    return $4a210fa13f9688e9$var$testUrl(url).pipe((0, $dyHF6$rxjsoperators.switchMap)((validUrl)=>{
+        return (0, $dyHF6$rxjs.concat)((0, $dyHF6$rxjs.of)({
+            type: "url",
+            url: validUrl
+        }), (0, $58acdddf66edce65$export$7d1f83854429bc73)(client).pipe((0, $dyHF6$rxjsoperators.switchMap)((json)=>{
+            if (!json || !json.status) return (0, $dyHF6$rxjs.throwError)(new Error("Invalid credentials"));
+            const uuid = (0, $dyHF6$sanityuuid.uuid)();
+            const { enableSignedUrls: enableSignedUrls  } = options;
+            const muxBody = {
+                input: validUrl,
+                playback_policy: [
+                    enableSignedUrls ? "signed" : "public"
+                ],
+                mp4_support: config.mp4_support
+            };
+            const query = {
+                muxBody: JSON.stringify(muxBody),
+                filename: validUrl.split("/").slice(-1)[0]
+            };
+            const dataset = client.clientConfig.dataset;
+            return (0, $dyHF6$rxjs.defer)(()=>client.observable.request({
+                    url: `/addons/mux/assets/${dataset}`,
+                    withCredentials: true,
+                    method: "POST",
+                    headers: {
+                        "MUX-Proxy-UUID": uuid,
+                        "Content-Type": "application/json"
+                    },
+                    query: query
+                })).pipe((0, $dyHF6$rxjsoperators.mergeMap)((result)=>{
+                const asset = result && result.results && result.results[0] && result.results[0].document || null;
+                if (!asset) return (0, $dyHF6$rxjs.throwError)(new Error("No asset document returned"));
+                return (0, $dyHF6$rxjs.of)({
+                    type: "success",
+                    id: uuid,
+                    asset: asset
+                });
+            }));
+        })));
+    }));
+}
+function $4a210fa13f9688e9$export$a5575dbeeffdad98(config, client, file, options = {}) {
+    return $4a210fa13f9688e9$var$testFile(file).pipe((0, $dyHF6$rxjsoperators.switchMap)((fileOptions)=>{
+        return (0, $dyHF6$rxjs.concat)((0, $dyHF6$rxjs.of)({
+            type: "file",
+            file: fileOptions
+        }), (0, $58acdddf66edce65$export$7d1f83854429bc73)(client).pipe((0, $dyHF6$rxjsoperators.switchMap)((json)=>{
+            if (!json || !json.status) return (0, $dyHF6$rxjs.throwError)(new Error("Invalid credentials"));
+            const uuid = (0, $dyHF6$sanityuuid.uuid)();
+            const { enableSignedUrls: enableSignedUrls  } = options;
+            const body = {
+                mp4_support: config.mp4_support,
+                playback_policy: [
+                    enableSignedUrls ? "signed" : "public"
+                ]
+            };
+            return (0, $dyHF6$rxjs.concat)((0, $dyHF6$rxjs.of)({
+                type: "uuid",
+                uuid: uuid
+            }), (0, $dyHF6$rxjs.defer)(()=>client.observable.request({
+                    url: `/addons/mux/uploads/${client.clientConfig.dataset}`,
+                    withCredentials: true,
+                    method: "POST",
+                    headers: {
+                        "MUX-Proxy-UUID": uuid,
+                        "Content-Type": "application/json"
+                    },
+                    body: body
+                })).pipe((0, $dyHF6$rxjsoperators.mergeMap)((result)=>{
+                return (0, $3dde8b7caa07e0e7$export$ad6eab20b4b3876f)(uuid, result.upload.url, file).pipe(// eslint-disable-next-line no-warning-comments
+                // @TODO type the observable events
+                // eslint-disable-next-line max-nested-callbacks
+                (0, $dyHF6$rxjsoperators.mergeMap)((event)=>{
+                    if (event.type !== "success") return (0, $dyHF6$rxjs.of)(event);
+                    return (0, $dyHF6$rxjs.from)($4a210fa13f9688e9$var$updateAssetDocumentFromUpload(client, uuid)).pipe(// eslint-disable-next-line max-nested-callbacks
+                    (0, $dyHF6$rxjsoperators.mergeMap)((doc)=>(0, $dyHF6$rxjs.of)({
+                            ...event,
+                            asset: doc
+                        })));
+                }), // eslint-disable-next-line max-nested-callbacks
+                (0, $dyHF6$rxjsoperators.catchError)((err)=>{
+                    // Delete asset document
+                    return $4a210fa13f9688e9$export$5130fb4c263997a4(client, uuid).pipe((0, $dyHF6$rxjsoperators.mergeMapTo)((0, $dyHF6$rxjs.throwError)(err)));
+                }));
+            })));
+        })));
+    }));
+}
+function $4a210fa13f9688e9$export$38276c014c550f86(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/uploads/${dataset}/${assetId}`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+function $4a210fa13f9688e9$var$pollUpload(client, uuid) {
+    const maxTries = 10;
+    let pollInterval;
+    let tries = 0;
+    let assetId;
+    let upload;
+    return new Promise((resolve, reject)=>{
+        pollInterval = setInterval(async ()=>{
+            try {
+                upload = await $4a210fa13f9688e9$export$38276c014c550f86(client, uuid);
+            } catch (err) {
+                reject(err);
+                return;
+            }
+            assetId = upload && upload.data && upload.data.asset_id;
+            if (assetId) {
+                clearInterval(pollInterval);
+                resolve(upload);
+            }
+            if (tries > maxTries) {
+                clearInterval(pollInterval);
+                reject(new Error("Upload did not finish"));
+            }
+            tries++;
+        }, 2000);
+    });
+}
+async function $4a210fa13f9688e9$var$updateAssetDocumentFromUpload(client, uuid) {
+    let upload;
+    let asset;
+    try {
+        upload = await $4a210fa13f9688e9$var$pollUpload(client, uuid);
+    } catch (err) {
+        return Promise.reject(err);
+    }
+    try {
+        asset = await (0, $a0485042ac477352$export$da446a5ee2572b7)(client, upload.data.asset_id);
+    } catch (err1) {
+        return Promise.reject(err1);
+    }
+    const doc = {
+        _id: uuid,
+        _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(()=>{
+        return doc;
+    });
+}
+function $4a210fa13f9688e9$var$testFile(file) {
+    if (typeof window !== "undefined" && file instanceof window.File) {
+        const fileOptions = $4a210fa13f9688e9$var$optionsFromFile({}, file);
+        return (0, $dyHF6$rxjs.of)(fileOptions);
+    }
+    return (0, $dyHF6$rxjs.throwError)(new Error("Invalid file"));
+}
+function $4a210fa13f9688e9$var$testUrl(url) {
+    const error = new Error("Invalid URL");
+    if (typeof url !== "string") return (0, $dyHF6$rxjs.throwError)(error);
+    let parsed;
+    try {
+        parsed = new URL(url);
+    } catch (err) {
+        return (0, $dyHF6$rxjs.throwError)(error);
+    }
+    if (parsed && !parsed.protocol.match(/http:|https:/)) return (0, $dyHF6$rxjs.throwError)(error);
+    return (0, $dyHF6$rxjs.of)(url);
+}
+function $4a210fa13f9688e9$var$optionsFromFile(opts, file) {
+    if (typeof window === "undefined" || !(file instanceof window.File)) return opts;
+    return {
+        name: opts.preserveFilename === false ? undefined : file.name,
+        type: file.type
+    };
+}
+
+
+function $94a513daa91cd04e$export$73f6d6d8d794f645(dataTransfer) {
+    const files = Array.from(dataTransfer.files || []);
+    const items = Array.from(dataTransfer.items || []);
+    if (files && files.length > 0) return Promise.resolve(files);
+    return $94a513daa91cd04e$var$normalizeItems(items).then((arr)=>arr.flat());
+}
+function $94a513daa91cd04e$var$normalizeItems(items) {
+    return Promise.all(items.map((item)=>{
+        // directory
+        if (item.kind === "file" && item.webkitGetAsEntry) {
+            let entry;
+            // Edge throws
+            try {
+                entry = item.webkitGetAsEntry();
+            } catch (err) {
+                return [
+                    item.getAsFile()
+                ];
+            }
+            if (!entry) return [];
+            return entry.isDirectory ? $94a513daa91cd04e$var$walk(entry) : [
+                item.getAsFile()
+            ];
+        }
+        // file
+        if (item.kind === "file") {
+            const file = item.getAsFile();
+            return Promise.resolve(file ? [
+                file
+            ] : []);
+        }
+        // others
+        return new Promise((resolve)=>item.getAsString(resolve)).then((str)=>str ? [
+                new File([
+                    str
+                ], "unknown.txt", {
+                    type: item.type
+                })
+            ] : []);
+    }));
+}
+function $94a513daa91cd04e$var$isFile(entry) {
+    return entry.isFile;
+}
+function $94a513daa91cd04e$var$isDirectory(entry) {
+    return entry.isDirectory;
+}
+function $94a513daa91cd04e$var$walk(entry) {
+    if ($94a513daa91cd04e$var$isFile(entry)) return new Promise((resolve)=>entry.file(resolve)).then((file)=>[
+            file
+        ]);
+    if ($94a513daa91cd04e$var$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($94a513daa91cd04e$var$walk)).then((arr)=>arr.flat()));
+    }
+    return Promise.resolve([]);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $edbbfc11873e0f23$export$9c7ae676ac45430a = "secrets.mux";
+function $edbbfc11873e0f23$export$e6f48a1ef9de02f7(client) {
+    const { projectId: projectId , dataset: dataset  } = client.config();
+    return (0, $dyHF6$suspendreact.suspend)(async ()=>{
+        const data = await client.fetch(/* groq */ `*[_id == $_id][0]{
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      }`, {
+            _id: $edbbfc11873e0f23$export$9c7ae676ac45430a
+        });
+        return {
+            token: data?.token || null,
+            secretKey: data?.secretKey || null,
+            enableSignedUrls: Boolean(data?.enableSignedUrls) || false,
+            signingKeyId: data?.signingKeyId || null,
+            signingKeyPrivate: data?.signingKeyPrivate || null
+        };
+    }, [
+        (0, $2ffcb7ef2a4a67d0$export$13cdb654d47e0703),
+        $edbbfc11873e0f23$export$9c7ae676ac45430a,
+        projectId,
+        dataset
+    ]);
 }
 
 
 
-const $329a1cedcedb1349$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $dyHF6$react.lazy)(()=>(parcelRequire("4M4Xk")));
+function $d8ba7896129c9d6c$export$87b96baf1080652a(client, playbackId, aud, payload) {
+    const { signingKeyId: signingKeyId , signingKeyPrivate: signingKeyPrivate  } = (0, $edbbfc11873e0f23$export$e6f48a1ef9de02f7)(client);
+    if (!signingKeyId) throw new TypeError("Missing signingKeyId");
+    if (!signingKeyPrivate) throw new TypeError("Missing signingKeyPrivate");
+    const { default: sign  } = (0, $dyHF6$suspendreact.suspend)(()=>$dyHF6$jsonwebtokenesmsign, [
+        "sanity-plugin-mux-input",
+        "jsonwebtoken-esm/sign"
+    ]);
+    return sign(payload ? JSON.parse(JSON.stringify(payload, (_, v)=>v ?? undefined)) : {}, atob(signingKeyPrivate), {
+        algorithm: "RS256",
+        keyid: signingKeyId,
+        audience: aud,
+        subject: playbackId,
+        noTimestamp: true,
+        expiresIn: "12h"
+    });
+}
+
+
+function $96cfb4479805b243$export$bdfa34d24bb44333(asset) {
+    if (!asset?.playbackId) {
+        console.error("Asset is missing a playbackId", {
+            asset: asset
+        });
+        throw new TypeError(`Missing playbackId`);
+    }
+    return asset.playbackId;
+}
+
+
+function $5bbe48978fdc9616$export$f7d2546fac75bbd(asset) {
+    return asset.data?.playback_ids?.[0]?.policy ?? "public";
+}
+
+
+function $d116a96f272a1c22$export$6adb108e2a577699({ asset: asset , client: client , height: height , width: width , start: start = asset.thumbTime ? Math.max(0, asset.thumbTime - 2.5) : 0 , end: end = start + 5 , fps: fps = 15  }) {
+    const params = {
+        height: height,
+        width: width,
+        start: start,
+        end: end,
+        fps: fps
+    };
+    const playbackId = (0, $96cfb4479805b243$export$bdfa34d24bb44333)(asset);
+    let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v)=>v ?? undefined)));
+    if ((0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $d8ba7896129c9d6c$export$87b96baf1080652a)(client, playbackId, "g", params);
+        searchParams = new URLSearchParams({
+            token: token
+        });
+    }
+    return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
+}
+
+
+
+
+
+
+function $2ed67348dc6c5cb5$export$8081e7a11b9f1345({ asset: asset , client: client , fit_mode: fit_mode , height: height , time: time = asset.thumbTime , width: width  }) {
+    const params = {
+        fit_mode: fit_mode,
+        height: height,
+        time: time,
+        width: width
+    };
+    const playbackId = (0, $96cfb4479805b243$export$bdfa34d24bb44333)(asset);
+    let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v)=>v ?? undefined)));
+    if ((0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $d8ba7896129c9d6c$export$87b96baf1080652a)(client, playbackId, "t", params);
+        searchParams = new URLSearchParams({
+            token: token
+        });
+    }
+    return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
+}
+
+
+const $6de6709202a3b061$var$mediaDimensions = {
+    aspect: 16 / 9
+};
+const $6de6709202a3b061$var$ImageLoader = /*#__PURE__*/ (0, $dyHF6$react.memo)(function ImageLoader({ alt: alt , src: src , height: height , width: width , aspectRatio: aspectRatio  }) {
+    (0, $dyHF6$suspendreact.suspend)(async ()=>{
+        const img = new Image(width, height);
+        img.decoding = "async";
+        img.src = src;
+        await img.decode();
+    }, [
+        "sanity-plugin-mux-input",
+        "image",
+        src
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("img", {
+        alt: alt,
+        src: src,
+        height: height,
+        width: width,
+        style: {
+            aspectRatio: aspectRatio
+        }
+    });
+});
+const $6de6709202a3b061$var$VideoMediaPreview = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanity_unstable.MediaPreview))`
+  img {
+    object-fit: cover;
+  }
+`;
+const $6de6709202a3b061$var$VideoMediaPreviewSignedSubtitle = ({ solo: solo  })=>{
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Inline), {
+        space: 1,
+        style: {
+            marginTop: solo ? "-1.35em" : undefined,
+            marginBottom: solo ? undefined : "0.35rem"
+        },
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityicons.LockIcon), {}),
+            "Signed playback policy"
+        ]
+    });
+};
+const $6de6709202a3b061$var$PosterImage = ({ asset: asset , height: height , width: width , showTip: showTip  })=>{
+    const client = (0, $dyHF6$sanity.useClient)();
+    const src = (0, $2ed67348dc6c5cb5$export$8081e7a11b9f1345)({
+        asset: asset,
+        client: client,
+        height: height,
+        width: width,
+        fit_mode: "smartcrop"
+    });
+    const subtitle = (0, $dyHF6$react.useMemo)(()=>showTip && (0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed" ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$VideoMediaPreviewSignedSubtitle, {
+            solo: true
+        }) : undefined, [
+        asset,
+        showTip
+    ]);
+    // eslint-disable-next-line no-warning-comments
+    // @TODO support setting the alt text in the schema, like how we deal with images
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$VideoMediaPreview, {
+        mediaDimensions: $6de6709202a3b061$var$mediaDimensions,
+        subtitle: subtitle,
+        title: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$reactjsxruntime.Fragment), {
+            children: null
+        }),
+        media: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$ImageLoader, {
+            alt: "",
+            src: src,
+            height: height,
+            width: width
+        })
+    });
+};
+const $6de6709202a3b061$export$bd4b73f15688a160 = /*#__PURE__*/ (0, $dyHF6$react.memo)(function VideoThumbnail({ asset: asset , width: width , showTip: showTip  }) {
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error  } = (0, $dyHF6$useerrorboundary.useErrorBoundary)();
+    const height = Math.round(width * 9 / 16);
+    const subtitle = (0, $dyHF6$react.useMemo)(()=>showTip && (0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed" ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$VideoMediaPreviewSignedSubtitle, {}) : undefined, [
+        showTip,
+        asset
+    ]);
+    if (didCatch) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$VideoMediaPreview, {
+        subtitle: error.message,
+        mediaDimensions: $6de6709202a3b061$var$mediaDimensions,
+        title: "Error when loading thumbnail",
+        media: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+            radius: 2,
+            height: "fill",
+            style: {
+                position: "relative",
+                width: "100%"
+            },
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0
+                },
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityicons.UnknownIcon), {})
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)(ErrorBoundary, {
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$react.Suspense), {
+            fallback: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$VideoMediaPreview, {
+                isPlaceholder: true,
+                title: "Loading thumbnail...",
+                subtitle: subtitle,
+                mediaDimensions: $6de6709202a3b061$var$mediaDimensions
+            }),
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$PosterImage, {
+                showTip: showTip,
+                asset: asset,
+                height: height,
+                width: width
+            })
+        })
+    });
+});
+const $6de6709202a3b061$var$AnimatedVideoMediaPreview = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanity_unstable.MediaPreview))`
+  img {
+    object-fit: contain;
+  }
+`;
+const $6de6709202a3b061$var$AnimatedPosterImage = ({ asset: asset , width: width  })=>{
+    const client = (0, $dyHF6$sanity.useClient)();
+    const src = (0, $d116a96f272a1c22$export$6adb108e2a577699)({
+        asset: asset,
+        client: client,
+        width: width
+    });
+    // eslint-disable-next-line no-warning-comments
+    // @TODO support setting the alt text in the schema, like how we deal with images
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$AnimatedVideoMediaPreview, {
+        withBorder: false,
+        mediaDimensions: $6de6709202a3b061$var$mediaDimensions,
+        media: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$ImageLoader, {
+            alt: "",
+            src: src,
+            width: width,
+            aspectRatio: "16:9"
+        })
+    });
+};
+const $6de6709202a3b061$export$357b57aa2db6117e = /*#__PURE__*/ (0, $dyHF6$react.memo)(function AnimatedVideoThumbnail({ asset: asset , width: width  }) {
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch  } = (0, $dyHF6$useerrorboundary.useErrorBoundary)();
+    if (didCatch) return null;
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)(ErrorBoundary, {
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$react.Suspense), {
+            fallback: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$FancyBackdrop, {
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$VideoMediaPreview, {
+                    mediaDimensions: $6de6709202a3b061$var$mediaDimensions,
+                    withBorder: false,
+                    media: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Spinner), {
+                        muted: true
+                    })
+                })
+            }),
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                height: "fill",
+                tone: "transparent",
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($6de6709202a3b061$var$AnimatedPosterImage, {
+                    asset: asset,
+                    width: width
+                })
+            })
+        })
+    });
+});
+const $6de6709202a3b061$var$FancyBackdrop = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Box))`
+  backdrop-filter: blur(8px) brightness(0.5) saturate(2);
+  mix-blend-mode: color-dodge;
+`;
+const $6de6709202a3b061$export$e20c438ffc62921 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Grid))`
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+`;
+const $6de6709202a3b061$export$7431cee690d58bc9 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  border-top: 1px solid var(--card-border-color);
+  position: sticky;
+  bottom: 0;
+  z-index: 200;
+`;
+
+
+function $216715c95525676f$var$AssetActionsMenu(props) {
+    const { asset: asset  } = props;
+    const id = (0, $dyHF6$reachautoid.useId)();
+    const [dialogState, setDialogState] = (0, $dyHF6$react.useState)();
+    const [open, setOpen] = (0, $dyHF6$react.useState)(false);
+    const [menuElement, setMenuRef] = (0, $dyHF6$react.useState)(null);
+    const handleDelete = (0, $dyHF6$react.useCallback)(()=>setDialogState("confirm-delete"), []);
+    const handleClick = (0, $dyHF6$react.useCallback)(()=>{
+        setDialogState(false);
+        setOpen(true);
+    }, [
+        setDialogState
+    ]);
+    const handleClose = (0, $dyHF6$react.useCallback)(()=>{
+        setDialogState(false);
+        setOpen(false);
+    }, [
+        setDialogState
+    ]);
+    (0, $dyHF6$react.useEffect)(()=>{
+        if (open && dialogState) setOpen(false);
+    }, [
+        dialogState,
+        open
+    ]);
+    (0, $dyHF6$sanityui.useClickOutside)((0, $dyHF6$react.useCallback)(()=>setOpen(false), []), [
+        menuElement
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuButton), {
+                id: `${id}-asset-menu`,
+                button: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                    icon: (0, $dyHF6$sanityicons.EllipsisVerticalIcon),
+                    mode: "ghost",
+                    onClick: handleClick,
+                    padding: 2
+                }),
+                menu: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Menu), {
+                    ref: setMenuRef,
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuItem), {
+                        tone: "critical",
+                        icon: (0, $dyHF6$sanityicons.TrashIcon),
+                        text: "Delete",
+                        onClick: handleDelete
+                    })
+                }),
+                portal: true,
+                placement: "right"
+            }),
+            dialogState === "confirm-delete" && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($216715c95525676f$var$DeleteDialog, {
+                asset: asset,
+                onClose: handleClose
+            })
+        ]
+    });
+}
+function $216715c95525676f$var$DeleteDialog(props) {
+    const { asset: asset , onClose: onClose  } = props;
+    const client = (0, $dyHF6$sanity.useClient)();
+    const { push: pushToast  } = (0, $dyHF6$sanityui.useToast)();
+    const [deleting, setDeleting] = (0, $dyHF6$react.useState)(false);
+    const [deleteOnMux, setDeleteOnMux] = (0, $dyHF6$react.useState)(false);
+    const id = (0, $dyHF6$reachautoid.useId)();
+    const noPaddingOnStack = true;
+    const width = 200 * (0, $dyHF6$usedevicepixelratio.getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    const handleDelete = (0, $dyHF6$react.useCallback)(async ()=>{
+        setDeleting(true);
+        try {
+            if (asset?._id) await client.delete(asset._id);
+            if (deleteOnMux && asset?.assetId) await (0, $a0485042ac477352$export$df987b50509121ea)(client, asset.assetId);
+            document.querySelector(`[data-id="${asset._id}"]`)?.parentElement?.setAttribute?.("hidden", "true");
+        } catch (err) {
+            console.error("Failed during delete", err);
+            pushToast({
+                closable: true,
+                description: err.message,
+                duration: 5000,
+                title: "Uncaught error",
+                status: "error"
+            });
+        } finally{
+            setDeleting(false);
+            onClose();
+        }
+    }, [
+        asset._id,
+        asset.assetId,
+        client,
+        deleteOnMux,
+        onClose,
+        pushToast
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Dialog), {
+        onClose: onClose,
+        id: `${id}-confirm-delete`,
+        header: "Delete video",
+        footer: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Grid), {
+            padding: 2,
+            gap: 2,
+            columns: 2,
+            children: [
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                    mode: "bleed",
+                    text: "Cancel",
+                    onClick: onClose
+                }),
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                    text: "Delete",
+                    tone: "critical",
+                    icon: (0, $dyHF6$sanityicons.TrashIcon),
+                    onClick: handleDelete,
+                    loading: deleting
+                })
+            ]
+        }),
+        // __unstable_autoFocus
+        width: 1,
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Stack), {
+            paddingX: noPaddingOnStack ? 0 : [
+                2,
+                3,
+                4
+            ],
+            paddingY: noPaddingOnStack ? 0 : [
+                3,
+                3,
+                3,
+                4
+            ],
+            space: 1,
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                paddingX: [
+                    2,
+                    3,
+                    4
+                ],
+                paddingY: [
+                    3,
+                    3,
+                    3,
+                    4
+                ],
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Grid), {
+                    columns: 3,
+                    gap: 3,
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                            style: {
+                                gridColumn: "span 2"
+                            },
+                            align: "center",
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                                padding: 4,
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                                    space: 4,
+                                    children: [
+                                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                                            align: "center",
+                                            as: "label",
+                                            children: [
+                                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Checkbox), {
+                                                    checked: deleteOnMux,
+                                                    onChange: ()=>setDeleteOnMux((prev)=>!prev)
+                                                }),
+                                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                                    style: {
+                                                        margin: "0 10px"
+                                                    },
+                                                    children: "Delete asset on Mux"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                                            align: "center",
+                                            as: "label",
+                                            children: [
+                                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Checkbox), {
+                                                    disabled: true,
+                                                    checked: true
+                                                }),
+                                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                                    style: {
+                                                        margin: "0 10px"
+                                                    },
+                                                    children: "Delete video from dataset"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$bd4b73f15688a160), {
+                            asset: asset,
+                            width: width,
+                            showTip: true
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+function $216715c95525676f$export$2e2bcd8739ae039({ assets: assets , isLoading: isLoading , isLastPage: isLastPage , onSelect: onSelect , onLoadMore: onLoadMore  }) {
+    const handleClick = (0, $dyHF6$react.useCallback)((event)=>onSelect(event.currentTarget.dataset.id), [
+        onSelect
+    ]);
+    const handleKeyPress = (0, $dyHF6$react.useCallback)((event)=>{
+        if (event.key === "Enter") onSelect(event.currentTarget.dataset.id);
+    }, [
+        onSelect
+    ]);
+    const width = 200 * (0, $dyHF6$usedevicepixelratio.getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Box), {
+                padding: 4,
+                children: [
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$e20c438ffc62921), {
+                        gap: 2,
+                        children: assets.map((asset)=>/*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($216715c95525676f$var$VideoSourceItem, {
+                                asset: asset,
+                                onClick: handleClick,
+                                onKeyPress: handleKeyPress,
+                                width: width
+                            }, asset._id))
+                    }),
+                    isLoading && assets.length === 0 && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                        justify: "center",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Spinner), {
+                            muted: true
+                        })
+                    }),
+                    !isLoading && assets.length === 0 && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                        align: "center",
+                        muted: true,
+                        children: "No videos"
+                    })
+                ]
+            }),
+            assets.length > 0 && !isLastPage && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$7431cee690d58bc9), {
+                tone: "default",
+                padding: 4,
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                    direction: "column",
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                        type: "button",
+                        icon: (0, $dyHF6$sanityicons.DownloadIcon),
+                        loading: isLoading,
+                        onClick: onLoadMore,
+                        text: "Load more",
+                        tone: "primary"
+                    })
+                })
+            })
+        ]
+    });
+}
+const $216715c95525676f$var$_VideoSourceItem = ({ asset: asset , onClick: onClick , onKeyPress: onKeyPress , width: width  })=>{
+    const [hover, setHover] = (0, $dyHF6$react.useState)(null);
+    const ref = (0, $dyHF6$react.useRef)(null);
+    (0, $dyHF6$react.useLayoutEffect)(()=>{
+        if (!ref.current || hover === null) return;
+        if (hover) (0, $dyHF6$motion.animate)(ref.current, {
+            opacity: 1
+        });
+        else (0, $dyHF6$motion.animate)(ref.current, {
+            opacity: 0
+        });
+    }, [
+        hover
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Box), {
+        height: "fill",
+        style: {
+            position: "relative"
+        },
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Card), {
+                as: "button",
+                "data-id": asset._id,
+                onClick: onClick,
+                onKeyPress: onKeyPress,
+                tabIndex: 0,
+                radius: 2,
+                padding: 1,
+                style: {
+                    lineHeight: 0,
+                    position: "relative"
+                },
+                __unstable_focusRing: true,
+                onMouseEnter: ()=>setHover(true),
+                onMouseLeave: ()=>setHover(false),
+                children: [
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$bd4b73f15688a160), {
+                        asset: asset,
+                        width: width,
+                        showTip: true
+                    }),
+                    asset?.playbackId && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($216715c95525676f$var$AnimateWrapper, {
+                        tone: "transparent",
+                        ref: ref,
+                        margin: 1,
+                        radius: 1,
+                        children: hover !== null && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$357b57aa2db6117e), {
+                            asset: asset,
+                            width: width
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($216715c95525676f$var$ActionsAssetsContainer, {
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($216715c95525676f$var$AssetActionsMenu, {
+                    asset: asset
+                })
+            })
+        ]
+    });
+};
+const $216715c95525676f$var$VideoSourceItem = /*#__PURE__*/ (0, $dyHF6$react.memo)($216715c95525676f$var$_VideoSourceItem);
+const $216715c95525676f$var$AnimateWrapper = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  will-change: opacity;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+`;
+const $216715c95525676f$var$ActionsAssetsContainer = (0, ($parcel$interopDefault($dyHF6$styledcomponents))).div`
+  box-sizing: border-box;
+  position: absolute;
+  z-index: 300;
+  opacity: 0;
+  top: 7px;
+  right: 7px;
+
+  button:hover + &,
+  button:focus-visible + &,
+  &:hover,
+  &:focus-visible {
+    opacity: 1;
+  }
+`;
+
+
+const $43923b4c880150fa$var$PER_PAGE = 20;
+function $43923b4c880150fa$var$createQuery(start = 0, end = $43923b4c880150fa$var$PER_PAGE) {
+    return /* groq */ `*[_type == "mux.videoAsset"] | order(_updatedAt desc) [${start}...${end}]`;
+}
+function $43923b4c880150fa$export$2e2bcd8739ae039({ asset: asset , onChange: onChange , setDialogState: setDialogState  }) {
+    const client = (0, $dyHF6$sanity.useClient)();
+    const pageNoRef = (0, $dyHF6$react.useRef)(0);
+    const [isLastPage, setLastPage] = (0, $dyHF6$react.useState)(false);
+    const [isLoading, setLoading] = (0, $dyHF6$react.useState)(false);
+    const [assets, setAssets] = (0, $dyHF6$react.useState)([]);
+    const fetchPage = (0, $dyHF6$react.useCallback)((pageNo)=>{
+        const start = pageNo * $43923b4c880150fa$var$PER_PAGE;
+        const end = start + $43923b4c880150fa$var$PER_PAGE;
+        setLoading(true);
+        return client.fetch($43923b4c880150fa$var$createQuery(start, end)).then((result)=>{
+            setLastPage(result.length < $43923b4c880150fa$var$PER_PAGE);
+            setAssets((prev)=>prev.concat(result));
+        }).finally(()=>setLoading(false));
+    }, [
+        client
+    ]);
+    const handleSelect = (0, $dyHF6$react.useCallback)((id)=>{
+        const selected = assets.find((doc)=>doc._id === id);
+        if (!selected) throw new TypeError(`Failed to find video asset with id: ${id}`);
+        onChange((0, $dyHF6$sanityform.PatchEvent).from([
+            (0, $dyHF6$sanityform.setIfMissing)({
+                asset: {}
+            }),
+            (0, $dyHF6$sanityform.set)({
+                _type: "reference",
+                _weak: true,
+                _ref: selected._id
+            }, [
+                "asset"
+            ]), 
+        ]));
+        setDialogState(false);
+    }, [
+        assets,
+        onChange,
+        setDialogState
+    ]);
+    const handleLoadMore = (0, $dyHF6$react.useCallback)(()=>{
+        fetchPage(++pageNoRef.current);
+    }, [
+        fetchPage
+    ]);
+    (0, $dyHF6$react.useEffect)(()=>void fetchPage(pageNoRef.current), [
+        fetchPage
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $216715c95525676f$export$2e2bcd8739ae039), {
+        onSelect: handleSelect,
+        assets: assets,
+        isLastPage: isLastPage,
+        isLoading: isLoading,
+        onLoadMore: handleLoadMore
+    });
+}
+
+
+function $002b8d5a97e55801$export$2e2bcd8739ae039({ setDialogState: setDialogState , asset: asset , onChange: onChange  }) {
+    const id = `InputBrowser${(0, $dyHF6$reachautoid.useId)()}`;
+    const handleClose = (0, $dyHF6$react.useCallback)(()=>setDialogState(false), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Dialog), {
+        scheme: "dark",
+        __unstable_autoFocus: true,
+        header: "Select video",
+        id: id,
+        onClose: handleClose,
+        width: 2,
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $43923b4c880150fa$export$2e2bcd8739ae039), {
+            asset: asset,
+            onChange: onChange,
+            setDialogState: setDialogState
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+const $aaf33e116b8198b5$export$b07ce35d92a46f4b = (asset, onChange)=>{
+    const client = (0, $dyHF6$sanity.useClient)();
+    return (0, $dyHF6$react.useCallback)(()=>{
+        if (!asset) return;
+        onChange((0, $dyHF6$sanityform.PatchEvent).from((0, $dyHF6$sanityform.unset)()));
+        if (asset.assetId) (0, $a0485042ac477352$export$df987b50509121ea)(client, asset.assetId);
+        if (asset._id) client.delete(asset._id);
+    }, [
+        asset,
+        client,
+        onChange
+    ]);
+};
+
+
+
+
+
+function $23be88c51cb37a0a$export$b704b622b4125987({ asset: asset , client: client  }) {
+    const playbackId = (0, $96cfb4479805b243$export$bdfa34d24bb44333)(asset);
+    const searchParams = new URLSearchParams();
+    if ((0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $d8ba7896129c9d6c$export$87b96baf1080652a)(client, playbackId, "v");
+        searchParams.set("token", token);
+    }
+    return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+}
+
+
+
+
+
+
+
+
+
+function $e9dd88be70c34bc0$export$2e2bcd8739ae039({ asset: asset , getCurrentTime: getCurrentTime , setDialogState: setDialogState  }) {
+    const client = (0, $dyHF6$sanity.useClient)();
+    const dialogId = `EditThumbnailDialog${(0, $dyHF6$reachautoid.useId)()}`;
+    const nextTime = (0, $dyHF6$react.useMemo)(()=>getCurrentTime(), [
+        getCurrentTime
+    ]);
+    const assetWithNewThumbnail = (0, $dyHF6$react.useMemo)(()=>({
+            ...asset,
+            thumbTime: nextTime
+        }), [
+        asset,
+        nextTime
+    ]);
+    const [saving, setSaving] = (0, $dyHF6$react.useState)(false);
+    const [error, setError] = (0, $dyHF6$react.useState)(null);
+    const handleSave = (0, $dyHF6$react.useCallback)(()=>{
+        setSaving(true);
+        client.patch(asset._id).set({
+            thumbTime: nextTime
+        }).commit({
+            returnDocuments: false
+        }).then(()=>void setDialogState(false)).catch(setError).finally(()=>void setSaving(false));
+    }, [
+        client,
+        asset._id,
+        nextTime,
+        setDialogState
+    ]);
+    const width = 300 * (0, $dyHF6$usedevicepixelratio.getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    if (error) // eslint-disable-next-line no-warning-comments
+    // @TODO handle errors more gracefully
+    throw error;
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Dialog), {
+        id: dialogId,
+        header: "Edit thumbnail",
+        onClose: ()=>setDialogState(false),
+        footer: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Stack), {
+            padding: 3,
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                mode: "ghost",
+                tone: "primary",
+                loading: saving,
+                onClick: handleSave,
+                text: "Set new thumbnail"
+            }, "thumbnail")
+        }),
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+            space: 3,
+            padding: 3,
+            children: [
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                    space: 2,
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                            size: 1,
+                            weight: "semibold",
+                            children: "Current:"
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$bd4b73f15688a160), {
+                            asset: asset,
+                            width: width
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                    space: 2,
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                            size: 1,
+                            weight: "semibold",
+                            children: "New:"
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$bd4b73f15688a160), {
+                            asset: assetWithNewThumbnail,
+                            width: width
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function $ff9ed2112976f4c6$export$445f1a1fda135dc9({ asset: asset , client: client  }) {
+    const playbackId = (0, $96cfb4479805b243$export$bdfa34d24bb44333)(asset);
+    const searchParams = new URLSearchParams();
+    if ((0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $d8ba7896129c9d6c$export$87b96baf1080652a)(client, playbackId, "s");
+        searchParams.set("token", token);
+    }
+    return `https://image.mux.com/${playbackId}/storyboard.vtt?${searchParams}`;
+}
+
+
+const $f31b07fd20c626b4$export$b302ef9d8310f71 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  position: relative;
+  min-height: 150px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 1px;
+  media-airplay-button[media-airplay-unavailable] {
+    display: none;
+  }
+  media-volume-range[media-volume-unavailable] {
+    display: none;
+  }
+  media-pip-button[media-pip-unavailable] {
+    display: none;
+  }
+  media-controller {
+    --media-control-background: transparent;
+    --media-control-hover-background: transparent;
+    --media-range-track-background-color: rgba(255, 255, 255, 0.5);
+    --media-range-track-border-radius: 3px;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+  }
+  media-control-bar {
+    --media-button-icon-width: 18px;
+    --media-preview-time-margin: 0px;
+  }
+  media-control-bar:not([slot]) :is([role='button'], [role='switch'], button) {
+    height: 44px;
+  }
+  .size-extra-small media-control-bar [role='button'],
+  .size-extra-small media-control-bar [role='switch'] {
+    height: auto;
+    padding: 4.4% 3.2%;
+  }
+  .mxp-spacer {
+    flex-grow: 1;
+    height: 100%;
+    background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));
+  }
+  media-controller::part(vertical-layer) {
+    transition: background-color 1s;
+  }
+  media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {
+    background-color: rgba(0, 0, 0, 0.6);
+    transition: background-color 0.25s;
+  }
+  .mxp-center-controls {
+    --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;
+  }
+  .mxp-center-controls media-play-button {
+    --media-control-background: transparent;
+    --media-control-hover-background: transparent;
+    padding: 0;
+    width: max(27px, min(9%, 90px));
+  }
+  .mxp-center-controls media-seek-backward-button,
+  .mxp-center-controls media-seek-forward-button {
+    --media-control-background: transparent;
+    --media-control-hover-background: transparent;
+    padding: 0;
+    margin: 0 10%;
+    width: min(7%, 70px);
+  }
+  media-loading-indicator {
+    --media-loading-icon-width: 100%;
+    --media-button-icon-height: auto;
+    pointer-events: none;
+    position: absolute;
+    width: min(15%, 150px);
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: center;
+  }
+  /* Intentionally don't target the div for transition but the children
+ of the div. Prevents messing with media-chrome's autohide feature. */
+  media-loading-indicator + div * {
+    transition: opacity 0.15s;
+    opacity: 1;
+  }
+  media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {
+    opacity: 0;
+    transition-delay: 400ms;
+  }
+  media-volume-range {
+    width: min(100%, 100px);
+  }
+  media-time-display {
+    white-space: nowrap;
+  }
+  :is(media-time-display, media-text-display, media-playback-rate-button) {
+    color: inherit;
+  }
+  media-controller:fullscreen media-control-bar[slot='top-chrome'] {
+    /* Hide menus and buttons that trigger modals when in full-screen */
+    display: none;
+  }
+  video {
+    background: transparent;
+  }
+  media-controller:not(:fullscreen) video {
+    aspect-ratio: 16 / 9;
+  }
+  media-controller:not(:-webkit-full-screen) video {
+    aspect-ratio: 16 / 9;
+  }
+`;
+const $f31b07fd20c626b4$export$ec21f2fe322b745c = (0, ($parcel$interopDefault($dyHF6$styledcomponents))).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 $f31b07fd20c626b4$export$fa0cb91fe5adf3c5 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$mediachromedistreact.MediaControlBar))`
+  justify-content: flex-end;
+  button {
+    height: auto;
+  }
+`;
+function $f31b07fd20c626b4$export$5ebdf79245c1c64a({ asset: asset  }) {
+    const client = (0, $dyHF6$sanity.useClient)();
+    const ref = (0, $dyHF6$react.useRef)(null);
+    const src = (0, $dyHF6$react.useMemo)(()=>(0, $2ed67348dc6c5cb5$export$8081e7a11b9f1345)({
+            client: client,
+            asset: asset,
+            width: 1920,
+            height: 1080
+        }), [
+        client,
+        asset
+    ]);
+    (0, $dyHF6$react.useEffect)(()=>{
+        if (ref.current) {
+            const style = document.createElement("style");
+            style.innerHTML = "img { object-fit: contain; }";
+            if (ref.current?.shadowRoot) ref.current.shadowRoot.appendChild(style);
+        }
+    }, []);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaPosterImage), {
+        ref: ref,
+        slot: "poster",
+        src: src
+    });
+}
+function $f31b07fd20c626b4$export$95073c0c4bf2add1({ asset: asset  }) {
+    const client = (0, $dyHF6$sanity.useClient)();
+    // Why useState instead of useMemo? Because we really really only want to run it exactly once and useMemo doesn't make that guarantee
+    const [src] = (0, $dyHF6$react.useState)(()=>(0, $ff9ed2112976f4c6$export$445f1a1fda135dc9)({
+            asset: asset,
+            client: client
+        }));
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("track", {
+        label: "thumbnails",
+        default: true,
+        kind: "metadata",
+        src: src
+    });
+}
+
+
+
+
+
+
+
+const $18e643189121e331$export$6aa22a823032b784 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  min-height: 82px;
+  box-sizing: border-box;
+`;
+const $18e643189121e331$export$245cfede9308c835 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Flex))`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+const $18e643189121e331$export$e3b4754a92ccf466 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Stack))`
+  position: relative;
+  width: 60%;
+`;
+const $18e643189121e331$export$bedb6b8ab184f038 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Code))`
+  position: relative;
+  width: 100%;
+
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 200px;
+  }
+`;
+const $18e643189121e331$export$98a3886347b629fb = ({ progress: progress = 100 , onCancel: onCancel , filename: filename , text: text = "Uploading"  })=>{
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($18e643189121e331$export$6aa22a823032b784, {
+        tone: "primary",
+        padding: 4,
+        border: true,
+        height: "fill",
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)($18e643189121e331$export$245cfede9308c835, {
+            align: "center",
+            justify: "space-between",
+            height: "fill",
+            direction: "row",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)($18e643189121e331$export$e3b4754a92ccf466, {
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                            justify: "center",
+                            gap: [
+                                3,
+                                3,
+                                2,
+                                2
+                            ],
+                            direction: [
+                                "column",
+                                "column",
+                                "row"
+                            ],
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                size: 1,
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Inline), {
+                                    space: 2,
+                                    children: [
+                                        text,
+                                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($18e643189121e331$export$bedb6b8ab184f038, {
+                                            size: 1,
+                                            children: filename ? filename : "..."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                            marginTop: 3,
+                            radius: 5,
+                            shadow: 1,
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanity_unstable.LinearProgress), {
+                                value: progress
+                            })
+                        })
+                    ]
+                }),
+                onCancel ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                    fontSize: 2,
+                    text: "Cancel upload",
+                    mode: "ghost",
+                    tone: "critical",
+                    onClick: onCancel
+                }) : null
+            ]
+        })
+    });
+};
+
+
+const $4b270840a4c34b64$var$MuxVideo = ({ asset: asset , buttons: buttons , readOnly: readOnly , onChange: onChange , dialogState: dialogState , setDialogState: setDialogState  })=>{
+    const client = (0, $dyHF6$sanity.useClient)();
+    const isLoading = (0, $dyHF6$react.useMemo)(()=>{
+        if (asset?.status === "preparing") return "Preparing the video";
+        if (asset?.status === "waiting_for_upload") return "Waiting for upload to start";
+        if (asset?.status === "waiting") return "Processing upload";
+        if (asset?.status === "ready") return false;
+        if (typeof asset?.status === "undefined") return false;
+        return true;
+    }, [
+        asset
+    ]);
+    const isPreparingStaticRenditions = (0, $dyHF6$react.useMemo)(()=>{
+        if (asset?.data?.static_renditions?.status === "preparing") return true;
+        if (asset?.data?.static_renditions?.status === "ready") return false;
+        return false;
+    }, [
+        asset?.data?.static_renditions?.status
+    ]);
+    const videoSrc = (0, $dyHF6$react.useMemo)(()=>asset.playbackId && (0, $23be88c51cb37a0a$export$b704b622b4125987)({
+            client: client,
+            asset: asset
+        }), [
+        asset,
+        client
+    ]);
+    const [error, setError] = (0, $dyHF6$react.useState)(null);
+    const handleError = (0, $dyHF6$react.useCallback)((event)=>setError(event.currentTarget.error), []);
+    const playRef = (0, $dyHF6$react.useRef)(null);
+    const muteRef = (0, $dyHF6$react.useRef)(null);
+    const video = (0, $dyHF6$react.useRef)(null);
+    const getCurrentTime = (0, $dyHF6$react.useCallback)(()=>video.current?.currentTime ?? 0, [
+        video
+    ]);
+    const handleCancelUpload = (0, $aaf33e116b8198b5$export$b07ce35d92a46f4b)(asset, onChange);
+    (0, $dyHF6$react.useEffect)(()=>{
+        const style = document.createElement("style");
+        style.innerHTML = "button svg { vertical-align: middle; }";
+        if (playRef.current?.shadowRoot) playRef.current.shadowRoot.appendChild(style);
+        if (muteRef?.current?.shadowRoot) muteRef.current.shadowRoot.appendChild(style.cloneNode(true));
+    }, []);
+    const [playerInitTime] = (0, $dyHF6$react.useState)(()=>(0, $dyHF6$muxplaybackcore.generatePlayerInitTime)());
+    const playbackEngineRef = (0, $dyHF6$react.useRef)(undefined);
+    (0, $dyHF6$react.useEffect)(()=>{
+        if (isLoading || !videoSrc) return;
+        const nextPlaybackEngineRef = (0, $dyHF6$muxplaybackcore.initialize)({
+            src: videoSrc,
+            playerInitTime: playerInitTime,
+            playerSoftwareName: "sanity-plugin-mux-input",
+            playerSoftwareVersion: "dev-preview"
+        }, video.current, playbackEngineRef.current);
+        playbackEngineRef.current = nextPlaybackEngineRef;
+    }, [
+        videoSrc,
+        isLoading,
+        playerInitTime
+    ]);
+    (0, $dyHF6$react.useEffect)(()=>{
+        if (asset?.status === "errored") {
+            handleCancelUpload();
+            // eslint-disable-next-line no-warning-comments
+            // @TODO use better error handling
+            throw new Error(asset.data?.errors?.messages?.join(" "));
+        }
+    }, [
+        asset.data?.errors?.messages,
+        asset?.status,
+        handleCancelUpload
+    ]);
+    if (error) // @TODO better error handling
+    throw error;
+    if (!asset || !asset.status) return null;
+    if (isLoading) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $18e643189121e331$export$98a3886347b629fb), {
+        progress: 100,
+        filename: asset?.filename,
+        text: isLoading !== true && isLoading || "Waiting for Mux to complete the file",
+        onCancel: readOnly ? undefined : ()=>handleCancelUpload()
+    });
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $f31b07fd20c626b4$export$b302ef9d8310f71), {
+                shadow: 1,
+                tone: "transparent",
+                scheme: "dark",
+                children: [
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$mediachromedistreact.MediaController), {
+                        children: [
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("video", {
+                                playsInline: true,
+                                ref: video,
+                                onError: handleError,
+                                slot: "media",
+                                preload: "metadata",
+                                crossOrigin: "anonomous",
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $f31b07fd20c626b4$export$95073c0c4bf2add1), {
+                                    asset: asset
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $f31b07fd20c626b4$export$5ebdf79245c1c64a), {
+                                asset: asset
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaLoadingIndicator), {
+                                slot: "centered-chrome",
+                                noAutoHide: true
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $f31b07fd20c626b4$export$ec21f2fe322b745c), {
+                                slot: "centered-chrome",
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaPlayButton), {})
+                            }),
+                            buttons && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $f31b07fd20c626b4$export$fa0cb91fe5adf3c5), {
+                                slot: "top-chrome",
+                                children: buttons
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$mediachromedistreact.MediaControlBar), {
+                                children: [
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaMuteButton), {}),
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaTimeDisplay), {}),
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaTimeRange), {}),
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaDurationDisplay), {}),
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$mediachromedistreact.MediaFullscreenButton), {})
+                                ]
+                            })
+                        ]
+                    }),
+                    isPreparingStaticRenditions && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                        padding: 2,
+                        radius: 1,
+                        style: {
+                            background: "var(--card-fg-color)",
+                            position: "absolute",
+                            top: "0.5em",
+                            left: "0.5em"
+                        },
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                            size: 1,
+                            style: {
+                                color: "var(--card-bg-color)"
+                            },
+                            children: "MUX is preparing static renditions, please stand by"
+                        })
+                    })
+                ]
+            }),
+            dialogState === "edit-thumbnail" && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $e9dd88be70c34bc0$export$2e2bcd8739ae039), {
+                asset: asset,
+                getCurrentTime: getCurrentTime,
+                setDialogState: setDialogState
+            })
+        ]
+    });
+};
+var $4b270840a4c34b64$export$2e2bcd8739ae039 = $4b270840a4c34b64$var$MuxVideo;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $c3640926d3b4b579$export$a79bcc1dc439e294(border) {
+    return `inset 0 0 0 ${border.width}px ${border.color}`;
+}
+function $c3640926d3b4b579$export$c339ddc20364daad(opts) {
+    const { base: base , border: border , focusRing: focusRing  } = opts;
+    const focusRingOutsetWidth = focusRing.offset + focusRing.width;
+    const focusRingInsetWidth = 0 - focusRing.offset;
+    const bgColor = base ? base.bg : "var(--card-bg-color)";
+    return [
+        focusRingInsetWidth > 0 && `inset 0 0 0 ${focusRingInsetWidth}px var(--card-focus-ring-color)`,
+        border && $c3640926d3b4b579$export$a79bcc1dc439e294(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 $59667831b98d647c$export$de1df6cdafc19206 = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.MenuItem))(({ theme: theme  })=>{
+    const { focusRing: focusRing  } = theme.sanity;
+    const base = theme.sanity.color.base;
+    const border = {
+        width: 1,
+        color: "var(--card-border-color)"
+    };
+    return (0, $dyHF6$styledcomponents.css)`
+    position: relative;
+
+    &:not([data-disabled='true']) {
+      &:focus-within {
+        box-shadow: ${(0, $c3640926d3b4b579$export$c339ddc20364daad)({
+        base: base,
+        border: border,
+        focusRing: 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;
+    }
+  `;
+});
+
+
+const $a1238a31a065a28d$export$c1c647ae58701638 = /*#__PURE__*/ (0, ($parcel$interopDefault($dyHF6$react))).forwardRef(function FileInputMenuItem(props, forwardedRef) {
+    const { icon: icon , id: idProp , accept: accept , capture: capture , fontSize: fontSize , multiple: multiple , onSelect: onSelect , padding: padding = 3 , space: space = 3 , textAlign: textAlign , text: text , disabled: disabled , ...rest } = props;
+    const id = (0, $dyHF6$reachautoid.useId)(idProp);
+    const handleChange = (0, ($parcel$interopDefault($dyHF6$react))).useCallback((event)=>{
+        if (onSelect && event.target.files) onSelect(Array.from(event.target.files));
+    }, [
+        onSelect
+    ]);
+    const content = /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+        align: "center",
+        justify: "flex-start",
+        padding: padding,
+        children: [
+            icon && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                marginRight: text ? space : undefined,
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Text), {
+                    size: fontSize,
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$react.isValidElement)(icon) && icon,
+                        (0, $dyHF6$reactis.isValidElementType)(icon) && /*#__PURE__*/ (0, $dyHF6$react.createElement)(icon)
+                    ]
+                })
+            }),
+            text && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                align: textAlign,
+                size: fontSize,
+                textOverflow: "ellipsis",
+                children: text
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $59667831b98d647c$export$de1df6cdafc19206), {
+        ...rest,
+        htmlFor: id,
+        padding: 0,
+        fontSize: 2,
+        disabled: disabled,
+        ref: forwardedRef,
+        children: [
+            content,
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("input", {
+                "data-testid": "file-button-input",
+                accept: accept,
+                capture: capture,
+                id: id,
+                multiple: multiple,
+                onChange: handleChange,
+                type: "file",
+                value: "",
+                disabled: disabled
+            })
+        ]
+    });
+});
+
+
+const $8a74cfcfbdb3efdf$var$LockCard = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.6;
+  mix-blend-mode: screen;
+  background: transparent;
+`;
+const $8a74cfcfbdb3efdf$var$LockButton = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Button))`
+  background: transparent;
+  color: white;
+`;
+function $8a74cfcfbdb3efdf$var$PlayerActionsMenu(props) {
+    const { asset: asset , readOnly: readOnly , dialogState: dialogState , setDialogState: setDialogState , onChange: onChange , onUpload: onUpload  } = props;
+    const [open, setOpen] = (0, $dyHF6$react.useState)(false);
+    const [menuElement, setMenuRef] = (0, $dyHF6$react.useState)(null);
+    const isSigned = (0, $dyHF6$react.useMemo)(()=>(0, $5bbe48978fdc9616$export$f7d2546fac75bbd)(asset) === "signed", [
+        asset
+    ]);
+    const onReset = (0, $dyHF6$react.useCallback)(()=>onChange((0, $dyHF6$sanityform.PatchEvent).from((0, $dyHF6$sanityform.unset)([]))), [
+        onChange
+    ]);
+    (0, $dyHF6$react.useEffect)(()=>{
+        if (open && dialogState) setOpen(false);
+    }, [
+        dialogState,
+        open
+    ]);
+    (0, $dyHF6$sanityui.useClickOutside)((0, $dyHF6$react.useCallback)(()=>setOpen(false), []), [
+        menuElement
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Inline), {
+        space: 1,
+        padding: 2,
+        children: [
+            isSigned && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Tooltip), {
+                content: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                    padding: 2,
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                        muted: true,
+                        size: 1,
+                        children: "Signed playback policy"
+                    })
+                }),
+                placement: "right",
+                portal: true,
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($8a74cfcfbdb3efdf$var$LockCard, {
+                    radius: 2,
+                    margin: 2,
+                    scheme: "dark",
+                    tone: "positive",
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($8a74cfcfbdb3efdf$var$LockButton, {
+                        icon: (0, $dyHF6$sanityicons.LockIcon),
+                        mode: "bleed",
+                        tone: "positive"
+                    })
+                })
+            }),
+            !readOnly && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                icon: (0, $dyHF6$sanityicons.EditIcon),
+                mode: "ghost",
+                onClick: ()=>setDialogState("edit-thumbnail")
+            }),
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Popover), {
+                content: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Menu), {
+                    ref: setMenuRef,
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                            padding: 2,
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Label), {
+                                muted: true,
+                                size: 1,
+                                children: "Replace"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $a1238a31a065a28d$export$c1c647ae58701638), {
+                            accept: "video/*",
+                            icon: (0, $dyHF6$sanityicons.UploadIcon),
+                            mode: "bleed",
+                            onSelect: onUpload,
+                            text: "Upload",
+                            disabled: readOnly,
+                            fontSize: 2
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuItem), {
+                            icon: (0, $dyHF6$sanityicons.SearchIcon),
+                            text: "Browse",
+                            onClick: ()=>setDialogState("select-video")
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuDivider), {}),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuItem), {
+                            icon: (0, $dyHF6$sanityicons.PlugIcon),
+                            text: "Configure API",
+                            onClick: ()=>setDialogState("secrets")
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuDivider), {}),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.MenuItem), {
+                            tone: "critical",
+                            icon: (0, $dyHF6$sanityicons.ResetIcon),
+                            text: "Clear field",
+                            onClick: onReset,
+                            disabled: readOnly
+                        })
+                    ]
+                }),
+                portal: true,
+                open: open,
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                    icon: (0, $dyHF6$sanityicons.EllipsisVerticalIcon),
+                    mode: "ghost",
+                    onClick: ()=>{
+                        setDialogState(false);
+                        setOpen(true);
+                    }
+                })
+            })
+        ]
+    });
+}
+var $8a74cfcfbdb3efdf$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $dyHF6$react.memo)($8a74cfcfbdb3efdf$var$PlayerActionsMenu);
+
+
+
+
+
+
+
+
+
+function $ef74f13c86627be6$export$ed320981107bc6bd(component) {
+    return (0, ($parcel$interopDefault($dyHF6$styledcomponents)))(component)((props)=>{
+        const border = {
+            width: props.$border ? 1 : 0,
+            color: "var(--card-border-color)"
+        };
+        return (0, $dyHF6$styledcomponents.css)`
+        --card-focus-box-shadow: ${(0, $c3640926d3b4b579$export$a79bcc1dc439e294)(border)};
+
+        border-radius: ${(0, $dyHF6$sanityui.rem)(props.theme.sanity.radius[1])};
+        outline: none;
+        box-shadow: var(--card-focus-box-shadow);
+
+        &:focus {
+          --card-focus-box-shadow: ${(0, $c3640926d3b4b579$export$c339ddc20364daad)({
+            base: props.theme.sanity.color.base,
+            border: border,
+            focusRing: props.theme.sanity.focusRing
+        })};
+        }
+      `;
+    });
+}
+
+
+
+
+const $59b5a0f5519b63e4$var$ctrlKey = 17;
+const $59b5a0f5519b63e4$var$cmdKey = 91;
+const $59b5a0f5519b63e4$var$UploadCardWithFocusRing = (0, $ef74f13c86627be6$export$ed320981107bc6bd)((0, $dyHF6$sanityui.Card));
+const $59b5a0f5519b63e4$export$88f8ee83ae881d58 = /*#__PURE__*/ (0, $dyHF6$react.forwardRef)(({ children: children , tone: tone , onPaste: onPaste , onFocus: onFocus , onBlur: onBlur , onDrop: onDrop , onDragEnter: onDragEnter , onDragLeave: onDragLeave , onDragOver: onDragOver  }, forwardedRef)=>{
+    const ctrlDown = (0, $dyHF6$react.useRef)(false);
+    const inputRef = (0, $dyHF6$react.useRef)(null);
+    const handleKeyDown = (0, $dyHF6$react.useCallback)((event)=>{
+        if (event.keyCode == $59b5a0f5519b63e4$var$ctrlKey || event.keyCode == $59b5a0f5519b63e4$var$cmdKey) ctrlDown.current = true;
+        const vKey = 86;
+        if (ctrlDown.current && event.keyCode == vKey) inputRef.current.focus();
+    }, []);
+    const handleKeyUp = (0, $dyHF6$react.useCallback)((event)=>{
+        if (event.keyCode == $59b5a0f5519b63e4$var$ctrlKey || event.keyCode == $59b5a0f5519b63e4$var$cmdKey) ctrlDown.current = false;
+    }, []);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)($59b5a0f5519b63e4$var$UploadCardWithFocusRing, {
+        tone: tone,
+        height: "fill",
+        ref: forwardedRef,
+        padding: 0,
+        radius: 2,
+        shadow: 0,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onPaste: onPaste,
+        onFocus: onFocus,
+        onBlur: onBlur,
+        onDrop: onDrop,
+        onDragEnter: onDragEnter,
+        onDragLeave: onDragLeave,
+        onDragOver: onDragOver,
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($59b5a0f5519b63e4$var$HiddenInput, {
+                ref: inputRef,
+                onPaste: onPaste
+            }),
+            children
+        ]
+    });
+});
+const $59b5a0f5519b63e4$var$HiddenInput = (0, ($parcel$interopDefault($dyHF6$styledcomponents))).input.attrs({
+    type: "text"
+})`
+  position: absolute;
+  border: 0;
+  color: white;
+  opacity: 0;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $71bea6581a27d1cb$var$HiddenInput = (0, ($parcel$interopDefault($dyHF6$styledcomponents))).input`
+  overflow: hidden;
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+`;
+const $71bea6581a27d1cb$var$Label = (0, ($parcel$interopDefault($dyHF6$styledcomponents))).label`
+  position: relative;
+`;
+const $71bea6581a27d1cb$export$c6c4e824471beee6 = ({ onSelect: onSelect , ...props })=>{
+    const inputId = `FileSelect${(0, $dyHF6$reachautoid.useId)()}`;
+    const inputRef = (0, $dyHF6$react.useRef)(null);
+    const handleSelect = (0, $dyHF6$react.useCallback)((event)=>{
+        if (onSelect) onSelect(event.target.files);
+    }, [
+        onSelect
+    ]);
+    const handleButtonClick = (0, $dyHF6$react.useCallback)(()=>inputRef.current?.click(), []);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)($71bea6581a27d1cb$var$Label, {
+        htmlFor: inputId,
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($71bea6581a27d1cb$var$HiddenInput, {
+                accept: "video/*",
+                ref: inputRef,
+                tabIndex: 0,
+                type: "file",
+                id: inputId,
+                onChange: handleSelect,
+                value: ""
+            }),
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                onClick: handleButtonClick,
+                mode: "default",
+                tone: "primary",
+                style: {
+                    width: "100%"
+                },
+                ...props
+            })
+        ]
+    });
+};
+
+
+const $c862462ae08f977b$var$UploadCard = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  && {
+    border-style: dashed;
+  }
+`;
+const $c862462ae08f977b$var$ConfigureApiBox = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Box))`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+function $c862462ae08f977b$export$2e2bcd8739ae039(props) {
+    const { setDialogState: setDialogState , readOnly: readOnly , onSelect: onSelect , hovering: hovering , needsSetup: needsSetup  } = props;
+    const handleBrowse = (0, $dyHF6$react.useCallback)(()=>setDialogState("select-video"), [
+        setDialogState
+    ]);
+    const handleConfigureApi = (0, $dyHF6$react.useCallback)(()=>setDialogState("secrets"), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+        style: {
+            padding: 1,
+            position: "relative"
+        },
+        height: "stretch",
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)($c862462ae08f977b$var$UploadCard, {
+            sizing: "border",
+            height: "fill",
+            tone: readOnly ? "transparent" : "inherit",
+            border: true,
+            padding: 3,
+            style: hovering ? {
+                borderColor: "transparent"
+            } : undefined,
+            children: [
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($c862462ae08f977b$var$ConfigureApiBox, {
+                    padding: 3,
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                        padding: 3,
+                        radius: 3,
+                        tone: needsSetup ? "critical" : undefined,
+                        onClick: handleConfigureApi,
+                        icon: (0, $dyHF6$sanityicons.PlugIcon),
+                        mode: "bleed"
+                    })
+                }),
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                    align: "center",
+                    justify: "space-between",
+                    gap: 4,
+                    direction: [
+                        "column",
+                        "column",
+                        "row"
+                    ],
+                    paddingY: [
+                        2,
+                        2,
+                        0
+                    ],
+                    sizing: "border",
+                    height: "fill",
+                    children: [
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                            align: "center",
+                            justify: "center",
+                            gap: 2,
+                            flex: 1,
+                            children: [
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                                    justify: "center",
+                                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                        muted: true,
+                                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityicons.DocumentVideoIcon), {})
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                                    justify: "center",
+                                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                        size: 1,
+                                        muted: true,
+                                        children: "Drag video or paste URL here"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Inline), {
+                            space: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $71bea6581a27d1cb$export$c6c4e824471beee6), {
+                                    mode: "ghost",
+                                    tone: "default",
+                                    icon: (0, $dyHF6$sanityicons.UploadIcon),
+                                    text: "Upload",
+                                    onSelect: onSelect
+                                }),
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                                    mode: "ghost",
+                                    icon: (0, $dyHF6$sanityicons.SearchIcon),
+                                    text: "Select",
+                                    onClick: handleBrowse
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+
+
+class $ee85957326065d04$var$MuxVideoInputUploader extends (0, $dyHF6$react.Component) {
+    state = {
+        isDraggingOver: false,
+        invalidPaste: false,
+        invalidFile: false,
+        uploadProgress: null,
+        fileInfo: null,
+        uuid: null,
+        error: null,
+        url: null
+    };
+    dragEnteredEls = [];
+    ctrlDown = false;
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the return values of uploadFile and uploadUrl
+    upload = null;
+    container = /*#__PURE__*/ (0, ($parcel$interopDefault($dyHF6$react))).createRef();
+    componentWillUnmount() {
+        this.unSubscribeToUpload();
+    }
+    componentDidMount() {
+        const events$ = new (0, $dyHF6$rxjs.Subject)();
+        this.onCancelUploadButtonClick$ = events$.asObservable();
+        this.handleCancelUploadButtonClick = (event)=>events$.next(event);
+    }
+    unSubscribeToUpload() {
+        if (this.upload && !this.upload.closed) this.upload.unsubscribe();
+    }
+    handleProgress = (evt)=>{
+        this.setState({
+            uploadProgress: evt.percent
+        });
+    };
+    onUpload = (files)=>{
+        this.setState({
+            uploadProgress: 0,
+            fileInfo: null,
+            uuid: null
+        });
+        this.upload = (0, $4a210fa13f9688e9$export$a5575dbeeffdad98)(this.props.config, this.props.client, files[0], {
+            enableSignedUrls: this.props.secrets.enableSignedUrls
+        }).pipe((0, $dyHF6$rxjsoperators.takeUntil)(this.onCancelUploadButtonClick$.pipe((0, $dyHF6$rxjsoperators.tap)(()=>{
+            if (this.state.uuid) this.props.client.delete(this.state.uuid);
+        })))).subscribe({
+            complete: ()=>{
+                this.setState({
+                    error: null,
+                    uploadProgress: null,
+                    uuid: null
+                });
+            },
+            next: (event)=>{
+                this.handleUploadEvent(event);
+            },
+            error: (err)=>{
+                this.setState({
+                    error: err,
+                    uploadProgress: null,
+                    uuid: null
+                });
+            }
+        });
+    };
+    // eslint-disable-next-line no-warning-comments
+    // @TODO add proper typings for the Observable events
+    handleUploadEvent = (event)=>{
+        switch(event.type){
+            case "success":
+                return this.handleUploadSuccess(event.asset);
+            case "progress":
+                return this.handleProgress(event);
+            case "file":
+                return this.setState({
+                    fileInfo: event.file
+                });
+            case "uuid":
+                // Means we created a mux.videoAsset document with an uuid
+                return this.setState({
+                    uuid: event.uuid
+                });
+            case "url":
+                return this.setState({
+                    url: event.url,
+                    uploadProgress: 100
+                });
+            default:
+                return null;
+        }
+    };
+    handleUploadSuccess = (asset)=>{
+        this.setState({
+            uploadProgress: 100
+        });
+        this.props.onChange((0, $dyHF6$sanityform.PatchEvent).from([
+            (0, $dyHF6$sanityform.setIfMissing)({
+                asset: {}
+            }),
+            (0, $dyHF6$sanityform.set)({
+                _type: "reference",
+                _weak: true,
+                _ref: asset._id
+            }, [
+                "asset"
+            ]), 
+        ]));
+    };
+    handlePaste = (event)=>{
+        const clipboardData = event.clipboardData || window.clipboardData;
+        const url = clipboardData.getData("text");
+        const options = {
+            enableSignedUrls: this.props.secrets.enableSignedUrls
+        };
+        this.upload = (0, $4a210fa13f9688e9$export$f35af194eb27b25f)(this.props.config, this.props.client, url, options).subscribe({
+            complete: ()=>{
+                this.setState({
+                    error: null,
+                    uploadProgress: null,
+                    url: null
+                });
+            },
+            next: (sEvent)=>{
+                this.handleUploadEvent(sEvent);
+            },
+            error: (err)=>{
+                let error;
+                // Don't output error dialog when just invalid url
+                if (!err.message.toLowerCase().match("invalid url")) error = err;
+                this.setState({
+                    invalidPaste: true,
+                    error: error
+                }, ()=>{
+                    setTimeout(()=>{
+                        this.setState({
+                            invalidPaste: false,
+                            uploadProgress: null
+                        });
+                    }, 2000);
+                });
+            }
+        });
+    };
+    handleDrop = (event)=>{
+        this.setState({
+            isDraggingOver: false
+        });
+        event.preventDefault();
+        event.stopPropagation();
+        (0, $94a513daa91cd04e$export$73f6d6d8d794f645)(event.nativeEvent.dataTransfer).then((files)=>{
+            if (files) // eslint-disable-next-line no-warning-comments
+            // @TODO fix the typing on files
+            this.onUpload(files);
+        });
+    };
+    handleDragOver = (event)=>{
+        event.preventDefault();
+        event.stopPropagation();
+    };
+    handleDragEnter = (event)=>{
+        event.stopPropagation();
+        this.dragEnteredEls.push(event.target);
+        this.setState({
+            isDraggingOver: true
+        });
+        const type = event.dataTransfer.items?.[0]?.type;
+        this.setState({
+            invalidFile: !type.startsWith("video/")
+        });
+    };
+    handleDragLeave = (event)=>{
+        event.stopPropagation();
+        const idx = this.dragEnteredEls.indexOf(event.target);
+        if (idx > -1) this.dragEnteredEls.splice(idx, 1);
+        if (this.dragEnteredEls.length === 0) this.setState({
+            isDraggingOver: false
+        });
+    };
+    render() {
+        if (this.state.uploadProgress !== null) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $18e643189121e331$export$98a3886347b629fb), {
+            onCancel: this.handleCancelUploadButtonClick,
+            progress: this.state.uploadProgress,
+            filename: this.state.fileInfo?.name || this.state.url
+        });
+        if (this.state.error) // @TODO better error handling
+        throw this.state.error;
+        return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+            children: [
+                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $59b5a0f5519b63e4$export$88f8ee83ae881d58), {
+                    tone: this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile) ? "critical" : this.state.isDraggingOver ? "positive" : undefined,
+                    onBlur: this.props.onBlur,
+                    onFocus: this.props.onFocus,
+                    onDrop: this.handleDrop,
+                    onDragOver: this.handleDragOver,
+                    onDragLeave: this.handleDragLeave,
+                    onDragEnter: this.handleDragEnter,
+                    onPaste: this.handlePaste,
+                    ref: this.container,
+                    children: this.props.asset ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $4b270840a4c34b64$export$2e2bcd8739ae039), {
+                        readOnly: this.props.readOnly,
+                        asset: this.props.asset,
+                        onChange: this.props.onChange,
+                        dialogState: this.props.dialogState,
+                        setDialogState: this.props.setDialogState,
+                        buttons: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $8a74cfcfbdb3efdf$export$2e2bcd8739ae039), {
+                            asset: this.props.asset,
+                            dialogState: this.props.dialogState,
+                            setDialogState: this.props.setDialogState,
+                            onChange: this.props.onChange,
+                            onUpload: this.onUpload,
+                            readOnly: this.props.readOnly
+                        })
+                    }) : /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $c862462ae08f977b$export$2e2bcd8739ae039), {
+                        hovering: this.state.isDraggingOver,
+                        onSelect: this.onUpload,
+                        readOnly: this.props.readOnly,
+                        setDialogState: this.props.setDialogState,
+                        needsSetup: this.props.needsSetup
+                    })
+                }),
+                this.props.dialogState === "select-video" && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $002b8d5a97e55801$export$2e2bcd8739ae039), {
+                    asset: this.props.asset,
+                    onChange: this.props.onChange,
+                    setDialogState: this.props.setDialogState
+                })
+            ]
+        });
+    }
+}
+var $ee85957326065d04$export$2e2bcd8739ae039 = $ee85957326065d04$var$MuxVideoInputUploader;
+
+
+
+
+
+
+
+
+
+
+const $624f4dcaee76afb6$export$e1d4ef4fde5dbdf2 = (client, secrets)=>{
+    return (0, $dyHF6$react.useCallback)(async ({ token: token , secretKey: secretKey , enableSignedUrls: enableSignedUrls  })=>{
+        let { signingKeyId: signingKeyId , signingKeyPrivate: signingKeyPrivate  } = secrets;
+        try {
+            await (0, $58acdddf66edce65$export$f16c6d66b9790f06)(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+            const valid = await (0, $58acdddf66edce65$export$3a1df1322191b3ef)(client);
+            if (!valid?.status && token && secretKey) throw new Error("Invalid secrets");
+        } catch (err) {
+            console.error("Error while trying to save secrets:", err);
+            throw err;
+        }
+        if (enableSignedUrls) {
+            const hasValidSigningKeys = await (0, $58acdddf66edce65$export$f5836111430d17bc)(client, signingKeyId, signingKeyPrivate);
+            if (!hasValidSigningKeys) try {
+                const { data: data  } = await (0, $58acdddf66edce65$export$21cc0cab779cfac1)(client);
+                signingKeyId = data.id;
+                signingKeyPrivate = data.private_key;
+                await (0, $58acdddf66edce65$export$f16c6d66b9790f06)(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+            } catch (err) {
+                // eslint-disable-next-line no-console
+                console.log("Error while creating and saving signing key:", err.message);
+                throw err;
+            }
+        }
+        return {
+            token: token,
+            secretKey: secretKey,
+            enableSignedUrls: enableSignedUrls,
+            signingKeyId: signingKeyId,
+            signingKeyPrivate: signingKeyPrivate
+        };
+    }, [
+        client,
+        secrets
+    ]);
+};
+
+
+
+function $2f6a2877401ba7f3$var$init({ token: token , secretKey: secretKey , enableSignedUrls: enableSignedUrls  }) {
+    return {
+        submitting: false,
+        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 ?? "",
+        secretKey: secretKey ?? "",
+        enableSignedUrls: enableSignedUrls ?? false
+    };
+}
+function $2f6a2877401ba7f3$var$reducer(state, action) {
+    switch(action?.type){
+        case "submit":
+            return {
+                ...state,
+                submitting: true,
+                error: null
+            };
+        case "error":
+            return {
+                ...state,
+                submitting: false,
+                error: action.payload
+            };
+        case "reset":
+            return $2f6a2877401ba7f3$var$init(action.payload);
+        case "change":
+            return {
+                ...state,
+                [action.payload.name]: action.payload.value
+            };
+        default:
+            throw new Error(`Unknown action type: ${action?.type}`);
+    }
+}
+const $2f6a2877401ba7f3$export$e24a74f4fce2446c = (secrets)=>(0, $dyHF6$react.useReducer)($2f6a2877401ba7f3$var$reducer, secrets, $2f6a2877401ba7f3$var$init);
+
+
+
+
+
+
+
+
+
+
+// Mapping ids to ensure filter refs are unique, otherwise all Logo instances are hidden if the first SVG is hidden, due to how SVGs deal with relative links and ids
+const $81c579b2354bfb4d$var$ids = [
+    "title",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r", 
+];
+function $81c579b2354bfb4d$export$2e2bcd8739ae039({ height: height = 26  }) {
+    const id = (0, $dyHF6$reachautoid.useId)();
+    const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = (0, $dyHF6$react.useMemo)(()=>$81c579b2354bfb4d$var$ids.map((field)=>`${id}-${field}`), [
+        id
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("title", {
+                id: titleId,
+                children: "Mux Logo"
+            }),
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)("defs", {
+                children: [
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: a,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: b,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M423.64 242h164.999V77H423.64Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: e,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: f,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M311.3 242h93.031V77H311.3Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: h,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M198.96 242h35.106V77H198.96Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: n,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("clipPath", {
+                        id: o,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("path", {
+                            d: "M69.067 242H169.12V141.947H69.067Z"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("g", {
+                clipPath: `url(#${a})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("g", {
+                    style: {
+                        opacity: 0.69999701
+                    },
+                    clipPath: `url(#${b})`,
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsxs)("g", {
+                clipPath: `url(#${e})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: [
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("g", {
+                        style: {
+                            opacity: 0.69999701
+                        },
+                        clipPath: `url(#${f})`,
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("g", {
+                        style: {
+                            opacity: 0.69999701
+                        },
+                        clipPath: `url(#${h})`,
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.jsx)("g", {
+                clipPath: `url(#${n})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("g", {
+                    style: {
+                        opacity: 0.69999701
+                    },
+                    clipPath: `url(#${o})`,
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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__*/ (0, $dyHF6$reactjsxruntime.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 $97292a102d486fd6$var$Logo = (0, ($parcel$interopDefault($dyHF6$styledcomponents))).span`
+  display: inline-block;
+  height: 0.8em;
+  margin-right: 1em;
+  transform: translate(0.3em, -0.2em);
+`;
+const $97292a102d486fd6$export$8b251419efc915eb = ()=>/*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($97292a102d486fd6$var$Logo, {
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $81c579b2354bfb4d$export$2e2bcd8739ae039), {
+                    height: 13
+                })
+            }),
+            "API Credentials"
+        ]
+    });
+
+
+
+
+
+function $696fc2bd3580ef7e$var$FormField(props) {
+    const { children: children , title: title , description: description , inputId: inputId  } = props;
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+        space: 1,
+        children: [
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                align: "flex-end",
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                    flex: 1,
+                    paddingY: 2,
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Stack), {
+                        space: 2,
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                            children: [
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                    as: "label",
+                                    htmlFor: inputId,
+                                    weight: "semibold",
+                                    size: 1,
+                                    children: title || /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("em", {
+                                        children: "Untitled"
+                                    })
+                                }),
+                                description && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                    muted: true,
+                                    size: 1,
+                                    children: description
+                                })
+                            ]
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+                children: children
+            })
+        ]
+    });
+}
+var $696fc2bd3580ef7e$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $dyHF6$react.memo)($696fc2bd3580ef7e$var$FormField);
+
+
+const $4a8a0e20ccb63ea2$var$fieldNames = [
+    "token",
+    "secretKey",
+    "enableSignedUrls"
+];
+function $4a8a0e20ccb63ea2$var$ConfigureApi({ secrets: secrets , setDialogState: setDialogState  }) {
+    const client = (0, $dyHF6$sanity.useClient)();
+    const [state, dispatch] = (0, $2f6a2877401ba7f3$export$e24a74f4fce2446c)(secrets);
+    const hasSecretsInitially = (0, $dyHF6$react.useMemo)(()=>secrets.token && secrets.secretKey, [
+        secrets
+    ]);
+    const handleClose = (0, $dyHF6$react.useCallback)(()=>setDialogState(false), [
+        setDialogState
+    ]);
+    const dirty = (0, $dyHF6$react.useMemo)(()=>secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [
+        secrets,
+        state
+    ]);
+    const id = `ConfigureApi${(0, $dyHF6$reachautoid.useId)()}`;
+    const [tokenId, secretKeyId, enableSignedUrlsId] = (0, $dyHF6$react.useMemo)(()=>$4a8a0e20ccb63ea2$var$fieldNames.map((field)=>`${id}-${field}`), [
+        id
+    ]);
+    const firstField = (0, $dyHF6$react.useRef)(null);
+    const handleSaveSecrets = (0, $624f4dcaee76afb6$export$e1d4ef4fde5dbdf2)(client, secrets);
+    const saving = (0, $dyHF6$react.useRef)(false);
+    const handleSubmit = (0, $dyHF6$react.useCallback)((event)=>{
+        event.preventDefault();
+        if (!saving.current && event.currentTarget.reportValidity()) {
+            saving.current = true;
+            dispatch({
+                type: "submit"
+            });
+            const { token: token , secretKey: secretKey , enableSignedUrls: enableSignedUrls  } = state;
+            handleSaveSecrets({
+                token: token,
+                secretKey: secretKey,
+                enableSignedUrls: enableSignedUrls
+            }).then((savedSecrets)=>{
+                const { projectId: projectId , dataset: dataset  } = client.config();
+                (0, $dyHF6$suspendreact.clear)([
+                    (0, $2ffcb7ef2a4a67d0$export$13cdb654d47e0703),
+                    (0, $edbbfc11873e0f23$export$9c7ae676ac45430a),
+                    projectId,
+                    dataset
+                ]);
+                (0, $dyHF6$suspendreact.preload)(()=>Promise.resolve(savedSecrets), [
+                    (0, $2ffcb7ef2a4a67d0$export$13cdb654d47e0703),
+                    (0, $edbbfc11873e0f23$export$9c7ae676ac45430a),
+                    projectId,
+                    dataset
+                ]);
+                setDialogState(false);
+            }).catch((err)=>dispatch({
+                    type: "error",
+                    payload: err.message
+                })).finally(()=>{
+                saving.current = false;
+            });
+        }
+    }, [
+        client,
+        dispatch,
+        handleSaveSecrets,
+        setDialogState,
+        state
+    ]);
+    const handleChangeToken = (0, $dyHF6$react.useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "token",
+                value: event.currentTarget.value
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    const handleChangeSecretKey = (0, $dyHF6$react.useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "secretKey",
+                value: event.currentTarget.value
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    const handleChangeEnableSignedUrls = (0, $dyHF6$react.useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "enableSignedUrls",
+                value: event.currentTarget.checked
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    (0, $dyHF6$react.useEffect)(()=>{
+        if (firstField.current) firstField.current.focus();
+    }, [
+        firstField
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Dialog), {
+        id: id,
+        onClose: handleClose,
+        header: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $97292a102d486fd6$export$8b251419efc915eb), {}),
+        width: 0,
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+            padding: 4,
+            style: {
+                position: "relative"
+            },
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("form", {
+                onSubmit: handleSubmit,
+                noValidate: true,
+                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                    space: 4,
+                    children: [
+                        !hasSecretsInitially && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                            padding: [
+                                3,
+                                3,
+                                3
+                            ],
+                            radius: 2,
+                            shadow: 1,
+                            tone: "primary",
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                                space: 3,
+                                children: [
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Text), {
+                                        size: 1,
+                                        children: [
+                                            "To set up a new access token, go to your",
+                                            " ",
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("a", {
+                                                href: "https://dashboard.mux.com/settings/access-tokens",
+                                                target: "_blank",
+                                                rel: "noreferrer noopener",
+                                                children: "account on mux.com"
+                                            }),
+                                            "."
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Text), {
+                                        size: 1,
+                                        children: [
+                                            "The access token needs permissions: ",
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("strong", {
+                                                children: "Mux Video "
+                                            }),
+                                            "(Full Access) and ",
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("strong", {
+                                                children: "Mux Data"
+                                            }),
+                                            " (Read)",
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("br", {}),
+                                            "The credentials will be stored safely in a hidden document only available to editors."
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $696fc2bd3580ef7e$export$2e2bcd8739ae039), {
+                            title: "Access Token",
+                            inputId: tokenId,
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.TextInput), {
+                                id: tokenId,
+                                ref: firstField,
+                                onChange: handleChangeToken,
+                                type: "text",
+                                value: state.token ?? "",
+                                required: !!state.secretKey || state.enableSignedUrls
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $696fc2bd3580ef7e$export$2e2bcd8739ae039), {
+                            title: "Secret Key",
+                            inputId: secretKeyId,
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.TextInput), {
+                                id: secretKeyId,
+                                onChange: handleChangeSecretKey,
+                                type: "text",
+                                value: state.secretKey ?? "",
+                                required: !!state.token || state.enableSignedUrls
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                            space: 4,
+                            children: [
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Checkbox), {
+                                            id: enableSignedUrlsId,
+                                            onChange: handleChangeEnableSignedUrls,
+                                            checked: state.enableSignedUrls,
+                                            style: {
+                                                display: "block"
+                                            }
+                                        }),
+                                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                                            flex: 1,
+                                            paddingLeft: 3,
+                                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("label", {
+                                                    htmlFor: enableSignedUrlsId,
+                                                    children: "Enable Signed Urls"
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                secrets.signingKeyId && state.enableSignedUrls ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                                    padding: [
+                                        3,
+                                        3,
+                                        3
+                                    ],
+                                    radius: 2,
+                                    shadow: 1,
+                                    tone: "caution",
+                                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Stack), {
+                                        space: 3,
+                                        children: [
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                                size: 1,
+                                                children: "The signing key ID that Sanity will use is:"
+                                            }),
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Code), {
+                                                size: 1,
+                                                children: secrets.signingKeyId
+                                            }),
+                                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Text), {
+                                                size: 1,
+                                                children: [
+                                                    "This key is only used for previewing content in the Sanity UI.",
+                                                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("br", {}),
+                                                    "You should generate a different key to use in your application server."
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Inline), {
+                            space: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                                    text: "Save",
+                                    disabled: !dirty,
+                                    loading: state.submitting,
+                                    tone: "primary",
+                                    mode: "default",
+                                    type: "submit"
+                                }),
+                                /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                                    disabled: state.submitting,
+                                    text: "Cancel",
+                                    mode: "bleed",
+                                    onClick: handleClose
+                                })
+                            ]
+                        }),
+                        state.error && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+                            padding: [
+                                3,
+                                3,
+                                3
+                            ],
+                            radius: 2,
+                            shadow: 1,
+                            tone: "critical",
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                                children: state.error
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+var $4a8a0e20ccb63ea2$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $dyHF6$react.memo)($4a8a0e20ccb63ea2$var$ConfigureApi);
+
+
+
+
+
+
+const $5f180d117773fee7$export$f0c88bc5a320387d = (0, ($parcel$interopDefault($dyHF6$styledcomponents)))((0, $dyHF6$sanityui.Card))`
+  aspect-ratio: 16 / 9;
+  position: relative;
+  width: 100%;
+`;
+const $5f180d117773fee7$export$18fe723e8683ca03 = ()=>{
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+        style: {
+            padding: 1
+        },
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+            shadow: 1,
+            sizing: "border",
+            style: {
+                aspectRatio: "16/9",
+                width: "100%",
+                borderRadius: "1px"
+            },
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+                align: "center",
+                direction: "column",
+                height: "fill",
+                justify: "center",
+                children: [
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Spinner), {
+                        muted: true
+                    }),
+                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                        marginTop: 3,
+                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                            align: "center",
+                            muted: true,
+                            size: 1,
+                            children: "Loading\u2026"
+                        })
+                    })
+                ]
+            })
+        })
+    });
+};
+
+
+
+
+
+
+
+function $20bd1aaec92888dd$export$2e2bcd8739ae039(props) {
+    const { setDialogState: setDialogState  } = props;
+    const handleOpen = (0, $dyHF6$react.useCallback)(()=>setDialogState("secrets"), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+            style: {
+                padding: 2
+            },
+            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.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__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
+                    justify: "flex-start",
+                    align: "center",
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Grid), {
+                        columns: 1,
+                        gap: [
+                            2,
+                            3,
+                            4,
+                            4
+                        ],
+                        children: [
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+                                    style: {
+                                        height: "32px"
+                                    },
+                                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $81c579b2354bfb4d$export$2e2bcd8739ae039), {})
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Heading), {
+                                    size: [
+                                        0,
+                                        1,
+                                        2,
+                                        2
+                                    ],
+                                    children: "Upload and preview videos directly from your studio."
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
+                                    mode: "ghost",
+                                    icon: (0, $dyHF6$sanityicons.PlugIcon),
+                                    text: "Configure API",
+                                    onClick: handleOpen
+                                })
+                            })
+                        ]
+                    })
+                })
+            })
+        })
+    });
+}
+
+
+const $6bca891f5dd9dfc9$var$Input = (props)=>{
+    const client = (0, $dyHF6$sanity.useClient)();
+    const secretDocumentValues = (0, $8a0ef7d2f7c4ca7e$export$4c2801830a129eb)();
+    const assetDocumentValues = (0, $eef844dd0892040d$export$e11a382d55e07f75)(props.value?.asset);
+    const poll = (0, $9427a85db5895988$export$fd270df25d7dbb88)(props.readOnly ? undefined : assetDocumentValues?.value || undefined);
+    const [dialogState, setDialogState] = (0, $af23ed16e7325a21$export$573903f1c655c034)();
+    const error = secretDocumentValues.error || assetDocumentValues.error || poll.error /*||
+    // @TODO move errored logic to Uploader, where handleRemoveVideo can be called
+    (assetDocumentValues.value?.status === 'errored'
+      ? new Error(assetDocumentValues.value.data?.errors?.messages?.join(' '))
+      : undefined)
+      // */ ;
+    if (error) // @TODO deal with it more gracefully
+    throw error;
+    const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$reactjsxruntime.Fragment), {
+        children: isLoading ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $5f180d117773fee7$export$18fe723e8683ca03), {}) : /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$reactjsxruntime.Fragment), {
+            children: [
+                secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $20bd1aaec92888dd$export$2e2bcd8739ae039), {
+                    setDialogState: setDialogState
+                }) : /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $ee85957326065d04$export$2e2bcd8739ae039), {
+                    ...props,
+                    client: client,
+                    secrets: secretDocumentValues.value.secrets,
+                    asset: assetDocumentValues.value,
+                    dialogState: dialogState,
+                    setDialogState: setDialogState,
+                    needsSetup: secretDocumentValues.value.needsSetup
+                }),
+                dialogState === "secrets" && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $4a8a0e20ccb63ea2$export$2e2bcd8739ae039), {
+                    setDialogState: setDialogState,
+                    secrets: secretDocumentValues.value.secrets
+                })
+            ]
+        })
+    });
+};
+var $6bca891f5dd9dfc9$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $dyHF6$react.memo)($6bca891f5dd9dfc9$var$Input);
+
+
+
+
+
+
+
+
+const $cbaf0acf64ca3573$var$MuxVideoPreview = ({ value: value  })=>{
+    const assetDocumentValues = (0, $eef844dd0892040d$export$e11a382d55e07f75)(value?.asset);
+    if (assetDocumentValues.value) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6de6709202a3b061$export$bd4b73f15688a160), {
+        asset: assetDocumentValues.value,
+        width: 640
+    });
+    // @ts-expect-error
+    const { filename: filename , playbackId: playbackId , status: status  } = value ?? {};
+    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanity_unstable.SanityDefaultPreview), {
+        title: filename || playbackId || "",
+        subtitle: status ? `status: ${status}` : null
+    });
+};
+var $cbaf0acf64ca3573$export$2e2bcd8739ae039 = $cbaf0acf64ca3573$var$MuxVideoPreview;
+
+
+
+
+const $75523cdda380b780$export$a8ff84c12d48cfa6 = "mux.videoAsset";
+const $75523cdda380b780$var$videoAsset = (0, $dyHF6$sanity.defineField)({
+    name: $75523cdda380b780$export$a8ff84c12d48cfa6,
+    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"
+        }, 
+    ]
+});
+var $75523cdda380b780$export$2e2bcd8739ae039 = $75523cdda380b780$var$videoAsset;
+
+
+const $ac55e63956aa9e84$export$a8ff84c12d48cfa6 = "mux.video";
+const $ac55e63956aa9e84$var$video = (0, $dyHF6$sanity.defineField)({
+    name: $ac55e63956aa9e84$export$a8ff84c12d48cfa6,
+    type: "object",
+    title: "Video asset reference",
+    fields: [
+        {
+            title: "Video",
+            name: "asset",
+            type: "reference",
+            weak: true,
+            to: [
+                {
+                    type: (0, $75523cdda380b780$export$a8ff84c12d48cfa6)
+                }
+            ]
+        }, 
+    ]
+});
+var $ac55e63956aa9e84$export$2e2bcd8739ae039 = $ac55e63956aa9e84$var$video;
+
+
+
+
+
+function $0c6ceed5d95aa3e9$export$c8119cbbd1c84da1(props) {
+    return (0, $dyHF6$sanity.isObjectSchemaType)(props.schemaType) && props.schemaType.type?.name === (0, $ac55e63956aa9e84$export$a8ff84c12d48cfa6);
+}
+function $0c6ceed5d95aa3e9$export$3542974c36e4d83f(props) {
+    return props.schemaType.type?.name === (0, $ac55e63956aa9e84$export$a8ff84c12d48cfa6);
+}
+
 
-const $329a1cedcedb1349$export$133773870222880f = /*#__PURE__*/ (0, $dyHF6$react.lazy)(()=>(parcelRequire("2vLfV")));
 const $329a1cedcedb1349$export$f84bd70098573c5c = {
     mp4_support: "none"
 };
@@ -345,12 +3933,12 @@ const $329a1cedcedb1349$export$4d2e76c338bb9fbd = (0, $dyHF6$sanity.createPlugin
         name: "mux-input",
         form: {
             renderInput (props, next) {
-                if ((0, $0c6ceed5d95aa3e9$export$c8119cbbd1c84da1)(props)) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $3PT7X.AspectRatioCard), {
+                if ((0, $0c6ceed5d95aa3e9$export$c8119cbbd1c84da1)(props)) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $5f180d117773fee7$export$f0c88bc5a320387d), {
                     children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $440e5e6a7a1a5e7d$export$2e2bcd8739ae039), {
                         schemaType: props.schemaType,
                         children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$react.Suspense), {
-                            fallback: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $3PT7X.InputFallback), {}),
-                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($329a1cedcedb1349$export$f5b8910cec6cf069, {
+                            fallback: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $5f180d117773fee7$export$18fe723e8683ca03), {}),
+                            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $6bca891f5dd9dfc9$export$2e2bcd8739ae039), {
                                 config: config,
                                 ...props
                             })
@@ -360,8 +3948,8 @@ const $329a1cedcedb1349$export$4d2e76c338bb9fbd = (0, $dyHF6$sanity.createPlugin
                 return next(props);
             },
             renderPreview (props, next) {
-                if ((0, $0c6ceed5d95aa3e9$export$3542974c36e4d83f)(props)) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $3PT7X.AspectRatioCard), {
-                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)($329a1cedcedb1349$export$133773870222880f, {
+                if ((0, $0c6ceed5d95aa3e9$export$3542974c36e4d83f)(props)) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $5f180d117773fee7$export$f0c88bc5a320387d), {
+                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $cbaf0acf64ca3573$export$2e2bcd8739ae039), {
                         ...props
                     })
                 });