@sanity/ui 2.10.17 → 2.10.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.10.17",
+  "version": "2.10.18",
   "keywords": [
     "sanity",
     "ui",
@@ -122,7 +122,7 @@
     "@commitlint/cli": "^19.6.1",
     "@commitlint/config-conventional": "^19.6.0",
     "@juggle/resize-observer": "^3.4.0",
-    "@sanity/pkg-utils": "^6.12.3",
+    "@sanity/pkg-utils": "^6.13.0",
     "@sanity/prettier-config": "^1.0.3",
     "@sanity/semantic-release-preset": "^5.0.0",
     "@sanity/ui-workshop": "^2.0.20",
@@ -155,6 +155,7 @@
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-compiler": "19.0.0-beta-55955c9-20241229",
+    "babel-plugin-styled-components": "^2.1.4",
     "commitizen": "^4.3.1",
     "cypress": "^13.17.0",
     "cypress-real-events": "^1.13.0",

package/src/core/components/autocomplete/autocomplete.styles.tsx

@@ -5,7 +5,7 @@ import {Box} from '../../primitives'
 /**
  * @internal
  */
-export const Root = styled.div`
+export const StyledAutocomplete = styled.div`
   line-height: 0;
 `
 

package/src/core/components/autocomplete/autocomplete.tsx

@@ -33,7 +33,7 @@ import {
   TextInput,
 } from '../../primitives'
 import {Radius} from '../../types'
-import {AnimatedSpinnerIcon, ListBox, Root} from './autocomplete.styles'
+import {AnimatedSpinnerIcon, ListBox, StyledAutocomplete} from './autocomplete.styles'
 import {AutocompleteOption} from './autocompleteOption'
 import {autocompleteReducer} from './autocompleteReducer'
 import {
@@ -679,7 +679,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
   ])
 
   return (
-    <Root
+    <StyledAutocomplete
       data-ui="Autocomplete"
       onBlur={handleRootBlur}
       onFocus={handleRootFocus}
@@ -688,7 +688,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     >
       {input}
       {results}
-    </Root>
+    </StyledAutocomplete>
   )
 })
 

package/src/core/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,7 +1,7 @@
 import {styled} from 'styled-components'
 import {Button} from '../../primitives'
 
-export const Root = styled.ol`
+export const StyledBreadcrumbs = styled.ol`
   margin: 0;
   padding: 0;
   display: flex;

package/src/core/components/breadcrumbs/breadcrumbs.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react'
 import {useArrayProp, useClickOutsideEvent} from '../../hooks'
 import {Box, Popover, Stack, Text} from '../../primitives'
-import {ExpandButton, Root} from './breadcrumbs.styles'
+import {ExpandButton, StyledBreadcrumbs} from './breadcrumbs.styles'
 
 /**
  * @beta
@@ -81,7 +81,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
   }, [collapse, expand, maxLength, open, rawItems, space])
 
   return (
-    <Root data-ui="Breadcrumbs" {...restProps} ref={ref}>
+    <StyledBreadcrumbs data-ui="Breadcrumbs" {...restProps} ref={ref}>
       {items.map((item, itemIndex) => (
         <Fragment key={itemIndex}>
           {itemIndex > 0 && (
@@ -92,7 +92,7 @@ export const Breadcrumbs = forwardRef(function Breadcrumbs(
           <Box as="li">{item}</Box>
         </Fragment>
       ))}
-    </Root>
+    </StyledBreadcrumbs>
   )
 })
 Breadcrumbs.displayName = 'ForwardRef(Breadcrumbs)'

package/src/core/components/dialog/dialog.tsx

@@ -99,7 +99,7 @@ function isTargetWithinScope(
   )
 }
 
-const Root = styled(Layer)<
+const StyledDialog = styled(Layer)<
   ResponsiveDialogPositionStyleProps & ResponsivePaddingStyleProps & AnimationDialogStyleProps
 >(responsivePaddingStyle, dialogStyle, responsiveDialogPositionStyle, animationDialogStyle)
 
@@ -388,7 +388,7 @@ export const Dialog = forwardRef(function Dialog(
 
   return (
     <Portal __unstable_name={portalProp}>
-      <Root
+      <StyledDialog
         {...restProps}
         $animate={animate}
         $padding={padding}
@@ -424,7 +424,7 @@ export const Dialog = forwardRef(function Dialog(
           {children}
         </DialogCard>
         <div ref={postDivRef} tabIndex={0} />
-      </Root>
+      </StyledDialog>
     </Portal>
   )
 })

package/src/core/components/hotkeys/hotkeys.tsx

@@ -15,7 +15,7 @@ export interface HotkeysProps {
   keys?: string[]
 }
 
-const Root = styled.kbd`
+const StyledHotkeys = styled.kbd`
   font: inherit;
   padding: 1px;
 
@@ -47,7 +47,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
   }
 
   return (
-    <Root data-ui="Hotkeys" {...restProps} ref={ref}>
+    <StyledHotkeys data-ui="Hotkeys" {...restProps} ref={ref}>
       <Inline as="span" space={space}>
         {keys.map((key, i) => (
           <Key fontSize={fontSize} key={i} padding={padding} radius={radius}>
@@ -55,7 +55,7 @@ export const Hotkeys = forwardRef(function Hotkeys(
           </Key>
         ))}
       </Inline>
-    </Root>
+    </StyledHotkeys>
   )
 })
 Hotkeys.displayName = 'ForwardRef(Hotkeys)'

package/src/core/components/menu/menu.tsx

@@ -31,7 +31,7 @@ export interface MenuProps extends ResponsivePaddingProps {
   'onBlurCapture'?: (event: FocusEvent) => void
 }
 
-const Root = styled(Box)`
+const StyledMenu = styled(Box)`
   outline: none;
   overflow: auto;
 `
@@ -159,7 +159,7 @@ export const Menu = forwardRef(function Menu(
 
   return (
     <MenuContext.Provider value={value}>
-      <Root
+      <StyledMenu
         data-ui="Menu"
         {...restProps}
         onKeyDown={handleKeyDown}
@@ -169,7 +169,7 @@ export const Menu = forwardRef(function Menu(
         tabIndex={-1}
       >
         <Stack space={space}>{children}</Stack>
-      </Root>
+      </StyledMenu>
     </MenuContext.Provider>
   )
 })

package/src/core/components/skeleton/skeleton.tsx

@@ -6,10 +6,9 @@ import {BoxProps, ResponsiveRadiusProps} from '../../primitives'
 import {responsiveRadiusStyle, ResponsiveRadiusStyleProps} from '../../styles/internal'
 import {skeletonStyle} from './styles'
 
-const Root = styled(Box)<{$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps>(
-  responsiveRadiusStyle,
-  skeletonStyle,
-)
+const StyledSkeleton = styled(Box)<
+  {$animated: boolean; $visible: boolean} & ResponsiveRadiusStyleProps
+>(responsiveRadiusStyle, skeletonStyle)
 
 /**
  * This API might change. DO NOT USE IN PRODUCTION.
@@ -46,7 +45,7 @@ export const Skeleton = forwardRef(function Skeleton(
   }, [delay])
 
   return (
-    <Root
+    <StyledSkeleton
       {...restProps}
       $animated={animated}
       $radius={useArrayProp(radius)}

package/src/core/components/skeleton/textSkeleton.tsx

@@ -5,7 +5,7 @@ import {useArrayProp} from '../../hooks'
 import {ThemeProps, _responsive} from '../../styles'
 import {Skeleton, SkeletonProps} from './skeleton'
 
-const Root = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
+const StyledSkeleton = styled(Skeleton)<{$size: number[]; $style: ThemeFontKey}>((
   props: {
     $size: number[]
     $style: ThemeFontKey
@@ -69,7 +69,7 @@ export const TextSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="text" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="text" />
 })
 TextSkeleton.displayName = 'ForwardRef(TextSkeleton)'
 
@@ -85,7 +85,7 @@ export const LabelSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="label" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="label" />
 })
 LabelSkeleton.displayName = 'ForwardRef(LabelSkeleton)'
 
@@ -101,7 +101,7 @@ export const HeadingSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="heading" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="heading" />
 })
 HeadingSkeleton.displayName = 'ForwardRef(HeadingSkeleton)'
 
@@ -117,6 +117,6 @@ export const CodeSkeleton = forwardRef(function TextSkeleton(
   const {size = 2, ...restProps} = props
   const $size = useArrayProp(size)
 
-  return <Root {...restProps} $size={$size} ref={ref} $style="code" />
+  return <StyledSkeleton {...restProps} $size={$size} ref={ref} $style="code" />
 })
 CodeSkeleton.displayName = 'ForwardRef(CodeSkeleton)'

package/src/core/components/toast/toast.tsx

@@ -40,7 +40,7 @@ const ROLES = {
   info: 'alert',
 } as const
 
-const Root = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
+const StyledToast = styled(Card)<{$duration?: number; tone: ThemeColorStateToneKey} & ThemeProps>(
   rootStyles,
 )
 
@@ -60,7 +60,7 @@ export function Toast(
   const role = status ? ROLES[status] : 'status'
 
   return (
-    <Root
+    <StyledToast
       data-ui="Toast"
       role={role}
       {...restProps}
@@ -100,7 +100,7 @@ export function Toast(
           </Box>
         )}
       </Flex>
-    </Root>
+    </StyledToast>
   )
 }
 

package/src/core/components/toast/toastProvider.tsx

@@ -28,7 +28,7 @@ export interface ToastProviderProps {
   zOffset?: number | number[]
 }
 
-const Root = styled(Layer)`
+const StyledToastProvider = styled(Layer)`
   position: fixed;
   top: 0;
   left: 0;
@@ -153,7 +153,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement<any
     <ToastContext.Provider value={value}>
       {children}
       {mounted && (
-        <Root data-ui="ToastProvider" zOffset={zOffset}>
+        <StyledToastProvider data-ui="ToastProvider" zOffset={zOffset}>
           <ToastContainer>
             <Box padding={padding} paddingX={paddingX} paddingY={paddingY}>
               <AnimatePresence initial={false}>
@@ -184,7 +184,7 @@ export function ToastProvider(props: ToastProviderProps): React.ReactElement<any
               </AnimatePresence>
             </Box>
           </ToastContainer>
-        </Root>
+        </StyledToastProvider>
       )}
     </ToastContext.Provider>
   )

package/src/core/components/tree/treeItem.tsx

@@ -30,7 +30,7 @@ export interface TreeItemProps {
   weight?: ThemeFontWeightKey
 }
 
-const Root = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
+const StyledTreeItem = memo(styled.li(treeItemRootStyle, treeItemRootColorStyle))
 
 const TreeItemBox = styled(Box).attrs({forwardedAs: 'a'})<TreeItemBoxStyleProps>(treeItemBoxStyle)
 
@@ -147,7 +147,7 @@ export const TreeItem = memo(function TreeItem(
 
   if (href) {
     return (
-      <Root
+      <StyledTreeItem
         data-selected={selected ? '' : undefined}
         data-tree-id={id}
         data-tree-key={itemKey}
@@ -173,12 +173,12 @@ export const TreeItem = memo(function TreeItem(
         <TreeContext.Provider value={contextValue}>
           {children && <TreeGroup hidden={!expanded}>{children}</TreeGroup>}
         </TreeContext.Provider>
-      </Root>
+      </StyledTreeItem>
     )
   }
 
   return (
-    <Root
+    <StyledTreeItem
       data-selected={selected ? '' : undefined}
       data-ui="TreeItem"
       data-tree-id={id}
@@ -198,7 +198,7 @@ export const TreeItem = memo(function TreeItem(
       <TreeContext.Provider value={contextValue}>
         {children && <TreeGroup expanded={expanded}>{children}</TreeGroup>}
       </TreeContext.Provider>
-    </Root>
+    </StyledTreeItem>
   )
 })
 TreeItem.displayName = 'Memo(TreeItem)'

package/src/core/primitives/avatar/avatar.tsx

@@ -30,7 +30,7 @@ export interface AvatarProps {
   title?: string
 }
 
-const Root = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
+const StyledAvatar = styled.div<{$color: ThemeColorAvatarColorKey; $size: AvatarSize[]}>(
   responsiveAvatarSizeStyle,
   avatarStyle.root,
 )
@@ -47,7 +47,7 @@ const InitialsLabel = styled(Label)({
   color: 'inherit',
 })
 
-const Image = styled.svg(avatarStyle.image)
+const AvatarImage = styled.svg(avatarStyle.image)
 
 /**
  * Avatars are used to represent people and other agents (e.g. bots).
@@ -124,7 +124,7 @@ export const Avatar = forwardRef(function Avatar(
   )
 
   return (
-    <Root
+    <StyledAvatar
       as={as}
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Avatar"
@@ -147,7 +147,7 @@ export const Avatar = forwardRef(function Avatar(
       </Arrow>
 
       {!imageFailed && src && (
-        <Image viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
+        <AvatarImage viewBox={`0 0 ${_sizeRem} ${_sizeRem}`} fill="none">
           <defs>
             <pattern id={imageId} patternContentUnits="objectBoundingBox" width="1" height="1">
               <image
@@ -179,7 +179,7 @@ export const Avatar = forwardRef(function Avatar(
             ry={_radius}
             vectorEffect="non-scaling-stroke"
           />
-        </Image>
+        </AvatarImage>
       )}
 
       {(imageFailed || !src) && initials && (
@@ -191,7 +191,7 @@ export const Avatar = forwardRef(function Avatar(
           </Initials>
         </>
       )}
-    </Root>
+    </StyledAvatar>
   )
 })
 Avatar.displayName = 'ForwardRef(Avatar)'

package/src/core/primitives/avatar/avatarCounter.tsx

@@ -45,7 +45,7 @@ function _avatarCounterBaseStyle(props: ThemeProps) {
   `
 }
 
-const Root = styled.div<{$size: AvatarSize[]}>(
+const StyledAvatarCounter = styled.div<{$size: AvatarSize[]}>(
   _responsiveAvatarCounterSizeStyle,
   _avatarCounterBaseStyle,
 )
@@ -83,11 +83,11 @@ export const AvatarCounter = forwardRef(function AvatarCounter(
   )
 
   return (
-    <Root $size={size} data-ui="AvatarCounter" ref={ref}>
+    <StyledAvatarCounter $size={size} data-ui="AvatarCounter" ref={ref}>
       <Label as="span" size={fontSize} weight="medium">
         {count}
       </Label>
-    </Root>
+    </StyledAvatarCounter>
   )
 })
 AvatarCounter.displayName = 'ForwardRef(AvatarCounter)'

package/src/core/primitives/avatar/avatarStack.tsx

@@ -39,7 +39,10 @@ function responsiveAvatarStackSizeStyle(props: {$size: AvatarSize[]} & ThemeProp
   })
 }
 
-const Root = styled.div<{$size: AvatarSize[]}>(responsiveAvatarStackSizeStyle, avatarStackStyle)
+const StyledAvatarStack = styled.div<{$size: AvatarSize[]}>(
+  responsiveAvatarStackSizeStyle,
+  avatarStackStyle,
+)
 
 /**
  * @public
@@ -75,7 +78,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
   const visibleChildren = extraCount > 1 ? children.slice(extraCount, len) : children
 
   return (
-    <Root data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
+    <StyledAvatarStack data-ui="AvatarStack" {...restProps} ref={ref} $size={size}>
       {len === 0 && (
         <div>
           <AvatarCounter count={len} size={size} />
@@ -91,7 +94,7 @@ export const AvatarStack = forwardRef(function AvatarStack(
       {visibleChildren.map((child, childIndex) => (
         <div key={String(childIndex)}>{cloneElement(child, {size})}</div>
       ))}
-    </Root>
+    </StyledAvatarStack>
   )
 })
 AvatarStack.displayName = 'ForwardRef(AvatarStack)'

package/src/core/primitives/badge/badge.tsx

@@ -20,7 +20,7 @@ export interface BadgeProps extends BoxProps, ResponsiveRadiusProps {
   tone?: BadgeTone
 }
 
-const Root = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
+const StyledBadge = styled(Box)<BadgeStyleProps & ResponsiveRadiusStyleProps>(
   responsiveRadiusStyle,
   badgeStyle,
 )
@@ -46,7 +46,7 @@ export const Badge = forwardRef(function Badge(
   } = props
 
   return (
-    <Root
+    <StyledBadge
       data-ui="Badge"
       {...restProps}
       $tone={tone}
@@ -55,7 +55,7 @@ export const Badge = forwardRef(function Badge(
       ref={ref}
     >
       <Text size={fontSize}>{children}</Text>
-    </Root>
+    </StyledBadge>
   )
 })
 Badge.displayName = 'ForwardRef(Badge)'

package/src/core/primitives/box/box.tsx

@@ -35,7 +35,7 @@ export interface BoxProps
   forwardedAs?: React.ElementType | keyof React.JSX.IntrinsicElements
 }
 
-const Root = styled.div<
+const StyledBox = styled.div<
   FlexItemStyleProps &
     ResponsiveBoxStyleProps &
     ResponsiveGridItemStyleProps &
@@ -91,7 +91,7 @@ export const Box = forwardRef(function Box(
   } = props
 
   return (
-    <Root
+    <StyledBox
       data-as={typeof asProp === 'string' ? asProp : undefined}
       data-ui="Box"
       {...restProps}
@@ -124,7 +124,7 @@ export const Box = forwardRef(function Box(
       ref={ref}
     >
       {props.children}
-    </Root>
+    </StyledBox>
   )
 })
 Box.displayName = 'ForwardRef(Box)'

package/src/core/primitives/button/button.tsx

@@ -37,7 +37,7 @@ export interface ButtonProps extends ResponsivePaddingProps, ResponsiveRadiusPro
   width?: ButtonWidth
 }
 
-const Root = styled.button<
+const StyledButton = styled.button<
   {$mode: ButtonMode; $tone: ButtonTone; $width?: ButtonWidth} & ResponsiveRadiusStyleProps &
     ThemeProps
 >(responsiveRadiusStyle, buttonBaseStyles, buttonColorStyles)
@@ -119,7 +119,7 @@ export const Button = forwardRef(function Button(
   )
 
   return (
-    <Root
+    <StyledButton
       data-ui="Button"
       {...restProps}
       $mode={mode}
@@ -177,7 +177,7 @@ export const Button = forwardRef(function Button(
           {children}
         </Box>
       )}
-    </Root>
+    </StyledButton>
   )
 })
 Button.displayName = 'ForwardRef(Button)'

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

@@ -42,7 +42,7 @@ export interface CardProps
   tone?: CardTone
 }
 
-const Root = styled(Box)<
+const StyledCard = styled(Box)<
   CardStyleProps &
     ResponsiveRadiusStyleProps &
     ResponsiveBorderStyleProps &
@@ -85,7 +85,7 @@ export const Card = forwardRef(function Card(
   // todo: Consider adding the wrapper approach for nested cards in which the tones are not changing, avoid unnecessary ThemeColorProvider
   return (
     <ThemeColorProvider scheme={scheme} tone={tone}>
-      <Root
+      <StyledCard
         data-as={typeof as === 'string' ? as : undefined}
         data-scheme={rootTheme.scheme}
         data-ui="Card"

package/src/core/primitives/checkbox/checkbox.tsx

@@ -12,7 +12,7 @@ export interface CheckboxProps {
   customValidity?: string
 }
 
-const Root = styled.div(checkboxBaseStyles)
+const StyledCheckbox = styled.div(checkboxBaseStyles)
 const Input = styled.input(inputElementStyles)
 
 /**
@@ -51,7 +51,7 @@ export const Checkbox = forwardRef(function Checkbox(
   useCustomValidity(ref, customValidity)
 
   return (
-    <Root className={className} data-ui="Checkbox" style={style}>
+    <StyledCheckbox className={className} data-ui="Checkbox" style={style}>
       <Input
         data-read-only={!disabled && readOnly ? '' : undefined}
         data-error={customValidity ? '' : undefined}
@@ -66,7 +66,7 @@ export const Checkbox = forwardRef(function Checkbox(
         <CheckmarkIcon />
         <RemoveIcon />
       </span>
-    </Root>
+    </StyledCheckbox>
   )
 })
 Checkbox.displayName = 'ForwardRef(Checkbox)'

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

@@ -16,7 +16,7 @@ export interface CodeProps {
   weight?: string
 }
 
-const Root = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
+const StyledCode = styled.pre<ResponsiveFontStyleProps>(codeBaseStyle, responsiveCodeFontStyle)
 
 /**
  * @public
@@ -30,10 +30,10 @@ export const Code = forwardRef(function Code(
   const registered = language ? Refractor.hasLanguage(language as any) : false
 
   return (
-    <Root data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
+    <StyledCode data-ui="Code" {...restProps} $size={useArrayProp(size)} $weight={weight} ref={ref}>
       {!(language && registered) && <code>{children}</code>}
       {language && registered && <Refractor inline language={language} value={String(children)} />}
-    </Root>
+    </StyledCode>
   )
 })
 Code.displayName = 'ForwardRef(Code)'

package/src/core/primitives/container/container.tsx

@@ -11,7 +11,7 @@ import {ResponsiveWidthStyleProps} from './types'
  */
 export interface ContainerProps extends BoxProps, ResponsiveWidthProps {}
 
-const Root = styled(Box)<ResponsiveWidthStyleProps>(
+const StyledContainer = styled(Box)<ResponsiveWidthStyleProps>(
   containerBaseStyle,
   responsiveContainerWidthStyle,
 )
@@ -28,7 +28,7 @@ export const Container = forwardRef(function Container(
   const {as, width = 2, ...restProps} = props
 
   return (
-    <Root
+    <StyledContainer
       data-ui="Container"
       {...restProps}
       $width={useArrayProp(width)}

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

@@ -20,7 +20,7 @@ export interface FlexProps
   gap?: number | number[]
 }
 
-const Root = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
+const StyledFlex = styled(Box)<FlexItemStyleProps & ResponsiveFlexStyleProps>(
   flexItemStyle,
   responsiveFlexStyle,
 )
@@ -37,7 +37,7 @@ export const Flex = forwardRef(function Flex(
   const {align, as, direction = 'row', gap, justify, wrap, ...restProps} = props
 
   return (
-    <Root
+    <StyledFlex
       data-ui="Flex"
       {...restProps}
       $align={useArrayProp(align)}

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

@@ -10,7 +10,7 @@ import {ResponsiveGridProps} from '../types'
  */
 export interface GridProps extends Omit<BoxProps, 'display'>, ResponsiveGridProps {}
 
-const Root = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
+const StyledGrid = styled(Box)<ResponsiveGridStyleProps>(responsiveGridStyle)
 
 /**
  * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
@@ -25,7 +25,7 @@ export const Grid = forwardRef(function Grid(
     props
 
   return (
-    <Root
+    <StyledGrid
       data-as={typeof as === 'string' ? as : undefined}
       data-ui="Grid"
       {...restProps}
@@ -41,7 +41,7 @@ export const Grid = forwardRef(function Grid(
       ref={ref}
     >
       {children}
-    </Root>
+    </StyledGrid>
   )
 })
 Grid.displayName = 'ForwardRef(Grid)'