sanity-plugin-media 2.4.2 → 3.0.1

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), isHotkey = require("is-hotkey"), groq = require("groq"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), z = require("zod"), format = require("date-fns/format"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), formatRelative = require("date-fns/formatRelative"), reactDropzone = require("react-dropzone");
+var jsxRuntime = require("react/jsx-runtime"), sanity = require("sanity"), icons = require("@sanity/icons"), ui = require("@sanity/ui"), react = require("react"), groq = require("groq"), reactRedux = require("react-redux"), toolkit = require("@reduxjs/toolkit"), nanoid = require("nanoid"), reduxObservable = require("redux-observable"), rxjs = require("rxjs"), operators$1 = require("rxjs/operators"), uuid = require("@sanity/uuid"), styledComponents = require("styled-components"), pluralize = require("pluralize"), reactNprogress = require("@tanem/react-nprogress"), color = require("@sanity/color"), Select = require("react-select"), reactVirtuoso = require("react-virtuoso"), zod = require("@hookform/resolvers/zod"), reactHookForm = require("react-hook-form"), z = require("zod"), format = require("date-fns/format"), filesize = require("filesize"), copy = require("copy-to-clipboard"), router = require("sanity/router"), reactFileIcon = require("react-file-icon"), CreatableSelect = require("react-select/creatable"), formatRelative = require("date-fns/formatRelative"), reactDropzone = require("react-dropzone");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -19,11 +19,148 @@ function _interopNamespaceCompat(e) {
     }
   }), n.default = e, Object.freeze(n);
 }
