@onesy/ui-react 1.0.163 → 1.0.165

package/Drawing/Drawing.js

@@ -123,72 +123,25 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-Drawing'
 });
 const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
+  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, _theme$elements10, _theme$elements11, _theme$elements12, _theme$elements13;
   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.onesyDrawing) === 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 ListItem = _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.ListItem) || _ListItem.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 Tooltip = _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.Tooltip) || _Tooltip.default;
-  }, [theme]);
-  const Type = _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.Type) || _Type.default;
-  }, [theme]);
-  const Button = _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.Button) || _Button.default;
-  }, [theme]);
-  const Select = _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.Select) || _Select.default;
-  }, [theme]);
-  const NumericTextField = _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.NumericTextField) || _NumericTextField.default;
-  }, [theme]);
-  const ToggleButton = _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.ToggleButton) || _ToggleButton.default;
-  }, [theme]);
-  const ToggleButtons = _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.ToggleButtons) || _ToggleButtons.default;
-  }, [theme]);
-  const Divider = _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.Divider) || _Divider.default;
-  }, [theme]);
-  const ColorTextField = _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.ColorTextField) || _ColorTextField.default;
-  }, [theme]);
-  const Append = _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.Append) || _Append.default;
-  }, [theme]);
-  const Fade = _react.default.useMemo(() => {
-    var _theme$elements12;
-    return (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Fade) || _Fade.default;
-  }, [theme]);
-  const ClickListener = _react.default.useMemo(() => {
-    var _theme$elements13;
-    return (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.ClickListener) || _ClickListener.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.onesyDrawing) === 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 ListItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.ListItem) || _ListItem.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 Tooltip = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Tooltip) || _Tooltip.default;
+  const Type = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Type) || _Type.default;
+  const Button = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Button) || _Button.default;
+  const Select = (theme === null || theme === void 0 || (_theme$elements7 = theme.elements) === null || _theme$elements7 === void 0 ? void 0 : _theme$elements7.Select) || _Select.default;
+  const NumericTextField = (theme === null || theme === void 0 || (_theme$elements8 = theme.elements) === null || _theme$elements8 === void 0 ? void 0 : _theme$elements8.NumericTextField) || _NumericTextField.default;
+  const ToggleButton = (theme === null || theme === void 0 || (_theme$elements9 = theme.elements) === null || _theme$elements9 === void 0 ? void 0 : _theme$elements9.ToggleButton) || _ToggleButton.default;
+  const ToggleButtons = (theme === null || theme === void 0 || (_theme$elements0 = theme.elements) === null || _theme$elements0 === void 0 ? void 0 : _theme$elements0.ToggleButtons) || _ToggleButtons.default;
+  const Divider = (theme === null || theme === void 0 || (_theme$elements1 = theme.elements) === null || _theme$elements1 === void 0 ? void 0 : _theme$elements1.Divider) || _Divider.default;
+  const ColorTextField = (theme === null || theme === void 0 || (_theme$elements10 = theme.elements) === null || _theme$elements10 === void 0 ? void 0 : _theme$elements10.ColorTextField) || _ColorTextField.default;
+  const Append = (theme === null || theme === void 0 || (_theme$elements11 = theme.elements) === null || _theme$elements11 === void 0 ? void 0 : _theme$elements11.Append) || _Append.default;
+  const Fade = (theme === null || theme === void 0 || (_theme$elements12 = theme.elements) === null || _theme$elements12 === void 0 ? void 0 : _theme$elements12.Fade) || _Fade.default;
+  const ClickListener = (theme === null || theme === void 0 || (_theme$elements13 = theme.elements) === null || _theme$elements13 === void 0 ? void 0 : _theme$elements13.ClickListener) || _ClickListener.default;
   const {
       tonal = true,
       color = 'default',
@@ -285,9 +238,9 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       [property]: itemValue
     }));
   };
