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

package/lib/esm/index.js

@@ -1,83 +1,3740 @@
-import {jsx as $7XdDa$jsx, jsxs as $7XdDa$jsxs} from "react/jsx-runtime";
-import {Card as $7XdDa$Card, Flex as $7XdDa$Flex, Spinner as $7XdDa$Spinner, Box as $7XdDa$Box, Text as $7XdDa$Text, useToast as $7XdDa$useToast, Inline as $7XdDa$Inline, Button as $7XdDa$Button, Grid as $7XdDa$Grid, Heading as $7XdDa$Heading} from "@sanity/ui";
-import {lazy as $7XdDa$lazy, Suspense as $7XdDa$Suspense, useRef as $7XdDa$useRef, useCallback as $7XdDa$useCallback, memo as $7XdDa$memo} from "react";
-import $7XdDa$styledcomponents from "styled-components";
-import {createPlugin as $7XdDa$createPlugin, defineField as $7XdDa$defineField, isObjectSchemaType as $7XdDa$isObjectSchemaType} from "sanity";
-import $7XdDa$scrollintoviewifneeded from "scroll-into-view-if-needed";
-import {clear as $7XdDa$clear} from "suspend-react";
-import {useErrorBoundary as $7XdDa$useErrorBoundary} from "use-error-boundary";
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-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;
+import $lAnAG$swchelperssrc_object_spreadmjs from "@swc/helpers/src/_object_spread.mjs";
+import {jsx as $lAnAG$jsx, jsxs as $lAnAG$jsxs, Fragment as $lAnAG$Fragment} from "react/jsx-runtime";
+import $lAnAG$react, {Suspense as $lAnAG$Suspense, useRef as $lAnAG$useRef, useCallback as $lAnAG$useCallback, memo as $lAnAG$memo, useState as $lAnAG$useState, useMemo as $lAnAG$useMemo, Component as $lAnAG$Component, useEffect as $lAnAG$useEffect, useLayoutEffect as $lAnAG$useLayoutEffect, isValidElement as $lAnAG$isValidElement, createElement as $lAnAG$createElement, forwardRef as $lAnAG$forwardRef, useReducer as $lAnAG$useReducer} from "react";
+import {createPlugin as $lAnAG$createPlugin, useClient as $lAnAG$useClient, isReference as $lAnAG$isReference, useProjectId as $lAnAG$useProjectId, useDataset as $lAnAG$useDataset, defineField as $lAnAG$defineField, isObjectSchemaType as $lAnAG$isObjectSchemaType} from "sanity";
+import {useToast as $lAnAG$useToast, Flex as $lAnAG$Flex, Inline as $lAnAG$Inline, Button as $lAnAG$Button, Card as $lAnAG$Card, Grid as $lAnAG$Grid, Heading as $lAnAG$Heading, Text as $lAnAG$Text, Dialog as $lAnAG$Dialog, useClickOutside as $lAnAG$useClickOutside, MenuButton as $lAnAG$MenuButton, Menu as $lAnAG$Menu, MenuItem as $lAnAG$MenuItem, Stack as $lAnAG$Stack, Box as $lAnAG$Box, Checkbox as $lAnAG$Checkbox, Spinner as $lAnAG$Spinner, Code as $lAnAG$Code, Tooltip as $lAnAG$Tooltip, Popover as $lAnAG$Popover, Label as $lAnAG$Label, MenuDivider as $lAnAG$MenuDivider, rem as $lAnAG$rem, TextInput as $lAnAG$TextInput} from "@sanity/ui";
+import $lAnAG$scrollintoviewifneeded from "scroll-into-view-if-needed";
+import {clear as $lAnAG$clear, suspend as $lAnAG$suspend, preload as $lAnAG$preload} from "suspend-react";
+import {useErrorBoundary as $lAnAG$useErrorBoundary} from "use-error-boundary";
+import $lAnAG$swchelperssrc_object_spread_propsmjs from "@swc/helpers/src/_object_spread_props.mjs";
+import {useDocumentValues as $lAnAG$useDocumentValues, MediaPreview as $lAnAG$MediaPreview, LinearProgress as $lAnAG$LinearProgress, SanityDefaultPreview as $lAnAG$SanityDefaultPreview} from "sanity/_unstable";
+import $lAnAG$swr from "swr";
+import $lAnAG$swchelperssrc_define_propertymjs from "@swc/helpers/src/_define_property.mjs";
+import {Subject as $lAnAG$Subject, concat as $lAnAG$concat, of as $lAnAG$of, throwError as $lAnAG$throwError, defer as $lAnAG$defer, from as $lAnAG$from, Observable as $lAnAG$Observable} from "rxjs";
+import {takeUntil as $lAnAG$takeUntil, tap as $lAnAG$tap, switchMap as $lAnAG$switchMap, mergeMap as $lAnAG$mergeMap, catchError as $lAnAG$catchError, mergeMapTo as $lAnAG$mergeMapTo} from "rxjs/operators";
+import {PatchEvent as $lAnAG$PatchEvent, setIfMissing as $lAnAG$setIfMissing, set as $lAnAG$set, unset as $lAnAG$unset} from "sanity/form";
+import {uuid as $lAnAG$uuid} from "@sanity/uuid";
+import {createUpload as $lAnAG$createUpload} from "@mux/upchunk";
+import {useId as $lAnAG$useId} from "@reach/auto-id";
+import {EllipsisVerticalIcon as $lAnAG$EllipsisVerticalIcon, TrashIcon as $lAnAG$TrashIcon, DownloadIcon as $lAnAG$DownloadIcon, LockIcon as $lAnAG$LockIcon, UnknownIcon as $lAnAG$UnknownIcon, EditIcon as $lAnAG$EditIcon, UploadIcon as $lAnAG$UploadIcon, SearchIcon as $lAnAG$SearchIcon, PlugIcon as $lAnAG$PlugIcon, ResetIcon as $lAnAG$ResetIcon, DocumentVideoIcon as $lAnAG$DocumentVideoIcon} from "@sanity/icons";
+import {animate as $lAnAG$animate} from "motion";
+import $lAnAG$styledcomponents, {css as $lAnAG$css} from "styled-components";
+import {getDevicePixelRatio as $lAnAG$getDevicePixelRatio} from "use-device-pixel-ratio";
+import {sign as $lAnAG$sign} from "jsonwebtoken-esm";
+import {generatePlayerInitTime as $lAnAG$generatePlayerInitTime, initialize as $lAnAG$initialize} from "@mux/playback-core";
+import {MediaController as $lAnAG$MediaController, MediaLoadingIndicator as $lAnAG$MediaLoadingIndicator, MediaPlayButton as $lAnAG$MediaPlayButton, MediaControlBar as $lAnAG$MediaControlBar, MediaMuteButton as $lAnAG$MediaMuteButton, MediaTimeDisplay as $lAnAG$MediaTimeDisplay, MediaTimeRange as $lAnAG$MediaTimeRange, MediaDurationDisplay as $lAnAG$MediaDurationDisplay, MediaFullscreenButton as $lAnAG$MediaFullscreenButton, MediaPosterImage as $lAnAG$MediaPosterImage} from "media-chrome/dist/react";
+import $lAnAG$swchelperssrc_object_without_propertiesmjs from "@swc/helpers/src/_object_without_properties.mjs";
+import {isValidElementType as $lAnAG$isValidElementType} from "react-is";
+
+
+
+
+
+
+
+
+
+
+
+const $81deebaa2da6d866$export$a8ff84c12d48cfa6 = "mux-input";
+const $81deebaa2da6d866$export$13cdb654d47e0703 = "sanity-plugin-mux-input";
+const $81deebaa2da6d866$export$64952397958089dd = "secrets.mux";
+
+
+function $3e1e9b96ff4a93b5$var$ErrorBoundaryCard(props) {
+    const { children: children , schemaType: schemaType  } = props;
+    const { push: pushToast  } = (0, $lAnAG$useToast)();
+    const errorRef = (0, $lAnAG$useRef)(null);
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error , reset: reset  } = (0, $lAnAG$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, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                    align: "center",
+                    children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Inline), {
+                        space: 1,
+                        children: [
+                            "An error happened while rendering",
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                                padding: 1,
+                                fontSize: 1,
+                                style: {
+                                    transform: "translateY(1px)"
+                                },
+                                mode: "ghost",
+                                text: schemaType.title,
+                                onClick: ()=>{
+                                    if (errorRef.current) (0, $lAnAG$scrollintoviewifneeded)(errorRef.current, {
+                                        behavior: "smooth",
+                                        scrollMode: "if-needed",
+                                        block: "center"
+                                    });
+                                }
+                            })
+                        ]
+                    })
+                })
+            });
+        }
+    });
+    const handleRetry = (0, $lAnAG$useCallback)(()=>{
+        // Purge request cache before retrying, otherwise the cached errors will rethrow
+        (0, $lAnAG$clear)([
+            (0, $81deebaa2da6d866$export$a8ff84c12d48cfa6)
+        ]);
+        reset();
+    }, [
+        reset
+    ]);
+    if (didCatch) return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+        ref: errorRef,
+        paddingX: [
+            2,
+            3,
+            4,
+            4
+        ],
+        height: "fill",
+        shadow: 1,
+        overflow: "auto",
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+            justify: "flex-start",
+            align: "center",
+            height: "fill",
+            children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Grid), {
+                columns: 1,
+                gap: [
+                    2,
+                    3,
+                    4,
+                    4
+                ],
+                children: [
+                    /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Heading), {
+                        as: "h1",
+                        children: [
+                            "The ",
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("code", {
+                                children: (0, $81deebaa2da6d866$export$a8ff84c12d48cfa6)
+                            }),
+                            " plugin crashed"
+                        ]
+                    }),
+                    (error === null || error === void 0 ? void 0 : error.message) && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                        padding: 3,
+                        tone: "critical",
+                        shadow: 1,
+                        radius: 2,
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                            children: error.message
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Inline), {
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                            onClick: handleRetry,
+                            text: "Retry"
+                        })
+                    })
+                ]
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, $lAnAG$jsx)(ErrorBoundary, {
+        children: children
+    });
+}
+var $3e1e9b96ff4a93b5$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $lAnAG$memo)($3e1e9b96ff4a93b5$var$ErrorBoundaryCard);
+
+
+
+
+
+
+
+
+
+const $04b76def1942462e$var$path = [
+    "assetId",
+    "data",
+    "playbackId",
+    "status",
+    "thumbTime",
+    "filename"
+];
+const $04b76def1942462e$export$e11a382d55e07f75 = (asset)=>(0, $lAnAG$useDocumentValues)((0, $lAnAG$isReference)(asset) ? asset._ref : "", $04b76def1942462e$var$path);
+
+
+
+function $bcf12693a12c12c4$export$573903f1c655c034() {
+    return (0, $lAnAG$useState)(false);
+}
+
+
+
+
+
+const $658b60878501f8ec$export$fd270df25d7dbb88 = (asset)=>{
+    var ref3, ref1;
+    const client = (0, $lAnAG$useClient)();
+    const projectId = (0, $lAnAG$useProjectId)();
+    const dataset = (0, $lAnAG$useDataset)();
+    const shouldFetch = (0, $lAnAG$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, $lAnAG$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 $264222da7614d565$var$path = [
+    "token",
+    "secretKey",
+    "enableSignedUrls",
+    "signingKeyId",
+    "signingKeyPrivate"
+];
+const $264222da7614d565$export$4c2801830a129eb = ()=>{
+    const { error: error , isLoading: isLoading , value: value  } = (0, $lAnAG$useDocumentValues)((0, $81deebaa2da6d866$export$64952397958089dd), $264222da7614d565$var$path);
+    const cache = (0, $lAnAG$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 $7bedbd2b641d54d8$export$ad6eab20b4b3876f(uuid, uploadUrl, source) {
+    return new (0, $lAnAG$Observable)((subscriber)=>{
+        const upchunk = $lAnAG$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 $fb3009e6005435d0$export$df987b50509121ea(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/assets/${dataset}/${assetId}`,
+        withCredentials: true,
+        method: "DELETE"
+    });
+}
+function $fb3009e6005435d0$export$da446a5ee2572b7(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/assets/${dataset}/data/${assetId}`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+
+
+
+function $467babf025eab28e$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 $467babf025eab28e$export$21cc0cab779cfac1(client) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/signing-keys/${dataset}`,
+        withCredentials: true,
+        method: "POST"
+    });
+}
+function $467babf025eab28e$export$3a1df1322191b3ef(client) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/secrets/${dataset}/test`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+async function $467babf025eab28e$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 $467babf025eab28e$export$7d1f83854429bc73(client) {
+    const { dataset: dataset  } = client.config();
+    return (0, $lAnAG$defer)(()=>client.observable.request({
+            url: `/addons/mux/secrets/${dataset}/test`,
+            withCredentials: true,
+            method: "GET"
+        }));
+}
+
+
+function $96f24671e0303f47$export$5130fb4c263997a4(client, uuid) {
+    return client.observable.request({
+        url: `/addons/mux/uploads/${client.clientConfig.dataset}/${uuid}`,
+        withCredentials: true,
+        method: "DELETE"
+    });
+}
+function $96f24671e0303f47$export$f35af194eb27b25f(config, client, url, options = {}) {
+    return $96f24671e0303f47$var$testUrl(url).pipe((0, $lAnAG$switchMap)((validUrl)=>{
+        return (0, $lAnAG$concat)((0, $lAnAG$of)({
+            type: "url",
+            url: validUrl
+        }), (0, $467babf025eab28e$export$7d1f83854429bc73)(client).pipe((0, $lAnAG$switchMap)((json)=>{
+            if (!json || !json.status) return (0, $lAnAG$throwError)(new Error("Invalid credentials"));
+            const uuid = (0, $lAnAG$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, $lAnAG$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, $lAnAG$mergeMap)((result)=>{
+                const asset = result && result.results && result.results[0] && result.results[0].document || null;
+                if (!asset) return (0, $lAnAG$throwError)(new Error("No asset document returned"));
+                return (0, $lAnAG$of)({
+                    type: "success",
+                    id: uuid,
+                    asset: asset
+                });
+            }));
+        })));
+    }));
+}
+function $96f24671e0303f47$export$a5575dbeeffdad98(config, client, file, options = {}) {
+    return $96f24671e0303f47$var$testFile(file).pipe((0, $lAnAG$switchMap)((fileOptions)=>{
+        return (0, $lAnAG$concat)((0, $lAnAG$of)({
+            type: "file",
+            file: fileOptions
+        }), (0, $467babf025eab28e$export$7d1f83854429bc73)(client).pipe((0, $lAnAG$switchMap)((json)=>{
+            if (!json || !json.status) return (0, $lAnAG$throwError)(new Error("Invalid credentials"));
+            const uuid = (0, $lAnAG$uuid)();
+            const { enableSignedUrls: enableSignedUrls  } = options;
+            const body = {
+                mp4_support: config.mp4_support,
+                playback_policy: [
+                    enableSignedUrls ? "signed" : "public"
+                ]
+            };
+            return (0, $lAnAG$concat)((0, $lAnAG$of)({
+                type: "uuid",
+                uuid: uuid
+            }), (0, $lAnAG$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, $lAnAG$mergeMap)((result)=>{
+                return (0, $7bedbd2b641d54d8$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, $lAnAG$mergeMap)((event)=>{
+                    if (event.type !== "success") return (0, $lAnAG$of)(event);
+                    return (0, $lAnAG$from)($96f24671e0303f47$var$updateAssetDocumentFromUpload(client, uuid)).pipe(// eslint-disable-next-line max-nested-callbacks
+                    (0, $lAnAG$mergeMap)((doc)=>(0, $lAnAG$of)((0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, event), {
+                            asset: doc
+                        }))));
+                }), // eslint-disable-next-line max-nested-callbacks
+                (0, $lAnAG$catchError)((err)=>{
+                    // Delete asset document
+                    return $96f24671e0303f47$export$5130fb4c263997a4(client, uuid).pipe((0, $lAnAG$mergeMapTo)((0, $lAnAG$throwError)(err)));
+                }));
+            })));
+        })));
+    }));
+}
+function $96f24671e0303f47$export$38276c014c550f86(client, assetId) {
+    const { dataset: dataset  } = client.config();
+    return client.request({
+        url: `/addons/mux/uploads/${dataset}/${assetId}`,
+        withCredentials: true,
+        method: "GET"
+    });
+}
+function $96f24671e0303f47$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 $96f24671e0303f47$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 $96f24671e0303f47$var$updateAssetDocumentFromUpload(client, uuid) {
+    let upload;
+    let asset;
+    try {
+        upload = await $96f24671e0303f47$var$pollUpload(client, uuid);
+    } catch (err) {
+        return Promise.reject(err);
+    }
+    try {
+        asset = await (0, $fb3009e6005435d0$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 $96f24671e0303f47$var$testFile(file) {
+    if (typeof window !== "undefined" && file instanceof window.File) {
+        const fileOptions = $96f24671e0303f47$var$optionsFromFile({}, file);
+        return (0, $lAnAG$of)(fileOptions);
+    }
+    return (0, $lAnAG$throwError)(new Error("Invalid file"));
+}
+function $96f24671e0303f47$var$testUrl(url) {
+    const error = new Error("Invalid URL");
+    if (typeof url !== "string") return (0, $lAnAG$throwError)(error);
+    let parsed;
+    try {
+        parsed = new URL(url);
+    } catch (err) {
+        return (0, $lAnAG$throwError)(error);
+    }
+    if (parsed && !parsed.protocol.match(/http:|https:/)) return (0, $lAnAG$throwError)(error);
+    return (0, $lAnAG$of)(url);
+}
+function $96f24671e0303f47$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 $4e510dd53b714187$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 $4e510dd53b714187$var$normalizeItems(items).then((arr)=>arr.flat());
+}
+function $4e510dd53b714187$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 ? $4e510dd53b714187$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 $4e510dd53b714187$var$isFile(entry) {
+    return entry.isFile;
+}
+function $4e510dd53b714187$var$isDirectory(entry) {
+    return entry.isDirectory;
+}
+function $4e510dd53b714187$var$walk(entry) {
+    if ($4e510dd53b714187$var$isFile(entry)) return new Promise((resolve)=>entry.file(resolve)).then((file)=>[
+            file
+        ]);
+    if ($4e510dd53b714187$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($4e510dd53b714187$var$walk)).then((arr)=>arr.flat()));
+    }
+    return Promise.resolve([]);
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const $3208be7e9a7ca648$export$9c7ae676ac45430a = "secrets.mux";
+function $3208be7e9a7ca648$export$e6f48a1ef9de02f7(client) {
+    const { projectId: projectId , dataset: dataset  } = client.config();
+    return (0, $lAnAG$suspend)(async ()=>{
+        const data = await client.fetch(/* groq */ `*[_id == $_id][0]{
+        token,
+        secretKey,
+        enableSignedUrls,
+        signingKeyId,
+        signingKeyPrivate
+      }`, {
+            _id: $3208be7e9a7ca648$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, $81deebaa2da6d866$export$13cdb654d47e0703),
+        $3208be7e9a7ca648$export$9c7ae676ac45430a,
+        projectId,
+        dataset
+    ]);
+}
+
+
+function $df808f32f86dd2c3$export$87b96baf1080652a(client, playbackId, aud, payload) {
+    const { signingKeyId: signingKeyId , signingKeyPrivate: signingKeyPrivate  } = (0, $3208be7e9a7ca648$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, $lAnAG$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 $b87ee69f3b2fe2f8$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 $53c0557e92647bc3$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 $c8304e4048a0619d$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, $b87ee69f3b2fe2f8$export$bdfa34d24bb44333)(asset);
+    let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v)=>v !== null && v !== void 0 ? v : undefined)));
+    if ((0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $df808f32f86dd2c3$export$87b96baf1080652a)(client, playbackId, "g", params);
+        searchParams = new URLSearchParams({
+            token: token
+        });
+    }
+    return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
+}
+
+
+
+
+
+
+function $649e715c42156121$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, $b87ee69f3b2fe2f8$export$bdfa34d24bb44333)(asset);
+    let searchParams = new URLSearchParams(JSON.parse(JSON.stringify(params, (_, v)=>v !== null && v !== void 0 ? v : undefined)));
+    if ((0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $df808f32f86dd2c3$export$87b96baf1080652a)(client, playbackId, "t", params);
+        searchParams = new URLSearchParams({
+            token: token
+        });
+    }
+    return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
+}
+
+
+let $6d61ace35324696d$var$_ = (t5)=>t5, $6d61ace35324696d$var$t, $6d61ace35324696d$var$t1, $6d61ace35324696d$var$t2, $6d61ace35324696d$var$t3, $6d61ace35324696d$var$t4;
+const $6d61ace35324696d$var$mediaDimensions = {
+    aspect: 16 / 9
+};
+const $6d61ace35324696d$var$ImageLoader = /*#__PURE__*/ (0, $lAnAG$memo)(function ImageLoader({ alt: alt , src: src , height: height , width: width , aspectRatio: aspectRatio  }) {
+    (0, $lAnAG$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, $lAnAG$jsx)("img", {
+        alt: alt,
+        src: src,
+        height: height,
+        width: width,
+        style: {
+            aspectRatio: aspectRatio
+        }
+    });
+});
+const $6d61ace35324696d$var$VideoMediaPreview = (0, $lAnAG$styledcomponents)((0, $lAnAG$MediaPreview))($6d61ace35324696d$var$t || ($6d61ace35324696d$var$t = $6d61ace35324696d$var$_`
+  img {
+    object-fit: cover;
+  }
+`));
+const $6d61ace35324696d$var$VideoMediaPreviewSignedSubtitle = ({ solo: solo  })=>{
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Inline), {
+        space: 1,
+        style: {
+            marginTop: solo ? "-1.35em" : undefined,
+            marginBottom: solo ? undefined : "0.35rem"
+        },
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$LockIcon), {}),
+            "Signed playback policy"
+        ]
+    });
+};
+const $6d61ace35324696d$var$PosterImage = ({ asset: asset , height: height , width: width , showTip: showTip  })=>{
+    const client = (0, $lAnAG$useClient)();
+    const src = (0, $649e715c42156121$export$8081e7a11b9f1345)({
+        asset: asset,
+        client: client,
+        height: height,
+        width: width,
+        fit_mode: "smartcrop"
+    });
+    const subtitle = (0, $lAnAG$useMemo)(()=>showTip && (0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed" ? /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$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, $lAnAG$jsx)($6d61ace35324696d$var$VideoMediaPreview, {
+        mediaDimensions: $6d61ace35324696d$var$mediaDimensions,
+        subtitle: subtitle,
+        title: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Fragment), {
+            children: null
+        }),
+        media: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$ImageLoader, {
+            alt: "",
+            src: src,
+            height: height,
+            width: width
+        })
+    });
+};
+const $6d61ace35324696d$export$bd4b73f15688a160 = /*#__PURE__*/ (0, $lAnAG$memo)(function VideoThumbnail({ asset: asset , width: width , showTip: showTip  }) {
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error  } = (0, $lAnAG$useErrorBoundary)();
+    const height = Math.round(width * 9 / 16);
+    const subtitle = (0, $lAnAG$useMemo)(()=>showTip && (0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed" ? /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$VideoMediaPreviewSignedSubtitle, {}) : undefined, [
+        showTip,
+        asset
+    ]);
+    if (didCatch) return /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$VideoMediaPreview, {
+        subtitle: error.message,
+        mediaDimensions: $6d61ace35324696d$var$mediaDimensions,
+        title: "Error when loading thumbnail",
+        media: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+            radius: 2,
+            height: "fill",
+            style: {
+                position: "relative",
+                width: "100%"
+            },
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                style: {
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0
+                },
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$UnknownIcon), {})
+            })
+        })
+    });
+    return /*#__PURE__*/ (0, $lAnAG$jsx)(ErrorBoundary, {
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Suspense), {
+            fallback: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$VideoMediaPreview, {
+                isPlaceholder: true,
+                title: "Loading thumbnail...",
+                subtitle: subtitle,
+                mediaDimensions: $6d61ace35324696d$var$mediaDimensions
+            }),
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$PosterImage, {
+                showTip: showTip,
+                asset: asset,
+                height: height,
+                width: width
+            })
+        })
+    });
+});
+const $6d61ace35324696d$var$AnimatedVideoMediaPreview = (0, $lAnAG$styledcomponents)((0, $lAnAG$MediaPreview))($6d61ace35324696d$var$t1 || ($6d61ace35324696d$var$t1 = $6d61ace35324696d$var$_`
+  img {
+    object-fit: contain;
+  }
+`));
+const $6d61ace35324696d$var$AnimatedPosterImage = ({ asset: asset , width: width  })=>{
+    const client = (0, $lAnAG$useClient)();
+    const src = (0, $c8304e4048a0619d$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, $lAnAG$jsx)($6d61ace35324696d$var$AnimatedVideoMediaPreview, {
+        withBorder: false,
+        mediaDimensions: $6d61ace35324696d$var$mediaDimensions,
+        media: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$ImageLoader, {
+            alt: "",
+            src: src,
+            width: width,
+            aspectRatio: "16:9"
+        })
+    });
+};
+const $6d61ace35324696d$export$357b57aa2db6117e = /*#__PURE__*/ (0, $lAnAG$memo)(function AnimatedVideoThumbnail({ asset: asset , width: width  }) {
+    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch  } = (0, $lAnAG$useErrorBoundary)();
+    if (didCatch) return null;
+    return /*#__PURE__*/ (0, $lAnAG$jsx)(ErrorBoundary, {
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Suspense), {
+            fallback: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$FancyBackdrop, {
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$VideoMediaPreview, {
+                    mediaDimensions: $6d61ace35324696d$var$mediaDimensions,
+                    withBorder: false,
+                    media: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Spinner), {
+                        muted: true
+                    })
+                })
+            }),
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                height: "fill",
+                tone: "transparent",
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)($6d61ace35324696d$var$AnimatedPosterImage, {
+                    asset: asset,
+                    width: width
+                })
+            })
+        })
+    });
+});
+const $6d61ace35324696d$var$FancyBackdrop = (0, $lAnAG$styledcomponents)((0, $lAnAG$Box))($6d61ace35324696d$var$t2 || ($6d61ace35324696d$var$t2 = $6d61ace35324696d$var$_`
+  backdrop-filter: blur(8px) brightness(0.5) saturate(2);
+  mix-blend-mode: color-dodge;
+`));
+const $6d61ace35324696d$export$e20c438ffc62921 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Grid))($6d61ace35324696d$var$t3 || ($6d61ace35324696d$var$t3 = $6d61ace35324696d$var$_`
+  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+`));
+const $6d61ace35324696d$export$7431cee690d58bc9 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($6d61ace35324696d$var$t4 || ($6d61ace35324696d$var$t4 = $6d61ace35324696d$var$_`
+  border-top: 1px solid var(--card-border-color);
+  position: sticky;
+  bottom: 0;
+  z-index: 200;
+`));
+
+
+let $2fdb71a9c6d7e845$var$_ = (t2)=>t2, $2fdb71a9c6d7e845$var$t, $2fdb71a9c6d7e845$var$t1;
+function $2fdb71a9c6d7e845$var$AssetActionsMenu(props) {
+    const { asset: asset  } = props;
+    const id = (0, $lAnAG$useId)();
+    const [dialogState, setDialogState] = (0, $lAnAG$useState)();
+    const [open, setOpen] = (0, $lAnAG$useState)(false);
+    const [menuElement, setMenuRef] = (0, $lAnAG$useState)(null);
+    const handleDelete = (0, $lAnAG$useCallback)(()=>setDialogState("confirm-delete"), []);
+    const handleClick = (0, $lAnAG$useCallback)(()=>{
+        setDialogState(false);
+        setOpen(true);
+    }, [
+        setDialogState
+    ]);
+    const handleClose = (0, $lAnAG$useCallback)(()=>{
+        setDialogState(false);
+        setOpen(false);
+    }, [
+        setDialogState
+    ]);
+    (0, $lAnAG$useEffect)(()=>{
+        if (open && dialogState) setOpen(false);
+    }, [
+        dialogState,
+        open
+    ]);
+    (0, $lAnAG$useClickOutside)((0, $lAnAG$useCallback)(()=>setOpen(false), []), [
+        menuElement
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuButton), {
+                id: `${id}-asset-menu`,
+                button: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                    icon: (0, $lAnAG$EllipsisVerticalIcon),
+                    mode: "ghost",
+                    onClick: handleClick,
+                    padding: 2
+                }),
+                menu: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Menu), {
+                    ref: setMenuRef,
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuItem), {
+                        tone: "critical",
+                        icon: (0, $lAnAG$TrashIcon),
+                        text: "Delete",
+                        onClick: handleDelete
+                    })
+                }),
+                portal: true,
+                placement: "right"
+            }),
+            dialogState === "confirm-delete" && /*#__PURE__*/ (0, $lAnAG$jsx)($2fdb71a9c6d7e845$var$DeleteDialog, {
+                asset: asset,
+                onClose: handleClose
+            })
+        ]
+    });
+}
+function $2fdb71a9c6d7e845$var$DeleteDialog(props) {
+    const { asset: asset , onClose: onClose  } = props;
+    const client = (0, $lAnAG$useClient)();
+    const { push: pushToast  } = (0, $lAnAG$useToast)();
+    const [deleting, setDeleting] = (0, $lAnAG$useState)(false);
+    const [deleteOnMux, setDeleteOnMux] = (0, $lAnAG$useState)(false);
+    const id = (0, $lAnAG$useId)();
+    const noPaddingOnStack = true;
+    const width = 200 * (0, $lAnAG$getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    const handleDelete = (0, $lAnAG$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, $fb3009e6005435d0$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, $lAnAG$jsx)((0, $lAnAG$Dialog), {
+        onClose: onClose,
+        id: `${id}-confirm-delete`,
+        header: "Delete video",
+        footer: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Grid), {
+            padding: 2,
+            gap: 2,
+            columns: 2,
+            children: [
+                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                    mode: "bleed",
+                    text: "Cancel",
+                    onClick: onClose
+                }),
+                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                    text: "Delete",
+                    tone: "critical",
+                    icon: (0, $lAnAG$TrashIcon),
+                    onClick: handleDelete,
+                    loading: deleting
+                })
+            ]
+        }),
+        // __unstable_autoFocus
+        width: 1,
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Stack), {
+            paddingX: noPaddingOnStack ? 0 : [
+                2,
+                3,
+                4
+            ],
+            paddingY: noPaddingOnStack ? 0 : [
+                3,
+                3,
+                3,
+                4
+            ],
+            space: 1,
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                paddingX: [
+                    2,
+                    3,
+                    4
+                ],
+                paddingY: [
+                    3,
+                    3,
+                    3,
+                    4
+                ],
+                children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Grid), {
+                    columns: 3,
+                    gap: 3,
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                            style: {
+                                gridColumn: "span 2"
+                            },
+                            align: "center",
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                                padding: 4,
+                                children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                                    space: 4,
+                                    children: [
+                                        /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+                                            align: "center",
+                                            as: "label",
+                                            children: [
+                                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Checkbox), {
+                                                    checked: deleteOnMux,
+                                                    onChange: ()=>setDeleteOnMux((prev)=>!prev)
+                                                }),
+                                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                                    style: {
+                                                        margin: "0 10px"
+                                                    },
+                                                    children: "Delete asset on Mux"
+                                                })
+                                            ]
+                                        }),
+                                        /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+                                            align: "center",
+                                            as: "label",
+                                            children: [
+                                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Checkbox), {
+                                                    disabled: true,
+                                                    checked: true
+                                                }),
+                                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                                    style: {
+                                                        margin: "0 10px"
+                                                    },
+                                                    children: "Delete video from dataset"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$export$bd4b73f15688a160), {
+                            asset: asset,
+                            width: width,
+                            showTip: true
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+function $2fdb71a9c6d7e845$export$2e2bcd8739ae039({ assets: assets , isLoading: isLoading , isLastPage: isLastPage , onSelect: onSelect , onLoadMore: onLoadMore  }) {
+    const handleClick = (0, $lAnAG$useCallback)((event)=>onSelect(event.currentTarget.dataset.id), [
+        onSelect
+    ]);
+    const handleKeyPress = (0, $lAnAG$useCallback)((event)=>{
+        if (event.key === "Enter") onSelect(event.currentTarget.dataset.id);
+    }, [
+        onSelect
+    ]);
+    const width = 200 * (0, $lAnAG$getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Box), {
+                padding: 4,
+                children: [
+                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$export$e20c438ffc62921), {
+                        gap: 2,
+                        children: assets.map((asset)=>/*#__PURE__*/ (0, $lAnAG$jsx)($2fdb71a9c6d7e845$var$VideoSourceItem, {
+                                asset: asset,
+                                onClick: handleClick,
+                                onKeyPress: handleKeyPress,
+                                width: width
+                            }, asset._id))
+                    }),
+                    isLoading && assets.length === 0 && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                        justify: "center",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Spinner), {
+                            muted: true
+                        })
+                    }),
+                    !isLoading && assets.length === 0 && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                        align: "center",
+                        muted: true,
+                        children: "No videos"
+                    })
+                ]
+            }),
+            assets.length > 0 && !isLastPage && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$export$7431cee690d58bc9), {
+                tone: "default",
+                padding: 4,
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                    direction: "column",
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                        type: "button",
+                        icon: (0, $lAnAG$DownloadIcon),
+                        loading: isLoading,
+                        onClick: onLoadMore,
+                        text: "Load more",
+                        tone: "primary"
+                    })
+                })
+            })
+        ]
+    });
+}
+const $2fdb71a9c6d7e845$var$_VideoSourceItem = ({ asset: asset , onClick: onClick , onKeyPress: onKeyPress , width: width  })=>{
+    const [hover, setHover] = (0, $lAnAG$useState)(null);
+    const ref = (0, $lAnAG$useRef)(null);
+    (0, $lAnAG$useLayoutEffect)(()=>{
+        if (!ref.current || hover === null) return;
+        if (hover) (0, $lAnAG$animate)(ref.current, {
+            opacity: 1
+        });
+        else (0, $lAnAG$animate)(ref.current, {
+            opacity: 0
+        });
+    }, [
+        hover
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Box), {
+        height: "fill",
+        style: {
+            position: "relative"
+        },
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$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, $lAnAG$jsx)((0, $6d61ace35324696d$export$bd4b73f15688a160), {
+                        asset: asset,
+                        width: width,
+                        showTip: true
+                    }),
+                    (asset === null || asset === void 0 ? void 0 : asset.playbackId) && /*#__PURE__*/ (0, $lAnAG$jsx)($2fdb71a9c6d7e845$var$AnimateWrapper, {
+                        tone: "transparent",
+                        ref: ref,
+                        margin: 1,
+                        radius: 1,
+                        children: hover !== null && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$export$357b57aa2db6117e), {
+                            asset: asset,
+                            width: width
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $lAnAG$jsx)($2fdb71a9c6d7e845$var$ActionsAssetsContainer, {
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)($2fdb71a9c6d7e845$var$AssetActionsMenu, {
+                    asset: asset
+                })
+            })
+        ]
+    });
+};
+const $2fdb71a9c6d7e845$var$VideoSourceItem = /*#__PURE__*/ (0, $lAnAG$memo)($2fdb71a9c6d7e845$var$_VideoSourceItem);
+const $2fdb71a9c6d7e845$var$AnimateWrapper = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($2fdb71a9c6d7e845$var$t || ($2fdb71a9c6d7e845$var$t = $2fdb71a9c6d7e845$var$_`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  will-change: opacity;
+  background: transparent;
+  opacity: 0;
+  pointer-events: none;
+`));
+const $2fdb71a9c6d7e845$var$ActionsAssetsContainer = (0, $lAnAG$styledcomponents).div($2fdb71a9c6d7e845$var$t1 || ($2fdb71a9c6d7e845$var$t1 = $2fdb71a9c6d7e845$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 $e7b68ee0bd37004d$var$PER_PAGE = 20;
+function $e7b68ee0bd37004d$var$createQuery(start = 0, end = $e7b68ee0bd37004d$var$PER_PAGE) {
+    return /* groq */ `*[_type == "mux.videoAsset"] | order(_updatedAt desc) [${start}...${end}]`;
+}
+function $e7b68ee0bd37004d$export$2e2bcd8739ae039({ asset: asset , onChange: onChange , setDialogState: setDialogState  }) {
+    const client = (0, $lAnAG$useClient)();
+    const pageNoRef = (0, $lAnAG$useRef)(0);
+    const [isLastPage, setLastPage] = (0, $lAnAG$useState)(false);
+    const [isLoading, setLoading] = (0, $lAnAG$useState)(false);
+    const [assets, setAssets] = (0, $lAnAG$useState)([]);
+    const fetchPage = (0, $lAnAG$useCallback)((pageNo)=>{
+        const start = pageNo * $e7b68ee0bd37004d$var$PER_PAGE;
+        const end = start + $e7b68ee0bd37004d$var$PER_PAGE;
+        setLoading(true);
+        return client.fetch($e7b68ee0bd37004d$var$createQuery(start, end)).then((result)=>{
+            setLastPage(result.length < $e7b68ee0bd37004d$var$PER_PAGE);
+            setAssets((prev)=>prev.concat(result));
+        }).finally(()=>setLoading(false));
+    }, [
+        client
+    ]);
+    const handleSelect = (0, $lAnAG$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, $lAnAG$PatchEvent).from([
+            (0, $lAnAG$setIfMissing)({
+                asset: {}
+            }),
+            (0, $lAnAG$set)({
+                _type: "reference",
+                _weak: true,
+                _ref: selected._id
+            }, [
+                "asset"
+            ]), 
+        ]));
+        setDialogState(false);
+    }, [
+        assets,
+        onChange,
+        setDialogState
+    ]);
+    const handleLoadMore = (0, $lAnAG$useCallback)(()=>{
+        fetchPage(++pageNoRef.current);
+    }, [
+        fetchPage
+    ]);
+    (0, $lAnAG$useEffect)(()=>void fetchPage(pageNoRef.current), [
+        fetchPage
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $2fdb71a9c6d7e845$export$2e2bcd8739ae039), {
+        onSelect: handleSelect,
+        assets: assets,
+        isLastPage: isLastPage,
+        isLoading: isLoading,
+        onLoadMore: handleLoadMore
+    });
+}
+
+
+function $99b7c7e884102d35$export$2e2bcd8739ae039({ setDialogState: setDialogState , asset: asset , onChange: onChange  }) {
+    const id = `InputBrowser${(0, $lAnAG$useId)()}`;
+    const handleClose = (0, $lAnAG$useCallback)(()=>setDialogState(false), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Dialog), {
+        scheme: "dark",
+        __unstable_autoFocus: true,
+        header: "Select video",
+        id: id,
+        onClose: handleClose,
+        width: 2,
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $e7b68ee0bd37004d$export$2e2bcd8739ae039), {
+            asset: asset,
+            onChange: onChange,
+            setDialogState: setDialogState
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+const $fda2d5de96370890$export$b07ce35d92a46f4b = (asset, onChange)=>{
+    const client = (0, $lAnAG$useClient)();
+    return (0, $lAnAG$useCallback)(()=>{
+        if (!asset) return;
+        onChange((0, $lAnAG$PatchEvent).from((0, $lAnAG$unset)()));
+        if (asset.assetId) (0, $fb3009e6005435d0$export$df987b50509121ea)(client, asset.assetId);
+        if (asset._id) client.delete(asset._id);
+    }, [
+        asset,
+        client,
+        onChange
+    ]);
+};
+
+
+
+
+
+function $e9846f201e1be8a8$export$b704b622b4125987({ asset: asset , client: client  }) {
+    const playbackId = (0, $b87ee69f3b2fe2f8$export$bdfa34d24bb44333)(asset);
+    const searchParams = new URLSearchParams();
+    if ((0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $df808f32f86dd2c3$export$87b96baf1080652a)(client, playbackId, "v");
+        searchParams.set("token", token);
+    }
+    return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
+}
+
+
+
+
+
+
+
+
+
+
+
+function $4d6a0d0f92115a45$export$2e2bcd8739ae039({ asset: asset , getCurrentTime: getCurrentTime , setDialogState: setDialogState  }) {
+    const client = (0, $lAnAG$useClient)();
+    const dialogId = `EditThumbnailDialog${(0, $lAnAG$useId)()}`;
+    const nextTime = (0, $lAnAG$useMemo)(()=>getCurrentTime(), [
+        getCurrentTime
+    ]);
+    const assetWithNewThumbnail = (0, $lAnAG$useMemo)(()=>(0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, asset), {
+            thumbTime: nextTime
+        }), [
+        asset,
+        nextTime
+    ]);
+    const [saving, setSaving] = (0, $lAnAG$useState)(false);
+    const [error, setError] = (0, $lAnAG$useState)(null);
+    const handleSave = (0, $lAnAG$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, $lAnAG$getDevicePixelRatio)({
+        maxDpr: 2
+    });
+    if (error) // eslint-disable-next-line no-warning-comments
+    // @TODO handle errors more gracefully
+    throw error;
+    return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Dialog), {
+        id: dialogId,
+        header: "Edit thumbnail",
+        onClose: ()=>setDialogState(false),
+        footer: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Stack), {
+            padding: 3,
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                mode: "ghost",
+                tone: "primary",
+                loading: saving,
+                onClick: handleSave,
+                text: "Set new thumbnail"
+            }, "thumbnail")
+        }),
+        children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+            space: 3,
+            padding: 3,
+            children: [
+                /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                    space: 2,
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                            size: 1,
+                            weight: "semibold",
+                            children: "Current:"
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$export$bd4b73f15688a160), {
+                            asset: asset,
+                            width: width
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                    space: 2,
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                            size: 1,
+                            weight: "semibold",
+                            children: "New:"
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$export$bd4b73f15688a160), {
+                            asset: assetWithNewThumbnail,
+                            width: width
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+
+
+
+
+
+
+
+
+
+
+
+function $6f38a47dc6ab3643$export$445f1a1fda135dc9({ asset: asset , client: client  }) {
+    const playbackId = (0, $b87ee69f3b2fe2f8$export$bdfa34d24bb44333)(asset);
+    const searchParams = new URLSearchParams();
+    if ((0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed") {
+        const token = (0, $df808f32f86dd2c3$export$87b96baf1080652a)(client, playbackId, "s");
+        searchParams.set("token", token);
+    }
+    return `https://image.mux.com/${playbackId}/storyboard.vtt?${searchParams}`;
+}
+
+
+let $00f86bf1e98fabe5$var$_ = (t3)=>t3, $00f86bf1e98fabe5$var$t, $00f86bf1e98fabe5$var$t1, $00f86bf1e98fabe5$var$t2;
+const $00f86bf1e98fabe5$export$b302ef9d8310f71 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($00f86bf1e98fabe5$var$t || ($00f86bf1e98fabe5$var$t = $00f86bf1e98fabe5$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 $00f86bf1e98fabe5$export$ec21f2fe322b745c = (0, $lAnAG$styledcomponents).div($00f86bf1e98fabe5$var$t1 || ($00f86bf1e98fabe5$var$t1 = $00f86bf1e98fabe5$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 $00f86bf1e98fabe5$export$fa0cb91fe5adf3c5 = (0, $lAnAG$styledcomponents)((0, $lAnAG$MediaControlBar))($00f86bf1e98fabe5$var$t2 || ($00f86bf1e98fabe5$var$t2 = $00f86bf1e98fabe5$var$_`
+  justify-content: flex-end;
+  button {
+    height: auto;
+  }
+`));
+function $00f86bf1e98fabe5$export$5ebdf79245c1c64a({ asset: asset  }) {
+    const client = (0, $lAnAG$useClient)();
+    const ref = (0, $lAnAG$useRef)(null);
+    const src = (0, $lAnAG$useMemo)(()=>(0, $649e715c42156121$export$8081e7a11b9f1345)({
+            client: client,
+            asset: asset,
+            width: 1920,
+            height: 1080
+        }), [
+        client,
+        asset
+    ]);
+    (0, $lAnAG$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, $lAnAG$jsx)((0, $lAnAG$MediaPosterImage), {
+        ref: ref,
+        slot: "poster",
+        src: src
+    });
+}
+function $00f86bf1e98fabe5$export$95073c0c4bf2add1({ asset: asset  }) {
+    const client = (0, $lAnAG$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, $lAnAG$useState)(()=>(0, $6f38a47dc6ab3643$export$445f1a1fda135dc9)({
+            asset: asset,
+            client: client
+        }));
+    return /*#__PURE__*/ (0, $lAnAG$jsx)("track", {
+        label: "thumbnails",
+        default: true,
+        kind: "metadata",
+        src: src
+    });
+}
+
+
+
+
+
+
+
+let $92e84bb25450e8d6$var$_ = (t4)=>t4, $92e84bb25450e8d6$var$t, $92e84bb25450e8d6$var$t1, $92e84bb25450e8d6$var$t2, $92e84bb25450e8d6$var$t3;
+const $92e84bb25450e8d6$export$6aa22a823032b784 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($92e84bb25450e8d6$var$t || ($92e84bb25450e8d6$var$t = $92e84bb25450e8d6$var$_`
+  min-height: 82px;
+  box-sizing: border-box;
+`));
+const $92e84bb25450e8d6$export$245cfede9308c835 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Flex))($92e84bb25450e8d6$var$t1 || ($92e84bb25450e8d6$var$t1 = $92e84bb25450e8d6$var$_`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`));
+const $92e84bb25450e8d6$export$e3b4754a92ccf466 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Stack))($92e84bb25450e8d6$var$t2 || ($92e84bb25450e8d6$var$t2 = $92e84bb25450e8d6$var$_`
+  position: relative;
+  width: 60%;
+`));
+const $92e84bb25450e8d6$export$bedb6b8ab184f038 = (0, $lAnAG$styledcomponents)((0, $lAnAG$Code))($92e84bb25450e8d6$var$t3 || ($92e84bb25450e8d6$var$t3 = $92e84bb25450e8d6$var$_`
+  position: relative;
+  width: 100%;
+
+  code {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+    max-width: 200px;
+  }
+`));
+const $92e84bb25450e8d6$export$98a3886347b629fb = ({ progress: progress = 100 , onCancel: onCancel , filename: filename , text: text = "Uploading"  })=>{
+    return /*#__PURE__*/ (0, $lAnAG$jsx)($92e84bb25450e8d6$export$6aa22a823032b784, {
+        tone: "primary",
+        padding: 4,
+        border: true,
+        height: "fill",
+        children: /*#__PURE__*/ (0, $lAnAG$jsxs)($92e84bb25450e8d6$export$245cfede9308c835, {
+            align: "center",
+            justify: "space-between",
+            height: "fill",
+            direction: "row",
+            gap: 2,
+            children: [
+                /*#__PURE__*/ (0, $lAnAG$jsxs)($92e84bb25450e8d6$export$e3b4754a92ccf466, {
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                            justify: "center",
+                            gap: [
+                                3,
+                                3,
+                                2,
+                                2
+                            ],
+                            direction: [
+                                "column",
+                                "column",
+                                "row"
+                            ],
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                size: 1,
+                                children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Inline), {
+                                    space: 2,
+                                    children: [
+                                        text,
+                                        /*#__PURE__*/ (0, $lAnAG$jsx)($92e84bb25450e8d6$export$bedb6b8ab184f038, {
+                                            size: 1,
+                                            children: filename ? filename : "..."
+                                        })
+                                    ]
+                                })
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                            marginTop: 3,
+                            radius: 5,
+                            shadow: 1,
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$LinearProgress), {
+                                value: progress
+                            })
+                        })
+                    ]
+                }),
+                onCancel ? /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                    fontSize: 2,
+                    text: "Cancel upload",
+                    mode: "ghost",
+                    tone: "critical",
+                    onClick: onCancel
+                }) : null
+            ]
+        })
+    });
+};
+
+
+const $a094825b464048a2$var$MuxVideo = ({ asset: asset , buttons: buttons , readOnly: readOnly , onChange: onChange , dialogState: dialogState , setDialogState: setDialogState  })=>{
+    var ref8, ref1, ref2, ref3;
+    const client = (0, $lAnAG$useClient)();
+    const isLoading = (0, $lAnAG$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, $lAnAG$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, $lAnAG$useMemo)(()=>asset.playbackId && (0, $e9846f201e1be8a8$export$b704b622b4125987)({
+            client: client,
+            asset: asset
+        }), [
+        asset,
+        client
+    ]);
+    const [error, setError] = (0, $lAnAG$useState)(null);
+    const handleError = (0, $lAnAG$useCallback)((event)=>setError(event.currentTarget.error), []);
+    const playRef = (0, $lAnAG$useRef)(null);
+    const muteRef = (0, $lAnAG$useRef)(null);
+    const video = (0, $lAnAG$useRef)(null);
+    var ref4;
+    const getCurrentTime = (0, $lAnAG$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, $fda2d5de96370890$export$b07ce35d92a46f4b)(asset, onChange);
+    (0, $lAnAG$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, $lAnAG$useState)(()=>(0, $lAnAG$generatePlayerInitTime)());
+    const playbackEngineRef = (0, $lAnAG$useRef)(undefined);
+    (0, $lAnAG$useEffect)(()=>{
+        if (isLoading || !videoSrc) return;
+        const nextPlaybackEngineRef = (0, $lAnAG$initialize)({
+            src: videoSrc,
+            playerInitTime: playerInitTime,
+            playerSoftwareName: "sanity-plugin-mux-input",
+            playerSoftwareVersion: "dev-preview"
+        }, video.current, playbackEngineRef.current);
+        playbackEngineRef.current = nextPlaybackEngineRef;
+    }, [
+        videoSrc,
+        isLoading,
+        playerInitTime
+    ]);
+    (0, $lAnAG$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, $lAnAG$jsx)((0, $92e84bb25450e8d6$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, $lAnAG$jsxs)((0, $lAnAG$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $00f86bf1e98fabe5$export$b302ef9d8310f71), {
+                shadow: 1,
+                tone: "transparent",
+                scheme: "dark",
+                children: [
+                    /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$MediaController), {
+                        children: [
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("video", {
+                                playsInline: true,
+                                ref: video,
+                                onError: handleError,
+                                slot: "media",
+                                preload: "metadata",
+                                crossOrigin: "anonomous",
+                                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $00f86bf1e98fabe5$export$95073c0c4bf2add1), {
+                                    asset: asset
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $00f86bf1e98fabe5$export$5ebdf79245c1c64a), {
+                                asset: asset
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaLoadingIndicator), {
+                                slot: "centered-chrome",
+                                noAutoHide: true
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $00f86bf1e98fabe5$export$ec21f2fe322b745c), {
+                                slot: "centered-chrome",
+                                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaPlayButton), {})
+                            }),
+                            buttons && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $00f86bf1e98fabe5$export$fa0cb91fe5adf3c5), {
+                                slot: "top-chrome",
+                                children: buttons
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$MediaControlBar), {
+                                children: [
+                                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaMuteButton), {}),
+                                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaTimeDisplay), {}),
+                                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaTimeRange), {}),
+                                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaDurationDisplay), {}),
+                                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MediaFullscreenButton), {})
+                                ]
+                            })
+                        ]
+                    }),
+                    isPreparingStaticRenditions && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                        padding: 2,
+                        radius: 1,
+                        style: {
+                            background: "var(--card-fg-color)",
+                            position: "absolute",
+                            top: "0.5em",
+                            left: "0.5em"
+                        },
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                            size: 1,
+                            style: {
+                                color: "var(--card-bg-color)"
+                            },
+                            children: "MUX is preparing static renditions, please stand by"
+                        })
+                    })
+                ]
+            }),
+            dialogState === "edit-thumbnail" && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $4d6a0d0f92115a45$export$2e2bcd8739ae039), {
+                asset: asset,
+                getCurrentTime: getCurrentTime,
+                setDialogState: setDialogState
+            })
+        ]
+    });
+};
+var $a094825b464048a2$export$2e2bcd8739ae039 = $a094825b464048a2$var$MuxVideo;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+function $55e2ea4991872d02$export$a79bcc1dc439e294(border) {
+    return `inset 0 0 0 ${border.width}px ${border.color}`;
+}
+function $55e2ea4991872d02$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 && $55e2ea4991872d02$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 $48af3f13188cf083$var$_ = (t1)=>t1, $48af3f13188cf083$var$t;
+const $48af3f13188cf083$export$de1df6cdafc19206 = (0, $lAnAG$styledcomponents)((0, $lAnAG$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, $lAnAG$css)($48af3f13188cf083$var$t || ($48af3f13188cf083$var$t = $48af3f13188cf083$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, $55e2ea4991872d02$export$c339ddc20364daad)({
+        base: base,
+        border: border,
+        focusRing: focusRing
+    }));
+});
+
+
+var $adafc56722526c81$export$c1c647ae58701638 = /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$swchelperssrc_object_without_propertiesmjs)(props, [
+        "icon",
+        "id",
+        "accept",
+        "capture",
+        "fontSize",
+        "multiple",
+        "onSelect",
+        "padding",
+        "space",
+        "textAlign",
+        "text",
+        "disabled"
+    ]);
+    const id = (0, $lAnAG$useId)(idProp);
+    const handleChange = (0, $lAnAG$react).useCallback((event)=>{
+        if (onSelect && event.target.files) onSelect(Array.from(event.target.files));
+    }, [
+        onSelect
+    ]);
+    const content = /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+        align: "center",
+        justify: "flex-start",
+        padding: padding,
+        children: [
+            icon && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                marginRight: text ? space : undefined,
+                children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Text), {
+                    size: fontSize,
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$isValidElement)(icon) && icon,
+                        (0, $lAnAG$isValidElementType)(icon) && /*#__PURE__*/ (0, $lAnAG$createElement)(icon)
+                    ]
+                })
+            }),
+            text && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                align: textAlign,
+                size: fontSize,
+                textOverflow: "ellipsis",
+                children: text
+            })
+        ]
+    });
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $48af3f13188cf083$export$de1df6cdafc19206), (0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, rest), {
+        htmlFor: id,
+        padding: 0,
+        fontSize: 2,
+        disabled: disabled,
+        ref: forwardedRef,
+        children: [
+            content,
+            /*#__PURE__*/ (0, $lAnAG$jsx)("input", {
+                "data-testid": "file-button-input",
+                accept: accept,
+                capture: capture,
+                id: id,
+                multiple: multiple,
+                onChange: handleChange,
+                type: "file",
+                value: "",
+                disabled: disabled
+            })
+        ]
+    }));
+});
+
+
+let $98a04f731a506f7d$var$_ = (t2)=>t2, $98a04f731a506f7d$var$t, $98a04f731a506f7d$var$t1;
+const $98a04f731a506f7d$var$LockCard = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($98a04f731a506f7d$var$t || ($98a04f731a506f7d$var$t = $98a04f731a506f7d$var$_`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.6;
+  mix-blend-mode: screen;
+  background: transparent;
+`));
+const $98a04f731a506f7d$var$LockButton = (0, $lAnAG$styledcomponents)((0, $lAnAG$Button))($98a04f731a506f7d$var$t1 || ($98a04f731a506f7d$var$t1 = $98a04f731a506f7d$var$_`
+  background: transparent;
+  color: white;
+`));
+function $98a04f731a506f7d$var$PlayerActionsMenu(props) {
+    const { asset: asset , readOnly: readOnly , dialogState: dialogState , setDialogState: setDialogState , onChange: onChange , onUpload: onUpload  } = props;
+    const [open, setOpen] = (0, $lAnAG$useState)(false);
+    const [menuElement, setMenuRef] = (0, $lAnAG$useState)(null);
+    const isSigned = (0, $lAnAG$useMemo)(()=>(0, $53c0557e92647bc3$export$f7d2546fac75bbd)(asset) === "signed", [
+        asset
+    ]);
+    const onReset = (0, $lAnAG$useCallback)(()=>onChange((0, $lAnAG$PatchEvent).from((0, $lAnAG$unset)([]))), [
+        onChange
+    ]);
+    (0, $lAnAG$useEffect)(()=>{
+        if (open && dialogState) setOpen(false);
+    }, [
+        dialogState,
+        open
+    ]);
+    (0, $lAnAG$useClickOutside)((0, $lAnAG$useCallback)(()=>setOpen(false), []), [
+        menuElement
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Inline), {
+        space: 1,
+        padding: 2,
+        children: [
+            isSigned && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Tooltip), {
+                content: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                    padding: 2,
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                        muted: true,
+                        size: 1,
+                        children: "Signed playback policy"
+                    })
+                }),
+                placement: "right",
+                portal: true,
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)($98a04f731a506f7d$var$LockCard, {
+                    radius: 2,
+                    margin: 2,
+                    scheme: "dark",
+                    tone: "positive",
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)($98a04f731a506f7d$var$LockButton, {
+                        icon: (0, $lAnAG$LockIcon),
+                        mode: "bleed",
+                        tone: "positive"
+                    })
+                })
+            }),
+            !readOnly && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                icon: (0, $lAnAG$EditIcon),
+                mode: "ghost",
+                onClick: ()=>setDialogState("edit-thumbnail")
+            }),
+            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Popover), {
+                content: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Menu), {
+                    ref: setMenuRef,
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                            padding: 2,
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Label), {
+                                muted: true,
+                                size: 1,
+                                children: "Replace"
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $adafc56722526c81$export$c1c647ae58701638), {
+                            accept: "video/*",
+                            icon: (0, $lAnAG$UploadIcon),
+                            mode: "bleed",
+                            onSelect: onUpload,
+                            text: "Upload",
+                            disabled: readOnly,
+                            fontSize: 2
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuItem), {
+                            icon: (0, $lAnAG$SearchIcon),
+                            text: "Browse",
+                            onClick: ()=>setDialogState("select-video")
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuDivider), {}),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuItem), {
+                            icon: (0, $lAnAG$PlugIcon),
+                            text: "Configure API",
+                            onClick: ()=>setDialogState("secrets")
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuDivider), {}),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$MenuItem), {
+                            tone: "critical",
+                            icon: (0, $lAnAG$ResetIcon),
+                            text: "Clear field",
+                            onClick: onReset,
+                            disabled: readOnly
+                        })
+                    ]
+                }),
+                portal: true,
+                open: open,
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                    icon: (0, $lAnAG$EllipsisVerticalIcon),
+                    mode: "ghost",
+                    onClick: ()=>{
+                        setDialogState(false);
+                        setOpen(true);
+                    }
+                })
+            })
+        ]
+    });
+}
+var $98a04f731a506f7d$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $lAnAG$memo)($98a04f731a506f7d$var$PlayerActionsMenu);
+
+
+
+
+
+
+
+
+
+let $40c930d0837024bb$var$_ = (t1)=>t1, $40c930d0837024bb$var$t;
+function $40c930d0837024bb$export$ed320981107bc6bd(component) {
+    return (0, $lAnAG$styledcomponents)(component)((props)=>{
+        const border = {
+            width: props.$border ? 1 : 0,
+            color: "var(--card-border-color)"
+        };
+        return (0, $lAnAG$css)($40c930d0837024bb$var$t || ($40c930d0837024bb$var$t = $40c930d0837024bb$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, $55e2ea4991872d02$export$a79bcc1dc439e294)(border), (0, $lAnAG$rem)(props.theme.sanity.radius[1]), (0, $55e2ea4991872d02$export$c339ddc20364daad)({
+            base: props.theme.sanity.color.base,
+            border: border,
+            focusRing: props.theme.sanity.focusRing
+        }));
+    });
+}
+
+
+
+
+let $a6ee8243b0fcaa21$var$_ = (t1)=>t1, $a6ee8243b0fcaa21$var$t;
+const $a6ee8243b0fcaa21$var$ctrlKey = 17;
+const $a6ee8243b0fcaa21$var$cmdKey = 91;
+const $a6ee8243b0fcaa21$var$UploadCardWithFocusRing = (0, $40c930d0837024bb$export$ed320981107bc6bd)((0, $lAnAG$Card));
+const $a6ee8243b0fcaa21$export$88f8ee83ae881d58 = /*#__PURE__*/ (0, $lAnAG$forwardRef)(({ children: children , tone: tone , onPaste: onPaste , onFocus: onFocus , onBlur: onBlur , onDrop: onDrop , onDragEnter: onDragEnter , onDragLeave: onDragLeave , onDragOver: onDragOver  }, forwardedRef)=>{
+    const ctrlDown = (0, $lAnAG$useRef)(false);
+    const inputRef = (0, $lAnAG$useRef)(null);
+    const handleKeyDown = (0, $lAnAG$useCallback)((event)=>{
+        if (event.keyCode == $a6ee8243b0fcaa21$var$ctrlKey || event.keyCode == $a6ee8243b0fcaa21$var$cmdKey) ctrlDown.current = true;
+        const vKey = 86;
+        if (ctrlDown.current && event.keyCode == vKey) inputRef.current.focus();
+    }, []);
+    const handleKeyUp = (0, $lAnAG$useCallback)((event)=>{
+        if (event.keyCode == $a6ee8243b0fcaa21$var$ctrlKey || event.keyCode == $a6ee8243b0fcaa21$var$cmdKey) ctrlDown.current = false;
+    }, []);
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)($a6ee8243b0fcaa21$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, $lAnAG$jsx)($a6ee8243b0fcaa21$var$HiddenInput, {
+                ref: inputRef,
+                onPaste: onPaste
+            }),
+            children
+        ]
+    });
+});
+const $a6ee8243b0fcaa21$var$HiddenInput = (0, $lAnAG$styledcomponents).input.attrs({
+    type: "text"
+})($a6ee8243b0fcaa21$var$t || ($a6ee8243b0fcaa21$var$t = $a6ee8243b0fcaa21$var$_`
+  position: absolute;
+  border: 0;
+  color: white;
+  opacity: 0;
+
+  &:focus {
+    outline: none;
+  }
+`));
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+let $fbf1730dec25840b$var$_ = (t2)=>t2, $fbf1730dec25840b$var$t, $fbf1730dec25840b$var$t1;
+const $fbf1730dec25840b$var$HiddenInput = (0, $lAnAG$styledcomponents).input($fbf1730dec25840b$var$t || ($fbf1730dec25840b$var$t = $fbf1730dec25840b$var$_`
+  overflow: hidden;
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  position: absolute;
+  z-index: -1;
+`));
+const $fbf1730dec25840b$var$Label = (0, $lAnAG$styledcomponents).label($fbf1730dec25840b$var$t1 || ($fbf1730dec25840b$var$t1 = $fbf1730dec25840b$var$_`
+  position: relative;
+`));
+var $fbf1730dec25840b$export$c6c4e824471beee6 = (_param)=>{
+    var { onSelect: onSelect  } = _param, props = (0, $lAnAG$swchelperssrc_object_without_propertiesmjs)(_param, [
+        "onSelect"
+    ]);
+    const inputId = `FileSelect${(0, $lAnAG$useId)()}`;
+    const inputRef = (0, $lAnAG$useRef)(null);
+    const handleSelect = (0, $lAnAG$useCallback)((event)=>{
+        if (onSelect) onSelect(event.target.files);
+    }, [
+        onSelect
+    ]);
+    const handleButtonClick = (0, $lAnAG$useCallback)(()=>{
+        var ref;
+        return (ref = inputRef.current) === null || ref === void 0 ? void 0 : ref.click();
+    }, []);
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)($fbf1730dec25840b$var$Label, {
+        htmlFor: inputId,
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsx)($fbf1730dec25840b$var$HiddenInput, {
+                accept: "video/*",
+                ref: inputRef,
+                tabIndex: 0,
+                type: "file",
+                id: inputId,
+                onChange: handleSelect,
+                value: ""
+            }),
+            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), (0, $lAnAG$swchelperssrc_object_spreadmjs)({
+                onClick: handleButtonClick,
+                mode: "default",
+                tone: "primary",
+                style: {
+                    width: "100%"
+                }
+            }, props))
+        ]
+    });
+};
+
+
+let $0ded6eeffc56fdb2$var$_ = (t2)=>t2, $0ded6eeffc56fdb2$var$t, $0ded6eeffc56fdb2$var$t1;
+const $0ded6eeffc56fdb2$var$UploadCard = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($0ded6eeffc56fdb2$var$t || ($0ded6eeffc56fdb2$var$t = $0ded6eeffc56fdb2$var$_`
+  && {
+    border-style: dashed;
+  }
+`));
+const $0ded6eeffc56fdb2$var$ConfigureApiBox = (0, $lAnAG$styledcomponents)((0, $lAnAG$Box))($0ded6eeffc56fdb2$var$t1 || ($0ded6eeffc56fdb2$var$t1 = $0ded6eeffc56fdb2$var$_`
+  position: absolute;
+  top: 0;
+  right: 0;
+`));
+function $0ded6eeffc56fdb2$export$2e2bcd8739ae039(props) {
+    const { setDialogState: setDialogState , readOnly: readOnly , onSelect: onSelect , hovering: hovering , needsSetup: needsSetup  } = props;
+    const handleBrowse = (0, $lAnAG$useCallback)(()=>setDialogState("select-video"), [
+        setDialogState
+    ]);
+    const handleConfigureApi = (0, $lAnAG$useCallback)(()=>setDialogState("secrets"), [
+        setDialogState
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+        style: {
+            padding: 1,
+            position: "relative"
+        },
+        height: "stretch",
+        children: /*#__PURE__*/ (0, $lAnAG$jsxs)($0ded6eeffc56fdb2$var$UploadCard, {
+            sizing: "border",
+            height: "fill",
+            tone: readOnly ? "transparent" : "inherit",
+            border: true,
+            padding: 3,
+            style: hovering ? {
+                borderColor: "transparent"
+            } : undefined,
+            children: [
+                /*#__PURE__*/ (0, $lAnAG$jsx)($0ded6eeffc56fdb2$var$ConfigureApiBox, {
+                    padding: 3,
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                        padding: 3,
+                        radius: 3,
+                        tone: needsSetup ? "critical" : undefined,
+                        onClick: handleConfigureApi,
+                        icon: (0, $lAnAG$PlugIcon),
+                        mode: "bleed"
+                    })
+                }),
+                /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+                    align: "center",
+                    justify: "space-between",
+                    gap: 4,
+                    direction: [
+                        "column",
+                        "column",
+                        "row"
+                    ],
+                    paddingY: [
+                        2,
+                        2,
+                        0
+                    ],
+                    sizing: "border",
+                    height: "fill",
+                    children: [
+                        /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+                            align: "center",
+                            justify: "center",
+                            gap: 2,
+                            flex: 1,
+                            children: [
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                                    justify: "center",
+                                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                        muted: true,
+                                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$DocumentVideoIcon), {})
+                                    })
+                                }),
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                                    justify: "center",
+                                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                        size: 1,
+                                        muted: true,
+                                        children: "Drag video or paste URL here"
+                                    })
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Inline), {
+                            space: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $fbf1730dec25840b$export$c6c4e824471beee6), {
+                                    mode: "ghost",
+                                    tone: "default",
+                                    icon: (0, $lAnAG$UploadIcon),
+                                    text: "Upload",
+                                    onSelect: onSelect
+                                }),
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                                    mode: "ghost",
+                                    icon: (0, $lAnAG$SearchIcon),
+                                    text: "Select",
+                                    onClick: handleBrowse
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+
+
+
+class $1e6f849e3fcd818c$var$MuxVideoInputUploader extends (0, $lAnAG$Component) {
+    componentWillUnmount() {
+        this.unSubscribeToUpload();
+    }
+    componentDidMount() {
+        const events$ = new (0, $lAnAG$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, $lAnAG$jsx)((0, $92e84bb25450e8d6$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, $lAnAG$jsxs)((0, $lAnAG$Fragment), {
+            children: [
+                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $a6ee8243b0fcaa21$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, $lAnAG$jsx)((0, $a094825b464048a2$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, $lAnAG$jsx)((0, $98a04f731a506f7d$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, $lAnAG$jsx)((0, $0ded6eeffc56fdb2$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, $lAnAG$jsx)((0, $99b7c7e884102d35$export$2e2bcd8739ae039), {
+                    asset: this.props.asset,
+                    onChange: this.props.onChange,
+                    setDialogState: this.props.setDialogState
+                })
+            ]
+        });
+    }
+    constructor(...args){
+        super(...args);
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "state", {
+            isDraggingOver: false,
+            invalidPaste: false,
+            invalidFile: false,
+            uploadProgress: null,
+            fileInfo: null,
+            uuid: null,
+            error: null,
+            url: null
+        });
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "dragEnteredEls", []);
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "ctrlDown", false);
+        // eslint-disable-next-line no-warning-comments
+        // @TODO add proper typings for the return values of uploadFile and uploadUrl
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "upload", null);
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "container", /*#__PURE__*/ (0, $lAnAG$react).createRef());
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "handleProgress", (evt)=>{
+            this.setState({
+                uploadProgress: evt.percent
+            });
+        });
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "onUpload", (files)=>{
+            this.setState({
+                uploadProgress: 0,
+                fileInfo: null,
+                uuid: null
+            });
+            this.upload = (0, $96f24671e0303f47$export$a5575dbeeffdad98)(this.props.config, this.props.client, files[0], {
+                enableSignedUrls: this.props.secrets.enableSignedUrls
+            }).pipe((0, $lAnAG$takeUntil)(this.onCancelUploadButtonClick$.pipe((0, $lAnAG$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, $lAnAG$swchelperssrc_define_propertymjs)(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, $lAnAG$swchelperssrc_define_propertymjs)(this, "handleUploadSuccess", (asset)=>{
+            this.setState({
+                uploadProgress: 100
+            });
+            this.props.onChange((0, $lAnAG$PatchEvent).from([
+                (0, $lAnAG$setIfMissing)({
+                    asset: {}
+                }),
+                (0, $lAnAG$set)({
+                    _type: "reference",
+                    _weak: true,
+                    _ref: asset._id
+                }, [
+                    "asset"
+                ]), 
+            ]));
+        });
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(this, "handlePaste", (event)=>{
+            const clipboardData = event.clipboardData || window.clipboardData;
+            const url = clipboardData.getData("text");
+            const options = {
+                enableSignedUrls: this.props.secrets.enableSignedUrls
+            };
+            this.upload = (0, $96f24671e0303f47$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, $lAnAG$swchelperssrc_define_propertymjs)(this, "handleDrop", (event)=>{
+            this.setState({
+                isDraggingOver: false
+            });
+            event.preventDefault();
+            event.stopPropagation();
+            (0, $4e510dd53b714187$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, $lAnAG$swchelperssrc_define_propertymjs)(this, "handleDragOver", (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+        });
+        (0, $lAnAG$swchelperssrc_define_propertymjs)(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, $lAnAG$swchelperssrc_define_propertymjs)(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
+            });
+        });
     }
-    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 $1e6f849e3fcd818c$export$2e2bcd8739ae039 = $1e6f849e3fcd818c$var$MuxVideoInputUploader;
+
+
+
+
+
+
+
+
+
+
+const $93b38f02837bfd52$export$e1d4ef4fde5dbdf2 = (client, secrets)=>{
+    return (0, $lAnAG$useCallback)(async ({ token: token , secretKey: secretKey , enableSignedUrls: enableSignedUrls  })=>{
+        let { signingKeyId: signingKeyId , signingKeyPrivate: signingKeyPrivate  } = secrets;
+        try {
+            await (0, $467babf025eab28e$export$f16c6d66b9790f06)(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
+            const valid = await (0, $467babf025eab28e$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, $467babf025eab28e$export$f5836111430d17bc)(client, signingKeyId, signingKeyPrivate);
+            if (!hasValidSigningKeys) try {
+                const { data: data  } = await (0, $467babf025eab28e$export$21cc0cab779cfac1)(client);
+                signingKeyId = data.id;
+                signingKeyPrivate = data.private_key;
+                await (0, $467babf025eab28e$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 $2009a875dc2b1e38$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 $2009a875dc2b1e38$var$reducer(state, action) {
+    switch(action === null || action === void 0 ? void 0 : action.type){
+        case "submit":
+            return (0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, state), {
+                submitting: true,
+                error: null
+            });
+        case "error":
+            return (0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, state), {
+                submitting: false,
+                error: action.payload
+            });
+        case "reset":
+            return $2009a875dc2b1e38$var$init(action.payload);
+        case "change":
+            return (0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, state), {
+                [action.payload.name]: action.payload.value
+            });
+        default:
+            throw new Error(`Unknown action type: ${action === null || action === void 0 ? void 0 : action.type}`);
     }
-    var err = new Error("Cannot find module '" + id + "'");
-    err.code = 'MODULE_NOT_FOUND';
-    throw err;
-  };
+}
+const $2009a875dc2b1e38$export$e24a74f4fce2446c = (secrets)=>(0, $lAnAG$useReducer)($2009a875dc2b1e38$var$reducer, secrets, $2009a875dc2b1e38$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 $e5db4a7ae122bbf8$var$ids = [
+    "title",
+    "a",
+    "b",
+    "c",
+    "d",
+    "e",
+    "f",
+    "g",
+    "h",
+    "i",
+    "j",
+    "k",
+    "l",
+    "m",
+    "n",
+    "o",
+    "p",
+    "q",
+    "r", 
+];
+function $e5db4a7ae122bbf8$export$2e2bcd8739ae039({ height: height = 26  }) {
+    const id = (0, $lAnAG$useId)();
+    const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = (0, $lAnAG$useMemo)(()=>$e5db4a7ae122bbf8$var$ids.map((field)=>`${id}-${field}`), [
+        id
+    ]);
+    return /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("title", {
+                id: titleId,
+                children: "Mux Logo"
+            }),
+            /*#__PURE__*/ (0, $lAnAG$jsxs)("defs", {
+                children: [
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("stop", {
+                                offset: 0,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff4e00"
+                                }
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)("stop", {
+                                offset: 1,
+                                style: {
+                                    stopOpacity: 1,
+                                    stopColor: "#ff1791"
+                                }
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: a,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: b,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M423.64 242h164.999V77H423.64Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: e,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: f,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M311.3 242h93.031V77H311.3Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: h,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M198.96 242h35.106V77H198.96Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: n,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M0 319h657.706V0H0Z"
+                        })
+                    }),
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("clipPath", {
+                        id: o,
+                        clipPathUnits: "userSpaceOnUse",
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)("path", {
+                            d: "M69.067 242H169.12V141.947H69.067Z"
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, $lAnAG$jsx)("g", {
+                clipPath: `url(#${a})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)("g", {
+                    style: {
+                        opacity: 0.69999701
+                    },
+                    clipPath: `url(#${b})`,
+                    children: /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$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, $lAnAG$jsxs)("g", {
+                clipPath: `url(#${e})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: [
+                    /*#__PURE__*/ (0, $lAnAG$jsx)("g", {
+                        style: {
+                            opacity: 0.69999701
+                        },
+                        clipPath: `url(#${f})`,
+                        children: /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$jsx)("g", {
+                        style: {
+                            opacity: 0.69999701
+                        },
+                        clipPath: `url(#${h})`,
+                        children: /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$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, $lAnAG$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, $lAnAG$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, $lAnAG$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, $lAnAG$jsx)("g", {
+                clipPath: `url(#${n})`,
+                transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)("g", {
+                    style: {
+                        opacity: 0.69999701
+                    },
+                    clipPath: `url(#${o})`,
+                    children: /*#__PURE__*/ (0, $lAnAG$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, $lAnAG$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, $lAnAG$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)"
+            })
+        ]
+    });
+}
+
+
+let $caae83a439f13a20$var$_ = (t1)=>t1, $caae83a439f13a20$var$t;
+const $caae83a439f13a20$var$Logo = (0, $lAnAG$styledcomponents).span($caae83a439f13a20$var$t || ($caae83a439f13a20$var$t = $caae83a439f13a20$var$_`
+  display: inline-block;
+  height: 0.8em;
+  margin-right: 1em;
+  transform: translate(0.3em, -0.2em);
+`));
+const $caae83a439f13a20$export$8b251419efc915eb = ()=>/*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Fragment), {
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsx)($caae83a439f13a20$var$Logo, {
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $e5db4a7ae122bbf8$export$2e2bcd8739ae039), {
+                    height: 13
+                })
+            }),
+            "API Credentials"
+        ]
+    });
+
+
 
-  parcelRequire.register = function register(id, init) {
-    $parcel$inits[id] = init;
-  };
 
-  $parcel$global["parcelRequire4c51"] = parcelRequire;
+
+function $040fe68d1b0334ea$var$FormField(props) {
+    const { children: children , title: title , description: description , inputId: inputId  } = props;
+    return /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+        space: 1,
+        children: [
+            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                align: "flex-end",
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                    flex: 1,
+                    paddingY: 2,
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Stack), {
+                        space: 2,
+                        children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+                            children: [
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                    as: "label",
+                                    htmlFor: inputId,
+                                    weight: "semibold",
+                                    size: 1,
+                                    children: title || /*#__PURE__*/ (0, $lAnAG$jsx)("em", {
+                                        children: "Untitled"
+                                    })
+                                }),
+                                description && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                    muted: true,
+                                    size: 1,
+                                    children: description
+                                })
+                            ]
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ (0, $lAnAG$jsx)("div", {
+                children: children
+            })
+        ]
+    });
 }
-parcelRequire.register("jH2rf", function(module, exports) {
+var $040fe68d1b0334ea$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $lAnAG$memo)($040fe68d1b0334ea$var$FormField);
 
-$parcel$export(module.exports, "name", () => $9171e222faf8652c$export$a8ff84c12d48cfa6);
-$parcel$export(module.exports, "cacheNs", () => $9171e222faf8652c$export$13cdb654d47e0703);
-$parcel$export(module.exports, "muxSecretsDocumentId", () => $9171e222faf8652c$export$64952397958089dd);
-const $9171e222faf8652c$export$a8ff84c12d48cfa6 = "mux-input";
-const $9171e222faf8652c$export$13cdb654d47e0703 = "sanity-plugin-mux-input";
-const $9171e222faf8652c$export$64952397958089dd = "secrets.mux";
 
-});
+const $f56cae7201fafa6f$var$fieldNames = [
+    "token",
+    "secretKey",
+    "enableSignedUrls"
+];
+function $f56cae7201fafa6f$var$ConfigureApi({ secrets: secrets , setDialogState: setDialogState  }) {
+    const client = (0, $lAnAG$useClient)();
+    const [state, dispatch] = (0, $2009a875dc2b1e38$export$e24a74f4fce2446c)(secrets);
+    const hasSecretsInitially = (0, $lAnAG$useMemo)(()=>secrets.token && secrets.secretKey, [
+        secrets
+    ]);
+    const handleClose = (0, $lAnAG$useCallback)(()=>setDialogState(false), [
+        setDialogState
+    ]);
+    const dirty = (0, $lAnAG$useMemo)(()=>secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [
+        secrets,
+        state
+    ]);
+    const id = `ConfigureApi${(0, $lAnAG$useId)()}`;
+    const [tokenId, secretKeyId, enableSignedUrlsId] = (0, $lAnAG$useMemo)(()=>$f56cae7201fafa6f$var$fieldNames.map((field)=>`${id}-${field}`), [
+        id
+    ]);
+    const firstField = (0, $lAnAG$useRef)(null);
+    const handleSaveSecrets = (0, $93b38f02837bfd52$export$e1d4ef4fde5dbdf2)(client, secrets);
+    const saving = (0, $lAnAG$useRef)(false);
+    const handleSubmit = (0, $lAnAG$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, $lAnAG$clear)([
+                    (0, $81deebaa2da6d866$export$13cdb654d47e0703),
+                    (0, $3208be7e9a7ca648$export$9c7ae676ac45430a),
+                    projectId,
+                    dataset
+                ]);
+                (0, $lAnAG$preload)(()=>Promise.resolve(savedSecrets), [
+                    (0, $81deebaa2da6d866$export$13cdb654d47e0703),
+                    (0, $3208be7e9a7ca648$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, $lAnAG$useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "token",
+                value: event.currentTarget.value
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    const handleChangeSecretKey = (0, $lAnAG$useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "secretKey",
+                value: event.currentTarget.value
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    const handleChangeEnableSignedUrls = (0, $lAnAG$useCallback)((event)=>{
+        dispatch({
+            type: "change",
+            payload: {
+                name: "enableSignedUrls",
+                value: event.currentTarget.checked
+            }
+        });
+    }, [
+        dispatch
+    ]);
+    (0, $lAnAG$useEffect)(()=>{
+        if (firstField.current) firstField.current.focus();
+    }, [
+        firstField
+    ]);
+    var _token, _secretKey;
+    return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Dialog), {
+        id: id,
+        onClose: handleClose,
+        header: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $caae83a439f13a20$export$8b251419efc915eb), {}),
+        width: 0,
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+            padding: 4,
+            style: {
+                position: "relative"
+            },
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)("form", {
+                onSubmit: handleSubmit,
+                noValidate: true,
+                children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                    space: 4,
+                    children: [
+                        !hasSecretsInitially && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                            padding: [
+                                3,
+                                3,
+                                3
+                            ],
+                            radius: 2,
+                            shadow: 1,
+                            tone: "primary",
+                            children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                                space: 3,
+                                children: [
+                                    /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Text), {
+                                        size: 1,
+                                        children: [
+                                            "To set up a new access token, go to your",
+                                            " ",
+                                            /*#__PURE__*/ (0, $lAnAG$jsx)("a", {
+                                                href: "https://dashboard.mux.com/settings/access-tokens",
+                                                target: "_blank",
+                                                rel: "noreferrer noopener",
+                                                children: "account on mux.com"
+                                            }),
+                                            "."
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Text), {
+                                        size: 1,
+                                        children: [
+                                            "The access token needs permissions: ",
+                                            /*#__PURE__*/ (0, $lAnAG$jsx)("strong", {
+                                                children: "Mux Video "
+                                            }),
+                                            "(Full Access) and ",
+                                            /*#__PURE__*/ (0, $lAnAG$jsx)("strong", {
+                                                children: "Mux Data"
+                                            }),
+                                            " (Read)",
+                                            /*#__PURE__*/ (0, $lAnAG$jsx)("br", {}),
+                                            "The credentials will be stored safely in a hidden document only available to editors."
+                                        ]
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $040fe68d1b0334ea$export$2e2bcd8739ae039), {
+                            title: "Access Token",
+                            inputId: tokenId,
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$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, $lAnAG$jsx)((0, $040fe68d1b0334ea$export$2e2bcd8739ae039), {
+                            title: "Secret Key",
+                            inputId: secretKeyId,
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$TextInput), {
+                                id: secretKeyId,
+                                onChange: handleChangeSecretKey,
+                                type: "text",
+                                value: (_secretKey = state.secretKey) !== null && _secretKey !== void 0 ? _secretKey : "",
+                                required: !!state.token || state.enableSignedUrls
+                            })
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                            space: 4,
+                            children: [
+                                /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
+                                    align: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Checkbox), {
+                                            id: enableSignedUrlsId,
+                                            onChange: handleChangeEnableSignedUrls,
+                                            checked: state.enableSignedUrls,
+                                            style: {
+                                                display: "block"
+                                            }
+                                        }),
+                                        /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
+                                            flex: 1,
+                                            paddingLeft: 3,
+                                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                                children: /*#__PURE__*/ (0, $lAnAG$jsx)("label", {
+                                                    htmlFor: enableSignedUrlsId,
+                                                    children: "Enable Signed Urls"
+                                                })
+                                            })
+                                        })
+                                    ]
+                                }),
+                                secrets.signingKeyId && state.enableSignedUrls ? /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                                    padding: [
+                                        3,
+                                        3,
+                                        3
+                                    ],
+                                    radius: 2,
+                                    shadow: 1,
+                                    tone: "caution",
+                                    children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Stack), {
+                                        space: 3,
+                                        children: [
+                                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                                size: 1,
+                                                children: "The signing key ID that Sanity will use is:"
+                                            }),
+                                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Code), {
+                                                size: 1,
+                                                children: secrets.signingKeyId
+                                            }),
+                                            /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Text), {
+                                                size: 1,
+                                                children: [
+                                                    "This key is only used for previewing content in the Sanity UI.",
+                                                    /*#__PURE__*/ (0, $lAnAG$jsx)("br", {}),
+                                                    "You should generate a different key to use in your application server."
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }) : null
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Inline), {
+                            space: 2,
+                            children: [
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                                    text: "Save",
+                                    disabled: !dirty,
+                                    loading: state.submitting,
+                                    tone: "primary",
+                                    mode: "default",
+                                    type: "submit"
+                                }),
+                                /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                                    disabled: state.submitting,
+                                    text: "Cancel",
+                                    mode: "bleed",
+                                    onClick: handleClose
+                                })
+                            ]
+                        }),
+                        state.error && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
+                            padding: [
+                                3,
+                                3,
+                                3
+                            ],
+                            radius: 2,
+                            shadow: 1,
+                            tone: "critical",
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
+                                children: state.error
+                            })
+                        })
+                    ]
+                })
+            })
+        })
+    });
+}
+var $f56cae7201fafa6f$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $lAnAG$memo)($f56cae7201fafa6f$var$ConfigureApi);
 
