@yorab/react-paint 0.4.0 → 0.4.1

package/Changelog.md

@@ -1,3 +1,11 @@
+# V.0.4.1
+
+- prevent mounting selection canvas when viewer mode
+- prevent drawing selection when not needed
+- Click on toolbar tool group always enable a tool
+- fix input and select options not being impacted by
+- new reponsive for toolbar
+
 # V.0.4.0
 
 - Add possibility to customize UI from props

package/dist/components/App.js

@@ -568,6 +568,7 @@ var App = function App(_ref5) {
     fontHoverBackgroundColor: fontHoverBackgroundColor,
     canvasBackgroundColor: canvasBackgroundColor
   }, isEditMode && /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    width: canvasSize.width,
     disabled: disabled,
     activeTool: activeTool,
     clearCanvas: clearCanvas,
@@ -612,7 +613,8 @@ var App = function App(_ref5) {
     setSelectionMode: setSelectionMode,
     selectionColor: canvasSelectionColor,
     selectionWidth: canvasSelectionWidth,
-    selectionPadding: canvasSelectionPadding
+    selectionPadding: canvasSelectionPadding,
+    isEditMode: isEditMode
   }), isEditMode && layersManipulation && /*#__PURE__*/_react["default"].createElement(_Layouts["default"], {
     withGrid: withGrid,
     setWithGrid: setWithGrid,

package/dist/components/Canvas.js

@@ -39,19 +39,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var drawCanvas = function drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectionPadding, selectionWidth, selectionColor, selectedShape) {
+var renderDrawCanvas = function renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape) {
   var width = canvasSize.width,
       height = canvasSize.height,
       scaleRatio = canvasSize.scaleRatio;
   drawCtx.clearRect(0, 0, width, height);
-  selectionCtx.clearRect(0, 0, width, height);
 
   for (var i = shapes.length - 1; i >= 0; i--) {
     if (selectionMode.mode !== _Mode.SelectionModeLib.textedition || shapes[i] !== selectedShape) {
       (0, _draw.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
     }
   }
+};
 
+var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) {
+  var width = canvasSize.width,
+      height = canvasSize.height,
+      scaleRatio = canvasSize.scaleRatio;
+  selectionCtx.clearRect(0, 0, width, height);
   selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
@@ -111,7 +116,8 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       setSelectionMode = _ref2.setSelectionMode,
       selectionWidth = _ref2.selectionWidth,
       selectionColor = _ref2.selectionColor,
-      selectionPadding = _ref2.selectionPadding;
+      selectionPadding = _ref2.selectionPadding,
+      isEditMode = _ref2.isEditMode;
   var drawCanvasRef = (0, _react.useRef)(null);
   var selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 
@@ -163,14 +169,21 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     updateSingleShape(resizedShape);
   }, [updateSingleShape, selectedShape]);
   (0, _react.useEffect)(function () {
-    var _drawCanvasRef$curren2, _selectionCanvasRef$c;
+    var _drawCanvasRef$curren2;
 
     var drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
+    drawCtx && window.requestAnimationFrame(function () {
+      return renderDrawCanvas(drawCtx, selectionMode, canvasSize, canvasOffset, shapes, selectionPadding, selectedShape);
+    });
+  }, [shapes, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
+  (0, _react.useEffect)(function () {
+    var _selectionCanvasRef$c;
+
     var selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    drawCtx && selectionCtx && window.requestAnimationFrame(function () {
-      return drawCanvas(drawCtx, selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, shapes, selectionPadding, selectionWidth, selectionColor, selectedShape);
+    selectionCtx && window.requestAnimationFrame(function () {
+      return renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape);
     });
-  }, [shapes, selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
+  }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
   return /*#__PURE__*/_react["default"].createElement(StyledCanvasBox, null, /*#__PURE__*/_react["default"].createElement(StyledCanvasContainer, {
     "data-grid": withGrid,
     "data-grow": canGrow
@@ -179,13 +192,13 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     "data-grow": canGrow,
     width: canvasSize.width,
     height: canvasSize.height
-  }), /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
+  }), isEditMode && /*#__PURE__*/_react["default"].createElement(StyledSelectionCanvas, {
     ref: selectionCanvasRef,
     width: canvasSize.width,
     height: canvasSize.height,
     "data-grow": canGrow,
     cursor: activeTool !== _Shapes.ToolEnum.selection && activeTool !== _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool === _Shapes.ToolEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : 'default'
-  }), selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
+  }), isEditMode && selectionMode.mode === _Mode.SelectionModeLib.textedition && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === _Shapes.ShapeEnum.text && /*#__PURE__*/_react["default"].createElement(_EditTextBox["default"], {
     scaleRatio: canvasSize.scaleRatio,
     disabled: disabled,
     shape: selectedShape,

package/dist/components/settings/ColorField.js

@@ -49,10 +49,6 @@ var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
     }]
   }
 });
