@onesy/ui-react 1.0.164 → 1.0.167

package/ImageCrop/ImageCrop.js

@@ -254,16 +254,10 @@ const useStyle = (0, _styleReact.style)(theme => {
   name: 'onesy-ImageCrop'
 });
 const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _refs$root$current4;
+  var _theme$ui, _theme$ui2, _theme$elements, _refs$root$current4;
   const theme = (0, _styleReact.useOnesyTheme)();
-  const props = _react.default.useMemo(() => {
-    var _theme$ui, _theme$ui2;
-    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageCrop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
-  }, [props_]);
-  const Tooltip = _react.default.useMemo(() => {
-    var _theme$elements;
-    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Tooltip) || _Tooltip.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageCrop) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Tooltip) || _Tooltip.default;
   const {
       // url, datauri or canvas
       image: image_,
@@ -404,7 +398,7 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           break;
       }
     };
-    const onMouseUp = event => {
+    const onMouseUp = event_0 => {
       setMouseDown(false);
       refs.previousMouseEvent.current = undefined;
     };
@@ -417,20 +411,20 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           top: previousTop,
           left: previousLeft
         } = refs.mouseDown.current;
-        const rootRect = refs.root.current.getBoundingClientRect();
+        const rootRect_0 = refs.root.current.getBoundingClientRect();
         const selectorRect_ = refs.imageSelectorMain.current.getBoundingClientRect();
         const selectorRect = {};
 
         // Normalize relative to root
         selectorRect.width = selectorRect_.width;
         selectorRect.height = selectorRect_.height;
