@bigbinary/neeto-molecules 1.7.0-beta.1 → 1.7.0-beta.2

package/dist/cjs/Breadcrumbs.js

@@ -10,7 +10,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
 
-var css = ".neeto-molecules-breadcrumbs-wrap{display:flex}@media screen and (max-width:768px){.neeto-molecules-breadcrumbs-wrap{flex-wrap:wrap}}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb-link{color:rgb(var(--neeto-ui-gray-500));padding:8px 5px}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb-link:hover{color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-breadcrumbs-wrap .neeto-molecules-breadcrumb-separator{margin:0 4px}";
+var css = ".neeto-molecules-breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}.neeto-molecules-breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-breadcrumb-separator{font-size:12px;line-height:16px;margin:0 12px}.neeto-molecules-breadcrumbs-wrap{display:flex;margin:0 0 40px}@media screen and (max-width:768px){.neeto-molecules-breadcrumbs-wrap{margin:0 0 16px}}";
 n(css,{});
 
 var Breadcrumbs = function Breadcrumbs(_ref) {
@@ -31,18 +31,13 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       to: link
     }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
       className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link",
-      component: "p",
+      component: "span",
       "data-cy": text,
       "data-test-id": text,
       style: "body2",
       weight: "normal"
-    }, text)), (index + 1 !== breadcrumbs.length || hasTrailingSeparator) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-      className: "neeto-molecules-breadcrumb-separator neeto-ui-text-gray-500",
-      component: "p",
-      "data-cy": "breadcrumb-divider-".concat(index),
-      "data-test-id": "breadcrumb-divider-".concat(index),
-      style: "body2",
-      weight: "normal"
+    }, text)), (index + 1 !== breadcrumbs.length || hasTrailingSeparator) && /*#__PURE__*/React__default["default"].createElement("span", {
+      className: "neeto-molecules-breadcrumb-separator neeto-ui-text-black"
     }, "/"));
   }));
 };

