aefis-core-ui 2.3.0-rc47 → 2.3.0-rc49

package/dist/index.modern.js

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useState, forwardRef, useEffect, Fragment as Fragment$1, memo, useRef, Children, useMemo, useCallback, useImperativeHandle, createRef, createElement, useContext, createContext } from 'react';
 import { useUID, useUIDSeed } from 'react-uid';
-import { IconButton as IconButton$1, Menu as Menu$1, MenuItem, ListItemIcon, Typography, Tooltip as Tooltip$1, Box as Box$1, Alert as Alert$1, AlertTitle, Collapse, Avatar as Avatar$1, createTheme, Button as Button$1, CircularProgress, Badge, Card, CardMedia, CardHeader, CardContent, CardActions, Chip as Chip$1, Grid, Skeleton as Skeleton$6, Stack, useScrollTrigger, Tabs, Tab, useMediaQuery, List as List$2, ListItem as ListItem$2, ListItemAvatar, ListItemText, Divider, DialogTitle as DialogTitle$1, Fade, LinearProgress, AppBar as AppBar$1, Toolbar, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Dialog, Slide, styled, Checkbox, TableSortLabel, TextField, InputAdornment, Icon as Icon$2, Grow, Breadcrumbs as Breadcrumbs$1, Link as Link$1, Drawer as Drawer$1, createFilterOptions, Autocomplete, Paper, Zoom, Fab, Stepper, Step, StepLabel, ToggleButtonGroup, ToggleButton, FormHelperText, FormControl, InputLabel, Popover, ClickAwayListener, MenuList, ButtonGroup, Select, Hidden } from '@mui/material';
+import Box$1 from '@mui/material/Box';
+import { IconButton as IconButton$1, Menu as Menu$1, MenuItem, ListItemIcon, Typography, Tooltip as Tooltip$1, Box as Box$2, Alert as Alert$1, AlertTitle, Collapse, Avatar as Avatar$1, createTheme, Button as Button$1, CircularProgress, Badge, Card, CardMedia, CardHeader, CardContent, CardActions, Chip as Chip$1, Grid, Skeleton as Skeleton$6, Stack, useScrollTrigger, Tabs, Tab, useMediaQuery, List as List$2, ListItem as ListItem$2, ListItemAvatar, ListItemText, Divider, DialogTitle as DialogTitle$1, Fade, LinearProgress, AppBar as AppBar$1, Toolbar, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Dialog, Slide, styled, Checkbox, TableContainer, Table, TableHead, TableRow, TableCell, TableSortLabel, TextField, InputAdornment, Icon as Icon$2, Grow, Breadcrumbs as Breadcrumbs$1, Link as Link$1, Drawer as Drawer$1, createFilterOptions, Autocomplete, Paper, Zoom, Fab, Stepper, Step, StepLabel, ToggleButtonGroup, ToggleButton, FormHelperText, FormControl, InputLabel, Popover, ClickAwayListener, MenuList, ButtonGroup, Select, Hidden } from '@mui/material';
 import { makeStyles, useTheme as useTheme$1, withStyles as withStyles$1, createStyles, styled as styled$2 } from '@mui/styles';
 import clsx from 'clsx';
 import { AccountBalanceOutlined as AccountBalanceOutlined$1, AssignmentOutlined as AssignmentOutlined$1, BookOutlined as BookOutlined$1, Check as Check$1, CollectionsBookmarkOutlined as CollectionsBookmarkOutlined$1, Edit, ErrorOutlined as ErrorOutlined$1, EventOutlined as EventOutlined$1, ExploreOutlined as ExploreOutlined$1, InfoOutlined as InfoOutlined$1, KeyboardArrowRight as KeyboardArrowRight$1, MapOutlined as MapOutlined$1, PersonOutlined as PersonOutlined$1, SchoolOutlined as SchoolOutlined$1, Search as Search$1, ViewListOutlined as ViewListOutlined$1, WarningOutlined as WarningOutlined$1, WidgetsOutlined as WidgetsOutlined$1, AccountBalance as AccountBalance$1, AccountCircle as AccountCircle$1, AccountTreeOutlined, AccountTreeTwoTone, Add as Add$1, AddCircle as AddCircle$1, AddLocation, AddLocationOutlined, AddOutlined, AddTask, AddTaskOutlined, Apps, ArrowBack as ArrowBack$1, ArrowForward as ArrowForward$1, ArrowLeft, ArrowRight as ArrowRight$1, ArrowUpward as ArrowUpward$1, Article, ArticleOutlined as ArticleOutlined$1, Assignment, AssignmentLate, AssignmentLateOutlined, AssignmentTurnedIn, AssignmentTurnedInOutlined, AssignmentTwoTone, AttachFile, BarChartOutlined, Book, BookTwoTone, BrushOutlined, BuildOutlined, BuildTwoTone, BusinessCenterOutlined, Calculate, CalculateTwoTone, CalculateOutlined as CalculateOutlined$1, Cancel as Cancel$1, ChatOutlined, CheckBox, CheckBoxOutlined, CheckCircle as CheckCircle$1, CheckCircleOutlined, CheckOutlined as CheckOutlined$1, Clear as Clear$1, Close as Close$1, CloudOutlined, CloudDownload, CloudDownloadOutlined, CloudUpload, CloudUploadOutlined, Comment, ContactMail as ContactMail$1, ContentCopy, ChromeReaderMode, ChromeReaderModeOutlined, Dashboard, DashboardOutlined, DashboardTwoTone, DashboardCustomize, DashboardCustomizeOutlined, DateRange, DateRangeOutlined, Delete as Delete$2, DeleteOutlined, Description, DesktopMacOutlined, DeviceHub, DeviceHubOutlined, Done, EditOutlined as EditOutlined$1, EmailOutlined, EmojiObjects, EmojiObjectsOutlined, EmojiPeople, EmojiPeopleOutlined, EmojiEventsOutlined, Error as Error$2, ErrorOutline, Event as Event$1, EventRepeat, EventRepeatOutlined, ExpandLess as ExpandLess$1, ExpandMore as ExpandMore$1, Explore, ExploreTwoTone, Extension, ExtensionOutlined, Equalizer, EqualizerOutlined, Face, FaceOutlined, FilterList as FilterList$1, FlightOutlined, Flight, FolderOutlined, FolderSpecial, FolderSpecialOutlined, FlagOutlined, Fullscreen, FullscreenExit, GetApp as GetApp$1, GetAppOutlined, Group, GroupOutlined, Groups, GroupsOutlined, Help, HelpOutlined as HelpOutlined$1, HelpTwoTone, Hiking, Home, HomeTwoTone, HomeOutlined, HomeWorkOutlined, ImageSearch, Info as Info$1, KeyboardArrowLeft as KeyboardArrowLeft$1, KeyboardArrowUp as KeyboardArrowUp$1, Lens, Lightbulb, LightbulbOutlined as LightbulbOutlined$1, Link, List as List$1, ListOutlined, ListAlt, ListAltOutlined, ListAltTwoTone, LocalOffer, LocalOfferOutlined as LocalOfferOutlined$1, LocalPhone, LocalPhoneOutlined as LocalPhoneOutlined$1, Login, LowPriority, LowPriorityOutlined, Map, Menu, MenuBookOutlined, Message, MessageOutlined as MessageOutlined$1, MilitaryTechOutlined, MoreVert as MoreVert$1, MoreHoriz, MyLocation, MyLocationOutlined, Notifications, NotificationsActive, Palette, PaletteOutlined, Person, PersonOutline, People, PeopleOutlined, PersonAddAltOutlined, PersonAddOutlined as PersonAddOutlined$1, PictureAsPdf, PictureAsPdfOutlined as PictureAsPdfOutlined$1, Place, PlaceOutlined, PlayArrow, PlayArrowOutlined, PolicyOutlined, Print, PrintOutlined as PrintOutlined$1, PrintTwoTone, PriorityHigh as PriorityHigh$1, PublicOutlined, QuestionAnswerOutlined, RecordVoiceOverOutlined, Receipt, Refresh as Refresh$1, RestartAlt, RoomServiceOutlined, Rule, Save, SaveOutlined, Schedule as Schedule$1, School, SchoolTwoTone, Science, ScienceOutlined, SearchOutlined, Settings as Settings$1, SettingsOutlined, ShareOutlined, SpeakerNotesOutlined, SportsOutlined, Star as Star$1, StarBorder as StarBorder$1, SwapVert, TableView, TableViewOutlined, ThumbUp, ThumbUpOutlined, TrendingDownOutlined, TrendingFlatOutlined, TrendingUpOutlined, Tune as Tune$1, Verified, VerifiedOutlined, ViewList, Visibility, VisibilityOutlined as VisibilityOutlined$1, Warning, Web, WebOutlined, Widgets, Work, WorkOutlined, WorkOutline } from '@mui/icons-material/';
