@learningpool/ui 1.6.0-beta.9 → 1.6.1

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

@@ -4,9 +4,9 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { SwipeableDrawer, OutlinedInput, InputLabel } from '../../../index';
 import { styled } from '@mui/material/styles';
-import { motion } from 'framer-motion';
+import { animated } from '@react-spring/web';
 export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"])));
-export var StyledBox = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? '#003366'
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'none'

package/{components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts → dist/components/navigation/MobileNavigation/MobileNavigationStyles.d.ts}

@@ -3,6 +3,56 @@ export declare const DRAWER_WIDTH: {
     Collapsed: number;
     Expanded: number;
 };
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledNotchSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    mobileNotchPosition?: number | undefined;
+}, import("react").SVGProps<SVGSVGElement>, {}>;
+export declare const StyledBottomNavigation: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").BottomNavigationClasses> | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
+    showLabels?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    value?: any;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "onChange" | "sx" | "value" | "showLabels"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledBottomNavigationAction: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").BottomNavigationActionClasses> | undefined;
+    icon?: import("react").ReactNode;
+    label?: import("react").ReactNode;
+    showLabel?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    value?: any;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "label" | "tabIndex" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "value" | "icon" | "showLabel"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isDrawerOpen?: any;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
@@ -38,9 +88,6 @@ export declare const DrawerToggleHitboxContent: import("@emotion/styled").Styled
 export declare const StyledAside: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const StyledNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const StyledNavSecondary: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    isDrawerOpen?: boolean | undefined;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DrawerShadow: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
     children?: import("react").ReactNode;
     component?: import("react").ElementType<any> | undefined;
@@ -86,3 +133,19 @@ export declare const NotchSeemMask: import("@emotion/styled").StyledComponent<im
 export declare const StyledDrawer: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     open?: boolean | undefined;
 }, {}, {}>;
+export declare const StyledNotchShadow: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledNotchShadowMask: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

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

@@ -6,27 +6,22 @@ import Drawer from '@mui/material/Drawer';
 import { Box, IconButton, BottomNavigation, BottomNavigationAction, Paper } from '../../../index';
 import { styled } from '@mui/material/styles';
 import { motion } from '../../../utils/theme';
