@learningpool/ui 1.15.5 → 1.16.0

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -1,57 +1,251 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 /* eslint-disable indent */
 import Drawer from '@mui/material/Drawer';
 import { Box, IconButton } from '../../../index';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
 import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground } from '../helpers';
-export var DRAWER_WIDTH = {
+export const DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-var ICON = {
+const ICON = {
     Height: 40,
     Width: 57
 };
-export var NOTCH = {
+export const NOTCH = {
     Width: 25
 };
-export var DrawerHeader = styled(animated.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  transition: ", " 250ms;\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 ", "ms ", ";\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: ", " 250ms;\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 ", "ms ", ";\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 getNavigationBackground(props.theme); }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
-    ? "width ".concat(props.theme.transitions.duration.enteringScreen, "ms ").concat(props.theme.transitions.easing.easeOut, " 0")
-    : "width ".concat(props.theme.transitions.duration.leavingScreen, "ms ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.isDrawerOpen
+export const DrawerHeader = styled(animated.div, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  align-items: center;
+  background-color: ${props => getNavigationBackground(props.theme)};
+  display: flex;
+  flex: 1 auto;
+  justify-content: flex-start;
+  overflow: hidden;
+  min-height: 56px !important;
+  padding: ${(props) => props.theme.spacing(1)} 10px 0;
+  transition: ${(props) => props.isDrawerOpen
+    ? `width ${props.theme.transitions.duration.enteringScreen}ms ${props.theme.transitions.easing.easeOut} 0`
+    : `width ${props.theme.transitions.duration.leavingScreen}ms ${props.theme.transitions.easing.easeIn}`} 250ms;
+  width: ${(props) => 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 getNavigationContrastText(props.theme); }, 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, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n  transition: all ", "ms ", ";\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  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 4.5px)) rotate(", ");\n  transition: all ", "ms ", ";\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.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 22, "px !important") : '35px !important' : 'auto !important'; }, function (props) { return props.theme.direction === 'rtl' ? '180deg' : 0; }, 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 getNavigationBackground(props.theme); }, 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  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: background-color ", "ms ", ";\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 ", "ms ", ";\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  overflow-x: hidden;\n  overflow-y: auto;\n\n  // Firefox and future scrollbars\n  * & {\n    scrollbar-width: thin;\n    scrollbar-color: ", ";\n    transition: background-color ", "ms ", ";\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 ", "ms ", ";\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme, 0.3); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return getOffsetNavigationBackground(props.theme, 0.3); });
-export var StyledNavSecondary = styled('nav')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  justify-content: flex-end;\n  margin-top: auto;\n  overflow: hidden;\n"])), function (props) { return getNavigationBackground(props.theme); });
-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 ", "ms ", ";\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 ", "ms ", ";\n    width: 66%;\n  }\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationBackground(props.theme, 0.05); }, 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  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\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  right: ", ";\n  position: fixed;\n  top: 0;\n  transition-duration: ", "ms;\n  transition-property: left right;\n  transition-timing-function: ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n    right: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr'
-    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px")
-    : 0; }, function (props) { return props.theme.direction === 'rtl'
-    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 41, "px")
-    : 0; }, 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.direction === 'ltr'
-    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
-    : 0; }, function (props) { return props.theme.direction === 'rtl'
-    ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded - 38, "px") : "".concat(DRAWER_WIDTH.Collapsed - 33, "px")
-    : 0; });
-export var NotchContainer = styled(Box)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -3px;\n  position: relative;\n  transition: width ", "ms ", ";\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -3px;\n  position: relative;\n  transition: width ", "ms ", ";\n  width: 100%;\n  z-index: 9;\n"])), 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 getNavigationBackground(props.theme); });
-export var NotchBackgroundClip = styled(Box)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  transform: rotate(", ");\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  transform: rotate(", ");\n  width: 45px;\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return (props.theme.direction === 'rtl' ? '180deg' : 0); });
-export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  left: ", ";\n  right: ", ";\n  top: -2px;\n  width: calc(100% - ", "px);\n"])), function (props) { return getNavigationBackground(props.theme); }, function (props) { return props.theme.direction === 'rtl' ? "".concat(NOTCH.Width, "px") : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? "".concat(NOTCH.Width, "px") : 'auto'; }, NOTCH.Width);
-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 ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n\n  .MuiTypography-root {\n    color: inherit;\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width ", "ms ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    left: ", ";\n    right: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width ", "ms ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n\n  .MuiTypography-root {\n    color: inherit;\n  }\n"])), 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 getNavigationContrastText(props.theme); }, function (props) { return (props.theme.direction === 'ltr' ? 0 : 'auto'); }, function (props) { return (props.theme.direction === 'rtl' ? 0 : 'auto'); }, 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"); });
-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;
+    : `calc(${props.theme.spacing(7)} + 1px)`};
+
+  @media (min-width: ${(props) => props.theme.breakpoints.values.sm}) {
+    min-height: 64px !important;
+    width: ${(props) => props.isDrawerOpen ? DRAWER_WIDTH.Expanded : `calc(${props.theme.spacing(8)} + 1px)`};
+  }
+
+  .MuiListItemIcon-root {
+    margin: ${(props) => props.theme.spacing(0.5)} 0 0;
+  }
+
+  .MuiListItemText-root {
+    align-items: center !important;
+    color: ${props => getNavigationContrastText(props.theme)};
+    display: flex;
+    min-height: ${ICON.Height + 8}px;
+    max-height: ${(props) => props.isDrawerOpen ? '200px' : `${ICON.Height + 8}px`};
+    text-decoration: none;
+    text-dransform: none;
+    transition: max-height ${(props) => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+    padding: 0;
+    width: 100%;
+
+    [theme.breakpoints.up('sm')] {
+      max-height: ${(props) => props.isDrawerOpen ? '200px' : `${ICON.Height + 8}px`};
+    }
+  }
+
+  .MuiListItemText-root .MuiTypography-root {
+    white-space: normal;
+  }
+`;
+export const DrawerToggle = styled(IconButton, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  background: transparent;
+  height: 44px;
+  padding: 0 ${(props) => props.theme.spacing(2)} !important;
+  position: absolute;
+  left: ${props => props.theme.direction === 'ltr' ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded - 22}px !important` : '35px !important' : 'auto !important'};
+  right: ${props => props.theme.direction === 'rtl' ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded - 22}px !important` : '35px !important' : 'auto !important'};
+  transform: translate(0, calc(50% - 4.5px)) rotate(${props => props.theme.direction === 'rtl' ? '180deg' : 0});
+  transition: all ${(props) => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+  width: 44px;
+  z-index: 10;
+
+  @media (min-width: ${(props) => props.theme.breakpoints.values.sm}) {
+    padding: 0 ${(props) => props.theme.spacing(2.5)} !important;
+  }
+`;
+export const DrawerToggleHitboxContent = styled('span') `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  border-radius: 50%;
+  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);
+  box-sizing: content-box;
+  height: 1.75rem;
+  padding: ${(props) => props.theme.spacing(0.5)};
+  width: 1.75rem;
+`;
+export const StyledAside = styled('aside') ``;
+export const StyledNav = styled('nav') `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  // Firefox and future scrollbars
+  * & {
+    scrollbar-width: thin;
+    scrollbar-color: ${props => getOffsetNavigationBackground(props.theme, 0.2)};
+    transition: background-color ${props => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+  }
+
+  * &:hover {
+    scrollbar-color: ${props => getOffsetNavigationBackground(props.theme, 0.3)};
+  }
+
+  // Webkit and fall back scrollbars
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.2)};
+    border-radius: 55px;
+    transition: background-color ${props => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.3)};
+  }
+`;
+export const StyledNavSecondary = styled('nav') `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin-top: auto;
+  overflow: hidden;
+`;
+export const StyledDivider = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+
+  :before {
+    background-color: ${props => getOffsetNavigationBackground(props.theme, 0.05)};
+    border-radius: 55px;
+    content: "";
+    display: block;
+    height: 2px;
+    margin: auto;
+    transition: all ${(props) => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+    width: 66%;
+  }
+`;
+export const DrawerShadow = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+  background: rgba(0, 0, 0, 0.125);
+  content: "";
+  display: block;
+  filter: blur(13px);
+  height: 100%;
+  left: ${(props) => props.theme.direction === 'ltr'
+    ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded - 38}px` : `${DRAWER_WIDTH.Collapsed - 41}px`
+    : 0};
+  right: ${(props) => props.theme.direction === 'rtl'
+    ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded - 38}px` : `${DRAWER_WIDTH.Collapsed - 41}px`
+    : 0};
+  position: fixed;
+  top: 0;
+  transition-duration: ${(props) => props.theme.transitions.duration.enteringScreen}ms;
+  transition-property: left right;
+  transition-timing-function: ${(props) => props.theme.transitions.easing.easeOut};
+  visibility: visible;
+  width: 40px;
+
+  @media (min-width: ${(props) => props.theme.breakpoints.values.sm}) {
+    left: ${(props) => props.theme.direction === 'ltr'
+    ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded - 38}px` : `${DRAWER_WIDTH.Collapsed - 33}px`
+    : 0};
+    right: ${(props) => props.theme.direction === 'rtl'
+    ? props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded - 38}px` : `${DRAWER_WIDTH.Collapsed - 33}px`
+    : 0};
+  }
+`;
+export const NotchContainer = styled(Box) `
+  display: flex;
+  justify-content: flex-end;
+  height: auto;
+  margin-top: -3px;
+  position: relative;
+  transition: width ${(props) => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+  width: 100%;
+  z-index: 9;
+`;
+export const NotchBackground = styled(Box) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  flex: 1;
+  height: auto;
+  width: auto;
+`;
+export const NotchBackgroundClip = styled(Box) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  clip-path: url("#notch");
+  display: flex;
+  height: 85px;
+  transform: rotate(${(props) => (props.theme.direction === 'rtl' ? '180deg' : 0)});
+  width: 45px;
+`;
+export const NotchSeemMask = styled(Box) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  height: 90px;
+  position: absolute;
+  left: ${(props) => props.theme.direction === 'rtl' ? `${NOTCH.Width}px` : 'auto'};
+  right: ${(props) => props.theme.direction === 'ltr' ? `${NOTCH.Width}px` : 'auto'};
+  top: -2px;
+  width: calc(100% - ${NOTCH.Width}px);
+`;
+export const StyledDrawer = styled(Drawer, {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  box-shadow: none;
+  box-sizing: border-box;
+  flexshrink: 0;
+  overflow-x: visible;
+  transition: width ${(props) => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+  white-space: nowrap;
+  width: ${(props) => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
+
+  .MuiDrawer-paper {
+    background: transparent none;
+    border: 0;
+    box-shadow: none;
+    color: ${props => getNavigationContrastText(props.theme)};
+    left: ${(props) => (props.theme.direction === 'ltr' ? 0 : 'auto')};
+    right: ${(props) => (props.theme.direction === 'rtl' ? 0 : 'auto')};
+    overflow: visible !important;
+    overflow-x: visible;
+    transform: translateX(0) !important;
+    transition: width ${(props) => props.theme.transitions.duration.enteringScreen}ms ${(props) => props.theme.transitions.easing.easeOut};
+    visibility: visible !important;
+    width: ${(props) => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
+  }
+
+  .MuiTypography-root {
+    color: inherit;
+  }
+`;

