aefis-core-ui 2.1.5 → 2.1.6-rc2

package/dist/index.modern.js

@@ -1,10 +1,10 @@
 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$1, 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, Autocomplete, Paper, Zoom, Fab, Stepper, Step, StepLabel, ToggleButtonGroup, ToggleButton, FormHelperText, FormControl, InputLabel, Popover, ClickAwayListener, MenuList, ButtonGroup, Select, Hidden } from '@mui/material';
+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$1, 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$1, 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, ButtonGroup, Popover, ClickAwayListener, MenuList, 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, 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, Dashboard, DashboardOutlined, DashboardTwoTone, DateRange, DateRangeOutlined, Delete as Delete$2, DeleteOutlined, Description, Done, EditOutlined as EditOutlined$1, 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, Face, FaceOutlined, FilterList as FilterList$1, FlightOutlined, Flight, FlagOutlined, Fullscreen, FullscreenExit, GetApp as GetApp$1, GetAppOutlined, Group, 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, ListAlt, ListAltOutlined, ListAltTwoTone, LocalOffer, LocalOfferOutlined as LocalOfferOutlined$1, LocalPhone, LocalPhoneOutlined as LocalPhoneOutlined$1, Login, Map, Menu, MenuBookOutlined, Message, MessageOutlined as MessageOutlined$1, MilitaryTechOutlined, MoreVert as MoreVert$1, MoreHoriz, Notifications, NotificationsActive, Palette, PaletteOutlined, Person, PersonOutline, People, PeopleOutlined, PersonAddAltOutlined, PersonAddOutlined as PersonAddOutlined$1, PictureAsPdf, PictureAsPdfOutlined as PictureAsPdfOutlined$1, Place, PlaceOutlined, PlayArrow, PlayArrowOutlined, Print, PrintOutlined as PrintOutlined$1, PrintTwoTone, PriorityHigh as PriorityHigh$1, PublicOutlined, RecordVoiceOverOutlined, Receipt, Refresh as Refresh$1, RestartAlt, RoomServiceOutlined, Save, SaveOutlined, Schedule as Schedule$1, School, SchoolTwoTone, Science, ScienceOutlined, SearchOutlined, Settings as Settings$1, SettingsOutlined, ShareOutlined, SportsOutlined, Star as Star$1, StarBorder as StarBorder$1, SwapVert, TableView, TableViewOutlined, TrendingDownOutlined, TrendingFlatOutlined, TrendingUpOutlined, Tune as Tune$1, Verified, VerifiedOutlined, ViewList, Visibility, VisibilityOutlined as VisibilityOutlined$1, Warning, Web, WebOutlined, Widgets, WorkOutline } from '@mui/icons-material/';
+import { KeyboardArrowRight as KeyboardArrowRight$1, AccountBalance as AccountBalance$1, AccountBalanceOutlined as AccountBalanceOutlined$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, AssignmentOutlined as AssignmentOutlined$1, AssignmentLate, AssignmentLateOutlined, AssignmentTurnedIn, AssignmentTurnedInOutlined, AssignmentTwoTone, AttachFile, BarChartOutlined, Book, BookOutlined as BookOutlined$1, BookTwoTone, BrushOutlined, BuildOutlined, BuildTwoTone, BusinessCenterOutlined, Calculate, CalculateTwoTone, CalculateOutlined as CalculateOutlined$1, Cancel as Cancel$1, ChatOutlined, Check as Check$1, CheckCircle as CheckCircle$1, CheckCircleOutlined, CheckOutlined as CheckOutlined$1, Clear as Clear$1, Close as Close$1, CloudOutlined, CloudDownload, CloudDownloadOutlined, CloudUpload, CloudUploadOutlined, CollectionsBookmarkOutlined as CollectionsBookmarkOutlined$1, Comment, ContactMail as ContactMail$1, ContentCopy, Dashboard, DashboardOutlined, DashboardTwoTone, DateRange, DateRangeOutlined, Delete as Delete$2, DeleteOutlined, Description, ViewListOutlined as ViewListOutlined$1, Done, Edit, EditOutlined as EditOutlined$1, EmojiPeople, EmojiPeopleOutlined, EmojiEventsOutlined, Error as Error$2, ErrorOutline, ErrorOutlined as ErrorOutlined$1, Event as Event$1, EventOutlined as EventOutlined$1, EventRepeat, EventRepeatOutlined, ExpandLess as ExpandLess$1, ExpandMore as ExpandMore$1, Explore, ExploreOutlined as ExploreOutlined$1, ExploreTwoTone, Extension, ExtensionOutlined, Face, FaceOutlined, FilterList as FilterList$1, FlightOutlined, Flight, FlagOutlined, Fullscreen, FullscreenExit, GetApp as GetApp$1, GetAppOutlined, Group, Help, HelpOutlined as HelpOutlined$1, HelpTwoTone, Hiking, Home, HomeTwoTone, HomeOutlined, HomeWorkOutlined, ImageSearch, Info as Info$1, InfoOutlined as InfoOutlined$1, KeyboardArrowLeft as KeyboardArrowLeft$1, KeyboardArrowUp as KeyboardArrowUp$1, Lens, Lightbulb, LightbulbOutlined as LightbulbOutlined$1, Link, ListAlt, ListAltOutlined, ListAltTwoTone, LocalOffer, LocalOfferOutlined as LocalOfferOutlined$1, LocalPhone, LocalPhoneOutlined as LocalPhoneOutlined$1, Login, Map, MapOutlined as MapOutlined$1, Menu, MenuBookOutlined, Message, MessageOutlined as MessageOutlined$1, MilitaryTechOutlined, MoreVert as MoreVert$1, MoreHoriz, Notifications, NotificationsActive, Palette, PaletteOutlined, Person, PersonOutline, PersonOutlined as PersonOutlined$1, People, PeopleOutlined, PersonAddAltOutlined, PersonAddOutlined as PersonAddOutlined$1, PictureAsPdf, PictureAsPdfOutlined as PictureAsPdfOutlined$1, Place, PlaceOutlined, PlayArrow, PlayArrowOutlined, Print, PrintOutlined as PrintOutlined$1, PrintTwoTone, PriorityHigh as PriorityHigh$1, PublicOutlined, RecordVoiceOverOutlined, Receipt, Refresh as Refresh$1, RestartAlt, RoomServiceOutlined, Save, SaveOutlined, Schedule as Schedule$1, School, SchoolOutlined as SchoolOutlined$1, SchoolTwoTone, Science, ScienceOutlined, Search as Search$1, SearchOutlined, Settings as Settings$1, SettingsOutlined, ShareOutlined, SportsOutlined, Star as Star$1, StarBorder as StarBorder$1, SwapVert, TableView, TableViewOutlined, TrendingDownOutlined, TrendingFlatOutlined, TrendingUpOutlined, Tune as Tune$1, Verified, VerifiedOutlined, ViewList, Visibility, VisibilityOutlined as VisibilityOutlined$1, Warning, WarningOutlined as WarningOutlined$1, Web, WebOutlined, Widgets, WidgetsOutlined as WidgetsOutlined$1, WorkOutline } from '@mui/icons-material/';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { red, orange, green, blue, grey, yellow, indigo, purple, cyan, teal, lime, blueGrey, amber, lightBlue, deepOrange } from '@mui/material/colors';
 import makeStyles$1 from '@mui/styles/makeStyles';
@@ -55,6 +55,7 @@ import Edit$1 from '@mui/icons-material/Edit';
 import AutorenewIcon from '@mui/icons-material/Autorenew';
 import { VerticalTimeline, VerticalTimelineElement } from 'react-vertical-timeline-component';
 import Moment from 'react-moment';
+import AddIcon from '@mui/icons-material/Add';
 import { useInView } from 'react-intersection-observer';
 import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
