@learningpool/ui 1.5.0 → 1.6.0-beta.3

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts

@@ -1,77 +1,11 @@
 /// <reference types="react" />
-import { Theme } from '@mui/material';
-import { CSSObject } from '@mui/material/styles';
 export declare const DRAWER_WIDTH: {
     Collapsed: number;
     Expanded: number;
 };
-export declare const paperStyles: (theme: Theme) => CSSObject;
-export declare const openedMixin: () => CSSObject;
-export declare const closedMixin: (theme: Theme) => CSSObject;
-export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ListItem: import("@emotion/styled").StyledComponent<{
-    button?: false | undefined;
-} & import("@mui/material").ListItemBaseProps & {
-    components?: {
-        Root?: import("react").ElementType<any> | undefined;
-    } | undefined;
-    componentsProps?: {
-        root?: (import("react").HTMLAttributes<HTMLDivElement> & import("@mui/material").ListItemComponentsPropsOverrides) | undefined;
-    } | undefined;
-} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
-    ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
+export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isDrawerOpen?: any;
-}, {}, {}>;
-export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
-    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
-    centerRipple?: boolean | undefined;
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
-    disabled?: boolean | undefined;
-    disableRipple?: boolean | undefined;
-    disableTouchRipple?: boolean | undefined;
-    focusRipple?: boolean | undefined;
-    focusVisibleClassName?: string | undefined;
-    LinkComponent?: import("react").ElementType<any> | undefined;
-    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<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").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<Theme> & {
-    isDrawerOpen?: any;
-} & {
-    children?: import("react").ReactNode;
-} & {
-    isDrawerOpen?: any;
-}, {}, {}>;
-export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const ListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<Theme> & {
-    isDrawerOpen?: any;
-    index?: number | undefined;
-}, {}, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
@@ -80,7 +14,7 @@ export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
     disableFocusRipple?: boolean | undefined;
     edge?: false | "end" | "start" | undefined;
     size?: "small" | "large" | "medium" | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
 } & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -93,55 +27,62 @@ export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
     focusVisibleClassName?: string | undefined;
     LinkComponent?: import("react").ElementType<any> | undefined;
     onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | 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 | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
-export declare const StyledAside: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const StyledNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const DrawerShadow: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+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;
     ref?: import("react").Ref<unknown> | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | 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<Theme> & {
-    isDrawerOpen?: any;
+}, 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> & {
+    isDrawerOpen?: boolean | undefined;
 }, {}, {}>;
