sanity-plugin-media 6.1.3 → 6.1.5

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/FormBuilderTool/index.tsx","../src/components/DialogAssetEdit/Details.tsx","../src/formSchema/index.ts","../src/types/index.ts","../src/plugin.tsx","../src/components/AutoTagInputWrapper/index.tsx","../src/utils/mediaField.ts"],"mappings":";;;;;;;;cAQM,kBAAe,OAAW,8CAAyB,IAAA;KCsB7C;EACV;EACA,kBAAkB;EAClB,SAAS,QAAQ;EACjB,QAAQ,YAAY;EACpB,UAAU,gBAAgB;EAC1B,eAAe;EACf,iBAAiB;EACjB,cAAc;EACd;EACA;EACA;EACA;EACA;IACE;IACA;;EAEF,UAAU;;cCjCC,iBAAe,EAAA;;;;;;;;;;iBAKZ,mBAAmB;EAAW;MAAa,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KCJ/C;EACV;;KAGU;EACV;EACA;EACA;IACE,UAAU,cACR;MAAgB,uBAAuB,OAAO,iBAAiB,IAAI;;;EAGvE;IACE;IACA;;EAEF;;;;;;;EAOA;;;;;EAKA,UAAU;;KAGA;EACV;EACA;GACC;;KAGE,2BAA2B;KAE3B;EACH,UAAU;EACV,cAAc;EACd;IACE;MACE,SAAS;MACT,OAAO;;;EAGX,QAAQ;;KAYE,QAAQ,YAAY;KAEpB,gBAAgB,EAAE,MAAM,kBAAkB;KAgJ1C,YAAY,sBACtB;EACE;;KAuBQ,aAAa,2BACvB;EACE;EACA,aAAa;;KAqBL;EACV;EACA;EACA;;KA0IU,kBAAkB,EAAE,aAAa;cCzYhC;;;;;;cAkBA,wBAAK,cAAA;KCpBN,oBAAoB;EAC9B;;;;;;;;;;;;;;;;;;;;;iBAsBc,aAAa,OAAO,oCAAiB,IAAA;KC7BhD,wBAAwB,KAAK,8BAChC;EACE;EACA;EACA,UAAU;;KAGT,uBAAuB,KAAK,6BAC/B;EACE;EACA;EACA,UAAU;;KAGT,wBAAwB,KAAK,8BAChC;EACE,UAAU;IAA8B;;EACxC;IAAa,cAAc;;IACzB,kBACJ;KAEG,uBAAuB,KAAK,6BAC/B;EACE,UAAU;IAA6B;;EACvC;IAAa,cAAc;;IACzB,kBACJ;;;;;;;;;;;;;;;;;;;;;;iBAuBc,WAAW,QAAQ,wBAAwB;iBAC3C,WAAW,QAAQ,uBAAuB"}
+{"version":3,"file":"index.d.ts","names":[],"sources":["../src/components/FormBuilderTool/index.tsx","../src/components/DialogAssetEdit/Details.tsx","../src/formSchema/index.ts","../src/types/index.ts","../src/plugin.tsx","../src/components/AutoTagInputWrapper/index.tsx","../src/utils/mediaField.ts"],"mappings":";;;;;;;;cAQM,kBAAe,OAAW,8CAAyB,IAAA;KCsB7C;EACV;EACA,kBAAkB;EAClB,SAAS,QAAQ;EACjB,QAAQ,YAAY;EACpB,UAAU,gBAAgB;EAC1B,eAAe;EACf,iBAAiB;EACjB,cAAc;EACd;EACA;EACA;EACA;EACA;IACE;IACA;;EAEF,UAAU;;cCjCC,iBAAe,EAAA;;;;;;;;;;iBAKZ,mBAAmB;EAAW;MAAa,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KCJ/C;EACV;;KAGU;EACV;EACA;EACA;IACE,UAAU,cACR;MAAgB,uBAAuB,OAAO,iBAAiB,IAAI;;;EAGvE;IACE;IACA;;EAEF;;;;;;;EAOA;;;;;EAKA,UAAU;;KAGA;EACV;EACA;GACC;;KAGE,2BAA2B;KAE3B;EACH,UAAU;EACV,cAAc;EACd;IACE;MACE,SAAS;MACT,OAAO;;;EAGX,QAAQ;;KAYE,QAAQ,YAAY;KAEpB,gBAAgB,EAAE,MAAM,kBAAkB;KAgJ1C,YAAY,sBACtB;EACE;;KAuBQ,aAAa,2BACvB;EACE;EACA,aAAa;;KAqBL;EACV;EACA;EACA;;KA0IU,kBAAkB,EAAE,aAAa;cCzYhC;;;;;;cAmBA,wBAAK,cAAA;KCrBN,oBAAoB;EAC9B;;;;;;;;;;;;;;;;;;;;;iBAsBc,aAAa,OAAO,oCAAiB,IAAA;KC7BhD,wBAAwB,KAAK,8BAChC;EACE;EACA;EACA,UAAU;;KAGT,uBAAuB,KAAK,6BAC/B;EACE;EACA;EACA,UAAU;;KAGT,wBAAwB,KAAK,8BAChC;EACE,UAAU;IAA8B;;EACxC;IAAa,cAAc;;IACzB,kBACJ;KAEG,uBAAuB,KAAK,6BAC/B;EACE,UAAU;IAA6B;;EACvC;IAAa,cAAc;;IACzB,kBACJ;;;;;;;;;;;;;;;;;;;;;;iBAuBc,WAAW,QAAQ,wBAAwB;iBAC3C,WAAW,QAAQ,uBAAuB"}

