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

package/assets/Images.d.ts

@@ -4,3 +4,6 @@ export declare const StreamSuiteLogo: import("@mui/material/OverridableComponent
 export declare const LearningPoolLogo: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
     muiName: string;
 };
+export declare const NotchSVG: import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+    muiName: string;
+};

package/assets/Images.js

@@ -13,3 +13,4 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createSvgIcon } from '@mui/material/utils';
 export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
 export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');
+export var NotchSVG = createSvgIcon(_jsx("svg", __assign({ className: 'notch-svg' }, { 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' }) })) })), 'Notch');

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -10,29 +10,45 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import React, { useEffect } from 'react';
 import { styled, useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Avatar, Drawer as SSDrawer, Modal, List, ListItemText } from '../../../index';
+import { Avatar, Drawer, Modal, List, Tooltip } from '../../../index';
 import { Box, Link } from '@mui/material';
 import MailIcon from '@mui/icons-material/Mail';
-import { StreamSuiteLogo } from '../../../assets/Images';
+import { StreamSuiteLogo, NotchSVG } from '../../../assets/Images';
 import { AppSwitcher } from '@learningpool/app-switcher';
 import { ChevronLeft, ChevronRight } from '@mui/icons-material';
-import { DRAWER_WIDTH, paperStyles, openedMixin, closedMixin, DrawerHeader, ListItem, DrawerToggle, DrawerToggleHitboxContent, ListItemButton, ListItemAvatar, ListItemIcon } from './VerticalNavigationStyles';
-var Drawer = styled(SSDrawer)(function (_a) {
+import { DRAWER_WIDTH, DrawerHeader, ListItem, DrawerToggle, DrawerToggleHitboxContent, ListItemButton, ListItemAvatar, ListItemIcon, ListItemText, StyledNav, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, paperStyles, closedMixin, openedMixin } from './VerticalNavigationStyles';
+var StyledDrawer = styled(Drawer)(function (_a) {
     var theme = _a.theme, open = _a.open;
-    return (__assign(__assign({ width: DRAWER_WIDTH.Expanded, flexShrink: 0, whiteSpace: 'nowrap', boxSizing: 'border-box', boxShadow: 'none' }, (open && __assign(__assign({}, openedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), openedMixin(theme)) }))), (!open && __assign(__assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), closedMixin(theme)) }))));
+    return (__assign(__assign({ boxShadow: 'none', boxSizing: 'border-box', flexShrink: 0, whiteSpace: 'nowrap', width: DRAWER_WIDTH.Expanded }, (open && __assign(__assign({}, openedMixin()), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), openedMixin()) }))), (!open && __assign(__assign({}, closedMixin(theme)), { '& .MuiDrawer-paper': __assign(__assign({}, paperStyles(theme)), closedMixin(theme)) }))));
 });
 var VerticalNavigation = function (props) {
-    var _a;
+    var _a, _b;
     var theme = useTheme();
     var items = props.items, secondaryItems = props.secondaryItems, hasStreamHome = props.hasStreamHome, logo = props.logo, logoText = props.logoText;
+    var propIsDrawerOpen = typeof (props === null || props === void 0 ? void 0 : props.isDrawerOpen) === 'boolean' ? props.isDrawerOpen : undefined;
     var avatarName = (_a = props === null || props === void 0 ? void 0 : props.avatarName) !== null && _a !== void 0 ? _a : 'Avatar name';
-    var _b = React.useState(false), isDrawerOpen = _b[0], setIsDrawerOpen = _b[1];
+    var _c = React.useState(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false), isDrawerOpen = _c[0], setIsDrawerOpen = _c[1];
     var isMediumAndUp = useMediaQuery(theme.breakpoints.up('sm'));
     var logoHeight = isMediumAndUp ? '46px' : '38px';
     var logoWidth = isMediumAndUp ? '46px' : '38px';
+    useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
+    useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
+    var handleAvatarInitials = function (avatarName) {
+        var _a, _b;
+        var firstInitial = avatarName.split('')[0] || '';
+        var secondInitial = '';
+        if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+            firstInitial = avatarName.split(' ')[0][0];
+            if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
+            }
+        }
+        return "".concat(firstInitial).concat(secondInitial);
+    };
+    var _d = React.useState((_b = handleAvatarInitials(avatarName)) !== null && _b !== void 0 ? _b : 'AN'), avatarInitials = _d[0], setAvatarInitials = _d[1];
     var toggleDrawer = function (open) { return function (event) {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         if (event.type === 'keydown') {
@@ -49,74 +65,32 @@ var VerticalNavigation = function (props) {
                 flex: '1 auto',
                 flexDirection: 'column',
                 justifyContent: 'flex-start'
-            } }, { children: [_jsxs(DrawerHeader, { children: [logo
-                            ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
-                                    marginRight: isMediumAndUp ? '20px' : '24px'
-                                }, alt: "Site Logo" }))
-                            : (_jsx(StreamSuiteLogo, { style: {
-                                    height: logoHeight,
-                                    width: logoWidth,
-                                    marginRight: isMediumAndUp ? '20px' : '24px',
-                                    fill: theme.palette.mode === 'dark'
-                                        ? theme.palette.primary.contrastText
-                                        : theme.palette.primary.main
-                                } })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '' })] }), _jsxs("div", __assign({ style: {
-                        display: 'flex',
-                        justifyContent: 'flex-end',
-                        height: 'auto',
-                        marginTop: "-".concat(theme.spacing(0.5)),
-                        position: 'relative',
-                        transition: 'width 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
-                        width: '100%',
-                        zIndex: '-1'
-                    } }, { children: [_jsx("div", { style: {
-                                flex: '1',
-                                width: 'auto',
-                                height: 'auto',
-                                backgroundColor: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.background.paper
-                            } }), _jsx("div", { style: {
-                                display: 'flex',
-                                width: '45px',
-                                height: '85px',
-                                clipPath: 'url("#notch")',
-                                backgroundColor: theme.palette.mode === 'dark'
-                                    ? theme.palette.primary.main
-                                    : theme.palette.background.paper
-                            } }), _jsx("div", { style: {
-                                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)'
-                            } })] })), _jsx("svg", __assign({ className: 'notch-svg', style: {
-                        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' }) })) })), _jsxs("nav", __assign({ style: {
-                        display: 'flex',
-                        flex: '1 auto',
-                        flexDirection: 'column',
-                        justifyContent: 'flex-start'
-                    } }, { children: [_jsx(List, __assign({ sx: {
+            } }, { children: [_jsxs(DrawerHeader, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: logoText !== null && logoText !== void 0 ? logoText : '', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: logo
+                                ? typeof logo === 'string'
+                                    ? (_jsx("img", { src: logo, height: logoHeight, width: logoWidth, style: {
+                                            marginRight: isMediumAndUp ? '20px' : '24px'
+                                        }, alt: "Site Logo" }))
+                                    : logo
+                                : (_jsx(StreamSuiteLogo, { style: {
+                                        height: logoHeight,
+                                        width: logoWidth,
+                                        marginRight: isMediumAndUp ? '20px' : '24px',
+                                        fill: theme.palette.mode === 'dark'
+                                            ? theme.palette.primary.contrastText
+                                            : theme.palette.primary.main
+                                    } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen })] }), _jsxs(NotchContainer, { children: [_jsx(NotchBackground, {}), _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] }), _jsx(NotchSVG, { style: { height: '0', position: 'absolute', width: '0' } }), _jsxs(StyledNav, { 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) {
+                                width: DRAWER_WIDTH.Expanded,
+                                marginTop: "-".concat(theme.spacing(0.5))
+                            } }, { children: items && items.length > 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) })));
+                                        component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen, index: index })] }), item.label) })));
                             }) })), _jsxs(List, __assign({ sx: {
+                                width: DRAWER_WIDTH.Expanded,
                                 marginTop: 'auto',
                                 backgroundColor: theme.palette.mode === 'dark'
                                     ? theme.palette.primary.main
@@ -125,57 +99,32 @@ var VerticalNavigation = function (props) {
                                     ? (_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) {
+                                            } }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: 'App switcher', placement: theme.direction === 'rtl' ? 'left' : 'right' }, { 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', isDrawerOpen: isDrawerOpen })] })) })))
+                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
                                     var _a;
-                                    return (_jsx(ListItem, { children: _jsxs(ListItemButton
+                                    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) }));
-                                }), _jsx(ListItem, __assign({ disablePadding: true, sx: {
-                                        overflow: 'hidden'
-                                    } }, { children: _jsxs(ListItemAvatar
-                                    // @ts-expect-error
-                                    , __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 })] })) }))] }))] }))] })));
+                                            component: Link, onClick: item.onClick, isActive: item.isActive, isDrawerOpen: isDrawerOpen, index: index }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: item.label, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: (_a = item.icon) !== null && _a !== void 0 ? _a : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: item.label, isDrawerOpen: isDrawerOpen })] }), item.label) })));
+                                }), avatarName
+                                    ? (_jsx(ListItem, __assign({ disablePadding: true, sx: {
+                                            overflow: 'hidden'
+                                        } }, { children: _jsxs(ListItemAvatar, __assign({ isDrawerOpen: isDrawerOpen, component: Link }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: isDrawerOpen, disableFocusListener: isDrawerOpen, disableTouchListener: isDrawerOpen, title: avatarName, placement: theme.direction === 'rtl' ? 'left' : 'right' }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true, sx: { mr: 3 } }, { children: _jsx(Avatar, __assign({ sx: {
+                                                                bgcolor: theme.palette.mode === 'dark'
+                                                                    ? theme.palette.primary.contrastText
+                                                                    : theme.palette.primary.main
+                                                            } }, { children: avatarInitials })) })) })), _jsx(ListItemText, { primary: avatarName, isDrawerOpen: isDrawerOpen })] })) })))
+                                    : null] }))] })] })));
     };
