argous 1.2.246 → 1.3.2

package/lib/components/HalfGauge/HalfGauge.js

@@ -1,5 +1,4 @@
-import { makeStyles } from '@material-ui/core';
-import clsx from 'clsx';
+import { Box } from '@mui/material';
 import { isNumber } from 'lodash';
 import React, { useCallback, useEffect, useMemo } from 'react';
 
@@ -9,74 +8,6 @@ const ELLIPSIS_TEXT_STYLE = {
   textOverflow: 'ellipsis'
 };
 
-const useStyles = makeStyles({
-  container: {
-    display: 'flex',
-    height: ({ size }) => `${size / 2}px`,
-    transition: 'all .3s',
-    opacity: ({ responsive }) => responsive ? 0 : 1
-  },
-  gauge: {
-    height: ({ size }) => size,
-    width: ({ size }) => size,
-    backgroundColor: ({ barBackgroundColor }) => 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 }) => gaugeBarWidth,
-      width: ({ gaugeBarWidth }) => gaugeBarWidth,
-      borderRadius: '50%',
-      backgroundColor: ({ backgroundColor }) => backgroundColor
-    }
-  },
-  valueDiv: {
-    position: 'absolute',
-    color: ({ color }) => color,
-    fontSize: ({ fontSize }) => fontSize,
-    maxWidth: ({ size }) => `${size / 2}px`,
-    minWidth: ({ size }) => `${size / 2}px`,
-    maxHeight: ({ size }) => `${size / 4}px`,
-    minHeight: ({ size }) => `${size / 4}px`,
-    transform: ({ size }) => `translateY(-${(size / 4) / 2}px)`,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'end',
-    overflow: 'hidden',
-    whiteSpace: 'nowrap',
-    padding: 4,
-    '&>p': {
-      ...ELLIPSIS_TEXT_STYLE,
-      margin: 0,
-      width: '100%',
-      textAlign: 'center',
-      '&:first-child': {
-        fontWeight: 'bold'
-      }
-    }
-  },
-  minMax: {
-    display: 'flex',
-    alignItems: 'end',
-    padding: '0 1rem',
-    width: ({ minMaxWidth }) => minMaxWidth,
-    color: ({ color }) => color,
-    fontSize: ({ fontSize }) => fontSize,
-    '&>p': {
-      margin: 0
-    }
-  },
-  min: {
-    justifyContent: 'end'
-  }
-});
-
-
 const getHand = (percentage, handColor) => {
   if (!isNumber(percentage)) return '';
   
@@ -128,7 +59,6 @@ const HalfGauge = ({
 }) => {
 
   const gaugeBarWidth = size - (size / 2);
-  const classes = useStyles({ color, backgroundColor, barBackgroundColor, size, gaugeBarWidth, fontSize, minMaxWidth, responsive });
   
   const halfGaugeId = `${id}-halfGauge`;
   const halfGaugeHandId = `${id}-halfGaugeHand`;
@@ -231,37 +161,109 @@ const HalfGauge = ({
 
     setTimeout(() => makeResponsive(), 500);
   }, [halfGaugeContainerId]);
-  useEffect(() => responsive && makeResponsive(), [responsive, makeResponsive]);
+  useEffect(() => {
+    if (responsive) makeResponsive();
+  }, [responsive, makeResponsive]);
 
 
   const displayContainer = useCallback(() => {
     const containerEl = document.getElementById(halfGaugeContainerId);
     if (containerEl) containerEl.style.opacity = 1;
   }, [halfGaugeContainerId]);
-  useEffect(() => responsive && setTimeout(() => displayContainer(), 500), [responsive, displayContainer]);
+  useEffect(() => {
+    if (!responsive) return undefined;
+    const timeoutId = setTimeout(() => displayContainer(), 500);
+    return () => clearTimeout(timeoutId);
+  }, [responsive, displayContainer]);
 
   //____________________________________________________________________________________________________
   
   
-  return <div id={halfGaugeContainerId} className={classes.container}>
-    <div className={clsx(classes.minMax, classes.min)}>
+  const 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
+    }
+  };
+
+  const minMaxSx = {
+    display: 'flex',
+    alignItems: 'end',
+    padding: '0 1rem',
+    width: minMaxWidth,
+    color,
+    fontSize,
+    '&>p': {
+      margin: 0
+    }
+  };
+
+  return <Box
+    id={halfGaugeContainerId}
+    sx={{
+      display: 'flex',
+      height: `${size / 2}px`,
+      transition: 'all .3s',
+      opacity: responsive ? 0 : 1
+    }}
+  >
+    <Box sx={{ ...minMaxSx, justifyContent: 'end' }}>
       <p>
         {min}
       </p>
