sanity-plugin-media 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sanity-plugin-media",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "description": "This version of `sanity-plugin-media` is for Sanity Studio V3.",
   "keywords": [
     "sanity",
@@ -20,25 +20,20 @@
     "type": "git",
     "url": "git@github.com:sanity-io/sanity-plugin-media.git"
   },
+  "type": "commonjs",
   "license": "MIT",
   "author": "Sanity.io <hello@sanity.io>",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
       "source": "./src/index.ts",
       "require": "./dist/index.js",
-      "node": {
-        "module": "./dist/index.esm.js",
-        "import": "./dist/index.cjs.mjs"
-      },
-      "import": "./dist/index.esm.js",
-      "default": "./dist/index.esm.js"
+      "import": "./dist/index.mjs",
+      "default": "./dist/index.mjs"
     },
     "./package.json": "./package.json"
   },
   "main": "./dist/index.js",
-  "module": "./dist/index.esm.js",
-  "source": "./src/index.ts",
+  "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
@@ -47,21 +42,24 @@
     "v2-incompatible.js"
   ],
   "scripts": {
-    "build": "run-s clean && plugin-kit verify-package --silent && pkg-utils build --strict && pkg-utils --strict",
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
     "clean": "rimraf dist",
     "dev": "npm run watch",
     "format": "prettier --write --cache --ignore-unknown .",
     "link-watch": "plugin-kit link-watch",
     "lint": "eslint .",
     "prepare": "husky install",
-    "prepublishOnly": "run-s build",
+    "prepublishOnly": "npm run build",
     "watch": "pkg-utils watch --strict"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.1.1",
     "@reduxjs/toolkit": "^1.9.0",
-    "@sanity/incompatible-plugin": "^1.0.4",
-    "@sanity/ui": "^1.9.3",
+    "@sanity/client": "^6.28.3",
+    "@sanity/color": "^3.0.6",
+    "@sanity/icons": "^3.7.0",
+    "@sanity/incompatible-plugin": "^1.0.5",
+    "@sanity/ui": "^1.0 || ^2.0",
     "@sanity/uuid": "^3.0.1",
     "@tanem/react-nprogress": "^5.0.0",
     "copy-to-clipboard": "^3.3.1",
@@ -69,8 +67,7 @@
     "filesize": "^9.0.0",
     "groq": "^3.0.0",
     "is-hotkey": "^0.2.0",
-    "nanoid": "^3.3.3",
-    "npm-run-all": "^4.1.5",
+    "nanoid": "^3.3.8",
     "pluralize": "^8.0.0",
     "react-dropzone": "^11.3.1",
     "react-file-icon": "^1.1.0",
@@ -80,17 +77,14 @@
     "react-virtuoso": "^4.3.11",
     "redux": "^4.2.0",
     "redux-observable": "^2.0.0",
-    "rxjs": "^7.0.0",
+    "rxjs": "^7.8.1",
     "zod": "^3.21.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
-    "@sanity/client": "^6.7.0",
-    "@sanity/color": "^2.1.20",
-    "@sanity/icons": "^2.0.0",
-    "@sanity/pkg-utils": "^2.4.8",
-    "@sanity/plugin-kit": "^3.1.10",
+    "@sanity/pkg-utils": "^7.0.3",
+    "@sanity/plugin-kit": "^4.0.19",
     "@sanity/semantic-release-preset": "^2.0.2",
     "@types/is-hotkey": "^0.1.7",
     "@types/pluralize": "^0.0.29",
@@ -118,7 +112,7 @@
     "sanity": "^3.2.0",
     "standard-version": "^9.5.0",
     "styled-components": "^5.3.3",
-    "typescript": "^4.8.4"
+    "typescript": "5.7.3"
   },
   "peerDependencies": {
     "@sanity/ui": "^1.0 || ^2.0",
@@ -128,6 +122,6 @@
     "styled-components": "^5.0 || ^6.0"
   },
   "engines": {
-    "node": ">=14"
+    "node": ">=18"
   }
 }

