@yorab/react-paint 0.6.4 → 0.7.1

package/dist/components/common/Panel.js

@@ -1,51 +1,43 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
-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; }
-
-var StyledPanel = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledPanel = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledPanel",
-  "class": "s1xzg253"
+  class: "s1xzg253"
 });
-var StyledTitle = /*#__PURE__*/(0, _react2.styled)("h3")({
+const StyledTitle = /*#__PURE__*/(0, _react2.styled)('h3')({
   name: "StyledTitle",
-  "class": "s17qj3jh"
+  class: "s17qj3jh"
 });
 
-var Panel = function Panel(_ref) {
-  var children = _ref.children,
-      _ref$vertical = _ref.vertical,
-      vertical = _ref$vertical === void 0 ? false : _ref$vertical,
-      _ref$title = _ref.title,
-      title = _ref$title === void 0 ? '' : _ref$title,
-      className = _ref.className,
-      _ref$fitContainer = _ref.fitContainer,
-      fitContainer = _ref$fitContainer === void 0 ? false : _ref$fitContainer,
-      _ref$alignment = _ref.alignment,
-      alignment = _ref$alignment === void 0 ? 'center' : _ref$alignment;
-  var componentRef = (0, _react.useRef)(null);
-  return /*#__PURE__*/_react["default"].createElement(StyledPanel, {
-    ref: componentRef,
+const Panel = _ref => {
+  let {
+    children,
+    title = '',
+    className,
+    position = 'bottom',
+    fitContainer = false,
+    alignment = 'center'
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyledPanel, {
     className: className,
     "data-fitcontainer": fitContainer,
-    "data-vertical": +vertical,
+    "data-position": position,
     "data-alignment": alignment
-  }, title && /*#__PURE__*/_react["default"].createElement(StyledTitle, null, title), children);
+  }, title && /*#__PURE__*/_react.default.createElement(StyledTitle, null, title), children);
 };
 
 var _default = Panel;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/common/Snackbar.js

@@ -2,74 +2,67 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _snackbar = require("../../constants/snackbar");
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@linaria/react");
 
 var _style = require("../../constants/style");
 
-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); }
+var _snackbar = require("../../constants/snackbar");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+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 StyledSnackbar = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSnackbar = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSnackbar",
-  "class": "s1xssqat"
+  class: "s1xssqat"
 });
-var StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledSnackbarContainer",
-  "class": "s1bgtt22"
+  class: "s1bgtt22"
 });
 
-var Snackbar = function Snackbar(_ref) {
-  var type = _ref.type,
-      text = _ref.text,
-      duration = _ref.duration;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isShown = _useState2[0],
-      setIsShown = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    var timeoutShowId = setTimeout(function () {
+const Snackbar = _ref => {
+  let {
+    type,
+    text,
+    duration
+  } = _ref;
+  const [isShown, setIsShown] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const timeoutShowId = setTimeout(() => {
       setIsShown(true);
-    }, 100);
-    var timeoutHideId = setTimeout(function () {
+    }, _snackbar.SNACKBAR_TOGGLE_ANIMATION_DURATION);
+    const timeoutHideId = setTimeout(() => {
       setIsShown(false);
-    }, duration - _snackbar.SNACKBAR_ANIMATION_DURATION - 100);
-    return function () {
+    }, duration - _snackbar.SNACKBAR_DURATION - _snackbar.SNACKBAR_TOGGLE_ANIMATION_DURATION);
+    return () => {
       clearTimeout(timeoutShowId);
       clearTimeout(timeoutHideId);
     };
   }, [duration]);
-  return /*#__PURE__*/_react["default"].createElement(StyledSnackbar, {
+  return /*#__PURE__*/_react.default.createElement(StyledSnackbar, {
     "data-is-shown": +isShown,
     "data-type": type
   }, text);
 };
 
-var SnackbarContainer = function SnackbarContainer(_ref2) {
-  var snackbarList = _ref2.snackbarList;
-  return /*#__PURE__*/_react["default"].createElement(StyledSnackbarContainer, null, snackbarList.map(function (snackbar) {
-    return /*#__PURE__*/_react["default"].createElement(Snackbar, (0, _extends2["default"])({
-      key: snackbar.id
-    }, snackbar));
-  }));
+const SnackbarContainer = _ref2 => {
+  let {
+    snackbarList
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(StyledSnackbarContainer, null, snackbarList.map(snackbar => /*#__PURE__*/_react.default.createElement(Snackbar, (0, _extends2.default)({
+    key: snackbar.id
+  }, snackbar))));
 };
 
 var _default = SnackbarContainer;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/ColorField.js

@@ -2,14 +2,10 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+exports.default = void 0;
 
 var _fp = _interopRequireDefault(require("lodash/fp"));
 
@@ -23,107 +19,102 @@ var _Panel = _interopRequireDefault(require("../common/Panel"));
 
 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); }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+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 StyledColor = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledColor = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledColor",
-  "class": "snh2jyk",
+  class: "snh2jyk",
   vars: {
-    "snh2jyk-0": [function (_ref) {
-      var color = _ref.color;
+    "snh2jyk-0": [_ref => {
+      let {
+        color
+      } = _ref;
       return color;
     }]
   }
 });
-var StyleWrapper = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyleWrapper = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyleWrapper",
-  "class": "sfm1cqx"
+  class: "sfm1cqx"
 });
