[pull] main from chakra-ui:main

packages/react/src/components/aspect-ratio/aspect-ratio.tsx

@@ -62,3 +62,5 @@ export const AspectRatio = forwardRef<HTMLDivElement, AspectRatioProps>(
     )
   },
 )
+
+AspectRatio.displayName = "AspectRatio"

packages/react/src/components/badge/badge.tsx

@@ -17,5 +17,7 @@ export interface BadgeProps extends HTMLChakraProps<"span", BadgeBaseProps> {}
 
 export const Badge = withContext<HTMLSpanElement, BadgeProps>("span")
 
+Badge.displayName = "Badge"
+
 export const BadgePropsProvider =
   PropsProvider as React.Provider<BadgeBaseProps>

packages/react/src/components/bleed/bleed.tsx

@@ -68,3 +68,5 @@ export const Bleed = forwardRef<HTMLDivElement, BleedProps>(
     )
   },
 )
+
+Bleed.displayName = "Bleed"

packages/react/src/components/button/button-group.tsx

@@ -22,3 +22,5 @@ export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     )
   },
 )
+
+ButtonGroup.displayName = "ButtonGroup"

packages/react/src/components/button/button.tsx

@@ -87,5 +87,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   },
 )
 
+Button.displayName = "Button"
+
 export const ButtonPropsProvider =
   PropsProvider as React.Provider<ButtonBaseProps>

packages/react/src/components/button/close-button.tsx

@@ -14,3 +14,5 @@ export const CloseButton = React.forwardRef<
     </IconButton>
   )
 })
+
+CloseButton.displayName = "CloseButton"

packages/react/src/components/button/icon-button.tsx

@@ -18,3 +18,5 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
     )
   },
 )
+
+IconButton.displayName = "IconButton"

packages/react/src/components/checkmark/checkmark.tsx

@@ -63,3 +63,5 @@ export const Checkmark = forwardRef<SVGSVGElement, CheckmarkProps>(
     )
   },
 )
+
+Checkmark.displayName = "Checkmark"

packages/react/src/components/circle/index.tsx

@@ -11,3 +11,5 @@ export const Circle = forwardRef<HTMLDivElement, SquareProps>(
     return <Square size={size} ref={ref} borderRadius="9999px" {...rest} />
   },
 )
+
+Circle.displayName = "Circle"

packages/react/src/components/code/code.tsx

@@ -17,4 +17,6 @@ export interface CodeProps extends HTMLChakraProps<"code", CodeBaseProps> {}
 
 export const Code = withContext<HTMLElement, CodeProps>("code")
 
+Code.displayName = "Code"
+
 export const CodePropsProvider = PropsProvider as React.Provider<CodeBaseProps>

packages/react/src/components/container/container.tsx

@@ -20,5 +20,7 @@ export interface ContainerProps
 
 export const Container = withContext<HTMLDivElement, ContainerProps>("div")
 
+Container.displayName = "Container"
+
 export const ContainerPropsProvider =
   PropsProvider as React.Provider<ContainerBaseProps>

packages/react/src/components/em/index.tsx

@@ -9,3 +9,5 @@ export const Em = chakra("em", {
     fontStyle: "italic",
   },
 })
+
+Em.displayName = "Em"

packages/react/src/components/flex/flex.tsx

@@ -53,3 +53,5 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>(
     )
   },
 )
+
+Flex.displayName = "Flex"

packages/react/src/components/float/float.tsx

@@ -112,3 +112,5 @@ export const Float = forwardRef<HTMLDivElement, FloatProps>(
     return <chakra.div ref={ref} css={styles} {...rest} />
   },
 )
+
+Float.displayName = "Float"

packages/react/src/components/grid/grid-item.tsx

@@ -55,3 +55,5 @@ export const GridItem = forwardRef<HTMLDivElement, GridItemProps>(
     return <chakra.div ref={ref} css={[styles, props.css]} {...rest} />
   },
 )
+
+GridItem.displayName = "GridItem"