-var isHotkey__default = /* @__PURE__ */ _interopDefaultCompat(isHotkey), groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), format__default = /* @__PURE__ */ _interopDefaultCompat(format), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect), formatRelative__default = /* @__PURE__ */ _interopDefaultCompat(formatRelative);
+var groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), pluralize__default = /* @__PURE__ */ _interopDefaultCompat(pluralize), Select__default = /* @__PURE__ */ _interopDefaultCompat(Select), z__namespace = /* @__PURE__ */ _interopNamespaceCompat(z), format__default = /* @__PURE__ */ _interopDefaultCompat(format), filesize__default = /* @__PURE__ */ _interopDefaultCompat(filesize), copy__default = /* @__PURE__ */ _interopDefaultCompat(copy), CreatableSelect__default = /* @__PURE__ */ _interopDefaultCompat(CreatableSelect), formatRelative__default = /* @__PURE__ */ _interopDefaultCompat(formatRelative);
+function getDefaultExportFromCjs(x) {
+  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x.default : x;
+}
+var lib = {}, hasRequiredLib;
+function requireLib() {
+  if (hasRequiredLib) return lib;
+  hasRequiredLib = 1, Object.defineProperty(lib, "__esModule", {
+    value: !0
+  });
+  for (var IS_MAC = typeof window < "u" && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform), MODIFIERS = {
+    alt: "altKey",
+    control: "ctrlKey",
+    meta: "metaKey",
+    shift: "shiftKey"
+  }, ALIASES = {
+    add: "+",
+    break: "pause",
+    cmd: "meta",
+    command: "meta",
+    ctl: "control",
+    ctrl: "control",
+    del: "delete",
+    down: "arrowdown",
+    esc: "escape",
+    ins: "insert",
+    left: "arrowleft",
+    mod: IS_MAC ? "meta" : "control",
+    opt: "alt",
+    option: "alt",
+    return: "enter",
+    right: "arrowright",
+    space: " ",
+    spacebar: " ",
+    up: "arrowup",
+    win: "meta",
+    windows: "meta"
+  }, CODES = {
+    backspace: 8,
+    tab: 9,
+    enter: 13,
+    shift: 16,
+    control: 17,
+    alt: 18,
+    pause: 19,
+    capslock: 20,
+    escape: 27,
+    " ": 32,
+    pageup: 33,
+    pagedown: 34,
+    end: 35,
+    home: 36,
+    arrowleft: 37,
+    arrowup: 38,
+    arrowright: 39,
+    arrowdown: 40,
+    insert: 45,
+    delete: 46,
+    meta: 91,
+    numlock: 144,
+    scrolllock: 145,
+    ";": 186,
+    "=": 187,
+    ",": 188,
+    "-": 189,
+    ".": 190,
+    "/": 191,
+    "`": 192,
+    "[": 219,
+    "\\": 220,
+    "]": 221,
+    "'": 222
+  }, f = 1; f < 20; f++)
+    CODES["f" + f] = 111 + f;
+  function isHotkey2(hotkey, options, event) {
+    options && !("byKey" in options) && (event = options, options = null), Array.isArray(hotkey) || (hotkey = [hotkey]);
+    var array = hotkey.map(function(string) {
+      return parseHotkey(string, options);
+    }), check = function(e) {
+      return array.some(function(object) {
+        return compareHotkey(object, e);
+      });
+    }, ret = event == null ? check : check(event);
+    return ret;
+  }
+  function isCodeHotkey(hotkey, event) {
+    return isHotkey2(hotkey, event);
+  }
+  function isKeyHotkey(hotkey, event) {
+    return isHotkey2(hotkey, { byKey: !0 }, event);
+  }
+  function parseHotkey(hotkey, options) {
+    var byKey = options && options.byKey, ret = {};
+    hotkey = hotkey.replace("++", "+add");
+    var values = hotkey.split("+"), length = values.length;
+    for (var k in MODIFIERS)
+      ret[MODIFIERS[k]] = !1;
+    var _iteratorNormalCompletion = !0, _didIteratorError = !1, _iteratorError = void 0;
+    try {
+      for (var _iterator = values[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = !0) {
+        var value = _step.value, optional = value.endsWith("?") && value.length > 1;
+        optional && (value = value.slice(0, -1));
+        var name = toKeyName(value), modifier = MODIFIERS[name];
+        if (value.length > 1 && !modifier && !ALIASES[value] && !CODES[name])
+          throw new TypeError('Unknown modifier: "' + value + '"');
+        (length === 1 || !modifier) && (byKey ? ret.key = name : ret.which = toKeyCode(value)), modifier && (ret[modifier] = optional ? null : !0);
+      }
+    } catch (err) {
+      _didIteratorError = !0, _iteratorError = err;
+    } finally {
+      try {
+        !_iteratorNormalCompletion && _iterator.return && _iterator.return();
+      } finally {
+        if (_didIteratorError)
+          throw _iteratorError;
+      }
+    }
+    return ret;
+  }
+  function compareHotkey(object, event) {
+    for (var key in object) {
+      var expected = object[key], actual = void 0;
+      if (expected != null && (key === "key" && event.key != null ? actual = event.key.toLowerCase() : key === "which" ? actual = expected === 91 && event.which === 93 ? 91 : event.which : actual = event[key], !(actual == null && expected === !1) && actual !== expected))
+        return !1;
+    }
+    return !0;
+  }
+  function toKeyCode(name) {
+    name = toKeyName(name);
+    var code = CODES[name] || name.toUpperCase().charCodeAt(0);
+    return code;
+  }
+  function toKeyName(name) {
+    return name = name.toLowerCase(), name = ALIASES[name] || name, name;
+  }
+  return lib.default = isHotkey2, lib.isHotkey = isHotkey2, lib.isCodeHotkey = isCodeHotkey, lib.isKeyHotkey = isKeyHotkey, lib.parseHotkey = parseHotkey, lib.compareHotkey = compareHotkey, lib.toKeyCode = toKeyCode, lib.toKeyName = toKeyName, lib;
+}
+var libExports = requireLib(), isHotkey = /* @__PURE__ */ getDefaultExportFromCjs(libExports);
 const useKeyPress = (hotkey, onPress) => {
   const keyPressed = react.useRef(!1), downHandler = react.useCallback(
     (e) => {
-      isHotkey__default.default(hotkey, e) && (keyPressed.current = !0, onPress && onPress());
+      isHotkey(hotkey, e) && (keyPressed.current = !0, onPress && onPress());
     },
     [hotkey, onPress]
   ), upHandler = react.useCallback(() => {
@@ -1687,6 +1824,7 @@ const ButtonViewGroup = () => {
 function usePortalPopoverProps() {
   const portal = ui.usePortal();
   return {
+    animate: !0,
     constrainSize: !0,
     floatingBoundary: portal.element,
     portal: !0,
@@ -1802,36 +1940,29 @@ const OrderSelect = () => {
 function getSchemeColor(scheme, colorKey) {
   return SCHEME_COLORS[colorKey]?.[scheme];
 }
-const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => styledComponents.css`
-    background: ${getSchemeColor(scheme, "bg")};
+const Container$1 = styledComponents.styled(ui.Box)(({ $scheme, theme }) => styledComponents.css`
+    background: ${getSchemeColor($scheme, "bg")};
     border-radius: ${ui.rem(theme.sanity.radius[2])};
   `), SearchFacet = (props) => {
   const { children, facet } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), handleClose = () => {
     dispatch(searchActions.facetsRemoveById({ facetId: facet.id }));
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Container$1,
-    {
-      padding: [2, 2, 1],
-      scheme,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: ["flex-start", "flex-start", "center"], direction: ["column", "column", "row"], children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingBottom: [3, 3, 0], paddingLeft: 1, paddingRight: 2, paddingTop: [1, 1, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
-          ui.Label,
-          {
-            size: 0,
-            style: {
-              whiteSpace: "nowrap"
-            },
-            children: facet.title
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
-          children,
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 1, paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { onClick: handleClose }) }) })
-        ] })
-      ] })
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsx(Container$1, { padding: [2, 2, 1], $scheme: scheme, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: ["flex-start", "flex-start", "center"], direction: ["column", "column", "row"], children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingBottom: [3, 3, 0], paddingLeft: 1, paddingRight: 2, paddingTop: [1, 1, 0], children: /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Label,
+      {
+        size: 0,
+        style: {
+          whiteSpace: "nowrap"
+        },
+        children: facet.title
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 1, paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { onClick: handleClose }) }) })
+    ] })
+  ] }) });
 }, TextInputNumber = (props) => {
   const { onValueChange, value, ...remainingProps } = props;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2033,7 +2164,6 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
   radius: themeRadius$1,
   space: themeSpace$1
 } = ui.studioTheme, reactSelectStyles$1 = (scheme) => ({
-  // @ts-expect-error - fix typings later
   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")},
@@ -2055,7 +2185,6 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
       }
     };
   },
-  // @ts-expect-error - fix typings later
   input: (styles) => ({
     ...styles,
     color: "var(--card-fg-color)",
@@ -2063,19 +2192,16 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
     fontSize: themeTextSizes[1].fontSize,
     marginLeft: ui.rem(themeSpace$1[2])
   }),
-  // @ts-expect-error - fix typings later
   menuList: (styles) => ({
     ...styles,
     padding: 0
   }),
-  // @ts-expect-error - fix typings later
   noOptionsMessage: (styles) => ({
     ...styles,
     fontFamily: ui.studioTheme.fonts.text.family,
     fontSize: themeTextSizes[1].fontSize,
     lineHeight: "1em"
   }),
-  // @ts-expect-error - fix typings later
   option: (styles, { isFocused }) => ({
     ...styles,
     backgroundColor: isFocused ? getSchemeColor(scheme, "spotBlue") : "transparent",
@@ -2090,14 +2216,12 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
       color: getSchemeColor(scheme, "bg")
     }
   }),
-  // @ts-expect-error - fix typings later
   placeholder: (styles) => ({
     ...styles,
     fontSize: themeTextSizes[1].fontSize,
     marginLeft: ui.rem(themeSpace$1[2]),
     paddingLeft: 0
   }),
-  // @ts-expect-error - fix typings later
   singleValue: (styles) => ({
     ...styles,
     alignItems: "center",
@@ -2105,7 +2229,6 @@ const Container$1 = styledComponents.styled(ui.Box)(({ scheme, theme }) => style
     height: "100%",
     marginLeft: ui.rem(themeSpace$1[2])
   }),
-  // @ts-expect-error - fix typings later
   valueContainer: (styles) => ({
     ...styles,
     margin: 0,
@@ -2497,6 +2620,7 @@ const DebugControls = () => {
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tooltip,
           {
+            animate: !0,
             content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: badConnection ? "Bad connection: +3000ms & 50% chance to fail" : "No connection throttling" }) }),
             fallbackPlacements: ["right", "left"],
             placement: "bottom",
@@ -2549,7 +2673,7 @@ const imageDprUrl = (asset, options) => {
   const val = formData[key];
   return typeof val == "object" && val !== null && val.constructor !== Array ? acc[key] = sanitizeFormData(val) : val === "" || typeof val > "u" || val?.length === 0 ? acc[key] = null : typeof val == "string" && val ? acc[key] = formData[key].trim() : acc[key] = formData[key], acc;
 }, {}), isFileAsset = (asset) => asset._type === "sanity.fileAsset", isImageAsset = (asset) => asset._type === "sanity.imageAsset", getAssetResolution = (asset) => `${asset.metadata.dimensions.width}x${asset.metadata.dimensions.height}px`, ButtonAssetCopy = ({ disabled, url }) => {
-  const popoverProps = usePortalPopoverProps(), refPopoverTimeout = react.useRef(), [popoverVisible, setPopoverVisible] = react.useState(!1), handleClick = () => {
+  const popoverProps = usePortalPopoverProps(), refPopoverTimeout = react.useRef(null), [popoverVisible, setPopoverVisible] = react.useState(!1), handleClick = () => {
     refPopoverTimeout.current && clearTimeout(refPopoverTimeout.current), setPopoverVisible(!0), copy__default.default(url), refPopoverTimeout.current = setTimeout(() => {
       setPopoverVisible(!1);
     }, 1250);
@@ -2697,7 +2821,6 @@ const imageDprUrl = (asset, options) => {
     }
   ) : /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { extension: asset.extension, width: "50%" });
 }, { radius: themeRadius, space: themeSpace } = ui.studioTheme, reactSelectStyles = (scheme) => ({
-  // @ts-expect-error - fix typings later
   control: (styles, { isFocused }) => {
     let boxShadow = "inset 0 0 0 1px var(--card-border-color)";
     return isFocused && (boxShadow = `inset 0 0 0 1px ${getSchemeColor(scheme, "inputEnabledBorder")},
@@ -2719,12 +2842,10 @@ const imageDprUrl = (asset, options) => {
       }
     };
   },
-  // @ts-expect-error - fix typings later
   indicatorsContainer: (styles, { isDisabled }) => ({
     ...styles,
     opacity: isDisabled ? 0.25 : 1
   }),
-  // @ts-expect-error - fix typings later
   input: (styles) => ({
     ...styles,
     color: "var(--card-fg-color)",
@@ -2734,7 +2855,6 @@ const imageDprUrl = (asset, options) => {
   menuList: (styles) => ({
     ...styles
   }),
-  // @ts-expect-error - fix typings later
   multiValue: (styles, { isDisabled }) => ({
     ...styles,
     backgroundColor: getSchemeColor(scheme, "mutedHoveredBg"),
@@ -2746,7 +2866,6 @@ const imageDprUrl = (asset, options) => {
     fontSize: "inherit",
     padding: 0
   }),
-  // @ts-expect-error - fix typings later
   multiValueRemove: (styles) => ({
     ...styles,
     borderTopLeftRadius: 0,
@@ -2756,13 +2875,11 @@ const imageDprUrl = (asset, options) => {
       backgroundColor: getSchemeColor(scheme, "mutedSelectedBg")
     }
   }),
-  // @ts-expect-error - fix typings later
   noOptionsMessage: (styles) => ({
     ...styles,
     fontFamily: ui.studioTheme.fonts.text.family,
     lineHeight: "1em"
   }),
-  // @ts-expect-error - fix typings later
   option: (styles, { isFocused }) => ({
     ...styles,
     backgroundColor: isFocused ? getSchemeColor(scheme, "spotBlue") : "transparent",
@@ -2774,12 +2891,10 @@ const imageDprUrl = (asset, options) => {
       color: getSchemeColor(scheme, "bg")
     }
   }),
-  // @ts-expect-error - fix typings later
   placeholder: (styles) => ({
     ...styles,
     marginLeft: ui.rem(themeSpace[2])
   }),
-  // @ts-expect-error - fix typings later
   valueContainer: (styles) => ({
     ...styles,
     margin: 0,
@@ -2824,6 +2939,7 @@ const imageDprUrl = (asset, options) => {
       error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
         ui.Tooltip,
         {
+          animate: !0,
           content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { muted: !0, size: 1, children: [
             /* @__PURE__ */ jsxRuntime.jsx(StyledErrorOutlineIcon, { style: { marginRight: "0.1em" } }),
             error
@@ -2939,6 +3055,7 @@ const imageDprUrl = (asset, options) => {
   ] }) : content = "No unpublished changes" : content = "There are validation errors that need to be fixed before this document can be published", /* @__PURE__ */ jsxRuntime.jsx(
     ui.Tooltip,
     {
+      animate: !0,
       content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, style: { maxWidth: "185px" }, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: content }) }),
       disabled: "ontouchstart" in window,
       placement: "top",
@@ -2956,14 +3073,14 @@ const imageDprUrl = (asset, options) => {
     }
   );
 }, Image$1 = styledComponents.styled.img`
-  --checkerboard-color: ${(props) => props.scheme ? getSchemeColor(props.scheme, "bg2") : "inherit"};
+  --checkerboard-color: ${(props) => props.$scheme ? getSchemeColor(props.$scheme, "bg2") : "inherit"};
 
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
 
-  ${(props) => props.showCheckerboard && styledComponents.css`
+  ${(props) => props.$showCheckerboard && styledComponents.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%),
@@ -3090,183 +3207,205 @@ const imageDprUrl = (asset, options) => {
       }
     )
   ] }) });
-  return currentAsset ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { footer: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}), header: "Asset details", id, onClose: handleClose, width: 3, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: ["column-reverse", "column-reverse", "row-reverse"], children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginTop: [5, 5, 0], padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(sanity.WithReferringDocuments, { documentStore, id: currentAsset._id, children: ({ isLoading, referringDocuments }) => {
-        const uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
-        return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.TabList, { space: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Tab,
-              {
-                "aria-controls": "details-panel",
-                disabled: formUpdating,
-                id: "details-tab",
-                label: "Details",
-                onClick: () => setTabSection("details"),
-                selected: tabSection === "details",
-                size: 2
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.Tab,
-              {
-                "aria-controls": "references-panel",
-                disabled: formUpdating,
-                id: "references-tab",
-                label: `References${!isLoading && Array.isArray(uniqueReferringDocuments) ? ` (${uniqueReferringDocuments.length})` : ""}`,
-                onClick: () => setTabSection("references"),
-                selected: tabSection === "references",
-                size: 2
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", marginTop: 4, onSubmit: handleSubmit(onSubmit), children: [
-            !assetItem && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This file cannot be found \u2013 it may have been deleted." }) }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                "aria-labelledby": "details",
-                hidden: tabSection !== "details",
-                id: "details-panel",
-                children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormFieldInputTags,
-                    {
-                      control,
-                      disabled: formUpdating,
-                      error: errors?.opt?.media?.tags?.message,
-                      label: "Tags",
-                      name: "opt.media.tags",
-                      onCreateTag: handleCreateTag,
-                      options: allTagOptions,
-                      placeholder: "Select or create...",
-                      value: assetTagOptions
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormFieldInputText,
-                    {
-                      ...register("originalFilename"),
-                      disabled: formUpdating,
-                      error: errors?.originalFilename?.message,
-                      label: "Filename",
-                      name: "originalFilename",
-                      value: currentAsset?.originalFilename
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormFieldInputText,
-                    {
-                      ...register("title"),
-                      disabled: formUpdating,
-                      error: errors?.title?.message,
-                      label: "Title",
-                      name: "title",
-                      value: currentAsset?.title
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormFieldInputText,
-                    {
-                      ...register("altText"),
-                      disabled: formUpdating,
-                      error: errors?.altText?.message,
-                      label: "Alt Text",
-                      name: "altText",
-                      value: currentAsset?.altText
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    FormFieldInputTextarea,
-                    {
-                      ...register("description"),
-                      disabled: formUpdating,
-                      error: errors?.description?.message,
-                      label: "Description",
-                      name: "description",
-                      rows: 5,
-                      value: currentAsset?.description
-                    }
-                  ),
-                  creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
-                    FormFieldInputText,
-                    {
-                      ...register("creditLine"),
-                      error: errors?.creditLine?.message,
-                      label: "Credit",
-                      name: "creditLine",
-                      value: currentAsset?.creditLine,
-                      disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
-                    }
-                  )
-                ] })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                "aria-labelledby": "references",
-                hidden: tabSection !== "references",
-                id: "references-panel",
-                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 5, children: assetItem?.asset && /* @__PURE__ */ jsxRuntime.jsx(
-                  DocumentList,
+  return currentAsset ? /* @__PURE__ */ jsxRuntime.jsxs(
+    Dialog,
+    {
+      animate: !0,
+      footer: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}),
+      header: "Asset details",
+      id,
+      onClose: handleClose,
+      width: 3,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: ["column-reverse", "column-reverse", "row-reverse"], children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { flex: 1, marginTop: [5, 5, 0], padding: 4, children: /* @__PURE__ */ jsxRuntime.jsx(sanity.WithReferringDocuments, { documentStore, id: currentAsset._id, children: ({ isLoading, referringDocuments }) => {
+            const uniqueReferringDocuments = getUniqueDocuments(referringDocuments);
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.TabList, { space: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Tab,
                   {
-                    documents: uniqueReferringDocuments,
-                    isLoading
+                    "aria-controls": "details-panel",
+                    disabled: formUpdating,
+                    id: "details-tab",
+                    label: "Details",
+                    onClick: () => setTabSection("details"),
+                    selected: tabSection === "details",
+                    size: 2
                   }
-                ) })
-              }
-            )
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Tab,
+                  {
+                    "aria-controls": "references-panel",
+                    disabled: formUpdating,
+                    id: "references-tab",
+                    label: `References${!isLoading && Array.isArray(uniqueReferringDocuments) ? ` (${uniqueReferringDocuments.length})` : ""}`,
+                    onClick: () => setTabSection("references"),
+                    selected: tabSection === "references",
+                    size: 2
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", marginTop: 4, onSubmit: handleSubmit(onSubmit), children: [
+                !assetItem && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This file cannot be found \u2013 it may have been deleted." }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.TabPanel,
+                  {
+                    "aria-labelledby": "details",
+                    hidden: tabSection !== "details",
+                    id: "details-panel",
+                    children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormFieldInputTags,
+                        {
+                          control,
+                          disabled: formUpdating,
+                          error: errors?.opt?.media?.tags?.message,
+                          label: "Tags",
+                          name: "opt.media.tags",
+                          onCreateTag: handleCreateTag,
+                          options: allTagOptions,
+                          placeholder: "Select or create...",
+                          value: assetTagOptions
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormFieldInputText,
+                        {
+                          ...register("originalFilename"),
+                          disabled: formUpdating,
+                          error: errors?.originalFilename?.message,
+                          label: "Filename",
+                          name: "originalFilename",
+                          value: currentAsset?.originalFilename
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormFieldInputText,
+                        {
+                          ...register("title"),
+                          disabled: formUpdating,
+                          error: errors?.title?.message,
+                          label: "Title",
+                          name: "title",
+                          value: currentAsset?.title
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormFieldInputText,
+                        {
+                          ...register("altText"),
+                          disabled: formUpdating,
+                          error: errors?.altText?.message,
+                          label: "Alt Text",
+                          name: "altText",
+                          value: currentAsset?.altText
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        FormFieldInputTextarea,
+                        {
+                          ...register("description"),
+                          disabled: formUpdating,
+                          error: errors?.description?.message,
+                          label: "Description",
+                          name: "description",
+                          rows: 5,
+                          value: currentAsset?.description
+                        }
+                      ),
+                      creditLine?.enabled && /* @__PURE__ */ jsxRuntime.jsx(
+                        FormFieldInputText,
+                        {
+                          ...register("creditLine"),
+                          error: errors?.creditLine?.message,
+                          label: "Credit",
+                          name: "creditLine",
+                          value: currentAsset?.creditLine,
+                          disabled: formUpdating || creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+                        }
+                      )
+                    ] })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.TabPanel,
+                  {
+                    "aria-labelledby": "references",
+                    hidden: tabSection !== "references",
+                    id: "references-panel",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 5, children: assetItem?.asset && /* @__PURE__ */ jsxRuntime.jsx(
+                      DocumentList,
+                      {
+                        documents: uniqueReferringDocuments,
+                        isLoading
+                      }
+                    ) })
+                  }
+                )
+              ] })
+            ] });
+          } }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 1, padding: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { aspectRatio: "1" }, children: [
+              isFileAsset(currentAsset) && /* @__PURE__ */ jsxRuntime.jsx(FileAssetPreview, { asset: currentAsset }),
+              isImageAsset(currentAsset) && /* @__PURE__ */ jsxRuntime.jsx(
+                Image$1,
+                {
+                  draggable: !1,
+                  $scheme: scheme,
+                  $showCheckerboard: !currentAsset?.metadata?.isOpaque,
+                  src: imageDprUrl(currentAsset, { height: 600, width: 600 })
+                }
+              )
+            ] }),
+            currentAsset && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(AssetMetadata, { asset: currentAsset, item: assetItem }) })
           ] })
