npm - @learningpool/ui - Versions diffs - 1.7.5 → 1.7.7 - Mend

@learningpool/ui 1.7.5 → 1.7.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/components/navigation/VerticalNavigation/VerticalNavigation.js CHANGED Viewed

@@ -37,6 +37,7 @@ import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
 import { animated } from '@react-spring/web';
 import { defaultMessages } from '../../../lang/en-us';
+import { getNavigationBackground, getNavigationContrastText } from '../helpers';
 var VerticalNavigation = function (props) {
     var _a;
     var theme = useTheme();
@@ -110,11 +111,7 @@ var VerticalNavigation = function (props) {
                 background: 'transparent',
                 fontSize: 0
             }
-        }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: {
-                    backgroundColor: theme.palette.mode === 'dark'
-                        ? theme.palette.primary.main
-                        : theme.palette.background.paper
-                } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
+        }, className: 'grid-container' }, { children: [_jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
                                 ? typeof logo === 'string'
                                     ? (_jsx("img", { src: logo, height: "".concat(logoHeight, "px"), width: "".concat(logoWidth, "px"), style: {
                                             marginInlineEnd: '16px'
@@ -124,20 +121,18 @@ var VerticalNavigation = function (props) {
                                         height: "".concat(logoHeight, "px"),
                                         width: "".concat(logoWidth, "px"),
                                         marginInlineEnd: '16px',
-                                        fill: theme.palette.mode === 'dark'
-                                            ? theme.palette.primary.contrastText
-                                            : theme.palette.primary.main
+                                        fill: getNavigationContrastText(theme)
                                     } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen,
                         // @ts-expect-error
                         component: animated.button, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
                                 ? (_jsx(ChevronLeft, { style: {
-                                        fill: theme.palette.getContrastText(theme.palette.background.paper),
+                                        fill: getNavigationContrastText(theme),
                                         fontSize: '1.75rem',
                                         height: '1.75rem',
                                         width: '1.75rem'
                                     } }))
                                 : (_jsx(ChevronRight, { style: {
-                                        fill: theme.palette.getContrastText(theme.palette.background.paper),
+                                        fill: getNavigationContrastText(theme),
                                         fontSize: '1.75rem',
                                         height: '1.75rem',
                                         width: '1.75rem'
@@ -160,9 +155,7 @@ var VerticalNavigation = function (props) {
                             zIndex: 10
                         } }, { children: [_jsx(NotchExtendSVG, { style: {
                                     display: 'block',
-                                    fill: theme.palette.mode === 'dark'
-                                        ? theme.palette.primary.main
-                                        : theme.palette.background.paper,
+                                    fill: getNavigationBackground(theme),
                                     height: '165px',
                                     left: '-12px',
                                     padding: '0',
@@ -189,9 +182,7 @@ var VerticalNavigation = function (props) {
                                             height: '1.3rem',
                                             width: '1.3rem'
                                         } })) }))] }))] })), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsx("div", __assign({ className: 'wrapper', style: {
-                    backgroundColor: theme.palette.mode === 'dark'
-                        ? theme.palette.primary.main
-                        : theme.palette.background.paper,
+                    backgroundColor: getNavigationBackground(theme),
                     flex: '1 1px',
                     marginTop: '-1px',
                     overflow: 'auto',
@@ -200,26 +191,13 @@ var VerticalNavigation = function (props) {
                             height: '100%',
                             width: DRAWER_WIDTH.Expanded,
                             marginTop: "-".concat(theme.spacing(0.5), " !important")
-                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: {
-                    backgroundColor: theme.palette.mode === 'dark'
-                        ? theme.palette.primary.main
-                        : theme.palette.background.paper
-                } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: {
-                                width: DRAWER_WIDTH.Expanded,
-                                backgroundColor: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.background.paper
-                            } }, { children: [hasStreamHome
+                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
                                     ? (_jsx(VerticalNavigationItem, { label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
-                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName
-                                    ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
-                                                // backgroundColor: mainTheme.colorButtonText,
-                                                // color: mainTheme.colorButton,
-                                                fontSize: '0.75rem',
-                                                height: 32,
-                                                width: 32
-                                            } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))
-                                    : null] }))] })) }))] }))); };
+                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
+                                            fontSize: '0.75rem',
+                                            height: 32,
+                                            width: 32
+                                        } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] }))); };
     return (_jsxs(StyledAside, __assign({ "aria-label": messages['site-navigation'] }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'
                 } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js CHANGED Viewed

@@ -12,8 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { Box, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
-import Button from '@mui/material/Button';
-import { StyledBox, StyledBoxProfile, StyledButton, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton, StyledButtonGroup } from './VerticalNavigationAvatarStyles';
+import { StyledBox, StyledBoxProfile, StyledButton, StyledAvatarName, StyledAvatar, StyledBoxProfileEdit, StyledListItemButton, StyledButtonGroup } from './VerticalNavigationAvatarStyles';
 import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
@@ -27,9 +26,9 @@ var AvatarPanel = function (props) {
     var theme = useTheme();
     var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization;
     var messages = __assign(__assign({}, defaultMessages), localization);
-    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
-        avatarName
-    ]);
+    useEffect(function () {
+        setAvatarInitials(handleAvatarInitials(avatarName));
+    }, [avatarName]);
     var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
     // First item starts at 70ms
     // see STAGGER_ITEMS_DELAY in helpers.js
@@ -43,34 +42,26 @@ var AvatarPanel = function (props) {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
-                } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
+                } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
                 } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
                             marginBottom: theme.spacing(2),
                             maxWidth: '14rem'
