sanity-plugin-mux-input 1.2.0-main.2 → 1.2.0-main.5

package/lib/cjs/index.js

@@ -1,86 +1,3751 @@
-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$scrollintoviewifneeded = require("scroll-into-view-if-needed");
-var $dyHF6$suspendreact = require("suspend-react");
-var $dyHF6$useerrorboundary = require("use-error-boundary");
+var $ayBmS$swchelperslib_object_spreadjs = require("@swc/helpers/lib/_object_spread.js");
+var $ayBmS$reactjsxruntime = require("react/jsx-runtime");
+var $ayBmS$react = require("react");
+var $ayBmS$sanity = require("sanity");
+var $ayBmS$sanityui = require("@sanity/ui");
+var $ayBmS$scrollintoviewifneeded = require("scroll-into-view-if-needed");
+var $ayBmS$suspendreact = require("suspend-react");
+var $ayBmS$useerrorboundary = require("use-error-boundary");
+var $ayBmS$swchelperslib_object_spread_propsjs = require("@swc/helpers/lib/_object_spread_props.js");
+var $ayBmS$sanity_unstable = require("sanity/_unstable");
+var $ayBmS$swr = require("swr");
+var $ayBmS$swchelperslib_define_propertyjs = require("@swc/helpers/lib/_define_property.js");
+var $ayBmS$rxjs = require("rxjs");
+var $ayBmS$rxjsoperators = require("rxjs/operators");
+var $ayBmS$sanityform = require("sanity/form");
+var $ayBmS$sanityuuid = require("@sanity/uuid");
+var $ayBmS$muxupchunk = require("@mux/upchunk");
+var $ayBmS$reachautoid = require("@reach/auto-id");
+var $ayBmS$sanityicons = require("@sanity/icons");
+var $ayBmS$motion = require("motion");
+var $ayBmS$styledcomponents = require("styled-components");
+var $ayBmS$usedevicepixelratio = require("use-device-pixel-ratio");
+var $ayBmS$jsonwebtokenesm = require("jsonwebtoken-esm");
+var $ayBmS$muxplaybackcore = require("@mux/playback-core");
+var $ayBmS$mediachromedistreact = require("media-chrome/dist/react");
+var $ayBmS$swchelperslib_object_without_propertiesjs = require("@swc/helpers/lib/_object_without_properties.js");
+var $ayBmS$reactis = require("react-is");
 
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
 function $parcel$export(e, n, v, s) {
   Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
 }
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
+
+$parcel$export(module.exports, "defaultConfig", function () { return $35eb69de8ff825b5$export$f84bd70098573c5c; });
+$parcel$export(module.exports, "muxInput", function () { return $35eb69de8ff825b5$export$4d2e76c338bb9fbd; });
+$parcel$export(module.exports, "Input", function () { return $7988e690e4a01972$export$2e2bcd8739ae039; });
+$parcel$export(module.exports, "Preview", function () { return $a1523ee7ee9b753a$export$2e2bcd8739ae039; });
+
+
+
+
+
+
+
+
+
+
+const $764163079c542eaf$export$a8ff84c12d48cfa6 = "mux-input";
+const $764163079c542eaf$export$13cdb654d47e0703 = "sanity-plugin-mux-input";
+const $764163079c542eaf$export$64952397958089dd = "secrets.mux";
+
+
+function $23a5e4ef1c8a3996$var$ErrorBoundaryCard(props) {
+    const { children: children , schemaType: schemaType  } = props;
+    const { push: pushToast  } = (0, $ayBmS$sanityui.useToast)();
+    const errorRef = (0, $ayBmS$react.useRef)(null);
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error , reset: reset  } = (0, $ayBmS$useerrorboundary.useErrorBoundary)({
+        onDidCatch: (err, errorInfo)=>{
+            console.group(err.toString());
+            console.groupCollapsed("console.error");
+            console.error(err);
+            console.groupEnd();
+            if (err.stack) {
+                console.groupCollapsed("error.stack");
+                console.log(err.stack);
+                console.groupEnd();
+            }
+            if (errorInfo === null || errorInfo === void 0 ? void 0 : errorInfo.componentStack) {
+                console.groupCollapsed("errorInfo.componentStack");
+                console.log(errorInfo.componentStack);
+                console.groupEnd();
+            }
+            console.groupEnd();
+            pushToast({
+                status: "error",
+                title: "Plugin crashed",
+                description: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                    align: "center",
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Inline), {
+                        space: 1,
+                        children: [
+                            "An error happened while rendering",
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                                padding: 1,
+                                fontSize: 1,
+                                style: {
+                                    transform: "translateY(1px)"
+                                },
+                                mode: "ghost",
+                                text: schemaType.title,
+                                onClick: ()=>{
+                                    if (errorRef.current) (0, ($parcel$interopDefault($ayBmS$scrollintoviewifneeded)))(errorRef.current, {
+                                        behavior: "smooth",
+                                        scrollMode: "if-needed",
+                                        block: "center"
+                                    });
+                                }
+                            })
+                        ]
+                    })
+                })
+            });
+        }
+    });
+    const handleRetry = (0, $ayBmS$react.useCallback)(()=>{
+        // Purge request cache before retrying, otherwise the cached errors will rethrow
+        (0, $ayBmS$suspendreact.clear)([
+            (0, $764163079c542eaf$export$a8ff84c12d48cfa6)
+        ]);
+        reset();
+    }, [
+        reset
+    ]);
+    if (didCatch) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+        ref: errorRef,
+        paddingX: [
+            2,
+            3,
+            4,
+            4
+        ],
+        height: "fill",
+        shadow: 1,
+        overflow: "auto",
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+            justify: "flex-start",
+            align: "center",
+            height: "fill",
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Grid), {
+                columns: 1,
+                gap: [
+                    2,
+                    3,
+                    4,
+                    4
+                ],
+                children: [
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Heading), {
+                        as: "h1",
+                        children: [
+                            "The ",
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("code", {
+                                children: (0, $764163079c542eaf$export$a8ff84c12d48cfa6)
+                            }),
+                            " plugin crashed"
+                        ]
+                    }),
+                    (error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                        padding: 3,
+                        tone: "critical",
+                        shadow: 1,
+                        radius: 2,
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                            children: error.message
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Inline), {
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                            onClick: handleRetry,
+                            text: "Retry"
+                        })
+                    })
+                ]
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)(ErrorBoundary, {
+        children: children
+    });
+}
+var $23a5e4ef1c8a3996$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $ayBmS$react.memo)($23a5e4ef1c8a3996$var$ErrorBoundaryCard);
+
+
+
+
+
+
+
+
+
+const $91e90464b4ca45aa$var$path = [
+    "assetId",
+    "data",
+    "playbackId",
+    "status",
+    "thumbTime",
+    "filename"
+];
+const $91e90464b4ca45aa$export$e11a382d55e07f75 = (asset)=>(0, $ayBmS$sanity_unstable.useDocumentValues)((0, $ayBmS$sanity.isReference)(asset) ? asset._ref : "", $91e90464b4ca45aa$var$path);
+
+
+
+function $8ea54a6e4798432c$export$573903f1c655c034() {
+    return (0, $ayBmS$react.useState)(false);
+}
+
+
+
+
+
+const $b098b0d885e904ff$export$fd270df25d7dbb88 = (asset)=>{
+    var ref3, ref1;
+    const client = (0, $ayBmS$sanity.useClient)();
+    const projectId = (0, $ayBmS$sanity.useProjectId)();
+    const dataset = (0, $ayBmS$sanity.useDataset)();
+    const shouldFetch = (0, $ayBmS$react.useMemo)(()=>{
+        var ref, ref2;
+        return !!(asset === null || asset === void 0 ? void 0 : asset.assetId) && ((asset === null || asset === void 0 ? void 0 : asset.status) === "preparing" || (asset === null || asset === void 0 ? void 0 : (ref = asset.data) === null || ref === void 0 ? void 0 : (ref2 = ref.static_renditions) === null || ref2 === void 0 ? void 0 : ref2.status) === "preparing");
+    }, [
+        asset === null || asset === void 0 ? void 0 : asset.assetId,
+        asset === null || asset === void 0 ? void 0 : (ref3 = asset.data) === null || ref3 === void 0 ? void 0 : (ref1 = ref3.static_renditions) === null || ref1 === void 0 ? void 0 : ref1.status,
+        asset === null || asset === void 0 ? void 0 : asset.status
+    ]);
+    return (0, ($parcel$interopDefault($ayBmS$swr)))(shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset === null || asset === void 0 ? void 0 : 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 $e0562e9a5cd26710$var$path = [
+    "token",
+    "secretKey",
+    "enableSignedUrls",
+    "signingKeyId",
+    "signingKeyPrivate"
+];
+const $e0562e9a5cd26710$export$4c2801830a129eb = ()=>{
+    const { error: error , isLoading: isLoading , value: value  } = (0, $ayBmS$sanity_unstable.useDocumentValues)((0, $764163079c542eaf$export$64952397958089dd), $e0562e9a5cd26710$var$path);
+    const cache = (0, $ayBmS$react.useMemo)(()=>{
+        const exists = Boolean(value);
+        const secrets = {
+            token: (value === null || value === void 0 ? void 0 : value.token) || null,
+            secretKey: (value === null || value === void 0 ? void 0 : value.secretKey) || null,
+            enableSignedUrls: (value === null || value === void 0 ? void 0 : value.enableSignedUrls) || false,
+            signingKeyId: (value === null || value === void 0 ? void 0 : value.signingKeyId) || null,
+            signingKeyPrivate: (value === null || value === void 0 ? void 0 : value.signingKeyPrivate) || null
+        };
+        return {
+            isInitialSetup: !exists,
+            needsSetup: !(secrets === null || secrets === void 0 ? void 0 : secrets.token) || !(secrets === null || secrets === void 0 ? void 0 : secrets.secretKey),
+            secrets: secrets
+        };
+    }, [
+        value
+    ]);
+    return {
+        error: error,
+        isLoading: isLoading,
+        value: cache
+    };
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $769e09a03b9726c9$export$ad6eab20b4b3876f(uuid, uploadUrl, source) {
+    return new (0, $ayBmS$rxjs.Observable)((subscriber)=>{
+        const upchunk = $ayBmS$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 $85b2a8cdf745d7d3$export$df987b50509121ea(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/assets/${dataset}/${assetId}`,
+        withCredentials: true,
+        method: "DELETE"
+    });
+}
+function $85b2a8cdf745d7d3$export$da446a5ee2572b7(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/assets/${dataset}/data/${assetId}`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+
+
+
+function $4d6664636d7d58e3$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 $4d6664636d7d58e3$export$21cc0cab779cfac1(client) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/signing-keys/${dataset}`,
+        withCredentials: true,
+        method: "POST"
+    });
+}
+function $4d6664636d7d58e3$export$3a1df1322191b3ef(client) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/secrets/${dataset}/test`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+async function $4d6664636d7d58e3$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 $4d6664636d7d58e3$export$7d1f83854429bc73(client) {
+    const { dataset: dataset  } = client.config();
+    return (0, $ayBmS$rxjs.defer)(()=>client.observable.request({
+            url: `/addons/mux/secrets/${dataset}/test`,
+            withCredentials: true,
+            method: "GET"
+        }));
+}
+
+
+function $12591da830e5242f$export$5130fb4c263997a4(client, uuid) {
+    return client.observable.request({
+        url: `/addons/mux/uploads/${client.clientConfig.dataset}/${uuid}`,
+        withCredentials: true,
+        method: "DELETE"
+    });
+}
+function $12591da830e5242f$export$f35af194eb27b25f(config, client, url, options = {}) {
+    return $12591da830e5242f$var$testUrl(url).pipe((0, $ayBmS$rxjsoperators.switchMap)((validUrl)=>{
+        return (0, $ayBmS$rxjs.concat)((0, $ayBmS$rxjs.of)({
+            type: "url",
+            url: validUrl
+        }), (0, $4d6664636d7d58e3$export$7d1f83854429bc73)(client).pipe((0, $ayBmS$rxjsoperators.switchMap)((json)=>{
+            if (!json || !json.status) return (0, $ayBmS$rxjs.throwError)(new Error("Invalid credentials"));
+            const uuid = (0, $ayBmS$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, $ayBmS$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, $ayBmS$rxjsoperators.mergeMap)((result)=>{
+                const asset = result && result.results && result.results[0] && result.results[0].document || null;
+                if (!asset) return (0, $ayBmS$rxjs.throwError)(new Error("No asset document returned"));
+                return (0, $ayBmS$rxjs.of)({
+                    type: "success",
+                    id: uuid,
+                    asset: asset
+                });
+            }));
+        })));
+    }));
+}
+function $12591da830e5242f$export$a5575dbeeffdad98(config, client, file, options = {}) {
+    return $12591da830e5242f$var$testFile(file).pipe((0, $ayBmS$rxjsoperators.switchMap)((fileOptions)=>{
+        return (0, $ayBmS$rxjs.concat)((0, $ayBmS$rxjs.of)({
+            type: "file",
+            file: fileOptions
+        }), (0, $4d6664636d7d58e3$export$7d1f83854429bc73)(client).pipe((0, $ayBmS$rxjsoperators.switchMap)((json)=>{
+            if (!json || !json.status) return (0, $ayBmS$rxjs.throwError)(new Error("Invalid credentials"));
+            const uuid = (0, $ayBmS$sanityuuid.uuid)();
+            const { enableSignedUrls: enableSignedUrls  } = options;
+            const body = {
+                mp4_support: config.mp4_support,
+                playback_policy: [
+                    enableSignedUrls ? "signed" : "public"
+                ]
+            };
+            return (0, $ayBmS$rxjs.concat)((0, $ayBmS$rxjs.of)({
+                type: "uuid",
+                uuid: uuid
+            }), (0, $ayBmS$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, $ayBmS$rxjsoperators.mergeMap)((result)=>{
+                return (0, $769e09a03b9726c9$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, $ayBmS$rxjsoperators.mergeMap)((event)=>{
+                    if (event.type !== "success") return (0, $ayBmS$rxjs.of)(event);
+                    return (0, $ayBmS$rxjs.from)($12591da830e5242f$var$updateAssetDocumentFromUpload(client, uuid)).pipe(// eslint-disable-next-line max-nested-callbacks
+                    (0, $ayBmS$rxjsoperators.mergeMap)((doc)=>(0, $ayBmS$rxjs.of)((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, event), {
+                            asset: doc
+                        }))));
+                }), // eslint-disable-next-line max-nested-callbacks
+                (0, $ayBmS$rxjsoperators.catchError)((err)=>{
+                    // Delete asset document
+                    return $12591da830e5242f$export$5130fb4c263997a4(client, uuid).pipe((0, $ayBmS$rxjsoperators.mergeMapTo)((0, $ayBmS$rxjs.throwError)(err)));
+                }));
+            })));
+        })));
+    }));
+}
+function $12591da830e5242f$export$38276c014c550f86(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/uploads/${dataset}/${assetId}`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+function $12591da830e5242f$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 $12591da830e5242f$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 $12591da830e5242f$var$updateAssetDocumentFromUpload(client, uuid) {
+    let upload;
+    let asset;
+    try {
+        upload = await $12591da830e5242f$var$pollUpload(client, uuid);
+    } catch (err) {
+        return Promise.reject(err);
+    }
+    try {
+        asset = await (0, $85b2a8cdf745d7d3$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 $12591da830e5242f$var$testFile(file) {
+    if (typeof window !== "undefined" && file instanceof window.File) {
+        const fileOptions = $12591da830e5242f$var$optionsFromFile({}, file);
+        return (0, $ayBmS$rxjs.of)(fileOptions);
+    }
+    return (0, $ayBmS$rxjs.throwError)(new Error("Invalid file"));
+}
+function $12591da830e5242f$var$testUrl(url) {
+    const error = new Error("Invalid URL");
+    if (typeof url !== "string") return (0, $ayBmS$rxjs.throwError)(error);
+    let parsed;
+    try {
+        parsed = new URL(url);
+    } catch (err) {
+        return (0, $ayBmS$rxjs.throwError)(error);
+    }
+    if (parsed && !parsed.protocol.match(/http:|https:/)) return (0, $ayBmS$rxjs.throwError)(error);
+    return (0, $ayBmS$rxjs.of)(url);
+}
+function $12591da830e5242f$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 $f981bc359ea69985$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 $f981bc359ea69985$var$normalizeItems(items).then((arr)=>arr.flat());
+}
+function $f981bc359ea69985$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 ? $f981bc359ea69985$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 $f981bc359ea69985$var$isFile(entry) {
+    return entry.isFile;
+}
+function $f981bc359ea69985$var$isDirectory(entry) {
+    return entry.isDirectory;
+}
+function $f981bc359ea69985$var$walk(entry) {
+    if ($f981bc359ea69985$var$isFile(entry)) return new Promise((resolve)=>entry.file(resolve)).then((file)=>[
+            file
+        ]);
+    if ($f981bc359ea69985$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($f981bc359ea69985$var$walk)).then((arr)=>arr.flat()));
+    }
+    return Promise.resolve([]);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $ca60bbd6b265fe38$export$9c7ae676ac45430a = "secrets.mux";
+function $ca60bbd6b265fe38$export$e6f48a1ef9de02f7(client) {
+    const { projectId: projectId , dataset: dataset  } = client.config();
+    return (0, $ayBmS$suspendreact.suspend)(async ()=>{
+        const data = await client.fetch(/* groq */ `*[_id == $_id][0]{
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      }`, {
+            _id: $ca60bbd6b265fe38$export$9c7ae676ac45430a
+        });
+        return {
+            token: (data === null || data === void 0 ? void 0 : data.token) || null,
+            secretKey: (data === null || data === void 0 ? void 0 : data.secretKey) || null,
+            enableSignedUrls: Boolean(data === null || data === void 0 ? void 0 : data.enableSignedUrls) || false,
+            signingKeyId: (data === null || data === void 0 ? void 0 : data.signingKeyId) || null,
+            signingKeyPrivate: (data === null || data === void 0 ? void 0 : data.signingKeyPrivate) || null
+        };
+    }, [
+        (0, $764163079c542eaf$export$13cdb654d47e0703),
+        $ca60bbd6b265fe38$export$9c7ae676ac45430a,
+        projectId,
+        dataset
+    ]);
+}
+
+
+function $66cd6455bd010559$export$87b96baf1080652a(client, playbackId, aud, payload) {
+    const { signingKeyId: signingKeyId , signingKeyPrivate: signingKeyPrivate  } = (0, $ca60bbd6b265fe38$export$e6f48a1ef9de02f7)(client);
+    if (!signingKeyId) throw new TypeError("Missing signingKeyId");
+    if (!signingKeyPrivate) throw new TypeError("Missing signingKeyPrivate");
+    /*
+  const {sign}: {sign: typeof import('jsonwebtoken-esm/sign')['default']} = suspend(async () => {
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const {default: sign} = await import('jsonwebtoken-esm/sign')
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    return {sign: (payload: any, secret: any, options: any) => sign(payload, secret, options)}
+  }, ['sanity-plugin-mux-input', 'jsonwebtoken-esm/sign'])
+  // */ return (0, $ayBmS$jsonwebtokenesm.sign)(payload ? JSON.parse(JSON.stringify(payload, (_, v)=>v !== null && v !== void 0 ? v : undefined)) : {}, atob(signingKeyPrivate), {
+        algorithm: "RS256",
+        keyid: signingKeyId,
+        audience: aud,
+        subject: playbackId,
+        noTimestamp: true,
+        expiresIn: "12h"
+    });
+}
+
+
+function $95c7e77a8fa5d84c$export$bdfa34d24bb44333(asset) {
+    if (!(asset === null || asset === void 0 ? void 0 : asset.playbackId)) {
+        console.error("Asset is missing a playbackId", {
+            asset: asset
+        });
+        throw new TypeError(`Missing playbackId`);
+    }
+    return asset.playbackId;
+}
+
+
+function $b22c582d9b0c45c1$export$f7d2546fac75bbd(asset) {
+    var ref, ref1, ref2;
+    var ref3;
+    return (ref3 = (ref = asset.data) === null || ref === void 0 ? void 0 : (ref1 = ref.playback_ids) === null || ref1 === void 0 ? void 0 : (ref2 = ref1[0]) === null || ref2 === void 0 ? void 0 : ref2.policy) !== null && ref3 !== void 0 ? ref3 : "public";
+}
+
+
+function $7c5f49510d59d596$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, $95c7e77a8fa5d84c$export$bdfa34d24bb44333)(asset);
+    let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v)=>v !== null && v !== void 0 ? v : undefined)));
+    if ((0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $66cd6455bd010559$export$87b96baf1080652a)(client, playbackId, "g", params);
+        searchParams = new URLSearchParams({
+            token: token
+        });
+    }
+    return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
+}
+
+
+
+
+
+
+function $f2ccfb00ca22d3aa$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, $95c7e77a8fa5d84c$export$bdfa34d24bb44333)(asset);
+    let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v)=>v !== null && v !== void 0 ? v : undefined)));
+    if ((0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $66cd6455bd010559$export$87b96baf1080652a)(client, playbackId, "t", params);
+        searchParams = new URLSearchParams({
+            token: token
+        });
+    }
+    return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
+}
+
+
+let $b4359f9e5317addd$var$_ = (t5)=>t5, $b4359f9e5317addd$var$t, $b4359f9e5317addd$var$t1, $b4359f9e5317addd$var$t2, $b4359f9e5317addd$var$t3, $b4359f9e5317addd$var$t4;
+const $b4359f9e5317addd$var$mediaDimensions = {
+    aspect: 16 / 9
+};
+const $b4359f9e5317addd$var$ImageLoader = /*#__PURE__*/ (0, $ayBmS$react.memo)(function ImageLoader({ alt: alt , src: src , height: height , width: width , aspectRatio: aspectRatio  }) {
+    (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("img", {
+        alt: alt,
+        src: src,
+        height: height,
+        width: width,
+        style: {
+            aspectRatio: aspectRatio
+        }
+    });
+});
+const $b4359f9e5317addd$var$VideoMediaPreview = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanity_unstable.MediaPreview))($b4359f9e5317addd$var$t || ($b4359f9e5317addd$var$t = $b4359f9e5317addd$var$_`
+  img {
+    object-fit: cover;
+  }
+`));
+const $b4359f9e5317addd$var$VideoMediaPreviewSignedSubtitle = ({ solo: solo  })=>{
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Inline), {
+        space: 1,
+        style: {
+            marginTop: solo ? "-1.35em" : undefined,
+            marginBottom: solo ? undefined : "0.35rem"
+        },
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityicons.LockIcon), {}),
+            "Signed playback policy"
+        ]
+    });
+};
+const $b4359f9e5317addd$var$PosterImage = ({ asset: asset , height: height , width: width , showTip: showTip  })=>{
+    const client = (0, $ayBmS$sanity.useClient)();
+    const src = (0, $f2ccfb00ca22d3aa$export$8081e7a11b9f1345)({
+        asset: asset,
+        client: client,
+        height: height,
+        width: width,
+        fit_mode: "smartcrop"
+    });
+    const subtitle = (0, $ayBmS$react.useMemo)(()=>showTip && (0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed" ? /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$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, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$VideoMediaPreview, {
+        mediaDimensions: $b4359f9e5317addd$var$mediaDimensions,
+        subtitle: subtitle,
+        title: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$reactjsxruntime.Fragment), {
+            children: null
+        }),
+        media: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$ImageLoader, {
+            alt: "",
+            src: src,
+            height: height,
+            width: width
+        })
+    });
+};
+const $b4359f9e5317addd$export$bd4b73f15688a160 = /*#__PURE__*/ (0, $ayBmS$react.memo)(function VideoThumbnail({ asset: asset , width: width , showTip: showTip  }) {
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error  } = (0, $ayBmS$useerrorboundary.useErrorBoundary)();
+    const height = Math.round(width * 9 / 16);
+    const subtitle = (0, $ayBmS$react.useMemo)(()=>showTip && (0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed" ? /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$VideoMediaPreviewSignedSubtitle, {}) : undefined, [
+        showTip,
+        asset
+    ]);
+    if (didCatch) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$VideoMediaPreview, {
+        subtitle: error.message,
+        mediaDimensions: $b4359f9e5317addd$var$mediaDimensions,
+        title: "Error when loading thumbnail",
+        media: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+            radius: 2,
+            height: "fill",
+            style: {
+                position: "relative",
+                width: "100%"
+            },
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0
+                },
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityicons.UnknownIcon), {})
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)(ErrorBoundary, {
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$react.Suspense), {
+            fallback: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$VideoMediaPreview, {
+                isPlaceholder: true,
+                title: "Loading thumbnail...",
+                subtitle: subtitle,
+                mediaDimensions: $b4359f9e5317addd$var$mediaDimensions
+            }),
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$PosterImage, {
+                showTip: showTip,
+                asset: asset,
+                height: height,
+                width: width
+            })
+        })
+    });
+});
+const $b4359f9e5317addd$var$AnimatedVideoMediaPreview = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanity_unstable.MediaPreview))($b4359f9e5317addd$var$t1 || ($b4359f9e5317addd$var$t1 = $b4359f9e5317addd$var$_`
+  img {
+    object-fit: contain;
+  }
+`));
+const $b4359f9e5317addd$var$AnimatedPosterImage = ({ asset: asset , width: width  })=>{
+    const client = (0, $ayBmS$sanity.useClient)();
+    const src = (0, $7c5f49510d59d596$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, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$AnimatedVideoMediaPreview, {
+        withBorder: false,
+        mediaDimensions: $b4359f9e5317addd$var$mediaDimensions,
+        media: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$ImageLoader, {
+            alt: "",
+            src: src,
+            width: width,
+            aspectRatio: "16:9"
+        })
+    });
+};
+const $b4359f9e5317addd$export$357b57aa2db6117e = /*#__PURE__*/ (0, $ayBmS$react.memo)(function AnimatedVideoThumbnail({ asset: asset , width: width  }) {
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch  } = (0, $ayBmS$useerrorboundary.useErrorBoundary)();
+    if (didCatch) return null;
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)(ErrorBoundary, {
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$react.Suspense), {
+            fallback: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$FancyBackdrop, {
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$VideoMediaPreview, {
+                    mediaDimensions: $b4359f9e5317addd$var$mediaDimensions,
+                    withBorder: false,
+                    media: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Spinner), {
+                        muted: true
+                    })
+                })
+            }),
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                height: "fill",
+                tone: "transparent",
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($b4359f9e5317addd$var$AnimatedPosterImage, {
+                    asset: asset,
+                    width: width
+                })
+            })
+        })
+    });
+});
+const $b4359f9e5317addd$var$FancyBackdrop = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Box))($b4359f9e5317addd$var$t2 || ($b4359f9e5317addd$var$t2 = $b4359f9e5317addd$var$_`
+  backdrop-filter: blur(8px) brightness(0.5) saturate(2);
+  mix-blend-mode: color-dodge;
+`));
+const $b4359f9e5317addd$export$e20c438ffc62921 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Grid))($b4359f9e5317addd$var$t3 || ($b4359f9e5317addd$var$t3 = $b4359f9e5317addd$var$_`
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+`));
+const $b4359f9e5317addd$export$7431cee690d58bc9 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($b4359f9e5317addd$var$t4 || ($b4359f9e5317addd$var$t4 = $b4359f9e5317addd$var$_`
+  border-top: 1px solid var(--card-border-color);
+  position: sticky;
+  bottom: 0;
+  z-index: 200;
+`));
+
+
+let $7a82b2aa05cc8aca$var$_ = (t2)=>t2, $7a82b2aa05cc8aca$var$t, $7a82b2aa05cc8aca$var$t1;
+function $7a82b2aa05cc8aca$var$AssetActionsMenu(props) {
+    const { asset: asset  } = props;
+    const id = (0, $ayBmS$reachautoid.useId)();
+    const [dialogState, setDialogState] = (0, $ayBmS$react.useState)();
+    const [open, setOpen] = (0, $ayBmS$react.useState)(false);
+    const [menuElement, setMenuRef] = (0, $ayBmS$react.useState)(null);
+    const handleDelete = (0, $ayBmS$react.useCallback)(()=>setDialogState("confirm-delete"), []);
+    const handleClick = (0, $ayBmS$react.useCallback)(()=>{
+        setDialogState(false);
+        setOpen(true);
+    }, [
+        setDialogState
+    ]);
+    const handleClose = (0, $ayBmS$react.useCallback)(()=>{
+        setDialogState(false);
+        setOpen(false);
+    }, [
+        setDialogState
+    ]);
+    (0, $ayBmS$react.useEffect)(()=>{
+        if (open && dialogState) setOpen(false);
+    }, [
+        dialogState,
+        open
+    ]);
+    (0, $ayBmS$sanityui.useClickOutside)((0, $ayBmS$react.useCallback)(()=>setOpen(false), []), [
+        menuElement
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuButton), {
+                id: `${id}-asset-menu`,
+                button: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                    icon: (0, $ayBmS$sanityicons.EllipsisVerticalIcon),
+                    mode: "ghost",
+                    onClick: handleClick,
+                    padding: 2
+                }),
+                menu: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Menu), {
+                    ref: setMenuRef,
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuItem), {
+                        tone: "critical",
+                        icon: (0, $ayBmS$sanityicons.TrashIcon),
+                        text: "Delete",
+                        onClick: handleDelete
+                    })
+                }),
+                portal: true,
+                placement: "right"
+            }),
+            dialogState === "confirm-delete" && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7a82b2aa05cc8aca$var$DeleteDialog, {
+                asset: asset,
+                onClose: handleClose
+            })
+        ]
+    });
+}
+function $7a82b2aa05cc8aca$var$DeleteDialog(props) {
+    const { asset: asset , onClose: onClose  } = props;
+    const client = (0, $ayBmS$sanity.useClient)();
+    const { push: pushToast  } = (0, $ayBmS$sanityui.useToast)();
+    const [deleting, setDeleting] = (0, $ayBmS$react.useState)(false);
+    const [deleteOnMux, setDeleteOnMux] = (0, $ayBmS$react.useState)(false);
+    const id = (0, $ayBmS$reachautoid.useId)();
+    const noPaddingOnStack = true;
+    const width = 200 * (0, $ayBmS$usedevicepixelratio.getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    const handleDelete = (0, $ayBmS$react.useCallback)(async ()=>{
+        setDeleting(true);
+        try {
+            var ref, ref1, ref2;
+            if (asset === null || asset === void 0 ? void 0 : asset._id) await client.delete(asset._id);
+            if (deleteOnMux && (asset === null || asset === void 0 ? void 0 : asset.assetId)) await (0, $85b2a8cdf745d7d3$export$df987b50509121ea)(client, asset.assetId);
+            (ref = document.querySelector(`[data-id="${asset._id}"]`)) === null || ref === void 0 ? void 0 : (ref1 = ref.parentElement) === null || ref1 === void 0 ? void 0 : (ref2 = ref1.setAttribute) === null || ref2 === void 0 ? void 0 : ref2.call(ref1, "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, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Dialog), {
+        onClose: onClose,
+        id: `${id}-confirm-delete`,
+        header: "Delete video",
+        footer: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Grid), {
+            padding: 2,
+            gap: 2,
+            columns: 2,
+            children: [
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                    mode: "bleed",
+                    text: "Cancel",
+                    onClick: onClose
+                }),
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                    text: "Delete",
+                    tone: "critical",
+                    icon: (0, $ayBmS$sanityicons.TrashIcon),
+                    onClick: handleDelete,
+                    loading: deleting
+                })
+            ]
+        }),
+        // __unstable_autoFocus
+        width: 1,
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Stack), {
+            paddingX: noPaddingOnStack ? 0 : [
+                2,
+                3,
+                4
+            ],
+            paddingY: noPaddingOnStack ? 0 : [
+                3,
+                3,
+                3,
+                4
+            ],
+            space: 1,
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                paddingX: [
+                    2,
+                    3,
+                    4
+                ],
+                paddingY: [
+                    3,
+                    3,
+                    3,
+                    4
+                ],
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Grid), {
+                    columns: 3,
+                    gap: 3,
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                            style: {
+                                gridColumn: "span 2"
+                            },
+                            align: "center",
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                                padding: 4,
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                                    space: 4,
+                                    children: [
+                                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+                                            align: "center",
+                                            as: "label",
+                                            children: [
+                                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Checkbox), {
+                                                    checked: deleteOnMux,
+                                                    onChange: ()=>setDeleteOnMux((prev)=>!prev)
+                                                }),
+                                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                                    style: {
+                                                        margin: "0 10px"
+                                                    },
+                                                    children: "Delete asset on Mux"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+                                            align: "center",
+                                            as: "label",
+                                            children: [
+                                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Checkbox), {
+                                                    disabled: true,
+                                                    checked: true
+                                                }),
+                                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                                    style: {
+                                                        margin: "0 10px"
+                                                    },
+                                                    children: "Delete video from dataset"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$bd4b73f15688a160), {
+                            asset: asset,
+                            width: width,
+                            showTip: true
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+function $7a82b2aa05cc8aca$export$2e2bcd8739ae039({ assets: assets , isLoading: isLoading , isLastPage: isLastPage , onSelect: onSelect , onLoadMore: onLoadMore  }) {
+    const handleClick = (0, $ayBmS$react.useCallback)((event)=>onSelect(event.currentTarget.dataset.id), [
+        onSelect
+    ]);
+    const handleKeyPress = (0, $ayBmS$react.useCallback)((event)=>{
+        if (event.key === "Enter") onSelect(event.currentTarget.dataset.id);
+    }, [
+        onSelect
+    ]);
+    const width = 200 * (0, $ayBmS$usedevicepixelratio.getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Box), {
+                padding: 4,
+                children: [
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$e20c438ffc62921), {
+                        gap: 2,
+                        children: assets.map((asset)=>/*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7a82b2aa05cc8aca$var$VideoSourceItem, {
+                                asset: asset,
+                                onClick: handleClick,
+                                onKeyPress: handleKeyPress,
+                                width: width
+                            }, asset._id))
+                    }),
+                    isLoading && assets.length === 0 && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                        justify: "center",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Spinner), {
+                            muted: true
+                        })
+                    }),
+                    !isLoading && assets.length === 0 && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                        align: "center",
+                        muted: true,
+                        children: "No videos"
+                    })
+                ]
+            }),
+            assets.length > 0 && !isLastPage && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$7431cee690d58bc9), {
+                tone: "default",
+                padding: 4,
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                    direction: "column",
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                        type: "button",
+                        icon: (0, $ayBmS$sanityicons.DownloadIcon),
+                        loading: isLoading,
+                        onClick: onLoadMore,
+                        text: "Load more",
+                        tone: "primary"
+                    })
+                })
+            })
+        ]
+    });
+}
+const $7a82b2aa05cc8aca$var$_VideoSourceItem = ({ asset: asset , onClick: onClick , onKeyPress: onKeyPress , width: width  })=>{
+    const [hover, setHover] = (0, $ayBmS$react.useState)(null);
+    const ref = (0, $ayBmS$react.useRef)(null);
+    (0, $ayBmS$react.useLayoutEffect)(()=>{
+        if (!ref.current || hover === null) return;
+        if (hover) (0, $ayBmS$motion.animate)(ref.current, {
+            opacity: 1
+        });
+        else (0, $ayBmS$motion.animate)(ref.current, {
+            opacity: 0
+        });
+    }, [
+        hover
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Box), {
+        height: "fill",
+        style: {
+            position: "relative"
+        },
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$bd4b73f15688a160), {
+                        asset: asset,
+                        width: width,
+                        showTip: true
+                    }),
+                    (asset === null || asset === void 0 ? void 0 : asset.playbackId) && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7a82b2aa05cc8aca$var$AnimateWrapper, {
+                        tone: "transparent",
+                        ref: ref,
+                        margin: 1,
+                        radius: 1,
+                        children: hover !== null && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$357b57aa2db6117e), {
+                            asset: asset,
+                            width: width
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7a82b2aa05cc8aca$var$ActionsAssetsContainer, {
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7a82b2aa05cc8aca$var$AssetActionsMenu, {
+                    asset: asset
+                })
+            })
+        ]
+    });
+};
+const $7a82b2aa05cc8aca$var$VideoSourceItem = /*#__PURE__*/ (0, $ayBmS$react.memo)($7a82b2aa05cc8aca$var$_VideoSourceItem);
+const $7a82b2aa05cc8aca$var$AnimateWrapper = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($7a82b2aa05cc8aca$var$t || ($7a82b2aa05cc8aca$var$t = $7a82b2aa05cc8aca$var$_`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  will-change: opacity;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+`));
+const $7a82b2aa05cc8aca$var$ActionsAssetsContainer = (0, ($parcel$interopDefault($ayBmS$styledcomponents))).div($7a82b2aa05cc8aca$var$t1 || ($7a82b2aa05cc8aca$var$t1 = $7a82b2aa05cc8aca$var$_`
+  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 $7011b51a60f6091d$var$PER_PAGE = 20;
+function $7011b51a60f6091d$var$createQuery(start = 0, end = $7011b51a60f6091d$var$PER_PAGE) {
+    return /* groq */ `*[_type == "mux.videoAsset"] | order(_updatedAt desc) [${start}...${end}]`;
+}
+function $7011b51a60f6091d$export$2e2bcd8739ae039({ asset: asset , onChange: onChange , setDialogState: setDialogState  }) {
+    const client = (0, $ayBmS$sanity.useClient)();
+    const pageNoRef = (0, $ayBmS$react.useRef)(0);
+    const [isLastPage, setLastPage] = (0, $ayBmS$react.useState)(false);
+    const [isLoading, setLoading] = (0, $ayBmS$react.useState)(false);
+    const [assets, setAssets] = (0, $ayBmS$react.useState)([]);
+    const fetchPage = (0, $ayBmS$react.useCallback)((pageNo)=>{
+        const start = pageNo * $7011b51a60f6091d$var$PER_PAGE;
+        const end = start + $7011b51a60f6091d$var$PER_PAGE;
+        setLoading(true);
+        return client.fetch($7011b51a60f6091d$var$createQuery(start, end)).then((result)=>{
+            setLastPage(result.length < $7011b51a60f6091d$var$PER_PAGE);
+            setAssets((prev)=>prev.concat(result));
+        }).finally(()=>setLoading(false));
+    }, [
+        client
+    ]);
+    const handleSelect = (0, $ayBmS$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, $ayBmS$sanityform.PatchEvent).from([
+            (0, $ayBmS$sanityform.setIfMissing)({
+                asset: {}
+            }),
+            (0, $ayBmS$sanityform.set)({
+                _type: "reference",
+                _weak: true,
+                _ref: selected._id
+            }, [
+                "asset"
+            ]), 
+        ]));
+        setDialogState(false);
+    }, [
+        assets,
+        onChange,
+        setDialogState
+    ]);
+    const handleLoadMore = (0, $ayBmS$react.useCallback)(()=>{
+        fetchPage(++pageNoRef.current);
+    }, [
+        fetchPage
+    ]);
+    (0, $ayBmS$react.useEffect)(()=>void fetchPage(pageNoRef.current), [
+        fetchPage
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $7a82b2aa05cc8aca$export$2e2bcd8739ae039), {
+        onSelect: handleSelect,
+        assets: assets,
+        isLastPage: isLastPage,
+        isLoading: isLoading,
+        onLoadMore: handleLoadMore
+    });
+}
+
+
+function $5f35306d1d1944f9$export$2e2bcd8739ae039({ setDialogState: setDialogState , asset: asset , onChange: onChange  }) {
+    const id = `InputBrowser${(0, $ayBmS$reachautoid.useId)()}`;
+    const handleClose = (0, $ayBmS$react.useCallback)(()=>setDialogState(false), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Dialog), {
+        scheme: "dark",
+        __unstable_autoFocus: true,
+        header: "Select video",
+        id: id,
+        onClose: handleClose,
+        width: 2,
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $7011b51a60f6091d$export$2e2bcd8739ae039), {
+            asset: asset,
+            onChange: onChange,
+            setDialogState: setDialogState
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+const $df118f8f4f291a25$export$b07ce35d92a46f4b = (asset, onChange)=>{
+    const client = (0, $ayBmS$sanity.useClient)();
+    return (0, $ayBmS$react.useCallback)(()=>{
+        if (!asset) return;
+        onChange((0, $ayBmS$sanityform.PatchEvent).from((0, $ayBmS$sanityform.unset)()));
+        if (asset.assetId) (0, $85b2a8cdf745d7d3$export$df987b50509121ea)(client, asset.assetId);
+        if (asset._id) client.delete(asset._id);
+    }, [
+        asset,
+        client,
+        onChange
+    ]);
+};
+
+
+
+
+
+function $7d093cbbd5ecccea$export$b704b622b4125987({ asset: asset , client: client  }) {
+    const playbackId = (0, $95c7e77a8fa5d84c$export$bdfa34d24bb44333)(asset);
+    const searchParams = new URLSearchParams();
+    if ((0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $66cd6455bd010559$export$87b96baf1080652a)(client, playbackId, "v");
+        searchParams.set("token", token);
+    }
+    return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+}
+
+
+
+
+
+
+
+
+
+
+
+function $8bba2dccded136a6$export$2e2bcd8739ae039({ asset: asset , getCurrentTime: getCurrentTime , setDialogState: setDialogState  }) {
+    const client = (0, $ayBmS$sanity.useClient)();
+    const dialogId = `EditThumbnailDialog${(0, $ayBmS$reachautoid.useId)()}`;
+    const nextTime = (0, $ayBmS$react.useMemo)(()=>getCurrentTime(), [
+        getCurrentTime
+    ]);
+    const assetWithNewThumbnail = (0, $ayBmS$react.useMemo)(()=>(0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, asset), {
+            thumbTime: nextTime
+        }), [
+        asset,
+        nextTime
+    ]);
+    const [saving, setSaving] = (0, $ayBmS$react.useState)(false);
+    const [error, setError] = (0, $ayBmS$react.useState)(null);
+    const handleSave = (0, $ayBmS$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, $ayBmS$usedevicepixelratio.getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    if (error) // eslint-disable-next-line no-warning-comments
+    // @TODO handle errors more gracefully
+    throw error;
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Dialog), {
+        id: dialogId,
+        header: "Edit thumbnail",
+        onClose: ()=>setDialogState(false),
+        footer: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Stack), {
+            padding: 3,
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                mode: "ghost",
+                tone: "primary",
+                loading: saving,
+                onClick: handleSave,
+                text: "Set new thumbnail"
+            }, "thumbnail")
+        }),
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+            space: 3,
+            padding: 3,
+            children: [
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                    space: 2,
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                            size: 1,
+                            weight: "semibold",
+                            children: "Current:"
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$bd4b73f15688a160), {
+                            asset: asset,
+                            width: width
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                    space: 2,
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                            size: 1,
+                            weight: "semibold",
+                            children: "New:"
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$bd4b73f15688a160), {
+                            asset: assetWithNewThumbnail,
+                            width: width
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function $903f6e8094d64e93$export$445f1a1fda135dc9({ asset: asset , client: client  }) {
+    const playbackId = (0, $95c7e77a8fa5d84c$export$bdfa34d24bb44333)(asset);
+    const searchParams = new URLSearchParams();
+    if ((0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $66cd6455bd010559$export$87b96baf1080652a)(client, playbackId, "s");
+        searchParams.set("token", token);
+    }
+    return `https://image.mux.com/${playbackId}/storyboard.vtt?${searchParams}`;
+}
+
+
+let $f42279f82eb87901$var$_ = (t3)=>t3, $f42279f82eb87901$var$t, $f42279f82eb87901$var$t1, $f42279f82eb87901$var$t2;
+const $f42279f82eb87901$export$b302ef9d8310f71 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($f42279f82eb87901$var$t || ($f42279f82eb87901$var$t = $f42279f82eb87901$var$_`
+  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 $f42279f82eb87901$export$ec21f2fe322b745c = (0, ($parcel$interopDefault($ayBmS$styledcomponents))).div($f42279f82eb87901$var$t1 || ($f42279f82eb87901$var$t1 = $f42279f82eb87901$var$_`
+  && {
+    --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 $f42279f82eb87901$export$fa0cb91fe5adf3c5 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$mediachromedistreact.MediaControlBar))($f42279f82eb87901$var$t2 || ($f42279f82eb87901$var$t2 = $f42279f82eb87901$var$_`
+  justify-content: flex-end;
+  button {
+    height: auto;
+  }
+`));
+function $f42279f82eb87901$export$5ebdf79245c1c64a({ asset: asset  }) {
+    const client = (0, $ayBmS$sanity.useClient)();
+    const ref = (0, $ayBmS$react.useRef)(null);
+    const src = (0, $ayBmS$react.useMemo)(()=>(0, $f2ccfb00ca22d3aa$export$8081e7a11b9f1345)({
+            client: client,
+            asset: asset,
+            width: 1920,
+            height: 1080
+        }), [
+        client,
+        asset
+    ]);
+    (0, $ayBmS$react.useEffect)(()=>{
+        if (ref.current) {
+            var ref1;
+            const style = document.createElement("style");
+            style.innerHTML = "img { object-fit: contain; }";
+            if ((ref1 = ref.current) === null || ref1 === void 0 ? void 0 : ref1.shadowRoot) ref.current.shadowRoot.appendChild(style);
+        }
+    }, []);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaPosterImage), {
+        ref: ref,
+        slot: "poster",
+        src: src
+    });
+}
+function $f42279f82eb87901$export$95073c0c4bf2add1({ asset: asset  }) {
+    const client = (0, $ayBmS$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, $ayBmS$react.useState)(()=>(0, $903f6e8094d64e93$export$445f1a1fda135dc9)({
+            asset: asset,
+            client: client
+        }));
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("track", {
+        label: "thumbnails",
+        default: true,
+        kind: "metadata",
+        src: src
+    });
+}
+
+
+
+
+
+
+
+let $e3b6eafb04e90e95$var$_ = (t4)=>t4, $e3b6eafb04e90e95$var$t, $e3b6eafb04e90e95$var$t1, $e3b6eafb04e90e95$var$t2, $e3b6eafb04e90e95$var$t3;
+const $e3b6eafb04e90e95$export$6aa22a823032b784 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($e3b6eafb04e90e95$var$t || ($e3b6eafb04e90e95$var$t = $e3b6eafb04e90e95$var$_`
+  min-height: 82px;
+  box-sizing: border-box;
+`));
+const $e3b6eafb04e90e95$export$245cfede9308c835 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Flex))($e3b6eafb04e90e95$var$t1 || ($e3b6eafb04e90e95$var$t1 = $e3b6eafb04e90e95$var$_`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`));
+const $e3b6eafb04e90e95$export$e3b4754a92ccf466 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Stack))($e3b6eafb04e90e95$var$t2 || ($e3b6eafb04e90e95$var$t2 = $e3b6eafb04e90e95$var$_`
+  position: relative;
+  width: 60%;
+`));
+const $e3b6eafb04e90e95$export$bedb6b8ab184f038 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Code))($e3b6eafb04e90e95$var$t3 || ($e3b6eafb04e90e95$var$t3 = $e3b6eafb04e90e95$var$_`
+  position: relative;
+  width: 100%;
+
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 200px;
+  }
+`));
+const $e3b6eafb04e90e95$export$98a3886347b629fb = ({ progress: progress = 100 , onCancel: onCancel , filename: filename , text: text = "Uploading"  })=>{
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($e3b6eafb04e90e95$export$6aa22a823032b784, {
+        tone: "primary",
+        padding: 4,
+        border: true,
+        height: "fill",
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)($e3b6eafb04e90e95$export$245cfede9308c835, {
+            align: "center",
+            justify: "space-between",
+            height: "fill",
+            direction: "row",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)($e3b6eafb04e90e95$export$e3b4754a92ccf466, {
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                            justify: "center",
+                            gap: [
+                                3,
+                                3,
+                                2,
+                                2
+                            ],
+                            direction: [
+                                "column",
+                                "column",
+                                "row"
+                            ],
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                size: 1,
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Inline), {
+                                    space: 2,
+                                    children: [
+                                        text,
+                                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($e3b6eafb04e90e95$export$bedb6b8ab184f038, {
+                                            size: 1,
+                                            children: filename ? filename : "..."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                            marginTop: 3,
+                            radius: 5,
+                            shadow: 1,
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanity_unstable.LinearProgress), {
+                                value: progress
+                            })
+                        })
+                    ]
+                }),
+                onCancel ? /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                    fontSize: 2,
+                    text: "Cancel upload",
+                    mode: "ghost",
+                    tone: "critical",
+                    onClick: onCancel
+                }) : null
+            ]
+        })
+    });
+};
+
+
+const $ab86d4653880d8ea$var$MuxVideo = ({ asset: asset , buttons: buttons , readOnly: readOnly , onChange: onChange , dialogState: dialogState , setDialogState: setDialogState  })=>{
+    var ref8, ref1, ref2, ref3;
+    const client = (0, $ayBmS$sanity.useClient)();
+    const isLoading = (0, $ayBmS$react.useMemo)(()=>{
+        if ((asset === null || asset === void 0 ? void 0 : asset.status) === "preparing") return "Preparing the video";
+        if ((asset === null || asset === void 0 ? void 0 : asset.status) === "waiting_for_upload") return "Waiting for upload to start";
+        if ((asset === null || asset === void 0 ? void 0 : asset.status) === "waiting") return "Processing upload";
+        if ((asset === null || asset === void 0 ? void 0 : asset.status) === "ready") return false;
+        if (typeof (asset === null || asset === void 0 ? void 0 : asset.status) === "undefined") return false;
+        return true;
+    }, [
+        asset
+    ]);
+    const isPreparingStaticRenditions = (0, $ayBmS$react.useMemo)(()=>{
+        var ref, ref5, ref6, ref7;
+        if ((asset === null || asset === void 0 ? void 0 : (ref = asset.data) === null || ref === void 0 ? void 0 : (ref5 = ref.static_renditions) === null || ref5 === void 0 ? void 0 : ref5.status) === "preparing") return true;
+        if ((asset === null || asset === void 0 ? void 0 : (ref6 = asset.data) === null || ref6 === void 0 ? void 0 : (ref7 = ref6.static_renditions) === null || ref7 === void 0 ? void 0 : ref7.status) === "ready") return false;
+        return false;
+    }, [
+        asset === null || asset === void 0 ? void 0 : (ref8 = asset.data) === null || ref8 === void 0 ? void 0 : (ref1 = ref8.static_renditions) === null || ref1 === void 0 ? void 0 : ref1.status
+    ]);
+    const videoSrc = (0, $ayBmS$react.useMemo)(()=>asset.playbackId && (0, $7d093cbbd5ecccea$export$b704b622b4125987)({
+            client: client,
+            asset: asset
+        }), [
+        asset,
+        client
+    ]);
+    const [error, setError] = (0, $ayBmS$react.useState)(null);
+    const handleError = (0, $ayBmS$react.useCallback)((event)=>setError(event.currentTarget.error), []);
+    const playRef = (0, $ayBmS$react.useRef)(null);
+    const muteRef = (0, $ayBmS$react.useRef)(null);
+    const video = (0, $ayBmS$react.useRef)(null);
+    var ref4;
+    const getCurrentTime = (0, $ayBmS$react.useCallback)(()=>{
+        var ref;
+        return (ref4 = (ref = video.current) === null || ref === void 0 ? void 0 : ref.currentTime) !== null && ref4 !== void 0 ? ref4 : 0;
+    }, [
+        video
+    ]);
+    const handleCancelUpload = (0, $df118f8f4f291a25$export$b07ce35d92a46f4b)(asset, onChange);
+    (0, $ayBmS$react.useEffect)(()=>{
+        var ref, ref9;
+        const style = document.createElement("style");
+        style.innerHTML = "button svg { vertical-align: middle; }";
+        if ((ref = playRef.current) === null || ref === void 0 ? void 0 : ref.shadowRoot) playRef.current.shadowRoot.appendChild(style);
+        if (muteRef === null || muteRef === void 0 ? void 0 : (ref9 = muteRef.current) === null || ref9 === void 0 ? void 0 : ref9.shadowRoot) muteRef.current.shadowRoot.appendChild(style.cloneNode(true));
+    }, []);
+    const [playerInitTime] = (0, $ayBmS$react.useState)(()=>(0, $ayBmS$muxplaybackcore.generatePlayerInitTime)());
+    const playbackEngineRef = (0, $ayBmS$react.useRef)(undefined);
+    (0, $ayBmS$react.useEffect)(()=>{
+        if (isLoading || !videoSrc) return;
+        const nextPlaybackEngineRef = (0, $ayBmS$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, $ayBmS$react.useEffect)(()=>{
+        if ((asset === null || asset === void 0 ? void 0 : asset.status) === "errored") {
+            var ref, ref10, ref11;
+            handleCancelUpload();
+            // eslint-disable-next-line no-warning-comments
+            // @TODO use better error handling
+            throw new Error((ref = asset.data) === null || ref === void 0 ? void 0 : (ref10 = ref.errors) === null || ref10 === void 0 ? void 0 : (ref11 = ref10.messages) === null || ref11 === void 0 ? void 0 : ref11.join(" "));
+        }
+    }, [
+        (ref2 = asset.data) === null || ref2 === void 0 ? void 0 : (ref3 = ref2.errors) === null || ref3 === void 0 ? void 0 : ref3.messages,
+        asset === null || asset === void 0 ? void 0 : asset.status,
+        handleCancelUpload
+    ]);
+    if (error) // @TODO better error handling
+    throw error;
+    if (!asset || !asset.status) return null;
+    if (isLoading) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $e3b6eafb04e90e95$export$98a3886347b629fb), {
+        progress: 100,
+        filename: asset === null || asset === void 0 ? void 0 : asset.filename,
+        text: isLoading !== true && isLoading || "Waiting for Mux to complete the file",
+        onCancel: readOnly ? undefined : ()=>handleCancelUpload()
+    });
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $f42279f82eb87901$export$b302ef9d8310f71), {
+                shadow: 1,
+                tone: "transparent",
+                scheme: "dark",
+                children: [
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$mediachromedistreact.MediaController), {
+                        children: [
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("video", {
+                                playsInline: true,
+                                ref: video,
+                                onError: handleError,
+                                slot: "media",
+                                preload: "metadata",
+                                crossOrigin: "anonomous",
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $f42279f82eb87901$export$95073c0c4bf2add1), {
+                                    asset: asset
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $f42279f82eb87901$export$5ebdf79245c1c64a), {
+                                asset: asset
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaLoadingIndicator), {
+                                slot: "centered-chrome",
+                                noAutoHide: true
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $f42279f82eb87901$export$ec21f2fe322b745c), {
+                                slot: "centered-chrome",
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaPlayButton), {})
+                            }),
+                            buttons && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $f42279f82eb87901$export$fa0cb91fe5adf3c5), {
+                                slot: "top-chrome",
+                                children: buttons
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$mediachromedistreact.MediaControlBar), {
+                                children: [
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaMuteButton), {}),
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaTimeDisplay), {}),
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaTimeRange), {}),
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaDurationDisplay), {}),
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$mediachromedistreact.MediaFullscreenButton), {})
+                                ]
+                            })
+                        ]
+                    }),
+                    isPreparingStaticRenditions && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                        padding: 2,
+                        radius: 1,
+                        style: {
+                            background: "var(--card-fg-color)",
+                            position: "absolute",
+                            top: "0.5em",
+                            left: "0.5em"
+                        },
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                            size: 1,
+                            style: {
+                                color: "var(--card-bg-color)"
+                            },
+                            children: "MUX is preparing static renditions, please stand by"
+                        })
+                    })
+                ]
+            }),
+            dialogState === "edit-thumbnail" && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $8bba2dccded136a6$export$2e2bcd8739ae039), {
+                asset: asset,
+                getCurrentTime: getCurrentTime,
+                setDialogState: setDialogState
+            })
+        ]
+    });
+};
+var $ab86d4653880d8ea$export$2e2bcd8739ae039 = $ab86d4653880d8ea$var$MuxVideo;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $d5b4dfea215935be$export$a79bcc1dc439e294(border) {
+    return `inset 0 0 0 ${border.width}px ${border.color}`;
+}
+function $d5b4dfea215935be$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 && $d5b4dfea215935be$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(",");
+}
+
+
+let $3e9b63b1a24e1c3d$var$_ = (t1)=>t1, $3e9b63b1a24e1c3d$var$t;
+const $3e9b63b1a24e1c3d$export$de1df6cdafc19206 = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$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, $ayBmS$styledcomponents.css)($3e9b63b1a24e1c3d$var$t || ($3e9b63b1a24e1c3d$var$t = $3e9b63b1a24e1c3d$var$_`
+    position: relative;
+
+    &:not([data-disabled='true']) {
+      &:focus-within {
+        box-shadow: ${0};
+      }
+    }
+
+    & 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;
+    }
+  `), (0, $d5b4dfea215935be$export$c339ddc20364daad)({
+        base: base,
+        border: border,
+        focusRing: focusRing
+    }));
+});
+
+
+var $50a0d51ee493b3cc$export$c1c647ae58701638 = /*#__PURE__*/ (0, ($parcel$interopDefault($ayBmS$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  } = props, rest = (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_without_propertiesjs)))(props, [
+        "icon",
+        "id",
+        "accept",
+        "capture",
+        "fontSize",
+        "multiple",
+        "onSelect",
+        "padding",
+        "space",
+        "textAlign",
+        "text",
+        "disabled"
+    ]);
+    const id = (0, $ayBmS$reachautoid.useId)(idProp);
+    const handleChange = (0, ($parcel$interopDefault($ayBmS$react))).useCallback((event)=>{
+        if (onSelect && event.target.files) onSelect(Array.from(event.target.files));
+    }, [
+        onSelect
+    ]);
+    const content = /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+        align: "center",
+        justify: "flex-start",
+        padding: padding,
+        children: [
+            icon && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                marginRight: text ? space : undefined,
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Text), {
+                    size: fontSize,
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$react.isValidElement)(icon) && icon,
+                        (0, $ayBmS$reactis.isValidElementType)(icon) && /*#__PURE__*/ (0, $ayBmS$react.createElement)(icon)
+                    ]
+                })
+            }),
+            text && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                align: textAlign,
+                size: fontSize,
+                textOverflow: "ellipsis",
+                children: text
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $3e9b63b1a24e1c3d$export$de1df6cdafc19206), (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, rest), {
+        htmlFor: id,
+        padding: 0,
+        fontSize: 2,
+        disabled: disabled,
+        ref: forwardedRef,
+        children: [
+            content,
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("input", {
+                "data-testid": "file-button-input",
+                accept: accept,
+                capture: capture,
+                id: id,
+                multiple: multiple,
+                onChange: handleChange,
+                type: "file",
+                value: "",
+                disabled: disabled
+            })
+        ]
+    }));
+});
+
+
+let $c5963d9d2157fdda$var$_ = (t2)=>t2, $c5963d9d2157fdda$var$t, $c5963d9d2157fdda$var$t1;
+const $c5963d9d2157fdda$var$LockCard = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($c5963d9d2157fdda$var$t || ($c5963d9d2157fdda$var$t = $c5963d9d2157fdda$var$_`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.6;
+  mix-blend-mode: screen;
+  background: transparent;
+`));
+const $c5963d9d2157fdda$var$LockButton = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Button))($c5963d9d2157fdda$var$t1 || ($c5963d9d2157fdda$var$t1 = $c5963d9d2157fdda$var$_`
+  background: transparent;
+  color: white;
+`));
+function $c5963d9d2157fdda$var$PlayerActionsMenu(props) {
+    const { asset: asset , readOnly: readOnly , dialogState: dialogState , setDialogState: setDialogState , onChange: onChange , onUpload: onUpload  } = props;
+    const [open, setOpen] = (0, $ayBmS$react.useState)(false);
+    const [menuElement, setMenuRef] = (0, $ayBmS$react.useState)(null);
+    const isSigned = (0, $ayBmS$react.useMemo)(()=>(0, $b22c582d9b0c45c1$export$f7d2546fac75bbd)(asset) === "signed", [
+        asset
+    ]);
+    const onReset = (0, $ayBmS$react.useCallback)(()=>onChange((0, $ayBmS$sanityform.PatchEvent).from((0, $ayBmS$sanityform.unset)([]))), [
+        onChange
+    ]);
+    (0, $ayBmS$react.useEffect)(()=>{
+        if (open && dialogState) setOpen(false);
+    }, [
+        dialogState,
+        open
+    ]);
+    (0, $ayBmS$sanityui.useClickOutside)((0, $ayBmS$react.useCallback)(()=>setOpen(false), []), [
+        menuElement
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Inline), {
+        space: 1,
+        padding: 2,
+        children: [
+            isSigned && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Tooltip), {
+                content: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                    padding: 2,
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                        muted: true,
+                        size: 1,
+                        children: "Signed playback policy"
+                    })
+                }),
+                placement: "right",
+                portal: true,
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($c5963d9d2157fdda$var$LockCard, {
+                    radius: 2,
+                    margin: 2,
+                    scheme: "dark",
+                    tone: "positive",
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($c5963d9d2157fdda$var$LockButton, {
+                        icon: (0, $ayBmS$sanityicons.LockIcon),
+                        mode: "bleed",
+                        tone: "positive"
+                    })
+                })
+            }),
+            !readOnly && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                icon: (0, $ayBmS$sanityicons.EditIcon),
+                mode: "ghost",
+                onClick: ()=>setDialogState("edit-thumbnail")
+            }),
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Popover), {
+                content: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Menu), {
+                    ref: setMenuRef,
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                            padding: 2,
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Label), {
+                                muted: true,
+                                size: 1,
+                                children: "Replace"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $50a0d51ee493b3cc$export$c1c647ae58701638), {
+                            accept: "video/*",
+                            icon: (0, $ayBmS$sanityicons.UploadIcon),
+                            mode: "bleed",
+                            onSelect: onUpload,
+                            text: "Upload",
+                            disabled: readOnly,
+                            fontSize: 2
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuItem), {
+                            icon: (0, $ayBmS$sanityicons.SearchIcon),
+                            text: "Browse",
+                            onClick: ()=>setDialogState("select-video")
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuDivider), {}),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuItem), {
+                            icon: (0, $ayBmS$sanityicons.PlugIcon),
+                            text: "Configure API",
+                            onClick: ()=>setDialogState("secrets")
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuDivider), {}),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.MenuItem), {
+                            tone: "critical",
+                            icon: (0, $ayBmS$sanityicons.ResetIcon),
+                            text: "Clear field",
+                            onClick: onReset,
+                            disabled: readOnly
+                        })
+                    ]
+                }),
+                portal: true,
+                open: open,
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                    icon: (0, $ayBmS$sanityicons.EllipsisVerticalIcon),
+                    mode: "ghost",
+                    onClick: ()=>{
+                        setDialogState(false);
+                        setOpen(true);
+                    }
+                })
+            })
+        ]
+    });
+}
+var $c5963d9d2157fdda$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $ayBmS$react.memo)($c5963d9d2157fdda$var$PlayerActionsMenu);
+
+
+
+
+
+
+
+
+
+let $ecb87a73d452358c$var$_ = (t1)=>t1, $ecb87a73d452358c$var$t;
+function $ecb87a73d452358c$export$ed320981107bc6bd(component) {
+    return (0, ($parcel$interopDefault($ayBmS$styledcomponents)))(component)((props)=>{
+        const border = {
+            width: props.$border ? 1 : 0,
+            color: "var(--card-border-color)"
+        };
+        return (0, $ayBmS$styledcomponents.css)($ecb87a73d452358c$var$t || ($ecb87a73d452358c$var$t = $ecb87a73d452358c$var$_`
+        --card-focus-box-shadow: ${0};
+
+        border-radius: ${0};
+        outline: none;
+        box-shadow: var(--card-focus-box-shadow);
+
+        &:focus {
+          --card-focus-box-shadow: ${0};
+        }
+      `), (0, $d5b4dfea215935be$export$a79bcc1dc439e294)(border), (0, $ayBmS$sanityui.rem)(props.theme.sanity.radius[1]), (0, $d5b4dfea215935be$export$c339ddc20364daad)({
+            base: props.theme.sanity.color.base,
+            border: border,
+            focusRing: props.theme.sanity.focusRing
+        }));
+    });
+}
+
+
+
+
+let $acf777e43722fa61$var$_ = (t1)=>t1, $acf777e43722fa61$var$t;
+const $acf777e43722fa61$var$ctrlKey = 17;
+const $acf777e43722fa61$var$cmdKey = 91;
+const $acf777e43722fa61$var$UploadCardWithFocusRing = (0, $ecb87a73d452358c$export$ed320981107bc6bd)((0, $ayBmS$sanityui.Card));
+const $acf777e43722fa61$export$88f8ee83ae881d58 = /*#__PURE__*/ (0, $ayBmS$react.forwardRef)(({ children: children , tone: tone , onPaste: onPaste , onFocus: onFocus , onBlur: onBlur , onDrop: onDrop , onDragEnter: onDragEnter , onDragLeave: onDragLeave , onDragOver: onDragOver  }, forwardedRef)=>{
+    const ctrlDown = (0, $ayBmS$react.useRef)(false);
+    const inputRef = (0, $ayBmS$react.useRef)(null);
+    const handleKeyDown = (0, $ayBmS$react.useCallback)((event)=>{
+        if (event.keyCode == $acf777e43722fa61$var$ctrlKey || event.keyCode == $acf777e43722fa61$var$cmdKey) ctrlDown.current = true;
+        const vKey = 86;
+        if (ctrlDown.current && event.keyCode == vKey) inputRef.current.focus();
+    }, []);
+    const handleKeyUp = (0, $ayBmS$react.useCallback)((event)=>{
+        if (event.keyCode == $acf777e43722fa61$var$ctrlKey || event.keyCode == $acf777e43722fa61$var$cmdKey) ctrlDown.current = false;
+    }, []);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)($acf777e43722fa61$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, $ayBmS$reactjsxruntime.jsx)($acf777e43722fa61$var$HiddenInput, {
+                ref: inputRef,
+                onPaste: onPaste
+            }),
+            children
+        ]
+    });
+});
+const $acf777e43722fa61$var$HiddenInput = (0, ($parcel$interopDefault($ayBmS$styledcomponents))).input.attrs({
+    type: "text"
+})($acf777e43722fa61$var$t || ($acf777e43722fa61$var$t = $acf777e43722fa61$var$_`
+  position: absolute;
+  border: 0;
+  color: white;
+  opacity: 0;
+
+  &:focus {
+    outline: none;
+  }
+`));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+let $7cd23a424037c874$var$_ = (t2)=>t2, $7cd23a424037c874$var$t, $7cd23a424037c874$var$t1;
+const $7cd23a424037c874$var$HiddenInput = (0, ($parcel$interopDefault($ayBmS$styledcomponents))).input($7cd23a424037c874$var$t || ($7cd23a424037c874$var$t = $7cd23a424037c874$var$_`
+  overflow: hidden;
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+`));
+const $7cd23a424037c874$var$Label = (0, ($parcel$interopDefault($ayBmS$styledcomponents))).label($7cd23a424037c874$var$t1 || ($7cd23a424037c874$var$t1 = $7cd23a424037c874$var$_`
+  position: relative;
+`));
+var $7cd23a424037c874$export$c6c4e824471beee6 = (_param)=>{
+    var { onSelect: onSelect  } = _param, props = (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_without_propertiesjs)))(_param, [
+        "onSelect"
+    ]);
+    const inputId = `FileSelect${(0, $ayBmS$reachautoid.useId)()}`;
+    const inputRef = (0, $ayBmS$react.useRef)(null);
+    const handleSelect = (0, $ayBmS$react.useCallback)((event)=>{
+        if (onSelect) onSelect(event.target.files);
+    }, [
+        onSelect
+    ]);
+    const handleButtonClick = (0, $ayBmS$react.useCallback)(()=>{
+        var ref;
+        return (ref = inputRef.current) === null || ref === void 0 ? void 0 : ref.click();
+    }, []);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)($7cd23a424037c874$var$Label, {
+        htmlFor: inputId,
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7cd23a424037c874$var$HiddenInput, {
+                accept: "video/*",
+                ref: inputRef,
+                tabIndex: 0,
+                type: "file",
+                id: inputId,
+                onChange: handleSelect,
+                value: ""
+            }),
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({
+                onClick: handleButtonClick,
+                mode: "default",
+                tone: "primary",
+                style: {
+                    width: "100%"
+                }
+            }, props))
+        ]
+    });
+};
+
+
+let $7570d589af81e056$var$_ = (t2)=>t2, $7570d589af81e056$var$t, $7570d589af81e056$var$t1;
+const $7570d589af81e056$var$UploadCard = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($7570d589af81e056$var$t || ($7570d589af81e056$var$t = $7570d589af81e056$var$_`
+  && {
+    border-style: dashed;
+  }
+`));
+const $7570d589af81e056$var$ConfigureApiBox = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Box))($7570d589af81e056$var$t1 || ($7570d589af81e056$var$t1 = $7570d589af81e056$var$_`
+  position: absolute;
+  top: 0;
+  right: 0;
+`));
+function $7570d589af81e056$export$2e2bcd8739ae039(props) {
+    const { setDialogState: setDialogState , readOnly: readOnly , onSelect: onSelect , hovering: hovering , needsSetup: needsSetup  } = props;
+    const handleBrowse = (0, $ayBmS$react.useCallback)(()=>setDialogState("select-video"), [
+        setDialogState
+    ]);
+    const handleConfigureApi = (0, $ayBmS$react.useCallback)(()=>setDialogState("secrets"), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+        style: {
+            padding: 1,
+            position: "relative"
+        },
+        height: "stretch",
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)($7570d589af81e056$var$UploadCard, {
+            sizing: "border",
+            height: "fill",
+            tone: readOnly ? "transparent" : "inherit",
+            border: true,
+            padding: 3,
+            style: hovering ? {
+                borderColor: "transparent"
+            } : undefined,
+            children: [
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($7570d589af81e056$var$ConfigureApiBox, {
+                    padding: 3,
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                        padding: 3,
+                        radius: 3,
+                        tone: needsSetup ? "critical" : undefined,
+                        onClick: handleConfigureApi,
+                        icon: (0, $ayBmS$sanityicons.PlugIcon),
+                        mode: "bleed"
+                    })
+                }),
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+                    align: "center",
+                    justify: "space-between",
+                    gap: 4,
+                    direction: [
+                        "column",
+                        "column",
+                        "row"
+                    ],
+                    paddingY: [
+                        2,
+                        2,
+                        0
+                    ],
+                    sizing: "border",
+                    height: "fill",
+                    children: [
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+                            align: "center",
+                            justify: "center",
+                            gap: 2,
+                            flex: 1,
+                            children: [
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                                    justify: "center",
+                                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                        muted: true,
+                                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityicons.DocumentVideoIcon), {})
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                                    justify: "center",
+                                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                        size: 1,
+                                        muted: true,
+                                        children: "Drag video or paste URL here"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Inline), {
+                            space: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $7cd23a424037c874$export$c6c4e824471beee6), {
+                                    mode: "ghost",
+                                    tone: "default",
+                                    icon: (0, $ayBmS$sanityicons.UploadIcon),
+                                    text: "Upload",
+                                    onSelect: onSelect
+                                }),
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                                    mode: "ghost",
+                                    icon: (0, $ayBmS$sanityicons.SearchIcon),
+                                    text: "Select",
+                                    onClick: handleBrowse
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+
+
+class $e43e21f1b2fe430e$var$MuxVideoInputUploader extends (0, $ayBmS$react.Component) {
+    componentWillUnmount() {
+        this.unSubscribeToUpload();
+    }
+    componentDidMount() {
+        const events$ = new (0, $ayBmS$rxjs.Subject)();
+        this.onCancelUploadButtonClick$ = events$.asObservable();
+        this.handleCancelUploadButtonClick = (event)=>events$.next(event);
+    }
+    unSubscribeToUpload() {
+        if (this.upload && !this.upload.closed) this.upload.unsubscribe();
+    }
+    render() {
+        var ref;
+        if (this.state.uploadProgress !== null) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $e3b6eafb04e90e95$export$98a3886347b629fb), {
+            onCancel: this.handleCancelUploadButtonClick,
+            progress: this.state.uploadProgress,
+            filename: ((ref = this.state.fileInfo) === null || ref === void 0 ? void 0 : ref.name) || this.state.url
+        });
+        if (this.state.error) // @TODO better error handling
+        throw this.state.error;
+        return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$reactjsxruntime.Fragment), {
+            children: [
+                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $acf777e43722fa61$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, $ayBmS$reactjsxruntime.jsx)((0, $ab86d4653880d8ea$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, $ayBmS$reactjsxruntime.jsx)((0, $c5963d9d2157fdda$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, $ayBmS$reactjsxruntime.jsx)((0, $7570d589af81e056$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, $ayBmS$reactjsxruntime.jsx)((0, $5f35306d1d1944f9$export$2e2bcd8739ae039), {
+                    asset: this.props.asset,
+                    onChange: this.props.onChange,
+                    setDialogState: this.props.setDialogState
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args);
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "state", {
+            isDraggingOver: false,
+            invalidPaste: false,
+            invalidFile: false,
+            uploadProgress: null,
+            fileInfo: null,
+            uuid: null,
+            error: null,
+            url: null
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "dragEnteredEls", []);
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "ctrlDown", false);
+        // eslint-disable-next-line no-warning-comments
+        // @TODO add proper typings for the return values of uploadFile and uploadUrl
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "upload", null);
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "container", /*#__PURE__*/ (0, ($parcel$interopDefault($ayBmS$react))).createRef());
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "handleProgress", (evt)=>{
+            this.setState({
+                uploadProgress: evt.percent
+            });
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "onUpload", (files)=>{
+            this.setState({
+                uploadProgress: 0,
+                fileInfo: null,
+                uuid: null
+            });
+            this.upload = (0, $12591da830e5242f$export$a5575dbeeffdad98)(this.props.config, this.props.client, files[0], {
+                enableSignedUrls: this.props.secrets.enableSignedUrls
+            }).pipe((0, $ayBmS$rxjsoperators.takeUntil)(this.onCancelUploadButtonClick$.pipe((0, $ayBmS$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
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "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;
+            }
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "handleUploadSuccess", (asset)=>{
+            this.setState({
+                uploadProgress: 100
+            });
+            this.props.onChange((0, $ayBmS$sanityform.PatchEvent).from([
+                (0, $ayBmS$sanityform.setIfMissing)({
+                    asset: {}
+                }),
+                (0, $ayBmS$sanityform.set)({
+                    _type: "reference",
+                    _weak: true,
+                    _ref: asset._id
+                }, [
+                    "asset"
+                ]), 
+            ]));
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "handlePaste", (event)=>{
+            const clipboardData = event.clipboardData || window.clipboardData;
+            const url = clipboardData.getData("text");
+            const options = {
+                enableSignedUrls: this.props.secrets.enableSignedUrls
+            };
+            this.upload = (0, $12591da830e5242f$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);
+                    });
+                }
+            });
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "handleDrop", (event)=>{
+            this.setState({
+                isDraggingOver: false
+            });
+            event.preventDefault();
+            event.stopPropagation();
+            (0, $f981bc359ea69985$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);
+            });
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "handleDragOver", (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "handleDragEnter", (event)=>{
+            var ref, ref1;
+            event.stopPropagation();
+            this.dragEnteredEls.push(event.target);
+            this.setState({
+                isDraggingOver: true
+            });
+            const type = (ref = event.dataTransfer.items) === null || ref === void 0 ? void 0 : (ref1 = ref[0]) === null || ref1 === void 0 ? void 0 : ref1.type;
+            this.setState({
+                invalidFile: !type.startsWith("video/")
+            });
+        });
+        (0, ($parcel$interopDefault($ayBmS$swchelperslib_define_propertyjs)))(this, "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
+            });
+        });
+    }
+}
+var $e43e21f1b2fe430e$export$2e2bcd8739ae039 = $e43e21f1b2fe430e$var$MuxVideoInputUploader;
+
+
+
+
+
+
+
+
+
+
+const $efecc0530b43438c$export$e1d4ef4fde5dbdf2 = (client, secrets)=>{
+    return (0, $ayBmS$react.useCallback)(async ({ token: token , secretKey: secretKey , enableSignedUrls: enableSignedUrls  })=>{
+        let { signingKeyId: signingKeyId , signingKeyPrivate: signingKeyPrivate  } = secrets;
+        try {
+            await (0, $4d6664636d7d58e3$export$f16c6d66b9790f06)(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+            const valid = await (0, $4d6664636d7d58e3$export$3a1df1322191b3ef)(client);
+            if (!(valid === null || valid === void 0 ? void 0 : 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, $4d6664636d7d58e3$export$f5836111430d17bc)(client, signingKeyId, signingKeyPrivate);
+            if (!hasValidSigningKeys) try {
+                const { data: data  } = await (0, $4d6664636d7d58e3$export$21cc0cab779cfac1)(client);
+                signingKeyId = data.id;
+                signingKeyPrivate = data.private_key;
+                await (0, $4d6664636d7d58e3$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 $f23684a2b0635ab0$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 !== null && token !== void 0 ? token : "",
+        secretKey: secretKey !== null && secretKey !== void 0 ? secretKey : "",
+        enableSignedUrls: enableSignedUrls !== null && enableSignedUrls !== void 0 ? enableSignedUrls : false
+    };
+}
+function $f23684a2b0635ab0$var$reducer(state, action) {
+    switch(action === null || action === void 0 ? void 0 : action.type){
+        case "submit":
+            return (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, state), {
+                submitting: true,
+                error: null
+            });
+        case "error":
+            return (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, state), {
+                submitting: false,
+                error: action.payload
+            });
+        case "reset":
+            return $f23684a2b0635ab0$var$init(action.payload);
+        case "change":
+            return (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, state), {
+                [action.payload.name]: action.payload.value
+            });
+        default:
+            throw new Error(`Unknown action type: ${action === null || action === void 0 ? void 0 : action.type}`);
+    }
+}
+const $f23684a2b0635ab0$export$e24a74f4fce2446c = (secrets)=>(0, $ayBmS$react.useReducer)($f23684a2b0635ab0$var$reducer, secrets, $f23684a2b0635ab0$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 $e3a8039a3d28e592$var$ids = [
+    "title",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r", 
+];
+function $e3a8039a3d28e592$export$2e2bcd8739ae039({ height: height = 26  }) {
+    const id = (0, $ayBmS$reachautoid.useId)();
+    const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = (0, $ayBmS$react.useMemo)(()=>$e3a8039a3d28e592$var$ids.map((field)=>`${id}-${field}`), [
+        id
+    ]);
+    return /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("title", {
+                id: titleId,
+                children: "Mux Logo"
+            }),
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)("defs", {
+                children: [
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: a,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: b,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M423.64 242h164.999V77H423.64Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: e,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: f,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M311.3 242h93.031V77H311.3Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: h,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M198.96 242h35.106V77H198.96Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: n,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("clipPath", {
+                        id: o,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("path", {
+                            d: "M69.067 242H169.12V141.947H69.067Z"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("g", {
+                clipPath: `url(#${a})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("g", {
+                    style: {
+                        opacity: 0.69999701
+                    },
+                    clipPath: `url(#${b})`,
+                    children: /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$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, $ayBmS$reactjsxruntime.jsxs)("g", {
+                clipPath: `url(#${e})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: [
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("g", {
+                        style: {
+                            opacity: 0.69999701
+                        },
+                        clipPath: `url(#${f})`,
+                        children: /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("g", {
+                        style: {
+                            opacity: 0.69999701
+                        },
+                        clipPath: `url(#${h})`,
+                        children: /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$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, $ayBmS$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, $ayBmS$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, $ayBmS$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, $ayBmS$reactjsxruntime.jsx)("g", {
+                clipPath: `url(#${n})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("g", {
+                    style: {
+                        opacity: 0.69999701
+                    },
+                    clipPath: `url(#${o})`,
+                    children: /*#__PURE__*/ (0, $ayBmS$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, $ayBmS$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, $ayBmS$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)"
+            })
+        ]
+    });
 }
-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;
+let $11947e4b4e6f3883$var$_ = (t1)=>t1, $11947e4b4e6f3883$var$t;
+const $11947e4b4e6f3883$var$Logo = (0, ($parcel$interopDefault($ayBmS$styledcomponents))).span($11947e4b4e6f3883$var$t || ($11947e4b4e6f3883$var$t = $11947e4b4e6f3883$var$_`
+  display: inline-block;
+  height: 0.8em;
+  margin-right: 1em;
+  transform: translate(0.3em, -0.2em);
+`));
+const $11947e4b4e6f3883$export$8b251419efc915eb = ()=>/*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$reactjsxruntime.Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)($11947e4b4e6f3883$var$Logo, {
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $e3a8039a3d28e592$export$2e2bcd8739ae039), {
+                    height: 13
+                })
+            }),
+            "API Credentials"
+        ]
+    });
+
+
+
+
+
+function $4c82d5f60ad56557$var$FormField(props) {
+    const { children: children , title: title , description: description , inputId: inputId  } = props;
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+        space: 1,
+        children: [
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                align: "flex-end",
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                    flex: 1,
+                    paddingY: 2,
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Stack), {
+                        space: 2,
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+                            children: [
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                    as: "label",
+                                    htmlFor: inputId,
+                                    weight: "semibold",
+                                    size: 1,
+                                    children: title || /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("em", {
+                                        children: "Untitled"
+                                    })
+                                }),
+                                description && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                    muted: true,
+                                    size: 1,
+                                    children: description
+                                })
+                            ]
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("div", {
+                children: children
+            })
+        ]
+    });
 }
-parcelRequire.register("bf6Cb", function(module, exports) {
+var $4c82d5f60ad56557$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $ayBmS$react.memo)($4c82d5f60ad56557$var$FormField);
 
-$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";
 
-});
+const $56bacf7dc6478771$var$fieldNames = [
+    "token",
+    "secretKey",
+    "enableSignedUrls"
+];
+function $56bacf7dc6478771$var$ConfigureApi({ secrets: secrets , setDialogState: setDialogState  }) {
+    const client = (0, $ayBmS$sanity.useClient)();
+    const [state, dispatch] = (0, $f23684a2b0635ab0$export$e24a74f4fce2446c)(secrets);
+    const hasSecretsInitially = (0, $ayBmS$react.useMemo)(()=>secrets.token && secrets.secretKey, [
+        secrets
+    ]);
+    const handleClose = (0, $ayBmS$react.useCallback)(()=>setDialogState(false), [
+        setDialogState
+    ]);
+    const dirty = (0, $ayBmS$react.useMemo)(()=>secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [
+        secrets,
+        state
+    ]);
+    const id = `ConfigureApi${(0, $ayBmS$reachautoid.useId)()}`;
+    const [tokenId, secretKeyId, enableSignedUrlsId] = (0, $ayBmS$react.useMemo)(()=>$56bacf7dc6478771$var$fieldNames.map((field)=>`${id}-${field}`), [
+        id
+    ]);
+    const firstField = (0, $ayBmS$react.useRef)(null);
+    const handleSaveSecrets = (0, $efecc0530b43438c$export$e1d4ef4fde5dbdf2)(client, secrets);
+    const saving = (0, $ayBmS$react.useRef)(false);
+    const handleSubmit = (0, $ayBmS$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, $ayBmS$suspendreact.clear)([
+                    (0, $764163079c542eaf$export$13cdb654d47e0703),
+                    (0, $ca60bbd6b265fe38$export$9c7ae676ac45430a),
+                    projectId,
+                    dataset
+                ]);
+                (0, $ayBmS$suspendreact.preload)(()=>Promise.resolve(savedSecrets), [
+                    (0, $764163079c542eaf$export$13cdb654d47e0703),
+                    (0, $ca60bbd6b265fe38$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, $ayBmS$react.useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "token",
+                value: event.currentTarget.value
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    const handleChangeSecretKey = (0, $ayBmS$react.useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "secretKey",
+                value: event.currentTarget.value
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    const handleChangeEnableSignedUrls = (0, $ayBmS$react.useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "enableSignedUrls",
+                value: event.currentTarget.checked
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    (0, $ayBmS$react.useEffect)(()=>{
+        if (firstField.current) firstField.current.focus();
+    }, [
+        firstField
+    ]);
+    var _token, _secretKey;
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Dialog), {
+        id: id,
+        onClose: handleClose,
+        header: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $11947e4b4e6f3883$export$8b251419efc915eb), {}),
+        width: 0,
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+            padding: 4,
+            style: {
+                position: "relative"
+            },
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("form", {
+                onSubmit: handleSubmit,
+                noValidate: true,
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                    space: 4,
+                    children: [
+                        !hasSecretsInitially && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                            padding: [
+                                3,
+                                3,
+                                3
+                            ],
+                            radius: 2,
+                            shadow: 1,
+                            tone: "primary",
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                                space: 3,
+                                children: [
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Text), {
+                                        size: 1,
+                                        children: [
+                                            "To set up a new access token, go to your",
+                                            " ",
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("a", {
+                                                href: "https://dashboard.mux.com/settings/access-tokens",
+                                                target: "_blank",
+                                                rel: "noreferrer noopener",
+                                                children: "account on mux.com"
+                                            }),
+                                            "."
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Text), {
+                                        size: 1,
+                                        children: [
+                                            "The access token needs permissions: ",
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("strong", {
+                                                children: "Mux Video "
+                                            }),
+                                            "(Full Access) and ",
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("strong", {
+                                                children: "Mux Data"
+                                            }),
+                                            " (Read)",
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("br", {}),
+                                            "The credentials will be stored safely in a hidden document only available to editors."
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $4c82d5f60ad56557$export$2e2bcd8739ae039), {
+                            title: "Access Token",
+                            inputId: tokenId,
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.TextInput), {
+                                id: tokenId,
+                                ref: firstField,
+                                onChange: handleChangeToken,
+                                type: "text",
+                                value: (_token = state.token) !== null && _token !== void 0 ? _token : "",
+                                required: !!state.secretKey || state.enableSignedUrls
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $4c82d5f60ad56557$export$2e2bcd8739ae039), {
+                            title: "Secret Key",
+                            inputId: secretKeyId,
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.TextInput), {
+                                id: secretKeyId,
+                                onChange: handleChangeSecretKey,
+                                type: "text",
+                                value: (_secretKey = state.secretKey) !== null && _secretKey !== void 0 ? _secretKey : "",
+                                required: !!state.token || state.enableSignedUrls
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                            space: 4,
+                            children: [
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Checkbox), {
+                                            id: enableSignedUrlsId,
+                                            onChange: handleChangeEnableSignedUrls,
+                                            checked: state.enableSignedUrls,
+                                            style: {
+                                                display: "block"
+                                            }
+                                        }),
+                                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
+                                            flex: 1,
+                                            paddingLeft: 3,
+                                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("label", {
+                                                    htmlFor: enableSignedUrlsId,
+                                                    children: "Enable Signed Urls"
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                secrets.signingKeyId && state.enableSignedUrls ? /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                                    padding: [
+                                        3,
+                                        3,
+                                        3
+                                    ],
+                                    radius: 2,
+                                    shadow: 1,
+                                    tone: "caution",
+                                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Stack), {
+                                        space: 3,
+                                        children: [
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                                size: 1,
+                                                children: "The signing key ID that Sanity will use is:"
+                                            }),
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Code), {
+                                                size: 1,
+                                                children: secrets.signingKeyId
+                                            }),
+                                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Text), {
+                                                size: 1,
+                                                children: [
+                                                    "This key is only used for previewing content in the Sanity UI.",
+                                                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("br", {}),
+                                                    "You should generate a different key to use in your application server."
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Inline), {
+                            space: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                                    text: "Save",
+                                    disabled: !dirty,
+                                    loading: state.submitting,
+                                    tone: "primary",
+                                    mode: "default",
+                                    type: "submit"
+                                }),
+                                /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                                    disabled: state.submitting,
+                                    text: "Cancel",
+                                    mode: "bleed",
+                                    onClick: handleClose
+                                })
+                            ]
+                        }),
+                        state.error && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
+                            padding: [
+                                3,
+                                3,
+                                3
+                            ],
+                            radius: 2,
+                            shadow: 1,
+                            tone: "critical",
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
+                                children: state.error
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+var $56bacf7dc6478771$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $ayBmS$react.memo)($56bacf7dc6478771$var$ConfigureApi);
 
-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))`
+let $3c6497e4f99ab548$var$_ = (t1)=>t1, $3c6497e4f99ab548$var$t;
+const $3c6497e4f99ab548$export$f0c88bc5a320387d = (0, ($parcel$interopDefault($ayBmS$styledcomponents)))((0, $ayBmS$sanityui.Card))($3c6497e4f99ab548$var$t || ($3c6497e4f99ab548$var$t = $3c6497e4f99ab548$var$_`
   aspect-ratio: 16 / 9;
   position: relative;
   width: 100%;
-`;
-const $5f180d117773fee7$export$18fe723e8683ca03 = ()=>{
-    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("div", {
+`));
+const $3c6497e4f99ab548$export$18fe723e8683ca03 = ()=>{
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("div", {
         style: {
             padding: 1
         },
-        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Card), {
             shadow: 1,
             sizing: "border",
             style: {
@@ -88,18 +3753,18 @@ const $5f180d117773fee7$export$18fe723e8683ca03 = ()=>{
                 width: "100%",
                 borderRadius: "1px"
             },
-            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Flex), {
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Flex), {
                 align: "center",
                 direction: "column",
                 height: "fill",
                 justify: "center",
                 children: [
-                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Spinner), {
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Spinner), {
                         muted: true
                     }),
-                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Box), {
+                    /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Box), {
                         marginTop: 3,
-                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Text), {
                             align: "center",
                             muted: true,
                             size: 1,
@@ -112,162 +3777,156 @@ const $5f180d117773fee7$export$18fe723e8683ca03 = ()=>{
     });
 };
 
-});
-
-parcelRequire.register("4M4Xk", function(module, exports) {
-module.exports = Promise.resolve(require("./Input.ad849635.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);
-
 
 
 
 
 
 
-
-
-
-var $bf6Cb = parcelRequire("bf6Cb");
-function $440e5e6a7a1a5e7d$var$ErrorBoundaryCard(props) {
-    const { children: children , schemaType: schemaType  } = props;
-    const { push: pushToast  } = (0, $dyHF6$sanityui.useToast)();
-    const errorRef = (0, $dyHF6$react.useRef)(null);
-    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error , reset: reset  } = (0, $dyHF6$useerrorboundary.useErrorBoundary)({
-        onDidCatch: (err, errorInfo)=>{
-            console.group(err.toString());
-            console.groupCollapsed("console.error");
-            console.error(err);
-            console.groupEnd();
-            if (err.stack) {
-                console.groupCollapsed("error.stack");
-                console.log(err.stack);
-                console.groupEnd();
-            }
-            if (errorInfo?.componentStack) {
-                console.groupCollapsed("errorInfo.componentStack");
-                console.log(errorInfo.componentStack);
-                console.groupEnd();
-            }
-            console.groupEnd();
-            pushToast({
-                status: "error",
-                title: "Plugin crashed",
-                description: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
-                    align: "center",
-                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Inline), {
-                        space: 1,
-                        children: [
-                            "An error happened while rendering",
-                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
-                                padding: 1,
-                                fontSize: 1,
-                                style: {
-                                    transform: "translateY(1px)"
-                                },
-                                mode: "ghost",
-                                text: schemaType.title,
-                                onClick: ()=>{
-                                    if (errorRef.current) (0, ($parcel$interopDefault($dyHF6$scrollintoviewifneeded)))(errorRef.current, {
-                                        behavior: "smooth",
-                                        scrollMode: "if-needed",
-                                        block: "center"
-                                    });
-                                }
-                            })
-                        ]
-                    })
-                })
-            });
-        }
-    });
-    const handleRetry = (0, $dyHF6$react.useCallback)(()=>{
-        // Purge request cache before retrying, otherwise the cached errors will rethrow
-        (0, $dyHF6$suspendreact.clear)([
-            (0, $bf6Cb.name)
-        ]);
-        reset();
-    }, [
-        reset
+function $8283748ba76c562e$export$2e2bcd8739ae039(props) {
+    const { setDialogState: setDialogState  } = props;
+    const handleOpen = (0, $ayBmS$react.useCallback)(()=>setDialogState("secrets"), [
+        setDialogState
     ]);
-    if (didCatch) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
-        ref: errorRef,
-        paddingX: [
-            2,
-            3,
-            4,
-            4
-        ],
-        height: "fill",
-        shadow: 1,
-        overflow: "auto",
-        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Flex), {
-            justify: "flex-start",
-            align: "center",
-            height: "fill",
-            children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Grid), {
-                columns: 1,
-                gap: [
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$reactjsxruntime.Fragment), {
+        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("div", {
+            style: {
+                padding: 2
+            },
+            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$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
                 ],
-                children: [
-                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsxs)((0, $dyHF6$sanityui.Heading), {
-                        as: "h1",
+                radius: 1,
+                tone: "transparent",
+                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Flex), {
+                    justify: "flex-start",
+                    align: "center",
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$sanityui.Grid), {
+                        columns: 1,
+                        gap: [
+                            2,
+                            3,
+                            4,
+                            4
+                        ],
                         children: [
-                            "The ",
-                            /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)("code", {
-                                children: (0, $bf6Cb.name)
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)("div", {
+                                    style: {
+                                        height: "32px"
+                                    },
+                                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $e3a8039a3d28e592$export$2e2bcd8739ae039), {})
+                                })
                             }),
-                            " plugin crashed"
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Heading), {
+                                    size: [
+                                        0,
+                                        1,
+                                        2,
+                                        2
+                                    ],
+                                    children: "Upload and preview videos directly from your studio."
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanityui.Button), {
+                                    mode: "ghost",
+                                    icon: (0, $ayBmS$sanityicons.PlugIcon),
+                                    text: "Configure API",
+                                    onClick: handleOpen
+                                })
+                            })
                         ]
-                    }),
-                    error?.message && /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Card), {
-                        padding: 3,
-                        tone: "critical",
-                        shadow: 1,
-                        radius: 2,
-                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Text), {
-                            children: error.message
-                        })
-                    }),
-                    /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Inline), {
-                        children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $dyHF6$sanityui.Button), {
-                            onClick: handleRetry,
-                            text: "Retry"
-                        })
                     })
-                ]
+                })
             })
         })
     });
-    return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)(ErrorBoundary, {
-        children: children
-    });
 }
-var $440e5e6a7a1a5e7d$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $dyHF6$react.memo)($440e5e6a7a1a5e7d$var$ErrorBoundaryCard);
 
 
+const $7988e690e4a01972$var$Input = (props)=>{
+    var ref;
+    const client = (0, $ayBmS$sanity.useClient)();
+    const secretDocumentValues = (0, $e0562e9a5cd26710$export$4c2801830a129eb)();
+    const assetDocumentValues = (0, $91e90464b4ca45aa$export$e11a382d55e07f75)((ref = props.value) === null || ref === void 0 ? void 0 : ref.asset);
+    const poll = (0, $b098b0d885e904ff$export$fd270df25d7dbb88)(props.readOnly ? undefined : (assetDocumentValues === null || assetDocumentValues === void 0 ? void 0 : assetDocumentValues.value) || undefined);
+    const [dialogState, setDialogState] = (0, $8ea54a6e4798432c$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, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$reactjsxruntime.Fragment), {
+        children: isLoading ? /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $3c6497e4f99ab548$export$18fe723e8683ca03), {}) : /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsxs)((0, $ayBmS$reactjsxruntime.Fragment), {
+            children: [
+                secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $8283748ba76c562e$export$2e2bcd8739ae039), {
+                    setDialogState: setDialogState
+                }) : /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $e43e21f1b2fe430e$export$2e2bcd8739ae039), (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spread_propsjs)))((0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, props), {
+                    client: client,
+                    secrets: secretDocumentValues.value.secrets,
+                    asset: assetDocumentValues.value,
+                    dialogState: dialogState,
+                    setDialogState: setDialogState,
+                    needsSetup: secretDocumentValues.value.needsSetup
+                })),
+                dialogState === "secrets" && /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $56bacf7dc6478771$export$2e2bcd8739ae039), {
+                    setDialogState: setDialogState,
+                    secrets: secretDocumentValues.value.secrets
+                })
+            ]
+        })
+    });
+};
+var $7988e690e4a01972$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $ayBmS$react.memo)($7988e690e4a01972$var$Input);
+
+
+
+
+
+
+
+
+const $a1523ee7ee9b753a$var$MuxVideoPreview = ({ value: value  })=>{
+    const assetDocumentValues = (0, $91e90464b4ca45aa$export$e11a382d55e07f75)(value === null || value === void 0 ? void 0 : value.asset);
+    if (assetDocumentValues.value) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $b4359f9e5317addd$export$bd4b73f15688a160), {
+        asset: assetDocumentValues.value,
+        width: 640
+    });
+    // @ts-expect-error
+    const { filename: filename , playbackId: playbackId , status: status  } = value !== null && value !== void 0 ? value : {};
+    return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$sanity_unstable.SanityDefaultPreview), {
+        title: filename || playbackId || "",
+        subtitle: status ? `status: ${status}` : null
+    });
+};
+var $a1523ee7ee9b753a$export$2e2bcd8739ae039 = $a1523ee7ee9b753a$var$MuxVideoPreview;
+
 
-var $3PT7X = parcelRequire("3PT7X");
 
 
-const $75523cdda380b780$export$a8ff84c12d48cfa6 = "mux.videoAsset";
-const $75523cdda380b780$var$videoAsset = (0, $dyHF6$sanity.defineField)({
-    name: $75523cdda380b780$export$a8ff84c12d48cfa6,
+const $aa6f8a8b344a9a01$export$a8ff84c12d48cfa6 = "mux.videoAsset";
+const $aa6f8a8b344a9a01$var$videoAsset = (0, $ayBmS$sanity.defineField)({
+    name: $aa6f8a8b344a9a01$export$a8ff84c12d48cfa6,
     type: "object",
     title: "Video asset",
     fields: [
@@ -293,12 +3952,12 @@ const $75523cdda380b780$var$videoAsset = (0, $dyHF6$sanity.defineField)({
         }, 
     ]
 });
-var $75523cdda380b780$export$2e2bcd8739ae039 = $75523cdda380b780$var$videoAsset;
+var $aa6f8a8b344a9a01$export$2e2bcd8739ae039 = $aa6f8a8b344a9a01$var$videoAsset;
 
 
-const $ac55e63956aa9e84$export$a8ff84c12d48cfa6 = "mux.video";
-const $ac55e63956aa9e84$var$video = (0, $dyHF6$sanity.defineField)({
-    name: $ac55e63956aa9e84$export$a8ff84c12d48cfa6,
+const $c9d039407c122263$export$a8ff84c12d48cfa6 = "mux.video";
+const $c9d039407c122263$var$video = (0, $ayBmS$sanity.defineField)({
+    name: $c9d039407c122263$export$a8ff84c12d48cfa6,
     type: "object",
     title: "Video asset reference",
     fields: [
@@ -309,69 +3968,61 @@ const $ac55e63956aa9e84$var$video = (0, $dyHF6$sanity.defineField)({
             weak: true,
             to: [
                 {
-                    type: (0, $75523cdda380b780$export$a8ff84c12d48cfa6)
+                    type: (0, $aa6f8a8b344a9a01$export$a8ff84c12d48cfa6)
                 }
             ]
         }, 
     ]
 });
-var $ac55e63956aa9e84$export$2e2bcd8739ae039 = $ac55e63956aa9e84$var$video;
+var $c9d039407c122263$export$2e2bcd8739ae039 = $c9d039407c122263$var$video;
 
 
 
 
 
-function $0c6ceed5d95aa3e9$export$c8119cbbd1c84da1(props) {
-    return (0, $dyHF6$sanity.isObjectSchemaType)(props.schemaType) && props.schemaType.type?.name === (0, $ac55e63956aa9e84$export$a8ff84c12d48cfa6);
+function $aa910bb01208cd6d$export$c8119cbbd1c84da1(props) {
+    var ref;
+    return (0, $ayBmS$sanity.isObjectSchemaType)(props.schemaType) && ((ref = props.schemaType.type) === null || ref === void 0 ? void 0 : ref.name) === (0, $c9d039407c122263$export$a8ff84c12d48cfa6);
 }
-function $0c6ceed5d95aa3e9$export$3542974c36e4d83f(props) {
-    return props.schemaType.type?.name === (0, $ac55e63956aa9e84$export$a8ff84c12d48cfa6);
+function $aa910bb01208cd6d$export$3542974c36e4d83f(props) {
+    var ref;
+    return ((ref = props.schemaType.type) === null || ref === void 0 ? void 0 : ref.name) === (0, $c9d039407c122263$export$a8ff84c12d48cfa6);
 }
 
 
-
-const $329a1cedcedb1349$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $dyHF6$react.lazy)(()=>(parcelRequire("4M4Xk")));
-
-const $329a1cedcedb1349$export$133773870222880f = /*#__PURE__*/ (0, $dyHF6$react.lazy)(()=>(parcelRequire("2vLfV")));
-const $329a1cedcedb1349$export$f84bd70098573c5c = {
+const $35eb69de8ff825b5$export$f84bd70098573c5c = {
     mp4_support: "none"
 };
-const $329a1cedcedb1349$export$4d2e76c338bb9fbd = (0, $dyHF6$sanity.createPlugin)((userConfig)=>{
-    const config = {
-        ...$329a1cedcedb1349$export$f84bd70098573c5c,
-        ...userConfig
-    };
+const $35eb69de8ff825b5$export$4d2e76c338bb9fbd = (0, $ayBmS$sanity.createPlugin)((userConfig)=>{
+    const config = (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, $35eb69de8ff825b5$export$f84bd70098573c5c, userConfig);
     return {
         name: "mux-input",
         form: {
             renderInput (props, next) {
-                if ((0, $0c6ceed5d95aa3e9$export$c8119cbbd1c84da1)(props)) return /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $3PT7X.AspectRatioCard), {
-                    children: /*#__PURE__*/ (0, $dyHF6$reactjsxruntime.jsx)((0, $440e5e6a7a1a5e7d$export$2e2bcd8739ae039), {
+                if ((0, $aa910bb01208cd6d$export$c8119cbbd1c84da1)(props)) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $3c6497e4f99ab548$export$f0c88bc5a320387d), {
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $23a5e4ef1c8a3996$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, {
-                                config: config,
-                                ...props
-                            })
+                        children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $ayBmS$react.Suspense), {
+                            fallback: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $3c6497e4f99ab548$export$18fe723e8683ca03), {}),
+                            children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $7988e690e4a01972$export$2e2bcd8739ae039), (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({
+                                config: config
+                            }, props))
                         })
                     })
                 });
                 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, {
-                        ...props
-                    })
+                if ((0, $aa910bb01208cd6d$export$3542974c36e4d83f)(props)) return /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $3c6497e4f99ab548$export$f0c88bc5a320387d), {
+                    children: /*#__PURE__*/ (0, $ayBmS$reactjsxruntime.jsx)((0, $a1523ee7ee9b753a$export$2e2bcd8739ae039), (0, ($parcel$interopDefault($ayBmS$swchelperslib_object_spreadjs)))({}, props))
                 });
                 return next(props);
             }
         },
         schema: {
             types: [
-                (0, $ac55e63956aa9e84$export$2e2bcd8739ae039),
-                (0, $75523cdda380b780$export$2e2bcd8739ae039)
+                (0, $c9d039407c122263$export$2e2bcd8739ae039),
+                (0, $aa6f8a8b344a9a01$export$2e2bcd8739ae039)
             ]
         }
     };