@sanity/ui 2.10.17 → 2.10.18

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

@@ -9,6 +9,7 @@ import {
   ResponsiveTextAlignStyleProps,
 } from '../../styles/internal'
 import {TextAlign} from '../../types'
+import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {headingBaseStyle} from './styles'
 import {HeadingStyleProps} from './types'
 
@@ -30,18 +31,10 @@ export interface HeadingProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.div<
+const StyledHeading = styled.div<
   HeadingStyleProps & ResponsiveTextAlignStyleProps & ResponsiveFontStyleProps
 >(headingBaseStyle, responsiveTextAlignStyle, responsiveHeadingFont)
 
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
 /**
  * Typographic headings.
  *
@@ -69,7 +62,7 @@ export const Heading = forwardRef(function Heading(
   }
 
   return (
-    <Root
+    <StyledHeading
       data-ui="Heading"
       {...restProps}
       $accent={accent}
@@ -80,7 +73,7 @@ export const Heading = forwardRef(function Heading(
       ref={ref}
     >
       <span>{children}</span>
-    </Root>
+    </StyledHeading>
   )
 })
 Heading.displayName = 'ForwardRef(Heading)'

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

@@ -13,7 +13,7 @@ export interface InlineProps extends Omit<BoxProps, 'display'> {
   space?: number | number[]
 }
 
-const Root = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
+const StyledInline = styled(Box)<ResponsiveInlineSpaceStyleProps>(inlineBaseStyle, inlineSpaceStyle)
 
 /**
  * The `Inline` component is a layout utility for aligning and spacing items horizontally.
@@ -32,7 +32,7 @@ export const Inline = forwardRef(function Inline(
   )
 
   return (
-    <Root
+    <StyledInline
       data-ui="Inline"
       {...restProps}
       $space={useArrayProp(space)}
@@ -40,7 +40,7 @@ export const Inline = forwardRef(function Inline(
       ref={ref as any}
     >
       {children}
-    </Root>
+    </StyledInline>
   )
 })
 Inline.displayName = 'ForwardRef(Inline)'

package/src/core/primitives/kbd/kbd.tsx

@@ -34,7 +34,7 @@ function kbdStyle() {
   `
 }
 
-const Root = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
+const StyledKBD = styled.kbd<ResponsiveRadiusStyleProps>(responsiveRadiusStyle, kbdStyle)
 
 /**
  * Used to define some text as keyboard input.
@@ -48,13 +48,13 @@ export const KBD = forwardRef(function KBD(
   const {children, fontSize = 0, padding = 1, radius = 2, ...restProps} = props
 
   return (
-    <Root data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
+    <StyledKBD data-ui="KBD" {...restProps} $radius={useArrayProp(radius)} ref={ref}>
       <Box as="span" padding={padding}>
         <Text as="span" size={fontSize} weight="semibold">
           {children}
         </Text>
       </Box>
-    </Root>
+    </StyledKBD>
   )
 })
 KBD.displayName = 'ForwardRef(KBD)'

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

@@ -4,6 +4,7 @@ import {styled} from 'styled-components'
 import {useArrayProp} from '../../hooks'
 import {responsiveLabelFont, responsiveTextAlignStyle} from '../../styles/internal'
 import {TextAlign} from '../../types'
+import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {labelBaseStyle} from './styles'
 
 /**
@@ -24,21 +25,13 @@ export interface LabelProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.div<{
+const StyledLabel = styled.div<{
   $accent?: boolean
   $align: TextAlign[]
   $muted: boolean
   $size: number[]
 }>(responsiveLabelFont, responsiveTextAlignStyle, labelBaseStyle)
 
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
 /**
  * Typographic labels.
  *
@@ -68,7 +61,7 @@ export const Label = forwardRef(function Label(
   }
 
   return (
-    <Root
+    <StyledLabel
       data-ui="Label"
       {...restProps}
       $accent={accent}
@@ -79,7 +72,7 @@ export const Label = forwardRef(function Label(
       ref={ref}
     >
       {children}
-    </Root>
+    </StyledLabel>
   )
 })
 Label.displayName = 'ForwardRef(Label)'

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

@@ -10,7 +10,7 @@ export interface RadioProps {
   customValidity?: string
 }
 
-const Root = styled.div(radioBaseStyle)
+const StyledRadio = styled.div(radioBaseStyle)
 const Input = styled.input(inputElementStyle)
 
 /**
@@ -33,7 +33,7 @@ export const Radio = forwardRef(function Radio(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root className={className} data-ui="Radio" style={style}>
+    <StyledRadio className={className} data-ui="Radio" style={style}>
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-error={customValidity ? '' : undefined}
@@ -44,7 +44,7 @@ export const Radio = forwardRef(function Radio(
         type="radio"
       />
       <span />
-    </Root>
+    </StyledRadio>
   )
 })
 Radio.displayName = 'ForwardRef(Radio)'

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

@@ -18,7 +18,7 @@ export interface SelectProps {
   customValidity?: string
 }
 
-const Root = styled.div(selectStyle.root)
+const StyledSelect = styled.div(selectStyle.root)
 
 const Input = styled.select<{
   $fontSize: number[]
@@ -60,7 +60,7 @@ export const Select = forwardRef(function Select(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root data-ui="Select">
+    <StyledSelect data-ui="Select">
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-ui="Select"
@@ -80,7 +80,7 @@ export const Select = forwardRef(function Select(
           <ChevronDownIcon />
         </Text>
       </IconBox>
-    </Root>
+    </StyledSelect>
   )
 })
 Select.displayName = 'ForwardRef(Select)'

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

@@ -21,7 +21,7 @@ const rotate = keyframes`
   }
 `
 
-const Root = styled(Text)`
+const StyledSpinner = styled(Text)`
   & > span > svg {
     animation: ${rotate} 500ms linear infinite;
   }
@@ -37,9 +37,9 @@ export const Spinner = forwardRef(function Spinner(
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   return (
-    <Root data-ui="Spinner" {...props} ref={ref}>
+    <StyledSpinner data-ui="Spinner" {...props} ref={ref}>
       <SpinnerIcon />
-    </Root>
+    </StyledSpinner>
   )
 })
 Spinner.displayName = 'ForwardRef(Spinner)'

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

@@ -12,7 +12,10 @@ export interface StackProps extends BoxProps {
   space?: number | number[]
 }
 
-const Root = styled(Box)<ResponsiveStackSpaceStyleProps>(stackBaseStyle, responsiveStackSpaceStyle)
+const StyledStack = styled(Box)<ResponsiveStackSpaceStyleProps>(
+  stackBaseStyle,
+  responsiveStackSpaceStyle,
+)
 
 /**
  * The `Stack` component is used to place elements on top of each other.
@@ -26,7 +29,7 @@ export const Stack = forwardRef(function Stack(
   const {as, space, ...restProps} = props
 
   return (
-    <Root
+    <StyledStack
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Stack"
       {...restProps}

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

@@ -15,7 +15,7 @@ export interface SwitchProps {
   indeterminate?: boolean
 }
 
-const Root = styled.span(switchBaseStyles)
+const StyledSwitch = styled.span(switchBaseStyles)
 const Input = styled.input(switchInputStyles)
 const Representation = styled.span(switchRepresentationStyles)
 const Track = styled.span(switchTrackStyles)
@@ -48,7 +48,7 @@ export const Switch = forwardRef(function Switch(
   }, [indeterminate])
 
   return (
-    <Root className={className} data-ui="Switch" style={style}>
+    <StyledSwitch className={className} data-ui="Switch" style={style}>
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         {...restProps}
@@ -61,7 +61,7 @@ export const Switch = forwardRef(function Switch(
         <Track />
         <Thumb $checked={checked} $indeterminate={indeterminate} />
       </Representation>
-    </Root>
+    </StyledSwitch>
   )
 })
 Switch.displayName = 'ForwardRef(Switch)'

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

@@ -8,6 +8,7 @@ import {
   responsiveTextFont,
 } from '../../styles/internal'
 import {TextAlign} from '../../types'
+import {SpanWithTextOverflow} from '../../utils/spanWithTextOverflow'
 import {textBaseStyle} from './styles'
 
 /**
@@ -29,20 +30,12 @@ export interface TextProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.div<ResponsiveFontStyleProps>(
+const StyledText = styled.div<ResponsiveFontStyleProps>(
   responsiveTextFont,
   responsiveTextAlignStyle,
   textBaseStyle,
 )
 
-const SpanWithTextOverflow = styled.span`
-  display: block;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  overflow: clip;
-`
-
 /**
  * The `Text` component is an agile, themed typographic element.
  *
@@ -70,7 +63,7 @@ export const Text = forwardRef(function Text(
   }
 
   return (
-    <Root
+    <StyledText
       data-ui="Text"
       {...restProps}
       $accent={accent}
@@ -81,7 +74,7 @@ export const Text = forwardRef(function Text(
       $weight={weight}
     >
       <span>{children}</span>
-    </Root>
+    </StyledText>
   )
 })
 Text.displayName = 'ForwardRef(Text)'

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

@@ -32,7 +32,7 @@ export interface TextAreaProps extends ResponsiveRadiusProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = styled.span(textInputRootStyle)
+const StyledTextArea = styled.span(textInputRootStyle)
 
 const InputRoot = styled.span`
   flex: 1;
@@ -86,7 +86,7 @@ export const TextArea = forwardRef(function TextArea(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root data-ui="TextArea">
+    <StyledTextArea data-ui="TextArea">
       <InputRoot>
         <Input
           data-as="textarea"
@@ -112,7 +112,7 @@ export const TextArea = forwardRef(function TextArea(
           data-tone={rootTheme.tone}
         />
       </InputRoot>
-    </Root>
+    </StyledTextArea>
   )
 })
 TextArea.displayName = 'ForwardRef(TextArea)'

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

@@ -80,7 +80,7 @@ export interface TextInputProps {
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
 
-const Root = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
+const StyledTextInput = styled(Card).attrs({forwardedAs: 'span'})(textInputRootStyle)
 
 const InputRoot = styled.span`
   flex: 1;
@@ -354,7 +354,7 @@ export const TextInput = forwardRef(function TextInput(
   )
 
   return (
-    <Root data-ui="TextInput" tone={rootTheme.tone}>
+    <StyledTextInput data-ui="TextInput" tone={rootTheme.tone}>
       {prefixNode}
 
       <InputRoot>
@@ -382,7 +382,7 @@ export const TextInput = forwardRef(function TextInput(
       </InputRoot>
 
       {suffixNode}
-    </Root>
+    </StyledTextInput>
   )
 })
 TextInput.displayName = 'ForwardRef(TextInput)'

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

@@ -78,7 +78,7 @@ export interface TooltipProps extends Omit<LayerProps, 'as'> {
   animate?: boolean
 }
 
-const Root = styled(Layer)`
+const StyledTooltip = styled(Layer)`
   pointer-events: none;
 `
 
@@ -362,7 +362,7 @@ export const Tooltip = forwardRef(function Tooltip(
   if (disabled) return child
 
   const tooltip = (
-    <Root
+    <StyledTooltip
       data-ui="Tooltip"
       {...restProps}
       ref={setFloating}
@@ -390,7 +390,7 @@ export const Tooltip = forwardRef(function Tooltip(
       >
         {content}
       </TooltipCard>
-    </Root>
+    </StyledTooltip>
   )
 
   const children =

package/src/core/utils/arrow/arrow.tsx

@@ -3,7 +3,7 @@ import {styled, css} from 'styled-components'
 import {useTheme_v2} from '../../theme'
 import {Point, compileCommands, getRoundedCommands} from './cmds'
 
-const Root = styled.div<{$w: number}>(
+const StyledArrow = styled.div<{$w: number}>(
   ({$w: w}) => css`
     position: absolute;
     width: ${w}px;
@@ -108,7 +108,7 @@ export const Arrow = forwardRef(function Arrow(
   const fillPath = `${path} M ${w} -1 M 0 -1 Z`
 
   return (
-    <Root {...restProps} $w={w} ref={ref}>
+    <StyledArrow {...restProps} $w={w} ref={ref}>
       <svg width={w} height={w} viewBox={`0 0 ${w} ${w}`}>
         <mask id="stroke-mask">
           <rect x={0} y={strokeWidth} width={w} height={w} fill="white" />
@@ -116,7 +116,7 @@ export const Arrow = forwardRef(function Arrow(
         <StrokePath d={strokePath} mask="url(#stroke-mask)" strokeWidth={strokeWidth * 2} />
         <ShapePath d={fillPath} />
       </svg>
-    </Root>
+    </StyledArrow>
   )
 })
 Arrow.displayName = 'ForwardRef(Arrow)'

package/src/core/utils/layer/layer.tsx

@@ -20,7 +20,7 @@ interface LayerChildrenProps {
   onActivate?: LayerProps['onActivate']
 }
 
-const Root = styled.div({position: 'relative'})
+const StyledLayer = styled.div({position: 'relative'})
 
 const LayerChildren = forwardRef(function LayerChildren(
   props: LayerChildrenProps & Omit<React.HTMLProps<HTMLDivElement>, 'as'>,
@@ -65,9 +65,15 @@ const LayerChildren = forwardRef(function LayerChildren(
   )
 
   return (
-    <Root {...restProps} data-ui="Layer" onFocus={handleFocus} ref={ref} style={{...style, zIndex}}>
+    <StyledLayer
+      {...restProps}
+      data-ui="Layer"
+      onFocus={handleFocus}
+      ref={ref}
+      style={{...style, zIndex}}
+    >
       {children}
-    </Root>
+    </StyledLayer>
   )
 })
 

package/src/core/utils/spanWithTextOverflow.tsx

@@ -0,0 +1,10 @@
+import {styled} from 'styled-components'
+
+/** @internal */
+export const SpanWithTextOverflow = styled.span`
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  overflow: clip;
+`

