robobyte-front-builder 1.0.0

package/src/@core/styles/libs/react-cleave/index.js

@@ -0,0 +1,33 @@
+// ** MUI Imports
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+const CleaveWrapper = styled(Box)(({ theme }) => ({
+  '& input': {
+    height: 56,
+    width: '100%',
+    borderWidth: 1,
+    lineHeight: 1.5,
+    borderRadius: 8,
+    fontSize: '1rem',
+    borderStyle: 'solid',
+    letterSpacing: '0.15px',
+    padding: theme.spacing(4),
+    backgroundColor: 'transparent',
+    color: theme.palette.text.primary,
+    fontFamily: theme.typography.body1.fontFamily,
+    borderColor: `rgba(${theme.palette.customColors.main}, 0.22)`,
+    transition: theme.transitions.create(['border-color', 'background-color', 'box-shadow']),
+    '&:focus, &:focus-visible': {
+      outline: 0,
+      borderWidth: 2,
+      padding: theme.spacing(3.75),
+      borderColor: `${theme.palette.primary.main} !important`
+    },
+    '&::-webkit-input-placeholder': {
+      color: theme.palette.text.secondary
+    }
+  }
+}))
+
+export default CleaveWrapper

package/src/@core/styles/libs/react-credit-cards/index.js

@@ -0,0 +1,11 @@
+// ** MUI Imports
+import { styled } from '@mui/material/styles'
+
+const CardWrapper = styled('div')({
+  display: 'flex',
+  '& .rccs, & .rccs__card': {
+    margin: 0
+  }
+})
+
+export default CardWrapper

package/src/@core/styles/libs/react-datepicker/index.js