packages/react/src/components/grid/grid.tsx

@@ -58,3 +58,5 @@ export const Grid = forwardRef<HTMLDivElement, GridProps>(
     )
   },
 )
+
+Grid.displayName = "Grid"

packages/react/src/components/group/group.tsx

@@ -177,3 +177,5 @@ export const Group = memo(
     )
   }),
 )
+
+Group.displayName = "Group"

packages/react/src/components/heading/index.tsx

@@ -18,5 +18,7 @@ export interface HeadingProps
 
 export const Heading = withContext<HTMLHeadingElement, HeadingProps>("h2")
 
+Heading.displayName = "Heading"
+
 export const HeadingPropsProvider =
   PropsProvider as React.Provider<HeadingProps>

packages/react/src/components/icon/icon.tsx

@@ -40,4 +40,6 @@ export const Icon = React.forwardRef<SVGSVGElement, IconProps>(
   },
 )
 
+Icon.displayName = "Icon"
+
 export const IconPropsProvider = PropsProvider as React.Provider<IconProps>

packages/react/src/components/image/image.tsx

@@ -45,3 +45,5 @@ export const Image = forwardRef<HTMLImageElement, ImageProps>(
     )
   },
 )
+
+Image.displayName = "Image"

packages/react/src/components/kbd/kbd.tsx

@@ -17,4 +17,6 @@ export interface KbdProps extends HTMLChakraProps<"kbd", KbdBaseProps> {}
 
 export const Kbd = withContext<HTMLElement, KbdProps>("kbd")
 
+Kbd.displayName = "Kbd"
+
 export const KbdPropsProvider = PropsProvider as React.Provider<KbdProps>

packages/react/src/components/link/link.tsx

@@ -17,4 +17,6 @@ export interface LinkProps extends HTMLChakraProps<"a", LinkBaseProps> {}
 
 export const Link = withContext<HTMLAnchorElement, LinkProps>("a")
 
+Link.displayName = "Link"
+
 export const LinkPropsProvider = PropsProvider as React.Provider<LinkProps>

packages/react/src/components/loader/loader-overlay.tsx

@@ -13,3 +13,5 @@ export const LoaderOverlay = chakra("div", {
     gap: "2",
   },
 })
+
+LoaderOverlay.displayName = "LoaderOverlay"

packages/react/src/components/loader/loader.tsx

@@ -68,3 +68,5 @@ export const Loader = React.forwardRef<HTMLSpanElement, LoaderProps>(
     )
   },
 )
+
+Loader.displayName = "Loader"

packages/react/src/components/mark/index.tsx

@@ -18,4 +18,6 @@ export interface MarkProps
 
 export const Mark = withContext<HTMLElement, MarkProps>("mark")
 
+Mark.displayName = "Mark"
+
 export const MarkPropsProvider = PropsProvider as React.Provider<MarkProps>

packages/react/src/components/quote/index.tsx

@@ -10,3 +10,5 @@ export const Quote = chakra("q", {
     lineHeight: "1.2",
   },
 })
+
+Quote.displayName = "Quote"

packages/react/src/components/radiomark/radiomark.tsx

@@ -48,3 +48,5 @@ export const Radiomark = forwardRef<HTMLSpanElement, RadiomarkProps>(
     )
   },
 )
+
+Radiomark.displayName = "Radiomark"

packages/react/src/components/separator/separator.tsx

@@ -38,5 +38,7 @@ export const Separator = forwardRef<HTMLSpanElement, SeparatorProps>(
   },
 )
 
+Separator.displayName = "Separator"
+
 export const SeparatorPropsProvider =
   PropsProvider as React.Provider<SeparatorBaseProps>

packages/react/src/components/simple-grid/simple-grid.tsx

@@ -47,6 +47,8 @@ export const SimpleGrid = forwardRef<HTMLDivElement, SimpleGridProps>(
   },
 )
 
+SimpleGrid.displayName = "SimpleGrid"
+
 function toPx(n: string | number) {
   return typeof n === "number" ? `${n}px` : n
 }

