@learningpool/ui 1.15.5 → 1.16.0

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenu.js

@@ -1,26 +1,15 @@
-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 } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import React from 'react';
 import { Link, ListItemText } from '../../../../index';
 import { FlyoutMenuPaper, FlyoutMenuWrap, FlyoutMenuList, FlyoutMenuButton, FlyoutMenuItem } from './MobileNavigationItemFlyoutMenuStyles';
-var MobileNavigationItemFlyoutMenu = function (props) {
-    var label = props.label, children = props.children, isDrawerOpen = props.isDrawerOpen, anchorEl = props.anchorEl;
-    var _a = React.useState(false), flyoutHovered = _a[0], setFlyoutHovered = _a[1];
-    var open = flyoutHovered || (props === null || props === void 0 ? void 0 : props.open);
-    return (_jsx(FlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setFlyoutHovered(true); }, onMouseLeave: function () { return setFlyoutHovered(false); }, onFocus: function () { return setFlyoutHovered(true); }, onBlur: function () { return setFlyoutHovered(false); } }, { children: _jsx(FlyoutMenuWrap, __assign({ open: open }, { children: _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
+const MobileNavigationItemFlyoutMenu = (props) => {
+    const { label, children, isDrawerOpen, anchorEl } = props;
+    const [flyoutHovered, setFlyoutHovered] = React.useState(false);
+    const open = flyoutHovered || props?.open;
+    return (_jsx(FlyoutMenuPaper, { isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl ?? undefined, onMouseEnter: () => setFlyoutHovered(true), onMouseLeave: () => setFlyoutHovered(false), onFocus: () => setFlyoutHovered(true), onBlur: () => setFlyoutHovered(false), children: _jsx(FlyoutMenuWrap, { open: open, children: _jsx(FlyoutMenuList, { "aria-label": label, open: open, children: children?.map(childItem => (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
                     // @ts-expect-error
-                    , __assign({ 
+                    , { 
                         // @ts-expect-error
-                        component: Link, onClick: childItem.onClick, role: 'link' }, { children: _jsx(ListItemText, { primary: childItem.label }) }), childItem.label) })); }) })) })) })));
+                        component: Link, onClick: childItem.onClick, role: 'link', children: _jsx(ListItemText, { primary: childItem.label }) }, childItem.label) }))) }) }) }));
 };
 export default MobileNavigationItemFlyoutMenu;

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.js