-  const updateOpen = (property, itemValue) => {
-    setOpen(values => _objectSpread(_objectSpread({}, values), {}, {
-      [property]: itemValue
+  const updateOpen = (property_0, itemValue_0) => {
+    setOpen(values_0 => _objectSpread(_objectSpread({}, values_0), {}, {
+      [property_0]: itemValue_0
     }));
   };
   _react.default.useEffect(() => {
@@ -311,38 +264,38 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       };
       update(valueMove);
     };
-    const onTouchMove = event => {
+    const onTouchMove = event_0 => {
       var _refs$svg$current2;
-      const x = event.touches[0].clientX;
-      const y = event.touches[0].clientY;
-      const rect = (_refs$svg$current2 = refs.svg.current) === null || _refs$svg$current2 === void 0 ? void 0 : _refs$svg$current2.getBoundingClientRect();
-      if (!rect) return;
+      const x_0 = event_0.touches[0].clientX;
+      const y_0 = event_0.touches[0].clientY;
+      const rect_0 = (_refs$svg$current2 = refs.svg.current) === null || _refs$svg$current2 === void 0 ? void 0 : _refs$svg$current2.getBoundingClientRect();
+      if (!rect_0) return;
       const {
-        x: xRoot,
-        y: yRoot
-      } = rect;
-      const valueMove = {
-        x: x - xRoot,
-        y: y - yRoot
+        x: xRoot_0,
+        y: yRoot_0
+      } = rect_0;
+      const valueMove_0 = {
+        x: x_0 - xRoot_0,
+        y: y_0 - yRoot_0
       };
-      update(valueMove);
+      update(valueMove_0);
     };
-    const update = valueNew => {
+    const update = valueNew_0 => {
       if (refs.mouseDown.current) {
         var _refs$value$current, _refs$value$current2;
         // Update
         // relative value from the previous one how much x and y moved
-        const x = valueNew === null || valueNew === void 0 ? void 0 : valueNew.x;
-        const y = valueNew === null || valueNew === void 0 ? void 0 : valueNew.y;
+        const x_1 = valueNew_0 === null || valueNew_0 === void 0 ? void 0 : valueNew_0.x;
+        const y_1 = valueNew_0 === null || valueNew_0 === void 0 ? void 0 : valueNew_0.y;
         const previous = (_refs$value$current = refs.value.current) === null || _refs$value$current === void 0 ? void 0 : _refs$value$current[((_refs$value$current2 = refs.value.current) === null || _refs$value$current2 === void 0 ? void 0 : _refs$value$current2.length) - 1];
         if (previous) {
-          if (!(x === 0 && y === 0)) {
-            previous.d += ` ${x},${y}`;
+          if (!(x_1 === 0 && y_1 === 0)) {
+            previous.d += ` ${x_1},${y_1}`;
             updateValue([...refs.value.current]);
           }
         }
       }
-      setMove(valueNew);
+      setMove(valueNew_0);
     };
     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('mouseup', onMouseUp);
@@ -372,34 +325,34 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       updateInputValues('height', viewBox.split(' ')[3]);
     }
   }, [viewBox]);
-  const onMouseDown = _react.default.useCallback(event => {
+  const onMouseDown = event_1 => {
     setMouseDown(true);
-    let x = event.touches ? event.touches[0].clientX : event.clientX;
-    let y = event.touches ? event.touches[0].clientY : event.clientY;
-    const rect = refs.svg.current.getBoundingClientRect();
-    x -= rect.x;
-    y -= rect.y;
+    let x_2 = event_1.touches ? event_1.touches[0].clientX : event_1.clientX;
+    let y_2 = event_1.touches ? event_1.touches[0].clientY : event_1.clientY;
+    const rect_1 = refs.svg.current.getBoundingClientRect();
+    x_2 -= rect_1.x;
+    y_2 -= rect_1.y;
     setMove({
-      x,
-      y
+      x: x_2,
+      y: y_2
     });
 
     // Create new value path
     updateValue([...(refs.value.current || []), {
-      d: `M ${x},${y} L ${x} ${y}`,
+      d: `M ${x_2},${y_2} L ${x_2} ${y_2}`,
       stroke: refs.inputValues.current.strokeColor,
       strokeWidth: refs.inputValues.current.strokeWidth
     }]);
-    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event);
-  }, []);
-  const onClear = _react.default.useCallback(() => {
+    if ((0, _utils.is)('function', onMouseDown_)) onMouseDown_(event_1);
+  };
+  const onClear = () => {
     updateValue([]);
     if ((0, _utils.is)('function', onClear_)) onClear_();
-  }, []);
-  const onDownload = _react.default.useCallback(async () => {
+  };
+  const onDownload = async () => {
     var _refs$download$curren;
     const svg = refs.svg.current;
-    const rect = svg.getBoundingClientRect();
+    const rect_2 = svg.getBoundingClientRect();
 
     // Clean up
     const clone = svg.cloneNode(true);
@@ -414,13 +367,13 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
         response: 'download',
         filter: ['.onesy-Drawing-pointer'],
         download: refs.download.current,
-        width: rect.width,
-        height: rect.height
+        width: rect_2.width,
+        height: rect_2.height
       });
     } catch (error) {}
     setLoading(false);
     if ((0, _utils.is)('function', onDownload_)) onDownload_();
-  }, []);
+  };
   const includes = (...args) => !(0, _utils.is)('array', exclude) || args.some(item => !exclude.includes(item));
 
   // updates toolbar
