@learningpool/ui 1.12.1 → 1.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/assets/Images.js +1 -1
  2. package/components/navigation/MobileNavigation/MobileNavigation.js +2 -2
  3. package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.d.ts +12 -12
  4. package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.js +1 -1
  5. package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts +24 -24
  6. package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.js +1 -1
  7. package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.js +3 -3
  8. package/components/navigation/VerticalNavigation/VerticalNavigation.js +26 -10
  9. package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +24 -6
  10. package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts +14 -14
  11. package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js +1 -1
  12. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js +8 -3
  13. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js +3 -3
  14. package/components/navigation/helpers.js +2 -2
  15. package/components/pages/SideInSide/SideInSide.js +1 -1
  16. package/components/stream/AppHub/AppHubCustomStyles.d.ts +22 -22
  17. package/components/stream/AppHub/AppHubCustomStyles.js +5 -1
  18. package/components/stream/AppHub/constants.js +2 -2
  19. package/components/stream/AppSwitcher/AppSwitcher.d.ts +1 -1
  20. package/components/stream/AppSwitcher/AppSwitcher.js +22 -4
  21. package/package.json +1 -1
  22. package/types/components/navigation/VerticalNavigation.d.ts +2 -0
  23. package/types/components/navigation/VerticalNavigationAvatar.d.ts +1 -0
package/assets/Images.js CHANGED
@@ -10,7 +10,7 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { createSvgIcon } from '@mui/material/utils';
13
+ import createSvgIcon from '@mui/material/utils/createSvgIcon';
14
14
  export var StreamSuiteLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", "data-name": "Layer 1", viewBox: "0 0 447.9 484.8" }, { children: _jsx("path", { d: "M447.9 304.4V321l-1 5.2c-3 21.8-12.5 40.5-27.4 56.4a102.6 102.6 0 0 1-34.1 24A98 98 0 0 1 325 413c-2.2-.5-3.2 0-4 2.1a100.5 100.5 0 0 1-32.4 47.2 101.3 101.3 0 0 1-48 21l-11 1.4h-11.7a6.8 6.8 0 0 0-1.5-.4A102.5 102.5 0 0 1 172 471a96.6 96.6 0 0 1-30.8-27.6 103.7 103.7 0 0 1-14.6-28.7c-.5-1.4-.8-2.5-2.8-2a98.5 98.5 0 0 1-32.5 1.5 101 101 0 0 1-35.8-10.8 97.8 97.8 0 0 1-29.7-23A102 102 0 0 1 7 350a105.4 105.4 0 0 1-5.5-55.2 100.7 100.7 0 0 1 13-35.3c2.7-4.7 6.3-5.1 10.2-1.3l4.8 4.3a102 102 0 0 0 37.7 20.6c5.1 1.6 6.5 5 3.7 9.6a35.7 35.7 0 0 0 7.9 48.3 36.3 36.3 0 0 0 22.4 9c15.2.5 26.3-6.9 33.8-19.3 10.5-17.2 20.3-34.8 30.3-52.2.6-1 1-2 1.7-3.5l-4-.2c-22.2 0-44.5 0-66.7-.3a103 103 0 0 1-76.3-41A95.8 95.8 0 0 1 .8 161a106 106 0 0 1 33.9-66A90 90 0 0 1 54 81.4c20.6-11 42.5-13.6 65.4-10.3 7.5 1.2 5.5 2.5 8.2-4.7a99 99 0 0 1 32-44.8A102.2 102.2 0 0 1 222.4 0a106 106 0 0 1 32.2 4.5A98.4 98.4 0 0 1 293 25.8a100.2 100.2 0 0 1 28 43.5c.8 2.2 1.6 2.9 4 2.4a102 102 0 0 1 28-1.9 92.8 92.8 0 0 1 37.9 10.6q46 24.9 55.6 76.4c.6 3 1 6 1.4 9.1v14.4a23.2 23.2 0 0 0-.6 2.6 100.8 100.8 0 0 1-14.6 43c-2.3 3.6-6 4-9.1 1-2.1-2-4.1-4-6.3-5.8a97.4 97.4 0 0 0-35.4-19.1c-7-2-8-5.7-4.3-11.5a32.5 32.5 0 0 0 5.1-22.2 37.6 37.6 0 0 0-15-25.7 36.4 36.4 0 0 0-52.8 8c-3.6 4.7-6.2 10-9.2 15l-24 41.6a17 17 0 0 0-.9 2.4l3.7.2 64.2.3a86.7 86.7 0 0 1 24.3 3.4 102.6 102.6 0 0 1 50 32.1 100.7 100.7 0 0 1 23 48l1.9 10.8ZM261.5 102.9a37.2 37.2 0 0 0-4-17c-7-13.4-17.8-21.3-33.2-21.4-13.3 0-24 5.8-31.5 16.7a34.9 34.9 0 0 0-2.3 38.2c7.6 14.2 16 28 24.2 42a9.8 9.8 0 0 1 1 8.7l-12.4 37.7a9.1 9.1 0 0 0 0 2.9 9.3 9.3 0 0 0 2.2-2c2.5-4 4.8-8.2 7.2-12.4l42-72.5c3.9-6.5 7-13.2 6.8-21Zm-.2 278.7a30.6 30.6 0 0 0-4-16c-8.3-14.8-16.9-29.5-25.4-44.2a6 6 0 0 1-.5-5.5l13.1-39.5a6.6 6.6 0 0 0-.2-2.5c-.6.5-1.5.9-1.9 1.5l-20 34.5-29.6 51.2a42.3 42.3 0 0 0-6.5 19.7 35 35 0 0 0 13 29.8 37.3 37.3 0 0 0 62-29Zm-94.2-172-1.4-2.9-27.7-48a54 54 0 0 0-11.5-15.4c-20.4-17-48.8-7-58.2 13.3-12 25.8 9.4 53.5 34 53.2 20.4-.2 41 0 61.4 0l3.4-.3ZM280.7 275a22.1 22.1 0 0 0 .9 2.2c10.4 18 20.7 36 31.3 54a35.5 35.5 0 0 0 29.4 18.6 37.7 37.7 0 0 0 39.9-43.7 37.9 37.9 0 0 0-36-31.2h-65.5Z" }) })), 'StreamSuite');
