@sanity/ui 0.38.2 → 0.38.3-next.5

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.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.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'

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'