@etsoo/materialui 1.5.2 → 1.5.3

package/lib/mjs/custom/CustomFieldUtils.d.ts

@@ -1,7 +1,7 @@
 import { CustomFieldData, CustomFieldSpace } from "@etsoo/appscript";
 import { CustomFieldReactCollection, ICustomFieldReact } from "@etsoo/react";
 import { IdType, ListType2 } from "@etsoo/shared";
-import { GridSize } from "@mui/material";
+import { GridSize } from "@mui/material/Grid";
 import { TypographyProps } from "@mui/material/Typography";
 /**
  * Custom field utilities

package/lib/mjs/custom/CustomFieldUtils.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Grid2, Typography } from "@mui/material";
 import React from "react";
 import { FieldCheckbox } from "./FieldCheckbox";
 import { FieldAmountLabel } from "./FieldAmountLabel";
@@ -14,6 +13,8 @@ import { FieldJson } from "./FieldJson";
 import { FieldRadio } from "./FieldRadio";
 import { FieldSelect } from "./FieldSelect";
 import { FieldSwitch } from "./FieldSwitch";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 /**
  * Custom field utilities
  */
@@ -63,7 +64,7 @@ export var CustomFieldUtils;
                 fieldCalback(field);
             const creator = CustomFieldUtils.customFieldCreators[field.type];
             if (creator == null) {
-                return (_jsx(Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
+                return (_jsx(Grid, { size: transformSpace(field.space), ...field.gridItemProps, children: `Type ${field.type} is not supported currently` }, index));
             }
             const Creator = creator;
             const mref = React.createRef();
@@ -77,7 +78,7 @@ export var CustomFieldUtils;
                     ui = `Duplicate custom field ${name}`;
                 }
             }
-            return (_jsx(Grid2, { size: transformSpace(field.space), ...field.gridItemProps, children: ui }, name ?? index));
+            return (_jsx(Grid, { size: transformSpace(field.space), ...field.gridItemProps, children: ui }, name ?? index));
         });
     }
     CustomFieldUtils.create = create;

package/lib/mjs/custom/CustomFieldViewer.d.ts

@@ -1,5 +1,6 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { Grid2Props, TypographyProps } from "@mui/material";
+import { GridProps } from "@mui/material/Grid";
+import { TypographyProps } from "@mui/material/Typography";
 /**
  * Custom field viewer props
  * 自定义字段查看器属性
@@ -14,7 +15,7 @@ export type CustomFieldViewerProps = {
      * Grid props
      * 网格属性
      */
-    gridProps?: Grid2Props;
+    gridProps?: GridProps;
     /**
      * JSON data
      * JSON 数据

package/lib/mjs/custom/CustomFieldViewer.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Grid2, Typography } from "@mui/material";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { MUGlobal } from "../MUGlobal";
 import { VBox } from "../FlexBox";
 import { DataTypes, Utils } from "@etsoo/shared";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
 /**
  * Custom field viewer
  * 自定义字段查看器
@@ -38,7 +39,7 @@ export function CustomFieldViewer(props) {
     if (data == null || typeof data !== "object" || Array.isArray(data)) {
         throw new Error("Invalid JSON data");
     }
-    return (_jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
+    return (_jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
             }
@@ -49,6 +50,6 @@ export function CustomFieldViewer(props) {
                 return;
             // Field value
             const value = Utils.getNestedValue(data, name);
-            return (_jsx(Grid2, { size: CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: _jsxs(VBox, { gap: verticalGap, children: [_jsx(Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), _jsx(Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
+            return (_jsx(Grid, { size: CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: _jsxs(VBox, { gap: verticalGap, children: [_jsx(Typography, { fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), _jsx(Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
         }) }));
 }

package/lib/mjs/custom/CustomFieldWindow.d.ts

@@ -1,6 +1,6 @@
 import { CustomFieldData } from "@etsoo/appscript";
-import { Grid2Props } from "@mui/material";
 import React from "react";
+import { GridProps } from "@mui/material/Grid";
 /**
  * Custom field window props
  * 自定义字段窗口属性
@@ -24,7 +24,7 @@ export type CustomFieldWindowProps<D extends CustomFieldData> = {
      * Grid props
      * 网格属性
      */