-import { motion as Motion } from 'framer-motion';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  border-radius: 0;\n  background-color: ", ";\n  background-image: none;\n  z-index: 1000000000;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  border-radius: 0;\n  background-color: ", ";\n  background-image: none;\n  z-index: 1000000000;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var StyledCircle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: ", ";\n  position: absolute;\n  left: 0px;\n  bottom: 0;\n  width: 300px;\n  background: rgb(255, 255, 255);\n"], ["\n  background: ", ";\n  position: absolute;\n  left: 0px;\n  bottom: 0;\n  width: 300px;\n  background: rgb(255, 255, 255);\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: 1000000000;\n"], ["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: 1000000000;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
 export var StyledNotchSVG = styled('svg', {
     shouldForwardProp: function (prop) { return prop !== 'mobileNotchPosition'; }
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  left: 0;\n  padding: 0;\n  position: absolute;\n  top: -29px;\n  width: 50px;\n  height: 50px;\n  z-index: -1;\n  transform: rotate(270deg);\n"], ["\n  display: block;\n  fill: ", ";\n  left: 0;\n  padding: 0;\n  position: absolute;\n  top: -29px;\n  width: 50px;\n  height: 50px;\n  z-index: -1;\n  transform: rotate(270deg);\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"], ["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
-export var StyledNavigationIndicator = styled(Motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: #0f0;\n  width: 100px;\n  height: 25px;\n"], ["\n  background-color: #0f0;\n  width: 100px;\n  height: 25px;\n"])));
-export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
-export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  backgroundColor: ", ";\n  color: ", ";\n  overflow: hidden;\n  flex: none;\n\n  stroke: ", ";\n  padding: 0px;\n  min-width: 80px;\n  max-width: 168px;\n  height: 56px;\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"], ["\n  backgroundColor: ", ";\n  color: ", ";\n  overflow: hidden;\n  flex: none;\n\n  stroke: ", ";\n  padding: 0px;\n  min-width: 80px;\n  max-width: 168px;\n  height: 56px;\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  backgroundColor: ", ";\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"], ["\n  backgroundColor: ", ";\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
@@ -43,13 +38,13 @@ export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templat
 });
 export var DrawerHeader = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n"], ["\n"])));
-export var DrawerToggle = styled(IconButton)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all 225ms ", " 0ms !important;\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all 225ms ", " 0ms !important;\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
-export var DrawerToggleHitboxContent = styled('span')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n"], ["\n"])));
+export var DrawerToggle = styled(IconButton)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all 225ms ", " 0ms !important;\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all 225ms ", " 0ms !important;\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
+export var DrawerToggleHitboxContent = styled('span')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
-export var StyledAside = styled('aside')(templateObject_10 || (templateObject_10 = __makeTemplateObject([""], [""])));
-export var StyledNav = styled('nav')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor 225ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color 225ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor 225ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color 225ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledAside = styled('aside')(templateObject_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
+export var StyledNav = styled('nav')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor 225ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color 225ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor 225ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color 225ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) {
     return props.theme.palette.mode === 'dark'
@@ -68,37 +63,37 @@ export var StyledNav = styled('nav')(templateObject_11 || (templateObject_11 = _
         ? 'rgba(255, 255, 255, 0.24)'
         : 'rgba(0, 0, 0, 0.24)';
 });
-export var StyledNavSecondary = styled('nav')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledNavSecondary = styled('nav')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
 export var DrawerShadow = styled(Box, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left 225ms ", " 0ms;\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"], ["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left 225ms ", " 0ms;\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"])), function (props) { return props.isDrawerOpen
+})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left 225ms ", " 0ms;\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"], ["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left 225ms ", " 0ms;\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"])), function (props) { return props.isDrawerOpen
     ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
     : "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) {
     return props.isDrawerOpen
         ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
         : "".concat(DRAWER_WIDTH.Collapsed - 33, "px");
 });
-export var NotchContainer = styled(Box)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, motion.easeInOut);
-export var NotchBackground = styled(Box)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var NotchContainer = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, motion.easeInOut);
+export var NotchBackground = styled(Box)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
-export var NotchBackgroundClip = styled(Box)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var NotchBackgroundClip = styled(Box)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
-export var NotchSeemMask = styled(Box)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var NotchSeemMask = styled(Box)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible;\n    width: ", ";\n\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible;\n    width: ", ";\n\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
+})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible;\n    width: ", ";\n\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible;\n    width: ", ";\n\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
 }, motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
-export var StyledNotchShadow = styled(Box)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"], ["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"])));
-export var StyledNotchShadowMask = styled(Box)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledNotchShadow = styled(Box)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"], ["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"])));
+export var StyledNotchShadowMask = styled(Box)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;

package/dist/components/navigation/MobileNavigation/MobileNavigationToggleSearchX.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ToggleSearchX: (props: any) => React.ReactElement;
+export default ToggleSearchX;

package/dist/components/navigation/MobileNavigation/MobileNavigationToggleSearchX.js

