@learningpool/ui 1.6.0-beta.9 → 1.6.0

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Avatar, List, Tooltip } from '../../../index';
-import { Box } from '@mui/material';
+import { Box, Modal } from '@mui/material';
 import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
 import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher';
 import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
@@ -199,14 +199,14 @@ var VerticalNavigation = function (props) {
                                     ? theme.palette.primary.main
                                     : theme.palette.background.paper
                             } }, { children: [hasStreamHome
-                                    ? (_jsx(VerticalNavigationItem, { label: 'App Switcher', icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications !== null && streamHomeApplications !== void 0 ? streamHomeApplications : [], apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true }))
+                                    ? (_jsx(VerticalNavigationItem, { label: 'App Switcher', icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true }))
                                     : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true }))); }), avatarName
                                     ? (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                                 // backgroundColor: mainTheme.colorButtonText,
                                                 // color: mainTheme.colorButton,
                                                 fontSize: '0.75rem',
-                                                height: 22,
-                                                width: 22
+                                                height: 32,
+                                                width: 32
                                             } }, { children: avatarInitials })), style: {
                                             maxHeight: isDrawerOpen ? '200px' : '48px',
                                             overflow: 'hidden',
@@ -217,11 +217,6 @@ var VerticalNavigation = function (props) {
                                     : null] }))] })) }))] }))); };
     return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'
-                } }), _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: isDrawerOpen ? 'temporary' : 'permanent', ModalProps: {
-                    keepMounted: true,
-                    disablePortal: true,
-                    open: isDrawerOpen,
-                    onClose: toggleDrawer(false)
-                } }, { children: listContent() }))] })));
+                } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
 };
 export default VerticalNavigation;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.d.ts

@@ -1,24 +1,4 @@
 import React from 'react';
-export interface IAvatarMenuItemProps {
-    label: string;
-    icon: any;
-    onClick: any;
-}
-export interface IAvatarPanelProps {
-    avatarName: string;
-    editProfileText?: string;
-    logoutText?: string;
-    avatarPanelOnClickSwitchDirection?: any;
-    avatarPanelOnClickLogout?: any;
-    avatarPanelOnClickViewProfile?: any;
-    avatarPanelViewProfileString?: string;
-    avatarPanelOnClickEditProfile?: any;
-    avatarPanelEditProfileString?: string;
-    avatarPanelMenuItems?: Array<IAvatarMenuItemProps>;
-    avatarPanelOnClickMainAction?: any;
-    avatarPanelMainActionString?: string;
-    avatarPanelSettingItems?: Array<IAvatarMenuItemProps>;
-    avatarPanelInvertNavString?: string;
-}
+import { IAvatarPanelProps } from '../../../types';
 declare const AvatarPanel: (props: IAvatarPanelProps) => React.ReactElement;
 export default AvatarPanel;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -23,7 +23,7 @@ import { Person, Settings } from '@mui/icons-material';
 var AvatarPanel = function (props) {
     var _a;
     var theme = useTheme();
-    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, logoutText = props.logoutText, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems;
+    var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelFootnote = props.avatarPanelFootnote;
     useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [
         avatarName
     ]);
@@ -43,13 +43,13 @@ var AvatarPanel = function (props) {
                     position: 'absolute',
                     right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
                     top: theme.spacing(1)
-                }, onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: logoutText !== null && logoutText !== void 0 ? logoutText : 'Logout' }))), _jsxs(Box, __assign({ style: {
+                }, onClick: avatarPanelOnClickLogout, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ style: {
                     alignItems: 'center',
                     display: 'flex',
                     flexDirection: 'column'
                 } }, { children: [_jsxs(StyledBoxProfile, __assign({ variants: motionFadeInUp }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ variants: motionFadeInUp, style: {
                             flexDirection: 'row',
-                            marginBottom: theme.spacing(1)
+                            marginBottom: theme.spacing(2)
                         } }, { children: _jsxs(ButtonGroup, __assign({ variant: "contained", "aria-label": "split button" }, { children: [_jsx(Button, __assign({ variant: 'contained', color: 'primary', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(Button, __assign({ size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
                     alignItems: 'center',
                     display: 'flex',
@@ -79,6 +79,6 @@ var AvatarPanel = function (props) {
                                     // @ts-expect-error
                                     component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                 minWidth: theme.spacing(5)
-                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))] }))] })));
+                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] })));
 };
 export default AvatarPanel;

package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js

@@ -9,10 +9,10 @@ import { motion } from 'framer-motion';
 export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.text.primary; });
