@learningpool/ui 1.6.3 → 1.6.6

package/{dist/components → components}/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.js

@@ -2,7 +2,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     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 { List, ListItem, ListItemButton as SSListItemButton, Paper, Typography, ListItemText } from '../../../../index';
 import { styled } from '@mui/material/styles';
 import { NotchMiniSVG } from '../../../../assets/Images';
 export var DRAWER_WIDTH = {
@@ -11,7 +11,7 @@ export var DRAWER_WIDTH = {
 };
 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  min-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  min-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
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  min-width: 200px;\n  z-index: 2;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  /* Check against height of browser should be top or bottom positioned */\n  top: ", ";\n  min-width: 200px;\n  z-index: 2;\n"])), function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.anchorEl
     ? "".concat(props.anchorEl.getBoundingClientRect().top, "px")
     : 'auto'; });
 export var FlyoutMenuWrap = styled('div', {
@@ -26,11 +26,12 @@ export var FlyoutMenuWrap = styled('div', {
 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 FlyoutMenuHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-weight: bold;\n  padding: 12px 0 0;\n  padding-inline-end: ", ";\n  padding-inline-start: ", ";\n  text-align: ", ";\n"], ["\n  font-weight: bold;\n  padding: 12px 0 0;\n  padding-inline-end: ", ";\n  padding-inline-start: ", ";\n  text-align: ", ";\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.spacing(3); }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
+export var FlyoutMenuItem = styled(ListItem)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  background: transparent !important;\n  font-size: 14px;\n  padding: 0;\n  white-space: normal;\n"], ["\n  background: transparent !important;\n  font-size: 14px;\n  padding: 0;\n  white-space: normal;\n"])));
+export var FlyoutMenuItemText = styled(ListItemText)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  text-align: ", ";\n"], ["\n  text-align: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
 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\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 5px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"
+})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"], ["\n  align-items: flex-start;\n  background-color: transparent;\n  color: ", ";\n  border-radius: 5px;\n  display: flex;\n  flex-wrap: wrap;\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", ";\n  padding: ", ";\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: ", ";\n    right: ", ";\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: rgba(0, 0, 0, .05);\n  }\n\n  :focus {\n    background-color: ", ";\n  }\n"
     // FullHeight
 ])), function (props) {
     return props.theme.palette.mode === 'dark'
@@ -40,7 +41,7 @@ export var FlyoutMenuButton = styled(SSListItemButton, {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.5)'
         : props.theme.palette.primary.main;
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
+}, function (props) { return props.theme.direction === 'ltr' ? '5px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '5px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.dark
         : '#E6EAF0';
@@ -48,22 +49,22 @@ export var FlyoutMenuButton = styled(SSListItemButton, {
 // FullHeight
 export var FullHeightFlyoutMenuPaper = styled(Paper, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'open'; }
-})(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"], ["\n  background: transparent none;\n  box-shadow: none;\n  color: ", ";\n  height: 100%;\n  left: ", ";\n  right: ", ";\n  perspective: 800px;\n  pointer-events: ", ";\n  position: fixed;\n  top: 0;\n  transition: ", ";\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px"); }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
+    : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, function (props) { return props.theme.direction === 'ltr' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? props.isDrawerOpen ? "".concat(DRAWER_WIDTH.Expanded, "px") : "".concat(DRAWER_WIDTH.Collapsed - 3, "px") : 'auto'; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open
     ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
     : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); });
 export var FullHeightFlyoutMenuWrapper = styled('div', {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background-color: ", ";\n  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"], ["\n  background-color: ", ";\n  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  box-shadow: ", " 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: ", " 0 15px 0 rgb(0 0 0 / 10%);\n  height: 100%;\n  max-width: 300px;\n  min-width: 300px;\n  opacity: ", ";\n  pointer-events: ", ";\n  transform: ", ";\n  transform-origin: left center;\n  transition: ", ";\n  visibility: ", ";\n  width: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
+    : props.theme.palette.background.paper; }, function (props) { return props.theme.direction === 'ltr' ? '35px' : '-35px'; }, function (props) { return props.open ? 1 : 0; }, function (props) { return props.open ? 'auto' : 'none'; }, function (props) { return props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'; }, function (props) { return props.open
     ? "all\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut)
     : "all\n      ".concat(props.theme.transitions.duration.leavingScreen, "ms\n      ").concat(props.theme.transitions.easing.easeIn); }, function (props) { return props.open ? 'visible' : 'hidden'; }, function (props) { return props.open ? '300' : 0; });
-export var FlyoutNotchMask = styled('div')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: -40px;\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"], ["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: -40px;\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var FlyoutNotchMask = styled('div')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  content: '';\n  display: block;\n  height: 80px;\n  left: ", ";\n  right: ", ";\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: ", ";\n  right: ", ";\n  position: absolute;\n  top: 65px;\n  width: 80px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; });
-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'; }, function (props) { return props.theme.direction === 'ltr' ? '-40px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '-40px' : 'auto'; });
+export var NotchMini = styled(NotchMiniSVG)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  fill: ", ";\n  left: ", ";\n  right: ", ";\n  pointer-events: none;\n  position: absolute;\n"], ["\n  fill: ", ";\n  left: ", ";\n  right: ", ";\n  pointer-events: none;\n  position: absolute;\n"])), function (props) { return 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'; }, function (props) { return props.theme.direction === 'ltr' ? '-12px' : 0; }, function (props) { return props.theme.direction === 'rtl' ? '-12px' : 0; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/{dist/components → components}/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js