@@ -0,0 +1,28 @@
+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 { useSpring, animated, easings } from '@react-spring/web';
+var Path = function (props) { return (_jsx(animated.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
+var ToggleSearchX = function (props) {
+    var animationDefaults = {
+        reverse: props === null || props === void 0 ? void 0 : props.isOpen,
+        config: {
+            duration: 150,
+            easing: easings.easeInOutQuad
+        }
+    };
+    var handle = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 15 L 35 35' }, to: { d: 'M 26 26 L 35 35' } }));
+    var closeBar = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 35 L 35 15', opacity: 1, scale: 1 }, to: { d: 'M 26 26 L 35 35', opacity: 0, scale: 0 } }));
+    var circle = useSpring(__assign(__assign({}, animationDefaults), { from: { opacity: 0, scale: 0 }, to: { opacity: 1, scale: 1 } }));
+    return (_jsxs("svg", __assign({ width: '40', height: '40', viewBox: '0 0 50 50', stroke: 'inherit' }, { children: [_jsx(Path, __assign({}, handle)), _jsx(Path, __assign({}, closeBar)), _jsx(animated.circle, __assign({}, circle, { cx: '20', cy: '20', r: '8', fill: 'transparent', strokeWidth: '3', stroke: 'inherit' }))] })));
+};
+export default ToggleSearchX;

package/dist/components/navigation/MobileNavigation/MobileNavigationToggleX.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const ToggleX: (props: any) => React.ReactElement;
+export default ToggleX;

package/dist/components/navigation/MobileNavigation/MobileNavigationToggleX.js

@@ -0,0 +1,28 @@
+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 { useSpring, animated, easings } from '@react-spring/web';
+var Path = function (props) { return (_jsx(animated.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
+var ToggleX = function (props) {
+    var animationDefaults = {
+        reverse: props === null || props === void 0 ? void 0 : props.isOpen,
+        config: {
+            duration: 150,
+            easing: easings.easeInOutQuad
+        }
+    };
+    var topBar = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 15 L 35 35' }, to: { d: 'M 10 15 L 40 15' } }));
+    var middleBar = useSpring(__assign(__assign({}, animationDefaults), { from: { opacity: 0, scale: 0 }, to: { opacity: 1, scale: 1 } }));
+    var bottomBar = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 35 L 35 15' }, to: { d: 'M 10 35 L 40 35' } }));
+    return (_jsxs("svg", __assign({ width: "40", height: "40", viewBox: "0 0 50 50" }, { children: [_jsx(Path, __assign({}, topBar)), _jsx(Path, __assign({ d: 'M 10 25 L 40 25' }, middleBar)), _jsx(Path, __assign({}, bottomBar))] })));
+};
+export default ToggleX;

package/{components → dist/components}/navigation/VerticalNavigation/VerticalNavigation.d.ts

@@ -1,7 +1,5 @@
 import React from 'react';
-import { IApplication } from '../../stream/AppSwitcher/AppSwitcher';
-import { IVerticalNavigationItemProps } from './VerticalNavigationItem/VerticalNavigationItem';
-import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
+import { IApplication, IAvatarMenuItemProps, IVerticalNavigationItemProps } from '../../../types';
 interface VerticalNavigationProps {
     logo?: string;
     logoText?: string;
@@ -19,6 +17,7 @@ interface VerticalNavigationProps {
     setIsPersistent?: any;
     appRootID?: string;
     hasAvatar?: boolean;
+    avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;
     avatarPanelOnClickViewProfile?: any;
@@ -29,6 +28,7 @@ interface VerticalNavigationProps {
     avatarPanelOnClickMainAction?: any;
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelFootnote?: any;
 }
 declare const VerticalNavigation: (props: VerticalNavigationProps) => React.ReactElement;
 export default VerticalNavigation;

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

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Avatar, List, Tooltip } from '../../../index';
-import { Box } from '@mui/material';
+import { Box, Modal } from '@mui/material';
 import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
 import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher';
 import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
@@ -33,8 +33,9 @@ import { DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent, St
 import { ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
 import AvatarPanel from './VerticalNavigationAvatar';
 import { motion } from '../../../utils/theme';
-import { handleAvatarInitials } from '../../../utils/helpers';
+import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
 import { DEFAULT_REACT_APP_ID } from '../../../utils/constants';
+import { animated } from '@react-spring/web';
 var VerticalNavigation = function (props) {
     var _a, _b;
     var theme = useTheme();
@@ -43,9 +44,10 @@ var VerticalNavigation = function (props) {
     var propIsPersistent = typeof (props === null || props === void 0 ? void 0 : props.isPersistent) === 'boolean' ? props.isPersistent : 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(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false), isPersistent = _d[0], setIsPersistent = _d[1];
+    var _d = React.useState(false), isAvatarOpen = _d[0], setIsAvatarOpen = _d[1];
+    var _e = React.useState(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false), isPersistent = _e[0], setIsPersistent = _e[1];
     // Controls whether the application panel is open or not.
-    var _e = React.useState(false), isAppSwitcherOpen = _e[0], setIsAppSwitcherOpen = _e[1];
+    var _f = React.useState(false), isAppSwitcherOpen = _f[0], setIsAppSwitcherOpen = _f[1];
     /**
      * Toggles display of the Stream suite application dialog.
      */
@@ -78,7 +80,7 @@ var VerticalNavigation = function (props) {
         }
         setIsPersistent(propIsPersistent !== null && propIsPersistent !== void 0 ? propIsPersistent : false);
     };
-    var _f = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
+    var _g = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _g[0], setAvatarInitials = _g[1];
     var toggleDrawer = function (open) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -89,6 +91,10 @@ var VerticalNavigation = function (props) {
         setIsAppSwitcherOpen(false);
         setIsDrawerOpen(open !== null && open !== void 0 ? open : !isDrawerOpen);
     }; };
+    // First item starts at 70ms
+    // see STAGGER_ITEMS_DELAY in helpers.js
+    var animationCount = 1;
+    var incrementAnimationCount = function () { return animationCount++; };
     var listContent = function () { return (_jsxs(Box, __assign({ sx: {
             display: 'flex',
             flex: '1 auto',
@@ -108,7 +114,7 @@ var VerticalNavigation = function (props) {
                     backgroundColor: theme.palette.mode === 'dark'
                         ? theme.palette.primary.main
                         : theme.palette.background.paper
-                } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
+                } }, { children: _jsxs(DrawerHeader, __assign({ onClick: logoOnClick !== null && logoOnClick !== void 0 ? logoOnClick : null, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen || isPersistent, disableFocusListener: isDrawerOpen || isPersistent, disableTouchListener: isDrawerOpen || isPersistent, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
                                 ? typeof logo === 'string'
                                     ? (_jsx("img", { src: logo, height: "".concat(logoHeight, "px"), width: "".concat(logoWidth, "px"), style: {
                                             marginRight: '16px'
@@ -121,7 +127,9 @@ var VerticalNavigation = function (props) {
                                         fill: theme.palette.mode === 'dark'
                                             ? theme.palette.primary.contrastText
                                             : theme.palette.primary.main
-                                    } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation' : 'Open Navigation', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation" }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
+                                    } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper' }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation' : 'Open Navigation', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", 
+                        // @ts-expect-error
+                        component: animated.button, style: __assign(__assign({}, useFadeIn(animationCount, incrementAnimationCount)), { transform: 'translate(22px, calc(50% - 5.5px))' }) }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
                                 ? (_jsx(ChevronLeft, { style: {
                                         fontSize: '1.75rem',
                                         height: '1.75rem',
@@ -189,7 +197,7 @@ var VerticalNavigation = function (props) {
                             height: '100%',
                             width: DRAWER_WIDTH.Expanded,
                             marginTop: "-".concat(theme.spacing(0.5), " !important")
-                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: {
+                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: {
                     backgroundColor: theme.palette.mode === 'dark'
                         ? theme.palette.primary.main
                         : theme.palette.background.paper
@@ -199,29 +207,18 @@ var VerticalNavigation = function (props) {
                                     ? theme.palette.primary.main
                                     : theme.palette.background.paper
                             } }, { children: [hasStreamHome
-                                    ? (_jsx(VerticalNavigationItem, { label: 'App Switcher', icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications !== null && streamHomeApplications !== void 0 ? streamHomeApplications : [], apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true }))
-                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true }))); }), avatarName
+                                    ? (_jsx(VerticalNavigationItem, { label: 'App Switcher', icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
+                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), avatarName
                                     ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                                 // backgroundColor: mainTheme.colorButtonText,
                                                 // color: mainTheme.colorButton,
                                                 fontSize: '0.75rem',
-                                                height: 22,
-                                                width: 22
-                                            } }, { children: avatarInitials })), style: {
-                                            maxHeight: isDrawerOpen ? '200px' : '48px',
-                                            overflow: 'hidden',
-                                            padding: 0,
-                                            minHeight: 52,
-                                            transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important")
-                                        }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName }, rest)), isDrawerOpen: isDrawerOpen }))
+                                                height: 32,
+                                                width: 32
+                                            } }, { children: avatarInitials })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, useFadeIn(animationCount, incrementAnimationCount)), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen }, rest)), isDrawerOpen: isDrawerOpen }))
                                     : null] }))] })) }))] }))); };
     return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'
