sanity-plugin-media

6.1.16.1.2
dist/index.js
~dist/index.jsModified
+52−47
Index: package/dist/index.js
===================================================================
--- package/dist/index.js
+++ package/dist/index.js
@@ -1,9 +1,10 @@
+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";
 import { combineReducers, configureStore, createAction, createSelector, createSlice, isAnyOf } from "@reduxjs/toolkit";
@@ -21,11 +22,13 @@
 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";
 import { ErrorOutlineIcon } from "@sanity/icons/ErrorOutline";
@@ -36,11 +39,13 @@
 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";
 import { ComposeIcon } from "@sanity/icons/Compose";
@@ -1963,9 +1968,9 @@
 		value: getAssetResolution(asset)
 	}), $[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,
 			t7,
@@ -1980,9 +1985,9 @@
 			height: "1px",
 			width: "100%"
 		}
 	}), /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(Stack, {
-		space: 3,
+		gap: 3,
 		children: [
 			exif.ISO && /* @__PURE__ */ jsx(Row, {
 				label: "ISO",
 				value: exif.ISO
@@ -2022,9 +2027,9 @@
 	let t15;
 	$[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];
 	let t16;
@@ -2074,9 +2079,9 @@
 		padding: 2,
 		radius: 2,
 		shadow: 1,
 		children: /* @__PURE__ */ jsx(Stack, {
-			space: 2,
+			gap: 2,
 			children: t1
 		})
 	}), $[5] = t1, $[6] = t2), t2;
 }, ReferringDocument = (props) => {
@@ -2252,9 +2257,9 @@
 	displayName: "Image",
 	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, {
 		as: "label",
@@ -2285,9 +2290,9 @@
 	let t2;
 	$[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];
 	let t3;
@@ -2591,9 +2596,9 @@
 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, {
-		space: 3,
+		gap: 3,
 		children: [
 			/* @__PURE__ */ jsx(FormFieldInputTags, {
 				control,
 				disabled: formUpdating,
@@ -2669,11 +2674,11 @@
 				shadow: 1,
 				padding: 3,
 				radius: 1,
 				children: /* @__PURE__ */ jsxs(Stack, {
-					space: 2,
+					gap: 2,
 					children: [/* @__PURE__ */ jsx(TabList, {
-						space: 2,
+						gap: 2,
 						children: locales.map((locale, idx) => /* @__PURE__ */ jsx(Tab, {
 							id: `locale-tab-${locale.id}`,
 							"aria-controls": `locale-panel-${locale.id}`,
 							selected: activeLocaleTab === idx,
@@ -2684,9 +2689,9 @@
 						id: `locale-panel-${locale_0.id}`,
 						"aria-labelledby": `locale-tab-${locale_0.id}`,
 						hidden: activeLocaleTab !== idx_0,
 						children: /* @__PURE__ */ jsxs(Stack, {
-							space: 3,
+							gap: 3,
 							children: [
 								/* @__PURE__ */ jsx(FormFieldInputText, {
 									...register(`title.${locale_0.id}`),
 									disabled: formUpdating,
@@ -3009,9 +3014,9 @@
 	let t39;
 	$[92] !== t32 || $[93] !== t38 ? (t39 = /* @__PURE__ */ jsx(Box, {
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [t32, t38]
 		})
 	}), $[92] = t32, $[93] = t38, $[94] = t39) : t39 = $[94];
 	let footer = t39;
@@ -3049,9 +3054,9 @@
 	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,
 				id: "details-tab",
@@ -3237,18 +3242,18 @@
 		window.removeEventListener("keydown", downHandler), window.removeEventListener("keyup", upHandler);
 	}), t3 = [downHandler, upHandler], $[4] = downHandler, $[5] = t2, $[6] = t3), useEffect(t2, t3), keyPressed;
 }, CardWrapper$2 = styled(Flex).withConfig({
 	displayName: "CardWrapper",
-	componentId: "sc-0wpyxz-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-0wpyxz-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-0wpyxz-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-0wpyxz-3"
+	componentId: "sc-dw6rvv-3"
 })(({ theme }) => ({ color: theme.sanity.color.spot.red })), CardAsset = (props) => {
 	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;
@@ -3467,15 +3472,15 @@
 	return d.type === "dialogAllAssets";
 }
 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];
 	let t2;
@@ -3523,9 +3528,9 @@
 		direction: "column",
 		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];
 	let t11;
@@ -4149,9 +4154,9 @@
 	$[22] !== t6 || $[23] !== t7 ? (t8 = /* @__PURE__ */ jsx(Box, {
 		paddingX: 4,
 		paddingY: 4,
 		children: /* @__PURE__ */ jsxs(Stack, {
-			space: 3,
+			gap: 3,
 			children: [t6, t7]
 		})
 	}), $[22] = t6, $[23] = t7, $[24] = t8) : t8 = $[24];
 	let t9;
@@ -4387,9 +4392,9 @@
 		children: [t16, t17]
 	}), $[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,
 			children: "Destination:"
@@ -4400,10 +4405,10 @@
 		})]
 	}), $[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,
 			t19
@@ -4686,9 +4691,9 @@
 	let t7;
 	$[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);
 	let t8;
@@ -4715,9 +4720,9 @@
 		tooltip: "Delete folder"
 	}), $[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,
 			t11
@@ -5312,9 +5317,9 @@
 			disabled: operatorType_0 === selectedOperatorType,
 			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)) }),
 		popover: popoverProps
@@ -5354,9 +5359,9 @@
 	return "No tags";
 }
 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);
 	let Items = t1;
