@sanity/ui 3.0.0-static.27 → 3.0.0-static.29

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

@@ -1,18 +1,20 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Card,
+  type CardTone,
+  Flex,
+  Popover,
+  type PopoverProps,
+  type PopoverUpdateCallback,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
 
-import type {CardTone} from '../../../types'
-import {BoundaryElementProvider} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Popover, type PopoverProps} from '../popover'
-import type {PopoverUpdateCallback} from '../types'
-
 const SIDE_PANEL_WIDTH = {
   sm: 300,
   md: 400,

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

@@ -1,20 +1,21 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Popover,
+  type PopoverUpdateCallback,
+  PortalProvider,
+  Text,
+} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useRef, useState} from 'react'
 
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  // WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
 } from '$workshop'
 
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
-import {Popover} from '../popover'
-import type {PopoverUpdateCallback} from '../types'
-
 export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

package/src/core/primitives/popover/constants.ts

@@ -1,4 +1,4 @@
-import type {Placement, PopoverMargins} from '../../types'
+import type {Placement, PopoverMargins} from '@sanity/ui'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4

package/src/core/primitives/popover/floating-ui/size.ts

@@ -1,6 +1,6 @@
 import {detectOverflow, type Elements, type Middleware} from '@floating-ui/react-dom'
 
-import type {PopoverMargins} from '../../../types'
+import type {PopoverMargins} from '../types'
 
 export interface SizeMiddlewareApplyOptions {
   availableWidth: number

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

@@ -25,10 +25,13 @@ import {
 } from 'react'
 
 import {Z_OFFSETS} from '../../constants'
-import {usePrefersReducedMotion, useResponsiveProp} from '../../hooks'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {origin} from '../../middleware/origin'
-import type {ComponentType, Placement, PopoverMargins, Props} from '../../types'
-import {Portal, useBoundaryElement} from '../../utils'
+import type {Placement} from '../../types/placement'
+import type {ComponentType, Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
+import {Portal} from '../../utils/portal'
 import {CardProvider, useCard} from '../card'
 import {type LayerOwnProps, useLayer} from '../layer'
 import {
@@ -39,7 +42,7 @@ import {
 } from './constants'
 import {size} from './floating-ui/size'
 import {PopoverLayer} from './popoverLayer'
-import type {PopoverUpdateCallback} from './types'
+import type {PopoverMargins, PopoverUpdateCallback} from './types'
 
 /** @public */
 export const DEFAULT_POPOVER_ELEMENT = 'div'

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

@@ -4,7 +4,7 @@ import {motion} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import type {Placement, PopoverMargins} from '../../types'
+import type {Placement} from '../../types/placement'
 import {Arrow} from '../arrow'
 import {Flex} from '../flex'
 import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
@@ -14,6 +14,7 @@ import {
   DEFAULT_POPOVER_ARROW_WIDTH,
   DEFAULT_POPOVER_MARGINS,
 } from './constants'
+import type {PopoverMargins} from './types'
 
 /** @internal */
 export const DEFAULT_POPOVER_LAYER_ELEMENT = 'div'

package/src/core/primitives/popover/types.ts

@@ -1,5 +1,10 @@
 import type {ContainerWidth} from '@sanity/ui/theme'
 
+/**
+ * @beta
+ */
+export type PopoverMargins = [number, number, number, number]
+
 /** @beta */
 export type PopoverUpdateCallback = () => void
 

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

@@ -1,8 +1,8 @@
 import {radio, radioInput, radioPresentation} from '@sanity/ui/css'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_RADIO_ELEMENT = 'input'

package/src/core/primitives/root/Root.tsx

@@ -0,0 +1,89 @@
+import {box, root, type RootStyleProps} from '@sanity/ui/css'
+import {useCallback, useImperativeHandle, useRef, useState} from 'react'
+
+import {ToastProvider} from '../../components/toast'
+import type {Props} from '../../types/props'
+import {BoundaryElementProvider} from '../../utils/boundaryElement'
+import {PortalProvider} from '../../utils/portal'
+import {Box, type BoxOwnProps} from '../box'
+import {CardProvider} from '../card'
+import {LayerProvider} from '../layer'
+
+/** @public */
+export const DEFAULT_ROOT_ELEMENT = 'html'
+
+/** @public */
+export interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
+
+/** @public */
+export type RootElementType = 'html' | 'body' | 'div'
+
+/** @public */
+export type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
+
+/**
+ * The `Root` component.
+ *
+ * @public
+ */
+export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(props: RootProps<E>) {
+  const {
+    as: as = DEFAULT_ROOT_ELEMENT,
+    children,
+    className,
+    height = 'fill',
+    ref: forwardedRef,
+    scheme = 'light',
+    tone = 'transparent',
+    ...rest
+  } = props as RootProps<typeof DEFAULT_ROOT_ELEMENT>
+
+  const ref = useRef<HTMLHtmlElement | null>(null)
+
+  useImperativeHandle<HTMLHtmlElement | null, HTMLHtmlElement | null>(
+    forwardedRef,
+    () => ref.current,
+  )
+
+  const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
+  const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
+
+  const handleRef = useCallback((el: HTMLHtmlElement | null) => {
+    setBoundaryElement(el)
+    ref.current = el
+  }, [])
+
+  let node = (
+    <LayerProvider>
+      <CardProvider scheme={scheme} tone={tone}>
+        <ToastProvider>
+          <BoundaryElementProvider element={boundaryElement}>
+            <PortalProvider element={portalElement}>{children}</PortalProvider>
+          </BoundaryElementProvider>
+          <div data-portal="" ref={setPortalElement} />
+        </ToastProvider>
+      </CardProvider>
+    </LayerProvider>
+  )
+
+  if (as === 'html') {
+    node = <body className={box({height, margin: 0})}>{node}</body>
+  }
+
+  return (
+    <Box
+      as={as}
+      data-ui="Root"
+      {...rest}
+      className={root({
+        className,
+        height,
+        scheme,
+        tone,
+      })}
+      ref={handleRef}
+    >
+      {node}
+    </Box>
+  )
+}

package/src/core/primitives/root/__workshop__/boundary.tsx

@@ -0,0 +1,5 @@
+import {Root} from '@sanity/ui'
+
+export default function BoundaryStory() {
+  return <Root>Hello!</Root>
+}

package/src/core/primitives/root/__workshop__/index.ts

@@ -0,0 +1,8 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'primitives/radio',
+  title: 'Radio',
+  stories: [{name: 'boundary', title: 'Boundary', component: lazy(() => import('./boundary'))}],
+})

package/src/core/primitives/root/index.ts

@@ -0,0 +1 @@
+export * from './Root'

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

@@ -9,8 +9,8 @@ import {
 import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Text} from '../text'
 

package/src/core/{components → primitives}/skeleton/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'components/skeleton',
+  name: 'primitives/skeleton',
   title: 'Skeleton',
   stories: [
     {name: 'skeleton', title: 'Skeleton', component: lazy(() => import('./skeleton'))},

package/src/core/{components → primitives}/skeleton/codeSkeleton.tsx

@@ -1,7 +1,7 @@
 import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/headingSkeleton.tsx

@@ -1,7 +1,7 @@
 import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontHeadingSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/labelSkeleton.tsx

@@ -1,7 +1,7 @@
 import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontLabelSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/skeleton.tsx

@@ -1,8 +1,7 @@
 import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
 import {useEffect, useState} from 'react'
 
-import {Box, type BoxOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @beta */
 export const DEFAULT_SKELETON_ELEMENT = 'div'
@@ -11,11 +10,10 @@ export const DEFAULT_SKELETON_ELEMENT = 'div'
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export type SkeletonOwnProps = BoxOwnProps &
-  SkeletonStyleProps & {
-    animated?: boolean
-    delay?: number
-  }
+export type SkeletonOwnProps = SkeletonStyleProps & {
+  animated?: boolean
+  delay?: number
+}
 
 /** @beta */
 export type SkeletonElementType = 'div' | 'span' | ComponentType
@@ -34,6 +32,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
   props: SkeletonProps<E>,
 ) {
   const {
+    as: As = DEFAULT_SKELETON_ELEMENT,
     animated = false,
     className,
     delay,
@@ -58,7 +57,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
   }, [delay])
 
   return (
-    <Box
+    <As
       data-ui="Skeleton"
       {...rest}
       className={skeleton({

package/src/core/{components → primitives}/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

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

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, spinner} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Text} from '../text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 

package/src/core/primitives/srOnly/srOnly.tsx

@@ -1,6 +1,6 @@
 import {srOnly} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_SR_ONLY_ELEMENT = 'span'

package/src/core/primitives/stack/stack.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, stack} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */

package/src/core/primitives/switch/switch.tsx

@@ -7,7 +7,7 @@ import {
 } from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 
 /** @public */
@@ -36,7 +36,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
 ) {
   const {
     as: Element = DEFAULT_SWITCH_ELEMENT,
-    checked,
     className,
     disabled,
     indeterminate,
@@ -63,8 +62,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   return (
     <Box
       className={_switch({className})}
-      data-checked={checked ? '' : undefined}
-      data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
       display="block"
       position="relative"
@@ -72,9 +69,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     >
       <Element
         {...rest}
-        checked={indeterminate !== true && checked}
         className={_switchElement()}
-        data-disabled={disabled ? '' : undefined}
         data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"

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

@@ -1,5 +1,5 @@
 import {Flex, Text} from '@sanity/ui'
-import {varNames, vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui/css'
 import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
@@ -7,7 +7,7 @@ import {styled} from 'styled-components'
 import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
 const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${varNames.color.fg}: ${({$color}) => vars.color.avatar[$color].bg};
+  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
 `
 
 export default function ColoredTextStory() {

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

@@ -1,48 +1,23 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {CropIcon} from '@sanity/icons'
+import {Box, Stack, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
 
 export default function OpticalAlignment() {
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={1}>
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={4}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={3}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={2}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={1}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={0}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} tone="neutral">
-            <Text>
-              <AddCircleIcon />
+    <Stack gap={4} padding={[4, 5, 6]}>
+      {FONT_TEXT_SIZE.map((size) => (
+        <Box display="flex" gap={2} key={size}>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Text size={size}>
+              <CropIcon />
             </Text>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
+          </div>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Text size={size}>Hamburgefonstiv M</Text>
+          </div>
+        </Box>
+      ))}
+    </Stack>
   )
 }

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

@@ -1,6 +1,6 @@
 import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TEXT_ELEMENT = 'div'
@@ -39,6 +39,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     children,
     className,
     flex,
+    maxWidth = 'fill',
     muted,
     size = 2,
     textOverflow: textOverflowProp,
@@ -55,6 +56,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
         accent,
         align,
         flex,
+        maxWidth,
         muted,
         size,
         weight,

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

@@ -26,10 +26,10 @@ export default function PlainStory() {
 
   return (
     <Card
-      align="center"
+      alignItems="center"
       display="flex"
       height="fill"
-      justify="center"
+      justifyContent="center"
       padding={[4, 5, 6]}
       sizing="border"
       tone={tone}

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

@@ -8,8 +8,8 @@ import {
 import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'

package/src/core/primitives/textInput/textInput.tsx

@@ -23,9 +23,10 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity, useResponsiveProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Button, type ButtonProps} from '../button'
 import {Text} from '../text'

package/src/core/primitives/tooltip/constants.ts

@@ -1,4 +1,4 @@
-import type {Placement} from '../../types'
+import type {Placement} from '../../types/placement'
 
 export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
 export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6

package/src/core/primitives/tooltip/tooltip.tsx

@@ -31,12 +31,14 @@ import {
 import {useEffectEvent} from 'use-effect-event'
 
 import {Z_OFFSETS} from '../../constants'
-import {usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
-import type {ComponentType, Placement, Props} from '../../types'
-import {Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {Placement} from '../../types/placement'
+import type {ComponentType, Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
+import {Portal, usePortal} from '../../utils/portal'
 import {CardProvider, useCard} from '../card'
 import type {LayerOwnProps} from '../layer'
 import type {Delay} from '../types'

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -2,7 +2,7 @@ import {motion, type MotionStyle} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import type {Placement} from '../../types'
+import type {Placement} from '../../types/placement'
 import {Arrow} from '../arrow'
 import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
 import {

package/src/core/primitives/types.ts

@@ -1,8 +1,14 @@
 import type {
   AlignItems,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
   Flex,
   FlexDirection,
   FlexWrap,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
@@ -11,17 +17,9 @@ import type {
   GridItemRowStart,
   JustifyContent,
 } from '@sanity/ui/css'
+import type {Radius} from '@sanity/ui/theme'
 
-import type {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  Radius,
-} from '../types'
+import type {BoxDisplay} from './box/types'
 
 /**
  * @public

package/src/core/types/radius.ts

@@ -1,7 +1,7 @@
 export {
   /**
    * @public
-   * @deprecated
+   * @deprecated Use `Radius` from `@sanity/ui/theme` instead.
    */
   type Radius,
 } from '@sanity/ui/theme'