@learningpool/ui 1.6.0 → 1.6.1

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigation.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { Person } from '@mui/icons-material';
 import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation } from './MobileNavigationStyles';
@@ -31,22 +31,45 @@ import SwipeableTemporaryAvatar from './MobileNavigationAvatar';
 import NotchIndicator from './MobileNavigationNotchIndicator';
 import ToggleX from './MobileNavigationToggleX';
 import ToggleSearchX from './MobileNavigationToggleSearchX';
-import { motion } from 'framer-motion';
 import { MOBILE_NAV_PANEL_TYPES } from '../../../utils/constants';
 import { handleAvatarInitials } from '../../../utils/helpers';
+import { useSpring, animated, useSpringRef, config } from '@react-spring/web';
+import { useCurrentWidth } from '../../../utils/hooks';
 var MobileNavigation = function (props) {
-    var _a, _b;
+    var _a, _b, _c;
     var items = props.items, secondaryItems = props.secondaryItems, hideAvatarInitials = props.hideAvatarInitials, hasSearch = props.hasSearch, hasAvatar = props.hasAvatar, showNotchIndicator = props.showNotchIndicator, rest = __rest(props, ["items", "secondaryItems", "hideAvatarInitials", "hasSearch", "hasAvatar", "showNotchIndicator"]);
     var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var propIsSearchOpen = typeof (props === null || props === void 0 ? void 0 : props.isSearchOpen) === 'boolean' ? props.isSearchOpen : undefined;
     var propIsAvatarOpen = typeof (props === null || props === void 0 ? void 0 : props.isAvatarOpen) === 'boolean' ? props.isAvatarOpen : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
-    var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
-    var _d = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _d[0], setIsSearchOpen = _d[1];
-    var _e = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _e[0], setIsAvatarOpen = _e[1];
-    var _f = React.useState(0), value = _f[0], setValue = _f[1];
+    var _d = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _d[0], setIsDrawerOpen = _d[1];
+    var _e = React.useState(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false), isSearchOpen = _e[0], setIsSearchOpen = _e[1];
+    var _f = React.useState(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false), isAvatarOpen = _f[0], setIsAvatarOpen = _f[1];
+    var _g = React.useState(0), value = _g[0], setValue = _g[1];
     var currentDirection = window.localStorage.getItem('@learningpool/ui/store/mobile-navigation-direction');
-    var _g = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _g[0], setMobileNavDirection = _g[1];
+    var _h = React.useState(currentDirection !== null && currentDirection !== void 0 ? currentDirection : 'ltr'), mobileNavDirection = _h[0], setMobileNavDirection = _h[1];
+    var _j = React.useState(0), mobileNotchPosition = _j[0], setMobileNotchPosition = _j[1];
+    var windowWidth = useCurrentWidth();
+    useEffect(function () {
+        window.localStorage.setItem('@learningpool/ui/store/mobile-navigation-direction', mobileNavDirection);
+        positionMobileNotch();
+    }, [mobileNavDirection]);
+    var NOTCH = {
+        Height: 50,
+        Width: 50
+    };
+    var BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS = document.querySelectorAll('.MuiBottomNavigationAction-root, .bottom-navigation-item');
+    var positionMobileNotch = function () {
+        var _a;
+        var selectedDOMRect = (_a = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        setMobileNotchPosition(selectedDOMRect ? selectedDOMRect.left + (selectedDOMRect.width / 2) - (NOTCH.Width / 2) : mobileNotchPosition);
+    };
+    useEffect(function () { return positionMobileNotch(); }, [
+        value,
+        windowWidth,
+        // Fix notch position if scrollbar is hidden/shown
+        (_b = BOTTOM_NAVIGATION_ITEM_DOM_ELEMENTS[value]) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()
+    ]);
     useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
     useEffect(function () { return setIsSearchOpen(propIsSearchOpen !== null && propIsSearchOpen !== void 0 ? propIsSearchOpen : false); }, [propIsSearchOpen]);
     useEffect(function () { return setIsAvatarOpen(propIsAvatarOpen !== null && propIsAvatarOpen !== void 0 ? propIsAvatarOpen : false); }, [propIsAvatarOpen]);
@@ -60,7 +83,7 @@ var MobileNavigation = function (props) {
         }
         hideNotch();
     }, [isDrawerOpen, isSearchOpen, isAvatarOpen]);
-    var _h = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _h[0], setAvatarInitials = _h[1];
+    var _k = React.useState((_c = handleAvatarInitials(avatarName)) !== null && _c !== void 0 ? _c : 'AN'), avatarInitials = _k[0], setAvatarInitials = _k[1];
     var toggleDrawer = function (open, action) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -91,40 +114,40 @@ var MobileNavigation = function (props) {
             }
         }
     }; };
