@onesy/ui-react 1.0.172 → 1.0.174

package/ImageEdit/ImageEdit.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"));
@@ -37,7 +36,8 @@ var _ImageCrop = _interopRequireDefault(require("../ImageCrop"));
 var _Chip = _interopRequireDefault(require("../Chip"));
 var _Line = _interopRequireDefault(require("../Line"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "image", "name", "type", "openDefault", "openedOptionDefault", "valueDefault", "value", "valueCopyDefault", "valueCopy", "onChange", "onChangeCopy", "onlyFilters", "filters", "meta", "filtersOption", "cropOption", "resizeOption", "qualityOption", "downloadOption", "resizeAspectRatio", "renderOption", "renderOptionClear", "renderSave", "renderCancel", "renderSlider", "renderDownload", "renderInput", "IconBrightness", "IconContrast", "IconSaturation", "IconFade", "IconInvert", "IconOldPhoto", "IconSave", "IconCancel", "IconClear", "IconCrop", "IconFilters", "IconResize", "IconQuality", "IconDownload", "ChipProps", "SliderProps", "TooltipProps", "ImageCropProps", "IconButtonProps", "className", "children"];
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "image", "name", "type", "openDefault", "openedOptionDefault", "valueDefault", "value", "valueCopyDefault", "valueCopy", "onChange", "onChangeCopy", "onlyFilters", "filters", "meta", "filtersOption", "cropOption", "resizeOption", "qualityOption", "downloadOption", "resizeAspectRatio", "renderOption", "renderOptionClear", "renderSave", "renderCancel", "renderSlider", "renderDownload", "renderInput", "IconBrightness", "IconContrast", "IconSaturation", "IconFade", "IconInvert", "IconOldPhoto", "IconSave", "IconCancel", "IconClear", "IconCrop", "IconFilters", "IconResize", "IconQuality", "IconDownload", "ChipProps", "SliderProps", "TooltipProps", "ImageCropProps", "IconButtonProps", "className", "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 => ({
@@ -127,7 +127,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-ImageEdit'
 });
-const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const ImageEdit = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _ref, _ref2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
@@ -144,6 +144,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const ImageCrop = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ImageCrop) || _ImageCrop.default;
   const Chip = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Chip) || _Chip.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       image,
@@ -552,16 +553,18 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Icon: IconBrightness,
     value: 'brightness',
     method: _utils2.canvasBrightness,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value__,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       name: l('Brightness')
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
-    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconBrightness, null))),
-    renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-      key: value___0,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected_,
+        onClick: () => onChangeFilter_(value__)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconBrightness, {})
+      }))
+    }), value__),
+    renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
       value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
       min: -100,
@@ -582,24 +585,26 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange: valueNew_11 => {
         if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew_11, value___0);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___0)
   }, {
     label: l('Contrast'),
     Icon: IconContrast,
     value: 'contrast',
     method: _utils2.canvasContrast,
-    renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value___1,
+    renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       name: l('Contrast')
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      version: "outlined",
-      selected: selected__0,
-      onClick: () => onChangeFilter__0(value___1)
-    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconContrast, null))),
-    renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-      key: value___2,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__0,
+        onClick: () => onChangeFilter__0(value___1)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContrast, {})
+      }))
+    }), value___1),
+    renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       valueDefault: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
       value: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
       min: -100,
@@ -620,24 +625,26 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange: valueNew_12 => {
         if ((0, _utils.is)('function', onFilterSliderChange__0)) onFilterSliderChange__0(valueNew_12, value___2);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___2)
   }, {
     label: l('Saturation'),
     Icon: IconSaturation,
     value: 'saturation',
     method: _utils2.canvasSaturation,
-    renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value___3,
+    renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       name: l('Saturation')
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      version: "outlined",
-      selected: selected__1,
-      onClick: () => onChangeFilter__1(value___3)
-    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconSaturation, null))),
-    renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-      key: value___4,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__1,
+        onClick: () => onChangeFilter__1(value___3)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSaturation, {})
+      }))
+    }), value___3),
+    renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       valueDefault: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
       value: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
       min: -100,
