@learningpool/ui 1.4.0-beta.1 → 1.4.0-beta.4

package/components/atoms/Autocomplete/Autocomplete.js

@@ -11,8 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIAutocomplete from '@mui/material/Autocomplete';
-import { AutocompleteStyles } from './AutocompleteStyles';
 var Autocomplete = function (props) {
-    return (_jsx(MUIAutocomplete, __assign({}, props, { classes: AutocompleteStyles().classes })));
+    return (_jsx(MUIAutocomplete, __assign({}, props)));
 };
 export default Autocomplete;

package/components/atoms/Button/Button.js

@@ -12,6 +12,5 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import MUIButton from '@mui/material/Button';
-import { ButtonStyles } from './ButtonStyles';
-var Button = React.forwardRef(function (props, ref) { return (_jsx(MUIButton, __assign({ disableElevation: true, variant: 'contained' }, props, { classes: ButtonStyles().classes, ref: ref }))); });
+var Button = React.forwardRef(function (props, ref) { return (_jsx(MUIButton, __assign({ disableElevation: true, variant: 'contained' }, props, { ref: ref }))); });
 export default Button;

package/components/atoms/Checkbox/Checkbox.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUICheckbox from '@mui/material/Checkbox';
-import { CheckboxStyles } from './CheckboxStyles';
 export default function Checkbox(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUICheckbox, __assign({ classes: CheckboxStyles().classes }, rest)));
+    return (_jsx(MUICheckbox, __assign({}, rest)));
 }

package/components/atoms/IconButton/IconButton.js

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIIconButton from '@mui/material/IconButton';
-import { IconButtonStyles } from './IconButtonStyles';
-var IconButton = function (props) { return (_jsx(MUIIconButton, __assign({ classes: IconButtonStyles().classes }, props))); };
+var IconButton = function (props) { return (_jsx(MUIIconButton, __assign({}, props))); };
 IconButton.muiName = 'MUIIconButton';
 export default IconButton;

package/components/atoms/Radio/Radio.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIRadio from '@mui/material/Radio';
-import { RadioStyles } from './RadioStyles';
 export default function Radio(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIRadio, __assign({ classes: RadioStyles().classes }, rest)));
+    return (_jsx(MUIRadio, __assign({}, rest)));
 }

package/components/atoms/Select/Select.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUISelect from '@mui/material/Select';
-import { SelectStyles } from './SelectStyles';
 export default function Select(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUISelect, __assign({ classes: SelectStyles().classes }, rest)));
+    return (_jsx(MUISelect, __assign({}, rest)));
 }

package/components/atoms/Slider/Slider.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUISlider from '@mui/material/Slider';
-import { SliderStyles } from './SliderStyles';
 export default function Slider(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUISlider, __assign({ classes: SliderStyles().classes }, rest)));
+    return (_jsx(MUISlider, __assign({}, rest)));
 }

package/components/atoms/Switch/Switch.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUISwitch from '@mui/material/Switch';
-import { SwitchStyles } from './SwitchStyles';
 export default function Switch(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUISwitch, __assign({ classes: SwitchStyles().classes }, rest)));
+    return (_jsx(MUISwitch, __assign({}, rest)));
 }

package/components/atoms/TextField/TextField.js

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUITextField from '@mui/material/TextField';
-import { TextFieldStyles } from './TextFieldStyles';
 export default function TextField(props) {
-    return (_jsx(MUITextField, __assign({ classes: TextFieldStyles().classes }, props)));
+    return (_jsx(MUITextField, __assign({}, props)));
 }

package/components/atoms/ToggleButton/ToggleButton.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIToggleButton from '@mui/material/ToggleButton';
-import { ToggleButtonStyles } from './ToggleButtonStyles';
 export default function ToggleButton(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIToggleButton, __assign({ classes: ToggleButtonStyles().classes }, rest)));
+    return (_jsx(MUIToggleButton, __assign({}, rest)));
 }

package/components/datadisplay/Chip/Chip.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIChip from '@mui/material/Chip';
-import { ChipStyles } from './ChipStyles';
 export default function Chip(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIChip, __assign({ classes: ChipStyles().classes }, rest)));
+    return (_jsx(MUIChip, __assign({}, rest)));
 }

package/components/datadisplay/List/List.js

@@ -11,6 +11,5 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIList from '@mui/material/List';
-import { ListStyles } from './ListStyles';
-var List = function (props) { return (_jsx(MUIList, __assign({}, props, { classes: ListStyles().classes }))); };
+var List = function (props) { return (_jsx(MUIList, __assign({}, props))); };
 export default List;

package/components/datadisplay/Tooltip/Tooltip.js

@@ -11,7 +11,6 @@ var __assign = (this && this.__assign) || function () {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUITooltip from '@mui/material/Tooltip';
-import { TooltipStyles } from './TooltipStyles';
-var Tooltip = function (props) { return (_jsx(MUITooltip, __assign({}, props, { classes: TooltipStyles().classes }))); };
+var Tooltip = function (props) { return (_jsx(MUITooltip, __assign({}, props))); };
 Tooltip.muiName = 'MUITooltip';
 export default Tooltip;

package/components/feedback/Alert/Alert.js

@@ -22,8 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import MUIAlert from '@mui/material/Alert';
-import { AlertStyles } from './AlertStyles';
 export default function Alert(_a) {
     var rest = __rest(_a, []);
-    return (_jsx(MUIAlert, __assign({ classes: AlertStyles().classes }, rest)));
+    return (_jsx(MUIAlert, __assign({}, rest)));
 }

package/components/navigation/Drawer/Drawer.d.ts

@@ -3,5 +3,5 @@ import { DrawerProps } from '@mui/material/Drawer';
 interface IDrawerProps extends DrawerProps {
     component?: string | JSX.Element;
 }
-declare const Drawer: React.ForwardRefExoticComponent<Pick<IDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "checkedLink" | "valueLink" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "anchor" | "transitionDuration" | "elevation" | "open" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "onClose" | "component" | "ModalProps" | "PaperProps" | "SlideProps"> & React.RefAttributes<HTMLDivElement>>;
+declare const Drawer: React.ForwardRefExoticComponent<Pick<IDrawerProps, "className" | "style" | "classes" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "checkedLink" | "valueLink" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "anchor" | "transitionDuration" | "elevation" | "open" | "onClose" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "component" | "ModalProps" | "PaperProps" | "SlideProps"> & React.RefAttributes<HTMLDivElement>>;
 export default Drawer;

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -9,11 +9,11 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Avatar, Drawer as SSDrawer, List, ListItemText } from '../../../index';
+import { Avatar, Drawer as SSDrawer, Modal, List, ListItemText } from '../../../index';
 import { Box, Link } from '@mui/material';
 import MailIcon from '@mui/icons-material/Mail';
 import { StreamSuiteLogo } from '../../../assets/Images';
@@ -44,13 +44,7 @@ var VerticalNavigation = function (props) {
     }; };
     var listContent = function () {
         var _a, _b, _c, _d;
-        return (_jsxs(Box
-        // onClick={toggleDrawer(false)}
-        // onKeyDown={toggleDrawer(false)}
-        , __assign({ 
-            // onClick={toggleDrawer(false)}
-            // onKeyDown={toggleDrawer(false)}
-            sx: {
+        return (_jsxs(Box, __assign({ sx: {
                 display: 'flex',
                 flex: '1 auto',
                 flexDirection: 'column',
@@ -72,7 +66,7 @@ var VerticalNavigation = function (props) {
                         height: 'auto',
                         marginTop: "-".concat(theme.spacing(0.5)),
                         position: 'relative',
-                        transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+                        transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
                         width: '100%',
                         zIndex: '-1'
                     } }, { children: [_jsx("div", { style: {
@@ -103,58 +97,65 @@ var VerticalNavigation = function (props) {
                         width: '0',
                         height: '0',
                         position: 'absolute'
-                    } }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), _jsx(List, __assign({ sx: {
-                        height: '100%',
-                        // padding: `${theme.spacing(0)} 10px`,
-                        backgroundColor: theme.palette.mode === 'dark'
-                            ? theme.palette.primary.main
-                            : theme.palette.background.paper,
-                        marginTop: "-".concat(theme.spacing(0.5))
-                    } }, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-                        var _a;
-                        return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
-                            // @ts-expect-error
-                            , __assign({ 
-                                // @ts-expect-error
-                                component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
-                    }) })), _jsxs(List, __assign({ sx: {
-                        marginTop: 'auto',
-                        backgroundColor: theme.palette.mode === 'dark'
-                            ? theme.palette.primary.main
-                            : theme.palette.background.paper
-                    } }, { children: [hasStreamHome
-                            ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
-                                        minHeight: 48,
-                                        justifyContent: isDrawerOpen ? 'initial' : 'center'
-                                    } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
-                                                minWidth: 0,
-                                                mr: isDrawerOpen ? 2.5 : 'auto',
-                                                justifyContent: 'center'
-                                            } }, { children: _jsx(AppSwitcher, { apiKey: (_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_STREAM_HOME_API_KEY) !== null && _b !== void 0 ? _b : '7wxswYRq238tj65RVina32VSzmpGamju7Edvbrab', baseUrl: (_d = (_c = process === null || process === void 0 ? void 0 : process.env) === null || _c === void 0 ? void 0 : _c.REACT_APP_STREAM_HOME_API_URL) !== null && _d !== void 0 ? _d : 'https://6cqjg9ua08.execute-api.us-east-1.amazonaws.com/dev-api', token: 'hfcfgcgfcgfhcfhgcfg' }) })), _jsx(ListItemText, { primary: 'App switcher', sx: { opacity: isDrawerOpen ? 1 : 0 } })] })) })))
-                            : null, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map(function (item, index) {
-                            var _a;
-                            return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
-                                // @ts-expect-error
-                                , __assign({ 
+                    } }, { children: _jsx("clipPath", __assign({ id: 'notch', clipPathUnits: 'objectBoundingBox' }, { children: _jsx("path", { d: 'M1,0 H0 v1 h1 v-0.105 c-0.017,-0.074,-0.109,-0.132,-0.168,-0.146 l-0.008,-0.002 a0.5,0.265,0,0,1,0.006,-0.493 c0.062,-0.015,0.16,-0.079,0.169,-0.158 V0' }) })) })), _jsxs("nav", __assign({ style: {
+                        display: 'flex',
+                        flex: '1 auto',
+                        flexDirection: 'column',
+                        justifyContent: 'flex-start'
+                    } }, { children: [_jsx(List, __assign({ sx: {
+                                height: '100%',
+                                backgroundColor: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.background.paper,
+                                marginTop: "-".concat(theme.spacing(0.5)),
+                                overflow: 'hidden'
+                            } }, { children: items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+                                var _a;
+                                return (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton
+                                    // @ts-expect-error
+                                    , __assign({ 
+                                        // @ts-expect-error
+                                        component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
+                            }) })), _jsxs(List, __assign({ sx: {
+                                marginTop: 'auto',
+                                backgroundColor: theme.palette.mode === 'dark'
+                                    ? theme.palette.primary.main
+                                    : theme.palette.background.paper
+                            } }, { children: [hasStreamHome
+                                    ? (_jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemButton, __assign({ sx: {
+                                                minHeight: 48,
+                                                justifyContent: isDrawerOpen ? 'initial' : 'center'
+                                            } }, { children: [_jsx(ListItemIcon, __assign({ sx: {
+                                                        minWidth: 0,
+                                                        mr: isDrawerOpen ? 2.5 : 'auto',
+                                                        justifyContent: 'center'
+                                                    } }, { children: _jsx(AppSwitcher, { apiKey: (_b = (_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.REACT_APP_STREAM_HOME_API_KEY) !== null && _b !== void 0 ? _b : '7wxswYRq238tj65RVina32VSzmpGamju7Edvbrab', baseUrl: (_d = (_c = process === null || process === void 0 ? void 0 : process.env) === null || _c === void 0 ? void 0 : _c.REACT_APP_STREAM_HOME_API_URL) !== null && _d !== void 0 ? _d : 'https://6cqjg9ua08.execute-api.us-east-1.amazonaws.com/dev-api', token: 'hfcfgcgfcgfhcfhgcfg' }) })), _jsx(ListItemText, { primary: 'App switcher', sx: { opacity: isDrawerOpen ? 1 : 0 } })] })) })))
+                                    : null, secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.map(function (item, index) {
+                                    var _a;
+                                    return (_jsx(ListItem, { children: _jsxs(ListItemButton
+                                        // @ts-expect-error
+                                        , __assign({ 
+                                            // @ts-expect-error
+                                            component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) }));
+                                }), _jsx(ListItem, __assign({ disablePadding: true, sx: {
+                                        overflow: 'hidden'
+                                    } }, { children: _jsxs(ListItemAvatar
                                     // @ts-expect-error
-                                    component: Link, onClick: item.onClick, isActive: item.isActive }, { children: [_jsx(ListItemIcon, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) }), _jsx(ListItemText, { primary: item.label })] }), item.label) })));
-                        }), _jsx(ListItem, __assign({ disablePadding: true }, { children: _jsxs(ListItemAvatar
-                            // @ts-expect-error
-                            , __assign({ 
-                                // @ts-expect-error
-                                component: Link }, { children: [_jsx(ListItemIcon, __assign({ sx: { mr: isDrawerOpen ? 3.5 : 'auto' } }, { children: _jsxs(Avatar, __assign({ sx: {
-                                                bgcolor: theme.palette.mode === 'dark'
-                                                    ? theme.palette.primary.contrastText
-                                                    : theme.palette.primary.main
-                                            } }, { children: [avatarName.split(' ')[0][0], avatarName.split(' ')[1][0]] })) })), _jsx(ListItemText, { primary: avatarName, sx: {
-                                            opacity: isDrawerOpen ? 1 : 0,
-                                            textAlign: 'left'
-                                        } })] })) }))] }))] })));
+                                    , __assign({ 
+                                        // @ts-expect-error
+                                        component: Link }, { children: [_jsx(ListItemIcon, __assign({ sx: { mr: 3 } }, { children: _jsxs(Avatar, __assign({ sx: {
+                                                        bgcolor: theme.palette.mode === 'dark'
+                                                            ? theme.palette.primary.contrastText
+                                                            : theme.palette.primary.main
+                                                    } }, { children: [avatarName.split(' ')[0][0], avatarName.split(' ')[1][0]] })) })), _jsx(ListItemText, { primary: avatarName })] })) }))] }))] }))] })));
     };
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: 'drawerShadow', style: {
+    return (_jsxs("aside", { children: [_jsx("div", { className: 'drawerShadow', "aria-hidden": 'true', style: {
                     position: 'fixed',
                     top: '0',
-                    left: '27px',
+                    left: isDrawerOpen
+                        ? '212px'
+                        : (isMediumAndUp ? '27px' : '19px'),
+                    transition: 'left 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms',
                     content: '',
                     background: 'rgba(0,0,0,0.125)',
                     height: '100%',
@@ -162,33 +163,29 @@ var VerticalNavigation = function (props) {
                     display: 'block',
                     visibility: 'visible',
                     filter: 'blur(13px)'
-                } }), _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close drawer' : 'Open drawer', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
-                    left: isDrawerOpen ? '229px' : (isMediumAndUp ? '44px' : '36px')
-                } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
-                        ? (_jsx(ChevronLeft, { sx: {
-                                fontSize: '1.75rem',
-                                height: '1.75rem',
-                                width: '1.75rem'
-                            } }))
-                        : (_jsx(ChevronRight, { sx: {
-                                fontSize: '1.75rem',
-                                height: '1.75rem',
-                                width: '1.75rem'
-                            } })) }) })), _jsx(Drawer, __assign({ "aria-label": "Navigation menu", id: "vertical-navigation", component: 'aside', role: "complementary", anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
-                    keepMounted: true
-                }, sx: {
-                    '.MuiDrawer-paper': {
-                        background: 'transparent none',
-                        boxShadow: 'none',
-                        visibility: 'visible !important',
-                        transform: 'translateX(0) !important',
-                        // width: isDrawerOpen
-                        //   ? `${DRAWER_WIDTH.Expanded}px`
-                        //   : `${DRAWER_WIDTH.Collapsed}px`,
-                        // boxShadow: 'none',
-                        overflow: 'hidden',
-                        transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important'
-                    }
-                } }, { children: listContent() }))] }));
+                } }), _jsx(Modal, __assign({ keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsxs(Drawer, __assign({ "aria-label": 'Navigation Menu', id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen, onClose: toggleDrawer(false), ModalProps: {
+                        keepMounted: true
+                    }, variant: 'permanent', sx: {
+                        '.MuiDrawer-paper': {
+                            background: 'transparent none',
+                            boxShadow: 'none',
+                            visibility: 'visible !important',
+                            transform: 'translateX(0) !important',
+                            overflow: 'hidden',
+                            transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important'
+                        }
+                    } }, { children: [_jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? 'Close Navigation Menu' : 'Open Navigation Menu', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", sx: {
+                                left: isDrawerOpen ? '229px' : (isMediumAndUp ? '44px' : '36px')
+                            } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
+                                    ? (_jsx(ChevronLeft, { sx: {
+                                            fontSize: '1.75rem',
+                                            height: '1.75rem',
+                                            width: '1.75rem'
+                                        } }))
+                                    : (_jsx(ChevronRight, { sx: {
+                                            fontSize: '1.75rem',
+                                            height: '1.75rem',
+                                            width: '1.75rem'
+                                        } })) }) })), listContent()] })) }))] }));
 };
 export default VerticalNavigation;

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