-export declare const NotchContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+export declare const NotchContainer: 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").SxProps<Theme> | 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<Theme>, {}, {}>;
-export declare const NotchBackground: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+}, 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 NotchBackground: 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").SxProps<Theme> | 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<Theme>, {}, {}>;
-export declare const NotchBackgroundClip: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+}, 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 NotchBackgroundClip: 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").SxProps<Theme> | 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<Theme>, {}, {}>;
-export declare const NotchSeemMask: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+}, 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 NotchSeemMask: 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").SxProps<Theme> | 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<Theme>, {}, {}>;
+}, 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 StyledDrawer: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    open?: boolean | undefined;
+}, {}, {}>;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -1,16 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
-import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon, IconButton } from '../../../index';
-import { Box } from '@mui/material';
+import Drawer from '@mui/material/Drawer';
+import { Box, IconButton } from '../../../index';
 import { styled } from '@mui/material/styles';
 import { motion } from '../../../utils/theme';
 export var DRAWER_WIDTH = {
@@ -21,255 +14,75 @@ var ICON = {
     Height: 40,
     Width: 57
 };
-export var paperStyles = function (theme) { return ({
-    background: 'transparent none',
-    border: 0,
-    boxShadow: 'none',
-    color: theme.palette.mode === 'dark'
-        ? theme.palette.primary.contrastText
-        : theme.palette.getContrastText(theme.palette.background.paper),
-    overflow: 'visible !important',
-    transform: 'translateX(0) !important',
-    transition: "width 225ms ".concat(motion.easeInOut, " 0ms !important"),
-    visibility: 'visible'
-}); };
-export var openedMixin = function () { return ({
-    boxShadow: 'none',
-    overflowX: 'visible',
-    transition: "width 225ms ".concat(motion.easeInOut, " 0ms !important"),
-    width: DRAWER_WIDTH.Expanded
-}); };
-export var closedMixin = function (theme) {
-    var _a;
-    return (_a = {
-            boxShadow: theme.shadows[1],
-            overflowX: 'visible',
-            transition: "width 225ms ".concat(motion.easeInOut, " 0ms !important"),
-            width: "calc(".concat(theme.spacing(7), " + 1px)")
-        },
-        _a[theme.breakpoints.up('sm')] = {
-            width: "calc(".concat(theme.spacing(8), " + 1px)")
-        },
-        _a);
-};
-export var DrawerHeader = styled('div')(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (__assign(__assign({ alignItems: 'center', display: 'flex', justifyContent: 'flex-start', overflow: 'hidden', padding: "".concat(theme.spacing(1), " 10px 0") }, theme.mixins.toolbar), (_b = { backgroundColor: theme.palette.mode === 'dark'
-                ? theme.palette.primary.main
-                : theme.palette.background.paper, minHeight: '56px !important' }, _b[theme.breakpoints.up('sm')] = {
-        minHeight: '64px !important'
-    }, _b)));
-});
-export var ListItem = styled(SSListItem)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        alignItems: 'flex-start',
-        color: theme.palette.mode === 'dark'
-            ? theme.palette.primary.contrastText
-            : theme.palette.getContrastText(theme.palette.background.paper),
-        overflow: 'hidden',
-        minHeight: 48,
-        '& .MuiListItemIcon-root': {
-            marginTop: theme.spacing(0.5)
-        },
-        '& .MuiListItemText-root .MuiTypography-root': {
-            whiteSpace: 'normal'
-        }
-    });
-});
-export var ListItemButton = styled(SSListItemButton, {
+export var DrawerHeader = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(function (_a) {
-    var _b;
-    var theme = _a.theme, isDrawerOpen = _a.isDrawerOpen;
-    return (_b = {
-            alignItems: 'flex-start',
-            color: theme.palette.mode === 'dark'
-                ? theme.palette.primary.contrastText
-                : theme.palette.getContrastText(theme.palette.background.paper),
-            display: 'flex',
-            minHeight: 48,
-            maxHeight: isDrawerOpen ? '200px' : ICON.Height + 8,
-            textDecoration: 'none',
-            textTransform: 'none',
-            transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important"),
-            padding: 0,
-            width: '100%'
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            maxHeight: isDrawerOpen ? '200px' : ICON.Height + 8
-        },
-        _b);
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  /* necessary for content to be below app bar */\n  /* ...props.theme.mixins.toolbar */\n  transition: width 225ms ", " ", ";\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height 225ms ", " 0ms !important;\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  /* necessary for content to be below app bar */\n  /* ...props.theme.mixins.toolbar */\n  transition: width 225ms ", " ", ";\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height 225ms ", " 0ms !important;\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); }, motion.easeInOut, function (props) { return props.isDrawerOpen ? 0 : '250ms'; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) {
+    return props.theme.palette.mode === 'dark'
+        ? props.theme.palette.primary.contrastText
+        : props.theme.palette.getContrastText(props.theme.palette.background.paper);
+}, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, motion.easeInOut, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
+export var DrawerToggle = styled(IconButton)(templateObject_2 || (templateObject_2 = __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_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
+export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
+export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  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'
+        ? 'rgba(255, 255, 255, 0.12) transparent'
+        : 'rgba(0, 0, 0, 0.12) transparent';
+}, motion.easeIn, function (props) {
+    return props.theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.24) transparent'
+        : 'rgba(0, 0, 0, 0.24) transparent';
+}, function (props) {
+    return props.theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.12)'
+        : 'rgba(0, 0, 0, 0.12)';
+}, motion.easeIn, function (props) {
+    return props.theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.24)'
+        : 'rgba(0, 0, 0, 0.24)';
 });
