@learningpool/ui 1.8.4 → 1.8.6

package/components/navigation/MobileNavigation/MobileNavigation.js

@@ -23,8 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { Person } from '@mui/icons-material';
-import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation } from './MobileNavigationStyles';
-import { StyledAvatar } from './MobileNavigationAvatarStyles';
+import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation, StyledAvatar } from './MobileNavigationStyles';
 import SwipeableTemporaryDrawer from './MobileNavigationDrawer';
 import SwipeableTemporarySearch from './MobileNavigationSearch';
 import SwipeableTemporaryAvatar from './MobileNavigationAvatar';

package/components/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -63,10 +63,10 @@ var SwipeableTemporaryAvatar = function (props) {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: function () {
+                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
                                             handleOpenState(false);
                                             avatarPanelOnClickViewProfile();
-                                        } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
+                                        } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(StyledOutlineButton, __assign({ size: 'medium', variant: 'outlined', color: 'inherit', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
                                             handleOpenState(false);
                                             avatarPanelOnClickEditProfile();
                                         } }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
@@ -95,7 +95,7 @@ var SwipeableTemporaryAvatar = function (props) {
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: function () {
+                            component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
                                 handleOpenState(false);
                                 avatarPanelOnClickMainAction();
                             } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
@@ -135,7 +135,6 @@ var SwipeableTemporaryAvatar = function (props) {
                                                         } }))
                                                     : (_jsx(ToggleOnIcon, { style: {
                                                             boxSizing: 'border-box',
-                                                            color: 'green',
                                                             height: '2em',
                                                             padding: '0.15em',
                                                             width: '2em'

package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.js

@@ -3,31 +3,16 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { Avatar, Button, ListItemButton, Typography } from '../../../index';
+import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary; });
-export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? '#003366'
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? 'none'
-    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'; }, function (props) { return props.theme.spacing(2); });
+export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; });
+export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.spacing(2); });
 export var StyledBoxProfile = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"])));
 export var StyledBoxProfileEdit = styled(animated.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
-export var StyledAvatarName = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.75rem;\n"], ["\n  color: ", ";\n  font-size: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary; });
-export var StyledOutlineButton = styled(Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-color: ", ";\n  color: ", ";\n"], ["\n  border-color: ", ";\n  color: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main; });
-export var StyledAvatar = styled(Avatar)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.primary.contrastText; });
-export var StyledListItemButton = styled(ListItemButton)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border-radius: 50px;\n  margin-inline-end: 2rem;\n"], ["\n  border-radius: 50px;\n  margin-inline-end: 2rem;\n"])));
+export var StyledAvatarName = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 1.75rem;\n"], ["\n  font-size: 1.75rem;\n"])));
+export var StyledOutlineButton = styled(Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-color: ", ";\n  color: ", ";\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  border-color: ", ";\n  color: ", ";\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
+export var StyledAvatar = styled(Avatar)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n  font-weight: bold;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n  font-weight: bold;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); });
+export var StyledListItemButton = styled(ListItemButton)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border-radius: 50px;\n  white-space: normal;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  white-space: normal;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -17,6 +17,7 @@ import { StyledSwipeableDrawer, StyledBox, StyledListItem, StyledDivider, Styled
 import { StreamSuiteLogo } from '../../../assets/Images';
 import { animated } from '@react-spring/web';
 import { useStaggerAnimation } from '../../../utils/helpers';
+import { getOffsetNavigationContrastText } from '../helpers';
 export default function SwipeableTemporaryDrawer(props) {
     var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick;
     var theme = useTheme();
@@ -45,9 +46,7 @@ export default function SwipeableTemporaryDrawer(props) {
                             ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
                             : logo
                         : (_jsx(StreamSuiteLogo, { style: {
-                                fill: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.primary.main
+                                fill: getOffsetNavigationContrastText(theme)
                             } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsx(List, { children: items && items.length > 0 && items.map(function (item, index) {
                     var label = item.label, children = item.children;
                     return (_jsxs(StyledListItem, __assign({ disablePadding: true, 

package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts

@@ -1151,7 +1151,6 @@ export declare const StyledChildListItem: import("@emotion/styled").StyledCompon
 } & 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" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledChildListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledChildListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -1171,6 +1170,7 @@ export declare const StyledChildListItemButton: import("@emotion/styled").Styled
 }, "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<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledChildListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledListSecondaryList: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ListClasses> | undefined;

package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.js

@@ -3,42 +3,23 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { Box, List, ListItem, ListItemText, ListItemButton, Typography } from '../../../index';
+import { getNavigationBackground, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? '#003366'
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? 'none'
-    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'; });
+export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return getOffsetNavigationBackground(props.theme); });
 export var StyledBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n  padding-bottom: 6rem;\n"], ["\n  height: 100%;\n  overflow: auto;\n  padding-bottom: 6rem;\n"])));
 export var StyledDrawerLogo = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"], ["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"])));
-export var StyledDrawerLogoText = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.9)'
-    : '#555'; });
+export var StyledDrawerLogoText = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); });
 export var StyledListItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0 1rem;\n  max-width: calc(100% - 2rem);\n\n  > .MuiListItemButton-root {\n    padding: .5rem 1.5rem;\n  }\n"], ["\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0 1rem;\n  max-width: calc(100% - 2rem);\n\n  > .MuiListItemButton-root {\n    padding: .5rem 1.5rem;\n  }\n"])));
-export var StyledListItemButton = styled(ListItemButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50px;\n"], ["\n  border-radius: 50px;\n"])));
-export var StyledListItemText = styled(ListItemText)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  > .MuiTypography-root {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: ", ";\n    &:hover,\n    &:focus,\n    &:active {\n      color: ", ";\n    }\n  }\n"], ["\n  > .MuiTypography-root {\n    font-size: 1.5rem;\n    font-weight: bold;\n    color: ", ";\n    &:hover,\n    &:focus,\n    &:active {\n      color: ", ";\n    }\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.85)'
-    : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.97)'
-    : '#333'; });
-export var StyledChildList = styled(List)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -.25rem 1rem 0 1.5rem;\n  padding: 0;\n\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -.25rem 1rem 0 1.5rem;\n  padding: 0;\n\n"])));
+export var StyledListItemButton = styled(ListItemButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50px;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
+export var StyledListItemText = styled(ListItemText)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  > .MuiTypography-root {\n    font-size: 1.5rem;\n    font-weight: bold;\n  }\n"], ["\n  > .MuiTypography-root {\n    font-size: 1.5rem;\n    font-weight: bold;\n  }\n"])));
+export var StyledChildList = styled(List)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -.25rem 1rem 0 1.5rem;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -.25rem 1rem 0 1.5rem;\n  padding: 0;\n"])));
 export var StyledChildListItem = styled(ListItem)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0;\n"])));
-export var StyledChildListItemText = styled(ListItemText)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  font-size: .9rem;\n  color: ", ";\n"], ["\n  font-size: .9rem;\n  color: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.75)'
-    : '#666'; });
-export var StyledChildListItemButton = styled(ListItemButton)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-radius: 50px;\n  flex-grow: 0;\n"], ["\n  border-radius: 50px;\n  flex-grow: 0;\n"])));
+export var StyledChildListItemButton = styled(ListItemButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-radius: 50px;\n  flex-grow: 0;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  flex-grow: 0;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
+export var StyledChildListItemText = styled(ListItemText)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: .9rem;\n"], ["\n  font-size: .9rem;\n"])));
 export var StyledListSecondaryList = styled(List)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 1rem;\n"])));
 export var StyledListSecondaryItem = styled(ListItem)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex: 1 0 50%;\n  display: flex;\n  align-items: center;\n"], ["\n  flex: 1 0 50%;\n  display: flex;\n  align-items: center;\n"])));
-export var StyledListSecondaryButton = styled(ListItemButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  color: ", ";\n  margin: 0.25rem 0.25rem 0.5rem;\n  padding: 0.3rem 1rem;\n  background: ", ";\n  border-radius: 50px;\n  box-shadow: ", ";\n"], ["\n  color: ", ";\n  margin: 0.25rem 0.25rem 0.5rem;\n  padding: 0.3rem 1rem;\n  background: ", ";\n  border-radius: 50px;\n  box-shadow: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.8)'
-    : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.12)'
-    : 'rgba(255,255,255,.6)'; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? '0 6px 15px rgb(36 37 38 / 16%)'
-    : '0 6px 15px rgb(36 37 38 / 8%)'; });
-export var StyledDivider = styled('div')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 75%;\n  height: 3px;\n  border: none;\n  border-radius: 3px;\n  margin: 2rem auto;\n"], ["\n  background-color: ", ";\n  width: 75%;\n  height: 3px;\n  border: none;\n  border-radius: 3px;\n  margin: 2rem auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(62, 106, 179, .5)'
-    : 'rgba(0,0,0,.075)'; });
+export var StyledListSecondaryButton = styled(ListItemButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  margin: 0.25rem 0.25rem 0.5rem;\n  padding: 0.3rem 1rem;\n  border-radius: 50px;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  margin: 0.25rem 0.25rem 0.5rem;\n  padding: 0.3rem 1rem;\n  border-radius: 50px;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.185); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.185); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.185); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.185); });
+export var StyledDivider = styled('div')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 75%;\n  height: 2px;\n  border: none;\n  border-radius: 3px;\n  margin: 2rem auto;\n"], ["\n  background-color: ", ";\n  width: 75%;\n  height: 2px;\n  border: none;\n  border-radius: 3px;\n  margin: 2rem auto;\n"])), function (props) { return getNavigationBackground(props.theme); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.js