package/dist/cjs/Breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.js","sources":["../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../../src/components/Breadcrumbs/index.jsx"],"sourcesContent":["var e=[],t=[];function n(n,r){if(n&&\"undefined\"!=typeof document){var a,s=!0===r.prepend?\"prepend\":\"append\",d=!0===r.singleTag,i=\"string\"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName(\"head\")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement(\"style\");if(e.setAttribute(\"type\",\"text/css\"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a=\"prepend\"===s?\"afterbegin\":\"beforeend\";return i.insertAdjacentElement(a,e),e}}export{n as default};\n","import React from \"react\";\n\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\n\nimport \"./breadcrumbs.scss\";\n\nconst Breadcrumbs = ({ breadcrumbs, hasTrailingSeparator = false }) => (\n  <div className=\"neeto-molecules-breadcrumbs-wrap\">\n    {breadcrumbs.map(({ text, link = \"#\" }, index) => (\n      <div\n        className=\"neeto-molecules-breadcrumb\"\n        data-cy=\"header-breadcrumb\"\n        key={index}\n      >\n        <Link to={link}>\n          <Typography\n            className=\"neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link\"\n            component=\"p\"\n            data-cy={text}\n            data-test-id={text}\n            style=\"body2\"\n            weight=\"normal\"\n          >\n            {text}\n          </Typography>\n        </Link>\n        {(index + 1 !== breadcrumbs.length || hasTrailingSeparator) && (\n          <Typography\n            className=\"neeto-molecules-breadcrumb-separator neeto-ui-text-gray-500\"\n            component=\"p\"\n            data-cy={`breadcrumb-divider-${index}`}\n            data-test-id={`breadcrumb-divider-${index}`}\n            style=\"body2\"\n            weight=\"normal\"\n          >\n            /\n          </Typography>\n        )}\n      </div>\n    ))}\n  </div>\n);\n\nBreadcrumbs.propTypes = {\n  /**\n   * To show breadcrumbs. `text` accepts a text string to be shown as the breadcrumb and `link` accepts relative URL path for the breadcrumb.\n   */\n  breadcrumbs: PropTypes.arrayOf(\n    PropTypes.shape({\n      text: PropTypes.string,\n      link: PropTypes.string,\n    })\n  ),\n  /**\n   * An optional `boolean` to control whether the component should show a trailing separator at the end. This will be useful if there's something like entity name to be shown after the breadcrumb component.\n   */\n  hasTrailingSeparator: PropTypes.bool,\n};\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","_ref","breadcrumbs","_ref$hasTrailingSepar","hasTrailingSeparator","React","createElement","className","map","_ref2","index","text","_ref2$link","link","key","Link","to","Typography","component","style","weight","length","concat"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.js","sources":["../../node_modules/rollup-plugin-styles/dist/runtime/inject-css.js","../../src/components/Breadcrumbs/index.jsx"],"sourcesContent":["var e=[],t=[];function n(n,r){if(n&&\"undefined\"!=typeof document){var a,s=!0===r.prepend?\"prepend\":\"append\",d=!0===r.singleTag,i=\"string\"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName(\"head\")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c()}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n))}function c(){var e=document.createElement(\"style\");if(e.setAttribute(\"type\",\"text/css\"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a=\"prepend\"===s?\"afterbegin\":\"beforeend\";return i.insertAdjacentElement(a,e),e}}export{n as default};\n","import React from \"react\";\n\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { Link } from \"react-router-dom\";\n\nimport \"./breadcrumbs.scss\";\n\nconst Breadcrumbs = ({ breadcrumbs, hasTrailingSeparator = false }) => (\n  <div className=\"neeto-molecules-breadcrumbs-wrap\">\n    {breadcrumbs.map(({ text, link = \"#\" }, index) => (\n      <div\n        className=\"neeto-molecules-breadcrumb\"\n        data-cy=\"header-breadcrumb\"\n        key={index}\n      >\n        <Link to={link}>\n          <Typography\n            className=\"neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link\"\n            component=\"span\"\n            data-cy={text}\n            data-test-id={text}\n            style=\"body2\"\n            weight=\"normal\"\n          >\n            {text}\n          </Typography>\n        </Link>\n        {(index + 1 !== breadcrumbs.length || hasTrailingSeparator) && (\n          <span className=\"neeto-molecules-breadcrumb-separator neeto-ui-text-black\">\n            /\n          </span>\n        )}\n      </div>\n    ))}\n  </div>\n);\n\nBreadcrumbs.propTypes = {\n  /**\n   * To show breadcrumbs. `text` accepts a text string to be shown as the breadcrumb and `link` accepts relative URL path for the breadcrumb.\n   */\n  breadcrumbs: PropTypes.arrayOf(\n    PropTypes.shape({\n      text: PropTypes.string,\n      link: PropTypes.string,\n    })\n  ),\n};\n\nexport default Breadcrumbs;\n"],"names":["Breadcrumbs","_ref","breadcrumbs","_ref$hasTrailingSepar","hasTrailingSeparator","React","createElement","className","map","_ref2","index","text","_ref2$link","link","key","Link","to","Typography","component","style","weight","length"],"mappings":"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"}

package/dist/cjs/Builder.js

@@ -3,14 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
-var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
-var neetoIcons = require('@bigbinary/neeto-icons');
-var neetoui = require('@bigbinary/neetoui');
 var ramda = require('ramda');
 var general = require('@bigbinary/neeto-commons-frontend/utils/general');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
 var reactI18next = require('react-i18next');
+var classnames = require('classnames');
 var dnd = require('@hello-pangea/dnd');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
@@ -117,6 +116,18 @@ function _defineProperty(obj, key, value) {
   return obj;
 }
 
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css = ":root{--neeto-molecule-builder-left-sidebar-width:360px;--neeto-molecule-builder-left-sidebar-header-height:70px;--neeto-molecule-builder-left-sidebar-search-height:40px;--neeto-molecule-builder-right-sidebar-width:420px}.neeto-molecules-builder-elements-list-panel{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:360px;width:var(--neeto-molecule-builder-left-sidebar-width)}.neeto-molecules-builder-questions-list-panel__scroll{height:calc(100% - 70px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height));overflow-y:auto;padding:8px 24px}.neeto-molecules-builder-questions-list-panel__scroll.neeto-molecules-builder-questions-list-panel__scroll--small{height:calc(100% - 110px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height) - var(--neeto-molecule-builder-left-sidebar-search-height))}.neeto-molecules-builder-elements-list{margin-bottom:24px}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper{border-bottom:none}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item{padding:12px 0}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item .neeto-ui-accordion__item-handle{color:rgb(var(--neeto-ui-gray-600));font-size:var(--neeto-ui-text-xs);font-weight:var(--neeto-ui-font-semibold);text-transform:uppercase;transition:var(--neeto-ui-transition)}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item .neeto-ui-accordion__item-toggle-icon{transform:rotate(90deg)!important}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item:hover{background-color:transparent}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item.neeto-ui-accordion__item--open .neeto-ui-accordion__item-handle,.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item:hover .neeto-ui-accordion__item-handle{color:rgb(var(--neeto-ui-gray-800))}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__item.neeto-ui-accordion__item--open .neeto-ui-accordion__item-toggle-icon{transform:rotate(270deg)!important}.neeto-molecules-builder-elements-list .neeto-ui-accordion__wrapper .neeto-ui-accordion__drop{padding:0}.neeto-molecules-builder-element-properties-panel{height:100%;min-width:420px;min-width:var(--neeto-molecule-builder-right-sidebar-width);padding-left:24px;padding-top:24px;width:420px;width:var(--neeto-molecule-builder-right-sidebar-width)}.neeto-molecules-builder-element--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}";
+n(css,{});
+
+var Body = function Body(props) {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-builder-questions-list-panel__scroll neeto-molecules-builder-questions-list-panel__scroll--small",
+    "data-testid": props["data-testid"]
+  }, props.children);
+};
+
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -132,51 +143,6 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _objectWithoutPropertiesLoose(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-  return target;
-}
-
-function _objectWithoutProperties(source, excluded) {
-  if (source == null) return {};
-  var target = _objectWithoutPropertiesLoose(source, excluded);
-  var key, i;
-  if (Object.getOwnPropertySymbols) {
-    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
-    for (i = 0; i < sourceSymbolKeys.length; i++) {
-      key = sourceSymbolKeys[i];
-      if (excluded.indexOf(key) >= 0) continue;
-      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-      target[key] = source[key];
-    }
-  }
-  return target;
-}
-
-var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
-
-var css = ":root{--neeto-molecule-builder-left-sidebar-width:288px;--neeto-molecule-builder-left-sidebar-width-lg:360px;--neeto-molecule-builder-left-sidebar-header-height:70px;--neeto-molecule-builder-left-sidebar-search-height:40px;--neeto-molecule-builder-right-sidebar-width:420px}.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);position:relative;transition:all .15s;width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg);z-index:101}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel__wrapper{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper{left:0;position:fixed;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{transform:scale(-1)}@media screen and (max-width:767px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{top:72px}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__wrapper--collapsed .neeto-molecules-builder-elements-list-panel__toggler{left:8px;right:auto}}.neeto-molecules-builder-elements-list-panel__container{height:100%;overflow:hidden;width:100%}.neeto-molecules-builder-elements-list-panel{height:100%;min-width:360px;min-width:var(--neeto-molecule-builder-left-sidebar-width-lg);width:360px;width:var(--neeto-molecule-builder-left-sidebar-width-lg)}@media screen and (min-width:768px) and (max-width:1279px){.neeto-molecules-builder-elements-list-panel{min-width:288px;min-width:var(--neeto-molecule-builder-left-sidebar-width);width:288px;width:var(--neeto-molecule-builder-left-sidebar-width)}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel{padding-top:24px;width:100%}}.neeto-molecules-builder-elements-list-panel__toggler{flex-shrink:0;left:calc(100% + 8px);position:absolute;top:8px;transition:color .3s ease-in-out}@media screen and (min-width:1024px){.neeto-molecules-builder-elements-list-panel__toggler{opacity:0;pointer-events:none}}@media screen and (max-width:576px){.neeto-molecules-builder-elements-list-panel__toggler{left:24px}}.neeto-molecules-builder-questions-list-panel__scroll{height:calc(100% - 70px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height));overflow-y:auto;padding:8px 24px;width:100%}.neeto-molecules-builder-questions-list-panel__scroll.neeto-molecules-builder-questions-list-panel__scroll--small{height:calc(100% - 110px);height:calc(100% - var(--neeto-molecule-builder-left-sidebar-header-height) - var(--neeto-molecule-builder-left-sidebar-search-height))}.neeto-molecules-builder-element-properties-panel__wrapper{height:100%;min-width:420px;min-width:var(--neeto-molecule-builder-right-sidebar-width);position:relative;transition:all .15s;width:420px;width:var(--neeto-molecule-builder-right-sidebar-width);z-index:101}.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:0;pointer-events:none;position:absolute;right:8px;top:8px}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel__wrapper .neeto-molecules-builder-properties-panel__close{opacity:1;pointer-events:all}.neeto-molecules-builder-element-properties-panel__wrapper{position:fixed;right:0;top:0;transition:none}}@media screen and (max-width:576px){.neeto-molecules-builder-element-properties-panel__wrapper{height:100%;max-width:100%;min-width:0;width:100%}}.neeto-molecules-builder-element-properties-panel__wrapper--collapsed{max-width:0;min-width:0;width:0}.neeto-molecules-builder-element-properties-panel{display:flex;flex-direction:column;height:100%;min-width:0;overflow-y:auto;padding-left:24px;padding-top:24px;width:100%}.neeto-molecules-builder-element-properties-panel--collapsed{max-width:0;min-width:0;padding:0;width:0}@media screen and (max-width:1279px){.neeto-molecules-builder-element-properties-panel{padding-top:48px}}.neeto-molecules-builder-element--active{border-color:rgb(var(--neeto-ui-primary-500))!important;box-shadow:0 0 0 1px rgb(var(--neeto-ui-primary-500))!important}.neeto-molecules-builder-panel__backdrop{background-color:rgba(var(--neeto-ui-black),.4);display:none;height:100%;left:0;position:fixed;top:0;visibility:hidden;width:100%;z-index:101}@media screen and (max-width:767px){.neeto-molecules-builder-panel__backdrop{display:block;visibility:visible}}@media screen and (max-width:1279px){.neeto-molecules-builder-panel__backdrop--extended{display:block;visibility:visible}}";
-n(css,{});
-
-var _excluded$4 = ["size"];
-var Body = function Body(_ref) {
-  var size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded$4);
-  return /*#__PURE__*/React__default["default"].createElement("div", _extends({}, props, {
-    className: classnames__default["default"]("neeto-molecules-builder-questions-list-panel__scroll", {
-      "neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
-    })
-  }));
-};
-
 var Element = function Element(_ref) {
   var label = _ref.label,
     Icon = _ref.icon,
@@ -285,8 +251,9 @@ var ElementList = function ElementList(_ref) {
     value: searchString,
     onChange: general.withEventTargetValue(setSearchString)
   })), /*#__PURE__*/React__default["default"].createElement(Body, {
-    "data-testid": "elements-container",
-    size: "small"
+    "data-testid": "elements-container"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-builder-questions-list-panel__scroll--small"
   }, filteredSections.map(function (section) {
     return /*#__PURE__*/React__default["default"].createElement(Section, {
       onSelect: onSelect,
@@ -295,9 +262,38 @@ var ElementList = function ElementList(_ref) {
       key: section.key,
       title: section.title
     });
-  })));
+  }))));
 };
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+  var key, i;
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+  return target;
+}
+
 var MENU_ITEM_TYPES = {
   menuItem: "menuItem",
   divider: "divider"
@@ -416,15 +412,13 @@ var MoreDropdown = function MoreDropdown(_ref) {
   }), menuBottomChildren));
 };
 