15
15
  export var LearningPoolLogo = createSvgIcon(_jsx("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 804 174" }, { children: _jsx("path", { fill: "#0069B4", d: "M155.5 0A44 44 0 0 0 121 16.5l-1 1.2-1.2-1a72.5 72.5 0 1 0-46.4 128.1 72.8 72.8 0 0 0 70.7-56.6l.4-1.5 1.5.4a44.2 44.2 0 0 0 44.8-15 44.2 44.2 0 0 0 5.6-47 44.2 44.2 0 0 0-40-25.1zM113 115.2H72.4a42.9 42.9 0 1 1 29.2-11.5l11.4 11.5zm42.5-47.8h-22l6.1-6.2a23.2 23.2 0 1 1 15.9 6.2zm56.2-8.5h14v84h-14zm76 54.3a31.1 31.1 0 0 0-7.5-21.1 29.2 29.2 0 0 0-40.7.2 31.8 31.8 0 0 0-7.8 22 31.2 31.2 0 0 0 7.9 22.2 27.8 27.8 0 0 0 20.9 8.3c2.8 0 5.6-.3 8.4-1a24 24 0 0 0 7.3-3 28.4 28.4 0 0 0 6.3-5.1c1.7-2 3.3-4 4.7-6.2l-12.7-7a28 28 0 0 1-6 6.9 12.3 12.3 0 0 1-7.4 2.1 13 13 0 0 1-9.6-3.7 15.6 15.6 0 0 1-4-9.1v-.4h40.1v-5.1zm-41.7-5.3.3-1.1a16.8 16.8 0 0 1 2-4.6 14 14 0 0 1 3-3.5 13.3 13.3 0 0 1 4.1-2.2 14.5 14.5 0 0 1 4.8-.8c6.8-.4 12.8 4.4 14 11l.3 1.2H246zm90.4-22.4V91a24.2 24.2 0 0 0-16.9-7.2 24.9 24.9 0 0 0-19.2 8.6 30.7 30.7 0 0 0-7.7 21.2 31.7 31.7 0 0 0 7.7 21.6 25.4 25.4 0 0 0 19.6 8.5 25 25 0 0 0 16.5-6.7v5.1h14.2V85.5h-14.2zm-3.6 41a14.3 14.3 0 0 1-11.1 4.7 13.5 13.5 0 0 1-10.6-4.9 18.9 18.9 0 0 1-4.1-12.6 18 18 0 0 1 4.1-12.2 13.8 13.8 0 0 1 10.9-4.8 14 14 0 0 1 10.8 4.8A18.3 18.3 0 0 1 337 114a18.5 18.5 0 0 1-4.3 12.5zm61.7-38.9-6.3 13-.6-.4a11.3 11.3 0 0 0-6.6-2.5c-6.5 0-9.7 5-9.7 15.4v29.7h-13.7V85.5h13.7v4a23.9 23.9 0 0 1 5.3-4.1 14.6 14.6 0 0 1 6.7-1.5 20.7 20.7 0 0 1 10.7 3.4l.5.3zm53 20.2v35H433v-32a19.7 19.7 0 0 0-2.2-11 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.6 14.3v27.7h-14.3V85.5h14.3v4.4a21.8 21.8 0 0 1 14.9-6 20.3 20.3 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5m22.9-40a8.7 8.7 0 0 1-2.7 6.4 8.5 8.5 0 0 1-6.3 2.7 9 9 0 0 1-6.4-2.6 9 9 0 0 1-2.6-6.4 8.5 8.5 0 0 1 2.7-6.3 8.6 8.6 0 0 1 6.3-2.7 8.7 8.7 0 0 1 6.3 2.7 8.5 8.5 0 0 1 2.7 6.3m-16 18h14v57h-14zm71 22v35H511v-32a19.7 19.7 0 0 0-2.2-11.1 8.8 8.8 0 0 0-7.8-3 9.4 9.4 0 0 0-8.7 4 28.9 28.9 0 0 0-2.5 14.3v27.7h-14.4V85.5h14.4v4.4a21.8 21.8 0 0 1 14.8-6 20.2 20.2 0 0 1 15.8 6.4c3.3 3.6 5 9.5 5 17.5M574 85.4v5.4a23 23 0 0 0-16.9-6.9 24.4 24.4 0 0 0-19.9 9.3 32.9 32.9 0 0 0-7 21 31.2 31.2 0 0 0 7.6 21.3 25.1 25.1 0 0 0 17.8 8.5 25.2 25.2 0 0 0 18.4-7v6.3c0 11.2-4.4 16.7-13.5 16.7a13.4 13.4 0 0 1-11.2-5 14.2 14.2 0 0 1-2.4-6v-.6h-14.2v.7a25.2 25.2 0 0 0 8.8 17.5 28.4 28.4 0 0 0 19 6.2 26.9 26.9 0 0 0 21.3-9 24.1 24.1 0 0 0 5.4-11 51.2 51.2 0 0 0 .7-5.4c.2-2 .3-4.4.3-7v-55H574zm-3.3 40.6a13.6 13.6 0 0 1-11.2 5 13.6 13.6 0 0 1-11.1-5 18.9 18.9 0 0 1-3.7-12 19.1 19.1 0 0 1 3.7-12.3 13.3 13.3 0 0 1 11-5.1 13.9 13.9 0 0 1 11 4.7 18 18 0 0 1 4.1 12.6 18.6 18.6 0 0 1-3.8 12zm73.7-33.4a24.8 24.8 0 0 0-19.5-8.7 24.4 24.4 0 0 0-16.7 6.8v-5.2h-14v87.3h14V137a24.4 24.4 0 0 0 17 7 24.9 24.9 0 0 0 19.2-8.5 30.9 30.9 0 0 0 7.7-21.3 31.3 31.3 0 0 0-7.7-21.6m-32.5 8.8a14.3 14.3 0 0 1 11-4.7 13.5 13.5 0 0 1 10.7 5 18.6 18.6 0 0 1 4.1 12.5 17.8 17.8 0 0 1-4.3 12.3 13.5 13.5 0 0 1-10.6 4.8 14 14 0 0 1-11-4.8 18.4 18.4 0 0 1-4.2-12.5 18.2 18.2 0 0 1 4.2-12.6m97.4-7.9a31.3 31.3 0 0 0-43.2 0 28.3 28.3 0 0 0-9 21 29.4 29.4 0 0 0 9 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6A28.8 28.8 0 0 0 718 115a29 29 0 0 0-8.8-21.4m-10 34a16.9 16.9 0 0 1-23.3 0 18.1 18.1 0 0 1-4.4-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.5-4.7c4.4-.1 8.7 1.6 11.7 4.7a17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5m75-35a31.3 31.3 0 0 0-43.3 0 28.2 28.2 0 0 0-8.9 21 29.4 29.4 0 0 0 8.7 21.5 29.3 29.3 0 0 0 21.5 8.8 30.4 30.4 0 0 0 21.9-8.6 28.8 28.8 0 0 0 8.8-21.4 29 29 0 0 0-8.8-21.3m-10 34a16.8 16.8 0 0 1-23.3 0 18.2 18.2 0 0 1-4.3-12.8 17.2 17.2 0 0 1 4.5-12.3 15.1 15.1 0 0 1 11.6-4.7 15.3 15.3 0 0 1 11.6 4.7 17.7 17.7 0 0 1 4.4 12.6 17.7 17.7 0 0 1-4.4 12.5M790 59h14v84h-14z" }) })), 'LearningPool');
16
16
  // VerticleNavigation Notch SVG
package/components/navigation/MobileNavigation/MobileNavigation.js CHANGED
@@ -22,7 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
24
24
  import React, { useEffect } from 'react';
25
- import { Person } from '@mui/icons-material';
25
+ import PersonIcon from '@mui/icons-material/Person';
26
26
  import { StyledBottomNavigationAction, StyledPaper, StyledBottomNavigation, StyledAvatar } from './MobileNavigationStyles';
27
27
  import SwipeableTemporaryDrawer from './MobileNavigationDrawer';
28
28
  import SwipeableTemporarySearch from './MobileNavigationSearch';
@@ -170,7 +170,7 @@ var MobileNavigation = function (props) {
170
170
  // @ts-expect-error
171
171
  component: animated.div, "aria-label": isDrawerOpen ? 'Close drawer panel' : 'Open drawer panel', "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: __assign({ marginInlineStart: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'auto' : 'initial', marginInlineEnd: (hasSearch || hasAvatar) && (mobileNavDirection && mobileNavDirection === 'rtl') ? 'initial' : 'auto' }, MobileNavigationButtonAnimation) }), hasSearch && (_jsx(StyledBottomNavigationAction, { "data-id": dataIds.MobileNavSearchToggle, icon: _jsx(ToggleSearchX, { isOpen: isSearchOpen }), onClick: toggleDrawer(!isSearchOpen, MOBILE_NAV_PANEL_TYPES.SEARCH),
172
172
  // @ts-expect-error
173
- component: animated.div, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation })), hasAvatar && (_jsx(StyledBottomNavigationAction, { "data-id": dataIds.MobileNavAvatarToggle, onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(Person, {}),
173
+ component: animated.div, "aria-label": isSearchOpen ? 'Close search panel' : 'Open search panel', "aria-expanded": isSearchOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation })), hasAvatar && (_jsx(StyledBottomNavigationAction, { "data-id": dataIds.MobileNavAvatarToggle, onClick: toggleDrawer(!isAvatarOpen, MOBILE_NAV_PANEL_TYPES.AVATAR), icon: !hideAvatarInitials ? _jsx(StyledAvatar, { children: avatarInitials }) : _jsx(PersonIcon, {}),
174
174
  // @ts-expect-error
175
175
  component: animated.button, "aria-label": isAvatarOpen ? 'Close Profile Menu' : 'Open Profile Menu', "aria-expanded": isAvatarOpen ? 'true' : 'false', "aria-controls": 'mobile-nav-menu', style: MobileNavigationButtonAnimation }))] }))] }))] }));
176
176
  };
package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react" />
3
3
  /// <reference types="trusted-types" />