-        ] });
-      } }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { flex: 1, padding: 4, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { aspectRatio: "1" }, children: [
-          isFileAsset(currentAsset) && /* @__PURE__ */ jsxRuntime.jsx(FileAssetPreview, { asset: currentAsset }),
-          isImageAsset(currentAsset) && /* @__PURE__ */ jsxRuntime.jsx(
-            Image$1,
-            {
-              draggable: !1,
-              scheme,
-              showCheckerboard: !currentAsset?.metadata?.isOpaque,
-              src: imageDprUrl(currentAsset, { height: 600, width: 600 })
-            }
-          )
         ] }),
-        currentAsset && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginTop: 4, children: /* @__PURE__ */ jsxRuntime.jsx(AssetMetadata, { asset: currentAsset, item: assetItem }) })
-      ] })
-    ] }),
-    children
-  ] }) : null;
+        children
+      ]
+    }
+  ) : null;
 }, DialogConfirm = (props) => {
   const { children, dialog } = props, dispatch = reactRedux.useDispatch(), handleClose = () => {
     dispatch(dialogActions.remove({ id: dialog?.id }));
   }, handleConfirm = () => {
     dialog?.closeDialogId && dispatch(dialogActions.remove({ id: dialog?.closeDialogId })), dialog?.confirmCallbackAction && dispatch(dialog.confirmCallbackAction), handleClose();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fontSize: 1, mode: "bleed", onClick: handleClose, text: "Cancel" }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.Button,
-      {
-        fontSize: 1,
-        onClick: handleConfirm,
-        text: dialog?.confirmText,
-        tone: dialog?.tone
-      }
-    )
-  ] }) }), {}), header: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.WarningOutlineIcon, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: dialog?.headerTitle })
-  ] }), {}), id: "confirm", onClose: handleClose, width: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
-      dialog?.title && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: dialog.title }),
-      dialog?.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: dialog.description }) })
-    ] }) }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Dialog,
+    {
+      animate: !0,
+      footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { justify: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { fontSize: 1, mode: "bleed", onClick: handleClose, text: "Cancel" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            fontSize: 1,
+            onClick: handleConfirm,
+            text: dialog?.confirmText,
+            tone: dialog?.tone
+          }
+        )
+      ] }) }), {}),
+      header: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.WarningOutlineIcon, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { marginLeft: 2, children: dialog?.headerTitle })
+      ] }), {}),
+      id: "confirm",
+      onClose: handleClose,
+      width: 1,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 4, paddingY: 4, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { space: 3, children: [
+          dialog?.title && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: dialog.title }),
+          dialog?.description && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: /* @__PURE__ */ jsxRuntime.jsx("em", { children: dialog.description }) })
+        ] }) }),
+        children
+      ]
+    }
+  );
 }, DialogSearchFacets = (props) => {
   const {
     children,
@@ -3274,7 +3413,7 @@ const imageDprUrl = (asset, options) => {
   } = props, dispatch = reactRedux.useDispatch(), handleClose = react.useCallback(() => {
     dispatch(dialogActions.clear());
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { header: "Filters", id, onClose: handleClose, width: 1, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, header: "Filters", id, onClose: handleClose, width: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { padding: 3, children: [
       /* @__PURE__ */ jsxRuntime.jsx(SearchFacets, { layout: "stack" }),
       /* @__PURE__ */ jsxRuntime.jsx(SearchFacetsControl, {})
@@ -3307,7 +3446,7 @@ const imageDprUrl = (asset, options) => {
     creatingError && setError("name", {
       message: creatingError?.message
     });
-  }, [creatingError, setError]), /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
+  }, [creatingError, setError]), /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, footer: /* @__PURE__ */ jsxRuntime.jsx(() => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 3, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { justify: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(
     FormSubmitButton,
     {
       disabled: formUpdating || !isDirty || !isValid,
@@ -3413,7 +3552,7 @@ const imageDprUrl = (asset, options) => {
       }
     )
   ] }) });
-  return currentTag ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { footer: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}), header: "Edit Tag", id, onClose: handleClose, width: 1, children: [
+  return currentTag ? /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, footer: /* @__PURE__ */ jsxRuntime.jsx(Footer, {}), header: "Edit Tag", id, onClose: handleClose, width: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { as: "form", padding: 4, onSubmit: handleSubmit(onSubmit), children: [
       !tagItem && /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { marginBottom: 3, padding: 3, radius: 2, shadow: 1, tone: "critical", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: "This tag cannot be found \u2013 it may have been deleted." }) }),
       /* @__PURE__ */ jsxRuntime.jsx("button", { style: { display: "none" }, tabIndex: -1, type: "submit" }),
@@ -3447,6 +3586,7 @@ const imageDprUrl = (asset, options) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     ui.Tooltip,
     {
+      animate: !0,
       content: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { padding: 2, width: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 1, children: tooltip }) }),
       disabled: "ontouchstart" in window,
       placement: "top",
