@yorab/react-paint 0.6.5 → 0.6.6

package/dist/components/Canvas.js

@@ -2,14 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -27,178 +23,172 @@ var _transform = require("../utils/transform");
 
 var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
 
-var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
+var _useDrawableCanvas = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
 
 var _icons = require("../constants/icons");
 
 var _tools = require("../types/tools");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var renderDrawCanvas = function renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape) {
-  var width = canvasSize.width,
-      height = canvasSize.height,
-      scaleRatio = canvasSize.scaleRatio;
+const renderDrawCanvas = (drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape) => {
+  const {
+    width,
+    height,
+    scaleRatio
+  } = canvasSize;
   drawCtx.clearRect(0, 0, width, height);
 
-  for (var i = shapes.length - 1; i >= 0; i--) {
+  for (let i = shapes.length - 1; i >= 0; i--) {
     if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
       (0, _draw.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
     }
   }
 };
 
-var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) {
-  var width = canvasSize.width,
-      height = canvasSize.height,
-      scaleRatio = canvasSize.scaleRatio;
+const renderSelectionCanvas = (selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) => {
+  const {
+    width,
+    height,
+    scaleRatio
+  } = canvasSize;
   selectionCtx.clearRect(0, 0, width, height);
   selectedShape && activeTool.type !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
-    scaleRatio: scaleRatio,
-    canvasOffset: canvasOffset,
-    selectionPadding: selectionPadding,
-    selectionWidth: selectionWidth,
-    selectionColor: selectionColor,
+    scaleRatio,
+    canvasOffset,
+    selectionPadding,
+    selectionWidth,
+    selectionColor,
     withAnchors: selectionMode.mode !== _Mode.SelectionModeLib.textedition
   });
 };
 
-var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasBox",
-  "class": "s14cny8z"
+  class: "s9czb9p"
 });
-var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasContainer",
-  "class": "s16bxms6"
+  class: "s1538eht"
 });
-var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+const StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledDrawCanvas",
-  "class": "spzzsat"
+  class: "s101qxdc"
 });
-var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
+const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledSelectionCanvas",
-  "class": "s1egrskk",
+  class: "sa4oq48",
   vars: {
-    "s1egrskk-0": [function (_ref) {
-      var cursor = _ref.cursor;
+    "sa4oq48-0": [_ref => {
+      let {
+        cursor
+      } = _ref;
       return cursor;
     }]
   }
 });
 
-var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
-  var withGrid = _ref2.withGrid,
-      canGrow = _ref2.canGrow,
-      _ref2$disabled = _ref2.disabled,
-      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-      canvasSize = _ref2.canvasSize,
-      shapes = _ref2.shapes,
-      addShape = _ref2.addShape,
-      updateSingleShape = _ref2.updateSingleShape,
-      selectedShape = _ref2.selectedShape,
-      setSelectedShape = _ref2.setSelectedShape,
-      saveShapes = _ref2.saveShapes,
-      activeTool = _ref2.activeTool,
-      setActiveTool = _ref2.setActiveTool,
-      canvasOffsetStartPosition = _ref2.canvasOffsetStartPosition,
-      setCanvasOffsetStartPosition = _ref2.setCanvasOffsetStartPosition,
-      canvasOffset = _ref2.canvasOffset,
-      setCanvasOffset = _ref2.setCanvasOffset,
-      isInsideComponent = _ref2.isInsideComponent,
-      selectionMode = _ref2.selectionMode,
-      setSelectionMode = _ref2.setSelectionMode,
-      selectionWidth = _ref2.selectionWidth,
-      selectionColor = _ref2.selectionColor,
-      selectionPadding = _ref2.selectionPadding,
-      isEditMode = _ref2.isEditMode;
-  var drawCanvasRef = (0, _react.useRef)(null);
-  var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return drawCanvasRef.current;
+const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    withGrid,
+    canGrow,
+    disabled = false,
+    canvasSize,
+    shapes,
+    addShape,
+    updateSingleShape,
+    selectedShape,
+    setSelectedShape,
+    saveShapes,
+    activeTool,
+    setActiveTool,
+    canvasOffsetStartPosition,
+    setCanvasOffsetStartPosition,
+    canvasOffset,
+    setCanvasOffset,
+    isInsideComponent,
+    selectionMode,
+    setSelectionMode,
+    selectionWidth,
+    selectionColor,
+    selectionPadding,
+    isEditMode
+  } = _ref2;
+  const drawCanvasRef = (0, _react.useRef)(null);
+  const selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
+  (0, _react.useImperativeHandle)(ref, () => drawCanvasRef.current);
+  const {
+    hoverMode
+  } = (0, _useDrawableCanvas.default)({
+    disabled,
+    addShape,
+    canvasSize,
+    drawCanvasRef,
+    setActiveTool,
+    shapes,
+    selectionMode,
+    activeTool,
+    isInsideComponent,
+    setCanvasOffset,
+    selectedShape,
+    selectionCanvasRef,
+    canvasOffsetStartPosition,
+    setSelectedShape,
+    setCanvasOffsetStartPosition,
+    updateSingleShape,
+    canvasOffset,
+    saveShapes,
+    setSelectionMode,
+    selectionPadding
   });