@@ -472,7 +425,7 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   const IconProps = _objectSpread({
     size: 'small'
   }, IconProps_);
-  const WrapperToggleButton = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
+  const WrapperToggleButton = /*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
     const {
         open: open_,
         label,
@@ -480,59 +433,60 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       } = props_,
       other_ = (0, _objectWithoutProperties2.default)(props_, _excluded2);
     return /*#__PURE__*/_react.default.createElement(Tooltip, (0, _extends2.default)({
+      ref: ref_,
       open: open_ !== undefined ? open_ : undefined,
       name: label
     }, TooltipProps), /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other_), children.props)));
-  }), []);
-  const WrapperAppend = _react.default.useCallback(props_ => {
+  });
+  const WrapperAppend = props__0 => {
     const {
-        open: open_,
+        open: open__0,
         element,
         anchorElement,
         onClose,
-        children
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded3);
+        children: children_0
+      } = props__0,
+      other__0 = (0, _objectWithoutProperties2.default)(props__0, _excluded3);
     return /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
-      open: open_,
+      open: open__0,
       element: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(Fade, {
-        in: open_,
+        in: open__0,
         add: true
       }, /*#__PURE__*/_react.default.cloneElement(element))),
       anchorElement: anchorElement,
       portal: true,
       alignment: "center",
       position: "bottom"
-    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(children, _objectSpread(_objectSpread({}, other_), children.props)));
-  }, []);
-  const PaletteItem = _react.default.useCallback(props_ => {
+    }, AppendProps), /*#__PURE__*/_react.default.cloneElement(children_0, _objectSpread(_objectSpread({}, other__0), children_0.props)));
+  };
+  const PaletteItem = props__1 => {
     const {
         color: color_
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded4);
+      } = props__1,
+      other__1 = (0, _objectWithoutProperties2.default)(props__1, _excluded4);
     return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-palette-item'], classes.paletteItem]),
       style: {
         background: color_
       }
-    }, other_));
-  }, []);
-  const Palette = _react.default.useCallback(/*#__PURE__*/_react.default.forwardRef((props_, ref_) => {
+    }, other__1));
+  };
+  const Palette = /*#__PURE__*/_react.default.forwardRef((props__2, ref__0) => {
     const {
         version: version_,
         onUpdate,
-        onClose
-      } = props_,
-      other_ = (0, _objectWithoutProperties2.default)(props_, _excluded5);
+        onClose: onClose_0
+      } = props__2,
+      other__2 = (0, _objectWithoutProperties2.default)(props__2, _excluded5);
     return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-      ref: ref_,
+      ref: ref__0,
       gap: 1,
       direction: "column",
       tonal: tonal,
       color: refs.props.current.color !== undefined ? refs.props.current.color : 'themed',
       Component: Surface,
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-palette'], classes.palette])
-    }, other_), /*#__PURE__*/_react.default.createElement(Line, {
+    }, other__2), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5
     }, /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
