kitchen-simulator 1.1.1-test.30 → 1.1.1-test.31

package/lib/catalog/properties/property-toggle.js

@@ -5,11 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = PropertyToggle;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _export = require("../../components/style/export");
 var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-//import PropTypes from 'prop-types';
-
 function PropertyToggle(_ref) {
   var value = _ref.value,
     onUpdate = _ref.onUpdate,
@@ -37,12 +36,11 @@ function PropertyToggle(_ref) {
     size: "small"
   }, configs.actionName)))));
 }
-//
-// PropertyToggle.propTypes = {
-//   value: PropTypes.any.isRequired,
-//   onUpdate: PropTypes.func.isRequired,
-//   configs: PropTypes.object.isRequired,
-//   sourceElement: PropTypes.object,
-//   internalState: PropTypes.object,
-//   state: PropTypes.object.isRequired
-// };
+PropertyToggle.propTypes = {
+  value: _propTypes["default"].any.isRequired,
+  onUpdate: _propTypes["default"].func.isRequired,
+  configs: _propTypes["default"].object.isRequired,
+  sourceElement: _propTypes["default"].object,
+  internalState: _propTypes["default"].object,
+  state: _propTypes["default"].object.isRequired
+};

package/lib/components/content.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = Content;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _viewer2d = _interopRequireDefault(require("./viewer2d/viewer2d"));
 var _viewer3d = _interopRequireDefault(require("./viewer3d/viewer3d"));
 var _viewer3dFirstPerson = _interopRequireDefault(require("./viewer3d/viewer3d-first-person"));
