@yorab/react-paint 0.5.0 → 0.6.2

package/Changelog.md

@@ -0,0 +1,107 @@
+# V0.6.2
+
+- Lock : can't select shape by click on it (only via layers panel)
+- Clear : reset state to shapes prop by default if not undefined
+- update icons
+- Add responsive to settings UI
+
+# V0.6.1
+
+- Fix shapes prop not refreshing component (introduced by 0.6.0)
+
+# V0.6.0
+
+- Fix text opacity range dancing in edit mode
+- Fix opacity not visually shown in edit mode
+- add delete button in layouts panel and update style
+- update shape selection priority : use layers order, unless an anchor is
+- stored data format updated
+
+# V0.5.1
+
+- add possibility to update default settings for a tool
+- fix png export not working with url pic
+- fix pictures missing id
+- fix text tool
+- double click for editing text is now working on mobile
+- add bold and italic for text
+
+# V0.5.0
+
+- Add tool presets feature
+
+# V.0.4.2
+
+- fix toolgroup not displayed
+- add passive prop to event listener
+
+# V.0.4.1
+
+- prevent mounting selection canvas when viewer mode
+- prevent drawing selection when not needed
+- Click on toolbar tool group always enable a tool
+- fix input and select options not being impacted by
+- new reponsive for toolbar
+
+# V.0.4.0
+
+- Add possibility to customize UI from props
+
+# V.0.3.1
+
+- Add prop to change canvas background color
+- Move some props to options
+- fix Picture shape not being saved and not triggering onDataChanged
+- small picture are upscaled to fit container when imported
+- Add prop to choose to display save/load/export
+
+# V.0.3.0 :
+
+- prevent picture from url submit to reload page
+- add gridVisible prop and default to false
+- rename withLayouts to layersManipulation and reduce possible values
+- move every options inside options prop
+- remove ajv and any kind of json validation
+- limit snackbar use on success and always log errors
+- fit size and center uploaded picture
+- Add new viewer mode
+- add borders on bars
+- display shape id in layer panel
+- Export : round values to 2 decimal points
+- Export and import : remove temporary values (id) from stored file
+- Clean unknown shape format from imported data
+- Use ref for onDataChanged prop to avoid rerender if callback changes
+- Calculate container size to resize canvas instead of CSS
+- use requestAnimationFrame to improve perf
+- fix TextEdit position and size not working with canvas resized
+- fix anchors area becoming too small after rezsize
+- add MIT license to project
+- other minor fixes
+- minor design improvements
+
+# V.0.2.2 :
+
+- Migrate to react 18
+- fix Picture type
+- change pen join and cap to round
+- replace loading snackbar with proper loader
+- support for canGrow and canShrink prop
+- rename project
+- release on npm
+
+# V.0.2.1 :
+
+- better ui for input modal
+- lock functionnality
+- toggle grid
+- layouts panel UI
+
+# V.0.2.0 :
+
+- fix for scaling brush
+- fix snackbar
+- refonte UI toolbar
+- update examples
+- button with icons
+- mini toolbar to fix
+- provide tool for url only

package/README.md

@@ -1,11 +1,5 @@
 # known issues :
 
-## To resolve before beta release
-
-- Text tool broken since 0.2.2
-- double click not working with touch (fix: fake it counting delay between touch)
-- selected style not saved when changing tool (since presets)
-
 ## mobile/touch
 
 - dnd layout on mobile not working (fix : use dnd lib, or add touch listener to fake dnd, or provide alt UI)
@@ -15,5 +9,4 @@
 - TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
 - TextEdit copy/paste containing html breaks display
 - circle resizing only goes one direction
-- New text component opacity range is dancing
 - adding padding to selection result in wrong intersection calculs

package/dist/components/App.js

