@etsoo/materialui 1.5.2 → 1.5.3

package/lib/cjs/LineChart.js

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LineChart = LineChart;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
 /**
  * Line chart
  * @param props Props
@@ -29,7 +29,7 @@ function LineChart(props) {
             setLineType(Line);
         });
     }, []);
-    return LineType == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsx)(LineType, { options: {
+    return LineType == null ? ((0, jsx_runtime_1.jsx)(LinearProgress_1.default, {})) : ((0, jsx_runtime_1.jsx)(LineType, { options: {
             scales: {
                 x: {
                     ticks: {

package/lib/cjs/ListChooser.d.ts

@@ -1,6 +1,7 @@
 import { DataTypes, DelayedExecutorType, IdDefaultType } from "@etsoo/shared";
-import { ListItemButtonProps, ListProps } from "@mui/material";
 import React from "react";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { ListProps } from "@mui/material/List";
 type QueryData = {
     title?: string;
 };

package/lib/cjs/ListChooser.js

@@ -6,10 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListChooser = ListChooser;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
-const material_1 = require("@mui/material");
 const CheckBox_1 = __importDefault(require("@mui/icons-material/CheckBox"));
 const react_2 = __importDefault(require("react"));
 const FlexBox_1 = require("./FlexBox");
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
 /**
  * List chooser
  * @param props Props
@@ -35,7 +39,7 @@ function ListChooser(props) {
         }
     });
     // Destruct
-    const { conditionField = "title", conditionRenderer = (rq, delayed) => ((0, jsx_runtime_1.jsx)(material_1.TextField, { autoFocus: true, margin: "dense", name: conditionField, label: title, fullWidth: true, variant: "standard", inputProps: { maxLength: 128 }, onChange: (event) => {
+    const { conditionField = "title", conditionRenderer = (rq, delayed) => ((0, jsx_runtime_1.jsx)(TextField_1.default, { autoFocus: true, margin: "dense", name: conditionField, label: title, fullWidth: true, variant: "standard", slotProps: { htmlInput: { maxLength: 128 } }, onChange: (event) => {
             Reflect.set(rq, "title", event.target.value);
             delayed.call();
         } })), itemRenderer = (item, selectProps) => {
@@ -44,7 +48,7 @@ function ListChooser(props) {
         const label = typeof labelField === "function"
             ? labelField(item)
             : Reflect.get(item, labelField);
-        return ((0, jsx_runtime_1.jsx)(material_1.ListItem, { disableGutters: true, secondaryAction: sp.selected ? (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }) : undefined, children: (0, jsx_runtime_1.jsx)(material_1.ListItemButton, { ...sp, children: (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: label }) }) }, `${id}`));
+        return ((0, jsx_runtime_1.jsx)(ListItem_1.default, { disableGutters: true, secondaryAction: sp.selected ? (0, jsx_runtime_1.jsx)(CheckBox_1.default, { fontSize: "small" }) : undefined, children: (0, jsx_runtime_1.jsx)(ListItemButton_1.default, { ...sp, children: (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: label }) }) }, `${id}`));
     }, idField = "id", labelField = "label", loadData, multiple = false, onItemChange, title, doubleClickEnabled = false, onDoubleClick, ...rest } = props;
     // Default minimum height
     rest.sx ??= { minHeight: "220px" };
@@ -91,5 +95,5 @@ function ListChooser(props) {
         }
     };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { children: [conditionRenderer(rq.current, delayed), (0, jsx_runtime_1.jsx)(material_1.List, { onDoubleClick: onDoubleClickLocal, disablePadding: true, dense: true, ...rest, children: items.map((item) => itemRenderer(item, selectProps)) })] }));
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.VBox, { children: [conditionRenderer(rq.current, delayed), (0, jsx_runtime_1.jsx)(List_1.default, { onDoubleClick: onDoubleClickLocal, disablePadding: true, dense: true, ...rest, children: items.map((item) => itemRenderer(item, selectProps)) })] }));
 }

package/lib/cjs/ListItemRightIcon.d.ts

@@ -1,4 +1,4 @@
-import { ListItemIcon } from "@mui/material";
+import ListItemIcon from "@mui/material/ListItemIcon";
 /**
  * List item right icon component
  */

package/lib/cjs/ListItemRightIcon.js

@@ -1,11 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListItemRightIcon = void 0;
-const material_1 = require("@mui/material");
+const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+const styles_1 = require("@mui/material/styles");
 /**
  * List item right icon component
  */
