@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/Builder.js

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useState, useMemo, memo, useRef, useEffect } from 'react';
+import { createElement, 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';
@@ -11,9 +11,9 @@ import { joinHyphenCase, withEventTargetValue } from '@bigbinary/neeto-commons-f
 import Search from '@bigbinary/neeto-icons/Search';
 import Input from '@bigbinary/neetoui/Input';
 import { useTranslation } from 'react-i18next';
-import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { n } from './inject-css-c86de496.js';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Typography from '@bigbinary/neetoui/Typography';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
@@ -31,10 +31,12 @@ var css = ":root{--neeto-molecule-builder-left-sidebar-width:288px;--neeto-molec
 n(css,{});
 
 var _excluded$2 = ["size"];
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Body = function Body(_ref) {
   var size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded$2);
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({}, props), {}, {
     className: classnames("neeto-molecules-builder-questions-list-panel__scroll", {
       "neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
     })
@@ -48,29 +50,33 @@ var Element = function Element(_ref) {
     isCreatable = _ref$isCreatable === void 0 ? true : _ref$isCreatable,
     onClick = _ref.onClick,
     disabledElementTooltip = _ref.disabledElementTooltip;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  return /*#__PURE__*/jsx(Tooltip, {
     content: disabledElementTooltip === null || disabledElementTooltip === void 0 ? void 0 : disabledElementTooltip(label),
     disabled: !disabledElementTooltip || isCreatable,
-    position: "top"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    "data-cy": "add-".concat(joinHyphenCase(label), "-element"),
-    className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg mb-2 flex h-10 items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
-      "neeto-ui-bg-gray-300 cursor-not-allowed": !isCreatable,
-      "cursor-pointer": isCreatable
-    }),
-    onClick: isCreatable ? onClick : noop
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-grow items-center gap-2"
-  }, Icon && /*#__PURE__*/React__default.createElement(Icon, {
-    "data-cy": "form-icon"
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "leading-4",
-    style: "body2"
-  }, label))));
+    position: "top",
+    children: /*#__PURE__*/jsx("div", {
+      "data-cy": "add-".concat(joinHyphenCase(label), "-element"),
+      className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg mb-2 flex h-10 items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
+        "neeto-ui-bg-gray-300 cursor-not-allowed": !isCreatable,
+        "cursor-pointer": isCreatable
+      }),
+      onClick: isCreatable ? onClick : noop,
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex flex-grow items-center gap-2",
+        children: [Icon && /*#__PURE__*/jsx(Icon, {
+          "data-cy": "form-icon"
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "leading-4",
+          style: "body2",
+          children: label
+        })]
+      })
+    })
+  });
 };
 