@@ -13,8 +14,6 @@ var constants = _interopRequireWildcard(require("../constants"));
 var _front3D = _interopRequireDefault(require("./viewer3d/front3D"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-//import PropTypes from 'prop-types';
-
 function Content(_ref, _ref2) {
   var width = _ref.width,
     height = _ref.height,
@@ -27,6 +26,7 @@ function Content(_ref, _ref2) {
     catalog = _ref.catalog;
   var projectActions = _ref2.projectActions;
   var mode = state.get('mode');
+  console.log('mode =>', mode);
   switch (mode) {
     // this mode is when view elevation
     case constants.MODE_ELEVATION_VIEW:
@@ -105,13 +105,12 @@ function Content(_ref, _ref2) {
       }
   }
 }
-
-// Content.propTypes = {
-//   state: PropTypes.object.isRequired,
-//   width: PropTypes.number.isRequired,
-//   height: PropTypes.number.isRequired,
-//   replaceCabinet: PropTypes.func.isRequired
-// };
-// Content.contextTypes = {
-//   projectActions: PropTypes.object.isRequired
-// };
+Content.propTypes = {
+  state: _propTypes["default"].object.isRequired,
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  replaceCabinet: _propTypes["default"].func.isRequired
+};
+Content.contextTypes = {
+  projectActions: _propTypes["default"].object.isRequired
+};

package/lib/components/disclaimer/disclaimer.js

@@ -6,65 +6,83 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = DisclaimerScreen;
 var _react = _interopRequireWildcard(require("react"));
+var _core = require("@material-ui/core");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var styles = {
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#D1C4E9',
-    background: 'url("/assets/img/svg/disclaimer/background.svg") no-repeat center',
-    backgroundSize: 'cover',
-    padding: '16px',
-    height: '100dvh',
-    width: '100dvw'
-  },
-  card: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    backgroundColor: '#fff',
-    borderRadius: 24,
-    width: '85vw',
-    textAlign: 'center',
-    boxShadow: '0 8px 20px rgba(0,0,0,0.08)',
-    height: 'fit-content',
-    opacity: '90%',
-    gap: '1rem',
-    padding: '1.5rem',
-    maxWidth: '364px'
-  },
-  title: {
-    fontWeight: 'bold',
-    fontSize: '1.5rem',
-    lineHeight: '133%',
-    letterSpacing: '0px',
-    textAlign: 'center',
-    verticalAlign: 'middle',
-    maxWidth: '200px'
-  },
-  body: {
-    fontWeight: 400,
-    fontStyle: 'normal',
-    fontSize: '0.875rem',
-    lineHeight: '143%',
-    letterSpacing: '0.17px',
-    color: '#49454F',
-    maxWidth: '90%'
-  },
-  button: {
-    marginTop: '0.5rem',
-    backgroundColor: '#6750A4',
-    color: '#fff',
-    borderRadius: 100,
-    padding: '16px 72px',
-    textTransform: 'none',
-    fontWeight: 500,
-    fontSize: '1rem',
-    border: 'none',
-    cursor: 'pointer'
-  }
-};
+var useStyles = (0, _core.makeStyles)(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: '#D1C4E9',
+      background: 'url("/assets/img/svg/disclaimer/background.svg") no-repeat center',
+      backgroundSize: 'cover',
+      padding: theme.spacing(2),
+      height: '100dvh',
+      width: '100dvw'
+    },
+    card: {
+      '@media (orientation: landscape)': {
+        padding: '0.75rem',
+        gap: '0.5rem'
+      },
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      backgroundColor: '#fff',
+      borderRadius: 24,
+      width: '85vw',
+      textAlign: 'center',
+      boxShadow: '0 8px 20px rgba(0,0,0,0.08)',
+      height: 'fit-content',
+      opacity: '90%',
+      gap: '1rem',
+      padding: '1.5rem',
+      maxWidth: '364px'
+    },
+    title: {
+      fontWeight: 'bold',
+      fontSize: '1.5rem',
+      lineHeight: '133%',
+      letterSpacing: '0px',
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      maxWidth: '200px'
+    },
+    body: {
+      fontWeight: 400,
+      fontStyle: 'normal',
+      fontSize: '0.875rem',
+      lineHeight: '143%',
+      letterSpacing: '0.17px',
+      color: '#49454F',
+      maxWidth: '90%'
+    },
+    button: {
+      '@media (orientation: landscape)': {
+        padding: '12px 36px'
+      },
+      marginTop: '0.5rem',
+      backgroundColor: '#6750A4',
+      color: '#fff',
+      borderRadius: 100,
+      padding: '16px 72px',
+      textTransform: 'none',
+      fontWeight: 500,
+      fontSize: '1rem',
+      '&:hover': {
+        backgroundColor: '#7c3aed'
+      },
+      '&:active': {
+        backgroundColor: '#5a25c2'
+      },
+      '&:disabled': {
+        backgroundColor: '#F3E5F5',
+        color: '#1D1B20'
+      }
+    }
+  };
+});
 function DisclaimerScreen(_ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? true : _ref$open,
@@ -75,6 +93,7 @@ function DisclaimerScreen(_ref) {
     message = _ref$message === void 0 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, "We\u2019re adding the finishing touches to the mobile version.", /*#__PURE__*/_react["default"].createElement("br", null), "In the meantime, try our desktop version to start designing your dream room.") : _ref$message,
     _ref$buttonText = _ref.buttonText,
     buttonText = _ref$buttonText === void 0 ? 'Close' : _ref$buttonText;
+  var classes = useStyles();
   (0, _react.useEffect)(function () {
     var viewportMeta = document.querySelector('meta[name="viewport"]');
     if (!viewportMeta) {
@@ -86,20 +105,21 @@ function DisclaimerScreen(_ref) {
   }, []);
   if (!open) return null;
   return /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.root
+    className: classes.root
   }, /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.card
+    className: classes.card
   }, /*#__PURE__*/_react["default"].createElement("img", {
     width: 40,
     height: 40,
     alt: "loog",
     src: '/assets/img/svg/disclaimer/logo-dots.svg'
-  }), /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.title
-  }, titleTop), /*#__PURE__*/_react["default"].createElement("div", {
-    style: styles.body
-  }, message), /*#__PURE__*/_react["default"].createElement("button", {
-    style: styles.button,
+  }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    className: classes.title
+  }, titleTop), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+    className: classes.body
+  }, message), /*#__PURE__*/_react["default"].createElement(_core.Button, {
+    variant: "contained",
+    className: classes.button,
     onClick: onClose
   }, buttonText)));
 }

package/lib/components/style/button.js

@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _excluded = ["type", "style", "styleHover", "children", "size"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
@@ -23,7 +25,7 @@ function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } //import PropTypes from 'prop-types';
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var BASE_STYLE = {
   display: 'inline-block',
   fontWeight: '400',
@@ -110,10 +112,9 @@ Button.defaultProps = {
     borderColor: '#8c8c8c'
   }
 };