package/src/core/utils/srOnly/srOnly.tsx

@@ -9,7 +9,7 @@ export interface SrOnlyProps {
   children?: React.ReactNode
 }
 
-const Root = styled.div`
+const StyledSrOnly = styled.div`
   display: block;
   width: 0;
   height: 0;
@@ -28,9 +28,9 @@ export const SrOnly = forwardRef(function SrOnly(
   const {as, children} = props
 
   return (
-    <Root aria-hidden as={as} data-ui="SrOnly" ref={ref}>
+    <StyledSrOnly aria-hidden as={as} data-ui="SrOnly" ref={ref}>
       {children}
-    </Root>
+    </StyledSrOnly>
   )
 })
 SrOnly.displayName = 'ForwardRef(SrOnly)'

package/src/core/utils/virtualList/virtualList.tsx

@@ -29,7 +29,7 @@ export interface VirtualListProps<Item = any> {
   renderItem?: (item: Item) => React.ReactNode
 }
 
-const Root = styled.div`
+const StyledVirtualList = styled.div`
   position: relative;
 `
 
@@ -159,11 +159,11 @@ export const VirtualList = forwardRef(function VirtualList(
   const wrapperStyle = useMemo(() => ({height}), [height])
 
   return (
-    <Root as={as} data-ui="VirtualList" {...restProps} ref={ref}>
+    <StyledVirtualList as={as} data-ui="VirtualList" {...restProps} ref={ref}>
       <div ref={wrapperRef} style={wrapperStyle}>
         {children}
       </div>
-    </Root>
+    </StyledVirtualList>
   )
 })
 VirtualList.displayName = 'ForwardRef(VirtualList)'