sanity-plugin-mux-input 2.0.6-debug.1 → 2.0.6-debug.3

package/lib/_chunks/Input-e9ed3e84.cjs

@@ -1,2679 +0,0 @@
-'use strict';
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var VideoSource_styled = require('./VideoSource.styled-58d3e8e8.cjs');
-var sanity = require('sanity');
-var useSWR = require('swr');
-var index = require('./index-1748427d.cjs');
-var rxjs = require('rxjs');
-var operators = require('rxjs/operators');
-var uuid = require('@sanity/uuid');
-var UpChunk = require('@mux/upchunk');
-var ui = require('@sanity/ui');
-var icons = require('@sanity/icons');
-var motion = require('motion');
-var styled = require('styled-components');
-var useDevicePixelRatio = require('use-device-pixel-ratio');
-var MuxVideo = require('@mux/mux-video-react');
-var react = require('media-chrome/dist/react');
-var reactIs = require('react-is');
-var suspendReact = require('suspend-react');
-function _interopDefaultCompat(e) {
-  return e && typeof e === 'object' && 'default' in e ? e : {
-    default: e
-  };
-}
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === 'object' && 'default' in e) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () {
-            return e[k];
-          }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-var React__default = /*#__PURE__*/_interopDefaultCompat(React);
-var useSWR__default = /*#__PURE__*/_interopDefaultCompat(useSWR);
-var UpChunk__namespace = /*#__PURE__*/_interopNamespaceCompat(UpChunk);
-var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
-var MuxVideo__default = /*#__PURE__*/_interopDefaultCompat(MuxVideo);
-function useDialogState() {
-  return React.useState(false);
-}
-const useMuxPolling = asset => {
-  var _a, _b;
-  const client = VideoSource_styled.useClient();
-  const projectId = sanity.useProjectId();
-  const dataset = sanity.useDataset();
-  const shouldFetch = React.useMemo(() => {
-    var _a2, _b2;
-    return !!(asset == null ? void 0 : asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
-  }, [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]);
-  return useSWR__default.default(shouldFetch ? "/".concat(projectId, "/addons/mux/assets/").concat(dataset, "/data/").concat(asset == null ? void 0 : asset.assetId) : null, async () => {
-    const {
-      data
-    } = await client.request({
-      url: "/addons/mux/assets/".concat(dataset, "/data/").concat(asset.assetId),
-      withCredentials: true,
-      method: "GET"
-    });
-    client.patch(asset._id).set({
-      status: data.status,
-      data
-    }).commit({
-      returnDocuments: false
-    });
-  }, {
-    refreshInterval: 2e3,
-    refreshWhenHidden: true,
-    dedupingInterval: 1e3
-  });
-};
-const path = ["token", "secretKey", "enableSignedUrls", "signingKeyId", "signingKeyPrivate"];
-const useSecretsDocumentValues = () => {
-  const {
-    error,
-    isLoading,
-    value
-  } = sanity.useDocumentValues(index.muxSecretsDocumentId, path);
-  const cache = React.useMemo(() => {
-    const exists = Boolean(value);
-    const secrets = {
-      token: (value == null ? void 0 : value.token) || null,
-      secretKey: (value == null ? void 0 : value.secretKey) || null,
-      enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || false,
-      signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
-      signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
-    };
-    return {
-      isInitialSetup: !exists,
-      needsSetup: !(secrets == null ? void 0 : secrets.token) || !(secrets == null ? void 0 : secrets.secretKey),
-      secrets
-    };
-  }, [value]);
-  return {
-    error,
-    isLoading,
-    value: cache
-  };
-};
-function createUpChunkObservable(uuid, uploadUrl, source) {
-  return new rxjs.Observable(subscriber => {
-    const upchunk = UpChunk__namespace.createUpload({
-      endpoint: uploadUrl,
-      file: source,
-      dynamicChunkSize: true
-      // changes the chunk size based on network speeds
-    });
-
-    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 deleteAsset(client, assetId) {
-  const {
-    dataset
-  } = client.config();
-  return client.request({
-    url: "/addons/mux/assets/".concat(dataset, "/").concat(assetId),
-    withCredentials: true,
-    method: "DELETE"
-  });
-}
-function getAsset(client, assetId) {
-  const {
-    dataset
-  } = client.config();
-  return client.request({
-    url: "/addons/mux/assets/".concat(dataset, "/data/").concat(assetId),
-    withCredentials: true,
-    method: "GET"
-  });
-}
-function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate) {
-  const doc = {
-    _id: "secrets.mux",
-    _type: "mux.apiKey",
-    token,
-    secretKey,
-    enableSignedUrls,
-    signingKeyId,
-    signingKeyPrivate
-  };
-  return client.createOrReplace(doc);
-}
-function createSigningKeys(client) {
-  const {
-    dataset
-  } = client.config();
-  return client.request({
-    url: "/addons/mux/signing-keys/".concat(dataset),
-    withCredentials: true,
-    method: "POST"
-  });
-}
-function testSecrets(client) {
-  const {
-    dataset
-  } = client.config();
-  return client.request({
-    url: "/addons/mux/secrets/".concat(dataset, "/test"),
-    withCredentials: true,
-    method: "GET"
-  });
-}
-async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
-  if (!(signingKeyId && signingKeyPrivate)) {
-    return false;
-  }
-  const {
-    dataset
-  } = client.config();
-  try {
-    const res = await client.request({
-      url: "/addons/mux/signing-keys/".concat(dataset, "/").concat(signingKeyId),
-      withCredentials: true,
-      method: "GET"
-    });
-    return !!(res.data && res.data.id);
-  } catch (e) {
-    console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid");
-    return false;
-  }
-}
-function testSecretsObservable(client) {
-  const {
-    dataset
-  } = client.config();
-  return rxjs.defer(() => client.observable.request({
-    url: "/addons/mux/secrets/".concat(dataset, "/test"),
-    withCredentials: true,
-    method: "GET"
-  }));
-}
-function cancelUpload(client, uuid) {
-  return client.observable.request({
-    url: "/addons/mux/uploads/".concat(client.clientConfig.dataset, "/").concat(uuid),
-    withCredentials: true,
-    method: "DELETE"
-  });
-}
-function uploadUrl(config, client, url) {
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  return testUrl(url).pipe(operators.switchMap(validUrl => {
-    return rxjs.concat(rxjs.of({
-      type: "url",
-      url: validUrl
-    }), testSecretsObservable(client).pipe(operators.switchMap(json => {
-      if (!json || !json.status) {
-        return rxjs.throwError(new Error("Invalid credentials"));
-      }
-      const uuid$1 = uuid.uuid();
-      const {
-        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 rxjs.defer(() => client.observable.request({
-        url: "/addons/mux/assets/".concat(dataset),
-        withCredentials: true,
-        method: "POST",
-        headers: {
-          "MUX-Proxy-UUID": uuid$1,
-          "Content-Type": "application/json"
-        },
-        query
-      })).pipe(operators.mergeMap(result => {
-        const asset = result && result.results && result.results[0] && result.results[0].document || null;
-        if (!asset) {
-          return rxjs.throwError(new Error("No asset document returned"));
-        }
-        return rxjs.of({
-          type: "success",
-          id: uuid$1,
-          asset
-        });
-      }));
-    })));
-  }));
-}
-function uploadFile(config, client, file) {
-  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
-  return testFile(file).pipe(operators.switchMap(fileOptions => {
-    return rxjs.concat(rxjs.of({
-      type: "file",
-      file: fileOptions
-    }), testSecretsObservable(client).pipe(operators.switchMap(json => {
-      if (!json || !json.status) {
-        return rxjs.throwError(new Error("Invalid credentials"));
-      }
-      const uuid$1 = uuid.uuid();
-      const {
-        enableSignedUrls
-      } = options;
-      const body = {
-        mp4_support: config.mp4_support,
-        playback_policy: [enableSignedUrls ? "signed" : "public"]
-      };
-      return rxjs.concat(rxjs.of({
-        type: "uuid",
-        uuid: uuid$1
-      }), rxjs.defer(() => client.observable.request({
-        url: "/addons/mux/uploads/".concat(client.clientConfig.dataset),
-        withCredentials: true,
-        method: "POST",
-        headers: {
-          "MUX-Proxy-UUID": uuid$1,
-          "Content-Type": "application/json"
-        },
-        body
-      })).pipe(operators.mergeMap(result => {
-        return createUpChunkObservable(uuid$1, result.upload.url, file).pipe(
-        // eslint-disable-next-line no-warning-comments
-        // @TODO type the observable events
-        // eslint-disable-next-line max-nested-callbacks
-        operators.mergeMap(event => {
-          if (event.type !== "success") {
-            return rxjs.of(event);
-          }
-          return rxjs.from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
-          // eslint-disable-next-line max-nested-callbacks
-          operators.mergeMap(doc => rxjs.of({
-            ...event,
-            asset: doc
-          })));
-        }),
-        // eslint-disable-next-line max-nested-callbacks
-        operators.catchError(err => {
-          return cancelUpload(client, uuid$1).pipe(operators.mergeMapTo(rxjs.throwError(err)));
-        }));
-      })));
-    })));
-  }));
-}
-function getUpload(client, assetId) {
-  const {
-    dataset
-  } = client.config();
-  return client.request({
-    url: "/addons/mux/uploads/".concat(dataset, "/").concat(assetId),
-    withCredentials: true,
-    method: "GET"
-  });
-}
-function 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 getUpload(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++;
-    }, 2e3);
-  });
-}
-async function updateAssetDocumentFromUpload(client, uuid) {
-  let upload;
-  let asset;
-  try {
-    upload = await pollUpload(client, uuid);
-  } catch (err) {
-    return Promise.reject(err);
-  }
-  try {
-    asset = await getAsset(client, upload.data.asset_id);
-  } catch (err) {
-    return Promise.reject(err);
-  }
-  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 testFile(file) {
-  if (typeof window !== "undefined" && file instanceof window.File) {
-    const fileOptions = optionsFromFile({}, file);
-    return rxjs.of(fileOptions);
-  }
-  return rxjs.throwError(new Error("Invalid file"));
-}
-function testUrl(url) {
-  const error = new Error("Invalid URL");
-  if (typeof url !== "string") {
-    return rxjs.throwError(error);
-  }
-  let parsed;
-  try {
-    parsed = new URL(url);
-  } catch (err) {
-    return rxjs.throwError(error);
-  }
-  if (parsed && !parsed.protocol.match(/http:|https:/)) {
-    return rxjs.throwError(error);
-  }
-  return rxjs.of(url);
-}
-function optionsFromFile(opts, file) {
-  if (typeof window === "undefined" || !(file instanceof window.File)) {
-    return opts;
-  }
-  return {
-    name: opts.preserveFilename === false ? void 0 : file.name,
-    type: file.type
-  };
-}
-function extractDroppedFiles(dataTransfer) {
-  const files = Array.from(dataTransfer.files || []);
-  const items = Array.from(dataTransfer.items || []);
-  if (files && files.length > 0) {
-    return Promise.resolve(files);
-  }
-  return normalizeItems(items).then(arr => arr.flat());
-}
-function normalizeItems(items) {
-  return Promise.all(items.map(item => {
-    if (item.kind === "file" && item.webkitGetAsEntry) {
-      let entry;
-      try {
-        entry = item.webkitGetAsEntry();
-      } catch (err) {
-        return [item.getAsFile()];
-      }
-      if (!entry) {
-        return [];
-      }
-      return entry.isDirectory ? walk(entry) : [item.getAsFile()];
-    }
-    if (item.kind === "file") {
-      const file = item.getAsFile();
-      return Promise.resolve(file ? [file] : []);
-    }
-    return new Promise(resolve => item.getAsString(resolve)).then(str => str ? [new File([str], "unknown.txt", {
-      type: item.type
-    })] : []);
-  }));
-}
-function isFile(entry) {
-  return entry.isFile;
-}
-function isDirectory(entry) {
-  return entry.isDirectory;
-}
-function walk(entry) {
-  if (isFile(entry)) {
-    return new Promise(resolve => entry.file(resolve)).then(file => [file]);
-  }
-  if (isDirectory(entry)) {
-    const dir = entry.createReader();
-    return new Promise(resolve => dir.readEntries(resolve)).then(entries => entries.filter(entr => !entr.name.startsWith("."))).then(entries => Promise.all(entries.map(walk)).then(arr => arr.flat()));
-  }
-  return Promise.resolve([]);
-}
-function AssetActionsMenu(props) {
-  const {
-    asset
-  } = props;
-  const id = React.useId();
-  const [dialogState, setDialogState] = React.useState();
-  const [open, setOpen] = React.useState(false);
-  const [menuElement, setMenuRef] = React.useState(null);
-  const handleDelete = React.useCallback(() => setDialogState("confirm-delete"), []);
-  const handleClick = React.useCallback(() => {
-    setDialogState(false);
-    setOpen(true);
-  }, [setDialogState]);
-  const handleClose = React.useCallback(() => {
-    setDialogState(false);
-    setOpen(false);
-  }, [setDialogState]);
-  React.useEffect(() => {
-    if (open && dialogState) {
-      setOpen(false);
-    }
-  }, [dialogState, open]);
-  ui.useClickOutside(React.useCallback(() => setOpen(false), []), [menuElement]);
-  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.MenuButton, {
-      id: "".concat(id, "-asset-menu"),
-      button: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-        icon: icons.EllipsisVerticalIcon,
-        mode: "ghost",
-        onClick: handleClick,
-        padding: 2
-      }),
-      menu: /* @__PURE__ */jsxRuntime.jsx(ui.Menu, {
-        ref: setMenuRef,
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
-          tone: "critical",
-          icon: icons.TrashIcon,
-          text: "Delete",
-          onClick: handleDelete
-        })
-      }),
-      portal: true,
-      placement: "right"
-    }), dialogState === "confirm-delete" && /* @__PURE__ */jsxRuntime.jsx(DeleteDialog, {
-      asset,
-      onClose: handleClose
-    })]
-  });
-}
-function DeleteDialog(props) {
-  const {
-    asset,
-    onClose
-  } = props;
-  const client = VideoSource_styled.useClient();
-  const {
-    push: pushToast
-  } = ui.useToast();
-  const [deleting, setDeleting] = React.useState(false);
-  const [deleteOnMux, setDeleteOnMux] = React.useState(false);
-  const id = React.useId();
-  const width = 200 * useDevicePixelRatio.getDevicePixelRatio({
-    maxDpr: 2
-  });
-  const handleDelete = React.useCallback(async () => {
-    var _a, _b, _c;
-    setDeleting(true);
-    try {
-      if (asset == null ? void 0 : asset._id) {
-        await client.delete(asset._id);
-      }
-      if (deleteOnMux && (asset == null ? void 0 : asset.assetId)) {
-        await deleteAsset(client, asset.assetId);
-      }
-      (_c = (_b = (_a = document.querySelector("[data-id=\"".concat(asset._id, "\"]"))) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.setAttribute) == null ? void 0 : _c.call(_b, "hidden", "true");
-    } catch (err) {
-      console.error("Failed during delete", err);
-      pushToast({
-        closable: true,
-        description: err == null ? void 0 : err.message,
-        duration: 5e3,
-        title: "Uncaught error",
-        status: "error"
-      });
-    } finally {
-      setDeleting(false);
-      onClose();
-    }
-  }, [asset._id, asset.assetId, client, deleteOnMux, onClose, pushToast]);
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
-    onClose,
-    id: "".concat(id, "-confirm-delete"),
-    header: "Delete video",
-    footer: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
-      padding: 2,
-      gap: 2,
-      columns: 2,
-      children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-        mode: "bleed",
-        text: "Cancel",
-        onClick: onClose
-      }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-        text: "Delete",
-        tone: "critical",
-        icon: icons.TrashIcon,
-        onClick: handleDelete,
-        loading: deleting
-      })]
-    }),
-    width: 1,
-    children: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
-      paddingX: 0,
-      paddingY: 0,
-      space: 1,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-        paddingX: [2, 3, 4],
-        paddingY: [3, 3, 3, 4],
-        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
-          columns: 3,
-          gap: 3,
-          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-            style: {
-              gridColumn: "span 2"
-            },
-            align: "center",
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-              padding: 4,
-              children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-                space: 4,
-                children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-                  align: "center",
-                  as: "label",
-                  children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
-                    checked: deleteOnMux,
-                    onChange: () => setDeleteOnMux(prev => !prev)
-                  }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-                    style: {
-                      margin: "0 10px"
-                    },
-                    children: "Delete asset on Mux"
-                  })]
-                }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-                  align: "center",
-                  as: "label",
-                  children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
-                    disabled: true,
-                    checked: true
-                  }), /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-                    style: {
-                      margin: "0 10px"
-                    },
-                    children: "Delete video from dataset"
-                  })]
-                })]
-              })
-            })
-          }), /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
-            asset,
-            width,
-            showTip: true
-          })]
-        })
-      })
-    })
-  });
-}
-function VideoSource(_ref) {
-  let {
-    assets,
-    isLoading,
-    isLastPage,
-    onSelect,
-    onLoadMore
-  } = _ref;
-  const handleClick = React.useCallback(event => onSelect(event.currentTarget.dataset.id), [onSelect]);
-  const handleKeyPress = React.useCallback(event => {
-    if (event.key === "Enter") {
-      onSelect(event.currentTarget.dataset.id);
-    }
-  }, [onSelect]);
-  const width = 200 * useDevicePixelRatio.getDevicePixelRatio({
-    maxDpr: 2
-  });
-  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
-      padding: 4,
-      children: [/* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.ThumbGrid, {
-        gap: 2,
-        children: assets.map(asset => /* @__PURE__ */jsxRuntime.jsx(VideoSourceItem, {
-          asset,
-          onClick: handleClick,
-          onKeyPress: handleKeyPress,
-          width
-        }, asset._id))
-      }), isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-        justify: "center",
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {
-          muted: true
-        })
-      }), !isLoading && assets.length === 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-        align: "center",
-        muted: true,
-        children: "No videos"
-      })]
-    }), assets.length > 0 && !isLastPage && /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.CardLoadMore, {
-      tone: "default",
-      padding: 4,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-        direction: "column",
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-          type: "button",
-          icon: icons.DownloadIcon,
-          loading: isLoading,
-          onClick: onLoadMore,
-          text: "Load more",
-          tone: "primary"
-        })
-      })
-    })]
-  });
-}
-const _VideoSourceItem = _ref2 => {
-  let {
-    asset,
-    onClick,
-    onKeyPress,
-    width
-  } = _ref2;
-  const [hover, setHover] = React.useState(null);
-  const ref = React.useRef(null);
-  React.useLayoutEffect(() => {
-    if (!ref.current || hover === null) {
-      return;
-    }
-    if (hover) {
-      motion.animate(ref.current, {
-        opacity: 1
-      });
-    } else {
-      motion.animate(ref.current, {
-        opacity: 0
-      });
-    }
-  }, [hover]);
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
-    height: "fill",
-    style: {
-      position: "relative"
-    },
-    children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Card, {
-      as: "button",
-      "data-id": asset._id,
-      onClick,
-      onKeyPress,
-      tabIndex: 0,
-      radius: 2,
-      padding: 1,
-      style: {
-        lineHeight: 0,
-        position: "relative"
-      },
-      __unstable_focusRing: true,
-      onMouseEnter: () => setHover(true),
-      onMouseLeave: () => setHover(false),
-      children: [/* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
-        asset,
-        width,
-        showTip: true
-      }), (asset == null ? void 0 : asset.playbackId) && /* @__PURE__ */jsxRuntime.jsx(AnimateWrapper, {
-        tone: "transparent",
-        ref,
-        margin: 1,
-        radius: 1,
-        children: hover !== null && /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.AnimatedVideoThumbnail, {
-          asset,
-          width
-        })
-      })]
-    }), /* @__PURE__ */jsxRuntime.jsx(ActionsAssetsContainer, {
-      children: /* @__PURE__ */jsxRuntime.jsx(AssetActionsMenu, {
-        asset
-      })
-    })]
-  });
-};
-const VideoSourceItem = React.memo(_VideoSourceItem);
-const AnimateWrapper = styled__default.default(ui.Card)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  will-change: opacity;\n  background: transparent;\n  background-color: hsl(0deg 0% 0% / 33%);\n  opacity: 0;\n  pointer-events: none;\n"])));
-const ActionsAssetsContainer = styled__default.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  position: absolute;\n  z-index: 300;\n  opacity: 0;\n  top: 7px;\n  right: 7px;\n\n  button:hover + &,\n  button:focus-visible + &,\n  &:hover,\n  &:focus-visible {\n    opacity: 1;\n  }\n"])));
-const PER_PAGE = 200;
-function createQuery() {
-  let start = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-  let end = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : PER_PAGE;
-  return (/* groq */"*[_type == \"mux.videoAsset\"] | order(_updatedAt desc) [".concat(start, "...").concat(end, "]")
-  );
-}
-function SelectAssets(_ref3) {
-  let {
-    asset,
-    onChange,
-    setDialogState
-  } = _ref3;
-  const client = VideoSource_styled.useClient();
-  const pageNoRef = React.useRef(0);
-  const [isLastPage, setLastPage] = React.useState(false);
-  const [isLoading, setLoading] = React.useState(false);
-  const [assets, setAssets] = React.useState([]);
-  const fetchPage = React.useCallback(pageNo => {
-    const start = pageNo * PER_PAGE;
-    const end = start + PER_PAGE;
-    setLoading(true);
-    return client.fetch(createQuery(start, end)).then(result => {
-      setLastPage(result.length < PER_PAGE);
-      setAssets(prev => prev.concat(result));
-    }).finally(() => setLoading(false));
-  }, [client]);
-  const handleSelect = React.useCallback(id => {
-    const selected = assets.find(doc => doc._id === id);
-    if (!selected) {
-      throw new TypeError("Failed to find video asset with id: ".concat(id));
-    }
-    onChange(sanity.PatchEvent.from([sanity.setIfMissing({
-      asset: {}
-    }), sanity.set({
-      _type: "reference",
-      _weak: true,
-      _ref: selected._id
-    }, ["asset"])]));
-    setDialogState(false);
-  }, [assets, onChange, setDialogState]);
-  const handleLoadMore = React.useCallback(() => {
-    fetchPage(++pageNoRef.current);
-  }, [fetchPage]);
-  React.useEffect(() => void fetchPage(pageNoRef.current), [fetchPage]);
-  return /* @__PURE__ */jsxRuntime.jsx(VideoSource, {
-    onSelect: handleSelect,
-    assets,
-    isLastPage,
-    isLoading,
-    onLoadMore: handleLoadMore
-  });
-}
-function InputBrowser(_ref4) {
-  let {
-    setDialogState,
-    asset,
-    onChange
-  } = _ref4;
-  const id = "InputBrowser".concat(React.useId());
-  const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
-    scheme: "dark",
-    __unstable_autoFocus: true,
-    header: "Select video",
-    id,
-    onClose: handleClose,
-    width: 2,
-    children: /* @__PURE__ */jsxRuntime.jsx(SelectAssets, {
-      asset,
-      onChange,
-      setDialogState
-    })
-  });
-}
-const useCancelUpload = (asset, onChange) => {
-  const client = VideoSource_styled.useClient();
-  return React.useCallback(() => {
-    if (!asset) {
-      return;
-    }
-    onChange(sanity.PatchEvent.from(sanity.unset()));
-    if (asset.assetId) {
-      deleteAsset(client, asset.assetId);
-    }
-    if (asset._id) {
-      client.delete(asset._id);
-    }
-  }, [asset, client, onChange]);
-};
-function getVideoSrc(_ref5) {
-  let {
-    asset,
-    client
-  } = _ref5;
-  const playbackId = VideoSource_styled.getPlaybackId(asset);
-  const searchParams = new URLSearchParams();
-  if (VideoSource_styled.getPlaybackPolicy(asset) === "signed") {
-    const token = VideoSource_styled.generateJwt(client, playbackId, "v");
-    searchParams.set("token", token);
-  }
-  return "https://stream.mux.com/".concat(playbackId, ".m3u8?").concat(searchParams);
-}
-function EditThumbnailDialog(_ref6) {
-  let {
-    asset,
-    getCurrentTime,
-    setDialogState
-  } = _ref6;
-  const client = VideoSource_styled.useClient();
-  const dialogId = "EditThumbnailDialog".concat(React.useId());
-  const nextTime = React.useMemo(() => getCurrentTime(), [getCurrentTime]);
-  const assetWithNewThumbnail = React.useMemo(() => ({
-    ...asset,
-    thumbTime: nextTime
-  }), [asset, nextTime]);
-  const [saving, setSaving] = React.useState(false);
-  const [error, setError] = React.useState(null);
-  const handleSave = React.useCallback(() => {
-    setSaving(true);
-    client.patch(asset._id).set({
-      thumbTime: nextTime
-    }).commit({
-      returnDocuments: false
-    }).then(() => void setDialogState(false)).catch(setError).finally(() => void setSaving(false));
-  }, [client, asset._id, nextTime, setDialogState]);
-  const width = 300 * useDevicePixelRatio.getDevicePixelRatio({
-    maxDpr: 2
-  });
-  if (error) {
-    throw error;
-  }
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
-    id: dialogId,
-    header: "Edit thumbnail",
-    onClose: () => setDialogState(false),
-    footer: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
-      padding: 3,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-        mode: "ghost",
-        tone: "primary",
-        loading: saving,
-        onClick: handleSave,
-        text: "Set new thumbnail"
-      }, "thumbnail")
-    }),
-    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-      space: 3,
-      padding: 3,
-      children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-        space: 2,
-        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-          size: 1,
-          weight: "semibold",
-          children: "Current:"
-        }), /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
-          asset,
-          width
-        })]
-      }), /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-        space: 2,
-        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-          size: 1,
-          weight: "semibold",
-          children: "New:"
-        }), /* @__PURE__ */jsxRuntime.jsx(VideoSource_styled.VideoThumbnail, {
-          asset: assetWithNewThumbnail,
-          width
-        })]
-      })]
-    })
-  });
-}
-function getStoryboardSrc(_ref7) {
-  let {
-    asset,
-    client
-  } = _ref7;
-  const playbackId = VideoSource_styled.getPlaybackId(asset);
-  const searchParams = new URLSearchParams();
-  if (VideoSource_styled.getPlaybackPolicy(asset) === "signed") {
-    const token = VideoSource_styled.generateJwt(client, playbackId, "s");
-    searchParams.set("token", token);
-  }
-  return "https://image.mux.com/".concat(playbackId, "/storyboard.vtt?").concat(searchParams);
-}
-const VideoContainer = styled__default.default(ui.Card)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: relative;\n  min-height: 150px;\n  aspect-ratio: 16 / 9;\n  overflow: hidden;\n  border-radius: 1px;\n  media-airplay-button[media-airplay-unavailable] {\n    display: none;\n  }\n  media-volume-range[media-volume-unavailable] {\n    display: none;\n  }\n  media-pip-button[media-pip-unavailable] {\n    display: none;\n  }\n  media-controller {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    --media-range-track-background-color: rgba(255, 255, 255, 0.5);\n    --media-range-track-border-radius: 3px;\n    width: 100%;\n    height: 100%;\n    background-color: transparent;\n  }\n  media-control-bar {\n    --media-button-icon-width: 18px;\n    --media-preview-time-margin: 0px;\n  }\n  media-control-bar:not([slot]) :is([role='button'], [role='switch'], button) {\n    height: 44px;\n  }\n  .size-extra-small media-control-bar [role='button'],\n  .size-extra-small media-control-bar [role='switch'] {\n    height: auto;\n    padding: 4.4% 3.2%;\n  }\n  .mxp-spacer {\n    flex-grow: 1;\n    height: 100%;\n    background-color: var(--media-control-background, rgba(20, 20, 30, 0.7));\n  }\n  media-controller::part(vertical-layer) {\n    transition: background-color 1s;\n  }\n  media-controller:is([media-paused], :not([user-inactive]))::part(vertical-layer) {\n    background-color: rgba(0, 0, 0, 0.6);\n    transition: background-color 0.25s;\n  }\n  .mxp-center-controls {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  .mxp-center-controls media-play-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    width: max(27px, min(9%, 90px));\n  }\n  .mxp-center-controls media-seek-backward-button,\n  .mxp-center-controls media-seek-forward-button {\n    --media-control-background: transparent;\n    --media-control-hover-background: transparent;\n    padding: 0;\n    margin: 0 10%;\n    width: min(7%, 70px);\n  }\n  media-loading-indicator {\n    --media-loading-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    position: absolute;\n    width: min(15%, 150px);\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n  }\n  /* Intentionally don't target the div for transition but the children\n of the div. Prevents messing with media-chrome's autohide feature. */\n  media-loading-indicator + div * {\n    transition: opacity 0.15s;\n    opacity: 1;\n  }\n  media-loading-indicator[media-loading]:not([media-paused]) ~ div > * {\n    opacity: 0;\n    transition-delay: 400ms;\n  }\n  media-volume-range {\n    width: min(100%, 100px);\n  }\n  media-time-display {\n    white-space: nowrap;\n  }\n  :is(media-time-display, media-text-display, media-playback-rate-button) {\n    color: inherit;\n  }\n  media-controller:fullscreen media-control-bar[slot='top-chrome'] {\n    /* Hide menus and buttons that trigger modals when in full-screen */\n    display: none;\n  }\n  video {\n    background: transparent;\n  }\n  media-controller:not(:fullscreen) video {\n    aspect-ratio: 16 / 9;\n  }\n  media-controller:not(:-webkit-full-screen) video {\n    aspect-ratio: 16 / 9;\n  }\n"])));
-const StyledCenterControls = styled__default.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  && {\n    --media-background-color: transparent;\n    --media-button-icon-width: 100%;\n    --media-button-icon-height: auto;\n    pointer-events: none;\n    width: 100%;\n    display: flex;\n    flex-flow: row;\n    align-items: center;\n    justify-content: center;\n    media-play-button {\n      --media-control-background: transparent;\n      --media-control-hover-background: transparent;\n      padding: 0;\n      width: max(27px, min(9%, 90px));\n    }\n  }\n"])));
-const TopControls = styled__default.default(react.MediaControlBar)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  justify-content: flex-end;\n  button {\n    height: auto;\n  }\n"])));
-function PosterImage(_ref8) {
-  let {
-    asset
-  } = _ref8;
-  const client = VideoSource_styled.useClient();
-  const ref = React.useRef(null);
-  const src = React.useMemo(() => VideoSource_styled.getPosterSrc({
-    client,
-    asset,
-    width: 1920,
-    height: 1080
-  }), [client, asset]);
-  React.useEffect(() => {
-    var _a;
-    if (ref.current) {
-      const style = document.createElement("style");
-      style.innerHTML = "img { object-fit: contain; }";
-      if ((_a = ref.current) == null ? void 0 : _a.shadowRoot) {
-        ref.current.shadowRoot.appendChild(style);
-      }
-    }
-  }, []);
-  return /* @__PURE__ */jsxRuntime.jsx(react.MediaPosterImage, {
-    ref,
-    slot: "poster",
-    src
-  });
-}
-function ThumbnailsMetadataTrack(_ref9) {
-  let {
-    asset
-  } = _ref9;
-  const client = VideoSource_styled.useClient();
-  const [src] = React.useState(() => getStoryboardSrc({
-    asset,
-    client
-  }));
-  return /* @__PURE__ */jsxRuntime.jsx("track", {
-    label: "thumbnails",
-    default: true,
-    kind: "metadata",
-    src
-  });
-}
-const CardWrapper = styled__default.default(ui.Card)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  min-height: 82px;\n  box-sizing: border-box;\n"])));
-const FlexWrapper = styled__default.default(ui.Flex)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
-const LeftSection = styled__default.default(ui.Stack)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 60%;\n"])));
-const CodeWrapper = styled__default.default(ui.Code)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  position: relative;\n  width: 100%;\n\n  code {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    position: relative;\n    max-width: 200px;\n  }\n"])));
-const UploadProgress = _ref10 => {
-  let {
-    progress = 100,
-    onCancel,
-    filename,
-    text = "Uploading"
-  } = _ref10;
-  return /* @__PURE__ */jsxRuntime.jsx(CardWrapper, {
-    tone: "primary",
-    padding: 4,
-    border: true,
-    height: "fill",
-    children: /* @__PURE__ */jsxRuntime.jsxs(FlexWrapper, {
-      align: "center",
-      justify: "space-between",
-      height: "fill",
-      direction: "row",
-      gap: 2,
-      children: [/* @__PURE__ */jsxRuntime.jsxs(LeftSection, {
-        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-          justify: "center",
-          gap: [3, 3, 2, 2],
-          direction: ["column", "column", "row"],
-          children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-            size: 1,
-            children: /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
-              space: 2,
-              children: [text, /* @__PURE__ */jsxRuntime.jsx(CodeWrapper, {
-                size: 1,
-                children: filename ? filename : "..."
-              })]
-            })
-          })
-        }), /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-          marginTop: 3,
-          radius: 5,
-          shadow: 1,
-          children: /* @__PURE__ */jsxRuntime.jsx(sanity.LinearProgress, {
-            value: progress
-          })
-        })]
-      }), onCancel ? /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-        fontSize: 2,
-        text: "Cancel upload",
-        mode: "ghost",
-        tone: "critical",
-        onClick: onCancel
-      }) : null]
-    })
-  });
-};
-const MuxVideoOld = _ref11 => {
-  let {
-    asset,
-    buttons,
-    readOnly,
-    onChange,
-    dialogState,
-    setDialogState
-  } = _ref11;
-  var _a, _b, _c, _d;
-  const client = VideoSource_styled.useClient();
-  const isLoading = React.useMemo(() => {
-    if ((asset == null ? void 0 : asset.status) === "preparing") {
-      return "Preparing the video";
-    }
-    if ((asset == null ? void 0 : asset.status) === "waiting_for_upload") {
-      return "Waiting for upload to start";
-    }
-    if ((asset == null ? void 0 : asset.status) === "waiting") {
-      return "Processing upload";
-    }
-    if ((asset == null ? void 0 : asset.status) === "ready") {
-      return false;
-    }
-    if (typeof (asset == null ? void 0 : asset.status) === "undefined") {
-      return false;
-    }
-    return true;
-  }, [asset]);
-  const isPreparingStaticRenditions = React.useMemo(() => {
-    var _a2, _b2, _c2, _d2;
-    if (((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing") {
-      return true;
-    }
-    if (((_d2 = (_c2 = asset == null ? void 0 : asset.data) == null ? void 0 : _c2.static_renditions) == null ? void 0 : _d2.status) === "ready") {
-      return false;
-    }
-    return false;
-  }, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]);
-  const videoSrc = React.useMemo(() => asset.playbackId && getVideoSrc({
-    client,
-    asset
-  }), [asset, client]);
-  const [error, setError] = React.useState(null);
-  const handleError = React.useCallback(event => setError(event.currentTarget.error), []);
-  const playRef = React.useRef(null);
-  const muteRef = React.useRef(null);
-  const video = React.useRef(null);
-  const getCurrentTime = React.useCallback(() => {
-    var _a2, _b2;
-    return (_b2 = (_a2 = video.current) == null ? void 0 : _a2.currentTime) != null ? _b2 : 0;
-  }, [video]);
-  const handleCancelUpload = useCancelUpload(asset, onChange);
-  React.useEffect(() => {
-    var _a2, _b2;
-    const style = document.createElement("style");
-    style.innerHTML = "button svg { vertical-align: middle; }";
-    if ((_a2 = playRef.current) == null ? void 0 : _a2.shadowRoot) {
-      playRef.current.shadowRoot.appendChild(style);
-    }
-    if ((_b2 = muteRef == null ? void 0 : muteRef.current) == null ? void 0 : _b2.shadowRoot) {
-      muteRef.current.shadowRoot.appendChild(style.cloneNode(true));
-    }
-  }, []);
-  React.useEffect(() => {
-    var _a2, _b2, _c2;
-    if ((asset == null ? void 0 : asset.status) === "errored") {
-      handleCancelUpload();
-      throw new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
-    }
-  }, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]);
-  const signedToken = React.useMemo(() => {
-    try {
-      const url = new URL(videoSrc);
-      return url.searchParams.get("token");
-    } catch {
-      return false;
-    }
-  }, [videoSrc]);
-  if (error) {
-    throw error;
-  }
-  if (!asset || !asset.status) {
-    return null;
-  }
-  if (isLoading) {
-    return /* @__PURE__ */jsxRuntime.jsx(UploadProgress, {
-      progress: 100,
-      filename: asset == null ? void 0 : asset.filename,
-      text: isLoading !== true && isLoading || "Waiting for Mux to complete the file",
-      onCancel: readOnly ? void 0 : () => handleCancelUpload()
-    });
-  }
-  return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [/* @__PURE__ */jsxRuntime.jsxs(VideoContainer, {
-      shadow: 1,
-      tone: "transparent",
-      scheme: "dark",
-      children: [/* @__PURE__ */jsxRuntime.jsxs(react.MediaController, {
-        children: [/* @__PURE__ */jsxRuntime.jsx(MuxVideo__default.default, {
-          playsInline: true,
-          ref: video,
-          playbackId: "".concat(asset.playbackId).concat(signedToken ? "?token=".concat(signedToken) : ""),
-          onError: handleError,
-          slot: "media",
-          preload: "metadata",
-          crossOrigin: "anonomous",
-          debug: true,
-          children: /* @__PURE__ */jsxRuntime.jsx(ThumbnailsMetadataTrack, {
-            asset
-          })
-        }), /* @__PURE__ */jsxRuntime.jsx(PosterImage, {
-          asset
-        }), /* @__PURE__ */jsxRuntime.jsx(react.MediaLoadingIndicator, {
-          slot: "centered-chrome",
-          noAutoHide: true
-        }), /* @__PURE__ */jsxRuntime.jsx(StyledCenterControls, {
-          slot: "centered-chrome",
-          children: /* @__PURE__ */jsxRuntime.jsx(react.MediaPlayButton, {})
-        }), buttons && /* @__PURE__ */jsxRuntime.jsx(TopControls, {
-          slot: "top-chrome",
-          children: buttons
-        }), /* @__PURE__ */jsxRuntime.jsxs(react.MediaControlBar, {
-          children: [/* @__PURE__ */jsxRuntime.jsx(react.MediaMuteButton, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaTimeDisplay, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaTimeRange, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaDurationDisplay, {}), /* @__PURE__ */jsxRuntime.jsx(react.MediaFullscreenButton, {})]
-        })]
-      }), isPreparingStaticRenditions && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-        padding: 2,
-        radius: 1,
-        style: {
-          background: "var(--card-fg-color)",
-          position: "absolute",
-          top: "0.5em",
-          left: "0.5em"
-        },
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-          size: 1,
-          style: {
-            color: "var(--card-bg-color)"
-          },
-          children: "MUX is preparing static renditions, please stand by"
-        })
-      })]
-    }), dialogState === "edit-thumbnail" && /* @__PURE__ */jsxRuntime.jsx(EditThumbnailDialog, {
-      asset,
-      getCurrentTime,
-      setDialogState
-    })]
-  });
-};
-function focusRingBorderStyle(border) {
-  return "inset 0 0 0 ".concat(border.width, "px ").concat(border.color);
-}
-function focusRingStyle(opts) {
-  const {
-    base,
-    border,
-    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 ".concat(focusRingInsetWidth, "px var(--card-focus-ring-color)"), border && focusRingBorderStyle(border), focusRingInsetWidth < 0 && "0 0 0 ".concat(0 - focusRingInsetWidth, "px ").concat(bgColor), focusRingOutsetWidth > 0 && "0 0 0 ".concat(focusRingOutsetWidth, "px var(--card-focus-ring-color)")].filter(Boolean).join(",");
-}
-const FileButton = styled__default.default(ui.MenuItem)(_ref12 => {
-  let {
-    theme
-  } = _ref12;
-  const {
-    focusRing
-  } = theme.sanity;
-  const base = theme.sanity.color.base;
-  const border = {
-    width: 1,
-    color: "var(--card-border-color)"
-  };
-  return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    position: relative;\n\n    &:not([data-disabled='true']) {\n      &:focus-within {\n        box-shadow: ", ";\n      }\n    }\n\n    & input {\n      overflow: hidden;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      position: absolute;\n      min-width: 0;\n      display: block;\n      appearance: none;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      opacity: 0;\n    }\n  "])), focusRingStyle({
-    base,
-    border,
-    focusRing
-  }));
-});
-const FileInputMenuItem = React__default.default.forwardRef(function FileInputMenuItem2(props, forwardedRef) {
-  const {
-    icon,
-    id: idProp,
-    accept,
-    capture,
-    fontSize,
-    multiple,
-    onSelect,
-    padding = 3,
-    space = 3,
-    textAlign,
-    text,
-    disabled,
-    ...rest
-  } = props;
-  const idHook = React.useId();
-  const id = idProp || idHook;
-  const handleChange = React__default.default.useCallback(event => {
-    if (onSelect && event.target.files) {
-      onSelect(Array.from(event.target.files));
-    }
-  }, [onSelect]);
-  const content = /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-    align: "center",
-    justify: "flex-start",
-    padding,
-    children: [icon && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      marginRight: text ? space : void 0,
-      children: /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-        size: fontSize,
-        children: [React.isValidElement(icon) && icon, reactIs.isValidElementType(icon) && React.createElement(icon)]
-      })
-    }), text && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-      align: textAlign,
-      size: fontSize,
-      textOverflow: "ellipsis",
-      children: text
-    })]
-  });
-  return /* @__PURE__ */jsxRuntime.jsxs(FileButton, {
-    ...rest,
-    htmlFor: id,
-    padding: 0,
-    fontSize: 2,
-    disabled,
-    ref: forwardedRef,
-    children: [content, /* @__PURE__ */jsxRuntime.jsx("input", {
-      "data-testid": "file-button-input",
-      accept,
-      capture,
-      id,
-      multiple,
-      onChange: handleChange,
-      type: "file",
-      value: "",
-      disabled
-    })]
-  });
-});
-const LockCard = styled__default.default(ui.Card)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  opacity: 0.6;\n  mix-blend-mode: screen;\n  background: transparent;\n"])));
-const LockButton = styled__default.default(ui.Button)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n  background: transparent;\n  color: white;\n"])));
-function PlayerActionsMenu(props) {
-  const {
-    asset,
-    readOnly,
-    dialogState,
-    setDialogState,
-    onChange,
-    onUpload
-  } = props;
-  const [open, setOpen] = React.useState(false);
-  const [menuElement, setMenuRef] = React.useState(null);
-  const isSigned = React.useMemo(() => VideoSource_styled.getPlaybackPolicy(asset) === "signed", [asset]);
-  const onReset = React.useCallback(() => onChange(sanity.PatchEvent.from(sanity.unset([]))), [onChange]);
-  React.useEffect(() => {
-    if (open && dialogState) {
-      setOpen(false);
-    }
-  }, [dialogState, open]);
-  ui.useClickOutside(React.useCallback(() => setOpen(false), []), [menuElement]);
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
-    space: 1,
-    padding: 2,
-    children: [isSigned && /* @__PURE__ */jsxRuntime.jsx(ui.Tooltip, {
-      content: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-        padding: 2,
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-          muted: true,
-          size: 1,
-          children: "Signed playback policy"
-        })
-      }),
-      placement: "right",
-      portal: true,
-      children: /* @__PURE__ */jsxRuntime.jsx(LockCard, {
-        radius: 2,
-        margin: 2,
-        scheme: "dark",
-        tone: "positive",
-        children: /* @__PURE__ */jsxRuntime.jsx(LockButton, {
-          icon: icons.LockIcon,
-          mode: "bleed",
-          tone: "positive"
-        })
-      })
-    }), !readOnly && /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-      icon: icons.EditIcon,
-      mode: "ghost",
-      onClick: () => setDialogState("edit-thumbnail")
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Popover, {
-      content: /* @__PURE__ */jsxRuntime.jsxs(ui.Menu, {
-        ref: setMenuRef,
-        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-          padding: 2,
-          children: /* @__PURE__ */jsxRuntime.jsx(ui.Label, {
-            muted: true,
-            size: 1,
-            children: "Replace"
-          })
-        }), /* @__PURE__ */jsxRuntime.jsx(FileInputMenuItem, {
-          accept: "video/*",
-          icon: icons.UploadIcon,
-          mode: "bleed",
-          onSelect: onUpload,
-          text: "Upload",
-          disabled: readOnly,
-          fontSize: 2
-        }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
-          icon: icons.SearchIcon,
-          text: "Browse",
-          onClick: () => setDialogState("select-video")
-        }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuDivider, {}), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
-          icon: icons.PlugIcon,
-          text: "Configure API",
-          onClick: () => setDialogState("secrets")
-        }), /* @__PURE__ */jsxRuntime.jsx(ui.MenuDivider, {}), /* @__PURE__ */jsxRuntime.jsx(ui.MenuItem, {
-          tone: "critical",
-          icon: icons.ResetIcon,
-          text: "Clear field",
-          onClick: onReset,
-          disabled: readOnly
-        })]
-      }),
-      portal: true,
-      open,
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-        icon: icons.EllipsisVerticalIcon,
-        mode: "ghost",
-        onClick: () => {
-          setDialogState(false);
-          setOpen(true);
-        }
-      })
-    })]
-  });
-}
-var PlayerActionsMenu$1 = React.memo(PlayerActionsMenu);
-function withFocusRing(component) {
-  return styled__default.default(component)(props => {
-    const border = {
-      width: props.$border ? 1 : 0,
-      color: "var(--card-border-color)"
-    };
-    return styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n        --card-focus-box-shadow: ", ";\n\n        border-radius: ", ";\n        outline: none;\n        box-shadow: var(--card-focus-box-shadow);\n\n        &:focus {\n          --card-focus-box-shadow: ", ";\n        }\n      "])), focusRingBorderStyle(border), ui.rem(props.theme.sanity.radius[1]), focusRingStyle({
-      base: props.theme.sanity.color.base,
-      border,
-      focusRing: props.theme.sanity.focusRing
-    }));
-  });
-}
-const ctrlKey = 17;
-const cmdKey = 91;
-const UploadCardWithFocusRing = withFocusRing(ui.Card);
-const UploadCard$1 = React.forwardRef((_ref13, forwardedRef) => {
-  let {
-    children,
-    tone,
-    onPaste,
-    onDrop,
-    onDragEnter,
-    onDragLeave,
-    onDragOver
-  } = _ref13;
-  const ctrlDown = React.useRef(false);
-  const inputRef = React.useRef(null);
-  const handleKeyDown = React.useCallback(event => {
-    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
-      ctrlDown.current = true;
-    }
-    const vKey = 86;
-    if (ctrlDown.current && event.keyCode == vKey) {
-      inputRef.current.focus();
-    }
-  }, []);
-  const handleKeyUp = React.useCallback(event => {
-    if (event.keyCode == ctrlKey || event.keyCode == cmdKey) {
-      ctrlDown.current = false;
-    }
-  }, []);
-  return /* @__PURE__ */jsxRuntime.jsxs(UploadCardWithFocusRing, {
-    tone,
-    height: "fill",
-    ref: forwardedRef,
-    padding: 0,
-    radius: 2,
-    shadow: 0,
-    tabIndex: 0,
-    onKeyDown: handleKeyDown,
-    onKeyUp: handleKeyUp,
-    onPaste,
-    onDrop,
-    onDragEnter,
-    onDragLeave,
-    onDragOver,
-    children: [/* @__PURE__ */jsxRuntime.jsx(HiddenInput$1, {
-      ref: inputRef,
-      onPaste
-    }), children]
-  });
-});
-const HiddenInput$1 = styled__default.default.input.attrs({
-  type: "text"
-})(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  position: absolute;\n  border: 0;\n  color: white;\n  opacity: 0;\n\n  &:focus {\n    outline: none;\n  }\n"])));
-const HiddenInput = styled__default.default.input(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  overflow: hidden;\n  width: 0.1px;\n  height: 0.1px;\n  opacity: 0;\n  position: absolute;\n  z-index: -1;\n"])));
-const Label = styled__default.default.label(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n  position: relative;\n"])));
-const FileInputButton = _ref14 => {
-  let {
-    onSelect,
-    ...props
-  } = _ref14;
-  const inputId = "FileSelect".concat(React.useId());
-  const inputRef = React.useRef(null);
-  const handleSelect = React.useCallback(event => {
-    if (onSelect) {
-      onSelect(event.target.files);
-    }
-  }, [onSelect]);
-  const handleButtonClick = React.useCallback(() => {
-    var _a;
-    return (_a = inputRef.current) == null ? void 0 : _a.click();
-  }, []);
-  return /* @__PURE__ */jsxRuntime.jsxs(Label, {
-    htmlFor: inputId,
-    children: [/* @__PURE__ */jsxRuntime.jsx(HiddenInput, {
-      accept: "video/*",
-      ref: inputRef,
-      tabIndex: 0,
-      type: "file",
-      id: inputId,
-      onChange: handleSelect,
-      value: ""
-    }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-      onClick: handleButtonClick,
-      mode: "default",
-      tone: "primary",
-      style: {
-        width: "100%"
-      },
-      ...props
-    })]
-  });
-};
-const UploadCard = styled__default.default(ui.Card)(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n  && {\n    border-style: dashed;\n  }\n"])));
-const ConfigureApiBox = styled__default.default(ui.Box)(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  right: 0;\n"])));
-function UploadPlaceholder(props) {
-  const {
-    setDialogState,
-    readOnly,
-    onSelect,
-    hovering,
-    needsSetup
-  } = props;
-  const handleBrowse = React.useCallback(() => setDialogState("select-video"), [setDialogState]);
-  const handleConfigureApi = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-    style: {
-      padding: 1,
-      position: "relative"
-    },
-    height: "stretch",
-    children: /* @__PURE__ */jsxRuntime.jsxs(UploadCard, {
-      sizing: "border",
-      height: "fill",
-      tone: readOnly ? "transparent" : "inherit",
-      border: true,
-      padding: 3,
-      style: hovering ? {
-        borderColor: "transparent"
-      } : void 0,
-      children: [/* @__PURE__ */jsxRuntime.jsx(ConfigureApiBox, {
-        padding: 3,
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-          padding: 3,
-          radius: 3,
-          tone: needsSetup ? "critical" : void 0,
-          onClick: handleConfigureApi,
-          icon: icons.PlugIcon,
-          mode: "bleed"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-        align: "center",
-        justify: "space-between",
-        gap: 4,
-        direction: ["column", "column", "row"],
-        paddingY: [2, 2, 0],
-        sizing: "border",
-        height: "fill",
-        children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-          align: "center",
-          justify: "center",
-          gap: 2,
-          flex: 1,
-          children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-            justify: "center",
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-              muted: true,
-              children: /* @__PURE__ */jsxRuntime.jsx(icons.DocumentVideoIcon, {})
-            })
-          }), /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-            justify: "center",
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-              size: 1,
-              muted: true,
-              children: "Drag video or paste URL here"
-            })
-          })]
-        }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
-          space: 2,
-          children: [/* @__PURE__ */jsxRuntime.jsx(FileInputButton, {
-            mode: "ghost",
-            tone: "default",
-            icon: icons.UploadIcon,
-            text: "Upload",
-            onSelect
-          }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-            mode: "ghost",
-            icon: icons.SearchIcon,
-            text: "Select",
-            onClick: handleBrowse
-          })]
-        })]
-      })]
-    })
-  });
-}
-class MuxVideoInputUploader extends React.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      isDraggingOver: false,
-      invalidPaste: false,
-      invalidFile: false,
-      uploadProgress: null,
-      fileInfo: null,
-      uuid: null,
-      error: null,
-      url: null
-    };
-    this.dragEnteredEls = [];
-    this.ctrlDown = false;
-    // eslint-disable-next-line no-warning-comments
-    // @TODO add proper typings for the return values of uploadFile and uploadUrl
-    this.upload = null;
-    this.container = React__default.default.createRef();
-    this.handleProgress = evt => {
-      this.setState({
-        uploadProgress: evt.percent
-      });
-    };
-    this.onUpload = files => {
-      this.setState({
-        uploadProgress: 0,
-        fileInfo: null,
-        uuid: null
-      });
-      this.upload = uploadFile(this.props.config, this.props.client, files[0], {
-        enableSignedUrls: this.props.secrets.enableSignedUrls
-      }).pipe(operators.takeUntil(this.onCancelUploadButtonClick$.pipe(operators.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
-    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":
-          return this.setState({
-            uuid: event.uuid
-          });
-        case "url":
-          return this.setState({
-            url: event.url,
-            uploadProgress: 100
-          });
-        default:
-          return null;
-      }
-    };
-    this.handleUploadSuccess = asset => {
-      this.setState({
-        uploadProgress: 100
-      });
-      this.props.onChange(sanity.PatchEvent.from([sanity.setIfMissing({
-        asset: {}
-      }), sanity.set({
-        _type: "reference",
-        _weak: true,
-        _ref: asset._id
-      }, ["asset"])]));
-    };
-    this.handlePaste = event => {
-      const clipboardData = event.clipboardData || window.clipboardData;
-      const url = clipboardData.getData("text");
-      const options = {
-        enableSignedUrls: this.props.secrets.enableSignedUrls
-      };
-      this.upload = uploadUrl(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;
-          if (!err.message.toLowerCase().match("invalid url")) {
-            error = err;
-          }
-          this.setState({
-            invalidPaste: true,
-            error
-          }, () => {
-            setTimeout(() => {
-              this.setState({
-                invalidPaste: false,
-                uploadProgress: null
-              });
-            }, 2e3);
-          });
-        }
-      });
-    };
-    this.handleDrop = event => {
-      this.setState({
-        isDraggingOver: false
-      });
-      event.preventDefault();
-      event.stopPropagation();
-      extractDroppedFiles(event.nativeEvent.dataTransfer).then(files => {
-        if (files) {
-          this.onUpload(files);
-        }
-      });
-    };
-    this.handleDragOver = event => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this.handleDragEnter = event => {
-      var _a, _b;
-      event.stopPropagation();
-      this.dragEnteredEls.push(event.target);
-      this.setState({
-        isDraggingOver: true
-      });
-      const type = (_b = (_a = event.dataTransfer.items) == null ? void 0 : _a[0]) == null ? void 0 : _b.type;
-      this.setState({
-        invalidFile: !type.startsWith("video/")
-      });
-    };
-    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
-        });
-      }
-    };
-  }
-  componentWillUnmount() {
-    this.unSubscribeToUpload();
-  }
-  componentDidMount() {
-    const events$ = new rxjs.Subject();
-    this.onCancelUploadButtonClick$ = events$.asObservable();
-    this.handleCancelUploadButtonClick = event => events$.next(event);
-  }
-  unSubscribeToUpload() {
-    if (this.upload && !this.upload.closed) {
-      this.upload.unsubscribe();
-    }
-  }
-  render() {
-    var _a;
-    if (this.state.uploadProgress !== null) {
-      return /* @__PURE__ */jsxRuntime.jsx(UploadProgress, {
-        onCancel: this.handleCancelUploadButtonClick,
-        progress: this.state.uploadProgress,
-        filename: ((_a = this.state.fileInfo) == null ? void 0 : _a.name) || this.state.url
-      });
-    }
-    if (this.state.error) {
-      throw this.state.error;
-    }
-    return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */jsxRuntime.jsx(UploadCard$1, {
-        tone: this.state.isDraggingOver && (this.state.invalidPaste || this.state.invalidFile) ? "critical" : this.state.isDraggingOver ? "positive" : void 0,
-        onDrop: this.handleDrop,
-        onDragOver: this.handleDragOver,
-        onDragLeave: this.handleDragLeave,
-        onDragEnter: this.handleDragEnter,
-        onPaste: this.handlePaste,
-        ref: this.container,
-        children: this.props.asset ? /* @__PURE__ */jsxRuntime.jsx(MuxVideoOld, {
-          readOnly: this.props.readOnly,
-          asset: this.props.asset,
-          onChange: this.props.onChange,
-          dialogState: this.props.dialogState,
-          setDialogState: this.props.setDialogState,
-          buttons: /* @__PURE__ */jsxRuntime.jsx(PlayerActionsMenu$1, {
-            asset: this.props.asset,
-            dialogState: this.props.dialogState,
-            setDialogState: this.props.setDialogState,
-            onChange: this.props.onChange,
-            onUpload: this.onUpload,
-            readOnly: this.props.readOnly
-          })
-        }) : /* @__PURE__ */jsxRuntime.jsx(UploadPlaceholder, {
-          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__ */jsxRuntime.jsx(InputBrowser, {
-        asset: this.props.asset,
-        onChange: this.props.onChange,
-        setDialogState: this.props.setDialogState
-      })]
-    });
-  }
-}
-const useSaveSecrets = (client, secrets) => {
-  return React.useCallback(async _ref15 => {
-    let {
-      token,
-      secretKey,
-      enableSignedUrls
-    } = _ref15;
-    let {
-      signingKeyId,
-      signingKeyPrivate
-    } = secrets;
-    try {
-      await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
-      const valid = await testSecrets(client);
-      if (!(valid == null ? 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 haveValidSigningKeys(client, signingKeyId, signingKeyPrivate);
-      if (!hasValidSigningKeys) {
-        try {
-          const {
-            data
-          } = await createSigningKeys(client);
-          signingKeyId = data.id;
-          signingKeyPrivate = data.private_key;
-          await saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate);
-        } catch (err) {
-          console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message);
-          throw err;
-        }
-      }
-    }
-    return {
-      token,
-      secretKey,
-      enableSignedUrls,
-      signingKeyId,
-      signingKeyPrivate
-    };
-  }, [client, secrets]);
-};
-function init(_ref16) {
-  let {
-    token,
-    secretKey,
-    enableSignedUrls
-  } = _ref16;
-  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 : "",
-    secretKey: secretKey != null ? secretKey : "",
-    enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : false
-  };
-}
-function reducer(state, action) {
-  switch (action == null ? void 0 : action.type) {
-    case "submit":
-      return {
-        ...state,
-        submitting: true,
-        error: null
-      };
-    case "error":
-      return {
-        ...state,
-        submitting: false,
-        error: action.payload
-      };
-    case "reset":
-      return init(action.payload);
-    case "change":
-      return {
-        ...state,
-        [action.payload.name]: action.payload.value
-      };
-    default:
-      throw new Error("Unknown action type: ".concat(action == null ? void 0 : action.type));
-  }
-}
-const useSecretsFormState = secrets => React.useReducer(reducer, secrets, init);
-const ids = ["title", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r"];
-function MuxLogo(_ref17) {
-  let {
-    height = 26
-  } = _ref17;
-  const id = React.useId();
-  const [titleId, a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = React.useMemo(() => ids.map(field => "".concat(id, "-").concat(field)), [id]);
-  return /* @__PURE__ */jsxRuntime.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: "".concat(height, "px")
-    },
-    children: [/* @__PURE__ */jsxRuntime.jsx("title", {
-      id: titleId,
-      children: "Mux Logo"
-    }), /* @__PURE__ */jsxRuntime.jsxs("defs", {
-      children: [/* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsx("stop", {
-          offset: 0,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff4e00"
-          }
-        }), /* @__PURE__ */jsxRuntime.jsx("stop", {
-          offset: 1,
-          style: {
-            stopOpacity: 1,
-            stopColor: "#ff1791"
-          }
-        })]
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: a,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M0 319h657.706V0H0Z"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: b,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M423.64 242h164.999V77H423.64Z"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: e,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M0 319h657.706V0H0Z"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: f,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M311.3 242h93.031V77H311.3Z"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: h,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M198.96 242h35.106V77H198.96Z"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: n,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M0 319h657.706V0H0Z"
-        })
-      }), /* @__PURE__ */jsxRuntime.jsx("clipPath", {
-        id: o,
-        clipPathUnits: "userSpaceOnUse",
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          d: "M69.067 242H169.12V141.947H69.067Z"
-        })
-      })]
-    }), /* @__PURE__ */jsxRuntime.jsx("g", {
-      clipPath: "url(#".concat(a, ")"),
-      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
-      children: /* @__PURE__ */jsxRuntime.jsx("g", {
-        style: {
-          opacity: 0.69999701
-        },
-        clipPath: "url(#".concat(b, ")"),
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          style: {
-            fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(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__ */jsxRuntime.jsxs("g", {
-      clipPath: "url(#".concat(e, ")"),
-      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
-      children: [/* @__PURE__ */jsxRuntime.jsx("g", {
-        style: {
-          opacity: 0.69999701
-        },
-        clipPath: "url(#".concat(f, ")"),
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          style: {
-            fill: "url(#".concat(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__ */jsxRuntime.jsx("g", {
-        style: {
-          opacity: 0.69999701
-        },
-        clipPath: "url(#".concat(h, ")"),
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          style: {
-            fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(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__ */jsxRuntime.jsx("g", {
-      clipPath: "url(#".concat(n, ")"),
-      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)",
-      children: /* @__PURE__ */jsxRuntime.jsx("g", {
-        style: {
-          opacity: 0.69999701
-        },
-        clipPath: "url(#".concat(o, ")"),
-        children: /* @__PURE__ */jsxRuntime.jsx("path", {
-          style: {
-            fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(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__ */jsxRuntime.jsx("path", {
-      style: {
-        fill: "url(#".concat(r, ")"),
-        stroke: "none"
-      },
-      d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
-      transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-    })]
-  });
-}
-const Logo = styled__default.default.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n  display: inline-block;\n  height: 0.8em;\n  margin-right: 1em;\n  transform: translate(0.3em, -0.2em);\n"])));
-const Header = () => /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-  children: [/* @__PURE__ */jsxRuntime.jsx(Logo, {
-    children: /* @__PURE__ */jsxRuntime.jsx(MuxLogo, {
-      height: 13
-    })
-  }), "API Credentials"]
-});
-function FormField(props) {
-  const {
-    children,
-    title,
-    description,
-    inputId
-  } = props;
-  return /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-    space: 1,
-    children: [/* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-      align: "flex-end",
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-        flex: 1,
-        paddingY: 2,
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
-          space: 2,
-          children: /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-              as: "label",
-              htmlFor: inputId,
-              weight: "semibold",
-              size: 1,
-              children: title || /* @__PURE__ */jsxRuntime.jsx("em", {
-                children: "Untitled"
-              })
-            }), description && /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-              muted: true,
-              size: 1,
-              children: description
-            })]
-          })
-        })
-      })
-    }), /* @__PURE__ */jsxRuntime.jsx("div", {
-      children
-    })]
-  });
-}
-var FormField$1 = React.memo(FormField);
-const fieldNames = ["token", "secretKey", "enableSignedUrls"];
-function ConfigureApi(_ref18) {
-  let {
-    secrets,
-    setDialogState
-  } = _ref18;
-  var _a, _b;
-  const client = VideoSource_styled.useClient();
-  const [state, dispatch] = useSecretsFormState(secrets);
-  const hasSecretsInitially = React.useMemo(() => secrets.token && secrets.secretKey, [secrets]);
-  const handleClose = React.useCallback(() => setDialogState(false), [setDialogState]);
-  const dirty = React.useMemo(() => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls, [secrets, state]);
-  const id = "ConfigureApi".concat(React.useId());
-  const [tokenId, secretKeyId, enableSignedUrlsId] = React.useMemo(() => fieldNames.map(field => "".concat(id, "-").concat(field)), [id]);
-  const firstField = React.useRef(null);
-  const handleSaveSecrets = useSaveSecrets(client, secrets);
-  const saving = React.useRef(false);
-  const handleSubmit = React.useCallback(event => {
-    event.preventDefault();
-    if (!saving.current && event.currentTarget.reportValidity()) {
-      saving.current = true;
-      dispatch({
-        type: "submit"
-      });
-      const {
-        token,
-        secretKey,
-        enableSignedUrls
-      } = state;
-      handleSaveSecrets({
-        token,
-        secretKey,
-        enableSignedUrls
-      }).then(savedSecrets => {
-        const {
-          projectId,
-          dataset
-        } = client.config();
-        suspendReact.clear([index.cacheNs, VideoSource_styled._id, projectId, dataset]);
-        suspendReact.preload(() => Promise.resolve(savedSecrets), [index.cacheNs, VideoSource_styled._id, projectId, dataset]);
-        setDialogState(false);
-      }).catch(err => dispatch({
-        type: "error",
-        payload: err.message
-      })).finally(() => {
-        saving.current = false;
-      });
-    }
-  }, [client, dispatch, handleSaveSecrets, setDialogState, state]);
-  const handleChangeToken = React.useCallback(event => {
-    dispatch({
-      type: "change",
-      payload: {
-        name: "token",
-        value: event.currentTarget.value
-      }
-    });
-  }, [dispatch]);
-  const handleChangeSecretKey = React.useCallback(event => {
-    dispatch({
-      type: "change",
-      payload: {
-        name: "secretKey",
-        value: event.currentTarget.value
-      }
-    });
-  }, [dispatch]);
-  const handleChangeEnableSignedUrls = React.useCallback(event => {
-    dispatch({
-      type: "change",
-      payload: {
-        name: "enableSignedUrls",
-        value: event.currentTarget.checked
-      }
-    });
-  }, [dispatch]);
-  React.useEffect(() => {
-    if (firstField.current) {
-      firstField.current.focus();
-    }
-  }, [firstField]);
-  return /* @__PURE__ */jsxRuntime.jsx(ui.Dialog, {
-    id,
-    onClose: handleClose,
-    header: /* @__PURE__ */jsxRuntime.jsx(Header, {}),
-    width: 0,
-    children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-      padding: 4,
-      style: {
-        position: "relative"
-      },
-      children: /* @__PURE__ */jsxRuntime.jsx("form", {
-        onSubmit: handleSubmit,
-        noValidate: true,
-        children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-          space: 4,
-          children: [!hasSecretsInitially && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-            padding: [3, 3, 3],
-            radius: 2,
-            shadow: 1,
-            tone: "primary",
-            children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-              space: 3,
-              children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-                size: 1,
-                children: ["To set up a new access token, go to your", " ", /* @__PURE__ */jsxRuntime.jsx("a", {
-                  href: "https://dashboard.mux.com/settings/access-tokens",
-                  target: "_blank",
-                  rel: "noreferrer noopener",
-                  children: "account on mux.com"
-                }), "."]
-              }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-                size: 1,
-                children: ["The access token needs permissions: ", /* @__PURE__ */jsxRuntime.jsx("strong", {
-                  children: "Mux Video "
-                }), "(Full Access) and ", /* @__PURE__ */jsxRuntime.jsx("strong", {
-                  children: "Mux Data"
-                }), " (Read)", /* @__PURE__ */jsxRuntime.jsx("br", {}), "The credentials will be stored safely in a hidden document only available to editors."]
-              })]
-            })
-          }), /* @__PURE__ */jsxRuntime.jsx(FormField$1, {
-            title: "Access Token",
-            inputId: tokenId,
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
-              id: tokenId,
-              ref: firstField,
-              onChange: handleChangeToken,
-              type: "text",
-              value: (_a = state.token) != null ? _a : "",
-              required: !!state.secretKey || state.enableSignedUrls
-            })
-          }), /* @__PURE__ */jsxRuntime.jsx(FormField$1, {
-            title: "Secret Key",
-            inputId: secretKeyId,
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.TextInput, {
-              id: secretKeyId,
-              onChange: handleChangeSecretKey,
-              type: "text",
-              value: (_b = state.secretKey) != null ? _b : "",
-              required: !!state.token || state.enableSignedUrls
-            })
-          }), /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-            space: 4,
-            children: [/* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
-              align: "center",
-              children: [/* @__PURE__ */jsxRuntime.jsx(ui.Checkbox, {
-                id: enableSignedUrlsId,
-                onChange: handleChangeEnableSignedUrls,
-                checked: state.enableSignedUrls,
-                style: {
-                  display: "block"
-                }
-              }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
-                flex: 1,
-                paddingLeft: 3,
-                children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-                  children: /* @__PURE__ */jsxRuntime.jsx("label", {
-                    htmlFor: enableSignedUrlsId,
-                    children: "Enable Signed Urls"
-                  })
-                })
-              })]
-            }), secrets.signingKeyId && state.enableSignedUrls ? /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-              padding: [3, 3, 3],
-              radius: 2,
-              shadow: 1,
-              tone: "caution",
-              children: /* @__PURE__ */jsxRuntime.jsxs(ui.Stack, {
-                space: 3,
-                children: [/* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-                  size: 1,
-                  children: "The signing key ID that Sanity will use is:"
-                }), /* @__PURE__ */jsxRuntime.jsx(ui.Code, {
-                  size: 1,
-                  children: secrets.signingKeyId
-                }), /* @__PURE__ */jsxRuntime.jsxs(ui.Text, {
-                  size: 1,
-                  children: ["This key is only used for previewing content in the Sanity UI.", /* @__PURE__ */jsxRuntime.jsx("br", {}), "You should generate a different key to use in your application server."]
-                })]
-              })
-            }) : null]
-          }), /* @__PURE__ */jsxRuntime.jsxs(ui.Inline, {
-            space: 2,
-            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-              text: "Save",
-              disabled: !dirty,
-              loading: state.submitting,
-              tone: "primary",
-              mode: "default",
-              type: "submit"
-            }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-              disabled: state.submitting,
-              text: "Cancel",
-              mode: "bleed",
-              onClick: handleClose
-            })]
-          }), state.error && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-            padding: [3, 3, 3],
-            radius: 2,
-            shadow: 1,
-            tone: "critical",
-            children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
-              children: state.error
-            })
-          })]
-        })
-      })
-    })
-  });
-}
-var ConfigureApi$1 = React.memo(ConfigureApi);
-function Onboard(props) {
-  const {
-    setDialogState
-  } = props;
-  const handleOpen = React.useCallback(() => setDialogState("secrets"), [setDialogState]);
-  return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /* @__PURE__ */jsxRuntime.jsx("div", {
-      style: {
-        padding: 2
-      },
-      children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
-        display: "flex",
-        sizing: "border",
-        style: {
-          aspectRatio: "16/9",
-          width: "100%",
-          boxShadow: "var(--card-bg-color) 0 0 0 2px"
-        },
-        paddingX: [2, 3, 4, 4],
-        radius: 1,
-        tone: "transparent",
-        children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
-          justify: "flex-start",
-          align: "center",
-          children: /* @__PURE__ */jsxRuntime.jsxs(ui.Grid, {
-            columns: 1,
-            gap: [2, 3, 4, 4],
-            children: [/* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
-              paddingY: 1,
-              children: /* @__PURE__ */jsxRuntime.jsx("div", {
-                style: {
-                  height: "32px"
-                },
-                children: /* @__PURE__ */jsxRuntime.jsx(MuxLogo, {})
-              })
-            }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
-              paddingY: 1,
-              children: /* @__PURE__ */jsxRuntime.jsx(ui.Heading, {
-                size: [0, 1, 2, 2],
-                children: "Upload and preview videos directly from your studio."
-              })
-            }), /* @__PURE__ */jsxRuntime.jsx(ui.Inline, {
-              paddingY: 1,
-              children: /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
-                mode: "ghost",
-                icon: icons.PlugIcon,
-                text: "Configure API",
-                onClick: handleOpen
-              })
-            })]
-          })
-        })
-      })
-    })
-  });
-}
-const Input = props => {
-  var _a;
-  const client = VideoSource_styled.useClient();
-  const secretDocumentValues = useSecretsDocumentValues();
-  const assetDocumentValues = VideoSource_styled.useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset);
-  const poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0);
-  const [dialogState, setDialogState] = useDialogState();
-  const error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
-  if (error) {
-    throw error;
-  }
-  const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
-  return /* @__PURE__ */jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: isLoading ? /* @__PURE__ */jsxRuntime.jsx(index.InputFallback, {}) : /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */jsxRuntime.jsx(Onboard, {
-        setDialogState
-      }) : /* @__PURE__ */jsxRuntime.jsx(MuxVideoInputUploader, {
-        ...props,
-        config: props.config,
-        onChange: props.onChange,
-        client,
-        secrets: secretDocumentValues.value.secrets,
-        asset: assetDocumentValues.value,
-        dialogState,
-        setDialogState,
-        needsSetup: secretDocumentValues.value.needsSetup
-      }), dialogState === "secrets" && /* @__PURE__ */jsxRuntime.jsx(ConfigureApi$1, {
-        setDialogState,
-        secrets: secretDocumentValues.value.secrets
-      })]
-    })
-  });
-};
-var Input$1 = React.memo(Input);
-exports.default = Input$1;
-//# sourceMappingURL=Input-e9ed3e84.cjs.map