package/src/components/AssetGridVirtualized/index.tsx

@@ -1,5 +1,5 @@
-import {CardAssetData, CardUploadData} from '@types'
-import React, {memo} from 'react'
+import type {CardAssetData, CardUploadData} from '@types'
+import {memo} from 'react'
 import {VirtuosoGrid} from 'react-virtuoso'
 import styled from 'styled-components'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/AssetMetadata/index.tsx

@@ -1,9 +1,9 @@
 import {DownloadIcon} from '@sanity/icons'
 import {Box, Button, Flex, Inline, Stack, Text} from '@sanity/ui'
-import {Asset, AssetItem} from '@types'
+import type {Asset, AssetItem} from '@types'
 import format from 'date-fns/format'
 import filesize from 'filesize'
-import React, {ReactNode} from 'react'
+import {type ReactNode} from 'react'
 import getAssetResolution from '../../utils/getAssetResolution'
 import {isImageAsset} from '../../utils/typeGuards'
 import ButtonAssetCopy from '../ButtonAssetCopy'

package/src/components/AssetTableVirtualized/index.tsx

@@ -1,6 +1,6 @@
-import {CardAssetData, CardUploadData} from '@types'
+import type {CardAssetData, CardUploadData} from '@types'
 import {Box} from '@sanity/ui'
-import React, {memo} from 'react'
+import {memo} from 'react'
 import {GroupedVirtuoso} from 'react-virtuoso'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import TableHeader from '../TableHeader'

package/src/components/Browser/index.tsx

@@ -1,8 +1,8 @@
 import type {MutationEvent} from '@sanity/client'
 import {Card, Flex, PortalProvider, studioTheme, ThemeProvider, ToastProvider} from '@sanity/ui'
-import {Asset, Tag} from '@types'
+import type {Asset, Tag} from '@types'
 import groq from 'groq'
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {useDispatch} from 'react-redux'
 import {useColorScheme, type AssetSourceComponentProps, type SanityDocument} from 'sanity'
 import {TAG_DOCUMENT_NAME} from '../../constants'

package/src/components/ButtonAssetCopy/index.tsx

@@ -1,7 +1,7 @@
 import {ClipboardIcon} from '@sanity/icons'
 import {Button, Popover, Text} from '@sanity/ui'
 import copy from 'copy-to-clipboard'
