@onesy/ui-react 1.0.164 → 1.0.167

package/ImageEdit/ImageEdit.js

@@ -128,57 +128,21 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-ImageEdit'
 });
 const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _ref, _ref2;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _theme$elements7, _theme$elements8, _theme$elements9, _theme$elements0, _theme$elements1, _ref, _ref2;
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
-  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$elements0;
-    return (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ImageCrop) || _ImageCrop.default;
-  }, [theme]);
-  const Chip = _react.default.useMemo(() => {
-    var _theme$elements1;
-    return (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Chip) || _Chip.default;
-  }, [theme]);
+  const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyImageEdit) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
+  const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Type) || _Type.default;
+  const Surface = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Surface) || _Surface.default;
+  const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
+  const Tooltip = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Tooltip) || _Tooltip.default;
+  const Expand = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Expand) || _Expand.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Divider) || _Divider.default;
+  const Slider = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.Slider) || _Slider.default;
+  const NumericTextField = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.NumericTextField) || _NumericTextField.default;
+  const ImageCrop = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ImageCrop) || _ImageCrop.default;
+  const Chip = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Chip) || _Chip.default;
   const {
       tonal = true,
       color = 'primary',
@@ -353,48 +317,48 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       const filterValue_ = filters.find(item_ => item_.value === item);
       if (filterValue_) {
         const {
-          method
+          method: method_0
         } = filterValue_;
-        if ((0, _utils.is)('function', method) && refs.filterValuesCopy.current[item] !== undefined) valueCopy__ = method(refs.filterValuesCopy.current[item], canvas, valueCopy__);
+        if ((0, _utils.is)('function', method_0) && refs.filterValuesCopy.current[item] !== undefined) valueCopy__ = method_0(refs.filterValuesCopy.current[item], canvas, valueCopy__);
       }
     });
   };
-  const applyAllFiltersDebounced = _react.default.useCallback((0, _utils.debounce)(applyAllFilters, 140), []);
+  const applyAllFiltersDebounced = (0, _utils.debounce)(applyAllFilters, 140);
   _react.default.useEffect(() => {
     applyAllFiltersDebounced(refs.canvasMain.current);
   }, [filterValuesCopy]);
