@sanity/ui 3.0.0-static.0 → 3.0.0-static.1

package/src/core/primitives/button/styles.ts

@@ -1,8 +1,8 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
+import {ThemeProps} from '../../_compat'
+import {_cardColorStyle} from '../../_compat/styles/card'
+import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
 import {css} from '../../lib/styled'
-import {ThemeProps} from '../../styles'
-import {_cardColorStyle} from '../../styles/card'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 import {ButtonMode, ButtonTone, ButtonWidth} from '../../types'
 
 /**

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

@@ -1,4 +1,4 @@
-import {Card, Flex, Stack, Text} from '@sanity/ui'
+import {Card, Flex, Radius, Stack, Text} from '@sanity/ui'
 import {useAction, useBoolean, useSelect} from '@sanity/ui-workshop'
 import {
   WORKSHOP_CARD_AS_OPTIONS,
@@ -28,7 +28,7 @@ export default function PropsStory() {
         muted={muted}
         onClick={useAction('onClick')}
         padding={padding}
-        radius={radius}
+        radius={radius as Radius}
         selected={selected}
         shadow={shadow}
         tone={tone}

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

@@ -2,7 +2,7 @@ import {EditIcon, PublishIcon} from '@sanity/icons'
 import {Box, Card, Container, Flex, Inline, Stack, Text, ThemeProps, useRootTheme} from '@sanity/ui'
 import {ThemeColorStateToneKey, getTheme_v2} from '@sanity/ui/theme'
 import {useBoolean} from '@sanity/ui-workshop'
-import {styled, css} from '../../../lib/styled'
+import {styled, css} from 'styled-components'
 
 const TextWithTone = styled(Text)<{$tone: ThemeColorStateToneKey}>((
   props: {

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

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

package/src/core/primitives/card/card.tsx

@@ -38,8 +38,8 @@ export const Card = forwardRef(function Card(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
-    // __unstable_checkered: checkered = false,
-    // __unstable_focusRing: focusRing = false,
+    __unstable_checkered: checkered = false,
+    __unstable_focusRing: focusRing = false,
     as: asProp,
     border,
     borderTop,
@@ -47,7 +47,7 @@ export const Card = forwardRef(function Card(
     borderBottom,
     borderLeft,
     className,
-    // muted,
+    muted,
     pressed,
     radius = 0,
     scheme,
@@ -75,12 +75,9 @@ export const Card = forwardRef(function Card(
         data-tone={tone}
         {...restProps}
         as={as}
-        // $checkered={checkered}
-        // $focusRing={focusRing}
-        // $muted={muted}
         className={composeClassNames(
           className,
-          rootCard ? undefined : 'root',
+          // rootCard ? undefined : 'root',
           card({
             border,
             borderTop,
@@ -91,11 +88,11 @@ export const Card = forwardRef(function Card(
             shadow,
           }),
         )}
-        // data-checkered={checkered ? '' : undefined}
+        data-checkered={checkered ? '' : undefined}
+        data-focus-ring={focusRing ? '' : undefined}
+        data-muted={muted ? '' : undefined}
         data-pressed={pressed ? '' : undefined}
-        data-test={rootCard ? undefined : ''}
         data-selected={selected ? '' : undefined}
-        // forwardedAs={as}
         ref={ref}
         selected={selected}
         style={style}

package/src/core/primitives/code/code.tsx

@@ -1,19 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
-import {code, composeClassNames} from '@sanity/ui/css'
-import {FontWeight} from '@sanity/ui/theme'
+import {code, composeClassNames, FontStyleProps} from '@sanity/ui/css'
 import {forwardRef} from 'react'
 import Refractor from 'react-refractor'
 
 /**
  * @public
  */
