sanity-plugin-media 2.4.0 → 2.4.1

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 = () => {
     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,6 +2107,7 @@ 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,
@@ -2199,7 +2213,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])};
     }
@@ -2656,7 +2670,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 +2699,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 +2721,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 +2736,7 @@ const imageDprUrl = (asset, options) => {
   menuList: (styles) => ({
     ...styles
   }),
+  // @ts-expect-error - fix typings later
   multiValue: (styles, { isDisabled }) => ({
     ...styles,
     backgroundColor: getSchemeColor(scheme, "mutedHoveredBg"),
@@ -2730,6 +2748,7 @@ const imageDprUrl = (asset, options) => {
     fontSize: "inherit",
     padding: 0
   }),
+  // @ts-expect-error - fix typings later
   multiValueRemove: (styles) => ({
     ...styles,
     borderTopLeftRadius: 0,
@@ -2739,11 +2758,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,10 +2776,12 @@ 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,
@@ -2793,7 +2816,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;
@@ -2934,7 +2957,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 +2965,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%),
@@ -3409,9 +3432,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;
   }
@@ -3765,14 +3788,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 +3806,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,16 +3814,19 @@ 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();
@@ -4181,7 +4207,7 @@ 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;
@@ -4289,10 +4315,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);
@@ -4307,6 +4333,7 @@ const CardWrapper = styled__default.default(ui.Flex)`
       computeItemKey: (index) => items[index]?.id,
       components: {
         Item: ItemContainer,
+        // @ts-expect-error - fix typings later
         List: ListContainer
       },
       endReached: onLoadMore,
@@ -4352,14 +4379,17 @@ 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 = () => {
+    `
+), 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) => {
     e.stopPropagation(), dispatch(allSelected ? assetsActions.pickClear() : assetsActions.pickAll());
   };
@@ -4419,12 +4449,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 +4463,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,14 +4471,14 @@ 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(
@@ -5112,7 +5143,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 +5154,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;