@@ -20,7 +20,7 @@ export var ListItem = styled(SSListItem, {
     : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
 export var ListItemButton = styled(SSListItemButton, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"])), function (props) {
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\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\n    left: ", ";\n    right: ", ";\n\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0;\n  padding-inline-end: ", ";\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\n    left: ", ";\n    right: ", ";\n\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"])), function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
         : props.theme.palette.background.paper;
@@ -34,7 +34,7 @@ export var ListItemButton = styled(SSListItemButton, {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.5)'
         : props.theme.palette.primary.main;
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
+}, function (props) { return props.theme.direction === 'ltr' ? '3px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '3px' : 'auto'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
         : props.theme.palette.background.paper;
@@ -58,7 +58,7 @@ export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateOb
     : 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\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
+})(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"], ["\n  max-width: 210px;\n  opacity: ", ";\n  padding: 0.5rem;\n  text-align: ", ";\n  transition: opacity\n              ", "ms\n              ", "\n              ", "s !important;\n  white-space: normal;\n  width: auto;\n"])), function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
 export var StyledExpandLess = styled(ArrowRight, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
 })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              200ms !important;\n"], ["\n  align-self: center;\n  font-size: 1.25rem;\n  left: ", ";\n  margin-right: ", ";\n  opacity: 1;\n  position: relative;\n  transition: opacity\n              ", "ms\n              ", "\n              200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });

package/{dist/components → components}/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts

@@ -3,6 +3,9 @@ export declare const DRAWER_WIDTH: {
     Collapsed: number;
     Expanded: number;
 };