@@ -0,0 +1,388 @@
+// ** MUI imports
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+// ** Hooks
+import { useSettings } from 'src/@core/hooks/useSettings'
+
+// ** Util Import
+import { hexToRGBA } from 'src/@core/utils/hex-to-rgba'
+
+const DatePickerWrapper = styled(Box)(({ theme }) => {
+  // ** Hook
+  const { settings } = useSettings()
+
+  return {
+    '& .react-datepicker-popper': {
+      zIndex: 5
+    },
+    '& .react-datepicker-wrapper': {
+      width: '100%'
+    },
+    '& .react-datepicker': {
+      padding: theme.spacing(2, 0),
+      color: theme.palette.text.primary,
+      borderRadius: theme.shape.borderRadius,
+      fontFamily: theme.typography.fontFamily,
+      backgroundColor: theme.palette.background.paper,
+      boxShadow: theme.shadows[settings.skin === 'bordered' ? 0 : 6],
+      border: settings.skin === 'bordered' ? `1px solid ${theme.palette.divider}` : 'none',
+      '& .react-datepicker__header': {
+        padding: 0,
+        border: 'none',
+        fontWeight: 400,
+        backgroundColor: theme.palette.background.paper,
+        '& .react-datepicker__day-name': {
+          margin: 0
+        }
+      },
+      '& .react-datepicker-year-header': {
+        lineHeight: 2.1,
+        fontSize: '1rem',
+        marginBottom: '0.5rem',
+        color: theme.palette.text.primary
+      },
+      '& .react-datepicker__triangle': {
+        display: 'none'
+      },
+      '& > .react-datepicker__navigation': {
+        top: theme.spacing(3),
+        '&.react-datepicker__navigation--previous': {
+          width: 24,
+          height: 24,
+          border: 'none',
+          backgroundImage: `${"url('data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' style=\\'width:24px;height:24px\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath fill=\\'currentColor\\' d=\\'M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z\\' /%3E%3C/svg%3E')"
+            .replace('currentColor', theme.palette.action.active)
+            .replace('#', '%23')}`,
+          '& .react-datepicker__navigation-icon': {
+            display: 'none'
+          }
+        },
+        '&.react-datepicker__navigation--next': {
+          width: 24,
+          height: 24,
+          border: 'none',
+          backgroundImage: `${"url('data:image/svg+xml,%3Csvg xmlns=\\'http://www.w3.org/2000/svg\\' style=\\'width:24px;height:24px\\' viewBox=\\'0 0 24 24\\'%3E%3Cpath fill=\\'currentColor\\' d=\\'M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z\\' /%3E%3C/svg%3E')"
+            .replace('currentColor', theme.palette.action.active)
+            .replace('#', '%23')}`,
+          '& .react-datepicker__navigation-icon': {
+            display: 'none'
+          }
+        },
+        '&.react-datepicker__navigation--next--with-time': {
+          right: 122
+        },
+        '&:focus, &:active': {
+          outline: 0
+        }
+      },
+      '& .react-datepicker__current-month': {
+        fontWeight: 400,
+        lineHeight: 2.1,
+        fontSize: '1rem',
+        letterSpacing: '0.15px',
+        marginBottom: theme.spacing(3),
+        color: theme.palette.text.primary
+      },
+      '& .react-datepicker__day-names': {
+        marginBottom: theme.spacing(3),
+        '& .react-datepicker__day-name': {
+          lineHeight: 1.5,
+          fontWeight: 500,
+          width: '2.25rem',
+          fontSize: '0.875rem',
+          letterSpacing: '0.1px',
+          color: theme.palette.text.primary
+        }
+      },
+      '& .react-datepicker__day': {
+        margin: 0,
+        width: '2.25rem',
+        lineHeight: 2.75,
+        height: '2.25rem',
+        borderRadius: '50%',
+        color: theme.palette.text.primary,
+        '&.react-datepicker__day--selected, &.react-datepicker__day--keyboard-selected': {
+          color: theme.palette.common.white,
+          backgroundColor: `${theme.palette.primary.main} !important`
+        },
+        '&.react-datepicker__day--in-range, &.react-datepicker__day--in-selecting-range': {
+          borderRadius: 0,
+          color: theme.palette.primary.main,
+          backgroundColor: `${hexToRGBA(theme.palette.primary.main, 0.06)} !important`,
+          '&:empty': {
+            backgroundColor: 'transparent !important'
+          }
+        },
+        '&.react-datepicker__day--selected.react-datepicker__day--in-selecting-range.react-datepicker__day--selecting-range-start, &.react-datepicker__day--selected.react-datepicker__day--range-start.react-datepicker__day--in-range, &.react-datepicker__day--range-start':
+          {
+            borderTopLeftRadius: '50%',
+            borderBottomLeftRadius: '50%',
+            color: theme.palette.common.white,
+            backgroundColor: `${theme.palette.primary.main} !important`
+          },
+        '&.react-datepicker__day--range-end': {
+          borderTopRightRadius: '50%',
+          borderBottomRightRadius: '50%',
+          color: theme.palette.common.white,
+          backgroundColor: `${theme.palette.primary.main} !important`
+        },
+        '&:focus, &:active': {
+          outline: 0
+        },
+        '&.react-datepicker__day--outside-month': {
+          height: 'auto'
+        },
+        '&.react-datepicker__day--outside-month, &.react-datepicker__day--disabled:not(.react-datepicker__day--selected)':
+          {
+            color: theme.palette.text.disabled,
+            '&:hover': {
+              backgroundColor: 'transparent'
+            }
+          },
+        '&.react-datepicker__day--highlighted, &.react-datepicker__day--highlighted:hover': {
+          color: theme.palette.success.main,
+          backgroundColor: hexToRGBA(theme.palette.success.main, 0.12)
+        },
+        '&.react-datepicker__day--today': {
+          fontWeight: 400,
+          '&:not(.react-datepicker__day--selected)': {
+            border: `1px solid ${theme.palette.divider}`
+          }
+        }
+      },
+      '& .react-datepicker__header__dropdown': {
+        '& .react-datepicker__month-dropdown-container:not(:last-child)': {
+          marginRight: theme.spacing(8)
+        },
+        '& .react-datepicker__month-dropdown-container, & .react-datepicker__year-dropdown-container': {
+          marginBottom: theme.spacing(4)
+        },
+        '& .react-datepicker__month-read-view--selected-month, & .react-datepicker__year-read-view--selected-year': {
+          fontSize: '0.875rem',
+          marginRight: theme.spacing(1),
+          color: theme.palette.text.primary
+        },
+        '& .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, & .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow':
+          {
+            borderTopColor: theme.palette.action.active,
+            borderRightColor: theme.palette.action.active
+          },
+        '& .react-datepicker__month-read-view--down-arrow, & .react-datepicker__year-read-view--down-arrow': {
+          top: 4,
+          borderTopColor: theme.palette.action.active,
+          borderRightColor: theme.palette.action.active
+        },
+        '& .react-datepicker__month-dropdown, & .react-datepicker__year-dropdown': {
+          paddingTop: theme.spacing(1.5),
+          paddingBottom: theme.spacing(1.5),
+          borderColor: theme.palette.divider,
+          borderRadius: theme.shape.borderRadius,
+          backgroundColor: theme.palette.background.paper,
+          boxShadow: theme.palette.mode === 'light' ? theme.shadows[8] : theme.shadows[9]
+        },
+        '& .react-datepicker__month-option, & .react-datepicker__year-option': {
+          paddingTop: theme.spacing(0.5),
+          paddingBottom: theme.spacing(0.5),
+          '&:hover': {
+            backgroundColor: theme.palette.action.hover
+          }
+        },
+        '& .react-datepicker__month-option.react-datepicker__month-option--selected_month': {
+          backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08),
+          '&:hover': {
+            backgroundColor: hexToRGBA(theme.palette.primary.main, 0.12)
+          },
+          '& .react-datepicker__month-option--selected': {
+            display: 'none'
+          }
+        },
+        '& .react-datepicker__year-option.react-datepicker__year-option--selected_year': {
+          backgroundColor: hexToRGBA(theme.palette.primary.main, 0.08),
+          '&:hover': {
+            backgroundColor: hexToRGBA(theme.palette.primary.main, 0.12)
+          },
+          '& .react-datepicker__year-option--selected': {
+            display: 'none'
+          }
+        },
+        '& .react-datepicker__year-option': {
+          // TODO: Remove some of the following styles for arrow in Year dropdown when react-datepicker give arrows in Year dropdown
+          '& .react-datepicker__navigation--years-upcoming': {
+            width: 9,
+            height: 9,
+            borderStyle: 'solid',
+            borderWidth: '3px 3px 0 0',
+            transform: 'rotate(-45deg)',
+            borderTopColor: theme.palette.text.disabled,
+            borderRightColor: theme.palette.text.disabled,
+            margin: `${theme.spacing(2.75)} auto ${theme.spacing(0)}`
+          },
+          '&:hover .react-datepicker__navigation--years-upcoming': {
+            borderTopColor: theme.palette.text.secondary,
+            borderRightColor: theme.palette.text.secondary
+          },
+          '& .react-datepicker__navigation--years-previous': {
+            width: 9,
+            height: 9,
+            borderStyle: 'solid',
+            borderWidth: '0 0 3px 3px',
+            transform: 'rotate(-45deg)',
+            borderLeftColor: theme.palette.text.disabled,
+            borderBottomColor: theme.palette.text.disabled,
+            margin: `${theme.spacing(0)} auto ${theme.spacing(2.75)}`
+          },
+          '&:hover .react-datepicker__navigation--years-previous': {
+            borderLeftColor: theme.palette.text.secondary,
+            borderBottomColor: theme.palette.text.secondary
+          }
+        }
+      },
+      '& .react-datepicker__month': {
+        marginTop: theme.spacing(3)
+      },
+      [theme.breakpoints.down('sm')]: {
+        '& .react-datepicker__month': {
+          marginLeft: 0,
+          marginRight: 0,
+          marginBottom: 0
+        }
+      },
+      '& .react-datepicker__month, & .react-datepicker__year': {
+        '& .react-datepicker__month-text, & .react-datepicker__year-text, & .react-datepicker__quarter-text': {
+          height: '2rem',
+          alignItems: 'center',
+          display: 'inline-flex',
+          justifyContent: 'center',
+          '&:hover': {
+            borderRadius: theme.shape.borderRadius
+          },
+          '&:focus, &:active': {
+            outline: 0
+          }
+        },
+        '& .react-datepicker__quarter--selected, & .react-datepicker__year-text--selected, & .react-datepicker__month--selected, & .react-datepicker__quarter-text--keyboard-selected, & .react-datepicker__month-text--keyboard-selected, & .react-datepicker__year-text--keyboard-selected':
+          {
+            color: theme.palette.common.white,
+            borderRadius: theme.shape.borderRadius,
+            backgroundColor: `${theme.palette.primary.main} !important`
+          },
+        '& .react-datepicker__week-number': {
+          fontWeight: 600,
+          color: theme.palette.text.primary
+        }
+      },
+      '& .react-datepicker__year-wrapper': {
+        maxWidth: 205,
+        justifyContent: 'center'
+      },
+      '& .react-datepicker__input-time-container': {
+        display: 'flex',
+        alignItems: 'center',
+        ...(theme.direction === 'rtl' ? { flexDirection: 'row-reverse' } : {})
+      },
+      '& .react-datepicker__today-button': {
+        borderRadius: '1rem',
+        margin: '0 1rem 0.3rem',
+        color: theme.palette.common.white,
+        backgroundColor: theme.palette.primary.main
+      },
+      '& .react-datepicker__monthPicker': {
+        '& .react-datepicker__month-text': {
+          borderRadius: 8
+        },
+        '& .react-datepicker__month-text--today': {
+          fontWeight: 400
+        }
+      },
+
+      // ** Time Picker
+      '& .react-datepicker__time-container': {
+        borderLeftColor: theme.palette.divider
+      },
+      '&.react-datepicker--time-only, & .react-datepicker__time-container': {
+        width: '7rem',
+        padding: theme.spacing(1.2, 0),
+        '& .react-datepicker-time__header': {
+          fontWeight: 500,
+          letterSpacing: '0.1px',
+          marginBottom: theme.spacing(3),
+          color: theme.palette.text.primary,
+          fontSize: theme.typography.body2.fontSize
+        },
+        '& .react-datepicker__time': {
+          background: theme.palette.background.paper,
+          '& .react-datepicker__time-box .react-datepicker__time-list-item--disabled': {
+            color: theme.palette.text.disabled
+          }
+        },
+        '& .react-datepicker__time-list-item': {
+          borderRadius: 8,
+          lineHeight: 1.429,
+          fontSize: '0.875rem',
+          height: 'auto !important',
+          marginLeft: theme.spacing(3.2),
+          marginRight: theme.spacing(1.2),
+          color: theme.palette.text.primary,
+          paddingTop: `${theme.spacing(1.75)} !important`,
+          paddingBottom: `${theme.spacing(1.75)} !important`,
+          '&:focus, &:active': {
+            outline: 0
+          },
+          '&:hover': {
+            backgroundColor: `${theme.palette.action.hover} !important`
+          },
+          '&.react-datepicker__time-list-item--selected': {
+            fontWeight: '400 !important',
+            color: `${theme.palette.common.white} !important`,
+            backgroundColor: `${theme.palette.primary.main} !important`
+          }
+        },
+        '& .react-datepicker__time-box': {
+          width: '100%'
+        },
+        '& .react-datepicker__time-list': {
+          '&::-webkit-scrollbar': {
+            width: 8
+          },
+
+          /* Track */
+          '&::-webkit-scrollbar-track': {
+            background: theme.palette.background.paper
+          },
+
+          /* Handle */
+          '&::-webkit-scrollbar-thumb': {
+            background: '#aaa',
+            borderRadius: '10px'
+          },
+
+          /* Handle on hover */
+          '&::-webkit-scrollbar-thumb:hover': {
+            background: '#999'
+          }
+        }
+      },
+      '&.react-datepicker--time-only .react-datepicker__time-container': {
+        width: 'calc(7rem - 2px)'
+      },
+      '& .react-datepicker__day:hover, & .react-datepicker__month-text:hover, & .react-datepicker__quarter-text:hover, & .react-datepicker__year-text:hover':
+        {
+          backgroundColor: theme.palette.action.hover
+        }
+    },
+    '& .react-datepicker__close-icon': {
+      paddingRight: theme.spacing(4),
+      ...(theme.direction === 'rtl' ? { right: 0, left: 'auto' } : {}),
+      '&:after': {
+        width: 'unset',
+        height: 'unset',
+        fontSize: '1.5rem',
+        color: theme.palette.text.primary,
+        backgroundColor: 'transparent !important'
+      }
+    }
+  }
+})
+
+export default DatePickerWrapper