package/components/navigation/helpers.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 /**
  * Return the background color for the navigation
  * @returns string
@@ -23,7 +22,7 @@ export declare const getOffsetNavigationBackground: (theme: any, colorAdjustAmou
 export declare const getOffsetNavigationContrastText: (theme: any, colorAdjustAmount?: number) => any;
 export declare const getDefaultSupportLinks: (messages: Record<string, string>) => {
     label: string;
-    icon: JSX.Element;
+    icon: import("@emotion/react/jsx-runtime").JSX.Element;
     onClick: () => null;
     children: {
         label: string;

package/components/navigation/helpers.js

@@ -1,79 +1,75 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { darken, lighten, getLuminance } from 'polished';
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
-var DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
+const DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
 // Luminance threshold for determining if we should lighten or darken the color
 // .033 is the luminance value of #333333
-var LUMINANCE_THRESHOLD = 0.033;
+const LUMINANCE_THRESHOLD = 0.033;
 /**
  * Return the background color for the navigation
  * @returns string
  */
-export var getNavigationBackground = function (theme) {
-    var _a, _b;
-    return (_b = (_a = theme.palette.navigation) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.palette.background.paper;
+export const getNavigationBackground = (theme) => {
+    return theme.palette.navigation?.background ?? theme.palette.background.paper;
 };
 /**
  * Returns the contrast color for the navigation
  * @returns string
  */
-export var getNavigationContrastText = function (theme) {
-    var _a, _b, _c, _d, _e;
-    var palette = theme.palette;
+export const getNavigationContrastText = (theme) => {
+    const palette = theme.palette;
     // Use background property if navigation properties arent set
-    if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.contrastText) && !((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background)) {
+    if (!palette.navigation?.contrastText && !palette.navigation?.background) {
         return palette.getContrastText(palette.background.paper);
     }
-    return (_d = (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.contrastText) !== null && _d !== void 0 ? _d : palette.getContrastText((_e = palette.navigation) === null || _e === void 0 ? void 0 : _e.background);
+    return palette.navigation?.contrastText ?? palette.getContrastText(palette.navigation?.background);
 };
 /**
  * Return a darkened or lightened background color for the navigation
  * @param [colorAdjustAmount] number - Amount to lighten or darken the color
  * @returns string
  */
-export var getOffsetNavigationBackground = function (theme, colorAdjustAmount) {
-    var _a, _b, _c, _d;
-    var palette = theme.palette;
-    var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
+export const getOffsetNavigationBackground = (theme, colorAdjustAmount) => {
+    const palette = theme.palette;
+    const adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
     // Use background property if navigation property isnt set
-    if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.background)) {
+    if (!palette.navigation?.background) {
         return getLuminance(palette.background.paper) < LUMINANCE_THRESHOLD
             ? lighten(adjustAmount, palette.background.paper)
             : darken(adjustAmount, palette.background.paper);
     }
-    return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) < LUMINANCE_THRESHOLD
-        ? lighten(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background)
-        : darken(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background);
+    return getLuminance(palette.navigation?.background) < LUMINANCE_THRESHOLD
+        ? lighten(adjustAmount, palette.navigation?.background)
+        : darken(adjustAmount, palette.navigation?.background);
 };
 /**
  * Return a darkened or lightened contrast color for the navigation
  * @param [colorAdjustAmount] number - Amount to lighten or darken the color
  * @returns string
  */
-export var getOffsetNavigationContrastText = function (theme, colorAdjustAmount) {
-    var _a, _b, _c, _d;
-    var palette = theme.palette;
-    var adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
+export const getOffsetNavigationContrastText = (theme, colorAdjustAmount) => {
+    const palette = theme.palette;
+    const adjustAmount = colorAdjustAmount || DEFAULT_COLOR_ADJUST_AMOUNT;
     // Use background property if navigation property isnt set
-    if (!((_a = palette.navigation) === null || _a === void 0 ? void 0 : _a.background)) {
+    if (!palette.navigation?.background) {
         return getLuminance(palette.background.paper) < LUMINANCE_THRESHOLD
             ? palette.getContrastText(lighten(adjustAmount, palette.background.paper))
             : palette.getContrastText(darken(adjustAmount, palette.background.paper));
     }
-    return getLuminance((_b = palette.navigation) === null || _b === void 0 ? void 0 : _b.background) < LUMINANCE_THRESHOLD
-        ? palette.getContrastText(lighten(adjustAmount, (_c = palette.navigation) === null || _c === void 0 ? void 0 : _c.background))
-        : palette.getContrastText(darken(adjustAmount, (_d = palette.navigation) === null || _d === void 0 ? void 0 : _d.background));
+    return getLuminance(palette.navigation?.background) < LUMINANCE_THRESHOLD
+        ? palette.getContrastText(lighten(adjustAmount, palette.navigation?.background))
+        : palette.getContrastText(darken(adjustAmount, palette.navigation?.background));
 };
-export var getDefaultSupportLinks = function (messages) {
+export const getDefaultSupportLinks = (messages) => {
     return [
         {
             label: messages.support,
             icon: _jsx(HelpOutlineIcon, {}),
-            onClick: function () { return null; },
+            onClick: () => null,
             children: [
-                { label: messages['help-center'], onClick: function () { return window.open('https://learningpool.zendesk.com/', '_blank'); } },
-                { label: messages['submit-feedback'], onClick: function () { return window.open('https://learningpool.com/feature-request/', '_blank'); } },
-                { label: messages['contact-us'], onClick: function () { return window.open('https://learningpool.com/support/', '_blank'); } }
+                { label: messages['help-center'], onClick: () => window.open('https://learningpool.zendesk.com/', '_blank') },
+                { label: messages['submit-feedback'], onClick: () => window.open('https://learningpool.com/feature-request/', '_blank') },
+                { label: messages['contact-us'], onClick: () => window.open('https://learningpool.com/support/', '_blank') }
             ]
         }
     ];

package/components/pages/ErrorPage/ErrorPage.js

@@ -1,27 +1,16 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { LearningPoolLogo } from '../../../assets/Images';
 import CssBaseline from '@mui/material/CssBaseline';
 import Typography from '@mui/material/Typography';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
 import { StyledContainer, StyledBox, StyledLogoBox } from './ErrorPageStyles';
 export default function ErrorPage(props) {
-    var errorCode = props.errorCode, errorTitle = props.errorTitle, errorMessage = props.errorMessage;
-    var theme = createTheme();
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(StyledContainer, __assign({ component: 'main' }, { children: [_jsx(CssBaseline, {}), _jsxs(StyledBox, { children: [_jsxs(Typography, __assign({ component: 'h1', variant: 'h4', sx: {
+    const { errorCode, errorTitle, errorMessage } = props;
+    const theme = createTheme();
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(StyledContainer, { component: 'main', children: [_jsx(CssBaseline, {}), _jsxs(StyledBox, { children: [_jsxs(Typography, { component: 'h1', variant: 'h4', sx: {
                                 mb: 2
-                            } }, { children: [errorCode ? (_jsxs("span", { children: [errorCode, " | "] })) : '', _jsx("span", { children: errorTitle })] })), _jsx(Typography, __assign({ variant: 'body1', sx: {
+                            }, children: [errorCode ? (_jsxs("span", { children: [errorCode, " | "] })) : '', _jsx("span", { children: errorTitle })] }), _jsx(Typography, { variant: 'body1', sx: {
                                 color: 'text.secondary',
                                 mb: 3
-                            } }, { children: errorMessage }))] }), _jsx(StyledLogoBox, { children: _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '200px', height: '45px' } }) })] })) })));
+                            }, children: errorMessage })] }), _jsx(StyledLogoBox, { children: _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '200px', height: '45px' } }) })] }) }));
 }

