sanity-plugin-mux-input 2.4.1 → 2.6.0

package/dist/index.mjs

@@ -1,9 +1,8 @@
-import { useClient as useClient$1, useDocumentStore, collate, useDocumentValues, createHookFromObservableFactory, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
+import { useClient as useClient$1, createHookFromObservableFactory, useDocumentStore, collate, useDocumentValues, truncateString, useFormattedDuration, SanityDefaultPreview, useTimeAgo, TextWithTone, isRecord, getPreviewStateObservable, getPreviewValueWithFallback, DocumentPreviewPresence, useDocumentPreviewStore, useSchema, useDocumentPresence, PreviewCard, isReference, useProjectId, useDataset, PatchEvent, unset, setIfMissing, set, LinearProgress, FormField as FormField$2, definePlugin } from "sanity";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { ErrorOutlineIcon, RetrieveIcon, RetryIcon, CheckmarkCircleIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, CheckmarkIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, LockIcon, PlayIcon, PlugIcon, UploadIcon, ResetIcon, EllipsisHorizontalIcon, TranslateIcon, DocumentVideoIcon } from "@sanity/icons";
-import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, Tooltip, Inline, useToast, TabList, Tab, TabPanel, TextInput, Label as Label$1, Grid, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
-import React, { useState, useMemo, useEffect, useRef, useId, memo, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
-import { useObservable } from "react-rx";
+import { ErrorOutlineIcon, RetryIcon, CheckmarkCircleIcon, RetrieveIcon, SortIcon, WarningOutlineIcon, EditIcon, PublishIcon, DocumentIcon, TrashIcon, RevertIcon, SearchIcon, ClockIcon, CropIcon, CalendarIcon, TagIcon, CheckmarkIcon, LockIcon, PlayIcon, PlugIcon, EllipsisHorizontalIcon, UploadIcon, ImageIcon, ResetIcon, TranslateIcon, WarningFilledIcon, DocumentVideoIcon } from "@sanity/icons";
+import { Card, Box, Spinner, Stack, Text, Checkbox, Button, Dialog, Flex, Heading, Code, MenuButton, Menu, MenuItem, TextInput, Tooltip, Inline, useToast, TabList, Tab, TabPanel, Label as Label$1, Grid, useTheme_v2, useClickOutsideEvent, Popover, MenuDivider, Autocomplete, Radio, rem } from "@sanity/ui";
+import React, { useState, useMemo, useEffect, useRef, useId, memo, createContext, useContext, isValidElement, useCallback, useReducer, PureComponent, createElement, forwardRef, Suspense } from "react";
 import compact from "lodash/compact.js";
 import toLower from "lodash/toLower.js";
 import trim from "lodash/trim.js";
@@ -19,6 +18,7 @@ import { usePaneRouter } from "sanity/desk";
 import { IntentLink } from "sanity/router";
 import isNumber from "lodash/isNumber.js";
 import isString from "lodash/isString.js";
+import { useObservable } from "react-rx";
 import useSWR from "swr";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { UpChunk } from "@mux/upchunk";
@@ -40,14 +40,6 @@ const ToolIcon = () => /* @__PURE__ */ jsx(
 function useClient() {
   return useClient$1({ apiVersion: SANITY_API_VERSION });
 }
-var __defProp$j = Object.defineProperty, __getOwnPropSymbols$j = Object.getOwnPropertySymbols, __hasOwnProp$j = Object.prototype.hasOwnProperty, __propIsEnum$j = Object.prototype.propertyIsEnumerable, __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$j = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$j.call(b, prop) && __defNormalProp$j(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b))
-      __propIsEnum$j.call(b, prop) && __defNormalProp$j(a2, prop, b[prop]);
-  return a2;
-};
 const SPECIAL_CHARS = /([^!@#$%^&*(),\\/?";:{}|[\]+<>\s-])+/g, STRIP_EDGE_CHARS = /(^[.]+)|([.]+$)/;
 function tokenize(string) {
   return (string.match(SPECIAL_CHARS) || []).map((token) => token.replace(STRIP_EDGE_CHARS, ""));
@@ -69,53 +61,43 @@ function createSearchFilter(query) {
   return {
     filter: createConstraints(terms, query.length >= 8),
     // if the search is big enough, include the assetId (mux id) in the results
-    params: __spreadValues$j({}, toGroqParams(terms))
+    params: {
+      ...toGroqParams(terms)
+    }
   };
 }
-var __defProp$i = Object.defineProperty, __defProps$c = Object.defineProperties, __getOwnPropDescs$c = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$i = Object.getOwnPropertySymbols, __hasOwnProp$i = Object.prototype.hasOwnProperty, __propIsEnum$i = Object.prototype.propertyIsEnumerable, __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$i = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$i.call(b, prop) && __defNormalProp$i(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b))
-      __propIsEnum$i.call(b, prop) && __defNormalProp$i(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$c = (a2, b) => __defProps$c(a2, __getOwnPropDescs$c(b));
 const ASSET_SORT_OPTIONS = {
   createdDesc: { groq: "_createdAt desc", label: "Newest first" },
   createdAsc: { groq: "_createdAt asc", label: "First created (oldest)" },
   filenameAsc: { groq: "filename asc", label: "By filename (A-Z)" },
   filenameDesc: { groq: "filename desc", label: "By filename (Z-A)" }
-}, useAssetDocuments = ({
-  documentStore,
-  sort,
-  searchQuery
-}) => {
-  const memoizedObservable = useMemo(() => {
-    const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
-    return documentStore.listenQuery(
-      /* groq */
-      `*[${filter}] | order(${sortFragment})`,
-      search.params,
-      {
-        apiVersion: SANITY_API_VERSION
-      }
-    );
-  }, [documentStore, sort, searchQuery]);
-  return useObservable(memoizedObservable, void 0);
-};
+}, useAssetDocuments = createHookFromObservableFactory(({ documentStore, sort, searchQuery }) => {
+  const search = createSearchFilter(searchQuery), filter = ['_type == "mux.videoAsset"', ...search.filter].filter(Boolean).join(" && "), sortFragment = ASSET_SORT_OPTIONS[sort].groq;
+  return documentStore.listenQuery(
+    /* groq */
+    `*[${filter}] | order(${sortFragment})`,
+    search.params,
+    {
+      apiVersion: SANITY_API_VERSION
+    }
+  );
+});
 function useAssets() {
-  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), assetDocumentsObservable = useAssetDocuments({ documentStore, sort, searchQuery }), isLoading = assetDocumentsObservable === void 0;
+  const documentStore = useDocumentStore(), [sort, setSort] = useState("createdDesc"), [searchQuery, setSearchQuery] = useState(""), [assetDocuments = [], isLoading] = useAssetDocuments(
+    useMemo(() => ({ documentStore, sort, searchQuery }), [documentStore, sort, searchQuery])
+  );
   return {
     assets: useMemo(
       () => (
         // Avoid displaying both drafts & published assets by collating them together and giving preference to drafts
-        collate(assetDocumentsObservable != null ? assetDocumentsObservable : []).map(
-          (collated) => __spreadProps$c(__spreadValues$i({}, collated.draft || collated.published || {}), {
+        collate(assetDocuments).map(
+          (collated) => ({
+            ...collated.draft || collated.published || {},
             _id: collated.id
           })
         )
       ),
-      [assetDocumentsObservable]
+      [assetDocuments]
     ),
     isLoading,
     sort,
@@ -127,14 +109,6 @@ function useAssets() {
 function parseMuxDate(date) {
   return new Date(Number(date) * 1e3);
 }
-var __defProp$h = Object.defineProperty, __defProps$b = Object.defineProperties, __getOwnPropDescs$b = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$h = Object.getOwnPropertySymbols, __hasOwnProp$h = Object.prototype.hasOwnProperty, __propIsEnum$h = Object.prototype.propertyIsEnumerable, __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$h = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$h.call(b, prop) && __defNormalProp$h(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b))
-      __propIsEnum$h.call(b, prop) && __defNormalProp$h(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$b = (a2, b) => __defProps$b(a2, __getOwnPropDescs$b(b));
 const FIRST_PAGE = 1, ASSETS_PER_PAGE = 100;
 async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
   try {
@@ -156,7 +130,7 @@ async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
       pageNum,
       data: json.data
     };
-  } catch (error) {
+  } catch {
     return {
       pageNum,
       error: { _tag: "FetchError" }
@@ -165,7 +139,8 @@ async function fetchMuxAssetsPage({ secretKey, token }, pageNum) {
 }
 function accumulateIntermediateState(currentState, pageResult) {
   const currentData = "data" in currentState && currentState.data || [];
-  return __spreadProps$b(__spreadValues$h({}, currentState), {
+  return {
+    ...currentState,
     data: [
       ...currentData,
       ...("data" in pageResult && pageResult.data || []).filter(
@@ -179,7 +154,7 @@ function accumulateIntermediateState(currentState, pageResult) {
     ),
     pageNum: pageResult.pageNum,
     loading: !0
-  });
+  };
 }
 function hasMorePages(pageResult) {
   return typeof pageResult == "object" && "data" in pageResult && Array.isArray(pageResult.data) && pageResult.data.length > 0;
@@ -207,7 +182,8 @@ function useMuxAssets({ secrets, enabled }) {
     ).subscribe({
       // Once done, let the user know we've stopped loading
       complete: () => {
-        setState((prev) => __spreadProps$b(__spreadValues$h({}, prev), {
+        setState((prev) => ({
+          ...prev,
           loading: !1
         }));
       }
@@ -221,25 +197,24 @@ const name = "mux-input", cacheNs = "sanity-plugin-mux-input", muxSecretsDocumen
     path$1
   ), cache = useMemo(() => {
     const exists = !!value, secrets = {
-      token: (value == null ? void 0 : value.token) || null,
-      secretKey: (value == null ? void 0 : value.secretKey) || null,
-      enableSignedUrls: (value == null ? void 0 : value.enableSignedUrls) || !1,
-      signingKeyId: (value == null ? void 0 : value.signingKeyId) || null,
-      signingKeyPrivate: (value == null ? void 0 : value.signingKeyPrivate) || null
+      token: value?.token || null,
+      secretKey: value?.secretKey || null,
+      enableSignedUrls: value?.enableSignedUrls || !1,
+      signingKeyId: value?.signingKeyId || null,
+      signingKeyPrivate: value?.signingKeyPrivate || null
     };
     return {
       isInitialSetup: !exists,
-      needsSetup: !(secrets != null && secrets.token) || !(secrets != null && secrets.secretKey),
+      needsSetup: !secrets?.token || !secrets?.secretKey,
       secrets
     };
   }, [value]);
   return { error, isLoading, value: cache };
 };
 function useImportMuxAssets() {
-  var _a;
   const documentStore = useDocumentStore(), client = useClient$1({
     apiVersion: SANITY_API_VERSION
-  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!((_a = secretDocumentValues.value.secrets) != null && _a.secretKey), [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
+  }), [assetsInSanity, assetsInSanityLoading] = useAssetsInSanity(documentStore), secretDocumentValues = useSecretsDocumentValues(), hasSecrets = !!secretDocumentValues.value.secrets?.secretKey, [importError, setImportError] = useState(), [importState, setImportState] = useState("closed"), dialogOpen = importState !== "closed", muxAssets = useMuxAssets({
     secrets: secretDocumentValues.value.secrets,
     enabled: hasSecrets && dialogOpen
   }), missingAssets = useMemo(() => assetsInSanity && muxAssets.data ? muxAssets.data.filter((a2) => !assetExistsInSanity(a2, assetsInSanity)) : void 0, [assetsInSanity, muxAssets.data]), [selectedAssets, setSelectedAssets] = useState([]), closeDialog = () => {
@@ -273,8 +248,7 @@ function useImportMuxAssets() {
   };
 }
 function muxAssetToSanityDocument(asset) {
-  var _a;
-  const playbackId = (_a = (asset.playback_ids || []).find((p) => p.id)) == null ? void 0 : _a.id;
+  const playbackId = (asset.playback_ids || []).find((p) => p.id)?.id;
   if (playbackId)
     return {
       _id: uuid(),
@@ -311,9 +285,8 @@ function useInView(options = {}) {
   return useEffect(() => {
     if (!ref.current) return;
     const observer = new IntersectionObserver(([entry], obs) => {
-      var _a;
       const nowInView = entry.isIntersecting && obs.thresholds.some((threshold) => entry.intersectionRatio >= threshold);
-      setInView(nowInView), (_a = options == null ? void 0 : options.onChange) == null || _a.call(options, nowInView);
+      setInView(nowInView), options?.onChange?.(nowInView);
     }, options), toObserve = ref.current;
     return observer.observe(toObserve), () => {
       toObserve && observer.unobserve(toObserve);
@@ -336,11 +309,11 @@ function readSecrets(client) {
       { _id }
     );
     return {
-      token: (data == null ? void 0 : data.token) || null,
-      secretKey: (data == null ? void 0 : data.secretKey) || null,
-      enableSignedUrls: !!(data != null && data.enableSignedUrls) || !1,
-      signingKeyId: (data == null ? void 0 : data.signingKeyId) || null,
-      signingKeyPrivate: (data == null ? void 0 : data.signingKeyPrivate) || null
+      token: data?.token || null,
+      secretKey: data?.secretKey || null,
+      enableSignedUrls: !!data?.enableSignedUrls || !1,
+      signingKeyId: data?.signingKeyId || null,
+      signingKeyPrivate: data?.signingKeyPrivate || null
     };
   }, [cacheNs, _id, projectId, dataset]);
 }
@@ -352,7 +325,7 @@ function generateJwt(client, playbackId, aud, payload) {
     throw new TypeError("Missing `signingKeyPrivate`.\n Check your plugin's configuration");
   const { default: sign } = suspend(() => import("jsonwebtoken-esm/sign"), ["jsonwebtoken-esm/sign"]);
   return sign(
-    payload ? JSON.parse(JSON.stringify(payload, (_, v) => v != null ? v : void 0)) : {},
+    payload ? JSON.parse(JSON.stringify(payload, (_, v) => v ?? void 0)) : {},
     atob(signingKeyPrivate),
     {
       algorithm: "RS256",
@@ -365,13 +338,23 @@ function generateJwt(client, playbackId, aud, payload) {
   );
 }
 function getPlaybackId(asset) {
-  if (!(asset != null && asset.playbackId))
+  if (!asset?.playbackId)
     throw console.error("Asset is missing a playbackId", { asset }), new TypeError("Missing playbackId");
   return asset.playbackId;
 }
 function getPlaybackPolicy(asset) {
-  var _a, _b, _c, _d;
-  return (_d = (_c = (_b = (_a = asset.data) == null ? void 0 : _a.playback_ids) == null ? void 0 : _b.find((playbackId) => asset.playbackId === playbackId.id)) == null ? void 0 : _c.policy) != null ? _d : "public";
+  return asset.data?.playback_ids?.find((playbackId) => asset.playbackId === playbackId.id)?.policy ?? "public";
+}
+function createUrlParamsObject(client, asset, params, audience) {
+  const playbackId = getPlaybackId(asset);
+  let searchParams = new URLSearchParams(
+    JSON.parse(JSON.stringify(params, (_, v) => v ?? void 0))
+  );
+  if (getPlaybackPolicy(asset) === "signed") {
+    const token = generateJwt(client, playbackId, audience, params);
+    searchParams = new URLSearchParams({ token });
+  }
+  return { playbackId, searchParams };
 }
 function getAnimatedPosterSrc({
   asset,
@@ -382,16 +365,22 @@ function getAnimatedPosterSrc({
   end = start + 5,
   fps = 15
 }) {
-  const params = { height, width, start, end, fps }, playbackId = getPlaybackId(asset);
-  let searchParams = new URLSearchParams(
-    JSON.parse(JSON.stringify(params, (_, v) => v != null ? v : void 0))
-  );
-  if (getPlaybackPolicy(asset) === "signed") {
-    const token = generateJwt(client, playbackId, "g", params);
-    searchParams = new URLSearchParams({ token });
-  }
+  const params = { height, width, start, end, fps }, { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "g");
   return `https://image.mux.com/${playbackId}/animated.gif?${searchParams}`;
 }
+function getPosterSrc({
+  asset,
+  client,
+  fit_mode,
+  height,
+  time = asset.thumbTime ?? void 0,
+  width
+}) {
+  const params = { fit_mode, height, width };
+  time && (params.time = time);
+  const { playbackId, searchParams } = createUrlParamsObject(client, asset, params, "t");
+  return `https://image.mux.com/${playbackId}/thumbnail.png?${searchParams}`;
+}
 const Image = styled.img`
   transition: opacity 0.175s ease-out 0s;
   display: block;
@@ -406,16 +395,18 @@ const Image = styled.img`
 };
 function VideoThumbnail({
   asset,
-  width
+  width,
+  staticImage = !1
 }) {
-  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), animatedSrc = useMemo(() => {
+  const { inView, ref } = useInView(), posterWidth = width || 250, [status, setStatus] = useState("loading"), client = useClient(), src = useMemo(() => {
     try {
-      return getAnimatedPosterSrc({ asset, client, width: posterWidth });
-    } catch (e) {
+      let thumbnail;
+      return staticImage ? thumbnail = getPosterSrc({ asset, client, width: posterWidth }) : thumbnail = getAnimatedPosterSrc({ asset, client, width: posterWidth }), thumbnail;
+    } catch {
       status !== "error" && setStatus("error");
       return;
     }
-  }, [asset, client, posterWidth, status]);
+  }, [asset, client, posterWidth, status, staticImage]);
   function handleLoad() {
     setStatus("loaded");
   }
@@ -470,8 +461,8 @@ function VideoThumbnail({
         /* @__PURE__ */ jsx(
           Image,
           {
-            src: animatedSrc,
-            alt: `Preview for video ${asset.filename || asset.assetId}`,
+            src,
+            alt: `Preview for ${staticImage ? "image" : "video"} ${asset.filename || asset.assetId}`,
             onLoad: handleLoad,
             onError: handleError,
             style: {
@@ -483,14 +474,6 @@ function VideoThumbnail({
     }
   );
 }
-var __defProp$g = Object.defineProperty, __getOwnPropSymbols$g = Object.getOwnPropertySymbols, __hasOwnProp$g = Object.prototype.hasOwnProperty, __propIsEnum$g = Object.prototype.propertyIsEnumerable, __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$g = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$g.call(b, prop) && __defNormalProp$g(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b))
-      __propIsEnum$g.call(b, prop) && __defNormalProp$g(a2, prop, b[prop]);
-  return a2;
-};
 const MissingAssetCheckbox = styled(Checkbox)`
   position: static !important;
 
@@ -508,7 +491,6 @@ function MissingAsset({
   selectAsset,
   selected
 }) {
-  var _a;
   const duration = useFormattedDuration(asset.duration * 1e3);
   return /* @__PURE__ */ jsx(
     Card,
@@ -537,7 +519,7 @@ function MissingAsset({
               assetId: asset.id,
               data: asset,
               filename: asset.id,
-              playbackId: (_a = asset.playback_ids.find((p) => p.id)) == null ? void 0 : _a.id
+              playbackId: asset.playback_ids.find((p) => p.id)?.id
             },
             width: 150
           }
@@ -568,8 +550,7 @@ function MissingAsset({
   );
 }
 function ImportVideosDialog(props) {
-  var _a, _b;
-  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = ((_a = props.missingAssets) == null ? void 0 : _a.length) === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
+  const { importState } = props, canTriggerImport = (importState === "idle" || importState === "error") && props.selectedAssets.length > 0, isImporting = importState === "importing", noAssetsToImport = props.missingAssets?.length === 0 && !props.muxAssets.loading && !props.assetsInSanityLoading;
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -601,7 +582,7 @@ function ImportVideosDialog(props) {
             fontSize: 2,
             padding: 3,
             mode: "ghost",
-            text: ((_b = props.selectedAssets) == null ? void 0 : _b.length) > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
+            text: props.selectedAssets?.length > 0 ? `Import ${props.selectedAssets.length} video(s)` : "No video(s) selected",
             tone: "positive",
             onClick: props.importAssets,
             iconRight: isImporting && Spinner,
@@ -701,7 +682,7 @@ function ImportVideosDialog(props) {
 function ImportVideosFromMux() {
   const importAssets = useImportMuxAssets();
   if (importAssets.hasSecrets)
-    return importAssets.dialogOpen ? /* @__PURE__ */ jsx(ImportVideosDialog, __spreadValues$g({}, importAssets)) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
+    return importAssets.dialogOpen ? /* @__PURE__ */ jsx(ImportVideosDialog, { ...importAssets }) : /* @__PURE__ */ jsx(Button, { mode: "bleed", text: "Import from Mux", onClick: importAssets.openDialog });
 }
 const CONTEXT_MENU_POPOVER_PROPS = {
   constrainSize: !0,
@@ -762,40 +743,24 @@ const IconInfo = (props) => {
     /* @__PURE__ */ jsx(Text, { size: props.size || 1, muted: props.muted, children: props.text })
   ] });
 };
-var __defProp$f = Object.defineProperty, __defProps$a = Object.defineProperties, __getOwnPropDescs$a = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$f = Object.getOwnPropertySymbols, __hasOwnProp$f = Object.prototype.hasOwnProperty, __propIsEnum$f = Object.prototype.propertyIsEnumerable, __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$f = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$f.call(b, prop) && __defNormalProp$f(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b))
-      __propIsEnum$f.call(b, prop) && __defNormalProp$f(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$a = (a2, b) => __defProps$a(a2, __getOwnPropDescs$a(b));
 function ResolutionIcon(props) {
-  return /* @__PURE__ */ jsx("svg", __spreadProps$a(__spreadValues$f({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24" }, props), { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props, children: /* @__PURE__ */ jsx(
     "path",
     {
       fill: "currentColor",
       d: "M20 9V6h-3V4h5v5h-2ZM2 9V4h5v2H4v3H2Zm15 11v-2h3v-3h2v5h-5ZM2 20v-5h2v3h3v2H2Zm4-4V8h12v8H6Zm2-2h8v-4H8v4Zm0 0v-4v4Z"
     }
-  ) }));
+  ) });
 }
-var __defProp$e = Object.defineProperty, __defProps$9 = Object.defineProperties, __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$e = Object.getOwnPropertySymbols, __hasOwnProp$e = Object.prototype.hasOwnProperty, __propIsEnum$e = Object.prototype.propertyIsEnumerable, __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$e = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$e.call(b, prop) && __defNormalProp$e(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b))
-      __propIsEnum$e.call(b, prop) && __defNormalProp$e(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$9 = (a2, b) => __defProps$9(a2, __getOwnPropDescs$9(b));
 function StopWatchIcon(props) {
   return /* @__PURE__ */ jsxs(
     "svg",
-    __spreadProps$9(__spreadValues$e({
+    {
       xmlns: "http://www.w3.org/2000/svg",
       width: "1em",
       height: "1em",
-      viewBox: "0 0 512 512"
-    }, props), {
+      viewBox: "0 0 512 512",
+      ...props,
       children: [
         /* @__PURE__ */ jsx("path", { d: "M232 306.667h48V176h-48v130.667z", fill: "currentColor" }),
         /* @__PURE__ */ jsx(
@@ -807,9 +772,17 @@ function StopWatchIcon(props) {
         ),
         /* @__PURE__ */ jsx("path", { d: "M192 32h128v48H192z", fill: "currentColor" })
       ]
-    })
+    }
   );
 }
+const DialogStateContext = createContext({
+  dialogState: !1,
+  setDialogState: () => null
+}), DialogStateProvider = ({
+  dialogState,
+  setDialogState,
+  children
+}) => /* @__PURE__ */ jsx(DialogStateContext.Provider, { value: { dialogState, setDialogState }, children }), useDialogStateContext = () => useContext(DialogStateContext);
 function getVideoSrc({ asset, client }) {
   const playbackId = getPlaybackId(asset), searchParams = new URLSearchParams();
   if (getPlaybackPolicy(asset) === "signed") {
@@ -818,33 +791,102 @@ function getVideoSrc({ asset, client }) {
   }
   return `https://stream.mux.com/${playbackId}.m3u8?${searchParams}`;
 }
-var __defProp$d = Object.defineProperty, __defProps$8 = Object.defineProperties, __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$d = Object.getOwnPropertySymbols, __hasOwnProp$d = Object.prototype.hasOwnProperty, __propIsEnum$d = Object.prototype.propertyIsEnumerable, __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$d = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$d.call(b, prop) && __defNormalProp$d(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b))
-      __propIsEnum$d.call(b, prop) && __defNormalProp$d(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$8 = (a2, b) => __defProps$8(a2, __getOwnPropDescs$8(b)), __objRest$3 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    __hasOwnProp$d.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
-  if (source != null && __getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(source))
-      exclude.indexOf(prop) < 0 && __propIsEnum$d.call(source, prop) && (target[prop] = source[prop]);
-  return target;
-};
-function VideoPlayer(_a) {
-  var _b = _a, {
-    asset,
-    children
-  } = _b, props = __objRest$3(_b, [
-    "asset",
-    "children"
-  ]), _a2, _b2;
-  const client = useClient(), isAudio = assetIsAudio(asset), { src: videoSrc, error } = useMemo(() => {
+function getDevicePixelRatio(options) {
+  const {
+    defaultDpr = 1,
+    maxDpr = 3,
+    round = !0
+  } = options || {}, dpr = typeof window < "u" && typeof window.devicePixelRatio == "number" ? window.devicePixelRatio : defaultDpr;
+  return Math.min(Math.max(1, round ? Math.floor(dpr) : dpr), maxDpr);
+}
+function formatSeconds(seconds) {
+  if (typeof seconds != "number" || Number.isNaN(seconds))
+    return "";
+  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
+  let ret = "";
+  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
+}
+function formatSecondsToHHMMSS(seconds) {
+  const hrs = Math.floor(seconds / 3600).toString().padStart(2, "0"), mins = Math.floor(seconds % 3600 / 60).toString().padStart(2, "0"), secs = Math.floor(seconds % 60).toString().padStart(2, "0");
+  return `${hrs}:${mins}:${secs}`;
+}
+function isValidTimeFormat(time) {
+  return /^([0-1]?[0-9]|2[0-3]):([0-5]?[0-9]):([0-5]?[0-9])$/.test(time) || time === "";
+}
+function getSecondsFromTimeFormat(time) {
+  const [hh = 0, mm = 0, ss = 0] = time.split(":").map(Number);
+  return hh * 3600 + mm * 60 + ss;
+}
+function EditThumbnailDialog({ asset, currentTime = 0 }) {
+  const client = useClient(), { setDialogState } = useDialogStateContext(), dialogId = `EditThumbnailDialog${useId()}`, [timeFormatted, setTimeFormatted] = useState(
+    () => formatSecondsToHHMMSS(currentTime)
+  ), [nextTime, setNextTime] = useState(currentTime), [inputError, setInputError] = useState(""), assetWithNewThumbnail = useMemo(() => ({ ...asset, thumbTime: nextTime }), [asset, nextTime]), [saving, setSaving] = useState(!1), [saveThumbnailError, setSaveThumbnailError] = useState(null), handleSave = () => {
+    setSaving(!0), client.patch(asset._id).set({ thumbTime: nextTime }).commit({ returnDocuments: !1 }).then(() => void setDialogState(!1)).catch(setSaveThumbnailError).finally(() => void setSaving(!1));
+  }, width = 300 * getDevicePixelRatio({ maxDpr: 2 });
+  if (saveThumbnailError)
+    throw saveThumbnailError;
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      id: dialogId,
+      header: "Edit thumbnail",
+      onClose: () => setDialogState(!1),
+      footer: /* @__PURE__ */ jsx(Stack, { padding: 3, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          disabled: inputError !== "",
+          mode: "ghost",
+          tone: "primary",
+          loading: saving,
+          onClick: handleSave,
+          text: "Set new thumbnail"
+        },
+        "thumbnail"
+      ) }),
+      children: /* @__PURE__ */ jsxs(Stack, { space: 3, padding: 3, children: [
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Current:" }),
+          /* @__PURE__ */ jsx(VideoThumbnail, { asset, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "New:" }),
+          /* @__PURE__ */ jsx(VideoThumbnail, { asset: assetWithNewThumbnail, width, staticImage: !0 })
+        ] }),
+        /* @__PURE__ */ jsx(Stack, { space: 2, children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", children: /* @__PURE__ */ jsx(Text, { size: 5, weight: "semibold", children: "Or" }) }) }),
+        /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: 1, weight: "semibold", children: "Selected time for thumbnail (hh:mm:ss):" }),
+          /* @__PURE__ */ jsx(
+            TextInput,
+            {
+              size: 1,
+              value: timeFormatted,
+              placeholder: "hh:mm:ss",
+              onChange: (event) => {
+                const value = event.currentTarget.value;
+                if (setTimeFormatted(value), isValidTimeFormat(value)) {
+                  setInputError("");
+                  const totalSeconds = getSecondsFromTimeFormat(value);
+                  setNextTime(totalSeconds);
+                } else
+                  setInputError("Invalid time format");
+              },
+              customValidity: inputError
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+function VideoPlayer({
+  asset,
+  thumbnailWidth = 250,
+  children,
+  ...props
+}) {
+  const client = useClient(), { dialogState } = useDialogStateContext(), isAudio = assetIsAudio(asset), muxPlayer = useRef(null), thumbnail = getPosterSrc({ asset, client, width: thumbnailWidth }), { src: videoSrc, error } = useMemo(() => {
     try {
-      const src = (asset == null ? void 0 : asset.playbackId) && getVideoSrc({ client, asset });
+      const src = asset?.playbackId && getVideoSrc({ client, asset });
       return src ? { src } : { error: new TypeError("Asset has no playback ID") };
     } catch (error2) {
       return { error: error2 };
@@ -852,61 +894,66 @@ function VideoPlayer(_a) {
   }, [asset, client]), signedToken = useMemo(() => {
     try {
       return new URL(videoSrc).searchParams.get("token");
-    } catch (e) {
+    } catch {
       return !1;
     }
-  }, [videoSrc]), [width, height] = ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.aspect_ratio) != null ? _b2 : "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
+  }, [videoSrc]), [width, height] = (asset?.data?.aspect_ratio ?? "16:9").split(":").map(Number), targetAspectRatio = props.forceAspectRatio || (Number.isNaN(width) ? 16 / 9 : width / height);
   let aspectRatio = Math.max(MIN_ASPECT_RATIO, targetAspectRatio);
   return isAudio && (aspectRatio = props.forceAspectRatio ? (
     // Make it wider when forcing aspect ratio to balance with videos' rendering height (audio players overflow a bit)
     props.forceAspectRatio * 1.2
-  ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
-    videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        MuxPlayer,
-        __spreadProps$8(__spreadValues$d({}, props), {
-          playsInline: !0,
-          playbackId: asset.playbackId,
-          tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
-          preload: "metadata",
-          crossOrigin: "anonymous",
-          metadata: {
-            player_name: "Sanity Admin Dashboard",
-            player_version: "2.4.1",
-            page_type: "Preview Player"
-          },
-          audio: isAudio,
-          style: {
-            height: "100%",
-            width: "100%",
-            display: "block",
-            objectFit: "contain"
+  ) : AUDIO_ASPECT_RATIO), /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Card, { tone: "transparent", style: { aspectRatio, position: "relative" }, children: [
+      videoSrc && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          MuxPlayer,
+          {
+            poster: thumbnail,
+            ref: muxPlayer,
+            ...props,
+            playsInline: !0,
+            playbackId: asset.playbackId,
+            tokens: signedToken ? { playback: signedToken, thumbnail: signedToken, storyboard: signedToken } : void 0,
+            preload: "metadata",
+            crossOrigin: "anonymous",
+            metadata: {
+              player_name: "Sanity Admin Dashboard",
+              player_version: "2.6.0",
+              page_type: "Preview Player"
+            },
+            audio: isAudio,
+            style: {
+              height: "100%",
+              width: "100%",
+              display: "block",
+              objectFit: "contain"
+            }
           }
-        })
-      ),
+        ),
+        children
+      ] }),
+      error ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)"
+          },
+          children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
+            /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
+            typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
+          ] })
+        }
+      ) : null,
       children
     ] }),
-    error ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: "50%",
-          left: "50%",
-          transform: "translate(-50%, -50%)"
-        },
-        children: /* @__PURE__ */ jsxs(Text, { muted: !0, children: [
-          /* @__PURE__ */ jsx(ErrorOutlineIcon, { style: { marginRight: "0.15em" } }),
-          typeof error == "object" && "message" in error && typeof error.message == "string" ? error.message : "Error loading video"
-        ] })
-      }
-    ) : null,
-    children
+    dialogState === "edit-thumbnail" && /* @__PURE__ */ jsx(EditThumbnailDialog, { asset, currentTime: muxPlayer?.current?.currentTime })
   ] });
 }
 function assetIsAudio(asset) {
-  var _a;
-  return ((_a = asset.data) == null ? void 0 : _a.max_stored_resolution) === "Audio only";
+  return asset.data?.max_stored_resolution === "Audio only";
 }
 function deleteAssetOnMux(client, assetId) {
   const { dataset } = client.config();
@@ -921,16 +968,16 @@ async function deleteAsset({
   asset,
   deleteOnMux
 }) {
-  if (!(asset != null && asset._id)) return !0;
+  if (!asset?._id) return !0;
   try {
     await client.delete(asset._id);
-  } catch (error) {
+  } catch {
     return "failed-sanity";
   }
-  if (deleteOnMux && asset != null && asset.assetId)
+  if (deleteOnMux && asset?.assetId)
     try {
       await deleteAssetOnMux(client, asset.assetId);
-    } catch (error) {
+    } catch {
       return "failed-mux";
     }
   return !0;
@@ -943,14 +990,6 @@ function getAsset(client, assetId) {
     method: "GET"
   });
 }
-var __defProp$c = Object.defineProperty, __defProps$7 = Object.defineProperties, __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$c = Object.getOwnPropertySymbols, __hasOwnProp$c = Object.prototype.hasOwnProperty, __propIsEnum$c = Object.prototype.propertyIsEnumerable, __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$c = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$c.call(b, prop) && __defNormalProp$c(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b))
-      __propIsEnum$c.call(b, prop) && __defNormalProp$c(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$7 = (a2, b) => __defProps$7(a2, __getOwnPropDescs$7(b));
 const getUnknownTypeFallback = (id, typeName) => ({
   title: /* @__PURE__ */ jsxs("em", { children: [
     "No schema found for type ",
@@ -964,7 +1003,7 @@ const getUnknownTypeFallback = (id, typeName) => ({
 });
 function MissingSchemaType(props) {
   const { layout, value } = props;
-  return /* @__PURE__ */ jsx(SanityDefaultPreview, __spreadProps$7(__spreadValues$c({}, getUnknownTypeFallback(value._id, value._type)), { layout }));
+  return /* @__PURE__ */ jsx(SanityDefaultPreview, { ...getUnknownTypeFallback(value._id, value._type), layout });
 }
 function TimeAgo({ time }) {
   const timeAgo = useTimeAgo(time);
@@ -1003,14 +1042,6 @@ function PublishedStatus(props) {
     }
   );
 }
-var __defProp$b = Object.defineProperty, __defProps$6 = Object.defineProperties, __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$b = Object.getOwnPropertySymbols, __hasOwnProp$b = Object.prototype.hasOwnProperty, __propIsEnum$b = Object.prototype.propertyIsEnumerable, __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$b = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$b.call(b, prop) && __defNormalProp$b(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b))
-      __propIsEnum$b.call(b, prop) && __defNormalProp$b(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$6 = (a2, b) => __defProps$6(a2, __getOwnPropDescs$6(b));
 function PaneItemPreview(props) {
   const { icon, layout, presence, schemaType, value } = props, title = isRecord(value.title) && isValidElement(value.title) || isString(value.title) || isNumber(value.title) ? value.title : null, observable = useMemo(
     () => getPreviewStateObservable(props.documentPreviewStore, schemaType, value._id, title),
@@ -1026,12 +1057,13 @@ function PaneItemPreview(props) {
   ] });
   return /* @__PURE__ */ jsx(
     SanityDefaultPreview,
-    __spreadProps$6(__spreadValues$b({}, getPreviewValueWithFallback({ value, draft, published })), {
+    {
+      ...getPreviewValueWithFallback({ value, draft, published }),
       isPlaceholder: isLoading,
       icon,
       layout,
       status
-    })
+    }
   );
 }
 function getIconWithFallback(icon, schemaType, defaultIcon) {
@@ -1052,7 +1084,7 @@ function DocumentPreviewInRool(props) {
   return (linkProps) => /* @__PURE__ */ jsx(IntentLink, { intent: "edit", params: { id: props.documentPair.id }, children: linkProps.children });
 }
 function DocumentPreview(props) {
-  const { schemaType, documentPair } = props, doc = (documentPair == null ? void 0 : documentPair.draft) || (documentPair == null ? void 0 : documentPair.published), id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
+  const { schemaType, documentPair } = props, doc = documentPair?.draft || documentPair?.published, id = documentPair.id || "", documentPreviewStore = useDocumentPreviewStore(), schema = useSchema(), documentPresence = useDocumentPresence(id), hasSchemaType = !!(schemaType && schemaType.name && schema.get(schemaType.name)), PreviewComponent = useMemo(() => doc ? !schemaType || !hasSchemaType ? /* @__PURE__ */ jsx(MissingSchemaType, { value: doc }) : /* @__PURE__ */ jsx(
     PaneItemPreview,
     {
       documentPreviewStore,
@@ -1088,14 +1120,13 @@ const Container = styled(Box)`
     font-size: ${(props) => props.theme.sanity.fonts.text.sizes[1]};
   }
 `, VideoReferences = (props) => {
-  var _a;
   const schema = useSchema();
   if (!props.isLoaded)
     return /* @__PURE__ */ jsx(SpinnerBox, {});
-  if (!((_a = props.references) != null && _a.length))
+  if (!props.references?.length)
     return /* @__PURE__ */ jsx(Card, { border: !0, radius: 3, padding: 3, children: /* @__PURE__ */ jsx(Text, { size: 2, children: "No documents are using this video" }) });
   const documentPairs = collate(props.references || []);
-  return /* @__PURE__ */ jsx(Container, { children: documentPairs == null ? void 0 : documentPairs.map((documentPair) => {
+  return /* @__PURE__ */ jsx(Container, { children: documentPairs?.map((documentPair) => {
     const schemaType = schema.get(documentPair.type);
     return /* @__PURE__ */ jsx(
       Card,
@@ -1128,7 +1159,7 @@ function DeleteDialog({
 }) {
   const client = useClient(), [state, setState] = useState("checkingReferences"), [deleteOnMux, setDeleteOnMux] = useState(!0), toast = useToast();
   useEffect(() => {
-    state !== "checkingReferences" || referencesLoading || setState(references != null && references.length ? "cantDelete" : "confirm");
+    state !== "checkingReferences" || referencesLoading || setState(references?.length ? "cantDelete" : "confirm");
   }, [state, references, referencesLoading]);
   async function confirmDelete() {
     if (state !== "confirm") return;
@@ -1170,7 +1201,7 @@ function DeleteDialog({
               /* @__PURE__ */ jsx(Heading, { size: 2, children: "Video can't be deleted" }),
               /* @__PURE__ */ jsxs(Text, { size: 2, style: { marginBottom: "2rem" }, children: [
                 "There are ",
-                references == null ? void 0 : references.length,
+                references?.length,
                 " document",
                 references && references.length > 0 && "s",
                 " ",
@@ -1241,40 +1272,23 @@ const useDocReferences = createHookFromObservableFactory(({ documentStore, id })
     apiVersion: SANITY_API_VERSION
   }
 ));
-function formatSeconds(seconds) {
-  if (typeof seconds != "number" || Number.isNaN(seconds))
-    return "";
-  const hrs = ~~(seconds / 3600), mins = ~~(seconds % 3600 / 60), secs = ~~seconds % 60;
-  let ret = "";
-  return hrs > 0 && (ret += "" + hrs + ":" + (mins < 10 ? "0" : "")), ret += "" + mins + ":" + (secs < 10 ? "0" : ""), ret += "" + secs, ret;
-}
 function getVideoMetadata(doc) {
-  var _a, _b, _c, _d, _e, _f;
-  const id = doc.assetId || doc._id || "", date = (_a = doc.data) != null && _a.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
+  const id = doc.assetId || doc._id || "", date = doc.data?.created_at ? new Date(Number(doc.data.created_at) * 1e3) : new Date(doc._createdAt || doc._updatedAt || Date.now());
   return {
     title: doc.filename || id.slice(0, 12),
     id,
     playbackId: doc.playbackId,
     createdAt: date,
-    duration: (_b = doc.data) != null && _b.duration ? formatSeconds((_c = doc.data) == null ? void 0 : _c.duration) : void 0,
-    aspect_ratio: (_d = doc.data) == null ? void 0 : _d.aspect_ratio,
-    max_stored_resolution: (_e = doc.data) == null ? void 0 : _e.max_stored_resolution,
-    max_stored_frame_rate: (_f = doc.data) == null ? void 0 : _f.max_stored_frame_rate
+    duration: doc.data?.duration ? formatSeconds(doc.data?.duration) : void 0,
+    aspect_ratio: doc.data?.aspect_ratio,
+    max_stored_resolution: doc.data?.max_stored_resolution,
+    max_stored_frame_rate: doc.data?.max_stored_frame_rate
   };
 }
-var __defProp$a = Object.defineProperty, __defProps$5 = Object.defineProperties, __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$a = Object.getOwnPropertySymbols, __hasOwnProp$a = Object.prototype.hasOwnProperty, __propIsEnum$a = Object.prototype.propertyIsEnumerable, __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$a = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$a.call(b, prop) && __defNormalProp$a(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b))
-      __propIsEnum$a.call(b, prop) && __defNormalProp$a(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$5 = (a2, b) => __defProps$5(a2, __getOwnPropDescs$5(b));
 function useVideoDetails(props) {
-  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences({
-    documentStore,
-    id: props.asset._id
-  }), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata(__spreadProps$5(__spreadValues$a({}, props.asset), { filename })), [state, setState] = useState("idle");
+  const documentStore = useDocumentStore(), toast = useToast(), client = useClient(), [references, referencesLoading] = useDocReferences(
+    useMemo(() => ({ documentStore, id: props.asset._id }), [documentStore, props.asset._id])
+  ), [originalAsset, setOriginalAsset] = useState(() => props.asset), [filename, setFilename] = useState(props.asset.filename), modified = filename !== originalAsset.filename, displayInfo = getVideoMetadata({ ...props.asset, filename }), [state, setState] = useState("idle");
   function handleClose() {
     if (state === "idle") {
       if (modified) {
@@ -1291,7 +1305,7 @@ function useVideoDetails(props) {
     if (state === "idle") {
       setState("saving");
       try {
-        await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => __spreadProps$5(__spreadValues$a({}, prev), { filename })), toast.push({
+        await client.patch(props.asset._id).set({ filename }).commit(), setOriginalAsset((prev) => ({ ...prev, filename })), toast.push({
           title: "Video title updated",
           description: `New title: ${filename}`,
           status: "success"
@@ -1506,7 +1520,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                             }
                           ),
                           /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-                            (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsx(
+                            displayInfo?.duration && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Duration: ${displayInfo.duration}`,
@@ -1514,7 +1528,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.max_stored_resolution) && /* @__PURE__ */ jsx(
+                            displayInfo?.max_stored_resolution && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Max Resolution: ${displayInfo.max_stored_resolution}`,
@@ -1522,7 +1536,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.max_stored_frame_rate) && /* @__PURE__ */ jsx(
+                            displayInfo?.max_stored_frame_rate && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Frame rate: ${displayInfo.max_stored_frame_rate}`,
@@ -1530,7 +1544,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                                 size: 2
                               }
                             ),
-                            (displayInfo == null ? void 0 : displayInfo.aspect_ratio) && /* @__PURE__ */ jsx(
+                            displayInfo?.aspect_ratio && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Aspect Ratio: ${displayInfo.aspect_ratio}`,
@@ -1555,7 +1569,7 @@ const AssetInput = (props) => /* @__PURE__ */ jsx(FormField$1, { title: props.la
                             ),
                             /* @__PURE__ */ jsx(IconInfo, { text: `Mux ID: 
 ${displayInfo.id}`, icon: TagIcon, size: 2 }),
-                            (displayInfo == null ? void 0 : displayInfo.playbackId) && /* @__PURE__ */ jsx(
+                            displayInfo?.playbackId && /* @__PURE__ */ jsx(
                               IconInfo,
                               {
                                 text: `Playback ID: ${displayInfo.playbackId}`,
@@ -1609,7 +1623,7 @@ ${displayInfo.id}`, icon: TagIcon, size: 2 }),
       }
     ),
     /* @__PURE__ */ jsxs(Inline, { space: 3, children: [
-      (displayInfo == null ? void 0 : displayInfo.duration) && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
+      displayInfo?.duration && /* @__PURE__ */ jsx(IconInfo, { text: displayInfo.duration, icon: ClockIcon, size: 1, muted: !0 }),
       /* @__PURE__ */ jsx(
         IconInfo,
         {
@@ -1685,7 +1699,7 @@ function VideoInBrowser({
   onEdit,
   asset
 }) {
-  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect == null ? void 0 : onSelect(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit == null ? void 0 : onEdit(asset), [onEdit, asset]);
+  const [renderVideo, setRenderVideo] = useState(!1), select = React.useCallback(() => onSelect?.(asset), [onSelect, asset]), edit = React.useCallback(() => onEdit?.(asset), [onEdit, asset]);
   if (!asset)
     return null;
   const playbackPolicy = getPlaybackPolicy(asset);
@@ -1806,7 +1820,7 @@ function VideoInBrowser({
 }
 function VideosBrowser({ onSelect }) {
   const { assets, isLoading, searchQuery, setSearchQuery, setSort, sort } = useAssets(), [editedAsset, setEditedAsset] = useState(null), freshEditedAsset = useMemo(
-    () => assets.find((a2) => a2._id === (editedAsset == null ? void 0 : editedAsset._id)) || editedAsset,
+    () => assets.find((a2) => a2._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   ), placement = onSelect ? "input" : "tool";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -1827,7 +1841,7 @@ function VideosBrowser({ onSelect }) {
         placement === "tool" && /* @__PURE__ */ jsx(ImportVideosFromMux, {})
       ] }),
       /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
-        (assets == null ? void 0 : assets.length) > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
+        assets?.length > 0 && /* @__PURE__ */ jsxs(Label$1, { muted: !0, children: [
           assets.length,
           " video",
           assets.length > 1 ? "s" : null,
@@ -1866,14 +1880,6 @@ function VideosBrowser({ onSelect }) {
     )
   ] });
 }
-var __defProp$9 = Object.defineProperty, __getOwnPropSymbols$9 = Object.getOwnPropertySymbols, __hasOwnProp$9 = Object.prototype.hasOwnProperty, __propIsEnum$9 = Object.prototype.propertyIsEnumerable, __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$9 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$9.call(b, prop) && __defNormalProp$9(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b))
-      __propIsEnum$9.call(b, prop) && __defNormalProp$9(a2, prop, b[prop]);
-  return a2;
-};
 const StudioTool = () => /* @__PURE__ */ jsx(VideosBrowser, {}), DEFAULT_TOOL_CONFIG = {
   icon: ToolIcon,
   title: "Videos"
@@ -1884,7 +1890,7 @@ function createStudioTool(config) {
     name: "mux",
     icon: toolConfig.icon || DEFAULT_TOOL_CONFIG.icon,
     title: toolConfig.title || DEFAULT_TOOL_CONFIG.title,
-    component: (props) => /* @__PURE__ */ jsx(StudioTool, __spreadValues$9(__spreadValues$9({}, config), props))
+    component: (props) => /* @__PURE__ */ jsx(StudioTool, { ...config, ...props })
   };
 }
 const path = ["assetId", "data", "playbackId", "status", "thumbTime", "filename"], useAssetDocumentValues = (asset) => useDocumentValues(
@@ -1895,16 +1901,12 @@ function useDialogState() {
   return useState(!1);
 }
 const useMuxPolling = (asset) => {
-  var _a, _b;
   const client = useClient(), projectId = useProjectId(), dataset = useDataset(), shouldFetch = useMemo(
-    () => {
-      var _a2, _b2;
-      return !!(asset != null && asset.assetId) && ((asset == null ? void 0 : asset.status) === "preparing" || ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing");
-    },
-    [asset == null ? void 0 : asset.assetId, (_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status, asset == null ? void 0 : asset.status]
+    () => !!asset?.assetId && (asset?.status === "preparing" || asset?.data?.static_renditions?.status === "preparing"),
+    [asset?.assetId, asset?.data?.static_renditions?.status, asset?.status]
   );
   return useSWR(
-    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset == null ? void 0 : asset.assetId}` : null,
+    shouldFetch ? `/${projectId}/addons/mux/assets/${dataset}/data/${asset?.assetId}` : null,
     async () => {
       const { data } = await client.request({
         url: `/addons/mux/assets/${dataset}/data/${asset.assetId}`,
@@ -1928,13 +1930,19 @@ function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, s
   };
   return client.createOrReplace(doc);
 }
-function createSigningKeys(client) {
-  const { dataset } = client.config();
-  return client.request({
-    url: `/addons/mux/signing-keys/${dataset}`,
-    withCredentials: !0,
-    method: "POST"
-  });
+async function createSigningKeys(client) {
+  try {
+    const { dataset } = client.config();
+    return await client.request({
+      url: `/addons/mux/signing-keys/${dataset}`,
+      withCredentials: !0,
+      method: "POST"
+    });
+  } catch (error) {
+    console.error("Error creating signing keys", error);
+    const message = error.response?.statusCode === 401 ? 'Unauthorized - Failed to create the Signing Key. Please ensure that the token has "System" permissions' : error.message;
+    throw new Error(message);
+  }
 }
 function testSecrets(client) {
   const { dataset } = client.config();
@@ -1955,7 +1963,7 @@ async function haveValidSigningKeys(client, signingKeyId, signingKeyPrivate) {
       method: "GET"
     });
     return !!(res.data && res.data.id);
-  } catch (e) {
+  } catch {
     return console.error("Error fetching signingKeyId", signingKeyId, "assuming it is not valid"), !1;
   }
 }
@@ -1977,16 +1985,14 @@ const useSaveSecrets = (client, secrets) => useCallback(
   }) => {
     let { signingKeyId, signingKeyPrivate } = secrets;
     try {
-      await saveSecrets(
+      if (await saveSecrets(
         client,
         token,
         secretKey,
         enableSignedUrls,
         signingKeyId,
         signingKeyPrivate
-      );
-      const valid = await testSecrets(client);
-      if (!(valid != null && valid.status) && token && secretKey)
+      ), !(await testSecrets(client))?.status && token && secretKey)
         throw new Error("Invalid secrets");
     } catch (err) {
       throw console.error("Error while trying to save secrets:", err), err;
@@ -2007,7 +2013,7 @@ const useSaveSecrets = (client, secrets) => useCallback(
           signingKeyPrivate
         );
       } catch (err) {
-        throw console.log("Error while creating and saving signing key:", err == null ? void 0 : err.message), err;
+        throw console.log("Error while creating and saving signing key:", err?.message), err;
       }
     return {
       token,
@@ -2019,626 +2025,68 @@ const useSaveSecrets = (client, secrets) => useCallback(
   },
   [client, secrets]
 );
-var __defProp$8 = Object.defineProperty, __defProps$4 = Object.defineProperties, __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$8 = Object.getOwnPropertySymbols, __hasOwnProp$8 = Object.prototype.hasOwnProperty, __propIsEnum$8 = Object.prototype.propertyIsEnumerable, __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$8 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$8.call(b, prop) && __defNormalProp$8(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b))
-      __propIsEnum$8.call(b, prop) && __defNormalProp$8(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$4 = (a2, b) => __defProps$4(a2, __getOwnPropDescs$4(b));
 function init({ token, secretKey, enableSignedUrls }) {
   return {
     submitting: !1,
     error: null,
     // Form inputs don't set the state back to null when clearing a field, but uses empty strings
     // This ensures the `dirty` check works correctly
-    token: token != null ? token : "",
-    secretKey: secretKey != null ? secretKey : "",
-    enableSignedUrls: enableSignedUrls != null ? enableSignedUrls : !1
+    token: token ?? "",
+    secretKey: secretKey ?? "",
+    enableSignedUrls: enableSignedUrls ?? !1
   };
 }
 function reducer(state, action) {
-  switch (action == null ? void 0 : action.type) {
+  switch (action?.type) {
     case "submit":
-      return __spreadProps$4(__spreadValues$8({}, state), { submitting: !0, error: null });
+      return { ...state, submitting: !0, error: null };
     case "error":
-      return __spreadProps$4(__spreadValues$8({}, state), { submitting: !1, error: action.payload });
+      return { ...state, submitting: !1, error: action.payload };
     case "reset":
       return init(action.payload);
     case "change":
-      return __spreadProps$4(__spreadValues$8({}, state), { [action.payload.name]: action.payload.value });
+      return { ...state, [action.payload.name]: action.payload.value };
     default:
-      throw new Error(`Unknown action type: ${action == null ? void 0 : action.type}`);
+      throw new Error(`Unknown action type: ${action?.type}`);
   }
 }
-const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init), ids = [
-  "title",
-  "a",
-  "b",
-  "c",
-  "d",
-  "e",
-  "f",
-  "g",
-  "h",
-  "i",
-  "j",
-  "k",
-  "l",
-  "m",
-  "n",
-  "o",
-  "p",
-  "q",
-  "r"
-];
+const useSecretsFormState = (secrets) => useReducer(reducer, secrets, init);
 function MuxLogo({ height = 26 }) {
-  const id = useId(), [titleId, a2, b, c2, d, e, f, g, h, i, j, k, l, m, n, o, p, q, r] = useMemo(
-    () => ids.map((field) => `${id}-${field}`),
-    [id]
-  );
-  return /* @__PURE__ */ jsxs(
+  const id = useId(), fillColor = useTheme_v2().color._dark ? "white" : "black", titleId = useMemo(() => `${id}-title`, [id]), pathStyle = {
+    fillRule: "nonzero"
+  };
+  return /* @__PURE__ */ jsx(
     "svg",
     {
       "aria-labelledby": titleId,
-      role: "img",
+      style: { height: `${height}px` },
+      viewBox: "0 0 1600 500",
+      version: "1.1",
       xmlns: "http://www.w3.org/2000/svg",
       xmlSpace: "preserve",
-      viewBox: "92.08878326416016 102.66712188720703 692.76123046875 219.99948120117188",
-      style: { height: `${height}px` },
-      children: [
-        /* @__PURE__ */ jsx("title", { id: titleId, children: "Mux Logo" }),
-        /* @__PURE__ */ jsxs("defs", { children: [
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: c2,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(528.38055 0 0 -528.38055 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: d,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(523.66766 0 0 -523.66766 67.897 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: g,
-              spreadMethod: "pad",
-              gradientTransform: "rotate(180 296.075 79.75) scale(524.84045)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: i,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: j,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(523.08514 0 0 -523.08514 67.897 224.446)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: k,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.553)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: l,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: m,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 94.554)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: p,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(521.97632 0 0 -521.97632 69.067 191.973)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: q,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(523.09039 0 0 -523.09039 67.312 191.973)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "linearGradient",
-            {
-              id: r,
-              spreadMethod: "pad",
-              gradientTransform: "matrix(524.84045 0 0 -524.84045 63.801 159.5)",
-              gradientUnits: "userSpaceOnUse",
-              y2: 0,
-              x2: 1,
-              y1: 0,
-              x1: 0,
-              children: [
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 0,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff4e00"
-                    }
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "stop",
-                  {
-                    offset: 1,
-                    style: {
-                      stopOpacity: 1,
-                      stopColor: "#ff1791"
-                    }
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("clipPath", { id: a2, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: b, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M423.64 242h164.999V77H423.64Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: e, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: f, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M311.3 242h93.031V77H311.3Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: h, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M198.96 242h35.106V77H198.96Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: n, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M0 319h657.706V0H0Z" }) }),
-          /* @__PURE__ */ jsx("clipPath", { id: o, clipPathUnits: "userSpaceOnUse", children: /* @__PURE__ */ jsx("path", { d: "M69.067 242H169.12V141.947H69.067Z" }) })
-        ] }),
-        /* @__PURE__ */ jsx("g", { clipPath: `url(#${a2})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
-          "g",
-          {
-            style: {
-              opacity: 0.69999701
-            },
-            clipPath: `url(#${b})`,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                style: {
-                  fill: `url(#${c2})`,
-                  stroke: "none"
-                },
-                d: "M558.674 82.142c6.855-6.855 17.969-6.855 24.824 0 6.854 6.855 6.854 17.969 0 24.823L453.605 236.858c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
-              }
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${d})`,
-              stroke: "none"
-            },
-            d: "M558.674 236.858 428.781 106.966c-6.855-6.855-6.855-17.969 0-24.825 6.855-6.854 17.969-6.854 24.823 0l129.894 129.894c6.854 6.855 6.854 17.968 0 24.823A17.498 17.498 0 0 1 571.086 242a17.495 17.495 0 0 1-12.412-5.142",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsxs("g", { clipPath: `url(#${e})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: [
-          /* @__PURE__ */ jsx(
-            "g",
-            {
-              style: {
-                opacity: 0.69999701
-              },
-              clipPath: `url(#${f})`,
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  style: {
-                    fill: `url(#${g})`,
-                    stroke: "none"
-                  },
-                  d: "M328.853 112.107c22.297 0 40.372 18.075 40.372 40.372v71.315c0 10.054 7.505 18.206 17.554 18.206 10.048 0 17.552-8.152 17.552-18.206v-71.315c0-41.686-33.793-75.479-75.478-75.479-9.694 0-17.553 7.859-17.553 17.554 0 9.694 7.859 17.553 17.553 17.553"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "g",
-            {
-              style: {
-                opacity: 0.69999701
-              },
-              clipPath: `url(#${h})`,
-              children: /* @__PURE__ */ jsx(
-                "path",
-                {
-                  style: {
-                    fill: `url(#${i})`,
-                    stroke: "none"
-                  },
-                  d: "M216.513 242c-10.049 0-17.553-8.152-17.553-18.206V95.206c0-10.054 7.504-18.206 17.553-18.206 10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.054-7.505 18.206-17.553 18.206"
-                }
-              )
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${j})`,
-              stroke: "none"
-            },
-            d: "M369.225 224.447c0-9.694 7.859-17.553 17.553-17.553 9.695 0 17.553 7.859 17.553 17.553s-7.858 17.552-17.553 17.552c-9.694 0-17.553-7.858-17.553-17.552",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${k})`,
-              stroke: "none"
-            },
-            d: "M553.532 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.552-17.554 17.552-9.694 0-17.553-7.858-17.553-17.552",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            style: {
-              fill: `url(#${l})`,
-              stroke: "none"
-            },
-            d: "M69.067 223.794V95.206C69.067 85.152 76.571 77 86.62 77c10.048 0 17.553 8.152 17.553 18.206v128.588c0 10.055-7.505 18.205-17.553 18.205-10.049 0-17.553-8.15-17.553-18.205",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
-          }
-        ),
+      children: /* @__PURE__ */ jsxs("g", { id: "Layer-1", fill: fillColor, children: [
         /* @__PURE__ */ jsx(
           "path",
           {
-            style: {
-              fill: `url(#${m})`,
-              stroke: "none"
-            },
-            d: "M198.96 94.554c0-9.695 7.859-17.554 17.553-17.554 9.695 0 17.554 7.859 17.554 17.554 0 9.694-7.859 17.553-17.554 17.553-9.694 0-17.553-7.859-17.553-17.553",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+            d: "M994.287,93.486c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m0,-93.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,68.943 -56.09,125.033 -125.032,125.033c-68.942,-0 -125.03,-56.09 -125.03,-125.033l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486c-34.509,-0 -62.484,27.976 -62.484,62.486l0,187.511c0,137.853 112.149,250.003 249.999,250.003c137.851,-0 250.001,-112.15 250.001,-250.003l0,-187.511c0,-34.51 -27.976,-62.486 -62.485,-62.486",
+            style: pathStyle
           }
         ),
-        /* @__PURE__ */ jsx("g", { clipPath: `url(#${n})`, transform: "matrix(1.33333 0 0 -1.33333 0 425.333)", children: /* @__PURE__ */ jsx(
-          "g",
-          {
-            style: {
-              opacity: 0.69999701
-            },
-            clipPath: `url(#${o})`,
-            children: /* @__PURE__ */ jsx(
-              "path",
-              {
-                style: {
-                  fill: `url(#${p})`,
-                  stroke: "none"
-                },
-                d: "M139.155 147.088c6.855-6.855 17.969-6.855 24.824 0s6.855 17.969 0 24.824l-64.947 64.946c-6.855 6.855-17.969 6.855-24.824 0s-6.855-17.969 0-24.823z"
-              }
-            )
-          }
-        ) }),
         /* @__PURE__ */ jsx(
           "path",
           {
-            style: {
-              fill: `url(#${q})`,
-              stroke: "none"
-            },
-            d: "m204.101 236.858-64.947-64.946c-6.854-6.855-6.854-17.969 0-24.824 6.856-6.855 17.97-6.855 24.824 0l64.947 64.947c6.855 6.855 6.855 17.968 0 24.823A17.495 17.495 0 0 1 216.513 242a17.498 17.498 0 0 1-12.412-5.142",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+            d: "M1537.51,468.511c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m-275.883,-218.509l-143.33,143.329c-24.402,24.402 -24.402,63.966 0,88.368c24.402,24.402 63.967,24.402 88.369,-0l143.33,-143.329l143.328,143.329c24.402,24.4 63.967,24.402 88.369,-0c24.403,-24.402 24.403,-63.966 0.001,-88.368l-143.33,-143.329l0.001,-0.004l143.329,-143.329c24.402,-24.402 24.402,-63.965 0,-88.367c-24.402,-24.402 -63.967,-24.402 -88.369,-0l-143.329,143.328l-143.329,-143.328c-24.402,-24.401 -63.967,-24.402 -88.369,-0c-24.402,24.402 -24.402,63.965 0,88.367l143.329,143.329l0,0.004Z",
+            style: pathStyle
           }
         ),
         /* @__PURE__ */ jsx(
           "path",
           {
-            style: {
-              fill: `url(#${r})`,
-              stroke: "none"
-            },
-            d: "M253.374 223.794v-71.315c0-41.685 33.793-75.479 75.479-75.479 9.695 0 17.553 7.859 17.553 17.554 0 9.694-7.858 17.553-17.553 17.553-22.297 0-40.372 18.075-40.372 40.372v71.315c0 10.055-7.505 18.205-17.554 18.205s-17.553-8.15-17.553-18.205",
-            transform: "matrix(1.33333 0 0 -1.33333 0 425.333)"
+            d: "M437.511,468.521c-17.121,-0 -31,-13.879 -31,-31c0,-17.121 13.879,-31 31,-31c17.121,-0 31,13.879 31,31c0,17.121 -13.879,31 -31,31m23.915,-463.762c-23.348,-9.672 -50.226,-4.327 -68.096,13.544l-143.331,143.329l-143.33,-143.329c-17.871,-17.871 -44.747,-23.216 -68.096,-13.544c-23.349,9.671 -38.574,32.455 -38.574,57.729l0,375.026c0,34.51 27.977,62.486 62.487,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-224.173l80.843,80.844c24.404,24.402 63.965,24.402 88.369,-0l80.843,-80.844l0,224.173c0,34.51 27.976,62.486 62.486,62.486c34.51,-0 62.486,-27.976 62.486,-62.486l0,-375.026c0,-25.274 -15.224,-48.058 -38.573,-57.729",
+            style: pathStyle
           }
         )
-      ]
+      ] })
     }
   );
 }
@@ -2652,7 +2100,6 @@ const Logo = styled.span`
   "API Credentials"
 ] }), fieldNames = ["token", "secretKey", "enableSignedUrls"];
 function ConfigureApi({ secrets, setDialogState }) {
-  var _a, _b;
   const client = useClient(), [state, dispatch] = useSecretsFormState(secrets), hasSecretsInitially = useMemo(() => secrets.token && secrets.secretKey, [secrets]), handleClose = useCallback(() => setDialogState(!1), [setDialogState]), dirty = useMemo(
     () => secrets.token !== state.token || secrets.secretKey !== state.secretKey || secrets.enableSignedUrls !== state.enableSignedUrls,
     [secrets, state]
@@ -2734,6 +2181,8 @@ function ConfigureApi({ secrets, setDialogState }) {
             /* @__PURE__ */ jsx("strong", { children: "Mux Data" }),
             " (Read)",
             /* @__PURE__ */ jsx("br", {}),
+            "To use Signed URLs, the token must also have System permissions.",
+            /* @__PURE__ */ jsx("br", {}),
             "The credentials will be stored safely in a hidden document only available to editors."
           ] })
         ] }) }),
@@ -2744,7 +2193,7 @@ function ConfigureApi({ secrets, setDialogState }) {
             ref: firstField,
             onChange: handleChangeToken,
             type: "text",
-            value: (_a = state.token) != null ? _a : "",
+            value: state.token ?? "",
             required: !!state.secretKey || state.enableSignedUrls
           }
         ) }),
@@ -2754,7 +2203,7 @@ function ConfigureApi({ secrets, setDialogState }) {
             id: secretKeyId,
             onChange: handleChangeSecretKey,
             type: "text",
-            value: (_b = state.secretKey) != null ? _b : "",
+            value: state.secretKey ?? "",
             required: !!state.token || state.enableSignedUrls
           }
         ) }),
@@ -2852,7 +2301,7 @@ function a(t) {
 function ErrorBoundaryCard(props) {
   const { children, schemaType } = props, { push: pushToast } = useToast(), errorRef = useRef(null), { ErrorBoundary, didCatch, error, reset } = a({
     onDidCatch: (err, errorInfo) => {
-      console.group(err.toString()), console.groupCollapsed("console.error"), console.error(err), console.groupEnd(), err.stack && (console.groupCollapsed("error.stack"), console.log(err.stack), console.groupEnd()), errorInfo != null && errorInfo.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
+      console.group(err.toString()), console.groupCollapsed("console.error"), console.error(err), console.groupEnd(), err.stack && (console.groupCollapsed("error.stack"), console.log(err.stack), console.groupEnd()), errorInfo?.componentStack && (console.groupCollapsed("errorInfo.componentStack"), console.log(errorInfo.componentStack), console.groupEnd()), console.groupEnd(), pushToast({
         status: "error",
         title: "Plugin crashed",
         description: /* @__PURE__ */ jsx(Flex, { align: "center", children: /* @__PURE__ */ jsxs(Inline, { space: 1, children: [
@@ -2886,7 +2335,7 @@ function ErrorBoundaryCard(props) {
       /* @__PURE__ */ jsx("code", { children: name }),
       " plugin crashed"
     ] }),
-    (error == null ? void 0 : error.message) && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsx(Text, { children: error.message }) }),
+    error?.message && /* @__PURE__ */ jsx(Card, { padding: 3, tone: "critical", shadow: 1, radius: 2, children: /* @__PURE__ */ jsx(Text, { children: error.message }) }),
     /* @__PURE__ */ jsx(Inline, { children: /* @__PURE__ */ jsx(Button, { onClick: handleRetry, text: "Retry" }) })
   ] }) }) }) : /* @__PURE__ */ jsx(ErrorBoundary, { children });
 }
@@ -2952,14 +2401,6 @@ function createUpChunkObservable(uuid2, uploadUrl2, source) {
     return upchunk.on("success", successHandler), upchunk.on("error", errorHandler), upchunk.on("progress", progressHandler), upchunk.on("offline", offlineHandler), upchunk.on("online", onlineHandler), () => upchunk.abort();
   });
 }
-var __defProp$7 = Object.defineProperty, __defProps$3 = Object.defineProperties, __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$7 = Object.getOwnPropertySymbols, __hasOwnProp$7 = Object.prototype.hasOwnProperty, __propIsEnum$7 = Object.prototype.propertyIsEnumerable, __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$7 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$7.call(b, prop) && __defNormalProp$7(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b))
-      __propIsEnum$7.call(b, prop) && __defNormalProp$7(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$3 = (a2, b) => __defProps$3(a2, __getOwnPropDescs$3(b));
 function cancelUpload(client, uuid2) {
   return client.observable.request({
     url: `/addons/mux/uploads/${client.config().dataset}/${uuid2}`,
@@ -3040,7 +2481,7 @@ function uploadFile({
                 // eslint-disable-next-line max-nested-callbacks
                 mergeMap((event) => event.type !== "success" ? of(event) : from(updateAssetDocumentFromUpload(client, uuid$1)).pipe(
                   // eslint-disable-next-line max-nested-callbacks
-                  mergeMap((doc) => of(__spreadProps$3(__spreadValues$7({}, event), { asset: doc })))
+                  mergeMap((doc) => of({ ...event, asset: doc }))
                 )),
                 // eslint-disable-next-line max-nested-callbacks
                 catchError((err) => cancelUpload(client, uuid$1).pipe(mergeMapTo(throwError(err))))
@@ -3111,7 +2552,7 @@ function testUrl(url) {
   let parsed;
   try {
     parsed = new URL(url);
-  } catch (err) {
+  } catch {
     return throwError(error);
   }
   return parsed && !parsed.protocol.match(/http:|https:/) ? throwError(error) : of(url);
@@ -3127,7 +2568,7 @@ function isValidUrl(url) {
   try {
     const parsed = new URL(url);
     return parsed && !!parsed.protocol.match(/http:|https:/);
-  } catch (e) {
+  } catch {
     return !1;
   }
 }
@@ -3142,7 +2583,7 @@ function normalizeItems(items) {
         let entry;
         try {
           entry = item.webkitGetAsEntry();
-        } catch (err) {
+        } catch {
           return [item.getAsFile()];
         }
         return entry ? entry.isDirectory ? walk(entry) : [item.getAsFile()] : [];
@@ -3175,7 +2616,7 @@ function walk(entry) {
 function SelectAssets({ asset: selectedAsset, onChange, setDialogState }) {
   const handleSelect = useCallback(
     (chosenAsset) => {
-      chosenAsset != null && chosenAsset._id || onChange(PatchEvent.from([unset(["asset"])])), chosenAsset._id !== (selectedAsset == null ? void 0 : selectedAsset._id) && onChange(
+      chosenAsset?._id || onChange(PatchEvent.from([unset(["asset"])])), chosenAsset._id !== selectedAsset?._id && onChange(
         PatchEvent.from([
           setIfMissing({ asset: {}, _type: "mux.video" }),
           set({ _type: "reference", _weak: !0, _ref: chosenAsset._id }, ["asset"])
@@ -3285,24 +2726,18 @@ const TopControls = styled.div`
     }
   ) : null
 ] }) }), Player = ({ asset, buttons, readOnly, onChange }) => {
-  var _a, _b, _c, _d;
-  const isLoading = useMemo(() => (asset == null ? void 0 : asset.status) === "preparing" ? "Preparing the video" : (asset == null ? void 0 : asset.status) === "waiting_for_upload" ? "Waiting for upload to start" : (asset == null ? void 0 : asset.status) === "waiting" ? "Processing upload" : !((asset == null ? void 0 : asset.status) === "ready" || typeof (asset == null ? void 0 : asset.status) > "u"), [asset]), isPreparingStaticRenditions = useMemo(() => {
-    var _a2, _b2;
-    return ((_b2 = (_a2 = asset == null ? void 0 : asset.data) == null ? void 0 : _a2.static_renditions) == null ? void 0 : _b2.status) === "preparing";
-  }, [(_b = (_a = asset == null ? void 0 : asset.data) == null ? void 0 : _a.static_renditions) == null ? void 0 : _b.status]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
+  const isLoading = useMemo(() => asset?.status === "preparing" ? "Preparing the video" : asset?.status === "waiting_for_upload" ? "Waiting for upload to start" : asset?.status === "waiting" ? "Processing upload" : !(asset?.status === "ready" || typeof asset?.status > "u"), [asset]), isPreparingStaticRenditions = useMemo(() => asset?.data?.static_renditions?.status === "preparing", [asset?.data?.static_renditions?.status]), playRef = useRef(null), muteRef = useRef(null), handleCancelUpload = useCancelUpload(asset, onChange);
   return useEffect(() => {
-    var _a2, _b2;
     const style = document.createElement("style");
-    style.innerHTML = "button svg { vertical-align: middle; }", (_a2 = playRef.current) != null && _a2.shadowRoot && playRef.current.shadowRoot.appendChild(style), (_b2 = muteRef == null ? void 0 : muteRef.current) != null && _b2.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
+    style.innerHTML = "button svg { vertical-align: middle; }", playRef.current?.shadowRoot && playRef.current.shadowRoot.appendChild(style), muteRef?.current?.shadowRoot && muteRef.current.shadowRoot.appendChild(style.cloneNode(!0));
   }, []), useEffect(() => {
-    var _a2, _b2, _c2;
-    if ((asset == null ? void 0 : asset.status) === "errored")
-      throw handleCancelUpload(), new Error((_c2 = (_b2 = (_a2 = asset.data) == null ? void 0 : _a2.errors) == null ? void 0 : _b2.messages) == null ? void 0 : _c2.join(" "));
-  }, [(_d = (_c = asset.data) == null ? void 0 : _c.errors) == null ? void 0 : _d.messages, asset == null ? void 0 : asset.status, handleCancelUpload]), !asset || !asset.status ? null : isLoading ? /* @__PURE__ */ jsx(
+    if (asset?.status === "errored")
+      throw handleCancelUpload(), new Error(asset.data?.errors?.messages?.join(" "));
+  }, [asset.data?.errors?.messages, asset?.status, handleCancelUpload]), !asset || !asset.status ? null : isLoading ? /* @__PURE__ */ jsx(
     UploadProgress,
     {
       progress: 100,
-      filename: asset == null ? void 0 : asset.filename,
+      filename: asset?.filename,
       text: isLoading !== !0 && isLoading || "Waiting for Mux to complete the upload",
       onCancel: readOnly ? void 0 : () => handleCancelUpload()
     }
@@ -3363,25 +2798,8 @@ const FileButton = styled(MenuItem)(({ theme }) => {
       opacity: 0;
     }
   `;
-});
-var __defProp$6 = Object.defineProperty, __defProps$2 = Object.defineProperties, __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$6 = Object.getOwnPropertySymbols, __hasOwnProp$6 = Object.prototype.hasOwnProperty, __propIsEnum$6 = Object.prototype.propertyIsEnumerable, __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$6 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$6.call(b, prop) && __defNormalProp$6(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b))
-      __propIsEnum$6.call(b, prop) && __defNormalProp$6(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$2 = (a2, b) => __defProps$2(a2, __getOwnPropDescs$2(b)), __objRest$2 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    __hasOwnProp$6.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
-  if (source != null && __getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(source))
-      exclude.indexOf(prop) < 0 && __propIsEnum$6.call(source, prop) && (target[prop] = source[prop]);
-  return target;
-};
-const FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
-  const _a = props, {
+}), FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
+  const {
     icon,
     id: idProp,
     accept,
@@ -3392,20 +2810,9 @@ const FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
     space = 3,
     textAlign,
     text,
-    disabled
-  } = _a, rest = __objRest$2(_a, [
-    "icon",
-    "id",
-    "accept",
-    "capture",
-    "fontSize",
-    "multiple",
-    "onSelect",
-    "space",
-    "textAlign",
-    "text",
-    "disabled"
-  ]), idHook = useId(), id = idProp || idHook, handleChange = React.useCallback(
+    disabled,
+    ...rest
+  } = props, idHook = useId(), id = idProp || idHook, handleChange = React.useCallback(
     (event) => {
       onSelect && event.target.files && onSelect(Array.from(event.target.files));
     },
@@ -3417,7 +2824,7 @@ const FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
     ] }) }),
     text && /* @__PURE__ */ jsx(Text, { align: textAlign, size: fontSize, textOverflow: "ellipsis", children: text })
   ] });
-  return /* @__PURE__ */ jsxs(FileButton, __spreadProps$2(__spreadValues$6({}, rest), { htmlFor: id, disabled, ref: forwardedRef, children: [
+  return /* @__PURE__ */ jsxs(FileButton, { ...rest, htmlFor: id, disabled, ref: forwardedRef, children: [
     content,
     /* @__PURE__ */ jsx(
       "input",
@@ -3433,7 +2840,7 @@ const FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
         disabled
       }
     )
-  ] }));
+  ] });
 }), LockCard = styled(Card)`
   position: absolute;
   top: 0;
@@ -3444,7 +2851,7 @@ const FileInputMenuItem = React.forwardRef(function(props, forwardedRef) {
 `, LockButton = styled(Button)`
   background: transparent;
   color: white;
-`;
+`, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
   const { asset, readOnly, dialogState, setDialogState, onChange, onSelect } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = useMemo(() => getPlaybackPolicy(asset) === "signed", [asset]), onReset = useCallback(() => onChange(PatchEvent.from(unset([]))), [onChange]);
   return useEffect(() => {
@@ -3488,6 +2895,14 @@ function PlayerActionsMenu(props) {
               onClick: () => setDialogState("select-video")
             }
           ),
+          isVideoAsset(asset) && /* @__PURE__ */ jsx(
+            MenuItem,
+            {
+              icon: ImageIcon,
+              text: "Thumbnail",
+              onClick: () => setDialogState("edit-thumbnail")
+            }
+          ),
           /* @__PURE__ */ jsx(MenuDivider, {}),
           /* @__PURE__ */ jsx(
             MenuItem,
@@ -3593,7 +3008,7 @@ function TextTracksEditor({
         {
           id: "include-autogenerated-track",
           style: { display: "block" },
-          checked: !!(track != null && track.language_code),
+          checked: !!track?.language_code,
           onChange: () => {
             dispatch(track ? { action: "track", id: track._id, subAction: "delete" } : {
               action: "track",
@@ -3629,10 +3044,7 @@ function TextTracksEditor({
         placeholder: "Select language",
         filterOption: (query, option) => option.label.toLowerCase().indexOf(query.toLowerCase()) > -1 || option.value.toLowerCase().indexOf(query.toLowerCase()) > -1,
         openButton: !0,
-        renderValue: (value) => {
-          var _a;
-          return ((_a = SUBTITLE_LANGUAGES[track.type].find((l) => l.value === value)) == null ? void 0 : _a.label) || value;
-        },
+        renderValue: (value) => SUBTITLE_LANGUAGES[track.type].find((l) => l.value === value)?.label || value,
         renderOption: (option) => /* @__PURE__ */ jsx(Card, { "data-as": "button", padding: 3, radius: 2, tone: "inherit", children: /* @__PURE__ */ jsxs(Text, { size: 2, textOverflow: "ellipsis", children: [
           option.label,
           " (",
@@ -3643,14 +3055,88 @@ function TextTracksEditor({
     )
   ] }) });
 }
-var __defProp$5 = Object.defineProperty, __getOwnPropSymbols$5 = Object.getOwnPropertySymbols, __hasOwnProp$5 = Object.prototype.hasOwnProperty, __propIsEnum$5 = Object.prototype.propertyIsEnumerable, __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$5 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$5.call(b, prop) && __defNormalProp$5(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b))
-      __propIsEnum$5.call(b, prop) && __defNormalProp$5(a2, prop, b[prop]);
-  return a2;
-};
+function PlaybackPolicyOption({
+  id,
+  checked,
+  optionName,
+  description,
+  dispatch,
+  action
+}) {
+  const [scale, setScale] = useState(1), boxStyle = {
+    outline: "0.01rem solid grey",
+    transform: `scale(${scale})`,
+    transition: "transform 0.1s ease-in-out",
+    cursor: "pointer",
+    borderRadius: "0.25rem"
+  }, triggerAnimation = () => {
+    setScale(0.98), setTimeout(() => {
+      setScale(1);
+    }, 100);
+  };
+  return /* @__PURE__ */ jsx("label", { children: /* @__PURE__ */ jsxs(Flex, { gap: 3, padding: 3, style: boxStyle, children: [
+    /* @__PURE__ */ jsx(Checkbox, { id, required: !0, checked, onChange: () => {
+      triggerAnimation(), dispatch({
+        action,
+        value: !checked
+      });
+    } }),
+    /* @__PURE__ */ jsxs(Grid, { gap: 3, children: [
+      /* @__PURE__ */ jsx(Text, { size: 3, weight: "bold", children: optionName }),
+      /* @__PURE__ */ jsx(Text, { size: 2, muted: !0, children: description })
+    ] })
+  ] }) });
+}
+function PlaybackPolicyWarning() {
+  return /* @__PURE__ */ jsx(Box, { padding: 2, style: {
+    outline: "0.01rem solid grey",
+    backgroundColor: "#979cb0",
+    borderRadius: "0.5rem",
+    width: "max-content",
+    color: "#13141A"
+  }, children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+    /* @__PURE__ */ jsx(WarningFilledIcon, {}),
+    /* @__PURE__ */ jsx(Text, { size: 1, style: {
+      color: "#13141A",
+      fontWeight: 500
+    }, children: "Please select at least one Playback Policy" })
+  ] }) });
+}
+function PlaybackPolicy({
+  id,
+  config,
+  secrets,
+  dispatch
+}) {
+  const noPolicySelected = !(config.public_policy || config.signed_policy);
+  return /* @__PURE__ */ jsxs(Grid, { gap: 3, children: [
+    /* @__PURE__ */ jsx(Text, { weight: "bold", children: "Advanced Playback Policies" }),
+    /* @__PURE__ */ jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--public`,
+        checked: config.public_policy,
+        optionName: "Public",
+        description: "Playback IDs are accessible by constructing an HLS URL like https://stream.mux.com/{PLAYBACK_ID}",
+        dispatch,
+        action: "public_policy"
+      }
+    ),
+    secrets.enableSignedUrls && /* @__PURE__ */ jsx(
+      PlaybackPolicyOption,
+      {
+        id: `${id}--signed`,
+        checked: config.signed_policy,
+        optionName: "Signed",
+        description: `Playback IDs should be used with tokens https://stream.mux.com/{PLAYBACK_ID}?token={TOKEN}. 
+                // See Secure video playback for details about creating tokens.`,
+        dispatch,
+        action: "signed_policy"
+      }
+    ),
+    noPolicySelected && /* @__PURE__ */ jsx(PlaybackPolicyWarning, {})
+  ] });
+}
 const ENCODING_OPTIONS = [
   { value: "smart", label: "Smart" },
   { value: "baseline", label: "Baseline" }
@@ -3677,14 +3163,15 @@ function UploadConfiguration({
     ] : []
   ).current, [config, dispatch] = useReducer(
     (prev, action) => {
-      var _a;
       switch (action.action) {
         case "encoding_tier":
           return action.value === "baseline" ? Object.assign({}, prev, {
             encoding_tier: action.value,
             mp4_support: "none",
             max_resolution_tier: "1080p",
-            text_tracks: (_a = prev.text_tracks) == null ? void 0 : _a.filter(({ type }) => type !== "autogenerated")
+            text_tracks: prev.text_tracks?.filter(({ type }) => type !== "autogenerated"),
+            public_policy: !0,
+            signed_policy: !1
           }) : Object.assign({}, prev, {
             encoding_tier: action.value,
             mp4_support: pluginConfig.mp4_support,
@@ -3694,7 +3181,9 @@ function UploadConfiguration({
         case "mp4_support":
         case "max_resolution_tier":
         case "normalize_audio":
-        case "signed":
+        case "signed_policy":
+          return Object.assign({}, prev, { [action.action]: action.value });
+        case "public_policy":
           return Object.assign({}, prev, { [action.action]: action.value });
         // Updating individual tracks
         case "track": {
@@ -3702,13 +3191,17 @@ function UploadConfiguration({
           switch (action.subAction) {
             case "add":
               if (target_track_i !== -1) break;
-              text_tracks.push(__spreadValues$5({
-                _id: action.id
-              }, action.value));
+              text_tracks.push({
+                _id: action.id,
+                ...action.value
+              });
               break;
             case "update":
               if (target_track_i === -1) break;
-              text_tracks[target_track_i] = __spreadValues$5(__spreadValues$5({}, text_tracks[target_track_i]), action.value);
+              text_tracks[target_track_i] = {
+                ...text_tracks[target_track_i],
+                ...action.value
+              };
               break;
             case "delete":
               if (target_track_i === -1) break;
@@ -3725,7 +3218,8 @@ function UploadConfiguration({
       encoding_tier: pluginConfig.encoding_tier,
       max_resolution_tier: pluginConfig.max_resolution_tier,
       mp4_support: pluginConfig.mp4_support,
-      signed: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      signed_policy: secrets.enableSignedUrls && pluginConfig.defaultSigned,
+      public_policy: !0,
       normalize_audio: pluginConfig.normalize_audio,
       text_tracks: autoTextTracks
     }
@@ -3844,25 +3338,9 @@ function UploadConfiguration({
               }) })
             }
           ),
-          (secrets.enableSignedUrls || config.encoding_tier === "smart") && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
-            secrets.enableSignedUrls && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
-              /* @__PURE__ */ jsx(
-                Checkbox,
-                {
-                  id: `${id}--signed`,
-                  style: { display: "block" },
-                  name: "signed",
-                  required: !0,
-                  checked: config.signed,
-                  onChange: (e) => dispatch({
-                    action: "signed",
-                    value: e.currentTarget.checked
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(Text, { children: /* @__PURE__ */ jsx("label", { htmlFor: `${id}--signed`, children: "Signed playback URL" }) })
-            ] }),
-            config.encoding_tier === "smart" && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, children: [
+          config.encoding_tier === "smart" && /* @__PURE__ */ jsx(FormField$2, { title: "Additional Configuration", children: /* @__PURE__ */ jsxs(Stack, { space: 2, children: [
+            /* @__PURE__ */ jsx(PlaybackPolicy, { id, config, secrets, dispatch }),
+            config.encoding_tier === "smart" && /* @__PURE__ */ jsxs(Flex, { align: "center", gap: 2, padding: [0, 2], children: [
               /* @__PURE__ */ jsx(
                 Checkbox,
                 {
@@ -3892,6 +3370,7 @@ function UploadConfiguration({
         /* @__PURE__ */ jsx(Box, { marginTop: 4, children: /* @__PURE__ */ jsx(
           Button,
           {
+            disabled: config.encoding_tier === "smart" && !config.public_policy && !config.signed_policy,
             icon: UploadIcon,
             text: "Upload",
             tone: "positive",
@@ -3902,6 +3381,10 @@ function UploadConfiguration({
     }
   );
 }
+function setPlaybackPolicy(config) {
+  const playback_policy = [];
+  return config.public_policy && playback_policy.push("public"), config.signed_policy && playback_policy.push("signed"), playback_policy;
+}
 function formatUploadConfig(config) {
   const generated_subtitles = config.text_tracks.filter(isAutogeneratedTrack).map((track) => ({
     name: track.name,
@@ -3926,7 +3409,7 @@ function formatUploadConfig(config) {
       )
     ],
     mp4_support: config.mp4_support,
-    playback_policy: config.signed ? ["public", "signed"] : ["public"],
+    playback_policy: setPlaybackPolicy(config),
     max_resolution_tier: config.max_resolution_tier,
     encoding_tier: config.encoding_tier,
     normalize_audio: config.normalize_audio
@@ -3994,24 +3477,7 @@ const ctrlKey = 17, cmdKey = 91, UploadCardWithFocusRing = withFocusRing(Card),
   &:focus {
     outline: none;
   }
-`;
-var __defProp$4 = Object.defineProperty, __getOwnPropSymbols$4 = Object.getOwnPropertySymbols, __hasOwnProp$4 = Object.prototype.hasOwnProperty, __propIsEnum$4 = Object.prototype.propertyIsEnumerable, __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$4 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$4.call(b, prop) && __defNormalProp$4(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b))
-      __propIsEnum$4.call(b, prop) && __defNormalProp$4(a2, prop, b[prop]);
-  return a2;
-}, __objRest$1 = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    __hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source))
-      exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop) && (target[prop] = source[prop]);
-  return target;
-};
-const HiddenInput = styled.input`
+`, HiddenInput = styled.input`
   overflow: hidden;
   width: 0.1px;
   height: 0.1px;
@@ -4020,17 +3486,13 @@ const HiddenInput = styled.input`
   z-index: -1;
 `, Label = styled.label`
   position: relative;
-`, FileInputButton = (_a) => {
-  var _b = _a, { onSelect, accept } = _b, props = __objRest$1(_b, ["onSelect", "accept"]);
+`, FileInputButton = ({ onSelect, accept, ...props }) => {
   const inputId = `FileSelect${useId()}`, inputRef = useRef(null), handleSelect = useCallback(
     (event) => {
       onSelect && onSelect(event.target.files);
     },
     [onSelect]
-  ), handleButtonClick = useCallback(() => {
-    var _a2;
-    return (_a2 = inputRef.current) == null ? void 0 : _a2.click();
-  }, []);
+  ), handleButtonClick = useCallback(() => inputRef.current?.click(), []);
   return /* @__PURE__ */ jsxs(Label, { htmlFor: inputId, children: [
     /* @__PURE__ */ jsx(
       HiddenInput,
@@ -4046,12 +3508,13 @@ const HiddenInput = styled.input`
     ),
     /* @__PURE__ */ jsx(
       Button,
-      __spreadValues$4({
+      {
         onClick: handleButtonClick,
         mode: "default",
         tone: "primary",
-        style: { width: "100%" }
-      }, props)
+        style: { width: "100%" },
+        ...props
+      }
     )
   ] });
 };
@@ -4112,29 +3575,12 @@ function UploadPlaceholder(props) {
     }
   );
 }
-var __defProp$3 = Object.defineProperty, __defProps$1 = Object.defineProperties, __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$3 = Object.getOwnPropertySymbols, __hasOwnProp$3 = Object.prototype.hasOwnProperty, __propIsEnum$3 = Object.prototype.propertyIsEnumerable, __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$3 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$3.call(b, prop) && __defNormalProp$3(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b))
-      __propIsEnum$3.call(b, prop) && __defNormalProp$3(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps$1 = (a2, b) => __defProps$1(a2, __getOwnPropDescs$1(b)), __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    __hasOwnProp$3.call(source, prop) && exclude.indexOf(prop) < 0 && (target[prop] = source[prop]);
-  if (source != null && __getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(source))
-      exclude.indexOf(prop) < 0 && __propIsEnum$3.call(source, prop) && (target[prop] = source[prop]);
-  return target;
-};
 const INITIAL_STATE = {
   stagedUpload: null,
   uploadStatus: null,
   error: null
 };
 function Uploader(props) {
-  var _a;
   const toast = useToast(), containerRef = useRef(null), dragEnteredEls = useRef([]), [dragState, setDragState] = useState(null), cancelUploadButton = useRef(
     (() => {
       const events$ = new Subject();
@@ -4145,31 +3591,33 @@ function Uploader(props) {
     })()
   ).current, uploadRef = useRef(null), [state, dispatch] = useReducer(
     (prev, action) => {
-      var _b, _c;
       switch (action.action) {
         case "stageUpload":
           return Object.assign({}, INITIAL_STATE, { stagedUpload: action.input });
         case "commitUpload":
           return Object.assign({}, prev, { uploadStatus: { progress: 0 } });
         case "progressInfo": {
-          const _a2 = action, payload = __objRest(_a2, ["type", "action"]);
+          const { ...payload } = action;
           return Object.assign({}, prev, {
-            uploadStatus: __spreadValues$3(__spreadProps$1(__spreadValues$3({}, prev.uploadStatus), {
-              progress: prev.uploadStatus.progress
-            }), payload)
+            uploadStatus: {
+              ...prev.uploadStatus,
+              progress: prev.uploadStatus.progress,
+              ...payload
+            }
           });
         }
         case "progress":
           return Object.assign({}, prev, {
-            uploadStatus: __spreadProps$1(__spreadValues$3({}, prev.uploadStatus), {
+            uploadStatus: {
+              ...prev.uploadStatus,
               progress: action.percent
-            })
+            }
           });
         case "reset":
         case "complete":
-          return (_b = uploadRef.current) == null || _b.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
+          return uploadRef.current?.unsubscribe(), uploadRef.current = null, INITIAL_STATE;
         case "error":
-          return (_c = uploadRef.current) == null || _c.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
+          return uploadRef.current?.unsubscribe(), uploadRef.current = null, Object.assign({}, INITIAL_STATE, { error: action.error });
         default:
           return prev;
       }
@@ -4205,8 +3653,7 @@ function Uploader(props) {
           takeUntil(
             cancelUploadButton.observable.pipe(
               tap(() => {
-                var _a2;
-                (_a2 = state.uploadStatus) != null && _a2.uuid && props.client.delete(state.uploadStatus.uuid);
+                state.uploadStatus?.uuid && props.client.delete(state.uploadStatus.uuid);
               })
             )
           )
@@ -4219,7 +3666,7 @@ function Uploader(props) {
           case "uuid":
           case "file":
           case "url":
-            dispatch(__spreadValues$3({ action: "progressInfo" }, event));
+            dispatch({ action: "progressInfo", ...event });
             break;
           case "progress":
             dispatch({ action: "progress", percent: event.percent });
@@ -4260,17 +3707,16 @@ function Uploader(props) {
   }, handleDragOver = (event) => {
     event.preventDefault(), event.stopPropagation();
   }, handleDragEnter = (event) => {
-    var _a2, _b;
     event.stopPropagation(), dragEnteredEls.current.push(event.target);
-    const type = (_b = (_a2 = event.dataTransfer.items) == null ? void 0 : _a2[0]) == null ? void 0 : _b.type;
-    setDragState(type != null && type.startsWith("video/") ? "valid" : "invalid");
+    const type = event.dataTransfer.items?.[0]?.type;
+    setDragState(type?.startsWith("video/") ? "valid" : "invalid");
   }, handleDragLeave = (event) => {
     event.stopPropagation();
     const idx = dragEnteredEls.current.indexOf(event.target);
     idx > -1 && dragEnteredEls.current.splice(idx, 1), dragEnteredEls.current.length === 0 && setDragState(null);
   };
   if (state.error !== null) {
-    const error = { state };
+    const error = {};
     return /* @__PURE__ */ jsxs(Flex, { gap: 3, direction: "column", justify: "center", align: "center", children: [
       /* @__PURE__ */ jsx(Text, { size: 5, muted: !0, children: /* @__PURE__ */ jsx(ErrorOutlineIcon, {}) }),
       /* @__PURE__ */ jsx(Text, { children: "Something went wrong" }),
@@ -4285,7 +3731,7 @@ function Uploader(props) {
       {
         onCancel: cancelUploadButton.handleClick,
         progress: uploadStatus.progress,
-        filename: ((_a = uploadStatus.file) == null ? void 0 : _a.name) || uploadStatus.url
+        filename: uploadStatus.file?.name || uploadStatus.url
       }
     );
   }
@@ -4313,20 +3759,27 @@ function Uploader(props) {
         onPaste: handlePaste,
         ref: containerRef,
         children: props.asset ? /* @__PURE__ */ jsx(
-          Player,
+          DialogStateProvider,
           {
-            readOnly: props.readOnly,
-            asset: props.asset,
-            onChange: props.onChange,
-            buttons: /* @__PURE__ */ jsx(
-              PlayerActionsMenu$1,
+            dialogState: props.dialogState,
+            setDialogState: props.setDialogState,
+            children: /* @__PURE__ */ jsx(
+              Player,
               {
+                readOnly: props.readOnly,
                 asset: props.asset,
-                dialogState: props.dialogState,
-                setDialogState: props.setDialogState,
                 onChange: props.onChange,
-                onSelect: handleUpload,
-                readOnly: props.readOnly
+                buttons: /* @__PURE__ */ jsx(
+                  PlayerActionsMenu$1,
+                  {
+                    asset: props.asset,
+                    dialogState: props.dialogState,
+                    setDialogState: props.setDialogState,
+                    onChange: props.onChange,
+                    onSelect: handleUpload,
+                    readOnly: props.readOnly
+                  }
+                )
               }
             )
           }
@@ -4352,24 +3805,16 @@ function Uploader(props) {
     )
   ] });
 }
-var __defProp$2 = Object.defineProperty, __defProps = Object.defineProperties, __getOwnPropDescs = Object.getOwnPropertyDescriptors, __getOwnPropSymbols$2 = Object.getOwnPropertySymbols, __hasOwnProp$2 = Object.prototype.hasOwnProperty, __propIsEnum$2 = Object.prototype.propertyIsEnumerable, __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$2 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$2.call(b, prop) && __defNormalProp$2(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b))
-      __propIsEnum$2.call(b, prop) && __defNormalProp$2(a2, prop, b[prop]);
-  return a2;
-}, __spreadProps = (a2, b) => __defProps(a2, __getOwnPropDescs(b));
 const Input = (props) => {
-  var _a;
-  const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues((_a = props.value) == null ? void 0 : _a.asset), poll = useMuxPolling(props.readOnly ? void 0 : (assetDocumentValues == null ? void 0 : assetDocumentValues.value) || void 0), [dialogState, setDialogState] = useDialogState(), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
+  const client = useClient(), secretDocumentValues = useSecretsDocumentValues(), assetDocumentValues = useAssetDocumentValues(props.value?.asset), poll = useMuxPolling(props.readOnly ? void 0 : assetDocumentValues?.value || void 0), [dialogState, setDialogState] = useDialogState(), error = secretDocumentValues.error || assetDocumentValues.error || poll.error;
   if (error)
     throw error;
   const isLoading = secretDocumentValues.isLoading || assetDocumentValues.isLoading;
   return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(ErrorBoundaryCard$1, { schemaType: props.schemaType, children: /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(InputFallback, {}), children: isLoading ? /* @__PURE__ */ jsx(InputFallback, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
     secretDocumentValues.value.needsSetup && !assetDocumentValues.value ? /* @__PURE__ */ jsx(Onboard, { setDialogState }) : /* @__PURE__ */ jsx(
       Uploader,
-      __spreadProps(__spreadValues$2({}, props), {
+      {
+        ...props,
         config: props.config,
         onChange: props.onChange,
         client,
@@ -4378,7 +3823,7 @@ const Input = (props) => {
         dialogState,
         setDialogState,
         needsSetup: secretDocumentValues.value.needsSetup
-      })
+      }
     ),
     dialogState === "secrets" && /* @__PURE__ */ jsx(
       ConfigureApi$1,
@@ -4389,18 +3834,11 @@ const Input = (props) => {
     )
   ] }) }) }) });
 };
-var Input$1 = memo(Input), __defProp$1 = Object.defineProperty, __getOwnPropSymbols$1 = Object.getOwnPropertySymbols, __hasOwnProp$1 = Object.prototype.hasOwnProperty, __propIsEnum$1 = Object.prototype.propertyIsEnumerable, __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues$1 = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp$1.call(b, prop) && __defNormalProp$1(a2, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b))
-      __propIsEnum$1.call(b, prop) && __defNormalProp$1(a2, prop, b[prop]);
-  return a2;
-};
+var Input$1 = memo(Input);
 function muxVideoCustomRendering(config) {
   return {
     components: {
-      input: (props) => /* @__PURE__ */ jsx(Input$1, __spreadValues$1({ config: __spreadValues$1(__spreadValues$1({}, config), props.schemaType.options) }, props))
+      input: (props) => /* @__PURE__ */ jsx(Input$1, { config: { ...config, ...props.schemaType.options }, ...props })
     },
     preview: {
       select: {
@@ -4588,16 +4026,7 @@ const muxVideoSchema = {
   muxStaticRenditions,
   muxAssetData,
   muxVideoAsset
-];
-var __defProp = Object.defineProperty, __getOwnPropSymbols = Object.getOwnPropertySymbols, __hasOwnProp = Object.prototype.hasOwnProperty, __propIsEnum = Object.prototype.propertyIsEnumerable, __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: !0, configurable: !0, writable: !0, value }) : obj[key] = value, __spreadValues = (a2, b) => {
-  for (var prop in b || (b = {}))
-    __hasOwnProp.call(b, prop) && __defNormalProp(a2, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b))
-      __propIsEnum.call(b, prop) && __defNormalProp(a2, prop, b[prop]);
-  return a2;
-};
-const defaultConfig = {
+], defaultConfig = {
   mp4_support: "none",
   encoding_tier: "smart",
   max_resolution_tier: "1080p",
@@ -4605,13 +4034,16 @@ const defaultConfig = {
   defaultSigned: !1,
   tool: DEFAULT_TOOL_CONFIG
 }, muxInput = definePlugin((userConfig) => {
-  const config = __spreadValues(__spreadValues({}, defaultConfig), userConfig || {});
+  const config = { ...defaultConfig, ...userConfig || {} };
   return {
     name: "mux-input",
     schema: {
       types: [
         ...schemaTypes,
-        __spreadValues(__spreadValues({}, muxVideoSchema), muxVideoCustomRendering(config))
+        {
+          ...muxVideoSchema,
+          ...muxVideoCustomRendering(config)
+        }
       ]
     },
     tools: config.tool === !1 ? void 0 : [createStudioTool(config)]