kitchen-simulator 1.1.1-test.6 → 1.1.1-test.60

package/lib/KitchenConfiguratorApp.js

@@ -6,28 +6,29 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = KitchenConfiguratorApp;
 var _react = _interopRequireWildcard(require("react"));
-var PropTypes = _interopRequireWildcard(require("prop-types"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRedux = require("react-redux");
 var _redux = require("redux");
-var Models = _interopRequireWildcard(require("./models"));
+var _models = _interopRequireWildcard(require("./models"));
+var Models = _models;
+var _reducer = _interopRequireDefault(require("./reducers/reducer"));
 var _KitchenConfigurator = _interopRequireDefault(require("./KitchenConfigurator"));
 var _AppContext = _interopRequireDefault(require("./AppContext"));
 var _catalog = _interopRequireDefault(require("./catalog/catalog"));
 var _SVGLoader = require("three/addons/loaders/SVGLoader");
 var _helper = require("./utils/helper");
 var _constants = require("./constants");
-var Areas = _interopRequireWildcard(require("./catalog/areas/area/planner-element.jsx"));
-var Lines = _interopRequireWildcard(require("./catalog/lines/wall/planner-element.jsx"));
+var Areas = _interopRequireWildcard(require("./catalog/areas/area/planner-element"));
+var Lines = _interopRequireWildcard(require("./catalog/lines/wall/planner-element"));
 var Holes = _interopRequireWildcard(require("./catalog/holes/export"));
 var _itemLoader = require("./catalog/utils/item-loader");
-var _index = require("./index");
+var _export2 = require("./plugins/export");
 var _immutable = require("immutable");
-var _reactGa = _interopRequireDefault(require("react-ga4"));
-var _reactHotjar = require("react-hotjar");
 var Sentry = _interopRequireWildcard(require("@sentry/react"));
 var _projectActions = require("./actions/project-actions");
 var _exporter = _interopRequireDefault(require("./catalog/utils/exporter"));
-var _excluded = ["width", "height", "projectElement", "categoryData", "dataBundle", "configData", "toolbarButtons", "options", "user", "auth", "featureFlags", "sentry", "analytics", "onEvent", "onSave", "onError"];
+var THREE = _interopRequireWildcard(require("three"));
+var _excluded = ["width", "height", "projectElement", "categoryData", "dataBundle", "configData", "options", "user", "auth", "featureFlags", "sentry", "analytics", "onEvent", "onSave", "onError"];
 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 _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); 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); }
@@ -48,20 +49,14 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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; }
+if (typeof window !== 'undefined') window.THREE = THREE;
+
 /* ============================== component ============================= */
 var MyCatalog = new _catalog["default"]();
 var AppState = (0, _immutable.Map)({
-  KitchenConfigurator: new _index.Models.State()
+  KitchenConfigurator: new _models.State()
 });
 console.log('Version: 378.45-202509_DIY-364-mbox-crash');
