@learningpool/ui 1.6.0-beta.12 → 1.6.0-beta.14

package/components/landmarks/Header/Header.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+interface AdditionalButtonItemProps {
+    label: string;
+    onClick?: any;
+    icon?: React.ReactElement;
+    hide?: boolean;
+}
+interface BreadcrumbItemProps {
+    label: string;
+    href: string;
+    color?: string;
+}
+interface HeaderProps {
+    title: string;
+    titleComponent?: React.ElementType<any>;
+    maxCharactersPerLine?: number;
+    subtitle?: string;
+    callToAction?: any;
+    callToActionComponent?: 'button' | 'link' | string;
+    additionalButtons?: AdditionalButtonItemProps[];
+    isSticky?: boolean;
+    breadcrumbItems?: BreadcrumbItemProps[];
+    maxBreadcumbItems?: number;
+}
+declare const Header: (props: HeaderProps) => React.ReactElement;
+export default Header;

package/components/landmarks/Header/Header.js

@@ -0,0 +1,75 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import Button from '@mui/material/Button';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import useTheme from '@mui/material/styles/useTheme';
+import HeaderActionButtons from './HeaderActionButtons';
+import { StyledAdditionalButtonsContainer, StyledBreadcrumbs, StyledHeaderPrimary, StyledHeaderSecondary, StyledPaper } from './HeaderStyles';
+import { DEFAULT_MAX_CHARACTERS_PER_LINE } from '../../../utils/constants';
+var Header = function (props) {
+    var _a, _b;
+    var title = props.title, subtitle = props.subtitle, breadcrumbItems = props.breadcrumbItems, maxBreadcumbItems = props.maxBreadcumbItems, callToAction = props.callToAction, callToActionComponent = props.callToActionComponent, isSticky = props.isSticky, titleComponent = props.titleComponent, maxCharactersPerLine = props.maxCharactersPerLine, rest = __rest(props, ["title", "subtitle", "breadcrumbItems", "maxBreadcumbItems", "callToAction", "callToActionComponent", "isSticky", "titleComponent", "maxCharactersPerLine"]);
+    var additionalButtons = props.additionalButtons;
+    var theme = useTheme();
+    var isMediumAndUp = useMediaQuery(theme.breakpoints.up('md'));
+    useEffect(function () {
+        if (!callToAction) {
+            return;
+        }
+        callToAction.hide = isMediumAndUp;
+        // No additional buttons exist so CallToAction is the only item in the list
+        if (!additionalButtons || additionalButtons.length === 0) {
+            if (callToAction) {
+                additionalButtons = [];
+                additionalButtons.push(callToAction);
+                return;
+            }
+        }
+        // Additional buttons exist so add the CallToAction as the first item in the list
+        if (additionalButtons && additionalButtons.length > 0) {
+            var callToActionIndex = additionalButtons.indexOf(callToAction);
+            var hasCallToActionInArray = callToActionIndex !== -1;
+            if (!hasCallToActionInArray) {
+                // Add the CallToAction item to the top of the Menu
+                additionalButtons.splice(0, 0, callToAction);
+            }
+            if (hasCallToActionInArray) {
+                // Show or hide the CallToAction item based on 'isMediumAndUp'
+                additionalButtons[callToActionIndex].hide = callToAction.hide;
+            }
+        }
+    }, [props.additionalButtons, isMediumAndUp]);
+    return (_jsxs(StyledPaper, __assign({}, rest, { elevation: 0, className: "".concat(isSticky && 'is-sticky') }, { children: [_jsxs(StyledHeaderPrimary, { children: [breadcrumbItems && breadcrumbItems.length > 0 && (_jsx(StyledBreadcrumbs, __assign({ maxItems: maxBreadcumbItems !== null && maxBreadcumbItems !== void 0 ? maxBreadcumbItems : 2, "aria-label": 'breadcrumb', separator: theme.direction === 'ltr' ? '/' : '\\' }, { children: breadcrumbItems.map(function (breadcrumbItem) {
+                            var _a;
+                            return (_jsx(Link, __assign({ underline: 'hover', color: (_a = breadcrumbItem.color) !== null && _a !== void 0 ? _a : 'inherit', href: breadcrumbItem.href }, { children: breadcrumbItem.label })));
+                        }) }))), _jsx(Typography, __assign({ component: titleComponent !== null && titleComponent !== void 0 ? titleComponent : 'h1', 
+                        // Good support for 'ch' https://caniuse.com/ch-unit
+                        style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") } }, { children: title })), subtitle && (_jsx(Typography, __assign({ component: 'h2', variant: 'subtitle1', color: theme.palette.text.secondary, style: { maxWidth: "".concat(maxCharactersPerLine !== null && maxCharactersPerLine !== void 0 ? maxCharactersPerLine : DEFAULT_MAX_CHARACTERS_PER_LINE, "ch") } }, { children: subtitle })))] }), _jsxs(StyledHeaderSecondary, { children: [isMediumAndUp && callToAction && (callToActionComponent && callToActionComponent === 'link'
+                        ? _jsx(Button, __assign({ href: '#', startIcon: (_a = callToAction.icon) !== null && _a !== void 0 ? _a : null }, { children: callToAction.label }))
+                        : _jsx(Button, __assign({ startIcon: (_b = callToAction.icon) !== null && _b !== void 0 ? _b : null, variant: 'contained' }, { children: callToAction.label }))), additionalButtons && additionalButtons.length > 0 && (_jsx(StyledAdditionalButtonsContainer, { children: _jsx(HeaderActionButtons, { forceListView: true, options: additionalButtons }) }))] })] })));
+};
+export default Header;

package/components/landmarks/Header/HeaderActionButtons.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const HeaderActionButtons: (props: any) => JSX.Element | null;
+export default HeaderActionButtons;

package/components/landmarks/Header/HeaderActionButtons.js

@@ -0,0 +1,66 @@
+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 { useState } from 'react';
+import Icon from '@mui/material/Icon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+var MAX_ICONS = 0;
+var HeaderActionButtons = function (props) {
+    var options = props.options, styles = props.styles, forceListView = props.forceListView;
+    var _a = useState(null), anchorEl = _a[0], setAnchorEl = _a[1];
+    var handleClick = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(event.currentTarget);
+    };
+    var handleClose = function (event) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        setAnchorEl(null);
+    };
+    var handleOptionClick = function (event, option) {
+        event === null || event === void 0 ? void 0 : event.stopPropagation();
+        option === null || option === void 0 ? void 0 : option.onClick();
+        handleClose(event);
+    };
+    if (!options) {
+        console.log('Did you mean to pass items using the `options` parameter?');
+        return null;
+    }
+    // Show icon buttons if less than MAX_ICONS
+    if (options.length <= MAX_ICONS && !forceListView) {
+        return (_jsx("div", __assign({ style: styles }, { children: options.map(function (option) {
+                var label = option.label, icon = option.icon, onClick = option.onClick;
+                var handleOptionClick = onClick;
+                return (_jsx(Tooltip, __assign({ title: label, "aria-label": label, placement: 'bottom', enterDelay: 500, enterNextDelay: 50, leaveDelay: 50, disableInteractive: true }, { children: _jsx(IconButton, __assign({ size: 'small', "aria-label": label, onClick: handleOptionClick }, { children: _jsx(Icon, { children: icon }) })) }), label));
+            }) })));
+    }
+    // Show menu and v-ellipsis if more than MAX_ICONS
+    return (_jsxs("div", __assign({ style: styles }, { children: [_jsx(IconButton, __assign({ "aria-label": 'more', "aria-haspopup": 'true', onClick: handleClick }, { children: _jsx(MoreVertIcon, {}) })), _jsx(Menu, __assign({ id: 'actionButtonMenu', anchorEl: anchorEl, open: Boolean(anchorEl), onClose: handleClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                }, 
+                // getContentAnchorEl={null}
+                transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'center'
+                } }, { children: options.map(function (option) {
+                    var label = option.label, isDisabled = option.isDisabled, actionKey = option.actionKey, hide = option.hide;
+                    if (hide) {
+                        return null;
+                    }
+                    return (_jsx(MenuItem, __assign({ onClick: function (event) { return handleOptionClick(event, option); }, "aria-label": label, disabled: isDisabled }, { children: label }), actionKey));
+                }) }))] })));
+};
+export default HeaderActionButtons;

