@learningpool/ui 1.6.0-beta.5 → 1.6.0-beta.6

package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { Avatar, Button, ListItemButton, Typography } from '../../../index';
+import { Drawer } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary; });
+export var StyledBox = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'; }, function (props) { return props.theme.spacing(2); });
+export var StyledBoxProfile = styled(motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"])));
+export var StyledBoxProfileEdit = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
+export var StyledAvatarName = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.75rem;\n"], ["\n  color: ", ";\n  font-size: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.text.primary; });
+export var StyledOutlineButton = styled(Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  border-color: ", ";\n  color: ", ";\n"], ["\n  border-color: ", ";\n  color: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.primary.main; });
+export var StyledAvatar = styled(Avatar)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-size: 0.85rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.primary.main; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.main
+    : props.theme.palette.primary.contrastText; });
+export var StyledListItemButton = styled(ListItemButton)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  border-radius: 50px;\n  white-space: normal;\n"], ["\n  border-radius: 50px;\n  white-space: normal;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface IVerticalNavigationItemProps {
     label: string;
-    icon: React.ReactElement;
+    icon?: React.ReactElement;
     onClick?: any;
     isActive?: boolean;
     children?: IVerticalNavigationItemProps[];

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js

@@ -4,7 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { List, ListItem, ListItemButton as SSListItemButton, Paper, Typography } from '../../../../index';
 import { styled } from '@mui/material/styles';
-import { motion } from '../../../../utils/theme';
 import { NotchMiniSVG } from '../../../../assets/Images';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
@@ -22,8 +21,8 @@ export var FlyoutMenuWrap = styled('div', {
     : '#E6EAF0'; }, function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'; }, function (props) { return props.open
-    ? "all 250ms ".concat(motion.easeInOut)
-    : "all 150ms ".concat(motion.easeOut); });
+    ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
+    : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); });
 export var FlyoutMenuList = styled(List, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
 })(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n  pointer-events: ", ";\n"], ["\n  padding: ", ";\n  pointer-events: ", ";\n"])), function (props) { return props.theme.spacing(1, 2); }, function (props) { return props.open ? 'auto' : 'none'; });
@@ -31,17 +30,17 @@ export var FlyoutMenuHeader = styled(Typography)(templateObject_4 || (templateOb
 export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-size: 14px;\n  padding: 0;\n  white-space: normal;\n  background: transparent !important;\n"], ["\n  font-size: 14px;\n  padding: 0;\n  white-space: normal;\n  background: transparent !important;\n"])));
 export var FlyoutMenuButton = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all 225ms ", " 0;\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    transition: all 180ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all 225ms ", " 0;\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    transition: all 180ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"
     // FullHeight
 ])), function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, motion.easeInOut, function (props) { return props.theme.spacing(1, 2); }, function (props) {
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(1, 2); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.5)'
         : props.theme.palette.primary.main;
-}, motion.easeInOut, function (props) {
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.dark
         : '#E6EAF0';
@@ -49,14 +48,18 @@ export var FlyoutMenuButton = styled(SSListItemButton, {
 // FullHeight
 export var FullHeightFlyoutMenuPaper = styled(Paper, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  z-index: 1;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; });
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
+    ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
+    : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); });
 export var FullHeightFlyoutMenuWrapper = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
 })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"], ["\n  background-color: ", ";\n  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open ? "all 150ms ".concat(motion.easeInOut) : "all 100ms ".concat(motion.easeOut); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
+    : props.theme.palette.background.paper; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
+    ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
+    : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
 export var FlyoutNotchMask = styled('div')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: -40px;\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: -40px;\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
     : '#E6EAF0'; });

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js

@@ -4,7 +4,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 };
 import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon } from '../../../../index';
 import { styled } from '@mui/material/styles';
-import { motion } from '../../../../utils/theme';
 import { ArrowRight } from '@mui/icons-material';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
@@ -16,12 +15,12 @@ var ICON = {
 };
 export var ListItem = styled(SSListItem, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width 225ms ", " ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width 225ms ", " ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, motion.easeInOut, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
 export var ListItemButton = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all 225ms ", " 0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all 180ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all 225ms ", " 0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all 180ms ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"])), function (props) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"])), function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
         : props.theme.palette.background.paper;
