@yorab/react-paint 0.6.2 → 0.6.5

package/Changelog.md

@@ -1,3 +1,19 @@
+# V0.6.5
+
+- add babel/runtime to dep to fix build
+
+# V0.6.4
+
+- fix TextEdit copy/paste containing html
+- add clearCallback in opts to override clear button behavior
+
+# V0.6.3
+
+- Rename 'lib' prop in 'label'
+- update dash settings
+- update clear icon
+- update color settings UI
+
 # V0.6.2
 
 - Lock : can't select shape by click on it (only via layers panel)

package/README.md

@@ -7,6 +7,5 @@
 ## other
 
 - TextEdit cursor overflow MINOR (quick fix : edit on modale ?)
-- TextEdit copy/paste containing html breaks display
 - circle resizing only goes one direction
 - adding padding to selection result in wrong intersection calculs

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;
     }]
@@ -143,6 +143,7 @@ var DEFAULT_OPTIONS = {
   withUploadPicture: true,
   withUrlPicture: false,
   availableTools: _tools.DEFAULT_SHAPE_TOOLS,
+  clearCallback: 'empty',
   uiStyle: {
     toolbarBackgroundColor: 'white',
     dividerColor: '#36418129',
@@ -188,6 +189,7 @@ var App = function App(_ref5) {
       withLoadAndSave = _DEFAULT_OPTIONS$opti.withLoadAndSave,
       withUploadPicture = _DEFAULT_OPTIONS$opti.withUploadPicture,
       withUrlPicture = _DEFAULT_OPTIONS$opti.withUrlPicture,
+      clearCallback = _DEFAULT_OPTIONS$opti.clearCallback,
       availableToolsFromProps = _DEFAULT_OPTIONS$opti.availableTools;
 
   var _DEFAULT_OPTIONS$uiSt = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS.uiStyle), (_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {}),
@@ -355,14 +357,20 @@ var App = function App(_ref5) {
     };
   }(), [resetCanvas]);
   var clearCanvas = (0, _react.useCallback)(function () {
-    if (shapesFromProps !== undefined) {
+    if (typeof clearCallback !== 'string') {
       void loadImportedData({
-        shapes: shapesFromProps
+        shapes: clearCallback()
       }, false);
     } else {
-      resetCanvas();
+      if (clearCallback === 'defaultShapes' && shapesFromProps !== undefined) {
+        void loadImportedData({
+          shapes: shapesFromProps
+        }, false);
+      } else {
+        resetCanvas();
+      }
     }
-  }, [resetCanvas, loadImportedData, shapesFromProps]);
+  }, [resetCanvas, loadImportedData, shapesFromProps, clearCallback]);
   var selectShape = (0, _react.useCallback)(function (shape) {
     setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);

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,15 +15,15 @@ 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) {

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) {

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,9 +29,9 @@ 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;
     }]
@@ -39,13 +39,13 @@ var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyleWrapper",
-  "class": "sfm1cqx"
+  "class": "s1j0ldko"
 });
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "sttf061",
+  "class": "s10ecqf5",
   vars: {
-    "sttf061-0": [function (_ref2) {
+    "s10ecqf5-0": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }]
@@ -93,9 +93,11 @@ 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"
@@ -105,11 +107,13 @@ var ColorField = function ColorField(_ref3) {
       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

@@ -19,9 +19,9 @@ 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;
     }]
@@ -48,7 +48,7 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: FontFamilyOption,
-    title: "Font",
+    title: "Police",
     icon: _icons.fontIcon,
     disabled: disabled,
     field: "fontFamily",

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

@@ -19,15 +19,15 @@ 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) {

package/dist/components/settings/LineTypeField.js

@@ -19,11 +19,11 @@ 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) {

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) {

package/dist/components/settings/SelectField.js

@@ -27,11 +27,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
   name: "StyledButton",
-  "class": "s1ktxhkr"
+  "class": "sfr849o"
 });
 var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyleWrapper",
-  "class": "s5sp14o"
+  "class": "s11cdkmf"
 });
 
 var SelectField = function SelectField(_ref) {

package/dist/components/settings/SettingsBar.js

@@ -56,15 +56,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var SETTING_WIDTH = 40;
 var StyledSettingsBar = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSettingsBar",
-  "class": "s16z54di"
+  "class": "s17kh6p4"
 });
 var StyledSeparator = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledSeparator",
-  "class": "sa7lzh9"
+  "class": "s1fluhcn"
 });
 var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledToolsModal",