@@ -374,15 +375,12 @@ const CollectionsBookmarkOutlined = props => {
 const ContactMail = props => {
   return /*#__PURE__*/jsx(ContactMail$1, _extends({}, props));
 };
-const Delete$1 = props => {
+const Delete = props => {
   return /*#__PURE__*/jsx(Delete$2, _extends({}, props));
 };
 const EditOutlined = props => {
   return /*#__PURE__*/jsx(EditOutlined$1, _extends({}, props));
 };
-const EditNote = props => {
-  return /*#__PURE__*/jsx(Edit, _extends({}, props));
-};
 const Error$1 = props => {
   return /*#__PURE__*/jsx(Error$2, _extends({}, props));
 };
@@ -504,10 +502,9 @@ Icon.propTypes = {
   /** The name of the MUI icon. */
   name: PropTypes.string.isRequired
 };
-var Icon$1 = Icon;
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$H = makeStyles(theme => ({
+const useStyles = makeStyles(theme => ({
   menu: {
     textDecoration: "none",
     color: "inherit"
@@ -524,7 +521,7 @@ const useStyles$H = makeStyles(theme => ({
   }
 }));
 const ActionMenu = props => {
-  const classes = useStyles$H();
+  const classes = useStyles();
   const [anchorEl, setAnchorEl] = useState(null);
   const open = Boolean(anchorEl);
   const handleClick = event => {
@@ -656,7 +653,7 @@ Action.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const Actions$1 = props => {
+const Actions = props => {
   var _props$configuration;
   const seededKeyValue = useUIDSeed();
   const getStyle = item => {
@@ -671,7 +668,7 @@ const Actions$1 = props => {
     })
   }, `actionMenuItem-${seededKeyValue(index)}`));
 };
-Actions$1.propTypes = {
+Actions.propTypes = {
   /** Data from the object. */
   data: PropTypes.any,
   /** Action configuration. */
@@ -810,42 +807,42 @@ Alert.propTypes = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const danger$1 = {
+const danger = {
   light: red[50],
   default: red[500],
   dark: red[900]
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const warning$1 = {
+const warning = {
   light: orange[50],
   default: orange[500],
   dark: orange[900]
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const success$1 = {
+const success = {
   light: green[50],
   default: green[500],
   dark: green[900]
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const info$1 = {
+const info = {
   light: blue[50],
   default: blue[500],
   dark: blue[900]
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const common$1 = {
+const common = {
   light: grey[200],
   default: grey[500],
   dark: grey[900]
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const dynamicSuccess$1 = {
+const dynamicSuccess = {
   0: red[500],
   1: red[500],
   2: red[500],
@@ -950,14 +947,14 @@ const dynamicSuccess$1 = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const inProgress$2 = {
+const inProgress = {
   light: blue[50],
   default: blue[500],
   dark: blue[900]
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const goalMet$1 = {
+const goalMet = {
   light: green[50],
   default: green[500],
   dark: green[900]
@@ -983,63 +980,63 @@ const noData = _extends({}, inProgress$1, {
     return noData.default;
   }
 });
-const danger = _extends({}, danger$1, {
+const danger$1 = _extends({}, danger, {
   enumerable: true,
   get() {
-    return danger$1.default;
+    return danger.default;
   }
 });
-const goalMet = _extends({}, goalMet$1, {
+const goalMet$1 = _extends({}, goalMet, {
   enumerable: true,
   get() {
-    return goalMet$1.default;
+    return goalMet.default;
   }
 });
-_extends({}, goalNotMet, {
+const goalNotMet$1 = _extends({}, goalNotMet, {
   enumerable: true,
   get() {
     return goalNotMet.default;
   }
 });
-const inProgress = _extends({}, inProgress$2, {
+const inProgress$2 = _extends({}, inProgress, {
   enumerable: true,
   get() {
-    return inProgress$2.default;
+    return inProgress.default;
   }
 });
-const warning = _extends({}, warning$1, {
+const warning$1 = _extends({}, warning, {
   enumerable: true,
   get() {
-    return warning$1.default;
+    return warning.default;
   }
 });
-const success = _extends({}, success$1, {
+const success$1 = _extends({}, success, {
   enumerable: true,
   get() {
-    return success$1.default;
+    return success.default;
   }
 });
-const info = _extends({}, info$1, {
+const info$1 = _extends({}, info, {
   enumerable: true,
   get() {
-    return info$1.default;
+    return info.default;
   }
 });
-const common = _extends({}, common$1, {
+const common$1 = _extends({}, common, {
   enumerable: true,
   get() {
-    return common$1.default;
+    return common.default;
   }
 });
-const dynamicSuccess = _extends({}, dynamicSuccess$1, {
+const dynamicSuccess$1 = _extends({}, dynamicSuccess, {
   enumerable: true,
   get() {
-    return dynamicSuccess$1.default;
+    return dynamicSuccess.default;
   }
 });
 
 // Copyright (c) 2022 HelioCampus Inc, all rights reserved.
-const useStyles$G = makeStyles$1(theme => ({
+const useStyles$1 = makeStyles$1(theme => ({
   title: {
     fontSize: "0.975rem",
     fontWeight: 400,
@@ -1075,7 +1072,7 @@ const useStyles$G = makeStyles$1(theme => ({
   selectedCircle: {
     width: 25,
     height: 25,
-    backgroundColor: success["default"],
+    backgroundColor: success$1["default"],
     borderRadius: "50%",
     border: "2px solid #ffffff",
     position: "absolute",
@@ -1089,17 +1086,11 @@ const useStyles$G = makeStyles$1(theme => ({
     color: "#ffffff"
   }
 }));
-({
-  success: /*#__PURE__*/jsx(Check, {}),
-  info: /*#__PURE__*/jsx(InfoOutlined, {}),
-  warning: /*#__PURE__*/jsx(WarningOutlined, {}),
-  error: /*#__PURE__*/jsx(ErrorOutlined, {})
-});
 
 /** Simple component to display a box with or without an avatar along with title and subtitle text. */
 
 const AvatarBox = props => {
-  const classes = useStyles$G();
+  const classes = useStyles$1();
   const avatarStyle = {
     backgroundColor: grey[500]
   };
@@ -1138,30 +1129,30 @@ const AvatarBox = props => {
     avatarStyle.backgroundColor = props.avatarColor;
     boxStyle.backgroundColor = props.backgroundColor;
   } else if (props.type === "info") {
-    titleStyle.color = info.dark;
-    subtitleStyle.color = info.dark;
-    avatarStyle.backgroundColor = info.default;
-    boxStyle.backgroundColor = info.light;
+    titleStyle.color = info$1.dark;
+    subtitleStyle.color = info$1.dark;
+    avatarStyle.backgroundColor = info$1.default;
+    boxStyle.backgroundColor = info$1.light;
   } else if (props.type === "success") {
-    titleStyle.color = success.dark;
-    subtitleStyle.color = success.dark;
-    avatarStyle.backgroundColor = success.default;
-    boxStyle.backgroundColor = success.light;
+    titleStyle.color = success$1.dark;
+    subtitleStyle.color = success$1.dark;
+    avatarStyle.backgroundColor = success$1.default;
+    boxStyle.backgroundColor = success$1.light;
   } else if (props.type === "danger") {
-    titleStyle.color = danger.dark;
-    subtitleStyle.color = danger.dark;
-    avatarStyle.backgroundColor = danger.default;
-    boxStyle.backgroundColor = danger.light;
+    titleStyle.color = danger$1.dark;
+    subtitleStyle.color = danger$1.dark;
+    avatarStyle.backgroundColor = danger$1.default;
+    boxStyle.backgroundColor = danger$1.light;
   } else if (props.type === "error") {
-    titleStyle.color = danger.dark;
-    subtitleStyle.color = danger.dark;
-    avatarStyle.backgroundColor = danger.default;
-    boxStyle.backgroundColor = danger.light;
+    titleStyle.color = danger$1.dark;
+    subtitleStyle.color = danger$1.dark;
+    avatarStyle.backgroundColor = danger$1.default;
+    boxStyle.backgroundColor = danger$1.light;
   } else if (props.type === "warning") {
-    titleStyle.color = warning.dark;
-    subtitleStyle.color = warning.dark;
-    avatarStyle.backgroundColor = warning.default;
-    boxStyle.backgroundColor = warning.light;
+    titleStyle.color = warning$1.dark;
+    subtitleStyle.color = warning$1.dark;
+    avatarStyle.backgroundColor = warning$1.default;
+    boxStyle.backgroundColor = warning$1.light;
   }
   if (props.titleMaxWidth) {
     titleStyle.maxWidth = props.titleMaxWidth;
@@ -1257,7 +1248,7 @@ AvatarBox.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$F = makeStyles$1(theme => ({
+const useStyles$2 = makeStyles$1(theme => ({
   formattedContainer: {
     display: "flex",
     alignItems: "center",
@@ -1315,25 +1306,25 @@ const icon = {
 /** Component to display a title, subtitle, and caption along with an icon avatar. */
 
 const AvatarTitle = /*#__PURE__*/React.memo(function AvatarTitle(props) {
-  const classes = useStyles$F();
+  const classes = useStyles$2();
   const avatarStyle = {
     info: {
-      backgroundColor: info.default,
+      backgroundColor: info$1.default,
       boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
       borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
     },
     success: {
-      backgroundColor: success.default,
+      backgroundColor: success$1.default,
       boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
       borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
     },
     error: {
-      backgroundColor: danger.default,
+      backgroundColor: danger$1.default,
       boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
       borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
     },
     warning: {
-      backgroundColor: warning.default,
+      backgroundColor: warning$1.default,
       boxShadow: props.avatarShadow ? "rgb(58 53 65 / 42%) 0px 4px 8px -4px" : "none",
       borderRadius: props.avatarVariant === "square" ? "6px" : "50%"
     },
@@ -1646,12 +1637,12 @@ const LegacyButtonTheme = createTheme(theme, {
   }
 });
 
-const _excluded$j = ["name"];
+const _excluded = ["name"];
 const Button = /*#__PURE__*/forwardRef(function Button(_ref, ref) {
   let {
       name
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$j);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const isColorDefault = props.color === undefined || props.color === "default";
   const colorThemeName = isColorDefault ? "grey" : props.color;
   const theme = useTheme$1();
@@ -1744,7 +1735,7 @@ AnimatedExpandMoreIcon.propTypes = {
   sx: PropTypes.any
 };
 
-const _excluded$i = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
+const _excluded$1 = ["name", "icon", "menuConfiguration", "color", "displayType", "variant", "onClick", "link"];
 const AefisButton = withStyles$1({
   root: {
     "&:focus": {
@@ -1766,7 +1757,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
       onClick,
       link
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$i);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const [anchorEl, setAnchorEl] = useState(null);
   const handleClick = (event, link, buttonId) => {
     setAnchorEl(event.currentTarget);
@@ -1793,7 +1784,7 @@ const MenuButton = /*#__PURE__*/forwardRef(function MenuButton(_ref, ref) {
     id: buttonId,
     color: displayType === "default" ? color : undefined,
     name: name,
-    startIcon: icon && displayType === "default" ? /*#__PURE__*/jsx(Icon$1, {
+    startIcon: icon && displayType === "default" ? /*#__PURE__*/jsx(Icon, {
       name: props.icon
     }) : undefined,
     variant: displayType === "default" ? variant : undefined
@@ -1880,7 +1871,7 @@ const useTag = color => {
   return useStyles();
 };
 
-const useStyles$E = makeStyles(theme => ({
+const useStyles$3 = makeStyles(theme => ({
   sectionHeader: {
     paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2)
@@ -1942,7 +1933,7 @@ const getGradientBackgroundColorArray = arrayIndex => {
   const color2Array = [blue[600], indigo[600], purple[600], cyan[600], teal[600], green[600], blue[600], cyan[600], lime[600], indigo[600]];
   return [color1Array[arrayIndex], color2Array[arrayIndex]];
 };
-const StyledBadge$1 = withStyles$1(() => ({
+const StyledBadge = withStyles$1(() => ({
   badge: {
     right: -12,
     top: 4,
@@ -1953,7 +1944,7 @@ const StyledBadge$1 = withStyles$1(() => ({
 /** Displays AEFIS content box similar to MUI Card. */
 
 const ContentBox = props => {
-  const classes = useStyles$E();
+  const classes = useStyles$3();
   const [invisible, setInvisible] = useState(true);
   useEffect(() => {
     props.titleBadge && setInvisible(false);
@@ -1992,7 +1983,7 @@ const ContentBox = props => {
   }
   if (props.titleBadge) {
     headerProps.title = /*#__PURE__*/jsx("div", {
-      children: /*#__PURE__*/jsx(StyledBadge$1, {
+      children: /*#__PURE__*/jsx(StyledBadge, {
         badgeContent: props.titleBadge,
         invisible: invisible,
         color: "secondary",
@@ -2049,7 +2040,8 @@ const ContentBox = props => {
     height: props.imageHeight,
     backgroundColor: props.imageBackgroundColor ? props.imageBackgroundColor : "transparent"
   } : {};
-  return /*#__PURE__*/jsxs("div", {
+  return /*#__PURE__*/jsxs(Box$1, {
+    sx: props.sx,
     style: props.containerStyle,
     children: [props.header && /*#__PURE__*/jsx("div", {
       className: classes.sectionHeader,
@@ -2153,7 +2145,9 @@ ContentBox.propTypes = {
   /** Additional styles for the card */
   cardStyle: PropTypes.any,
   /** Additional styles for the content box container */
-  containerStyle: PropTypes.any
+  containerStyle: PropTypes.any,
+  /** Additional styles to apply */
+  sx: PropTypes.object
 };
 
 const defaultColorPalette = {
@@ -2315,12 +2309,12 @@ Chip.defaultProps = {
   displayType: "default"
 };
 
-const colorPalette$v = {
+const colorPalette = {
   light: grey[200],
   default: grey[500],
   dark: grey[900]
 };
-const modifiedPalette$1 = (palette, outlined) => {
+const modifiedPalette = (palette, outlined) => {
   if (!outlined) {
     return {
       light: palette.dark,
@@ -2330,8 +2324,8 @@ const modifiedPalette$1 = (palette, outlined) => {
   }
   return palette;
 };
-const ChipDisplay$2 = props => {
-  const palette = _extends({}, colorPalette$v, props.configuration.palette);
+const ChipDisplay = props => {
+  const palette = _extends({}, colorPalette, props.configuration.palette);
   const BusinessObjectIcon = props.configuration.Icon || AccountBalance;
   const classes = makeStyles(() => ({
     deleteIcon: {
@@ -2369,10 +2363,10 @@ const ChipDisplay$2 = props => {
     deleteIcon: /*#__PURE__*/jsx(Cancel, {
       className: classes.deleteIcon
     }),
-    colorPalette: modifiedPalette$1(palette, outlined)
+    colorPalette: modifiedPalette(palette, outlined)
   });
 };
-ChipDisplay$2.propTypes = {
+ChipDisplay.propTypes = {
   /** Size of the display small|default|large */
   size: PropTypes.any,
   /** Data from the entity itself */
@@ -2389,13 +2383,13 @@ ChipDisplay$2.propTypes = {
   /** OnDelete action for the chip. If an Action is set, a delete icon will be displayed */
   onDelete: PropTypes.any
 };
-ChipDisplay$2.defaultProps = {
+ChipDisplay.defaultProps = {
   size: "small",
   hasIcon: false,
   outlined: false
 };
 
-const colorPalette$u = {
+const colorPalette$1 = {
   light: grey[50],
   default: grey[500],
   dark: grey[900]
@@ -2405,12 +2399,12 @@ const colorPalette$u = {
  * ListItem display for Entities
  */
 
-const ListItemDisplay$2 = props => {
+const ListItemDisplay = props => {
   const {
     data,
     size
   } = props;
-  const palette = _extends({}, colorPalette$u, props.configuration.palette);
+  const palette = _extends({}, colorPalette$1, props.configuration.palette);
   const BusinessObjectIcon = props.configuration.Icon || HelpOutlined;
   const classes = makeStyles(theme => ({
     root: {
@@ -2503,10 +2497,10 @@ const ListItemDisplay$2 = props => {
     })]
   });
 };
-ListItemDisplay$2.defaultProps = {
+ListItemDisplay.defaultProps = {
   size: "default"
 };
-ListItemDisplay$2.propTypes = {
+ListItemDisplay.propTypes = {
   /** data from the entity itself */
   data: PropTypes.any,
   /** size of the list item. values are small | default | large */
@@ -2519,97 +2513,97 @@ ListItemDisplay$2.propTypes = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$t = {
+const colorPalette$2 = {
   light: "#ffffff",
   default: green[500],
   dark: green[500]
 };
-const institutionConfiguration$1 = {
-  palette: colorPalette$t,
+const institutionConfiguration = {
+  palette: colorPalette$2,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$s = {
+const colorPalette$3 = {
   light: "#ffffff",
   default: purple[500],
   dark: purple[500]
 };
-const collegeConfiguration$1 = {
-  palette: colorPalette$s,
+const collegeConfiguration = {
+  palette: colorPalette$3,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$r = {
+const colorPalette$4 = {
   light: "#ffffff",
   default: blueGrey[500],
   dark: blueGrey[500]
 };
-const departmentConfiguration$1 = {
-  palette: colorPalette$r,
+const departmentConfiguration = {
+  palette: colorPalette$4,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$q = {
+const colorPalette$5 = {
   light: "#ffffff",
   default: blue[500],
   dark: blue[500]
 };
-const programConfiguration$1 = {
-  palette: colorPalette$q,
+const programConfiguration = {
+  palette: colorPalette$5,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$p = {
+const colorPalette$6 = {
   light: "#ffffff",
   default: red[800],
   dark: red[800]
 };
 const externalConfiguration = {
-  palette: colorPalette$p,
+  palette: colorPalette$6,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$o = {
+const colorPalette$7 = {
   light: "#ffffff",
   default: purple[500],
   dark: purple[500]
 };
-const administrativeUnitConfiguration$1 = {
-  palette: colorPalette$o,
+const administrativeUnitConfiguration = {
+  palette: colorPalette$7,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$n = {
+const colorPalette$8 = {
   light: "#ffffff",
   default: blueGrey[500],
   dark: blueGrey[500]
 };
-const administrativeDivisionConfiguration$1 = {
-  palette: colorPalette$n,
+const administrativeDivisionConfiguration = {
+  palette: colorPalette$8,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
-const fixData$1 = data => {
+const fixData = data => {
   let fixedData = _extends({}, data);
   for (let key in fixedData) {
     const otherKey = key.charAt(0) === key.charAt(0).toUpperCase() ? key.charAt(0).toLowerCase() + key.slice(1) : key.charAt(0).toUpperCase() + key.slice(1);
@@ -2619,18 +2613,18 @@ const fixData$1 = data => {
   }
   return fixedData;
 };
-const entities$1 = {
+const entities = {
   accreditor: externalConfiguration,
   external: externalConfiguration,
-  administrativeDivision: administrativeDivisionConfiguration$1,
-  administrativeUnit: administrativeUnitConfiguration$1,
-  college: collegeConfiguration$1,
-  department: departmentConfiguration$1,
-  institution: institutionConfiguration$1,
-  program: programConfiguration$1
+  administrativeDivision: administrativeDivisionConfiguration,
+  administrativeUnit: administrativeUnitConfiguration,
+  college: collegeConfiguration,
+  department: departmentConfiguration,
+  institution: institutionConfiguration,
+  program: programConfiguration
 };
 const outcomeSpaceColor = outcomeSpaceType => {
-  return entities$1[outcomeSpaceType].palette.default;
+  return entities[outcomeSpaceType].palette.default;
 };
 const outcomeSpaceTypeFromSource = source => {
   const InvalidSource = () => "Invalid Source Value";
@@ -2658,16 +2652,16 @@ const outcomeSpaceTypeFromSource = source => {
  * Dynamically displays any AEFIS outcome space.
  */
 const OutcomeSpace = props => {
-  const data = fixData$1(props.data);
+  const data = fixData(props.data);
   const size = props.type === "chip" && (props.size === "medium" || props.size === "large") ? "medium" : props.size;
-  const configuration = _extends({}, entities$1[props.type], entities$1["BusinessEntity"]);
+  const configuration = _extends({}, entities[props.type], entities["BusinessEntity"]);
   const Invalid = () => "Invalid Display Type";
   const selectComponent = (displayType, configuration) => {
     switch (displayType) {
       case "chip":
-        return configuration.chipDisplay || ChipDisplay$2;
+        return configuration.chipDisplay || ChipDisplay;
       case "listItem":
-        return configuration.listItemDisplay || ListItemDisplay$2;
+        return configuration.listItemDisplay || ListItemDisplay;
       default:
         return Invalid;
     }
@@ -2766,7 +2760,7 @@ CardDisplay.propTypes = {
   titleComponent: PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5", "div", "p", "span"])
 };
 
-const colorPalette$m = {
+const colorPalette$9 = {
   light: grey[200],
   default: grey[500],
   dark: grey[900]
@@ -2777,7 +2771,7 @@ const colorPalette$m = {
  */
 
 const ChipDisplay$1 = props => {
-  const palette = _extends({}, colorPalette$m, props.configuration.palette);
+  const palette = _extends({}, colorPalette$9, props.configuration.palette);
   const BusinessObjectIcon = props.configuration.Icon || LocalOfferOutlined;
   const classes = makeStyles(() => ({
     icon: {
@@ -2830,7 +2824,7 @@ ChipDisplay$1.defaultProps = {
   outlined: false
 };
 
-const colorPalette$l = {
+const colorPalette$a = {
   light: grey[50],
   default: grey[500],
   dark: grey[900]
@@ -2841,7 +2835,7 @@ const colorPalette$l = {
  */
 
 const ListItemDisplay$1 = props => {
-  const palette = _extends({}, colorPalette$l, props.configuration.palette);
+  const palette = _extends({}, colorPalette$a, props.configuration.palette);
   const BusinessObjectIcon = props.configuration.Icon || HelpOutlined;
   const classes = makeStyles(theme => ({
     root: {
@@ -2966,68 +2960,55 @@ ListItemDisplay$1.propTypes = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$k = {
+const colorPalette$b = {
   light: red[50],
   default: red[800],
   dark: red[900]
 };
 const accreditorConfiguration = {
-  palette: colorPalette$k,
+  palette: colorPalette$b,
   Icon: AccountBalanceOutlined
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$j = {
+const colorPalette$c = {
   light: blueGrey[50],
   default: blueGrey[700],
   dark: blueGrey[900]
 };
-const administrativeDivisionConfiguration = {
-  palette: colorPalette$j,
+const administrativeDivisionConfiguration$1 = {
+  palette: colorPalette$c,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$i = {
+const colorPalette$d = {
   light: purple[50],
   default: purple[700],
   dark: purple[900]
 };
-const administrativeUnitConfiguration = {
-  palette: colorPalette$i,
+const administrativeUnitConfiguration$1 = {
+  palette: colorPalette$d,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$h = {
+const colorPalette$e = {
   light: teal[50],
   default: teal[700],
   dark: teal[900]
 };
 const assignmentConfiguration = {
-  palette: colorPalette$h,
+  palette: colorPalette$e,
   Icon: AssignmentOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
-// Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$g = {
-  light: teal[50],
-  default: teal[700],
-  dark: teal[900]
-};
-({
-  palette: colorPalette$g,
-  Icon: EditNote,
-  primaryTextAttribute: "name",
-  secondaryTextAttribute: " "
-});
-
 const BadgeListItem = props => {
   const badgeData = props.data;
   if (badgeData != null && badgeData.document) {
@@ -3099,7 +3080,7 @@ const colorPalette$f = {
   default: purple[700],
   dark: purple[900]
 };
-const collegeConfiguration = {
+const collegeConfiguration$1 = {
   palette: colorPalette$f,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
@@ -3107,146 +3088,146 @@ const collegeConfiguration = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$e = {
+const colorPalette$g = {
   light: red[50],
   default: red[700],
   dark: red[900]
 };
 const courseConfiguration = {
-  palette: colorPalette$e,
+  palette: colorPalette$g,
   Icon: BookOutlined,
   primaryTextAttribute: "code",
   secondaryTextAttribute: "name"
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$d = {
+const colorPalette$h = {
   light: amber[50],
   default: amber[700],
   dark: amber[900]
 };
 const courseOutcomeConfiguration = {
-  palette: colorPalette$d,
+  palette: colorPalette$h,
   Icon: ViewListOutlined,
   primaryTextAttribute: "code",
   secondaryTextAttribute: "description"
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$c = {
+const colorPalette$i = {
   light: orange[50],
   default: orange[700],
   dark: orange[900]
 };
 const courseSectionConfiguration = {
-  palette: colorPalette$c,
+  palette: colorPalette$i,
   Icon: CollectionsBookmarkOutlined,
   primaryTextAttribute: "code",
   secondaryTextAttribute: "name"
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$b = {
+const colorPalette$j = {
   light: blueGrey[50],
   default: blueGrey[700],
   dark: blueGrey[900]
 };
-const departmentConfiguration = {
-  palette: colorPalette$b,
+const departmentConfiguration$1 = {
+  palette: colorPalette$j,
   Icon: AccountBalanceOutlined
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$a = {
+const colorPalette$k = {
   light: lightBlue[50],
   default: lightBlue[700],
   dark: lightBlue[900]
 };
 const facultyConfiguration = {
-  palette: colorPalette$a,
+  palette: colorPalette$k,
   Icon: PersonOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$9 = {
+const colorPalette$l = {
   light: green[50],
   default: green[700],
   dark: green[900]
 };
-const institutionConfiguration = {
-  palette: colorPalette$9,
+const institutionConfiguration$1 = {
+  palette: colorPalette$l,
   Icon: AccountBalanceOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: " "
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$8 = {
+const colorPalette$m = {
   light: grey[50],
   default: grey[500],
   dark: grey[900]
 };
 const keywordConfiguration = {
-  palette: colorPalette$8,
+  palette: colorPalette$m,
   Icon: Search
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$7 = {
+const colorPalette$n = {
   light: blue[50],
   default: blue[700],
   dark: blue[900]
 };
-const outcomeConfiguration$1 = {
-  palette: colorPalette$7,
+const outcomeConfiguration = {
+  palette: colorPalette$n,
   Icon: ExploreOutlined
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$6 = {
+const colorPalette$o = {
   light: teal[50],
   default: teal[700],
   dark: teal[900]
 };
 const outcomeSpaceConfiguration = {
-  palette: colorPalette$6,
+  palette: colorPalette$o,
   Icon: AccountBalanceOutlined
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$5 = {
+const colorPalette$p = {
   light: grey[50],
   default: grey[700],
   dark: grey[900]
 };
 const performanceIndicatorConfiguration = {
-  palette: colorPalette$5,
+  palette: colorPalette$p,
   Icon: WidgetsOutlined,
   primaryTextAttribute: "name",
   secondaryTextAttribute: "code"
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$4 = {
+const colorPalette$q = {
   light: blue[50],
   default: blue[700],
   dark: blue[900]
 };
-const programConfiguration = {
-  palette: colorPalette$4,
+const programConfiguration$1 = {
+  palette: colorPalette$q,
   Icon: SchoolOutlined
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$3 = {
+const colorPalette$r = {
   light: indigo[50],
   default: indigo[700],
   dark: indigo[900]
 };
-const outcomeConfiguration = {
-  palette: colorPalette$3,
+const outcomeConfiguration$1 = {
+  palette: colorPalette$r,
   Icon: MapOutlined,
   primaryTextAttribute: "title"
 };
@@ -3255,26 +3236,26 @@ const outcomeConfiguration = {
 // about solution: https://stackoverflow.com/questions/22820162/mustache-js-escaping
 mustache.escape = _ => _;
 function compile() {}
-function render$3(template, data, defaultValue) {
+function render(template, data, defaultValue) {
   return template ? mustache.render(template, data) : defaultValue;
 }
 var template = {
   compile,
-  render: render$3
+  render
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const colorPalette$2 = {
+const colorPalette$s = {
   light: indigo[50],
   default: indigo[700],
   dark: indigo[900]
 };
 const termConfiguration = {
-  palette: colorPalette$2,
+  palette: colorPalette$s,
   Icon: EventOutlined
 };
 
-const fixData = data => {
+const fixData$1 = data => {
   let fixedData = _extends({}, data);
   for (let key in fixedData) {
     const otherKey = key.charAt(0) === key.charAt(0).toUpperCase() ? key.charAt(0).toLowerCase() + key.slice(1) : key.charAt(0).toUpperCase() + key.slice(1);
@@ -3284,44 +3265,44 @@ const fixData = data => {
   }
   return fixedData;
 };
-const entities = {
+const entities$1 = {
   accreditor: accreditorConfiguration,
-  administrativeDivision: administrativeDivisionConfiguration,
-  administrativeUnit: administrativeUnitConfiguration,
+  administrativeDivision: administrativeDivisionConfiguration$1,
+  administrativeUnit: administrativeUnitConfiguration$1,
   assignment: assignmentConfiguration,
   assessment: assignmentConfiguration,
   badge: badgeConfiguration,
-  college: collegeConfiguration,
+  college: collegeConfiguration$1,
   course: courseConfiguration,
   courseOutcome: courseOutcomeConfiguration,
   courseSection: courseSectionConfiguration,
-  department: departmentConfiguration,
+  department: departmentConfiguration$1,
   faculty: facultyConfiguration,
-  institution: institutionConfiguration,
+  institution: institutionConfiguration$1,
   keyword: keywordConfiguration,
-  outcome: outcomeConfiguration$1,
+  outcome: outcomeConfiguration,
   outcomeSpace: outcomeSpaceConfiguration,
   outcomeGroup: outcomeSpaceConfiguration,
   performanceIndicator: performanceIndicatorConfiguration,
-  program: programConfiguration,
-  programMap: outcomeConfiguration,
+  program: programConfiguration$1,
+  programMap: outcomeConfiguration$1,
   term: termConfiguration
 };
 const businessObjectColor = entity => {
-  return entities[entity].palette.default;
+  return entities$1[entity].palette.default;
 };
 const businessObjectIcon = entity => {
-  return entities[entity].Icon;
+  return entities$1[entity].Icon;
 };
 const businessObjectConfiguration = entity => {
-  return entities[entity];
+  return entities$1[entity];
 };
 
 /**
  * Dynamically displays any AEFIS Business Object..
  */
 const BusinessObject = props => {
-  const configuration = _extends({}, entities[props.type], entities["businessEntity"]);
+  const configuration = _extends({}, entities$1[props.type], entities$1["businessEntity"]);
   const selectComponent = (displayType, displayConfiguration) => {
     switch (displayType) {
       case "chip":
@@ -3334,7 +3315,7 @@ const BusinessObject = props => {
         return null;
     }
   };
-  const data = fixData(props.data);
+  const data = fixData$1(props.data);
   // Adding template support to primary text. This should be extended to make it more flexible.
   data.primaryText = props.template ? template.render(props.template, data) : configuration.primaryTextAttribute ? data[configuration.primaryTextAttribute] : data.name;
   data.secondaryText = configuration.secondaryTextAttribute ? data[configuration.secondaryTextAttribute] : data.code;
@@ -3369,7 +3350,7 @@ BusinessObject.defaultProps = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const CardSectionTitle$1 = props => {
+const CardSectionTitle = props => {
   const titleStyle = {
     fontSize: 12,
     fontWeight: "bolder",
@@ -3383,38 +3364,38 @@ const CardSectionTitle$1 = props => {
     children: props.title
   });
 };
-CardSectionTitle$1.defaultProps = {
+CardSectionTitle.defaultProps = {
   titleComponent: "div"
 };
-CardSectionTitle$1.propTypes = {
+CardSectionTitle.propTypes = {
   titleComponent: PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5", "div", "p", "span"]),
   title: PropTypes.string
 };
 
-const _excluded$h = ["title", "children", "height", "titleComponent"];
-const CardSection$1 = _ref => {
+const _excluded$2 = ["title", "children", "height", "titleComponent"];
+const CardSection = _ref => {
   let {
       title,
       children,
       height,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$h);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   return /*#__PURE__*/jsxs(Box$1, _extends({
     sx: {
       height: height || "inherit"
     }
   }, props, {
-    children: [title && /*#__PURE__*/jsx(CardSectionTitle$1, {
+    children: [title && /*#__PURE__*/jsx(CardSectionTitle, {
       title: title,
       titleComponent: titleComponent
     }), children]
   }));
 };
-CardSection$1.defaultProps = {
+CardSection.defaultProps = {
   titleComponent: "div"
 };
-CardSection$1.propTypes = {
+CardSection.propTypes = {
   children: PropTypes.any,
   compact: PropTypes.bool,
   height: PropTypes.any,
@@ -3423,7 +3404,7 @@ CardSection$1.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const Skeleton$3 = props => {
+const Skeleton = props => {
   return /*#__PURE__*/jsx(Skeleton$4, {
     style: {
       height: props.height,
@@ -3433,7 +3414,7 @@ const Skeleton$3 = props => {
     variant: "rect"
   });
 };
-Skeleton$3.propTypes = {
+Skeleton.propTypes = {
   height: PropTypes.any,
   width: PropTypes.any
 };
@@ -3472,7 +3453,7 @@ const SvgImage = props => {
   useEffect(() => {
     fetch(src).then(res => res.text()).then(setSvg).catch(() => setIsError(true)).then(() => setIsLoading(false));
   }, [src]);
-  if (showSkeleton && isLoading) return /*#__PURE__*/jsx(Skeleton$3, {
+  if (showSkeleton && isLoading) return /*#__PURE__*/jsx(Skeleton, {
     width: width,
     height: height
   });
@@ -3499,8 +3480,8 @@ SvgImage.propTypes = {
   width: PropTypes.any
 };
 
-const _excluded$g = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
-  _excluded2$1 = ["src", "extension"];
+const _excluded$3 = ["source", "description", "width", "height", "decorative", "showSkeleton", "fallbackImage"],
+  _excluded2 = ["src", "extension"];
 const RenderImage = _ref => {
   let {
       source,
@@ -3511,7 +3492,7 @@ const RenderImage = _ref => {
       showSkeleton,
       fallbackImage
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$g);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   const altText = decorative ? "" : description;
   const role = decorative ? "presentation" : "img";
   const hidden = !!decorative;
@@ -3528,7 +3509,7 @@ const RenderImage = _ref => {
     width: width,
     height: height
   });
-  if (showSkeleton && isLoading) return /*#__PURE__*/jsx(Skeleton$3, {
+  if (showSkeleton && isLoading) return /*#__PURE__*/jsx(Skeleton, {
     width: width,
     height: height
   });
@@ -3557,7 +3538,7 @@ const Image = props => {
       src,
       extension
     } = props,
-    others = _objectWithoutPropertiesLoose(props, _excluded2$1);
+    others = _objectWithoutPropertiesLoose(props, _excluded2);
   if (extension === "svg") return /*#__PURE__*/jsx(SvgImage, _extends({}, props));
   return /*#__PURE__*/jsx(RenderImage, _extends({
     source: src
@@ -3589,7 +3570,7 @@ Image.propTypes = {
   extension: PropTypes.string
 };
 
-const _excluded$f = ["type"];
+const _excluded$4 = ["type"];
 const imageProps = {
   award: Award,
   building: Building,
@@ -3615,9 +3596,8 @@ const IsometricImage = _ref => {
   let {
       type
     } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+    other = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   const image = getIsometricImage(type);
-  console.log("image ", image);
   return /*#__PURE__*/jsx(Image, _extends({
     src: image
   }, other));
@@ -3630,7 +3610,7 @@ IsometricImage.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const EmptyCardSection$1 = props => {
+const EmptyCardSection = props => {
   return /*#__PURE__*/jsx(Box$1, {
     sx: {
       height: props.height,
@@ -3686,12 +3666,12 @@ const EmptyCardSection$1 = props => {
     })
   });
 };
-EmptyCardSection$1.defaultProps = {
+EmptyCardSection.defaultProps = {
   height: 125,
   imageType: "working",
   titleComponent: "div"
 };
-EmptyCardSection$1.propTypes = {
+EmptyCardSection.propTypes = {
   height: PropTypes.number,
   title: PropTypes.string.isRequired,
   titleComponent: PropTypes.string,
@@ -3776,7 +3756,7 @@ const AvatarMenuItem = () => {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const Skeleton$2 = () => {
+const Skeleton$1 = () => {
   return /*#__PURE__*/jsxs(Grid, {
     container: true,
     spacing: 2,
@@ -3833,7 +3813,7 @@ Text.propTypes = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const useStyles$D = makeStyles(() => ({
+const useStyles$4 = makeStyles(() => ({
   skeletonAvatar: {
     display: "inline-flex",
     verticalAlign: "middle",
@@ -3846,8 +3826,8 @@ const useStyles$D = makeStyles(() => ({
     width: "100%"
   }
 }));
-const ListItem$1 = props => {
-  const classes = useStyles$D();
+const ListItem = props => {
+  const classes = useStyles$4();
   return /*#__PURE__*/jsxs("div", {
     className: classes.skeletonContainer,
     style: {
@@ -3872,16 +3852,16 @@ const ListItem$1 = props => {
     })]
   }, props.keyValue);
 };
-ListItem$1.defaultProps = {
+ListItem.defaultProps = {
   withAvatar: false
 };
-ListItem$1.propTypes = {
+ListItem.propTypes = {
   keyValue: PropTypes.any,
   withAvatar: PropTypes.bool
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const useStyles$C = makeStyles(theme => ({
+const useStyles$5 = makeStyles(theme => ({
   skeletonTitle: {
     width: "50%"
   },
@@ -3908,7 +3888,7 @@ const useStyles$C = makeStyles(theme => ({
   }
 }));
 const PageHeader = () => {
-  const classes = useStyles$C();
+  const classes = useStyles$5();
   return /*#__PURE__*/jsxs("div", {
     className: classes.skeletonHeaderContainer,
     children: [/*#__PURE__*/jsx(Typography, {
@@ -3941,7 +3921,7 @@ PageHeader.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$B = makeStyles(theme => ({
+const useStyles$6 = makeStyles(theme => ({
   contentContainer: {
     padding: theme.spacing(1)
   },
@@ -3963,7 +3943,7 @@ const useStyles$B = makeStyles(theme => ({
   }
 }));
 const SkeletonCard = () => {
-  const classes = useStyles$B();
+  const classes = useStyles$6();
   return /*#__PURE__*/jsxs(Fragment$1, {
     children: [/*#__PURE__*/jsx("div", {
       children: /*#__PURE__*/jsx(SkeletonContent, {
@@ -4096,11 +4076,11 @@ const SkeletonContent = props => {
       },
       children: [props.displayType && props.displayType === "text" && /*#__PURE__*/jsx(Text, _extends({
         keyValue: seededKeyValue(`skeleton-${item}`)
-      }, props)), props.displayType && props.displayType === "listItem" && /*#__PURE__*/jsx(ListItem$1, _extends({
+      }, props)), props.displayType && props.displayType === "listItem" && /*#__PURE__*/jsx(ListItem, _extends({
         keyValue: seededKeyValue(`skeleton-${item}`)
       }, props)), props.displayType && props.displayType === "pageHeader" && /*#__PURE__*/jsx(PageHeader, _extends({
         keyValue: seededKeyValue(`skeleton-${item}`)
-      }, props)), props.displayType && props.displayType === "secondaryMenu" && /*#__PURE__*/jsx(Skeleton$2, _extends({
+      }, props)), props.displayType && props.displayType === "secondaryMenu" && /*#__PURE__*/jsx(Skeleton$1, _extends({
         keyValue: seededKeyValue(`skeleton-${item}`)
       }, props)), props.displayType && props.displayType === "box" && /*#__PURE__*/jsx(Box, _extends({
         keyValue: seededKeyValue(`skeleton-${item}`)
@@ -4128,7 +4108,7 @@ SkeletonContent.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$A = makeStyles$1(theme => ({
+const useStyles$7 = makeStyles$1(theme => ({
   contentContainer: {
     padding: theme.spacing(1)
   },
@@ -4149,8 +4129,8 @@ const useStyles$A = makeStyles$1(theme => ({
     width: "25%"
   }
 }));
-const Skeleton$1 = props => {
-  const classes = useStyles$A();
+const Skeleton$2 = props => {
+  const classes = useStyles$7();
   return /*#__PURE__*/jsx(ContentBox, {
     hasGutter: false,
     formatContent: true,
@@ -4215,46 +4195,46 @@ const Skeleton$1 = props => {
     })
   });
 };
-Skeleton$1.defaultProps = {
+Skeleton$2.defaultProps = {
   size: "medium"
 };
-Skeleton$1.propTypes = {
+Skeleton$2.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "full"])
 };
 
 const RenderSkeleton = /*#__PURE__*/memo(function RenderSkeleton(props) {
-  return /*#__PURE__*/jsx(Skeleton$1, _extends({}, props));
+  return /*#__PURE__*/jsx(Skeleton$2, _extends({}, props));
 });
-const CardSectionTitle = props => {
-  return /*#__PURE__*/jsx(CardSectionTitle$1, {
+const CardSectionTitle$1 = props => {
+  return /*#__PURE__*/jsx(CardSectionTitle, {
     title: props.title
   });
 };
-CardSectionTitle.propTypes = {
+CardSectionTitle$1.propTypes = {
   title: PropTypes.string.isRequired
 };
-const EmptyCardSection = props => {
-  return /*#__PURE__*/jsx(EmptyCardSection$1, {
+const EmptyCardSection$1 = props => {
+  return /*#__PURE__*/jsx(EmptyCardSection, {
     height: props.height,
     title: props.title,
     message: props.message,
     imageType: props.imageType
   });
 };
-EmptyCardSection.defaultProps = {
+EmptyCardSection$1.defaultProps = {
   height: 125,
   imageType: "working"
 };
-EmptyCardSection.propTypes = {
+EmptyCardSection$1.propTypes = {
   height: PropTypes,
   title: PropTypes.string.isRequired,
   message: PropTypes.string.isRequired,
   imageType: PropTypes.oneOf(["award", "building", "checklist_alt", "checklist", "completed", "construction", "error", "error_alt1", "error_alt2", "login", "report", "search", "search_alt1", "unknown", "working_alt", "working"])
 };
-const CardSection = props => {
-  return /*#__PURE__*/jsx(CardSection$1, _extends({}, props));
+const CardSection$1 = props => {
+  return /*#__PURE__*/jsx(CardSection, _extends({}, props));
 };
-CardSection.propTypes = {
+CardSection$1.propTypes = {
   children: PropTypes.any,
   compact: PropTypes.bool,
   height: PropTypes.any,
@@ -4296,12 +4276,12 @@ const RenderCard = props => {
       children: /*#__PURE__*/jsx(AvatarIcon, {})
     }) : props.avatar || undefined,
     formatContent: true,
-    actions: props.actionsConfiguration && props.data ? /*#__PURE__*/jsx(Actions$1, {
+    actions: props.actionsConfiguration && props.data ? /*#__PURE__*/jsx(Actions, {
       configuration: props.actionsConfiguration,
       data: props.data
     }) : undefined,
     children: /*#__PURE__*/jsxs(Fragment, {
-      children: [props.description && /*#__PURE__*/jsx(CardSection, {
+      children: [props.description && /*#__PURE__*/jsx(CardSection$1, {
         sx: descriptionContainerStyle,
         children: /*#__PURE__*/jsx(Typography, {
           variant: props.size === "full" ? "body1" : "body2",
@@ -4381,13 +4361,13 @@ BusinessObjectCard.propTypes = {
   autoTruncateDescription: PropTypes.bool
 };
 
-const _excluded$e = ["enableScrollTop", "containerProps"];
+const _excluded$5 = ["enableScrollTop", "containerProps"];
 const SwipeableViews = _ref => {
   let {
       enableScrollTop = true,
       containerProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$e);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
   const containerRef = containerProps.ref || useRef();
   useEffect(() => {
     if (enableScrollTop) {
@@ -4434,7 +4414,7 @@ TabPanel.propTypes = {
   style: PropTypes.any
 };
 
-const useStyles$z = makeStyles(() => ({
+const useStyles$8 = makeStyles(() => ({
   hiddenTab: {
     display: "none",
     visibility: "hidden"
@@ -4456,7 +4436,7 @@ const useStyles$z = makeStyles(() => ({
     flexDirection: "row"
   }
 }));
-function a11yProps$1(index, uid) {
+function a11yProps(index, uid) {
   return {
     id: `swipeable-tab-${index}-${uid}`,
     "aria-controls": `swipeable-tabpanel-${index}-${uid}`
@@ -4572,7 +4552,7 @@ Content.propTypes = {
 /** Component to display swipeable tabs. */
 
 const SwipeableTabPanel = props => {
-  const classes = useStyles$z();
+  const classes = useStyles$8();
   const [tabValue, setTabValue] = useState(getIndexFor(props.defaultTab, props.children));
   const containerRef = useRef();
   const scrollTrigger = useScrollTrigger({
@@ -4627,7 +4607,7 @@ const SwipeableTabPanel = props => {
           label: child.props.name,
           style: tabStyle,
           className: availableTabs.includes(child.props.id) ? classes.visibleTab : classes.hiddenTab
-        }, a11yProps$1(index, uid)), `tabKey-${child.props.id}`))
+        }, a11yProps(index, uid)), `tabKey-${child.props.id}`))
       }))
     }), /*#__PURE__*/jsx(Box$2, {
       ref: containerRef,
@@ -4753,7 +4733,7 @@ const StyledMuiListItem = withStyles$1({
 
 /** List Item component to be used with List component.  Displays items in a list. */
 
-const ListItem = props => {
+const ListItem$1 = props => {
   const listItemStyle = {};
   const keyValue = useUID();
   if (!props.hasGutter) {
@@ -4814,7 +4794,7 @@ const ListItem = props => {
     })
   }, keyValue);
 };
-ListItem.defaultProps = {
+ListItem$1.defaultProps = {
   displayType: "default",
   hasBorder: false,
   disabled: false,
@@ -4825,7 +4805,7 @@ ListItem.defaultProps = {
   selected: false,
   display: "vertical"
 };
-ListItem.propTypes = {
+ListItem$1.propTypes = {
   /** The display type of the list item. */
   displayType: PropTypes.oneOf(["default", "skeleton"]),
   /** The avatar object to display. Can not be used if "icon" object is provided. */
@@ -4860,7 +4840,7 @@ ListItem.propTypes = {
   display: PropTypes.oneOf(["horizontal", "vertical"])
 };
 
-const useStyles$y = makeStyles(theme => ({
+const useStyles$9 = makeStyles(theme => ({
   expand: {
     verticalAlign: "middle",
     color: "#000000",
@@ -4880,7 +4860,7 @@ const useStyles$y = makeStyles(theme => ({
 /** Groups List items with a header and option for collapsible container */
 
 const ListItemGroup = props => {
-  const classes = useStyles$y();
+  const classes = useStyles$9();
   const [open, setOpen] = useState(true);
   const handleClick = () => {
     setOpen(!open);
@@ -5026,7 +5006,7 @@ SectionTitle.propTypes = {
   component: PropTypes.string
 };
 
-const _excluded$d = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
+const _excluded$6 = ["title", "subtitle", "children", "display", "format", "renderList", "titleComponent"];
 const Section = _ref => {
   let {
       title,
@@ -5037,7 +5017,7 @@ const Section = _ref => {
       renderList,
       titleComponent
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$d);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   const containerStyle = {
     boxSizing: "border-box",
     width: "100%",
@@ -5063,7 +5043,7 @@ const Section = _ref => {
       collapsible: true,
       titleComponent: props.titleComponent,
       children: renderList ? /*#__PURE__*/jsx(List, {
-        children: arrayChildren == null ? void 0 : arrayChildren.map((child, index) => /*#__PURE__*/jsx(ListItem, {
+        children: arrayChildren == null ? void 0 : arrayChildren.map((child, index) => /*#__PURE__*/jsx(ListItem$1, {
           hasBorder: !isLast(index),
           borderStyle: "3px dashed #dddddd",
           children: /*#__PURE__*/jsx(Box$1, {
@@ -5097,7 +5077,7 @@ Section.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const Header$1 = props => {
+const Header = props => {
   const containerStyle = {
     display: "flex",
     alignItems: "center",
@@ -5134,7 +5114,7 @@ const Header$1 = props => {
         subtitle: props.subtitle,
         subtitleCase: "upper",
         avatarColor: props.avatarColor || undefined,
-        avatar: props.avatarIcon || props.avatarIconName ? props.avatarIcon : props.avatarIcon ? /*#__PURE__*/jsx(Icon$1, {
+        avatar: props.avatarIcon || props.avatarIconName ? props.avatarIcon : props.avatarIcon ? /*#__PURE__*/jsx(Icon, {
           name: props.avatarIconName
         }) : undefined,
         formatContent: false,
@@ -5150,11 +5130,11 @@ const Header$1 = props => {
     })]
   });
 };
-Header$1.defaultProps = {
+Header.defaultProps = {
   titleComponent: "div",
   format: "default"
 };
-Header$1.propTypes = {
+Header.propTypes = {
   imageUrl: PropTypes.any,
   imageStyle: PropTypes.any,
   title: PropTypes.any,
@@ -5253,7 +5233,7 @@ BusinessObjectPanel.propTypes = {
   backgroundType: PropTypes.oneOf(["light", "dark"])
 };
 
-const useStyles$x = makeStyles(theme => ({
+const useStyles$a = makeStyles(theme => ({
   root: {
     margin: 0,
     padding: theme.spacing(2),
@@ -5273,7 +5253,7 @@ const useStyles$x = makeStyles(theme => ({
   }
 }));
 const DialogTitle = props => {
-  const classes = useStyles$x();
+  const classes = useStyles$a();
   return /*#__PURE__*/jsxs(DialogTitle$1, {
     component: "div",
     className: classes.root,
@@ -5321,7 +5301,7 @@ DialogTitle.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$w = makeStyles(theme => ({
+const useStyles$b = makeStyles(theme => ({
   root: {
     "& > *": {
       margin: theme.spacing(1)
@@ -5354,7 +5334,7 @@ const ConfirmButton = withStyles$1(theme => ({
   }
 }))(Button);
 const FullScreenAppBar = props => {
-  const classes = useStyles$w();
+  const classes = useStyles$b();
   return /*#__PURE__*/jsxs(AppBar$1, {
     component: "div",
     className: classes.appBar,
@@ -5427,7 +5407,7 @@ const DialogActions = withStyles$1(theme => ({
     padding: theme.spacing(1)
   }
 }))(DialogActions$1);
-const Transition$1 = /*#__PURE__*/React.forwardRef(function Transition(props, ref) {
+const Transition = /*#__PURE__*/React.forwardRef(function Transition(props, ref) {
   return /*#__PURE__*/jsx(Slide, _extends({
     direction: "up",
     ref: ref
@@ -5448,7 +5428,7 @@ const ModalDialog = props => {
   const sizeProps = {};
   if (props.size === "fullscreen") {
     sizeProps.fullScreen = true;
-    sizeProps.TransitionComponent = Transition$1;
+    sizeProps.TransitionComponent = Transition;
   } else {
     sizeProps.fullWidth = true;
     sizeProps.maxWidth = sizes[props.size];
@@ -5587,7 +5567,7 @@ DisplayInFrame.propTypes = {
   iframeAttributes: PropTypes.any
 };
 
-const Transition = /*#__PURE__*/forwardRef(function Transition(props, ref) {
+const Transition$1 = /*#__PURE__*/forwardRef(function Transition(props, ref) {
   return /*#__PURE__*/jsx(Slide, _extends({
     direction: "up",
     ref: ref
@@ -5609,7 +5589,7 @@ const FullPageViewer = props => {
     size: "fullscreen",
     open: props.open,
     handleClose: () => handleClose(),
-    TransitionComponent: Transition,
+    TransitionComponent: Transition$1,
     cancelButtonText: props.closeButtonText,
     formatContent: false,
     title: props.title,
@@ -5668,8 +5648,8 @@ FullPageViewer.propTypes = {
   onMessage: PropTypes.func
 };
 
-const _excluded$c = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
-const useStyles$v = makeStyles(() => ({
+const _excluded$7 = ["height", "children", "onScroll", "showTopFade", "showBottomFade", "component", "onScrollReachStart", "onScrollReachEnd"];
+const useStyles$c = makeStyles(() => ({
   scroller: {
     position: "relative",
     width: "100%",
@@ -5741,8 +5721,8 @@ const ScrollingContainer = _ref => {
       onScrollReachStart,
       onScrollReachEnd
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
-  const classes = useStyles$v();
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+  const classes = useStyles$c();
   const [scrolled, setScrolled] = useState(false);
   const rootStyle = {
     height: height,
@@ -5795,7 +5775,7 @@ ScrollingContainer.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$u = makeStyles(theme => createStyles({
+const useStyles$d = makeStyles(theme => createStyles({
   container: {
     display: "flex",
     flexDirection: "column"
@@ -6017,7 +5997,7 @@ const RowCheckbox = /*#__PURE__*/React.memo(styled(Checkbox)({
   }
 }), areEqual);
 
-const useStyles$t = makeStyles({
+const useStyles$e = makeStyles({
   truncated: {
     textOverflow: "ellipsis",
     overflow: "hidden",
@@ -6044,7 +6024,7 @@ const Tooltip = ({
   tooltip: _tooltip = text,
   align
 }) => {
-  const classes = useStyles$t({});
+  const classes = useStyles$e({});
   return /*#__PURE__*/jsx("div", {
     className: classes.truncated,
     style: {
@@ -6123,7 +6103,7 @@ const useRefDimensions = ref => {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$s = makeStyles$1(() => ({
+const useStyles$f = makeStyles$1(() => ({
   avatarContainer: {
     display: "flex",
     alignItems: "center",
@@ -6132,13 +6112,13 @@ const useStyles$s = makeStyles$1(() => ({
   }
 }));
 const AvatarHeader = props => {
-  const classes = useStyles$s();
+  const classes = useStyles$f();
   const avatarStyle = type => {
     const backgroundColor = {
-      success: success["default"],
-      error: danger["default"],
-      warning: warning["default"],
-      info: info["default"]
+      success: success$1["default"],
+      error: danger$1["default"],
+      warning: warning$1["default"],
+      info: info$1["default"]
     };
     return {
       width: 50,
@@ -6156,7 +6136,7 @@ const AvatarHeader = props => {
   });
 };
 AvatarHeader.defaultProps = {
-  avatarColor: info["default"]
+  avatarColor: info$1["default"]
 };
 AvatarHeader.propTypes = {
   type: PropTypes.string,
@@ -6165,7 +6145,7 @@ AvatarHeader.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$r = makeStyles$1(theme => ({
+const useStyles$g = makeStyles$1(theme => ({
   responsiveImageContainer: {
     display: "flex",
     [theme.breakpoints.down("md")]: {
@@ -6187,7 +6167,7 @@ const useStyles$r = makeStyles$1(theme => ({
   }
 }));
 const ImageHeader = /*#__PURE__*/memo(function ImageHeader(props) {
-  const classes = useStyles$r();
+  const classes = useStyles$g();
   const IsometricImage = getIsometricImage(props.imageType);
   const imageContainerStyle = {
     height: props.imageHeight ? props.imageHeight : "auto"
@@ -6207,7 +6187,7 @@ ImageHeader.propTypes = {
   imageHeight: PropTypes.number
 };
 
-const useStyles$q = makeStyles$1(theme => ({
+const useStyles$h = makeStyles$1(theme => ({
   container: {
     padding: theme.spacing(2)
   },
@@ -6241,7 +6221,7 @@ const useStyles$q = makeStyles$1(theme => ({
   }
 }));
 const RenderStatusMessage = props => {
-  const classes = useStyles$q();
+  const classes = useStyles$h();
   const messageContainerStyle = {
     paddingTop: props.condensed ? 1 : 2
   };
@@ -6463,13 +6443,13 @@ function DataTable(props) {
     columns,
     onClick
   } = props;
-  const classes = useStyles$u();
+  const classes = useStyles$d();
   const [headerElevated, setHeaderElevated] = useState(false);
   const [tableHeadHeight, setTableHeadHeight] = useState(0);
   const [tableBodyHeight, setTableBodyHeight] = useState(0);
   const [selectAllRows, setSelectAllRows] = useState(false);
   const [containerTop, setContainerTop] = useState(0);
-  useState(false);
+  const [dataLoaded, setDataLoaded] = useState(false);
   const containerRef = /*#__PURE__*/createRef();
   const dimensions = useRefDimensions(containerRef);
   const tableHeadRef = useRef(null);
@@ -6800,7 +6780,7 @@ const setQueryStringWithoutPageReload = qsValue => {
   }, "", newurl);
 };
 const setQueryStringValue = (key, value, queryString = window.location.search) => {
-  const values = qs.parse(queryString);
+  const values = qs.parse(queryString, options);
   const newQsValue = qs.stringify(_extends({}, values, {
     [key]: value
   }), options);
@@ -6810,7 +6790,7 @@ const parse = (url, customOptions) => {
   return qs.parse(url, _extends({}, options, customOptions));
 };
 
-const windowKeys$1 = Object.keys(window).filter(key => {
+const windowKeys = Object.keys(window).filter(key => {
   try {
     Function.apply(null, [key, "return;"]);
     return true;
@@ -6828,7 +6808,7 @@ const windowKeys$1 = Object.keys(window).filter(key => {
  */
 const sanitizedEval = (code, context, options) => {
   const keys = Object.keys(context);
-  const allParams = keys.concat(windowKeys$1, [`"use strict"; return ${code}`]);
+  const allParams = keys.concat(windowKeys, [`"use strict"; return ${code}`]);
   try {
     const fn = Function.apply(null, allParams);
     const params = keys.map(key => context[key]);
@@ -7371,7 +7351,7 @@ const useDataSourceMutation = (dataSource, baseParameters, options, invalidateQu
   var _mutationOptions;
   const queryClient = useQueryClient();
   const configuration = getConfiguration(dataSource);
-  getEndpoint(dataSource, configuration);
+  const endPoint = getEndpoint(dataSource, configuration);
   const invalidateFunction = () => {
     if (invalidateQueries) {
       for (let q of invalidateQueries) {
@@ -7497,15 +7477,15 @@ var dataSourceManager = {
   getDataSourceUrl: getDataSourceUrl
 };
 
-const _excluded$b = ["clearOnChange", "minimumLength"];
+const _excluded$8 = ["clearOnChange", "minimumLength"];
 const WAIT_INTERVAL = 1000;
 const ENTER_KEY = 13;
-const TextSearch$1 = _ref => {
+const TextSearch = _ref => {
   let {
       clearOnChange,
       minimumLength
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
   const [value, setValue] = useState("");
   const [timer, setTimer] = useState(null);
   const handleChange = e => {
@@ -7546,15 +7526,15 @@ const TextSearch$1 = _ref => {
           opacity: 0.7
         }
       }
-    },
-    inputProps: {
-      "aria-label": props.placeholder
     }
   }, props, {
+    inputProps: _extends({}, props.inputProps, {
+      "aria-label": props.placeholder
+    }),
     onChange: handleChange
   }));
 };
-TextSearch$1.propTypes = {
+TextSearch.propTypes = {
   /* Change handler */
   onChange: PropTypes.func,
   /* Placeholder text */
@@ -7564,14 +7544,14 @@ TextSearch$1.propTypes = {
   /* Optionally the field when a search is fired.*/
   clearOnChange: PropTypes.bool
 };
-TextSearch$1.defaultProps = {
+TextSearch.defaultProps = {
   placeholder: "Type a search keyword",
   minimumLength: 3,
   clearOnChange: true
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const TextSearch = ({
+const TextSearch$1 = ({
   search,
   onChange,
   searchPlaceHolderText,
@@ -7580,7 +7560,7 @@ const TextSearch = ({
   const inputRef = useRef();
   if (search) {
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(TextSearch$1, {
+      children: [/*#__PURE__*/jsx(TextSearch, {
         style: {
           marginBottom: bottomGutter,
           width: "100%"
@@ -7608,10 +7588,10 @@ const TextSearch = ({
     return null;
   }
 };
-TextSearch.defaultProps = {
+TextSearch$1.defaultProps = {
   onChange: () => {}
 };
-TextSearch.propTypes = {
+TextSearch$1.propTypes = {
   search: PropTypes.any,
   searchPlaceHolderText: PropTypes.string,
   placeholder: PropTypes.string,
@@ -7620,7 +7600,7 @@ TextSearch.propTypes = {
 };
 
 const {
-  render: render$2
+  render: render$1
 } = template;
 
 /**
@@ -7637,7 +7617,7 @@ const getFilterItemId = (item, configItem = {}) => {
   }
   const template = configItem.idTemplate || configItem.template || configItem.optionTemplate;
   if (template) {
-    return render$2(template, item.data || item);
+    return render$1(template, item.data || item);
   }
   if ((_item$data = item.data) != null && _item$data.id) {
     return item.data.id;
@@ -7697,7 +7677,7 @@ const mapFilters = newFilters => {
   return mappedFilters;
 };
 
-const _excluded$a = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
+const _excluded$9 = ["parentMenuOpen", "label", "rightIcon", "leftIcon", "children", "className", "tabIndex", "ContainerProps"];
 const useMenuItemStyles = makeStyles(theme => ({
   root: props => ({
     backgroundColor: props.open ? theme.palette.action.hover : "rgba(0,0,0,0)"
@@ -7718,7 +7698,7 @@ const NestedMenuItem = /*#__PURE__*/React.forwardRef(function NestedMenuItem(pro
       tabIndex: tabIndexProp,
       ContainerProps: ContainerPropsProp = {}
     } = props,
-    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$a);
+    MenuItemProps = _objectWithoutPropertiesLoose(props, _excluded$9);
   const {
       ref: containerRefProp
     } = ContainerPropsProp,
@@ -7845,23 +7825,23 @@ NestedMenuItem.propTypes = {
   tabIndex: PropTypes.any
 };
 
-const useStyles$p = makeStyles(() => ({
+const useStyles$i = makeStyles(() => ({
   filterPopup: {
     height: "400px",
     width: "300px"
   }
 }));
 const FilterMenu = props => {
-  const classes = useStyles$p();
+  const classes = useStyles$i();
   return /*#__PURE__*/jsx(NestedMenuItem, {
     label: props.name,
-    leftIcon: props.icon && /*#__PURE__*/jsx(Icon$2, {
+    leftIcon: props.icon && /*#__PURE__*/jsx(Icon$1, {
       children: "star"
     }),
     parentMenuOpen: !!props.menuPosition,
     children: /*#__PURE__*/jsx("div", {
       className: classes.filterPopup,
-      children: /*#__PURE__*/jsx(BusinessObjectPicker, _extends({}, props, {
+      children: /*#__PURE__*/jsx(BusinessObjectPicker$1, _extends({}, props, {
         style: {
           marginBottom: props.bottomGutter
         },
@@ -7907,7 +7887,7 @@ const evaluatePickerFilter = (item, pickerFilters) => {
   return null;
 };
 
-const useStyles$o = makeStyles(theme => ({
+const useStyles$j = makeStyles(theme => ({
   groupTitle: {
     margin: 0,
     fontWeight: 500,
@@ -7925,7 +7905,7 @@ const FilterItem = ({
   onFilterChange,
   pickerFilters
 }) => {
-  const classes = useStyles$o();
+  const classes = useStyles$j();
   const isMultiple = useMemo(() => item.multiple !== undefined ? item.multiple : true, []);
   const value = useMemo(() => {
     const fieldFilters = filters ? filters.filter(i => i.index === index).map(i => i.data) : [];
@@ -7948,7 +7928,7 @@ const FilterItem = ({
         className: classes.groupTitle,
         children: item.groupName
       })]
-    }), /*#__PURE__*/jsx(BusinessObjectPicker, _extends({
+    }), /*#__PURE__*/jsx(BusinessObjectPicker$1, _extends({
       style: {
         marginBottom: bottomGutter
       },
@@ -8021,7 +8001,7 @@ function SortingPicker({
     }
     onChange(newValue);
   };
-  return /*#__PURE__*/jsx(BusinessObjectPicker, {
+  return /*#__PURE__*/jsx(BusinessObjectPicker$1, {
     style: style,
     data: _data,
     visibleValues: visibleValues,
@@ -8186,7 +8166,7 @@ FilterSelection.propTypes = {
   manualFilters: PropTypes.bool
 };
 
-const useStyles$n = makeStyles(theme => ({
+const useStyles$k = makeStyles(theme => ({
   groupTitle: {
     margin: 0,
     fontWeight: 500,
@@ -8224,14 +8204,14 @@ const PanelDisplay = ({
   manualFilters,
   renderFilterSelection
 }) => {
-  const classes = useStyles$n();
+  const classes = useStyles$k();
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
       variant: "h3",
       component: "h2",
       className: classes.mainTitle,
       children: "Filter Selection"
-    }), /*#__PURE__*/jsx(TextSearch, {
+    }), /*#__PURE__*/jsx(TextSearch$1, {
       placeHolder: searchPlaceHolderText,
       onChange: onSearchChange,
       searchTooltip: searchTooltip,
@@ -8348,6 +8328,8 @@ const FilterPanel = props => {
   const [pickerFilters, setPickerFilters] = useState([]);
   useEffect(() => {
     const formattedFilters = formatFilters(filtersProp, configuration);
+    console.log("filtersProp ", filtersProp);
+    console.log("formattedFilters ", formattedFilters);
     setFilters(formattedFilters);
   }, [filtersProp]);
 
@@ -8558,7 +8540,7 @@ const FilterPanel = props => {
           menuPosition: menuPosition,
           onFilterClick: handleFilterClick
         }, item), index))
-      }), /*#__PURE__*/jsx(TextSearch, {
+      }), /*#__PURE__*/jsx(TextSearch$1, {
         placeHolder: searchPlaceHolderText,
         onChange: handleSearchChange,
         searchTooltip: searchTooltip,
@@ -8576,7 +8558,7 @@ const FilterPanel = props => {
   };
   const renderHorizontalDisplay = renderFilterSelection => {
     return /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(TextSearch, {
+      children: [/*#__PURE__*/jsx(TextSearch$1, {
         placeHolder: searchPlaceHolderText,
         onChange: handleSearchChange,
         searchTooltip: searchTooltip,
@@ -8594,7 +8576,7 @@ const FilterPanel = props => {
             style: {
               marginBottom: props.bottomGutter
             },
-            children: /*#__PURE__*/jsx(BusinessObjectPicker, _extends({
+            children: /*#__PURE__*/jsx(BusinessObjectPicker$1, _extends({
               label: item.label !== undefined ? item.label : "Select Item",
               visibleValues: props.limitTags,
               multiple: item.multiple !== undefined ? item.multiple : true,
@@ -8843,7 +8825,7 @@ const ExportButton = props => {
     "aria-expanded": Boolean(anchorEl),
     role: "button"
   };
-  return /*#__PURE__*/jsxs(ListItem, {
+  return /*#__PURE__*/jsxs(ListItem$1, {
     display: "horizontal",
     children: [/*#__PURE__*/jsx(Tooltip$1, {
       title: "Export Options",
@@ -8895,7 +8877,7 @@ ExportButton.propTypes = {
   /** Landscape or not */
   forcePDFLandscape: PropTypes.bool,
   /** List of Export options */
-  options: PropTypes.oneOf(PropTypes.shape({
+  options: PropTypes.arrayOf(PropTypes.shape({
     /** The type of export. */
     type: PropTypes.oneOf(["pdf", "print", "csv", "excel", "word", "custom"]),
     /** If type is "custom", the you can define the text to display. */
@@ -8907,7 +8889,7 @@ ExportButton.propTypes = {
   }))
 };
 
-const a11yProps = item => {
+const a11yProps$1 = item => {
   return {
     id: `titleActionHeaderButton-${item.name}`,
     "aria-label": `${item.name}`
@@ -8939,13 +8921,13 @@ const RenderAction = ({
 }) => {
   return item.displayType === undefined && item.icon !== undefined || item.displayType === "icon" && item.icon !== undefined ? /*#__PURE__*/jsx(Tooltip$1, {
     title: item.name,
-    children: /*#__PURE__*/jsx(IconButton$1, _extends({}, a11yProps(item), buttonProps(item, data), {
+    children: /*#__PURE__*/jsx(IconButton$1, _extends({}, a11yProps$1(item), buttonProps(item, data), {
       size: "large",
       children: /*#__PURE__*/jsx(item.icon, {
         data: data
       })
     }))
-  }) : /*#__PURE__*/jsx(Button, _extends({}, a11yProps(item), buttonProps(item, data), {
+  }) : /*#__PURE__*/jsx(Button, _extends({}, a11yProps$1(item), buttonProps(item, data), {
     children: item.name
   }));
 };
@@ -8954,9 +8936,9 @@ RenderAction.propTypes = {
   index: PropTypes.any,
   item: PropTypes.any
 };
-const Actions = props => {
+const Actions$1 = 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, {
+  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$1, {
     display: "horizontal",
     children: /*#__PURE__*/jsx(Box$1, {
       sx: {
@@ -8979,7 +8961,7 @@ const Actions = props => {
     })
   }, `titleAndActionHeaderAction-${index}`));
 };
-Actions.propTypes = {
+Actions$1.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     displayType: PropTypes.oneOf(["button", "icon"]),
@@ -8994,12 +8976,12 @@ Actions.propTypes = {
   onAction: PropTypes.func
 };
 
-const _excluded$9 = ["hasFilters"];
+const _excluded$a = ["hasFilters"];
 const RenderFilterButton = /*#__PURE__*/React.forwardRef(function RenderFilterButton(_ref, ref) {
   let {
       hasFilters
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$9);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$a);
   return /*#__PURE__*/jsx(IconButton$1, _extends({}, props, {
     ref: ref,
     children: /*#__PURE__*/jsx(Badge, {
@@ -9043,7 +9025,7 @@ FilterButton.propTypes = {
 };
 
 const darkYellow = "#ECB753";
-const useStyles$m = makeStyles(() => ({
+const useStyles$l = makeStyles(() => ({
   defaultButtonWrapper: {
     display: "flex"
   },
@@ -9057,7 +9039,7 @@ const DefaultIconButton = ({
   onClick,
   disableSetDefault
 }) => {
-  const classes = useStyles$m();
+  const classes = useStyles$l();
   const [isMouseOver, setIsMouseOver] = useState();
   const Default = isActive ? Star : StarBorder;
   const mouseOverColor = isMouseOver ? "black" : "grey";
@@ -9092,8 +9074,8 @@ DefaultIconButton.propTypes = {
   onClick: PropTypes.func
 };
 
-const _excluded$8 = ["filterSet", "onClick", "disableSetDefault", "index"];
-const useStyles$l = makeStyles(theme => ({
+const _excluded$b = ["filterSet", "onClick", "disableSetDefault", "index"];
+const useStyles$m = makeStyles(theme => ({
   operations: {
     display: "flex",
     alignItems: "center",
@@ -9103,7 +9085,7 @@ const useStyles$l = makeStyles(theme => ({
     paddingRight: 30
   }
 }));
-const Delete = ({
+const Delete$1 = ({
   visibility,
   onClick
 }) => {
@@ -9114,7 +9096,7 @@ const Delete = ({
   const handleMouseOut = useCallback(() => {
     setIconColor("grey");
   }, []);
-  return /*#__PURE__*/jsx(Delete$1, {
+  return /*#__PURE__*/jsx(Delete, {
     style: {
       color: iconColor,
       visibility
@@ -9124,11 +9106,11 @@ const Delete = ({
     onClick: onClick
   });
 };
-Delete.propTypes = {
+Delete$1.propTypes = {
   visibility: PropTypes.string,
   onClick: PropTypes.func
 };
-const Operations$1 = ({
+const Operations = ({
   isVisible,
   isDefault,
   onDelete,
@@ -9136,10 +9118,10 @@ const Operations$1 = ({
   disableSetDefault
 }) => {
   const visibility = isVisible ? "visible" : "hidden";
-  const classes = useStyles$l();
+  const classes = useStyles$m();
   return /*#__PURE__*/jsxs("span", {
     className: classes.operations,
-    children: [/*#__PURE__*/jsx(Delete, {
+    children: [/*#__PURE__*/jsx(Delete$1, {
       visibility: visibility,
       onClick: onDelete
     }), /*#__PURE__*/jsx(DefaultIconButton, {
@@ -9150,28 +9132,28 @@ const Operations$1 = ({
     })]
   });
 };
-Operations$1.propTypes = {
+Operations.propTypes = {
   isVisible: PropTypes.bool,
   isDefault: PropTypes.bool,
   disableSetDefault: PropTypes.bool,
   onDelete: PropTypes.func,
   onSetDefault: PropTypes.func
 };
-const Item$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       filterSet,
       onClick,
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$8);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
   const {
     id,
     disabled,
     name,
     isDefault
   } = filterSet;
-  const classes = useStyles$l();
+  const classes = useStyles$m();
   const [isMouseOver, setIsMouseOver] = useState();
   const handleFilterClick = e => onClick(e, filterSet, {
     action: "CLICK"
@@ -9201,7 +9183,7 @@ const Item$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), /*#__PURE__*/jsx(ListItemText, {
     className: classes.listItemText,
     primary: name
-  }), /*#__PURE__*/jsx(Operations$1, {
+  }), /*#__PURE__*/jsx(Operations, {
     isVisible: isMouseOver,
     isDefault: isDefault,
     onDelete: handleDelete,
@@ -9213,15 +9195,15 @@ const renderUserDefinedFilters = ({
   filterSetArray,
   disableSetDefault,
   onClick
-}) => filterSetArray.map((filterSet, index) => /*#__PURE__*/jsx(Item$1, {
+}) => filterSetArray.map((filterSet, index) => /*#__PURE__*/jsx(Item, {
   filterSet: filterSet,
   disableSetDefault: disableSetDefault,
   onClick: onClick,
   index: index
 }, `user-defined-filters-${index}`));
 
-const _excluded$7 = ["filterSet", "onClick", "disableSetDefault", "index"];
-const useStyles$k = makeStyles(() => ({
+const _excluded$c = ["filterSet", "onClick", "disableSetDefault", "index"];
+const useStyles$n = makeStyles(() => ({
   operations: {
     display: "flex",
     alignItems: "center",
@@ -9231,14 +9213,14 @@ const useStyles$k = makeStyles(() => ({
     paddingRight: 30
   }
 }));
-const Operations = ({
+const Operations$1 = ({
   isVisible,
   isDefault,
   onSetDefault,
   disableSetDefault
 }) => {
   const visibility = isVisible ? "visible" : "hidden";
-  const classes = useStyles$k();
+  const classes = useStyles$n();
   return /*#__PURE__*/jsx("span", {
     className: classes.operations,
     children: /*#__PURE__*/jsx(DefaultIconButton, {
@@ -9249,27 +9231,27 @@ const Operations = ({
     })
   });
 };
-Operations.propTypes = {
+Operations$1.propTypes = {
   isVisible: PropTypes.bool,
   isDefault: PropTypes.bool,
   onSetDefault: PropTypes.func,
   disableSetDefault: PropTypes.bool
 };
-const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Item$1 = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
       filterSet,
       onClick,
       disableSetDefault,
       index
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$7);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$c);
   const {
     id,
     disabled,
     name,
     isDefault
   } = filterSet;
-  const classes = useStyles$k();
+  const classes = useStyles$n();
   const [isMouseOver, setIsMouseOver] = useState();
   const handleFilterClick = e => onClick(e, filterSet, {
     action: "CLICK"
@@ -9296,7 +9278,7 @@ const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), /*#__PURE__*/jsx(ListItemText, {
     className: classes.listItemText,
     primary: name
-  }), /*#__PURE__*/jsx(Operations, {
+  }), /*#__PURE__*/jsx(Operations$1, {
     isVisible: isMouseOver,
     isDefault: isDefault,
     onSetDefault: handleSetDefault,
@@ -9307,7 +9289,7 @@ const renderPreDefinedFilters = ({
   filterSetArray,
   onClick,
   disableSetDefault
-}) => filterSetArray.map((filterSet, index) => /*#__PURE__*/jsx(Item, {
+}) => filterSetArray.map((filterSet, index) => /*#__PURE__*/jsx(Item$1, {
   filterSet: filterSet,
   disableSetDefault: disableSetDefault,
   onClick: onClick,
@@ -9354,7 +9336,7 @@ Breadcrumbs.propTypes = {
   })).isRequired
 };
 
-const useStyles$j = makeStyles(theme => ({
+const useStyles$o = makeStyles(theme => ({
   titleContainer: {
     display: "inline-flex",
     alignItems: "center"
@@ -9469,7 +9451,7 @@ const TitleAndActionHeader = ({
   });
   const [anchorEl, setAnchorEl] = useState(null);
   const anchorRef = useRef(null);
-  const classes = useStyles$j();
+  const classes = useStyles$o();
   const {
     preDefinedFilters,
     userDefinedFilters
@@ -9614,7 +9596,7 @@ const TitleAndActionHeader = ({
               width: "inherit"
             },
             animate: false,
-            children: [additionalActions, actions && /*#__PURE__*/jsx(Actions, {
+            children: [additionalActions, actions && /*#__PURE__*/jsx(Actions$1, {
               data: actions
             }), showExport && /*#__PURE__*/jsx(ExportButton, {
               options: exportOptions
@@ -9722,7 +9704,7 @@ const showView = {
   opacity: 1,
   transition: "max-width 0.4s"
 };
-const useStyles$i = makeStyles(() => ({
+const useStyles$p = makeStyles(() => ({
   input: {
     flex: 1,
     marginLeft: 0
@@ -9772,7 +9754,7 @@ const EditableText = ({
   const [value, setValue] = useState(valueProp);
   const valueBeforeEditingRef = useRef();
   const [isEditMode, setIsEditMode] = useState();
-  const classes = useStyles$i();
+  const classes = useStyles$p();
   const inputRef = useRef();
   useEffect(() => {
     if (isEditMode) {
@@ -9858,7 +9840,7 @@ EditableText.propTypes = {
   tooltipTitle: PropTypes.string
 };
 
-const useStyles$h = makeStyles(theme => ({
+const useStyles$q = makeStyles(theme => ({
   drawerContent: {
     paddingBottom: "70px"
   },
@@ -9899,7 +9881,7 @@ const useStyles$h = makeStyles(theme => ({
 
 const Drawer = props => {
   var _props$actions;
-  const classes = useStyles$h();
+  const classes = useStyles$q();
   const renderChildren = () => {
     return /*#__PURE__*/React.cloneElement(props.children, {
       data: props.data
@@ -10128,13 +10110,13 @@ Drawer.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$g = makeStyles(() => ({
+const useStyles$r = makeStyles(() => ({
   rootContainer: {
     backgroundColor: "rgb(239, 242, 246)"
   }
 }));
-const Skeleton = () => {
-  const classes = useStyles$g();
+const Skeleton$3 = () => {
+  const classes = useStyles$r();
   return /*#__PURE__*/jsx("div", {
     className: classes.rootContainer,
     children: /*#__PURE__*/jsx(VerticalTimeline, {
@@ -10172,7 +10154,7 @@ const Skeleton = () => {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$f = makeStyles(() => ({
+const useStyles$s = makeStyles(() => ({
   rootContainer: {
     backgroundColor: "rgb(239, 242, 246)"
   },
@@ -10188,7 +10170,7 @@ const getFormattedDate = date => {
   });
 };
 const RenderTimeline = props => {
-  const classes = useStyles$f();
+  const classes = useStyles$s();
   const containerRef = useRef();
   const [containerTop, setContainerTop] = useState(0);
   useEffect(() => {
@@ -10215,7 +10197,7 @@ const RenderTimeline = props => {
           background: activity.icon && activity.icon.backgroundColor ? activity.icon.backgroundColor : blue[500],
           color: activity.icon && activity.icon.color ? activity.icon.color : "#fff"
         },
-        icon: activity.icon && activity.icon.name ? /*#__PURE__*/jsx(Icon$1, {
+        icon: activity.icon && activity.icon.name ? /*#__PURE__*/jsx(Icon, {
           name: activity.icon.name
         }) : /*#__PURE__*/jsx(HelpOutlined, {}),
         children: [/*#__PURE__*/jsx(Typography, {
@@ -10249,7 +10231,7 @@ RenderTimeline.propTypes = {
 /** Component to display a vertical timeline.  The timeline UI is usually displayed in an AEFIS business object panel. */
 
 const Timeline = props => {
-  return props.displayType === "skeleton" || props.data === undefined ? /*#__PURE__*/jsx(Skeleton, {}) : /*#__PURE__*/jsx(RenderTimeline, {
+  return props.displayType === "skeleton" || props.data === undefined ? /*#__PURE__*/jsx(Skeleton$3, {}) : /*#__PURE__*/jsx(RenderTimeline, {
     data: props.data,
     titleComponent: props.titleComponent,
     subtitleComponent: props.subtitleComponent
@@ -10387,7 +10369,7 @@ const getInfoTextByFilterAndSortingCount = (filterCount, sortCount) => {
   return `${appliedText} applied to the data`;
 };
 
-const _excluded$6 = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
+const _excluded$d = ["status", "data", "isFetching", "fetchNextPage", "hasNextPage", "refetch"];
 const useDidMount = () => {
   const didMountRef = useRef(false);
   useEffect(() => {
@@ -10501,8 +10483,8 @@ const RichDataTable = /*#__PURE__*/forwardRef(function RichDatatable(props, ref)
       fetchNextPage,
       hasNextPage,
       refetch
-    } = _useDataSourceInfinit;
-    _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$6);
+    } = _useDataSourceInfinit,
+    rest = _objectWithoutPropertiesLoose(_useDataSourceInfinit, _excluded$d);
   const isError = useIsError(status);
   const renderReTryButton = useCallback(status => /*#__PURE__*/jsx(Button, {
     onClick: () => refetch(),
@@ -10813,11 +10795,74 @@ RichDataTable.propTypes = _extends({
   dataTableProps: PropTypes.object
 }, DataTable.propTypes);
 
-const _excluded$5 = ["onSubmit", "onClose", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
+const createEvent = () => {
+  const listeners = new Set();
+  const subscribe = listener => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const useListener = fn => {
+    const listener = useRef({});
+    useEffect(() => {
+      listener.current.fn = fn;
+    }, [fn]);
+    useEffect(() => {
+      const unsubscribe = subscribe(listener.current);
+      return unsubscribe;
+    }, []);
+  };
+  const useDispatcher = () => {
+    const caller = payload => {
+      listeners.forEach(l => l.fn(payload));
+    };
+    return caller;
+  };
+  return {
+    useDispatcher,
+    useListener
+  };
+};
+const createComponentEvent = () => {
+  const context = /*#__PURE__*/createContext();
+  const useDispatcher = payload => useContext(context).useDispatcher(payload);
+  const useListener = fn => useContext(context).useListener(fn);
+  const EventProvider = ({
+    children
+  }) => {
+    const createActionRef = useRef(createEvent());
+    return /*#__PURE__*/jsx(context.Provider, {
+      value: createActionRef.current,
+      children: children
+    });
+  };
+  const withEvent = Component => props => /*#__PURE__*/jsx(EventProvider, {
+    children: /*#__PURE__*/jsx(Component, _extends({}, props))
+  });
+  return {
+    useDispatcher,
+    useListener,
+    EventProvider,
+    withEvent
+  };
+};
+
+const events = {
+  OPEN_ENHANCED_SEARCH_DIALOG: "OPEN_ENHANCED_SEARCH_DIALOG",
+  OPEN_ADD_ITEM_DIALOG: "OPEN_ADD_ITEM_DIALOG"
+};
+const {
+  useDispatcher: useBOPEventDispatcher,
+  useListener: useBOPEventlistener,
+  withEvent: withBOPEvent
+} = createComponentEvent();
+
+const _excluded$e = ["onSubmit", "value", "columns", "filterPanelConfig", "multiple", "dataSource", "confirmButtonText"];
+const useDialogOpenEventListener = cb => useBOPEventlistener(event => {
+  if (event.name === events.OPEN_ENHANCED_SEARCH_DIALOG) cb(event.payload);
+});
 const EnhancedSearchDialog = _ref => {
   let {
       onSubmit,
-      onClose,
       value = [],
       columns,
       filterPanelConfig,
@@ -10825,18 +10870,14 @@ const EnhancedSearchDialog = _ref => {
       dataSource,
       confirmButtonText
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
   const [selection, setSelection] = useState([]);
-  const [open, toggleOpen] = useState(true);
-  const handleClose = useCallback(() => {
-    toggleOpen(false);
-    onClose();
-  });
-  const handleSelect = useCallback((rows, ...rest) => {
-    setSelection(rows);
-  }, []);
+  const [open, setOpen] = useState(false);
+  useDialogOpenEventListener(isOpen => setOpen(isOpen));
+  const handleClose = useCallback(() => setOpen(false), []);
+  const handleSelect = useCallback(rows => setSelection(rows), []);
   const handleSubmit = useCallback(() => {
-    toggleOpen(false);
+    setOpen(false);
     onSubmit(selection);
   }, [selection, onSubmit]);
 
@@ -10869,7 +10910,6 @@ EnhancedSearchDialog.propTypes = {
   columns: PropTypes.any,
   filterPanelConfig: PropTypes.any,
   multiple: PropTypes.any,
-  onClose: PropTypes.func,
   onSubmit: PropTypes.func,
   value: PropTypes.any,
   confirmButtonText: PropTypes.string
@@ -10878,36 +10918,38 @@ EnhancedSearchDialog.defaultProps = {
   confirmButtonText: "Update Selection"
 };
 
-const {
-  render: render$1
-} = template;
-
-/**
- * If there are already pre-selected items (eg. default values) among queried
- * options; object references should be same with selected values to show them
- * already selected among queried options. It is required as Material UI's
- * Autocomplete component use shallow comparison to distinguish if item is
- * already selected.
- *
- * @param {array} dataInProcess
- * @param {array} value
- * @param {?string} template
- * @returns {array}
- */
-const updateSelectedItems = (dataInProcess = [], value = [], template) => {
-  if (!(Array.isArray(value) && value.length > 0)) {
-    return dataInProcess;
-  }
-  const items = dataInProcess.map(item => {
-    const alreadySelected = value == null ? void 0 : value.find(selected => {
-      const selectedItemId = (selected == null ? void 0 : selected.id) || render$1(template, selected);
-      const itemId = (item == null ? void 0 : item.id) || render$1(template, item);
-      return itemId === selectedItemId;
-    });
-    alreadySelected && Object.assign(alreadySelected, item);
-    return alreadySelected || item;
+const useDialogOpenEventListener$1 = cb => useBOPEventlistener(event => {
+  if (event.name === events.OPEN_ADD_ITEM_DIALOG) cb(event.payload);
+});
+const AddItemFormDialog = ({
+  title: _title = "Add New Item",
+  renderAddItemForm: _renderAddItemForm = () => {},
+  onAddItem,
+  AddItemFormModalComponent: _AddItemFormModalComponent = FullPageViewer
+}) => {
+  const [open, setOpen] = useState(false);
+  useDialogOpenEventListener$1(isOpen => setOpen(isOpen));
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, []);
+  const handleSubmit = item => {
+    setOpen(false);
+    onAddItem(item);
+  };
+  return /*#__PURE__*/jsx(_AddItemFormModalComponent, {
+    title: _title,
+    open: open,
+    onClose: handleClose,
+    children: /*#__PURE__*/jsx("div", {
+      children: _renderAddItemForm({
+        onSubmit: handleSubmit
+      })
+    })
   });
-  return items;
+};
+AddItemFormDialog.propTypes = {
+  title: PropTypes.string,
+  AddItemFormModalComponent: PropTypes.any
 };
 
 /**
@@ -10937,8 +10979,16 @@ const useSkipOnMount = (fn, deps) => {
   }, deps);
 };
 
-const _excluded$4 = ["visibleValues", "multiple", "dataSource", "optionTemplate", "getOptionLabel", "renderTags", "renderOption", "freeSolo", "newItemTemplate", "loadOnOpen", "openOnFocus", "enhancedSearch", "disableCloseOnSelect", "listSelect", "onAdd", "pageSize", "groupName", "idTemplate", "group", "shouldResetOnParametersChange", "queryParamNames", "enableInfinteScroll"];
-const useStyles$e = makeStyles(theme => ({
+const useDependencyChange = (callback, currentState) => {
+  const [prevState, setPrevState] = useState(Symbol());
+  if (prevState !== currentState) {
+    callback(prevState, currentState);
+    setPrevState(currentState);
+  }
+};
+
+const _excluded$f = ["visibleValues", "multiple", "dataSource", "optionTemplate", "getOptionLabel", "renderTags", "renderOption", "freeSolo", "newItemTemplate", "loadOnOpen", "openOnFocus", "enhancedSearch", "disableCloseOnSelect", "listSelect", "onAdd", "pageSize", "groupName", "idTemplate", "group", "shouldResetOnParametersChange", "queryParamNames", "enableInfinteScroll", "renderAddItemForm", "AddItemFormModalComponent", "autoCompleteProps"];
+const useStyles$t = makeStyles(theme => ({
   menu: {
     textDecoration: "none",
     color: "inherit"
@@ -10959,6 +11009,16 @@ const defaultQueryParamNames = {
   offset: "offset",
   query: "q"
 };
+const clientSideFilterFn = createFilterOptions();
+const useLoadingRefetch = isFetching => {
+  const [loadingRefetch, setRefetchLoading] = useState(false);
+  useDependencyChange(() => {
+    if (!isFetching && loadingRefetch) {
+      setRefetchLoading(false);
+    }
+  }, isFetching);
+  return [loadingRefetch, setRefetchLoading];
+};
 
 /**
  * Configurable drop-down select with search to look up and select any type of AEFIS Entity.
@@ -10974,7 +11034,6 @@ const BusinessObjectPicker = _ref => {
       getOptionLabel,
       renderTags,
       renderOption: renderOptionProp,
-      freeSolo,
       enhancedSearch,
       disableCloseOnSelect,
       listSelect,
@@ -10982,16 +11041,18 @@ const BusinessObjectPicker = _ref => {
       idTemplate,
       shouldResetOnParametersChange,
       queryParamNames,
-      enableInfinteScroll
+      enableInfinteScroll,
+      renderAddItemForm,
+      AddItemFormModalComponent,
+      autoCompleteProps = {}
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  const classes = useStyles$e();
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$f);
+  const classes = useStyles$t();
   // TODO: implement controlled behaviour
   const [value, setValue] = useAutoCompleteValue(props.value, multiple);
   const [open, setOpen] = useState(props.open || listSelect);
-  const [openDialog, setOpenDialog] = useState(false);
+  const eventDispatch = useBOPEventDispatcher();
   const [q, setQ] = useState("");
-  const [flatData, setFlatData] = useState([]);
   const _queryParamNames = _extends({}, defaultQueryParamNames, queryParamNames);
   const parameters = _extends({}, props.parameters, q.trim().length ? {
     [_queryParamNames.query]: q.trim()
@@ -11022,8 +11083,8 @@ const BusinessObjectPicker = _ref => {
     data,
     fetchNextPage,
     hasNextPage,
-    isError,
-    isLoading
+    refetch,
+    isFetching
   } = useDataSourceInfiniteQuery(dataSourceName, parameters, {
     [_queryParamNames.offset]: 0,
     [_queryParamNames.limit]: pageSize
@@ -11038,11 +11099,8 @@ const BusinessObjectPicker = _ref => {
       };
     }
   });
-  useEffect(() => {
-    if (isError || isLoading) {
-      setFlatData([]);
-    }
-  }, [isError, isLoading]);
+  const [loadingRefetch, setRefetchLoading] = useLoadingRefetch(isFetching);
+  console.log("loadingRefetch ", loadingRefetch);
   const {
     ref,
     inView
@@ -11050,13 +11108,13 @@ const BusinessObjectPicker = _ref => {
     threshold: 0,
     skip: !hasNextPage
   });
-  useEffect(() => {
+  const _flatData = useMemo(() => {
     if (Array.isArray(data == null ? void 0 : data.pages)) {
       const dataInProcess = [].concat(...data.pages);
       const isInfinteScrollEnabled = props.type || enableInfinteScroll;
       if (hasNextPage && isInfinteScrollEnabled) {
         dataInProcess.push({
-          action: "loadMore",
+          __type: "loadMore",
           // eslint-disable-next-line react/display-name
           render: () => /*#__PURE__*/jsx("span", {
             ref: ref,
@@ -11065,18 +11123,25 @@ const BusinessObjectPicker = _ref => {
         });
       }
       // TODO: remove updateSelectedItems, isOptionEqualToValue prop should handle selection
-      const items = updateSelectedItems(dataInProcess, value, idTemplate || optionTemplate);
-      setFlatData(items);
+      // const items = updateSelectedItems(dataInProcess, value, idTemplate || optionTemplate);
+      return dataInProcess;
     }
+    return data || [];
   }, [data]);
   useEffect(() => {
     if (inView) {
       fetchNextPage();
     }
   }, [inView]);
-  const handleChange = (event, newValue, reason, {
+  const handleChange = (e, newValue, reason, {
     option
   }) => {
+    // INFO: creating option by text is disabled, renderAddItemForm prop is
+    // used instead.
+    if (e.key === "Enter" && reason === "createOption") {
+      e.stopPropagation();
+      return;
+    }
     if (reason === "removeOption") {
       handleTagDelete(option, reason);
       return;
@@ -11089,12 +11154,6 @@ const BusinessObjectPicker = _ref => {
       props.onChange == null ? void 0 : props.onChange(null);
       return;
     }
-
-    // TODO: onAdd will be implemented
-    // if (multiple && onAdd && newValue.newItemValue) {
-    // 	onAdd(value);
-    // }
-
     setValue(multiple ? newValue : [option]);
     props.onChange == null ? void 0 : props.onChange(multiple ? newValue : option, {
       reason,
@@ -11112,9 +11171,16 @@ const BusinessObjectPicker = _ref => {
       option
     });
   };
-  const handleQueryTrigger = q => {
-    setFlatData([]);
-    setQ(q);
+  const handleQueryTrigger = q => setQ(q);
+  const handleAddItem = item => {
+    setRefetchLoading(true);
+    refetch();
+    setValue(multiple ? [...value, item] : [item]);
+  };
+  const handleKeyDown = e => {
+    // INFO: This hides keydown event from AutoComplete. It prevents
+    // AutoComplete to clear the input field.
+    if (e.key === "Enter") e.stopPropagation();
   };
   const getLabel = option => {
     if (option.newItemLabel) {
@@ -11126,25 +11192,25 @@ const BusinessObjectPicker = _ref => {
     if (idTemplate) return template.render(idTemplate, option);
     if (option.id) return option.id;
     return getLabel(option);
-  }, [idTemplate, optionTemplate]);
-
-  // INFO: client side filter is removed
-  // const getFilterOptions = useCallback((options, params) => {
-  // 	// Don't filter if we already filtered n the server side.
-  // 	// const filtered = data ? filter(options, params) : options;
-  // 	// TODO: below code is a workaround, better approach should be implemented - katam
-  // 	const filtered = options;
-  // 	// TODO: onAdd will be implemented
-  // 	// if (freeSolo && params.inputValue !== "") {
-  // 	// 	filtered.push({
-  // 	// 		action: "createNew",
-  // 	// 		// eslint-disable-next-line react/display-name
-  // 	// 		render: () => <div ref={ref}>Create &quot;{params.inputValue}&quot;...</div>
-  // 	// 	});
-  // 	// }
-  // 	return filtered;
-  // }, []);
-
+  }, [idTemplate, optionTemplate]);
+  const getFilterOptions = useCallback((options, params) => {
+    const isServerSideFiltered = !!dataSourceName;
+    if (options.length > 1 && isServerSideFiltered) return options;
+
+    // INFO: clientSideFilterFn replicates the default behaviour. It is
+    // same thing as filterOptions prop left undefined. The reason it is
+    // implemented here is because freeSolo prop disables noOptionText
+    // prop. Issue: https://github.com/mui/material-ui/issues/18985
+    if (options.length > 1 && !isServerSideFiltered) {
+      const filteredOptions = clientSideFilterFn(options, params);
+      if (filteredOptions.length > 0) return filteredOptions;
+    }
+    return [{
+      __type: "noOption",
+      noOption: true,
+      render: () => status === "loading" ? "Loading..." : "No Option Avaliable"
+    }];
+  }, [status]);
   const renderOption = (props, option) => {
     if (option.render) {
       return /*#__PURE__*/jsx("li", _extends({}, props, {
@@ -11157,16 +11223,14 @@ const BusinessObjectPicker = _ref => {
       children: label
     }));
   };
-  const renderBusinessObject = option => {
-    // TODO: be sure if this is necessary condition - katam
+  const renderBusinessObject = (_props, option) => {
     const size = props.size && (props.size === "small" || props.size === "medium") ? "small" : "large";
-    const index = option["data-option-index"];
-    const data = flatData[index];
-    return data.render ? /*#__PURE__*/jsx("li", _extends({
-      className: option.className
-    }, option, {
-      children: data.render(option)
-    })) : /*#__PURE__*/jsx("li", _extends({}, option, {
+    const index = _props["data-option-index"];
+    const data = _flatData[index];
+    if (option.render) return /*#__PURE__*/jsx("li", _extends({}, _props, {
+      children: option.render(_props)
+    }));
+    return /*#__PURE__*/jsx("li", _extends({}, _props, {
       children: /*#__PURE__*/jsx(BusinessObject, {
         type: props.type,
         data: data,
@@ -11177,10 +11241,10 @@ const BusinessObjectPicker = _ref => {
   };
   const handleIsOptionEqualToValue = useCallback((a, b) => getKey(a) == getKey(b), []);
   const renderCustomTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
+    sx: {
+      overflow: "hidden"
+    },
     children: /*#__PURE__*/jsx(Chip, {
-      sx: {
-        margin: 0.1
-      },
       id: getKey(option),
       label: getLabel(option),
       tooltipText: option.description,
@@ -11191,7 +11255,7 @@ const BusinessObjectPicker = _ref => {
   }, getKey(option))), [props.size, getKey, getLabel, handleTagDelete]);
   const renderTypeTags = useCallback(value => value.map(option => /*#__PURE__*/jsx(Box$1, {
     sx: {
-      margin: 0.1
+      overflow: "hidden"
     },
     children: /*#__PURE__*/jsx(BusinessObject, {
       type: props.type,
@@ -11203,43 +11267,51 @@ const BusinessObjectPicker = _ref => {
       }
     })
   }, getKey(option))), [props.type, props.size, getKey, handleTagDelete]);
-  return /*#__PURE__*/jsxs(React.Fragment, {
-    children: [/*#__PURE__*/jsx(Autocomplete, {
+  return /*#__PURE__*/jsxs(Box$1, {
+    sx: {
+      display: "flex"
+    },
+    children: [/*#__PURE__*/jsx(Autocomplete, _extends({
+      sx: {
+        flex: 1
+      },
       id: process.env.NODE_ENV === "test" ? "test-id" : undefined,
       multiple: true,
       limitTags: visibleValues,
       open: open,
-      onOpen: () => {
-        setOpen(true);
-      },
+      onOpen: () => setOpen(true),
       onClose: () => {
-        if (!listSelect) {
-          setOpen(false);
-        }
+        if (!listSelect) setOpen(false);
       },
       loading: status === "loading",
-      options: props.data || flatData,
+      options: props.data || _flatData,
       onChange: handleChange,
       onInputChange: (event, value, reason) => reason === "reset" && setQ(""),
       getOptionLabel: getOptionLabel || getLabel,
       size: props.size,
-      value: value
-      //inputValue={q}
-      ,
+      value: value,
       renderOption: renderOptionProp || (props.type ? renderBusinessObject : renderOption),
       noOptionsText: status === "error" ? "Error loading options" : "No options",
-      getOptionDisabled: optionItem => (optionItem == null ? void 0 : optionItem.action) === "loadMore",
-      handleHomeEndKeys: true,
-      freeSolo: freeSolo != null ? freeSolo : !!(dataSource || props.type),
+      getOptionDisabled: optionItem => (optionItem == null ? void 0 : optionItem.__type) === "loadMore" || (optionItem == null ? void 0 : optionItem.__type) === "noOption",
+      handleHomeEndKeys: true
+      // INFO: freeSolo prevents warning:
+      // https://stackoverflow.com/questions/61947941/material-ui-autocomplete-warning-the-value-provided-to-autocomplete-is-invalid
+      ,
+      freeSolo: false,
+      clearOnBlur: false,
+      selectOnFocus: false,
       renderTags: renderTags || (props.type ? renderTypeTags : renderCustomTags),
-      renderInput: params => /*#__PURE__*/jsx(TextSearch$1, _extends({}, params, props, {
+      renderInput: params => /*#__PURE__*/jsx(TextSearch, _extends({}, params, props, {
+        inputProps: _extends({}, params.inputProps, {
+          "data-testid": "content-input"
+        }),
         onChange: handleQueryTrigger,
         minimumLength: 1,
         clearOnChange: false,
         variant: props.variant,
         InputProps: _extends({}, params.InputProps, {
           endAdornment: /*#__PURE__*/jsxs(React.Fragment, {
-            children: [status === "loading" && /*#__PURE__*/jsx(CircularProgress, {
+            children: [(status === "loading" || loadingRefetch) && /*#__PURE__*/jsx(CircularProgress, {
               "aria-label": "loading progress",
               color: "inherit",
               size: 20
@@ -11254,6 +11326,7 @@ const BusinessObjectPicker = _ref => {
                 setOpen(!open);
               },
               disabled: props.disabled,
+              onKeyDown: handleKeyDown,
               children: /*#__PURE__*/jsx(ExpandLess, {
                 className: clsx(classes.expand, {
                   [classes.expandOpen]: open
@@ -11262,15 +11335,18 @@ const BusinessObjectPicker = _ref => {
             }), enhancedSearch && /*#__PURE__*/jsx(IconButton$1, {
               "aria-label": "search",
               size: "small",
-              onClick: () => setOpenDialog(true),
+              onKeyDown: handleKeyDown,
+              onClick: () => eventDispatch({
+                name: events.OPEN_ENHANCED_SEARCH_DIALOG,
+                payload: true
+              }),
               children: /*#__PURE__*/jsx(Search, {})
             })]
           })
         })
       })),
-      disabled: props.disabled
-      //filterOptions={props.data ? filter : (options) => options}
-      // filterOptions={(options, params) => getFilterOptions(options, params)}
+      disabled: props.disabled,
+      filterOptions: getFilterOptions
       // TODO: below property can be used to improve the listSelect option.
       //ListboxProps={{}}
       ,
@@ -11278,27 +11354,47 @@ const BusinessObjectPicker = _ref => {
       disableClearable: true,
       forcePopupIcon: false,
       isOptionEqualToValue: handleIsOptionEqualToValue
-    }), openDialog && /*#__PURE__*/jsx(EnhancedSearchDialog, _extends({
+    }, autoCompleteProps)), enhancedSearch && /*#__PURE__*/jsx(EnhancedSearchDialog, _extends({
       name: props.label,
       dataSource: dataSourceName,
       value: value,
-      onClose: () => {
-        setOpenDialog(false);
-      },
       onSubmit: value => {
         setValue(value);
-        setOpenDialog(false);
         const newValue = multiple ? value : value[0];
-        props == null ? void 0 : props.onChange == null ? void 0 : props.onChange(newValue);
+        props.onChange == null ? void 0 : props.onChange(newValue);
       },
       multiple: multiple
-    }, enhancedSearch))]
+    }, enhancedSearch)), renderAddItemForm && /*#__PURE__*/jsx(Box$1, {
+      component: "span",
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        flexDirection: "column"
+      },
+      children: /*#__PURE__*/jsx(IconButton$1, {
+        onClick: () => {
+          eventDispatch({
+            name: events.OPEN_ADD_ITEM_DIALOG,
+            payload: true
+          });
+        },
+        children: /*#__PURE__*/jsx(AddIcon, {
+          sx: {
+            color: "grey"
+          }
+        })
+      })
+    }), renderAddItemForm && /*#__PURE__*/jsx(AddItemFormDialog, {
+      AddItemFormModalComponent: AddItemFormModalComponent,
+      renderAddItemForm: renderAddItemForm,
+      onAddItem: handleAddItem
+    })]
   });
 };
 BusinessObjectPicker.propTypes = {
   /** If true, multiple selection is supported. */
   multiple: PropTypes.bool,
-  /** Any known Business Object type (One of Accreditor, AdministrativeDivision, AdministrativeUnit, Assignment, Badge, BusinessObject, College, Course, CourseOutcome, CourseSection, Department, Faculty, Institution, Outcome, OutcomeSpace, PerformanceIndicator, Program, Term) */
+  /** Any known Business Object type */
   type: PropTypes.oneOf([null, "accreditor", "administrativeDivision", "administrativeUnit", "assessment", "assignment", "badge", "businessObject", "college", "course", "courseOutcome", "courseSection", "department", "faculty", "institution", "keyword", "outcome", "outcomeGroup", "outcomeSpace", "performanceIndicator", "program", "term"]),
   /** Data for the list of options. If this is not provided, and type is provided, default business object queries are used to pull the data. */
   data: PropTypes.any,
@@ -11363,7 +11459,15 @@ BusinessObjectPicker.propTypes = {
     limit: PropTypes.string,
     offset: PropTypes.string,
     query: PropTypes.string
-  })
+  }),
+  /** Component to handle Modal pop-up view; default: FullPageViewer. Modal
+   *  will be provided following props: open, onClose, title, children that
+   *  are handled by the BOP and open to overriding */
+  AddItemFormModalComponent: PropTypes.any,
+  /** render prop to handle form content, render function provided onSubmit callback function	 */
+  renderAddItemForm: PropTypes.func,
+  /** override props of MUI's AutoComplete components */
+  autoCompleteProps: PropTypes.object
 };
 BusinessObjectPicker.defaultProps = {
   multiple: false,
@@ -11374,20 +11478,20 @@ BusinessObjectPicker.defaultProps = {
   size: "medium",
   visibleValues: -1,
   optionTemplate: "{{name}}",
-  newItemTemplate: 'Add "{{inputValue}}"',
   loadOnOpen: true,
   pageSize: 10,
   open: false,
   listSelect: false,
   shouldResetOnParametersChange: false
 };
+var BusinessObjectPicker$1 = withBOPEvent(BusinessObjectPicker);
 
-const colorPalette$1 = {
+const colorPalette$t = {
   light: grey[200],
   default: grey[500],
   dark: grey[900]
 };
-const modifiedPalette = (palette, outlined) => {
+const modifiedPalette$1 = (palette, outlined) => {
   if (!outlined) {
     return {
       light: palette.dark,
@@ -11397,8 +11501,8 @@ const modifiedPalette = (palette, outlined) => {
   }
   return palette;
 };
-const ChipDisplay = props => {
-  const palette = _extends({}, colorPalette$1, props.configuration);
+const ChipDisplay$2 = props => {
+  const palette = _extends({}, colorPalette$t, props.configuration);
   const classes = makeStyles(() => ({
     deleteIcon: {
       "&.MuiChip-deleteIcon": {
@@ -11429,10 +11533,10 @@ const ChipDisplay = props => {
     deleteIcon: /*#__PURE__*/jsx(Cancel, {
       className: props.outlined ? classes.outlinedDeleteIcon : classes.deleteIcon
     }),
-    colorPalette: modifiedPalette(palette, props.outlined)
+    colorPalette: modifiedPalette$1(palette, props.outlined)
   });
 };
-ChipDisplay.propTypes = {
+ChipDisplay$2.propTypes = {
   /** the status text */
   statusText: PropTypes.string,
   /** Size of the display small|medium */
@@ -11449,12 +11553,12 @@ ChipDisplay.propTypes = {
   /** OnDelete action for the chip. If an Action is set, a delete icon will be displayed */
   onDelete: PropTypes.any
 };
-ChipDisplay.defaultProps = {
+ChipDisplay$2.defaultProps = {
   size: "small",
   outlined: false
 };
 
-const colorPalette = {
+const colorPalette$u = {
   light: grey[50],
   default: grey[500],
   dark: grey[900]
@@ -11464,8 +11568,8 @@ const colorPalette = {
  * ListItem display for Entities
  */
 
-const ListItemDisplay = props => {
-  const palette = _extends({}, colorPalette, props.configuration);
+const ListItemDisplay$2 = props => {
+  const palette = _extends({}, colorPalette$u, props.configuration);
   const classes = makeStyles(theme => ({
     root: {
       width: "100%",
@@ -11537,10 +11641,10 @@ const ListItemDisplay = props => {
     })]
   });
 };
-ListItemDisplay.defaultProps = {
+ListItemDisplay$2.defaultProps = {
   size: "default"
 };
-ListItemDisplay.propTypes = {
+ListItemDisplay$2.propTypes = {
   /** the status */
   statusText: PropTypes.string.isRequired,
   /** size of the list item. values are small | default */
@@ -11761,9 +11865,9 @@ const BusinessObjectStatus = props => {
   const selectComponent = displayType => {
     switch (displayType) {
       case "chip":
-        return ChipDisplay;
+        return ChipDisplay$2;
       case "listItem":
-        return ListItemDisplay;
+        return ListItemDisplay$2;
       default:
         return Invalid;
     }
@@ -11775,10 +11879,10 @@ const BusinessObjectStatus = props => {
     configuration: statuses[formatStatusForConfiguration(status)]
   }));
 };
-const businessObjectStatusTypes$1 = ["active", "approvalPending", "archived", "assigned", "authenticated", "cancelled", "closed", "completed", "draft", "endorsed", "error", "facultyPending", "goalMet", "goalMissed", "inactive", "incomplete", "inProgress", "inReview", "inRevision", "new", "onHold", "pending", "pendingResults", "pendingStart", "pendingStartDate", "published", "requested", "results", "running", "selfIssued", "stopped", "terminated", "unassigned", "verified"];
+const businessObjectStatusTypes = ["active", "approvalPending", "archived", "assigned", "authenticated", "cancelled", "closed", "completed", "draft", "endorsed", "error", "facultyPending", "goalMet", "goalMissed", "inactive", "incomplete", "inProgress", "inReview", "inRevision", "new", "onHold", "pending", "pendingResults", "pendingStart", "pendingStartDate", "published", "requested", "results", "running", "selfIssued", "stopped", "terminated", "unassigned", "verified"];
 BusinessObjectStatus.propTypes = {
   /** the status to be displayed. This can be used to pass the status value or data. This parameter overrides the data. */
-  status: PropTypes.oneOf(businessObjectStatusTypes$1),
+  status: PropTypes.oneOf(businessObjectStatusTypes),
   /** The data from the entity itself.  In the entity data, the AEFIS Business Object "status" is required. */
   data: PropTypes.shape({
     id: PropTypes.any,
@@ -11786,7 +11890,7 @@ BusinessObjectStatus.propTypes = {
     name: PropTypes.string,
     description: PropTypes.string,
     status: PropTypes.string.isRequired
-  }).isRequired,
+  }),
   /** The display type for the business object status.  */
   displayType: PropTypes.oneOf(["chip", "listItem"]),
   /** The size of the business object status display type.  */
@@ -11804,7 +11908,7 @@ BusinessObjectStatus.story = {
   }
 };
 
-const styles$1 = {
+const styles = {
   zeroVerticalPadding: {
     paddingTop: 0,
     paddingBottom: 0
@@ -11839,10 +11943,10 @@ const BusinessObjectStatusButton = props => {
     },
     sx: _extends({
       width: "100%"
-    }, styles$1.zeroVerticalPadding),
+    }, styles.zeroVerticalPadding),
     children: [/*#__PURE__*/jsx(Box$1, {
       component: "span",
-      sx: styles$1.menuListItem,
+      sx: styles.menuListItem,
       children: /*#__PURE__*/jsx(Typography, {
         noWrap: true,
         variant: "body1",
@@ -11854,7 +11958,7 @@ const BusinessObjectStatusButton = props => {
       })
     }), /*#__PURE__*/jsx(Box$1, {
       component: "span",
-      sx: styles$1.menuListItem,
+      sx: styles.menuListItem,
       children: /*#__PURE__*/jsx(ArrowForwardIcon, {
         fontSize: "small"
       })
@@ -11906,7 +12010,7 @@ const BusinessObjectStatusButton = props => {
         })
       })]
     }), isEditable && /*#__PURE__*/jsx(Menu$1, {
-      sx: styles$1.zeroVerticalPadding,
+      sx: styles.zeroVerticalPadding,
       id: "simple-menu",
       anchorOrigin: {
         vertical: "bottom",
@@ -11934,10 +12038,10 @@ const BusinessObjectStatusButton = props => {
 BusinessObjectStatusButton.defaultProps = {
   canEdit: true
 };
-const businessObjectStatusTypes = ["active", "approvalPending", "archived", "assigned", "authenticated", "cancelled", "closed", "completed", "draft", "endorsed", "error", "facultyPending", "goalMet", "goalMissed", "inactive", "incomplete", "inProgress", "inReview", "inRevision", "new", "onHold", "pending", "pendingResults", "pendingStart", "pendingStartDate", "published", "requested", "results", "running", "selfIssued", "stopped", "terminated", "unassigned", "verified"];
+const businessObjectStatusTypes$1 = ["active", "approvalPending", "archived", "assigned", "authenticated", "cancelled", "closed", "completed", "draft", "endorsed", "error", "facultyPending", "goalMet", "goalMissed", "inactive", "incomplete", "inProgress", "inReview", "inRevision", "new", "onHold", "pending", "pendingResults", "pendingStart", "pendingStartDate", "published", "requested", "results", "running", "selfIssued", "stopped", "terminated", "unassigned", "verified"];
 BusinessObjectStatusButton.propTypes = {
-  value: PropTypes.oneOf(businessObjectStatusTypes),
-  defaultValue: PropTypes.oneOf(businessObjectStatusTypes),
+  value: PropTypes.oneOf(businessObjectStatusTypes$1),
+  defaultValue: PropTypes.oneOf(businessObjectStatusTypes$1),
   buttonSize: PropTypes.any,
   onChange: PropTypes.func,
   options: PropTypes.any,
@@ -12076,57 +12180,6 @@ BusinessObjectTable.propTypes = _extends({
   height: PropTypes.any
 }, DataTable.propTypes);
 
-const createEvent = () => {
-  const listeners = new Set();
-  const subscribe = listener => {
-    listeners.add(listener);
-    return () => listeners.delete(listener);
-  };
-  const useListener = fn => {
-    const listener = useRef({});
-    useEffect(() => {
-      listener.current.fn = fn;
-    }, [fn]);
-    useEffect(() => {
-      const unsubscribe = subscribe(listener.current);
-      return unsubscribe;
-    }, []);
-  };
-  const useDispatcher = () => {
-    const caller = payload => {
-      listeners.forEach(l => l.fn(payload));
-    };
-    return caller;
-  };
-  return {
-    useDispatcher,
-    useListener
-  };
-};
-const createComponentEvent = () => {
-  const context = /*#__PURE__*/createContext();
-  const useDispatcher = payload => useContext(context).useDispatcher(payload);
-  const useListener = fn => useContext(context).useListener(fn);
-  const EventProvider = ({
-    children
-  }) => {
-    const createActionRef = useRef(createEvent());
-    return /*#__PURE__*/jsx(context.Provider, {
-      value: createActionRef.current,
-      children: children
-    });
-  };
-  const withEvent = Component => props => /*#__PURE__*/jsx(EventProvider, {
-    children: /*#__PURE__*/jsx(Component, _extends({}, props))
-  });
-  return {
-    useDispatcher,
-    useListener,
-    EventProvider,
-    withEvent
-  };
-};
-
 const createStore = initialState => {
   let state = initialState;
   const getState = () => state;
@@ -12182,7 +12235,7 @@ const createComponentStore = initialState => {
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
 const isValidConnection = connection => true ;
-const useStyles$d = makeStyles(() => ({
+const useStyles$u = makeStyles(() => ({
   container: {
     width: "100%",
     height: "100%"
@@ -12197,7 +12250,7 @@ const useStyles$d = makeStyles(() => ({
 }));
 const CurriculumNode = props => {
   var _props$data;
-  const classes = useStyles$d();
+  const classes = useStyles$u();
   // const dispatchOnEnterNode = useOnEnterNode();
 
   const handleKeyPressed = useCallback(evt => {
@@ -12376,7 +12429,7 @@ CurriculumChart.propTypes = {
   onLoad: PropTypes.func
 };
 
-const _excluded$3 = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
+const _excluded$g = ["error", "inputFormat", "value", "isControlled", "onChange", "clearable", "disabled", "required", "showButton", "minimumDate", "maximumDate", "inputEndAdornmentText"];
 const MuiDatePicker = props => {
   const isMobile = useMediaQuery$1(theme => theme.breakpoints.down("md"));
   if (props.type) {
@@ -12395,7 +12448,7 @@ const useFormItemState = (propsValue, isControlled) => {
 };
 
 // INFO: It overrides styles from from legacy aefis project
-const dateInputStyles$1 = {
+const dateInputStyles = {
   "> div > input ": {
     cursor: "text !important",
     backgroundColor: "unset !important"
@@ -12416,7 +12469,7 @@ const DatePickerBase = _ref => {
       maximumDate,
       inputEndAdornmentText
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$g);
   const [value, setValue] = useFormItemState(propsValue, isControlled);
   const handleChange = newValue => {
     !isControlled && setValue(newValue);
@@ -12437,7 +12490,7 @@ const DatePickerBase = _ref => {
         inputProps: _extends({}, params.inputProps, {
           type: "text"
         }),
-        sx: dateInputStyles$1,
+        sx: dateInputStyles,
         error: error,
         fullWidth: true,
         required: required,
@@ -12827,7 +12880,7 @@ DocViewer.propTypes = {
   style: PropTypes.object
 };
 
-const styles = {
+const styles$1 = {
   root: {
     "@media (min-width:600px)": {
       minWidth: "344px !important"
@@ -12898,21 +12951,21 @@ const Notification = props => {
     })
   };
   return /*#__PURE__*/jsx(Box$1, {
-    sx: styles.root,
+    sx: styles$1.root,
     role: "alert",
     children: /*#__PURE__*/jsx(Box$1, {
-      sx: styles.card,
+      sx: styles$1.card,
       children: /*#__PURE__*/jsxs(Box$1, {
         sx: _extends({
           backgroundColor: backgroundColor[props.variant]
-        }, styles.container),
+        }, styles$1.container),
         children: [icon[props.variant] !== undefined && /*#__PURE__*/jsx(Box$1, {
-          sx: styles.iconContainer,
+          sx: styles$1.iconContainer,
           children: icon[props.variant]
         }), /*#__PURE__*/jsx(Box$1, {
-          sx: styles.messageContainer,
+          sx: styles$1.messageContainer,
           children: /*#__PURE__*/jsx(Typography, {
-            style: styles.typography,
+            style: styles$1.typography,
             sx: {
               color: theme.palette.getContrastText(backgroundColor[props.variant])
             },
@@ -12920,7 +12973,7 @@ const Notification = props => {
           })
         }), props.canDismiss && /*#__PURE__*/jsx(IconButton, {
           name: "dismiss",
-          sx: styles.actionContainer,
+          sx: styles$1.actionContainer,
           onClick: props.onClose,
           children: /*#__PURE__*/jsx(Close, {
             sx: {
@@ -13013,7 +13066,7 @@ PanelDrawer.propTypes = {
   paperStyle: PropTypes.any
 };
 
-const useStyles$c = makeStyles(() => ({
+const useStyles$v = makeStyles(() => ({
   barChart: {
     display: "flex",
     height: 30,
@@ -13063,7 +13116,7 @@ const useStyles$c = makeStyles(() => ({
     lineHeight: "inherit"
   }
 }));
-const color$2 = (percent, dynamicColor, showComplete) => {
+const color = (percent, dynamicColor, showComplete) => {
   let color = "rgba(100, 181, 246,0.7)";
   if (dynamicColor && !showComplete) {
     if (percent < 25) {
@@ -13082,7 +13135,7 @@ const color$2 = (percent, dynamicColor, showComplete) => {
   return color;
 };
 const barStyle = (percent, dynamicColor, showComplete) => {
-  let bgColor = color$2(percent, dynamicColor, showComplete);
+  let bgColor = color(percent, dynamicColor, showComplete);
   return percent === 100 ? {
     width: "100%",
     borderTopRightRadius: "20px",
@@ -13124,7 +13177,7 @@ const barContainerSize = size => {
 };
 const BarChart = props => {
   const [value, setValue] = useState(0);
-  const classes = useStyles$c();
+  const classes = useStyles$v();
   const containerSize = barContainerSize(props.size);
   const titleStyle = {
     fontSize: "1.0em",
@@ -13195,7 +13248,7 @@ BarChart.propTypes = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const useStyles$b = makeStyles(() => ({
+const useStyles$w = makeStyles(() => ({
   circleTitle: {
     fontSize: 110,
     letterSpacing: "-0.05em",
@@ -13217,7 +13270,7 @@ const useStyles$b = makeStyles(() => ({
   }
 }));
 const CircleChartTitle = props => {
-  const classes = useStyles$b();
+  const classes = useStyles$w();
   const useSubTitle = props.size === "xxsmall" || props.size === "xsmall" || !props.subtitle || props.subtitle && props.subtitle === "" ? false : true;
   const useMinorTitle = useSubTitle && props.minortitle !== "" ? true : false;
   return /*#__PURE__*/jsxs(React.Fragment, {
@@ -13254,7 +13307,7 @@ CircleChartTitle.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$a = makeStyles(() => ({
+const useStyles$x = makeStyles(() => ({
   donut: {
     width: "100%",
     height: "100%"
@@ -13264,7 +13317,7 @@ const useStyles$a = makeStyles(() => ({
   }
 }));
 const color$1 = (percent, showComplete, dynamicColor) => {
-  return percent && dynamicColor ? dynamicSuccess[percent] : showComplete && percent === 100 ? goalMet["default"] : inProgress["default"];
+  return percent && dynamicColor ? dynamicSuccess$1[percent] : showComplete && percent === 100 ? goalMet$1["default"] : inProgress$2["default"];
 };
 const circleContainerSize = size => {
   const struct = {
@@ -13307,7 +13360,7 @@ const strokeDashOffset = percent => {
   return offset;
 };
 const CircleChart = props => {
-  const classes = useStyles$a();
+  const classes = useStyles$x();
   const newPercent = props.percentValue > 100 ? 100 : props.percentValue;
   const strokeColor = props.dynamicColor ? color$1(newPercent, undefined, true) : color$1(newPercent, props.showComplete);
   const containerSize = circleContainerSize(props.size);
@@ -13340,7 +13393,7 @@ const CircleChart = props => {
         cy: config.cy,
         r: config.r,
         fill: "none",
-        stroke: common["light"],
+        stroke: common$1["light"],
         strokeWidth: config.strokeWidth
       }), /*#__PURE__*/jsx("circle", {
         cx: config.cx,
@@ -13382,7 +13435,7 @@ CircleChart.propTypes = {
   description: PropTypes.string
 };
 
-const useStyles$9 = makeStyles(() => ({
+const useStyles$y = makeStyles(() => ({
   container: {
     width: "100%"
   },
@@ -13395,11 +13448,11 @@ const useStyles$9 = makeStyles(() => ({
     alignItems: "center"
   }
 }));
-const color = percent => {
-  return percent ? dynamicSuccess[percent] : inProgress["default"];
+const color$2 = percent => {
+  return percent ? dynamicSuccess$1[percent] : inProgress$2["default"];
 };
 const Chart = props => {
-  let bgColor = props.dynamicColor ? color(props.percentValue) : props.showComplete && props.percentValue === 100 ? goalMet["default"] : color();
+  let bgColor = props.dynamicColor ? color$2(props.percentValue) : props.showComplete && props.percentValue === 100 ? goalMet$1["default"] : color$2();
   const XSmallSlider = withStyles$1({
     root: {
       borderRadius: 10,
@@ -13483,7 +13536,7 @@ Chart.propTypes = {
   label: PropTypes.string
 };
 const SliderChart = props => {
-  const classes = useStyles$9();
+  const classes = useStyles$y();
   const newSubtitle = !props.subtitle || props.subtitle === "" ? props.percentValue + "%" : props.subtitle;
   const valueClass = {
     marginLeft: 8,
@@ -13763,7 +13816,7 @@ Legend.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$8 = makeStyles$1(theme => ({
+const useStyles$z = makeStyles$1(theme => ({
   root: {
     paddingBottom: theme.spacing(3),
     marginTop: theme.spacing(4),
@@ -13801,7 +13854,7 @@ RubricLegend.propTypes = {
 /** AEFIS Rubric Score settings slider.  Used to adjust the rubric received based on student score.  Generally used during the assignment linking process. */
 
 const RubricScoreSlider = props => {
-  const classes = useStyles$8();
+  const classes = useStyles$z();
   const newValueArray = [...props.valueArray];
   newValueArray.shift();
   const [rubricValuesArray, setRubricValuesArray] = useState(newValueArray);
@@ -13930,7 +13983,7 @@ ScrollToTopButton.propTypes = {
 };
 
 // Copyright (c) 2020 AEFIS, all rights reserved.
-const useStyles$7 = makeStyles(theme => ({
+const useStyles$A = makeStyles(theme => ({
   container: {
     position: "relative",
     display: "inline-flex"
@@ -14020,7 +14073,7 @@ const style = {
 /** UI element to display an array of object statistics */
 
 const StatBoxes = props => {
-  const classes = useStyles$7();
+  const classes = useStyles$A();
   return /*#__PURE__*/jsx(React.Fragment, {
     children: /*#__PURE__*/jsx("div", {
       className: classes.container,
@@ -14084,7 +14137,7 @@ StatBoxes.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$6 = makeStyles(theme => ({
+const useStyles$B = makeStyles(theme => ({
   title: {
     fontSize: "1.0rem",
     fontWeight: 500
@@ -14105,7 +14158,7 @@ const useStyles$6 = makeStyles(theme => ({
 /** Component to display common UI pattern of object title and object description. */
 
 const TitleAndDescription = props => {
-  const classes = useStyles$6();
+  const classes = useStyles$B();
   return /*#__PURE__*/jsxs("div", {
     className: props.gutterBottom ? classes.titleContainer : classes.titleContainerNoGutter,
     children: [/*#__PURE__*/jsx(Typography, {
@@ -14183,14 +14236,14 @@ const useDebounceCallback = (fnToDebounce, durationInMs = 200) => {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$5 = makeStyles(() => ({
+const useStyles$C = makeStyles(() => ({
   avatar: {
     marginLeft: "auto",
     marginRight: "auto",
     transition: "all .2s ease-in-out"
   }
 }));
-const StyledBadge = withStyles$1(theme => ({
+const StyledBadge$1 = withStyles$1(theme => ({
   badge: {
     backgroundColor: green[500],
     color: green[500],
@@ -14229,7 +14282,7 @@ const getUserInitials = user => {
 const RenderAvatar = props => {
   var _props$user;
   const theme = useTheme$1();
-  const classes = useStyles$5();
+  const classes = useStyles$C();
   const avatarColor = props.customColor ? props.customColor : props.color === "primary" ? deepOrange[700] : props.color === "secondary" ? blue[700] : deepOrange[700];
   const style = {
     small: {
@@ -14277,7 +14330,7 @@ RenderAvatar.propTypes = {
 /** Components to render an AEFIS User avatar. */
 
 const UserAvatar = /*#__PURE__*/React.memo(function UserAvatar(props) {
-  return props.showOnline ? /*#__PURE__*/jsx(StyledBadge, {
+  return props.showOnline ? /*#__PURE__*/jsx(StyledBadge$1, {
     overlap: "circle",
     anchorOrigin: {
       vertical: "top",
@@ -14413,7 +14466,7 @@ QontoStepIcon.propTypes = {
   className: PropTypes.string,
   completed: PropTypes.bool
 };
-const Header = props => {
+const Header$1 = props => {
   const activeStep = props.allStepsCompleted ? props.data.length : props.activeStep;
   return /*#__PURE__*/jsx(Stepper, {
     activeStep: activeStep,
@@ -14427,10 +14480,10 @@ const Header = props => {
     }, `wizardHeaderStep-${step.id}`))
   });
 };
-Header.defaultProps = {
+Header$1.defaultProps = {
   allStepsCompleted: false
 };
-Header.propTypes = {
+Header$1.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.any.isRequired,
     title: PropTypes.string.isRequired,
@@ -14441,7 +14494,7 @@ Header.propTypes = {
 };
 
 // Copyright (c) 2022 HelioCampus Inc., all rights reserved.
-const useStyles$4 = makeStyles(theme => ({
+const useStyles$D = makeStyles(theme => ({
   container: {
     position: "absolute",
     overflowY: "auto",
@@ -14502,7 +14555,7 @@ const bottomBarStyle = {
 
 const WizardPanel = props => {
   var _props$panels;
-  const classes = useStyles$4();
+  const classes = useStyles$D();
   const containerRef = useRef();
   const [activeStep, setActiveStep] = useState(0);
   const [finalStep, setFinalStep] = useState(false);
@@ -14551,7 +14604,7 @@ const WizardPanel = props => {
       className: scrollTrigger ? classes.scrolledTabBar : classes.tabBar,
       elevation: 0,
       color: "default",
-      children: /*#__PURE__*/jsx(Header, {
+      children: /*#__PURE__*/jsx(Header$1, {
         data: props.panels,
         activeStep: activeStep,
         allStepsCompleted: props.completed || isCompleting ? true : false
@@ -14748,12 +14801,12 @@ const {
   useSelectState: useSelectFormState,
   useSetState: useSetFormState,
   withStore: withFormStore,
-  StoreProvider: StoreProvider$1
+  StoreProvider
 } = createComponentStore({
   formData: {}
 });
 
-const useStyles$3 = makeStyles(theme => ({
+const useStyles$E = makeStyles(theme => ({
   button: {
     margin: theme.spacing(1)
   },
@@ -14778,7 +14831,7 @@ const FormButtons = ({
   onReset,
   onDelete
 }) => {
-  const classes = useStyles$3();
+  const classes = useStyles$E();
   const setFormState = useSetFormState();
   let renderSaveButton = () => /*#__PURE__*/jsx(Button, {
     variant: "contained",
@@ -14928,7 +14981,7 @@ const withEmptyValue = Component => {
   });
 };
 
-const windowKeys = Object.keys(window).filter(key => {
+const windowKeys$1 = Object.keys(window).filter(key => {
   try {
     Function.apply(null, [key, "return;"]);
     return true;
@@ -14950,14 +15003,18 @@ const safeEval = (code, context, options) => {
   const keys = Object.keys(context);
 
   // TODO: optimize
-  const allParams = keys.concat(windowKeys, [`"use strict"; return ${code}`]);
+  const allParams = keys.concat(windowKeys$1, [`"use strict"; return ${code}`]);
   try {
     const fn = Function.apply(null, allParams);
     const params = keys.map(key => context[key]);
     const res = fn.apply(null, params);
     return res;
   } catch (e) {
-    options == null ? void 0 : options.fallback == null ? void 0 : options.fallback(e);
+    (options == null ? void 0 : options.fallback == null ? void 0 : options.fallback(e)) || console.log("Eval Error : ", e, {
+      code,
+      context,
+      options
+    });
   }
 };
 const lazyEval = (code, context) => {
@@ -14973,7 +15030,7 @@ const {
   useSelectState: useSelectFieldState,
   useSetState: useSetFieldState,
   withStore: withFieldStore,
-  StoreProvider
+  StoreProvider: StoreProvider$1
 } = createComponentStore({
   errorMessage: undefined,
   showError: undefined
@@ -15209,8 +15266,8 @@ ToggleButtonWidget.propTypes = {
   label: PropTypes.any
 };
 ToggleButtonWidget.defaultProps = {};
-const HOCs$d = [...commonWidgetHOCs];
-var ToggleButtonWidget$1 = compose(HOCs$d)(ToggleButtonWidget);
+const HOCs = [...commonWidgetHOCs];
+var ToggleButtonWidget$1 = compose(HOCs)(ToggleButtonWidget);
 
 const DefaultReadOnly = props => {
   return /*#__PURE__*/jsxs(Fragment, {
@@ -15262,8 +15319,8 @@ const withReadyOnly = (ReadOnlyComponent = DefaultReadOnly, options = {
   };
 };
 
-const _excluded$2 = ["value", "inputValue", "onChange", "options", "defaultValue", "onCreateOption", "onDebouncedInputChange", "loading", "status", "optionKey", "createOptionItem", "loadingCreateOption", "onOpen", "createOptionStatus", "disableArrowIcon", "searchCharacterLimit"];
-const useStyles$2 = makeStyles(theme => ({
+const _excluded$h = ["value", "inputValue", "onChange", "options", "defaultValue", "onCreateOption", "onDebouncedInputChange", "loading", "status", "optionKey", "createOptionItem", "loadingCreateOption", "onOpen", "createOptionStatus", "disableArrowIcon", "searchCharacterLimit"];
+const useStyles$F = makeStyles(theme => ({
   expand: {
     transform: "rotate(180deg)",
     marginLeft: "auto",
@@ -15322,10 +15379,10 @@ const AutoCompleteBase = /*#__PURE__*/forwardRef(function AutoCompleteBase(props
       disableArrowIcon,
       searchCharacterLimit = 0
     } = props,
-    restOfProps = _objectWithoutPropertiesLoose(props, _excluded$2);
-  const classes = useStyles$2();
+    restOfProps = _objectWithoutPropertiesLoose(props, _excluded$h);
+  const classes = useStyles$F();
   const [value, setValue] = useState(defaultValue || valueProp || []);
-  const [inputValue, setInputValue] = useState(inputValueProp);
+  const [inputValue, setInputValue] = useState( inputValueProp);
   const [open, setOpen] = useState(props.open || false);
   useEffect(() => {
     setInputValue(inputValueProp);
@@ -15767,8 +15824,8 @@ BadgeKeywordField.propTypes = {
   isReadOnly: PropTypes.bool,
   disabled: PropTypes.bool
 };
-const HOCs$c = [...commonFieldHOCs, withReadyOnly(BadgeKeywordFieldReadOnly)];
-var BadgeKeywordField$1 = compose(HOCs$c)(BadgeKeywordField);
+const HOCs$1 = [...commonFieldHOCs, withReadyOnly(BadgeKeywordFieldReadOnly)];
+var BadgeKeywordField$1 = compose(HOCs$1)(BadgeKeywordField);
 
 const ReadOnlyView = ({
   label,
@@ -15859,7 +15916,50 @@ const useSelector = (selector, defaultValue) => {
   }, [value]);
 };
 
-const BusinessObjectPickerMemoized = /*#__PURE__*/React.memo(BusinessObjectPicker);
+// https://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it/7394787#7394787
+const decodeHtml = html => {
+  const textarea = document.createElement("textarea");
+  textarea.innerHTML = html;
+  return textarea.value;
+};
+
+const render$2 = (value, formState) => {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  return mustache.render(value, formState);
+};
+const renderUrl = (value, formState) => {
+  if (value === undefined || value === null) {
+    return value;
+  }
+  return decodeHtml(mustache.render(value, formState));
+};
+const useRenderUrl = template => useSelectFormState(state => renderUrl(template, state));
+const useRender = template => useSelectFormState(state => render$2(template, state));
+
+const useQueryTemplateParam = queryTemplate => {
+  const selector = useCallback(state => {
+    const query = render$2(queryTemplate, state);
+    const o = qs.parse(query);
+    Object.keys(o).forEach(key => {
+      if (o[key] === "" || o[key] == undefined) {
+        delete o[key];
+      }
+    });
+    return JSON.stringify(o);
+  }, [queryTemplate]);
+  const queryParams = useSelectFormState(selector);
+  const object = useMemo(() => JSON.parse(queryParams), [queryParams]);
+  return object;
+};
+
+const BusinessObjectPickerMemoized = /*#__PURE__*/React.memo(BusinessObjectPicker$1);
+const useQueryParam = uiSchema => {
+  const queryParamsSelected = useSelector(uiSchema["select:queryParams"]);
+  const queryParamFromTemplate = useQueryTemplateParam(uiSchema.queryTemplate);
+  return queryParamFromTemplate || queryParamsSelected;
+};
 const BusinessObjectPickerFieldReadOnly = ({
   formData: formDataProp,
   schema,
@@ -15888,12 +15988,12 @@ const BusinessObjectPickerField = ({
   required
 }) => {
   const formData = formDataProp || emptyArray;
-  const queryParamsSelected = useSelector(uiSchema["select:queryParams"]);
   const value = schema.type === "object" && isEmpty(formData) ? undefined : formData;
   const {
     error
   } = useFormControl();
   const label = uiSchema["ui:placeholder"] || schema.title;
+  const query = useQueryParam(uiSchema);
   return /*#__PURE__*/jsx(BusinessObjectPickerMemoized, _extends({
     error: error,
     value: value,
@@ -15903,7 +16003,7 @@ const BusinessObjectPickerField = ({
     onChange: onChange,
     required: required
   }, uiSchema == null ? void 0 : uiSchema["ui:props"], {
-    parameters: queryParamsSelected
+    parameters: query
   }));
 };
 BusinessObjectPickerField.propTypes = {
@@ -15917,19 +16017,19 @@ BusinessObjectPickerField.propTypes = {
   onChange: PropTypes.func
 };
 BusinessObjectPickerField.defaultProps = {};
-const HOCs$b = [...commonFieldHOCs, withReadyOnly(BusinessObjectPickerFieldReadOnly)];
-var BusinessObjectPickerField$1 = compose(HOCs$b)(BusinessObjectPickerField);
+const HOCs$2 = [...commonFieldHOCs, withReadyOnly(BusinessObjectPickerFieldReadOnly)];
+var BusinessObjectPickerField$1 = compose(HOCs$2)(BusinessObjectPickerField);
 
-const _excluded$1 = ["minimumDate", "maximumDate"],
-  _excluded2 = ["minimumDate", "maximumDate"];
-const getDate$1 = dateStr => {
+const _excluded$i = ["minimumDate", "maximumDate"],
+  _excluded2$1 = ["minimumDate", "maximumDate"];
+const getDate = dateStr => {
   try {
     return dateStr ? new Date(dateStr).toLocaleDateString("en-US") : undefined;
   } catch (e) {
     return dateStr;
   }
 };
-const DateSelectReadOnly$2 = props => {
+const DateSelectReadOnly = props => {
   const {
     startDate,
     endDate
@@ -15958,7 +16058,7 @@ const DateSelectReadOnly$2 = props => {
             sx: {
               marginRight: 1
             }
-          }), getDate$1(startDate) || "N/A"]
+          }), getDate(startDate) || "N/A"]
         })
       })]
     }), /*#__PURE__*/jsxs(Grid, {
@@ -15981,7 +16081,7 @@ const DateSelectReadOnly$2 = props => {
             sx: {
               marginRight: 1
             }
-          }), getDate$1(endDate) || "N/A"]
+          }), getDate(endDate) || "N/A"]
         })
       })]
     })]
@@ -16016,13 +16116,13 @@ const DateRangeField = ({
       minimumDate: startDateMinDate,
       maximumDate: startDateMaxDate
     } = _ref,
-    startDateProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+    startDateProps = _objectWithoutPropertiesLoose(_ref, _excluded$i);
   const _ref2 = (uiSchema == null ? void 0 : uiSchema["ui:endDateProps"]) || {},
     {
       minimumDate: endDateMinDate,
       maximumDate: endDateMaxDate
     } = _ref2,
-    endDateProps = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+    endDateProps = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
   const {
     error
   } = useFormControl();
@@ -16066,8 +16166,8 @@ DateRangeField.propTypes = {
   required: PropTypes.bool,
   value: PropTypes.any
 };
-const HOCs$a = [...commonFieldHOCs, withReadyOnly(DateSelectReadOnly$2)];
-var DateRangeField$1 = compose(HOCs$a)(DateRangeField);
+const HOCs$3 = [...commonFieldHOCs, withReadyOnly(DateSelectReadOnly)];
+var DateRangeField$1 = compose(HOCs$3)(DateRangeField);
 
 const useReadOnly = uiSchema => {
   const code = uiSchema == null ? void 0 : uiSchema["eval:readonly"];
@@ -16152,7 +16252,7 @@ DateSelectReadOnly$1.propTypes = {
 };
 
 // INFO: It overrides styles from from legacy aefis project
-const dateInputStyles = {
+const dateInputStyles$1 = {
   "> div > input ": {
     cursor: "text !important",
     backgroundColor: "unset !important"
@@ -16287,7 +16387,7 @@ const DateSelect = props => {
           inputProps: _extends({}, params.inputProps, {
             type: "text"
           }),
-          sx: dateInputStyles
+          sx: dateInputStyles$1
         })),
         minDate: minDate,
         maxDate: maxDate
@@ -16330,28 +16430,6 @@ const DisableWrapper = ({
   }));
 };
 
-// https://stackoverflow.com/questions/7394748/whats-the-right-way-to-decode-a-string-that-has-special-html-entities-in-it/7394787#7394787
-const decodeHtml$2 = html => {
-  const textarea = document.createElement("textarea");
-  textarea.innerHTML = html;
-  return textarea.value;
-};
-
-const render = (value, formState) => {
-  if (value === undefined || value === null) {
-    return value;
-  }
-  return mustache.render(value, formState);
-};
-const renderUrl = (value, formState) => {
-  if (value === undefined || value === null) {
-    return value;
-  }
-  return decodeHtml$2(mustache.render(value, formState));
-};
-const useRenderUrl = template => useSelectFormState(state => renderUrl(template, state));
-const useRender = template => useSelectFormState(state => render(template, state));
-
 const ImageUploadReadOnly = ({
   formData,
   schema,
@@ -16432,7 +16510,7 @@ const Upload = props => {
   const inputProps = uiSchema == null ? void 0 : uiSchema["ui:props"];
   const documentName = useRender(documentNameTemplate);
   const downloadUrl = useRenderUrl(downloadUrlTemplate);
-  useRender(extensionTemplate);
+  const extension = useRender(extensionTemplate);
   const [files, setFiles] = useState([]);
   const uploadUrl = useMemo(() => getDataSourceUrl(uploadDataSource), [uploadDataSource]);
 
@@ -16551,8 +16629,8 @@ Upload.propTypes = {
   acceptedFileTypes: PropTypes.array
 };
 
-const HOCs$9 = [...commonFieldHOCs];
-var UploadField = compose(HOCs$9)(Upload);
+const HOCs$4 = [...commonFieldHOCs];
+var UploadField = compose(HOCs$4)(Upload);
 
 const renderUserIcon = userType => {
   let iconButton;
@@ -16908,8 +16986,8 @@ const LinkUserFieldReadOnly = props => {
     })]
   });
 };
-const HOCs$8 = [...commonFieldHOCs, withReadyOnly(LinkUserFieldReadOnly)];
-var LinkUserField$1 = compose(HOCs$8)(LinkUserField);
+const HOCs$5 = [...commonFieldHOCs, withReadyOnly(LinkUserFieldReadOnly)];
+var LinkUserField$1 = compose(HOCs$5)(LinkUserField);
 
 const withEvalDisable = () => Component => {
   const MemoizedComponent = /*#__PURE__*/React.memo(Component);
@@ -16966,7 +17044,7 @@ const SelectFieldLoading = props => {
         },
         name: props.schema.title,
         displayEmpty: false,
-        children: [renderPlaceHolder$1(props.placeholder, status), initialLabel && /*#__PURE__*/jsx(MenuItem, {
+        children: [renderPlaceHolder(props.placeholder, status), initialLabel && /*#__PURE__*/jsx(MenuItem, {
           value: "loading",
           children: initialLabel
         }, "loading")]
@@ -17060,7 +17138,7 @@ const decodeHtml$1 = html => {
   textarea.innerHTML = html;
   return textarea.value;
 };
-const renderPlaceHolder$1 = (placeholder, status) => {
+const renderPlaceHolder = (placeholder, status) => {
   if (status === "loading") {
     return /*#__PURE__*/jsx(MenuItem, {
       value: "none",
@@ -17078,7 +17156,7 @@ const renderPlaceHolder$1 = (placeholder, status) => {
 };
 const useQueryParam$1 = queryTemplate => {
   const selector = useCallback(state => {
-    const query = render(queryTemplate, state);
+    const query = render$2(queryTemplate, state);
     const o = qs.parse(query);
     Object.keys(o).forEach(key => {
       if (o[key] === "" || o[key] == undefined) {
@@ -17197,7 +17275,7 @@ const SelectField = props => {
       name: props.schema.title,
       displayEmpty: false,
       disabled: props.disabled,
-      children: [renderPlaceHolder$1(props.placeholder, status), !props.required && !isMultiple && /*#__PURE__*/jsx(MenuItem, {
+      children: [renderPlaceHolder(props.placeholder, status), !props.required && !isMultiple && /*#__PURE__*/jsx(MenuItem, {
         value: emptyValue === undefined ? "" : emptyValue,
         children: /*#__PURE__*/jsx("em", {
           children: "None"
@@ -17228,8 +17306,8 @@ SelectField.propTypes = {
   value: PropTypes.any,
   disabled: PropTypes.any
 };
-const HOCs$7 = [...commonWidgetHOCs, withEvalDisable()];
-var SelectField$1 = compose(HOCs$7)(SelectField);
+const HOCs$6 = [...commonWidgetHOCs, withEvalDisable()];
+var SelectField$1 = compose(HOCs$6)(SelectField);
 
 // TODO: refactor usage of readonly
 // use the similar usage on each implementation
@@ -17303,7 +17381,7 @@ const useProcessCondition = formState => {
   return newFormState;
 };
 
-const useStyles$1 = makeStyles$1(theme => ({
+const useStyles$G = makeStyles$1(theme => ({
   fab: {
     margin: theme.spacing(1)
   },
@@ -17362,7 +17440,7 @@ const renderElement = (element, elementIndex, disabled) => {
             children: /*#__PURE__*/jsx(IconButton$1, {
               onClick: element.onDropIndexClick(element.index),
               "aria-label": "Delete",
-              children: /*#__PURE__*/jsx(Delete$1, {
+              children: /*#__PURE__*/jsx(Delete, {
                 style: {
                   color: "#B94A48"
                 }
@@ -17375,7 +17453,7 @@ const renderElement = (element, elementIndex, disabled) => {
   }, element.key);
 };
 const renderAddButton = props => {
-  const classes = useStyles$1();
+  const classes = useStyles$G();
   return /*#__PURE__*/jsx("div", {
     className: "row",
     children: /*#__PURE__*/jsx("p", {
@@ -17450,12 +17528,12 @@ ArrayTemplateWithReadOnly.propTypes = {
   items: PropTypes.any,
   schema: PropTypes.any
 };
-const HOCs$6 = [withReadyOnly(ArrayTemplateWithReadOnly)];
-var ArrayFieldTemplate$1 = compose(HOCs$6)(ArrayFieldTemplate);
+const HOCs$7 = [withReadyOnly(ArrayTemplateWithReadOnly)];
+var ArrayFieldTemplate$1 = compose(HOCs$7)(ArrayFieldTemplate);
 
 // export default withReadyOnly(ArrayFieldTemplate, ArrayTemplateWithReadOnly);
 
-const useStyles = makeStyles$1(theme => ({
+const useStyles$H = makeStyles$1(theme => ({
   titleContainer: {
     paddingBottom: theme.spacing(4)
   },
@@ -17472,7 +17550,7 @@ const useStyles = makeStyles$1(theme => ({
 }));
 const ObjectFieldTemplate = props => {
   const isReadOnly = useReadOnly();
-  const classes = useStyles();
+  const classes = useStyles$H();
   let totalMdSize = 0;
   const calculateHiddenSize = () => {
     const result = (12 - totalMdSize) % 12;
@@ -17564,15 +17642,15 @@ const transformErrors = errors => {
   return newErrors;
 };
 
-const getDate = dateStr => {
+const getDate$1 = dateStr => {
   try {
     return dateStr ? new Date(dateStr).toLocaleDateString("en-US") : undefined;
   } catch (e) {
     return dateStr;
   }
 };
-const DateSelectReadOnly = props => {
-  const value = getDate(props.formData || props.value);
+const DateSelectReadOnly$2 = props => {
+  const value = getDate$1(props.formData || props.value);
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsx(Typography, {
       gutterBottom: true,
@@ -17621,10 +17699,10 @@ DateWidgetRaw.propTypes = {
   required: PropTypes.bool,
   value: PropTypes.any
 };
-const HOCs$5 = [...commonWidgetHOCs, withReadyOnly(DateSelectReadOnly)];
-const DateWidget = compose(HOCs$5)(DateWidgetRaw);
+const HOCs$8 = [...commonWidgetHOCs, withReadyOnly(DateSelectReadOnly$2)];
+const DateWidget = compose(HOCs$8)(DateWidgetRaw);
 
-const getError$1 = errors => {
+const getError = errors => {
   if (errors) {
     return errors.map(info => /*#__PURE__*/jsx(FormHelperText, {
       style: {
@@ -17639,9 +17717,9 @@ const getError$1 = errors => {
   return null;
 };
 
-const _excluded = ["inputRef"];
+const _excluded$j = ["inputRef"];
 const TextMaskCustom = /*#__PURE__*/forwardRef((props, ref) => {
-  const other = _objectWithoutPropertiesLoose(props, _excluded);
+  const other = _objectWithoutPropertiesLoose(props, _excluded$j);
   const placeholderChar = "\u2000";
   const pipe = (conformedValue, config) => {
     var indexes = [1, 2, 3, 6, 7, 8, 10, 11, 12, 13];
@@ -17697,7 +17775,7 @@ const PhoneWidget = props => {
       },
       type: schema.format,
       placeholder: schema.placeholder
-    }), getError$1(rawErrors)]
+    }), getError(rawErrors)]
   });
 };
 PhoneWidget.propTypes = {
@@ -17746,15 +17824,15 @@ const PhoneWidgetReadOnly = props => {
     })]
   });
 };
-const HOCs$4 = [...commonWidgetHOCs, withReadyOnly(PhoneWidgetReadOnly)];
-var PhoneWidget$1 = compose(HOCs$4)(PhoneWidget);
+const HOCs$9 = [...commonWidgetHOCs, withReadyOnly(PhoneWidgetReadOnly)];
+var PhoneWidget$1 = compose(HOCs$9)(PhoneWidget);
 
-const decodeHtml = html => {
+const decodeHtml$2 = html => {
   const textarea = document.createElement("textarea");
   textarea.innerHTML = html;
   return textarea.value;
 };
-const renderPlaceHolder = (placeholder, status) => {
+const renderPlaceHolder$1 = (placeholder, status) => {
   if (status === "loading") {
     return /*#__PURE__*/jsx(MenuItem, {
       value: "none",
@@ -17770,9 +17848,9 @@ const renderPlaceHolder = (placeholder, status) => {
     });
   }
 };
-const useQueryParam = queryTemplate => {
+const useQueryParam$2 = queryTemplate => {
   const selector = useCallback(state => {
-    const query = render(queryTemplate, state);
+    const query = render$2(queryTemplate, state);
     const o = qs.parse(query);
     Object.keys(o).forEach(key => {
       if (o[key] === "" || o[key] == undefined) {
@@ -17788,7 +17866,7 @@ const SelectWidget = props => {
   var _props$uiSchema, _props$uiSchema2, _props$value;
   const formState = useSelectFormState(state => state);
   const datasource = (_props$uiSchema = props.uiSchema) == null ? void 0 : _props$uiSchema.dataSource;
-  const query = useQueryParam(props.uiSchema.queryTemplate);
+  const query = useQueryParam$2(props.uiSchema.queryTemplate);
   const {
     status,
     data
@@ -17822,7 +17900,7 @@ const SelectWidget = props => {
       // "template": "{ \"id\": {{id}}, \"name\": \"{{name}}\" }",
       if (template) {
         const rendered = mustache.render(template, option);
-        o = JSON.parse(decodeHtml(rendered));
+        o = JSON.parse(decodeHtml$2(rendered));
       }
       const id = idTemplate && mustache.render(idTemplate, option);
       const label = optionTemplate && mustache.render(optionTemplate, option);
@@ -17861,7 +17939,7 @@ const SelectWidget = props => {
       onChange: event => props.onChange(event.target.value),
       name: props.schema.title,
       displayEmpty: false,
-      children: [renderPlaceHolder(props.placeholder, status), !props.required && /*#__PURE__*/jsx(MenuItem, {
+      children: [renderPlaceHolder$1(props.placeholder, status), !props.required && /*#__PURE__*/jsx(MenuItem, {
         value: emptyValue === undefined ? "" : emptyValue,
         children: /*#__PURE__*/jsx("em", {
           children: "None"
@@ -17895,10 +17973,10 @@ SelectWidget.propTypes = {
   value: PropTypes.any,
   disabled: PropTypes.any
 };
-const HOCs$3 = [...commonWidgetHOCs, withReadyOnly(undefined, {
+const HOCs$a = [...commonWidgetHOCs, withReadyOnly(undefined, {
   preventDefault: true
 }), withEvalDisable()];
-var SelectWidget$1 = compose(HOCs$3)(SelectWidget);
+var SelectWidget$1 = compose(HOCs$a)(SelectWidget);
 
 /**
  * TODO:
@@ -17973,8 +18051,8 @@ TextareaWidget.propTypes = {
   }),
   value: PropTypes.string
 };
-const HOCs$2 = [...commonWidgetHOCs, withReadyOnly(TextareaWidgetReadOnly)];
-var TextareaWidget$1 = compose(HOCs$2)(TextareaWidget);
+const HOCs$b = [...commonWidgetHOCs, withReadyOnly(TextareaWidgetReadOnly)];
+var TextareaWidget$1 = compose(HOCs$b)(TextareaWidget);
 
 const TextWidgetReadOnly = props => /*#__PURE__*/jsx(ReadOnlyView, {
   label: props.schema.title,
@@ -18050,10 +18128,10 @@ TextWidget.propTypes = {
   }),
   value: PropTypes.any
 };
-const HOCs$1 = [...commonWidgetHOCs, withReadyOnly(TextWidgetReadOnly), withEvalDisable()];
-var TextWidget$1 = compose(HOCs$1)(TextWidget);
+const HOCs$c = [...commonWidgetHOCs, withReadyOnly(TextWidgetReadOnly), withEvalDisable()];
+var TextWidget$1 = compose(HOCs$c)(TextWidget);
 
-const getError = errors => {
+const getError$1 = errors => {
   if (errors) {
     return errors.map(info => /*#__PURE__*/jsx(FormHelperText, {
       style: {
@@ -18161,7 +18239,7 @@ const ValidateWidget = props => {
       type: schema.format,
       placeholder: schema.placeholder,
       helperText: validationResultText
-    }), getError(rawErrors)]
+    }), getError$1(rawErrors)]
   });
 };
 ValidateWidget.propTypes = {
@@ -18407,8 +18485,8 @@ DynamicForm.propTypes = {
   /** renders bottom of form */
   renderBottom: PropTypes.func
 };
-const HOCs = [withFormStore, withSubmitListener];
-var DynamicForm$1 = compose(HOCs)(DynamicForm);
+const HOCs$d = [withFormStore, withSubmitListener];
+var DynamicForm$1 = compose(HOCs$d)(DynamicForm);
 
 const DynamicFormHooks = {
   useSelectFormState,
@@ -18416,5 +18494,5 @@ const DynamicFormHooks = {
   useReadOnly
 };
 
-export { Actions$1 as Actions, Alert, AvatarBox, AvatarTitle, BusinessObject, BusinessObjectCard, EmptyCardSection as BusinessObjectCardEmptySection, CardSection as BusinessObjectCardSection, CardSectionTitle as BusinessObjectCardSectionTitle, BusinessObjectPanel, Header$1 as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ContentBox, CurriculumChart, DataTable, DatePickerBase as DatePicker, DisplayInFrame, DocViewer, Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableText, FilterPanel, FilterChips$1 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FullPageViewer, Icon$1 as Icon, Image, IsometricImage, List, ListItem, ListItemGroup, MenuButton, ModalDialog, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable, RubricLegend, RubricScoreSlider, ScrollToTopButton, ScrollingContainer, SkeletonContent, StatBoxes, StatusMessage, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, Timeline, TitleAndActionHeader, TitleAndDescription, UserAvatar, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
+export { Actions, Alert, AvatarBox, AvatarTitle, BusinessObject, BusinessObjectCard, EmptyCardSection$1 as BusinessObjectCardEmptySection, CardSection$1 as BusinessObjectCardSection, CardSectionTitle$1 as BusinessObjectCardSectionTitle, BusinessObjectPanel, Header as BusinessObjectPanelHeader, Section as BusinessObjectPanelSection, SectionTitle as BusinessObjectPanelSectionTitle, BusinessObjectPicker$1 as BusinessObjectPicker, BusinessObjectStatus, BusinessObjectStatusButton, BusinessObjectTable, Button, Chip, ContentBox, CurriculumChart, DataTable, DatePickerBase as DatePicker, DisplayInFrame, DocViewer, Drawer, DynamicForm$1 as DynamicForm, BusinessObjectPickerField$1 as DynamicFormBusinessObjectPickerField, DynamicFormHooks, EditableText, FilterPanel, FilterChips$1 as FilterPanelFilterChips, mapFilters as FilterPanelMapFilters, FullPageViewer, Icon, Image, IsometricImage, List, ListItem$1 as ListItem, ListItemGroup, MenuButton, ModalDialog, Notification, OutcomeSpace, PanelDrawer, ProgressChart, RichDataTable, RubricLegend, RubricScoreSlider, ScrollToTopButton, ScrollingContainer, SkeletonContent, StatBoxes, StatusMessage, SvgImage, SwipeableTabPanel, Content as SwipeableTabPanelContent, Timeline, TitleAndActionHeader, TitleAndDescription, UserAvatar, WizardPanel, businessObjectColor, businessObjectConfiguration, businessObjectIcon, createComponentEvent, createEvent, createComponentStore as createStore, dataSourceManager, filterSortData, getBaseUrl, getConfiguration, getDataSourceUrl, http, outcomeSpaceColor, outcomeSpaceTypeFromSource, registerDataSource, registerDataSources, setDataSourceConfiguration, template, useComponentWillMount, useDataSourceInfiniteQuery, useDataSourceMutation, useDataSourceQuery, useDataSourceUrl, useDebounceCallback, useNotify, useRefDimensions, withStatusButtonDataSource };
 //# sourceMappingURL=index.modern.js.map