@learningpool/ui 1.15.5 → 1.16.0

package/components/stream/AppHub/AppHub.js

@@ -1,26 +1,4 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { defaultMessages } from '../../../lang/en-us';
 import AppHubItem from './AppHubProduct';
 import AppHubCustom from './AppHubCustom';
@@ -28,12 +6,11 @@ import { AppHubPanel, AppHubTitle, AppHubHeader, AppHubRow } from './AppHubStyle
 import Grid from '@mui/material/Unstable_Grid2';
 import { Constants } from './constants';
 import { renderBannerAdvertRow } from './AppHubBannerAdvert';
-var AppHub = function (props) {
-    var isPageLayout = props.isPageLayout, localization = props.localization, customLinkBgColor = props.customLinkBgColor, data = props.data;
-    var messages = __assign(__assign({}, defaultMessages), localization);
-    var renderRow = function (rowData, rowIndex) {
-        var _a, _b;
-        var type = rowData.type, items = rowData.items, title = rowData.title, addButton = rowData.addButton;
+const AppHub = (props) => {
+    const { isPageLayout, localization, customLinkBgColor, data } = props;
+    const messages = { ...defaultMessages, ...localization };
+    const renderRow = (rowData, rowIndex) => {
+        const { type, items, title, addButton } = rowData;
         switch (type) {
             case Constants.DataRowType.BannerAdvert: {
                 return (renderBannerAdvertRow(rowData, rowIndex));
@@ -41,22 +18,16 @@ var AppHub = function (props) {
             case Constants.DataRowType.Product: {
                 return (_jsxs(AppHubRow, { children: [title && _jsx(AppHubHeader
                         // @ts-ignore
-                        , __assign({ 
+                        , { 
                             // @ts-ignore
-                            component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsx(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: { xs: 12 } }, { children: items.map(function (_a, index) {
-                                var subtitle = _a.subtitle, shortName = _a.shortName, internalName = _a.internalName, url = _a.url, children = _a.children, rest = __rest(_a, ["subtitle", "shortName", "internalName", "url", "children"]);
-                                return (_jsxs(Grid, __assign({ xs: 12, sm: 6, md: 4 }, { children: [url && (_jsx(AppHubItem, __assign({ internalName: internalName, shortName: shortName, subtitle: subtitle, url: url }, rest))), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children }))] }), "".concat(shortName, "_").concat(rowIndex, "_").concat(index)));
-                            }) }))] }, "row_".concat(rowIndex)));
+                            component: isPageLayout ? 'h2' : 'div', children: title }), _jsx(Grid, { container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: { xs: 12 }, children: items.map(({ subtitle, shortName, internalName, url, children, ...rest }, index) => (_jsxs(Grid, { xs: 12, sm: 6, md: 4, children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url, ...rest })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children }))] }, `${shortName}_${rowIndex}_${index}`))) })] }, `row_${rowIndex}`));
             }
             case Constants.DataRowType.CustomLink: {
                 return (_jsxs(AppHubRow, { children: [title && _jsx(AppHubHeader
                         // @ts-ignore
-                        , __assign({ 
+                        , { 
                             // @ts-ignore
-                            component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsxs(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 } }, { children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, name: (_a = addButton.title) !== null && _a !== void 0 ? _a : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) }))), items.map(function (_a, index) {
-                                    var name = _a.name, url = _a.url, icon = _a.icon;
-                                    return (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }), "".concat(name, "_").concat(rowIndex, "_").concat(index)));
-                                }), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, name: (_b = addButton.title) !== null && _b !== void 0 ? _b : messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) })))] }))] }, "row_".concat(rowIndex)));
+                            component: isPageLayout ? 'h2' : 'div', children: title }), _jsxs(Grid, { container: true, spacing: { xs: 2, md: 3 }, children: [addButton && addButton.order === Constants.AddButtonOrder.Start && (_jsx(Grid, { xs: 6, sm: 4, md: 2, children: _jsx(AppHubCustom, { isAddButton: true, name: addButton.title ?? messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) })), items.map(({ name, url, icon }, index) => (_jsx(Grid, { xs: 6, sm: 4, md: 2, children: url && (_jsx(AppHubCustom, { name: name, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }, `${name}_${rowIndex}_${index}`))), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, { xs: 6, sm: 4, md: 2, children: _jsx(AppHubCustom, { isAddButton: true, name: addButton.title ?? messages['add-item'], customLinkBgColor: customLinkBgColor, url: addButton.url, icon: addButton.icon }) }))] })] }, `row_${rowIndex}`));
             }
             default: {
                 console.log('no items');
@@ -68,10 +39,10 @@ var AppHub = function (props) {
         console.log('No data available');
         return null;
     }
-    return (_jsxs(AppHubPanel, __assign({ role: isPageLayout ? 'main' : '' }, { children: [_jsx(AppHubTitle
+    return (_jsxs(AppHubPanel, { role: isPageLayout ? 'main' : '', children: [_jsx(AppHubTitle
             // @ts-ignore
-            , __assign({ 
+            , { 
                 // @ts-ignore
-                component: isPageLayout ? 'h1' : 'div' }, { children: messages['stream-hub-welcome'] })), data && data.map(function (row, rowIndex) { return renderRow(row, rowIndex); })] })));
+                component: isPageLayout ? 'h1' : 'div', children: messages['stream-hub-welcome'] }), data && data.map((row, rowIndex) => renderRow(row, rowIndex))] }));
 };
 export default AppHub;

