kitchen-simulator 5.10.2-react.18 → 5.10.4-react.18

package/es/class/vertex.js

@@ -0,0 +1,198 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import { List, Map } from 'immutable';
+import { Vertex as VertexModel } from "../models";
+import { GeometryUtils, IDBroker, SnapSceneUtils, SnapUtils } from "../utils/export";
+import { END_DRAGGING_VERTEX, MODE_DRAGGING_VERTEX } from "../constants";
+import { Layer, Line } from "../class/export";
+import { isEmpty } from "../utils/helper";
+var Vertex = /*#__PURE__*/function () {
+  function Vertex() {
+    _classCallCheck(this, Vertex);
+  }
+  return _createClass(Vertex, null, [{
+    key: "add",
+    value: function add(state, layerID, x, y, relatedPrototype, relatedID) {
+      var vertex = state.getIn(['scene', 'layers', layerID, 'vertices']).find(function (vertex) {
+        return GeometryUtils.samePoints(vertex, {
+          x: x,
+          y: y
+        });
+      });
+      if (vertex) {
+        vertex = vertex.update(relatedPrototype, function (related) {
+          return related.push(relatedID);
+        });
+      } else {
+        vertex = new VertexModel(_defineProperty({
+          id: IDBroker.acquireID(),
+          name: 'Vertex',
+          x: x,
+          y: y
+        }, relatedPrototype, new List([relatedID])));
+      }
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertex.id], vertex);
+      return {
+        updatedState: state,
+        vertex: vertex
+      };
+    }
+  }, {
+    key: "setAttributes",
+    value: function setAttributes(state, layerID, vertexID, vertexAttributes) {
+      state = state.mergeIn(['scene', 'layers', layerID, 'vertices', vertexID], vertexAttributes);
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "addElement",
+    value: function addElement(state, layerID, vertexID, elementPrototype, elementID) {
+      state = state.updateIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype], function (list) {
+        return list.push(elementID);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "removeElement",
+    value: function removeElement(state, layerID, vertexID, elementPrototype, elementID) {
+      var elementIndex = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype]).findIndex(function (el) {
+        return el === elementID;
+      });
+      if (elementIndex !== -1) {
+        state = state.updateIn(['scene', 'layers', layerID, 'vertices', vertexID, elementPrototype], function (list) {
+          return list.remove(elementIndex);
+        });
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "select",
+    value: function select(state, layerID, vertexID) {
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID, 'selected'], true);
+      state = state.updateIn(['scene', 'layers', layerID, 'selected', 'vertices'], function (elems) {
+        return elems.push(vertexID);
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "unselect",
+    value: function unselect(state, layerID, vertexID) {
+      state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID, 'selected'], false);
+      state = state.updateIn(['scene', 'layers', layerID, 'selected', 'vertices'], function (elems) {
+        return elems.filter(function (el) {
+          return el.id !== vertexID;
+        });
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "remove",
+    value: function remove(state, layerID, vertexID, relatedPrototype, relatedID, forceRemove) {
+      var vertex = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID]);
+      if (vertex) {
+        if (relatedPrototype && relatedID) vertex = vertex.update(relatedPrototype, function (related) {
+          var index = related.findIndex(function (ID) {
+            return relatedID === ID;
+          });
+          return related["delete"](index);
+        });
+        var inUse = vertex.areas.size || vertex.lines.size;
+        if (inUse && !forceRemove) {
+          state = state.setIn(['scene', 'layers', layerID, 'vertices', vertexID], vertex);
+        } else {
+          state = state.deleteIn(['scene', 'layers', layerID, 'vertices', vertexID]);
+        }
+      }
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "beginDraggingVertex",
+    value: function beginDraggingVertex(state, layerID, vertexID, x, y) {
+      var snapElements = SnapSceneUtils.sceneSnapElements(state.scene, new List(), state.snapMask);
+      state = state.merge({
+        mode: MODE_DRAGGING_VERTEX,
+        snapElements: snapElements,
+        draggingSupport: Map({
+          layerID: layerID,
+          vertexID: vertexID,
+          previousMode: state.get('mode')
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "updateDraggingVertex",
+    value: function updateDraggingVertex(state, x, y) {
+      var _state = state,
+        draggingSupport = _state.draggingSupport,
+        snapElements = _state.snapElements,
+        scene = _state.scene;
+      var snap = null;
+      if (state.snapMask && !state.snapMask.isEmpty()) {
+        snap = SnapUtils.nearestSnap(snapElements, x, y, state.snapMask);
+        if (snap) {
+          var _snap$point = snap.point;
+          x = _snap$point.x;
+          y = _snap$point.y;
+        }
+      }
+      var layerID = draggingSupport.get('layerID');
+      var vertexID = draggingSupport.get('vertexID');
+      state = state.merge({
+        activeSnapElement: snap ? snap.snap : null,
+        scene: scene.mergeIn(['layers', layerID, 'vertices', vertexID], {
+          x: x,
+          y: y
+        })
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }, {
+    key: "endDraggingVertex",
+    value: function endDraggingVertex(state, x, y) {
+      var _state2 = state,
+        draggingSupport = _state2.draggingSupport;
+      var layerID = draggingSupport.get('layerID');
+      var vertexID = draggingSupport.get('vertexID');
+      var lines = state.getIn(['scene', 'layers', layerID, 'vertices', vertexID, 'lines']);
+      if (!isEmpty(lines)) {
+        state = lines.reduce(function (reducedState, lineID) {
+          var eachLine = reducedState.getIn(['scene', 'layers', layerID, 'lines', lineID]);
+          if (isEmpty(eachLine)) return reducedState;
+          reducedState = Layer.removeZeroLengthLines(reducedState, layerID).updatedState;
+          reducedState = Layer.mergeEqualsVertices(reducedState, layerID, vertexID).updatedState;
+          reducedState = Line.select(reducedState, layerID, eachLine.id).updatedState;
+          reducedState = reducedState.setIn(['mode'], MODE_DRAGGING_VERTEX);
+          reducedState = Line.applyWallChanges(reducedState, END_DRAGGING_VERTEX).updatedState;
+          return reducedState;
+        }, state);
+      }
+      state = state.merge({
+        mode: draggingSupport.get('previousMode'),
+        draggingSupport: null,
+        activeSnapElement: null,
+        snapElements: new List()
+      });
+      return {
+        updatedState: state
+      };
+    }
+  }]);
+}();
+export { Vertex as default };

package/es/components/content.js

@@ -0,0 +1,135 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import Viewer2D from "./viewer2d/viewer2d";
+import Viewer3D from "./viewer3d/viewer3d";
+import Viewer3DFirstPerson from "./viewer3d/viewer3d-first-person";
+// import CatalogList from './catalog-view/catalog-list';
+// import ProjectConfigurator from './configurator/project-configurator';
+import * as constants from "../constants";
+import Front3D from "./viewer3d/front3D";
+export default function Content(_ref) {
+  var width = _ref.width,
+    height = _ref.height,
+    state = _ref.state,
+    customContents = _ref.customContents,
+    match = _ref.match,
+    setToolbar = _ref.setToolbar,
+    replaceCabinet = _ref.replaceCabinet,
+    keyDownEnable = _ref.keyDownEnable,
+    catalog = _ref.catalog,
+    onInternalEvent = _ref.onInternalEvent;
+  var mode = state.get('mode');
+
+  // Internal Event for unselect_all
+  useEffect(function () {
+    if (state.getIn(['scene', 'layers', 'layer-1', 'selected', 'vertices']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'lines']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'holes']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'areas']).size + state.getIn(['scene', 'layers', 'layer-1', 'selected', 'items']).size < 1) onInternalEvent === null || onInternalEvent === void 0 || onInternalEvent({
+      type: constants.INTERNAL_EVENT_UNSELECT_ALL,
+      value: null
+    });
+  }, [state.getIn(['scene', 'layers', 'layer-1', 'selected'])]);
+  switch (mode) {
+    // this mode is when view elevation
+    case constants.MODE_ELEVATION_VIEW:
+      return /*#__PURE__*/React.createElement(Front3D, {
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        catalog: catalog
+      });
+    case constants.MODE_3D_VIEW:
+      return /*#__PURE__*/React.createElement(Viewer3D, {
+        id: "viewer3D",
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
+      });
+    case constants.MODE_3D_FIRST_PERSON:
+      return /*#__PURE__*/React.createElement(Viewer3DFirstPerson, {
+        state: state,
+        width: width,
+        height: height
+      });
+
+    // case constants.MODE_VIEWING_CATALOG:
+    //   return (
+    //     <CatalogList
+    //       state={state}
+    //       param={match}
+    //       width={width}
+    //       height={height}
+    //       categoryData={this.props.categoryData}
+    //     />
+    //   );
+
+    case constants.MODE_IDLE:
+    case constants.MODE_2D_ZOOM_IN:
+    case constants.MODE_2D_ZOOM_OUT:
+    case constants.MODE_2D_PAN:
+    case constants.MODE_WAITING_DRAWING_LINE:
+    case constants.MODE_DRAGGING_LINE:
+    case constants.MODE_DRAGGING_VERTEX:
+    case constants.MODE_DRAGGING_ITEM:
+    case constants.MODE_DRAWING_LINE:
+    case constants.MODE_DRAWING_HOLE:
+    case constants.MODE_DRAWING_ITEM:
+    case constants.MODE_DRAGGING_HOLE:
+    case constants.MODE_ROTATING_ITEM:
+      return /*#__PURE__*/React.createElement(Viewer2D, {
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        onInternalEvent: onInternalEvent
+      });
+    case constants.MODE_ROTATING_ITEM_3D:
+    case constants.MODE_DRAGGING_ITEM_3D:
+    case constants.MODE_IDLE_3D:
+    case constants.MODE_DRAWING_ITEM_3D:
+    case constants.MODE_DRAWING_HOLE_3D:
+    case constants.MODE_DRAGGING_HOLE_3D:
+      return /*#__PURE__*/React.createElement(Viewer3D, {
+        id: "viewer3D",
+        state: state,
+        width: width,
+        height: height,
+        setToolbar: setToolbar,
+        replaceCabinet: replaceCabinet,
+        keyDownEnable: keyDownEnable,
+        downloadFlag: false,
+        onInternalEvent: onInternalEvent
+      });
+
+    // case constants.MODE_CONFIGURING_PROJECT:
+    //   return (
+    //     <ProjectConfigurator width={width} height={height} state={state} />
+    //   );
+
+    default:
+      if (customContents.hasOwnProperty(mode)) {
+        var CustomContent = customContents[mode];
+        return /*#__PURE__*/React.createElement(CustomContent, {
+          width: width,
+          height: height,
+          state: state
+        });
+      } else {
+        throw new Error("Mode ".concat(mode, " doesn't have a mapped content"));
+      }
+  }
+}
+Content.propTypes = {
+  state: PropTypes.object.isRequired,
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  replaceCabinet: PropTypes.func.isRequired,
+  onInternalEvent: PropTypes.func.isRequired
+};

package/es/components/export.js

@@ -0,0 +1,9 @@
+import Content from "./content";
+import Viewer2DComponents from "./viewer2d/export";
+import StyleComponents from "./style/export";
+export { Content, Viewer2DComponents, StyleComponents };
+export default {
+  Content: Content,
+  Viewer2DComponents: Viewer2DComponents,
+  StyleComponents: StyleComponents
+};

package/es/components/style/button.js

@@ -0,0 +1,106 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+var _excluded = ["type", "style", "styleHover", "children", "size"];
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from "../../shared-style";
+var BASE_STYLE = {
+  display: 'inline-block',
+  fontWeight: '400',
+  lineHeight: '1.25',
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  verticalAlign: 'middle',
+  cursor: 'pointer',
+  WebkitUserSelect: 'none',
+  MozUserSelect: 'none',
+  MsUserSelect: 'none',
+  userSelect: 'none',
+  padding: '5px 14px',
+  fontSize: '14px',
+  color: SharedStyle.COLORS.black,
+  fonWeight: '400px',
+  transition: 'background-color 175ms ease, border 175ms ease',
+  outline: 'none',
+  borderRadius: '2px',
+  borderWidth: '1px',
+  borderType: 'solid',
+  width: '100%'
+};
+var BASE_STYLE_SIZE = {
+  small: {
+    fontSize: '12px',
+    padding: '3px 8px'
+  },
+  normal: {},
+  large: {
+    padding: '8px 20px'
+  }
+};
+var Button = /*#__PURE__*/function (_Component) {
+  function Button(props) {
+    var _this;
+    _classCallCheck(this, Button);
+    _this = _callSuper(this, Button, [props]);
+    _this.state = {
+      hover: false
+    };
+    return _this;
+  }
+  _inherits(Button, _Component);
+  return _createClass(Button, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var hover = this.state.hover;
+      var _this$props = this.props,
+        type = _this$props.type,
+        customStyle = _this$props.style,
+        customStyleHover = _this$props.styleHover,
+        children = _this$props.children,
+        size = _this$props.size,
+        rest = _objectWithoutProperties(_this$props, _excluded);
+      var styleMerged = Object.assign({}, BASE_STYLE, BASE_STYLE_SIZE[size], hover ? customStyleHover : customStyle);
+      return /*#__PURE__*/React.createElement("button", _extends({
+        type: type,
+        onMouseEnter: function onMouseEnter(e) {
+          return _this2.setState({
+            hover: true
+          });
+        },
+        onMouseLeave: function onMouseLeave(e) {
+          return _this2.setState({
+            hover: false
+          });
+        },
+        style: styleMerged
+      }, rest), children);
+    }
+  }]);
+}(Component);
+export { Button as default };
+Button.defaultProps = {
+  type: 'button',
+  size: 'normal',
+  style: {
+    backgroundColor: '#e6e6e6',
+    borderColor: '#adadad'
+  },
+  styleHover: {
+    backgroundColor: '#d4d4d4',
+    borderColor: '#8c8c8c'
+  }
+};
+Button.propTypes = {
+  type: PropTypes.string,
+  style: PropTypes.object,
+  styleHover: PropTypes.object,
+  size: PropTypes.oneOf(['large', 'normal', 'small'])
+};

package/es/components/style/cancel-button.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Button from "./button";
+var STYLE = {
+  borderColor: '#adadad',
+  backgroundColor: '#e6e6e6'
+};
+var STYLE_HOVER = {
+  backgroundColor: '#d4d4d4',
+  borderColor: '#8c8c8c'
+};
+export default function CancelButton(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    style: STYLE,
+    styleHover: STYLE_HOVER
+  }, rest), children);
+}

