@bigbinary/neeto-molecules 3.7.20 → 3.7.22

package/dist/cjs/Builder.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var classnames = require('classnames');
@@ -16,7 +14,7 @@ var Input = require('@bigbinary/neetoui/Input');
 var ramda = require('ramda');
 var reactI18next = require('react-i18next');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var injectCss = require('./inject-css-80a5faa3.js');
+var injectCss = require('./inject-css-vQvjPR2x.js');
 var jsxRuntime = require('react/jsx-runtime');
 var dnd = require('@hello-pangea/dnd');
 var Typography = require('@bigbinary/neetoui/Typography');
@@ -31,23 +29,10 @@ require('@bigbinary/neeto-icons/MenuHorizontal');
 require('@bigbinary/neeto-icons/MenuVertical');
 require('@bigbinary/neetoui/Dropdown');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
-var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
-var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
-var Search__default = /*#__PURE__*/_interopDefaultLegacy(Search);
-var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
-var _objectWithoutProperties__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutProperties);
-var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
-var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
-var Flash__default = /*#__PURE__*/_interopDefaultLegacy(Flash);
-var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
-var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
-var DownArrow__default = /*#__PURE__*/_interopDefaultLegacy(DownArrow);
-
+var PANEL_TYPES = {
+  SUMMARY: "summary",
+  ELEMENTS: "elements"
+};
 var SELECTED_ELEMENTS_LIST_DROPPABLE_ID = "droppable-selected-element-container";
 var ELEMENTS_LIST_DROPPABLE_ID = "droppable-element-container";
 var PREVIEW_CONTAINER_DROPPABLE_ID = "droppable-form-preview-container";
