@learningpool/ui 1.6.10 → 1.7.1

package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.js

@@ -6,7 +6,7 @@ import { Avatar, Button, ListItemButton, Typography } from '../../../index';
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-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'
+export var StyledSwipeableAvatar = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    color: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.text.primary; });
 export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\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  background-image: ", ";\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'

package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.js

@@ -6,7 +6,7 @@ import { Box, List, ListItem, ListItemText, ListItemButton, Typography } from '.
 import { Drawer } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledSwipeableDrawer = styled(Drawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    background-color: ", ";\n    background-image: ", ";\n    height: 100vh;\n    border: none;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return props.theme.palette.mode === 'dark'
     ? '#003366'
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'
     ? 'none'

package/components/navigation/MobileNavigation/MobileNavigationSearchStyles.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { SwipeableDrawer, OutlinedInput, InputLabel } from '../../../index';
 import { styled } from '@mui/material/styles';
 import { animated } from '@react-spring/web';
-export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"], ["\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"])));
+export var StyledSwipeableSearch = styled(SwipeableDrawer)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"], ["\n  // Override the MUI default z-index of the Drawer component\n  // to ensure that the drawer is always below the AppBar.\n  z-index: ", ";\n\n  .MuiPaper-root {\n    box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),\n                0px 5px 8px 0px rgba(0, 0, 0, 0.14),\n                0px 1px 14px 0px rgba(0, 0, 0, 0.12);\n    border: none;\n    border-radius: 20px 20px 0 0;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.zIndex.appBar - 1; });
 export var StyledBox = styled(animated.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"], ["\n  background-color: ", ";\n  background-image: ", ";\n  padding: ", ";\n  height: 100%;\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? '#003366'
     : props.theme.palette.background.paper; }, function (props) { return props.theme.palette.mode === 'dark'

package/components/navigation/MobileNavigation/MobileNavigationStyles.js

@@ -10,9 +10,9 @@ export var DRAWER_WIDTH = {
     Collapsed: 60,
     Expanded: 300
 };
-export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: 1000000000;\n"], ["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: 1000000000;\n"])), function (props) { return props.theme.palette.mode === 'dark'
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"], ["\n  background-color: ", ";\n  background-image: none;\n  border-radius: 0;\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  z-index: ", ";\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper; });
+    : props.theme.palette.background.paper; }, function (props) { return props.theme.zIndex.appBar; });
 export var StyledNotchSVG = styled('svg', {
     shouldForwardProp: function (prop) { return prop !== 'mobileNotchPosition'; }
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"], ["\n  display: block;\n  fill: ", ";\n  height: 50px;\n  left: 0;\n  padding: 0;\n  position: absolute;\n  stroke: transparent;\n  top: -29px;\n  transform: rotate(270deg);\n  width: 50px;\n  z-index: -1;\n"])), function (props) { return props.theme.palette.mode === 'dark'

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

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { IApplicationHubProps } from '../../../types/components/stream/AppHub';
+declare const AppHub: (props: IApplicationHubProps) => ReactElement | null;
+export default AppHub;

package/components/stream/AppHub/AppHub.js

@@ -0,0 +1,61 @@
+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 { defaultMessages } from '../../../lang/en-us';
+import AppHubItem from './AppHubProduct';
+import AppHubCustom from './AppHubCustom';
+import { AppHubPanel, AppHubTitle, AppHubHeader, AppHubRow } from './AppHubStyles';
+import Grid from '@mui/material/Unstable_Grid2';
+import { Constants } from './constants';
+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 type = rowData.type, items = rowData.items, title = rowData.title, addButton = rowData.addButton;
+        switch (type) {
+            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;
+                                return (_jsxs(Grid, __assign({ xs: 12, sm: 6, md: 4 }, { children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children }))] }), "".concat(shortName, "_").concat(rowIndex, "_").concat(index)));
+                            }) }))] }, "row_".concat(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, customName: messages['add-custom-link'], customLinkBgColor: customLinkBgColor, url: addButton.url }) }))), items.map(function (_a, index) {
+                                    var customName = _a.customName, url = _a.url, icon = _a.icon;
+                                    return (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: url && (_jsx(AppHubCustom, { customName: customName, customLinkBgColor: customLinkBgColor, url: url, icon: icon })) }), "".concat(customName, "_").concat(rowIndex, "_").concat(index)));
+                                }), addButton && addButton.order === Constants.AddButtonOrder.End && (_jsx(Grid, __assign({ xs: 6, sm: 4, md: 2 }, { children: _jsx(AppHubCustom, { isAddButton: true, customName: messages['add-custom-link'], customLinkBgColor: customLinkBgColor, url: addButton.url }) })))] }))] }, "row_".concat(rowIndex)));
+            }
+            default: {
+                console.log('no items');
+                return null;
+            }
+        }
+    };
+    if (!data || data.length <= 0) {
+        console.log('No data available');
+        return null;
+    }
+    return (_jsxs(AppHubPanel, __assign({ 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); })] })));
+};
+export default AppHub;

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

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+export declare const LogoVariants: {
+    Default: string;
+    Solid: string;
+    Outlined: string;
+    White: string;
+};
+interface IAppHubCustomProps {
+    shortName?: string;
+    customName?: string;
+    url?: string;
+    isAddButton?: boolean;
+    customLinkBgColor?: string;
+    icon?: any;
+}
+declare const AppHubCustom: (props: IAppHubCustomProps) => ReactElement;
+export default AppHubCustom;