-exports.ListItemRightIcon = (0, material_1.styled)(material_1.ListItemIcon)(({ theme }) => ({
+exports.ListItemRightIcon = (0, styles_1.styled)(ListItemIcon_1.default)(({ theme }) => ({
     minWidth: "20px!important",
     paddingLeft: theme.spacing(2)
 }));

package/lib/cjs/ListMoreDisplay.d.ts

@@ -1,6 +1,6 @@
-import { CardProps } from "@mui/material";
 import React from "react";
 import { GridData, GridLoader } from "@etsoo/react";
+import { CardProps } from "@mui/material/Card";
 /**
  * ListMoreDisplay props
  */

package/lib/cjs/ListMoreDisplay.js

@@ -5,11 +5,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ListMoreDisplay = ListMoreDisplay;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@etsoo/react");
 const LoadingButton_1 = require("./LoadingButton");
 const ReactApp_1 = require("./app/ReactApp");
+const Card_1 = __importDefault(require("@mui/material/Card"));
+const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
+const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const CardActions_1 = __importDefault(require("@mui/material/CardActions"));
 /**
  * ListMoreDisplay
  * @param props Props
@@ -96,8 +100,8 @@ function ListMoreDisplay(props) {
             ref.isMounted = false;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(reset), (0, jsx_runtime_1.jsxs)(material_1.Card, { ...rest, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { title: headerTitle }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [headerRenderer && headerRenderer(reset), (0, jsx_runtime_1.jsxs)(Card_1.default, { ...rest, children: [(0, jsx_runtime_1.jsx)(CardHeader_1.default, { title: headerTitle }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { sx: {
                             paddingTop: 0,
                             paddingBottom: states.completed ? 0 : "inherit"
-                        }, children: states.items == null ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { size: 20 })) : (states.items.map((item, index) => children(item, index))) }), !states.completed && ((0, jsx_runtime_1.jsx)(material_1.CardActions, { sx: { justifyContent: "flex-end" }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { onClick: async () => await loadDataLocal(), children: moreLabel }) }))] })] }));
+                        }, children: states.items == null ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { size: 20 })) : (states.items.map((item, index) => children(item, index))) }), !states.completed && ((0, jsx_runtime_1.jsx)(CardActions_1.default, { sx: { justifyContent: "flex-end" }, children: (0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { onClick: async () => await loadDataLocal(), children: moreLabel }) }))] })] }));
 }

package/lib/cjs/LoadingButton.d.ts

@@ -1,4 +1,5 @@
-import { ButtonProps, CircularProgressProps } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
+import { CircularProgressProps } from "@mui/material/CircularProgress";
 /**
  * Loading button props
  */

package/lib/cjs/LoadingButton.js

@@ -5,7 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoadingButton = LoadingButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
 const react_1 = __importDefault(require("react"));
 /**
  * Loading button
@@ -20,7 +21,7 @@ function LoadingButton(props) {
     // https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state
     const [loading, setLoading] = react_1.default.useState(false);
     // Icon
-    const localEndIcon = loading ? ((0, jsx_runtime_1.jsx)(material_1.CircularProgress, { ...loadingIconProps })) : (endIcon);
+    const localEndIcon = loading ? ((0, jsx_runtime_1.jsx)(CircularProgress_1.default, { ...loadingIconProps })) : (endIcon);
     // Check if the component is mounted
     const isMounted = react_1.default.useRef(true);
     react_1.default.useEffect(() => {
@@ -29,7 +30,7 @@ function LoadingButton(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.Button, { disabled: loading, endIcon: localEndIcon, onClick: async (event) => {
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { disabled: loading, endIcon: localEndIcon, onClick: async (event) => {
             if (onClick) {
                 // Update state
                 setLoading(true);

package/lib/cjs/MUGlobal.d.ts

@@ -1,4 +1,5 @@
-import { ListItemButtonProps, Theme } from "@mui/material";
+import { ListItemButtonProps } from "@mui/material/ListItemButton";
+import { Theme } from "@mui/material/styles";
 /**
  * Mouse event handler with data
  */

package/lib/cjs/MaskInput.d.ts

@@ -1,4 +1,4 @@
-import { TextFieldProps } from "@mui/material";
+import { TextFieldProps } from "@mui/material/TextField";
 type ReactIMask = typeof import("react-imask", { with: { "resolution-mode": "import" } }).useIMask;
 type RIOpts = Parameters<ReactIMask>[0];
 type RIReturns = ReturnType<ReactIMask>;

package/lib/cjs/MaskInput.js

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MaskInput = MaskInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const react_1 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
 // Currently CommonJS modules are not supported by "react-imask" package
 let useIMask;
 import("react-imask").then((module) => useIMask = module.useIMask);
@@ -38,7 +38,7 @@ function MaskInput(props) {
         maskRef.current.updateValue();
     }, [maskRef.current, localValue]);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { slotProps: {
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
             htmlInput: { readOnly, ...slotProps?.htmlInput },
             inputLabel: { shrink: search ? MUGlobal_1.MUGlobal.searchFieldShrink : MUGlobal_1.MUGlobal.inputFieldShrink, ...slotProps?.inputLabel }
         }, size: size, variant: variant, inputRef: ref, ...rest }));