-                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount),
-                            // whileHover={motionWhileHover}
-                            // whileTap={motionWhileTap}
-                            disablePadding: true }, { children: _jsxs(StyledListItemButton
+                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
                             // TODO: figure out if these are links or buttons
                             // @ts-expect-error
                             , __assign({
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
-                                component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
-                                            minWidth: theme.spacing(5)
-                                        } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
+                                component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
                     // @ts-expect-error
                     , __assign({
                         // @ts-expect-error
-                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, color: 'primary', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
+                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
                             avatarPanelSettingItems.length > 0 &&
-                            avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount),
-                                // whileHover={motionWhileHover}
-                                // whileTap={motionWhileTap}
-                                disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
                                 , __assign({

package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts CHANGED Viewed

@@ -3274,39 +3274,6 @@ export declare const StyledAvatarName: import("@emotion/styled").StyledComponent
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("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") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const StyledOutlineButton: import("@emotion/styled").StyledComponent<Pick<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
-    disabled?: boolean | undefined;
-    disableElevation?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    endIcon?: import("react").ReactNode;
-    fullWidth?: boolean | undefined;
-    href?: string | undefined;
-    size?: "small" | "large" | "medium" | undefined;
-    startIcon?: import("react").ReactNode;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    variant?: "text" | "outlined" | "contained" | undefined;
-} & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
-    tabIndex?: number | undefined;
-    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
-    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
-}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledButtonGroup: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").ButtonGroupClasses> | undefined;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js CHANGED Viewed

@@ -2,30 +2,19 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+/* eslint-disable indent */
 import { Avatar, Button, ButtonGroup, ListItemButton, Typography } from '../../../index';
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-import { lighten, darken } from 'polished';
-import { VERTNAV_COLORS } from '../../../utils/constants';
+import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])));
 export var StyledButton = styled(Button)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  /* Fix for RTL issue */\n  .MuiButton-startIcon {\n    margin-inline-start: -", ";\n    margin-inline-end: ", ";\n  }\n\n  .MuiButton-endIcon {\n    margin-inline-start: ", ";\n    margin-inline-end: -", ";\n  }\n"], ["\n  /* Fix for RTL issue */\n  .MuiButton-startIcon {\n    margin-inline-start: -", ";\n    margin-inline-end: ", ";\n  }\n\n  .MuiButton-endIcon {\n    margin-inline-start: ", ";\n    margin-inline-end: -", ";\n  }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
