@etsoo/materialui 1.6.39 → 1.6.42

package/lib/mjs/NotifierMU.js

@@ -177,7 +177,7 @@ export class NotificationMU extends NotificationReact {
             this.dismiss();
             return true;
         };
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { ...inputProps, children: [content, _jsx(Typography, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { ...inputProps, children: [content, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();
@@ -263,7 +263,7 @@ export class NotificationMU extends NotificationReact {
                         return false;
                     }
                 }
-            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { dividers: true, children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
+            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { dividers: true, children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
                                     if (this.onReturn)
                                         this.onReturn(undefined);
                                     this.dismiss();
@@ -293,11 +293,15 @@ export class NotificationMU extends NotificationReact {
         return (_jsx(Backdrop, { className: className, sx: {
                 color: "#fff",
                 zIndex: (theme) => theme.zIndex.modal + 1
-            }, open: this.open, ...options, children: _jsxs(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
+            }, open: this.open, ...options, children: _jsxs(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flexWrap: "nowrap",
+                    alignItems: "center",
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }
-                }, children: [_jsx(CircularProgress, { ...setupProps }), content && (_jsx(Box, { maxWidth: maxWidth === false ? undefined : maxWidth, children: content }))] }) }, this.id));
+                }, children: [_jsx(CircularProgress, { ...setupProps }), content && (_jsx(Box, { sx: { maxWidth: maxWidth === false ? undefined : maxWidth }, children: content }))] }) }, this.id));
     }
     /**
      * Render method
@@ -414,7 +418,10 @@ export class NotifierMU extends NotifierReact {
         // Use SnackBar for layout
         return (_jsx(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === NotificationAlign.Center
                 ? { position: "fixed", top: "50%!important" }
-                : undefined, open: true, children: _jsx(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
+                : undefined, open: true, children: _jsx(Box, { sx: {
+                    display: "flex",
+                    flexDirection: "column",
+                    flexWrap: "nowrap",
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }

package/lib/mjs/OptionGroup.js

@@ -106,5 +106,5 @@ export function OptionGroup(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })) : (_jsx(Box, { sx: { paddingLeft: 2, paddingY: "7px" }, children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/mjs/OptionGroupFlag.js

@@ -88,5 +88,5 @@ export function OptionGroupFlag(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
+                        } })) : (_jsx(Box, { sx: { paddingLeft: 2, paddingY: "7px" }, children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/mjs/QuickList.js

@@ -18,7 +18,7 @@ export function QuickList(props) {
     // Global app
     const app = useAppContext();
     // Destruct
-    const { buttonProps = {}, label, inputProps, itemLabel = DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = app?.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { buttonProps = {}, label, inputProps, itemLabel = DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = app?.get("noMatches"), spacing = 1, onItemClick, sx, ...rest } = props;
     const { onClick, ...buttonRest } = buttonProps;
     // States
     const [loading, setLoading] = React.useState(false);
@@ -34,12 +34,12 @@ export function QuickList(props) {
         loadDataLocal();
     }, []);
     // Layout
-    return (_jsxs(VBox, { gap: gap, height: height, ...rest, children: [_jsx(InputField, { label: label, onChangeDelay: (event) => {
+    return (_jsxs(VBox, { spacing: spacing, sx: { height: "480px", ...sx }, ...rest, children: [_jsx(InputField, { label: label, onChangeDelay: (event) => {
                     // Stop bubble
                     event.preventDefault();
                     event.stopPropagation();
                     loadDataLocal(event.target.value);
-                }, fullWidth: true, ...inputProps }), loading ? (_jsx(LinearProgress, {})) : items.length === 0 ? (_jsx(Typography, { textAlign: "center", children: noMatchesLabel })) : (_jsx(List, { children: items.map((item) => (_jsx(ListItem, { disablePadding: true, ...itemProps, children: _jsx(ListItemButton, { onClick: (event) => {
+                }, fullWidth: true, ...inputProps }), loading ? (_jsx(LinearProgress, {})) : items.length === 0 ? (_jsx(Typography, { align: "center", children: noMatchesLabel })) : (_jsx(List, { children: items.map((item) => (_jsx(ListItem, { disablePadding: true, ...itemProps, children: _jsx(ListItemButton, { onClick: (event) => {
                             if (onClick)
                                 onClick(event);
                             if (!event.defaultPrevented && onItemClick)

package/lib/mjs/ResponsibleContainer.js

@@ -141,8 +141,11 @@ export function ResponsibleContainer(props) {
     return (_jsxs(Box, { sx: containerBoxSx == null
             ? undefined
             : containerBoxSx(paddings, hasFields, showDataGrid), children: [_jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], className: "SearchBox", sx: {
+                            marginBottom: hasFields
+                                ? `${searchBarBottom}px!important`
+                                : undefined,
                             height: hasFields ? searchBarHeight : 0
-                        }, marginBottom: hasFields ? `${searchBarBottom}px!important` : undefined, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
+                        }, children: searchBar }), list] }), pullToRefresh && pullContainer && list != null && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: () => state.ref?.reset(), shouldPullToRefresh: () => {
                     const container = document.querySelector(pullContainer);
                     return !container?.scrollTop;
                 } }))] }));

package/lib/mjs/SearchBar.js

@@ -242,7 +242,12 @@ export function SearchBar(props) {
     return (_jsxs(React.Fragment, { children: [_jsx("form", { id: "SearchBarForm", className: className, onChange: handleForm, ref: (form) => {
                     if (form)
                         state.form = form;
-                }, children: _jsxs(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", justifyContent: "center", alignItems: "center", direction: "row", spacing: `${itemGap}px`, width: width, overflow: "hidden", paddingTop: "6px", sx: {
+                }, children: _jsxs(Stack, { ref: dimensions[0][0], className: "SearchBarContainer", direction: "row", spacing: `${itemGap}px`, sx: {
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width,
+                        overflow: "hidden",
+                        paddingTop: "6px",
                         "& > :not(style)": {
                             flexBasis: "auto",
                             flexGrow: 0,
@@ -265,7 +270,9 @@ export function SearchBar(props) {
                 }, open: open, onClose: () => updateOpen(false), children: [top === true && _jsx(Toolbar, {}), _jsx("form", { onChange: moreFormChange, ref: (form) => {
                             if (form)
                                 state.moreForm = form;
-                        }, children: _jsx(Stack, { direction: "column", alignItems: "stretch", spacing: 2, padding: 2, sx: {
+                        }, children: _jsx(Stack, { direction: "column", spacing: 2, sx: {
+                                padding: 2,
+                                alignItems: "stretch",
                                 "& > :not(style)": {
                                     minWidth: "100px"
                                 }

package/lib/mjs/SearchField.js

@@ -10,14 +10,8 @@ import TextField from "@mui/material/TextField";
  */
 export function SearchField(props) {
     // Destruct
-    const { changeDelay, InputLabelProps = {}, InputProps = {}, inputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, ...rest } = props;
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
-    // Min characters
-    inputProps["data-min-chars"] = minChars;
+    const { changeDelay, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, minChars = 0, slotProps, ...rest } = props;
+    const { input, inputLabel, htmlInput, ...restSlotProps } = slotProps ?? {};
     const isMounted = React.useRef(true);
     const delayed = onChange != null && changeDelay != null && changeDelay >= 1
         ? useDelayedExecutor(onChange, changeDelay)
@@ -46,5 +40,10 @@ export function SearchField(props) {
         };
     }, []);
     // Layout