package/es/components/style/content-container.js

@@ -0,0 +1,30 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import PropTypes from 'prop-types';
+var STYLE = {
+  padding: '0 20px',
+  overflowY: 'auto'
+};
+export default function ContentContainer(_ref) {
+  var children = _ref.children,
+    width = _ref.width,
+    height = _ref.height,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style;
+  return /*#__PURE__*/React.createElement("div", {
+    style: _objectSpread(_objectSpread({
+      width: width,
+      height: height
+    }, STYLE), style),
+    onWheel: function onWheel(event) {
+      return event.stopPropagation();
+    }
+  }, children);
+}
+ContentContainer.propsType = {
+  width: PropTypes.number.isRequired,
+  height: PropTypes.number.isRequired,
+  style: PropTypes.object
+};

package/es/components/style/content-title.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as SharedStyle from "../../shared-style";
+var STYLE = {
+  color: SharedStyle.PRIMARY_COLOR.alt,
+  fontWeight: 300
+};
+export default function ContentTitle(_ref) {
+  var children = _ref.children,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("h1", _extends({
+    style: _objectSpread(_objectSpread({}, STYLE), style)
+  }, rest), children);
+}
+ContentTitle.propsType = {
+  style: PropTypes.object
+};

package/es/components/style/delete-button.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import Button from "./button";
+import * as SharedStyle from "../../shared-style";
+var STYLE = {
+  borderColor: '#c12e2a',
+  backgroundColor: '#c9302c',
+  color: SharedStyle.COLORS.white
+};
+var STYLE_HOVER = {
+  backgroundColor: '#972726',
+  borderColor: '#c12e2a',
+  color: SharedStyle.COLORS.white
+};
+export default function FormDeleteButton(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    style: STYLE,
+    styleHover: STYLE_HOVER
+  }, rest), children);
+}

