@etsoo/materialui 1.3.57 → 1.3.59

package/lib/MobileListItemRenderer.js

@@ -1,5 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Card, CardContent, CardHeader, LinearProgress } from '@mui/material';
-import React from 'react';
 import { MoreFab } from './MoreFab';
 /**
  * Default mobile list item renderer
@@ -11,25 +11,22 @@ import { MoreFab } from './MoreFab';
 export function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
     // Loading
     if (data == null)
-        return React.createElement(LinearProgress, null);
+        return _jsx(LinearProgress, {});
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
-    return (React.createElement(Card, { sx: {
+    return (_jsxs(Card, { sx: {
             height: itemHeight,
             ...margins
-        } },
-        React.createElement(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (React.createElement(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' } }),
-        React.createElement(CardContent, { sx: {
-                paddingTop: 0,
-                paddingBottom: cardActions == null
-                    ? Reflect.get(margins, 'marginBottom')
-                    : 0
-            } }, children),
-        cardActions));
+        }, children: [_jsx(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (_jsx(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' } }), _jsx(CardContent, { sx: {
+                    paddingTop: 0,
+                    paddingBottom: cardActions == null
+                        ? Reflect.get(margins, 'marginBottom')
+                        : 0
+                }, children: children }), cardActions] }));
 }

package/lib/MoneyInputField.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { IntInputField } from "./IntInputField";
 /**
@@ -7,5 +8,5 @@ export const MoneyInputField = React.forwardRef((props, ref) => {
     // Destruct
     const { step = 0.01, ...rest } = props;
     // Layout
-    return React.createElement(IntInputField, { ref: ref, step: step, ...rest });
+    return _jsx(IntInputField, { ref: ref, step: step, ...rest });
 });

package/lib/MoreFab.d.ts

@@ -42,4 +42,4 @@ export interface MoreFabProps extends CustomFabProps {
  * More fab
  * @returns Component
  */
-export declare function MoreFab(props: MoreFabProps): React.JSX.Element;
+export declare function MoreFab(props: MoreFabProps): import("react/jsx-runtime").JSX.Element;

package/lib/MoreFab.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
 import React from "react";
 import { Divider, Fab, IconButton, ListItemIcon, ListItemText, Menu, MenuItem } from "@mui/material";