package/dist/index.js

@@ -11,7 +11,7 @@ import { combineReducers, configureStore, createAction, createSelector, createSl
 import groq from "groq";
 import { nanoid } from "nanoid";
 import { combineEpics, createEpicMiddleware, ofType } from "redux-observable";
-import { EMPTY, Observable, Subject, empty, from, iif, merge, of, throwError } from "rxjs";
+import { EMPTY, Observable, Subject, from, iif, merge, of, throwError } from "rxjs";
 import { bufferTime, catchError, concatMap, debounceTime, delay, filter, first, map, mergeMap, switchMap, takeUntil, withLatestFrom } from "rxjs/operators";
 import { uuid } from "@sanity/uuid";
 import pluralize from "pluralize";
@@ -494,10 +494,10 @@ const useTypedSelector = useSelector, useVersionedClient = () => {
 	SMALL: "3rem 100px auto 1.5rem",
 	LARGE: "3rem 100px auto 5.5rem 5.5rem 3.5rem 8.5rem 4.75rem 2rem"
 }, FOLDER_DOCUMENT_NAME = "media.folder", TAG_DOCUMENT_NAME = "media.tag", debugThrottle = (throttled) => function(source) {
-	return iif(() => !!throttled, source.pipe(delay(3e3), mergeMap((v) => Math.random() > .5 ? throwError({
+	return iif(() => !!throttled, source.pipe(delay(3e3), mergeMap((v) => Math.random() > .5 ? throwError(() => ({
 		message: "Test error",
 		statusCode: 500
-	}) : of(v))), source);
+	})) : of(v))), source);
 }, buildExcludeTagsFragment = (excludeTagSlugs) => {
 	let serializedExcludeTagSlugs = excludeTagSlugs?.length ? JSON.stringify(excludeTagSlugs) : void 0;
 	return serializedExcludeTagSlugs ? groq`!(defined(opt.media.tags) && count(opt.media.tags[@._ref in *[_type == "${TAG_DOCUMENT_NAME}" && name.current in ${serializedExcludeTagSlugs}]._id]) > 0)` : void 0;
@@ -555,10 +555,10 @@ function repointNestedImages(node, newAsset, assetToReplaceId, topLevelField, ma
 	for (let [key, value] of Object.entries(node)) typeof value == "object" && value && repointNestedImages(value, newAsset, assetToReplaceId, topLevelField || key, matchedTopLevelFields);
 }
 const checkTagName = (client, name) => function(source) {
-	return source.pipe(mergeMap(() => from(client.fetch(groq`count(*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $name])`, { name }))), mergeMap((existingTagCount) => existingTagCount > 0 ? throwError({
+	return source.pipe(mergeMap(() => from(client.fetch(groq`count(*[_type == "${TAG_DOCUMENT_NAME}" && name.current == $name])`, { name }))), mergeMap((existingTagCount) => existingTagCount > 0 ? throwError(() => ({
 		message: "Tag already exists",
 		statusCode: 409
-	}) : of(!0)));
+	})) : of(!0)));
 }, getTagSelectOptions = (tags) => tags.reduce((acc, val) => {
 	let tag = val?.tag;
 	return tag && acc.push({
@@ -2110,7 +2110,7 @@ const ButtonAssetCopy = (t0) => {
 	}), $[2] = doc, $[3] = onClick, $[4] = schemaType, $[5] = t1) : t1 = $[5], t1;
 }, Container$2 = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "Container",
-	componentId: "sc-9go1uy-0"
+	componentId: "sc-ov4bwf-0"
 })(({ theme }) => css`text{font-family:${theme.sanity.fonts.text.family} !important;font-size:8px !important;font-weight:500 !important;}`), FileIcon$1 = (props) => {
 	let $ = c(11), { extension, onClick, width } = props, t0;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = { height: "100%" }, $[0] = t0) : t0 = $[0];
@@ -2173,20 +2173,21 @@ const ButtonAssetCopy = (t0) => {
 	}), $[7] = asset.extension, $[8] = t0), t0;
 }, FormSubmitButton = (props) => {
 	let $ = c(14), { disabled, isValid, lastUpdated, onClick } = props, content;
-	if (isValid) if (lastUpdated) {
-		let t0;
-		$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("br", {}), $[0] = t0) : t0 = $[0];
-		let t1;
-		$[1] === lastUpdated ? t1 = $[2] : (t1 = format(new Date(lastUpdated), "PPp"), $[1] = lastUpdated, $[2] = t1);
-		let t2;
-		$[3] === t1 ? t2 = $[4] : (t2 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			"Last updated",
-			t0,
-			" ",
-			t1
-		] }), $[3] = t1, $[4] = t2), content = t2;
-	} else content = "No unpublished changes";
-	else content = "There are validation errors that need to be fixed before this document can be published";
+	if (isValid) {
+		if (lastUpdated) {
+			let t0;
+			$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("br", {}), $[0] = t0) : t0 = $[0];
+			let t1;
+			$[1] === lastUpdated ? t1 = $[2] : (t1 = format(new Date(lastUpdated), "PPp"), $[1] = lastUpdated, $[2] = t1);
+			let t2;
+			$[3] === t1 ? t2 = $[4] : (t2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+				"Last updated",
+				t0,
+				" ",
+				t1
+			] }), $[3] = t1, $[4] = t2), content = t2;
+		} else content = "No unpublished changes";
+	} else content = "There are validation errors that need to be fixed before this document can be published";
 	let t0;
 	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t0 = { maxWidth: "185px" }, $[5] = t0) : t0 = $[5];
 	let t1;