@@ -544,27 +498,27 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       color: "#000000",
       onClick: () => {
         onUpdate('#000000');
-        onClose();
+        onClose_0();
       }
     }), /*#__PURE__*/_react.default.createElement(PaletteItem, {
       color: "#ffffff",
       onClick: () => {
         onUpdate('#ffffff');
-        onClose();
+        onClose_0();
       }
-    })), Object.keys(_styleReact.colors).filter(item => !['black', 'white'].includes(item)).map((item, index) => /*#__PURE__*/_react.default.createElement(Line, {
+    })), Object.keys(_styleReact.colors).filter(item_0 => !['black', 'white'].includes(item_0)).map((item_1, index) => /*#__PURE__*/_react.default.createElement(Line, {
       key: index,
       gap: 0.5,
       direction: "row",
       style: {
         width: '100%'
       }
-    }, Object.keys(_styleReact.colors[item]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
+    }, Object.keys(_styleReact.colors[item_1]).map((item_, index_) => /*#__PURE__*/_react.default.createElement(PaletteItem, {
       key: index_,
-      color: _styleReact.colors[item][item_],
+      color: _styleReact.colors[item_1][item_],
       onClick: () => {
-        onUpdate(_styleReact.colors[item][item_]);
-        onClose();
+        onUpdate(_styleReact.colors[item_1][item_]);
+        onClose_0();
       }
     }))))), /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 0.5,
@@ -580,7 +534,7 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       version: "outlined",
       size: "small",
       value: refs.inputValues.current[version_],
-      onChange: valueNew => updateInputValues(version_, valueNew)
+      onChange: valueNew_1 => updateInputValues(version_, valueNew_1)
     }, ColorTextFieldProps, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-text-field-color'], ColorTextFieldProps === null || ColorTextFieldProps === void 0 ? void 0 : ColorTextFieldProps.className, classes.textFieldColor])
     })), /*#__PURE__*/_react.default.createElement(Button, {
@@ -590,10 +544,10 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       size: "small",
       onClick: () => {
         onUpdate(refs.inputValues.current[version_]);
-        onClose();
+        onClose_0();
       }
     }, l('Apply'))));
-  }), []);
+  });
   const valueNew_ = ((0, _utils.is)('array', value) ? value : [value]).filter(Boolean);
   const valueNewActive = mouseDown && valueNew_[valueNew_.length - 1];
   const circleStrokeWidth = +(valueNewActive ? valueNewActive.strokeWidth : refs.inputValues.current.strokeWidth);
@@ -655,11 +609,11 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     value: 8
   }];
   return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
-    ref: item => {
+    ref: item_2 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_2);else ref.current = item_2;
       }
-      refs.root.current = item;
+      refs.root.current = item_2;
     },
     tonal: tonal,
     color: color,