@@ -12,8 +13,8 @@ import withStyles from '@mui/styles/withStyles';
 import { useTheme, alpha, createTheme as createTheme$1, ThemeProvider, styled as styled$1, StyledEngineProvider } from '@mui/material/styles';
 import { useFormControl } from '@mui/material/FormControl';
 import mustache from 'mustache';
-import { Box as Box$2 } from '@mui/system';
-import { Skeleton as Skeleton$4, TextField as TextField$1, Box as Box$3 } from '@mui/material/';
+import { Box as Box$3 } from '@mui/system';
+import { Skeleton as Skeleton$4, TextField as TextField$1, Box as Box$4 } from '@mui/material/';
 import { useImage } from 'react-image';
 import Award from './assets/badgeAward.jpg';
 import Building from './assets/buildingForYou.jpg';
@@ -635,7 +636,10 @@ ActionMenu.propTypes = {
 const RenderIconButton = props => {
   return props.disabled ? /*#__PURE__*/jsx(IconButton$1, {
     "aria-label": props.name,
-    onClick: () => props.item.action(props.data),
+    onClick: () => {
+      var _props$item;
+      return (_props$item = props.item) == null ? void 0 : _props$item.action(props.data);
+    },
     disabled: true,
     children: /*#__PURE__*/jsx(props.item.icon, {
       data: props.data
@@ -644,7 +648,10 @@ const RenderIconButton = props => {
     title: props.name,
     children: /*#__PURE__*/jsx(IconButton$1, {
       "aria-label": props.name,
-      onClick: () => props.item.action(props.data),
+      onClick: () => {
+        var _props$item2;
+        return (_props$item2 = props.item) == null ? void 0 : _props$item2.action(props.data);
+      },
       disabled: false,
       children: /*#__PURE__*/jsx(props.item.icon, {
         data: props.data
@@ -659,37 +666,39 @@ RenderIconButton.propTypes = {
   disabled: PropTypes.bool,
   buttonStyle: PropTypes.any
 };
-const Action = props => {
-  var _item$menu;
-  const item = props.actionItem;
+const Action = ({
+  actionItem,
+  data
+}) => {
+  var _actionItem$menu;
   const isDisabled = item => {
-    const disabled = item.disabled !== undefined ? item.disabled : false;
-    return typeof item.disabled === "function" ? item.disabled(props.data) : disabled;
+    const disabled = item.disabled || false;
+    return typeof item.disabled === "function" ? item.disabled(data) : disabled;
   };
   const getName = item => {
-    const name = item.name !== undefined ? item.name : "button";
-    return typeof item.name === "function" ? item.name(props.data) : name;
+    const name = item.name || "button";
+    return typeof item.name === "function" ? item.name(data) : name;
   };
   const getStyle = item => {
-    const style = item.style !== undefined ? item.style : undefined;
-    return typeof item.style === "function" ? item.style(props.data) : style;
+    const style = item.style || undefined;
+    return typeof item.style === "function" ? item.style(data) : style;
   };
   const getHidden = item => {
-    const hidden = item.hidden !== undefined ? item.hidden : false;
-    return typeof item.hidden === "function" ? item.hidden(props.data) : hidden;
-  };
-  return getHidden(item) ? /*#__PURE__*/jsx(Fragment, {}) : /*#__PURE__*/jsx(Fragment, {
-    children: ((_item$menu = item.menu) == null ? void 0 : _item$menu.length) > 0 ? /*#__PURE__*/jsx(ActionMenu, {
-      name: getName(item),
-      configuration: item.menu,
-      data: props.data,
-      buttonStyle: getStyle(item)
+    const hidden = item.hidden || false;
+    return typeof item.hidden === "function" ? item.hidden(data) : hidden;
+  };
+  return getHidden(actionItem) ? /*#__PURE__*/jsx(Fragment, {}) : /*#__PURE__*/jsx(Fragment, {
+    children: ((_actionItem$menu = actionItem.menu) == null ? void 0 : _actionItem$menu.length) > 0 ? /*#__PURE__*/jsx(ActionMenu, {
+      name: getName(actionItem),
+      configuration: actionItem.menu,
+      data: data,
+      buttonStyle: getStyle(actionItem)
     }) : /*#__PURE__*/jsx(RenderIconButton, {
-      name: getName(item),
-      disabled: isDisabled(item),
-      item: item,
-      buttonStyle: getStyle(item),
-      data: props.data
+      name: getName(actionItem),
+      disabled: isDisabled(actionItem),
+      item: actionItem,
+      buttonStyle: getStyle(actionItem),
+      data: data
     })
   });
 };
@@ -698,18 +707,20 @@ Action.propTypes = {
   actionItem: PropTypes.any
 };
 
-// Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const Actions$1 = props => {
-  var _props$configuration;
+// Copyright (c) 2023 HelioCampus Inc., all rights reserved.
+const Actions$1 = ({
+  data,
+  configuration
+}) => {
   const seededKeyValue = useUIDSeed();
   const getStyle = item => {
     const style = item.style !== undefined ? item.style : undefined;
-    return typeof item.style === "function" ? item.style(props.data) : style;
+    return typeof item.style === "function" ? item.style(data) : style;
   };
-  return (_props$configuration = props.configuration) == null ? void 0 : _props$configuration.map((item, index) => /*#__PURE__*/jsx("div", {
+  return configuration == null ? void 0 : configuration.map((item, index) => /*#__PURE__*/jsx(Box$1, {
     style: getStyle(item),
     children: /*#__PURE__*/jsx(Action, {
-      data: props.data,
+      data: data,
       actionItem: item
     })
   }, `actionMenuItem-${seededKeyValue(index)}`));
@@ -760,7 +771,7 @@ const DismissableAlert = props => {
       }),
       children: [props.title && /*#__PURE__*/jsx(AlertTitle, {
         children: props.title
-      }), props.description && /*#__PURE__*/jsx(Box$1, {
+      }), props.description && /*#__PURE__*/jsx(Box$2, {
         sx: {
           paddingRight: 0.5
         },
@@ -805,7 +816,7 @@ const Alert = /*#__PURE__*/forwardRef(function Alert(props, ref) {
     style.backgroundColor = "transparent";
     style.color = "#757575";
   }
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: {
       width: "100%"
     },
@@ -825,7 +836,7 @@ const Alert = /*#__PURE__*/forwardRef(function Alert(props, ref) {
       role: props.role,
       children: [props.title && /*#__PURE__*/jsx(AlertTitle, {
         children: props.title
-      }), props.description && /*#__PURE__*/jsx(Box$1, {
+      }), props.description && /*#__PURE__*/jsx(Box$2, {
         sx: {
           paddingRight: 0.5
         },
@@ -1223,10 +1234,10 @@ const AvatarBox = props => {
     titleStyle.minWidth = props.titleMinWidth;
     subtitleStyle.minWidth = props.titleMinWidth;
   }
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     className: props.border ? classes.containerWithBorder : classes.container,
     style: boxStyle,
-    children: [props.avatar && /*#__PURE__*/jsx(Box$1, {
+    children: [props.avatar && /*#__PURE__*/jsx(Box$2, {
       sx: {
         display: "",
         alignItems: "center",
@@ -1237,7 +1248,7 @@ const AvatarBox = props => {
         style: avatarStyle,
         children: props.avatar
       })
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       sx: {
         alignSelf: "center",
         alignItems: "center",
@@ -1245,7 +1256,7 @@ const AvatarBox = props => {
         paddingTop: props.condensed ? 0 : 1,
         paddingBottom: props.condensed ? 0 : 1
       },
-      children: /*#__PURE__*/jsxs(Box$1, {
+      children: /*#__PURE__*/jsxs(Box$2, {
         sx: {
           padding: 1,
           alignItems: "center"
@@ -1459,11 +1470,11 @@ const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle({
     alignItems: contentAlignment === "top" ? "flex-start" : "center"
   };
   const avatarIcon = type === "custom" ? avatar : icon[type];
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     sx: {
       display: "flex"
     },
-    children: [/*#__PURE__*/jsxs(Box$1, {
+    children: [/*#__PURE__*/jsxs(Box$2, {
       sx: avatarContainerStyle,
       children: [size === "xsmall" && /*#__PURE__*/jsx(XSmallAvatar, {
         className: classes.avatar,
@@ -1486,7 +1497,7 @@ const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle({
         style: avatarStyle[type],
         children: avatarIcon
       })]
-    }), /*#__PURE__*/jsxs(Box$1, {
+    }), /*#__PURE__*/jsxs(Box$2, {
       sx: {
         display: "flex",
         flexDirection: "column",
@@ -1557,15 +1568,12 @@ const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
         backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.focusOpacity)
       }
     },
-    "aria-label": props.name,
+    "aria-label": props.name || "button",
     disableFocusRipple: true
   }, props, {
     ref: ref
   }));
 });
-IconButton.defaultProps = {
-  name: "button"
-};
 IconButton.propTypes = {
   name: PropTypes.string.isRequired
 };
@@ -2046,7 +2054,7 @@ const ContentBox = props => {
     headerProps.subheader = props.subtitle;
   }
   if (props.titleBadge) {
-    headerProps.title = /*#__PURE__*/jsx(Box$1, {
+    headerProps.title = /*#__PURE__*/jsx(Box$2, {
       children: /*#__PURE__*/jsx(StyledBadge$1, {
         badgeContent: props.titleBadge,
         invisible: invisible,
@@ -2110,10 +2118,10 @@ const ContentBox = props => {
     display: "none",
     visibility: "hidden"
   } : undefined;
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     sx: props.sx,
     style: props.containerStyle,
-    children: [props.header && /*#__PURE__*/jsx(Box$1, {
+    children: [props.header && /*#__PURE__*/jsx(Box$2, {
       className: classes.sectionHeader,
       children: /*#__PURE__*/jsx(Typography, {
         variant: "h6",
@@ -2123,7 +2131,7 @@ const ContentBox = props => {
     }), /*#__PURE__*/jsxs(Card, {
       style: cardStyle,
       className: tag.tag,
-      children: [useHeaderImage && /*#__PURE__*/jsx(Box$1, {
+      children: [useHeaderImage && /*#__PURE__*/jsx(Box$2, {
         style: imageDivStyle,
         className: classes.imageContainer,
         title: props.title,
@@ -2253,7 +2261,7 @@ const ClickWrapper = ({
   className,
   sx
 }) => {
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     onKeyDown: e => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
@@ -3487,7 +3495,7 @@ const CardSection$1 = _ref => {
       titleComponent
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$l);
-  return /*#__PURE__*/jsxs(Box$1, _extends({
+  return /*#__PURE__*/jsxs(Box$2, _extends({
     sx: {
       height: height || "inherit"
     }
@@ -3568,7 +3576,7 @@ const SvgImage = props => {
     width: width,
     height: height
   });
-  return /*#__PURE__*/jsx(Box$2, {
+  return /*#__PURE__*/jsx(Box$3, {
     sx: sx,
     width: width,
     height: height,
@@ -3717,7 +3725,7 @@ IsometricImage.propTypes = {
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const EmptyCardSection$1 = props => {
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: {
       height: props.height,
       maxHeight: props.height,
@@ -3732,7 +3740,7 @@ const EmptyCardSection$1 = props => {
       children: [/*#__PURE__*/jsx(Grid, {
         xs: true,
         item: true,
-        children: /*#__PURE__*/jsx(Box$1, {
+        children: /*#__PURE__*/jsx(Box$2, {
           sx: {
             height: props.height,
             padding: 1
@@ -4058,7 +4066,7 @@ const SkeletonCard = () => {
           height: 125
         }
       })
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       p: 3,
       children: /*#__PURE__*/jsxs("div", {
         className: classes.contentContainer,
@@ -4503,7 +4511,7 @@ const SwipeableViews = _ref => {
       });
     }
   }, [props.index]);
-  return /*#__PURE__*/jsx(Box$2, _extends({}, containerProps, {
+  return /*#__PURE__*/jsx(Box$3, _extends({}, containerProps, {
     ref: containerRef,
     children: /*#__PURE__*/jsx(ReactSwipeableViews, _extends({}, props))
   }));
@@ -4512,18 +4520,18 @@ SwipeableViews.propTypes = _extends({}, ReactSwipeableViews.propTypes, {
   /** Enables scrollTop on index change */
   enableScrollTop: PropTypes.bool,
   /** Props that applied to Box container component */
-  containerProps: PropTypes.shape(Box$2.propTypes)
+  containerProps: PropTypes.shape(Box$3.propTypes)
 });
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const TabPanel = props => {
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     role: "tabpanel",
     hidden: props.value !== props.index,
     id: `swipeable-tabpanel-${props.index}-${props.uid}`,
     "aria-labelledby": `swipeable-tab-${props.index}-${props.uid}`,
     style: props.style,
-    children: props.value === props.index && /*#__PURE__*/jsx(Box$1, {
+    children: props.value === props.index && /*#__PURE__*/jsx(Box$2, {
       p: props.formatContent ? 3 : 0,
       children: props.children
     })
@@ -4736,14 +4744,14 @@ const SwipeableTabPanel = props => {
           className: availableTabs.includes(child.props.id) ? classes.visibleTab : classes.hiddenTab
         }, a11yProps$1(index, uid)), `tabKey-${child.props.id}`))
       }))
-    }), /*#__PURE__*/jsx(Box$2, {
+    }), /*#__PURE__*/jsx(Box$3, {
       ref: containerRef,
       sx: getContainerStyle(props.displayType, props.children, props.iconPosition),
       children: /*#__PURE__*/jsx(SwipeableViews, {
         axis: theme.direction === "rtl" ? "x-reverse" : "x",
         index: tabValue,
         onChangeIndex: handleChangeIndex,
-        children: props.children.map((child, index) => /*#__PURE__*/jsx(Box$2, {
+        children: props.children.map((child, index) => /*#__PURE__*/jsx(Box$3, {
           sx: {
             flexBasis: "fit-content",
             overflowY: "hidden",
@@ -4815,7 +4823,7 @@ const List = ({
     listProps["dense"] = true;
     listProps["disablePadding"] = true;
   }
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: rootStyle,
     children: _animate ? /*#__PURE__*/jsx(FadeIn, {
       in: true,
@@ -5062,7 +5070,7 @@ const ListItemGroup = props => {
           },
           children: action.icon
         })
-      }, `listItemGroup-${props.id || keyValue}-${action.id || index}`)), props.collapsible && /*#__PURE__*/jsx(Box$1, {
+      }, `listItemGroup-${props.id || keyValue}-${action.id || index}`)), props.collapsible && /*#__PURE__*/jsx(Box$2, {
         sx: {
           marginRight: 1,
           color: "#000000"
@@ -5168,7 +5176,7 @@ const Section = _ref => {
   const isLast = index => {
     return index === arrayChildren.length - 1;
   };
-  return /*#__PURE__*/jsxs(Box$1, _extends({
+  return /*#__PURE__*/jsxs(Box$2, _extends({
     sx: containerStyle
   }, props, {
     children: [display === "default" && /*#__PURE__*/jsxs(Fragment, {
@@ -5185,7 +5193,7 @@ const Section = _ref => {
         children: arrayChildren == null ? void 0 : arrayChildren.map((child, index) => /*#__PURE__*/jsx(ListItem, {
           hasBorder: !isLast(index),
           borderStyle: "3px dashed #dddddd",
-          children: /*#__PURE__*/jsx(Box$1, {
+          children: /*#__PURE__*/jsx(Box$2, {
             sx: {
               paddingTop: 1,
               paddingBottom: 1
@@ -5236,7 +5244,7 @@ const Header$1 = props => {
   };
   return /*#__PURE__*/jsxs(Fragment, {
     children: [props.imageUrl && /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(Box$1, {
+      children: [/*#__PURE__*/jsx(Box$2, {
         sx: imageHeaderContainerStyle,
         children: /*#__PURE__*/jsx(Image, {
           src: props.imageUrl,
@@ -5244,7 +5252,7 @@ const Header$1 = props => {
           style: props.imageStyle || imageStyles
         })
       }), /*#__PURE__*/jsx(Divider, {})]
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       sx: containerStyle,
       children: /*#__PURE__*/jsx(AvatarTitle, {
         type: "custom",
@@ -5492,7 +5500,7 @@ const FullScreenAppBar = props => {
         component: "h1",
         className: classes.title,
         children: props.title
-      }), /*#__PURE__*/jsxs(Box$1, {
+      }), /*#__PURE__*/jsxs(Box$2, {
         className: classes.root,
         children: [/*#__PURE__*/jsx(Button, {
           name: props.cancelButtonText,
@@ -5510,7 +5518,7 @@ const FullScreenAppBar = props => {
       })]
     }), /*#__PURE__*/jsx(Fade, {
       in: props.showLoadingStatus,
-      children: /*#__PURE__*/jsx(Box$1, {
+      children: /*#__PURE__*/jsx(Box$2, {
         className: classes.linearProgressContainer,
         children: /*#__PURE__*/jsx(LinearProgress, {})
       })
@@ -5859,12 +5867,12 @@ const useStyles$w = makeStyles(() => ({
 
 const ScrollingContainer = _ref => {
   let {
-      height,
+      height = "100%",
       children,
       onScroll,
-      showTopFade,
-      showBottomFade,
-      component,
+      showTopFade = true,
+      showBottomFade = true,
+      component = "div",
       onScrollReachStart,
       onScrollReachEnd
     } = _ref,
@@ -5883,24 +5891,21 @@ const ScrollingContainer = _ref => {
   useEffect(() => {
     onScroll && onScroll(scrolled);
   });
-  return /*#__PURE__*/jsx("div", {
+  const scrollbarArgs = _extends({
+    component: component,
+    style: rootStyle,
+    onScrollY: handleScroll,
+    onYReachStart: onScrollReachStart,
+    onYReachEnd: onScrollReachEnd
+  }, props);
+  return showTopFade || showBottomFade ? /*#__PURE__*/jsx(Box$1, {
     className: showTopFade && showBottomFade ? classes.scroller : showTopFade ? classes.scrollerTopFade : showBottomFade ? classes.scrollerBottomFade : classes.scrollerNoFade,
-    children: /*#__PURE__*/jsx(PerfectScrollbar, _extends({
-      component: component,
-      style: rootStyle,
-      onScrollY: handleScroll,
-      onYReachStart: onScrollReachStart,
-      onYReachEnd: onScrollReachEnd
-    }, props, {
+    children: /*#__PURE__*/jsx(PerfectScrollbar, _extends({}, scrollbarArgs, {
       children: children
     }))
-  });
-};
-ScrollingContainer.defaultProps = {
-  showBottomFade: true,
-  showTopFade: true,
-  height: "100%",
-  component: "div"
+  }) : /*#__PURE__*/jsx(PerfectScrollbar, _extends({}, scrollbarArgs, {
+    children: children
+  }));
 };
 ScrollingContainer.propTypes = {
   /** The height of the container.  If no height given, 100% is used. */
@@ -6274,7 +6279,7 @@ const AvatarHeader = props => {
       backgroundColor: props.icon && props.avatarColor ? props.avatarColor : backgroundColor[type]
     };
   };
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     className: classes.avatarContainer,
     children: props.type === "loading" ? /*#__PURE__*/jsx(CircularProgress$1, {}) : /*#__PURE__*/jsxs(Avatar$1, {
       style: avatarStyle(props.type),
@@ -6319,7 +6324,7 @@ const ImageHeader = /*#__PURE__*/memo(function ImageHeader(props) {
   const imageContainerStyle = {
     height: props.imageHeight ? props.imageHeight : "auto"
   };
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     style: imageContainerStyle,
     className: props.responsiveImage ? classes.responsiveImageContainer : classes.imageContainer,
     children: /*#__PURE__*/jsx(Image, {
@@ -6376,9 +6381,9 @@ const RenderStatusMessage = props => {
     paddingTop: props.condensed ? 1 : 3,
     paddingBottom: props.condensed ? 1 : 3
   };
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     className: classes.container,
-    children: [/*#__PURE__*/jsx(Box$1, {
+    children: [/*#__PURE__*/jsx(Box$2, {
       className: classes.headerContainer,
       sx: headerContainerStyle,
       children: props.imageType !== undefined ? /*#__PURE__*/jsx(ImageHeader, {
@@ -6391,7 +6396,7 @@ const RenderStatusMessage = props => {
         icon: props.icon,
         avatarColor: props.avatarColor
       })
-    }), /*#__PURE__*/jsxs(Box$1, {
+    }), /*#__PURE__*/jsxs(Box$2, {
       children: [/*#__PURE__*/jsx(Typography, {
         variant: "h2",
         component: props.titleComponent,
@@ -6404,7 +6409,7 @@ const RenderStatusMessage = props => {
         className: classes.subtitle,
         gutterBottom: true,
         children: props.subtitle
-      }), /*#__PURE__*/jsx(Box$1, {
+      }), /*#__PURE__*/jsx(Box$2, {
         className: classes.messageContainer,
         sx: messageContainerStyle,
         children: /*#__PURE__*/jsx(Typography, {
@@ -6604,6 +6609,27 @@ function DataTable(props) {
   const handleSelectAllRows = checkbox => {
     setSelectAllRows(checkbox.target.checked);
   };
+  const defaultHook = hooks => {
+    const actionsColumn = {
+      id: "_actions",
+      disableResizing: true,
+      minWidth: 75,
+      width: 75,
+      maxWidth: 75,
+      Header: /*#__PURE__*/jsx("div", {}),
+      Cell: data => {
+        const rowData = data.row.original || undefined;
+        const rowMenuObj = [{
+          menu: props.rowMenu
+        }];
+        return props.rowMenu ? /*#__PURE__*/jsx(Actions$1, {
+          configuration: rowMenuObj,
+          data: rowData
+        }) : "";
+      }
+    };
+    hooks.allColumns.push(columns => props.rowMenu ? [...columns, actionsColumn] : [...columns]);
+  };
   const selectionHook = hooks => {
     const CheckboxCell = ({
       row
@@ -6656,7 +6682,25 @@ function DataTable(props) {
       // eslint-disable-next-line react/display-name
       Cell
     };
-    hooks.allColumns.push(columns => [checkboxColumn, ...columns]);
+    const actionsColumn = {
+      id: "_actions",
+      disableResizing: true,
+      minWidth: 75,
+      width: 75,
+      maxWidth: 75,
+      Header: /*#__PURE__*/jsx("div", {}),
+      Cell: data => {
+        const rowData = data.row.original || undefined;
+        const rowMenuObj = [{
+          menu: props.rowMenu
+        }];
+        return props.rowMenu ? /*#__PURE__*/jsx(Actions$1, {
+          configuration: rowMenuObj,
+          data: rowData
+        }) : "";
+      }
+    };
+    hooks.allColumns.push(columns => props.rowMenu ? [checkboxColumn, ...columns, actionsColumn] : [checkboxColumn, ...columns]);
     hooks.useInstanceBeforeDimensions.push(({
       headerGroups
     }) => {
@@ -6665,7 +6709,7 @@ function DataTable(props) {
       selectionGroupHeader.canResize = false;
     });
   };
-  const hooks = useMemo(() => [useColumnOrder, useFilters, useGroupBy, useSortBy, useFlexLayout, usePagination, useResizeColumns, useRowSelect, ...(props.selectable ? [selectionHook] : [])], [props.selectable]);
+  const hooks = useMemo(() => [useColumnOrder, useFilters, useGroupBy, useSortBy, useFlexLayout, usePagination, useResizeColumns, useRowSelect, ...(props.selectable ? [selectionHook] : [defaultHook])], [props.selectable]);
   const useControlledState = state => {
     return useMemo(() => _extends({}, state, {
       selectedRowIds: singleSelection
@@ -6744,14 +6788,14 @@ function DataTable(props) {
         props.style.flex = "";
         return props;
       });
-      return /*#__PURE__*/jsx("div", _extends({}, rowProps, {
+      return /*#__PURE__*/jsx(TableRow, _extends({}, rowProps, {
         className: cx(props.rowsHaveActions ? classes.tableRowWithActions : classes.tableRow, {
           rowSelected: row.isSelected
         }),
         children: row.cells.map((cell, index) => {
-          return /*#__PURE__*/createElement("div", _extends({}, cell.getCellProps(cellProps), {
+          return /*#__PURE__*/createElement(TableCell, _extends({}, cell.getCellProps(cellProps), {
             key: `dataTableCell-${row.id}-${index}`,
-            onClick: () => cellClickHandler(cell),
+            onClick: props.onClick ? () => cellClickHandler(cell) : undefined,
             className: props.displayGrid ? classes.tableCell : classes.tableCellNoGrid
           }), cell.isGrouped ? /*#__PURE__*/jsxs(Fragment, {
             children: [/*#__PURE__*/jsx(TableSortLabel, _extends({
@@ -6781,18 +6825,22 @@ function DataTable(props) {
       });
     }
   }));
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx(TableContainer, {
     className: props.height ? classes.noHeightContainer : classes.container,
     style: containerStyle,
     ref: containerRef,
-    children: /*#__PURE__*/jsxs("div", _extends({
-      "aria-label": props.name,
+    children: /*#__PURE__*/jsxs(Table, _extends({
       className: classes.tableTable
     }, getTableProps(), {
-      children: [/*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx("caption", {
+        style: {
+          display: "none"
+        },
+        children: props.name
+      }), /*#__PURE__*/jsxs(TableHead, {
         className: classes.tableHead,
         ref: tableHeadRef,
-        children: [headerGroups.map(headerGroup => /*#__PURE__*/jsx("div", _extends({}, headerGroup.getHeaderGroupProps(), {
+        children: [headerGroups.map(headerGroup => /*#__PURE__*/jsx(TableRow, _extends({}, headerGroup.getHeaderGroupProps(), {
           className: clsx(classes.tableHeadRow, {
             [classes.tableHeadRowElevated]: headerElevated
           }),
@@ -6800,7 +6848,7 @@ function DataTable(props) {
             const style = {
               textAlign: column.align ? column.align : "left "
             };
-            return /*#__PURE__*/jsxs("div", _extends({
+            return /*#__PURE__*/jsxs(TableCell, _extends({
               scope: "col"
             }, column.getHeaderProps(headerProps), {
               className: props.displayGrid ? classes.tableHeadCell : classes.tableHeadCellNoGrid,
@@ -6817,7 +6865,7 @@ function DataTable(props) {
                 className: classes.tableSortLabel,
                 style: style,
                 children: column.render("Header")
-              })) : /*#__PURE__*/jsx("div", {
+              })) : /*#__PURE__*/jsx(Box$2, {
                 style: style,
                 className: classes.tableLabel,
                 children: column.render("Header")
@@ -6838,13 +6886,15 @@ function DataTable(props) {
           })
         })]
       }), /*#__PURE__*/jsx(ScrollingContainer, _extends({
+        component: "tbody",
         showTopFade: false,
+        showBottomFade: false,
         onScroll: handleScroll,
         onScrollReachStart: props.onScrollToStart,
         onScrollReachEnd: props.onScrollToEnd,
-        height: props.height ? props.height : tableBodyHeight
+        height: props.height ? props.height : tableBodyHeight,
+        className: classes.tableBody
       }, getTableBodyProps(), {
-        className: classes.tableBody,
         children: renderTableBody()
       }))]
     }))
@@ -6907,7 +6957,16 @@ DataTable.propTypes = {
   /** define if multiple selection allowed if table selectable */
   multiple: PropTypes.bool,
   /** react table detects unique rows by this function, by default id is used as key param */
-  getRowId: PropTypes.func
+  getRowId: PropTypes.func,
+  /** drop-down menu for the row */
+  rowMenu: PropTypes.arrayOf(PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    default: PropTypes.bool,
+    icon: PropTypes.any,
+    hidden: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+    disabled: PropTypes.any,
+    onClick: PropTypes.func
+  }))
 };
 
 const options = {
@@ -8113,7 +8172,7 @@ const FilterChips = ({
     children: "No filters or sorting criteria selected"
   });
   const Filters = useMemo(() => {
-    return /*#__PURE__*/jsx(Box$1, {
+    return /*#__PURE__*/jsx(Box$2, {
       sx: {
         display: "flex",
         flexFlow: "wrap"
@@ -8142,7 +8201,7 @@ const FilterChips = ({
       }, `filterPanelFilter-${filter.index}-${filter.id}`))
     });
   }, [_filters]);
-  const SortItems = useMemo(() => /*#__PURE__*/jsx(Box$1, {
+  const SortItems = useMemo(() => /*#__PURE__*/jsx(Box$2, {
     sx: {
       display: "flex",
       flexFlow: "wrap"
@@ -9003,7 +9062,7 @@ const Actions = props => {
   var _props$data;
   return (_props$data = props.data) == null ? void 0 : _props$data.map((item, index) => (!item.hidden || typeof item.hidden === "function" && !item.hidden(props.data)) && /*#__PURE__*/jsx(ListItem, {
     display: "horizontal",
-    children: /*#__PURE__*/jsx(Box$1, {
+    children: /*#__PURE__*/jsx(Box$2, {
       sx: {
         marginRight: 1
       },
@@ -9363,7 +9422,7 @@ const renderPreDefinedFilters = ({
 const Breadcrumbs = ({
   data
 }) => {
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: {
       marginTop: -1
     },
@@ -9565,7 +9624,7 @@ const TitleAndActionHeader = ({
     paddingBottom: gutter ? breadcrumbs != null && breadcrumbs.length ? 2 : 1 : 0
   };
   const hasActions = additionalActions || actions || showExport;
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     sx: mainContainerStyle,
     children: [/*#__PURE__*/jsxs(Grid, {
       className: classes.rootContainer,
@@ -9585,7 +9644,7 @@ const TitleAndActionHeader = ({
           className: classes.title,
           noWrap: true,
           children: title
-        }), filterSetConfiguration && /*#__PURE__*/jsxs(Box$1, {
+        }), filterSetConfiguration && /*#__PURE__*/jsxs(Box$2, {
           sx: {
             displayPrint: "none"
           },
@@ -9632,7 +9691,7 @@ const TitleAndActionHeader = ({
               disableSetDefault
             })]
           })]
-        }), onFilterClick !== undefined && /*#__PURE__*/jsx(Box$1, {
+        }), onFilterClick !== undefined && /*#__PURE__*/jsx(Box$2, {
           sx: {
             displayPrint: "none"
           },
@@ -9648,7 +9707,7 @@ const TitleAndActionHeader = ({
         item: true,
         xs: 12,
         md: 5,
-        children: /*#__PURE__*/jsx(Box$1, {
+        children: /*#__PURE__*/jsx(Box$2, {
           sx: {
             displayPrint: "none"
           },
@@ -9667,7 +9726,7 @@ const TitleAndActionHeader = ({
           })
         })
       })]
-    }), (breadcrumbs == null ? void 0 : breadcrumbs.length) && /*#__PURE__*/jsx(Box$1, {
+    }), (breadcrumbs == null ? void 0 : breadcrumbs.length) && /*#__PURE__*/jsx(Box$2, {
       sx: {
         marginTop: -1
       },
@@ -10031,7 +10090,7 @@ const Drawer = props => {
           className: classes.title,
           noWrap: true,
           children: props.title
-        }), /*#__PURE__*/jsxs(Box$1, {
+        }), /*#__PURE__*/jsxs(Box$2, {
           style: {
             marginLeft: "auto",
             display: "flex"
@@ -10041,7 +10100,7 @@ const Drawer = props => {
             "aria-label": props.closeButtonText,
             disableElevation: true,
             children: props.closeButtonText
-          }), /*#__PURE__*/jsx(Box$1, {
+          }), /*#__PURE__*/jsx(Box$2, {
             style: {
               marginLeft: 8,
               display: "inline-block"
@@ -10082,12 +10141,12 @@ const Drawer = props => {
         })]
       }), /*#__PURE__*/jsx(Fade, {
         in: props.showLoadingStatus,
-        children: /*#__PURE__*/jsx(Box$1, {
+        children: /*#__PURE__*/jsx(Box$2, {
           className: classes.linearProgressContainer,
           children: /*#__PURE__*/jsx(LinearProgress, {})
         })
       }), props.headerDivider && /*#__PURE__*/jsx(Divider, {}), props.additionalHeaderContent]
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       className: props.formatContent ? classes.drawerContentWithFormatting : classes.drawerContent,
       children: renderChildren()
     })]
@@ -10274,7 +10333,7 @@ const RenderTimeline = props => {
       minHeight: "calc(100vh - " + containerTop + "px)"
     }
   };
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     ref: containerRef,
     className: classes.rootContainer,
     sx: containerStyle,
@@ -10515,6 +10574,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
   const [drawerContent, setDrawerContent] = useState( /*#__PURE__*/jsx("div", {}));
   const [drawerType, setDrawerType] = useState("persistent");
   const [drawerCloseButtonText, setDrawerCloseButtonText] = useState("Exit");
+  const [drawerData, setDrawerData] = useState();
   const [formatDrawerContent, setFormatDrawerContent] = useState(false);
   const [enableTableRowAction, setEnableTableRowAction] = useState(false);
   const [selectedRowCount, setSelectedRowCount] = useState(0);
@@ -10614,7 +10674,9 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
     setActiveDrawerType(type);
     setFormatDrawerContent(type !== "filter" ? false : true);
     setDrawerCloseButtonText(type !== "filter" ? "Cancel" : "Exit");
-
+    if (type === "filter") {
+      setDrawerData();
+    }
     // TODO: component should not be state
     setDrawerContent(type !== "filter" ? drawerContent : /*#__PURE__*/jsx(FilterPanel, {
       configuration: props.filterPanelConfig,
@@ -10708,6 +10770,27 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       handleDrawerOpen("panel", "Actions", drawerContent);
     }
   };
+  const processRowActionsForRowMenu = rowActions => {
+    const actionsArray = [];
+    rowActions == null ? void 0 : rowActions.map(action => {
+      if (action.content) {
+        actionsArray.push(_extends({}, action, {
+          action: data => {
+            setDrawerData(data);
+            handleDrawerOpen("custom", action.name, action.content);
+          }
+        }));
+      } else {
+        actionsArray.push(_extends({}, action, {
+          action: data => {
+            action.onclick(data);
+          }
+        }));
+      }
+    });
+    return actionsArray;
+  };
+  const rowMenu = props.rowActionMethod === "menu" ? processRowActionsForRowMenu(props.rowActions) : undefined;
 
   // TODO: get rid of this by wrapping setDrawerOpen and calling onDrawerOpen and onDrawerClose there.
   useEffect(() => {
@@ -10757,10 +10840,11 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       height: props.height,
       onScrollToEnd: handleScrollToEnd,
       onSelectAll: props.onSelectAll,
-      onClick: handleRowClick,
+      onClick: props.rowActionMethod === "click" ? handleRowClick : undefined,
       selectable: props.selectable,
       onSelect: handleSelect,
-      rowsHaveActions: ((_props$rowActions = props.rowActions) == null ? void 0 : _props$rowActions.length) > 0 || props.showActivityStream,
+      rowMenu: rowMenu || undefined,
+      rowsHaveActions: props.rowActionMethod === "click" ? ((_props$rowActions = props.rowActions) == null ? void 0 : _props$rowActions.length) > 0 || props.showActivityStream : undefined,
       noDataViewProps: _extends({
         message: renderReTryButton()
       }, ((_props$dataTableProps = props.dataTableProps) == null ? void 0 : _props$dataTableProps.noDataViewProps) || {}),
@@ -10779,6 +10863,7 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       drawerType: drawerType,
       showLoadingStatus: false,
       hideCloseButton: false,
+      data: drawerData,
       headerDivider: props.drawerContentBackground === "light" ? false : true,
       paperStyle: {
         boxShadow: drawerType !== "temporary" ? "-8px 0 10px 0 rgb(0 0 0 / 8%)" : "none",
@@ -10803,7 +10888,8 @@ RichDataTable.defaultProps = {
   selectable: true,
   showActivityStream: false,
   drawerContentBackground: "light",
-  rowActions: []
+  rowActions: [],
+  rowActionMethod: "click"
 };
 RichDataTable.propTypes = _extends({
   /** The title of the table */
@@ -10881,8 +10967,11 @@ RichDataTable.propTypes = _extends({
     content: PropTypes.any,
     hidden: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
     disabled: PropTypes.any,
-    formatContent: PropTypes.bool
+    formatContent: PropTypes.bool,
+    onClick: PropTypes.func
   })),
+  /** Row action method  */
+  rowActionMethod: PropTypes.oneOf(["click", "menu"]),
   /** Show the activity stream tab in the drawer panel. */
   showActivityStream: PropTypes.bool,
   /** Function to execute when the data is successfully loaded.  The loaded page data and endpoint information is returned. */
@@ -10991,7 +11080,7 @@ const EnhancedSearchDialog = _ref => {
     onClose: handleClose,
     onConfirm: handleSubmit,
     confirmButtonText: confirmButtonText,
-    children: /*#__PURE__*/jsx(Box$1, {
+    children: /*#__PURE__*/jsx(Box$2, {
       sx: {
         padding: 2
       },
@@ -11347,7 +11436,7 @@ const BusinessObjectPicker = _ref => {
     }));
   };
   const handleIsOptionEqualToValue = useCallback((a, b) => getKey(a) == getKey(b), []);
-  const renderCustomTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
+  const renderCustomTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$2, {
     sx: {
       overflow: "hidden"
     },
@@ -11361,7 +11450,7 @@ const BusinessObjectPicker = _ref => {
       displayType: "default"
     })
   }, getKey(option))), [props.size, getKey, getLabel, handleTagDelete]);
-  const renderTypeTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
+  const renderTypeTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$2, {
     sx: {
       overflow: "hidden"
     },
@@ -11375,8 +11464,8 @@ const BusinessObjectPicker = _ref => {
       }
     })
   }, getKey(option))), [props.type, props.size, getKey, handleTagDelete]);
-  return /*#__PURE__*/jsxs(Box$1, {
-    children: [/*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
+    children: [/*#__PURE__*/jsx(Box$2, {
       sx: {
         float: "left",
         width: renderAddItemForm ? AUTOCOMPLETE_WIDTH : "100%"
@@ -11445,6 +11534,7 @@ const BusinessObjectPicker = _ref => {
                   color: red[500]
                 }
               }), listSelect !== true && /*#__PURE__*/jsx(IconButton, {
+                name: open ? `hide options` : "show options",
                 "aria-label": open ? `hide options` : "show options",
                 size: "small",
                 onClick: () => {
@@ -11458,6 +11548,7 @@ const BusinessObjectPicker = _ref => {
                   })
                 })
               }), enhancedSearch && /*#__PURE__*/jsx(IconButton, {
+                name: "search",
                 "aria-label": "search",
                 size: "small",
                 onKeyDown: handleKeyDown,
@@ -11481,7 +11572,7 @@ const BusinessObjectPicker = _ref => {
         forcePopupIcon: false,
         isOptionEqualToValue: handleIsOptionEqualToValue
       }, autoCompleteProps))
-    }), renderAddItemForm && /*#__PURE__*/jsx(Box$1, {
+    }), renderAddItemForm && /*#__PURE__*/jsx(Box$2, {
       sx: {
         display: "flex",
         justifyContent: "center",
@@ -11489,6 +11580,7 @@ const BusinessObjectPicker = _ref => {
         padding: 1
       },
       children: /*#__PURE__*/jsx(IconButton, {
+        name: "add item",
         onClick: () => {
           eventDispatch({
             name: events.OPEN_ADD_ITEM_DIALOG,
@@ -12074,7 +12166,7 @@ const BusinessObjectStatusButton = props => {
     sx: _extends({
       width: "100%"
     }, styles$1.zeroVerticalPadding),
-    children: [/*#__PURE__*/jsx(Box$1, {
+    children: [/*#__PURE__*/jsx(Box$2, {
       component: "span",
       sx: styles$1.menuListItem,
       children: /*#__PURE__*/jsx(Typography, {
@@ -12086,7 +12178,7 @@ const BusinessObjectStatusButton = props => {
         fontSize: "0.8rem",
         children: option.text
       })
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       component: "span",
       sx: styles$1.menuListItem,
       children: /*#__PURE__*/jsx(ArrowForwardIcon, {
@@ -12122,13 +12214,13 @@ const BusinessObjectStatusButton = props => {
         }
       },
       disabled: props.disabled,
-      children: [/*#__PURE__*/jsx(Box$1, {
+      children: [/*#__PURE__*/jsx(Box$2, {
         component: "span",
         sx: {
           paddingRight: 1
         },
         children: status
-      }), isEditable && /*#__PURE__*/jsx(Box$1, {
+      }), isEditable && /*#__PURE__*/jsx(Box$2, {
         component: "span",
         sx: {
           display: "flex",
@@ -12315,7 +12407,7 @@ const CollapsibleContent = props => {
     id: props.id,
     "aria-hidden": !props.open
   };
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     "aria-hidden": a11yProps["aria-hidden"],
     children: /*#__PURE__*/jsx(Collapse, _extends({
       in: props.open,
@@ -12428,14 +12520,14 @@ function Collapsible({
   const contentA11yProps = {
     id: contentId
   };
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     sx: sx,
-    children: [/*#__PURE__*/jsxs(Box$1, {
+    children: [/*#__PURE__*/jsxs(Box$2, {
       sx: {
         display: "flex",
         flexWrap: "no-wrap"
       },
-      children: [/*#__PURE__*/jsx(Box$1, {
+      children: [/*#__PURE__*/jsx(Box$2, {
         sx: {
           flex: 1,
           flexDirection: "column",
@@ -12443,7 +12535,7 @@ function Collapsible({
           display: "flex"
         },
         children: renderHeader == null ? void 0 : renderHeader()
-      }), /*#__PURE__*/jsx(Box$1, {
+      }), /*#__PURE__*/jsx(Box$2, {
         children: /*#__PURE__*/jsx(CollapsibleContentButton, _extends({
           id: buttonId,
           open: propOpen || open,
@@ -12706,10 +12798,10 @@ const CurriculumChart = props => {
     setNodes(((_props$data5 = props.data) == null ? void 0 : _props$data5.nodes) || []);
     setEdges(((_props$data6 = props.data) == null ? void 0 : _props$data6.edges) || []);
   }, [props.data]);
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: rootContainerStyle,
     ref: containerRef,
-    children: /*#__PURE__*/jsx(Box$1, {
+    children: /*#__PURE__*/jsx(Box$2, {
       flex: 1,
       overflow: "auto",
       children: /*#__PURE__*/jsx(ReactFlowProvider, {
@@ -12842,14 +12934,14 @@ const DatePickerBase = _ref => {
         fullWidth: true,
         required: required,
         InputProps: {
-          endAdornment: /*#__PURE__*/jsxs(Box$3, {
+          endAdornment: /*#__PURE__*/jsxs(Box$4, {
             component: "span",
             sx: {
               display: "flex",
               alignItems: "center",
               flexDirection: "row-reverse"
             },
-            children: [inputEndAdornmentText && /*#__PURE__*/jsx(Box$3, {
+            children: [inputEndAdornmentText && /*#__PURE__*/jsx(Box$4, {
               sx: {
                 marginRight: 1,
                 marginLeft: 1,
@@ -12857,7 +12949,7 @@ const DatePickerBase = _ref => {
               },
               component: "span",
               children: inputEndAdornmentText
-            }), showButton && /*#__PURE__*/jsx(Box$3, {
+            }), showButton && /*#__PURE__*/jsx(Box$4, {
               sx: {
                 marginRight: 1
               },
@@ -13163,7 +13255,7 @@ const DocViewer = ({
     })();
   }, []);
   if (!_withDialog) {
-    return /*#__PURE__*/jsx(Box$2, {
+    return /*#__PURE__*/jsx(Box$3, {
       sx: _extends({
         height: "100vh"
       }, style),
@@ -13185,7 +13277,7 @@ const DocViewer = ({
     title: _title,
     open: open,
     onClose: handleClose,
-    children: /*#__PURE__*/jsx(Box$2, {
+    children: /*#__PURE__*/jsx(Box$3, {
       sx: _extends({
         height: "100vh"
       }, style),
@@ -13297,19 +13389,19 @@ const Notification = props => {
       sx: iconStyle
     })
   };
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: styles.root,
     role: "alert",
-    children: /*#__PURE__*/jsx(Box$1, {
+    children: /*#__PURE__*/jsx(Box$2, {
       sx: styles.card,
-      children: /*#__PURE__*/jsxs(Box$1, {
+      children: /*#__PURE__*/jsxs(Box$2, {
         sx: _extends({
           backgroundColor: backgroundColor[props.variant]
         }, styles.container),
-        children: [icon[props.variant] !== undefined && /*#__PURE__*/jsx(Box$1, {
+        children: [icon[props.variant] !== undefined && /*#__PURE__*/jsx(Box$2, {
           sx: styles.iconContainer,
           children: icon[props.variant]
-        }), /*#__PURE__*/jsx(Box$1, {
+        }), /*#__PURE__*/jsx(Box$2, {
           sx: styles.messageContainer,
           children: /*#__PURE__*/jsx(Typography, {
             style: styles.typography,
@@ -13543,7 +13635,7 @@ const BarChart = props => {
     role: "progressbar"
   };
   const keyValue = useUID();
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     role: "figure",
     "aria-labelledby": `bar-chart-${keyValue}`,
     children: [/*#__PURE__*/jsx("title", {
@@ -13554,21 +13646,21 @@ const BarChart = props => {
       sx: titleStyle,
       component: "div",
       children: props.title
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       sx: {
         margin: 0
       },
-      children: /*#__PURE__*/jsxs(Box$1, _extends({
+      children: /*#__PURE__*/jsxs(Box$2, _extends({
         className: classes.barChart,
         sx: containerSize
       }, a11yProps, {
-        children: [/*#__PURE__*/jsx(Box$1, {
+        children: [/*#__PURE__*/jsx(Box$2, {
           className: classes.bar,
           sx: containerSize
-        }), /*#__PURE__*/jsx(Box$1, {
+        }), /*#__PURE__*/jsx(Box$2, {
           className: classes.barProgress,
           style: barStyle$1(value, props.dynamicColor, props.showComplete)
-        }), /*#__PURE__*/jsx(Box$1, {
+        }), /*#__PURE__*/jsx(Box$2, {
           className: classes.barTitleContainer,
           children: /*#__PURE__*/jsx(Typography, {
             className: classes.barTitle,
@@ -13901,7 +13993,7 @@ const SliderChart = props => {
   };
   const label = props.title || "Progress";
   const keyValue = useUID();
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     role: "figure",
     "aria-labelledby": `slider-chart-title-${keyValue}`,
     className: classes.container,
@@ -13913,9 +14005,9 @@ const SliderChart = props => {
       sx: titleStyle,
       component: props.titleComponent,
       children: props.title
-    }), /*#__PURE__*/jsxs(Box$1, {
+    }), /*#__PURE__*/jsxs(Box$2, {
       className: classes.chartContainer,
-      children: [/*#__PURE__*/jsx(Box$1, {
+      children: [/*#__PURE__*/jsx(Box$2, {
         sx: {
           width: "100%"
         },
@@ -13923,7 +14015,7 @@ const SliderChart = props => {
           label: label,
           size: props.size
         }, props))
-      }), /*#__PURE__*/jsx(Box$1, {
+      }), /*#__PURE__*/jsx(Box$2, {
         children: /*#__PURE__*/jsx(Typography, {
           style: valueClass,
           children: newSubtitle
@@ -14136,13 +14228,13 @@ const Legend$1 = props => {
       children: /*#__PURE__*/jsxs(Paper, {
         style: classes.container,
         elevation: 3,
-        children: [/*#__PURE__*/jsx(Box$1, {
+        children: [/*#__PURE__*/jsx(Box$2, {
           style: getRubricStyle(rubric, classes.rubricCircle),
           children: /*#__PURE__*/jsx(Typography, {
             style: classes.rubricLevel,
             children: rubric.levelLabel
           })
-        }), /*#__PURE__*/jsxs(Box$1, {
+        }), /*#__PURE__*/jsxs(Box$2, {
           style: classes.rubricNameContainer,
           children: [props.legendSize === "large" && /*#__PURE__*/jsx(Typography, {
             variant: "subtitle2",
@@ -14823,9 +14915,9 @@ const QontoStepIcon = props => {
     className: props.className,
     children: props.completed ? /*#__PURE__*/jsx(CheckCircle, {
       className: "QontoStepIcon-completedIcon"
-    }) : /*#__PURE__*/jsx(Box$1, {
+    }) : /*#__PURE__*/jsx(Box$2, {
       className: "QontoStepIcon-circle",
-      children: /*#__PURE__*/jsx(Box$1, {
+      children: /*#__PURE__*/jsx(Box$2, {
         className: "StepText",
         children: props.icon
       })
@@ -14887,10 +14979,10 @@ Header.propTypes = {
 const CompletedItemList = ({
   data
 }) => {
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     children: /*#__PURE__*/jsx(List, {
       children: data == null ? void 0 : data.map((item, index) => /*#__PURE__*/jsx(ListItem, {
-        children: /*#__PURE__*/jsxs(Box$1, {
+        children: /*#__PURE__*/jsxs(Box$2, {
           sx: {
             display: "flex"
           },
@@ -15035,7 +15127,7 @@ const WizardPanel = props => {
         activeStep: activeStep,
         allStepsCompleted: props.completed || isCompleting ? true : false
       })
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       ref: containerRef,
       sx: containerStyle,
       style: props.display === "drawer" ? stepsContainer : undefined,
@@ -15044,7 +15136,7 @@ const WizardPanel = props => {
         index: activeStep,
         children: (_props$panels3 = props.panels) == null ? void 0 : _props$panels3.map((step, index) => {
           var _step$completedItems;
-          return /*#__PURE__*/jsxs(Box$1, {
+          return /*#__PURE__*/jsxs(Box$2, {
             value: activeStep,
             index: index,
             dir: theme.direction,
@@ -15070,9 +15162,9 @@ const WizardPanel = props => {
           }, `wizardPanelKey-${step.id}`);
         })
       })
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       style: bottomBarStyle,
-      children: /*#__PURE__*/jsxs(Box$1, {
+      children: /*#__PURE__*/jsxs(Box$2, {
         className: classes.buttonContainer,
         children: [/*#__PURE__*/jsx(Button, {
           "aria-label": "Back",
@@ -15250,19 +15342,19 @@ const subtitleContainerStyle = {
 };
 const Legend = props => {
   var _props$data;
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: {
       padding: 1
     },
-    children: (_props$data = props.data) == null ? void 0 : _props$data.map(rubric => /*#__PURE__*/jsxs(Box$1, {
+    children: (_props$data = props.data) == null ? void 0 : _props$data.map(rubric => /*#__PURE__*/jsxs(Box$2, {
       sx: {
         mb: "2px"
       },
-      children: [/*#__PURE__*/jsxs(Box$1, {
+      children: [/*#__PURE__*/jsxs(Box$2, {
         sx: {
           display: "flex"
         },
-        children: [/*#__PURE__*/jsx(Box$1, {
+        children: [/*#__PURE__*/jsx(Box$2, {
           sx: _extends({
             borderRadius: "50%",
             backgroundColor: rubric.color
@@ -15275,7 +15367,7 @@ const Legend = props => {
           component: "p",
           children: rubric.name
         })]
-      }), /*#__PURE__*/jsxs(Box$1, {
+      }), /*#__PURE__*/jsxs(Box$2, {
         sx: _extends({
           display: "flex",
           alignItems: "center"
@@ -15498,7 +15590,7 @@ const RubricDistributionChart = props => {
   const keyValue = useUID();
   const validatedData = replaceDuplicateColor(props.data);
   const rubricsDataWithPercent = addPercentValue(validatedData);
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     role: "figure",
     "aria-labelledby": `bar-chart-${keyValue}`,
     children: [/*#__PURE__*/jsx("title", {
@@ -15509,18 +15601,18 @@ const RubricDistributionChart = props => {
       sx: titleStyle,
       component: props.titleComponent,
       children: props.title
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       sx: {
         margin: 0
       },
-      children: /*#__PURE__*/jsxs(Box$1, _extends({
+      children: /*#__PURE__*/jsxs(Box$2, _extends({
         className: classes.barChart,
         sx: containerSize
       }, a11yProps, {
-        children: [/*#__PURE__*/jsx(Box$1, {
+        children: [/*#__PURE__*/jsx(Box$2, {
           className: classes.bar,
           sx: containerSize
-        }), rubricsDataWithPercent == null ? void 0 : rubricsDataWithPercent.map((rubric, index) => /*#__PURE__*/jsx(Box$1, {
+        }), rubricsDataWithPercent == null ? void 0 : rubricsDataWithPercent.map((rubric, index) => /*#__PURE__*/jsx(Box$2, {
           className: classes.barProgress,
           "aria-label": rubric.name,
           "aria-valuemax": getOverallTotal(rubricsDataWithPercent),
@@ -15581,7 +15673,7 @@ const _excluded$6 = ["rules"];
 const FieldWrapper = ({
   children
 }) => {
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: {
       paddingTop: 1,
       overflow: "auto"
@@ -15670,7 +15762,7 @@ function Row({
       ruleIndex
     });
   }, [groupId, ruleId, index, ruleIndex]);
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     sx: {
       display: "flex",
       flexWrap: "no-wrap",
@@ -15718,7 +15810,7 @@ function Row({
           children: templateValueField
         })
       })]
-    }), /*#__PURE__*/jsx(Box$1, {
+    }), /*#__PURE__*/jsx(Box$2, {
       sx: {
         width: "48px",
         marginTop: "22px"
@@ -15780,7 +15872,7 @@ const RuleGroup = /*#__PURE__*/memo(_ref => {
       rules
     } = _ref,
     rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  return /*#__PURE__*/jsx(Box$1, {
+  return /*#__PURE__*/jsx(Box$2, {
     sx: {
       paddingBottom: 1
     },
@@ -15804,13 +15896,13 @@ const RuleGroupFooter = /*#__PURE__*/memo(({
   groupIndex,
   onGroupDelete,
   onRuleAdd
-}) => /*#__PURE__*/jsx(Box$1, {
+}) => /*#__PURE__*/jsx(Box$2, {
   sx: {
     display: "flex",
     justifyContent: "end",
     marginRight: 6
   },
-  children: /*#__PURE__*/jsxs(Box$1, {
+  children: /*#__PURE__*/jsxs(Box$2, {
     sx: {
       display: "flex",
       flexDirection: "row"
@@ -15842,16 +15934,16 @@ RuleGroupFooter.propTypes = {
 const BuilderHeader = /*#__PURE__*/memo(({
   onAdd,
   children
-}) => /*#__PURE__*/jsxs(Box$1, {
+}) => /*#__PURE__*/jsxs(Box$2, {
   sx: {
     display: "flex"
   },
-  children: [/*#__PURE__*/jsx(Box$1, {
+  children: [/*#__PURE__*/jsx(Box$2, {
     sx: {
       flex: 1
     },
     children: children
-  }), /*#__PURE__*/jsx(Box$1, {
+  }), /*#__PURE__*/jsx(Box$2, {
     sx: {
       display: "flex",
       justifyContent: "end",
@@ -15871,7 +15963,7 @@ const RuleGroupIndex = /*#__PURE__*/memo(({
   index,
   isFirst,
   isLast
-}) => /*#__PURE__*/jsx(Box$1, {
+}) => /*#__PURE__*/jsx(Box$2, {
   sx: {
     display: "flex",
     flexDirection: "column",
@@ -15879,7 +15971,7 @@ const RuleGroupIndex = /*#__PURE__*/memo(({
     width: "40px",
     height: "88px"
   },
-  children: /*#__PURE__*/jsxs(Box$1, {
+  children: /*#__PURE__*/jsxs(Box$2, {
     sx: {
       display: "flex",
       flexDirection: "column",
@@ -16153,7 +16245,7 @@ const TextBuilder = /*#__PURE__*/memo(({
     groupIndex,
     defaultRule
   }), [defaultRule]);
-  return /*#__PURE__*/jsxs(Box$1, {
+  return /*#__PURE__*/jsxs(Box$2, {
     sx: {
       ".MuiFormControl-root": {
         background: "white"
@@ -16170,7 +16262,7 @@ const TextBuilder = /*#__PURE__*/memo(({
       sx: {
         paddingBottom: 2
       },
-      children: /*#__PURE__*/jsxs(Box$1, {
+      children: /*#__PURE__*/jsxs(Box$2, {
         sx: {
           display: "flex",
           flexWrap: "no-wrap"
@@ -16181,7 +16273,7 @@ const TextBuilder = /*#__PURE__*/memo(({
           isLast: index === rows.length - 1,
           index: index,
           groupId: groupId
-        }), /*#__PURE__*/jsxs(Box$1, {
+        }), /*#__PURE__*/jsxs(Box$2, {
           sx: {
             flex: 1
           },
@@ -16453,7 +16545,7 @@ const FormButtons = ({
       });
     };
   }
-  return /*#__PURE__*/jsxs(Box$1, _extends({
+  return /*#__PURE__*/jsxs(Box$2, _extends({
     className: classes.bottomButtonContainer
   }, hidden && {
     style: {
@@ -17520,8 +17612,8 @@ const ReadOnlyView = ({
       });
     }
     if (multiple) {
-      return /*#__PURE__*/jsx(Box$2, {
-        children: value.map(item => /*#__PURE__*/jsx(Box$2, {
+      return /*#__PURE__*/jsx(Box$3, {
+        children: value.map(item => /*#__PURE__*/jsx(Box$3, {
           sx: {
             paddingBottom: "2px",
             paddingRight: "2px"
@@ -17704,7 +17796,7 @@ const DateSelectReadOnly$2 = props => {
       }), /*#__PURE__*/jsx(Typography, {
         color: "text.secondary",
         variant: "body1",
-        children: /*#__PURE__*/jsxs(Box$1, {
+        children: /*#__PURE__*/jsxs(Box$2, {
           sx: {
             display: "flex"
           },
@@ -17727,7 +17819,7 @@ const DateSelectReadOnly$2 = props => {
       }), /*#__PURE__*/jsx(Typography, {
         color: "text.secondary",
         variant: "body1",
-        children: /*#__PURE__*/jsxs(Box$1, {
+        children: /*#__PURE__*/jsxs(Box$2, {
           sx: {
             display: "flex"
           },
@@ -18104,7 +18196,7 @@ const DisableWrapper = ({
 };
 
 const FieldContainer = props => {
-  return /*#__PURE__*/jsx(Box$2, _extends({}, props, {
+  return /*#__PURE__*/jsx(Box$3, _extends({}, props, {
     sx: _extends({}, props.sx, {
       "& > div": {
         width: "100%"
@@ -18112,7 +18204,7 @@ const FieldContainer = props => {
     })
   }));
 };
-FieldContainer.propTypes = Box$2.propTypes;
+FieldContainer.propTypes = Box$3.propTypes;
 
 registerPlugin(FilePondPluginFileValidateType, FilePondPluginFileValidateSize, FilePondPluginImageExifOrientation, FilePondPluginImagePreview, FilePondPluginGetFile);
 
@@ -18324,7 +18416,7 @@ const Upload = props => {
       allowFileTypeValidation: false
     };
     const overrideProps = typeof inputProps === "function" ? inputProps(filePondProps) : inputProps;
-    return /*#__PURE__*/jsx(Box$1, {
+    return /*#__PURE__*/jsx(Box$2, {
       sx: styles,
       children: /*#__PURE__*/jsx(FilePond, _extends({
         ref: filePondRef
@@ -18354,7 +18446,7 @@ const Upload = props => {
         },
         htmlFor: `${schema.title}-helper`,
         children: schema.title
-      }), /*#__PURE__*/jsx(Box$1, {
+      }), /*#__PURE__*/jsx(Box$2, {
         sx: {
           marginTop: 1
         },