sanity-plugin-mux-input

5.0.85.0.9
dist/index.js
~dist/index.jsModified
+158−151
Index: package/dist/index.js
===================================================================
--- package/dist/index.js
+++ package/dist/index.js
@@ -1,11 +1,13 @@
+import "@sanity/ui/styles.css";
 import { DocumentPreviewPresence, FormField, LinearProgress, PatchEvent, PreviewCard, SanityDefaultPreview, TextWithTone, collate, createHookFromObservableFactory, definePlugin, getPreviewStateObservable, getPreviewValueWithFallback, isRecord, isReference, set, setIfMissing, truncateString, unset, useClient, useCurrentUser, useDataset, useDocumentPresence, useDocumentPreviewStore, useDocumentStore, useDocumentValues, useFormattedDuration, useProjectId, useSchema, useTimeAgo } from "sanity";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SearchIcon } from "@sanity/icons/Search";
-import { Autocomplete, Box, Button, Card, Checkbox, Code, Dialog, Flex, Grid, Heading, Inline, Label, Menu, MenuButton, MenuDivider, MenuItem, Popover, Radio, Spinner, Stack, Tab, TabList, TabPanel, Text, TextInput, Tooltip, rem, useClickOutsideEvent, useTheme_v2, useToast } from "@sanity/ui";
+import { Box, Button, Card, Checkbox, Dialog, Flex, Grid, Heading, Inline, Label, Radio, Spinner, Stack, Tab, TabList, TabPanel, Text, TextInput, rem, useClickOutsideEvent, useTheme_v2 } from "@sanity/ui";
 import { Suspense, createContext, isValidElement, memo, useCallback, useContext, useEffect, useId, useMemo, useReducer, useRef, useState } from "react";
 import { compact, isNumber, isString, toLower, trim, uniq, words } from "lodash";
+import { Code } from "@sanity/ui/code";
 import { clear, preload, suspend } from "suspend-react";
 import { Observable, Subject, concat, defer, from, of, throwError, timer } from "rxjs";
 import { css, styled } from "styled-components";
 import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
@@ -18,8 +20,10 @@
 import { ChevronLeftIcon } from "@sanity/icons/ChevronLeft";
 import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
 import { SyncIcon } from "@sanity/icons/Sync";
 import { SortIcon } from "@sanity/icons/Sort";
+import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
+import { Popover } from "@sanity/ui/popover";
 import { CalendarIcon } from "@sanity/icons/Calendar";
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 import { ClockIcon } from "@sanity/icons/Clock";
 import { CropIcon } from "@sanity/icons/Crop";
@@ -27,21 +31,24 @@
 import { RevertIcon } from "@sanity/icons/Revert";
 import { TagIcon } from "@sanity/icons/Tag";
 import { TrashIcon } from "@sanity/icons/Trash";
 import { DownloadIcon } from "@sanity/icons/Download";
+import { useToast } from "@sanity/ui/toast";
 import { AddIcon } from "@sanity/icons/Add";
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 import { ChevronUpIcon } from "@sanity/icons/ChevronUp";
 import { TranslateIcon } from "@sanity/icons/Translate";
 import { UploadIcon } from "@sanity/icons/Upload";
+import { Autocomplete } from "@sanity/ui/autocomplete";
 import LanguagesList from "iso-639-1";
 import "@mux/mux-player-react";
 import MuxPlayer from "@mux/mux-player-react/lazy";
 import { getDevicePixelRatio } from "use-device-pixel-ratio";
 import { DocumentIcon } from "@sanity/icons/Document";
 import { IntentLink } from "sanity/router";
 import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 import { useObservable } from "react-rx";
+import { Tooltip } from "@sanity/ui/tooltip";
 import { PublishIcon } from "@sanity/icons/Publish";
 import { LockIcon } from "@sanity/icons/Lock";
 import { PlayIcon } from "@sanity/icons/Play";
 import useSWR from "swr";