4
- export declare const StyledSwipeableAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
4
+ export declare const StyledSwipeableAvatar: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
5
  export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
6
6
  className?: string | undefined;
7
7
  style?: {
@@ -1099,7 +1099,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
1099
1099
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
1100
1100
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
1101
1101
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
1102
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1102
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1103
1103
  export declare const StyledBoxProfile: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
1104
1104
  className?: string | undefined;
1105
1105
  style?: {
@@ -2197,7 +2197,7 @@ export declare const StyledBoxProfile: import("@emotion/styled").StyledComponent
2197
2197
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
2198
2198
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
2199
2199
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
2200
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
2200
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
2201
2201
  export declare const StyledBoxProfileEdit: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
2202
2202
  className?: string | undefined;
2203
2203
  style?: {
@@ -3295,20 +3295,20 @@ export declare const StyledBoxProfileEdit: import("@emotion/styled").StyledCompo
3295
3295
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
3296
3296
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
3297
3297
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
3298
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3299
- export declare const StyledAvatarName: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
3298
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
3299
+ export declare const StyledAvatarName: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
3300
3300
  align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
3301
3301
  children?: import("react").ReactNode;
3302
3302
  classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
3303
3303
  gutterBottom?: boolean | undefined;
3304
3304
  noWrap?: boolean | undefined;
3305
3305
  paragraph?: boolean | undefined;
3306
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3306
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3307
3307
  variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
3308
3308
  variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
3309
3309
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
3310
3310
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
3311
- }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
3311
+ }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
3312
3312
  export declare const StyledOutlineButton: import("@emotion/styled").StyledComponent<Omit<{
3313
3313
  children?: import("react").ReactNode;
3314
3314
  classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
@@ -3321,7 +3321,7 @@ export declare const StyledOutlineButton: import("@emotion/styled").StyledCompon
3321
3321
  href?: string | undefined;
3322
3322
  size?: "small" | "large" | "medium" | undefined;
3323
3323
  startIcon?: import("react").ReactNode;
3324
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3324
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3325
3325
  variant?: "text" | "outlined" | "contained" | undefined;
3326
3326
  } & Omit<{
3327
3327
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -3335,13 +3335,13 @@ export declare const StyledOutlineButton: import("@emotion/styled").StyledCompon
3335
3335
  focusVisibleClassName?: string | undefined;
3336
3336
  LinkComponent?: import("react").ElementType<any> | undefined;
3337
3337
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
3338
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3338
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3339
3339
  tabIndex?: number | undefined;
3340
3340
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
3341
3341
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
3342
3342
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
3343
3343
  ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
3344
- }, 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">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3344
+ }, 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">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
3345
3345
  export declare const StyledAvatar: import("@emotion/styled").StyledComponent<any, {}, {}>;
3346
3346
  export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
3347
3347
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -3355,10 +3355,10 @@ export declare const StyledListItemButton: import("@emotion/styled").StyledCompo
3355
3355
  focusVisibleClassName?: string | undefined;
3356
3356
  LinkComponent?: import("react").ElementType<any> | undefined;
3357
3357
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
3358
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3358
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3359
3359
  tabIndex?: number | undefined;
3360
3360
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
3361
3361
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
3362
3362
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3363
3363
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3364
- }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3364
+ }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.js CHANGED
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import { Avatar, Button, ListItemButton, Typography } from '../../../index';
6
6
  import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
7
- import { Drawer } from '@mui/material';
7
+ import Drawer from '@mui/material/Drawer';
8
8
  import { styled } from '@mui/material/styles';
9
9
  import { animated } from '@react-spring/web';
10
10
  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 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 height: 100vh;\n border: none;\n z-index: 1;\n }\n"])), function (props) { return props.theme.zIndex.appBar - 1; });
package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react" />
3
3
  /// <reference types="trusted-types" />
4
- export declare const StyledSwipeableDrawer: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
5
- export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
4
+ export declare const StyledSwipeableDrawer: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
+ export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
6
6
  children?: import("react").ReactNode;
7
7
  component?: import("react").ElementType<any> | undefined;
8
8
  ref?: import("react").Ref<unknown> | undefined;
9
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
9
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
10
10
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
11
11
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
12
- }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
12
+ }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
13
13
  export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
14
14
  className?: string | undefined;
15
15
  style?: {
@@ -1107,20 +1107,20 @@ export declare const StyledDrawerLogo: import("@emotion/styled").StyledComponent
1107
1107
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
1108
1108
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
1109
1109
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
1110
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1111
- export declare const StyledDrawerLogoText: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
1110
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1111
+ export declare const StyledDrawerLogoText: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
1112
1112
  align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
1113
1113
  children?: import("react").ReactNode;
1114
1114
  classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
1115
1115
  gutterBottom?: boolean | undefined;
1116
1116
  noWrap?: boolean | undefined;
1117
1117
  paragraph?: boolean | undefined;
1118
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
1118
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
1119
1119
  variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
1120
1120
  variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
1121
1121
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
1122
1122
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
1123
- }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
1123
+ }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
1124
1124
  export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
1125
1125
  button?: false | undefined;
1126
1126
  } & import("@mui/material").ListItemBaseProps & {
@@ -1132,7 +1132,7 @@ export declare const StyledListItem: import("@emotion/styled").StyledComponent<{
1132
1132
  } | undefined;
1133
1133
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
1134
1134
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
1135
- }, "className" | "style" | "classes" | "button" | "autoFocus" | "children" | "sx" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1135
+ }, "className" | "style" | "classes" | "button" | "autoFocus" | "children" | "sx" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1136
1136
  export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
1137
1137
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
1138
1138
  centerRipple?: boolean | undefined;
@@ -1145,24 +1145,24 @@ export declare const StyledListItemButton: import("@emotion/styled").StyledCompo
1145
1145
  focusVisibleClassName?: string | undefined;
1146
1146
  LinkComponent?: import("react").ElementType<any> | undefined;
1147
1147
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
1148
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
1148
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
1149
1149
  tabIndex?: number | undefined;
1150
1150
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
1151
1151
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
1152
1152
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
1153
1153
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
1154
- }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1155
- export declare const StyledListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1154
+ }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1155
+ export declare const StyledListItemText: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemTextProps<import("react").ElementType<any>, import("react").ElementType<any>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1156
1156
  export declare const StyledChildList: import("@emotion/styled").StyledComponent<{
1157
1157
  children?: import("react").ReactNode;
1158
1158
  classes?: Partial<import("@mui/material").ListClasses> | undefined;
1159
1159
  dense?: boolean | undefined;
1160
1160
  disablePadding?: boolean | undefined;
1161
1161
  subheader?: import("react").ReactNode;
1162
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
1162
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
1163
1163
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
1164
1164
  ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
1165
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1165
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1166
1166
  export declare const StyledChildListItem: import("@emotion/styled").StyledComponent<{
1167
1167
  button?: false | undefined;
1168
1168
  } & import("@mui/material").ListItemBaseProps & {
@@ -1174,7 +1174,7 @@ export declare const StyledChildListItem: import("@emotion/styled").StyledCompon
1174
1174
  } | undefined;
1175
1175
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
1176
1176
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
1177
- }, "className" | "style" | "classes" | "button" | "autoFocus" | "children" | "sx" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1177
+ }, "className" | "style" | "classes" | "button" | "autoFocus" | "children" | "sx" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1178
1178
  export declare const StyledChildListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
1179
1179
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
1180
1180
  centerRipple?: boolean | undefined;
@@ -1187,24 +1187,24 @@ export declare const StyledChildListItemButton: import("@emotion/styled").Styled
1187
1187
  focusVisibleClassName?: string | undefined;
1188
1188
  LinkComponent?: import("react").ElementType<any> | undefined;
1189
1189
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
1190
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
1190
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
1191
1191
  tabIndex?: number | undefined;
