@learningpool/ui 1.3.0-beta.3 → 1.4.0-beta.10

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

@@ -7,7 +7,7 @@ export declare const DRAWER_WIDTH: {
     Expanded: number;
 };
 export declare const paperStyles: (theme: Theme) => CSSObject;
-export declare const openedMixin: (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<{
@@ -21,17 +21,8 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | 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" | "ContainerComponent" | "ContainerProps" | "disableGutters" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
-    children?: import("react").ReactNode;
-    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
-    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
-    disabled?: boolean | undefined;
-    disableFocusRipple?: boolean | undefined;
-    edge?: false | "end" | "start" | undefined;
-    size?: "small" | "large" | "medium" | undefined;
-    sx?: import("@mui/material").SxProps<Theme> | undefined;
-} & Omit<{
+}, "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;
@@ -47,11 +38,12 @@ export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
     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 ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+}, "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;
+}, {}, {}>;
+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;
@@ -69,8 +61,28 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     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 ListItemAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
+}, "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;
+}, {}, {}>;
+export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | "default" | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    edge?: false | "end" | "start" | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    sx?: import("@mui/material").SxProps<Theme> | undefined;
+} & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
     children?: import("react").ReactNode;
@@ -86,9 +98,51 @@ export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<i
     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> & {
+}, "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> & {
     children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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;
 }, {}, {}>;
-export declare const ListItemIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
+export declare const NotchContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<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>, {}, {}>;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -9,45 +9,53 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemIcon as SSListItemIcon, IconButton } from '../../../index';
+import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon, IconButton } from '../../../index';
+import { Box } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import { motion } from '../../../utils/theme';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
-    Expanded: 250
+    Expanded: 300
+};
+var ICON = {
+    Height: 40,
+    Width: 57
 };
 export var paperStyles = function (theme) { return ({
-    backgroundColor: theme.palette.mode === 'dark'
-        ? theme.palette.primary.main
-        : theme.palette.background.paper,
+    background: 'transparent none',
     border: 0,
+    boxShadow: 'none',
     color: theme.palette.mode === 'dark'
         ? theme.palette.primary.contrastText
         : theme.palette.getContrastText(theme.palette.background.paper),
-    boxShadow: 'none'
+    overflow: 'visible !important',
+    transform: 'translateX(0) !important',
+    transition: "width 225ms ".concat(motion.easeInOut, " 0ms !important"),
+    visibility: 'visible'
 }); };
