sanity-plugin-media 2.4.2 → 3.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.4.2",
+  "version": "3.0.1",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -59,54 +59,55 @@
     "@sanity/color": "^3.0.6",
     "@sanity/icons": "^3.7.0",
     "@sanity/incompatible-plugin": "^1.0.5",
-    "@sanity/ui": "^1.0 || ^2.0",
+    "@sanity/ui": "^2.15",
     "@sanity/uuid": "^3.0.1",
-    "@tanem/react-nprogress": "^5.0.0",
+    "@tanem/react-nprogress": "^5.0.55",
     "copy-to-clipboard": "^3.3.1",
     "date-fns": "^2.27.0",
     "filesize": "^9.0.0",
     "groq": "^3.0.0",
-    "is-hotkey": "^0.2.0",
+    "is-hotkey-esm": "^1.0.0",
     "nanoid": "^3.3.8",
     "pluralize": "^8.0.0",
     "react-dropzone": "^11.3.1",
-    "react-file-icon": "^1.1.0",
-    "react-hook-form": "^7.45.1",
-    "react-redux": "^8.1.3",
+    "react-file-icon": "^1.6.0",
+    "react-hook-form": "^7.54.2",
+    "react-redux": "^9.2.0",
     "react-select": "^5.3.2",
-    "react-virtuoso": "^4.3.11",
+    "react-virtuoso": "^4.12.5",
     "redux": "^5.0.1",
-    "redux-observable": "^3.0.0-rc.2",
+    "redux-observable": "3.0.0-rc.2",
     "rxjs": "^7.8.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {
-    "@commitlint/cli": "^17.2.0",
-    "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/pkg-utils": "^7.0.3",
+    "@commitlint/cli": "^17.8.1",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@sanity/pkg-utils": "^7.0.4",
     "@sanity/plugin-kit": "^4.0.19",
-    "@sanity/semantic-release-preset": "^2.0.2",
+    "@sanity/semantic-release-preset": "^2.0.5",
     "@sanity/vision": "^3.78.1",
-    "@types/is-hotkey": "^0.1.7",
-    "@types/pluralize": "^0.0.29",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "@types/react-file-icon": "^1.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.42.0",
-    "@typescript-eslint/parser": "^5.42.0",
+    "@types/is-hotkey": "^0.1.10",
+    "@types/pluralize": "^0.0.33",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@types/react-file-icon": "^1.0.4",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "conventional-changelog-conventionalcommits": "^5.0.0",
-    "eslint": "^8.27.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-sanity": "^6.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.2",
     "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "prettier-plugin-packagejson": "^2.3.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "prettier": "^2.8.8",
+    "prettier-plugin-packagejson": "^2.5.10",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-is": "^19.0.0",
     "rimraf": "^3.0.2",
     "sanity": "^3.78.1",
     "standard-version": "^9.5.0",
@@ -114,11 +115,16 @@
     "typescript": "5.7.3"
   },
   "peerDependencies": {
-    "@sanity/ui": "^1.0 || ^2.0",
-    "react": "^18",
-    "react-dom": "^18",
-    "sanity": "^3",
-    "styled-components": "^5.0 || ^6.0"
+    "@sanity/ui": "^2.15",
+    "react": "^18.3 || ^19",
+    "react-dom": "^18.3 || ^19",
+    "react-is": "^18.3 || ^19",
+    "sanity": "^3.78",
+    "styled-components": "^6.1"
+  },
+  "overrides": {
+    "react": "$react",
+    "react-dom": "$react-dom"
   },
   "engines": {
     "node": ">=18"

package/src/components/AssetGridVirtualized/index.tsx

@@ -28,18 +28,29 @@ const VirtualCell = memo(
   }
 )
 
