@yorab/react-paint 0.6.5 → 0.6.6

package/dist/hooks/useShapes.js

@@ -5,15 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _react = require("react");
 
@@ -21,126 +13,86 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _data = require("../utils/data");
 
-var useShapes = function useShapes() {
-  var onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp["default"].noop;
-  var shapesRef = (0, _react.useRef)([]);
-  var onDataChangedRef = (0, _react.useRef)(onDataChanged);
+const useShapes = function () {
+  let onDataChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _fp.default.noop;
+  const shapesRef = (0, _react.useRef)([]);
+  const onDataChangedRef = (0, _react.useRef)(onDataChanged);
   onDataChangedRef.current = onDataChanged;
-
-  var _useState = (0, _react.useState)(undefined),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedShape = _useState2[0],
-      setSelectedShape = _useState2[1];
-
-  var _useState3 = (0, _react.useState)({
+  const [selectedShape, setSelectedShape] = (0, _react.useState)(undefined);
+  const [savedShapes, setSavedShapes] = (0, _react.useState)({
     states: [{
       shapes: [],
       selectedShape: undefined
     }],
     cursor: 0
-  }),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      savedShapes = _useState4[0],
-      setSavedShapes = _useState4[1];
-
-  var canGoBackward = savedShapes.cursor > 0;
-  var canGoForward = savedShapes.cursor < savedShapes.states.length - 1;
-  var canClear = shapesRef.current.length > 0;
-  var saveShapes = (0, _react.useCallback)(function () {
-    setSavedShapes(function (prevSavedShaped) {
-      return _fp["default"].isEqual(_fp["default"].get([prevSavedShaped.cursor, 'shapes'], prevSavedShaped.states), shapesRef.current) ? prevSavedShaped : {
-        states: [].concat((0, _toConsumableArray2["default"])(prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1)), [{
+  });
+  const canGoBackward = savedShapes.cursor > 0;
+  const canGoForward = savedShapes.cursor < savedShapes.states.length - 1;
+  const canClear = shapesRef.current.length > 0;
+  const saveShapes = (0, _react.useCallback)(() => {
+    setSavedShapes(prevSavedShaped => {
+      return _fp.default.isEqual(_fp.default.get([prevSavedShaped.cursor, 'shapes'], prevSavedShaped.states), shapesRef.current) ? prevSavedShaped : {
+        states: [...prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1), {
           shapes: shapesRef.current,
-          selectedShape: selectedShape
-        }]),
+          selectedShape
+        }],
         cursor: prevSavedShaped.cursor + 1
       };
     });
   }, [selectedShape]);
-  var addShape = (0, _react.useCallback)(function (newShape) {
-    shapesRef.current = [newShape].concat((0, _toConsumableArray2["default"])(shapesRef.current));
+  const addShape = (0, _react.useCallback)(newShape => {
+    shapesRef.current = [newShape, ...shapesRef.current];
   }, []);
-  var addPictureShape = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(fileOrUrl) {
-      var maxWidth,
-          maxHeight,
-          pictureShape,
-          _args = arguments;
-      return _regenerator["default"].wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              maxWidth = _args.length > 1 && _args[1] !== undefined ? _args[1] : 300;
-              maxHeight = _args.length > 2 && _args[2] !== undefined ? _args[2] : 300;
-              _context.next = 4;
-              return (0, _data.createPicture)(fileOrUrl, maxWidth, maxHeight);
-
-            case 4:
-              pictureShape = _context.sent;
-              addShape(pictureShape);
-              saveShapes();
-              return _context.abrupt("return", pictureShape);
-
-            case 8:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [addShape, saveShapes]);
-  var updateShape = (0, _react.useCallback)(function (updatedShape) {
-    var withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-    shapesRef.current = shapesRef.current.map(function (marker) {
+  const addPictureShape = (0, _react.useCallback)(async function (fileOrUrl) {
+    let maxWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
+    let maxHeight = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 300;
+    const pictureShape = await (0, _data.createPicture)(fileOrUrl, maxWidth, maxHeight);
+    addShape(pictureShape);
+    saveShapes();
+    return pictureShape;
+  }, [addShape, saveShapes]);
+  const updateShape = (0, _react.useCallback)(function (updatedShape) {
+    let withSave = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    shapesRef.current = shapesRef.current.map(marker => {
       return marker.id === (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.id) ? updatedShape : marker;
     });
-    setSelectedShape(function (prevSelectedShape) {
-      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === updatedShape.id ? updatedShape : prevSelectedShape;
-    });
+    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === updatedShape.id ? updatedShape : prevSelectedShape);
     withSave && saveShapes();
   }, [selectedShape, saveShapes]);
-  var updateShapes = (0, _react.useCallback)(function (newShapes) {
-    var pureShapes = newShapes.map(function (shape) {
-      return _fp["default"].omit(['chosen'], shape);
-    });
+  const updateShapes = (0, _react.useCallback)(newShapes => {
+    const pureShapes = newShapes.map(shape => _fp.default.omit(['chosen'], shape));
     shapesRef.current = pureShapes;
     saveShapes();
   }, [saveShapes]);
-  var removeShape = (0, _react.useCallback)(function (shape) {
-    setSelectedShape(function (prevSelectedShape) {
-      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === shape.id ? undefined : prevSelectedShape;
-    });
-    shapesRef.current = _fp["default"].remove({
+  const removeShape = (0, _react.useCallback)(shape => {
+    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === shape.id ? undefined : prevSelectedShape);
+    shapesRef.current = _fp.default.remove({
       id: shape.id
     }, shapesRef.current);
     saveShapes();
   }, [saveShapes]);
-  var backwardShape = (0, _react.useCallback)(function () {
-    setSavedShapes(function (prevSavedShaped) {
-      var newCursor = Math.max(0, prevSavedShaped.cursor - 1);
-      shapesRef.current = _fp["default"].get([newCursor, 'shapes'], prevSavedShaped.states);
-      setSelectedShape(_fp["default"].get([newCursor, 'selectedShape'], prevSavedShaped.states));
-      return _fp["default"].set('cursor', newCursor, prevSavedShaped);
+  const backwardShape = (0, _react.useCallback)(() => {
+    setSavedShapes(prevSavedShaped => {
+      const newCursor = Math.max(0, prevSavedShaped.cursor - 1);
+      shapesRef.current = _fp.default.get([newCursor, 'shapes'], prevSavedShaped.states);
+      setSelectedShape(_fp.default.get([newCursor, 'selectedShape'], prevSavedShaped.states));
+      return _fp.default.set('cursor', newCursor, prevSavedShaped);
     });
   }, []);
-  var forwardShape = (0, _react.useCallback)(function () {
-    setSavedShapes(function (prevSavedShaped) {
-      var newCursor = Math.min(prevSavedShaped.states.length - 1, prevSavedShaped.cursor + 1);
-      shapesRef.current = _fp["default"].get([newCursor, 'shapes'], prevSavedShaped.states);
-      setSelectedShape(_fp["default"].get([newCursor, 'selectedShape'], prevSavedShaped.states));
-      return _fp["default"].set('cursor', newCursor, prevSavedShaped);
+  const forwardShape = (0, _react.useCallback)(() => {
+    setSavedShapes(prevSavedShaped => {
+      const newCursor = Math.min(prevSavedShaped.states.length - 1, prevSavedShaped.cursor + 1);
+      shapesRef.current = _fp.default.get([newCursor, 'shapes'], prevSavedShaped.states);
+      setSelectedShape(_fp.default.get([newCursor, 'selectedShape'], prevSavedShaped.states));
+      return _fp.default.set('cursor', newCursor, prevSavedShaped);
     });
   }, []);
-  var clearShapes = (0, _react.useCallback)(function () {
-    var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-    var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  const clearShapes = (0, _react.useCallback)(function () {
+    let shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    let clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     setSelectedShape(undefined);
     shapesRef.current = shapesToInit;
-    setSavedShapes(function (prevSavedShaped) {
+    setSavedShapes(prevSavedShaped => {
       return clearHistory ? {
         states: [{
           shapes: shapesToInit,
@@ -148,87 +100,83 @@ var useShapes = function useShapes() {
         }],
         cursor: 0
       } : {
-        states: [].concat((0, _toConsumableArray2["default"])(prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1)), [{
+        states: [...prevSavedShaped.states.slice(0, prevSavedShaped.cursor + 1), {
           shapes: shapesToInit,
           selectedShape: undefined
-        }]),
+        }],
         cursor: prevSavedShaped.cursor + 1
       };
     });
   }, []);
-  var moveShapes = (0, _react.useCallback)(function (firstShapeId, lastShapeId) {
-    var shapes = shapesRef.current;
+  const moveShapes = (0, _react.useCallback)((firstShapeId, lastShapeId) => {
+    const shapes = shapesRef.current;
 
-    var firstShapeIndex = _fp["default"].findIndex({
+    const firstShapeIndex = _fp.default.findIndex({
       id: firstShapeId
     }, shapes);
 
-    var lastShapeIndex = _fp["default"].findIndex({
+    const lastShapeIndex = _fp.default.findIndex({
       id: lastShapeId
     }, shapes); // todo utils
 
 
     if (firstShapeIndex < lastShapeIndex) {
-      updateShapes([].concat((0, _toConsumableArray2["default"])(_fp["default"].slice(0, firstShapeIndex, shapes)), (0, _toConsumableArray2["default"])(_fp["default"].slice(firstShapeIndex + 1, lastShapeIndex + 1, shapes)), [shapes[firstShapeIndex]], (0, _toConsumableArray2["default"])(_fp["default"].slice(lastShapeIndex + 1, shapes.length, shapes))));
+      updateShapes([..._fp.default.slice(0, firstShapeIndex, shapes), ..._fp.default.slice(firstShapeIndex + 1, lastShapeIndex + 1, shapes), shapes[firstShapeIndex], ..._fp.default.slice(lastShapeIndex + 1, shapes.length, shapes)]);
     } else {
-      updateShapes([].concat((0, _toConsumableArray2["default"])(_fp["default"].slice(0, lastShapeIndex, shapes)), [shapes[firstShapeIndex]], (0, _toConsumableArray2["default"])(_fp["default"].slice(lastShapeIndex, firstShapeIndex, shapes)), (0, _toConsumableArray2["default"])(_fp["default"].slice(firstShapeIndex + 1, shapes.length, shapes))));
+      updateShapes([..._fp.default.slice(0, lastShapeIndex, shapes), shapes[firstShapeIndex], ..._fp.default.slice(lastShapeIndex, firstShapeIndex, shapes), ..._fp.default.slice(firstShapeIndex + 1, shapes.length, shapes)]);
     }
   }, [updateShapes]);
-  var toggleShapeVisibility = (0, _react.useCallback)(function (shape) {
-    var shapes = shapesRef.current;
+  const toggleShapeVisibility = (0, _react.useCallback)(shape => {
+    const shapes = shapesRef.current;
 
-    var shapeIndex = _fp["default"].findIndex({
+    const shapeIndex = _fp.default.findIndex({
       id: shape.id
     }, shapes);
 
     if (shapeIndex < 0) return;
 
-    var newShape = _fp["default"].set('visible', shape.visible === false, shape);
+    const newShape = _fp.default.set('visible', shape.visible === false, shape);
 
-    setSelectedShape(function (prevSelectedShape) {
-      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape;
-    });
-    updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
+    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape);
+    updateShapes(_fp.default.set(shapeIndex, newShape, shapes));
   }, [updateShapes]);
-  var toggleShapeLock = (0, _react.useCallback)(function (shape) {
-    var shapes = shapesRef.current;
+  const toggleShapeLock = (0, _react.useCallback)(shape => {
+    const shapes = shapesRef.current;
 
-    var shapeIndex = _fp["default"].findIndex({
+    const shapeIndex = _fp.default.findIndex({
       id: shape.id
     }, shapes);
 
     if (shapeIndex < 0) return;
 
-    var newShape = _fp["default"].set('locked', !shape.locked, shape);
+    const newShape = _fp.default.set('locked', !shape.locked, shape);
 
-    setSelectedShape(function (prevSelectedShape) {
-      return (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape;
-    });
-    updateShapes(_fp["default"].set(shapeIndex, newShape, shapes));
+    setSelectedShape(prevSelectedShape => (prevSelectedShape === null || prevSelectedShape === void 0 ? void 0 : prevSelectedShape.id) === newShape.id ? newShape : prevSelectedShape);
+    updateShapes(_fp.default.set(shapeIndex, newShape, shapes));
   }, [updateShapes]);
-  (0, _react.useEffect)(function () {
+  (0, _react.useEffect)(() => {
     onDataChangedRef.current();
   }, [savedShapes]);
   return {
-    shapesRef: shapesRef,
-    selectedShape: selectedShape,
-    addShape: addShape,
-    addPictureShape: addPictureShape,
-    moveShapes: moveShapes,
-    saveShapes: saveShapes,
-    setSelectedShape: setSelectedShape,
-    toggleShapeVisibility: toggleShapeVisibility,
-    toggleShapeLock: toggleShapeLock,
-    removeShape: removeShape,
-    updateShape: updateShape,
-    backwardShape: backwardShape,
-    forwardShape: forwardShape,
-    clearShapes: clearShapes,
-    canGoBackward: canGoBackward,
-    canGoForward: canGoForward,
-    canClear: canClear
+    shapesRef,
+    selectedShape,
+    addShape,
+    addPictureShape,
+    moveShapes,
+    saveShapes,
+    setSelectedShape,
+    toggleShapeVisibility,
+    toggleShapeLock,
+    removeShape,
+    updateShape,
+    backwardShape,
+    forwardShape,
+    clearShapes,
+    canGoBackward,
+    canGoForward,
+    canClear
   };
 };
 
 var _default = useShapes;
-exports["default"] = _default;
+exports.default = _default;

package/dist/hooks/useSnackbar.js

@@ -5,11 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _snackbar = require("../constants/snackbar");
 
@@ -17,70 +13,44 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _react = require("react");
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+const useSnackbar = () => {
+  const timers = (0, _react.useRef)([]);
+  const [snackbarList, setSnackbarList] = (0, _react.useState)([]);
 
-var useSnackbar = function useSnackbar() {
-  var timers = (0, _react.useRef)([]);
-
-  var _useState = (0, _react.useState)([]),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      snackbarList = _useState2[0],
-      setSnackbarList = _useState2[1];
-
-  var removeSnackbar = function removeSnackbar(id) {
-    setSnackbarList(function (prev) {
-      return _fp["default"].remove({
-        id: id
-      }, prev);
-    });
+  const removeSnackbar = id => {
+    setSnackbarList(prev => _fp.default.remove({
+      id: id
+    }, prev));
   };
 
-  var addSnackbar = function addSnackbar(_ref) {
-    var _ref$type = _ref.type,
-        type = _ref$type === void 0 ? _snackbar.SNACKBAR_DEFAULT_SETTINGS.type : _ref$type,
-        _ref$duration = _ref.duration,
-        duration = _ref$duration === void 0 ? _snackbar.SNACKBAR_DEFAULT_SETTINGS.duration : _ref$duration,
-        text = _ref.text;
-    var newSnackbar = {
-      id: _fp["default"].uniqueId('snackbar_'),
-      duration: duration,
-      type: type,
-      text: text
+  const addSnackbar = _ref => {
+    let {
+      type = _snackbar.SNACKBAR_DEFAULT_SETTINGS.type,
+      duration = _snackbar.SNACKBAR_DEFAULT_SETTINGS.duration,
+      text
+    } = _ref;
+    const newSnackbar = {
+      id: _fp.default.uniqueId('snackbar_'),
+      duration,
+      type,
+      text
     };
-    setSnackbarList(function (prev) {
-      return [].concat((0, _toConsumableArray2["default"])(prev), [newSnackbar]);
-    });
-    timers.current = [].concat((0, _toConsumableArray2["default"])(timers.current), [setTimeout(function () {
-      return removeSnackbar(newSnackbar.id);
-    }, duration)]);
+    setSnackbarList(prev => [...prev, newSnackbar]);
+    timers.current = [...timers.current, setTimeout(() => removeSnackbar(newSnackbar.id), duration)];
   };
 
-  (0, _react.useEffect)(function () {
-    return function () {
-      var _iterator = _createForOfIteratorHelper(timers.current),
-          _step;
-
-      try {
-        for (_iterator.s(); !(_step = _iterator.n()).done;) {
-          var timer = _step.value;
-          clearTimeout(timer);
-        }
-      } catch (err) {
-        _iterator.e(err);
-      } finally {
-        _iterator.f();
+  (0, _react.useEffect)(() => {
+    return () => {
+      for (const timer of timers.current) {
+        clearTimeout(timer);
       }
     };
   }, []);
   return {
-    snackbarList: snackbarList,
-    addSnackbar: addSnackbar
+    snackbarList,
+    addSnackbar
   };
 };
 
 var _default = useSnackbar;
-exports["default"] = _default;
+exports.default = _default;

package/dist/styles.css

@@ -31,58 +31,58 @@
   min-width: 0;
 }
 
-.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);}
+.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);width:-webkit-max-content;width:-moz-max-content;width:max-content;}.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:20px;height:20px;box-sizing:border-box;border-radius:50%;}.snh2jyk[data-mode='fill']{border:1px solid #80808038;background:var(--snh2jyk-0);}.snh2jyk[data-mode='stroke']{border:4px solid #80808038;}.snh2jyk[data-mode='stroke']:after{content:'';display:block;border-radius:100%;border:2px solid var(--snh2jyk-0);position:relative;width:18px;height:18px;left:-3px;top:-3px;box-sizing:border-box;}
+.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:20px;height:20px;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;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='2']{position:relative;left:3px;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(3n-1){background:currentColor;width:12px;}.se26iq6[data-type='2'] .s1qssg4n:nth-child(n+11){display:none;}.se26iq6[data-type='1'] .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);}