ketcher-react 2.9.0-rc.7 → 2.10.0-rc.1

package/dist/index.js

@@ -39,8 +39,8 @@ var _typeof = require('@babel/runtime/helpers/typeof');
 var Ajv = require('ajv');
 var fp = require('lodash/fp');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var reactDeviceDetect = require('react-device-detect');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var ReactDOM = require('react-dom');
 var reactRedux = require('react-redux');
 var redux = require('redux');
@@ -328,7 +328,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; } }
@@ -402,7 +402,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
         ,
@@ -596,8 +596,8 @@ var render = {
   },
   showHydrogenLabels: {
     title: 'Show hydrogen labels',
-    "enum": ['off', 'Hetero', 'Terminal', 'Terminal and Hetero', 'on'],
-    "default": 'on'
+    "enum": Object.values(ketcherCore.ShowHydrogenLabels),
+    "default": ketcherCore.ShowHydrogenLabels.TerminalAndHetero
   },
   aromaticCircle: {
     title: 'Aromatic Bonds as circle',
@@ -1494,6 +1494,11 @@ var atom = {
       enumNames: ['', 'Monoradical', 'Diradical (singlet)', 'Diradical (triplet)'],
       "default": 0
     },
+    cip: {
+      title: 'CIP',
+      type: 'string',
+      "enum": ['R', 'S', 'r', 's']
+    },
     ringBondCount: {
       title: 'Ring bond count',
       "enum": [0, -2, -1, 2, 3, 4],
@@ -1580,8 +1585,8 @@ var bond = {
   properties: {
     type: {
       title: 'Type',
-      "enum": ['single', 'up', 'down', 'updown', 'double', 'crossed', 'triple', 'aromatic', 'any', 'hydrogen', 'singledouble', 'singlearomatic', 'doublearomatic', 'dative'],
-      enumNames: ['Single', 'Single Up', 'Single Down', 'Single Up/Down', 'Double', 'Double Cis/Trans', 'Triple', 'Aromatic', 'Any', 'Hydrogen', 'Single/Double', 'Single/Aromatic', 'Double/Aromatic', 'Dative'],
+      "enum": ['', 'single', 'up', 'down', 'updown', 'double', 'crossed', 'triple', 'aromatic', 'any', 'hydrogen', 'singledouble', 'singlearomatic', 'doublearomatic', 'dative'],
+      enumNames: ['', 'Single', 'Single Up', 'Single Down', 'Single Up/Down', 'Double', 'Double Cis/Trans', 'Triple', 'Aromatic', 'Any', 'Hydrogen', 'Single/Double', 'Single/Aromatic', 'Double/Aromatic', 'Dative'],
       "default": 'single'
     },
     topology: {
@@ -1595,6 +1600,11 @@ var bond = {
       "enum": [0, -1, 1, 2, 4, 8, 12],
       enumNames: ['Unmarked', 'Not center', 'Center', 'No change', 'Made/broken', 'Order changes', 'Made/broken and changes'],
       "default": 0
+    },
+    cip: {
+      title: 'CIP',
+      type: 'string',
+      "enum": ['E', 'Z', 'M', 'P']
     }
   }
 };
@@ -1875,7 +1885,7 @@ function fromBondType(type, stereo) {
   for (var caption in bondCaptionMap) {
     if (bondCaptionMap[caption].type === type && bondCaptionMap[caption].stereo === stereo) return caption;
   }
-  throw Error('No such bond caption');
+  return '';
 }
 var bondCaptionMap = {
   single: {
@@ -1998,74 +2008,54 @@ function isFlipDisabled(editor) {
       bonds = _selection$bonds === void 0 ? [] : _selection$bonds,
       _selection$atoms = selection.atoms,
       atoms = _selection$atoms === void 0 ? [] : _selection$atoms;
-  var getBondIdsForAtom = function getBondIdsForAtom(atomId) {
+  var getBondIdsForAttachmentAtoms = function getBondIdsForAttachmentAtoms() {
     var result = [];
-    var _iterator = _createForOfIteratorHelper$e(restruct.bonds.entries()),
+    var _iterator = _createForOfIteratorHelper$e(atoms),
         _step;
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _step$value = _slicedToArray__default["default"](_step.value, 2),
-            bondId = _step$value[0],
-            bond = _step$value[1];
-        if (bond.b.begin === atomId || bond.b.end === atomId) {
-          result.push(bondId);
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-    return result;
-  };
-  var getBondIdsForAttachmentAtoms = function getBondIdsForAttachmentAtoms() {
-    var result = [];
-    var _iterator2 = _createForOfIteratorHelper$e(atoms),
-        _step2;
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var atomId = _step2.value;
-        var atomBondIds = getBondIdsForAtom(atomId);
-        var _iterator3 = _createForOfIteratorHelper$e(atomBondIds),
-            _step3;
+        var atomId = _step.value;
+        var atomBondIds = ketcherCore.Atom.getConnectedBondIds(restruct.molecule, atomId);
+        var _iterator2 = _createForOfIteratorHelper$e(atomBondIds),
+            _step2;
         try {
-          for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-            var atomBondId = _step3.value;
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var atomBondId = _step2.value;
             var bond = restruct.bonds.get(atomBondId);
             if (bond && ketcherCore.isAttachmentBond(bond.b, selection)) {
               result.push(atomBondId);
             }
           }
         } catch (err) {
-          _iterator3.e(err);
+          _iterator2.e(err);
         } finally {
-          _iterator3.f();
+          _iterator2.f();
         }
       }
     } catch (err) {
-      _iterator2.e(err);
+      _iterator.e(err);
     } finally {
-      _iterator2.f();
+      _iterator.f();
     }
     return result;
   };
   var getAmountOfAttachmentBonds = function getAmountOfAttachmentBonds() {
     var amountOfAttachmentBonds = 0;
     var totalBondIds = new Set([].concat(_toConsumableArray__default["default"](bonds), _toConsumableArray__default["default"](getBondIdsForAttachmentAtoms())));
-    var _iterator4 = _createForOfIteratorHelper$e(totalBondIds),
-        _step4;
+    var _iterator3 = _createForOfIteratorHelper$e(totalBondIds),
+        _step3;
     try {
-      for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-        var bondId = _step4.value;
+      for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+        var bondId = _step3.value;
         var bond = restruct.bonds.get(bondId);
         if (bond && ketcherCore.isAttachmentBond(bond.b, selection)) {
           amountOfAttachmentBonds++;
         }
       }
     } catch (err) {
-      _iterator4.e(err);
+      _iterator3.e(err);
     } finally {
-      _iterator4.f();
+      _iterator3.f();
     }
     return amountOfAttachmentBonds;
   };
@@ -3022,7 +3012,7 @@ var templates = templates$1.reduce(function (res, struct, i) {
 var zoomList = [0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.3, 1.4, 1.5, 1.7, 2, 2.5, 3, 3.5, 4];
 var zoom = {
   zoom: {
-    shortcut: ['Mod+Shift+0'],
+    shortcut: ['Mod+0'],
     selected: function selected(editor) {
       return editor.zoom();
     },
@@ -3076,7 +3066,7 @@ var zoom = {
 
 var openHelpLink = function openHelpLink() {
   var _window$open;
-  return (_window$open = window.open("https://github.com/epam/ketcher/blob/".concat("v2.9.0-rc.7\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.10.0-rc.1\n", "/documentation/help.md#ketcher-overview"))) === null || _window$open === void 0 ? void 0 : _window$open.focus();
 };
 var help = {
   help: {
@@ -7055,7 +7045,7 @@ function Icon(_ref) {
   return jsxRuntime.jsx(Component, _objectSpread$17({}, 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 shortcutAliasMap = {
   Escape: 'Esc',
@@ -7094,10 +7084,11 @@ var ActionButton = function ActionButton(props) {
     }
   };
   return jsxRuntime.jsxs("button", {
+    "data-testid": name,
     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", {
@@ -7253,7 +7244,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,
@@ -7268,7 +7259,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, {
@@ -7298,7 +7289,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),
@@ -7417,7 +7408,7 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
       portalClassName = _chooseMultiTool2[1];
   return displayMultiToolItem ? jsxRuntime.jsxs("div", {
     ref: ref,
-    className: classes$K.root,
+    className: classes$L.root,
     children: [jsxRuntime.jsx(ActionButton, _objectSpread$16(_objectSpread$16({}, actionButtonProps), {}, {
       className: className,
       name: currentId,
@@ -7425,12 +7416,12 @@ var ToolbarMultiToolItem = function ToolbarMultiToolItem(props) {
       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,
@@ -7515,7 +7506,7 @@ 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$A = ["className"];
 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; }
@@ -7524,7 +7515,7 @@ 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
   });
 };
@@ -7536,7 +7527,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,
@@ -8113,7 +8104,7 @@ function showFunctionalGroupsTooltip(editor) {
   if (closestCollapsibleStructures) {
     var _editor$struct;
     var sGroup = (_editor$struct = editor.struct()) === null || _editor$struct === void 0 ? void 0 : _editor$struct.sgroups.get(closestCollapsibleStructures.id);
-    if (sGroup && !sGroup.data.expanded) {
+    if (sGroup && !sGroup.data.expanded && sGroup.hovering) {
       var groupName = sGroup.data.name;
       var groupStruct = ketcherCore.FunctionalGroup.getFunctionalGroupByName(groupName);
       infoPanelData = {
@@ -8522,7 +8513,7 @@ 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);
@@ -8641,7 +8632,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();
@@ -8652,7 +8643,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() {
@@ -8664,7 +8655,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"
     })]
   });
@@ -8750,7 +8741,7 @@ var Transform = function Transform(props) {
   });
 };
 
-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$v = ["className"];
 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; }
@@ -8810,7 +8801,7 @@ 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':
@@ -8841,16 +8832,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'
           }, {
@@ -8861,7 +8852,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))
@@ -8869,30 +8860,30 @@ var LeftToolbar = function LeftToolbar(props) {
           id: 'chain'
         }]
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'enhanced-stereo'
         }]
       }), 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'
         }]
       }), jsxRuntime.jsx(Group, {
-        className: classes$H.groupItem,
+        className: classes$I.groupItem,
         items: [{
           id: 'reaction-plus'
         }, {
@@ -8903,17 +8894,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
@@ -8921,7 +8912,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'
           }]
@@ -8962,7 +8953,7 @@ 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$u = ["el", "shortcut", "selected"];
 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; }
@@ -8974,7 +8965,7 @@ function Atom$1(_ref) {
       props = _objectWithoutProperties__default["default"](_ref, _excluded$u);
   return jsxRuntime.jsx("button", _objectSpread$S(_objectSpread$S({
     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
@@ -9353,7 +9344,7 @@ 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$t = ["className"];
 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; }
@@ -9362,7 +9353,7 @@ 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
   });
 };
@@ -9393,12 +9384,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,
@@ -10520,12 +10511,14 @@ var AtomTool = function () {
   }, {
     key: "mousemove",
     value: function mousemove(event) {
-      this.editor.hoverIcon.show();
       var rnd = this.editor.render;
       if (!this.dragCtx || !this.dragCtx.item) {
+        this.editor.hoverIcon.show();
         this.editor.hoverIcon.updatePosition();
         this.editor.hover(this.editor.findItem(event, ['atoms', 'functionalGroups']), null, event);
         return;
+      } else {
+        this.editor.hoverIcon.hide();
       }
       var dragCtx = this.dragCtx;
       var ci = this.editor.findItem(event, ['atoms']);
@@ -10542,7 +10535,7 @@ var AtomTool = function () {
       });
       var newAtomPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp, rnd.page2obj(event), event.ctrlKey);
       if (dragCtx.action) dragCtx.action.perform(rnd.ctab);
-      dragCtx.action = ketcherCore.fromBondAddition(rnd.ctab, _classPrivateFieldGet__default["default"](this, _bondProps), dragCtx.item.id, Object.assign({}, this.atomProps), newAtomPos, newAtomPos)[0];
+      dragCtx.action = ketcherCore.fromBondAddition(rnd.ctab, _classPrivateFieldGet__default["default"](this, _bondProps), dragCtx.item.id, Object.assign({}, this.atomProps), undefined, newAtomPos)[0];
       this.editor.update(dragCtx.action, true);
     }
   }, {
@@ -10765,7 +10758,7 @@ var BondTool = function () {
       var struct = this.editor.render.ctab;
       var molecule = struct.molecule;
       var functionalGroups = molecule.functionalGroups;
-      var ci = this.editor.findItem(event, ['atoms', 'bonds']);
+      var ci = this.editor.findItem(event, ['atoms', 'bonds', 'functionalGroups']);
       var atomResult = [];
       var bondResult = [];
       var result = [];
@@ -10818,12 +10811,19 @@ var BondTool = function () {
         });
         return;
       }
+      var attachmentAtomId;
+      if ((ci === null || ci === void 0 ? void 0 : ci.map) === 'functionalGroups') {
+        attachmentAtomId = ketcherCore.SGroup.getAttachmentAtomIdBySGroupId(ci.id, molecule);
+      }
       var rnd = this.editor.render;
       this.editor.hover(null);
       this.editor.selection(null);
       this.dragCtx = {
         xy0: rnd.page2obj(event),
-        item: this.editor.findItem(event, ['atoms', 'bonds'])
+        item: attachmentAtomId === undefined ? ci : {
+          map: 'atoms',
+          id: attachmentAtomId
+        }
       };
       if (!this.dragCtx.item)
         delete this.dragCtx.item;
@@ -10848,24 +10848,26 @@ var BondTool = function () {
           info: degrees + 'º'
         });
         if (!('item' in dragCtx) || dragCtx.item.map === 'atoms') {
-          var _endAtom;
+          var _endAtom2;
           if ('action' in dragCtx) dragCtx.action.perform(rnd.ctab);
           var beginAtom;
           var endAtom;
           var beginPos;
           var endPos;
-          var extraNeighbour = [];
           if ('item' in dragCtx && dragCtx.item.map === 'atoms') {
             beginAtom = dragCtx.item.id;
             endAtom = editor.findItem(event, ['atoms'], dragCtx.item);
             var closestSGroup = editor.findItem(event, ['functionalGroups']);
             if (closestSGroup && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(closestSGroup.id, functionalGroups)) {
-              var sGroup = sgroups.get(closestSGroup.id);
-              var sGroupAtoms = ketcherCore.SGroup.getAtoms(molecule, sGroup === null || sGroup === void 0 ? void 0 : sGroup.item);
-              endAtom = {
-                id: sGroupAtoms[0],
-                map: 'atoms'
-              };
+              var closestAttachmentAtomId = ketcherCore.SGroup.getAttachmentAtomIdBySGroupId(closestSGroup.id, molecule);
+              var isSaltOrSolvent = closestAttachmentAtomId === undefined;
+              var isBeginFunctionalGroupItself = closestAttachmentAtomId === beginAtom;
+              if (!isSaltOrSolvent && !isBeginFunctionalGroupItself) {
+                endAtom = {
+                  id: closestAttachmentAtomId,
+                  map: 'atoms'
+                };
+              }
             }
             var fGroupId = endAtom && ketcherCore.FunctionalGroup.findFunctionalGroupByAtom(functionalGroups, endAtom.id);
             var fGroup = typeof fGroupId === 'number' && sgroups.get(fGroupId);
@@ -10876,24 +10878,25 @@ var BondTool = function () {
               });
               endAtom = null;
             }
-            if (endAtom && fGroup && endAtom.id === (fGroupAtoms === null || fGroupAtoms === void 0 ? void 0 : fGroupAtoms[0])) {
-              var atomNeighbours = molecule.atomGetNeighbors(endAtom.id);
-              atomNeighbours === null || atomNeighbours === void 0 ? void 0 : atomNeighbours.forEach(function (nei) {
-                !(fGroupAtoms !== null && fGroupAtoms !== void 0 && fGroupAtoms.includes(nei.aid)) && !extraNeighbour.includes(nei.aid) && extraNeighbour.push(nei.aid);
-              });
-            }
-            if (extraNeighbour.length >= 1) {
-              endAtom = null;
-            }
           } else {
+            var _endAtom;
             beginAtom = this.atomProps;
             beginPos = dragCtx.xy0;
-            endAtom = editor.findItem(event, ['atoms']);
+            endAtom = editor.findItem(event, ['atoms', 'functionalGroups']);
             var atomResult = [];
             var result = [];
             if (endAtom && endAtom.map === 'atoms' && functionalGroups.size && this.dragCtx) {
               var atomId = ketcherCore.FunctionalGroup.atomsInFunctionalGroup(functionalGroups, endAtom.id);
               if (atomId !== null) atomResult.push(atomId);
+            } else if (((_endAtom = endAtom) === null || _endAtom === void 0 ? void 0 : _endAtom.map) === 'functionalGroups') {
+              var functionalGroup = molecule.functionalGroups.get(endAtom.id);
+              if (!ketcherCore.SGroup.isSaltOrSolvent((functionalGroup === null || functionalGroup === void 0 ? void 0 : functionalGroup.name) || '')) {
+                var attachmentAtomId = ketcherCore.SGroup.getAttachmentAtomIdBySGroupId(endAtom.id, molecule);
+                endAtom = attachmentAtomId === undefined ? null : {
+                  map: 'atoms',
+                  id: attachmentAtomId
+                };
+              }
             }
             if (atomResult.length > 0) {
               var _iterator3 = _createForOfIteratorHelper$a(atomResult),
@@ -10919,7 +10922,7 @@ var BondTool = function () {
             }
           }
           var dist = Number.MAX_VALUE;
-          if (((_endAtom = endAtom) === null || _endAtom === void 0 ? void 0 : _endAtom.map) === 'atoms') {
+          if (((_endAtom2 = endAtom) === null || _endAtom2 === void 0 ? void 0 : _endAtom2.map) === 'atoms') {
             endAtom = endAtom.id;
           } else {
             endAtom = this.atomProps;
@@ -10929,7 +10932,7 @@ var BondTool = function () {
               endPos = utils.calcNewAtomPos(beginPos, xy1, event.ctrlKey);
             } else {
               var atom = rnd.ctab.molecule.atoms.get(beginAtom);
-              beginPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp.get_xy0(), xy1, event.ctrlKey);
+              endPos = utils.calcNewAtomPos(atom === null || atom === void 0 ? void 0 : atom.pp.get_xy0(), xy1, event.ctrlKey);
             }
           }
           if (dist > 0.3) {
@@ -10950,7 +10953,7 @@ var BondTool = function () {
           return true;
         }
       }
-      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds']), null, event);
+      this.editor.hover(this.editor.findItem(event, ['atoms', 'bonds', 'functionalGroups']), null, event);
       return true;
     }
   }, {
@@ -10973,7 +10976,9 @@ var BondTool = function () {
           }, ketcherCore.Vec2.diff(xy, v), ketcherCore.Vec2.sum(xy, v));
           this.editor.update(bondAddition[0]);
         } else if (dragCtx.item.map === 'atoms') {
-          this.editor.update(ketcherCore.fromBondAddition(rnd.ctab, this.bondProps, dragCtx.item.id, undefined)[0]);
+          this.editor.update(ketcherCore.fromBondAddition(rnd.ctab, this.bondProps, dragCtx.item.id, {
+            label: 'C'
+          })[0]);
           delete this.dragCtx.existedBond;
         } else if (dragCtx.item.map === 'bonds') {
           var bondProps = Object.assign({}, this.bondProps);
@@ -11047,7 +11052,7 @@ var ChainTool = function () {
       var molecule = struct.molecule;
       var functionalGroups = molecule.functionalGroups;
       var rnd = this.editor.render;
-      var ci = this.editor.findItem(event, ['atoms', 'bonds']);
+      var ci = this.editor.findItem(event, ['atoms', 'bonds', 'functionalGroups']);
       var atomResult = [];
       var bondResult = [];
       var result = [];
@@ -11115,6 +11120,18 @@ var ChainTool = function () {
         });
         atomLongtapEvent(this, rnd);
       }
+      if ((ci === null || ci === void 0 ? void 0 : ci.map) === 'functionalGroups') {
+        var functionalGroup = molecule.functionalGroups.get(ci.id);
+        if (!ketcherCore.SGroup.isSaltOrSolvent((functionalGroup === null || functionalGroup === void 0 ? void 0 : functionalGroup.name) || '')) {
+          var sGroupId = ci.id;
+          var sGroup = molecule.sgroups.get(sGroupId);
+          var attachmentAtomId = sGroup === null || sGroup === void 0 ? void 0 : sGroup.getAttAtomId(molecule);
+          this.dragCtx.item = {
+            map: 'atoms',
+            id: attachmentAtomId
+          };
+        }
+      }
       if (!this.dragCtx.item)
         delete this.dragCtx.item;
       return true;
@@ -11125,7 +11142,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']), null, event);
+      editor.hover(this.editor.findItem(event, ['atoms', 'bonds', 'functionalGroups']), null, event);
       if (!dragCtx) {
         return true;
       }
@@ -11704,7 +11721,7 @@ var SGroupTool = function () {
                   _iterator2.f();
                 }
               }
