@learningpool/ui 1.15.4 → 1.16.0

package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js

@@ -1,20 +1,92 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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/Drawer';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
 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 getOffsetNavigationBackground(props.theme); }, function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.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 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  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  white-space: normal;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  & .MuiListItemIcon-root {\n    color: ", ";\n  }\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+export const StyledSwipeableAvatar = styled(Drawer) `
+  .MuiPaper-root {
+    height: 100vh;
+    border: none;
+    z-index: 1;
+  }
+`;
+export const StyledButton = styled(Button) `
+  /* Fix for RTL issue */
+  .MuiButton-startIcon {
+    margin-inline-start: -${props => props.theme.spacing(0.5)};
+    margin-inline-end: ${props => props.theme.spacing(1)};
+  }
+
+  .MuiButton-endIcon {
+    margin-inline-start: ${props => props.theme.spacing(1)};
+    margin-inline-end: -${props => props.theme.spacing(0.5)};
+  }
+`;
+export const StyledBox = styled(animated.div) `
+  align-items: center;
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  color: ${props => props.theme.palette.navigation?.contrastText || getOffsetNavigationContrastText(props.theme)};
+  display: flex;
+  flex-direction: column;
+  font-family: ${props => props.theme.typography.fontFamily};
+  height: 100%;
+  justify-content: flex-start;
+  overflow: auto;
+  padding: 15vh ${props => props.theme.spacing(2)};
+  position: relative;
+`;
+export const StyledBoxProfile = styled(animated.div) `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 2rem;
+`;
+export const StyledBoxProfileEdit = styled(animated.div) `
+  display: flex;
+`;
+export const StyledAvatarName = styled(Typography) `
+  font-size: 1.75rem;
+`;
+export const StyledButtonGroup = styled(ButtonGroup) `
+  /* Fix for RTL issue */
+  .MuiButtonGroup-grouped:not(:first-of-type) {
+    border-bottom-left-radius: ${props => props.theme.direction === 'ltr' ? 0 : `${props.theme.shape.borderRadius}px`};
+    border-bottom-right-radius: ${props => props.theme.direction === 'ltr' ? `${props.theme.shape.borderRadius}px` : 0};
+    border-top-left-radius: ${props => props.theme.direction === 'ltr' ? 0 : `${props.theme.shape.borderRadius}px`};
+    border-top-right-radius: ${props => props.theme.direction === 'ltr' ? `${props.theme.shape.borderRadius}px` : 0};
+  }
+
+  .MuiButtonGroup-grouped:not(:last-of-type) {
+    border-bottom-left-radius: ${props => props.theme.direction === 'ltr' ? `${props.theme.shape.borderRadius}px` : 0};
+    border-bottom-right-radius: ${props => props.theme.direction === 'ltr' ? 0 : `${props.theme.shape.borderRadius}px`};
+    border-top-left-radius: ${props => props.theme.direction === 'ltr' ? `${props.theme.shape.borderRadius}px` : 0};
+    border-top-right-radius: ${props => props.theme.direction === 'ltr' ? 0 : `${props.theme.shape.borderRadius}px`};
+    border-style: solid;
+  }
+`;
+export const StyledAvatar = styled(Avatar) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  color: ${props => getNavigationContrastText(props.theme)};
+  font-size: 0.85rem;
+`;
+export const StyledListItemButton = styled(ListItemButton) `
+  border-radius: 50px;
+  white-space: normal;
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 0.2s ease;
+
+  & .MuiListItemIcon-root {
+    color: ${props => props.theme.palette.navigation?.contrastText || getOffsetNavigationContrastText(props.theme)};
+  }
+
+  :hover {
+    color: ${props => getOffsetNavigationContrastText(props.theme, 0.15)};
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.15)};
+  }
+
+  :focus-visible {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.133)};
+    box-shadow: 0 0 0 3px ${props => getOffsetNavigationContrastText(props.theme, 0.133)};
+  }
+`;

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

@@ -1,26 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Link, List, Tooltip, Collapse } from '../../../../index';
@@ -29,31 +7,30 @@ import { ListItem, ListItemButton, ListItemButtonChild, ListItemIcon, ListItemTe
 import { tooltipDelay } from '../../../../utils/theme';
 import VerticalNavigationItemFlyoutMenu from './VerticalNavigationItemFlyoutMenu';
 import { animated } from '@react-spring/web';
-var VerticalNavigationItem = function (props) {
-    var _a, _b, _c;
-    var theme = useTheme();
-    var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, isContentOpen = props.isContentOpen, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, id = props.id, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "isContentOpen", "content", "style", "hasCustomContent", "id"]);
-    var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
-    var _e = React.useState(false), isFlyoutHovered = _e[0], setIsFlyoutHovered = _e[1];
-    var open = isFlyoutHovered || Boolean(anchorEl);
-    useEffect(function () {
+const VerticalNavigationItem = (props) => {
+    const theme = useTheme();
+    const { label, icon, onClick, isActive, children, isDrawerOpen, index, hasFlyout, fullHeightFlyout, isSecondary, isContentOpen, content, style, hasCustomContent, id, ...rest } = props;
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const [isFlyoutHovered, setIsFlyoutHovered] = React.useState(false);
+    const open = isFlyoutHovered || Boolean(anchorEl);
+    useEffect(() => {
         if (!isContentOpen && open) {
             handlePopoverClose();
         }
     }, [isContentOpen]);
-    var handlePopoverOpen = function (event) {
+    const handlePopoverOpen = (event) => {
         if (open) {
             handlePopoverClose();
             return;
         }
         if (!isDrawerOpen || fullHeightFlyout) {
-            setAnchorEl(event === null || event === void 0 ? void 0 : event.currentTarget);
+            setAnchorEl(event?.currentTarget);
         }
     };
-    var handlePopoverClose = function () {
+    const handlePopoverClose = () => {
         setAnchorEl(null);
     };
-    var handleClick = function (event) {
+    const handleClick = (event) => {
         if ((children && children.length > 0) || fullHeightFlyout || hasCustomContent) {
             handlePopoverOpen(event);
             onClick && onClick(event);
@@ -70,7 +47,7 @@ var VerticalNavigationItem = function (props) {
         // Set open to false / Close sub menu
         setAnchorEl(null);
     };
-    var handleChildItemClick = function (event, item) {
+    const handleChildItemClick = (event, item) => {
         if (!event) {
             return;
         }
@@ -79,20 +56,19 @@ var VerticalNavigationItem = function (props) {
             item.onClick(event);
         }
     };
-    var ref = React.useRef(null);
-    var flyoutRef = React.useRef(null);
-    var handleKeyDown = function (event) {
+    const ref = React.useRef(null);
+    const flyoutRef = React.useRef(null);
+    const handleKeyDown = (event) => {
         if (!event) {
             return;
         }
         // This should only be triggered for items with a sub nav
         if (flyoutRef && flyoutRef.current) {
-            var CLOSE_SUBMENU_DELAY = 200;
+            const CLOSE_SUBMENU_DELAY = 200;
             if (event.type === 'blur') {
-                setTimeout(function () {
-                    var _a;
+                setTimeout(() => {
                     // @ts-expect-error
-                    var isMenuFocus = ((_a = flyoutRef.current) === null || _a === void 0 ? void 0 : _a.contains(window.document.activeElement)) || ref.current === window.document.activeElement;
+                    const isMenuFocus = flyoutRef.current?.contains(window.document.activeElement) || ref.current === window.document.activeElement;
                     if (!isMenuFocus) {
                         handlePopoverClose();
                     }
@@ -100,22 +76,22 @@ var VerticalNavigationItem = function (props) {
             }
         }
     };
-    return (_jsxs(ListItem, __assign({ disablePadding: true, 
+    return (_jsxs(ListItem, { disablePadding: true, 
         // @ts-expect-error
-        component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref, id: id, 
+        component: animated.li, style: style, ...rest, isDrawerOpen: isDrawerOpen, children: [_jsxs(ListItemButton, { ref: ref, id: id, 
                 // @ts-expect-error
-                component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, onMouseEnter: function (event) { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
+                component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, onMouseEnter: event => (hasCustomContent || fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverOpen(event); }, onMouseLeave: function () { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
+                    : handlePopoverOpen(event), onMouseLeave: () => (hasCustomContent || fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverClose(); }, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); }, "aria-current": isActive ? 'page' : null, "aria-expanded": (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? open : null, role: (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index })] }), label), children && children.length > 0 && isDrawerOpen && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
+                    : handlePopoverClose(), onFocus: event => handleKeyDown(event), onBlur: event => handleKeyDown(event), "aria-current": isActive ? 'page' : null, "aria-expanded": (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? open : null, role: (children && children.length > 0) || fullHeightFlyout || hasCustomContent ? 'button' : 'link', children: [_jsx(Tooltip, { disableHoverListener: (children && children.length > 0) ?? isDrawerOpen, disableFocusListener: (children && children.length > 0) ?? isDrawerOpen, disableTouchListener: (children && children.length > 0) ?? isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end, children: _jsx(ListItemIcon, { "aria-hidden": true, children: icon ?? _jsx(MailIcon, {}) }) }), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index })] }, label), children && children.length > 0 && isDrawerOpen && (_jsx(Collapse, { component: 'div', in: isDrawerOpen, children: _jsx(List, { "aria-label": label, disablePadding: true, children: children.map((childItem, index) => (_jsx(ListItem, { disablePadding: true, isDrawerOpen: isDrawerOpen, children: _jsxs(ListItemButtonChild
                         // @ts-expect-error
-                        , __assign({ 
+                        , { 
                             // @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: {
+                            component: Link, role: 'link', index: index, isDrawerOpen: isDrawerOpen, onClick: event => handleChildItemClick(event, childItem), children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
                                         '& .MuiTypography-root': {
                                             fontSize: '14px !important'
                                         }
-                                    } })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { ref: flyoutRef, isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, setAnchorEl: setAnchorEl, parentItemRef: ref.current, open: open, children: children, label: label, setIsFlyoutHovered: setIsFlyoutHovered })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+                                    } })] }, label) }, `${childItem.label} - ${index}`))) }) })), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { ref: flyoutRef, isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, setAnchorEl: setAnchorEl, parentItemRef: ref.current, open: open, children: children, label: label, setIsFlyoutHovered: setIsFlyoutHovered })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] }));
 };
 export default VerticalNavigationItem;

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

@@ -1,51 +1,38 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { forwardRef } from 'react';
 import { Link } from '../../../../index';
 import { FullHeightFlyoutMenuPaper, FullHeightFlyoutMenuWrapper, FlyoutNotchMask, NotchMini, FlyoutMenuHeader, FlyoutMenuPaper, FlyoutMenuWrap, FlyoutMenuList, FlyoutMenuButton, FlyoutMenuItem, FlyoutMenuItemText } from './VerticalNavigationItemFlyoutMenuStyles';
 import { defaultAttributes } from '../../../../utils/dataAttributes';
-var VerticalNavigationItemFlyoutMenu = forwardRef(function (props, ref) {
-    var _a;
-    var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, fullHeightFlyout = props.fullHeightFlyout, open = props.open, parentItemRef = props.parentItemRef, dataAttributes = props.dataAttributes, content = props.content, anchorEl = props.anchorEl, setAnchorEl = props.setAnchorEl, setIsFlyoutHovered = props.setIsFlyoutHovered;
-    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
+const VerticalNavigationItemFlyoutMenu = forwardRef((props, ref) => {
+    const { label, children, isDrawerOpen, fullHeightFlyout, open, parentItemRef, dataAttributes, content, anchorEl, setAnchorEl, setIsFlyoutHovered } = props;
+    const dataIds = { ...defaultAttributes, ...dataAttributes };
     if (fullHeightFlyout && content) {
-        return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel", "data-id": dataIds.VerticalNavigationAvatarPanel }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
+        return (_jsx(FullHeightFlyoutMenuPaper, { isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel", "data-id": dataIds.VerticalNavigationAvatarPanel, children: _jsxs(FullHeightFlyoutMenuWrapper, { open: open, children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] }) }));
     }
-    var handleKeyDown = function (event) {
+    const handleKeyDown = (event) => {
         if (!event) {
             return;
         }
-        var CLOSE_SUBMENU_DELAY = 200;
+        const CLOSE_SUBMENU_DELAY = 200;
         if (event.type === 'blur') {
-            setTimeout(function () {
-                var _a;
-                var isMenuFocus = ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(window.document.activeElement)) || parentItemRef.current === window.document.activeElement;
+            setTimeout(() => {
+                const isMenuFocus = ref?.current?.contains(window.document.activeElement) || parentItemRef.current === window.document.activeElement;
                 if (!isMenuFocus) {
                     setAnchorEl(null);
                 }
             }, CLOSE_SUBMENU_DELAY);
         }
     };
-    var isBottomHalfOfScreen = ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().y) > window.innerHeight / 2;
-    return (_jsx(FlyoutMenuPaper, __assign({ ref: ref, "data-id": dataIds.VerticalNavigationFlyout, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setIsFlyoutHovered(true); }, onMouseLeave: function () { return setIsFlyoutHovered(false); }, onFocus: function () { return setIsFlyoutHovered(true); }, onBlur: function () { return setIsFlyoutHovered(false); }, sx: {
+    const isBottomHalfOfScreen = ref?.current?.getBoundingClientRect().y > window.innerHeight / 2;
+    return (_jsx(FlyoutMenuPaper, { ref: ref, "data-id": dataIds.VerticalNavigationFlyout, isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl ?? undefined, onMouseEnter: () => setIsFlyoutHovered(true), onMouseLeave: () => setIsFlyoutHovered(false), onFocus: () => setIsFlyoutHovered(true), onBlur: () => setIsFlyoutHovered(false), sx: {
             transform: isBottomHalfOfScreen ? 'translateY(calc(-100% + 48px))' : ''
-        } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { sx: {
+        }, children: _jsxs(FlyoutMenuWrap, { open: open, children: [_jsx(NotchMini, { sx: {
                         bottom: isBottomHalfOfScreen ? '12px' : 'auto',
                         top: isBottomHalfOfScreen ? 'auto' : '12px'
-                    } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, __assign({ "data-id": dataIds.VerticalNavigationFlyoutListItem }, { children: _jsx(FlyoutMenuButton
+                    } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, { "data-id": dataIds.VerticalNavigationFlyoutList, "aria-label": label, open: open, children: children?.map((childItem, index) => (_jsx(FlyoutMenuItem, { "data-id": dataIds.VerticalNavigationFlyoutListItem, children: _jsx(FlyoutMenuButton
                         // @ts-expect-error
-                        , __assign({ 
+                        , { 
                             // @ts-expect-error
-                            component: Link, role: 'link', onClick: childItem.onClick, onFocus: function (event) { return handleKeyDown(event); }, onBlur: function (event) { return handleKeyDown(event); } }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }), "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
+                            component: Link, role: 'link', onClick: childItem.onClick, onFocus: event => handleKeyDown(event), onBlur: event => handleKeyDown(event), children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }, childItem.label) }, `${childItem.label} - ${index}`))) })] }) }));
 });
 export default VerticalNavigationItemFlyoutMenu;

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

@@ -1,48 +1,144 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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 { getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../../helpers';
-export var DRAWER_WIDTH = {
+export const DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var FlyoutMenuPaper = styled(Paper, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  min-width: 200px;\n  z-index: 2;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  min-width: 200px;\n  z-index: 2;\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.anchorEl
-    ? "".concat(props.anchorEl.getBoundingClientRect().top, "px")
-    : '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 getOffsetNavigationBackground(props.theme); }, function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.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  color: ", ";\n  text-align: ", ";\n"], ["\n  color: ", ";\n  text-align: ", ";\n"])), function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
-export var FlyoutMenuButton = styled(SSListItemButton, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: transparent;\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", ";\n  padding: ", ";\n  width: 100%;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all ", "ms ", ";\n  padding: ", ";\n  width: 100%;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"
-    // FullHeight
-])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
+export const FlyoutMenuPaper = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'
+}) `
+  background: transparent none;
+  box-shadow: none;
+  left: ${props => props.theme.direction === 'ltr' ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px` : 'auto'};
+  right: ${props => props.theme.direction === 'rtl' ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px` : 'auto'};
+  perspective: 800px;
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+  position: fixed;
+  /* Check against height of browser should be top or bottom positioned */
+  top: ${props => props.anchorEl
+    ? `${props.anchorEl.getBoundingClientRect().top}px`
+    : 'auto'};
+  min-width: 200px;
+  z-index: 2;
+`;
+export const FlyoutMenuWrap = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  color: ${props => props.theme.palette.navigation?.contrastText || getOffsetNavigationContrastText(props.theme)};
+  border-radius: 0 8px 8px 0;
+  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%);
+  opacity: ${props => props.open ? 1 : 0};
+  visibility: ${props => props.open ? 'visible' : 'hidden'};
+  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'};
+  transform-origin: left center;
+  transition: ${props => props.open
+    ? `all ${props.theme.transitions.duration.enteringScreen}ms ${props.theme.transitions.easing.easeOut}`
+    : `all ${props.theme.transitions.duration.leavingScreen}ms ${props.theme.transitions.easing.easeIn}`};
+`;
+export const FlyoutMenuList = styled(List, {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  padding: ${props => props.theme.spacing(1, 2)};
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+`;
+export const FlyoutMenuHeader = styled(Typography) `
+  font-weight: bold;
+  padding: 12px 0 0;
+  padding-inline-end: ${props => props.theme.spacing(2)};
+  padding-inline-start: ${props => props.theme.spacing(3)};
+  text-align: ${props => props.theme.direction === 'ltr' ? 'left' : 'right'};
+`;
+export const FlyoutMenuItem = styled(ListItem) `
+  background: transparent !important;
+  font-size: 14px;
+  padding: 0;
+  white-space: normal;
+`;
+export const FlyoutMenuItemText = styled(ListItemText) `
+  color: ${props => props.theme.palette.navigation?.contrastText || getOffsetNavigationContrastText(props.theme)};
+  text-align: ${props => props.theme.direction === 'ltr' ? 'left' : 'right'};
+`;
+export const FlyoutMenuButton = styled(SSListItemButton, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'isExpanded'
+}) `
+  align-items: flex-start;
+  background-color: transparent;
+  border-radius: 5px;
+  display: flex;
+  flex-wrap: wrap;
+  text-decoration: none;
+  text-transform: none;
+  transition: all ${props => props.theme.transitions.duration.enteringScreen}ms ${props => props.theme.transitions.easing.easeOut};
+  padding: ${props => props.theme.spacing(1, 2)};
+  width: 100%;
+
+  :hover {
+    color: ${props => getOffsetNavigationContrastText(props.theme, 0.15)};
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.15)};
+  }
+
+  :focus-visible {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.133)};
+    box-shadow: 0 0 0 3px ${props => getOffsetNavigationContrastText(props.theme, 0.133)};
+  }
+`;
 // 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 ".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 getOffsetNavigationBackground(props.theme); }, function (props) { var _a; return ((_a = props.theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) || getOffsetNavigationContrastText(props.theme); }, function (props) { return props.theme.direction === 'ltr' ? '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: 82px;\n  left: ", ";\n  right: ", ";\n  position: absolute;\n  top: 63px;\n  width: 80px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 82px;\n  left: ", ";\n  right: ", ";\n  position: absolute;\n  top: 63px;\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;
+export const FullHeightFlyoutMenuPaper = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open'
+}) `
+  background: transparent none;
+  box-shadow: none;
+  height: 100%;
+  left: ${props => props.theme.direction === 'ltr' ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px` : 'auto'};
+  right: ${props => props.theme.direction === 'rtl' ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px` : 'auto'};
+  perspective: 800px;
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+  position: fixed;
+  top: 0;
+  transition: ${props => props.open
+    ? `all ${props.theme.transitions.duration.enteringScreen}ms ${props.theme.transitions.easing.easeOut}`
+    : `all ${props.theme.transitions.duration.leavingScreen}ms ${props.theme.transitions.easing.easeIn}`};
+  z-index: 1;
+`;
+export const FullHeightFlyoutMenuWrapper = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  color: ${props => props.theme.palette.navigation?.contrastText || getOffsetNavigationContrastText(props.theme)};
+  box-shadow: ${props => props.theme.direction === 'ltr' ? '35px' : '-35px'} 0 15px 0 rgb(0 0 0 / 10%);
+  height: 100%;
+  max-width: 300px;
+  min-width: 300px;
+  opacity: ${props => props.open ? 1 : 0};
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'};
+  transform-origin: left center;
+  transition: ${props => props.open
+    ? `all ${props.theme.transitions.duration.enteringScreen}ms ${props.theme.transitions.easing.easeOut}`
+    : `all ${props.theme.transitions.duration.leavingScreen}ms ${props.theme.transitions.easing.easeIn}`};
+  visibility: ${props => props.open ? 'visible' : 'hidden'};
+  width: ${props => props.open ? '300' : 0};
+`;
+export const FlyoutNotchMask = styled('div') `
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  content: '';
+  display: block;
+  height: 82px;
+  left: ${props => props.theme.direction === 'ltr' ? '-40px' : 'auto'};
+  right: ${props => props.theme.direction === 'rtl' ? '-40px' : 'auto'};
+  position: absolute;
+  top: 63px;
+  width: 80px;
+  z-index: -1;
+`;
+export const NotchMini = styled(NotchMiniSVG) `
+  fill: ${props => getOffsetNavigationBackground(props.theme)};
+  left: ${props => props.theme.direction === 'ltr' ? '-12px' : 0};
+  right: ${props => props.theme.direction === 'rtl' ? '-12px' : 0};
+  pointer-events: none;
+  position: absolute;
+`;