fix(box): add forwardRef to box component

src/base/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 import { Accordion as MuiAccordion, type AccordionProps as MuiAccordionProps } from '@mui/material';
+import React from 'react';
 
-export function Accordion(props: MuiAccordionProps): JSX.Element {
-  return <MuiAccordion {...props} />;
-}
+const Accordion = React.forwardRef<HTMLDivElement, MuiAccordionProps>((props, ref) => {
+  return <MuiAccordion {...props} ref={ref} />;
+});
 
 export default Accordion;

src/base/AccordionActions/AccordionActions.tsx

@@ -3,8 +3,12 @@ import {
   type AccordionActionsProps as MuiAccordionActionsProps
 } from '@mui/material';
 
-export function AccordionActions(props: MuiAccordionActionsProps): JSX.Element {
-  return <MuiAccordionActions {...props} />;
-}
+import React from 'react';
+
+const AccordionActions = React.forwardRef<HTMLDivElement, MuiAccordionActionsProps>(
+  (props, ref) => {
+    return <MuiAccordionActions {...props} ref={ref} />;
+  }
+);
 
 export default AccordionActions;

src/base/AccordionDetails/AccordionDetails.tsx

@@ -3,8 +3,12 @@ import {
   type AccordionDetailsProps as MuiAccordionDetailsProps
 } from '@mui/material';
 
-export function AccordionDetails(props: MuiAccordionDetailsProps): JSX.Element {
-  return <MuiAccordionDetails {...props} />;
-}
+import React from 'react';
+
+const AccordionDetails = React.forwardRef<HTMLDivElement, MuiAccordionDetailsProps>(
+  (props, ref) => {
+    return <MuiAccordionDetails {...props} ref={ref} />;
+  }
+);
 
 export default AccordionDetails;

src/base/AccordionSummary/AccordionSummary.tsx

@@ -2,9 +2,12 @@ import {
   AccordionSummary as MuiAccordionSummary,
   type AccordionSummaryProps as MuiAccordionSummaryProps
 } from '@mui/material';
+import React from 'react';
 
-export function AccordionSummary(props: MuiAccordionSummaryProps): JSX.Element {
-  return <MuiAccordionSummary {...props} />;
-}
+const AccordionSummary = React.forwardRef<HTMLDivElement, MuiAccordionSummaryProps>(
+  (props, ref) => {
+    return <MuiAccordionSummary {...props} ref={ref} />;
+  }
+);
 
 export default AccordionSummary;

src/base/AppBar/AppBar.tsx

@@ -1,7 +1,8 @@
 import { AppBar as MuiAppBar, type AppBarProps as MuiAppBarProps } from '@mui/material';
+import React from 'react';
 
-export function AppBar(props: MuiAppBarProps): JSX.Element {
-  return <MuiAppBar {...props} />;
-}
+const AppBar = React.forwardRef<HTMLDivElement, MuiAppBarProps>((props, ref) => {
+  return <MuiAppBar {...props} ref={ref} />;
+});
 
 export default AppBar;

src/base/Avatar/Avatar.tsx

@@ -1,7 +1,8 @@
 import { Avatar as MuiAvatar, type AvatarProps as MuiAvatarProps } from '@mui/material';
+import React from 'react';
 
-export function Avatar(props: MuiAvatarProps): JSX.Element {
-  return <MuiAvatar {...props} />;
-}
+const Avatar = React.forwardRef<HTMLDivElement, MuiAvatarProps>((props, ref) => {
+  return <MuiAvatar {...props} ref={ref} />;
+});
 
 export default Avatar;

src/base/Avatar/index.tsx

@@ -1,5 +1,5 @@
 import { AvatarProps } from '@mui/material';
-import { Avatar } from './Avatar';
+import Avatar from './Avatar';
 
 export { Avatar };
 export type { AvatarProps };

src/base/AvatarGroup/AvatarGroup.tsx

