@yorab/react-paint 0.6.0 → 0.6.3

package/dist/components/App.js

@@ -71,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": "s1v9piyg",
+  "class": "sdhgr8u",
   vars: {
-    "s1v9piyg-0": [function (props) {
+    "sdhgr8u-0": [function (props) {
       return props.toolbarBackgroundColor;
     }],
-    "s1v9piyg-1": [function (props) {
+    "sdhgr8u-1": [function (props) {
       return props.dividerColor;
     }],
-    "s1v9piyg-2": [function (props) {
+    "sdhgr8u-2": [function (props) {
       return props.fontRadius;
     }, "px"],
-    "s1v9piyg-3": [function (props) {
+    "sdhgr8u-3": [function (props) {
       return props.fontDisabledColor;
     }],
-    "s1v9piyg-4": [function (props) {
+    "sdhgr8u-4": [function (props) {
       return props.fontDisabledBackgroundColor;
     }],
-    "s1v9piyg-5": [function (props) {
+    "sdhgr8u-5": [function (props) {
       return props.fontColor;
     }],
-    "s1v9piyg-6": [function (props) {
+    "sdhgr8u-6": [function (props) {
       return props.fontBackgroundColor;
     }],
-    "s1v9piyg-7": [function (props) {
+    "sdhgr8u-7": [function (props) {
       return props.fontSelectedColor;
     }],
-    "s1v9piyg-8": [function (props) {
+    "sdhgr8u-8": [function (props) {
       return props.fontSelectedBackgroundColor;
     }],
-    "s1v9piyg-9": [function (props) {
+    "sdhgr8u-9": [function (props) {
       return props.fontHoverColor;
     }],
-    "s1v9piyg-10": [function (props) {
+    "sdhgr8u-10": [function (props) {
       return props.fontHoverBackgroundColor;
     }],
-    "s1v9piyg-11": [function (props) {
+    "sdhgr8u-11": [function (props) {
       return props.canvasBackgroundColor;
     }],
-    "s1v9piyg-12": [function (_ref) {
+    "sdhgr8u-12": [function (_ref) {
       var canvasWidth = _ref.canvasWidth;
       return "min(100%, ".concat(canvasWidth, "px)");
     }],
-    "s1v9piyg-13": [function (_ref2) {
+    "sdhgr8u-13": [function (_ref2) {
       var canvasWidth = _ref2.canvasWidth;
       return canvasWidth;
     }, "px"]
@@ -121,13 +121,13 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRow",
-  "class": "s6o5tmu",
+  "class": "sm24hcl",
   vars: {
-    "s6o5tmu-1": [function (_ref3) {
+    "sm24hcl-1": [function (_ref3) {
       var width = _ref3.width;
       return width;
     }, "px"],
-    "s6o5tmu-2": [function (_ref4) {
+    "sm24hcl-2": [function (_ref4) {
       var aspectRatio = _ref4.aspectRatio;
       return aspectRatio;
     }]
@@ -318,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);
@@ -383,32 +421,6 @@ var App = function App(_ref5) {
       setIsLoading(false);
     }
   }, [shapesRef, addSnackbar, canvasWidth, canvasHeight]);
-  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.decodeImportedData)(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]);
   var loadFile = (0, _react.useCallback)( /*#__PURE__*/function () {
     var _ref7 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2(file) {
       var json;
@@ -424,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({
@@ -463,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;
@@ -540,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 = {
@@ -635,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,

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": "s9czb9p"
+  "class": "s14cny8z"
 });
 var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasContainer",
-  "class": "s1538eht"
+  "class": "s16bxms6"
 });
 var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledDrawCanvas",
-  "class": "s101qxdc"
+  "class": "spzzsat"
 });
 var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledSelectionCanvas",
-  "class": "sa4oq48",
+  "class": "s1egrskk",
   vars: {
-    "sa4oq48-0": [function (_ref) {
+    "s1egrskk-0": [function (_ref) {
       var cursor = _ref.cursor;
       return cursor;
     }]

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": "sq3bzv4"
+  "class": "sc6yefj"
 });
 var StyledButtonContent = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledButtonContent",
-  "class": "sst453j"
+  "class": "s2aizej"
 });
 var StyledIcon = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledIcon",
-  "class": "s1q5lsc2"
+  "class": "s13rkw3s"
 });
 var StyledChildren = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledChildren",
-  "class": "s1dis2j8"
+  "class": "s1qkcrgj"
 });
 
 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": "s9j48u3"
+  "class": "s15r7ba"
 });
 var StyledLoader = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledLoader",
-  "class": "s4auclc"
+  "class": "s19n4ela"
 });
 var StyledShape = /*#__PURE__*/(0, _react.styled)("div")({
   name: "StyledShape",
-  "class": "s1l3fbq"
+  "class": "ssemdwq"
 });
 
 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": "s1c8tp02"
+  "class": "s1hezj2d"
 });
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "svkxpz4"
+  "class": "spuj31h"
 });
 var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledMask",
-  "class": "s1s9jyyg"
+  "class": "s1ulcd40"
 });
 
 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": "s1xzg253"
+  "class": "s2dsyaf"
 });
 var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
   name: "StyledTitle",
-  "class": "s17qj3jh"
+  "class": "s1f032bv"
 });
 
 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": "s1xssqat"
+  "class": "s1xg1lj6"
 });
 var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSnackbarContainer",
-  "class": "s1bgtt22"
+  "class": "sg1lk71"
 });
 
 var Snackbar = function Snackbar(_ref) {

package/dist/components/settings/ColorField.js

@@ -29,19 +29,23 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledColor",
-  "class": "snh2jyk",
+  "class": "s1dqu4j7",
   vars: {
-    "snh2jyk-0": [function (_ref) {
+    "s1dqu4j7-0": [function (_ref) {
       var color = _ref.color;
       return color;
     }]
   }
 });
+var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+  name: "StyleWrapper",
+  "class": "s1j0ldko"
+});
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "sfm1cqx",
+  "class": "s10ecqf5",
   vars: {
-    "sfm1cqx-0": [function (_ref2) {
+    "s10ecqf5-0": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }]
@@ -53,6 +57,8 @@ var ColorField = function ColorField(_ref3) {
       setSelectedSettings = _ref3.setSelectedSettings,
       _ref3$title = _ref3.title,
       title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
+      _ref3$mode = _ref3.mode,
+      mode = _ref3$mode === void 0 ? 'fill' : _ref3$mode,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
       values = _ref3.values,
@@ -87,23 +93,27 @@ var ColorField = function ColorField(_ref3) {
     selected: isPanelVisible,
     title: title,
     disabled: disabled,
-    onClick: togglePanel
-  }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
-    color: value === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : value
+    onClick: togglePanel,
+    icon: value === 'transparent' ? mode === 'fill' ? _icons.noFillIcon : _icons.noStrokeIcon : undefined
+  }, value !== 'transparent' && /*#__PURE__*/_react["default"].createElement(StyledColor, {
+    color: value,
+    "data-mode": mode
   })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
     alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, values.map(function (color, index) {
+  }, /*#__PURE__*/_react["default"].createElement(StyleWrapper, null, values.map(function (color, index) {
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,
       selected: color === value,
       color: color,
+      icon: color === 'transparent' ? mode === 'fill' ? _icons.noFillIcon : _icons.noStrokeIcon : undefined,
       onClick: function onClick() {
         return handleClick(color);
       }
-    }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
-      color: color === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : color
+    }, color !== 'transparent' && /*#__PURE__*/_react["default"].createElement(StyledColor, {
+      color: color,
+      "data-mode": mode
     }));
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "color",

package/dist/components/settings/FontFamilyField.js

@@ -15,11 +15,13 @@ var _react2 = require("@linaria/react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _icons = require("../../constants/icons");
+
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "smpmxx5",
+  "class": "s16o63ah",
   vars: {
-    "smpmxx5-0": [function (_ref) {
+    "s16o63ah-0": [function (_ref) {
       var family = _ref.family;
       return family;
     }]
@@ -47,6 +49,7 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     setSelectedSettings: setSelectedSettings,
     CustomOption: FontFamilyOption,
     title: "Font",
+    icon: _icons.fontIcon,
     disabled: disabled,
     field: "fontFamily",
     values: values,

package/dist/components/settings/LayoutButton.js

@@ -17,7 +17,7 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyleToggleLayoutButton",
-  "class": "sj7hhjx"
+  "class": "sb1jkk3"
 });
 
 var LayoutButton = function LayoutButton(_ref) {

package/dist/components/settings/Layouts.js

@@ -33,43 +33,43 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledLayouts = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledLayouts",
-  "class": "su3a8bs"
+  "class": "sw61axo"
 });
 var StyledRemoveButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledRemoveButton",
-  "class": "szboplp"
+  "class": "s1shoasi"
 });
 var StyledLayout = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledLayout",
-  "class": "sff5xt"
+  "class": "s1adt0vs"
 });
 var StyledVisibleButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledVisibleButton",
-  "class": "sj3bift"
+  "class": "svyjq0t"
 });
 var StyledLockedButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledLockedButton",
-  "class": "s10ip0a4"
+  "class": "s1vztggb"
 });
 var StyledGridButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledGridButton",