-export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  height: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  height: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
-    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
-    : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
+export var StyledBox = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  height: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  height: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
 export var StyledBoxProfile = styled(animated.div)(templateObject_4 || (templateObject_4 = __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_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var StyledAvatarName = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.75rem;\n"], ["\n  font-size: 1.75rem;\n"])));
-export var StyledOutlineButton = styled(Button)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  /* Fix for RTL issue */\n  .MuiButton-startIcon {\n    margin-inline-start: -", ";\n    margin-inline-end: ", ";\n  }\n\n  .MuiButton-endIcon {\n    margin-inline-start: ", ";\n    margin-inline-end: -", ";\n  }\n"], ["\n  /* Fix for RTL issue */\n  .MuiButton-startIcon {\n    margin-inline-start: -", ";\n    margin-inline-end: ", ";\n  }\n\n  .MuiButton-endIcon {\n    margin-inline-start: ", ";\n    margin-inline-end: -", ";\n  }\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.spacing(0.5); });
-export var StyledButtonGroup = styled(ButtonGroup)(templateObject_8 || (templateObject_8 = __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\n    border-style: solid;\n    border-left-width: ", ";\n    border-right-width: ", ";\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\n    border-style: solid;\n    border-left-width: ", ";\n    border-right-width: ", ";\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"); }, function (props) { return props.theme.direction === 'rtl' ? '1px' : 0; }, function (props) { return props.theme.direction === 'ltr' ? '1px' : 0; });
-export var StyledAvatar = styled(Avatar)(templateObject_9 || (templateObject_9 = __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_10 || (templateObject_10 = __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) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
-    : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, 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;
+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) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); });
+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 CHANGED Viewed

@@ -89,10 +89,7 @@ var VerticalNavigationItem = function (props) {
                             // @ts-expect-error
                             component: Link, role: 'link', index: index, isDrawerOpen: isDrawerOpen, onClick: function (event) { return handleChildItemClick(event, childItem); } }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
                                         '& .MuiTypography-root': {
-                                            fontSize: '14px !important',
-                                            color: theme.palette.mode === 'dark'
-                                                ? theme.palette.primary.contrastText
-                                                : theme.palette.getContrastText(theme.palette.background.paper)
+                                            fontSize: '14px !important'
                                         }
                                     } })] }), label) }))); }) })) }))), 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 }))] })));
 };

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

@@ -2,11 +2,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+/* eslint-disable indent */
 import { List, ListItem, ListItemButton as SSListItemButton, Paper, Typography, ListItemText } from '../../../../index';
 import { styled } from '@mui/material/styles';
 import { NotchMiniSVG } from '../../../../assets/Images';