-function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Section = function Section(_ref) {
   var title = _ref.title,
     elements = _ref.elements,
@@ -80,21 +86,24 @@ var Section = function Section(_ref) {
   if (isEmpty(elements)) {
     return null;
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, title && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "py-3",
-    style: "h6",
-    textTransform: "uppercase"
-  }, title), elements.map(function (element) {
-    return /*#__PURE__*/React__default.createElement(Element, _extends({}, _objectSpread$1(_objectSpread$1({}, element), {}, {
-      disabledElementTooltip: disabledElementTooltip
-    }), {
-      isCreatable: isCreatable(element.value),
-      key: element.label,
-      onClick: function onClick() {
-        return onSelect(element);
-      }
-    }));
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [title && /*#__PURE__*/jsx(Typography, {
+      className: "py-3",
+      style: "h6",
+      textTransform: "uppercase",
+      children: title
+    }), elements.map(function (element) {
+      return /*#__PURE__*/createElement(Element, _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({}, element), {}, {
+        disabledElementTooltip: disabledElementTooltip
+      })), {}, {
+        isCreatable: isCreatable(element.value),
+        key: element.label,
+        onClick: function onClick() {
+          return onSelect(element);
+        }
+      }));
+    })]
+  });
 };
 
 var TitleBar$1 = function TitleBar(_ref) {
@@ -105,25 +114,27 @@ var TitleBar$1 = function TitleBar(_ref) {
   var onCancel = function onCancel() {
     return setIsElementsListVisible(false);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between p-6 pb-4",
-    "data-testid": "elements-panel-title"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "elements-list-title",
-    lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, t("neetoMolecules.builderSidebar.addNewElement")), !isSelectedElementsEmpty && /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "cancel-button",
-    label: t("neetoMolecules.builderSidebar.cancel"),
-    size: "small",
-    style: "text",
-    onClick: onCancel
-  }));
+    "data-testid": "elements-panel-title",
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "elements-list-title",
+      lineHeight: "normal",
+      style: "h3",
+      weight: "semibold",
+      children: t("neetoMolecules.builderSidebar.addNewElement")
+    }), !isSelectedElementsEmpty && /*#__PURE__*/jsx(Button, {
+      "data-cy": "cancel-button",
+      label: t("neetoMolecules.builderSidebar.cancel"),
+      size: "small",
+      style: "text",
+      onClick: onCancel
+    })]
+  });
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ElementList = function ElementList(_ref) {
   var setIsElementsListVisible = _ref.setIsElementsListVisible,
     _ref$elementSections = _ref.elementSections,
@@ -138,7 +149,7 @@ var ElementList = function ElementList(_ref) {
     setSearchString = _useState2[1];
   var filteredSections = useMemo(function () {
     return elementSections.map(function (section) {
-      return _objectSpread(_objectSpread({}, section), {}, {
+      return _objectSpread$2(_objectSpread$2({}, section), {}, {
         elements: section.elements.filter(function (element) {
           return element.label.toLowerCase().includes(searchString.toLowerCase());
         })
@@ -147,46 +158,54 @@ var ElementList = function ElementList(_ref) {
       return isPresent(searchString) ? isNotEmpty(section.elements) : true;
     });
   }, [searchString, elementSections]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TitleBar$1, {
-    isSelectedElementsEmpty: isSelectedElementsEmpty,
-    setIsElementsListVisible: setIsElementsListVisible
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-2 px-6"
-  }, /*#__PURE__*/React__default.createElement(Input, {
-    autoFocus: true,
-    "data-testid": "elements-panel-search-field",
-    placeholder: t("neetoMolecules.builderSidebar.searchElements"),
-    prefix: /*#__PURE__*/React__default.createElement(Search, null),
-    value: searchString,
-    onChange: withEventTargetValue(setSearchString)
-  })), /*#__PURE__*/React__default.createElement(Body, {
-    "data-testid": "elements-container",
-    size: "small"
-  }, filteredSections.map(function (section) {
-    return /*#__PURE__*/React__default.createElement(Section, {
-      onSelect: onSelect,
-      disabledElementTooltip: section.disabledElementTooltip,
-      elements: section.elements,
-      isCreatable: section.isCreatable,
-      key: section.key,
-      title: section.title
-    });
-  })));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TitleBar$1, {
+      isSelectedElementsEmpty: isSelectedElementsEmpty,
+      setIsElementsListVisible: setIsElementsListVisible
+    }), /*#__PURE__*/jsx("div", {
+      className: "mb-2 px-6",
+      children: /*#__PURE__*/jsx(Input, {
+        autoFocus: true,
+        "data-testid": "elements-panel-search-field",
+        placeholder: t("neetoMolecules.builderSidebar.searchElements"),
+        prefix: /*#__PURE__*/jsx(Search, {}),
+        value: searchString,
+        onChange: withEventTargetValue(setSearchString)
+      })
+    }), /*#__PURE__*/jsx(Body, {
+      "data-testid": "elements-container",
+      size: "small",
+      children: filteredSections.map(function (section) {
+        return /*#__PURE__*/createElement(Section, {
+          onSelect: onSelect,
+          disabledElementTooltip: section.disabledElementTooltip,
+          elements: section.elements,
+          isCreatable: section.isCreatable,
+          key: section.key,
+          title: section.title
+        });
+      })
+    })]
+  });
 };
 
 var _excluded$1 = ["size"];
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DragIcon = function DragIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
     otherProps = _objectWithoutProperties(_ref, _excluded$1);
-  return /*#__PURE__*/React__default.createElement("svg", _extends({
+  return /*#__PURE__*/jsx("svg", _objectSpread$1(_objectSpread$1({
     fill: "currentColor",
     height: size,
     viewBox: "0 -960 960 960",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, otherProps), /*#__PURE__*/React__default.createElement("path", {
-    d: "M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160zM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400zM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640z"
+  }, otherProps), {}, {
+    children: /*#__PURE__*/jsx("path", {
+      d: "M360-160q-33 0-56.5-23.5T280-240q0-33 23.5-56.5T360-320q33 0 56.5 23.5T440-240q0 33-23.5 56.5T360-160zm240 0q-33 0-56.5-23.5T520-240q0-33 23.5-56.5T600-320q33 0 56.5 23.5T680-240q0 33-23.5 56.5T600-160zM360-400q-33 0-56.5-23.5T280-480q0-33 23.5-56.5T360-560q33 0 56.5 23.5T440-480q0 33-23.5 56.5T360-400zm240 0q-33 0-56.5-23.5T520-480q0-33 23.5-56.5T600-560q33 0 56.5 23.5T680-480q0 33-23.5 56.5T600-400zM360-640q-33 0-56.5-23.5T280-720q0-33 23.5-56.5T360-800q33 0 56.5 23.5T440-720q0 33-23.5 56.5T360-640zm240 0q-33 0-56.5-23.5T520-720q0-33 23.5-56.5T600-800q33 0 56.5 23.5T680-720q0 33-23.5 56.5T600-640z"
+    })
   }));
 };
 
@@ -228,7 +247,7 @@ var SelectedElement = function SelectedElement(_ref) {
     });
   }, [isActive, rootElementRef]);
   var error = findById(element.id, errors);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     "data-testid": props["data-testid"],
     ref: rootElementRef,
     className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg relative mb-2 flex h-10 cursor-pointer items-center gap-2 border py-3 pl-4 pr-3 transition-all duration-300 ease-in-out", {
@@ -236,30 +255,35 @@ var SelectedElement = function SelectedElement(_ref) {
     }, {
       "hover:neeto-ui-bg-error-100 neeto-ui-bg-error-100": error
     }),