-export var ListItemAvatar = styled(ListItemButton, {
+export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.background.paper; });
+export var StyledDivider = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(function (_a) {
-    var isDrawerOpen = _a.isDrawerOpen;
-    return ({
-        alignItems: 'center',
-        minHeight: 52,
-        maxHeight: isDrawerOpen ? '200px' : '48px',
-        transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important"),
-        '& .MuiListItemIcon-root': {
-            justifyContent: 'center',
-            minWidth: 0,
-            margin: 0
-        },
-        '& .MuiAvatar-root': {
-            height: 32,
-            width: 32
-        }
-    });
-});
-export var ListItemIcon = styled(SSListItemIcon)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            alignItems: 'center',
-            color: theme.palette.mode === 'dark'
-                ? theme.palette.primary.contrastText
-                : theme.palette.getContrastText(theme.palette.background.paper),
-            height: ICON.Height + 8,
-            justifyContent: 'center',
-            marginTop: '0 !important',
-            minWidth: ICON.Width,
-            width: ICON.Width
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            minWidth: ICON.Width + 8,
-            width: ICON.Width + 8
-        },
-        _b);
-});
-export var ListItemText = styled(SSListItemText, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(function (_a) {
-    var isDrawerOpen = _a.isDrawerOpen, index = _a.index;
-    return ({
-        opacity: isDrawerOpen ? 1 : 0,
-        padding: '0.5rem',
-        transition: "opacity 225ms ".concat(motion.easeInOut, " ").concat(index !== undefined ? index / 50 : 0.02, "s !important")
-    });
-});
-export var DrawerToggle = styled(IconButton)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {
-            background: 'transparent',
-            height: '44px',
-            paddingLeft: theme.spacing(2),
-            paddingRight: theme.spacing(2),
-            position: 'fixed',
-            top: '80.5px',
-            transition: "all 225ms ".concat(motion.easeInOut, " 0ms !important"),
-            width: '44px',
-            zIndex: theme.zIndex.drawer + 1
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            paddingLeft: theme.spacing(2.5),
-            paddingRight: theme.spacing(2.5),
-            top: '88.5px'
-        },
-        _b);
-});
-export var DrawerToggleHitboxContent = styled('span')(function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper,
-        borderRadius: '50%',
-        boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
-        height: '1.75rem',
-        padding: theme.spacing(0.5),
-        width: '1.75rem'
-    });
-});
-export var StyledAside = styled('aside')(function () { return ({}); });
-export var StyledNav = styled('nav')(function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper,
-        display: 'flex',
-        flex: '1 auto',
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        marginTop: '-1px',
-        overflow: 'hidden'
-    });
-});
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all 225ms ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all 225ms ", ";\n    width: 66%;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.background.paper; }, function (props) {
+    return props.theme.palette.mode === 'dark'
+        ? 'rgba(255, 255, 255, 0.075)'
+        : 'rgba(0, 0, 0, 0.075)';
+}, motion.easeIn);
 export var DrawerShadow = styled(Box, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(function (_a) {
-    var _b;
-    var theme = _a.theme, isDrawerOpen = _a.isDrawerOpen;
-    return (_b = {
-            background: 'rgba(0,0,0,0.125)',
-            content: '""',
-            display: 'block',
-            filter: 'blur(13px)',
-            height: '100%',
-            left: isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px"),
-            position: 'fixed',
-            top: '0',
-            transition: "left 225ms ".concat(motion.easeInOut, " 0ms"),
-            visibility: 'visible',
-            width: '40px'
-        },
-        _b[theme.breakpoints.up('sm')] = {
-            left: isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
-        },
-        _b);
-});
-export var NotchContainer = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        display: 'flex',
-        justifyContent: 'flex-end',
-        height: 'auto',
-        marginTop: "-".concat(theme.spacing(0.5)),
-        position: 'relative',
-        transition: "width 225ms ".concat(motion.easeInOut, " 0ms !important"),
-        width: '100%',
-        zIndex: '-1'
-    });
-});
-export var NotchBackground = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper,
-        flex: '1',
-        height: 'auto',
-        width: 'auto'
-    });
-});
-export var NotchBackgroundClip = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper,
-        clipPath: 'url("#notch")',
-        display: 'flex',
-        height: '85px',
-        width: '45px'
-    });
-});
-export var NotchSeemMask = styled(Box)(function (_a) {
-    var theme = _a.theme;
-    return ({
-        backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper,
-        height: '90px',
-        position: 'absolute',
-        right: '25px',
-        top: '-2px',
-        width: 'calc(100% - 25px)'
-    });
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  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_9 || (templateObject_9 = __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_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.background.paper; });
+export var NotchBackgroundClip = styled(Box)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  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_12 || (templateObject_12 = __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_13 || (templateObject_13 = __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"); });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/package.json

@@ -9,14 +9,14 @@
     "components",
     "ui"
   ],
-  "version": "1.5.0",
+  "version": "1.6.0-beta.3",
   "private": false,
   "main": "index.js",
   "module": "index.js",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@learningpool/app-switcher": "1.0.5-beta.8",
+    "@learningpool/app-switcher": "1.1.0-beta.2",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.8.5",
     "@mui/x-data-grid": "^5.12.3",

package/utils/theme.d.ts

@@ -87,3 +87,7 @@ export declare const motion: {
     easeIn: string;
     easeInOut: string;
 };
+export declare const tooltipDelay: {
+    start: number;
+    end: number;
+};