@yorab/react-paint 0.4.2 → 0.5.0

package/README.md

@@ -4,6 +4,7 @@
 
 - Text tool broken since 0.2.2
 - double click not working with touch (fix: fake it counting delay between touch)
+- selected style not saved when changing tool (since presets)
 
 ## mobile/touch
 

package/dist/components/App.js

@@ -19,10 +19,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _Shapes = require("../types/Shapes");
-
 var _Canvas = _interopRequireDefault(require("./Canvas"));
 
 var _Layouts = _interopRequireDefault(require("./settings/Layouts"));
@@ -59,6 +55,10 @@ var _useResizeObserver = _interopRequireDefault(require("../hooks/useResizeObser
 
 var _shapes = require("../constants/shapes");
 
+var _toolbar = require("../utils/toolbar");
+
+var _tools = require("../constants/tools");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -69,49 +69,49 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledApp",
-  "class": "s1v9piyg",
+  "class": "sdhgr8u",
   vars: {
-    "s1v9piyg-0": [function (props) {
+    "sdhgr8u-0": [function (props) {
       return props.toolbarBackgroundColor;
     }],
-    "s1v9piyg-1": [function (props) {
+    "sdhgr8u-1": [function (props) {
       return props.dividerColor;
     }],
-    "s1v9piyg-2": [function (props) {
+    "sdhgr8u-2": [function (props) {
       return props.fontRadius;
     }, "px"],
-    "s1v9piyg-3": [function (props) {
+    "sdhgr8u-3": [function (props) {
       return props.fontDisabledColor;
     }],
-    "s1v9piyg-4": [function (props) {
+    "sdhgr8u-4": [function (props) {
       return props.fontDisabledBackgroundColor;
     }],
-    "s1v9piyg-5": [function (props) {
+    "sdhgr8u-5": [function (props) {
       return props.fontColor;
     }],
-    "s1v9piyg-6": [function (props) {
+    "sdhgr8u-6": [function (props) {
       return props.fontBackgroundColor;
     }],
-    "s1v9piyg-7": [function (props) {
+    "sdhgr8u-7": [function (props) {
       return props.fontSelectedColor;
     }],
-    "s1v9piyg-8": [function (props) {
+    "sdhgr8u-8": [function (props) {
       return props.fontSelectedBackgroundColor;
     }],
-    "s1v9piyg-9": [function (props) {
+    "sdhgr8u-9": [function (props) {
       return props.fontHoverColor;
     }],
-    "s1v9piyg-10": [function (props) {
+    "sdhgr8u-10": [function (props) {
       return props.fontHoverBackgroundColor;
     }],
-    "s1v9piyg-11": [function (props) {
+    "sdhgr8u-11": [function (props) {
       return props.canvasBackgroundColor;
     }],
-    "s1v9piyg-12": [function (_ref) {
+    "sdhgr8u-12": [function (_ref) {
       var canvasWidth = _ref.canvasWidth;
       return "min(100%, ".concat(canvasWidth, "px)");
     }],
-    "s1v9piyg-13": [function (_ref2) {
+    "sdhgr8u-13": [function (_ref2) {
       var canvasWidth = _ref2.canvasWidth;
       return canvasWidth;
     }, "px"]
@@ -119,19 +119,18 @@ var StyledApp = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledRow = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledRow",
-  "class": "s6o5tmu",
+  "class": "sm24hcl",
   vars: {
-    "s6o5tmu-1": [function (_ref3) {
+    "sm24hcl-1": [function (_ref3) {
       var width = _ref3.width;
       return width;
     }, "px"],
-    "s6o5tmu-2": [function (_ref4) {
+    "sm24hcl-2": [function (_ref4) {
       var aspectRatio = _ref4.aspectRatio;
       return aspectRatio;
     }]
   }
 });
-var DEFAULT_TOOLS = [_Shapes.ShapeEnum.brush, _Shapes.ShapeEnum.line, _Shapes.ShapeEnum.polygon, _Shapes.ShapeEnum.curve, _Shapes.ShapeEnum.rect, _Shapes.ShapeEnum.square, _Shapes.ShapeEnum.circle, _Shapes.ShapeEnum.ellipse, _Shapes.ShapeEnum.text, _Shapes.ShapeEnum.picture];
 var DEFAULT_OPTIONS = {
   layersManipulation: true,
   gridVisible: false,
@@ -139,7 +138,9 @@ var DEFAULT_OPTIONS = {
   canShrink: true,
   withExport: true,
   withLoadAndSave: true,
-  availableTools: DEFAULT_TOOLS,
+  withUploadPicture: true,
+  withUrlPicture: false,
+  availableTools: _tools.DEFAULT_SHAPE_TOOLS,
   uiStyle: {
     toolbarBackgroundColor: 'white',
     dividerColor: '#36418129',
@@ -183,6 +184,8 @@ var App = function App(_ref5) {
       canShrink = _DEFAULT_OPTIONS$opti.canShrink,
       withExport = _DEFAULT_OPTIONS$opti.withExport,
       withLoadAndSave = _DEFAULT_OPTIONS$opti.withLoadAndSave,
+      withUploadPicture = _DEFAULT_OPTIONS$opti.withUploadPicture,
+      withUrlPicture = _DEFAULT_OPTIONS$opti.withUrlPicture,
       availableToolsFromProps = _DEFAULT_OPTIONS$opti.availableTools;
 
   var _DEFAULT_OPTIONS$uiSt = _objectSpread(_objectSpread({}, DEFAULT_OPTIONS.uiStyle), (_options$uiStyle = options === null || options === void 0 ? void 0 : options.uiStyle) !== null && _options$uiStyle !== void 0 ? _options$uiStyle : {}),
@@ -216,7 +219,7 @@ var App = function App(_ref5) {
       canvasSize = _useState2[0],
       setCanvasSize = _useState2[1];
 
-  var availableTools = _fp["default"].intersection(DEFAULT_TOOLS, availableToolsFromProps);
+  var availableTools = (0, _toolbar.sanitizeTools)(availableToolsFromProps, withUploadPicture || withUrlPicture);
 
   var _useComponent = (0, _useComponent2["default"])({
     disabled: disabled,
@@ -224,58 +227,42 @@ var App = function App(_ref5) {
   }),
       isInsideComponent = _useComponent.isInsideComponent;
 
-  var _useState3 = (0, _react.useState)({
-    style: {
-      fillColor: 'transparent',
-      strokeColor: 'black',
-      globalAlpha: 100,
-      lineWidth: 1,
-      lineDash: 0,
-      lineArrow: 0,
-      pointsCount: 3,
-      fontFamily: _style.STYLE_FONT_DEFAULT
-    }
-  }),
+  var _useState3 = (0, _react.useState)(false),
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-      defaultConf = _useState4[0],
-      setDefaultConf = _useState4[1];
+      isLoading = _useState4[0],
+      setIsLoading = _useState4[1];
 
   var _useState5 = (0, _react.useState)(false),
       _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-      isLoading = _useState6[0],
-      setIsLoading = _useState6[1];
+      isLayoutPanelShown = _useState6[0],
+      setIsLayoutPanelShown = _useState6[1];
 
-  var _useState7 = (0, _react.useState)(false),
+  var _useState7 = (0, _react.useState)([0, 0]),
       _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-      isLayoutPanelShown = _useState8[0],
-      setIsLayoutPanelShown = _useState8[1];
+      canvasOffset = _useState8[0],
+      setCanvasOffset = _useState8[1];
 
-  var _useState9 = (0, _react.useState)([0, 0]),
+  var _useState9 = (0, _react.useState)(undefined),
       _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-      canvasOffset = _useState10[0],
-      setCanvasOffset = _useState10[1];
+      canvasOffsetStartPosition = _useState10[0],
+      setCanvasOffsetStartPosition = _useState10[1];
 
-  var _useState11 = (0, _react.useState)(undefined),
+  var _useState11 = (0, _react.useState)(_tools.SELECTION_TOOL),
       _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-      canvasOffsetStartPosition = _useState12[0],
-      setCanvasOffsetStartPosition = _useState12[1];
+      activeTool = _useState12[0],
+      setActiveTool = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(_Shapes.ToolEnum.selection),
-      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
-      activeTool = _useState14[0],
-      setActiveTool = _useState14[1];
-
-  var _useState15 = (0, _react.useState)({
+  var _useState13 = (0, _react.useState)({
     mode: _Mode.SelectionModeLib["default"]
   }),
-      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
-      selectionMode = _useState16[0],
-      setSelectionMode = _useState16[1];
+      _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+      selectionMode = _useState14[0],
+      setSelectionMode = _useState14[1];
 
-  var _useState17 = (0, _react.useState)(gridVisible),
-      _useState18 = (0, _slicedToArray2["default"])(_useState17, 2),
-      withGrid = _useState18[0],
-      setWithGrid = _useState18[1];
+  var _useState15 = (0, _react.useState)(gridVisible),
+      _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
+      withGrid = _useState16[0],
+      setWithGrid = _useState16[1];
 
   var _useShapes = (0, _useShapes2["default"])(onDataChanged),
       shapesRef = _useShapes.shapesRef,
@@ -305,22 +292,22 @@ var App = function App(_ref5) {
     setActiveTool(tool);
   }, [setSelectedShape]);
   var undoAction = (0, _react.useCallback)(function () {
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     backwardShape();
   }, [selectTool, backwardShape]);
   var redoAction = (0, _react.useCallback)(function () {
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     forwardShape();
   }, [selectTool, forwardShape]);
   var clearCanvas = (0, _react.useCallback)(function () {
     var shapesToInit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     var clearHistory = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     clearShapes(shapesToInit, clearHistory);
-    selectTool(_Shapes.ToolEnum.selection);
+    selectTool(_tools.SELECTION_TOOL);
     setCanvasOffset([0, 0]);
   }, [selectTool, clearShapes]);
   var selectShape = (0, _react.useCallback)(function (shape) {
-    setActiveTool(_Shapes.ToolEnum.selection);
+    setActiveTool(_tools.SELECTION_TOOL);
     setSelectedShape(shape);
   }, [setSelectedShape]);
   var pasteShape = (0, _react.useCallback)(function (shape) {
@@ -584,7 +571,9 @@ var App = function App(_ref5) {
     redoAction: redoAction,
     availableTools: availableTools,
     withExport: withExport,
-    withLoadAndSave: withLoadAndSave
+    withLoadAndSave: withLoadAndSave,
+    withUploadPicture: withUploadPicture,
+    withUrlPicture: withUrlPicture
   }), /*#__PURE__*/_react["default"].createElement(StyledRow, {
     "data-grow": canGrow,
     width: canvasSize.width,
@@ -605,7 +594,6 @@ var App = function App(_ref5) {
     setSelectedShape: setSelectedShape,
     canvasOffset: canvasOffset,
     setCanvasOffset: setCanvasOffset,
-    defaultConf: defaultConf,
     saveShapes: saveShapes,
     ref: canvasRef,
     canvasSize: canvasSize,
@@ -630,11 +618,10 @@ var App = function App(_ref5) {
   })), isEditMode && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_SettingsBar["default"], {
     disabled: disabled,
     activeTool: activeTool,
+    availableTools: availableTools,
     selectedShape: selectedShape,
     removeShape: removeShape,
     updateShape: updateShape,
-    defaultConf: defaultConf,
-    setDefaultConf: setDefaultConf,
     canvas: canvasRef.current,
     layersManipulation: layersManipulation,
     toggleLayoutPanel: function toggleLayoutPanel() {

package/dist/components/Canvas.js

@@ -31,6 +31,8 @@ var _useDrawableCanvas2 = _interopRequireDefault(require("../hooks/useDrawableCa
 
 var _icons = require("../constants/icons");
 
+var _tools = require("../types/tools");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -57,7 +59,7 @@ var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selecti
       height = canvasSize.height,
       scaleRatio = canvasSize.scaleRatio;
   selectionCtx.clearRect(0, 0, width, height);
-  selectedShape && activeTool !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
+  selectedShape && activeTool.type !== _Shapes.ShapeEnum.brush && (0, _draw.drawSelection)({
     ctx: selectionCtx,
     shape: selectedShape,
     scaleRatio: scaleRatio,
@@ -71,21 +73,21 @@ var renderSelectionCanvas = function renderSelectionCanvas(selectionCtx, selecti
 
 var StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasBox",
-  "class": "s9czb9p"
+  "class": "s14cny8z"
 });
 var StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCanvasContainer",
-  "class": "s1538eht"
+  "class": "s16bxms6"
 });
 var StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledDrawCanvas",
-  "class": "s101qxdc"
+  "class": "spzzsat"
 });
 var StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)("canvas")({
   name: "StyledSelectionCanvas",
-  "class": "sa4oq48",
+  "class": "s1egrskk",
   vars: {
-    "sa4oq48-0": [function (_ref) {
+    "s1egrskk-0": [function (_ref) {
       var cursor = _ref.cursor;
       return cursor;
     }]
@@ -110,7 +112,6 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
       setCanvasOffsetStartPosition = _ref2.setCanvasOffsetStartPosition,
       canvasOffset = _ref2.canvasOffset,
       setCanvasOffset = _ref2.setCanvasOffset,
-      defaultConf = _ref2.defaultConf,
       isInsideComponent = _ref2.isInsideComponent,
       selectionMode = _ref2.selectionMode,
       setSelectionMode = _ref2.setSelectionMode,
@@ -132,7 +133,6 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     drawCanvasRef: drawCanvasRef,
     setActiveTool: setActiveTool,
     shapes: shapes,
-    defaultConf: defaultConf,
     selectionMode: selectionMode,
     activeTool: activeTool,
     isInsideComponent: isInsideComponent,
@@ -197,7 +197,7 @@ var Canvas = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, ref) {
     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'
+    cursor: activeTool.type !== _tools.ActionsEnum.selection && activeTool.type !== _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.resize ? 'crosshair' : activeTool.type === _tools.ActionsEnum.move || hoverMode.mode === _Mode.SelectionModeLib.translate ? 'move' : hoverMode.mode === _Mode.SelectionModeLib.rotate ? 'grab' : '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,

package/dist/components/common/Button.js

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

package/dist/components/common/Loading.js

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

package/dist/components/common/Modal.js

@@ -15,15 +15,15 @@ var _style = require("../../constants/style");
 
 var StyledModal = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledModal",
-  "class": "s1c8tp02"
+  "class": "s1hezj2d"
 });
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "svkxpz4"
+  "class": "spuj31h"
 });
 var StyledMask = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledMask",
-  "class": "s1s9jyyg"
+  "class": "s1ulcd40"
 });
 
 var Modal = function Modal(_ref) {

package/dist/components/common/Panel.js

@@ -19,11 +19,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledPanel",
-  "class": "s1xzg253"
+  "class": "s2dsyaf"
 });
 var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
   name: "StyledTitle",
-  "class": "s17qj3jh"
+  "class": "s1f032bv"
 });
 
 var Panel = function Panel(_ref) {

package/dist/components/common/Snackbar.js

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

package/dist/components/settings/ColorField.js

@@ -21,8 +21,6 @@ var _Button = _interopRequireDefault(require("../common/Button"));
 
 var _Panel = _interopRequireDefault(require("../common/Panel"));
 
-var _style = require("../../constants/style");
-
 var _icons = require("../../constants/icons");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,9 +29,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledColor",
-  "class": "snh2jyk",
+  "class": "s1dqu4j7",
   vars: {
-    "snh2jyk-0": [function (_ref) {
+    "s1dqu4j7-0": [function (_ref) {
       var color = _ref.color;
       return color;
     }]
@@ -41,9 +39,9 @@ var StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
 });
 var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
   name: "StyledCustomColor",
-  "class": "sfm1cqx",
+  "class": "s1j0ldko",
   vars: {
-    "sfm1cqx-0": [function (_ref2) {
+    "s1j0ldko-0": [function (_ref2) {
       var color = _ref2.color;
       return color;
     }]
@@ -57,6 +55,7 @@ var ColorField = function ColorField(_ref3) {
       title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      values = _ref3.values,
       field = _ref3.field,
       _ref3$value = _ref3.value,
       value = _ref3$value === void 0 ? '' : _ref3$value,
@@ -83,6 +82,7 @@ var ColorField = function ColorField(_ref3) {
   };
 
   var isPanelVisible = selectedSettings === customKey;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     selected: isPanelVisible,
     title: title,
@@ -93,7 +93,7 @@ var ColorField = function ColorField(_ref3) {
   })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
     title: title,
     alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement("div", null, _style.STYLE_COLORS.map(function (color, index) {
+  }, /*#__PURE__*/_react["default"].createElement("div", null, values.map(function (color, index) {
     return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
       title: color,
       key: index,
@@ -108,11 +108,11 @@ var ColorField = function ColorField(_ref3) {
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     type: "color",
     title: "Custom color",
-    selected: !_fp["default"].includes(value, _style.STYLE_COLORS),
+    selected: !_fp["default"].includes(value, values),
     value: value,
     onChange: handleChange
   }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
-    color: _fp["default"].includes(value, _style.STYLE_COLORS) ? 'var(--font-color)' : value
+    color: _fp["default"].includes(value, values) ? 'var(--font-color)' : value
   }, /*#__PURE__*/_react["default"].createElement("span", {
     dangerouslySetInnerHTML: {
       __html: _icons.paletteIcon

package/dist/components/settings/FontFamilyField.js

@@ -11,15 +11,15 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SelectField = _interopRequireDefault(require("./SelectField"));
 
-var _style = require("../../constants/style");
-
 var _react2 = require("@linaria/react");
 
+var _fp = _interopRequireDefault(require("lodash/fp"));
+
 var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
   name: "StyledOption",
-  "class": "smpmxx5",
+  "class": "s16o63ah",
   vars: {
-    "smpmxx5-0": [function (_ref) {
+    "s16o63ah-0": [function (_ref) {
       var family = _ref.family;
       return family;
     }]
@@ -38,8 +38,10 @@ var FontFamilyField = function FontFamilyField(_ref3) {
       setSelectedSettings = _ref3.setSelectedSettings,
       _ref3$disabled = _ref3.disabled,
       disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+      values = _ref3.values,
       defaultValue = _ref3.defaultValue,
       valueChanged = _ref3.valueChanged;
+  if (_fp["default"].isEmpty(values)) return null;
   return /*#__PURE__*/_react["default"].createElement(_SelectField["default"], {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
@@ -47,7 +49,7 @@ var FontFamilyField = function FontFamilyField(_ref3) {
     title: "Font",
     disabled: disabled,
     field: "style.fontFamily",
-    values: _style.STYLE_FONTS,
+    values: values,
     defaultValue: defaultValue,
     valueChanged: valueChanged
   });

package/dist/components/settings/LayoutButton.js

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

package/dist/components/settings/Layouts.js

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