@onesy/ui-react 1.0.172 → 1.0.173

package/Icon/Icon.js

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rtl_icons = exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
 var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["viewBox", "name", "short_name", "tonal", "tone", "color", "size", "noRtl", "disabled", "Component", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -44,9 +44,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Icon'
 });
-const Icon = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Icon = props_ => {
   var _theme$ui, _theme$ui2;
-  const $ = (0, _compilerRuntime.c)(15);
+  const $ = (0, _compilerRuntime.c)(14);
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyIcon) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const {
@@ -127,9 +127,8 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     t9 = $[6];
   }
   let t10;
-  if ($[7] !== Component || $[8] !== children || $[9] !== other || $[10] !== ref || $[11] !== t8 || $[12] !== t9 || $[13] !== viewBox) {
-    t10 = /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-      ref: ref,
+  if ($[7] !== Component || $[8] !== children || $[9] !== other || $[10] !== t8 || $[11] !== t9 || $[12] !== viewBox) {
+    t10 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
       className: t8,
       viewBox: viewBox,
       width: "1em",
@@ -137,19 +136,20 @@ const Icon = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       focusable: "false",
       "aria-hidden": true,
       style: t9
-    }, other), children);
+    }, other), {}, {
+      children: children
+    }));
     $[7] = Component;
     $[8] = children;
     $[9] = other;
-    $[10] = ref;
-    $[11] = t8;
-    $[12] = t9;
-    $[13] = viewBox;
-    $[14] = t10;
+    $[10] = t8;
+    $[11] = t9;
+    $[12] = viewBox;
+    $[13] = t10;
   } else {
-    t10 = $[14];
+    t10 = $[13];
   }
   return t10;
-});
+};
 Icon.displayName = 'onesy-Icon';
 var _default = exports.default = Icon;

package/IconButton/IconButton.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _compilerRuntime = require("react/compiler-runtime");
@@ -13,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _styleReact = require("@onesy/style-react");
 var _Button = _interopRequireDefault(require("../Button"));
 var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["version", "size", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,9 +21,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-IconButton'
 });
-const IconButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const IconButton = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements;
-  const $ = (0, _compilerRuntime.c)(7);
+  const $ = (0, _compilerRuntime.c)(6);
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyIconButton) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
   const Button = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Button) || _Button.default;
@@ -40,26 +40,24 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   } = useStyle();
   const t2 = (0, _styleReact.classNames)([(0, _utils.staticClassName)("IconButton", theme) && ["onesy-IconButton-root"], className, classes.root]);
   let t3;
-  if ($[0] !== Button || $[1] !== other || $[2] !== ref || $[3] !== size || $[4] !== t2 || $[5] !== version) {
-    t3 = /*#__PURE__*/_react.default.createElement(Button, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Button || $[1] !== other || $[2] !== size || $[3] !== t2 || $[4] !== version) {
+    t3 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Button, _objectSpread(_objectSpread({
       size: size
-    }, other, {
+    }, other), {}, {
       className: t2,
       version: version,
       icon: true
     }));
     $[0] = Button;
     $[1] = other;
-    $[2] = ref;
-    $[3] = size;
-    $[4] = t2;
-    $[5] = version;
-    $[6] = t3;
+    $[2] = size;
+    $[3] = t2;
+    $[4] = version;
+    $[5] = t3;
   } else {
-    t3 = $[6];
+    t3 = $[5];
   }
   return t3;
-});
+};
 IconButton.displayName = 'onesy-IconButton';
 var _default = exports.default = IconButton;

