@onesy/ui-react 1.0.172 → 1.0.174

package/esm/ImageEdit/ImageEdit.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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"];
+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) { _defineProperty(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; }
 import React from 'react';
@@ -33,6 +32,7 @@ import ImageCropElement from '../ImageCrop';
 import ChipElement from '../Chip';
 import LineElement from '../Line';
 import { canvasBrightness, staticClassName, image as imageMethod, canvasContrast, canvasSaturation, canvasFade, canvasInvert, canvasOldPhoto } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   option: {
@@ -120,7 +120,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ImageEdit'
 });
-const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ImageEdit = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyImageEdit?.props?.default), props_);
@@ -136,6 +136,7 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const ImageCrop = theme?.elements?.ImageCrop || ImageCropElement;
   const Chip = theme?.elements?.Chip || ChipElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       image,
@@ -536,16 +537,18 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
     Icon: IconBrightness,
     value: 'brightness',
     method: canvasBrightness,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      key: value__,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       name: l('Brightness')
-    }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-      version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
-    }, IconButtonProps), /*#__PURE__*/React.createElement(IconBrightness, null))),
-    renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/React.createElement(Slider, _extends({
-      key: value___0,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected_,
+        onClick: () => onChangeFilter_(value__)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconBrightness, {})
+      }))
+    }), value__),
+    renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       valueDefault: filterValuesCopy_?.[value___0] || 0,
       value: filterValuesCopy_?.[value___0] || 0,
       min: -100,
@@ -566,24 +569,26 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: valueNew_11 => {
         if (is('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew_11, value___0);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___0)
   }, {
     label: l('Contrast'),
     Icon: IconContrast,
     value: 'contrast',
     method: canvasContrast,
-    renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      key: value___1,
+    renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       name: l('Contrast')
-    }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-      version: "outlined",
-      selected: selected__0,
-      onClick: () => onChangeFilter__0(value___1)
-    }, IconButtonProps), /*#__PURE__*/React.createElement(IconContrast, null))),
-    renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/React.createElement(Slider, _extends({
-      key: value___2,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__0,
+        onClick: () => onChangeFilter__0(value___1)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconContrast, {})
+      }))
+    }), value___1),
+    renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       valueDefault: filterValuesCopy__0?.[value___2] || 0,
       value: filterValuesCopy__0?.[value___2] || 0,
       min: -100,
@@ -604,24 +609,26 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: valueNew_12 => {
         if (is('function', onFilterSliderChange__0)) onFilterSliderChange__0(valueNew_12, value___2);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___2)
   }, {
     label: l('Saturation'),
     Icon: IconSaturation,
     value: 'saturation',
     method: canvasSaturation,
-    renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      key: value___3,
+    renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       name: l('Saturation')
-    }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-      version: "outlined",
-      selected: selected__1,
-      onClick: () => onChangeFilter__1(value___3)
-    }, IconButtonProps), /*#__PURE__*/React.createElement(IconSaturation, null))),
-    renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/React.createElement(Slider, _extends({
-      key: value___4,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__1,
+        onClick: () => onChangeFilter__1(value___3)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconSaturation, {})
+      }))
+    }), value___3),
+    renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       valueDefault: filterValuesCopy__1?.[value___4] || 0,
       value: filterValuesCopy__1?.[value___4] || 0,
       min: -100,
@@ -642,24 +649,26 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: valueNew_13 => {
         if (is('function', onFilterSliderChange__1)) onFilterSliderChange__1(valueNew_13, value___4);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___4)
   }, {
     label: l('Fade'),
     Icon: IconFade,
     value: 'fade',
     method: canvasFade,
-    renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      key: value___5,
+    renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       name: l('Fade')
-    }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-      version: "outlined",
-      selected: selected__2,
-      onClick: () => onChangeFilter__2(value___5)
-    }, IconButtonProps), /*#__PURE__*/React.createElement(IconFade, null))),
-    renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/React.createElement(Slider, _extends({
-      key: value___6,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__2,
+        onClick: () => onChangeFilter__2(value___5)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconFade, {})
+      }))
+    }), value___5),
+    renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       valueDefault: filterValuesCopy__2?.[value___6] || 0,
       value: filterValuesCopy__2?.[value___6] || 0,
       min: 0,
