@applica-software-guru/react-admin 1.4.226 → 1.5.228

package/src/components/@extended/index.ts

@@ -0,0 +1,9 @@
+export * from './AnimateButton';
+export * from './Avatar';
+export * from './Breadcrumbs';
+export * from './Dot';
+export * from './IconButton';
+export * from './LoadingButton';
+export * from './Tooltip';
+export * from './Transitions';
+export * from './progress';

package/src/components/@extended/progress/{CircularWithLabel.jsx → CircularWithLabel.tsx}

@@ -1,11 +1,10 @@
-import PropTypes from 'prop-types';
-
-// material-ui
 import { Box, CircularProgress, Typography } from '@mui/material';
 
-// ==============================|| PROGRESS - CIRCULAR LABEL ||============================== //
+type CircularWithLabelProps = {
+  value: number;
+};
 
-export default function CircularWithLabel({ value, ...others }) {
+function CircularWithLabel({ value, ...others }: CircularWithLabelProps) {
   return (
     <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress variant="determinate" value={value} {...others} />
@@ -26,7 +25,5 @@ export default function CircularWithLabel({ value, ...others }) {
     </Box>
   );
 }
-
-CircularWithLabel.propTypes = {
-  value: PropTypes.number
-};
+export { CircularWithLabel };
+export type { CircularWithLabelProps };

package/src/components/@extended/progress/{CircularWithPath.jsx → CircularWithPath.tsx}

@@ -1,11 +1,26 @@
-import PropTypes from 'prop-types';
-
-// material-ui
 import { Box, CircularProgress, Typography, circularProgressClasses } from '@mui/material';
 
-// ==============================|| PROGRESS - CIRCULAR PATH ||============================== //
+type CircularWithPathProps = {
+  value: number;
+  size: number;
+  variant: 'determinate' | 'indeterminate';
+  thickness: number;
+  showLabel: boolean;
+  pathColor: string;
+  sx: any;
+  others: any;
+};
 
-export default function CircularWithPath({ value, size, variant, thickness, showLabel, pathColor, sx, ...others }) {
+function CircularWithPath({
+  value,
+  size,
+  variant,
+  thickness,
+  showLabel,
+  pathColor,
+  sx,
+  ...others
+}: CircularWithPathProps) {
   return (
     <Box sx={{ position: 'relative', display: 'inline-flex' }}>
       <CircularProgress
@@ -16,7 +31,7 @@ export default function CircularWithPath({ value, size, variant, thickness, show
         {...others}
         value={100}
       />
-      {showLabel && (
+      {showLabel ? (
         <Box
           sx={{
             top: 0,
@@ -33,7 +48,7 @@ export default function CircularWithPath({ value, size, variant, thickness, show
             {value ? `${Math.round(value)}%` : '0%'}
           </Typography>
         </Box>
-      )}
+      ) : null}
       <CircularProgress
         variant={variant}
         sx={{
@@ -53,13 +68,5 @@ export default function CircularWithPath({ value, size, variant, thickness, show
   );
 }
 
-CircularWithPath.propTypes = {
-  value: PropTypes.number,
-  size: PropTypes.number,
-  variant: PropTypes.string,
-  thickness: PropTypes.number,
-  showLabel: PropTypes.bool,
-  pathColor: PropTypes.string,
-  sx: PropTypes.array,
-  others: PropTypes.array
-};
+export { CircularWithPath };
+export type { CircularWithPathProps };

package/src/components/@extended/progress/{LinearWithIcon.jsx → LinearWithIcon.tsx}

@@ -1,11 +1,11 @@
-import PropTypes from 'prop-types';
-
-// material-ui
 import { Box, LinearProgress } from '@mui/material';
 
-// ==============================|| PROGRESS - LINEAR ICON ||============================== //
+type LinearWithIconProps = {
+  icon: any;
+  value: number;
+};
 
-export default function LinearWithIcon({ icon, value, ...others }) {
+function LinearWithIcon({ icon, value, ...others }: LinearWithIconProps) {
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <Box sx={{ width: '100%', mr: 1 }}>
@@ -16,7 +16,5 @@ export default function LinearWithIcon({ icon, value, ...others }) {
   );
 }
 
-LinearWithIcon.propTypes = {
-  icon: PropTypes.node,
-  value: PropTypes.number
-};
+export { LinearWithIcon };
+export type { LinearWithIconProps };

package/src/components/@extended/progress/{LinearWithLabel.jsx → LinearWithLabel.tsx}

@@ -1,11 +1,9 @@
-import PropTypes from 'prop-types';
-
-// material-ui
 import { Box, LinearProgress, Typography } from '@mui/material';
 
-// ==============================|| PROGRESS - LINEAR WITH LABEL ||============================== //
-
-export default function LinearWithLabel({ value, ...others }) {
+type LinearWithLabelProps = {
+  value: number;
+};
+function LinearWithLabel({ value, ...others }: LinearWithLabelProps) {
   return (
     <Box sx={{ display: 'flex', alignItems: 'center' }}>
       <Box sx={{ width: '100%', mr: 1 }}>
@@ -18,6 +16,5 @@ export default function LinearWithLabel({ value, ...others }) {
   );
 }
 
-LinearWithLabel.propTypes = {
-  value: PropTypes.number
-};
+export { LinearWithLabel };
+export type { LinearWithLabelProps };

package/src/components/@extended/progress/index.ts

@@ -0,0 +1,4 @@
+export * from './CircularWithLabel';
+export * from './CircularWithPath';
+export * from './LinearWithIcon';
+export * from './LinearWithLabel';

package/src/components/ActionsMenu.tsx

@@ -1,12 +1,14 @@
-import { IconButton, MenuItem, styled } from '@mui/material';
+import { MenuPopover } from '@/components/MenuPopover';
 import { MoreHoriz, MoreVert } from '@mui/icons-material';
-import MenuPopover from './MenuPopover/MenuPopover';
+import { IconButton, MenuItem, styled } from '@mui/material';
 import React, { Children, useCallback, useState } from 'react';
 
+const BUTTON_STYLES = { width: '100%', justifyContent: 'flex-start' };
+
 const StyledRoot = styled('div', {
   shouldForwardProp: (prop) => prop !== 'color' && prop !== 'variant' && prop !== 'sx',
   slot: 'root',
-  overridesResolver: (props, styles) => [styles.root]
+  overridesResolver: (_, styles) => [styles.root]
 })(() => ({
   textAlign: 'right'
 }));
@@ -23,7 +25,7 @@ const StyledMenuPopover = styled(MenuPopover, {
   }
 }));
 
-export type ActionsMenuProps = {
+type ActionsMenuProps = {
   children: React.ReactNode;
   horizontal?: boolean;
 };
@@ -38,22 +40,28 @@ export type ActionsMenuProps = {
  *  <EditButton />
  * </ActionsMenu>
  */
-export function ActionsMenu({ horizontal = false, children }: ActionsMenuProps): React.ReactElement | null {
+function ActionsMenu({ horizontal = false, children }: ActionsMenuProps): React.ReactElement | null {
   const [open, setOpen] = useState(null);
   const actionRef = React.useRef(null);
 
-  const handleClick = (e: any) => {
+  function handleClick(e: any): void {
     e.stopPropagation();
     e.preventDefault();
     setOpen(e.currentTarget);
     actionRef.current = e.currentTarget;
-  };
+  }
   const handleClose = useCallback((e: any) => {
     e.stopPropagation();
     e.preventDefault();
     setOpen(null);
   }, []);
+  const handleOnClick = useCallback((e: any) => {
+    setOpen(null);
 
+    if (typeof e.currentTarget?.onClick === 'function') {
+      e.currentTarget.onClick(e);
+    }
+  }, []);
   if (
     !children ||
     React.Children.count(children) === 0 ||
@@ -63,34 +71,29 @@ export function ActionsMenu({ horizontal = false, children }: ActionsMenuProps):
     return null;
   }
 
-  const handleOnClick = useCallback((e: any) => {
-    setOpen(null);
-
-    if (typeof e.currentTarget?.onClick === 'function') {
-      e.currentTarget.onClick(e);
-    }
-  }, []);
-
-  const btnAdditionalStyles = { width: '100%', justifyContent: 'flex-start' };
-
   return (
     <StyledRoot>
       <IconButton aria-label="more" aria-haspopup="true" onClick={handleClick} color={open ? 'inherit' : 'default'}>
         {horizontal ? <MoreHoriz /> : <MoreVert />}
       </IconButton>
+      {/* @ts-ignore */}
       <StyledMenuPopover open={open} onClose={handleClose} arrow="right-top">
         {Children.map(
           children,
-          (action, index) => React.isValidElement(action) && <MenuItem onClick={handleOnClick} key={index}>
-            {React.cloneElement(action,
-              { // @ts-ignore
-                style: { ...btnAdditionalStyles }
-              })}
-          </MenuItem>
+          (action, index) =>
+            React.isValidElement(action) && (
+              <MenuItem onClick={handleOnClick} key={index}>
+                {React.cloneElement(action, {
+                  // @ts-ignore
+                  style: { ...BUTTON_STYLES }
+                })}
+              </MenuItem>
+            )
         )}
       </StyledMenuPopover>
     </StyledRoot>
   );
 }
 
-export default ActionsMenu;
+export { ActionsMenu };
+export type { ActionsMenuProps };

package/src/components/AppStateProvider.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, useState } from 'react';
+
+type AppState = {
+  openDialogs: string[];
+  getCurrentDialog: () => string | null;
+  openDialog: (id: string, callback: () => void) => void;
+  closeDialog: (id: string, callback: () => void) => void;
+};
+
+const initialState: AppState = {
+  /**
+   * This context is necessary to work with react-admin standard forms when executed
+   * inside a dialog and deeper in another resource handled inside a primary form.
+   *
+   * In this case, when using "EditInDialogButton" or "CreateInDialogButton" components,
+   * the dialog is opened and the form is rendered inside it. If the form has a subform
+   * and needs to know the associated resource.
+   */
+  openDialogs: [],
+  getCurrentDialog: () => null,
+  openDialog: (id: string, callback: () => void): void => {
+    throw new Error(`openDialog not yet ready for: ${id}, ${callback}`);
+  },
+  closeDialog: (id: string, callback: () => void): void => {
+    throw new Error(`closeDialog not yet ready for: ${id}, ${callback}`);
+  }
+};
+
+const AppStateContext = createContext<AppState>(initialState);
+
+function AppStateProvider({ children }: { children: React.ReactNode }) {
+  const [config, setConfig] = useState<AppState>(initialState);
+  function openDialog(id: string, callback: () => void) {
+    setConfig((config: AppState) => ({ ...config, openDialogs: [...config.openDialogs, id] }));
+    if (callback) callback();
+  }
+  function closeDialog(id: string, callback: () => void) {
+    setConfig((config: AppState) => ({
+      ...config,
+      openDialogs: config.openDialogs.filter((modalId) => modalId !== id)
+    }));
+    if (callback) callback();
+  }
+
+  function getCurrentDialog(): string | null {
+    return config.openDialogs.length > 0 ? config.openDialogs[config.openDialogs.length - 1] : null;
+  }
+
+  return (
+    <AppStateContext.Provider
+      value={{
+        ...config,
+        openDialog,
+        closeDialog,
+        getCurrentDialog
+      }}
+    >
+      {children}
+    </AppStateContext.Provider>
+  );
+}
+
+function useAppState(): AppState {
+  const context = useContext(AppStateContext);
+  if (context === undefined) {
+    throw new Error('useAppState must be used within an AppStateProvider');
+  }
+  return context;
+}
+/**
+ * Hook to get the current application configuration.
+ * This is an alias for useAppState.
+ */
+function useAppConfig(): AppState {
+  const appState = useAppState();
+  return appState;
+}
+
+export type { AppState };
+export { AppStateContext, AppStateProvider, useAppConfig, useAppState };

package/src/components/AuthBackground.tsx

@@ -1,13 +1,19 @@
-import { Box } from '@mui/material';
 import { useTheme } from '@emotion/react';
+import { Box } from '@mui/material';
 
-export function AuthBackground(): JSX.Element {
+function AuthBackground(): JSX.Element {
   const theme = useTheme() as any;
   const isDark = theme.palette.mode === 'dark';
   const color = isDark ? theme.palette.primary.dark : theme.palette.primary.light;
   return (
     <Box sx={{ position: 'absolute', filter: 'blur(20px)', bottom: 0, p: 4, pb: 8 }}>
-      <svg width="100%" height="calc(100vh - 175px)" viewBox="0 0 117 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="100%"
+        height="calc(100vh - 175px)"
+        viewBox="0 0 117 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M15.7523 21.9601L14.0526 17.2379H4.6534L2.95369 21.9601H0L7.78722 0.903564H10.9187L18.706 21.9601H15.7523ZM5.60948 14.6207H13.0988L9.33912 4.24262L5.60948 14.6207Z"
           fill={color}
@@ -98,4 +104,4 @@ export function AuthBackground(): JSX.Element {
   );
 }
 
-export default AuthBackground;
+export { AuthBackground };

package/src/components/{AuthCard.jsx → AuthCard.tsx}

@@ -1,9 +1,11 @@
+import { MainCard } from '@/components/MainCard';
 import { Box } from '@mui/material';
-import MainCard from './MainCard';
-import PropTypes from 'prop-types';
 import { useTheme } from '@mui/material/styles';
 
-const AuthCard = ({ children, ...other }) => {
+type AuthCardProps = {
+  children: React.ReactNode;
+};
+function AuthCard({ children, ...other }: AuthCardProps) {
   const theme = useTheme();
   return (
     <MainCard
@@ -19,15 +21,13 @@ const AuthCard = ({ children, ...other }) => {
       {...other}
       border={false}
       boxShadow
+      // @ts-ignore
       shadow={theme.customShadows.z1}
     >
       <Box sx={{ p: { xs: 2, sm: 3, md: 4, xl: 5 } }}>{children}</Box>
     </MainCard>
   );
-};
-
-AuthCard.propTypes = {
-  children: PropTypes.node
-};
+}
 
-export default AuthCard;
+export { AuthCard };
+export type { AuthCardProps };

package/src/components/AuthWrapper.tsx

@@ -1,13 +1,11 @@
+import { AuthBackground } from '@/components/AuthBackground';
+import { AuthCard } from '@/components/AuthCard';
+import { Footer } from '@/components/Layout/Footer';
+import { MainIcon } from '@/components/MainIcon';
 import { Box, Grid } from '@mui/material';
-
-import AuthBackground from './AuthBackground';
-import AuthCard from './AuthCard';
-import { Footer } from './Layout';
-import MainIcon from './MainIcon';
-import PropTypes from 'prop-types';
 import React from 'react';
 
-export type AuthWrapperProps = {
+type AuthWrapperProps = {
   version: string;
   name: string;
   copy?: string;
@@ -16,7 +14,7 @@ export type AuthWrapperProps = {
   logo?: React.ReactNode;
 };
 
-export function AuthWrapper({ version, name, copy, children, logo, background = AuthBackground }: AuthWrapperProps) {
+function AuthWrapper({ version, name, copy, children, logo, background = AuthBackground }: AuthWrapperProps) {
   return (
     <Box sx={{ minHeight: '100vh' }}>
       {React.isValidElement(background) ? background : React.createElement(background as any)}
@@ -52,12 +50,5 @@ export function AuthWrapper({ version, name, copy, children, logo, background =
     </Box>
   );
 }
-AuthWrapper.propTypes = {
-  children: PropTypes.node,
-  version: PropTypes.string,
-  name: PropTypes.string,
-  copy: PropTypes.string,
-  background: PropTypes.oneOfType([PropTypes.node, PropTypes.func, PropTypes.object])
-};
 
-export default AuthWrapper;
+export { AuthWrapper };

package/src/components/Layout/Content.tsx

@@ -1,36 +1,43 @@
-import { Box, Container, Toolbar } from '@mui/material';
+import { Error, ErrorProps } from './Error';
 import { useLayoutDrawerState, useLayoutMediaState } from './Provider';
-import { useThemeConfig } from '../../hooks';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { Box, Container, Toolbar } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { Loading } from 'ra-ui-materialui';
 import { ErrorInfo, Suspense, useState } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
-import Error, { ErrorProps } from './Error';
-import { useTheme } from '@mui/material/styles';
 
 type ILayoutContentProps = React.PropsWithChildren & {
   error?: React.ComponentType<ErrorProps>;
 };
 
 function LayoutContent(props: ILayoutContentProps) {
-  const { width } = useLayoutDrawerState(),
-    { horizontal } = useLayoutMediaState(),
-    { container } = useThemeConfig();
-  // @ts-ignore
-  const [errorInfo, setErrorInfo] = useState<ErrorInfo>(null);
-  const handleError = (error: Error, info: ErrorInfo) => {
+  const { width } = useLayoutDrawerState();
+  const { horizontal } = useLayoutMediaState();
+  const { container } = useThemeConfig();
+  const [errorInfo, setErrorInfo] = useState<ErrorInfo | null>(null);
+  function handleError(_: Error, info: ErrorInfo) {
     setErrorInfo(info);
-  };
+  }
   const theme = useTheme();
 
   return (
     <ErrorBoundary
       onError={handleError}
       fallbackRender={({ error, resetErrorBoundary }) => (
-        <Error error={error} errorComponent={props.error} errorInfo={errorInfo} resetErrorBoundary={resetErrorBoundary} />
+        <Error
+          error={error}
+          errorComponent={props.error}
+          errorInfo={errorInfo!}
+          resetErrorBoundary={resetErrorBoundary}
+        />
       )}
     >
       <Suspense fallback={<Loading />}>
-        <Box component="main" sx={{ width: `calc(100% - ${width}px)`, flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}>
+        <Box
+          component="main"
+          sx={{ width: `calc(100% - ${width}px)`, flexGrow: 1, p: { xs: 0, sm: 2, lg: 1 }, pt: { lg: 2 } }}
+        >
           <Toolbar sx={{ mt: horizontal ? 8 : 'inherit' }} /> {/*Hugh...*/}
           <Container
             maxWidth={container ? 'xl' : false}
@@ -41,7 +48,7 @@ function LayoutContent(props: ILayoutContentProps) {
               display: 'flex',
               flexDirection: 'column',
               [theme.breakpoints.down('sm')]: {
-                px: '12px',
+                px: '12px'
               }
             }}
           >

package/src/components/Layout/Drawer/Drawer.tsx

@@ -1,43 +1,43 @@
-import { useMemo } from 'react';
-import { Box, Drawer as MUIDrawer, SxProps, useTheme } from '@mui/material';
-import { useSx } from '../../../hooks';
-import { useLayoutDrawerState, useLayoutMediaState } from '../Provider';
-import MiniDrawerStyled from './MiniDrawerStyled';
 import { DrawerHeader } from './DrawerHeader';
-import { SimpleBar } from '../../third-party';
+import { MiniDrawerStyled } from './MiniDrawerStyled';
+import { useLayoutDrawerState, useLayoutMediaState } from '@/components/Layout/Provider';
+import { SimpleBar } from '@/components/third-party';
+import { useSx } from '@/hooks';
+import { Box, Drawer as MUIDrawer, SxProps, useTheme } from '@mui/material';
+import { useMemo } from 'react';
 
 type IDrawerProps = React.PropsWithChildren<{
   sx?: SxProps;
 }>;
 
-export function Drawer(props: IDrawerProps): JSX.Element {
-  const theme = useTheme(),
-    sx = useSx(props, { flexShrink: { md: 0 }, zIndex: 1200 }),
-    { downLg } = useLayoutMediaState(),
-    { open, handleDrawerToggle, width } = useLayoutDrawerState(),
-    Component = !downLg ? MiniDrawerStyled : MUIDrawer,
-    container = document.body,
-    ComponentProps = useMemo(() => {
-      return !downLg
-        ? { variant: 'permanent' }
-        : {
-            container: container,
-            variant: 'temporary',
-            onClose: handleDrawerToggle,
-            ModalProps: { keepMounted: true },
-            sx: {
-              display: { xs: 'block', lg: 'none' },
-              '& .MuiDrawer-paper': {
-                boxSizing: 'border-box',
-                width: width,
-                borderRight: `1px solid ${theme.palette.divider}`,
-                backgroundImage: 'none',
-                boxShadow: 'inherit',
-                overflow: 'auto'
-              }
+function Drawer(props: IDrawerProps): JSX.Element {
+  const theme = useTheme();
+  const sx = useSx(props, { flexShrink: { md: 0 }, zIndex: 1200 });
+  const { downLg } = useLayoutMediaState();
+  const { open, handleDrawerToggle, width } = useLayoutDrawerState();
+  const Component = !downLg ? MiniDrawerStyled : MUIDrawer;
+  const container = document.body;
+  const ComponentProps = useMemo(() => {
+    return !downLg
+      ? { variant: 'permanent' }
+      : {
+          container: container,
+          variant: 'temporary',
+          onClose: handleDrawerToggle,
+          ModalProps: { keepMounted: true },
+          sx: {
+            display: { xs: 'block', lg: 'none' },
+            '& .MuiDrawer-paper': {
+              boxSizing: 'border-box',
+              width: width,
+              borderRight: `1px solid ${theme.palette.divider}`,
+              backgroundImage: 'none',
+              boxShadow: 'inherit',
+              overflow: 'auto'
             }
-          };
-    }, [downLg, container, handleDrawerToggle, width]);
+          }
+        };
+  }, [downLg, container, handleDrawerToggle, width, theme.palette.divider]);
 
   return (
     <Box component="nav" sx={sx} aria-label="mailbox folders">
@@ -58,4 +58,5 @@ export function Drawer(props: IDrawerProps): JSX.Element {
     </Box>
   );
 }
-export default Drawer;
+export { Drawer };
+export type { IDrawerProps };

package/src/components/Layout/Drawer/DrawerHeader.tsx

@@ -1,31 +1,32 @@
-import { SxProps, useTheme } from '@mui/material';
-import { useLayoutDrawerState, useLayoutLogoState, useLayoutMediaState } from '../Provider';
 import { DrawerHeaderStyled } from './DrawerHeaderStyled';
-import { useSx } from '../../../hooks';
-import Logo from '../../Logo';
+import { useLayoutDrawerState, useLayoutLogoState, useLayoutMediaState } from '@/components/Layout/Provider';
+import { Logo } from '@/components/Logo';
+import { useSx } from '@/hooks';
+import { SxProps, useTheme } from '@mui/material';
 
 type IDrawerHeaderType = React.PropsWithChildren<{
   sx?: SxProps;
 }>;
 
-export function DrawerHeader(props: IDrawerHeaderType): JSX.Element {
-  const theme = useTheme(),
-    { horizontal } = useLayoutMediaState(),
-    { open } = useLayoutDrawerState(),
-    { icon, main } = useLayoutLogoState(),
-    sx = useSx(props, {
-      minHeight: horizontal ? 'unset' : '60px',
-      width: horizontal ? { xs: '100%', lg: '424px' } : 'inherit',
-      paddingTop: horizontal ? { xs: '10px', lg: '0' } : '8px',
-      paddingBottom: horizontal ? { xs: '18px', lg: '0' } : '8px',
-      paddingLeft: horizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0
-    });
+function DrawerHeader(props: IDrawerHeaderType): JSX.Element {
+  const theme = useTheme();
+  const { horizontal } = useLayoutMediaState();
+  const { open } = useLayoutDrawerState();
+  const { icon, main } = useLayoutLogoState();
+  const sx = useSx(props, {
+    minHeight: horizontal ? 'unset' : '60px',
+    width: horizontal ? { xs: '100%', lg: '424px' } : 'inherit',
+    paddingTop: horizontal ? { xs: '10px', lg: '0' } : '8px',
+    paddingBottom: horizontal ? { xs: '18px', lg: '0' } : '8px',
+    paddingLeft: horizontal ? { xs: '24px', lg: '0' } : open ? '24px' : 0
+  });
   return (
     //@ts-ignore
     <DrawerHeaderStyled theme={theme} open={open} sx={sx}>
-      <Logo isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} logoMain={main} logoIcon={icon} />
+      <Logo to="/" isIcon={!open} sx={{ width: open ? 'auto' : 35, height: 35 }} logoMain={main} logoIcon={icon} />
     </DrawerHeaderStyled>
   );
 }
 
-export default DrawerHeader;
+export { DrawerHeader };
+export type { IDrawerHeaderType };