package/Image/Image.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -16,7 +15,8 @@ var _Surface = _interopRequireDefault(require("../Surface"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _useVisible = _interopRequireDefault(require("../useVisible/useVisible"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "src", "url", "urlSmall", "sources", "alt", "description", "alignDescription", "width", "height", "align", "responsive", "lazyLoad", "fullWidth", "maxWidth", "loading", "RootProps", "NoImageProps", "DescriptionProps", "UseVisibleProps", "className", "style", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "src", "url", "urlSmall", "sources", "alt", "description", "alignDescription", "width", "height", "align", "responsive", "lazyLoad", "fullWidth", "maxWidth", "loading", "RootProps", "NoImageProps", "DescriptionProps", "UseVisibleProps", "className", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => ({
@@ -121,7 +121,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Image'
 });
-const Image = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Image = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   const theme = (0, _styleReact.useOnesyTheme)();
   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.onesyImage) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -129,6 +129,7 @@ const Image = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
   const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       src,
@@ -236,7 +237,7 @@ const Image = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-picture'], classes.picture])
   } : {};
   if (!rootIsImage && !noImage) {
-    const imgElement = /*#__PURE__*/_react.default.createElement("img", {
+    const imgElement = /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
       src: src,
       alt: alt || '',
       width: width,
@@ -245,14 +246,17 @@ const Image = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-img'], className, classes.img]),
       style: style
     });
-    other.children = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Wrapper, WrapperProps, (sources === null || sources === void 0 ? void 0 : sources.length) && sources.map((item, index) => /*#__PURE__*/_react.default.createElement("source", (0, _extends2.default)({
-      key: index
-    }, item))), children, imgElement), description && /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-      Component: "figcaption",
-      version: "b3"
-    }, DescriptionProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-figcaption'], DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.className, className, classes.figcaption, classes[`align_description_${alignDescription}`]])
-    }), description));
+    other.children = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Wrapper, _objectSpread(_objectSpread({}, WrapperProps), {}, {
+        children: [(sources === null || sources === void 0 ? void 0 : sources.length) && sources.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("source", _objectSpread({}, item), index)), children, imgElement]
+      })), description && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({
+        Component: "figcaption",
+        version: "b3"
+      }, DescriptionProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-figcaption'], DescriptionProps === null || DescriptionProps === void 0 ? void 0 : DescriptionProps.className, className, classes.figcaption, classes[`align_description_${alignDescription}`]]),
+        children: description
+      }))]
+    });
   }
   if (noImage) {
     Component = Line;
@@ -261,7 +265,7 @@ const Image = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     other.style = style;
     delete other.Component;
   }
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
@@ -269,9 +273,9 @@ const Image = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       setRoot(item_0);
       refs.root.current = item_0;
     }
-  }, RootProps, {
+  }, RootProps), {}, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Image', theme) && ['onesy-Image-root', noImage && 'onesy-Image-no-image', picture && !description && `onesy-Image-picture`], RootProps === null || RootProps === void 0 ? void 0 : RootProps.className, className, classes.root, classes[`align_${align}`], noImage && classes.noImage, responsive && classes.responsive, maxWidth && classes[`maxWidth_${maxWidth}`], fullWidth && classes.fullWidth, rootIsImage && classes.root_img, picture && !description && classes.root_picture, description && classes.root_figure])
   }, other));
-});
+};
 Image.displayName = 'onesy-Image';
 var _default = exports.default = Image;

package/ImageCrop/ImageCrop.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -13,7 +12,8 @@ var _utils = require("@onesy/utils");
 var _styleReact = require("@onesy/style-react");
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
 var _utils2 = require("../utils");