package/lib/cjs/MenuButton.d.ts

@@ -1,5 +1,6 @@
 import { DataTypes } from "@etsoo/shared";
-import { ButtonProps, MenuProps } from "@mui/material";
+import { ButtonProps } from "@mui/material/Button";
+import { MenuProps } from "@mui/material/Menu";
 import React from "react";
 export type MenuButtonProps<T extends DataTypes.IdItem> = Omit<MenuProps, "open"> & {
     items: T[];

package/lib/cjs/MenuButton.js

@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuButton = MenuButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Menu_1 = __importDefault(require("@mui/material/Menu"));
+const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
 const react_1 = __importDefault(require("react"));
 function MenuButton(props) {
     // Destruct
@@ -35,7 +37,7 @@ function MenuButton(props) {
     const labelFormatter = typeof labelField === "function"
         ? labelField
         : (item) => item[labelField];
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [typeof button === "function" ? (button(handleMenuOpen)) : ((0, jsx_runtime_1.jsx)(material_1.Button, { onClick: handleMenuOpen, ...button })), (0, jsx_runtime_1.jsx)(material_1.Menu, { slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [typeof button === "function" ? (button(handleMenuOpen)) : ((0, jsx_runtime_1.jsx)(Button_1.default, { onClick: handleMenuOpen, ...button })), (0, jsx_runtime_1.jsx)(Menu_1.default, { slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {
@@ -63,6 +65,6 @@ function MenuButton(props) {
                     }
                 }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
                     const label = labelFormatter(item);
-                    return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { disabled: true, children: label }, item.id));
+                    return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { disabled: true, children: label }, item.id));
                 }) })] }));
 }

package/lib/cjs/MobileListItemRenderer.js

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileListItemRenderer = MobileListItemRenderer;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
 const MoreFab_1 = require("./MoreFab");
+const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
+const Card_1 = __importDefault(require("@mui/material/Card"));
+const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
+const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -14,19 +20,22 @@ const MoreFab_1 = require("./MoreFab");
 function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
     // Loading
     if (data == null)
-        return (0, jsx_runtime_1.jsx)(material_1.LinearProgress, {});
+        return (0, jsx_runtime_1.jsx)(LinearProgress_1.default, {});
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
-    return ((0, jsx_runtime_1.jsxs)(material_1.Card, { sx: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.default, { sx: {
             height: itemHeight,
             ...margins
-        }, children: [(0, jsx_runtime_1.jsx)(material_1.CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { iconButton: true, size: "small", anchorOrigin: {
+        }, children: [(0, jsx_runtime_1.jsx)(CardHeader_1.default, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                         vertical: "bottom",
                         horizontal: "right"
                     }, transformOrigin: {
                         vertical: "top",
                         horizontal: "right"
-                    }, actions: actions })) : (actions), title: title, titleTypographyProps: { variant: "body2" }, subheader: subheader, subheaderTypographyProps: { variant: "caption" } }), (0, jsx_runtime_1.jsx)(material_1.CardContent, { sx: {
+                    }, actions: actions })) : (actions), title: title, subheader: subheader, slotProps: {
+                    title: { variant: "body2" },
+                    subheader: { variant: "caption" }
+                } }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { sx: {
                     paddingTop: 0,
                     paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") : 0
                 }, children: children }), cardActions] }));

package/lib/cjs/MoreFab.d.ts

@@ -1,7 +1,8 @@
 import { CustomFabProps } from "./CustomFabProps";
 import React from "react";