-    gridProps?: Grid2Props;
+    gridProps?: GridProps;
     /**
      * JSON data
      * JSON 数据

package/lib/mjs/custom/CustomFieldWindow.js

@@ -1,10 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
-import { Grid2, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { CustomFieldUtils } from "./CustomFieldUtils";
 import { useRequiredAppContext } from "../app/ReactApp";
+import Grid from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
 function calculateKeys(data) {
     let count = 0;
     for (const key in data) {
@@ -70,7 +71,7 @@ export function CustomFieldWindow(props) {
                     }
                 }, {
                     fullScreen: app.smDown,
-                    inputs: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid2, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                    inputs: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
                                 ".MuiTypography-subtitle2": {
                                     fontWeight: "bold"
                                 }

package/lib/mjs/custom/FieldAmountLabel.js

@@ -1,6 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { NumberUtils } from "@etsoo/shared";
-import { FormHelperText, Typography } from "@mui/material";
+import FormHelperText from "@mui/material/FormHelperText";
+import Typography from "@mui/material/Typography";
 import React from "react";
 /**
  * Amount label field creator

package/lib/mjs/custom/FieldCheckbox.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { OptionGroup } from "../OptionGroup";
+import Typography from "@mui/material/Typography";
 /**
  * Checkbox (multiple values) field creator
  * type: checkbox

package/lib/mjs/custom/FieldCombobox.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { ComboBoxMultiple } from "../ComboBoxMultiple";
+import Typography from "@mui/material/Typography";
 /**
  * Combobox (multiple values) field creator
  * type combobox

package/lib/mjs/custom/FieldDateInput.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { DateUtils } from "@etsoo/shared";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 /**
  * Date input field creator
  * type: date

package/lib/mjs/custom/FieldDivider.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Divider } from "@mui/material";
 import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import Divider from "@mui/material/Divider";
 /**
  * Divider field creator
  * type: divider

package/lib/mjs/custom/FieldInput.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 /**
  * Input field creator
  * type: input

package/lib/mjs/custom/FieldJson.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 function parseJson(value) {
     if (value) {
         try {

package/lib/mjs/custom/FieldNumberInput.js

@@ -1,8 +1,8 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { NumberInputField } from "../NumberInputField";
 import { NumberUtils } from "@etsoo/shared";
+import Typography from "@mui/material/Typography";
 /**
  * Number input field creator
  * type: number

package/lib/mjs/custom/FieldRadio.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { OptionGroup } from "../OptionGroup";
+import Typography from "@mui/material/Typography";
 /**
  * Radio (single value) field creator
  * type: radio

package/lib/mjs/custom/FieldSelect.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { SelectEx } from "../SelectEx";
+import Typography from "@mui/material/Typography";
 /**
  * Select (single value) field creator
  * type select

package/lib/mjs/custom/FieldSwitch.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { SwitchAnt } from "../SwitchAnt";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 /**
  * Input field creator
  * type: switch

package/lib/mjs/custom/FieldTexarea.js

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "../InputField";
+import Typography from "@mui/material/Typography";
 /**
  * Textarea field creator
  * type: textarea

package/lib/mjs/pages/CommonPage.d.ts

@@ -1,8 +1,9 @@
 import React from "react";
-import { ContainerProps, Theme } from "@mui/material";
 import type { CustomFabSize } from "../CustomFabProps";
 import type { IStateUpdate, ListItemReact } from "@etsoo/react";
 import type { UserKey } from "@etsoo/appscript";
+import { ContainerProps } from "@mui/material/Container";
+import { Theme } from "@mui/material/styles";
 /**
  * Common page props
  * Default container id is 'pageContainer'

package/lib/mjs/pages/CommonPage.js

@@ -4,11 +4,13 @@ import { FabBox } from "../FabBox";
 import { ScrollTopFab } from "../ScrollTopFab";
 import { MUGlobal } from "../MUGlobal";
 import { MoreFab } from "../MoreFab";
-import { Container, Fab, useTheme } from "@mui/material";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
 import { useAppContext } from "../app/ReactApp";
+import Container from "@mui/material/Container";
+import { useTheme } from "@mui/material/styles";
+import Fab from "@mui/material/Fab";
 /**
  * Common page
  * @param props Props

package/lib/mjs/pages/DataGridPage.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs, useDimensions } from "@etsoo/react";
-import { Box, Stack } from "@mui/material";
 import React from "react";
 import { DataGridEx } from "../DataGridEx";
 import { MUGlobal } from "../MUGlobal";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { GridUtils } from "../GridUtils";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 /**
  * DataGrid page
  * @param props Props

package/lib/mjs/pages/DrawerHeader.js

@@ -1,4 +1,4 @@
-import { styled } from "@mui/material";
+import { styled } from "@mui/material/styles";
 /**
  * Common drawer header
  */

