diff --git a/src/base/Accordion/Accordion.tsx b/src/base/Accordion/Accordion.tsx
index dfec4994..054a8780 100644
--- a/src/base/Accordion/Accordion.tsx
+++ b/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;
diff --git a/src/base/AccordionActions/AccordionActions.tsx b/src/base/AccordionActions/AccordionActions.tsx
index e78e798c..79433bb7 100644
--- a/src/base/AccordionActions/AccordionActions.tsx
+++ b/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;
diff --git a/src/base/AccordionDetails/AccordionDetails.tsx b/src/base/AccordionDetails/AccordionDetails.tsx
index f806de58..7c263f5f 100644
--- a/src/base/AccordionDetails/AccordionDetails.tsx
+++ b/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;
diff --git a/src/base/AccordionSummary/AccordionSummary.tsx b/src/base/AccordionSummary/AccordionSummary.tsx
index f1369ad4..009cf491 100644
--- a/src/base/AccordionSummary/AccordionSummary.tsx
+++ b/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;
diff --git a/src/base/AppBar/AppBar.tsx b/src/base/AppBar/AppBar.tsx
index 9b38a356..90c495b8 100644
--- a/src/base/AppBar/AppBar.tsx
+++ b/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;
diff --git a/src/base/Avatar/Avatar.tsx b/src/base/Avatar/Avatar.tsx
index 64308e4e..8b5e2289 100644
--- a/src/base/Avatar/Avatar.tsx
+++ b/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;
diff --git a/src/base/Avatar/index.tsx b/src/base/Avatar/index.tsx
index ebee76ea..8c68572f 100644
--- a/src/base/Avatar/index.tsx
+++ b/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 };
diff --git a/src/base/AvatarGroup/AvatarGroup.tsx b/src/base/AvatarGroup/AvatarGroup.tsx
index 9ffdee18..d7fb9b66 100644
--- a/src/base/AvatarGroup/AvatarGroup.tsx
+++ b/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;
diff --git a/src/base/Backdrop/Backdrop.tsx b/src/base/Backdrop/Backdrop.tsx
index e4523868..096f15aa 100644
--- a/src/base/Backdrop/Backdrop.tsx
+++ b/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;
diff --git a/src/base/Badge/Badge.tsx b/src/base/Badge/Badge.tsx
index 735b4d61..24ecc552 100644
--- a/src/base/Badge/Badge.tsx
+++ b/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;
diff --git a/src/base/Box/Box.tsx b/src/base/Box/Box.tsx
index 84888704..a41ea187 100644
--- a/src/base/Box/Box.tsx
+++ b/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;
diff --git a/src/base/ButtonGroup/ButtonGroup.tsx b/src/base/ButtonGroup/ButtonGroup.tsx
index ee24c747..ab0909cc 100644
--- a/src/base/ButtonGroup/ButtonGroup.tsx
+++ b/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;
diff --git a/src/base/Card/Card.tsx b/src/base/Card/Card.tsx
index db3e9b07..84181238 100644
--- a/src/base/Card/Card.tsx
+++ b/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;
diff --git a/src/base/CardActions/CardActions.tsx b/src/base/CardActions/CardActions.tsx
index a36c30f8..b3a49a80 100644
--- a/src/base/CardActions/CardActions.tsx
+++ b/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;
diff --git a/src/base/CardContent/CardContent.tsx b/src/base/CardContent/CardContent.tsx
index dc39e25a..faf2111f 100644
--- a/src/base/CardContent/CardContent.tsx
+++ b/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;
diff --git a/src/base/CardHeader/CardHeader.tsx b/src/base/CardHeader/CardHeader.tsx
index f1e24f4b..579c557f 100644
--- a/src/base/CardHeader/CardHeader.tsx
+++ b/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;
diff --git a/src/base/CardMedia/CardMedia.tsx b/src/base/CardMedia/CardMedia.tsx
index 922602d3..3ad196d2 100644
--- a/src/base/CardMedia/CardMedia.tsx
+++ b/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;
diff --git a/src/base/Checkbox/Checkbox.tsx b/src/base/Checkbox/Checkbox.tsx
index 02ed3d9a..302a16dc 100644
--- a/src/base/Checkbox/Checkbox.tsx
+++ b/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;
diff --git a/src/base/Chip/Chip.tsx b/src/base/Chip/Chip.tsx
index 2023a000..249ee09f 100644
--- a/src/base/Chip/Chip.tsx
+++ b/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;
diff --git a/src/base/CircularProgress/CircularProgress.tsx b/src/base/CircularProgress/CircularProgress.tsx
index 3c460201..f6f2d99f 100644
--- a/src/base/CircularProgress/CircularProgress.tsx
+++ b/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;
diff --git a/src/base/ClickAwayListener/ClickAwayListener.tsx b/src/base/ClickAwayListener/ClickAwayListener.tsx
index b5db5295..315794d2 100644
--- a/src/base/ClickAwayListener/ClickAwayListener.tsx
+++ b/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;
diff --git a/src/base/Collapse/Collapse.tsx b/src/base/Collapse/Collapse.tsx
index 4279b06a..cc6421ea 100644
--- a/src/base/Collapse/Collapse.tsx
+++ b/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 };
diff --git a/src/base/Container/Container.tsx b/src/base/Container/Container.tsx
index 4a290965..ba9cbbe3 100644
--- a/src/base/Container/Container.tsx
+++ b/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;
diff --git a/src/base/Dialog/Dialog.tsx b/src/base/Dialog/Dialog.tsx
index 170b5982..7750e1ba 100644
--- a/src/base/Dialog/Dialog.tsx
+++ b/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;
diff --git a/src/base/DialogActions/DialogActions.tsx b/src/base/DialogActions/DialogActions.tsx
index 424e1479..08f6e581 100644
--- a/src/base/DialogActions/DialogActions.tsx
+++ b/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;
diff --git a/src/base/DialogContent/DialogContent.tsx b/src/base/DialogContent/DialogContent.tsx
index c82afed5..7112613f 100644
--- a/src/base/DialogContent/DialogContent.tsx
+++ b/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;
diff --git a/src/base/DialogContentText/DialogContentText.tsx b/src/base/DialogContentText/DialogContentText.tsx
index 638c7617..7b1a23aa 100644
--- a/src/base/DialogContentText/DialogContentText.tsx
+++ b/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;
diff --git a/src/base/DialogTitle/DialogTitle.tsx b/src/base/DialogTitle/DialogTitle.tsx
index bec9f8ad..2ea32a5d 100644
--- a/src/base/DialogTitle/DialogTitle.tsx
+++ b/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;
diff --git a/src/base/Drawer/Drawer.tsx b/src/base/Drawer/Drawer.tsx
index dd19345b..bbad0053 100644
--- a/src/base/Drawer/Drawer.tsx
+++ b/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;
diff --git a/src/base/FormControlLabel/FormControlLabel.tsx b/src/base/FormControlLabel/FormControlLabel.tsx
index b47f7892..53087d6b 100644
--- a/src/base/FormControlLabel/FormControlLabel.tsx
+++ b/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 };
diff --git a/src/base/FormGroup/FormGroup.tsx b/src/base/FormGroup/FormGroup.tsx
index 39d5855c..169233db 100644
--- a/src/base/FormGroup/FormGroup.tsx
+++ b/src/base/FormGroup/FormGroup.tsx
@@ -1,5 +1,8 @@
 import { FormGroup as MuiFormGroup, FormGroupProps as MuiFormGroupProps } from '@mui/material';