-
-// Button.propTypes = {
-//   type: PropTypes.string,
-//   style: PropTypes.object,
-//   styleHover: PropTypes.object,
-//   size: PropTypes.oneOf(['large', 'normal', 'small'])
-// };
+Button.propTypes = {
+  type: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  styleHover: _propTypes["default"].object,
+  size: _propTypes["default"].oneOf(['large', 'normal', 'small'])
+};

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = ContentContainer;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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; }
@@ -12,8 +13,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-//import PropTypes from 'prop-types';
-
 var STYLE = {
   padding: '0 20px',
   overflowY: 'auto'
@@ -35,7 +34,7 @@ function ContentContainer(_ref) {
   }, children);
 }
 ContentContainer.propsType = {
-  width: PropTypes.number.isRequired,
-  height: PropTypes.number.isRequired,
-  style: PropTypes.object
+  width: _propTypes["default"].number.isRequired,
+  height: _propTypes["default"].number.isRequired,
+  style: _propTypes["default"].object
 };

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

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = ContentTitle;
 var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
-var _excluded = ["children", "style"]; //import PropTypes from 'prop-types';
+var _excluded = ["children", "style"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -32,5 +33,5 @@ function ContentTitle(_ref) {
   }, rest), children);
 }
 ContentTitle.propsType = {
-  style: PropTypes.object
+  style: _propTypes["default"].object
 };

package/lib/components/style/form-number-input.js

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("../../constants");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _helper = require("../../utils/helper");
-var _templateObject; //import PropTypes from 'prop-types';
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
 function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
 function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
@@ -24,8 +26,28 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
 function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var StyledInput = _styledComponents["default"].input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  padding: 15px 25px 12px 0px;\n  width: 120px;\n  color: ", ";\n  background-color: rgb(255, 255, 255);\n  border: 2px solid;\n  text-align: right;\n  float: right;\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 17px;\n  border-radius: 5px;\n  outline: 0;\n  :focus {\n    border-color: ", ";\n  }\n"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY, _constants.SECONDARY_PURPLE_COLOR);
+var styles = {
+  input: {
+    display: 'block',
+    padding: '15px 25px 12px 0px',
+    width: 120,
+    color: _constants.TEXT_COLOR_NEUTRAL_0,
+    backgroundColor: 'rgb(255, 255, 255)',
+    border: '2px solid',
+    textAlign: 'right',
+    "float": 'right',
+    fontFamily: _constants.DEFAULT_FONT_FAMILY,
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: '17px',
+    borderRadius: 5,
+    outline: 0,
+    transition: 'border-color 0.2s'
+  },
+  inputFocus: {
+    borderColor: _constants.SECONDARY_PURPLE_COLOR
+  }
+};
 var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
   function FormNumberInput(props, context) {
     var _this;
@@ -117,13 +139,16 @@ var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
           });
         }
       };
-      return /*#__PURE__*/_react["default"].createElement(StyledInput, {
+
+      // Merge base style, focus style, and custom style
+      var inputStyle = _objectSpread(_objectSpread(_objectSpread({}, styles.input), this.state.focusOn ? styles.inputFocus : {}), style);
+      return /*#__PURE__*/_react["default"].createElement("input", {
         id: "form_number_input",
         autoFocus: this.state.focusOn,
         readOnly: !!this.props.disabled,
         type: "text",
         value: currValue,
-        style: style,
+        style: inputStyle,
         onChange: function onChange(evt) {
           _this2.context.projectActions.copyProperties('ddddd');
           var valid = regexp.test(evt.nativeEvent.target.value);
@@ -165,24 +190,25 @@ var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
       });
     }
   }]);
-}(_react.Component); // FormNumberInput.propTypes = {
-//   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-//   style: PropTypes.object,
-//   onChange: PropTypes.func.isRequired,
-//   onValid: PropTypes.func,
-//   onInvalid: PropTypes.func,
-//   min: PropTypes.number,
-//   max: PropTypes.number,
-//   precision: PropTypes.number,
-//   placeholder: PropTypes.string,
-//   labelName: PropTypes.string,
-//   isCeiling: PropTypes.string
-// };
-// FormNumberInput.contextTypes = {
-//   translator: PropTypes.object.isRequired,
-//   projectActions: PropTypes.object.isRequired,
-//   linesActions: PropTypes.object.isRequired
-// };
+}(_react.Component);
+FormNumberInput.propTypes = {
+  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  style: _propTypes["default"].object,
+  onChange: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  onInvalid: _propTypes["default"].func,
+  min: _propTypes["default"].number,
+  max: _propTypes["default"].number,
+  precision: _propTypes["default"].number,
+  placeholder: _propTypes["default"].string,
+  labelName: _propTypes["default"].string,
+  isCeiling: _propTypes["default"].string
+};
+FormNumberInput.contextTypes = {
+  translator: _propTypes["default"].object.isRequired,
+  projectActions: _propTypes["default"].object.isRequired,
+  linesActions: _propTypes["default"].object.isRequired
+};
 FormNumberInput.defaultProps = {
   value: 0,
   style: {},

package/lib/components/style/form-number-input_2.js

@@ -6,9 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _md = require("react-icons/md");
 var _constants = require("../../constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 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; }
@@ -24,7 +26,7 @@ function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError(
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
 function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); } //import PropTypes from 'prop-types';
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
 var STYLE_INPUT = {
   display: 'block',
   width: '100%',
@@ -185,21 +187,22 @@ var FormNumberInput = exports["default"] = /*#__PURE__*/function (_Component) {
       })));
     }
   }]);