-
-  var _useDrawableCanvas = (0, _useDrawableCanvas2["default"])({
-    disabled: disabled,
-    addShape: addShape,
-    canvasSize: canvasSize,
-    drawCanvasRef: drawCanvasRef,
-    setActiveTool: setActiveTool,
-    shapes: shapes,
-    selectionMode: selectionMode,
-    activeTool: activeTool,
-    isInsideComponent: isInsideComponent,
-    setCanvasOffset: setCanvasOffset,
-    selectedShape: selectedShape,
-    selectionCanvasRef: selectionCanvasRef,
-    canvasOffsetStartPosition: canvasOffsetStartPosition,
-    setSelectedShape: setSelectedShape,
-    setCanvasOffsetStartPosition: setCanvasOffsetStartPosition,
-    updateSingleShape: updateSingleShape,
-    canvasOffset: canvasOffset,
-    saveShapes: saveShapes,
-    setSelectionMode: setSelectionMode,
-    selectionPadding: selectionPadding
-  }),
-      hoverMode = _useDrawableCanvas.hoverMode;
-
-  var updateSelectedShapeText = (0, _react.useCallback)(function (newText) {
+  const updateSelectedShapeText = (0, _react.useCallback)(newText => {
     var _drawCanvasRef$curren, _newShape$style$fontB, _newShape$style, _newShape$style$fontI, _newShape$style2, _newShape$style3;
 
     if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== _Shapes.ShapeEnum.text) return;
-    var ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
+    const ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
     if (!ctx) return;
 
-    var newShape = _fp["default"].set('value', newText, selectedShape);
+    const newShape = _fp.default.set('value', newText, selectedShape);
 
-    var newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
-
-    var resizedShape = _objectSpread(_objectSpread({}, newShape), {}, {
+    const newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style$fontB = (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontBold) !== null && _newShape$style$fontB !== void 0 ? _newShape$style$fontB : false, (_newShape$style$fontI = (_newShape$style2 = newShape.style) === null || _newShape$style2 === void 0 ? void 0 : _newShape$style2.fontItalic) !== null && _newShape$style$fontI !== void 0 ? _newShape$style$fontI : false, (_newShape$style3 = newShape.style) === null || _newShape$style3 === void 0 ? void 0 : _newShape$style3.fontFamily);
+    const resizedShape = { ...newShape,
       width: newWidth,
       height: newShape.fontSize * newShape.value.length
-    });
-
+    };
     updateSingleShape(resizedShape);
   }, [updateSingleShape, selectedShape]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     var _drawCanvasRef$curren2;
 
-    var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
-    drawCtx && window.requestAnimationFrame(function () {
-      return renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape);
-    });
+    const drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+    drawCtx && window.requestAnimationFrame(() => renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape));
   }, [shapes, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     var _selectionCanvasRef$c;
 
-    var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    selectionCtx && window.requestAnimationFrame(function () {
-      return renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape);
-    });
+    const selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
+    selectionCtx && window.requestAnimationFrame(() => renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape));
   }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