-parcelRequire.register("bhKR6", function(module, exports) {
 
-$parcel$export(module.exports, "AspectRatioCard", () => $7c28b65b046419e6$export$f0c88bc5a320387d);
-$parcel$export(module.exports, "InputFallback", () => $7c28b65b046419e6$export$18fe723e8683ca03);
 
 
 
 
-const $7c28b65b046419e6$export$f0c88bc5a320387d = (0, $7XdDa$styledcomponents)((0, $7XdDa$Card))`
+let $c4f1ad5e2af7bb16$var$_ = (t1)=>t1, $c4f1ad5e2af7bb16$var$t;
+const $c4f1ad5e2af7bb16$export$f0c88bc5a320387d = (0, $lAnAG$styledcomponents)((0, $lAnAG$Card))($c4f1ad5e2af7bb16$var$t || ($c4f1ad5e2af7bb16$var$t = $c4f1ad5e2af7bb16$var$_`
   aspect-ratio: 16 / 9;
   position: relative;
   width: 100%;
-`;
-const $7c28b65b046419e6$export$18fe723e8683ca03 = ()=>{
-    return /*#__PURE__*/ (0, $7XdDa$jsx)("div", {
+`));
+const $c4f1ad5e2af7bb16$export$18fe723e8683ca03 = ()=>{
+    return /*#__PURE__*/ (0, $lAnAG$jsx)("div", {
         style: {
             padding: 1
         },
-        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Card), {
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Card), {
             shadow: 1,
             sizing: "border",
             style: {
@@ -85,18 +3742,18 @@ const $7c28b65b046419e6$export$18fe723e8683ca03 = ()=>{
                 width: "100%",
                 borderRadius: "1px"
             },
-            children: /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Flex), {
+            children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Flex), {
                 align: "center",
                 direction: "column",
                 height: "fill",
                 justify: "center",
                 children: [
-                    /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Spinner), {
+                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Spinner), {
                         muted: true
                     }),
-                    /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Box), {
+                    /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Box), {
                         marginTop: 3,
-                        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Text), {
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Text), {
                             align: "center",
                             muted: true,
                             size: 1,
@@ -109,157 +3766,156 @@ const $7c28b65b046419e6$export$18fe723e8683ca03 = ()=>{
     });
 };
 
-});
-
-parcelRequire.register("lHC3x", function(module, exports) {
-module.exports = import("./Input.8f661c56.js").then(()=>parcelRequire("5LV0W"));
-
-});
-
-parcelRequire.register("23nr7", function(module, exports) {
-module.exports = import("./Preview.0ca0dc85.js").then(()=>parcelRequire("4SN9U"));
-
-});
-
-
 
 
 
 
 
 
-
-
-
-var $jH2rf = parcelRequire("jH2rf");
-function $8154a59bf072c7a1$var$ErrorBoundaryCard(props) {
-    const { children: children , schemaType: schemaType  } = props;
-    const { push: pushToast  } = (0, $7XdDa$useToast)();
-    const errorRef = (0, $7XdDa$useRef)(null);
-    const { ErrorBoundary: ErrorBoundary , didCatch: didCatch , error: error , reset: reset  } = (0, $7XdDa$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, $7XdDa$jsx)((0, $7XdDa$Flex), {
-                    align: "center",
-                    children: /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Inline), {
-                        space: 1,
-                        children: [
-                            "An error happened while rendering",
-                            /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Button), {
-                                padding: 1,
-                                fontSize: 1,
-                                style: {
-                                    transform: "translateY(1px)"
-                                },
-                                mode: "ghost",
-                                text: schemaType.title,
-                                onClick: ()=>{
-                                    if (errorRef.current) (0, $7XdDa$scrollintoviewifneeded)(errorRef.current, {
-                                        behavior: "smooth",
-                                        scrollMode: "if-needed",
-                                        block: "center"
-                                    });
-                                }
-                            })
-                        ]
-                    })
-                })
-            });
-        }
-    });
-    const handleRetry = (0, $7XdDa$useCallback)(()=>{
-        // Purge request cache before retrying, otherwise the cached errors will rethrow
-        (0, $7XdDa$clear)([
-            (0, $jH2rf.name)
-        ]);
-        reset();
-    }, [
-        reset
+function $430a7fbe93b73361$export$2e2bcd8739ae039(props) {
+    const { setDialogState: setDialogState  } = props;
+    const handleOpen = (0, $lAnAG$useCallback)(()=>setDialogState("secrets"), [
+        setDialogState
     ]);
-    if (didCatch) return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Card), {
-        ref: errorRef,
-        paddingX: [
-            2,
-            3,
-            4,
-            4
-        ],
-        height: "fill",
-        shadow: 1,
-        overflow: "auto",
-        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Flex), {
-            justify: "flex-start",
-            align: "center",
-            height: "fill",
-            children: /*#__PURE__*/ (0, $7XdDa$jsxs)((0, $7XdDa$Grid), {
-                columns: 1,
-                gap: [
+    return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Fragment), {
+        children: /*#__PURE__*/ (0, $lAnAG$jsx)("div", {
+            style: {
+                padding: 2
+            },
+            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$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, $7XdDa$jsxs)((0, $7XdDa$Heading), {
-                        as: "h1",
+                radius: 1,
+                tone: "transparent",
+                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Flex), {
+                    justify: "flex-start",
+                    align: "center",
+                    children: /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Grid), {
+                        columns: 1,
+                        gap: [
+                            2,
+                            3,
+                            4,
+                            4
+                        ],
                         children: [
-                            "The ",
-                            /*#__PURE__*/ (0, $7XdDa$jsx)("code", {
-                                children: (0, $jH2rf.name)
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $lAnAG$jsx)("div", {
+                                    style: {
+                                        height: "32px"
+                                    },
+                                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $e5db4a7ae122bbf8$export$2e2bcd8739ae039), {})
+                                })
                             }),
-                            " plugin crashed"
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Heading), {
+                                    size: [
+                                        0,
+                                        1,
+                                        2,
+                                        2
+                                    ],
+                                    children: "Upload and preview videos directly from your studio."
+                                })
+                            }),
+                            /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Inline), {
+                                paddingY: 1,
+                                children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Button), {
+                                    mode: "ghost",
+                                    icon: (0, $lAnAG$PlugIcon),
+                                    text: "Configure API",
+                                    onClick: handleOpen
+                                })
+                            })
                         ]
