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

package/README.md

@@ -11,60 +11,69 @@ https://neeto-molecules.neeto.com/
 
 ## Exported Components
 
-- [BrowserSupport](./docs/components.md#browsersupport)
-- [Columns](./docs/components.md#columns)
-- [CopyToClipboardButton](./docs/components.md#copytoclipboardbutton)
-- [CustomDomainDashboard](./docs/components.md#customdomainDashboard)
-- [CustomDomain](./docs/components.md#customdomain)
-- [CalendarView](./docs/components.md#calendarview)
-- [DateFormat/TimeFormat](./docs/components.md#dateformattimeformat)
-- [DateRangeFilter](./docs/components.md#daterangefilter)
-- [DownloadMobileAppCallout](./docs/components.md#downloadmobileappcallout)
-- [DynamicVariables](./docs/components.md#dynamicvariables)
-- [EmailForm](./docs/components.md#emailform)
-- [EmailPreview](./docs/components.md#emailpreview)
-- [ErrorPage](./docs/components.md#errorpage)
-- [IconPicker](./docs/components.md#iconpicker)
-- [InlineInput](./docs/components.md#inlineinput)
-- [IntegrationCard](./docs/components.md#integrationscard)
-- [IntegrationDisconnectAlert](./docs/components.md#integrationdisconnectalert)
-- [IntegrationWalkthroughModal](./docs/components.md#integrationwalkthroughmodal)
-- [IpRestriction](./docs/components.md#iprestriction)
-- [KeyboardShortcuts](./docs/components.md#keyboardshortcuts)
-- [LoginPage](./docs/components.md#loginpage)
-- [NeetoWidget](./docs/components.md#neetowidget)
-- [NavigationHeader](./docs/components.md#NavigationHeader)
-- [PublishBlock](./docs/components.md#publishblock)
-- [Schedule](./docs/components.md#schedule)
-- [ShareViaEmail](./docs/components.md#shareviaemail)
-- [ShareViaLink](./docs/components.md#sharevialink)
-- [Sidebar](./docs/components.md#sidebar)
-- [TimezoneMismatchModal](./docs/components.md#timezonemismatchmodal)
-- [PageLoader](./docs/components.md#pageloader)
-- [MenuBar](./docs/components.md#menubar)
-- [Container](./docs/components.md#container)
-- [Scrollable](./docs/components.md#scrollable)
-- [Header](./docs/components.md#header)
-- [SubHeader](./docs/components.md#subheader)
-- [TableWrapper](./docs/components.md#tablewrapper)
-- [PhoneNumber](./docs/components.md#phonenumber)
-- [Rename](./docs/components.md#rename)
-- [ThemeSidebar](./docs/components.md#themesidebar)
-- [ImageWIthFallback](./docs/components.md#ImageWIthFallback)
-- [ToggleFeatureCard](./docs/components.md#ToggleFeatureCard)
-- [Settings](./docs/components.md#Settings)
-- [Codeblock](./docs/components.md#Codeblock)
-- [Breadcrumbs](./docs/components.md#Breadcrumbs)
-- [Security](./docs/components.md#Security)
-- [SendToFields](./docs/components.md#SendToFieldsComponent)
-- [ConfirmationModal](./docs/components.md#ConfirmationModal)
-- [MoreDropdown](./docs/components.md#MoreDropdown)
-- [Builder](./docs/components.md#Builder)
-- [Metadata](./docs/components.md#metadata)
-- [DocumentEditor](./docs/components.md#DocumentEditor)
-- [Taxonomy](./docs/components.md#Taxonomy)
-- [SuffixedInput](./docs/components.md#SuffixedInput)
-- [Onboarding](./docs/components.md#Onboarding)
+- [Breadcrumbs](./docs/components/Breadcrumbs.md)
+- [BrowserSupport](./docs/components/BrowserSupport.md)
+- [Builder](./docs/components/Builder.md)
+- [CalendarView](./docs/components/CalendarView.md)
+- [Codeblock](./docs/components/Codeblock.md)
+- [Columns](./docs/components/Columns.md)
+- [ConfirmationModal](./docs/components/ConfirmationModal.md)
+- [Container](./docs/components/Container.md)
+- [CopyToClipboardButton](./docs/components/CopyToClipboardButton.md)
+- [Currency](./docs/components/Currency.md)
+- [CustomDomain](./docs/components/CustomDomain.md)
+- [CustomDomainDashboard](./docs/components/CustomDomainDashboard.md)
+- [DateFormat/TimeFormat](./docs/components/DateFormatTimeFormat.md)
+- [DateRangeFilter](./docs/components/DateRangeFilter.md)
+- [DocumentEditor](./docs/components/DocumentEditor.md)
+- [DownloadMobileAppCallout](./docs/components/DownloadMobileAppCallout.md)
+- [DynamicVariables](./docs/components/DynamicVariables.md)
+- [EmailForm](./docs/components/EmailForm.md)
+- [EmailFormProvider](./docs/components/EmailFormProvider.md)
+- [EmailPreview](./docs/components/EmailPreview.md)
+- [EmojiPicker](./docs/components/EmojiPicker.md)
+- [EmojiReactions](./docs/components/EmojiReactions.md)
+- [ErrorPage](./docs/components/ErrorPage.md)
+- [FloatingActionMenu](./docs/components/FloatingActionMenu.md)
+- [Header](./docs/components/Header.md)
+- [HelpPopover](./docs/components/HelpPopover.md)
+- [IconPicker](./docs/components/IconPicker.md)
+- [ImageWithFallback](./docs/components/ImageWithFallback.md)
+- [InlineInput](./docs/components/InlineInput.md)
+- [IntegrationCard](./docs/components/IntegrationCard.md)
+- [IntegrationDisconnectAlert](./docs/components/IntegrationDisconnectAlert.md)
+- [IntegrationWalkthroughModal](./docs/components/IntegrationWalkthroughModal.md)
+- [IpRestriction](./docs/components/IpRestriction.md)
+- [KeyboardShortcuts](./docs/components/KeyboardShortcuts.md)
+- [LoginPage](./docs/components/LoginPage.md)
+- [MenuBar](./docs/components/MenuBar.md)
+- [Metadata](./docs/components/Metadata.md)
+- [MoreDropdown](./docs/components/MoreDropdown.md)
+- [NavigationHeader](./docs/components/NavigationHeader.md)
+- [NeetoWidget](./docs/components/NeetoWidget.md)
+- [Onboarding](./docs/components/Onboarding.md)
+- [PageLoader](./docs/components/PageLoader.md)
+- [PhoneNumber](./docs/components/PhoneNumber.md)
+- [PublishBlock](./docs/components/PublishBlock.md)
+- [PublishYourItem](./docs/components/PublishYourItem.md)
+- [Rename](./docs/components/Rename.md)
+- [ResponsiveDevicePicker](./docs/components/ResponsiveDevicePicker.md)
+- [Schedule](./docs/components/Schedule.md)
+- [Scrollable](./docs/components/Scrollable.md)
+- [Search](./docs/components/Search.md)
+- [Security](./docs/components/Security.md)
+- [SendToFields](./docs/components/SendToFields.md)
+- [Settings](./docs/components/Settings.md)
+- [ShareViaEmail](./docs/components/ShareViaEmail.md)
+- [ShareViaLink](./docs/components/ShareViaLink.md)
+- [Sidebar](./docs/components/Sidebar.md)
+- [SubHeader](./docs/components/SubHeader.md)
+- [SuffixedInput](./docs/components/SuffixedInput.md)
+- [TableWrapper](./docs/components/TableWrapper.md)
+- [Taxonomy](./docs/components/Taxonomy.md)
+- [ThemeSidebar](./docs/components/ThemeSidebar.md)
+- [TimezoneMismatchModal](./docs/components/TimezoneMismatchModal.md)
+- [ToggleFeatureCard](./docs/components/ToggleFeatureCard.md)
 
 ## Installation Instructions
 

package/dist/Breadcrumbs.js

@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom';
 
 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) {
@@ -25,18 +25,13 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       to: link
     }, /*#__PURE__*/React.createElement(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.createElement(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.createElement("span", {
+      className: "neeto-molecules-breadcrumb-separator neeto-ui-text-black"
     }, "/"));
   }));
 };

package/dist/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/Builder.js

@@ -1,12 +1,11 @@
 import React, { useState, useMemo, memo, useRef, useEffect } from 'react';
-import classnames from 'classnames';
 import { noop, isPresent, isNotEmpty, findById, hyphenate } from '@bigbinary/neeto-cist';
-import { useBreakpoints } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { Search, MenuVertical, MenuHorizontal, Flash, Collapse, DownArrow, Close } from '@bigbinary/neeto-icons';
-import { Typography, Button, Input, Dropdown, Tooltip } from '@bigbinary/neetoui';
 import { isEmpty, mergeRight } from 'ramda';
 import { joinHyphenCase, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
+import { Search, MenuVertical, MenuHorizontal, Flash, DownArrow } from '@bigbinary/neeto-icons';
+import { Typography, Button, Input, Dropdown, Tooltip } from '@bigbinary/neetoui';
 import { useTranslation } from 'react-i18next';
+import classnames from 'classnames';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
@@ -107,6 +106,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.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++) {
@@ -122,51 +133,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.createElement("div", _extends({}, props, {
-    className: classnames("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,
@@ -275,8 +241,9 @@ var ElementList = function ElementList(_ref) {
     value: searchString,
     onChange: withEventTargetValue(setSearchString)
   })), /*#__PURE__*/React.createElement(Body, {
-    "data-testid": "elements-container",
-    size: "small"
+    "data-testid": "elements-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-molecules-builder-questions-list-panel__scroll--small"
   }, filteredSections.map(function (section) {
     return /*#__PURE__*/React.createElement(Section, {
       onSelect: onSelect,
@@ -285,9 +252,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"
@@ -406,15 +402,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,
@@ -423,7 +417,7 @@ var SelectedElement = function SelectedElement(_ref) {
   var Icon = element.icon;
   var rootElementRef = useRef();
   var onClick = function onClick() {
-    return returnElementOnSelect ? handleSelectElement(element) : handleSelectElement(index);
+    return handleSelectElement(element);
   };
   var shouldShowDropdown = isNotEmpty(actions);
   var menuItems = typeof actions === "function" ? actions(element) : actions.map(function (action) {
@@ -464,10 +458,12 @@ var SelectedElement = function SelectedElement(_ref) {
     style: "body2"
   }, element.label)), shouldShowDropdown && /*#__PURE__*/React.createElement(MoreDropdown, {
     menuItems: menuItems,
+    isDisabled: element.isPending,
     dropdownButtonProps: {
       className: "min-h-0 flex-shrink-0",
       "data-testid": "".concat(hyphenate(element.label), "-more-dropdown"),
-      "data-cy": "".concat(hyphenate(element.label, "new-element"), "-more-dropdown")
+      "data-cy": "".concat(hyphenate(element.label, "new-element"), "-more-dropdown"),
+      loading: element.isPending
     }
   }));
 };
@@ -523,18 +519,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleBar, {
     addAllElements: addAllElements,
     isAddingAllElements: isAddingAllElements,
@@ -545,14 +539,13 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
     "data-testid": "selected-elements-container"
   }, isPresent(fixedFirstElement) && /*#__PURE__*/React.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.createElement(DragDropContext, {
     onDragEnd: handleDragEnd
   }, /*#__PURE__*/React.createElement(Droppable, {
@@ -585,25 +578,21 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
         }, draggableProps, dragHandleProps), /*#__PURE__*/React.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);
   })), isPresent(fixedLastElement) && /*#__PURE__*/React.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
   })));
 };
 
@@ -620,8 +609,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 ? noop : _ref$addAllElements,
@@ -630,41 +618,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 = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isElementsListVisible = _useState2[0],
     setIsElementsListVisible = _useState2[1];
-  var _useBreakpoints = useBreakpoints(),
-    isSize = _useBreakpoints.isSize;
-  var isLargerScreen = !isSize("mobile");
-  var _useState3 = useState(!isLargerScreen),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isElementsPanelCollapsed = _useState4[0],
-    setIsElementsPanelCollapsed = _useState4[1];
   var isSelectedElementsEmpty = isEmpty(selectedElements);
   var shouldShowElementsList = isSelectedElementsEmpty || isElementsListVisible;
   var handleElementSelect = function handleElementSelect(element) {
     setIsElementsListVisible(false);
     handleAddElement(element);
   };
-  useEffect(function () {
-    setIsElementsPanelCollapsed(!isLargerScreen);
-  }, [isLargerScreen]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, !isElementsPanelCollapsed && /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-builder-panel__backdrop",
-    onClick: function onClick() {
-      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-molecules-builder-elements-list-panel__wrapper", {
-      "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-builder-elements-list-panel__container"
-  }, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "neeto-molecules-builder-elements-list-panel neeto-ui-bg-gray-100",
     onClick: function onClick(event) {
       return event.stopPropagation();
@@ -678,33 +643,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.createElement(Button, {
-    className: "neeto-molecules-builder-elements-list-panel__toggler",
-    icon: Collapse,
-    style: "secondary",
-    onClick: function onClick() {
-      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
-    }
-  })));
+  }));
 };
 
 var EmptyProperty = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4 pr-6 pb-6"
+    className: "space-y-4 "
   }, /*#__PURE__*/React.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.createElement(Typography, {
@@ -722,7 +678,7 @@ var EmptyProperty = withT(function (_ref) {
 var Skeleton = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4 pr-6 pb-6"
+    className: "space-y-4 pr-6"
   }, /*#__PURE__*/React.createElement("div", {
     className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
   }), /*#__PURE__*/React.createElement("div", {
@@ -740,46 +696,11 @@ var Skeleton = withT(function (_ref) {
 });
 
 var PropertiesPanel = function PropertiesPanel(_ref) {
-  var id = _ref.id,
-    children = _ref.children,
-    onClose = _ref.onClose;
-  var _useBreakpoints = useBreakpoints(function (window) {
-      return {
-        largeDesktop: window.innerWidth >= 1280
-      };
-    }),
-    isSize = _useBreakpoints.isSize;
-  var isLargerScreen = isSize("largeDesktop");
-  var _useState = useState(!isLargerScreen),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPropertiesPanelCollapsed = _useState2[0],
-    setIsPropertiesPanelCollapsed = _useState2[1];
-  useEffect(function () {
-    setIsPropertiesPanelCollapsed(!isLargerScreen);
-  }, [isLargerScreen]);
-  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.createElement(React.Fragment, null, !isPropertiesPanelCollapsed && /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
-    onClick: handleCollapsePanel
-  }), /*#__PURE__*/React.createElement("div", {
-    className: classnames("neeto-molecules-builder-element-properties-panel__wrapper", {
-      "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-gray-100"
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React.createElement(Skeleton, null)), !isPropertiesPanelCollapsed && /*#__PURE__*/React.createElement(Button, {
-    className: "neeto-molecules-builder-properties-panel__close",
-    icon: Close,
-    style: "secondary",
-    onClick: handleCollapsePanel
-  })));
+  var children = _ref.children;
+  return /*#__PURE__*/React.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.createElement(Skeleton, null));
 };
 PropertiesPanel.EmptyProperty = EmptyProperty;