-  "class": "s7b85in"
+  "class": "sg7vrwb"
 });
 
 var SettingsItems = function SettingsItems(_ref) {

package/dist/components/toolbox/EditTextBox.js

@@ -27,29 +27,29 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledEditBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledEditBox",
-  "class": "s1unz6yq",
+  "class": "se8ufj4",
   vars: {
-    "s1unz6yq-0": [function (_ref) {
+    "se8ufj4-0": [function (_ref) {
       var transform = _ref.transform;
       return transform;
     }],
-    "s1unz6yq-1": [function (_ref2) {
+    "se8ufj4-1": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }],
-    "s1unz6yq-2": [function (_ref3) {
+    "se8ufj4-2": [function (_ref3) {
       var padding = _ref3.padding;
       return padding;
     }, "px"],
-    "s1unz6yq-3": [function (_ref4) {
+    "se8ufj4-3": [function (_ref4) {
       var fontsize = _ref4.fontsize;
       return fontsize;
     }, "px"],
-    "s1unz6yq-5": [function (_ref5) {
+    "se8ufj4-5": [function (_ref5) {
       var fontfamily = _ref5.fontfamily;
       return fontfamily;
     }],
-    "s1unz6yq-6": [function (_ref6) {
+    "se8ufj4-6": [function (_ref6) {
       var opacity = _ref6.opacity;
       return opacity;
     }]
@@ -74,8 +74,22 @@ var EditTextBox = function EditTextBox(_ref7) {
 
   (0, _react.useEffect)(function () {
     if (!ref.current) return;
-    ref.current.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
-    ref.current.focus();
+    var currentNode = ref.current;
+
+    var handlePaste = function handlePaste(e) {
+      var _e$clipboardData;
+
+      e.preventDefault();
+      var text = (_e$clipboardData = e.clipboardData) === null || _e$clipboardData === void 0 ? void 0 : _e$clipboardData.getData('text/plain');
+      document.execCommand('insertText', false, text); //TODO use Clipboard API when ready
+    };
+
+    currentNode.addEventListener('paste', handlePaste);
+    currentNode.innerHTML = (0, _string.convertStringArrayToDivContent)(defaultValue);
+    currentNode.focus();
+    return function () {
+      currentNode.removeEventListener('paste', handlePaste);
+    };
   }, [defaultValue]);
   var position = (0, _react.useMemo)(function () {
     var _getShapeInfos = (0, _shapeData.getShapeInfos)(shape, selectionPadding),

package/dist/components/toolbox/LoadFileTool.js

@@ -18,7 +18,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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 LoadFileTool = function LoadFileTool(_ref) {
-  var _type$lib;
+  var _type$label;
 
   var _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
@@ -49,9 +49,9 @@ var LoadFileTool = function LoadFileTool(_ref) {
     onClick: handleClick,
     onChange: handleChange,
     accept: accept,
-    title: (_type$lib = type.lib) !== null && _type$lib !== void 0 ? _type$lib : type.type,
+    title: (_type$label = type.label) !== null && _type$label !== void 0 ? _type$label : type.type,
     icon: img,
-    children: withText ? type.lib : undefined,
+    children: withText ? type.label : undefined,
     disabled: disabled
   });
 };

package/dist/components/toolbox/MenuGroup.js

@@ -39,11 +39,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanel",
-  "class": "s1uphjfh"
+  "class": "s1qu0ers"
 });
 var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRelative",
-  "class": "s1e5a6k5"
+  "class": "s1y35t9y"
 });
 
 var MenuGroup = function MenuGroup(_ref) {

package/dist/components/toolbox/PictureUrlInput.js

@@ -27,7 +27,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledInputModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledInputModal",
-  "class": "s95bkm9"
+  "class": "s1rncfwv"
 });
 
 var PictureUrlModal = function PictureUrlModal(_ref) {

package/dist/components/toolbox/Tool.js

@@ -12,7 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _Button = _interopRequireDefault(require("../common/Button"));
 
 var Tool = function Tool(_ref) {
-  var _type$lib;
+  var _type$label;
 
   var type = _ref.type,
       img = _ref.img,
@@ -31,9 +31,9 @@ var Tool = function Tool(_ref) {
     disabled: disabled,
     selected: isActive,
     onClick: handleClick,
-    title: (_type$lib = type.lib) !== null && _type$lib !== void 0 ? _type$lib : type.type,
+    title: (_type$label = type.label) !== null && _type$label !== void 0 ? _type$label : type.type,
     icon: img,
-    children: withText ? type.lib : undefined
+    children: withText ? type.label : undefined
   });
 };
 

package/dist/components/toolbox/Toolbar.js

@@ -44,15 +44,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TOOL_WIDTH = 40;
 var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledShrinkableTools",
-  "class": "so6hnjf"
+  "class": "s1gorp95"
 });
 var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledToolbox",
-  "class": "s1c1dllr"
+  "class": "s1ivsaf6"
 });
 var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledToolsModal",
-  "class": "s1g032mh"
+  "class": "sv0y70r"
 });
 var TOOLBAR_STRUCTURE = [{
   title: 'brush',
@@ -143,8 +143,7 @@ var Toolbar = function Toolbar(_ref) {
     setActiveTool((_availableTools$find = availableTools.find(function (tool) {
       return tool.id === toolId;
     })) !== null && _availableTools$find !== void 0 ? _availableTools$find : activeTool);
-  }; //360 240
-
+  };
 
   (0, _react.useEffect)(function () {
     setActionsInMenu(width < fullToolbarSize);

package/dist/components/toolbox/ToolbarGroup.js

@@ -29,11 +29,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)(_Panel["default"])({
   name: "StyledPanel",
-  "class": "s1bvz4xj"
+  "class": "s3kynji"
 });
 var StyledRelative = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRelative",
-  "class": "siejlch"
+  "class": "s1614rl3"
 });
 
 var ToolbarGroup = function ToolbarGroup(_ref) {

package/dist/constants/icons.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.settingsIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.menuIcon = exports.lockedIcon = exports.lineWidthIcon = exports.lineTypeIcon = exports.lineEndIcon = exports.layersIcon = exports.italicIcon = exports.gridOnIcon = exports.gridOffIcon = exports.fontIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dotsIcon = exports.curveIcon = exports.cursorIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
+exports.visibilityOffIcon = exports.visibilityIcon = exports.unlockedIcon = exports.undoIcon = exports.trashIcon = exports.textIcon = exports.squareIcon = exports.shapesIcon = exports.settingsIcon = exports.saveIcon = exports.redoIcon = exports.recIcon = exports.publicIcon = exports.polygonIcon = exports.pictureIcon = exports.penIcon = exports.paletteIcon = exports.paintIcon = exports.openFileIcon = exports.opacityIcon = exports.noStrokeIcon = exports.noFillIcon = exports.menuIcon = exports.lockedIcon = exports.lineWidthIcon = exports.lineTypeIcon = exports.lineEndIcon = exports.layersIcon = exports.italicIcon = exports.gridOnIcon = exports.gridOffIcon = exports.fontIcon = exports.exportFileIcon = exports.encodedTransparentIcon = exports.ellipseIcon = exports.dotsIcon = exports.curveIcon = exports.cursorIcon = exports.clearIcon = exports.circleIcon = exports.brushIcon = exports.boldIcon = exports.arrowIcon = void 0;
 var brushIcon = '<svg><path d="M5.146 17.5Q4.146 17.5 3.208 17Q2.271 16.5 1.667 15.708Q2.208 15.75 2.802 15.344Q3.396 14.938 3.396 14.104Q3.396 13.042 4.135 12.292Q4.875 11.542 5.958 11.542Q7.021 11.542 7.76 12.292Q8.5 13.042 8.5 14.104Q8.5 15.5 7.51 16.5Q6.521 17.5 5.146 17.5ZM9.917 12.5 7.562 10.146 14.917 2.729Q15.146 2.5 15.469 2.5Q15.792 2.5 16.021 2.729L17.271 3.958Q17.5 4.188 17.5 4.531Q17.5 4.875 17.271 5.125Z"/></svg>';
 exports.brushIcon = brushIcon;
 var squareIcon = '<svg><path d="M2.5 17.5V2.5H17.5V17.5ZM4.25 15.75H15.75V4.25H4.25ZM4.25 15.75V4.25V15.75Z"/></svg>';
@@ -32,7 +32,7 @@ var redoIcon = '<svg><path d="M8.292 15.833Q6.271 15.833 4.802 14.521Q3.333 13.2
 exports.redoIcon = redoIcon;
 var layersIcon = '<svg><path d="M10 17.646 2.438 11.75 3.875 10.646 10 15.396 16.125 10.646 17.562 11.75ZM10 13.188 2.5 7.354 10 1.521 17.5 7.354Z"/></svg>';
 exports.layersIcon = layersIcon;
-var clearIcon = '<svg><path d="M5.375 15.854 4.146 14.625 8.771 10 4.146 5.375 5.375 4.146 10 8.771 14.625 4.146 15.854 5.375 11.229 10 15.854 14.625 14.625 15.854 10 11.229Z"/></svg>';
+var clearIcon = '<svg><path d="M7.854 13.812 10 11.688 12.125 13.812 13.354 12.604 11.208 10.458 13.354 8.312 12.125 7.104 10 9.229 7.854 7.104 6.625 8.312 8.771 10.458 6.625 12.604ZM5.896 17.5Q5.167 17.5 4.656 16.99Q4.146 16.479 4.146 15.75V5.125H3.333V3.375H7.542V2.5H12.458V3.375H16.667V5.125H15.833V15.75Q15.833 16.479 15.323 16.99Q14.812 17.5 14.083 17.5Z"/></svg>';
 exports.clearIcon = clearIcon;
 var saveIcon = '<svg><path d="M17.5 5.833V15.75Q17.5 16.479 16.99 16.99Q16.479 17.5 15.75 17.5H4.25Q3.521 17.5 3.01 16.99Q2.5 16.479 2.5 15.75V4.25Q2.5 3.521 3.01 3.01Q3.521 2.5 4.25 2.5H14.167ZM10 14.917Q11.062 14.917 11.823 14.156Q12.583 13.396 12.583 12.333Q12.583 11.271 11.823 10.51Q11.062 9.75 10 9.75Q8.938 9.75 8.177 10.51Q7.417 11.271 7.417 12.333Q7.417 13.396 8.177 14.156Q8.938 14.917 10 14.917ZM5.021 8.396H12.521V5.021H5.021Z"/></svg>';
 exports.saveIcon = saveIcon;
@@ -87,4 +87,8 @@ exports.fontIcon = fontIcon;
 var lineEndIcon = '<svg><path d="M6 17 2 13 6 9 7.062 10.062 4.875 12.25H17V13.75H4.875L7.062 15.938ZM14 11 12.938 9.938 15.125 7.75H3V6.25H15.125L12.938 4.062L14 3L18 7Z"/></svg>';
 exports.lineEndIcon = lineEndIcon;
 var settingsIcon = '<svg><path d="M2.5 15.833V14.083H7.667V15.833ZM2.5 5.917V4.167H10.771V5.917ZM9.208 17.5V12.438H10.958V14.083H17.5V15.833H10.958V17.5ZM5.917 12.542V10.875H2.5V9.125H5.917V7.479H7.667V12.542ZM9.208 10.875V9.125H17.5V10.875ZM12.333 7.562V2.5H14.083V4.167H17.5V5.917H14.083V7.562Z"/></svg>';
-exports.settingsIcon = settingsIcon;
+exports.settingsIcon = settingsIcon;
+var noStrokeIcon = '<svg><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM10 16.583Q10.896 16.583 11.708 16.365Q12.521 16.146 13.25 15.729L4.292 6.75Q3.875 7.479 3.646 8.292Q3.417 9.104 3.417 10Q3.417 12.729 5.344 14.656Q7.271 16.583 10 16.583ZM17 14.562 15.708 13.271Q16.125 12.542 16.354 11.719Q16.583 10.896 16.583 10Q16.583 7.271 14.656 5.344Q12.729 3.417 10 3.417Q9.104 3.417 8.292 3.646Q7.479 3.875 6.75 4.292L5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562ZM11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771Q11.229 8.771 11.229 8.771ZM8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Q8.771 11.229 8.771 11.229Z"/></svg>';
+exports.noStrokeIcon = noStrokeIcon;
+var noFillIcon = '<svg ><path d="M16.354 18.833 14.521 17Q13.542 17.646 12.396 17.99Q11.25 18.333 10 18.333Q8.271 18.333 6.75 17.677Q5.229 17.021 4.104 15.896Q2.979 14.771 2.323 13.25Q1.667 11.729 1.667 10Q1.667 8.729 2.01 7.594Q2.354 6.458 3 5.458L1.167 3.625L2.396 2.396L17.583 17.604ZM17 14.562 5.458 3Q6.458 2.354 7.594 2.01Q8.729 1.667 10 1.667Q11.729 1.667 13.25 2.323Q14.771 2.979 15.896 4.104Q17.021 5.229 17.677 6.75Q18.333 8.271 18.333 10Q18.333 11.271 17.979 12.417Q17.625 13.562 17 14.562Z"/></svg>';
+exports.noFillIcon = noFillIcon;

package/dist/constants/style.js

@@ -14,7 +14,7 @@ var STYLE_LINE_DASH = [0, 1, 2];
 exports.STYLE_LINE_DASH = STYLE_LINE_DASH;
 var STYLE_LINE_WITH_ARROW = [0, 1, 2, 3];
 exports.STYLE_LINE_WITH_ARROW = STYLE_LINE_WITH_ARROW;
-var LINE_DASH_DATA = [[1, 0], [5, 10], [2, 2]];
+var LINE_DASH_DATA = [[1, 0], [1, 2], [4, 6]];
 exports.LINE_DASH_DATA = LINE_DASH_DATA;
 var STYLE_FONTS = ['arial', 'serif', 'monospace'];
 exports.STYLE_FONTS = STYLE_FONTS;

package/dist/constants/tools.js

@@ -276,7 +276,7 @@ var DEFAULT_SHAPE_PICTURE = {
   type: _Shapes.ShapeEnum.picture,
   id: "".concat(PREFIX_ID, "picture"),
   icon: _icons.pictureIcon,
-  lib: 'Image',
+  label: 'Image',
   settings: SETTINGS_DEFAULT_PICTURE
 };
 exports.DEFAULT_SHAPE_PICTURE = DEFAULT_SHAPE_PICTURE;
@@ -284,7 +284,7 @@ var DEFAULT_SHAPE_BRUSH = {
   type: _Shapes.ShapeEnum.brush,
   id: "".concat(PREFIX_ID, "brush"),
   icon: _icons.brushIcon,
-  lib: 'Brosse',
+  label: 'Brosse',
   settings: SETTINGS_DEFAULT_BRUSH
 };
 exports.DEFAULT_SHAPE_BRUSH = DEFAULT_SHAPE_BRUSH;
@@ -292,7 +292,7 @@ var DEFAULT_SHAPE_LINE = {
   type: _Shapes.ShapeEnum.line,
   id: "".concat(PREFIX_ID, "line"),
   icon: _icons.arrowIcon,
-  lib: 'Ligne',
+  label: 'Ligne',
   settings: SETTINGS_DEFAULT_LINE
 };
 exports.DEFAULT_SHAPE_LINE = DEFAULT_SHAPE_LINE;
@@ -300,7 +300,7 @@ var DEFAULT_SHAPE_POLYGON = {
   type: _Shapes.ShapeEnum.polygon,
   id: "".concat(PREFIX_ID, "polygon"),
   icon: _icons.polygonIcon,
-  lib: 'Polygone',
+  label: 'Polygone',
   settings: SETTINGS_DEFAULT_POLYGON
 };
 exports.DEFAULT_SHAPE_POLYGON = DEFAULT_SHAPE_POLYGON;
@@ -308,7 +308,7 @@ var DEFAULT_SHAPE_CURVE = {
   type: _Shapes.ShapeEnum.curve,
   id: "".concat(PREFIX_ID, "curve"),
   icon: _icons.curveIcon,
-  lib: 'Courbe',
+  label: 'Courbe',
   settings: SETTINGS_DEFAULT_CURVE
 };
 exports.DEFAULT_SHAPE_CURVE = DEFAULT_SHAPE_CURVE;
@@ -317,7 +317,7 @@ var DEFAULT_SHAPE_RECT = {
   id: "".concat(PREFIX_ID, "rect"),
   icon: _icons.squareIcon,
   // temporary
-  lib: 'Rectangle',
+  label: 'Rectangle',
   settings: SETTINGS_DEFAULT_RECT
 };
 exports.DEFAULT_SHAPE_RECT = DEFAULT_SHAPE_RECT;
@@ -325,7 +325,7 @@ var DEFAULT_SHAPE_SQUARE = {
   type: _Shapes.ShapeEnum.square,
   id: "".concat(PREFIX_ID, "square"),
   icon: _icons.squareIcon,
-  lib: 'Carré',
+  label: 'Carré',
   settings: SETTINGS_DEFAULT_SQUARE
 };
 exports.DEFAULT_SHAPE_SQUARE = DEFAULT_SHAPE_SQUARE;
@@ -333,7 +333,7 @@ var DEFAULT_SHAPE_CIRCLE = {
   type: _Shapes.ShapeEnum.circle,
   id: "".concat(PREFIX_ID, "circle"),
   icon: _icons.circleIcon,
-  lib: 'Cercle',
+  label: 'Cercle',
   settings: SETTINGS_DEFAULT_CIRCLE
 };
 exports.DEFAULT_SHAPE_CIRCLE = DEFAULT_SHAPE_CIRCLE;
@@ -342,7 +342,7 @@ var DEFAULT_SHAPE_ELLIPSE = {
   id: "".concat(PREFIX_ID, "ellipse"),
   icon: _icons.circleIcon,
   // temporary
-  lib: 'Ellipse',
+  label: 'Ellipse',
   settings: SETTINGS_DEFAULT_ELLIPSE
 };
 exports.DEFAULT_SHAPE_ELLIPSE = DEFAULT_SHAPE_ELLIPSE;
@@ -350,7 +350,7 @@ var DEFAULT_SHAPE_TEXT = {
   type: _Shapes.ShapeEnum.text,
   id: "".concat(PREFIX_ID, "text"),
   icon: _icons.textIcon,
-  lib: 'Texte',
+  label: 'Texte',
   settings: SETTINGS_DEFAULT_TEXT
 };
 exports.DEFAULT_SHAPE_TEXT = DEFAULT_SHAPE_TEXT;
@@ -360,69 +360,69 @@ var SELECTION_TOOL = {
   id: "".concat(PREFIX_ID, "selection"),
   type: _tools.ActionsEnum.selection,
   icon: _icons.cursorIcon,
-  lib: 'Sélection'
+  label: 'Sélection'
 };
 exports.SELECTION_TOOL = SELECTION_TOOL;
 var UNDO_TOOL = {
   id: "".concat(PREFIX_ID, "undo"),
   type: _tools.ActionsEnum.undo,
   icon: _icons.undoIcon,
-  lib: 'Undo'
+  label: 'Undo'
 };
 exports.UNDO_TOOL = UNDO_TOOL;
 var REDO_TOOL = {
   id: "".concat(PREFIX_ID, "redo"),
   type: _tools.ActionsEnum.redo,
   icon: _icons.redoIcon,
-  lib: 'Redo'
+  label: 'Redo'
 };
 exports.REDO_TOOL = REDO_TOOL;
 var CLEAR_TOOL = {
   id: "".concat(PREFIX_ID, "clear"),
   type: _tools.ActionsEnum.clear,
   icon: _icons.clearIcon,
-  lib: 'Clear'
+  label: 'Clear'
 };
 exports.CLEAR_TOOL = CLEAR_TOOL;
 var EXPORT_TOOL = {
   id: "".concat(PREFIX_ID, "export"),
   type: _tools.ActionsEnum["export"],
   icon: _icons.exportFileIcon,
-  lib: 'Export PNG'
+  label: 'Export PNG'
 };
 exports.EXPORT_TOOL = EXPORT_TOOL;
 var LOAD_TOOL = {
   id: "".concat(PREFIX_ID, "load"),
   type: _tools.ActionsEnum.loadFile,
   icon: _icons.openFileIcon,
-  lib: 'Load project'
+  label: 'Load project'
 };
 exports.LOAD_TOOL = LOAD_TOOL;
 var SAVE_TOOL = {
   id: "".concat(PREFIX_ID, "save"),
   type: _tools.ActionsEnum.saveFile,
   icon: _icons.saveIcon,
-  lib: 'Save project'
+  label: 'Save project'
 };
 exports.SAVE_TOOL = SAVE_TOOL;
 var MOVE_TOOL = {
   id: "".concat(PREFIX_ID, "move"),
   type: _tools.ActionsEnum.move,
   icon: _icons.cursorIcon,
-  lib: 'Move'
+  label: 'Move'
 };
 exports.MOVE_TOOL = MOVE_TOOL;
 var UPLOAD_PICTURE_TOOL = {
   id: "".concat(PREFIX_ID, "upload-picture"),
   type: _tools.ActionsEnum.uploadPicture,
   icon: _icons.pictureIcon,
-  lib: 'Upload picture'
+  label: 'Upload picture'
 };
 exports.UPLOAD_PICTURE_TOOL = UPLOAD_PICTURE_TOOL;
 var ADD_URL_PICTURE_TOOL = {
   id: "".concat(PREFIX_ID, "upload-picture"),
   type: _tools.ActionsEnum.addUrlPicture,
   icon: _icons.pictureIcon,
-  lib: 'Add picture from URL'
+  label: 'Add picture from URL'
 };
 exports.ADD_URL_PICTURE_TOOL = ADD_URL_PICTURE_TOOL;

package/dist/styles.css

@@ -31,58 +31,58 @@
   min-width: 0;
 }
 
-.s1unz6yq{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--s1unz6yq-0);-ms-transform:var(--s1unz6yq-0);transform:var(--s1unz6yq-0);color:var(--s1unz6yq-1);padding:var(--s1unz6yq-2);font-size:var(--s1unz6yq-3);line-height:var(--s1unz6yq-3);font-family:var(--s1unz6yq-5);opacity:var(--s1unz6yq-6);}.s1unz6yq[data-fontbold='true']{font-weight:bold;}.s1unz6yq[data-fontitalic='true']{font-style:italic;}
-.s9czb9p{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
-.s1538eht{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s1538eht[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s1538eht[data-grow='true']{width:100%;height:100%;}
-.s101qxdc{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;}.s101qxdc[data-grow='true']{width:100%;}
-.sa4oq48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
-.sq3bzv4{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sq3bzv4[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sq3bzv4[data-hidden='1']{visibility:hidden;}.sq3bzv4[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sq3bzv4[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sq3bzv4[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sq3bzv4[data-disabled='0']{cursor:pointer;}.sq3bzv4 svg{fill:currentColor;width:20px;height:20px;}.sq3bzv4 input{position:absolute;visibility:hidden;}
-.sst453j{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
-.s1q5lsc2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.s1dis2j8{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1dis2j8 + .s1q5lsc2{margin-left:12px;}
-.s1xzg253{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.s1xzg253[data-alignment='left']{left:0;margin:4px;}.s1xzg253[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s1xzg253[data-alignment='right']{right:0;margin:4px;}.s1xzg253[data-fitcontainer='true']{max-width:100%;}
-.s17qj3jh{margin-bottom:8px;margin-top:4px;font-size:18px;}
-.su3a8bs{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
-.szboplp{margin:2px 0;}.szboplp:not(:hover){opacity:0.2;}
-.sff5xt{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.sff5xt[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.sff5xt[data-is-dragging='1']{opacity:0.4;}.sff5xt[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sff5xt[data-selected='1'] .szboplp{color:white;}.sff5xt[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sff5xt[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sff5xt[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sff5xt[data-disabled='0']{cursor:move;}.sff5xt > span{height:20px;line-height:1;color:#8a8a8a;}.sff5xt > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}
-.sj3bift{margin:2px 0;}.sj3bift[data-visible='false']{opacity:0.2;}
-.s10ip0a4{margin:2px 0;}.s10ip0a4[data-locked='false']{opacity:0.2;}
-.s1j9uq9o[data-grid='false'] svg{opacity:0.2;}
-.s156ddbb{-webkit-flex:1;-ms-flex:1;flex:1;}
-.s11gt4hl{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s13cxqhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
-.s1idv8qv{opacity:0.6;text-align:center;padding:12px 0px;}
-.s1bvz4xj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1bvz4xj[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.siejlch{position:relative;display:inline-block;}
-.s1uphjfh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1uphjfh[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.s1e5a6k5{position:relative;display:inline-block;}
-.s1c8tp02{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}.s1c8tp02[data-position='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1c8tp02[data-position='bottom']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
-.svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
-.s1s9jyyg{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
-.s95bkm9 form{grid-template-columns:3fr 1fr 1fr;}.s95bkm9 form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
-.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;height:36px;}
-.s1c1dllr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
-.s1g032mh{grid-template-columns:1fr 1fr 1fr;}
-.snh2jyk{width:24px;height:24px;box-sizing:border-box;border-radius:50%;border:1px solid gray;background:var(--snh2jyk-0);background-repeat:repeat;background-size:16px;}
-.sfm1cqx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
-.sttf061{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--sttf061-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;line-height:36px;font-weight:bold;}
-.layoutPanelOpened .sj7hhjx.sj7hhjx{color:var(--font-selected-color);background:var(--font-selected-bg);}.sj7hhjx[data-hidden='1']{display:none;}
-.s9mugpt{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
-.s1ktxhkr{padding:16px;}
-.s5sp14o{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
-.smpmxx5{font-family:var(--smpmxx5-0);}
-.s1qssg4n{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
-.se26iq6{display:inline-block;}.se26iq6[data-type='0'] .s1qssg4n{background:currentColor;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:currentColor;}
-.s1xxj4yl{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid currentColor;}
-.sbd6jc8{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid currentColor;}
-.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;vertical-align:middle;}.scawaat[data-type='0'] .s1xxj4yl,.scawaat[data-type='1'] .s1xxj4yl{display:none;}.scawaat[data-type='0'] .sbd6jc8,.scawaat[data-type='2'] .sbd6jc8{display:none;}
-.s16z54di{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
-.sa7lzh9{-webkit-flex:1;-ms-flex:1;flex:1;}
-.s7b85in{grid-template-columns:repeat(auto-fill,40px);width:100%;}
-.s1xssqat{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xssqat[data-type='0']{background:#646464;color:white;}.s1xssqat[data-type='1']{background:#c3a200;color:black;}.s1xssqat[data-type='2']{background:#911717;color:white;}.s1xssqat[data-type='3']{background:#088900;color:white;}.s1xssqat[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xssqat[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
-.s1bgtt22{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
-.s9j48u3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s9j48u3[data-loading='visible']{opacity:1;}
-.s4auclc{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s4auclc 1s infinite;animation:react-paint-rotation-s4auclc 1s infinite;}@-webkit-keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s4auclc{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
-.s1l3fbq{border-radius:50%;position:absolute;width:15px;height:15px;}.s1l3fbq:nth-child(1){left:0;background-color:#5c6bc0;}.s1l3fbq:nth-child(2){right:0;background-color:#8bc34a;}.s1l3fbq:nth-child(3){bottom:0;background-color:#ffb74d;}.s1l3fbq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
-.s1v9piyg{--toolbar-bg:var(--s1v9piyg-0);--divider-color:var(--s1v9piyg-1);--font-radius:var(--s1v9piyg-2);--font-disabled-color:var(--s1v9piyg-3);--font-disabled-bg:var(--s1v9piyg-4);--font-color:var(--s1v9piyg-5);--font-bg:var(--s1v9piyg-6);--font-selected-color:var(--s1v9piyg-7);--font-selected-bg:var(--s1v9piyg-8);--font-hover-color:var(--s1v9piyg-9);--font-hover-bg:var(--s1v9piyg-10);--canvas-bg:var(--s1v9piyg-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.s1v9piyg hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.s1v9piyg[data-grow='false']{max-width:var(--s1v9piyg-12);}.s1v9piyg[data-shrink='false']{min-width:var(--s1v9piyg-13);}
-.s6o5tmu{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--s6o5tmu-2);}.s6o5tmu[data-grow='true']{width:100%;}.s6o5tmu[data-grow='false']{width:var(--s6o5tmu-1);}
+.se8ufj4{position:absolute;display:inline-block;outline:none;left:0px;top:0px;-webkit-transform-origin:left top;-ms-transform-origin:left top;transform-origin:left top;box-sizing:border-box;-webkit-transform:var(--se8ufj4-0);-ms-transform:var(--se8ufj4-0);transform:var(--se8ufj4-0);color:var(--se8ufj4-1);padding:var(--se8ufj4-2);font-size:var(--se8ufj4-3);line-height:var(--se8ufj4-3);font-family:var(--se8ufj4-5);opacity:var(--se8ufj4-6);width:-webkit-max-content;width:-moz-max-content;width:max-content;}.se8ufj4[data-fontbold='true']{font-weight:bold;}.se8ufj4[data-fontitalic='true']{font-style:italic;}
+.s14cny8z{-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
+.s16bxms6{position:relative;background-color:var(--canvas-bg);background-repeat:repeat;background-size:16px;overflow:hidden;display:grid;}.s16bxms6[data-grid='true']{background-image:url("data:image/svg+xml,%3Csvg%20id%3D%22svg%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%22400%22%20height%3D%22400%22%20viewBox%3D%220%2C%200%2C%20400%2C400%22%3E%3Cg%20id%3D%22svgg%22%3E%3Cpath%20id%3D%22path0%22%20d%3D%22M204.800%2094.600%20C%20204.800%20188.933%2C204.802%20189.200%2C205.600%20189.200%20C%20206.248%20189.200%2C206.400%20189.467%2C206.400%20190.600%20C%20206.400%20191.733%2C206.552%20192.000%2C207.200%20192.000%20C%20207.733%20192.000%2C208.000%20192.267%2C208.000%20192.800%20C%20208.000%20193.244%2C208.267%20193.600%2C208.600%20193.600%20C%20208.933%20193.600%2C209.200%20193.956%2C209.200%20194.400%20C%20209.200%20195.067%2C209.467%20195.200%2C210.800%20195.200%20C%20212.133%20195.200%2C212.400%20195.333%2C212.400%20196.000%20C%20212.400%20196.798%2C212.667%20196.800%2C306.200%20196.800%20L%20400.000%20196.800%20400.000%2098.400%20L%20400.000%200.000%20302.400%200.000%20L%20204.800%200.000%20204.800%2094.600%20M0.000%20302.400%20L%200.000%20400.000%2098.400%20400.000%20L%20196.800%20400.000%20196.800%20306.200%20C%20196.800%20212.667%2C196.798%20212.400%2C196.000%20212.400%20C%20195.333%20212.400%2C195.200%20212.133%2C195.200%20210.800%20C%20195.200%20209.467%2C195.067%20209.200%2C194.400%20209.200%20C%20193.956%20209.200%2C193.600%20208.933%2C193.600%20208.600%20C%20193.600%20208.267%2C193.244%20208.000%2C192.800%20208.000%20C%20192.267%20208.000%2C192.000%20207.733%2C192.000%20207.200%20C%20192.000%20206.552%2C191.733%20206.400%2C190.600%20206.400%20C%20189.467%20206.400%2C189.200%20206.248%2C189.200%20205.600%20C%20189.200%20204.802%2C188.933%20204.800%2C94.600%20204.800%20L%200.000%20204.800%200.000%20302.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23fcfcfc%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path1%22%20d%3D%22M0.000%20100.000%20L%200.000%20200.000%2096.800%20200.000%20C%20193.333%20200.000%2C193.600%20199.998%2C193.600%20199.200%20C%20193.600%20198.533%2C193.867%20198.400%2C195.200%20198.400%20C%20196.533%20198.400%2C196.800%20198.267%2C196.800%20197.600%20C%20196.800%20197.067%2C197.067%20196.800%2C197.600%20196.800%20C%20198.267%20196.800%2C198.400%20196.533%2C198.400%20195.200%20C%20198.400%20193.867%2C198.533%20193.600%2C199.200%20193.600%20C%20199.998%20193.600%2C200.000%20193.333%2C200.000%2096.800%20L%20200.000%200.000%20100.000%200.000%20L%200.000%200.000%200.000%20100.000%20M208.000%20202.400%20C%20208.000%20203.067%2C207.733%20203.200%2C206.400%20203.200%20C%20205.067%20203.200%2C204.800%20203.333%2C204.800%20204.000%20C%20204.800%20204.533%2C204.533%20204.800%2C204.000%20204.800%20C%20203.333%20204.800%2C203.200%20205.067%2C203.200%20206.400%20C%20203.200%20207.733%2C203.067%20208.000%2C202.400%20208.000%20C%20201.602%20208.000%2C201.600%20208.267%2C201.600%20304.000%20L%20201.600%20400.000%20300.800%20400.000%20L%20400.000%20400.000%20400.000%20300.800%20L%20400.000%20201.600%20304.000%20201.600%20C%20208.267%20201.600%2C208.000%20201.602%2C208.000%20202.400%20%22%20stroke%3D%22none%22%20fill%3D%22%23e4e4e4%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path2%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path3%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3Cpath%20id%3D%22path4%22%20d%3D%22%22%20stroke%3D%22none%22%20fill%3D%22%23f4100f0%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");}.s16bxms6[data-grow='true']{width:100%;height:100%;}
+.spzzsat{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;}.spzzsat[data-grow='true']{width:100%;}
+.s1egrskk{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;max-width:100%;touch-action:none;display:block;grid-area:1 / 1;cursor:var(--s1egrskk-0);}.s1egrskk[data-grow='true']{width:100%;}
+.sc6yefj{min-width:32px;height:32px;font-size:14px;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;box-sizing:border-box;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;background:none;border:none;cursor:pointer;border-radius:var(--font-radius);color:var(--font-color);margin:2px 4px;padding:0;}.sc6yefj[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.sc6yefj[data-hidden='1']{visibility:hidden;}.sc6yefj[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.sc6yefj[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.sc6yefj[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.sc6yefj[data-disabled='0']{cursor:pointer;}.sc6yefj svg{fill:currentColor;width:20px;height:20px;}.sc6yefj input{position:absolute;visibility:hidden;}
+.s2aizej{width:100%;box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:2px 6px;}
+.s13rkw3s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.s1qkcrgj{-webkit-flex:1;-ms-flex:1;flex:1;text-align:left;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1qkcrgj + .s13rkw3s{margin-left:12px;}
+.s2dsyaf{position:absolute;z-index:3;background:var(--toolbar-bg);bottom:100%;box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:8px;border-radius:8px;white-space:nowrap;box-sizing:border-box;}.s2dsyaf[data-alignment='left']{left:0;margin:4px;}.s2dsyaf[data-alignment='center']{left:50%;-webkit-transform:translate3d(-50%,0px,0px);-ms-transform:translate3d(-50%,0px,0px);transform:translate3d(-50%,0px,0px);margin:4px 0px;}.s2dsyaf[data-alignment='right']{right:0;margin:4px;}.s2dsyaf[data-fitcontainer='true']{max-width:100%;}
+.s1f032bv{margin-bottom:8px;margin-top:4px;font-size:18px;}
+.sw61axo{display:inline-block;background:var(--toolbar-bg);box-sizing:border-box;overflow-y:auto;min-width:200px;}
+.s1shoasi{margin:2px 0;}.s1shoasi:not(:hover){opacity:0.2;}
+.s1adt0vs{border:3px solid transparent;padding:4px 0px;position:relative;background:var(--toolbar-bg);box-sizing:border-box;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}.s1adt0vs[data-is-over='1']{border:3px dotted var(--font-hover-bg);}.s1adt0vs[data-is-dragging='1']{opacity:0.4;}.s1adt0vs[data-selected='1']{color:var(--font-selected-color);background:var(--font-selected-bg);}.s1adt0vs[data-selected='1'] .s1shoasi{color:white;}.s1adt0vs[data-selected='0'][data-disabled='0']{background:var(--font-bg);color:var(--font-color);}.s1adt0vs[data-selected='0'][data-disabled='0']:hover{color:var(--font-hover-color);background:var(--font-hover-bg);}.s1adt0vs[data-disabled='1']{cursor:default;color:var(--font-disabled-color);background:var(--font-disabled-bg);}.s1adt0vs[data-disabled='0']{cursor:move;}.s1adt0vs > span{height:20px;line-height:1;color:#8a8a8a;}.s1adt0vs > span > svg{fill:#8a8a8a;width:20px;height:20px;padding:0 4px;-webkit-transform:scale(0.75);-ms-transform:scale(0.75);transform:scale(0.75);}
+.svyjq0t{margin:2px 0;}.svyjq0t[data-visible='false']{opacity:0.2;}
+.s1vztggb{margin:2px 0;}.s1vztggb[data-locked='false']{opacity:0.2;}
+.s1fgf9tg[data-grid='false'] svg{opacity:0.2;}
+.s1rl6big{-webkit-flex:1;-ms-flex:1;flex:1;}
+.sbpkotp{bottom:0;left:unset;top:unset;max-height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s12cgrwn{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-y:auto;}
+.s1jzw7d9{opacity:0.6;text-align:center;padding:12px 0px;}
+.s3kynji{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s3kynji[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1614rl3{position:relative;display:inline-block;}
+.s1qu0ers{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;bottom:unset;top:100%;}.s1qu0ers[data-vertical='1']{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.s1y35t9y{position:relative;display:inline-block;}
+.s1hezj2d{z-index:3;position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;left:0;right:0;bottom:0;top:0;}.s1hezj2d[data-position='center']{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}.s1hezj2d[data-position='bottom']{-webkit-align-items:end;-webkit-box-align:end;-ms-flex-align:end;align-items:end;}
+.spuj31h{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:4px;border-radius:8px;white-space:nowrap;position:relative;}
+.s1ulcd40{position:absolute;left:0;top:0;right:0;bottom:0;background:#00000073;}
+.s1rncfwv form{grid-template-columns:3fr 1fr 1fr;}.s1rncfwv form input{color:var(--font-color);border:1px solid var(--font-color);background:var(--toolbar-bg);outline:none;}
+.s1gorp95{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;height:36px;}
+.s1ivsaf6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-height:36px;background:var(--toolbar-bg);border-bottom:1px solid var(--divider-color);box-sizing:border-box;}
+.sv0y70r{grid-template-columns:1fr 1fr 1fr;}
+.s1dqu4j7{width:20px;height:20px;box-sizing:border-box;border-radius:50%;}.s1dqu4j7[data-mode='fill']{border:1px solid #80808038;background:var(--s1dqu4j7-0);}.s1dqu4j7[data-mode='stroke']{border:4px solid #80808038;}.s1dqu4j7[data-mode='stroke']:after{content:'';display:block;border-radius:100%;border:2px solid var(--s1dqu4j7-0);position:relative;width:18px;height:18px;left:-3px;top:-3px;box-sizing:border-box;}
+.s1j0ldko{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.s10ecqf5{width:20px;height:20px;box-sizing:border-box;border-radius:50%;color:var(--s10ecqf5-0);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;font-weight:bold;}
+.layoutPanelOpened .sb1jkk3.sb1jkk3{color:var(--font-selected-color);background:var(--font-selected-bg);}.sb1jkk3[data-hidden='1']{display:none;}
+.s4h1871{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;max-width:100%;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.sfr849o{padding:16px;}
+.s11cdkmf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;}
+.s16o63ah{font-family:var(--s16o63ah-0);}
+.s1yz5lc1{display:inline-block;width:6px;height:2px;background:transparent;vertical-align:middle;}
+.s1k64iv7{display:inline-block;}.s1k64iv7[data-type='0'] .s1yz5lc1{background:currentColor;}.s1k64iv7[data-type='2']{position:relative;left:3px;}.s1k64iv7[data-type='2'] .s1yz5lc1:nth-child(3n-1){background:currentColor;width:12px;}.s1k64iv7[data-type='2'] .s1yz5lc1:nth-child(n+11){display:none;}.s1k64iv7[data-type='1'] .s1yz5lc1:nth-child(2n+1){background:currentColor;}
+.s1bq28wy{position:absolute;left:0;top:50%;-webkit-transform:translate3d(-25%,-50%,0px);-ms-transform:translate3d(-25%,-50%,0px);transform:translate3d(-25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:15px solid currentColor;}
+.sej9ve5{position:absolute;right:0;top:50%;-webkit-transform:translate3d(25%,-50%,0px);-ms-transform:translate3d(25%,-50%,0px);transform:translate3d(25%,-50%,0px);display:inline-block;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:15px solid currentColor;}
+.s5asd7a{position:relative;display:inline-block;width:60px;height:2px;background:currentColor;vertical-align:middle;}.s5asd7a[data-type='0'] .s1bq28wy,.s5asd7a[data-type='1'] .s1bq28wy{display:none;}.s5asd7a[data-type='0'] .sej9ve5,.s5asd7a[data-type='2'] .sej9ve5{display:none;}
+.s17kh6p4{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:var(--toolbar-bg);position:relative;height:36px;border-top:1px solid var(--divider-color);box-sizing:border-box;}
+.s1fluhcn{-webkit-flex:1;-ms-flex:1;flex:1;}
+.sg7vrwb{grid-template-columns:repeat(auto-fill,40px);width:100%;}
+.s1xg1lj6{display:inline-block;padding:12px 48px;margin:4px;max-width:calc(100% - 24px);overflow-wrap:break-word;box-sizing:border-box;-webkit-transition:all 500ms;transition:all 500ms;opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}.s1xg1lj6[data-type='0']{background:#646464;color:white;}.s1xg1lj6[data-type='1']{background:#c3a200;color:black;}.s1xg1lj6[data-type='2']{background:#911717;color:white;}.s1xg1lj6[data-type='3']{background:#088900;color:white;}.s1xg1lj6[data-is-shown='1']{opacity:1;-webkit-transform:translate3d(0px,0px,0px);-ms-transform:translate3d(0px,0px,0px);transform:translate3d(0px,0px,0px);}.s1xg1lj6[data-is-shown='0']{opacity:0;-webkit-transform:translate3d(0px,40px,0px);-ms-transform:translate3d(0px,40px,0px);transform:translate3d(0px,40px,0px);}
+.sg1lk71{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;position:absolute;z-index:4;bottom:0;left:0;right:0;height:0px;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.s15r7ba{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:2;top:0;bottom:0;left:0;right:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#00000050;-webkit-transition:opacity 300ms linear;transition:opacity 300ms linear;opacity:0;}.s15r7ba[data-loading='visible']{opacity:1;}
+.s19n4ela{width:40px;height:40px;position:relative;-webkit-transform:rotate(10deg);-ms-transform:rotate(10deg);transform:rotate(10deg);-webkit-animation:react-paint-rotation-s19n4ela 1s infinite;animation:react-paint-rotation-s19n4ela 1s infinite;}@-webkit-keyframes react-paint-rotation-s19n4ela{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes react-paint-rotation-s19n4ela{from{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);}to{-webkit-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);}}
+.ssemdwq{border-radius:50%;position:absolute;width:15px;height:15px;}.ssemdwq:nth-child(1){left:0;background-color:#5c6bc0;}.ssemdwq:nth-child(2){right:0;background-color:#8bc34a;}.ssemdwq:nth-child(3){bottom:0;background-color:#ffb74d;}.ssemdwq:nth-child(4){bottom:0;right:0;background-color:#f44336;}
+.sdhgr8u{--toolbar-bg:var(--sdhgr8u-0);--divider-color:var(--sdhgr8u-1);--font-radius:var(--sdhgr8u-2);--font-disabled-color:var(--sdhgr8u-3);--font-disabled-bg:var(--sdhgr8u-4);--font-color:var(--sdhgr8u-5);--font-bg:var(--sdhgr8u-6);--font-selected-color:var(--sdhgr8u-7);--font-selected-bg:var(--sdhgr8u-8);--font-hover-color:var(--sdhgr8u-9);--font-hover-bg:var(--sdhgr8u-10);--canvas-bg:var(--sdhgr8u-11);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;color:var(--font-color);position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}.sdhgr8u hr{width:100%;border:none;border-top:1px solid var(--divider-color);}.sdhgr8u[data-grow='false']{max-width:var(--sdhgr8u-12);}.sdhgr8u[data-shrink='false']{min-width:var(--sdhgr8u-13);}
+.sm24hcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;position:relative;max-width:100%;z-index:1;aspect-ratio:var(--sm24hcl-2);}.sm24hcl[data-grow='true']{width:100%;}.sm24hcl[data-grow='false']{width:var(--sm24hcl-1);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.6.2",
+  "version": "0.6.5",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",
@@ -12,6 +12,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@babel/runtime": "^7.16.7",
     "@linaria/core": "^3.0.0-beta.15",
     "@linaria/react": "^3.0.0-beta.15",
     "lodash": "^4.17.20"
@@ -23,7 +24,6 @@
     "@babel/preset-env": "^7.16.8",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.16.7",
-    "@babel/runtime": "^7.16.7",
     "@linaria/babel-preset": "^3.0.0-beta.15",
     "@linaria/shaker": "^3.0.0-beta.15",
     "@linaria/webpack-loader": "^3.0.0-beta.16",