-_reactGa["default"].initialize([{
-  trackingId: 'G-YK2JCC9F9G' // https://dev.addovisuals.com
-}, {
-  trackingId: 'G-3Y44W0RY2E' // https://demo.kc.addovisuals.com/
-}, {
-  trackingId: 'G-M2VD74KP44' // https://rtastore.diydesignspace.com/
-}]);
-_reactHotjar.hotjar.initialize('3010506', '6');
 isProduction && Sentry.init({
   dsn: process.env.SENTRY_DSN,
   environment: process.env.SENTRY_ENVIRONMENT
@@ -71,7 +66,7 @@ isProduction && Sentry.init({
 var reducer = function reducer(state, action) {
   state = state || AppState;
   state = state.update('KitchenConfigurator', function (plannerState) {
-    return (0, _index.reducer)(plannerState, action);
+    return (0, _reducer["default"])(plannerState, action);
   });
   return state;
 };
@@ -101,7 +96,7 @@ var store = (0, _redux.createStore)(reducer, null, !isProduction && window.devTo
 }) : function (f) {
   return f;
 });
-var plugins = [_index.Plugins.Keyboard(), _index.Plugins.ConsoleDebugger()];
+var plugins = [(0, _export2.Keyboard)(), (0, _export2.ConsoleDebugger)()];
 function KitchenConfiguratorApp(props) {
   var width = props.width,
     height = props.height,
@@ -109,7 +104,6 @@ function KitchenConfiguratorApp(props) {
     categoryData = props.categoryData,
     dataBundle = props.dataBundle,
     configData = props.configData,
-    toolbarButtons = props.toolbarButtons,
     options = props.options,
     user = props.user,
     auth = props.auth,
@@ -454,7 +448,6 @@ function KitchenConfiguratorApp(props) {
     logoImage: logoImg,
     companyURL: companyUrl,
     plugins: plugins,
-    toolbarButtons: toolbarButtons,
     stateExtractor: function stateExtractor(state) {
       return state.get('KitchenConfigurator');
     },
@@ -470,33 +463,25 @@ function KitchenConfiguratorApp(props) {
 /* ============================== prop types ============================== */
 
 KitchenConfiguratorApp.propTypes = {
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  projectElement: PropTypes.arrayOf(PropTypes.object),
-  categoryData: PropTypes.any,
-  dataBundle: PropTypes.any,
-  configData: PropTypes.any,
-  catalog: PropTypes.oneOfType([PropTypes.object, PropTypes.instanceOf(Models.Catalog)]),
-  logoImg: PropTypes.any,
-  companyUrl: PropTypes.string,
-  toolbarButtons: PropTypes.any,
-  options: PropTypes.object,
-  user: PropTypes.object,
-  auth: PropTypes.object,
-  featureFlags: PropTypes.object,
-  sentry: PropTypes.shape({
-    dsn: PropTypes.string,
-    environment: PropTypes.string
-  }),
-  analytics: PropTypes.shape({
-    ga4Id: PropTypes.string,
-    hotjar: PropTypes.shape({
-      id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      sv: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    })
+  width: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  height: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
+  projectElement: _propTypes["default"].arrayOf(_propTypes["default"].object),
+  categoryData: _propTypes["default"].any,
+  dataBundle: _propTypes["default"].any,
+  configData: _propTypes["default"].any,
+  catalog: _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].instanceOf(Models.Catalog)]),
+  logoImg: _propTypes["default"].any,
+  companyUrl: _propTypes["default"].string,
+  options: _propTypes["default"].object,
+  user: _propTypes["default"].object,
+  auth: _propTypes["default"].object,
+  featureFlags: _propTypes["default"].object,
+  sentry: _propTypes["default"].shape({
+    dsn: _propTypes["default"].string,
+    environment: _propTypes["default"].string
   }),
-  onEvent: PropTypes.func,
-  onSave: PropTypes.func,
-  onError: PropTypes.func,
-  store: PropTypes.object
+  onEvent: _propTypes["default"].func,
+  onSave: _propTypes["default"].func,
+  onError: _propTypes["default"].func,
+  store: _propTypes["default"].object
 };

package/lib/catalog/areas/area/planner-element.js

@@ -4,43 +4,47 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _ = require("../../..");
+var _export = _interopRequireDefault(require("../../factories/export"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var textureUrl = function textureUrl(file) {
+  return new URL("./textures/".concat(file), import.meta.url).href;
+};
 var info = {
   title: 'area',
   tag: ['area'],
   description: 'Generic Room',
-  image: ''
+  image: '' // no image provided yet
 };
 var textures = {
   parquet: {
     name: 'Parquet',
-    uri: require("./textures/parquet.jpg"),
+    uri: textureUrl('parquet.jpg'),
     lengthRepeatScale: 0.004,
     heightRepeatScale: 0.004
   },
   tile1: {
     name: 'Tile1',
-    uri: require("./textures/tile1.jpg"),
+    uri: textureUrl('tile1.jpg'),
     lengthRepeatScale: 0.01,
     heightRepeatScale: 0.01
   },
   ceramic: {
     name: 'Ceramic Tile',
-    uri: require("./textures/ceramic-tile.jpg"),
+    uri: textureUrl('ceramic-tile.jpg'),
     lengthRepeatScale: 0.02,
     heightRepeatScale: 0.02
   },
   strand_porcelain: {
     name: 'Strand Porcelain Tile',
-    uri: require("./textures/strand-porcelain.jpg"),
+    uri: textureUrl('strand-porcelain.jpg'),
     lengthRepeatScale: 0.02,
     heightRepeatScale: 0.02
   },
   grass: {
     name: 'Grass',
-    uri: require("./textures/grass.jpg"),
+    uri: textureUrl('grass.jpg'),
     lengthRepeatScale: 0.01,
     heightRepeatScale: 0.01
   }
 };
-var _default = exports["default"] = _.ElementsFactories.AreaFactory('area', info, textures);
+var _default = exports["default"] = _export["default"].AreaFactory('area', info, textures);

package/lib/catalog/factories/wall-factory-3d.js

@@ -12,7 +12,7 @@ var _geometry = require("../../utils/geometry");
 var _helper = require("../../utils/helper");
 var SharedStyle = _interopRequireWildcard(require("../../shared-style"));
 var _constants = require("../../constants");
-var _convertUnits = _interopRequireDefault(require("convert-units"));
+var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _threeCSG = _interopRequireDefault(require("../../utils/threeCSG.es6"));
 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); }
@@ -69,7 +69,7 @@ function buildWall(element, layer, scene, textures, mode) {
   // Get height and thickness of the wall converting them into the current scene units
   // let height = element.properties.getIn(['height', 'length']);
   // let thickness = element.properties.getIn(['thickness', 'length']);
-  var height = (0, _convertUnits["default"])(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER);
+  var height = (0, _convertUnitsLite.convert)(layer.ceilHeight).from(layer.unit).to(_constants.UNIT_CENTIMETER);
   var thickness = 2.0;
   var distance = (0, _geometry.verticesDistance)(vertex0, vertex1);
   var soulMaterial = new Three.MeshPhongMaterial({

package/lib/catalog/holes/export.js

@@ -81,17 +81,17 @@ Object.defineProperty(exports, "windowVertical", {
     return _plannerElement11["default"];
   }
 });
-var _plannerElement = _interopRequireDefault(require("./door-closet/planner-element.jsx"));
-var _plannerElement2 = _interopRequireDefault(require("./door-double/planner-element.jsx"));
-var _plannerElement3 = _interopRequireDefault(require("./door-exterior/planner-element.jsx"));
-var _plannerElement4 = _interopRequireDefault(require("./door-interior/planner-element.jsx"));
-var _plannerElement5 = _interopRequireDefault(require("./door-panic/planner-element.jsx"));
-var _plannerElement6 = _interopRequireDefault(require("./door-panic-double/planner-element.jsx"));
-var _plannerElement7 = _interopRequireDefault(require("./door-sliding/planner-element.jsx"));
-var _plannerElement8 = _interopRequireDefault(require("./doorway-framed/planner-element.jsx"));
-var _plannerElement9 = _interopRequireDefault(require("./doorway-frameless/planner-element.jsx"));
-var _plannerElement0 = _interopRequireDefault(require("./window-clear/planner-element.jsx"));
-var _plannerElement1 = _interopRequireDefault(require("./window-cross/planner-element.jsx"));
-var _plannerElement10 = _interopRequireDefault(require("./window-double-hung/planner-element.jsx"));
-var _plannerElement11 = _interopRequireDefault(require("./window-vertical/planner-element.jsx"));
+var _plannerElement = _interopRequireDefault(require("./door-closet/planner-element.js"));
+var _plannerElement2 = _interopRequireDefault(require("./door-double/planner-element.js"));
+var _plannerElement3 = _interopRequireDefault(require("./door-exterior/planner-element.js"));
+var _plannerElement4 = _interopRequireDefault(require("./door-interior/planner-element.js"));
+var _plannerElement5 = _interopRequireDefault(require("./door-panic/planner-element.js"));
+var _plannerElement6 = _interopRequireDefault(require("./door-panic-double/planner-element.js"));
+var _plannerElement7 = _interopRequireDefault(require("./door-sliding/planner-element.js"));
+var _plannerElement8 = _interopRequireDefault(require("./doorway-framed/planner-element.js"));
+var _plannerElement9 = _interopRequireDefault(require("./doorway-frameless/planner-element.js"));
+var _plannerElement0 = _interopRequireDefault(require("./window-clear/planner-element.js"));
+var _plannerElement1 = _interopRequireDefault(require("./window-cross/planner-element.js"));
+var _plannerElement10 = _interopRequireDefault(require("./window-double-hung/planner-element.js"));
+var _plannerElement11 = _interopRequireDefault(require("./window-vertical/planner-element.js"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/lib/catalog/lines/wall/planner-element.js

@@ -4,12 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _ = require("../../..");
+var _export = _interopRequireDefault(require("../../factories/export"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var textureUrl = function textureUrl(file) {
+  return new URL("./textures/".concat(file), import.meta.url).href;
+};
 var info = {
   title: 'wall',
   tag: ['wall'],
   description: 'Wall with bricks or painted',
-  image: require("./wall.png"),
+  image: new URL('./wall.png', import.meta.url).href,
   visibility: {
     catalog: true,
     layerElementsVisible: true
@@ -18,11 +22,11 @@ var info = {
 var textures = {
   plaster: {
     name: 'Plaster',
-    uri: require("./textures/plaster.jpg"),
+    uri: textureUrl('plaster.jpg'),
     lengthRepeatScale: 0.005,
     heightRepeatScale: 0.005,
     normal: {
-      uri: require("./textures/plaster-normal.jpg"),
+      uri: textureUrl('plaster-normal.jpg'),
       lengthRepeatScale: 0.005,
       heightRepeatScale: 0.005,
       normalScaleX: 0.4,
@@ -32,11 +36,11 @@ var textures = {
   },
   bricks: {
     name: 'Bricks',
-    uri: require("./textures/bricks.jpg"),
+    uri: textureUrl('bricks.jpg'),
     lengthRepeatScale: 0.009,
     heightRepeatScale: 0.009,
     normal: {
-      uri: require("./textures/bricks-normal.jpg"),
+      uri: textureUrl('bricks-normal.jpg'),
       lengthRepeatScale: 0.009,
       heightRepeatScale: 0.009,
       normalScaleX: 0.4,
@@ -46,11 +50,11 @@ var textures = {
   },
   painted: {
     name: 'Painted',
-    uri: require("./textures/painted.jpg"),
+    uri: textureUrl('painted.jpg'),
     lengthRepeatScale: 0.005,
     heightRepeatScale: 0.005,
     normal: {
-      uri: require("./textures/painted-normal.jpg"),
+      uri: textureUrl('painted-normal.jpg'),
       lengthRepeatScale: 0.005,
       heightRepeatScale: 0.005,
       normalScaleX: 0.4,
@@ -60,11 +64,11 @@ var textures = {
   },
   morden: {
     name: 'Morden',
-    uri: require("./textures/morden.jpg"),
+    uri: textureUrl('morden.jpg'),
     lengthRepeatScale: 0.005,
     heightRepeatScale: 0.005,
     normal: {
-      uri: require("./textures/morden-normal.jpg"),
+      uri: textureUrl('morden-normal.jpg'),
       lengthRepeatScale: 0.005,
       heightRepeatScale: 0.005,
       normalScaleX: 0.4,
@@ -73,4 +77,4 @@ var textures = {
     }
   }
 };
-var _default = exports["default"] = _.ElementsFactories.WallFactory('wall', info, textures);
+var _default = exports["default"] = _export["default"].WallFactory('wall', info, textures);

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

@@ -1,30 +1,67 @@
 "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"] = PropertyCheckbox;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _export = require("../../components/style/export");
-var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _constants = require("../../constants");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 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; }
 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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var FlipWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: 15px 0;\n  justify-content: space-between;\n"])));
-var FlipTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: auto;\n  color: ", ";\n  font-family: ", ";\n  font-size: 16px;\n  font-weight: 600;\n  line-height: 18px;\n  text-align: left;\n"])), _constants.SECONDARY_PURPLE_COLOR, _constants.DEFAULT_FONT_FAMILY);
-var FlipDescription = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-right: auto;\n  color: ", ";\n  font-family: ", ";\n  font-size: 13px;\n  font-weight: 400;\n  line-height: 18px;\n  text-align: left;\n"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
-var FlipInfoWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));
-var FlipToggle = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n  cursor: pointer;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
-var FlipToggleIcon = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  top: 0;\n  position: absolute;\n  ", "\n  img {\n    font-size: 1.4rem;\n    box-sizing: border-box;\n    border-radius: 50%;\n  }\n"])), '' /* transition-duration: .3s; */);
+var styles = {
+  flipWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    margin: '15px 0',
+    justifyContent: 'space-between'
+  },
+  flipTitle: {
+    marginRight: 'auto',
+    color: _constants.SECONDARY_PURPLE_COLOR,
+    fontFamily: _constants.DEFAULT_FONT_FAMILY,
+    fontSize: 16,
+    fontWeight: 600,
+    lineHeight: '18px',
+    textAlign: 'left'
+  },
+  flipDescription: {
+    marginRight: 'auto',
+    color: _constants.TEXT_COLOR_NEUTRAL_0,
+    fontFamily: _constants.DEFAULT_FONT_FAMILY,
+    fontSize: 13,
+    fontWeight: 400,
+    lineHeight: '18px',
+    textAlign: 'left'
+  },
+  flipInfoWrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  flipToggle: {
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: 14,
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  flipToggleIcon: {
+    top: 0,
+    position: 'absolute'
+  },
+  flipToggleIconImg: {
+    fontSize: '1.4rem',
+    boxSizing: 'border-box',
+    borderRadius: '50%'
+  }
+};
 function PropertyCheckbox(_ref) {
   var value = _ref.value,
     onUpdate = _ref.onUpdate,
@@ -45,10 +82,18 @@ function PropertyCheckbox(_ref) {
   } : {
     right: 0
   };
-  return /*#__PURE__*/_react["default"].createElement(FlipWrapper, null, /*#__PURE__*/_react["default"].createElement(FlipInfoWrapper, null, /*#__PURE__*/_react["default"].createElement(FlipTitle, null, configs.label), configs.description && /*#__PURE__*/_react["default"].createElement(FlipDescription, null, configs.description)), /*#__PURE__*/_react["default"].createElement(FlipToggle, {
-    style: {
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.flipWrapper
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.flipInfoWrapper
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.flipTitle
+  }, configs.label), configs.description && /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.flipDescription
+  }, configs.description)), /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, styles.flipToggle), {}, {
       color: 'black'
-    },
+    }),
     onClick: function onClick(e) {
       return update(!value);
     }
@@ -58,14 +103,14 @@ function PropertyCheckbox(_ref) {
       width: '55px',
       height: '30px'
     }
-  }), /*#__PURE__*/_react["default"].createElement(FlipToggleIcon, {
-    style: _objectSpread({}, activeStyle)
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    style: _objectSpread(_objectSpread({}, styles.flipToggleIcon), activeStyle)
   }, /*#__PURE__*/_react["default"].createElement("img", {
     src: "/assets/img/svg/bottombar/".concat(value != 0 ? '2d3d_button_active.svg' : '2d3d_button.svg'),
-    style: {
+    style: _objectSpread({
       width: '30px',
       height: '30px'
-    }
+    }, styles.flipToggleIconImg)
   }))));
 }
 PropertyCheckbox.propTypes = {

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

@@ -8,10 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _immutable = require("immutable");
 var _export = require("../../components/style/export");
-var _sharedPropertyStyle = _interopRequireDefault(require("./shared-property-style"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _constants = require("../../constants");
-var _templateObject, _templateObject2;
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 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."); }
@@ -19,9 +16,37 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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 _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
-var EnumWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin-top: 3px;\n"])));
-var EnumTitle = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-right: auto;\n  width: 110px;\n  color: ", ";\n  font-family: ", ";\n\n  @media screen and (min-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (max-width: 1024) {\n    font-size: 11px;\n  }\n  @media screen and (min-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (max-width: 1366) {\n    font-size: 13px;\n  }\n  @media screen and (min-width: 1440) {\n    font-size: 16px;\n  }\n  @media screen and (max-width: 1440) {\n    font-size: 16px;\n  }\n  font-weight: 400;\n  line-height: 15px;\n  text-align: left;\n"])), _constants.TEXT_COLOR_NEUTRAL_0, _constants.DEFAULT_FONT_FAMILY);
+var styles = {
+  enumWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: 3
+  },
+  enumTitle: function enumTitle(fontSize) {
+    return {
+      marginRight: 'auto',
+      width: 110,
+      color: _constants.TEXT_COLOR_NEUTRAL_0,
+      fontFamily: _constants.DEFAULT_FONT_FAMILY,
+      fontSize: fontSize,
+      fontWeight: 400,
+      lineHeight: '15px',
+      textAlign: 'left'
+    };
+  }
+};
+
+// Responsive font size logic
+function getFontSize() {
+  if (typeof window !== 'undefined') {
+    var w = window.innerWidth;
+    if (w <= 1024) return 11;
+    if (w <= 1366) return 13;
+    if (w <= 1440) return 16;
+    return 16;
+  }
+  return 13;
+}
 function PropertyEnum(_ref) {
   var value = _ref.value,
     onUpdate = _ref.onUpdate,
@@ -37,7 +62,24 @@ function PropertyEnum(_ref) {
     }
     return onUpdate(val);
   };
-  return /*#__PURE__*/_react["default"].createElement(EnumWrapper, null, /*#__PURE__*/_react["default"].createElement(EnumTitle, null, configs.label), /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
+  var _React$useState = _react["default"].useState(getFontSize()),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    fontSize = _React$useState2[0],
+    setFontSize = _React$useState2[1];
+  _react["default"].useEffect(function () {
+    function handleResize() {
+      setFontSize(getFontSize());
+    }
+    window.addEventListener('resize', handleResize);
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.enumWrapper
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.enumTitle(fontSize)
+  }, configs.label), /*#__PURE__*/_react["default"].createElement(_export.FormSelect, {
     value: value,
     onChange: function onChange(event) {
       return update(event.target.value);

package/lib/catalog/properties/property-lenght-measure.js

@@ -7,7 +7,7 @@ exports["default"] = PropertyLengthMeasure;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _constants = require("./../../constants");
-var _convertUnits = _interopRequireDefault(require("convert-units"));
+var _convertUnitsLite = require("../../utils/convert-units-lite");
 var _export = require("../../components/style/export");
 var _immutable = require("immutable");
 var _math = require("../../utils/math");
@@ -47,12 +47,12 @@ function PropertyLengthMeasure(_ref, _ref2) {
     var merged = null;
     if (type === 0) {
       merged = value.merge({
-        length: unitInput !== _constants.UNIT_INCH ? (0, _convertUnits["default"])(newLength).from(unitInput).to(_constants.UNIT_INCH) : newLength,
+        length: unitInput !== _constants.UNIT_INCH ? (0, _convertUnitsLite.convert)(newLength).from(unitInput).to(_constants.UNIT_INCH) : newLength,
         _length: newLength
       });
     } else {
       merged = value.merge({
-        _length: (0, _convertUnits["default"])(newLength).from(_constants.UNIT_INCH).to(unitInput),
+        _length: (0, _convertUnitsLite.convert)(newLength).from(_constants.UNIT_INCH).to(unitInput),
         _unit: unitInput
       });
     }