robobyte-front-builder 1.0.0

package/src/@core/theme/colorSchemes.js

@@ -0,0 +1,326 @@
+const colorSchemes = skin => {
+  return {
+    light: {
+      palette: {
+        primary: {
+          main: '#666CFF',
+          light: '#8589FF',
+          dark: '#035357',
+          lighterOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.38)'
+        },
+        secondary: {
+          main: '#6D788D',
+          light: '#8A93A4',
+          dark: '#626C7F',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.38)'
+        },
+        error: {
+          main: '#FF4D49',
+          light: '#FF716D',
+          dark: '#E64542',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.38)'
+        },
+        warning: {
+          main: '#FDB528',
+          light: '#FDC453',
+          dark: '#E4A324',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.38)'
+        },
+        info: {
+          main: '#26C6F9',
+          light: '#51D1FA',
+          dark: '#22B3E1',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.38)'
+        },
+        success: {
+          main: '#72E128',
+          light: '#8EE753',
+          dark: '#67CB24',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.38)'
+        },
+        text: {
+          primary: `rgb(var(--mui-mainColorChannels-light) / 0.9)`,
+          secondary: `rgb(var(--mui-mainColorChannels-light) / 0.7)`,
+          disabled: `rgb(var(--mui-mainColorChannels-light) / 0.4)`,
+          primaryChannel: 'var(--mui-mainColorChannels-light)',
+          secondaryChannel: 'var(--mui-mainColorChannels-light)'
+        },
+        divider: `rgb(var(--mui-mainColorChannels-light) / 0.12)`,
+        dividerChannel: 'var(--mui-mainColorChannels-light)',
+        background: {
+          default: skin === 'bordered' ? '#FFFFFF' : '#F7F7F9',
+          paper: '#FFFFFF',
+          paperChannel: '255 255 255'
+        },
+        action: {
+          active: `rgb(var(--mui-mainColorChannels-light) / 0.6)`,
+          hover: `rgb(var(--mui-mainColorChannels-light) / 0.06)`,
+          selected: `rgb(var(--mui-mainColorChannels-light) / 0.08)`,
+          disabled: `rgb(var(--mui-mainColorChannels-light) / 0.3)`,
+          disabledBackground: `rgb(var(--mui-mainColorChannels-light) / 0.16)`,
+          focus: `rgb(var(--mui-mainColorChannels-light) / 0.1)`,
+          focusOpacity: 0.1,
+          activeChannel: 'var(--mui-mainColorChannels-light)',
+          selectedChannel: 'var(--mui-mainColorChannels-light)'
+        },
+        Alert: {
+          errorColor: 'var(--mui-palette-error-main)',
+          warningColor: 'var(--mui-palette-warning-main)',
+          infoColor: 'var(--mui-palette-info-main)',
+          successColor: 'var(--mui-palette-success-main)',
+          errorStandardBg: 'var(--mui-palette-error-lightOpacity)',
+          warningStandardBg: 'var(--mui-palette-warning-lightOpacity)',
+          infoStandardBg: 'var(--mui-palette-info-lightOpacity)',
+          successStandardBg: 'var(--mui-palette-success-lightOpacity)',
+          errorFilledColor: 'var(--mui-palette-error-contrastText)',
+          warningFilledColor: 'var(--mui-palette-warning-contrastText)',
+          infoFilledColor: 'var(--mui-palette-info-contrastText)',
+          successFilledColor: 'var(--mui-palette-success-contrastText)',
+          errorFilledBg: 'var(--mui-palette-error-main)',
+          warningFilledBg: 'var(--mui-palette-warning-main)',
+          infoFilledBg: 'var(--mui-palette-info-main)',
+          successFilledBg: 'var(--mui-palette-success-main)'
+        },
+        Avatar: {
+          defaultBg: '#F0EFF0'
+        },
+        Chip: {
+          defaultBorder: 'var(--mui-palette-divider)'
+        },
+        FilledInput: {
+          bg: 'var(--mui-palette-action-hover)',
+          hoverBg: 'var(--mui-palette-action-selected)',
+          disabledBg: 'var(--mui-palette-action-hover)'
+        },
+        LinearProgress: {
+          primaryBg: 'var(--mui-palette-primary-lightOpacity)',
+          secondaryBg: 'var(--mui-palette-secondary-lightOpacity)',
+          errorBg: 'var(--mui-palette-error-lightOpacity)',
+          warningBg: 'var(--mui-palette-warning-lightOpacity)',
+          infoBg: 'var(--mui-palette-info-lightOpacity)',
+          successBg: 'var(--mui-palette-success-lightOpacity)'
+        },
+        SnackbarContent: {
+          bg: '#282A42',
+          color: 'var(--mui-palette-background-paper)'
+        },
+        Switch: {
+          defaultColor: 'var(--mui-palette-common-white)',
+          defaultDisabledColor: 'var(--mui-palette-common-white)',
+          primaryDisabledColor: 'var(--mui-palette-common-white)',
+          secondaryDisabledColor: 'var(--mui-palette-common-white)',
+          errorDisabledColor: 'var(--mui-palette-common-white)',
+          warningDisabledColor: 'var(--mui-palette-common-white)',
+          infoDisabledColor: 'var(--mui-palette-common-white)',
+          successDisabledColor: 'var(--mui-palette-common-white)'
+        },
+        Tooltip: {
+          bg: '#282A42'
+        },
+        TableCell: {
+          border: 'var(--mui-palette-divider)'
+        },
+        customColors: {
+          bodyBg: '#F7F7F9',
+          chatBg: '#F7F6FA',
+          greyLightBg: '#FAFAFA',
+          inputBorder: `rgb(var(--mui-mainColorChannels-light) / 0.22)`,
+          tableHeaderBg: '#F5F5F7',
+          tooltipText: '#FFFFFF',
+          trackBg: '#F5F5F8'
+        }
+      }
+    },
+    dark: {
+      palette: {
+        primary: {
+          main: '#666CFF',
+          light: '#8589FF',
+          dark: '#035357',
+          lighterOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-primary-mainChannel) / 0.38)'
+        },
+        secondary: {
+          main: '#6D788D',
+          light: '#8A93A4',
+          dark: '#626C7F',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-secondary-mainChannel) / 0.38)'
+        },
+        error: {
+          main: '#FF4D49',
+          light: '#FF716D',
+          dark: '#E64542',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-error-mainChannel) / 0.38)'
+        },
+        warning: {
+          main: '#FDB528',
+          light: '#FDC453',
+          dark: '#E4A324',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-warning-mainChannel) / 0.38)'
+        },
+        info: {
+          main: '#26C6F9',
+          light: '#51D1FA',
+          dark: '#22B3E1',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-info-mainChannel) / 0.38)'
+        },
+        success: {
+          main: '#72E128',
+          light: '#8EE753',
+          dark: '#67CB24',
+          contrastText: '#FFF',
+          lighterOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.08)',
+          lightOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.16)',
+          mainOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.24)',
+          darkOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.32)',
+          darkerOpacity: 'rgb(var(--mui-palette-success-mainChannel) / 0.38)'
+        },
+        text: {
+          primary: `rgb(var(--mui-mainColorChannels-dark) / 0.9)`,
+          secondary: `rgb(var(--mui-mainColorChannels-dark) / 0.7)`,
+          disabled: `rgb(var(--mui-mainColorChannels-dark) / 0.4)`,
+          primaryChannel: 'var(--mui-mainColorChannels-dark)',
+          secondaryChannel: 'var(--mui-mainColorChannels-dark)'
+        },
+        divider: `rgb(var(--mui-mainColorChannels-dark) / 0.12)`,
+        dividerChannel: 'var(--mui-mainColorChannels-dark)',
+        background: {
+          default: skin === 'bordered' ? '#30334E' : '#282A42',
+          paper: '#30334E',
+          paperChannel: '48 51 78'
+        },
+        action: {
+          active: `rgb(var(--mui-mainColorChannels-dark) / 0.6)`,
+          hover: `rgb(var(--mui-mainColorChannels-dark) / 0.06)`,
+          selected: `rgb(var(--mui-mainColorChannels-dark) / 0.08)`,
+          disabled: `rgb(var(--mui-mainColorChannels-dark) / 0.3)`,
+          disabledBackground: `rgb(var(--mui-mainColorChannels-dark) / 0.16)`,
+          focus: `rgb(var(--mui-mainColorChannels-dark) / 0.1)`,
+          focusOpacity: 0.1,
+          activeChannel: 'var(--mui-mainColorChannels-dark)',
+          selectedChannel: 'var(--mui-mainColorChannels-dark)'
+        },
+        Alert: {
+          errorColor: 'var(--mui-palette-error-main)',
+          warningColor: 'var(--mui-palette-warning-main)',
+          infoColor: 'var(--mui-palette-info-main)',
+          successColor: 'var(--mui-palette-success-main)',
+          errorStandardBg: 'var(--mui-palette-error-lightOpacity)',
+          warningStandardBg: 'var(--mui-palette-warning-lightOpacity)',
+          infoStandardBg: 'var(--mui-palette-info-lightOpacity)',
+          successStandardBg: 'var(--mui-palette-success-lightOpacity)',
+          errorFilledColor: 'var(--mui-palette-error-contrastText)',
+          warningFilledColor: 'var(--mui-palette-warning-contrastText)',
+          infoFilledColor: 'var(--mui-palette-info-contrastText)',
+          successFilledColor: 'var(--mui-palette-success-contrastText)',
+          errorFilledBg: 'var(--mui-palette-error-main)',
+          warningFilledBg: 'var(--mui-palette-warning-main)',
+          infoFilledBg: 'var(--mui-palette-info-main)',
+          successFilledBg: 'var(--mui-palette-success-main)'
+        },
+        Avatar: {
+          defaultBg: '#383B55'
+        },
+        Chip: {
+          defaultBorder: 'var(--mui-palette-divider)'
+        },
+        FilledInput: {
+          bg: 'var(--mui-palette-action-hover)',
+          hoverBg: 'var(--mui-palette-action-selected)',
+          disabledBg: 'var(--mui-palette-action-hover)'
+        },
+        LinearProgress: {
+          primaryBg: 'var(--mui-palette-primary-lightOpacity)',
+          secondaryBg: 'var(--mui-palette-secondary-lightOpacity)',
+          errorBg: 'var(--mui-palette-error-lightOpacity)',
+          warningBg: 'var(--mui-palette-warning-lightOpacity)',
+          infoBg: 'var(--mui-palette-info-lightOpacity)',
+          successBg: 'var(--mui-palette-success-lightOpacity)'
+        },
+        SnackbarContent: {
+          bg: '#F5F5F5',
+          color: 'var(--mui-palette-background-paper)'
+        },
+        Switch: {
+          defaultColor: 'var(--mui-palette-common-white)',
+          defaultDisabledColor: 'var(--mui-palette-common-white)',
+          primaryDisabledColor: 'var(--mui-palette-common-white)',
+          secondaryDisabledColor: 'var(--mui-palette-common-white)',
+          errorDisabledColor: 'var(--mui-palette-common-white)',
+          warningDisabledColor: 'var(--mui-palette-common-white)',
+          infoDisabledColor: 'var(--mui-palette-common-white)',
+          successDisabledColor: 'var(--mui-palette-common-white)'
+        },
+        Tooltip: {
+          bg: '#F5F5F5'
+        },
+        TableCell: {
+          border: 'var(--mui-palette-divider)'
+        },
+        customColors: {
+          bodyBg: '#282A42',
+          chatBg: '#343752',
+          greyLightBg: '#333851',
+          inputBorder: `rgb(var(--mui-mainColorChannels-dark) / 0.22)`,
+          tableHeaderBg: '#3A3E5B',
+          tooltipText: '#30334E',
+          trackBg: '#3C3F59'
+        }
+      }
+    }
+  }
+}
+
+export default colorSchemes