1192
1192
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
1193
1193
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
1194
1194
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
1195
1195
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
1196
- }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1197
- 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>, {}, {}>;
1196
+ }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1197
+ 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/styles").Theme>, {}, {}>;
1198
1198
  export declare const StyledListSecondaryList: import("@emotion/styled").StyledComponent<{
1199
1199
  children?: import("react").ReactNode;
1200
1200
  classes?: Partial<import("@mui/material").ListClasses> | undefined;
1201
1201
  dense?: boolean | undefined;
1202
1202
  disablePadding?: boolean | undefined;
1203
1203
  subheader?: import("react").ReactNode;
1204
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
1204
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
1205
1205
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
1206
1206
  ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
1207
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1207
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "dense" | "disablePadding" | "subheader"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1208
1208
  export declare const StyledListSecondaryItem: import("@emotion/styled").StyledComponent<{
1209
1209
  button?: false | undefined;
1210
1210
  } & import("@mui/material").ListItemBaseProps & {
@@ -1216,7 +1216,7 @@ export declare const StyledListSecondaryItem: import("@emotion/styled").StyledCo
1216
1216
  } | undefined;
1217
1217
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
1218
1218
  ref?: ((instance: HTMLLIElement | null) => void) | import("react").RefObject<HTMLLIElement> | null | undefined;
1219
- }, "className" | "style" | "classes" | "button" | "autoFocus" | "children" | "sx" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1219
+ }, "className" | "style" | "classes" | "button" | "autoFocus" | "children" | "sx" | "alignItems" | "disabled" | "selected" | "dense" | "components" | "componentsProps" | "disablePadding" | "disableGutters" | "divider" | "ContainerComponent" | "ContainerProps" | "secondaryAction"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1220
1220
  export declare const StyledListSecondaryButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
1221
1221
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
1222
1222
  centerRipple?: boolean | undefined;
@@ -1229,11 +1229,11 @@ export declare const StyledListSecondaryButton: import("@emotion/styled").Styled
1229
1229
  focusVisibleClassName?: string | undefined;
1230
1230
  LinkComponent?: import("react").ElementType<any> | undefined;
1231
1231
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
1232
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
1232
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
1233
1233
  tabIndex?: number | undefined;
1234
1234
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
1235
1235
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
1236
1236
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
1237
1237
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
1238
- }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1239
- export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
1238
+ }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1239
+ export declare const StyledDivider: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.js CHANGED
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  import { Box, List, ListItem, ListItemText, ListItemButton, Typography } from '../../../index';
6
6
  import { getNavigationBackground, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
7
- import { Drawer } from '@mui/material';
7
+ import Drawer from '@mui/material/Drawer';
8
8
  import { styled } from '@mui/material/styles';
9
9
  import { animated } from '@react-spring/web';
10
10
  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 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 height: 100vh;\n border: none;\n z-index: 1;\n }\n"])), function (props) { return props.theme.zIndex.appBar - 1; }, function (props) { return getOffsetNavigationBackground(props.theme); });
package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.js CHANGED
@@ -6,7 +6,7 @@ import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemTex
6
6
  import { getNavigationContrastText } from '../../helpers';
7
7
  import { styled } from '@mui/material/styles';
8
8
  import { motion } from '../../../../utils/theme';
9
- import { ArrowRight } from '@mui/icons-material';
9
+ import ArrowRightIcon from '@mui/icons-material/ArrowRight';
10
10
  export var DRAWER_WIDTH = {
11
11
  Collapsed: 60,
12
12
  Expanded: 300
@@ -59,10 +59,10 @@ export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateOb
59
59
  export var ListItemText = styled(SSListItemText, {
60
60
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
61
61
  })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n transition: opacity 225ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"], ["\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n transition: opacity 225ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"])), function (props) { return props.isDrawerOpen ? 1 : 0; }, motion.easeInOut, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
62
- export var StyledExpandLess = styled(ArrowRight, {
62
+ export var StyledExpandLess = styled(ArrowRightIcon, {
63
63
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
64
64
  })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity 225ms ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity 225ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, motion.easeInOut);
65
- export var StyledExpandMore = styled(ArrowRight, {
65
+ export var StyledExpandMore = styled(ArrowRightIcon, {
66
66
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
67
67
  })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity 225ms ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity 225ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, motion.easeInOut);
68
68
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/components/navigation/VerticalNavigation/VerticalNavigation.js CHANGED
@@ -34,10 +34,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
34
34
  import React, { useEffect } from 'react';
35
35
  import { useTheme } from '@mui/material/styles';
36
36
  import { Avatar, List, Tooltip } from '../../../index';
37
- import { Box, Modal } from '@mui/material';
37
+ import Box from '@mui/material/Box';
38
+ import Modal from '@mui/material/Modal';
38
39
  import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images';
39
40
  import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher';
40
- import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material';
41
+ import AppsIcon from '@mui/icons-material/Apps';
42
+ import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
43
+ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
44
+ import PushPinIcon from '@mui/icons-material/PushPin';
41
45
  import VerticalNavigationItem from './VerticalNavigationItem/VerticalNavigationItem';
42
46
  import { DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent, StyledDivider, StyledNav, StyledNavSecondary, DrawerShadow, StyledAside, NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask, StyledDrawer } from './VerticalNavigationStyles';
43
47
  import { ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles';
@@ -67,9 +71,21 @@ var VerticalNavigation = function (props) {
67
71
  /**
68
72
  * Toggles display of the Stream suite application dialog.
69
73
  */
70
- var handleToggleAppsClick = function () {
74
+ var handleToggleAppSwitcher = function () {
75
+ if (isAvatarOpen) {
76
+ setIsAvatarOpen(false);
77
+ }
71
78
  setIsAppSwitcherOpen(!isAppSwitcherOpen);
72
79
  };
80
+ /**
81
+ * Toggles display of the avatar dialog.
82
+ */
83
+ var handleToggleAvatarPanel = function () {
84
+ if (isAppSwitcherOpen) {
85
+ setIsAppSwitcherOpen(false);
86
+ }
87
+ setIsAvatarOpen(!isAvatarOpen);
88
+ };
73
89
  var logoHeight = 38;
74
90
  var logoWidth = 38;
75
91
  useEffect(function () { return setIsDrawerOpen(propIsDrawerOpen !== null && propIsDrawerOpen !== void 0 ? propIsDrawerOpen : false); }, [propIsDrawerOpen]);
@@ -153,13 +169,13 @@ var VerticalNavigation = function (props) {
153
169
  } })) })), _jsx(ListItemText, { primary: logoText !== null && logoText !== void 0 ? logoText : '', isDrawerOpen: isDrawerOpen || isPersistent })] })) })), _jsxs("div", __assign({ className: 'wrapper', "data-id": dataIds.VerticalNavigationToggle }, { children: [_jsxs(NotchContainer, __assign({ sx: { height: '85px', position: 'relative !important' } }, { children: [_jsx(NotchBackground, {}), !isPersistent && _jsx(NotchBackgroundClip, {}), _jsx(NotchSeemMask, {})] })), !isPersistent && _jsx(DrawerToggle, __assign({ onClick: toggleDrawer(!isDrawerOpen), "aria-label": isDrawerOpen ? messages['close-navigation'] : messages['open-navigation'], "aria-expanded": isDrawerOpen ? 'true' : 'false', "aria-controls": "vertical-navigation", isDrawerOpen: isDrawerOpen,
154
170
  // @ts-expect-error
155
171
  component: animated.button, style: animationRefs.current[0] }, { children: _jsx(DrawerToggleHitboxContent, { children: isDrawerOpen
156
- ? (_jsx(ChevronLeft, { style: {
172
+ ? (_jsx(ChevronLeftIcon, { style: {
157
173
  fill: getNavigationContrastText(theme),
158
174
  fontSize: '1.75rem',
159
175
  height: '1.75rem',
160
176
  width: '1.75rem'
161
177
  } }))
162
- : (_jsx(ChevronRight, { style: {
178
+ : (_jsx(ChevronRightIcon, { style: {
163
179
  fill: getNavigationContrastText(theme),
164
180
  fontSize: '1.75rem',
165
181
  height: '1.75rem',
@@ -200,12 +216,12 @@ var VerticalNavigation = function (props) {
200
216
  padding: theme.spacing(1),
201
217
  width: '1.3rem'
202
218
  } }, { children: isPersistent
203
- ? (_jsx(PushPin, { style: {
219
+ ? (_jsx(PushPinIcon, { style: {
204
220
  fontSize: '1.3rem',
205
221
  height: '1.3rem',
206
222
  width: '1.3rem'
207
223
  } }))
208
- : (_jsx(PushPin, { style: {
224
+ : (_jsx(PushPinIcon, { style: {
209
225
  fontSize: '1.3rem',
210
226
  height: '1.3rem',
211
227
  width: '1.3rem'
@@ -224,15 +240,15 @@ var VerticalNavigation = function (props) {
224
240
  var _a;
225
241
  return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + index + 1] })));
226
242
  }), hasStreamHome
227
- ? (_jsx(VerticalNavigationItem, { "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1] }))
243
+ ? (_jsx(VerticalNavigationItem, { id: dataIds.VerticalNavigationAppSwitcherToggle, "data-id": dataIds.VerticalNavigationAppSwitcherToggle, label: messages['app-switcher'], icon: _jsx(AppsIcon, {}), onClick: handleToggleAppSwitcher, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, handleToggleAppSwitcher: handleToggleAppSwitcher, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen, hideStreamHomeButton: hideStreamHomeButton || false, StreamHomeUrl: StreamHomeUrl !== null && StreamHomeUrl !== void 0 ? StreamHomeUrl : Constants.DefaultStreamHomeUrl })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + 1], isContentOpen: isAppSwitcherOpen }))
228
244
  : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) {
229
245
  var _a, _b;
230
246
  return (_createElement(VerticalNavigationItem, __assign({}, item, { "data-id": dataIds.VerticalNavigationSecondaryListItem, key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: animationRefs.current[((_a = items === null || items === void 0 ? void 0 : items.length) !== null && _a !== void 0 ? _a : 0) + ((_b = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _b !== void 0 ? _b : 0) + index + 1] })));
231
- }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
247
+ }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, id: dataIds.VerticalNavigationAvatarToggle, "data-id": dataIds.VerticalNavigationAvatarToggle, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
232
248
  fontSize: '0.75rem',
233
249
  height: 32,
234
250
  width: 32
235
- } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, animationRefs.current[((_c = items === null || items === void 0 ? void 0 : items.length) !== null && _c !== void 0 ? _c : 0) + ((_d = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _d !== void 0 ? _d : 0) + ((_e = secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.length) !== null && _e !== void 0 ? _e : 0) + 2]), onClick: function () { return setIsAvatarOpen(!isAvatarOpen); }, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization }, rest)), isDrawerOpen: isDrawerOpen }))] }))] })) }))] })));
251
+ } }, { children: handleAvatarInitials(avatarName) })), style: __assign({ maxHeight: isDrawerOpen ? '200px' : '48px', overflow: 'hidden', padding: 0, minHeight: 52, transition: "max-height 225ms ".concat(motion.easeInOut, " 0ms !important") }, animationRefs.current[((_c = items === null || items === void 0 ? void 0 : items.length) !== null && _c !== void 0 ? _c : 0) + ((_d = defaultSupportLinks === null || defaultSupportLinks === void 0 ? void 0 : defaultSupportLinks.length) !== null && _d !== void 0 ? _d : 0) + ((_e = secondaryItems === null || secondaryItems === void 0 ? void 0 : secondaryItems.length) !== null && _e !== void 0 ? _e : 0) + 2]), onClick: handleToggleAvatarPanel, hasFlyout: true, fullHeightFlyout: true, content: _jsx(AvatarPanel, __assign({ avatarName: avatarName, isAvatarOpen: isAvatarOpen, localization: localization, handleToggleAvatarPanel: handleToggleAvatarPanel }, rest)), isDrawerOpen: isDrawerOpen, isContentOpen: isAvatarOpen }))] }))] })) }))] })));
236
252
  };