-    return (_jsx(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, inputProps: inputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
+    return (_jsx(TextField, { onChange: onChangeEx, size: size, variant: variant, slotProps: {
+            input: { readOnly, ...input },
+            inputLabel: { shrink: MUGlobal.searchFieldShrink, ...inputLabel },
+            htmlInput: { ["data-min-chars"]: minChars, ...htmlInput },
+            ...restSlotProps
+        }, ...rest }));
 }

package/lib/mjs/SwitchAnt.js

@@ -31,12 +31,12 @@ export function SwitchAnt(props) {
         setControlChecked(checked);
     };
     // Layout
-    return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
+    return (_jsxs(Stack, { direction: "row", spacing: 1, sx: { alignItems: "center" }, children: [_jsx(Typography, { onClick: () => controlChecked && ref.current?.click(), sx: {
                     cursor: "pointer",
                     color: controlChecked
                         ? undefined
                         : (theme) => activeColor ?? theme.palette.warning.main
-                }, children: startLabel }), _jsx(Switch, { checked: controlChecked, inputRef: ref, value: value, onChange: onChangeLocal, ...rest }), _jsx(Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
+                }, children: startLabel }), _jsx(Switch, { checked: controlChecked, ref: ref, value: value, onChange: onChangeLocal, ...rest }), _jsx(Typography, { onClick: () => !controlChecked && ref.current?.click(), sx: {
                     cursor: "pointer",
                     color: controlChecked
                         ? (theme) => activeColor ?? theme.palette.warning.main

package/lib/mjs/SwitchField.js

@@ -29,5 +29,5 @@ export function SwitchField(props) {
                             "& input": {
                                 display: "none"
                             }
-                        } })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && _jsx(FormHelperText, { children: helperText })] }));
+                        } })) : (_jsx(Box, { sx: { paddingLeft: 2, paddingY: "7px" }, children: group }))] }), helperText && _jsx(FormHelperText, { children: helperText })] }));
 }

