@dexteel/mesf-core 4.16.1 → 4.16.6

package/dist/index.esm.js

@@ -1,37 +1,28 @@
 export { LicenseManager } from 'ag-grid-enterprise';
-import { Typography, Checkbox, TextField, makeStyles as makeStyles$1, Button as Button$1, Grid as Grid$1, Dialog as Dialog$1, DialogTitle as DialogTitle$2, DialogContent as DialogContent$2, DialogContentText, DialogActions as DialogActions$2, FormHelperText, CircularProgress as CircularProgress$1, Badge, FormControlLabel, Snackbar as Snackbar$1, Paper as Paper$1, MenuItem as MenuItem$1, useTheme as useTheme$1, IconButton as IconButton$1, Tooltip as Tooltip$1, Divider, Box, FormControl as FormControl$1, Select as Select$1, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
+import { withStyles, alpha, makeStyles, Dialog, DialogTitle as DialogTitle$1, DialogContent as DialogContent$1, DialogActions as DialogActions$1, Button, SvgIcon, Collapse, Typography, Checkbox, Grid, TextField, MenuItem, Select, Card, CardContent, CardActions, DialogContentText, Snackbar, CircularProgress, Paper, InputLabel, FormHelperText, Badge, FormControlLabel, useTheme, FormControl, Input, Chip, Tooltip, IconButton as IconButton$1, MenuList, Divider, Box, debounce, createStyles as createStyles$1, List, ListItem, ListItemText } from '@material-ui/core';
 import { values, get, isNil as isNil$1, isEmpty, round, isNaN, isNumber } from 'lodash-es';
 import * as React from 'react';
 import React__default, { useState, useRef, useEffect, useMemo, Component, createContext, useContext, useCallback, lazy, Suspense } from 'react';
-import Paper from '@material-ui/core/Paper';
-import Grid from '@material-ui/core/Grid';
 import { ArrowRight, ArrowBackRounded, ArrowForwardRounded, SkipNext, ChevronLeft, ChevronRight } from '@material-ui/icons';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker/DatePicker';
-import Tooltip from '@material-ui/core/Tooltip';
 import { Outlet, useParams, useNavigate, useSearchParams, Link, Navigate, Routes, Route, BrowserRouter } from 'react-router-dom';
 import { Alert as Alert$1, Modal as Modal$1, Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';
-import DialogTitle$1 from '@material-ui/core/DialogTitle';
-import DialogContent$1 from '@material-ui/core/DialogContent';
-import DialogActions$1 from '@material-ui/core/DialogActions';
-import Dialog from '@material-ui/core/Dialog';
-import Button from '@material-ui/core/Button';
 import { useMsal, MsalProvider } from '@azure/msal-react';
 import { LogLevel, PublicClientApplication } from '@azure/msal-browser';
 import { useComplexState } from 'use-complex-state';
 import { createSlice } from '@reduxjs/toolkit';
 import ShowChartIcon from '@material-ui/icons/ShowChart';
-import MenuItem from '@material-ui/core/MenuItem';
-import MenuList from '@material-ui/core/MenuList';
 import { isNil, get as get$1 } from 'lodash';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import moment$2 from 'moment';
 import axios from 'axios';
-import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$2, Legend, TimeScale } from 'chart.js';
+import { _adapters, Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip as Tooltip$1, Legend, TimeScale } from 'chart.js';
 import zoomPlugin from 'chartjs-plugin-zoom';
 import SaveIcon from '@material-ui/icons/Save';
 import LockIcon from '@material-ui/icons/Lock';
 import { Alert as Alert$3, Autocomplete } from '@material-ui/lab';
+import Button$1 from '@material-ui/core/Button';
 import Popover from '@material-ui/core/Popover';
 import CreateIcon from '@material-ui/icons/Create';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -47,33 +38,23 @@ import moment$3 from 'moment-timezone';
 import PersonPinCircleIcon from '@material-ui/icons/PersonPinCircle';
 import PropTypes from 'prop-types';
 import { ResponsiveBar } from '@nivo/bar';
-import Select from '@material-ui/core/Select';
-import { withStyles, alpha, makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
-import Collapse from '@material-ui/core/Collapse';
-import SvgIcon from '@material-ui/core/SvgIcon';
 import Code from '@material-ui/icons/Code';
 import TreeItem from '@material-ui/lab/TreeItem';
 import TreeView from '@material-ui/lab/TreeView';
 import { useSpring, animated } from 'react-spring';
 import AccountTreeIcon from '@material-ui/icons/AccountTree';
 import { DataGrid, GridOverlay } from '@material-ui/data-grid';
-import Card from '@material-ui/core/Card';
-import CardActions from '@material-ui/core/CardActions';
-import CardContent from '@material-ui/core/CardContent';
-import Typography$1 from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import CircularProgress from '@material-ui/core/CircularProgress';
 import Alert$2 from '@material-ui/lab/Alert';
 import { AgGridReact } from 'ag-grid-react';
 import FormatListBulletedSharpIcon from '@material-ui/icons/FormatListBulletedSharp';
+import { withStyles as withStyles$1, createStyles } from '@material-ui/core/styles';
+import Dialog$1 from '@material-ui/core/Dialog';
 import IconButton from '@material-ui/core/IconButton';
 import CloseIcon from '@material-ui/icons/Close';
-import TextField$1 from '@material-ui/core/TextField';
+import Typography$1 from '@material-ui/core/Typography';
 import { MuiPickersUtilsProvider, KeyboardDatePicker, KeyboardTimePicker } from '@material-ui/pickers';
 import MomentUtils from '@date-io/moment';
-import InputLabel from '@material-ui/core/InputLabel';
 import { useForm, Controller } from 'react-hook-form';
-import DialogContentText$1 from '@material-ui/core/DialogContentText';
 import EditIcon from '@material-ui/icons/Edit';
 import 'ag-grid-enterprise/styles/ag-grid.css';
 import 'ag-grid-enterprise/styles/ag-theme-balham.min.css';
@@ -86,11 +67,6 @@ import { format, fromZonedTime, formatInTimeZone } from 'date-fns-tz';
 import { findIana } from 'windows-iana';
 import FindInPageIcon from '@material-ui/icons/FindInPage';
 import AddBoxIcon from '@material-ui/icons/AddBox';
-import FormControlLabel$1 from '@material-ui/core/FormControlLabel';
-import Checkbox$1 from '@material-ui/core/Checkbox';
-import Input from '@material-ui/core/Input';
-import FormControl from '@material-ui/core/FormControl';
-import Chip from '@material-ui/core/Chip';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
 
 /******************************************************************************
@@ -382,10 +358,6 @@ var ModalTreeFilterControl = function (props) {
             var expandedBranches = findBranchesWithSelectedNodes(data, listAssetDrawings);
             setExpanded(expandedBranches);
         }
-        else {
-            setSelectedNodes([]);
-            setExpanded([]);
-        }
     }, [listAssetDrawings, data]);
     var findBranchesWithSelectedNodes = function (node, selectedNodes) {
         var branches = [];
@@ -531,7 +503,7 @@ var ModalTreeFilterControl = function (props) {
                 React__default.createElement(TreeView, { className: classes.root, defaultCollapseIcon: React__default.createElement(MinusSquare, null), defaultExpandIcon: React__default.createElement(PlusSquare, null), ref: treeRef, selected: value === undefined ? "" : value.toString(), expanded: expanded, onNodeSelect: handleChange, onNodeToggle: handleToogle }, data && data.id !== undefined && renderTree(data)))),
         React__default.createElement(DialogActions$1, null,
             React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
-            React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "SAVE"))));
+            React__default.createElement(Button, { onClick: handleOk, color: "primary" }, "OK"))));
 };
 
 var useStyles$t = makeStyles(function (theme) { return ({
@@ -910,7 +882,7 @@ var MasterDetailPanel = /** @class */ (function (_super) {
         return (React__default.createElement("div", { className: "pb-2" },
             React__default.createElement(Card, { variant: "outlined" },
                 React__default.createElement(CardContent, null,
-                    React__default.createElement(Typography$1, { gutterBottom: true, variant: "h5", component: "h2" }, this.props.title || ""),
+                    React__default.createElement(Typography, { gutterBottom: true, variant: "h5", component: "h2" }, this.props.title || ""),
                     this.props.children),
                 React__default.createElement(CardActions, { className: "px-3 " },
                     React__default.createElement("button", { className: "btn btn-danger", onClick: this.props.onCancel, disabled: !this.props.saveStatus }, "Cancel"),
@@ -1137,7 +1109,7 @@ var Alert = function (props) {
     return React__default.createElement(Alert$2, __assign({ elevation: 6, variant: "filled" }, props));
 };
 
-var useStyles$s = makeStyles$1(function (theme) { return ({
+var useStyles$s = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -1183,7 +1155,7 @@ var useJobsTableData = function (_a) {
                 height: "100%",
                 padding: 5
             } },
-            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () {
+            React__default.createElement(Button, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () {
                     setRowSelected(params.data);
                 }, disabled: isDisabled }, "ENABLE")));
     };
@@ -1196,7 +1168,7 @@ var useJobsTableData = function (_a) {
                 height: "100%",
                 padding: 5
             } },
-            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "secondary", onClick: function () {
+            React__default.createElement(Button, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "secondary", onClick: function () {
                     setRowSelected(params.data);
                 }, disabled: isDisabled }, "DISABLE")));
     };
@@ -1209,23 +1181,23 @@ var useJobsTableData = function (_a) {
                 height: "100%",
                 padding: 5
             } },
-            React__default.createElement(Button$1, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () {
+            React__default.createElement(Button, { style: { height: "100%", maxHeight: "27px" }, variant: "contained", fullWidth: true, color: "primary", onClick: function () {
                     setRowSelected(params.data);
                 }, disabled: isDisabled }, "RESET")));
     };
     var renderButtonMenu = function (params) {
-        return (React__default.createElement(Grid$1, { container: true, style: {
+        return (React__default.createElement(Grid, { container: true, style: {
                 height: "100%",
                 display: "flex",
                 justifyContent: "center",
                 alignItems: "center"
             }, className: classes.buttons },
-            React__default.createElement(Grid$1, { item: true, xs: 12, md: 12, style: {
+            React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center"
                 } },
-                React__default.createElement(Button$1, { style: {}, onClick: function (e) { return onActionsClick(e, params); } },
+                React__default.createElement(Button, { style: {}, onClick: function (e) { return onActionsClick(e, params); } },
                     React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
     };
     var columnDefs = [
@@ -1392,7 +1364,7 @@ var styles = function (theme) {
         }
     });
 };
-var DialogTitle = withStyles(styles)(function (props) {
+var DialogTitle = withStyles$1(styles)(function (props) {
     var children = props.children, classes = props.classes, onClose = props.onClose, other = __rest(props, ["children", "classes", "onClose"]);
     return (React__default.createElement(DialogTitle$1, __assign({ disableTypography: true, style: {
             display: "flex",
@@ -1404,14 +1376,14 @@ var DialogTitle = withStyles(styles)(function (props) {
         onClose ? (React__default.createElement(IconButton, { "aria-label": "close", className: classes.closeButton, onClick: onClose },
             React__default.createElement(CloseIcon, null))) : (React__default.createElement(React__default.Fragment, null))));
 });
-var DialogContent = withStyles(function (theme) { return ({
+var DialogContent = withStyles$1(function (theme) { return ({
     root: {
         padding: theme.spacing(2),
         minWidth: 600,
         overflow: 'hidden'
     }
 }); })(DialogContent$1);
-var DialogActions = withStyles(function (theme) { return ({
+var DialogActions = withStyles$1(function (theme) { return ({
     root: {
         margin: 0,
         padding: theme.spacing(1)
@@ -1419,7 +1391,7 @@ var DialogActions = withStyles(function (theme) { return ({
 }); })(DialogActions$1);
 function Modal(_a) {
     var children = _a.children, title = _a.title, handleClose = _a.handleClose, open = _a.open, _b = _a.id, id = _b === void 0 ? "mesf-modal" : _b, _c = _a.maxWidth, maxWidth = _c === void 0 ? "lg" : _c;
-    return (React__default.createElement(Dialog, { onClose: function () { return handleClose(); }, "aria-labelledby": id, open: open, maxWidth: maxWidth, style: { minWidth: 320 } },
+    return (React__default.createElement(Dialog$1, { onClose: function () { return handleClose(); }, "aria-labelledby": id, open: open, maxWidth: maxWidth, style: { minWidth: 320 } },
         React__default.createElement(DialogTitle, { id: id, onClose: function () { return handleClose(); } }, title),
         children));
 }
@@ -1436,9 +1408,9 @@ var ErrorModal = function (_a) {
         React__default.createElement(MesfModal.Content, null,
             React__default.createElement("div", null, error)),
         React__default.createElement(MesfModal.Actions, null,
-            React__default.createElement(Grid$1, { container: true, spacing: 2, justifyContent: "flex-end", style: { padding: "1rem", minWidth: "600px" } },
-                React__default.createElement(Grid$1, { item: true, md: 2, xs: 12 },
-                    React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "default", onClick: function () {
+            React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end", style: { padding: "1rem", minWidth: "600px" } },
+                React__default.createElement(Grid, { item: true, md: 2, xs: 12 },
+                    React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () {
                             onHide();
                         } }, "Ok")))))) : null;
 };
@@ -1473,13 +1445,13 @@ var ResetJob = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Dialog$1, { open: show, onClose: function () { return onHide(false); }, "aria-labelledby": "responsive-dialog-title" },
-            React__default.createElement(DialogTitle$2, { id: "responsive-dialog-title" }, "WARNING"),
-            React__default.createElement(DialogContent$2, null,
+        React__default.createElement(Dialog, { open: show, onClose: function () { return onHide(false); }, "aria-labelledby": "responsive-dialog-title" },
+            React__default.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
+            React__default.createElement(DialogContent$1, null,
                 React__default.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Are you sure you want to reset? This action leaves the task in enable")),
-            React__default.createElement(DialogActions$2, { style: { padding: "16px 24px" } },
-                React__default.createElement(Button$1, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "DISAGREE"),
-                React__default.createElement(Button$1, { onClick: function () {
+            React__default.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
+                React__default.createElement(Button, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "DISAGREE"),
+                React__default.createElement(Button, { onClick: function () {
                         onSubmit();
                     }, disabled: isLoading, variant: "outlined", color: "primary" }, "AGREE"))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
@@ -1512,13 +1484,13 @@ var OnEnableJob = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Dialog$1, { open: show, onClose: function () { return onHide(false); }, "aria-labelledby": "responsive-dialog-title" },
-            React__default.createElement(DialogTitle$2, { id: "responsive-dialog-title" }, "WARNING"),
-            React__default.createElement(DialogContent$2, null,
+        React__default.createElement(Dialog, { open: show, onClose: function () { return onHide(false); }, "aria-labelledby": "responsive-dialog-title" },
+            React__default.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
+            React__default.createElement(DialogContent$1, null,
                 React__default.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Are you sure you want to reset? This action leaves the task in enable")),
-            React__default.createElement(DialogActions$2, { style: { padding: "16px 24px" } },
-                React__default.createElement(Button$1, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "DISAGREE"),
-                React__default.createElement(Button$1, { onClick: function () {
+            React__default.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
+                React__default.createElement(Button, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "DISAGREE"),
+                React__default.createElement(Button, { onClick: function () {
                         onSubmit();
                     }, disabled: isLoading, variant: "outlined", color: "primary" }, "AGREE"))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
@@ -1687,7 +1659,7 @@ var TableJobs = function () {
     }, []);
     return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
         React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.filters },
-            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "System Jobs"),
+            React.createElement(Typography, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "System Jobs"),
             React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                     height: "70vh",
                     border: "4px solid #ccc",
@@ -1818,7 +1790,7 @@ var LOG_TYPE_CODES = [
     { id: "E", description: "Error" },
 ];
 
-var useStyles$q = makeStyles$1(function (theme) { return ({
+var useStyles$q = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -1906,18 +1878,18 @@ var useLogTableData = function () {
         },
         {
             cellRenderer: function (params) {
-                return (React__default.createElement(Grid$1, { container: true, style: {
+                return (React__default.createElement(Grid, { container: true, style: {
                         height: "100%",
                         display: "flex",
                         justifyContent: "center",
                         alignItems: "center"
                     }, className: classes.buttons },
-                    React__default.createElement(Grid$1, { item: true, xs: 12, md: 12, style: {
+                    React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center"
                         } },
-                        React__default.createElement(Button$1, { style: {}, onClick: function (e) { return onActionsClick(e, params); } },
+                        React__default.createElement(Button, { style: {}, onClick: function (e) { return onActionsClick(e, params); } },
                             React__default.createElement(FormatListBulletedSharpIcon, { style: { height: "auto" }, color: "action" })))));
             },
             wrapText: false,
@@ -2010,7 +1982,7 @@ var ModalLogSelected = function (_a) {
             React__default.createElement(Modal$1.Body, { style: { padding: "15px 30px" } },
                 React__default.createElement(Grid, { container: true, spacing: 1, alignItems: "flex-start" },
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField$1
+                        React__default.createElement(TextField
                         // disabled
                         , { 
                             // disabled
@@ -2020,7 +1992,7 @@ var ModalLogSelected = function (_a) {
                                 readOnly: true
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField$1
+                        React__default.createElement(TextField
                         // disabled
                         , { 
                             // disabled
@@ -2030,7 +2002,7 @@ var ModalLogSelected = function (_a) {
                                 readOnly: true
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField$1
+                        React__default.createElement(TextField
                         // disabled
                         , { 
                             // disabled
@@ -2040,7 +2012,7 @@ var ModalLogSelected = function (_a) {
                                 readOnly: true
                             } })),
                     React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingRight: 20, paddingLeft: 5 } },
-                        React__default.createElement(TextField$1
+                        React__default.createElement(TextField
                         // disabled
                         , { 
                             // disabled
@@ -2052,8 +2024,8 @@ var ModalLogSelected = function (_a) {
                     React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingRight: 20, paddingLeft: 5, marginBottom: 20 } },
                         React__default.createElement(Card, { variant: "outlined", style: { backgroundColor: "#E9F2F8" } },
                             React__default.createElement(CardContent, null,
-                                React__default.createElement(Typography$1, { className: classes.messageTitle }, "Message:"),
-                                React__default.createElement(Typography$1, { style: { fontSize: 17 } }, selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Message)))))),
+                                React__default.createElement(Typography, { className: classes.messageTitle }, "Message:"),
+                                React__default.createElement(Typography, { style: { fontSize: 17 } }, selectedLog === null || selectedLog === void 0 ? void 0 : selectedLog.Message)))))),
             React__default.createElement(Modal$1.Footer, { style: { padding: "20px 30px 30px" } },
                 React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                     React__default.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
@@ -2089,7 +2061,7 @@ var CodeFilter = function (_a) {
 var SearchFilter = function (_a) {
     var search = _a.search, setSearch = _a.setSearch;
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(TextField$1, { style: {
+        React__default.createElement(TextField, { style: {
                 minWidth: "100%",
                 margin: "15px 0px",
                 backgroundColor: "#f5f8fa",
@@ -2247,7 +2219,7 @@ var TableLogs = function () {
         return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
             React.createElement(Grid, { item: true, md: 12, xs: 12, className: classes.filters, style: { padding: "0 15px" } },
                 React.createElement(ModalLogSelected, { show: showLogModal, onHide: function () { return setShowLogModal(false); }, selectedLog: selectedLog }),
-                React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "MES and System Logs"),
+                React.createElement(Typography, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "MES and System Logs"),
                 React.createElement(Grid, { container: true, direction: "row", style: { margin: "20px 0 0" } },
                     React.createElement(Grid, { item: true, md: 12, xs: 12 },
                         React.createElement(Card, { className: classes.card },
@@ -2267,7 +2239,7 @@ var TableLogs = function () {
                                         React.createElement(Grid, { item: true, md: 6, xs: 12 },
                                             React.createElement(Button, { variant: "contained", color: "default", onClick: handleResetButtonClick, fullWidth: true }, "Reset")),
                                         React.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                            React.createElement(Button, { fullWidth: true, startIcon: loading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: loading, variant: "contained", color: "primary", type: "submit" }, "Search"))))))),
+                                            React.createElement(Button, { fullWidth: true, startIcon: loading && React.createElement(CircularProgress, { size: "1rem" }), disabled: loading, variant: "contained", color: "primary", type: "submit" }, "Search"))))))),
                     React.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                             height: "55vh",
                             border: "4px solid #ccc",
@@ -2519,7 +2491,7 @@ var CreateProfile = function (_a) {
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                                     React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
         React.createElement(Snackbar, { open: openSnackbar, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "success", onClose: handleClose }, message)),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
@@ -2594,16 +2566,16 @@ var DeleteProfile = function (_a) {
                 React__default.createElement(Dialog, { open: deleteAlert, onClose: function () { return handleClose(); }, "aria-labelledby": "responsive-dialog-title" },
                     React__default.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
                     React__default.createElement(DialogContent$1, null,
-                        React__default.createElement(DialogContentText$1, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this profile, are you sure you want to delete it?")),
+                        React__default.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this profile, are you sure you want to delete it?")),
                     React__default.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
                         React__default.createElement(Button, { onClick: function () { return setDeleteAlert(false); }, autoFocus: true, color: "default" }, "CANCEL"),
-                        React__default.createElement(Button, { startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onDelete(profileForDelete === null || profileForDelete === void 0 ? void 0 : profileForDelete.ProfileId); } }, "Delete"))))),
+                        React__default.createElement(Button, { startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onDelete(profileForDelete === null || profileForDelete === void 0 ? void 0 : profileForDelete.ProfileId); } }, "Delete"))))),
         React__default.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React__default.createElement(Alert, { severity: "success", onClose: handleClose }, "The profile was deleted successfully")),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$m = makeStyles$1(function (theme) { return ({
+var useStyles$m = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -2784,17 +2756,17 @@ var DataTable = function (_a) {
         }); })();
     }, []);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { container: true, md: 12, xs: 12, style: { padding: "0 0 10px", justifyContent: "space-between" } },
-            React__default.createElement(Grid$1, { item: true, md: 12, xs: 12 },
+        React__default.createElement(Grid, { container: true, md: 12, xs: 12, style: { padding: "0 0 10px", justifyContent: "space-between" } },
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                 React__default.createElement(Modal$1.Title, { id: "contained-modal-title-vcenter", style: { width: "100%", fontSize: 20, margin: "5px 0 0" } }, "Actions")),
-            React__default.createElement(Grid$1, { item: true, md: 12, xs: 12 },
+            React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                 React__default.createElement(TextField, { id: "outlined-basic", label: "Search", variant: "outlined", value: filterInput, onChange: handlerFilter, margin: "dense", style: { width: "100%" } }))),
         React__default.createElement("div", { className: "ag-theme-balham", style: { width: "100%", height: "60vh" } },
             React__default.createElement(AgGridReact, { getRowId: function (params) { return params.data.ActionId; }, onGridReady: onGridReady, rowData: rows, columnDefs: columns, defaultColDef: defaultColDef, onFirstDataRendered: onFirstDataRendered, rowSelection: "multiple", rowMultiSelectWithClick: true, onSelectionChanged: onAgGridSelectionChanged })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));
 };
 
-var useStyles$l = makeStyles$1(function (theme) { return ({
+var useStyles$l = makeStyles(function (theme) { return ({
     root: {
         "& .MuiFormLabel-asterisk": {
             display: "none"
@@ -2918,13 +2890,13 @@ var ActionsOfProfile = function (_a) {
                                     }, required: true, error: profileName.length === 0 })))))),
                 React.createElement(Modal$1.Body, { style: { padding: "0 30px 15px" } },
                     isLoading && (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "60px" } },
-                        React.createElement(CircularProgress$1, { size: "3rem" }))),
+                        React.createElement(CircularProgress, { size: "3rem" }))),
                     !error && !isLoading && actionsOfProfile && (React.createElement(DataTable, { actionsOfProfile: actionsOfProfile, onSelectionChanged: setActionsSelected }))),
                 React.createElement(Modal$1.Footer, { style: { padding: "20px 30px 30px" } }, !isLoading && (React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                     React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                         React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                     React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                        React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))),
+                        React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))))),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "info", onClose: handleClose }, "The actions of the profile were edited successfully")),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
@@ -3076,7 +3048,7 @@ var TableProfiles = function (_a) {
     }, [isLoading, rows, gridApi]);
     return (React.createElement(Grid, { container: true, justifyContent: "center" },
         React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
-            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Profile Management")),
+            React.createElement(Typography, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Profile Management")),
         React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
             React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
                 React.createElement(CreateProfile, { show: modalCreateActive, onHide: function (shouldUpdate) {
@@ -3486,7 +3458,7 @@ var CreateShift = function (_a) {
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                                     React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
@@ -3641,7 +3613,7 @@ var DeleteShift = function (_a) {
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                                     React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading
                                             ? isSubmitLoading
                                             : new Date(shiftTableData.PatternStart) <
                                                 new Date() && true, variant: "contained", color: "secondary", onClick: function () { return setDeleteAlert(true); } }, "Delete"),
@@ -3650,10 +3622,10 @@ var DeleteShift = function (_a) {
                         React.createElement(Dialog, { open: deleteAlert, onClose: function () { return handleClose(); }, "aria-labelledby": "responsive-dialog-title" },
                             React.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
                             React.createElement(DialogContent$1, null,
-                                React.createElement(DialogContentText$1, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this shift, are you sure you want to delete it?")),
+                                React.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this shift, are you sure you want to delete it?")),
                             React.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
                                 React.createElement(Button, { onClick: function () { return setDeleteAlert(false); }, autoFocus: true, color: "default" }, "CANCEL"),
-                                React.createElement(Button, { startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onDelete(patternStart); } }, "Delete"))))))),
+                                React.createElement(Button, { startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onDelete(patternStart); } }, "Delete"))))))),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "warning", onClose: handleClose }, "The shift was deleted successfully"))));
@@ -3897,13 +3869,13 @@ var EditShift = function (_a) {
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                                     React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                                 React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
+                                    React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "success", onClose: handleClose }, "The shift was created successfully"))));
 };
 
-var useStyles$g = makeStyles$1(function (theme) { return ({
+var useStyles$g = makeStyles(function (theme) { return ({
     root: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -4142,7 +4114,7 @@ var TableShiftsCrews = function (_a) {
     }, [rows]);
     return (React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
         React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
-            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Shifts / Crew")),
+            React.createElement(Typography, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Shifts / Crew")),
         React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
             React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
                 React.createElement(CreateShift, { show: openModalNew, onHide: function (shouldUpdate) {
@@ -4355,7 +4327,7 @@ var ConfigurationAssetProvider = function (_a) {
     return (React__default.createElement(ConfigurationAssetContext.Provider, { value: { state: state, actions: actions } }, children));
 };
 
-var useStyles$e = makeStyles$1(function (theme) { return ({
+var useStyles$e = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         display: "flex",
@@ -4457,7 +4429,7 @@ var CustomNode = function (_a) {
             React__default.createElement(Typography, { variant: "body2" }, props.node.text))));
 };
 
-var useStyles$d = makeStyles$1(function (theme) { return ({
+var useStyles$d = makeStyles(function (theme) { return ({
     root: {
         alignItems: "flex-start",
         backgroundColor: "#1967d2",
@@ -4500,7 +4472,7 @@ var MultipleDragPreview = function (props) {
         }))));
 };
 
-var useStyles$c = makeStyles$1(function (theme) { return ({
+var useStyles$c = makeStyles(function (theme) { return ({
     root: {
         alignItems: "center",
         backgroundColor: "#1967d2",
@@ -4989,14 +4961,14 @@ var CreateNewAssetDialog = function (_a) {
         }
     }, [show]);
     return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+        React__default.createElement(Dialog, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
             React__default.createElement("form", { onSubmit: handleFormSubmit },
                 React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
                     React__default.createElement(Grid, { container: true, item: true },
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                             React__default.createElement(Typography, { style: { padding: "0 24px 12px", fontSize: 25 } }, "NEW ASSET"))),
                     React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                        React__default.createElement(DialogContent$2, { dividers: true, style: { padding: "10px 24px 0" } },
+                        React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                                 React__default.createElement(Controller, { name: "AssetName", control: control, rules: {
                                         validate: {
@@ -5023,7 +4995,7 @@ var CreateNewAssetDialog = function (_a) {
                                                         }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
                                             } }))))),
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: "15px" } },
-                            React__default.createElement(DialogActions$2, { style: { padding: "0px 24px" } },
+                            React__default.createElement(DialogActions$1, { style: { padding: "0px 24px" } },
                                 React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
                                     React__default.createElement(Grid, { container: true, item: true, style: {
                                             marginLeft: "auto",
@@ -5033,7 +5005,7 @@ var CreateNewAssetDialog = function (_a) {
                                         React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
                                             React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
                                         React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                            React__default.createElement(Button, { fullWidth: true, startIcon: isCreateSubmitLoading && (React__default.createElement(CircularProgress$1, { size: "1rem" })), disabled: isCreateSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))))),
+                                            React__default.createElement(Button, { fullWidth: true, startIcon: isCreateSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isCreateSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))))))),
         React__default.createElement(ErrorModal, { error: errorCreateAsset, onHide: function () { return setErrorCreateAsset(""); } }),
         React__default.createElement(Snackbar, { open: assetCreatedSuccess, autoHideDuration: 2500, onClose: handleClose },
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Document created succesfully"))));
@@ -5116,14 +5088,14 @@ var ViewerAssetDialog = function (_a) {
         }
     }, [show]);
     return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+        React__default.createElement(Dialog, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
             React__default.createElement("form", { onSubmit: function () { } },
                 React__default.createElement(Grid, { container: true, style: { padding: "15px 0", height: "50%" } },
                     React__default.createElement(Grid, { container: true, item: true },
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                             React__default.createElement(Typography, { style: { padding: "0 24px 12px", fontSize: 25 } }, assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName))),
                     React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                        React__default.createElement(DialogContent$2, { dividers: true, style: { padding: "10px 24px 0" } },
+                        React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                                 React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
                                         var _b = _a.field, onChange = _b.onChange, value = _b.value;
@@ -5238,9 +5210,9 @@ var RemoveAssetDialog = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
-            React__default.createElement(DialogTitle$2, { id: "responsive-dialog-title" }, "WARNING"),
-            React__default.createElement(DialogContent$2, null,
+        React__default.createElement(Dialog, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+            React__default.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
+            React__default.createElement(DialogContent$1, null,
                 React__default.createElement(DialogContentText, { style: { padding: 0, margin: 0 } },
                     "Be careful, once deleted you will not be able to recover this asset",
                     " ",
@@ -5249,9 +5221,9 @@ var RemoveAssetDialog = function (_a) {
                         assetNodeSelectedInTree.AssetName,
                         ")"),
                     ", are you sure you want to delete?")),
-            React__default.createElement(DialogActions$2, { style: { padding: "16px 24px" } },
-                React__default.createElement(Button$1, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "CANCEL"),
-                React__default.createElement(Button$1, { autoFocus: true, color: "secondary", startIcon: isCreateSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), onClick: handleRemoveAsset }, "Delete"))),
+            React__default.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
+                React__default.createElement(Button, { onClick: function () { return onHide(false); }, autoFocus: true, color: "default" }, "CANCEL"),
+                React__default.createElement(Button, { autoFocus: true, color: "secondary", startIcon: isCreateSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), onClick: handleRemoveAsset }, "Delete"))),
         React__default.createElement(ErrorModal, { error: errorRemoveAsset, onHide: function () { return setErrorRemoveAsset(""); } }),
         React__default.createElement(Snackbar, { open: assetRemovedSuccess, autoHideDuration: 2500, onClose: handleClose },
             React__default.createElement(Alert$2, { severity: "info", onClose: handleClose }, "Asset removed succesfully"))));
@@ -5371,14 +5343,14 @@ var EditAssetDialog = function (_a) {
         }
     }, [show]);
     return (React__default.createElement("div", { className: classes.root },
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
+        React__default.createElement(Dialog, { fullWidth: fullWidth, maxWidth: maxWidth, open: show, onClose: function () { return handleCancel(); }, disableEnforceFocus: true, className: classes.root },
             React__default.createElement("form", { onSubmit: handleFormSubmit },
                 React__default.createElement(Grid, { container: true, style: { padding: "15px 0 20px", height: "50%" } },
                     React__default.createElement(Grid, { container: true, item: true },
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                             React__default.createElement(Typography, { style: { padding: "0 24px 12px", fontSize: 25 } }, assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.AssetName))),
                     React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
-                        React__default.createElement(DialogContent$2, { dividers: true, style: { padding: "10px 24px 0" } },
+                        React__default.createElement(DialogContent$1, { dividers: true, style: { padding: "10px 24px 0" } },
                             React__default.createElement(Grid, { item: true, md: 12, xs: 12 },
                                 React__default.createElement(Controller, { name: "AssetName", control: control, render: function (_a) {
                                         var _b = _a.field, onChange = _b.onChange, value = _b.value;
@@ -5409,7 +5381,7 @@ var EditAssetDialog = function (_a) {
                                                             }, name: "CanBeDefaultAsset", color: "primary" }), label: "Can be Default Asset" }));
                                                 } })))))),
                         React__default.createElement(Grid, { item: true, md: 12, xs: 12, justifyContent: "flex-end", style: { marginTop: "15px" } },
-                            React__default.createElement(DialogActions$2, { style: { padding: "0px 24px" } },
+                            React__default.createElement(DialogActions$1, { style: { padding: "0px 24px" } },
                                 React__default.createElement(Grid, { container: true, justifyContent: "flex-end", style: { margin: 0 } },
                                     React__default.createElement(Grid, { container: true, item: true, style: {
                                             marginLeft: "auto",
@@ -5417,15 +5389,15 @@ var EditAssetDialog = function (_a) {
                                             marginBottom: 0
                                         } },
                                         React__default.createElement(Grid, { item: true, md: 6, xs: 12, style: { paddingLeft: "0", paddingRight: "16px" } },
-                                            React__default.createElement(Button$1, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
+                                            React__default.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return handleCancel(); } }, "Cancel")),
                                         React__default.createElement(Grid, { item: true, md: 6, xs: 12 },
-                                            React__default.createElement(Button$1, { fullWidth: true, startIcon: isEditSubmitLoading && (React__default.createElement(CircularProgress$1, { size: "1rem" })), disabled: isEditSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))),
+                                            React__default.createElement(Button, { fullWidth: true, startIcon: isEditSubmitLoading && (React__default.createElement(CircularProgress, { size: "1rem" })), disabled: isEditSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))),
                             React__default.createElement(ErrorModal, { error: errorEditAsset, onHide: function () { return setErrorEditAsset(""); } }),
-                            React__default.createElement(Snackbar$1, { open: assetEditedSuccess, autoHideDuration: 2500, onClose: handleClose },
+                            React__default.createElement(Snackbar, { open: assetEditedSuccess, autoHideDuration: 2500, onClose: handleClose },
                                 React__default.createElement(Alert$3, { severity: "info", onClose: handleClose }, "Document created succesfully")))))))));
 };
 
-var useStyles$7 = makeStyles$1(function (theme) { return ({
+var useStyles$7 = makeStyles(function (theme) { return ({
     root: {},
     contextMenu: {
         backgroundColor: "#F8F8F8",
@@ -5574,15 +5546,15 @@ var AssetViewComponent = function () {
         React__default.createElement("div", { onClick: handleClick },
             React__default.createElement("div", { onContextMenu: handleCreateNewContextMenu },
                 React__default.createElement("div", null,
-                    React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
-                        React__default.createElement(Paper$1, { elevation: 1, style: {
+                    React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
+                        React__default.createElement(Paper, { elevation: 1, style: {
                                 width: "100%",
                                 padding: "15px 20px 25px",
                                 borderRadius: "0.75rem"
                             } },
                             React__default.createElement(Typography, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "Assets Tree"),
-                            isLoading ? (React__default.createElement(Grid$1, { container: true, style: { width: "100%", height: "100%" } },
-                                React__default.createElement(Grid$1, { item: true, xs: 12, md: 12, style: {
+                            isLoading ? (React__default.createElement(Grid, { container: true, style: { width: "100%", height: "100%" } },
+                                React__default.createElement(Grid, { item: true, xs: 12, md: 12, style: {
                                         height: "66vh",
                                         justifyContent: "center",
                                         alignItems: "center"
@@ -5594,18 +5566,18 @@ var AssetViewComponent = function () {
                                             justifyContent: "center",
                                             alignItems: "center"
                                         } },
-                                        React__default.createElement(LazyLoading, null))))) : (React__default.createElement(Paper$1, { elevation: 2, style: {
+                                        React__default.createElement(LazyLoading, null))))) : (React__default.createElement(Paper, { elevation: 2, style: {
                                     width: "100%",
                                     padding: "15px 20px 10px",
                                     borderRadius: "0.75rem"
                                 } },
-                                React__default.createElement(Grid$1, { container: true, alignItems: "center" },
-                                    React__default.createElement(Grid$1, { container: true, style: {
+                                React__default.createElement(Grid, { container: true, alignItems: "center" },
+                                    React__default.createElement(Grid, { container: true, style: {
                                             height: "66vh",
                                             overflowY: "auto",
                                             paddingBottom: 10
                                         } },
-                                        React__default.createElement(Grid$1, null,
+                                        React__default.createElement(Grid, null,
                                             React__default.createElement(Tree, { rootId: 0, initialOpen: openAssetsArray, tree: allAssetNodes, enableAnimateExpand: true, classes: {
                                                     root: classes.assetRoot,
                                                     dropTarget: classes.dropTarget
@@ -5641,39 +5613,39 @@ var AssetViewComponent = function () {
                                         searchAssets();
                                     }
                                 } }))),
-                    React__default.createElement(Snackbar$1, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
+                    React__default.createElement(Snackbar, { open: updatedSuccessfullyMessage, autoHideDuration: 2500, onClose: handleClose },
                         React__default.createElement(Alert$3, { severity: "success", onClose: handleClose }, "Asset updated successfully"))),
                 showContextMenu && !isDoubleClick ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x, padding: "6px 0" } },
-                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowViewerAssetDialog(true); } },
-                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowViewerAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
                                 React__default.createElement(FindInPageIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
                                 React__default.createElement("div", { style: { marginLeft: 5 } }, "View Asset")))),
-                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowEditAssetDialog(true); } },
-                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowEditAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
                                 React__default.createElement(EditIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
                                 React__default.createElement("div", { style: { marginLeft: 5 } }, "Edit Asset")))),
-                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
-                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
                                 React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
                                 React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))),
-                    (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsBranch) === false && (React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowRemoveAssetDialog(true); } },
-                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                    (assetNodeSelectedInTree === null || assetNodeSelectedInTree === void 0 ? void 0 : assetNodeSelectedInTree.IsBranch) === false && (React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowRemoveAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
                                 React__default.createElement(DeleteIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
                                 React__default.createElement("div", { style: { marginLeft: 5 } }, "Remove Asset"))))))) : (""),
                 showCreateNewContextMenu ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: y, left: x } },
-                    React__default.createElement(MenuItem$1, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
-                        React__default.createElement(Grid$1, { container: true, style: { alignItems: "center" } },
-                            React__default.createElement(Grid$1, { item: true, md: 2, xs: 3 },
+                    React__default.createElement(MenuItem, { className: classes.menuItem, onClick: function () { return setShowCreateNewAssetDialog(true); } },
+                        React__default.createElement(Grid, { container: true, style: { alignItems: "center" } },
+                            React__default.createElement(Grid, { item: true, md: 2, xs: 3 },
                                 React__default.createElement(AddBoxIcon, { style: { width: 18 } })),
-                            React__default.createElement(Grid$1, { item: true, md: 9, xs: 9 },
+                            React__default.createElement(Grid, { item: true, md: 9, xs: 9 },
                                 React__default.createElement("div", { style: { marginLeft: 5 } }, "Create Asset")))))) : (""))),
         React__default.createElement(ErrorModal, { error: errorUpdate, onHide: function () { return setErrorUpdate(""); } }),
         React__default.createElement(ErrorModal, { error: searchError, onHide: function () { return setSearchError(""); } })));
@@ -5949,7 +5921,7 @@ var INITIAL_VALUES = {
 };
 
 // @flow
-var useStyles$5 = makeStyles$1(function (theme) { return ({
+var useStyles$5 = makeStyles(function (theme) { return ({
     root: {
         "& .MuiSelect-select": {
             minHeight: "40px"
@@ -5985,7 +5957,7 @@ var AuthTypeSelector = function (_a) {
     var classes = useStyles$5();
     var _b = useState([]), authTypes = _b[0], setAuthTypes = _b[1];
     var _c = useState(true), isLoading = _c[0], setIsLoading = _c[1];
-    var theme = useTheme$1();
+    var theme = useTheme();
     var _d = useState(""); _d[0]; var setError = _d[1];
     var getStyles = function (AuthTypeId, authTypes, theme) {
         return {
@@ -6118,14 +6090,14 @@ var CreateUser = function (_a) {
                         React.createElement(Grid, { item: true, xs: 12, md: 6, style: { marginTop: "5px" } },
                             React.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
                                     var field = _a.field;
-                                    return (React.createElement(FormControlLabel$1, { className: classes.checkbox, control: React.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                    return (React.createElement(FormControlLabel, { className: classes.checkbox, control: React.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
                                 } })))),
                 React.createElement(Modal$1.Footer, { style: { padding: "20px 30px 30px" } },
                     React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                         React.createElement(Grid, { item: true, md: 3, xs: 12 },
                             React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                         React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress$1, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))),
+                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading && React.createElement(CircularProgress, { size: "1rem" }), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save"))))),
             React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
             React.createElement(ErrorModal, { error: profileError, onHide: function () { return setprofileError(""); } })),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
@@ -6263,14 +6235,14 @@ var EditUser = function (_a) {
                                 React.createElement(Grid, { item: true, xs: 12, md: 6 },
                                     React.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
                                             var field = _a.field;
-                                            return (React.createElement(FormControlLabel$1, { className: classes.checkbox, control: React.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                            return (React.createElement(FormControlLabel, { className: classes.checkbox, control: React.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
                                         } }))))))),
                 React.createElement(Modal$1.Footer, { style: { padding: "20px 30px 30px" } },
                     React.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
                         React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
                             React.createElement(Button, { fullWidth: true, variant: "contained", color: "default", onClick: function () { return onHide(false); } }, "Cancel")),
                         React.createElement(Grid, { item: true, md: 3, xs: 12, style: { margin: 0 } },
-                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading ? React.createElement(CircularProgress$1, { size: "1rem" }) : React.createElement(React.Fragment, null), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
+                            React.createElement(Button, { fullWidth: true, startIcon: isSubmitLoading ? React.createElement(CircularProgress, { size: "1rem" }) : React.createElement(React.Fragment, null), disabled: isSubmitLoading, variant: "contained", color: "primary", type: "submit" }, "Save")))))),
         React.createElement(Snackbar, { open: open, autoHideDuration: 2500, onClose: handleClose },
             React.createElement(Alert, { severity: "info", onClose: handleClose }, "The user was edited successfully")),
         React.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
@@ -6385,7 +6357,7 @@ var DeleteUser = function (_a) {
                                 React__default.createElement(Grid, { item: true, xs: 12, md: 6 },
                                     React__default.createElement(Controller, { name: "IsActive", control: control, render: function (_a) {
                                             var field = _a.field;
-                                            return (React__default.createElement(FormControlLabel$1, { control: React__default.createElement(Checkbox$1, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
+                                            return (React__default.createElement(FormControlLabel, { control: React__default.createElement(Checkbox, { checked: field.value, onChange: field.onChange, name: "IsActive", color: "primary" }), label: "Active" }));
                                         } }))))))),
                 React__default.createElement(Modal$1.Footer, { style: { padding: "20px 30px 30px" } },
                     React__default.createElement(Grid, { container: true, spacing: 2, justifyContent: "flex-end" },
@@ -6398,15 +6370,15 @@ var DeleteUser = function (_a) {
         React__default.createElement(Dialog, { open: deleteAlert, onClose: function () { return handleClose(); }, "aria-labelledby": "responsive-dialog-title" },
             React__default.createElement(DialogTitle$1, { id: "responsive-dialog-title" }, "WARNING"),
             React__default.createElement(DialogContent$1, null,
-                React__default.createElement(DialogContentText$1, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this user, are you sure you want to delete it?")),
+                React__default.createElement(DialogContentText, { style: { padding: 0, margin: 0 } }, "Be careful, once deleted you will not be able to recover this user, are you sure you want to delete it?")),
             React__default.createElement(DialogActions$1, { style: { padding: "16px 24px" } },
                 React__default.createElement(Button, { onClick: function () { return setDeleteAlert(false); }, autoFocus: true, color: "default" }, "CANCEL"),
-                React__default.createElement(Button, { startIcon: isSubmitLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onSubmit(userIdForDelete); } }, "Delete"))),
+                React__default.createElement(Button, { startIcon: isSubmitLoading && React__default.createElement(CircularProgress, { size: "1rem" }), autoFocus: true, color: "secondary", onClick: function () { return onSubmit(userIdForDelete); } }, "Delete"))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } }),
         React__default.createElement(ErrorModal, { error: profileError, onHide: function () { return setprofileError(""); } })));
 };
 
-var useStyles$2 = makeStyles$1(function (theme) { return ({
+var useStyles$2 = makeStyles(function (theme) { return ({
     buttons: {
         opacity: 0,
         transition: "opacity 0.1s ease-in-out",
@@ -6563,18 +6535,18 @@ var ChangePassword$1 = function (_a) {
     if (userId) {
         return (React.createElement(React.Fragment, null,
             React.createElement(MesfModal, { title: "Change password", open: show, handleClose: function () { return onHide(false); }, maxWidth: "lg" },
-                React.createElement(Grid$1, { container: true },
-                    React.createElement(Grid$1, { item: true, md: 12, xs: 12 },
+                React.createElement(Grid, { container: true },
+                    React.createElement(Grid, { item: true, md: 12, xs: 12 },
                         React.createElement(MesfModal.Content, { style: { padding: "6px 16px 16px" } },
                             React.createElement("form", { onSubmit: handleSubmit },
-                                React.createElement(Grid$1, { item: true, md: 12, xs: 12 },
+                                React.createElement(Grid, { item: true, md: 12, xs: 12 },
                                     React.createElement(TextField, { label: "New Password", value: password, onChange: function (el) {
                                             setIsDirty(true);
                                             setPasswordText(el.target.value);
                                         }, variant: "outlined", error: isEmpty(password) && isDirty, fullWidth: true, 
                                         // margin="dense"
                                         autoComplete: "off" })),
-                                React.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { marginTop: 15 } },
+                                React.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: 15 } },
                                     React.createElement(Button, { fullWidth: true, variant: "contained", color: "primary", type: "submit" }, "APPLY")))))))));
     }
     else {
@@ -6741,7 +6713,7 @@ var TableUsers = function (_a) {
     }, [isLoading, rows, gridApi]);
     return (React.createElement(Grid, { container: true, justifyContent: "center" },
         React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" } },
-            React.createElement(Typography$1, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "User Management")),
+            React.createElement(Typography, { variant: "h5", style: { margin: "20px 0 20px", fontWeight: 600 } }, "User Management")),
         React.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", className: classes.root },
             React.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "0 15px" }, className: classes.relative },
                 React.createElement(CreateUser, { show: openModalCreate, onHide: function (shouldUpdate) {
@@ -7784,7 +7756,7 @@ var ShiftDayNavigatorControl = function (props) {
                         }, size: "small" },
                         React__default.createElement(ArrowBackRounded, null)))),
             React__default.createElement(Grid, { item: true },
-                React__default.createElement(DatePicker, { label: "Current Date", timezone: TimeService.getInstance().getServerTimeZone(), format: "MM/DD/YYYY", closeOnSelect: true, formatDensity: 'dense', value: moment(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
+                React__default.createElement(DatePicker, { label: "Current Date", timezone: TimeService.getInstance().getServerTimeZone(), format: "MM/DD/YYYY", maxDate: moment(), closeOnSelect: true, formatDensity: 'dense', value: moment(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.CurrentProductionDate), onChange: function (date) {
                         if (date) {
                             getShiftDataFromAPI(date.toDate(), 0)
                                 .then(function () {
@@ -7814,7 +7786,7 @@ var ShiftDayNavigatorControl = function (props) {
                         React__default.createElement(ArrowForwardRounded, null)))),
             React__default.createElement(Grid, { item: true },
                 React__default.createElement(Tooltip, { title: 'Last Shift' },
-                    React__default.createElement(IconButton$1, { "aria-label": "delete", color: 'primary', disabled: !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.LastShiftId), onClick: function () {
+                    React__default.createElement(IconButton$1, { "aria-label": "delete", color: 'primary', disabled: !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.LastShiftId) || !(shiftInfo === null || shiftInfo === void 0 ? void 0 : shiftInfo.NextShiftId), onClick: function () {
                             moveShift("Last").then(function () {
                             });
                         }, size: "small" },
@@ -7858,7 +7830,7 @@ function ChangePassword(props) {
         setPassword("");
         setConfirmPassword("");
     }, [userId, open]);
-    return (React__default.createElement(Dialog, { onClose: function (event, reason) { return null; }, "aria-label": "Change Password", maxWidth: "xs", "aria-labelledby": "confirmation-dialog-title", open: open },
+    return (React__default.createElement(Dialog, { onClose: function () { }, "aria-label": "Change Password", maxWidth: "xs", "aria-labelledby": "confirmation-dialog-title", open: open },
         React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "Change Password"),
         React__default.createElement(DialogContent$1, { dividers: true },
             React__default.createElement(Alert$1, { show: showError, variant: "danger", dismissible: true, onClose: function () {
@@ -7979,7 +7951,7 @@ var axiosInstance = axios.create({
 });
 var refreshingFunc;
 axiosInstance.interceptors.response.use(function (res) { return res; }, function (error) { return __awaiter(void 0, void 0, void 0, function () {
-    var originalConfig, token, _a, newToken, newRefreshToken, innerError_1;
+    var originalConfig, token, _a, newToken, newRefreshToken, innerError_1, err_1;
     return __generator(this, function (_b) {
         switch (_b.label) {
             case 0:
@@ -7988,6 +7960,7 @@ axiosInstance.interceptors.response.use(function (res) { return res; }, function
                     localStorage.removeItem("token");
                     localStorage.removeItem("refreshToken");
                     window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
+                    return [2 /*return*/, Promise.reject(error)];
                 }
                 token = getTokenFromLS();
                 if (!token || !isUnauthorizedError(error)) {
@@ -7996,7 +7969,6 @@ axiosInstance.interceptors.response.use(function (res) { return res; }, function
                 _b.label = 1;
             case 1:
                 _b.trys.push([1, 7, 8, 9]);
-                // the trick here, that `refreshingFunc` is global, e.g. 2 expired requests will get the same function pointer and await same function.
                 if (!refreshingFunc)
                     refreshingFunc = renewToken();
                 return [4 /*yield*/, refreshingFunc];
@@ -8014,25 +7986,24 @@ axiosInstance.interceptors.response.use(function (res) { return res; }, function
             case 4: return [2 /*return*/, _b.sent()];
             case 5:
                 innerError_1 = _b.sent();
-                // if original req failed with 499 again - it means server returned not valid token for refresh request
                 if (isUnauthorizedError(innerError_1)) {
-                    return [2 /*return*/, innerError_1];
+                    return [2 /*return*/, Promise.reject(innerError_1)];
                 }
-                return [2 /*return*/, innerError_1];
+                return [2 /*return*/, Promise.reject(innerError_1)];
             case 6: return [3 /*break*/, 9];
             case 7:
-                _b.sent();
+                err_1 = _b.sent();
                 localStorage.removeItem("token");
                 localStorage.removeItem("refreshToken");
                 window.location.href = "".concat(base$1, "logout?message=Session%20expired&redirectTo=").concat(window.location.href);
-                return [3 /*break*/, 9];
+                return [2 /*return*/, Promise.reject(err_1)];
             case 8:
                 refreshingFunc = undefined;
                 return [7 /*endfinally*/];
             case 9: return [2 /*return*/];
         }
     });
-}); }, {});
+}); });
 
 var getTokenFromLS = function () {
     return localStorage.getItem("token");
@@ -8272,7 +8243,7 @@ var LoginWithEmailAndPassword = function () {
             React__default.createElement("div", { className: "form-group row" },
                 React__default.createElement(TextField, { variant: "outlined", margin: "dense", id: "txtPassword", label: "Password", name: "password", onChange: function (e) { return setPassword(e.target.value); }, type: "password", className: "form-control" })),
             React__default.createElement("div", { className: "row" },
-                React__default.createElement(Button$1, { fullWidth: true, variant: "contained", style: {
+                React__default.createElement(Button, { fullWidth: true, variant: "contained", style: {
                         backgroundColor: (password.length === 0 || username.length === 0) ? '#CCCCCC' : '#479DC4',
                         color: (password.length === 0 || username.length === 0) ? 'black' : 'white'
                     }, type: "submit", disabled: password.length === 0 || username.length === 0 }, "Login")),
@@ -8382,7 +8353,7 @@ var LoginWithAzureADForm = function () {
     }); };
     return (React__default.createElement("form", { onSubmit: login },
         React__default.createElement("div", { className: "row" },
-            React__default.createElement(Button$1, { fullWidth: true, variant: "contained", style: { backgroundColor: '#479DC4', color: 'white' }, type: "submit" }, "Login with Azure AD"))));
+            React__default.createElement(Button, { fullWidth: true, variant: "contained", style: { backgroundColor: '#479DC4', color: 'white' }, type: "submit" }, "Login with Azure AD"))));
 };
 
 var LoginWithAzureAD = function (_a) {
@@ -8434,7 +8405,7 @@ var LoginAsGuest = function () {
                         ? error.internalError
                         : error.internalError.message)),
         React__default.createElement("div", { className: "row" },
-            React__default.createElement(Button$1, { fullWidth: true, variant: "contained", style: { backgroundColor: '#479DC4', color: 'white' }, role: "button", onClick: loginAsGuest }, "Guest"))));
+            React__default.createElement(Button, { fullWidth: true, variant: "contained", style: { backgroundColor: '#479DC4', color: 'white' }, role: "button", onClick: loginAsGuest }, "Guest"))));
 };
 
 var LoginWithWindowsAuthentication = function () {
@@ -8503,7 +8474,7 @@ var LoginWithWindowsAuthentication = function () {
                     " ",
                     error)),
             React__default.createElement("div", { className: "row" },
-                React__default.createElement(Button$1, { fullWidth: true, variant: "contained", style: { backgroundColor: '#479DC4', color: 'white' }, role: "button", onClick: login }, "Windows Auth"))));
+                React__default.createElement(Button, { fullWidth: true, variant: "contained", style: { backgroundColor: '#479DC4', color: 'white' }, role: "button", onClick: login }, "Windows Auth"))));
     return null;
 };
 
@@ -8535,22 +8506,22 @@ function Login(_a) {
         React__default.createElement("div", { className: "container-fluid" },
             React__default.createElement("div", { className: "row" },
                 React__default.createElement("div", { className: "col-10 col-md-6 mx-auto my-5" },
-                    React__default.createElement(Paper$1, { elevation: 2 },
+                    React__default.createElement(Paper, { elevation: 2 },
                         React__default.createElement("div", { className: "card-header text-center" },
                             React__default.createElement("b", null, "LOGIN")),
-                        React__default.createElement(Grid$1, { container: true, justifyContent: "space-between", alignItems: "center" }, (!useAzureAD && !guestIsEnabled && !useWindowsAuth) ? (React__default.createElement(Grid$1, { item: true, xs: 12 },
-                            React__default.createElement(Paper$1, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null)))) : (React__default.createElement(React__default.Fragment, null,
-                            React__default.createElement(Grid$1, { item: true, md: 5, xs: 5 },
-                                React__default.createElement(Paper$1, { elevation: 2, style: { padding: 40, margin: "40px -40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null))),
-                            React__default.createElement(Grid$1, { item: true, md: 1, xs: 1, style: { maxWidth: "20px" } },
+                        React__default.createElement(Grid, { container: true, justifyContent: "space-between", alignItems: "center" }, (!useAzureAD && !guestIsEnabled && !useWindowsAuth) ? (React__default.createElement(Grid, { item: true, xs: 12 },
+                            React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null)))) : (React__default.createElement(React__default.Fragment, null,
+                            React__default.createElement(Grid, { item: true, md: 5, xs: 5 },
+                                React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px -40px 40px 40px" } }, useEmailAndPassword && React__default.createElement(LoginWithEmailAndPassword, null))),
+                            React__default.createElement(Grid, { item: true, md: 1, xs: 1, style: { maxWidth: "20px" } },
                                 React__default.createElement("span", { className: "text-muted font-weight-bold" }, "OR")),
-                            React__default.createElement(Grid$1, { item: true, md: 5, xs: 5, style: { marginBottom: "auto" } },
-                                React__default.createElement(Paper$1, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px -40px", minHeight: 248, display: 'flex', flexDirection: 'column', justifyContent: 'space-evenly' } },
+                            React__default.createElement(Grid, { item: true, md: 5, xs: 5, style: { marginBottom: "auto" } },
+                                React__default.createElement(Paper, { elevation: 2, style: { padding: 40, margin: "40px 40px 40px -40px", minHeight: 248, display: 'flex', flexDirection: 'column', justifyContent: 'space-evenly' } },
                                     React__default.createElement(React__default.Fragment, null,
                                         React__default.createElement(LoginWithWindowsAuthentication, null),
                                         useAzureAD && (React__default.createElement(LoginWithAzureAD, { config: authConfig.AzureConfig })),
                                         guestIsEnabled && React__default.createElement(LoginAsGuest, null))))))))))),
-        React__default.createElement(Snackbar$1, { open: open, autoHideDuration: 6000, onClose: handleClose, message: message })));
+        React__default.createElement(Snackbar, { open: open, autoHideDuration: 6000, onClose: handleClose, message: message })));
 }
 
 function Logout() {
@@ -8720,7 +8691,7 @@ function Header$1(_a) {
                 React__default.createElement(Nav, { className: "ml-auto", style: { alignItems: "baseline" } },
                     showTrendingsIcon ? (React__default.createElement(Nav, { className: "mx-2" },
                         React__default.createElement(Nav.Link, { as: Link, to: "/trendings" },
-                            React__default.createElement(Tooltip$1, { title: 'Trendings', placement: "top", arrow: true, interactive: true, enterDelay: 1500 },
+                            React__default.createElement(Tooltip, { title: 'Trendings', placement: "top", arrow: true, interactive: true, enterDelay: 1500 },
                                 React__default.createElement(ShowChartIcon, null))))) : null,
                     React__default.createElement(Nav, null,
                         React__default.createElement("span", { className: "navbar-text" }, dxtToLocalServerTime(date, 'HH:mm:ss z'))),
@@ -9085,7 +9056,7 @@ _adapters._date.override(typeof moment$2 === 'function' ? {
 var css$1 = "/* ContextMenu.css */\n.context-menu {\n    position: absolute;\n    z-index: 1000;\n    background-color: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);\n    border-radius: 4px;\n    overflow: hidden;\n}\n\n    .context-menu ul {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n    }\n\n    .context-menu li {\n        padding: 8px 15px;\n        cursor: pointer;\n        border-bottom: 1px solid #eee;\n        background-color: #fff;\n        color: #333;\n        font-size: 14px;\n    }\n\n        .context-menu li:hover {\n            background-color: #f5f5f5;\n        }\n\n\n";
 n(css$1,{});
 
-var useTagColorsStyles = makeStyles$1({
+var useTagColorsStyles = makeStyles({
     swatch: {
         width: '25px',
         height: '25px',
@@ -9153,7 +9124,7 @@ var ColorPicker = function (_a) {
     var open = Boolean(anchorEl);
     var id = open ? 'simple-popover' : undefined;
     return (React__default.createElement("div", null,
-        React__default.createElement(Button, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
+        React__default.createElement(Button$1, { "aria-describedby": id, variant: "outlined", onClick: handleClick, style: {
                 backgroundColor: color,
                 width: '20px',
                 height: '20px',
@@ -9173,8 +9144,8 @@ var ColorPicker = function (_a) {
 
 var ButtonWithLoading = function (_a) {
     var children = _a.children, isLoading = _a.isLoading, props = __rest(_a, ["children", "isLoading"]);
-    return (React__default.createElement(Button$1, __assign({}, props, { disabled: isLoading }),
-        isLoading && React__default.createElement(CircularProgress$1, { size: "1rem" }),
+    return (React__default.createElement(Button, __assign({}, props, { disabled: isLoading }),
+        isLoading && React__default.createElement(CircularProgress, { size: "1rem" }),
         children));
 };
 
@@ -9380,7 +9351,7 @@ var deleteAllViewTagsFromView = function (ViewId) { return __awaiter(void 0, voi
     });
 }); };
 
-var useTrendingStyles = makeStyles$1(function (theme) { return ({
+var useTrendingStyles = makeStyles(function (theme) { return ({
     datetimePicker: {
         alignItems: "center",
         "& .MuiInputBase-root": {
@@ -9518,8 +9489,8 @@ var DeleteViewModal = function (_a) {
         React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Delete View' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
-                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                (React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
                         React__default.createElement(Typography, null,
                             "Are yu sure you want to delete ",
                             React__default.createElement("strong", null, view === null || view === void 0 ? void 0 : view.ViewName),
@@ -9527,12 +9498,12 @@ var DeleteViewModal = function (_a) {
                 (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
-                        React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'secondary', onClick: handleSubmit, isLoading: isLoading }, "Delete")
-                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+                React__default.createElement(Grid, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid, { item: true },
+                        React__default.createElement(Button, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid, { item: true }, !isNil$1(view) ?
+                        React__default.createElement(ButtonWithLoading, { variant: "contained", color: 'secondary', onClick: handleSubmit, isLoading: isLoading }, "Delete")
+                        : (React__default.createElement(Button, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
@@ -9582,22 +9553,22 @@ var EditViewModal = function (_a) {
         React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Update View' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null, !isNil$1(view) ?
-                (React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "2rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
+                (React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "2rem" } },
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } },
                         React__default.createElement(TextField, { required: true, className: classes.inputCustom, id: "viewName", label: "Name", variant: "outlined", onChange: handleChangeInput, value: newName })),
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
                         React__default.createElement("label", null,
                             React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck }),
                             React__default.createElement(Typography, null, "Public"))))) :
                 (React__default.createElement(Typography, null, "ERROR:  No view detected, please select one"))),
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true }, !isNil$1(view) ?
+                React__default.createElement(Grid, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid, { item: true },
+                        React__default.createElement(Button, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid, { item: true }, !isNil$1(view) ?
                         React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Update")
-                        : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
+                        : (React__default.createElement(Button, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok")))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
@@ -9673,19 +9644,19 @@ var LoadViewModal = function (_a) {
     return (React__default.createElement("div", null,
         React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Views' },
             React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
-                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                React__default.createElement(Grid, { container: true }, views.length ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement(Grid, { item: true, md: 12 },
                         React__default.createElement("div", { className: classes.isPublicCheckbox, style: { paddingBottom: '1rem' } },
                             React__default.createElement("label", { htmlFor: "" },
                                 React__default.createElement("input", { type: "checkbox", checked: allViewsChecked, onChange: handleAllViewsCheckbox }),
                                 React__default.createElement(Typography, null, "All Views")))),
-                    React__default.createElement(Grid$1, { item: true, md: 12 },
+                    React__default.createElement(Grid, { item: true, md: 12 },
                         React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", noOptionsText: allViewsChecked ? "No views detected, please create a new view" : "No private views detected, please create a new view .", options: allViewsChecked ? views : publicViews, getOptionLabel: function (option) { return option.ViewName; }, onChange: function (ev, val) { return setViewSelected(val); }, defaultValue: viewSelected, style: { width: "100%" }, renderOption: function (option) { return (React__default.createElement("div", { className: classes.optionContainer },
                                 React__default.createElement("div", { className: classes.optionLabel }, option.ViewName),
                                 React__default.createElement("div", { className: classes.iconContainer },
                                     option.IsPublic ? '' :
                                         React__default.createElement(React__default.Fragment, null,
-                                            React__default.createElement(Tooltip$1, { title: "Private", arrow: true },
+                                            React__default.createElement(Tooltip, { title: "Private", arrow: true },
                                                 React__default.createElement(LockIcon, { fontSize: 'small', style: { color: 'black', height: "18px", width: '18px', cursor: 'auto' } }))),
                                     React__default.createElement(IconButton$1, { onClick: function (e) { return handleEditView(option); } },
                                         React__default.createElement(CreateIcon, { fontSize: 'small', color: 'primary', style: { height: "18px", width: '18px', cursor: 'pointer' } })),
@@ -9694,8 +9665,8 @@ var LoadViewModal = function (_a) {
                     (React__default.createElement(Typography, null, "No views detected, please add one")))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", { style: { paddingTop: "1rem" } },
-                    React__default.createElement(Button$1, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
-                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button$1, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok"))))),
+                    React__default.createElement(Button, { variant: 'outlined', style: { marginRight: "1rem" }, color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel"),
+                    views.length ? (React__default.createElement(ButtonWithLoading, { onClick: handleSelect, variant: 'contained', color: 'primary', isLoading: isLoading, style: { marginRight: "1rem" } }, "Apply")) : (React__default.createElement(Button, { variant: 'contained', style: { marginRight: "1rem" }, color: 'primary', onClick: function () { return handleClose(false); } }, "Ok"))))),
         React__default.createElement(DeleteViewModal, { open: deleteViewModalOpen, view: viewForDelete, handleClose: function (shouldUpdate) {
                 setDeleteViewModalOpen(false);
                 if (shouldUpdate)
@@ -9759,8 +9730,8 @@ var SaveAsViewModal = function (_a) {
         React__default.createElement(MesfModal, { open: open, handleClose: function () { return handleClose(false); }, maxWidth: "xl", "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", title: 'Save View As' },
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Content, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 5, style: { padding: "1rem" } },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) { return option.ViewName; }, freeSolo: true, onChange: function (ev, val) {
+                React__default.createElement(Grid, { container: true, spacing: 5, style: { padding: "1rem" } },
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { padding: "10px", width: "100%" } }, views.length && viewSelected ? (React__default.createElement(Autocomplete, { size: 'small', id: "list-of-views", options: views, defaultValue: viewSelected, getOptionLabel: function (option) { return option.ViewName; }, freeSolo: true, onChange: function (ev, val) {
                             setViewSelected(val);
                             if (val) {
                                 setNewView("");
@@ -9773,21 +9744,21 @@ var SaveAsViewModal = function (_a) {
                         }, style: { width: "100%" }, renderInput: function (params) { return React__default.createElement(TextField, __assign({}, params, { label: "Views", variant: "outlined" })); } })) :
                         (React__default.createElement(Box, null,
                             React__default.createElement(TextField, { style: { minWidth: "600px" }, size: 'small', id: "outlined-basic", label: "View name", variant: "outlined", value: newView, onChange: (function (e) { return setNewView(e.target.value); }) }))))),
-                React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
+                React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { paddingTop: "2rem" }, className: classes.isPublicCheckbox },
                     React__default.createElement("label", null,
                         "Public",
                         React__default.createElement("input", { type: "checkbox", checked: isPublic, onChange: handleCheck })))),
             React__default.createElement(Divider, null),
             React__default.createElement(MesfModal.Actions, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
-                    React__default.createElement(Grid$1, { item: true },
-                        React__default.createElement(Button$1, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
-                    React__default.createElement(Grid$1, { item: true },
+                React__default.createElement(Grid, { container: true, spacing: 1, style: { display: 'flex', alignItems: 'flex-end', justifyContent: 'flex-end' } },
+                    React__default.createElement(Grid, { item: true },
+                        React__default.createElement(Button, { variant: 'outlined', color: 'secondary', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Grid, { item: true },
                         React__default.createElement(ButtonWithLoading, { variant: 'contained', color: 'primary', onClick: handleSubmit, isLoading: isLoading }, "Save"))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
 };
 
-var useTagsTreeModalStyles = makeStyles$1(function (theme) { return ({
+var useTagsTreeModalStyles = makeStyles(function (theme) { return ({
     dataTypeOfTree: {
         width: '25px',
         height: '25px',
@@ -9967,7 +9938,7 @@ var TagFolderCustomNode = function (_a) {
                         backgroundColor: ((_f = node.data) === null || _f === void 0 ? void 0 : _f.TagTypeCode) === 'A' ? "#AD48C4" : "#C46F48",
                         margin: "0 5px"
                     } }, (_g = node.data) === null || _g === void 0 ? void 0 : _g.TagTypeCode)),
-                React__default.createElement(Tooltip$1, { title: node.data.TagName, placement: "top", arrow: true },
+                React__default.createElement(Tooltip, { title: node.data.TagName, placement: "top", arrow: true },
                     React__default.createElement(Typography, { variant: "body2" }, ((_h = node.data) === null || _h === void 0 ? void 0 : _h.Alias) || ((_j = node.data) === null || _j === void 0 ? void 0 : _j.TagName))))));
 };
 
@@ -10009,7 +9980,7 @@ var NewFolderModal = function (_a) {
                     React__default.createElement(TextField, { style: { minWidth: "600px" }, id: "outlined-basic", label: "Folder name", variant: "outlined", value: name, onChange: (function (e) { return setName(e.target.value); }) }))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", null,
-                    React__default.createElement(Button$1, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Button, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
                 React__default.createElement("div", null,
                     React__default.createElement(ButtonWithLoading, { isLoading: isLoading, onClick: onSubmit, color: 'primary', variant: 'contained' }, "Save")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
@@ -10065,7 +10036,7 @@ var RemoveFolderModal = function (_a) {
                         " folder?"))),
             React__default.createElement(MesfModal.Actions, null,
                 React__default.createElement("div", null,
-                    React__default.createElement(Button$1, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
+                    React__default.createElement(Button, { color: 'secondary', variant: 'outlined', onClick: function () { return handleClose(false); } }, "Cancel")),
                 React__default.createElement("div", null,
                     React__default.createElement(ButtonWithLoading, { isLoading: isLoading, onClick: onSubmit, color: 'primary', variant: 'contained' }, "Remove")))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } })));
@@ -10080,8 +10051,8 @@ var ContextMenu = function (_a) {
     var isFolder = ((_b = tagNodeSelectedInTree === null || tagNodeSelectedInTree === void 0 ? void 0 : tagNodeSelectedInTree.data) === null || _b === void 0 ? void 0 : _b.TagTypeCode) === "F";
     return (React__default.createElement(React__default.Fragment, null,
         isOpen && anchorPoint ? (React__default.createElement("ul", { className: classes.contextMenu, style: { top: anchorPoint.y, left: anchorPoint.x } },
-            React__default.createElement(MenuItem$1, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowNewTagModal(true); } }, "New Folder"),
-            tagNodeSelectedInTree && isFolder && (React__default.createElement(MenuItem$1, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowRemoveTagModal(true); } }, "Remove Folder")))) : (null),
+            React__default.createElement(MenuItem, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowNewTagModal(true); } }, "New Folder"),
+            tagNodeSelectedInTree && isFolder && (React__default.createElement(MenuItem, { style: { width: "100%", justifyContent: "left" }, onClick: function () { return setShowRemoveTagModal(true); } }, "Remove Folder")))) : (null),
         React__default.createElement(NewFolderModal, { open: showNewTagModal, handleClose: function (shouldUpdate) {
                 if (shouldUpdate) {
                     getTagsTreeData();
@@ -10200,8 +10171,8 @@ var TagSelectionModal = function (_a) {
     };
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("div", { style: { display: isOpen ? "block" : "none", minHeight: "700px", minWidth: "800px" }, onClick: handleCloseContextMenu },
-            React__default.createElement("div", { style: { overflowY: 'auto', maxHeight: '700px' } }, isLoading ? (React__default.createElement(Grid$1, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
-                React__default.createElement(CircularProgress$1, { size: "2rem" }))) : (React__default.createElement(DndProvider$1, { backend: HTML5Backend },
+            React__default.createElement("div", { style: { overflowY: 'auto', maxHeight: '700px' } }, isLoading ? (React__default.createElement(Grid, { container: true, justifyContent: "center", alignItems: "center", style: { minHeight: "100px" } },
+                React__default.createElement(CircularProgress, { size: "2rem" }))) : (React__default.createElement(DndProvider$1, { backend: HTML5Backend },
                 React__default.createElement(Tree, { classes: {
                         root: classes.assetRoot,
                         dropTarget: classes.dropTarget
@@ -10291,7 +10262,7 @@ var useTagsDataTable = function (_a) {
     }, [viewTagsMap, chartData, cursorData]);
 };
 
-var useTagsTableStyles = makeStyles$1(function (theme) { return ({
+var useTagsTableStyles = makeStyles(function (theme) { return ({
     topTitles: {
         border: "0.0625rem solid black",
         borderBottom: "none",
@@ -10664,12 +10635,12 @@ var TableComponent = function (_a) {
         });
     }); };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { container: true, spacing: 1, alignContent: 'flex-start', style: {
+        React__default.createElement(Grid, { container: true, spacing: 1, alignContent: 'flex-start', style: {
                 height: '100%',
                 maxHeight: '100%',
                 overflowY: 'auto'
             } },
-            React__default.createElement(Grid$1, { item: true, xs: 12, style: {
+            React__default.createElement(Grid, { item: true, xs: 12, style: {
                     position: 'sticky',
                     background: 'white',
                     top: 0,
@@ -10681,7 +10652,7 @@ var TableComponent = function (_a) {
                         React__default.createElement("thead", null,
                             React__default.createElement("tr", null,
                                 React__default.createElement("th", { className: "".concat(classes.topTitles, " ").concat(classes.viewSelected) }, viewSelected ?
-                                    (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); }, startIcon: viewSelected.IsPublic ? React__default.createElement(React__default.Fragment, null) : React__default.createElement(LockIcon, { fontSize: 'small' }) }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || '')) : (React__default.createElement(Button$1, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setSaveAsViewModalOpen(true); } },
+                                    (React__default.createElement(Button, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setLoadViewOpen(true); }, startIcon: viewSelected.IsPublic ? React__default.createElement(React__default.Fragment, null) : React__default.createElement(LockIcon, { fontSize: 'small' }) }, (viewSelected === null || viewSelected === void 0 ? void 0 : viewSelected.ViewName) || '')) : (React__default.createElement(Button, { variant: 'text', style: { color: "#0075ff" }, className: classes.viewSelected, onClick: function () { return setSaveAsViewModalOpen(true); } },
                                     React__default.createElement("i", null,
                                         React__default.createElement(SaveIcon, null),
                                         "(Save view as)")))),
@@ -10762,7 +10733,7 @@ var TableComponent = function (_a) {
                                 React__default.createElement("th", null, "Y2-Y1"),
                                 React__default.createElement("th", null, "Min"),
                                 React__default.createElement("th", null, "Max")))))),
-            React__default.createElement(Grid$1, { item: true, xs: 12 },
+            React__default.createElement(Grid, { item: true, xs: 12 },
                 React__default.createElement("div", { style: { width: '100%', height: '100%', maxHeight: '100%' } },
                     React__default.createElement("table", { cellPadding: '4px', style: { width: '100%', tableLayout: 'fixed', textAlign: "center" } },
                         React__default.createElement("tbody", null, Object.values(viewTags).length ? Object.values(viewTags).map(function (_a) {
@@ -10774,7 +10745,7 @@ var TableComponent = function (_a) {
                                 React__default.createElement("td", { className: "".concat(classes.visible, " ").concat(classes.checkbox) },
                                     React__default.createElement("input", { type: "checkbox", checked: tag.IsVisible, onChange: function (e) { return handleVisibilityChange(tag.TagId, e.target.checked); } })),
                                 React__default.createElement("td", { className: classes.aliasCol },
-                                    React__default.createElement(Tooltip$1, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
+                                    React__default.createElement(Tooltip, { title: tag.TagName, placement: "top", arrow: true, interactive: true, enterDelay: 500 },
                                         React__default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
                                             tag.TagType &&
                                                 (React__default.createElement("div", { className: classes.dataType, style: { backgroundColor: tag.TagType === "A" ? "#AD48C4" : "#C46F48" } }, tag.TagType)),
@@ -10819,9 +10790,9 @@ var TableComponent = function (_a) {
                         }) : React__default.createElement("div", { style: { padding: '1rem' } },
                             React__default.createElement("div", { style: { padding: "1rem" } }, "No tag view detected. "),
                             React__default.createElement("div", { style: { padding: "1rem" } },
-                                React__default.createElement(Button$1, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
+                                React__default.createElement(Button, { onClick: function () { return setTagsTreeModalOpen(true); }, variant: 'contained', color: 'primary' }, " Add tag")),
                             React__default.createElement("div", null,
-                                React__default.createElement(Button$1, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
+                                React__default.createElement(Button, { onClick: function () { return setLoadViewOpen(true); }, variant: 'outlined', color: 'primary' }, " Load view"))))))),
             openContextMenu &&
                 React__default.createElement(ContextMenu, { x: contextMenuPosition.x, y: contextMenuPosition.y, options: contextMenuOptions }),
             React__default.createElement(TagsTreeModal, { open: tagsTreeModalOpen, handleClose: handleClose, onTagSelect: handleTagSelect }),
@@ -10834,7 +10805,7 @@ var TableComponent = function (_a) {
                     setLoadViewOpen(false);
                 } })),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); } }),
-        React__default.createElement(Snackbar$1, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar },
+        React__default.createElement(Snackbar, { open: !!snackbarMessage, autoHideDuration: 800, onClose: handleCloseSnackbar },
             React__default.createElement(Alert$3, { onClose: handleCloseSnackbar, severity: "success" }, snackbarMessage))));
 };
 
@@ -10968,11 +10939,11 @@ var CustomOptionsComponent = function (_a) {
         setCustomOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { stepped: value })); });
     };
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { item: true, className: classes.labelOptions },
+        React__default.createElement(Grid, { item: true, className: classes.labelOptions },
             React__default.createElement("label", null,
                 React__default.createElement("input", { type: "checkbox", checked: customOptions.showGrid, onChange: function (e) { return handleGridChange(e.target.checked); } }),
                 "Show Grid")),
-        React__default.createElement(Grid$1, { item: true, className: classes.labelOptions },
+        React__default.createElement(Grid, { item: true, className: classes.labelOptions },
             React__default.createElement("label", null,
                 React__default.createElement("input", { type: "checkbox", checked: customOptions.stepped, onChange: function (e) { return handleSteppedChange(e.target.checked); } }),
                 "Stepped"))));
@@ -11055,42 +11026,42 @@ var Header = function (_a) {
     useEffect(function () {
         setChartOptions(function (prevOptions) { return (__assign(__assign({}, prevOptions), { scales: __assign(__assign({}, prevOptions.scales), { x: __assign(__assign({}, prevOptions.scales.x), { min: state.timeScopeStart.getTime(), max: state.timeScopeEnd.getTime() }) }) })); });
     }, [state.timeScopeStart, state.timeScopeEnd]);
-    return (React__default.createElement(Grid$1, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
-        React__default.createElement(Grid$1, { md: 6, item: true, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
-            React__default.createElement(Grid$1, { item: true },
+    return (React__default.createElement(Grid, { item: true, xs: 12, container: true, justifyContent: "space-between", alignItems: "center", style: { height: "15%" } },
+        React__default.createElement(Grid, { md: 6, item: true, container: true, justifyContent: "flex-start", alignItems: "center", wrap: "wrap" },
+            React__default.createElement(Grid, { item: true },
                 React__default.createElement(IconButton$1, { color: "primary", onClick: function () { return handleDateNavigator("subtract"); }, className: classes.navigatorButton },
                     React__default.createElement(ChevronLeft, { fontSize: "large" }))),
-            React__default.createElement(Grid$1, { item: true },
+            React__default.createElement(Grid, { item: true },
                 React__default.createElement(TextField, { type: "datetime-local", className: classes.datetimePicker, label: "Start", variant: "outlined", value: moment$2(state.timeScopeStart).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "start"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     }, InputProps: {
                         max: state.timeScopeEnd
                     } })),
-            React__default.createElement(Grid$1, { item: true, className: classes.select },
-                React__default.createElement(FormControl$1, { variant: "outlined" },
-                    React__default.createElement(Select$1, { value: state.scope, onChange: handleChangeScope, displayEmpty: true },
-                        React__default.createElement(MenuItem$1, { value: "10 min" }, "10 min"),
-                        React__default.createElement(MenuItem$1, { value: "1 hour" }, "1 hour"),
-                        React__default.createElement(MenuItem$1, { value: "4 hours" }, "4 hours"),
-                        React__default.createElement(MenuItem$1, { value: "12 hours" }, "12 hours"),
-                        React__default.createElement(MenuItem$1, { value: "1 day" }, "1 day"),
-                        React__default.createElement(MenuItem$1, { value: "10 days" }, "10 days"),
-                        React__default.createElement(MenuItem$1, { value: "custom" }, "Custom")))),
-            React__default.createElement(Grid$1, { item: true },
+            React__default.createElement(Grid, { item: true, className: classes.select },
+                React__default.createElement(FormControl, { variant: "outlined" },
+                    React__default.createElement(Select, { value: state.scope, onChange: handleChangeScope, displayEmpty: true },
+                        React__default.createElement(MenuItem, { value: "10 min" }, "10 min"),
+                        React__default.createElement(MenuItem, { value: "1 hour" }, "1 hour"),
+                        React__default.createElement(MenuItem, { value: "4 hours" }, "4 hours"),
+                        React__default.createElement(MenuItem, { value: "12 hours" }, "12 hours"),
+                        React__default.createElement(MenuItem, { value: "1 day" }, "1 day"),
+                        React__default.createElement(MenuItem, { value: "10 days" }, "10 days"),
+                        React__default.createElement(MenuItem, { value: "custom" }, "Custom")))),
+            React__default.createElement(Grid, { item: true },
                 React__default.createElement(TextField, { label: "End", variant: "outlined", className: classes.datetimePicker, type: "datetime-local", value: moment$2(state.timeScopeEnd).format("YYYY-MM-DDTHH:mm:ss"), onChange: function (e) { return handleDateChange(e.target.value, "end"); }, InputLabelProps: {
                         shrink: true,
                         style: { marginLeft: "10px" }
                     } })),
-            React__default.createElement(Grid$1, { item: true },
+            React__default.createElement(Grid, { item: true },
                 React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("add"); }, className: "".concat(classes.navigatorButton) },
                     React__default.createElement(ChevronRight, { fontSize: "large" }))),
-            React__default.createElement(Grid$1, { item: true },
+            React__default.createElement(Grid, { item: true },
                 React__default.createElement(IconButton$1, { onClick: function () { return handleDateNavigator("subtract", true); }, className: "".concat(classes.navigatorButton) },
                     React__default.createElement(SkipNextIcon, { fontSize: "large" })))),
-        React__default.createElement(Grid$1, { md: 6, item: true, container: true, justifyContent: "space-between" },
-            React__default.createElement(Grid$1, { item: true, container: true, wrap: "nowrap", spacing: 1 },
-                React__default.createElement(Grid$1, { item: true, container: true },
+        React__default.createElement(Grid, { md: 6, item: true, container: true, justifyContent: "space-between" },
+            React__default.createElement(Grid, { item: true, container: true, wrap: "nowrap", spacing: 1 },
+                React__default.createElement(Grid, { item: true, container: true },
                     React__default.createElement(CustomOptionsComponent, { customOptions: customOptions, setCustomOptions: setCustomOptions }))))));
 };
 
@@ -11392,7 +11363,7 @@ var TrendingChart = function (_a) {
             }
         }
     }, [chartShouldInitCursors, state.graphShouldUpdate]);
-    return (React__default.createElement(Paper$1, { style: { height: '100%', position: 'relative' } },
+    return (React__default.createElement(Paper, { style: { height: '100%', position: 'relative' } },
         lineTabCoords && chartArea ? (React__default.createElement(DraggableLineControl, { color: 'red', chartArea: chartArea, initialLeft: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x1, otherLineCoord: lineTabCoords === null || lineTabCoords === void 0 ? void 0 : lineTabCoords.x2, onUpdate: function (newLeft) {
                 setLineTabCoords(function (prevCoords) {
                     prevCoords.x1 = newLeft;
@@ -11414,7 +11385,7 @@ var TrendingChart = function (_a) {
         React__default.createElement(Line, { ref: chartRef, data: chartData, options: chartOptions, plugins: [verticalLinePlugin, xAxisDatePlugin, yAxisPlugin] })));
 };
 
-Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$2, Legend, TimeScale, zoomPlugin);
+Chart.register(CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip$1, Legend, TimeScale, zoomPlugin);
 var Trending = function (_a) {
     _a.title; var getTagsFromAPI = _a.getTagsFromAPI;
     var _b = useTrendingContext(), state = _b.state, _c = _b.state, viewTags = _c.viewTags, shouldRefetchSeries = _c.shouldRefetchSeries;
@@ -11491,11 +11462,11 @@ var Trending = function (_a) {
         };
     }, [shouldRefetchSeries]);
     return (React__default.createElement(React__default.Fragment, null,
-        React__default.createElement(Grid$1, { container: true, style: { width: "95svw", height: "88svh", margin: 0 }, onClick: function () { return setOpenContextMenu(false); } },
+        React__default.createElement(Grid, { container: true, style: { width: "95svw", height: "88svh", margin: 0 }, onClick: function () { return setOpenContextMenu(false); } },
             React__default.createElement(Header, { setChartOptions: setChartOptions }),
-            React__default.createElement(Grid$1, { item: true, xs: 12, style: { height: '45%' } },
+            React__default.createElement(Grid, { item: true, xs: 12, style: { height: '45%' } },
                 React__default.createElement(TrendingChart, { series: series, chartData: chartData, setChartData: setChartData, chartOptions: chartOptions, setChartOptions: setChartOptions, setCursorData: setCursorData })),
-            React__default.createElement(Grid$1, { item: true, container: true, xs: 12, onContextMenu: function (e) { return handleRightClick(e, null); }, style: {
+            React__default.createElement(Grid, { item: true, container: true, xs: 12, onContextMenu: function (e) { return handleRightClick(e, null); }, style: {
                     height: '40%',
                     minWidth: "100%",
                     paddingTop: "3rem",
@@ -11518,7 +11489,7 @@ var Trending = function (_a) {
                             alignItems: 'center',
                             zIndex: 2
                         } },
-                        React__default.createElement(CircularProgress$1, { size: "2rem" }))),
+                        React__default.createElement(CircularProgress, { size: "2rem" }))),
                 React__default.createElement(TableComponent, { chartData: chartData, cursorData: cursorData, getTagsFromAPI: getTagsFromAPI, openContextMenu: openContextMenu, setOpenContextMenu: setOpenContextMenu, viewTagForDelete: viewTagForDelete, setViewTagForDelete: setViewTagForDelete, selectedRowTagId: selectedRowTagId, setSelectedRowTagId: setSelectedRowTagId, handleRightClick: handleRightClick, contextMenuPosition: contextMenuPosition, setContextMenuPosition: setContextMenuPosition }))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, title: "ERROR" })));
 };
@@ -11582,8 +11553,8 @@ var TrendingsPage = function (props) {
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement(Box, { p: 3, style: { maxWidth: "100%" } },
             React__default.createElement(Paper, null,
-                React__default.createElement(Grid$1, { container: true, spacing: 3, style: { padding: "20px" } },
-                    React__default.createElement(Grid$1, { item: true, xs: 12 },
+                React__default.createElement(Grid, { container: true, spacing: 3, style: { padding: "20px" } },
+                    React__default.createElement(Grid, { item: true, xs: 12 },
                         React__default.createElement(Trending, { title: "Trending Chart", getTagsFromAPI: getTagsFromAPI }))))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(''); }, size: "xl", title: "ERROR" })));
 };
@@ -11693,7 +11664,7 @@ var useDefaultAreaId = function (setError) {
     };
 };
 
-var useStyles = makeStyles$1(function (theme) {
+var useStyles = makeStyles(function (theme) {
     return createStyles$1({
         root: {
             "& .MuiInputBase-input": {
@@ -11781,16 +11752,16 @@ var AreaSelector = function () {
                     }, onClick: changeAreaActive },
                     React__default.createElement(PersonPinCircleIcon, { style: { marginLeft: "-5px" } }),
                     defaultAreaName))),
-        React__default.createElement(Dialog$1, { fullWidth: fullWidth, maxWidth: maxWidth, onClose: handleClose, "aria-labelledby": "confirmation-dialog-title", open: open, className: classes.root },
-            React__default.createElement(DialogTitle$2, { id: "confirmation-dialog-title" }, "AREA"),
-            React__default.createElement(DialogContent$2, { dividers: true },
+        React__default.createElement(Dialog, { fullWidth: fullWidth, maxWidth: maxWidth, onClose: handleClose, "aria-labelledby": "confirmation-dialog-title", open: open, className: classes.root },
+            React__default.createElement(DialogTitle$1, { id: "confirmation-dialog-title" }, "AREA"),
+            React__default.createElement(DialogContent$1, { dividers: true },
                 React__default.createElement("h6", { className: classes.title, id: "contained-modal-title-vcenter", style: { marginBottom: 0 } }, "Current Area"),
-                React__default.createElement(Grid$1, { container: true },
-                    React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { marginTop: 5 } },
+                React__default.createElement(Grid, { container: true },
+                    React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: 5 } },
                         React__default.createElement(TextField, { variant: "outlined", disabled: true, value: defaultAreaNameToChange, fullWidth: true, margin: "dense", autoComplete: "off", style: { color: "#000 !important" } }),
                         React__default.createElement("h6", { className: classes.title, id: "contained-modal-title-vcenter", style: { marginBottom: 0, marginTop: 5 } }, "Change Default Area"),
-                        React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: { marginTop: 10 } },
-                            React__default.createElement(Grid$1, { item: true, md: 12, xs: 12, style: {
+                        React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: { marginTop: 10 } },
+                            React__default.createElement(Grid, { item: true, md: 12, xs: 12, style: {
                                     height: "45vh",
                                     border: "1px solid rgba(0, 0, 0, 0.26)",
                                     borderRadius: "2px",
@@ -11802,7 +11773,7 @@ var AreaSelector = function () {
                                         }, style: { cursor: "pointer", width: "100%" } },
                                         React__default.createElement(ListItemText, { primary: area === null || area === void 0 ? void 0 : area.AssetName })));
                                 }))))))),
-            React__default.createElement(DialogActions$2, null,
+            React__default.createElement(DialogActions$1, null,
                 React__default.createElement(Button, { autoFocus: true, onClick: handleCancel, color: "primary" }, "Cancel"),
                 React__default.createElement(Button, { variant: "contained", onClick: handleChangeDefaultAreaId, color: "primary" }, "Change Area"))),
         React__default.createElement(ErrorModal, { error: error, onHide: function () { return setError(""); } })));