@@ -1,66 +1,165 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 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 = {
+export const DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var FlyoutMenuPaper = styled(Paper, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  width: 200px;\n  z-index: 2;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  width: 200px;\n  z-index: 2;\n"])), 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.anchorEl
-    ? "".concat(props.anchorEl.getBoundingClientRect().top, "px")
-    : 'auto'; });
-export var FlyoutMenuWrap = styled('div', {
-    shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0 8px 8px 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  border-radius: 0 8px 8px 0;\n  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n  opacity: ", ";\n  visibility: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export const FlyoutMenuPaper = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'
+}) `
+  background: transparent none;
+  box-shadow: none;
+  left: ${props => props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px`};
+  perspective: 800px;
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+  position: fixed;
+  /* Check against height of browser should be top or bottom positioned */
+  top: ${props => props.anchorEl
+    ? `${props.anchorEl.getBoundingClientRect().top}px`
+    : 'auto'};
+  width: 200px;
+  z-index: 2;
+`;
+export const FlyoutMenuWrap = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  background-color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#E6EAF0'};
+  color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
+  border-radius: 0 8px 8px 0;
+  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);
+  opacity: ${props => props.open ? 1 : 0};
+  visibility: ${props => props.open ? 'visible' : 'hidden'};
+  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'};
+  transform-origin: left center;
+  transition: ${props => props.open
+    ? `all 250ms ${motion.easeInOut}`
+    : `all 150ms ${motion.easeOut}`};
+`;
+export const FlyoutMenuList = styled(List, {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  padding: ${props => props.theme.spacing(1, 2)};
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+`;
+export const FlyoutMenuHeader = styled(Typography) `
+  font-weight: bold;
+  padding: 12px ${props => props.theme.spacing(2)} 0 ${props => props.theme.spacing(3)};
+`;
+export const FlyoutMenuItem = styled(ListItem) `
+  font-size: 14px;
+  padding: 0;
+  white-space: normal;
+  background: transparent !important;
+`;
+export const FlyoutMenuButton = styled(SSListItemButton, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'isExpanded'
+}) `
+  align-items: flex-start;
+  background-color: transparent;
+  color: ${props => 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); });
-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'; });
-export var FlyoutMenuHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: bold;\n  padding: 12px ", " 0 ", ";\n"], ["\n  font-weight: bold;\n  padding: 12px ", " 0 ", ";\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.spacing(3); });
-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"
-    // 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) {
-    return props.theme.palette.mode === 'dark'
-        ? 'rgba(255, 255, 255, 0.5)'
-        : props.theme.palette.primary.main;
-}, motion.easeInOut, function (props) {
-    return props.theme.palette.mode === 'dark'
-        ? props.theme.palette.primary.dark
-        : '#E6EAF0';
-});
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
+  border-radius: 5px;
+  display: flex;
+  flex-wrap: wrap;
+  text-decoration: none;
+  text-transform: none;
+  transition: all 225ms ${motion.easeInOut} 0;
+  padding: ${props => props.theme.spacing(1, 2)};
+  width: 100%;
+
+  /* Indicator */
+  :before {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? 'rgba(255, 255, 255, 0.5)'
+    : props.theme.palette.primary.main};
+    border-radius: 50px;
+    content: '';
+    height: calc(100% - 10px);
+    opacity: 0;
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    transition: all 180ms ${motion.easeInOut};
+    width: 4px;
+    transform: scale(.95);
+  }
+
+  :hover:before,
+  :focus:before {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  :hover {
+    background-color: rgba(0, 0, 0, .05);
+  }
+
+  :focus {
+    background-color: ${props => props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.dark
+    : '#E6EAF0'};
+  }
+`;
 // 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'
+export const FullHeightFlyoutMenuPaper = styled(Paper, {
+    shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open'
+}) `
+  background: transparent none;
+  box-shadow: none;
+  color: ${props => 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'; });
-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.getContrastText(props.theme.palette.background.paper)};
+  height: 100%;
+  left: ${props => props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px`};
+  perspective: 800px;
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+  position: fixed;
+  top: 0;
+  z-index: 1;
+`;
+export const FullHeightFlyoutMenuWrapper = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'open'
+}) `
+  background-color: ${props => 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; });
-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.background.paper};
+  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);
+  height: 100%;
+  max-width: 300px;
+  min-width: 300px;
+  opacity: ${props => props.open ? 1 : 0};
+  pointer-events: ${props => props.open ? 'auto' : 'none'};
+  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'};
+  transform-origin: left center;
+  transition: ${props => props.open ? `all 150ms ${motion.easeInOut}` : `all 100ms ${motion.easeOut}`};
+  visibility: ${props => props.open ? 'visible' : 'hidden'};
+  width: ${props => props.open ? '300' : 0};
+`;
+export const FlyoutNotchMask = styled('div') `
+  background-color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; });
-export var NotchMini = styled(NotchMiniSVG)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  fill: ", ";\n  left: -12px;\n  pointer-events: none;\n  position: absolute;\n"], ["\n  fill: ", ";\n  left: -12px;\n  pointer-events: none;\n  position: absolute;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : '#E6EAF0'};
+  content: '';
+  display: block;
+  height: 80px;
+  left: -40px;
+  position: absolute;
+  top: 65px;
+  width: 80px;
+  z-index: -1;
+`;
+export const NotchMini = styled(NotchMiniSVG) `
+  fill: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+    : '#E6EAF0'};
+  left: -12px;
+  pointer-events: none;
+  position: absolute;
+`;

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.js

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

package/components/navigation/MobileNavigation/MobileNavigationMotion.js