-  const makeImage = async (valueNew = refs.value.current) => {
+  const makeImage = async (valueNew_0 = 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);
+    const img = await (0, _utils2.image)(valueNew_0);
+    const rootDocument_0 = (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_0 = rootDocument_0.createElement('canvas');
+    canvas_0.width = img.width;
+    canvas_0.height = img.height;
+    canvas_0.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
 
     // Image
-    onChange(canvas);
+    onChange(canvas_0);
 
     // 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);
+    const copy = rootDocument_0.createElement('canvas');
+    copy.width = canvas_0.width;
+    copy.height = canvas_0.height;
+    copy.getContext('2d').drawImage(canvas_0, 0, 0, canvas_0.width, canvas_0.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;
+    const rootDocument_1 = (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');
+    const canvas_1 = rootDocument_1.createElement('canvas');
     if (width > 1 && height > 1) {
-      canvas.width = width;
-      canvas.height = height;
-      canvas.getContext('2d').drawImage(refs.value.current, 0, 0, width, height);
+      canvas_1.width = width;
+      canvas_1.height = height;
+      canvas_1.getContext('2d').drawImage(refs.value.current, 0, 0, width, height);
 
       // Value copy
-      onChangeCopy(canvas);
+      onChangeCopy(canvas_1);
 
       // Update the canvas value
       refs.canvasMain.current.width = width;
@@ -405,91 +369,91 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       updateSize();
     }
   }, 140);
-  const onFilterSliderChange = (valueNew, valueFilter) => {
+  const onFilterSliderChange = (valueNew_1, valueFilter) => {
     setFilterValuesCopy(values_ => _objectSpread(_objectSpread({}, values_), {}, {
-      [valueFilter]: valueNew
+      [valueFilter]: valueNew_1
     }));
   };
-  const onChangeFilter = valueNew => {
+  const onChangeFilter = valueNew_2 => {
     // If moving to another filter or closing current one
     // clean up previous one filter for mainCanvas
-    if (filter === valueNew) setFilter('');else setFilter(valueNew);
+    if (filter === valueNew_2) setFilter('');else setFilter(valueNew_2);
   };
   const onChangeAspectRatioCustom = (valueNew_, left_ = true) => {
-    const valueNew = !valueNew_ ? 1 : valueNew_;
+    const valueNew_3 = !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;
+    left_ ? left = valueNew_3 : right = valueNew_3;
     setAspectRatioCustom([left, right]);
     onChangeAspectRatio(left / right);
   };
-  const onChangeAspectRatio = valueNew => {
-    if (aspectRatio === valueNew) setAspectRatio('');else setAspectRatio(valueNew);
+  const onChangeAspectRatio = valueNew_4 => {
+    if (aspectRatio === valueNew_4) setAspectRatio('');else setAspectRatio(valueNew_4);
   };
-  const onChangeResize = async (valueNew, width_ = true) => {
-    let width;
-    let height;
+  const onChangeResize = async (valueNew_5, width_ = true) => {
+    let width_0;
+    let height_0;
     if (!refs.resizeAspectRatio.current) {
       if (width_) {
-        width = +valueNew;
-        height = resize === null || resize === void 0 ? void 0 : resize[1];
+        width_0 = +valueNew_5;
+        height_0 = resize === null || resize === void 0 ? void 0 : resize[1];
       } else {
-        width = resize === null || resize === void 0 ? void 0 : resize[0];
-        height = +valueNew;
+        width_0 = resize === null || resize === void 0 ? void 0 : resize[0];
+        height_0 = +valueNew_5;
       }
     } 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_;
+        width_0 = +valueNew_5;
+        height_0 = valueNew_5 / aspectRatio_;
       } else {
-        height = +valueNew;
-        width = height * aspectRatio_;
+        height_0 = +valueNew_5;
+        width_0 = height_0 * aspectRatio_;
       }
     }
-    width = (0, _utils.clamp)(width, 0);
-    height = (0, _utils.clamp)(height, 0);
-    setResize([width, height]);
-    await updateResize(width, height);
+    width_0 = (0, _utils.clamp)(width_0, 0);
+    height_0 = (0, _utils.clamp)(height_0, 0);
+    setResize([width_0, height_0]);
+    await updateResize(width_0, height_0);
   };
-  const updateQuality = (0, _utils.debounce)(async valueNew => {
+  const updateQuality = (0, _utils.debounce)(async valueNew_6 => {
     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;
+    const rootDocument_2 = (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);
+    const uri_0 = value.toDataURL('image/jpeg', valueNew_6 / 100);
+    const img_0 = await (0, _utils2.image)(uri_0);
+    const canvas_2 = rootDocument_2.createElement('canvas');
+    canvas_2.width = img_0.width;
+    canvas_2.height = img_0.height;
+    canvas_2.getContext('2d').drawImage(img_0, 0, 0, img_0.width, img_0.height);
+    onChangeCopy(canvas_2);
 
     // 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);
+    refs.canvasMain.current.width = canvas_2.width;
+    refs.canvasMain.current.height = canvas_2.height;
+    (_refs$canvasMain$curr2 = refs.canvasMain.current) === null || _refs$canvasMain$curr2 === void 0 || _refs$canvasMain$curr2.getContext('2d').drawImage(canvas_2, 0, 0, canvas_2.width, canvas_2.height);
 
     // Update size
     updateSize();
   }, 40);
-  const onChangeQuality = async valueNew => {
-    setQuality(valueNew);
-    await updateQuality(valueNew);
+  const onChangeQuality = async valueNew_7 => {
+    setQuality(valueNew_7);
+    await updateQuality(valueNew_7);
   };
-  const onChange = valueNew => {
+  const onChange = valueNew_8 => {
     // Update inner or controlled
-    if (!props.hasOwnProperty('value')) setValue(valueNew);
-    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
+    if (!props.hasOwnProperty('value')) setValue(valueNew_8);
+    if ((0, _utils.is)('function', onChange_)) onChange_(valueNew_8);
   };
-  const onChangeCopy = valueNew => {
+  const onChangeCopy = valueNew_9 => {
     // Update inner or controlled
-    if (!props.hasOwnProperty('valueCopy')) setValueCopy(valueNew);
-    if ((0, _utils.is)('function', onChangeCopy_)) onChangeCopy_(valueNew);
+    if (!props.hasOwnProperty('valueCopy')) setValueCopy(valueNew_9);
+    if ((0, _utils.is)('function', onChangeCopy_)) onChangeCopy_(valueNew_9);
   };
   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;
+    const rootDocument_3 = (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('');
@@ -499,11 +463,11 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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);
+      const canvas_3 = rootDocument_3.createElement('canvas');
+      canvas_3.width = refs.value.current.width;
+      canvas_3.height = refs.value.current.height;
+      canvas_3.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
+      onChangeCopy(canvas_3);
     }
     if (imageReset) {
       setFilterValues({});
@@ -511,46 +475,46 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       makeImage(image);
     }
   };
-  const openOption = valueNew => {
-    setOpenedOption(valueNew);
-    if (open && openedOption === valueNew) {
+  const openOption = valueNew_10 => {
+    setOpenedOption(valueNew_10);
+    if (open && openedOption === valueNew_10) {
       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;
+    const rootDocument_4 = (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);
+    let canvas_4 = rootDocument_4.createElement('canvas');
+    canvas_4.width = refs.valueCopy.current.width;
+    canvas_4.height = refs.valueCopy.current.height;
+    canvas_4.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);
+      canvas_4.width = selection.width;
+      canvas_4.height = selection.height;
+      canvas_4 = (0, _utils.canvasCrop)(refs.valueCopy.current, selection.left, selection.top, selection.width, selection.height);
     }
 
     // Update filters
     setFilterValues(_objectSpread({}, filterValuesCopy));
-    applyAllFilters(canvas);
+    applyAllFilters(canvas_4);
 
     // 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);
+    refs.canvasMain.current.width = canvas_4.width;
+    refs.canvasMain.current.height = canvas_4.height;
+    (_refs$canvasMain$curr3 = refs.canvasMain.current) === null || _refs$canvasMain$curr3 === void 0 || _refs$canvasMain$curr3.getContext('2d').drawImage(canvas_4, 0, 0, canvas_4.width, canvas_4.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);
+    onChange(canvas_4);
+    const canvasCopy = rootDocument_4.createElement('canvas');
+    canvasCopy.width = canvas_4.width;
+    canvasCopy.height = canvas_4.height;
+    canvasCopy.getContext('2d').drawImage(canvas_4, 0, 0, canvasCopy.width, canvasCopy.height);
 
     // Update value copy
     onChangeCopy(canvasCopy);
@@ -561,22 +525,22 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   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 uri_1 = refs.value.current.toDataURL(type);
+    (0, _utils.download)(name, uri_1, 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;
+    const rootDocument_5 = (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);
+    const canvas_5 = rootDocument_5.createElement('canvas');
+    canvas_5.width = refs.value.current.width;
+    canvas_5.height = refs.value.current.height;
+    canvas_5.getContext('2d').drawImage(refs.value.current, 0, 0, refs.value.current.width, refs.value.current.height);
+    onChangeCopy(canvas_5);
 
     // 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;
@@ -596,10 +560,10 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       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,
+    renderSlider: (value___0, filterValuesCopy_, onFilterSliderChange_) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value___0,
+      valueDefault: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
+      value: (filterValuesCopy_ === null || filterValuesCopy_ === void 0 ? void 0 : filterValuesCopy_[value___0]) || 0,
       min: -100,
       max: 100,
       precision: 1,
@@ -615,8 +579,8 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }],
       labels: true,
       tooltip: true,
-      onChange: valueNew => {
-        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      onChange: valueNew_11 => {
+        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew_11, value___0);
       }
     }, SliderProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
@@ -626,18 +590,18 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Icon: IconContrast,
     value: 'contrast',
     method: _utils2.canvasContrast,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value__,
+    renderIconButton: (value___1, selected__0, onChangeFilter__0) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value___1,
       name: l('Contrast')
     }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
       version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
+      selected: selected__0,
+      onClick: () => onChangeFilter__0(value___1)
     }, 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,
+    renderSlider: (value___2, filterValuesCopy__0, onFilterSliderChange__0) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value___2,
+      valueDefault: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
+      value: (filterValuesCopy__0 === null || filterValuesCopy__0 === void 0 ? void 0 : filterValuesCopy__0[value___2]) || 0,
       min: -100,
       max: 100,
       precision: 1,
@@ -653,8 +617,8 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }],
       labels: true,
       tooltip: true,
-      onChange: valueNew => {
-        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      onChange: valueNew_12 => {
+        if ((0, _utils.is)('function', onFilterSliderChange__0)) onFilterSliderChange__0(valueNew_12, value___2);
       }
     }, SliderProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
@@ -664,18 +628,18 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Icon: IconSaturation,
     value: 'saturation',
     method: _utils2.canvasSaturation,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value__,
+    renderIconButton: (value___3, selected__1, onChangeFilter__1) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value___3,
       name: l('Saturation')
     }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
       version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
+      selected: selected__1,
+      onClick: () => onChangeFilter__1(value___3)
     }, 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,
+    renderSlider: (value___4, filterValuesCopy__1, onFilterSliderChange__1) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value___4,
+      valueDefault: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
+      value: (filterValuesCopy__1 === null || filterValuesCopy__1 === void 0 ? void 0 : filterValuesCopy__1[value___4]) || 0,
       min: -100,
       max: 100,
       precision: 1,
@@ -691,8 +655,8 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }],
       labels: true,
       tooltip: true,