-              if (atomFromStruct && ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, false)) {
+              if (atomFromStruct && (ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, false) || ketcherCore.SGroup.isAtomInContractedSGroup(atomFromStruct, sgroups))) {
                 var _newSelected$atoms, _newSelected$bonds;
                 var sgroupAtoms = actualSgroupId !== undefined && ketcherCore.SGroup.getAtoms(molecule, sgroups.get(actualSgroupId));
                 var sgroupBonds = actualSgroupId !== undefined && ketcherCore.SGroup.getBonds(molecule, sgroups.get(actualSgroupId));
@@ -11766,7 +11783,7 @@ var SGroupTool = function () {
         var _struct$atoms$get2;
         var atomId = ketcherCore.FunctionalGroup.atomsInFunctionalGroup(functionalGroups, ci.id);
         var atomFromStruct = atomId !== null && ((_struct$atoms$get2 = struct.atoms.get(atomId)) === null || _struct$atoms$get2 === void 0 ? void 0 : _struct$atoms$get2.a);
-        if (atomFromStruct && !ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, true)) {
+        if (atomFromStruct && !(ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, true) || ketcherCore.SGroup.isAtomInContractedSGroup(atomFromStruct, sgroups))) {
           atomResult.push(atomId);
         }
       }
@@ -11774,7 +11791,7 @@ var SGroupTool = function () {
         var _struct$bonds$get;
         var bondId = ketcherCore.FunctionalGroup.bondsInFunctionalGroup(molecule, functionalGroups, ci.id);
         var bondFromStruct = bondId !== null && ((_struct$bonds$get = struct.bonds.get(bondId)) === null || _struct$bonds$get === void 0 ? void 0 : _struct$bonds$get.b);
-        if (bondFromStruct && !ketcherCore.FunctionalGroup.isBondInContractedFunctionalGroup(bondFromStruct, sgroups, functionalGroups)) {
+        if (bondFromStruct && !(ketcherCore.FunctionalGroup.isBondInContractedFunctionalGroup(bondFromStruct, sgroups, functionalGroups) || ketcherCore.SGroup.isBondInContractedSGroup(bondFromStruct, sgroups))) {
           bondResult.push(bondId);
         }
       }
@@ -11895,7 +11912,7 @@ var SGroupTool = function () {
                 _iterator7.f();
               }
             }
-            if (atomFromStruct && ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, true)) {
+            if (atomFromStruct && (ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(atomFromStruct, sgroups, functionalGroups, true) || ketcherCore.SGroup.isAtomInContractedSGroup(atomFromStruct, sgroups))) {
               var _struct$sgroups$get, _struct$sgroups$get2, _newSelected$atoms2, _newSelected$bonds2;
               var sgroupAtoms = actualSgroupId !== undefined && ketcherCore.SGroup.getAtoms(molecule, (_struct$sgroups$get = struct.sgroups.get(actualSgroupId)) === null || _struct$sgroups$get === void 0 ? void 0 : _struct$sgroups$get.item);
               var sgroupBonds = actualSgroupId !== undefined && ketcherCore.SGroup.getBonds(molecule, (_struct$sgroups$get2 = struct.sgroups.get(actualSgroupId)) === null || _struct$sgroups$get2 === void 0 ? void 0 : _struct$sgroups$get2.item);
@@ -12192,8 +12209,16 @@ function dropAndMerge(editor, mergeItems, action) {
   if (isMerging) {
     var expandGroupsAction = getExpandGroupsInMergeAction(editor.render.ctab, mergeItems);
     dropItemAction = dropItemAction.mergeWith(expandGroupsAction);
+    if (mergeItems.atomToFunctionalGroup) {
+      var _extractAttachmentAto = extractAttachmentAtom(mergeItems, editor),
+          _extractAttachmentAto2 = _slicedToArray__default["default"](_extractAttachmentAto, 2),
+          newMergeItems = _extractAttachmentAto2[0],
+          extractAttachmentAtomAction = _extractAttachmentAto2[1];
+      mergeItems = newMergeItems;
+      dropItemAction = dropItemAction.mergeWith(extractAttachmentAtomAction);
+    }
+    dropItemAction = ketcherCore.fromItemsFuse(restruct, mergeItems).mergeWith(dropItemAction);
   }
-  dropItemAction = ketcherCore.fromItemsFuse(restruct, mergeItems).mergeWith(dropItemAction);
   if (action) {
     dropItemAction = dropItemAction.mergeWith(action);
   }
@@ -12204,6 +12229,7 @@ function dropAndMerge(editor, mergeItems, action) {
       resizeCanvas: false
     });
   }
+  return dropItemAction;
 }
 function getExpandGroupsInMergeAction(restruct, mergeItems) {
   var action = new ketcherCore.Action();
@@ -12217,6 +12243,36 @@ function getExpandGroupsInMergeAction(restruct, mergeItems) {
   }
   return action;
 }
+function extractAttachmentAtom(mergeItems, editor) {
+  var _mergeItems$atomToFun;
+  var struct = editor.struct();
+  var reStruct = editor.render.ctab;
+  var newMergeItems = {
+    atoms: new Map(mergeItems.atoms),
+    bonds: new Map(mergeItems.bonds)
+  };
+  var removeNonAttachmentAtoms = new ketcherCore.Action();
+  var removeSGroup = new ketcherCore.Action();
+  (_mergeItems$atomToFun = mergeItems.atomToFunctionalGroup) === null || _mergeItems$atomToFun === void 0 ? void 0 : _mergeItems$atomToFun.forEach(function (functionalGroupId, srcAtomId) {
+    var sGroup = struct.sgroups.get(functionalGroupId);
+    var attachmentAtomId = sGroup === null || sGroup === void 0 ? void 0 : sGroup.getAttAtomId(struct);
+    if (attachmentAtomId) {
+      var attachmentAtom = struct.atoms.get(attachmentAtomId);
+      if (ketcherCore.SGroup.isAtomInContractedSGroup(attachmentAtom, struct.sgroups)) {
+        return;
+      }
+      newMergeItems.atoms.set(srcAtomId, attachmentAtomId);
+      removeNonAttachmentAtoms.mergeWith(ketcherCore.fromFragmentDeletion(reStruct, {
+        atoms: _toConsumableArray__default["default"](ketcherCore.SGroup.getAtoms(struct, sGroup)).filter(function (atomId) {
+          return atomId !== attachmentAtomId;
+        }),
+        bonds: _toConsumableArray__default["default"](ketcherCore.SGroup.getBonds(struct, sGroup))
+      }));
+      removeSGroup.mergeWith(ketcherCore.fromSgroupDeletion(reStruct, functionalGroupId));
+    }
+  });
+  return [newMergeItems, removeNonAttachmentAtoms];
+}
 
 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; }
@@ -12225,29 +12281,6 @@ function getMergeItems(editor, items) {
   return ketcherCore.getItemsToFuse(editor, nonGroupItemsAndAttachPoints);
 }
 
-function isAtomsArray(selectedElements) {
-  return Array.isArray(selectedElements) && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.every(function (element) {
-    return element instanceof ketcherCore.Atom;
-  }));
-}
-function generateCommonProperties(selectedElements) {
-  var normalizedAtom = fromElement(selectedElements[0]);
-  var properties = Object.getOwnPropertyNames(normalizedAtom);
-  var resultAtomAttributes = {};
-  properties.forEach(function (property) {
-    var uniqueValues = new Set();
-    selectedElements.forEach(function (element) {
-      uniqueValues.add(element[property]);
-    });
-    var allAtomsHaveTheSameValue = uniqueValues.size === 1;
-    if (allAtomsHaveTheSameValue) {
-      resultAtomAttributes[property] = normalizedAtom[property];
-    } else {
-      resultAtomAttributes[property] = '';
-    }
-  });
-  return resultAtomAttributes;
-}
 function castAtomPropToType(property, value) {
   var typesMapping = {
     charge: Number,
@@ -12259,21 +12292,21 @@ function castAtomPropToType(property, value) {
   }
   return value;
 }
-function updateOnlyChangedProperties(atomId, userChangedAtom, molecule) {
-  var unchangedAtom = molecule.atoms.get(atomId);
-  var updatedKeys = Object.getOwnPropertyNames(userChangedAtom).filter(function (key) {
-    return userChangedAtom[key] !== '';
+function updateOnlyChangedProperties(unchangedElement, userChangedElement) {
+  var updatedKeys = Object.getOwnPropertyNames(userChangedElement).filter(function (key) {
+    return userChangedElement[key] !== '';
   });
-  return Object.getOwnPropertyNames(unchangedAtom).reduce(function (updatedAtom, key) {
-    var isPropertyChanged = updatedKeys.includes(key);
-    if (isPropertyChanged) {
-      updatedAtom[key] = castAtomPropToType(key, userChangedAtom[key]);
-    } else {
-      updatedAtom[key] = unchangedAtom[key];
-    }
-    return updatedAtom;
+  return Object.getOwnPropertyNames(unchangedElement).reduce(function (updatedElement, key) {
+    updatedElement[key] = updatedKeys.includes(key) ? castAtomPropToType(key, userChangedElement[key]) : unchangedElement[key];
+    return updatedElement;
   }, {});
 }
+
+function isAtomsArray(selectedElements) {
+  return Array.isArray(selectedElements) && (selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.every(function (element) {
+    return element instanceof ketcherCore.Atom;
+  }));
+}
 function updateSelectedAtoms(_ref) {
   var atoms = _ref.atoms,
       changeAtomPromise = _ref.changeAtomPromise,
@@ -12284,7 +12317,8 @@ function updateSelectedAtoms(_ref) {
   if (atoms) {
     Promise.resolve(changeAtomPromise).then(function (userChangedAtom) {
       atoms.forEach(function (atomId) {
-        var atomWithChangedProperties = updateOnlyChangedProperties(atomId, userChangedAtom, molecule);
+        var unchangedAtom = molecule.atoms.get(atomId);
+        var atomWithChangedProperties = updateOnlyChangedProperties(unchangedAtom, userChangedAtom);
         action.mergeWith(ketcherCore.fromAtomsAttrs(struct, atomId, atomWithChangedProperties, false));
       });
       editor.update(action);
@@ -12294,6 +12328,27 @@ function updateSelectedAtoms(_ref) {
   }
 }
 
+function updateSelectedBonds(_ref) {
+  var bonds = _ref.bonds,
+      changeBondPromise = _ref.changeBondPromise,
+      editor = _ref.editor;
+  var action = new ketcherCore.Action();
+  var struct = editor.render.ctab;
+  var molecule = struct.molecule;
+  if (bonds) {
+    Promise.resolve(changeBondPromise).then(function (userChangedBond) {
+      bonds.forEach(function (bondId) {
+        var unchangedBond = molecule.bonds.get(bondId);
+        var bondWithChangedProperties = updateOnlyChangedProperties(unchangedBond, userChangedBond);
+        action.mergeWith(ketcherCore.fromBondsAttrs(struct, bondId, bondWithChangedProperties, false));
+      });
+      editor.update(action);
+    })["catch"](function () {
+      return null;
+    });
+  }
+}
+
 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; }
@@ -12461,7 +12516,8 @@ var SelectTool = function () {
       if ((_this$dragCtx = this.dragCtx) !== null && _this$dragCtx !== void 0 && _this$dragCtx.stopTapping) this.dragCtx.stopTapping();
       var possibleSaltOrSolvent = struct.sgroups.get(selectedSgroups[selectedSgroups.length - 1]);
       var isDraggingSaltOrSolventOnStructure = ketcherCore.SGroup.isSaltOrSolvent(possibleSaltOrSolvent === null || possibleSaltOrSolvent === void 0 ? void 0 : possibleSaltOrSolvent.item.data.name);
-      if (this.dragCtx && (isDraggingSaltOrSolventOnStructure || this.isDraggingStructureOnSaltOrSolvent(this.dragCtx, struct.sgroups))) {
+      var isDraggingCustomSgroupOnStructure = ketcherCore.SGroup.isSuperAtom(possibleSaltOrSolvent === null || possibleSaltOrSolvent === void 0 ? void 0 : possibleSaltOrSolvent.item) && !ketcherCore.FunctionalGroup.isFunctionalGroup(possibleSaltOrSolvent === null || possibleSaltOrSolvent === void 0 ? void 0 : possibleSaltOrSolvent.item);
+      if (this.dragCtx && (isDraggingCustomSgroupOnStructure || isDraggingSaltOrSolventOnStructure || this.isDraggingStructureOnSaltOrSolvent(this.dragCtx, struct.sgroups))) {
         preventSaltAndSolventsMerge(struct, this.dragCtx, editor);
         delete this.dragCtx;
       }
@@ -12485,7 +12541,6 @@ var SelectTool = function () {
       var molecule = struct.molecule,
           sgroups = struct.sgroups;
       var functionalGroups = molecule.functionalGroups;
-      var rnd = editor.render;
       var ci = editor.findItem(event, ['atoms', 'bonds', 'sgroups', 'functionalGroups', 'sgroupData', 'texts'], null);
       var atomResult = [];
       var bondResult = [];
@@ -12494,7 +12549,7 @@ var SelectTool = function () {
         var _struct$atoms$get;
         var atomId = ketcherCore.FunctionalGroup.atomsInFunctionalGroup(functionalGroups, ci.id);
         var atomFromStruct = atomId !== null && ((_struct$atoms$get = struct.atoms.get(atomId)) === null || _struct$atoms$get === void 0 ? void 0 : _struct$atoms$get.a);
-        if (atomId !== null && !ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(
+        if (atomFromStruct && !ketcherCore.FunctionalGroup.isAtomInContractedFunctionalGroup(
         atomFromStruct, sgroups, functionalGroups, true)) atomResult.push(atomId);
       }
       if (ci && functionalGroups && ci.map === 'bonds') {
@@ -12556,21 +12611,13 @@ var SelectTool = function () {
           changeAtomPromise: changeAtomPromise
         });
       } else if (ci.map === 'bonds') {
-        var _rnd$ctab$bonds$get;
-        var bond = (_rnd$ctab$bonds$get = rnd.ctab.bonds.get(ci.id)) === null || _rnd$ctab$bonds$get === void 0 ? void 0 : _rnd$ctab$bonds$get.b;
-        var rb = editor.event.bondEdit.dispatch(bond);
-        if (selection !== null && selection !== void 0 && selection.bonds) {
-          var action = new ketcherCore.Action();
-          var bondsSelection = selection.bonds;
-          Promise.resolve(rb).then(function (newbond) {
-            bondsSelection.forEach(function (bid) {
-              action.mergeWith(ketcherCore.fromBondsAttrs(struct, bid, newbond));
-            });
-            editor.update(action);
-          })["catch"](function () {
-            return null;
-          });
-        }
+        var bonds = getSelectedBonds(selection, molecule);
+        var changeBondPromise = editor.event.bondEdit.dispatch(bonds);
+        updateSelectedBonds({
+          bonds: (selection === null || selection === void 0 ? void 0 : selection.bonds) || [],
+          changeBondPromise: changeBondPromise,
+          editor: editor
+        });
       } else if (ci.map === 'sgroups' && !ketcherCore.FunctionalGroup.isFunctionalGroup(molecule.sgroups.get(ci.id)) || ci.map === 'sgroupData') {
         editor.selection(closestToSel(ci));
         SGroupTool.sgroupDialog(editor, ci.id);
@@ -12705,12 +12752,24 @@ function getSelectedAtoms(selection, molecule) {
   }
   return [];
 }
+function getSelectedBonds(selection, molecule) {
+  if (selection !== null && selection !== void 0 && selection.bonds) {
+    return mapBondIdsToBonds(selection === null || selection === void 0 ? void 0 : selection.bonds, molecule);
+  }
+  return [];
+}
 function mapAtomIdsToAtoms(atomsIds, molecule) {
   return atomsIds.map(function (atomId) {
     var atomOrReAtom = molecule.atoms.get(atomId);
     return atomOrReAtom.a || atomOrReAtom;
   });
 }
+function mapBondIdsToBonds(bondsIds, molecule) {
+  return bondsIds.map(function (bondId) {
+    var bondOrReBond = molecule.bonds.get(bondId);
+    return (bondOrReBond === null || bondOrReBond === void 0 ? void 0 : bondOrReBond.b) || bondOrReBond;
+  });
+}
 function uniqArray(dest, add, reversible) {
   return add.reduce(function (_, item) {
     if (reversible) dest = fp.xor(dest, [item]);else if (!dest.includes(item)) dest.push(item);
@@ -13256,7 +13315,9 @@ var PasteTool = function () {
       } else {
         var action = this.action;
         delete this.action;
-        dropAndMerge(this.editor, this.mergeItems, action);
+        if (!this.isSingleContractedGroup || !this.mergeItems) {
+          this.editor.update(dropAndMerge(this.editor, this.mergeItems, action));
+        }
       }
     }
   }, {
@@ -14118,6 +14179,47 @@ var TemplateTool = function () {
     editor.hoverIcon.updatePosition();
   }
   _createClass__default["default"](TemplateTool, [{
+    key: "struct",
+    get: function get() {
+      return this.editor.render.ctab.molecule;
+    }
+  }, {
+    key: "functionalGroups",
+    get: function get() {
+      return this.struct.functionalGroups;
+    }
+  }, {
+    key: "isModeFunctionalGroup",
+    get: function get() {
+      return this.mode === MODES.FG;
+    }
+  }, {
+    key: "closestItem",
+    get: function get() {
+      return this.editor.findItem(this.event, ['atoms', 'bonds', 'sgroups', 'functionalGroups']);
+    }
+  }, {
+    key: "isNeedToShowRemoveAbbreviationPopup",
+    get: function get() {
+      var _this$closestItem, _this$functionalGroup;
+      var targetId = this.findKeyOfRelatedGroupId((_this$closestItem = this.closestItem) === null || _this$closestItem === void 0 ? void 0 : _this$closestItem.id);
+      var isTargetExpanded = (_this$functionalGroup = this.functionalGroups.get(targetId)) === null || _this$functionalGroup === void 0 ? void 0 : _this$functionalGroup.isExpanded;
+      var isTargetAtomOrBond = this.targetGroupsIds.length && !this.isModeFunctionalGroup;
+      return Boolean(isTargetExpanded || isTargetAtomOrBond);
+    }
+  }, {
+    key: "findKeyOfRelatedGroupId",
+    value: function findKeyOfRelatedGroupId(clickedClosestItemId) {
+      var targetId;
+      var relatedGroupId = ketcherCore.FunctionalGroup.findFunctionalGroupByAtom(this.functionalGroups, clickedClosestItemId);
+      this.functionalGroups.forEach(function (fg, key) {
+        if (fg.relatedSGroupId === relatedGroupId) {
+          targetId = key;
+        }
+      });
+      return targetId;
+    }
+  }, {
     key: "showRemoveAbbreviationPopup",
     value: function showRemoveAbbreviationPopup() {
       var _this = this;
@@ -14128,77 +14230,68 @@ var TemplateTool = function () {
         return Promise.resolve();
       });
     }
-  }, {
-    key: "isModeFunctionalGroup",
-    get: function get() {
-      return this.mode === MODES.FG;
-    }
   }, {
     key: "mousedown",
     value: function () {
       var _mousedown = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee(event) {
-        var _struct$functionalGro;
-        var closestItem, ctab, struct, isTargetExpanded, isTargetAtomOrBond, dragCtx, ci, _struct$atoms$get, _struct$halfBonds$get, xy0, bond, frid, frIds, count, loop, _struct$halfBonds$get2, _struct$loops$get, loopHbs, sign;
+        var _this2 = this;
+        var _this$closestItem2, _this$closestItem3, _this$closestItem4, dragCtx, ci, _this$struct$atoms$ge, _this$struct$halfBond, xy0, bond, frid, frIds, count, loop, _this$struct$halfBond2, _this$struct$loops$ge, loopHbs, sign;
         return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
           while (1) {
             switch (_context.prev = _context.next) {
               case 0:
-                closestItem = this.editor.findItem(event, ['atoms', 'bonds', 'sgroups', 'functionalGroups']);
-                ctab = this.editor.render.ctab;
-                struct = ctab.molecule;
-                if (struct.functionalGroups.size) {
-                  this.targetGroupsIds = getGroupIdsFromItemArrays(struct, _objectSpread$N(_objectSpread$N({}, (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'atoms' && {
-                    atoms: [closestItem.id]
-                  }), (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'bonds' && {
-                    bonds: [closestItem.id]
+                this.event = event;
+                if (this.functionalGroups.size) {
+                  this.targetGroupsIds = getGroupIdsFromItemArrays(this.struct, _objectSpread$N(_objectSpread$N({}, ((_this$closestItem2 = this.closestItem) === null || _this$closestItem2 === void 0 ? void 0 : _this$closestItem2.map) === 'atoms' && {
+                    atoms: [this.closestItem.id]
+                  }), ((_this$closestItem3 = this.closestItem) === null || _this$closestItem3 === void 0 ? void 0 : _this$closestItem3.map) === 'bonds' && {
+                    bonds: [this.closestItem.id]
                   }));
                   if (
-                  (closestItem === null || closestItem === void 0 ? void 0 : closestItem.map) === 'functionalGroups' && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(closestItem.id, struct.functionalGroups)) {
-                    this.targetGroupsIds.push(closestItem.id);
+                  ((_this$closestItem4 = this.closestItem) === null || _this$closestItem4 === void 0 ? void 0 : _this$closestItem4.map) === 'functionalGroups' && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(this.closestItem.id, this.functionalGroups)) {
+                    this.targetGroupsIds.push(this.closestItem.id);
                   }
                 }
-                isTargetExpanded = (_struct$functionalGro = struct.functionalGroups.get(this.targetGroupsIds[0])) === null || _struct$functionalGro === void 0 ? void 0 : _struct$functionalGro.isExpanded;
-                isTargetAtomOrBond = this.targetGroupsIds.length && !this.isModeFunctionalGroup;
-                if (!(isTargetAtomOrBond || isTargetExpanded)) {
-                  _context.next = 10;
+                if (!this.isNeedToShowRemoveAbbreviationPopup) {
+                  _context.next = 6;
                   break;
                 }
-                _context.next = 9;
+                _context.next = 5;
                 return this.showRemoveAbbreviationPopup();
-              case 9:
+              case 5:
                 return _context.abrupt("return");
-              case 10:
+              case 6:
                 this.editor.hover(null);
                 this.dragCtx = {
-                  xy0: this.editor.render.page2obj(event),
-                  item: this.editor.findItem(event, this.findItems)
+                  xy0: this.editor.render.page2obj(this.event),
+                  item: this.editor.findItem(this.event, this.findItems)
                 };
                 dragCtx = this.dragCtx;
                 ci = dragCtx.item;
                 if (!(!ci || this.isSaltOrSolvent)) {
-                  _context.next = 17;
+                  _context.next = 13;
                   break;
                 }
                 delete dragCtx.item;
                 return _context.abrupt("return");
-              case 17:
+              case 13:
                 if (ci.map === 'bonds' && !this.isModeFunctionalGroup) {
                   xy0 = new ketcherCore.Vec2();
-                  bond = struct.bonds.get(ci.id);
-                  frid = (_struct$atoms$get = struct.atoms.get(bond === null || bond === void 0 ? void 0 : bond.begin)) === null || _struct$atoms$get === void 0 ? void 0 : _struct$atoms$get.fragment;
-                  frIds = struct.getFragmentIds(frid);
+                  bond = this.struct.bonds.get(ci.id);
+                  frid = (_this$struct$atoms$ge = this.struct.atoms.get(bond === null || bond === void 0 ? void 0 : bond.begin)) === null || _this$struct$atoms$ge === void 0 ? void 0 : _this$struct$atoms$ge.fragment;
+                  frIds = this.struct.getFragmentIds(frid);
                   count = 0;
-                  loop = (_struct$halfBonds$get = struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb1)) === null || _struct$halfBonds$get === void 0 ? void 0 : _struct$halfBonds$get.loop;
+                  loop = (_this$struct$halfBond = this.struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb1)) === null || _this$struct$halfBond === void 0 ? void 0 : _this$struct$halfBond.loop;
                   if (loop && loop < 0) {
-                    loop = (_struct$halfBonds$get2 = struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb2)) === null || _struct$halfBonds$get2 === void 0 ? void 0 : _struct$halfBonds$get2.loop;
+                    loop = (_this$struct$halfBond2 = this.struct.halfBonds.get(bond === null || bond === void 0 ? void 0 : bond.hb2)) === null || _this$struct$halfBond2 === void 0 ? void 0 : _this$struct$halfBond2.loop;
                   }
                   if (loop && loop >= 0) {
-                    loopHbs = (_struct$loops$get = struct.loops.get(loop)) === null || _struct$loops$get === void 0 ? void 0 : _struct$loops$get.hbs;
+                    loopHbs = (_this$struct$loops$ge = this.struct.loops.get(loop)) === null || _this$struct$loops$ge === void 0 ? void 0 : _this$struct$loops$ge.hbs;
                     loopHbs === null || loopHbs === void 0 ? void 0 : loopHbs.forEach(function (hb) {
-                      var _struct$halfBonds$get3;
-                      var halfBondBegin = (_struct$halfBonds$get3 = struct.halfBonds.get(hb)) === null || _struct$halfBonds$get3 === void 0 ? void 0 : _struct$halfBonds$get3.begin;
+                      var _this2$struct$halfBon;
+                      var halfBondBegin = (_this2$struct$halfBon = _this2.struct.halfBonds.get(hb)) === null || _this2$struct$halfBon === void 0 ? void 0 : _this2$struct$halfBon.begin;
                       if (halfBondBegin) {
-                        var hbbAtom = struct.atoms.get(halfBondBegin);
+                        var hbbAtom = _this2.struct.atoms.get(halfBondBegin);
                         if (hbbAtom) {
                           xy0.add_(hbbAtom.pp);
                           count++;
@@ -14207,7 +14300,7 @@ var TemplateTool = function () {
                     });
                   } else {
                     frIds.forEach(function (id) {
-                      var atomById = struct.atoms.get(id);
+                      var atomById = _this2.struct.atoms.get(id);
                       if (atomById) {
                         xy0.add_(atomById.pp);
                         count++;
@@ -14215,11 +14308,11 @@ var TemplateTool = function () {
                     });
                   }
                   dragCtx.v0 = xy0.scaled(1 / count);
-                  sign = getSign(struct, bond, dragCtx.v0);
+                  sign = getSign(this.struct, bond, dragCtx.v0);
                   dragCtx.sign1 = sign || 1;
                   dragCtx.sign2 = this.template.sign;
                 }
-              case 18:
+              case 14:
               case "end":
                 return _context.stop();
             }
@@ -14244,10 +14337,9 @@ var TemplateTool = function () {
       var ci = dragCtx.item;
       var targetPos = null;
       var eventPos = this.editor.render.page2obj(event);
-      var struct = this.editor.render.ctab.molecule;
       if (ci && ci.map === 'bonds' && !this.isModeFunctionalGroup) {
-        var bond = struct.bonds.get(ci.id);
-        var sign = getSign(struct, bond, eventPos);
+        var bond = this.struct.bonds.get(ci.id);
+        var sign = getSign(this.struct, bond, eventPos);
         if (dragCtx.sign1 * this.template.sign > 0) {
           sign = -sign;
         }
@@ -14271,9 +14363,9 @@ var TemplateTool = function () {
       if (!ci) {
         targetPos = dragCtx.xy0;
       } else if (ci.map === 'atoms' || ci.map === 'functionalGroups') {
-        var atomId = getTargetAtomId(struct, ci);
+        var atomId = getTargetAtomId(this.struct, ci);
         if (atomId !== undefined) {
-          var atom = struct.atoms.get(atomId);
+          var atom = this.struct.atoms.get(atomId);
           targetPos = atom === null || atom === void 0 ? void 0 : atom.pp;
           if (targetPos) {
             extraBond = this.isModeFunctionalGroup ? true : ketcherCore.Vec2.dist(targetPos, eventPos) > 1;
@@ -14313,7 +14405,7 @@ var TemplateTool = function () {
         action = _fromTemplateOnCanvas2[0];
         pasteItems = _fromTemplateOnCanvas2[1];
       } else if ((ci === null || ci === void 0 ? void 0 : ci.map) === 'atoms' || (ci === null || ci === void 0 ? void 0 : ci.map) === 'functionalGroups') {
-        var _atomId = getTargetAtomId(struct, ci);
+        var _atomId = getTargetAtomId(this.struct, ci);
         var _fromTemplateOnAtom = ketcherCore.fromTemplateOnAtom(this.editor.render.ctab, this.template, _atomId, angle, extraBond);
         var _fromTemplateOnAtom2 = _slicedToArray__default["default"](_fromTemplateOnAtom, 2);
         action = _fromTemplateOnAtom2[0];
@@ -14332,7 +14424,7 @@ var TemplateTool = function () {
   }, {
     key: "mouseup",
     value: function mouseup(event) {
-      var _this2 = this,
+      var _this3 = this,
           _ci;
       var dragCtx = this.dragCtx;
       if (!dragCtx) {
@@ -14340,9 +14432,7 @@ var TemplateTool = function () {
       }
       delete this.dragCtx;
       var restruct = this.editor.render.ctab;
-      var struct = restruct.molecule;
       var ci = dragCtx.item;
-      var functionalGroups = struct.functionalGroups;
       if (dragCtx.action && ci && ci.map === 'bonds' && !this.isModeFunctionalGroup) {
         dragCtx.action.perform(restruct);
         var promise = ketcherCore.fromTemplateOnBondAction(restruct, this.template, ci.id, this.editor.event, dragCtx.sign1 * dragCtx.sign2 > 0, true);
@@ -14350,9 +14440,9 @@ var TemplateTool = function () {
           var _ref2 = _slicedToArray__default["default"](_ref, 2),
               action = _ref2[0],
               pasteItems = _ref2[1];
-          var mergeItems = ketcherCore.getItemsToFuse(_this2.editor, pasteItems);
+          var mergeItems = ketcherCore.getItemsToFuse(_this3.editor, pasteItems);
           action = ketcherCore.fromItemsFuse(restruct, mergeItems).mergeWith(action);
-          _this2.editor.update(action);
+          _this3.editor.update(action);
         });
         return true;
       }
@@ -14360,14 +14450,14 @@ var TemplateTool = function () {
       var pasteItems = null;
       if (this.isSaltOrSolvent) {
         addSaltsAndSolventsOnCanvasWithoutMerge(restruct, this.template, dragCtx, this.editor);
+        this.editor.hover(this.editor.findItem(event, this.findItems), null, event);
         return true;
-      } else if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(ci.id, functionalGroups) && this.isModeFunctionalGroup && this.targetGroupsIds.length) {
+      } else if (((_ci = ci) === null || _ci === void 0 ? void 0 : _ci.map) === 'functionalGroups' && ketcherCore.FunctionalGroup.isContractedFunctionalGroup(ci.id, this.functionalGroups) && this.isModeFunctionalGroup && this.targetGroupsIds.length) {
         functionalGroupRemoveAction = new ketcherCore.Action();
-        var _struct = this.editor.struct();
         var _restruct = this.editor.render.ctab;
-        var functionalGroupToReplace = _struct.sgroups.get(ci.id);
-        var attachmentAtomId = functionalGroupToReplace.getAttAtomId(_struct);
-        var atomsWithoutAttachmentAtom = ketcherCore.SGroup.getAtoms(_struct, functionalGroupToReplace).filter(function (id) {
+        var functionalGroupToReplace = this.struct.sgroups.get(ci.id);
+        var attachmentAtomId = functionalGroupToReplace.getAttAtomId(this.struct);
+        var atomsWithoutAttachmentAtom = ketcherCore.SGroup.getAtoms(this.struct, functionalGroupToReplace).filter(function (id) {
           return id !== attachmentAtomId;
         });
         functionalGroupRemoveAction.mergeWith(ketcherCore.fromSgroupDeletion(_restruct, ci.id));
@@ -14393,10 +14483,10 @@ var TemplateTool = function () {
           if (degree && degree > 1) {
             angle = null;
           } else if (degree === 1) {
-            var _struct$halfBonds$get4;
-            var atom = struct.atoms.get(ci.id);
-            var neiId = atom && ((_struct$halfBonds$get4 = struct.halfBonds.get(atom.neighbors[0])) === null || _struct$halfBonds$get4 === void 0 ? void 0 : _struct$halfBonds$get4.end);
-            var nei = (neiId || neiId === 0) && struct.atoms.get(neiId);
+            var _this$struct$halfBond3;
+            var atom = this.struct.atoms.get(ci.id);
+            var neiId = atom && ((_this$struct$halfBond3 = this.struct.halfBonds.get(atom.neighbors[0])) === null || _this$struct$halfBond3 === void 0 ? void 0 : _this$struct$halfBond3.end);
+            var nei = (neiId || neiId === 0) && this.struct.atoms.get(neiId);
             angle = event.ctrlKey ? utils.calcAngle(nei === null || nei === void 0 ? void 0 : nei.pp, atom === null || atom === void 0 ? void 0 : atom.pp) : utils.fracAngle(utils.calcAngle(nei.pp, atom === null || atom === void 0 ? void 0 : atom.pp), null);
           } else {
             angle = 0;
@@ -14415,10 +14505,10 @@ var TemplateTool = function () {
             var _ref4 = _slicedToArray__default["default"](_ref3, 2),
                 action = _ref4[0],
                 pasteItems = _ref4[1];
-            if (!_this2.isModeFunctionalGroup) {
-              var mergeItems = ketcherCore.getItemsToFuse(_this2.editor, pasteItems);
+            if (!_this3.isModeFunctionalGroup) {
+              var mergeItems = ketcherCore.getItemsToFuse(_this3.editor, pasteItems);
               action = ketcherCore.fromItemsFuse(restruct, mergeItems).mergeWith(action);
-              _this2.editor.update(action);
+              _this3.editor.update(action);
             }
           });
           return true;
@@ -14628,20 +14718,27 @@ function handleHotkeyOverItem(props) {
     handleDialog(props);
   } else if (props.newAction.tool) {
     handleTool(props);
+  } else {
+    handleOtherActions(props);
   }
 }
-function handleEraser(_ref) {
-  var editor = _ref.editor,
-      hoveredItem = _ref.hoveredItem;
+function handleOtherActions(_ref) {
+  var dispatch = _ref.dispatch,
+      newAction = _ref.newAction;
+  dispatch(onAction(newAction));
+}
+function handleEraser(_ref2) {
+  var editor = _ref2.editor,
+      hoveredItem = _ref2.hoveredItem;
   var action = ketcherCore.fromFragmentDeletion(editor.render.ctab, mapItemsToArrays(hoveredItem));
   editor.update(action);
   editor.hover(null);
 }
-function handleDialog(_ref2) {
-  var hoveredItem = _ref2.hoveredItem,
-      newAction = _ref2.newAction,
-      editor = _ref2.editor,
-      dispatch = _ref2.dispatch;
+function handleDialog(_ref3) {
+  var hoveredItem = _ref3.hoveredItem,
+      newAction = _ref3.newAction,
+      editor = _ref3.editor,
+      dispatch = _ref3.dispatch;
   var dialogType = Object.keys(hoveredItem)[0];
   var dialogHandler = getDialogHandler(dialogType);
   var hoveredItemId = hoveredItem[dialogType];
@@ -14667,11 +14764,11 @@ function getDialogHandler(itemType) {
   var dialog = dialogs[itemType];
   return dialog;
 }
-function handleAtomPropsDialog(_ref3) {
-  var hoveredItemId = _ref3.hoveredItemId,
-      newAction = _ref3.newAction,
-      editor = _ref3.editor,
-      dispatch = _ref3.dispatch;
+function handleAtomPropsDialog(_ref4) {
+  var hoveredItemId = _ref4.hoveredItemId,
+      newAction = _ref4.newAction,
+      editor = _ref4.editor,
+      dispatch = _ref4.dispatch;
   var selection = editor.selection();
   var atomsSelected = selection === null || selection === void 0 ? void 0 : selection.atoms;
   var restruct = editor.render.ctab;
@@ -14694,11 +14791,11 @@ function handleAtomPropsDialog(_ref3) {
     });
   }
 }
-function handleBondPropsDialog(_ref4) {
-  var hoveredItemId = _ref4.hoveredItemId,
-      newAction = _ref4.newAction,
-      editor = _ref4.editor,
-      dispatch = _ref4.dispatch;
+function handleBondPropsDialog(_ref5) {
+  var hoveredItemId = _ref5.hoveredItemId,
+      newAction = _ref5.newAction,
+      editor = _ref5.editor,
+      dispatch = _ref5.dispatch;
   var restruct = editor.render.ctab;
   var bondFromStruct = restruct.bonds.get(hoveredItemId);
   var convertedBondForModal = fromBond(bondFromStruct === null || bondFromStruct === void 0 ? void 0 : bondFromStruct.b);
@@ -14709,11 +14806,11 @@ function handleBondPropsDialog(_ref4) {
     return null;
   });
 }
-function handleTool(_ref5) {
-  var hoveredItem = _ref5.hoveredItem,
-      newAction = _ref5.newAction,
-      editor = _ref5.editor,
-      dispatch = _ref5.dispatch;
+function handleTool(_ref6) {
+  var hoveredItem = _ref6.hoveredItem,
+      newAction = _ref6.newAction,
+      editor = _ref6.editor,
+      dispatch = _ref6.dispatch;
   var _loop = function _loop(item) {
     var toolHandler = getToolHandler(item, newAction.tool);
     var isChangeStructureTool = newAction.tool !== 'hand';
@@ -14773,13 +14870,13 @@ function getToolHandler(itemType) {
       rgroupatom: function rgroupatom(props) {
         return handleRGroupAtomTool(props);
       },
-      sgroup: function sgroup(_ref6) {
-        var editor = _ref6.editor,
-            hoveredItemId = _ref6.hoveredItemId;
+      sgroup: function sgroup(_ref7) {
+        var editor = _ref7.editor,
+            hoveredItemId = _ref7.hoveredItemId;
         tools.sgroup.sgroupDialog(editor, hoveredItemId);
       },
-      hand: function hand(_ref7) {
-        var dispatch = _ref7.dispatch;
+      hand: function hand(_ref8) {
+        var dispatch = _ref8.dispatch;
         return dispatch(onAction({
           tool: 'hand'
         }));
@@ -14793,26 +14890,28 @@ function getToolHandler(itemType) {
   }
   return items._default[toolName];
 }
-function handleAtomTool(_ref8) {
-  var hoveredItemId = _ref8.hoveredItemId,
-      newAction = _ref8.newAction,
-      editor = _ref8.editor;
-  var atomProps = _objectSpread$M({}, newAction.opts);
-  var updatedAtoms = ketcherCore.fromAtomsAttrs(editor.render.ctab, hoveredItemId, atomProps, true);
-  editor.update(updatedAtoms);
-}
-function handleBondTool(_ref9) {
+function handleAtomTool(_ref9) {
   var hoveredItemId = _ref9.hoveredItemId,
       newAction = _ref9.newAction,
       editor = _ref9.editor;
-  var newBond = ketcherCore.fromBondAddition(editor.render.ctab, newAction.opts, hoveredItemId, undefined)[0];
-  editor.update(newBond);
+  var atomProps = _objectSpread$M({}, newAction.opts);
+  var updatedAtoms = ketcherCore.fromAtomsAttrs(editor.render.ctab, hoveredItemId, atomProps, true);
+  editor.update(updatedAtoms);
 }
-function handleChargeTool(_ref10) {
-  var _editor$render$ctab$a;
+function handleBondTool(_ref10) {
   var hoveredItemId = _ref10.hoveredItemId,
       newAction = _ref10.newAction,
       editor = _ref10.editor;
+  var newBond = ketcherCore.fromBondAddition(editor.render.ctab, newAction.opts, hoveredItemId, {
+    label: 'C'
+  })[0];
+  editor.update(newBond);
+}
+function handleChargeTool(_ref11) {
+  var _editor$render$ctab$a;
+  var hoveredItemId = _ref11.hoveredItemId,
+      newAction = _ref11.newAction,
+      editor = _ref11.editor;
   var existingAtom = (_editor$render$ctab$a = editor.render.ctab.atoms.get(hoveredItemId)) === null || _editor$render$ctab$a === void 0 ? void 0 : _editor$render$ctab$a.a;
   if (existingAtom) {
     var updatedAtom = ketcherCore.fromAtomsAttrs(editor.render.ctab, hoveredItemId, {
@@ -14832,13 +14931,13 @@ function handleRGroupAtomTool(_x2) {
   return _handleRGroupAtomTool.apply(this, arguments);
 }
 function _handleRGroupAtomTool() {
-  _handleRGroupAtomTool = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee2(_ref11) {
+  _handleRGroupAtomTool = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee2(_ref12) {
     var hoveredItemId, editor, struct, atom, rglabel, label, element;
     return _regeneratorRuntime__default["default"].wrap(function _callee2$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
-            hoveredItemId = _ref11.hoveredItemId, editor = _ref11.editor;
+            hoveredItemId = _ref12.hoveredItemId, editor = _ref12.editor;
             struct = editor.render.ctab.molecule;
             atom = hoveredItemId || hoveredItemId === 0 ? struct.atoms.get(hoveredItemId) : null;
             rglabel = atom ? atom.rglabel : 0;
@@ -14879,14 +14978,14 @@ function isChangingFunctionalGroup(_x3) {
   return _isChangingFunctionalGroup.apply(this, arguments);
 }
 function _isChangingFunctionalGroup() {
-  _isChangingFunctionalGroup = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee3(_ref12) {
+  _isChangingFunctionalGroup = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee3(_ref13) {
     var _editor$render$ctab$a2;
     var hoveredItemId, editor, atomResult, result, atom, molecule, functionalGroups, sgroupsOnCanvas, atomId, isFunctionalGroup, _iterator, _step, id, fgId;
     return _regeneratorRuntime__default["default"].wrap(function _callee3$(_context3) {
       while (1) {
         switch (_context3.prev = _context3.next) {
           case 0:
-            hoveredItemId = _ref12.hoveredItemId, editor = _ref12.editor;
+            hoveredItemId = _ref13.hoveredItemId, editor = _ref13.editor;
             atomResult = [];
             result = [];
             atom = (_editor$render$ctab$a2 = editor.render.ctab.atoms.get(hoveredItemId)) === null || _editor$render$ctab$a2 === void 0 ? void 0 : _editor$render$ctab$a2.a;
@@ -14950,10 +15049,9 @@ function initKeydownListener(element) {
     });
   };
 }
-function removeNotRenderedStruct(actionTool, event, dispatch) {
-  var code = event.code,
-      metaKey = event.metaKey;
-  if (actionTool.tool === 'paste' && code === 'KeyS' && metaKey) {
+function removeNotRenderedStruct(actionTool, group, dispatch) {
+  var affectedTools = ['paste', 'template'];
+  if (affectedTools.includes(actionTool.tool) && group !== null && group !== void 0 && group.includes('save')) {
     var savedSelectedTool = SettingsManager.selectionTool;
     dispatch({
       type: 'ACTION',
@@ -15010,7 +15108,7 @@ function keyHandle(dispatch, state, hotKeys, event) {
       event.preventDefault();
       return;
     }
-    removeNotRenderedStruct(actionTool, event, dispatch);
+    removeNotRenderedStruct(actionTool, group, dispatch);
     if (actions.indexOf(actName) === -1) {
       var newAction = config[actName].action;
       var _hoveredItem = getHoveredItem(render.ctab);
@@ -15180,7 +15278,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","listDivider":"Select-module_listDivider__4vJyh","selectContainer":"Select-module_selectContainer__yXT-t"};
 
@@ -15439,7 +15537,7 @@ function findClosestBond(restruct, pos, skip, minDist, scale) {
     if (bid === skipId) return;
     var a1 = restruct.atoms.get(bond.b.begin).a;
     var a2 = restruct.atoms.get(bond.b.end).a;
-    if (ketcherCore.FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups)) return null;
+    if (ketcherCore.FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups) || ketcherCore.SGroup.isBondInContractedSGroup(bond.b, sGroups)) return null;
     var mid = ketcherCore.Vec2.lc2(a1.pp, 0.5, a2.pp, 0.5);
     var cdist = ketcherCore.Vec2.dist(pos, mid);
     if (cdist < minCDist) {
@@ -15449,7 +15547,7 @@ function findClosestBond(restruct, pos, skip, minDist, scale) {
   });
   restruct.bonds.forEach(function (bond, bid) {
     if (bid === skipId) return;
-    if (ketcherCore.FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups)) return null;
+    if (ketcherCore.FunctionalGroup.isBondInContractedFunctionalGroup(bond.b, sGroups, functionalGroups) || ketcherCore.SGroup.isBondInContractedSGroup(bond.b, sGroups)) return null;
     var hb = restruct.molecule.halfBonds.get(bond.b.hb1);
     var dir = hb.dir;
     var norm = hb.norm;
@@ -15685,20 +15783,55 @@ function findCloseMerge(restruct, selected) {
     var bond = struct.bonds.get(bid);
     pos.bonds.set(bid, ketcherCore.Vec2.lc2(struct.atoms.get(bond.begin).pp, 0.5, struct.atoms.get(bond.end).pp, 0.5));
   });
-  var result = {};
-  maps.forEach(function (mp) {
-    result[mp] = Array.from(pos[mp].keys()).reduce(function (res, srcId) {
-      var skip = {
-        map: mp,
-        id: srcId
-      };
-      var item = findMaps[mp](restruct, pos[mp].get(srcId), skip, null, scale);
-      if (item && !selected[mp].includes(item.id)) res.set(srcId, item.id);
-      return res;
-    }, new Map());
+  var result = {
+    atoms: new Map(),
+    atomToFunctionalGroup: new Map()
+  };
+  maps.forEach(function (map) {
+    if (map === 'atoms') {
+      Array.from(pos.atoms.keys()).forEach(function (atomId) {
+        var atomPosition = pos.atoms.get(atomId);
+        mergeAtomToAtom(atomId, restruct, atomPosition, selected, result) || mergeAtomToFunctionalGroup(atomId, restruct, atomPosition, result);
+      });
+    } else {
+      result[map] = Array.from(pos[map].keys()).reduce(function (res, srcId) {
+        var skip = {
+          map: map,
+          id: srcId
+        };
+        var item = findMaps[map](restruct, pos[map].get(srcId), skip, null, scale);
+        if (item && !selected[map].includes(item.id)) {
+          res.set(srcId, item.id);
+        }
+        return res;
+      }, new Map());
+    }
   });
   return result;
 }
+function mergeAtomToAtom(atomId, restruct, atomPosition, selected, result) {
+  var skip = {
+    map: 'atoms',
+    id: atomId
+  };
+  var closestAtom = findClosestAtom(restruct, atomPosition, skip, null);
+  if (closestAtom && !selected.atoms.includes(closestAtom.id)) {
+    result.atoms.set(atomId, closestAtom.id);
+    return true;
+  }
+  return false;
+}
+function mergeAtomToFunctionalGroup(atomId, restruct, atomPosition, result) {
+  if (ketcherCore.FunctionalGroup.isAttachmentPointAtom(atomId, restruct.molecule)) {
+    return false;
+  }
+  var closestFunctionalGroup = findClosestFG(restruct, atomPosition, null);
+  if (closestFunctionalGroup) {
+    result.atomToFunctionalGroup.set(atomId, closestFunctionalGroup.id);
+    return true;
+  }
+  return false;
+}
 var closest = {
   atom: findClosestAtom,
   item: findClosestItem,
@@ -16577,7 +16710,7 @@ function setHover(ci, visible, render) {
   return true;
 }
 
-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 classes$E = {"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,
@@ -16839,8 +16972,7 @@ var useBondEdit = function useBondEdit() {
       getKetcherInstance = _useAppContext.getKetcherInstance;
   var handler = React.useCallback( function () {
     var _ref2 = _asyncToGenerator__default["default"]( _regeneratorRuntime__default["default"].mark(function _callee(_ref) {
-      var _editor$render$ctab$b;
-      var props, editor, bondIds, bond, newBond;
+      var props, editor, bondIds, molecule, bonds, changeBondPromise;
       return _regeneratorRuntime__default["default"].wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
@@ -16848,24 +16980,29 @@ var useBondEdit = function useBondEdit() {
               props = _ref.props;
               editor = getKetcherInstance().editor;
               bondIds = (props === null || props === void 0 ? void 0 : props.bondIds) || [];
-              bond = (_editor$render$ctab$b = editor.render.ctab.bonds.get(bondIds[0])) === null || _editor$render$ctab$b === void 0 ? void 0 : _editor$render$ctab$b.b;
+              molecule = editor.render.ctab;
               _context.prev = 4;
-              _context.next = 7;
-              return editor.event.bondEdit.dispatch(bond);
-            case 7:
-              newBond = _context.sent;
-              editor.update(ketcherCore.fromBondsAttrs(editor.render.ctab, bondIds, newBond));
-              _context.next = 14;
+              bonds = mapBondIdsToBonds(bondIds, molecule);
+              _context.next = 8;
+              return editor.event.bondEdit.dispatch(bonds);
+            case 8:
+              changeBondPromise = _context.sent;
+              updateSelectedBonds({
+                bonds: bondIds,
+                changeBondPromise: changeBondPromise,
+                editor: editor
+              });
+              _context.next = 15;
               break;
-            case 11:
-              _context.prev = 11;
+            case 12:
+              _context.prev = 12;
               _context.t0 = _context["catch"](4);
-            case 14:
+            case 15:
             case "end":
               return _context.stop();
           }
         }
-      }, _callee, null, [[4, 11]]);
+      }, _callee, null, [[4, 12]]);
     }));
     return function (_x) {
       return _ref2.apply(this, arguments);
@@ -17393,7 +17530,7 @@ var StructRender = function (_Component) {
   return StructRender;
 }(React.Component);
 
-var classes$C = {"infoPanel":"InfoPanel-module_infoPanel__irvZL"};
+var classes$D = {"infoPanel":"InfoPanel-module_infoPanel__irvZL"};
 
 var X_COORD_INDEX = 0;
 var Y_COORD_INDEX = 1;
@@ -17498,7 +17635,7 @@ var SGroupDataRender = function SGroupDataRender(props) {
       left: panelCoordinate.x + 'px',
       top: panelCoordinate.y + 'px'
     },
-    className: clsx__default["default"](classes$C.infoPanel, className),
+    className: clsx__default["default"](classes$D.infoPanel, className),
     children: sGroupData
   }) : null;
 };
@@ -17574,11 +17711,9 @@ var InfoPanel = function InfoPanel(props) {
   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;
   React.useEffect(function () {
-    var _sGroup$data2;
-    var CIP_FIELD_NAME = 'INDIGO_CIP_DESC';
-    if (!groupStruct && (sGroup === null || sGroup === void 0 ? void 0 : sGroup.type) === 'DAT' && ((_sGroup$data2 = sGroup.data) === null || _sGroup$data2 === void 0 ? void 0 : _sGroup$data2.fieldName) !== CIP_FIELD_NAME) {
-      var _sGroup$data3, _sGroup$data4;
-      setSGroupData("".concat((_sGroup$data3 = sGroup.data) === null || _sGroup$data3 === void 0 ? void 0 : _sGroup$data3.fieldName, "=").concat((_sGroup$data4 = sGroup.data) === null || _sGroup$data4 === void 0 ? void 0 : _sGroup$data4.fieldValue));
+    if (!groupStruct && (sGroup === null || sGroup === void 0 ? void 0 : sGroup.type) === 'DAT') {
+      var _sGroup$data2, _sGroup$data3;
+      setSGroupData("".concat((_sGroup$data2 = sGroup.data) === null || _sGroup$data2 === void 0 ? void 0 : _sGroup$data2.fieldName, "=").concat((_sGroup$data3 = sGroup.data) === null || _sGroup$data3 === void 0 ? void 0 : _sGroup$data3.fieldValue));
     } else {
       setSGroupData(null);
     }
@@ -17602,7 +17737,7 @@ var InfoPanel = function InfoPanel(props) {
       left: x + 'px',
       top: y + 'px'
     },
-    className: clsx__default["default"](classes$C.infoPanel, className),
+    className: clsx__default["default"](classes$D.infoPanel, className),
     children: jsxRuntime.jsx(StructRender, {
       struct: molecule,
       id: groupName,
@@ -17719,15 +17854,15 @@ var StructEditor = function (_Component) {
           } catch (_unused) {
             el.innerHTML = msg.info;
           }
-          el.classList.add(classes$D.visible);
+          el.classList.add(classes$E.visible);
         } else {
-          el.classList.remove(classes$D.visible);
+          el.classList.remove(classes$E.visible);
         }
       });
       this.editor.event.cursor.add(function (csr) {
         switch (csr.status) {
           case 'enable':
-            _this2.editorRef.current.classList.add(classes$D.enableCursor);
+            _this2.editorRef.current.classList.add(classes$E.enableCursor);
             var _this2$editorRef$curr = _this2.editorRef.current.getBoundingClientRect(),
                 left = _this2$editorRef$curr.left,
                 top = _this2$editorRef$curr.top,
@@ -17744,7 +17879,7 @@ var StructEditor = function (_Component) {
             }
             break;
           case 'move':
-            _this2.editorRef.current.classList.add(classes$D.enableCursor);
+            _this2.editorRef.current.classList.add(classes$E.enableCursor);
             _this2.setState({
               enableCursor: true,
               clientX: clientX,
@@ -17752,19 +17887,19 @@ var StructEditor = function (_Component) {
             });
             break;
           case 'disable':
-            _this2.editorRef.current.classList.remove(classes$D.enableCursor);
+            _this2.editorRef.current.classList.remove(classes$E.enableCursor);
             _this2.setState({
               enableCursor: false
             });
             break;
           case 'leave':
-            _this2.editorRef.current.classList.remove(classes$D.enableCursor);
+            _this2.editorRef.current.classList.remove(classes$E.enableCursor);
             _this2.setState({
               enableCursor: false
             });
             break;
           case 'mouseover':
-            _this2.editorRef.current.classList.add(classes$D.enableCursor);
+            _this2.editorRef.current.classList.add(classes$E.enableCursor);
             _this2.setState({
               enableCursor: true
             });
@@ -17817,22 +17952,22 @@ var StructEditor = function (_Component) {
           _this$state$clientY = _this$state.clientY,
           clientY = _this$state$clientY === void 0 ? 0 : _this$state$clientY;
       return jsxRuntime.jsxs(Tag, _objectSpread$B(_objectSpread$B({
-        className: clsx__default["default"](classes$D.canvas, className)
+        className: clsx__default["default"](classes$E.canvas, className)
       }, props), {}, {
         children: [jsxRuntime.jsx(ContextMenuTrigger, {
           children: jsxRuntime.jsx("div", {
             ref: this.editorRef,
-            className: clsx__default["default"](classes$D.intermediateCanvas)
+            className: clsx__default["default"](classes$E.intermediateCanvas)
           })
         }), jsxRuntime.jsx(Cursor, {
           Icon: SvgHand,
           PressedIcon: SvgCompressedHand,
           enableHandTool: this.state.enableCursor
         }), jsxRuntime.jsx("div", {
-          className: classes$D.measureLog,
+          className: classes$E.measureLog,
           ref: this.logRef
         }), indigoVerification && jsxRuntime.jsx("div", {
-          className: "".concat(classes$D.spinnerOverlay, " loading-spinner"),
+          className: "".concat(classes$E.spinnerOverlay, " loading-spinner"),
           children: jsxRuntime.jsx(LoadingCircles, {})
         }), jsxRuntime.jsx(InfoPanel$1, {
           clientX: clientX,
@@ -17897,35 +18032,35 @@ function SvgLogo(props) {
   })))));
 }
 
-var classes$B = {"button-common-styles":"About-module_button-common-styles__XmSbT","scrollbar":"About-module_scrollbar__4-AeI","dialog_body":"About-module_dialog_body__ebQu-","about":"About-module_about__ZVesh","body":"About-module_body__8VOc3","versionName":"About-module_versionName__1gqJr","firstline":"About-module_firstline__h5XMW","links":"About-module_links__sMpyx","infoLinks":"About-module_infoLinks__4-Tot","indigoVersion":"About-module_indigoVersion__WKFlu","headerContent":"About-module_headerContent__YclOx","title":"About-module_title__k-6Zg","indigoFirstLine":"About-module_indigoFirstLine__-86rb","okButton":"About-module_okButton__FMcEk"};
+var classes$C = {"button-common-styles":"About-module_button-common-styles__XmSbT","scrollbar":"About-module_scrollbar__4-AeI","dialog_body":"About-module_dialog_body__ebQu-","about":"About-module_about__ZVesh","body":"About-module_body__8VOc3","versionName":"About-module_versionName__1gqJr","firstline":"About-module_firstline__h5XMW","links":"About-module_links__sMpyx","infoLinks":"About-module_infoLinks__4-Tot","indigoVersion":"About-module_indigoVersion__WKFlu","headerContent":"About-module_headerContent__YclOx","title":"About-module_title__k-6Zg","indigoFirstLine":"About-module_indigoFirstLine__-86rb","okButton":"About-module_okButton__FMcEk"};
 
 function AboutDialog(props) {
   var indigoInfo = props.indigoVersion && props.indigoVersion.split('.r');
   return jsxRuntime.jsxs(Dialog, {
-    className: "".concat(classes$B.about, " ").concat(classes$B.dialog_body),
+    className: "".concat(classes$C.about, " ").concat(classes$C.dialog_body),
     params: props,
     buttons: [jsxRuntime.jsx("button", {
       onClick: props.onOk,
-      className: classes$B.okButton,
+      className: classes$C.okButton,
       children: "Ok"
     }, "ok")],
     children: [jsxRuntime.jsx("div", {
-      className: classes$B.headerContent,
+      className: classes$C.headerContent,
       children: jsxRuntime.jsxs("a", {
         href: props.overviewLink,
         target: "_blank",
         rel: "noopener noreferrer",
         children: [jsxRuntime.jsx(SvgLogo, {}), jsxRuntime.jsx("span", {
-          className: classes$B.title,
+          className: classes$C.title,
           children: "Ketcher"
         })]
       })
     }), jsxRuntime.jsx("div", {
-      className: classes$B.body,
+      className: classes$C.body,
       children: jsxRuntime.jsx("div", {
-        className: classes$B.verionsInfo,
+        className: classes$C.verionsInfo,
         children: jsxRuntime.jsxs("dl", {
-          className: classes$B.ketcherVersionInfo,
+          className: classes$C.ketcherVersionInfo,
           children: [jsxRuntime.jsx("dt", {
             children: jsxRuntime.jsxs("a", {
               href: props.overviewLink,
@@ -17938,7 +18073,7 @@ function AboutDialog(props) {
               children: props.date
             })]
           }), jsxRuntime.jsxs("div", {
-            className: classes$B.infoLinks,
+            className: classes$C.infoLinks,
             children: [jsxRuntime.jsx("dt", {
               children: jsxRuntime.jsx("a", {
                 href: props.feedbackLink,
@@ -17955,7 +18090,7 @@ function AboutDialog(props) {
               })
             })]
           }), jsxRuntime.jsx("br", {}), jsxRuntime.jsxs("div", {
-            className: classes$B.indigoVersion,
+            className: classes$C.indigoVersion,
             children: [jsxRuntime.jsxs("a", {
               href: "http://lifescience.opensource.epam.com/indigo/",
               target: "_blank",
@@ -18033,7 +18168,7 @@ var ErrorPopover = function ErrorPopover(_ref) {
   });
 };
 
-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 classes$B = {"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$o = ["schema", "value", "onChange", "innerRef", "type", "isFocused"],
     _excluded2$4 = ["schema", "value", "onChange"],
@@ -18073,12 +18208,12 @@ function GenericInput(_ref) {
       value: value !== null && value !== void 0 ? value : '',
       onInput: onChange,
       onChange: onChange,
-      className: clsx__default["default"](classes$A.input, classes$A.genericInput),
+      className: clsx__default["default"](classes$B.input, classes$B.genericInput),
       ref: inputRef
     }, props)), type === 'checkbox' && jsxRuntime.jsx("span", {
-      className: classes$A.checkbox
+      className: classes$B.checkbox
     }), type === 'radio' && jsxRuntime.jsx("span", {
-      className: classes$A.radioButton
+      className: classes$B.radioButton
     })]
   });
 }
@@ -18109,16 +18244,16 @@ function CheckBox(_ref3) {
       innerRef = _ref3.innerRef,
       rest = _objectWithoutProperties__default["default"](_ref3, _excluded3$1);
   return jsxRuntime.jsxs("div", {
-    className: classes$A.fieldSetItem,
+    className: classes$B.fieldSetItem,
     children: [jsxRuntime.jsx("input", _objectSpread$A({
       type: "checkbox",
       checked: Boolean(value),
       onClick: onChange,
       onChange: onChange,
-      className: classes$A.input,
+      className: classes$B.input,
       ref: innerRef
     }, rest)), jsxRuntime.jsx("span", {
-      className: classes$A.checkbox
+      className: classes$B.checkbox
     })]
   });
 }
@@ -18139,7 +18274,7 @@ function Select$1(_ref4) {
     value: value,
     name: name,
     multiple: multiple,
-    className: clsx__default["default"](classes$A.select, className),
+    className: clsx__default["default"](classes$B.select, className),
     children: enumSchema(schema, function (title, val) {
       return jsxRuntime.jsx("option", {
         value: val,
@@ -18169,18 +18304,18 @@ function FieldSet(_ref5) {
     onClick: onSelect,
     children: enumSchema(schema, function (title, val) {
       return jsxRuntime.jsx("li", {
-        className: classes$A.fieldSetItem,
+        className: classes$B.fieldSetItem,
         children: jsxRuntime.jsxs("label", {
-          className: classes$A.fieldSetLabel,
+          className: classes$B.fieldSetLabel,
           children: [jsxRuntime.jsx("input", _objectSpread$A({
             type: type,
             defaultChecked: type === 'radio' ? selected(val, checked) : selected(val, value),
             value: _typeof__default["default"](val) !== 'object' && val,
-            className: classes$A.input
+            className: classes$B.input
           }, rest)), type === 'checkbox' && jsxRuntime.jsx("span", {
-            className: classes$A.checkbox
+            className: classes$B.checkbox
           }), type === 'radio' && jsxRuntime.jsx("span", {
-            className: classes$A.radioButton
+            className: classes$B.radioButton
           }), title]
         })
       }, title);
@@ -18210,7 +18345,7 @@ function Slider(_ref6) {
       name = _ref6.name,
       rest = _objectWithoutProperties__default["default"](_ref6, _excluded5$1);
   return jsxRuntime.jsxs("div", {
-    className: classes$A.slider,
+    className: classes$B.slider,
     children: [jsxRuntime.jsx("input", _objectSpread$A({
       type: "checkbox",
       checked: value,
@@ -18397,7 +18532,7 @@ var Select = function Select(_ref2) {
   });
 };
 
-var classes$z = {"button-common-styles":"form-module_button-common-styles__BvKSn","scrollbar":"form-module_scrollbar__MgLtc","dataError":"form-module_dataError__IXK1h","inputWrapper":"form-module_inputWrapper__sIDHH"};
+var classes$A = {"button-common-styles":"form-module_button-common-styles__BvKSn","scrollbar":"form-module_scrollbar__MgLtc","dataError":"form-module_dataError__IXK1h","inputWrapper":"form-module_inputWrapper__sIDHH"};
 
 var _excluded$n = ["schema", "result", "customValid"],
     _excluded2$3 = ["labelPos", "title", "children"],
@@ -18556,13 +18691,13 @@ function Field(props) {
   }, fieldOpts), rest));
   if (labelPos === false) return formField;
   return jsxRuntime.jsxs(Label, {
-    className: clsx__default["default"](_defineProperty__default["default"]({}, classes$z.dataError, dataError), className),
+    className: clsx__default["default"](_defineProperty__default["default"]({}, classes$A.dataError, dataError), className),
     error: dataError,
     title: rest.title || desc.title,
     labelPos: labelPos,
     tooltip: rest === null || rest === void 0 ? void 0 : rest.tooltip,
     children: [jsxRuntime.jsx("span", {
-      className: classes$z.inputWrapper,
+      className: classes$A.inputWrapper,
       onMouseEnter: handlePopoverOpen,
       onMouseLeave: handlePopoverClose,
       children: formField
@@ -18669,7 +18804,7 @@ function getErrorsObj(errors) {
   return errs;
 }
 
-var classes$y = {"colorPickerInput":"ColorPicker-module_colorPickerInput__voi2r","selectedInput":"ColorPicker-module_selectedInput__Ykcjd","colorPickerWrap":"ColorPicker-module_colorPickerWrap__IAQVo","withPalette":"ColorPicker-module_withPalette__gTwNu","colorPicker":"ColorPicker-module_colorPicker__Uz3PM","colorPickerBtn":"ColorPicker-module_colorPickerBtn__nr6ph","colorPickerPreview":"ColorPicker-module_colorPickerPreview__-Rf-i","colorPickerOverlay":"ColorPicker-module_colorPickerOverlay__WzC-w","colorContainer":"ColorPicker-module_colorContainer__ib5up","hex":"ColorPicker-module_hex__mE9my","presetColors":"ColorPicker-module_presetColors__J-ysq","chooseColor":"ColorPicker-module_chooseColor__fdzt8","clicked":"ColorPicker-module_clicked__8BNoN","expandIcon":"ColorPicker-module_expandIcon__oH4ka","turnedIcon":"ColorPicker-module_turnedIcon__-zaq-","colorPickerWrapper":"ColorPicker-module_colorPickerWrapper__GJm87"};
+var classes$z = {"colorPickerInput":"ColorPicker-module_colorPickerInput__voi2r","selectedInput":"ColorPicker-module_selectedInput__Ykcjd","colorPickerWrap":"ColorPicker-module_colorPickerWrap__IAQVo","withPalette":"ColorPicker-module_withPalette__gTwNu","colorPicker":"ColorPicker-module_colorPicker__Uz3PM","colorPickerBtn":"ColorPicker-module_colorPickerBtn__nr6ph","colorPickerPreview":"ColorPicker-module_colorPickerPreview__-Rf-i","colorPickerOverlay":"ColorPicker-module_colorPickerOverlay__WzC-w","colorContainer":"ColorPicker-module_colorContainer__ib5up","hex":"ColorPicker-module_hex__mE9my","presetColors":"ColorPicker-module_presetColors__J-ysq","chooseColor":"ColorPicker-module_chooseColor__fdzt8","clicked":"ColorPicker-module_clicked__8BNoN","expandIcon":"ColorPicker-module_expandIcon__oH4ka","turnedIcon":"ColorPicker-module_turnedIcon__-zaq-","colorPickerWrapper":"ColorPicker-module_colorPickerWrapper__GJm87"};
 
 var presetColors = ['#FF4545', '#FFAD31', '#68D442', '#3ACACC', '#4434FF', '#9C9C9C', '#000000'];
 var ColorPicker = function ColorPicker(props) {
@@ -18718,32 +18853,32 @@ var ColorPicker = function ColorPicker(props) {
     }
   };
   return jsxRuntime.jsxs("div", {
-    className: classes$y.colorPickerWrapper,
+    className: classes$z.colorPickerWrapper,
     "data-testid": isOpen ? 'color-picker-field-open' : 'color-picker-field',
     onClick: function onClick(e) {
       return e.preventDefault();
     },
     children: [jsxRuntime.jsxs("div", {
-      className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes$y.colorPickerInput, true), _defineProperty__default["default"](_clsx, classes$y.selectedInput, isOpen), _clsx)),
+      className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes$z.colorPickerInput, true), _defineProperty__default["default"](_clsx, classes$z.selectedInput, isOpen), _clsx)),
       onClick: handleClick,
       children: [jsxRuntime.jsx("div", {
-        className: classes$y.colorPickerPreview,
+        className: classes$z.colorPickerPreview,
         "data-testid": "color-picker-preview",
         style: {
           backgroundColor: value
         }
       }), jsxRuntime.jsx(Icon, {
-        className: clsx__default["default"]((_clsx2 = {}, _defineProperty__default["default"](_clsx2, classes$y.expandIcon, true), _defineProperty__default["default"](_clsx2, classes$y.turnedIcon, !isOpen), _clsx2)),
+        className: clsx__default["default"]((_clsx2 = {}, _defineProperty__default["default"](_clsx2, classes$z.expandIcon, true), _defineProperty__default["default"](_clsx2, classes$z.turnedIcon, !isOpen), _clsx2)),
         name: "chevron"
       })]
     }), isOpen && jsxRuntime.jsxs("div", {
-      className: clsx__default["default"](classes$y.colorPickerWrap, isPaletteOpen && classes$y.withPalette),
+      className: clsx__default["default"](classes$z.colorPickerWrap, isPaletteOpen && classes$z.withPalette),
       onBlur: handleBlur,
       "data-testid": "color-picker-preset",
       children: [jsxRuntime.jsxs("div", {
-        className: classes$y.presetColors,
+        className: classes$z.presetColors,
         children: [jsxRuntime.jsx("button", {
-          className: clsx__default["default"](classes$y.chooseColor, isPaletteOpen && classes$y.clicked),
+          className: clsx__default["default"](classes$z.chooseColor, isPaletteOpen && classes$z.clicked),
           onClick: handlePaletteOpen,
           autoFocus: true,
           "data-testid": "color-picker-btn"
@@ -18755,19 +18890,19 @@ var ColorPicker = function ColorPicker(props) {
             style: {
               backgroundColor: color
             },
-            className: classes$y.presetColor
+            className: classes$z.presetColor
           }, color);
         })]
       }), isPaletteOpen && jsxRuntime.jsxs("div", {
-        className: classes$y.colorPicker,
+        className: classes$z.colorPicker,
         "data-testid": "color-palette",
         children: [jsxRuntime.jsx(reactColorful.HexColorPicker, {
           color: value,
           onChange: handleChange
         }), jsxRuntime.jsxs("div", {
-          className: classes$y.colorContainer,
+          className: classes$z.colorContainer,
           children: [jsxRuntime.jsx("span", {
-            className: classes$y.hex,
+            className: classes$z.hex,
             children: "HEX"
           }), jsxRuntime.jsx(reactColorful.HexColorInput, {
             "data-testid": "color-picker-input",
@@ -18861,7 +18996,7 @@ function convertValue(value, measureFrom, measureTo) {
   return measureTo === 'px' || measureTo === 'pt' ? (value * measureMap[measureFrom] / measureMap[measureTo]).toFixed() - 0 : (value * measureMap[measureFrom] / measureMap[measureTo]).toFixed(3) - 0;
 }
 
-var classes$x = {"button-common-styles":"buttons-module_button-common-styles__qWDOz","scrollbar":"buttons-module_scrollbar__SpaVV","openButton":"buttons-module_openButton__wErm9"};
+var classes$y = {"button-common-styles":"buttons-module_button-common-styles__qWDOz","scrollbar":"buttons-module_scrollbar__SpaVV","openButton":"buttons-module_openButton__wErm9"};
 
 var _excluded$l = ["children", "type", "server", "className"];
 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; }
@@ -18915,7 +19050,7 @@ var OpenButton = function (_Component) {
         onClick: function onClick() {
           return _this2.btn.click();
         },
-        className: clsx__default["default"](classes$x.openButton, className)
+        className: clsx__default["default"](classes$y.openButton, className)
       }, props), {}, {
         children: [jsxRuntime.jsx("input", {
           onChange: function onChange(ev) {
@@ -19017,7 +19152,7 @@ var fileSaver = function fileSaver(server) {
   });
 };
 
-var classes$w = {"button-common-styles":"Accordion-module_button-common-styles__enTfZ","scrollbar":"Accordion-module_scrollbar__lJTa6","accordionWrapper":"Accordion-module_accordionWrapper__RKk00","expandIcon":"Accordion-module_expandIcon__ncUKv","turnedIcon":"Accordion-module_turnedIcon__v1sCA","accordionSummaryWrapper":"Accordion-module_accordionSummaryWrapper__roIRd","accordionSummary":"Accordion-module_accordionSummary__1Gq0d","accordionDetailsWrapper":"Accordion-module_accordionDetailsWrapper__fnSnc","hiddenAccordion":"Accordion-module_hiddenAccordion__WZFcJ","accordionDetails":"Accordion-module_accordionDetails__g2RM0","groupIcon":"Accordion-module_groupIcon__1g1lx","groupLabel":"Accordion-module_groupLabel__23y4U","changeMarker":"Accordion-module_changeMarker__UPtGx"};
+var classes$x = {"button-common-styles":"Accordion-module_button-common-styles__enTfZ","scrollbar":"Accordion-module_scrollbar__lJTa6","accordionWrapper":"Accordion-module_accordionWrapper__RKk00","expandIcon":"Accordion-module_expandIcon__ncUKv","turnedIcon":"Accordion-module_turnedIcon__v1sCA","accordionSummaryWrapper":"Accordion-module_accordionSummaryWrapper__roIRd","accordionSummary":"Accordion-module_accordionSummary__1Gq0d","accordionDetailsWrapper":"Accordion-module_accordionDetailsWrapper__fnSnc","hiddenAccordion":"Accordion-module_hiddenAccordion__WZFcJ","accordionDetails":"Accordion-module_accordionDetails__g2RM0","groupIcon":"Accordion-module_groupIcon__1g1lx","groupLabel":"Accordion-module_groupLabel__23y4U","changeMarker":"Accordion-module_changeMarker__UPtGx"};
 
 var Accordion = function Accordion(_ref) {
   var tabs = _ref.tabs,
@@ -19036,7 +19171,7 @@ var Accordion = function Accordion(_ref) {
     };
   };
   return jsxRuntime.jsx("div", {
-    className: clsx__default["default"](classes$w.accordionWrapper, className),
+    className: clsx__default["default"](classes$x.accordionWrapper, className),
     children: tabs.map(function (_ref2) {
       var _clsx, _clsx2;
       var label = _ref2.label,
@@ -19046,28 +19181,28 @@ var Accordion = function Accordion(_ref) {
       return jsxRuntime.jsxs("div", {
         children: [jsxRuntime.jsx("div", {
           onClick: handleAccordionChange(label),
-          className: classes$w.accordionSummaryWrapper,
+          className: classes$x.accordionSummaryWrapper,
           children: jsxRuntime.jsxs("div", {
-            className: classes$w.accordionSummary,
+            className: classes$x.accordionSummary,
             children: [jsxRuntime.jsx(Icon, {
-              className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes$w.expandIcon, true), _defineProperty__default["default"](_clsx, classes$w.turnedIcon, !shouldGroupBeRended), _clsx)),
+              className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes$x.expandIcon, true), _defineProperty__default["default"](_clsx, classes$x.turnedIcon, !shouldGroupBeRended), _clsx)),
               name: "chevron"
             }), jsxRuntime.jsxs("div", {
-              className: classes$w.groupLabel,
+              className: classes$x.groupLabel,
               children: [jsxRuntime.jsx(Icon, {
                 name: "elements-group",
-                className: classes$w.groupIcon
+                className: classes$x.groupIcon
               }), jsxRuntime.jsx("span", {
                 children: label
               })]
             }), changedGroups.has(label) && jsxRuntime.jsx("span", {
-              className: classes$w.changeMarker
+              className: classes$x.changeMarker
             })]
           })
         }), jsxRuntime.jsx("div", {
-          className: clsx__default["default"]((_clsx2 = {}, _defineProperty__default["default"](_clsx2, classes$w.accordionDetailsWrapper, true), _defineProperty__default["default"](_clsx2, classes$w.hiddenAccordion, !shouldGroupBeRended), _clsx2)),
+          className: clsx__default["default"]((_clsx2 = {}, _defineProperty__default["default"](_clsx2, classes$x.accordionDetailsWrapper, true), _defineProperty__default["default"](_clsx2, classes$x.hiddenAccordion, !shouldGroupBeRended), _clsx2)),
           children: jsxRuntime.jsx("div", {
-            className: classes$w.accordionDetails,
+            className: classes$x.accordionDetails,
             children: content
           })
         })]
@@ -19125,7 +19260,7 @@ function SystemFonts(props) {
   });
 }
 
-var classes$v = {"headerContent":"Settings-module_headerContent__wBYFf","title":"Settings-module_title__a6mod","button":"Settings-module_button__VZ2w7","accordion":"Settings-module_accordion__1uSYy","settings":"Settings-module_settings__Z5btc"};
+var classes$w = {"headerContent":"Settings-module_headerContent__wBYFf","title":"Settings-module_title__a6mod","button":"Settings-module_button__VZ2w7","accordion":"Settings-module_accordion__1uSYy","settings":"Settings-module_settings__Z5btc"};
 
 var fieldGroups = {
   resetToSelect: 'General',
@@ -19183,15 +19318,15 @@ var HeaderContent$1 = function HeaderContent(_ref) {
     if (formState.result.init) return _.isEqual(defaultSettings, initState);else return _.isEqual(defaultSettings, formState.result);
   };
   return jsxRuntime.jsxs("div", {
-    className: classes$v.headerContent,
+    className: classes$w.headerContent,
     children: [jsxRuntime.jsx("span", {
-      className: classes$v.title,
+      className: classes$w.title,
       children: " Settings"
     }), jsxRuntime.jsx(OpenButton, {
       title: "Open from File",
       server: server,
       onLoad: onOpenFile,
-      className: classes$v.button,
+      className: classes$w.button,
       children: jsxRuntime.jsx(Icon, {
         name: "open-1"
       })
@@ -19199,14 +19334,14 @@ var HeaderContent$1 = function HeaderContent(_ref) {
       title: "Save to File",
       data: JSON.stringify(formState.result),
       filename: "ketcher-settings",
-      className: classes$v.button,
+      className: classes$w.button,
       children: jsxRuntime.jsx(Icon, {
         name: "save-1"
       })
     }, "ketcher-settings"), jsxRuntime.jsx("button", {
       title: "Reset",
       onClick: onReset,
-      className: classes$v.button,
+      className: classes$w.button,
       disabled: getIsResetDisabled(),
       children: jsxRuntime.jsx(Icon, {
         name: "reset"
@@ -19365,7 +19500,7 @@ var SettingsDialog = function SettingsDialog(props) {
     label: '3D Viewer',
     content:
     jsxRuntime.jsxs("fieldset", {
-      className: classes$v.viewer,
+      className: classes$w.viewer,
       children: [jsxRuntime.jsx(Field, {
         name: "miewMode",
         component: Select,
@@ -19398,7 +19533,7 @@ var SettingsDialog = function SettingsDialog(props) {
   };
   var tabs = [generalTab, stereoTab, atomsTab, bondsTab, serverTab, threeDViewerTab, debuggingTab];
   return jsxRuntime.jsx(Dialog, {
-    className: classes$v.settings,
+    className: classes$w.settings,
     result: function result() {
       return formState.result;
     },
@@ -19425,7 +19560,7 @@ var SettingsDialog = function SettingsDialog(props) {
     }, formState), {}, {
       children: jsxRuntime.jsx(Accordion, {
         tabs: tabs,
-        className: classes$v.accordion,
+        className: classes$w.accordion,
         changedGroups: changedGroups
       })
     }))
@@ -19722,7 +19857,7 @@ 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 classes$v = {"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$i = ["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); }; }
@@ -19760,7 +19895,7 @@ var AnalyseDialog = function (_Component) {
           props = _objectWithoutProperties__default["default"](_this$props, _excluded$i);
       return jsxRuntime.jsx(Dialog, {
         title: "Calculated Values",
-        className: classes$u.analyse,
+        className: classes$v.analyse,
         withDivider: true,
         needMargin: true,
         valid: function valid() {
@@ -19793,9 +19928,9 @@ var AnalyseDialog = function (_Component) {
             withSelector: false
           }].map(function (item) {
             return jsxRuntime.jsxs("li", {
-              className: classes$u.contentWrapper,
+              className: classes$v.contentWrapper,
               children: [jsxRuntime.jsxs("div", {
-                className: classes$u.inputWrapper,
+                className: classes$v.inputWrapper,
                 children: [jsxRuntime.jsxs("label", {
                   children: [item.name, ":"]
                 }), item.key === 'gross' ? jsxRuntime.jsx(FormulaInput, {
@@ -19808,7 +19943,7 @@ var AnalyseDialog = function (_Component) {
                   value: values && !loading ? roundOff(values[item.key], round[item.round]) : 0
                 })]
               }), item.withSelector ? jsxRuntime.jsxs("div", {
-                className: classes$u.selectWrapper,
+                className: classes$v.selectWrapper,
                 children: [jsxRuntime.jsx("span", {
                   children: "Decimal places"
                 }), jsxRuntime.jsx(Select, {
@@ -19817,7 +19952,7 @@ var AnalyseDialog = function (_Component) {
                   onChange: function onChange(val) {
                     return onChangeRound(item.round, val);
                   },
-                  className: classes$u.select
+                  className: classes$v.select
                 })]
               }) : null]
             }, item.key);
@@ -19852,7 +19987,7 @@ var mapDispatchToProps$9 = function mapDispatchToProps(dispatch) {
 };
 var Analyse = reactRedux.connect(mapStateToProps$c, mapDispatchToProps$9)(AnalyseDialog);
 
-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 classes$u = {"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) {
   var clickHandler = _ref.clickHandler,
@@ -19884,11 +20019,11 @@ function FooterContent$3(_ref) {
       openHandler = _ref.openHandler,
       copyHandler = _ref.copyHandler;
   return jsxRuntime.jsxs("div", {
-    className: classes$t.footerContent,
+    className: classes$u.footerContent,
     children: [jsxRuntime.jsxs(OpenButton, {
       onLoad: onImage,
       type: "image/*",
-      className: classes$t.openButton,
+      className: classes$u.openButton,
       children: [jsxRuntime.jsx(Icon, {
         name: "open"
       }), jsxRuntime.jsx("span", {
@@ -19898,12 +20033,12 @@ function FooterContent$3(_ref) {
       children: [jsxRuntime.jsx(DialogActionButton, {
         disabled: !structStr,
         clickHandler: openHandler,
-        styles: classes$t.secondaryButton,
+        styles: classes$u.secondaryButton,
         label: "Open as new Project"
       }, "openButton"), jsxRuntime.jsx(DialogActionButton, {
         disabled: !structStr,
         clickHandler: copyHandler,
-        styles: classes$t.primaryButton,
+        styles: classes$u.primaryButton,
         label: "Add to Canvas",
         title: "Structure will be loaded as fragment and added to Clipboard"
       }, "copyButton")]
@@ -19954,7 +20089,7 @@ function RecognizeDialog(prop) {
   };
   return jsxRuntime.jsxs(Dialog, {
     title: "Import Structure from Image",
-    className: classes$t.recognize,
+    className: classes$u.recognize,
     params: _objectSpread$u(_objectSpread$u({}, props), {}, {
       onOk: onOk
     }),
@@ -19971,9 +20106,9 @@ function RecognizeDialog(prop) {
     }),
     buttons: [],
     children: [jsxRuntime.jsxs("div", {
-      className: classes$t.topBody,
+      className: classes$u.topBody,
       children: [jsxRuntime.jsxs("label", {
-        className: classes$t.imagoVersion,
+        className: classes$u.imagoVersion,
         children: ["Imago version", jsxRuntime.jsx(Input$1, {
           schema: {
             "enum": imagoVersions,
@@ -19990,9 +20125,9 @@ function RecognizeDialog(prop) {
         children: "Recognized structure preview"
       })]
     }), jsxRuntime.jsxs("div", {
-      className: classes$t.imagesContainer,
+      className: classes$u.imagesContainer,
       children: [jsxRuntime.jsxs("div", {
-        className: classes$t.picture,
+        className: classes$u.picture,
         children: [file && isImage(file) && canPreviewImage && jsxRuntime.jsx("img", {
           alt: "",
           id: "pic",
@@ -20001,27 +20136,27 @@ function RecognizeDialog(prop) {
             setCanPreviewImage(false);
           }
         }), jsxRuntime.jsxs("span", {
-          className: classes$t.filename,
+          className: classes$u.filename,
           children: [" ", file ? file.name : null, " "]
         }), file && isImage(file) && !canPreviewImage && jsxRuntime.jsx("div", {
-          className: classes$t.messageContainer,
+          className: classes$u.messageContainer,
           children: jsxRuntime.jsxs("p", {
             children: ["Preview of '", file.type, "' MIME type is not supported by current browser"]
           })
         }), (!file || !isImage(file) && clearFile()) && jsxRuntime.jsx("div", {
-          className: classes$t.messageContainer,
+          className: classes$u.messageContainer,
           children: jsxRuntime.jsx("p", {
             children: "Please choose image"
           })
         })]
       }), jsxRuntime.jsx("div", {
-        className: classes$t.output,
+        className: classes$u.output,
         children: structStr && (
         structStr instanceof Promise || typeof structStr !== 'string' ? jsxRuntime.jsx("div", {
-          className: classes$t.messageContainer,
+          className: classes$u.messageContainer,
           children: jsxRuntime.jsx(LoadingCircles, {})
         }) : jsxRuntime.jsx(StructRender, {
-          className: classes$t.struct,
+          className: classes$u.struct,
           struct: structStr
         }))
       })]
@@ -20067,7 +20202,7 @@ var mapDispatchToProps$8 = function mapDispatchToProps(dispatch) {
 };
 var Recognize = reactRedux.connect(mapStateToProps$b, mapDispatchToProps$8)(RecognizeDialog);
 
-var classes$s = {"button-common-styles":"Miew-module_button-common-styles__8FE-p","scrollbar":"Miew-module_scrollbar__ZMWH-","warning":"Miew-module_warning__IDl5F","applyButton":"Miew-module_applyButton__ZDE-i","miewDialog":"Miew-module_miewDialog__gHvYc","miewContainer":"Miew-module_miewContainer__2SNw3","miewDarkTheme":"Miew-module_miewDarkTheme__kMFzc"};
+var classes$t = {"button-common-styles":"Miew-module_button-common-styles__8FE-p","scrollbar":"Miew-module_scrollbar__ZMWH-","warning":"Miew-module_warning__IDl5F","applyButton":"Miew-module_applyButton__ZDE-i","miewDialog":"Miew-module_miewDialog__gHvYc","miewContainer":"Miew-module_miewContainer__2SNw3","miewDarkTheme":"Miew-module_miewDarkTheme__kMFzc"};
 
 var _excluded$g = ["miewOpts", "server", "struct", "onExportCML", "miewTheme"];
 var BACKGROUND_COLOR = {
@@ -20125,7 +20260,7 @@ function createMiewOptions(userOpts) {
 var CHANGING_WARNING = 'Stereocenters can be changed after the strong 3D rotation';
 var FooterContent$2 = function FooterContent() {
   return jsxRuntime.jsx("div", {
-    className: classes$s.warning,
+    className: classes$t.warning,
     children: CHANGING_WARNING
   });
 };
@@ -20167,14 +20302,14 @@ var MiewDialog = function MiewDialog(_ref) {
     params: prop,
     buttons: ['Cancel', jsxRuntime.jsx("button", {
       onClick: exportCML,
-      className: classes$s.applyButton,
+      className: classes$t.applyButton,
       children: "Apply"
     }, "apply")],
     footerContent: jsxRuntime.jsx(FooterContent$2, {}),
-    className: classes$s.miewDialog,
+    className: classes$t.miewDialog,
     children: jsxRuntime.jsx("div", {
       children: jsxRuntime.jsx("div", {
-        className: "".concat(classes$s.miewContainer, " ").concat(miewTheme === 'dark' ? classes$s.miewDarkTheme : ''),
+        className: "".concat(classes$t.miewContainer, " ").concat(miewTheme === 'dark' ? classes$t.miewDarkTheme : ''),
         children: jsxRuntime.jsx(Viewer__default["default"], {
           onInit: onMiewInit
         })
@@ -20214,7 +20349,7 @@ var ElementNumber = function ElementNumber(props) {
   });
 };
 
-var classes$r = {"button-common-styles":"Atom-module_button-common-styles__ipWaI","scrollbar":"Atom-module_scrollbar__z5cVx","atomProps":"Atom-module_atomProps__pqBjY","accordionWrapper":"Atom-module_accordionWrapper__MSuU7","expandIcon":"Atom-module_expandIcon__mPszC","turnedIcon":"Atom-module_turnedIcon__0Kzwy","accordionSummaryWrapper":"Atom-module_accordionSummaryWrapper__MGqsq","accordionSummary":"Atom-module_accordionSummary__HMKzl","accordionDetailsWrapper":"Atom-module_accordionDetailsWrapper__p6EI7","hiddenAccordion":"Atom-module_hiddenAccordion__pDNdM","accordionDetails":"Atom-module_accordionDetails__-B3jK","checkbox":"Atom-module_checkbox__Vup40","reactionFlags":"Atom-module_reactionFlags__gdNb1","querySpecific":"Atom-module_querySpecific__7XxMr"};
+var classes$s = {"button-common-styles":"Atom-module_button-common-styles__ipWaI","scrollbar":"Atom-module_scrollbar__z5cVx","atomProps":"Atom-module_atomProps__pqBjY","accordionWrapper":"Atom-module_accordionWrapper__MSuU7","expandIcon":"Atom-module_expandIcon__mPszC","turnedIcon":"Atom-module_turnedIcon__0Kzwy","accordionSummaryWrapper":"Atom-module_accordionSummaryWrapper__MGqsq","accordionSummary":"Atom-module_accordionSummary__HMKzl","accordionDetailsWrapper":"Atom-module_accordionDetailsWrapper__p6EI7","hiddenAccordion":"Atom-module_hiddenAccordion__pDNdM","accordionDetails":"Atom-module_accordionDetails__-B3jK","checkbox":"Atom-module_checkbox__Vup40","reactionFlags":"Atom-module_reactionFlags__gdNb1","querySpecific":"Atom-module_querySpecific__7XxMr"};
 
 var _excluded$f = ["formState", "stereoParity", "isMultipleAtoms"];
 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; }
@@ -20274,7 +20409,7 @@ var Atom = function Atom(props) {
   }, {
     groupName: 'Query specific',
     component: jsxRuntime.jsxs("div", {
-      className: classes$r.querySpecific,
+      className: classes$s.querySpecific,
       children: [jsxRuntime.jsx(Field, {
         name: "ringBondCount",
         component: Select,
@@ -20290,13 +20425,13 @@ var Atom = function Atom(props) {
       }), jsxRuntime.jsx(Field, {
         name: "unsaturatedAtom",
         labelPos: "before",
-        className: classes$r.checkbox
+        className: classes$s.checkbox
       })]
     })
   }, {
     groupName: 'Reaction flags',
     component: jsxRuntime.jsxs("div", {
-      className: classes$r.reactionFlags,
+      className: classes$s.reactionFlags,
       children: [jsxRuntime.jsx(Field, {
         name: "invRet",
         component: Select,
@@ -20304,13 +20439,13 @@ var Atom = function Atom(props) {
       }), jsxRuntime.jsx(Field, {
         name: "exactChangeFlag",
         labelPos: "before",
-        className: classes$r.checkbox
+        className: classes$s.checkbox
       })]
     })
   }];
   return jsxRuntime.jsx(Dialog, {
     title: "Atom Properties",
-    className: classes$r.atomProps,
+    className: classes$s.atomProps,
     result: function result() {
       return formState.result;
     },
@@ -20336,7 +20471,7 @@ var Atom = function Atom(props) {
       init: rest
     }, formState), {}, {
       children: jsxRuntime.jsx("div", {
-        className: classes$r.accordionWrapper,
+        className: classes$s.accordionWrapper,
         children: itemGroups.map(function (_ref) {
           var _clsx, _clsx2;
           var groupName = _ref.groupName,
@@ -20345,20 +20480,20 @@ var Atom = function Atom(props) {
           return jsxRuntime.jsxs("div", {
             children: [jsxRuntime.jsx("div", {
               onClick: handleAccordionChange(groupName),
-              className: classes$r.accordionSummaryWrapper,
+              className: classes$s.accordionSummaryWrapper,
               children: jsxRuntime.jsxs("div", {
-                className: classes$r.accordionSummary,
+                className: classes$s.accordionSummary,
                 children: [jsxRuntime.jsx("span", {
                   children: groupName
                 }), jsxRuntime.jsx(Icon, {
-                  className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes$r.expandIcon, true), _defineProperty__default["default"](_clsx, classes$r.turnedIcon, !shouldGroupBeRended), _clsx)),
+                  className: clsx__default["default"]((_clsx = {}, _defineProperty__default["default"](_clsx, classes$s.expandIcon, true), _defineProperty__default["default"](_clsx, classes$s.turnedIcon, !shouldGroupBeRended), _clsx)),
                   name: "chevron"
                 })]
               })
             }), jsxRuntime.jsx("div", {
-              className: clsx__default["default"]((_clsx2 = {}, _defineProperty__default["default"](_clsx2, classes$r.accordionDetailsWrapper, true), _defineProperty__default["default"](_clsx2, classes$r.hiddenAccordion, !shouldGroupBeRended), _clsx2)),
+              className: clsx__default["default"]((_clsx2 = {}, _defineProperty__default["default"](_clsx2, classes$s.accordionDetailsWrapper, true), _defineProperty__default["default"](_clsx2, classes$s.hiddenAccordion, !shouldGroupBeRended), _clsx2)),
               children: jsxRuntime.jsx("div", {
-                className: classes$r.accordionDetails,
+                className: classes$s.accordionDetails,
                 children: component
               })
             })]
@@ -20392,7 +20527,7 @@ var mapStateToProps$9 = function mapStateToProps(state) {
 };
 var AtomContainer = reactRedux.connect(mapStateToProps$9)(Atom);
 
-var classes$q = {"attachPoints":"Attach-module_attachPoints__5QEAv"};
+var classes$r = {"attachPoints":"Attach-module_attachPoints__5QEAv"};
 
 var _excluded$e = ["formState"];
 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; }
@@ -20402,7 +20537,7 @@ var AttachPoints = function AttachPoints(props) {
       rest = _objectWithoutProperties__default["default"](props, _excluded$e);
   return jsxRuntime.jsx(Dialog, {
     title: "Attachment Points",
-    className: classes$q.attachPoints,
+    className: classes$r.attachPoints,
     result: function result() {
       return formState.result;
     },
@@ -20435,7 +20570,7 @@ var mapStateToProps$8 = function mapStateToProps(state) {
 };
 var AttachPointsContainer = reactRedux.connect(mapStateToProps$8)(AttachPoints);
 
-var classes$p = {"automap":"Automap-module_automap__531ko"};
+var classes$q = {"automap":"Automap-module_automap__531ko"};
 
 var _excluded$d = ["formState"];
 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; }
@@ -20458,7 +20593,7 @@ var Automap = function Automap(props) {
       rest = _objectWithoutProperties__default["default"](props, _excluded$d);
   return jsxRuntime.jsx(Dialog, {
     title: "Reaction Auto-Mapping",
-    className: classes$p.automap,
+    className: classes$q.automap,
     result: function result() {
       return formState.result;
     },
@@ -20499,7 +20634,7 @@ var mapDispatchToProps$6 = function mapDispatchToProps(dispatch, ownProps) {
 };
 var AutomapContainer = reactRedux.connect(mapStateToProps$7, mapDispatchToProps$6)(Automap);
 
-var classes$o = {"bond":"Bond-module_bond__EDfLY"};
+var classes$p = {"bond":"Bond-module_bond__EDfLY"};
 
 var _excluded$c = ["formState"];
 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; }
@@ -20510,7 +20645,7 @@ var Bond = function Bond(props) {
   var bondProps = bond.properties;
   return jsxRuntime.jsx(Dialog, {
     title: "Bond Properties",
-    className: classes$o.bond,
+    className: classes$p.bond,
     result: function result() {
       return formState.result;
     },
@@ -20551,7 +20686,7 @@ var mapStateToProps$6 = function mapStateToProps(state) {
 };
 var BondContainer = reactRedux.connect(mapStateToProps$6)(Bond);
 
-var classes$n = {"field":"IfThenSelect-module_field__9YaPA"};
+var classes$o = {"field":"IfThenSelect-module_field__9YaPA"};
 
 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; }
@@ -20574,14 +20709,14 @@ var IfThenSelect = function IfThenSelect(props) {
   });
   return jsxRuntime.jsx(Field, _objectSpread$p(_objectSpread$p({
     schema: desc,
-    className: classes$n.field
+    className: classes$o.field
   }, props), {}, {
     component: Select,
     options: getSelectOptionsFromSchema(desc)
   }));
 };
 
-var classes$m = {"button-common-styles":"RgroupLogic-module_button-common-styles__P-ABP","scrollbar":"RgroupLogic-module_scrollbar__gDniy","rgroupLogic":"RgroupLogic-module_rgroupLogic__q4RTy","resth":"RgroupLogic-module_resth__RL2qE"};
+var classes$n = {"button-common-styles":"RgroupLogic-module_button-common-styles__P-ABP","scrollbar":"RgroupLogic-module_scrollbar__gDniy","rgroupLogic":"RgroupLogic-module_rgroupLogic__q4RTy","resth":"RgroupLogic-module_resth__RL2qE"};
 
 var _excluded$b = ["formState", "label", "rgroupLabels"];
 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; }
@@ -20593,7 +20728,7 @@ var RgroupLogic = function RgroupLogic(props) {
       rest = _objectWithoutProperties__default["default"](props, _excluded$b);
   return jsxRuntime.jsx(Dialog, {
     title: "R-Group Logic Condition",
-    className: classes$m.rgroupLogic,
+    className: classes$n.rgroupLogic,
     result: function result() {
       return formState.result;
     },
@@ -20620,7 +20755,7 @@ var RgroupLogic = function RgroupLogic(props) {
       }), jsxRuntime.jsx(Field, {
         name: "resth",
         labelPos: "after",
-        className: classes$m.resth
+        className: classes$n.resth
       }), jsxRuntime.jsx(IfThenSelect, {
         name: "ifthen",
         label: label,
@@ -20643,7 +20778,7 @@ var mapStateToProps$5 = function mapStateToProps(state) {
 };
 var RgroupLogicContainer = reactRedux.connect(mapStateToProps$5)(RgroupLogic);
 
-var classes$l = {"button-common-styles":"Open-module_button-common-styles__NBSQP","scrollbar":"Open-module_scrollbar__sRvYM","open":"Open-module_open__m8V9g","textareaEditor":"Open-module_textareaEditor__ZbEVj","footerContent":"Open-module_footerContent__Q0hTw","buttonsContainer":"Open-module_buttonsContainer__L1HqU","openButton":"Open-module_openButton__cj3oU","cancelButton":"Open-module_cancelButton__0TQzA","copyButton":"Open-module_copyButton__KlXKd"};
+var classes$m = {"button-common-styles":"Open-module_button-common-styles__NBSQP","scrollbar":"Open-module_scrollbar__sRvYM","open":"Open-module_open__m8V9g","textareaEditor":"Open-module_textareaEditor__ZbEVj","footerContent":"Open-module_footerContent__Q0hTw","buttonsContainer":"Open-module_buttonsContainer__L1HqU","openButton":"Open-module_openButton__cj3oU","cancelButton":"Open-module_cancelButton__0TQzA","copyButton":"Open-module_copyButton__KlXKd"};
 
 var styles$8 = {"analyzingFileWrapper":"AnalyzingFile-module_analyzingFileWrapper__j0Ltf","fileBox":"AnalyzingFile-module_fileBox__ywFIh"};
 
@@ -20780,7 +20915,7 @@ var TextEditor = function TextEditor(_ref) {
       autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus;
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: jsxRuntime.jsx("textarea", {
-      className: classes$l.textareaEditor,
+      className: classes$m.textareaEditor,
       value: structStr,
       onChange: function onChange(event) {
         return inputHandler(event.target.value);
@@ -20823,22 +20958,22 @@ var FooterContent$1 = function FooterContent(_ref) {
       copyHandler = _ref.copyHandler,
       onCancel = _ref.onCancel;
   return jsxRuntime.jsxs("div", {
-    className: classes$l.footerContent,
+    className: classes$m.footerContent,
     children: [jsxRuntime.jsx("button", {
       onClick: onCancel,
-      className: classes$l.cancelButton,
+      className: classes$m.cancelButton,
       children: "Cancel"
     }), jsxRuntime.jsxs("div", {
-      className: classes$l.buttonsContainer,
+      className: classes$m.buttonsContainer,
       children: [jsxRuntime.jsx(DialogActionButton, {
         disabled: !structStr,
         clickHandler: openHandler,
-        styles: classes$l.openButton,
+        styles: classes$m.openButton,
         label: "Open as New Project"
       }, "openButton"), jsxRuntime.jsx(DialogActionButton, {
         disabled: !structStr,
         clickHandler: copyHandler,
-        styles: classes$l.copyButton,
+        styles: classes$m.copyButton,
         label: "Add to Canvas",
         title: "Structure will be loaded as fragment and added to Clipboard"
       }, "copyButton")]
@@ -20912,7 +21047,7 @@ var Open = function Open(props) {
   }
   return jsxRuntime.jsx(Dialog, {
     title: "Open structure",
-    className: classes$l.open,
+    className: classes$m.open,
     params: rest,
     result: function result() {
       return null;
@@ -21036,7 +21171,7 @@ function couldBeSaved(struct, format) {
   return null;
 }
 
-var classes$k = {"tabs":"Tabs-module_tabs__PuztJ","active":"Tabs-module_active__eeyNd"};
+var classes$l = {"tabs":"Tabs-module_tabs__PuztJ","active":"Tabs-module_active__eeyNd"};
 
 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; }
@@ -21088,10 +21223,10 @@ var Tabs = function (_Component) {
           className: className,
           tabIndex: tabIndex,
           children: jsxRuntime.jsx("li", {
-            className: classes$k.tabs,
+            className: classes$l.tabs,
             children: tabs.map(function (tabPanel, index) {
               return jsxRuntime.jsx("a", {
-                className: clsx__default["default"](_defineProperty__default["default"]({}, classes$k.active, _this2.state.tabIndex === index)),
+                className: clsx__default["default"](_defineProperty__default["default"]({}, classes$l.active, _this2.state.tabIndex === index)),
                 onClick: function onClick(ev) {
                   return _this2.changeTab(ev, index);
                 },
@@ -21109,7 +21244,7 @@ var Tabs = function (_Component) {
   return Tabs;
 }(React.Component);
 
-var classes$j = {"button-common-styles":"Save-module_button-common-styles__mpLS8","scrollbar":"Save-module_scrollbar__XMf7I","dialog":"Save-module_dialog__of-0M","formContainer":"Save-module_formContainer__v1pIq","tabs":"Save-module_tabs__TOB-R","warnings":"Save-module_warnings__1PxJT","warningsContainer":"Save-module_warningsContainer__-3yVy","warningsArr":"Save-module_warningsArr__bKUFY","previewBackground":"Save-module_previewBackground__AbaUf","previewArea":"Save-module_previewArea__-0SLb","loadingCirclesContainer":"Save-module_loadingCirclesContainer__COUKN","imageContainer":"Save-module_imageContainer__gFELk","previewMessage":"Save-module_previewMessage__CZfZB","ok":"Save-module_ok__SgeCM","cancel":"Save-module_cancel__SMkEV","saveTmpl":"Save-module_saveTmpl__O-d0T"};
+var classes$k = {"button-common-styles":"Save-module_button-common-styles__mpLS8","scrollbar":"Save-module_scrollbar__XMf7I","dialog":"Save-module_dialog__of-0M","formContainer":"Save-module_formContainer__v1pIq","tabs":"Save-module_tabs__TOB-R","warnings":"Save-module_warnings__1PxJT","warningsContainer":"Save-module_warningsContainer__-3yVy","warningsArr":"Save-module_warningsArr__bKUFY","previewBackground":"Save-module_previewBackground__AbaUf","previewArea":"Save-module_previewArea__-0SLb","loadingCirclesContainer":"Save-module_loadingCirclesContainer__COUKN","imageContainer":"Save-module_imageContainer__gFELk","previewMessage":"Save-module_previewMessage__CZfZB","ok":"Save-module_ok__SgeCM","cancel":"Save-module_cancel__SMkEV","saveTmpl":"Save-module_saveTmpl__O-d0T"};
 
 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; }
@@ -21261,7 +21396,7 @@ var SaveDialog = function (_Component) {
         tabIndex: 1
       }];
       return jsxRuntime.jsxs("div", {
-        className: classes$j.formContainer,
+        className: classes$k.formContainer,
         children: [jsxRuntime.jsxs(Form$1, _objectSpread$j(_objectSpread$j({
           schema: _this.saveSchema,
           init: {
@@ -21278,7 +21413,7 @@ var SaveDialog = function (_Component) {
             component: Select
           })]
         })), jsxRuntime.jsx(Tabs, {
-          className: classes$j.tabs,
+          className: classes$k.tabs,
           captions: tabs,
           tabIndex: _this.state.tabIndex,
           changeTab: _this.changeTab,
@@ -21299,13 +21434,13 @@ var SaveDialog = function (_Component) {
       var isCleanStruct = _this.props.struct.isBlank();
       var LoadingState = function LoadingState() {
         return jsxRuntime.jsx("div", {
-          className: classes$j.loadingCirclesContainer,
+          className: classes$k.loadingCirclesContainer,
           children: jsxRuntime.jsx(LoadingCircles, {})
         });
       };
       var ImageContent = function ImageContent() {
         return jsxRuntime.jsx("div", {
-          className: classes$j.imageContainer,
+          className: classes$k.imageContainer,
           children: !isCleanStruct && jsxRuntime.jsx("img", {
             src: "data:image/".concat(format, "+xml;base64,").concat(imageSrc),
             alt: "".concat(format, " preview")
@@ -21314,10 +21449,10 @@ var SaveDialog = function (_Component) {
       };
       var BinaryContent = function BinaryContent() {
         return jsxRuntime.jsx("div", {
-          className: classes$j.previewBackground,
+          className: classes$k.previewBackground,
           children: jsxRuntime.jsx("textarea", {
             value: "Can not display binary content",
-            className: classes$j.previewArea,
+            className: classes$k.previewArea,
             readOnly: true,
             ref: _this.textAreaRef
           })
@@ -21325,10 +21460,10 @@ var SaveDialog = function (_Component) {
       };
       var PreviewContent = function PreviewContent() {
         return jsxRuntime.jsx("div", {
-          className: classes$j.previewBackground,
+          className: classes$k.previewBackground,
           children: jsxRuntime.jsx("textarea", {
             value: structStr,
-            className: classes$j.previewArea,
+            className: classes$k.previewArea,
             readOnly: true,
             ref: _this.textAreaRef
           })
@@ -21351,12 +21486,12 @@ var SaveDialog = function (_Component) {
           var format = _formState$result3.format;
       var warnings = _this.getWarnings(format);
       return warnings.length ? jsxRuntime.jsx("div", {
-        className: classes$j.warnings,
+        className: classes$k.warnings,
         children: warnings.map(function (warning) {
           return jsxRuntime.jsx("div", {
-            className: classes$j.warningsContainer,
+            className: classes$k.warningsContainer,
             children: jsxRuntime.jsx("span", {
-              className: classes$j.warningsArr,
+              className: classes$k.warningsArr,
               children: warning
             })
           });
@@ -21377,7 +21512,7 @@ var SaveDialog = function (_Component) {
       var savingStruct = _this.isBinaryCdxFormat(format) && !isLoading ? ketcherCore.b64toBlob(structStr) : structStr;
       var isMoleculeContain = _this.props.struct.atoms.size && _this.props.struct.bonds.size;
       var buttons = [jsxRuntime.jsx("button", {
-        className: classes$j.saveTmpl,
+        className: classes$k.saveTmpl,
         disabled: disableControls || isCleanStruct || !isMoleculeContain,
         onClick: function onClick() {
           return _this.props.onTmplSave(_this.props.struct);
@@ -21386,7 +21521,7 @@ var SaveDialog = function (_Component) {
       }, "save-tmpl")];
       buttons.push( jsxRuntime.jsx("button", {
         mode: "onCancel",
-        className: classes$j.cancel,
+        className: classes$k.cancel,
         onClick: function onClick() {
           return _this.props.onOk({});
         },
@@ -21402,7 +21537,7 @@ var SaveDialog = function (_Component) {
           type: "image/".concat(format, "+xml"),
           onSave: _this.props.onOk,
           disabled: disableControls || !formState.valid || isCleanStruct || !_this.props.server,
-          className: classes$j.ok,
+          className: classes$k.ok,
           children: "Save"
         }, "save-image-button"));
       } else {
@@ -21414,7 +21549,7 @@ var SaveDialog = function (_Component) {
           server: _this.props.server,
           onSave: _this.props.onOk,
           disabled: disableControls || !formState.valid || isCleanStruct,
-          className: classes$j.ok,
+          className: classes$k.ok,
           children: "Save"
         }, "save-file-button"));
       }
@@ -21458,7 +21593,7 @@ var SaveDialog = function (_Component) {
     key: "render",
     value: function render() {
       return jsxRuntime.jsx(Dialog, {
-        className: classes$j.dialog,
+        className: classes$k.dialog,
         title: "Save Structure",
         params: this.props,
         buttons: this.getButtons(),
@@ -21497,7 +21632,7 @@ var mapDispatchToProps$4 = function mapDispatchToProps(dispatch) {
 };
 var Save = reactRedux.connect(mapStateToProps$3, mapDispatchToProps$4)(SaveDialog);
 
-var classes$i = {"enhancedStereo":"enhancedStereo-module_enhancedStereo__8FLSY","stereoLabelItem":"enhancedStereo-module_stereoLabelItem__lEf-0","labelGroupSelect":"enhancedStereo-module_labelGroupSelect__K7TYC"};
+var classes$j = {"enhancedStereo":"enhancedStereo-module_enhancedStereo__8FLSY","stereoLabelItem":"enhancedStereo-module_stereoLabelItem__lEf-0","labelGroupSelect":"enhancedStereo-module_labelGroupSelect__K7TYC"};
 
 var _excluded$8 = ["struct", "formState", "init"];
 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; }
@@ -21529,7 +21664,7 @@ var EnhancedStereo = function EnhancedStereo(props) {
   };
   return jsxRuntime.jsx(Dialog, {
     title: "Enhanced Stereochemistry",
-    className: classes$i.enhancedStereo,
+    className: classes$j.enhancedStereo,
     params: rest,
     result: function result() {
       return _result;
@@ -21566,7 +21701,7 @@ var EnhancedStereo = function EnhancedStereo(props) {
             name: "andNumber",
             schema: _.range(1, maxAnd + 1),
             type: "text",
-            className: classes$i.labelGroupSelect
+            className: classes$j.labelGroupSelect
           }), "Group"]
         }), maxOr !== 0 && jsxRuntime.jsxs("label", {
           children: [jsxRuntime.jsx(Field, {
@@ -21579,7 +21714,7 @@ var EnhancedStereo = function EnhancedStereo(props) {
             name: "orNumber",
             schema: _.range(1, maxOr + 1),
             type: "text",
-            className: classes$i.labelGroupSelect
+            className: classes$j.labelGroupSelect
           }), "Group"]
         }), jsxRuntime.jsxs("label", {
           children: [jsxRuntime.jsx(Field, {
@@ -21724,7 +21859,7 @@ var LabelEdit$1 = reactRedux.connect(function (store) {
   };
 })(LabelEdit);
 
-var classes$h = {"button-common-styles":"AtomInfo-module_button-common-styles__x3ucv","scrollbar":"AtomInfo-module_scrollbar__8GiyC","ket_atom_info":"AtomInfo-module_ket_atom_info__GOuZ6","none":"AtomInfo-module_none__PRuzx"};
+var classes$i = {"button-common-styles":"AtomInfo-module_button-common-styles__x3ucv","scrollbar":"AtomInfo-module_scrollbar__8GiyC","ket_atom_info":"AtomInfo-module_ket_atom_info__GOuZ6","none":"AtomInfo-module_none__PRuzx"};
 
 function AtomInfo(_ref) {
   var el = _ref.el,
@@ -21739,7 +21874,7 @@ function AtomInfo(_ref) {
     fontSize: '18px'
   };
   return jsxRuntime.jsxs("div", {
-    className: clsx__default["default"](classes$h.ket_atom_info, !isInfo && classes$h.none),
+    className: clsx__default["default"](classes$i.ket_atom_info, !isInfo && classes$i.none),
     children: [jsxRuntime.jsx("div", {
       style: numberStyle,
       children: el.number
@@ -21972,13 +22107,35 @@ var VerticalBoxWithLines = function VerticalBoxWithLines() {
   });
 };
 
-var classes$g = {"button-common-styles":"GenSet-module_button-common-styles__0Ro-U","scrollbar":"GenSet-module_scrollbar__Ev8Uz","genGroupLegendBox":"GenSet-module_genGroupLegendBox__CSTQr","legendBox":"GenSet-module_legendBox__0zIAk","SpecialNodes":"GenSet-module_SpecialNodes__oFKp3","AtomGenerics":"GenSet-module_AtomGenerics__MoQCf","GroupGenerics":"GenSet-module_GroupGenerics__pFPtX","Cyclic":"GenSet-module_Cyclic__VJRtt","Acyclic":"GenSet-module_Acyclic__R97MM","CyclicCarbo":"GenSet-module_CyclicCarbo__Aanb0","AcyclicCarbo":"GenSet-module_AcyclicCarbo__nowGn","CyclicHetero":"GenSet-module_CyclicHetero__bbOnT","AcyclicHetero":"GenSet-module_AcyclicHetero__hnr4G","button":"GenSet-module_button__TCbeM","selected":"GenSet-module_selected__58d2u"};
+var classes$h = {"button-common-styles":"GenSet-module_button-common-styles__0Ro-U","scrollbar":"GenSet-module_scrollbar__Ev8Uz","genGroupLegendBox":"GenSet-module_genGroupLegendBox__CSTQr","legendBox":"GenSet-module_legendBox__0zIAk","SpecialNodes":"GenSet-module_SpecialNodes__oFKp3","AtomGenerics":"GenSet-module_AtomGenerics__MoQCf","GroupGenerics":"GenSet-module_GroupGenerics__pFPtX","Cyclic":"GenSet-module_Cyclic__VJRtt","Acyclic":"GenSet-module_Acyclic__R97MM","CyclicCarbo":"GenSet-module_CyclicCarbo__Aanb0","AcyclicCarbo":"GenSet-module_AcyclicCarbo__nowGn","CyclicHetero":"GenSet-module_CyclicHetero__bbOnT","AcyclicHetero":"GenSet-module_AcyclicHetero__hnr4G"};
 
 var isGenericGroup = function isGenericGroup(group) {
   var cyclicGroups = ['Acyclic', 'Cyclic', 'Acyclic Carbo', 'Cyclic Carbo', 'Acyclic Hetero', 'Cyclic Hetero'];
   return cyclicGroups.includes(group);
 };
 
+var classes$g = {"button-common-styles":"ButtonGenSet-module_button-common-styles__3bEj7","scrollbar":"ButtonGenSet-module_scrollbar__CKIcM","button":"ButtonGenSet-module_button__hBoCQ","selected":"ButtonGenSet-module_selected__XAfYj"};
+
+var ButtonGenSet = function ButtonGenSet(_ref) {
+  var button = _ref.button,
+      onAtomSelect = _ref.onAtomSelect,
+      selected = _ref.selected,
+      disabled = _ref.disabled;
+  var titleText = disabled ? "".concat(button.label, " is disabled") : button.description || button.label;
+  return jsxRuntime.jsx("button", {
+    onClick: function onClick() {
+      return onAtomSelect(button.label, false);
+    },
+    onDoubleClick: function onDoubleClick() {
+      return onAtomSelect(button.label, true);
+    },
+    title: titleText,
+    disabled: disabled,
+    className: clsx__default["default"](_defineProperty__default["default"]({}, classes$g.selected, selected(button.label)), classes$g.button),
+    children: button.label
+  });
+};
+
 var getGroupClassName = function getGroupClassName(groupName) {
   return groupName.replaceAll(' ', '');
 };
@@ -21987,7 +22144,8 @@ function GenSet(_ref) {
       selected = _ref.selected,
       onAtomSelect = _ref.onAtomSelect,
       className = _ref.className,
-      group = _ref.group;
+      group = _ref.group,
+      disabledQueryElements = _ref.disabledQueryElements;
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: labels.map(function (item, index) {
       var buttons = item.items;
@@ -21995,29 +22153,24 @@ function GenSet(_ref) {
       return jsxRuntime.jsxs("fieldset", {
         className: className,
         children: [jsxRuntime.jsx("div", {
-          className: classes$g[getGroupClassName(group)],
+          className: classes$h[getGroupClassName(group)],
           children: buttons.map(function (button, index) {
-            return jsxRuntime.jsx("button", {
-              onClick: function onClick() {
-                return onAtomSelect(button.label, false);
-              },
-              onDoubleClick: function onDoubleClick() {
-                return onAtomSelect(button.label, true);
-              },
-              title: button.description || button.label,
-              className: clsx__default["default"](_defineProperty__default["default"]({}, classes$g.selected, selected(button.label)), classes$g.button),
-              children: button.label
+            return jsxRuntime.jsx(ButtonGenSet, {
+              button: button,
+              onAtomSelect: onAtomSelect,
+              selected: selected,
+              disabled: Boolean(disabledQueryElements === null || disabledQueryElements === void 0 ? void 0 : disabledQueryElements.includes(button.label))
             }, index);
           })
         }), !isGenericGroup(group) && caption && jsxRuntime.jsx("div", {
-          className: classes$g.legendBox,
+          className: classes$h.legendBox,
           children: jsxRuntime.jsx("legend", {
             children: caption
           })
         }), isGenericGroup(group) && caption && jsxRuntime.jsx("div", {
-          className: classes$g.genGroupLegendBox,
+          className: classes$h.genGroupLegendBox,
           children: jsxRuntime.jsx("legend", {
-            className: classes$g.genGroupLegend,
+            className: classes$h.genGroupLegend,
             children: caption
           })
         })]
@@ -22036,7 +22189,8 @@ var getLegendClassname = function getLegendClassname(title) {
 var GenGroup = function GenGroup(_ref) {
   var group = _ref.group,
       onAtomSelect = _ref.onAtomSelect,
-      selected = _ref.selected;
+      selected = _ref.selected,
+      disabledQueryElements = _ref.disabledQueryElements;
   return jsxRuntime.jsx("div", {
     className: styles$2.fieldFlexWrapper,
     children: jsxRuntime.jsxs("fieldset", {
@@ -22051,7 +22205,8 @@ var GenGroup = function GenGroup(_ref) {
           selected: selected,
           onAtomSelect: onAtomSelect,
           className: styles$2.subGroup,
-          group: group.title
+          group: group.title,
+          disabledQueryElements: disabledQueryElements
         })
       })]
     })
@@ -22074,36 +22229,38 @@ var getGenericsGroupsMap = function getGenericsGroupsMap(tree) {
   }
   return newGroups;
 };
-var renderGenGroupComponent = function renderGenGroupComponent(group, selected, onAtomSelect) {
+var renderGenGroupComponent = function renderGenGroupComponent(group, selected, onAtomSelect, disabledQueryElements) {
   return jsxRuntime.jsx(GenGroup, {
     group: groupsMap[group],
     selected: selected,
-    onAtomSelect: onAtomSelect
+    onAtomSelect: onAtomSelect,
+    disabledQueryElements: disabledQueryElements
   });
 };
 var groupsMap = getGenericsGroupsMap(ketcherCore.Generics);
 function GenericGroups(_ref) {
   var selected = _ref.selected,
-      onAtomSelect = _ref.onAtomSelect;
+      onAtomSelect = _ref.onAtomSelect,
+      disabledQueryElements = _ref.disabledQueryElements;
   return jsxRuntime.jsxs("div", {
     className: classes$f.genericGroups,
     children: [jsxRuntime.jsxs("div", {
       className: classes$f.topGroupsContainer,
-      children: [renderGenGroupComponent(groupNames.atomsGen, selected, onAtomSelect), renderGenGroupComponent(groupNames.specialNodes, selected, onAtomSelect)]
-    }), renderGenGroupComponent(groupNames.groupGen, selected, onAtomSelect), jsxRuntime.jsx(HorizontalBoxWithLines, {}), jsxRuntime.jsxs("div", {
+      children: [renderGenGroupComponent(groupNames.atomsGen, selected, onAtomSelect, disabledQueryElements), renderGenGroupComponent(groupNames.specialNodes, selected, onAtomSelect, disabledQueryElements)]
+    }), renderGenGroupComponent(groupNames.groupGen, selected, onAtomSelect, disabledQueryElements), jsxRuntime.jsx(HorizontalBoxWithLines, {}), jsxRuntime.jsxs("div", {
       className: classes$f.groupGenerics,
       children: [jsxRuntime.jsxs("div", {
-        children: [renderGenGroupComponent(groupNames.groupAcyclic, selected, onAtomSelect), jsxRuntime.jsxs("div", {
+        children: [renderGenGroupComponent(groupNames.groupAcyclic, selected, onAtomSelect, disabledQueryElements), jsxRuntime.jsxs("div", {
           className: classes$f.subgroupContainer,
           children: [jsxRuntime.jsx(VerticalBoxWithLines, {}), jsxRuntime.jsxs("div", {
-            children: [renderGenGroupComponent(groupNames.acyclicCarbo, selected, onAtomSelect), renderGenGroupComponent(groupNames.acyclicHetero, selected, onAtomSelect)]
+            children: [renderGenGroupComponent(groupNames.acyclicCarbo, selected, onAtomSelect, disabledQueryElements), renderGenGroupComponent(groupNames.acyclicHetero, selected, onAtomSelect, disabledQueryElements)]
           })]
         })]
       }), jsxRuntime.jsxs("div", {
-        children: [renderGenGroupComponent(groupNames.groupCyclic, selected, onAtomSelect), jsxRuntime.jsxs("div", {
+        children: [renderGenGroupComponent(groupNames.groupCyclic, selected, onAtomSelect, disabledQueryElements), jsxRuntime.jsxs("div", {
           className: classes$f.subgroupContainer,
           children: [jsxRuntime.jsx(VerticalBoxWithLines, {}), jsxRuntime.jsxs("div", {
-            children: [renderGenGroupComponent(groupNames.cyclicCarbo, selected, onAtomSelect), renderGenGroupComponent(groupNames.cyclicHetero, selected, onAtomSelect)]
+            children: [renderGenGroupComponent(groupNames.cyclicCarbo, selected, onAtomSelect, disabledQueryElements), renderGenGroupComponent(groupNames.cyclicHetero, selected, onAtomSelect, disabledQueryElements)]
           })]
         })]
       })]
@@ -22384,7 +22541,8 @@ var Table = function Table(props) {
     needMargin: false,
     children: jsxRuntime.jsx(GenericGroups, {
       selected: selected,
-      onAtomSelect: onAtomSelect
+      onAtomSelect: onAtomSelect,
+      disabledQueryElements: props.disabledQueryElements
     })
   });
 };
@@ -22399,10 +22557,14 @@ function mapSelectionToProps(editor) {
   return {};
 }
 var mapStateToProps$1 = function mapStateToProps(state, ownProps) {
+  var editor = state.editor;
   if (ownProps.values || ownProps.label) {
     return {};
   }
-  return mapSelectionToProps(state.editor);
+  var disabledQueryElements = editor.render.options.disableQueryElements;
+  return _objectSpread$a({
+    disabledQueryElements: disabledQueryElements
+  }, mapSelectionToProps(editor));
 };
 var mapDispatchToProps$2 = function mapDispatchToProps(dispatch, ownProps) {
   return {
@@ -22701,7 +22863,7 @@ var classes$8 = {"button-common-styles":"template-lib-module_button-common-style
 
 var _excluded$3 = ["onInit"],
     _excluded2$1 = ["name", "onNameEdit", "onAttachEdit"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 function ownKeys$6(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$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); 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); }; }
@@ -22709,14 +22871,15 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var TemplateEditDialog = styled__default["default"](Dialog)(_templateObject || (_templateObject = _taggedTemplateLiteral__default["default"](["\n  background-color: #fff;\n\n  & header {\n    text-transform: none;\n    border-bottom: 1px solid #e1e5ea;\n    margin: 0;\n    padding: 12px;\n  }\n\n  & form {\n    display: flex;\n\n    & label::after {\n      top: 92px;\n      margin-right: 12px;\n    }\n  }\n"])));
 var Editor$2 = styled__default["default"]('div')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n  border: 1px solid #b4b9d6;\n  background-color: #ffff;\n  border-radius: 5px;\n  position: relative;\n  height: 300px;\n  width: 330px;\n  overflow: hidden;\n\n  & .structEditor {\n    height: 100%;\n    width: 100%;\n    border: none;\n  }\n"])));
 var Warning = styled__default["default"]('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default["default"](["\n  padding: 0 5px;\n"])));
-var LeftColumn = styled__default["default"]('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  padding: 12px;\n  border-radius: 0 0 0 8px;\n  background-color: #eff2f5;\n"])));
-var RightColumn = styled__default["default"]('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  width: 40%;\n  min-width: 200px;\n  box-sizing: border-box;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n"])));
-var NameInput = styled__default["default"](Field)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 12px;\n\n  & > input[type='text'] {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    padding: 4px 16px 4px 8px;\n    border: 1px solid #cad3dd;\n    border-radius: 4px;\n    line-height: 16px;\n    font-size: 14px;\n    margin-top: 2px;\n\n    &:hover {\n      border-color: #43b5c0;\n    }\n\n    &:hover,\n    :focus {\n      box-shadow: none;\n    }\n  }\n\n  & span {\n    display: block;\n    width: 100%;\n  }\n"])));
-var AttachmentOutput = styled__default["default"]('span')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  display: block;\n  width: 100%;\n  height: 24px;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  border: 1px solid #cad3dd;\n  border-radius: 4px;\n  line-height: 14px;\n  font-size: 14px;\n  background-color: #eff2f5;\n  margin-top: 2px;\n"])));
-var Buttons = styled__default["default"]('div')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: row;\n  margin-top: auto;\n  justify-content: flex-end;\n  gap: 8px;\n"])));
-var buttonCommonStyles = react.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n  width: fit-content;\n  padding: 5px 8px;\n  text-transform: none;\n  font-size: 12px;\n  line-height: 14px;\n  box-shadow: none;\n"])));
-var SaveButton = styled__default["default"](material.Button)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n  ", "\n  background-color: #167782;\n\n  &:hover {\n    background-color: #43b5c0;\n    box-shadow: none;\n  }\n\n  &:disabled {\n    background-color: #e1e5ea;\n    color: #333333;\n  }\n"])), buttonCommonStyles);
-var CancelButton = styled__default["default"](material.Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default["default"](["\n  ", "\n  border-color: #585858;\n  color: #585858;\n\n  &:hover {\n    border-color: #333333;\n    color: #333333;\n    box-shadow: none;\n  }\n"])), buttonCommonStyles);
+var Message = styled__default["default"]('div')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default["default"](["\n  background-color: #e1e5ea;\n  color: #333333;\n  padding: 10px 12px;\n  border-top: 1px solid #cad3dd;\n  border-bottom: 1px solid #cad3dd;\n"])));
+var LeftColumn = styled__default["default"]('div')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default["default"](["\n  padding: 12px;\n  border-radius: 0 0 0 8px;\n  background-color: #eff2f5;\n"])));
+var RightColumn = styled__default["default"]('div')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default["default"](["\n  width: 40%;\n  min-width: 200px;\n  box-sizing: border-box;\n  padding: 12px;\n  display: flex;\n  flex-direction: column;\n"])));
+var NameInput = styled__default["default"](Field)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 12px;\n\n  & input[type='text'] {\n    display: block;\n    width: 100%;\n    box-sizing: border-box;\n    border: 1px solid #cad3dd;\n    border-radius: 4px;\n    line-height: 16px;\n    font-size: 14px;\n    margin-top: 4px;\n\n    &:hover {\n      border-color: #43b5c0;\n    }\n\n    &:hover,\n    :focus {\n      box-shadow: none;\n    }\n  }\n\n  & span {\n    display: block;\n    width: 100%;\n  }\n"])));
+var AttachmentOutput = styled__default["default"]('span')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default["default"](["\n  display: block;\n  width: 100%;\n  height: 24px;\n  box-sizing: border-box;\n  padding: 4px 8px;\n  border: 1px solid #cad3dd;\n  border-radius: 4px;\n  line-height: 14px;\n  font-size: 14px;\n  background-color: #eff2f5;\n  margin-top: 4px;\n"])));
+var Buttons = styled__default["default"]('div')(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default["default"](["\n  display: flex;\n  flex-direction: row;\n  margin-top: auto;\n  justify-content: flex-end;\n  gap: 8px;\n"])));
+var buttonCommonStyles = react.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default["default"](["\n  width: fit-content;\n  padding: 5px 8px;\n  text-transform: none;\n  font-size: 12px;\n  line-height: 14px;\n  box-shadow: none;\n"])));
+var SaveButton = styled__default["default"](material.Button)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default["default"](["\n  ", "\n  background-color: #167782;\n\n  &:hover {\n    background-color: #43b5c0;\n    box-shadow: none;\n  }\n\n  &:disabled {\n    background-color: #e1e5ea;\n    color: #333333;\n  }\n"])), buttonCommonStyles);
+var CancelButton = styled__default["default"](material.Button)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default["default"](["\n  ", "\n  border-color: #585858;\n  color: #585858;\n\n  &:hover {\n    border-color: #333333;\n    color: #333333;\n    box-shadow: none;\n  }\n"])), buttonCommonStyles);
 var editorStyles = {
   selectionStyle: {
     fill: '#167782',
@@ -22740,6 +22903,11 @@ var Attach = function (_Component) {
         props = _objectWithoutProperties__default["default"](_ref, _excluded$3);
     _classCallCheck__default["default"](this, Attach);
     _this = _super.call(this);
+    _defineProperty__default["default"](_assertThisInitialized__default["default"](_this), "MODES", {
+      SAVE: 'save',
+      EDIT: 'edit'
+    });
+    _this.mode = _.isEmpty(props.tmpl.props) ? _this.MODES.SAVE : _this.MODES.EDIT;
     _this.tmpl = initTmpl(props.tmpl);
     onInit(_this.tmpl.struct.name, _this.tmpl.props);
     _this.onResult = _this.onResult.bind(_assertThisInitialized__default["default"](_this));
@@ -22783,8 +22951,10 @@ var Attach = function (_Component) {
       var options = Object.assign(editorStyles, this.props.globalSettings, {
         scale: getScale(struct)
       });
-      return jsxRuntime.jsx(TemplateEditDialog, {
-        title: "Template edit",
+      var dialogTitle = this.mode === this.MODES.SAVE ? 'Save to Templates' : 'Template Edit';
+      var warningObject = this.mode === this.MODES.SAVE ? 'Templates' : 'Edited templates';
+      return jsxRuntime.jsxs(TemplateEditDialog, {
+        title: dialogTitle,
         result: this.onResult,
         valid: function valid() {
           return _this2.props.formState.valid && name;
@@ -22792,7 +22962,13 @@ var Attach = function (_Component) {
         params: prop,
         buttons: [],
         needMargin: false,
-        children: jsxRuntime.jsxs(Form$1, _objectSpread$6(_objectSpread$6({
+        children: [jsxRuntime.jsxs(Message, {
+          children: [jsxRuntime.jsxs("div", {
+            children: [warningObject, " are saved locally and cannot be accessed on different browsers or computers."]
+          }), jsxRuntime.jsx("div", {
+            children: "Be aware that other users of the same computer and browser can access them as well."
+          })]
+        }), jsxRuntime.jsxs(Form$1, _objectSpread$6(_objectSpread$6({
           schema: attachSchema,
           customValid: {
             name: function name(_name) {
@@ -22844,11 +23020,11 @@ var Attach = function (_Component) {
                 },
                 className: classes$8.button,
                 disabled: !this.checkIsValidName(name),
-                children: "Apply"
+                children: this.mode === this.MODES.SAVE ? 'Save' : 'Edit'
               })]
             })]
           })]
-        }))
+        }))]
       });
     }
   }]);
@@ -23743,10 +23919,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))
   });
 }
@@ -23790,6 +23966,24 @@ var mergeProps = function mergeProps(stateProps, dispatchProps) {
 };
 var ModalContainer = reactRedux.connect(mapStateToProps, mapDispatchToProps$1, mergeProps)(Modal);
 
+function generateCommonProperties(selectedElements, normalizedElement) {
+  var properties = Object.getOwnPropertyNames(normalizedElement);
+  var resultElementAttributes = {};
+  properties.forEach(function (property) {
+    var uniqueValues = new Set();
+    selectedElements.forEach(function (element) {
+      uniqueValues.add(element[property]);
+    });
+    var allElementsHaveTheSameValue = uniqueValues.size === 1;
+    if (allElementsHaveTheSameValue) {
+      resultElementAttributes[property] = normalizedElement[property];
+    } else {
+      resultElementAttributes[property] = '';
+    }
+  });
+  return resultElementAttributes;
+}
+
 function ownKeys$1(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$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function initEditor(dispatch, getState) {
@@ -23833,7 +24027,7 @@ function initEditor(dispatch, getState) {
     },
     onElementEdit: function onElementEdit(selem) {
       if (isAtomsArray(selem)) {
-        var atomAttributes = generateCommonProperties(selem);
+        var atomAttributes = generateCommonProperties(selem, fromAtom(selem[0]));
         return openDialog(dispatch, 'atomProps', _objectSpread$1(_objectSpread$1({}, atomAttributes), {}, {
           isMultipleAtoms: true
         })).then(toElement);
@@ -23896,8 +24090,9 @@ function initEditor(dispatch, getState) {
     onQuickEdit: function onQuickEdit(atom) {
       return openDialog(dispatch, 'labelEdit', atom);
     },
-    onBondEdit: function onBondEdit(bond) {
-      return openDialog(dispatch, 'bondProps', fromBond(bond)).then(toBond);
+    onBondEdit: function onBondEdit(bonds) {
+      var bondsAttributes = generateCommonProperties(bonds, bonds[0]);
+      return openDialog(dispatch, 'bondProps', fromBond(bondsAttributes)).then(toBond);
     },
     onRgroupEdit: function onRgroupEdit(rgroup) {
       var struct = getState().editor.struct();
@@ -24111,8 +24306,8 @@ var KetcherBuilder = function () {
                   initApp(element, staticResourcesUrl, {
                     buttons: buttons || {},
                     errorHandler: errorHandler || null,
-                    version: "2.9.0-rc.7" ,
-                    buildDate: "2023-04-19T07:45:20" ,
+                    version: "2.10.0-rc.1" ,
+                    buildDate: "2023-04-21T11:09:47" ,
                     buildNumber: ''
                   }, structService, resolve);
                 });