-                    }),
-                    error?.message && /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Card), {
-                        padding: 3,
-                        tone: "critical",
-                        shadow: 1,
-                        radius: 2,
-                        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Text), {
-                            children: error.message
-                        })
-                    }),
-                    /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Inline), {
-                        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Button), {
-                            onClick: handleRetry,
-                            text: "Retry"
-                        })
                     })
-                ]
+                })
             })
         })
     });
-    return /*#__PURE__*/ (0, $7XdDa$jsx)(ErrorBoundary, {
-        children: children
-    });
 }
-var $8154a59bf072c7a1$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $7XdDa$memo)($8154a59bf072c7a1$var$ErrorBoundaryCard);
 
 
+const $b33ab17c95965f41$var$Input = (props)=>{
+    var ref;
+    const client = (0, $lAnAG$useClient)();
+    const secretDocumentValues = (0, $264222da7614d565$export$4c2801830a129eb)();
+    const assetDocumentValues = (0, $04b76def1942462e$export$e11a382d55e07f75)((ref = props.value) === null || ref === void 0 ? void 0 : ref.asset);
+    const poll = (0, $658b60878501f8ec$export$fd270df25d7dbb88)(props.readOnly ? undefined : (assetDocumentValues === null || assetDocumentValues === void 0 ? void 0 : assetDocumentValues.value) || undefined);
+    const [dialogState, setDialogState] = (0, $bcf12693a12c12c4$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, $lAnAG$jsx)((0, $lAnAG$Fragment), {
+        children: isLoading ? /*#__PURE__*/ (0, $lAnAG$jsx)((0, $c4f1ad5e2af7bb16$export$18fe723e8683ca03), {}) : /*#__PURE__*/ (0, $lAnAG$jsxs)((0, $lAnAG$Fragment), {
+            children: [
+                secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /*#__PURE__*/ (0, $lAnAG$jsx)((0, $430a7fbe93b73361$export$2e2bcd8739ae039), {
+                    setDialogState: setDialogState
+                }) : /*#__PURE__*/ (0, $lAnAG$jsx)((0, $1e6f849e3fcd818c$export$2e2bcd8739ae039), (0, $lAnAG$swchelperssrc_object_spread_propsmjs)((0, $lAnAG$swchelperssrc_object_spreadmjs)({}, props), {
+                    client: client,
+                    secrets: secretDocumentValues.value.secrets,
+                    asset: assetDocumentValues.value,
+                    dialogState: dialogState,
+                    setDialogState: setDialogState,
+                    needsSetup: secretDocumentValues.value.needsSetup
+                })),
+                dialogState === "secrets" && /*#__PURE__*/ (0, $lAnAG$jsx)((0, $f56cae7201fafa6f$export$2e2bcd8739ae039), {
+                    setDialogState: setDialogState,
+                    secrets: secretDocumentValues.value.secrets
+                })
+            ]
+        })
+    });
+};
+var $b33ab17c95965f41$export$2e2bcd8739ae039 = /*#__PURE__*/ (0, $lAnAG$memo)($b33ab17c95965f41$var$Input);
+
+
+
+
+
+
+
+
+const $1b4ce7c673943125$var$MuxVideoPreview = ({ value: value  })=>{
+    const assetDocumentValues = (0, $04b76def1942462e$export$e11a382d55e07f75)(value === null || value === void 0 ? void 0 : value.asset);
+    if (assetDocumentValues.value) return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $6d61ace35324696d$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, $lAnAG$jsx)((0, $lAnAG$SanityDefaultPreview), {
+        title: filename || playbackId || "",
+        subtitle: status ? `status: ${status}` : null
+    });
+};
+var $1b4ce7c673943125$export$2e2bcd8739ae039 = $1b4ce7c673943125$var$MuxVideoPreview;
+
 