package/src/@core/theme/customShadows.js

@@ -0,0 +1,11 @@
+const customShadows = mode => {
+  return {
+    xs: `0px 2px 6px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.14 : 0.2})`,
+    sm: `0px 2px 10px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.16 : 0.24})`,
+    md: `0px 4px 14px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.16 : 0.26})`,
+    lg: `0px 6px 20px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.18 : 0.28})`,
+    xl: `0px 8px 26px rgb(var(--mui-mainColorChannels-${mode}Shadow) / ${mode === 'light' ? 0.18 : 0.3})`
+  }
+}
+
+export default customShadows

package/src/@core/theme/globalStyles.js

@@ -0,0 +1,81 @@
+const GlobalStyles = (theme, settings) => {
+  // ** Vars
+  const { skin } = settings
+
+  const perfectScrollbarThumbBgColor = () => {
+    if (skin === 'semi-dark' && theme.palette.mode === 'light') {
+      return '#57596C !important'
+    } else if (skin === 'semi-dark' && theme.palette.mode === 'dark') {
+      return '#BFBFD5 !important'
+    } else if (theme.palette.mode === 'light') {
+      return '#BFBFD5 !important'
+    } else {
+      return '#57596C !important'
+    }
+  }
+
+  return {
+    'body[style^="padding-right"] header::after, body[style^="padding-right"] footer::after': {
+      content: '""',
+      position: 'absolute',
+      left: '100%',
+      top: 0,
+      height: '100%',
+      backgroundColor: theme.palette.background.paper,
+      width: '30px'
+    },
+    '.demo-space-x > *': {
+      marginTop: '1rem !important',
+      marginRight: '1rem !important',
+      'body[dir="rtl"] &': {
+        marginRight: '0 !important',
+        marginLeft: '1rem !important'
+      }
+    },
+    '.demo-space-y > *:not(:last-of-type)': {
+      marginBottom: '1rem'
+    },
+    '.MuiGrid-container.match-height .MuiCard-root': {
+      height: '100%'
+    },
+    '.ps__rail-y': {
+      zIndex: 1,
+      right: '0 !important',
+      left: 'auto !important',
+      '&:hover, &:focus, &.ps--clicking': {
+        backgroundColor: theme.palette.mode === 'light' ? '#F3F3F8 !important' : '#393B51 !important'
+      },
+      '& .ps__thumb-y': {
+        right: '3px !important',
+        left: 'auto !important',
+        backgroundColor: theme.palette.mode === 'light' ? '#BFBFD5 !important' : '#57596C !important'
+      },
+      '.layout-vertical-nav &': {
+        '& .ps__thumb-y': {
+          width: 4,
+          backgroundColor: perfectScrollbarThumbBgColor()
+        },
+        '&:hover, &:focus, &.ps--clicking': {
+          backgroundColor: 'transparent !important',
+          '& .ps__thumb-y': {
+            width: 6
+          }
+        }
+      }
+    },
+    '#nprogress': {
+      pointerEvents: 'none',
+      '& .bar': {
+        left: 0,
+        top: 0,
+        height: 3,
+        width: '100%',
+        zIndex: 2000,
+        position: 'fixed',
+        backgroundColor: theme.palette.primary.main
+      }
+    }
+  }
+}
+
+export default GlobalStyles