package/components/pages/ErrorPage/ErrorPageStyles.js

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

package/components/pages/SideInSide/SideInSide.js

@@ -1,15 +1,4 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
 import { Button } from '../../../index';
 import CssBaseline from '@mui/material/CssBaseline';
 import Paper from '@mui/material/Paper';
@@ -22,18 +11,18 @@ import { SideInSideStyles } from './SideInSideStyles';
 import { LearningPoolLogo, StreamSuiteLogo } from '../../../assets/Images';
 import Link from '@mui/material/Link';
 function Copyright(props) {
-    return (_jsxs(Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', _jsx(Link, __assign({ color: "inherit", href: "https://learningpool.com/" }, { children: "Learning Pool" })), ' ', new Date().getFullYear(), '.'] })));
+    return (_jsxs(Typography, { variant: "body2", color: "text.secondary", align: "center", ...props, children: ['Copyright © ', _jsx(Link, { color: "inherit", href: "https://learningpool.com/", children: "Learning Pool" }), ' ', new Date().getFullYear(), '.'] }));
 }
-var theme = createTheme();
+const theme = createTheme();
 export default function SideInSide(props) {
-    var classes = SideInSideStyles(props).classes;
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ container: true, component: "main", className: classes.root, style: props === null || props === void 0 ? void 0 : props.style }, { children: [_jsx(CssBaseline, {}), _jsx(Grid, __assign({ item: true, xs: false, sm: false, md: 6, lg: 7, xl: 8, className: classes.pageBackgroundContainer }, { children: _jsx(Box, __assign({ className: classes.pageBackgroundLogoContainer }, { children: (props === null || props === void 0 ? void 0 : props.pageBackgroundLogo)
-                            ? (_jsx("img", { src: "".concat(String(props.pageBackgroundLogo)), alt: "".concat(String(props.pageBackgroundLogoAlt)), className: classes.pageBackgroundLogo }))
-                            : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '200px', width: '200px' } }) })) })), _jsx(Grid, __assign({ item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 4, component: Paper, elevation: 6, square: true }, { children: _jsxs(Box, __assign({ className: classes.contentPanel }, { children: [_jsx(Box, __assign({ className: classes.contentPanelImageContainer }, { children: (props === null || props === void 0 ? void 0 : props.formLogo)
-                                    ? (_jsx("img", { src: "".concat(String(props.formLogo)), alt: "".concat(String(props.formLogoAlt)), className: classes.contentPanelImage }))
-                                    : _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '250px', height: '60px' } }) })), _jsx(Typography, __assign({ component: "h1", variant: "h6" }, { children: props.welcomeMessage })), (props === null || props === void 0 ? void 0 : props.children) ? props.children : null, (props === null || props === void 0 ? void 0 : props.isStreamHomeEnabled)
-                                ? (_jsxs(_Fragment, { children: [_jsx(Divider, __assign({ sx: { mt: 1 } }, { children: "Or" })), _jsx(Button, __assign({ type: "submit", onClick: props === null || props === void 0 ? void 0 : props.handleStreamHomeLogin, fullWidth: true, className: classes.streamHomeButton, startIcon: (props === null || props === void 0 ? void 0 : props.startIcon)
+    const classes = SideInSideStyles(props).classes;
+    return (_jsx(ThemeProvider, { theme: theme, children: _jsxs(Grid, { container: true, component: "main", className: classes.root, style: props?.style, children: [_jsx(CssBaseline, {}), _jsx(Grid, { item: true, xs: false, sm: false, md: 6, lg: 7, xl: 8, className: classes.pageBackgroundContainer, children: _jsx(Box, { className: classes.pageBackgroundLogoContainer, children: props?.pageBackgroundLogo
+                            ? (_jsx("img", { src: `${String(props.pageBackgroundLogo)}`, alt: `${String(props.pageBackgroundLogoAlt)}`, className: classes.pageBackgroundLogo }))
+                            : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '200px', width: '200px' } }) }) }), _jsx(Grid, { item: true, xs: 12, sm: 12, md: 6, lg: 5, xl: 4, component: Paper, elevation: 6, square: true, children: _jsxs(Box, { className: classes.contentPanel, children: [_jsx(Box, { className: classes.contentPanelImageContainer, children: props?.formLogo
+                                    ? (_jsx("img", { src: `${String(props.formLogo)}`, alt: `${String(props.formLogoAlt)}`, className: classes.contentPanelImage }))
+                                    : _jsx(LearningPoolLogo, { inheritViewBox: true, style: { width: '250px', height: '60px' } }) }), _jsx(Typography, { component: "h1", variant: "h6", children: props.welcomeMessage }), props?.children ? props.children : null, props?.isStreamHomeEnabled
+                                ? (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { mt: 1 }, children: "Or" }), _jsx(Button, { type: "submit", onClick: props?.handleStreamHomeLogin, fullWidth: true, className: classes.streamHomeButton, startIcon: props?.startIcon
                                                 ? props.startIcon
-                                                : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '25px', width: '25px' } }) }, { children: "Log in with Stream Home" }))] }))
-                                : null, _jsx(Box, __assign({ className: classes.footerContent }, { children: (props === null || props === void 0 ? void 0 : props.footerContent) ? props.footerContent : _jsx(Copyright, {}) }))] })) }))] })) })));
+                                                : _jsx(StreamSuiteLogo, { style: { fill: '#fff', height: '25px', width: '25px' } }), children: "Log in with Stream Home" })] }))
+                                : null, _jsx(Box, { className: classes.footerContent, children: props?.footerContent ? props.footerContent : _jsx(Copyright, {}) })] }) })] }) }));
 }

