fix: improve strict ESM compat, and use animated @sanity/ui components

src/components/ConfigureApi.styled.tsx

@@ -1,5 +1,4 @@
-import React from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import MuxLogo from './MuxLogo'
 

src/components/ConfigureApi.tsx

@@ -109,6 +109,7 @@ function ConfigureApi({secrets, setDialogState}: Props) {
 
   return (
     <Dialog
+      animate
       id={id}
       onClose={handleClose}
       header={<Header />}

src/components/FileInputButton.tsx

@@ -1,6 +1,6 @@
 import {Button, type ButtonProps} from '@sanity/ui'
 import React, {useCallback, useId, useRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 const HiddenInput = styled.input`
   overflow: hidden;

src/components/FileInputMenuItem.styled.tsx

@@ -1,5 +1,5 @@
 import {MenuItem} from '@sanity/ui'
-import styled, {css} from 'styled-components'
+import {css, styled} from 'styled-components'
 
 import {focusRingStyle} from './withFocusRing/helpers'
 

src/components/IconInfo.tsx

@@ -1,5 +1,4 @@
 import {Flex, Text} from '@sanity/ui'
-import React from 'react'
 
 const IconInfo: React.FC<{
   text: string

src/components/ImportVideosFromMux.tsx

@@ -13,7 +13,7 @@ import {
   Text,
 } from '@sanity/ui'
 import {truncateString, useFormattedDuration} from 'sanity'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import useImportMuxAssets from '../hooks/useImportMuxAssets'
 import {DIALOGS_Z_INDEX} from '../util/constants'
@@ -104,6 +104,7 @@ function ImportVideosDialog(props: ReturnType<typeof useImportMuxAssets>) {
 
   return (
     <Dialog
+      animate
       header={'Import videos from Mux'}
       zOffset={DIALOGS_Z_INDEX}
       id="video-details-dialog"

src/components/Input.styled.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, Flex, Spinner, Text} from '@sanity/ui'
-import React from 'react'
 
 export const InputFallback = () => {
   return (

src/components/InputBrowser.tsx

@@ -1,6 +1,6 @@
 import {Dialog} from '@sanity/ui'
 import React, {useCallback, useId} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import SelectAsset, {type Props as SelectAssetProps} from './SelectAsset'

src/components/InputError.tsx

@@ -8,7 +8,7 @@ interface Props {
 export default function InputError({onClose, error}: Props) {
   const id = `InputError${useId()}`
   return (
-    <Dialog header={error.name} id={id} onClose={onClose}>
+    <Dialog animate header={error.name} id={id} onClose={onClose}>
       <Box padding={4}>
         <Text>{error.message}</Text>
       </Box>

src/components/Player.styled.tsx

@@ -1,5 +1,5 @@
 import {useState} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
 import {getStoryboardSrc} from '../util/getStoryboardSrc'

src/components/PlayerActionsMenu.tsx

@@ -23,7 +23,7 @@ import {
 } from '@sanity/ui'
 import React, {memo, useCallback, useEffect, useMemo, useState} from 'react'
 import {PatchEvent, unset} from 'sanity'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import {type DialogState, type SetDialogState} from '../hooks/useDialogState'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
@@ -74,6 +74,7 @@ function PlayerActionsMenu(
     <Inline space={1} padding={2}>
       {isSigned && (
         <Tooltip
+          animate
           content={
             <Box padding={2}>
               <Text muted size={1}>
@@ -90,6 +91,7 @@ function PlayerActionsMenu(
         </Tooltip>
       )}
       <Popover
+        animate
         content={
           <Menu ref={setMenuRef}>
             <Box padding={2}>

src/components/SpinnerBox.tsx

@@ -1,5 +1,4 @@
 import {Box, Spinner} from '@sanity/ui'
-import React from 'react'
 
 const SpinnerBox: React.FC = () => (
   <Box

src/components/StudioTool.tsx

@@ -1,7 +1,6 @@
-import React from 'react'
-import {Tool} from 'sanity'
+import type {Tool} from 'sanity'
 
-import {PluginConfig} from '../util/types'
+import type {PluginConfig} from '../util/types'
 import ToolIcon from './icons/ToolIcon'
 import VideosBrowser from './VideosBrowser'
 

src/components/UploadConfiguration.tsx

@@ -159,6 +159,7 @@ export default function UploadConfiguration({
   )
   return (
     <Dialog
+      animate
       open
       id="upload-configuration"
       zOffset={1000}

src/components/UploadPlaceholder.tsx

@@ -2,7 +2,7 @@ import {PlugIcon, SearchIcon, UploadIcon} from '@sanity/icons'
 import {DocumentVideoIcon} from '@sanity/icons'
 import {Box, Button, Card, Flex, Inline, Text} from '@sanity/ui'
 import React, {useCallback} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import type {SetDialogState} from '../hooks/useDialogState'
 import {FileInputButton, type FileInputButtonProps} from './FileInputButton'

src/components/UploadProgress.tsx

@@ -1,9 +1,8 @@
 // Lifted from sanity/form/inputs/files/common/UploadProgress
 
 import {Button, Card, Code, Flex, Inline, Stack, Text} from '@sanity/ui'
-import React from 'react'
 import {LinearProgress} from 'sanity'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 export const CardWrapper = styled(Card)`
   min-height: 82px;

src/components/Uploader.styled.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import {Card, type CardTone} from '@sanity/ui'
 import React, {forwardRef, useCallback, useRef} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import {withFocusRing} from './withFocusRing'
 

src/components/VideoDetails/DeleteDialog.tsx

@@ -62,6 +62,7 @@ export default function DeleteDialog({
 
   return (
     <Dialog
+      animate
       header={'Delete video'}
       zOffset={DIALOGS_Z_INDEX}
       id="deleting-video-details-dialog"

src/components/VideoDetails/VideoDetails.tsx

@@ -84,6 +84,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
 
   return (
     <Dialog
+      animate
       header={displayInfo.title}
       zOffset={DIALOGS_Z_INDEX}
       id="video-details-dialog"
@@ -138,6 +139,7 @@ const VideoDetails: React.FC<VideoDetailsProps> = (props) => {
       {/* CONFIRM CLOSING DIALOG */}
       {state === 'closing' && (
         <Dialog
+          animate
           header={'You have unsaved changes'}
           zOffset={DIALOGS_Z_INDEX}
           id="closing-video-details-dialog"

src/components/VideoDetails/VideoReferences.tsx

@@ -1,10 +1,9 @@
 import type {SanityDocument} from '@sanity/client'
 import {Box, Card, Text} from '@sanity/ui'
-import React from 'react'
 import {collate, useSchema} from 'sanity'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
-import {PluginPlacement} from '../../util/types'
+import type {PluginPlacement} from '../../util/types'
 import {DocumentPreview} from '../documentPreview/DocumentPreview'
 import SpinnerBox from '../SpinnerBox'
 

src/components/VideoInBrowser.tsx

@@ -1,7 +1,7 @@
 import {CheckmarkIcon, EditIcon, LockIcon, PlayIcon} from '@sanity/icons'
 import {Button, Card, Stack, Text, Tooltip} from '@sanity/ui'
 import React, {useState} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import {THUMBNAIL_ASPECT_RATIO} from '../util/constants'
 import {getPlaybackPolicy} from '../util/getPlaybackPolicy'
@@ -101,6 +101,7 @@ export default function VideoInBrowser({
     >
       {playbackPolicy === 'signed' && (
         <Tooltip
+          animate
           content={
             <Card padding={2} radius={2}>
               <IconInfo icon={LockIcon} text="Signed playback policy" size={2} />

src/components/VideoMetadata.tsx

@@ -1,9 +1,8 @@
 import {CalendarIcon, ClockIcon, TagIcon} from '@sanity/icons'
 import {Inline, Stack, Text} from '@sanity/ui'
-import React from 'react'
 
 import getVideoMetadata from '../util/getVideoMetadata'
-import {VideoAssetDocument} from '../util/types'
+import type {VideoAssetDocument} from '../util/types'
 import IconInfo from './IconInfo'
 
 const VideoMetadata = (props: {asset: VideoAssetDocument}) => {

src/components/VideoThumbnail.tsx

@@ -1,7 +1,7 @@
 import {ErrorOutlineIcon} from '@sanity/icons'
 import {Box, Card, CardTone, Spinner, Stack, Text} from '@sanity/ui'
 import React, {useMemo, useState} from 'react'
-import styled from 'styled-components'
+import {styled} from 'styled-components'
 
 import {useClient} from '../hooks/useClient'
 import useInView from '../hooks/useInView'

src/components/VideosBrowser.tsx

@@ -1,14 +1,14 @@
 import {SearchIcon} from '@sanity/icons'
 import {Card, Flex, Grid, Label, Stack, Text, TextInput} from '@sanity/ui'
-import React from 'react'
+import {useMemo, useState} from 'react'
 
 import useAssets from '../hooks/useAssets'
 import type {VideoAssetDocument} from '../util/types'
 import ImportVideosFromMux from './ImportVideosFromMux'
 import {SelectSortOptions} from './SelectSortOptions'
 import SpinnerBox from './SpinnerBox'
+import type {VideoDetailsProps} from './VideoDetails/useVideoDetails'
 import VideoDetails from './VideoDetails/VideoDetails'
-import {VideoDetailsProps} from './VideoDetails/useVideoDetails'
 import VideoInBrowser from './VideoInBrowser'
 
 export interface VideosBrowserProps {
@@ -17,8 +17,8 @@ export interface VideosBrowserProps {
 
 export default function VideosBrowser({onSelect}: VideosBrowserProps) {
   const {assets, isLoading, searchQuery, setSearchQuery, setSort, sort} = useAssets()
-  const [editedAsset, setEditedAsset] = React.useState<VideoDetailsProps['asset'] | null>(null)
-  const freshEditedAsset = React.useMemo(
+  const [editedAsset, setEditedAsset] = useState<VideoDetailsProps['asset'] | null>(null)
+  const freshEditedAsset = useMemo(
     () => assets.find((a) => a._id === editedAsset?._id) || editedAsset,
     [editedAsset, assets]
   )

src/components/documentPreview/DraftStatus.tsx

@@ -1,7 +1,6 @@
 // Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/DraftStatus.tsx
 import {EditIcon} from '@sanity/icons'
 import {Box, Text, Tooltip} from '@sanity/ui'
-import React from 'react'
 import type {PreviewValue, SanityDocument} from 'sanity'
 import {TextWithTone} from 'sanity'
 
@@ -13,6 +12,7 @@ export function DraftStatus(props: {document?: PreviewValue | Partial<SanityDocu
 
   return (
     <Tooltip
+      animate
       portal
       content={
         <Box padding={2}>

src/components/documentPreview/MissingSchemaType.tsx

@@ -1,6 +1,5 @@
 // Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/MissingSchemaType.tsx
 import {WarningOutlineIcon} from '@sanity/icons'
-import React from 'react'
 import type {SanityDocument} from 'sanity'
 import type {GeneralPreviewLayoutKey} from 'sanity'
 import {SanityDefaultPreview} from 'sanity'

src/components/documentPreview/PaneItemPreview.tsx

@@ -2,15 +2,15 @@
 // https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/paneItem/PaneItemPreview.tsx
 import {Inline} from '@sanity/ui'
 import {isNumber, isString} from 'lodash'
-import React, {isValidElement} from 'react'
+import {isValidElement} from 'react'
 import {useMemoObservable} from 'react-rx'
 import type {SanityDocument, SchemaType} from 'sanity'
-import {PreviewValue} from 'sanity'
+import type {PreviewValue} from 'sanity'
 import {
-  DocumentPresence,
+  type DocumentPresence,
   DocumentPreviewPresence,
-  DocumentPreviewStore,
-  GeneralPreviewLayoutKey,
+  type DocumentPreviewStore,
+  type GeneralPreviewLayoutKey,
   getPreviewStateObservable,
   getPreviewValueWithFallback,
   isRecord,

src/components/documentPreview/PublishedStatus.tsx

@@ -2,7 +2,6 @@
 
 import {PublishIcon} from '@sanity/icons'
 import {Box, Text, Tooltip} from '@sanity/ui'
-import React from 'react'
 import type {PreviewValue, SanityDocument} from 'sanity'
 import {TextWithTone} from 'sanity'
 
@@ -14,6 +13,7 @@ export function PublishedStatus(props: {document?: PreviewValue | Partial<Sanity
 
   return (
     <Tooltip
+      animate
       portal
       content={
         <Box padding={2}>

src/components/documentPreview/TimeAgo.tsx

@@ -1,5 +1,4 @@
 // Adapted from https://github.com/sanity-io/sanity/blob/next/packages/sanity/src/desk/components/TimeAgo.tsx
-import React from 'react'
 import {useTimeAgo} from 'sanity'
 
 export interface TimeAgoProps {

src/components/icons/Resolution.tsx

@@ -1,4 +1,4 @@
-import React, {SVGProps} from 'react'
+import type {SVGProps} from 'react'
 
 export function ResolutionIcon(props: SVGProps<SVGSVGElement>) {
   return (

src/components/icons/StopWatch.tsx

@@ -1,4 +1,4 @@
-import React, {SVGProps} from 'react'
+import type {SVGProps} from 'react'
 
 export function StopWatchIcon(props: SVGProps<SVGSVGElement>) {
   return (

src/components/icons/ToolIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 /**
  * Icon of a monitor with a play button.
  * Credits: material design icons & react-icons

src/components/withFocusRing/withFocusRing.ts

@@ -1,6 +1,6 @@
 import {rem} from '@sanity/ui'
-import {type ComponentType} from 'react'
-import styled, {css} from 'styled-components'
+import type {ComponentType} from 'react'
+import {css, styled} from 'styled-components'
 
 import {focusRingBorderStyle, focusRingStyle} from './helpers'
 

src/hooks/useImportMuxAssets.ts

@@ -2,11 +2,12 @@ import {uuid} from '@sanity/uuid'
 import {useMemo, useState} from 'react'
 import {
   createHookFromObservableFactory,
+  type DocumentStore,
   truncateString,
   useClient,
   useDocumentStore,
-  type DocumentStore,
 } from 'sanity'
+
 import {parseMuxDate} from '../util/parsers'
 import type {MuxAsset, VideoAssetDocument} from '../util/types'
 import {SANITY_API_VERSION} from './useClient'