packages/react/src/components/skeleton/skeleton.tsx

@@ -23,6 +23,8 @@ export interface SkeletonProps
 
 export const Skeleton = withContext<HTMLDivElement, SkeletonProps>("div")
 
+Skeleton.displayName = "Skeleton"
+
 export const SkeletonPropsProvider =
   PropsProvider as React.Provider<SkeletonProps>
 
@@ -44,6 +46,8 @@ export const SkeletonCircle = React.forwardRef<
   )
 })
 
+SkeletonCircle.displayName = "SkeletonCircle"
+
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface SkeletonTextProps extends SkeletonProps {
@@ -68,3 +72,5 @@ export const SkeletonText = React.forwardRef<HTMLDivElement, SkeletonTextProps>(
     )
   },
 )
+
+SkeletonText.displayName = "SkeletonText"

packages/react/src/components/skip-nav/skip-nav-content.tsx

@@ -25,3 +25,5 @@ export const SkipNavContent = forwardRef<HTMLDivElement, SkipNavContentProps>(
     )
   },
 )
+
+SkipNavContent.displayName = "SkipNavContent"

packages/react/src/components/skip-nav/skip-nav-link.tsx

@@ -38,3 +38,5 @@ export const SkipNavLink = forwardRef<HTMLAnchorElement, SkipNavLinkProps>(
     )
   },
 )
+
+SkipNavLink.displayName = "SkipNavLink"

packages/react/src/components/span/index.tsx

@@ -5,3 +5,5 @@ import { type HTMLChakraProps, chakra } from "../../styled-system"
 export interface SpanProps extends HTMLChakraProps<"span"> {}
 
 export const Span = chakra("span")
+
+Span.displayName = "Span"

packages/react/src/components/spinner/spinner.tsx

@@ -18,5 +18,7 @@ export interface SpinnerProps
 
 export const Spinner = withContext<HTMLSpanElement, SpinnerProps>("span")
 
+Spinner.displayName = "Spinner"
+
 export const SpinnerPropsProvider =
   PropsProvider as React.Provider<SpinnerProps>

packages/react/src/components/square/index.tsx

@@ -31,3 +31,5 @@ export const Square = forwardRef<HTMLDivElement, SquareProps>(
     )
   },
 )
+
+Square.displayName = "Square"

packages/react/src/components/stack/h-stack.tsx

@@ -13,3 +13,5 @@ export const HStack = forwardRef<HTMLDivElement, StackProps>(
     return <Stack align="center" {...props} direction="row" ref={ref} />
   },
 )
+
+HStack.displayName = "HStack"

packages/react/src/components/stack/stack.tsx

@@ -117,3 +117,5 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(
     )
   },
 )
+
+Stack.displayName = "Stack"

packages/react/src/components/stack/v-stack.tsx

@@ -13,3 +13,5 @@ export const VStack = forwardRef<HTMLDivElement, StackProps>(
     return <Stack align="center" {...props} direction="column" ref={ref} />
   },
 )
+
+VStack.displayName = "VStack"

packages/react/src/components/strong/index.tsx

@@ -7,3 +7,5 @@ export interface StrongProps extends HTMLChakraProps<"em"> {}
 export const Strong = chakra("strong", {
   base: { fontWeight: "semibold" },
 })
+
+Strong.displayName = "Strong"

packages/react/src/components/text/index.tsx

@@ -18,4 +18,6 @@ export interface TextProps
 
 export const Text = withContext<HTMLParagraphElement, TextProps>("p")
 
+Text.displayName = "Text"
+
 export const TextPropsProvider = PropsProvider as React.Provider<TextProps>

packages/react/src/components/textarea/textarea.tsx

@@ -24,5 +24,7 @@ export const Textarea = withContext<HTMLTextAreaElement, TextareaProps>(
   Field.Textarea,
 )
 
+Textarea.displayName = "Textarea"
+
 export const TextareaPropsProvider =
   PropsProvider as React.Provider<TextareaProps>