@@ -691,18 +645,18 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
     justify: "flex-start"
   }, includes('stroke-width') && /*#__PURE__*/_react.default.createElement(Select, (0, _extends2.default)({
     name: l('Stroke Width'),
-    valueDefault: stroke_width.find(item => String(item.value).includes('1')).value,
+    valueDefault: stroke_width.find(item_3 => String(item_3.value).includes('1')).value,
     value: inputValues['strokeWidth'],
-    onChange: valueNew => updateInputValues('strokeWidth', valueNew)
+    onChange: valueNew_2 => updateInputValues('strokeWidth', valueNew_2)
   }, SelectProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-select'], SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.className, classes.select]),
     style: {
       minWidth: '90px'
     }
-  }), stroke_width.map(item => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
-    key: item.value,
-    primary: item.label,
-    value: item.value,
+  }), stroke_width.map(item_4 => /*#__PURE__*/_react.default.createElement(ListItem, (0, _extends2.default)({
+    key: item_4.value,
+    primary: item_4.label,
+    value: item_4.value,
     button: true
   }, ListItemProps))))), includes('stroke-color') && /*#__PURE__*/_react.default.createElement(ToggleButtons, ToggleButtonsProps, includes('stroke-color') && /*#__PURE__*/_react.default.createElement(WrapperAppend, {
     open: refs.open.current.strokeColor,
@@ -712,7 +666,7 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       include: [refs.elements.strokeColor, refs.elements.strokeColor.current]
     }, /*#__PURE__*/_react.default.createElement(Palette, (0, _extends2.default)({
       onClose: () => updateOpen('strokeColor', false),
-      onUpdate: valueNew => updateInputValues('strokeColor', valueNew)
+      onUpdate: valueNew_3 => updateInputValues('strokeColor', valueNew_3)
     }, PaletteProps)))
   }, /*#__PURE__*/_react.default.createElement(WrapperToggleButton, {
     name: l('Stroke Color'),
@@ -749,7 +703,7 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       increment: false,
       decrement: false,
       value: refs.inputValues.current.widthInput,
-      onChange: valueNew => updateInputValues('widthInput', !valueNew ? 1 : valueNew)
+      onChange: valueNew_4 => updateInputValues('widthInput', !valueNew_4 ? 1 : valueNew_4)
     }), "\xD7", /*#__PURE__*/_react.default.createElement(NumericTextField, {
       name: l('Height'),
       tonal: tonal,
@@ -760,7 +714,7 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       increment: false,
       decrement: false,
       value: refs.inputValues.current.heightInput,
-      onChange: valueNew => updateInputValues('heightInput', !valueNew ? 1 : valueNew)
+      onChange: valueNew_5 => updateInputValues('heightInput', !valueNew_5 ? 1 : valueNew_5)
     })), /*#__PURE__*/_react.default.createElement(Line, {
       gap: 1,
       direction: "row",
@@ -833,9 +787,9 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
   }), /*#__PURE__*/_react.default.createElement(IconDownload, IconProps))))))), /*#__PURE__*/_react.default.createElement(Divider, (0, _extends2.default)({}, DividerProps, {
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Drawing', theme) && ['onesy-Drawing-divider'], DividerProps === null || DividerProps === void 0 ? void 0 : DividerProps.className, classes.divider, classes.divider_end])
   }))), /*#__PURE__*/_react.default.createElement("svg", {
-    ref: item => {
-      if (svgRef) svgRef.current = item;
-      refs.svg.current = item;
+    ref: item_5 => {
+      if (svgRef) svgRef.current = item_5;
+      refs.svg.current = item_5;
     },
     viewBox: refs.inputValues.current.viewBox,
     onMouseDown: onMouseDown,
@@ -845,10 +799,10 @@ const Drawing = /*#__PURE__*/_react.default.forwardRef((props__, ref) => {
       width: refs.inputValues.current.width,
       height: refs.inputValues.current.height
     }
-  }, valueNew_.map((item, index) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
-    key: index,
+  }, valueNew_.map((item_6, index_0) => /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
+    key: index_0,
     fill: "none"
-  }, item))), /*#__PURE__*/_react.default.createElement("circle", {
+  }, item_6))), /*#__PURE__*/_react.default.createElement("circle", {
     className: "onesy-Drawing-pointer",
     cx: move === null || move === void 0 ? void 0 : move.x,
     cy: move === null || move === void 0 ? void 0 : move.y,

package/DropZone/DropZone.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IFileChoose } from '../FileChoose/FileChoose';
 import { IElement, IVersion } from '../types';
-export type IDropZone = IFileChoose & {
+export declare type IDropZone = IFileChoose & {
     version?: IVersion;
     start?: IElement;
     dropText?: any;

package/DropZone/DropZone.js

@@ -51,33 +51,15 @@ const useStyle = (0, _styleReact.style)(theme => ({
   name: 'onesy-DropZone'
 });
 const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
-  var _ComponentProps, _WrapperProps;
+  var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _ComponentProps, _WrapperProps;
   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.onesyDropZone) === 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 FileChoose = _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.FileChoose) || _FileChoose.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 Type = _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.Type) || _Type.default;
-  }, [theme]);
-  const Interaction = _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.Interaction) || _Interaction.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.onesyDropZone) === 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 FileChoose = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.FileChoose) || _FileChoose.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 Type = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Type) || _Type.default;
+  const Interaction = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Interaction) || _Interaction.default;
   const {
       tonal = true,
       color = 'default',
@@ -147,7 +129,7 @@ const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       if (value_ !== refs.value.current) setValue(value_);
     }
   }, [value_]);
