@applica-software-guru/react-admin 1.0.41 → 1.0.43

package/dist/themes/overrides/OutlinedInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/OutlinedInput.jsx"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BC"}
+{"version":3,"file":"OutlinedInput.d.ts","sourceRoot":"","sources":["../../../../src/themes/overrides/OutlinedInput.jsx"],"names":[],"mappings":"AAsBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BC"}

package/dist/themes/palette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/themes/palette.jsx"],"names":[],"mappings":";AAWA,4FAgEC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../../src/themes/palette.jsx"],"names":[],"mappings":";AAWA,4FAoDC"}

package/dist/themes/theme/theme1.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme1.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme1.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme1.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme1.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme2.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme2.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme2.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme2.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme3.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme3.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme3.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme3.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme3.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme4.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme4.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme4.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme4.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme4.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme5.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme5.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme5.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme5.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme5.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme6.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme6.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme6.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme6.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme6.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme7.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme7.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme7.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme7.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme7.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/themes/theme/theme8.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme8.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme8.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2HC"}
+{"version":3,"file":"theme8.d.ts","sourceRoot":"","sources":["../../../../src/themes/theme/theme8.jsx"],"names":[],"mappings":";AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqGC"}

package/dist/utils/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./time";
-export * from "./lang";
+export * from './time';
+export * from './lang';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.js"],"names":[],"mappings":""}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/dist/utils/lang.d.ts

@@ -1,2 +1,2 @@
-export function uuid(): string;
+export declare function uuid(): string;
 //# sourceMappingURL=lang.d.ts.map

package/dist/utils/lang.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../../src/utils/lang.js"],"names":[],"mappings":"AAAA,+BAWC"}
+{"version":3,"file":"lang.d.ts","sourceRoot":"","sources":["../../../src/utils/lang.ts"],"names":[],"mappings":"AAAA,wBAAgB,IAAI,IAAI,MAAM,CAW7B"}

package/dist/utils/time.d.ts

@@ -1,3 +1,4 @@
-export function parseTime(time: any): dayjs.Dayjs;
 import dayjs from 'dayjs';
+declare const parseTime: (time: string) => dayjs.Dayjs;
+export { parseTime };
 //# sourceMappingURL=time.d.ts.map

package/dist/utils/time.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/utils/time.js"],"names":[],"mappings":"AAEA,kDAQC;kBAViB,OAAO"}
+{"version":3,"file":"time.d.ts","sourceRoot":"","sources":["../../../src/utils/time.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,QAAA,MAAM,SAAS,SAAU,MAAM,gBAS9B,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.41",
+  "version": "1.0.43",
   "private": false,
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "preview": "vite preview",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
-    "format": "prettier --write src//**/*.js --config ./.prettierrc",
+    "format": "prettier --write 'src//**/*.{js,jsx,ts,tsx}' --config ./.prettierrc",
     "test": "vitest",
     "clear": "rm -rf node_modules && rm -rf playground/node_modules && rm package-lock.json && rm playground/package-lock.json",
     "setup": "npm install && cd playground && npm i && husky install",

package/src/Admin.jsx

@@ -1,6 +1,6 @@
-import { AdminUI, localStorageStore } from 'react-admin'
+import { AdminUI, localStorageStore } from 'react-admin';
 
-import AdminContext from './AdminContext'
+import AdminContext from './AdminContext';
 
 const Admin = (props) => {
   const {
@@ -24,7 +24,7 @@ const Admin = (props) => {
     ready,
     theme,
     title = 'React Admin'
-  } = props
+  } = props;
   return (
     <AdminContext
       authProvider={authProvider}
@@ -52,16 +52,16 @@ const Admin = (props) => {
         {children}
       </AdminUI>
     </AdminContext>
-  )
-}
+  );
+};
 
 Admin.defaultProps = {
   store: localStorageStore(),
   title: 'Applica Admin'
-}
+};
 
 Admin.propTypes = {
   ...AdminUI.propTypes
-}
+};
 
-export default Admin
+export default Admin;

package/src/AdminContext.jsx