package/src/@core/styles/libs/react-draft-wysiwyg/index.js

@@ -0,0 +1,144 @@
+// ** MUI imports
+import { styled } from '@mui/material/styles'
+
+export const EditorWrapper = styled('div')(({ theme }) => ({
+  '& .rdw-editor-wrapper': {
+    border: `1px solid ${theme.palette.divider}`,
+    '& .rdw-editor-toolbar': {
+      border: 0,
+      marginBottom: 0,
+      background: theme.palette.background.paper,
+      borderBottom: `1px solid ${theme.palette.divider}`,
+      '& .rdw-fontsize-dropdown': {
+        minWidth: 50
+      },
+      '& .rdw-link-modal': {
+        height: 'auto'
+      },
+      '& .rdw-colorpicker-modal, & .rdw-link-modal, & .rdw-embedded-modal, & .rdw-emoji-modal, & .rdw-image-modal': {
+        boxShadow: theme.shadows[8],
+        borderColor: theme.palette.divider,
+        backgroundColor: theme.palette.background.paper
+      },
+      '& .rdw-dropdown-optionwrapper': {
+        boxShadow: theme.shadows[8],
+        borderColor: theme.palette.divider,
+        backgroundColor: theme.palette.background.paper,
+        '& .rdw-dropdownoption-highlighted': {
+          backgroundColor: theme.palette.action.hover
+        },
+        '& .rdw-dropdownoption-active': {
+          backgroundColor: theme.palette.action.selected
+        }
+      },
+      '& .rdw-option-wrapper, & .rdw-dropdown-wrapper': {
+        borderColor: theme.palette.divider,
+        background: theme.palette.background.paper,
+        '& .rdw-dropdown-carettoopen': {
+          left: 'auto',
+          right: '10%',
+          borderTopColor: theme.palette.text.disabled
+        },
+        '& .rdw-dropdown-carettoclose': {
+          left: 'auto',
+          right: '10%',
+          borderBottomColor: theme.palette.text.disabled
+        },
+        ...(theme.palette.mode === 'dark'
+          ? {
+              '& img': {
+                filter: 'invert(1)'
+              }
+            }
+          : {})
+      },
+      '& .rdw-embedded-modal-size-input, & .rdw-image-modal-size-input': {
+        width: '60%',
+        minHeight: 30
+      },
+      '& .rdw-link-modal-input, & .rdw-embedded-modal-link-input, & .rdw-image-modal-url-input': {
+        minHeight: 38
+      },
+      '& .rdw-link-modal-input, & .rdw-embedded-modal-link-input, & .rdw-image-modal-url-input, & .rdw-embedded-modal-size-input, & .rdw-image-modal-size-input':
+        {
+          fontSize: '1rem',
+          background: 'none',
+          padding: theme.spacing(0, 3.5),
+          color: theme.palette.text.primary,
+          borderColor: theme.palette.divider,
+          borderRadius: theme.shape.borderRadius,
+          '&:focus': {
+            borderColor: theme.palette.primary.main
+          },
+          '&::placeholder, &:-ms-input-placeholder, &::-ms-input-placeholder': {
+            color: theme.palette.text.disabled
+          }
+        },
+      '& .rdw-link-modal-btn, & .rdw-embedded-modal-btn, & .rdw-image-modal-btn': {
+        border: 0,
+        lineHeight: 1.71,
+        borderRadius: '5px',
+        letterSpacing: '0.3px',
+        textTransform: 'uppercase',
+        fontWeight: theme.typography.fontWeightMedium,
+        '&:first-of-type:not([disabled])': {
+          boxShadow: theme.shadows[3],
+          color: theme.palette.primary.contrastText,
+          backgroundColor: theme.palette.primary.main,
+          '&:hover': {
+            boxShadow: theme.shadows[4],
+            backgroundColor: theme.palette.primary.dark
+          },
+          '&:active': {
+            boxShadow: theme.shadows[3]
+          }
+        },
+        '&:last-child': {
+          boxShadow: theme.shadows[3],
+          color: theme.palette.secondary.contrastText,
+          backgroundColor: theme.palette.secondary.main,
+          '&:hover': {
+            boxShadow: theme.shadows[4],
+            backgroundColor: theme.palette.secondary.dark
+          },
+          '&:active': {
+            boxShadow: theme.shadows[3]
+          }
+        },
+        '&[disabled]': {
+          cursor: 'default',
+          boxShadow: 'none',
+          color: theme.palette.text.disabled,
+          backgroundColor: theme.palette.action.disabledBackground
+        }
+      }
+    },
+    '& .rdw-editor-main': {
+      cursor: 'text',
+      padding: '0 1rem',
+      minHeight: '10rem',
+      color: theme.palette.text.primary,
+      ...(theme.direction === 'rtl'
+        ? {
+            '& .public-DraftStyleDefault-block': {
+              direction: 'ltr !important',
+              textAlign: 'left !important'
+            }
+          }
+        : {})
+    }
+  }
+}))
+
+export const ToolbarBottom = styled('div')(() => ({
+  '& .rdw-editor-wrapper': {
+    display: 'flex',
+    flexDirection: 'column-reverse'
+  }
+}))
+
+export const Borderless = styled('div')(() => ({
+  '& .rdw-editor-wrapper, & .rdw-editor-toolbar': {
+    border: '0 !important'
+  }
+}))