-        selectorRect.top = selectorRect_.top - rootRect.top;
-        selectorRect.left = selectorRect_.left - rootRect.left;
+        selectorRect.top = selectorRect_.top - rootRect_0.top;
+        selectorRect.left = selectorRect_.left - rootRect_0.left;
         selectorRect.right = selectorRect.left + selectorRect_.width;
         selectorRect.bottom = selectorRect.top + selectorRect_.height;
         if (((_refs$mouseDown$curre2 = refs.mouseDown.current) === null || _refs$mouseDown$curre2 === void 0 ? void 0 : _refs$mouseDown$curre2.version) === 'make') {
-          const top_ = (0, _utils.clamp)(y - rootRect.top, 0, rootRect.height);
-          const left_ = (0, _utils.clamp)(x - rootRect.left, 0, rootRect.width);
+          const top_ = (0, _utils.clamp)(y - rootRect_0.top, 0, rootRect_0.height);
+          const left_ = (0, _utils.clamp)(x - rootRect_0.left, 0, rootRect_0.width);
           let top = (0, _utils.clamp)(top_, 0, previousTop);
           let left = (0, _utils.clamp)(left_, 0, previousLeft);
           let width = Math.abs(left_ - previousLeft);
@@ -438,11 +432,11 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
           if (refs.aspectRatio.current !== undefined) {
             if (left < previousLeft) {
               var _refs$selector$curren5, _refs$selector$curren6, _refs$selector$curren7, _refs$selector$curren8;
-              if (((_refs$selector$curren5 = refs.selector.current) === null || _refs$selector$curren5 === void 0 ? void 0 : _refs$selector$curren5.left) < previousLeft && left < ((_refs$selector$curren6 = refs.selector.current) === null || _refs$selector$curren6 === void 0 ? void 0 : _refs$selector$curren6.left) && (top <= 0 || ((_refs$selector$curren7 = refs.selector.current) === null || _refs$selector$curren7 === void 0 ? void 0 : _refs$selector$curren7.top) + ((_refs$selector$curren8 = refs.selector.current) === null || _refs$selector$curren8 === void 0 ? void 0 : _refs$selector$curren8.height) >= rootRect.height)) return;
+              if (((_refs$selector$curren5 = refs.selector.current) === null || _refs$selector$curren5 === void 0 ? void 0 : _refs$selector$curren5.left) < previousLeft && left < ((_refs$selector$curren6 = refs.selector.current) === null || _refs$selector$curren6 === void 0 ? void 0 : _refs$selector$curren6.left) && (top <= 0 || ((_refs$selector$curren7 = refs.selector.current) === null || _refs$selector$curren7 === void 0 ? void 0 : _refs$selector$curren7.top) + ((_refs$selector$curren8 = refs.selector.current) === null || _refs$selector$curren8 === void 0 ? void 0 : _refs$selector$curren8.height) >= rootRect_0.height)) return;
             }
             if (top < previousTop) {
               var _refs$selector$curren9, _refs$selector$curren0, _refs$selector$curren1, _refs$selector$curren10;
-              if (((_refs$selector$curren9 = refs.selector.current) === null || _refs$selector$curren9 === void 0 ? void 0 : _refs$selector$curren9.top) < previousTop && top < ((_refs$selector$curren0 = refs.selector.current) === null || _refs$selector$curren0 === void 0 ? void 0 : _refs$selector$curren0.top) && (left <= 0 || ((_refs$selector$curren1 = refs.selector.current) === null || _refs$selector$curren1 === void 0 ? void 0 : _refs$selector$curren1.left) + ((_refs$selector$curren10 = refs.selector.current) === null || _refs$selector$curren10 === void 0 ? void 0 : _refs$selector$curren10.width) >= rootRect.width)) return;
+              if (((_refs$selector$curren9 = refs.selector.current) === null || _refs$selector$curren9 === void 0 ? void 0 : _refs$selector$curren9.top) < previousTop && top < ((_refs$selector$curren0 = refs.selector.current) === null || _refs$selector$curren0 === void 0 ? void 0 : _refs$selector$curren0.top) && (left <= 0 || ((_refs$selector$curren1 = refs.selector.current) === null || _refs$selector$curren1 === void 0 ? void 0 : _refs$selector$curren1.left) + ((_refs$selector$curren10 = refs.selector.current) === null || _refs$selector$curren10 === void 0 ? void 0 : _refs$selector$curren10.width) >= rootRect_0.width)) return;
             }
 
             // Max surface
@@ -471,14 +465,14 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             }
 
             // Max width
-            if (left + width > rootRect.width) {
-              width = rootRect.width - left;
+            if (left + width > rootRect_0.width) {
+              width = rootRect_0.width - left;
               height = width / refs.aspectRatio.current;
             }
 
             // Max height
-            if (top + height > rootRect.height) {
-              height = rootRect.height - top;
+            if (top + height > rootRect_0.height) {
+              height = rootRect_0.height - top;
               width = height * refs.aspectRatio.current;
             }
 
@@ -495,325 +489,325 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             height
           }));
         } else if (((_refs$mouseDown$curre3 = refs.mouseDown.current) === null || _refs$mouseDown$curre3 === void 0 ? void 0 : _refs$mouseDown$curre3.version) === 'move') {
-          const top = y - refs.previousMouseEvent.current.clientY;
-          const left = x - refs.previousMouseEvent.current.clientX;
+          const top_0 = y - refs.previousMouseEvent.current.clientY;
+          const left_0 = x - refs.previousMouseEvent.current.clientX;
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            top: (0, _utils.clamp)(refs.selector.current.top + top, 0, rootRect.height - selectorRect.height),
-            left: (0, _utils.clamp)(refs.selector.current.left + left, 0, rootRect.width - selectorRect.width)
+            top: (0, _utils.clamp)(refs.selector.current.top + top_0, 0, rootRect_0.height - selectorRect.height),
+            left: (0, _utils.clamp)(refs.selector.current.left + left_0, 0, rootRect_0.width - selectorRect.width)
           }));
         } else if (((_refs$mouseDown$curre4 = refs.mouseDown.current) === null || _refs$mouseDown$curre4 === void 0 ? void 0 : _refs$mouseDown$curre4.version) === 'top_left') {
           const incY = y - refs.previousMouseEvent.current.clientY;
           const incX = x - refs.previousMouseEvent.current.clientX;
-          let top = (0, _utils.clamp)(selectorRect.top + incY, 0);
-          let left = (0, _utils.clamp)(selectorRect.left + incX, 0);
-          if (selectorRect.bottom - top < 0 && selectorRect.right - left < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.bottom - top < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.right - left < 0) refs.mouseDown.current.version = 'top_right';
-          let width = (0, _utils.clamp)(selectorRect.right - left, 0);
-          let height = (0, _utils.clamp)(selectorRect.bottom - top, 0);
+          let top_1 = (0, _utils.clamp)(selectorRect.top + incY, 0);
+          let left_1 = (0, _utils.clamp)(selectorRect.left + incX, 0);
+          if (selectorRect.bottom - top_1 < 0 && selectorRect.right - left_1 < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.bottom - top_1 < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.right - left_1 < 0) refs.mouseDown.current.version = 'top_right';
+          let width_0 = (0, _utils.clamp)(selectorRect.right - left_1, 0);
+          let height_0 = (0, _utils.clamp)(selectorRect.bottom - top_1, 0);
           if (refs.aspectRatio.current !== undefined) {
             var _refs$selector$curren11;
             // Left
-            if (left < refs.selector.current.left && refs.selector.current.left < previousLeft && ((_refs$selector$curren11 = refs.selector.current) === null || _refs$selector$curren11 === void 0 ? void 0 : _refs$selector$curren11.top) === 0) return;
+            if (left_1 < refs.selector.current.left && refs.selector.current.left < previousLeft && ((_refs$selector$curren11 = refs.selector.current) === null || _refs$selector$curren11 === void 0 ? void 0 : _refs$selector$curren11.top) === 0) return;
 
             // Max surface
-            if (width + width / refs.aspectRatio.current >= height + height * refs.aspectRatio.current) {
-              height = width / refs.aspectRatio.current;
+            if (width_0 + width_0 / refs.aspectRatio.current >= height_0 + height_0 * refs.aspectRatio.current) {
+              height_0 = width_0 / refs.aspectRatio.current;
             } else {
-              width = height * refs.aspectRatio.current;
+              width_0 = height_0 * refs.aspectRatio.current;
             }
 
             // Moved left
-            if (left < previousLeft) {
-              left = (0, _utils.clamp)(previousLeft - width, 0, previousLeft);
+            if (left_1 < previousLeft) {
+              left_1 = (0, _utils.clamp)(previousLeft - width_0, 0, previousLeft);
 
               // Update width, height upto the previousLeft
-              width = (0, _utils.clamp)(width, 0, previousLeft);
-              height = width / refs.aspectRatio.current;
+              width_0 = (0, _utils.clamp)(width_0, 0, previousLeft);
+              height_0 = width_0 / refs.aspectRatio.current;
             }
 
             // Moved top
-            if (top < previousTop) {
-              top = (0, _utils.clamp)(previousTop - height, 0, previousTop);
+            if (top_1 < previousTop) {
+              top_1 = (0, _utils.clamp)(previousTop - height_0, 0, previousTop);
 
               // Update width, height upto the previousTop
-              height = (0, _utils.clamp)(height, 0, previousTop);
-              width = height * refs.aspectRatio.current;
+              height_0 = (0, _utils.clamp)(height_0, 0, previousTop);
+              width_0 = height_0 * refs.aspectRatio.current;
             }
 
             // Max width
-            if (left + width > rootRect.width) {
-              width = rootRect.width - left;
-              height = width / refs.aspectRatio.current;
+            if (left_1 + width_0 > rootRect_0.width) {
+              width_0 = rootRect_0.width - left_1;
+              height_0 = width_0 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (top + height > rootRect.height) {
-              height = rootRect.height - top;
-              width = height * refs.aspectRatio.current;
+            if (top_1 + height_0 > rootRect_0.height) {
+              height_0 = rootRect_0.height - top_1;
+              width_0 = height_0 * refs.aspectRatio.current;
             }
 
             // Min left
-            if (left < previousLeft) left = previousLeft - width;
+            if (left_1 < previousLeft) left_1 = previousLeft - width_0;
 
             // Min top
-            if (top < previousTop) top = previousTop - height;
+            if (top_1 < previousTop) top_1 = previousTop - height_0;
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            top,
-            left,
-            width,
-            height
+            top: top_1,
+            left: left_1,
+            width: width_0,
+            height: height_0
           }));
         } else if (((_refs$mouseDown$curre5 = refs.mouseDown.current) === null || _refs$mouseDown$curre5 === void 0 ? void 0 : _refs$mouseDown$curre5.version) === 'top_right') {
-          const incY = y - refs.previousMouseEvent.current.clientY;
-          const incX = x - refs.previousMouseEvent.current.clientX;
-          const top = (0, _utils.clamp)(selectorRect.top + incY, 0);
-          if (selectorRect.bottom - top < 0 && selectorRect.width + incX < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.bottom - top < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.width + incX < 0) refs.mouseDown.current.version = 'top_left';
-          let width = (0, _utils.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
-          let height = (0, _utils.clamp)(selectorRect.bottom - top, 0);
+          const incY_0 = y - refs.previousMouseEvent.current.clientY;
+          const incX_0 = x - refs.previousMouseEvent.current.clientX;
+          const top_2 = (0, _utils.clamp)(selectorRect.top + incY_0, 0);
+          if (selectorRect.bottom - top_2 < 0 && selectorRect.width + incX_0 < 0) refs.mouseDown.current.version = 'bottom_left';else if (selectorRect.bottom - top_2 < 0) refs.mouseDown.current.version = 'bottom_right';else if (selectorRect.width + incX_0 < 0) refs.mouseDown.current.version = 'top_left';
+          let width_1 = (0, _utils.clamp)(Math.abs(selectorRect.width + incX_0), 0, rootRect_0.width - selectorRect.left);
+          let height_1 = (0, _utils.clamp)(selectorRect.bottom - top_2, 0);
 
           // Top
           if (refs.aspectRatio.current !== undefined) {
             // Top
-            if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width) return;
-            width = height * refs.aspectRatio.current;
-            height = width / refs.aspectRatio.current;
+            if (top_2 < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect_0.width) return;
+            width_1 = height_1 * refs.aspectRatio.current;
+            height_1 = width_1 / refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_1 > rootRect_0.width) {
+              width_1 = rootRect_0.width - refs.selector.current.left;
+              height_1 = width_1 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_1 > rootRect_0.height) {
+              height_1 = rootRect_0.height - refs.selector.current.top;
+              width_1 = height_1 * refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            top,
-            width,
-            height
+            top: top_2,
+            width: width_1,
+            height: height_1
           }));
         } else if (((_refs$mouseDown$curre6 = refs.mouseDown.current) === null || _refs$mouseDown$curre6 === void 0 ? void 0 : _refs$mouseDown$curre6.version) === 'bottom_right') {
-          const incY = y - refs.previousMouseEvent.current.clientY;
-          const incX = x - refs.previousMouseEvent.current.clientX;
-          if (selectorRect.height + incY < 0 && selectorRect.width + incX < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.height + incY < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.width + incX < 0) refs.mouseDown.current.version = 'bottom_left';
-          let width = (0, _utils.clamp)(Math.abs(selectorRect.width + incX), 0, rootRect.width - selectorRect.left);
-          let height = (0, _utils.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
+          const incY_1 = y - refs.previousMouseEvent.current.clientY;
+          const incX_1 = x - refs.previousMouseEvent.current.clientX;
+          if (selectorRect.height + incY_1 < 0 && selectorRect.width + incX_1 < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.height + incY_1 < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.width + incX_1 < 0) refs.mouseDown.current.version = 'bottom_left';
+          let width_2 = (0, _utils.clamp)(Math.abs(selectorRect.width + incX_1), 0, rootRect_0.width - selectorRect.left);
+          let height_2 = (0, _utils.clamp)(Math.abs(selectorRect.height + incY_1), 0, rootRect_0.height - selectorRect.top);
 
           // Right
           if (refs.aspectRatio.current !== undefined) {
-            height = width / refs.aspectRatio.current;
+            height_2 = width_2 / refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_2 > rootRect_0.width) {
+              width_2 = rootRect_0.width - refs.selector.current.left;
+              height_2 = width_2 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_2 > rootRect_0.height) {
+              height_2 = rootRect_0.height - refs.selector.current.top;
+              width_2 = height_2 * refs.aspectRatio.current;
             }
-            width = height * refs.aspectRatio.current;
+            width_2 = height_2 * refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_2 > rootRect_0.width) {
+              width_2 = rootRect_0.width - refs.selector.current.left;
+              height_2 = width_2 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_2 > rootRect_0.height) {
+              height_2 = rootRect_0.height - refs.selector.current.top;
+              width_2 = height_2 * refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            width,
-            height
+            width: width_2,
+            height: height_2
           }));
         } else if (((_refs$mouseDown$curre7 = refs.mouseDown.current) === null || _refs$mouseDown$curre7 === void 0 ? void 0 : _refs$mouseDown$curre7.version) === 'bottom_left') {
-          const incY = y - refs.previousMouseEvent.current.clientY;
-          const incX = x - refs.previousMouseEvent.current.clientX;
-          const left = (0, _utils.clamp)(selectorRect.left + incX, 0);
-          if (selectorRect.height + incY < 0 && selectorRect.right - left < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.height + incY < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.right - left < 0) refs.mouseDown.current.version = 'bottom_right';
-          let width = (0, _utils.clamp)(selectorRect.right - left, 0);
-          let height = (0, _utils.clamp)(Math.abs(selectorRect.height + incY), 0, rootRect.height - selectorRect.top);
+          const incY_2 = y - refs.previousMouseEvent.current.clientY;
+          const incX_2 = x - refs.previousMouseEvent.current.clientX;
+          const left_2 = (0, _utils.clamp)(selectorRect.left + incX_2, 0);
+          if (selectorRect.height + incY_2 < 0 && selectorRect.right - left_2 < 0) refs.mouseDown.current.version = 'top_right';else if (selectorRect.height + incY_2 < 0) refs.mouseDown.current.version = 'top_left';else if (selectorRect.right - left_2 < 0) refs.mouseDown.current.version = 'bottom_right';
+          let width_3 = (0, _utils.clamp)(selectorRect.right - left_2, 0);
+          let height_3 = (0, _utils.clamp)(Math.abs(selectorRect.height + incY_2), 0, rootRect_0.height - selectorRect.top);
 
           // Left
           if (refs.aspectRatio.current !== undefined) {
             var _refs$selector$curren12, _refs$selector$curren13;
             // Left
-            if (left < refs.selector.current.left && ((_refs$selector$curren12 = refs.selector.current) === null || _refs$selector$curren12 === void 0 ? void 0 : _refs$selector$curren12.top) + ((_refs$selector$curren13 = refs.selector.current) === null || _refs$selector$curren13 === void 0 ? void 0 : _refs$selector$curren13.height) >= rootRect.height) return;
-            height = width / refs.aspectRatio.current;
+            if (left_2 < refs.selector.current.left && ((_refs$selector$curren12 = refs.selector.current) === null || _refs$selector$curren12 === void 0 ? void 0 : _refs$selector$curren12.top) + ((_refs$selector$curren13 = refs.selector.current) === null || _refs$selector$curren13 === void 0 ? void 0 : _refs$selector$curren13.height) >= rootRect_0.height) return;
+            height_3 = width_3 / refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_3 > rootRect_0.width) {
+              width_3 = rootRect_0.width - refs.selector.current.left;
+              height_3 = width_3 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_3 > rootRect_0.height) {
+              height_3 = rootRect_0.height - refs.selector.current.top;
+              width_3 = height_3 * refs.aspectRatio.current;
             }
-            width = height * refs.aspectRatio.current;
+            width_3 = height_3 * refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_3 > rootRect_0.width) {
+              width_3 = rootRect_0.width - refs.selector.current.left;
+              height_3 = width_3 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_3 > rootRect_0.height) {
+              height_3 = rootRect_0.height - refs.selector.current.top;
+              width_3 = height_3 * refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            left,
-            width,
-            height
+            left: left_2,
+            width: width_3,
+            height: height_3
           }));
         } else if (((_refs$mouseDown$curre8 = refs.mouseDown.current) === null || _refs$mouseDown$curre8 === void 0 ? void 0 : _refs$mouseDown$curre8.version) === 'top') {
           const inc = y - refs.previousMouseEvent.current.clientY;
-          const top = (0, _utils.clamp)(refs.selector.current.top + inc, 0);
-          if (refs.selector.current.top <= 0 && top <= 0) return;
-          if (selectorRect.bottom - top < 0) refs.mouseDown.current.version = 'bottom';
-          let width = refs.selector.current.width;
-          let height = (0, _utils.clamp)(Math.abs(refs.selector.current.height - inc), 0, previousTop - top);
+          const top_3 = (0, _utils.clamp)(refs.selector.current.top + inc, 0);
+          if (refs.selector.current.top <= 0 && top_3 <= 0) return;
+          if (selectorRect.bottom - top_3 < 0) refs.mouseDown.current.version = 'bottom';
+          let width_4 = refs.selector.current.width;
+          let height_4 = (0, _utils.clamp)(Math.abs(refs.selector.current.height - inc), 0, previousTop - top_3);
           if (refs.aspectRatio.current !== undefined) {
             // Top
-            if (top < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect.width) return;
-            width = height * refs.aspectRatio.current;
+            if (top_3 < refs.selector.current.top && refs.selector.current.top < previousTop && refs.selector.current.left + refs.selector.current.width >= rootRect_0.width) return;
+            width_4 = height_4 * refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_4 > rootRect_0.width) {
+              width_4 = rootRect_0.width - refs.selector.current.left;
+              height_4 = width_4 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (top + height > rootRect.height) {
-              height = rootRect.height - top;
-              width = height * refs.aspectRatio.current;
+            if (top_3 + height_4 > rootRect_0.height) {
+              height_4 = rootRect_0.height - top_3;
+              width_4 = height_4 * refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            top,
-            width,
-            height
+            top: top_3,
+            width: width_4,
+            height: height_4
           }));
         } else if (((_refs$mouseDown$curre9 = refs.mouseDown.current) === null || _refs$mouseDown$curre9 === void 0 ? void 0 : _refs$mouseDown$curre9.version) === 'bottom') {
-          const inc = y - refs.previousMouseEvent.current.clientY;
-          if (selectorRect.height + inc < 0) refs.mouseDown.current.version = 'top';
-          let width = refs.selector.current.width;
-          let height = (0, _utils.clamp)(Math.abs(selectorRect.height + inc), 0, rootRect.height - refs.selector.current.top);
+          const inc_0 = y - refs.previousMouseEvent.current.clientY;
+          if (selectorRect.height + inc_0 < 0) refs.mouseDown.current.version = 'top';
+          let width_5 = refs.selector.current.width;
+          let height_5 = (0, _utils.clamp)(Math.abs(selectorRect.height + inc_0), 0, rootRect_0.height - refs.selector.current.top);
           if (refs.aspectRatio.current !== undefined) {
-            width = height * refs.aspectRatio.current;
+            width_5 = height_5 * refs.aspectRatio.current;
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_5 > rootRect_0.height) {
+              height_5 = rootRect_0.height - refs.selector.current.top;
+              width_5 = height_5 * refs.aspectRatio.current;
             }
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_5 > rootRect_0.width) {
+              width_5 = rootRect_0.width - refs.selector.current.left;
+              height_5 = width_5 / refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            width,
-            height
+            width: width_5,
+            height: height_5
           }));
         } else if (((_refs$mouseDown$curre0 = refs.mouseDown.current) === null || _refs$mouseDown$curre0 === void 0 ? void 0 : _refs$mouseDown$curre0.version) === 'left') {
-          const inc = x - refs.previousMouseEvent.current.clientX;
-          const left = (0, _utils.clamp)(selectorRect.left + inc, 0);
-          if (selectorRect.right - left < 0) refs.mouseDown.current.version = 'right';
-          let width = (0, _utils.clamp)(selectorRect.right - left, 0);
-          let height = refs.selector.current.height;
+          const inc_1 = x - refs.previousMouseEvent.current.clientX;
+          const left_3 = (0, _utils.clamp)(selectorRect.left + inc_1, 0);
+          if (selectorRect.right - left_3 < 0) refs.mouseDown.current.version = 'right';
+          let width_6 = (0, _utils.clamp)(selectorRect.right - left_3, 0);
+          let height_6 = refs.selector.current.height;
           if (refs.aspectRatio.current !== undefined) {
             var _refs$selector$curren14, _refs$selector$curren15;
-            if (left < refs.selector.current.left && ((_refs$selector$curren14 = refs.selector.current) === null || _refs$selector$curren14 === void 0 ? void 0 : _refs$selector$curren14.top) + ((_refs$selector$curren15 = refs.selector.current) === null || _refs$selector$curren15 === void 0 ? void 0 : _refs$selector$curren15.height) >= rootRect.height) return;
-            height = width / refs.aspectRatio.current;
+            if (left_3 < refs.selector.current.left && ((_refs$selector$curren14 = refs.selector.current) === null || _refs$selector$curren14 === void 0 ? void 0 : _refs$selector$curren14.top) + ((_refs$selector$curren15 = refs.selector.current) === null || _refs$selector$curren15 === void 0 ? void 0 : _refs$selector$curren15.height) >= rootRect_0.height) return;
+            height_6 = width_6 / refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_6 > rootRect_0.width) {
+              width_6 = rootRect_0.width - refs.selector.current.left;
+              height_6 = width_6 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_6 > rootRect_0.height) {
+              height_6 = rootRect_0.height - refs.selector.current.top;
+              width_6 = height_6 * refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            left,
-            width,
-            height
+            left: left_3,
+            width: width_6,
+            height: height_6
           }));
         } else if (((_refs$mouseDown$curre1 = refs.mouseDown.current) === null || _refs$mouseDown$curre1 === void 0 ? void 0 : _refs$mouseDown$curre1.version) === 'right') {
-          const inc = x - refs.previousMouseEvent.current.clientX;
-          if (selectorRect.width + inc < 0) refs.mouseDown.current.version = 'left';
-          let width = (0, _utils.clamp)(Math.abs(selectorRect.width + inc), 0, rootRect.width - selectorRect.left);
-          let height = refs.selector.current.height;
+          const inc_2 = x - refs.previousMouseEvent.current.clientX;
+          if (selectorRect.width + inc_2 < 0) refs.mouseDown.current.version = 'left';
+          let width_7 = (0, _utils.clamp)(Math.abs(selectorRect.width + inc_2), 0, rootRect_0.width - selectorRect.left);
+          let height_7 = refs.selector.current.height;
           if (refs.aspectRatio.current !== undefined) {
-            height = width / refs.aspectRatio.current;
+            height_7 = width_7 / refs.aspectRatio.current;
 
             // Max width
-            if (refs.selector.current.left + width > rootRect.width) {
-              width = rootRect.width - refs.selector.current.left;
-              height = width / refs.aspectRatio.current;
+            if (refs.selector.current.left + width_7 > rootRect_0.width) {
+              width_7 = rootRect_0.width - refs.selector.current.left;
+              height_7 = width_7 / refs.aspectRatio.current;
             }
 
             // Max height
-            if (refs.selector.current.top + height > rootRect.height) {
-              height = rootRect.height - refs.selector.current.top;
-              width = height * refs.aspectRatio.current;
+            if (refs.selector.current.top + height_7 > rootRect_0.height) {
+              height_7 = rootRect_0.height - refs.selector.current.top;
+              width_7 = height_7 * refs.aspectRatio.current;
             }
           }
           onSelectorChange(_objectSpread(_objectSpread({}, refs.selector.current), {}, {
-            width,
-            height
+            width: width_7,
+            height: height_7
           }));
         }
       }
     };
 
     // Mouse move