@@ -61,12 +46,12 @@ injectCss.n(css,{});
 
 var _excluded$2 = ["size"];
 function ownKeys$5(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$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty__default["default"](e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(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__default["default"](_ref, _excluded$2);
+    props = _objectWithoutProperties(_ref, _excluded$2);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$5(_objectSpread$5({}, props), {}, {
-    className: classnames__default["default"]("neeto-molecules-builder-questions-list-panel__scroll", {
+    className: classnames("neeto-molecules-builder-questions-list-panel__scroll", {
       "neeto-molecules-builder-questions-list-panel__scroll--small": size === "small"
     })
   }));
@@ -74,11 +59,11 @@ var Body = function Body(_ref) {
 
 var _excluded$1 = ["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__default["default"](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; }
+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 DragIcon = function DragIcon(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 16 : _ref$size,
-    otherProps = _objectWithoutProperties__default["default"](_ref, _excluded$1);
+    otherProps = _objectWithoutProperties(_ref, _excluded$1);
   return /*#__PURE__*/jsxRuntime.jsx("svg", _objectSpread$4(_objectSpread$4({
     fill: "currentColor",
     height: size,
@@ -103,14 +88,14 @@ var Element = function Element(_ref) {
     disabledElementTooltip = _ref.disabledElementTooltip,
     isPlaceholder = _ref.isPlaceholder,
     isDraggingOver = _ref.isDraggingOver;
-  return /*#__PURE__*/jsxRuntime.jsx(Tooltip__default["default"], {
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
     content: disabledElementTooltip === null || disabledElementTooltip === void 0 ? void 0 : disabledElementTooltip(label),
     disabled: !disabledElementTooltip || isCreatable || isDraggingOver,
     position: "top",
     touch: ["hold", 500],
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
       "data-cy": "add-".concat(general.joinHyphenCase(label), "-element"),
-      className: classnames__default["default"]("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 items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
+      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 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,
         "opacity-50": isPlaceholder
@@ -125,7 +110,7 @@ var Element = function Element(_ref) {
         className: "flex flex-grow items-center gap-2",
         children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
           "data-cy": "form-icon"
-        }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+        }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
           className: "leading-4",
           style: "body2",
           children: label
@@ -136,7 +121,7 @@ var Element = function Element(_ref) {
 };
 
 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__default["default"](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; }
+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 ElementContainer = function ElementContainer(_ref) {
   var index = _ref.index,
     isDragDisabled = _ref.isDragDisabled,
@@ -202,7 +187,7 @@ var Section = function Section(_ref) {
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-    children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
       className: "py-3",
       style: "h6",
       textTransform: "uppercase",
@@ -223,7 +208,7 @@ var Section = function Section(_ref) {
 };
 
 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__default["default"](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; }
+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 SectionsContainer = function SectionsContainer(_ref) {
   var isDragElementsDisabled = _ref.isDragElementsDisabled,
     filteredSections = _ref.filteredSections,
@@ -262,42 +247,44 @@ var SectionsContainer = function SectionsContainer(_ref) {
 
 var TitleBar$1 = reactUtils.withT(function (_ref) {
   var t = _ref.t,
-    setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
-    isSelectedElementsEmpty = _ref.isSelectedElementsEmpty;
+    setVisiblePanel = _ref.setVisiblePanel,
+    isSelectedElementsEmpty = _ref.isSelectedElementsEmpty,
+    isPrimaryPanel = _ref.isPrimaryPanel;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between p-6 pb-4",
     "data-testid": "elements-panel-title",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
       "data-cy": "elements-list-title",
       lineHeight: "normal",
       style: "h3",
       weight: "semibold",
       children: t("neetoMolecules.builderSidebar.addNewElement")
-    }), !isSelectedElementsEmpty && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+    }), !isSelectedElementsEmpty && /*#__PURE__*/jsxRuntime.jsx(Button, {
       "data-cy": "cancel-button",
-      label: t("neetoMolecules.builderSidebar.summary"),
       size: "small",
       style: "secondary",
+      label: isPrimaryPanel ? t("neetoMolecules.builderSidebar.summary") : t("neetoMolecules.common.actions.cancel"),
       onClick: function onClick() {
-        return setIsSummaryPanelVisible(true);
+        return setVisiblePanel(PANEL_TYPES.SUMMARY);
       }
     })]
   });
 });
 
 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__default["default"](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 _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 ElementList = function ElementList(_ref) {
-  var setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
+  var setVisiblePanel = _ref.setVisiblePanel,
     _ref$elementSections = _ref.elementSections,
     elementSections = _ref$elementSections === void 0 ? [] : _ref$elementSections,
     onSelect = _ref.onSelect,
     isSelectedElementsEmpty = _ref.isSelectedElementsEmpty,
-    isDragElementsDisabled = _ref.isDragElementsDisabled;
+    isDragElementsDisabled = _ref.isDragElementsDisabled,
+    isPrimaryPanel = _ref.isPrimaryPanel;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var _useState = React.useState(""),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     searchString = _useState2[0],
     setSearchString = _useState2[1];
   var filteredSections = React.useMemo(function () {
@@ -316,15 +303,16 @@ var ElementList = function ElementList(_ref) {
   }, [searchString, elementSections]);
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx(TitleBar$1, {
+      isPrimaryPanel: isPrimaryPanel,
       isSelectedElementsEmpty: isSelectedElementsEmpty,
-      setIsSummaryPanelVisible: setIsSummaryPanelVisible
+      setVisiblePanel: setVisiblePanel
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "mb-2 px-6",
-      children: /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+      children: /*#__PURE__*/jsxRuntime.jsx(Input, {
         autoFocus: true,
         "data-testid": "elements-panel-search-field",
         placeholder: t("neetoMolecules.builderSidebar.searchElements"),
-        prefix: /*#__PURE__*/jsxRuntime.jsx(Search__default["default"], {}),
+        prefix: /*#__PURE__*/jsxRuntime.jsx(Search, {}),
         value: searchString,
         onChange: general.withEventTargetValue(setSearchString)
       })
@@ -353,7 +341,7 @@ var SelectedElement = function SelectedElement(_ref) {
     actions = _ref$actions === void 0 ? [] : _ref$actions,
     _ref$isDraggable = _ref.isDraggable,
     isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
-    props = _objectWithoutProperties__default["default"](_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
   var Icon = element.icon;
   var rootElementRef = React.useRef();
   var onClick = function onClick() {
@@ -381,7 +369,7 @@ var SelectedElement = function SelectedElement(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     "data-testid": props["data-testid"],
     ref: rootElementRef,
-    className: classnames__default["default"]("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", {
+    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", {
       "neeto-molecules-builder-element--active": isActive
     }, {
       "hover:neeto-ui-bg-error-100 neeto-ui-bg-error-100": error
@@ -398,7 +386,7 @@ var SelectedElement = function SelectedElement(_ref) {
       children: [Icon && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "flex-shrink-0",
         children: /*#__PURE__*/jsxRuntime.jsx(Icon, {})
-      }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+      }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "truncate leading-snug",
         "data-cy": "".concat(neetoCist.hyphenate(element.label, "new-element"), "-label"),
         style: "body2",
@@ -423,16 +411,17 @@ var SelectedElement$1 = /*#__PURE__*/React.memo(SelectedElement);
 
 var TitleBar = reactUtils.withT(function (_ref) {
   var t = _ref.t,
-    setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
+    setVisiblePanel = _ref.setVisiblePanel,
     isLoading = _ref.isLoading,
     showElementsFillButton = _ref.showElementsFillButton,
     isAddingAllElements = _ref.isAddingAllElements,
     addAllElements = _ref.addAllElements,
-    isAddingNewElement = _ref.isAddingNewElement;
+    isAddingNewElement = _ref.isAddingNewElement,
+    isPrimaryPanel = _ref.isPrimaryPanel;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex items-center justify-between p-6 pb-4",
     "data-testid": "selected-elements-title",
-    children: [/*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+    children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
       "data-cy": "elements-title",
       lineHeight: "normal",
       style: "h3",
@@ -440,21 +429,21 @@ var TitleBar = reactUtils.withT(function (_ref) {
       children: t("neetoMolecules.builderSidebar.element", constants.PLURAL)
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center justify-between space-x-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
         "data-cy": "add-element-button",
         "data-testid": "add-element-button",
         disabled: isLoading,
-        label: t("neetoMolecules.common.actions.close"),
         loading: isAddingNewElement,
         size: "small",
         style: "secondary",
+        label: isPrimaryPanel ? t("neetoMolecules.builderSidebar.addNewElement") : t("neetoMolecules.common.actions.close"),
         onClick: function onClick() {
-          return setIsSummaryPanelVisible(false);
+          return setVisiblePanel(PANEL_TYPES.ELEMENTS);
         }
-      }), showElementsFillButton && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      }), showElementsFillButton && /*#__PURE__*/jsxRuntime.jsx(Button, {
         "data-cy": "add-all-elements-button",
         disabled: isAddingAllElements,
-        icon: Flash__default["default"],
+        icon: Flash,
         loading: isAddingAllElements,
         size: "small",
         style: "secondary",
@@ -469,14 +458,15 @@ var TitleBar = reactUtils.withT(function (_ref) {
 });
 
 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__default["default"](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 _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 handleSelectElement = _ref.handleSelectElement,
     isReorderDisabled = _ref.isReorderDisabled,
     isElementVisible = _ref.isElementVisible,
     selectedElementId = _ref.selectedElementId,
     selectedElements = _ref.selectedElements,
-    setIsSummaryPanelVisible = _ref.setIsSummaryPanelVisible,
+    setVisiblePanel = _ref.setVisiblePanel,
+    isPrimaryPanel = _ref.isPrimaryPanel,
     fixedLastElement = _ref.fixedLastElement,
     fixedFirstElement = _ref.fixedFirstElement,
     selectedElementActions = _ref.selectedElementActions,
@@ -503,7 +493,8 @@ var SelectedElementsList = function SelectedElementsList(_ref) {
       addAllElements: addAllElements,
       isAddingAllElements: isAddingAllElements,
       isAddingNewElement: isAddingNewElement,
-      setIsSummaryPanelVisible: setIsSummaryPanelVisible,
+      isPrimaryPanel: isPrimaryPanel,
+      setVisiblePanel: setVisiblePanel,
       showElementsFillButton: showElementsFillButton
     }), /*#__PURE__*/jsxRuntime.jsxs(Body, {
       "data-testid": "selected-elements-container",
@@ -586,16 +577,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;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    isSummaryPanelVisible = _useState2[0],
-    setIsSummaryPanelVisible = _useState2[1];
+    isAddingNewElement = _ref$isAddingNewEleme === void 0 ? false : _ref$isAddingNewEleme,
+    _ref$primaryPanel = _ref.primaryPanel,
+    primaryPanel = _ref$primaryPanel === void 0 ? PANEL_TYPES.ELEMENTS : _ref$primaryPanel;
+  var _useState = React.useState(primaryPanel),
+    _useState2 = _slicedToArray(_useState, 2),
+    visiblePanel = _useState2[0],
+    setVisiblePanel = _useState2[1];
   var _useBreakpoints = reactUtils.useBreakpoints(),
     isSize = _useBreakpoints.isSize;
   var isLargerScreen = !isSize("mobile");
   var _useState3 = React.useState(!isLargerScreen),
-    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    _useState4 = _slicedToArray(_useState3, 2),
     isElementsPanelCollapsed = _useState4[0],
     setIsElementsPanelCollapsed = _useState4[1];
   React.useEffect(function () {
@@ -608,7 +601,7 @@ var ElementsPanel = function ElementsPanel(_ref) {
         setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
       }
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classnames__default["default"]("neeto-molecules-builder-elements-list-panel__wrapper", {
+      className: classnames("neeto-molecules-builder-elements-list-panel__wrapper", {
         "neeto-molecules-builder-elements-list-panel__wrapper--collapsed": isElementsPanelCollapsed
       }),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -618,7 +611,7 @@ var ElementsPanel = function ElementsPanel(_ref) {
           onClick: function onClick(event) {
             return event.stopPropagation();
           },
-          children: isSummaryPanelVisible ? /*#__PURE__*/jsxRuntime.jsx(SelectedElementsList, {
+          children: visiblePanel === PANEL_TYPES.SUMMARY ? /*#__PURE__*/jsxRuntime.jsx(SelectedElementsList, {
             addAllElements: addAllElements,
             fixedFirstElement: fixedFirstElement,
             fixedLastElement: fixedLastElement,
@@ -630,18 +623,20 @@ var ElementsPanel = function ElementsPanel(_ref) {
             selectedElementActions: selectedElementActions,
             selectedElementId: selectedElementId,
             selectedElements: selectedElements,
-            setIsSummaryPanelVisible: setIsSummaryPanelVisible,
-            showElementsFillButton: showElementsFillButton
+            setVisiblePanel: setVisiblePanel,
+            showElementsFillButton: showElementsFillButton,
+            isPrimaryPanel: primaryPanel === PANEL_TYPES.SUMMARY
           }) : /*#__PURE__*/jsxRuntime.jsx(ElementList, {
             elementSections: elementSections,
             isDragElementsDisabled: isDragElementsDisabled,
-            setIsSummaryPanelVisible: setIsSummaryPanelVisible,
+            setVisiblePanel: setVisiblePanel,
+            isPrimaryPanel: primaryPanel === PANEL_TYPES.ELEMENTS,
             onSelect: handleAddElement
           })
         })
-      }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      }), /*#__PURE__*/jsxRuntime.jsx(Button, {
         className: "neeto-molecules-builder-elements-list-panel__toggler",
-        icon: Collapse__default["default"],
+        icon: Collapse,
         style: "secondary",
         onClick: function onClick() {
           setIsElementsPanelCollapsed(!isElementsPanelCollapsed);
@@ -651,13 +646,13 @@ var ElementsPanel = function ElementsPanel(_ref) {
   });
 };
 
-var EmptyProperty = withT__default["default"](function (_ref) {
+var EmptyProperty = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "space-y-4 pb-6 pr-6",
     children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography__default["default"], {
+      children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "text-center",
         "data-cy": "build-page-text-label",
         lineHeight: "normal",
@@ -672,7 +667,7 @@ var EmptyProperty = withT__default["default"](function (_ref) {
   });
 });
 
-var Skeleton = withT__default["default"](function (_ref) {
+var Skeleton = withT(function (_ref) {
   var t = _ref.t;
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "space-y-4 pb-6 pr-6",
@@ -680,13 +675,13 @@ var Skeleton = withT__default["default"](function (_ref) {
       className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-12 w-full"
     }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography__default["default"], {
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
         className: "text-center",
         "data-cy": "build-page-text-label",
         lineHeight: "normal",
         style: "body2",
         children: t("neetoMolecules.builderSidebar.emptyQuestionProperties")
-      }), /*#__PURE__*/jsxRuntime.jsx(DownArrow__default["default"], {})]
+      }), /*#__PURE__*/jsxRuntime.jsx(DownArrow, {})]
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "neeto-ui-bg-gray-200 neeto-ui-rounded-lg h-40 w-full"
     }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -707,7 +702,7 @@ var PropertiesPanel = function PropertiesPanel(_ref) {
     isSize = _useBreakpoints.isSize;
   var isLargerScreen = isSize("largeDesktop");
   var _useState = React.useState(!isLargerScreen),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    _useState2 = _slicedToArray(_useState, 2),
     isPropertiesPanelCollapsed = _useState2[0],
     setIsPropertiesPanelCollapsed = _useState2[1];
   React.useEffect(function () {
@@ -726,16 +721,16 @@ var PropertiesPanel = function PropertiesPanel(_ref) {
       className: "neeto-molecules-builder-panel__backdrop neeto-molecules-builder-panel__backdrop--extended",
       onClick: handleCollapsePanel
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classnames__default["default"]("neeto-molecules-builder-element-properties-panel__wrapper", {
+      className: classnames("neeto-molecules-builder-element-properties-panel__wrapper", {
         "neeto-molecules-builder-element-properties-panel__wrapper--collapsed": isPropertiesPanelCollapsed
       }),
       children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Skeleton, {})
-      }), !isPropertiesPanelCollapsed && /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+      }), !isPropertiesPanelCollapsed && /*#__PURE__*/jsxRuntime.jsx(Button, {
         className: "neeto-molecules-builder-properties-panel__close",
-        icon: Close__default["default"],
+        icon: Close,
         style: "secondary",
         onClick: handleCollapsePanel
       })]
@@ -747,6 +742,7 @@ PropertiesPanel.EmptyProperty = EmptyProperty;
 exports.DROPPABLE_TYPES = DROPPABLE_TYPES;
 exports.ELEMENTS_LIST_DROPPABLE_ID = ELEMENTS_LIST_DROPPABLE_ID;
 exports.ElementsPanel = ElementsPanel;
+exports.PANEL_TYPES = PANEL_TYPES;
 exports.PREVIEW_CONTAINER_DROPPABLE_ID = PREVIEW_CONTAINER_DROPPABLE_ID;
 exports.PropertiesPanel = PropertiesPanel;
 exports.SELECTED_ELEMENTS_LIST_DROPPABLE_ID = SELECTED_ELEMENTS_LIST_DROPPABLE_ID;