argous 1.2.247 → 1.3.2

package/dist/components/ListSelect/ListSelect.js

@@ -41,13 +41,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/components/ListSelect/index.d.ts

@@ -1,2 +1 @@
-export { default } from './ListSelect';
-export * from './ListSelect'; 
+export { default } from "./ListSelect";

package/dist/components/MaterialButton/MaterialButton.d.ts

@@ -1,13 +1,31 @@
-import { ButtonProps } from '@material-ui/core';
-import * as React from 'react';
-
-export interface MaterialButtonProps extends Omit<ButtonProps, 'color'> {
-  /**
-   * Cor Aplicada ao botão
-   */
-  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'
+declare function Button({ color, variant, className, sx, ...props }: {
+    [x: string]: any;
+    color?: string | undefined;
+    variant?: string | undefined;
+    className: any;
+    sx: any;
+}): React.JSX.Element;
+declare namespace Button {
+    namespace propTypes {
+        let children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        let classes: PropTypes.Requireable<object>;
+        let className: PropTypes.Requireable<string>;
+        let color: PropTypes.Requireable<string>;
+        let component: PropTypes.Requireable<PropTypes.ReactComponentLike>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let disableElevation: PropTypes.Requireable<boolean>;
+        let disableFocusRipple: PropTypes.Requireable<boolean>;
+        let disableRipple: PropTypes.Requireable<boolean>;
+        let endIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let focusVisibleClassName: PropTypes.Requireable<string>;
+        let fullWidth: PropTypes.Requireable<boolean>;
+        let href: PropTypes.Requireable<string>;
+        let size: PropTypes.Requireable<string>;
+        let startIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        let type: PropTypes.Requireable<string>;
+        let variant: PropTypes.Requireable<string>;
+    }
 }
-
-declare function MaterialButton(props: MaterialButtonProps): JSX.Element
-
-export default MaterialButton;
+export default Button;
+import React from 'react';
+import PropTypes from 'prop-types';

package/dist/components/MaterialButton/MaterialButton.js

@@ -21,141 +21,73 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@material-ui/core");
-var Button_1 = __importDefault(require("@material-ui/core/Button"));
-var clsx_1 = __importDefault(require("clsx"));
+exports.default = Button;
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var styles_1 = require("@mui/material/styles");
 var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importDefault(require("react"));
-var useStyles = (0, core_1.makeStyles)(function (theme) { return ({
-    containedInfo: {
-        color: theme.palette.info.contrastText,
-        backgroundColor: theme.palette.info.main,
-        '&:hover': {
-            backgroundColor: theme.palette.info.dark,
-            '@media (hover: none)': {
-                backgroundColor: theme.palette.info.main,
-            },
-        }
-    },
-    outlinedInfo: {
-        color: theme.palette.info.main,
-        border: "1px solid ".concat((0, core_1.alpha)(theme.palette.info.main, 0.5)),
-        '&:hover': {
-            border: "1px solid ".concat(theme.palette.info.main),
-            backgroundColor: (0, core_1.alpha)(theme.palette.info.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    textInfo: {
-        color: theme.palette.info.main,
-        '&:hover': {
-            backgroundColor: (0, core_1.alpha)(theme.palette.info.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    containedSuccess: {
-        color: theme.palette.success.contrastText,
-        backgroundColor: theme.palette.success.main,
-        '&:hover': {
-            backgroundColor: theme.palette.success.dark,
-            '@media (hover: none)': {
-                backgroundColor: theme.palette.success.main,
-            },
-        }
-    },
-    outlinedSuccess: {
-        color: theme.palette.success.main,
-        border: "1px solid ".concat((0, core_1.alpha)(theme.palette.success.main, 0.5)),
-        '&:hover': {
-            border: "1px solid ".concat(theme.palette.success.main),
-            backgroundColor: (0, core_1.alpha)(theme.palette.success.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    textSuccess: {
-        color: theme.palette.success.main,
-        '&:hover': {
-            backgroundColor: (0, core_1.alpha)(theme.palette.success.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    containedWarning: {
-        color: theme.palette.warning.contrastText,
-        backgroundColor: theme.palette.warning.main,
-        '&:hover': {
-            backgroundColor: theme.palette.warning.dark,
-            '@media (hover: none)': {
-                backgroundColor: theme.palette.warning.main,
-            },
-        }
-    },
-    outlinedWarning: {
-        color: theme.palette.warning.main,
-        border: "1px solid ".concat((0, core_1.alpha)(theme.palette.warning.main, 0.5)),
-        '&:hover': {
-            border: "1px solid ".concat(theme.palette.warning.main),
-            backgroundColor: (0, core_1.alpha)(theme.palette.warning.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    textWarning: {
-        color: theme.palette.warning.main,
-        '&:hover': {
-            backgroundColor: (0, core_1.alpha)(theme.palette.warning.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    containedDanger: {
-        color: theme.palette.error.contrastText,
-        backgroundColor: theme.palette.error.main,
-        '&:hover': {
-            backgroundColor: theme.palette.error.dark,
-            '@media (hover: none)': {
-                backgroundColor: theme.palette.error.main,
-            },
-        }
-    },
-    outlinedDanger: {
-        color: theme.palette.error.main,
-        border: "1px solid ".concat((0, core_1.alpha)(theme.palette.error.main, 0.5)),
-        '&:hover': {
-            border: "1px solid ".concat(theme.palette.error.main),
-            backgroundColor: (0, core_1.alpha)(theme.palette.error.main, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        }
-    },
-    textDanger: {
-        color: theme.palette.error.main,
+var muiColorMap = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    danger: 'error',
+};
+var normalizeSx = function (sx) { return sx ? (Array.isArray(sx) ? sx : [sx]) : []; };
+var getCustomColorSx = function (color, variant) { return function (theme) {
+    var paletteKey = muiColorMap[color];
+    if (!paletteKey)
+        return {};
+    var palette = theme.palette[paletteKey];
+    if (variant === 'contained') {
+        return {
+            color: palette.contrastText,
+            backgroundColor: palette.main,
+            '&:hover': {
+                backgroundColor: palette.dark,
+                '@media (hover: none)': {
+                    backgroundColor: palette.main,
+                },
+            }
+        };
+    }
+    if (variant === 'outlined') {
+        return {
+            color: palette.main,
+            border: "1px solid ".concat((0, styles_1.alpha)(palette.main, 0.5)),
+            '&:hover': {
+                border: "1px solid ".concat(palette.main),
+                backgroundColor: (0, styles_1.alpha)(palette.main, theme.palette.action.hoverOpacity),
+                '@media (hover: none)': {
+                    backgroundColor: 'transparent',
+                },
+            }
+        };
+    }
+    return {
+        color: palette.main,
         '&:hover': {
-            backgroundColor: (0, core_1.alpha)(theme.palette.error.main, theme.palette.action.hoverOpacity),
+            backgroundColor: (0, styles_1.alpha)(palette.main, theme.palette.action.hoverOpacity),
             '@media (hover: none)': {
                 backgroundColor: 'transparent',
             },
         }
-    },
-}); });
+    };
+}; };
 function Button(_a) {
-    var _b;
-    var _c = _a.color, color = _c === void 0 ? 'default' : _c, _d = _a.variant, variant = _d === void 0 ? 'text' : _d, className = _a.className, props = __rest(_a, ["color", "variant", "className"]);
-    var classes = useStyles();
+    var _b = _a.color, color = _b === void 0 ? 'default' : _b, _c = _a.variant, variant = _c === void 0 ? 'text' : _c, className = _a.className, sx = _a.sx, props = __rest(_a, ["color", "variant", "className", "sx"]);
     function checarCor() {
         switch (color) {
             case 'primary':
@@ -168,9 +100,8 @@ function Button(_a) {
                 return 'default';
         }
     }
-    return (react_1.default.createElement(Button_1.default, __assign({ variant: variant, color: checarCor(), className: (0, clsx_1.default)(classes[variant], (_b = {}, _b[classes["".concat(variant).concat((0, core_1.capitalize)(color))]] = color !== 'default' && color !== 'inherit' && color !== 'primary' && color !== 'secondary', _b), className) }, props), props.children));
+    return (react_1.default.createElement(Button_1.default, __assign({ variant: variant, color: checarCor(), className: className, sx: __spreadArray([getCustomColorSx(color, variant)], normalizeSx(sx), true) }, props), props.children));
 }
-exports.default = Button;
 Button.propTypes = {
     children: prop_types_1.default.node.isRequired,
     classes: prop_types_1.default.object,

package/dist/components/MaterialButton/index.d.ts

@@ -1,2 +1 @@
-export { default } from './MaterialButton';
-export * from './MaterialButton'; 
+export { default } from "./MaterialButton";

package/dist/components/MenuBar/MenuBar.d.ts

@@ -1,8 +1,2 @@
-export interface MenuBarProps {}
-/**
- * @deprecated
- * @param props 
- */
-declare function MenuBar(props: MenuBarProps): JSX.Element
-
-export default MenuBar;
+declare const _default: any;
+export default _default;

package/dist/components/MenuBar/MenuBar.js

@@ -30,13 +30,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/components/MenuBar/index.d.ts

@@ -1,2 +1 @@
-export { default } from './MenuBar';
-export * from './MenuBar'; 
+export { default } from "./MenuBar";

package/dist/components/MonthPicker/MonthPicker.d.ts

@@ -1,8 +1,2 @@
-export interface MonthPickerProps {}
-/**
- * @deprecated
- * @param props 
- */
-declare function MonthPicker(props: MonthPickerProps): JSX.Element
-
-export default MonthPicker;
+declare const _default: any;
+export default _default;

package/dist/components/MonthPicker/MonthPicker.js

@@ -30,13 +30,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {
@@ -53,7 +63,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var fieldsRedux_1 = require("../../fieldsRedux");
 var prop_types_1 = __importDefault(require("prop-types"));
 var react_1 = __importStar(require("react"));
-var react_maskedinput_1 = __importDefault(require("react-maskedinput"));
+var react_input_mask_1 = __importDefault(require("@mona-health/react-input-mask"));
 /**
  * @deprecated
  */
@@ -262,9 +272,9 @@ var MonthPicker = /** @class */ (function (_super) {
         var _c = this.state, year = _c.year, selectOpen = _c.selectOpen;
         var values = (0, fieldsRedux_1.getField)(field, 'value');
         var inputValue = (0, fieldsRedux_1.getField)(field, 'inputValue');
-        var mask = type === 'single' ? '11/1111' : '11/1111 à 11/1111';
+        var mask = type === 'single' ? '99/9999' : '99/9999 à 99/9999';
         return (react_1.default.createElement("div", { className: 'monthPickermaxwidth' },
-            (type === 'single' || type === 'stage') && (react_1.default.createElement(react_maskedinput_1.default, { value: inputValue, onClick: this.openSelect, onChange: this.onValueCapture, mask: mask, className: 'pg-monthpicker-input' })),
+            (type === 'single' || type === 'stage') && (react_1.default.createElement(react_input_mask_1.default, { value: inputValue, onClick: this.openSelect, onChange: this.onValueCapture, mask: mask, className: 'pg-monthpicker-input' })),
             type === 'multiple' && (react_1.default.createElement("input", { value: inputValue, onClick: this.openSelect, onChange: this.onValueCapture, className: 'pg-monthpicker-input' })),
             selectOpen && (react_1.default.createElement("div", { onClick: function (e) { return e.stopPropagation(); }, className: 'monthPickerSelect' },
                 react_1.default.createElement("div", { className: 'pg-monthpicker-year', onClick: this.restYear }, year),

package/dist/components/MonthPicker/index.d.ts

@@ -1,2 +1 @@
-export { default } from './MonthPicker';
-export * from './MonthPicker'; 
+export { default } from "./MonthPicker";

package/dist/components/MultipleSelect/MultipleSelect.d.ts

@@ -1,8 +1,2 @@
-export interface MultipleSelectProps {}
-/**
- * @deprecated
- * @param props 
- */
-declare function MultipleSelect(props: MultipleSelectProps): JSX.Element
-
-export default MultipleSelect;
+declare const _default: any;
+export default _default;

package/dist/components/MultipleSelect/MultipleSelect.js

@@ -41,13 +41,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
         if (ar || !(i in from)) {

package/dist/components/MultipleSelect/index.d.ts

@@ -1,2 +1 @@
-export { default } from './MultipleSelect';
-export * from './MultipleSelect'; 
+export { default } from "./MultipleSelect";

package/dist/components/OtpInput/OtpInput.d.ts

@@ -1,4 +1,4 @@
-import { OutlinedTextFieldProps } from '@material-ui/core';
+import { OutlinedTextFieldProps } from '@mui/material';
 import React from 'react';
 export interface Props extends Omit<OutlinedTextFieldProps, 'onChange' | 'variant'> {
     numInputs?: number;

package/dist/components/OtpInput/OtpInput.js

@@ -26,13 +26,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -46,7 +56,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../../utils");
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 var react_1 = __importStar(require("react"));
 // keyCode constants
 var BACKSPACE = 8;
@@ -55,55 +65,52 @@ var RIGHT_ARROW = 39;
 var DELETE = 46;
 var SPACEBAR = 32;
 var ENTER = 13;
-var useStyles = (0, core_1.makeStyles)(function (theme) {
+var fieldSx = function (theme) {
     var _a;
-    return ({
-        field: (_a = {
-                '& [class*="MuiInputBase-root"]': {
-                    height: '100%',
-                    fontSize: 'inherit'
-                }
-            },
-            _a[theme.breakpoints.up('xs')] = {
-                margin: theme.spacing(0),
-                width: '1em',
-                height: '1em',
-                fontSize: '.6em'
-            },
-            _a[theme.breakpoints.up('sm')] = {
-                margin: theme.spacing(1),
-                width: '1em',
-                height: '1em',
-                fontSize: '.6em'
-            },
-            _a[theme.breakpoints.up('md')] = {
-                margin: theme.spacing(1),
-                width: '1.2em',
-                height: '1.2em',
-                fontSize: '.8em'
-            },
-            _a[theme.breakpoints.up('lg')] = {
-                margin: theme.spacing(2),
-                width: '1.5em',
-                height: '1.5em',
-            },
-            _a[theme.breakpoints.up('xl')] = {
-                margin: theme.spacing(2),
-                width: '1.6em',
-                height: '1.6em',
-            },
-            _a),
-        input: {
-            textAlign: 'center',
-            textTransform: 'uppercase',
-            padding: 0
-        }
-    });
-});
+    return (_a = {
+            '& [class*="MuiInputBase-root"]': {
+                height: '100%',
+                fontSize: 'inherit'
+            }
+        },
+        _a[theme.breakpoints.up('xs')] = {
+            margin: theme.spacing(0),
+            width: '1em',
+            height: '1em',
+            fontSize: '.6em'
+        },
+        _a[theme.breakpoints.up('sm')] = {
+            margin: theme.spacing(1),
+            width: '1em',
+            height: '1em',
+            fontSize: '.6em'
+        },
+        _a[theme.breakpoints.up('md')] = {
+            margin: theme.spacing(1),
+            width: '1.2em',
+            height: '1.2em',
+            fontSize: '.8em'
+        },
+        _a[theme.breakpoints.up('lg')] = {
+            margin: theme.spacing(2),
+            width: '1.5em',
+            height: '1.5em',
+        },
+        _a[theme.breakpoints.up('xl')] = {
+            margin: theme.spacing(2),
+            width: '1.6em',
+            height: '1.6em',
+        },
+        _a);
+};
+var inputStyle = {
+    textAlign: 'center',
+    textTransform: 'uppercase',
+    padding: 0
+};
 var SingleOtpInput = function (_a) {
     var separator = _a.separator, isLastChild = _a.isLastChild, focus = _a.focus, autoFocus = _a.autoFocus, index = _a.index, value = _a.value, placeholder = _a.placeholder, props = __rest(_a, ["separator", "isLastChild", "focus", "autoFocus", "index", "value", "placeholder"]);
-    var classes = useStyles();
-    var inputRef = (0, react_1.useRef)();
+    var inputRef = (0, react_1.useRef)(null);
     // Focus on first render
     // Only when autoFocus is true
     (0, react_1.useEffect)(function () {
@@ -118,9 +125,15 @@ var SingleOtpInput = function (_a) {
             inputRef.current.select();
         }
     }, [focus]);
-    return react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.TextField, __assign({ className: classes.field, variant: 'outlined', inputProps: __assign(__assign({}, props.inputProps), { className: classes.input, autoComplete: 'off', maxLength: '1', ref: inputRef }), value: value || '', placeholder: placeholder && placeholder[index] }, props)),
-        !isLastChild && separator);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.TextField, __assign({ sx: fieldSx, variant: 'outlined', value: value || '', placeholder: placeholder && placeholder[index] }, props, { slotProps: __assign(__assign({}, props.slotProps), { htmlInput: function (ownerState) {
+                    var _a, _b;
+                    var htmlInputProps = typeof ((_a = props.slotProps) === null || _a === void 0 ? void 0 : _a.htmlInput) === 'function'
+                        ? props.slotProps.htmlInput(ownerState)
+                        : (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.htmlInput;
+                    return __assign(__assign({}, htmlInputProps), { style: __assign(__assign({}, inputStyle), htmlInputProps === null || htmlInputProps === void 0 ? void 0 : htmlInputProps.style), autoComplete: 'off', maxLength: 1, ref: inputRef });
+                } }) })),
+        !isLastChild && separator));
 };
 var OtpInput = function (_a) {
     var _b = _a.numInputs, numInputs = _b === void 0 ? 6 : _b, _c = _a.onChange, onChange = _c === void 0 ? function (otp) { return void (otp); } : _c, _d = _a.value, value = _d === void 0 ? '' : _d, _e = _a.onConfirm, onConfirm = _e === void 0 ? function (otp) { return void (otp); } : _e, props = __rest(_a, ["numInputs", "onChange", "value", "onConfirm"]);
@@ -206,6 +219,6 @@ var OtpInput = function (_a) {
         e.target.select();
     }; };
     var handleBlur = function () { return setActiveInput(-1); };
-    return (react_1.default.createElement(core_1.Box, { display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '8em' }, Array(numInputs).fill(0).map(function (_, i) { return (react_1.default.createElement(SingleOtpInput, __assign({}, props, { key: i, index: i, focus: activeInput === i, value: otpValue[i], onChange: handleOnChange, onKeyDown: handleOnKeyDown, onInput: handleOnInput, onPaste: handleOnPaste, onFocus: handleFocus(i), onBlur: handleBlur, isLastChild: i === numInputs - 1 }))); })));
+    return (react_1.default.createElement(material_1.Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '8em' } }, Array(numInputs).fill(0).map(function (_, i) { return (react_1.default.createElement(SingleOtpInput, __assign({}, props, { key: i, index: i, focus: activeInput === i, value: otpValue[i], onChange: handleOnChange, onKeyDown: handleOnKeyDown, onInput: handleOnInput, onPaste: handleOnPaste, onFocus: handleFocus(i), onBlur: handleBlur, isLastChild: i === numInputs - 1 }))); })));
 };
 exports.default = OtpInput;