ketcher-react 2.6.3 → 2.7.0-rc.2

package/dist/index.js

@@ -52,6 +52,7 @@ var styled = require('@emotion/styled');
 var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
 var material = require('@mui/material');
 var KN = require('w3c-keyname');
+var reactDeviceDetect = require('react-device-detect');
 var reactContextmenu = require('react-contextmenu');
 var _classPrivateFieldSet = require('@babel/runtime/helpers/classPrivateFieldSet');
 var _classPrivateFieldGet = require('@babel/runtime/helpers/classPrivateFieldGet');
@@ -173,9 +174,18 @@ var atomCuts = {
   P: 'p',
   F: 'f',
   Cl: 'Shift+c',
-  Br: 'Shift+b',
+  Br: 'b',
   I: 'i',
-  A: 'a'
+  A: 'a',
+  Q: 'q',
+  R: 'r',
+  K: 'k',
+  M: 'm',
+  Si: 'Shift+s',
+  Na: 'Shift+n',
+  X: 'x',
+  D: 'd',
+  B: 'Shift+b'
 };
 var atoms = Object.keys(atomCuts).reduce(function (res, label) {
   res["atom-".concat(label.toLowerCase())] = {
@@ -313,7 +323,7 @@ var debugObj = {
   }
 };
 
-var classes$N = {"cliparea":"cliparea-module_cliparea__GdPrN"};
+var classes$O = {"cliparea":"cliparea-module_cliparea__GdPrN"};
 
 function _createSuper$c(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$c(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 function _isNativeReflectConstruct$c() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -387,7 +397,7 @@ var ClipArea = function (_Component) {
     value: function render() {
       return jsxRuntime.jsx("textarea", {
         ref: this.textAreaRef,
-        className: clsx__default["default"]('cliparea', classes$N.cliparea),
+        className: clsx__default["default"]('cliparea', classes$O.cliparea),
         contentEditable: true,
         autoFocus: true
         ,
@@ -447,8 +457,8 @@ function exec(action) {
   return enabled;
 }
 
-function ownKeys$12(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$12(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$12(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$12(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$15(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$15(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$15(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$15(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var editor = {
   resetToSelect: {
     title: 'Reset to Select Tool',
@@ -696,7 +706,7 @@ var optionsSchema = {
   title: 'Settings',
   type: 'object',
   required: [],
-  properties: _objectSpread$12(_objectSpread$12(_objectSpread$12(_objectSpread$12(_objectSpread$12({}, editor), render), server), debug), miew)
+  properties: _objectSpread$15(_objectSpread$15(_objectSpread$15(_objectSpread$15(_objectSpread$15({}, editor), render), server), debug), miew)
 };
 function getDefaultOptions() {
   if (!optionsSchema.properties) return {};
@@ -757,13 +767,14 @@ var storage = {
   }
 };
 
-function ownKeys$11(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$11(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$14(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$14(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$14(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$14(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initOptionsState = {
   app: {
     server: false,
     templates: false,
-    functionalGroups: false
+    functionalGroups: false,
+    saltsAndSolvents: false
   },
   analyse: {
     values: null,
@@ -854,27 +865,27 @@ function optionsReducer() {
   var action = arguments.length > 1 ? arguments[1] : undefined;
   var type = action.type,
       data = action.data;
-  if (type === 'APP_OPTIONS') return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    app: _objectSpread$11(_objectSpread$11({}, state.app), data)
+  if (type === 'APP_OPTIONS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    app: _objectSpread$14(_objectSpread$14({}, state.app), data)
   });
-  if (type === 'SAVE_SETTINGS') return _objectSpread$11(_objectSpread$11({}, state), {}, {
+  if (type === 'SAVE_SETTINGS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
     settings: data
   });
-  if (type === 'SAVE_CHECK_OPTS') return _objectSpread$11(_objectSpread$11({}, state), {}, {
+  if (type === 'SAVE_CHECK_OPTS') return _objectSpread$14(_objectSpread$14({}, state), {}, {
     check: data
   });
-  if (type === 'CHANGE_ANALYSE') return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    analyse: _objectSpread$11(_objectSpread$11(_objectSpread$11({}, state.analyse), data), {}, {
+  if (type === 'CHANGE_ANALYSE') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    analyse: _objectSpread$14(_objectSpread$14(_objectSpread$14({}, state.analyse), data), {}, {
       loading: false
     })
   });
-  if (type === 'ANALYSE_LOADING') return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    analyse: _objectSpread$11(_objectSpread$11({}, state.analyse), {}, {
+  if (type === 'ANALYSE_LOADING') return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    analyse: _objectSpread$14(_objectSpread$14({}, state.analyse), {}, {
       loading: true
     })
   });
-  if (recognizeActions.includes(type)) return _objectSpread$11(_objectSpread$11({}, state), {}, {
-    recognize: _objectSpread$11(_objectSpread$11({}, state.recognize), data)
+  if (recognizeActions.includes(type)) return _objectSpread$14(_objectSpread$14({}, state), {}, {
+    recognize: _objectSpread$14(_objectSpread$14({}, state.recognize), data)
   });
   return state;
 }
@@ -1130,7 +1141,7 @@ var sdataCustomSchema = {
     },
     context: {
       title: 'Context',
-      "enum": ['Fragment', 'Multifragment', 'Bond', 'Atom', 'Group'],
+      "enum": ['Atom', 'Bond', 'Fragment', 'Group', 'Multifragment'],
       "default": 'Fragment'
     },
     fieldName: {
@@ -1164,18 +1175,26 @@ var sdataSchema = Object.keys(sData).reduce(function (acc, title) {
 function firstKeyOf(obj) {
   return Object.keys(obj)[0];
 }
-function getSdataDefault(context, fieldName) {
-  if (!context && !fieldName) return firstKeyOf(sdataSchema);
-  if (!fieldName) return firstKeyOf(sdataSchema[context]);
-  return sdataSchema[context][fieldName] ? sdataSchema[context][fieldName].properties.fieldValue["default"] : '';
-}
-
-function ownKeys$10(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var initSdata = function initSdata() {
-  var context = getSdataDefault();
-  var fieldName = getSdataDefault(context);
-  var fieldValue = getSdataDefault(context, fieldName);
+function getSdataDefault() {
+  var schema = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : sdataSchema;
+  var context = arguments.length > 1 ? arguments[1] : undefined;
+  var fieldName = arguments.length > 2 ? arguments[2] : undefined;
+  if (schema.key === 'Custom') {
+    var _schema$properties$co;
+    return (_schema$properties$co = schema.properties[context]) === null || _schema$properties$co === void 0 ? void 0 : _schema$properties$co["default"];
+  }
+  if (!context && !fieldName) return firstKeyOf(schema);
+  if (!fieldName) return firstKeyOf(schema[context]);
+  return schema[context][fieldName] ? schema[context][fieldName].properties.fieldValue["default"] : '';
+}
+
+function ownKeys$13(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$13(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$13(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$13(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var initSdata = function initSdata(schema) {
+  var isCustomShema = schema.key === 'Custom';
+  var context = isCustomShema ? getSdataDefault(sdataCustomSchema, 'context') : getSdataDefault(sdataSchema);
+  var fieldName = isCustomShema ? getSdataDefault(sdataCustomSchema, 'fieldName') : getSdataDefault(sdataSchema, context);
+  var fieldValue = isCustomShema ? getSdataDefault(sdataCustomSchema, 'fieldValue') : getSdataDefault(sdataSchema, context, fieldName);
   var radiobuttons = 'Absolute';
   return {
     errors: {},
@@ -1191,7 +1210,7 @@ var initSdata = function initSdata() {
 };
 function sdataReducer(state, action) {
   if (action.data.result.init) {
-    return correctErrors(_objectSpread$10(_objectSpread$10({}, state), {}, {
+    return correctErrors(_objectSpread$13(_objectSpread$13({}, state), {}, {
       result: Object.assign({}, state.result, action.data.result)
     }), action.data);
   }
@@ -1199,7 +1218,7 @@ function sdataReducer(state, action) {
   var actionFieldName = action.data.result.fieldName;
   var newstate = null;
   if (actionContext !== state.result.context) newstate = onContextChange(state, action.data.result);else if (actionFieldName !== state.result.fieldName) newstate = onFieldNameChange(state, action.data.result);
-  newstate = newstate || _objectSpread$10(_objectSpread$10({}, state), {}, {
+  newstate = newstate || _objectSpread$13(_objectSpread$13({}, state), {}, {
     result: Object.assign({}, state.result, action.data.result)
   });
   return correctErrors(newstate, action.data);
@@ -1219,11 +1238,11 @@ var correctErrors = function correctErrors(state, payload) {
 var onContextChange = function onContextChange(state, payload) {
   var context = payload.context,
       fieldValue = payload.fieldValue;
-  var fieldName = getSdataDefault(context);
+  var fieldName = getSdataDefault(sdataCustomSchema, 'fieldName');
   var fValue = fieldValue;
-  if (fValue === state.result.fieldValue) fValue = getSdataDefault(context, fieldName);
+  if (fValue === state.result.fieldValue) fValue = getSdataDefault(sdataCustomSchema, 'fieldValue');
   return {
-    result: _objectSpread$10(_objectSpread$10({}, payload), {}, {
+    result: _objectSpread$13(_objectSpread$13({}, payload), {}, {
       context: context,
       fieldName: fieldName,
       fieldValue: fValue
@@ -1234,10 +1253,10 @@ var onFieldNameChange = function onFieldNameChange(state, payload) {
   var fieldName = payload.fieldName;
   var context = state.result.context;
   var fieldValue = payload.fieldValue;
-  if (sdataSchema[context][fieldName]) fieldValue = getSdataDefault(context, fieldName);
+  if (sdataSchema[context][fieldName]) fieldValue = getSdataDefault(sdataSchema, context, fieldName);
   if (fieldValue === state.result.fieldValue && sdataSchema[context][state.result.fieldName]) fieldValue = '';
   return {
-    result: _objectSpread$10(_objectSpread$10({}, payload), {}, {
+    result: _objectSpread$13(_objectSpread$13({}, payload), {}, {
       fieldName: fieldName,
       fieldValue: fieldValue
     })
@@ -1341,7 +1360,7 @@ var formsState = {
     valid: true,
     result: {}
   },
-  sdata: initSdata()
+  sdata: initSdata(sdataCustomSchema)
 };
 function updateFormState(data) {
   return {
@@ -1375,8 +1394,8 @@ function formReducer(state, action, formName) {
 var INDIGO_VERIFICATION = 'INDIGO_VERIFICATION';
 var ANALYZING_FILE = 'ANALYZING_FILE';
 
-function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$12(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$12(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$12(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$12(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function indigoVerification(data) {
   return {
     type: INDIGO_VERIFICATION,
@@ -1389,25 +1408,25 @@ function setAnalyzingFile(data) {
     data: data
   };
 }
-var initialState$1 = {
+var initialState$2 = {
   indigoVerification: false,
   isAnalyzingFile: false
 };
 function requestReducer () {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$2;
   var action = arguments.length > 1 ? arguments[1] : undefined;
   var type = action.type,
       data = action.data;
   switch (type) {
     case INDIGO_VERIFICATION:
       {
-        return _objectSpread$$(_objectSpread$$({}, state), {}, {
+        return _objectSpread$12(_objectSpread$12({}, state), {}, {
           indigoVerification: data
         });
       }
     case ANALYZING_FILE:
       {
-        return _objectSpread$$(_objectSpread$$({}, state), {}, {
+        return _objectSpread$12(_objectSpread$12({}, state), {}, {
           isAnalyzingFile: data
         });
       }
@@ -1680,12 +1699,12 @@ var attachSchema = {
 };
 
 var _excluded$E = ["type", "radiobuttons"];
-function ownKeys$_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$_(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$11(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$11(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$11(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$11(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DefaultStereoGroupNumber = 1;
 function fromElement(selem) {
   if (selem.label === 'R#') {
-    return _objectSpread$_({
+    return _objectSpread$11({
       type: 'rlabel',
       values: fromRlabel(selem.rglabel)
     }, selem);
@@ -1845,7 +1864,7 @@ function fromBond(sbond) {
   };
 }
 function toBond(bond) {
-  return _objectSpread$_({
+  return _objectSpread$11({
     topology: bond.topology,
     reactingCenterStatus: bond.center
   }, toBondType(bond.type));
@@ -1935,7 +1954,7 @@ function toSgroup(sgroup) {
   var type = sgroup.type,
       radiobuttons = sgroup.radiobuttons,
       props = _objectWithoutProperties__default["default"](sgroup, _excluded$E);
-  var attrs = _objectSpread$_({}, props);
+  var attrs = _objectSpread$11({}, props);
   var absolute = 'absolute';
   var attached = 'attached';
   switch (radiobuttons) {
@@ -2436,8 +2455,8 @@ var tools$1 = typeSchema$1["enum"].reduce(function (res, type, i) {
 }, toolActions);
 
 var _excluded$D = ["rescale", "fragment"];
-function ownKeys$Z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Z(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$10(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$10(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$10(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$10(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function onAction(action) {
   if (action && action.dialog) {
     return {
@@ -2484,7 +2503,7 @@ function load(struct, options) {
               server = state.server;
               errorHandler = editor.errorHandler;
               options = options || {};
-              options = _objectSpread$Z(_objectSpread$Z({}, options), {}, {
+              options = _objectSpread$10(_objectSpread$10({}, options), {}, {
                 'dearomatize-on-load': editor.options()['dearomatize-on-load']
               });
               dispatch(setAnalyzingFile(true));
@@ -2912,7 +2931,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.6.2\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
+  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.7.0-rc.2\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -2973,9 +2992,9 @@ var fullscreen = {
   }
 };
 
-function ownKeys$Y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Y(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var config = _objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y(_objectSpread$Y({
+function ownKeys$$(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$$(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$$(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$$(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var config = _objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$(_objectSpread$$({
   clear: {
     shortcut: 'Mod+Delete',
     title: 'Clear Canvas',
@@ -5318,7 +5337,7 @@ function SvgTransformFlipH(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$1c || (_path$1c = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M42 22H6v4h36v-4zM40 18.27h-4V12H12v6.27H8V11.6A3.6 3.6 0 0111.6 8h24.8a3.6 3.6 0 013.6 3.6v6.67zM40 36.016v.4a3.6 3.6 0 01-3.6 3.6H36v-4h4zM12 40.016h-.4a3.6 3.6 0 01-3.6-3.6v-.4h4v4zM12 34.55v-4.534H8v4.534h4zM40 34.55v-4.534h-4v4.534h4zM33.4 36.016h-4.535v4H33.4v-4zM26.267 36.016h-4.534v4h4.534v-4zM19.135 36.016H14.6v4h4.534v-4z",
+    d: "M22.001 6v36h4V6h-4zM18.271 40h-6.67a3.6 3.6 0 01-3.6-3.6V11.6a3.6 3.6 0 013.6-3.6h6.67v4h-6.27v24h6.27v4zM36.001 8h.4a3.6 3.6 0 013.6 3.6v.4h-4V8zM40.001 36v.4a3.6 3.6 0 01-3.6 3.6h-.4v-4h4zM34.535 36h-4.534v4h4.534v-4zM34.535 8h-4.534v4h4.534V8zM36.001 14.598v4.534h4v-4.534h-4zM36.001 21.732v4.534h4v-4.534h-4zM36.001 28.866V33.4h4v-4.534h-4z",
     fill: "#231F20"
   })));
 }
@@ -5335,7 +5354,7 @@ function SvgTransformFlipV(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), _path$1b || (_path$1b = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M22.001 6v36h4V6h-4zM18.271 40h-6.67a3.6 3.6 0 01-3.6-3.6V11.6a3.6 3.6 0 013.6-3.6h6.67v4h-6.27v24h6.27v4zM36.001 8h.4a3.6 3.6 0 013.6 3.6v.4h-4V8zM40.001 36v.4a3.6 3.6 0 01-3.6 3.6h-.4v-4h4zM34.535 36h-4.534v4h4.534v-4zM34.535 8h-4.534v4h4.534V8zM36.001 14.598v4.534h4v-4.534h-4zM36.001 21.732v4.534h4v-4.534h-4zM36.001 28.866V33.4h4v-4.534h-4z",
+    d: "M42 22H6v4h36v-4zM40 18.27h-4V12H12v6.27H8V11.6A3.6 3.6 0 0111.6 8h24.8a3.6 3.6 0 013.6 3.6v6.67zM40 36.016v.4a3.6 3.6 0 01-3.6 3.6H36v-4h4zM12 40.016h-.4a3.6 3.6 0 01-3.6-3.6v-.4h4v4zM12 34.55v-4.534H8v4.534h4zM40 34.55v-4.534h-4v4.534h4zM33.4 36.016h-4.535v4H33.4v-4zM26.267 36.016h-4.534v4h4.534v-4zM19.135 36.016H14.6v4h4.534v-4z",
     fill: "#231F20"
   })));
 }
@@ -6881,16 +6900,16 @@ function findIconByName(name) {
 }
 
 var _excluded$C = ["name"];
-function ownKeys$X(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$X(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$_(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$_(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$_(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$_(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Icon(_ref) {
   var name = _ref.name,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$C);
   var Component = findIconByName(name);
-  return jsxRuntime.jsx(Component, _objectSpread$X({}, props));
+  return jsxRuntime.jsx(Component, _objectSpread$_({}, props));
 }
 
-var classes$M = {"button-common-styles":"ActionButton-module_button-common-styles__y-hng","scrollbar":"ActionButton-module_scrollbar__lD3MH","button":"ActionButton-module_button__nfoWQ","selected":"ActionButton-module_selected__kPCxA"};
+var classes$N = {"button-common-styles":"ActionButton-module_button-common-styles__y-hng","scrollbar":"ActionButton-module_scrollbar__lD3MH","button":"ActionButton-module_button__nfoWQ","selected":"ActionButton-module_selected__kPCxA"};
 
 var isMac = /Mac/.test(navigator.platform);
 var shortcutAliasMap = {
@@ -6934,7 +6953,7 @@ var ActionButton = function ActionButton(props) {
     disabled: disabled,
     onClick: handleClick,
     title: shortcut ? "".concat(action === null || action === void 0 ? void 0 : action.title, " (").concat(shortcut, ")") : action === null || action === void 0 ? void 0 : action.title,
-    className: clsx__default["default"](classes$M.button, _defineProperty__default["default"]({}, classes$M.selected, selected), className),
+    className: clsx__default["default"](classes$N.button, _defineProperty__default["default"]({}, classes$N.selected, selected), className),
     children: [jsxRuntime.jsx(Icon, {
       name: name
     }), jsxRuntime.jsx("kbd", {
@@ -7090,7 +7109,7 @@ var DefaultMultiTool = function DefaultMultiTool(props) {
   });
 };
 
-var classes$L = {"group":"GroupedMultiTool-module_group__BJQAU"};
+var classes$M = {"group":"GroupedMultiTool-module_group__BJQAU"};
 
 var GroupedMultiTool = function GroupedMultiTool(props) {
   var groups = props.groups,
@@ -7105,7 +7124,7 @@ var GroupedMultiTool = function GroupedMultiTool(props) {
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: groups.map(function (descriptor) {
       return jsxRuntime.jsx("div", {
-        className: classes$L.group,
+        className: classes$M.group,
         children: options.slice(descriptor.start, descriptor.end).map(function (toolbarItem) {
           var currentStatus = status[toolbarItem.id];
           return jsxRuntime.jsx(ActionButton, {
@@ -7135,7 +7154,7 @@ function chooseMultiTool() {
   }
 }
 
-var classes$K = {"button-common-styles":"ToolbarMultiToolItem-module_button-common-styles__Fuxbo","scrollbar":"ToolbarMultiToolItem-module_scrollbar__XTmfz","icon":"ToolbarMultiToolItem-module_icon__-HQal","iconSelected":"ToolbarMultiToolItem-module_iconSelected__hlO0J","portal":"ToolbarMultiToolItem-module_portal__2XJgz","portal-vertical":"ToolbarMultiToolItem-module_portal-vertical__A0DVe"};
+var classes$L = {"button-common-styles":"ToolbarMultiToolItem-module_button-common-styles__Fuxbo","scrollbar":"ToolbarMultiToolItem-module_scrollbar__XTmfz","icon":"ToolbarMultiToolItem-module_icon__-HQal","iconSelected":"ToolbarMultiToolItem-module_iconSelected__hlO0J","portal":"ToolbarMultiToolItem-module_portal__2XJgz","portal-vertical":"ToolbarMultiToolItem-module_portal-vertical__A0DVe"};
 
 function usePortalOpening(_ref) {
   var _ref2 = _slicedToArray__default["default"](_ref, 3),
@@ -7183,8 +7202,8 @@ function usePortalStyle(_ref) {
   return [portalStyle];
 }
 
-function ownKeys$W(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$Z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$Z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Z(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
   var id = props.id,
       options = props.options,
@@ -7245,20 +7264,20 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
       portalClassName = _chooseMultiTool2[1];
   return displayMultiToolItem ? jsxRuntime.jsxs("div", {
     ref: ref,
-    className: classes$K.root,
-    children: [jsxRuntime.jsx(ActionButton, _objectSpread$W(_objectSpread$W({}, actionButtonProps), {}, {
+    className: classes$L.root,
+    children: [jsxRuntime.jsx(ActionButton, _objectSpread$Z(_objectSpread$Z({}, actionButtonProps), {}, {
       className: className,
       name: currentId,
       action: config[currentId],
       status: currentStatus,
       selected: selected
     })), !isOpen && jsxRuntime.jsx(Icon, {
-      className: "".concat(classes$K.icon, " ").concat((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.selected) && classes$K.iconSelected),
+      className: "".concat(classes$L.icon, " ").concat((currentStatus === null || currentStatus === void 0 ? void 0 : currentStatus.selected) && classes$L.iconSelected),
       name: "dropdown",
       onClick: onOpenOptions
     }), isOpen ? jsxRuntime.jsx(Portal, {
       isOpen: isOpen,
-      className: clsx__default["default"](classes$K.portal, vertical && classes$K['portal-vertical'], portalClassName),
+      className: clsx__default["default"](classes$L.portal, vertical && classes$L['portal-vertical'], portalClassName),
       style: portalStyle,
       children: jsxRuntime.jsx(Component, {
         options: options,
@@ -7343,16 +7362,16 @@ var TemplatesList = function TemplatesList(props) {
   });
 };
 
-var classes$J = {"button-common-styles":"BottomToolbar-module_button-common-styles__PbtE9","scrollbar":"BottomToolbar-module_scrollbar__i1f8P","group":"BottomToolbar-module_group__b-pGt","root":"BottomToolbar-module_root__kjkSm"};
+var classes$K = {"button-common-styles":"BottomToolbar-module_button-common-styles__PbtE9","scrollbar":"BottomToolbar-module_scrollbar__i1f8P","group":"BottomToolbar-module_group__b-pGt","root":"BottomToolbar-module_root__kjkSm"};
 
 var _excluded$B = ["className"];
-function ownKeys$V(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$V(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$V(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$Y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$Y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Y(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Group$1 = function Group(_ref) {
   var children = _ref.children,
       className = _ref.className;
   return jsxRuntime.jsx("div", {
-    className: clsx__default["default"](classes$J.group, className),
+    className: clsx__default["default"](classes$K.group, className),
     children: children
   });
 };
@@ -7364,7 +7383,7 @@ var BottomToolbar = function BottomToolbar(props) {
       indigoVerification = rest.indigoVerification,
       onAction = rest.onAction;
   return jsxRuntime.jsxs("div", {
-    className: clsx__default["default"](classes$J.root, className),
+    className: clsx__default["default"](classes$K.root, className),
     children: [jsxRuntime.jsx(Group$1, {
       children: jsxRuntime.jsx(TemplatesList, {
         active: active,
@@ -7373,7 +7392,7 @@ var BottomToolbar = function BottomToolbar(props) {
         onAction: onAction
       })
     }), jsxRuntime.jsx(Group$1, {
-      children: jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$V({
+      children: jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$Y({
         id: "template-lib"
       }, rest))
     })]
@@ -7468,15 +7487,15 @@ function prefetchRender(tmpls, baseUrl, cacheEl) {
   });
 }
 
-function ownKeys$U(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$U(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$U(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$X(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$X(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$X(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$X(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function openDialog(dispatch, dialogName, props) {
   return new Promise(function (resolve, reject) {
     dispatch({
       type: 'MODAL_OPEN',
       data: {
         name: dialogName,
-        prop: _objectSpread$U(_objectSpread$U({}, props), {}, {
+        prop: _objectSpread$X(_objectSpread$X({}, props), {}, {
           onResult: resolve,
           onCancel: reject
         })
@@ -7494,7 +7513,7 @@ function modalReducer() {
       return null;
     }
     var formState = formReducer(state.form, action, state.name);
-    return _objectSpread$U(_objectSpread$U({}, state), {}, {
+    return _objectSpread$X(_objectSpread$X({}, state), {}, {
       form: formState
     });
   }
@@ -7512,8 +7531,8 @@ function modalReducer() {
   }
 }
 
-function ownKeys$T(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$T(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$T(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$T(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$W(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$W(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$W(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$W(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function selectTmpl(tmpl) {
   return {
     type: 'TMPL_SELECT',
@@ -7535,7 +7554,7 @@ function changeFilter(filter) {
   return {
     type: 'TMPL_CHANGE_FILTER',
     data: {
-      filter: filter.trim(),
+      filter: filter,
       selected: null
     }
   };
@@ -7613,7 +7632,7 @@ function saveUserTmpl(struct) {
       var name = _ref.name,
           attach = _ref.attach;
       tmpl.struct.name = name.trim();
-      tmpl.props = _objectSpread$T(_objectSpread$T({}, attach), {}, {
+      tmpl.props = _objectSpread$W(_objectSpread$W({}, attach), {}, {
         group: 'User Templates'
       });
       var lib = getState().templates.lib.concat(tmpl);
@@ -7652,7 +7671,7 @@ function templatesReducer() {
   if (tmplActions.includes(action.type)) return Object.assign({}, state, action.data);
   if (attachActions.includes(action.type)) {
     var attach = Object.assign({}, state.attach, action.data);
-    return _objectSpread$T(_objectSpread$T({}, state), {}, {
+    return _objectSpread$W(_objectSpread$W({}, state), {}, {
       attach: attach
     });
   }
@@ -7661,7 +7680,7 @@ function templatesReducer() {
     var lib = currentState.lib.filter(function (value) {
       return value !== action.data.tmpl;
     });
-    return _objectSpread$T(_objectSpread$T({}, currentState), {}, {
+    return _objectSpread$W(_objectSpread$W({}, currentState), {}, {
       lib: lib
     });
   }
@@ -7669,8 +7688,8 @@ function templatesReducer() {
 }
 
 var _excluded$A = ["type", "action"];
-function ownKeys$S(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$S(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$S(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$S(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$V(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$V(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$V(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$V(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function execute(activeTool, _ref) {
   var action = _ref.action,
       editor = _ref.editor,
@@ -7724,7 +7743,7 @@ function actionStateReducer () {
     case 'INIT':
       action = config['select-rectangle'].action;
     case 'ACTION':
-      activeTool = execute(state && state.activeTool, _objectSpread$S(_objectSpread$S({}, params), {}, {
+      activeTool = execute(state && state.activeTool, _objectSpread$V(_objectSpread$V({}, params), {}, {
         action: action
       }));
     case 'UPDATE':
@@ -7740,20 +7759,25 @@ function actionStateReducer () {
   }
 }
 
-function ownKeys$R(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$R(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$R(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var initialState = {
+function ownKeys$U(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$U(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$U(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$U(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var initialState$1 = {
   lib: [],
+  functionalGroupInfo: null,
   mode: 'fg'
 };
 var functionalGroupsReducer = function functionalGroupsReducer() {
-  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState$1;
   var _ref = arguments.length > 1 ? arguments[1] : undefined,
       type = _ref.type,
       payload = _ref.payload;
   switch (type) {
     case 'FG_INIT':
-      return _objectSpread$R(_objectSpread$R({}, state), payload);
+      return _objectSpread$U(_objectSpread$U({}, state), payload);
+    case 'FG_HIGHLIGHT':
+      return _objectSpread$U(_objectSpread$U({}, state), {}, {
+        functionalGroupInfo: payload
+      });
     default:
       return state;
   }
@@ -7766,6 +7790,15 @@ var initFGroups = function initFGroups(lib) {
     }
   };
 };
+var highlightFGroup = function highlightFGroup(group) {
+  return {
+    type: 'FG_HIGHLIGHT',
+    payload: group
+  };
+};
+function highlightFG(dispatch, group) {
+  dispatch(highlightFGroup(group));
+}
 function initFGTemplates(baseUrl) {
   return function () {
     var _ref2 = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee(dispatch) {
@@ -7805,8 +7838,78 @@ function initFGTemplates(baseUrl) {
   }();
 }
 
-function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Q(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$T(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$T(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$T(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$T(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var initialState = {
+  lib: [],
+  mode: 'fg'
+};
+var saltsAndSolventsReducer = function saltsAndSolventsReducer() {
+  var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var _ref = arguments.length > 1 ? arguments[1] : undefined,
+      type = _ref.type,
+      payload = _ref.payload;
+  switch (type) {
+    case 'SALTS_AND_SOLVENTS_INIT':
+      return _objectSpread$T(_objectSpread$T({}, state), payload);
+    default:
+      return state;
+  }
+};
+var initSaltsAndSolvents = function initSaltsAndSolvents(lib) {
+  return {
+    type: 'SALTS_AND_SOLVENTS_INIT',
+    payload: {
+      lib: lib
+    }
+  };
+};
+function initSaltsAndSolventsTemplates(baseUrl) {
+  return function () {
+    var _ref2 = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee(dispatch) {
+      var fileName, url, saltsAndSolventsProvider, functionalGroupsProvider, sdfSerializer, text, templates, saltsAndSolvents;
+      return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              fileName = 'salts-and-solvents.sdf';
+              url = "".concat(baseUrl, "/templates/").concat(fileName);
+              saltsAndSolventsProvider = ketcherCore.SaltsAndSolventsProvider.getInstance();
+              functionalGroupsProvider = ketcherCore.FunctionalGroupsProvider.getInstance();
+              sdfSerializer = new ketcherCore.SdfSerializer();
+              _context.next = 7;
+              return prefetchStatic(url);
+            case 7:
+              text = _context.sent;
+              templates = sdfSerializer.deserialize(text);
+              saltsAndSolvents = templates.reduce(function (acc, _ref3) {
+                var struct = _ref3.struct,
+                    props = _ref3.props;
+                struct.abbreviation = String(props.abbreviation);
+                acc.push(struct);
+                return acc;
+              }, []);
+              saltsAndSolventsProvider.setSaltsAndSolventsList(saltsAndSolvents);
+              functionalGroupsProvider.addToFunctionalGroupsList(saltsAndSolvents);
+              dispatch(initSaltsAndSolvents(templates));
+              dispatch(appUpdate({
+                saltsAndSolvents: true
+              }));
+            case 14:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+}
+
+function ownKeys$S(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$S(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$S(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$S(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var initial = {
   freqAtoms: [],
   currentAtom: 0,
@@ -7826,7 +7929,7 @@ function updateVisibleTools(visibleTool, activeTool) {
     if (key === 'shape' && menuHeight > 900) return res;
     if (!key.match(regExp) || menuHeight > 700) res[key] = visibleTool[key];
     return res;
-  }, _objectSpread$Q({}, activeTool));
+  }, _objectSpread$S({}, activeTool));
 }
 function initResize() {
   return function (dispatch, getState) {
@@ -7850,41 +7953,41 @@ function toolbarReducer () {
     case 'ACTION':
       {
         var visibleTool = toolInMenu(action.action);
-        return visibleTool ? _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        return visibleTool ? _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null,
-          visibleTools: _objectSpread$Q(_objectSpread$Q({}, state.visibleTools), visibleTool)
-        }) : _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+          visibleTools: _objectSpread$S(_objectSpread$S({}, state.visibleTools), visibleTool)
+        }) : _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null
         });
       }
     case 'ADD_ATOMS':
       {
         var newState = addFreqAtom(data, state.freqAtoms, state.currentAtom);
-        return _objectSpread$Q(_objectSpread$Q({}, state), newState);
+        return _objectSpread$S(_objectSpread$S({}, state), newState);
       }
     case 'CLEAR_VISIBLE':
       {
         var activeTool = toolInMenu(action.data);
         var correctTools = updateVisibleTools(state.visibleTools, activeTool);
-        return _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        return _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null,
-          visibleTools: _objectSpread$Q({}, correctTools)
+          visibleTools: _objectSpread$S({}, correctTools)
         });
       }
     case 'OPENED':
       {
-        return data.isSelected && state.opened ? _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        return data.isSelected && state.opened ? _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: null
-        }) : _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+        }) : _objectSpread$S(_objectSpread$S({}, state), {}, {
           opened: data.menuName
         });
       }
     case 'UPDATE':
-      return _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+      return _objectSpread$S(_objectSpread$S({}, state), {}, {
         opened: null
       });
     case 'MODAL_OPEN':
-      return _objectSpread$Q(_objectSpread$Q({}, state), {}, {
+      return _objectSpread$S(_objectSpread$S({}, state), {}, {
         opened: null
       });
     default:
@@ -7928,9 +8031,9 @@ function hiddenAncestor(el, base) {
 }
 
 var _excluded$z = ["type"],
-    _excluded2$6 = ["buttons"];
-function ownKeys$P(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$P(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$P(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+    _excluded2$5 = ["buttons"];
+function ownKeys$R(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$R(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$R(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$R(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var shared = redux.combineReducers({
   actionState: actionStateReducer,
   toolbar: toolbarReducer,
@@ -7946,6 +8049,7 @@ var shared = redux.combineReducers({
   options: optionsReducer,
   templates: templatesReducer,
   functionalGroups: functionalGroupsReducer,
+  saltsAndSolvents: saltsAndSolventsReducer,
   requestsStatuses: requestReducer
 });
 function getRootReducer(setEditor) {
@@ -7956,10 +8060,10 @@ function getRootReducer(setEditor) {
       case 'UPDATE':
         action.type;
             var data = _objectWithoutProperties__default["default"](action, _excluded$z);
-        if (data) state = _objectSpread$P(_objectSpread$P({}, state), data);
+        if (data) state = _objectSpread$R(_objectSpread$R({}, state), data);
     }
-    var sh = shared(state, _objectSpread$P(_objectSpread$P({}, action), fp.pick(['editor', 'server', 'options'], state)));
-    var finalState = sh === state.shared ? state : _objectSpread$P(_objectSpread$P({}, state), sh);
+    var sh = shared(state, _objectSpread$R(_objectSpread$R({}, action), fp.pick(['editor', 'server', 'options'], state)));
+    var finalState = sh === state.shared ? state : _objectSpread$R(_objectSpread$R({}, state), sh);
     global.currentState = finalState;
     return finalState;
   };
@@ -7967,7 +8071,7 @@ function getRootReducer(setEditor) {
 function createStore (options, server, setEditor) {
   var _options$buttons = options.buttons,
       buttons = _options$buttons === void 0 ? {} : _options$buttons,
-      restOptions = _objectWithoutProperties__default["default"](options, _excluded2$6);
+      restOptions = _objectWithoutProperties__default["default"](options, _excluded2$5);
   var initState = {
     actionState: null,
     editor: null,
@@ -8042,14 +8146,14 @@ var selectOptions$2 = makeItems(['select-rectangle', 'select-lasso', 'select-fra
 var arrowsOptions = makeItems(['reaction-arrow-open-angle', 'reaction-arrow-filled-triangle', 'reaction-arrow-filled-bow', 'reaction-arrow-dashed-open-angle', 'reaction-arrow-failed', 'reaction-arrow-both-ends-filled-triangle', 'reaction-arrow-equilibrium-filled-half-bow', 'reaction-arrow-equilibrium-filled-triangle', 'reaction-arrow-equilibrium-open-angle', 'reaction-arrow-unbalanced-equilibrium-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-open-half-angle', 'reaction-arrow-unbalanced-equilibrium-large-filled-half-bow', 'reaction-arrow-unbalanced-equilibrium-filled-half-triangle', 'reaction-arrow-elliptical-arc-arrow-filled-bow', 'reaction-arrow-elliptical-arc-arrow-filled-triangle', 'reaction-arrow-elliptical-arc-arrow-open-angle', 'reaction-arrow-elliptical-arc-arrow-open-half-angle']);
 var mappingOptions = makeItems(['reaction-map', 'reaction-unmap', 'reaction-automap']);
 
-var classes$I = {"scroll":"ArrowScroll-module_scroll__h9kCx","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd"};
+var classes$J = {"scroll":"ArrowScroll-module_scroll__h9kCx","button":"ArrowScroll-module_button__ygMgL","down":"ArrowScroll-module_down__yDzZX","up":"ArrowScroll-module_up__Q1ubd"};
 
 function useSettingsContext() {
   return React__default["default"].useContext(settingsContext);
 }
 
-function ownKeys$O(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$Q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$Q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$Q(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$Q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var throttleMilliseconds = 100;
 function useThrottleResizeObserver() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -8063,11 +8167,11 @@ function useThrottleResizeObserver() {
   var onResize = React.useMemo(function () {
     return lodash.throttle(setSize, throttleMilliseconds);
   }, []);
-  var _useResizeObserver = useResizeObserver__default["default"](_objectSpread$O({
+  var _useResizeObserver = useResizeObserver__default["default"](_objectSpread$Q({
     onResize: onResize
   }, options)),
       ref = _useResizeObserver.ref;
-  return _objectSpread$O({
+  return _objectSpread$Q({
     ref: ref
   }, size);
 }
@@ -8163,7 +8267,7 @@ var ArrowScroll = function ArrowScroll(_ref) {
     };
   }, [endInView]);
   return jsxRuntime.jsxs("div", {
-    className: classes$I.scroll,
+    className: classes$J.scroll,
     children: [endInView ? jsxRuntime.jsx(jsxRuntime.Fragment, {}) : jsxRuntime.jsx("button", {
       onClick: function onClick() {
         return scrollDown();
@@ -8174,7 +8278,7 @@ var ArrowScroll = function ArrowScroll(_ref) {
       onMouseDown: function onMouseDown() {
         return setScrollDown(true);
       },
-      className: clsx__default["default"](classes$I.button, classes$I.down),
+      className: clsx__default["default"](classes$J.button, classes$J.down),
       children: "\u25BC"
     }), startInView ? jsxRuntime.jsx(jsxRuntime.Fragment, {}) : jsxRuntime.jsx("button", {
       onClick: function onClick() {
@@ -8186,7 +8290,7 @@ var ArrowScroll = function ArrowScroll(_ref) {
       onMouseDown: function onMouseDown() {
         return setScrollUp(true);
       },
-      className: clsx__default["default"](classes$I.button, classes$I.up),
+      className: clsx__default["default"](classes$J.button, classes$J.up),
       children: "\u25B2"
     })]
   });
@@ -8201,13 +8305,13 @@ var mediaSizes$2 = {
 };
 
 var _excluded$y = ["height"];
-function ownKeys$N(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$P(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$P(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$P(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$P(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Bond$1 = function Bond(props) {
   var height = props.height,
       rest = _objectWithoutProperties__default["default"](props, _excluded$y);
   if (height && height <= mediaSizes$2.bondCollapsableHeight) {
-    return jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$N({
+    return jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bonds",
       options: groupOptions,
       variant: "grouped",
@@ -8215,68 +8319,68 @@ var Bond$1 = function Bond(props) {
     }, rest));
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$N({
+    children: [jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-common",
       options: bondCommon
-    }, rest)), jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$N({
+    }, rest)), jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-stereo",
       options: bondStereo
-    }, rest)), jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$N({
+    }, rest)), jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-query",
       options: bondQuery
-    }, rest)), jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$N({
+    }, rest)), jsxRuntime.jsx(ToolbarMultiToolItem, _objectSpread$P({
       id: "bond-special",
       options: bondSpecial
     }, rest))]
   });
 };
 
-function ownKeys$M(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$O(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$O(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$O(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$O(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var RGroup$1 = function RGroup(props) {
-  return jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$M({
+  return jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$O({
     id: "rgroup",
     options: rGroupOptions
   }, props));
 };
 
-function ownKeys$L(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$L(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$N(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$N(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$N(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$N(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Shape = function Shape(props) {
-  return jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$L({
+  return jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$N({
     id: "shapes",
     options: shapeOptions
   }, props));
 };
 
 var _excluded$x = ["height"];
-function ownKeys$K(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$K(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$M(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$M(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$M(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$M(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Transform = function Transform(props) {
   var height = props.height,
       rest = _objectWithoutProperties__default["default"](props, _excluded$x);
   if (height && height <= mediaSizes$2.transformCollapsableHeight) {
-    return jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$K({
+    return jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transforms",
       options: transformOptions
     }, rest));
   }
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$K({
+    children: [jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transform-rotate"
-    }, rest)), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$K({
+    }, rest)), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transform-flip-h"
-    }, rest)), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$K({
+    }, rest)), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$M({
       id: "transform-flip-v"
     }, rest))]
   });
 };
 
-var classes$H = {"button-common-styles":"LeftToolbar-module_button-common-styles__WgnON","scrollbar":"LeftToolbar-module_scrollbar__OBwid","group":"LeftToolbar-module_group__0s41t","root":"LeftToolbar-module_root__yhhZm","buttons":"LeftToolbar-module_buttons__lnIjn","borderOff":"LeftToolbar-module_borderOff__om425","groupItem":"LeftToolbar-module_groupItem__OqQu0"};
+var classes$I = {"button-common-styles":"LeftToolbar-module_button-common-styles__WgnON","scrollbar":"LeftToolbar-module_scrollbar__OBwid","group":"LeftToolbar-module_group__0s41t","root":"LeftToolbar-module_root__yhhZm","buttons":"LeftToolbar-module_buttons__lnIjn","borderOff":"LeftToolbar-module_borderOff__om425","groupItem":"LeftToolbar-module_groupItem__OqQu0"};
 
 var _excluded$w = ["className"];
-function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$L(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$L(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$L(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$L(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var LeftToolbar = function LeftToolbar(props) {
   var className = props.className,
       rest = _objectWithoutProperties__default["default"](props, _excluded$w);
@@ -8300,7 +8404,7 @@ var LeftToolbar = function LeftToolbar(props) {
   var Item = function Item(_ref) {
     var id = _ref.id,
         options = _ref.options;
-    return ToolbarGroupItem(_objectSpread$J({
+    return ToolbarGroupItem(_objectSpread$L({
       id: id,
       options: options
     }, rest));
@@ -8332,25 +8436,25 @@ var LeftToolbar = function LeftToolbar(props) {
       });
     }
     return visibleItems.length ? jsxRuntime.jsx("div", {
-      className: clsx__default["default"](classes$H.group, className),
+      className: clsx__default["default"](classes$I.group, className),
       children: visibleItems.map(function (item) {
         switch (item.id) {
           case 'bond-common':
-            return React.createElement(Bond$1, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return React.createElement(Bond$1, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               height: height,
               key: item.id
             }));
           case 'transform-rotate':
-            return React.createElement(Transform, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return React.createElement(Transform, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               height: height,
               key: item.id
             }));
           case 'rgroup':
-            return React.createElement(RGroup$1, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return React.createElement(RGroup$1, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               key: item.id
             }));
           case 'shapes':
-            return React.createElement(Shape, _objectSpread$J(_objectSpread$J({}, rest), {}, {
+            return React.createElement(Shape, _objectSpread$L(_objectSpread$L({}, rest), {}, {
               key: item.id
             }));
           default:
@@ -8363,16 +8467,16 @@ var LeftToolbar = function LeftToolbar(props) {
     }) : null;
   };
   return jsxRuntime.jsxs("div", {
-    className: clsx__default["default"](classes$H.root, className),
+    className: clsx__default["default"](classes$I.root, className),
     ref: ref,
     children: [jsxRuntime.jsxs("div", {
-      className: classes$H.buttons,
+      className: classes$I.buttons,
       ref: scrollRef,
       children: [jsxRuntime.jsx("div", {
-        className: classes$H.listener,
+        className: classes$I.listener,
         ref: startRef,
         children: jsxRuntime.jsx(Group, {
-          className: classes$H.groupItem,
+          className: classes$I.groupItem,
           items: [{
             id: 'hand'
           }, {
@@ -8383,7 +8487,7 @@ var LeftToolbar = function LeftToolbar(props) {
           }]
         })
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'bonds',
           options: [].concat(_toConsumableArray__default["default"](bondCommon), _toConsumableArray__default["default"](bondQuery), _toConsumableArray__default["default"](bondSpecial), _toConsumableArray__default["default"](bondStereo))
@@ -8391,27 +8495,27 @@ var LeftToolbar = function LeftToolbar(props) {
           id: 'chain'
         }]
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'charge-plus'
         }, {
           id: 'charge-minus'
         }]
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'transforms',
           options: transformOptions
         }]
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'sgroup'
         }, {
           id: 'sgroup-data'
         }]
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'reaction-plus'
         }, {
@@ -8422,17 +8526,17 @@ var LeftToolbar = function LeftToolbar(props) {
           options: mappingOptions
         }]
       }), jsxRuntime.jsx("div", {
-        className: classes$H.listener,
+        className: classes$I.listener,
         ref: sizeRef,
         children: jsxRuntime.jsx(Group, {
-          className: classes$H.groupItem,
+          className: classes$I.groupItem,
           items: [{
             id: 'rgroup',
             options: rGroupOptions
           }]
         })
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'shapes',
           options: shapeOptions
@@ -8440,7 +8544,7 @@ var LeftToolbar = function LeftToolbar(props) {
       }), jsxRuntime.jsx("div", {
         ref: endRef,
         children: jsxRuntime.jsx(Group, {
-          className: classes$H.groupItem,
+          className: classes$I.groupItem,
           items: [{
             id: 'text'
           }]
@@ -8481,19 +8585,19 @@ var mapDispatchToProps$h = function mapDispatchToProps(dispatch) {
 };
 var LeftToolbarContainer = reactRedux.connect(mapStateToProps$i, mapDispatchToProps$h)(LeftToolbar);
 
-var classes$G = {"button-common-styles":"Atom-module_button-common-styles__j3EUJ","scrollbar":"Atom-module_scrollbar__iO-Ni","atom":"Atom-module_atom__g2RUu"};
+var classes$H = {"button-common-styles":"Atom-module_button-common-styles__j3EUJ","scrollbar":"Atom-module_scrollbar__iO-Ni","atom":"Atom-module_atom__g2RUu"};
 
 var _excluded$v = ["el", "shortcut", "selected"];
-function ownKeys$I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$I(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$K(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$K(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$K(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$K(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function Atom$1(_ref) {
   var el = _ref.el,
       shortcut = _ref.shortcut,
       selected = _ref.selected,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$v);
-  return jsxRuntime.jsx("button", _objectSpread$I(_objectSpread$I({
+  return jsxRuntime.jsx("button", _objectSpread$K(_objectSpread$K({
     title: shortcut ? "".concat(el.title, " (").concat(shortcut, ")") : el.title,
-    className: clsx__default["default"](classes$G.atom, {
+    className: clsx__default["default"](classes$H.atom, {
       selected: selected
     }),
     value: el.number
@@ -8872,16 +8976,16 @@ var AtomsList = React.forwardRef(function (props, ref) {
   });
 });
 
-var classes$F = {"button-common-styles":"RightToolbar-module_button-common-styles__fNlqY","scrollbar":"RightToolbar-module_scrollbar__2Q0UU","group":"RightToolbar-module_group__3mhUx","root":"RightToolbar-module_root__1D5hp","atomsList":"RightToolbar-module_atomsList__ar08-","buttons":"RightToolbar-module_buttons__YxRHI"};
+var classes$G = {"button-common-styles":"RightToolbar-module_button-common-styles__fNlqY","scrollbar":"RightToolbar-module_scrollbar__2Q0UU","group":"RightToolbar-module_group__3mhUx","root":"RightToolbar-module_root__1D5hp","atomsList":"RightToolbar-module_atomsList__ar08-","buttons":"RightToolbar-module_buttons__YxRHI"};
 
 var _excluded$u = ["className"];
-function ownKeys$H(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$H(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$J(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$J(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$J(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$J(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Group = function Group(_ref) {
   var children = _ref.children,
       className = _ref.className;
   return jsxRuntime.jsx("div", {
-    className: clsx__default["default"](classes$F.group, className),
+    className: clsx__default["default"](classes$G.group, className),
     children: children
   });
 };
@@ -8912,12 +9016,12 @@ var RightToolbar = function RightToolbar(props) {
     scrollRef.current.scrollTop += sizeRef.current.offsetHeight;
   };
   return jsxRuntime.jsxs("div", {
-    className: clsx__default["default"](classes$F.root, className),
+    className: clsx__default["default"](classes$G.root, className),
     children: [jsxRuntime.jsxs("div", {
-      className: classes$F.buttons,
+      className: classes$G.buttons,
       ref: scrollRef,
       children: [jsxRuntime.jsxs(Group, {
-        className: classes$F.atomsList,
+        className: classes$G.atomsList,
         children: [jsxRuntime.jsx(AtomsList, {
           ref: startRef,
           atoms: basicAtoms,
@@ -8927,15 +9031,15 @@ var RightToolbar = function RightToolbar(props) {
           atoms: freqAtoms,
           active: active,
           onAction: onAction
-        }), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$H({
+        }), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$J({
           id: "period-table"
         }, rest))]
       }), jsxRuntime.jsx(Group, {
         children: jsxRuntime.jsxs("div", {
           ref: sizeRef,
-          children: [jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$H({
+          children: [jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$J({
             id: "any-atom"
-          }, rest)), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$H({
+          }, rest)), jsxRuntime.jsx(ToolbarGroupItem, _objectSpread$J({
             id: "extended-table"
           }, rest))]
         })
@@ -9787,6 +9891,11 @@ function lookup(map, event) {
 }
 keyNorm.lookup = lookup;
 
+function _createForOfIteratorHelper$e(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$e(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _unsupportedIterableToArray$e(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$e(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$e(o, minLen); }
+function _arrayLikeToArray$e(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function ownKeys$I(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$I(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$I(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$I(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function initKeydownListener(element) {
   return function (dispatch, getState) {
     var hotKeys = initHotKeys();
@@ -9798,6 +9907,7 @@ function initKeydownListener(element) {
 function keyHandle(dispatch, state, hotKeys, event) {
   if (state.modal) return;
   var editor = state.editor;
+  var render = editor.render;
   var actionState = state.actionState;
   var actionTool = actionState.activeTool;
   var key = keyNorm(event);
@@ -9817,7 +9927,8 @@ function keyHandle(dispatch, state, hotKeys, event) {
     event.preventDefault();
   } else if ((group = keyNorm.lookup(hotKeys, event)) !== undefined) {
     var index = checkGroupOnTool(group, actionTool);
-    index = (index + 1) % group.length;
+    var groupLength = group !== null ? group.length : 1;
+    index = (index + 1) % groupLength;
     var actName = group[index];
     if (actionState[actName] && actionState[actName].disabled === true) {
       event.preventDefault();
@@ -9825,13 +9936,38 @@ function keyHandle(dispatch, state, hotKeys, event) {
     }
     if (actions.indexOf(actName) === -1) {
       var newAction = config[actName].action;
-      dispatch(onAction(newAction));
+      var hoverItemId = getHoveredAtomId(render.ctab.atoms);
+      var isHoveringOverAtom = hoverItemId !== null;
+      if (isHoveringOverAtom) {
+        var atomProps = _objectSpread$I({}, newAction.opts);
+        var updatedAtoms = ketcherCore.fromAtomsAttrs(render.ctab, hoverItemId, atomProps, true);
+        editor.update(updatedAtoms);
+      } else {
+        dispatch(onAction(newAction));
+      }
       event.preventDefault();
-    } else if (window.clipboardData) {
+    } else if (reactDeviceDetect.isIE) {
       exec(event);
     }
   }
 }
+function getHoveredAtomId(atoms) {
+  var _iterator = _createForOfIteratorHelper$e(atoms.entries()),
+      _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray__default["default"](_step.value, 2),
+          id = _step$value[0],
+          atom = _step$value[1];
+      if (atom.hover) return id;
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return null;
+}
 function setHotKey(key, actName, hotKeys) {
   if (Array.isArray(hotKeys[key])) hotKeys[key].push(actName);else hotKeys[key] = [actName];
 }
@@ -9859,7 +9995,7 @@ function checkGroupOnTool(group, actionTool) {
   return index;
 }
 var rxnTextPlain = /\$RXN\n+\s+0\s+0\s+0\n*/;
-function initClipboard(dispatch, getState) {
+function initClipboard(dispatch) {
   var formats = Object.keys(ketcherCore.formatProperties).map(function (format) {
     return ketcherCore.formatProperties[format].mime;
   });
@@ -9906,7 +10042,7 @@ function clipData(editor) {
   var errorHandler = editor.errorHandler;
   if (struct.isBlank()) return null;
   var simpleObjectOrText = Boolean(struct.simpleObjects.size || struct.texts.size);
-  if (simpleObjectOrText && window.clipboardData) {
+  if (simpleObjectOrText && reactDeviceDetect.isIE) {
     errorHandler('The structure you are trying to copy contains Simple object or/and Text object.' + 'To copy Simple object or Text object in Internet Explorer try "Copy as KET" button');
     return null;
   }
@@ -9920,8 +10056,8 @@ function clipData(editor) {
     res['text/plain'] = data;
     res[type] = data;
     return res;
-  } catch (ex) {
-    errorHandler(ex.message);
+  } catch (e) {
+    errorHandler(e.message);
   }
   return null;
 }
@@ -9955,7 +10091,7 @@ var mapDispatchToProps$d = function mapDispatchToProps(dispatch) {
 };
 var AppHiddenContainer = reactRedux.connect(null, mapDispatchToProps$d)(AppHidden);
 
-var classes$E = {"button-common-styles":"Modal-module_button-common-styles__ko9E5","scrollbar":"Modal-module_scrollbar__yPIJc","modalOverlay":"Modal-module_modalOverlay__AzVeg","animate":"Modal-module_animate__pnPNj","hide":"Modal-module_hide__0CTey","smallScreen":"Modal-module_smallScreen__nzt2L"};
+var classes$F = {"button-common-styles":"Modal-module_button-common-styles__ko9E5","scrollbar":"Modal-module_scrollbar__yPIJc","modalOverlay":"Modal-module_modalOverlay__AzVeg","animate":"Modal-module_animate__pnPNj","hide":"Modal-module_hide__0CTey","smallScreen":"Modal-module_smallScreen__nzt2L"};
 
 var selectClasses = {"button-common-styles":"Select-module_button-common-styles__cgaVz","scrollbar":"Select-module_scrollbar__cA89D","dropdownList":"Select-module_dropdownList__rdcrH","selectContainer":"Select-module_selectContainer__yXT-t"};
 
@@ -9967,8 +10103,8 @@ var mediaSizes$1 = {
 var styles$c = {"button-common-styles":"Dialog-module_button-common-styles__HcaFV","scrollbar":"Dialog-module_scrollbar__9Iy27","dialog":"Dialog-module_dialog__IafFQ","hide":"Dialog-module_hide__6R16B","header":"Dialog-module_header__T7-24","btnContainer":"Dialog-module_btnContainer__TOLPx","buttonTop":"Dialog-module_buttonTop__ZhwZQ","closeButton":"Dialog-module_closeButton__Ch6UT","footer":"Dialog-module_footer__NTq5o","ok":"Dialog-module_ok__T4j7Z","cancel":"Dialog-module_cancel__RcR-D","withDivider":"Dialog-module_withDivider__8LsbA","body":"Dialog-module_body__YgzDR","withMargin":"Dialog-module_withMargin__SDH61"};
 
 var _excluded$t = ["children", "title", "params", "result", "valid", "buttons", "headerContent", "footerContent", "className", "buttonsNameMap", "needMargin", "withDivider", "focusable"];
-function ownKeys$G(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$G(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$H(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$H(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$H(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$H(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Dialog = function Dialog(props) {
   var children = props.children,
       title = props.title,
@@ -10021,7 +10157,7 @@ var Dialog = function Dialog(props) {
       event.stopPropagation();
     }
   };
-  return jsxRuntime.jsxs("div", _objectSpread$G(_objectSpread$G({
+  return jsxRuntime.jsxs("div", _objectSpread$H(_objectSpread$H({
     ref: dialogRef,
     role: "dialog",
     onSubmit: function onSubmit(event) {
@@ -10078,8 +10214,8 @@ var LoadingCircles = function LoadingCircles() {
 };
 
 var _excluded$s = ["id", "dist"];
-function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$F(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$G(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$G(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$G(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$G(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SELECTION_DISTANCE_COEFFICIENT = 0.4;
 var SELECTION_WITHIN_TEXT = 0;
 var findMaps = {
@@ -10414,7 +10550,7 @@ function findClosestItem(restruct, pos, maps, skip, scale) {
       var id = item.id,
           dist = item.dist,
           other = _objectWithoutProperties__default["default"](item, _excluded$s);
-      return _objectSpread$F({
+      return _objectSpread$G({
         map: mp,
         id: id,
         dist: dist
@@ -10741,6 +10877,7 @@ var AtomTool = function () {
       type: 1,
       stereo: ketcherCore.Bond.PATTERN.STEREO.NONE
     });
+    this.editor.hoverIcon.show().attr('text', "".concat(atomProps.label)).attr('fill', "".concat(ketcherCore.ElementColor[atomProps.label]));
     if (editor.selection()) {
       var _editor$selection;
       if ((_editor$selection = editor.selection()) !== null && _editor$selection !== void 0 && _editor$selection.atoms) {
@@ -10824,12 +10961,31 @@ var AtomTool = function () {
         };
       }
     }
+  }, {
+    key: "mouseleave",
+    value: function mouseleave() {
+      this.editor.hoverIcon.hide();
+    }
+  }, {
+    key: "mouseover",
+    value: function mouseover() {
+      this.editor.hoverIcon.show();
+    }
   }, {
     key: "mousemove",
     value: function mousemove(event) {
       var rnd = this.editor.render;
+      var layerX = event.layerX,
+          layerY = event.layerY;
       if (!this.dragCtx || !this.dragCtx.item) {
-        this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']));
+        var _this$editor$hoverIco = this.editor.hoverIcon.getBBox(),
+            height = _this$editor$hoverIco.height,
+            width = _this$editor$hoverIco.width;
+        this.editor.hoverIcon.attr({
+          x: layerX - width / 2,
+          y: layerY - height / 2
+        });
+        this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']), null, event);
         return;
       }
       var dragCtx = this.dragCtx;
@@ -11231,12 +11387,16 @@ var BondTool = function () {
               beginPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp.get_xy0(), xy1, event.ctrlKey);
             }
           }
-          if (dist > 0.3) dragCtx.action = ketcherCore.fromBondAddition(rnd.ctab, this.bondProps, beginAtom, endAtom, beginPos, endPos)[0];else delete dragCtx.action;
+          if (dist > 0.3) {
+            dragCtx.action = ketcherCore.fromBondAddition(rnd.ctab, this.bondProps, beginAtom, endAtom, beginPos, endPos)[0];
+          } else {
+            delete dragCtx.action;
+          }
           this.editor.update(dragCtx.action, true);
           return true;
         }
       }
-      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds']));
+      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds']), null, event);
       return true;
     }
   }, {
@@ -11370,7 +11530,7 @@ var ChainTool = function () {
       var editor = this.editor;
       var restruct = editor.render.ctab;
       var dragCtx = this.dragCtx;
-      editor.hover(this.editor.findItem(event, ['atoms', 'bonds']));
+      editor.hover(this.editor.findItem(event, ['atoms', 'bonds']), null, event);
       if (!dragCtx) {
         return true;
       }
@@ -11504,7 +11664,7 @@ var ChargeTool = function () {
       if (ci && ci.map === 'atoms' && ketcherCore.Elements.get((_molecule$atoms$get = molecule.atoms.get(ci.id)) === null || _molecule$atoms$get === void 0 ? void 0 : _molecule$atoms$get.label)) {
         this.editor.hover(ci);
       } else {
-        this.editor.hover(null);
+        this.editor.hover(null, null, event);
       }
       return true;
     }
@@ -12404,8 +12564,8 @@ function countOfSelectedComponents(restruct, atoms) {
   }, 0);
 }
 
-function ownKeys$E(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$E(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$E(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$F(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$F(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$F(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$F(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createForOfIteratorHelper$6(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$6(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$6(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$6(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$6(o, minLen); }
 function _arrayLikeToArray$6(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
@@ -12589,7 +12749,7 @@ var SelectTool = function () {
         return true;
       }
       var maps = _classPrivateFieldGet__default["default"](this, _lassoHelper).fragment || event.ctrlKey ? ['frags', 'sgroups', 'functionalGroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'] : ['atoms', 'bonds', 'sgroups', 'functionalGroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
-      editor.hover(editor.findItem(event, maps, null));
+      editor.hover(editor.findItem(event, maps, null), null, event);
       return true;
     }
   }, {
@@ -12675,6 +12835,16 @@ var SelectTool = function () {
       }
       var dragCtx = this.dragCtx;
       if (dragCtx && dragCtx.stopTapping) dragCtx.stopTapping();
+      var possibleSaltOrSolvent = struct.sgroups.get(actualSgroupId);
+      var isDraggingSaltOrSolventOnStructure = ketcherCore.SGroup.isSaltOrSolvent(possibleSaltOrSolvent === null || possibleSaltOrSolvent === void 0 ? void 0 : possibleSaltOrSolvent.item.data.name);
+      if ((isDraggingSaltOrSolventOnStructure || this.isDraggingStructureOnSaltOrSolvent(dragCtx, struct.sgroups)) && dragCtx) {
+        preventSaltAndSolventsMerge(struct, dragCtx, editor);
+        delete this.dragCtx;
+        if (_classPrivateFieldGet__default["default"](this, _lassoHelper).running()) {
+          this.selectElementsOnCanvas(newSelected, editor, event);
+        }
+        return true;
+      }
       if (dragCtx && dragCtx.item) {
         dragCtx.action = dragCtx.action ? ketcherCore.fromItemsFuse(struct, dragCtx.mergeItems).mergeWith(dragCtx.action) : ketcherCore.fromItemsFuse(struct, dragCtx.mergeItems);
         editor.hover(null);
@@ -12682,8 +12852,7 @@ var SelectTool = function () {
         if (dragCtx.action.operations.length !== 0) editor.update(dragCtx.action);
         delete this.dragCtx;
       } else if (_classPrivateFieldGet__default["default"](this, _lassoHelper).running()) {
-        var sel = newSelected.atoms.length > 0 ? selMerge(_classPrivateFieldGet__default["default"](this, _lassoHelper).end(), newSelected, false) : _classPrivateFieldGet__default["default"](this, _lassoHelper).end();
-        editor.selection(!event.shiftKey ? sel : selMerge(sel, editor.selection(), false));
+        this.selectElementsOnCanvas(newSelected, editor, event);
       } else if (_classPrivateFieldGet__default["default"](this, _lassoHelper).fragment) {
         if (!event.shiftKey) editor.selection(null);
       }
@@ -12799,7 +12968,7 @@ var SelectTool = function () {
       } else if (ci.map === 'texts') {
         editor.selection(closestToSel(ci));
         var text = molecule.texts.get(ci.id);
-        var dialog = editor.event.elementEdit.dispatch(_objectSpread$E(_objectSpread$E({}, text), {}, {
+        var dialog = editor.event.elementEdit.dispatch(_objectSpread$F(_objectSpread$F({}, text), {}, {
           type: 'text'
         }));
         dialog.then(function (_ref) {
@@ -12827,6 +12996,33 @@ var SelectTool = function () {
       delete this.dragCtx;
       this.editor.hover(null);
     }
+  }, {
+    key: "selectElementsOnCanvas",
+    value: function selectElementsOnCanvas(elements, editor, event) {
+      var sel = elements.atoms.length > 0 ? selMerge(_classPrivateFieldGet__default["default"](this, _lassoHelper).end(), elements, false) : _classPrivateFieldGet__default["default"](this, _lassoHelper).end();
+      editor.selection(!event.shiftKey ? sel : selMerge(sel, editor.selection(), false));
+    }
+  }, {
+    key: "isDraggingStructureOnSaltOrSolvent",
+    value: function isDraggingStructureOnSaltOrSolvent(dragCtx, sgroups) {
+      var isDraggingOnSaltOrSolventAtom;
+      var isDraggingOnSaltOrSolventBond;
+      if (dragCtx !== null && dragCtx !== void 0 && dragCtx.mergeItems) {
+        var mergeAtoms = Array.from(dragCtx.mergeItems.atoms.values());
+        var mergeBonds = Array.from(dragCtx.mergeItems.bonds.values());
+        var sgroupsOnCanvas = Array.from(sgroups.values()).map(function (_ref2) {
+          var item = _ref2.item;
+          return item;
+        });
+        isDraggingOnSaltOrSolventAtom = mergeAtoms.some(function (atomId) {
+          return ketcherCore.SGroup.isAtomInSaltOrSolvent(atomId, sgroupsOnCanvas);
+        });
+        isDraggingOnSaltOrSolventBond = mergeBonds.some(function (bondId) {
+          return ketcherCore.SGroup.isBondInSaltOrSolvent(bondId, sgroupsOnCanvas);
+        });
+      }
+      return isDraggingOnSaltOrSolventAtom || isDraggingOnSaltOrSolventBond;
+    }
   }]);
   return SelectTool;
 }();
@@ -12852,6 +13048,17 @@ function uniqArray(dest, add, reversible) {
     return dest;
   }, []);
 }
+function preventSaltAndSolventsMerge(struct, dragCtx, editor) {
+  var action = dragCtx.action ? ketcherCore.fromItemsFuse(struct, null).mergeWith(dragCtx.action) : ketcherCore.fromItemsFuse(struct, null);
+  editor.hover(null);
+  if (dragCtx.mergeItems) {
+    editor.selection(null);
+  }
+  editor.update(action);
+  editor.event.message.dispatch({
+    info: false
+  });
+}
 
 function _createForOfIteratorHelper$5(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$5(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$5(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$5(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$5(o, minLen); }
@@ -13650,7 +13857,7 @@ var ReactionArrowTool = function () {
         }
       } else {
         var items = this.editor.findItem(event, ['rxnArrows']);
-        this.editor.hover(items);
+        this.editor.hover(items, null, event);
       }
     }
   }, {
@@ -14355,7 +14562,7 @@ var TemplateTool = function () {
     value: function mousemove(event) {
       var restruct = this.editor.render.ctab;
       if (!this.dragCtx) {
-        this.editor.hover(this.editor.findItem(event, this.findItems));
+        this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
         return true;
       }
       var dragCtx = this.dragCtx;
@@ -14461,6 +14668,10 @@ var TemplateTool = function () {
       }
       var action;
       var pasteItems = null;
+      if (ketcherCore.SGroup.isSaltOrSolvent(this.template.molecule.name)) {
+        addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
+        return true;
+      }
       if (!dragCtx.action) {
         if (!ci) {
           var _fromTemplateOnCanvas3 = ketcherCore.fromTemplateOnCanvas(restruct, this.template, dragCtx.xy0, 0);
@@ -14508,11 +14719,15 @@ var TemplateTool = function () {
         }
       }
       this.editor.selection(null);
-      if (!dragCtx.mergeItems && pasteItems && this.mode !== 'fg') dragCtx.mergeItems = ketcherCore.getItemsToFuse(this.editor, pasteItems);
+      if (!dragCtx.mergeItems && pasteItems && this.mode !== 'fg') {
+        dragCtx.mergeItems = ketcherCore.getItemsToFuse(this.editor, pasteItems);
+      }
       dragCtx.action = dragCtx.action ? ketcherCore.fromItemsFuse(restruct, dragCtx.mergeItems).mergeWith(dragCtx.action) : ketcherCore.fromItemsFuse(restruct, dragCtx.mergeItems);
       this.editor.hover(null);
       var completeAction = dragCtx.action;
-      if (completeAction && !completeAction.isDummy()) this.editor.update(completeAction);
+      if (completeAction && !completeAction.isDummy()) {
+        this.editor.update(completeAction);
+      }
       this.editor.event.message.dispatch({
         info: false
       });
@@ -14531,6 +14746,17 @@ var TemplateTool = function () {
   }]);
   return TemplateTool;
 }();
+function addSaltsAndSolventsOnCanvasWithoutMerge(restruct, template, dragCtx, editor) {
+  var _fromTemplateOnCanvas5 = ketcherCore.fromTemplateOnCanvas(restruct, template, dragCtx.xy0, 0),
+      _fromTemplateOnCanvas6 = _slicedToArray__default["default"](_fromTemplateOnCanvas5, 1),
+      action = _fromTemplateOnCanvas6[0];
+  editor.update(action);
+  editor.selection(null);
+  editor.hover(null);
+  editor.event.message.dispatch({
+    info: false
+  });
+}
 function getSign(molecule, bond, v) {
   var begin = molecule.atoms.get(bond.begin).pp;
   var end = molecule.atoms.get(bond.end).pp;
@@ -14578,7 +14804,7 @@ var TextTool = function () {
         this.dragCtx.action = ketcherCore.fromMultipleMove(render.ctab, this.editor.selection() || {}, render.page2obj(event).sub(this.dragCtx.xy0));
         this.editor.update(this.dragCtx.action, true);
       } else {
-        this.editor.hover(this.editor.findItem(event, ['texts']));
+        this.editor.hover(this.editor.findItem(event, ['texts']), null, event);
       }
     }
   }, {
@@ -14756,6 +14982,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
 var SCALE = 40;
 var HISTORY_SIZE = 32;
+var HOVER_ICON_OPACITY = 0.7;
 var structObjects = ['atoms', 'bonds', 'frags', 'sgroups', 'sgroupData', 'rgroups', 'rxnArrows', 'rxnPluses', 'enhancedFlags', 'simpleObjects', 'texts'];
 var highlightTargets = ['atoms', 'bonds', 'rxnArrows', 'rxnPluses', 'functionalGroups', 'frags', 'merge', 'rgroups', 'sgroups', 'sgroupData', 'enhancedFlags', 'simpleObjects', 'texts'];
 function selectStereoFlagsIfNecessary(atoms, expAtoms) {
@@ -14792,6 +15019,7 @@ var Editor$3 = function () {
     this.highlights = new Highlighter(this);
     this.renderAndRecoordinateStruct = this.renderAndRecoordinateStruct.bind(this);
     this.setOptions = this.setOptions.bind(this);
+    this.hoverIcon = this.render.paper.text(0, 0, '').attr('font-size', options.fontsz).attr('opacity', HOVER_ICON_OPACITY);
     this.event = {
       message: new subscription.Subscription(),
       elementEdit: new subscription.PipelineSubscription(),
@@ -14808,7 +15036,8 @@ var Editor$3 = function () {
       dearomatizeStruct: new subscription.PipelineSubscription(),
       enhancedStereoEdit: new subscription.PipelineSubscription(),
       confirm: new subscription.PipelineSubscription(),
-      cursor: new subscription.PipelineSubscription()
+      cursor: new subscription.PipelineSubscription(),
+      showInfo: new subscription.PipelineSubscription()
     };
     domEventSetup(this, clientArea);
   }
@@ -14838,6 +15067,10 @@ var Editor$3 = function () {
         this._tool.cancel();
       }
       var tool = new tools[name](this, opts);
+      var isAtomToolChosen = name === 'atom';
+      if (!isAtomToolChosen) {
+        this.hoverIcon.hide();
+      }
       if (!tool || tool.isNotActiveTool) {
         return null;
       }
@@ -14854,8 +15087,8 @@ var Editor$3 = function () {
     value: function renderAndRecoordinateStruct(struct) {
       var action = ketcherCore.fromNewCanvas(this.render.ctab, struct);
       this.update(action);
-      getStructCenter(this.render.ctab);
-      recoordinate(this);
+      var structCenter = getStructCenter(this.render.ctab);
+      recoordinate(this, structCenter);
       return this.render.ctab.molecule;
     }
   }, {
@@ -14904,8 +15137,8 @@ var Editor$3 = function () {
       }
       this.render.setZoom(value);
       var selection = this.selection();
-      getStructCenter(this.render.ctab, selection);
-      recoordinate(this);
+      var structCenter = getStructCenter(this.render.ctab, selection);
+      recoordinate(this, structCenter);
       this.render.update();
       return this.render.options.zoom;
     }
@@ -14950,13 +15183,35 @@ var Editor$3 = function () {
     }
   }, {
     key: "hover",
-    value: function hover(ci, newTool) {
+    value: function hover(ci, newTool, event) {
       var tool = newTool || this._tool;
+      var infoPanelData = null;
       if ('ci' in tool && (!ci || tool.ci.map !== ci.map || tool.ci.id !== ci.id)) {
         setHover(tool.ci, false, this.render);
         delete tool.ci;
       }
       if (ci && setHover(ci, true, this.render)) tool.ci = ci;
+      if (!event) return;
+      var checkFunctionGroupTypes = ['sgroups', 'functionalGroups'];
+      var closestCollapsibleStructures = this.findItem(event, checkFunctionGroupTypes);
+      if (closestCollapsibleStructures) {
+        var _this$struct;
+        var sGroup = (_this$struct = this.struct()) === null || _this$struct === void 0 ? void 0 : _this$struct.sgroups.get(closestCollapsibleStructures.id);
+        if (sGroup && !sGroup.data.expanded) {
+          var groupName = sGroup.data.name;
+          var groupStruct = ketcherCore.FunctionalGroup.getFunctionalGroupByName(groupName);
+          infoPanelData = {
+            groupStruct: groupStruct,
+            event: event,
+            sGroup: sGroup
+          };
+        }
+      }
+      if (infoPanelData) {
+        this.event.showInfo.dispatch(infoPanelData);
+      } else {
+        this.event.showInfo.dispatch(null);
+      }
     }
   }, {
     key: "update",
@@ -15143,7 +15398,11 @@ function domEventSetup(editor, clientArea) {
 }
 function recoordinate(editor, rp
 ) {
-  editor.render.setScrollOffset(0, 0);
+  if (rp) {
+    editor.render.setScrollOffset(rp.x, rp.y);
+  } else {
+    editor.render.setScrollOffset(0, 0);
+  }
 }
 function getStructCenter(ReStruct, selection) {
   var bb = ReStruct.getVBoxObj(selection || {});
@@ -15185,11 +15444,12 @@ function setHover(ci, visible, render) {
   return true;
 }
 
-var classes$D = {"isHidden":"ContextMenu-module_isHidden__eOjF4"};
+var classes$E = {"isHidden":"ContextMenu-module_isHidden__eOjF4"};
 
 var FGContextMenu = function FGContextMenu() {
   var _useAppContext = useAppContext(),
       getKetcherInstance = _useAppContext.getKetcherInstance;
+  var dispatch = reactRedux.useDispatch();
   var handleExpand = function handleExpand() {
     var editor = getKetcherInstance().editor;
     var action = new ketcherCore.Action();
@@ -15202,6 +15462,10 @@ var FGContextMenu = function FGContextMenu() {
     editor.update(action);
     setShowSGroupMenu(false);
     setTargetItems([]);
+    highlightFG(dispatch, {
+      group: null,
+      id: null
+    });
   };
   var handleRemove = function handleRemove() {
     var editor = getKetcherInstance().editor;
@@ -15283,7 +15547,7 @@ var FGContextMenu = function FGContextMenu() {
     onShow: function onShow(e) {
       return showMenu(e);
     },
-    className: clsx__default["default"](_defineProperty__default["default"]({}, classes$D.isHidden, !showSGroupMenu)),
+    className: clsx__default["default"](_defineProperty__default["default"]({}, classes$E.isHidden, !showSGroupMenu)),
     children: [jsxRuntime.jsxs(reactContextmenu.MenuItem, {
       onClick: handleExpand,
       children: [targetItems.length && targetItems[0].isExpanded ? 'Contract ' : 'Expand ', "Abbreviation"]
@@ -15296,7 +15560,7 @@ var FGContextMenu = function FGContextMenu() {
   });
 };
 
-var classes$C = {"button-common-styles":"StructEditor-module_button-common-styles__3P7PO","scrollbar":"StructEditor-module_scrollbar__SUs-o","spinnerOverlay":"StructEditor-module_spinnerOverlay__5H1IM","canvas":"StructEditor-module_canvas__LLnzh","measureLog":"StructEditor-module_measureLog__B2wuy","visible":"StructEditor-module_visible__3eFNB","intermediateCanvas":"StructEditor-module_intermediateCanvas__fR3ws","enableCursor":"StructEditor-module_enableCursor__Qla0A"};
+var classes$D = {"button-common-styles":"StructEditor-module_button-common-styles__3P7PO","scrollbar":"StructEditor-module_scrollbar__SUs-o","spinnerOverlay":"StructEditor-module_spinnerOverlay__5H1IM","canvas":"StructEditor-module_canvas__LLnzh","measureLog":"StructEditor-module_measureLog__B2wuy","visible":"StructEditor-module_visible__3eFNB","intermediateCanvas":"StructEditor-module_intermediateCanvas__fR3ws","enableCursor":"StructEditor-module_enableCursor__Qla0A"};
 
 var Cursor = function Cursor(_ref) {
   var Icon = _ref.Icon,
@@ -15368,11 +15632,242 @@ var Cursor = function Cursor(_ref) {
   });
 };
 
-var _excluded$r = ["Tag", "struct", "tool", "toolOpts", "options", "onInit", "onSelectionChange", "onElementEdit", "onEnhancedStereoEdit", "onQuickEdit", "onBondEdit", "onRgroupEdit", "onSgroupEdit", "onSdataEdit", "onRemoveFG", "onMessage", "onAromatizeStruct", "onDearomatizeStruct", "onAttachEdit", "indigoVerification", "onCipChange", "className", "onConfirm", "showAttachmentPoints"];
-function ownKeys$D(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$r = ["struct", "Tag"];
 function _createSuper$a(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$a(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
 function _isNativeReflectConstruct$a() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function ownKeys$E(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$E(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$E(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$E(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function prepareStruct(struct) {
+  if (struct.sgroups.size > 0) {
+    var newStruct = struct.clone();
+    newStruct.sgroups["delete"](0);
+    return newStruct;
+  }
+  return struct;
+}
+var renderCache = new Map();
+function renderStruct(el, struct) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (el && struct) {
+    var _options$cachePrefix = options.cachePrefix,
+        cachePrefix = _options$cachePrefix === void 0 ? '' : _options$cachePrefix;
+    var cacheKey = "".concat(cachePrefix).concat(struct.name);
+    if (renderCache.has(cacheKey)) {
+      el.innerHTML = renderCache.get(cacheKey);
+      return;
+    }
+    var preparedStruct = prepareStruct(struct);
+    preparedStruct.initHalfBonds();
+    preparedStruct.initNeighbors();
+    preparedStruct.setImplicitHydrogen();
+    preparedStruct.markFragments();
+    var rnd = new ketcherCore.Render(el, _objectSpread$E({
+      autoScale: true
+    }, options));
+    rnd.setMolecule(preparedStruct);
+    rnd.update(true, options.viewSz);
+    renderCache.set(cacheKey, rnd.clientArea.innerHTML);
+  }
+}
+var StructRender = function (_Component) {
+  _inherits__default["default"](StructRender, _Component);
+  var _super = _createSuper$a(StructRender);
+  function StructRender(props) {
+    var _this;
+    _classCallCheck__default["default"](this, StructRender);
+    _this = _super.call(this, props);
+    _this.tagRef = React.createRef();
+    return _this;
+  }
+  _createClass__default["default"](StructRender, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(previousProps) {
+      return Boolean(this.props.id && this.props.id !== previousProps.id);
+    }
+  }, {
+    key: "update",
+    value: function update() {
+      var el = this.tagRef.current;
+      var _this$props = this.props,
+          struct = _this$props.struct,
+          options = _this$props.options;
+      var parsedStruct;
+      if (!(struct instanceof ketcherCore.Struct)) {
+        try {
+          var molSerialzer = new ketcherCore.MolSerializer();
+          parsedStruct = molSerialzer.deserialize(struct);
+        } catch (e) {
+          parsedStruct = null;
+        }
+      } else {
+        parsedStruct = struct;
+      }
+      el === null || el === void 0 ? void 0 : el.childNodes.forEach(function (node) {
+        node.remove();
+      });
+      renderStruct(el, parsedStruct, options);
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.update();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.update();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          struct = _this$props2.struct,
+          _this$props2$Tag = _this$props2.Tag,
+          Tag = _this$props2$Tag === void 0 ? 'div' : _this$props2$Tag,
+          props = _objectWithoutProperties__default["default"](_this$props2, _excluded$r);
+      return jsxRuntime.jsx(Tag, _objectSpread$E(_objectSpread$E({
+        ref: this.tagRef
+      }, props), {}, {
+        children: struct ? null : 'No molecule'
+      }));
+    }
+  }]);
+  return StructRender;
+}(React.Component);
+
+var functionalGroupsSelector = function functionalGroupsSelector(state) {
+  return state.functionalGroups.lib;
+};
+var functionGroupInfoSelector = function functionGroupInfoSelector(state) {
+  return state.functionalGroups.functionalGroupInfo;
+};
+
+var classes$C = {"infoPanel":"InfoPanel-module_infoPanel__irvZL"};
+
+function ownKeys$D(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$D(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$D(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$D(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var HOVER_DELAY = 400;
+var HOVER_PANEL_PADDING = 20;
+function getSGroupFirstAtom(sGroup, render) {
+  var _render$ctab$atoms, _render$ctab$atoms$ge;
+  var firstSgroupAtom = sGroup.firstSgroupAtom;
+  if (firstSgroupAtom) return firstSgroupAtom.pp;
+  var _sGroup$atoms = _slicedToArray__default["default"](sGroup.atoms, 1),
+      firstAtomId = _sGroup$atoms[0];
+  return ((_render$ctab$atoms = render.ctab.atoms) === null || _render$ctab$atoms === void 0 ? void 0 : (_render$ctab$atoms$ge = _render$ctab$atoms.get(firstAtomId)) === null || _render$ctab$atoms$ge === void 0 ? void 0 : _render$ctab$atoms$ge.a.pp) || new ketcherCore.Vec2(0, 0);
+}
+function getPanelPosition(clientX, clientY, render, sGroup) {
+  var width = 0;
+  var height = 0;
+  var x = 0;
+  var y = 0;
+  if (sGroup) {
+    var _render$clientArea, _render$clientArea2, _render$options$offse, _render$clientArea3, _render$options, _render$options$offse2, _render$clientArea4;
+    var groupBoundingBox = sGroup.areas[0];
+    var start = ketcherCore.Scale.obj2scaled(groupBoundingBox.p0, render.options);
+    var end = ketcherCore.Scale.obj2scaled(groupBoundingBox.p1, render.options);
+    width = end.x - start.x;
+    height = end.y - start.y;
+    var firstAtomPosition = getSGroupFirstAtom(sGroup, render);
+    var panelPosition = ketcherCore.Scale.obj2scaled(firstAtomPosition, {
+      scale: render.options.scale * render.options.zoom
+    });
+    x = panelPosition.x - width / 2 - HOVER_PANEL_PADDING;
+    y = panelPosition.y + HOVER_PANEL_PADDING;
+    var viewportRightLimit = (render === null || render === void 0 ? void 0 : (_render$clientArea = render.clientArea) === null || _render$clientArea === void 0 ? void 0 : _render$clientArea.clientWidth) - width / 2;
+    var viewportLeftLimit = HOVER_PANEL_PADDING * 2 + width / 2;
+    var viewportBottomLimit = (render === null || render === void 0 ? void 0 : (_render$clientArea2 = render.clientArea) === null || _render$clientArea2 === void 0 ? void 0 : _render$clientArea2.clientHeight) - height;
+    if (clientX > viewportRightLimit) {
+      x = panelPosition.x - width - HOVER_PANEL_PADDING;
+    } else if (clientX < viewportLeftLimit) {
+      x = panelPosition.x - HOVER_PANEL_PADDING;
+    }
+    if (clientY > viewportBottomLimit) {
+      y = panelPosition.y - height - HOVER_PANEL_PADDING * 3;
+    }
+    var scrollOffsetX = (render === null || render === void 0 ? void 0 : (_render$options$offse = render.options.offset) === null || _render$options$offse === void 0 ? void 0 : _render$options$offse.x) - (render === null || render === void 0 ? void 0 : (_render$clientArea3 = render.clientArea) === null || _render$clientArea3 === void 0 ? void 0 : _render$clientArea3.scrollLeft);
+    var scrollOffsetY = (render === null || render === void 0 ? void 0 : (_render$options = render.options) === null || _render$options === void 0 ? void 0 : (_render$options$offse2 = _render$options.offset) === null || _render$options$offse2 === void 0 ? void 0 : _render$options$offse2.y) - (render === null || render === void 0 ? void 0 : (_render$clientArea4 = render.clientArea) === null || _render$clientArea4 === void 0 ? void 0 : _render$clientArea4.scrollTop);
+    x += scrollOffsetX;
+    y += scrollOffsetY;
+  }
+  return [new ketcherCore.Vec2(x, y), new ketcherCore.Vec2(width, height)];
+}
+var InfoPanel = function InfoPanel(props) {
+  var _sGroup$data;
+  var _props$clientX = props.clientX,
+      clientX = _props$clientX === void 0 ? 0 : _props$clientX,
+      _props$clientY = props.clientY,
+      clientY = _props$clientY === void 0 ? 0 : _props$clientY,
+      render = props.render,
+      className = props.className,
+      groupStruct = props.groupStruct,
+      sGroup = props.sGroup;
+  var _useState = React.useState(null),
+      _useState2 = _slicedToArray__default["default"](_useState, 2),
+      molecule = _useState2[0],
+      setMolecule = _useState2[1];
+  var childRef = React.useRef(null);
+  var groupName = sGroup === null || sGroup === void 0 ? void 0 : (_sGroup$data = sGroup.data) === null || _sGroup$data === void 0 ? void 0 : _sGroup$data.name;
+  var timer;
+  React.useEffect(function () {
+    if (groupStruct) {
+      timer = setTimeout(function () {
+        setMolecule(groupStruct.clone());
+      }, HOVER_DELAY);
+    } else {
+      setMolecule(null);
+    }
+    return function () {
+      return clearTimeout(timer);
+    };
+  }, [groupName]);
+  var _getPanelPosition = getPanelPosition(clientX, clientY, render, sGroup),
+      _getPanelPosition2 = _slicedToArray__default["default"](_getPanelPosition, 2),
+      position = _getPanelPosition2[0],
+      size = _getPanelPosition2[1];
+  var x = position.x,
+      y = position.y;
+  var width = size.x;
+  var height = size.y;
+  return molecule && jsxRuntime.jsx("div", {
+    style: {
+      left: x + 'px',
+      top: y + 'px'
+    },
+    className: clsx__default["default"](classes$C.infoPanel, className),
+    children: jsxRuntime.jsx(StructRender, _objectSpread$D(_objectSpread$D({
+      struct: molecule
+    }, props), {}, {
+      id: groupName,
+      ref: childRef,
+      options: _objectSpread$D(_objectSpread$D({}, render.options), {}, {
+        autoScale: true,
+        autoScaleMargin: 0,
+        rescaleAmount: 1,
+        cachePrefix: 'infoPanel',
+        viewSz: new ketcherCore.Vec2(width, height),
+        width: width,
+        height: height
+      })
+    }))
+  });
+};
+var InfoPanel$1 = reactRedux.connect(function (store) {
+  var _functionGroupInfoSel, _functionGroupInfoSel2, _functionGroupInfoSel3, _functionGroupInfoSel4, _functionGroupInfoSel5, _functionGroupInfoSel6, _store$editor, _store$editor$render, _store$editor$render$;
+  return {
+    clientX: ((_functionGroupInfoSel = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel === void 0 ? void 0 : (_functionGroupInfoSel2 = _functionGroupInfoSel.event) === null || _functionGroupInfoSel2 === void 0 ? void 0 : _functionGroupInfoSel2.clientX) || 0,
+    clientY: ((_functionGroupInfoSel3 = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel3 === void 0 ? void 0 : (_functionGroupInfoSel4 = _functionGroupInfoSel3.event) === null || _functionGroupInfoSel4 === void 0 ? void 0 : _functionGroupInfoSel4.clientY) || 0,
+    groupStruct: ((_functionGroupInfoSel5 = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel5 === void 0 ? void 0 : _functionGroupInfoSel5.groupStruct) || null,
+    sGroup: ((_functionGroupInfoSel6 = functionGroupInfoSelector(store)) === null || _functionGroupInfoSel6 === void 0 ? void 0 : _functionGroupInfoSel6.sGroup) || null,
+    render: (_store$editor = store.editor) === null || _store$editor === void 0 ? void 0 : (_store$editor$render = _store$editor.render) === null || _store$editor$render === void 0 ? void 0 : (_store$editor$render$ = _store$editor$render.ctab) === null || _store$editor$render$ === void 0 ? void 0 : _store$editor$render$.render
+  };
+})(InfoPanel);
+
+var _excluded$q = ["Tag", "struct", "tool", "toolOpts", "options", "onInit", "onSelectionChange", "onElementEdit", "onEnhancedStereoEdit", "onQuickEdit", "onBondEdit", "onRgroupEdit", "onSgroupEdit", "onSdataEdit", "onRemoveFG", "onMessage", "onAromatizeStruct", "onDearomatizeStruct", "onAttachEdit", "indigoVerification", "onCipChange", "className", "onConfirm", "onShowInfo", "showAttachmentPoints"];
+function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function setupEditor(editor, props) {
   var oldProps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   var struct = props.struct,
@@ -15409,13 +15904,15 @@ function removeEditorHandlers(editor, props) {
 }
 var StructEditor = function (_Component) {
   _inherits__default["default"](StructEditor, _Component);
-  var _super = _createSuper$a(StructEditor);
+  var _super = _createSuper$9(StructEditor);
   function StructEditor(props) {
     var _this;
     _classCallCheck__default["default"](this, StructEditor);
     _this = _super.call(this, props);
     _this.state = {
-      enableCursor: false
+      enableCursor: false,
+      clientX: 0,
+      clientY: 0
     };
     _this.editorRef = React.createRef();
     _this.logRef = React.createRef();
@@ -15435,7 +15932,7 @@ var StructEditor = function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       var _this2 = this;
-      this.editor = new Editor$3(this.editorRef.current, _objectSpread$D({}, this.props.options));
+      this.editor = new Editor$3(this.editorRef.current, _objectSpread$C({}, this.props.options));
       setupEditor(this.editor, this.props);
       if (this.props.onInit) this.props.onInit(this.editor);
       this.editor.event.message.add(function (msg) {
@@ -15447,15 +15944,15 @@ var StructEditor = function (_Component) {
           } catch (_unused) {
             el.innerHTML = msg.info;
           }
-          el.classList.add(classes$C.visible);
+          el.classList.add(classes$D.visible);
         } else {
-          el.classList.remove(classes$C.visible);
+          el.classList.remove(classes$D.visible);
         }
       });
       this.editor.event.cursor.add(function (csr) {
         switch (csr.status) {
           case 'enable':
-            _this2.editorRef.current.classList.add(classes$C.enableCursor);
+            _this2.editorRef.current.classList.add(classes$D.enableCursor);
             var _this2$editorRef$curr = _this2.editorRef.current.getBoundingClientRect(),
                 left = _this2$editorRef$curr.left,
                 top = _this2$editorRef$curr.top,
@@ -15472,25 +15969,27 @@ var StructEditor = function (_Component) {
             }
             break;
           case 'move':
-            _this2.editorRef.current.classList.add(classes$C.enableCursor);
+            _this2.editorRef.current.classList.add(classes$D.enableCursor);
             _this2.setState({
-              enableCursor: true
+              enableCursor: true,
+              clientX: clientX,
+              clientY: clientY
             });
             break;
           case 'disable':
-            _this2.editorRef.current.classList.remove(classes$C.enableCursor);
+            _this2.editorRef.current.classList.remove(classes$D.enableCursor);
             _this2.setState({
               enableCursor: false
             });
             break;
           case 'leave':
-            _this2.editorRef.current.classList.remove(classes$C.enableCursor);
+            _this2.editorRef.current.classList.remove(classes$D.enableCursor);
             _this2.setState({
               enableCursor: false
             });
             break;
           case 'mouseover':
-            _this2.editorRef.current.classList.add(classes$C.enableCursor);
+            _this2.editorRef.current.classList.add(classes$D.enableCursor);
             _this2.setState({
               enableCursor: true
             });
@@ -15534,10 +16033,11 @@ var StructEditor = function (_Component) {
           _this$props.onCipChange;
           var className = _this$props.className;
           _this$props.onConfirm;
+          _this$props.onShowInfo;
           _this$props.showAttachmentPoints;
-          var props = _objectWithoutProperties__default["default"](_this$props, _excluded$r);
-      return jsxRuntime.jsxs(Tag, _objectSpread$D(_objectSpread$D({
-        className: clsx__default["default"](classes$C.canvas, className),
+          var props = _objectWithoutProperties__default["default"](_this$props, _excluded$q);
+      return jsxRuntime.jsxs(Tag, _objectSpread$C(_objectSpread$C({
+        className: clsx__default["default"](classes$D.canvas, className),
         onMouseDown: function onMouseDown(event) {
           return event.preventDefault();
         }
@@ -15550,7 +16050,7 @@ var StructEditor = function (_Component) {
           holdToDisplay: -1,
           children: [jsxRuntime.jsx("div", {
             ref: this.editorRef,
-            className: clsx__default["default"](classes$C.intermediateCanvas),
+            className: clsx__default["default"](classes$D.intermediateCanvas),
             onMouseDown: function onMouseDown(event) {
               return event.preventDefault();
             }
@@ -15559,13 +16059,13 @@ var StructEditor = function (_Component) {
             PressedIcon: SvgCompressedHand,
             enableHandTool: this.state.enableCursor
           }), jsxRuntime.jsx("div", {
-            className: classes$C.measureLog,
+            className: classes$D.measureLog,
             ref: this.logRef
           }), indigoVerification && jsxRuntime.jsx("div", {
-            className: classes$C.spinnerOverlay,
+            className: classes$D.spinnerOverlay,
             children: jsxRuntime.jsx(LoadingCircles, {})
           })]
-        }), jsxRuntime.jsx(FGContextMenu, {})]
+        }), jsxRuntime.jsx(InfoPanel$1, _objectSpread$C(_objectSpread$C({}, this.state), this.props)), jsxRuntime.jsx(FGContextMenu, {})]
       }));
     }
   }]);
@@ -15758,19 +16258,19 @@ var ErrorPopover = function ErrorPopover(_ref) {
   });
 };
 
-var classes$A = {"fieldSetLabel":"input-module_fieldSetLabel__DxKa5","checkbox":"input-module_checkbox__CowSc","radioButton":"input-module_radioButton__2eHO0","slider":"input-module_slider__-Xsc0","select":"input-module_select__GhgBs","input":"input-module_input__WzHgL"};
+var classes$A = {"fieldSetLabel":"input-module_fieldSetLabel__DxKa5","input":"input-module_input__WzHgL","checkbox":"input-module_checkbox__CowSc","radioButton":"input-module_radioButton__2eHO0","slider":"input-module_slider__-Xsc0","select":"input-module_select__GhgBs","genericInput":"input-module_genericInput__XdZ2R"};
 
-var _excluded$q = ["schema", "value", "onChange", "type"],
-    _excluded2$5 = ["schema", "value", "onChange"],
+var _excluded$p = ["schema", "value", "onChange", "type", "isFocused"],
+    _excluded2$4 = ["schema", "value", "onChange"],
     _excluded3$1 = ["schema", "value", "onChange"],
     _excluded4$1 = ["schema", "value", "selected", "onSelect", "type", "checked"],
     _excluded5$1 = ["value", "onChange", "name"],
     _excluded6 = ["children", "onChange", "style"],
     _excluded7 = ["children", "onChange"];
-function _createSuper$9(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$9(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-function _isNativeReflectConstruct$9() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys$C(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$C(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$C(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$C(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function ownKeys$B(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function GenericInput(_ref) {
   _ref.schema;
       var _ref$value = _ref.value,
@@ -15778,14 +16278,21 @@ function GenericInput(_ref) {
       onChange = _ref.onChange,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'text' : _ref$type,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded$q);
+      _ref$isFocused = _ref.isFocused,
+      isFocused = _ref$isFocused === void 0 ? false : _ref$isFocused,
+      props = _objectWithoutProperties__default["default"](_ref, _excluded$p);
+  var inputRef = React.useRef(null);
+  React.useEffect(function () {
+    if (inputRef.current && isFocused) inputRef.current.focus();
+  }, [inputRef, isFocused]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [jsxRuntime.jsx("input", _objectSpread$C({
+    children: [jsxRuntime.jsx("input", _objectSpread$B({
       type: type,
       value: value,
       onInput: onChange,
       onChange: onChange,
-      className: classes$A.input
+      className: clsx__default["default"](classes$A.input, classes$A.genericInput),
+      ref: inputRef
     }, props)), type === 'checkbox' && jsxRuntime.jsx("span", {
       className: classes$A.checkbox
     }), type === 'radio' && jsxRuntime.jsx("span", {
@@ -15803,8 +16310,8 @@ function TextArea(_ref2) {
   _ref2.schema;
       var value = _ref2.value,
       onChange = _ref2.onChange,
-      rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$5);
-  return jsxRuntime.jsx("textarea", _objectSpread$C({
+      rest = _objectWithoutProperties__default["default"](_ref2, _excluded2$4);
+  return jsxRuntime.jsx("textarea", _objectSpread$B({
     value: value,
     onInput: onChange
   }, rest));
@@ -15820,11 +16327,12 @@ function CheckBox(_ref3) {
       rest = _objectWithoutProperties__default["default"](_ref3, _excluded3$1);
   return jsxRuntime.jsxs("div", {
     className: classes$A.fieldSetItem,
-    children: [jsxRuntime.jsx("input", _objectSpread$C({
+    children: [jsxRuntime.jsx("input", _objectSpread$B({
       type: "checkbox",
       checked: value,
       onClick: onChange,
-      onChange: onChange
+      onChange: onChange,
+      className: classes$A.input
     }, rest)), jsxRuntime.jsx("span", {
       className: classes$A.checkbox
     })]
@@ -15874,16 +16382,16 @@ function FieldSet(_ref5) {
       rest = _objectWithoutProperties__default["default"](_ref5, _excluded4$1);
   return jsxRuntime.jsx("fieldset", {
     onClick: onSelect,
-    className: "radio",
     children: enumSchema(schema, function (title, val) {
       return jsxRuntime.jsx("li", {
         className: classes$A.fieldSetItem,
         children: jsxRuntime.jsxs("label", {
           className: classes$A.fieldSetLabel,
-          children: [jsxRuntime.jsx("input", _objectSpread$C({
+          children: [jsxRuntime.jsx("input", _objectSpread$B({
             type: type,
             defaultChecked: type === 'radio' ? selected(val, checked) : selected(val, value),
-            value: _typeof__default["default"](val) !== 'object' && val
+            value: _typeof__default["default"](val) !== 'object' && val,
+            className: classes$A.input
           }, rest)), type === 'checkbox' && jsxRuntime.jsx("span", {
             className: classes$A.checkbox
           }), type === 'radio' && jsxRuntime.jsx("span", {
@@ -15913,7 +16421,7 @@ function Slider(_ref6) {
       rest = _objectWithoutProperties__default["default"](_ref6, _excluded5$1);
   return jsxRuntime.jsxs("div", {
     className: classes$A.slider,
-    children: [jsxRuntime.jsx("input", _objectSpread$C({
+    children: [jsxRuntime.jsx("input", _objectSpread$B({
       type: "checkbox",
       checked: value,
       onClick: onChange,
@@ -15946,7 +16454,7 @@ function inputCtrl(component, schema, _onChange) {
       type: 'text'
     };
   }
-  return _objectSpread$C({
+  return _objectSpread$B({
     onChange: function onChange(ev) {
       var val = !component.val ? ev : component.val(ev, schema);
       _onChange(val);
@@ -16016,7 +16524,7 @@ function shallowCompare(a, b) {
 }
 var Input = function (_Component) {
   _inherits__default["default"](Input, _Component);
-  var _super = _createSuper$9(Input);
+  var _super = _createSuper$8(Input);
   function Input() {
     _classCallCheck__default["default"](this, Input);
     return _super.apply(this, arguments);
@@ -16042,7 +16550,7 @@ var Input = function (_Component) {
           _this$props.onChange;
           var props = _objectWithoutProperties__default["default"](_this$props, _excluded7);
       var Component = this.component;
-      return jsxRuntime.jsx(Component, _objectSpread$C(_objectSpread$C({}, this.ctrl), props));
+      return jsxRuntime.jsx(Component, _objectSpread$B(_objectSpread$B({}, this.ctrl), props));
     }
   }]);
   return Input;
@@ -16160,18 +16668,26 @@ function greekify(str) {
   });
 }
 function filterLib(lib, filter) {
-  var re = new RegExp(fp.escapeRegExp(greekify(filter)), 'i');
+  var trimmedFilter = filter.trim();
+  var re = new RegExp(fp.escapeRegExp(greekify(trimmedFilter)), 'i');
   return fp.flow(fp.filter(function (item) {
-    return !filter || re.test(greekify(item.struct.name)) || re.test(greekify(item.props.group));
+    return !trimmedFilter || re.test(greekify(item.struct.name)) || re.test(greekify(item.props.group));
   }), fp.reduce(function (res, item) {
     if (!res[item.props.group]) res[item.props.group] = [item];else res[item.props.group].push(item);
     return res;
   }, {}))(lib);
 }
 function filterFGLib(lib, filter) {
-  var re = new RegExp(fp.escapeRegExp(greekify(filter)), 'i');
+  var trimmedFilter = filter.trim();
+  var re = new RegExp(fp.escapeRegExp(greekify(trimmedFilter)), 'i');
+  var searchFunction = function searchFunction(item) {
+    var fields = [item.struct.name, item.props.abbreviation, item.props.name].filter(Boolean);
+    return fields.some(function (field) {
+      return re.test(greekify(field));
+    });
+  };
   return fp.flow(fp.filter(function (item) {
-    return !filter || re.test(greekify(item.struct.name));
+    return !trimmedFilter || searchFunction(item);
   }), fp.reduce(function (res, item) {
     if (!res[item.props.group]) res[item.props.group] = [item];else res[item.props.group].push(item);
     return res;
@@ -16188,18 +16704,18 @@ var getSelectOptionsFromSchema = function getSelectOptionsFromSchema(schema) {
   }, []);
 };
 
-var _excluded$p = ["schema", "result", "customValid"],
-    _excluded2$4 = ["labelPos", "title", "children"],
+var _excluded$o = ["schema", "result", "customValid"],
+    _excluded2$3 = ["labelPos", "title", "children"],
     _excluded3 = ["name", "onChange", "component", "labelPos", "className"],
     _excluded4 = ["dataError"],
     _excluded5 = ["title", "name", "schema"];
-function ownKeys$B(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$B(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$B(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$B(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper$8(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$8(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-function _isNativeReflectConstruct$8() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var Form = function (_Component) {
   _inherits__default["default"](Form, _Component);
-  var _super = _createSuper$8(Form);
+  var _super = _createSuper$7(Form);
   function Form(props) {
     var _this;
     _classCallCheck__default["default"](this, Form);
@@ -16214,7 +16730,7 @@ var Form = function (_Component) {
           valid = _this$schema$serializ.valid,
           errors = _this$schema$serializ.errors;
       var errs = getErrorsObj(errors);
-      var initialState = _objectSpread$B(_objectSpread$B({}, init), {}, {
+      var initialState = _objectSpread$A(_objectSpread$A({}, init), {}, {
         init: true
       });
       onUpdate(initialState, valid, errs);
@@ -16228,7 +16744,7 @@ var Form = function (_Component) {
           schema = _this$props2.schema,
           result = _this$props2.result;
           _this$props2.customValid;
-          var rest = _objectWithoutProperties__default["default"](_this$props2, _excluded$p);
+          var rest = _objectWithoutProperties__default["default"](_this$props2, _excluded$o);
       if (schema.key && schema.key !== prevProps.schema.key) {
         this.schema = propSchema(schema, rest);
         this.schema.serialize(result);
@@ -16298,8 +16814,8 @@ function Label(_ref) {
   var labelPos = _ref.labelPos,
       title = _ref.title,
       children = _ref.children,
-      props = _objectWithoutProperties__default["default"](_ref, _excluded2$4);
-  return jsxRuntime.jsxs("label", _objectSpread$B(_objectSpread$B({}, props), {}, {
+      props = _objectWithoutProperties__default["default"](_ref, _excluded2$3);
+  return jsxRuntime.jsxs("label", _objectSpread$A(_objectSpread$A({}, props), {}, {
     children: [title && labelPos !== 'after' ? jsxRuntime.jsx("span", {
       children: title
     }) : '', children, title && labelPos === 'after' ? jsxRuntime.jsx("span", {
@@ -16332,10 +16848,10 @@ function Field(props) {
       dataError = _stateStore$field.dataError,
       fieldOpts = _objectWithoutProperties__default["default"](_stateStore$field, _excluded4);
   var Component = component;
-  var formField = component ? jsxRuntime.jsx(Component, _objectSpread$B(_objectSpread$B({
+  var formField = component ? jsxRuntime.jsx(Component, _objectSpread$A(_objectSpread$A({
     name: name,
     schema: desc
-  }, fieldOpts), rest)) : jsxRuntime.jsx(Input, _objectSpread$B(_objectSpread$B({
+  }, fieldOpts), rest)) : jsxRuntime.jsx(Input, _objectSpread$A(_objectSpread$A({
     name: name,
     schema: desc
   }, fieldOpts), rest));
@@ -16372,7 +16888,7 @@ var SelectOneOf = function SelectOneOf(props) {
     selectDesc["enum"].push(item);
     selectDesc.enumNames.push(schema[item].title || item);
   });
-  return jsxRuntime.jsx(Field, _objectSpread$B(_objectSpread$B({
+  return jsxRuntime.jsx(Field, _objectSpread$A(_objectSpread$A({
     name: name,
     options: getSelectOptionsFromSchema(selectDesc),
     title: title
@@ -16395,7 +16911,7 @@ function propSchema(schema, _ref2) {
     schema = Object.assign({}, schema);
     schema.properties = Object.keys(customValid).reduce(function (res, prop) {
       ajv.addFormat(customValid[prop].name, customValid[prop]);
-      res[prop] = _objectSpread$B({
+      res[prop] = _objectSpread$A({
         format: prop
       }, res[prop]);
       return res;
@@ -16557,9 +17073,9 @@ var ColorPicker = function ColorPicker(props) {
 
 var styles$a = {"measureInput":"measure-input-module_measureInput__uZQ-j","select":"measure-input-module_select__1ZFmv"};
 
-var _excluded$o = ["schema", "value", "onChange", "name"];
-function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$n = ["schema", "value", "onChange", "name"];
+function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var selectOptions$1 = getSelectOptionsFromSchema({
   "enum": ['cm', 'px', 'pt', 'inch']
 });
@@ -16568,7 +17084,7 @@ var MeasureInput = function MeasureInput(_ref) {
       value = _ref.value,
       onChange = _ref.onChange,
       name = _ref.name,
-      rest = _objectWithoutProperties__default["default"](_ref, _excluded$o);
+      rest = _objectWithoutProperties__default["default"](_ref, _excluded$n);
   var _useState = React.useState('px'),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       measure = _useState2[0],
@@ -16602,7 +17118,7 @@ var MeasureInput = function MeasureInput(_ref) {
     calcValue();
   }, [value, measure, calcValue]);
   var desc = schema || schema.properties[name];
-  return jsxRuntime.jsxs("div", _objectSpread$A(_objectSpread$A({
+  return jsxRuntime.jsxs("div", _objectSpread$z(_objectSpread$z({
     className: styles$a.measureInput
   }, rest), {}, {
     children: [jsxRuntime.jsx("span", {
@@ -16638,14 +17154,14 @@ function convertValue(value, measureFrom, measureTo) {
 
 var classes$x = {"button-common-styles":"buttons-module_button-common-styles__qWDOz","scrollbar":"buttons-module_scrollbar__SpaVV","openButton":"buttons-module_openButton__wErm9"};
 
-var _excluded$n = ["children", "type", "server", "className"];
-function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var _excluded$m = ["children", "type", "server", "className"];
+function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var OpenButton = function (_Component) {
   _inherits__default["default"](OpenButton, _Component);
-  var _super = _createSuper$7(OpenButton);
+  var _super = _createSuper$6(OpenButton);
   function OpenButton(props) {
     var _this;
     _classCallCheck__default["default"](this, OpenButton);
@@ -16685,8 +17201,8 @@ var OpenButton = function (_Component) {
           type = _this$props2.type;
           _this$props2.server;
           var className = _this$props2.className,
-          props = _objectWithoutProperties__default["default"](_this$props2, _excluded$n);
-      return jsxRuntime.jsxs("button", _objectSpread$z(_objectSpread$z({
+          props = _objectWithoutProperties__default["default"](_this$props2, _excluded$m);
+      return jsxRuntime.jsxs("button", _objectSpread$y(_objectSpread$y({
         onClick: function onClick() {
           return _this2.btn.click();
         },
@@ -16708,8 +17224,8 @@ var OpenButton = function (_Component) {
   return OpenButton;
 }(React.Component);
 
-function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SaveButton$1 = function SaveButton(props) {
   var noop = function noop() {
     return null;
@@ -16763,7 +17279,7 @@ var SaveButton$1 = function SaveButton(props) {
       onError(error);
     });
   };
-  return jsxRuntime.jsx("button", _objectSpread$y(_objectSpread$y({
+  return jsxRuntime.jsx("button", _objectSpread$x(_objectSpread$x({
     className: className,
     onClick: function onClick(event) {
       save(event);
@@ -16942,9 +17458,9 @@ var fieldGroups = {
   showLoopIds: 'Options for Debugging'
 };
 
-var _excluded$m = ["initState", "formState", "server", "onOpenFile", "onReset", "appOpts"];
-function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$l = ["initState", "formState", "server", "onOpenFile", "onReset", "appOpts"];
+function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var defaultSettings = getDefaultOptions();
 var HeaderContent$1 = function HeaderContent(_ref) {
   var server = _ref.server,
@@ -16995,7 +17511,7 @@ var SettingsDialog = function SettingsDialog(props) {
       onOpenFile = props.onOpenFile,
       onReset = props.onReset,
       appOpts = props.appOpts,
-      prop = _objectWithoutProperties__default["default"](props, _excluded$m);
+      prop = _objectWithoutProperties__default["default"](props, _excluded$l);
   var _useState = React.useState(new Set()),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       changedGroups = _useState2[0],
@@ -17189,7 +17705,7 @@ var SettingsDialog = function SettingsDialog(props) {
       formState: formState,
       initState: initState
     }),
-    children: jsxRuntime.jsx(Form$1, _objectSpread$x(_objectSpread$x({
+    children: jsxRuntime.jsx(Form$1, _objectSpread$w(_objectSpread$w({
       schema: optionsSchema,
       init: initState
     }, formState), {}, {
@@ -17260,9 +17776,9 @@ function ErrorsCheck(props) {
 
 var style = {"button-common-styles":"Check-module_button-common-styles__WPocW","scrollbar":"Check-module_scrollbar__3jzOc","dialog_body":"Check-module_dialog_body__wHZMM","buttons":"Check-module_buttons__cjuqO","buttonSecondary":"Check-module_buttonSecondary__2482r","buttonPrimary":"Check-module_buttonPrimary__1h5p1","buttonsRight":"Check-module_buttonsRight__L1v9A","wrapper":"Check-module_wrapper__27SOp","checkInfo":"Check-module_checkInfo__Iqq6t","settings":"Check-module_settings__knuQF","warnings":"Check-module_warnings__b4ozd","centeredContainer":"Check-module_centeredContainer__t61r8","warningsContainer":"Check-module_warningsContainer__vSbyK","checkBoxesDisabled":"Check-module_checkBoxesDisabled__EAdRo"};
 
-var _excluded$l = ["formState", "checkState", "onCheck", "onApply", "onCancel"];
-function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var _excluded$k = ["formState", "checkState", "onCheck", "onApply", "onCancel"];
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var checkSchema = {
   title: 'Check',
   type: 'object',
@@ -17320,7 +17836,7 @@ function CheckDialog(props) {
       onCheck = props.onCheck,
       onApply = props.onApply,
       onCancel = props.onCancel,
-      restProps = _objectWithoutProperties__default["default"](props, _excluded$l);
+      restProps = _objectWithoutProperties__default["default"](props, _excluded$k);
   var _formState$result = formState.result,
       result = _formState$result === void 0 ? checkState : _formState$result,
       moleculeErrors = formState.moleculeErrors;
@@ -17356,7 +17872,7 @@ function CheckDialog(props) {
   return jsxRuntime.jsx(Dialog, {
     title: "Structure Check",
     className: style.dialog_body,
-    params: _objectSpread$w(_objectSpread$w({}, restProps), {}, {
+    params: _objectSpread$v(_objectSpread$v({}, restProps), {}, {
       onCancel: onCancel
     }),
     buttons: [],
@@ -17368,7 +17884,7 @@ function CheckDialog(props) {
       isCheckedWithNewSettings: isCheckedWithNewSettings
     }),
     withDivider: true,
-    children: jsxRuntime.jsx(Form$1, _objectSpread$w(_objectSpread$w({
+    children: jsxRuntime.jsx(Form$1, _objectSpread$v(_objectSpread$v({
       schema: checkSchema,
       init: checkState
     }, formState), {}, {
@@ -17494,9 +18010,9 @@ function FrozenInput(_ref) {
 
 var classes$u = {"button-common-styles":"Analyse-module_button-common-styles__8No07","scrollbar":"Analyse-module_scrollbar__UAaIN","analyse":"Analyse-module_analyse__MR-Tu","inputWrapper":"Analyse-module_inputWrapper__uR995","contentWrapper":"Analyse-module_contentWrapper__B4WCi","selectWrapper":"Analyse-module_selectWrapper__xEkKL","select":"Analyse-module_select__c6hFt"};
 
-var _excluded$k = ["values", "round", "loading", "onAnalyse", "onChangeRound"];
-function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var _excluded$j = ["values", "round", "loading", "onAnalyse", "onChangeRound"];
+function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
+function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function roundOff(value, round) {
   if (typeof value === 'number') return value.toFixed(round);
   return value.replace(/[0-9]*\.[0-9]+/g, function (str) {
@@ -17508,7 +18024,7 @@ var selectOptions = getSelectOptionsFromSchema({
 });
 var AnalyseDialog = function (_Component) {
   _inherits__default["default"](AnalyseDialog, _Component);
-  var _super = _createSuper$6(AnalyseDialog);
+  var _super = _createSuper$5(AnalyseDialog);
   function AnalyseDialog() {
     _classCallCheck__default["default"](this, AnalyseDialog);
     return _super.apply(this, arguments);
@@ -17527,7 +18043,7 @@ var AnalyseDialog = function (_Component) {
           loading = _this$props.loading;
           _this$props.onAnalyse;
           var onChangeRound = _this$props.onChangeRound,
-          props = _objectWithoutProperties__default["default"](_this$props, _excluded$k);
+          props = _objectWithoutProperties__default["default"](_this$props, _excluded$j);
       return jsxRuntime.jsx(Dialog, {
         title: "Calculated Values",
         className: classes$u.analyse,
@@ -17622,80 +18138,6 @@ var mapDispatchToProps$9 = function mapDispatchToProps(dispatch) {
 };
 var Analyse = reactRedux.connect(mapStateToProps$c, mapDispatchToProps$9)(AnalyseDialog);
 
-var _excluded$j = ["struct", "Tag"];
-function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf__default["default"](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default["default"](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default["default"](this, result); }; }
-function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function renderStruct(el, struct) {
-  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  if (el) {
-    if (struct) {
-      struct.initHalfBonds();
-      struct.initNeighbors();
-      struct.setImplicitHydrogen();
-      struct.markFragments();
-      var rnd = new ketcherCore.Render(el, _objectSpread$v({
-        autoScale: true
-      }, options));
-      rnd.setMolecule(struct);
-      rnd.update();
-    }
-  }
-}
-var StructRender = function (_Component) {
-  _inherits__default["default"](StructRender, _Component);
-  var _super = _createSuper$5(StructRender);
-  function StructRender(props) {
-    var _this;
-    _classCallCheck__default["default"](this, StructRender);
-    _this = _super.call(this, props);
-    _this.tagRef = React.createRef();
-    return _this;
-  }
-  _createClass__default["default"](StructRender, [{
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate() {
-      return false;
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var el = this.tagRef.current;
-      var _this$props = this.props,
-          struct = _this$props.struct,
-          options = _this$props.options;
-      var parsedStruct;
-      if (!(struct instanceof ketcherCore.Struct)) {
-        try {
-          var molSerialzer = new ketcherCore.MolSerializer();
-          parsedStruct = molSerialzer.deserialize(struct);
-        } catch (e) {
-          parsedStruct = null;
-        }
-      } else {
-        parsedStruct = struct;
-      }
-      renderStruct(el, parsedStruct, options);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-          struct = _this$props2.struct,
-          _this$props2$Tag = _this$props2.Tag,
-          Tag = _this$props2$Tag === void 0 ? 'div' : _this$props2$Tag,
-          props = _objectWithoutProperties__default["default"](_this$props2, _excluded$j);
-      return jsxRuntime.jsx(Tag, _objectSpread$v(_objectSpread$v({
-        ref: this.tagRef
-      }, props), {}, {
-        children: struct ? null : 'No molecule'
-      }));
-    }
-  }]);
-  return StructRender;
-}(React.Component);
-
 var classes$t = {"button-common-styles":"Recognize-module_button-common-styles__B04E6","scrollbar":"Recognize-module_scrollbar__rohcP","recognize":"Recognize-module_recognize__66jG2","footerContent":"Recognize-module_footerContent__0MAC7","imagoVersion":"Recognize-module_imagoVersion__nBIj6","openButton":"Recognize-module_openButton__H-j5I","imagesContainer":"Recognize-module_imagesContainer__rXWWk","topBody":"Recognize-module_topBody__ZCCjN","output":"Recognize-module_output__WgRnP","picture":"Recognize-module_picture__x2Y7S","filename":"Recognize-module_filename__-1HIU","messageContainer":"Recognize-module_messageContainer__tMvyb","primaryButton":"Recognize-module_primaryButton__rzm03","secondaryButton":"Recognize-module_secondaryButton__H1Q28","struct":"Recognize-module_struct__W55TL"};
 
 var DialogActionButton = function DialogActionButton(_ref) {
@@ -17715,7 +18157,7 @@ var DialogActionButton = function DialogActionButton(_ref) {
 };
 
 var _excluded$i = ["file", "structStr", "fragment", "version", "imagoVersions", "onOk"],
-    _excluded2$3 = ["onRecognize", "isFragment", "onImage", "onChangeImago"];
+    _excluded2$2 = ["onRecognize", "isFragment", "onImage", "onChangeImago"];
 function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function isImage(file) {
@@ -17766,7 +18208,7 @@ function RecognizeDialog(prop) {
       partProps.isFragment;
       var onImage = partProps.onImage,
       onChangeImago = partProps.onChangeImago,
-      props = _objectWithoutProperties__default["default"](partProps, _excluded2$3);
+      props = _objectWithoutProperties__default["default"](partProps, _excluded2$2);
   var _useState = React.useState(true),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
       canPreviewImage = _useState2[0],
@@ -17985,7 +18427,7 @@ var MiewDialog = function MiewDialog(_ref) {
   var onMiewInit = React.useCallback(function (miew) {
     miewRef.current = miew;
     var factory = new ketcherCore.FormatterFactory(server);
-    var service = factory.create('cml');
+    var service = factory.create(ketcherCore.SupportedFormat.cml);
     service.getStructureFromStructAsync(struct).then(function (res) {
       return miew.load(res, {
         sourceType: 'immediate',
@@ -20350,51 +20792,27 @@ var Rgroup = reactRedux.connect(function (store) {
 
 var classes$9 = {"button-common-styles":"sgroup-module_button-common-styles__MAeEP","scrollbar":"sgroup-module_scrollbar__T3fpf","sgroup":"sgroup-module_sgroup__Kh2Xj"};
 
-var _excluded$5 = ["title", "name", "schema"],
-    _excluded2$2 = ["context", "fieldName", "fieldValue", "type", "radiobuttons", "formState"];
+var _excluded$5 = ["context", "fieldName", "fieldValue", "type", "radiobuttons", "formState"];
 function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function SelectInput(_ref) {
-  var title = _ref.title,
-      name = _ref.name,
-      schema = _ref.schema,
+function SData(_ref) {
+  var context = _ref.context,
+      fieldName = _ref.fieldName,
+      fieldValue = _ref.fieldValue,
+      type = _ref.type,
+      radiobuttons = _ref.radiobuttons,
+      formState = _ref.formState,
       prop = _objectWithoutProperties__default["default"](_ref, _excluded$5);
-  var inputSelect = Object.keys(schema).reduce(function (acc, item) {
-    acc["enum"].push(item);
-    acc.enumNames.push(schema[item].title || item);
-    return acc;
-  }, {
-    title: title,
-    type: 'string',
-    "default": '',
-    minLength: 1,
-    "enum": [],
-    enumNames: []
-  });
-  return jsxRuntime.jsx(Field, _objectSpread$8({
-    name: name,
-    options: getSelectOptionsFromSchema(inputSelect),
-    component: Select
-  }, prop));
-}
-function SData(_ref2) {
-  var context = _ref2.context,
-      fieldName = _ref2.fieldName,
-      fieldValue = _ref2.fieldValue,
-      type = _ref2.type,
-      radiobuttons = _ref2.radiobuttons,
-      formState = _ref2.formState,
-      prop = _objectWithoutProperties__default["default"](_ref2, _excluded2$2);
   var _result = formState.result,
       _valid = formState.valid;
+  var formSchema = sdataCustomSchema;
   var init = {
-    context: context,
-    fieldName: fieldName || getSdataDefault(context),
+    context: context || getSdataDefault(formSchema, 'context'),
+    fieldName: fieldName || getSdataDefault(formSchema, 'fieldName'),
     type: type,
-    radiobuttons: radiobuttons
+    radiobuttons: radiobuttons || getSdataDefault(formSchema, 'radiobuttons')
   };
-  init.fieldValue = fieldValue || getSdataDefault(context, init.fieldName);
-  var formSchema = sdataSchema[_result.context][_result.fieldName] || sdataCustomSchema;
+  init.fieldValue = fieldValue || getSdataDefault(formSchema, 'fieldValue');
   var serialize = {
     context: _result.context.trim(),
     fieldName: _result.fieldName.trim(),
@@ -20422,20 +20840,19 @@ function SData(_ref2) {
       init: init
     }, formState), {}, {
       children: jsxRuntime.jsxs("fieldset", {
-        children: [jsxRuntime.jsx(SelectOneOf, {
-          title: "Context",
+        children: [jsxRuntime.jsx(Field, {
           name: "context",
-          schema: sdataSchema
-        }), jsxRuntime.jsx(SelectInput, {
-          title: "Field name",
+          options: getSelectOptionsFromSchema(formSchema.properties.context),
+          component: Select
+        }), jsxRuntime.jsx(Field, {
           name: "fieldName",
-          schema: sdataSchema[_result.context]
-        }), content$1(formSchema, _result.context, _result.fieldName, radiobuttons)]
+          placeholder: "Enter name"
+        }), content$1(formSchema, _result.context, _result.fieldName, _result.fieldValue, radiobuttons)]
       })
     }))
   });
 }
-var content$1 = function content(schema, context, fieldName, checked) {
+var content$1 = function content(schema, context, fieldName, fieldValue, checked) {
   return Object.keys(schema.properties).filter(function (prop) {
     return prop !== 'type' && prop !== 'context' && prop !== 'fieldName';
   }).map(function (prop) {
@@ -20444,10 +20861,9 @@ var content$1 = function content(schema, context, fieldName, checked) {
       checked: checked,
       type: "radio",
       labelPos: false
-    }, "".concat(context, "-").concat(fieldName, "-").concat(prop, "-radio")) : prop === 'fieldValue' && schema.properties.fieldValue["enum"] ? jsxRuntime.jsx(Field, {
-      options: getSelectOptionsFromSchema(schema.properties.fieldValue),
+    }, "".concat(context, "-").concat(fieldName, "-").concat(prop, "-radio")) : prop === 'fieldValue' ? jsxRuntime.jsx(Field, {
       name: prop,
-      component: Select
+      placeholder: "Enter value"
     }, "".concat(context, "-").concat(fieldName, "-").concat(prop, "-select")) : jsxRuntime.jsx(Field, {
       name: prop,
       type: "textarea"
@@ -20756,7 +21172,22 @@ function _objectSpread$5(target) { for (var i = 1; i < arguments.length; i++) {
 var getSettingsSelector = function getSettingsSelector(state) {
   return state.options.settings;
 };
+var isSaltOrSolventTemplate = function isSaltOrSolventTemplate(template) {
+  return template.props.group === 'Salts and Solvents';
+};
+var isFunctionalGroupTemplate = function isFunctionalGroupTemplate(template) {
+  return template.props.group === 'Functional Groups';
+};
+function getTemplateTitle(template, index) {
+  if (isSaltOrSolventTemplate(template)) {
+    return template.props.name;
+  }
+  return template.struct.name || "".concat(template.props.group, " template ").concat(index + 1);
+}
 function tmplName(tmpl, i) {
+  if (isSaltOrSolventTemplate(tmpl)) {
+    return tmpl.props.abbreviation;
+  }
   return tmpl.struct.name || "".concat(tmpl.props.group, " template ").concat(i + 1);
 }
 var RenderTmpl = function RenderTmpl(_ref) {
@@ -20764,7 +21195,7 @@ var RenderTmpl = function RenderTmpl(_ref) {
       options = _ref.options,
       props = _objectWithoutProperties__default["default"](_ref, _excluded$2);
   return jsxRuntime.jsx(StructRender, _objectSpread$5({
-    struct: tmpl.modifiedStruct || tmpl.struct,
+    struct: tmpl.struct,
     options: _objectSpread$5(_objectSpread$5({}, options), {}, {
       autoScaleMargin: 15
     })
@@ -20776,7 +21207,6 @@ var TemplateTable = function TemplateTable(props) {
       onSelect = props.onSelect,
       onDelete = props.onDelete,
       onAttach = props.onAttach,
-      _onDoubleClick = props.onDoubleClick,
       _props$titleRows = props.titleRows,
       titleRows = _props$titleRows === void 0 ? 2 : _props$titleRows;
   var options = reactRedux.useSelector(function (state) {
@@ -20787,13 +21217,10 @@ var TemplateTable = function TemplateTable(props) {
     children: templates.map(function (tmpl, i) {
       return jsxRuntime.jsxs("div", {
         className: tmpl.struct !== (selected === null || selected === void 0 ? void 0 : selected.struct) ? classes$7.td : "".concat(classes$7.td, " ").concat(classes$7.selected),
-        title: greekify(tmplName(tmpl, i)),
+        title: greekify(getTemplateTitle(tmpl, i)),
         onClick: function onClick() {
           return onSelect(tmpl);
         },
-        onDoubleClick: function onDoubleClick() {
-          return _onDoubleClick(tmpl);
-        },
         children: [jsxRuntime.jsx(RenderTmpl, {
           tmpl: tmpl,
           options: options,
@@ -20809,7 +21236,7 @@ var TemplateTable = function TemplateTable(props) {
           children: jsxRuntime.jsx(Icon, {
             name: "delete"
           })
-        }), tmpl.props.group !== 'Functional Groups' && jsxRuntime.jsx("button", {
+        }), !isFunctionalGroupTemplate(tmpl) && !isSaltOrSolventTemplate(tmpl) && jsxRuntime.jsx("button", {
           className: "".concat(classes$7.button, " ").concat(classes$7.editButton),
           onClick: function onClick() {
             return onAttach(tmpl);
@@ -20823,8 +21250,8 @@ var TemplateTable = function TemplateTable(props) {
   });
 };
 
-var functionalGroupsSelector = function functionalGroupsSelector(state) {
-  return state.functionalGroups.lib;
+var saltsAndSolventsSelector = function saltsAndSolventsSelector(state) {
+  return state.saltsAndSolvents.lib;
 };
 
 var classes$6 = {"emptySearch":"emptySearchResult-module_emptySearch__aUSew"};
@@ -20842,7 +21269,7 @@ var EmptySearchResult = function EmptySearchResult(_ref) {
 };
 
 var _excluded$1 = ["children", "value", "index"],
-    _excluded2 = ["filter", "onFilter", "onChangeGroup", "mode", "initialTab", "functionalGroups", "lib"];
+    _excluded2 = ["filter", "onFilter", "onChangeGroup", "mode", "initialTab", "functionalGroups", "lib", "saltsAndSolvents"];
 function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function TabPanel(props) {
@@ -20870,6 +21297,7 @@ var TemplateTabs;
 (function (TemplateTabs) {
   TemplateTabs[TemplateTabs["TemplateLibrary"] = 0] = "TemplateLibrary";
   TemplateTabs[TemplateTabs["FunctionalGroupLibrary"] = 1] = "FunctionalGroupLibrary";
+  TemplateTabs[TemplateTabs["SaltsAndSolvents"] = 2] = "SaltsAndSolvents";
 })(TemplateTabs || (TemplateTabs = {}));
 var filterLibSelector = reselect.createSelector(function (props) {
   return props.lib;
@@ -20877,6 +21305,7 @@ var filterLibSelector = reselect.createSelector(function (props) {
   return props.filter;
 }, filterLib);
 var FUNCTIONAL_GROUPS = 'Functional Groups';
+var SALTS_AND_SOLVENTS = 'Salts and Solvents';
 var HeaderContent = function HeaderContent() {
   return jsxRuntime.jsxs("div", {
     className: classes$8.dialogHeader,
@@ -20890,26 +21319,37 @@ var HeaderContent = function HeaderContent() {
 var FooterContent = function FooterContent(_ref) {
   var data = _ref.data,
       tab = _ref.tab;
-  return jsxRuntime.jsx("div", {
+  var clickToAddToCanvas = jsxRuntime.jsx("span", {
+    children: "Click to add to canvas"
+  });
+  if (tab === TemplateTabs.SaltsAndSolvents) {
+    return clickToAddToCanvas;
+  }
+  return jsxRuntime.jsxs("div", {
     style: {
-      flexGrow: 1
+      flexGrow: 1,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
     },
-    children: jsxRuntime.jsx(SaveButton$1, {
+    children: [jsxRuntime.jsx(SaveButton$1, {
       data: data,
       className: classes$8.saveButton,
       filename: tab === TemplateTabs.TemplateLibrary ? 'ketcher-tmpls.sdf' : 'ketcher-fg-tmpls.sdf',
-      children: tab === TemplateTabs.TemplateLibrary ? 'Save template library to SDF' : 'Save functional groups to SDF'
-    }, "save-to-SDF")
+      children: "Save to SDF"
+    }, "save-to-SDF"), clickToAddToCanvas]
   });
 };
 var TemplateDialog = function TemplateDialog(props) {
+  var _serializerMapper;
   var filter = props.filter,
       onFilter = props.onFilter,
-      onChangeGroup = props.onChangeGroup,
-      mode = props.mode,
-      initialTab = props.initialTab,
+      onChangeGroup = props.onChangeGroup;
+      props.mode;
+      var initialTab = props.initialTab,
       functionalGroups = props.functionalGroups,
       templateLib = props.lib,
+      saltsAndSolvents = props.saltsAndSolvents,
       rest = _objectWithoutProperties__default["default"](props, _excluded2);
   var _useState = React.useState(initialTab !== null && initialTab !== void 0 ? initialTab : TemplateTabs.TemplateLibrary),
       _useState2 = _slicedToArray__default["default"](_useState, 2),
@@ -20923,10 +21363,17 @@ var TemplateDialog = function TemplateDialog(props) {
       _useState6 = _slicedToArray__default["default"](_useState5, 2),
       filteredFG = _useState6[0],
       setFilteredFG = _useState6[1];
+  var _useState7 = React.useState(saltsAndSolvents[SALTS_AND_SOLVENTS]),
+      _useState8 = _slicedToArray__default["default"](_useState7, 2),
+      filteredSaltsAndSolvents = _useState8[0],
+      setFilteredSaltsAndSolvents = _useState8[1];
   var filteredTemplateLib = filterLibSelector(props);
   React.useEffect(function () {
     setFilteredFG(filterFGLib(functionalGroups, filter)[FUNCTIONAL_GROUPS]);
   }, [functionalGroups, filter]);
+  React.useEffect(function () {
+    setFilteredSaltsAndSolvents(filterFGLib(saltsAndSolvents, filter)[SALTS_AND_SOLVENTS]);
+  }, [saltsAndSolvents, filter]);
   var handleTabChange = function handleTabChange(_, tab) {
     setTab(tab);
     props.onSelect(null);
@@ -20938,21 +21385,12 @@ var TemplateDialog = function TemplateDialog(props) {
       }));
     };
   };
-  var _result = function result() {
-    var tmpl = props.selected;
-    return tmpl ? {
-      struct: tmpl.struct,
-      aid: parseInt(String(tmpl.props.atomid)) || null,
-      bid: parseInt(String(tmpl.props.bondid)) || null,
-      mode: mode
-    } : null;
-  };
   var sdfSerializer = new ketcherCore.SdfSerializer();
-  var data = tab === TemplateTabs.TemplateLibrary ? sdfSerializer.serialize(templateLib) : sdfSerializer.serialize(functionalGroups);
+  var serializerMapper = (_serializerMapper = {}, _defineProperty__default["default"](_serializerMapper, TemplateTabs.TemplateLibrary, templateLib), _defineProperty__default["default"](_serializerMapper, TemplateTabs.FunctionalGroupLibrary, functionalGroups), _defineProperty__default["default"](_serializerMapper, TemplateTabs.SaltsAndSolvents, saltsAndSolvents), _serializerMapper);
+  var data = sdfSerializer.serialize(serializerMapper[tab]);
   var select = function select(tmpl) {
-    var activateImmediately = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     onChangeGroup(tmpl.props.group);
-    if (activateImmediately) props.onOk(_result());else props.onSelect(tmpl);
+    props.onSelect(tmpl);
   };
   return jsxRuntime.jsxs(Dialog, {
     headerContent: jsxRuntime.jsx(HeaderContent, {}),
@@ -20962,13 +21400,7 @@ var TemplateDialog = function TemplateDialog(props) {
     }),
     className: "".concat(classes$8.dialog_body),
     params: fp.omit(['group'], rest),
-    result: function result() {
-      return _result();
-    },
-    buttons: ['OK'],
-    buttonsNameMap: {
-      OK: 'Add to canvas'
-    },
+    buttons: [],
     needMargin: false,
     children: [jsxRuntime.jsxs("div", {
       className: classes$8.inputContainer,
@@ -20979,7 +21411,8 @@ var TemplateDialog = function TemplateDialog(props) {
         onChange: function onChange(value) {
           return onFilter(value);
         },
-        placeholder: "Search by elements..."
+        placeholder: "Search by elements...",
+        isFocused: true
       }), jsxRuntime.jsx(Icon, {
         name: "search",
         className: classes$8.searchIcon
@@ -20992,7 +21425,9 @@ var TemplateDialog = function TemplateDialog(props) {
         label: "Template Library"
       }, a11yProps(TemplateTabs.TemplateLibrary))), jsxRuntime.jsx(Tab__default["default"], _objectSpread$4({
         label: "Functional Groups"
-      }, a11yProps(TemplateTabs.FunctionalGroupLibrary)))]
+      }, a11yProps(TemplateTabs.FunctionalGroupLibrary))), jsxRuntime.jsx(Tab__default["default"], _objectSpread$4({
+        label: "Salts and Solvents"
+      }, a11yProps(TemplateTabs.SaltsAndSolvents)))]
     }), jsxRuntime.jsxs("div", {
       className: classes$8.tabsContent,
       children: [jsxRuntime.jsx(TabPanel, {
@@ -21021,9 +21456,6 @@ var TemplateDialog = function TemplateDialog(props) {
                   onSelect: function onSelect(templ) {
                     return select(templ);
                   },
-                  onDoubleClick: function onDoubleClick(templ) {
-                    return select(templ, true);
-                  },
                   selected: props.selected,
                   onDelete: props.onDelete,
                   onAttach: props.onAttach
@@ -21044,9 +21476,6 @@ var TemplateDialog = function TemplateDialog(props) {
           className: classes$8.resultsContainer,
           children: jsxRuntime.jsx(TemplateTable, {
             titleRows: 1,
-            onDoubleClick: function onDoubleClick(templ) {
-              return select(templ, true);
-            },
             templates: filteredFG,
             onSelect: function onSelect(templ) {
               return select(templ);
@@ -21059,6 +21488,25 @@ var TemplateDialog = function TemplateDialog(props) {
             textInfo: "No items found"
           })
         })
+      }), jsxRuntime.jsx(TabPanel, {
+        value: tab,
+        index: TemplateTabs.SaltsAndSolvents,
+        children: filteredSaltsAndSolvents !== null && filteredSaltsAndSolvents !== void 0 && filteredSaltsAndSolvents.length ? jsxRuntime.jsx("div", {
+          className: classes$8.resultsContainer,
+          children: jsxRuntime.jsx(TemplateTable, {
+            titleRows: 1,
+            templates: filteredSaltsAndSolvents,
+            onSelect: function onSelect(templ) {
+              return select(templ);
+            },
+            selected: props.selected
+          })
+        }) : jsxRuntime.jsx("div", {
+          className: classes$8.resultsContainer,
+          children: jsxRuntime.jsx(EmptySearchResult, {
+            textInfo: "No items found"
+          })
+        })
       })]
     })]
   });
@@ -21067,13 +21515,8 @@ var TemplatesDialog = reactRedux.connect(function (store) {
   var _store$modal, _store$modal$prop;
   return _objectSpread$4(_objectSpread$4({}, fp.omit(['attach'], store.templates)), {}, {
     initialTab: (_store$modal = store.modal) === null || _store$modal === void 0 ? void 0 : (_store$modal$prop = _store$modal.prop) === null || _store$modal$prop === void 0 ? void 0 : _store$modal$prop.tab,
-    functionalGroups: functionalGroupsSelector(store).map(function (template) {
-      var struct = template.struct.clone();
-      struct.sgroups["delete"](0);
-      return _objectSpread$4(_objectSpread$4({}, template), {}, {
-        modifiedStruct: struct
-      });
-    })
+    functionalGroups: functionalGroupsSelector(store),
+    saltsAndSolvents: saltsAndSolventsSelector(store)
   });
 }, function (dispatch, props) {
   return {
@@ -21081,7 +21524,12 @@ var TemplatesDialog = reactRedux.connect(function (store) {
       return dispatch(changeFilter(filter));
     },
     onSelect: function onSelect(tmpl) {
-      return dispatch(selectTmpl(tmpl));
+      dispatch(selectTmpl(tmpl));
+      dispatch(onAction({
+        tool: 'template',
+        opts: tmpl
+      }));
+      props.onOk(tmpl);
     },
     onChangeGroup: function onChangeGroup(group) {
       return dispatch(changeGroup(group));
@@ -21091,13 +21539,6 @@ var TemplatesDialog = reactRedux.connect(function (store) {
     },
     onDelete: function onDelete(tmpl) {
       return dispatch(deleteTmpl(tmpl));
-    },
-    onOk: function onOk(res) {
-      dispatch(onAction({
-        tool: 'template',
-        opts: res
-      }));
-      props.onOk(res);
     }
   };
 })(TemplateDialog);
@@ -21461,10 +21902,10 @@ function Modal(props) {
   var Component = modals[modal.name];
   if (!Component) throw new Error("There is no modal window named ".concat(modal.name));
   return jsxRuntime.jsx("div", {
-    className: clsx__default["default"](classes$E.modalOverlay, selectClasses.selectContainer),
+    className: clsx__default["default"](classes$F.modalOverlay, selectClasses.selectContainer),
     ref: containerRef,
     children: jsxRuntime.jsx(Component, _objectSpread$3({
-      className: clsx__default["default"](_defineProperty__default["default"]({}, classes$E.smallScreen, height && height <= mediaSizes$1.smallHeight || width && width <= mediaSizes$1.smallWidth))
+      className: clsx__default["default"](_defineProperty__default["default"]({}, classes$F.smallScreen, height && height <= mediaSizes$1.smallHeight || width && width <= mediaSizes$1.smallWidth))
     }, rest))
   });
 }
@@ -21673,6 +22114,24 @@ function initEditor(dispatch, getState) {
     },
     onConfirm: function onConfirm() {
       return openDialog(dispatch, 'confirm');
+    },
+    onShowInfo: function onShowInfo(payload) {
+      if (payload) {
+        var groupStruct = payload.groupStruct,
+            event = payload.event,
+            sGroup = payload.sGroup;
+        highlightFG(dispatch, {
+          groupStruct: groupStruct,
+          event: event,
+          sGroup: sGroup
+        });
+      } else {
+        highlightFG(dispatch, {
+          groupStruct: null,
+          event: null,
+          sGroup: null
+        });
+      }
     }
   };
 }
@@ -21706,6 +22165,8 @@ var App = function App(props) {
   React.useEffect(function () {
     checkServer();
     dispatch(initFGTemplates(staticResourcesUrl));
+    dispatch(initSaltsAndSolventsTemplates(staticResourcesUrl));
+    window.scrollTo(0, 0);
   }, []);
   return jsxRuntime.jsx(material.ThemeProvider, {
     theme: muiTheme,
@@ -21814,8 +22275,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.6.3" ,
-                    buildDate: "2022-11-29T12:22:11" ,
+                    version: "2.7.0-rc.2" ,
+                    buildDate: "2022-12-15T15:05:13" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });