sanity-plugin-media 6.1.4 → 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];
@@ -2217,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
@@ -2227,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) {
@@ -2256,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, {
@@ -3245,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);
@@ -3475,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];
@@ -3598,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",
@@ -3681,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",
@@ -4819,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 = () => {
@@ -5117,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")},
@@ -5362,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);
@@ -7118,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) => {
@@ -7129,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",
@@ -7194,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);
@@ -7239,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];
@@ -7565,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];
@@ -7700,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%",