package/components/stream/AppHub/AppHubAdvertStyles.js

@@ -1,10 +1,26 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '@mui/material/styles';
 import { Paper } from '@mui/material';
-export var StyledAdvertPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 138px;\n  overflow: hidden;\n  position: relative;\n  box-shadow: 0 0 0 1px #ddd;\n  border-radius: 10px;\n  border: #ddd;\n  transition: all 180ms ease;\n"], ["\n  width: 100%;\n  height: 138px;\n  overflow: hidden;\n  position: relative;\n  box-shadow: 0 0 0 1px #ddd;\n  border-radius: 10px;\n  border: #ddd;\n  transition: all 180ms ease;\n"])));
-export var StyledAdvertLink = styled('a')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  width: 100%;\n  height: 100%;\n"], ["\n  display: block;\n  width: 100%;\n  height: 100%;\n"])));
-export var StyledAdvertImage = styled('img')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"], ["\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n"])));
-var templateObject_1, templateObject_2, templateObject_3;
+export const StyledAdvertPaper = styled(Paper) `
+  width: 100%;
+  height: 138px;
+  overflow: hidden;
+  position: relative;
+  box-shadow: 0 0 0 1px #ddd;
+  border-radius: 10px;
+  border: #ddd;
+  transition: all 180ms ease;
+`;
+export const StyledAdvertLink = styled('a') `
+  display: block;
+  width: 100%;
+  height: 100%;
+`;
+export const StyledAdvertImage = styled('img') `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;

package/components/stream/AppHub/AppHubBannerAdvert.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { IApplicationHubRowProps } from '../../../types/components/stream/AppHub';
-export declare const renderBannerAdvertRow: (rowData: IApplicationHubRowProps, rowIndex: number) => JSX.Element | null;
+export declare const renderBannerAdvertRow: (rowData: IApplicationHubRowProps, rowIndex: number) => import("@emotion/react/jsx-runtime").JSX.Element | null;

package/components/stream/AppHub/AppHubBannerAdvert.js

@@ -1,23 +1,12 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { useState } from 'react';
 import { AppHubRow } from './AppHubStyles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { StyledAdvertPaper, StyledAdvertLink, StyledAdvertImage } from './AppHubAdvertStyles';
 import { defaultMessages } from '../../../lang/en-us';
-var addUtmParams = function (baseUrl, source, medium, campaign) {
+const addUtmParams = (baseUrl, source, medium, campaign) => {
     try {
-        var url = new URL(baseUrl);
+        const url = new URL(baseUrl);
         url.searchParams.append('utm_source', source);
         url.searchParams.append('utm_medium', medium);
         url.searchParams.append('utm_campaign', campaign);
@@ -28,14 +17,14 @@ var addUtmParams = function (baseUrl, source, medium, campaign) {
         return baseUrl;
     }
 };
-export var renderBannerAdvertRow = function (rowData, rowIndex) {
-    var items = rowData.items;
-    var _a = useState(true), hasValidImage = _a[0], setHasValidImage = _a[1];
-    var handleImageError = function () {
+export const renderBannerAdvertRow = (rowData, rowIndex) => {
+    const { items } = rowData;
+    const [hasValidImage, setHasValidImage] = useState(true);
+    const handleImageError = () => {
         setHasValidImage(false);
     };
-    var validItems = items.filter(function (item) { return item.hubImageUrl && item.basePromoUrl; });
+    const validItems = items.filter((item) => item.hubImageUrl && item.basePromoUrl);
     if (!hasValidImage || validItems.length === 0)
         return null;
-    return (_jsx(AppHubRow, { children: _jsx(Grid, __assign({ container: true, spacing: 2 }, { children: validItems.map(function (item, index) { return (_jsx(Grid, __assign({ xs: 12 }, { children: _jsx(StyledAdvertPaper, __assign({ elevation: 0 }, { children: _jsx(StyledAdvertLink, __assign({ href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank" }, { children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || defaultMessages['banner-image-alt-text'], onError: handleImageError }) })) })) }), index)); }) })) }, "row_".concat(rowIndex)));
+    return (_jsx(AppHubRow, { children: _jsx(Grid, { container: true, spacing: 2, children: validItems.map((item, index) => (_jsx(Grid, { xs: 12, children: _jsx(StyledAdvertPaper, { elevation: 0, children: _jsx(StyledAdvertLink, { href: addUtmParams(item.basePromoUrl, 'hub', 'hub_dashboard_banner_advert', item.name), target: "_blank", children: _jsx(StyledAdvertImage, { src: item.hubImageUrl, alt: item.altText || defaultMessages['banner-image-alt-text'], onError: handleImageError }) }) }) }, index))) }) }, `row_${rowIndex}`));
 };

package/components/stream/AppHub/AppHubCustom.js

@@ -1,31 +1,20 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { StyledPaper, StyledBoxWrap, StyledTypography, StyledAvatar, StyledLink, StyledAddCircleOutlineIcon } from './AppHubCustomStyles';
 import { handleAvatarInitials } from '../../../utils/helpers';
 // Bug in the naming of the icons on the CDN
-export var LogoVariants = {
+export const LogoVariants = {
     Default: 'icon',
     Solid: 'icon-solid',
     Outlined: 'icon-outlined',
     White: 'icon-white'
 };
-var AppHubCustom = function (props) {
-    var name = props.name, url = props.url, isAddButton = props.isAddButton, customLinkBgColor = props.customLinkBgColor, icon = props.icon;
-    var addIcon = icon !== null && icon !== void 0 ? icon : _jsx(StyledAddCircleOutlineIcon, {});
-    return (_jsx(StyledPaper, __assign({ elevation: 0 }, { children: _jsx(StyledLink, __assign({ href: url, target: !isAddButton ? '_blank' : '_self', underline: 'none' }, { children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon !== null && icon !== void 0 ? icon : (name ? handleAvatarInitials(name) : null), customLinkBgColor: customLinkBgColor })), isAddButton && addIcon, _jsx(StyledTypography
+const AppHubCustom = (props) => {
+    const { name, url, isAddButton, customLinkBgColor, icon } = props;
+    const addIcon = icon ?? _jsx(StyledAddCircleOutlineIcon, {});
+    return (_jsx(StyledPaper, { elevation: 0, children: _jsx(StyledLink, { href: url, target: !isAddButton ? '_blank' : '_self', underline: 'none', children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon ?? (name ? handleAvatarInitials(name) : null), customLinkBgColor: customLinkBgColor })), isAddButton && addIcon, _jsx(StyledTypography
                     // @ts-ignore
-                    , __assign({ 
+                    , { 
                         // @ts-ignore
-                        component: 'div' }, { children: name }))] }) })) })));
+                        component: 'div', children: name })] }) }) }));
 };
 export default AppHubCustom;

package/components/stream/AppHub/AppHubCustomStyles.d.ts

@@ -20,7 +20,7 @@ export declare const StyledBoxWrap: import("@emotion/styled").StyledComponent<im
 export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/Link").LinkBaseProps, "classes"> & {
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material/Link").LinkClasses> | undefined;
-    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material/styles").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined>);
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<readonly string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material/styles").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<readonly string[] | import("csstype").Property.Color | undefined>);
     sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
     TypographyClasses?: (Partial<import("@mui/material/Typography").TypographyClasses> & Partial<import("@mui/material/styles").ClassNameMap<never>>) | undefined;
     underline?: "none" | "always" | "hover" | undefined;

package/components/stream/AppHub/AppHubCustomStyles.js

@@ -1,7 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '@mui/material/styles';
 import Paper from '@mui/material/Paper';
 import Box from '@mui/material/Box';
@@ -9,22 +5,86 @@ import Avatar from '@mui/material/Avatar';
 import Typography from '@mui/material/Typography';
 import Link from '@mui/material/Link';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-radius: 10px;\n  border: none;\n  transition: all 180ms ease;\n\n  &:hover {\n    background: ", ";\n    box-shadow: 0 0 0 1px ", "\n  }\n\n  &:focus-within {\n    background: ", ";\n    box-shadow: none;\n  }\n"], ["\n  cursor: pointer;\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  border-radius: 10px;\n  border: none;\n  transition: all 180ms ease;\n\n  &:hover {\n    background: ", ";\n    box-shadow: 0 0 0 1px ", "\n  }\n\n  &:focus-within {\n    background: ", ";\n    box-shadow: none;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export const StyledPaper = styled(Paper) `
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  border-radius: 10px;
+  border: none;
+  transition: all 180ms ease;
+
+  &:hover {
+    background: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(0,0,0,.3)'
-    : '#f5f5f5'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#f5f5f5'};
+    box-shadow: 0 0 0 1px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.2)'
-    : '#ccc'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#ccc'}
+  }
+
+  &:focus-within {
+    background: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(0,0,0,.3)'
-    : '#f5f5f5'; });
-export var StyledBoxWrap = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: .5rem;\n  text-align: center;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: .5rem;\n  text-align: center;\n"])));
-export var StyledLink = styled(Link)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 100%;\n  display: block;\n  border-radius: 10px;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 180ms ease;\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px ", ";\n  }\n"], ["\n  height: 100%;\n  display: block;\n  border-radius: 10px;\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 180ms ease;\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : '#f5f5f5'};
+    box-shadow: none;
+  }
+`;
+export const StyledBoxWrap = styled(Box) `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: .5rem;
+  text-align: center;
+`;
+export const StyledLink = styled(Link) `
+  height: 100%;
+  display: block;
+  border-radius: 10px;
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 180ms ease;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 4px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.5)'
-    : props.theme.palette.primary.main; });
-export var StyledAvatar = styled(Avatar, {
-    shouldForwardProp: function (prop) { return prop !== 'customLinkBgColor'; }
-})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 85px;\n  height: 85px;\n  font-size: 2rem;\n  font-weight: 700;\n  background: ", ";\n  color: ", ";\n\n  .MuiSvgIcon-root {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n"], ["\n  width: 85px;\n  height: 85px;\n  font-size: 2rem;\n  font-weight: 700;\n  background: ", ";\n  color: ", ";\n\n  .MuiSvgIcon-root {\n    height: 2.5rem;\n    width: 2.5rem;\n  }\n"])), function (props) { return props.customLinkBgColor || props.theme.palette.primary.dark; }, function (props) { return props.customLinkBgColor
+    : props.theme.palette.primary.main};
+  }
+`;
+export const StyledAvatar = styled(Avatar, {
+    shouldForwardProp: (prop) => prop !== 'customLinkBgColor'
+}) `
+  width: 85px;
+  height: 85px;
+  font-size: 2rem;
+  font-weight: 700;
+  background: ${props => props.customLinkBgColor || props.theme.palette.primary.dark};
+  color: ${props => props.customLinkBgColor
     ? props.theme.palette.getContrastText(props.customLinkBgColor)
-    : props.theme.palette.getContrastText(props.theme.palette.primary.dark); });
-export var StyledAddCircleOutlineIcon = styled(AddCircleOutlineIcon)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 85px;\n  height: auto;\n  color: #aaa;\n"], ["\n  width: 85px;\n  height: auto;\n  color: #aaa;\n"])));
-export var StyledTypography = styled(Typography)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  line-height: 1.3;\n  margin-top: .5rem;\n\n  /* Truncate text to 2 lines */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"], ["\n  color: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  line-height: 1.3;\n  margin-top: .5rem;\n\n  /* Truncate text to 2 lines */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])), function (props) { return props.theme.palette.text.primary; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+    : props.theme.palette.getContrastText(props.theme.palette.primary.dark)};
+
+  .MuiSvgIcon-root {
+    height: 2.5rem;
+    width: 2.5rem;
+  }
+`;
+export const StyledAddCircleOutlineIcon = styled(AddCircleOutlineIcon) `
+  width: 85px;
+  height: auto;
+  color: #aaa;
+`;
+export const StyledTypography = styled(Typography) `
+  color: ${props => props.theme.palette.text.primary};
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.3;
+  margin-top: .5rem;
+
+  /* Truncate text to 2 lines */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;