@@ -658,24 +665,26 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange: valueNew_13 => {
         if ((0, _utils.is)('function', onFilterSliderChange__1)) onFilterSliderChange__1(valueNew_13, value___4);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___4)
   }, {
     label: l('Fade'),
     Icon: IconFade,
     value: 'fade',
     method: _utils2.canvasFade,
-    renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value___5,
+    renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       name: l('Fade')
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      version: "outlined",
-      selected: selected__2,
-      onClick: () => onChangeFilter__2(value___5)
-    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconFade, null))),
-    renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-      key: value___6,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__2,
+        onClick: () => onChangeFilter__2(value___5)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconFade, {})
+      }))
+    }), value___5),
+    renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       valueDefault: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
       value: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
       min: 0,
@@ -693,24 +702,26 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange: valueNew_14 => {
         if ((0, _utils.is)('function', onFilterSliderChange__2)) onFilterSliderChange__2(valueNew_14, value___6);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___6)
   }, {
     label: l('Invert'),
     Icon: IconInvert,
     value: 'invert',
     method: _utils2.canvasInvert,
-    renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value___7,
+    renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       name: l('Invert')
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      version: "outlined",
-      selected: selected__3,
-      onClick: () => onChangeFilter__3(value___7)
-    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconInvert, null))),
-    renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-      key: value___8,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__3,
+        onClick: () => onChangeFilter__3(value___7)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconInvert, {})
+      }))
+    }), value___7),
+    renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       valueDefault: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
       value: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
       min: 0,
@@ -728,24 +739,26 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange: valueNew_15 => {
         if ((0, _utils.is)('function', onFilterSliderChange__3)) onFilterSliderChange__3(valueNew_15, value___8);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___8)
   }, {
     label: l('Old photo'),
     Icon: IconOldPhoto,
     value: 'old_photo',
     method: _utils2.canvasOldPhoto,
-    renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value___9,
+    renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
       name: l('Old photo')
-    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-      version: "outlined",
-      selected: selected__4,
-      onClick: () => onChangeFilter__4(value___9)
-    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconOldPhoto, null))),
-    renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-      key: value___10,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__4,
+        onClick: () => onChangeFilter__4(value___9)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconOldPhoto, {})
+      }))
+    }), value___9),
+    renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
       valueDefault: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
       value: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
       min: -40,
@@ -766,9 +779,9 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       onChange: valueNew_16 => {
         if ((0, _utils.is)('function', onFilterSliderChange__4)) onFilterSliderChange__4(valueNew_16, value___10);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___10)
   }, ...(filters_ || [])], [filters_]);
 
   // Only filters
@@ -822,7 +835,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     version: 'b3'
   };
   const filterValue = filters.find(item__0 => item__0.value === filter);