@@ -3,6 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon } from '../../../../index';
+import { getNavigationContrastText } from '../../helpers';
 import { styled } from '@mui/material/styles';
 import { motion } from '../../../../utils/theme';
 import { ArrowRight } from '@mui/icons-material';
@@ -25,11 +26,7 @@ export var ListItemButton = styled(SSListItemButton, {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
         : props.theme.palette.background.paper;
-}, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? props.theme.palette.primary.contrastText
-        : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, ICON.Height + 8, function (props) { return props.isDrawerOpen
+}, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen
     ? props.isExpanded
         ? 'auto'
         : '200px'

package/components/navigation/MobileNavigation/MobileNavigationSearch.js

@@ -50,5 +50,5 @@ export default function SwipeableTemporarySearch(props) {
                         delay: isSearchOpen ? 100 : 0,
                         reverse: !isSearchOpen,
                         config: __assign(__assign({}, config.default), { mass: 1 })
-                    }) }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined' }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
+                    }) }, { children: _jsxs(FormControl, __assign({ fullWidth: true, variant: 'outlined', color: 'secondary' }, { children: [_jsx(StyledOutlinedInputLabel, __assign({ htmlFor: 'mobile-nav-search' }, { children: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search' })), _jsx(StyledOutlinedInput, { label: searchPanelPlaceholder !== null && searchPanelPlaceholder !== void 0 ? searchPanelPlaceholder : 'Search', id: 'mobile-nav-search', endAdornment: _jsx(InputAdornment, __assign({ position: 'end' }, { children: _jsx(IconButton, __assign({ "aria-label": 'Search', edge: 'end', onClick: handleSearch }, { children: _jsx(Search, {}) })) })), onKeyDown: handleSearch, value: searchValue, onChange: function (event) { var _a; return setSearchValue((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value); } })] })) })) })) }) })));
 }

package/components/navigation/MobileNavigation/MobileNavigationSearchStyles.js

@@ -3,18 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { SwipeableDrawer, OutlinedInput, InputLabel } from '../../../index';
+import { getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
 export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; });
-export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? '#003366'
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? 'none'
-    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'; }, function (props) { return props.theme.spacing(3, 2.5, '80px', 2.5); });
-export var StyledOutlinedInputLabel = styled(InputLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  &.Mui-focused {\n    color: ", ";\n  }\n"], ["\n  &.Mui-focused {\n    color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark' ? props.theme.palette.primary.contrastText : '#003366'; });
-export var StyledOutlinedInput = styled(OutlinedInput)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n\n  &:hover .MuiOutlinedInput-notchedOutline,\n  &.Mui-focused .MuiOutlinedInput-notchedOutline {\n    border-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n\n  &:hover .MuiOutlinedInput-notchedOutline,\n  &.Mui-focused .MuiOutlinedInput-notchedOutline {\n    border-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? '#003366'
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary; }, function (props) { return props.theme.palette.mode === 'dark' ? props.theme.palette.primary.contrastText : '#003366'; });
+export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(3, 2.5, '80px', 2.5); });
+export var StyledOutlinedInputLabel = styled(InputLabel)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n\n  &.MuiInputLabel-root.Mui-focused {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  &.MuiInputLabel-root.Mui-focused {\n    color: ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
+export var StyledOutlinedInput = styled(OutlinedInput)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  .MuiInputBase-input {\n    color: ", ";\n  }\n\n  fieldset {\n    border-color: ", " !important;\n    transition: all 0.2s ease;\n  }\n\n  &.MuiOutlinedInput-root:hover fieldset,\n  &.MuiOutlinedInput-root:focus fieldset {\n    border-width: 2px;\n  }\n\n  .MuiIconButton-root {\n    color: ", ";\n  }\n"], ["\n  .MuiInputBase-input {\n    color: ", ";\n  }\n\n  fieldset {\n    border-color: ", " !important;\n    transition: all 0.2s ease;\n  }\n\n  &.MuiOutlinedInput-root:hover fieldset,\n  &.MuiOutlinedInput-root:focus fieldset {\n    border-width: 2px;\n  }\n\n  .MuiIconButton-root {\n    color: ", ";\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/components/navigation/MobileNavigation/MobileNavigationStyles.d.ts

@@ -149,3 +149,4 @@ export declare const StyledNotchShadowMask: import("@emotion/styled").StyledComp
 } & 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<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledAvatar: import("@emotion/styled").StyledComponent<any, {}, {}>;

package/components/navigation/MobileNavigation/MobileNavigationStyles.js

@@ -3,39 +3,24 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import Drawer from '@mui/material/Drawer';
-import { Box, IconButton, BottomNavigation, BottomNavigationAction, Paper } from '../../../index';
+import { Box, IconButton, BottomNavigation, BottomNavigationAction, Paper, Avatar } from '../../../index';
+import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { motion } from '../../../utils/theme';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.zIndex.appBar; });
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"], ["\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"])), function (props) { return props.theme.zIndex.appBar; });
 export var StyledNotchSVG = styled('svg', {
     shouldForwardProp: function (prop) { return prop !== 'mobileNotchPosition'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"], ["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  backgroundColor: ", ";\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"], ["\n  backgroundColor: ", ";\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary; }, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? props.theme.palette.primary.contrastText
-        : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, function (props) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"], ["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"])), function (props) { return getNavigationBackground(props.theme); });
+export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  position: relative;\n"])), function (props) { return getNavigationBackground(props.theme); });
+export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"], ["\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-});
+}, function (props) { return getNavigationBackground(props.theme); });
 export var DrawerHeader = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
 })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n"], ["\n"])));
@@ -76,15 +61,9 @@ export var DrawerShadow = styled(Box, {
         : "".concat(DRAWER_WIDTH.Collapsed - 33, "px");
 });
 export var NotchContainer = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, motion.easeInOut);
-export var NotchBackground = styled(Box)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var NotchBackgroundClip = styled(Box)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var NotchSeemMask = styled(Box)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
+export var NotchBackground = styled(Box)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return getNavigationBackground(props.theme); });
+export var NotchBackgroundClip = styled(Box)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"])), function (props) { return getNavigationBackground(props.theme); });
+export var NotchSeemMask = styled(Box)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"])), function (props) { return getNavigationBackground(props.theme); });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
 })(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible;\n    width: ", ";\n\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible;\n    width: ", ";\n\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
@@ -93,7 +72,6 @@ export var StyledDrawer = styled(Drawer, {
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
 }, motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
 export var StyledNotchShadow = styled(Box)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"], ["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"])));
-export var StyledNotchShadowMask = styled(Box)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
+export var StyledNotchShadowMask = styled(Box)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"])), function (props) { return getNavigationBackground(props.theme); });
+export var StyledAvatar = styled(Avatar)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-weight: bold;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-weight: bold;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js

@@ -16,5 +16,5 @@ export var StyledBoxProfileEdit = styled(animated.div)(templateObject_5 || (temp
 export var StyledAvatarName = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.75rem;\n"], ["\n  font-size: 1.75rem;\n"])));
 export var StyledButtonGroup = styled(ButtonGroup)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /* Fix for RTL issue */\n  .MuiButtonGroup-grouped:not(:first-of-type) {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n\n  .MuiButtonGroup-grouped:not(:last-of-type) {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-style: solid;\n  }\n"], ["\n  /* Fix for RTL issue */\n  .MuiButtonGroup-grouped:not(:first-of-type) {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n  }\n\n  .MuiButtonGroup-grouped:not(:last-of-type) {\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-style: solid;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); }, function (props) { return props.theme.direction === 'ltr' ? "".concat(props.theme.shape.borderRadius, "px") : 0; }, function (props) { return props.theme.direction === 'ltr' ? 0 : "".concat(props.theme.shape.borderRadius, "px"); });
 export var StyledAvatar = styled(Avatar)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); });