+import React from 'react';
 
-export function FormGroup(props: MuiFormGroupProps): JSX.Element {
-  return <MuiFormGroup {...props} />;
-}
+const FormGroup = React.forwardRef<HTMLDivElement, MuiFormGroupProps>((props, ref) => {
+  return <MuiFormGroup {...props} ref={ref} />;
+});
+
+export { FormGroup };
diff --git a/src/base/Grid/Grid.tsx b/src/base/Grid/Grid.tsx
index db7ddce9..6aa7bbac 100644
--- a/src/base/Grid/Grid.tsx
+++ b/src/base/Grid/Grid.tsx
@@ -1,5 +1,8 @@
 import { Grid as MuiGrid, GridProps as MuiGridProps } from '@mui/material';
+import React from 'react';
 
-export function Grid(props: MuiGridProps): JSX.Element {
-  return <MuiGrid {...props} />;
-}
+const Grid = React.forwardRef<HTMLDivElement, MuiGridProps>((props, ref) => {
+  return <MuiGrid {...props} ref={ref} />;
+});
+
+export { Grid };
diff --git a/src/base/Grow/Grow.tsx b/src/base/Grow/Grow.tsx
index 558f294b..204a70ea 100644
--- a/src/base/Grow/Grow.tsx
+++ b/src/base/Grow/Grow.tsx
@@ -1,5 +1,8 @@
 import { Grow as MuiGrow, GrowProps as MuiGrowProps } from '@mui/material';