+export declare const NOTCH: {
+    Width: number;
+};
 export declare const DrawerHeader: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
     className?: string | undefined;
     style?: {
@@ -1108,7 +1111,9 @@ export declare const DrawerToggle: import("@emotion/styled").StyledComponent<{
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "size" | "edge"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    isDrawerOpen?: any;
+}, {}, {}>;
 export declare const DrawerToggleHitboxContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledAside: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
 export declare const StyledNav: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/{dist/components → components}/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -14,9 +14,12 @@ var ICON = {
     Height: 40,
     Width: 57
 };
+export var 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: ", "\n      250ms;\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  /* Testing secondary nav fix ups */\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex: 1 auto;\n  justify-content: flex-start;\n  overflow: hidden;\n  min-height: 56px !important;\n  padding: ", " 10px 0;\n  transition: ", "\n      250ms;\n\n  width: ", ";\n\n  @media (min-width: ", ") {\n    min-height: 64px !important;\n    width: ", ";\n  };\n\n  .MuiListItemIcon-root {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root {\n    align-items: center !important;\n    color: ", ";\n    display: flex;\n    min-height: ", "px;\n    max-height: ", ";\n    text-decoration: none;\n    text-dransform: none;\n    transition: max-height\n                ", "ms\n                ", ";\n    padding: 0;\n    width: 100%;\n\n    [theme.breakpoints.up('sm')] {\n      max-height: ", ";\n    }\n  }\n\n  .MuiListItemText-root .MuiTypography-root {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.isDrawerOpen
     ? "width\n      ".concat(props.theme.transitions.duration.enteringScreen, "ms\n      ").concat(props.theme.transitions.easing.easeOut, "\n      0")
@@ -25,7 +28,9 @@ export var DrawerHeader = styled(animated.div, {
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
 }, ICON.Height + 8, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '200px' : "".concat(ICON.Height + 8, "px"); });
-export var DrawerToggle = styled(IconButton)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transition: all\n              ", "ms\n              ", ";\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transition: all\n              ", "ms\n              ", ";\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
+export var 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  transition: all\n              ", "ms\n              ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 5.5px)) rotate(", ");\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  transition: all\n              ", "ms\n              ", ";\n  left: ", ";\n  right: ", ";\n  transform: translate(0, calc(50% - 5.5px)) rotate(", ");\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.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.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
 export var DrawerToggleHitboxContent = styled('span')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"], ["\n  background-color: ", ";\n  border-radius: 50%;\n  box-shadow: 5px 0 15px 0 rgb(0 0 0 / 10%);\n  box-sizing: content-box;\n  height: 1.75rem;\n  padding: ", ";\n  width: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; }, function (props) { return props.theme.spacing(0.5); });
@@ -63,28 +68,22 @@ export var StyledDivider = styled('div', {
 }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var DrawerShadow = styled(Box, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left\n              ", "ms\n              ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"], ["\n  background: rgba(0,0,0,0.125);\n  content: '';\n  display: block;\n  filter: blur(13px);\n  height: 100%;\n  left: ", ";\n  position: fixed;\n  top: 0;\n  transition: left\n              ", "ms\n              ", ";\n  visibility: visible;\n  width: 40px;\n\n  @media (min-width: ", ") {\n    left: ", ";\n  }\n"])), function (props) { return props.isDrawerOpen
-    ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
-    : "".concat(DRAWER_WIDTH.Collapsed - 41, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) {
-    return props.isDrawerOpen
-        ? "".concat(DRAWER_WIDTH.Expanded - 38, "px")
-        : "".concat(DRAWER_WIDTH.Collapsed - 33, "px");
-});
+})(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: -", ";\n  position: relative;\n  transition: width\n              ", "ms\n              ", ";\n  width: 100%;\n  z-index: 9;\n"], ["\n  display: flex;\n  justify-content: flex-end;\n  height: auto;\n  margin-top: -", ";\n  position: relative;\n  transition: width\n              ", "ms\n              ", ";\n  width: 100%;\n  z-index: 9;\n"])), function (props) { return props.theme.spacing(0.5); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
 export var NotchBackground = styled(Box)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"], ["\n  background-color: ", ";\n  flex: 1;\n  height: auto;\n  width: auto;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
     : props.theme.palette.background.paper; });