@@ -2216,7 +2217,7 @@ const ButtonAssetCopy = (t0) => {
 		portal: !0,
 		children: t2
 	}), $[11] = t1, $[12] = t2, $[13] = t3) : t3 = $[13], t3;
-}, SCHEME_COLORS = {
+}, { color: themeColor } = studioTheme, SCHEME_COLORS = {
 	bg: {
 		dark: hues.gray[950].hex,
 		light: hues.gray[50].hex
@@ -2226,28 +2227,28 @@ const ButtonAssetCopy = (t0) => {
 		light: hues.gray[100].hex
 	},
 	inputEnabledBorder: {
-		dark: studioTheme.color.dark.default.input.default.enabled.border,
-		light: studioTheme.color.light.default.input.default.enabled.border
+		dark: themeColor.dark.default.input.default.enabled.border,
+		light: themeColor.light.default.input.default.enabled.border
 	},
 	inputHoveredBorder: {
-		dark: studioTheme.color.dark.default.input.default.hovered.border,
-		light: studioTheme.color.light.default.input.default.hovered.border
+		dark: themeColor.dark.default.input.default.hovered.border,
+		light: themeColor.light.default.input.default.hovered.border
 	},
 	mutedHoveredBg: {
-		dark: studioTheme.color.dark.primary.muted.primary.hovered.bg,
-		light: studioTheme.color.light.primary.muted.primary.hovered.bg
+		dark: themeColor.dark.primary.muted.primary.hovered.bg,
+		light: themeColor.light.primary.muted.primary.hovered.bg
 	},
 	mutedHoveredFg: {
-		dark: studioTheme.color.dark.primary.muted.primary.hovered.fg,
-		light: studioTheme.color.light.primary.muted.primary.hovered.fg
+		dark: themeColor.dark.primary.muted.primary.hovered.fg,
+		light: themeColor.light.primary.muted.primary.hovered.fg
 	},
 	mutedSelectedBg: {
-		dark: studioTheme.color.dark.primary.muted.primary.selected.bg,
-		light: studioTheme.color.light.primary.muted.primary.selected.bg
+		dark: themeColor.dark.primary.muted.primary.selected.bg,
+		light: themeColor.light.primary.muted.primary.selected.bg
 	},
 	spotBlue: {
-		dark: studioTheme.color.dark.primary.spot.blue,
-		light: studioTheme.color.light.primary.spot.blue
+		dark: themeColor.dark.primary.spot.blue,
+		light: themeColor.light.primary.spot.blue
 	}
 };
 function getSchemeColor(scheme, colorKey) {
@@ -2255,10 +2256,10 @@ function getSchemeColor(scheme, colorKey) {
 }
 const Image$1 = styled.img.attrs({ crossOrigin: "anonymous" }).withConfig({
 	displayName: "Image",
-	componentId: "sc-xak9t2-0"
+	componentId: "sc-nu8r0m-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-5i8ed3-0"
+	componentId: "sc-ec70oi-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, {
@@ -2766,7 +2767,7 @@ function renderDefaultDetails(props) {
 	return /* @__PURE__ */ jsx(Details, { ...props });
 }
 const DialogAssetEdit = (props) => {
-	let $ = c(149), { children, dialog: t0 } = props, { assetId, id, lastCreatedTag, lastRemovedTagIds } = t0, client = useVersionedClient(), scheme = useColorSchemeValue(), documentStore = useDocumentStore(), dispatch = useDispatch(), t1;
+	let $ = c(150), { 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);
@@ -2905,7 +2906,7 @@ const DialogAssetEdit = (props) => {
 		}).commit();
 	}, $[44] = client, $[45] = currentAsset, $[46] = locales, $[47] = t20) : t20 = $[47];
 	let handleCleanupLocales = t20, t21;
-	$[48] !== assetItem?.asset || $[49] !== dispatch ? (t21 = (formData) => {
+	$[48] !== assetItem?.asset || $[49] !== currentAsset || $[50] !== dispatch ? (t21 = (formData) => {
 		if (!assetItem?.asset) return;
 		let sanitizedFormData = sanitizeFormData(formData);
 		formData.description === "" && (sanitizedFormData.description = ""), dispatch(assetsActions.updateRequest({
@@ -2915,27 +2916,28 @@ const DialogAssetEdit = (props) => {
 				...sanitizedFormData,
 				opt: { media: {
 					...sanitizedFormData.opt.media,
-					tags: sanitizedFormData.opt.media.tags?.map(_temp7$1) || null
+					tags: sanitizedFormData.opt.media.tags?.map(_temp7$1) || null,
+					...currentAsset?.opt?.media?.folder && { folder: currentAsset.opt.media.folder }
 				} }
 			}
 		}));
-	}, $[48] = assetItem?.asset, $[49] = dispatch, $[50] = t21) : t21 = $[50], assetItem?.asset;
+	}, $[48] = assetItem?.asset, $[49] = currentAsset, $[50] = dispatch, $[51] = t21) : t21 = $[51], assetItem?.asset;
 	let onSubmit = t21, t22;
-	$[51] !== assetItem?.asset || $[52] !== client ? (t22 = () => {
+	$[52] !== assetItem?.asset || $[53] !== client ? (t22 = () => {
 		if (!assetItem?.asset) return;
 		let subscriptionAsset = client.listen(groq`*[_id == $id]`, { id: assetItem?.asset._id }).subscribe(handleAssetUpdate);
 		return () => {
 			subscriptionAsset?.unsubscribe();
 		};
-	}, $[51] = assetItem?.asset, $[52] = client, $[53] = t22) : t22 = $[53];
+	}, $[52] = assetItem?.asset, $[53] = client, $[54] = t22) : t22 = $[54];
 	let t23 = assetItem?.asset, t24;
-	$[54] !== client || $[55] !== t23 ? (t24 = [
+	$[55] !== client || $[56] !== t23 ? (t24 = [
 		t23,
 		client,
 		handleAssetUpdate
-	], $[54] = client, $[55] = t23, $[56] = t24) : t24 = $[56], useEffect(t22, t24);
+	], $[55] = client, $[56] = t23, $[57] = t24) : t24 = $[57], useEffect(t22, t24);
 	let t25, t26;
-	$[57] !== getValues || $[58] !== lastCreatedTag || $[59] !== setValue ? (t25 = () => {
+	$[58] !== getValues || $[59] !== lastCreatedTag || $[60] !== setValue ? (t25 = () => {
 		if (lastCreatedTag) {
 			let updatedTags = (getValues("opt.media.tags") || []).concat([lastCreatedTag]);
 			setValue("opt.media.tags", updatedTags, { shouldDirty: !0 });
@@ -2944,9 +2946,9 @@ const DialogAssetEdit = (props) => {
 		getValues,
 		lastCreatedTag,
 		setValue
-	], $[57] = getValues, $[58] = lastCreatedTag, $[59] = setValue, $[60] = t25, $[61] = t26) : (t25 = $[60], t26 = $[61]), useEffect(t25, t26);
+	], $[58] = getValues, $[59] = lastCreatedTag, $[60] = setValue, $[61] = t25, $[62] = t26) : (t25 = $[61], t26 = $[62]), useEffect(t25, t26);
 	let t27, t28;
-	$[62] !== getValues || $[63] !== lastRemovedTagIds || $[64] !== setValue ? (t27 = () => {
+	$[63] !== getValues || $[64] !== lastRemovedTagIds || $[65] !== 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 });
@@ -2955,19 +2957,19 @@ const DialogAssetEdit = (props) => {
 		getValues,
 		lastRemovedTagIds,
 		setValue
-	], $[62] = getValues, $[63] = lastRemovedTagIds, $[64] = setValue, $[65] = t27, $[66] = t28) : (t27 = $[65], t28 = $[66]), useEffect(t27, t28);
+	], $[63] = getValues, $[64] = lastRemovedTagIds, $[65] = setValue, $[66] = t27, $[67] = t28) : (t27 = $[66], t28 = $[67]), useEffect(t27, t28);
 	let t29;
-	$[67] !== assetItem?.asset || $[68] !== generateDefaultValues || $[69] !== reset ? (t29 = () => {
+	$[68] !== assetItem?.asset || $[69] !== generateDefaultValues || $[70] !== reset ? (t29 = () => {
 		assetUpdatedPrev.current !== assetItem?.asset._updatedAt && reset(generateDefaultValues(assetItem?.asset)), assetUpdatedPrev.current = assetItem?.asset._updatedAt;
-	}, $[67] = assetItem?.asset, $[68] = generateDefaultValues, $[69] = reset, $[70] = t29) : t29 = $[70];
+	}, $[68] = assetItem?.asset, $[69] = generateDefaultValues, $[70] = reset, $[71] = t29) : t29 = $[71];
 	let t30 = assetItem?.asset, t31;
-	$[71] !== generateDefaultValues || $[72] !== reset || $[73] !== t30 ? (t31 = [
+	$[72] !== generateDefaultValues || $[73] !== reset || $[74] !== t30 ? (t31 = [
 		t30,
 		generateDefaultValues,
 		reset
-	], $[71] = generateDefaultValues, $[72] = reset, $[73] = t30, $[74] = t31) : t31 = $[74], useEffect(t29, t31);
+	], $[72] = generateDefaultValues, $[73] = reset, $[74] = t30, $[75] = t31) : t31 = $[75], useEffect(t29, t31);
 	let t32;
-	$[75] !== handleCleanupLocales || $[76] !== hasOrphanedLocales ? (t32 = hasOrphanedLocales && /* @__PURE__ */ jsx(Card, {
+	$[76] !== handleCleanupLocales || $[77] !== hasOrphanedLocales ? (t32 = hasOrphanedLocales && /* @__PURE__ */ jsx(Card, {
 		padding: 3,
 		radius: 2,
 		shadow: 1,
@@ -2987,42 +2989,42 @@ const DialogAssetEdit = (props) => {
 				tone: "caution"
 			})]
 		})
-	}), $[75] = handleCleanupLocales, $[76] = hasOrphanedLocales, $[77] = t32) : t32 = $[77];
+	}), $[76] = handleCleanupLocales, $[77] = hasOrphanedLocales, $[78] = t32) : t32 = $[78];
 	let t33;