-    </div>
-    <div id={halfGaugeId} className={classes.gauge}>
-      <div id={halfGaugeHandId} className={classes.gauge} />
-      <div className={classes.valueDiv}>
+    </Box>
+    <Box id={halfGaugeId} sx={gaugeSx}>
+      <Box id={halfGaugeHandId} sx={gaugeSx} />
+      <Box
+        sx={{
+          position: 'absolute',
+          color,
+          fontSize,
+          maxWidth: `${size / 2}px`,
+          minWidth: `${size / 2}px`,
+          maxHeight: `${size / 4}px`,
+          minHeight: `${size / 4}px`,
+          transform: `translateY(-${(size / 4) / 2}px)`,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'end',
+          overflow: 'hidden',
+          whiteSpace: 'nowrap',
+          padding: 4,
+          '&>p': {
+            ...ELLIPSIS_TEXT_STYLE,
+            margin: 0,
+            width: '100%',
+            textAlign: 'center',
+            '&:first-of-type': {
+              fontWeight: 'bold'
+            }
+          }
+        }}
+      >
         {percentageText && <p>{percentageText}</p>}
         {label && <p>{label}</p>}
-      </div>
-    </div>
-    <div className={classes.minMax}>
+      </Box>
+    </Box>
+    <Box sx={minMaxSx}>
       <p>
         {max}
       </p>
-    </div>
-  </div>;
+    </Box>
+  </Box>;
 };
 
-export default HalfGauge;
+export default HalfGauge;

package/lib/components/Highlight/Highlight.js