-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  width: 45px;\n"], ["\n  background-color: ", ";\n  clip-path: url(\"#notch\");\n  display: flex;\n  height: 85px;\n  width: 45px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+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 props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
-export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 = __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 props.theme.palette.mode === 'dark'
+    : props.theme.palette.background.paper; }, 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 props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
+    : props.theme.palette.background.paper; }, 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\n              ", "ms\n              ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\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) {
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\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\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\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\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\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 props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
+}, function (props) { return props.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;

package/{dist/components → components}/stream/AppSwitcher/AppSwitcher.js

@@ -69,7 +69,7 @@ var AppSwitcher = function (props) {
     var _f = useState(null), activeApplication = _f[0], setActiveApplication = _f[1];
     // Stores any org filter text (on the second tab).
     var _g = useState(''), searchString = _g[0], setSearchString = _g[1];
-    var messages = __assign(__assign({}, localization), defaultMessages);
+    var messages = __assign(__assign({}, defaultMessages), localization);
     var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
     /**
      * Handles closing of the application dialog.

package/{dist/components → components}/stream/AppSwitcher/AppSwitcherStyles.js

@@ -3,13 +3,15 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { styled } from '@mui/material/styles';
-export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 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  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: 57px;\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 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  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: 57px;\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: 450px;\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; });
+    : '#E6EAF0'; }, function (props) { return props.theme.direction === 'ltr'
+    ? '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%)'
+    : '-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%)'; }, function (props) { return props.theme.direction === 'ltr' ? '57px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '57px' : 'auto'; });
 export var List = styled('ul')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
 export var MenuContent = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"], ["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"])));
 export var SearchContent = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"])));
-export var AppListHeader = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-right: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-right: 0.5rem;\n    width: 24px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var AppListHeader = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-size: 1.2rem;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : '#555'; });
 export var AppListItem = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  height: 104px;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  height: 104px;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])), 100 / 3);
@@ -29,11 +31,11 @@ export var BackButton = styled('button')(templateObject_9 || (templateObject_9 =
     ? 'rgba(255, 255, 255, 0.1)'
     : 'rgba(0, 0, 0, 0.1)'; });
 export var SearchBox = styled('input')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"], ["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"])));
-export var AppOrganisationCount = styled('span')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 48%;\n  left: 54%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 49%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n  z-index: 3;\n"], ["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 48%;\n  left: 54%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 49%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n  z-index: 3;\n"])));
-export var SelectedOrganisation = styled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & span {\n    font-size: 1.2rem;\n    font-weight: normal;\n    margin: 0 0 0 .5rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & span {\n    font-size: 1.2rem;\n    font-weight: normal;\n    margin: 0 0 0 .5rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var AppOrganisationCount = styled('span')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 48%;\n  left: ", ";\n  right: ", ";\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 49%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n  z-index: 3;\n"], ["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 48%;\n  left: ", ";\n  right: ", ";\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 49%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n  z-index: 3;\n"])), function (props) { return props.theme.direction === 'ltr' ? '54%' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '4%' : 'auto'; });
+export var SelectedOrganisation = styled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & span {\n    font-size: 1.2rem;\n    font-weight: normal;\n    margin: 0;\n    margin-inline-start: 0.5rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & span {\n    font-size: 1.2rem;\n    font-weight: normal;\n    margin: 0;\n    margin-inline-start: 0.5rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : '#555'; });
-export var StyledSVG = styled('svg')(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  user-select: none;\n  width: 1em;\n"], ["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  user-select: none;\n  width: 1em;\n"])));
+export var StyledSVG = styled('svg')(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  transform: rotateY(", ");\n  user-select: none;\n  width: 1em;\n"], ["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  transform: rotateY(", ");\n  user-select: none;\n  width: 1em;\n"])), function (props) { return props.theme.direction === 'ltr' ? '0deg' : '180deg'; });
 export var OrganisationList = styled('div')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"], ["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"])));
 export var OrganisationLink = styled('a')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: ", ";\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #555;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: ", ";\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #555;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText

package/lang/en-us.d.ts

@@ -0,0 +1,15 @@
+export const defaultMessages: {
+    'app-switcher': string;
+    'your-apps': string;
+    'back-to': string;
+    'select-an-organisation': string;
+    search: string;
+    'site-navigation': string;
+    'open-navigation': string;
+    'close-navigation': string;
+    'site-logo': string;
+    greeting: string;
+    logout: string;
+    'view-profile': string;
+    'edit-profile': string;
+};

package/lang/en-us.js

@@ -0,0 +1,18 @@
+export var defaultMessages = {
+    // App Switcher
+    'app-switcher': 'App Switcher',
+    'your-apps': 'Your Stream suite apps',
+    'back-to': 'Back',
+    'select-an-organisation': 'Select an organisation',
+    search: 'Search',
+    // Navigation
+    'site-navigation': 'Site navigation',
+    'open-navigation': 'Open navigation',
+    'close-navigation': 'Close navigation',
+    'site-logo': 'Site logo',
+    // Avatar Panel
+    greeting: 'Hi',
+    logout: 'Logout',
+    'view-profile': 'View Profile',
+    'edit-profile': 'Edit Profile'
+};

package/package.json

@@ -9,10 +9,10 @@
     "components",
     "ui"
   ],
-  "version": "1.6.3",
+  "version": "1.6.6",
   "private": false,
-  "main": "dist/index.js",
-  "module": "dist/index.js",
+  "main": "index.js",
+  "module": "index.js",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
@@ -21,9 +21,6 @@
     "@mui/material": "^5.8.5",
     "@mui/x-data-grid": "^5.12.3",
     "@react-spring/web": "^9.6.1",
-    "@testing-library/jest-dom": "^5.16.1",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.4.0",
     "@types/node": "^16.11.45",
     "@types/react": "^17.0.48",
@@ -34,74 +31,10 @@
     "focus-trap-react": "^8.11.0",
     "jwt-decode": "^3.1.2",
     "query-string": "^7.1.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "5.0.1",
     "tss-react": "^3.3.6",
     "typescript": "^4.6.2",
     "web-vitals": "^2.1.4"
   },
-  "scripts": {
-    "analyze:build": "source-map-explorer 'build/static/js/*.js'",
-    "analyze:module": "source-map-explorer 'dist/*.js'",
-    "build": "build-storybook",
-    "build:module": "rm -rf dist && tsc && npm run generate:package",
-    "generate:package": "node ./merge.js",
-    "lint": "eslint --ext .tsx ./src",
-    "lint:fix": "eslint --ext .tsx ./src --fix",
-    "start": "start-storybook -p 6006",
-    "start:run-tests": "npm run test:generate-output && npm run start",
-    "test": "jest",
-    "test:u": "jest --updateSnapshot && npm run lint:fix",
-    "test:update-snapshot": "test:u",
-    "test:generate-output": "jest --json --outputFile=.jest-test-results.json"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "devDependencies": {
-    "@babel/cli": "7.20.7",
-    "@babel/core": "7.20.12",
-    "@babel/preset-env": "7.20.2",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@semantic-release/changelog": "^6.0.2",
-    "@semantic-release/git": "^10.0.1",
-    "@semantic-release/github": "^8.0.7",
-    "@semantic-release/npm": "^9.0.2",
-    "@semantic-release/release-notes-generator": "^10.0.3",
-    "@storybook/addon-a11y": "6.5.16",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-jest": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addons": "6.5.16",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/node-logger": "6.5.16",
-    "@storybook/preset-create-react-app": "4.1.2",
-    "@storybook/react": "6.5.16",
-    "@storybook/theming": "6.5.16",
-    "babel-preset-minify": "0.5.2",
-    "eslint-config-standard": "17.0.0",
-    "eslint-plugin-node": "11.1.0",
-    "eslint-plugin-promise": "6.1.1",
-    "semantic-release": "^19.0.5",
-    "source-map-explorer": "2.5.3",
-    "source-map-loader": "3.0.2",
-    "storybook-rtl-addon": "0.3.3",
-    "ts-node": "10.9.1",
-    "webpack": "5.75.0"
-  },
   "publishConfig": {
     "access": "public"
   }

package/{dist/types → types}/components/navigation/VerticalNavigationAvatar.d.ts

@@ -7,6 +7,7 @@ export interface IAvatarPanelProps {
     avatarName: string;
     editProfileText?: string;
     isAvatarOpen: boolean;
+    localization?: any;
     avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;