argous 1.2.246 → 1.3.2

package/dist/components/ImageResize/ImageResize.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -22,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)
@@ -45,95 +59,80 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var utils_1 = require("../../utils");
-var core_1 = require("@material-ui/core");
-var clsx_1 = __importDefault(require("clsx"));
+var material_1 = require("@mui/material");
+var clsx_1 = require("clsx");
 var jquery_1 = __importDefault(require("jquery"));
 var react_1 = __importStar(require("react"));
 var md_1 = require("react-icons/md");
-var useStyles = core_1.makeStyles(({
-    component: {
+var componentSx = function (_a) {
+    var _b = _a.height, height = _b === void 0 ? 300 : _b, _c = _a.width, width = _c === void 0 ? 300 : _c;
+    return ({
         position: 'relative',
         background: 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAAHmWi9wAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBJREFUeNpinDFjemBgIAMaePv2zX8MwMSADdBKFCCAGF++fIEuBHQEYb3UFAIIIOwBQWzQEOvVwaMOIICwBDoWRZjRQKaNo4rorQgggBiBCVpISJiBGoCJgXpg1KxRs0aiWQABxPj79+93795SbhAwUxNVLo+G/ahZo2aNmjVq1qhZI8wsgADt1zERADAMAsD6t5B4bRHRgeGj4I8FctKPM3ObLp6fk7w1eSwsLCwsLCwsLCwsrE5WvrHdrTLF8wBDaPAHu14WwgAAAABJRU5ErkJggg==") repeat center center',
         padding: '4em',
-        height: function (_a) {
-            var _b = _a.height, height = _b === void 0 ? 300 : _b;
-            return "calc(" + height + "px + 200px)";
-        },
+        height: "calc(".concat(height, "px + 200px)"),
         border: '3px solid #49708A',
-        maxWidth: function (_a) {
-            var _b = _a.width, width = _b === void 0 ? 300 : _b;
-            return "calc(" + width + "px + 600px)";
-        },
+        maxWidth: "calc(".concat(width, "px + 600px)"),
         overflow: 'hidden',
         margin: '0 auto',
-    },
-    overlay: {
+    });
+};
+var overlaySx = function (_a) {
+    var _b = _a.width, width = _b === void 0 ? 300 : _b, _c = _a.height, height = _c === void 0 ? 300 : _c, borderRadius = _a.borderRadius;
+    return ({
         position: 'absolute',
-        left: function (_a) {
-            var _b = _a.width, width = _b === void 0 ? 300 : _b;
-            return "calc(50% - " + (width - 300) / 2 + "px)";
-        },
-        top: function (_a) {
-            var _b = _a.height, height = _b === void 0 ? 300 : _b;
-            return "calc(50% - " + (height - 300) / 2 + "px)";
-        },
+        left: "calc(50% - ".concat((width - 300) / 2, "px)"),
+        top: "calc(50% - ".concat((height - 300) / 2, "px)"),
         marginLeft: '-150px',
         marginTop: '-150px',
         zIndex: 999,
-        width: function (_a) {
-            var width = _a.width;
-            return width !== null && width !== void 0 ? width : '300px';
-        },
-        height: function (_a) {
-            var height = _a.height;
-            return height !== null && height !== void 0 ? height : '300px';
-        },
+        width: width !== null && width !== void 0 ? width : '300px',
+        height: height !== null && height !== void 0 ? height : '300px',
         border: 'solid 2px rgba(222,60,80,.9)',
-        borderRadius: function (_a) {
-            var borderRadius = _a.borderRadius;
-            return borderRadius !== null && borderRadius !== void 0 ? borderRadius : '50%';
-        },
+        borderRadius: borderRadius !== null && borderRadius !== void 0 ? 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: {
+    });
+};
+var resizeContainerSx = {
+    position: 'relative',
+    display: 'inline-block',
+    cursor: 'move',
+    margin: '0 auto',
+    '&:hover, &:active': {
+        outline: '2px dashed rgba(222,60,80,.9)'
+    }
+};
+var resizeHandleSx = {
+    position: 'absolute',
+    display: 'block',
+    width: '10px',
+    height: '10px',
+    background: 'rgba(222,60,80,.9)',
+    zIndex: 999,
+};
+var 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',
     }
-}));
+};
 var DEFAULT_OPTIONS = [
     {
         name: 'Brilho',
@@ -220,15 +219,14 @@ var DEFAULT_OPTIONS = [
 ];
 var ImageResize = function (_a) {
     var imagem = _a.imagem, onImage = _a.onImage, _b = _a.finalImageProperties, finalImageProperties = _b === void 0 ? {} : _b, props = __rest(_a, ["imagem", "onImage", "finalImageProperties"]);
-    var classes = useStyles(finalImageProperties);
-    var _c = react_1.useState(undefined), urlImagem = _c[0], setUrlImagem = _c[1];
-    var _d = react_1.useState(undefined), key = _d[0], setKey = _d[1];
-    var image = react_1.useRef();
-    var button = react_1.useRef();
-    react_1.useEffect(function () {
+    var _c = (0, react_1.useState)(undefined), urlImagem = _c[0], setUrlImagem = _c[1];
+    var _d = (0, react_1.useState)(undefined), key = _d[0], setKey = _d[1];
+    var image = (0, react_1.useRef)();
+    var button = (0, react_1.useRef)();
+    (0, react_1.useEffect)(function () {
         setKey(Math.floor((Math.random() * 10000) + 1));
     }, []);
-    utils_1.useUpdateEffect(function () {
+    (0, utils_1.useUpdateEffect)(function () {
         if (!imagem || !key)
             return;
         var src = window.URL.createObjectURL(imagem);
@@ -237,16 +235,16 @@ var ImageResize = function (_a) {
     }, [imagem, key]);
     var resizeableImage = function (imageTarget, src) {
         // Some variable and settings
-        var $container, eventState = {}, constrain = false, minWidth = jquery_1.default("#overlay_" + key).width(), minHeight = jquery_1.default("#overlay_" + key).height(), origSrc = new Image(), resizeCanvas = document.createElement('canvas'), resized = false;
+        var $container, eventState = {}, constrain = false, minWidth = (0, jquery_1.default)("#overlay_".concat(key)).width(), minHeight = (0, jquery_1.default)("#overlay_".concat(key)).height(), origSrc = new Image(), resizeCanvas = document.createElement('canvas'), resized = false;
         var init = function () {
             // When resizing, we will always use this copy of the original as the base
             origSrc.src = src;
             // Assign the container to a variable
-            $container = jquery_1.default(imageTarget).parent("#container_" + key);
+            $container = (0, jquery_1.default)(imageTarget).parent("#container_".concat(key));
             // Add events
-            $container.on('mousedown touchstart', ".resize-handle_" + key, startResize);
-            $container.on('mousedown touchstart', "#resizeImage_" + key, startMoving);
-            jquery_1.default("#js-crop_" + key).on('click', crop);
+            $container.on('mousedown touchstart', ".resize-handle_".concat(key), startResize);
+            $container.on('mousedown touchstart', "#resizeImage_".concat(key), startMoving);
+            (0, jquery_1.default)("#js-crop_".concat(key)).on('click', crop);
             // button.addEventListener('click', crop)
             // button.onclick = crop
         };
@@ -254,13 +252,13 @@ var ImageResize = function (_a) {
             e.preventDefault();
             e.stopPropagation();
             saveEventState(e);
-            jquery_1.default(document).on('mousemove touchmove', resizing);
-            jquery_1.default(document).on('mouseup touchend', endResize);
+            (0, jquery_1.default)(document).on('mousemove touchmove', resizing);
+            (0, jquery_1.default)(document).on('mouseup touchend', endResize);
         };
         var endResize = function (e) {
             e.preventDefault();
-            jquery_1.default(document).off('mouseup touchend', endResize);
-            jquery_1.default(document).off('mousemove touchmove', resizing);
+            (0, jquery_1.default)(document).off('mouseup touchend', endResize);
+            (0, jquery_1.default)(document).off('mousemove touchmove', resizing);
         };
         var saveEventState = function (e) {
             var _a, _b;
@@ -269,8 +267,8 @@ var ImageResize = function (_a) {
             eventState.container_height = $container.height();
             eventState.container_left = $container.offset().left;
             eventState.container_top = $container.offset().top;
-            eventState.mouse_x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
-            eventState.mouse_y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            eventState.mouse_x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + (0, jquery_1.default)(window).scrollLeft();
+            eventState.mouse_y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + (0, jquery_1.default)(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') {
@@ -286,22 +284,22 @@ var ImageResize = function (_a) {
         var resizing = function (e) {
             var _a, _b;
             var mouse = {}, width, height, left, top;
-            mouse.x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + jquery_1.default(window).scrollLeft();
-            mouse.y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            mouse.x = (e.clientX || e.pageX || ((_a = e.originalEvent.touches) === null || _a === void 0 ? void 0 : _a.at(0).clientX)) + (0, jquery_1.default)(window).scrollLeft();
+            mouse.y = (e.clientY || e.pageY || ((_b = e.originalEvent.touches) === null || _b === void 0 ? void 0 : _b.at(0).clientY)) + (0, jquery_1.default)(window).scrollTop();
             // Position image differently depending on the corner dragged and constraints
-            if (eventState.evnt.target.id === "resizeHandleSe_" + key) {
+            if (eventState.evnt.target.id === "resizeHandleSe_".concat(key)) {
                 width = mouse.x - eventState.container_left;
                 height = mouse.y - eventState.container_top;
                 left = eventState.container_left;
                 top = eventState.container_top;
             }
-            else if (eventState.evnt.target.id === "resizeHandleSw_" + key) {
+            else if (eventState.evnt.target.id === "resizeHandleSw_".concat(key)) {
                 width = eventState.container_width - (mouse.x - eventState.container_left);
                 height = mouse.y - eventState.container_top;
                 left = mouse.x;
                 top = eventState.container_top;
             }
-            else if (eventState.evnt.target.id === "resizeHandleNw_" + key) {
+            else if (eventState.evnt.target.id === "resizeHandleNw_".concat(key)) {
                 width = eventState.container_width - (mouse.x - eventState.container_left);
                 height = eventState.container_height - (mouse.y - eventState.container_top);
                 left = mouse.x;
@@ -310,7 +308,7 @@ var ImageResize = function (_a) {
                     top = mouse.y - ((width / origSrc.width * origSrc.height) - height);
                 }
             }
-            else if (eventState.evnt.target.id === "resizeHandleNe_" + key) {
+            else if (eventState.evnt.target.id === "resizeHandleNe_".concat(key)) {
                 width = mouse.x - eventState.container_left;
                 height = eventState.container_height - (mouse.y - eventState.container_top);
                 left = eventState.container_left;
@@ -331,10 +329,10 @@ var ImageResize = function (_a) {
                 var wantedTop = top;
                 var wantedMinLeft = wantedLeft + $container.width();
                 var wantedMinTop = wantedTop + $container.height();
-                var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
-                var maxTop = jquery_1.default("#overlay_" + key).offset().top;
-                var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
-                var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
+                var maxLeft = (0, jquery_1.default)("#overlay_".concat(key)).offset().left;
+                var maxTop = (0, jquery_1.default)("#overlay_".concat(key)).offset().top;
+                var minLeft = maxLeft + (0, jquery_1.default)("#overlay_".concat(key)).width();
+                var minTop = maxTop + (0, jquery_1.default)("#overlay_".concat(key)).height();
                 var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
                 var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
                 $container.offset({
@@ -348,20 +346,20 @@ var ImageResize = function (_a) {
             resizeCanvas.height = height;
             resizeCanvas.getContext('2d').drawImage(origSrc, 0, 0, width, height);
             // setUrlImagem(resizeCanvas.toDataURL('image/png'))
-            jquery_1.default(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));
+            (0, jquery_1.default)(imageTarget).attr('src', resizeCanvas.toDataURL('image/png'));
             resized = true;
         };
         var startMoving = function (e) {
             e.preventDefault();
             e.stopPropagation();
             saveEventState(e);
-            jquery_1.default(document).on('mousemove touchmove', moving);
-            jquery_1.default(document).on('mouseup touchend', endMoving);
+            (0, jquery_1.default)(document).on('mousemove touchmove', moving);
+            (0, jquery_1.default)(document).on('mouseup touchend', endMoving);
         };
         var endMoving = function (e) {
             e.preventDefault();
-            jquery_1.default(document).off('mouseup touchend', endMoving);
-            jquery_1.default(document).off('mousemove touchmove', moving);
+            (0, jquery_1.default)(document).off('mouseup touchend', endMoving);
+            (0, jquery_1.default)(document).off('mousemove touchmove', moving);
         };
         var moving = function (e) {
             var _a, _b, _c, _d, _e, _f;
@@ -369,17 +367,17 @@ var ImageResize = function (_a) {
             e.preventDefault();
             e.stopPropagation();
             touches = e.originalEvent.touches;
-            mouse.x = (e.clientX || e.pageX || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientX)) + jquery_1.default(window).scrollLeft();
-            mouse.y = (e.clientY || e.pageY || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientY)) + jquery_1.default(window).scrollTop();
+            mouse.x = (e.clientX || e.pageX || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientX)) + (0, jquery_1.default)(window).scrollLeft();
+            mouse.y = (e.clientY || e.pageY || (touches === null || touches === void 0 ? void 0 : touches.at(0).clientY)) + (0, jquery_1.default)(window).scrollTop();
             //detecção de colisao para impedir q imagem saia do quadro
             var wantedLeft = mouse.x - (eventState.mouse_x - eventState.container_left);
             var wantedTop = mouse.y - (eventState.mouse_y - eventState.container_top);
             var wantedMinLeft = wantedLeft + $container.width();
             var wantedMinTop = wantedTop + $container.height();
-            var maxLeft = jquery_1.default("#overlay_" + key).offset().left;
-            var maxTop = jquery_1.default("#overlay_" + key).offset().top;
-            var minLeft = maxLeft + jquery_1.default("#overlay_" + key).width();
-            var minTop = maxTop + jquery_1.default("#overlay_" + key).height();
+            var maxLeft = (0, jquery_1.default)("#overlay_".concat(key)).offset().left;
+            var maxTop = (0, jquery_1.default)("#overlay_".concat(key)).offset().top;
+            var minLeft = maxLeft + (0, jquery_1.default)("#overlay_".concat(key)).width();
+            var minTop = maxTop + (0, jquery_1.default)("#overlay_".concat(key)).height();
             var finalLeft = wantedLeft > maxLeft ? maxLeft : wantedMinLeft < minLeft ? minLeft - $container.width() : wantedLeft;
             var finalTop = wantedTop > maxTop ? maxTop : wantedMinTop < minTop ? minTop - $container.height() : wantedTop;
             $container.offset({
@@ -414,12 +412,12 @@ var ImageResize = function (_a) {
             }
             setTimeout(function () {
                 //Find the part of the image that is inside the crop box
-                var cropCanvas, left = jquery_1.default("#overlay_" + key).offset().left - $container.offset().left, top = jquery_1.default("#overlay_" + key).offset().top - $container.offset().top, width = jquery_1.default("#overlay_" + key).width(), height = jquery_1.default("#overlay_" + key).height();
+                var cropCanvas, left = (0, jquery_1.default)("#overlay_".concat(key)).offset().left - $container.offset().left, top = (0, jquery_1.default)("#overlay_".concat(key)).offset().top - $container.offset().top, width = (0, jquery_1.default)("#overlay_".concat(key)).width(), height = (0, jquery_1.default)("#overlay_".concat(key)).height();
                 cropCanvas = document.createElement('canvas');
                 cropCanvas.width = width;
                 cropCanvas.height = height;
                 var ctx = cropCanvas.getContext('2d');
-                ctx.filter = jquery_1.default("#resizeImage_" + key).css('filter');
+                ctx.filter = (0, jquery_1.default)("#resizeImage_".concat(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'));
@@ -427,8 +425,8 @@ var ImageResize = function (_a) {
         };
         init();
     };
-    var _e = react_1.useState(0), selectedOptionIndex = _e[0], setSelectedOptionIndex = _e[1];
-    var _f = react_1.useState(DEFAULT_OPTIONS), options = _f[0], setOptions = _f[1];
+    var _e = (0, react_1.useState)(0), selectedOptionIndex = _e[0], setSelectedOptionIndex = _e[1];
+    var _f = (0, react_1.useState)(DEFAULT_OPTIONS), options = _f[0], setOptions = _f[1];
     var selectedOption = options[selectedOptionIndex];
     function handleSliderChange(_, value) {
         setOptions(function (prevOptions) {
@@ -441,32 +439,32 @@ var ImageResize = function (_a) {
     }
     var getImageStyle = function (onlyFilters) {
         if (onlyFilters === void 0) { onlyFilters = false; }
-        var filters = options.map(function (option) { return option.property + "(" + option.value + option.unit + ")"; }).join(' ');
+        var filters = options.map(function (option) { return "".concat(option.property, "(").concat(option.value).concat(option.unit, ")"); }).join(' ');
         return onlyFilters ? filters : { filter: filters };
     };
-    return react_1.default.createElement(core_1.Dialog, __assign({}, props, { maxWidth: 'lg', fullWidth: true, keepMounted: true }),
-        react_1.default.createElement(core_1.DialogTitle, null, "Ajustar Imagem"),
-        react_1.default.createElement(core_1.DialogContent, { style: { display: 'block', position: 'relative' } },
-            react_1.default.createElement(core_1.Grid, { container: true, spacing: 2 },
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 8 },
-                    react_1.default.createElement("div", { className: classes.component },
-                        react_1.default.createElement("div", { id: "overlay_" + key, className: classes.overlay }),
-                        react_1.default.createElement("div", { id: "container_" + key, className: classes.resizeContainer },
-                            react_1.default.createElement("span", { id: "resizeHandleNw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNw) }),
-                            react_1.default.createElement("span", { id: "resizeHandleNe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleNe) }),
-                            react_1.default.createElement("img", { ref: image, id: "resizeImage_" + key, style: __assign({ display: 'block', minWidth: jquery_1.default("#overlay_" + key).width(), minHeight: jquery_1.default("#overlay_" + key).height() }, getImageStyle()), src: urlImagem, alt: 'Imagem a ser Redimensionada' }),
-                            react_1.default.createElement("span", { id: "resizeHandleSw_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSw) }),
-                            react_1.default.createElement("span", { id: "resizeHandleSe_" + key, className: clsx_1.default("resize-handle_" + key, classes.resizeHandle, classes.resizeHandleSe) })))),
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 2, style: { display: 'flex', alignItems: 'center' } },
-                    react_1.default.createElement(core_1.Slider, { style: { height: 'calc(100% - 30px)' }, orientation: 'vertical', 
+    return (react_1.default.createElement(material_1.Dialog, __assign({}, props, { maxWidth: 'lg', fullWidth: true, keepMounted: true }),
+        react_1.default.createElement(material_1.DialogTitle, null, "Ajustar Imagem"),
+        react_1.default.createElement(material_1.DialogContent, { style: { display: 'block', position: 'relative' } },
+            react_1.default.createElement(material_1.Grid, { container: true, spacing: 2 },
+                react_1.default.createElement(material_1.Grid, { size: 8 },
+                    react_1.default.createElement(material_1.Box, { sx: componentSx(finalImageProperties) },
+                        react_1.default.createElement(material_1.Box, { id: "overlay_".concat(key), sx: overlaySx(finalImageProperties) }),
+                        react_1.default.createElement(material_1.Box, { id: "container_".concat(key), sx: resizeContainerSx },
+                            react_1.default.createElement(material_1.Box, { component: 'span', id: "resizeHandleNw_".concat(key), className: (0, clsx_1.clsx)("resize-handle_".concat(key)), sx: __assign(__assign({}, resizeHandleSx), resizeHandlePositionSx.nw) }),
+                            react_1.default.createElement(material_1.Box, { component: 'span', id: "resizeHandleNe_".concat(key), className: (0, clsx_1.clsx)("resize-handle_".concat(key)), sx: __assign(__assign({}, resizeHandleSx), resizeHandlePositionSx.ne) }),
+                            react_1.default.createElement("img", { ref: image, id: "resizeImage_".concat(key), style: __assign({ display: 'block', minWidth: (0, jquery_1.default)("#overlay_".concat(key)).width(), minHeight: (0, jquery_1.default)("#overlay_".concat(key)).height() }, getImageStyle()), src: urlImagem, alt: 'Imagem a ser Redimensionada' }),
+                            react_1.default.createElement(material_1.Box, { component: 'span', id: "resizeHandleSw_".concat(key), className: (0, clsx_1.clsx)("resize-handle_".concat(key)), sx: __assign(__assign({}, resizeHandleSx), resizeHandlePositionSx.sw) }),
+                            react_1.default.createElement(material_1.Box, { component: 'span', id: "resizeHandleSe_".concat(key), className: (0, clsx_1.clsx)("resize-handle_".concat(key)), sx: __assign(__assign({}, resizeHandleSx), resizeHandlePositionSx.se) })))),
+                react_1.default.createElement(material_1.Grid, { style: { display: 'flex', alignItems: 'center' }, size: 2 },
+                    react_1.default.createElement(material_1.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 })),
-                react_1.default.createElement(core_1.Grid, { item: true, xs: 2 },
-                    react_1.default.createElement(core_1.List, null, options.map(function (option, index) { return (react_1.default.createElement(core_1.ListItem, { button: true, onClick: function () { return setSelectedOptionIndex(index); }, key: index, selected: index === selectedOptionIndex },
-                        react_1.default.createElement(core_1.ListItemText, { primary: option.name }))); }))))),
-        react_1.default.createElement(core_1.DialogActions, null,
-            react_1.default.createElement(core_1.Button, { ref: button, id: "js-crop_" + key, color: 'primary', variant: 'contained' },
+                react_1.default.createElement(material_1.Grid, { size: 2 },
+                    react_1.default.createElement(material_1.List, null, options.map(function (option, index) { return (react_1.default.createElement(material_1.ListItem, { button: true, onClick: function () { return setSelectedOptionIndex(index); }, key: index, selected: index === selectedOptionIndex },
+                        react_1.default.createElement(material_1.ListItemText, { primary: option.name }))); }))))),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { ref: button, id: "js-crop_".concat(key), color: 'primary', variant: 'contained' },
                 "Recortar",
-                react_1.default.createElement(md_1.MdCrop, { style: { marginLeft: 5 } }))));
+                react_1.default.createElement(md_1.MdCrop, { style: { marginLeft: 5 } })))));
 };
 exports.default = ImageResize;

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

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

package/dist/components/ImageResizeButton/ImageResizeButton.d.ts

@@ -1,26 +1,3 @@
-import { ImageResizeProps } from '../ImageResize/ImageResize';
-import { ButtonClassKey, ExtendButtonBase } from '@material-ui/core';
+export default ImageResizeButton;
+declare const ImageResizeButton: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
-export interface ImageResizeButtonTypeMap<P = {}, D extends React.ElementType = 'button'>{
-  props: P & {
-    /**
-     * Props repassados ao componente de resize
-     */
-    ImageResizeProps?: ImageResizeProps, 
-    /**
-    * Função chamada quando a imagem fica pronta
-    * 
-    * @param image - Arquivo da imagem
-    * @param b64 - Imagem em Base64
-    * 
-    * @returns {void} Sem Retorno
-    */
-    onImage?: (image: File, b64: string) => void,
-  };
-  defaultComponent: D;
-  classKey: ButtonClassKey;
-}
-
-declare const ImageResizeButton: ExtendButtonBase<ImageResizeButtonTypeMap>;
-
-export default ImageResizeButton;

package/dist/components/ImageResizeButton/ImageResizeButton.js

@@ -12,7 +12,11 @@ var __assign = (this && this.__assign) || function () {
 };
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
 }) : (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     o[k2] = m[k];
@@ -22,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)
@@ -42,12 +56,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var __1 = require("../");
-var core_1 = require("@material-ui/core");
+var material_1 = require("@mui/material");
 var react_1 = __importStar(require("react"));
-var ImageResizeButton = react_1.forwardRef(function (_a, ref) {
-    var children = _a.children, ImageResizeProps = _a.ImageResizeProps, onImage = _a.onImage, _b = _a.Component, Component = _b === void 0 ? core_1.Button : _b, props = __rest(_a, ["children", "ImageResizeProps", "onImage", "Component"]);
-    var _c = react_1.useState(undefined), enviandoFoto = _c[0], setEnviandoFoto = _c[1];
-    var inputRef = react_1.useRef();
+var ImageResizeButton = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, ImageResizeProps = _a.ImageResizeProps, onImage = _a.onImage, _b = _a.Component, Component = _b === void 0 ? material_1.Button : _b, props = __rest(_a, ["children", "ImageResizeProps", "onImage", "Component"]);
+    var _c = (0, react_1.useState)(undefined), enviandoFoto = _c[0], setEnviandoFoto = _c[1];
+    var inputRef = (0, react_1.useRef)();
     var handleClick = function () { return inputRef.current && inputRef.current.click(); };
     var handleChange = function (e) { return setEnviandoFoto(e.target.files[0]); };
     var handleImage = function (image) {
@@ -58,7 +72,7 @@ var ImageResizeButton = react_1.forwardRef(function (_a, ref) {
         setEnviandoFoto(undefined);
         clearInputFile(inputRef.current);
     };
-    react_1.useImperativeHandle(ref, function () { return ({
+    (0, react_1.useImperativeHandle)(ref, function () { return ({
         handleChange: handleChange
     }); }, []);
     return react_1.default.createElement(react_1.default.Fragment, null,

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

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

package/dist/components/Input/Input.d.ts

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