237
253
  return (_jsxs(StyledAside, __assign({ "aria-label": messages['site-navigation'], "data-id": dataIds.VerticalNavigationContainer }, { children: [_jsx(DrawerShadow, { className: 'drawerShadow', "aria-hidden": 'true', isDrawerOpen: isDrawerOpen || isPersistent, style: {
238
254
  display: isPersistent ? 'none' : 'block'
package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js CHANGED
@@ -26,7 +26,8 @@ import { useTheme } from '@mui/material/styles';
26
26
  import EditIcon from '@mui/icons-material/Edit';
27
27
  import LogoutIcon from '@mui/icons-material/Logout';
28
28
  import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
29
- import { Person, Settings } from '@mui/icons-material';
29
+ import PersonIcon from '@mui/icons-material/Person';
30
+ import SettingsIcon from '@mui/icons-material/Settings';
30
31
  import { animated } from '@react-spring/web';
31
32
  import { FlyoutMenuItemText } from './VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles';
32
33
  import { defaultMessages } from '../../../lang/en-us';
@@ -34,12 +35,29 @@ import { defaultAttributes } from '../../../utils/dataAttributes';
34
35
  var AvatarPanel = function (props) {
35
36
  var _a, _b, _c, _d;
36
37
  var theme = useTheme();
37
- var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes;
38
+ var avatarName = props.avatarName, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelLogoutString = props.avatarPanelLogoutString, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelFootnote = props.avatarPanelFootnote, isAvatarOpen = props.isAvatarOpen, localization = props.localization, dataAttributes = props.dataAttributes, handleToggleAvatarPanel = props.handleToggleAvatarPanel;
38
39
  var messages = __assign(__assign({}, defaultMessages), localization);
39
40
  var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
41
+ var handleAvatarClick = function (event) {
42
+ var avatarPanelId = document.getElementById(defaultAttributes.VerticalNavigationAvatarToggle);
43
+ // Not allow the onClick to toggle event when clicking away from the ref
44
+ if (avatarPanelId === null || avatarPanelId === void 0 ? void 0 : avatarPanelId.contains(event.target)) {
45
+ return;
46
+ }
47
+ // Toggle the panel when you're clicking away from the ref
48
+ handleToggleAvatarPanel();
49
+ };
40
50
  useEffect(function () {
41
51
  setAvatarInitials(handleAvatarInitials(avatarName));
42
52
  }, [avatarName]);
53
+ useEffect(function () {
54
+ if (isAvatarOpen) {
55
+ document.addEventListener('mousedown', handleAvatarClick);
56
+ }
57
+ return function () {
58
+ document.removeEventListener('mousedown', handleAvatarClick);
59
+ };
60
+ }, [isAvatarOpen]);
43
61
  var _e = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _e[0], setAvatarInitials = _e[1];
44
62
  // Workaround to handle the react-spring calls without
45
63
  // adding additional hook calls on prop or state changes
@@ -57,7 +75,7 @@ var AvatarPanel = function (props) {
57
75
  ];
58
76
  var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
59
77
  var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
60
- return (_jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(StyledButton
78
+ return (_jsxs(StyledBox, __assign({ onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [avatarPanelOnClickLogout && (_jsx(StyledButton
61
79
  // @ts-expect-error
62
80
  , __assign({
63
81
  // @ts-expect-error
@@ -65,7 +83,7 @@ var AvatarPanel = function (props) {
65
83
  alignItems: 'center',
66
84
  display: 'flex',
67
85
  flexDirection: 'column'
68
- } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, animationRefs.current[2]) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(Person, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
86
+ } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { children: [_jsx(StyledAvatar, __assign({ style: { marginInlineEnd: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: messages.greeting })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ marginBottom: theme.spacing(2) }, animationRefs.current[2]) }, { children: _jsxs(StyledButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickViewProfile, startIcon: _jsx(PersonIcon, {}) }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : messages['view-profile'] })), avatarPanelOnClickEditProfile && (_jsx(StyledButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : messages['edit-profile'], onClick: avatarPanelOnClickEditProfile }, { children: _jsx(EditIcon, {}) })))] })) })))] })), _jsxs(Box, __assign({ style: {
69
87
  alignItems: 'center',
70
88
  display: 'flex',
71
89
  flexDirection: 'column'
@@ -82,7 +100,7 @@ var AvatarPanel = function (props) {
82
100
  // @ts-expect-error
83
101
  , __assign({
84
102
  // @ts-expect-error
85
- component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
103
+ component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(SettingsIcon, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ "data-id": dataIds.VerticalNavigationFlyoutList, style: { marginBottom: theme.spacing(2), marginTop: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
86
104
  avatarPanelSettingItems.length > 0 &&
87
105
  avatarPanelSettingItems.map(function (avatarMenuItem, index) {
88
106
  var _a;
@@ -95,6 +113,6 @@ var AvatarPanel = function (props) {
95
113
  component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
96
114
  minWidth: theme.spacing(5)
97
115
  } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index)));
98
- }) }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
116
+ }) }))] })), _jsx(Box, __assign({ "data-id": dataIds.VerticalNavigationFlyoutFootnote, className: 'avatar-panel-footnote', style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4] }, { children: avatarPanelFootnote && avatarPanelFootnote }))] })));
99
117
  };
