@sanity/ui 0.38.2 → 0.38.3-next.18

package/src/components/menu/useMenuController.ts

@@ -33,7 +33,7 @@ export function useMenuController(props: {
   const activeElement = elementsRef.current[activeIndex] || null
   const mounted = Boolean(rootElement)
 
-  const setActiveIndex = useCallback((nextActiveIndex) => {
+  const setActiveIndex = useCallback((nextActiveIndex: number) => {
     _setActiveIndex(nextActiveIndex)
     activeIndexRef.current = nextActiveIndex
   }, [])

package/src/components/skeleton/__workshop__/delay.tsx

@@ -12,7 +12,6 @@ import {
   TextSkeleton,
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function SkeletonDelayStory() {

package/src/components/skeleton/__workshop__/skeleton.tsx

@@ -12,7 +12,6 @@ import {
   TextSkeleton,
 } from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function SkeletonStory() {

package/src/components/skeleton/skeleton.tsx

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

package/src/components/skeleton/textSkeleton.tsx

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

package/src/components/tab/__workshop__/example.tsx

@@ -1,6 +1,6 @@
 import {OkHandIcon, RocketIcon, SunIcon} from '@sanity/icons'
 import {Box, Card, Tab, TabList, TabPanel, Text} from '@sanity/ui'
-import React, {useState} from 'react'
+import {useState} from 'react'
 
 export default function ExampleStory() {
   const [tab, setTab] = useState('foo')

package/src/components/tab/tab.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, useCallback, useEffect, useRef} from 'react'
+import {forwardRef, useCallback, useEffect, useRef} from 'react'
 import {useForwardedRef} from '../../hooks'
 import {Button} from '../../primitives'
 import {ButtonTone} from '../../types'
@@ -12,7 +12,7 @@ export interface TabProps {
    */
   'aria-controls': string
   id: string
-  icon?: React.ComponentType | React.ReactNode
+  icon?: React.ElementType | React.ReactNode
   focused?: boolean
   fontSize?: number | number[]
   label?: React.ReactNode

package/src/components/tab/tabList.tsx

@@ -1,4 +1,4 @@
-import React, {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
+import {cloneElement, forwardRef, useCallback, useMemo, useState} from 'react'
 import {Inline, InlineProps} from '../../primitives'
 
 /**

package/src/components/tab/tabPanel.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 import {Box, BoxProps} from '../../primitives'
 
 /**

package/src/components/toast/__workshop__/hook.tsx

@@ -1,5 +1,4 @@
 import {Box, Button, Inline, ToastProvider, useToast} from '@sanity/ui'
-import React from 'react'
 
 export default function HookStory() {
   const toast = useToast()

package/src/components/toast/__workshop__/toast.tsx

@@ -1,6 +1,5 @@
 import {Box, Container, Toast} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useString, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_TOAST_STATUS_OPTIONS} from '../../../__workshop__/constants'
 
 export default function ToastStory() {

package/src/components/toast/toast.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-import {vi} from 'vitest'
 import {render} from '../../../test'
 import {ToastContext} from './toastContext'
 import {ToastContextValue} from './types'
@@ -8,7 +6,7 @@ import {useToast} from './useToast'
 describe('components/toast', () => {
   describe('useToast', () => {
     it('should get context value', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         const rootToast = useToast()
@@ -38,7 +36,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when no context value is provided', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         try {
@@ -66,7 +64,7 @@ describe('components/toast', () => {
     })
 
     it('should fail when context value is not compatible', async () => {
-      const log = vi.fn()
+      const log = jest.fn()
 
       function Debug() {
         try {

package/src/components/toast/toast.tsx

@@ -1,5 +1,4 @@
 import {CloseIcon} from '@sanity/icons'
-import React from 'react'
 import styled from 'styled-components'
 import {Box, Button, Card, Flex, Stack, Text} from '../../primitives'
 import {ThemeColorToneKey} from '../../theme'

package/src/components/toast/toastProvider.tsx

@@ -1,5 +1,5 @@
 import {AnimatePresence, motion} from 'framer-motion'
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import styled from 'styled-components'
 import {Box} from '../../primitives'
 import {Layer} from '../../utils'

package/src/components/tree/__workshop__/basic.tsx

@@ -1,7 +1,7 @@
 import {LinkIcon} from '@sanity/icons'
 import {Box, Tree, TreeItem} from '@sanity/ui'
 import {usePerfTest} from '@sanity/ui-workshop'
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {perfTests} from './basic.perf'
 
 export default function BasicStory() {

package/src/components/tree/tree.tsx

@@ -1,4 +1,4 @@
-import React, {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
 import {useForwardedRef} from '../../hooks'
 import {Stack} from '../../primitives'
 import {_findNextItemElement, _findPrevItemElement, _focusItemElement} from './helpers'

package/src/components/tree/treeGroup.tsx

@@ -1,4 +1,4 @@
-import React, {memo} from 'react'
+import {memo} from 'react'
 import {Stack} from '../../primitives'
 import {useTree} from './useTree'
 

package/src/components/tree/treeItem.tsx

@@ -1,6 +1,5 @@
-import {useId} from '@reach/auto-id'
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import React, {createElement, memo, useCallback, useEffect, useMemo, useRef} from 'react'
+import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, Flex, Text} from '../../primitives'
 import {ThemeFontWeightKey} from '../../theme'
@@ -20,7 +19,7 @@ import {useTree} from './useTree'
 export interface TreeItemProps {
   expanded?: boolean
   fontSize?: number | number[]
-  icon?: React.ComponentType
+  icon?: React.ElementType
   padding?: number | number[]
   space?: number | number[]
   text?: React.ReactNode
@@ -64,7 +63,8 @@ export const TreeItem = memo(function TreeItem(
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
-  const id = useId(idProp) || idProp
+  const _id = useId()
+  const id = idProp || _id
   const itemPath = useMemo(() => path.concat([id || '']), [id, path])
   const itemKey = itemPath.join('/')
   const itemState = tree.state[itemKey]

package/src/hooks/useElementRect/__workshop__/example.tsx

@@ -1,6 +1,5 @@
 import {Box, Card, Code, Container, Stack, Text, useElementRect} from '@sanity/ui'
 import {useMemo, useState} from 'react'
-import React from 'react'
 import {Grid} from '../../../primitives'
 
 export default function ExampleStory() {

package/src/hooks/useForwardedRef.ts

@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import {useRef} from 'react'
 import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 /**

package/src/hooks/useMediaIndex/__workshop__/test.tsx

@@ -1,5 +1,4 @@
 import {Card, Stack, Text, useMediaIndex} from '@sanity/ui'
-import React from 'react'
 
 export default function TestStory() {
   const mediaIndex = useMediaIndex()

package/src/icons/__workshop__/overview.tsx

@@ -1,6 +1,6 @@
 import {Icon, icons, IconSymbol, SearchIcon} from '@sanity/icons'
 import {Box, Card, Code, Container, Flex, Heading, Stack, Text, TextInput} from '@sanity/ui'
-import React, {useCallback, useMemo, useState} from 'react'
+import {useCallback, useMemo, useState} from 'react'
 import {packages} from '$packages'
 
 function ucfirst(str: string) {

package/src/primitives/avatar/__workshop__/asButton.tsx

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

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

@@ -1,6 +1,5 @@
 import {Avatar, AvatarCounter, AvatarStack, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_AVATAR_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function StackStory() {

package/src/primitives/avatar/avatar.tsx

@@ -1,5 +1,4 @@
-import {useId} from '@reach/auto-id'
-import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
+import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -71,7 +70,7 @@ export const Avatar = forwardRef(function Avatar(
   const _sizeRem = avatarSize.size
   const _radius = _sizeRem / 2
 
-  const elementId = useId() || ''
+  const elementId = useId()
   const [arrowPosition, setArrowPosition] = useState<AvatarPosition | undefined>(
     animateArrowFrom || arrowPositionProp || 'inside'
   )

package/src/primitives/avatar/avatarCounter.tsx

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

package/src/primitives/avatar/avatarStack.tsx

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

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

@@ -1,6 +1,5 @@
 import {Badge, Flex} from '@sanity/ui'
 import {useAction, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_BADGE_MODE_OPTIONS,
   WORKSHOP_BADGE_TONE_OPTIONS,

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

@@ -1,6 +1,5 @@
 import {Badge, Flex, Inline} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {WORKSHOP_BADGE_MODE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function Tones() {

package/src/primitives/badge/badge.test.tsx

@@ -0,0 +1,13 @@
+import {axe} from 'jest-axe'
+import {render} from '../../../test'
+import {Badge} from './badge'
+
+describe('atoms/badge', () => {
+  it('should have no violations (axe)', async () => {
+    const lightResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'light'})
+    const darkResult = render(<Badge tone="positive">Label</Badge>, {scheme: 'dark'})
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+})

package/src/primitives/badge/badge.tsx

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

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

@@ -1,6 +1,5 @@
 import {Box, Card, 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 PropsStory() {

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

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

package/src/primitives/box/box.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/button/__workshop__/custom.tsx

@@ -1,5 +1,4 @@
 import {Button, Flex, Grid, Stack, Text} from '@sanity/ui'
-import React from 'react'
 import {WORKSHOP_BUTTON_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function CustomStory() {

package/src/primitives/button/__workshop__/customIcons.tsx

@@ -1,6 +1,5 @@
 import {RocketIcon} from '@sanity/icons'
 import {Button, Flex, Inline} from '@sanity/ui'
-import React from 'react'
 
 export default function CustomIconsStory() {
   return (

package/src/primitives/button/__workshop__/mixedChildren.tsx

@@ -1,6 +1,5 @@
 import {AddIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import React from 'react'
 
 export default function MixedChildrenStory() {
   return (

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

@@ -1,7 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
 import {useAction, useBoolean, useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
   WORKSHOP_BUTTON_TEXT_ALIGN_OPTIONS,

package/src/primitives/button/__workshop__/sanityUploadButton.tsx

@@ -1,6 +1,5 @@
 import {UploadIcon} from '@sanity/icons'
 import {Button, Flex} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
 
 const SanityUploadButton = styled(Button).attrs({forwardedAs: 'label'})`

package/src/primitives/button/__workshop__/stacked.tsx

@@ -1,7 +1,6 @@
 import {icons} from '@sanity/icons'
 import {Box, Button, Card, Container, Flex, Stack} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_BUTTON_MODE_OPTIONS,
   WORKSHOP_BUTTON_TONE_OPTIONS,

package/src/primitives/button/__workshop__/styled1.tsx

@@ -1,5 +1,4 @@
 import {Button, Flex} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
 
 const StyledButton1 = styled.a`

package/src/primitives/button/__workshop__/styled2.tsx

@@ -1,5 +1,4 @@
 import {Button, Flex} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
 
 const StyledButton2 = styled(Button)<{$color?: boolean}>`

package/src/primitives/button/__workshop__/uploadButton.tsx

@@ -1,5 +1,5 @@
 import {Button, Flex} from '@sanity/ui'
-import React, {useCallback, useRef} from 'react'
+import {useCallback, useRef} from 'react'
 
 export default function UploadButtonStory() {
   const inputRef = useRef<HTMLInputElement | null>(null)

package/src/primitives/button/button.test.tsx

@@ -0,0 +1,41 @@
+import {AddIcon} from '@sanity/icons'
+import {screen} from '@testing-library/react'
+import {axe} from 'jest-axe'
+import {render} from '../../../test'
+import {Button, ButtonProps} from './button'
+
+describe('atoms/button', () => {
+  it('Axe: should have no violations', async () => {
+    const lightResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'light',
+    })
+
+    expect(await axe(lightResult.container.outerHTML)).toHaveNoViolations()
+
+    const darkResult = render(<Button icon={AddIcon} text="Label" tone="positive" />, {
+      scheme: 'dark',
+    })
+
+    expect(await axe(darkResult.container.outerHTML)).toHaveNoViolations()
+  })
+
+  it('should render text', () => {
+    render(<Button text="Button text" />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+
+  it('should wrap button', () => {
+    function WrappedButton({button: buttonProps}: {button: ButtonProps}) {
+      return <Button {...buttonProps} />
+    }
+
+    const buttonProps: ButtonProps = {
+      text: 'Button text',
+    }
+
+    render(<WrappedButton button={buttonProps} />)
+
+    expect(screen.getByText('Button text')).toBeInTheDocument()
+  })
+})

package/src/primitives/button/button.tsx

@@ -1,4 +1,4 @@
-import React, {createElement, forwardRef, isValidElement, useMemo} from 'react'
+import {createElement, forwardRef, isValidElement, useMemo} from 'react'
 import {isValidElementType} from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -20,8 +20,8 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   as?: React.ElementType | keyof JSX.IntrinsicElements
   fontSize?: number | number[]
   mode?: ButtonMode
-  icon?: React.ComponentType | React.ReactNode
-  iconRight?: React.ComponentType | React.ReactNode
+  icon?: React.ElementType | React.ReactNode
+  iconRight?: React.ElementType | React.ReactNode
   justify?: FlexJustify | FlexJustify[]
   /**
    * @beta Do not use in production, as this might change.

package/src/primitives/card/__workshop__/allTones.tsx

@@ -1,5 +1,4 @@
 import {Card, Container, Flex, Stack, Text} from '@sanity/ui'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function AllTonesStory() {

package/src/primitives/card/__workshop__/asButton.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, Container, Flex, Grid, Stack, Text} from '@sanity/ui'
-import React from 'react'
 import {WORKSHOP_CARD_TONE_OPTIONS} from '../../../__workshop__/constants'
 
 export default function AsButtonStory() {

package/src/primitives/card/__workshop__/asComponent.tsx

@@ -1,5 +1,5 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import React, {forwardRef} from 'react'
+import {forwardRef} from 'react'
 
 const CustomLink = forwardRef(function CustomLink(
   props: {req: string} & Omit<React.HTMLProps<HTMLAnchorElement>, 'as' | 'href'>,

package/src/primitives/card/__workshop__/checkered.tsx

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

package/src/primitives/card/__workshop__/interactive.tsx

@@ -1,6 +1,5 @@
 import {Card, Flex, Stack, Text} from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 
 export default function InteractiveCardStory() {
   const selected = useBoolean('Selected', false, 'Props')

package/src/primitives/card/__workshop__/listNavigation.tsx

@@ -1,5 +1,4 @@
 import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
-import React from 'react'
 import {Stack} from '../../stack'
 
 export default function ListNavigationStory() {

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

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

package/src/primitives/card/__workshop__/selected.tsx

@@ -12,7 +12,6 @@ import {
   useRootTheme,
 } from '@sanity/ui'
 import {useBoolean} from '@sanity/ui-workshop'
-import React from 'react'
 import styled, {css} from 'styled-components'
 
 const TextWithTone = styled(Text)<{$tone: ThemeColorToneKey}>(

package/src/primitives/card/__workshop__/styled.tsx

@@ -1,5 +1,4 @@
 import {Card, Flex, Text} from '@sanity/ui'
-import React from 'react'
 import styled from 'styled-components'
 
 const StyledCard = styled(Card).attrs({forwardedAs: 'ol'})``

package/src/primitives/card/card.tsx

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

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

@@ -1,5 +1,5 @@
 import {Box, Checkbox, Flex, 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/checkbox/__workshop__/props.tsx

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

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

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

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

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

package/src/primitives/checkbox/checkbox.tsx

@@ -1,5 +1,5 @@
 import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
-import React, {forwardRef, useEffect} from 'react'
+import {forwardRef, useEffect} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity} from '../../hooks'
 import {checkboxBaseStyles, inputElementStyles} from './styles'

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

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

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

@@ -1,6 +1,5 @@
 import {Box, Code} from '@sanity/ui'
 import {useSelect, useText} from '@sanity/ui-workshop'
-import React from 'react'
 import {
   WORKSHOP_CODE_LANGUAGE_OPTIONS,
   WORKSHOP_TEXT_FONT_SIZE_OPTIONS,

package/src/primitives/code/code.tsx

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

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

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

package/src/primitives/container/container.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'