-const _excluded = ["image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "image", "minWidth", "minHeight", "maxWidth", "maxHeight", "selectorDefault", "selector", "onSelectorChange", "type", "quality", "aspectRatio", "gridLines", "dynamicParent", "onFocus", "onBlur", "TooltipProps", "Component", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 const useStyle = (0, _styleReact.style)(theme => {
@@ -253,12 +253,13 @@ const useStyle = (0, _styleReact.style)(theme => {
 }, {
   name: 'onesy-ImageCrop'
 });
-const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ImageCrop = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _refs$root$current4;
   const theme = (0, _styleReact.useOnesyTheme)();
   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 {
+      ref,
       // url, datauri or canvas
       image: image_,
       minWidth,
@@ -995,7 +996,7 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     });
   };
   const rect = (_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.getBoundingClientRect();
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Component, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
@@ -1008,88 +1009,96 @@ const ImageCrop = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     onTouchStart: onTouchStart,
     onMouseDown: onMouseDown,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-root'], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement("canvas", {
-    ref: refs.canvasMain,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-main'], classes.canvas, classes.canvas_main])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-background'], classes.background, image && classes.background_in])
-  }), /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    open: mouseDown && (selector === null || selector === void 0 ? void 0 : selector.width) + (selector === null || selector === void 0 ? void 0 : selector.height) > 0,
-    label: `${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.width) || 0)} x ${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.height) || 0)}`,
-    position: "bottom"
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.imageSelectorMain,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector-main'], classes.imageSelector_main, selector && classes.imageSelector_main_in]),
-    style: _objectSpread({}, selector)
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.move,
-    onTouchStart: onTouchStartSelector,
-    onMouseDown: onMouseDownSelector,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-move'], classes.move])
-  }), gridLines && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-start'], classes.grid_line, classes.grid_line_top_start])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-end'], classes.grid_line, classes.grid_line_top_end])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-start'], classes.grid_line, classes.grid_line_left_start])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-end'], classes.grid_line, classes.grid_line_left_end])
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.dotTopLeft,
-    onTouchStart: onTouchStartBorder('top_left'),
-    onMouseDown: onMouseDownBorder('top_left'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-left'], classes.dot, classes.dot_top_left])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.dotTopRight,
-    onTouchStart: onTouchStartBorder('top_right'),
-    onMouseDown: onMouseDownBorder('top_right'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-right'], classes.dot, classes.dot_top_right])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.dotBottomLeft,
-    onTouchStart: onTouchStartBorder('bottom_left'),
-    onMouseDown: onMouseDownBorder('bottom_left'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-left'], classes.dot, classes.dot_bottom_left])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.dotBottomRight,
-    onTouchStart: onTouchStartBorder('bottom_right'),
-    onMouseDown: onMouseDownBorder('bottom_right'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-right'], classes.dot, classes.dot_bottom_right])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.borderTop,
-    onTouchStart: onTouchStartBorder('top'),
-    onMouseDown: onMouseDownBorder('top'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-top'], classes.border, classes.border_top])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.borderLeft,
-    onTouchStart: onTouchStartBorder('left'),
-    onMouseDown: onMouseDownBorder('left'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-left'], classes.border, classes.border_left])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.borderRight,
-    onTouchStart: onTouchStartBorder('right'),
-    onMouseDown: onMouseDownBorder('right'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-right'], classes.border, classes.border_right])
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.borderBottom,
-    onTouchStart: onTouchStartBorder('bottom'),
-    onMouseDown: onMouseDownBorder('bottom'),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-bottom'], classes.border, classes.border_bottom])
-  }))), /*#__PURE__*/_react.default.createElement("div", {
-    ref: refs.imageSelector,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector'], classes.imageSelector]),
-    style: _objectSpread({}, selector)
-  }, /*#__PURE__*/_react.default.createElement("canvas", {
-    ref: refs.canvasImageSelector,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-image-selector'], classes.canvas, classes.canvas_imageSelector]),
-    width: (image === null || image === void 0 ? void 0 : image.width) || 0,
-    height: (image === null || image === void 0 ? void 0 : image.height) || 0,
-    style: {
-      top: `${((selector === null || selector === void 0 ? void 0 : selector.top) || 0) * -1}px`,
-      left: `${((selector === null || selector === void 0 ? void 0 : selector.left) || 0) * -1}px`,
-      width: rect === null || rect === void 0 ? void 0 : rect.width,
-      height: rect === null || rect === void 0 ? void 0 : rect.height
-    }
-  })));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
+      ref: refs.canvasMain,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-main'], classes.canvas, classes.canvas_main])
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-background'], classes.background, image && classes.background_in])
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+      open: mouseDown && (selector === null || selector === void 0 ? void 0 : selector.width) + (selector === null || selector === void 0 ? void 0 : selector.height) > 0,
+      label: `${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.width) || 0)} x ${Math.round((selectorRelative === null || selectorRelative === void 0 ? void 0 : selectorRelative.height) || 0)}`,
+      position: "bottom"
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        ref: refs.imageSelectorMain,
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector-main'], classes.imageSelector_main, selector && classes.imageSelector_main_in]),
+        style: _objectSpread({}, selector),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.move,
+          onTouchStart: onTouchStartSelector,
+          onMouseDown: onMouseDownSelector,
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-move'], classes.move])
+        }), gridLines && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-start'], classes.grid_line, classes.grid_line_top_start])
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-top-end'], classes.grid_line, classes.grid_line_top_end])
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-start'], classes.grid_line, classes.grid_line_left_start])
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-grid-line', 'onesy-ImageCrop-grid-line-left-end'], classes.grid_line, classes.grid_line_left_end])
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.dotTopLeft,
+          onTouchStart: onTouchStartBorder('top_left'),
+          onMouseDown: onMouseDownBorder('top_left'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-left'], classes.dot, classes.dot_top_left])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.dotTopRight,
+          onTouchStart: onTouchStartBorder('top_right'),
+          onMouseDown: onMouseDownBorder('top_right'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-top-right'], classes.dot, classes.dot_top_right])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.dotBottomLeft,
+          onTouchStart: onTouchStartBorder('bottom_left'),
+          onMouseDown: onMouseDownBorder('bottom_left'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-left'], classes.dot, classes.dot_bottom_left])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.dotBottomRight,
+          onTouchStart: onTouchStartBorder('bottom_right'),
+          onMouseDown: onMouseDownBorder('bottom_right'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-dot', 'onesy-ImageCrop-dot-bottom-right'], classes.dot, classes.dot_bottom_right])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.borderTop,
+          onTouchStart: onTouchStartBorder('top'),
+          onMouseDown: onMouseDownBorder('top'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-top'], classes.border, classes.border_top])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.borderLeft,
+          onTouchStart: onTouchStartBorder('left'),
+          onMouseDown: onMouseDownBorder('left'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-left'], classes.border, classes.border_left])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.borderRight,
+          onTouchStart: onTouchStartBorder('right'),
+          onMouseDown: onMouseDownBorder('right'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-right'], classes.border, classes.border_right])
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          ref: refs.borderBottom,
+          onTouchStart: onTouchStartBorder('bottom'),
+          onMouseDown: onMouseDownBorder('bottom'),
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-border', 'onesy-ImageCrop-border-bottom'], classes.border, classes.border_bottom])
+        })]
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: refs.imageSelector,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-image-selector'], classes.imageSelector]),
+      style: _objectSpread({}, selector),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
+        ref: refs.canvasImageSelector,
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageCrop', theme) && ['onesy-ImageCrop-canvas', 'onesy-ImageCrop-canvas-image-selector'], classes.canvas, classes.canvas_imageSelector]),
+        width: (image === null || image === void 0 ? void 0 : image.width) || 0,
+        height: (image === null || image === void 0 ? void 0 : image.height) || 0,
+        style: {
+          top: `${((selector === null || selector === void 0 ? void 0 : selector.top) || 0) * -1}px`,
+          left: `${((selector === null || selector === void 0 ? void 0 : selector.left) || 0) * -1}px`,
+          width: rect === null || rect === void 0 ? void 0 : rect.width,
+          height: rect === null || rect === void 0 ? void 0 : rect.height
+        }
+      })
+    })]
+  }));
+};
 ImageCrop.displayName = 'onesy-ImageCrop';
 var _default = exports.default = ImageCrop;