-	$[78] !== formUpdating || $[79] !== handleDelete ? (t33 = /* @__PURE__ */ jsx(Button, {
+	$[79] !== formUpdating || $[80] !== 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];
+	}), $[79] = formUpdating, $[80] = handleDelete, $[81] = t33) : t33 = $[81];
 	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];
+	$[82] !== handleSubmit || $[83] !== onSubmit ? (t36 = handleSubmit(onSubmit), $[82] = handleSubmit, $[83] = onSubmit, $[84] = t36) : t36 = $[84];
 	let t37;
-	$[84] !== isValid || $[85] !== t34 || $[86] !== t35 || $[87] !== t36 ? (t37 = /* @__PURE__ */ jsx(FormSubmitButton, {
+	$[85] !== isValid || $[86] !== t34 || $[87] !== t35 || $[88] !== t36 ? (t37 = /* @__PURE__ */ jsx(FormSubmitButton, {
 		disabled: t34,
 		isValid,
 		lastUpdated: t35,
 		onClick: t36
-	}), $[84] = isValid, $[85] = t34, $[86] = t35, $[87] = t36, $[88] = t37) : t37 = $[88];
+	}), $[85] = isValid, $[86] = t34, $[87] = t35, $[88] = t36, $[89] = t37) : t37 = $[89];
 	let t38;