package/components/landmarks/Header/HeaderStyles.d.ts

@@ -0,0 +1,55 @@
+/// <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 StyledBreadcrumbs: import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").BreadcrumbsClasses> | undefined;
+    expandText?: string | undefined;
+    itemsAfterCollapse?: number | undefined;
+    itemsBeforeCollapse?: number | undefined;
+    maxItems?: number | undefined;
+    separator?: import("react").ReactNode;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
+    ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "separator" | "sx" | "expandText" | "itemsAfterCollapse" | "itemsBeforeCollapse" | "maxItems"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledHeaderPrimary: 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 StyledHeaderSecondary: 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 StyledAdditionalButtonsContainer: 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 StyledBox: 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>, {}, {}>;

package/components/landmarks/Header/HeaderStyles.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 { Box, Paper } from '../../../index';
+import { Breadcrumbs, styled } from '@mui/material';
+export var StyledPaper = styled(Paper)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  position: relative;\n  width: 100%;\n\n  &.is-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  position: relative;\n  width: 100%;\n\n  &.is-sticky {\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledBreadcrumbs = styled(Breadcrumbs)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: ", ";\n  margin-bottom: 0.5rem;\n\n  ol {\n    flex-direction: ", ";\n  }\n"], ["\n  font-size: ", ";\n  margin-bottom: 0.5rem;\n\n  ol {\n    flex-direction: ", ";\n  }\n"])), function (props) { return props.theme.typography.subtitle2.fontSize; }, function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledHeaderPrimary = styled(Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  padding: 1rem;\n  padding-inline-start: 2rem;\n\n  h1,\n  h4 {\n    font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n    text-align: ", ";\n  }\n"], ["\n  align-items: ", ";\n  display: flex;\n  flex: 1 auto;\n  flex-direction: column;\n  padding: 1rem;\n  padding-inline-start: 2rem;\n\n  h1,\n  h4 {\n    font-size: clamp(1.125rem, 3.25vw, 2.75rem);\n    text-align: ", ";\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'flex-start' : 'flex-end'; }, function (props) { return props.theme.direction === 'ltr' ? 'left' : 'right'; });
+export var StyledHeaderSecondary = styled(Box)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-end;\n  padding: 1rem;\n  padding-inline-end: 2rem;\n\n  button,\n  a {\n    white-space: nowrap;\n  }\n"], ["\n  align-items: center;\n  display: flex;\n  flex-direction: ", ";\n  justify-content: flex-end;\n  padding: 1rem;\n  padding-inline-end: 2rem;\n\n  button,\n  a {\n    white-space: nowrap;\n  }\n"])), function (props) { return props.theme.direction === 'ltr' ? 'row' : 'row-reverse'; });
+export var StyledAdditionalButtonsContainer = styled(Box)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  margin-inline-start: ", ";\n  margin-inline-end: ", ";\n"], ["\n  margin-inline-start: ", ";\n  margin-inline-end: ", ";\n"])), function (props) { return props.theme.direction === 'ltr' ? '0.5rem' : '0'; }, function (props) { return props.theme.direction === 'rtl' ? '0.5rem' : '0'; });
+export var StyledBox = styled(Box)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (props) { return props.theme.palette.background.default; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts

@@ -285,7 +285,7 @@ export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;
@@ -327,7 +327,7 @@ export declare const StyledChildListItem: import("@emotion/styled").StyledCompon
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledChildListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledChildListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -369,7 +369,7 @@ export declare const StyledListSecondaryItem: import("@emotion/styled").StyledCo
     } | undefined;
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "key" | keyof import("react").LiHTMLAttributes<HTMLLIElement>> & {
     ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
-}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "ContainerComponent" | "ContainerProps" | "divider" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "className" | "style" | "classes" | "button" | "children" | "sx" | "alignItems" | "disabled" | "autoFocus" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const StyledListSecondaryButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
     action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
     centerRipple?: boolean | undefined;

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.d.ts

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

package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.d.ts

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

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -24,7 +24,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
 import { Avatar, List, Tooltip } from '../../../index';
-import { Box } from '@mui/material';
+import { Box, Modal } from '@mui/material';
 import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
 import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher';
 import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
@@ -217,11 +217,6 @@ var VerticalNavigation = function (props) {
                                     : null] }))] })) }))] }))); };
     return (_jsxs(StyledAside, __assign({ "aria-label": "Site navigation" }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
                     display: isPersistent ? 'none' : 'block'
-                } }), _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: isDrawerOpen ? 'temporary' : 'permanent', ModalProps: {
-                    keepMounted: true,
-                    disablePortal: true,
-                    open: isDrawerOpen,
-                    onClose: toggleDrawer(false)
-                } }, { children: listContent() }))] })));
+                } }), _jsx(Modal, __assign({ "aria-hidden": false, keepMounted: true, disablePortal: true, open: isDrawerOpen, onClose: toggleDrawer(false) }, { children: _jsx(StyledDrawer, __assign({ id: 'vertical-navigation', anchor: 'left', open: isDrawerOpen || isPersistent, onClose: toggleDrawer(false), variant: 'permanent' }, { children: listContent() })) }))] })));
 };
 export default VerticalNavigation;

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

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

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

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

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

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

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

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

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