-import { lighten, darken } from 'polished';
-import { VERTNAV_COLORS } from '../../../../utils/constants';
+import { getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../../helpers';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
@@ -18,51 +18,31 @@ export var FlyoutMenuPaper = styled(Paper, {
     : 'auto'; });
 export var FlyoutMenuWrap = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0 8px 8px 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0 8px 8px 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
-    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
-    : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
-    ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
-    : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); });
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0 8px 8px 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0 8px 8px 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
+    ? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
+    : "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); });
 export var FlyoutMenuList = styled(List, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n  pointer-events: ", ";\n"], ["\n  padding: ", ";\n  pointer-events: ", ";\n"])), function (props) { return props.theme.spacing(1, 2); }, function (props) { return props.open ? 'auto' : 'none'; });
 export var FlyoutMenuHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: bold;\n  padding: 12px 0 0;\n  padding-inline-end: ", ";\n  padding-inline-start: ", ";\n  text-align: ", ";\n"], ["\n  font-weight: bold;\n  padding: 12px 0 0;\n  padding-inline-end: ", ";\n  padding-inline-start: ", ";\n  text-align: ", ";\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.spacing(3); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
 export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: transparent !important;\n  font-size: 14px;\n  padding: 0;\n  white-space: normal;\n"], ["\n  background: transparent !important;\n  font-size: 14px;\n  padding: 0;\n  white-space: normal;\n"])));
-export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  text-align: ", ";\n"], ["\n  text-align: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
+export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  text-align: ", ";\n"])), function (props) { return props.theme.palette.navigation.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\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\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\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\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    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"
     // 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 props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.5)'
-        : props.theme.palette.primary.main;
-}, function (props) { return props.theme.direction === 'ltr' ? '5px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '5px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? props.theme.palette.primary.dark
-        : '#E6EAF0';
-});
+])), 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); });
 // FullHeight
 export var FullHeightFlyoutMenuPaper = styled(Paper, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open'; }
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"])), function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
-    ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
-    : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); });
+    ? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
+    : "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); });
 export var FullHeightFlyoutMenuWrapper = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
-    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? props.theme.palette.getContrastText(darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper))
-    : props.theme.palette.getContrastText(lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper)); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
-    ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
-    : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
-export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: ", ";\n  right: ", ";\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: ", ";\n  right: ", ";\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
-    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
-export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  fill: ", ";\n  left: ", ";\n  right: ", ";\n  pointer-events: none;\n  position: absolute;\n"], ["\n  fill: ", ";\n  left: ", ";\n  right: ", ";\n  pointer-events: none;\n  position: absolute;\n"])), function (props) { return props.theme.palette.background.paper === ('#fff' || '#ffffff' || 'white')
-    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.background.paper)
-    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  box-shadow: ", " 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.contrastText || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
+    ? "all ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut)
+    : "all ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
+export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: ", ";\n  right: ", ";\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: ", ";\n  right: ", ";\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
+export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  fill: ", ";\n  left: ", ";\n  right: ", ";\n  pointer-events: none;\n  position: absolute;\n"], ["\n  fill: ", ";\n  left: ", ";\n  right: ", ";\n  pointer-events: none;\n  position: absolute;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

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

@@ -2,9 +2,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+/* eslint-disable indent */
 import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon } from '../../../../index';
 import { styled } from '@mui/material/styles';
 import { ArrowRight } from '@mui/icons-material';
+import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground } from '../../helpers';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
@@ -15,54 +17,24 @@ var ICON = {
 };
 export var ListItem = styled(SSListItem, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), 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.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width ", "ms ", " ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width ", "ms ", " ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
 export var ListItemButton = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n\n    left: ", ";\n    right: ", ";\n\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n\n    left: ", ";\n    right: ", ";\n\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\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);
-}, ICON.Height + 8, function (props) { return props.isDrawerOpen
-    ? 'auto'
-    : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.5)'
-        : props.theme.palette.primary.main;
-}, function (props) { return props.theme.direction === 'ltr' ? '3px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '3px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, 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.dark
-        : '#E6EAF0';
-});
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", " 0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all ", "ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :active {\n    background-color: transparent;\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", " 0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all ", "ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :active {\n    background-color: transparent;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? 'auto' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '3px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '3px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? getOffsetNavigationBackground(props.theme) : 'transparent'; });
 export var ListItemButtonChild = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  width: 100%;\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity\n                ", "ms\n                ", "\n                ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  width: 100%;\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity\n                ", "ms\n                ", "\n                ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? 'rgba(255, 255, 255, 0.75)'