-var StyledCustomColor = /*#__PURE__*/(0, _react2.styled)("div")({
+const StyledCustomColor = /*#__PURE__*/(0, _react2.styled)('div')({
   name: "StyledCustomColor",
-  "class": "sttf061",
+  class: "sttf061",
   vars: {
-    "sttf061-0": [function (_ref2) {
-      var color = _ref2.color;
+    "sttf061-0": [_ref2 => {
+      let {
+        color
+      } = _ref2;
       return color;
     }]
   }
 });
 
-var ColorField = function ColorField(_ref3) {
-  var selectedSettings = _ref3.selectedSettings,
-      setSelectedSettings = _ref3.setSelectedSettings,
-      _ref3$title = _ref3.title,
-      title = _ref3$title === void 0 ? 'Choisissez une couleur' : _ref3$title,
-      _ref3$mode = _ref3.mode,
-      mode = _ref3$mode === void 0 ? 'fill' : _ref3$mode,
-      _ref3$disabled = _ref3.disabled,
-      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
-      values = _ref3.values,
-      field = _ref3.field,
-      _ref3$value = _ref3.value,
-      value = _ref3$value === void 0 ? '' : _ref3$value,
-      valueChanged = _ref3.valueChanged;
-
-  var _useState = (0, _react.useState)(_fp["default"].uniqueId('settings_')),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
-      customKey = _useState2[0];
-
-  var handleChange = function handleChange(event) {
-    var parsedValue = _fp["default"].toNumber(event.target.value);
-
-    valueChanged(field, _fp["default"].isNaN(parsedValue) ? event.target.value : parsedValue);
+const ColorField = _ref3 => {
+  let {
+    selectedSettings,
+    setSelectedSettings,
+    title = 'Choisissez une couleur',
+    mode = 'fill',
+    disabled = false,
+    values,
+    field,
+    value = '',
+    valueChanged
+  } = _ref3;
+  const [customKey] = (0, _react.useState)(_fp.default.uniqueId('settings_'));
+
+  const handleChange = event => {
+    const parsedValue = _fp.default.toNumber(event.target.value);
+
+    valueChanged(field, _fp.default.isNaN(parsedValue) ? event.target.value : parsedValue);
   };
 
-  var handleClick = function handleClick(value) {
+  const handleClick = value => {
     valueChanged(field, value);
   };
 
-  var togglePanel = function togglePanel() {
-    setSelectedSettings(function (prev) {
+  const togglePanel = () => {
+    setSelectedSettings(prev => {
       return prev === customKey ? undefined : customKey;
     });
   };
 
-  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"], {
+  const 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,
     disabled: disabled,
     onClick: togglePanel,
     icon: value === 'transparent' ? mode === 'fill' ? _icons.noFillIcon : _icons.noStrokeIcon : undefined
-  }, value !== 'transparent' && /*#__PURE__*/_react["default"].createElement(StyledColor, {
+  }, value !== 'transparent' && /*#__PURE__*/_react.default.createElement(StyledColor, {
     color: value,
     "data-mode": mode
-  })), isPanelVisible && /*#__PURE__*/_react["default"].createElement(_Panel["default"], {
+  })), isPanelVisible && /*#__PURE__*/_react.default.createElement(_Panel.default, {
     title: title,
     alignment: "left"
-  }, /*#__PURE__*/_react["default"].createElement(StyleWrapper, null, values.map(function (color, index) {
-    return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-      title: color,
-      key: index,
-      selected: color === value,
-      color: color,
-      icon: color === 'transparent' ? mode === 'fill' ? _icons.noFillIcon : _icons.noStrokeIcon : undefined,
-      onClick: function onClick() {
-        return handleClick(color);
-      }
-    }, color !== 'transparent' && /*#__PURE__*/_react["default"].createElement(StyledColor, {
-      color: color,
-      "data-mode": mode
-    }));
-  }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  }, /*#__PURE__*/_react.default.createElement(StyleWrapper, null, values.map((color, index) => /*#__PURE__*/_react.default.createElement(_Button.default, {
+    title: color,
+    key: index,
+    selected: color === value,
+    color: color,
+    icon: color === 'transparent' ? mode === 'fill' ? _icons.noFillIcon : _icons.noStrokeIcon : undefined,
+    onClick: () => handleClick(color)
+  }, color !== 'transparent' && /*#__PURE__*/_react.default.createElement(StyledColor, {
+    color: color,
+    "data-mode": mode
+  }))), /*#__PURE__*/_react.default.createElement(_Button.default, {
     type: "color",
     title: "Custom color",
-    selected: !_fp["default"].includes(value, values),
+    selected: !_fp.default.includes(value, values),
     value: value,
     onChange: handleChange
-  }, /*#__PURE__*/_react["default"].createElement(StyledCustomColor, {
-    color: _fp["default"].includes(value, values) ? 'var(--font-color)' : value
-  }, /*#__PURE__*/_react["default"].createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(StyledCustomColor, {
+    color: _fp.default.includes(value, values) ? 'var(--font-color)' : value
+  }, /*#__PURE__*/_react.default.createElement("span", {
     dangerouslySetInnerHTML: {
       __html: _icons.paletteIcon
     }
@@ -131,4 +122,4 @@ var ColorField = function ColorField(_ref3) {
 };
 
 var _default = ColorField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/DeleteButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,17 +13,18 @@ var _icons = require("../../constants/icons");
 
 var _Button = _interopRequireDefault(require("../common/Button"));
 
-var DeleteButton = function DeleteButton(_ref) {
-  var _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      selectedShape = _ref.selectedShape,
-      removeShape = _ref.removeShape;
+const DeleteButton = _ref => {
+  let {
+    disabled = false,
+    selectedShape,
+    removeShape
+  } = _ref;
 
-  var handleRemove = function handleRemove() {
+  const handleRemove = () => {
     removeShape(selectedShape);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+  return /*#__PURE__*/_react.default.createElement(_Button.default, {
     title: "Delete",
     disabled: disabled,
     "data-disabled": +disabled,
@@ -33,4 +34,4 @@ var DeleteButton = function DeleteButton(_ref) {
 };
 
 var _default = DeleteButton;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/FontFamilyField.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,38 +17,43 @@ var _fp = _interopRequireDefault(require("lodash/fp"));
 
 var _icons = require("../../constants/icons");
 
-var StyledOption = /*#__PURE__*/(0, _react2.styled)("span")({
+const StyledOption = /*#__PURE__*/(0, _react2.styled)('span')({
   name: "StyledOption",
-  "class": "smpmxx5",
+  class: "smpmxx5",
   vars: {
-    "smpmxx5-0": [function (_ref) {
-      var family = _ref.family;
+    "smpmxx5-0": [_ref => {
+      let {
+        family
+      } = _ref;
       return family;
     }]
   }
 });
 
-var FontFamilyOption = function FontFamilyOption(_ref2) {
-  var children = _ref2.children;
-  return /*#__PURE__*/_react["default"].createElement(StyledOption, {
+const FontFamilyOption = _ref2 => {
+  let {
+    children
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement(StyledOption, {
     family: children
   }, children);
 };
 
-var FontFamilyField = function FontFamilyField(_ref3) {
-  var selectedSettings = _ref3.selectedSettings,
-      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"], {
+const FontFamilyField = _ref3 => {
+  let {
+    selectedSettings,
+    setSelectedSettings,
+    disabled = false,
+    values,
+    defaultValue,
+    valueChanged
+  } = _ref3;
+  if (_fp.default.isEmpty(values)) return null;
+  return /*#__PURE__*/_react.default.createElement(_SelectField.default, {
     selectedSettings: selectedSettings,
     setSelectedSettings: setSelectedSettings,
     CustomOption: FontFamilyOption,
-    title: "Font",
+    title: "Police",
     icon: _icons.fontIcon,
     disabled: disabled,
     field: "fontFamily",
@@ -59,4 +64,4 @@ var FontFamilyField = function FontFamilyField(_ref3) {
 };
 
 var _default = FontFamilyField;
-exports["default"] = _default;
+exports.default = _default;

package/dist/components/settings/LayoutButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,16 +15,18 @@ var _icons = require("../../constants/icons");
 
 var _Button = _interopRequireDefault(require("../common/Button"));
 
-var StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button["default"])({
+const StyleToggleLayoutButton = /*#__PURE__*/(0, _react2.styled)(_Button.default)({
   name: "StyleToggleLayoutButton",
-  "class": "sj7hhjx"
+  class: "sj7hhjx"
 });
 
-var LayoutButton = function LayoutButton(_ref) {
-  var layersManipulation = _ref.layersManipulation,
-      disabled = _ref.disabled,
-      toggleLayoutPanel = _ref.toggleLayoutPanel;
-  return /*#__PURE__*/_react["default"].createElement(StyleToggleLayoutButton, {
+const LayoutButton = _ref => {
+  let {
+    layersManipulation,
+    disabled,
+    toggleLayoutPanel
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(StyleToggleLayoutButton, {
     title: "Toggle layers panel",
     "data-hidden": !layersManipulation,
     disabled: disabled,
@@ -34,4 +36,4 @@ var LayoutButton = function LayoutButton(_ref) {
 };
 
 var _default = LayoutButton;
-exports["default"] = _default;
+exports.default = _default;