@@ -1,12 +1,12 @@
 import highlight from 'highlight.js';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
 
 class HighLight extends Component {
+  codeRef = React.createRef();
 
   componentDidMount () {
-    highlight.highlightBlock(findDOMNode(this.refs.code));
+    highlight.highlightBlock(this.codeRef.current);
   }
 
   shouldComponentUpdate(nextProps) {
@@ -19,7 +19,7 @@ class HighLight extends Component {
 
   componentDidUpdate () {
     highlight.initHighlighting.called = false;
-    highlight.highlightBlock(findDOMNode(this.refs.code));
+    highlight.highlightBlock(this.codeRef.current);
   }
 
   render () {
@@ -32,7 +32,7 @@ class HighLight extends Component {
       >
         <code
           className={language}
-          ref='code'
+          ref={this.codeRef}
         >
           {children}
         </code>

package/lib/components/ImageResize/ImageResize.d.ts

@@ -1,4 +1,4 @@
-import { DialogProps } from '@material-ui/core';
+import { DialogProps } from '@mui/material';
 
 export interface ImageResizeProps extends DialogProps {
   /**

package/lib/components/ImageResize/ImageResize.js

@@ -1,74 +1,78 @@
 
 import { useUpdateEffect } from '../../utils';
-import { Button, Dialog, DialogTitle, DialogContent, DialogActions, makeStyles, Grid, List, ListItem, ListItemText, Slider } from '@material-ui/core';
-import clsx from 'clsx';
+import { Box, Button, Dialog, DialogTitle, DialogContent, DialogActions, Grid, List, ListItem, ListItemText, Slider } from '@mui/material';
+import { clsx } from 'clsx';
 import $ from 'jquery';
 import React, { useEffect, useRef, useState } from 'react';
 import { MdCrop } from 'react-icons/md';
 
-const useStyles = makeStyles(({
-  component: {
-    position: 'relative',
-    background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
-    padding: '4em',
-    height: ({ height = 300 }) => `calc(${height}px + 200px)`,
-    border: '3px solid #49708A',
-    maxWidth: ({ width = 300 }) => `calc(${width}px + 600px)`,
-    overflow: 'hidden',
-    margin: '0 auto',
-  },
-  overlay: {
-    position: 'absolute',
-    left: ({ width = 300 }) => `calc(50% - ${(width - 300) / 2}px)`,
-    top: ({ height = 300 }) => `calc(50% - ${(height - 300) / 2}px)`,
-    marginLeft: '-150px',
-    marginTop: '-150px',
-    zIndex: 999,
-    width: ({ width }) => width ?? '300px',
-    height: ({ height }) => height ?? '300px',
-    border: 'solid 2px rgba(222,60,80,.9)',
-    borderRadius: ({ borderRadius }) => borderRadius ?? '50%',
-    boxSizing: 'content-box',
-    pointerEvents: 'none',
-  },
-  resizeContainer: {
-    position: 'relative',
-    display: 'inline-block',
-    cursor: 'move',
-    margin: '0 auto',
-    '&:hover, &:active': {
-      outline: '2px dashed rgba(222,60,80,.9)'
-    }
-  },
-  resizeHandle: {
-    position: 'absolute',
-    display: 'block',
-    width: '10px',
-    height: '10px',
-    background: 'rgba(222,60,80,.9)',
-    zIndex: 999,
-  },
-  resizeHandleNw: {
+const componentSx = ({ height = 300, width = 300 }) => ({
+  position: 'relative',
+  background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
+  padding: '4em',
+  height: `calc(${height}px + 200px)`,
+  border: '3px solid #49708A',
+  maxWidth: `calc(${width}px + 600px)`,
+  overflow: 'hidden',
+  margin: '0 auto',
+});
+
+const overlaySx = ({ width = 300, height = 300, borderRadius }) => ({
+  position: 'absolute',
+  left: `calc(50% - ${(width - 300) / 2}px)`,
+  top: `calc(50% - ${(height - 300) / 2}px)`,
+  marginLeft: '-150px',
+  marginTop: '-150px',
+  zIndex: 999,
+  width: width ?? '300px',
+  height: height ?? '300px',
+  border: 'solid 2px rgba(222,60,80,.9)',
+  borderRadius: borderRadius ?? '50%',
+  boxSizing: 'content-box',
+  pointerEvents: 'none',
+});
+
+const resizeContainerSx = {
+  position: 'relative',
+  display: 'inline-block',
+  cursor: 'move',
+  margin: '0 auto',
+  '&:hover, &:active': {
+    outline: '2px dashed rgba(222,60,80,.9)'
+  }
+};
+
+const resizeHandleSx = {
+  position: 'absolute',
+  display: 'block',
+  width: '10px',
+  height: '10px',
+  background: 'rgba(222,60,80,.9)',
+  zIndex: 999,
+};
+
+const resizeHandlePositionSx = {
+  nw: {
     top: '-5px',
     left: '-5px',
     cursor: 'nw-resize',
   },
-  resizeHandleSw: {
+  sw: {
     bottom: '-5px',
     left: '-5px',
     cursor: 'sw-resize',
   },
-  resizeHandleNe: {
+  ne: {
     top: '-5px',
     right: '-5px',
     cursor: 'ne-resize',
   },
-  resizeHandleSe: {
+  se: {
     bottom: '-5px',
     right: '-5px',
     cursor: 'se-resize',
   }
-}));
+};
 
 const DEFAULT_OPTIONS = [
   {
@@ -156,7 +160,6 @@ const DEFAULT_OPTIONS = [
 ];
 
 const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) => {
-  const classes = useStyles(finalImageProperties);
   const [urlImagem, setUrlImagem] = useState(undefined);
 
   const [key, setKey] = useState(undefined);
@@ -219,11 +222,11 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
     // Save the initial event details and container state
       eventState.container_width = $container.width();
       eventState.container_height = $container.height();
-      eventState.container_left = $container.offset().left; 
+      eventState.container_left = $container.offset().left;
       eventState.container_top = $container.offset().top;
-      eventState.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches?.at(0).clientX) + $(window).scrollLeft(); 
+      eventState.mouse_x = (e.clientX || e.pageX || e.originalEvent.touches?.at(0).clientX) + $(window).scrollLeft();
       eventState.mouse_y = (e.clientY || e.pageY || e.originalEvent.touches?.at(0).clientY) + $(window).scrollTop();
-	
+
       // This is a fix for mobile safari
       // For some reason it does not allow a direct copy of the touches property
       if (typeof e.originalEvent.touches !== 'undefined') {
@@ -239,9 +242,9 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
 
     const resizing = (e) => {
       let mouse = {}, width, height, left, top;
-      mouse.x = (e.clientX || e.pageX || e.originalEvent.touches?.at(0).clientX) + $(window).scrollLeft(); 
+      mouse.x = (e.clientX || e.pageX || e.originalEvent.touches?.at(0).clientX) + $(window).scrollLeft();
       mouse.y = (e.clientY || e.pageY || e.originalEvent.touches?.at(0).clientY) + $(window).scrollTop();
-    
+
       // Position image differently depending on the corner dragged and constraints
       if (eventState.evnt.target.id === `resizeHandleSe_${key}`) {
         width = mouse.x - eventState.container_left;
@@ -270,7 +273,7 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
           top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
         }
       }
-	
+
       // Optionally maintain aspect ratio
       if (constrain || !e.shiftKey) {
         height = width / origSrc.width * origSrc.height;
@@ -278,8 +281,8 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
 
       if (width > minWidth && height > minHeight) {
       // To improve performance you might limit how often resizeImage() is called
-        resizeImage(width, height);  
-      
+        resizeImage(width, height);
+
         //detecção de colisao para impedir q imagem saia do quadro
         const wantedLeft = left;
         const wantedTop = top;
@@ -306,9 +309,9 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
     const resizeImage = (width, height) => {
       resizeCanvas.width = width;
       resizeCanvas.height = height;
-      resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);  
+      resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);
       // setUrlImagem(resizeCanvas.toDataURL('image/png'))
-      $(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));  
+      $(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));
       resized = true;
     };
 
@@ -330,12 +333,12 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
       let mouse = {}, touches;
       e.preventDefault();
       e.stopPropagation();
-    
+
       touches = e.originalEvent.touches;
-    
-      mouse.x = (e.clientX || e.pageX || touches?.at(0).clientX) + $(window).scrollLeft(); 
+
+      mouse.x = (e.clientX || e.pageX || touches?.at(0).clientX) + $(window).scrollLeft();
       mouse.y = (e.clientY || e.pageY || touches?.at(0).clientY) + $(window).scrollTop();
-    
+
       //detecção de colisao para impedir q imagem saia do quadro
       const wantedLeft = mouse.x - (eventState.mouse_x - eventState.container_left);
       const wantedTop = mouse.y - (eventState.mouse_y - eventState.container_top);
@@ -361,15 +364,15 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
       if (eventState.touches && eventState.touches.length > 1 && touches.length > 1) {
         let width = eventState.container_width, height = eventState.container_height;
         let a = eventState.touches?.at(0).clientX - eventState.touches?.at(1).clientX;
-        a = a * a; 
+        a = a * a;
         let b = eventState.touches?.at(0).clientY - eventState.touches?.at(1).clientY;
-        b = b * b; 
+        b = b * b;
         let dist1 = Math.sqrt(a + b);
-      
+
         a = e.originalEvent.touches?.at(0).clientX - touches?.at(1).clientX;
-        a = a * a; 
+        a = a * a;
         b = e.originalEvent.touches?.at(0).clientY - touches?.at(1).clientY;
-        b = b * b; 
+        b = b * b;
         let dist2 = Math.sqrt(a + b);
 
         let ratio = dist2 / dist1;
@@ -388,23 +391,23 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
         resizeImage(width, height);
       }
       setTimeout(() => {
-        
+
         //Find the part of the image that is inside the crop box
         let cropCanvas,
             left = $(`#overlay_${key}`).offset().left - $container.offset().left,
             top = $(`#overlay_${key}`).offset().top - $container.offset().top,
             width = $(`#overlay_${key}`).width(),
             height = $(`#overlay_${key}`).height();
-          
+
         cropCanvas = document.createElement('canvas');
         cropCanvas.width = width;
         cropCanvas.height = height;
-      
-        const ctx = cropCanvas.getContext('2d');    
+
+        const ctx = cropCanvas.getContext('2d');
         ctx.filter = $(`#resizeImage_${key}`).css('filter');
         ctx.drawImage(imageTarget, left, top, width, height, 0, 0, width, height);
         // window.open(cropCanvas.toDataURL('image/png'));
-      
+
         onImage(cropCanvas.toDataURL('image/png'));
       }, 0);
     };
@@ -430,50 +433,52 @@ const ImageResize = ({ imagem, onImage, finalImageProperties = {}, ...props }) =
     return onlyFilters ? filters : { filter: filters };
   };
 
-  return <Dialog {...props} maxWidth='lg' fullWidth keepMounted>
-    <DialogTitle>Ajustar Imagem</DialogTitle>
-    <DialogContent style={{ display: 'block', position: 'relative' }}>
-      
-      <Grid container spacing={2}>
-        <Grid item xs={8}>
-          <div className={classes.component}>
-            <div id={`overlay_${key}`} className={classes.overlay}></div>
-            <div id={`container_${key}`} className={classes.resizeContainer}>
-              <span id={`resizeHandleNw_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleNw)}></span>
-              <span id={`resizeHandleNe_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleNe)}></span>
-              <img ref={image} id={`resizeImage_${key}`} style={{ display: 'block', minWidth: $(`#overlay_${key}`).width(), minHeight: $(`#overlay_${key}`).height(), ...getImageStyle() }} src={urlImagem} alt='Imagem a ser Redimensionada'/>
-              <span id={`resizeHandleSw_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleSw)}></span>
-              <span id={`resizeHandleSe_${key}`} className={clsx(`resize-handle_${key}`, classes.resizeHandle, classes.resizeHandleSe)}></span>
-            </div>
-          </div>
-        </Grid>
-        <Grid item xs={2} style={{ display: 'flex', alignItems: 'center' }}>
-          <Slider 
-            style={{ height: 'calc(100% - 30px)' }}
-            orientation='vertical'
-            // getAriaValueText={valuetext}
-            step={selectedOption.step}
-            min={selectedOption.range.min}
-            max={selectedOption.range.max}
-            value={selectedOption.value}
-            onChange={handleSliderChange}        
-          />
-        </Grid>
-        <Grid item xs={2}>
-          <List>
-            {options.map((option, index) => (
-              <ListItem button onClick={() => setSelectedOptionIndex(index)} key={index} selected={index === selectedOptionIndex}>
-                <ListItemText primary={option.name}/>
-              </ListItem>
-            ))}
-          </List>
+  return (
+    <Dialog {...props} maxWidth='lg' fullWidth keepMounted>
+      <DialogTitle>Ajustar Imagem</DialogTitle>
+      <DialogContent style={{ display: 'block', position: 'relative' }}>
+
+        <Grid container spacing={2}>
+          <Grid size={8}>
+            <Box sx={componentSx(finalImageProperties)}>
+              <Box id={`overlay_${key}`} sx={overlaySx(finalImageProperties)}></Box>
+              <Box id={`container_${key}`} sx={resizeContainerSx}>
+                <Box component='span' id={`resizeHandleNw_${key}`} className={clsx(`resize-handle_${key}`)} sx={{ ...resizeHandleSx, ...resizeHandlePositionSx.nw }}></Box>
+                <Box component='span' id={`resizeHandleNe_${key}`} className={clsx(`resize-handle_${key}`)} sx={{ ...resizeHandleSx, ...resizeHandlePositionSx.ne }}></Box>
+                <img ref={image} id={`resizeImage_${key}`} style={{ display: 'block', minWidth: $(`#overlay_${key}`).width(), minHeight: $(`#overlay_${key}`).height(), ...getImageStyle() }} src={urlImagem} alt='Imagem a ser Redimensionada'/>
+                <Box component='span' id={`resizeHandleSw_${key}`} className={clsx(`resize-handle_${key}`)} sx={{ ...resizeHandleSx, ...resizeHandlePositionSx.sw }}></Box>
+                <Box component='span' id={`resizeHandleSe_${key}`} className={clsx(`resize-handle_${key}`)} sx={{ ...resizeHandleSx, ...resizeHandlePositionSx.se }}></Box>
+              </Box>
+            </Box>
+          </Grid>
+          <Grid style={{ display: 'flex', alignItems: 'center' }} size={2}>
+            <Slider
+              style={{ height: 'calc(100% - 30px)' }}
+              orientation='vertical'
+              // getAriaValueText={valuetext}
+              step={selectedOption.step}
+              min={selectedOption.range.min}
+              max={selectedOption.range.max}
+              value={selectedOption.value}
+              onChange={handleSliderChange}
+            />
+          </Grid>
+          <Grid size={2}>
+            <List>
+              {options.map((option, index) => (
+                <ListItem button onClick={() => setSelectedOptionIndex(index)} key={index} selected={index === selectedOptionIndex}>
+                  <ListItemText primary={option.name}/>
+                </ListItem>
+              ))}
+            </List>
+          </Grid>
         </Grid>
-      </Grid>
-    </DialogContent>
-    <DialogActions>
-      <Button ref={button} id={`js-crop_${key}`} color='primary' variant='contained'>Recortar<MdCrop style={{ marginLeft: 5 }}/></Button>
-    </DialogActions>
-  </Dialog>;
+      </DialogContent>
+      <DialogActions>
+        <Button ref={button} id={`js-crop_${key}`} color='primary' variant='contained'>Recortar<MdCrop style={{ marginLeft: 5 }}/></Button>
+      </DialogActions>
+    </Dialog>
+  );
 };
 
-export default ImageResize;
+export default ImageResize;

package/lib/components/ImageResizeButton/ImageResizeButton.d.ts

@@ -1,5 +1,5 @@
 import { ImageResizeProps } from '../ImageResize/ImageResize';
-import { ButtonClassKey, ExtendButtonBase } from '@material-ui/core';
+import { ButtonClassKey, ExtendButtonBase } from '@mui/material';
 import React from 'react';
 export interface ImageResizeButtonTypeMap<P = {}, D extends React.ElementType = 'button'>{
   props: P & {

package/lib/components/ImageResizeButton/ImageResizeButton.js

@@ -1,5 +1,5 @@
 import { ImageResize } from '../';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 const ImageResizeButton = forwardRef(({ children, ImageResizeProps, onImage, Component = Button, ...props }, ref) => {

package/lib/components/Input/Input.js

@@ -1,7 +1,7 @@
 import { createField, getField } from '../../fieldsRedux';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import MaskedInput from 'react-maskedinput';
+import MaskedInput from '@mona-health/react-input-mask';
 
 /**
  * @deprecated 
@@ -165,7 +165,7 @@ class Input extends Component {
 
     return !mask
       ? (<input {...inputProps} />)
-      : (<MaskedInput mask={mask} {...inputProps} />);
+      : (<MaskedInput mask={mask.replaceAll('1', '9').replaceAll('#', '*')} {...inputProps} />);
   }
 
   stateOptions = () => {