-export var StyledListItemButton = styled(ListItemButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-radius: 50px;\n  white-space: normal;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n"], ["\n  border-radius: 50px;\n  white-space: normal;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); });
+export var StyledListItemButton = styled(ListItemButton)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  border-radius: 50px;\n  white-space: normal;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  white-space: normal;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -34,7 +34,8 @@ var VerticalNavigationItem = function (props) {
     var theme = useTheme();
     var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style", "hasCustomContent"]);
     var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
-    var open = Boolean(anchorEl);
+    var _e = React.useState(false), isFlyoutHovered = _e[0], setIsFlyoutHovered = _e[1];
+    var open = isFlyoutHovered || Boolean(anchorEl);
     var handlePopoverOpen = function (event) {
         if (open) {
             handlePopoverClose();
@@ -46,7 +47,7 @@ var VerticalNavigationItem = function (props) {
         setAnchorEl(null);
     };
     var handleClick = function (event) {
-        if (fullHeightFlyout) {
+        if ((children && children.length > 0) || fullHeightFlyout || hasCustomContent) {
             handlePopoverOpen(event);
             onClick && onClick(event);
             return;
@@ -54,6 +55,12 @@ var VerticalNavigationItem = function (props) {
         if (onClick) {
             onClick(event);
         }
+        // Set open to true / Open sub menu
+        if (!open) {
+            handlePopoverOpen(event);
+            return;
+        }
+        // Set open to false / Close sub menu
         setAnchorEl(null);
     };
     var handleChildItemClick = function (event, item) {
@@ -65,25 +72,39 @@ var VerticalNavigationItem = function (props) {
             item.onClick(event);
         }
     };
+    var ref = React.useRef(null);
+    var flyoutRef = React.useRef(null);
+    var handleKeyDown = function (event) {
+        if (!event) {
+            return;
+        }
+        // This should only be triggered for items with a sub nav
+        if (flyoutRef && flyoutRef.current) {
+            var CLOSE_SUBMENU_DELAY = 200;
+            if (event.type === 'blur') {
+                setTimeout(function () {
+                    // @ts-expect-error
+                    var isMenuFocus = flyoutRef.current.contains(window.document.activeElement) || ref === window.document.activeElement;
+                    if (!isMenuFocus) {
+                        handlePopoverClose();
+                    }
+                }, CLOSE_SUBMENU_DELAY);
+            }
+        }
+    };
     return (_jsxs(ListItem, __assign({ disablePadding: true, 
         // @ts-expect-error
-        component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton
-            // @ts-expect-error
-            , __assign({ 
+        component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref, 
                 // @ts-expect-error
-                component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, open: open, onMouseEnter: function (event) { return (fullHeightFlyout || isDrawerOpen)
-                    ? null
-                    : handlePopoverOpen(event); }, onMouseLeave: function () { return (fullHeightFlyout || isDrawerOpen)
-                    ? null
-                    : handlePopoverClose(); }, onFocus: function (event) { return (fullHeightFlyout || isDrawerOpen)
+                component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, onMouseEnter: function (event) { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverOpen(event); }, onBlur: function () { return (fullHeightFlyout || isDrawerOpen)
+                    : handlePopoverOpen(event); }, onMouseLeave: function () { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverClose(); }, "aria-expanded": fullHeightFlyout ? open : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) || fullHeightFlyout ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
+                    : handlePopoverClose(); }, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); }, "aria-current": isActive ? 'page' : null, "aria-expanded": (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? open : null, role: (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
                             '& .MuiTypography-root': {
                                 fontSize: isSecondary ? '14px' : 'inherit'
                             }
-                        } })] }), label), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
+                        } })] }), label), children && children.length > 0 && isDrawerOpen && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
@@ -91,6 +112,6 @@ var VerticalNavigationItem = function (props) {
                                         '& .MuiTypography-root': {
                                             fontSize: '14px !important'
                                         }
-                                    } })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+                                    } })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { ref: flyoutRef, isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, setAnchorEl: setAnchorEl, parentItemRef: ref.current, open: open, children: children, label: label, setIsFlyoutHovered: setIsFlyoutHovered })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
 };
 export default VerticalNavigationItem;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.d.ts