@@ -59,6 +59,8 @@ var _toolbar = require("../utils/toolbar");
 
 var _tools = require("../constants/tools");
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 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; }
@@ -69,49 +71,49 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledApp",
-  "class": "sdhgr8u",
+  "class": "s1v9piyg",
   vars: {
-    "sdhgr8u-0": [function (props) {
+    "s1v9piyg-0": [function (props) {
       return props.toolbarBackgroundColor;
     }],
-    "sdhgr8u-1": [function (props) {
+    "s1v9piyg-1": [function (props) {
       return props.dividerColor;
     }],
-    "sdhgr8u-2": [function (props) {
+    "s1v9piyg-2": [function (props) {
       return props.fontRadius;
     }, "px"],
-    "sdhgr8u-3": [function (props) {
+    "s1v9piyg-3": [function (props) {
       return props.fontDisabledColor;
     }],
-    "sdhgr8u-4": [function (props) {
+    "s1v9piyg-4": [function (props) {
       return props.fontDisabledBackgroundColor;
     }],
-    "sdhgr8u-5": [function (props) {
+    "s1v9piyg-5": [function (props) {
       return props.fontColor;
     }],
-    "sdhgr8u-6": [function (props) {
+    "s1v9piyg-6": [function (props) {
       return props.fontBackgroundColor;
     }],
-    "sdhgr8u-7": [function (props) {
+    "s1v9piyg-7": [function (props) {
       return props.fontSelectedColor;
     }],
-    "sdhgr8u-8": [function (props) {
+    "s1v9piyg-8": [function (props) {
       return props.fontSelectedBackgroundColor;
     }],
-    "sdhgr8u-9": [function (props) {
+    "s1v9piyg-9": [function (props) {
       return props.fontHoverColor;
     }],
-    "sdhgr8u-10": [function (props) {
+    "s1v9piyg-10": [function (props) {
       return props.fontHoverBackgroundColor;
     }],
-    "sdhgr8u-11": [function (props) {
+    "s1v9piyg-11": [function (props) {
       return props.canvasBackgroundColor;
     }],
-    "sdhgr8u-12": [function (_ref) {
+    "s1v9piyg-12": [function (_ref) {
       var canvasWidth = _ref.canvasWidth;
       return "min(100%, ".concat(canvasWidth, "px)");
     }],
-    "sdhgr8u-13": [function (_ref2) {
+    "s1v9piyg-13": [function (_ref2) {
       var canvasWidth = _ref2.canvasWidth;
       return canvasWidth;
     }, "px"]
@@ -119,13 +121,13 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRow",
-  "class": "sm24hcl",
+  "class": "s6o5tmu",
   vars: {
-    "sm24hcl-1": [function (_ref3) {
+    "s6o5tmu-1": [function (_ref3) {
       var width = _ref3.width;
       return width;
     }, "px"],
-    "sm24hcl-2": [function (_ref4) {
+    "s6o5tmu-2": [function (_ref4) {
       var aspectRatio = _ref4.aspectRatio;
       return aspectRatio;
     }]
@@ -219,7 +221,14 @@ var App = function App(_ref5) {
       canvasSize = _useState2[0],
       setCanvasSize = _useState2[1];
 
-  var availableTools = (0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture);
+  var _useState3 = (0, _react.useState)((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture)),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      availableTools = _useState4[0],
+      setAvailableTools = _useState4[1];
+
+  (0, _react.useEffect)(function () {
+    setAvailableTools((0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture));
+  }, [availableToolsFromProps, withUploadPicture, withUrlPicture]);
 
   var _useComponent = (0, _useComponent2["default"])({
     disabled: disabled,
@@ -227,42 +236,42 @@ var App = function App(_ref5) {
   }),
       isInsideComponent = _useComponent.isInsideComponent;
 
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      isLoading = _useState4[0],
-      setIsLoading = _useState4[1];
-
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isLayoutPanelShown = _useState6[0],
-      setIsLayoutPanelShown = _useState6[1];
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
 
-  var _useState7 = (0, _react.useState)([0, 0]),
+  var _useState7 = (0, _react.useState)(false),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      canvasOffset = _useState8[0],
-      setCanvasOffset = _useState8[1];
+      isLayoutPanelShown = _useState8[0],
+      setIsLayoutPanelShown = _useState8[1];
 
-  var _useState9 = (0, _react.useState)(undefined),
+  var _useState9 = (0, _react.useState)([0, 0]),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      canvasOffsetStartPosition = _useState10[0],
-      setCanvasOffsetStartPosition = _useState10[1];
+      canvasOffset = _useState10[0],
+      setCanvasOffset = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(_tools.SELECTION_TOOL),
+  var _useState11 = (0, _react.useState)(undefined),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      activeTool = _useState12[0],
-      setActiveTool = _useState12[1];
+      canvasOffsetStartPosition = _useState12[0],
+      setCanvasOffsetStartPosition = _useState12[1];
 
-  var _useState13 = (0, _react.useState)({
-    mode: _Mode.SelectionModeLib["default"]
-  }),
+  var _useState13 = (0, _react.useState)(_tools.SELECTION_TOOL),
       _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      selectionMode = _useState14[0],
-      setSelectionMode = _useState14[1];
+      activeTool = _useState14[0],
+      setActiveTool = _useState14[1];
 
-  var _useState15 = (0, _react.useState)(gridVisible),
+  var _useState15 = (0, _react.useState)({
+    mode: _Mode.SelectionModeLib["default"]
+  }),
       _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      withGrid = _useState16[0],
-      setWithGrid = _useState16[1];
+      selectionMode = _useState16[0],
+      setSelectionMode = _useState16[1];
+
+  var _useState17 = (0, _react.useState)(gridVisible),
+      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
+      withGrid = _useState18[0],
+      setWithGrid = _useState18[1];
 
   var _useShapes = (0, _useShapes2["default"])(onDataChanged),
       shapesRef = _useShapes.shapesRef,
@@ -291,6 +300,16 @@ var App = function App(_ref5) {
     setSelectedShape(undefined);
     setActiveTool(tool);
   }, [setSelectedShape]);
+  var updateToolSettings = (0, _react.useCallback)(function (toolId, field, value) {
+    setAvailableTools(function (availableTools) {
+      return availableTools.map(function (tool) {
+        return tool.id === toolId ? _fp["default"].set(['settings', field, 'default'], value, tool) : tool;
+      });
+    });
+    setActiveTool(function (activeTool) {
+      return activeTool.id === toolId ? _fp["default"].set(['settings', field, 'default'], value, activeTool) : activeTool;
+    });
+  }, []);
   var undoAction = (0, _react.useCallback)(function () {
     selectTool(_tools.SELECTION_TOOL);
     backwardShape();
@@ -299,13 +318,51 @@ var App = function App(_ref5) {
     selectTool(_tools.SELECTION_TOOL);
     forwardShape();
   }, [selectTool, forwardShape]);
-  var clearCanvas = (0, _react.useCallback)(function () {
+  var resetCanvas = (0, _react.useCallback)(function () {
     var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     clearShapes(shapesToInit, clearHistory);
     selectTool(_tools.SELECTION_TOOL);
     setCanvasOffset([0, 0]);
   }, [selectTool, clearShapes]);
+  var loadImportedData = (0, _react.useCallback)( /*#__PURE__*/function () {
+    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
+      var clearHistory,
+          shapes,
+          _args = arguments;
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              clearHistory = _args.length > 1 && _args[1] !== undefined ? _args[1] : true;
+              _context.next = 3;
+              return (0, _file.decodeImportedData)(json);
+
+            case 3:
+              shapes = _context.sent;
+              resetCanvas(shapes, clearHistory);
+
+            case 5:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function (_x) {
+      return _ref6.apply(this, arguments);
+    };
+  }(), [resetCanvas]);
+  var clearCanvas = (0, _react.useCallback)(function () {
+    if (shapesFromProps !== undefined) {
+      void loadImportedData({
+        shapes: shapesFromProps
+      }, false);
+    } else {
+      resetCanvas();
+    }
+  }, [resetCanvas, loadImportedData, shapesFromProps]);
   var selectShape = (0, _react.useCallback)(function (shape) {
     setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);
@@ -343,7 +400,7 @@ var App = function App(_ref5) {
     setIsLoading(true);
 
     try {
-      var content = (0, _file.encodeShapesInString)(shapesRef.current);
+      var content = (0, _file.encodeShapesInString)(shapesRef.current, canvasWidth, canvasHeight);
 
       if (!content) {
         throw new Error("L'encodage a échoué");
@@ -363,33 +420,7 @@ var App = function App(_ref5) {
     } finally {
       setIsLoading(false);
     }
-  }, [shapesRef, addSnackbar]);
-  var loadJson = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref6 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(json) {
-      var shapes;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              _context.next = 2;
-              return (0, _file.decodePicturesInShapes)(json);
-
-            case 2:
-              shapes = _context.sent;
-              clearCanvas(shapes, true);
-
-            case 4:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x) {
-      return _ref6.apply(this, arguments);
-    };
-  }(), [clearCanvas]);
+  }, [shapesRef, addSnackbar, canvasWidth, canvasHeight]);
   var loadFile = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(file) {
       var json;
@@ -405,7 +436,7 @@ var App = function App(_ref5) {
             case 4:
               json = _context2.sent;
               _context2.next = 7;
-              return loadJson(json);
+              return loadImportedData(json);
 
             case 7:
               addSnackbar({
@@ -444,7 +475,7 @@ var App = function App(_ref5) {
     return function (_x2) {
       return _ref7.apply(this, arguments);
     };
-  }(), [loadJson, addSnackbar]);
+  }(), [loadImportedData, addSnackbar]);
   var addPicture = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref8 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3(fileOrUrl) {
       var pictureShape;
@@ -493,7 +524,7 @@ var App = function App(_ref5) {
       return _ref8.apply(this, arguments);
     };
   }(), [addPictureShape, selectShape, addSnackbar, canvasWidth, canvasHeight]);
-  var onResized = (0, _react.useCallback)(function (measuredWidth, measuredHeight) {
+  var onResized = (0, _react.useCallback)(function (measuredWidth) {
     var scaleRatio = measuredWidth / canvasWidth;
     setCanvasSize({
       width: measuredWidth,
@@ -521,9 +552,11 @@ var App = function App(_ref5) {
   }, [isInsideComponent, setSelectedShape]);
   (0, _react.useEffect)(function () {
     if (shapesFromProps !== undefined) {
-      void loadJson(shapesFromProps);
+      void loadImportedData({
+        shapes: shapesFromProps
+      });
     }
-  }, [loadJson, shapesFromProps]);
+  }, [loadImportedData, shapesFromProps]);
   (0, _react.useEffect)(function () {
     if (!apiRef) return;
     apiRef.current = {
@@ -531,7 +564,7 @@ var App = function App(_ref5) {
         return canvasRef.current ? (0, _file.getCanvasImage)(shapesRef.current, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding) : undefined;
       },
       getCurrentData: function getCurrentData() {
-        return (0, _data.cleanShapesBeforeExport)(shapesRef.current); //TODO : create different types for stored shapes
+        return (0, _data.buildDataToExport)(shapesRef.current, canvasWidth, canvasHeight);
       }
     };
   }, [apiRef, shapesRef, canvasOffset, canvasWidth, canvasHeight, canvasSelectionPadding]);
@@ -616,6 +649,7 @@ var App = function App(_ref5) {
     toggleShapeLock: toggleShapeLock,
     isLayoutPanelShown: isLayoutPanelShown
   })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
+    width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
     availableTools: availableTools,
@@ -628,7 +662,8 @@ var App = function App(_ref5) {
       setIsLayoutPanelShown(function (prev) {
         return !prev;
       });
-    }
+    },
+    updateToolSettings: updateToolSettings
   }), /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
     isLoading: isLoading
   }), /*#__PURE__*/_react["default"].createElement(_Snackbar["default"], {

package/dist/components/Canvas.js

@@ -73,21 +73,21 @@ var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selecti
 
 var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasBox",
-  "class": "s14cny8z"
+  "class": "s9czb9p"
 });
 var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasContainer",
-  "class": "s16bxms6"
+  "class": "s1538eht"
 });
 var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledDrawCanvas",
-  "class": "spzzsat"
+  "class": "s101qxdc"
 });
 var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledSelectionCanvas",
-  "class": "s1egrskk",
+  "class": "sa4oq48",
   vars: {
-    "s1egrskk-0": [function (_ref) {
+    "sa4oq48-0": [function (_ref) {
       var cursor = _ref.cursor;
       return cursor;
     }]
@@ -151,7 +151,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       hoverMode = _useDrawableCanvas.hoverMode;
 
   var updateSelectedShapeText = (0, _react.useCallback)(function (newText) {
-    var _drawCanvasRef$curren, _newShape$style;
+    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');
@@ -159,7 +159,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
 
     var newShape = _fp["default"].set('value', newText, selectedShape);
 
-    var newWidth = (0, _transform.calculateTextWidth)(ctx, newShape.value, newShape.fontSize, (_newShape$style = newShape.style) === null || _newShape$style === void 0 ? void 0 : _newShape$style.fontFamily);
+    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), {}, {
       width: newWidth,

package/dist/components/common/Button.js

@@ -19,19 +19,19 @@ var _excluded = ["hidden", "disabled", "selected", "icon", "children", "classNam
     _excluded2 = ["hidden", "disabled", "selected", "icon", "children", "type"];
 var StyledButton = /*#__PURE__*/(0, _react2.styled)("button")({
   name: "StyledButton",
-  "class": "sc6yefj"
+  "class": "sq3bzv4"
 });
 var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledButtonContent",
-  "class": "s2aizej"
+  "class": "sst453j"
 });
 var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledIcon",
-  "class": "s13rkw3s"
+  "class": "s1q5lsc2"
 });
 var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledChildren",
-  "class": "s1qkcrgj"
+  "class": "s1dis2j8"
 });
 
 var Button = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {

package/dist/components/common/Loading.js

@@ -24,15 +24,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TRANSITION_DURATION = 300;
 var StyledLoading = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoading",
-  "class": "s15r7ba"
+  "class": "s9j48u3"
 });
 var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoader",
-  "class": "s19n4ela"
+  "class": "s4auclc"
 });
 var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledShape",
-  "class": "ssemdwq"
+  "class": "s1l3fbq"
 });
 
 var Loading = function Loading(_ref) {

package/dist/components/common/Modal.js

@@ -15,22 +15,26 @@ var _style = require("../../constants/style");
 
 var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledModal",
-  "class": "s1hezj2d"
+  "class": "s1c8tp02"
 });
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "spuj31h"
+  "class": "svkxpz4"
 });
 var 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, null, /*#__PURE__*/_react["default"].createElement(StyledMask, {
+  return /*#__PURE__*/_react["default"].createElement(StyledModal, {
+    "data-position": position
+  }, /*#__PURE__*/_react["default"].createElement(StyledMask, {
     onClick: onClose
   }), /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     className: className

package/dist/components/common/Panel.js

@@ -19,11 +19,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "s2dsyaf"
+  "class": "s1xzg253"
 });
 var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
   name: "StyledTitle",
-  "class": "s1f032bv"
+  "class": "s17qj3jh"
 });
 
 var Panel = function Panel(_ref) {
@@ -33,12 +33,15 @@ var Panel = function Panel(_ref) {
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? '' : _ref$title,
       className = _ref.className,
+      _ref$fitContainer = _ref.fitContainer,
+      fitContainer = _ref$fitContainer === void 0 ? false : _ref$fitContainer,
       _ref$alignment = _ref.alignment,
       alignment = _ref$alignment === void 0 ? 'center' : _ref$alignment;
   var componentRef = (0, _react.useRef)(null);
   return /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     ref: componentRef,
     className: className,
+    "data-fitcontainer": fitContainer,
     "data-vertical": +vertical,
     "data-alignment": alignment
   }, title && /*#__PURE__*/_react["default"].createElement(StyledTitle, null, title), children);

package/dist/components/common/Snackbar.js

@@ -27,11 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbar",
-  "class": "s1xg1lj6"
+  "class": "s1xssqat"
 });
 var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbarContainer",
-  "class": "sg1lk71"
+  "class": "s1bgtt22"
 });
 
 var Snackbar = function Snackbar(_ref) {