@yorab/react-paint 0.7.5 → 0.8.0

package/dist/components/Canvas.js

@@ -1,194 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _canvas = require("../utils/canvas");
-
-var _EditTextBox = _interopRequireDefault(require("./toolbox/EditTextBox"));
-
-var _useDrawableCanvas = _interopRequireDefault(require("../hooks/useDrawableCanvas"));
-
-var _shapes = require("../utils/shapes");
-
-var _text = require("../utils/shapes/text");
-
-var _grid = require("../utils/shapes/grid");
-
-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; }
-
-const renderDrawCanvas = (drawCtx, selectionMode, canvasSize, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape) => {
-  const {
-    width,
-    height,
-    scaleRatio
-  } = canvasSize;
-  drawCtx.clearRect(0, 0, width, height);
-  (0, _canvas.initCanvasContext)(drawCtx);
-  gridFormat && (0, _grid.drawGrid)(drawCtx, width, height, scaleRatio, canvasOffset, gridFormat);
-
-  for (let i = shapes.length - 1; i >= 0; i--) {
-    if (selectionMode.mode !== 'textedition' || shapes[i] !== selectedShape) {
-      (0, _shapes.drawShape)(drawCtx, shapes[i], scaleRatio, canvasOffset, selectionPadding);
-    }
-  }
-};
-
-const renderSelectionCanvas = (selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape) => {
-  const {
-    width,
-    height,
-    scaleRatio
-  } = canvasSize;
-  selectionCtx.clearRect(0, 0, width, height);
-  selectedShape && activeTool.type !== 'brush' && (0, _shapes.drawShapeSelection)({
-    ctx: selectionCtx,
-    shape: selectedShape,
-    scaleRatio,
-    canvasOffset,
-    selectionPadding,
-    selectionWidth,
-    selectionColor,
-    withAnchors: selectionMode.mode !== 'textedition'
-  });
-};
-
-const StyledCanvasBox = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledCanvasBox",
-  class: "s9czb9p"
-});
-const StyledCanvasContainer = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledCanvasContainer",
-  class: "s1538eht"
-});
-const StyledDrawCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
-  name: "StyledDrawCanvas",
-  class: "s101qxdc"
-});
-const StyledSelectionCanvas = /*#__PURE__*/(0, _react2.styled)('canvas')({
-  name: "StyledSelectionCanvas",
-  class: "sa4oq48",
-  vars: {
-    "sa4oq48-0": [_ref => {
-      let {
-        cursor
-      } = _ref;
-      return cursor;
-    }]
-  }
-});
-
-const Canvas = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
-  let {
-    gridFormat,
-    canGrow,
-    disabled = false,
-    canvasSize,
-    shapes,
-    addShape,
-    updateSingleShape,
-    selectedShape,
-    setSelectedShape,
-    saveShapes,
-    activeTool,
-    setActiveTool,
-    canvasOffsetStartPosition,
-    setCanvasOffsetStartPosition,
-    canvasOffset,
-    setCanvasOffset,
-    isInsideComponent,
-    selectionMode,
-    setSelectionMode,
-    selectionWidth,
-    selectionColor,
-    selectionPadding,
-    isEditMode,
-    isShiftPressed
-  } = _ref2;
-  const drawCanvasRef = (0, _react.useRef)(null);
-  const selectionCanvasRef = (0, _react.useRef)(null); // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-
-  (0, _react.useImperativeHandle)(ref, () => drawCanvasRef.current);
-  const {
-    hoverMode
-  } = (0, _useDrawableCanvas.default)({
-    disabled,
-    addShape,
-    canvasSize,
-    drawCanvasRef,
-    setActiveTool,
-    shapes,
-    selectionMode,
-    activeTool,
-    isInsideComponent,
-    setCanvasOffset,
-    selectedShape,
-    selectionCanvasRef,
-    canvasOffsetStartPosition,
-    setSelectedShape,
-    setCanvasOffsetStartPosition,
-    updateSingleShape,
-    gridFormat,
-    canvasOffset,
-    saveShapes,
-    setSelectionMode,
-    selectionPadding,
-    isShiftPressed
-  });
-  const updateSelectedShapeText = (0, _react.useCallback)(newText => {
-    var _drawCanvasRef$curren;
-
-    if ((selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) !== 'text') return;
-    const ctx = (_drawCanvasRef$curren = drawCanvasRef.current) === null || _drawCanvasRef$curren === void 0 ? void 0 : _drawCanvasRef$curren.getContext('2d');
-    if (!ctx) return;
-    const newShape = (0, _text.resizeTextShapeWithNewContent)(ctx, selectedShape, newText, canvasOffset);
-    updateSingleShape(newShape);
-  }, [updateSingleShape, selectedShape, canvasOffset]);
-  (0, _react.useEffect)(() => {
-    var _drawCanvasRef$curren2;
-
-    const drawCtx = (_drawCanvasRef$curren2 = drawCanvasRef.current) === null || _drawCanvasRef$curren2 === void 0 ? void 0 : _drawCanvasRef$curren2.getContext('2d');
-    drawCtx && window.requestAnimationFrame(() => renderDrawCanvas(drawCtx, selectionMode, canvasSize, gridFormat, canvasOffset, shapes, selectionPadding, selectedShape));
-  }, [shapes, gridFormat, selectionMode, selectedShape, canvasOffset, canvasSize, selectionPadding]);
-  (0, _react.useEffect)(() => {
-    var _selectionCanvasRef$c;
-
-    const selectionCtx = (_selectionCanvasRef$c = selectionCanvasRef.current) === null || _selectionCanvasRef$c === void 0 ? void 0 : _selectionCanvasRef$c.getContext('2d');
-    selectionCtx && window.requestAnimationFrame(() => renderSelectionCanvas(selectionCtx, selectionMode, canvasSize, activeTool, canvasOffset, selectionPadding, selectionWidth, selectionColor, selectedShape));
-  }, [selectionMode, selectedShape, activeTool, canvasOffset, canvasSize, selectionPadding, selectionWidth, selectionColor]);
-  return /*#__PURE__*/_react.default.createElement(StyledCanvasBox, null, /*#__PURE__*/_react.default.createElement(StyledCanvasContainer, {
-    "data-grow": canGrow
-  }, /*#__PURE__*/_react.default.createElement(StyledDrawCanvas, {
-    ref: drawCanvasRef,
-    "data-grow": canGrow,
-    width: canvasSize.width,
-    height: canvasSize.height
-  }), isEditMode && /*#__PURE__*/_react.default.createElement(StyledSelectionCanvas, {
-    ref: selectionCanvasRef,
-    width: canvasSize.width,
-    height: canvasSize.height,
-    "data-grow": canGrow,
-    cursor: activeTool.type !== 'selection' && activeTool.type !== 'move' || hoverMode.mode === 'resize' ? 'crosshair' : activeTool.type === 'move' || hoverMode.mode === 'translate' ? 'move' : hoverMode.mode === 'rotate' ? 'grab' : 'default'
-  }), isEditMode && selectionMode.mode === 'textedition' && (selectedShape === null || selectedShape === void 0 ? void 0 : selectedShape.type) === 'text' && /*#__PURE__*/_react.default.createElement(_EditTextBox.default, {
-    scaleRatio: canvasSize.scaleRatio,
-    disabled: disabled,
-    shape: selectedShape,
-    defaultValue: selectionMode.defaultValue,
-    updateValue: updateSelectedShapeText,
-    saveShapes: saveShapes,
-    selectionPadding: selectionPadding
-  })));
-});
-
-var _default = Canvas;
-exports.default = _default;