@@ -15,11 +15,11 @@ var ICON = {
 };
 export var ListItem = styled(SSListItem, {
     shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
-})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"], ["\n  align-items: flex-start;\n  color: ", ";\n  flex-direction: column;\n  min-height: ", "px;\n  padding: 0 !important;\n  transition: width\n              ", "ms\n              ", "\n              ", ";\n  width: ", "px;\n\n  .MuiListItemIcon-root: {\n    margin: ", " 0 0;\n  }\n\n  .MuiListItemText-root .MuiTypography-root: {\n    white-space: normal;\n  }\n"])), function (props) { return props.theme.palette.mode === 'dark'
     ? props.theme.palette.primary.contrastText
     : props.theme.palette.getContrastText(props.theme.palette.background.paper); }, ICON.Height + 8, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.isDrawerOpen ? '0ms' : '250ms'; }, DRAWER_WIDTH.Expanded, function (props) { return props.theme.spacing(0.5); });
 export var ListItemButton = styled(SSListItemButton, {
-    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'isExpanded'; }
+    shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
 })(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"], ["\n  align-items: flex-start !important;\n  background-color: ", ";\n  color: ", ";\n  display: flex;\n  flex-wrap: wrap;\n  min-height: ", "px;\n  max-height: ", ";\n  text-decoration: none;\n  text-transform: none;\n  transition: all\n              ", "ms\n              ", "\n              0ms !important;\n  padding: 0 ", " 0 0;\n  width: 100%;\n\n  /* Indicator */\n  :before {\n    background-color: ", ";\n    border-radius: 50px;\n    content: '';\n    height: calc(100% - 10px);\n    opacity: 0;\n    position: absolute;\n    top: 5px;\n    left: 3px;\n    transition: all\n                ", "ms\n                ", ";\n    width: 4px;\n    transform: scale(.95);\n  }\n\n  :hover:before,\n  :focus-visible:before {\n    opacity: 1;\n    transform: scale(1);\n  }\n\n  :hover {\n    background-color: ", ";\n  }\n\n  :focus-visible {\n    background-color: ", ";\n  }\n\n  :active {\n    background-color: transparent\n  }\n"])), function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.main
@@ -29,9 +29,7 @@ export var ListItemButton = styled(SSListItemButton, {
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
 }, ICON.Height + 8, function (props) { return props.isDrawerOpen
-    ? props.isExpanded
-        ? 'auto'
-        : '200px'
+    ? 'auto'
     : "".concat(ICON.Height + 8, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.spacing(2); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? 'rgba(255, 255, 255, 0.5)'

package/components/navigation/VerticalNavigation/VerticalNavigationStyles.js

@@ -81,9 +81,9 @@ export var NotchSeemMask = styled(Box)(templateObject_12 || (templateObject_12 =
     : props.theme.palette.background.paper; });
 export var StyledDrawer = styled(Drawer, {
     shouldForwardProp: function (prop) { return prop !== 'open'; }
-})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  white-space: nowrap;\n  width: ", ";\n  transition: width\n              ", "ms\n              ", ";\n\n  @media (min-width: ", ") {\n    width: ", ";\n  }\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n    [theme.breakpoints.up('sm')] {\n      width: ", ";\n    }\n  }\n"])), function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.theme.breakpoints.values.sm; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
+})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"], ["\n  box-shadow: none;\n  box-sizing: border-box;\n  flexshrink: 0;\n  overflow-x: visible;\n  transition: width\n              ", "ms\n              ", ";\n  white-space: nowrap;\n  width: ", ";\n\n  .MuiDrawer-paper {\n    background: transparent none;\n    border: 0;\n    box-shadow: none;\n    color: ", ";\n    overflow: visible !important;\n    overflow-x: visible;\n    transform: translateX(0) !important;\n    transition: width\n                ", "ms\n                ", ";\n    visibility: visible !important;\n    width: ", ";\n  }\n"])), function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) {
     return props.theme.palette.mode === 'dark'
         ? props.theme.palette.primary.contrastText
         : props.theme.palette.getContrastText(props.theme.palette.background.paper);
-}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(8), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
+}, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return !props.open ? "calc(".concat(props.theme.spacing(7), " + 1px)") : "".concat(DRAWER_WIDTH.Expanded, "px"); });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;