-var _excluded = ["element", "isActive", "handleSelectElement", "isSelectable", "index", "returnElementOnSelect", "errors", "actions"];
+var _excluded = ["element", "isActive", "handleSelectElement", "isSelectable", "errors", "actions"];
 var SelectedElement = function SelectedElement(_ref) {
   var element = _ref.element,
     isActive = _ref.isActive,
     handleSelectElement = _ref.handleSelectElement,
     _ref$isSelectable = _ref.isSelectable,
     isSelectable = _ref$isSelectable === void 0 ? true : _ref$isSelectable,
-    index = _ref.index,
-    returnElementOnSelect = _ref.returnElementOnSelect,
     _ref$errors = _ref.errors,
     errors = _ref$errors === void 0 ? [] : _ref$errors,
     _ref$actions = _ref.actions,
@@ -433,7 +427,7 @@ var SelectedElement = function SelectedElement(_ref) {
   var Icon = element.icon;
   var rootElementRef = React.useRef();
   var onClick = function onClick() {
-    return returnElementOnSelect ? handleSelectElement(element) : handleSelectElement(index);
+    return handleSelectElement(element);
   };
   var shouldShowDropdown = neetoCist.isNotEmpty(actions);
   var menuItems = typeof actions === "function" ? actions(element) : actions.map(function (action) {
@@ -474,10 +468,12 @@ var SelectedElement = function SelectedElement(_ref) {
     style: "body2"
   }, element.label)), shouldShowDropdown && /*#__PURE__*/React__default["default"].createElement(MoreDropdown, {
     menuItems: menuItems,
+    isDisabled: element.isPending,
     dropdownButtonProps: {
       className: "min-h-0 flex-shrink-0",
       "data-testid": "".concat(neetoCist.hyphenate(element.label), "-more-dropdown"),
-      "data-cy": "".concat(neetoCist.hyphenate(element.label, "new-element"), "-more-dropdown")
+      "data-cy": "".concat(neetoCist.hyphenate(element.label, "new-element"), "-more-dropdown"),
+      loading: element.isPending
     }
   }));
 };