-const ItemContainer = styled.div`
+const StyledItemContainer = styled.div`
   height: ${CARD_HEIGHT}px;
   width: ${CARD_WIDTH}px;
 `
 
-const ListContainer = styled.div`
+function ItemContainer(props: any) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
+  const {context, ...rest} = props
+  return <StyledItemContainer {...rest} />
+}
+
+const StyledListContainer = 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;
 `
+function ListContainer(props: any) {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- we're doing this to avoid sc warnings about `context` passed as an attribute
+  const {context, ...rest} = props
+  return <StyledListContainer {...rest} />
+}
 
 const AssetGridVirtualized = (props: Props) => {
   const {items, onLoadMore} = props
@@ -63,7 +74,6 @@ const AssetGridVirtualized = (props: Props) => {
       }}
       components={{
         Item: ItemContainer,
-        // @ts-expect-error - fix typings later
         List: ListContainer
       }}
       endReached={onLoadMore}

package/src/components/Browser/index.tsx

@@ -1,10 +1,10 @@
 import type {MutationEvent} from '@sanity/client'
-import {Card, Flex, PortalProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
+import {Card, Flex, PortalProvider} from '@sanity/ui'
 import type {Asset, Tag} from '../../types'
 import groq from 'groq'
 import {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
-import {useColorSchemeValue, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
+import {type AssetSourceComponentProps, type SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'
 import {AssetBrowserDispatchProvider} from '../../contexts/AssetSourceDispatchContext'
 import useVersionedClient from '../../hooks/useVersionedClient'
@@ -32,47 +32,42 @@ type Props = {
 
 const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose']}) => {
   const client = useVersionedClient()
-
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-
-  // Redux
   const dispatch = useDispatch()
 
-  // Callbacks
-  const handleAssetUpdate = (update: MutationEvent) => {
-    const {documentId, result, transition} = update
+  useEffect(() => {
+    const handleAssetUpdate = (update: MutationEvent) => {
+      const {documentId, result, transition} = update
 
-    if (transition === 'appear') {
-      dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
-    }
+      if (transition === 'appear') {
+        dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
+      }
 
-    if (transition === 'disappear') {
-      dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
-    }
+      if (transition === 'disappear') {
+        dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
+      }
 
-    if (transition === 'update') {
-      dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
+      if (transition === 'update') {
+        dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
+      }
     }
-  }
 
-  const handleTagUpdate = (update: MutationEvent) => {
-    const {documentId, result, transition} = update
+    const handleTagUpdate = (update: MutationEvent) => {
+      const {documentId, result, transition} = update
 
-    if (transition === 'appear') {
-      dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
-    }
+      if (transition === 'appear') {
+        dispatch(tagsActions.listenerCreateQueue({tag: result as Tag}))
+      }
 
-    if (transition === 'disappear') {
-      dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
-    }
+      if (transition === 'disappear') {
+        dispatch(tagsActions.listenerDeleteQueue({tagId: documentId}))
+      }
 
-    if (transition === 'update') {
-      dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
+      if (transition === 'update') {
+        dispatch(tagsActions.listenerUpdateQueue({tag: result as Tag}))
+      }
     }
-  }
 
-  // Effects
-  useEffect(() => {
     // Fetch assets: first page
     dispatch(assetsActions.loadPageIndex({pageIndex: 0}))
 
@@ -97,7 +92,7 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
       subscriptionAsset?.unsubscribe()
       subscriptionTag?.unsubscribe()
     }
-  }, [])
+  }, [client, dispatch])
 
   return (
     <PortalProvider element={portalElement}>
@@ -132,7 +127,6 @@ const BrowserContent = ({onClose}: {onClose?: AssetSourceComponentProps['onClose
 
 const Browser = (props: Props) => {
   const client = useVersionedClient()
-  const scheme = useColorSchemeValue()
 
   return (
     <ReduxProvider
@@ -141,15 +135,10 @@ const Browser = (props: Props) => {
       document={props?.document}
       selectedAssets={props?.selectedAssets}
     >
-      <ThemeProvider scheme={scheme} theme={studioTheme}>
-        <ToastProvider>
-          <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
-            <GlobalStyle />
-
-            <BrowserContent onClose={props?.onClose} />
-          </AssetBrowserDispatchProvider>
-        </ToastProvider>
-      </ThemeProvider>
+      <AssetBrowserDispatchProvider onSelect={props?.onSelect}>
+        <GlobalStyle />
+        <BrowserContent onClose={props?.onClose} />
+      </AssetBrowserDispatchProvider>
     </ReduxProvider>
   )
 }

package/src/components/ButtonAssetCopy/index.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const ButtonAssetCopy = ({disabled, url}: Props) => {
   const popoverProps = usePortalPopoverProps()
-  const refPopoverTimeout = useRef<ReturnType<typeof window.setTimeout>>()
+  const refPopoverTimeout = useRef<ReturnType<typeof window.setTimeout>>(null)
   const [popoverVisible, setPopoverVisible] = useState(false)
 
   const handleClick = () => {

package/src/components/ButtonViewGroup/index.tsx

@@ -1,6 +1,5 @@
 import {ThLargeIcon, ThListIcon} from '@sanity/icons'
 import {Button, Inline} from '@sanity/ui'
-import React from 'react'
 import {useDispatch} from 'react-redux'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {assetsActions} from '../../modules/assets'

package/src/components/CardAsset/index.tsx

@@ -39,22 +39,22 @@ const CardWrapper = styled(Flex)`
   width: 100%;
 `
 
-const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: boolean}>(
-  ({picked, theme, updating}) => {
+const CardContainer = styled(Flex)<{$picked?: boolean; theme: Theme; $updating?: boolean}>(
+  ({$picked, theme, $updating}) => {
     return 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
+      border: ${$picked
         ? `1px solid ${theme.sanity.color.spot.orange} !important`
         : '1px solid inherit'};
 
-      ${!updating &&
+      ${!$updating &&
       css`
         @media (hover: hover) and (pointer: fine) {
           &:hover {
@@ -66,16 +66,15 @@ const CardContainer = styled(Flex)<{picked?: boolean; theme: Theme; updating?: b
   }
 )
 
-const ContextActionContainer = styled(Flex)(
-  // @ts-expect-error - fix typings later
-  ({scheme}: {scheme: ThemeColorSchemeKey}) => {
+const ContextActionContainer = styled<typeof Flex, {$scheme: ThemeColorSchemeKey}>(Flex)(
+  ({$scheme}) => {
     return 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')};
         }
       }
     `
@@ -153,7 +152,7 @@ const CardAsset = (props: Props) => {
 
   return (
     <CardWrapper padding={1}>
-      <CardContainer direction="column" picked={picked} updating={item.updating}>
+      <CardContainer direction="column" $picked={picked} $updating={item.updating}>
         {/* Image */}
         <Box
           flex={1}
@@ -170,8 +169,8 @@ const CardAsset = (props: Props) => {
             {isImageAsset(asset) && (
               <Image
                 draggable={false}
-                scheme={scheme}
-                showCheckerboard={!isOpaque}
+                $scheme={scheme}
+                $showCheckerboard={!isOpaque}
                 src={imageDprUrl(asset, {height: 250, width: 250})}
                 style={{
                   draggable: false,
@@ -224,8 +223,7 @@ const CardAsset = (props: Props) => {
           align="center"
           onClick={handleContextActionClick}
           paddingX={1}
-          // @ts-expect-error - fix typings later
-          scheme={scheme}
+          $scheme={scheme}
           style={{opacity: opacityContainer}}
         >
           {onSelect ? (
@@ -266,6 +264,7 @@ const CardAsset = (props: Props) => {
             }}
           >
             <Tooltip
+              animate
               content={
                 <Container padding={2} width={0}>
                   <Text size={1}>{error}</Text>

package/src/components/CardUpload/index.tsx

@@ -90,7 +90,7 @@ const CardUpload = (props: Props) => {
           {item.assetType === 'image' && item?.objectUrl && (
             <Image
               draggable={false}
-              scheme={scheme}
+              $scheme={scheme}
               src={item.objectUrl}
               style={{
                 opacity: 0.4

package/src/components/Controls/index.tsx

@@ -1,5 +1,4 @@
 import {Box, Button, Flex, Inline, useMediaIndex} from '@sanity/ui'
-import React from 'react'
 import {useDispatch} from 'react-redux'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {dialogActions} from '../../modules/dialog'

package/src/components/DebugControls/index.tsx

@@ -49,6 +49,7 @@ const DebugControls = () => {
           </Text>
         </Box>
         <Tooltip
+          animate
           content={
             <Box padding={2}>
               <Text muted size={1}>

package/src/components/DialogAssetEdit/index.tsx

@@ -240,7 +240,14 @@ const DialogAssetEdit = (props: Props) => {
   }
 
   return (
-    <Dialog footer={<Footer />} header="Asset details" id={id} onClose={handleClose} width={3}>
+    <Dialog
+      animate
+      footer={<Footer />}
+      header="Asset details"
+      id={id}
+      onClose={handleClose}
+      width={3}
+    >
       {/*
         We reverse direction to ensure the download button doesn't appear (in the DOM) before other tabbable items.
         This ensures that the dialog doesn't scroll down to the download button (which on smaller screens, can sometimes
@@ -395,8 +402,8 @@ const DialogAssetEdit = (props: Props) => {
             {isImageAsset(currentAsset) && (
               <Image
                 draggable={false}
-                scheme={scheme}
-                showCheckerboard={!currentAsset?.metadata?.isOpaque}
+                $scheme={scheme}
+                $showCheckerboard={!currentAsset?.metadata?.isOpaque}
                 src={imageDprUrl(currentAsset, {height: 600, width: 600})}
               />
             )}

package/src/components/DialogConfirm/index.tsx

@@ -60,7 +60,14 @@ const DialogConfirm = (props: Props) => {
   )
 
   return (
-    <Dialog footer={<Footer />} header={<Header />} id="confirm" onClose={handleClose} width={1}>
+    <Dialog
+      animate
+      footer={<Footer />}
+      header={<Header />}
+      id="confirm"
+      onClose={handleClose}
+      width={1}
+    >
       <Box paddingX={4} paddingY={4}>
         <Stack space={3}>
           {dialog?.title && <Text size={1}>{dialog.title}</Text>}

package/src/components/DialogSearchFacets/index.tsx

@@ -27,7 +27,7 @@ const DialogSearchFacets = (props: Props) => {
   }, [])
 
   return (
-    <Dialog header="Filters" id={id} onClose={handleClose} width={1}>
+    <Dialog animate header="Filters" id={id} onClose={handleClose} width={1}>
       <Box padding={3}>
         <SearchFacets layout="stack" />
         <SearchFacetsControl />

package/src/components/DialogTagCreate/index.tsx

@@ -78,7 +78,7 @@ const DialogTagCreate = (props: Props) => {
   )
 
   return (
-    <Dialog footer={<Footer />} header="Create Tag" id={id} onClose={handleClose} width={1}>
+    <Dialog animate footer={<Footer />} header="Create Tag" id={id} onClose={handleClose} width={1}>
       {/* Form fields */}
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         {/* Hidden button to enable enter key submissions */}

package/src/components/DialogTagEdit/index.tsx

@@ -158,7 +158,7 @@ const DialogTagEdit = (props: Props) => {
   }
 
   return (
-    <Dialog footer={<Footer />} header="Edit Tag" id={id} onClose={handleClose} width={1}>
+    <Dialog animate footer={<Footer />} header="Edit Tag" id={id} onClose={handleClose} width={1}>
       {/* Form fields */}
       <Box as="form" padding={4} onSubmit={handleSubmit(onSubmit)}>
         {/* Deleted notification */}

package/src/components/DialogTags/index.tsx

@@ -26,7 +26,7 @@ const DialogTags = (props: Props) => {
   }, [])
 
   return (
-    <Dialog header="All Tags" id={id} onClose={handleClose} width={1}>
+    <Dialog animate header="All Tags" id={id} onClose={handleClose} width={1}>
       <Box
         style={{
           height: '100%',

package/src/components/Dialogs/index.tsx

@@ -1,5 +1,5 @@
 import type {Dialog} from '../../types'
-import React from 'react'
+
 import useTypedSelector from '../../hooks/useTypedSelector'
 import DialogAssetEdit from '../DialogAssetEdit'
 import DialogConfirm from '../DialogConfirm'

package/src/components/DocumentList/index.tsx

@@ -1,6 +1,6 @@
 import type {SanityDocument} from '@sanity/client'
 import {Box, Button, Card, Stack, Text} from '@sanity/ui'
-import React from 'react'
+
 import {Preview, type SchemaType, useSchema} from 'sanity'
 import {useIntentLink} from 'sanity/router'
 

package/src/components/FileAssetPreview/index.tsx

@@ -1,6 +1,6 @@
 import {Flex} from '@sanity/ui'
 import type {Asset} from '../../types'
-import React from 'react'
+
 import FileIcon from '../FileIcon'
 
 type Props = {

package/src/components/FormFieldInputLabel/index.tsx

@@ -1,6 +1,6 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Inline, Text, Tooltip} from '@sanity/ui'
-import React from 'react'
+
 import {styled} from 'styled-components'
 
 type Props = {
@@ -32,6 +32,7 @@ const FormFieldInputLabel = (props: Props) => {
           {error && (
             <Text size={1}>
               <Tooltip
+                animate
                 content={
                   <Box padding={2}>
                     <Text muted size={1}>

package/src/components/FormSubmitButton/index.tsx

@@ -31,6 +31,7 @@ const FormSubmitButton = (props: Props) => {
 
   return (
     <Tooltip
+      animate
       content={
         <Box padding={3} style={{maxWidth: '185px'}}>
           <Text muted size={1}>

package/src/components/Header/index.tsx

@@ -1,7 +1,7 @@
 import {CloseIcon, Icon, UploadIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Text} from '@sanity/ui'
 import pluralize from 'pluralize'
-import React from 'react'
+
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import {useDropzoneActions} from '../../contexts/DropzoneDispatchContext'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/Image/index.tsx

@@ -5,15 +5,15 @@ import {getSchemeColor} from '../../utils/getSchemeColor'
 
 type Props = {
   onClick?: (e: MouseEvent) => void
-  showCheckerboard?: boolean
-  scheme?: ThemeColorSchemeKey
+  $showCheckerboard?: boolean
+  $scheme?: ThemeColorSchemeKey
   src: string
   style?: any
 }
 
 const Image = styled.img<Props>`
   --checkerboard-color: ${props =>
-    props.scheme ? getSchemeColor(props.scheme, 'bg2') : 'inherit'};
+    props.$scheme ? getSchemeColor(props.$scheme, 'bg2') : 'inherit'};
 
   display: block;
   width: 100%;
@@ -21,7 +21,7 @@ const Image = styled.img<Props>`
   object-fit: contain;
 
   ${props =>
-    props.showCheckerboard &&
+    props.$showCheckerboard &&
     css`
       background-image: linear-gradient(45deg, var(--checkerboard-color) 25%, transparent 25%),
         linear-gradient(-45deg, var(--checkerboard-color) 25%, transparent 25%),

package/src/components/OrderSelect/index.tsx

@@ -1,6 +1,5 @@
 import {SortIcon} from '@sanity/icons'
 import {Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import React from 'react'
 import {useDispatch} from 'react-redux'
 import {getOrderTitle} from '../../config/orders'
 import {ORDER_OPTIONS} from '../../constants'

package/src/components/Progress/index.tsx

@@ -1,6 +1,5 @@
 import {Box} from '@sanity/ui'
 import {useNProgress} from '@tanem/react-nprogress'
-import React from 'react'
 
 type Props = {
   loading?: boolean

package/src/components/ReduxProvider/index.tsx

@@ -85,7 +85,6 @@ class ReduxProvider extends Component<Props> {
   }
 
   override render() {
-    // @ts-ignore
     return <Provider store={this.store}>{this.props.children}</Provider>
   }
 }

package/src/components/SearchFacet/index.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import {Box, Flex, Label, rem, Text, type Theme, type ThemeColorSchemeKey} from '@sanity/ui'
+import {Box, Flex, Label, rem, Text, type ThemeColorSchemeKey} from '@sanity/ui'
 import type {SearchFacetInputProps, WithId} from '../../types'
 import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
@@ -13,10 +13,9 @@ type Props = {
   facet: WithId<SearchFacetInputProps>
 }
 
-// @ts-expect-error - fix typings later
-const Container = styled(Box)(({scheme, theme}: {scheme: ThemeColorSchemeKey; theme: Theme}) => {
+const Container = styled<typeof Box, {$scheme: ThemeColorSchemeKey}>(Box)(({$scheme, theme}) => {
   return css`
-    background: ${getSchemeColor(scheme, 'bg')};
+    background: ${getSchemeColor($scheme, 'bg')};
     border-radius: ${rem(theme.sanity.radius[2])};
   `
 })
@@ -34,11 +33,7 @@ const SearchFacet = (props: Props) => {
   }
 
   return (
-    <Container
-      padding={[2, 2, 1]}
-      // @ts-expect-error - fix typings later
-      scheme={scheme}
-    >
+    <Container padding={[2, 2, 1]} $scheme={scheme}>
       <Flex align={['flex-start', 'flex-start', 'center']} direction={['column', 'column', 'row']}>
         {/* Title */}
         <Box paddingBottom={[3, 3, 0]} paddingLeft={1} paddingRight={2} paddingTop={[1, 1, 0]}>

package/src/components/SearchFacetNumber/index.tsx

@@ -6,7 +6,7 @@ import type {
   SearchFacetOperatorType,
   WithId
 } from '../../types'
-import React from 'react'
+
 import {useDispatch} from 'react-redux'
 import {operators} from '../../config/searchFacets'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'