@@ -21,7 +22,7 @@ export function MoreFab(props) {
     const { actions, drawArrow = true, anchorOrigin = {
         vertical: "top",
         horizontal: "right"
-    }, color = "primary", icon = React.createElement(MoreHorizIcon, null), iconButton = false, PaperProps = drawArrow
+    }, color = "primary", icon = _jsx(MoreHorizIcon, {}), iconButton = false, PaperProps = drawArrow
         ? {
             elevation: 0,
             sx: {
@@ -66,32 +67,28 @@ export function MoreFab(props) {
     };
     // No actions
     if (actions == null || actions.length == 0)
-        return React.createElement(React.Fragment, null);
+        return _jsx(React.Fragment, {});
     // Actions
     const actionsLocal = getActions(actions);
     // Has any icon
     const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
-    const main = iconButton ? (React.createElement(IconButton, { color: color, size: size, title: title, onClick: handleClick }, icon)) : (React.createElement(Fab, { color: color, size: size, title: title, onClick: handleClick }, icon));
-    return (React.createElement(React.Fragment, null,
-        main,
-        React.createElement(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, PaperProps: PaperProps }, actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (React.createElement(Divider, { key: index })) : (React.createElement(MenuItem, { key: label, ...(typeof action === "string"
-                ? action.includes("://")
-                    ? {
-                        component: "a",
-                        href: action,
-                        target: "_blank"
-                    }
-                    : { component: Link, to: action }
-                : Array.isArray(action)
-                    ? { component: Link, to: action[0], state: action[1] }
-                    : {
-                        onClick: (event) => {
-                            handleClose();
-                            if (typeof action === "function")
-                                action(event);
-                        }
-                    }) },
-            icon != null && React.createElement(ListItemIcon, null, icon),
-            React.createElement(ListItemText, { inset: icon == null && hasIcon }, label)))))));
+    const main = iconButton ? (_jsx(IconButton, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : (_jsx(Fab, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
+    return (_jsxs(React.Fragment, { children: [main, _jsx(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 === "-" ? (_jsx(Divider, {}, index)) : (_jsxs(MenuItem, { ...(typeof action === "string"
+                        ? action.includes("://")
+                            ? {
+                                component: "a",
+                                href: action,
+                                target: "_blank"
+                            }
+                            : { component: Link, to: action }
+                        : Array.isArray(action)
+                            ? { component: Link, to: action[0], state: action[1] }
+                            : {
+                                onClick: (event) => {
+                                    handleClose();
+                                    if (typeof action === "function")
+                                        action(event);
+                                }
+                            }), children: [icon != null && _jsx(ListItemIcon, { children: icon }), _jsx(ListItemText, { inset: icon == null && hasIcon, children: label })] }, label))) })] }));
 }

package/lib/NotifierMU.d.ts

@@ -18,7 +18,7 @@ export declare class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(props: NotificationRenderProps, className?: string): React.JSX.Element;
+    render(props: NotificationRenderProps, className?: string): import("react/jsx-runtime").JSX.Element;
 }
 /**
  * Antd notifier
@@ -37,7 +37,7 @@ export declare class NotifierMU extends NotifierReact {
      * @param children Children
      * @param options Other options
      */
-    protected createContainer: (align: NotificationAlign, children: React.ReactNode[]) => React.JSX.Element;
+    protected createContainer: (align: NotificationAlign, children: React.ReactNode[]) => import("react/jsx-runtime").JSX.Element;
     /**
      * Add raw definition
      * @param data Notification data definition

package/lib/NotifierMU.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NotificationAlign, NotificationMessageType, NotificationType } from "@etsoo/notificationbase";
 import { DomUtils } from "@etsoo/shared";
 import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, IconButton, Popover, Slider, Snackbar, styled, Switch, TextField, Typography } from "@mui/material";
@@ -37,19 +38,19 @@ export class NotificationMU extends NotificationReact {
         let title = this.title;
         let icon;
         if (this.type === NotificationMessageType.Success) {
-            icon = React.createElement(Done, { color: "primary" });
+            icon = _jsx(Done, { color: "primary" });
             title ?? (title = labels.success);
         }
         else if (this.type === NotificationMessageType.Info) {
-            icon = React.createElement(Info, null);
+            icon = _jsx(Info, {});
             title ?? (title = labels.info);
         }
         else if (this.type === NotificationMessageType.Warning) {
-            icon = React.createElement(Warning, { color: "secondary" });
+            icon = _jsx(Warning, { color: "secondary" });
             title ?? (title = labels.warning);
         }
         else {
-            icon = React.createElement(Error, { color: "error" });
+            icon = _jsx(Error, { color: "error" });
             title ?? (title = labels.alertTitle);
         }
         const setupProps = {
@@ -62,16 +63,7 @@ export class NotificationMU extends NotificationReact {
             await this.returnValue(undefined);
             return true;
         };
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options },
-            React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
-                icon,
-                React.createElement("span", { className: "dialogTitle" }, title),
-                closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
-                    React.createElement(CloseIcon, null)))),
-            React.createElement(DialogContent, null,
-                typeof this.content === "string" ? (React.createElement(DialogContentText, null, this.content)) : (this.content),
-                inputs),
-            React.createElement(DialogActions, null, buttons ? (buttons(this, callback)) : (React.createElement(LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButton }, okLabel)))));
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { className: "draggable-dialog-title", children: [icon, _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, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? (buttons(this, callback)) : (_jsx(LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButton, children: okLabel })) })] }, this.id));
     }
     // Create confirm
     createConfirm(_props, className) {
@@ -84,18 +76,7 @@ export class NotificationMU extends NotificationReact {
             await this.returnValue(value);
             return true;
         };
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options },
-            React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
-                React.createElement(Help, { color: "action" }),
-                React.createElement("span", { className: "dialogTitle" }, title),
-                closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
-                    React.createElement(CloseIcon, null)))),
-            React.createElement(DialogContent, null,
-                typeof this.content === "string" ? (React.createElement(DialogContentText, null, this.content)) : (this.content),
-                inputs),
-            React.createElement(DialogActions, null, buttons ? (buttons(this, callback)) : (React.createElement(React.Fragment, null,
-                cancelButton && (React.createElement(LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false) }, cancelLabel)),
-                React.createElement(LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButton }, okLabel))))));
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { className: "draggable-dialog-title", children: [_jsx(Help, { color: "action" }), _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, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? (buttons(this, callback)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), _jsx(LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButton, children: okLabel })] })) })] }, this.id));
     }
     createMessageColor() {
         if (this.type === NotificationMessageType.Danger)
@@ -109,7 +90,7 @@ export class NotificationMU extends NotificationReact {
     // Create message
     createMessage(props, className) {
         if (!this.open)
-            return React.createElement(React.Fragment, { key: this.id });
+            return _jsx(React.Fragment, {}, this.id);
         const { closable = false } = props;
         const setupProps = {
             severity: this.createMessageColor(),
@@ -117,11 +98,7 @@ export class NotificationMU extends NotificationReact {
         };
         // Setup callback
         const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
-        return (React.createElement(Fade, { in: true, key: this.id },
-            React.createElement(Alert, { ...setupProps, ...options, action: closable ? (React.createElement(IconButton, { size: "small", onClick: () => this.returnValue("CLOSE") },
-                    React.createElement(CloseIcon, null))) : undefined, onClose: () => this.dismiss(), className: className },
-                this.title && React.createElement(AlertTitle, null, this.title),
-                this.content)));
+        return (_jsx(Fade, { in: true, children: _jsxs(Alert, { ...setupProps, ...options, action: closable ? (_jsx(IconButton, { size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) })) : undefined, onClose: () => this.dismiss(), className: className, children: [this.title && _jsx(AlertTitle, { children: this.title }), this.content] }) }, this.id));
     }
     // Create prompt
     createPrompt(_props, className) {
@@ -180,13 +157,13 @@ export class NotificationMU extends NotificationReact {
         let value = undefined;
         if (inputs == null) {
             if (type === "switch") {
-                localInputs = (React.createElement(Switch, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
+                localInputs = (_jsx(Switch, { inputRef: inputRef, ...inputProps, value: "true", autoFocus: true, required: true }));
             }
             else if (type === "slider") {
-                localInputs = React.createElement(Slider, { onChange: (_e, v) => (value = v) });
+                localInputs = _jsx(Slider, { onChange: (_e, v) => (value = v) });
             }
             else {
-                localInputs = (React.createElement(TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...inputProps }));
+                localInputs = (_jsx(TextField, { inputRef: inputRef, onChange: () => setError(undefined), autoFocus: true, margin: "dense", fullWidth: true, type: type, required: true, ...inputProps }));
             }
         }
         else {
@@ -194,28 +171,15 @@ export class NotificationMU extends NotificationReact {
         }
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options },
-            React.createElement("form", { onSubmit: (event) => {
+        return (_jsx(Dialog, { open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: _jsxs("form", { onSubmit: (event) => {
                     event.preventDefault();
                     event.currentTarget.elements.namedItem("okButton")?.click();
                     return false;
-                } },
-                React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
-                    React.createElement(Info, { color: "primary" }),
-                    React.createElement("span", { className: "dialogTitle" }, title),
-                    closable && (React.createElement(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE") },
-                        React.createElement(CloseIcon, null)))),
-                React.createElement(DialogContent, null,
-                    typeof this.content === "string" ? (React.createElement(DialogContentText, null, this.content)) : (this.content),
-                    localInputs,
-                    React.createElement(Typography, { variant: "caption", display: "block", ref: errorRef, color: (theme) => theme.palette.error.main })),
-                React.createElement(DialogActions, null, buttons ? (buttons(this, handleSubmit)) : (React.createElement(React.Fragment, null,
-                    cancelButton && (React.createElement(Button, { color: "secondary", onClick: () => {
-                            if (this.onReturn)
-                                this.onReturn(undefined);
-                            this.dismiss();
-                        } }, cancelLabel)),
-                    React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton }, okLabel)))))));
+                }, children: [_jsxs(IconDialogTitle, { className: "draggable-dialog-title", children: [_jsx(Info, { 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, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { variant: "caption", display: "block", ref: errorRef, color: (theme) => theme.palette.error.main })] }), _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();
+                                    }, children: cancelLabel })), _jsx(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton, children: okLabel })] })) })] }) }, this.id));
     }
     createPopup(_props, className) {
         // Destruct
@@ -223,7 +187,7 @@ export class NotificationMU extends NotificationReact {
         const { content, id, open } = this;
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
-        return (React.createElement(Popover, { key: id, open: open, className: className, onClose: () => this.dismiss(), ...options }, content));
+        return (_jsx(Popover, { open: open, className: className, onClose: () => this.dismiss(), ...options, children: content }, id));
     }
     // Create loading
     createLoading(_props, className) {
@@ -238,17 +202,14 @@ export class NotificationMU extends NotificationReact {
             content = labels.loading.toString();
         // Setup callback
         const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
-        return (React.createElement(Backdrop, { key: this.id, className: className, sx: {
+        return (_jsx(Backdrop, { className: className, sx: {
                 color: "#fff",
                 zIndex: (theme) => theme.zIndex.modal + 1
-            }, open: this.open, ...options },
-            React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
+            }, open: this.open, ...options, children: _jsxs(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
                     }
-                } },
-                React.createElement(CircularProgress, { ...setupProps }),
-                content && (React.createElement(Box, { maxWidth: maxWidth === false ? undefined : maxWidth }, content)))));
+                }, children: [_jsx(CircularProgress, { ...setupProps }), content && (_jsx(Box, { maxWidth: maxWidth === false ? undefined : maxWidth, children: content }))] }) }, this.id));
     }
     /**
      * Render method
@@ -297,21 +258,20 @@ export class NotifierMU extends NotifierReact {
             const alignText = NotificationAlign[align].toLowerCase();
             let className = `align-${alignText}`;
             if (children.length === 0) {
-                return React.createElement("div", { key: `empty-${alignText}`, className: className });
+                return _jsx("div", { className: className }, `empty-${alignText}`);
             }
             if (align === NotificationAlign.Unknown) {
                 // div container for style control
-                return (React.createElement("div", { key: `div-${alignText}`, className: className }, children));
+                return (_jsx("div", { className: className, children: children }, `div-${alignText}`));
             }
             // Use SnackBar for layout
-            return (React.createElement(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, key: `layout-${alignText}`, sx: align === NotificationAlign.Center
+            return (_jsx(Snackbar, { anchorOrigin: NotifierMU.getOrigin(align), className: className, sx: align === NotificationAlign.Center
                     ? { position: "fixed", top: "50%!important" }
-                    : undefined, open: true },
-                React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", key: `box-${alignText}`, sx: {
+                    : undefined, open: true, children: _jsx(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", sx: {
                         "& > :not(style) + :not(style)": {
                             marginTop: (theme) => theme.spacing(1)
                         }
-                    } }, children)));
+                    }, children: children }, `box-${alignText}`) }, `layout-${alignText}`));
         };
     }
     /**

package/lib/NumberInputField.d.ts

@@ -39,4 +39,4 @@ export type NumberInputFieldProps = Omit<InputFieldProps, "type" | "inputProps">
  * @param props Props
  * @returns Component
  */
-export declare function NumberInputField(props: NumberInputFieldProps): React.JSX.Element;
+export declare function NumberInputField(props: NumberInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/NumberInputField.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { InputField } from "./InputField";
 import { InputAdornment } from "@mui/material";
@@ -11,16 +12,15 @@ export function NumberInputField(props) {
     const { currency, inputStyle, min = 0, step = 1, symbol = currency
         ? `${currency} ${NumberUtils.getCurrencySymbol(currency)}`
         : undefined, endSymbol, max = 9999999, InputProps, ...rest } = props;
-    return (React.createElement(InputField, { type: "number", inputProps: {
+    return (_jsx(InputField, { type: "number", inputProps: {
             min,
             step,
             max,
             style: inputStyle,
             inputMode: "numeric"
         }, InputProps: {
-            startAdornment: symbol ? (React.createElement(React.Fragment, null,
-                React.createElement(InputAdornment, { position: "start" }, symbol))) : undefined,
-            endAdornment: endSymbol ? (React.createElement(InputAdornment, { position: "end" }, endSymbol)) : undefined,
+            startAdornment: symbol ? (_jsx(React.Fragment, { children: _jsx(InputAdornment, { position: "start", children: symbol }) })) : undefined,
+            endAdornment: endSymbol ? (_jsx(InputAdornment, { position: "end", children: endSymbol })) : undefined,
             ...InputProps
         }, ...rest }));
 }

package/lib/OptionBool.d.ts

@@ -1,5 +1,4 @@
 import { ListType1 } from "@etsoo/shared";
-import React from "react";
 import { OptionGroupProps } from "./OptionGroup";
 /**
  * OptionBool props
@@ -10,4 +9,4 @@ export type OptionBoolProps = Omit<OptionGroupProps<ListType1, "id", "label">, "
  * @param props Props
  * @returns Component
  */
-export declare function OptionBool(props: OptionBoolProps): React.JSX.Element;
+export declare function OptionBool(props: OptionBoolProps): import("react/jsx-runtime").JSX.Element;

package/lib/OptionBool.js

@@ -1,4 +1,4 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { globalApp } from "./app/ReactApp";
 import { OptionGroup } from "./OptionGroup";
 /**
@@ -10,5 +10,5 @@ export function OptionBool(props) {
     // Options
     const options = globalApp?.getBools() ?? [];
     // Layout
-    return (React.createElement(OptionGroup, { options: options, row: true, multiple: false, ...props }));
+    return (_jsx(OptionGroup, { options: options, row: true, multiple: false, ...props }));
 }

package/lib/OptionGroup.d.ts

@@ -77,4 +77,4 @@ export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L ex
  * @param props Props
  * @returns Component
  */
-export declare function OptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): React.JSX.Element;
+export declare function OptionGroup<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupProps<T, D, L>): import("react/jsx-runtime").JSX.Element;

package/lib/OptionGroup.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DataTypes, Utils } from "@etsoo/shared";
 import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel, Radio, RadioGroup } from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
@@ -53,7 +54,7 @@ export function OptionGroup(props) {
         // Value
         const ov = getOptionValue(option);
         // Control
-        const control = multiple ? (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
+        const control = multiple ? (_jsx(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
                 if (firstOptionValue == null)
                     return;
                 const typeValue = Utils.parseString(event.target.value, firstOptionValue);
@@ -72,37 +73,33 @@ export function OptionGroup(props) {
                 if (onValueChange)
                     onValueChange(changedValues);
                 setValues(changedValues);
-            } })) : (React.createElement(Radio, { disabled: disabledIds?.includes(ov), size: itemSize, readOnly: readOnly }));
+            } })) : (_jsx(Radio, { disabled: disabledIds?.includes(ov), size: itemSize, readOnly: readOnly }));
         // Label
         const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
         // Value, convert to string
         // Will fail when type is number
         const value = getOptionValue(option);