package/dist/components/common/Button.js

@@ -1,88 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@linaria/react");
-
-const StyledButton = /*#__PURE__*/(0, _react2.styled)('button')({
-  name: "StyledButton",
-  class: "sq3bzv4"
-});
-const StyledButtonContent = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledButtonContent",
-  class: "sst453j"
-});
-const StyledIcon = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledIcon",
-  class: "s1q5lsc2"
-});
-const StyledChildren = /*#__PURE__*/(0, _react2.styled)('span')({
-  name: "StyledChildren",
-  class: "s1dis2j8"
-});
-
-const Button = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
-  if (props.type === 'file' || props.type === 'color') {
-    const {
-      hidden = false,
-      disabled = false,
-      selected = false,
-      icon,
-      children,
-      className,
-      title,
-      onClick,
-      ...fileProps
-    } = props;
-    return /*#__PURE__*/_react.default.createElement(StyledButton, {
-      as: "label",
-      className: className,
-      title: title,
-      onClick: onClick,
-      "data-disabled": +disabled,
-      "data-selected": +selected,
-      "data-hidden": +hidden
-    }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
-      ref: ref,
-      disabled: disabled
-    }, fileProps)), /*#__PURE__*/_react.default.createElement(StyledButtonContent, null, children && /*#__PURE__*/_react.default.createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react.default.createElement(StyledIcon, {
-      dangerouslySetInnerHTML: {
-        __html: icon
-      }
-    })));
-  } else {
-    const {
-      hidden = false,
-      disabled = false,
-      selected = false,
-      icon,
-      children,
-      type = 'button',
-      ...fileProps
-    } = props;
-    return /*#__PURE__*/_react.default.createElement(StyledButton, (0, _extends2.default)({
-      ref: ref,
-      disabled: disabled,
-      "data-disabled": +disabled,
-      "data-selected": +selected,
-      "data-hidden": +hidden,
-      type: type
-    }, fileProps), /*#__PURE__*/_react.default.createElement(StyledButtonContent, null, children && /*#__PURE__*/_react.default.createElement(StyledChildren, null, children), icon && /*#__PURE__*/_react.default.createElement(StyledIcon, {
-      dangerouslySetInnerHTML: {
-        __html: icon
-      }
-    })));
-  }
-});
-
-var _default = Button;
-exports.default = _default;