-    return (_jsxs("aside", { children: [_jsx("div", { className: 'drawerShadow', "aria-hidden": 'true', style: {
-                    position: 'fixed',
-                    top: '0',
-                    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%',
-                    width: '40px',
-                    display: 'block',
-                    visibility: 'visible',
-                    filter: 'blur(13px)'
-                } }), _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: {
+    return (_jsxs(StyledAside, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsxs(StyledDrawer, __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')
+                    }, variant: 'permanent' }, { 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 ? "".concat(DRAWER_WIDTH.Expanded - 21, "px") : (isMediumAndUp ? '44px' : '36px')
                             } }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
                                     ? (_jsx(ChevronLeft, { sx: {
                                             fontSize: '1.75rem',

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<{
@@ -22,16 +22,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
 }, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<Theme>, {}, {}>;
-export declare const 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<{
+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,46 +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'
+    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.4, 0.0, 0.6, 1) 0ms !important',
+export var openedMixin = function () { return ({
+    boxShadow: 'none',
     overflowX: 'visible',
-    boxShadow: 'none'
+    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.4, 0.0, 0.6, 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 = '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', overflow: 'hidden', 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'
@@ -57,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 = 'all 225ms cubic-bezier(0.4, 0.0, 0.6, 1) 0ms !important',
         _b);
 });
 export var DrawerToggleHitboxContent = styled('span')(function (_a) {
@@ -102,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/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.4.0-beta.4",
+  "version": "1.4.0-beta.5",
   "private": false,
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -69,19 +69,19 @@
     "@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",
-    "@storybook/addon-essentials": "6.5.6",
-    "@storybook/addon-jest": "6.5.6",
-    "@storybook/addon-links": "6.5.6",
-    "@storybook/addons": "6.5.6",
-    "@storybook/builder-webpack5": "6.5.6",
-    "@storybook/manager-webpack5": "6.5.6",
-    "@storybook/node-logger": "6.5.6",
-    "@storybook/preset-create-react-app": "4.1.1",
-    "@storybook/react": "6.5.6",
-    "@storybook/theming": "6.5.6",
+    "@ht2-labs/semantic-release": "3.0.5",
+    "@storybook/addon-a11y": "6.5.9",
+    "@storybook/addon-actions": "6.5.9",
+    "@storybook/addon-essentials": "6.5.9",
+    "@storybook/addon-jest": "6.5.9",
+    "@storybook/addon-links": "6.5.9",
+    "@storybook/addons": "6.5.9",
+    "@storybook/builder-webpack5": "6.5.9",
+    "@storybook/manager-webpack5": "6.5.9",
+    "@storybook/node-logger": "6.5.9",
+    "@storybook/preset-create-react-app": "4.1.2",
+    "@storybook/react": "6.5.9",
+    "@storybook/theming": "6.5.9",
     "babel-preset-minify": "0.5.2",
     "eslint-config-standard": "16.0.3",
     "eslint-config-standard-with-typescript": "21.0.1",
@@ -89,7 +89,7 @@
     "eslint-plugin-promise": "4.3.1",
     "source-map-explorer": "2.5.2",
     "source-map-loader": "3.0.1",
-    "ts-node": "10.8.0",
+    "ts-node": "10.8.1",
     "webpack": "5.72.1"
   },
   "release": {

package/utils/theme.d.ts

@@ -81,3 +81,9 @@ export declare const darkTheme: {
         };
     };
 };
+export declare const motion: {
+    ease: string;
+    easeOut: string;
+    easeIn: string;
+    easeInOut: string;
+};

package/utils/theme.js

@@ -53,3 +53,9 @@ export var darkTheme = {
         }
     }
 };
+export var motion = {
+    ease: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+    easeOut: 'cubic-bezier(0.0, 0.0, 0.2, 1)',
+    easeIn: 'cubic-bezier(0.4, 0.0, 1, 1)',
+    easeInOut: 'cubic-bezier(0.4, 0.0, 0.6, 1)'
+};