-        return (React.createElement(FormControlLabel, { key: value, control: control, value: value, label: label }));
+        return (_jsx(FormControlLabel, { control: control, value: value, label: label }, value));
     });
     // Group
-    const group = multiple ? (React.createElement(FormGroup, { row: row }, list)) : (React.createElement(RadioGroup, { row: row, name: name, value: values[0] ?? "", onChange: (_event, value) => {
+    const group = multiple ? (_jsx(FormGroup, { row: row, children: list })) : (_jsx(RadioGroup, { row: row, name: name, value: values[0] ?? "", onChange: (_event, value) => {
             if (firstOptionValue == null)
                 return;
             const typeValue = Utils.parseString(value, firstOptionValue);
             if (onValueChange)
                 onValueChange(typeValue);
             setValues([typeValue]);
-        } }, list));
+        }, children: list }));
     // Layout
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
-            label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
-                    cursor: "default",
-                    display: "flex",
-                    gap: 1,
-                    paddingX: 2,
-                    paddingY: "7px",
-                    width: fullWidth ? "100%" : "auto",
-                    "& input": {
-                        display: "none"
-                    }
-                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
-        helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
+    return (_jsxs(React.Fragment, { children: [_jsxs(FormControl, { fullWidth: fullWidth, ...rest, children: [label && (_jsx(InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? (_jsx(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/OptionGroupFlag.d.ts

@@ -73,4 +73,4 @@ export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, n
  * @param props Props
  * @returns Component
  */
-export declare function OptionGroupFlag<T extends object = ListType, D extends DataTypes.Keys<T, number> = IdDefaultType<T, number>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupFlagProps<T, D, L>): React.JSX.Element;
+export declare function OptionGroupFlag<T extends object = ListType, D extends DataTypes.Keys<T, number> = IdDefaultType<T, number>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupFlagProps<T, D, L>): import("react/jsx-runtime").JSX.Element;

package/lib/OptionGroupFlag.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DataTypes, Utils } from "@etsoo/shared";
 import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel } from "@mui/material";
 import NotchedOutline from "@mui/material/OutlinedInput";
@@ -49,7 +50,7 @@ export function OptionGroupFlag(props) {
         if (ov == null)
             return;
         // Control
-        const control = (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
+        const control = (_jsx(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds?.includes(ov), onChange: (event) => {
                 if (firstOptionValue == null)
                     return;
                 const typeValue = Utils.parseString(event.target.value, firstOptionValue);
@@ -66,24 +67,20 @@ export function OptionGroupFlag(props) {
             } }));
         // Label
         const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
-        return (React.createElement(FormControlLabel, { key: ov, control: control, value: ov, label: label }));
+        return (_jsx(FormControlLabel, { control: control, value: ov, label: label }, ov));
     });
     // Group
-    const group = React.createElement(FormGroup, { row: row }, list);
+    const group = _jsx(FormGroup, { row: row, children: list });
     // Layout
-    return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { fullWidth: fullWidth, sx: sx, ...rest },
-            label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
-                    cursor: "default",
-                    display: "flex",
-                    gap: 1,
-                    paddingX: 2,
-                    paddingY: "7px",
-                    width: fullWidth ? "100%" : "auto",
-                    "& input": {
-                        display: "none"
-                    }
-                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
-        helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
+    return (_jsxs(React.Fragment, { children: [_jsxs(FormControl, { fullWidth: fullWidth, sx: sx, ...rest, children: [label && (_jsx(InputLabel, { required: required, variant: variant, shrink: true, children: label })), outlined ? (_jsx(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
+                            cursor: "default",
+                            display: "flex",
+                            gap: 1,
+                            paddingX: 2,
+                            paddingY: "7px",
+                            width: fullWidth ? "100%" : "auto",
+                            "& input": {
+                                display: "none"
+                            }
+                        } })) : (_jsx(Box, { paddingLeft: 2, paddingY: "7px", children: group }))] }), helperText && (_jsx(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 }, children: helperText }))] }));
 }

package/lib/PList.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 /**
  * Paragraph items list props
  */
@@ -12,4 +11,4 @@ export interface PListProps {
  * Paragraph items list
  * @param items Items
  */
-export declare function PList(props: PListProps): React.JSX.Element;
+export declare function PList(props: PListProps): import("react/jsx-runtime").JSX.Element;

package/lib/PList.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 /**
  * Paragraph items list
@@ -5,8 +6,8 @@ import React from 'react';
  */
 export function PList(props) {
     const { items } = props;
-    return (React.createElement(React.Fragment, null, items != null &&
-        items.map((item, index) => {
-            return React.createElement("p", { key: index }, item);
-        })));
+    return (_jsx(React.Fragment, { children: items != null &&
+            items.map((item, index) => {
+                return _jsx("p", { children: item }, index);
+            }) }));
 }

package/lib/PercentCircularProgress.d.ts

@@ -1,8 +1,7 @@
 import { CircularProgressProps, TypographyProps } from "@mui/material";
-import React from "react";
 export type PercentCircularProgressProps = CircularProgressProps & {
     value: number;
     valueUnit?: string;
     textProps?: TypographyProps<"div">;
 };
-export declare function PercentCircularProgress(props: PercentCircularProgressProps): React.JSX.Element;
+export declare function PercentCircularProgress(props: PercentCircularProgressProps): import("react/jsx-runtime").JSX.Element;