@learningpool/ui 1.15.4 → 1.16.0

package/components/navigation/MobileNavigation/MobileNavigationDrawer.js

@@ -1,24 +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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import { List, ListItemText } from '../../../index';
@@ -29,29 +9,28 @@ import { useFadeIn } from '../../../utils/helpers';
 import { getDefaultSupportLinks, getOffsetNavigationContrastText } from '../helpers';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 import { defaultMessages } from '../../../lang/en-us';
+import { EVENT_KEYS } from '../../../utils/constants';
 export default function SwipeableTemporaryDrawer(props) {
-    var isDrawerOpen = props.isDrawerOpen, setIsDrawerOpen = props.setIsDrawerOpen, items = props.items, secondaryItems = props.secondaryItems, logo = props.logo, logoText = props.logoText, logoOnClick = props.logoOnClick, dataAttributes = props.dataAttributes, localization = props.localization, showSupportLinks = props.showSupportLinks, avatarPanelShowHelpLinks = props.avatarPanelShowHelpLinks;
-    var theme = useTheme();
-    var _a = React.useState(isDrawerOpen !== null && isDrawerOpen !== void 0 ? isDrawerOpen : false), isOpen = _a[0], setIsOpen = _a[1];
-    var messages = __assign(__assign({}, defaultMessages), localization);
-    var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
-    React.useEffect(function () { return handleOpenState(isDrawerOpen); }, [isDrawerOpen]);
-    var handleOpenState = function (open) {
+    const { isDrawerOpen, setIsDrawerOpen, items, secondaryItems, logo, logoText, logoOnClick, dataAttributes, localization, showSupportLinks, avatarPanelShowHelpLinks } = props;
+    const theme = useTheme();
+    const [isOpen, setIsOpen] = React.useState(isDrawerOpen ?? false);
+    const messages = { ...defaultMessages, ...localization };
+    const dataIds = { ...defaultAttributes, ...dataAttributes };
+    React.useEffect(() => handleOpenState(isDrawerOpen), [isDrawerOpen]);
+    const handleOpenState = (open) => {
         setIsOpen(open);
         setIsDrawerOpen(open);
     };
-    var toggleDrawer = function (open) {
-        return function (event) {
-            if (event && event.type === 'keydown' &&
-                (event.key === 'Tab' ||
-                    event.key === 'Shift')) {
-                return;
-            }
-            handleOpenState(open);
-        };
+    const toggleDrawer = (open) => (event) => {
+        if (event && event.type === EVENT_KEYS.Keydown &&
+            (event.key === EVENT_KEYS.Tab ||
+                event.key === EVENT_KEYS.Shift)) {
+            return;
+        }
+        handleOpenState(open);
     };
     // Default support links, these can be toggled on/off via the showSupportLinks
-    var defaultSupportLinks = getDefaultSupportLinks(messages);
+    const defaultSupportLinks = getDefaultSupportLinks(messages);
     // Workaround to handle the react-spring calls without
     // adding additional hook calls on prop or state changes
     // --
@@ -59,35 +38,29 @@ export default function SwipeableTemporaryDrawer(props) {
     // this way the number of hook calls never changes
     // --
     // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
-    var additionalItems = ['logo', 'divider'];
-    var totalItems = __spreadArray(__spreadArray(__spreadArray(__spreadArray([], items !== null && items !== void 0 ? items : [], true), defaultSupportLinks !== null && defaultSupportLinks !== void 0 ? defaultSupportLinks : [], true), secondaryItems !== null && secondaryItems !== void 0 ? secondaryItems : [], true), additionalItems, true);
-    var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isOpen); }));
-    var list = function () {
-        var _a;
-        return (_jsxs(StyledBox, __assign({ onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false) }, { children: [_jsxs(StyledDrawerLogo, __assign({ "data-id": dataIds.MobileNavDrawerBrand, onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, style: animationRefs.current[0] }, { children: [logo
-                            ? typeof logo === 'string'
-                                ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))
-                                : logo
-                            : (_jsx(StreamSuiteLogo, { style: {
-                                    fill: getOffsetNavigationContrastText(theme)
-                                } })), _jsx(StyledDrawerLogoText, __assign({ variant: 'body1' }, { children: logoText !== null && logoText !== void 0 ? logoText : 'Site Logo' }))] })), _jsxs(List, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryList }, { children: [items && items.length > 0 && items.map(function (item, index) {
-                            var label = item.label, children = item.children, onClick = item.onClick;
-                            return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
-                                // @ts-expect-error
-                                component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton, __assign({ onClick: onClick }, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildItem }, { children: _jsx(StyledChildListItemButton, __assign({ onClick: childItem === null || childItem === void 0 ? void 0 : childItem.onClick }, { children: _jsx(StyledChildListItemText, { primary: childItem === null || childItem === void 0 ? void 0 : childItem.label }, childItem === null || childItem === void 0 ? void 0 : childItem.label) })) }), childItem === null || childItem === void 0 ? void 0 : childItem.label)); }) })))] }), label));
-                        }), (showSupportLinks || avatarPanelShowHelpLinks) && defaultSupportLinks && defaultSupportLinks.length > 0 && defaultSupportLinks.map(function (item, index) {
-                            var label = item.label, children = item.children, onClick = item.onClick;
-                            return (_jsxs(StyledListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
-                                // @ts-expect-error
-                                component: animated.li, style: animationRefs.current[index] }, { children: [_jsx(StyledListItemButton, __assign({ onClick: onClick }, { children: _jsx(StyledListItemText, { primary: label }) })), children && children.length > 0 && (_jsx(StyledChildList, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label }, { children: children.map(function (childItem) { return (_jsx(StyledChildListItem, __assign({ "data-id": dataIds.MobileNavDrawerPrimaryChildItem }, { children: _jsx(StyledChildListItemButton, __assign({ onClick: childItem === null || childItem === void 0 ? void 0 : childItem.onClick }, { children: _jsx(StyledChildListItemText, { primary: childItem === null || childItem === void 0 ? void 0 : childItem.label }, childItem === null || childItem === void 0 ? void 0 : childItem.label) })) }), childItem === null || childItem === void 0 ? void 0 : childItem.label)); }) })))] }), label));
-                        })] })), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, __assign({ style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + 1] }, { children: _jsx(StyledDivider, {}) })), _jsx(StyledListSecondaryList, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryList }, { children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
-                                var _a;
-                                return (_jsx(StyledListSecondaryItem, __assign({ "data-id": dataIds.MobileNavDrawerSecondaryItem, disablePadding: true, 
-                                    // @ts-expect-error
-                                    component: animated.li, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 2] }, { children: _jsx(StyledListSecondaryButton, __assign({ onClick: item === null || item === void 0 ? void 0 : item.onClick }, { children: _jsx(ListItemText, { primary: item.label }) })) }), item.label));
-                            }) }))] }))] })));
-    };
-    return (_jsx("aside", { children: _jsx(StyledSwipeableDrawer, __assign({ "data-id": dataIds.MobileNavDrawerPanel, anchor: 'bottom', open: isOpen, onClose: toggleDrawer(false), hideBackdrop: true, ModalProps: {
+    const additionalItems = ['logo', 'divider'];
+    const totalItems = [...items ?? [], ...defaultSupportLinks ?? [], ...secondaryItems ?? [], ...additionalItems];
+    const animationRefs = React.useRef(totalItems && totalItems.map((item, index) => useFadeIn(index, !isOpen)));
+    const list = () => (_jsxs(StyledBox, { onClick: toggleDrawer(false), onKeyDown: toggleDrawer(false), children: [_jsxs(StyledDrawerLogo, { "data-id": dataIds.MobileNavDrawerBrand, onClick: logoOnClick ?? null, style: animationRefs.current[0], children: [logo
+                        ? typeof logo === 'string'
+                            ? (_jsx("img", { height: 38, width: 38, src: logo, alt: logoText ?? 'Site Logo' }))
+                            : logo
+                        : (_jsx(StreamSuiteLogo, { style: {
+                                fill: getOffsetNavigationContrastText(theme)
+                            } })), _jsx(StyledDrawerLogoText, { variant: 'body1', children: logoText ?? 'Site Logo' })] }), _jsxs(List, { "data-id": dataIds.MobileNavDrawerPrimaryList, children: [items && items.length > 0 && items.map((item, index) => {
+                        const { label, children, onClick } = item;
+                        return (_jsxs(StyledListItem, { "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
+                            // @ts-expect-error
+                            component: animated.li, style: animationRefs.current[index], children: [_jsx(StyledListItemButton, { onClick: onClick, children: _jsx(StyledListItemText, { primary: label }) }), children && children.length > 0 && (_jsx(StyledChildList, { "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label, children: children.map(childItem => (_jsx(StyledChildListItem, { "data-id": dataIds.MobileNavDrawerPrimaryChildItem, children: _jsx(StyledChildListItemButton, { onClick: childItem?.onClick, children: _jsx(StyledChildListItemText, { primary: childItem?.label }, childItem?.label) }) }, childItem?.label))) }))] }, label));
+                    }), (showSupportLinks || avatarPanelShowHelpLinks) && defaultSupportLinks && defaultSupportLinks.length > 0 && defaultSupportLinks.map((item, index) => {
+                        const { label, children, onClick } = item;
+                        return (_jsxs(StyledListItem, { "data-id": dataIds.MobileNavDrawerPrimaryItem, disablePadding: true, 
+                            // @ts-expect-error
+                            component: animated.li, style: animationRefs.current[index], children: [_jsx(StyledListItemButton, { onClick: onClick, children: _jsx(StyledListItemText, { primary: label }) }), children && children.length > 0 && (_jsx(StyledChildList, { "data-id": dataIds.MobileNavDrawerPrimaryChildList, "aria-label": label, children: children.map(childItem => (_jsx(StyledChildListItem, { "data-id": dataIds.MobileNavDrawerPrimaryChildItem, children: _jsx(StyledChildListItemButton, { onClick: childItem?.onClick, children: _jsx(StyledChildListItemText, { primary: childItem?.label }, childItem?.label) }) }, childItem?.label))) }))] }, label));
+                    })] }), secondaryItems && secondaryItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(animated.div, { style: animationRefs.current[(items?.length ?? 0) + 1], children: _jsx(StyledDivider, {}) }), _jsx(StyledListSecondaryList, { "data-id": dataIds.MobileNavDrawerSecondaryList, children: secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (_jsx(StyledListSecondaryItem, { "data-id": dataIds.MobileNavDrawerSecondaryItem, disablePadding: true, 
+                            // @ts-expect-error
+                            component: animated.li, style: animationRefs.current[(items?.length ?? 0) + index + 2], children: _jsx(StyledListSecondaryButton, { onClick: item?.onClick, children: _jsx(ListItemText, { primary: item.label }) }) }, item.label))) })] }))] }));
+    return (_jsx("aside", { children: _jsx(StyledSwipeableDrawer, { "data-id": dataIds.MobileNavDrawerPanel, anchor: 'bottom', open: isOpen, onClose: toggleDrawer(false), hideBackdrop: true, ModalProps: {
                 keepMounted: true
-            } }, { children: list() })) }));
+            }, children: list() }) }));
 }

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

@@ -1,6 +1,5 @@
 /// <reference types="react" />
 /// <reference types="react" />
-/// <reference types="trusted-types" />
 export declare const StyledSwipeableDrawer: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
     children?: import("react").ReactNode;
@@ -26,6 +25,8 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
         animationName?: import("csstype").Property.AnimationName | undefined;
         animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
+        animationRangeEnd?: import("csstype").Property.AnimationRangeEnd<string | number> | undefined;
+        animationRangeStart?: import("csstype").Property.AnimationRangeStart<string | number> | undefined;
         animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
         animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
         appearance?: import("csstype").Property.Appearance | undefined;
@@ -147,6 +148,10 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         fontStretch?: import("csstype").Property.FontStretch | undefined;
         fontStyle?: import("csstype").Property.FontStyle | undefined;
         fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
+        fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
+        fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | undefined;
+        fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | undefined;
+        fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | undefined;
         fontVariant?: import("csstype").Property.FontVariant | undefined;
         fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
         fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
@@ -220,6 +225,7 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
         maskSize?: import("csstype").Property.MaskSize<string | number> | undefined;
         maskType?: import("csstype").Property.MaskType | undefined;
+        masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | undefined;
         mathDepth?: import("csstype").Property.MathDepth | undefined;
         mathShift?: import("csstype").Property.MathShift | undefined;
         mathStyle?: import("csstype").Property.MathStyle | undefined;
@@ -259,6 +265,7 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         overflowWrap?: import("csstype").Property.OverflowWrap | undefined;
         overflowX?: import("csstype").Property.OverflowX | undefined;
         overflowY?: import("csstype").Property.OverflowY | undefined;
+        overlay?: import("csstype").Property.Overlay | undefined;
         overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | undefined;
         overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
         overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
@@ -346,12 +353,15 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         textTransform?: import("csstype").Property.TextTransform | undefined;
         textUnderlineOffset?: import("csstype").Property.TextUnderlineOffset<string | number> | undefined;
         textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
+        textWrap?: import("csstype").Property.TextWrap | undefined;
+        timelineScope?: import("csstype").Property.TimelineScope | undefined;
         top?: import("csstype").Property.Top<string | number> | undefined;
         touchAction?: import("csstype").Property.TouchAction | undefined;
         transform?: string | undefined;
         transformBox?: import("csstype").Property.TransformBox | undefined;
         transformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
         transformStyle?: import("csstype").Property.TransformStyle | undefined;
+        transitionBehavior?: import("csstype").Property.TransitionBehavior | undefined;
         transitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
         transitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
         transitionProperty?: import("csstype").Property.TransitionProperty | undefined;
@@ -360,9 +370,14 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
         userSelect?: import("csstype").Property.UserSelect | undefined;
         verticalAlign?: import("csstype").Property.VerticalAlign<string | number> | undefined;
+        viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
+        viewTimelineInset?: import("csstype").Property.ViewTimelineInset<string | number> | undefined;
+        viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
         viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
         visibility?: import("csstype").Property.Visibility | undefined;
         whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
+        whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
+        whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
         widows?: import("csstype").Property.Widows | undefined;
         width?: import("csstype").Property.Width<string | number> | undefined;
         willChange?: import("csstype").Property.WillChange | undefined;
@@ -374,6 +389,7 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         zoom?: import("csstype").Property.Zoom | undefined;
         all?: import("csstype").Globals | undefined;
         animation?: import("csstype").Property.Animation<string & {}> | undefined;
+        animationRange?: import("csstype").Property.AnimationRange<string | number> | undefined;
         background?: import("csstype").Property.Background<string | number> | undefined;
         backgroundPosition?: import("csstype").Property.BackgroundPosition<string | number> | undefined;
         border?: import("csstype").Property.Border<string | number> | undefined;
@@ -438,6 +454,7 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         textDecoration?: import("csstype").Property.TextDecoration<string | number> | undefined;
         textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
         transition?: import("csstype").Property.Transition<string & {}> | undefined;
+        viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
         MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
         MozAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
         MozAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
@@ -447,7 +464,6 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
         MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
         MozAppearance?: import("csstype").Property.MozAppearance | undefined;
-        MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
         MozBinding?: import("csstype").Property.MozBinding | undefined;
         MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
         MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
@@ -474,20 +490,16 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         MozMarginStart?: import("csstype").Property.MarginInlineStart<string | number> | undefined;
         MozOrient?: import("csstype").Property.MozOrient | undefined;
         MozOsxFontSmoothing?: import("csstype").Property.FontSmooth<string | number> | undefined;
+        MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<string | number> | undefined;
+        MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<string | number> | undefined;
+        MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<string | number> | undefined;
+        MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
         MozPaddingEnd?: import("csstype").Property.PaddingInlineEnd<string | number> | undefined;
         MozPaddingStart?: import("csstype").Property.PaddingInlineStart<string | number> | undefined;
-        MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
-        MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
         MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
         MozTabSize?: import("csstype").Property.TabSize<string | number> | undefined;
         MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
         MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
-        MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
-        MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
-        MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
-        MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
-        MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
-        MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
         MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
         MozUserModify?: import("csstype").Property.MozUserModify | undefined;
         MozUserSelect?: import("csstype").Property.UserSelect | undefined;
@@ -667,7 +679,7 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         MozBorderImage?: import("csstype").Property.BorderImage | undefined;
         MozColumnRule?: import("csstype").Property.ColumnRule<string | number> | undefined;
         MozColumns?: import("csstype").Property.Columns<string | number> | undefined;
-        MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+        MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
         msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
         msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
         msFlex?: import("csstype").Property.Flex<string | number> | undefined;
@@ -725,6 +737,7 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
         KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
         KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
+        MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
         MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
         MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
         MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
@@ -746,17 +759,22 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         MozOpacity?: import("csstype").Property.Opacity | undefined;
         MozOutline?: import("csstype").Property.Outline<string | number> | undefined;
         MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
-        MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<string | number> | undefined;
-        MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<string | number> | undefined;
-        MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<string | number> | undefined;
-        MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<string | number> | undefined;
-        MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<string | number> | undefined;
         MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
         MozOutlineWidth?: import("csstype").Property.OutlineWidth<string | number> | undefined;
+        MozPerspective?: import("csstype").Property.Perspective<string | number> | undefined;
+        MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<string | number> | undefined;
         MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
         MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
         MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
         MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
+        MozTransform?: import("csstype").Property.Transform | undefined;
+        MozTransformOrigin?: import("csstype").Property.TransformOrigin<string | number> | undefined;
+        MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
+        MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
+        MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
+        MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
+        MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
+        MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
         MozUserInput?: import("csstype").Property.MozUserInput | undefined;
         msImeMode?: import("csstype").Property.ImeMode | undefined;
         OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
@@ -789,8 +807,6 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
         WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
         WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
         WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
-        WebkitScrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
-        WebkitScrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
         alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
         baselineShift?: import("csstype").Property.BaselineShift<string | number> | undefined;
         clipRule?: import("csstype").Property.ClipRule | undefined;

package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.js

@@ -1,25 +1,138 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Box, List, ListItem, ListItemText, ListItemButton, Typography } from '../../../index';
 import { getNavigationBackground, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import Drawer from '@mui/material/Drawer';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* Override the MUI default z-index of the Drawer component\n     to ensure that the drawer is always below the AppBar. */\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  /* Override the MUI default z-index of the Drawer component\n     to ensure that the drawer is always below the AppBar. */\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return getOffsetNavigationBackground(props.theme); });