@@ -1,7 +1,7 @@
-import { CoreAdminContext } from 'react-admin'
-import PropTypes from 'prop-types'
-import { ScrollTop } from './components'
-import { ThemeCustomization } from './themes'
+import { CoreAdminContext } from 'react-admin';
+import PropTypes from 'prop-types';
+import { ScrollTop } from './components';
+import { ThemeCustomization } from './themes';
 
 const AdminContext = ({ children, theme, ...props }) => (
   <CoreAdminContext {...props}>
@@ -9,16 +9,16 @@ const AdminContext = ({ children, theme, ...props }) => (
       <ScrollTop>{children}</ScrollTop>
     </ThemeCustomization>
   </CoreAdminContext>
-)
+);
 
-AdminContext.displayName = 'ApplicaAdminContext'
+AdminContext.displayName = 'ApplicaAdminContext';
 AdminContext.defaultProps = {
   ...CoreAdminContext.defaultProps
-}
+};
 AdminContext.propTypes = {
   ...CoreAdminContext.propTypes,
   children: PropTypes.node.isRequired,
   theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func])
-}
+};
 
-export default AdminContext
+export default AdminContext;

package/src/ApplicaAdmin.jsx

@@ -1,17 +1,12 @@
-import {
-  AppConfigProvider,
-  MenuConfigProvider,
-  MenuPropTypes,
-  ThemeConfigProvider
-} from './contexts'
-import { CatchResult, useCliErrorCatcher } from './dev'
-import { Layout, MainIcon, Notification, SmallIcon } from './components'
-import { createI18nProvider, useI18nCatcher, useI18nLanguages } from './i18n'
+import { AppConfigProvider, MenuConfigProvider, MenuPropTypes, ThemeConfigProvider } from './contexts';
+import { CatchResult, useCliErrorCatcher } from './dev';
+import { Layout, MainIcon, Notification, SmallIcon } from './components';
+import { createI18nProvider, useI18nCatcher, useI18nLanguages } from './i18n';
 
-import Admin from './Admin'
-import PropTypes from 'prop-types'
-import { QueryClient } from 'react-query'
-import { useMemo } from 'react'
+import Admin from './Admin';
+import PropTypes from 'prop-types';
+import { QueryClient } from 'react-query';
+import { useMemo } from 'react';
 
 const languageResponseMapper = (response) =>
   response.reduce(
@@ -23,13 +18,13 @@ const languageResponseMapper = (response) =>
       }
     }),
     {}
-  )
+  );
 
 const i18nBodyRequestMapper = (locale, message) => ({
   lang: locale,
   code: message,
   text: message
-})
+});
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -37,7 +32,7 @@ const queryClient = new QueryClient({
       refetchOnWindowFocus: false
     }
   }
-})
+});
 
 const ApplicaAdmin = ({
   theme,
@@ -59,7 +54,7 @@ const ApplicaAdmin = ({
     apiUrl,
     endpoint: '/i18n/messages',
     mapper: languageResponseMapper
-  })
+  });
 
   useI18nCatcher({
     bodyBuilder: i18nBodyRequestMapper,
@@ -67,34 +62,34 @@ const ApplicaAdmin = ({
     endpoint: '/i18n/message',
     loading: languages?.loading,
     enabled: development
-  })
+  });
   useCliErrorCatcher({
     apiUrl,
     endpoint: '/cli/error',
     catcherFn: (error) => {
-      var errorMessage = error?.toString()
+      var errorMessage = error?.toString();
       var knownErrors = [
         // @see https://github.com/marmelab/react-admin/pull/8884
         'Invalid prop `file` of type `string` supplied to `FileInputPreview`, expected `object`.',
         'Failed prop type: Invalid prop `checked` of type `string` supplied to `ForwardRef(Switch)`, expected `boolean`.',
         'Failed prop type: Invalid prop `checked` of type `string` supplied to `ForwardRef(SwitchBase)`, expected `boolean`.',
         'validateDOMNesting(...): <form> cannot appear as a descendant of <form>.'
-      ]
-      const isKnowBug = knownErrors.some((knownError) => errorMessage?.includes(knownError))
+      ];
+      const isKnowBug = knownErrors.some((knownError) => errorMessage?.includes(knownError));
       const result = new CatchResult({
         catch: isKnowBug,
         display: !isKnowBug,
         log: !isKnowBug,
         error
-      })
-      return result
+      });
+      return result;
     }