package/components/stream/AppHub/AppHubProduct.js

@@ -1,26 +1,4 @@
-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);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-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 { ListItemButton, Link, TextField, Tooltip } from '../../../index';
 import LaunchIcon from '@mui/icons-material/Launch';
 import { visuallyHidden } from '@mui/utils';
@@ -29,7 +7,7 @@ import { defaultMessages } from '../../../lang/en-us';
 import { StyledPaper, StyledBoxWrap, StyledBoxText, StyledAutocomplete, StyledTypography, StyledTypographySubtitle, StyledButton } from './AppHubProductStyles';
 import { useTheme } from '@mui/material';
 // Bug in the naming of the icons on the CDN
-export var LogoVariants = {
+export const LogoVariants = {
     Default: 'icon',
     Solid: 'icon-solid',
     Outlined: 'icon-outlined',
@@ -40,42 +18,42 @@ 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");
-    return (_jsx("img", { src: urlToIcon, width: "90", height: "90", alt: internalName !== null && internalName !== void 0 ? internalName : '' }));
+    const urlToIcon = `${Constants.AssetsUrl}${internalName}/logo/latest/${logoVariant ?? LogoVariants.Default}.svg`;
+    return (_jsx("img", { src: urlToIcon, width: "90", height: "90", alt: internalName ?? '' }));
 };
-var AppHubItem = function (props) {
-    var internalName = props.internalName, shortName = props.shortName, customName = props.customName, url = props.url, subtitle = props.subtitle, localization = props.localization, options = props.options, rest = __rest(props, ["internalName", "shortName", "customName", "url", "subtitle", "localization", "options"]);
-    var initialOptions = __assign({}, options);
-    var solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
-    var messages = __assign(__assign({}, defaultMessages), localization);
-    return (_jsx(StyledPaper, __assign({ elevation: 0 }, { children: _jsxs(StyledBoxWrap, { children: [solidLogo, _jsxs(StyledBoxText, { children: [subtitle && (_jsx(StyledTypographySubtitle
+const AppHubItem = (props) => {
+    const { internalName, shortName, customName, url, subtitle, localization, options, ...rest } = props;
+    const initialOptions = { ...options };
+    const solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
+    const messages = { ...defaultMessages, ...localization };
+    return (_jsx(StyledPaper, { elevation: 0, children: _jsxs(StyledBoxWrap, { children: [solidLogo, _jsxs(StyledBoxText, { children: [subtitle && (_jsx(StyledTypographySubtitle
                         // @ts-ignore
-                        , __assign({ 
+                        , { 
                             // @ts-ignore
-                            component: 'div' }, { children: subtitle }))), _jsx(Tooltip, __assign({ placement: 'top', title: customName !== null && customName !== void 0 ? customName : shortName }, { children: _jsx(StyledTypography
+                            component: 'div', children: subtitle })), _jsx(Tooltip, { placement: 'top', title: customName ?? shortName, children: _jsx(StyledTypography
                             // @ts-ignore
-                            , __assign({ 
+                            , { 
                                 // @ts-ignore
-                                component: 'div', className: 'appHubCardTitle' }, { children: customName !== null && customName !== void 0 ? customName : shortName })) })), url && (_jsxs(StyledButton, __assign({ href: url, 
-                            // @ts-expect-error
-                            component: Link, target: '_blank', variant: 'outlined' }, rest, { children: [messages.open, _jsxs("span", __assign({ style: visuallyHidden }, { children: [", ", messages['open-in-new-window']] }))] }))), options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map(function (option) { return option.applicationName; }), 
+                                component: 'div', className: 'appHubCardTitle', children: customName ?? shortName }) }), url && (_jsxs(StyledButton, { href: url, 
+                            // @ts-ignore
+                            component: Link, 
+                            // @ts-ignore
+                            target: '_blank', variant: 'outlined', ...rest, children: [messages.open, _jsxs("span", { style: visuallyHidden, children: [", ", messages['open-in-new-window']] })] })), options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map((option) => option.applicationName), 
                             // TODO: Add link, icon and screen reader text here:
-                            renderOption: function (option) {
+                            renderOption: (option) => {
                                 // Autocomplete only uses applicationName and we need more properties
                                 // Careful of this if we do any sorting or grouping in future
-                                // @ts-expect-error
-                                var index = option['data-option-index'];
-                                var optionItem = initialOptions[index];
-                                var handleClick = function (event) {
+                                // @ts-ignore
+                                const index = option['data-option-index'];
+                                const optionItem = initialOptions[index];
+                                const handleClick = (event) => {
                                     optionItem.onClick && optionItem.onClick(event);
                                 };
-                                return (_jsxs(ListItemButton, __assign({ onClick: function (event) { return handleClick(event); } }, { children: [option.key, _jsx(LaunchIcon, { sx: { marginInlineStart: '1rem', transform: useTheme().direction === 'rtl' ? 'scaleX(-1)' : 'none' } }), _jsxs("span", __assign({ style: visuallyHidden }, { children: [", ", messages['open-in-new-window']] }))] }), "".concat(option.key, "_").concat(option.id)));
-                            }, renderInput: function (params) {
-                                return _jsx(TextField, __assign({}, params, { placeholder: messages['select-org'] }));
-                            } }))] })] }) })));
+                                return (_jsxs(ListItemButton, { onClick: event => handleClick(event), children: [option.key, _jsx(LaunchIcon, { sx: { marginInlineStart: '1rem', transform: useTheme().direction === 'rtl' ? 'scaleX(-1)' : 'none' } }), _jsxs("span", { style: visuallyHidden, children: [", ", messages['open-in-new-window']] })] }, `${option.key}_${option.id}`));
+                            }, renderInput: (params) => _jsx(TextField, { ...params, placeholder: messages['select-org'] }) }))] })] }) }));
 };
 export default AppHubItem;