+import React from 'react';
 
-export function Grow(props: MuiGrowProps): JSX.Element {
-  return <MuiGrow {...props} />;
-}
+const Grow = React.forwardRef<HTMLDivElement, MuiGrowProps>((props, ref) => {
+  return <MuiGrow {...props} ref={ref} />;
+});
+
+export { Grow };
diff --git a/src/base/Input/input.tsx b/src/base/Input/input.tsx
index 393ae73c..229870af 100644
--- a/src/base/Input/input.tsx
+++ b/src/base/Input/input.tsx
@@ -1,5 +1,8 @@
 import { Input as MuiInput, type InputProps } from '@mui/material';
+import React from 'react';
 
-export function Input(props: InputProps): JSX.Element {
-  return <MuiInput {...props} />;
-}
+const Input = React.forwardRef<HTMLDivElement, InputProps>((props, ref) => {
+  return <MuiInput {...props} ref={ref} />;
+});
+
+export { Input };
diff --git a/src/base/Input/inputadornment.tsx b/src/base/Input/inputadornment.tsx
index 16d0d287..1eafc49c 100644
--- a/src/base/Input/inputadornment.tsx
+++ b/src/base/Input/inputadornment.tsx
@@ -1,5 +1,8 @@
 import { InputAdornment as MuiInputAdornment, type InputAdornmentProps } from '@mui/material';
+import React from 'react';
 
-export function InputAdornment(props: InputAdornmentProps): JSX.Element {
-  return <MuiInputAdornment {...props} />;
-}
+const InputAdornment = React.forwardRef<HTMLDivElement, InputAdornmentProps>((props, ref) => {
+  return <MuiInputAdornment {...props} ref={ref} />;
+});
+
+export { InputAdornment };
diff --git a/src/base/ListItem/ListItem.tsx b/src/base/ListItem/ListItem.tsx
index f324b40e..bcb609ae 100644
--- a/src/base/ListItem/ListItem.tsx
+++ b/src/base/ListItem/ListItem.tsx
@@ -1,7 +1,8 @@
 import { ListItem as MuiListItem, ListItemProps as MuiListItemProps } from '@mui/material';
+import React from 'react';
 
-export function ListItem(props: MuiListItemProps): JSX.Element {
-  return <MuiListItem {...props} />;
-}
+const ListItem = React.forwardRef<HTMLLIElement, MuiListItemProps>((props, ref) => {
+  return <MuiListItem {...props} ref={ref} />;
+});
 
 export default ListItem;
