sanity-plugin-media 6.1.0 → 6.1.2

package/dist/index.js

@@ -1,8 +1,9 @@
+import "@sanity/ui/styles.css";
 import { EditIcon } from "@sanity/icons/Edit";
 import { ImageIcon } from "@sanity/icons/Image";
 import { Preview, WithReferringDocuments, definePlugin, useClient, useColorSchemeValue, useDocumentStore, useFormValue, useSchema } from "sanity";
 import { c } from "react/compiler-runtime";
-import { Box, Button, Card, Checkbox, Container, Dialog, Flex, Grid, Inline, Label, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, Popover, Portal, PortalProvider, Spinner, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, Tooltip, Tree, TreeItem, rem, studioTheme, useLayer, useMediaIndex, usePortal, useToast } from "@sanity/ui";
+import { Box, Button, Card, Checkbox, Container, Dialog, Flex, Grid, Inline, Label, Portal, PortalProvider, Spinner, Stack, Switch, Tab, TabList, TabPanel, Text, TextArea, TextInput, Tree, TreeItem, rem, studioTheme, useLayer, useMediaIndex, usePortal } from "@sanity/ui";
 import { createContext, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { Provider, useDispatch, useSelector, useStore } from "react-redux";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -15,16 +16,18 @@ import { bufferTime, catchError, concatMap, debounceTime, delay, filter, first,
 import { uuid } from "@sanity/uuid";
 import pluralize from "pluralize";
 import { createGlobalStyle, css, styled } from "styled-components";
-import { Controller, useForm } from "react-hook-form";
+import { Controller, useForm, useFormState } from "react-hook-form";
 import * as z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DownloadIcon } from "@sanity/icons/Download";
 import { format } from "date-fns/format";
 import filesize from "filesize";
 import { ClipboardIcon } from "@sanity/icons/Clipboard";
+import { Popover } from "@sanity/ui/popover";
 import copy from "copy-to-clipboard";
 import { useIntentLink } from "sanity/router";
 import { FileIcon, defaultStyles } from "react-file-icon";
+import { Tooltip } from "@sanity/ui/tooltip";
 import { hues, white } from "@sanity/color";
 import { FolderIcon } from "@sanity/icons/Folder";
 import { TrashIcon } from "@sanity/icons/Trash";
@@ -37,9 +40,11 @@ import Select, { components } from "react-select";
 import { GroupedVirtuoso, Virtuoso, VirtuosoGrid } from "react-virtuoso";
 import { CheckmarkCircleIcon } from "@sanity/icons/CheckmarkCircle";
 import { WarningFilledIcon } from "@sanity/icons/WarningFilled";
+import { useToast } from "@sanity/ui/toast";
 import { isHotkey } from "is-hotkey-esm";
 import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 import { SelectIcon } from "@sanity/icons/Select";
+import { Menu, MenuButton, MenuDivider, MenuGroup, MenuItem } from "@sanity/ui/menu";
 import { ArrowDownIcon } from "@sanity/icons/ArrowDown";
 import { ArrowUpIcon } from "@sanity/icons/ArrowUp";
 import { SearchIcon } from "@sanity/icons/Search";
@@ -1208,7 +1213,10 @@ const UPLOADS_ACTIONS = { uploadComplete: createAction("uploads/uploadComplete",
 	return of(assetsActions.listenerUpdateQueueComplete({ assets }));
 })), assetsSortEpic = (action$) => action$.pipe(ofType(assetsActions.insertUploads.type, assetsActions.listenerUpdateQueueComplete.type, assetsActions.updateComplete.type), mergeMap(() => of(assetsActions.sort()))), assetsTagsAddEpic = (action$, state$, { client }) => action$.pipe(filter(ASSETS_ACTIONS.tagsAddRequest.match), withLatestFrom(state$), mergeMap(([action, state]) => {
 	let { assets, tag } = action.payload;
-	return of(action).pipe(debugThrottle(state.debug.badConnection), mergeMap(() => from((selectAssetsPicked(state)?.filter(filterAssetWithoutTag(tag))).reduce((tx, pickedAsset) => tx.patch(pickedAsset?.asset?._id, patchOperationTagAppend({ tag })), client.transaction()).commit())), mergeMap(() => of(ASSETS_ACTIONS.tagsAddComplete({
+	return of(action).pipe(debugThrottle(state.debug.badConnection), mergeMap(() => {
+		let transaction = (selectAssetsPicked(state)?.filter(filterAssetWithoutTag(tag))).reduce((tx, pickedAsset) => tx.patch(pickedAsset?.asset?._id, patchOperationTagAppend({ tag })), client.transaction());
+		return from(transaction.commit());
+	}), mergeMap(() => of(ASSETS_ACTIONS.tagsAddComplete({
 		assets,
 		tag
 	}))), catchError((error) => of(ASSETS_ACTIONS.tagsAddError({
@@ -1221,10 +1229,13 @@ const UPLOADS_ACTIONS = { uploadComplete: createAction("uploads/uploadComplete",
 	}))));
 })), assetsTagsRemoveEpic = (action$, state$, { client }) => action$.pipe(filter(ASSETS_ACTIONS.tagsRemoveRequest.match), withLatestFrom(state$), mergeMap(([action, state]) => {
 	let { assets, tag } = action.payload;
-	return of(action).pipe(debugThrottle(state.debug.badConnection), mergeMap(() => from(selectAssetsPicked(state).reduce((tx, pickedAsset) => tx.patch(pickedAsset?.asset?._id, patchOperationTagUnset({
-		asset: pickedAsset,
-		tag
-	})), client.transaction()).commit())), mergeMap(() => of(ASSETS_ACTIONS.tagsRemoveComplete({
+	return of(action).pipe(debugThrottle(state.debug.badConnection), mergeMap(() => {
+		let transaction = selectAssetsPicked(state).reduce((tx, pickedAsset) => tx.patch(pickedAsset?.asset?._id, patchOperationTagUnset({
+			asset: pickedAsset,
+			tag
+		})), client.transaction());
+		return from(transaction.commit());
+	}), mergeMap(() => of(ASSETS_ACTIONS.tagsRemoveComplete({
 		assets,
 		tag
 	}))), catchError((error) => of(ASSETS_ACTIONS.tagsRemoveError({
@@ -1237,10 +1248,13 @@ const UPLOADS_ACTIONS = { uploadComplete: createAction("uploads/uploadComplete",
 	}))));
 })), assetsFolderSetEpic = (action$, state$, { client }) => action$.pipe(filter(assetsActions.folderSetRequest.match), withLatestFrom(state$), mergeMap(([action, state]) => {
 	let { assets, closeDialogId, folderId } = action.payload, assetIds = assets.map((asset) => asset.asset._id);
-	return of(action).pipe(debugThrottle(state.debug.badConnection), mergeMap(() => from(assets.reduce((tx, asset) => tx.patch(asset.asset._id, patchOperationFolderSet({
-		asset,
-		folderId
-	})), client.transaction()).commit())), mergeMap(() => of(assetsActions.folderSetComplete({
+	return of(action).pipe(debugThrottle(state.debug.badConnection), mergeMap(() => {
+		let transaction = assets.reduce((tx, asset) => tx.patch(asset.asset._id, patchOperationFolderSet({
+			asset,
+			folderId
+		})), client.transaction());
+		return from(transaction.commit());
+	}), mergeMap(() => of(assetsActions.folderSetComplete({
 		assetIds,
 		closeDialogId,
 		folderId
@@ -1540,18 +1554,18 @@ const initialState = {
 		path: buildFolderPath(id, byId),
 		totalCount: 0
 	}));
-}), selectCurrentFolderChildren = createSelector([
-	createSelector([
-		selectById,
-		selectChildrenByParentId,
-		selectRootIds,
-		selectExactCountByFolderId
-	], (byId, childrenByParentId, rootIds, exactCountByFolderId) => ({
-		byId,
-		childrenByParentId,
-		rootIds,
-		exactCountByFolderId
-	})),
+}), selectFoldersIndex = createSelector([
+	selectById,
+	selectChildrenByParentId,
+	selectRootIds,
+	selectExactCountByFolderId
+], (byId, childrenByParentId, rootIds, exactCountByFolderId) => ({
+	byId,
+	childrenByParentId,
+	rootIds,
+	exactCountByFolderId
+})), selectCurrentFolderChildren = createSelector([
+	selectFoldersIndex,
 	selectCurrentFolderId,
 	selectCurrentFolderUnfiled
 ], ({ byId, childrenByParentId, rootIds, exactCountByFolderId }, currentFolderId, currentFolderUnfiled) => {
@@ -1831,7 +1845,7 @@ const imageDprUrl = (asset, options) => {
 	return urlParams.append("fit", "max"), urlParams.append("w", imgW.toString()), imgH && urlParams.append("h", imgH.toString()), `${asset.url}?${urlParams.toString()}`;
 }, sanitizeFormData = (formData) => Object.keys(formData).reduce((acc, key) => {
 	let val = formData[key];
-	return typeof val == "object" && val && val.constructor !== Array ? acc[key] = sanitizeFormData(val) : val === "" || val === void 0 || val?.length === 0 ? acc[key] = null : typeof val == "string" && val ? acc[key] = formData[key].trim() : acc[key] = formData[key], acc;
+	return acc[key] = typeof val == "object" && val && val.constructor !== Array ? sanitizeFormData(val) : val === "" || val === void 0 || val?.length === 0 ? null : typeof val == "string" && val ? formData[key].trim() : formData[key], acc;
 }, {}), isFileAsset = (asset) => asset._type === "sanity.fileAsset", isImageAsset = (asset) => asset._type === "sanity.imageAsset";
 /**
 * `@hookform/resolvers/zod` resolves its own `zod` typings through dependency
@@ -1955,7 +1969,7 @@ const ButtonAssetCopy = (t0) => {
 	}), $[13] = asset, $[14] = t8);
 	let t9;
 	$[15] !== t3 || $[16] !== t5 || $[17] !== t7 || $[18] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [
 			t3,
 			t5,
@@ -1972,7 +1986,7 @@ const ButtonAssetCopy = (t0) => {
 			width: "100%"
 		}
 	}), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [
 			exif.ISO && /* @__PURE__ */ jsx(Row, {
 				label: "ISO",
@@ -2014,7 +2028,7 @@ const ButtonAssetCopy = (t0) => {
 	$[28] !== t12 || $[29] !== t14 ? (t15 = /* @__PURE__ */ jsx(Box, {
 		marginTop: 5,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			children: [t12, t14]
 		})
 	}), $[28] = t12, $[29] = t14, $[30] = t15) : t15 = $[30];
@@ -2066,7 +2080,7 @@ const ButtonAssetCopy = (t0) => {
 		radius: 2,
 		shadow: 1,
 		children: /* @__PURE__ */ jsx(Stack, {
-			space: 2,
+			gap: 2,
 			children: t1
 		})
 	}), $[5] = t1, $[6] = t2), t2;
@@ -2244,7 +2258,7 @@ const Image$1 = styled.img.attrs({ crossOrigin: "anonymous" }).withConfig({
 	componentId: "sc-xak9t2-0"
 })`--checkerboard-color:${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};display:block;width:100%;height:100%;object-fit:contain;${(props) => props.$showCheckerboard && css`background-image:linear-gradient(45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(-45deg,var(--checkerboard-color) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checkerboard-color) 75%),linear-gradient(-45deg,transparent 75%,var(--checkerboard-color) 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0;`}`, StyledErrorOutlineIcon = /* @__PURE__ */ styled(ErrorOutlineIcon).withConfig({
 	displayName: "StyledErrorOutlineIcon",
-	componentId: "sc-g4wo97-0"
+	componentId: "sc-5i8ed3-0"
 })(({ theme }) => ({ color: theme.sanity.color.spot.red })), FormFieldInputLabel = (props) => {
 	let $ = c(14), { description, error, label, name } = props, t0;
 	$[0] !== label || $[1] !== name ? (t0 = /* @__PURE__ */ jsx(Text, {
@@ -2277,7 +2291,7 @@ const Image$1 = styled.img.attrs({ crossOrigin: "anonymous" }).withConfig({
 	$[5] !== t0 || $[6] !== t1 ? (t2 = /* @__PURE__ */ jsx(Box, {
 		marginY: 3,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			children: [t0, t1]
 		})
 	}), $[5] = t0, $[6] = t1, $[7] = t2) : t2 = $[7];
@@ -2515,17 +2529,17 @@ function _temp3$10() {
 	return "No tags";
 }
 const FormFieldInputText = (props) => {
-	let $ = c(25), description, disabled, error, label, name, placeholder, ref, rest, value;
-	$[0] === props ? (description = $[1], disabled = $[2], error = $[3], label = $[4], name = $[5], placeholder = $[6], ref = $[7], rest = $[8], value = $[9]) : ({description, disabled, error, label, name, placeholder, value, ref, ...rest} = props, $[0] = props, $[1] = description, $[2] = disabled, $[3] = error, $[4] = label, $[5] = name, $[6] = placeholder, $[7] = ref, $[8] = rest, $[9] = value);
+	let $ = c(29), description, disabled, error, label, name, onBlur, onChange, placeholder, ref, rest, value;
+	$[0] === props ? (description = $[1], disabled = $[2], error = $[3], label = $[4], name = $[5], onBlur = $[6], onChange = $[7], placeholder = $[8], ref = $[9], rest = $[10], value = $[11]) : ({description, disabled, error, label, name, onBlur, onChange, placeholder, value, ref, ...rest} = props, $[0] = props, $[1] = description, $[2] = disabled, $[3] = error, $[4] = label, $[5] = name, $[6] = onBlur, $[7] = onChange, $[8] = placeholder, $[9] = ref, $[10] = rest, $[11] = value);
 	let t0;
-	$[10] !== description || $[11] !== error || $[12] !== label || $[13] !== name ? (t0 = /* @__PURE__ */ jsx(FormFieldInputLabel, {
+	$[12] !== description || $[13] !== error || $[14] !== label || $[15] !== name ? (t0 = /* @__PURE__ */ jsx(FormFieldInputLabel, {
 		description,
 		error,
 		label,
 		name
-	}), $[10] = description, $[11] = error, $[12] = label, $[13] = name, $[14] = t0) : t0 = $[14];
+	}), $[12] = description, $[13] = error, $[14] = label, $[15] = name, $[16] = t0) : t0 = $[16];
 	let t1;
-	$[15] !== disabled || $[16] !== name || $[17] !== placeholder || $[18] !== ref || $[19] !== rest || $[20] !== value ? (t1 = /* @__PURE__ */ jsx(TextInput, {
+	$[17] !== disabled || $[18] !== name || $[19] !== onBlur || $[20] !== onChange || $[21] !== placeholder || $[22] !== ref || $[23] !== rest || $[24] !== value ? (t1 = /* @__PURE__ */ jsx(TextInput, {
 		...rest,
 		autoComplete: "off",
 		autoFocus: !0,
@@ -2533,35 +2547,39 @@ const FormFieldInputText = (props) => {
 		disabled,
 		id: name,
 		name,
+		onBlur,
+		onChange,
 		placeholder,
 		ref
-	}), $[15] = disabled, $[16] = name, $[17] = placeholder, $[18] = ref, $[19] = rest, $[20] = value, $[21] = t1) : t1 = $[21];
+	}), $[17] = disabled, $[18] = name, $[19] = onBlur, $[20] = onChange, $[21] = placeholder, $[22] = ref, $[23] = rest, $[24] = value, $[25] = t1) : t1 = $[25];
 	let t2;
-	return $[22] !== t0 || $[23] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Box, { children: [t0, t1] }), $[22] = t0, $[23] = t1, $[24] = t2) : t2 = $[24], t2;
+	return $[26] !== t0 || $[27] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Box, { children: [t0, t1] }), $[26] = t0, $[27] = t1, $[28] = t2) : t2 = $[28], t2;
 }, FormFieldInputTextarea = (props) => {
-	let $ = c(27), description, disabled, error, label, name, placeholder, ref, rest, rows, value;
-	$[0] === props ? (description = $[1], disabled = $[2], error = $[3], label = $[4], name = $[5], placeholder = $[6], ref = $[7], rest = $[8], rows = $[9], value = $[10]) : ({description, disabled, error, label, name, placeholder, rows, value, ref, ...rest} = props, $[0] = props, $[1] = description, $[2] = disabled, $[3] = error, $[4] = label, $[5] = name, $[6] = placeholder, $[7] = ref, $[8] = rest, $[9] = rows, $[10] = value);
+	let $ = c(31), description, disabled, error, label, name, onBlur, onChange, placeholder, ref, rest, rows, value;
+	$[0] === props ? (description = $[1], disabled = $[2], error = $[3], label = $[4], name = $[5], onBlur = $[6], onChange = $[7], placeholder = $[8], ref = $[9], rest = $[10], rows = $[11], value = $[12]) : ({description, disabled, error, label, name, onBlur, onChange, placeholder, rows, value, ref, ...rest} = props, $[0] = props, $[1] = description, $[2] = disabled, $[3] = error, $[4] = label, $[5] = name, $[6] = onBlur, $[7] = onChange, $[8] = placeholder, $[9] = ref, $[10] = rest, $[11] = rows, $[12] = value);
 	let t0;
-	$[11] !== description || $[12] !== error || $[13] !== label || $[14] !== name ? (t0 = /* @__PURE__ */ jsx(FormFieldInputLabel, {
+	$[13] !== description || $[14] !== error || $[15] !== label || $[16] !== name ? (t0 = /* @__PURE__ */ jsx(FormFieldInputLabel, {
 		description,
 		error,
 		label,
 		name
-	}), $[11] = description, $[12] = error, $[13] = label, $[14] = name, $[15] = t0) : t0 = $[15];
+	}), $[13] = description, $[14] = error, $[15] = label, $[16] = name, $[17] = t0) : t0 = $[17];
 	let t1;
-	$[16] !== disabled || $[17] !== name || $[18] !== placeholder || $[19] !== ref || $[20] !== rest || $[21] !== rows || $[22] !== value ? (t1 = /* @__PURE__ */ jsx(TextArea, {
+	$[18] !== disabled || $[19] !== name || $[20] !== onBlur || $[21] !== onChange || $[22] !== placeholder || $[23] !== ref || $[24] !== rest || $[25] !== rows || $[26] !== value ? (t1 = /* @__PURE__ */ jsx(TextArea, {
 		...rest,
 		autoComplete: "off",
 		defaultValue: value,
 		disabled,
 		id: name,
 		name,
+		onBlur,
+		onChange,
 		placeholder,
 		ref,
 		rows
-	}), $[16] = disabled, $[17] = name, $[18] = placeholder, $[19] = ref, $[20] = rest, $[21] = rows, $[22] = value, $[23] = t1) : t1 = $[23];
+	}), $[18] = disabled, $[19] = name, $[20] = onBlur, $[21] = onChange, $[22] = placeholder, $[23] = ref, $[24] = rest, $[25] = rows, $[26] = value, $[27] = t1) : t1 = $[27];
 	let t2;
-	return $[24] !== t0 || $[25] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Box, { children: [t0, t1] }), $[24] = t0, $[25] = t1, $[26] = t2) : t2 = $[26], t2;
+	return $[28] !== t0 || $[29] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Box, { children: [t0, t1] }), $[28] = t0, $[29] = t1, $[30] = t2) : t2 = $[30], t2;
 };
 function toStringField(value) {
 	if (typeof value == "string") return value;
@@ -2575,201 +2593,180 @@ function truncateFolderPath(path) {
 		...segments.slice(-2)
 	].join("/");
 }
-function Details(t0) {
-	let $ = c(56), { formUpdating, handleCreateTag, control, errors, register, allTagOptions, assetTagOptions, currentAsset, folderPath, folderMissing, onChangeFolder, onRemoveFolder, creditLine, locales } = t0, hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = useState(0), folderId = currentAsset?.opt?.media?.folder?._ref, t1;
-	$[0] !== folderMissing || $[1] !== folderPath ? (t1 = truncateFolderPath(folderPath) || (folderMissing ? "Folder no longer exists" : "No folder"), $[0] = folderMissing, $[1] = folderPath, $[2] = t1) : t1 = $[2];
-	let folderLabel = t1, t2 = errors?.opt?.media?.tags?.message, t3;
-	$[3] !== allTagOptions || $[4] !== assetTagOptions || $[5] !== control || $[6] !== formUpdating || $[7] !== handleCreateTag || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(FormFieldInputTags, {
-		control,
-		disabled: formUpdating,
-		error: t2,
-		label: "Tags",
-		name: "opt.media.tags",
-		onCreateTag: handleCreateTag,
-		options: allTagOptions,
-		placeholder: "Select or create...",
-		value: assetTagOptions
-	}), $[3] = allTagOptions, $[4] = assetTagOptions, $[5] = control, $[6] = formUpdating, $[7] = handleCreateTag, $[8] = t2, $[9] = t3) : t3 = $[9];
-	let t4;
-	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx(FormFieldInputLabel, {
-		label: "Folder",
-		name: "folder"
-	}), $[10] = t4) : t4 = $[10];
-	let t5, t6;
-	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = {
-		minWidth: 0,
-		overflowX: "auto",
-		whiteSpace: "nowrap",
-		overflowY: "hidden"
-	}, t6 = /* @__PURE__ */ jsx(FolderIcon, {}), $[11] = t5, $[12] = t6) : (t5 = $[11], t6 = $[12]);
-	let t7 = !folderId, t8;
-	$[13] !== folderLabel || $[14] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
-		gap: 2,
-		flex: 1,
-		style: t5,
-		children: [t6, /* @__PURE__ */ jsx(Text, {
-			muted: t7,
-			size: 1,
-			children: folderLabel
-		})]
-	}), $[13] = folderLabel, $[14] = t7, $[15] = t8) : t8 = $[15];
-	let t9;
-	$[16] !== folderId || $[17] !== formUpdating || $[18] !== onRemoveFolder ? (t9 = folderId && /* @__PURE__ */ jsx(Button, {
-		"aria-label": "Remove from folder",
-		disabled: formUpdating,
-		fontSize: 1,
-		icon: TrashIcon,
-		mode: "bleed",
-		onClick: onRemoveFolder,
-		padding: 2,
-		tone: "critical",
-		type: "button"
-	}), $[16] = folderId, $[17] = formUpdating, $[18] = onRemoveFolder, $[19] = t9) : t9 = $[19];
-	let t10 = folderId ? "Change folder" : "Add to folder", t11;
-	$[20] !== formUpdating || $[21] !== onChangeFolder || $[22] !== t10 ? (t11 = /* @__PURE__ */ jsx(Button, {
-		padding: 2,
-		disabled: formUpdating,
-		fontSize: 1,
-		mode: "ghost",
-		onClick: onChangeFolder,
-		text: t10,
-		type: "button"
-	}), $[20] = formUpdating, $[21] = onChangeFolder, $[22] = t10, $[23] = t11) : t11 = $[23];
-	let t12;
-	$[24] !== t11 || $[25] !== t8 || $[26] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Box, { children: [t4, /* @__PURE__ */ jsx(Card, {
-		border: !0,
-		padding: 2,
-		radius: 2,
-		children: /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: 3,
-			justify: "space-between",
-			children: [
-				t8,
-				t9,
-				t11
-			]
-		})
-	})] }), $[24] = t11, $[25] = t8, $[26] = t9, $[27] = t12) : t12 = $[27];
-	let t13;
-	$[28] === register ? t13 = $[29] : (t13 = register("originalFilename"), $[28] = register, $[29] = t13);
-	let t14 = errors?.originalFilename?.message, t15 = currentAsset?.originalFilename, t16;
-	$[30] !== formUpdating || $[31] !== t13 || $[32] !== t14 || $[33] !== t15 ? (t16 = /* @__PURE__ */ jsx(FormFieldInputText, {
-		...t13,
-		disabled: formUpdating,
-		error: t14,
-		label: "Filename",
-		name: "originalFilename",
-		value: t15
-	}), $[30] = formUpdating, $[31] = t13, $[32] = t14, $[33] = t15, $[34] = t16) : t16 = $[34];
-	let t17;
-	$[35] !== activeLocaleTab || $[36] !== creditLine?.enabled || $[37] !== creditLine?.excludeSources || $[38] !== currentAsset?.altText || $[39] !== currentAsset?.creditLine || $[40] !== currentAsset?.source?.name || $[41] !== currentAsset?.title || $[42] !== errors?.altText || $[43] !== errors?.creditLine || $[44] !== errors?.description || $[45] !== errors?.title || $[46] !== formUpdating || $[47] !== hasLocales || $[48] !== locales || $[49] !== register ? (t17 = hasLocales ? /* @__PURE__ */ jsx(Card, {
-		marginTop: 2,
-		shadow: 1,
-		padding: 3,
-		radius: 1,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 2,
-			children: [/* @__PURE__ */ jsx(TabList, {
-				space: 2,
-				children: locales.map((locale, idx) => /* @__PURE__ */ jsx(Tab, {
-					id: `locale-tab-${locale.id}`,
-					"aria-controls": `locale-panel-${locale.id}`,
-					selected: activeLocaleTab === idx,
-					onClick: () => setActiveLocaleTab(idx),
-					label: locale.title
-				}, locale.id))
-			}), locales.map((locale_0, idx_0) => /* @__PURE__ */ jsx(TabPanel, {
-				id: `locale-panel-${locale_0.id}`,
-				"aria-labelledby": `locale-tab-${locale_0.id}`,
-				hidden: activeLocaleTab !== idx_0,
-				children: /* @__PURE__ */ jsxs(Stack, {
-					space: 3,
+function Details({ formUpdating, handleCreateTag, control, errors, register, allTagOptions, assetTagOptions, currentAsset, folderPath, folderMissing, onChangeFolder, onRemoveFolder, creditLine, locales }) {
+	"use no memo";
+	let hasLocales = locales && locales.length > 0, [activeLocaleTab, setActiveLocaleTab] = useState(0), folderId = currentAsset?.opt?.media?.folder?._ref, folderLabel = truncateFolderPath(folderPath) || (folderMissing ? "Folder no longer exists" : "No folder");
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [
+			/* @__PURE__ */ jsx(FormFieldInputTags, {
+				control,
+				disabled: formUpdating,
+				error: errors?.opt?.media?.tags?.message,
+				label: "Tags",
+				name: "opt.media.tags",
+				onCreateTag: handleCreateTag,
+				options: allTagOptions,
+				placeholder: "Select or create...",
+				value: assetTagOptions
+			}),
+			/* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(FormFieldInputLabel, {
+				label: "Folder",
+				name: "folder"
+			}), /* @__PURE__ */ jsx(Card, {
+				border: !0,
+				padding: 2,
+				radius: 2,
+				children: /* @__PURE__ */ jsxs(Flex, {
+					align: "center",
+					gap: 3,
+					justify: "space-between",
 					children: [
-						/* @__PURE__ */ jsx(FormFieldInputText, {
-							...register(`title.${locale_0.id}`),
-							disabled: formUpdating,
-							error: (errors?.title)?.[locale_0.id]?.message,
-							label: "Title",
-							name: `title.${locale_0.id}`
+						/* @__PURE__ */ jsxs(Flex, {
+							align: "center",
+							gap: 2,
+							flex: 1,
+							style: {
+								minWidth: 0,
+								overflowX: "auto",
+								whiteSpace: "nowrap",
+								overflowY: "hidden"
+							},
+							children: [/* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx(Text, {
+								muted: !folderId,
+								size: 1,
+								children: folderLabel
+							})]
 						}),
-						/* @__PURE__ */ jsx(FormFieldInputText, {
-							...register(`altText.${locale_0.id}`),
+						folderId && /* @__PURE__ */ jsx(Button, {
+							"aria-label": "Remove from folder",
 							disabled: formUpdating,
-							error: (errors?.altText)?.[locale_0.id]?.message,
-							label: "Alt Text",
-							name: `altText.${locale_0.id}`
+							fontSize: 1,
+							icon: TrashIcon,
+							mode: "bleed",
+							onClick: onRemoveFolder,
+							padding: 2,
+							tone: "critical",
+							type: "button"
 						}),
-						/* @__PURE__ */ jsx(FormFieldInputTextarea, {
-							...register(`description.${locale_0.id}`),
+						/* @__PURE__ */ jsx(Button, {
+							padding: 2,
 							disabled: formUpdating,
-							error: (errors?.description)?.[locale_0.id]?.message,
-							label: "Description",
-							name: `description.${locale_0.id}`,
-							rows: 5
-						}),
-						creditLine?.enabled && /* @__PURE__ */ jsx(FormFieldInputText, {
-							...register(`creditLine.${locale_0.id}`),
-							error: (errors?.creditLine)?.[locale_0.id]?.message,
-							label: "Credit",
-							name: `creditLine.${locale_0.id}`,
-							disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+							fontSize: 1,
+							mode: "ghost",
+							onClick: onChangeFolder,
+							text: folderId ? "Change folder" : "Add to folder",
+							type: "button"
 						})
 					]
 				})
-			}, locale_0.id))]
-		})
-	}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-		/* @__PURE__ */ jsx(FormFieldInputText, {
-			...register("title"),
-			disabled: formUpdating,
-			error: errors?.title?.message,
-			label: "Title",
-			name: "title",
-			value: toStringField(currentAsset?.title)
-		}),
-		/* @__PURE__ */ jsx(FormFieldInputText, {
-			...register("altText"),
-			disabled: formUpdating,
-			error: errors?.altText?.message,
-			label: "Alt Text",
-			name: "altText",
-			value: toStringField(currentAsset?.altText)
-		}),
-		/* @__PURE__ */ jsx(FormFieldInputTextarea, {
-			...register("description"),
-			disabled: formUpdating,
-			error: errors?.description?.message,
-			label: "Description",
-			name: "description",
-			rows: 5
-		}),
-		creditLine?.enabled && /* @__PURE__ */ jsx(FormFieldInputText, {
-			...register("creditLine"),
-			error: errors?.creditLine?.message,
-			label: "Credit",
-			name: "creditLine",
-			value: toStringField(currentAsset?.creditLine),
-			disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
-		})
-	] }), $[35] = activeLocaleTab, $[36] = creditLine?.enabled, $[37] = creditLine?.excludeSources, $[38] = currentAsset?.altText, $[39] = currentAsset?.creditLine, $[40] = currentAsset?.source?.name, $[41] = currentAsset?.title, $[42] = errors?.altText, $[43] = errors?.creditLine, $[44] = errors?.description, $[45] = errors?.title, $[46] = formUpdating, $[47] = hasLocales, $[48] = locales, $[49] = register, $[50] = t17) : t17 = $[50];
-	let t18;
-	return $[51] !== t12 || $[52] !== t16 || $[53] !== t17 || $[54] !== t3 ? (t18 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
-		children: [
-			t3,
-			t12,
-			t16,
-			t17
+			})] }),
+			/* @__PURE__ */ jsx(FormFieldInputText, {
+				...register("originalFilename"),
+				disabled: formUpdating,
+				error: errors?.originalFilename?.message,
+				label: "Filename",
+				name: "originalFilename",
+				value: currentAsset?.originalFilename
+			}),
+			hasLocales ? /* @__PURE__ */ jsx(Card, {
+				marginTop: 2,
+				shadow: 1,
+				padding: 3,
+				radius: 1,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: 2,
+					children: [/* @__PURE__ */ jsx(TabList, {
+						gap: 2,
+						children: locales.map((locale, idx) => /* @__PURE__ */ jsx(Tab, {
+							id: `locale-tab-${locale.id}`,
+							"aria-controls": `locale-panel-${locale.id}`,
+							selected: activeLocaleTab === idx,
+							onClick: () => setActiveLocaleTab(idx),
+							label: locale.title
+						}, locale.id))
+					}), locales.map((locale_0, idx_0) => /* @__PURE__ */ jsx(TabPanel, {
+						id: `locale-panel-${locale_0.id}`,
+						"aria-labelledby": `locale-tab-${locale_0.id}`,
+						hidden: activeLocaleTab !== idx_0,
+						children: /* @__PURE__ */ jsxs(Stack, {
+							gap: 3,
+							children: [
+								/* @__PURE__ */ jsx(FormFieldInputText, {
+									...register(`title.${locale_0.id}`),
+									disabled: formUpdating,
+									error: (errors?.title)?.[locale_0.id]?.message,
+									label: "Title",
+									name: `title.${locale_0.id}`
+								}),
+								/* @__PURE__ */ jsx(FormFieldInputText, {
+									...register(`altText.${locale_0.id}`),
+									disabled: formUpdating,
+									error: (errors?.altText)?.[locale_0.id]?.message,
+									label: "Alt Text",
+									name: `altText.${locale_0.id}`
+								}),
+								/* @__PURE__ */ jsx(FormFieldInputTextarea, {
+									...register(`description.${locale_0.id}`),
+									disabled: formUpdating,
+									error: (errors?.description)?.[locale_0.id]?.message,
+									label: "Description",
+									name: `description.${locale_0.id}`,
+									rows: 5
+								}),
+								creditLine?.enabled && /* @__PURE__ */ jsx(FormFieldInputText, {
+									...register(`creditLine.${locale_0.id}`),
+									error: (errors?.creditLine)?.[locale_0.id]?.message,
+									label: "Credit",
+									name: `creditLine.${locale_0.id}`,
+									disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+								})
+							]
+						})
+					}, locale_0.id))]
+				})
+			}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx(FormFieldInputText, {
+					...register("title"),
+					disabled: formUpdating,
+					error: errors?.title?.message,
+					label: "Title",
+					name: "title",
+					value: toStringField(currentAsset?.title)
+				}),
+				/* @__PURE__ */ jsx(FormFieldInputText, {
+					...register("altText"),
+					disabled: formUpdating,
+					error: errors?.altText?.message,
+					label: "Alt Text",
+					name: "altText",
+					value: toStringField(currentAsset?.altText)
+				}),
+				/* @__PURE__ */ jsx(FormFieldInputTextarea, {
+					...register("description"),
+					disabled: formUpdating,
+					error: errors?.description?.message,
+					label: "Description",
+					name: "description",
+					rows: 5
+				}),
+				creditLine?.enabled && /* @__PURE__ */ jsx(FormFieldInputText, {
+					...register("creditLine"),
+					error: errors?.creditLine?.message,
+					label: "Credit",
+					name: "creditLine",
+					value: toStringField(currentAsset?.creditLine),
+					disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+				})
+			] })
 		]
-	}), $[51] = t12, $[52] = t16, $[53] = t17, $[54] = t3, $[55] = t18) : t18 = $[55], t18;
+	});
 }
 function renderDefaultDetails(props) {
 	return /* @__PURE__ */ jsx(Details, { ...props });
 }
 const DialogAssetEdit = (props) => {
-	let $ = c(139), { children, dialog: t0 } = props, { assetId, id, lastCreatedTag, lastRemovedTagIds } = t0, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), t1;
+	let $ = c(149), { children, dialog: t0 } = props, { assetId, id, lastCreatedTag, lastRemovedTagIds } = t0, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), t1;
 	$[0] === assetId ? t1 = $[1] : (t1 = (state) => selectAssetById(state, String(assetId)), $[0] = assetId, $[1] = t1);
 	let assetItem = useTypedSelector(t1), tags = useTypedSelector(selectTags), assetUpdatedPrev = useRef(void 0), [assetSnapshot, setAssetSnapshot] = useState(assetItem?.asset), [tabSection, setTabSection] = useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, t2;
 	$[2] === tags ? t2 = $[3] : (t2 = getTagSelectOptions(tags), $[2] = tags, $[3] = t2);
@@ -2824,45 +2821,47 @@ const DialogAssetEdit = (props) => {
 		mode: "onChange",
 		resolver: t10
 	}, $[18] = t10, $[19] = t9, $[20] = t11) : t11 = $[20];
-	let { control, formState: t12, getValues, handleSubmit, register, reset, setValue } = useForm(t11), { errors, isDirty, isValid } = t12, formUpdating = !assetItem || assetItem?.updating, t13;
-	$[21] !== dispatch || $[22] !== id ? (t13 = () => {
+	let { control, getValues, handleSubmit, register, reset, setValue } = useForm(t11), t12;
+	$[21] === control ? t12 = $[22] : (t12 = { control }, $[21] = control, $[22] = t12);
+	let { errors, isDirty, isValid } = useFormState(t12), formUpdating = !assetItem || assetItem?.updating, t13;
+	$[23] !== dispatch || $[24] !== id ? (t13 = () => {
 		dispatch(dialogActions.remove({ id }));
-	}, $[21] = dispatch, $[22] = id, $[23] = t13) : t13 = $[23];
+	}, $[23] = dispatch, $[24] = id, $[25] = t13) : t13 = $[25];
 	let handleClose = t13, t14;
-	$[24] !== assetItem || $[25] !== dispatch ? (t14 = () => {
+	$[26] !== assetItem || $[27] !== dispatch ? (t14 = () => {
 		assetItem?.asset && dispatch(dialogActions.showConfirmDeleteAssets({
 			assets: [assetItem],
 			closeDialogId: assetItem?.asset._id
 		}));
-	}, $[24] = assetItem, $[25] = dispatch, $[26] = t14) : t14 = $[26];
+	}, $[26] = assetItem, $[27] = dispatch, $[28] = t14) : t14 = $[28];
 	let handleDelete = t14, t15;
-	$[27] === Symbol.for("react.memo_cache_sentinel") ? (t15 = (update) => {
+	$[29] === Symbol.for("react.memo_cache_sentinel") ? (t15 = (update) => {
 		let { result, transition } = update;
 		result && transition === "update" && setAssetSnapshot(result);
-	}, $[27] = t15) : t15 = $[27];
+	}, $[29] = t15) : t15 = $[29];
 	let handleAssetUpdate = t15, t16;
-	$[28] !== currentAsset?._id || $[29] !== dispatch ? (t16 = (tagName) => {
+	$[30] !== currentAsset?._id || $[31] !== dispatch ? (t16 = (tagName) => {
 		dispatch(tagsActions.createRequest({
 			assetId: currentAsset?._id,
 			name: tagName
 		}));
-	}, $[28] = currentAsset?._id, $[29] = dispatch, $[30] = t16) : t16 = $[30], currentAsset?._id;
+	}, $[30] = currentAsset?._id, $[31] = dispatch, $[32] = t16) : t16 = $[32], currentAsset?._id;
 	let handleCreateTag = t16, t17;
-	$[31] !== assetItem || $[32] !== currentFolderId || $[33] !== dispatch ? (t17 = () => {
+	$[33] !== assetItem || $[34] !== currentFolderId || $[35] !== dispatch ? (t17 = () => {
 		assetItem && dispatch(DIALOG_ACTIONS.showFolderMove({
 			assets: [assetItem],
 			folderId: currentFolderId
 		}));
-	}, $[31] = assetItem, $[32] = currentFolderId, $[33] = dispatch, $[34] = t17) : t17 = $[34];
+	}, $[33] = assetItem, $[34] = currentFolderId, $[35] = dispatch, $[36] = t17) : t17 = $[36];
 	let handleChangeFolder = t17, t18;
-	$[35] !== assetItem || $[36] !== currentFolderId || $[37] !== dispatch ? (t18 = () => {
+	$[37] !== assetItem || $[38] !== currentFolderId || $[39] !== dispatch ? (t18 = () => {
 		!assetItem || !currentFolderId || dispatch(assetsActions.folderSetRequest({
 			assets: [assetItem],
 			folderId: null
 		}));
-	}, $[35] = assetItem, $[36] = currentFolderId, $[37] = dispatch, $[38] = t18) : t18 = $[38];
+	}, $[37] = assetItem, $[38] = currentFolderId, $[39] = dispatch, $[40] = t18) : t18 = $[40];
 	let handleRemoveFolder = t18, t19;
-	if ($[39] !== currentAsset || $[40] !== locales) {
+	if ($[41] !== currentAsset || $[42] !== locales) {
 		bb0: {
 			if (!currentAsset) {
 				t19 = !1;
@@ -2885,10 +2884,10 @@ const DialogAssetEdit = (props) => {
 			let configuredIds = new Set(locales.map(_temp4$5));
 			t19 = fields.some((f_0) => isLocaleObj(f_0) ? Object.keys(f_0).some((k) => !configuredIds.has(k)) : !1);
 		}
-		$[39] = currentAsset, $[40] = locales, $[41] = t19;
-	} else t19 = $[41];
+		$[41] = currentAsset, $[42] = locales, $[43] = t19;
+	} else t19 = $[43];
 	let hasOrphanedLocales = t19, t20;
-	$[42] !== client || $[43] !== currentAsset || $[44] !== locales ? (t20 = async () => {
+	$[44] !== client || $[45] !== currentAsset || $[46] !== locales ? (t20 = async () => {
 		if (!currentAsset) return;
 		let cleanField = (field_1) => {
 			if (typeof field_1 != "object" || !field_1 || Array.isArray(field_1)) return field_1;
@@ -2904,9 +2903,9 @@ const DialogAssetEdit = (props) => {
 			description: cleanField(currentAsset.description),
 			...currentAsset._type === "sanity.imageAsset" && { creditLine: cleanField(currentAsset.creditLine) }
 		}).commit();
-	}, $[42] = client, $[43] = currentAsset, $[44] = locales, $[45] = t20) : t20 = $[45];
+	}, $[44] = client, $[45] = currentAsset, $[46] = locales, $[47] = t20) : t20 = $[47];
 	let handleCleanupLocales = t20, t21;
-	$[46] !== assetItem?.asset || $[47] !== dispatch ? (t21 = (formData) => {
+	$[48] !== assetItem?.asset || $[49] !== dispatch ? (t21 = (formData) => {
 		if (!assetItem?.asset) return;
 		let sanitizedFormData = sanitizeFormData(formData);
 		formData.description === "" && (sanitizedFormData.description = ""), dispatch(assetsActions.updateRequest({
@@ -2920,23 +2919,23 @@ const DialogAssetEdit = (props) => {
 				} }
 			}
 		}));
-	}, $[46] = assetItem?.asset, $[47] = dispatch, $[48] = t21) : t21 = $[48], assetItem?.asset;
+	}, $[48] = assetItem?.asset, $[49] = dispatch, $[50] = t21) : t21 = $[50], assetItem?.asset;
 	let onSubmit = t21, t22;
-	$[49] !== assetItem?.asset || $[50] !== client ? (t22 = () => {
+	$[51] !== assetItem?.asset || $[52] !== client ? (t22 = () => {
 		if (!assetItem?.asset) return;
 		let subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
 		return () => {
 			subscriptionAsset?.unsubscribe();
 		};
-	}, $[49] = assetItem?.asset, $[50] = client, $[51] = t22) : t22 = $[51];
+	}, $[51] = assetItem?.asset, $[52] = client, $[53] = t22) : t22 = $[53];
 	let t23 = assetItem?.asset, t24;
-	$[52] !== client || $[53] !== t23 ? (t24 = [
+	$[54] !== client || $[55] !== t23 ? (t24 = [
 		t23,
 		client,
 		handleAssetUpdate
-	], $[52] = client, $[53] = t23, $[54] = t24) : t24 = $[54], useEffect(t22, t24);
+	], $[54] = client, $[55] = t23, $[56] = t24) : t24 = $[56], useEffect(t22, t24);
 	let t25, t26;
-	$[55] !== getValues || $[56] !== lastCreatedTag || $[57] !== setValue ? (t25 = () => {
+	$[57] !== getValues || $[58] !== lastCreatedTag || $[59] !== setValue ? (t25 = () => {
 		if (lastCreatedTag) {
 			let updatedTags = (getValues("opt.media.tags") || []).concat([lastCreatedTag]);
 			setValue("opt.media.tags", updatedTags, { shouldDirty: !0 });
@@ -2945,9 +2944,9 @@ const DialogAssetEdit = (props) => {
 		getValues,
 		lastCreatedTag,
 		setValue
-	], $[55] = getValues, $[56] = lastCreatedTag, $[57] = setValue, $[58] = t25, $[59] = t26) : (t25 = $[58], t26 = $[59]), useEffect(t25, t26);
+	], $[57] = getValues, $[58] = lastCreatedTag, $[59] = setValue, $[60] = t25, $[61] = t26) : (t25 = $[60], t26 = $[61]), useEffect(t25, t26);
 	let t27, t28;
-	$[60] !== getValues || $[61] !== lastRemovedTagIds || $[62] !== setValue ? (t27 = () => {
+	$[62] !== getValues || $[63] !== lastRemovedTagIds || $[64] !== setValue ? (t27 = () => {
 		if (lastRemovedTagIds) {
 			let updatedTags_0 = (getValues("opt.media.tags") || []).filter((tag_0) => !lastRemovedTagIds.includes(tag_0.value));
 			setValue("opt.media.tags", updatedTags_0, { shouldDirty: !0 });
@@ -2956,64 +2955,74 @@ const DialogAssetEdit = (props) => {
 		getValues,
 		lastRemovedTagIds,
 		setValue
-	], $[60] = getValues, $[61] = lastRemovedTagIds, $[62] = setValue, $[63] = t27, $[64] = t28) : (t27 = $[63], t28 = $[64]), useEffect(t27, t28);
+	], $[62] = getValues, $[63] = lastRemovedTagIds, $[64] = setValue, $[65] = t27, $[66] = t28) : (t27 = $[65], t28 = $[66]), useEffect(t27, t28);
 	let t29;
-	$[65] !== assetItem?.asset || $[66] !== generateDefaultValues || $[67] !== reset ? (t29 = () => {
+	$[67] !== assetItem?.asset || $[68] !== generateDefaultValues || $[69] !== reset ? (t29 = () => {
 		assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
-	}, $[65] = assetItem?.asset, $[66] = generateDefaultValues, $[67] = reset, $[68] = t29) : t29 = $[68];
+	}, $[67] = assetItem?.asset, $[68] = generateDefaultValues, $[69] = reset, $[70] = t29) : t29 = $[70];
 	let t30 = assetItem?.asset, t31;
-	$[69] !== generateDefaultValues || $[70] !== reset || $[71] !== t30 ? (t31 = [
+	$[71] !== generateDefaultValues || $[72] !== reset || $[73] !== t30 ? (t31 = [
 		t30,
 		generateDefaultValues,
 		reset
-	], $[69] = generateDefaultValues, $[70] = reset, $[71] = t30, $[72] = t31) : t31 = $[72], useEffect(t29, t31);
+	], $[71] = generateDefaultValues, $[72] = reset, $[73] = t30, $[74] = t31) : t31 = $[74], useEffect(t29, t31);
 	let t32;
-	$[73] !== currentAsset?._updatedAt || $[74] !== formUpdating || $[75] !== handleCleanupLocales || $[76] !== handleDelete || $[77] !== handleSubmit || $[78] !== hasOrphanedLocales || $[79] !== isDirty || $[80] !== isValid || $[81] !== onSubmit ? (t32 = () => /* @__PURE__ */ jsx(Box, {
+	$[75] !== handleCleanupLocales || $[76] !== hasOrphanedLocales ? (t32 = hasOrphanedLocales && /* @__PURE__ */ jsx(Card, {
 		padding: 3,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
-			children: [hasOrphanedLocales && /* @__PURE__ */ jsx(Card, {
-				padding: 3,
-				radius: 2,
-				shadow: 1,
-				tone: "caution",
-				children: /* @__PURE__ */ jsxs(Flex, {
-					align: "center",
-					justify: "space-between",
-					gap: 3,
-					children: [/* @__PURE__ */ jsx(Text, {
-						size: 1,
-						children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors."
-					}), /* @__PURE__ */ jsx(Button, {
-						fontSize: 1,
-						mode: "ghost",
-						onClick: handleCleanupLocales,
-						text: "Cleanup localized fields",
-						tone: "caution"
-					})]
-				})
-			}), /* @__PURE__ */ jsxs(Flex, {
-				justify: "space-between",
-				children: [/* @__PURE__ */ jsx(Button, {
-					disabled: formUpdating,
-					fontSize: 1,
-					mode: "bleed",
-					onClick: handleDelete,
-					text: "Delete",
-					tone: "critical"
-				}), /* @__PURE__ */ jsx(FormSubmitButton, {
-					disabled: formUpdating || !isDirty || !isValid || hasOrphanedLocales,
-					isValid,
-					lastUpdated: currentAsset?._updatedAt,
-					onClick: handleSubmit(onSubmit)
-				})]
+		radius: 2,
+		shadow: 1,
+		tone: "caution",
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			justify: "space-between",
+			gap: 3,
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: 1,
+				children: "This asset has localized fields that are no longer configured. Clean them up to avoid validation errors."
+			}), /* @__PURE__ */ jsx(Button, {
+				fontSize: 1,
+				mode: "ghost",
+				onClick: handleCleanupLocales,
+				text: "Cleanup localized fields",
+				tone: "caution"
 			})]
 		})
-	}), $[73] = currentAsset?._updatedAt, $[74] = formUpdating, $[75] = handleCleanupLocales, $[76] = handleDelete, $[77] = handleSubmit, $[78] = hasOrphanedLocales, $[79] = isDirty, $[80] = isValid, $[81] = onSubmit, $[82] = t32) : t32 = $[82];
-	let Footer = t32;
+	}), $[75] = handleCleanupLocales, $[76] = hasOrphanedLocales, $[77] = t32) : t32 = $[77];
+	let t33;
+	$[78] !== formUpdating || $[79] !== handleDelete ? (t33 = /* @__PURE__ */ jsx(Button, {
+		disabled: formUpdating,
+		fontSize: 1,
+		mode: "bleed",
+		onClick: handleDelete,
+		text: "Delete",
+		tone: "critical"
+	}), $[78] = formUpdating, $[79] = handleDelete, $[80] = t33) : t33 = $[80];
+	let t34 = formUpdating || !isDirty || !isValid || hasOrphanedLocales, t35 = currentAsset?._updatedAt, t36;
+	$[81] !== handleSubmit || $[82] !== onSubmit ? (t36 = handleSubmit(onSubmit), $[81] = handleSubmit, $[82] = onSubmit, $[83] = t36) : t36 = $[83];
+	let t37;
+	$[84] !== isValid || $[85] !== t34 || $[86] !== t35 || $[87] !== t36 ? (t37 = /* @__PURE__ */ jsx(FormSubmitButton, {
+		disabled: t34,
+		isValid,
+		lastUpdated: t35,
+		onClick: t36
+	}), $[84] = isValid, $[85] = t34, $[86] = t35, $[87] = t36, $[88] = t37) : t37 = $[88];
+	let t38;
+	$[89] !== t33 || $[90] !== t37 ? (t38 = /* @__PURE__ */ jsxs(Flex, {
+		justify: "space-between",
+		children: [t33, t37]
+	}), $[89] = t33, $[90] = t37, $[91] = t38) : t38 = $[91];
+	let t39;
+	$[92] !== t32 || $[93] !== t38 ? (t39 = /* @__PURE__ */ jsx(Box, {
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 3,
+			children: [t32, t38]
+		})
+	}), $[92] = t32, $[93] = t38, $[94] = t39) : t39 = $[94];
+	let footer = t39;
 	if (!currentAsset) return null;
-	let t33 = !!currentFolderId && !currentFolderPath, t34;
-	$[83] !== allTagOptions || $[84] !== assetTagOptions || $[85] !== control || $[86] !== creditLine || $[87] !== currentAsset || $[88] !== currentFolderPath || $[89] !== errors || $[90] !== formUpdating || $[91] !== handleChangeFolder || $[92] !== handleCreateTag || $[93] !== handleRemoveFolder || $[94] !== locales || $[95] !== register || $[96] !== setValue || $[97] !== t33 ? (t34 = {
+	let t40 = !!currentFolderId && !currentFolderPath, t41;
+	$[95] !== allTagOptions || $[96] !== assetTagOptions || $[97] !== control || $[98] !== creditLine || $[99] !== currentAsset || $[100] !== currentFolderPath || $[101] !== errors || $[102] !== formUpdating || $[103] !== handleChangeFolder || $[104] !== handleCreateTag || $[105] !== handleRemoveFolder || $[106] !== locales || $[107] !== register || $[108] !== setValue || $[109] !== t40 ? (t41 = {
 		control,
 		errors,
 		formUpdating,
@@ -3024,31 +3033,29 @@ const DialogAssetEdit = (props) => {
 		handleCreateTag,
 		currentAsset,
 		folderPath: currentFolderPath,
-		folderMissing: t33,
+		folderMissing: t40,
 		onChangeFolder: handleChangeFolder,
 		onRemoveFolder: handleRemoveFolder,
 		creditLine,
 		locales
-	}, $[83] = allTagOptions, $[84] = assetTagOptions, $[85] = control, $[86] = creditLine, $[87] = currentAsset, $[88] = currentFolderPath, $[89] = errors, $[90] = formUpdating, $[91] = handleChangeFolder, $[92] = handleCreateTag, $[93] = handleRemoveFolder, $[94] = locales, $[95] = register, $[96] = setValue, $[97] = t33, $[98] = t34) : t34 = $[98];
-	let detailsProps = t34, t35;
-	$[99] === Footer ? t35 = $[100] : (t35 = /* @__PURE__ */ jsx(Footer, {}), $[99] = Footer, $[100] = t35);
-	let t36;
-	$[101] === Symbol.for("react.memo_cache_sentinel") ? (t36 = [
+	}, $[95] = allTagOptions, $[96] = assetTagOptions, $[97] = control, $[98] = creditLine, $[99] = currentAsset, $[100] = currentFolderPath, $[101] = errors, $[102] = formUpdating, $[103] = handleChangeFolder, $[104] = handleCreateTag, $[105] = handleRemoveFolder, $[106] = locales, $[107] = register, $[108] = setValue, $[109] = t40, $[110] = t41) : t41 = $[110];
+	let detailsProps = t41, t42;
+	$[111] === Symbol.for("react.memo_cache_sentinel") ? (t42 = [
 		"column-reverse",
 		"column-reverse",
 		"row-reverse"
-	], $[101] = t36) : t36 = $[101];
-	let t37;
-	$[102] === Symbol.for("react.memo_cache_sentinel") ? (t37 = [
+	], $[111] = t42) : t42 = $[111];
+	let t43;
+	$[112] === Symbol.for("react.memo_cache_sentinel") ? (t43 = [
 		5,
 		5,
 		0
-	], $[102] = t37) : t37 = $[102];
-	let t38;
-	$[103] !== CustomDetails || $[104] !== assetItem || $[105] !== detailsProps || $[106] !== formUpdating || $[107] !== handleSubmit || $[108] !== onSubmit || $[109] !== tabSection ? (t38 = (t39) => {
-		let { isLoading, referringDocuments } = t39, uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
+	], $[112] = t43) : t43 = $[112];
+	let t44;
+	$[113] !== CustomDetails || $[114] !== assetItem || $[115] !== detailsProps || $[116] !== formUpdating || $[117] !== handleSubmit || $[118] !== onSubmit || $[119] !== tabSection ? (t44 = (t45) => {
+		let { isLoading, referringDocuments } = t45, uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TabList, {
-			space: 2,
+			gap: 2,
 			children: [/* @__PURE__ */ jsx(Tab, {
 				"aria-controls": "details-panel",
 				disabled: formUpdating,
@@ -3110,24 +3117,24 @@ const DialogAssetEdit = (props) => {
 				})
 			]
 		})] });
-	}, $[103] = CustomDetails, $[104] = assetItem, $[105] = detailsProps, $[106] = formUpdating, $[107] = handleSubmit, $[108] = onSubmit, $[109] = tabSection, $[110] = t38) : t38 = $[110];
-	let t39;
-	$[111] !== currentAsset._id || $[112] !== documentStore || $[113] !== t38 ? (t39 = /* @__PURE__ */ jsx(Box, {
+	}, $[113] = CustomDetails, $[114] = assetItem, $[115] = detailsProps, $[116] = formUpdating, $[117] = handleSubmit, $[118] = onSubmit, $[119] = tabSection, $[120] = t44) : t44 = $[120];
+	let t45;
+	$[121] !== currentAsset._id || $[122] !== documentStore || $[123] !== t44 ? (t45 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
-		marginTop: t37,
+		marginTop: t43,
 		padding: 4,
 		children: /* @__PURE__ */ jsx(WithReferringDocuments, {
 			documentStore,
 			id: currentAsset._id,
-			children: t38
+			children: t44
 		})
-	}), $[111] = currentAsset._id, $[112] = documentStore, $[113] = t38, $[114] = t39) : t39 = $[114];
-	let t40;
-	$[115] === Symbol.for("react.memo_cache_sentinel") ? (t40 = { aspectRatio: "1" }, $[115] = t40) : t40 = $[115];
-	let t41;
-	$[116] === currentAsset ? t41 = $[117] : (t41 = isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }), $[116] = currentAsset, $[117] = t41);
-	let t42;
-	$[118] !== currentAsset || $[119] !== scheme ? (t42 = isImageAsset(currentAsset) && /* @__PURE__ */ jsx(Image$1, {
+	}), $[121] = currentAsset._id, $[122] = documentStore, $[123] = t44, $[124] = t45) : t45 = $[124];
+	let t46;
+	$[125] === Symbol.for("react.memo_cache_sentinel") ? (t46 = { aspectRatio: "1" }, $[125] = t46) : t46 = $[125];
+	let t47;
+	$[126] === currentAsset ? t47 = $[127] : (t47 = isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }), $[126] = currentAsset, $[127] = t47);
+	let t48;
+	$[128] !== currentAsset || $[129] !== scheme ? (t48 = isImageAsset(currentAsset) && /* @__PURE__ */ jsx(Image$1, {
 		draggable: !1,
 		$scheme: scheme,
 		$showCheckerboard: !currentAsset?.metadata?.isOpaque,
@@ -3135,41 +3142,41 @@ const DialogAssetEdit = (props) => {
 			height: 600,
 			width: 600
 		})
-	}), $[118] = currentAsset, $[119] = scheme, $[120] = t42) : t42 = $[120];
-	let t43;
-	$[121] !== t41 || $[122] !== t42 ? (t43 = /* @__PURE__ */ jsxs(Box, {
-		style: t40,
-		children: [t41, t42]
-	}), $[121] = t41, $[122] = t42, $[123] = t43) : t43 = $[123];
-	let t44;
-	$[124] !== assetItem || $[125] !== currentAsset ? (t44 = currentAsset && /* @__PURE__ */ jsx(Box, {
+	}), $[128] = currentAsset, $[129] = scheme, $[130] = t48) : t48 = $[130];
+	let t49;
+	$[131] !== t47 || $[132] !== t48 ? (t49 = /* @__PURE__ */ jsxs(Box, {
+		style: t46,
+		children: [t47, t48]
+	}), $[131] = t47, $[132] = t48, $[133] = t49) : t49 = $[133];
+	let t50;
+	$[134] !== assetItem || $[135] !== currentAsset ? (t50 = currentAsset && /* @__PURE__ */ jsx(Box, {
 		marginTop: 4,
 		children: /* @__PURE__ */ jsx(AssetMetadata, {
 			asset: currentAsset,
 			item: assetItem
 		})
-	}), $[124] = assetItem, $[125] = currentAsset, $[126] = t44) : t44 = $[126];
-	let t45;
-	$[127] !== t43 || $[128] !== t44 ? (t45 = /* @__PURE__ */ jsxs(Box, {
+	}), $[134] = assetItem, $[135] = currentAsset, $[136] = t50) : t50 = $[136];
+	let t51;
+	$[137] !== t49 || $[138] !== t50 ? (t51 = /* @__PURE__ */ jsxs(Box, {
 		flex: 1,
 		padding: 4,
-		children: [t43, t44]
-	}), $[127] = t43, $[128] = t44, $[129] = t45) : t45 = $[129];
-	let t46;
-	$[130] !== t39 || $[131] !== t45 ? (t46 = /* @__PURE__ */ jsxs(Flex, {
-		direction: t36,
-		children: [t39, t45]
-	}), $[130] = t39, $[131] = t45, $[132] = t46) : t46 = $[132];
-	let t47;
-	return $[133] !== children || $[134] !== handleClose || $[135] !== id || $[136] !== t35 || $[137] !== t46 ? (t47 = /* @__PURE__ */ jsxs(Dialog$1, {
+		children: [t49, t50]
+	}), $[137] = t49, $[138] = t50, $[139] = t51) : t51 = $[139];
+	let t52;
+	$[140] !== t45 || $[141] !== t51 ? (t52 = /* @__PURE__ */ jsxs(Flex, {
+		direction: t42,
+		children: [t45, t51]
+	}), $[140] = t45, $[141] = t51, $[142] = t52) : t52 = $[142];
+	let t53;
+	return $[143] !== children || $[144] !== footer || $[145] !== handleClose || $[146] !== id || $[147] !== t52 ? (t53 = /* @__PURE__ */ jsxs(Dialog$1, {
 		animate: !0,
-		footer: t35,
+		footer,
 		header: "Asset details",
 		id,
 		onClose: handleClose,
 		width: 3,
-		children: [t46, children]
-	}), $[133] = children, $[134] = handleClose, $[135] = id, $[136] = t35, $[137] = t46, $[138] = t47) : t47 = $[138], t47;
+		children: [t52, children]
+	}), $[143] = children, $[144] = footer, $[145] = handleClose, $[146] = id, $[147] = t52, $[148] = t53) : t53 = $[148], t53;
 };
 function _temp$35(v) {
 	return v;
@@ -3236,18 +3243,18 @@ const selectCombinedItems = createSelector([
 	}), t3 = [downHandler, upHandler], $[4] = downHandler, $[5] = t2, $[6] = t3), useEffect(t2, t3), keyPressed;
 }, CardWrapper$2 = styled(Flex).withConfig({
 	displayName: "CardWrapper",
-	componentId: "sc-xfb4zy-0"
+	componentId: "sc-dw6rvv-0"
 })`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, CardContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "CardContainer",
-	componentId: "sc-xfb4zy-1"
+	componentId: "sc-dw6rvv-1"
 })(({ $picked, theme, $updating }) => css`border:1px solid transparent;height:100%;pointer-events:${$updating ? "none" : "auto"};position:relative;transition:all 300ms;user-select:none;width:100%;border:${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};${!$updating && css`@media (hover:hover) and (pointer:fine){&:hover{border:1px solid var(--card-border-color);}}`}`), ContextActionContainer$2 = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "ContextActionContainer",
-	componentId: "sc-xfb4zy-2"
+	componentId: "sc-dw6rvv-2"
 })(({ $scheme }) => css`cursor:pointer;height:${32}px;transition:all 300ms;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`), StyledWarningOutlineIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
 	displayName: "StyledWarningOutlineIcon",
-	componentId: "sc-xfb4zy-3"
+	componentId: "sc-dw6rvv-3"
 })(({ theme }) => ({ color: theme.sanity.color.spot.red })), CardAsset = (props) => {
-	let $ = c(82), { id, selected, source } = props, scheme = useColorSchemeValue(), toast = useToast(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$34), assetsPicked = useTypedSelector(selectAssetsPicked), t0;
+	let $ = c(83), { id, selected, source } = props, scheme = useColorSchemeValue(), toast = useToast(), shiftPressed = useKeyPress("shift"), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$34), assetsPicked = useTypedSelector(selectAssetsPicked), t0;
 	$[0] === id ? t0 = $[1] : (t0 = (state_0) => selectAssetById(state_0, id), $[0] = id, $[1] = t0);
 	let item = useTypedSelector(t0), t1;
 	$[2] === source ? t1 = $[3] : (t1 = (state_1) => {
@@ -3311,18 +3318,18 @@ const selectCombinedItems = createSelector([
 		cursor: t6,
 		position: "relative"
 	}, $[34] = t6, $[35] = t7);
-	let t8;
-	$[36] === opacityPreview ? t8 = $[37] : (t8 = {
+	let t8 = `media-asset-card-${asset._id}`, t9;
+	$[36] === opacityPreview ? t9 = $[37] : (t9 = {
 		height: "100%",
 		opacity: opacityPreview
-	}, $[36] = opacityPreview, $[37] = t8);
-	let t9;
-	$[38] === asset ? t9 = $[39] : (t9 = isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon$1, {
+	}, $[36] = opacityPreview, $[37] = t9);
+	let t10;
+	$[38] === asset ? t10 = $[39] : (t10 = isFileAsset(asset) && /* @__PURE__ */ jsx(FileIcon$1, {
 		extension: asset.extension,
 		width: "80px"
-	}), $[38] = asset, $[39] = t9);
-	let t10;
-	$[40] !== asset || $[41] !== isOpaque || $[42] !== scheme ? (t10 = isImageAsset(asset) && /* @__PURE__ */ jsx(Image$1, {
+	}), $[38] = asset, $[39] = t10);
+	let t11;
+	$[40] !== asset || $[41] !== isOpaque || $[42] !== scheme ? (t11 = isImageAsset(asset) && /* @__PURE__ */ jsx(Image$1, {
 		draggable: !1,
 		$scheme: scheme,
 		$showCheckerboard: !isOpaque,
@@ -3334,15 +3341,16 @@ const selectCombinedItems = createSelector([
 			draggable: !1,
 			transition: "opacity 1000ms"
 		}
-	}), $[40] = asset, $[41] = isOpaque, $[42] = scheme, $[43] = t10) : t10 = $[43];
-	let t11;
-	$[44] !== handleAssetClick || $[45] !== t10 || $[46] !== t8 || $[47] !== t9 ? (t11 = /* @__PURE__ */ jsxs("div", {
-		onClick: handleAssetClick,
-		style: t8,
-		children: [t9, t10]
-	}), $[44] = handleAssetClick, $[45] = t10, $[46] = t8, $[47] = t9, $[48] = t11) : t11 = $[48];
+	}), $[40] = asset, $[41] = isOpaque, $[42] = scheme, $[43] = t11) : t11 = $[43];
 	let t12;
-	$[49] !== opacityContainer || $[50] !== selected || $[51] !== updating ? (t12 = selected && !updating && /* @__PURE__ */ jsx(Flex, {
+	$[44] !== handleAssetClick || $[45] !== t10 || $[46] !== t11 || $[47] !== t8 || $[48] !== t9 ? (t12 = /* @__PURE__ */ jsxs("div", {
+		"data-testid": t8,
+		onClick: handleAssetClick,
+		style: t9,
+		children: [t10, t11]
+	}), $[44] = handleAssetClick, $[45] = t10, $[46] = t11, $[47] = t8, $[48] = t9, $[49] = t12) : t12 = $[49];
+	let t13;
+	$[50] !== opacityContainer || $[51] !== selected || $[52] !== updating ? (t13 = selected && !updating && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: {
@@ -3357,9 +3365,9 @@ const selectCombinedItems = createSelector([
 			size: 2,
 			children: /* @__PURE__ */ jsx(CheckmarkCircleIcon, {})
 		})
-	}), $[49] = opacityContainer, $[50] = selected, $[51] = updating, $[52] = t12) : t12 = $[52];
-	let t13;
-	$[53] === updating ? t13 = $[54] : (t13 = updating && /* @__PURE__ */ jsx(Flex, {
+	}), $[50] = opacityContainer, $[51] = selected, $[52] = updating, $[53] = t13) : t13 = $[53];
+	let t14;
+	$[54] === updating ? t14 = $[55] : (t14 = updating && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: {
@@ -3370,21 +3378,21 @@ const selectCombinedItems = createSelector([
 			width: "100%"
 		},
 		children: /* @__PURE__ */ jsx(Spinner, {})
-	}), $[53] = updating, $[54] = t13);
-	let t14;
-	$[55] !== t11 || $[56] !== t12 || $[57] !== t13 || $[58] !== t7 ? (t14 = /* @__PURE__ */ jsxs(Box, {
+	}), $[54] = updating, $[55] = t14);
+	let t15;
+	$[56] !== t12 || $[57] !== t13 || $[58] !== t14 || $[59] !== t7 ? (t15 = /* @__PURE__ */ jsxs(Box, {
 		flex: 1,
 		style: t7,
 		children: [
-			t11,
 			t12,
-			t13
+			t13,
+			t14
 		]
-	}), $[55] = t11, $[56] = t12, $[57] = t13, $[58] = t7, $[59] = t14) : t14 = $[59];
-	let t15;
-	$[60] === opacityContainer ? t15 = $[61] : (t15 = { opacity: opacityContainer }, $[60] = opacityContainer, $[61] = t15);
+	}), $[56] = t12, $[57] = t13, $[58] = t14, $[59] = t7, $[60] = t15) : t15 = $[60];
 	let t16;
-	$[62] !== isMultiSelect || $[63] !== onSelect || $[64] !== picked ? (t16 = onSelect && !isMultiSelect ? /* @__PURE__ */ jsx(EditIcon, { style: {
+	$[61] === opacityContainer ? t16 = $[62] : (t16 = { opacity: opacityContainer }, $[61] = opacityContainer, $[62] = t16);
+	let t17;
+	$[63] !== isMultiSelect || $[64] !== onSelect || $[65] !== picked ? (t17 = onSelect && !isMultiSelect ? /* @__PURE__ */ jsx(EditIcon, { style: {
 		flexShrink: 0,
 		opacity: .5
 	} }) : /* @__PURE__ */ jsx(Checkbox, {
@@ -3395,9 +3403,9 @@ const selectCombinedItems = createSelector([
 			pointerEvents: "none",
 			transform: "scale(0.8)"
 		}
-	}), $[62] = isMultiSelect, $[63] = onSelect, $[64] = picked, $[65] = t16) : t16 = $[65];
-	let t17;
-	$[66] === asset.originalFilename ? t17 = $[67] : (t17 = /* @__PURE__ */ jsx(Box, {
+	}), $[63] = isMultiSelect, $[64] = onSelect, $[65] = picked, $[66] = t17) : t17 = $[66];
+	let t18;
+	$[67] === asset.originalFilename ? t18 = $[68] : (t18 = /* @__PURE__ */ jsx(Box, {
 		marginLeft: 2,
 		children: /* @__PURE__ */ jsx(Text, {
 			muted: !0,
@@ -3405,18 +3413,18 @@ const selectCombinedItems = createSelector([
 			textOverflow: "ellipsis",
 			children: asset.originalFilename
 		})
-	}), $[66] = asset.originalFilename, $[67] = t17);
-	let t18;
-	$[68] !== handleContextActionClick || $[69] !== scheme || $[70] !== t15 || $[71] !== t16 || $[72] !== t17 ? (t18 = /* @__PURE__ */ jsxs(ContextActionContainer$2, {
+	}), $[67] = asset.originalFilename, $[68] = t18);
+	let t19;
+	$[69] !== handleContextActionClick || $[70] !== scheme || $[71] !== t16 || $[72] !== t17 || $[73] !== t18 ? (t19 = /* @__PURE__ */ jsxs(ContextActionContainer$2, {
 		align: "center",
 		onClick: handleContextActionClick,
 		paddingX: 1,
 		$scheme: scheme,
-		style: t15,
-		children: [t16, t17]
-	}), $[68] = handleContextActionClick, $[69] = scheme, $[70] = t15, $[71] = t16, $[72] = t17, $[73] = t18) : t18 = $[73];
-	let t19;
-	$[74] === error ? t19 = $[75] : (t19 = error && /* @__PURE__ */ jsx(Box, {
+		style: t16,
+		children: [t17, t18]
+	}), $[69] = handleContextActionClick, $[70] = scheme, $[71] = t16, $[72] = t17, $[73] = t18, $[74] = t19) : t19 = $[74];
+	let t20;
+	$[75] === error ? t20 = $[76] : (t20 = error && /* @__PURE__ */ jsx(Box, {
 		padding: 3,
 		style: {
 			position: "absolute",
@@ -3440,21 +3448,21 @@ const selectCombinedItems = createSelector([
 				children: /* @__PURE__ */ jsx(StyledWarningOutlineIcon, { color: "critical" })
 			})
 		})
-	}), $[74] = error, $[75] = t19);
-	let t20;
-	return $[76] !== item.updating || $[77] !== picked || $[78] !== t14 || $[79] !== t18 || $[80] !== t19 ? (t20 = /* @__PURE__ */ jsx(CardWrapper$2, {
+	}), $[75] = error, $[76] = t20);
+	let t21;
+	return $[77] !== item.updating || $[78] !== picked || $[79] !== t15 || $[80] !== t19 || $[81] !== t20 ? (t21 = /* @__PURE__ */ jsx(CardWrapper$2, {
 		padding: 1,
 		children: /* @__PURE__ */ jsxs(CardContainer, {
 			direction: "column",
 			$picked: picked,
 			$updating: item.updating,
 			children: [
-				t14,
-				t18,
-				t19
+				t15,
+				t19,
+				t20
 			]
 		})
-	}), $[76] = item.updating, $[77] = picked, $[78] = t14, $[79] = t18, $[80] = t19, $[81] = t20) : t20 = $[81], t20;
+	}), $[77] = item.updating, $[78] = picked, $[79] = t15, $[80] = t19, $[81] = t20, $[82] = t21) : t21 = $[82], t21;
 };
 var CardAsset_default = memo(CardAsset);
 function _temp$34(state) {
@@ -3465,13 +3473,13 @@ function _temp2$20(d) {
 }
 const CardWrapper$1 = styled(Flex).withConfig({
 	displayName: "CardWrapper",
-	componentId: "sc-75tou-0"
+	componentId: "sc-21m5j6-0"
 })`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, FolderCard = styled(Card).withConfig({
 	displayName: "FolderCard",
-	componentId: "sc-75tou-1"
+	componentId: "sc-21m5j6-1"
 })`cursor:pointer;height:100%;transition:border-color 200ms ease;width:100%;@media (hover:hover) and (pointer:fine){&:hover{border-color:var(--card-border-color);}}`, FolderGlyph = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "FolderGlyph",
