@learningpool/ui 1.15.4 → 1.16.0

package/components/navigation/MobileNavigation/MobileNavigationStyles.js

@@ -1,77 +1,273 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import Drawer from '@mui/material/Drawer';
 import { Box, IconButton, BottomNavigation, BottomNavigationAction, Paper, Avatar } from '../../../index';
 import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { motion } from '../../../utils/theme';
-export var DRAWER_WIDTH = {
+export const DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"], ["\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"])), function (props) { return props.theme.zIndex.appBar; });
-export var StyledNotchSVG = styled('svg', {
-    shouldForwardProp: function (prop) { return prop !== 'mobileNotchPosition'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"], ["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"])), function (props) { return getNavigationBackground(props.theme); });
-export var StyledBottomNavigation = styled(BottomNavigation)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  position: relative;\n"])), function (props) { return getNavigationBackground(props.theme); });
-export var StyledBottomNavigationAction = styled(BottomNavigationAction)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"], ["\n  color: ", ";\n  flex: none;\n  height: 56px;\n  max-width: 168px;\n  min-width: 80px;\n  overflow: hidden;\n  padding: 0;\n  stroke: ", ";\n\n  .MuiBottomNavigationAction-label {\n    color: inherit;\n    font-size: 0.65rem;\n\n    // Handle long text string overflow\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    width: 100%;\n\n    &.Mui-selected {\n      color: ", ";\n      font-size: 0.75rem;\n    }\n  }\n\n  .MuiSvgIcon-root {\n    fill: ", ";\n  }\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return getNavigationContrastText(props.theme); }, 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 getNavigationBackground(props.theme); });
-export var DrawerHeader = styled('div', {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n"], ["\n"])));
-export var DrawerToggle = styled(IconButton)(templateObject_6 || (templateObject_6 = __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); });
-export var DrawerToggleHitboxContent = styled('span')(templateObject_7 || (templateObject_7 = __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'
+export const StyledPaper = styled(Paper) `
+  background-image: none;
+  border-radius: 0;
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  z-index: ${props => props.theme.zIndex.appBar};
+`;
+export const StyledNotchSVG = styled('svg', {
+    shouldForwardProp: (prop) => prop !== 'mobileNotchPosition'
+}) `
+  display: block;
+  fill: ${props => getNavigationBackground(props.theme)};
+  height: 50px;
+  left: 0;
+  padding: 0;
+  position: absolute;
+  stroke: transparent;
+  top: -29px;
+  transform: rotate(270deg);
+  width: 50px;
+  z-index: -1;
+`;
+export const StyledBottomNavigation = styled(BottomNavigation) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  position: relative;
+`;
+export const StyledBottomNavigationAction = styled(BottomNavigationAction) `
+  color: ${props => getNavigationContrastText(props.theme)};
+  flex: none;
+  height: 56px;
+  max-width: 168px;
+  min-width: 80px;
+  overflow: hidden;
+  padding: 0;
+  stroke: ${props => getNavigationContrastText(props.theme)};
+
+  .MuiBottomNavigationAction-label {
+    color: inherit;
+    font-size: 0.65rem;
+
+    // Handle long text string overflow
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+
+    &.Mui-selected {
+      color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
+      font-size: 0.75rem;
+    }
+  }
+
+  .MuiSvgIcon-root {
+    fill: ${props => getNavigationBackground(props.theme)};
+  }
+`;
+export const DrawerHeader = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen'
+}) `
+`;
+export const DrawerToggle = styled(IconButton) `
+  background: transparent;
+  height: 44px;
+  padding: 0 ${props => props.theme.spacing(2)} !important;
+  position: absolute;
+  transform: translate(22px, calc(50% - 5.5px));
+  transition: all 225ms ${motion.easeInOut} 0ms !important;
+  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 => 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_8 || (templateObject_8 = __makeTemplateObject([""], [""])));
-export var StyledNav = styled('nav')(templateObject_9 || (templateObject_9 = __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'
+    : props.theme.palette.background.paper};
+  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 => 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) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.24) transparent'
-        : 'rgba(0, 0, 0, 0.24) transparent';
-}, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.12)'
-        : 'rgba(0, 0, 0, 0.12)';
-}, motion.easeIn, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.24)'
-        : 'rgba(0, 0, 0, 0.24)';
-});
-export var StyledNavSecondary = styled('nav')(templateObject_10 || (templateObject_10 = __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 props.theme.palette.mode === 'dark'
+    : props.theme.palette.background.paper};
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  justify-content: flex-start;
+  margin-top: -1px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  // Firefox and future scrollbars
+  * & {
+    scrollbar-width: thin;
+    scrollbar-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.12) transparent'
+    : 'rgba(0, 0, 0, 0.12) transparent'};
+    transition: backgroundColor 225ms ${motion.easeIn};
+  }
+
+  * &:hover {
+    scrollbar-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.24) transparent'
+    : 'rgba(0, 0, 0, 0.24) transparent'};
+  }
+
+  // Webkit and fall back scrollbars
+  ::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.12)'
+    : 'rgba(0, 0, 0, 0.12)'};
+    border-radius: 55px;
+    transition: background-color 225ms ${motion.easeIn};
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.24)'
+    : 'rgba(0, 0, 0, 0.24)'};
+  }
+`;
+export const StyledNavSecondary = styled('nav') `
+  background-color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var DrawerShadow = styled(Box, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_11 || (templateObject_11 = __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
-    ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
-    : "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, motion.easeInOut, 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_12 || (templateObject_12 = __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 NotchBackground = styled(Box)(templateObject_13 || (templateObject_13 = __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_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"])), function (props) { return getNavigationBackground(props.theme); });
-export var NotchSeemMask = styled(Box)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"], ["\n  background-color: ", ";\n  height: 90px;\n  position: absolute;\n  right: 25px;\n  top: -2px;\n  width: calc(100% - 25px);\n"])), function (props) { return getNavigationBackground(props.theme); });
-export var StyledDrawer = styled(Drawer, {
-    shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_16 || (templateObject_16 = __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;\n    width: ", ";\n\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;\n    width: ", ";\n\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) {
-    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"); });
-export var StyledNotchShadow = styled(Box)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"], ["\n  border-radius: 50%;\n  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -7px;\n  width: 25px;\n  z-index: -2;\n"])));
-export var StyledNotchShadowMask = styled(Box)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  height: 13px;\n  left: 13px;\n  position: absolute;\n  top: -1px;\n  width: 25px;\n  z-index: -1;\n"])), function (props) { return getNavigationBackground(props.theme); });
-export var StyledAvatar = styled(Avatar)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  font-weight: bold;\n"], ["\n  background-color: ", ";\n  color: ", ";\n  font-weight: bold;\n"])), function (props) { return getOffsetNavigationBackground(props.theme); }, function (props) { return getOffsetNavigationContrastText(props.theme); });
-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, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;
+    : props.theme.palette.background.paper};
+  display: flex;
+  flex: 1 auto;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin-top: auto;
+  overflow: hidden;
+`;
+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.isDrawerOpen
+    ? `${DRAWER_WIDTH.Expanded - 38}px`
+    : `${DRAWER_WIDTH.Collapsed - 41}px`};
+  position: fixed;
+  top: 0;
+  transition: left 225ms ${motion.easeInOut} 0ms;
+  visibility: visible;
+  width: 40px;
+
+  @media (min-width: ${props => props.theme.breakpoints.values.sm}) {
+    left: ${props => props.isDrawerOpen
+    ? `${DRAWER_WIDTH.Expanded - 38}px`
+    : `${DRAWER_WIDTH.Collapsed - 33}px`};
+  }
+`;
+export const NotchContainer = styled(Box) `
+  display: flex;
+  justify-content: flex-end;
+  height: auto;
+  margin-top: -${props => props.theme.spacing(0.5)};
+  position: relative;
+  transition: width 225ms ${motion.easeInOut} 0ms !important;
+  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;
+  width: 45px;
+`;
+export const NotchSeemMask = styled(Box) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  height: 90px;
+  position: absolute;
+  right: 25px;
+  top: -2px;
+  width: calc(100% - 25px);
+`;
+export const StyledDrawer = styled(Drawer, {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  box-shadow: none;
+  box-sizing: border-box;
+  flexshrink: 0;
+  overflow-x: visible;
+  transition: width 225ms ${motion.easeInOut} 0ms !important;
+  white-space: nowrap;
+  width: ${props => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
+
+  @media (min-width: ${props => props.theme.breakpoints.values.sm}) {
+    width: ${props => !props.open ? `calc(${props.theme.spacing(8)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
+  }
+
+  .MuiDrawer-paper {
+    background: transparent none;
+    border: 0;
+    box-shadow: none;
+    color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
+    overflow: visible !important;
+    overflow-x: visible;
+    transform: translateX(0) !important;
+    transition: width 225ms ${motion.easeInOut} 0ms !important;
+    visibility: visible;
+    width: ${props => !props.open ? `calc(${props.theme.spacing(7)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
+
+    [theme.breakpoints.up('sm')] {
+      width: ${props => !props.open ? `calc(${props.theme.spacing(8)} + 1px)` : `${DRAWER_WIDTH.Expanded}px`};
+    }
+  }
+`;
+export const StyledNotchShadow = styled(Box) `
+  border-radius: 50%;
+  box-shadow: 0px -7px 10px -5px rgb(0 0 0 / 20%), 0px 2px 10px 0px rgb(0 0 0 / 14%), 0px 0px 8px 0px rgb(0 0 0 / 12%);
+  height: 13px;
+  left: 13px;
+  position: absolute;
+  top: -7px;
+  width: 25px;
+  z-index: -2;
+`;
+export const StyledNotchShadowMask = styled(Box) `
+  background-color: ${props => getNavigationBackground(props.theme)};
+  border-radius: 50%;
+  height: 13px;
+  left: 13px;
+  position: absolute;
+  top: -1px;
+  width: 25px;
+  z-index: -1;
+`;
+export const StyledAvatar = styled(Avatar) `
+  background-color: ${props => getOffsetNavigationBackground(props.theme)};
+  color: ${props => getOffsetNavigationContrastText(props.theme)};
+  font-weight: bold;
+`;

package/components/navigation/MobileNavigation/MobileNavigationToggleSearchX.js

@@ -1,28 +1,29 @@
-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 { useSpring, animated, easings } from '@react-spring/web';
-var Path = function (props) { return (_jsx(animated.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
-var ToggleSearchX = function (props) {
-    var animationDefaults = {
-        reverse: props === null || props === void 0 ? void 0 : props.isOpen,
+const Path = (props) => (_jsx(animated.path, { fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round', ...props }));
+const ToggleSearchX = (props) => {
+    const animationDefaults = {
+        reverse: props?.isOpen,
         config: {
             duration: 150,
             easing: easings.easeInOutQuad
         }
     };
-    var handle = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 15 L 35 35' }, to: { d: 'M 26 26 L 35 35' } }));
-    var closeBar = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 35 L 35 15', opacity: 1, scale: 1 }, to: { d: 'M 26 26 L 35 35', opacity: 0, scale: 0 } }));
-    var circle = useSpring(__assign(__assign({}, animationDefaults), { from: { opacity: 0, scale: 0 }, to: { opacity: 1, scale: 1 } }));
-    return (_jsxs("svg", __assign({ width: '40', height: '40', viewBox: '0 0 50 50', stroke: 'inherit' }, { children: [_jsx(Path, __assign({}, handle)), _jsx(Path, __assign({}, closeBar)), _jsx(animated.circle, __assign({}, circle, { cx: '20', cy: '20', r: '8', fill: 'transparent', strokeWidth: '3', stroke: 'inherit' }))] })));
+    const handle = useSpring({
+        ...animationDefaults,
+        from: { d: 'M 15 15 L 35 35' },
+        to: { d: 'M 26 26 L 35 35' }
+    });
+    const closeBar = useSpring({
+        ...animationDefaults,
+        from: { d: 'M 15 35 L 35 15', opacity: 1, scale: 1 },
+        to: { d: 'M 26 26 L 35 35', opacity: 0, scale: 0 }
+    });
+    const circle = useSpring({
+        ...animationDefaults,
+        from: { opacity: 0, scale: 0 },
+        to: { opacity: 1, scale: 1 }
+    });
+    return (_jsxs("svg", { width: '40', height: '40', viewBox: '0 0 50 50', stroke: 'inherit', children: [_jsx(Path, { ...handle }), _jsx(Path, { ...closeBar }), _jsx(animated.circle, { ...circle, cx: '20', cy: '20', r: '8', fill: 'transparent', strokeWidth: '3', stroke: 'inherit' })] }));
 };
 export default ToggleSearchX;

package/components/navigation/MobileNavigation/MobileNavigationToggleX.js

@@ -1,28 +1,29 @@
-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 { useSpring, animated, easings } from '@react-spring/web';
-var Path = function (props) { return (_jsx(animated.path, __assign({ fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round' }, props))); };
-var ToggleX = function (props) {
-    var animationDefaults = {
-        reverse: props === null || props === void 0 ? void 0 : props.isOpen,
+const Path = (props) => (_jsx(animated.path, { fill: 'transparent', strokeWidth: '3', stroke: 'inherit', strokeLinecap: 'round', ...props }));
+const ToggleX = (props) => {
+    const animationDefaults = {
+        reverse: props?.isOpen,
         config: {
             duration: 150,
             easing: easings.easeInOutQuad
         }
     };
-    var topBar = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 15 L 35 35' }, to: { d: 'M 10 15 L 40 15' } }));
-    var middleBar = useSpring(__assign(__assign({}, animationDefaults), { from: { opacity: 0, scale: 0 }, to: { opacity: 1, scale: 1 } }));
-    var bottomBar = useSpring(__assign(__assign({}, animationDefaults), { from: { d: 'M 15 35 L 35 15' }, to: { d: 'M 10 35 L 40 35' } }));
-    return (_jsxs("svg", __assign({ width: "40", height: "40", viewBox: "0 0 50 50" }, { children: [_jsx(Path, __assign({}, topBar)), _jsx(Path, __assign({ d: 'M 10 25 L 40 25' }, middleBar)), _jsx(Path, __assign({}, bottomBar))] })));
+    const topBar = useSpring({
+        ...animationDefaults,
+        from: { d: 'M 15 15 L 35 35' },
+        to: { d: 'M 10 15 L 40 15' }
+    });
+    const middleBar = useSpring({
+        ...animationDefaults,
+        from: { opacity: 0, scale: 0 },
+        to: { opacity: 1, scale: 1 }
+    });
+    const bottomBar = useSpring({
+        ...animationDefaults,
+        from: { d: 'M 15 35 L 35 15' },
+        to: { d: 'M 10 35 L 40 35' }
+    });
+    return (_jsxs("svg", { width: "40", height: "40", viewBox: "0 0 50 50", children: [_jsx(Path, { ...topBar }), _jsx(Path, { d: 'M 10 25 L 40 25', ...middleBar }), _jsx(Path, { ...bottomBar })] }));
 };
 export default ToggleX;