-    const onMouseMove = event => {
+    const onMouseMove = event_1 => {
       if (refs.mouseDown.current) {
         const {
           clientY,
           clientX
-        } = event;
+        } = event_1;
         onMove(clientX, clientY);
-        refs.previousMouseEvent.current = event;
+        refs.previousMouseEvent.current = event_1;
       }
     };
 
     // Touch move
-    const onTouchMove = event => {
+    const onTouchMove = event_2 => {
       if (refs.mouseDown.current) {
         const {
-          clientY,
-          clientX
-        } = event.touches[0];
-        onMove(clientX, clientY);
-        refs.previousMouseEvent.current = event;
+          clientY: clientY_0,
+          clientX: clientX_0
+        } = event_2.touches[0];
+        onMove(clientX_0, clientY_0);
+        refs.previousMouseEvent.current = event_2;
 
         // Normalize for use as a mouseDown value
-        refs.previousMouseEvent.current.clientY = clientY;
-        refs.previousMouseEvent.current.clientX = clientX;
+        refs.previousMouseEvent.current.clientY = clientY_0;
+        refs.previousMouseEvent.current.clientX = clientX_0;
       }
     };
     const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
@@ -845,13 +839,13 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const updateSelector = (selector__ = refs.selector.current, image__ = refs.image.current) => {
     if (selector__ !== undefined && image__ !== undefined) {
       var _refs$canvasMain$curr5, _refs$canvasMain$curr6, _refs$canvasMain$curr7, _refs$canvasMain$curr8;
-      const rootRect = refs.root.current.getBoundingClientRect();
+      const rootRect_1 = refs.root.current.getBoundingClientRect();
       const selectorValue = {
         top: (0, _utils.clamp)(selector__.top, 0, image__.height),
         left: (0, _utils.clamp)(selector__.left, 0, image__.height)
       };
-      selectorValue.width = (0, _utils.clamp)(selector__.width || 0, 0, rootRect.width - selectorValue.left);
-      selectorValue.height = (0, _utils.clamp)(selector__.height || 0, 0, rootRect.height - selectorValue.top);
+      selectorValue.width = (0, _utils.clamp)(selector__.width || 0, 0, rootRect_1.width - selectorValue.left);
+      selectorValue.height = (0, _utils.clamp)(selector__.height || 0, 0, rootRect_1.height - selectorValue.top);
 
       // Aspect ratio
       if (refs.aspectRatio.current !== undefined) {
@@ -863,14 +857,14 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         }
 
         // Max width
-        if (selectorValue.left + selectorValue.width > rootRect.width) {
-          selectorValue.width = rootRect.width - selectorValue.left;
+        if (selectorValue.left + selectorValue.width > rootRect_1.width) {
+          selectorValue.width = rootRect_1.width - selectorValue.left;
           selectorValue.height = selectorValue.width / refs.aspectRatio.current;
         }
 
         // Max height
-        if (selectorValue.top + selectorValue.height > rootRect.height) {
-          selectorValue.height = rootRect.height - selectorValue.top;
+        if (selectorValue.top + selectorValue.height > rootRect_1.height) {
+          selectorValue.height = rootRect_1.height - selectorValue.top;
           selectorValue.width = selectorValue.height * refs.aspectRatio.current;
         }
       }
@@ -880,10 +874,10 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
 
       // Update selector relative
       setSelectorRelative({
-        top: selectorValue.top / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height) * ((_refs$canvasMain$curr5 = refs.canvasMain.current) === null || _refs$canvasMain$curr5 === void 0 ? void 0 : _refs$canvasMain$curr5.height),
-        left: selectorValue.left / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width) * ((_refs$canvasMain$curr6 = refs.canvasMain.current) === null || _refs$canvasMain$curr6 === void 0 ? void 0 : _refs$canvasMain$curr6.width),
-        width: selectorValue.width / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.width) * ((_refs$canvasMain$curr7 = refs.canvasMain.current) === null || _refs$canvasMain$curr7 === void 0 ? void 0 : _refs$canvasMain$curr7.width),
-        height: selectorValue.height / (rootRect === null || rootRect === void 0 ? void 0 : rootRect.height) * ((_refs$canvasMain$curr8 = refs.canvasMain.current) === null || _refs$canvasMain$curr8 === void 0 ? void 0 : _refs$canvasMain$curr8.height)
+        top: selectorValue.top / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.height) * ((_refs$canvasMain$curr5 = refs.canvasMain.current) === null || _refs$canvasMain$curr5 === void 0 ? void 0 : _refs$canvasMain$curr5.height),
+        left: selectorValue.left / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.width) * ((_refs$canvasMain$curr6 = refs.canvasMain.current) === null || _refs$canvasMain$curr6 === void 0 ? void 0 : _refs$canvasMain$curr6.width),
+        width: selectorValue.width / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.width) * ((_refs$canvasMain$curr7 = refs.canvasMain.current) === null || _refs$canvasMain$curr7 === void 0 ? void 0 : _refs$canvasMain$curr7.width),
+        height: selectorValue.height / (rootRect_1 === null || rootRect_1 === void 0 ? void 0 : rootRect_1.height) * ((_refs$canvasMain$curr8 = refs.canvasMain.current) === null || _refs$canvasMain$curr8 === void 0 ? void 0 : _refs$canvasMain$curr8.height)
       });
     }
   };