-      onChange: valueNew => {
-        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      onChange: valueNew_13 => {
+        if ((0, _utils.is)('function', onFilterSliderChange__1)) onFilterSliderChange__1(valueNew_13, value___4);
       }
     }, SliderProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
@@ -702,18 +666,18 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Icon: IconFade,
     value: 'fade',
     method: _utils2.canvasFade,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value__,
+    renderIconButton: (value___5, selected__2, onChangeFilter__2) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value___5,
       name: l('Fade')
     }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
       version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
+      selected: selected__2,
+      onClick: () => onChangeFilter__2(value___5)
     }, 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,
+    renderSlider: (value___6, filterValuesCopy__2, onFilterSliderChange__2) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value___6,
+      valueDefault: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
+      value: (filterValuesCopy__2 === null || filterValuesCopy__2 === void 0 ? void 0 : filterValuesCopy__2[value___6]) || 0,
       min: 0,
       max: 100,
       precision: 1,
@@ -726,8 +690,8 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }],
       labels: true,
       tooltip: true,
-      onChange: valueNew => {
-        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      onChange: valueNew_14 => {
+        if ((0, _utils.is)('function', onFilterSliderChange__2)) onFilterSliderChange__2(valueNew_14, value___6);
       }
     }, SliderProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
@@ -737,18 +701,18 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Icon: IconInvert,
     value: 'invert',
     method: _utils2.canvasInvert,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value__,