package/components/stream/AppHub/AppHubProductStyles.js

@@ -1,28 +1,113 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import { styled } from '@mui/material/styles';
 import { Paper, Box, Typography, Autocomplete, Button } from '../../../index';
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  box-shadow: 0 0 0 1px ", ";\n  border-radius: 10px;\n  border: none;\n  transition: all 180ms ease;\n\n  &:hover,\n  &:focus-within {\n    background: ", ";\n    box-shadow: 0 0 0 1px ", "\n  }\n"], ["\n  width: 100%;\n  height: 100%;\n  background: transparent;\n  box-shadow: 0 0 0 1px ", ";\n  border-radius: 10px;\n  border: none;\n  transition: all 180ms ease;\n\n  &:hover,\n  &:focus-within {\n    background: ", ";\n    box-shadow: 0 0 0 1px ", "\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export const StyledPaper = styled(Paper) `
+  width: 100%;
+  height: 100%;
+  background: transparent;
+  box-shadow: 0 0 0 1px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.1)'
-    : '#ddd'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#ddd'};
+  border-radius: 10px;
+  border: none;
+  transition: all 180ms ease;
+
+  &:hover,
+  &:focus-within {
+    background: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(0,0,0,.3)'
-    : '#f5f5f5'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#f5f5f5'};
+    box-shadow: 0 0 0 1px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.2)'
-    : '#ccc'; });
-export var StyledBoxWrap = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: .5rem;\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: .5rem;\n"])));
-export var StyledBoxText = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-inline-start: 1rem;\n  width: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: space-between;\n  margin-inline-start: 1rem;\n  width: 100%;\n"])));
-export var StyledTypography = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  color: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  line-height: 1.3;\n\n  /* Truncate text to 2 lines */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"], ["\n  color: ", ";\n  font-size: 1rem;\n  font-weight: 500;\n  line-height: 1.3;\n\n  /* Truncate text to 2 lines */\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])), function (props) { return props.theme.palette.text.primary; });
-export var StyledTypographySubtitle = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  color: ", ";\n  font-size: .85rem;\n  font-weight: 400;\n  line-height: 1.3;\n"], ["\n  color: ", ";\n  font-size: .85rem;\n  font-weight: 400;\n  line-height: 1.3;\n"])), function (props) { return props.theme.palette.text.secondary; });
-export var StyledButton = styled(Button)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 180ms ease;\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px ", ";\n\n    & .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n"], ["\n  background: ", ";\n  box-shadow: 0 0 0 0 transparent;\n  transition: all 180ms ease;\n\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 4px ", ";\n\n    & .MuiTouchRipple-root {\n      display: none;\n    }\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : '#ccc'}
+  }
+`;
+export const StyledBoxWrap = styled(Box) `
+  display: flex;
+  flex-direction: row;
+  padding: .5rem;
+`;
+export const StyledBoxText = styled(Box) `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-inline-start: 1rem;
+  width: 100%;
+`;
+export const StyledTypography = styled(Typography) `
+  color: ${props => props.theme.palette.text.primary};
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.3;
+
+  /* Truncate text to 2 lines */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+`;
+export const StyledTypographySubtitle = styled(Typography) `
+  color: ${props => props.theme.palette.text.secondary};
+  font-size: .85rem;
+  font-weight: 400;
+  line-height: 1.3;
+`;
+export const StyledButton = styled(Button) `
+  background: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(0,0,0,.2)'
-    : '#fff'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#fff'};
+  box-shadow: 0 0 0 0 transparent;
+  transition: all 180ms ease;
+
+  &:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 4px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.5)'
-    : props.theme.palette.primary.main; });
-export var StyledAutocomplete = styled(Autocomplete)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 100%;\n\n  .MuiInputBase-root {\n    background: ", ";\n  }\n\n  & input {\n    width: 100%;\n  }\n\n  & input::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {\n    left: ", ";\n    right: ", ";\n  }\n\n  /* Handle custom focus state */\n  & .MuiInputBase-root {\n    box-shadow: 0 0 0 0 transparent;\n    transition: all 180ms ease;\n  }\n  & .MuiInputBase-root.Mui-focused fieldset {\n    box-shadow: none !important;\n    border: none !important;\n    outline: none !important;\n  }\n  & .MuiInputBase-root.Mui-focused {\n    outline: none;\n    box-shadow: 0 0 0 4px ", ";\n  }\n"], ["\n  width: 100%;\n\n  .MuiInputBase-root {\n    background: ", ";\n  }\n\n  & input {\n    width: 100%;\n  }\n\n  & input::placeholder {\n    color: ", ";\n    opacity: 1;\n  }\n\n  .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {\n    left: ", ";\n    right: ", ";\n  }\n\n  /* Handle custom focus state */\n  & .MuiInputBase-root {\n    box-shadow: 0 0 0 0 transparent;\n    transition: all 180ms ease;\n  }\n  & .MuiInputBase-root.Mui-focused fieldset {\n    box-shadow: none !important;\n    border: none !important;\n    outline: none !important;\n  }\n  & .MuiInputBase-root.Mui-focused {\n    outline: none;\n    box-shadow: 0 0 0 4px ", ";\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+    : props.theme.palette.primary.main};
+
+    & .MuiTouchRipple-root {
+      display: none;
+    }
+  }
+`;
+export const StyledAutocomplete = styled(Autocomplete) `
+  width: 100%;
+
+  .MuiInputBase-root {
+    background: ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(0,0,0,.2)'
-    : '#fff'; }, function (props) { return props.theme.palette.text.secondary; }, function (props) { return props.theme.direction === 'rtl' ? '9px' : 'auto'; }, function (props) { return props.theme.direction === 'ltr' ? '9px' : 'auto'; }, function (props) { return props.theme.palette.mode === 'dark'
+    : '#fff'};
+  }
+
+  & input {
+    width: 100%;
+  }
+
+  & input::placeholder {
+    color: ${props => props.theme.palette.text.secondary};
+    opacity: 1;
+  }
+
+  .MuiOutlinedInput-root .MuiAutocomplete-endAdornment {
+    left: ${props => props.theme.direction === 'rtl' ? '9px' : 'auto'};
+    right: ${props => props.theme.direction === 'ltr' ? '9px' : 'auto'};
+  }
+
+  /* Handle custom focus state */
+  & .MuiInputBase-root {
+    box-shadow: 0 0 0 0 transparent;
+    transition: all 180ms ease;
+  }
+  & .MuiInputBase-root.Mui-focused fieldset {
+    box-shadow: none !important;
+    border: none !important;
+    outline: none !important;
+  }
+  & .MuiInputBase-root.Mui-focused {
+    outline: none;
+    box-shadow: 0 0 0 4px ${props => props.theme.palette.mode === 'dark'
     ? 'rgba(255,255,255,.5)'
-    : props.theme.palette.primary.main; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+    : props.theme.palette.primary.main};
+  }
+`;