@@ -10,6 +10,9 @@ export interface IVerticalNavigationItemFlyoutMenuProps {
     fullHeightFlyout?: boolean;
     anchorEl?: null | HTMLElement;
     open?: boolean;
+    setAnchorEl?: any;
+    parentItemRef?: any;
+    setIsFlyoutHovered?: any;
 }
-declare const VerticalNavigationItemFlyoutMenu: (props: IVerticalNavigationItemFlyoutMenuProps) => React.ReactElement;
+declare const VerticalNavigationItemFlyoutMenu: React.ForwardRefExoticComponent<IVerticalNavigationItemFlyoutMenuProps & React.RefAttributes<unknown>>;
 export default VerticalNavigationItemFlyoutMenu;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js

@@ -10,20 +10,32 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { forwardRef } from 'react';
 import { Link } from '../../../../index';
 import { FullHeightFlyoutMenuPaper, FullHeightFlyoutMenuWrapper, FlyoutNotchMask, NotchMini, FlyoutMenuHeader, FlyoutMenuPaper, FlyoutMenuWrap, FlyoutMenuList, FlyoutMenuButton, FlyoutMenuItem, FlyoutMenuItemText } from './VerticalNavigationItemFlyoutMenuStyles';
-var VerticalNavigationItemFlyoutMenu = function (props) {
-    var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, content = props.content, anchorEl = props.anchorEl;
-    var _a = React.useState(false), flyoutHovered = _a[0], setFlyoutHovered = _a[1];
-    var open = flyoutHovered || (props === null || props === void 0 ? void 0 : props.open);
+var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
+    var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, open = props.open, parentItemRef = props.parentItemRef, content = props.content, anchorEl = props.anchorEl, setAnchorEl = props.setAnchorEl, setIsFlyoutHovered = props.setIsFlyoutHovered;
     if (fullHeightFlyout && content) {
         return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel" }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
     }
-    return (_jsx(FlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setFlyoutHovered(true); }, onMouseLeave: function () { return setFlyoutHovered(false); }, onFocus: function () { return setFlyoutHovered(true); }, onBlur: function () { return setFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
+    var handleKeyDown = function (event) {
+        if (!event) {
+            return;
+        }
+        var CLOSE_SUBMENU_DELAY = 200;
+        if (event.type === 'blur') {
+            setTimeout(function () {
+                var isMenuFocus = (ref === null || ref === void 0 ? void 0 : ref.current.contains(window.document.activeElement)) || parentItemRef === window.document.activeElement;
+                if (!isMenuFocus) {
+                    setAnchorEl(null);
+                }
+            }, CLOSE_SUBMENU_DELAY);
+        }
+    };
+    return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
-};
+                            component: Link, role: 'link', onClick: childItem.onClick, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); } }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
+});
 export default VerticalNavigationItemFlyoutMenu;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js