-  "class": "s1j9uq9o"
+  "class": "s1fgf9tg"
 });
 var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSeparator",
-  "class": "s156ddbb"
+  "class": "s1rl6big"
 });
 var StyledPanelLayouts = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanelLayouts",
-  "class": "s11gt4hl"
+  "class": "sbpkotp"
 });
 var StyledScrollingContent = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledScrollingContent",
-  "class": "s13cxqhq"
+  "class": "s12cgrwn"
 });
 var StyledPlaceholder = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPlaceholder",
-  "class": "s1idv8qv"
+  "class": "s1jzw7d9"
 });
 
 var Layout = function Layout(_ref) {

package/dist/components/settings/LineArrowField.js

@@ -15,17 +15,19 @@ var _react2 = require("@linaria/react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _icons = require("../../constants/icons");
+
 var StyledLeftTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLeftTriangle",
-  "class": "s1xxj4yl"
+  "class": "s1bq28wy"
 });
 var StyledRightTriangle = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledRightTriangle",
-  "class": "sbd6jc8"
+  "class": "sej9ve5"
 });
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "scawaat"
+  "class": "s5asd7a"
 });
 
 var LineArrowOption = function LineArrowOption(_ref) {
@@ -49,6 +51,7 @@ var LineArrowField = function LineArrowField(_ref2) {
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineArrowOption,
     title: "Fl\xE8ches",
+    icon: _icons.lineEndIcon,
     disabled: disabled,
     field: "lineArrow",
     values: values,

package/dist/components/settings/LineTypeField.js

@@ -15,20 +15,22 @@ var _react2 = require("@linaria/react");
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
+var _icons = require("../../constants/icons");
+
 var StyledLine = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledLine",
-  "class": "s1qssg4n"
+  "class": "s1yz5lc1"
 });
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "se26iq6"
+  "class": "s1k64iv7"
 });
 
 var LineTypeOption = function LineTypeOption(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(StyledOption, {
     "data-type": children
-  }, /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null));
+  }, /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null), /*#__PURE__*/_react["default"].createElement(StyledLine, null));
 };
 
 exports.LineTypeOption = LineTypeOption;
