@learningpool/ui 1.15.5 → 1.16.0

package/components/stream/AppSwitcher/AppSwitcherItem.js

@@ -1,19 +1,8 @@
-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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { Constants } from './constants';
 import { AppLink, AppName, StyledLogoSVG } from './AppSwitcherStyles';
 // Bug in the naming of the icons on the CDN
-export var LogoVariants = {
+export const LogoVariants = {
     Default: 'icon',
     Solid: 'icon-solid',
     Outlined: 'icon-outlined',
@@ -24,28 +13,28 @@ export var LogoVariants = {
  * @param internalName {string | null | undefined } - Internal name of the application.
  * @returns {ReactElement | null } SVG containing the application logo retrieved from the CDN.
  */
-var renderApplicationLogo = function (internalName, logoVariant) {
+const renderApplicationLogo = (internalName, logoVariant) => {
     if (!internalName) {
         return _jsx(_Fragment, {});
     }
-    var urlToIcon = "".concat(Constants.AssetsUrl).concat(internalName, "/logo/latest/").concat(logoVariant !== null && logoVariant !== void 0 ? logoVariant : LogoVariants.Default, ".svg");
+    const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`;
     return (_jsx(StyledLogoSVG, { children: _jsx("image", { xlinkHref: urlToIcon, width: "60", height: "60" }) }));
 };
-var AppSwitcherItem = function (props) {
-    var applicationId = props.applicationId, internalName = props.internalName, shortName = props.shortName, customName = props.customName, url = props.url, handleGoToAppClick = props.handleGoToAppClick;
-    var solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
-    return (_jsxs(AppLink, __assign({ href: url !== null && url !== void 0 ? url : '#', target: "_blank", onClick: function (event) { return applicationId ? handleGoToAppClick(event, applicationId) : null; } }, { children: [applicationId && (
+const AppSwitcherItem = (props) => {
+    const { applicationId, internalName, shortName, customName, url, handleGoToAppClick } = props;
+    const solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
+    return (_jsxs(AppLink, { href: url ?? '#', target: "_blank", onClick: event => applicationId ? handleGoToAppClick(event, applicationId) : null, children: [applicationId && (
             // Create a stack effect to indicate multiple
-            _jsxs(_Fragment, { children: [_jsx("span", __assign({ style: {
+            _jsxs(_Fragment, { children: [_jsx("span", { style: {
                             position: 'absolute',
                             top: '4px',
                             transform: 'scale(0.8)',
                             zIndex: 0
-                        } }, { children: solidLogo })), _jsx("span", __assign({ style: {
+                        }, children: solidLogo }), _jsx("span", { style: {
                             position: 'absolute',
                             top: '10px',
                             transform: 'scale(0.9)',
                             zIndex: 0
-                        } }, { children: solidLogo }))] })), solidLogo, _jsx(AppName, { children: customName !== null && customName !== void 0 ? customName : shortName })] })));
+                        }, children: solidLogo })] })), solidLogo, _jsx(AppName, { children: customName ?? shortName })] }));
 };
 export default AppSwitcherItem;

package/components/stream/AppSwitcher/AppSwitcherStyles.js

@@ -1,65 +1,360 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { Card, CardActionArea, CardMedia } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Button from '@mui/material/Button';
-export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: ", ";\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"], ["\n  background-color: ", ";\n  border-radius: 0 4px 4px 0;\n  bottom: 0;\n  box-shadow: ", ";\n  box-sizing: border-box;\n  font-family: 'Roboto';\n  height: ", ";\n  left: ", ";\n  right: ", ";\n  overflow: auto;\n  overflow-x: hidden;\n  padding: 1rem 1.5rem;\n  position: fixed;\n  width: 360px;\n  z-index: 1;\n\n  & > div {\n    padding-bottom: 3rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export const AppSwitcherPanel = styled('div') `
+  background-color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; }, function (props) { return props.theme.direction === 'ltr'
+    : '#E6EAF0'};
+  border-radius: 0 4px 4px 0;
+  bottom: 0;
+  box-shadow: ${props => props.theme.direction === 'ltr'
     ? '5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%)'
-    : '-5px 7px 8px -10px rgb(0 0 0 / 20%), -5px 12px 17px -10px rgb(0 0 0 / 14%), -5px 5px 22px -10px rgb(0 0 0 / 12%)'; }, function (props) { return props.hasPromotionalCampaign ? 'calc(450px + 100px)' : '450px'; }, function (props) { return props.theme.direction === 'ltr' ? '57px' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '57px' : 'auto'; });
-export var List = styled('ul')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
-export var MenuContent = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"], ["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"])));
-export var SearchContent = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"])));
-export var AppListHeader = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: space-between;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  font-weight: normal;\n  justify-content: space-between;\n  padding: 1rem 1.25rem 0;\n\n  & svg {\n    height: 24px;\n    margin-inline-end: 0.5rem;\n    width: 24px;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : '-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%)'};
+  box-sizing: border-box;
+  font-family: 'Roboto';
+  height: ${props => props.hasPromotionalCampaign ? 'calc(450px + 100px)' : '450px'};
+  left: ${props => props.theme.direction === 'ltr' ? '57px' : 'auto'};
+  right: ${props => props.theme.direction === 'rtl' ? '57px' : 'auto'};
+  overflow: auto;
+  overflow-x: hidden;
+  padding: 1rem 1.5rem;
+  position: fixed;
+  width: 360px;
+  z-index: 1;
+
+  & > div {
+    padding-bottom: 3rem;
+  }
+`;
+export const List = styled('ul') `
+`;
+export const MenuContent = styled('div') `
+  align-items: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-top: 1rem;
+`;
+export const SearchContent = styled('div') `
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 1rem 1rem 2rem;
+`;
+export const AppListHeader = styled('div') `
+  align-items: center;
+  color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : '#555'; });
-export var AppListItem = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  height: 104px;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  height: 104px;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])), 100 / 3);
-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'
+    : '#555'};
+  display: flex;
+  font-weight: normal;
+  justify-content: space-between;
+  padding: 1rem 1.25rem 0;
+
+  & svg {
+    height: 24px;
+    margin-inline-end: 0.5rem;
+    width: 24px;
+  }
+`;
+export const AppListItem = styled('div') `
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 0 0 ${100 / 3}%;
+  height: 104px;
+  overflow: visible;
+  padding: 0.25rem;
+  position: relative;
+
+  &:hover {
+    background-color: transparent;
+  }
+`;
+export const AppLink = styled('a') `
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.85rem;
+  justify-content: center;
+  overflow: hidden;
+  padding: 1rem 0 0.5rem;
+  position: absolute;
+  text-align: center;
+  text-decoration: none;
+  width: 100%;
+
+  & .MuiTouchRipple-rippleVisible {
+    color: #004071;
+    opacity: 0.25;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(22, 92, 141, 1)'
-    : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#ebf2fc'};
+    text-decoration: none;
+    z-index: 2;
+  }
+
+  &:active {
+    background-color: #f1f1f1;
+    z-index: 2;
+  }
+
+  & svg {
+    height: 60px;
+    width: 60px;
+  }
+
+  &:hover + span,
+  &:focus + span {
+    opacity: 1;
+  }
+
+  &:hover svg,
+  &:focus svg {
+    background-color: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(22, 92, 141, 1)'
-    : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#ebf2fc'};
+    border-color: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(22, 92, 141, 1)'
-    : '#ebf2fc'; });
-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'
+    : '#ebf2fc'};
+  }
+
+  // Show full app name on hover
+  &:hover div,
+  &:focus div {
+    white-space: normal;
+    word-wrap: break-word;
+  }
+`;
+export const AppName = styled('div') `
+  color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : '#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'
+    : '#555'};
+  font-weight: normal;
+  margin: 0.5rem 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 90px;
+`;
+export const BackButton = styled('button') `
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#555'};
+  cursor: pointer;
+  display: flex;
+  padding: 0.25rem 0;
+  text-align: left;
+  width: 100%;
+
+  &:focus,
+  &:hover {
+    background-color: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255, 255, 255, 0.1)'
-    : 'rgba(0, 0, 0, 0.1)'; });
-export var SearchBox = styled('input')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"], ["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"])));
-export var AppOrganisationCount = styled('span')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 48%;\n  left: ", ";\n  right: ", ";\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 49%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n  z-index: 3;\n"], ["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 48%;\n  left: ", ";\n  right: ", ";\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  text-align: center;\n  top: 49%;\n  transform: translate(-50%, -50%);\n  width: 50%;\n  z-index: 3;\n"])), function (props) { return props.theme.direction === 'ltr' ? '54%' : 'auto'; }, function (props) { return props.theme.direction === 'rtl' ? '4%' : 'auto'; });
-export var SelectedOrganisation = styled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & span {\n    font-size: 1.2rem;\n    font-weight: normal;\n    margin: 0;\n    margin-inline-start: 0.5rem;\n  }\n"], ["\n  align-items: center;\n  color: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & span {\n    font-size: 1.2rem;\n    font-weight: normal;\n    margin: 0;\n    margin-inline-start: 0.5rem;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : 'rgba(0, 0, 0, 0.1)'};
+  }
+`;
+export const SearchBox = styled('input') `
+  background: #f4f4f4;
+  border: thin solid #888;
+  box-sizing: border-box;
+  color: #777;
+  padding: 0.5rem;
+  width: 100%;
+
+  &:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #888;
+  }
+
+  & .MuiOutlinedInput-root {
+    border-radius: 0;
+    color: #777;
+    padding: 0;
+  }
+
+  & .MuiOutlinedInput-input {
+    padding: 0.5rem;
+  }
+
+  & ::placeholder {
+    opacity: 0.75;
+  }
+`;
+export const AppOrganisationCount = styled('span') `
+  background: #00497D;
+  border-color: #616161;
+  border-radius: 4px;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  height: 48%;
+  left: ${props => props.theme.direction === 'ltr' ? '54%' : 'auto'};
+  right: ${props => props.theme.direction === 'rtl' ? '4%' : 'auto'};
+  line-height: 50px;
+  margin-top: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  text-align: center;
+  top: 49%;
+  transform: translate(-50%, -50%);
+  width: 50%;
+  z-index: 3;
+`;
+export const SelectedOrganisation = styled('div') `
+  align-items: center;
+  color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : '#555'; });
-export var StyledSVG = styled('svg')(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  transform: rotateY(", ");\n  user-select: none;\n  width: 1em;\n"], ["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  transform: rotateY(", ");\n  user-select: none;\n  width: 1em;\n"])), function (props) { return props.theme.direction === 'ltr' ? '0deg' : '180deg'; });
-export var OrganisationList = styled('div')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"], ["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"])));
-export var OrganisationLink = styled('a')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: ", ";\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #555;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: ", ";\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: ", ";\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #555;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : '#555'};
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 1.5rem 0;
+  width: 100%;
+
+  & svg,
+  & svg image {
+    height: 24px;
+    width: 24px;
+  }
+
+  & span {
+    font-size: 1.2rem;
+    font-weight: normal;
+    margin: 0;
+    margin-inline-start: 0.5rem;
+  }
+`;
+export const StyledSVG = styled('svg') `
+  box-sizing: content-box;
+  display: inline-block;
+  fill: currentcolor;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  height: 1em;
+  margin: 4px;
+  padding: 0;
+  transform: rotateY(${props => props.theme.direction === 'ltr' ? '0deg' : '180deg'});
+  user-select: none;
+  width: 1em;
+`;
+export const OrganisationList = styled('div') `
+  height: 300px;
+  overflow: auto;
+  padding-top: 0.5rem;
+  width: 100%;
+`;
+export const OrganisationLink = styled('a') `
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: none;
+  color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
-    : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#555'};
+  display: flex;
+  font-size: 1rem;
+  justify-content: space-between;
+  margin: 0 0.125rem;
+  padding: 0.5rem;
+  text-decoration: none;
+  transition: all 200ms ease;
+
+  & .MuiTouchRipple-rippleVisible {
+    color: #004071;
+    opacity: 0.25;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: ${props => 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'
+    : 'rgba(0, 0, 0, 0.1)'};
+
+    & svg {
+      visibility: visible;
+    }
+  }
+
+  &:active {
+    background-color: #f1f1f1;
+  }
+
+  & .MuiLink-root {
+    align-items: center;
+    color: #555;
+    display: flex;
+    justify-content: space-between;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  & svg {
+    visibility: hidden;
+  }
+`;
+export const StyledLogoSVG = styled('svg') `
+  background-color: ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#E6EAF0'};
+  border: thin solid ${props => props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.dark
-    : '#E6EAF0'; });
-export var StyleHomeButton = styled(Button)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  align-items: center;\n  color: #00538e;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  text-transform: none;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  color: #00538e;\n  display: flex;\n  flex-wrap: wrap;\n  margin: 0;\n  padding: 0;\n  text-decoration: none;\n  text-transform: none;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])));
-export var PromotionalCampaignImage = styled(CardMedia)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  height: 150px;\n  width: 300px;\n"], ["\n  height: 150px;\n  width: 300px;\n"])));
-export var PromotionalCampaignCard = styled(Card)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  background: ", ";\n  "], ["\n  background: ", ";\n  "])), function (props) { return props.theme.palette.primary.main; });
-export var PromotionalCampaignCardStyled = styled(Card)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  width: 100%;\n  height: 162px;\n  margin-bottom: 4px;\n  background: ", ";\n"], ["\n  width: 100%;\n  height: 162px;\n  margin-bottom: 4px;\n  background: ", ";\n"])), function (props) { return props.theme.palette.primary.main; });
-export var PromotionalCampaignCardActionArea = styled(CardActionArea)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n"], ["\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 6px;\n"])));
-export var PromotionalCampaignCardMedia = styled(CardMedia)(function () { return ({
+    : '#E6EAF0'};
+  position: relative;
+  z-index: 1;
+`;
+export const StyleHomeButton = styled(Button) `
+  align-items: center;
+  color: #00538e;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  text-transform: none;
+
+  &:hover {
+    background-color: transparent;
+  }
+`;
+export const PromotionalCampaignImage = styled(CardMedia) `
+  height: 150px;
+  width: 300px;
+`;
+export const PromotionalCampaignCard = styled(Card) `
+  background: ${props => props.theme.palette.primary.main};
+  `;
+export const PromotionalCampaignCardStyled = styled(Card) `
+  width: 100%;
+  height: 162px;
+  margin-bottom: 4px;
+  background: ${props => props.theme.palette.primary.main};
+`;
+export const PromotionalCampaignCardActionArea = styled(CardActionArea) `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 6px;
+`;
+export const PromotionalCampaignCardMedia = styled(CardMedia)(() => ({
     width: '100%',
     height: '100%',
     objectFit: 'cover',
     '&.MuiCardMedia-img': {
         objectPosition: 'center'
     }
-}); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+}));