-    onClick: isSelectable ? onClick : noop
-  }, isDraggable && /*#__PURE__*/React__default.createElement("span", {
-    className: "absolute right-full top-1/2 flex-shrink-0 -translate-y-1/2 cursor-grab"
-  }, /*#__PURE__*/React__default.createElement(DragIcon, {
-    size: 16
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-grow items-center gap-2 overflow-hidden",
-    "data-cy": "new-element-field"
-  }, Icon && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex-shrink-0"
-  }, /*#__PURE__*/React__default.createElement(Icon, null)), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "truncate leading-snug",
-    "data-cy": "".concat(hyphenate(element.label, "new-element"), "-label"),
-    style: "body2"
-  }, element.label)), shouldShowDropdown && /*#__PURE__*/React__default.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"),
-      loading: element.isPending
-    }
-  }));
+    onClick: isSelectable ? onClick : noop,
+    children: [isDraggable && /*#__PURE__*/jsx("span", {
+      className: "absolute right-full top-1/2 flex-shrink-0 -translate-y-1/2 cursor-grab",
+      children: /*#__PURE__*/jsx(DragIcon, {
+        size: 16
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-grow items-center gap-2 overflow-hidden",
+      "data-cy": "new-element-field",
+      children: [Icon && /*#__PURE__*/jsx("div", {
+        className: "flex-shrink-0",
+        children: /*#__PURE__*/jsx(Icon, {})
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "truncate leading-snug",
+        "data-cy": "".concat(hyphenate(element.label, "new-element"), "-label"),
+        style: "body2",
+        children: element.label
+      })]
+    }), shouldShowDropdown && /*#__PURE__*/jsx(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"),
+        loading: element.isPending
+      }
+    })]
+  });
 };
 var SelectedElement$1 = /*#__PURE__*/memo(SelectedElement);
 