package/dist/components/common/Loading.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("@linaria/react");
-
-var _app = require("../../constants/app");
-
-var _loading = require("../../constants/loading");
-
-var _style = require("../../constants/style");
-
-var _react2 = _interopRequireWildcard(require("react"));
-
-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; }
-
-const StyledLoading = /*#__PURE__*/(0, _react.styled)('div')({
-  name: "StyledLoading",
-  class: "s9j48u3"
-});
-const StyledLoader = /*#__PURE__*/(0, _react.styled)('div')({
-  name: "StyledLoader",
-  class: "s4auclc"
-});
-const StyledShape = /*#__PURE__*/(0, _react.styled)('div')({
-  name: "StyledShape",
-  class: "s1l3fbq"
-});
-
-const Loading = _ref => {
-  let {
-    isLoading = false
-  } = _ref;
-  const [loadingState, setLoadingState] = (0, _react2.useState)('hidden');
-  (0, _react2.useEffect)(() => {
-    if (isLoading) {
-      setLoadingState('visible');
-    } else {
-      setLoadingState('fadeOut');
-      const fadeOutTimeout = setTimeout(() => setLoadingState('hidden'), _loading.LOADING_TRANSITION_DURATION);
-      return () => {
-        clearTimeout(fadeOutTimeout);
-      };
-    }
-  }, [isLoading]);
-  return loadingState === 'hidden' ? null : /*#__PURE__*/_react2.default.createElement(StyledLoading, {
-    "data-loading": loadingState
-  }, /*#__PURE__*/_react2.default.createElement(StyledLoader, null, /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null), /*#__PURE__*/_react2.default.createElement(StyledShape, null)));
-};
-
-var _default = Loading;
-exports.default = _default;

package/dist/components/common/Modal.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _style = require("../../constants/style");
-
-const StyledModal = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledModal",
-  class: "s1c8tp02"
-});
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledPanel",
-  class: "svkxpz4"
-});
-const StyledMask = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledMask",
-  class: "s1s9jyyg"
-});
-
-const Modal = _ref => {
-  let {
-    children,
-    onClose,
-    position = 'center',
-    className
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement(StyledModal, {
-    "data-position": position
-  }, /*#__PURE__*/_react.default.createElement(StyledMask, {
-    onClick: onClose
-  }), /*#__PURE__*/_react.default.createElement(StyledPanel, {
-    className: className
-  }, children));
-};
-
-var _default = Modal;
-exports.default = _default;

package/dist/components/common/Panel.js

@@ -1,43 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _style = require("../../constants/style");
-
-const StyledPanel = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledPanel",
-  class: "s1xzg253"
-});
-const StyledTitle = /*#__PURE__*/(0, _react2.styled)('h3')({
-  name: "StyledTitle",
-  class: "s17qj3jh"
-});
-
-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-position": position,
-    "data-alignment": alignment
-  }, title && /*#__PURE__*/_react.default.createElement(StyledTitle, null, title), children);
-};
-
-var _default = Panel;
-exports.default = _default;