-    var variantsPaper = {
-        open: {
-            opacity: 1
-        }
-    };
-    var variantsContainer = {
-        open: {
-            transition: { staggerChildren: 0.07, delayChildren: 0.25 }
-        }
-    };
-    var variantsButtons = {
-        open: {
-            y: 0,
-            opacity: 1,
-            transition: {
-                y: { stiffness: 500, velocity: -100 }
-            }
+    var api = useSpringRef();
+    var animationConfig = {
+        MobileNavigationPaper: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        MobileNavigation: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        MobileNavigationButton: {
+            from: { opacity: 0 },
+            to: { opacity: 1 }
+        },
+        MobileNavigationNotch: {
+            ref: api,
+            config: __assign(__assign({}, config.default), { mass: 1 }),
+            x: mobileNotchPosition,
+            y: value < 0 ? 100 : 0
         }
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({ isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }, rest))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({ isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }, rest))), _jsx(StyledPaper, __assign({ elevation: 3, 
+    var MobileNavigationPaperAnimation = useSpring(animationConfig.MobileNavigationPaper);
+    var MobileNavigationAnimation = useSpring(animationConfig.MobileNavigation);
+    var MobileNavigationButtonAnimation = useSpring(animationConfig.MobileNavigationButton);
+    return (_jsxs(_Fragment, { children: [_jsx(SwipeableTemporaryDrawer, __assign({ isDrawerOpen: isDrawerOpen, setIsDrawerOpen: setIsDrawerOpen, items: items, secondaryItems: secondaryItems, label: 'Primary' }, rest)), hasSearch && (_jsx(SwipeableTemporarySearch, __assign({ isSearchOpen: isSearchOpen, setIsSearchOpen: setIsSearchOpen }, rest))), hasAvatar && (_jsx(SwipeableTemporaryAvatar, __assign({ isAvatarOpen: isAvatarOpen, setIsAvatarOpen: setIsAvatarOpen, avatarName: avatarName, mobileNavDirection: mobileNavDirection, setMobileNavDirection: setMobileNavDirection }, rest))), _jsxs(StyledPaper, __assign({ elevation: 3, 
                 // @ts-expect-error
-                component: motion.div, animate: 'open', variants: variantsPaper, initial: { opacity: 0 } }, { children: _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
-                    // @ts-expect-error
-                    component: motion.div, animate: 'open', variants: variantsContainer, style: {
-                        flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row'
-                    } }, { children: [_jsx(StyledBottomNavigationAction, { icon: (_jsxs(_Fragment, { children: [_jsx(ToggleX, {}), showNotchIndicator && value === 0 && _jsx(NotchIndicator, {})] })), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
-                            // @ts-expect-error
-                            component: motion.div, animate: isDrawerOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: {
-                                marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial',
-                                marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto'
-                            } }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: (_jsxs(_Fragment, { children: [_jsx(ToggleSearchX, {}), showNotchIndicator && value === 1 && _jsx(NotchIndicator, {})] })), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
-                            // @ts-expect-error
-                            component: motion.div, animate: isSearchOpen ? 'open' : 'closed', variants: variantsButtons, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: (_jsxs(_Fragment, { children: [!hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), showNotchIndicator && value === 2 && _jsx(NotchIndicator, {})] })), 
-                            // @ts-expect-error
-                            component: motion.button, variants: variantsButtons, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu' }))] })) }))] }));
+                component: animated.div, style: MobileNavigationPaperAnimation }, { children: [showNotchIndicator && _jsx(NotchIndicator, __assign({}, animationConfig.MobileNavigationNotch)), _jsxs(StyledBottomNavigation, __assign({ value: value, onChange: function (event, newValue) { return setValue(newValue); }, 
+                        // @ts-expect-error
+                        component: animated.div, style: __assign({ flexDirection: mobileNavDirection && mobileNavDirection === 'rtl' ? 'row-reverse' : 'row' }, MobileNavigationAnimation) }, { children: [_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleX, { isOpen: isDrawerOpen }), onClick: toggleDrawer(!isDrawerOpen, MOBILE_NAV_PANEL_TYPES.DRAWER), 
+                                // @ts-expect-error
+                                component: animated.div, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: __assign({ marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial', marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto' }, MobileNavigationButtonAnimation) }), hasSearch && (_jsx(StyledBottomNavigationAction, { icon: _jsx(ToggleSearchX, { isOpen: isSearchOpen }), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH), 
+                                // @ts-expect-error
+                                component: animated.div, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation })), hasAvatar && (_jsx(StyledBottomNavigationAction, { onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}), 
+                                // @ts-expect-error
+                                component: animated.button, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation }))] }))] }))] }));
 };
 export default MobileNavigation;