package/components/pages/SideInSide/SideInSideStyles.js

@@ -1,12 +1,12 @@
 import { makeStyles } from 'tss-react/mui';
-export var SideInSideStyles = makeStyles()(function (theme, props) { return ({
+export const SideInSideStyles = makeStyles()((theme, props) => ({
     root: {
         height: '100vh',
         width: '100%'
     },
     pageBackgroundContainer: {
-        backgroundImage: (props === null || props === void 0 ? void 0 : props.pageBackgroundImage)
-            ? "url(".concat(String(props.pageBackgroundImage), ")")
+        backgroundImage: props?.pageBackgroundImage
+            ? `url(${String(props.pageBackgroundImage)})`
             : 'url(https://source.unsplash.com/YWIOwHvRBvU)',
         backgroundRepeat: 'no-repeat',
         backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[900],
@@ -50,11 +50,11 @@ export var SideInSideStyles = makeStyles()(function (theme, props) { return ({
         marginTop: theme.spacing(3)
     },
     streamHomeButton: {
-        marginBottom: "".concat(theme.spacing(5), " !important"),
-        marginTop: "".concat(theme.spacing(3), " !important")
+        marginBottom: `${theme.spacing(5)} !important`,
+        marginTop: `${theme.spacing(3)} !important`
     },
     footerContent: {
         marginTop: 'auto',
         width: '100%'
     }
-}); });
+}));