@sanity/ui 0.38.2-next.14 → 0.38.2-next.16

package/src/components/tree/treeItem.tsx

@@ -1,5 +1,6 @@
+import {useId} from '@reach/auto-id'
 import {ToggleArrowRightIcon} from '@sanity/icons'
-import {createElement, memo, useCallback, useEffect, useId, useMemo, useRef} from 'react'
+import React, {createElement, memo, useCallback, useEffect, useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import {Box, Flex, Text} from '../../primitives'
 import {ThemeFontWeightKey} from '../../theme'
@@ -63,8 +64,7 @@ export const TreeItem = memo(function TreeItem(
   const treeitemRef = useRef<HTMLDivElement | null>(null)
   const tree = useTree()
   const {path, registerItem, setExpanded, setFocusedElement} = tree
-  const _id = useId()
-  const id = idProp || _id
+  const id = useId(idProp) || idProp
   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,5 +1,6 @@
 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 {useRef} from 'react'
+import React, {useRef} from 'react'
 import {useIsomorphicEffect} from './useIsomorphicEffect'
 
 /**

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

@@ -1,4 +1,5 @@
 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 {useCallback, useMemo, useState} from 'react'
+import React, {useCallback, useMemo, useState} from 'react'
 import {packages} from '$packages'
 
 function ucfirst(str: string) {

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

@@ -1,5 +1,6 @@
 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,5 +1,6 @@
 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,4 +1,5 @@
-import {forwardRef, useCallback, useEffect, useId, useMemo, useState} from 'react'
+import {useId} from '@reach/auto-id'
+import React, {forwardRef, useCallback, useEffect, useMemo, useState} from 'react'
 import ReactIs from 'react-is'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
@@ -70,7 +71,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 {forwardRef, useMemo} from 'react'
+import React, {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 {cloneElement, forwardRef} from 'react'
+import React, {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,5 +1,6 @@
 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,5 +1,6 @@
 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.tsx

@@ -1,4 +1,4 @@
-import {forwardRef} from 'react'
+import React, {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,5 +1,6 @@
 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,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

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

@@ -1,4 +1,5 @@
 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,5 +1,6 @@
 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,5 +1,6 @@
 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,6 +1,7 @@
 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,5 +1,6 @@
 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,6 +1,7 @@
 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,4 +1,5 @@
 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,4 +1,5 @@
 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 {useCallback, useRef} from 'react'
+import React, {useCallback, useRef} from 'react'
 
 export default function UploadButtonStory() {
   const inputRef = useRef<HTMLInputElement | null>(null)

package/src/primitives/button/button.tsx

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

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

@@ -1,4 +1,5 @@
 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,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {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,4 +1,5 @@
 import {Card, Flex, Stack} from '@sanity/ui'
+import React from 'react'
 
 export default function CheckeredStory() {
   return (

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

@@ -1,5 +1,6 @@
 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,4 +1,5 @@
 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,5 +1,6 @@
 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,6 +12,7 @@ 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,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {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 {useCallback, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [checked, setChecked] = useState<boolean | undefined>(undefined)

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

@@ -1,5 +1,6 @@
 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,4 +1,5 @@
 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,4 +1,5 @@
 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 {forwardRef, useEffect} from 'react'
+import React, {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,5 +1,6 @@
 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,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {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,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {Box, BoxProps} from '../box'

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

@@ -1,5 +1,6 @@
 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,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

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

@@ -1,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {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,5 +1,6 @@
 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,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {

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

@@ -1,5 +1,6 @@
 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 {forwardRef, useMemo} from 'react'
+import React, {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,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {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,5 +1,6 @@
 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,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {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,4 +1,5 @@
 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,5 +1,6 @@
 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 {useState} from 'react'
+import React, {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 {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {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 {useCallback, useState} from 'react'
+import React, {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 {ReactElement, useState} from 'react'
+import React, {ReactElement, useState} from 'react'
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,

package/src/primitives/popover/arrow.tsx

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

package/src/primitives/popover/popover.tsx

@@ -1,4 +1,12 @@
-import {cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {
+  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 {useCallback, useState} from 'react'
+import React, {useCallback, useState} from 'react'
 
 export default function ExampleStory() {
   const [value, setValue] = useState('first-option')

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

@@ -1,5 +1,6 @@
 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 {forwardRef} from 'react'
+import React, {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,5 +1,6 @@
 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,4 +1,5 @@
 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 {forwardRef} from 'react'
+import React, {forwardRef} from 'react'
 import styled from 'styled-components'
 import {useForwardedRef, useCustomValidity, useArrayProp} from '../../hooks'
 import {Box} from '../box'