-export var openedMixin = function (theme) { return ({
-    width: DRAWER_WIDTH.Expanded,
-    transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
-    overflowX: 'hidden',
-    boxShadow: 'none'
+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 = {
-            transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+            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.overflowX = 'hidden',
-        _a.boxShadow = theme.shadows[1],
         _a);
 };
 export var DrawerHeader = styled('div')(function (_a) {
     var _b;
     var theme = _a.theme;
-    return (__assign(__assign({ display: 'flex', alignItems: 'center', justifyContent: 'flex-start', padding: "".concat(theme.spacing(1), " 10px 0") }, theme.mixins.toolbar), (_b = { backgroundColor: theme.palette.mode === 'dark'
+    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'
@@ -56,36 +64,113 @@ export var DrawerHeader = styled('div')(function (_a) {
 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)
-        // paddingLeft: theme.spacing(2),
-        // paddingRight: theme.spacing(2),
-        // [theme.breakpoints.up('sm')]: {
-        //   paddingLeft: theme.spacing(2.5),
-        //   paddingRight: theme.spacing(2.5)
-        // }
+            : 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, {
+    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);
+});
+export var ListItemAvatar = styled(ListItemButton, {
+    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 = {
-            width: '44px',
-            height: '44px',
-            position: 'fixed',
-            zIndex: theme.zIndex.drawer + 1,
             background: 'transparent',
+            height: '44px',
             paddingLeft: theme.spacing(2),
             paddingRight: theme.spacing(2),
-            top: '80.5px'
+            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.transition = 'left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
         _b);
 });
 export var DrawerToggleHitboxContent = styled('span')(function (_a) {
@@ -101,46 +186,90 @@ export var DrawerToggleHitboxContent = styled('span')(function (_a) {
         width: '1.75rem'
     });
 });
-export var ListItemButton = styled(SSListItemButton)(function (_a) {
-    var _b;
+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'
+    });
+});
+export var DrawerShadow = styled(Box, {
+    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
+})(function (_a) {
+    var _b;
+    var theme = _a.theme, isDrawerOpen = _a.isDrawerOpen;
     return (_b = {
-            alignItems: 'center',
-            color: theme.palette.mode === 'dark'
-                ? theme.palette.primary.contrastText
-                : theme.palette.getContrastText(theme.palette.background.paper),
-            display: 'flex',
-            textTransform: 'none',
-            textDecoration: 'none',
-            padding: "".concat(theme.spacing(1), " ").concat(theme.spacing(2))
+            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')] = {
-            paddingLeft: theme.spacing(2.5),
-            paddingRight: theme.spacing(2.5)
+            left: isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
         },
-        _b.width = '100%',
         _b);
 });
-export var ListItemAvatar = styled(ListItemButton)(function (_a) {
+export var NotchContainer = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        minHeight: 48,
-        '& .MuiListItemIcon-root': {
-            justifyContent: 'center',
-            minWidth: 0,
-            marginLeft: '-4px'
-        },
-        '& .MuiAvatar-root': {
-            height: 32,
-            width: 32
-        }
+        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 ListItemIcon = styled(SSListItemIcon)(function (_a) {
+export var NotchBackground = styled(Box)(function (_a) {
     var theme = _a.theme;
     return ({
-        color: theme.palette.mode === 'dark'
-            ? theme.palette.primary.contrastText
-            : theme.palette.getContrastText(theme.palette.background.paper)
+        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)'
     });
 });

package/components/pages/ErrorPage/ErrorPage.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ErrorPageProps {
+    errorCode: string;
+    errorTitle: string;
+    errorMessage: string;
+}
+export default function ErrorPage(props: ErrorPageProps): React.ReactElement;
+export {};

package/components/pages/ErrorPage/ErrorPage.js

@@ -0,0 +1,27 @@
+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 { LearningPoolLogo } from '../../../assets/Images';
+import CssBaseline from '@mui/material/CssBaseline';
+import Typography from '@mui/material/Typography';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { StyledContainer, StyledBox, StyledLogoBox } from './ErrorPageStyles';
+export default function ErrorPage(props) {
+    var errorCode = props.errorCode, errorTitle = props.errorTitle, errorMessage = props.errorMessage;
+    var theme = createTheme();
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(StyledContainer, __assign({ component: 'main' }, { children: [_jsx(CssBaseline, {}), _jsxs(StyledBox, { children: [_jsxs(Typography, __assign({ component: 'h1', variant: 'h4', sx: {
+                                mb: 2
+                            } }, { children: [errorCode ? (_jsxs("span", { children: [errorCode, " | "] })) : '', _jsx("span", { children: errorTitle })] })), _jsx(Typography, __assign({ variant: 'body1', sx: {
+                                color: 'text.secondary',
+                                mb: 3
+                            } }, { children: errorMessage }))] }), _jsx(StyledLogoBox, { children: _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '200px', height: '45px' } }) })] })) })));
+}

package/components/pages/ErrorPage/ErrorPageStyles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+/// <reference types="react-addons-linked-state-mixin" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material/Container").ContainerClasses> | undefined;
+    disableGutters?: boolean | undefined;
+    fixed?: boolean | undefined;
+    maxWidth?: false | import("@mui/material/styles").Breakpoint | 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 | "children" | "sx" | "fixed" | "maxWidth" | "disableGutters"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    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 StyledLogoBox: 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/pages/ErrorPage/ErrorPageStyles.js

@@ -0,0 +1,32 @@
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import { styled } from '@mui/material/styles';
+export var StyledContainer = styled(Container)(function () { return ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100vh',
+    textAlign: 'center'
+}); });
+export var StyledBox = styled(Box)(function () { return ({
+    alignItems: 'center',
+    display: 'flex',
+    flex: '1',
+    flexDirection: 'column',
+    height: '100%',
+    justifyContent: 'center',
+    overflow: 'hidden'
+}); });
+export var StyledLogoBox = styled(Box)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            alignSelf: 'center',
+            marginRight: 0,
+            marginBottom: theme.spacing(5)
+        },
+        _b[theme.breakpoints.up('md')] = {
+            alignSelf: 'flex-end',
+            marginRight: theme.spacing(5)
+        },
+        _b);
+});

package/components/pages/SideInSide/SideInSideStyles.d.ts

@@ -1,7 +1,12 @@
 import { Theme } from '@mui/material/styles';
-export declare const SideInSideStyles: (params: void) => {
+export declare const SideInSideStyles: (params: void, styleOverrides?: {
+    props: {
+        classes?: Record<string, string> | undefined;
+    } & Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
     classes: Record<"root" | "pageBackgroundContainer" | "pageBackgroundLogoContainer" | "pageBackgroundLogo" | "contentPanel" | "contentPanelImageContainer" | "contentPanelImage" | "submitButton" | "streamHomeButton" | "footerContent", string>;
     theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
+    css: import("tss-react/types").Css;
+    cx: import("tss-react/types").Cx;
 };