@etsoo/materialui 1.5.1 → 1.5.3

package/lib/cjs/pages/LeftDrawer.js

@@ -5,11 +5,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LeftDrawer = LeftDrawer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
 const DrawerHeader_1 = require("./DrawerHeader");
 const ReactApp_1 = require("../app/ReactApp");
+const Drawer_1 = __importDefault(require("@mui/material/Drawer"));
+const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Divider_1 = __importDefault(require("@mui/material/Divider"));
+const List_1 = __importDefault(require("@mui/material/List"));
 function LeftDrawer(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
@@ -26,7 +31,7 @@ function LeftDrawer(props) {
     react_1.default.useEffect(() => {
         setOpen(open);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Drawer, { hidden: !openLocal, sx: {
+    return ((0, jsx_runtime_1.jsxs)(Drawer_1.default, { hidden: !openLocal, sx: {
             width,
             flexShrink: 0,
             "& .MuiDrawer-paper": {
@@ -35,5 +40,5 @@ function LeftDrawer(props) {
             }
         }, anchor: "left", variant: mdUp ? "persistent" : "temporary", open: open, transitionDuration: 0, onClose: mdUp ? undefined : handleDrawerClose, ModalProps: {
             keepMounted: true // Better open performance on mobile.
-        }, children: [(0, jsx_runtime_1.jsxs)(DrawerHeader_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)("a", { href: "https://www.etsoo.com", title: app?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), (0, jsx_runtime_1.jsx)(material_1.Typography, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: handleDrawerClose, children: (0, jsx_runtime_1.jsx)(ChevronLeft_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.List, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
+        }, children: [(0, jsx_runtime_1.jsxs)(DrawerHeader_1.DrawerHeader, { children: [(0, jsx_runtime_1.jsx)("a", { href: "https://www.etsoo.com", title: app?.get("etsoo") ?? "ETSOO", target: "_blank", rel: "noreferrer", children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { src: logoUrl, variant: "square", sx: { marginLeft: -0.5, marginRight: 1.5, marginBottom: 1 } }) }), (0, jsx_runtime_1.jsx)(Typography_1.default, { noWrap: true, component: "div", title: appName, sx: { flexGrow: 2 }, children: appName }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: handleDrawerClose, children: (0, jsx_runtime_1.jsx)(ChevronLeft_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(Divider_1.default, {}), (0, jsx_runtime_1.jsx)(List_1.default, { onClick: mdUp ? undefined : handleDrawerClose, children: children })] }));
 }

package/lib/cjs/pages/ListPage.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListPage = ListPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const MUGlobal_1 = require("../MUGlobal");
 const ScrollerListEx_1 = require("../ScrollerListEx");
 const SearchBar_1 = require("../SearchBar");
 const CommonPage_1 = require("./CommonPage");
 const GridUtils_1 = require("../GridUtils");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
 /**
  * List page
  * @param props Props
@@ -80,7 +81,7 @@ function ListPage(props) {
     };
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
                     }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
 }

package/lib/cjs/pages/TablePage.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TablePage = TablePage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const MUGlobal_1 = require("../MUGlobal");
 const SearchBar_1 = require("../SearchBar");
 const TableEx_1 = require("../TableEx");
 const CommonPage_1 = require("./CommonPage");
 const GridUtils_1 = require("../GridUtils");
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
 /**
  * Table page
  * @param props Props
@@ -66,7 +67,7 @@ function TablePage(props) {
     }, [rect]);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { ref: dimensions[0][0], sx: {
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
                     }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), list] }) }));
 }

package/lib/cjs/pages/UserMenu.js

@@ -7,10 +7,11 @@ exports.eventWatcher = void 0;
 exports.UserMenu = UserMenu;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const react_router_1 = require("react-router");
 const UserAvatar_1 = require("../UserAvatar");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Menu_1 = __importDefault(require("@mui/material/Menu"));
 /**
  * Event watcher
  */
@@ -54,7 +55,7 @@ function UserMenu(props) {
             }
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit", children: (0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { title: name, src: avatar }) }), (0, jsx_runtime_1.jsx)(material_1.Menu, { slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit", children: (0, jsx_runtime_1.jsx)(UserAvatar_1.UserAvatar, { title: name, src: avatar }) }), (0, jsx_runtime_1.jsx)(Menu_1.default, { slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {

package/lib/cjs/pages/ViewPage.js

@@ -7,7 +7,6 @@ exports.ViewPage = ViewPage;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
 const react_2 = __importDefault(require("react"));
 const Labels_1 = require("../app/Labels");
 const MUGlobal_1 = require("../MUGlobal");
@@ -16,6 +15,8 @@ const CommonPage_1 = require("./CommonPage");
 const MessageUtils_1 = require("../messages/MessageUtils");
 const OperationMessageContainer_1 = require("../messages/OperationMessageContainer");
 const ViewContainer_1 = require("../ViewContainer");
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+const Stack_1 = __importDefault(require("@mui/material/Stack"));
 /**
  * View page
  * @param props Props
@@ -44,13 +45,13 @@ function ViewPage(props) {
             MessageUtils_1.MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, className: "ET-ViewPage", ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, className: "ET-ViewPage", ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
                         ? [
                             operationMessageHandler.types,
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                        : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { data: data, fields: fields, gridRef: gridRef, leftContainer: leftContainer, leftContainerLines: leftContainerLines, leftContainerProps: leftContainerProps, refresh: refresh, spacing: spacing }), actions !== null && ((0, jsx_runtime_1.jsx)(Stack_1.default, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;
                     } })), (0, jsx_runtime_1.jsx)(react_1.ScrollRestoration, {})] })) }));

package/lib/cjs/texts/DateText.d.ts

@@ -1,5 +1,5 @@
 import { DateUtils } from "@etsoo/shared";
-import { TypographyProps } from "@mui/material";
+import { TypographyProps } from "@mui/material/Typography";
 /**
  * Date text props
  */

package/lib/cjs/texts/DateText.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DateText = DateText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Date text
  * @param props Props
@@ -24,5 +27,5 @@ function DateText(props) {
         rest.color = "error";
     }
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", fontSize: "inherit", ...rest, children: localValue }));
+    return ((0, jsx_runtime_1.jsx)(Typography_1.default, { component: "span", fontSize: "inherit", ...rest, children: localValue }));
 }

package/lib/cjs/texts/MoneyText.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MoneyText = MoneyText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Money text
  * @param props Props
@@ -13,7 +16,7 @@ function MoneyText(props) {
     // Destruct
     const { currency, isInteger = false, locale, options = {}, value, ...rest } = props;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null
+    return ((0, jsx_runtime_1.jsx)(Typography_1.default, { component: "span", fontSize: "inherit", ...rest, children: value == null
             ? ""
             : shared_1.NumberUtils.formatMoney(value, currency, locale, isInteger, options) }));
 }

package/lib/cjs/texts/NumberText.d.ts

@@ -1,4 +1,4 @@
-import { TypographyProps } from "@mui/material";
+import { TypographyProps } from "@mui/material/Typography";
 /**
  * Number text props
  */

package/lib/cjs/texts/NumberText.js

@@ -1,9 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NumberText = NumberText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
 /**
  * Number text
  * @param props Props
@@ -13,5 +16,5 @@ function NumberText(props) {
     // Destruct
     const { locale, options = {}, value, ...rest } = props;
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.Typography, { component: "span", fontSize: "inherit", ...rest, children: value == null ? "" : shared_1.NumberUtils.format(value, locale, options) }));
+    return ((0, jsx_runtime_1.jsx)(Typography_1.default, { component: "span", fontSize: "inherit", ...rest, children: value == null ? "" : shared_1.NumberUtils.format(value, locale, options) }));
 }

package/lib/cjs/useCurrentBreakpoint.d.ts

@@ -1,4 +1,4 @@
-import { Breakpoint } from "@mui/material";
+import { Breakpoint } from "@mui/material/styles";
 /**
  * Hook to get the current breakpoint
  * @returns The current breakpoint

package/lib/cjs/useCurrentBreakpoint.js

@@ -1,19 +1,23 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentBreakpoint = useCurrentBreakpoint;
-const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
 /**
  * Hook to get the current breakpoint
  * @returns The current breakpoint
  */
 function useCurrentBreakpoint() {
-    const theme = (0, material_1.useTheme)();
+    const theme = (0, styles_1.useTheme)();
     const items = [
-        (0, material_1.useMediaQuery)(theme.breakpoints.down("xs")) ? "xs" : null,
-        (0, material_1.useMediaQuery)(theme.breakpoints.between("xs", "sm")) ? "sm" : null,
-        (0, material_1.useMediaQuery)(theme.breakpoints.between("sm", "md")) ? "md" : null,
-        (0, material_1.useMediaQuery)(theme.breakpoints.between("md", "lg")) ? "lg" : null,
-        (0, material_1.useMediaQuery)(theme.breakpoints.up("lg")) ? "xl" : null
+        (0, useMediaQuery_1.default)(theme.breakpoints.down("xs")) ? "xs" : null,
+        (0, useMediaQuery_1.default)(theme.breakpoints.between("xs", "sm")) ? "sm" : null,
+        (0, useMediaQuery_1.default)(theme.breakpoints.between("sm", "md")) ? "md" : null,
+        (0, useMediaQuery_1.default)(theme.breakpoints.between("md", "lg")) ? "lg" : null,
+        (0, useMediaQuery_1.default)(theme.breakpoints.up("lg")) ? "xl" : null
     ];
     return items.find((item) => item != null) ?? "lg";
 }

package/lib/mjs/AddresSelector.d.ts

@@ -1,8 +1,8 @@
 import { AddressCity, AddressDistrict, AddressRegionDb, AddressState, IApiPayload } from "@etsoo/appscript";
-import { GridSize } from "@mui/material";
 import React from "react";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 import { RegionsRQ } from "./RegionsRQ";
+import { GridSize } from "@mui/material/Grid";
 /**
  * Address field
  */

package/lib/mjs/AddresSelector.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormLabel, Grid2 } from "@mui/material";
 import React from "react";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
 import { useAppContext } from "./app/ReactApp";
+import Grid from "@mui/material/Grid";
+import FormLabel from "@mui/material/FormLabel";
 /**
  * Address field
  */
@@ -125,12 +126,12 @@ export function AddressSelector(props) {
         }
     };
     // Layout
-    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid2, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && (_jsx(Grid2, { size: breakPoints, children: _jsx(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.regions({
+    return (_jsxs(React.Fragment, { children: [label && (_jsx(Grid, { size: { xs: 12 }, children: _jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption }, children: label }) })), !hideRegion && (_jsx(Grid, { size: breakPoints, children: _jsx(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.regions({
                         keyword,
                         id,
                         items,
                         favoredIds: favoredIds == null
                             ? undefined
                             : favoredIds(AddressField.Region)
-                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), _jsx(Grid2, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) }) }), _jsx(Grid2, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), _jsx(Grid2, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
+                    }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }) })), _jsx(Grid, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: required, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) }) }), _jsx(Grid, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) }) }), _jsx(Grid, { size: breakPoints, children: _jsx(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }) })] }));
 }

