ish-ui 1.0.55 → 1.1.0

package/dist/styles/GlobalStylesProvider.js

@@ -4,31 +4,31 @@
  */
 import * as React from 'react';
 import { alpha, darken } from '@mui/material/styles';
-import createStyles from '@mui/styles/createStyles';
-import withStyles from '@mui/styles/withStyles';
+import { GlobalStyles } from 'tss-react';
 import InterRomanVar from '../../assets/fonts/inter/Inter-Roman.var.woff2';
-import InterItalicVar from '../../assets/fonts/inter/Inter-Roman.var.woff2';
+import InterItalicVar from '../../assets/fonts/inter/Inter-Italic.var.woff2';
 import { animateStyles } from './animateStyles';
-import { bootstrap } from './bootstrap';
 import getOS from '../utils/DOM/getOS';
+import { makeAppStyles } from '../styles/makeStyles';
+import { prefixer } from '../styles/mixins/prefixer';
 const customOSScrollbars = getOS() === 'Windows'
     ? {
         '::-webkit-scrollbar': {
             width: 8,
             height: 8,
             backgroundColor: 'rgba(0,0,0,0)',
-            '-webkit-border-radius': '100px'
+            webkitBorderRadius: '100px'
         },
         '::-webkit-scrollbar:hover': {
             backgroundColor: 'rgba(0, 0, 0, 0.09)'
         },
         '::-webkit-scrollbar-thumb': {
             background: 'rgba(0,0,0,0.5)',
-            '-webkit-border-radius': '100px'
+            webkitBorderRadius: '100px'
         },
         '::-webkit-scrollbar-thumb:active': {
             background: 'rgba(0,0,0,0.61)',
-            '-webkit-border-radius': '100px'
+            webkitBorderRadius: '100px'
         },
         '::-webkit-scrollbar-thumb:vertical': {
             minHeight: 10
@@ -38,379 +38,710 @@ const customOSScrollbars = getOS() === 'Windows'
         }
     }
     : {};