@@ -677,24 +686,26 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: valueNew_14 => {
         if (is('function', onFilterSliderChange__2)) onFilterSliderChange__2(valueNew_14, value___6);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___6)
   }, {
     label: l('Invert'),
     Icon: IconInvert,
     value: 'invert',
     method: canvasInvert,
-    renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      key: value___7,
+    renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       name: l('Invert')
-    }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-      version: "outlined",
-      selected: selected__3,
-      onClick: () => onChangeFilter__3(value___7)
-    }, IconButtonProps), /*#__PURE__*/React.createElement(IconInvert, null))),
-    renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/React.createElement(Slider, _extends({
-      key: value___8,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__3,
+        onClick: () => onChangeFilter__3(value___7)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconInvert, {})
+      }))
+    }), value___7),
+    renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       valueDefault: filterValuesCopy__3?.[value___8] || 0,
       value: filterValuesCopy__3?.[value___8] || 0,
       min: 0,
@@ -712,24 +723,26 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: valueNew_15 => {
         if (is('function', onFilterSliderChange__3)) onFilterSliderChange__3(valueNew_15, value___8);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___8)
   }, {
     label: l('Old photo'),
     Icon: IconOldPhoto,
     value: 'old_photo',
     method: canvasOldPhoto,
-    renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/React.createElement(Tooltip, _extends({
-      key: value___9,
+    renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
       name: l('Old photo')
-    }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-      version: "outlined",
-      selected: selected__4,
-      onClick: () => onChangeFilter__4(value___9)
-    }, IconButtonProps), /*#__PURE__*/React.createElement(IconOldPhoto, null))),
-    renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/React.createElement(Slider, _extends({
-      key: value___10,
+    }, TooltipProps), {}, {
+      children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+        version: "outlined",
+        selected: selected__4,
+        onClick: () => onChangeFilter__4(value___9)
+      }, IconButtonProps), {}, {
+        children: /*#__PURE__*/_jsx(IconOldPhoto, {})
+      }))
+    }), value___9),
+    renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/_jsx(Slider, _objectSpread(_objectSpread({
       valueDefault: filterValuesCopy__4?.[value___10] || 0,
       value: filterValuesCopy__4?.[value___10] || 0,
       min: -40,
@@ -750,9 +763,9 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
       onChange: valueNew_16 => {
         if (is('function', onFilterSliderChange__4)) onFilterSliderChange__4(valueNew_16, value___10);
       }
-    }, SliderProps, {
+    }, SliderProps), {}, {
       className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-    }))
+    }), value___10)
   }, ...(filters_ || [])], [filters_]);
 
   // Only filters
@@ -806,7 +819,7 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
     version: 'b3'
   };
   const filterValue = filters.find(item__0 => item__0.value === filter);