-var StyledColorButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
-  name: "StyledColorButton",
-  "class": "sttf061"
-});
 
 var ColorField = function ColorField(_ref3) {
   var selectedSettings = _ref3.selectedSettings,
@@ -98,7 +94,7 @@ var ColorField = function ColorField(_ref3) {
     title: title,
     alignment: "left"
   }, /*#__PURE__*/_react["default"].createElement("div", null, _style.STYLE_COLORS.map(function (color, index) {
-    return /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+    return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,
       selected: color === value,
@@ -109,14 +105,14 @@ var ColorField = function ColorField(_ref3) {
     }, /*#__PURE__*/_react["default"].createElement(StyledColor, {
       color: color === 'transparent' ? "url('data:image/svg+xml,".concat(_icons.encodedTransparentIcon, "')") : color
     }));
-  }), /*#__PURE__*/_react["default"].createElement(StyledColorButton, {
+  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "color",
     title: "Custom color",
     selected: !_fp["default"].includes(value, _style.STYLE_COLORS),
     value: value,
     onChange: handleChange
   }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
-    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'black' : value
+    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'var(--font-color)' : value
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: _icons.paletteIcon

package/dist/components/toolbox/MenuGroup.js

@@ -52,6 +52,16 @@ var MenuGroup = function MenuGroup(_ref) {
   var _ref3;
 
   var activeTool = _ref.activeTool,
+      withActionsInMenu = _ref.withActionsInMenu,
+      _ref$hasActionToUndo = _ref.hasActionToUndo,
+      hasActionToUndo = _ref$hasActionToUndo === void 0 ? false : _ref$hasActionToUndo,
+      _ref$hasActionToRedo = _ref.hasActionToRedo,
+      hasActionToRedo = _ref$hasActionToRedo === void 0 ? false : _ref$hasActionToRedo,
+      _ref$hasActionToClear = _ref.hasActionToClear,
+      hasActionToClear = _ref$hasActionToClear === void 0 ? false : _ref$hasActionToClear,
+      undoAction = _ref.undoAction,
+      redoAction = _ref.redoAction,
+      clearCanvas = _ref.clearCanvas,
       alignment = _ref.alignment,
       group = _ref.group,
       _ref$vertical = _ref.vertical,
@@ -126,8 +136,7 @@ var MenuGroup = function MenuGroup(_ref) {
 
   var withPicture = _fp["default"].includes(_Shapes.ShapeEnum.picture, availableTools);
 
-  var withDivider = withPicture && (withLoadAndSave || withExport);
-  var withMenu = withPicture || withLoadAndSave || withExport;
+  var withMenu = withActionsInMenu || withPicture || withLoadAndSave || withExport;
   return withMenu ? /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isActive,
     title: group.title,
@@ -137,7 +146,33 @@ var MenuGroup = function MenuGroup(_ref) {
   }), isOpen && /*#__PURE__*/_react["default"].createElement(StyledPanel, {
     vertical: vertical,
     alignment: alignment
-  }, withPicture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }, withActionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    type: _Shapes.ToolEnum.undo,
+    disabled: disabled || !hasActionToUndo,
+    lib: "Undo",
+    img: _icons.undoIcon,
+    isActive: activeTool === _Shapes.ToolEnum.undo,
+    setActive: undoAction
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    type: _Shapes.ToolEnum.redo,
+    disabled: disabled || !hasActionToRedo,
+    lib: "Redo",
+    img: _icons.redoIcon,
+    isActive: activeTool === _Shapes.ToolEnum.redo,
+    setActive: redoAction
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+    withText: true,
+    type: _Shapes.ToolEnum.clear,
+    disabled: disabled || !hasActionToClear,
+    lib: "Clear",
+    img: _icons.clearIcon,
+    isActive: activeTool === _Shapes.ToolEnum.clear,
+    setActive: function setActive() {
+      return clearCanvas();
+    }
+  }), (withPicture || withLoadAndSave) && /*#__PURE__*/_react["default"].createElement("hr", null)), withPicture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
     disabled: disabled,
     loadFile: addPicture,