@@ -46,6 +48,7 @@ var LineTypeField = function LineTypeField(_ref2) {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: LineTypeOption,
+    icon: _icons.lineTypeIcon,
     title: "Type de traits",
     disabled: disabled,
     field: "lineDash",

package/dist/components/settings/PointsNumberField.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _icons = require("../../constants/icons");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _RangeField = _interopRequireDefault(require("./RangeField"));
@@ -25,6 +27,7 @@ var PointsNumberField = function PointsNumberField(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_RangeField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
+    icon: _icons.polygonIcon,
     title: "Nombre de points",
     disabled: disabled,
     field: "pointsCount",

package/dist/components/settings/RangeField.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledLabel = /*#__PURE__*/(0, _react2.styled)("label")({
   name: "StyledLabel",
-  "class": "s9mugpt"
+  "class": "s4h1871"
 });
 
 var RangeField = function RangeField(_ref) {
@@ -35,6 +35,7 @@ var RangeField = function RangeField(_ref) {
       setSelectedSettings = _ref.setSelectedSettings,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? "Choisissez l'intervalle" : _ref$title,
+      icon = _ref.icon,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       field = _ref.field,
@@ -73,10 +74,12 @@ var RangeField = function RangeField(_ref) {
     selected: isPanelVisible,
     title: title,
     disabled: disabled,
+    icon: icon,
     onClick: togglePanel
-  }, /*#__PURE__*/_react["default"].createElement("span", null, roundValue, unity)), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  }), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
-    alignment: "left"
+    alignment: "left",
+    fitContainer: true
   }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledLabel, null, /*#__PURE__*/_react["default"].createElement("input", {
     type: "range",
     min: min,