sanity-plugin-media 2.4.0 → 2.4.2-canary.0

package/dist/index.d.mts

@@ -1,5 +1,4 @@
 import {AssetSourceComponentProps} from 'sanity'
-import {MediaToolOptions} from '@types'
 import {Plugin as Plugin_2} from 'sanity'
 import {default as React_2} from 'react'
 
@@ -14,6 +13,12 @@ export declare const mediaAssetSource: {
   title: string
 }
 
-export {MediaToolOptions}
+export declare type MediaToolOptions = {
+  maximumUploadSize?: number
+  creditLine: {
+    enabled: boolean
+    excludeSources?: string | string[]
+  }
+}
 
 export {}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 import {AssetSourceComponentProps} from 'sanity'
-import {MediaToolOptions} from '@types'
 import {Plugin as Plugin_2} from 'sanity'
 import {default as React_2} from 'react'
 
@@ -14,6 +13,12 @@ export declare const mediaAssetSource: {
   title: string
 }
 
-export {MediaToolOptions}
+export declare type MediaToolOptions = {
+  maximumUploadSize?: number
+  creditLine: {
+    enabled: boolean
+    excludeSources?: string | string[]
+  }
+}
 
 export {}

package/dist/index.js

@@ -1,12 +1,11 @@
 "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"), styled = 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"), 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");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
 function _interopNamespaceCompat(e) {
-  if (e && typeof e == "object" && "default" in e)
-    return e;
+  if (e && typeof e == "object" && "default" in e) return e;
   var n = /* @__PURE__ */ Object.create(null);
   return e && Object.keys(e).forEach(function(k) {
     if (k !== "default") {
@@ -20,7 +19,7 @@ function _interopNamespaceCompat(e) {
     }
   }), n.default = e, Object.freeze(n);
 }
-var isHotkey__default = /* @__PURE__ */ _interopDefaultCompat(isHotkey), groq__default = /* @__PURE__ */ _interopDefaultCompat(groq), styled__default = /* @__PURE__ */ _interopDefaultCompat(styled), 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 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);
 const useKeyPress = (hotkey, onPress) => {
   const keyPressed = react.useRef(!1), downHandler = react.useCallback(
     (e) => {
@@ -1072,7 +1071,7 @@ const UPLOADS_ACTIONS = {
     },
     fetchComplete(state, action) {
       const assets = action.payload?.assets || [];
-      assets.forEach((asset) => {
+      assets && assets.forEach((asset) => {
         state.allIds.includes(asset._id) || state.allIds.push(asset._id), state.byIds[asset._id] = {
           _type: "asset",
           asset,
@@ -1470,7 +1469,7 @@ const UPLOADS_ACTIONS = {
   (assetsPicked) => assetsPicked.length
 ), assetsActions = assetsSlice.actions;
 var assetsReducer = assetsSlice.reducer;
-const customScrollbar = styled.css`
+const customScrollbar = styledComponents.css`
   ::-webkit-scrollbar {
     width: 14px;
   }
@@ -1486,7 +1485,7 @@ const customScrollbar = styled.css`
       background-clip: padding-box;
     }
   }
-`, GlobalStyle = styled.createGlobalStyle`
+`, GlobalStyle = styledComponents.createGlobalStyle`
   .media__custom-scrollbar {
     ${customScrollbar}
   }
@@ -1805,29 +1804,36 @@ const OrderSelect = () => {
 function getSchemeColor(scheme, colorKey) {
   return SCHEME_COLORS[colorKey]?.[scheme];
 }
-const Container$1 = styled__default.default(ui.Box)(({ scheme, theme }) => styled.css`
+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.useColorScheme(), dispatch = reactRedux.useDispatch(), handleClose = () => {
+  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,
+      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(
@@ -2029,6 +2035,7 @@ const Container$1 = styled__default.default(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")},
@@ -2050,6 +2057,7 @@ const Container$1 = styled__default.default(ui.Box)(({ scheme, theme }) => style
       }
     };
   },
+  // @ts-expect-error - fix typings later
   input: (styles) => ({
     ...styles,
     color: "var(--card-fg-color)",
@@ -2057,16 +2065,19 @@ const Container$1 = styled__default.default(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",
@@ -2081,12 +2092,14 @@ const Container$1 = styled__default.default(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",
@@ -2094,21 +2107,28 @@ const Container$1 = styled__default.default(ui.Box)(({ scheme, theme }) => style
     height: "100%",
     marginLeft: ui.rem(themeSpace$1[2])
   }),
+  // @ts-expect-error - fix typings later
   valueContainer: (styles) => ({
     ...styles,
     margin: 0,
     padding: 0
   })
-}), ClearIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
-  ui.Box,
-  {
-    paddingRight: 1,
-    style: {
-      transform: "scale(0.85)"
-    },
-    children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) })
-  }
-) }), Menu$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList$1 = (props) => {
+}), ClearIndicator = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.ClearIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(
+    ui.Box,
+    {
+      paddingRight: 1,
+      style: {
+        transform: "scale(0.85)"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { muted: !0, size: 0, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) })
+    }
+  ) })
+), Menu$1 = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) })
+), MenuList$1 = (props) => {
   const { children } = props, MAX_ROWS = 5, OPTION_HEIGHT = 33;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
@@ -2126,7 +2146,10 @@ const Container$1 = styled__default.default(ui.Box)(({ scheme, theme }) => style
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...props, children });
-}, NoOptionsMessage = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, children: props.children }), Option$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", children: props.children }) }) }) }), SingleValue = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.SingleValue, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", children: props.children }) }), reactSelectComponents$1 = {
+}, NoOptionsMessage = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.NoOptionsMessage, { ...props, children: props.children }), Option$1 = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, style: { color: "inherit" }, textOverflow: "ellipsis", children: props.children }) }) }) }), SingleValue = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.SingleValue, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, textOverflow: "ellipsis", children: props.children }) })
+), reactSelectComponents$1 = {
   ClearIndicator,
   DropdownIndicator: null,
   IndicatorSeparator: null,
@@ -2136,7 +2159,7 @@ const Container$1 = styled__default.default(ui.Box)(({ scheme, theme }) => style
   Option: Option$1,
   SingleValue
 }, SearchFacetTags = ({ facet }) => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), tags = useTypedSelector((state) => selectTags(state)), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), tags = useTypedSelector((state) => selectTags(state)), tagsFetching = useTypedSelector((state) => state.tags.fetching), allTagOptions = getTagSelectOptions(tags), popoverProps = usePortalPopoverProps(), handleChange = (option) => {
     dispatch(
       searchActions.facetsUpdateById({
         id: facet.id,
@@ -2199,7 +2222,7 @@ const Container$1 = styled__default.default(ui.Box)(({ scheme, theme }) => style
       }
     ) })
   ] });