-const globalStyles = (theme) => createStyles({
-    '@global': Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, theme.palette.mode === 'dark' ? { 'a': { color: '#90caf9' } } : {}), { '@font-face': [
-            {
-                fontFamily: 'Inter',
-                fontWeight: '100 900',
-                fontDisplay: 'swap',
-                fontStyle: 'normal',
-                fallbacks: [
-                    { src: `local('Inter'), url(${InterRomanVar}) format("woff2")` }
-                ]
-            },
-            {
-                fontFamily: 'Inter',
-                fontWeight: '100 900',
-                fontDisplay: 'swap',
-                fontStyle: 'italic',
-                fallbacks: [
-                    { src: `local('Inter'), url(${InterItalicVar}) format("woff2")` }
-                ]
-            }
-        ], '.appFrame': {
-            position: 'relative',
-            height: '100vh',
-            background: theme.palette.background.default,
-            flex: 1,
-            maxWidth: '100%'
-        }, '.activeAvatar': {
-            color: theme.palette.primary.contrastText,
-            backgroundColor: theme.palette.primary.main,
-        }, '.root': {
-            position: 'relative',
-            display: 'flex',
-            width: '100%',
-            height: '100vh',
-            overflowY: 'hidden'
-        }, '.container': {
-            display: 'flex',
-            flexWrap: 'wrap'
-        }, '.codeArea': {
-            borderRadius: theme.shape.borderRadius,
-            background: theme.table.contrastRow.main,
-            padding: theme.spacing(1),
-            border: 'none',
-            outline: 'none',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            fontSize: 'inherit',
-            fontFamily: 'inherit',
-            color: 'inherit',
-            width: '100%'
-        }, '.appBarContainer': {
-            marginTop: theme.spacing(8),
-            height: `calc(100vh - ${theme.spacing(8)})`,
-            overflowY: 'auto'
-        }, '.card': {
-            marginBottom: '20px',
-            padding: '20px',
-            minWidth: '800px'
-        }, '.saveButtonTableOffset': {
-            marginBottom: theme.spacing(8)
-        }, '.editViewHeadingOffset': {
-            marginTop: `-${theme.spacing(2)}`
-        }, '.cardBorders': {
-            borderRadius: theme.spacing(1),
-            border: '2px solid',
-            borderColor: alpha(theme.palette.text.disabled, 0.1),
-        }, '.heading': {
-            textTransform: 'uppercase',
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize,
-            fontWeight: 'bold',
-            color: theme.heading.color,
-            lineHeight: 1.22
-        }, '.secondaryHeading': {
-            textTransform: 'uppercase',
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize - 2,
-            fontWeight: 600,
-            color: theme.heading.color,
-            lineHeight: 1.45
-        }, '.normalHeading': {
-            fontFamily: theme.typography.fontFamily,
-            fontSize: theme.typography.fontSize,
-            fontWeight: 600,
-            color: theme.heading.color,
-            lineHeight: 1.45
-        }, '.headingHover': {
-            cursor: 'pointer',
-            willChange: 'color',
-            '&:hover': {
-                color: darken(theme.heading.color, 0.4),
-            }
-        }, '.checkbox': {
-            height: '35px',
-            display: 'block',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis'
-        }, '.checkboxWidth': {
-            width: '35px'
-        }, '.placeholderContent': {
-            opacity: 0.15,
-            fontWeight: 400,
-        }, '.link': {
-            color: 'inherit',
-            textDecoration: 'none'
-        }, '.listItemPadding': {
-            padding: theme.spacing(0.75, 3),
-            minHeight: 'unset'
-        }, '.appBarFab': {
-            top: '31px',
-            backgroundColor: 'black'
-        }, '.payslipButton': {
-            '&:hover': {
-                backgroundColor: darken(theme.palette.primary.main, 0.1)
-            }
-        }, '.moreOptions': {
-            boxShadow: theme.shadows[0],
-            color: theme.palette.primary.contrastText,
-            backgroundColor: theme.palette.primary.main,
-            '&:hover': {
-                color: theme.palette.primary.contrastText,
-                backgroundColor: alpha(theme.palette.primary.main, 0.9)
-            },
-            margin: theme.spacing(0, 1)
-        }, '.moreOptionsDisabled': {
-            color: `${theme.palette.grey[500]} !important`,
-            backgroundColor: `${theme.palette.grey[300]} !important`
-        }, '.saveButtonEditView': {
-            whiteSpace: 'nowrap',
-            boxShadow: theme.shadows[2],
-            '&:hover': {
-                backgroundColor: darken(theme.palette.primary.main, 0.1)
-            },
-            margin: theme.spacing(1)
-        }, '.saveButtonEditViewDisabled': {
-            color: `${theme.palette.grey[500]} !important`,
-            backgroundColor: `${theme.palette.grey[300]} !important`
-        }, '.integrationsButton': {
-            '&:hover': {
-                backgroundColor: darken(theme.palette.primary.main, 0.1)
-            }
-        }, '.licencesUpgradeButton': {
-            '&:hover': {
-                backgroundColor: darken(theme.palette.primary.main, 0.1)
-            }
-        }, '.closeAppBarButton': {
-            color: theme.appBarButton.close.color
-        }, '.whiteAppBarButton': {
-            color: theme.palette.primary.main,
-            backgroundColor: theme.palette.primary.contrastText,
-            marginLeft: theme.spacing(1),
-            '&:hover': {
-                color: theme.palette.primary.main,
-                backgroundColor: alpha(theme.palette.primary.contrastText, 0.9)
-            }
-        }, '.whiteAppBarButtonDisabled': {
-            color: `${theme.palette.primary.main} !important`,
-            backgroundColor: `${alpha(theme.palette.primary.contrastText, 0.3)} !important`
-        }, '.avetmissButton': {
-            '&:hover': {
-                backgroundColor: darken(theme.palette.primary.main, 0.1),
-                color: theme.palette.primary.contrastText
-            }
-        }, '.hoverGrayIcon': {
-            '&:hover': {
-                fill: theme.palette.action.hover
-            }
-        }, '.dndActionIconButton': {
-            '&:hover .dndActionIcon': {
-                fill: theme.palette.action.active
-            }
-        }, '.dndActionIcon': {
-            fill: theme.palette.action.focus,
-            '&:hover': {
-                fill: theme.palette.action.active
-            }
-        }, '.fitSmallWidth': {
-            [theme.breakpoints.down('xs')]: {
-                maxWidth: 'calc(100% - 48px)'
-            }
-        }, '.inputAdornmentButton': {
-            width: '16px',
-            height: '16px',
-            bottom: '1px',
-            padding: 0,
-            '&:hover .placeholderContent': {
-                fill: theme.palette.primary.main,
-                color: theme.palette.primary.main,
-                fontWeight: 400,
-            }
-        }, '.inputAdornmentIcon': {
-            fontSize: theme.spacing(2),
-        }, '.switchLabel': {
-            marginRight: 'auto',
-            paddingRight: theme.spacing(2),
-            paddingTop: '1px',
-            fontSize: '14px'
-        }, '.switchWrapper': {
-            flexDirection: 'row-reverse',
-            justifyContent: 'space-between',
-            marginLeft: 0
-        }, '.switchLabelMargin': {
-            marginRight: '100px'
-        }, '.addButtonColor': {
-            color: theme.addButtonColor.color
-        }, '.labelOffset': {
-            marginLeft: '-14px'
-        }, '.listEditViewOffset': {
-            paddingRight: theme.spacing(8)
-        }, '.inlineIcon': {
-            marginTop: '2px',
-            fontSize: '0.875rem',
-            marginLeft: '0.2rem'
-        }, '.editInPlaceIcon': {
-            // visibility: "hidden",
-            fontSize: '14px',
-            color: theme.palette.divider,
-            verticalAlign: 'middle',
-        }, '.coloredHover': {
-            '&:hover': {
-                color: theme.palette.primary.main
-            }
-        }, '.submitButton': {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.contrastText
-        }, '.documentsSubmitButton': {
-            backgroundColor: theme.palette.primary.main,
-            color: theme.palette.primary.contrastText,
-            '&:hover': {
-                backgroundColor: darken(theme.palette.primary.main, 0.1),
-                color: theme.palette.primary.contrastText
-            }
-        }, '.errorColor': {
-            color: theme.palette.error.light
-        }, '.errorBackgroundColor': {
-            backgroundColor: theme.palette.error.light
-        }, '.errorColorFade-0-2': {
-            color: alpha(theme.palette.error.light, 0.2)
-        }, '.errorContrastColor': {
-            color: theme.palette.error.contrastText
-        }, '.primaryColor': {
-            color: theme.palette.primary.main
-        }, '.secondaryColor': {
-            color: theme.palette.secondary.main
-        }, '.warningColor': {
-            color: theme.palette.warning.light
-        }, '.successColor': {
-            color: theme.palette.success.light
-        }, '.successBackgroundColor': {
-            backgroundColor: theme.palette.success.light
-        }, '.primaryContarstText': {
-            color: theme.palette.primary.contrastText
-        }, '.primaryContarstHover': {
-            '&:hover': {
-                color: theme.palette.primary.contrastText
-            }
-        }, '.primaryContarstUnderline': {
-            '&:after': {
-                borderBottomColor: theme.palette.primary.contrastText
-            }
-        }, '.defaultBackgroundColor': {
-            backgroundColor: theme.appBar.header.background
-        }, '.paperBackgroundColor': {
-            background: theme.palette.background.paper
-        }, '.paperTextColor': {
-            color: theme.palette.background.paper
-        }, '.fullHeightWithoutAppBar': {
-            height: 'calc(100vh - 64px)'
-        }, '.linkDecoration': {
-            cursor: 'pointer',
-            '&:hover': {
-                textDecoration: 'underline',
-                color: theme.palette.secondary.main
-            }
-        }, '.graySmallFont12': {
-            color: theme.statistics.rightColumn.color,
-            fontSize: '12px'
-        }, '.smallIconButton': {
-            width: theme.spacing(4),
-            height: theme.spacing(4),
-            padding: theme.spacing(0.5)
-        }, '.lightGrayIconButton': {
-            color: alpha(theme.palette.text.primary, 0.2),
-            fontSize: '18px',
-            width: theme.spacing(4),
-            height: theme.spacing(4),
-            padding: theme.spacing(1)
-        }, '.lightGrayColor': {
-            color: alpha(theme.palette.text.primary, 0.2),
-        }, '.noRecordsMessage': {
-            color: theme.palette.grey[400],
-            flex: 1,
-            justifyContent: 'center',
-            alignItems: 'center',
-            display: 'flex'
-        }, '.textPrimaryColor': {
-            color: theme.palette.text.primary
-        }, '.textSecondaryColor': {
-            color: theme.palette.text.secondary
-        }, '.textGreyColor700': {
-            color: theme.palette.text.grey
-        }, '.iconColor': {
-            color: theme.palette.text.secondary,
-            marginLeft: theme.spacing(1)
-        }, '.money': {
-            fontFeatureSettings: '"tnum", "zero"'
-        }, '.closeAndClearButton': {
-            padding: theme.spacing(1)
-        }, '.appHeaderFontSize': {
-            fontSize: '1.125rem'
-        }, '.backgroundText': {
-            fontSize: theme.spacing(10),
-            textTransform: 'uppercase',
-            position: 'absolute',
-            top: '210px',
-            left: 0,
-            right: 0,
-            bottom: 0,
-            zIndex: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            transform: 'rotate(-35deg)',
-            fontWeight: theme.typography.fontWeightBold,
-            userSelect: 'none',
-            height: '200px'
-        }, '.summaryTopBorder': {
-            borderTop: `1px solid ${theme.palette.text.primary}`
-        }, '.selectedItemArrow': {
-            [theme.breakpoints.up('md')]: {
-                '&::after, &::before': {
-                    content: '""',
-                    position: 'absolute',
-                    top: '50%'
-                },
-                '&::after': {
-                    borderTop: '25px solid transparent',
-                    borderRight: `25px solid ${theme.palette.background.default}`,
-                    borderBottom: '25px solid transparent',
-                    transform: 'translateY(-50%)',
-                    right: -33,
-                    zIndex: 1
-                },
-                '&::before': {
-                    borderTop: `1px solid ${theme.palette.divider}`,
-                    borderRight: '1px solid transparent',
-                    borderLeft: `1px solid ${theme.palette.divider}`,
-                    transform: 'translateY(-50%) rotate(-45deg)',
-                    right: -50,
-                    zIndex: 2,
-                    padding: 17
-                }
-            }
-        }, '.selectItmeIcon': {
-            fontSize: '16px',
-            position: 'relative',
-            bottom: '-3px'
-        }, '.hoverIconContainer': {
-            '&:hover .hoverIcon': {
-                color: 'inherit',
-                visibility: 'visible',
-            }
-        }, '.gridTemplateColumns-1fr': {
-            gridTemplateColumns: 'minmax(0, 1fr) auto'
-        }, '.gridAutoFlow-column': {
-            gridAutoFlow: 'column'
-        }, '.dotsBackgroundImage': {
-            backgroundImage: `radial-gradient(${alpha(theme.palette.primary.main, 0.5)} 1.5px, transparent 1.5px),radial-gradient(${alpha(theme.palette.primary.main, 0.5)} 1.5px, transparent 1.5px)`,
-            backgroundPosition: '5px 4px, 20px 18px',
-            backgroundSize: '30px 30px',
-        } }), bootstrap(theme)), customOSScrollbars), animateStyles)
-});
-const GlobalStylesProvider = props => React.createElement("div", null, props.children);
-export default withStyles(globalStyles, { index: 10000 })(GlobalStylesProvider);
+const useStyles = makeAppStyles()({});
+export const GlobalStylesProvider = ({ children }) => {
+    const { theme, css } = useStyles();
+    return React.createElement(React.Fragment, null,
+        React.createElement(GlobalStyles, { styles: [
+                css(`
+          @font-face {
+            font-family: 'Inter';
+            font-weight: 100 900;
+            font-display: swap;
+            font-style: normal;
+            font-named-instance: 'Regular';
+            src: local('Inter'), url(${InterRomanVar}) format("woff2");
+          }
+          
+          @font-face {
+            font-family: 'Inter';
+            font-weight: 100 900;
+            font-display: swap;
+            font-style: italic;
+            font-named-instance: 'Italic';
+            src: local('Inter'), url(${InterItalicVar}) format("woff2");
+          }
+        `),
+                Object.assign(Object.assign(Object.assign(Object.assign({}, (theme.palette.mode === 'dark' ? { 'a': { color: '#90caf9' } } : {})), { '.appFrame': {
+                        position: 'relative',
+                        height: '100vh',
+                        background: theme.palette.background.default,
+                        flex: 1,
+                        maxWidth: '100%'
+                    }, '.activeAvatar': {
+                        color: theme.palette.primary.contrastText,
+                        backgroundColor: theme.palette.primary.main,
+                    }, '.root': {
+                        position: 'relative',
+                        display: 'flex',
+                        width: '100%',
+                        height: '100vh',
+                        overflowY: 'hidden'
+                    }, '.container': {
+                        display: 'flex',
+                        flexWrap: 'wrap'
+                    }, '.codeArea': {
+                        borderRadius: theme.shape.borderRadius,
+                        background: theme.table.contrastRow.main,
+                        padding: theme.spacing(1),
+                        border: 'none',
+                        outline: 'none',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        fontSize: 'inherit',
+                        fontFamily: 'inherit',
+                        color: 'inherit',
+                        width: '100%'
+                    }, '.appBarContainer': {
+                        marginTop: theme.spacing(8),
+                        height: `calc(100vh - ${theme.spacing(8)})`,
+                        overflowY: 'auto'
+                    }, '.card': {
+                        marginBottom: '20px',
+                        padding: '20px',
+                        minWidth: '800px'
+                    }, '.saveButtonTableOffset': {
+                        marginBottom: theme.spacing(8)
+                    }, '.editViewHeadingOffset': {
+                        marginTop: `-${theme.spacing(2)}`
+                    }, '.cardBorders': {
+                        borderRadius: theme.spacing(1),
+                        border: '2px solid',
+                        borderColor: alpha(theme.palette.text.disabled, 0.1),
+                    }, '.heading': {
+                        textTransform: 'uppercase',
+                        fontFamily: theme.typography.fontFamily,
+                        fontSize: theme.typography.fontSize,
+                        fontWeight: 'bold',
+                        color: theme.heading.color,
+                        lineHeight: 1.22
+                    }, '.secondaryHeading': {
+                        textTransform: 'uppercase',
+                        fontFamily: theme.typography.fontFamily,
+                        fontSize: theme.typography.fontSize - 2,
+                        fontWeight: 600,
+                        color: theme.heading.color,
+                        lineHeight: 1.45
+                    }, '.normalHeading': {
+                        fontFamily: theme.typography.fontFamily,
+                        fontSize: theme.typography.fontSize,
+                        fontWeight: 600,
+                        color: theme.heading.color,
+                        lineHeight: 1.45
+                    }, '.headingHover': {
+                        cursor: 'pointer',
+                        willChange: 'color',
+                        '&:hover': {
+                            color: darken(theme.heading.color, 0.4),
+                        }
+                    }, '.checkbox': {
+                        height: '35px',
+                        display: 'block',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    }, '.checkboxWidth': {
+                        width: '35px'
+                    }, '.placeholderContent': {
+                        opacity: 0.15,
+                        fontWeight: 400,
+                    }, '.link': {
+                        color: 'inherit',
+                        textDecoration: 'none'
+                    }, '.listItemPadding': {
+                        padding: theme.spacing(0.75, 3),
+                        minHeight: 'unset'
+                    }, '.appBarFab': {
+                        top: '31px',
+                        backgroundColor: 'black'
+                    }, '.payslipButton': {
+                        '&:hover': {
+                            backgroundColor: darken(theme.palette.primary.main, 0.1)
+                        }
+                    }, '.moreOptions': {
+                        boxShadow: theme.shadows[0],
+                        color: theme.palette.primary.contrastText,
+                        backgroundColor: theme.palette.primary.main,
+                        '&:hover': {
+                            color: theme.palette.primary.contrastText,
+                            backgroundColor: alpha(theme.palette.primary.main, 0.9)
+                        },
+                        margin: theme.spacing(0, 1)
+                    }, '.moreOptionsDisabled': {
+                        color: `${theme.palette.grey[500]} !important`,
+                        backgroundColor: `${theme.palette.grey[300]} !important`
+                    }, '.saveButtonEditView': {
+                        whiteSpace: 'nowrap',
+                        boxShadow: theme.shadows[2],
+                        '&:hover': {
+                            backgroundColor: darken(theme.palette.primary.main, 0.1)
+                        },
+                        margin: theme.spacing(1)
+                    }, '.saveButtonEditViewDisabled': {
+                        color: `${theme.palette.grey[500]} !important`,
+                        backgroundColor: `${theme.palette.grey[300]} !important`
+                    }, '.integrationsButton': {
+                        '&:hover': {
+                            backgroundColor: darken(theme.palette.primary.main, 0.1)
+                        }
+                    }, '.licencesUpgradeButton': {
+                        '&:hover': {
+                            backgroundColor: darken(theme.palette.primary.main, 0.1)
+                        }
+                    }, '.closeAppBarButton': {
+                        color: theme.appBarButton.close.color
+                    }, '.whiteAppBarButton': {
+                        color: theme.palette.primary.main,
+                        backgroundColor: theme.palette.primary.contrastText,
+                        marginLeft: theme.spacing(1),
+                        '&:hover': {
+                            color: theme.palette.primary.main,
+                            backgroundColor: alpha(theme.palette.primary.contrastText, 0.9)
+                        }
+                    }, '.whiteAppBarButtonDisabled': {
+                        color: `${theme.palette.primary.main} !important`,
+                        backgroundColor: `${alpha(theme.palette.primary.contrastText, 0.3)} !important`
+                    }, '.avetmissButton': {
+                        '&:hover': {
+                            backgroundColor: darken(theme.palette.primary.main, 0.1),
+                            color: theme.palette.primary.contrastText
+                        }
+                    }, '.hoverGrayIcon': {
+                        '&:hover': {
+                            fill: theme.palette.action.hover
+                        }
+                    }, '.dndActionIconButton': {
+                        '&:hover .dndActionIcon': {
+                            fill: theme.palette.action.active
+                        }
+                    }, '.dndActionIcon': {
+                        fill: theme.palette.action.focus,
+                        '&:hover': {
+                            fill: theme.palette.action.active
+                        }
+                    }, '.fitSmallWidth': {
+                        [theme.breakpoints.down('xs')]: {
+                            maxWidth: 'calc(100% - 48px)'
+                        }
+                    }, '.inputAdornmentButton': {
+                        width: '16px',
+                        height: '16px',
+                        bottom: '1px',
+                        padding: 0,
+                        '&:hover .placeholderContent': {
+                            fill: theme.palette.primary.main,
+                            color: theme.palette.primary.main,
+                            fontWeight: 400,
+                        }
+                    }, '.inputAdornmentIcon': {
+                        fontSize: theme.spacing(2),
+                    }, '.switchLabel': {
+                        marginRight: 'auto',
+                        paddingRight: theme.spacing(2),
+                        paddingTop: '1px',
+                        fontSize: '14px'
+                    }, '.switchWrapper': {
+                        flexDirection: 'row-reverse',
+                        justifyContent: 'space-between',
+                        marginLeft: 0
+                    }, '.switchLabelMargin': {
+                        marginRight: '100px'
+                    }, '.addButtonColor': {
+                        color: theme.addButtonColor.color
+                    }, '.labelOffset': {
+                        marginLeft: '-14px'
+                    }, '.listEditViewOffset': {
+                        paddingRight: theme.spacing(8)
+                    }, '.inlineIcon': {
+                        marginTop: '2px',
+                        fontSize: '0.875rem',
+                        marginLeft: '0.2rem'
+                    }, '.editInPlaceIcon': {
+                        // visibility: "hidden",
+                        fontSize: '14px',
+                        color: theme.palette.divider,
+                        verticalAlign: 'middle',
+                    }, '.coloredHover': {
+                        '&:hover': {
+                            color: theme.palette.primary.main
+                        }
+                    }, '.submitButton': {
+                        backgroundColor: theme.palette.primary.main,
+                        color: theme.palette.primary.contrastText
+                    }, '.documentsSubmitButton': {
+                        backgroundColor: theme.palette.primary.main,
+                        color: theme.palette.primary.contrastText,
+                        '&:hover': {
+                            backgroundColor: darken(theme.palette.primary.main, 0.1),
+                            color: theme.palette.primary.contrastText
+                        }
+                    }, '.errorColor': {
+                        color: theme.palette.error.light
+                    }, '.errorBackgroundColor': {
+                        backgroundColor: theme.palette.error.light
+                    }, '.errorColorFade-0-2': {
+                        color: alpha(theme.palette.error.light, 0.2)
+                    }, '.errorContrastColor': {
+                        color: theme.palette.error.contrastText
+                    }, '.primaryColor': {
+                        color: theme.palette.primary.main
+                    }, '.secondaryColor': {
+                        color: theme.palette.secondary.main
+                    }, '.warningColor': {
+                        color: theme.palette.warning.light
+                    }, '.successColor': {
+                        color: theme.palette.success.light
+                    }, '.successBackgroundColor': {
+                        backgroundColor: theme.palette.success.light
+                    }, '.primaryContarstText': {
+                        color: theme.palette.primary.contrastText
+                    }, '.primaryContarstHover': {
+                        '&:hover': {
+                            color: theme.palette.primary.contrastText
+                        }
+                    }, '.primaryContarstUnderline': {
+                        '&:after': {
+                            borderBottomColor: theme.palette.primary.contrastText
+                        }
+                    }, '.defaultBackgroundColor': {
+                        backgroundColor: theme.appBar.header.background
+                    }, '.paperBackgroundColor': {
+                        background: theme.palette.background.paper
+                    }, '.paperTextColor': {
+                        color: theme.palette.background.paper
+                    }, '.fullHeightWithoutAppBar': {
+                        height: 'calc(100vh - 64px)'
+                    }, '.linkDecoration': {
+                        cursor: 'pointer',
+                        '&:hover': {
+                            textDecoration: 'underline',
+                            color: theme.palette.secondary.main
+                        }
+                    }, '.graySmallFont12': {
+                        color: theme.statistics.rightColumn.color,
+                        fontSize: '12px'
+                    }, '.smallIconButton': {
+                        width: theme.spacing(4),
+                        height: theme.spacing(4),
+                        padding: theme.spacing(0.5)
+                    }, '.lightGrayIconButton': {
+                        color: alpha(theme.palette.text.primary, 0.2),
+                        fontSize: '18px',
+                        width: theme.spacing(4),
+                        height: theme.spacing(4),
+                        padding: theme.spacing(1)
+                    }, '.lightGrayColor': {
+                        color: alpha(theme.palette.text.primary, 0.2),
+                    }, '.noRecordsMessage': {
+                        color: theme.palette.grey[400],
+                        flex: 1,
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        display: 'flex'
+                    }, '.textPrimaryColor': {
+                        color: theme.palette.text.primary
+                    }, '.textSecondaryColor': {
+                        color: theme.palette.text.secondary
+                    }, '.textGreyColor700': {
+                        color: theme.palette.text.grey
+                    }, '.iconColor': {
+                        color: theme.palette.text.secondary,
+                        marginLeft: theme.spacing(1)
+                    }, '.money': {
+                        fontFeatureSettings: '"tnum", "zero"'
+                    }, '.closeAndClearButton': {
+                        padding: theme.spacing(1)
+                    }, '.appHeaderFontSize': {
+                        fontSize: '1.125rem'
+                    }, '.backgroundText': {
+                        fontSize: theme.spacing(10),
+                        textTransform: 'uppercase',
+                        position: 'absolute',
+                        top: '210px',
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 0,
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        transform: 'rotate(-35deg)',
+                        fontWeight: theme.typography.fontWeightBold,
+                        userSelect: 'none',
+                        height: '200px'
+                    }, '.summaryTopBorder': {
+                        borderTop: `1px solid ${theme.palette.text.primary}`
+                    }, '.selectedItemArrow': {
+                        [theme.breakpoints.up('md')]: {
+                            '&::after, &::before': {
+                                content: '""',
+                                position: 'absolute',
+                                top: '50%'
+                            },
+                            '&::after': {
+                                borderTop: '25px solid transparent',
+                                borderRight: `25px solid ${theme.palette.background.default}`,
+                                borderBottom: '25px solid transparent',
+                                transform: 'translateY(-50%)',
+                                right: -33,
+                                zIndex: 1
+                            },
+                            '&::before': {
+                                borderTop: `1px solid ${theme.palette.divider}`,
+                                borderRight: '1px solid transparent',
+                                borderLeft: `1px solid ${theme.palette.divider}`,
+                                transform: 'translateY(-50%) rotate(-45deg)',
+                                right: -50,
+                                zIndex: 2,
+                                padding: 17
+                            }
+                        }
+                    }, '.selectItmeIcon': {
+                        fontSize: '16px',
+                        position: 'relative',
+                        bottom: '-3px'
+                    }, '.hoverIconContainer': {
+                        '&:hover .hoverIcon': {
+                            color: 'inherit',
+                            visibility: 'visible',
+                        }
+                    }, '.gridTemplateColumns-1fr': {
+                        gridTemplateColumns: 'minmax(0, 1fr) auto'
+                    }, '.gridAutoFlow-column': {
+                        gridAutoFlow: 'column'
+                    }, '.dotsBackgroundImage': {
+                        backgroundImage: `radial-gradient(${alpha(theme.palette.primary.main, 0.5)} 1.5px, transparent 1.5px),radial-gradient(${alpha(theme.palette.primary.main, 0.5)} 1.5px, transparent 1.5px)`,
+                        backgroundPosition: '5px 4px, 20px 18px',
+                        backgroundSize: '30px 30px',
+                    }, 
+                    // Bootstrap
+                    strong: {
+                        fontWeight: 'bold'
+                    }, '.fontWeight-normal': {
+                        fontWeight: 'normal'
+                    }, '.fontWeight600': {
+                        fontWeight: 600
+                    }, '.text-bold': {
+                        fontWeight: theme.typography.fontWeightBold
+                    }, '.text-bolder': {
+                        fontWeight: 'bolder'
+                    }, '.fs2': {
+                        fontSize: theme.spacing(2)
+                    }, '.fs3': {
+                        fontSize: theme.spacing(3)
+                    }, '.fs4': {
+                        fontSize: theme.spacing(4)
+                    }, '.fs8': {
+                        fontSize: theme.spacing(8)
+                    }, '.fs10': {
+                        fontSize: theme.spacing(10)
+                    }, '.fs19': {
+                        fontSize: theme.spacing(19)
+                    }, '.fw300': {
+                        fontWeight: 300
+                    }, '.fsInherit': {
+                        fontSize: 'inherit'
+                    }, '.relative': {
+                        position: 'relative'
+                    }, '.absolute': {
+                        position: 'absolute'
+                    }, '.fixed': {
+                        position: 'fixed'
+                    }, '.sticky': {
+                        position: 'sticky'
+                    }, '.left-0': {
+                        left: 0
+                    }, '.top-0': {
+                        top: 0
+                    }, '.right-0': {
+                        right: 0
+                    }, '.bottom-0': {
+                        bottom: 0
+                    }, '.pt-10': {
+                        paddingTop: theme.spacing(10)
+                    }, '.pr-6': {
+                        paddingRight: theme.spacing(6)
+                    }, '.p-4': {
+                        padding: theme.spacing(4)
+                    }, '.pr-4': {
+                        paddingRight: theme.spacing(4)
+                    }, '.p-3': {
+                        padding: theme.spacing(3)
+                    }, '.pt-3': {
+                        paddingTop: theme.spacing(3)
+                    }, '.pl-3': {
+                        paddingLeft: theme.spacing(3)
+                    }, '.pr-3': {
+                        paddingRight: theme.spacing(3)
+                    }, '.pb-3': {
+                        paddingBottom: theme.spacing(3)
+                    }, '.p-2': {
+                        padding: theme.spacing(2)
+                    }, '.pl-2': {
+                        paddingLeft: theme.spacing(2)
+                    }, '.pr-2': {
+                        paddingRight: theme.spacing(2)
+                    }, '.pb-2': {
+                        paddingBottom: theme.spacing(2)
+                    }, '.pt-2': {
+                        paddingTop: theme.spacing(2)
+                    }, '.p-1': {
+                        padding: theme.spacing(1)
+                    }, '.pt-1': {
+                        paddingTop: theme.spacing(1)
+                    }, '.pb-1': {
+                        paddingBottom: theme.spacing(1)
+                    }, '.pl-1': {
+                        paddingLeft: theme.spacing(1)
+                    }, '.pr-1': {
+                        paddingRight: theme.spacing(1)
+                    }, '.p-0-5': {
+                        padding: theme.spacing(0.5)
+                    }, '.pl-0-5': {
+                        paddingLeft: theme.spacing(0.5)
+                    }, '.pt-0-5': {
+                        paddingTop: theme.spacing(0.5)
+                    }, '.pr-0-5': {
+                        paddingRight: theme.spacing(0.5)
+                    }, '.pb-0-5': {
+                        paddingBottom: theme.spacing(0.5)
+                    }, '.p-0': {
+                        padding: 0
+                    }, '.pl-0': {
+                        paddingLeft: 0
+                    }, '.pt-0': {
+                        paddingTop: 0
+                    }, '.pr-0': {
+                        paddingRight: 0
+                    }, '.pb-0': {
+                        paddingBottom: 0
+                    }, '.m-3': {
+                        margin: theme.spacing(3)
+                    }, '.mt-5': {
+                        marginTop: theme.spacing(5)
+                    }, '.mt-4': {
+                        marginTop: theme.spacing(4)
+                    }, '.mt-3': {
+                        marginTop: theme.spacing(3)
+                    }, '.ml-3': {
+                        marginLeft: theme.spacing(3)
+                    }, '.mr-5': {
+                        marginRight: theme.spacing(5)
+                    }, '.mr-4': {
+                        marginRight: theme.spacing(4)
+                    }, '.mr-3': {
+                        marginRight: theme.spacing(3)
+                    }, '.mb-5': {
+                        marginBottom: theme.spacing(5)
+                    }, '.mb-4': {
+                        marginBottom: theme.spacing(4)
+                    }, '.mb-3': {
+                        marginBottom: theme.spacing(3)
+                    }, '.m-2': {
+                        margin: theme.spacing(2)
+                    }, '.mt-2': {
+                        marginTop: theme.spacing(2)
+                    }, '.ml-2': {
+                        marginLeft: theme.spacing(2)
+                    }, '.mr-2': {
+                        marginRight: theme.spacing(2)
+                    }, '.mb-2': {
+                        marginBottom: theme.spacing(2)
+                    }, '.m-1': {
+                        margin: theme.spacing(1)
+                    }, '.mt-1': {
+                        marginTop: theme.spacing(1)
+                    }, '.ml-1': {
+                        marginLeft: theme.spacing(1)
+                    }, '.mr-1': {
+                        marginRight: theme.spacing(1)
+                    }, '.mr-auto': {
+                        marginRight: 'auto'
+                    }, '.ml-auto': {
+                        marginLeft: 'auto'
+                    }, '.mb-1': {
+                        marginBottom: theme.spacing(1)
+                    }, '.mt-0-5': {
+                        marginTop: theme.spacing(0.5)
+                    }, '.mr-0-5': {
+                        marginRight: theme.spacing(0.5)
+                    }, '.ml-0-5': {
+                        marginLeft: theme.spacing(0.5)
+                    }, '.mb-0-5': {
+                        marginBottom: theme.spacing(0.5)
+                    }, '.m-0': {
+                        margin: 0
+                    }, '.mt-auto': {
+                        marginTop: 'auto'
+                    }, '.mb-auto': {
+                        marginBottom: 'auto'
+                    }, '.ml-0': {
+                        marginLeft: 0
+                    }, '.mt-0': {
+                        marginTop: 0
+                    }, '.mr-0': {
+                        marginRight: 0
+                    }, '.mb-0': {
+                        marginBottom: 0
+                    }, '.text-uppercase': {
+                        textTransform: 'uppercase'
+                    }, '.overflow-visible': {
+                        overflow: 'visible'
+                    }, '.overflow-hidden': {
+                        overflow: 'hidden'
+                    }, '.overflow-x-hidden': {
+                        overflowX: 'hidden'
+                    }, '.overflow-y-auto': {
+                        overflowY: 'auto'
+                    }, '.overflow-auto': {
+                        overflow: 'auto'
+                    }, '.overflow-initial': {
+                        overflow: 'initial'
+                    }, '.d-block': {
+                        display: 'block'
+                    }, '.d-inline': {
+                        display: 'inline'
+                    }, '.d-inline-block': {
+                        display: 'inline-block'
+                    }, '.d-grid': {
+                        display: 'grid'
+                    }, '.d-flex': {
+                        display: 'flex'
+                    }, '.d-inline-flex': {
+                        display: 'inline-flex'
+                    }, '.flex-row': {
+                        display: 'flex',
+                        flexDirection: 'row'
+                    }, '.flex-column': {
+                        display: 'flex',
+                        flexDirection: 'column'
+                    }, '.centeredFlex': {
+                        display: 'flex',
+                        alignItems: 'center'
+                    }, '.d-flex-start': {
+                        display: 'flex',
+                        alignItems: 'flex-start'
+                    }, '.d-inline-flex-center': {
+                        display: 'inline-flex',
+                        alignItems: 'center'
+                    }, '.d-none': {
+                        display: 'none'
+                    }, '.flex-fill': {
+                        flex: 1
+                    }, '.flex-nowrap': {
+                        flexWrap: 'nowrap'
+                    }, '.flex-wrap': {
+                        flexWrap: 'wrap'
+                    }, '.align-items-baseline': {
+                        alignItems: 'baseline'
+                    }, '.align-items-center': {
+                        alignItems: 'center'
+                    }, '.align-items-start': {
+                        alignItems: 'flex-start'
+                    }, '.align-items-end': {
+                        alignItems: 'flex-end'
+                    }, '.align-content-between': {
+                        alignContent: 'space-between'
+                    }, '.align-content-start': {
+                        alignContent: 'flex-start'
+                    }, '.justify-content-end': {
+                        justifyContent: 'flex-end'
+                    }, '.justify-content-start': {
+                        justifyContent: 'flex-start'
+                    }, '.justify-content-center': {
+                        justifyContent: 'center'
+                    }, '.justify-content-space-between': {
+                        justifyContent: 'space-between'
+                    }, '.outline-none': {
+                        outline: 'none'
+                    }, '.disabled': {
+                        opacity: theme.palette.action.disabledOpacity,
+                        pointerEvents: 'none'
+                    }, '.text-op065': {
+                        color: alpha(theme.palette.text.primary, 0.65),
+                    }, '.text-op05': {
+                        color: alpha(theme.palette.text.primary, 0.5),
+                    }, '.invisible': {
+                        visibility: 'hidden'
+                    }, '.visible': {
+                        visibility: 'visible'
+                    }, '.text-left': {
+                        textAlign: 'left'
+                    }, '.text-center': {
+                        textAlign: 'center'
+                    }, '.text-end': {
+                        textAlign: 'end'
+                    }, '.text-disabled': {
+                        color: theme.palette.text.disabled
+                    }, '.cursor-grab': {
+                        cursor: 'grab'
+                    }, '.cursor-pointer': {
+                        cursor: 'pointer'
+                    }, '.cursor-text': {
+                        cursor: 'text'
+                    }, '.pointer-events-none': {
+                        pointerEvents: 'none'
+                    }, '.text-truncate': {
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    }, '.text-nowrap': {
+                        whiteSpace: 'nowrap'
+                    }, '.text-pre-wrap': {
+                        whiteSpace: 'pre-wrap'
+                    }, '.text-pre-line': {
+                        whiteSpace: 'pre-line'
+                    }, '.text-pre': {
+                        whiteSpace: 'pre'
+                    }, '.text-break-spaces': {
+                        whiteSpace: 'break-spaces'
+                    }, '.word-break-all': {
+                        wordBreak: 'break-all'
+                    }, '.h-100': {
+                        height: '100%'
+                    }, '.w-100': {
+                        width: '100%'
+                    }, '.mw-100': {
+                        maxWidth: '100%'
+                    }, '.w-50': {
+                        width: '50%'
+                    }, '.mw-800': {
+                        maxWidth: theme.spacing(100)
+                    }, '.mw-500': {
+                        maxWidth: theme.spacing(62.5)
+                    }, '.mw-600': {
+                        maxWidth: theme.spacing(75)
+                    }, '.mw-400': {
+                        maxWidth: theme.spacing(50)
+                    }, '.text-reset': {
+                        color: 'inherit'
+                    }, '.text-white': {
+                        color: '#fff'
+                    }, '.zIndex1401': {
+                        zIndex: theme.zIndex.snackbar + 1
+                    }, '.zIndex9': {
+                        zIndex: 9
+                    }, '.zIndex2': {
+                        zIndex: 2
+                    }, '.zIndex1': {
+                        zIndex: 1
+                    }, '.zIndex0': {
+                        zIndex: 0
+                    }, '.box-shadow-none': {
+                        boxShadow: 'none'
+                    }, '.user-select-none': Object.assign({ WebkitTouchCallout: 'none', KhtmlUserSelect: 'none' }, prefixer('userSelect', 'none')), '.vert-align-mid': {
+                        verticalAlign: 'middle'
+                    }, '.vert-align-bl': {
+                        verticalAlign: 'baseline'
+                    }, '.grid-temp-col-3-fr': {
+                        gridTemplateColumns: '1fr 1fr 1fr'
+                    }, '.grid-temp-col-2-fr': {
+                        gridTemplateColumns: '1fr 1fr'
+                    }, '.lh-1': {
+                        lineHeight: 1,
+                    }, '.text-decoration-underline': {
+                        textDecoration: 'underline',
+                    } }), customOSScrollbars), animateStyles)
+            ] }),
+        children);
+};