@@ -5365,9 +5370,9 @@
 		let t2;
 		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;
 	}
@@ -5421,9 +5426,9 @@
 			disabled: t5,
 			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;
 	} else T0 = $[5], T1 = $[6], T2 = $[7], t0 = $[8], t1 = $[9], t2 = $[10];
@@ -5703,12 +5708,12 @@
 	return { name: tag?.name?.current || "" };
 }
 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, {
 		padding: 2,
@@ -6008,9 +6013,9 @@
 		children: "Loading..."
 	}), $[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;
 	$[14] !== allowCreate || $[15] !== handleTagCreate || $[16] !== tagsCreating ? (t7 = allowCreate && /* @__PURE__ */ jsx(Box, {
@@ -6457,9 +6462,9 @@
 		style: t7
 	}), $[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;
 };
@@ -6490,9 +6495,9 @@
 					field: item.field
 				} })),
 				padding: 2,
 				selected,
-				space: 4,
+				gap: 4,
 				style: { minWidth: "200px" },
 				text: getOrderTitle(item.field, item.direction)
 			}, index);
 		}
@@ -6659,9 +6664,9 @@
 	let t12;
 	$[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];
 	let t13;
@@ -6700,9 +6705,9 @@
 	$[29] !== t16 || $[30] !== t17 || $[31] !== t18 ? (t19 = /* @__PURE__ */ jsx(Box, {
 		display: t13,
 		marginX: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			style: t14,
 			children: [
 				t16,
 				t17,
@@ -6754,9 +6759,9 @@
 	let t27;
 	$[43] === t25 ? t27 = $[44] : (t27 = /* @__PURE__ */ jsx(Box, {
 		marginX: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			style: t22,
 			children: [t25, t26]
 		})
 	}), $[43] = t25, $[44] = t27);
@@ -6911,9 +6916,9 @@
 	let t2;
 	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,
 				children: "/"
@@ -6930,9 +6935,9 @@
 	return $[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsx(Box, {
 		display: t0,
 		padding: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 1,
+			gap: 1,
 			children: [t1, t2]
 		})
 	}), $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12], t3;
 };
@@ -7184,15 +7189,15 @@
 	return state.assets.fetching;
 }
 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);
 	let item = useTypedSelector(t0), mediaIndex = useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { isMultiSelect, onSelect } = useAssetSourceActions(), t1;
@@ -7555,12 +7560,12 @@
 	return isLoading ? /* @__PURE__ */ jsx(Fragment, { children: "-" }) : /* @__PURE__ */ jsx(Fragment, { children: Array.isArray(uniqueDocuments) ? uniqueDocuments.length : 0 });
 }
 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];
 	let t2;
@@ -7608,9 +7613,9 @@
 		children: "Folder"
 	}), $[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;
 	$[21] !== t12 || $[22] !== t16 || $[23] !== t9 ? (t17 = /* @__PURE__ */ jsx(Box, {
@@ -7802,9 +7807,9 @@
 		children: status
 	}), $[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;
 	$[49] !== t22 || $[50] !== t25 ? (t26 = /* @__PURE__ */ jsx(Box, {