-import React, {useEffect, useRef, useState} from 'react'
+import {useEffect, useRef, useState} from 'react'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 
 type Props = {

package/src/components/CardAsset/index.tsx

@@ -6,11 +6,11 @@ import {
   Flex,
   Spinner,
   Text,
-  Theme,
-  ThemeColorSchemeKey,
+  type Theme,
+  type ThemeColorSchemeKey,
   Tooltip
 } from '@sanity/ui'
-import React, {memo, MouseEvent, RefObject} from 'react'
+import {memo, type MouseEvent, type RefObject} from 'react'
 import {useDispatch} from 'react-redux'
 import {useColorScheme} from 'sanity'
 import styled, {css} from 'styled-components'

package/src/components/DebugControls/index.tsx

@@ -1,6 +1,6 @@
 import {PlugIcon} from '@sanity/icons'
 import {Box, Flex, Switch, Text, Tooltip} from '@sanity/ui'
-import React, {ChangeEvent} from 'react'
+import {type ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
 import useKeyPress from '../../hooks/useKeyPress'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/Dialog/index.tsx

@@ -1,5 +1,5 @@
 import {Dialog as SanityDialog} from '@sanity/ui'
-import React, {ComponentProps} from 'react'
+import {type ComponentProps} from 'react'
 
 const Dialog = (props: ComponentProps<typeof SanityDialog>) => {
   // HACK: Temporarily force fixed positioning on all @sanity/ui <Dialog /> components.

package/src/components/DialogAssetEdit/index.tsx

@@ -1,10 +1,10 @@
 import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Flex, Stack, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '@types'
+import type {Asset, AssetFormData, DialogAssetEditProps, TagSelectOption} from '@types'
 import groq from 'groq'
-import React, {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-import {SubmitHandler, useForm} from 'react-hook-form'
+import {type ReactNode, useCallback, useEffect, useRef, useState} from 'react'
+import {type SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
 import {WithReferringDocuments, useColorScheme, useDocumentStore} from 'sanity'
 import {assetFormSchema} from '../../formSchema'
@@ -27,6 +27,7 @@ import FormFieldInputText from '../FormFieldInputText'
 import FormFieldInputTextarea from '../FormFieldInputTextarea'
 import FormSubmitButton from '../FormSubmitButton'
 import Image from '../Image'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 type Props = {
   children: ReactNode
@@ -59,10 +60,14 @@ const DialogAssetEdit = (props: Props) => {
 
   const assetTagOptions = useTypedSelector(selectTagSelectOptions(currentAsset))
 
+  // Check if credit line options are configured
+  const {creditLine} = useToolOptions()
+
   const generateDefaultValues = useCallback(
     (asset?: Asset): AssetFormData => {
       return {
         altText: asset?.altText || '',
+        creditLine: asset?.creditLine || '',
         description: asset?.description || '',
         originalFilename: asset?.originalFilename || '',
         opt: {media: {tags: assetTagOptions}},
@@ -342,6 +347,20 @@ const DialogAssetEdit = (props: Props) => {
                           rows={5}
                           value={currentAsset?.description}
                         />
+                        {/* CreditLine */}
+                        {creditLine?.enabled && (
+                          <FormFieldInputText
+                            {...register('creditLine')}
+                            error={errors?.creditLine?.message}
+                            label="Credit"
+                            name="creditLine"
+                            value={currentAsset?.creditLine}
+                            disabled={
+                              formUpdating ||
+                              creditLine?.excludeSources?.includes(currentAsset?.source?.name)
+                            }
+                          />
+                        )}
                       </Stack>
                     </TabPanel>
 

package/src/components/DialogConfirm/index.tsx

@@ -1,7 +1,7 @@
 import {WarningOutlineIcon} from '@sanity/icons'
 import {Box, Button, Flex, Stack, Text} from '@sanity/ui'
-import {DialogConfirmProps} from '@types'
-import React, {ReactNode} from 'react'
+import type {DialogConfirmProps} from '@types'
+import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import {dialogActions} from '../../modules/dialog'
 import Dialog from '../Dialog'

package/src/components/DialogSearchFacets/index.tsx

@@ -1,6 +1,6 @@
 import {Box} from '@sanity/ui'
-import {DialogSearchFacetsProps} from '@types'
-import React, {ReactNode, useCallback} from 'react'
+import type {DialogSearchFacetsProps} from '@types'
+import {type ReactNode, useCallback} from 'react'
 import {useDispatch} from 'react-redux'
 import {dialogActions} from '../../modules/dialog'
 import Dialog from '../Dialog'

package/src/components/DialogTagCreate/index.tsx

@@ -1,8 +1,8 @@
 import {zodResolver} from '@hookform/resolvers/zod'
 import {Box, Flex} from '@sanity/ui'
-import {DialogTagCreateProps, TagFormData} from '@types'
-import React, {ReactNode, useEffect} from 'react'
-import {SubmitHandler, useForm} from 'react-hook-form'
+import type {DialogTagCreateProps, TagFormData} from '@types'
+import {type ReactNode, useEffect} from 'react'
+import {type SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
 import {tagFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/DialogTagEdit/index.tsx

@@ -1,10 +1,10 @@
 import {zodResolver} from '@hookform/resolvers/zod'
 import type {MutationEvent} from '@sanity/client'
 import {Box, Button, Card, Flex, Text} from '@sanity/ui'
-import {DialogTagEditProps, Tag, TagFormData} from '@types'
+import type {DialogTagEditProps, Tag, TagFormData} from '@types'
 import groq from 'groq'
-import React, {ReactNode, useCallback, useEffect, useState} from 'react'
-import {SubmitHandler, useForm} from 'react-hook-form'
+import {type ReactNode, useCallback, useEffect, useState} from 'react'
+import {type SubmitHandler, useForm} from 'react-hook-form'
 import {useDispatch} from 'react-redux'
 import {tagFormSchema} from '../../formSchema'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/DialogTags/index.tsx

@@ -1,6 +1,6 @@
 import {Box} from '@sanity/ui'
-import {DialogTagsProps} from '@types'
-import React, {ReactNode, useCallback} from 'react'
+import type {DialogTagsProps} from '@types'
+import {type ReactNode, useCallback} from 'react'
 import {useDispatch} from 'react-redux'
 import {dialogActions} from '../../modules/dialog'
 import Dialog from '../Dialog'

package/src/components/Dialogs/index.tsx

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

package/src/components/DocumentList/index.tsx

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

package/src/components/FileAssetPreview/index.tsx

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

package/src/components/FileIcon/index.tsx

@@ -1,5 +1,5 @@
-import {Box, Flex, Theme} from '@sanity/ui'
-import React, {MouseEvent} from 'react'
+import {Box, Flex, type Theme} from '@sanity/ui'
+import {type MouseEvent} from 'react'
 import {defaultStyles, FileIcon as ReactFileIcon} from 'react-file-icon'
 import type {DefaultExtensionType} from 'react-file-icon'
 import styled, {css} from 'styled-components'

package/src/components/FormBuilderTool/index.tsx

@@ -1,6 +1,6 @@
 import {Box, Portal, PortalProvider, useLayer} from '@sanity/ui'
-import React, {SyntheticEvent, useEffect, useState} from 'react'
-import {AssetSourceComponentProps, SanityDocument, useFormValue} from 'sanity'
+import {type SyntheticEvent, useEffect, useState} from 'react'
+import {type AssetSourceComponentProps, type SanityDocument, useFormValue} from 'sanity'
 import useKeyPress from '../../hooks/useKeyPress'
 import Browser from '../Browser'
 

package/src/components/FormFieldInputText/index.tsx

@@ -1,5 +1,5 @@
 import {Box, TextInput} from '@sanity/ui'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 
 import FormFieldInputLabel from '../FormFieldInputLabel'
 

package/src/components/FormFieldInputTextarea/index.tsx

@@ -1,5 +1,5 @@
 import {Box, TextArea} from '@sanity/ui'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 
 import FormFieldInputLabel from '../FormFieldInputLabel'
 

package/src/components/FormSubmitButton/index.tsx

@@ -1,6 +1,6 @@
 import {Box, Button, Text, Tooltip} from '@sanity/ui'
 import format from 'date-fns/format'
-import React, {ReactNode} from 'react'
+import {type ReactNode} from 'react'
 
 type Props = {
   disabled: boolean

package/src/components/Image/index.tsx

@@ -1,5 +1,5 @@
-import {ThemeColorSchemeKey} from '@sanity/ui'
-import {MouseEvent} from 'react'
+import type {ThemeColorSchemeKey} from '@sanity/ui'
+import type {MouseEvent} from 'react'
 import styled, {css} from 'styled-components'
 import {getSchemeColor} from '../../utils/getSchemeColor'
 

package/src/components/Items/index.tsx

@@ -1,5 +1,5 @@
 import {Box, Text} from '@sanity/ui'
-import React, {useEffect} from 'react'
+import {useEffect} from 'react'
 import {useDispatch} from 'react-redux'
 import useBreakpointIndex from '../../hooks/useBreakpointIndex'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/ReduxProvider/index.tsx

@@ -1,7 +1,7 @@
-import {AnyAction, configureStore, Store} from '@reduxjs/toolkit'
+import {type AnyAction, configureStore, type Store} from '@reduxjs/toolkit'
 import type {SanityClient} from '@sanity/client'
 import type {AssetSourceComponentProps, SanityDocument} from 'sanity'
-import React, {Component, ReactNode} from 'react'
+import {Component, type ReactNode} from 'react'
 import {Provider} from 'react-redux'
 import {createEpicMiddleware} from 'redux-observable'
 import {rootEpic, rootReducer} from '../../modules'
@@ -9,7 +9,7 @@ import {initialState as assetsInitialState} from '../../modules/assets'
 // import {assetsActions} from '../../modules/assets'
 // import {searchActions} from '../../modules/search'
 // import {uploadsActions} from '../../modules/uploads'
-import {RootReducerState} from '../../modules/types'
+import type {RootReducerState} from '../../modules/types'
 import getDocumentAssetIds from '../../utils/getDocumentAssetIds'
 
 type Props = {
@@ -65,7 +65,7 @@ class ReduxProvider extends Component<Props> {
     epicMiddleware.run(rootEpic)
   }
 
-  render() {
+  override render() {
     // @ts-ignore
     return <Provider store={this.store}>{this.props.children}</Provider>
   }

package/src/components/SearchFacet/index.tsx

@@ -1,7 +1,7 @@
 import {CloseIcon} from '@sanity/icons'
-import {Box, Flex, Label, rem, Text, Theme, ThemeColorSchemeKey} from '@sanity/ui'
-import {SearchFacetInputProps, WithId} from '@types'
-import React, {ReactNode} from 'react'
+import {Box, Flex, Label, rem, Text, type Theme, type ThemeColorSchemeKey} from '@sanity/ui'
+import type {SearchFacetInputProps, WithId} from '@types'
+import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import {useColorScheme} from 'sanity'
 import styled, {css} from 'styled-components'

package/src/components/SearchFacetNumber/index.tsx

@@ -1,6 +1,6 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {
+import type {
   SearchFacetInputNumberModifier,
   SearchFacetInputNumberProps,
   SearchFacetOperatorType,

package/src/components/SearchFacetSelect/index.tsx

@@ -1,6 +1,6 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {
+import type {
   SearchFacetInputSelectListItemProps,
   SearchFacetInputSelectProps,
   SearchFacetOperatorType,

package/src/components/SearchFacetString/index.tsx

@@ -1,7 +1,7 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem, TextInput} from '@sanity/ui'
-import {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '@types'
-import React, {ChangeEvent} from 'react'
+import type {SearchFacetInputStringProps, SearchFacetOperatorType, WithId} from '@types'
+import {type ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
 
 import {operators} from '../../config/searchFacets'

package/src/components/SearchFacetTags/index.tsx

@@ -1,6 +1,6 @@
 import {SelectIcon} from '@sanity/icons'
 import {Box, Button, Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui'
-import {
+import type {
   TagSelectOption,
   SearchFacetInputSearchableProps,
   SearchFacetOperatorType,

package/src/components/SearchFacets/index.tsx

@@ -1,4 +1,4 @@
-import {Box, Flex, Inline, rem, Theme} from '@sanity/ui'
+import {Box, Flex, Inline, rem, type Theme} from '@sanity/ui'
 import React from 'react'
 import styled, {css} from 'styled-components'
 

package/src/components/SearchFacetsControl/index.tsx

@@ -1,12 +1,13 @@
 import {AddIcon} from '@sanity/icons'
 import {Button, Flex, Menu, MenuButton, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui'
-import {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '@types'
+import type {SearchFacetDivider, SearchFacetGroup, SearchFacetInputProps} from '@types'
 import React from 'react'
 import {useDispatch} from 'react-redux'
 import {FACETS} from '../../constants'
 import {usePortalPopoverProps} from '../../hooks/usePortalPopoverProps'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'
+import {useToolOptions} from '../../contexts/ToolOptionsContext'
 
 const SearchFacetsControl = () => {
   // Redux
@@ -17,11 +18,18 @@ const SearchFacetsControl = () => {
 
   const popoverProps = usePortalPopoverProps()
 
+  const {creditLine} = useToolOptions()
+
   const isTool = !selectedDocument
 
   const filteredFacets = FACETS
     // Filter facets based on current context, whether it's invoked as a tool, or via selection through via custom asset source.
     .filter(facet => {
+      // Remove credit line filter if it's not enabled
+      if (!creditLine?.enabled && facet?.type === 'string' && facet?.name === 'creditLine') {
+        return false
+      }
+
       if (facet.type === 'group' || facet.type === 'divider') {
         return true
       }

package/src/components/TableHeader/index.tsx

@@ -1,5 +1,5 @@
-import {Checkbox, Flex, Grid, ThemeColorSchemeKey, useMediaIndex} from '@sanity/ui'
-import React, {MouseEvent} from 'react'
+import {Checkbox, Flex, Grid, type ThemeColorSchemeKey, useMediaIndex} from '@sanity/ui'
+import {type MouseEvent} from 'react'
 import {useDispatch} from 'react-redux'
 import styled, {css} from 'styled-components'
 import {GRID_TEMPLATE_COLUMNS, PANEL_HEIGHT} from '../../constants'

package/src/components/TableRowAsset/index.tsx

@@ -7,13 +7,21 @@ import {
   Grid,
   Spinner,
   Text,
-  ThemeColorSchemeKey,
+  type ThemeColorSchemeKey,
   Tooltip,
   useMediaIndex
 } from '@sanity/ui'
 import formatRelative from 'date-fns/formatRelative'
 import filesize from 'filesize'
-import React, {memo, MouseEvent, RefObject, useCallback, useEffect, useRef, useState} from 'react'
+import {
+  memo,
+  type MouseEvent,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
 import {useDispatch} from 'react-redux'
 import {WithReferringDocuments, useColorScheme} from 'sanity'
 import styled, {css} from 'styled-components'

package/src/components/Tag/index.tsx

@@ -1,7 +1,7 @@
 import {ArrowDownIcon, ArrowUpIcon, CloseIcon, EditIcon, SearchIcon, TrashIcon} from '@sanity/icons'
 import {Box, Button, Container, Flex, Text, Tooltip} from '@sanity/ui'
-import {SearchFacetInputSearchableProps, TagActions, TagItem} from '@types'
-import React, {ReactNode} from 'react'
+import type {SearchFacetInputSearchableProps, TagActions, TagItem} from '@types'
+import {type ReactNode} from 'react'
 import {useDispatch} from 'react-redux'
 import styled from 'styled-components'
 import {inputs} from '../../config/searchFacets'

package/src/components/TagsVirtualized/index.tsx

@@ -1,6 +1,6 @@
 import {Flex, Label} from '@sanity/ui'
-import {TagActions, TagItem} from '@types'
-import React, {memo, useState} from 'react'
+import type {TagActions, TagItem} from '@types'
+import {memo, useState} from 'react'
 import {Virtuoso} from 'react-virtuoso'
 import {PANEL_HEIGHT} from '../../constants'
 import useTypedSelector from '../../hooks/useTypedSelector'

package/src/components/TextInputNumber/index.tsx

@@ -1,5 +1,5 @@
 import {TextInput} from '@sanity/ui'
-import React, {ChangeEvent} from 'react'
+import {type ChangeEvent} from 'react'
 
 // TODO: use correct type
 type Props = any & {

package/src/components/TextInputSearch/index.tsx

@@ -1,6 +1,6 @@
 import {CloseIcon, SearchIcon} from '@sanity/icons'
 import {Box, Flex, TextInput} from '@sanity/ui'
-import React, {ChangeEvent} from 'react'
+import {type ChangeEvent} from 'react'
 import {useDispatch} from 'react-redux'
 import useTypedSelector from '../../hooks/useTypedSelector'
 import {searchActions} from '../../modules/search'

package/src/components/UploadDropzone/index.tsx

@@ -1,7 +1,7 @@
 import {white} from '@sanity/color'
 import {Flex, Text} from '@sanity/ui'
-import React, {ReactNode} from 'react'
-import {DropEvent, DropzoneOptions, useDropzone} from 'react-dropzone'
+import {type ReactNode} from 'react'
+import {type DropEvent, type DropzoneOptions, useDropzone} from 'react-dropzone'
 import {useDispatch} from 'react-redux'
 import styled from 'styled-components'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'