@learningpool/ui 1.4.0 → 1.6.0-beta.2

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -9,30 +9,46 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Avatar, Drawer as SSDrawer, List, ListItemText } from '../../../index';
+import { Avatar, Drawer, Modal, List, Tooltip } from '../../../index';
 import { Box, Link } from '@mui/material';
 import MailIcon from '@mui/icons-material/Mail';
-import { StreamSuiteLogo } from '../../../assets/Images';
+import { StreamSuiteLogo, NotchSVG } from '../../../assets/Images';
 import { AppSwitcher } from '@learningpool/app-switcher';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { DRAWER_WIDTH, paperStyles, openedMixin, closedMixin, DrawerHeader, ListItem, DrawerToggle, DrawerToggleHitboxContent, ListItemButton, ListItemAvatar, ListItemIcon } from './VerticalNavigationStyles';
-var Drawer = styled(SSDrawer)(function (_a) {
+import { DRAWER_WIDTH, DrawerHeader, ListItem, DrawerToggle, DrawerToggleHitboxContent, ListItemButton, ListItemAvatar, ListItemIcon, ListItemText, StyledNav, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, paperStyles, closedMixin, openedMixin } from './VerticalNavigationStyles';
+var StyledDrawer = styled(Drawer)(function (_a) {
     var theme = _a.theme, open = _a.open;
-    return (__assign(__assign({ width: DRAWER_WIDTH.Expanded, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box', boxShadow: 'none' }, (open && __assign(__assign({}, openedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), openedMixin(theme)) }))), (!open && __assign(__assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), closedMixin(theme)) }))));
+    return (__assign(__assign({ boxShadow: 'none', boxSizing: 'border-box', flexShrink: 0, whiteSpace: 'nowrap', width: DRAWER_WIDTH.Expanded }, (open && __assign(__assign({}, openedMixin()), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), openedMixin()) }))), (!open && __assign(__assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), closedMixin(theme)) }))));
 });
 var VerticalNavigation = function (props) {
-    var _a;
+    var _a, _b;
     var theme = useTheme();
-    var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText;
+    var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText, streamHomeApiKey = props.streamHomeApiKey, streamHomeBaseUrl = props.streamHomeBaseUrl, streamHomeAccessToken = props.streamHomeAccessToken;
+    var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
-    var _b = React.useState(false), isDrawerOpen = _b[0], setIsDrawerOpen = _b[1];
+    var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
     var isMediumAndUp = useMediaQuery(theme.breakpoints.up('sm'));
     var logoHeight = isMediumAndUp ? '46px' : '38px';
     var logoWidth = isMediumAndUp ? '46px' : '38px';
+    useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
+    var handleAvatarInitials = function (avatarName) {
+        var _a, _b;
+        var firstInitial = avatarName.split('')[0] || '';
+        var secondInitial = '';
+        if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            firstInitial = avatarName.split(' ')[0][0];
+            if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
+            }
+        }
+        return "".concat(firstInitial).concat(secondInitial);
+    };
+    var _d = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _d[0], setAvatarInitials = _d[1];
     var toggleDrawer = function (open) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -42,23 +58,17 @@ var VerticalNavigation = function (props) {
         }
         setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
     }; };