package/dist/components/common/Snackbar.js

@@ -1,68 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _style = require("../../constants/style");
-
-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; }
-
-const StyledSnackbar = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledSnackbar",
-  class: "s1xssqat"
-});
-const StyledSnackbarContainer = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledSnackbarContainer",
-  class: "s1bgtt22"
-});
-
-const Snackbar = _ref => {
-  let {
-    type,
-    text,
-    duration
-  } = _ref;
-  const [isShown, setIsShown] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
-    const timeoutShowId = setTimeout(() => {
-      setIsShown(true);
-    }, _snackbar.SNACKBAR_TOGGLE_ANIMATION_DURATION);
-    const timeoutHideId = setTimeout(() => {
-      setIsShown(false);
-    }, duration - _snackbar.SNACKBAR_DURATION - _snackbar.SNACKBAR_TOGGLE_ANIMATION_DURATION);
-    return () => {
-      clearTimeout(timeoutShowId);
-      clearTimeout(timeoutHideId);
-    };
-  }, [duration]);
-  return /*#__PURE__*/_react.default.createElement(StyledSnackbar, {
-    "data-is-shown": +isShown,
-    "data-type": type
-  }, text);
-};
-
-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;

package/dist/components/settings/ColorField.js

@@ -1,125 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _fp = _interopRequireDefault(require("lodash/fp"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _react2 = require("@linaria/react");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-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 (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; }
-
-const StyledColor = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledColor",
-  class: "snh2jyk",
-  vars: {
-    "snh2jyk-0": [_ref => {
-      let {
-        color
-      } = _ref;
-      return color;
-    }]
-  }
-});
-const StyleWrapper = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyleWrapper",
-  class: "sfm1cqx"
-});
-const StyledCustomColor = /*#__PURE__*/(0, _react2.styled)('div')({
-  name: "StyledCustomColor",
-  class: "sttf061",
-  vars: {
-    "sttf061-0": [_ref2 => {
-      let {
-        color
-      } = _ref2;
-      return color;
-    }]
-  }
-});
-
-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);
-  };
-
-  const handleClick = value => {
-    valueChanged(field, value);
-  };
-
-  const togglePanel = () => {
-    setSelectedSettings(prev => {
-      return prev === customKey ? undefined : customKey;
-    });
-  };
-
-  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, {
-    color: value,
-    "data-mode": mode
-  })), isPanelVisible && /*#__PURE__*/_react.default.createElement(_Panel.default, {
-    title: title,
-    alignment: "left"
-  }, /*#__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),
-    value: value,
-    onChange: handleChange
-  }, /*#__PURE__*/_react.default.createElement(StyledCustomColor, {
-    color: _fp.default.includes(value, values) ? 'var(--font-color)' : value
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    dangerouslySetInnerHTML: {
-      __html: _icons.paletteIcon
-    }
-  }))))));
-};
-
-var _default = ColorField;
-exports.default = _default;

package/dist/components/settings/DeleteButton.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _icons = require("../../constants/icons");
-
-var _Button = _interopRequireDefault(require("../common/Button"));
-
-const DeleteButton = _ref => {
-  let {
-    disabled = false,
-    selectedShape,
-    removeShape
-  } = _ref;
-
-  const handleRemove = () => {
-    removeShape(selectedShape);
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_Button.default, {
-    title: "Delete",
-    disabled: disabled,
-    "data-disabled": +disabled,
-    onClick: handleRemove,
-    icon: _icons.trashIcon
-  });
-};
-
-var _default = DeleteButton;
-exports.default = _default;