package/index.d.ts

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

package/index.js

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

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.6.0-beta.12",
+  "version": "1.6.0-beta.14",
   "private": false,
   "main": "index.js",
   "module": "index.js",

package/utils/constants.d.ts

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

package/utils/constants.js

@@ -4,3 +4,6 @@ export var MOBILE_NAV_PANEL_TYPES = {
     SEARCH: 'search',
     AVATAR: 'avatar'
 };
+// 50 seems a reasonable default limit
+// https://m2.material.io/design/typography/understanding-typography.html#readability
+export var DEFAULT_MAX_CHARACTERS_PER_LINE = 50;

package/utils/theme.d.ts

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

package/utils/theme.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { amber, blue, common } from '@mui/material/colors';
+import { amber, blue } from '@mui/material/colors';
 var DEFAULT_HEADER_TYPOGRAPHY = {
     fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif'
 };
@@ -40,7 +40,7 @@ export var lightTheme = {
         },
         divider: 'rgba(0, 0, 0, 0.075)',
         text: {
-            primary: common.black
+            primary: 'rgba(0,0,0,0.95)'
         }
     }
 };
@@ -49,7 +49,7 @@ export var darkTheme = {
         primary: amber,
         divider: 'rgba(255, 255, 255, 0.075)',
         text: {
-            primary: common.white
+            primary: 'rgba(255,255,255,0.95)'
         }
     }
 };