-    var listContent = function () {
-        var _a, _b, _c, _d;
-        return (_jsxs(Box
-        // onClick={toggleDrawer(false)}
-        // onKeyDown={toggleDrawer(false)}
-        , __assign({ 
-            // onClick={toggleDrawer(false)}
-            // onKeyDown={toggleDrawer(false)}
-            sx: {
-                display: 'flex',
-                flex: '1 auto',
-                flexDirection: 'column',
-                justifyContent: 'flex-start'
-            } }, { children: [_jsxs(DrawerHeader, { children: [logo
-                            ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
-                                    marginRight: isMediumAndUp ? '20px' : '24px'
-                                }, alt: "Site Logo" }))
+    var listContent = function () { return (_jsxs(Box, __assign({ sx: {
+            display: 'flex',
+            flex: '1 auto',
+            flexDirection: 'column',
+            justifyContent: 'flex-start'
+        } }, { children: [_jsxs(DrawerHeader, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
+                            ? typeof logo === 'string'
+                                ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
+                                        marginRight: isMediumAndUp ? '20px' : '24px'
+                                    }, alt: "Site Logo" }))
+                                : logo
                             : (_jsx(StreamSuiteLogo, { style: {
                                     height: logoHeight,
                                     width: logoWidth,
@@ -66,129 +76,62 @@ var VerticalNavigation = function (props) {
                                     fill: theme.palette.mode === 'dark'
                                         ? theme.palette.primary.contrastText
                                         : theme.palette.primary.main
-                                } })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '' })] }), _jsxs("div", __assign({ style: {
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        height: 'auto',
-                        marginTop: "-".concat(theme.spacing(0.5)),
-                        position: 'relative',
-                        transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
-                        width: '100%',
-                        zIndex: '-1'
-                    } }, { children: [_jsx("div", { style: {
-                                flex: '1',
-                                width: 'auto',
-                                height: 'auto',
-                                backgroundColor: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.background.paper
-                            } }), _jsx("div", { style: {
-                                display: 'flex',
-                                width: '45px',
-                                height: '85px',
-                                clipPath: 'url("#notch")',
-                                backgroundColor: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.background.paper
-                            } }), _jsx("div", { style: {
-                                backgroundColor: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.background.paper,
-                                height: '90px',
-                                position: 'absolute',
-                                right: '25px',
-                                top: '-2px',
-                                width: 'calc(100% - 25px)'
-                            } })] })), _jsx("svg", __assign({ className: 'notch-svg', style: {
-                        width: '0',
-                        height: '0',
-                        position: 'absolute'
-                    } }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), _jsx(List, __assign({ sx: {
-                        height: '100%',
-                        // padding: `${theme.spacing(0)} 10px`,
-                        backgroundColor: theme.palette.mode === 'dark'
-                            ? theme.palette.primary.main
-                            : theme.palette.background.paper,
-                        marginTop: "-".concat(theme.spacing(0.5))
-                    } }, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-                        var _a;
-                        return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
-                            // @ts-expect-error
-                            , __assign({ 
-                                // @ts-expect-error
-                                component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
-                    }) })), _jsxs(List, __assign({ sx: {
-                        marginTop: 'auto',
-                        backgroundColor: theme.palette.mode === 'dark'
-                            ? theme.palette.primary.main
-                            : theme.palette.background.paper
-                    } }, { children: [hasStreamHome
-                            ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
-                                        minHeight: 48,
-                                        justifyContent: isDrawerOpen ? 'initial' : 'center'
-                                    } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
-                                                minWidth: 0,
-                                                mr: isDrawerOpen ? 2.5 : 'auto',
-                                                justifyContent: 'center'
-                                            } }, { children: _jsx(AppSwitcher, { apiKey: (_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_STREAM_HOME_API_KEY) !== null && _b !== void 0 ? _b : '7wxswYRq238tj65RVina32VSzmpGamju7Edvbrab', baseUrl: (_d = (_c = process === null || process === void 0 ? void 0 : process.env) === null || _c === void 0 ? void 0 : _c.REACT_APP_STREAM_HOME_API_URL) !== null && _d !== void 0 ? _d : 'https://6cqjg9ua08.execute-api.us-east-1.amazonaws.com/dev-api', token: 'hfcfgcgfcgfhcfhgcfg' }) })), _jsx(ListItemText, { primary: 'App switcher', sx: { opacity: isDrawerOpen ? 1 : 0 } })] })) })))
-                            : null, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map(function (item, index) {
+                                } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen })] }), _jsxs(NotchContainer, { children: [_jsx(NotchBackground, {}), _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] }), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsxs(StyledNav, { children: [_jsx(List, __assign({ sx: {
+                            height: '100%',
+                            width: DRAWER_WIDTH.Expanded,
+                            marginTop: "-".concat(theme.spacing(0.5))
+                        } }, { children: items && items.length > 0 && items.map(function (item, index) {
                             var _a;
                             return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
                                 // @ts-expect-error
                                 , __assign({ 
                                     // @ts-expect-error
-                                    component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
-                        }), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemAvatar
-                            // @ts-expect-error
-                            , __assign({ 
-                                // @ts-expect-error
-                                component: Link }, { children: [_jsx(ListItemIcon, __assign({ sx: { mr: isDrawerOpen ? 3.5 : 'auto' } }, { children: _jsxs(Avatar, __assign({ sx: {
-                                                bgcolor: theme.palette.mode === 'dark'
-                                                    ? theme.palette.primary.contrastText
-                                                    : theme.palette.primary.main
-                                            } }, { children: [avatarName.split(' ')[0][0], avatarName.split(' ')[1][0]] })) })), _jsx(ListItemText, { primary: avatarName, sx: {
-                                            opacity: isDrawerOpen ? 1 : 0,
-                                            textAlign: 'left'
-                                        } })] })) }))] }))] })));
-    };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'drawerShadow', style: {
-                    position: 'fixed',
-                    top: '0',
-                    left: '27px',
-                    content: '',
-                    background: 'rgba(0,0,0,0.125)',
-                    height: '100%',
-                    width: '40px',
-                    display: 'block',
-                    visibility: 'visible',
-                    filter: 'blur(13px)'
-                } }), _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close drawer' : 'Open drawer', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
-                    left: isDrawerOpen ? '229px' : (isMediumAndUp ? '44px' : '36px')
-                } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
-                        ? (_jsx(ChevronLeft, { sx: {
-                                fontSize: '1.75rem',
-                                height: '1.75rem',
-                                width: '1.75rem'
-                            } }))
-                        : (_jsx(ChevronRight, { sx: {
-                                fontSize: '1.75rem',
-                                height: '1.75rem',
-                                width: '1.75rem'
-                            } })) }) })), _jsx(Drawer, __assign({ "aria-label": "Navigation menu", id: "vertical-navigation", component: 'aside', role: "complementary", anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
-                    keepMounted: true
-                }, sx: {
-                    '.MuiDrawer-paper': {
-                        background: 'transparent none',
-                        boxShadow: 'none',
-                        visibility: 'visible !important',
-                        transform: 'translateX(0) !important',
-                        // width: isDrawerOpen
-                        //   ? `${DRAWER_WIDTH.Expanded}px`
-                        //   : `${DRAWER_WIDTH.Collapsed}px`,
-                        // boxShadow: 'none',
-                        overflow: 'hidden',
-                        transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important'
-                    }
-                } }, { children: listContent() }))] }));
+                                    component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen, index: index })] }), item.label) })));
+                        }) })), _jsxs(List, __assign({ sx: {
+                            width: DRAWER_WIDTH.Expanded,
+                            marginTop: 'auto',
+                            backgroundColor: theme.palette.mode === 'dark'
+                                ? theme.palette.primary.main
+                                : theme.palette.background.paper
+                        } }, { children: [hasStreamHome
+                                ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
+                                            minHeight: 48,
+                                            justifyContent: isDrawerOpen ? 'initial' : 'center'
+                                        } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ sx: {
+                                                        minWidth: 0,
+                                                        mr: isDrawerOpen ? 2.5 : 'auto',
+                                                        justifyContent: 'center'
+                                                    } }, { children: _jsx(AppSwitcher, { apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '' }) })) })), _jsx(ListItemText, { primary: 'App switcher', isDrawerOpen: isDrawerOpen })] })) })))
+                                : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
+                                var _a;
+                                return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
+                                    // @ts-expect-error
+                                    , __assign({ 
+                                        // @ts-expect-error
+                                        component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen, index: index }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen })] }), item.label) })));
+                            }), avatarName
+                                ? (_jsx(ListItem, __assign({ disablePadding: true, sx: {
+                                        overflow: 'hidden'
+                                    } }, { children: _jsxs(ListItemAvatar, __assign({ isDrawerOpen: isDrawerOpen, component: Link }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: avatarName, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true, sx: { mr: 3 } }, { children: _jsx(Avatar, __assign({ sx: {
+                                                            bgcolor: theme.palette.mode === 'dark'
+                                                                ? theme.palette.primary.contrastText
+                                                                : theme.palette.primary.main
+                                                        } }, { children: avatarInitials })) })) })), _jsx(ListItemText, { primary: avatarName, isDrawerOpen: isDrawerOpen })] })) })))
+                                : null] }))] })] }))); };
+    return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsxs(StyledDrawer, __assign({ "aria-label": 'Navigation Menu', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
+                        keepMounted: true
+                    }, variant: 'permanent' }, { children: [_jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menu' : 'Open Navigation Menu', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
+                                left: isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 21, "px") : (isMediumAndUp ? '44px' : '36px')
+                            } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
+                                    ? (_jsx(ChevronLeft, { sx: {
+                                            fontSize: '1.75rem',
+                                            height: '1.75rem',
+                                            width: '1.75rem'
+                                        } }))
+                                    : (_jsx(ChevronRight, { sx: {
+                                            fontSize: '1.75rem',
+                                            height: '1.75rem',
+                                            width: '1.75rem'
+                                        } })) }) })), listContent()] })) }))] }));
 };
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react-addons-linked-state-mixin" />
 import { Theme } from '@mui/material';
 import { CSSObject } from '@mui/material/styles';
 export declare const DRAWER_WIDTH: {
@@ -7,7 +6,7 @@ export declare const DRAWER_WIDTH: {
     Expanded: number;
 };
 export declare const paperStyles: (theme: Theme) => CSSObject;
-export declare const openedMixin: (theme: Theme) => CSSObject;
+export declare const openedMixin: () => CSSObject;
 export declare const closedMixin: (theme: Theme) => CSSObject;
 export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const ListItem: import("@emotion/styled").StyledComponent<{
@@ -21,17 +20,8 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    edge?: false | "end" | "start" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & Omit<{
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -47,11 +37,12 @@ export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isDrawerOpen?: any;
+}, {}, {}>;
+export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -69,8 +60,28 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isDrawerOpen?: any;
+} & {
+    children?: import("react").ReactNode;
+} & {
+    isDrawerOpen?: any;
+}, {}, {}>;
+export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isDrawerOpen?: any;
+    index?: number | undefined;
+}, {}, {}>;
+export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -86,9 +97,51 @@ export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<i
     tabIndex?: number | undefined;
     TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const StyledAside: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const StyledNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+export declare const DrawerShadow: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
     children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+    isDrawerOpen?: any;
 }, {}, {}>;
-export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NotchContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NotchBackground: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NotchBackgroundClip: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NotchSeemMask: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;