@learningpool/ui 1.8.4 → 1.8.5

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/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/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.5",
   "private": false,
   "main": "index.js",
   "module": "index.js",