package/{components → dist/components}/navigation/MobileNavigation/MobileNavigationAvatar.js

@@ -16,11 +16,10 @@ import { StyledSwipeableAvatar, StyledBox, StyledBoxProfile, StyledAvatarName, S
 import { useTheme } from '@mui/material/styles';
 import EditIcon from '@mui/icons-material/Edit';
 import LogoutIcon from '@mui/icons-material/Logout';
-import { motion } from 'framer-motion';
-import { motionParent, motionFadeIn, motionFadeInUp, motionWhileHover, motionWhileTap } from './MobileNavigationMotion';
 import ToggleOffIcon from '@mui/icons-material/ToggleOff';
 import ToggleOnIcon from '@mui/icons-material/ToggleOn';
-import { handleAvatarInitials } from '../../../utils/helpers';
+import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
+import { animated } from '@react-spring/web';
 var SwipeableTemporaryAvatar = function (props) {
     var _a;
     var theme = useTheme();
@@ -47,28 +46,24 @@ var SwipeableTemporaryAvatar = function (props) {
         setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
         avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
     };
+    // First item starts at 70ms
+    // see STAGGER_ITEMS_DELAY in helpers.js
+    var animationCount = 1;
+    var incrementAnimationCount = function () { return animationCount++; };
     return (_jsx(StyledSwipeableAvatar, __assign({ anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
             keepMounted: true
-        } }, { children: _jsxs(StyledBox, __assign({ animate: isAvatarOpen ? 'open' : 'closed', variants: motionParent }, { children: [avatarPanelOnClickLogout && (_jsx(Button
+        } }, { children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
                 // @ts-expect-error
                 , __assign({ 
                     // @ts-expect-error
-                    component: motion.button, variants: motionFadeIn, style: {
-                        left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
-                        position: 'absolute',
-                        right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
-                        top: theme.spacing(1)
-                    }, onClick: function () {
+                    component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)), onClick: function () {
                         handleOpenState(false);
                         avatarPanelOnClickLogout();
                     }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
                         alignItems: 'center',
                         display: 'flex',
                         flexDirection: 'column'
-                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ variants: motionFadeInUp }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ variants: motionFadeInUp, style: {
-                                flexDirection: 'row',
-                                marginBottom: theme.spacing(1)
-                            } }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: function () {
+                    } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: function () {
                                             handleOpenState(false);
                                             avatarPanelOnClickViewProfile();
                                         } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
@@ -82,7 +77,10 @@ var SwipeableTemporaryAvatar = function (props) {
                                 marginInlineStart: '3rem',
                                 marginBottom: theme.spacing(2),
                                 maxWidth: '18rem'
-                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
+                                // whileHover={motionWhileHover}
+                                // whileTap={motionWhileTap}
+                                disablePadding: true }, { children: _jsxs(StyledListItemButton
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
                                 , __assign({ 
@@ -97,12 +95,15 @@ var SwipeableTemporaryAvatar = function (props) {
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: motion.button, variants: motionFadeInUp, disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: function () {
+                            component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: function () {
                                 handleOpenState(false);
                                 avatarPanelOnClickMainAction();
                             } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
                                     avatarPanelSettingItems.length > 0 &&
-                                    avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                    avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
+                                        // whileHover={motionWhileHover}
+                                        // whileTap={motionWhileTap}
+                                        disablePadding: true }, { children: _jsxs(StyledListItemButton
                                         // TODO: figure out if these are links or buttons
                                         // @ts-expect-error
                                         , __assign({ 
@@ -113,7 +114,10 @@ var SwipeableTemporaryAvatar = function (props) {
                                                 avatarMenuItem.onClick();
                                             } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                         minWidth: theme.spacing(5)
-                                                    } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: motion.div, variants: motionFadeInUp, whileHover: motionWhileHover, whileTap: motionWhileTap, disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                                    } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), 
+                                    // whileHover={motionWhileHover}
+                                    // whileTap={motionWhileTap}
+                                    disablePadding: true }, { children: _jsxs(StyledListItemButton
                                     // TODO: figure out if these are links or buttons
                                     // @ts-expect-error
                                     , __assign({ 
@@ -135,6 +139,6 @@ var SwipeableTemporaryAvatar = function (props) {
                                                             height: '2em',
                                                             padding: '0.15em',
                                                             width: '2em'
-                                                        } })) }))] })) })))] }))] }))] })) })));
+                                                        } })) }))] })) })))] }))] }))] }) })));
 };
 export default SwipeableTemporaryAvatar;