-  })
+  });
 
   const layout = useMemo(
     () => (props) => {
-      const _logoMain = name ? <MainIcon title={name} /> : logoMain
-      const _logoIcon = name ? <SmallIcon title={name} /> : logoIcon
+      const _logoMain = name ? <MainIcon title={name} /> : logoMain;
+      const _logoIcon = name ? <SmallIcon title={name} /> : logoIcon;
       return (
         <Layout
           {...props}
@@ -105,20 +100,20 @@ const ApplicaAdmin = ({
           notification={notification}
           disableNotification={disableNotification}
         />
-      )
+      );
     },
     [logoMain, logoIcon, name, version, notification, disableNotification]
-  )
+  );
 
   if (languages?.loading) {
-    return null
+    return null;
   }
 
   const i18nProivder = createI18nProvider({
     languages,
     defaultLocale,
     allowMissing: development
-  })
+  });
   return (
     <AppConfigProvider>
       <MenuConfigProvider menu={menu}>
@@ -136,8 +131,8 @@ const ApplicaAdmin = ({
         </ThemeConfigProvider>
       </MenuConfigProvider>
     </AppConfigProvider>
-  )
-}
+  );
+};
 
 ApplicaAdmin.defaultProps = {
   ...Admin.defaultProps,
@@ -147,7 +142,7 @@ ApplicaAdmin.defaultProps = {
   version: '0.0.0',
   notification: 'entities/notification',
   disableNotification: false
-}
+};
 
 ApplicaAdmin.propTypes = {
   ...Admin.propTypes,
@@ -205,6 +200,6 @@ ApplicaAdmin.propTypes = {
    * Indica se le notifiche devono essere disabilitate.
    */
   disableNotification: PropTypes.bool
-}
+};
 
-export default ApplicaAdmin
+export default ApplicaAdmin;

package/src/components/@extended/AnimateButton.jsx

@@ -1,7 +1,7 @@
-import PropTypes from 'prop-types'
+import PropTypes from 'prop-types';
 
 // third-party
-import { motion, useCycle } from 'framer-motion'
+import { motion, useCycle } from 'framer-motion';
 
 // ==============================|| ANIMATION BUTTON ||============================== //
 
@@ -12,27 +12,27 @@ export default function AnimateButton({
   offset = 10,
   scale = {
     hover: 1.05,
-    tap: 0.95,
-  },
+    tap: 0.95
+  }
 }) {
-  let offset1
-  let offset2
+  let offset1;
+  let offset2;
   switch (direction) {
     case 'up':
     case 'left':
-      offset1 = offset
-      offset2 = 0
-      break
+      offset1 = offset;
+      offset2 = 0;
+      break;
     case 'right':
     case 'down':
     default:
-      offset1 = 0
-      offset2 = offset
-      break
+      offset1 = 0;
+      offset2 = offset;
+      break;
   }
 
-  const [x, cycleX] = useCycle(offset1, offset2)
-  const [y, cycleY] = useCycle(offset1, offset2)
+  const [x, cycleX] = useCycle(offset1, offset2);
+  const [y, cycleY] = useCycle(offset1, offset2);
 
   switch (type) {
     case 'rotate':
@@ -43,47 +43,39 @@ export default function AnimateButton({
             repeat: Infinity,
             repeatType: 'loop',
             duration: 2,
-            repeatDelay: 0,
+            repeatDelay: 0
           }}
         >
           {children}
         </motion.div>
-      )
+      );
     case 'slide':
       if (direction === 'up' || direction === 'down') {
         return (
-          <motion.div
-            animate={{ y: y !== undefined ? y : '' }}
-            onHoverEnd={() => cycleY()}
-            onHoverStart={() => cycleY()}
-          >
+          <motion.div animate={{ y: y !== undefined ? y : '' }} onHoverEnd={() => cycleY()} onHoverStart={() => cycleY()}>
             {children}
           </motion.div>
-        )
+        );
       }
       return (
-        <motion.div
-          animate={{ x: x !== undefined ? x : '' }}
-          onHoverEnd={() => cycleX()}
-          onHoverStart={() => cycleX()}
-        >
+        <motion.div animate={{ x: x !== undefined ? x : '' }} onHoverEnd={() => cycleX()} onHoverStart={() => cycleX()}>
           {children}
         </motion.div>
-      )
+      );
 
     case 'scale':
     default:
       if (typeof scale === 'number') {
         scale = {
           hover: scale,
-          tap: scale,
-        }
+          tap: scale
+        };
       }
       return (
         <motion.div whileHover={{ scale: scale?.hover }} whileTap={{ scale: scale?.tap }}>
           {children}
         </motion.div>
-      )
+      );
   }
 }
 
