sanity-plugin-media 6.1.1 → 6.1.2

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import "@sanity/ui/styles.css";
 import { AssetSourceComponentProps, FieldDefinitionBase, FileDefinition, ImageDefinition, InputProps, WidenInitialValue, WidenValidation } from "sanity";
 import { ComponentType, JSX } from "react";
 import "@reduxjs/toolkit";

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;;;;;;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"}

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";
@@ -22,9 +23,11 @@ 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";
@@ -1964,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,
@@ -1981,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",
@@ -2023,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];
@@ -2075,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;
@@ -2253,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, {
@@ -2286,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];
@@ -2592,7 +2597,7 @@ function Details({ formUpdating, handleCreateTag, control, errors, register, all
 	"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,
@@ -2670,9 +2675,9 @@ function Details({ formUpdating, handleCreateTag, control, errors, register, all
 				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}`,
@@ -2685,7 +2690,7 @@ function Details({ formUpdating, handleCreateTag, control, errors, register, all
 						"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}`),
@@ -3010,7 +3015,7 @@ const DialogAssetEdit = (props) => {
 	$[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];
@@ -3050,7 +3055,7 @@ const DialogAssetEdit = (props) => {
 	$[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,
@@ -3238,16 +3243,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-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);
@@ -3468,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];
@@ -3524,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];
@@ -4150,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];
@@ -4388,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,
@@ -4401,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,
@@ -4687,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);
@@ -4716,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,
@@ -5313,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)) }),
@@ -5355,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);
@@ -5366,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;
@@ -5422,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;
@@ -5704,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, {
@@ -6009,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;
@@ -6458,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;
@@ -6491,7 +6496,7 @@ const OrderSelect = () => {
 				} })),
 				padding: 2,
 				selected,
-				space: 4,
+				gap: 4,
 				style: { minWidth: "200px" },
 				text: getOrderTitle(item.field, item.direction)
 			}, index);
@@ -6660,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];
@@ -6701,7 +6706,7 @@ const Controls = () => {
 		display: t13,
 		marginX: 2,
 		children: /* @__PURE__ */ jsxs(Inline, {
-			space: 2,
+			gap: 2,
 			style: t14,
 			children: [
 				t16,
@@ -6755,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]
 		})
@@ -6912,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,
@@ -6931,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;
@@ -7185,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);
@@ -7556,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];
@@ -7609,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;
@@ -7803,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;