-import { PaperProps, PopoverOrigin } from "@mui/material";
 import { ListItemReact } from "@etsoo/react";
+import { PopoverOrigin } from "@mui/material/Popover";
+import { PaperProps } from "@mui/material/Paper";
 /**
  * More fab props
  */

package/lib/cjs/MoreFab.js

@@ -7,8 +7,14 @@ exports.MoreFab = MoreFab;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const MoreHoriz_1 = __importDefault(require("@mui/icons-material/MoreHoriz"));
 const react_1 = __importDefault(require("react"));
-const material_1 = require("@mui/material");
 const react_router_1 = require("react-router");
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const Fab_1 = __importDefault(require("@mui/material/Fab"));
+const Menu_1 = __importDefault(require("@mui/material/Menu"));
+const Divider_1 = __importDefault(require("@mui/material/Divider"));
+const MenuItem_1 = __importDefault(require("@mui/material/MenuItem"));
+const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
 function getActions(input) {
     // Actions
     const actions = [];
@@ -79,8 +85,8 @@ function MoreFab(props) {
     // Has any icon
     const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
-    const main = iconButton ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : ((0, jsx_runtime_1.jsx)(material_1.Fab, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(material_1.Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(material_1.Divider, {}, index)) : ((0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(typeof action === "string"
+    const main = iconButton ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : ((0, jsx_runtime_1.jsx)(Fab_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(Menu_1.default, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(Divider_1.default, {}, index)) : ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { ...(typeof action === "string"
                         ? action.includes("://")
                             ? {
                                 component: "a",
@@ -96,5 +102,5 @@ function MoreFab(props) {
                                     if (typeof action === "function")
                                         action(event);
                                 }
-                            }), children: [icon != null && (0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: icon }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { inset: icon == null && hasIcon, children: label })] }, label))) })] }));
+                            }), children: [icon != null && (0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: icon }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { inset: icon == null && hasIcon, children: label })] }, label))) })] }));
 }

package/lib/cjs/NotifierMU.js

@@ -7,16 +7,39 @@ exports.NotifierMU = exports.NotificationMU = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const notificationbase_1 = require("@etsoo/notificationbase");
 const shared_1 = require("@etsoo/shared");
-const material_1 = require("@mui/material");
-const icons_material_1 = require("@mui/icons-material");
-const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@etsoo/react");
 const DraggablePaperComponent_1 = require("./DraggablePaperComponent");
 const LoadingButton_1 = require("./LoadingButton");
 const Labels_1 = require("./app/Labels");