diff --git a/src/base/ListItemAvatar/ListItemAvatar.tsx b/src/base/ListItemAvatar/ListItemAvatar.tsx
index b324798e..70fac90f 100644
--- a/src/base/ListItemAvatar/ListItemAvatar.tsx
+++ b/src/base/ListItemAvatar/ListItemAvatar.tsx
@@ -2,9 +2,10 @@ import {
   ListItemAvatar as MuiListItemAvatar,
   ListItemAvatarProps as MuiListItemAvatarProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemAvatar(props: MuiListItemAvatarProps): JSX.Element {
-  return <MuiListItemAvatar {...props} />;
-}
+const ListItemAvatar = React.forwardRef<HTMLDivElement, MuiListItemAvatarProps>((props, ref) => {
+  return <MuiListItemAvatar {...props} ref={ref} />;
+});
 
 export default ListItemAvatar;
diff --git a/src/base/ListItemButton/ListItemButton.tsx b/src/base/ListItemButton/ListItemButton.tsx
index 83f9002b..f19e4f3e 100644
--- a/src/base/ListItemButton/ListItemButton.tsx
+++ b/src/base/ListItemButton/ListItemButton.tsx
@@ -2,9 +2,10 @@ import {
   ListItemButton as MuiListItemButton,
   ListItemButtonProps as MuiListItemButtonProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemButton(props: MuiListItemButtonProps): JSX.Element {
-  return <MuiListItemButton {...props} />;
-}
+const ListItemButton = React.forwardRef<HTMLDivElement, MuiListItemButtonProps>((props, ref) => {
+  return <MuiListItemButton {...props} ref={ref} />;
+});
 
-export default ListItemButton;
+export { ListItemButton };
diff --git a/src/base/ListItemIcon/ListItemIcon.tsx b/src/base/ListItemIcon/ListItemIcon.tsx
index c2cb357d..2b18ce56 100644
--- a/src/base/ListItemIcon/ListItemIcon.tsx
+++ b/src/base/ListItemIcon/ListItemIcon.tsx
@@ -2,9 +2,10 @@ import {
   ListItemIcon as MuiListItemIcon,
   ListItemIconProps as MuiListItemIconProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemIcon(props: MuiListItemIconProps): JSX.Element {
-  return <MuiListItemIcon {...props} />;
-}
+const ListItemIcon = React.forwardRef<HTMLDivElement, MuiListItemIconProps>((props, ref) => {
+  return <MuiListItemIcon {...props} ref={ref} />;
+});
 
-export default ListItemIcon;
+export { ListItemIcon };
diff --git a/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx b/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx
index bedcfb06..c8473f16 100644
--- a/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx
+++ b/src/base/ListItemSecondaryAction/ListItemSecondaryAction.tsx
@@ -2,9 +2,12 @@ import {
   ListItemSecondaryAction as MuiListItemSecondaryAction,
   ListItemSecondaryActionProps as MuiListItemSecondaryActionProps
 } from '@mui/material';
+import React from 'react';
 
-export function ListItemSecondaryAction(props: MuiListItemSecondaryActionProps): JSX.Element {
-  return <MuiListItemSecondaryAction {...props} />;
-}
+const ListItemSecondaryAction = React.forwardRef<HTMLDivElement, MuiListItemSecondaryActionProps>(
+  (props, ref) => {
+    return <MuiListItemSecondaryAction {...props} ref={ref} />;
+  }
+);
 
 export default ListItemSecondaryAction;
diff --git a/src/base/Menu/Menu.tsx b/src/base/Menu/Menu.tsx
index 24701fcd..e844b4be 100644
--- a/src/base/Menu/Menu.tsx
+++ b/src/base/Menu/Menu.tsx
@@ -1,7 +1,8 @@
 import { Menu as MuiMenu, MenuProps as MuiMenuProps } from '@mui/material';
+import React from 'react';
 
-export function Menu(props: MuiMenuProps): JSX.Element {
-  return <MuiMenu {...props} />;
-}
+const Menu = React.forwardRef<HTMLDivElement, MuiMenuProps>((props, ref) => {
+  return <MuiMenu {...props} ref={ref} />;
+});
 
 export default Menu;
diff --git a/src/base/OutlinedInput/OutlinedInput.tsx b/src/base/OutlinedInput/OutlinedInput.tsx
index a8edd7df..4f2b00a3 100644
--- a/src/base/OutlinedInput/OutlinedInput.tsx
+++ b/src/base/OutlinedInput/OutlinedInput.tsx
@@ -2,7 +2,10 @@ import {
   OutlinedInput as MuiOutlinedInput,
   OutlinedInputProps as MuiOutlinedInputProps
 } from '@mui/material';
+import React from 'react';
 
-export function OutlinedInput(props: MuiOutlinedInputProps): JSX.Element {
-  return <MuiOutlinedInput {...props} />;
-}
+const OutlinedInput = React.forwardRef<HTMLDivElement, MuiOutlinedInputProps>((props, ref) => {
+  return <MuiOutlinedInput {...props} ref={ref} />;
+});
+
+export { OutlinedInput };
diff --git a/src/base/Pagination/Pagination.tsx b/src/base/Pagination/Pagination.tsx
index f29298a5..728ad7fe 100644
--- a/src/base/Pagination/Pagination.tsx
+++ b/src/base/Pagination/Pagination.tsx
@@ -1,7 +1,8 @@
 import { Pagination as MuiPagination, PaginationProps as MuiPaginationProps } from '@mui/material';
+import React from 'react';
 
-export function Pagination(props: MuiPaginationProps): JSX.Element {
-  return <MuiPagination {...props} />;
-}
+const Pagination = React.forwardRef<HTMLDivElement, MuiPaginationProps>((props, ref) => {
+  return <MuiPagination {...props} ref={ref} />;
+});
 
 export default Pagination;
diff --git a/src/base/Paper/Paper.tsx b/src/base/Paper/Paper.tsx
index 58dedda5..9e3190f1 100644
--- a/src/base/Paper/Paper.tsx
+++ b/src/base/Paper/Paper.tsx
@@ -1,7 +1,8 @@
 import { Paper as MuiPaper, type PaperProps as MuiPaperProps } from '@mui/material';
+import React from 'react';
 
-export function Paper(props: MuiPaperProps): JSX.Element {
-  return <MuiPaper {...props}>{props.children}</MuiPaper>;
-}
+const Paper = React.forwardRef<HTMLDivElement, MuiPaperProps>((props, ref) => {
+  return <MuiPaper {...props} ref={ref} />;
+});
 
 export default Paper;
diff --git a/src/base/Popper/Popper.tsx b/src/base/Popper/Popper.tsx
index 896a2f78..24ea015a 100644
--- a/src/base/Popper/Popper.tsx
+++ b/src/base/Popper/Popper.tsx
@@ -1,7 +1,8 @@
 import { Popper as MuiPopper, type PopperProps as MuiPopperProps } from '@mui/material';
+import React from 'react';
 
-export function Popper(props: MuiPopperProps): JSX.Element {
-  return <MuiPopper {...props} />;
-}
+const Popper = React.forwardRef<HTMLDivElement, MuiPopperProps>((props, ref) => {
+  return <MuiPopper {...props} ref={ref} />;
+});
 
 export default Popper;
diff --git a/src/base/RadioGroup/RadioGroup.tsx b/src/base/RadioGroup/RadioGroup.tsx
index f5506d84..aea4e747 100644
--- a/src/base/RadioGroup/RadioGroup.tsx
+++ b/src/base/RadioGroup/RadioGroup.tsx
@@ -2,9 +2,10 @@ import {
   RadioGroup as MuiRadioGroup,
   type RadioGroupProps as MuiRadioGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function RadioGroup(props: MuiRadioGroupProps): JSX.Element {
-  return <MuiRadioGroup {...props} />;
-}
+const RadioGroup = React.forwardRef<HTMLDivElement, MuiRadioGroupProps>((props, ref) => {
+  return <MuiRadioGroup {...props} ref={ref} />;
+});
 
 export default RadioGroup;
diff --git a/src/base/Select/Select.tsx b/src/base/Select/Select.tsx
index 74562025..a21c5f4e 100644
--- a/src/base/Select/Select.tsx
+++ b/src/base/Select/Select.tsx
@@ -1,7 +1,8 @@
 import { Select as MuiSelect, type SelectProps as MuiSelectProps } from '@mui/material';
+import React from 'react';
 
-export function Select(props: MuiSelectProps): JSX.Element {
-  return <MuiSelect {...props} />;
-}
+const Select = React.forwardRef<HTMLDivElement, MuiSelectProps>((props, ref) => {
+  return <MuiSelect {...props} ref={ref} />;
+});
 
 export default Select;
diff --git a/src/base/Skeleton/Skeleton.tsx b/src/base/Skeleton/Skeleton.tsx
index da715007..045b1b0b 100644
--- a/src/base/Skeleton/Skeleton.tsx
+++ b/src/base/Skeleton/Skeleton.tsx
@@ -1,7 +1,8 @@
 import { Skeleton as MuiSkeleton, type SkeletonProps as MuiSkeletonProps } from '@mui/material';
+import React from 'react';
 
-export function Skeleton(props: MuiSkeletonProps): JSX.Element {
-  return <MuiSkeleton {...props} />;
-}
+const Skeleton = React.forwardRef<HTMLDivElement, MuiSkeletonProps>((props, ref) => {
+  return <MuiSkeleton {...props} ref={ref} />;
+});
 
 export default Skeleton;
diff --git a/src/base/Slide/Slide.tsx b/src/base/Slide/Slide.tsx
index 3e3c2bf3..273e6f3c 100644
--- a/src/base/Slide/Slide.tsx
+++ b/src/base/Slide/Slide.tsx
@@ -1,7 +1,8 @@
 import { Slide as MuiSlide, type SlideProps as MuiSlideProps } from '@mui/material';
+import React from 'react';
 
-export function Slide(props: MuiSlideProps): JSX.Element {
-  return <MuiSlide {...props} />;
-}
+const Slide = React.forwardRef<HTMLDivElement, MuiSlideProps>((props, ref) => {
+  return <MuiSlide {...props} ref={ref} />;
+});
 
 export default Slide;
diff --git a/src/base/Stack/Stack.tsx b/src/base/Stack/Stack.tsx
index 79b6e0f4..315c3671 100644
--- a/src/base/Stack/Stack.tsx
+++ b/src/base/Stack/Stack.tsx
@@ -1,7 +1,8 @@
 import { Stack as MuiStack, type StackProps as MuiStackProps } from '@mui/material';
+import React from 'react';
 
-export function Stack(props: MuiStackProps): JSX.Element {
-  return <MuiStack {...props} />;
-}
+const Stack = React.forwardRef<HTMLDivElement, MuiStackProps>((props, ref) => {
+  return <MuiStack {...props} ref={ref} />;
+});
 
 export default Stack;
diff --git a/src/base/Switch/Switch.tsx b/src/base/Switch/Switch.tsx
index c15b5073..820c12cc 100644
--- a/src/base/Switch/Switch.tsx
+++ b/src/base/Switch/Switch.tsx
@@ -1,7 +1,8 @@
 import { Switch as MuiSwitch, type SwitchProps as MuiSwitchProps } from '@mui/material';
+import React from 'react';
 
-export function Switch(props: MuiSwitchProps): JSX.Element {
-  return <MuiSwitch {...props} />;
-}
+const Switch = React.forwardRef<HTMLButtonElement, MuiSwitchProps>((props, ref) => {
+  return <MuiSwitch {...props} ref={ref} />;
+});
 
 export default Switch;
diff --git a/src/base/Tab/Tab.tsx b/src/base/Tab/Tab.tsx
index 174e958c..d19ec2b4 100644
--- a/src/base/Tab/Tab.tsx
+++ b/src/base/Tab/Tab.tsx
@@ -1,7 +1,8 @@
 import { Tab as MuiTab, type TabProps as MuiTypeProps } from '@mui/material';
+import React from 'react';
 
-export function Tab(props: MuiTypeProps): JSX.Element {
-  return <MuiTab {...props} />;
-}
+const Tab = React.forwardRef<HTMLDivElement, MuiTypeProps>((props, ref) => {
+  return <MuiTab {...props} ref={ref} />;
+});
 
 export default Tab;
diff --git a/src/base/Tabs/Tabs.tsx b/src/base/Tabs/Tabs.tsx
index 490dc10b..578cc4d9 100644
--- a/src/base/Tabs/Tabs.tsx
+++ b/src/base/Tabs/Tabs.tsx
@@ -1,7 +1,8 @@
 import { Tabs as MuiTabs, type TabsProps as MuiTabsProps } from '@mui/material';
+import React from 'react';
 
-export function Tabs(props: MuiTabsProps): JSX.Element {
-  return <MuiTabs {...props} />;
-}
+const Tabs = React.forwardRef<HTMLDivElement, MuiTabsProps>((props, ref) => {
+  return <MuiTabs {...props} ref={ref} />;
+});
 
 export default Tabs;
diff --git a/src/base/TextField/TextField.tsx b/src/base/TextField/TextField.tsx
index 7ebcb848..e8fd8b55 100644
--- a/src/base/TextField/TextField.tsx
+++ b/src/base/TextField/TextField.tsx
@@ -1,7 +1,8 @@
 import { TextField as MuiTextField, type TextFieldProps as MuiTextFieldProps } from '@mui/material';
+import React from 'react';
 
-export function TextField(props: MuiTextFieldProps): JSX.Element {
-  return <MuiTextField {...props} />;
-}
+const TextField = React.forwardRef<HTMLDivElement, MuiTextFieldProps>((props, ref) => {
+  return <MuiTextField {...props} ref={ref} />;
+});
 
 export default TextField;
diff --git a/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx b/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx
index e614624c..73348807 100644
--- a/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx
+++ b/src/base/ToggleButtonGroup/ToggleButtonGroup.tsx
@@ -2,9 +2,12 @@ import {
   ToggleButtonGroup as MuiToggleButtonGroup,
   type ToggleButtonGroupProps as MuiToggleButtonGroupProps
 } from '@mui/material';
+import React from 'react';
 
-export function ToggleButtonGroup(props: MuiToggleButtonGroupProps): JSX.Element {
-  return <MuiToggleButtonGroup {...props} />;
-}
+const ToggleButtonGroup = React.forwardRef<HTMLDivElement, MuiToggleButtonGroupProps>(
+  (props, ref) => {
+    return <MuiToggleButtonGroup {...props} ref={ref} />;
+  }
+);
 
 export default ToggleButtonGroup;
diff --git a/src/base/Toolbar/Toolbar.tsx b/src/base/Toolbar/Toolbar.tsx
index 98b2fd35..390d8ecc 100644
--- a/src/base/Toolbar/Toolbar.tsx
+++ b/src/base/Toolbar/Toolbar.tsx
@@ -1,7 +1,8 @@
 import { Toolbar as MuiToolbar, type ToolbarProps as MuiToolbarProps } from '@mui/material';
+import React from 'react';
 
-export function Toolbar(props: MuiToolbarProps): JSX.Element {
-  return <MuiToolbar {...props} />;
-}
+const Toolbar = React.forwardRef<HTMLDivElement, MuiToolbarProps>((props, ref) => {
+  return <MuiToolbar {...props} ref={ref} />;
+});
 
 export default Toolbar;
diff --git a/src/base/Typography/Typography.tsx b/src/base/Typography/Typography.tsx
index a0b08d7c..70ea9782 100644
--- a/src/base/Typography/Typography.tsx
+++ b/src/base/Typography/Typography.tsx
@@ -2,9 +2,10 @@ import {
   Typography as MuiTypography,
   type TypographyProps as MuiTypographyProps
 } from '@mui/material';
+import React from 'react';
 
-export function Typography(props: MuiTypographyProps): JSX.Element {
-  return <MuiTypography {...props} />;
-}
+const Typography = React.forwardRef<HTMLDivElement, MuiTypographyProps>((props, ref) => {
+  return <MuiTypography {...props} ref={ref} />;
+});
 
 export default Typography;