feat: add Hidden component and refactor IconButton for better ref handling

Signed-off-by: amitamrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/base/Hidden/Hidden.tsx

@@ -0,0 +1,8 @@
+import { Hidden as MuiHidden, HiddenProps as MuiHiddenProps } from '@mui/material';
+import React from 'react';
+
+export const Hidden = React.forwardRef<HTMLDivElement, MuiHiddenProps>((props, ref) => {
+  return React.cloneElement(<MuiHidden {...props} />, { ref });
+});
+
+export default Hidden;

src/base/Hidden/index.ts

@@ -0,0 +1 @@
+export { Hidden } from './Hidden';

src/base/IconButton/IconButton.tsx

@@ -1,5 +1,15 @@
-import { IconButton as MuiIconButton, type IconButtonProps } from '@mui/material';
+import {
+  IconButton as MuiIconButton,
+  type IconButtonProps as MuiIconButtonProps
+} from '@mui/material';
+import React from 'react';
 
-export function IconButton(props: IconButtonProps): JSX.Element {
-  return <MuiIconButton {...props} />;
-}
+export type IconButtonProps = MuiIconButtonProps;
+
+export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => (
+  <MuiIconButton ref={ref} {...props} />
+));
+
+IconButton.displayName = 'IconButton';
+
+export default IconButton;