-}, StackContainer = styled__default.default(ui.Flex)(({ theme }) => styled.css`
+}, StackContainer = styledComponents.styled(ui.Flex)(({ theme }) => styledComponents.css`
     > * {
       margin-bottom: ${ui.rem(theme.sanity.space[2])};
     }
@@ -2537,7 +2560,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);
@@ -2656,7 +2679,7 @@ const imageDprUrl = (asset, options) => {
     "A document of the unknown type ",
     /* @__PURE__ */ jsxRuntime.jsx("em", { children: doc._type })
   ] }) });
-}, Container = styled__default.default(ui.Box)(({ theme }) => styled.css`
+}, Container = styledComponents.styled(ui.Box)(({ theme }) => styledComponents.css`
     text {
       font-family: ${theme.sanity.fonts.text.family} !important;
       font-size: 8px !important;
@@ -2685,6 +2708,7 @@ 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")},
@@ -2706,10 +2730,12 @@ 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)",
@@ -2719,6 +2745,7 @@ const imageDprUrl = (asset, options) => {
   menuList: (styles) => ({
     ...styles
   }),
+  // @ts-expect-error - fix typings later
   multiValue: (styles, { isDisabled }) => ({
     ...styles,
     backgroundColor: getSchemeColor(scheme, "mutedHoveredBg"),
@@ -2730,6 +2757,7 @@ const imageDprUrl = (asset, options) => {
     fontSize: "inherit",
     padding: 0
   }),
+  // @ts-expect-error - fix typings later
   multiValueRemove: (styles) => ({
     ...styles,
     borderTopLeftRadius: 0,
@@ -2739,11 +2767,13 @@ 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",
@@ -2755,16 +2785,24 @@ 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,
     padding: 0
   })
-}), DropdownIndicator = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) }) }), Menu = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) }), MenuList = (props) => {
+}), DropdownIndicator = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.DropdownIndicator, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 2, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {}) }) }) })
+), Menu = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.Menu, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { radius: 1, shadow: 2, children: props.children }) })
+), MenuList = (props) => {
   const { children } = props, MAX_ROWS = 5, OPTION_HEIGHT = 37;
   if (Array.isArray(children)) {
     const height = children.length > MAX_ROWS ? OPTION_HEIGHT * MAX_ROWS : children.length * OPTION_HEIGHT;
@@ -2782,7 +2820,10 @@ const imageDprUrl = (asset, options) => {
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Select.components.MenuList, { ...props, children });
-}, MultiValueLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props }) }) }), MultiValueRemove = (props) => /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { color: "#1f2123" }) }), Option = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
+}, MultiValueLabel = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, paddingRight: 1, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: 1, weight: "medium", children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueLabel, { ...props }) }) }), MultiValueRemove = (props) => (
+  // @ts-expect-error - fix typings later
+  /* @__PURE__ */ jsxRuntime.jsx(Select.components.MultiValueRemove, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { color: "#1f2123" }) })
+), Option = (props) => /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { paddingX: 1, paddingY: 1, children: /* @__PURE__ */ jsxRuntime.jsx(Select.components.Option, { ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { align: "center", children: [
   props.data.__isNew__ && /* @__PURE__ */ jsxRuntime.jsx(icons.AddIcon, { style: { marginRight: "3px" } }),
   props.children
 ] }) }) }), reactSelectComponents = {
@@ -2793,7 +2834,7 @@ const imageDprUrl = (asset, options) => {
   MultiValueLabel,
   MultiValueRemove,
   Option
-}, StyledErrorOutlineIcon = styled__default.default(icons.ErrorOutlineIcon)(({ theme }) => ({
+}, StyledErrorOutlineIcon = styledComponents.styled(icons.ErrorOutlineIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), FormFieldInputLabel = (props) => {
   const { description, error, label, name } = props;
@@ -2828,7 +2869,7 @@ const imageDprUrl = (asset, options) => {
     options,
     placeholder,
     value
-  } = props, { scheme } = sanity.useColorScheme(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
+  } = props, scheme = sanity.useColorSchemeValue(), creating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Box,
     {
@@ -2934,7 +2975,7 @@ const imageDprUrl = (asset, options) => {
       ) })
     }
   );
-}, Image$1 = styled__default.default.img`
+}, Image$1 = styledComponents.styled.img`
   --checkerboard-color: ${(props) => props.scheme ? getSchemeColor(props.scheme, "bg2") : "inherit"};
 
   display: block;