100
118
  export default AvatarPanel;
package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  /// <reference types="react" />
3
3
  /// <reference types="trusted-types" />
4
- export declare const StyledSwipeableAvatar: import("@emotion/styled").StyledComponent<import("@mui/material").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
4
+ export declare const StyledSwipeableAvatar: import("@emotion/styled").StyledComponent<import("@mui/material/Drawer").DrawerProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
5
5
  export declare const StyledButton: import("@emotion/styled").StyledComponent<Omit<{
6
6
  children?: import("react").ReactNode;
7
7
  classes?: Partial<import("@mui/material").ButtonClasses> | undefined;
@@ -14,7 +14,7 @@ export declare const StyledButton: import("@emotion/styled").StyledComponent<Omi
14
14
  href?: string | undefined;
15
15
  size?: "small" | "large" | "medium" | undefined;
16
16
  startIcon?: import("react").ReactNode;
17
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
17
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
18
18
  variant?: "text" | "outlined" | "contained" | undefined;
19
19
  } & Omit<{
20
20
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -28,13 +28,13 @@ export declare const StyledButton: import("@emotion/styled").StyledComponent<Omi
28
28
  focusVisibleClassName?: string | undefined;
29
29
  LinkComponent?: import("react").ElementType<any> | undefined;
30
30
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
31
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
31
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
32
32
  tabIndex?: number | undefined;
33
33
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
34
34
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
35
35
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
36
36
  ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
37
- }, 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">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
37
+ }, 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">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
38
38
  export declare const StyledBox: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
39
39
  className?: string | undefined;
40
40
  style?: {
@@ -1132,7 +1132,7 @@ export declare const StyledBox: import("@emotion/styled").StyledComponent<import
1132
1132
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
1133
1133
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
1134
1134
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
1135
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
1135
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
1136
1136
  export declare const StyledBoxProfile: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
1137
1137
  className?: string | undefined;
1138
1138
  style?: {
@@ -2230,7 +2230,7 @@ export declare const StyledBoxProfile: import("@emotion/styled").StyledComponent
2230
2230
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
2231
2231
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
2232
2232
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
2233
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
2233
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
2234
2234
  export declare const StyledBoxProfileEdit: import("@emotion/styled").StyledComponent<import("@react-spring/web").AnimatedProps<{
2235
2235
  className?: string | undefined;
2236
2236
  style?: {
@@ -3328,20 +3328,20 @@ export declare const StyledBoxProfileEdit: import("@emotion/styled").StyledCompo
3328
3328
  scrollTop?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
3329
3329
  scrollLeft?: number | import("@react-spring/shared").FluidValue<number, any> | undefined;
3330
3330
  viewBox?: string | import("@react-spring/shared").FluidValue<string, any> | undefined;
3331
- } & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3332
- export declare const StyledAvatarName: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
3331
+ } & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
3332
+ export declare const StyledAvatarName: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
3333
3333
  align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
3334
3334
  children?: import("react").ReactNode;
3335
3335
  classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
3336
3336
  gutterBottom?: boolean | undefined;
3337
3337
  noWrap?: boolean | undefined;
3338
3338
  paragraph?: boolean | undefined;
3339
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3339
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3340
3340
  variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
3341
3341
  variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
3342
3342
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
3343
3343
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
3344
- }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
3344
+ }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
3345
3345
  export declare const StyledButtonGroup: import("@emotion/styled").StyledComponent<{
3346
3346
  children?: import("react").ReactNode;
3347
3347
  classes?: Partial<import("@mui/material").ButtonGroupClasses> | undefined;
@@ -3354,10 +3354,10 @@ export declare const StyledButtonGroup: import("@emotion/styled").StyledComponen
3354
3354
  orientation?: "horizontal" | "vertical" | undefined;
3355
3355
  size?: "small" | "large" | "medium" | undefined;
3356
3356
  variant?: "text" | "outlined" | "contained" | undefined;
3357
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3357
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3358
3358
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3359
3359
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3360
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "variant" | "disabled" | "disableRipple" | "disableElevation" | "disableFocusRipple" | "fullWidth" | "size" | "orientation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3360
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "variant" | "disabled" | "disableRipple" | "disableElevation" | "disableFocusRipple" | "fullWidth" | "size" | "orientation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
3361
3361
  export declare const StyledAvatar: import("@emotion/styled").StyledComponent<any, {}, {}>;
3362
3362
  export declare const StyledListItemButton: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemButtonBaseProps & Omit<{
3363
3363
  action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
@@ -3371,10 +3371,10 @@ export declare const StyledListItemButton: import("@emotion/styled").StyledCompo
3371
3371
  focusVisibleClassName?: string | undefined;
3372
3372
  LinkComponent?: import("react").ElementType<any> | undefined;
3373
3373
  onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
3374
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
3374
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
3375
3375
  tabIndex?: number | undefined;
3376
3376
  TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
3377
3377
  touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
3378
3378
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
3379
3379
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
3380
- }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
3380
+ }, "className" | "style" | "classes" | "autoFocus" | "tabIndex" | "children" | "sx" | "alignItems" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "selected" | "dense" | "disableGutters" | "divider"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.js CHANGED
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
4
4
  };
5
5
  /* eslint-disable indent */
6
6
  import { Avatar, Button, ButtonGroup, ListItemButton, Typography } from '../../../index';
7
- import { Drawer } from '@mui/material';
7
+ import Drawer from '@mui/material/Drawer';
8
8
  import { styled } from '@mui/material/styles';
9
9
  import { animated } from '@react-spring/web';
10
10
  import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground, getOffsetNavigationContrastText } from '../helpers';
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js CHANGED
@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
21
21
  return t;
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- import React from 'react';
24
+ import React, { useEffect } from 'react';
25
25
  import { useTheme } from '@mui/material/styles';
26
26
  import { Link, List, Tooltip, Collapse } from '../../../../index';
27
27
  import MailIcon from '@mui/icons-material/Mail';