@@ -909,13 +903,13 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const makeImage = async (value = image) => {
     var _refs$root$current3;
     const img = await (0, _utils2.image)(value);
-    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
-    const canvas = rootDocument.createElement('canvas');
-    const rootRect = refs.root.current.getBoundingClientRect();
+    const rootDocument_0 = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+    const canvas = rootDocument_0.createElement('canvas');
+    const rootRect_2 = refs.root.current.getBoundingClientRect();
     const aspectRatioImg = img.width / img.height;
 
     // width being parent width
-    img.width = rootRect.width;
+    img.width = rootRect_2.width;
 
     // height keep aspect ratio of the img for the height
     img.height = img.width / aspectRatioImg;
@@ -924,67 +918,67 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
     setImage(canvas);
   };
-  const onFocus = _react.default.useCallback(event => {
+  const onFocus = event_3 => {
     setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, []);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_3);
+  };
+  const onBlur = event_4 => {
     setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, []);
-  const onTouchStart = _react.default.useCallback(event => {
-    if (![refs.imageSelectorMain.current, refs.imageSelector.current, refs.move.current, refs.borderTop.current, refs.borderLeft.current, refs.borderRight.current, refs.borderBottom.current, refs.dotTopLeft.current, refs.dotTopRight.current, refs.dotBottomLeft.current, refs.dotBottomRight.current].includes(event.target)) {
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_4);
+  };
+  const onTouchStart = event_5 => {
+    if (![refs.imageSelectorMain.current, refs.imageSelector.current, refs.move.current, refs.borderTop.current, refs.borderLeft.current, refs.borderRight.current, refs.borderBottom.current, refs.dotTopLeft.current, refs.dotTopRight.current, refs.dotBottomLeft.current, refs.dotBottomRight.current].includes(event_5.target)) {
       const {
-        clientY,
-        clientX
-      } = event.touches[0];
-      const rootRect = refs.root.current.getBoundingClientRect();
+        clientY: clientY_1,
+        clientX: clientX_1
+      } = event_5.touches[0];
+      const rootRect_3 = refs.root.current.getBoundingClientRect();
       setMouseDown({
         version: 'make',
-        top: clientY - rootRect.top,
-        left: clientX - rootRect.left
+        top: clientY_1 - rootRect_3.top,
+        left: clientX_1 - rootRect_3.left
       });
     }
-  }, []);
-  const onMouseDown = _react.default.useCallback(event => {
-    if (![refs.imageSelectorMain.current, refs.imageSelector.current, refs.move.current, refs.borderTop.current, refs.borderLeft.current, refs.borderRight.current, refs.borderBottom.current, refs.dotTopLeft.current, refs.dotTopRight.current, refs.dotBottomLeft.current, refs.dotBottomRight.current].includes(event.target)) {
+  };
+  const onMouseDown = event_6 => {
+    if (![refs.imageSelectorMain.current, refs.imageSelector.current, refs.move.current, refs.borderTop.current, refs.borderLeft.current, refs.borderRight.current, refs.borderBottom.current, refs.dotTopLeft.current, refs.dotTopRight.current, refs.dotBottomLeft.current, refs.dotBottomRight.current].includes(event_6.target)) {
       const {
-        clientY,
-        clientX
-      } = event;
-      const rootRect = refs.root.current.getBoundingClientRect();
+        clientY: clientY_2,
+        clientX: clientX_2
+      } = event_6;
+      const rootRect_4 = refs.root.current.getBoundingClientRect();
       setMouseDown({
         version: 'make',
-        top: clientY - rootRect.top,
-        left: clientX - rootRect.left
+        top: clientY_2 - rootRect_4.top,
+        left: clientX_2 - rootRect_4.left
       });
     }
-  }, []);
-  const onTouchStartSelector = _react.default.useCallback(event => {
+  };
+  const onTouchStartSelector = event_7 => {
     const {
-      clientY,
-      clientX
-    } = event.touches[0];
-    const rootRect = refs.root.current.getBoundingClientRect();
+      clientY: clientY_3,
+      clientX: clientX_3
+    } = event_7.touches[0];
+    const rootRect_5 = refs.root.current.getBoundingClientRect();
     setMouseDown({
       version: 'move',
-      top: clientY - rootRect.top,
-      left: clientX - rootRect.left
+      top: clientY_3 - rootRect_5.top,
+      left: clientX_3 - rootRect_5.left
     });
-  }, []);
-  const onMouseDownSelector = _react.default.useCallback(event => {
+  };
+  const onMouseDownSelector = event_8 => {
     const {
-      clientY,
-      clientX
-    } = event;
-    const rootRect = refs.root.current.getBoundingClientRect();
+      clientY: clientY_4,
+      clientX: clientX_4
+    } = event_8;
+    const rootRect_6 = refs.root.current.getBoundingClientRect();
     setMouseDown({
       version: 'move',
-      top: clientY - rootRect.top,
-      left: clientX - rootRect.left
+      top: clientY_4 - rootRect_6.top,
+      left: clientX_4 - rootRect_6.left
     });
-  }, []);
-  const onTouchStartBorder = version => event => {
+  };
+  const onTouchStartBorder = version => event_9 => {
     var _refs$selector$curren16, _refs$selector$curren17, _refs$selector$curren18, _refs$selector$curren19;
     setMouseDown({
       version,
@@ -992,10 +986,10 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       left: ((_refs$selector$curren18 = refs.selector.current) === null || _refs$selector$curren18 === void 0 ? void 0 : _refs$selector$curren18.left) + ((_refs$selector$curren19 = refs.selector.current) === null || _refs$selector$curren19 === void 0 ? void 0 : _refs$selector$curren19.width)
     });
   };
-  const onMouseDownBorder = version => event => {
+  const onMouseDownBorder = version_0 => event_10 => {
     var _refs$selector$curren20, _refs$selector$curren21, _refs$selector$curren22, _refs$selector$curren23;
     setMouseDown({
-      version,
+      version: version_0,
       top: ((_refs$selector$curren20 = refs.selector.current) === null || _refs$selector$curren20 === void 0 ? void 0 : _refs$selector$curren20.top) + ((_refs$selector$curren21 = refs.selector.current) === null || _refs$selector$curren21 === void 0 ? void 0 : _refs$selector$curren21.height),
       left: ((_refs$selector$curren22 = refs.selector.current) === null || _refs$selector$curren22 === void 0 ? void 0 : _refs$selector$curren22.left) + ((_refs$selector$curren23 = refs.selector.current) === null || _refs$selector$curren23 === void 0 ? void 0 : _refs$selector$curren23.width)
     });