@@ -2942,7 +2983,7 @@ const imageDprUrl = (asset, options) => {
   height: 100%;
   object-fit: contain;
 
-  ${(props) => props.showCheckerboard && styled.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%),
@@ -2954,7 +2995,7 @@ const imageDprUrl = (asset, options) => {
   const {
     children,
     dialog: { assetId, id, lastCreatedTag, lastRemovedTagIds }
-  } = props, client = useVersionedClient(), { scheme } = sanity.useColorScheme(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = react.useCallback(
+  } = props, client = useVersionedClient(), scheme = sanity.useColorSchemeValue(), documentStore = sanity.useDocumentStore(), dispatch = reactRedux.useDispatch(), assetItem = useTypedSelector((state) => selectAssetById(state, String(assetId))), tags = useTypedSelector(selectTags), assetUpdatedPrev = react.useRef(void 0), [assetSnapshot, setAssetSnapshot] = react.useState(assetItem?.asset), [tabSection, setTabSection] = react.useState("details"), currentAsset = assetItem ? assetItem?.asset : assetSnapshot, allTagOptions = getTagSelectOptions(tags), assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset)), { creditLine } = useToolOptions(), generateDefaultValues = react.useCallback(
     (asset) => ({
       altText: asset?.altText || "",
       creditLine: asset?.creditLine || "",
@@ -3409,9 +3450,9 @@ const imageDprUrl = (asset, options) => {
     ] }),
     children
   ] }) : null;
-}, TagContainer = styled__default.default(ui.Flex)`
+}, TagContainer = styledComponents.styled(ui.Flex)`
   height: ${PANEL_HEIGHT}px;
-`, ButtonContainer = styled__default.default(ui.Flex)`
+`, ButtonContainer = styledComponents.styled(ui.Flex)`
   @media (pointer: fine) {
     visibility: hidden;
   }
@@ -3606,7 +3647,7 @@ const imageDprUrl = (asset, options) => {
     }
   );
 }, TagViewHeader = ({ allowCreate, light, title }) => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), tagsCreating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching), handleTagCreate = () => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), tagsCreating = useTypedSelector((state) => state.tags.creating), tagsFetching = useTypedSelector((state) => state.tags.fetching), handleTagCreate = () => {
     dispatch(DIALOG_ACTIONS.showTagCreate());
   };
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3765,14 +3806,14 @@ const imageDprUrl = (asset, options) => {
     const assetItems = assetIds.map((id) => ({ id, type: "asset" }));
     return [...uploadIds.map((id) => ({ id, type: "upload" })), ...assetItems];
   }