-	$[89] !== t33 || $[90] !== t37 ? (t38 = /* @__PURE__ */ jsxs(Flex, {
+	$[90] !== t33 || $[91] !== t37 ? (t38 = /* @__PURE__ */ jsxs(Flex, {
 		justify: "space-between",
 		children: [t33, t37]
-	}), $[89] = t33, $[90] = t37, $[91] = t38) : t38 = $[91];
+	}), $[90] = t33, $[91] = t37, $[92] = t38) : t38 = $[92];
 	let t39;
-	$[92] !== t32 || $[93] !== t38 ? (t39 = /* @__PURE__ */ jsx(Box, {
+	$[93] !== t32 || $[94] !== t38 ? (t39 = /* @__PURE__ */ jsx(Box, {
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: 3,
 			children: [t32, t38]
 		})
-	}), $[92] = t32, $[93] = t38, $[94] = t39) : t39 = $[94];
+	}), $[93] = t32, $[94] = t38, $[95] = t39) : t39 = $[95];
 	let footer = t39;
 	if (!currentAsset) return null;
 	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 = {
+	$[96] !== allTagOptions || $[97] !== assetTagOptions || $[98] !== control || $[99] !== creditLine || $[100] !== currentAsset || $[101] !== currentFolderPath || $[102] !== errors || $[103] !== formUpdating || $[104] !== handleChangeFolder || $[105] !== handleCreateTag || $[106] !== handleRemoveFolder || $[107] !== locales || $[108] !== register || $[109] !== setValue || $[110] !== t40 ? (t41 = {
 		control,
 		errors,
 		formUpdating,
@@ -3038,21 +3040,21 @@ const DialogAssetEdit = (props) => {
 		onRemoveFolder: handleRemoveFolder,
 		creditLine,
 		locales
-	}, $[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];
+	}, $[96] = allTagOptions, $[97] = assetTagOptions, $[98] = control, $[99] = creditLine, $[100] = currentAsset, $[101] = currentFolderPath, $[102] = errors, $[103] = formUpdating, $[104] = handleChangeFolder, $[105] = handleCreateTag, $[106] = handleRemoveFolder, $[107] = locales, $[108] = register, $[109] = setValue, $[110] = t40, $[111] = t41) : t41 = $[111];
 	let detailsProps = t41, t42;
-	$[111] === Symbol.for("react.memo_cache_sentinel") ? (t42 = [
+	$[112] === Symbol.for("react.memo_cache_sentinel") ? (t42 = [
 		"column-reverse",
 		"column-reverse",
 		"row-reverse"
-	], $[111] = t42) : t42 = $[111];
+	], $[112] = t42) : t42 = $[112];
 	let t43;
-	$[112] === Symbol.for("react.memo_cache_sentinel") ? (t43 = [
+	$[113] === Symbol.for("react.memo_cache_sentinel") ? (t43 = [
 		5,
 		5,
 		0
-	], $[112] = t43) : t43 = $[112];
+	], $[113] = t43) : t43 = $[113];
 	let t44;
-	$[113] !== CustomDetails || $[114] !== assetItem || $[115] !== detailsProps || $[116] !== formUpdating || $[117] !== handleSubmit || $[118] !== onSubmit || $[119] !== tabSection ? (t44 = (t45) => {
+	$[114] !== CustomDetails || $[115] !== assetItem || $[116] !== detailsProps || $[117] !== formUpdating || $[118] !== handleSubmit || $[119] !== onSubmit || $[120] !== tabSection ? (t44 = (t45) => {
 		let { isLoading, referringDocuments } = t45, uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
 		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(TabList, {
 			gap: 2,
@@ -3117,9 +3119,9 @@ const DialogAssetEdit = (props) => {
 				})
 			]
 		})] });