-  const onChange = _react.default.useCallback(valueNew_ => {
+  const onChange = valueNew_ => {
     let valueNew = valueNew_;
 
     // Allowed types
@@ -157,36 +139,36 @@ const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     if (refs.max.current) valueNew = valueNew.slice(0, refs.max.current);
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if ((0, _utils.is)('function', onChange_)) onChange_(valueNew);
-  }, []);
-  const onFocus = _react.default.useCallback(event => {
+  };
+  const onFocus = event_0 => {
     setFocus(true);
-    if ((0, _utils.is)('function', onFocus_)) onFocus_(event);
-  }, [onFocus_]);
-  const onBlur = _react.default.useCallback(event => {
+    if ((0, _utils.is)('function', onFocus_)) onFocus_(event_0);
+  };
+  const onBlur = event_1 => {
     setFocus(false);
-    if ((0, _utils.is)('function', onBlur_)) onBlur_(event);
-  }, [onBlur_]);
-  const onDrop = _react.default.useCallback(event => {
-    event.preventDefault();
+    if ((0, _utils.is)('function', onBlur_)) onBlur_(event_1);
+  };
+  const onDrop = event_2 => {
+    event_2.preventDefault();
     setDragOver(false);
-    const valueNew = Array.from(event.dataTransfer.files);
-    onChange(valueNew);
-    if ((0, _utils.is)('function', onDrop_)) onDrop_(event);
-  }, []);
-  const onDragEnter = _react.default.useCallback(event => {
-    event.preventDefault();
+    const valueNew_0 = Array.from(event_2.dataTransfer.files);
+    onChange(valueNew_0);
+    if ((0, _utils.is)('function', onDrop_)) onDrop_(event_2);
+  };
+  const onDragEnter = event_3 => {
+    event_3.preventDefault();
     setDragOver(true);
-    if ((0, _utils.is)('function', onDragEnter_)) onDragEnter_(event);
-  }, []);
-  const onDragLeave = _react.default.useCallback(event => {
-    event.preventDefault();
+    if ((0, _utils.is)('function', onDragEnter_)) onDragEnter_(event_3);
+  };
+  const onDragLeave = event_4 => {
+    event_4.preventDefault();
     setDragOver(false);
-    if ((0, _utils.is)('function', onDragLeave_)) onDragLeave_(event);
-  }, []);
-  const onDragOver = _react.default.useCallback(event => {
-    event.preventDefault();
-    if ((0, _utils.is)('function', onDragOver_)) onDragOver_(event);
-  }, []);
+    if ((0, _utils.is)('function', onDragLeave_)) onDragLeave_(event_4);
+  };
+  const onDragOver = event_5 => {
+    event_5.preventDefault();
+    if ((0, _utils.is)('function', onDragOver_)) onDragOver_(event_5);
+  };
   other.onDrop = onDrop;
   other.onDragEnter = onDragEnter;
   other.onDragLeave = onDragLeave;
@@ -200,11 +182,11 @@ const DropZone = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     ComponentProps = _objectSpread(_objectSpread({}, ComponentProps), other);
   }
   return /*#__PURE__*/_react.default.createElement(FileChoose, {
-    ref: item => {
+    ref: item_0 => {
       if (ref) {
-        if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
+        if ((0, _utils.is)('function', ref)) ref(item_0);else ref.current = item_0;
       }
-      refs.root.current = item;
+      refs.root.current = item_0;
     },
     inputRef: refs.input,
     valueDefault: valueDefault,

package/Emojis/Emojis.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import { IMenu } from '../Menu/Menu';
-export type IEmojiCategory = {
+export declare type IEmojiCategory = {
     name: string;
     groups: string[];
     icon: any;
 };
-export type IEmoji = {
+export declare type IEmoji = {
     alias: string | string[];
     unicode: string;
     category: string;
 };
-export type IEmojis = Omit<IMenu, 'onSelect'> & {
+export declare type IEmojis = Omit<IMenu, 'onSelect'> & {
     emojis?: IEmoji[];
     categories?: IEmojiCategory[];
     selected?: string[];