-export var StyledBox = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 100%;\n  overflow: auto;\n  padding-bottom: 6rem;\n"], ["\n  height: 100%;\n  overflow: auto;\n  padding-bottom: 6rem;\n"])));
-export var StyledDrawerLogo = styled(animated.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"], ["\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  margin: 1.5rem 0 2.5rem 1.5rem;\n\n  .MuiSvgIcon-root {\n    width: 2rem;\n    height: 2rem;\n  }\n"])));
-export var StyledDrawerLogoText = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  margin-left: .5rem;\n  color: ", ";\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); });
-export var StyledListItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0 1rem;\n  max-width: calc(100% - 2rem);\n\n  > .MuiListItemButton-root {\n    padding: .5rem 1.5rem;\n  }\n"], ["\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0 1rem;\n  max-width: calc(100% - 2rem);\n\n  > .MuiListItemButton-root {\n    padding: .5rem 1.5rem;\n  }\n"])));
-export var StyledListItemButton = styled(ListItemButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-radius: 50px;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
-export var StyledListItemText = styled(ListItemText)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  > .MuiTypography-root {\n    font-size: 1.5rem;\n    font-weight: bold;\n  }\n"], ["\n  > .MuiTypography-root {\n    font-size: 1.5rem;\n    font-weight: bold;\n  }\n"])));
-export var StyledChildList = styled(List)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -.25rem 1rem 0 1.5rem;\n  padding: 0;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: -.25rem 1rem 0 1.5rem;\n  padding: 0;\n"])));
-export var StyledChildListItem = styled(ListItem)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  padding: 0;\n"], ["\n  display: flex;\n  align-items: center;\n  padding: 0;\n"])));
-export var StyledChildListItemButton = styled(ListItemButton)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  border-radius: 50px;\n  flex-grow: 0;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  border-radius: 50px;\n  flex-grow: 0;\n  color: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    color: ", ";\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationContrastText(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.133); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.133); });
-export var StyledChildListItemText = styled(ListItemText)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  font-size: .9rem;\n"], ["\n  font-size: .9rem;\n"])));
-export var StyledListSecondaryList = styled(List)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 1rem;\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0 1rem;\n"])));
-export var StyledListSecondaryItem = styled(ListItem)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  flex: 1 0 50%;\n  display: flex;\n  align-items: center;\n"], ["\n  flex: 1 0 50%;\n  display: flex;\n  align-items: center;\n"])));
-export var StyledListSecondaryButton = styled(ListItemButton)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  margin: 0.25rem 0.25rem 0.5rem;\n  padding: 0.3rem 1rem;\n  border-radius: 50px;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  margin: 0.25rem 0.25rem 0.5rem;\n  padding: 0.3rem 1rem;\n  border-radius: 50px;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 0.2s ease;\n\n  :hover {\n    background-color: ", ";\n    color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n    box-shadow: 0 0 0 3px ", ";\n  }\n"])), function (props) { return getOffsetNavigationBackground(props.theme, 0.15); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.15); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.185); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.185); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.185); }, function (props) { return getOffsetNavigationContrastText(props.theme, 0.185); });
-export var StyledDivider = styled('div')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  width: 75%;\n  height: 2px;\n  border: none;\n  border-radius: 3px;\n  margin: 2rem auto;\n"], ["\n  background-color: ", ";\n  width: 75%;\n  height: 2px;\n  border: none;\n  border-radius: 3px;\n  margin: 2rem auto;\n"])), function (props) { return getNavigationBackground(props.theme); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+export const StyledSwipeableDrawer = styled(Drawer) `
+  /* Override the MUI default z-index of the Drawer component
+     to ensure that the drawer is always below the AppBar. */
+  z-index: ${props => props.theme.zIndex.appBar - 1};
+
+  .MuiPaper-root {
+    background-color: ${props => getOffsetNavigationBackground(props.theme)};
+    height: 100vh;
+    border: none;
+    z-index: 1;
+  }
+`;
+export const StyledBox = styled(Box) `
+  height: 100%;
+  overflow: auto;
+  padding-bottom: 6rem;
+`;
+export const StyledDrawerLogo = styled(animated.div) `
+  background-color: transparent;
+  display: flex;
+  align-items: center;
+  margin: 1.5rem 0 2.5rem 1.5rem;
+
+  .MuiSvgIcon-root {
+    width: 2rem;
+    height: 2rem;
+  }
+`;
+export const StyledDrawerLogoText = styled(Typography) `
+  font-size: 1.2rem;
+  margin-left: .5rem;
+  color: ${props => getOffsetNavigationContrastText(props.theme)};
+`;
+export const StyledListItem = styled(ListItem) `
+  flex-direction: column;
+  align-items: flex-start;
+  margin: 0 1rem;
+  max-width: calc(100% - 2rem);
+
+  > .MuiListItemButton-root {
+    padding: .5rem 1.5rem;
+  }
+`;
+export const StyledListItemButton = styled(ListItemButton) `
+  border-radius: 50px;
+  color: ${props => getOffsetNavigationContrastText(props.theme)};
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 0.2s ease;
+
+  :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)};
+  }
+`;
+export const StyledListItemText = styled(ListItemText) `
+  > .MuiTypography-root {
+    font-size: 1.5rem;
+    font-weight: bold;
+  }
+`;
+export const StyledChildList = styled(List) `
+  display: flex;
+  flex-wrap: wrap;
+  margin: -.25rem 1rem 0 1.5rem;
+  padding: 0;
+`;
+export const StyledChildListItem = styled(ListItem) `
+  display: flex;
+  align-items: center;
+  padding: 0;
+`;
+export const StyledChildListItemButton = styled(ListItemButton) `
+  border-radius: 50px;
+  flex-grow: 0;
+  color: ${props => getOffsetNavigationContrastText(props.theme)};
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 0.2s ease;
+
+  :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)};
+  }
+`;
+export const StyledChildListItemText = styled(ListItemText) `
+  font-size: .9rem;
+`;
+export const StyledListSecondaryList = styled(List) `
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 1rem;
+`;
+export const StyledListSecondaryItem = styled(ListItem) `
+  flex: 1 0 50%;
+  display: flex;
+  align-items: center;
+`;
+export const StyledListSecondaryButton = styled(ListItemButton) `
+  background-color: ${props => getOffsetNavigationBackground(props.theme, 0.15)};
+  color: ${props => getOffsetNavigationContrastText(props.theme, 0.15)};
+  margin: 0.25rem 0.25rem 0.5rem;
+  padding: 0.3rem 1rem;
+  border-radius: 50px;
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 0.2s ease;
+
+  :hover {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.185)};
+    color: ${props => getOffsetNavigationContrastText(props.theme, 0.185)};
+  }
+
+  :focus-visible {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.185)};
+    box-shadow: 0 0 0 3px ${props => getOffsetNavigationContrastText(props.theme, 0.185)};
+  }
+`;
+export const StyledDivider = styled('div') `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  width: 75%;
+  height: 2px;
+  border: none;
+  border-radius: 3px;
+  margin: 2rem auto;
+`;

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItem.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 from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Link, List, Tooltip, Collapse } from '../../../../index';
@@ -28,24 +6,23 @@ import MailIcon from '@mui/icons-material/Mail';
 import { ListItem, ListItemButton, ListItemButtonChild, ListItemIcon, ListItemText } from './MobileNavigationItemStyles';
 import { tooltipDelay } from '../../../../utils/theme';
 import MobileNavigationItemFlyoutMenu from './MobileNavigationItemFlyoutMenu';
-var MobileNavigationItem = 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, content = props.content, style = props.style, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style"]);
-    var _d = React.useState(false), isExpanded = _d[0], setIsExpanded = _d[1];
-    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
-    var open = Boolean(anchorEl);
-    var handlePopoverOpen = function (event) {
+const MobileNavigationItem = (props) => {
+    const theme = useTheme();
+    const { label, icon, onClick, isActive, children, isDrawerOpen, index, hasFlyout, fullHeightFlyout, isSecondary, content, style, ...rest } = props;
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handlePopoverOpen = (event) => {
         if (open) {
             handlePopoverClose();
             return;
         }
-        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 (fullHeightFlyout) {
             handlePopoverOpen(event);
             return;
@@ -59,33 +36,33 @@ var MobileNavigationItem = function (props) {
         }
         setAnchorEl(null);
     };
-    return (_jsxs(ListItem, __assign({ disablePadding: true, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton
+    return (_jsxs(ListItem, { disablePadding: true, style: style, ...rest, isDrawerOpen: isDrawerOpen, children: [_jsxs(ListItemButton
             // @ts-expect-error
-            , __assign({ 
+            , { 
                 // @ts-expect-error
-                component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, isExpanded: isExpanded, open: open, onMouseEnter: function (event) { return fullHeightFlyout
+                component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, isExpanded: isExpanded, open: open, onMouseEnter: event => fullHeightFlyout
                     ? null
-                    : handlePopoverOpen(event); }, onMouseLeave: function () { return fullHeightFlyout
+                    : handlePopoverOpen(event), onMouseLeave: () => fullHeightFlyout
                     ? null
-                    : handlePopoverClose(); }, onFocus: function (event) { return fullHeightFlyout
+                    : handlePopoverClose(), onFocus: event => fullHeightFlyout
                     ? null
-                    : handlePopoverOpen(event); }, onBlur: function () { return fullHeightFlyout
+                    : handlePopoverOpen(event), onBlur: () => fullHeightFlyout
                     ? null
-                    : handlePopoverClose(); }, "aria-expanded": (children && children.length > 0) ? open : null, "aria-haspopup": (children && children.length > 0) ? 'true' : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
+                    : handlePopoverClose(), "aria-expanded": (children && children.length > 0) ? open : null, "aria-haspopup": (children && children.length > 0) ? 'true' : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) ? '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, sx: {
                             '& .MuiTypography-root': {
                                 fontSize: isSecondary ? '14px' : 'inherit'
                             }
-                        } }), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen ? isExpanded : false, timeout: "auto" }, { 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
+                        } }), children && children.length > 0 && (_jsx(Collapse, { component: 'div', in: isDrawerOpen ? isExpanded : false, timeout: "auto", 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, index: index, isDrawerOpen: isDrawerOpen }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
+                                    component: Link, index: index, isDrawerOpen: isDrawerOpen, 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)
                                                 }
-                                            } })] }), label) }))); }) })) })))] }), label), !fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (_jsx(MobileNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(MobileNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+                                            } })] }, label) }))) }) }))] }, label), !fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (_jsx(MobileNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(MobileNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] }));
 };
 export default MobileNavigationItem;