@@ -33,11 +32,11 @@ export var ListItemButton = styled(SSListItemButton, {
     ? props.isExpanded
         ? 'auto'
         : '200px'
-    : "".concat(ICON.Height + 8, "px"); }, motion.easeInOut, function (props) { return props.theme.spacing(2); }, function (props) {
+    : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.5)'
         : props.theme.palette.primary.main;
-}, motion.easeInOut, function (props) {
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
         : props.theme.palette.background.paper;
@@ -48,24 +47,24 @@ export var ListItemButton = styled(SSListItemButton, {
 });
 export var ListItemButtonChild = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height 225ms ", " 0ms !important;\n  padding: 0;\n  width: 100%;\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity 225ms ", " ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height 225ms ", " 0ms !important;\n  padding: 0;\n  width: 100%;\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity 225ms ", " ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  width: 100%;\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity\n                ", "ms\n                ", "\n                ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  min-height: none;\n  max-height: none;\n  text-decoration: none;\n  text-transform: none;\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  width: 100%;\n\n  .MuiTypography-root: {\n    font-size: .9rem;\n    opacity: ", ";\n    transition: opacity\n                ", "ms\n                ", "\n                ", "s !important;\n  }\n\n  .MuiListItemText-root: {\n    padding: .25rem .5rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(255, 255, 255, 0.75)'
-    : 'rgba(0, 0, 0, 0.75)'; }, motion.easeInOut, function (props) { return props.isDrawerOpen ? 1 : 0; }, motion.easeInOut, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
+    : 'rgba(0, 0, 0, 0.75)'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
 export var ListItemAvatar = styled(ListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height 225ms ", " 0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"], ["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height 225ms ", " 0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"])), function (props) { return props.isDrawerOpen
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"], ["\n  align-items: center;\n  min-height: 52px;\n  max-height: ", ";\n  transition: max-height\n              ", "ms\n              ", "\n              0ms !important;\n\n  .MuiListItemIcon-root {\n    justify-content: center;\n    margin: 0;\n    min-width: 0;\n  }\n\n  .MuiAvatar-root {\n    height: 32px;\n    width: 32px;\n  }\n"])), function (props) { return props.isDrawerOpen
     ? '200px'
-    : "".concat(ICON.Height + 8, "px"); }, motion.easeInOut);
+    : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  height: ", "px;\n  justify-content: center;\n  margin-top: 0 !important;\n  min-width: ", ";\n  width: ", ";\n\n  [theme.breakpoints.up('sm')] {\n    min-width: ", "px;\n    width: ", "px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  height: ", "px;\n  justify-content: center;\n  margin-top: 0 !important;\n  min-width: ", ";\n  width: ", ";\n\n  [theme.breakpoints.up('sm')] {\n    min-width: ", "px;\n    width: ", "px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, ICON.Width, ICON.Width, ICON.Width + 8, ICON.Width + 8);
 export var ListItemText = styled(SSListItemText, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
-})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  transition: opacity 225ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  transition: opacity 225ms ", " ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return props.isDrawerOpen ? 1 : 0; }, motion.easeInOut, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
 export var StyledExpandLess = styled(ArrowRight, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity 225ms ", " 200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity 225ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, motion.easeInOut);
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var StyledExpandMore = styled(ArrowRight, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity 225ms ", " 200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity 225ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, motion.easeInOut);
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;

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