-	}, $[113] = CustomDetails, $[114] = assetItem, $[115] = detailsProps, $[116] = formUpdating, $[117] = handleSubmit, $[118] = onSubmit, $[119] = tabSection, $[120] = t44) : t44 = $[120];
+	}, $[114] = CustomDetails, $[115] = assetItem, $[116] = detailsProps, $[117] = formUpdating, $[118] = handleSubmit, $[119] = onSubmit, $[120] = tabSection, $[121] = t44) : t44 = $[121];
 	let t45;
-	$[121] !== currentAsset._id || $[122] !== documentStore || $[123] !== t44 ? (t45 = /* @__PURE__ */ jsx(Box, {
+	$[122] !== currentAsset._id || $[123] !== documentStore || $[124] !== t44 ? (t45 = /* @__PURE__ */ jsx(Box, {
 		flex: 1,
 		marginTop: t43,
 		padding: 4,
@@ -3128,13 +3130,13 @@ const DialogAssetEdit = (props) => {
 			id: currentAsset._id,
 			children: t44
 		})
-	}), $[121] = currentAsset._id, $[122] = documentStore, $[123] = t44, $[124] = t45) : t45 = $[124];
+	}), $[122] = currentAsset._id, $[123] = documentStore, $[124] = t44, $[125] = t45) : t45 = $[125];
 	let t46;
-	$[125] === Symbol.for("react.memo_cache_sentinel") ? (t46 = { aspectRatio: "1" }, $[125] = t46) : t46 = $[125];
+	$[126] === Symbol.for("react.memo_cache_sentinel") ? (t46 = { aspectRatio: "1" }, $[126] = t46) : t46 = $[126];
 	let t47;
-	$[126] === currentAsset ? t47 = $[127] : (t47 = isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }), $[126] = currentAsset, $[127] = t47);
+	$[127] === currentAsset ? t47 = $[128] : (t47 = isFileAsset(currentAsset) && /* @__PURE__ */ jsx(FileAssetPreview, { asset: currentAsset }), $[127] = currentAsset, $[128] = t47);
 	let t48;
-	$[128] !== currentAsset || $[129] !== scheme ? (t48 = isImageAsset(currentAsset) && /* @__PURE__ */ jsx(Image$1, {
+	$[129] !== currentAsset || $[130] !== scheme ? (t48 = isImageAsset(currentAsset) && /* @__PURE__ */ jsx(Image$1, {
 		draggable: !1,
 		$scheme: scheme,
 		$showCheckerboard: !currentAsset?.metadata?.isOpaque,
@@ -3142,33 +3144,33 @@ const DialogAssetEdit = (props) => {
 			height: 600,
 			width: 600
 		})
-	}), $[128] = currentAsset, $[129] = scheme, $[130] = t48) : t48 = $[130];
+	}), $[129] = currentAsset, $[130] = scheme, $[131] = t48) : t48 = $[131];
 	let t49;
-	$[131] !== t47 || $[132] !== t48 ? (t49 = /* @__PURE__ */ jsxs(Box, {
+	$[132] !== t47 || $[133] !== t48 ? (t49 = /* @__PURE__ */ jsxs(Box, {
 		style: t46,
 		children: [t47, t48]
-	}), $[131] = t47, $[132] = t48, $[133] = t49) : t49 = $[133];
+	}), $[132] = t47, $[133] = t48, $[134] = t49) : t49 = $[134];
 	let t50;
-	$[134] !== assetItem || $[135] !== currentAsset ? (t50 = currentAsset && /* @__PURE__ */ jsx(Box, {
+	$[135] !== assetItem || $[136] !== currentAsset ? (t50 = currentAsset && /* @__PURE__ */ jsx(Box, {
 		marginTop: 4,
 		children: /* @__PURE__ */ jsx(AssetMetadata, {
 			asset: currentAsset,
 			item: assetItem
 		})
-	}), $[134] = assetItem, $[135] = currentAsset, $[136] = t50) : t50 = $[136];
+	}), $[135] = assetItem, $[136] = currentAsset, $[137] = t50) : t50 = $[137];
 	let t51;
-	$[137] !== t49 || $[138] !== t50 ? (t51 = /* @__PURE__ */ jsxs(Box, {
+	$[138] !== t49 || $[139] !== t50 ? (t51 = /* @__PURE__ */ jsxs(Box, {
 		flex: 1,
 		padding: 4,
 		children: [t49, t50]
-	}), $[137] = t49, $[138] = t50, $[139] = t51) : t51 = $[139];
+	}), $[138] = t49, $[139] = t50, $[140] = t51) : t51 = $[140];
 	let t52;
-	$[140] !== t45 || $[141] !== t51 ? (t52 = /* @__PURE__ */ jsxs(Flex, {
+	$[141] !== t45 || $[142] !== t51 ? (t52 = /* @__PURE__ */ jsxs(Flex, {
 		direction: t42,
 		children: [t45, t51]
-	}), $[140] = t45, $[141] = t51, $[142] = t52) : t52 = $[142];
+	}), $[141] = t45, $[142] = t51, $[143] = t52) : t52 = $[143];
 	let t53;