-    : 'rgba(0, 0, 0, 0.75)'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? 1 : 0; }, 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_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height ", "ms ", " 0ms !important;\n  padding: 0;\n  width: 100%;\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity ", "ms ", " ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height ", "ms ", " 0ms !important;\n  padding: 0;\n  width: 100%;\n\n  :hover,\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity ", "ms ", " ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, 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 ListItemAvatar = styled(ListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"], ["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"])), function (props) { return props.isDrawerOpen
-    ? '200px'
-    : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
-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 props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height ", "ms ", " 0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"], ["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height ", "ms ", " 0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"])), function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
+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  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), 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  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; });
 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\n              ", "ms\n              ", "\n              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\n              ", "ms\n              ", "\n              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; });
+})(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; });
 export var StyledExpandMore = styled(ArrowRight, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              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\n              ", "ms\n              ", "\n              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; });
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity ", " 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 ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.easing.easeOut; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js CHANGED Viewed

@@ -2,10 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+/* eslint-disable indent */
 import Drawer from '@mui/material/Drawer';
 import { Box, IconButton } from '../../../index';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
+import { darken, lighten } from 'polished';
+import { VERTNAV_COLORS } from '../../../utils/constants';
+import { getNavigationBackground, getNavigationContrastText } from '../helpers';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
@@ -19,71 +23,51 @@ export var NOTCH = {
 };
 export var DrawerHeader = styled(animated.div, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\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.spacing(1); }, function (props) { return props.isDrawerOpen
-    ? "width\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut, "\n      0")
-    : "width\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, 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 ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", " 250ms;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  }\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height ", "ms ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", " 250ms;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  }\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height ", "ms ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
+    ? "width ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut, " 0")
+    : "width ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen
+    ? DRAWER_WIDTH.Expanded
+    : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) { return getNavigationContrastText(props.theme); }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
 export var DrawerToggle = styled(IconButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transition: all\n              ", "ms\n              ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transition: all\n              ", "ms\n              ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
-export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transition: all ", "ms ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transition: all ", "ms ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.direction === 'ltr'
+    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important'
+    : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl'
+    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important'
+    : 'auto !important'; }, function (props) { return (props.theme.direction === 'rtl' ? '180deg' : 0); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
+export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(0.5); });
 export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\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'
-        ? 'rgba(255, 255, 255, 0.12) transparent'
-        : 'rgba(0, 0, 0, 0.12) transparent';
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.24) transparent'
-        : 'rgba(0, 0, 0, 0.24) transparent';
-}, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.12)'
-        : 'rgba(0, 0, 0, 0.12)';
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.24)'
-        : 'rgba(0, 0, 0, 0.24)';
-});
-export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
+export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: background-color ", "ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color ", "ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: background-color ", "ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color ", "ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
+    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 2, props.theme.palette.navigation.background)
+    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 2, props.theme.palette.navigation.background); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
+    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 3, props.theme.palette.navigation.background)
+    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 3, props.theme.palette.navigation.background); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
+    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 2, props.theme.palette.navigation.background)
+    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 2, props.theme.palette.navigation.background); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
+    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT * 3, props.theme.palette.navigation.background)
+    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT * 3, props.theme.palette.navigation.background); });
+export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return getNavigationBackground(props.theme); });
 export var StyledDivider = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all\n                ", "ms\n                ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all\n                ", "ms\n                ", ";\n    width: 66%;\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'