@@ -92,5 +84,5 @@ AnimateButton.propTypes = {
   offset: PropTypes.number,
   type: PropTypes.oneOf(['slide', 'scale', 'rotate']),
   direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
-  scale: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
-}
+  scale: PropTypes.oneOfType([PropTypes.number, PropTypes.object])
+};

package/src/components/@extended/Avatar.jsx

@@ -1,42 +1,42 @@
 // material-ui
-import { styled, useTheme } from '@mui/material/styles'
+import { styled, useTheme } from '@mui/material/styles';
 
-import MuiAvatar from '@mui/material/Avatar'
-import PropTypes from 'prop-types'
+import MuiAvatar from '@mui/material/Avatar';
+import PropTypes from 'prop-types';
 // project import
-import getColors from '../../themes/getColors'
+import getColors from '../../themes/getColors';
 
 // ==============================|| AVATAR - COLOR STYLE ||============================== //
 
 function getColorStyle({ theme, color, type }) {
-  const colors = getColors(theme, color)
-  const { lighter, light, main, contrastText } = colors
+  const colors = getColors(theme, color);
+  const { lighter, light, main, contrastText } = colors;
 
   switch (type) {
     case 'filled':
       return {
         color: contrastText,
-        backgroundColor: main,
-      }
+        backgroundColor: main
+      };
     case 'outlined':
       return {
         color: main,
         border: '1px solid',
         borderColor: main,
-        backgroundColor: 'transparent',
-      }
+        backgroundColor: 'transparent'
+      };
     case 'combined':
       return {
         color: main,
         border: '1px solid',
         borderColor: light,
-        backgroundColor: lighter,
-      }
+        backgroundColor: lighter
+      };
     default:
       return {
         color: main,
-        backgroundColor: lighter,
-      }
+        backgroundColor: lighter
+      };
   }
 }
 
@@ -49,71 +49,64 @@ function getSizeStyle(size) {
         border: '2px solid',
         fontSize: '0.675rem',
         width: 20,
-        height: 20,
-      }
+        height: 20
+      };
     case 'xs':
       return {
         fontSize: '0.75rem',
         width: 24,
-        height: 24,
-      }
+        height: 24
+      };
     case 'sm':
       return {
         fontSize: '0.875rem',
         width: 32,
-        height: 32,
-      }
+        height: 32
+      };
     case 'lg':
       return {
         fontSize: '1.2rem',
         width: 52,
-        height: 52,
-      }
+        height: 52
+      };
     case 'xl':
       return {
         fontSize: '1.5rem',
         width: 64,
-        height: 64,
-      }
+        height: 64
+      };
     case 'md':
     default:
       return {
         fontSize: '1rem',
         width: 40,
-        height: 40,
-      }
+        height: 40
+      };
   }
 }
 
 // ==============================|| STYLED - AVATAR ||============================== //
 
 const AvatarStyle = styled(MuiAvatar, {
-  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'type' && prop !== 'size',
+  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'type' && prop !== 'size'
 })(({ theme, variant, color, type, size }) => ({
   ...getSizeStyle(size),
   ...getColorStyle({ variant, theme, color, type }),
   ...(size === 'badge' && {
-    borderColor: theme.palette.background.default,
-  }),
-}))
+    borderColor: theme.palette.background.default
+  })
+}));
 
 // ==============================|| EXTENDED - AVATAR ||============================== //
 
-export default function Avatar({
-  variant = 'circular',
-  children,
-  color = 'primary',
-  type,
-  size = 'md',
-  ...others
-}) {
-  const theme = useTheme()
+export default function Avatar({ variant = 'circular', children, color = 'primary', type, size = 'md', ...others }) {
+  const theme = useTheme();
 
   return (
     <AvatarStyle variant={variant} theme={theme} color={color} type={type} size={size} {...others}>
       {children}
     </AvatarStyle>
-  )
+  );
 }
 
 Avatar.propTypes = {
@@ -121,5 +114,5 @@ Avatar.propTypes = {
   color: PropTypes.string,
   type: PropTypes.string,
   size: PropTypes.string,
-  variant: PropTypes.string,
-}
+  variant: PropTypes.string
+};