@@ -29,9 +29,9 @@ export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject
 export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  text-align: ", ";\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
 export var FlyoutMenuButton = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: transparent;\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", ";\n  padding: ", ";\n  width: 100%;\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", ";\n  padding: ", ";\n  width: 100%;\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: transparent;\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", ";\n  padding: ", ";\n  width: 100%;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", ";\n  padding: ", ";\n  width: 100%;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"
     // FullHeight
-])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.2); });
+])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
 // FullHeight
 export var FullHeightFlyoutMenuPaper = styled(Paper, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open'; }

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js

@@ -30,7 +30,7 @@ export var ListItemAvatar = styled(ListItemButton, {
 export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  height: ", "px;\n  justify-content: center;\n  margin-top: 0 !important;\n  min-width: ", ";\n  width: ", ";\n\n  [theme.breakpoints.up('sm')] {\n    min-width: ", "px;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  height: ", "px;\n  justify-content: center;\n  margin-top: 0 !important;\n  min-width: ", ";\n  width: ", ";\n\n  [theme.breakpoints.up('sm')] {\n    min-width: ", "px;\n    width: ", "px;\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
 export var ListItemText = styled(SSListItemText, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity ", "ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  color: ", ";\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity ", "ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  min-width: 210px;\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity ", "ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  color: ", ";\n  min-width: 210px;\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity ", "ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
 export var StyledExpandLess = styled(ArrowRight, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
 })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", "ms ", " 200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", "ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });

package/components/navigation/helpers.js

@@ -1,5 +1,8 @@
 import { darken, lighten, getLuminance } from 'polished';
 var DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
+// Luminance threshold for determining if we should lighten or darken the color
+// .033 is the luminance value of #333333
+var LUMINANCE_THRESHOLD = 0.033;
 /**
  * Return the background color for the navigation
  * @returns string
@@ -32,13 +35,13 @@ export var getOffsetNavigationBackground = function (theme, colorAdjustAmount) {
     var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
     // Use background property if navigation property isnt set
     if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.background)) {
-        return getLuminance(palette.background.paper) > 0.5
-            ? darken(adjustAmount, palette.background.paper)
-            : lighten(adjustAmount, palette.background.paper);
+        return getLuminance(palette.background.paper) < LUMINANCE_THRESHOLD
+            ? lighten(adjustAmount, palette.background.paper)
+            : darken(adjustAmount, palette.background.paper);
     }
-    return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) > 0.5
-        ? darken(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background)
-        : lighten(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background);
+    return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) < LUMINANCE_THRESHOLD
+        ? lighten(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background)
+        : darken(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background);
 };
 /**
  * Return a darkened or lightened contrast color for the navigation
@@ -51,11 +54,11 @@ export var getOffsetNavigationContrastText = function (theme, colorAdjustAmount)
     var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
     // Use background property if navigation property isnt set
     if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.background)) {
-        return getLuminance(palette.background.paper) > 0.5
-            ? palette.getContrastText(darken(adjustAmount, palette.background.paper))
-            : palette.getContrastText(lighten(adjustAmount, palette.background.paper));
+        return getLuminance(palette.background.paper) < LUMINANCE_THRESHOLD
+            ? palette.getContrastText(lighten(adjustAmount, palette.background.paper))
+            : palette.getContrastText(darken(adjustAmount, palette.background.paper));
     }
-    return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) > 0.5
-        ? palette.getContrastText(darken(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background))
-        : palette.getContrastText(lighten(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background));
+    return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) < LUMINANCE_THRESHOLD
+        ? palette.getContrastText(lighten(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background))
+        : palette.getContrastText(darken(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background));
 };

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.8.4",
+  "version": "1.8.6",
   "private": false,
   "main": "index.js",
   "module": "index.js",