-}(_react.Component); // FormNumberInput.propTypes = {
-//   value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-//   style: PropTypes.object,
-//   onChange: PropTypes.func.isRequired,
-//   onValid: PropTypes.func,
-//   onInvalid: PropTypes.func,
-//   min: PropTypes.number,
-//   max: PropTypes.number,
-//   precision: PropTypes.number,
-//   placeholder: PropTypes.string
-// };
-// FormNumberInput.contextTypes = {
-//   translator: PropTypes.object.isRequired,
-//   projectActions: PropTypes.object.isRequired
-// };
+}(_react.Component);
+FormNumberInput.propTypes = {
+  value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  style: _propTypes["default"].object,
+  onChange: _propTypes["default"].func.isRequired,
+  onValid: _propTypes["default"].func,
+  onInvalid: _propTypes["default"].func,
+  min: _propTypes["default"].number,
+  max: _propTypes["default"].number,
+  precision: _propTypes["default"].number,
+  placeholder: _propTypes["default"].string
+};
+FormNumberInput.contextTypes = {
+  translator: _propTypes["default"].object.isRequired,
+  projectActions: _propTypes["default"].object.isRequired
+};
 FormNumberInput.defaultProps = {
   value: 0,
   style: {},

package/lib/components/style/form-select.js

@@ -1,26 +1,75 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = FormSelect;
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _constants = require("../../constants");
 var _excluded = ["children", "style"];
-var _templateObject;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+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; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var StyledSelect = _styledComponents["default"].select(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: block;\n  width: 120px;\n  float: right;\n  padding: 15px 10px 12px 0px;\n  color: ", ";\n  border: 2px solid;\n  font-family: ", ";\n  font-size: 12px;\n  font-weight: 600;\n  line-height: 17px;\n  text-align: right;\n  outline: none;\n  border-radius: 5px;\n  :hover {\n    border-color: ", ";\n  }\n  :focus {\n    border-color: ", ";\n  }\n"])), _constants.TEXT_COLOR_NEUTRAL_3, _constants.DEFAULT_FONT_FAMILY, _constants.SECONDARY_PURPLE_COLOR, _constants.SECONDARY_PURPLE_COLOR);
+var styles = {
+  select: {
+    display: 'block',
+    width: 120,
+    "float": 'right',
+    padding: '15px 10px 12px 0px',
+    color: _constants.TEXT_COLOR_NEUTRAL_3,
+    border: '2px solid',
+    fontFamily: _constants.DEFAULT_FONT_FAMILY,
+    fontSize: 12,
+    fontWeight: 600,
+    lineHeight: '17px',
+    textAlign: 'right',
+    outline: 'none',
+    borderRadius: 5,
+    transition: 'border-color 0.2s'
+  }
+};
 function FormSelect(_ref) {
   var children = _ref.children,
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(StyledSelect, _extends({
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    focus = _React$useState2[0],
+    setFocus = _React$useState2[1];
+  var _React$useState3 = _react["default"].useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    hover = _React$useState4[0],
+    setHover = _React$useState4[1];
+  var borderColor = focus || hover ? _constants.SECONDARY_PURPLE_COLOR : undefined;
+  return /*#__PURE__*/_react["default"].createElement("select", _extends({
     type: "text",
-    style: style
+    style: _objectSpread(_objectSpread({}, styles.select), {}, {
+      borderColor: borderColor
+    }, style),
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
+    },
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    }
   }, rest), children);
 }