@@ -2,9 +2,10 @@ import {
   AvatarGroup as MuiAvatarGroup,
   type AvatarGroupProps as MuiAvatarGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function AvatarGroup(props: MuiAvatarGroupProps): JSX.Element {
-  return <MuiAvatarGroup {...props} />;
-}
+const AvatarGroup = React.forwardRef<HTMLDivElement, MuiAvatarGroupProps>((props, ref) => {
+  return <MuiAvatarGroup {...props} ref={ref} />;
+});
 
 export default AvatarGroup;

src/base/Backdrop/Backdrop.tsx

@@ -1,7 +1,8 @@
 import { Backdrop as MuiBackdrop, type BackdropProps as MuiBackdropProps } from '@mui/material';
+import React from 'react';
 
-export function Backdrop(props: MuiBackdropProps): JSX.Element {
-  return <MuiBackdrop {...props} />;
-}
+const Backdrop = React.forwardRef<HTMLDivElement, MuiBackdropProps>((props, ref) => {
+  return <MuiBackdrop {...props} ref={ref} />;
+});
 
 export default Backdrop;

src/base/Badge/Badge.tsx

@@ -1,7 +1,8 @@
 import { Badge as MuiBadge, type BadgeProps as MuiBadgeProps } from '@mui/material';
+import React from 'react';
 
-export function Badge(props: MuiBadgeProps): JSX.Element {
-  return <MuiBadge {...props} />;
-}
+const Badge = React.forwardRef<HTMLDivElement, MuiBadgeProps>((props, ref) => {
+  return <MuiBadge {...props} ref={ref} />;
+});
 
 export default Badge;

src/base/Box/Box.tsx

@@ -1,7 +1,8 @@
 import { Box as MuiBox, type BoxProps as MuiBoxProps } from '@mui/material';
+import React from 'react';
 
-export function Box(props: MuiBoxProps): JSX.Element {
-  return <MuiBox {...props} />;
-}
+const Box = React.forwardRef<HTMLDivElement, MuiBoxProps>((props, ref) => {
+  return <MuiBox {...props} ref={ref} />;
+});
 
 export default Box;

src/base/ButtonGroup/ButtonGroup.tsx

@@ -2,9 +2,10 @@ import {
   ButtonGroup as MuiButtonGroup,
   type ButtonGroupProps as MuiButtonGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function ButtonGroup(props: MuiButtonGroupProps): JSX.Element {
-  return <MuiButtonGroup {...props} />;
-}
+const ButtonGroup = React.forwardRef<HTMLDivElement, MuiButtonGroupProps>((props, ref) => {
+  return <MuiButtonGroup {...props} ref={ref} />;
+});
 
 export default ButtonGroup;

src/base/Card/Card.tsx

@@ -1,7 +1,8 @@
 import { Card as MuiCard, type CardProps as MuiCardProps } from '@mui/material';
+import React from 'react';
 
-export function Card(props: MuiCardProps): JSX.Element {
-  return <MuiCard {...props} />;
-}
+const Card = React.forwardRef<HTMLDivElement, MuiCardProps>((props, ref) => {
+  return <MuiCard {...props} ref={ref} />;
+});
 
 export default Card;

src/base/CardActions/CardActions.tsx

@@ -2,9 +2,10 @@ import {
   CardActions as MuiCardActions,
   CardActionsProps as MuiCardActionsProps
 } from '@mui/material';
+import React from 'react';
 
-export function CardActions(props: MuiCardActionsProps): JSX.Element {
-  return <MuiCardActions {...props} />;
-}
+const CardActions = React.forwardRef<HTMLDivElement, MuiCardActionsProps>((props, ref) => {
+  return <MuiCardActions {...props} ref={ref} />;
+});
 
 export default CardActions;

src/base/CardContent/CardContent.tsx

@@ -2,9 +2,10 @@ import {
   CardContent as MuiCardContent,
   CardContentProps as MuiCardContentProps
 } from '@mui/material';
+import React from 'react';
 
-export function CardContent(props: MuiCardContentProps): JSX.Element {
-  return <MuiCardContent {...props} />;
-}
+const CardContent = React.forwardRef<HTMLDivElement, MuiCardContentProps>((props, ref) => {
+  return <MuiCardContent {...props} ref={ref} />;
+});
 
 export default CardContent;

src/base/CardHeader/CardHeader.tsx

@@ -1,7 +1,8 @@
 import { CardHeader as MuiCardHeader, CardHeaderProps as MuiCardHeaderProps } from '@mui/material';
+import React from 'react';
 
-export function CardHeader(props: MuiCardHeaderProps): JSX.Element {
-  return <MuiCardHeader {...props} />;
-}
+const CardHeader = React.forwardRef<HTMLDivElement, MuiCardHeaderProps>((props, ref) => {
+  return <MuiCardHeader {...props} ref={ref} />;
+});
 
 export default CardHeader;

src/base/CardMedia/CardMedia.tsx

@@ -1,7 +1,8 @@
 import { CardMedia as MuiCardMedia, CardMediaProps as MuiCardMediaProps } from '@mui/material';
+import React from 'react';
 
-export function CardMedia(props: MuiCardMediaProps): JSX.Element {
-  return <MuiCardMedia {...props} />;
-}
+const CardMedia = React.forwardRef<HTMLDivElement, MuiCardMediaProps>((props, ref) => {
+  return <MuiCardMedia {...props} ref={ref} />;
+});
 
 export default CardMedia;

src/base/Checkbox/Checkbox.tsx

@@ -1,7 +1,8 @@
 import { Checkbox as MuiCheckbox, type CheckboxProps } from '@mui/material';
+import React from 'react';
 
-export function Checkbox(props: CheckboxProps): JSX.Element {
-  return <MuiCheckbox {...props} />;
-}
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>((props, ref) => {
+  return <MuiCheckbox {...props} ref={ref} />;
+});
 
 export default Checkbox;

src/base/Chip/Chip.tsx

@@ -1,7 +1,8 @@
 import { Chip as MuiChip, type ChipProps } from '@mui/material';
+import React from 'react';
 
-export function Chip(props: ChipProps): JSX.Element {
-  return <MuiChip {...props} />;
-}
+const Chip = React.forwardRef<HTMLDivElement, ChipProps>((props, ref) => {
+  return <MuiChip {...props} ref={ref} />;
+});
 
 export default Chip;

src/base/CircularProgress/CircularProgress.tsx

@@ -2,9 +2,12 @@ import {
   CircularProgress as MuiCircularProgress,
   CircularProgressProps as MuiCircularProgressProps
 } from '@mui/material';
+import React from 'react';
 
-export function CircularProgress(props: MuiCircularProgressProps): JSX.Element {
-  return <MuiCircularProgress {...props} />;
-}
+const CircularProgress = React.forwardRef<HTMLDivElement, MuiCircularProgressProps>(
+  (props, ref) => {
+    return <MuiCircularProgress {...props} ref={ref} />;
+  }
+);
 
 export default CircularProgress;

src/base/ClickAwayListener/ClickAwayListener.tsx

@@ -2,9 +2,10 @@ import {
   ClickAwayListener as MuiClickAwayListener,
   type ClickAwayListenerProps
 } from '@mui/material';
+import React from 'react';
 
-export function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {
-  return <MuiClickAwayListener {...props} />;
-}
+const ClickAwayListener = React.forwardRef<HTMLDivElement, ClickAwayListenerProps>((props, ref) => {
+  return <MuiClickAwayListener {...props} ref={ref} />;
+});
 
 export default ClickAwayListener;

src/base/Collapse/Collapse.tsx

@@ -1,5 +1,8 @@
 import { Collapse as MuiCollapse, CollapseProps as MuiCollapseProps } from '@mui/material';
+import React from 'react';
 
-export function Collapse(props: MuiCollapseProps): JSX.Element {
-  return <MuiCollapse {...props} />;
-}
+const Collapse = React.forwardRef<HTMLDivElement, MuiCollapseProps>((props, ref) => {
+  return <MuiCollapse {...props} ref={ref} />;
+});
+
+export { Collapse };

src/base/Container/Container.tsx

@@ -1,7 +1,8 @@
 import { Container as MuiContainer, ContainerProps as MuiContainerProps } from '@mui/material';
+import React from 'react';
 
-export function Container(props: MuiContainerProps): JSX.Element {
-  return <MuiContainer {...props} />;
-}
+const Container = React.forwardRef<HTMLDivElement, MuiContainerProps>((props, ref) => {
+  return <MuiContainer {...props} ref={ref} />;
+});
 
 export default Container;

src/base/Dialog/Dialog.tsx

@@ -1,7 +1,8 @@
 import { Dialog as MuiDialog, type DialogProps as MuiDialogProps } from '@mui/material';
+import React from 'react';
 
-export function Dialog(props: MuiDialogProps): JSX.Element {
-  return <MuiDialog {...props} />;
-}
+const Dialog = React.forwardRef<HTMLDivElement, MuiDialogProps>((props, ref) => {
+  return <MuiDialog {...props} ref={ref} />;
+});
 
 export default Dialog;

src/base/DialogActions/DialogActions.tsx

@@ -2,9 +2,10 @@ import {
   DialogActions as MuiDialogActions,
   type DialogActionsProps as MuiDialogActionsProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogActions(props: MuiDialogActionsProps): JSX.Element {
-  return <MuiDialogActions {...props} />;
-}
+const DialogActions = React.forwardRef<HTMLDivElement, MuiDialogActionsProps>((props, ref) => {
+  return <MuiDialogActions {...props} ref={ref} />;
+});
 
 export default DialogActions;

src/base/DialogContent/DialogContent.tsx

@@ -2,9 +2,10 @@ import {
   DialogContent as MuiDialogContent,
   type DialogContentProps as MuiDialogContentProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogContent(props: MuiDialogContentProps): JSX.Element {
-  return <MuiDialogContent {...props} />;
-}
+const DialogContent = React.forwardRef<HTMLDivElement, MuiDialogContentProps>((props, ref) => {
+  return <MuiDialogContent {...props} ref={ref} />;
+});
 
 export default DialogContent;

src/base/DialogContentText/DialogContentText.tsx

@@ -2,9 +2,12 @@ import {
   DialogContentText as MuiDialogContentText,
   type DialogContentTextProps as MuiDialogContentTextProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogContentText(props: MuiDialogContentTextProps): JSX.Element {
-  return <MuiDialogContentText {...props} />;
-}
+const DialogContentText = React.forwardRef<HTMLDivElement, MuiDialogContentTextProps>(
+  (props, ref) => {
+    return <MuiDialogContentText {...props} ref={ref} />;
+  }
+);
 
 export default DialogContentText;

src/base/DialogTitle/DialogTitle.tsx

@@ -2,9 +2,10 @@ import {
   DialogTitle as MuiDialogTitle,
   type DialogTitleProps as MuiDialogTitleProps
 } from '@mui/material';
+import React from 'react';
 
-export function DialogTitle(props: MuiDialogTitleProps): JSX.Element {
-  return <MuiDialogTitle {...props} />;
-}
+const DialogTitle = React.forwardRef<HTMLDivElement, MuiDialogTitleProps>((props, ref) => {
+  return <MuiDialogTitle {...props} ref={ref} />;
+});
 
 export default DialogTitle;

src/base/Drawer/Drawer.tsx

@@ -1,7 +1,8 @@
 import { Drawer as MuiDrawer, type DrawerProps as MuiDrawerProps } from '@mui/material';
+import React from 'react';
 
-export function Drawer(props: MuiDrawerProps): JSX.Element {
-  return <MuiDrawer {...props} />;
-}
+const Drawer = React.forwardRef<HTMLDivElement, MuiDrawerProps>((props, ref) => {
+  return <MuiDrawer {...props} ref={ref} />;
+});
 
 export default Drawer;

src/base/FormControlLabel/FormControlLabel.tsx

@@ -2,7 +2,12 @@ import {
   FormControlLabel as MuiFormControlLabel,
   FormControlLabelProps as MuiFormControlLabelProps
 } from '@mui/material';
+import React from 'react';
 
-export function FormControlLabel(props: MuiFormControlLabelProps): JSX.Element {
-  return <MuiFormControlLabel {...props} />;
-}
+const FormControlLabel = React.forwardRef<HTMLDivElement, MuiFormControlLabelProps>(
+  (props, ref) => {
+    return <MuiFormControlLabel {...props} ref={ref} />;
+  }
+);
+
+export { FormControlLabel };