@@ -151,7 +186,7 @@ var MenuGroup = function MenuGroup(_ref) {
     title: "Add picture from URL",
     icon: _icons.publicIcon,
     children: "Add picture from URL"
-  })), withDivider && /*#__PURE__*/_react["default"].createElement("hr", null), withLoadAndSave && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
+  }), withLoadAndSave && /*#__PURE__*/_react["default"].createElement("hr", null)), withLoadAndSave && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_LoadFileTool["default"], {
     withText: true,
     disabled: disabled,
     loadFile: loadFile,

package/dist/components/toolbox/Toolbar.js

@@ -39,6 +39,8 @@ 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 ACTIONS_MENU_BREAKPOINT = 400;
+var TOOLS_MENU_BREAKPOINT = 280;
 var StyledShrinkableTools = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledShrinkableTools",
   "class": "so6hnjf"
@@ -47,33 +49,27 @@ var StyledToolbox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledToolbox",
   "class": "s1c1dllr"
 });
-var StyledShrinkableToolsInner = /*#__PURE__*/(0, _react2.styled)("div")({
-  name: "StyledShrinkableToolsInner",
-  "class": "s1g032mh"
-});
 var StyledToolsModal = /*#__PURE__*/(0, _react2.styled)(_Modal["default"])({
   name: "StyledToolsModal",
-  "class": "s4owjrv"
+  "class": "s1g032mh"
 });
 var TOOLBAR_STRUCTURE = [{
   title: 'brush',
-  img: _icons.gestureIcon,
   tools: [_Shapes.ShapeEnum.brush],
   vertical: false
 }, {
   title: 'lines',
-  img: _icons.arrowIcon,
   tools: [_Shapes.ShapeEnum.line, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.polygon],
   vertical: false
 }, {
   title: 'shapes',
-  img: _icons.shapesIcon,
   tools: [_Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse],
   vertical: false
 }, _Shapes.ShapeEnum.text];
 
 var Toolbar = function Toolbar(_ref) {
-  var _ref$disabled = _ref.disabled,
+  var width = _ref.width,
+      _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       activeTool = _ref.activeTool,
       _ref$hasActionToUndo = _ref.hasActionToUndo,
@@ -104,6 +100,16 @@ var Toolbar = function Toolbar(_ref) {
       isPictureUrlModalOpen = _useState4[0],
       setIsPictureUrlModalOpen = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(width < ACTIONS_MENU_BREAKPOINT),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      actionsInMenu = _useState6[0],
+      setActionsInMenu = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(width < TOOLS_MENU_BREAKPOINT),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      toolsInMenu = _useState8[0],
+      setToolsInMenu = _useState8[1];
+
   var toggleTools = function toggleTools() {
     setIsMenuOpen(function (prev) {
       return !prev;
@@ -125,15 +131,44 @@ var Toolbar = function Toolbar(_ref) {
     setIsMenuOpen(false);
   };
 
+  (0, _react.useEffect)(function () {
+    setActionsInMenu(width < ACTIONS_MENU_BREAKPOINT);
+    setToolsInMenu(width < TOOLS_MENU_BREAKPOINT);
+  }, [width]);
   var currentStructure = (0, _toolbar.getCurrentStructure)(availableTools, TOOLBAR_STRUCTURE);
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledToolbox, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  var isAnyToolSelected = availableTools.includes(activeTool);
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(StyledToolbox, null, /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
+    withActionsInMenu: actionsInMenu,
+    disabled: disabled,
+    vertical: true,
+    alignment: "left",
+    group: {
+      title: 'Menu',
+      img: _icons.menuIcon
+    },
+    activeTool: activeTool,
+    addPicture: addPicture,
+    loadFile: loadFile,
+    saveFile: saveFile,
+    togglePictureUrlModal: openPictureUrlModal,
+    exportCanvasInFile: exportCanvasInFile,
+    availableTools: availableTools,
+    withLoadAndSave: withLoadAndSave,
+    withExport: withExport,
+    hasActionToUndo: hasActionToUndo,
+    hasActionToRedo: hasActionToRedo,
+    hasActionToClear: hasActionToClear,
+    undoAction: undoAction,
+    redoAction: redoAction,
+    clearCanvas: clearCanvas
+  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     type: _Shapes.ToolEnum.selection,
     disabled: disabled,
     lib: "selection",
     img: _icons.selectIcon,
     isActive: activeTool === _Shapes.ToolEnum.selection,
     setActive: setActiveTool
-  }), /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
+  }), !actionsInMenu && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Tool["default"], {
     type: _Shapes.ToolEnum.undo,
     disabled: disabled || !hasActionToUndo,
     lib: "Undo",
@@ -156,7 +191,13 @@ var Toolbar = function Toolbar(_ref) {
     setActive: function setActive() {
       return clearCanvas();
     }
-  }), /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, /*#__PURE__*/_react["default"].createElement(StyledShrinkableToolsInner, null, currentStructure.map(function (group, i) {
+  })), /*#__PURE__*/_react["default"].createElement(StyledShrinkableTools, null, toolsInMenu ? /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    disabled: disabled,
+    onClick: toggleTools,
+    title: "Toggle tools",
+    icon: _icons.shapesIcon,
+    selected: isAnyToolSelected
+  }) : currentStructure.map(function (group, i) {
     return /*#__PURE__*/_react["default"].createElement(_ToolbarGroup["default"], {
       disabled: disabled,
       key: i,
@@ -164,29 +205,7 @@ var Toolbar = function Toolbar(_ref) {
       group: group,
       setActiveTool: setActiveTool
     });
-  })), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    disabled: disabled,
-    onClick: toggleTools,
-    title: "Toggle tools",
-    icon: _icons.dotsIcon
-  })), /*#__PURE__*/_react["default"].createElement(_MenuGroup["default"], {
-    disabled: disabled,
-    vertical: true,
-    alignment: "right",
-    group: {
-      title: 'Menu',
-      img: _icons.menuIcon
-    },
-    activeTool: activeTool,
-    addPicture: addPicture,
-    loadFile: loadFile,
-    saveFile: saveFile,
-    togglePictureUrlModal: openPictureUrlModal,
-    exportCanvasInFile: exportCanvasInFile,
-    availableTools: availableTools,
-    withLoadAndSave: withLoadAndSave,
-    withExport: withExport
-  })), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
+  }))), isMenuOpen && /*#__PURE__*/_react["default"].createElement(StyledToolsModal, {
     onClose: toggleTools
   }, availableTools.map(function (toolType) {
     return toolType === _Shapes.ShapeEnum.picture ? null : /*#__PURE__*/_react["default"].createElement(_Tool["default"], {

package/dist/components/toolbox/ToolbarGroup.js

@@ -106,11 +106,11 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
 
   var isActive = _fp["default"].includes(activeTool, group === null || group === void 0 ? void 0 : group.tools);
 
-  var groupIcon = (_ref2 = localActiveTool ? (0, _style.getShapePicture)(localActiveTool) : group.img) !== null && _ref2 !== void 0 ? _ref2 : group.title;
+  var groupIcon = (_ref2 = localActiveTool ? (0, _style.getShapePicture)(localActiveTool) : group.tools && group.tools[0] && (0, _style.getShapePicture)(group.tools[0])) !== null && _ref2 !== void 0 ? _ref2 : group.title;
 
   var openPanel = function openPanel() {
-    if (localActiveTool) setActiveToolFromProps(localActiveTool);
-    setIsOpen(true);
+    if (localActiveTool) setActiveToolFromProps(localActiveTool);else group.tools && group.tools[0] && setActiveTool(group.tools[0]);
+    setIsOpen(true); // group.tools && group.tools[0] && setActiveTool(group.tools[0])
   };
 
   return /*#__PURE__*/_react["default"].createElement(StyledRelative, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {

package/dist/styles.css

@@ -33,9 +33,9 @@
 
 .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);}
 .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;}.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{position:absolute;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:100%;touch-action:none;display:block;}.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;cursor:var(--sa4oq48-0);}.sa4oq48[data-grow='true']{width:100%;}
+.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;}
@@ -58,24 +58,22 @@
 .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;}
 .svkxpz4{display:grid;background:var(--toolbar-bg);box-shadow:0 3px 8px rgb(0 0 0 / 24%);padding:12px;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);outline:none;}