package/lib/mjs/pages/EditPage.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Grid2 } from "@mui/material";
 import { MUGlobal } from "../MUGlobal";
 import { CommonPage } from "./CommonPage";
 import SaveIcon from "@mui/icons-material/Save";
@@ -7,6 +6,8 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import { BackButton } from "../BackButton";
 import { Labels } from "../app/Labels";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
+import Grid from "@mui/material/Grid";
+import Button from "@mui/material/Button";
 /**
  * Add / Edit page
  * @param props Props
@@ -16,7 +17,7 @@ export function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
-    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid2, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid2, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
+    return (_jsxs(CommonPage, { paddings: paddings, scrollContainer: scrollContainer, ...rest, children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: operationMessageHandler })), topPart, _jsxs("form", { onSubmit: onSubmit, children: [_jsx(Grid, { container: true, justifyContent: "left", spacing: paddings, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: paddings, sx: {
                             top: "auto",
                             bottom: (theme) => MUGlobal.updateWithTheme(paddings, theme.spacing),
                             paddingTop: paddings

package/lib/mjs/pages/FixedListPage.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs, useDimensions } from "@etsoo/react";
-import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ScrollerListEx } from "../ScrollerListEx";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { GridUtils } from "../GridUtils";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
 /**
  * Fixed height list page
  * @param props Props

package/lib/mjs/pages/LeftDrawer.js

@@ -1,9 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Avatar, Divider, Drawer, IconButton, List, Typography } from "@mui/material";
 import React from "react";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import { DrawerHeader } from "./DrawerHeader";
 import { useAppContext } from "../app/ReactApp";
+import Drawer from "@mui/material/Drawer";
+import Avatar from "@mui/material/Avatar";
+import Typography from "@mui/material/Typography";
+import IconButton from "@mui/material/IconButton";
+import Divider from "@mui/material/Divider";
+import List from "@mui/material/List";
 export function LeftDrawer(props) {
     // Global app
     const app = useAppContext();

package/lib/mjs/pages/ListPage.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs, useDimensions } from "@etsoo/react";
-import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { ScrollerListEx } from "../ScrollerListEx";
 import { SearchBar } from "../SearchBar";
 import { CommonPage } from "./CommonPage";
 import { GridUtils } from "../GridUtils";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 /**
  * List page
  * @param props Props

package/lib/mjs/pages/TablePage.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCombinedRefs, useDimensions } from "@etsoo/react";
-import { Box, Stack } from "@mui/material";
 import React from "react";
 import { MUGlobal } from "../MUGlobal";
 import { SearchBar } from "../SearchBar";
 import { TableEx, TableExMinWidth } from "../TableEx";
 import { CommonPage } from "./CommonPage";
 import { GridUtils } from "../GridUtils";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 /**
  * Table page
  * @param props Props

package/lib/mjs/pages/UserMenu.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EventWatcher } from "@etsoo/react";
-import { IconButton, Menu } from "@mui/material";
 import React from "react";
 import { useNavigate } from "react-router";
 import { UserAvatar } from "../UserAvatar";
+import IconButton from "@mui/material/IconButton";
+import Menu from "@mui/material/Menu";
 /**
  * Event watcher
  */

package/lib/mjs/pages/ViewPage.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScrollRestoration } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
-import { LinearProgress, Stack } from "@mui/material";
 import React from "react";
 import { Labels } from "../app/Labels";
 import { MUGlobal } from "../MUGlobal";
@@ -10,6 +9,8 @@ import { CommonPage } from "./CommonPage";
 import { MessageUtils } from "../messages/MessageUtils";
 import { OperationMessageContainer } from "../messages/OperationMessageContainer";
 import { ViewContainer } from "../ViewContainer";