package/lib/mjs/AuditDisplay.d.ts

@@ -1,7 +1,7 @@
-import { Theme } from "@mui/material";
 import React, { CSSProperties } from "react";
 import { ListMoreDisplayProps } from "./ListMoreDisplay";
 import { AuditLineDto } from "@etsoo/appscript";
+import { Theme } from "@mui/material/styles";
 /**
  * Audit display props
  */

package/lib/mjs/AuditDisplay.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
-import { Button, Divider, Typography, useTheme } from "@mui/material";
 import React from "react";
 import { ListMoreDisplay } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
 import { useAppContext } from "./app/ReactApp";
+import { useTheme } from "@mui/material/styles";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
+import Divider from "@mui/material/Divider";
 /**
  * Audit display
  * @param props Props

package/lib/mjs/AutocompleteExtendedProps.d.ts

@@ -1,5 +1,5 @@
 import { DataTypes } from "@etsoo/shared";
-import { AutocompleteProps } from "@mui/material";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 import { ChangeEventHandler } from "react";
 /**
  * Autocomplete extended props

package/lib/mjs/BackButton.d.ts

@@ -1,4 +1,4 @@
-import { IconButtonProps } from "@mui/material";
+import { IconButtonProps } from "@mui/material/IconButton";
 /**
  * BackButton props
  */