-  return /*#__PURE__*/React.createElement(Line, _extends({
+  return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if (is('function', ref)) ref(item_1);else if (ref?.current) ref.current = item_1;
@@ -819,225 +832,277 @@ const ImageEdit = /*#__PURE__*/React.forwardRef((props_, ref) => {
     direction: "column",
     Component: Surface,
     className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-root', `onesy-ImageEdit-size-${size}`], className, classes.root])
-  }, other), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-image-wrapper'], classes.imageWrapper])
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-canvas-wrapper'], classes.canvasWrapper])
-  }, /*#__PURE__*/React.createElement("canvas", {
-    ref: refs.canvasMain,
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-canvas', 'onesy-ImageEdit-canvas-main'], classes.canvas, classes.canvas_main])
-  }), open && openedOption === 'crop' && /*#__PURE__*/React.createElement(ImageCrop, _extends({
-    image: valueCopy,
-    aspectRatio: aspectRatio ? aspectRatio : undefined,
-    onSelectorChange: selector => setSelection(selector)
-  }, ImageCropProps, {
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-image-crop'], ImageCropProps.className, classes.imageCrop]),
-    style: {
-      width: valueCopy?.width,
-      height: valueCopy?.height
-    }
-  })))), (filtersOption || cropOption || resizeOption || qualityOption) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Expand, {
-    in: !!open,
-    parent: refs.root.current,
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    ref: refs.option,
-    direction: "column",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option'], classes.option])
-  }, openedOption === 'filters' && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Expand, {
-    in: !!filterValue,
-    parent: refs.option.current,
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    style: {
-      paddingInline: theme.methods.space.value(5, 'px'),
-      paddingBottom: theme.methods.space.value(5, 'px')
-    }
-  }, is('function', filterValue?.renderSlider) && filterValue?.renderSlider(filterValue.value, refs.filterValuesCopy.current, onFilterSliderChange))), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "flex-start",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-filters'], classes.filters])
-  }, filters.map(item_2 => is('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter)))), openedOption === 'crop' && /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    style: {
-      width: '100%'
-    }
-  }, chips.map((item_3, index) => /*#__PURE__*/React.createElement(Chip, _extends({
-    key: index,
-    selected: aspectRatio === item_3.value,
-    onClick: () => onChangeAspectRatio(item_3.value)
-  }, ChipProps), item_3.label)), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center",
-    justify: "center"
-  }, is('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : /*#__PURE__*/React.createElement(NumericTextField, {
-    tonal: tonal,
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    value: aspectRatioCustom?.[0],
-    onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
-    increment: false,
-    decrement: false,
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
-    style: {
-      width: 24
-    }
-  }), /*#__PURE__*/React.createElement(Type, null, ":"), is('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : /*#__PURE__*/React.createElement(NumericTextField, {
-    tonal: tonal,
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    value: aspectRatioCustom?.[1],
-    onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
-    increment: false,
-    decrement: false,
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
-    style: {
-      width: 24
-    }
-  }))), openedOption === 'resize' && /*#__PURE__*/React.createElement(Line, {
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-inputs'], classes.inputs])
-  }, is('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : /*#__PURE__*/React.createElement(NumericTextField, {
-    tonal: tonal,
-    name: l('Width'),
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    max: value?.width,
-    valueDefault: value?.width,
-    value: resize?.[0],
-    onChange: valueNew_19 => onChangeResize(valueNew_19)
-  }), is('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/React.createElement(NumericTextField, {
-    tonal: tonal,
-    name: l('Height'),
-    color: "default",
-    version: "text",
-    size: "small",
-    min: 1,
-    max: value?.height,
-    valueDefault: value?.height,
-    value: resize?.[1],
-    onChange: valueNew_20 => onChangeResize(valueNew_20, false)
-  })), openedOption === 'quality' && /*#__PURE__*/React.createElement(Line, {
-    gap: 3,
-    direction: "row",
-    align: "center",
-    style: {
-      width: '100%'
-    }
-  }, /*#__PURE__*/React.createElement(Slider, _extends({
-    valueDefault: quality,
-    value: quality,
-    min: 1,
-    max: 100,
-    precision: 1,
-    marks: [{
-      value: 1
-    }, {
-      value: 50
-    }, {
-      value: 100
-    }],
-    tooltip: true,
-    onChange: onChangeQuality
-  }, SliderProps, {
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
-  })), /*#__PURE__*/React.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: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
-    style: {
-      width: 34
-    }
-  })), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-action'], classes.action])
-  }, is('function', renderSave) ? renderSave(onSave) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Save')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    version: "outlined",
-    onClick: onSave
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconSave, null))), is('function', renderCancel) ? renderCancel(onSave) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Cancel')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    version: "outlined",
-    onClick: onCancel
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconCancel, null))))), /*#__PURE__*/React.createElement(Divider, {
-    color: "inherit",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
-  })), /*#__PURE__*/React.createElement(Line, {
-    direction: "column",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-options'], classes.options])
-  }, /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    justify: "flex-start"
-  }, options.map((item_4, index_0) => is('function', renderOption) ? renderOption(item_4, open && openOption === item_4.value, openOption) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    key: index_0,
-    name: item_4.label
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    version: "outlined",
-    selected: open && openedOption === item_4.value,
-    onClick: () => openOption(item_4.value)
-  }, IconButtonProps), /*#__PURE__*/React.createElement(item_4.Icon, null)))), /*#__PURE__*/React.createElement(Line, {
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, downloadOption && is('function', renderDownload) ? renderDownload(onDownload) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Download')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    version: "text",
-    onClick: onDownload
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconDownload, null))), is('function', renderOptionClear) ? renderOptionClear(onReset) : /*#__PURE__*/React.createElement(Tooltip, _extends({
-    name: l('Reset')
-  }, TooltipProps), /*#__PURE__*/React.createElement(IconButton, _extends({
-    version: "text",
-    onClick: onReset
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconClear, null))))))), children, meta && value && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Divider, {
-    color: "inherit",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
-  }), /*#__PURE__*/React.createElement(Line, {
-    gap: 1,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-meta'], classes.meta])
-  }, /*#__PURE__*/React.createElement(Type, MetaTypeProps, l('Dimensions'), ": ", (!open ? value : valueCopy)?.width, "x", (!open ? value : valueCopy)?.height), /*#__PURE__*/React.createElement(Type, MetaTypeProps, "\xB7"), /*#__PURE__*/React.createElement(Type, MetaTypeProps, l('Size'), ": ", size))));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsx(Line, {
+      gap: 0,
+      direction: "column",
+      align: "center",
+      justify: "center",
+      className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-image-wrapper'], classes.imageWrapper]),
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-canvas-wrapper'], classes.canvasWrapper]),
+        children: [/*#__PURE__*/_jsx("canvas", {
+          ref: refs.canvasMain,
+          className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-canvas', 'onesy-ImageEdit-canvas-main'], classes.canvas, classes.canvas_main])
+        }), open && openedOption === 'crop' && /*#__PURE__*/_jsx(ImageCrop, _objectSpread(_objectSpread({
+          image: valueCopy,
+          aspectRatio: aspectRatio ? aspectRatio : undefined,
+          onSelectorChange: selector => setSelection(selector)
+        }, ImageCropProps), {}, {
+          className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-image-crop'], ImageCropProps.className, classes.imageCrop]),
+          style: {
+            width: valueCopy?.width,
+            height: valueCopy?.height
+          }
+        }))]
+      })
+    }), (filtersOption || cropOption || resizeOption || qualityOption) && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsxs(Expand, {
+        in: !!open,
+        parent: refs.root.current,
+        style: {
+          width: '100%'
+        },
+        children: [/*#__PURE__*/_jsxs(Line, {
+          gap: 0,
+          ref: refs.option,
+          direction: "column",
+          className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option'], classes.option]),
+          children: [openedOption === 'filters' && /*#__PURE__*/_jsxs(_Fragment, {
+            children: [/*#__PURE__*/_jsx(Expand, {
+              in: !!filterValue,
+              parent: refs.option.current,
+              style: {
+                width: '100%'
+              },
+              children: /*#__PURE__*/_jsx("div", {
+                style: {
+                  paddingInline: theme.methods.space.value(5, 'px'),
+                  paddingBottom: theme.methods.space.value(5, 'px')
+                },
+                children: is('function', filterValue?.renderSlider) && filterValue?.renderSlider(filterValue.value, refs.filterValuesCopy.current, onFilterSliderChange)
+              })
+            }), /*#__PURE__*/_jsx(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              justify: "flex-start",
+              className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-filters'], classes.filters]),
+              children: filters.map(item_2 => is('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter))
+            })]
+          }), openedOption === 'crop' && /*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            justify: "center",
+            style: {
+              width: '100%'
+            },
+            children: [chips.map((item_3, index) => /*#__PURE__*/_jsx(Chip, _objectSpread(_objectSpread({
+              selected: aspectRatio === item_3.value,
+              onClick: () => onChangeAspectRatio(item_3.value)
+            }, ChipProps), {}, {
+              children: item_3.label
+            }), index)), /*#__PURE__*/_jsxs(Line, {
+              gap: 0,
+              direction: "row",
+              align: "center",
+              justify: "center",
+              children: [is('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : /*#__PURE__*/_jsx(NumericTextField, {
+                tonal: tonal,
+                color: "default",
+                version: "text",
+                size: "small",
+                min: 1,
+                value: aspectRatioCustom?.[0],
+                onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
+                increment: false,
+                decrement: false,
+                className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
+                style: {
+                  width: 24
+                }
+              }), /*#__PURE__*/_jsx(Type, {
+                children: ":"
+              }), is('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : /*#__PURE__*/_jsx(NumericTextField, {
+                tonal: tonal,
+                color: "default",
+                version: "text",
+                size: "small",
+                min: 1,
+                value: aspectRatioCustom?.[1],
+                onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
+                increment: false,
+                decrement: false,
+                className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
+                style: {
+                  width: 24
+                }
+              })]
+            })]
+          }), openedOption === 'resize' && /*#__PURE__*/_jsxs(Line, {
+            direction: "row",
+            align: "center",
+            justify: "center",
+            className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-inputs'], classes.inputs]),
+            children: [is('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : /*#__PURE__*/_jsx(NumericTextField, {
+              tonal: tonal,
+              name: l('Width'),
+              color: "default",
+              version: "text",
+              size: "small",
+              min: 1,
+              max: value?.width,
+              valueDefault: value?.width,
+              value: resize?.[0],
+              onChange: valueNew_19 => onChangeResize(valueNew_19)
+            }), is('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/_jsx(NumericTextField, {
+              tonal: tonal,
+              name: l('Height'),
+              color: "default",
+              version: "text",
+              size: "small",
+              min: 1,
+              max: value?.height,
+              valueDefault: value?.height,
+              value: resize?.[1],
+              onChange: valueNew_20 => onChangeResize(valueNew_20, false)
+            })]
+          }), openedOption === 'quality' && /*#__PURE__*/_jsxs(Line, {
+            gap: 3,
+            direction: "row",
+            align: "center",
+            style: {
+              width: '100%'
+            },
+            children: [/*#__PURE__*/_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: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+            })), /*#__PURE__*/_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: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
+              style: {
+                width: 34
+              }
+            })]
+          }), /*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            justify: "center",
+            className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-action'], classes.action]),
+            children: [is('function', renderSave) ? renderSave(onSave) : /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+              name: l('Save')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+                version: "outlined",
+                onClick: onSave
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/_jsx(IconSave, {})
+              }))
+            })), is('function', renderCancel) ? renderCancel(onSave) : /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+              name: l('Cancel')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+                version: "outlined",
+                onClick: onCancel
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/_jsx(IconCancel, {})
+              }))
+            }))]
+          })]
+        }), /*#__PURE__*/_jsx(Divider, {
+          color: "inherit",
+          className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
+        })]
+      }), /*#__PURE__*/_jsx(Line, {
+        direction: "column",
+        align: "center",
+        justify: "center",
+        className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-options'], classes.options]),
+        children: /*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          direction: "row",
+          justify: "flex-start",
+          children: [options.map((item_4, index_0) => is('function', renderOption) ? renderOption(item_4, open && openOption === item_4.value, openOption) : /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+            name: item_4.label
+          }, TooltipProps), {}, {
+            children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+              version: "outlined",
+              selected: open && openedOption === item_4.value,
+              onClick: () => openOption(item_4.value)
+            }, IconButtonProps), {}, {
+              children: /*#__PURE__*/_jsx(item_4.Icon, {})
+            }))
+          }), index_0)), /*#__PURE__*/_jsxs(Line, {
+            gap: 0,
+            direction: "row",
+            align: "center",
+            children: [downloadOption && is('function', renderDownload) ? renderDownload(onDownload) : /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+              name: l('Download')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+                version: "text",
+                onClick: onDownload
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/_jsx(IconDownload, {})
+              }))
+            })), is('function', renderOptionClear) ? renderOptionClear(onReset) : /*#__PURE__*/_jsx(Tooltip, _objectSpread(_objectSpread({
+              name: l('Reset')
+            }, TooltipProps), {}, {
+              children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+                version: "text",
+                onClick: onReset
+              }, IconButtonProps), {}, {
+                children: /*#__PURE__*/_jsx(IconClear, {})
+              }))
+            }))]
+          })]
+        })
+      })]
+    }), children, meta && value && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Divider, {
+        color: "inherit",
+        className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-divider'], classes.divider])
+      }), /*#__PURE__*/_jsxs(Line, {
+        gap: 1,
+        direction: "row",
+        align: "center",
+        justify: "center",
+        className: classNames([staticClassName('ImageEdit', theme) && ['onesy-ImageEdit-meta'], classes.meta]),
+        children: [/*#__PURE__*/_jsxs(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
+          children: [l('Dimensions'), ": ", (!open ? value : valueCopy)?.width, "x", (!open ? value : valueCopy)?.height]
+        })), /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
+          children: "\xB7"
+        })), /*#__PURE__*/_jsxs(Type, _objectSpread(_objectSpread({}, MetaTypeProps), {}, {
+          children: [l('Size'), ": ", size]
+        }))]
+      })]
+    })]
+  }));
+};
 ImageEdit.displayName = 'onesy-ImageEdit';
 export default ImageEdit;