-	componentId: "sc-75tou-2"
+	componentId: "sc-21m5j6-2"
 })(({ theme }) => css`align-items:flex-end;background:linear-gradient( 180deg,${theme.sanity.color.spot.yellow} 0%,${theme.sanity.color.spot.yellow} 100% );border-radius:8px;display:flex;height:72px;position:relative;width:96px;&::before{background:${theme.sanity.color.spot.yellow};border-radius:8px 8px 0 0;content:'';height:18px;left:0;position:absolute;top:-8px;width:38px;}`), CardFolder = (t0) => {
 	let $ = c(22), { folderId, name, totalCount } = t0, dispatch = useDispatch(), scheme = useColorSchemeValue(), t1;
 	$[0] !== dispatch || $[1] !== folderId ? (t1 = () => dispatch(foldersActions.currentFolderSet({ folderId })), $[0] = dispatch, $[1] = folderId, $[2] = t1) : t1 = $[2];
@@ -3521,7 +3529,7 @@ const CardWrapper$1 = styled(Flex).withConfig({
 		height: "fill",
 		justify: "space-between",
 		children: [t4, /* @__PURE__ */ jsxs(Stack, {
-			space: 2,
+			gap: 2,
 			children: [t6, t9]
 		})]
 	}), $[15] = t6, $[16] = t9, $[17] = t10) : t10 = $[17];