-export var StyledBox = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  height: 100%;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledBox = styled(motion.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  height: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"], ["\n  align-items: center;\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  font-family: ", ";\n  height: 100%;\n  justify-content: flex-start;\n  overflow: auto;\n  padding: 15vh ", ";\n  position: relative;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; }, function (props) { return props.theme.spacing(2); });
-export var StyledBoxProfile = styled(motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem\n"])));
+    : '#E6EAF0'; }, function (props) { return props.theme.typography.fontFamily; }, function (props) { return props.theme.spacing(2); });
+export var StyledBoxProfile = styled(motion.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin-bottom: 2rem;\n"])));
 export var StyledBoxProfileEdit = styled(motion.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  display: flex;\n"], ["\n  display: flex;\n"])));
 export var StyledAvatarName = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1.75rem;\n"], ["\n  color: ", ";\n  font-size: 1.75rem;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.d.ts

@@ -1,19 +1,4 @@
 import React from 'react';
-export interface IVerticalNavigationItemProps {
-    label: string;
-    icon?: React.ReactElement;
-    onClick?: any;
-    isActive?: boolean;
-    children?: IVerticalNavigationItemProps[];
-    isDrawerOpen?: boolean;
-    index?: number;
-    isSecondary?: boolean;
-    hasFlyout?: boolean;
-    fullHeightFlyout?: boolean;
-    content?: React.ReactElement;
-    style?: any;
-    open?: boolean;
-    hasCustomContent?: boolean;
-}
+import { IVerticalNavigationItemProps } from '../../../../types';
 declare const VerticalNavigationItem: (props: IVerticalNavigationItemProps) => React.ReactElement;
 export default VerticalNavigationItem;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -32,8 +32,7 @@ var VerticalNavigationItem = function (props) {
     var _a, _b, _c;
     var theme = useTheme();
     var label = props.label, icon = props.icon, onClick = props.onClick, isActive = props.isActive, children = props.children, isDrawerOpen = props.isDrawerOpen, index = props.index, hasFlyout = props.hasFlyout, fullHeightFlyout = props.fullHeightFlyout, isSecondary = props.isSecondary, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "content", "style", "hasCustomContent"]);
-    var _d = React.useState(false), isExpanded = _d[0], setIsExpanded = _d[1];
-    var _e = React.useState(null), anchorEl = _e[0], setAnchorEl = _e[1];
+    var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
     var open = Boolean(anchorEl);
     var handlePopoverOpen = function (event) {
         if (open) {
@@ -50,42 +49,47 @@ var VerticalNavigationItem = function (props) {
             handlePopoverOpen(event);
             return;
         }
-        if (children && children.length > 0) {
-            setIsExpanded(!isExpanded);
-            return;
-        }
         if (onClick) {
             onClick(event);
         }
         setAnchorEl(null);
     };
+    var handleChildItemClick = function (event, item) {
+        if (!event) {
+            return;
+        }
+        event.preventDefault();
+        if (item.onClick) {
+            item.onClick(event);
+        }
+    };
     return (_jsxs(ListItem, __assign({ disablePadding: true, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton
             // @ts-expect-error
             , __assign({ 
                 // @ts-expect-error
-                component: Link, onClick: handleClick, isActive: isActive, isDrawerOpen: isDrawerOpen, isExpanded: isExpanded, open: open, onMouseEnter: function (event) { return fullHeightFlyout
+                component: Link, onClick: handleClick, isActive: isActive, isDrawerOpen: isDrawerOpen, open: open, onMouseEnter: function (event) { return (fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverOpen(event); }, onMouseLeave: function () { return fullHeightFlyout
+                    : handlePopoverOpen(event); }, onMouseLeave: function () { return (fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverClose(); }, onFocus: function (event) { return fullHeightFlyout
+                    : handlePopoverClose(); }, onFocus: function (event) { return (fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverOpen(event); }, onBlur: function () { return fullHeightFlyout
+                    : handlePopoverOpen(event); }, onBlur: function () { return (fullHeightFlyout || isDrawerOpen)
                     ? null
-                    : handlePopoverClose(); }, "aria-expanded": (children && children.length > 0) || fullHeightFlyout ? open : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) || fullHeightFlyout ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
+                    : handlePopoverClose(); }, "aria-expanded": fullHeightFlyout ? open : null, "aria-current": isActive ? 'page' : null, role: (children && children.length > 0) || fullHeightFlyout ? 'button' : 'link' }, { children: [_jsx(Tooltip, __assign({ disableHoverListener: (_a = (children && children.length > 0)) !== null && _a !== void 0 ? _a : isDrawerOpen, disableFocusListener: (_b = (children && children.length > 0)) !== null && _b !== void 0 ? _b : isDrawerOpen, disableTouchListener: (_c = (children && children.length > 0)) !== null && _c !== void 0 ? _c : isDrawerOpen, title: label, placement: theme.direction === 'rtl' ? 'left' : 'right', enterDelay: tooltipDelay.start, leaveDelay: tooltipDelay.end }, { children: _jsx(ListItemIcon, __assign({ "aria-hidden": true }, { children: icon !== null && icon !== void 0 ? icon : _jsx(MailIcon, {}) })) })), _jsx(ListItemText, { primary: label, isDrawerOpen: isDrawerOpen, index: index, sx: {
                             '& .MuiTypography-root': {
                                 fontSize: isSecondary ? '14px' : 'inherit'
                             }
-                        } }), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen ? isExpanded : false, timeout: "auto" }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
-                                // @ts-expect-error
-                                , __assign({ 
-                                    // @ts-expect-error
-                                    component: Link, index: index, isDrawerOpen: isDrawerOpen }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
-                                                '& .MuiTypography-root': {
-                                                    fontSize: '14px !important',
-                                                    color: theme.palette.mode === 'dark'
-                                                        ? theme.palette.primary.contrastText
-                                                        : theme.palette.getContrastText(theme.palette.background.paper)
-                                                }
-                                            } })] }), label) }))); }) })) })))] }), label), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+                        } })] }), label), children && children.length > 0 && (_jsx(Collapse, __assign({ component: 'div', in: isDrawerOpen }, { children: _jsx(List, __assign({ "aria-label": label, disablePadding: true }, { children: children.map(function (childItem, index) { return (_jsx(ListItem, __assign({ disablePadding: true, isDrawerOpen: isDrawerOpen }, { children: _jsxs(ListItemButtonChild
+                        // @ts-expect-error
+                        , __assign({ 
+                            // @ts-expect-error
+                            component: Link, role: 'link', index: index, isDrawerOpen: isDrawerOpen, onClick: function (event) { return handleChildItemClick(event, childItem); } }, { children: [_jsx(ListItemIcon, { children: childItem.icon }), _jsx(ListItemText, { primary: childItem.label, isDrawerOpen: isDrawerOpen, sx: {
+                                        '& .MuiTypography-root': {
+                                            fontSize: '14px !important',
+                                            color: theme.palette.mode === 'dark'
+                                                ? theme.palette.primary.contrastText
+                                                : theme.palette.getContrastText(theme.palette.background.paper)
+                                        }
+                                    } })] }), label) }))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
 };
 export default VerticalNavigationItem;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IVerticalNavigationItemProps } from './VerticalNavigationItem';
+import { IVerticalNavigationItemProps } from '../../../../types';
 export interface IVerticalNavigationItemFlyoutMenuProps {
     label?: string;
     children?: IVerticalNavigationItemProps[];

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js

@@ -24,6 +24,6 @@ var VerticalNavigationItemFlyoutMenu = function (props) {
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: Link, onClick: childItem.onClick, role: 'link' }, { children: _jsx(ListItemText, { primary: childItem.label }) }), childItem.label) })); }) }))] })) })));
+                            component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(ListItemText, { primary: childItem.label }) }), childItem.label) })); }) }))] })) })));
 };
 export default VerticalNavigationItemFlyoutMenu;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.d.ts