@@ -533,18 +529,16 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
     handleSelectElement = _ref.handleSelectElement,
     isDragDisabled = _ref.isDragDisabled,
     isElementVisible = _ref.isElementVisible,
-    selectedElementIndex = _ref.selectedElementIndex,
+    selectedElementId = _ref.selectedElementId,
     selectedElements = _ref.selectedElements,
     setIsElementsListVisible = _ref.setIsElementsListVisible,
-    fixedLastElementIndex = _ref.fixedLastElementIndex,
     fixedLastElement = _ref.fixedLastElement,
     fixedFirstElement = _ref.fixedFirstElement,
     selectedElementActions = _ref.selectedElementActions,
     addAllElements = _ref.addAllElements,
     isAddingAllElements = _ref.isAddingAllElements,
     showElementsFillButton = _ref.showElementsFillButton,
-    isAddingNewElement = _ref.isAddingNewElement,
-    returnElementOnSelect = _ref.returnElementOnSelect;
+    isAddingNewElement = _ref.isAddingNewElement;
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TitleBar, {
     addAllElements: addAllElements,
     isAddingAllElements: isAddingAllElements,
@@ -555,14 +549,13 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
     "data-testid": "selected-elements-container"
   }, neetoCist.isPresent(fixedFirstElement) && /*#__PURE__*/React__default["default"].createElement(SelectedElement$1, {
     handleSelectElement: handleSelectElement,
-    returnElementOnSelect: returnElementOnSelect,
     isSelectable: true,
     actions: fixedFirstElement.actions,
     "data-cy": "welcome-element",
     "data-testid": "welcome-record",
     element: fixedFirstElement,
     index: 0,
-    isActive: selectedElementIndex === 0
+    isActive: selectedElementId === fixedFirstElement.id
   }), /*#__PURE__*/React__default["default"].createElement(dnd.DragDropContext, {
     onDragEnd: handleDragEnd
   }, /*#__PURE__*/React__default["default"].createElement(dnd.Droppable, {
@@ -595,25 +588,21 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
         }, draggableProps, dragHandleProps), /*#__PURE__*/React__default["default"].createElement(SelectedElement$1, {
           element: element,
           handleSelectElement: handleSelectElement,
-          index: index,
-          returnElementOnSelect: returnElementOnSelect,
           isSelectable: true,
           actions: selectedElementActions,
-          isActive: index === selectedElementIndex,
+          isActive: selectedElementId === element.id,
           key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
         }));
       });
     }), placeholder);
   })), neetoCist.isPresent(fixedLastElement) && /*#__PURE__*/React__default["default"].createElement(SelectedElement$1, {
     handleSelectElement: handleSelectElement,
-    returnElementOnSelect: returnElementOnSelect,
     isSelectable: true,
     actions: fixedLastElement.actions,
     "data-cy": "submit-button-element",
     "data-testid": "submit-button-record",
     element: fixedLastElement,
-    index: fixedLastElementIndex,
-    isActive: selectedElementIndex === fixedLastElementIndex
+    isActive: selectedElementId === fixedLastElement.id
   })));
 };
 