+import LinearProgress from "@mui/material/LinearProgress";
+import Stack from "@mui/material/Stack";
 /**
  * View page
  * @param props Props

package/lib/mjs/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/mjs/texts/DateText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { DateUtils } from "@etsoo/shared";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 /**
  * Date text
  * @param props Props

package/lib/mjs/texts/MoneyText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NumberUtils } from "@etsoo/shared";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 /**
  * Money text
  * @param props Props

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

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

package/lib/mjs/texts/NumberText.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { NumberUtils } from "@etsoo/shared";
-import { Typography } from "@mui/material";
+import Typography from "@mui/material/Typography";
 /**
  * Number text
  * @param props Props

package/lib/mjs/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/mjs/useCurrentBreakpoint.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.2",
+  "version": "1.5.3",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,12 +40,12 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.19",
+    "@etsoo/appscript": "^1.6.20",
     "@etsoo/notificationbase": "^1.1.59",
-    "@etsoo/react": "^1.8.33",
+    "@etsoo/react": "^1.8.34",
     "@etsoo/shared": "^1.2.63",
-    "@mui/icons-material": "^6.4.8",
-    "@mui/material": "^6.4.8",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/material": "^7.0.0",
     "@mui/x-data-grid": "^7.28.1",
     "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -65,17 +65,17 @@
     "@emotion/react": "$@emotion/react"
   },
   "devDependencies": {
-    "@babel/cli": "^7.26.4",
+    "@babel/cli": "^7.27.0",
     "@babel/core": "^7.26.10",
     "@babel/plugin-transform-runtime": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
-    "@babel/preset-typescript": "^7.26.0",
-    "@babel/runtime-corejs3": "^7.26.10",
+    "@babel/preset-typescript": "^7.27.0",
+    "@babel/runtime-corejs3": "^7.27.0",
     "@testing-library/react": "^16.2.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.19",
+    "@types/react": "^18.3.20",
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^18.3.5",
     "@types/react-input-mask": "^3.0.6",

package/src/AddresSelector.tsx

@@ -5,13 +5,14 @@ import {
   AddressState,
   IApiPayload
 } from "@etsoo/appscript";
-import { FormLabel, Grid2, GridSize } from "@mui/material";
 import React from "react";
 import { ComboBox } from "./ComboBox";
 import { Tiplist } from "./Tiplist";
 import { ResponsiveStyleValue } from "./ResponsiveStyleValue";
 import { RegionsRQ } from "./RegionsRQ";
 import { useAppContext } from "./app/ReactApp";
+import Grid, { GridSize } from "@mui/material/Grid";
+import FormLabel from "@mui/material/FormLabel";
 
 /**
  * Address field
@@ -317,17 +318,17 @@ export function AddressSelector(props: AddressSelectorProps) {
   return (
     <React.Fragment>
       {label && (
-        <Grid2 size={{ xs: 12 }}>
+        <Grid size={{ xs: 12 }}>
           <FormLabel
             required={required}
             sx={{ fontSize: (theme) => theme.typography.caption }}
           >
             {label}
           </FormLabel>
-        </Grid2>
+        </Grid>
       )}
       {!hideRegion && (
-        <Grid2 size={breakPoints}>
+        <Grid size={breakPoints}>
           <Tiplist<AddressRegionDb>
             label={regionLabel}
             name={AddressField.Region}
@@ -352,9 +353,9 @@ export function AddressSelector(props: AddressSelectorProps) {
               handleChange([AddressField.Region, value])
             }
           />
-        </Grid2>
+        </Grid>
       )}
-      <Grid2 size={breakPoints}>
+      <Grid size={breakPoints}>
         <ComboBox<AddressState>
           name={AddressField.State}
           label={stateLabel}
@@ -369,8 +370,8 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.State, value])
           }
         />
-      </Grid2>
-      <Grid2 size={breakPoints}>
+      </Grid>
+      <Grid size={breakPoints}>
         <ComboBox<AddressCity>
           name={AddressField.City}
           label={cityLabel}
@@ -380,8 +381,8 @@ export function AddressSelector(props: AddressSelectorProps) {
           options={cities}
           onChange={(_event, value) => handleChange([AddressField.City, value])}
         />
-      </Grid2>
-      <Grid2 size={breakPoints}>
+      </Grid>
+      <Grid size={breakPoints}>
         <ComboBox<AddressDistrict>
           name={AddressField.District}
           label={districtLabel}
@@ -393,7 +394,7 @@ export function AddressSelector(props: AddressSelectorProps) {
             handleChange([AddressField.District, value])
           }
         />
-      </Grid2>
+      </Grid>
     </React.Fragment>
   );
 }

package/src/AuditDisplay.tsx

@@ -1,10 +1,13 @@
 import { Utils } from "@etsoo/shared";
-import { Button, Divider, Theme, Typography, useTheme } from "@mui/material";
 import React, { CSSProperties } from "react";
 import { ListMoreDisplay, ListMoreDisplayProps } from "./ListMoreDisplay";
 import { ShowDataComparison } from "./ShowDataComparison";
 import { AuditLineDto } from "@etsoo/appscript";
 import { useAppContext } from "./app/ReactApp";
+import { Theme, 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 props

package/src/AutocompleteExtendedProps.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";
 
 /**