package/es/components/style/export.js

@@ -0,0 +1,31 @@
+import Button from "./button";
+import CancelButton from "./cancel-button";
+import ContentContainer from "./content-container";
+import ContentTitle from "./content-title";
+import DeleteButton from "./delete-button";
+import FormBlock from "./form-block";
+import FormColorInput from "./form-color-input";
+import FormLabel from "./form-label";
+import FormNumberInput from "./form-number-input";
+import FormSelect from "./form-select";
+import FormSlider from "./form-slider";
+import FormSubmitButton from "./form-submit-button";
+import FormTextInput from "./form-text-input";
+import FormNumberInput2 from "./form-number-input_2";
+export { Button, CancelButton, ContentContainer, ContentTitle, DeleteButton, FormBlock, FormColorInput, FormLabel, FormNumberInput, FormSelect, FormSlider, FormSubmitButton, FormTextInput, FormNumberInput2 };
+export default {
+  Button: Button,
+  CancelButton: CancelButton,
+  ContentContainer: ContentContainer,
+  ContentTitle: ContentTitle,
+  DeleteButton: DeleteButton,
+  FormBlock: FormBlock,
+  FormColorInput: FormColorInput,
+  FormLabel: FormLabel,
+  FormNumberInput: FormNumberInput,
+  FormSelect: FormSelect,
+  FormSlider: FormSlider,
+  FormSubmitButton: FormSubmitButton,
+  FormTextInput: FormTextInput,
+  FormNumberInput2: FormNumberInput2
+};