+    renderIconButton: (value___7, selected__3, onChangeFilter__3) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value___7,
       name: l('Invert')
     }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
       version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
+      selected: selected__3,
+      onClick: () => onChangeFilter__3(value___7)
     }, 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,
+    renderSlider: (value___8, filterValuesCopy__3, onFilterSliderChange__3) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value___8,
+      valueDefault: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
+      value: (filterValuesCopy__3 === null || filterValuesCopy__3 === void 0 ? void 0 : filterValuesCopy__3[value___8]) || 0,
       min: 0,
       max: 1,
       precision: 1,
@@ -761,8 +725,8 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }],
       labels: true,
       tooltip: true,
-      onChange: valueNew => {
-        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      onChange: valueNew_15 => {
+        if ((0, _utils.is)('function', onFilterSliderChange__3)) onFilterSliderChange__3(valueNew_15, value___8);
       }
     }, SliderProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
@@ -772,18 +736,18 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     Icon: IconOldPhoto,
     value: 'old_photo',
     method: _utils2.canvasOldPhoto,
-    renderIconButton: (value__, selected_, onChangeFilter_) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
-      key: value__,
+    renderIconButton: (value___9, selected__4, onChangeFilter__4) => /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      key: value___9,
       name: l('Old photo')
     }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
       version: "outlined",
-      selected: selected_,
-      onClick: () => onChangeFilter_(value__)
+      selected: selected__4,
+      onClick: () => onChangeFilter__4(value___9)
     }, 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,
+    renderSlider: (value___10, filterValuesCopy__4, onFilterSliderChange__4) => /*#__PURE__*/_react.default.createElement(Slider, (0, _extends2.default)({
+      key: value___10,
+      valueDefault: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
+      value: (filterValuesCopy__4 === null || filterValuesCopy__4 === void 0 ? void 0 : filterValuesCopy__4[value___10]) || 0,
       min: -40,
       max: 40,
       precision: 1,
@@ -799,8 +763,8 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       }],
       labels: true,
       tooltip: true,
-      onChange: valueNew => {
-        if ((0, _utils.is)('function', onFilterSliderChange_)) onFilterSliderChange_(valueNew, value__);
+      onChange: valueNew_16 => {
+        if ((0, _utils.is)('function', onFilterSliderChange__4)) onFilterSliderChange__4(valueNew_16, value___10);
       }
     }, SliderProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-slider'], SliderProps.className, classes.slider])
@@ -808,7 +772,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   }, ...(filters_ || [])], [filters_]);
 
   // Only filters