-        ? 'rgba(255, 255, 255, 0.075)'
-        : 'rgba(0, 0, 0, 0.075)';
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: \"\";\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all ", "ms ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: \"\";\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all ", "ms ", ";\n    width: 66%;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.palette.navigation.background === ('#fff' || '#ffffff' || 'white')
+    ? darken(VERTNAV_COLORS.DARKEN_AMOUNT, props.theme.palette.navigation.background)
+    : lighten(VERTNAV_COLORS.LIGHTEN_AMOUNT, props.theme.palette.navigation.background); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var DrawerShadow = styled(Box, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"], ["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px") : 0; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px") : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px") : 0; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px") : 0; });
-export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width\n              ", "ms\n              ", ";\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\n              ", "ms\n              ", ";\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
-export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  transform: rotate(", ");\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  transform: rotate(", ");\n  width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; });
-export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0, 0, 0, 0.125);\n  content: \"\";\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"], ["\n  background: rgba(0, 0, 0, 0.125);\n  content: \"\";\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr'
+    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px")
+    : 0; }, function (props) { return props.theme.direction === 'rtl'
+    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px")
+    : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.direction === 'ltr'
+    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
+    : 0; }, function (props) { return props.theme.direction === 'rtl'
+    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
+    : 0; });
+export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width ", "ms ", ";\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 ", "ms ", ";\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
+export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __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_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  transform: rotate(", ");\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  transform: rotate(", ");\n  width: 45px;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return (props.theme.direction === 'rtl' ? '180deg' : 0); });
+export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, 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.direction === 'ltr' ? 0 : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? 0 : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return getNavigationContrastText(props.theme); }, function (props) { return (props.theme.direction === 'ltr' ? 0 : 'auto'); }, function (props) { return (props.theme.direction === 'rtl' ? 0 : 'auto'); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
 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;

package/components/navigation/helpers.d.ts ADDED Viewed

@@ -0,0 +1,22 @@
+/**
+ * Return the background color for the navigation
+ * @returns string
+ */
+export declare const getNavigationBackground: (theme: any) => any;
+/**
+ * Returns the contrast color for the navigation
+ * @returns string
+ */
+export declare const getNavigationContrastText: (theme: any) => any;
+/**
+ * Return a darkened or lightened background color for the navigation
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
+ * @returns string
+ */
+export declare const getOffsetNavigationBackground: (theme: any, colorAdjustAmount?: number) => string;
+/**
+ * Return a darkened or lightened contrast color for the navigation
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
+ * @returns string
+ */
+export declare const getOffsetNavigationContrastText: (theme: any, colorAdjustAmount?: number) => any;

package/components/navigation/helpers.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { darken, lighten, getLuminance } from 'polished';
+var DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
+/**
+ * Return the background color for the navigation
+ * @returns string
+ */
+export var getNavigationBackground = function (theme) {
+    var _a;
+    return (_a = theme.palette.navigation.background) !== null && _a !== void 0 ? _a : theme.palette.background.paper;
+};
+/**
+ * Returns the contrast color for the navigation
+ * @returns string
+ */
+export var getNavigationContrastText = function (theme) {
+    var _a;
+    var palette = theme.palette;
+    // Use background property if navigation properties arent set
+    if (!palette.navigation.contrastText && !palette.navigation.background) {
+        return palette.getContrastText(palette.background.paper);
+    }
+    return (_a = palette.navigation.contrastText) !== null && _a !== void 0 ? _a : palette.getContrastText(palette.navigation.background);
+};
+/**
+ * Return a darkened or lightened background color for the navigation
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
+ * @returns string
+ */
+export var getOffsetNavigationBackground = function (theme, colorAdjustAmount) {
+    var palette = theme.palette;
+    var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
+    // Use background property if navigation property isnt set
+    if (!palette.navigation.background) {
+        return getLuminance(palette.background.paper) > 0.5
+            ? darken(adjustAmount, palette.background.paper)
+            : lighten(adjustAmount, palette.background.paper);
+    }
+    return getLuminance(palette.navigation.background) > 0.5
+        ? darken(adjustAmount, palette.navigation.background)
+        : lighten(adjustAmount, palette.navigation.background);
+};
+/**
+ * Return a darkened or lightened contrast color for the navigation
+ * @param [colorAdjustAmount] number - Amount to lighten or darken the color
+ * @returns string
+ */
+export var getOffsetNavigationContrastText = function (theme, colorAdjustAmount) {
+    var palette = theme.palette;
+    var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
+    // Use background property if navigation property isnt set
+    if (!palette.navigation.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.navigation.background) > 0.5
+        ? palette.getContrastText(darken(adjustAmount, palette.navigation.background))
+        : palette.getContrastText(lighten(adjustAmount, palette.navigation.background));
+};

package/components/stream/AppHub/AppHub.js CHANGED Viewed

@@ -38,10 +38,10 @@ var AppHub = function (props) {
                         // @ts-ignore
                         , __assign({
                             // @ts-ignore
-                            component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsxs(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 } }, { children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: (_a = addButton.title) !== null && _a !== void 0 ? _a : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) }))), items.map(function (_a, index) {
-                                    var customName = _a.customName, url = _a.url, icon = _a.icon;
-                                    return (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: url && (_jsx(AppHubCustom, { customName: customName, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }), "".concat(customName, "_").concat(rowIndex, "_").concat(index)));
-                                }), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: (_b = addButton.title) !== null && _b !== void 0 ? _b : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) })))] }))] }, "row_".concat(rowIndex)));
+                            component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsxs(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 } }, { children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, name: (_a = addButton.title) !== null && _a !== void 0 ? _a : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) }))), items.map(function (_a, index) {
+                                    var name = _a.name, url = _a.url, icon = _a.icon;
+                                    return (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }), "".concat(name, "_").concat(rowIndex, "_").concat(index)));
+                                }), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, name: (_b = addButton.title) !== null && _b !== void 0 ? _b : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) })))] }))] }, "row_".concat(rowIndex)));
             }
             default: {
                 console.log('no items');

package/components/stream/AppHub/AppHubCustom.d.ts CHANGED Viewed

@@ -6,9 +6,8 @@ export declare const LogoVariants: {
     White: string;
 };
 interface IAppHubCustomProps {
-    shortName?: string;
-    customName?: string;
-    url?: string;
+    name: string;
+    url: string;
     isAddButton?: boolean;
     customLinkBgColor?: string;
     icon?: any;

package/components/stream/AppHub/AppHubCustom.js CHANGED Viewed

@@ -20,12 +20,12 @@ export var LogoVariants = {
     White: 'icon-white'
 };
 var AppHubCustom = function (props) {
-    var shortName = props.shortName, customName = props.customName, url = props.url, isAddButton = props.isAddButton, customLinkBgColor = props.customLinkBgColor, icon = props.icon;
+    var name = props.name, url = props.url, isAddButton = props.isAddButton, customLinkBgColor = props.customLinkBgColor, icon = props.icon;
     var addIcon = icon !== null && icon !== void 0 ? icon : _jsx(StyledAddCircleOutlineIcon, {});
-    return (_jsx(StyledPaper, __assign({ elevation: 0 }, { children: _jsx(StyledLink, __assign({ href: url, target: !isAddButton ? '_blank' : '_self', underline: 'none' }, { children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon !== null && icon !== void 0 ? icon : (customName ? handleAvatarInitials(customName) : null), customLinkBgColor: customLinkBgColor })), isAddButton && addIcon, _jsx(StyledTypography
+    return (_jsx(StyledPaper, __assign({ elevation: 0 }, { children: _jsx(StyledLink, __assign({ href: url, target: !isAddButton ? '_blank' : '_self', underline: 'none' }, { children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon !== null && icon !== void 0 ? icon : (name ? handleAvatarInitials(name) : null), customLinkBgColor: customLinkBgColor })), isAddButton && addIcon, _jsx(StyledTypography
                     // @ts-ignore
                     , __assign({
                         // @ts-ignore
-                        component: 'div' }, { children: customName !== null && customName !== void 0 ? customName : shortName }))] }) })) })));
+                        component: 'div' }, { children: name }))] }) })) })));
 };
 export default AppHubCustom;