-  return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
+  return /*#__PURE__*/_react.default.createElement(StyledCanvasBox, null, /*#__PURE__*/_react.default.createElement(StyledCanvasContainer, {
     "data-grid": withGrid,
     "data-grow": canGrow
-  }, /*#__PURE__*/_react["default"].createElement(StyledDrawCanvas, {
+  }, /*#__PURE__*/_react.default.createElement(StyledDrawCanvas, {
     ref: drawCanvasRef,
     "data-grow": canGrow,
     width: canvasSize.width,
     height: canvasSize.height
-  }), isEditMode && /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+  }), isEditMode && /*#__PURE__*/_react.default.createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
     width: canvasSize.width,
     height: canvasSize.height,
     "data-grow": canGrow,
     cursor: activeTool.type !== _tools.ActionsEnum.selection && activeTool.type !== _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool.type === _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
-  }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+  }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react.default.createElement(_EditTextBox.default, {
     scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,
     shape: selectedShape,
@@ -209,4 +199,4 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 });
 
 var _default = Canvas;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Button.js

@@ -5,50 +5,45 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@linaria/react");
 
-var _excluded = ["hidden", "disabled", "selected", "icon", "children", "className", "title", "onClick"],
-    _excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
-var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
+const StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
   name: "StyledButton",
-  "class": "sc6yefj"
+  class: "sq3bzv4"
 });
-var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledButtonContent",
-  "class": "s2aizej"
+  class: "sst453j"
 });
-var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledIcon",
-  "class": "s13rkw3s"
+  class: "s1q5lsc2"
 });
-var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledChildren",
-  "class": "s1qkcrgj"
+  class: "s1dis2j8"
 });
 
-var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   if (props.type === 'file' || props.type === 'color') {
-    var _props$hidden = props.hidden,
-        hidden = _props$hidden === void 0 ? false : _props$hidden,
-        _props$disabled = props.disabled,
-        disabled = _props$disabled === void 0 ? false : _props$disabled,
-        _props$selected = props.selected,
-        selected = _props$selected === void 0 ? false : _props$selected,
-        icon = props.icon,
-        children = props.children,
-        className = props.className,
-        title = props.title,
-        onClick = props.onClick,
-        fileProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
-    return /*#__PURE__*/_react["default"].createElement(StyledButton, {
+    const {
+      hidden = false,
+      disabled = false,
+      selected = false,
+      icon,
+      children,
+      className,
+      title,
+      onClick,
+      ...fileProps
+    } = props;
+    return /*#__PURE__*/_react.default.createElement(StyledButton, {
       as: "label",
       className: className,
       title: title,
@@ -56,42 +51,38 @@ var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
       "data-disabled": +disabled,
       "data-selected": +selected,
       "data-hidden": +hidden
-    }, /*#__PURE__*/_react["default"].createElement("input", (0, _extends2["default"])({
+    }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
       ref: ref,
       disabled: disabled
-    }, fileProps)), /*#__PURE__*/_react["default"].createElement(StyledButtonContent, null, children && /*#__PURE__*/_react["default"].createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+    }, fileProps)), /*#__PURE__*/_react.default.createElement(StyledButtonContent, null, children && /*#__PURE__*/_react.default.createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react.default.createElement(StyledIcon, {
       dangerouslySetInnerHTML: {
         __html: icon
       }
     })));
   } else {
-    var _ref = props,
-        _ref$hidden = _ref.hidden,
-        _hidden = _ref$hidden === void 0 ? false : _ref$hidden,
-        _ref$disabled = _ref.disabled,
-        _disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-        _ref$selected = _ref.selected,
-        _selected = _ref$selected === void 0 ? false : _ref$selected,
-        _icon = _ref.icon,
-        _children = _ref.children,
-        _ref$type = _ref.type,
-        type = _ref$type === void 0 ? 'button' : _ref$type,
-        _fileProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
-
-    return /*#__PURE__*/_react["default"].createElement(StyledButton, (0, _extends2["default"])({
+    const {
+      hidden = false,
+      disabled = false,
+      selected = false,
+      icon,
+      children,
+      type = 'button',
+      ...fileProps
+    } = props;
+    return /*#__PURE__*/_react.default.createElement(StyledButton, (0, _extends2.default)({
       ref: ref,
-      disabled: _disabled,
-      "data-disabled": +_disabled,
-      "data-selected": +_selected,
-      "data-hidden": +_hidden,
+      disabled: disabled,
+      "data-disabled": +disabled,
+      "data-selected": +selected,
+      "data-hidden": +hidden,
       type: type
-    }, _fileProps), /*#__PURE__*/_react["default"].createElement(StyledButtonContent, null, _children && /*#__PURE__*/_react["default"].createElement(StyledChildren, null, _children), _icon && /*#__PURE__*/_react["default"].createElement(StyledIcon, {
+    }, fileProps), /*#__PURE__*/_react.default.createElement(StyledButtonContent, null, children && /*#__PURE__*/_react.default.createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react.default.createElement(StyledIcon, {
       dangerouslySetInnerHTML: {
-        __html: _icon
+        __html: icon
       }
     })));
   }
 });
 
 var _default = Button;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Loading.js

@@ -1,15 +1,9 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("@linaria/react");
 
@@ -17,50 +11,44 @@ var _style = require("../../constants/style");
 
 var _react2 = _interopRequireWildcard(require("react"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var TRANSITION_DURATION = 300;
-var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
+const TRANSITION_DURATION = 300;
+const StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoading",
-  "class": "s15r7ba"
+  class: "s9j48u3"
 });
-var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoader",
-  "class": "s19n4ela"
+  class: "s4auclc"
 });