package/lib/mjs/TextFieldEx.js

@@ -15,17 +15,12 @@ export function TextFieldEx(props) {
     // Labels
     const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
     // Destructure
-    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, slotProps, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, mRef, ...rest } = props;
+    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, slotProps, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, mRef, ...rest } = props;
     // Slot props
     const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
-    // Shrink
-    InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // State
     const [errorText, updateErrorText] = React.useState();
     const [empty, updateEmpty] = React.useState(true);
-    // Read only
-    if (readOnly != null)
-        InputProps.readOnly = readOnly;
     // Calculate
     let errorEx = error;
     let helperTextEx = helperText;
@@ -84,10 +79,6 @@ export function TextFieldEx(props) {
         }
         preventDefault(e);
     };
-    // Show password and/or clear button
-    if (!empty && (showPassword || showClear)) {
-        InputProps.endAdornment = (_jsxs(InputAdornment, { position: "end", children: [showPassword && (_jsx(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: _jsx(VisibilityIcon, {}) })), showClear && (_jsx(IconButton, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: _jsx(ClearIcon, {}) }))] }));
-    }
     // Extend key precess
     const onKeyPressEx = onEnter == null
         ? onKeyDown
@@ -143,7 +134,11 @@ export function TextFieldEx(props) {
     }, []);
     // Textfield
     return (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), onChange: onChangeEx, onKeyDown: onKeyPressEx, slotProps: {
-            input: { readOnly, ...input, ...InputProps },
+            input: {
+                endAdornment: !empty && (showPassword || showClear) ? (_jsxs(InputAdornment, { position: "end", children: [showPassword && (_jsx(IconButton, { tabIndex: -1, onContextMenu: (event) => event.preventDefault(), onMouseDown: touchStart, onMouseUp: touchEnd, onTouchStart: touchStart, onTouchCancel: touchEnd, onTouchEnd: touchEnd, title: showIt, children: _jsx(VisibilityIcon, {}) })), showClear && (_jsx(IconButton, { onClick: clearClick, tabIndex: -1, title: clearLabel, children: _jsx(ClearIcon, {}) }))] })) : undefined,
+                readOnly,
+                ...input
+            },
             inputLabel: {
                 shrink: MUGlobal.inputFieldShrink,
                 ...inputLabel

package/lib/mjs/Tiplist.js

@@ -56,7 +56,7 @@ export function Tiplist(props) {
         }
         // https://stackoverflow.com/questions/15738259/disabling-chrome-autofill
         // https://html.spec.whatwg.org/multipage/form-control-infrastructure.html
-        Object.assign(params.inputProps, {
+        Object.assign(params.slotProps.htmlInput, {
             autoComplete: inputAutoComplete,
             "data-reset": inputReset
         });
@@ -170,7 +170,7 @@ export function Tiplist(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : (localIdValue ?? ""))}`, readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

package/lib/mjs/TiplistPro.js

@@ -156,7 +156,7 @@ export function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : (localIdValue ?? "")), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/lib/mjs/TwoFieldInput.d.ts

@@ -3,7 +3,7 @@ type ValueType = string | number | Date | null | undefined;
 /**
  * TwoField Input props
  */
-export type TwoFieldInputProps = Omit<InputFieldProps, "InputProps" | "value"> & {
+export type TwoFieldInputProps = Omit<InputFieldProps, "value"> & {
     /**
      * Values
      */

package/lib/mjs/TwoFieldInput.js

@@ -13,7 +13,8 @@ import Input from "@mui/material/Input";
  */
 export function TwoFieldInput(props) {
     // Destruct
-    const { name, inputProps, type = inputProps?.inputMode, values, onValuesChange, onChange, onInput, ...rest } = props;
+    const { name, slotProps, type, values, onValuesChange, onChange, onInput, ...rest } = props;
+    const { htmlInput, input, ...restSlotProps } = slotProps ?? {};
     // Local values
     const localValues = values == null
         ? [null, null]
@@ -54,11 +55,15 @@ export function TwoFieldInput(props) {
         valueRef.current = localValues;
     }, [localValues]);
     // Layout
-    return (_jsx(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], inputProps: inputProps, InputProps: {
-            endAdornment: (_jsxs(InputAdornment, { position: "end", sx: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: 1
-                }, children: [_jsx(ArrowRightAltIcon, {}), _jsx(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, inputProps: inputProps })] }))
+    return (_jsx(InputField, { name: `${name}-start`, type: type, value: formatValue(localValues[0], type), ref: dimensions[0][0], slotProps: {
+            input: {
+                ...input,
+                endAdornment: (_jsxs(InputAdornment, { position: "end", sx: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 1
+                    }, children: [_jsx(ArrowRightAltIcon, {}), _jsx(Input, { type: type, name: `${name}-end`, value: formatValue(localValues[1], type), disableUnderline: true, onInput: onInput, onChange: handleChange, slotProps: { input: htmlInput } })] }))
+            },
+            ...restSlotProps
         }, onInput: onInput, onChange: handleChange, ...rest }));
 }

package/lib/mjs/UserAvatarEditor.js

@@ -9,6 +9,7 @@ import RemoveIcon from "@mui/icons-material/Remove";
 import AddIcon from "@mui/icons-material/Add";
 import { Labels } from "./app/Labels";
 import { FileUploadButton } from "./FileUploadButton";
+import AvatarEditor from "react-avatar-editor";
 import Stack from "@mui/material/Stack";
 import Skeleton from "@mui/material/Skeleton";
 import ButtonGroup from "@mui/material/ButtonGroup";
@@ -36,7 +37,7 @@ export function UserAvatarEditor(props) {
     // Calculated max width
     const maxWidthCalculated = maxWidth == null || maxWidth < defaultSize ? 2 * width : maxWidth;
     // Ref
-    const ref = React.createRef();
+    const ref = React.useRef(null);
     // Image type
     const type = React.useRef("image/jpeg");
     // Button ref
@@ -81,6 +82,10 @@ export function UserAvatarEditor(props) {
     };
     // Handle image load
     const handleLoad = (imageInfo) => {
+        if (imageInfo.resource == null ||
+            imageInfo.height == null ||
+            imageInfo.width == null)
+            return;
         // Ignore too small images
         if (imageInfo.resource.width < 10 || imageInfo.resource.height < 10)
             return;
@@ -161,8 +166,6 @@ export function UserAvatarEditor(props) {
             }
         }
     };
-    // Load the component
-    const AE = React.lazy(() => import("react-avatar-editor"));
-    return (_jsxs(Stack, { direction: "column", spacing: 0.5, width: containerWidth, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AE, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
-                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { paddingBottom: 2 }, alignItems: "center", children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
+    return (_jsxs(Stack, { direction: "column", spacing: 0.5, sx: { width: containerWidth }, children: [_jsx(FileUploadButton, { variant: "outlined", size: "medium", startIcon: _jsx(ImageIcon, {}), fullWidth: true, onUploadFiles: handleFileUpload, inputProps: { accept: "image/png, image/jpeg" }, children: selectFileLabel }), _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_jsx(React.Suspense, { fallback: _jsx(Skeleton, { variant: "rounded", width: width, height: localHeight }), children: _jsx(AvatarEditor, { ref: ref, border: border, width: width, height: localHeight, onLoadSuccess: handleLoad, image: previewImage ??
+                                "data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=", scale: editorState.scale, rotate: editorState.rotate }) }), _jsxs(ButtonGroup, { size: "small", orientation: "vertical", disabled: !ready, children: [_jsx(Button, { onClick: () => handleRotate(90), title: labels.rotateRight, children: _jsx(RotateRightIcon, {}) }), _jsx(Button, { onClick: () => handleRotate(-90), title: labels.rotateLeft, children: _jsx(RotateLeftIcon, {}) }), _jsx(Button, { onClick: handleReset, title: labels.reset, children: _jsx(ClearAllIcon, {}) })] })] }), _jsxs(Stack, { spacing: 0.5, direction: "row", sx: { alignItems: "center", paddingBottom: 2 }, children: [_jsx(IconButton, { size: "small", disabled: !ready || editorState.scale <= min, onClick: () => adjustScale(false), children: _jsx(RemoveIcon, {}) }), _jsx(Slider, { title: labels.zoom, disabled: !ready, min: min, max: max, step: step, value: editorState.scale, valueLabelDisplay: "auto", valueLabelFormat: (value) => `${Math.round(100 * value) / 100}`, marks: marks, onChange: handleZoom }), _jsx(IconButton, { size: "small", disabled: !ready || editorState.scale >= max, onClick: () => adjustScale(true), children: _jsx(AddIcon, {}) })] }), _jsx(Button, { ref: buttonRef, variant: "contained", startIcon: _jsx(DoneIcon, {}), disabled: !ready, onClick: handleDone, children: labels.done })] }));
 }

package/lib/mjs/ViewContainer.js

@@ -156,7 +156,7 @@ export function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsx(Typography, { variant: "caption", component: horizontal ? "span" : "div", children: label })), typeof data === "object" ? (data) : horizontal ? (_jsx(Typography, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
+    return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsx(Typography, { variant: "caption", component: horizontal ? "span" : "div", children: label })), typeof data === "object" ? (data) : horizontal ? (_jsx(Typography, { variant: "subtitle2", component: "span", sx: { marginLeft: 0.5 }, children: data })) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
 }
 export function ViewContainer(props) {
     // Global app
@@ -226,5 +226,5 @@ export function ViewContainer(props) {
     }, [app, fields, data, bp]);
     let leftResult;
     // Layout
-    return (_jsxs(Grid, { container: true, justifyContent: "left", className: "ET-ViewContainer", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && (_jsxs(React.Fragment, { children: [_jsx(Grid, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), _jsx(Grid, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
+    return (_jsxs(Grid, { container: true, className: "ET-ViewContainer", ref: gridRef, spacing: spacing, sx: { justifyContent: "left" }, children: [leftContainer && (leftResult = leftContainer(data)) != null && (_jsxs(React.Fragment, { children: [_jsx(Grid, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), _jsx(Grid, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }));
 }

package/lib/mjs/custom/CustomAttributeArea.js

@@ -35,7 +35,7 @@ function InputItemUIs({ data }) {
     const types = Object.keys(CustomFieldUtils.customFieldCreators);
     const nameRef = React.useRef(null);
     const optionsRef = React.useRef(null);
-    return (_jsxs(Grid, { container: true, spacing: 2, marginTop: 1, children: [_jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
+    return (_jsxs(Grid, { container: true, spacing: 2, sx: { marginTop: 1 }, children: [_jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
                         const type = item?.id;
                         optionsRef.current.disabled =
                             type !== "combobox" &&
@@ -159,7 +159,7 @@ function InputUIs({ source, onChange }) {
             console.error("Failed to parse source:", error);
         }
     }, [source]);
-    return (_jsxs(React.Fragment, { children: [_jsxs(HBox, { marginBottom: 0.5, gap: 1, alignItems: "center", children: [_jsx(Typography, { children: labels.sortTip }), _jsx(Button, { size: "small", color: "primary", variant: "outlined", startIcon: _jsx(AddIcon, {}), onClick: () => editItem(), children: labels.add })] }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDSortableList, { items: items, idField: (item) => item.name, labelField: (item) => item.label || item.name, onChange: (items) => doChange(items), itemRenderer: (data, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { container: true, size: { xs: 12, sm: 12 }, ref: ref, style: style, gap: 1, children: [_jsx(Grid, { size: smallSize, children: _jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }) }), _jsxs(Grid, { size: size, children: [index + 1, " - ", data.type, " / ", data.space] }), _jsxs(Grid, { size: size, children: [data.name, " - ", data.label] }), _jsxs(Grid, { size: smallSize, children: [_jsx(IconButton, { size: "small", title: labels.delete, onClick: () => doChange(items.filter((item) => item.name !== data.name)), children: _jsx(DeleteIcon, {}) }), _jsx(IconButton, { size: "small", title: labels.edit, onClick: () => editItem(data), children: _jsx(EditIcon, {}) })] })] })) }) }) }) })] }));
+    return (_jsxs(React.Fragment, { children: [_jsxs(HBox, { spacing: 1, sx: { marginTop: 0.5, alignItems: "center" }, children: [_jsx(Typography, { children: labels.sortTip }), _jsx(Button, { size: "small", color: "primary", variant: "outlined", startIcon: _jsx(AddIcon, {}), onClick: () => editItem(), children: labels.add })] }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx(Grid, { container: true, spacing: 0, children: _jsx(DnDSortableList, { items: items, idField: (item) => item.name, labelField: (item) => item.label || item.name, onChange: (items) => doChange(items), itemRenderer: (data, style, { sortable: { index }, ref, handleRef }) => (_jsxs(Grid, { container: true, size: { xs: 12, sm: 12 }, ref: ref, style: style, spacing: 1, children: [_jsx(Grid, { size: smallSize, children: _jsx(IconButton, { style: { cursor: "move" }, size: "small", title: labels.dragIndicator, ref: handleRef, children: _jsx(DragIndicatorIcon, {}) }) }), _jsxs(Grid, { size: size, children: [index + 1, " - ", data.type, " / ", data.space] }), _jsxs(Grid, { size: size, children: [data.name, " - ", data.label] }), _jsxs(Grid, { size: smallSize, children: [_jsx(IconButton, { size: "small", title: labels.delete, onClick: () => doChange(items.filter((item) => item.name !== data.name)), children: _jsx(DeleteIcon, {}) }), _jsx(IconButton, { size: "small", title: labels.edit, onClick: () => editItem(data), children: _jsx(EditIcon, {}) })] })] })) }) }) }) })] }));
 }
 /**
  * Custom attribute area

package/lib/mjs/custom/CustomFieldViewer.js

@@ -39,7 +39,8 @@ export function CustomFieldViewer(props) {
     if (data == null || typeof data !== "object" || Array.isArray(data)) {
         throw new Error("Invalid JSON data");
     }
-    return (_jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
+    return (_jsx(Grid, { container: true, spacing: spacing, sx: {
+            justifyContent: "left",
             ".MuiTypography-subtitle2": {
                 fontWeight: "bold"
             }
@@ -50,6 +51,6 @@ export function CustomFieldViewer(props) {
                 return;
             // Field value
             const value = Utils.getNestedValue(data, name);
-            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));
+            return (_jsx(Grid, { size: CustomFieldUtils.transformSpace(field.space), ...field.gridItemProps, children: _jsxs(VBox, { spacing: verticalGap, children: [_jsx(Typography, { component: "div", fontWeight: "bold", fontSize: "small", ...titleProps, children: field.label ?? name }), _jsx(Typography, { ...valueProps, children: valueLabelFormatter(value, field) })] }) }, name ?? index));
         }) }));
 }

package/lib/mjs/custom/CustomFieldWindow.js

@@ -71,7 +71,8 @@ export function CustomFieldWindow(props) {
                     }
                 }, {
                     fullScreen: app.smDown,
-                    inputs: (_jsx(Stack, { marginTop: 1.5, children: _jsx(Grid, { container: true, justifyContent: "left", spacing: spacing, sx: {
+                    inputs: (_jsx(Stack, { sx: { marginTop: 1.5 }, children: _jsx(Grid, { container: true, spacing: spacing, sx: {
+                                justifyContent: "left",
                                 ".MuiTypography-subtitle2": {
                                     fontWeight: "bold"
                                 }

package/lib/mjs/custom/FieldJson.js

@@ -46,5 +46,5 @@ export const FieldJson = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return (_jsxs(Typography, { children: ["No name for FieldJson ", JSON.stringify(field)] }));
     }
-    return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+    return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, slotProps: { htmlInput: { maxLength: 1280 } }, inputRef: inputRef, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/mjs/custom/FieldTexarea.js

@@ -24,5 +24,5 @@ export const FieldTexarea = ({ field, mref, onChange, defaultValue }) => {
     if (!name) {
         return (_jsxs(Typography, { children: ["No name for FieldTextarea ", JSON.stringify(field)] }));
     }
-    return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, inputProps: { maxLength: 1280 }, inputRef: inputRef, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
+    return (_jsx(InputField, { label: field.label ?? "", helperText: field.helperText, name: name, fullWidth: true, multiline: true, rows: 4, slotProps: { htmlInput: { maxLength: 1280 } }, inputRef: inputRef, defaultValue: defaultValue, onChange: () => onChange(name, getValue()), ...field.mainSlotProps }));
 };

package/lib/mjs/index.d.ts

@@ -134,3 +134,4 @@ export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
 export * from "./ViewContainer";
+export { default as AccountTreeIcon } from "@mui/icons-material/AccountTree";

package/lib/mjs/index.js

@@ -134,3 +134,5 @@ export * from "./TooltipClick";
 export * from "./UserAvatar";
 export * from "./UserAvatarEditor";
 export * from "./ViewContainer";
+// Icons
+export { default as AccountTreeIcon } from "@mui/icons-material/AccountTree";

package/lib/mjs/pages/EditPage.js

@@ -17,7 +17,9 @@ export function EditPage(props) {
     const { children, isEditing, onDelete, onSubmit, paddings = MUGlobal.pagePaddings, scrollContainer = globalThis, supportBack = true, submitDisabled = false, bottomPart, topPart, operationMessageHandler, gridSpacing = MUGlobal.pagePaddings, ...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(Grid, { container: true, justifyContent: "left", spacing: gridSpacing, paddingTop: 1, children: children }), _jsxs(Grid, { container: true, position: "sticky", display: "flex", gap: gridSpacing, 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, spacing: gridSpacing, sx: { justifyContent: "left", paddingTop: 1 }, children: children }), _jsxs(Grid, { container: true, spacing: gridSpacing, sx: {
+                            position: "sticky",
+                            display: "flex",
                             top: "auto",
                             bottom: (theme) => MUGlobal.updateWithTheme(gridSpacing, theme.spacing),
                             paddingTop: gridSpacing

package/lib/mjs/pages/ViewPage.js

@@ -17,8 +17,14 @@ import Stack from "@mui/material/Stack";
  * @returns Component
  */
 export function ViewPageActionBar(props) {
-    const { actionPaddings = MUGlobal.pagePaddings, ...rest } = props;
-    return (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, ...rest }));
+    const { actionPaddings = MUGlobal.pagePaddings, sx, ...rest } = props;
+    return (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", spacing: actionPaddings, sx: {
+            flexWrap: "wrap",
+            justifyContent: "center",
+            paddingTop: actionPaddings,
+            paddingBottom: actionPaddings,
+            ...sx
+        }, ...rest }));
 }
 /**
  * View page

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.39",
+  "version": "1.6.42",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,23 +40,23 @@
     "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.59",
-    "@etsoo/notificationbase": "^1.1.68",
-    "@etsoo/react": "^1.8.83",
-    "@etsoo/shared": "^1.2.81",
-    "@mui/icons-material": "^7.3.9",
-    "@mui/material": "^7.3.9",
-    "@mui/x-data-grid": "^8.28.1",
+    "@etsoo/appscript": "^1.6.60",
+    "@etsoo/notificationbase": "^1.1.69",
+    "@etsoo/react": "^1.8.84",
+    "@etsoo/shared": "^1.2.82",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/x-data-grid": "^9.0.1",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.3",
     "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
-    "react": "^19.2.4",
-    "react-avatar-editor": "^13.0.2",
+    "react": "^19.2.5",
+    "react-avatar-editor": "^15.1.0",
     "react-chartjs-2": "^5.3.1",
-    "react-dom": "^19.2.4",
+    "react-dom": "^19.2.5",
     "react-draggable": "^4.5.0",
     "react-imask": "7.6.1"
   },
@@ -80,8 +80,8 @@
     "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
     "@vitejs/plugin-react": "^6.0.1",
-    "jsdom": "^29.0.1",
-    "typescript": "^5.9.3",
-    "vitest": "^4.1.2"
+    "jsdom": "^29.0.2",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.4"
   }
 }

package/src/ButtonPopupCheckbox.tsx

@@ -1,7 +1,7 @@
 import Button, { ButtonProps } from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
 import React from "react";
-import { DataTypes, IdType } from "@etsoo/shared";
+import { IdType } from "@etsoo/shared";
 import Grid, { GridSize } from "@mui/material/Grid";
 import Typography from "@mui/material/Typography";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
@@ -168,7 +168,7 @@ function ButtonPopupList<D extends DnDItemType>(
   }, [value]);
 
   return (
-    <VBox gap={2}>
+    <VBox spacing={2}>
       <DnDSortableList<D>
         component={Grid}
         componentProps={{ container: true, spacing: 0 }}
@@ -188,12 +188,14 @@ function ButtonPopupList<D extends DnDItemType>(
         ) => (
           <Grid
             size={itemSize}
-            display="flex"
-            justifyContent="flex-start"
-            alignItems="center"
-            gap={1}
+            spacing={1}
             ref={ref}
-            style={style}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "flex-start",
+              ...style
+            }}
           >
             <IconButton
               style={{ cursor: "move" }}
@@ -226,7 +228,7 @@ function ButtonPopupList<D extends DnDItemType>(
         mRef={dndRef}
       ></DnDSortableList>
       {onAdd && (
-        <HBox gap={1}>
+        <HBox spacing={1}>
           <TextField
             variant="outlined"
             label={labels?.more}