display the component's name on storybook docs

packages/react/src/components/Avatar/styles.ts

@@ -31,3 +31,5 @@ export const AvatarFallback = styled(Avatar.Fallback, {
     width: '$6',
   },
 });
+
+AvatarContainer.displayName = 'Avatar';

packages/react/src/components/Box.tsx

@@ -11,3 +11,5 @@ export const Box = styled('div', {
 export interface BoxProps extends ComponentProps<typeof Box> {
   as?: ElementType;
 }
+
+Box.displayName = 'Box';

packages/react/src/components/Button.tsx

@@ -85,3 +85,5 @@ export const Button = styled('button', {
 export interface ButtonProps extends ComponentProps<typeof Button> {
   as?: ElementType;
 }
+
+Button.displayName = 'Button';

packages/react/src/components/Checkbox/styles.tsx

@@ -54,3 +54,5 @@ export const CheckboxIndicator = styled(Checkbox.CheckboxIndicator, {
     animation: `${slidOut} 200ms ease-out`,
   },
 });
+
+CheckboxContainer.displayName = 'Checkbox';

packages/react/src/components/Heading.tsx

@@ -29,3 +29,5 @@ export const Heading = styled('h2', {
 export interface HeadingProps extends ComponentProps<typeof Heading> {
   as?: ElementType;
 }
+
+Heading.displayName = 'Heading';

packages/react/src/components/Multistep/styles.ts

@@ -30,3 +30,5 @@ export const Step = styled('div', {
     },
   },
 });
+
+MultistepContainer.displayName = 'Multistep';

packages/react/src/components/Text.tsx

@@ -32,3 +32,5 @@ export const Text = styled('p', {
 export interface TextProps extends ComponentProps<typeof Text> {
   as?: ElementType;
 }
+
+Text.displayName = 'Text';

packages/react/src/components/TextArea.tsx

@@ -30,3 +30,5 @@ export const TextArea = styled('textarea', {
 });
 
 export interface TextAreaProps extends ComponentProps<typeof TextArea> {}
+
+TextArea.displayName = 'TextArea';

packages/react/src/components/TextInput/styles.ts

@@ -47,3 +47,5 @@ export const Prefix = styled('span', {
   fontWeight: '$regular',
   fontFamily: '$default',
 });
+
+Input.displayName = 'Input';