@@ -235,9 +242,9 @@
 	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx(Card, {
 		padding: t3,
 		radius: 2,
 		children: /* @__PURE__ */ jsx(Stack, {
-			space: 3,
+			gap: 3,
 			children: /* @__PURE__ */ jsx(Text, {
 				size: 1,
 				weight: "semibold",
 				children: "DRM-protected playback will generate a license with a small associated cost. The plugin will attempt to play signed or public playback IDs instead whenever possible."
@@ -251,16 +258,16 @@
 		3
 	], $[7] = t5) : t5 = $[7];
 	let t6;
 	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		padding: 3,
 		children: [t4, /* @__PURE__ */ jsx(Card, {
 			padding: t5,
 			radius: 2,
 			tone: "suggest",
 			children: /* @__PURE__ */ jsx(Stack, {
-				space: 3,
+				gap: 3,
 				children: /* @__PURE__ */ jsx(Text, {
 					size: 1,
 					weight: "semibold",
 					children: "This is a one time warning. If it persists, you can disable it from your plugin configuration."
@@ -369,9 +376,9 @@
 }
 function useDialogState() {
 	return useState(!1);
 }
-const PLUGIN_VERSION_QUERY = { sanityVersion: "5.0.8" };
+const PLUGIN_VERSION_QUERY = { sanityVersion: "5.0.9" };
 function saveSecrets(client, token, secretKey, enableSignedUrls, signingKeyId, signingKeyPrivate, drmConfigId) {
 	let doc = {
 		_id: "secrets.mux",
 		_type: "mux.apiKey",
@@ -600,18 +607,18 @@
 		children: /* @__PURE__ */ jsx(Box, {
 			flex: 1,
 			paddingY: 2,
 			children: /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [t1, t2]
 			})
 		})
 	}), $[7] = t1, $[8] = t2, $[9] = t3) : t3 = $[9];
 	let t4;
 	$[10] === children ? t4 = $[11] : (t4 = /* @__PURE__ */ jsx("div", { children }), $[10] = children, $[11] = t4);
 	let t5;
 	return $[12] !== t3 || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
-		space: 1,
+		gap: 1,
 		children: [t3, t4]
 	}), $[12] = t3, $[13] = t4, $[14] = t5) : t5 = $[14], t5;
 }
 var FormField_default = memo(FormField$1);
@@ -713,9 +720,9 @@
 		radius: 2,
 		shadow: 1,
 		tone: "primary",
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [/* @__PURE__ */ jsxs(Text, {
 				size: 1,
 				children: [
 					"To set up a new access token, go to your",
@@ -806,9 +813,9 @@
 		radius: 2,
 		shadow: 1,
 		tone: "caution",
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [
 				/* @__PURE__ */ jsx(Text, {
 					size: 1,
 					children: "The signing key ID that Sanity will use is:"
@@ -829,9 +836,9 @@
 		})
 	}) : null, $[49] = secrets.signingKeyId, $[50] = state.enableSignedUrls, $[51] = t24) : t24 = $[51];
 	let t25;
 	$[52] !== t23 || $[53] !== t24 ? (t25 = /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		children: [t23, t24]
 	}), $[52] = t23, $[53] = t24, $[54] = t25) : t25 = $[54];
 	let t26 = state.drmConfigId ?? "", t27;
 	$[55] !== drmConfigIdId || $[56] !== handleChangeDrmConfigId || $[57] !== t26 ? (t27 = /* @__PURE__ */ jsx(TextInput, {
@@ -874,9 +881,9 @@
 		radius: 2,
 		shadow: 1,
 		tone: "neutral",
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [t30, /* @__PURE__ */ jsxs(Text, {
 				size: 1,
 				children: [
 					/* @__PURE__ */ jsx("a", {
@@ -908,9 +915,9 @@
 		onClick: handleClose
 	}), $[68] = handleClose, $[69] = state.submitting, $[70] = t34) : t34 = $[70];
 	let t35;
 	$[71] !== t33 || $[72] !== t34 ? (t35 = /* @__PURE__ */ jsxs(Inline, {
-		space: 2,
+		gap: 2,
 		children: [t33, t34]
 	}), $[71] = t33, $[72] = t34, $[73] = t35) : t35 = $[73];
 	let t36;
 	$[74] === state.error ? t36 = $[75] : (t36 = state.error && /* @__PURE__ */ jsx(Card, {
@@ -925,9 +932,9 @@
 		children: /* @__PURE__ */ jsx(Text, { children: state.error })
 	}), $[74] = state.error, $[75] = t36);
 	let t37;
 	$[76] !== t11 || $[77] !== t15 || $[78] !== t19 || $[79] !== t25 || $[80] !== t28 || $[81] !== t35 || $[82] !== t36 ? (t37 = /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		children: [
 			t11,
 			t15,
 			t19,
@@ -1370,9 +1377,9 @@
 	}
 }
 const Image$1 = styled.img.withConfig({
 	displayName: "Image",
-	componentId: "sc-g6c5w6-0"
+	componentId: "sc-k2a3yq-0"
 })`transition:opacity 0.175s ease-out 0s;display:block;width:100%;height:100%;object-fit:contain;object-position:center center;`, STATUS_TO_TONE = {
 	loading: "transparent",
 	error: "critical",
 	loaded: "default"
@@ -1427,9 +1434,9 @@
 					},
 					children: /* @__PURE__ */ jsx(Spinner, {})
 				}),
 				status === "error" && /* @__PURE__ */ jsxs(Stack, {
-					space: 4,
+					gap: 4,
 					style: {
 						position: "absolute",
 						width: "100%",
 						left: 0,
@@ -1459,9 +1466,9 @@
 	});
 }
 const MissingAssetCheckbox = styled(Checkbox).withConfig({
 	displayName: "MissingAssetCheckbox",
-	componentId: "sc-sxsim2-0"
+	componentId: "sc-oxsyb-0"
 })`position:static !important;input::after{content:'';position:absolute;inset:0;display:block;cursor:pointer;z-index:1000;}`;
 function MissingAsset(t0) {
 	let $ = c(36), { asset, selectAsset, selected } = t0, duration = useFormattedDuration(asset.duration * 1e3), t1 = asset.id, t2 = selected ? "positive" : void 0, t3;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { position: "relative" }, $[0] = t3) : t3 = $[0];
@@ -1530,9 +1537,9 @@
 		]
 	}), $[23] = t13, $[24] = t14);
 	let t15;
 	$[25] !== t12 || $[26] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [t12, t14]
 	}), $[25] = t12, $[26] = t14, $[27] = t15) : t15 = $[27];
 	let t16;
 	$[28] !== t15 || $[29] !== t6 || $[30] !== t8 ? (t16 = /* @__PURE__ */ jsxs(Flex, {
@@ -1595,9 +1602,9 @@
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
 			children: [/* @__PURE__ */ jsx(InfoOutlineIcon, { fontSize: 36 }), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "Some videos were skipped"
@@ -1620,9 +1627,9 @@
 			children: [/* @__PURE__ */ jsx(Spinner, {
 				muted: !0,
 				size: 4
 			}), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "Loading assets from Mux"
@@ -1642,9 +1649,9 @@
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
 			children: [/* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "There was an error getting all data from Mux"
@@ -1667,9 +1674,9 @@
 			children: [/* @__PURE__ */ jsx(Spinner, {
 				muted: !0,
 				size: 4
 			}), /* @__PURE__ */ jsx(Stack, {
-				space: 2,
+				gap: 2,
 				children: /* @__PURE__ */ jsxs(Text, {
 					size: 2,
 					weight: "semibold",
 					children: [
@@ -1692,9 +1699,9 @@
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
 			children: [/* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [
 					/* @__PURE__ */ jsx(Text, {
 						size: 2,
 						weight: "semibold",
@@ -1720,9 +1727,9 @@
 	let t6;
 	$[25] !== importState || $[26] !== noAssetsToImport ? (t6 = (noAssetsToImport || importState === "done") && /* @__PURE__ */ jsxs(Stack, {
 		paddingY: 5,
 		marginBottom: 4,
-		space: 3,
+		gap: 3,
 		style: { textAlign: "center" },
 		children: [
 			/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
 			/* @__PURE__ */ jsx(Heading, {
@@ -1736,9 +1743,9 @@
 		]
 	}), $[25] = importState, $[26] = noAssetsToImport, $[27] = t6) : t6 = $[27];
 	let t7;
 	$[28] !== importState || $[29] !== props ? (t7 = props.missingAssets && props.missingAssets.length > 0 && (importState === "idle" || importState === "error") && /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		children: [
 			/* @__PURE__ */ jsxs(Heading, {
 				size: 1,
 				children: [
@@ -2037,9 +2044,9 @@
 		children: description
 	}), $[13] = description, $[14] = t8);
 	let t9;
 	$[15] !== t7 || $[16] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		flex: 1,
 		children: [t7, t8]
 	}), $[15] = t7, $[16] = t8, $[17] = t9) : t9 = $[17];
 	let t10;
@@ -2075,9 +2082,8 @@
 				break bb54;
 			case "fullResync":
 				props.syncFullData();
 				break bb54;
-			default:
 		}
 	}, $[4] = props, $[5] = selectedOption, $[6] = t2) : t2 = $[6];
 	let handleSync = t2, t3;
 	$[7] !== canTriggerResync || $[8] !== handleSync || $[9] !== isDone || $[10] !== isLoading || $[11] !== isResyncing || $[12] !== props.closeDialog ? (t3 = !isDone && /* @__PURE__ */ jsx(Card, {
@@ -2117,9 +2123,9 @@
 			children: [/* @__PURE__ */ jsx(Spinner, {
 				muted: !0,
 				size: 4
 			}), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "Loading assets from Mux"
@@ -2141,9 +2147,9 @@
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
 			children: [/* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "There was an error getting data from Mux"
@@ -2167,9 +2173,9 @@
 			children: [/* @__PURE__ */ jsx(Spinner, {
 				muted: !0,
 				size: 4
 			}), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "Syncing metadata"
@@ -2191,9 +2197,9 @@
 		children: /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
 			children: [/* @__PURE__ */ jsx(ErrorOutlineIcon, { fontSize: 36 }), /* @__PURE__ */ jsxs(Stack, {
-				space: 2,
+				gap: 2,
 				children: [/* @__PURE__ */ jsx(Text, {
 					size: 2,
 					weight: "semibold",
 					children: "There was an error syncing metadata"
@@ -2206,9 +2212,9 @@
 	}), $[20] = props.resyncError, $[21] = resyncState, $[22] = t7) : t7 = $[22];
 	let t8;
 	$[23] === resyncState ? t8 = $[24] : (t8 = resyncState === "done" && /* @__PURE__ */ jsxs(Stack, {
 		paddingY: 5,
-		space: 3,
+		gap: 3,
 		style: { textAlign: "center" },
 		children: [
 			/* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, { fontSize: 48 }) }),
 			/* @__PURE__ */ jsx(Heading, {
@@ -2223,9 +2229,9 @@
 		]
 	}), $[23] = resyncState, $[24] = t8);
 	let t9;
 	$[25] !== hasEmptyTitles || $[26] !== isDone || $[27] !== isLoading || $[28] !== isResyncing || $[29] !== props.muxAssets.error || $[30] !== selectedOption || $[31] !== videosToUpdate || $[32] !== videosWithEmptyOrPlaceholder ? (t9 = !isDone && !isLoading && !props.muxAssets.error && /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		children: [/* @__PURE__ */ jsxs(Text, {
 			size: 1,
 			muted: !0,
 			children: [
@@ -2235,9 +2241,9 @@
 				videosToUpdate === 1 ? "" : "s",
 				" linked to Mux."
 			]
 		}), /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [
 				hasEmptyTitles && /* @__PURE__ */ jsx(OptionCard, {
 					id: "fillEmpty",
 					selected: selectedOption === "fillEmpty",
@@ -2552,9 +2558,9 @@
 /** Explains what the mezzanine file is and how it differs from the streamable MP4 renditions. */
 function MezzanineExplanation() {
 	let $ = c(1), t0;
 	return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [/* @__PURE__ */ jsx(Text, {
 			size: 1,
 			muted: !0,
 			children: "When you enable the mezzanine file, Mux creates a copy equivalent in quality to your original video — ideal for offline editing or archiving. Unlike the streamable MP4 (static) renditions, it is not meant for streaming."
@@ -2604,16 +2610,16 @@
 		children: resolution
 	}), $[4] = resolution, $[5] = t6);
 	let t7;
 	$[6] !== t5 || $[7] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [t5, t6]
 	}), $[6] = t5, $[7] = t6, $[8] = t7) : t7 = $[8];
 	let t8;
 	$[9] !== showExplanation || $[10] !== withExplanation ? (t8 = withExplanation && showExplanation && /* @__PURE__ */ jsx(MezzanineExplanation, {}), $[9] = showExplanation, $[10] = withExplanation, $[11] = t8) : t8 = $[11];
 	let t9;
 	$[12] !== expired || $[13] !== showExplanation || $[14] !== status ? (t9 = showExplanation && (expired || status === "errored") && /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [expired && /* @__PURE__ */ jsx(Text, {
 			size: 1,
 			muted: !0,
 			children: "The previous mezzanine file expired. Enable it again to download."
@@ -2675,9 +2681,9 @@
 		radius: 2,
 		tone: "transparent",
 		border: !0,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 4,
+			gap: 4,
 			children: [
 				t3,
 				t7,
 				t8,
@@ -2977,12 +2983,12 @@
 		width: 1,
 		onClickOutside: onClose,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			padding: 4,
-			space: 4,
+			gap: 4,
 			children: [
 				/* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsxs(Flex, {
 						align: "center",
 						marginBottom: 3,
 						children: [/* @__PURE__ */ jsx(Checkbox, {
@@ -3001,9 +3007,9 @@
 								children: "Generate captions"
 							}) })
 						})]
 					}), !isAutogenerated && /* @__PURE__ */ jsxs(Stack, {
-						space: 2,
+						gap: 2,
 						children: [
 							/* @__PURE__ */ jsxs(Card, {
 								padding: 3,
 								marginBottom: 2,
@@ -3043,9 +3049,9 @@
 								style: { textAlign: "center" },
 								children: "Or enter the caption file URL"
 							}),
 							/* @__PURE__ */ jsxs(Stack, {
-								space: 2,
+								gap: 2,
 								children: [/* @__PURE__ */ jsx(Label, {
 									as: "label",
 									htmlFor: "vtt-url",
 									children: "Caption File URL (.vtt or .srt)"
@@ -3062,9 +3068,9 @@
 						]
 					})]
 				}),
 				/* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsx(Label, {
 						as: "label",
 						htmlFor: "caption-name",
 						children: "Audio name"
@@ -3100,9 +3106,9 @@
 						disabled: isSubmitting
 					})]
 				}),
 				/* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsx(Label, {
 						as: "label",
 						htmlFor: "caption-language",
 						children: "Language Code"
@@ -3335,12 +3341,12 @@
 		width: 1,
 		onClickOutside: onClose,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			padding: 4,
-			space: 4,
+			gap: 4,
 			children: [
 				/* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsxs(Card, {
 						padding: 3,
 						marginBottom: 2,
 						tone: "transparent",
@@ -3395,9 +3401,9 @@
 								children: ["Selected: ", selectedFile.name]
 							})
 						]
 					}), /* @__PURE__ */ jsxs(Stack, {
-						space: 2,
+						gap: 2,
 						children: [
 							/* @__PURE__ */ jsx(Label, {
 								as: "label",
 								htmlFor: "vtt-url",
@@ -3420,9 +3426,9 @@
 						]
 					})]
 				}),
 				/* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsx(Label, {
 						as: "label",
 						htmlFor: "caption-name",
 						children: "Audio name"
@@ -3458,9 +3464,9 @@
 						disabled: isSubmitting
 					})]
 				}),
 				/* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsx(Label, {
 						as: "label",
 						htmlFor: "caption-language",
 						children: "Language Code"
@@ -3619,9 +3625,9 @@
 		children: track.error.messages?.[0] || track.error.type || "Failed to process track"
 	}), $[29] = track.error, $[30] = track.status, $[31] = t11) : t11 = $[31];
 	let t12;
 	$[32] !== t10 || $[33] !== t11 || $[34] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		flex: 1,
 		children: [
 			t9,
 			t10,
@@ -3800,9 +3806,9 @@
 			return newMap_6.set(updatedTrack.id, prev_13.size + 1), newMap_6;
 		}), setTrackToEdit(null), await resyncAsset(asset);
 	}, getTrackSourceLabel = (track_10) => track_10.id && track_10.id.startsWith("generating-") || track_10.id && autogeneratedTrackIds.has(track_10.id) || track_10.text_source === "generated_live_final" || track_10.text_source === "generated_live" || track_10.text_source === "generated_vod" ? "Auto-generated" : track_10.text_source === "uploaded" ? "Uploaded" : "Custom";
 	if (visibleTracks.length === 0 && !showAddDialog) return /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [
 			/* @__PURE__ */ jsx(Flex, {
 				justify: "flex-end",
 				children: /* @__PURE__ */ jsx(Button, {
@@ -3831,9 +3837,9 @@
 		]
 	});
 	let displayedTracks = collapseTracks && !isExpanded ? visibleTracks.slice(0, 4) : visibleTracks, hasMoreTracks = collapseTracks && visibleTracks.length > 4;
 	return /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [
 			/* @__PURE__ */ jsx(Flex, {
 				justify: "flex-end",
 				children: /* @__PURE__ */ jsx(Button, {
@@ -3879,9 +3885,9 @@
 						alignItems: "center",
 						justifyContent: "center"
 					},
 					children: /* @__PURE__ */ jsxs(Stack, {
-						space: 3,
+						gap: 3,
 						children: [
 							/* @__PURE__ */ jsxs(Heading, {
 								size: 2,
 								children: [
@@ -3894,9 +3900,9 @@
 								size: 2,
 								children: "This action is irreversible"
 							}),
 							/* @__PURE__ */ jsx(Stack, {
-								space: 4,
+								gap: 4,
 								marginY: 4,
 								children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Button, {
 									icon: deletingTrackId === trackToDelete.id ? /* @__PURE__ */ jsx(Spinner, { style: {
 										verticalAlign: "middle",
@@ -4035,9 +4041,9 @@
 		children: "Current:"
 	}), $[18] = t10) : t10 = $[18];
 	let t11;
 	$[19] === asset ? t11 = $[20] : (t11 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [t10, /* @__PURE__ */ jsx(VideoThumbnail, {
 			asset,
 			width,
 			staticImage: !0
@@ -4050,18 +4056,18 @@
 		children: "New:"
 	}), $[21] = t12) : t12 = $[21];
 	let t13;
 	$[22] === assetWithNewThumbnail ? t13 = $[23] : (t13 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [t12, /* @__PURE__ */ jsx(VideoThumbnail, {
 			asset: assetWithNewThumbnail,
 			width,
 			staticImage: !0
 		})]
 	}), $[22] = assetWithNewThumbnail, $[23] = t13);
 	let t14;
 	$[24] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(Stack, {
-		space: 2,
+		gap: 2,
 		children: /* @__PURE__ */ jsx(Flex, {
 			align: "center",
 			justify: "center",
 			children: /* @__PURE__ */ jsx(Text, {
@@ -4078,9 +4084,9 @@
 		children: "Selected time for thumbnail (hh:mm:ss):"
 	}), $[25] = t15) : t15 = $[25];
 	let t16;
 	$[26] !== inputError || $[27] !== timeFormatted ? (t16 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [t15, /* @__PURE__ */ jsx(TextInput, {
 			size: 1,
 			value: timeFormatted,
 			placeholder: "hh:mm:ss",
@@ -4089,9 +4095,9 @@
 		})]
 	}), $[26] = inputError, $[27] = timeFormatted, $[28] = t16) : t16 = $[28];
 	let t17;
 	$[29] !== t11 || $[30] !== t13 || $[31] !== t16 ? (t17 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		padding: 3,
 		children: [
 			t11,
 			t13,
@@ -4146,9 +4152,9 @@
 	let t5;
 	$[9] !== t3 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, {
 		padding: 4,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 4,
+			gap: 4,
 			children: [t3, t4]
 		})
 	}), $[9] = t3, $[10] = t4, $[11] = t5) : t5 = $[11];
 	let t6;
@@ -4256,9 +4262,9 @@
 						preload: "metadata",
 						crossOrigin: "anonymous",
 						metadata: {
 							player_name: "Sanity Admin Dashboard",
-							player_version: "5.0.8",
+							player_version: "5.0.9",
 							page_type: "Preview Player"
 						},
 						audio: isAudio,
 						_hlsConfig: hlsConfig,
@@ -4382,9 +4388,9 @@
 		original: null
 	}, $[4] = t1) : t1 = $[4];
 	let { snapshot, original, isLoading } = useObservable(observable, t1), t2;
 	$[5] !== isLoading || $[6] !== original || $[7] !== presence || $[8] !== snapshot ? (t2 = isLoading ? null : /* @__PURE__ */ jsxs(Inline, {
-		space: 4,
+		gap: 4,
 		children: [
 			presence && presence.length > 0 && /* @__PURE__ */ jsx(DocumentPreviewPresence, { presence }),
 			/* @__PURE__ */ jsx(PublishedStatus, { document: original }),
 			/* @__PURE__ */ jsx(DraftStatus, { document: snapshot })
@@ -4475,19 +4481,22 @@
 	}
 	let T0, t0;
 	if ($[2] !== props.references || $[3] !== schema) {
 		let documentPairs = collate(props.references || []);
-		T0 = Container, t0 = documentPairs?.map((documentPair) => /* @__PURE__ */ jsx(Card, {
-			marginBottom: 2,
-			padding: 2,
-			radius: 2,
-			shadow: 1,
-			style: { overflow: "hidden" },
-			children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DocumentPreview, {
-				documentPair,
-				schemaType: schema.get(documentPair.type)
-			}) })
-		}, documentPair.id)), $[2] = props.references, $[3] = schema, $[4] = T0, $[5] = t0;
+		T0 = Container, t0 = documentPairs?.map((documentPair) => {
+			let schemaType = schema.get(documentPair.type);
+			return /* @__PURE__ */ jsx(Card, {
+				marginBottom: 2,
+				padding: 2,
+				radius: 2,
+				shadow: 1,
+				style: { overflow: "hidden" },
+				children: /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(DocumentPreview, {
+					documentPair,
+					schemaType
+				}) })
+			}, documentPair.id);
+		}), $[2] = props.references, $[3] = schema, $[4] = T0, $[5] = t0;
 	} else T0 = $[4], t0 = $[5];
 	let t1;
 	return $[6] !== T0 || $[7] !== t0 ? (t1 = /* @__PURE__ */ jsx(T0, { children: t0 }), $[6] = T0, $[7] = t0, $[8] = t1) : t1 = $[8], t1;
 };
@@ -4568,9 +4577,9 @@
 			size: 2,
 			children: "This action is irreversible"
 		}),
 		/* @__PURE__ */ jsxs(Stack, {
-			space: 4,
+			gap: 4,
 			marginY: 4,
 			children: [
 				/* @__PURE__ */ jsxs(Flex, {
 					align: "center",
@@ -4627,9 +4636,9 @@
 	$[30] !== t5 || $[31] !== t6 || $[32] !== t7 || $[33] !== t8 || $[34] !== t9 ? (t10 = /* @__PURE__ */ jsx(Card, {
 		padding: 3,
 		style: t4,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [
 				t5,
 				t6,
 				t7,
@@ -4862,9 +4871,9 @@
 		children: /* @__PURE__ */ jsx(Card, {
 			padding: 5,
 			children: /* @__PURE__ */ jsxs(Stack, {
 				style: { textAlign: "center" },
-				space: 3,
+				gap: 3,
 				children: [/* @__PURE__ */ jsx(Heading, {
 					size: 2,
 					children: "Unsaved changes will be lost"
 				}), /* @__PURE__ */ jsx(Text, {
@@ -4897,9 +4906,9 @@
 		tracks: displayInfo?.text_tracks || props.asset.data?.tracks?.filter(_temp$3) || []
 	}), /* @__PURE__ */ jsx(Mezzanine, { asset: props.asset })] }), $[39] = displayInfo.text_tracks, $[40] = props.asset, $[41] = tab, $[42] = t19) : t19 = $[42];
 	let t20;
 	$[43] !== t18 || $[44] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		flex: 1,
 		sizing: "border",
 		children: [t18, t19]
 	}), $[43] = t18, $[44] = t19, $[45] = t20) : t20 = $[45];
@@ -4926,9 +4935,9 @@
 		selected: t26
 	}), $[50] = t24, $[51] = t26, $[52] = t27) : t27 = $[52];
 	let t28;
 	$[53] !== t23 || $[54] !== t27 ? (t28 = /* @__PURE__ */ jsxs(TabList, {
-		space: 2,
+		gap: 2,
 		children: [t23, t27]
 	}), $[53] = t23, $[54] = t27, $[55] = t28) : t28 = $[55];
 	let t29 = tab !== "details", t30;
 	$[56] === Symbol.for("react.memo_cache_sentinel") ? (t30 = { wordBreak: "break-word" }, $[56] = t30) : t30 = $[56];
@@ -4990,9 +4999,9 @@
 	let t44;
 	$[77] === displayInfo.playback_ids ? t44 = $[78] : (t44 = /* @__PURE__ */ jsx(PlaybackIds, { playback_ids: displayInfo.playback_ids }), $[77] = displayInfo.playback_ids, $[78] = t44);
 	let t45;
 	$[79] !== t35 || $[80] !== t36 || $[81] !== t37 || $[82] !== t38 || $[83] !== t41 || $[84] !== t43 || $[85] !== t44 ? (t45 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [
 			t35,
 			t36,
 			t37,
@@ -5003,9 +5012,9 @@
 		]
 	}), $[79] = t35, $[80] = t36, $[81] = t37, $[82] = t38, $[83] = t41, $[84] = t43, $[85] = t44, $[86] = t45) : t45 = $[86];
 	let t46;
 	$[87] !== t34 || $[88] !== t45 ? (t46 = /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		children: [t34, t45]
 	}), $[87] = t34, $[88] = t45, $[89] = t46) : t46 = $[89];
 	let t47;
 	$[90] !== t29 || $[91] !== t46 ? (t47 = /* @__PURE__ */ jsx(TabPanel, {
@@ -5028,9 +5037,9 @@
 		children: t50
 	}), $[96] = t48, $[97] = t50, $[98] = t51) : t51 = $[98];
 	let t52;
 	$[99] !== t28 || $[100] !== t47 || $[101] !== t51 ? (t52 = /* @__PURE__ */ jsxs(Stack, {
-		space: 4,
+		gap: 4,
 		flex: 1,
 		sizing: "border",
 		children: [
 			t28,
@@ -5129,23 +5138,23 @@
 		}), $[0] = props.asset, $[1] = T0, $[2] = T1, $[3] = t0, $[4] = t1, $[5] = t2, $[6] = t3, $[7] = t4, $[8] = t5;
 	} else T0 = $[1], T1 = $[2], t0 = $[3], t1 = $[4], t2 = $[5], t3 = $[6], t4 = $[7], t5 = $[8];
 	let t6;
 	$[9] !== T0 || $[10] !== t0 || $[11] !== t1 || $[12] !== t2 || $[13] !== t3 ? (t6 = /* @__PURE__ */ jsxs(T0, {
-		space: t0,
+		gap: t0,
 		children: [
 			t1,
 			t2,
 			t3
 		]
 	}), $[9] = T0, $[10] = t0, $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t6) : t6 = $[14];
 	let t7;
 	return $[15] !== T1 || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T1, {
-		space: t4,
+		gap: t4,
 		children: [t5, t6]
 	}), $[15] = T1, $[16] = t4, $[17] = t5, $[18] = t6, $[19] = t7) : t7 = $[19], t7;
 }, PlayButton = styled.button.withConfig({
 	displayName: "PlayButton",
-	componentId: "sc-ge7115-0"
+	componentId: "sc-7mtgdn-0"
 })`display:block;padding:0;margin:0;border:none;border-radius:0.1875rem;position:relative;cursor:pointer;&::after{content:'';background:var(--card-fg-color);opacity:0;display:block;position:absolute;inset:0;z-index:10;transition:0.15s ease-out;border-radius:inherit;}> div[data-play]{z-index:11;opacity:0;transition:0.15s 0.05s ease-out;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--card-fg-color);background:var(--card-bg-color);width:auto;height:30%;aspect-ratio:1;border-radius:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;> svg{display:block;width:70%;height:auto;transform:translateX(5%);}}&:hover,&:focus{&::after{opacity:0.3;}> div[data-play]{opacity:1;}}`;
 function VideoInBrowser(t0) {
 	let $ = c(44), { onSelect, onEdit, asset } = t0, [renderVideo, setRenderVideo] = useState(!1), t1;
 	$[0] !== asset || $[1] !== onSelect ? (t1 = () => onSelect?.(asset), $[0] = asset, $[1] = onSelect, $[2] = t1) : t1 = $[2];
@@ -5297,9 +5306,9 @@
 		children: [t13, t15]
 	}), $[32] = t13, $[33] = t15, $[34] = t16) : t16 = $[34];
 	let t17;
 	$[35] !== t10 || $[36] !== t11 || $[37] !== t16 || $[38] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		height: "fill",
 		style: t8,
 		children: [
 			t9,
@@ -5358,9 +5367,9 @@
 		]
 	}), $[15] = t4, $[16] = t5, $[17] = t6, $[18] = t7) : t7 = $[18];
 	let t8;
 	$[19] === placement ? t8 = $[20] : (t8 = placement === "tool" && /* @__PURE__ */ jsxs(Inline, {
-		space: 2,
+		gap: 2,
 		children: [
 			/* @__PURE__ */ jsx(ImportVideosFromMux, {}),
 			/* @__PURE__ */ jsx(ResyncMetadata, {}),
 			/* @__PURE__ */ jsx(ConfigureApi, {})
@@ -5401,9 +5410,9 @@
 		children: t12
 	}), $[35] = t12, $[36] = t13);
 	let t14;
 	$[37] !== t10 || $[38] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [t10, t13]
 	}), $[37] = t10, $[38] = t13, $[39] = t14) : t14 = $[39];
 	let t15;
 	$[40] === isLoading ? t15 = $[41] : (t15 = isLoading && /* @__PURE__ */ jsx(SpinnerBox, {}), $[40] = isLoading, $[41] = t15);
@@ -5424,9 +5433,9 @@
 	}), $[42] = assets.length, $[43] = isLoading, $[44] = searchQuery, $[45] = t16) : t16 = $[45];
 	let t17;
 	$[46] !== t14 || $[47] !== t15 || $[48] !== t16 || $[49] !== t9 ? (t17 = /* @__PURE__ */ jsxs(Stack, {
 		padding: 4,
-		space: 4,
+		gap: 4,
 		style: t2,
 		children: [
 			t9,
 			t14,
@@ -5520,9 +5529,9 @@
 			title: "Plugin crashed",
 			description: /* @__PURE__ */ jsx(Flex, {
 				align: "center",
 				children: /* @__PURE__ */ jsxs(Inline, {
-					space: 1,
+					gap: 1,
 					children: ["An error happened while rendering", /* @__PURE__ */ jsx(Button, {
 						padding: 1,
 						fontSize: 1,
 						style: { transform: "translateY(1px)" },
@@ -5593,9 +5602,9 @@
 				justify: "flex-start",
 				align: "center",
 				height: "fill",
 				children: /* @__PURE__ */ jsxs(Grid, {
-					columns: 1,
+					gridTemplateColumns: 1,
 					gap: t3,
 					children: [
 						t4,
 						t5,
@@ -5702,9 +5711,9 @@
 			children: /* @__PURE__ */ jsx(Flex, {
 				justify: "flex-start",
 				align: "center",
 				children: /* @__PURE__ */ jsxs(Grid, {
-					columns: 1,
+					gridTemplateColumns: 1,
 					gap: t4,
 					children: [
 						t5,
 						t6,
@@ -5937,9 +5946,13 @@
 	};
 	return client.createOrReplace(doc).then(() => doc);
 }
 function testFile(file) {
-	return typeof window < "u" && file instanceof window.File ? of(optionsFromFile({}, file)) : throwError(/* @__PURE__ */ Error("Invalid file"));
+	if (typeof window < "u" && file instanceof window.File) {
+		let fileOptions = optionsFromFile({}, file);
+		return of(fileOptions);
+	}
+	return throwError(/* @__PURE__ */ Error("Invalid file"));
 }
 function testUrl(url) {
 	let error = /* @__PURE__ */ Error("Invalid URL");
 	if (typeof url != "string") return throwError(error);
@@ -6067,18 +6080,18 @@
 	displayName: "TopControls",
 	componentId: "sc-ix0w8t-0"
 })`position:absolute;top:0;right:0;justify-content:flex-end;button{height:auto;}`, CardWrapper = styled(Card).withConfig({
 	displayName: "CardWrapper",
-	componentId: "sc-qr7b8z-0"
+	componentId: "sc-0u5d20-0"
 })`min-height:82px;box-sizing:border-box;`, FlexWrapper = styled(Flex).withConfig({
 	displayName: "FlexWrapper",
-	componentId: "sc-qr7b8z-1"
+	componentId: "sc-0u5d20-1"
 })`text-overflow:ellipsis;overflow:hidden;`, LeftSection = styled(Stack).withConfig({
 	displayName: "LeftSection",
-	componentId: "sc-qr7b8z-2"
+	componentId: "sc-0u5d20-2"
 })`position:relative;width:60%;`, CodeWrapper = styled(Code).withConfig({
 	displayName: "CodeWrapper",
-	componentId: "sc-qr7b8z-3"
+	componentId: "sc-0u5d20-3"
 })`position:relative;width:100%;code{overflow:hidden;text-overflow:ellipsis;position:relative;max-width:200px;}`, UploadProgress = (t0) => {
 	let $ = c(18), { progress: t1, onCancel, filename, text: t2 } = t0, progress = t1 === void 0 ? 100 : t1, text = t2 === void 0 ? "Uploading" : t2, isCancelDisabled = progress >= 90, t3, t4;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [
 		3,
@@ -6102,9 +6115,9 @@
 		direction: t4,
 		children: /* @__PURE__ */ jsx(Text, {
 			size: 1,
 			children: /* @__PURE__ */ jsxs(Inline, {
-				space: 2,
+				gap: 2,
 				children: [text, t6]
 			})
 		})
 	}), $[4] = t6, $[5] = text, $[6] = t7) : t7 = $[6];
@@ -6197,9 +6210,9 @@
 	].filter(Boolean).join(",");
 }
 const FileButton = /* @__PURE__ */ styled(MenuItem).withConfig({
 	displayName: "FileButton",
-	componentId: "sc-p5t49j-0"
+	componentId: "sc-z3kv7d-0"
 })(({ theme }) => {
 	let { focusRing } = theme.sanity, base = theme.sanity.color.base;
 	return css`position:relative;&:not([data-disabled='true']){&:focus-within{box-shadow:${focusRingStyle({
 		base,
@@ -6260,12 +6273,12 @@
 	}), $[35] = content, $[36] = disabled, $[37] = id, $[38] = ref, $[39] = rest, $[40] = t5, $[41] = t6) : t6 = $[41], t6;
 }
 const LockCard = styled(Card).withConfig({
 	displayName: "LockCard",
-	componentId: "sc-nyv7im-0"
+	componentId: "sc-27tgc9-0"
 })`position:absolute;top:0;left:0;opacity:0.6;mix-blend-mode:screen;background:transparent;`, LockButton = styled(Button).withConfig({
 	displayName: "LockButton",
-	componentId: "sc-nyv7im-1"
+	componentId: "sc-27tgc9-1"
 })`background:transparent;color:white;`, isVideoAsset = (asset) => asset._type === "mux.videoAsset";
 function PlayerActionsMenu(props) {
 	let $ = c(54), { asset, readOnly, dialogState, setDialogState, onChange, onSelect, accept } = props, [open, setOpen] = useState(!1), [menuElement, setMenuRef] = useState(null), isSigned = getPlaybackPolicy(asset)?.policy === "signed", { hasConfigAccess } = useAccessControl(props.config), t0;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = { showToast: !0 }, $[0] = t0) : t0 = $[0];
@@ -6408,9 +6421,9 @@
 		children: t18
 	}), $[47] = open, $[48] = t17, $[49] = t18, $[50] = t19) : t19 = $[50];
 	let t20;
 	return $[51] !== t19 || $[52] !== t7 ? (t20 = /* @__PURE__ */ jsxs(Inline, {
-		space: 1,
+		gap: 1,
 		padding: 2,
 		children: [t7, t19]
 	}), $[51] = t19, $[52] = t7, $[53] = t20) : t20 = $[53], t20;
 }
@@ -6579,12 +6592,12 @@
 	return bytes.toFixed(dp) + " " + units[u];
 }
 const RangeInput = styled.input.withConfig({
 	displayName: "RangeInput",
-	componentId: "sc-pjtwrn-0"
+	componentId: "sc-kkmffp-0"
 })`width:100%;height:4px;border-radius:2px;background:var(--card-border-color);outline:none;-webkit-appearance:none;appearance:none;&::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--card-focus-ring-color,#2276fc);cursor:pointer;border:2px solid white;box-shadow:0 1px 3px rgba(0,0,0,0.2);}&:hover::-webkit-slider-thumb{background:var(--card-focus-ring-color,#1a5fc7);}&:hover::-moz-range-thumb{background:var(--card-focus-ring-color,#1a5fc7);}`, WatermarkOverlay = styled.div.withConfig({
 	displayName: "WatermarkOverlay",
-	componentId: "sc-pjtwrn-1"
+	componentId: "sc-kkmffp-1"
 })`position:absolute;max-width:200px;opacity:${(props) => props.$opacity};cursor:move;user-select:none;z-index:10;pointer-events:auto;img{width:100%;height:auto;display:block;pointer-events:none;}&:hover{outline:2px dashed rgba(255,255,255,0.8);outline-offset:4px;}`;
 function DraggableWatermark({ watermark, onChange, containerRef, videoElementRef }) {
 	let [isDragging, setIsDragging] = useState(!1), [dragStart, setDragStart] = useState({
 		x: 0,
@@ -6877,11 +6890,11 @@
 			height: contentH
 		};
 	};
 	return /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [/* @__PURE__ */ jsxs(Stack, {
-			space: 2,
+			gap: 2,
 			children: [
 				/* @__PURE__ */ jsx(Text, {
 					size: 1,
 					weight: "medium",
@@ -6970,9 +6983,9 @@
 					})
 				})
 			]
 		}), watermark.imageUrl && /* @__PURE__ */ jsxs(Stack, {
-			space: 2,
+			gap: 2,
 			children: [
 				/* @__PURE__ */ jsx(Card, {
 					padding: 3,
 					tone: "transparent",
@@ -6986,9 +6999,9 @@
 							flexWrap: "wrap",
 							alignItems: "flex-start"
 						},
 						children: [/* @__PURE__ */ jsxs(Stack, {
-							space: 2,
+							gap: 2,
 							style: {
 								minWidth: 240,
 								flex: 1
 							},
@@ -7047,22 +7060,22 @@
 					tone: "transparent",
 					border: !0,
 					radius: 2,
 					children: /* @__PURE__ */ jsxs(Stack, {
-						space: 3,
+						gap: 3,
 						children: [
 							/* @__PURE__ */ jsx(Text, {
 								size: 1,
 								weight: "medium",
 								children: "Mux overlay_settings"
 							}),
 							/* @__PURE__ */ jsxs(Grid, {
-								columns: [1, 2],
+								gridTemplateColumns: [1, 2],
 								gap: 3,
 								style: { width: "100%" },
 								children: [
 									/* @__PURE__ */ jsxs(Stack, {
-										space: 2,
+										gap: 2,
 										style: { minWidth: 0 },
 										children: [/* @__PURE__ */ jsx(Text, {
 											size: 0,
 											muted: !0,
@@ -7092,9 +7105,9 @@
 											]
 										})]
 									}),
 									/* @__PURE__ */ jsxs(Stack, {
-										space: 2,
+										gap: 2,
 										style: { minWidth: 0 },
 										children: [/* @__PURE__ */ jsx(Text, {
 											size: 0,
 											muted: !0,
@@ -7104,9 +7117,9 @@
 											onChange: (e_1) => updateOverlaySettings({ horizontal_margin: e_1.currentTarget.value })
 										})]
 									}),
 									/* @__PURE__ */ jsxs(Stack, {
-										space: 2,
+										gap: 2,
 										style: { minWidth: 0 },
 										children: [/* @__PURE__ */ jsx(Text, {
 											size: 0,
 											muted: !0,
@@ -7136,9 +7149,9 @@
 											]
 										})]
 									}),
 									/* @__PURE__ */ jsxs(Stack, {
-										space: 2,
+										gap: 2,
 										style: { minWidth: 0 },
 										children: [/* @__PURE__ */ jsx(Text, {
 											size: 0,
 											muted: !0,
@@ -7148,9 +7161,9 @@
 											onChange: (e_3) => updateOverlaySettings({ vertical_margin: e_3.currentTarget.value })
 										})]
 									}),
 									/* @__PURE__ */ jsxs(Stack, {
-										space: 2,
+										gap: 2,
 										style: { minWidth: 0 },
 										children: [/* @__PURE__ */ jsx(Text, {
 											size: 0,
 											muted: !0,
@@ -7160,9 +7173,9 @@
 											onChange: (e_4) => updateOverlaySettings({ width: e_4.currentTarget.value })
 										})]
 									}),
 									/* @__PURE__ */ jsxs(Stack, {
-										space: 2,
+										gap: 2,
 										style: { minWidth: 0 },
 										children: [/* @__PURE__ */ jsx(Text, {
 											size: 0,
 											muted: !0,
@@ -7324,9 +7337,9 @@
 	return $[15] !== t7 || $[16] !== t8 ? (t9 = /* @__PURE__ */ jsx(FormField, {
 		title: "Auto-generated subtitle or caption",
 		path: t1,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 2,
+			gap: 2,
 			children: [t7, t8]
 		})
 	}), $[15] = t7, $[16] = t8, $[17] = t9) : t9 = $[17], t9;
 }
@@ -7660,9 +7673,9 @@
 		value: "2160p",
 		label: "2160p"
 	}
 ], StaticRenditionSelector = (t0) => {
-	let $ = c(46), { id, config, dispatch } = t0, [renditionMode, setRenditionMode] = useState(config.static_renditions.filter(_temp).length > 0 ? "advanced" : "standard"), t1;
+	let $ = c(46), { id, config, dispatch } = t0, isAdvancedMode = config.static_renditions.filter(_temp).length > 0, [renditionMode, setRenditionMode] = useState(isAdvancedMode ? "advanced" : "standard"), t1;
 	$[0] !== config.static_renditions || $[1] !== dispatch ? (t1 = (rendition) => {
 		let current = config.static_renditions;
 		current.includes(rendition) ? dispatch({
 			action: "static_renditions",
@@ -7734,9 +7747,9 @@
 		children: [t10, t17]
 	}), $[29] = t10, $[30] = t17, $[31] = t18) : t18 = $[31];
 	let t19;
 	$[32] !== config.static_renditions || $[33] !== id || $[34] !== renditionMode || $[35] !== toggleRendition ? (t19 = renditionMode === "standard" && /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [/* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			gap: 2,
 			padding: [0, 2],
@@ -7767,9 +7780,9 @@
 		})]
 	}), $[32] = config.static_renditions, $[33] = id, $[34] = renditionMode, $[35] = toggleRendition, $[36] = t19) : t19 = $[36];
 	let t20;
 	$[37] !== config.static_renditions || $[38] !== id || $[39] !== renditionMode || $[40] !== toggleRendition ? (t20 = renditionMode === "advanced" && /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [
 			/* @__PURE__ */ jsx(Label, {
 				size: 1,
 				muted: !0,
@@ -7820,15 +7833,15 @@
 		]
 	}), $[37] = config.static_renditions, $[38] = id, $[39] = renditionMode, $[40] = toggleRendition, $[41] = t20) : t20 = $[41];
 	let t21;
 	return $[42] !== t18 || $[43] !== t19 || $[44] !== t20 ? (t21 = /* @__PURE__ */ jsx(Stack, {
-		space: 3,
+		gap: 3,
 		children: /* @__PURE__ */ jsx(FormField, {
 			path: t3,
 			title: "Static Renditions",
 			description: "Generate downloadable MP4 or M4A files. Note: Mux will not upscale to produce MP4 renditions - renditions that would cause upscaling are skipped.",
 			children: /* @__PURE__ */ jsxs(Stack, {
-				space: 3,
+				gap: 3,
 				children: [
 					t18,
 					t19,
 					t20
@@ -7922,9 +7935,8 @@
 						break;
 					case "delete":
 						if (target_track_i === -1) break;
 						text_tracks.splice(target_track_i, 1);
-						break;
 				}
 				return Object.assign({}, prev, { text_tracks });
 			}
 			default: return prev;
@@ -7944,9 +7956,9 @@
 			...old,
 			size: fileSize
 		}));
 	}, [fileSize, setVideoAssetMetadata]), useEffect(() => {
-		let validateDuration = (duration) => MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS ? (setValidationError(`Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`), !1) : !0, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE ? !0 : (setValidationError(`File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`), !1), validateDrmAvailability = (isAudioOnly) => config.drm_policy && isAudioOnly ? (setValidationError("Audio-only asset cannot be DRM protected"), !1) : !0, valid = !0;
+		let validateDuration = (duration) => MAX_DURATION_SECONDS && duration > MAX_DURATION_SECONDS ? (setValidationError(`Video duration (${formatSeconds(duration)}) exceeds maximum allowed duration of ${formatSeconds(MAX_DURATION_SECONDS)}`), !1) : !0, validateFileSize = (size) => MAX_FILE_SIZE === void 0 || size <= MAX_FILE_SIZE || (setValidationError(`File size (${formatBytes(size)}) exceeds maximum allowed size of ${formatBytes(MAX_FILE_SIZE)}`), !1), validateDrmAvailability = (isAudioOnly) => config.drm_policy && isAudioOnly ? (setValidationError("Audio-only asset cannot be DRM protected"), !1) : !0, valid = !0;
 		videoAssetMetadata?.size && (valid &&= canSkipFileSizeValidation || validateFileSize(videoAssetMetadata.size)), videoAssetMetadata?.duration && (valid &&= validateDuration(videoAssetMetadata.duration)), videoAssetMetadata?.isAudioOnly != null && (valid &&= validateDrmAvailability(videoAssetMetadata.isAudioOnly)), valid && setValidationError(null);
 	}, [
 		MAX_FILE_SIZE,
 		MAX_DURATION_SECONDS,
@@ -7976,9 +7988,9 @@
 		header: "Configure Mux Upload",
 		onClose,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			padding: 4,
-			space: 2,
+			gap: 2,
 			children: [
 				(validationError || watermarkValidationError) && /* @__PURE__ */ jsx(Card, {
 					padding: 3,
 					tone: "critical",
@@ -7990,9 +8002,9 @@
 						children: [/* @__PURE__ */ jsx(ErrorOutlineIcon, {
 							width: 20,
 							height: 20
 						}), /* @__PURE__ */ jsxs(Stack, {
-							space: 2,
+							gap: 2,
 							children: [/* @__PURE__ */ jsx(Text, {
 								size: 1,
 								weight: "semibold",
 								children: "Validation Error"
@@ -8015,9 +8027,9 @@
 					style: { borderRadius: "0.1865rem" },
 					children: /* @__PURE__ */ jsxs(Flex, {
 						gap: 2,
 						children: [/* @__PURE__ */ jsx(DocumentVideoIcon, { fontSize: "2em" }), /* @__PURE__ */ jsxs(Stack, {
-							space: 2,
+							gap: 2,
 							children: [
 								/* @__PURE__ */ jsx(Text, {
 									textOverflow: "ellipsis",
 									as: "h2",
@@ -8030,9 +8042,9 @@
 									muted: !0,
 									children: stagedUpload.type === "file" ? `Direct File Upload (${formatBytes(stagedUpload.files[0].size)})` : videoAssetMetadata?.size ? `File From URL (${formatBytes(videoAssetMetadata.size)})` : isLoadingFileSize ? "File From URL (Loading size...)" : "File From URL (Unknown size)"
 								}),
 								stagedUpload.type === "file" && /* @__PURE__ */ jsxs(Stack, {
-									space: 1,
+									gap: 1,
 									children: [isLoadingMetadata && /* @__PURE__ */ jsx(Text, {
 										as: "p",
 										size: 1,
 										muted: !0,
@@ -8048,9 +8060,9 @@
 						})]
 					})
 				}),
 				!disableUploadConfig && /* @__PURE__ */ jsxs(Stack, {
-					space: 3,
+					gap: 3,
 					paddingBottom: 2,
 					children: [/* @__PURE__ */ jsx(FormField, {
 						path: [],
 						title: "Video Quality Level",
@@ -8091,9 +8103,9 @@
 					}), !basicConfig && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FormField, {
 						title: "Additional Configuration",
 						path: [],
 						children: /* @__PURE__ */ jsxs(Stack, {
-							space: 3,
+							gap: 3,
 							children: [
 								/* @__PURE__ */ jsx(PlaybackPolicy, {
 									id,
 									config,
@@ -8249,9 +8261,9 @@
 		path: t1,
 		title: "Watermark",
 		description: t2,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [t5, t6]
 		})
 	}), $[19] = t5, $[20] = t6, $[21] = t7) : t7 = $[21], t7;
 }
@@ -8475,9 +8487,9 @@
 		title: "Configure plugin credentials"
 	}), $[17] = handleConfigureApi, $[18] = hasConfigAccess, $[19] = needsSetup, $[20] = t10) : t10 = $[20];
 	let t11;
 	$[21] !== t10 || $[22] !== t8 || $[23] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Inline, {
-		space: 2,
+		gap: 2,
 		children: [
 			t8,
 			t9,
 			t10
@@ -8590,18 +8602,16 @@
 					settings,
 					watermark
 				});
 				break;
-			case "file":
-				uploadObservable = uploadFile({
-					client: props.client,
-					file: stagedUpload.files[0],
-					settings,
-					watermark
-				}).pipe(takeUntil(cancelUploadButton.observable.pipe(tap(() => {
-					uploadingDocumentId.current &&= (props.client.delete(uploadingDocumentId.current), null);
-				}))));
-				break;
+			case "file": uploadObservable = uploadFile({
+				client: props.client,
+				file: stagedUpload.files[0],
+				settings,
+				watermark
+			}).pipe(takeUntil(cancelUploadButton.observable.pipe(tap(() => {
+				uploadingDocumentId.current &&= (props.client.delete(uploadingDocumentId.current), null);
+			}))));
 		}
 		uploadRef.current = uploadObservable.subscribe({
 			next: (event_0) => {
 				switch (event_0.type) {
@@ -8623,19 +8633,16 @@
 							action: "progress",
 							percent: event_0.percent
 						});
 						break;
-					case "success":
-						dispatch({
-							action: "progress",
-							percent: 100
-						}), uploadingDocumentId.current = null, props.onChange(PatchEvent.from([setIfMissing({ asset: {} }), set({
-							_type: "reference",
-							_weak: !0,
-							_ref: event_0.asset._id
-						}, ["asset"])]));
-						break;
-					default: break;
+					case "success": dispatch({
+						action: "progress",
+						percent: 100
+					}), uploadingDocumentId.current = null, props.onChange(PatchEvent.from([setIfMissing({ asset: {} }), set({
+						_type: "reference",
+						_weak: !0,
+						_ref: event_0.asset._id
+					}, ["asset"])]));
 				}
 			},
 			complete: () => dispatch({ action: "complete" }),
 			error: (error_0) => dispatch({