@@ -275,39 +299,44 @@ var TitleBar = function TitleBar(_ref) {
   var handleAddElement = function handleAddElement() {
     return setIsElementsListVisible(true);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: "flex items-center justify-between p-6 pb-4",
-    "data-testid": "selected-elements-title"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "elements-title",
-    lineHeight: "normal",
-    style: "h3",
-    weight: "semibold"
-  }, t("neetoMolecules.builderSidebar.element", PLURAL)), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "add-element-button",
-    "data-testid": "add-element-button",
-    disabled: isLoading,
-    label: t("neetoMolecules.builderSidebar.addNewElement"),
-    loading: isAddingNewElement,
-    size: "small",
-    style: "secondary",
-    onClick: handleAddElement
-  }), showElementsFillButton && /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "add-all-elements-button",
-    disabled: isAddingAllElements,
-    icon: Flash,
-    loading: isAddingAllElements,
-    size: "small",
-    style: "secondary",
-    tooltipProps: {
-      content: t("neetoMolecules.builderSidebar.addAllElements")
-    },
-    onClick: addAllElements
-  })));
+    "data-testid": "selected-elements-title",
+    children: [/*#__PURE__*/jsx(Typography, {
+      "data-cy": "elements-title",
+      lineHeight: "normal",
+      style: "h3",
+      weight: "semibold",
+      children: t("neetoMolecules.builderSidebar.element", PLURAL)
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between space-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        "data-cy": "add-element-button",
+        "data-testid": "add-element-button",
+        disabled: isLoading,
+        label: t("neetoMolecules.builderSidebar.addNewElement"),
+        loading: isAddingNewElement,
+        size: "small",
+        style: "secondary",
+        onClick: handleAddElement
+      }), showElementsFillButton && /*#__PURE__*/jsx(Button, {
+        "data-cy": "add-all-elements-button",
+        disabled: isAddingAllElements,
+        icon: Flash,
+        loading: isAddingAllElements,
+        size: "small",
+        style: "secondary",
+        tooltipProps: {
+          content: t("neetoMolecules.builderSidebar.addAllElements")
+        },
+        onClick: addAllElements
+      })]
+    })]
+  });
 };
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var SelectedElementsList = function SelectedElementsList(_ref) {
   var handleDragEnd = _ref.handleDragEnd,
     handleSelectElement = _ref.handleSelectElement,
@@ -325,7 +354,7 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
     isAddingNewElement = _ref.isAddingNewElement;
   var renderSelectedElement = function renderSelectedElement(element) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    return /*#__PURE__*/React__default.createElement(SelectedElement$1, {
+    return /*#__PURE__*/createElement(SelectedElement$1, {
       element: element,
       handleSelectElement: handleSelectElement,
       index: index,
@@ -337,63 +366,71 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
       "data-testid": "welcome-record".concat(Array.isArray(fixedFirstElement) ? "-".concat(index + 1) : "")
     });
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(TitleBar, {
-    addAllElements: addAllElements,
-    isAddingAllElements: isAddingAllElements,
-    isAddingNewElement: isAddingNewElement,
-    setIsElementsListVisible: setIsElementsListVisible,
-    showElementsFillButton: showElementsFillButton
-  }), /*#__PURE__*/React__default.createElement(Body, {
-    "data-testid": "selected-elements-container"
-  }, Array.isArray(fixedFirstElement) ? isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/React__default.createElement(DragDropContext, {
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/React__default.createElement(Droppable, {
-    droppableId: "droppable-question-list"
-  }, function (_ref2) {
-    var innerRef = _ref2.innerRef,
-      droppableProps = _ref2.droppableProps,
-      placeholder = _ref2.placeholder;
-    return /*#__PURE__*/React__default.createElement("div", _extends({
-      ref: innerRef
-    }, droppableProps, {
-      "data-testid": "selected-elements-droppable-container"
-    }), selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.map(function (element, index) {
-      var _isElementVisible, _element$id, _element$id2;
-      var isVisible = (_isElementVisible = isElementVisible === null || isElementVisible === void 0 ? void 0 : isElementVisible(element)) !== null && _isElementVisible !== void 0 ? _isElementVisible : true;
-      if (!isVisible) return null;
-      var key = (_element$id = element.id) !== null && _element$id !== void 0 ? _element$id : "element-".concat(joinHyphenCase(element.label));
-      return /*#__PURE__*/React__default.createElement(Draggable, {
-        index: index,
-        isDragDisabled: isDragDisabled,
-        draggableId: (_element$id2 = element.id) !== null && _element$id2 !== void 0 ? _element$id2 : "element-".concat(index),
-        key: key
-      }, function (_ref3) {
-        var _element$id3;
-        var innerRef = _ref3.innerRef,
-          draggableProps = _ref3.draggableProps,
-          dragHandleProps = _ref3.dragHandleProps;
-        return /*#__PURE__*/React__default.createElement("div", _extends({
-          ref: innerRef
-        }, draggableProps, dragHandleProps), /*#__PURE__*/React__default.createElement(SelectedElement$1, {
-          element: element,
-          handleSelectElement: handleSelectElement,
-          isSelectable: true,
-          actions: selectedElementActions,
-          isActive: selectedElementId === element.id,
-          isDraggable: !isDragDisabled,
-          key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
-        }));
-      });
-    }), placeholder);
-  })), isPresent(fixedLastElement) && /*#__PURE__*/React__default.createElement(SelectedElement$1, {
-    handleSelectElement: handleSelectElement,
-    isSelectable: true,
-    actions: fixedLastElement.actions,
-    "data-cy": "submit-button-element",
-    "data-testid": "submit-button-record",
-    element: fixedLastElement,
-    isActive: selectedElementId === fixedLastElement.id
-  })));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(TitleBar, {
+      addAllElements: addAllElements,
+      isAddingAllElements: isAddingAllElements,
+      isAddingNewElement: isAddingNewElement,
+      setIsElementsListVisible: setIsElementsListVisible,
+      showElementsFillButton: showElementsFillButton
+    }), /*#__PURE__*/jsxs(Body, {
+      "data-testid": "selected-elements-container",
+      children: [Array.isArray(fixedFirstElement) ? isNotEmpty(fixedFirstElement) && fixedFirstElement.map(renderSelectedElement) : isPresent(fixedFirstElement) && renderSelectedElement(fixedFirstElement), /*#__PURE__*/jsx(DragDropContext, {
+        onDragEnd: handleDragEnd,
+        children: /*#__PURE__*/jsx(Droppable, {
+          droppableId: "droppable-question-list",
+          children: function children(_ref2) {
+            var innerRef = _ref2.innerRef,
+              droppableProps = _ref2.droppableProps,
+              placeholder = _ref2.placeholder;
+            return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+              ref: innerRef
+            }, droppableProps), {}, {
+              "data-testid": "selected-elements-droppable-container",
+              children: [selectedElements === null || selectedElements === void 0 ? void 0 : selectedElements.map(function (element, index) {
+                var _isElementVisible, _element$id, _element$id2;
+                var isVisible = (_isElementVisible = isElementVisible === null || isElementVisible === void 0 ? void 0 : isElementVisible(element)) !== null && _isElementVisible !== void 0 ? _isElementVisible : true;
+                if (!isVisible) return null;
+                var key = (_element$id = element.id) !== null && _element$id !== void 0 ? _element$id : "element-".concat(joinHyphenCase(element.label));
+                return /*#__PURE__*/createElement(Draggable, {
+                  index: index,
+                  isDragDisabled: isDragDisabled,
+                  draggableId: (_element$id2 = element.id) !== null && _element$id2 !== void 0 ? _element$id2 : "element-".concat(index),
+                  key: key
+                }, function (_ref3) {
+                  var _element$id3;
+                  var innerRef = _ref3.innerRef,
+                    draggableProps = _ref3.draggableProps,
+                    dragHandleProps = _ref3.dragHandleProps;
+                  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread(_objectSpread({
+                    ref: innerRef
+                  }, draggableProps), dragHandleProps), {}, {
+                    children: /*#__PURE__*/createElement(SelectedElement$1, {
+                      element: element,
+                      handleSelectElement: handleSelectElement,
+                      isSelectable: true,
+                      actions: selectedElementActions,
+                      isActive: selectedElementId === element.id,
+                      isDraggable: !isDragDisabled,
+                      key: (_element$id3 = element.id) !== null && _element$id3 !== void 0 ? _element$id3 : index
+                    })
+                  }));
+                });
+              }), placeholder]
+            }));
+          }
+        })
+      }), isPresent(fixedLastElement) && /*#__PURE__*/jsx(SelectedElement$1, {
+        handleSelectElement: handleSelectElement,
+        isSelectable: true,
+        actions: fixedLastElement.actions,
+        "data-cy": "submit-button-element",
+        "data-testid": "submit-button-record",
+        element: fixedLastElement,
+        isActive: selectedElementId === fixedLastElement.id
+      })]
+    })]
+  });
 };
 
 var ElementsPanel = function ElementsPanel(_ref) {
@@ -440,88 +477,99 @@ var ElementsPanel = function ElementsPanel(_ref) {
   useEffect(function () {
     setIsElementsPanelCollapsed(!isLargerScreen);
   }, [isLargerScreen]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isElementsPanelCollapsed && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-builder-panel__backdrop",
-    onClick: function onClick() {
-      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
-    }
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-molecules-builder-elements-list-panel__wrapper", {
-      "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
-    })
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-builder-elements-list-panel__container"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-builder-elements-list-panel neeto-ui-bg-white",
-    onClick: function onClick(event) {
-      return event.stopPropagation();
-    }
-  }, shouldShowElementsList ? /*#__PURE__*/React__default.createElement(ElementList, {
-    elementSections: elementSections,
-    isSelectedElementsEmpty: isSelectedElementsEmpty,
-    setIsElementsListVisible: setIsElementsListVisible,
-    onSelect: handleElementSelect
-  }) : /*#__PURE__*/React__default.createElement(SelectedElementsList, {
-    addAllElements: addAllElements,
-    fixedFirstElement: fixedFirstElement,
-    fixedLastElement: fixedLastElement,
-    handleDragEnd: handleDragEnd,
-    handleSelectElement: handleSelectElement,
-    isAddingAllElements: isAddingAllElements,
-    isAddingNewElement: isAddingNewElement,
-    isDragDisabled: isDragDisabled,
-    isElementVisible: isElementVisible,
-    selectedElementActions: selectedElementActions,
-    selectedElementId: selectedElementId,
-    selectedElements: selectedElements,
-    setIsElementsListVisible: setIsElementsListVisible,
-    showElementsFillButton: showElementsFillButton
-  }))), /*#__PURE__*/React__default.createElement(Button, {
-    className: "neeto-molecules-builder-elements-list-panel__toggler",
-    icon: Collapse,
-    style: "secondary",
-    onClick: function onClick() {
-      setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
-    }
-  })));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isElementsPanelCollapsed && /*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-builder-panel__backdrop",
+      onClick: function onClick() {
+        setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
+      }
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("neeto-molecules-builder-elements-list-panel__wrapper", {
+        "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
+      }),
+      children: [/*#__PURE__*/jsx("div", {
+        className: "neeto-molecules-builder-elements-list-panel__container",
+        children: /*#__PURE__*/jsx("div", {
+          className: "neeto-molecules-builder-elements-list-panel neeto-ui-bg-white",
+          onClick: function onClick(event) {
+            return event.stopPropagation();
+          },
+          children: shouldShowElementsList ? /*#__PURE__*/jsx(ElementList, {
+            elementSections: elementSections,
+            isSelectedElementsEmpty: isSelectedElementsEmpty,
+            setIsElementsListVisible: setIsElementsListVisible,
+            onSelect: handleElementSelect
+          }) : /*#__PURE__*/jsx(SelectedElementsList, {
+            addAllElements: addAllElements,
+            fixedFirstElement: fixedFirstElement,
+            fixedLastElement: fixedLastElement,
+            handleDragEnd: handleDragEnd,
+            handleSelectElement: handleSelectElement,
+            isAddingAllElements: isAddingAllElements,
+            isAddingNewElement: isAddingNewElement,
+            isDragDisabled: isDragDisabled,
+            isElementVisible: isElementVisible,
+            selectedElementActions: selectedElementActions,
+            selectedElementId: selectedElementId,
+            selectedElements: selectedElements,
+            setIsElementsListVisible: setIsElementsListVisible,
+            showElementsFillButton: showElementsFillButton
+          })
+        })
+      }), /*#__PURE__*/jsx(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__default.createElement("div", {
-    className: "space-y-4 pb-6 pr-6"
-  }, /*#__PURE__*/React__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.createElement(Typography, {
-    className: "text-center",
-    "data-cy": "build-page-text-label",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.builderSidebar.noQuestionProperties"))), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-72 w-full"
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-4 pb-6 pr-6",
+    children: [/*#__PURE__*/jsx("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",
+      children: /*#__PURE__*/jsx(Typography, {
+        className: "text-center",
+        "data-cy": "build-page-text-label",
+        lineHeight: "normal",
+        style: "body2",
+        children: t("neetoMolecules.builderSidebar.noQuestionProperties")
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-72 w-full"
+    })]
+  });
 });
 
 var Skeleton = withT(function (_ref) {
   var t = _ref.t;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4 pb-6 pr-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
-  }), /*#__PURE__*/React__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.createElement(Typography, {
-    className: "text-center",
-    "data-cy": "build-page-text-label",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.builderSidebar.emptyQuestionProperties")), /*#__PURE__*/React__default.createElement(DownArrow, null)), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-72 w-full"
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: "space-y-4 pb-6 pr-6",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
+    }), /*#__PURE__*/jsxs("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",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "text-center",
+        "data-cy": "build-page-text-label",
+        lineHeight: "normal",
+        style: "body2",
+        children: t("neetoMolecules.builderSidebar.emptyQuestionProperties")
+      }), /*#__PURE__*/jsx(DownArrow, {})]
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-72 w-full"
+    })]
+  });
 });
 
 var PropertiesPanel = function PropertiesPanel(_ref) {
@@ -550,22 +598,26 @@ var PropertiesPanel = function PropertiesPanel(_ref) {
     setIsPropertiesPanelCollapsed(!isPropertiesPanelCollapsed);
     onClose === null || onClose === void 0 ? void 0 : onClose(id);
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !isPropertiesPanelCollapsed && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
-    onClick: handleCollapsePanel
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-molecules-builder-element-properties-panel__wrapper", {
-      "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
-    })
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-white",
-    "data-cy": "properties-panel"
-  }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(Skeleton, null)), !isPropertiesPanelCollapsed && /*#__PURE__*/React__default.createElement(Button, {
-    className: "neeto-molecules-builder-properties-panel__close",
-    icon: Close,
-    style: "secondary",
-    onClick: handleCollapsePanel
-  })));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [!isPropertiesPanelCollapsed && /*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
+      onClick: handleCollapsePanel
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("neeto-molecules-builder-element-properties-panel__wrapper", {
+        "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
+      }),
+      children: [/*#__PURE__*/jsx("div", {
+        className: "neeto-molecules-builder-element-properties-panel neeto-ui-bg-white",
+        "data-cy": "properties-panel",
+        children: children !== null && children !== void 0 ? children : /*#__PURE__*/jsx(Skeleton, {})
+      }), !isPropertiesPanelCollapsed && /*#__PURE__*/jsx(Button, {
+        className: "neeto-molecules-builder-properties-panel__close",
+        icon: Close,
+        style: "secondary",
+        onClick: handleCollapsePanel
+      })]
+    })]
+  });
 };
 PropertiesPanel.EmptyProperty = EmptyProperty;