@@ -0,0 +1,141 @@
+export declare const motionParent: {
+    open: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    closed: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};
+export declare const motionFadeIn: {
+    open: {
+        opacity: number;
+    };
+    closed: {
+        opacity: number;
+    };
+};
+export declare const motionFadeInUp: {
+    open: {
+        y: number;
+        opacity: number;
+        transition: {
+            y: {
+                stiffness: number;
+                velocity: number;
+            };
+        };
+    };
+    closed: {
+        y: number;
+        opacity: number;
+        transition: {
+            y: {
+                stiffness: number;
+            };
+        };
+    };
+};
+export declare const motionWhileHover: {
+    scale: number;
+};
+export declare const motionWhileTap: {
+    scale: number;
+};
+export declare const variantsLogo: {
+    open: {
+        opacity: number;
+    };
+    closed: {
+        opacity: number;
+    };
+};
+export declare const variantsUl: {
+    open: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    closed: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};
+export declare const variantsLi: {
+    open: {
+        y: number;
+        opacity: number;
+        transition: {
+            y: {
+                stiffness: number;
+                velocity: number;
+            };
+        };
+    };
+    closed: {
+        y: number;
+        opacity: number;
+        transition: {
+            y: {
+                stiffness: number;
+            };
+        };
+    };
+};
+export declare const variantsSecondaryUl: {
+    open: {
+        transition: {
+            staggerChildren: number;
+            delayChildren: number;
+        };
+    };
+    closed: {
+        transition: {
+            staggerChildren: number;
+            staggerDirection: number;
+        };
+    };
+};
+export declare const variantsSecondaryLi: {
+    open: {
+        y: number;
+        opacity: number;
+        transition: {
+            y: {
+                stiffness: number;
+                velocity: number;
+            };
+        };
+    };
+    closed: {
+        y: number;
+        opacity: number;
+        transition: {
+            y: {
+                stiffness: number;
+            };
+        };
+    };
+};
+export declare const variantsDivider: {
+    open: {
+        scaleX: number;
+        opacity: number;
+        transition: {
+            type: string;
+            delay: number;
+        };
+    };
+    closed: {
+        scaleX: number;
+        opacity: number;
+    };
+};

package/components/navigation/VerticalNavigation/VerticalNavigationMotion.js

@@ -0,0 +1,109 @@
+export var motionParent = {
+    open: {
+        transition: { staggerChildren: 0.07, delayChildren: 0 }
+    },
+    closed: {
+        transition: { staggerChildren: 0.05, staggerDirection: -1 }
+    }
+};
+export var motionFadeIn = {
+    open: {
+        opacity: 1
+    },
+    closed: {
+        opacity: 0
+    }
+};
+export var motionFadeInUp = {
+    open: {
+        y: 0,
+        opacity: 1,
+        transition: {
+            y: { stiffness: 1000, velocity: -20 }
+        }
+    },
+    closed: {
+        y: 10,
+        opacity: 0,
+        transition: {
+            y: { stiffness: 1000 }
+        }
+    }
+};
+export var motionWhileHover = {
+    scale: 1.02
+};
+export var motionWhileTap = {
+    scale: 0.95
+};
+// Old ones...
+export var variantsLogo = {
+    open: {
+        opacity: 1
+    },
+    closed: {
+        opacity: 0
+    }
+};
+export var variantsUl = {
+    open: {
+        transition: { staggerChildren: 0.07, delayChildren: 0.2 }
+    },
+    closed: {
+        transition: { staggerChildren: 0.05, staggerDirection: -1 }
+    }
+};
+export var variantsLi = {
+    open: {
+        y: 0,
+        opacity: 1,
+        transition: {
+            y: { stiffness: 1000, velocity: -20 }
+        }
+    },
+    closed: {
+        y: 10,
+        opacity: 0,
+        transition: {
+            y: { stiffness: 1000 }
+        }
+    }
+};
+export var variantsSecondaryUl = {
+    open: {
+        transition: { staggerChildren: 0.05, delayChildren: 0.5 }
+    },
+    closed: {
+        transition: { staggerChildren: 0.05, staggerDirection: -1 }
+    }
+};
+export var variantsSecondaryLi = {
+    open: {
+        y: 0,
+        opacity: 1,
+        transition: {
+            y: { stiffness: 500, velocity: -10 }
+        }
+    },
+    closed: {
+        y: 10,
+        opacity: 0,
+        transition: {
+            y: { stiffness: 500 }
+        }
+    }
+};
+export var variantsDivider = {
+    open: {
+        scaleX: 1,
+        opacity: 1,
+        transition: {
+            type: 'spring',
+            delay: 0.5
+        }
+    },
+    closed: {
+        scaleX: 0.25,
+        opacity: 0
+    }
+};

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -5,7 +5,6 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import Drawer from '@mui/material/Drawer';
 import { Box, IconButton } from '../../../index';
 import { styled } from '@mui/material/styles';