@@ -1,4 +1,4 @@
-export var motionParent = {
+export const motionParent = {
     open: {
         transition: { staggerChildren: 0.07, delayChildren: 0 }
     },
@@ -6,7 +6,7 @@ export var motionParent = {
         transition: { staggerChildren: 0.05, staggerDirection: -1 }
     }
 };
-export var motionFadeIn = {
+export const motionFadeIn = {
     open: {
         opacity: 1
     },
@@ -14,7 +14,7 @@ export var motionFadeIn = {
         opacity: 0
     }
 };
-export var motionFadeInUp = {
+export const motionFadeInUp = {
     open: {
         y: 0,
         opacity: 1,
@@ -30,14 +30,14 @@ export var motionFadeInUp = {
         }
     }
 };
-export var motionWhileHover = {
+export const motionWhileHover = {
     scale: 1.02
 };
-export var motionWhileTap = {
+export const motionWhileTap = {
     scale: 0.95
 };
 // Old ones...
-export var variantsLogo = {
+export const variantsLogo = {
     open: {
         opacity: 1
     },
@@ -45,7 +45,7 @@ export var variantsLogo = {
         opacity: 0
     }
 };
-export var variantsUl = {
+export const variantsUl = {
     open: {
         transition: { staggerChildren: 0.07, delayChildren: 0.2 }
     },
@@ -53,7 +53,7 @@ export var variantsUl = {
         transition: { staggerChildren: 0.05, staggerDirection: -1 }
     }
 };
-export var variantsLi = {
+export const variantsLi = {
     open: {
         y: 0,
         opacity: 1,
@@ -69,7 +69,7 @@ export var variantsLi = {
         }
     }
 };
-export var variantsSecondaryUl = {
+export const variantsSecondaryUl = {
     open: {
         transition: { staggerChildren: 0.05, delayChildren: 0.5 }
     },
@@ -77,7 +77,7 @@ export var variantsSecondaryUl = {
         transition: { staggerChildren: 0.05, staggerDirection: -1 }
     }
 };
-export var variantsSecondaryLi = {
+export const variantsSecondaryLi = {
     open: {
         y: 0,
         opacity: 1,
@@ -93,7 +93,7 @@ export var variantsSecondaryLi = {
         }
     }
 };
-export var variantsDivider = {
+export const variantsDivider = {
     open: {
         scaleX: 1,
         opacity: 1,

package/components/navigation/MobileNavigation/MobileNavigationNotchIndicator.js

@@ -1,19 +1,15 @@
-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 } from '@react-spring/web';
 import { StyledNotchShadow, StyledNotchShadowMask, StyledNotchSVG } from './MobileNavigationStyles';
-var NotchIndicator = function (props) {
-    var styles = useSpring(__assign({}, props));
-    return (_jsxs(animated.div, __assign({ style: __assign({ bottom: '58px', position: 'fixed', zIndex: '-1' }, styles) }, { children: [_jsx(StyledNotchShadow, {}), _jsx(StyledNotchSVG, __assign({ viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx(animated.path, { d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) })), _jsx(StyledNotchShadowMask, {})] })));
+const NotchIndicator = (props) => {
+    const styles = useSpring({
+        ...props
+    });
+    return (_jsxs(animated.div, { style: {
+            bottom: '58px',
+            position: 'fixed',
+            zIndex: '-1',
+            ...styles
+        }, children: [_jsx(StyledNotchShadow, {}), _jsx(StyledNotchSVG, { viewBox: "0 0 22 85", xmlns: "http://www.w3.org/2000/svg", children: _jsx(animated.path, { d: "M0 0V85V76.0381C0.774 69.7533 4.9101 64.7829 7.5488 63.5975C7.668 63.5518 7.7867 63.5052 7.9049 63.4576C16.1679 60.1279 22 52.035 22 42.5799C22 33.1612 16.2126 25.0941 8 21.7408C7.8723 21.6887 7.7441 21.6377 7.6153 21.5879C4.8325 20.3142 0.4173 14.8748 0 8.13255V0Z" }) }), _jsx(StyledNotchShadowMask, {})] }));
 };
 export default NotchIndicator;