package/components/stream/AppHub/AppHubCustom.js

@@ -0,0 +1,30 @@
+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 { 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 = {
+    Default: 'icon',
+    Solid: 'icon-solid',
+    Outlined: 'icon-outlined',
+    White: 'icon-white'
+};
+var AppHubCustom = function (props) {
+    var shortName = props.shortName, customName = props.customName, url = props.url, isAddButton = props.isAddButton, customLinkBgColor = props.customLinkBgColor, icon = props.icon;
+    return (_jsx(StyledPaper, __assign({ elevation: 0 }, { children: _jsx(StyledLink, __assign({ href: url, target: '_blank', underline: 'none' }, { children: _jsxs(StyledBoxWrap, { children: [!isAddButton && (_jsx(StyledAvatar, { children: icon !== null && icon !== void 0 ? icon : (customName ? handleAvatarInitials(customName) : null), customLinkBgColor: customLinkBgColor })), isAddButton && _jsx(StyledAddCircleOutlineIcon, {}), _jsx(StyledTypography
+                    // @ts-ignore
+                    , __assign({ 
+                        // @ts-ignore
+                        component: 'div' }, { children: customName !== null && customName !== void 0 ? customName : shortName }))] }) })) })));
+};
+export default AppHubCustom;

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

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledBoxWrap: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").LinkBaseProps, "classes"> & {
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").LinkClasses> | undefined;
+    color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<import("csstype").Property.Color | import("csstype").Property.Color[] | undefined>);
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
+    underline?: "none" | "always" | "hover" | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & {
+    ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "href" | "type" | "download" | "hrefLang" | "media" | "ping" | "rel" | "target" | "referrerPolicy" | "align" | "underline" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledAvatar: import("@emotion/styled").StyledComponent<{
+    alt?: string | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
+    imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
+        sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    sizes?: string | undefined;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "circular" | "rounded" | "square" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    customLinkBgColor?: string | undefined;
+}, {}, {}>;
+export declare const StyledAddCircleOutlineIcon: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: "inherit" | "action" | "disabled" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    fontSize?: "small" | "inherit" | "large" | "medium" | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").SVGProps<SVGSVGElement>, "string" | "className" | "style" | "clipPath" | "filter" | "mask" | "path" | "key" | "id" | "lang" | "tabIndex" | "role" | "color" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "cursor" | "direction" | "display" | "fontFamily" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontVariant" | "fontWeight" | "height" | "imageRendering" | "letterSpacing" | "opacity" | "order" | "paintOrder" | "pointerEvents" | "rotate" | "scale" | "textRendering" | "transform" | "unicodeBidi" | "visibility" | "width" | "wordSpacing" | "writingMode" | "offset" | "overflow" | "textDecoration" | "azimuth" | "clip" | "alignmentBaseline" | "baselineShift" | "clipRule" | "colorInterpolation" | "colorRendering" | "dominantBaseline" | "fill" | "fillOpacity" | "fillRule" | "floodColor" | "floodOpacity" | "glyphOrientationVertical" | "lightingColor" | "markerEnd" | "markerMid" | "markerStart" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "textAnchor" | "vectorEffect" | "href" | "name" | "type" | "media" | "target" | "origin" | "max" | "method" | "min" | "crossOrigin" | "accentHeight" | "accumulate" | "additive" | "allowReorder" | "alphabetic" | "amplitude" | "arabicForm" | "ascent" | "attributeName" | "attributeType" | "autoReverse" | "baseFrequency" | "baseProfile" | "bbox" | "begin" | "bias" | "by" | "calcMode" | "capHeight" | "clipPathUnits" | "colorInterpolationFilters" | "colorProfile" | "contentScriptType" | "contentStyleType" | "cx" | "cy" | "d" | "decelerate" | "descent" | "diffuseConstant" | "divisor" | "dur" | "dx" | "dy" | "edgeMode" | "elevation" | "enableBackground" | "end" | "exponent" | "externalResourcesRequired" | "filterRes" | "filterUnits" | "focusable" | "format" | "fr" | "from" | "fx" | "fy" | "g1" | "g2" | "glyphName" | "glyphOrientationHorizontal" | "glyphRef" | "gradientTransform" | "gradientUnits" | "hanging" | "horizAdvX" | "horizOriginX" | "ideographic" | "in2" | "in" | "intercept" | "k1" | "k2" | "k3" | "k4" | "k" | "kernelMatrix" | "kernelUnitLength" | "kerning" | "keyPoints" | "keySplines" | "keyTimes" | "lengthAdjust" | "limitingConeAngle" | "local" | "markerHeight" | "markerUnits" | "markerWidth" | "maskContentUnits" | "maskUnits" | "mathematical" | "mode" | "numOctaves" | "operator" | "orient" | "orientation" | "overlinePosition" | "overlineThickness" | "panose1" | "pathLength" | "patternContentUnits" | "patternTransform" | "patternUnits" | "points" | "pointsAtX" | "pointsAtY" | "pointsAtZ" | "preserveAlpha" | "preserveAspectRatio" | "primitiveUnits" | "r" | "radius" | "refX" | "refY" | "renderingIntent" | "repeatCount" | "repeatDur" | "requiredExtensions" | "requiredFeatures" | "restart" | "result" | "rx" | "ry" | "seed" | "slope" | "spacing" | "specularConstant" | "specularExponent" | "speed" | "spreadMethod" | "startOffset" | "stdDeviation" | "stemh" | "stemv" | "stitchTiles" | "strikethroughPosition" | "strikethroughThickness" | "surfaceScale" | "systemLanguage" | "tableValues" | "targetX" | "targetY" | "textLength" | "to" | "u1" | "u2" | "underlinePosition" | "underlineThickness" | "unicode" | "unicodeRange" | "unitsPerEm" | "vAlphabetic" | "values" | "version" | "vertAdvY" | "vertOriginX" | "vertOriginY" | "vHanging" | "vIdeographic" | "viewBox" | "viewTarget" | "vMathematical" | "widths" | "x1" | "x2" | "x" | "xChannelSelector" | "xHeight" | "xlinkActuate" | "xlinkArcrole" | "xlinkHref" | "xlinkRole" | "xlinkShow" | "xlinkTitle" | "xlinkType" | "xmlBase" | "xmlLang" | "xmlns" | "xmlnsXlink" | "xmlSpace" | "y1" | "y2" | "y" | "yChannelSelector" | "z" | "zoomAndPan"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/components/stream/AppHub/AppHubCustomStyles.js

@@ -0,0 +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, Box, Typography, Avatar, Link } from '@mui/material';
+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'
+    ? 'rgba(0,0,0,.3)'
+    : '#f5f5f5'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(255,255,255,.2)'
+    : '#ccc'; }, function (props) { return 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'
+    ? '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.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;

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

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+export declare const LogoVariants: {
+    Default: string;
+    Solid: string;
+    Outlined: string;
+    White: string;
+};
+interface IAppHubItemProps {
+    internalName: string;
+    shortName: string;
+    customName?: string;
+    subtitle?: string;
+    options?: any;
+    url?: string;
+    localization?: any;
+}
+declare const AppHubItem: (props: IAppHubItemProps) => ReactElement;
+export default AppHubItem;

package/components/stream/AppHub/AppHubProduct.js

@@ -0,0 +1,70 @@
+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 { ListItemButton, Link, TextField, Tooltip } from '../../../index';
+import LaunchIcon from '@mui/icons-material/Launch';
+import { visuallyHidden } from '@mui/utils';
+import { Constants } from './constants';
+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 = {
+    Default: 'icon',
+    Solid: 'icon-solid',
+    Outlined: 'icon-outlined',
+    White: 'icon-white'
+};
+/**
+ * Renders an application logo.
+ * @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) {
+    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 : '' }));
+};
+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;
+    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
+                        // @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
+                            // @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' }, { 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; }), 
+                            // TODO: Add link, icon and screen reader text here:
+                            renderOption: function (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) {
+                                    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'] }));
+                            } }))] })] }) })));
+};
+export default AppHubItem;

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

@@ -0,0 +1,87 @@
+/// <reference types="react" />
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledBoxWrap: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledBoxText: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledTypographySubtitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledButton: import("@emotion/styled").StyledComponent<Pick<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    disabled?: boolean | undefined;
+    disableElevation?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    endIcon?: import("react").ReactNode;
+    fullWidth?: boolean | undefined;
+    href?: string | undefined;
+    size?: "small" | "large" | "medium" | undefined;
+    startIcon?: import("react").ReactNode;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "text" | "outlined" | "contained" | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledAutocomplete: import("@emotion/styled").StyledComponent<import("@mui/material").AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, "div"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/stream/AppHub/AppHubProductStyles.js

@@ -0,0 +1,28 @@
+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'
+    ? 'rgba(255,255,255,.1)'
+    : '#ddd'; }, function (props) { return props.theme.palette.mode === 'dark'
+    ? 'rgba(0,0,0,.3)'
+    : '#f5f5f5'; }, function (props) { return 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'
+    ? 'rgba(0,0,0,.2)'
+    : '#fff'; }, function (props) { return 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'
+    ? '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'
+    ? '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;

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

@@ -0,0 +1,54 @@
+/// <reference types="react" />
+export declare const AppHubPanel: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AppHubRow: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AppHubTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const AppHubHeader: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
+    variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof import("react").HTMLAttributes<HTMLSpanElement>> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").PaperClasses> | undefined;
+    elevation?: number | undefined;
+    square?: boolean | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+    variant?: "outlined" | "elevation" | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/stream/AppHub/AppHubStyles.js

@@ -0,0 +1,13 @@
+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 } from '../../../index';
+export var AppHubPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 1rem;\n  max-width: 1000px;\n"], ["\n  padding: 1rem;\n  max-width: 1000px;\n"])));
+export var AppHubRow = styled(Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: 5rem 0 0;\n"], ["\n  margin: 5rem 0 0;\n"])));
+export var AppHubTitle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: ", ";\n  margin-bottom: 2rem;\n"], ["\n  font-size: 2rem;\n  font-weight: 700;\n  line-height: 1.3;\n  color: ", ";\n  margin-bottom: 2rem;\n"])), function (props) { return props.theme.palette.text.primary; });
+export var AppHubHeader = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1rem;\n  font-weight: 500;\n  color: ", ";\n  margin: 0 0 1rem;\n"], ["\n  font-size: 1rem;\n  font-weight: 500;\n  color: ", ";\n  margin: 0 0 1rem;\n"])), function (props) { return props.theme.palette.text.secondary; });
+export var StyledPaper = styled(Paper)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n"], ["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  background: #fff;\n"])));
+export var StyledBox = styled(Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

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

@@ -0,0 +1,85 @@
+/// <reference types="react" />
+export declare const Constants: Readonly<{
+    DataRowType: {
+        Product: string;
+        CustomLink: string;
+    };
+    AssetsUrl: "https://uuicdn.learningpool.com/";
+    AddButtonOrder: {
+        Start: string;
+        End: string;
+    };
+}>;
+export declare const hubApplications: ({
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    url: string;
+    children?: undefined;
+    customName?: undefined;
+    subtitle?: undefined;
+} | {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    children: {
+        applicationId: number;
+        applicationName: string;
+        shortName: string;
+        internalName: string;
+        onClick: () => Window | null;
+    }[];
+    url?: undefined;
+    customName?: undefined;
+    subtitle?: undefined;
+} | {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName: string;
+    url: string;
+    children?: undefined;
+    subtitle?: undefined;
+} | {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName: string;
+    children: {
+        applicationId: number;
+        applicationName: string;
+        shortName: string;
+        internalName: string;
+        customName: string;
+        onClick: () => Window | null;
+    }[];
+    url?: undefined;
+    subtitle?: undefined;
+} | {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName: string;
+    subtitle: string;
+    url: string;
+    children?: undefined;
+})[];
+export declare const hubCustomLinks: ({
+    customName: string;
+    url: string;
+    customLinkBgColor?: undefined;
+} | {
+    customName: string;
+    url: string;
+    customLinkBgColor: string;
+})[];
+export declare const hubSupportItems: {
+    customName: string;
+    url: string;
+    icon: JSX.Element;
+}[];

package/components/stream/AppHub/constants.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Home } from '@mui/icons-material';
+export var Constants = Object.freeze({
+    DataRowType: {
+        Product: 'product',
+        CustomLink: 'custom-link'
+    },
+    AssetsUrl: 'https://uuicdn.learningpool.com/',
+    AddButtonOrder: {
+        Start: 'start',
+        End: 'end'
+    }
+});
+export var hubApplications = [
+    { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
+    {
+        applicationId: 2,
+        applicationName: 'Stream Analytics',
+        shortName: 'Long Wrapping Text Name Truncation Test Stream Analytics',
+        internalName: 'analytics',
+        children: [
+            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: function () { return window.open('http://learningpool.com', '_blank'); } },
+            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: function () { return window.open('http://learningpool.com', '_blank'); } },
+            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: function () { return window.open('http://learningpool.com', '_blank'); } },
+            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: function () { return window.open('http://learningpool.com', '_blank'); } },
+            { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', onClick: function () { return window.open('http://learningpool.com', '_blank'); } }
+        ]
+    },
+    { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
+    {
+        applicationId: 7,
+        applicationName: 'Stream LMS',
+        shortName: 'LMS',
+        internalName: 'lms',
+        customName: 'Custom Name Test',
+        children: [
+            { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: 'Custom Name Test', onClick: function () { return window.open('http://learningpool.com', '_blank'); } },
+            { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: 'Custom Name Test', onClick: function () { return window.open('http://learningpool.com', '_blank'); } },
+            { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: 'Custom Name Test', onClick: function () { return window.open('http://learningpool.com', '_blank'); } }
+        ]
+    },
+    { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', subtitle: 'Subtitle Test', url: 'https://learningpool.com' }
+];
+export var hubCustomLinks = [
+    { customName: 'Learning Pool', url: 'https://learningpool.com' },
+    { customName: 'Custom Link', url: 'https://learningpool.com' },
+    { customName: 'Another Custom Link', url: 'https://learningpool.com', customLinkBgColor: '#ff0000' },
+    { customName: 'Wrapping Text Name Truncation Test Link', url: 'https://learningpool.com' },
+    { customName: 'Link', url: 'https://learningpool.com' },
+    { customName: 'Another Custom Link', url: 'https://learningpool.com' },
+    { customName: 'Another Custom Link', url: 'https://learningpool.com' },
+    { customName: 'Another Custom Link', url: 'https://learningpool.com' },
+    { customName: 'Another Custom Link', url: 'https://learningpool.com' }
+];
+export var hubSupportItems = [
+    { customName: 'Contact us', url: 'https://learningpool.com', icon: _jsx(Home, {}) }
+];

package/index.d.ts

@@ -129,6 +129,7 @@ export { default as Drawer } from './components/navigation/Drawer/Drawer';
 export { default as List } from './components/datadisplay/List/List';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
+export { default as AppHub } from './components/stream/AppHub/AppHub';
 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,6 +140,7 @@ export { default as List } from './components/datadisplay/List/List';
 export { default as SideInSide } from './components/pages/SideInSide/SideInSide';
 export { default as ErrorPage } from './components/pages/ErrorPage/ErrorPage';
 // Stream Suite components
+export { default as AppHub } from './components/stream/AppHub/AppHub';
 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/lang/en-us.d.ts

@@ -1,9 +1,17 @@
 export const defaultMessages: {
     'app-switcher': string;
     'your-apps': string;
+    'custom-apps': string;
+    'add-custom-link': string;
+    'lp-apps': string;
+    questions: string;
     'back-to': string;
     'select-an-organisation': string;
     search: string;
+    open: string;
+    'select-org': string;
+    'open-in-new-window': string;
+    'stream-hub-welcome': string;
     'site-navigation': string;
     'open-navigation': string;
     'close-navigation': string;

package/lang/en-us.js

@@ -1,10 +1,18 @@
 export var defaultMessages = {
     // App Switcher
     'app-switcher': 'App Switcher',
-    'your-apps': 'Your Stream suite apps',
+    'your-apps': 'Your Apps',
+    'custom-apps': 'Explore Custom Apps',
+    'add-custom-link': 'Add Custom Link',
+    'lp-apps': 'Explore Learning Pool Apps',
+    questions: 'Questions',
     'back-to': 'Back',
     'select-an-organisation': 'Select an organisation',
     search: 'Search',
+    open: 'Open',
+    'select-org': 'Organisation',
+    'open-in-new-window': 'opens in a new window',
+    'stream-hub-welcome': 'Welcome to Stream Home',
     // Navigation
     'site-navigation': 'Site navigation',
     'open-navigation': 'Open navigation',

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.6.10",
+  "version": "1.7.1",
   "private": false,
   "main": "index.js",
   "module": "index.js",

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

@@ -0,0 +1,12 @@
+export interface IApplicationHubProps {
+    data?: any;
+    localization?: any;
+    isPageLayout?: boolean;
+    customLinkBgColor?: string;
+}
+export interface IApplicationHubRowProps {
+    items: any;
+    title: string;
+    type?: any;
+    addButton?: any;
+}

package/types/components/stream/AppHub.js

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

package/types/index.d.ts

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

package/utils/helpers.d.ts

@@ -4,6 +4,18 @@
  * @returns string
  */
 export declare const handleAvatarInitials: (avatarName: string) => string;
+/**
+ * Accepts a string and returns a color hex code e.g. #000000
+ * @param string string - Accepts any string
+ * @returns string
+ */
+export declare const stringToColor: (string: string) => string;
+/**
+ * Accepts a string and sets the background color and initials for an avatar
+ * @param string string - Accepts any string
+ * @returns string
+ */
+export declare const stringAvatar: (name: string) => any;
 /**
  * Accepts a number and returns a react-spring style object from useSpring
  * @param trigger boolean - Trigger to reverse the animation from main component

package/utils/helpers.js

@@ -27,6 +27,39 @@ export var handleAvatarInitials = function (avatarName) {
     }
     return "".concat(firstInitial).concat(secondInitial);
 };
+/**
+ * Accepts a string and returns a color hex code e.g. #000000
+ * @param string string - Accepts any string
+ * @returns string
+ */
+export var stringToColor = function (string) {
+    var hash = 0;
+    var i;
+    /* eslint-disable no-bitwise */
+    for (i = 0; i < string.length; i += 1) {
+        hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    var color = '#';
+    for (i = 0; i < 3; i += 1) {
+        var value = (hash >> (i * 8)) & 0xff;
+        color += "00".concat(value.toString(16)).slice(-2);
+    }
+    /* eslint-enable no-bitwise */
+    return color;
+};
+/**
+ * Accepts a string and sets the background color and initials for an avatar
+ * @param string string - Accepts any string
+ * @returns string
+ */
+export var stringAvatar = function (name) {
+    return {
+        sx: {
+            bgcolor: stringToColor(name)
+        },
+        children: handleAvatarInitials(name)
+    };
+};
 var STAGGER_ITEMS_DELAY = 70;
 /**
  * Accepts a number and returns a react-spring style object from useSpring