-	return $[143] !== children || $[144] !== footer || $[145] !== handleClose || $[146] !== id || $[147] !== t52 ? (t53 = /* @__PURE__ */ jsxs(Dialog$1, {
+	return $[144] !== children || $[145] !== footer || $[146] !== handleClose || $[147] !== id || $[148] !== t52 ? (t53 = /* @__PURE__ */ jsxs(Dialog$1, {
 		animate: !0,
 		footer,
 		header: "Asset details",
@@ -3176,7 +3178,7 @@ const DialogAssetEdit = (props) => {
 		onClose: handleClose,
 		width: 3,
 		children: [t52, children]
-	}), $[143] = children, $[144] = footer, $[145] = handleClose, $[146] = id, $[147] = t52, $[148] = t53) : t53 = $[148], t53;
+	}), $[144] = children, $[145] = footer, $[146] = handleClose, $[147] = id, $[148] = t52, $[149] = t53) : t53 = $[149], t53;
 };
 function _temp$35(v) {
 	return v;
@@ -3243,16 +3245,16 @@ 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-dw6rvv-0"
+	componentId: "sc-e6odx5-0"
 })`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, CardContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "CardContainer",
-	componentId: "sc-dw6rvv-1"
+	componentId: "sc-e6odx5-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-dw6rvv-2"
+	componentId: "sc-e6odx5-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-dw6rvv-3"
+	componentId: "sc-e6odx5-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);
@@ -3473,13 +3475,13 @@ function _temp2$20(d) {
 }
 const CardWrapper$1 = styled(Flex).withConfig({
 	displayName: "CardWrapper",
-	componentId: "sc-21m5j6-0"
+	componentId: "sc-l04v0k-0"
 })`box-sizing:border-box;height:100%;overflow:hidden;position:relative;width:100%;`, FolderCard = styled(Card).withConfig({
 	displayName: "FolderCard",
-	componentId: "sc-21m5j6-1"
+	componentId: "sc-l04v0k-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-21m5j6-2"
+	componentId: "sc-l04v0k-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];
@@ -3596,13 +3598,13 @@ const createThrottler = (concurrency = 4) => {
 	}, reader.readAsArrayBuffer(file), () => {
 		reader.abort();
 	};
-}), hexFromBuffer = (buffer) => Array.prototype.map.call(new Uint8Array(buffer), (x) => `00${x.toString(16)}`.slice(-2)).join(""), hashFile$ = (file) => !window.crypto || !window.crypto.subtle || !window.FileReader ? throwError({
+}), hexFromBuffer = (buffer) => Array.prototype.map.call(new Uint8Array(buffer), (x) => `00${x.toString(16)}`.slice(-2)).join(""), hashFile$ = (file) => !window.crypto || !window.crypto.subtle || !window.FileReader ? throwError(() => ({
 	message: "Unable to generate hash: uploads are only allowed in secure contexts",
 	statusCode: 500
-}) : readFile$(file).pipe(mergeMap((arrayBuffer) => window.crypto.subtle.digest("SHA-1", arrayBuffer)), map(hexFromBuffer)), uploadSanityAsset$ = (client, assetType, file, hash) => of(null).pipe(mergeMap(() => fetchExisting$(client, `sanity.${assetType}Asset`, hash)), mergeMap((existingAsset) => existingAsset ? throwError({
+})) : readFile$(file).pipe(mergeMap((arrayBuffer) => window.crypto.subtle.digest("SHA-1", arrayBuffer)), map(hexFromBuffer)), uploadSanityAsset$ = (client, assetType, file, hash) => of(null).pipe(mergeMap(() => fetchExisting$(client, `sanity.${assetType}Asset`, hash)), mergeMap((existingAsset) => existingAsset ? throwError(() => ({
 	message: "Asset already exists",
 	statusCode: 409
-}) : of(null)), mergeMap(() => client.observable.assets.upload(assetType, file, {
+})) : of(null)), mergeMap(() => client.observable.assets.upload(assetType, file, {
 	extract: [
 		"blurhash",
 		"exif",
@@ -3679,7 +3681,7 @@ const createThrottler = (concurrency = 4) => {
 		return event?.type === "progress" && event?.stage === "upload" ? of(uploadsActions.uploadProgress({
 			event,
 			uploadHash: uploadItem.hash
-		})) : empty();
+		})) : EMPTY;
 	}), catchError((error) => of(uploadsActions.uploadError({
 		error: {
 			message: error?.message || "Internal error",
@@ -4817,7 +4819,7 @@ const DialogFolders = (props) => {
 	}), $[3] = children, $[4] = handleClose, $[5] = id, $[6] = t3) : t3 = $[6], t3;
 }, Container$1 = /* @__PURE__ */ styled(Box).withConfig({
 	displayName: "Container",
-	componentId: "sc-9j5wy-0"
+	componentId: "sc-iuc26f-0"
 })(({ $scheme, theme }) => css`background:${getSchemeColor($scheme, "bg")};border-radius:${rem(theme.sanity.radius[2])};`), SearchFacet = (props) => {
 	let $ = c(22), { children, facet } = props, scheme = useColorSchemeValue(), dispatch = useDispatch(), t0;
 	$[0] !== dispatch || $[1] !== facet.id ? (t0 = () => {
@@ -5115,7 +5117,7 @@ const DialogFolders = (props) => {
 		facet,
 		children: [t3, t4]
 	}), $[15] = facet, $[16] = t3, $[17] = t4, $[18] = t5) : t5 = $[18], t5;
-}, { fonts: { text: { sizes: themeTextSizes } }, radius: themeRadius, space: themeSpace } = studioTheme, reactSelectStyles = (scheme) => ({
+}, { fonts, radius: themeRadius, space: themeSpace } = studioTheme, themeTextSizes = fonts.text.sizes, reactSelectStyles = (scheme) => ({
 	control: (styles, { isDisabled, isFocused }) => {
 		let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
 		return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
@@ -5360,7 +5362,7 @@ function _temp3$6() {
 }
 const StackContainer = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "StackContainer",
-	componentId: "sc-bz9z8l-0"
+	componentId: "sc-g9phkp-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);
@@ -7064,16 +7066,18 @@ function _temp2$5(state_0) {
 const TableHeaderItem = (props) => {
 	let $ = c(26), { field, title } = props, dispatch = useDispatch(), order = useTypedSelector(_temp$8), isActive = order.field === field, t0;
 	$[0] !== dispatch || $[1] !== field || $[2] !== isActive || $[3] !== order.direction || $[4] !== title ? (t0 = () => {
-		if (!(!field || !title)) if (isActive) {
-			let direction = order.direction === "asc" ? "desc" : "asc";
-			dispatch(assetsActions.orderSet({ order: {
+		if (!(!field || !title)) {
+			if (isActive) {
+				let direction = order.direction === "asc" ? "desc" : "asc";
+				dispatch(assetsActions.orderSet({ order: {
+					field,
+					direction
+				} }));
+			} else dispatch(assetsActions.orderSet({ order: {
 				field,
-				direction
+				direction: "asc"
 			} }));
-		} else dispatch(assetsActions.orderSet({ order: {
-			field,
-			direction: "asc"
-		} }));
+		}
 	}, $[0] = dispatch, $[1] = field, $[2] = isActive, $[3] = order.direction, $[4] = title, $[5] = t0) : t0 = $[5];
 	let handleClick = t0, t1 = !field, t2 = field ? handleClick : void 0, t3 = field ? "pointer" : "default", t4;
 	$[6] === t3 ? t4 = $[7] : (t4 = {
@@ -7114,7 +7118,7 @@ function _temp$8(state) {
 }
 const ContextActionContainer$1 = /* @__PURE__ */ styled(Flex).withConfig({
 	displayName: "ContextActionContainer",
-	componentId: "sc-fcozpt-0"
+	componentId: "sc-00jl3m-0"
 })(({ $scheme }) => css`cursor:pointer;@media (hover:hover) and (pointer:fine){&:hover{background:${getSchemeColor($scheme, "bg")};}}`), TableHeader = () => {
 	let $ = c(24), scheme = useColorSchemeValue(), dispatch = useDispatch(), fetching = useTypedSelector(_temp$7), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, t0;
 	$[0] !== allSelected || $[1] !== dispatch ? (t0 = (e) => {
@@ -7125,7 +7129,7 @@ const ContextActionContainer$1 = /* @__PURE__ */ styled(Flex).withConfig({
 		alignItems: "center",
 		background: "var(--card-bg-color)",
 		borderBottom: "1px solid var(--card-border-color)",
-		gridColumnGap: t1,
+		columnGap: t1,
 		gridTemplateColumns: GRID_TEMPLATE_COLUMNS.LARGE,
 		height: t2,
 		letterSpacing: "0.025em",
@@ -7190,13 +7194,13 @@ function _temp$7(state) {
 }
 const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 	displayName: "ContainerGrid",
-	componentId: "sc-8clx1w-0"
+	componentId: "sc-phlfmf-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-8clx1w-1"
+	componentId: "sc-phlfmf-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-8clx1w-2"
+	componentId: "sc-phlfmf-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);
@@ -7235,8 +7239,8 @@ const ContainerGrid$1 = /* @__PURE__ */ styled(Grid).withConfig({
 	}), t4 = [], $[20] = t3, $[21] = t4) : (t3 = $[20], t4 = $[21]), useEffect(t3, t4), !asset) return null;
 	let t5 = selected ? void 0 : handleClick, t6 = mediaIndex < 3 ? 0 : "16px", t7 = mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE, t8 = mediaIndex < 3 ? "auto" : "1fr", t9;
 	$[22] !== t6 || $[23] !== t7 || $[24] !== t8 ? (t9 = {
-		gridColumnGap: t6,
-		gridRowGap: 0,
+		columnGap: t6,
+		rowGap: 0,
 		gridTemplateColumns: t7,
 		gridTemplateRows: t8
 	}, $[22] = t6, $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25];
@@ -7561,10 +7565,10 @@ function _temp2$4(t0) {
 }
 const ContainerGrid = /* @__PURE__ */ styled(Grid).withConfig({
 	displayName: "ContainerGrid",
-	componentId: "sc-a1pmug-0"
+	componentId: "sc-j0br29-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-a1pmug-1"
+	componentId: "sc-j0br29-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];
@@ -7696,8 +7700,8 @@ const ContainerGrid = /* @__PURE__ */ styled(Grid).withConfig({
 	$[9] !== t3 || $[10] !== t4 || $[11] !== t5 || $[12] !== t6 ? (t7 = {
 		alignItems: "center",
 		background: t3,
-		gridColumnGap: t4,
-		gridRowGap: 0,
+		columnGap: t4,
+		rowGap: 0,
 		gridTemplateColumns: t5,
 		gridTemplateRows: t6,
 		height: "100%",