-var $bhKR6 = parcelRequire("bhKR6");
 
 
-const $f681eaa25394cd39$export$a8ff84c12d48cfa6 = "mux.videoAsset";
-const $f681eaa25394cd39$var$videoAsset = (0, $7XdDa$defineField)({
-    name: $f681eaa25394cd39$export$a8ff84c12d48cfa6,
+const $9a91a87f33c5ed01$export$a8ff84c12d48cfa6 = "mux.videoAsset";
+const $9a91a87f33c5ed01$var$videoAsset = (0, $lAnAG$defineField)({
+    name: $9a91a87f33c5ed01$export$a8ff84c12d48cfa6,
     type: "object",
     title: "Video asset",
     fields: [
@@ -285,12 +3941,12 @@ const $f681eaa25394cd39$var$videoAsset = (0, $7XdDa$defineField)({
         }, 
     ]
 });
-var $f681eaa25394cd39$export$2e2bcd8739ae039 = $f681eaa25394cd39$var$videoAsset;
+var $9a91a87f33c5ed01$export$2e2bcd8739ae039 = $9a91a87f33c5ed01$var$videoAsset;
 
 
-const $f1b1fbcaa59b00cb$export$a8ff84c12d48cfa6 = "mux.video";
-const $f1b1fbcaa59b00cb$var$video = (0, $7XdDa$defineField)({
-    name: $f1b1fbcaa59b00cb$export$a8ff84c12d48cfa6,
+const $86940ae5710607ea$export$a8ff84c12d48cfa6 = "mux.video";
+const $86940ae5710607ea$var$video = (0, $lAnAG$defineField)({
+    name: $86940ae5710607ea$export$a8ff84c12d48cfa6,
     type: "object",
     title: "Video asset reference",
     fields: [
@@ -301,74 +3957,66 @@ const $f1b1fbcaa59b00cb$var$video = (0, $7XdDa$defineField)({
             weak: true,
             to: [
                 {
-                    type: (0, $f681eaa25394cd39$export$a8ff84c12d48cfa6)
+                    type: (0, $9a91a87f33c5ed01$export$a8ff84c12d48cfa6)
                 }
             ]
         }, 
     ]
 });
-var $f1b1fbcaa59b00cb$export$2e2bcd8739ae039 = $f1b1fbcaa59b00cb$var$video;
+var $86940ae5710607ea$export$2e2bcd8739ae039 = $86940ae5710607ea$var$video;
 
 
 
 
 
-function $49245e652c8ddf31$export$c8119cbbd1c84da1(props) {
-    return (0, $7XdDa$isObjectSchemaType)(props.schemaType) && props.schemaType.type?.name === (0, $f1b1fbcaa59b00cb$export$a8ff84c12d48cfa6);
+function $14740df9237d9771$export$c8119cbbd1c84da1(props) {
+    var ref;
+    return (0, $lAnAG$isObjectSchemaType)(props.schemaType) && ((ref = props.schemaType.type) === null || ref === void 0 ? void 0 : ref.name) === (0, $86940ae5710607ea$export$a8ff84c12d48cfa6);
 }
-function $49245e652c8ddf31$export$3542974c36e4d83f(props) {
-    return props.schemaType.type?.name === (0, $f1b1fbcaa59b00cb$export$a8ff84c12d48cfa6);
+function $14740df9237d9771$export$3542974c36e4d83f(props) {
+    var ref;
+    return ((ref = props.schemaType.type) === null || ref === void 0 ? void 0 : ref.name) === (0, $86940ae5710607ea$export$a8ff84c12d48cfa6);
 }
 
 
-
-const $357f50a17451fe9f$export$f5b8910cec6cf069 = /*#__PURE__*/ (0, $7XdDa$lazy)(()=>(parcelRequire("lHC3x")));
-
-const $357f50a17451fe9f$export$133773870222880f = /*#__PURE__*/ (0, $7XdDa$lazy)(()=>(parcelRequire("23nr7")));
-const $357f50a17451fe9f$export$f84bd70098573c5c = {
+const $e87f05e20e5b8474$export$f84bd70098573c5c = {
     mp4_support: "none"
 };
-const $357f50a17451fe9f$export$4d2e76c338bb9fbd = (0, $7XdDa$createPlugin)((userConfig)=>{
-    const config = {
-        ...$357f50a17451fe9f$export$f84bd70098573c5c,
-        ...userConfig
-    };
+const $e87f05e20e5b8474$export$4d2e76c338bb9fbd = (0, $lAnAG$createPlugin)((userConfig)=>{
+    const config = (0, $lAnAG$swchelperssrc_object_spreadmjs)({}, $e87f05e20e5b8474$export$f84bd70098573c5c, userConfig);
     return {
         name: "mux-input",
         form: {
             renderInput (props, next) {
-                if ((0, $49245e652c8ddf31$export$c8119cbbd1c84da1)(props)) return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $bhKR6.AspectRatioCard), {
-                    children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $8154a59bf072c7a1$export$2e2bcd8739ae039), {
+                if ((0, $14740df9237d9771$export$c8119cbbd1c84da1)(props)) return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $c4f1ad5e2af7bb16$export$f0c88bc5a320387d), {
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $3e1e9b96ff4a93b5$export$2e2bcd8739ae039), {
                         schemaType: props.schemaType,
-                        children: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $7XdDa$Suspense), {
-                            fallback: /*#__PURE__*/ (0, $7XdDa$jsx)((0, $bhKR6.InputFallback), {}),
-                            children: /*#__PURE__*/ (0, $7XdDa$jsx)($357f50a17451fe9f$export$f5b8910cec6cf069, {
-                                config: config,
-                                ...props
-                            })
+                        children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $lAnAG$Suspense), {
+                            fallback: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $c4f1ad5e2af7bb16$export$18fe723e8683ca03), {}),
+                            children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $b33ab17c95965f41$export$2e2bcd8739ae039), (0, $lAnAG$swchelperssrc_object_spreadmjs)({
+                                config: config
+                            }, props))
                         })
                     })
                 });
                 return next(props);
             },
             renderPreview (props, next) {
-                if ((0, $49245e652c8ddf31$export$3542974c36e4d83f)(props)) return /*#__PURE__*/ (0, $7XdDa$jsx)((0, $bhKR6.AspectRatioCard), {
-                    children: /*#__PURE__*/ (0, $7XdDa$jsx)($357f50a17451fe9f$export$133773870222880f, {
-                        ...props
-                    })
+                if ((0, $14740df9237d9771$export$3542974c36e4d83f)(props)) return /*#__PURE__*/ (0, $lAnAG$jsx)((0, $c4f1ad5e2af7bb16$export$f0c88bc5a320387d), {
+                    children: /*#__PURE__*/ (0, $lAnAG$jsx)((0, $1b4ce7c673943125$export$2e2bcd8739ae039), (0, $lAnAG$swchelperssrc_object_spreadmjs)({}, props))
                 });
                 return next(props);
             }
         },
         schema: {
             types: [
-                (0, $f1b1fbcaa59b00cb$export$2e2bcd8739ae039),
-                (0, $f681eaa25394cd39$export$2e2bcd8739ae039)
+                (0, $86940ae5710607ea$export$2e2bcd8739ae039),
+                (0, $9a91a87f33c5ed01$export$2e2bcd8739ae039)
             ]
         }
     };
 });
 
 
-export {$357f50a17451fe9f$export$f5b8910cec6cf069 as Input, $357f50a17451fe9f$export$133773870222880f as Preview, $357f50a17451fe9f$export$f84bd70098573c5c as defaultConfig, $357f50a17451fe9f$export$4d2e76c338bb9fbd as muxInput};
+export {$e87f05e20e5b8474$export$f84bd70098573c5c as defaultConfig, $e87f05e20e5b8474$export$4d2e76c338bb9fbd as muxInput, $b33ab17c95965f41$export$2e2bcd8739ae039 as Input, $1b4ce7c673943125$export$2e2bcd8739ae039 as Preview};
 //# sourceMappingURL=index.js.map