@@ -21,7 +21,7 @@ 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>, {}, {}>;
+}, "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 DrawerToggle: import("@emotion/styled").StyledComponent<{
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").IconButtonClasses> | undefined;

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -23,31 +23,32 @@ export var paperStyles = function (theme) { return ({
     color: theme.palette.mode === 'dark'
         ? theme.palette.primary.contrastText
         : theme.palette.getContrastText(theme.palette.background.paper),
-    boxShadow: 'none'
+    boxShadow: 'none',
+    overflow: 'visible !important'
 }); };
 export var openedMixin = function (theme) { return ({
     width: DRAWER_WIDTH.Expanded,
-    transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
-    overflowX: 'hidden',
+    transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
+    overflowX: 'visible',
     boxShadow: 'none'
 }); };
 export var closedMixin = function (theme) {
     var _a;
     return (_a = {
-            transition: 'width 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+            transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 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.overflowX = 'visible',
         _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({ display: 'flex', alignItems: 'center', 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'
@@ -85,7 +86,7 @@ export var DrawerToggle = styled(IconButton)(function (_a) {
             paddingRight: theme.spacing(2.5),
             top: '88.5px'
         },
-        _b.transition = 'left 225ms cubic-bezier(0, 0, 0.2, 1) 0ms !important',
+        _b.transition = 'all 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
         _b);
 });
 export var DrawerToggleHitboxContent = styled('span')(function (_a) {

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;
 };

package/index.d.ts

@@ -7,8 +7,10 @@ export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
 export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
+export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 export { default as AvatarGroup } from '@mui/material/AvatarGroup';
 export { default as Backdrop } from '@mui/material/Backdrop';
+export { default as Modal } from '@mui/material/Modal';
 export { default as CircularProgress } from '@mui/material/CircularProgress';
 export { default as LinearProgress } from '@mui/material/LinearProgress';
 export { default as ListItem } from '@mui/material/ListItem';

package/index.js

@@ -8,9 +8,11 @@ export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
 export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
+export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 // Straight through MUI
 export { default as AvatarGroup } from '@mui/material/AvatarGroup';
 export { default as Backdrop } from '@mui/material/Backdrop';
+export { default as Modal } from '@mui/material/Modal';
 export { default as CircularProgress } from '@mui/material/CircularProgress';
 export { default as LinearProgress } from '@mui/material/LinearProgress';
 export { default as ListItem } from '@mui/material/ListItem';

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.4.0-beta.1",
+  "version": "1.4.0-beta.4",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -17,8 +17,8 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@learningpool/app-switcher": "^1.0.4",
-    "@mui/icons-material": "^5.4.1",
-    "@mui/material": "^5.3.1",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -39,15 +39,15 @@
     "analyze:build": "source-map-explorer 'build/static/js/*.js'",
     "analyze:module": "source-map-explorer 'dist/*.js'",
     "build": "build-storybook",
-    "build:module": "rm -rf dist && yarn run tsc && yarn run generate:package",
+    "build:module": "rm -rf dist && tsc && npm run generate:package",
     "generate:package": "node ./merge.js",
     "lint": "eslint --ext .tsx ./src",
     "lint:fix": "eslint --ext .tsx ./src --fix",
     "semantic-release": "ht2-release-public-circleci-lib-dist",
     "start": "start-storybook -p 6006",
-    "start:run-tests": "yarn test:generate-output && yarn start",
+    "start:run-tests": "npm run test:generate-output && npm run start",
     "test": "jest",
-    "test:u": "jest --updateSnapshot && yarn run lint:fix",
+    "test:u": "jest --updateSnapshot && npm run lint:fix",
     "test:update-snapshot": "test:u",
     "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
   },
@@ -64,11 +64,11 @@
     ]
   },
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/core": "7.17.8",
-    "@babel/preset-env": "7.16.11",
-    "@babel/preset-react": "7.16.7",
-    "@babel/preset-typescript": "7.16.7",
+    "@babel/cli": "7.17.10",
+    "@babel/core": "7.18.5",
+    "@babel/preset-env": "7.18.2",
+    "@babel/preset-react": "7.17.12",
+    "@babel/preset-typescript": "7.17.12",
     "@ht2-labs/semantic-release": "3.0.0",
     "@storybook/addon-a11y": "6.5.6",
     "@storybook/addon-actions": "6.5.6",
@@ -86,7 +86,7 @@
     "eslint-config-standard": "16.0.3",
     "eslint-config-standard-with-typescript": "21.0.1",
     "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "6.0.0",
+    "eslint-plugin-promise": "4.3.1",
     "source-map-explorer": "2.5.2",
     "source-map-loader": "3.0.1",
     "ts-node": "10.8.0",

package/readme.md

@@ -14,13 +14,13 @@ Our documentation is provided via [Storybook](https://storybook.js.org) and our
 
 First clone the repo then run:
 
-### `yarn install`
+### `npm install`
 
 ## Available Scripts
 
 In the project directory, you can run:
 
-### `yarn start`
+### `npm run start`
 
 Runs the app in the development mode.\
 Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
@@ -28,19 +28,19 @@ Open [http://localhost:6006](http://localhost:6006) to view it in the browser.
 The page will reload if you make edits.\
 You will also see any lint errors in the console.
 
-### `yarn start:run-test`
-The same as the `yarn start` command but runs the `yarn test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
+### `npm run start:run-test`
+The same as the `npm run start` command but runs the `npm run test:generate-output` command first, so the test results displayed within Storybook are up-to-date.
 
-### `yarn build-storybook`
+### `npm run build-storybook`
 Builds the Storybook app for pushing to the public subdomain.
 
-### `yarn test`
+### `npm run test`
 Runs the component Jest tests. If its the first run it also takes a snapshot for comparison, on successive runs.
 
-### `yarn test:update-snapshot`
+### `npm run test:update-snapshot`
 Updates the Jest snapshot.
 
-### `yarn test:generate-output`
+### `npm run test:generate-output`
 Runs the tests and outputs the results to a file `.jest-test-results.json` for use within the [Storybook addon Jest](https://storybook.js.org/addons/@storybook/addon-jest/)
 
 ## Getting started

package/components/atoms/Autocomplete/AutocompleteStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AutocompleteStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Autocomplete/AutocompleteStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AutocompleteStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Button/ButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Button/ButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Checkbox/CheckboxStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const CheckboxStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Checkbox/CheckboxStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var CheckboxStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/IconButton/IconButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const IconButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/IconButton/IconButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var IconButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Radio/RadioStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const RadioStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Radio/RadioStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var RadioStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Select/SelectStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SelectStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Select/SelectStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SelectStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Slider/SliderStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SliderStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Slider/SliderStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SliderStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/Switch/SwitchStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const SwitchStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/Switch/SwitchStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var SwitchStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/TextField/TextFieldStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const TextFieldStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/TextField/TextFieldStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var TextFieldStyles = makeStyles()(function (theme) { return ({}); });

package/components/atoms/ToggleButton/ToggleButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ToggleButtonStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/atoms/ToggleButton/ToggleButtonStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ToggleButtonStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/Avatar/AvatarStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AvatarStyles: (params: void) => {
-    classes: Record<"root", string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Avatar/AvatarStyles.js

@@ -1,14 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AvatarStyles = makeStyles()(function (theme, props) {
-    var _a, _b, _c;
-    return ({
-        root: {
-            backgroundColor: ((_a = props === null || props === void 0 ? void 0 : props.sx) === null || _a === void 0 ? void 0 : _a.bgcolor)
-                ? props.sx.bgcolor
-                : theme.palette.primary.main,
-            color: ((_b = props === null || props === void 0 ? void 0 : props.sx) === null || _b === void 0 ? void 0 : _b.bgcolor)
-                ? (_c = props.sx.color) !== null && _c !== void 0 ? _c : theme.palette.getContrastText(props.sx.bgcolor)
-                : theme.palette.primary.contrastText
-        }
-    });
-});

package/components/datadisplay/Chip/ChipStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ChipStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Chip/ChipStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ChipStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/List/ListStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const ListStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/List/ListStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var ListStyles = makeStyles()(function (theme) { return ({}); });

package/components/datadisplay/Tooltip/TooltipStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const TooltipStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/datadisplay/Tooltip/TooltipStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var TooltipStyles = makeStyles()(function (theme) { return ({}); });

package/components/feedback/Alert/AlertStyles.d.ts

@@ -1,7 +0,0 @@
-import { Theme } from '@mui/material/styles';
-export declare const AlertStyles: (params: void) => {
-    classes: Record<never, string>;
-    theme: Theme;
-    css: import("tss-react").Css;
-    cx: import("tss-react").Cx;
-};

package/components/feedback/Alert/AlertStyles.js

@@ -1,2 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-export var AlertStyles = makeStyles()(function (theme) { return ({}); });