-), CardWrapper$1 = styled__default.default(ui.Flex)`
+), CardWrapper$1 = styledComponents.styled(ui.Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
-`, CardContainer = styled__default.default(ui.Flex)(
-  ({ picked, theme, updating }) => styled.css`
+`, CardContainer = styledComponents.styled(ui.Flex)(
+  ({ picked, theme, updating }) => styledComponents.css`
       border: 1px solid transparent;
       height: 100%;
       pointer-events: ${updating ? "none" : "auto"};
@@ -3783,7 +3824,7 @@ const imageDprUrl = (asset, options) => {
 
       border: ${picked ? `1px solid ${theme.sanity.color.spot.orange} !important` : "1px solid inherit"};
 
-      ${!updating && styled.css`
+      ${!updating && styledComponents.css`
         @media (hover: hover) and (pointer: fine) {
           &:hover {
             border: 1px solid var(--card-border-color);
@@ -3791,19 +3832,22 @@ const imageDprUrl = (asset, options) => {
         }
       `}
     `
-), ContextActionContainer$2 = styled__default.default(ui.Flex)(({ scheme }) => styled.css`
-    cursor: pointer;
-    height: ${PANEL_HEIGHT}px;
-    transition: all 300ms;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor(scheme, "bg")};
+), ContextActionContainer$2 = styledComponents.styled(ui.Flex)(
+  // @ts-expect-error - fix typings later
+  ({ scheme }) => styledComponents.css`
+      cursor: pointer;
+      height: ${PANEL_HEIGHT}px;
+      transition: all 300ms;
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: ${getSchemeColor(scheme, "bg")};
+        }
       }
-    }
-  `), StyledWarningOutlineIcon = styled__default.default(icons.WarningFilledIcon)(({ theme }) => ({
+    `
+), StyledWarningOutlineIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), CardAsset = (props) => {
-  const { id, selected } = props, { scheme } = sanity.useColorScheme(), shiftPressed = useKeyPress("shift"), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
+  const { id, selected } = props, scheme = sanity.useColorSchemeValue(), shiftPressed = useKeyPress("shift"), dispatch = reactRedux.useDispatch(), lastPicked = useTypedSelector((state) => state.assets.lastPicked), item = useTypedSelector((state) => selectAssetById(state, id)), asset = item?.asset, error = item?.error, isOpaque = item?.asset?.metadata?.isOpaque, picked = item?.picked, updating = item?.updating, { onSelect } = useAssetSourceActions();
   if (!asset)
     return null;
   const handleAssetClick = (e) => {
@@ -4181,14 +4225,14 @@ toolkit.createSelector(
 );
 const uploadsActions = uploadsSlice.actions;
 var uploadsReducer = uploadsSlice.reducer;
-const CardWrapper = styled__default.default(ui.Flex)`
+const CardWrapper = styledComponents.styled(ui.Flex)`
   box-sizing: border-box;
   height: 100%;
   overflow: hidden;
   position: relative;
   width: 100%;
 `, CardUpload = (props) => {
-  const { id } = props, { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
+  const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id));
   if (!item)
     return null;
   const fileSize = filesize__default.default(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
@@ -4289,10 +4333,10 @@ const CardWrapper = styled__default.default(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 = styled__default.default.div`
+), ItemContainer = styledComponents.styled.div`
   height: ${CARD_HEIGHT}px;
   width: ${CARD_WIDTH}px;
-`, ListContainer = styled__default.default.div`
+`, ListContainer = styledComponents.styled.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${CARD_WIDTH}px);
   grid-template-rows: repeat(auto-fill, ${CARD_HEIGHT}px);
@@ -4352,15 +4396,18 @@ const CardWrapper = styled__default.default(ui.Flex)`
       ]
     }
   ) });