-export interface CodeProps {
+export interface CodeProps extends Omit<FontStyleProps, 'align'> {
   as?: React.ElementType | keyof JSX.IntrinsicElements
   /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
-  weight?: FontWeight
 }
 
 /**

package/src/core/primitives/container/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {ResponsiveWidthStyleProps} from './types'
 
 const BASE_STYLE: CSSObject = {

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

@@ -1,6 +1,6 @@
 import {Card, Code, Flex} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled} from '../../../lib/styled'
+import {styled} from 'styled-components'
 import {WORKSHOP_FLEX_DIRECTION_OPTIONS} from '../../../__workshop__/constants'
 
 const DebugCard = styled(Card)`

package/src/core/primitives/flex/flex.tsx

@@ -1,11 +1,4 @@
 import {forwardRef} from 'react'
-import {styled} from '../../lib/styled'
-import {
-  flexItemStyle,
-  FlexItemStyleProps,
-  responsiveFlexStyle,
-  ResponsiveFlexStyleProps,
-} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
 
 /**
@@ -13,11 +6,6 @@ import {Box, BoxProps} from '../box'
  */
 export interface FlexProps extends Omit<BoxProps, 'display'> {}
 
-const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
-  flexItemStyle,
-  responsiveFlexStyle,
-)
-
 /**
  * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
  *
@@ -30,7 +18,7 @@ export const Flex = forwardRef(function Flex(
   const {as, direction = 'row', ...restProps} = props
 
   return (
-    <Root
+    <Box
       data-ui="Flex"
       {...restProps}
       direction={direction}

package/src/core/primitives/grid/grid.tsx

@@ -1,16 +1,10 @@
 import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
-import {styled} from '../../lib/styled'
-import {responsiveGridStyle, ResponsiveGridStyleProps} from '../../styles/internal'
 import {Box, BoxProps} from '../box'
-import {ResponsiveGridProps} from '../types'
 
 /**
  * @public
  */
-export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
-
-const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+export interface GridProps extends Omit<BoxProps, 'display'> {}
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
@@ -21,28 +15,20 @@ export const Grid = forwardRef(function Grid(
   props: GridProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows'>,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, autoRows, autoCols, autoFlow, columns, gap, gapX, gapY, rows, children, ...restProps} =
-    props
+  const {as, children, ...restProps} = props
 
   return (
-    <Root
+    <Box
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
-      $autoRows={useArrayProp(autoRows)}
-      $autoCols={useArrayProp(autoCols)}
-      $autoFlow={useArrayProp(autoFlow)}
-      $columns={useArrayProp(columns)}
-      $gap={useArrayProp(gap)}
-      $gapX={useArrayProp(gapX)}
-      $gapY={useArrayProp(gapY)}
-      $rows={useArrayProp(rows)}
       display="grid"
       forwardedAs={as}
       ref={ref}
     >
       {children}
-    </Root>
+    </Box>
   )
 })
+
 Grid.displayName = 'ForwardRef(Grid)'

package/src/core/primitives/heading/heading.tsx

@@ -1,40 +1,25 @@
-import {composeClassNames, heading} from '@sanity/ui/css'
-import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {composeClassNames, FontStyleProps, heading, ResponsiveProp} from '@sanity/ui/css'
+import {FontHeadingSize} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
 import {styled} from '../../lib/styled'
-// import {
-//   ResponsiveFontStyleProps,
-//   responsiveHeadingFont,
-//   responsiveTextAlignStyle,
-//   ResponsiveTextAlignStyleProps,
-// } from '../../styles/internal'
-import {TextAlign} from '../../types'
-// import {headingBaseStyle} from './styles'
-// import {HeadingStyleProps} from './types'
 
 /**
  * @public
  */