@@ -630,8 +619,7 @@ var ElementsPanel = function ElementsPanel(_ref) {
     _ref$isDragDisabled = _ref.isDragDisabled,
     isDragDisabled = _ref$isDragDisabled === void 0 ? true : _ref$isDragDisabled,
     handleSelectElement = _ref.handleSelectElement,
-    selectedElementIndex = _ref.selectedElementIndex,
-    fixedLastElementIndex = _ref.fixedLastElementIndex,
+    selectedElementId = _ref.selectedElementId,
     selectedElementActions = _ref.selectedElementActions,
     _ref$addAllElements = _ref.addAllElements,
     addAllElements = _ref$addAllElements === void 0 ? neetoCist.noop : _ref$addAllElements,
@@ -640,41 +628,18 @@ var ElementsPanel = function ElementsPanel(_ref) {
     _ref$showElementsFill = _ref.showElementsFillButton,
     showElementsFillButton = _ref$showElementsFill === void 0 ? false : _ref$showElementsFill,
     _ref$isAddingNewEleme = _ref.isAddingNewElement,
-    isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme,
-    _ref$returnElementOnS = _ref.returnElementOnSelect,
-    returnElementOnSelect = _ref$returnElementOnS === void 0 ? false : _ref$returnElementOnS;
+    isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isElementsListVisible = _useState2[0],
     setIsElementsListVisible = _useState2[1];
-  var _useBreakpoints = reactUtils.useBreakpoints(),
-    isSize = _useBreakpoints.isSize;
-  var isLargerScreen = !isSize("mobile");
-  var _useState3 = React.useState(!isLargerScreen),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isElementsPanelCollapsed = _useState4[0],
-    setIsElementsPanelCollapsed = _useState4[1];
   var isSelectedElementsEmpty = ramda.isEmpty(selectedElements);
   var shouldShowElementsList = isSelectedElementsEmpty || isElementsListVisible;
   var handleElementSelect = function handleElementSelect(element) {
     setIsElementsListVisible(false);
     handleAddElement(element);
   };
-  React.useEffect(function () {
-    setIsElementsPanelCollapsed(!isLargerScreen);
-  }, [isLargerScreen]);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isElementsPanelCollapsed && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-builder-panel__backdrop",
-    onClick: function onClick() {
-      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
-    }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-molecules-builder-elements-list-panel__wrapper", {
-      "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
-    })
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-builder-elements-list-panel__container"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-molecules-builder-elements-list-panel neeto-ui-bg-gray-100",
     onClick: function onClick(event) {
       return event.stopPropagation();
@@ -688,33 +653,24 @@ var ElementsPanel = function ElementsPanel(_ref) {
     addAllElements: addAllElements,
     fixedFirstElement: fixedFirstElement,
     fixedLastElement: fixedLastElement,
-    fixedLastElementIndex: fixedLastElementIndex,
     handleDragEnd: handleDragEnd,
     handleSelectElement: handleSelectElement,
     isAddingAllElements: isAddingAllElements,
     isAddingNewElement: isAddingNewElement,
     isDragDisabled: isDragDisabled,
     isElementVisible: isElementVisible,
-    returnElementOnSelect: returnElementOnSelect,
     selectedElementActions: selectedElementActions,
-    selectedElementIndex: selectedElementIndex,
+    selectedElementId: selectedElementId,
     selectedElements: selectedElements,
     setIsElementsListVisible: setIsElementsListVisible,
     showElementsFillButton: showElementsFillButton
-  }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "neeto-molecules-builder-elements-list-panel__toggler",
-    icon: neetoIcons.Collapse,
-    style: "secondary",
-    onClick: function onClick() {
-      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
-    }
-  })));
+  }));
 };
 
 var EmptyProperty = withT__default["default"](function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-4 pr-6 pb-6"
+    className: "space-y-4 "
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-200 neeto-ui-text-gray-600 neeto-ui-rounded-lg flex w-full flex-col items-center justify-center space-y-2 px-16 py-8"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
@@ -732,7 +688,7 @@ var EmptyProperty = withT__default["default"](function (_ref) {
 var Skeleton = withT__default["default"](function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "space-y-4 pr-6 pb-6"
+    className: "space-y-4 pr-6"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -750,46 +706,11 @@ var Skeleton = withT__default["default"](function (_ref) {
 });
 
 var PropertiesPanel = function PropertiesPanel(_ref) {
-  var id = _ref.id,
-    children = _ref.children,
-    onClose = _ref.onClose;
-  var _useBreakpoints = reactUtils.useBreakpoints(function (window) {
-      return {
-        largeDesktop: window.innerWidth >= 1280
-      };
-    }),
-    isSize = _useBreakpoints.isSize;
-  var isLargerScreen = isSize("largeDesktop");
-  var _useState = React.useState(!isLargerScreen),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPropertiesPanelCollapsed = _useState2[0],
-    setIsPropertiesPanelCollapsed = _useState2[1];
-  React.useEffect(function () {
-    setIsPropertiesPanelCollapsed(!isLargerScreen);
-  }, [isLargerScreen]);
-  React.useEffect(function () {
-    if (!id) return;
-    setIsPropertiesPanelCollapsed(false);
-  }, [id]);
-  var handleCollapsePanel = function handleCollapsePanel() {
-    setIsPropertiesPanelCollapsed(!isPropertiesPanelCollapsed);
-    onClose === null || onClose === void 0 ? void 0 : onClose(id);
-  };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, !isPropertiesPanelCollapsed && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
-    onClick: handleCollapsePanel
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("neeto-molecules-builder-element-properties-panel__wrapper", {
-      "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
-    })
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-gray-100"
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(Skeleton, null)), !isPropertiesPanelCollapsed && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    className: "neeto-molecules-builder-properties-panel__close",
-    icon: neetoIcons.Close,
-    style: "secondary",
-    onClick: handleCollapsePanel
-  })));
+  var children = _ref.children;
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-gray-100",
+    "data-cy": "properties-panel"
+  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(Skeleton, null));
 };
 PropertiesPanel.EmptyProperty = EmptyProperty;