-}, ContextActionContainer$1 = styled__default.default(ui.Flex)(({ scheme }) => styled.css`
-    cursor: pointer;
-    @media (hover: hover) and (pointer: fine) {
-      &:hover {
-        background: ${getSchemeColor(scheme, "bg")};
+}, ContextActionContainer$1 = styledComponents.styled(ui.Flex)(
+  // @ts-expect-error - fix typings later
+  ({ scheme }) => styledComponents.css`
+      cursor: pointer;
+      @media (hover: hover) and (pointer: fine) {
+        &:hover {
+          background: ${getSchemeColor(scheme, "bg")};
+        }
       }
-    }
-  `), TableHeader = () => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = ui.useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
+    `
+), TableHeader = () => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), fetching = useTypedSelector((state) => state.assets.fetching), itemsLength = useTypedSelector(selectAssetsLength), numPickedAssets = useTypedSelector(selectAssetsPickedLength), mediaIndex = ui.useMediaIndex(), { onSelect } = useAssetSourceActions(), allSelected = numPickedAssets === itemsLength, handleContextActionClick = (e) => {
     e.stopPropagation(), dispatch(allSelected ? assetsActions.pickClear() : assetsActions.pickAll());
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4419,12 +4466,13 @@ const CardWrapper = styled__default.default(ui.Flex)`
       ]
     }
   );
-}, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styled__default.default(ui.Grid)(
+}, REFERENCE_COUNT_VISIBILITY_DELAY = 750, ContainerGrid = styledComponents.styled(ui.Grid)(
+  // @ts-expect-error - fix typings later
   ({
     scheme,
     selected,
     updating
-  }) => styled.css`
+  }) => styledComponents.css`
       align-items: center;
       cursor: ${selected ? "default" : "pointer"};
       height: 100%;
@@ -4432,7 +4480,7 @@ const CardWrapper = styled__default.default(ui.Flex)`
       user-select: none;
       white-space: nowrap;
 
-      ${!updating && styled.css`
+      ${!updating && styledComponents.css`
         @media (hover: hover) and (pointer: fine) {
           &:hover {
             background: ${getSchemeColor(scheme, "bg")};
@@ -4440,17 +4488,17 @@ const CardWrapper = styled__default.default(ui.Flex)`
         }
       `}
     `
-), ContextActionContainer = styled__default.default(ui.Flex)(({ scheme }) => styled.css`
+), ContextActionContainer = styledComponents.styled(ui.Flex)(({ scheme }) => styledComponents.css`
     cursor: pointer;
     @media (hover: hover) and (pointer: fine) {
       &:hover {
         background: ${getSchemeColor(scheme, "bg2")};
       }
     }
-  `), StyledWarningIcon = styled__default.default(icons.WarningFilledIcon)(({ theme }) => ({
+  `), StyledWarningIcon = styledComponents.styled(icons.WarningFilledIcon)(({ theme }) => ({
   color: theme.sanity.color.spot.red
 })), TableRowAsset = (props) => {
-  const { id, selected } = props, { scheme } = sanity.useColorScheme(), 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 })));
     },
@@ -4676,7 +4724,7 @@ const CardWrapper = styled__default.default(ui.Flex)`
 };
 var TableRowAsset$1 = react.memo(TableRowAsset);
 const TableRowUpload = (props) => {
-  const { id } = props, { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = ui.useMediaIndex();
+  const { id } = props, scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), item = useTypedSelector((state) => selectUploadById(state, id)), mediaIndex = ui.useMediaIndex();
   if (!item)
     return null;
   const fileSize = filesize__default.default(item.size, { base: 10, round: 0 }), percentLoaded = Math.round(item.percent || 0), isComplete = item.status === "complete", isUploading = item.status === "uploading", isQueued = item.status === "queued";
@@ -4821,7 +4869,7 @@ const TableRowUpload = (props) => {
     }
   }, [items.length]), null;
 }, PickedBar = () => {
-  const { scheme } = sanity.useColorScheme(), dispatch = reactRedux.useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), handlePickClear = () => {
+  const scheme = sanity.useColorSchemeValue(), dispatch = reactRedux.useDispatch(), assetsPicked = useTypedSelector(selectAssetsPicked), handlePickClear = () => {
     dispatch(assetsActions.pickClear());
   }, handleDeletePicked = () => {
     dispatch(dialogActions.showConfirmDeleteAssets({ assets: assetsPicked }));
@@ -5112,7 +5160,7 @@ const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /
       }
     )
   }
-) : null, UploadContainer = styled__default.default.div`
+) : null, UploadContainer = styledComponents.styled.div`
   color: white;
   height: 100%;
   min-height: 100%;
@@ -5123,7 +5171,7 @@ const TagsPanel = () => useTypedSelector((state) => state.tags.panelVisible) ? /
   &:focus {
     outline: none;
   }
-`, DragActiveContainer = styled__default.default.div`
+`, DragActiveContainer = styledComponents.styled.div`
   align-items: center;
   background: rgba(0, 0, 0, 0.75);
   display: flex;
@@ -5227,7 +5275,7 @@ const UploadDropzone = (props) => {
     ] }) })
   ] }) });
 }, Browser = (props) => {
-  const client = useVersionedClient(), { scheme } = sanity.useColorScheme();
+  const client = useVersionedClient(), scheme = sanity.useColorSchemeValue();
   return /* @__PURE__ */ jsxRuntime.jsx(
     ReduxProvider,
     {