package/lib/mjs/BackButton.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { IconButton, useTheme } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import IconButton from "@mui/material/IconButton";
+import { useTheme } from "@mui/material/styles";
 import { useNavigate } from "react-router";
 /**
  * BackButton

package/lib/mjs/BridgeCloseButton.d.ts

@@ -1,5 +1,6 @@
 import { IBridgeHost } from "@etsoo/appscript";
-import { BoxProps, IconButtonProps } from "@mui/material";
+import { IconButtonProps } from "@mui/material/IconButton";
+import { BoxProps } from "@mui/material/Box";
 /**
  * Bridge close button props
  */

package/lib/mjs/BridgeCloseButton.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BridgeUtils } from "@etsoo/appscript";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, IconButton } from "@mui/material";
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
+import IconButton from "@mui/material/IconButton";
+import Box from "@mui/material/Box";
 /**
  * Bridge close button
  * @param props Props

package/lib/mjs/ButtonLink.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
 /**
  * ButtonLink props
  */

package/lib/mjs/ButtonLink.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@mui/material";
-import { useNavigate } from "react-router";
+import Button from "@mui/material/Button";
+import { useNavigate } from "react-router-dom";
 /**
  * ButtonLink
  * @param props Props

package/lib/mjs/ButtonPopover.d.ts

@@ -1,4 +1,4 @@
-import { PopoverOrigin } from "@mui/material";
+import { PopoverOrigin } from "@mui/material/Popover";
 import React from "react";
 /**
  * Button popover props

package/lib/mjs/ButtonPopover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Popover } from "@mui/material";
+import Popover from "@mui/material/Popover";
 import React from "react";
 /**
  * Button popover component

package/lib/mjs/ComboBox.js

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Keyboard } from "@etsoo/shared";
-import { Autocomplete, IconButton, Stack } from "@mui/material";
 import React from "react";
 import { Utils as SharedUtils } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
-import AddIcon from "@mui/icons-material/Add";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import Autocomplete from "@mui/material/Autocomplete";
+import Stack from "@mui/material/Stack";
+import IconButton from "@mui/material/IconButton";
+import AddIcon from "@mui/icons-material/Add";
 /**
  * ComboBox
  * @param props Props

package/lib/mjs/ComboBoxMultiple.js

@@ -1,6 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Keyboard } from "@etsoo/shared";
-import { Autocomplete, Checkbox } from "@mui/material";
 import React from "react";
 import { Utils as SharedUtils } from "@etsoo/shared";
 import { ReactUtils } from "@etsoo/react";
@@ -9,6 +8,8 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import { SearchField } from "./SearchField";
 import { InputField } from "./InputField";
 import { useAppContext } from "./app/ReactApp";
+import Checkbox from "@mui/material/Checkbox";
+import Autocomplete from "@mui/material/Autocomplete";
 const icon = _jsx(CheckBoxOutlineBlankIcon, { fontSize: "small" });
 const checkedIcon = _jsx(CheckBoxIcon, { fontSize: "small" });
 /**

package/lib/mjs/ComboBoxPro.d.ts

@@ -1,6 +1,6 @@
-import { AutocompleteProps } from "@mui/material";
 import { InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
+import { AutocompleteProps } from "@mui/material/Autocomplete";
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<AutocompleteProps<D, false, false, true>, "open" | "multiple" | "options" | "renderInput"> & {
     /**
      * Label

package/lib/mjs/ComboBoxPro.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Autocomplete } from "@mui/material";
 import React from "react";
 import { InputField } from "./InputField";
 import { DataTypes } from "@etsoo/shared";
 import { useAppContext } from "./app/ReactApp";
+import Autocomplete from "@mui/material/Autocomplete";
 export function ComboBoxPro(props) {
     // Global app
     const app = useAppContext();

package/lib/mjs/CountdownButton.d.ts

@@ -1,4 +1,4 @@
-import { ButtonProps } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
 import React from "react";
 /**
  * Countdown button action

package/lib/mjs/CountdownButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Button, CircularProgress } from "@mui/material";
+import Button from "@mui/material/Button";
+import CircularProgress from "@mui/material/CircularProgress";
 import React from "react";
 /**
  * Countdown button

package/lib/mjs/DataGridEx.js

@@ -2,9 +2,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { css } from "@emotion/css";
 import { GridAlignGet, ScrollerGrid, useCombinedRefs } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
-import { Box, Checkbox, Paper, TableSortLabel, useTheme } from "@mui/material";
 import React from "react";
 import { DataGridRenderers } from "./DataGridRenderers";
+import { useTheme } from "@mui/material/styles";
+import Box from "@mui/material/Box";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Paper from "@mui/material/Paper";
 // Borders
 const boldBorder = "2px solid rgba(224, 224, 224, 1)";
 const thinBorder = "1px solid rgba(224, 224, 224, 1)";

package/lib/mjs/DataGridRenderers.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { CircularProgress } from "@mui/material";
 import { DateUtils, NumberUtils } from "@etsoo/shared";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
 import { DateText } from "./texts/DateText";
 import { GridDataType } from "@etsoo/react";
+import CircularProgress from "@mui/material/CircularProgress";
 /**
  * Data grid renderers
  */