@@ -3697,14 +3705,14 @@ const createThrottler = (concurrency = 4) => {
 		}));
 	}));
 })), uploadsCompleteQueueEpic = (action$) => action$.pipe(filter(UPLOADS_ACTIONS.uploadComplete.match), mergeMap((action) => of(uploadsActions.checkRequest({ assets: [action.payload.asset] })))), uploadsCheckRequestEpic = (action$, state$, { client }) => action$.pipe(filter(uploadsActions.checkRequest.match), withLatestFrom(state$), mergeMap(([action, state]) => {
-	let { assets } = action.payload, documentIds = assets.map((asset) => asset._id), query = groq`
-        *[${constructFilter({
+	let { assets } = action.payload, documentIds = assets.map((asset) => asset._id), constructedFilter = constructFilter({
 		assetTypes: state.assets.assetTypes,
 		currentFolderId: state.folders.currentFolderId,
 		excludeTagSlugs: state.assets.excludeTagSlugs,
 		searchFacets: state.search.facets,
 		searchQuery: state.search.query
-	})} && _id in $documentIds].sha1hash
+	}), query = groq`
+        *[${constructedFilter} && _id in $documentIds].sha1hash
       `;
 	return of(action).pipe(delay(1e3), mergeMap(() => client.observable.fetch(query, { documentIds })), mergeMap((resultHashes) => {
 		let checkedResults = assets.reduce((acc, asset) => (acc[asset.sha1hash] = resultHashes.includes(asset.sha1hash) ? asset._id : null, acc), {});
@@ -4147,7 +4155,7 @@ const DialogAllAssets = (props) => {
 		paddingX: 4,
 		paddingY: 4,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [t6, t7]
 		})
 	}), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
@@ -4385,7 +4393,7 @@ const getExpandedIdSet$1 = (folderId, byId) => {
 	}), $[34] = t16, $[35] = t17, $[36] = t18) : t18 = $[36];
 	let t19;
 	$[37] === selectedFolder ? t19 = $[38] : (t19 = selectedFolder && /* @__PURE__ */ jsxs(Inline, {
-		space: 2,
+		gap: 2,
 		children: [/* @__PURE__ */ jsx(Text, {
 			muted: !0,
 			size: 1,
@@ -4398,8 +4406,8 @@ const getExpandedIdSet$1 = (folderId, byId) => {
 	}), $[37] = selectedFolder, $[38] = t19);
 	let t20;
 	$[39] !== t14 || $[40] !== t18 || $[41] !== t19 ? (t20 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 4,
 		padding: 4,
-		space: 4,
 		children: [
 			t14,
 			t18,
@@ -4684,7 +4692,7 @@ const getExpandedIdSet = (folderId, byId) => {
 	$[15] === t6 ? t7 = $[16] : (t7 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			children: [t5, t6]
 		})
 	}), $[15] = t6, $[16] = t7);
@@ -4713,7 +4721,7 @@ const getExpandedIdSet = (folderId, byId) => {
 	}), $[24] = canDeleteFolder, $[25] = currentFolderId, $[26] = handleFolderDelete, $[27] = t11) : t11 = $[27];
 	let t12;
 	$[28] !== t10 || $[29] !== t11 || $[30] !== t8 ? (t12 = /* @__PURE__ */ jsxs(Inline, {
-		space: 1,
+		gap: 1,
 		children: [
 			t8,
 			t10,
@@ -4965,13 +4973,16 @@ const DialogFolders = (props) => {
 			text: selectedModifier?.title
 		}),
 		id: "modifier",
-		menu: /* @__PURE__ */ jsx(Menu, { children: modifiers.map((modifier_1) => /* @__PURE__ */ jsx(MenuItem, {
-			disabled: modifier_1.name === facet.modifier,
-			fontSize: 1,
-			onClick: () => handleModifierClick(modifier_1),
-			padding: 2,
-			text: modifier_1.title
-		}, modifier_1.name)) }),
+		menu: /* @__PURE__ */ jsx(Menu, { children: modifiers.map((modifier_1) => {
+			let selected_0 = modifier_1.name === facet.modifier;
+			return /* @__PURE__ */ jsx(MenuItem, {
+				disabled: selected_0,
+				fontSize: 1,
+				onClick: () => handleModifierClick(modifier_1),
+				padding: 2,
+				text: modifier_1.title
+			}, modifier_1.name);
+		}) }),
 		popover: popoverProps
 	}), $[21] = facet.modifier, $[22] = handleModifierClick, $[23] = modifiers, $[24] = popoverProps, $[25] = selectedModifier?.title, $[26] = t9) : t9 = $[26];
 	let t10;
@@ -5029,13 +5040,16 @@ const DialogFolders = (props) => {
 		text: t5
 	}), $[14] = t5, $[15] = t6);
 	let t7;
-	$[16] !== handleListItemClick || $[17] !== options || $[18] !== selectedItem?.name ? (t7 = options?.map((item) => /* @__PURE__ */ jsx(MenuItem, {
-		disabled: item.name === selectedItem?.name,
-		fontSize: 1,
-		onClick: () => handleListItemClick(item),
-		padding: 2,
-		text: item.title
-	}, item.name)), $[16] = handleListItemClick, $[17] = options, $[18] = selectedItem?.name, $[19] = t7) : t7 = $[19];
+	$[16] !== handleListItemClick || $[17] !== options || $[18] !== selectedItem?.name ? (t7 = options?.map((item) => {
+		let selected_0 = item.name === selectedItem?.name;
+		return /* @__PURE__ */ jsx(MenuItem, {
+			disabled: selected_0,
+			fontSize: 1,
+			onClick: () => handleListItemClick(item),
+			padding: 2,
+			text: item.title
+		}, item.name);
+	}), $[16] = handleListItemClick, $[17] = options, $[18] = selectedItem?.name, $[19] = t7) : t7 = $[19];
 	let t8;
 	$[20] === t7 ? t8 = $[21] : (t8 = /* @__PURE__ */ jsx(Menu, { children: t7 }), $[20] = t7, $[21] = t8);
 	let t9;
@@ -5304,7 +5318,7 @@ const DialogFolders = (props) => {
 			fontSize: 1,
 			onClick: () => handleOperatorItemClick(operatorType_0),
 			padding: 2,
-			space: 4,
+			gap: 4,
 			style: { minWidth: "150px" },
 			text: operators[operatorType_0].label
 		}, operatorType_0) : /* @__PURE__ */ jsx(MenuDivider, {}, index)) }),
@@ -5346,7 +5360,7 @@ function _temp3$6() {
 }
 const StackContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "StackContainer",
-	componentId: "sc-aa4qqn-0"
+	componentId: "sc-bz9z8l-0"
 })(({ theme }) => css`> *{margin-bottom:${rem(theme.sanity.space[2])};}`), SearchFacets = (props) => {
 	let $ = c(6), { layout: t0 } = props, layout = t0 === void 0 ? "inline" : t0, searchFacets = useTypedSelector(_temp$26), t1;
 	$[0] === searchFacets ? t1 = $[1] : (t1 = searchFacets.map(_temp2$13), $[0] = searchFacets, $[1] = t1);
@@ -5357,7 +5371,7 @@ const StackContainer = /* @__PURE__ */ styled(Flex).withConfig({
 		return $[2] === Items ? t2 = $[3] : (t2 = /* @__PURE__ */ jsx(Box, {
 			marginBottom: 2,
 			children: /* @__PURE__ */ jsx(Inline, {
-				space: 2,
+				gap: 2,
 				children: Items
 			})
 		}), $[2] = Items, $[3] = t2), t2;
@@ -5386,17 +5400,25 @@ const SearchFacetsControl = () => {
 		$[11] !== assetTypes || $[12] !== creditLine?.enabled || $[13] !== isTool ? (t3 = (facet) => !creditLine?.enabled && facet?.type === "string" && facet?.name === "creditLine" ? !1 : facet.type === "group" || facet.type === "divider" ? !0 : isTool ? !facet?.selectOnly : facet.assetTypes.filter((assetType) => assetTypes.includes(assetType)).length > 0, $[11] = assetTypes, $[12] = creditLine?.enabled, $[13] = isTool, $[14] = t3) : t3 = $[14];
 		let filteredFacets = FACETS.filter(t3).filter(_temp4$3), hasSearchFacets = filteredFacets.length > 0, renderMenuFacets = (facets_0, t4) => {
 			let level = t4 === void 0 ? 0 : t4;
-			return /* @__PURE__ */ jsx(Fragment, { children: facets_0?.map((facet_1, index_0) => facet_1.type === "divider" ? /* @__PURE__ */ jsx(MenuDivider, {}, index_0) : facet_1.type === "group" ? /* @__PURE__ */ jsx(MenuGroup, {
-				text: facet_1.title,
-				title: facet_1.title,
-				children: renderMenuFacets(facet_1.facets, level + 1)
-			}, `group-${level}-${index_0}`) : facet_1 ? /* @__PURE__ */ jsx(MenuItem, {
-				disabled: !facet_1.operatorTypes && !!searchFacets.find((v) => v.name === facet_1.name),
-				fontSize: 1,
-				onClick: () => dispatch(searchActions.facetsAdd({ facet: facet_1 })),
-				padding: 2,
-				text: facet_1.title
-			}, facet_1.name) : null) });
+			return /* @__PURE__ */ jsx(Fragment, { children: facets_0?.map((facet_1, index_0) => {
+				if (facet_1.type === "divider") return /* @__PURE__ */ jsx(MenuDivider, {}, index_0);
+				if (facet_1.type === "group") return /* @__PURE__ */ jsx(MenuGroup, {
+					text: facet_1.title,
+					title: facet_1.title,
+					children: renderMenuFacets(facet_1.facets, level + 1)
+				}, `group-${level}-${index_0}`);
+				if (facet_1) {
+					let disabled = !facet_1.operatorTypes && !!searchFacets.find((v) => v.name === facet_1.name);
+					return /* @__PURE__ */ jsx(MenuItem, {
+						disabled,
+						fontSize: 1,
+						onClick: () => dispatch(searchActions.facetsAdd({ facet: facet_1 })),
+						padding: 2,
+						text: facet_1.title
+					}, facet_1.name);
+				}
+				return null;
+			}) });
 		};
 		T2 = Flex, T1 = MenuButton;
 		let t5 = !hasSearchFacets;
@@ -5405,7 +5427,7 @@ const SearchFacetsControl = () => {
 			fontSize: 1,
 			icon: AddIcon,
 			mode: "bleed",
-			space: 2,
+			gap: 2,
 			text: "Add filter",
 			tone: "primary"
 		}), $[15] = t5, $[16] = t1), t2 = "facets", T0 = Menu, t0 = renderMenuFacets(filteredFacets), $[0] = assetTypes, $[1] = creditLine?.enabled, $[2] = dispatch, $[3] = isTool, $[4] = searchFacets, $[5] = T0, $[6] = T1, $[7] = T2, $[8] = t0, $[9] = t1, $[10] = t2;
@@ -5687,10 +5709,10 @@ function _temp$23(tag) {
 }
 const TagContainer = styled(Flex).withConfig({
 	displayName: "TagContainer",
-	componentId: "sc-4mmug9-0"
+	componentId: "sc-wgczkj-0"
 })`height:${32}px;`, ButtonContainer = styled(Flex).withConfig({
 	displayName: "ButtonContainer",
-	componentId: "sc-4mmug9-1"
+	componentId: "sc-wgczkj-1"
 })`@media (pointer:fine){visibility:hidden;}@media (hover:hover) and (pointer:fine){${TagContainer}:hover &{visibility:visible;}}`, TagButton = (props) => {
 	let $ = c(10), { disabled, icon, onClick, tone, tooltip } = props, t0;
 	$[0] === tooltip ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Container, {
@@ -5992,7 +6014,7 @@ const TagViewHeader = (t0) => {
 	}), $[9] = tagsFetching, $[10] = t5);
 	let t6;
 	$[11] !== t4 || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Inline, {
-		space: 2,
+		gap: 2,
 		children: [t4, t5]
 	}), $[11] = t4, $[12] = t5, $[13] = t6) : t6 = $[13];
 	let t7;
@@ -6441,7 +6463,7 @@ const ButtonViewGroup = () => {
 	}), $[10] = t5, $[11] = t6, $[12] = t8) : t8 = $[12];
 	let t9;
 	return $[13] !== t4 || $[14] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Inline, {
-		space: 0,
+		gap: 0,
 		style: t0,
 		children: [t4, t8]
 	}), $[13] = t4, $[14] = t8, $[15] = t9) : t9 = $[15], t9;
@@ -6474,7 +6496,7 @@ const OrderSelect = () => {
 				} })),
 				padding: 2,
 				selected,
-				space: 4,
+				gap: 4,
 				style: { minWidth: "200px" },
 				text: getOrderTitle(item.field, item.direction)
 			}, index);
@@ -6643,7 +6665,7 @@ const Controls = () => {
 	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsxs(Box, {
 		display: t10,
 		children: [t11, /* @__PURE__ */ jsx(Inline, {
-			space: 2,
+			gap: 2,
 			children: /* @__PURE__ */ jsx(SearchFacetsControl, {})
 		})]
 	}), $[19] = t12) : t12 = $[19];
@@ -6684,7 +6706,7 @@ const Controls = () => {
 		display: t13,
 		marginX: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			style: t14,
 			children: [
 				t16,
@@ -6738,7 +6760,7 @@ const Controls = () => {
 	$[43] === t25 ? t27 = $[44] : (t27 = /* @__PURE__ */ jsx(Box, {
 		marginX: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			style: t22,
 			children: [t25, t26]
 		})
@@ -6895,7 +6917,7 @@ const FolderBreadcrumbs = () => {
 	if ($[3] !== currentFolderId || $[4] !== dispatch || $[5] !== segments) {
 		let t3;
 		$[7] !== currentFolderId || $[8] !== dispatch ? (t3 = (segment) => /* @__PURE__ */ jsxs(Inline, {
-			space: 1,
+			gap: 1,
 			children: [/* @__PURE__ */ jsx(Text, {
 				muted: !0,
 				size: 1,
@@ -6914,7 +6936,7 @@ const FolderBreadcrumbs = () => {
 		display: t0,
 		padding: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 1,
+			gap: 1,
 			children: [t1, t2]
 		})
 	}), $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
@@ -7168,13 +7190,13 @@ function _temp$7(state) {
 }
 const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 	displayName: "ContainerGrid",
-	componentId: "sc-5nw9dx-0"
+	componentId: "sc-8clx1w-0"
 })(({ $scheme, $selected, $updating }) => css`align-items:center;cursor:${$selected ? "default" : "pointer"};height:100%;pointer-events:${$updating ? "none" : "auto"};user-select:none;white-space:nowrap;${!$updating && css`@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`}`), ContextActionContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "ContextActionContainer",
-	componentId: "sc-5nw9dx-1"
+	componentId: "sc-8clx1w-1"
 })(({ $scheme }) => css`cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg2")};}}`), StyledWarningIcon = /* @__PURE__ */ styled(WarningFilledIcon).withConfig({
 	displayName: "StyledWarningIcon",
-	componentId: "sc-5nw9dx-2"
+	componentId: "sc-8clx1w-2"
 })(({ theme }) => ({ color: theme.sanity.color.spot.red })), TableRowAsset = (props) => {
 	let $ = c(150), { id, selected } = props, scheme = useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = useState(!1), refCountVisibleTimeout = useRef(null), dispatch = useDispatch(), lastPicked = useTypedSelector(_temp$6), t0;
 	$[0] === id ? t0 = $[1] : (t0 = (state_0) => selectAssetById(state_0, id), $[0] = id, $[1] = t0);
@@ -7539,10 +7561,10 @@ function _temp2$4(t0) {
 }
 const ContainerGrid = /* @__PURE__ */ styled(Grid).withConfig({
 	displayName: "ContainerGrid",
-	componentId: "sc-k92msu-0"
+	componentId: "sc-a1pmug-0"
 })(({ theme }) => css`align-items:center;cursor:pointer;height:100%;user-select:none;white-space:nowrap;@media (hover:hover) and (pointer:fine){&:hover{background:${theme.sanity.color.card.enabled.bg};}}`), FolderBadge = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "FolderBadge",
-	componentId: "sc-k92msu-1"
+	componentId: "sc-a1pmug-1"
 })(({ theme }) => css`background:${theme.sanity.color.spot.yellow};border-radius:6px;height:42px;position:relative;width:52px;&::before{background:${theme.sanity.color.spot.yellow};border-radius:6px 6px 0 0;content:'';height:12px;left:0;position:absolute;top:-6px;width:18px;}`), TableRowFolder = (t0) => {
 	let $ = c(45), { folderId, name, totalCount } = t0, dispatch = useDispatch(), mediaIndex = useMediaIndex(), scheme = useColorSchemeValue(), t1;
 	$[0] !== dispatch || $[1] !== folderId ? (t1 = () => dispatch(foldersActions.currentFolderSet({ folderId })), $[0] = dispatch, $[1] = folderId, $[2] = t1) : t1 = $[2];
@@ -7592,7 +7614,7 @@ const ContainerGrid = /* @__PURE__ */ styled(Grid).withConfig({
 	}), $[18] = t15) : t15 = $[18];
 	let t16;
 	$[19] === t14 ? t16 = $[20] : (t16 = /* @__PURE__ */ jsxs(Stack, {
-		space: 2,
+		gap: 2,
 		children: [t14, t15]
 	}), $[19] = t14, $[20] = t16);
 	let t17;
@@ -7786,7 +7808,7 @@ const ContainerGrid = /* @__PURE__ */ styled(Grid).withConfig({
 	}), $[44] = status, $[45] = t24);
 	let t25;
 	$[46] !== t23 || $[47] !== t24 ? (t25 = /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [t23, t24]
 	}), $[46] = t23, $[47] = t24, $[48] = t25) : t25 = $[48];
 	let t26;
@@ -8254,10 +8276,7 @@ function createAssetHandler(dispatch) {
 			case "disappear":
 				dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId }));
 				break;
-			case "update":
-				dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
-				break;
-			default: break;
+			case "update": dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
 		}
 	};
 }
@@ -8271,10 +8290,7 @@ function createTagHandler(dispatch) {
 			case "disappear":
 				dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId }));
 				break;
-			case "update":
-				dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
-				break;
-			default: break;
+			case "update": dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
 		}
 	};
 }
@@ -8337,6 +8353,7 @@ const BrowserContent = (t0) => {
 		t1,
 		t2,
 		/* @__PURE__ */ jsx(Card, {
+			"data-testid": "media-browser",
 			display: "flex",
 			height: "fill",
 			ref: setPortalElement,