-.so6hnjf{-webkit-flex:1;-ms-flex:1;flex:1;position:relative;height:100%;text-align:center;max-height:72px;}
+.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;max-height:36px;overflow:hidden;}
 .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{display:inline-block;text-align:left;margin-right:36px;text-align:right;}.s1g032mh + *{position:absolute;right:0;bottom:36px;}
-.s4owjrv{grid-template-columns:1fr 1fr 1fr;}
+.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{width:36px;height:36px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-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-size:48px;line-height:36px;position:relative;bottom:6px;font-weight:bold;}
-.sttf061{border-radius:50%;}
+.sfm1cqx{width:24px;height:24px;box-sizing:border-box;border-radius:50%;color:var(--sfm1cqx-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;}
 .s1ktxhkr{padding:16px;}
 .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:black;}.se26iq6[data-type='1']{position:relative;left:3px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(3n-1){background:black;width:12px;}.se26iq6[data-type='1'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(2n+1){background:black;}
-.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 black;}
-.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 black;}
-.scawaat{position:relative;display:inline-block;width:60px;height:2px;background:black;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;}
+.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;}
 .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);}
@@ -83,5 +81,5 @@
 .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;overflow:hidden;-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);}
+.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);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yorab/react-paint",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "keywords": [],
   "author": "Yohann Rabatel",
   "license": "MIT",