package/lib/mjs/DataSteps.d.ts

@@ -1,5 +1,5 @@
-import { TextFieldProps } from "@mui/material";
 import { InputDialogProps } from "@etsoo/react";
+import { TextFieldProps } from "@mui/material/TextField";
 /**
  * Data step
  */

package/lib/mjs/DataSteps.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, IconButton, InputAdornment, TextField } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
 import NavigateNextIcon from "@mui/icons-material/NavigateNext";
 import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
@@ -9,6 +8,10 @@ import React from "react";
 import { HBox } from "./FlexBox";
 import { MUGlobal } from "./MUGlobal";
 import { useRequiredAppContext } from "./app/ReactApp";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
 /**
  * Data collecting steps component
  * @param props Props

package/lib/mjs/DataTable.d.ts

@@ -1,4 +1,4 @@
-import { GridRowId, GridValidRowModel } from "@mui/x-data-grid";
+import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models/gridRows";
 import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
 /**
  * Data table selected cell params

package/lib/mjs/DataTable.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DataGrid } from "@mui/x-data-grid";
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
+import { DataGrid } from "@mui/x-data-grid/DataGrid/DataGrid";
 /**
  * Data table
  * @param props Props

package/lib/mjs/DialogButton.d.ts

@@ -1,5 +1,6 @@
-import { Breakpoint, ButtonProps } from "@mui/material";
 import React from "react";
+import { ButtonProps } from "@mui/material/Button";
+import { Breakpoint } from "@mui/material/styles";
 export interface DialogButtonProps extends ButtonProps {
     /**
      * Button label

package/lib/mjs/DialogButton.js

@@ -1,7 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton } from "@mui/material";
 import React from "react";
 import { Labels } from "./app/Labels";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import Dialog from "@mui/material/Dialog";
+import DialogTitle from "@mui/material/DialogTitle";
+import DialogContent from "@mui/material/DialogContent";
+import DialogContentText from "@mui/material/DialogContentText";
+import DialogActions from "@mui/material/DialogActions";
 /**
  * Dialog button
  * @param props Props

package/lib/mjs/DnDList.d.ts

@@ -1,7 +1,7 @@
 import type { UniqueIdentifier } from "@dnd-kit/core";
-import { SortingStrategy } from "@dnd-kit/sortable";
+import { SortingStrategy } from "@dnd-kit/sortable/dist/types/strategies";
 import { DataTypes } from "@etsoo/shared";
-import { Theme } from "@mui/material";
+import { Theme } from "@mui/material/styles";
 import React, { CSSProperties } from "react";
 /**
  * DnD item default style

package/lib/mjs/DnDList.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Skeleton, useTheme } from "@mui/material";
+import Skeleton from "@mui/material/Skeleton";
+import { useTheme } from "@mui/material/styles";
 import React from "react";
 function SortableItem(props) {
     // Destruct

package/lib/mjs/DraggablePaperComponent.d.ts

@@ -1,4 +1,4 @@
-import { PaperProps } from "@mui/material";
+import { PaperProps } from "@mui/material/Paper";
 /**
  * Draggable paper component
  * @param props Props