@onesy/ui-react 1.0.129 → 1.0.131

package/ImageEdit/ImageEdit.js

@@ -1,790 +1,1095 @@
 "use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialDoneW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDoneW100"));
-const IconMaterialCloseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
-const IconMaterialTuneW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialTuneW100"));
-const IconMaterialCropW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCropW100"));
-const IconMaterialAspectRatioW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialAspectRatioW100"));
-const IconMaterialHighQualityW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialHighQualityW100"));
-const IconMaterialClearAllW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialClearAllW100"));
-const IconMaterialDownloadW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDownloadW100"));
-const IconMaterialCloudW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100"));
-const IconMaterialWaterDropW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialWaterDropW100"));
-const IconMaterialFlakyW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialFlakyW100"));
-const IconMaterialWbSunnyW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
-const IconMaterialTonalityW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialTonalityW100"));
-const IconMaterialNightlightW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100"));
-const Type_1 = __importDefault(require("../Type"));
-const Surface_1 = __importDefault(require("../Surface"));
-const Tooltip_1 = __importDefault(require("../Tooltip"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Expand_1 = __importDefault(require("../Expand"));
-const Divider_1 = __importDefault(require("../Divider"));
-const Slider_1 = __importDefault(require("../Slider"));
-const NumericTextField_1 = __importDefault(require("../NumericTextField"));
-const ImageCrop_1 = __importDefault(require("../ImageCrop"));
-const Chip_1 = __importDefault(require("../Chip"));
-const Line_1 = __importDefault(require("../Line"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {},
-    option: {
-        width: '100%',
-        padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
-    },
-    options: {
-        width: '100%',
-        overflowX: 'auto',
-        padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
-    },
-    canvas: {
-        width: '100%',
-        height: 'auto',
-        zIndex: '1'
-    },
-    inputs: {
-        width: '100%'
-    },
-    divider: {
-        '&.onesy-Divider-root': {
-            margin: '0px'
-        }
-    },
-    imageWrapper: {
-        position: 'relative',
-        height: '400px',
-        width: '100%',
-        '&::before': {
-            content: '""',
-            position: 'absolute',
-            inset: '0',
-            width: '100%',
-            height: '100%',
-            background: 'currentColor',
-            zIndex: '0',
-            opacity: '0.94'
-        }
-    },
-    canvasWrapper: {
-        position: 'relative',
-        lineHeight: '0'
-    },
-    image: {
-        width: '100%',
-        height: 'auto'
-    },
-    imageCopy: {
-        width: '100%',
-        height: 'auto'
-    },
-    imageCrop: {
-        position: 'absolute',
-        inset: '0',
-        width: '100% !important',
-        height: '100% !important'
-    },
-    meta: {
-        width: '100%',
-        padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`
-    },
-    optionInput: {
-        '& .onesy-TextField-input-wrapper': {
-            padding: '0px',
-            height: 'auto'
-        },
-        '& .onesy-TextField-input': {
-            textAlign: 'center'
-        }
-    },
-    filters: {
-        width: '100%',
-        overflowX: 'auto',
-        '& > *': {
-            flex: '0 0 auto'
-        }
-    },
-    action: {
-        width: '100%',
-        paddingTop: theme.methods.space.value(2, 'px')
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+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"));
+var _utils = require("@onesy/utils");
+var _styleReact = require("@onesy/style-react");
+var _IconMaterialDoneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDoneW100"));
+var _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
+var _IconMaterialTuneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTuneW100"));
+var _IconMaterialCropW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCropW100"));
+var _IconMaterialAspectRatioW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialAspectRatioW100"));
+var _IconMaterialHighQualityW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialHighQualityW100"));
+var _IconMaterialClearAllW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialClearAllW100"));
+var _IconMaterialDownloadW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDownloadW100"));
+var _IconMaterialCloudW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloudW100"));
+var _IconMaterialWaterDropW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWaterDropW100"));
+var _IconMaterialFlakyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialFlakyW100"));
+var _IconMaterialWbSunnyW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWbSunnyW100"));
+var _IconMaterialTonalityW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTonalityW100"));
+var _IconMaterialNightlightW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialNightlightW100"));
+var _Type = _interopRequireDefault(require("../Type"));
+var _Surface = _interopRequireDefault(require("../Surface"));
+var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+var _Expand = _interopRequireDefault(require("../Expand"));
+var _Divider = _interopRequireDefault(require("../Divider"));
+var _Slider = _interopRequireDefault(require("../Slider"));
+var _NumericTextField = _interopRequireDefault(require("../NumericTextField"));
+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"];
+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 => ({
+  root: {},
+  option: {
+    width: '100%',
+    padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
+  },
+  options: {
+    width: '100%',
+    overflowX: 'auto',
+    padding: `${theme.methods.space.value(2, 'px')} ${theme.methods.space.value(3, 'px')}`
+  },
+  canvas: {
+    width: '100%',
+    height: 'auto',
+    zIndex: '1'
+  },
+  inputs: {
+    width: '100%'
+  },
+  divider: {
+    '&.onesy-Divider-root': {
+      margin: '0px'
+    }
+  },
+  imageWrapper: {
+    position: 'relative',
+    height: '400px',
+    width: '100%',
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      inset: '0',
+      width: '100%',
+      height: '100%',
+      background: 'currentColor',
+      zIndex: '0',
+      opacity: '0.94'
+    }
+  },
+  canvasWrapper: {
+    position: 'relative',
+    lineHeight: '0'
+  },
+  image: {
+    width: '100%',
+    height: 'auto'
+  },
+  imageCopy: {
+    width: '100%',
+    height: 'auto'
+  },
+  imageCrop: {
+    position: 'absolute',
+    inset: '0',
+    width: '100% !important',
+    height: '100% !important'
+  },
+  meta: {
+    width: '100%',
+    padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`
+  },
+  optionInput: {
+    '& .onesy-TextField-input-wrapper': {
+      padding: '0px',
+      height: 'auto'
     },
-    slider: {
-        width: '100%'
+    '& .onesy-TextField-input': {
+      textAlign: 'center'
     }
-}), { name: 'onesy-ImageEdit' });
-const ImageEdit = react_1.default.forwardRef((props_, ref) => {
-    var _a, _b;
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const l = theme.l;
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyImageEdit) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
-    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
-    const Surface = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Surface) || Surface_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
-    const Expand = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Expand) || Expand_1.default; }, [theme]);
-    const Divider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Divider) || Divider_1.default; }, [theme]);
-    const Slider = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slider) || Slider_1.default; }, [theme]);
-    const NumericTextField = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.NumericTextField) || NumericTextField_1.default; }, [theme]);
-    const ImageCrop = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.ImageCrop) || ImageCrop_1.default; }, [theme]);
-    const Chip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Chip) || Chip_1.default; }, [theme]);
-    const { tonal = true, color = 'primary', image, name = 'onesy-image.jpg', type = 'image/jpeg', openDefault, openedOptionDefault, valueDefault, value: value_, valueCopyDefault, valueCopy: valueCopy_, onChange: onChange_, onChangeCopy: onChangeCopy_, onlyFilters, filters: filters_, meta = true, filtersOption = true, cropOption = true, resizeOption = true, qualityOption = true, downloadOption = true, resizeAspectRatio = true, renderOption, renderOptionClear, renderSave, renderCancel, renderSlider, renderDownload, renderInput, IconBrightness = IconMaterialWbSunnyW100_1.default, IconContrast = IconMaterialFlakyW100_1.default, IconSaturation = IconMaterialWaterDropW100_1.default, IconFade = IconMaterialCloudW100_1.default, IconInvert = IconMaterialTonalityW100_1.default, IconOldPhoto = IconMaterialNightlightW100_1.default, IconSave = IconMaterialDoneW100_1.default, IconCancel = IconMaterialCloseW100_1.default, IconClear = IconMaterialClearAllW100_1.default, IconCrop = IconMaterialCropW100_1.default, IconFilters = IconMaterialTuneW100_1.default, IconResize = IconMaterialAspectRatioW100_1.default, IconQuality = IconMaterialHighQualityW100_1.default, IconDownload = IconMaterialDownloadW100_1.default, ChipProps: ChipProps_, SliderProps: SliderProps_, TooltipProps: TooltipProps_, ImageCropProps: ImageCropProps_, IconButtonProps: IconButtonProps_, className, children } = props, other = __rest(props, ["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 [init, setInit] = react_1.default.useState(false);
-    const [value, setValue] = react_1.default.useState(valueDefault !== undefined ? valueDefault : value_);
-    const [valueCopy, setValueCopy] = react_1.default.useState(valueCopyDefault !== undefined ? valueCopyDefault : valueCopy_);
-    const [open, setOpen] = react_1.default.useState(openDefault);
-    const [openedOption, setOpenedOption] = react_1.default.useState(openedOptionDefault);
-    const [quality, setQuality] = react_1.default.useState(100);
-    const [filterValues, setFilterValues] = react_1.default.useState({});
-    const [filterValuesCopy, setFilterValuesCopy] = react_1.default.useState({});
-    const [filter, setFilter] = react_1.default.useState();
-    const [resize, setResize] = react_1.default.useState();
-    const [selection, setSelection] = react_1.default.useState();
-    const [aspectRatio, setAspectRatio] = react_1.default.useState();
-    const [aspectRatioCustom, setAspectRatioCustom] = react_1.default.useState([1, 1]);
-    const [size, setSize] = react_1.default.useState('');
-    const { classes } = useStyle();
-    const refs = {
-        root: react_1.default.useRef(null),
-        option: react_1.default.useRef(null),
-        value: react_1.default.useRef(null),
-        valueCopy: react_1.default.useRef(null),
-        canvasMain: react_1.default.useRef(null),
-        open: react_1.default.useRef(null),
-        resizeAspectRatio: react_1.default.useRef(null),
-        filterValues: react_1.default.useRef(null),
-        filterValuesCopy: react_1.default.useRef(null)
-    };
-    refs.value.current = value;
-    refs.valueCopy.current = valueCopy;
-    refs.open.current = open;
-    refs.resizeAspectRatio.current = resizeAspectRatio;
-    refs.filterValues.current = filterValues;
-    refs.filterValuesCopy.current = filterValuesCopy;
-    const updateSize = (valueNew = refs.canvasMain.current) => {
-        const uri = valueNew.toDataURL(type);
-        // Update size
-        setSize((0, utils_1.to)((0, utils_1.to)(uri, 'byte-size'), 'size-format'));
-    };
-    react_1.default.useEffect(() => {
-        var _a;
-        const method = (event) => {
-            if (['Escape'].includes(event.key) ||
-                (['s', 'S'].includes(event.key) && event.metaKey) ||
-                (['f', 'F'].includes(event.key) && event.metaKey && event.shiftKey) ||
-                (['c', 'C'].includes(event.key) && event.metaKey && event.shiftKey) ||
-                (['d', 'D'].includes(event.key) && (event.metaKey || event.shiftKey)) ||
-                (['r', 'R'].includes(event.key) && (event.metaKey || event.shiftKey)) ||
-                (['q', 'Q'].includes(event.key) && event.metaKey && event.shiftKey)) {
-                event.preventDefault();
-            }
-            switch (event.key) {
-                case 's':
-                case 'S':
-                    if (refs.open.current && event.metaKey)
-                        onSave();
-                    return;
-                case 'f':
-                case 'F':
-                    if (event.metaKey && event.shiftKey)
-                        openOption('filters');
-                    return;
-                case 'c':
-                case 'C':
-                    if (event.metaKey && event.shiftKey)
-                        openOption('crop');
-                    return;
-                case 'd':
-                case 'D':
-                    if (event.metaKey && event.shiftKey)
-                        onDownload();
-                    return;
-                case 'r':
-                case 'R':
-                    if (event.metaKey && !event.shiftKey)
-                        onReset();
-                    if (event.metaKey && event.shiftKey)
-                        openOption('resize');
-                    return;
-                case 'q':
-                case 'Q':
-                    if (event.metaKey && event.shiftKey)
-                        openOption('quality');
-                    return;
-                case 'Escape':
-                    if (refs.open.current)
-                        onCancel();
-                    return;
-                default:
-                    break;
-            }
-        };
-        if (!refs.value.current) {
-            if (image instanceof HTMLCanvasElement)
-                onChange(image);
-            else if ((0, utils_1.is)('string', image))
-                makeImage(image);
-        }
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        rootDocument.addEventListener('keydown', method);
-        setInit(true);
-        return () => {
-            // Clean up
-            rootDocument.removeEventListener('keydown', method);
-        };
-    }, []);
-    react_1.default.useEffect(() => {
-        if (image instanceof HTMLCanvasElement)
-            onChange(image);
-        else if ((0, utils_1.is)('string', image))
-            makeImage(image);
-    }, [image]);
-    react_1.default.useEffect(() => {
-        var _a;
-        const valueToUse = !open ? refs.value.current : refs.valueCopy.current;
-        if (valueToUse) {
-            refs.canvasMain.current.width = valueToUse.width;
-            refs.canvasMain.current.height = valueToUse.height;
-            (_a = refs.canvasMain.current) === null || _a === void 0 ? void 0 : _a.getContext('2d').drawImage(valueToUse, 0, 0, valueToUse.width, valueToUse.height);
-            updateSize();
-        }
-    }, [value, valueCopy, open]);
-    react_1.default.useEffect(() => {
-        if (init) {
-            if (value_ !== value)
-                onChange(value_);
-        }
-    }, [value_]);
-    react_1.default.useEffect(() => {
-        if (init) {
-            if (valueCopy_ !== valueCopy)
-                onChangeCopy(valueCopy_);
-        }
-    }, [valueCopy_]);
-    const applyAllFilters = (canvas) => {
-        let valueCopy__ = refs.valueCopy.current;
-        // Update filters
-        Object.keys(refs.filterValuesCopy.current).forEach(item => {
-            const filterValue_ = filters.find(item_ => item_.value === item);
-            if (filterValue_) {
-                const { method } = filterValue_;
-                if ((0, utils_1.is)('function', method) &&
-                    refs.filterValuesCopy.current[item] !== undefined)
-                    valueCopy__ = method(refs.filterValuesCopy.current[item], canvas, valueCopy__);
-            }
-        });
-    };
-    const applyAllFiltersDebounced = react_1.default.useCallback((0, utils_1.debounce)(applyAllFilters, 140), []);
-    react_1.default.useEffect(() => {
-        applyAllFiltersDebounced(refs.canvasMain.current);
-    }, [filterValuesCopy]);
-    const makeImage = async (valueNew = refs.value.current) => {
-        var _a;
-        const img = await (0, utils_2.image)(valueNew);
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        const canvas = rootDocument.createElement('canvas');
-        canvas.width = img.width;
-        canvas.height = img.height;
-        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
-        // Image
-        onChange(canvas);
-        // Image copy
-        const copy = rootDocument.createElement('canvas');
-        copy.width = canvas.width;
-        copy.height = canvas.height;
-        copy.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
-        onChangeCopy(copy);
-    };
-    const updateResize = (0, utils_1.debounce)(async (width, height) => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        // Update value copy
-        const canvas = rootDocument.createElement('canvas');
-        if (width > 1 && height > 1) {
-            canvas.width = width;
-            canvas.height = height;
-            canvas.getContext('2d').drawImage(refs.value.current, 0, 0, width, height);
-            // Value copy
-            onChangeCopy(canvas);
-            // Update the canvas value
-            refs.canvasMain.current.width = width;
-            refs.canvasMain.current.height = height;
-            refs.canvasMain.current.getContext('2d').drawImage(value, 0, 0, width, height);
-            // Update size
-            updateSize();
-        }
-    }, 140);
-    const onFilterSliderChange = (valueNew, valueFilter) => {
-        setFilterValuesCopy(values_ => (Object.assign(Object.assign({}, values_), { [valueFilter]: valueNew })));
-    };
-    const onChangeFilter = (valueNew) => {
-        // If moving to another filter or closing current one
-        // clean up previous one filter for mainCanvas
-        if (filter === valueNew)
-            setFilter('');
-        else
-            setFilter(valueNew);
-    };
-    const onChangeAspectRatioCustom = (valueNew_, left_ = true) => {
-        const valueNew = !valueNew_ ? 1 : valueNew_;
-        let left = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0]) || 1;
-        let right = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1]) || 1;
-        left_ ? left = valueNew : right = valueNew;
-        setAspectRatioCustom([left, right]);
-        onChangeAspectRatio(left / right);
-    };
-    const onChangeAspectRatio = (valueNew) => {
-        if (aspectRatio === valueNew)
-            setAspectRatio('');
-        else
-            setAspectRatio(valueNew);
-    };
-    const onChangeResize = async (valueNew, width_ = true) => {
-        let width;
-        let height;
-        if (!refs.resizeAspectRatio.current) {
-            if (width_) {
-                width = +valueNew;
-                height = resize === null || resize === void 0 ? void 0 : resize[1];
-            }
-            else {
-                width = resize === null || resize === void 0 ? void 0 : resize[0];
-                height = +valueNew;
-            }
-        }
-        else {
-            const aspectRatio_ = (value === null || value === void 0 ? void 0 : value.width) / (value === null || value === void 0 ? void 0 : value.height);
-            if (width_) {
-                width = +valueNew;
-                height = valueNew / aspectRatio_;
-            }
-            else {
-                height = +valueNew;
-                width = height * aspectRatio_;
-            }
-        }
-        width = (0, utils_1.clamp)(width, 0);
-        height = (0, utils_1.clamp)(height, 0);
-        setResize([width, height]);
-        await updateResize(width, height);
-    };
-    const updateQuality = (0, utils_1.debounce)(async (valueNew) => {
-        var _a, _b;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        // Update copy value
-        const uri = value.toDataURL('image/jpeg', valueNew / 100);
-        const img = await (0, utils_2.image)(uri);
-        const canvas = rootDocument.createElement('canvas');
-        canvas.width = img.width;
-        canvas.height = img.height;
-        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
-        onChangeCopy(canvas);
-        // Update the canvas value
-        refs.canvasMain.current.width = canvas.width;
-        refs.canvasMain.current.height = canvas.height;
-        (_b = refs.canvasMain.current) === null || _b === void 0 ? void 0 : _b.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
-        // Update size
-        updateSize();
-    }, 40);
-    const onChangeQuality = async (valueNew) => {
-        setQuality(valueNew);
-        await updateQuality(valueNew);
-    };
-    const onChange = (valueNew) => {
-        // Update inner or controlled
-        if (!props.hasOwnProperty('value'))
-            setValue(valueNew);
-        if ((0, utils_1.is)('function', onChange_))
-            onChange_(valueNew);
-    };
-    const onChangeCopy = (valueNew) => {
-        // Update inner or controlled
-        if (!props.hasOwnProperty('valueCopy'))
-            setValueCopy(valueNew);
-        if ((0, utils_1.is)('function', onChangeCopy_))
-            onChangeCopy_(valueNew);
-    };
-    const onReset = (imageReset = true, valueCopyReset = true, resizeReset = true) => {
-        var _a;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        setOpen(false);
-        setQuality(100);
-        setAspectRatio('');
-        setAspectRatioCustom([1, 1]);
-        setSelection('');
-        setFilter('');
-        setFilterValuesCopy(Object.assign({}, filterValues));
-        if (resizeReset)
-            setResize([value === null || value === void 0 ? void 0 : value.width, value === null || value === void 0 ? void 0 : value.height]);
-        if (valueCopyReset) {
-            const canvas = rootDocument.createElement('canvas');
-            canvas.width = refs.value.current.width;
-            canvas.height = refs.value.current.height;
-            canvas.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
-            onChangeCopy(canvas);
-        }
-        if (imageReset) {
-            setFilterValues({});
-            setFilterValuesCopy({});
-            makeImage(image);
-        }
-    };
-    const openOption = (valueNew) => {
-        setOpenedOption(valueNew);
-        if (open && openedOption === valueNew) {
-            setOpen(false);
-            onReset(false);
-        }
-        else if (!open)
-            setOpen(true);
-    };
-    const onSave = () => {
-        var _a, _b;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        // Make value copy into value
-        let canvas = rootDocument.createElement('canvas');
-        canvas.width = refs.valueCopy.current.width;
-        canvas.height = refs.valueCopy.current.height;
-        canvas.getContext('2d').drawImage(refs.valueCopy.current, 0, 0, refs.valueCopy.current.width, refs.valueCopy.current.height);
-        // Update crop
-        if (openedOption === 'crop' && selection) {
-            // Crop the canvas
-            canvas.width = selection.width;
-            canvas.height = selection.height;
-            canvas = (0, utils_1.canvasCrop)(refs.valueCopy.current, selection.left, selection.top, selection.width, selection.height);
-        }
-        // Update filters
-        setFilterValues(Object.assign({}, filterValuesCopy));
-        applyAllFilters(canvas);
-        // Update the main canvas value
-        refs.canvasMain.current.width = canvas.width;
-        refs.canvasMain.current.height = canvas.height;
-        (_b = refs.canvasMain.current) === null || _b === void 0 ? void 0 : _b.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
-        // Update value
-        onChange(canvas);
-        const canvasCopy = rootDocument.createElement('canvas');
-        canvasCopy.width = canvas.width;
-        canvasCopy.height = canvas.height;
-        canvasCopy.getContext('2d').drawImage(canvas, 0, 0, canvasCopy.width, canvasCopy.height);
-        // Update value copy
-        onChangeCopy(canvasCopy);
-        // Reset
-        onReset(false, false, false);
-    };
-    const onDownload = () => {
-        // Download the image from canvas datauri
-        // of the image type and quality, name
-        const uri = refs.value.current.toDataURL(type);
-        (0, utils_1.download)(name, uri, type);
-    };
-    const onCancel = () => {
-        var _a, _b, _c, _d;
-        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
-        // Reset to unopen
-        onReset(false);
-        // Make value copy into value
-        const canvas = rootDocument.createElement('canvas');
-        canvas.width = refs.value.current.width;
-        canvas.height = refs.value.current.height;
-        canvas.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
-        onChangeCopy(canvas);
-        // Update the main canvas value
-        refs.canvasMain.current.width = (_b = refs.value.current) === null || _b === void 0 ? void 0 : _b.width;
-        refs.canvasMain.current.height = (_c = refs.value.current) === null || _c === void 0 ? void 0 : _c.height;
-        (_d = refs.canvasMain.current) === null || _d === void 0 ? void 0 : _d.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
+  },
+  filters: {
+    width: '100%',
+    overflowX: 'auto',
+    '& > *': {
+      flex: '0 0 auto'
+    }
+  },
+  action: {
+    width: '100%',
+    paddingTop: theme.methods.space.value(2, 'px')
+  },
+  slider: {
+    width: '100%'
+  }
+}), {
+  name: 'onesy-ImageEdit'
+});
+const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+  var _ref, _ref2;
+  const theme = (0, _styleReact.useOnesyTheme)();
+  const l = theme.l;
+  const props = _react.default.useMemo(() => {
+    var _theme$ui, _theme$ui2;
+    return _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageEdit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  }, [props_]);
+  const Line = _react.default.useMemo(() => {
+    var _theme$elements;
+    return (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  }, [theme]);
+  const Type = _react.default.useMemo(() => {
+    var _theme$elements2;
+    return (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  }, [theme]);
+  const Surface = _react.default.useMemo(() => {
+    var _theme$elements3;
+    return (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
+  }, [theme]);
+  const IconButton = _react.default.useMemo(() => {
+    var _theme$elements4;
+    return (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  }, [theme]);
+  const Tooltip = _react.default.useMemo(() => {
+    var _theme$elements5;
+    return (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
+  }, [theme]);
+  const Expand = _react.default.useMemo(() => {
+    var _theme$elements6;
+    return (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
+  }, [theme]);
+  const Divider = _react.default.useMemo(() => {
+    var _theme$elements7;
+    return (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Divider) || _Divider.default;
+  }, [theme]);
+  const Slider = _react.default.useMemo(() => {
+    var _theme$elements8;
+    return (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Slider) || _Slider.default;
+  }, [theme]);
+  const NumericTextField = _react.default.useMemo(() => {
+    var _theme$elements9;
+    return (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.NumericTextField) || _NumericTextField.default;
+  }, [theme]);
+  const ImageCrop = _react.default.useMemo(() => {
+    var _theme$elements10;
+    return (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ImageCrop) || _ImageCrop.default;
+  }, [theme]);
+  const Chip = _react.default.useMemo(() => {
+    var _theme$elements11;
+    return (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Chip) || _Chip.default;
+  }, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      image,
+      name = 'onesy-image.jpg',
+      type = 'image/jpeg',
+      openDefault,
+      openedOptionDefault,
+      valueDefault,
+      value: value_,
+      valueCopyDefault,
+      valueCopy: valueCopy_,
+      onChange: onChange_,
+      onChangeCopy: onChangeCopy_,
+      onlyFilters,
+      filters: filters_,
+      meta = true,
+      filtersOption = true,
+      cropOption = true,
+      resizeOption = true,
+      qualityOption = true,
+      downloadOption = true,
+      resizeAspectRatio = true,
+      renderOption,
+      renderOptionClear,
+      renderSave,
+      renderCancel,
+      renderSlider,
+      renderDownload,
+      renderInput,
+      IconBrightness = _IconMaterialWbSunnyW.default,
+      IconContrast = _IconMaterialFlakyW.default,
+      IconSaturation = _IconMaterialWaterDropW.default,
+      IconFade = _IconMaterialCloudW.default,
+      IconInvert = _IconMaterialTonalityW.default,
+      IconOldPhoto = _IconMaterialNightlightW.default,
+      IconSave = _IconMaterialDoneW.default,
+      IconCancel = _IconMaterialCloseW.default,
+      IconClear = _IconMaterialClearAllW.default,
+      IconCrop = _IconMaterialCropW.default,
+      IconFilters = _IconMaterialTuneW.default,
+      IconResize = _IconMaterialAspectRatioW.default,
+      IconQuality = _IconMaterialHighQualityW.default,
+      IconDownload = _IconMaterialDownloadW.default,
+      ChipProps: ChipProps_,
+      SliderProps: SliderProps_,
+      TooltipProps: TooltipProps_,
+      ImageCropProps: ImageCropProps_,
+      IconButtonProps: IconButtonProps_,
+      className,
+      children
+    } = props,
+    other = (0, _objectWithoutProperties2.default)(props, _excluded);
+  const [init, setInit] = _react.default.useState(false);
+  const [value, setValue] = _react.default.useState(valueDefault !== undefined ? valueDefault : value_);
+  const [valueCopy, setValueCopy] = _react.default.useState(valueCopyDefault !== undefined ? valueCopyDefault : valueCopy_);
+  const [open, setOpen] = _react.default.useState(openDefault);
+  const [openedOption, setOpenedOption] = _react.default.useState(openedOptionDefault);
+  const [quality, setQuality] = _react.default.useState(100);
+  const [filterValues, setFilterValues] = _react.default.useState({});
+  const [filterValuesCopy, setFilterValuesCopy] = _react.default.useState({});
+  const [filter, setFilter] = _react.default.useState();
+  const [resize, setResize] = _react.default.useState();
+  const [selection, setSelection] = _react.default.useState();
+  const [aspectRatio, setAspectRatio] = _react.default.useState();
+  const [aspectRatioCustom, setAspectRatioCustom] = _react.default.useState([1, 1]);
+  const [size, setSize] = _react.default.useState('');
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: _react.default.useRef(null),
+    option: _react.default.useRef(null),
+    value: _react.default.useRef(null),
+    valueCopy: _react.default.useRef(null),
+    canvasMain: _react.default.useRef(null),
+    open: _react.default.useRef(null),
+    resizeAspectRatio: _react.default.useRef(null),
+    filterValues: _react.default.useRef(null),
+    filterValuesCopy: _react.default.useRef(null)
+  };
+  refs.value.current = value;
+  refs.valueCopy.current = valueCopy;
+  refs.open.current = open;
+  refs.resizeAspectRatio.current = resizeAspectRatio;
+  refs.filterValues.current = filterValues;
+  refs.filterValuesCopy.current = filterValuesCopy;
+  const updateSize = (valueNew = refs.canvasMain.current) => {
+    const uri = valueNew.toDataURL(type);
+
+    // Update size
+    setSize((0, _utils.to)((0, _utils.to)(uri, 'byte-size'), 'size-format'));
+  };
+  _react.default.useEffect(() => {
+    var _refs$root$current;
+    const method = event => {
+      if (['Escape'].includes(event.key) || ['s', 'S'].includes(event.key) && event.metaKey || ['f', 'F'].includes(event.key) && event.metaKey && event.shiftKey || ['c', 'C'].includes(event.key) && event.metaKey && event.shiftKey || ['d', 'D'].includes(event.key) && (event.metaKey || event.shiftKey) || ['r', 'R'].includes(event.key) && (event.metaKey || event.shiftKey) || ['q', 'Q'].includes(event.key) && event.metaKey && event.shiftKey) {
+        event.preventDefault();
+      }
+      switch (event.key) {
+        case 's':
+        case 'S':
+          if (refs.open.current && event.metaKey) onSave();
+          return;
+        case 'f':
+        case 'F':
+          if (event.metaKey && event.shiftKey) openOption('filters');
+          return;
+        case 'c':
+        case 'C':
+          if (event.metaKey && event.shiftKey) openOption('crop');
+          return;
+        case 'd':
+        case 'D':
+          if (event.metaKey && event.shiftKey) onDownload();
+          return;
+        case 'r':
+        case 'R':
+          if (event.metaKey && !event.shiftKey) onReset();
+          if (event.metaKey && event.shiftKey) openOption('resize');
+          return;
+        case 'q':
+        case 'Q':
+          if (event.metaKey && event.shiftKey) openOption('quality');
+          return;
+        case 'Escape':
+          if (refs.open.current) onCancel();
+          return;
+        default:
+          break;
+      }
     };
-    let filters = react_1.default.useMemo(() => [
-        {
-            label: l('Brightness'),
-            Icon: IconBrightness,
-            value: 'brightness',
-            method: utils_2.canvasBrightness,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Brightness') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconBrightness, {}) })) }), value__)),
-            renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -100, max: 100, precision: 1, marks: [
-                    { value: -100, label: '-100' },
-                    { value: 0, label: '0' },
-                    { value: 100, label: '100' }
-                ], labels: true, tooltip: true, onChange: (valueNew) => {
-                    if ((0, utils_1.is)('function', onFilterSliderChange_))
-                        onFilterSliderChange_(valueNew, value__);
-                } }, SliderProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-slider'
-                    ],
-                    SliderProps.className,
-                    classes.slider
-                ]) }), value__))
-        },
-        {
-            label: l('Contrast'),
-            Icon: IconContrast,
-            value: 'contrast',
-            method: utils_2.canvasContrast,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Contrast') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconContrast, {}) })) }), value__)),
-            renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -100, max: 100, precision: 1, marks: [
-                    { value: -100, label: '-100' },
-                    { value: 0, label: '0' },
-                    { value: 100, label: '100' }
-                ], labels: true, tooltip: true, onChange: (valueNew) => {
-                    if ((0, utils_1.is)('function', onFilterSliderChange_))
-                        onFilterSliderChange_(valueNew, value__);
-                } }, SliderProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-slider'
-                    ],
-                    SliderProps.className,
-                    classes.slider
-                ]) }), value__))
-        },
-        {
-            label: l('Saturation'),
-            Icon: IconSaturation,
-            value: 'saturation',
-            method: utils_2.canvasSaturation,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Saturation') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSaturation, {}) })) }), value__)),
-            renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -100, max: 100, precision: 1, marks: [
-                    { value: -100, label: '-100' },
-                    { value: 0, label: '0' },
-                    { value: 100, label: '100' }
-                ], labels: true, tooltip: true, onChange: (valueNew) => {
-                    if ((0, utils_1.is)('function', onFilterSliderChange_))
-                        onFilterSliderChange_(valueNew, value__);
-                } }, SliderProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-slider'
-                    ],
-                    SliderProps.className,
-                    classes.slider
-                ]) }), value__))
-        },
-        {
-            label: l('Fade'),
-            Icon: IconFade,
-            value: 'fade',
-            method: utils_2.canvasFade,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Fade') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconFade, {}) })) }), value__)),
-            renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: 0, max: 100, precision: 1, marks: [
-                    { value: 0, label: '0' },
-                    { value: 100, label: '100' }
-                ], labels: true, tooltip: true, onChange: (valueNew) => {
-                    if ((0, utils_1.is)('function', onFilterSliderChange_))
-                        onFilterSliderChange_(valueNew, value__);
-                } }, SliderProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-slider'
-                    ],
-                    SliderProps.className,
-                    classes.slider
-                ]) }), value__))
-        },
-        {
-            label: l('Invert'),
-            Icon: IconInvert,
-            value: 'invert',
-            method: utils_2.canvasInvert,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Invert') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconInvert, {}) })) }), value__)),
-            renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: 0, max: 1, precision: 1, marks: [
-                    { value: 0, label: 'Not inverted' },
-                    { value: 1, label: 'Inverted' }
-                ], labels: true, tooltip: true, onChange: (valueNew) => {
-                    if ((0, utils_1.is)('function', onFilterSliderChange_))
-                        onFilterSliderChange_(valueNew, value__);
-                } }, SliderProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-slider'
-                    ],
-                    SliderProps.className,
-                    classes.slider
-                ]) }), value__))
-        },
-        {
-            label: l('Old photo'),
-            Icon: IconOldPhoto,
-            value: 'old_photo',
-            method: utils_2.canvasOldPhoto,
-            renderIconButton: (value__, selected_, onChangeFilter_) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Old photo') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: selected_, onClick: () => onChangeFilter_(value__) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconOldPhoto, {}) })) }), value__)),
-            renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => ((0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0, min: -40, max: 40, precision: 1, marks: [
-                    { value: -40, label: '-40' },
-                    { value: 0, label: 'No filter' },
-                    { value: 40, label: '40' }
-                ], labels: true, tooltip: true, onChange: (valueNew) => {
-                    if ((0, utils_1.is)('function', onFilterSliderChange_))
-                        onFilterSliderChange_(valueNew, value__);
-                } }, SliderProps, { className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-slider'
-                    ],
-                    SliderProps.className,
-                    classes.slider
-                ]) }), value__))
-        },
-        ...(filters_ || [])
-    ], [filters_]);
-    // Only filters
-    if ((0, utils_1.is)('array', onlyFilters))
-        filters = filters.filter(item => onlyFilters.includes(item.value));
-    const ImageCropProps = Object.assign({ gridLines: true }, ImageCropProps_);
-    const TooltipProps = Object.assign({ position: 'bottom', interactive: false }, TooltipProps_);
-    const IconButtonProps = Object.assign({ tonal, color: 'inherit' }, IconButtonProps_);
-    const SliderProps = Object.assign({ tonal: false, color: 'default' }, SliderProps_);
-    const ChipProps = Object.assign({ size: 'small' }, ChipProps_);
-    const chips = [
-        { label: '1:1', value: 1 / 1 },
-        { label: '4:3', value: 4 / 3 },
-        { label: '16:9', value: 16 / 9 }
-    ];
-    const options = [
-        filtersOption && { label: l('Filters'), value: 'filters', Icon: IconFilters },
-        cropOption && { label: l('Crop'), value: 'crop', Icon: IconCrop },
-        resizeOption && { label: l('Resize'), value: 'resize', Icon: IconResize },
-        qualityOption && { label: l('Quality'), value: 'quality', Icon: IconQuality }
-    ]
-        .filter(Boolean);
-    const MetaTypeProps = {
-        version: 'b3'
+    if (!refs.value.current) {
+      if (image instanceof HTMLCanvasElement) onChange(image);else if ((0, _utils.is)('string', image)) makeImage(image);
+    }
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
+    rootDocument.addEventListener('keydown', method);
+    setInit(true);
+    return () => {
+      // Clean up
+      rootDocument.removeEventListener('keydown', method);
     };
-    const filterValue = filters.find(item_ => item_.value === filter);
-    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: item => {
-            if (ref) {
-                if ((0, utils_1.is)('function', ref))
-                    ref(item);
-                else if (ref === null || ref === void 0 ? void 0 : ref.current)
-                    ref.current = item;
-            }
-            refs.root.current = item;
-        }, tonal: tonal, color: color, gap: 0, direction: 'column', Component: Surface, className: (0, style_react_1.classNames)([
-            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                'onesy-ImageEdit-root',
-                `onesy-ImageEdit-size-${size}`
-            ],
-            className,
-            classes.root
-        ]) }, other, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, direction: 'column', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                        'onesy-ImageEdit-image-wrapper'
-                    ],
-                    classes.imageWrapper
-                ]) }, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: (0, style_react_1.classNames)([
-                        (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                            'onesy-ImageEdit-canvas-wrapper'
-                        ],
-                        classes.canvasWrapper
-                    ]) }, { children: [(0, jsx_runtime_1.jsx)("canvas", { ref: refs.canvasMain, className: (0, style_react_1.classNames)([
-                                (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                    'onesy-ImageEdit-canvas',
-                                    'onesy-ImageEdit-canvas-main'
-                                ],
-                                classes.canvas,
-                                classes.canvas_main
-                            ]) }), open && openedOption === 'crop' && ((0, jsx_runtime_1.jsx)(ImageCrop, Object.assign({ image: valueCopy, aspectRatio: aspectRatio ? aspectRatio : undefined, onSelectorChange: (selector) => setSelection(selector) }, ImageCropProps, { className: (0, style_react_1.classNames)([
-                                (0, utils_2.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) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Expand, Object.assign({ in: !!open, parent: refs.root.current, style: {
-                            width: '100%'
-                        } }, { children: [(0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, ref: refs.option, direction: 'column', className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                        'onesy-ImageEdit-option'
-                                    ],
-                                    classes.option
-                                ]) }, { children: [openedOption === 'filters' && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Expand, Object.assign({ in: !!filterValue, parent: refs.option.current, style: {
-                                                    width: '100%'
-                                                } }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: {
-                                                        paddingInline: theme.methods.space.value(5, 'px'),
-                                                        paddingBottom: theme.methods.space.value(5, 'px')
-                                                    } }, { children: (0, utils_1.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)) })) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'flex-start', className: (0, style_react_1.classNames)([
-                                                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                        'onesy-ImageEdit-filters'
-                                                    ],
-                                                    classes.filters
-                                                ]) }, { children: filters.map((item) => ((0, utils_1.is)('function', item.renderIconButton) && item.renderIconButton(item.value, item.value === filter, onChangeFilter))) }))] }), openedOption === 'crop' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', style: {
-                                            width: '100%'
-                                        } }, { children: [chips.map((item, index) => ((0, jsx_runtime_1.jsx)(Chip, Object.assign({ selected: aspectRatio === item.value, onClick: () => onChangeAspectRatio(item.value) }, ChipProps, { children: item.label }), index))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center', justify: 'center' }, { children: [(0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'left') : ((0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, color: 'default', version: 'text', size: 'small', min: 1, value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0], onChange: (valueNew) => onChangeAspectRatioCustom(+valueNew), increment: false, decrement: false, className: (0, style_react_1.classNames)([
-                                                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                                'onesy-ImageEdit-option-input'
-                                                            ],
-                                                            classes.optionInput
-                                                        ]), style: {
-                                                            width: 24
-                                                        } })), (0, jsx_runtime_1.jsx)(Type, { children: ":" }), (0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, aspectRatioCustom, onChangeAspectRatioCustom, 'right') : ((0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, color: 'default', version: 'text', size: 'small', min: 1, value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1], onChange: (valueNew) => onChangeAspectRatioCustom(+valueNew, false), increment: false, decrement: false, className: (0, style_react_1.classNames)([
-                                                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                                'onesy-ImageEdit-option-input'
-                                                            ],
-                                                            classes.optionInput
-                                                        ]), style: {
-                                                            width: 24
-                                                        } }))] }))] }))), openedOption === 'resize' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ direction: 'row', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                'onesy-ImageEdit-inputs'
-                                            ],
-                                            classes.inputs
-                                        ]) }, { children: [(0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'width') : ((0, jsx_runtime_1.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) => onChangeResize(valueNew) })), (0, utils_1.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : ((0, jsx_runtime_1.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) => onChangeResize(valueNew, false) }))] }))), openedOption === 'quality' && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 3, direction: 'row', align: 'center', style: {
-                                            width: '100%'
-                                        } }, { children: [(0, jsx_runtime_1.jsx)(Slider, Object.assign({ valueDefault: quality, value: quality, min: 1, max: 100, precision: 1, marks: [
-                                                    { value: 1 },
-                                                    { value: 50 },
-                                                    { value: 100 }
-                                                ], tooltip: true, onChange: onChangeQuality }, SliderProps, { className: (0, style_react_1.classNames)([
-                                                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                        'onesy-ImageEdit-slider'
-                                                    ],
-                                                    SliderProps.className,
-                                                    classes.slider
-                                                ]) })), (0, jsx_runtime_1.jsx)(NumericTextField, { tonal: tonal, color: 'default', version: 'text', size: 'small', min: 1, max: 100, value: quality, increment: false, decrement: false, onChange: (valueNew) => onChangeQuality(+valueNew), className: (0, style_react_1.classNames)([
-                                                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                        'onesy-ImageEdit-option-input'
-                                                    ],
-                                                    classes.optionInput
-                                                ]), style: {
-                                                    width: 34
-                                                } })] }))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                                'onesy-ImageEdit-action'
-                                            ],
-                                            classes.action
-                                        ]) }, { children: [(0, utils_1.is)('function', renderSave) ? renderSave(onSave) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Save') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', onClick: onSave }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconSave, {}) })) }))), (0, utils_1.is)('function', renderCancel) ? renderCancel(onSave) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Cancel') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', onClick: onCancel }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconCancel, {}) })) })))] }))] })), (0, jsx_runtime_1.jsx)(Divider, { color: 'inherit', className: (0, style_react_1.classNames)([
-                                    (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                        'onesy-ImageEdit-divider'
-                                    ],
-                                    classes.divider
-                                ]) })] })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ direction: 'column', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                'onesy-ImageEdit-options'
-                            ],
-                            classes.options
-                        ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', justify: 'flex-start' }, { children: [options.map((item, index) => ((0, utils_1.is)('function', renderOption) ? renderOption(item, open && (openOption === item.value), openOption) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: item.label }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'outlined', selected: open && (openedOption === item.value), onClick: () => openOption(item.value) }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(item.Icon, {}) })) }), index)))), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0, direction: 'row', align: 'center' }, { children: [downloadOption && (0, utils_1.is)('function', renderDownload) ? renderDownload(onDownload) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Download') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'text', onClick: onDownload }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconDownload, {}) })) }))), (0, utils_1.is)('function', renderOptionClear) ? renderOptionClear(onReset) : ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: l('Reset') }, TooltipProps, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ version: 'text', onClick: onReset }, IconButtonProps, { children: (0, jsx_runtime_1.jsx)(IconClear, {}) })) })))] }))] })) }))] }), children, meta && value && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Divider, { color: 'inherit', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                'onesy-ImageEdit-divider'
-                            ],
-                            classes.divider
-                        ]) }), (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 1, direction: 'row', align: 'center', justify: 'center', className: (0, style_react_1.classNames)([
-                            (0, utils_2.staticClassName)('ImageEdit', theme) && [
-                                'onesy-ImageEdit-meta'
-                            ],
-                            classes.meta
-                        ]) }, { children: [(0, jsx_runtime_1.jsxs)(Type, Object.assign({}, MetaTypeProps, { children: [l('Dimensions'), ": ", (_a = (!open ? value : valueCopy)) === null || _a === void 0 ? void 0 : _a.width, "x", (_b = (!open ? value : valueCopy)) === null || _b === void 0 ? void 0 : _b.height] })), (0, jsx_runtime_1.jsx)(Type, Object.assign({}, MetaTypeProps, { children: "\u00B7" })), (0, jsx_runtime_1.jsxs)(Type, Object.assign({}, MetaTypeProps, { children: [l('Size'), ": ", size] }))] }))] })] })));
+  }, []);
+  _react.default.useEffect(() => {
+    if (image instanceof HTMLCanvasElement) onChange(image);else if ((0, _utils.is)('string', image)) makeImage(image);
+  }, [image]);
+  _react.default.useEffect(() => {
+    const valueToUse = !open ? refs.value.current : refs.valueCopy.current;
+    if (valueToUse) {
+      var _refs$canvasMain$curr;
+      refs.canvasMain.current.width = valueToUse.width;
+      refs.canvasMain.current.height = valueToUse.height;
+      (_refs$canvasMain$curr = refs.canvasMain.current) === null || _refs$canvasMain$curr === void 0 || _refs$canvasMain$curr.getContext('2d').drawImage(valueToUse, 0, 0, valueToUse.width, valueToUse.height);
+      updateSize();
+    }
+  }, [value, valueCopy, open]);
+  _react.default.useEffect(() => {
+    if (init) {
+      if (value_ !== value) onChange(value_);
+    }
+  }, [value_]);
+  _react.default.useEffect(() => {
+    if (init) {
+      if (valueCopy_ !== valueCopy) onChangeCopy(valueCopy_);
+    }
+  }, [valueCopy_]);
+  const applyAllFilters = canvas => {
+    let valueCopy__ = refs.valueCopy.current;
+
+    // Update filters
+    Object.keys(refs.filterValuesCopy.current).forEach(item => {
+      const filterValue_ = filters.find(item_ => item_.value === item);
+      if (filterValue_) {
+        const {
+          method
+        } = filterValue_;
+        if ((0, _utils.is)('function', method) && refs.filterValuesCopy.current[item] !== undefined) valueCopy__ = method(refs.filterValuesCopy.current[item], canvas, valueCopy__);
+      }
+    });
+  };
+  const applyAllFiltersDebounced = _react.default.useCallback((0, _utils.debounce)(applyAllFilters, 140), []);
+  _react.default.useEffect(() => {
+    applyAllFiltersDebounced(refs.canvasMain.current);
+  }, [filterValuesCopy]);
+  const makeImage = async (valueNew = refs.value.current) => {
+    var _refs$root$current2;
+    const img = await (0, _utils2.image)(valueNew);
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current2 = refs.root.current) === null || _refs$root$current2 === void 0 ? void 0 : _refs$root$current2.ownerDocument) || window.document : undefined;
+    const canvas = rootDocument.createElement('canvas');
+    canvas.width = img.width;
+    canvas.height = img.height;
+    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+
+    // Image
+    onChange(canvas);
+
+    // Image copy
+    const copy = rootDocument.createElement('canvas');
+    copy.width = canvas.width;
+    copy.height = canvas.height;
+    copy.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
+    onChangeCopy(copy);
+  };
+  const updateResize = (0, _utils.debounce)(async (width, height) => {
+    var _refs$root$current3;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current3 = refs.root.current) === null || _refs$root$current3 === void 0 ? void 0 : _refs$root$current3.ownerDocument) || window.document : undefined;
+
+    // Update value copy
+    const canvas = rootDocument.createElement('canvas');
+    if (width > 1 && height > 1) {
+      canvas.width = width;
+      canvas.height = height;
+      canvas.getContext('2d').drawImage(refs.value.current, 0, 0, width, height);
+
+      // Value copy
+      onChangeCopy(canvas);
+
+      // Update the canvas value
+      refs.canvasMain.current.width = width;
+      refs.canvasMain.current.height = height;
+      refs.canvasMain.current.getContext('2d').drawImage(value, 0, 0, width, height);
+
+      // Update size
+      updateSize();
+    }
+  }, 140);
+  const onFilterSliderChange = (valueNew, valueFilter) => {
+    setFilterValuesCopy(values_ => _objectSpread(_objectSpread({}, values_), {}, {
+      [valueFilter]: valueNew
+    }));
+  };
+  const onChangeFilter = valueNew => {
+    // If moving to another filter or closing current one
+    // clean up previous one filter for mainCanvas
+    if (filter === valueNew) setFilter('');else setFilter(valueNew);
+  };
+  const onChangeAspectRatioCustom = (valueNew_, left_ = true) => {
+    const valueNew = !valueNew_ ? 1 : valueNew_;
+    let left = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0]) || 1;
+    let right = (aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1]) || 1;
+    left_ ? left = valueNew : right = valueNew;
+    setAspectRatioCustom([left, right]);
+    onChangeAspectRatio(left / right);
+  };
+  const onChangeAspectRatio = valueNew => {
+    if (aspectRatio === valueNew) setAspectRatio('');else setAspectRatio(valueNew);
+  };
+  const onChangeResize = async (valueNew, width_ = true) => {
+    let width;
+    let height;
+    if (!refs.resizeAspectRatio.current) {
+      if (width_) {
+        width = +valueNew;
+        height = resize === null || resize === void 0 ? void 0 : resize[1];
+      } else {
+        width = resize === null || resize === void 0 ? void 0 : resize[0];
+        height = +valueNew;
+      }
+    } else {
+      const aspectRatio_ = (value === null || value === void 0 ? void 0 : value.width) / (value === null || value === void 0 ? void 0 : value.height);
+      if (width_) {
+        width = +valueNew;
+        height = valueNew / aspectRatio_;
+      } else {
+        height = +valueNew;
+        width = height * aspectRatio_;
+      }
+    }
+    width = (0, _utils.clamp)(width, 0);
+    height = (0, _utils.clamp)(height, 0);
+    setResize([width, height]);
+    await updateResize(width, height);
+  };
+  const updateQuality = (0, _utils.debounce)(async valueNew => {
+    var _refs$root$current4, _refs$canvasMain$curr2;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current4 = refs.root.current) === null || _refs$root$current4 === void 0 ? void 0 : _refs$root$current4.ownerDocument) || window.document : undefined;
+
+    // Update copy value
+    const uri = value.toDataURL('image/jpeg', valueNew / 100);
+    const img = await (0, _utils2.image)(uri);
+    const canvas = rootDocument.createElement('canvas');
+    canvas.width = img.width;
+    canvas.height = img.height;
+    canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+    onChangeCopy(canvas);
+
+    // Update the canvas value
+    refs.canvasMain.current.width = canvas.width;
+    refs.canvasMain.current.height = canvas.height;
+    (_refs$canvasMain$curr2 = refs.canvasMain.current) === null || _refs$canvasMain$curr2 === void 0 || _refs$canvasMain$curr2.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
+
+    // Update size
+    updateSize();
+  }, 40);
+  const onChangeQuality = async valueNew => {
+    setQuality(valueNew);
+    await updateQuality(valueNew);
+  };
+  const onChange = valueNew => {
+    // Update inner or controlled
+    if (!props.hasOwnProperty('value')) setValue(valueNew);
+    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
+  };
+  const onChangeCopy = valueNew => {
+    // Update inner or controlled
+    if (!props.hasOwnProperty('valueCopy')) setValueCopy(valueNew);
+    if ((0, _utils.is)('function', onChangeCopy_)) onChangeCopy_(valueNew);
+  };
+  const onReset = (imageReset = true, valueCopyReset = true, resizeReset = true) => {
+    var _refs$root$current5;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current5 = refs.root.current) === null || _refs$root$current5 === void 0 ? void 0 : _refs$root$current5.ownerDocument) || window.document : undefined;
+    setOpen(false);
+    setQuality(100);
+    setAspectRatio('');
+    setAspectRatioCustom([1, 1]);
+    setSelection('');
+    setFilter('');
+    setFilterValuesCopy(_objectSpread({}, filterValues));
+    if (resizeReset) setResize([value === null || value === void 0 ? void 0 : value.width, value === null || value === void 0 ? void 0 : value.height]);
+    if (valueCopyReset) {
+      const canvas = rootDocument.createElement('canvas');
+      canvas.width = refs.value.current.width;
+      canvas.height = refs.value.current.height;
+      canvas.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
+      onChangeCopy(canvas);
+    }
+    if (imageReset) {
+      setFilterValues({});
+      setFilterValuesCopy({});
+      makeImage(image);
+    }
+  };
+  const openOption = valueNew => {
+    setOpenedOption(valueNew);
+    if (open && openedOption === valueNew) {
+      setOpen(false);
+      onReset(false);
+    } else if (!open) setOpen(true);
+  };
+  const onSave = () => {
+    var _refs$root$current6, _refs$canvasMain$curr3;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current6 = refs.root.current) === null || _refs$root$current6 === void 0 ? void 0 : _refs$root$current6.ownerDocument) || window.document : undefined;
+
+    // Make value copy into value
+    let canvas = rootDocument.createElement('canvas');
+    canvas.width = refs.valueCopy.current.width;
+    canvas.height = refs.valueCopy.current.height;
+    canvas.getContext('2d').drawImage(refs.valueCopy.current, 0, 0, refs.valueCopy.current.width, refs.valueCopy.current.height);
+
+    // Update crop
+    if (openedOption === 'crop' && selection) {
+      // Crop the canvas
+      canvas.width = selection.width;
+      canvas.height = selection.height;
+      canvas = (0, _utils.canvasCrop)(refs.valueCopy.current, selection.left, selection.top, selection.width, selection.height);
+    }
+
+    // Update filters
+    setFilterValues(_objectSpread({}, filterValuesCopy));
+    applyAllFilters(canvas);
+
+    // Update the main canvas value
+    refs.canvasMain.current.width = canvas.width;
+    refs.canvasMain.current.height = canvas.height;
+    (_refs$canvasMain$curr3 = refs.canvasMain.current) === null || _refs$canvasMain$curr3 === void 0 || _refs$canvasMain$curr3.getContext('2d').drawImage(canvas, 0, 0, canvas.width, canvas.height);
+
+    // Update value
+    onChange(canvas);
+    const canvasCopy = rootDocument.createElement('canvas');
+    canvasCopy.width = canvas.width;
+    canvasCopy.height = canvas.height;
+    canvasCopy.getContext('2d').drawImage(canvas, 0, 0, canvasCopy.width, canvasCopy.height);
+
+    // Update value copy
+    onChangeCopy(canvasCopy);
+
+    // Reset
+    onReset(false, false, false);
+  };
+  const onDownload = () => {
+    // Download the image from canvas datauri
+    // of the image type and quality, name
+    const uri = refs.value.current.toDataURL(type);
+    (0, _utils.download)(name, uri, type);
+  };
+  const onCancel = () => {
+    var _refs$root$current7, _refs$value$current, _refs$value$current2, _refs$canvasMain$curr4;
+    const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current7 = refs.root.current) === null || _refs$root$current7 === void 0 ? void 0 : _refs$root$current7.ownerDocument) || window.document : undefined;
+
+    // Reset to unopen
+    onReset(false);
+
+    // Make value copy into value
+    const canvas = rootDocument.createElement('canvas');
+    canvas.width = refs.value.current.width;
+    canvas.height = refs.value.current.height;
+    canvas.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
+    onChangeCopy(canvas);
+
+    // Update the main canvas value
+    refs.canvasMain.current.width = (_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current.width;
+    refs.canvasMain.current.height = (_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.height;
+    (_refs$canvasMain$curr4 = refs.canvasMain.current) === null || _refs$canvasMain$curr4 === void 0 || _refs$canvasMain$curr4.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
+  };
+  let filters = _react.default.useMemo(() => [{
+    label: l('Brightness'),
+    Icon: IconBrightness,
+    value: 'brightness',
+    method: _utils2.canvasBrightness,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value__,
+      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__, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value__,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      min: -100,
+      max: 100,
+      precision: 1,
+      marks: [{
+        value: -100,
+        label: '-100'
+      }, {
+        value: 0,
+        label: '0'
+      }, {
+        value: 100,
+        label: '100'
+      }],
+      labels: true,
+      tooltip: true,
+      onChange: valueNew => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      }
+    }, SliderProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+    }))
+  }, {
+    label: l('Contrast'),
+    Icon: IconContrast,
+    value: 'contrast',
+    method: _utils2.canvasContrast,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value__,
+      name: l('Contrast')
+    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      version: "outlined",
+      selected: selected_,
+      onClick: () => onChangeFilter_(value__)
+    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconContrast, null))),
+    renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value__,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      min: -100,
+      max: 100,
+      precision: 1,
+      marks: [{
+        value: -100,
+        label: '-100'
+      }, {
+        value: 0,
+        label: '0'
+      }, {
+        value: 100,
+        label: '100'
+      }],
+      labels: true,
+      tooltip: true,
+      onChange: valueNew => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      }
+    }, SliderProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+    }))
+  }, {
+    label: l('Saturation'),
+    Icon: IconSaturation,
+    value: 'saturation',
+    method: _utils2.canvasSaturation,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value__,
+      name: l('Saturation')
+    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      version: "outlined",
+      selected: selected_,
+      onClick: () => onChangeFilter_(value__)
+    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconSaturation, null))),
+    renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value__,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      min: -100,
+      max: 100,
+      precision: 1,
+      marks: [{
+        value: -100,
+        label: '-100'
+      }, {
+        value: 0,
+        label: '0'
+      }, {
+        value: 100,
+        label: '100'
+      }],
+      labels: true,
+      tooltip: true,
+      onChange: valueNew => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      }
+    }, SliderProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+    }))
+  }, {
+    label: l('Fade'),
+    Icon: IconFade,
+    value: 'fade',
+    method: _utils2.canvasFade,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value__,
+      name: l('Fade')
+    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      version: "outlined",
+      selected: selected_,
+      onClick: () => onChangeFilter_(value__)
+    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconFade, null))),
+    renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value__,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      min: 0,
+      max: 100,
+      precision: 1,
+      marks: [{
+        value: 0,
+        label: '0'
+      }, {
+        value: 100,
+        label: '100'
+      }],
+      labels: true,
+      tooltip: true,
+      onChange: valueNew => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      }
+    }, SliderProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+    }))
+  }, {
+    label: l('Invert'),
+    Icon: IconInvert,
+    value: 'invert',
+    method: _utils2.canvasInvert,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value__,
+      name: l('Invert')
+    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      version: "outlined",
+      selected: selected_,
+      onClick: () => onChangeFilter_(value__)
+    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconInvert, null))),
+    renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value__,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      min: 0,
+      max: 1,
+      precision: 1,
+      marks: [{
+        value: 0,
+        label: 'Not inverted'
+      }, {
+        value: 1,
+        label: 'Inverted'
+      }],
+      labels: true,
+      tooltip: true,
+      onChange: valueNew => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      }
+    }, SliderProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+    }))
+  }, {
+    label: l('Old photo'),
+    Icon: IconOldPhoto,
+    value: 'old_photo',
+    method: _utils2.canvasOldPhoto,
+    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value__,
+      name: l('Old photo')
+    }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+      version: "outlined",
+      selected: selected_,
+      onClick: () => onChangeFilter_(value__)
+    }, IconButtonProps), /*#__PURE__*/_react.default.createElement(IconOldPhoto, null))),
+    renderSlider: (value__, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value__,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value__]) || 0,
+      min: -40,
+      max: 40,
+      precision: 1,
+      marks: [{
+        value: -40,
+        label: '-40'
+      }, {
+        value: 0,
+        label: 'No filter'
+      }, {
+        value: 40,
+        label: '40'
+      }],
+      labels: true,
+      tooltip: true,
+      onChange: valueNew => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      }
+    }, SliderProps, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
+    }))
+  }, ...(filters_ || [])], [filters_]);
+
+  // Only filters
+  if ((0, _utils.is)('array', onlyFilters)) filters = filters.filter(item => onlyFilters.includes(item.value));
+  const ImageCropProps = _objectSpread({
+    gridLines: true
+  }, ImageCropProps_);
+  const TooltipProps = _objectSpread({
+    position: 'bottom',
+    interactive: false
+  }, TooltipProps_);
+  const IconButtonProps = _objectSpread({
+    tonal,
+    color: 'inherit'
+  }, IconButtonProps_);
+  const SliderProps = _objectSpread({
+    tonal: false,
+    color: 'default'
+  }, SliderProps_);
+  const ChipProps = _objectSpread({
+    size: 'small'
+  }, ChipProps_);
+  const chips = [{
+    label: '1:1',
+    value: 1 / 1
+  }, {
+    label: '4:3',
+    value: 4 / 3
+  }, {
+    label: '16:9',
+    value: 16 / 9
+  }];
+  const options = [filtersOption && {
+    label: l('Filters'),
+    value: 'filters',
+    Icon: IconFilters
+  }, cropOption && {
+    label: l('Crop'),
+    value: 'crop',
+    Icon: IconCrop
+  }, resizeOption && {
+    label: l('Resize'),
+    value: 'resize',
+    Icon: IconResize
+  }, qualityOption && {
+    label: l('Quality'),
+    value: 'quality',
+    Icon: IconQuality
+  }].filter(Boolean);
+  const MetaTypeProps = {
+    version: 'b3'
+  };
+  const filterValue = filters.find(item_ => item_.value === filter);
+  return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    ref: item => {
+      if (ref) {
+        if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    gap: 0,
+    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 => (0, _utils.is)('function', item.renderIconButton) && item.renderIconButton(item.value, item.value === filter, onChangeFilter)))), openedOption === 'crop' && /*#__PURE__*/_react.default.createElement(Line, {
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "center",
+    style: {
+      width: '100%'
+    }
+  }, chips.map((item, index) => /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
+    key: index,
+    selected: aspectRatio === item.value,
+    onClick: () => onChangeAspectRatio(item.value)
+  }, ChipProps), item.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 => onChangeAspectRatioCustom(+valueNew),
+    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 => onChangeAspectRatioCustom(+valueNew, 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 => onChangeResize(valueNew)
+  }), (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 => onChangeResize(valueNew, 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 => onChangeQuality(+valueNew),
+    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, index) => (0, _utils.is)('function', renderOption) ? renderOption(item, open && openOption === item.value, openOption) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    key: index,
+    name: item.label
+  }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
+    version: "outlined",
+    selected: open && openedOption === item.value,
+    onClick: () => openOption(item.value)
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(item.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))));
 });
 ImageEdit.displayName = 'onesy-ImageEdit';
-exports.default = ImageEdit;
+var _default = exports.default = ImageEdit;