package/es/components/style/form-block.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+var BASE_STYLE = {
+  marginBottom: '16px'
+};
+export default function FormBlock(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    style: _objectSpread(_objectSpread({}, BASE_STYLE), {}, {
+      style: style
+    })
+  }, rest), children);
+}

package/es/components/style/form-color-input.js

@@ -0,0 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onChange"];
+import React from 'react';
+import FormTextInput from "./form-text-input";
+var STYLE = {
+  padding: 0,
+  border: 0
+};
+var EREG_NUMBER = /^.*$/;
+export default function FormColorInput(_ref) {
+  var onChange = _ref.onChange,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var onChangeCustom = function onChangeCustom(event) {
+    var value = event.target.value;
+    if (EREG_NUMBER.test(value)) {
+      onChange(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement(FormTextInput, _extends({
+    type: "color",
+    style: STYLE,
+    onChange: onChangeCustom,
+    autoComplete: "off"
+  }, rest));
+}

package/es/components/style/form-label.js

@@ -0,0 +1,22 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["children", "style"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+var BASE_STYLE = {
+  display: 'block',
+  marginBottom: '2px',
+  fontSize: '12px'
+};
+export default function FormLabel(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("label", _extends({
+    style: _objectSpread(_objectSpread({}, BASE_STYLE), {}, {
+      style: style
+    })
+  }, rest), children);
+}