package/src/@core/theme/index.js

@@ -0,0 +1,42 @@
+// Next Imports
+import { Inter } from 'next/font/google'
+
+// Theme Options Imports
+import overrides from './overrides'
+import colorSchemes from './colorSchemes'
+import spacing from './spacing'
+import shadows from './shadows'
+import customShadows from './customShadows'
+import typography from './typography'
+
+const inter = Inter({ subsets: ['latin'], weight: ['300', '400', '500', '600', '700', '800', '900'] })
+
+const theme = (settings, mode, direction) => {
+  return {
+    direction,
+    components: overrides(settings.skin),
+    colorSchemes: colorSchemes(settings.skin),
+    ...spacing,
+    shape: {
+      borderRadius: 10,
+      customBorderRadius: {
+        xs: 2,
+        sm: 4,
+        md: 6,
+        lg: 8,
+        xl: 10
+      }
+    },
+    shadows: shadows(mode),
+    typography: typography(inter.style.fontFamily),
+    customShadows: customShadows(mode),
+    mainColorChannels: {
+      light: '38 43 67',
+      dark: '234 234 255',
+      lightShadow: '38 43 67',
+      darkShadow: '16 17 33'
+    }
+  }
+}
+
+export default theme

package/src/@core/theme/overrides/accordion.js