package/components/stream/AppHub/constants.d.ts CHANGED Viewed

@@ -70,16 +70,16 @@ export declare const hubApplications: ({
     children?: undefined;
 })[];
 export declare const hubCustomLinks: ({
-    customName: string;
+    name: string;
     url: string;
     customLinkBgColor?: undefined;
 } | {
-    customName: string;
+    name: string;
     url: string;
     customLinkBgColor: string;
 })[];
 export declare const hubSupportItems: {
-    customName: string;
+    name: string;
     url: string;
     icon: JSX.Element;
 }[];

package/components/stream/AppHub/constants.js CHANGED Viewed

@@ -42,16 +42,16 @@ export var hubApplications = [
     { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', subtitle: 'Subtitle Test', url: 'https://learningpool.com' }
 ];
 export var hubCustomLinks = [
-    { customName: 'Learning Pool', url: 'https://learningpool.com' },
-    { customName: 'Custom Link', url: 'https://learningpool.com' },
-    { customName: 'Another Custom Link', url: 'https://learningpool.com', customLinkBgColor: '#ff0000' },
-    { customName: 'Wrapping Text Name Truncation Test Link', url: 'https://learningpool.com' },
-    { customName: 'Link', url: 'https://learningpool.com' },
-    { customName: 'Another Custom Link', url: 'https://learningpool.com' },
-    { customName: 'Another Custom Link', url: 'https://learningpool.com' },
-    { customName: 'Another Custom Link', url: 'https://learningpool.com' },
-    { customName: 'Another Custom Link', url: 'https://learningpool.com' }
+    { name: 'Learning Pool', url: 'https://learningpool.com' },
+    { name: 'Custom Link', url: 'https://learningpool.com' },
+    { name: 'Another Custom Link', url: 'https://learningpool.com', customLinkBgColor: '#ff0000' },
+    { name: 'Wrapping Text Name Truncation Test Link', url: 'https://learningpool.com' },
+    { name: 'Link', url: 'https://learningpool.com' },
+    { name: 'Another Custom Link', url: 'https://learningpool.com' },
+    { name: 'Another Custom Link', url: 'https://learningpool.com' },
+    { name: 'Another Custom Link', url: 'https://learningpool.com' },
+    { name: 'Another Custom Link', url: 'https://learningpool.com' }
 ];
 export var hubSupportItems = [
-    { customName: 'Contact us', url: 'https://learningpool.com', icon: _jsx(Home, {}) }
+    { name: 'Contact us', url: 'https://learningpool.com', icon: _jsx(Home, {}) }
 ];

package/package.json CHANGED Viewed

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

package/types/utils/themeExtends.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+declare module '@mui/material/styles' {
+    interface Palette {
+        navigation: {
+            background: string;
+            contrastText: string;
+        };
+    }
+    interface PaletteOptions {
+        navigation?: {
+            background?: string;
+            contrastText?: string;
+        };
+    }
+}
+export {};

package/types/utils/themeExtends.js ADDED Viewed

	@@ -0,0 +1 @@
1	+ export {};

package/utils/theme.d.ts CHANGED Viewed

@@ -55,6 +55,10 @@ export declare const lightTheme: {
         text: {
             primary: string;
         };
+        navigation: {
+            background: string;
+        };
+        contrastThreshold: number;
     };
 };
 export declare const darkTheme: {
@@ -79,6 +83,10 @@ export declare const darkTheme: {
         text: {
             primary: string;
         };
+        navigation: {
+            background: string;
+        };
+        contrastThreshold: number;
     };
 };
 export declare const motion: {

package/utils/theme.js CHANGED Viewed

@@ -41,7 +41,11 @@ export var lightTheme = {
         divider: 'rgba(0, 0, 0, 0.075)',
         text: {
             primary: 'rgba(0,0,0,0.95)'
-        }
+        },
+        navigation: {
+            background: '#fff'
+        },
+        contrastThreshold: 4.5
     }
 };
 export var darkTheme = {
@@ -50,7 +54,11 @@ export var darkTheme = {
         divider: 'rgba(255, 255, 255, 0.075)',
         text: {
             primary: 'rgba(255,255,255,0.95)'
-        }
+        },
+        navigation: {
+            background: '#212121'
+        },
+        contrastThreshold: 4.5
     }
 };
 export var motion = {