argous 1.2.247 → 1.3.2

package/dist/components/FormVisualizer/FormVisualizer.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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -43,8 +53,8 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
@@ -96,12 +106,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var MaterialButton_1 = __importDefault(require("../../components/MaterialButton"));
 var utils_1 = require("../../utils");
 var store_1 = require("../../utils/store");
-var moment_1 = __importDefault(require("@date-io/moment"));
-var core_1 = require("@material-ui/core");
-var Autocomplete_1 = __importDefault(require("@material-ui/lab/Autocomplete"));
-var pickers_1 = require("@material-ui/pickers");
+var material_1 = require("@mui/material");
+var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
+var x_date_pickers_1 = require("@mui/x-date-pickers");
+var AdapterMoment_1 = require("@mui/x-date-pickers/AdapterMoment");
 var lodash_1 = require("lodash");
-var moment_2 = __importDefault(require("moment"));
+var moment_1 = __importDefault(require("moment"));
 var react_1 = __importStar(require("react"));
 var md_1 = require("react-icons/md");
 var use_immer_1 = require("use-immer");
@@ -118,7 +128,14 @@ var init = function (initialValues) { return function (initialState) {
 }; };
 var FormVisualizer = function (_a) {
     var _b = _a.json, json = _b === void 0 ? {} : _b, _c = _a.initialValues, initialValues = _c === void 0 ? [] : _c, _d = _a.onChange, onChange = _d === void 0 ? function () { return ''; } : _d, disabled = _a.disabled;
-    var classes = (0, core_1.makeStyles)(json.classes)();
+    var classes = Object.keys(json.classes || {}).reduce(function (acc, key) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[key] = "argous-form-visualizer-".concat(key), _a)));
+    }, {});
+    var globalStyles = Object.keys(json.classes || {}).reduce(function (acc, key) {
+        var _a;
+        return (__assign(__assign({}, acc), (_a = {}, _a[".".concat(classes[key])] = json.classes[key], _a)));
+    }, {});
     var _f = (0, use_immer_1.useImmerReducer)(reducer, json.fases.map(function (fase) { return fase.documentos.map(function (documento) { return documento.linhas.reduce(function (a, linha) { return (__assign(__assign({}, a), linha.colunas.reduce(function (ac, _a) {
         var _b;
         var obj = _a.obj;
@@ -127,17 +144,18 @@ var FormVisualizer = function (_a) {
     (0, utils_1.useUpdateEffect)(function () {
         onChange(state);
     }, [state]);
-    return (react_1.default.createElement(core_1.Card, { style: { padding: '10px' } },
-        react_1.default.createElement(core_1.Typography, { variant: 'h4', component: 'div', align: 'center', style: { marginBottom: '10px' } }, json.nome),
-        json.fases && json.fases.map(function (fase, i) { return (react_1.default.createElement(core_1.Card, { key: fase.idFase, className: classes[fase.className], style: __assign(__assign({}, fase.style), { padding: '10px', margin: '10px' }) },
-            react_1.default.createElement(core_1.Typography, { variant: 'h5', component: 'div', align: 'center', style: { marginBottom: '5px' } }, fase.nome),
-            fase.documentos.map(function (documento, j) { return (react_1.default.createElement(core_1.Paper, { elevation: 3, key: documento.idDoc, className: classes[documento.className], style: __assign(__assign({}, documento.style), { padding: '10px', margin: '10px' }) },
-                react_1.default.createElement(core_1.Typography, { variant: 'h6', component: 'div', align: 'center', style: { marginBottom: '5px' } }, documento.nome),
-                documento.linhas.map(function (linha, k) { return (react_1.default.createElement(core_1.Grid, { container: true, spacing: linha.spacing || 2, key: "".concat(k), className: classes[linha.className], style: linha.style }, linha.colunas.map(function (_a, l) {
+    return (react_1.default.createElement(material_1.Card, { style: { padding: '10px' } },
+        react_1.default.createElement(material_1.GlobalStyles, { styles: globalStyles }),
+        react_1.default.createElement(material_1.Typography, { variant: 'h4', component: 'div', align: 'center', style: { marginBottom: '10px' } }, json.nome),
+        json.fases && json.fases.map(function (fase, i) { return (react_1.default.createElement(material_1.Card, { key: fase.idFase, className: classes[fase.className], style: __assign(__assign({}, fase.style), { padding: '10px', margin: '10px' }) },
+            react_1.default.createElement(material_1.Typography, { variant: 'h5', component: 'div', align: 'center', style: { marginBottom: '5px' } }, fase.nome),
+            fase.documentos.map(function (documento, j) { return (react_1.default.createElement(material_1.Paper, { elevation: 3, key: documento.idDoc, className: classes[documento.className], style: __assign(__assign({}, documento.style), { padding: '10px', margin: '10px' }) },
+                react_1.default.createElement(material_1.Typography, { variant: 'h6', component: 'div', align: 'center', style: { marginBottom: '5px' } }, documento.nome),
+                documento.linhas.map(function (linha, k) { return (react_1.default.createElement(material_1.Grid, { container: true, spacing: linha.spacing || 2, key: "".concat(k), className: classes[linha.className], style: linha.style }, linha.colunas.map(function (_a, l) {
                     var span = _a.span, className = _a.className, style = _a.style, _b = _a.obj, name = _b.name, obj = __rest(_b, ["name"]);
-                    return (react_1.default.createElement(core_1.Grid, { item: true, key: l, xs: span, className: classes[className], style: style },
+                    return (react_1.default.createElement(material_1.Grid, { key: l, className: classes[className], style: style, size: span },
                         console.log(state[i][j][name]),
-                        react_1.default.createElement(RetornaComponente, __assign({ value: obj.value || state[i][j][name], fase: i, documento: j }, __assign(__assign({}, obj), { name: name, dispatch: dispatch, disabled: disabled })))));
+                        react_1.default.createElement(RetornaComponente, __assign({ value: obj.value || state[i][j][name], fase: i, documento: j }, obj, { name: name, dispatch: dispatch, disabled: disabled }))));
                 }))); }))); }))); })));
 };
 exports.default = FormVisualizer;
@@ -160,24 +178,20 @@ var RetornaComponente = (0, react_1.memo)(function (_a) {
 }, lodash_1.isEqual);
 var Label = function (_a) {
     var className = _a.className, style = _a.style, value = _a.value, props = __rest(_a, ["className", "style", "value"]);
-    return react_1.default.createElement(core_1.Typography, __assign({}, __assign({ className: className, style: style }, props)), value);
+    return react_1.default.createElement(material_1.Typography, __assign({ className: className, style: style }, props), value);
 };
-var useStyles = (0, core_1.makeStyles)({
-    textArea: {
-        '& textarea': {
-            resize: 'vertical',
-            minHeight: '50px'
-        }
-    }
-});
 var Text = function (_a) {
     var variant = _a.variant, label = _a.label, multiple = _a.multiple, className = _a.className, style = _a.style, options = _a.options, value = _a.value, dispatch = _a.dispatch, path = _a.path, props = __rest(_a, ["variant", "label", "multiple", "className", "style", "options", "value", "dispatch", "path"]);
-    var classes = useStyles();
     if (variant === 'select')
-        return (react_1.default.createElement(Autocomplete_1.default, __assign({}, { multiple: multiple, options: options }, { defaultValue: value, limitTags: 1, disableCloseOnSelect: multiple, disablePortal: true, closeText: 'Fechar', clearText: 'Limpar', openText: 'Abrir', onChange: function (_e, value_) {
+        return (react_1.default.createElement(Autocomplete_1.default, __assign({ multiple: multiple, options: options, defaultValue: value, limitTags: 1, disableCloseOnSelect: multiple, disablePortal: true, closeText: 'Fechar', clearText: 'Limpar', openText: 'Abrir', onChange: function (_e, value_) {
                 dispatch(value_);
-            } }, props, { renderInput: function (params) { return (react_1.default.createElement(core_1.TextField, __assign({ variant: 'outlined', margin: 'dense', fullWidth: true }, { label: label, style: style, className: className }, params))); } })));
-    return (react_1.default.createElement(core_1.TextField, __assign({ className: "".concat(classes.textArea, " mostraSpinner ").concat(className), variant: 'outlined', margin: 'dense', fullWidth: true, multiline: variant === 'multiline' }, { label: label, style: style }, { defaultValue: value, onBlur: function (e) {
+            } }, props, { renderInput: function (params) { return (react_1.default.createElement(material_1.TextField, __assign({ variant: 'outlined', margin: 'dense', fullWidth: true, label: label, style: style, className: className }, params))); } })));
+    return (react_1.default.createElement(material_1.TextField, __assign({ className: "mostraSpinner ".concat(className || ''), sx: {
+            '& textarea': {
+                resize: 'vertical',
+                minHeight: '50px'
+            }
+        }, variant: 'outlined', margin: 'dense', fullWidth: true, multiline: variant === 'multiline', label: label, style: style, defaultValue: value, onBlur: function (e) {
             e.persist();
             if (e.target.value === value)
                 return;
@@ -191,13 +205,22 @@ var Data = function (_a) {
         if ((value || undefined) === ((0, lodash_1.isString)(state) ? state || undefined : state === null || state === void 0 ? void 0 : state.format('YYYY-MM-DD')))
             return;
         var time = setTimeout(function () {
-            dispatch(state ? (0, moment_2.default)(state).format('YYYY-MM-DD') : '');
+            dispatch(state ? (0, moment_1.default)(state).format('YYYY-MM-DD') : '');
         }, 100);
         return function () { return clearTimeout(time); };
         // eslint-disable-next-line
     }, [state, path]);
-    return (react_1.default.createElement(pickers_1.MuiPickersUtilsProvider, { utils: moment_1.default },
-        react_1.default.createElement(pickers_1.KeyboardDatePicker, __assign({ fullWidth: true, invalidDateMessage: 'Data inv\u00E1lida', autoOk: true, variant: 'inline', inputVariant: 'outlined', label: 'Data inicial', margin: 'dense', InputAdornmentProps: { position: 'end' }, format: 'DD/MM/YYYY' }, { className: className, label: label, style: style }, props, { value: state || null, onChange: setState }))));
+    return (react_1.default.createElement(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterMoment_1.AdapterMoment },
+        react_1.default.createElement(x_date_pickers_1.DatePicker, __assign({ format: 'DD/MM/YYYY' }, props, { label: label || 'Data inicial', value: state ? (0, moment_1.default)(state) : null, onChange: setState, slotProps: {
+                inputAdornment: { position: 'end' },
+                textField: {
+                    className: className,
+                    style: style,
+                    fullWidth: true,
+                    margin: 'dense',
+                    variant: 'outlined',
+                }
+            } }))));
 };
 var Selection = function (_a) {
     var label = _a.label, multiple = _a.multiple, className = _a.className, style = _a.style, options = _a.options, value = _a.value, dispatch = _a.dispatch, path = _a.path, props = __rest(_a, ["label", "multiple", "className", "style", "options", "value", "dispatch", "path"]);
@@ -219,14 +242,14 @@ var Selection = function (_a) {
         atualizaDados();
     };
     if (multiple)
-        return (react_1.default.createElement(core_1.Grid, { container: true },
-            react_1.default.createElement(core_1.Grid, __assign({ item: true, xs: 12, style: __assign(__assign({}, style), { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5 }) }, { className: className }),
-                label && react_1.default.createElement(core_1.FormLabel, { style: { marginBottom: '0px' } }, label),
-                react_1.default.createElement(core_1.FormGroup, { row: true, style: { flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' } }, options.map(function (item, i) { return (react_1.default.createElement(core_1.FormControlLabel, { key: i, value: item, control: react_1.default.createElement(core_1.Checkbox, __assign({ name: item, onChange: changeCheckBox }, { style: style }, props)), label: item, labelPlacement: 'start' })); })))));
-    return (react_1.default.createElement(core_1.Grid, { container: true },
-        react_1.default.createElement(core_1.Grid, __assign({ item: true, xs: 12, style: __assign(__assign({}, style), { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5 }) }, { className: className }),
-            label && react_1.default.createElement(core_1.FormLabel, { style: { marginBottom: '0px' } }, label),
-            react_1.default.createElement(core_1.RadioGroup, { row: true, defaultValue: value, onChange: function (e) { return setState(e.target.value); }, style: { flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' } }, options.map(function (item, i) { return (react_1.default.createElement(core_1.FormControlLabel, { key: i, value: item, control: react_1.default.createElement(core_1.Radio, __assign({}, { style: style }, props)), label: item, labelPlacement: 'start' })); })))));
+        return (react_1.default.createElement(material_1.Grid, { container: true },
+            react_1.default.createElement(material_1.Grid, { style: __assign(__assign({}, style), { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5 }), size: 12 },
+                label && react_1.default.createElement(material_1.FormLabel, { style: { marginBottom: '0px' } }, label),
+                react_1.default.createElement(material_1.FormGroup, { row: true, style: { flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' } }, options.map(function (item, i) { return (react_1.default.createElement(material_1.FormControlLabel, { key: i, value: item, control: react_1.default.createElement(material_1.Checkbox, __assign({ name: item, onChange: changeCheckBox, style: style }, props)), label: item, labelPlacement: 'start' })); })))));
+    return (react_1.default.createElement(material_1.Grid, { container: true },
+        react_1.default.createElement(material_1.Grid, { style: __assign(__assign({}, style), { display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: 5 }), size: 12 },
+            label && react_1.default.createElement(material_1.FormLabel, { style: { marginBottom: '0px' } }, label),
+            react_1.default.createElement(material_1.RadioGroup, { row: true, defaultValue: value, onChange: function (e) { return setState(e.target.value); }, style: { flexGrow: 1, justifyContent: label ? 'flex-end' : 'space-evenly' } }, options.map(function (item, i) { return (react_1.default.createElement(material_1.FormControlLabel, { key: i, value: item, control: react_1.default.createElement(material_1.Radio, __assign({ style: style }, props)), label: item, labelPlacement: 'start' })); })))));
 };
 var Signature = function (_a) {
     var label = _a.label, grupos = _a.grupos, usuarios = _a.usuarios, className = _a.className, style = _a.style, value = _a.value, dados = _a.dados, setDados = _a.setDados, path = _a.path;
@@ -242,7 +265,7 @@ var Signature = function (_a) {
                 if (res.status) {
                     setValues(__assign(__assign({}, values), { senhaIncorreta: '' }));
                     temp = __assign({}, dados);
-                    (0, lodash_1.set)(temp, path, [usuario.idUsuario, usuario.nome, (0, moment_2.default)(new Date()).format('YYYY-MM-DD HH:mm:ss'), res.hash]);
+                    (0, lodash_1.set)(temp, path, [usuario.idUsuario, usuario.nome, (0, moment_1.default)(new Date()).format('YYYY-MM-DD HH:mm:ss'), res.hash]);
                     setDados(temp);
                     setValues(__assign(__assign({}, values), { modal: false }));
                 }
@@ -253,20 +276,28 @@ var Signature = function (_a) {
         });
     }
     if (value.length > 0)
-        return (react_1.default.createElement("div", __assign({}, { className: className }, { style: __assign(__assign({}, style), { height: '50px', display: 'flex', justifyContent: 'flex-end', alignItems: ' flex-end' }) }),
-            react_1.default.createElement(core_1.Typography, { title: value[3], variant: 'subtitle2', style: { textAlign: 'right' } }, "".concat(value[1], " - ").concat((0, moment_2.default)(value[2]).format('DD/MM/YYYY HH:mm:ss')))));
+        return (react_1.default.createElement("div", { className: className, style: __assign(__assign({}, style), { height: '50px', display: 'flex', justifyContent: 'flex-end', alignItems: ' flex-end' }) },
+            react_1.default.createElement(material_1.Typography, { title: value[3], variant: 'subtitle2', style: { textAlign: 'right' } }, "".concat(value[1], " - ").concat((0, moment_1.default)(value[2]).format('DD/MM/YYYY HH:mm:ss')))));
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(core_1.Grid, __assign({ container: true, direction: 'row-reverse' }, { className: className, style: style }),
-            react_1.default.createElement(core_1.Grid, { item: true, xs: 12, sm: 6, md: 4, lg: 2, xl: 1 },
+        react_1.default.createElement(material_1.Grid, { container: true, direction: 'row-reverse', className: className, style: style },
+            react_1.default.createElement(material_1.Grid, { size: {
+                    xs: 12,
+                    sm: 6,
+                    md: 4,
+                    lg: 2,
+                    xl: 1
+                } },
                 react_1.default.createElement(MaterialButton_1.default, { title: label, color: 'primary', variant: 'contained', fullWidth: true, disabled: !podeAssinar, onClick: function () { return setValues(__assign(__assign({}, values), { modal: true })); } }, "Assinar"))),
-        react_1.default.createElement(core_1.Dialog, { open: values.modal, onClose: function () { return setValues(__assign(__assign({}, values), { modal: false })); }, style: { padding: '0px 10px 5px' } },
-            react_1.default.createElement(core_1.DialogTitle, null, "Confirme sua senha"),
-            react_1.default.createElement(core_1.DialogContent, null,
-                react_1.default.createElement(core_1.TextField, { variant: 'outlined', label: 'Senha', fullWidth: true, type: values.showPassword ? 'text' : 'password', value: values.password, onChange: function (e) { return setValues(__assign(__assign({}, values), { password: e.target.value })); }, InputProps: {
-                        endAdornment: (react_1.default.createElement(core_1.InputAdornment, { position: 'end' },
-                            react_1.default.createElement(core_1.IconButton, { onClick: function () { return setValues(__assign(__assign({}, values), { showPassword: !values.showPassword })); }, onMouseDown: function (e) { return e.preventDefault(); } }, values.showPassword ? react_1.default.createElement(md_1.MdVisibility, null) : react_1.default.createElement(md_1.MdVisibilityOff, null))))
-                    }, error: !!values.senhaIncorreta, helperText: values.senhaIncorreta })),
-            react_1.default.createElement(core_1.DialogActions, null,
+        react_1.default.createElement(material_1.Dialog, { open: values.modal, onClose: function () { return setValues(__assign(__assign({}, values), { modal: false })); }, style: { padding: '0px 10px 5px' } },
+            react_1.default.createElement(material_1.DialogTitle, null, "Confirme sua senha"),
+            react_1.default.createElement(material_1.DialogContent, null,
+                react_1.default.createElement(material_1.TextField, { variant: 'outlined', label: 'Senha', fullWidth: true, type: values.showPassword ? 'text' : 'password', value: values.password, onChange: function (e) { return setValues(__assign(__assign({}, values), { password: e.target.value })); }, error: !!values.senhaIncorreta, helperText: values.senhaIncorreta, slotProps: {
+                        input: {
+                            endAdornment: (react_1.default.createElement(material_1.InputAdornment, { position: 'end' },
+                                react_1.default.createElement(material_1.IconButton, { onClick: function () { return setValues(__assign(__assign({}, values), { showPassword: !values.showPassword })); }, onMouseDown: function (e) { return e.preventDefault(); } }, values.showPassword ? react_1.default.createElement(md_1.MdVisibility, null) : react_1.default.createElement(md_1.MdVisibilityOff, null))))
+                        }
+                    } })),
+            react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement(MaterialButton_1.default, { title: 'Cancelar', color: 'warning', variant: 'contained', fullWidth: true, onClick: function () { return setValues(__assign(__assign({}, values), { modal: false })); } }, "Cancelar"),
                 react_1.default.createElement(MaterialButton_1.default, { title: 'Confirmar', color: 'success', variant: 'contained', fullWidth: true, onClick: confirmaAssinatura }, "Confirmar")))));
 };

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

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

package/dist/components/HalfGauge/HalfGauge.d.ts

@@ -1,82 +1,23 @@
-export interface HalfGaugeProps {
-  /**
-   * Id do elemento
-   */
-  id?: string,
-  /**
-   * Porcentagem 
-   */
-  percentage?: number,
-  /**
-   * Tamanho do componente
-   */
-  size?: number,
-  /**
-   * Tamanho da fonte
-   */
-  fontSize?: string,
-  /**
-   * Cor da fonte do texto
-   */
-  color?: string,
-  /**
-   * Cor de fundo
-   */ 
-  backgroundColor?: string,
-  /**
-   * Cor de fundo da barra
-   */
-  barBackgroundColor?: string,
-  /**
-   * Tamanho responsivo
-   */
-  responsive?: boolean,
-  /**
-   * Texto utilizado no medidor
-   */
-  label?: string,
-  /**
-   * Ordenação do medidor
-   */
-  order?: string,
-  /**
-   * Texto utilizado como mínimo
-   */
-  min?: string,
-  /**
-   * Texto utilizado como máximo
-   */
-  max?: string,
-  /**
-   * Cor do ponteiro indicador do medidor
-   */
-  handColor?: string,
-  /**
-   * Largura das áreas laterais onde ficará o min e max
-   */
-  minMaxWidth?: string,
-  /**
-   * Cor utilizada no meio do medidor
-   */
-  middleColor?: string,
-  /**
-   * Cor utilizada entre o meio e a direita do medidor
-   */
-  middleRightColor?: string,
-  /**
-   * Cor utilizada na direita do medidor
-   */
-  rightColor?: string,
-  /**
-   * Cor utilizada na esquerda do medidor
-   */
-  leftColor?: string,
-  /**
-   * Cor utilizada entre o meio e a esquerda do medidor
-   */
-  middleLeftColor?: string,
-}
-  
-declare function HalfGauge(props: HalfGaugeProps): JSX.Element
-  
-export default HalfGauge;
+export default HalfGauge;
+declare function HalfGauge({ responsive, id, label, percentage, order, min, max, size, fontSize, color, backgroundColor, barBackgroundColor, handColor, minMaxWidth, middleColor, middleRightColor, rightColor, leftColor, middleLeftColor }: {
+    responsive?: boolean | undefined;
+    id?: string | undefined;
+    label?: string | undefined;
+    percentage?: number | undefined;
+    order?: string | undefined;
+    min?: string | undefined;
+    max?: string | undefined;
+    size?: number | undefined;
+    fontSize?: string | undefined;
+    color?: string | undefined;
+    backgroundColor?: string | undefined;
+    barBackgroundColor?: string | undefined;
+    handColor?: string | undefined;
+    minMaxWidth?: string | undefined;
+    middleColor?: string | undefined;
+    middleRightColor?: string | undefined;
+    rightColor?: string | undefined;
+    leftColor?: string | undefined;
+    middleLeftColor?: string | undefined;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/HalfGauge/HalfGauge.js

@@ -26,19 +26,25 @@ 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 __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
+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;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@material-ui/core");
-var clsx_1 = __importDefault(require("clsx"));
+var material_1 = require("@mui/material");
 var lodash_1 = require("lodash");
 var react_1 = __importStar(require("react"));
 var ELLIPSIS_TEXT_STYLE = {
@@ -46,120 +52,6 @@ var ELLIPSIS_TEXT_STYLE = {
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis'
 };
-var useStyles = (0, core_1.makeStyles)({
-    container: {
-        display: 'flex',
-        height: function (_a) {
-            var size = _a.size;
-            return "".concat(size / 2, "px");
-        },
-        transition: 'all .3s',
-        opacity: function (_a) {
-            var responsive = _a.responsive;
-            return responsive ? 0 : 1;
-        }
-    },
-    gauge: {
-        height: function (_a) {
-            var size = _a.size;
-            return size;
-        },
-        width: function (_a) {
-            var size = _a.size;
-            return size;
-        },
-        backgroundColor: function (_a) {
-            var barBackgroundColor = _a.barBackgroundColor;
-            return barBackgroundColor;
-        },
-        borderRadius: '50%',
-        display: 'grid',
-        placeItems: 'center',
-        webkitClipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
-        clipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
-        '&::before': {
-            content: '""',
-            position: 'absolute',
-            height: function (_a) {
-                var gaugeBarWidth = _a.gaugeBarWidth;
-                return gaugeBarWidth;
-            },
-            width: function (_a) {
-                var gaugeBarWidth = _a.gaugeBarWidth;
-                return gaugeBarWidth;
-            },
-            borderRadius: '50%',
-            backgroundColor: function (_a) {
-                var backgroundColor = _a.backgroundColor;
-                return backgroundColor;
-            }
-        }
-    },
-    valueDiv: {
-        position: 'absolute',
-        color: function (_a) {
-            var color = _a.color;
-            return color;
-        },
-        fontSize: function (_a) {
-            var fontSize = _a.fontSize;
-            return fontSize;
-        },
-        maxWidth: function (_a) {
-            var size = _a.size;
-            return "".concat(size / 2, "px");
-        },
-        minWidth: function (_a) {
-            var size = _a.size;
-            return "".concat(size / 2, "px");
-        },
-        maxHeight: function (_a) {
-            var size = _a.size;
-            return "".concat(size / 4, "px");
-        },
-        minHeight: function (_a) {
-            var size = _a.size;
-            return "".concat(size / 4, "px");
-        },
-        transform: function (_a) {
-            var size = _a.size;
-            return "translateY(-".concat((size / 4) / 2, "px)");
-        },
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        justifyContent: 'end',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        padding: 4,
-        '&>p': __assign(__assign({}, ELLIPSIS_TEXT_STYLE), { margin: 0, width: '100%', textAlign: 'center', '&:first-child': {
-                fontWeight: 'bold'
-            } })
-    },
-    minMax: {
-        display: 'flex',
-        alignItems: 'end',
-        padding: '0 1rem',
-        width: function (_a) {
-            var minMaxWidth = _a.minMaxWidth;
-            return minMaxWidth;
-        },
-        color: function (_a) {
-            var color = _a.color;
-            return color;
-        },
-        fontSize: function (_a) {
-            var fontSize = _a.fontSize;
-            return fontSize;
-        },
-        '&>p': {
-            margin: 0
-        }
-    },
-    min: {
-        justifyContent: 'end'
-    }
-});
 var getHand = function (percentage, handColor) {
     if (!(0, lodash_1.isNumber)(percentage))
         return '';
@@ -179,7 +71,6 @@ var getHand = function (percentage, handColor) {
 var HalfGauge = function (_a) {
     var _b = _a.responsive, responsive = _b === void 0 ? false : _b, _c = _a.id, id = _c === void 0 ? '' : _c, _d = _a.label, label = _d === void 0 ? '' : _d, _e = _a.percentage, percentage = _e === void 0 ? 0 : _e, _f = _a.order, order = _f === void 0 ? 'D' : _f, _g = _a.min, min = _g === void 0 ? '' : _g, _h = _a.max, max = _h === void 0 ? '' : _h, _j = _a.size, size = _j === void 0 ? 200 : _j, _k = _a.fontSize, fontSize = _k === void 0 ? '0.9rem' : _k, _l = _a.color, color = _l === void 0 ? '#000' : _l, _m = _a.backgroundColor, backgroundColor = _m === void 0 ? '#fff' : _m, _o = _a.barBackgroundColor, barBackgroundColor = _o === void 0 ? '#0000' : _o, _p = _a.handColor, handColor = _p === void 0 ? '#fff' : _p, _q = _a.minMaxWidth, minMaxWidth = _q === void 0 ? '6rem' : _q, _r = _a.middleColor, middleColor = _r === void 0 ? '#ffdd71' : _r, _s = _a.middleRightColor, middleRightColor = _s === void 0 ? '#fec900' : _s, _t = _a.rightColor, rightColor = _t === void 0 ? '#00995d' : _t, _u = _a.leftColor, leftColor = _u === void 0 ? '#fe6c6c' : _u, _v = _a.middleLeftColor, middleLeftColor = _v === void 0 ? '#ff9b9b' : _v;
     var gaugeBarWidth = size - (size / 2);
-    var classes = useStyles({ color: color, backgroundColor: backgroundColor, barBackgroundColor: barBackgroundColor, size: size, gaugeBarWidth: gaugeBarWidth, fontSize: fontSize, minMaxWidth: minMaxWidth, responsive: responsive });
     var halfGaugeId = "".concat(id, "-halfGauge");
     var halfGaugeHandId = "".concat(id, "-halfGaugeHand");
     var halfGaugeContainerId = "".concat(id, "-halfGaugeContainer");
@@ -257,23 +148,84 @@ var HalfGauge = function (_a) {
         }
         setTimeout(function () { return makeResponsive(); }, 500);
     }, [halfGaugeContainerId]);
-    (0, react_1.useEffect)(function () { return responsive && makeResponsive(); }, [responsive, makeResponsive]);
+    (0, react_1.useEffect)(function () {
+        if (responsive)
+            makeResponsive();
+    }, [responsive, makeResponsive]);
     var displayContainer = (0, react_1.useCallback)(function () {
         var containerEl = document.getElementById(halfGaugeContainerId);
         if (containerEl)
             containerEl.style.opacity = 1;
     }, [halfGaugeContainerId]);
-    (0, react_1.useEffect)(function () { return responsive && setTimeout(function () { return displayContainer(); }, 500); }, [responsive, displayContainer]);
+    (0, react_1.useEffect)(function () {
+        if (!responsive)
+            return undefined;
+        var timeoutId = setTimeout(function () { return displayContainer(); }, 500);
+        return function () { return clearTimeout(timeoutId); };
+    }, [responsive, displayContainer]);
     //____________________________________________________________________________________________________
-    return react_1.default.createElement("div", { id: halfGaugeContainerId, className: classes.container },
-        react_1.default.createElement("div", { className: (0, clsx_1.default)(classes.minMax, classes.min) },
+    var gaugeSx = {
+        height: size,
+        width: size,
+        backgroundColor: barBackgroundColor,
+        borderRadius: '50%',
+        display: 'grid',
+        placeItems: 'center',
+        webkitClipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
+        clipPath: 'polygon(0 0, 100% 0, 100% 51%, 0 51%)',
+        '&::before': {
+            content: '""',
+            position: 'absolute',
+            height: gaugeBarWidth,
+            width: gaugeBarWidth,
+            borderRadius: '50%',
+            backgroundColor: backgroundColor
+        }
+    };
+    var minMaxSx = {
+        display: 'flex',
+        alignItems: 'end',
+        padding: '0 1rem',
+        width: minMaxWidth,
+        color: color,
+        fontSize: fontSize,
+        '&>p': {
+            margin: 0
+        }
+    };
+    return react_1.default.createElement(material_1.Box, { id: halfGaugeContainerId, sx: {
+            display: 'flex',
+            height: "".concat(size / 2, "px"),
+            transition: 'all .3s',
+            opacity: responsive ? 0 : 1
+        } },
+        react_1.default.createElement(material_1.Box, { sx: __assign(__assign({}, minMaxSx), { justifyContent: 'end' }) },
             react_1.default.createElement("p", null, min)),
-        react_1.default.createElement("div", { id: halfGaugeId, className: classes.gauge },
-            react_1.default.createElement("div", { id: halfGaugeHandId, className: classes.gauge }),
-            react_1.default.createElement("div", { className: classes.valueDiv },
+        react_1.default.createElement(material_1.Box, { id: halfGaugeId, sx: gaugeSx },
+            react_1.default.createElement(material_1.Box, { id: halfGaugeHandId, sx: gaugeSx }),
+            react_1.default.createElement(material_1.Box, { sx: {
+                    position: 'absolute',
+                    color: color,
+                    fontSize: fontSize,
+                    maxWidth: "".concat(size / 2, "px"),
+                    minWidth: "".concat(size / 2, "px"),
+                    maxHeight: "".concat(size / 4, "px"),
+                    minHeight: "".concat(size / 4, "px"),
+                    transform: "translateY(-".concat((size / 4) / 2, "px)"),
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'end',
+                    overflow: 'hidden',
+                    whiteSpace: 'nowrap',
+                    padding: 4,
+                    '&>p': __assign(__assign({}, ELLIPSIS_TEXT_STYLE), { margin: 0, width: '100%', textAlign: 'center', '&:first-of-type': {
+                            fontWeight: 'bold'
+                        } })
+                } },
                 percentageText && react_1.default.createElement("p", null, percentageText),
                 label && react_1.default.createElement("p", null, label))),
-        react_1.default.createElement("div", { className: classes.minMax },
+        react_1.default.createElement(material_1.Box, { sx: minMaxSx },
             react_1.default.createElement("p", null, max)));
 };
 exports.default = HalfGauge;

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

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