package/src/@core/styles/libs/react-dropzone/index.js

@@ -0,0 +1,76 @@
+// ** MUI imports
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+const DropzoneWrapper = styled(Box)(({ theme }) => ({
+  '&.dropzone, & .dropzone': {
+    minHeight: 300,
+    display: 'flex',
+    flexWrap: 'wrap',
+    cursor: 'pointer',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: theme.spacing(4),
+    borderRadius: theme.shape.borderRadius,
+    border: `2px dashed ${theme.palette.mode === 'light' ? 'rgba(93, 89, 98, 0.22)' : 'rgba(247, 244, 254, 0.14)'}`,
+    [theme.breakpoints.down('xs')]: {
+      textAlign: 'center'
+    },
+    '&:focus': {
+      outline: 'none'
+    },
+    '& + .MuiList-root': {
+      padding: 0,
+      marginTop: theme.spacing(6.25),
+      '& .MuiListItem-root': {
+        display: 'flex',
+        justifyContent: 'space-between',
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(2.5, 2.4, 2.5, 6),
+        border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(93, 89, 98, 0.14)' : 'rgba(247, 244, 254, 0.14)'}`,
+        '& .file-details': {
+          display: 'flex',
+          alignItems: 'center'
+        },
+        '& .file-preview': {
+          display: 'flex',
+          marginRight: theme.spacing(3.75),
+          '& svg': {
+            fontSize: '2rem'
+          }
+        },
+        '& img': {
+          width: 38,
+          height: 38,
+          padding: theme.spacing(0.75),
+          borderRadius: theme.shape.borderRadius,
+          border: `1px solid ${theme.palette.mode === 'light' ? 'rgba(93, 89, 98, 0.14)' : 'rgba(247, 244, 254, 0.14)'}`
+        },
+        '& .file-name': {
+          fontWeight: 600
+        },
+        '& + .MuiListItem-root': {
+          marginTop: theme.spacing(3.5)
+        }
+      },
+      '& + .buttons': {
+        display: 'flex',
+        justifyContent: 'flex-end',
+        marginTop: theme.spacing(6.25),
+        '& > :first-of-type': {
+          marginRight: theme.spacing(3.5)
+        }
+      }
+    },
+    '& img.single-file-image': {
+      objectFit: 'cover',
+      position: 'absolute',
+      width: 'calc(100% - 1rem)',
+      height: 'calc(100% - 1rem)',
+      borderRadius: theme.shape.borderRadius
+    }
+  }
+}))
+
+export default DropzoneWrapper

package/src/@core/styles/libs/react-hot-toast/index.js

@@ -0,0 +1,37 @@
+// ** MUI Imports
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+// ** Hook Import
+import { useSettings } from 'src/@core/hooks/useSettings'
+
+const ReactHotToast = styled(Box)(({ theme }) => {
+  // ** Hook & Var
+  const { settings } = useSettings()
+  const { layout, navHidden } = settings
+
+  return {
+    '& > div': {
+      left: `${theme.spacing(6)} !important`,
+      right: `${theme.spacing(6)} !important`,
+      bottom: `${theme.spacing(6)} !important`,
+      top: layout === 'horizontal' && !navHidden ? '139px !important' : '75px !important'
+    },
+    '& .react-hot-toast': {
+      fontWeight: 400,
+      borderRadius: 8,
+      fontSize: '1rem',
+      letterSpacing: '0.14px',
+      boxShadow: theme.shadows[3],
+      zIndex: theme.zIndex.snackbar,
+      color: theme.palette.text.primary,
+      background: theme.palette.background.paper,
+      '&>:first-of-type:not([role])>:first-of-type': {
+        width: 14,
+        height: 14
+      }
+    }
+  }
+})
+
+export default ReactHotToast