-var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
+const StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledShape",
-  "class": "ssemdwq"
+  class: "s1l3fbq"
 });
 
-var Loading = function Loading(_ref) {
-  var _ref$isLoading = _ref.isLoading,
-      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading;
-
-  var _useState = (0, _react2.useState)('hidden'),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      loadingState = _useState2[0],
-      setLoadingState = _useState2[1];
-
-  (0, _react2.useEffect)(function () {
+const Loading = _ref => {
+  let {
+    isLoading = false
+  } = _ref;
+  const [loadingState, setLoadingState] = (0, _react2.useState)('hidden');
+  (0, _react2.useEffect)(() => {
     if (isLoading) {
       setLoadingState('visible');
     } else {
       setLoadingState('fadeOut');
-      var fadeOutTimeout = setTimeout(function () {
-        return setLoadingState('hidden');
-      }, TRANSITION_DURATION);
-      return function () {
+      const fadeOutTimeout = setTimeout(() => setLoadingState('hidden'), TRANSITION_DURATION);
+      return () => {
         clearTimeout(fadeOutTimeout);
       };
     }
   }, [isLoading]);
-  return loadingState === 'hidden' ? null : /*#__PURE__*/_react2["default"].createElement(StyledLoading, {
+  return loadingState === 'hidden' ? null : /*#__PURE__*/_react2.default.createElement(StyledLoading, {
     "data-loading": loadingState
-  }, /*#__PURE__*/_react2["default"].createElement(StyledLoader, null, /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null), /*#__PURE__*/_react2["default"].createElement(StyledShape, null)));
+  }, /*#__PURE__*/_react2.default.createElement(StyledLoader, null, /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null)));
 };
 
 var _default = Loading;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Modal.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,33 +13,34 @@ var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
-var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledModal",
-  "class": "s1hezj2d"
+  class: "s1c8tp02"
 });
-var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "spuj31h"
+  class: "svkxpz4"
 });
-var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledMask",
-  "class": "s1ulcd40"
+  class: "s1s9jyyg"
 });
 
-var Modal = function Modal(_ref) {
-  var children = _ref.children,
-      onClose = _ref.onClose,
-      _ref$position = _ref.position,
-      position = _ref$position === void 0 ? 'center' : _ref$position,
-      className = _ref.className;
-  return /*#__PURE__*/_react["default"].createElement(StyledModal, {
+const Modal = _ref => {
+  let {
+    children,
+    onClose,
+    position = 'center',
+    className
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledModal, {
     "data-position": position
-  }, /*#__PURE__*/_react["default"].createElement(StyledMask, {
+  }, /*#__PURE__*/_react.default.createElement(StyledMask, {
     onClick: onClose
-  }), /*#__PURE__*/_react["default"].createElement(StyledPanel, {
+  }), /*#__PURE__*/_react.default.createElement(StyledPanel, {
     className: className
   }, children));
 };
 
 var _default = Modal;
-exports["default"] = _default;
+exports.default = _default;