-                } }), _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: isDrawerOpen ? 'temporary' : 'permanent', ModalProps: {
-                    keepMounted: true,
-                    disablePortal: true,
-                    open: isDrawerOpen,
-                    onClose: toggleDrawer(false)
-                } }, { children: listContent() }))] })));
+                } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
 };
 export default VerticalNavigation;

package/dist/components/navigation/VerticalNavigation/VerticalNavigationAvatar.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IAvatarPanelProps } from '../../../types';
+declare const AvatarPanel: (props: IAvatarPanelProps) => React.ReactElement;
+export default AvatarPanel;

package/dist/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -0,0 +1,79 @@
+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 React, { useEffect } from 'react';
+import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
+import { StyledBox, StyledBoxProfile, StyledAvatarName, StyledAvatar, StyledOutlineButton, StyledBoxProfileEdit, StyledListItemButton } from './VerticalNavigationAvatarStyles';
+import { useTheme } from '@mui/material/styles';
+import EditIcon from '@mui/icons-material/Edit';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
+import { Person, Settings } from '@mui/icons-material';
+import { animated } from '@react-spring/web';
+var AvatarPanel = function (props) {
+    var _a;
+    var theme = useTheme();
+    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen;
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
+        avatarName
+    ]);
+    var _b = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _b[0], setAvatarInitials = _b[1];
+    // First item starts at 70ms
+    // see STAGGER_ITEMS_DELAY in helpers.js
+    var animationCount = 1;
+    var incrementAnimationCount = function () { return animationCount++; };
+    return (_jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
+            // @ts-expect-error
+            , __assign({ 
+                // @ts-expect-error
+                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(isAvatarOpen, animationCount, incrementAnimationCount)), onClick: 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({ style: useStaggerAnimation(isAvatarOpen, 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(2) }, useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { 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: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: 'column'
+                } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
+                            marginBottom: theme.spacing(2),
+                            maxWidth: '14rem'
+                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), 
+                            // whileHover={motionWhileHover}
+                            // whileTap={motionWhileTap}
+                            disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            // TODO: figure out if these are links or buttons
+                            // @ts-expect-error
+                            , __assign({ 
+                                // TODO: figure out if these are links or buttons
+                                // @ts-expect-error
+                                component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                            minWidth: theme.spacing(5)
+                                        } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledOutlineButton
+                    // @ts-expect-error
+                    , __assign({ 
+                        // @ts-expect-error
+                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'primary', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
+                            avatarPanelSettingItems.length > 0 &&
+                            avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), 
+                                // whileHover={motionWhileHover}
+                                // whileTap={motionWhileTap}
+                                disablePadding: true }, { children: _jsxs(StyledListItemButton
+                                // TODO: figure out if these are links or buttons
+                                // @ts-expect-error
+                                , __assign({ 
+                                    // TODO: figure out if these are links or buttons
+                                    // @ts-expect-error
+                                    component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
+                                                minWidth: theme.spacing(5)
+                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+};
+export default AvatarPanel;