@@ -32,10 +32,15 @@ import { animated } from '@react-spring/web';
32
32
  var VerticalNavigationItem = function (props) {
33
33
  var _a, _b, _c;
34
34
  var theme = useTheme();
35
- 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"]);
35
+ 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, isContentOpen = props.isContentOpen, content = props.content, style = props.style, hasCustomContent = props.hasCustomContent, id = props.id, rest = __rest(props, ["label", "icon", "onClick", "isActive", "children", "isDrawerOpen", "index", "hasFlyout", "fullHeightFlyout", "isSecondary", "isContentOpen", "content", "style", "hasCustomContent", "id"]);
36
36
  var _d = React.useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
37
37
  var _e = React.useState(false), isFlyoutHovered = _e[0], setIsFlyoutHovered = _e[1];
38
38
  var open = isFlyoutHovered || Boolean(anchorEl);
39
+ useEffect(function () {
40
+ if (!isContentOpen && open) {
41
+ handlePopoverClose();
42
+ }
43
+ }, [isContentOpen]);
39
44
  var handlePopoverOpen = function (event) {
40
45
  if (open) {
41
46
  handlePopoverClose();
@@ -97,7 +102,7 @@ var VerticalNavigationItem = function (props) {
97
102
  };
98
103
  return (_jsxs(ListItem, __assign({ disablePadding: true,
99
104
  // @ts-expect-error
100
- component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref,
105
+ component: animated.li, style: style }, rest, { isDrawerOpen: isDrawerOpen }, { children: [_jsxs(ListItemButton, __assign({ ref: ref, id: id,
101
106
  // @ts-expect-error
102
107
  component: Link, onClick: handleClick, isDrawerOpen: isDrawerOpen, onMouseEnter: function (event) { return (hasCustomContent || fullHeightFlyout || isDrawerOpen)
103
108
  ? null
package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.js CHANGED
@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
5
5
  /* eslint-disable indent */
6
6
  import { ListItem as SSListItem, ListItemButton as SSListItemButton, ListItemText as SSListItemText, ListItemIcon as SSListItemIcon } from '../../../../index';
7
7
  import { styled } from '@mui/material/styles';
8
- import { ArrowRight } from '@mui/icons-material';
8
+ import ArrowRightIcon from '@mui/icons-material/ArrowRight';
9
9
  import { getNavigationBackground, getNavigationContrastText, getOffsetNavigationBackground } from '../../helpers';
10
10
  export var DRAWER_WIDTH = {
11
11
  Collapsed: 60,
@@ -31,10 +31,10 @@ export var ListItemIcon = styled(SSListItemIcon)(templateObject_5 || (templateOb
31
31
  export var ListItemText = styled(SSListItemText, {
32
32
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen' && prop !== 'index'; }
33
33
  })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n color: ", ";\n min-width: 210px;\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"], ["\n color: ", ";\n min-width: 210px;\n max-width: 210px;\n opacity: ", ";\n padding: 0.5rem;\n text-align: ", ";\n transition: opacity ", "ms ", " ", "s !important;\n white-space: normal;\n width: auto;\n"])), function (props) { return getNavigationContrastText(props.theme); }, function (props) { return props.isDrawerOpen ? 1 : 0; }, function (props) { return props.theme.direction === 'rtl' ? 'right' : 'left'; }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; }, function (props) { return props.index !== undefined ? props.index / 50 : 0.02; });
34
- export var StyledExpandLess = styled(ArrowRight, {
34
+ export var StyledExpandLess = styled(ArrowRightIcon, {
35
35
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
36
36
  })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", "ms ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", "ms ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.duration.enteringScreen; }, function (props) { return props.theme.transitions.easing.easeOut; });
37
- export var StyledExpandMore = styled(ArrowRight, {
37
+ export var StyledExpandMore = styled(ArrowRightIcon, {
38
38
  shouldForwardProp: function (prop) { return prop !== 'isDrawerOpen'; }
39
39
  })(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", " 200ms !important;\n"], ["\n align-self: center;\n font-size: 1.25rem;\n left: ", ";\n margin-right: ", ";\n opacity: 1;\n position: relative;\n transition: opacity ", " 200ms !important;\n"])), function (props) { return props.isDrawerOpen ? '20px' : '-40px'; }, function (props) { return props.theme.spacing(1); }, function (props) { return props.theme.transitions.easing.easeOut; });
40
40
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
package/components/navigation/helpers.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { darken, lighten, getLuminance } from 'polished';
3
- import { HelpOutline } from '@mui/icons-material';
3
+ import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
4
4
  var DEFAULT_COLOR_ADJUST_AMOUNT = 0.1;
5
5
  // Luminance threshold for determining if we should lighten or darken the color
6
6
  // .033 is the luminance value of #333333
@@ -68,7 +68,7 @@ export var getDefaultSupportLinks = function (messages) {
68
68
  return [
69
69
  {
70
70
  label: messages.support,
71
- icon: _jsx(HelpOutline, {}),
71
+ icon: _jsx(HelpOutlineIcon, {}),
72
72
  onClick: function () { return null; },
73
73
  children: [
74
74
  { label: messages['help-center'], onClick: function () { return window.open('https://learningpool.zendesk.com/', '_blank'); } },
package/components/pages/SideInSide/SideInSide.js CHANGED
@@ -20,7 +20,7 @@ import Divider from '@mui/material/Divider';
20
20
  import { createTheme, ThemeProvider } from '@mui/material/styles';
21
21
  import { SideInSideStyles } from './SideInSideStyles';
22
22
  import { LearningPoolLogo, StreamSuiteLogo } from '../../../assets/Images';
23
- import { Link } from '@mui/material';
23
+ import Link from '@mui/material/Link';
24
24
  function Copyright(props) {
25
25
  return (_jsxs(Typography, __assign({ variant: "body2", color: "text.secondary", align: "center" }, props, { children: ['Copyright © ', _jsx(Link, __assign({ color: "inherit", href: "https://learningpool.com/" }, { children: "Learning Pool" })), ' ', new Date().getFullYear(), '.'] })));
26
26
  }
package/components/stream/AppHub/AppHubCustomStyles.d.ts CHANGED
@@ -1,48 +1,48 @@
1
1
  /// <reference types="react" />
2
2
  export declare const StyledPaper: import("@emotion/styled").StyledComponent<{
3
3
  children?: import("react").ReactNode;
4
- classes?: Partial<import("@mui/material").PaperClasses> | undefined;
4
+ classes?: Partial<import("@mui/material/Paper").PaperClasses> | undefined;
5
5
  elevation?: number | undefined;
6
6
  square?: boolean | undefined;
7
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
7
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
8
8
  variant?: "outlined" | "elevation" | undefined;
9
9
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
10
10
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
11
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
12
- export declare const StyledBoxWrap: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
11
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "square" | "elevation"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
12
+ export declare const StyledBoxWrap: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
13
13
  children?: import("react").ReactNode;
14
14
  component?: import("react").ElementType<any> | undefined;
15
15
  ref?: import("react").Ref<unknown> | undefined;
16
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
16
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
17
17
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
18
18
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
19
- }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
20
- export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").LinkBaseProps, "classes"> & {
19
+ }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
20
+ export declare const StyledLink: import("@emotion/styled").StyledComponent<Omit<import("@mui/material/Link").LinkBaseProps, "classes"> & {
21
21
  children?: import("react").ReactNode;
22
- classes?: Partial<import("@mui/material").LinkClasses> | undefined;
23
- color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined>);
24
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
25
- TypographyClasses?: (Partial<import("@mui/material").TypographyClasses> & Partial<import("@mui/material").ClassNameMap<never>>) | undefined;
22
+ classes?: Partial<import("@mui/material/Link").LinkClasses> | undefined;
23
+ color?: import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined> | ((theme: import("@mui/material/styles").Theme) => import("@mui/system/styleFunctionSx").ResponsiveStyleValue<string[] | import("csstype").Property.Color | undefined>);
24
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
25
+ TypographyClasses?: (Partial<import("@mui/material/Typography").TypographyClasses> & Partial<import("@mui/material/styles").ClassNameMap<never>>) | undefined;
26
26
  underline?: "none" | "always" | "hover" | undefined;
27
27
  variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
28
28
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
29
29
  ref?: ((instance: HTMLAnchorElement | null) => void) | import("react").RefObject<HTMLAnchorElement> | null | undefined;
30
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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" | "target" | "referrerPolicy" | "align" | "underline" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
30
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "p" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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" | "target" | "referrerPolicy" | "align" | "underline" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping" | "TypographyClasses"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
31
31
  export declare const StyledAvatar: import("@emotion/styled").StyledComponent<{
32
32
  alt?: string | undefined;
33
33
  children?: import("react").ReactNode;
34
- classes?: Partial<import("@mui/material").AvatarClasses> | undefined;
34
+ classes?: Partial<import("@mui/material/Avatar").AvatarClasses> | undefined;
35
35
  imgProps?: (import("react").ImgHTMLAttributes<HTMLImageElement> & {
36
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
36
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
37
37
  }) | undefined;
38
38
  sizes?: string | undefined;
39
39
  src?: string | undefined;
40
40
  srcSet?: string | undefined;
41
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
41
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
42
42
  variant?: "circular" | "rounded" | "square" | undefined;
43
43
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
44
44
  ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
45
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
45
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "alt" | "imgProps" | "sizes" | "src" | "srcSet" | "sx" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
46
46
  customLinkBgColor?: string | undefined;
47
47
  }, {}, {}>;
48
48
  export declare const StyledAddCircleOutlineIcon: import("@emotion/styled").StyledComponent<{
@@ -53,22 +53,22 @@ export declare const StyledAddCircleOutlineIcon: import("@emotion/styled").Style
53
53
  htmlColor?: string | undefined;
54
54
  inheritViewBox?: boolean | undefined;
55
55
  shapeRendering?: string | undefined;
56
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
56
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
57
57
  titleAccess?: string | undefined;
58
58
  viewBox?: string | undefined;
59
59
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
60
60
  ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
61
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
62
- export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
61
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "color" | "children" | "sx" | "fontSize" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
62
+ export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
63
63
  align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
64
64
  children?: import("react").ReactNode;
65
- classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
65
+ classes?: Partial<import("@mui/material/Typography").TypographyClasses> | undefined;
66
66
  gutterBottom?: boolean | undefined;
67
67
  noWrap?: boolean | undefined;
68
68
  paragraph?: boolean | undefined;
69
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
69
+ sx?: import("@mui/material/styles").SxProps<import("@mui/material/styles").Theme> | undefined;
70
70
  variant?: "button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2" | undefined;
71
71
  variantMapping?: Partial<Record<"button" | "caption" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "inherit" | "overline" | "subtitle1" | "subtitle2" | "body1" | "body2", string>> | undefined;
72
72
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
73
73
  ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
74
- }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
74
+ }, 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" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "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" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "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>, {}, {}>;
package/components/stream/AppHub/AppHubCustomStyles.js CHANGED
@@ -3,7 +3,11 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import { styled } from '@mui/material/styles';
6
- import { Paper, Box, Typography, Avatar, Link } from '@mui/material';
6
+ import Paper from '@mui/material/Paper';
7
+ import Box from '@mui/material/Box';
8
+ import Avatar from '@mui/material/Avatar';
9
+ import Typography from '@mui/material/Typography';
10
+ import Link from '@mui/material/Link';
7
11
  import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
8
12
  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'
9
13
  ? 'rgba(0,0,0,.3)'
package/components/stream/AppHub/constants.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Home } from '@mui/icons-material';
2
+ import HomeIcon from '@mui/icons-material/Home';
3
3
  export var Constants = Object.freeze({
4
4
  DataRowType: {
5
5
  Product: 'product',
@@ -53,5 +53,5 @@ export var hubCustomLinks = [
53
53
  { name: 'Another Custom Link', url: 'https://learningpool.com' }
54
54
  ];
55
55
  export var hubSupportItems = [
56
- { name: 'Contact us', url: 'https://learningpool.com', icon: _jsx(Home, {}) }
56
+ { name: 'Contact us', url: 'https://learningpool.com', icon: _jsx(HomeIcon, {}) }
57
57
  ];
package/components/stream/AppSwitcher/AppSwitcher.d.ts CHANGED
@@ -19,7 +19,7 @@ interface IProps {
19
19
  currentApplicationId?: number;
20
20
  localization?: any;
21
21
  isAppSwitcherOpen?: boolean;
22
- setIsAppSwitcherOpen?: any;
22
+ handleToggleAppSwitcher?: any;
23
23
  isDrawerOpen?: boolean;
24
24
  dataAttributes?: any;
25
25
  StreamHomeUrl?: string;
package/components/stream/AppSwitcher/AppSwitcher.js CHANGED
@@ -57,7 +57,7 @@ import { defaultAttributes } from '../../../utils/dataAttributes';
57
57
  import ChevronRightIcon from '@mui/icons-material/ChevronRight';
58
58
  var AppSwitcher = function (props) {
59
59
  var _a;
60
- var isAppSwitcherOpen = props.isAppSwitcherOpen, setIsAppSwitcherOpen = props.setIsAppSwitcherOpen, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
60
+ var isAppSwitcherOpen = props.isAppSwitcherOpen, handleToggleAppSwitcher = props.handleToggleAppSwitcher, isDrawerOpen = props.isDrawerOpen, localization = props.localization, dataAttributes = props.dataAttributes, _b = props.apiKey, apiKey = _b === void 0 ? '' : _b, baseUrl = props.baseUrl;
61
61
  var token = props.token;
62
62
  // Holds the applications which are displayed.
63
63
  var _c = useState([]), applications = _c[0], setApplications = _c[1];
@@ -76,7 +76,7 @@ var AppSwitcher = function (props) {
76
76
  * Handles closing of the application dialog.
77
77
  */
78
78
  var handleDialogClose = function () {
79
- setIsAppSwitcherOpen(false);
79
+ handleToggleAppSwitcher();
80
80
  setTimeout(function () {
81
81
  setSearchString('');
82
82
  setActiveApplication(null);
@@ -253,8 +253,26 @@ var AppSwitcher = function (props) {
253
253
  loadData()
254
254
  .catch(console.error);
255
255
  }, [token, userId, props.applications]);
256
+ useEffect(function () {
257
+ if (isAppSwitcherOpen) {
258
+ document.addEventListener('mousedown', handleAppSwitcherClose);
259
+ }
260
+ return function () {
261
+ document.removeEventListener('mousedown', handleAppSwitcherClose);
262
+ };
263
+ }, [isAppSwitcherOpen]);
264
+ useEffect(function () { return document.addEventListener('keydown', handleKeyDown); });
265
+ var handleAppSwitcherClose = function (event) {
266
+ var appSwitcherButton = document.getElementById(defaultAttributes.VerticalNavigationAppSwitcherToggle);
267
+ // Allow the appswitcher button to handle closing instead of closing it here.
268
+ if (appSwitcherButton === null || appSwitcherButton === void 0 ? void 0 : appSwitcherButton.contains(event.target)) {
269
+ return;
270
+ }
271
+ // Close the dialog when clicking outside the panel.
272
+ handleDialogClose();
273
+ };
256
274
  var handleKeyDown = function (event) {
257
- if (event && event.type === 'keydown') {
275
+ if (isAppSwitcherOpen && event && event.type === 'keydown') {
258
276
  // Close AppSwitcher if Escape key is pressed
259
277
  if (event.key === 'Escape') {
260
278
  handleDialogClose();
@@ -269,7 +287,7 @@ var AppSwitcher = function (props) {
269
287
  return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
270
288
  display: isAppSwitcherOpen ? 'block' : 'none',
271
289
  left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
272
- }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer }, { children: [activeTab === Constants.Tabs.ListApplications
290
+ }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer, onMouseDown: function (event) { return event.stopPropagation(); } }, { children: [activeTab === Constants.Tabs.ListApplications
273
291
  ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [messages['your-apps'], !props.hideStreamHomeButton &&
274
292
  _jsx(StyleHomeButton, __assign({ "aria-label": messages['go-to-hub'], endIcon: _jsx(ChevronRightIcon, {}), onClick: function (e) { var _a; return window.open((_a = props.StreamHomeUrl) !== null && _a !== void 0 ? _a : Constants.DefaultStreamHomeUrl); } }, { children: messages['go-to-hub'] }))] })), _jsx(MenuContent, __assign({ style: {
275
293
  display: activeTab === 1 ? 'flex' : 'none'
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.12.1",
12
+ "version": "1.13.0",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",
package/types/components/navigation/VerticalNavigation.d.ts CHANGED
@@ -8,6 +8,7 @@ export interface IVerticalNavigationItemProps {
8
8
  isActive?: boolean;
9
9
  children?: IVerticalNavigationItemProps[];
10
10
  isDrawerOpen?: boolean;
11
+ isContentOpen?: boolean;
11
12
  index?: number;
12
13
  isSecondary?: boolean;
13
14
  hasFlyout?: boolean;
@@ -16,6 +17,7 @@ export interface IVerticalNavigationItemProps {
16
17
  style?: any;
17
18
  open?: boolean;
18
19
  hasCustomContent?: boolean;
20
+ id?: string;
19
21
  }
20
22
  export interface IVerticalNavigationProps {
21
23
  logo?: string;
package/types/components/navigation/VerticalNavigationAvatar.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface IAvatarPanelProps {
7
7
  avatarName: string;
8
8
  editProfileText?: string;
9
9
  isAvatarOpen: boolean;
10
+ handleToggleAvatarPanel: Function;
10
11
  localization?: any;
11
12
  dataAttributes?: any;
12
13
  avatarPanelLogoutString?: string;