-  if ((0, _utils.is)('array', onlyFilters)) filters = filters.filter(item => onlyFilters.includes(item.value));
+  if ((0, _utils.is)('array', onlyFilters)) filters = filters.filter(item_0 => onlyFilters.includes(item_0.value));
   const ImageCropProps = _objectSpread({
     gridLines: true
   }, ImageCropProps_);
@@ -857,13 +821,13 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const MetaTypeProps = {
     version: 'b3'
   };
-  const filterValue = filters.find(item_ => item_.value === filter);
+  const filterValue = filters.find(item__0 => item__0.value === filter);
   return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: item => {
+    ref: item_1 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_1);else if (ref !== null && ref !== void 0 && ref.current) ref.current = item_1;
       }
-      refs.root.current = item;
+      refs.root.current = item_1;
     },
     tonal: tonal,
     color: color,
@@ -920,7 +884,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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, {
+  }, filters.map(item_2 => (0, _utils.is)('function', item_2.renderIconButton) && item_2.renderIconButton(item_2.value, item_2.value === filter, onChangeFilter)))), openedOption === 'crop' && /*#__PURE__*/_react.default.createElement(Line, {
     gap: 1,
     direction: "row",
     align: "center",
@@ -928,11 +892,11 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     style: {
       width: '100%'
     }
-  }, chips.map((item, index) => /*#__PURE__*/_react.default.createElement(Chip, (0, _extends2.default)({
+  }, chips.map((item_3, 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, {
+    selected: aspectRatio === item_3.value,
+    onClick: () => onChangeAspectRatio(item_3.value)
+  }, ChipProps), item_3.label)), /*#__PURE__*/_react.default.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center",
@@ -944,7 +908,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     size: "small",
     min: 1,
     value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[0],
-    onChange: valueNew => onChangeAspectRatioCustom(+valueNew),
+    onChange: valueNew_17 => onChangeAspectRatioCustom(+valueNew_17),
     increment: false,
     decrement: false,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
@@ -958,7 +922,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     size: "small",
     min: 1,
     value: aspectRatioCustom === null || aspectRatioCustom === void 0 ? void 0 : aspectRatioCustom[1],
-    onChange: valueNew => onChangeAspectRatioCustom(+valueNew, false),
+    onChange: valueNew_18 => onChangeAspectRatioCustom(+valueNew_18, false),
     increment: false,
     decrement: false,
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
@@ -980,7 +944,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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)
+    onChange: valueNew_19 => onChangeResize(valueNew_19)
   }), (0, _utils.is)('function', renderInput) ? renderInput(value, valueCopy, resize, onChangeResize, 'height') : /*#__PURE__*/_react.default.createElement(NumericTextField, {
     tonal: tonal,
     name: l('Height'),
@@ -991,7 +955,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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)
+    onChange: valueNew_20 => onChangeResize(valueNew_20, false)
   })), openedOption === 'quality' && /*#__PURE__*/_react.default.createElement(Line, {
     gap: 3,
     direction: "row",
@@ -1026,7 +990,7 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     value: quality,
     increment: false,
     decrement: false,
-    onChange: valueNew => onChangeQuality(+valueNew),
+    onChange: valueNew_21 => onChangeQuality(+valueNew_21),
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('ImageEdit', theme) && ['onesy-ImageEdit-option-input'], classes.optionInput]),
     style: {
       width: 34
@@ -1059,14 +1023,14 @@ const ImageEdit = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     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
+  }, options.map((item_4, index_0) => (0, _utils.is)('function', renderOption) ? renderOption(item_4, open && openOption === item_4.value, openOption) : /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+    key: index_0,
+    name: item_4.label
   }, TooltipProps), /*#__PURE__*/_react.default.createElement(IconButton, (0, _extends2.default)({
     version: "outlined",
-    selected: open && openedOption === item.value,
-    onClick: () => openOption(item.value)
-  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(item.Icon, null)))), /*#__PURE__*/_react.default.createElement(Line, {
+    selected: open && openedOption === item_4.value,
+    onClick: () => openOption(item_4.value)
+  }, IconButtonProps), /*#__PURE__*/_react.default.createElement(item_4.Icon, null)))), /*#__PURE__*/_react.default.createElement(Line, {
     gap: 0,
     direction: "row",
     align: "center"