+const DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+const styles_1 = require("@mui/material/styles");
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
+const DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
+const Fade_1 = __importDefault(require("@mui/material/Fade"));
+const Alert_1 = __importDefault(require("@mui/material/Alert"));
+const AlertTitle_1 = __importDefault(require("@mui/material/AlertTitle"));
+const Switch_1 = __importDefault(require("@mui/material/Switch"));
+const Slider_1 = __importDefault(require("@mui/material/Slider"));
+const TextField_1 = __importDefault(require("@mui/material/TextField"));
+const Typography_1 = __importDefault(require("@mui/material/Typography"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Popover_1 = __importDefault(require("@mui/material/Popover"));
+const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
+const Backdrop_1 = __importDefault(require("@mui/material/Backdrop"));
+const Box_1 = __importDefault(require("@mui/material/Box"));
+const Snackbar_1 = __importDefault(require("@mui/material/Snackbar"));
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const Done_1 = __importDefault(require("@mui/icons-material/Done"));
+const Info_1 = __importDefault(require("@mui/icons-material/Info"));
+const Warning_1 = __importDefault(require("@mui/icons-material/Warning"));
+const Error_1 = __importDefault(require("@mui/icons-material/Error"));
+const Help_1 = __importDefault(require("@mui/icons-material/Help"));
 // Custom icon dialog title bar
-const IconDialogTitle = (0, material_1.styled)(material_1.DialogTitle, {
+const IconDialogTitle = (0, styles_1.styled)(DialogTitle_1.default, {
     // Prevent the passing of the draggable prop to the underlying DOM element
     shouldForwardProp: (prop) => prop !== "draggable"
 }) `
@@ -47,19 +70,19 @@ class NotificationMU extends react_2.NotificationReact {
         let title = this.title;
         let icon;
         if (this.type === notificationbase_1.NotificationMessageType.Success) {
-            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Done, { color: "primary" });
+            icon = (0, jsx_runtime_1.jsx)(Done_1.default, { color: "primary" });
             title ??= labels.success;
         }
         else if (this.type === notificationbase_1.NotificationMessageType.Info) {
-            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Info, {});
+            icon = (0, jsx_runtime_1.jsx)(Info_1.default, {});
             title ??= labels.info;
         }
         else if (this.type === notificationbase_1.NotificationMessageType.Warning) {
-            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Warning, { color: "secondary" });
+            icon = (0, jsx_runtime_1.jsx)(Warning_1.default, { color: "secondary" });
             title ??= labels.warning;
         }
         else {
-            icon = (0, jsx_runtime_1.jsx)(icons_material_1.Error, { color: "error" });
+            icon = (0, jsx_runtime_1.jsx)(Error_1.default, { color: "error" });
             title ??= labels.alertTitle;
         }
         const setupProps = {
@@ -72,7 +95,7 @@ class NotificationMU extends react_2.NotificationReact {
             await this.returnValue(undefined);
             return true;
         };
-        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons
                         ? buttons(this, callback)
                         : primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButtonProps, children: okLabel })) })] }, this.id));
     }
@@ -87,7 +110,7 @@ class NotificationMU extends react_2.NotificationReact {
             await this.returnValue(value);
             return true;
         };
-        return ((0, jsx_runtime_1.jsxs)(material_1.Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(icons_material_1.Help, { color: "action" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons ? (buttons(this, callback)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] })) })] }, this.id));
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Help_1.default, { color: "action" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, callback)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] })) })] }, this.id));
     }
     createMessageColor() {
         if (this.type === notificationbase_1.NotificationMessageType.Danger)
@@ -109,7 +132,7 @@ class NotificationMU extends react_2.NotificationReact {
         };
         // Setup callback
         const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
-        return ((0, jsx_runtime_1.jsx)(material_1.Fade, { in: true, children: (0, jsx_runtime_1.jsxs)(material_1.Alert, { ...setupProps, ...options, action: closable ? ((0, jsx_runtime_1.jsx)(material_1.IconButton, { size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : undefined, onClose: () => this.dismiss(), className: className, children: [this.title && (0, jsx_runtime_1.jsx)(material_1.AlertTitle, { children: this.title }), this.content] }) }, this.id));
+        return ((0, jsx_runtime_1.jsx)(Fade_1.default, { in: true, children: (0, jsx_runtime_1.jsxs)(Alert_1.default, { ...setupProps, ...options, action: closable ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : undefined, onClose: () => this.dismiss(), className: className, children: [this.title && (0, jsx_runtime_1.jsx)(AlertTitle_1.default, { children: this.title }), this.content] }) }, this.id));
     }
     // Create prompt
     createPrompt(_props, className) {
@@ -168,13 +191,13 @@ class NotificationMU extends react_2.NotificationReact {
         let value = undefined;
         if (inputs == null) {
             if (type === "switch") {
-                localInputs = ((0, jsx_runtime_1.jsx)(material_1.Switch, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
+                localInputs = ((0, jsx_runtime_1.jsx)(Switch_1.default, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
             }
             else if (type === "slider") {
-                localInputs = (0, jsx_runtime_1.jsx)(material_1.Slider, { onChange: (_e, v) => (value = v) });
+                localInputs = (0, jsx_runtime_1.jsx)(Slider_1.default, { onChange: (_e, v) => (value = v) });
             }
             else {
-                localInputs = ((0, jsx_runtime_1.jsx)(material_1.TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...inputProps }));
+                localInputs = ((0, jsx_runtime_1.jsx)(TextField_1.default, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...inputProps }));
             }
         }
         else {
@@ -182,11 +205,11 @@ class NotificationMU extends react_2.NotificationReact {
         }
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
-        return ((0, jsx_runtime_1.jsx)(material_1.Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
+        return ((0, jsx_runtime_1.jsx)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: (0, jsx_runtime_1.jsxs)("form", { onSubmit: (event) => {
                     event.preventDefault();
                     event.currentTarget.elements.namedItem("okButton")?.click();
                     return false;
-                }, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(icons_material_1.Info, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(material_1.IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(material_1.DialogContentText, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(material_1.DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(material_1.Button, { color: "secondary", onClick: () => {
+                }, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
                                         if (this.onReturn)
                                             this.onReturn(undefined);
                                         this.dismiss();
@@ -198,7 +221,7 @@ class NotificationMU extends react_2.NotificationReact {
         const { content, id, open } = this;
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
-        return ((0, jsx_runtime_1.jsx)(material_1.Popover, { open: open, className: className, onClose: () => this.dismiss(), ...options, children: content }, id));
+        return ((0, jsx_runtime_1.jsx)(Popover_1.default, { open: open, className: className, onClose: () => this.dismiss(), ...options, children: content }, id));
     }
     // Create loading
     createLoading(_props, className) {
@@ -213,14 +236,14 @@ class NotificationMU extends react_2.NotificationReact {
             content = labels.loading.toString();
         // Setup callback
         const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
-        return ((0, jsx_runtime_1.jsx)(material_1.Backdrop, { className: className, sx: {
+        return ((0, jsx_runtime_1.jsx)(Backdrop_1.default, { className: className, sx: {
                 color: "#fff",
                 zIndex: (theme) => theme.zIndex.modal + 1
-            }, open: this.open, ...options, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
+            }, open: this.open, ...options, children: (0, jsx_runtime_1.jsxs)(Box_1.default, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }
-                }, children: [(0, jsx_runtime_1.jsx)(material_1.CircularProgress, { ...setupProps }), content && ((0, jsx_runtime_1.jsx)(material_1.Box, { maxWidth: maxWidth === false ? undefined : maxWidth, children: content }))] }) }, this.id));
+                }, children: [(0, jsx_runtime_1.jsx)(CircularProgress_1.default, { ...setupProps }), content && ((0, jsx_runtime_1.jsx)(Box_1.default, { maxWidth: maxWidth === false ? undefined : maxWidth, children: content }))] }) }, this.id));
     }
     /**
      * Render method
@@ -333,9 +356,9 @@ class NotifierMU extends react_2.NotifierReact {
             return ((0, jsx_runtime_1.jsx)("div", { className: className, children: children }, `div-${alignText}`));
         }
         // Use SnackBar for layout
-        return ((0, jsx_runtime_1.jsx)(material_1.Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === notificationbase_1.NotificationAlign.Center
+        return ((0, jsx_runtime_1.jsx)(Snackbar_1.default, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === notificationbase_1.NotificationAlign.Center
                 ? { position: "fixed", top: "50%!important" }
-                : undefined, open: true, children: (0, jsx_runtime_1.jsx)(material_1.Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
+                : undefined, open: true, children: (0, jsx_runtime_1.jsx)(Box_1.default, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }

package/lib/cjs/NotifierPopupProps.d.ts

@@ -1,4 +1,4 @@
-import { PopoverProps } from "@mui/material";
+import { PopoverProps } from "@mui/material/Popover";
 /**
  * Notifier Popup pros
  */

package/lib/cjs/NumberInputField.js

@@ -7,8 +7,8 @@ exports.NumberInputField = NumberInputField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const InputField_1 = require("./InputField");
-const material_1 = require("@mui/material");
 const shared_1 = require("@etsoo/shared");
+const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 /**
  * Number input field, for controlled only components, please see IntInputField and MoneyInputField
  * @param props Props
@@ -17,16 +17,18 @@ const shared_1 = require("@etsoo/shared");
 function NumberInputField(props) {
     const { currency, inputStyle, min = 0, step = 1, symbol = currency
         ? `${currency} ${shared_1.NumberUtils.getCurrencySymbol(currency)}`
-        : undefined, endSymbol, max = 9999999, InputProps, ...rest } = props;
-    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", inputProps: {
-            min,
-            step,
-            max,
-            style: inputStyle,
-            inputMode: "numeric"
-        }, InputProps: {
-            startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "start", children: symbol }) })) : undefined,
-            endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(material_1.InputAdornment, { position: "end", children: endSymbol })) : undefined,
-            ...InputProps
-        }, ...rest }));
+        : undefined, endSymbol, max = 9999999, slotProps = {}, ...rest } = props;
+    return ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", slotProps: Object.assign(slotProps, {
+            input: {
+                startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
+                endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
+            },
+            htmlInput: {
+                min,
+                step,
+                max,
+                style: inputStyle,
+                inputMode: "numeric"
+            }
+        }), ...rest }));
 }

package/lib/cjs/OptionGroup.d.ts

@@ -1,5 +1,5 @@
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
-import { FormControlProps } from "@mui/material";
+import { FormControlProps } from "@mui/material/FormControl";
 import React from "react";
 /**
  * OptionGroup methods ref