@@ -0,0 +1,51 @@
+const Accordion = theme => {
+  return {
+    MuiAccordion: {
+      styleOverrides: {
+        root: {
+          '&:first-of-type': {
+            borderTopLeftRadius: 8,
+            borderTopRightRadius: 8
+          },
+          '&:last-of-type': {
+            borderBottomLeftRadius: 8,
+            borderBottomRightRadius: 8
+          },
+          '&.Mui-disabled': {
+            backgroundColor: `rgba(${theme.palette.customColors.main}, 0.12)`
+          },
+          '&.Mui-expanded': {
+            boxShadow: theme.shadows[3]
+          }
+        }
+      }
+    },
+    MuiAccordionSummary: {
+      styleOverrides: {
+        root: {
+          padding: `0 ${theme.spacing(5)}`,
+          '& + .MuiCollapse-root': {
+            '& .MuiAccordionDetails-root:first-child': {
+              paddingTop: 0
+            }
+          }
+        },
+        content: {
+          margin: `${theme.spacing(3.25)} 0`
+        }
+      }
+    },
+    MuiAccordionDetails: {
+      styleOverrides: {
+        root: {
+          padding: theme.spacing(5),
+          '& + .MuiAccordionDetails-root': {
+            paddingTop: 0
+          }
+        }
+      }
+    }
+  }
+}
+
+export default Accordion