-import { motion } from '../../../utils/theme';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
@@ -16,25 +15,27 @@ var ICON = {
 };
 export var DrawerHeader = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  /* necessary for content to be below app bar */\n  /* ...props.theme.mixins.toolbar */\n  transition: width 225ms ", " ", ";\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height 225ms ", " 0ms !important;\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  /* necessary for content to be below app bar */\n  /* ...props.theme.mixins.toolbar */\n  transition: width 225ms ", " ", ";\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height 225ms ", " 0ms !important;\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); }, motion.easeInOut, function (props) { return props.isDrawerOpen ? 0 : '250ms'; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) {
+    : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
+    ? "width\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut, "\n      0")
+    : "width\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(7), " + 1px)"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.isDrawerOpen ? DRAWER_WIDTH.Expanded : "calc(".concat(props.theme.spacing(8), " + 1px)"); }, function (props) { return props.theme.spacing(0.5); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, motion.easeInOut, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
-export var DrawerToggle = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all 225ms ", " 0ms !important;\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all 225ms ", " 0ms !important;\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
+}, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
+export var DrawerToggle = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all\n              ", "ms\n              ", ";\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all\n              ", "ms\n              ", ";\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
 export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
 export var StyledAside = styled('aside')(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor 225ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color 225ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor 225ms ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: background-color 225ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-start;\n  margin-top: -1px;\n  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  * &:hover {\n    scrollbar-color: ", ";\n  }\n\n  // Webkit and fall back scrollbars\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: ", ";\n    border-radius: 55px;\n    transition: backgroundColor\n                ", "ms\n                ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.12) transparent'
         : 'rgba(0, 0, 0, 0.12) transparent';
-}, motion.easeIn, function (props) {
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.24) transparent'
         : 'rgba(0, 0, 0, 0.24) transparent';
@@ -42,7 +43,7 @@ export var StyledNav = styled('nav')(templateObject_5 || (templateObject_5 = __m
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.12)'
         : 'rgba(0, 0, 0, 0.12)';
-}, motion.easeIn, function (props) {
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.24)'
         : 'rgba(0, 0, 0, 0.24)';
@@ -52,23 +53,23 @@ export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObjec
     : props.theme.palette.background.paper; });
 export var StyledDivider = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all 225ms ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all 225ms ", ";\n    width: 66%;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all\n                ", "ms\n                ", ";\n    width: 66%;\n  }\n"], ["\n  background-color: ", ";\n\n  :before {\n    background-color: ", ";\n    border-radius: 55px;\n    content: '';\n    display: block;\n    height: 2px;\n    margin: auto;\n    transition: all\n                ", "ms\n                ", ";\n    width: 66%;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.075)'
         : 'rgba(0, 0, 0, 0.075)';
-}, motion.easeIn);
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var DrawerShadow = styled(Box, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left 225ms ", " 0ms;\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"], ["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left 225ms ", " 0ms;\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"])), function (props) { return props.isDrawerOpen
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left\n              ", "ms\n              ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"], ["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left\n              ", "ms\n              ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"])), function (props) { return props.isDrawerOpen
     ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
-    : "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, motion.easeInOut, function (props) { return props.theme.breakpoints.values.sm; }, function (props) {
+    : "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) {
     return props.isDrawerOpen
         ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
         : "".concat(DRAWER_WIDTH.Collapsed - 33, "px");
 });
-export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width 225ms ", " 0ms !important;\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, motion.easeInOut);
+export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width\n              ", "ms\n              ", ";\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width\n              ", "ms\n              ", ";\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
@@ -80,9 +81,9 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
     : props.theme.palette.background.paper; });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width 225ms ", " 0ms !important;\n  white-space: nowrap;\n  width: ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width 225ms ", " 0ms !important;\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, motion.easeInOut, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.6.0-beta.5",
+  "version": "1.6.0-beta.6",
   "private": false,
   "main": "index.js",
   "module": "index.js",

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

@@ -1,8 +0,0 @@
-import React from 'react';
-export interface IAvatarPanelProps {
-    avatarName: string;
-    editProfileText?: string;
-    logoutText?: string;
-}
-declare const AvatarPanel: (props: IAvatarPanelProps) => React.ReactElement;
-export default AvatarPanel;