@@ -56,7 +56,7 @@ export declare const FlyoutMenuItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const FlyoutMenuButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.d.ts

@@ -14,7 +14,7 @@ export declare const ListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isDrawerOpen?: boolean | undefined;
 }, {}, {}>;
 export declare const ListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
@@ -37,7 +37,6 @@ export declare const ListItemButton: import("@emotion/styled").StyledComponent<i
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isDrawerOpen?: boolean | undefined;
-    isExpanded?: boolean | undefined;
 }, {}, {}>;
 export declare const ListItemButtonChild: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -81,7 +80,6 @@ export declare const ListItemAvatar: import("@emotion/styled").StyledComponent<i
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, "className" | "style" | "classes" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "autoFocus" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isDrawerOpen?: boolean | undefined;
-    isExpanded?: boolean | undefined;
 } & {
     children?: import("react").ReactNode;
 } & {

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js

@@ -15,11 +15,11 @@ var ICON = {
 };
 export var ListItem = styled(SSListItem, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : 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' && prop !== 'isExpanded'; }
+    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) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
@@ -29,9 +29,7 @@ export var ListItemButton = styled(SSListItemButton, {
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
 }, ICON.Height + 8, function (props) { return props.isDrawerOpen
-    ? props.isExpanded
-        ? 'auto'
-        : '200px'
+    ? 'auto'
     : "".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.theme.spacing(2); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.5)'

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -81,9 +81,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/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/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/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/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/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

@@ -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

@@ -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';