-  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_1);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_1;
@@ -835,225 +848,277 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     direction: "column",
     Component: Surface,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-root', `onesy-ImageEdit-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-wrapper'], classes.imageWrapper])
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas-wrapper'], classes.canvasWrapper])
-  }, /*#__PURE__*/_react.default.createElement("canvas", {
-    ref: refs.canvasMain,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas', 'onesy-ImageEdit-canvas-main'], classes.canvas, classes.canvas_main])
-  }), open && openedOption === 'crop' && /*#__PURE__*/_react.default.createElement(ImageCrop, (0, _extends2.default)({
-    image: valueCopy,
-    aspectRatio: aspectRatio ? aspectRatio : undefined,
-    onSelectorChange: selector => setSelection(selector)
-  }, ImageCropProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-crop'], ImageCropProps.className, classes.imageCrop]),
-    style: {
-      width: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.width,
-      height: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.height
-    }
-  })))), (filtersOption || cropOption || resizeOption || qualityOption) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Expand, {
-    in: !!open,
-    parent: refs.root.current,
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    ref: refs.option,
-    direction: "column",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option'], classes.option])
-  }, openedOption === 'filters' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Expand, {
-    in: !!filterValue,
-    parent: refs.option.current,
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    style: {
-      paddingInline: theme.methods.space.value(5, 'px'),
-      paddingBottom: theme.methods.space.value(5, 'px')
-    }
-  }, (0, _utils.is)('function', filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider) && (filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider(filterValue.value, refs.filterValuesCopy.current, onFilterSliderChange)))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-filters'], classes.filters])
-  }, filters.map(item_2 => (0, _utils.is)('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter)))), openedOption === 'crop' && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    style: {
-      width: '100%'
-    }
-  }, chips.map((item_3, index) => /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
-    key: index,
-    selected: aspectRatio === item_3.value,
-    onClick: () => onChangeAspectRatio(item_3.value)
-  }, ChipProps), item_3.label)), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : /*#__PURE__*/_react.default.createElement(NumericTextField, {
-    tonal: tonal,
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0],
-    onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
-    increment: false,
-    decrement: false,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
-    style: {
-      width: 24
-    }
-  }), /*#__PURE__*/_react.default.createElement(Type, null, ":"), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : /*#__PURE__*/_react.default.createElement(NumericTextField, {
-    tonal: tonal,
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1],
-    onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
-    increment: false,
-    decrement: false,
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
-    style: {
-      width: 24
-    }
-  }))), openedOption === 'resize' && /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-inputs'], classes.inputs])
-  }, (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : /*#__PURE__*/_react.default.createElement(NumericTextField, {
-    tonal: tonal,
-    name: l('Width'),
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    max: value === null || value === void 0 ? void 0 : value.width,
-    valueDefault: value === null || value === void 0 ? void 0 : value.width,
-    value: resize === null || resize === void 0 ? void 0 : resize[0],
-    onChange: valueNew_19 => onChangeResize(valueNew_19)
-  }), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/_react.default.createElement(NumericTextField, {
-    tonal: tonal,
-    name: l('Height'),
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    max: value === null || value === void 0 ? void 0 : value.height,
-    valueDefault: value === null || value === void 0 ? void 0 : value.height,
-    value: resize === null || resize === void 0 ? void 0 : resize[1],
-    onChange: valueNew_20 => onChangeResize(valueNew_20, false)
-  })), openedOption === 'quality' && /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 3,
-    direction: "row",
-    align: "center",
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
-    valueDefault: quality,
-    value: quality,
-    min: 1,
-    max: 100,
-    precision: 1,
-    marks: [{
-      value: 1
-    }, {
-      value: 50
-    }, {
-      value: 100
-    }],
-    tooltip: true,
-    onChange: onChangeQuality
-  }, SliderProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-  })), /*#__PURE__*/_react.default.createElement(NumericTextField, {
-    tonal: tonal,
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    max: 100,
-    value: quality,
-    increment: false,
-    decrement: false,
-    onChange: valueNew_21 => onChangeQuality(+valueNew_21),
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
-    style: {
-      width: 34
-    }
-  })), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-action'], classes.action])
-  }, (0, _utils.is)('function', renderSave) ? renderSave(onSave) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Save')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    version: "outlined",
-    onClick: onSave
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconSave, null))), (0, _utils.is)('function', renderCancel) ? renderCancel(onSave) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Cancel')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    version: "outlined",
-    onClick: onCancel
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconCancel, null))))), /*#__PURE__*/_react.default.createElement(Divider, {
-    color: "inherit",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
-  })), /*#__PURE__*/_react.default.createElement(Line, {
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-options'], classes.options])
-  }, /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    justify: "flex-start"
-  }, options.map((item_4, index_0) => (0, _utils.is)('function', renderOption) ? renderOption(item_4, open && openOption === item_4.value, openOption) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    key: index_0,
-    name: item_4.label
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    version: "outlined",
-    selected: open && openedOption === item_4.value,
-    onClick: () => openOption(item_4.value)
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(item_4.Icon, null)))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, downloadOption && (0, _utils.is)('function', renderDownload) ? renderDownload(onDownload) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Download')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    version: "text",
-    onClick: onDownload
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconDownload, null))), (0, _utils.is)('function', renderOptionClear) ? renderOptionClear(onReset) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-    name: l('Reset')
-  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
-    version: "text",
-    onClick: onReset
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconClear, null))))))), children, meta && value && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Divider, {
-    color: "inherit",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
-  }), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-meta'], classes.meta])
-  }, /*#__PURE__*/_react.default.createElement(Type, MetaTypeProps, l('Dimensions'), ": ", (_ref = !open ? value : valueCopy) === null || _ref === void 0 ? void 0 : _ref.width, "x", (_ref2 = !open ? value : valueCopy) === null || _ref2 === void 0 ? void 0 : _ref2.height), /*#__PURE__*/_react.default.createElement(Type, MetaTypeProps, "\xB7"), /*#__PURE__*/_react.default.createElement(Type, MetaTypeProps, l('Size'), ": ", size))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      gap: 0,
+      direction: "column",
+      align: "center",
+      justify: "center",
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-wrapper'], classes.imageWrapper]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas-wrapper'], classes.canvasWrapper]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("canvas", {
+          ref: refs.canvasMain,
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-canvas', 'onesy-ImageEdit-canvas-main'], classes.canvas, classes.canvas_main])
+        }), open && openedOption === 'crop' && /*#__PURE__*/(0, _jsxRuntime.jsx)(ImageCrop, _objectSpread(_objectSpread({
+          image: valueCopy,
+          aspectRatio: aspectRatio ? aspectRatio : undefined,
+          onSelectorChange: selector => setSelection(selector)
+        }, ImageCropProps), {}, {
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-image-crop'], ImageCropProps.className, classes.imageCrop]),
+          style: {
+            width: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.width,
+            height: valueCopy === null || valueCopy === void 0 ? void 0 : valueCopy.height
+          }
+        }))]
+      })
+    }), (filtersOption || cropOption || resizeOption || qualityOption) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Expand, {
+        in: !!open,
+        parent: refs.root.current,
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0,
+          ref: refs.option,
+          direction: "column",
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option'], classes.option]),
+          children: [openedOption === 'filters' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Expand, {
+              in: !!filterValue,
+              parent: refs.option.current,
+              style: {
+                width: '100%'
+              },
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                style: {
+                  paddingInline: theme.methods.space.value(5, 'px'),
+                  paddingBottom: theme.methods.space.value(5, 'px')
+                },
+                children: (0, _utils.is)('function', filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider) && (filterValue === null || filterValue === void 0 ? void 0 : filterValue.renderSlider(filterValue.value, refs.filterValuesCopy.current, onFilterSliderChange))
+              })
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              justify: "flex-start",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-filters'], classes.filters]),
+              children: filters.map(item_2 => (0, _utils.is)('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter))
+            })]
+          }), openedOption === 'crop' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            justify: "center",
+            style: {
+              width: '100%'
+            },
+            children: [chips.map((item_3, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Chip, _objectSpread(_objectSpread({
+              selected: aspectRatio === item_3.value,
+              onClick: () => onChangeAspectRatio(item_3.value)
+            }, ChipProps), {}, {
+              children: item_3.label
+            }), index)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+              gap: 0,
+              direction: "row",
+              align: "center",
+              justify: "center",
+              children: [(0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+                tonal: tonal,
+                color: "default",
+                version: "text",
+                size: "small",
+                min: 1,
+                value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0],
+                onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
+                increment: false,
+                decrement: false,
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
+                style: {
+                  width: 24
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                children: ":"
+              }), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+                tonal: tonal,
+                color: "default",
+                version: "text",
+                size: "small",
+                min: 1,
+                value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1],
+                onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
+                increment: false,
+                decrement: false,
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
+                style: {
+                  width: 24
+                }
+              })]
+            })]
+          }), openedOption === 'resize' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            direction: "row",
+            align: "center",
+            justify: "center",
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-inputs'], classes.inputs]),
+            children: [(0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+              tonal: tonal,
+              name: l('Width'),
+              color: "default",
+              version: "text",
+              size: "small",
+              min: 1,
+              max: value === null || value === void 0 ? void 0 : value.width,
+              valueDefault: value === null || value === void 0 ? void 0 : value.width,
+              value: resize === null || resize === void 0 ? void 0 : resize[0],
+              onChange: valueNew_19 => onChangeResize(valueNew_19)
+            }), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+              tonal: tonal,
+              name: l('Height'),
+              color: "default",
+              version: "text",
+              size: "small",
+              min: 1,
+              max: value === null || value === void 0 ? void 0 : value.height,
+              valueDefault: value === null || value === void 0 ? void 0 : value.height,
+              value: resize === null || resize === void 0 ? void 0 : resize[1],
+              onChange: valueNew_20 => onChangeResize(valueNew_20, false)
+            })]
+          }), openedOption === 'quality' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 3,
+            direction: "row",
+            align: "center",
+            style: {
+              width: '100%'
+            },
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Slider, _objectSpread(_objectSpread({
+              valueDefault: quality,
+              value: quality,
+              min: 1,
+              max: 100,
+              precision: 1,
+              marks: [{
+                value: 1
+              }, {
+                value: 50
+              }, {
+                value: 100
+              }],
+              tooltip: true,
+              onChange: onChangeQuality
+            }, SliderProps), {}, {
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+            })), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumericTextField, {
+              tonal: tonal,
+              color: "default",
+              version: "text",
+              size: "small",
+              min: 1,
+              max: 100,
+              value: quality,
+              increment: false,
+              decrement: false,
+              onChange: valueNew_21 => onChangeQuality(+valueNew_21),
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
+              style: {
+                width: 34
+              }
+            })]
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            justify: "center",
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-action'], classes.action]),
+            children: [(0, _utils.is)('function', renderSave) ? renderSave(onSave) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+              name: l('Save')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+                version: "outlined",
+                onClick: onSave
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconSave, {})
+              }))
+            })), (0, _utils.is)('function', renderCancel) ? renderCancel(onSave) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+              name: l('Cancel')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+                version: "outlined",
+                onClick: onCancel
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCancel, {})
+              }))
+            }))]
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+          color: "inherit",
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        direction: "column",
+        align: "center",
+        justify: "center",
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-options'], classes.options]),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 1,
+          direction: "row",
+          justify: "flex-start",
+          children: [options.map((item_4, index_0) => (0, _utils.is)('function', renderOption) ? renderOption(item_4, open && openOption === item_4.value, openOption) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+            name: item_4.label
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+              version: "outlined",
+              selected: open && openedOption === item_4.value,
+              onClick: () => openOption(item_4.value)
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(item_4.Icon, {})
+            }))
+          }), index_0)), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            gap: 0,
+            direction: "row",
+            align: "center",
+            children: [downloadOption && (0, _utils.is)('function', renderDownload) ? renderDownload(onDownload) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+              name: l('Download')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+                version: "text",
+                onClick: onDownload
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconDownload, {})
+              }))
+            })), (0, _utils.is)('function', renderOptionClear) ? renderOptionClear(onReset) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, _objectSpread(_objectSpread({
+              name: l('Reset')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
+                version: "text",
+                onClick: onReset
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClear, {})
+              }))
+            }))]
+          })]
+        })
+      })]
+    }), children, meta && value && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
+        color: "inherit",
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "center",
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-meta'], classes.meta]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
+          children: [l('Dimensions'), ": ", (_ref = !open ? value : valueCopy) === null || _ref === void 0 ? void 0 : _ref.width, "x", (_ref2 = !open ? value : valueCopy) === null || _ref2 === void 0 ? void 0 : _ref2.height]
+        })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
+          children: "\xB7"
+        })), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
+          children: [l('Size'), ": ", size]
+        }))]
+      })]
+    })]
+  }));
+};
 ImageEdit.displayName = 'onesy-ImageEdit';
 var _default = exports.default = ImageEdit;