@sanity/ui 0.38.2 → 0.38.3-next.18

package/src/primitives/flex/__workshop__/example.tsx

@@ -1,6 +1,5 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import styled from 'styled-components'
 import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
 

package/src/primitives/flex/__workshop__/gap.tsx

@@ -1,5 +1,4 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import React from 'react'
 
 export default function GapStory() {
   return (

package/src/primitives/flex/flex.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

package/src/primitives/grid/__workshop__/responsive.tsx

@@ -1,5 +1,4 @@
 import {Card, Code, Container, Flex, Grid} from '@sanity/ui'
-import React from 'react'
 
 export default function ResponsiveStory() {
   return (

package/src/primitives/grid/grid.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'

package/src/primitives/heading/__workshop__/opticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Heading, Stack} from '@sanity/ui'
-import React from 'react'
 
 export default function OpticalAlignment() {
   return (

package/src/primitives/heading/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Flex, Heading} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_HEADING_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

package/src/primitives/heading/heading.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

package/src/primitives/inline/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Flex, Inline, Text} from '@sanity/ui'
 import {useAction, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PlainStory() {

package/src/primitives/inline/inline.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useMemo} from 'react'
+import {forwardRef, useMemo} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'

package/src/primitives/kbd/__workshop__/plain.tsx

@@ -1,5 +1,4 @@
 import {Flex, KBD} from '@sanity/ui'
-import React from 'react'
 
 export default function PlainStory() {
   return (

package/src/primitives/kbd/kbd.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled, {css} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'

package/src/primitives/label/__workshop__/opticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Label, Stack} from '@sanity/ui'
-import React from 'react'
 
 export default function OpticalAlignment() {
   return (

package/src/primitives/label/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Flex, Label} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_LABEL_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

package/src/primitives/label/label.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'

package/src/primitives/popover/__workshop__/MarginsStory.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, Container, Flex, Popover, Text} from '@sanity/ui'
-import React from 'react'
 
 export default function MarginsStory() {
   return (

package/src/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx

@@ -1,6 +1,5 @@
 import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 export default function MatchReferenceWidthStory() {

package/src/primitives/popover/__workshop__/PlainStory.tsx

@@ -1,6 +1,6 @@
 import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,

package/src/primitives/popover/__workshop__/RecursiveStory.tsx

@@ -7,7 +7,7 @@ import {
   ThemeColorToneKey,
   useLayer,
 } from '@sanity/ui'
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {
   return (

package/src/primitives/popover/__workshop__/RightAlignedStory.tsx

@@ -1,7 +1,7 @@
 import {EllipsisVerticalIcon} from '@sanity/icons'
 import {Button, Card, Flex, Popover, Text, useClickOutside} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function RightAlignedStory() {
   const constrainSize = useBoolean('Constrain size', false)

package/src/primitives/popover/__workshop__/TestStory.tsx

@@ -1,5 +1,5 @@
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React, {ReactElement, useState} from 'react'
+import {ReactElement, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,

package/src/primitives/popover/arrow.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 
 const Root = styled.div`

package/src/primitives/popover/popover.tsx

@@ -1,12 +1,4 @@
-import React, {
-  cloneElement,
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
+import {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled, {css} from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'

package/src/primitives/radio/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {Box, Container, Flex, Radio, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [value, setValue] = useState('first-option')

package/src/primitives/radio/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Flex, Radio} from '@sanity/ui'
 import {useAction, useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function PlainStory() {
   const checked = useBoolean('Checked?', false, 'Props')

package/src/primitives/radio/radio.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {radioBaseStyle, inputElementStyle} from './styles'

package/src/primitives/select/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function PlainStory() {
   const disabled = useBoolean('Disabled', false, 'Props')

package/src/primitives/select/__workshop__/readOnly.tsx

@@ -1,5 +1,4 @@
 import {Card, Container, Label, Select, Stack} from '@sanity/ui'
-import React from 'react'
 
 export default function ReadOnlyStory() {
   return (

package/src/primitives/select/select.tsx

@@ -1,5 +1,5 @@
 import {SelectIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Box} from '../box'

package/src/primitives/spinner/__workshop__/Props.tsx

@@ -1,6 +1,5 @@
 import {Flex, Spinner} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function Props() {

package/src/primitives/spinner/spinner.tsx

@@ -1,5 +1,5 @@
 import {SpinnerIcon} from '@sanity/icons'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled, {keyframes} from 'styled-components'
 import {Text} from '../text'
 

package/src/primitives/stack/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_SPACE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PlainStory() {

package/src/primitives/stack/stack.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'

package/src/primitives/switch/__workshop__/example.tsx

@@ -1,5 +1,5 @@
 import {Box, Flex, Switch, Text} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [checked, setChecked] = useState<boolean | undefined>(undefined)

package/src/primitives/switch/__workshop__/props.tsx

@@ -1,6 +1,6 @@
 import {Flex, Switch, useTheme} from '@sanity/ui'
 import {useBoolean, useNumber} from '@sanity/ui-workshop'
-import React, {useCallback, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {ThemeProvider} from 'styled-components'
 
 export default function PropsStory() {

package/src/primitives/switch/switch.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useEffect} from 'react'
+import {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef} from '../../hooks'
 import {

package/src/primitives/text/__workshop__/colored.tsx

@@ -1,6 +1,5 @@
 import {Flex, Text, Theme, ThemeColorSpotKey, useTheme} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import styled, {css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 

package/src/primitives/text/__workshop__/example.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Text} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_TEXT_ALIGN_OPTIONS,
   WORKSHOP_TEXT_OVERFLOW_OPTIONS,

package/src/primitives/text/__workshop__/opticalAlignment.tsx

@@ -1,6 +1,5 @@
 import {AddCircleIcon} from '@sanity/icons'
 import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
-import React from 'react'
 
 export default function OpticalAlignment() {
   return (

package/src/primitives/text/text.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

package/src/primitives/textArea/__workshop__/plain.tsx

@@ -1,6 +1,5 @@
 import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

package/src/primitives/textArea/textArea.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {

package/src/primitives/textInput/__workshop__/clearButton.tsx

@@ -1,6 +1,6 @@
 import {Box, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function ClearButtonStory() {
   const customValidity = useText('Custom validitiy')

package/src/primitives/textInput/__workshop__/customValidity.tsx

@@ -1,6 +1,5 @@
 import {Button, Card, Container, Stack, TextInput} from '@sanity/ui'
 import {useText} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function CustomValidityStory() {
   const customValidity = useText('Custom validity', 'Invalid value', 'Props') || undefined

package/src/primitives/textInput/__workshop__/multipleTones.tsx

@@ -1,5 +1,4 @@
 import {Card, Stack, TextInput} from '@sanity/ui'
-import React from 'react'
 
 export default function MultipleTonesStory() {
   return (

package/src/primitives/textInput/__workshop__/plain.tsx

@@ -2,7 +2,7 @@ import {icons, IconSymbol} from '@sanity/icons'
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {PerfTestProps, useBoolean, usePerfTest, useSelect, useText} from '@sanity/ui-workshop'
 import {fireEvent} from '@testing-library/dom'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
   WORKSHOP_FONT_WEIGHT_OPTIONS,

package/src/primitives/textInput/__workshop__/readOnly.tsx

@@ -1,5 +1,4 @@
 import {TextInput} from '@sanity/ui'
-import React from 'react'
 
 export default function ReadOnlyStory() {
   return <TextInput id="text-input-example" readOnly />

package/src/primitives/textInput/__workshop__/states.tsx

@@ -1,6 +1,5 @@
 import {Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useAction} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function StatesStory() {
   const onChange = useAction('onChange')

package/src/primitives/textInput/__workshop__/tones.tsx

@@ -1,6 +1,5 @@
 import {Box, Card, Container, Flex, Stack, Text, TextInput} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function TonesStory() {
   const transparentTone = useBoolean('Transparent', true)

package/src/primitives/textInput/__workshop__/typed.tsx

@@ -1,6 +1,6 @@
 import {Box, Container, TextInput} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {WORKSHOP_TEXT_INPUT_TYPE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function TypedStory() {

package/src/primitives/textInput/textInput.tsx

@@ -1,5 +1,5 @@
 import {CloseIcon} from '@sanity/icons'
-import React, {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
+import {createElement, forwardRef, isValidElement, useCallback, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {EMPTY_RECORD} from '../../constants'
@@ -43,6 +43,7 @@ export type TextInputType =
   | 'time'
   | 'text'
   | 'week'
+  | 'color'
 
 /**
  * @public
@@ -55,8 +56,8 @@ export interface TextInputProps {
   clearButton?: boolean | TextInputClearButtonProps
   customValidity?: string
   fontSize?: number | number[]
-  icon?: React.ComponentType | React.ReactNode
-  iconRight?: React.ComponentType | React.ReactNode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
   /**
    * @beta
    */

package/src/primitives/tooltip/__workshop__/props.tsx

@@ -1,6 +1,5 @@
 import {Box, Button, Card, Flex, Text, Tooltip} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../__workshop__/constants'
 
 export default function PropsStory() {

package/src/primitives/tooltip/tooltip.tsx

@@ -1,4 +1,4 @@
-import React, {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
+import {cloneElement, forwardRef, useCallback, useEffect, useRef, useState} from 'react'
 import {usePopper} from 'react-popper'
 import styled from 'styled-components'
 import {useArrayProp, useForwardedRef} from '../../hooks'

package/src/primitives/tooltip/tooltipArrow.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import styled from 'styled-components'
 
 const Root = styled.div`

package/src/styles/font/responsiveFont.ts

@@ -48,6 +48,19 @@ export function responsiveFont(
     },
   }
 
+  // @TODO fix the real condition that is causing $size to be undefined sometimes
+  if (!$size) {
+    // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+    if (!responsiveFont.warned) {
+      // eslint-disable-next-line no-console
+      console.warn('No size specified for responsive font', {fontKey, $size, props, base})
+      // @ts-expect-error: `warned` isn't typed, the underlying issue should be solved rather than typing it
+      responsiveFont.warned = true
+    }
+
+    return [base]
+  }
+
   const resp = _responsive(media, $size, (sizeIndex) => fontSize(sizes[sizeIndex] || defaultSize))
 
   return [base, ...resp]

package/src/theme/__workshop__/canvas.tsx

@@ -22,7 +22,7 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React, {createContext, useContext} from 'react'
+import {createContext, useContext} from 'react'
 import {ThemeColorCard} from '../lib/theme'
 
 interface Features {

package/src/theme/__workshop__/color.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, Tree, TreeItem, useRootTheme} from '@sanity/ui'
-import React from 'react'
 
 export default function ColorStory() {
   const {theme} = useRootTheme()

package/src/theme/__workshop__/layer.tsx

@@ -1,5 +1,5 @@
 import {Box, Button, Container, Dialog, Flex, Popover, Stack, Text, Tooltip} from '@sanity/ui'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 
 export default function LayerStory() {
   const [dialogOpen, setDialogOpen] = useState(false)

package/src/theme/__workshop__/nestedProvider.tsx

@@ -1,5 +1,4 @@
 import {Card, Flex, Text, ThemeProvider} from '@sanity/ui'
-import React from 'react'
 
 export default function NestedProviderStory() {
   return (

package/src/theme/theme.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-import {vi} from 'vitest'
 import {render} from '../../test'
 import {studioTheme} from './studioTheme'
 import {ThemeContext} from './themeContext'
@@ -9,7 +7,7 @@ import {useRootTheme} from './useRootTheme'
 describe('theme', () => {
   describe('useRootTheme', () => {
     it('should get context value', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         const rootTheme = useRootTheme()
@@ -42,7 +40,7 @@ describe('theme', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         try {
@@ -70,7 +68,7 @@ describe('theme', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         try {

package/src/theme/themeColorProvider.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import {ThemeColorName, ThemeColorSchemeKey} from './lib/theme'
 import {ThemeProvider} from './themeProvider'
 import {useRootTheme} from './useRootTheme'

package/src/theme/themeProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useContext, useMemo} from 'react'
+import {useContext, useMemo} from 'react'
 import {ThemeProvider as StyledThemeProvider} from 'styled-components'
 import {DEFAULT_THEME_LAYER} from './defaults'
 import {ThemeColorSchemeKey, ThemeColorName} from './lib/theme'

package/src/utils/boundaryElement/__workshop__/plain.tsx

@@ -1,5 +1,5 @@
 import {Box, BoundaryElementProvider, Button, Card, Text, Tooltip} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function PlainStory() {
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

package/src/utils/boundaryElement/boundaryElement.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-import {vi} from 'vitest'
 import {render} from '../../../test'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
@@ -8,7 +6,7 @@ import {useBoundaryElement} from './useBoundaryElement'
 describe('utils/boundaryElement', () => {
   describe('useBoundaryElement', () => {
     it('should get context value', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -38,7 +36,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should provide default value when no context value is provided', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         const rootBoundaryElement = useBoundaryElement()
@@ -65,7 +63,7 @@ describe('utils/boundaryElement', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         try {

package/src/utils/boundaryElement/boundaryElementProvider.tsx

@@ -1,4 +1,4 @@
-import React, {useMemo} from 'react'
+import {useMemo} from 'react'
 import {BoundaryElementContext} from './boundaryElementContext'
 import {BoundaryElementContextValue} from './types'
 

package/src/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
 
 const TestCard = styled(Card)`

package/src/utils/elementQuery/elementQuery.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useMemo, useState} from 'react'
 import {useElementSize, useForwardedRef} from '../../hooks'
 import {useTheme} from '../../theme'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'