package/src/@core/theme/overrides/accordion.jsx

@@ -0,0 +1,85 @@
+const accordion = skin => ({
+  MuiAccordion: {
+    defaultProps: {
+      ...(skin === 'bordered' && {
+        variant: 'outlined'
+      })
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        transition: theme.transitions.create(['margin', 'border-radius', 'box-shadow']),
+        ...(skin !== 'bordered'
+          ? {
+              boxShadow: 'var(--mui-customShadows-xs)'
+            }
+          : {
+              '&:not(.Mui-expanded) + &:not(.Mui-expanded)': {
+                borderBlockStart: 0
+              },
+              '&:not(.Mui-expanded):has(+ &:not(.Mui-expanded))': {
+                borderBlockEnd: 0
+              }
+            }),
+        '&:not(.Mui-expanded):has(+ .Mui-expanded)': {
+          borderBottomLeftRadius: 'var(--mui-shape-borderRadius)',
+          borderBottomRightRadius: 'var(--mui-shape-borderRadius)'
+        },
+        '&.Mui-expanded': {
+          borderRadius: 'var(--mui-shape-borderRadius)',
+          ...(skin !== 'bordered' && {
+            boxShadow: 'var(--mui-customShadows-md)'
+          }),
+          margin: theme.spacing(2, 0),
+          '& + .MuiAccordion-root': {
+            borderTopLeftRadius: 'var(--mui-shape-borderRadius)',
+            borderTopRightRadius: 'var(--mui-shape-borderRadius)',
+            '&:before': {
+              opacity: 0
+            }
+          }
+        }
+      })
+    }
+  },
+  MuiAccordionSummary: {
+    defaultProps: {
+      expandIcon: <i className='ri-arrow-down-s-line' />
+    },
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: theme.spacing(3, 5),
+        color: 'var(--mui-palette-text-primary)',
+        minHeight: 46,
+        '&.Mui-expanded': {
+          minHeight: 46
+        },
+        '& .MuiTypography-root': {
+          color: 'inherit',
+          fontWeight: theme.typography.fontWeightMedium
+        }
+      }),
+      content: {
+        margin: '0 !important'
+      },
+      expandIconWrapper: {
+        color: 'var(--mui-palette-text-primary)',
+        fontSize: '1.25rem',
+        '& i, & svg': {
+          fontSize: 'inherit'
+        }
+      }
+    }
+  },
+  MuiAccordionDetails: {
+    styleOverrides: {
+      root: ({ theme }) => ({
+        padding: theme.spacing(0, 5, 5),
+        '& .MuiTypography-root': {
+          color: 'var(--mui-palette-text-secondary)'
+        }
+      })
+    }
+  }
+})
+
+export default accordion