@learningpool/ui 1.6.0-beta.9 → 1.6.1

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

@@ -5,6 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import Drawer from '@mui/material/Drawer';
 import { Box, IconButton } from '../../../index';
 import { styled } from '@mui/material/styles';
+import { animated } from '@react-spring/web';
 export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
@@ -13,7 +14,7 @@ var ICON = {
     Height: 40,
     Width: 57
 };
-export var DrawerHeader = styled('div', {
+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'
     ? props.theme.palette.primary.main
@@ -24,7 +25,7 @@ export var DrawerHeader = styled('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  transform: translate(22px, calc(50% - 5.5px));\n  transition: all\n              ", "ms\n              ", ";\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"], ["\n  background: transparent;\n  height: 44px;\n  padding: 0 ", " !important;\n  position: absolute;\n  transform: translate(22px, calc(50% - 5.5px));\n  transition: all\n              ", "ms\n              ", ";\n  width: 44px;\n  z-index: 10;\n\n  @media (min-width: ", ") {\n    padding: 0 ", " !important;\n  }\n"])), function (props) { return props.theme.spacing(2); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return props.theme.spacing(2.5); });
+export var 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 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); });
@@ -81,9 +82,9 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
     : props.theme.palette.background.paper; });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
+})(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) {
     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.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
 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/{components → dist/components}/stream/AppSwitcher/AppSwitcher.d.ts

@@ -1,14 +1,6 @@
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-export interface IApplication {
-    applicationId: number;
-    applicationName: string;
-    shortName: string;
-    internalName: string;
-    customName?: string;
-    url: string;
-    children?: object[];
-}
+import { IApplication } from '../../../types';
 interface IProps {
     userId?: string;
     layout?: string;

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

@@ -140,7 +140,7 @@ var AppSwitcher = function (props) {
         return __generator(this, function (_a) {
             switch (_a.label) {
                 case 0:
-                    if (!(typeof token === 'string' && token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 3];
+                    if (!(token && typeof token === 'string' && token !== window.localStorage.getItem(Constants.LocalStorageKey.Token))) return [3 /*break*/, 3];
                     if (!userId) {
                         decodedToken = jwtDecode(token);
                         userId = decodedToken[Constants.HomeAttributes.UserId];
@@ -190,11 +190,11 @@ var AppSwitcher = function (props) {
                         userApplications = [];
                         if (!token) {
                             parsedQueryString = queryString.parse(window.location.search);
-                            if (parsedQueryString.accessToken && typeof parsedQueryString.accessToken === 'string') {
-                                token = parsedQueryString.accessToken;
+                            if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
+                                token = parsedQueryString.token;
                             }
                         }
-                        if (!!props.applications) return [3 /*break*/, 2];
+                        if (!(!props.applications || props.applications.length === 0)) return [3 /*break*/, 2];
                         return [4 /*yield*/, getApplicationsForUser()];
                     case 1:
                         applicationInstances = _a.sent();
@@ -272,7 +272,7 @@ var AppSwitcher = function (props) {
     return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
             display: isAppSwitcherOpen ? 'block' : 'none',
             left: isDrawerOpen ? DRAWER_WIDTH.Expanded : DRAWER_WIDTH.Collapsed - 3
-        }, role: 'dialog', onKeyDown: handleKeyDown }, { children: [activeTab === Constants.Tabs.ListApplications
+        }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown }, { children: [activeTab === Constants.Tabs.ListApplications
                 ? (_jsxs("div", { children: [_jsxs(AppListHeader, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] }), _jsx(MenuContent, __assign({ style: {
                                 display: activeTab === 1 ? 'flex' : 'none'
                             } }, { children: applications.map(function (_a) {
@@ -285,7 +285,7 @@ var AppSwitcher = function (props) {
                     } }, { children: [_jsxs(BackButton, __assign({ onClick: function () {
                                 setActiveTab(Constants.Tabs.ListApplications);
                                 setSearchString('');
-                            } }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("h6", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search }), _jsx(OrganisationList, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank" }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) })] })))
+                            } }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("span", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search }), _jsx(OrganisationList, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank" }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) })] })))
                 : null] })));
 };
 AppSwitcher.propTypes = {

package/{components → dist/components}/stream/AppSwitcher/AppSwitcherStyles.d.ts

@@ -3,12 +3,12 @@ export declare const AppSwitcherPanel: import("@emotion/styled").StyledComponent
 export declare const List: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
 export declare const MenuContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const SearchContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
+export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AppListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const AppLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
+export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const BackButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
 export declare const SearchBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
-export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
 export declare const AppOrganisationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const SelectedOrganisation: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;

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

@@ -3,41 +3,41 @@ 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  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\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  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\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: 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'
     ? props.theme.palette.primary.dark
     : '#E6EAF0'; });
 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('p')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 0.5rem 1.25rem 0;\n  text-transform: uppercase;\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-weight: normal;\n  justify-content: flex-start;\n  padding: 0.5rem 1.25rem 0;\n  text-transform: uppercase;\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-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'
     ? props.theme.palette.primary.contrastText
-    : '#757575'; });
-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  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  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])), 100 / 3);
-export var AppLink = styled('a')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  transition: all 200ms ease;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: ", ";\n    text-decoration: none;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n\n  &:hover svg,\n  &:focus svg {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  transition: all 200ms ease;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: ", ";\n    text-decoration: none;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n\n  &:hover svg,\n  &:focus svg {\n    background-color: ", ";\n    border-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : '#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);
+export var AppLink = styled('a')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: absolute;\n  text-align: center;\n  text-decoration: none;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: ", ";\n    text-decoration: none;\n    z-index: 2;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n    z-index: 2;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n\n  &:hover svg,\n  &:focus svg {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  // Show full app name on hover\n  &:hover div,\n  &:focus div {\n    white-space: normal;\n    word-wrap: break-word;\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: absolute;\n  text-align: center;\n  text-decoration: none;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: ", ";\n    text-decoration: none;\n    z-index: 2;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n    z-index: 2;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n\n  &:hover svg,\n  &:focus svg {\n    background-color: ", ";\n    border-color: ", ";\n  }\n\n  // Show full app name on hover\n  &:hover div,\n  &:focus div {\n    white-space: normal;\n    word-wrap: break-word;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(22, 92, 141, 1)'
     : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(22, 92, 141, 1)'
     : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(22, 92, 141, 1)'
     : '#ebf2fc'; });
-export var BackButton = styled('button')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var AppName = styled('div')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 90px;\n"], ["\n  color: ", ";\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 90px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : '#757575'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#555'; });
+export var BackButton = styled('button')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: ", ";\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    ? props.theme.palette.primary.contrastText
+    : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(255, 255, 255, 0.1)'
     : 'rgba(0, 0, 0, 0.1)'; });
-export var SearchBox = styled('input')(templateObject_9 || (templateObject_9 = __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 AppName = styled('p')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: ", ";\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  white-space: nowrap;\n"], ["\n  color: ", ";\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  white-space: nowrap;\n"])), function (props) { return props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : '#757575'; });
-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: 50px;\n  left: 50%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 43%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  z-index: 1;\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: 50px;\n  left: 50%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 43%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  z-index: 1;\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  text-transform: uppercase;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & h6 {\n    font-size: 1.2rem;\n    font-weight: 600;\n    margin: 0 0 0 1rem;\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  text-transform: uppercase;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & h6 {\n    font-size: 1.2rem;\n    font-weight: 600;\n    margin: 0 0 0 1rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+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'
     ? props.theme.palette.primary.contrastText
-    : '#757575'; });
+    : '#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 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: #777;\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: #777;\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'
+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
-    : '#757575'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'rgba(255, 255, 255, 0.1)'
     : 'rgba(0, 0, 0, 0.1)'; });
 export var StyledLogoSVG = styled('svg')(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  background-color: ", ";\n  border: thin solid ", ";\n  position: relative;\n  z-index: 1;\n"], ["\n  background-color: ", ";\n  border: thin solid ", ";\n  position: relative;\n  z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'

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

@@ -19,8 +19,8 @@ export var Constants = Object.freeze({
 });
 export var applications = [
     { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
-    { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
-    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
+    { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
+    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
     { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 2', url: 'https://learningpool.com' },
     { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: '', url: 'https://learningpool.com' },
     { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', url: 'https://learningpool.com' }

package/{index.d.ts → dist/index.d.ts}

@@ -128,5 +128,6 @@ export { default as List } from './components/datadisplay/List/List';
 export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
+export { default as Header } from './components/landmarks/Header/Header';
 export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation';
 export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/{index.js → dist/index.js}

@@ -140,5 +140,6 @@ export { default as Tooltip } from './components/datadisplay/Tooltip/Tooltip';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 // Stream Suite components
+export { default as Header } from './components/landmarks/Header/Header';
 export { default as MobileNavigation } from './components/navigation/MobileNavigation/MobileNavigation';
 export { default as VerticalNavigation } from './components/navigation/VerticalNavigation/VerticalNavigation';

package/dist/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@learningpool/ui",
+  "author": "Learning Pool",
+  "description": "UI library for use on modern Learning Pool projects, built on top of MUI.",
+  "license": "MIT",
+  "keywords": [
+    "learning-pool",
+    "react",
+    "components",
+    "ui"
+  ],
+  "version": "1.0.0",
+  "private": false,
+  "main": "index.js",
+  "module": "index.js",
+  "dependencies": {
+    "@emotion/react": "^11.7.1",
+    "@emotion/styled": "^11.6.0",
+    "@learningpool/design-tokens": "^1.1.0-beta.7",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.5",
+    "@mui/x-data-grid": "^5.12.3",
+    "@react-spring/web": "^9.6.1",
+    "@types/jest": "^27.4.0",
+    "@types/node": "^16.11.45",
+    "@types/react": "^17.0.48",
+    "@types/react-dom": "^17.0.18",
+    "@typescript-eslint/parser": "^5.31.0",
+    "anysort": "^2.0.0",
+    "eslint-plugin-n": "^15.2.4",
+    "focus-trap-react": "^8.11.0",
+    "jwt-decode": "^3.1.2",
+    "query-string": "^7.1.1",
+    "tss-react": "^3.3.6",
+    "typescript": "^4.6.2",
+    "web-vitals": "^2.1.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/dist/types/components/navigation/VerticalNavigation.d.ts

@@ -0,0 +1,49 @@
+/// <reference types="react" />
+import { IApplication } from '../stream/AppSwitcher';
+import { IAvatarMenuItemProps } from './VerticalNavigationAvatar';
+export interface IVerticalNavigationItemProps {
+    label: string;
+    icon?: JSX.Element;
+    onClick?: any;
+    isActive?: boolean;
+    children?: IVerticalNavigationItemProps[];
+    isDrawerOpen?: boolean;
+    index?: number;
+    isSecondary?: boolean;
+    hasFlyout?: boolean;
+    fullHeightFlyout?: boolean;
+    content?: JSX.Element;
+    style?: any;
+    open?: boolean;
+    hasCustomContent?: boolean;
+}
+export interface IVerticalNavigationProps {
+    logo?: string;
+    logoText?: string;
+    logoOnClick?: any;
+    items?: IVerticalNavigationItemProps[];
+    secondaryItems?: IVerticalNavigationItemProps[];
+    hasStreamHome?: boolean;
+    streamHomeAccessToken?: string;
+    streamHomeBaseUrl?: string;
+    streamHomeApiKey?: string;
+    streamHomeApplications?: IApplication[];
+    avatarName?: string;
+    isDrawerOpen?: boolean;
+    isPersistent?: boolean;
+    setIsPersistent?: any;
+    appRootID?: string;
+    hasAvatar?: boolean;
+    avatarPanelLogoutString?: string;
+    avatarPanelOnClickSwitchDirection?: any;
+    avatarPanelOnClickLogout?: any;
+    avatarPanelOnClickViewProfile?: any;
+    avatarPanelViewProfileString?: string;
+    avatarPanelOnClickEditProfile?: any;
+    avatarPanelEditProfileString?: string;
+    avatarPanelMenuItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelOnClickMainAction?: any;
+    avatarPanelMainActionString?: string;
+    avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
+    avatarPanelFootnote?: any;
+}

package/dist/types/components/navigation/VerticalNavigation.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,4 +1,3 @@
-import React from 'react';
 export interface IAvatarMenuItemProps {
     label: string;
     icon: any;
@@ -7,7 +6,8 @@ export interface IAvatarMenuItemProps {
 export interface IAvatarPanelProps {
     avatarName: string;
     editProfileText?: string;
-    logoutText?: string;
+    isAvatarOpen: boolean;
+    avatarPanelLogoutString?: string;
     avatarPanelOnClickSwitchDirection?: any;
     avatarPanelOnClickLogout?: any;
     avatarPanelOnClickViewProfile?: any;
@@ -19,6 +19,5 @@ export interface IAvatarPanelProps {
     avatarPanelMainActionString?: string;
     avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
     avatarPanelInvertNavString?: string;
+    avatarPanelFootnote?: any;
 }
-declare const AvatarPanel: (props: IAvatarPanelProps) => React.ReactElement;
-export default AvatarPanel;

package/dist/types/components/navigation/VerticalNavigationAvatar.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/stream/AppSwitcher.d.ts

@@ -0,0 +1,9 @@
+export interface IApplication {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName?: string;
+    url: string;
+    children?: object[];
+}

package/dist/types/components/stream/AppSwitcher.js

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,3 @@
+export type { IVerticalNavigationItemProps, IVerticalNavigationProps } from './components/navigation/VerticalNavigation';
+export type { IAvatarMenuItemProps, IAvatarPanelProps } from './components/navigation/VerticalNavigationAvatar';
+export type { IApplication } from './components/stream/AppSwitcher';

package/dist/types/index.js

@@ -0,0 +1,3 @@
+// https://www.typescriptlang.org/play#example/types-vs-interfaces
+// https://stackoverflow.com/questions/56018167/typescript-does-not-copy-d-ts-files-to-build
+export {};

package/{utils → dist/utils}/constants.d.ts

@@ -4,3 +4,4 @@ export declare const MOBILE_NAV_PANEL_TYPES: {
     SEARCH: string;
     AVATAR: string;
 };
+export declare const DEFAULT_MAX_CHARACTERS_PER_LINE = 50;

package/dist/utils/constants.js

@@ -0,0 +1,9 @@
+export var DEFAULT_REACT_APP_ID = 'root';
+export var MOBILE_NAV_PANEL_TYPES = {
+    DRAWER: 'drawer',
+    SEARCH: 'search',
+    AVATAR: 'avatar'
+};
+// 50 seems a reasonable default limit
+// https://m2.material.io/design/typography/understanding-typography.html#readability
+export var DEFAULT_MAX_CHARACTERS_PER_LINE = 50;

package/dist/utils/helpers.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
+ * @param avatarName string - Expected full name but accepts any string
+ * @returns string
+ */
+export declare const handleAvatarInitials: (avatarName: string) => string;
+/**
+ * Accepts a number and returns a react-spring style object from useSpring
+ * @param trigger boolean - Trigger to reverse the animation from main component
+ * @param animationCount number - Count tracking items from main component
+ * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * @returns Object
+ */
+export declare const useStaggerAnimation: (trigger: boolean, animationCount: number, incrementAnimationCount: Function) => Object;
+/**
+ * Accepts a number and returns a react-spring style object from useSpring
+ * @param animationCount number - Count tracking items from main component
+ * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * @returns Object
+ */
+export declare const useFadeIn: (animationCount: number, incrementAnimationCount: Function) => Object;

package/dist/utils/helpers.js

@@ -0,0 +1,64 @@
+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 { useSpring, config } from '@react-spring/web';
+/**
+ * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
+ * @param avatarName string - Expected full name but accepts any string
+ * @returns string
+ */
+export var handleAvatarInitials = function (avatarName) {
+    var _a, _b;
+    var firstInitial = avatarName.split('')[0] || '';
+    var secondInitial = '';
+    if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+        firstInitial = avatarName.split(' ')[0][0];
+        if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+            secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
+        }
+    }
+    return "".concat(firstInitial).concat(secondInitial);
+};
+var STAGGER_ITEMS_DELAY = 70;
+/**
+ * Accepts a number and returns a react-spring style object from useSpring
+ * @param trigger boolean - Trigger to reverse the animation from main component
+ * @param animationCount number - Count tracking items from main component
+ * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * @returns Object
+ */
+export var useStaggerAnimation = function (trigger, animationCount, incrementAnimationCount) {
+    var defaultAnimationConfig = {
+        from: { opacity: 0, y: 10 },
+        to: { opacity: 1, y: 0 },
+        reverse: !trigger,
+        config: __assign(__assign({}, config.default), { mass: 1 })
+    };
+    var staggerAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: trigger ? STAGGER_ITEMS_DELAY * (animationCount + 1) : 0 }));
+    incrementAnimationCount();
+    return staggerAnimation;
+};
+/**
+ * Accepts a number and returns a react-spring style object from useSpring
+ * @param animationCount number - Count tracking items from main component
+ * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * @returns Object
+ */
+export var useFadeIn = function (animationCount, incrementAnimationCount) {
+    var defaultAnimationConfig = {
+        from: { opacity: 0 },
+        to: { opacity: 1 },
+        config: __assign(__assign({}, config.default), { mass: 1 })
+    };
+    var staggerFadeInUpAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: STAGGER_ITEMS_DELAY * (animationCount + 1) }));
+    incrementAnimationCount();
+    return staggerFadeInUpAnimation;
+};

package/{utils → dist/utils}/theme.d.ts

@@ -53,7 +53,7 @@ export declare const lightTheme: {
         };
         divider: string;
         text: {
-            primary: "#000";
+            primary: string;
         };
     };
 };
@@ -77,7 +77,7 @@ export declare const darkTheme: {
         };
         divider: string;
         text: {
-            primary: "#fff";
+            primary: string;
         };
     };
 };