-export interface HeadingProps {
+export interface HeadingProps extends FontStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   muted?: boolean
-  size?: number | number[]
+  size?: ResponsiveProp<FontHeadingSize>
   /**
    * Controls how overflowing text is treated.
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
   textOverflow?: 'ellipsis'
-  weight?: ThemeFontWeightKey
 }
 
-// const Root = styled.div<
-//   HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
-// >(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
-
+// todo
 const SpanWithTextOverflow = styled.span`
   display: block;
   white-space: nowrap;
@@ -75,15 +60,13 @@ export const Heading = forwardRef(function Heading(
     <As
       data-ui="Heading"
       {...restProps}
-      // $accent={accent}
-      $align={useArrayProp(align)}
-      // $muted={muted}
-      // $size={useArrayProp(size)}
-      // $weight={weight}
+      // todo
+      // $align={useArrayProp(align)}
       className={composeClassNames(
         className,
         heading({
           accent,
+          align,
           muted,
           size,
           weight,

package/src/core/primitives/heading/styles.ts

@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
+import {ThemeProps} from '../../_compat'
 import {css} from '../../lib/styled'
-import {ThemeProps} from '../../styles'
 import {HeadingStyleProps} from './types'
 
 export function headingBaseStyle(props: HeadingStyleProps & ThemeProps): ReturnType<typeof css> {

package/src/core/primitives/inline/inline.tsx

@@ -1,11 +1,7 @@
 import {ResponsiveProp} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
-import {forwardRef, useMemo, Children} from 'react'
-// import {useArrayProp} from '../../hooks'
-// import {styled} from '../../lib/styled'
+import {forwardRef, useMemo, Children, ForwardedRef} from 'react'
 import {Box, BoxProps} from '../box'
-// import {inlineBaseStyle, inlineSpaceStyle} from './styles'
-// import {ResponsiveInlineSpaceStyleProps} from './types'
 
 /**
  * @public
@@ -16,8 +12,6 @@ export interface InlineProps
   space?: ResponsiveProp<Space>
 }
 
-// const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
-
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
  *
@@ -25,7 +19,7 @@ export interface InlineProps
  */
 export const Inline = forwardRef(function Inline(
   props: InlineProps & Omit<React.HTMLProps<HTMLDivElement>, 'wrap'>,
-  ref,
+  ref: ForwardedRef<HTMLDivElement>,
 ) {
   const {as, children: childrenProp, space, ...restProps} = props
 
@@ -38,14 +32,11 @@ export const Inline = forwardRef(function Inline(
     <Box
       data-ui="Inline"
       {...restProps}
-      // $space={useArrayProp(space)}
       align="center"
       as={as}
       display="flex"
-      // forwardedAs={as}
       gap={space}
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      ref={ref as any}
+      ref={ref}
       wrap="wrap"
     >
       {children}

package/src/core/primitives/inline/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {ResponsiveInlineSpaceStyleProps} from './types'
 
 export function inlineBaseStyle(): CSSObject {

package/src/core/primitives/label/label.tsx

@@ -1,18 +1,16 @@
-import {composeClassNames, label} from '@sanity/ui/css'
+import {composeClassNames, FontStyleProps, label} from '@sanity/ui/css'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
+import {responsiveLabelFont, responsiveTextAlignStyle} from '../../_compat/styles/internal'
 import {styled} from '../../lib/styled'
-import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
 import {labelBaseStyle} from './styles'
 
 /**
  * @public
  */
-export interface LabelProps {
+export interface LabelProps extends FontStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   muted?: boolean
   size?: number | number[]
@@ -73,15 +71,12 @@ export const Label = forwardRef(function Label(
     <Root
       data-ui="Label"
       {...restProps}
-      // $accent={accent}
-      $align={useArrayProp(align)}
-      // $muted={muted}
-      // $size={useArrayProp(size)}
       $weight={weight}
       className={composeClassNames(
         className,
         label({
           accent,
+          align,
           muted,
           size,
         }),

package/src/core/primitives/label/styles.ts

@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
+import {ThemeProps} from '../../_compat'
 import {css} from '../../lib/styled'
-import {ThemeProps} from '../../styles'
 
 export function labelBaseStyle(
   props: {$accent?: boolean; $muted: boolean} & ThemeProps,

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

@@ -1,4 +1,4 @@
-import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
+import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
 import {
@@ -56,7 +56,7 @@ export default function PlainStory() {
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
-              radius={radius}
+              radius={radius as Radius}
               width={width}
             >
               <Button text="This button is the popover reference" />

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

@@ -1,3 +1,4 @@
+import {Radius} from '@sanity/ui/theme'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {ReactElement, useRef, useState} from 'react'
 import {
@@ -80,7 +81,7 @@ export default function TestStory(): ReactElement {
                   placement={placement}
                   portal={portal}
                   preventOverflow={preventOverflow}
-                  radius={radius}
+                  radius={radius as Radius}
                   updateRef={updateRef}
                   width={width}
                 >

package/src/core/primitives/popover/popover.tsx

@@ -120,7 +120,7 @@ export const Popover = memo(
     props: PopoverProps &
       Omit<
         React.HTMLProps<HTMLDivElement>,
-        'as' | 'children' | 'content' | 'height' | 'width' | 'wrap'
+        'as' | 'children' | 'content' | 'height' | 'rows' | 'width' | 'wrap'
       >,
     forwardedRef: React.ForwardedRef<HTMLDivElement>,
   ): React.ReactElement {

package/src/core/primitives/popover/popoverCard.tsx

@@ -49,7 +49,7 @@ const MotionCard = motion(Card)
 export const PopoverCard = memo(
   forwardRef(function PopoverCard(
     props: PopoverCardProps &
-      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'width' | 'wrap'>,
+      Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'height' | 'rows' | 'width' | 'wrap'>,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) {
     const {

package/src/core/primitives/radio/radio.tsx

@@ -1,6 +1,6 @@
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from '../../lib/styled'
 import {useCustomValidity} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {radioBaseStyle, inputElementStyle} from './styles'
 
 /**

package/src/core/primitives/radio/styles.ts

@@ -1,7 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
+import {rem, ThemeProps} from '../../_compat'
+import {focusRingBorderStyle, focusRingStyle} from '../../_compat/styles/internal'
 import {css} from '../../lib/styled'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingBorderStyle, focusRingStyle} from '../../styles/internal'
 
 export function radioBaseStyle(): ReturnType<typeof css> {
   return css`

package/src/core/primitives/select/select.tsx

@@ -1,7 +1,7 @@
 import {ChevronDownIcon} from '@sanity/icons'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from '../../lib/styled'
 import {useCustomValidity, useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {Radius} from '../../types'
 import {Box} from '../box'
 import {Text} from '../text'

package/src/core/primitives/select/styles.ts

@@ -1,14 +1,14 @@
 import {ThemeFontSize, getTheme_v2} from '@sanity/ui/theme'
 import {CSSObject} from '@sanity/ui/theme'
-import {css} from '../../lib/styled'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 import {
   focusRingBorderStyle,
   focusRingStyle,
   responsiveInputPaddingIconRightStyle,
   responsiveRadiusStyle,
   ResponsiveRadiusStyleProps,
-} from '../../styles/internal'
+} from '../../_compat/styles/internal'
+import {css} from '../../lib/styled'
 
 function rootStyle(): ReturnType<typeof css> {
   return css`

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

@@ -1,4 +1,5 @@
 import {Flex, Spinner} from '@sanity/ui'
+import {FontTextSize} from '@sanity/ui/theme'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {WORKSHOP_TEXT_SIZE_OPTIONS} from '../../../__workshop__/constants'
 
@@ -8,7 +9,7 @@ export default function Props() {
 
   return (
     <Flex align="center" height="fill" justify="center">
-      <Spinner muted={muted} size={size} />
+      <Spinner muted={muted} size={size as FontTextSize} />
     </Flex>
   )
 }

package/src/core/primitives/spinner/animatedSpinnerIcon.tsx

@@ -0,0 +1,16 @@
+import {SpinnerIcon} from '@sanity/icons'
+import {animatedSpinnerIcon, composeClassNames} from '@sanity/ui/css'
+import {ReactElement, SVGProps} from 'react'
+
+/** @internal */
+export function AnimatedSpinnerIcon(props: SVGProps<SVGSVGElement>): ReactElement {
+  const {className, ...restProps} = props
+
+  return (
+    <SpinnerIcon
+      {...restProps}
+      data-sanity-icon="animated-spinner"
+      className={composeClassNames(className, animatedSpinnerIcon())}
+    />
+  )
+}

package/src/core/primitives/spinner/spinner.tsx

@@ -1,8 +1,8 @@
-import {SpinnerIcon} from '@sanity/icons'
 import {ResponsiveProp, spinner} from '@sanity/ui/css'
 import {FontTextSize} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
 import {Text} from '../text'
+import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 
 /**
  * @public
@@ -23,7 +23,7 @@ export const Spinner = forwardRef(function Spinner(
 ) {
   return (
     <Text data-ui="Spinner" {...props} className={spinner()} ref={ref}>
-      <SpinnerIcon />
+      <AnimatedSpinnerIcon />
     </Text>
   )
 })

package/src/core/primitives/stack/styles.ts

@@ -1,5 +1,5 @@
 import {CSSObject, getTheme_v2} from '@sanity/ui/theme'
-import {rem, _responsive, ThemeProps} from '../../styles'
+import {rem, _responsive, ThemeProps} from '../../_compat'
 
 export interface ResponsiveStackSpaceStyleProps {
   $space: number[]

package/src/core/primitives/switch/styles.ts

@@ -1,7 +1,7 @@
 import {getTheme_v2} from '@sanity/ui/theme'
+import {rem, ThemeProps} from '../../_compat'
+import {focusRingStyle} from '../../_compat/styles/internal'
 import {css} from '../../lib/styled'
-import {rem, ThemeProps} from '../../styles'
-import {focusRingStyle} from '../../styles/internal'
 
 /* Root */
 // export function switchBaseStyles(): ReturnType<typeof css> {

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

@@ -1,7 +1,7 @@
 import {Flex, Text, ThemeProps} from '@sanity/ui'
 import {ThemeColorAvatarColorKey, ThemeColorSpotKey, getTheme_v2} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
-import {styled, css} from '../../../lib/styled'
+import {styled, css} from 'styled-components'
 import {WORKSHOP_SPOT_COLOR_OPTIONS} from '../../../__workshop__/constants'
 
 const ColoredText = styled(Text)<{$color?: ThemeColorSpotKey}>((

package/src/core/primitives/text/styles.ts

@@ -1,6 +1,6 @@
 import {getTheme_v2} from '@sanity/ui/theme'
+import {ThemeProps} from '../../_compat'
 import {css} from '../../lib/styled'
-import {ThemeProps} from '../../styles'
 
 export function textBaseStyle(
   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,

package/src/core/primitives/text/text.tsx

@@ -1,16 +1,13 @@
 import {composeClassNames, text, TextStyleProps} from '@sanity/ui/css'
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef} from 'react'
-import {useArrayProp} from '../../hooks'
 import {styled} from '../../lib/styled'
-import {TextAlign} from '../../types'
 
 /**
  * @public
  */
 export interface TextProps extends TextStyleProps {
   accent?: boolean
-  align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
   /** When `true` the text color will be muted. */
   muted?: boolean
@@ -65,12 +62,12 @@ export const Text = forwardRef(function Text(
     <As
       data-ui="Text"
       {...restProps}
-      $align={useArrayProp(align)}
       ref={ref}
       className={composeClassNames(
         className,
         text({
           accent,
+          align,
           muted,
           size,
           weight,

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

@@ -1,4 +1,4 @@
-import {Card, Container, Flex, Stack, Text, TextArea} from '@sanity/ui'
+import {Card, Container, Flex, Radius, Stack, Text, TextArea} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {
   WORKSHOP_CARD_TONE_OPTIONS,
@@ -37,7 +37,7 @@ export default function PlainStory() {
               id="text-area-example"
               padding={padding}
               placeholder={placeholder}
-              radius={radius}
+              radius={radius as Radius}
               readOnly={readOnly}
               weight={weight}
             />

package/src/core/primitives/textArea/textArea.tsx

@@ -1,7 +1,5 @@
 import {ThemeFontWeightKey} from '@sanity/ui/theme'
 import {forwardRef, useImperativeHandle, useRef} from 'react'
-import {styled} from '../../lib/styled'
-import {useCustomValidity, useArrayProp} from '../../hooks'
 import {
   responsiveInputPaddingStyle,
   responsiveRadiusStyle,
@@ -13,7 +11,9 @@ import {
   textInputBaseStyle,
   textInputFontSizeStyle,
   textInputRepresentationStyle,
-} from '../../styles/internal'
+} from '../../_compat/styles/internal'
+import {useCustomValidity, useArrayProp} from '../../hooks'
+import {styled} from '../../lib/styled'
 import {useRootTheme} from '../../theme'
 import {ResponsiveRadiusProps} from '../types'