@@ -3685,7 +3825,7 @@ const imageDprUrl = (asset, options) => {
   } = props, dispatch = reactRedux.useDispatch(), handleClose = react.useCallback(() => {
     dispatch(dialogActions.clear());
   }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { header: "All Tags", id, onClose: handleClose, width: 1, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { animate: !0, header: "All Tags", id, onClose: handleClose, width: 1, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       ui.Box,
       {
@@ -3793,18 +3933,18 @@ const imageDprUrl = (asset, options) => {
   position: relative;
   width: 100%;
 `, CardContainer = styledComponents.styled(ui.Flex)(
-  ({ picked, theme, updating }) => styledComponents.css`
+  ({ $picked, theme, $updating }) => styledComponents.css`
       border: 1px solid transparent;
       height: 100%;
-      pointer-events: ${updating ? "none" : "auto"};
+      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"};
+      border: ${$picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
 
-      ${!updating && styledComponents.css`
+      ${!$updating && styledComponents.css`
         @media (hover: hover) and (pointer: fine) {
           &:hover {
             border: 1px solid var(--card-border-color);
@@ -3813,14 +3953,13 @@ const imageDprUrl = (asset, options) => {
       `}
     `
 ), ContextActionContainer$2 = styledComponents.styled(ui.Flex)(
-  // @ts-expect-error - fix typings later
-  ({ scheme }) => styledComponents.css`
+  ({ $scheme }) => styledComponents.css`
       cursor: pointer;
       height: ${PANEL_HEIGHT}px;
       transition: all 300ms;
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background: ${getSchemeColor(scheme, "bg")};
+          background: ${getSchemeColor($scheme, "bg")};
         }
       }
     `
@@ -3840,7 +3979,7 @@ const imageDprUrl = (asset, options) => {
   }, handleContextActionClick = (e) => {
     e.stopPropagation(), onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked }));
   }, opacityContainer = updating ? 0.5 : 1, opacityPreview = selected || updating ? 0.25 : 1;
-  return /* @__PURE__ */ jsxRuntime.jsx(CardWrapper$1, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContainer, { direction: "column", picked, updating: item.updating, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(CardWrapper$1, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsxs(CardContainer, { direction: "column", $picked: picked, $updating: item.updating, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       ui.Box,
       {
@@ -3856,8 +3995,8 @@ const imageDprUrl = (asset, options) => {
               Image$1,
               {
                 draggable: !1,
-                scheme,
-                showCheckerboard: !isOpaque,
+                $scheme: scheme,
+                $showCheckerboard: !isOpaque,
                 src: imageDprUrl(asset, { height: 250, width: 250 }),
                 style: {
                   draggable: !1,
@@ -3906,7 +4045,7 @@ const imageDprUrl = (asset, options) => {
         align: "center",
         onClick: handleContextActionClick,
         paddingX: 1,
-        scheme,
+        $scheme: scheme,
         style: { opacity: opacityContainer },
         children: [
           onSelect ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -3945,6 +4084,7 @@ const imageDprUrl = (asset, options) => {
         children: /* @__PURE__ */ jsxRuntime.jsx(
           ui.Tooltip,
           {
+            animate: !0,
             content: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { padding: 2, width: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: error }) }),
             placement: "left",
             portal: !0,
@@ -4254,7 +4394,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             Image$1,
             {
               draggable: !1,
-              scheme,
+              $scheme: scheme,
               src: item.objectUrl,
               style: {
                 opacity: 0.4
@@ -4313,16 +4453,26 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
   ) });
 }, CARD_HEIGHT = 220, CARD_WIDTH = 240, VirtualCell = react.memo(
   ({ item, selected }) => item?.type === "asset" ? /* @__PURE__ */ jsxRuntime.jsx(CardAsset$1, { id: item.id, selected }) : item?.type === "upload" ? /* @__PURE__ */ jsxRuntime.jsx(CardUpload, { id: item.id }) : null
-), ItemContainer = styledComponents.styled.div`
+), StyledItemContainer = styledComponents.styled.div`
   height: ${CARD_HEIGHT}px;
   width: ${CARD_WIDTH}px;
-`, ListContainer = styledComponents.styled.div`
+`;
+function ItemContainer(props) {
+  const { context, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledItemContainer, { ...rest });
+}
+const StyledListContainer = styledComponents.styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
   grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
   justify-content: center;
   margin: 0 auto;
-`, AssetGridVirtualized = (props) => {
+`;
+function ListContainer(props) {
+  const { context, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledListContainer, { ...rest });
+}
+const AssetGridVirtualized = (props) => {
   const { items, onLoadMore } = props, selectedAssets = useTypedSelector((state) => state.selected.assets), selectedIds = selectedAssets && selectedAssets.map((asset) => asset._id) || [], totalCount = items?.length;
   return totalCount === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(
     reactVirtuoso.VirtuosoGrid,
@@ -4331,7 +4481,6 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       computeItemKey: (index) => items[index]?.id,
       components: {
         Item: ItemContainer,
-        // @ts-expect-error - fix typings later
         List: ListContainer
       },
       endReached: onLoadMore,
@@ -4378,12 +4527,11 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     }
   ) });
 }, ContextActionContainer$1 = styledComponents.styled(ui.Flex)(
-  // @ts-expect-error - fix typings later
-  ({ scheme }) => styledComponents.css`
+  ({ $scheme }) => styledComponents.css`
       cursor: pointer;
       @media (hover: hover) and (pointer: fine) {
         &:hover {
-          background: ${getSchemeColor(scheme, "bg")};
+          background: ${getSchemeColor($scheme, "bg")};
         }
       }
     `
@@ -4417,7 +4565,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             align: "center",
             justify: "center",
             onClick: handleContextActionClick,
-            scheme,
+            $scheme: scheme,
             style: {
               height: "100%",
               position: "relative"
@@ -4447,39 +4595,34 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
       ]
     }
   );
-}, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styledComponents.styled(ui.Grid)(
-  // @ts-expect-error - fix typings later
-  ({
-    scheme,
-    selected,
-    updating
-  }) => styledComponents.css`
-      align-items: center;
-      cursor: ${selected ? "default" : "pointer"};
-      height: 100%;
-      pointer-events: ${updating ? "none" : "auto"};
-      user-select: none;
-      white-space: nowrap;
+}, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styledComponents.styled(ui.Grid)(({ $scheme, $selected, $updating }) => styledComponents.css`
+    align-items: center;
+    cursor: ${$selected ? "default" : "pointer"};
+    height: 100%;
+    pointer-events: ${$updating ? "none" : "auto"};
+    user-select: none;
+    white-space: nowrap;
 
-      ${!updating && styledComponents.css`
-        @media (hover: hover) and (pointer: fine) {
-          &:hover {
-            background: ${getSchemeColor(scheme, "bg")};
-          }
+    ${!$updating && styledComponents.css`
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: ${getSchemeColor($scheme, "bg")};
         }
-      `}
-    `
-), ContextActionContainer = styledComponents.styled(ui.Flex)(({ scheme }) => styledComponents.css`
-    cursor: pointer;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor(scheme, "bg2")};
       }
-    }
-  `), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
+    `}
+  `), ContextActionContainer = styledComponents.styled(ui.Flex)(
+  ({ $scheme }) => styledComponents.css`
+      cursor: pointer;
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: ${getSchemeColor($scheme, "bg2")};
+        }
+      }
+    `
+), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), TableRowAsset = (props) => {
-  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = react.useState(!1), refCountVisibleTimeout = react.useRef(), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = ui.useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = react.useCallback(
+  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), [referenceCountVisible, setReferenceCountVisible] = react.useState(!1), refCountVisibleTimeout = react.useRef(null), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), mediaIndex = ui.useMediaIndex(), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions(), handleContextActionClick = react.useCallback(
     (e) => {
       e.stopPropagation(), asset && (onSelect ? dispatch(dialogActions.showAssetEdit({ assetId: asset._id })) : shiftPressed.current && !picked ? dispatch(assetsActions.pickRange({ startId: lastPicked || asset._id, endId: asset._id })) : dispatch(assetsActions.pick({ assetId: asset._id, picked: !picked })));
     },
@@ -4499,21 +4642,21 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
     ContainerGrid,
     {
       onClick: selected ? void 0 : handleClick,
-      scheme,
-      selected,
+      $scheme: scheme,
+      $selected: selected,
       style: {
         gridColumnGap: mediaIndex < 3 ? 0 : "16px",
         gridRowGap: 0,
         gridTemplateColumns: mediaIndex < 3 ? GRID_TEMPLATE_COLUMNS.SMALL : GRID_TEMPLATE_COLUMNS.LARGE,
         gridTemplateRows: mediaIndex < 3 ? "auto" : "1fr"
       },
-      updating: item.updating,
+      $updating: item.updating,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ContextActionContainer,
           {
             onClick: handleContextActionClick,
-            scheme,
+            $scheme: scheme,
             style: {
               alignItems: "center",
               gridColumn: 1,
@@ -4563,8 +4706,8 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
                   Image$1,
                   {
                     draggable: !1,
-                    scheme,
-                    showCheckerboard: !isOpaque,
+                    $scheme: scheme,
+                    $showCheckerboard: !isOpaque,
                     src: imageDprUrl(asset, { height: 100, width: 100 })
                   }
                 )
@@ -4691,6 +4834,7 @@ const CardWrapper = styledComponents.styled(ui.Flex)`
             children: error && /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
               ui.Tooltip,
               {
+                animate: !0,
                 content: /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { padding: 2, width: 0, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: error }) }),
                 placement: "left",
                 portal: !0,
@@ -4755,7 +4899,15 @@ const TableRowUpload = (props) => {
               width: "100px"
             },
             children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Box, { style: { height: "100%", position: "relative" }, children: [
-              item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsxRuntime.jsx(Image$1, { draggable: !1, scheme, src: item.objectUrl, style: { opacity: 0.25 } }),
+              item.assetType === "image" && item?.objectUrl && /* @__PURE__ */ jsxRuntime.jsx(
+                Image$1,
+                {
+                  draggable: !1,
+                  $scheme: scheme,
+                  src: item.objectUrl,
+                  style: { opacity: 0.25 }
+                }
+              ),
               item.assetType === "file" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "100%", opacity: 0.1 }, children: /* @__PURE__ */ jsxRuntime.jsx(FileIcon, { width: "40px" }) }),
               !isComplete && percentLoaded !== 100 && /* @__PURE__ */ jsxRuntime.jsx(
                 ui.Flex,
@@ -5243,14 +5395,15 @@ const UploadDropzone = (props) => {
     children
   ] }) });
 }, BrowserContent = ({ onClose }) => {
-  const client = useVersionedClient(), [portalElement, setPortalElement] = react.useState(null), dispatch = reactRedux.useDispatch(), handleAssetUpdate = (update) => {
-    const { documentId, result, transition } = update;
-    transition === "appear" && dispatch(assetsActions.listenerCreateQueue({ asset: result })), transition === "disappear" && dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId })), transition === "update" && dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
-  }, handleTagUpdate = (update) => {
-    const { documentId, result, transition } = update;
-    transition === "appear" && dispatch(tagsActions.listenerCreateQueue({ tag: result })), transition === "disappear" && dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId })), transition === "update" && dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
-  };
+  const client = useVersionedClient(), [portalElement, setPortalElement] = react.useState(null), dispatch = reactRedux.useDispatch();
   return react.useEffect(() => {
+    const handleAssetUpdate = (update) => {
+      const { documentId, result, transition } = update;
+      transition === "appear" && dispatch(assetsActions.listenerCreateQueue({ asset: result })), transition === "disappear" && dispatch(assetsActions.listenerDeleteQueue({ assetId: documentId })), transition === "update" && dispatch(assetsActions.listenerUpdateQueue({ asset: result }));
+    }, handleTagUpdate = (update) => {
+      const { documentId, result, transition } = update;
+      transition === "appear" && dispatch(tagsActions.listenerCreateQueue({ tag: result })), transition === "disappear" && dispatch(tagsActions.listenerDeleteQueue({ tagId: documentId })), transition === "update" && dispatch(tagsActions.listenerUpdateQueue({ tag: result }));
+    };
     dispatch(assetsActions.loadPageIndex({ pageIndex: 0 })), dispatch(tagsActions.fetchRequest());
     const subscriptionAsset = client.listen(
       groq__default.default`*[_type in ["sanity.fileAsset", "sanity.imageAsset"] && !(_id in path("drafts.**"))]`
@@ -5258,7 +5411,7 @@ const UploadDropzone = (props) => {
     return () => {
       subscriptionAsset?.unsubscribe(), subscriptionTag?.unsubscribe();
     };
-  }, []), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
+  }, [client, dispatch]), /* @__PURE__ */ jsxRuntime.jsx(ui.PortalProvider, { element: portalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(UploadDropzone, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Dialogs, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Notifications, {}),
     /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { display: "flex", height: "fill", ref: setPortalElement, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", flex: 1, children: [
@@ -5275,7 +5428,7 @@ const UploadDropzone = (props) => {
     ] }) })
   ] }) });
 }, Browser = (props) => {
-  const client = useVersionedClient(), scheme = sanity.useColorSchemeValue();
+  const client = useVersionedClient();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ReduxProvider,
     {
@@ -5283,10 +5436,10 @@ const UploadDropzone = (props) => {
       client,
       document: props?.document,
       selectedAssets: props?.selectedAssets,
-      children: /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { scheme, theme: ui.studioTheme, children: /* @__PURE__ */ jsxRuntime.jsx(ui.ToastProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs(AssetBrowserDispatchProvider, { onSelect: props?.onSelect, children: [
         /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
         /* @__PURE__ */ jsxRuntime.jsx(BrowserContent, { onClose: props?.onClose })
-      ] }) }) })
+      ] })
     }
   );
 }, FormBuilderTool = (props) => {