@bigbinary/neeto-form-frontend 2.0.0 → 2.0.2

package/dist/index.js

@@ -1,12 +1,14 @@
 import * as React$2 from 'react';
-import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, forwardRef, useImperativeHandle, Fragment, useReducer, useCallback as useCallback$1, useMemo as useMemo$1, createContext, createElement } from 'react';
+import React__default, { useState, useRef, useEffect, useContext, useLayoutEffect as useLayoutEffect$1, createElement, forwardRef, useImperativeHandle, Fragment as Fragment$1, useReducer, useCallback as useCallback$1, useMemo as useMemo$1, createContext } from 'react';
+import classnames from 'classnames';
 import { useFormikContext, useField, FieldArray, Form as Form$3, Formik, Field, FastField } from 'formik';
-import { filterNonNull, noop as noop$4, findBy, toLabelAndValue, isPresent as isPresent$1, truncate, humanize, isNotPresent, slugify, filterBy, removeBy, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
+import { filterNonNull, noop as noop$4, findBy, toLabelAndValue, isPresent as isPresent$1, truncate, slugify, filterBy, removeBy, isNotPresent, isNotEmpty, findById, notEqualsDeep } from '@bigbinary/neeto-cist';
 import { buildUrl, showThumbsUpToastr, withEventTargetValue, getQueryParams, dateFormat } from '@bigbinary/neeto-commons-frontend/utils';
 import PageLoader from '@bigbinary/neeto-molecules/PageLoader';
-import { assoc, mergeLeft, compose as compose$1, isEmpty, trim, useWith, path, split, either, isNil, values, equals, modify, prop, range, includes, __, reduce, reject, keys, pick, omit, pluck, without, difference, pipe as pipe$1, last, not, toLower, map, identity, clamp as clamp$2, isNotNil, filter as filter$1 } from 'ramda';
+import { assoc, mergeLeft, compose as compose$1, isEmpty, trim, useWith, path, split, isNotNil, either, isNil, values, equals, modify, prop, range, includes, __, reduce, reject, keys, pick, omit, pluck, without, difference, pipe as pipe$1, last, not, toLower, map, identity, clamp as clamp$2, filter as filter$1 } from 'ramda';
 import { useQuery, useQueryClient, useMutation } from 'react-query';
 import i18next, { t as t$4 } from 'i18next';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DEFAULT_PAGE_INDEX, DEFAULT_PAGE_SIZE } from '@bigbinary/neeto-commons-frontend/constants';
 import { useMutationWithInvalidation, withImmutableActions, withT, useStateWithDependency, useOnClickOutside, useDebounce } from '@bigbinary/neeto-commons-frontend/react-utils';
 import axios from 'axios';
@@ -14,18 +16,17 @@ import ReactDOM, { unstable_batchedUpdates, flushSync as flushSync$1 } from 'rea
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import { useTranslation, Trans } from 'react-i18next';
 import { create as create$2 } from 'zustand';
+import { isEditorEmpty, Editor as Editor$1, EditorContent } from '@bigbinary/neeto-editor';
 import { shallow } from 'zustand/shallow';
 import Alert from '@bigbinary/neetoui/Alert';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Typography from '@bigbinary/neetoui/Typography';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
-import classnames from 'classnames';
 import Pane from '@bigbinary/neetoui/Pane';
 import Form$2 from '@bigbinary/neetoui/formik/Form';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Textarea from '@bigbinary/neetoui/formik/Textarea';
-import { Editor as Editor$1, isEditorEmpty, EditorContent } from '@bigbinary/neeto-editor';
 import Switch from '@bigbinary/neetoui/formik/Switch';
 import { Info, Delete, Plus, Check, Close, FileGeneric } from '@bigbinary/neeto-icons';
 import Button$1 from '@bigbinary/neetoui/Button';
@@ -52,21 +53,6 @@ import Radio from '@bigbinary/neetoui/Radio';
 import Textarea$1 from '@bigbinary/neetoui/Textarea';
 import { renderToString } from 'react-dom/server';
 
-function _extends$8() {
-  _extends$8 = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends$8.apply(this, arguments);
-}
-
 function _typeof$4(o) {
   "@babel/helpers - typeof";
 
@@ -165,11 +151,13 @@ var _excluded$g = ["size"],
   _excluded3$2 = ["size"],
   _excluded4$1 = ["size"],
   _excluded5$1 = ["size"];
+function ownKeys$E(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$D(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$E(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$E(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Star = function Star(props) {
   var _props$size = props.size,
     size = _props$size === void 0 ? 20 : _props$size,
     other = _objectWithoutProperties$1(props, _excluded$g);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsx("svg", _objectSpread$D(_objectSpread$D({
     fill: "none",
     height: size,
     stroke: "currentColor",
@@ -179,15 +167,17 @@ var Star = function Star(props) {
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2z"
+  }, other), {}, {
+    children: /*#__PURE__*/jsx("path", {
+      d: "M12 2L15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2z"
+    })
   }));
 };
 var Heart = function Heart(props) {
   var _props$size2 = props.size,
     size = _props$size2 === void 0 ? 20 : _props$size2,
     other = _objectWithoutProperties$1(props, _excluded2$2);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsx("svg", _objectSpread$D(_objectSpread$D({
     fill: "none",
     height: size,
     stroke: "currentColor",
@@ -197,15 +187,17 @@ var Heart = function Heart(props) {
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+  }, other), {}, {
+    children: /*#__PURE__*/jsx("path", {
+      d: "M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"
+    })
   }));
 };
 var Zap = function Zap(props) {
   var _props$size3 = props.size,
     size = _props$size3 === void 0 ? 20 : _props$size3,
     other = _objectWithoutProperties$1(props, _excluded3$2);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsx("svg", _objectSpread$D(_objectSpread$D({
     fill: "none",
     height: size,
     stroke: "currentColor",
@@ -215,15 +207,17 @@ var Zap = function Zap(props) {
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M13 2L3 14 12 14 11 22 21 10 12 10 13 2z"
+  }, other), {}, {
+    children: /*#__PURE__*/jsx("path", {
+      d: "M13 2L3 14 12 14 11 22 21 10 12 10 13 2z"
+    })
   }));
 };
 var Crown = function Crown(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 20 : _ref$size,
     otherProps = _objectWithoutProperties$1(_ref, _excluded4$1);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsx("svg", _objectSpread$D(_objectSpread$D({
     fill: "none",
     height: size,
     stroke: "currentColor",
@@ -233,19 +227,21 @@ var Crown = function Crown(_ref) {
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, otherProps), /*#__PURE__*/React__default.createElement("path", {
-    d: "M22.3186 17.8652C22.3186 18.8915 21.4789 19.7311 20.4527 19.7311L20.4714 19.733H5.54466C4.49979 19.733 3.67882 18.912 3.67882 17.8858V8.61254H3.66016C3.66016 8.0901 4.07064 7.67962 4.59308 7.67962C4.761 7.67962 4.94759 7.71693 5.09686 7.82888L9.23902 10.5903L12.1871 6.14963V6.13097C12.4669 5.70182 13.0453 5.57122 13.4745 5.86975C13.5678 5.92573 13.6611 6.01902 13.717 6.11231L16.6651 10.5344L20.8072 7.75425C21.2177 7.45572 21.8129 7.56767 22.0928 7.99681C22.1861 8.14608 22.2421 8.314 22.2421 8.50059V17.7552",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
+  }, otherProps), {}, {
+    children: /*#__PURE__*/jsx("path", {
+      d: "M22.3186 17.8652C22.3186 18.8915 21.4789 19.7311 20.4527 19.7311L20.4714 19.733H5.54466C4.49979 19.733 3.67882 18.912 3.67882 17.8858V8.61254H3.66016C3.66016 8.0901 4.07064 7.67962 4.59308 7.67962C4.761 7.67962 4.94759 7.71693 5.09686 7.82888L9.23902 10.5903L12.1871 6.14963V6.13097C12.4669 5.70182 13.0453 5.57122 13.4745 5.86975C13.5678 5.92573 13.6611 6.01902 13.717 6.11231L16.6651 10.5344L20.8072 7.75425C21.2177 7.45572 21.8129 7.56767 22.0928 7.99681C22.1861 8.14608 22.2421 8.314 22.2421 8.50059V17.7552",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    })
   }));
 };
 var Trophy = function Trophy(_ref2) {
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 20 : _ref2$size,
     otherProps = _objectWithoutProperties$1(_ref2, _excluded5$1);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$D(_objectSpread$D({
     fill: "none",
     height: size,
     stroke: "currentColor",
@@ -255,36 +251,38 @@ var Trophy = function Trophy(_ref2) {
     viewBox: "0 0 24 24",
     width: size,
     xmlns: "http://www.w3.org/2000/svg"
-  }, otherProps), /*#__PURE__*/React__default.createElement("path", {
-    d: "M17.6873 8.05176H20.0311V8.05176C20.894 8.05176 21.5936 8.75131 21.5936 9.61426V11.1768C21.5936 12.9026 20.1944 14.3018 18.4686 14.3018H17.5889",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M13 16.6455V21.333",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M16.125 21.333H9.875",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M9.875 5.70801H16.125V5.70801C16.9879 5.70801 17.6875 6.40756 17.6875 7.27051V13.5205C17.6875 15.2464 16.2884 16.6455 14.5625 16.6455H11.4375V16.6455C9.71161 16.6455 8.3125 15.2464 8.3125 13.5205V7.27051V7.27051C8.3125 6.40756 9.01205 5.70801 9.875 5.70801V5.70801Z",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M8.3125 8.05176H5.96875V8.05176C5.1058 8.05176 4.40625 8.75131 4.40625 9.61426V11.1768V11.1768C4.40625 12.9026 5.80536 14.3018 7.53125 14.3018H8.41094",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
+  }, otherProps), {}, {
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M17.6873 8.05176H20.0311V8.05176C20.894 8.05176 21.5936 8.75131 21.5936 9.61426V11.1768C21.5936 12.9026 20.1944 14.3018 18.4686 14.3018H17.5889",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M13 16.6455V21.333",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M16.125 21.333H9.875",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M9.875 5.70801H16.125V5.70801C16.9879 5.70801 17.6875 6.40756 17.6875 7.27051V13.5205C17.6875 15.2464 16.2884 16.6455 14.5625 16.6455H11.4375V16.6455C9.71161 16.6455 8.3125 15.2464 8.3125 13.5205V7.27051V7.27051C8.3125 6.40756 9.01205 5.70801 9.875 5.70801V5.70801Z",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    }), /*#__PURE__*/jsx("path", {
+      d: "M8.3125 8.05176H5.96875V8.05176C5.1058 8.05176 4.40625 8.75131 4.40625 9.61426V11.1768V11.1768C4.40625 12.9026 5.80536 14.3018 7.53125 14.3018H8.41094",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5"
+    })]
   }));
 };
 var MemoizedStar = /*#__PURE__*/React__default.memo(Star);
@@ -697,8 +695,8 @@ var _excluded$f = ["formId", "preview", "language"],
   _excluded2$1 = ["formId", "language"],
   _excluded3$1 = ["page", "pageSize"],
   _excluded5 = ["formId", "submissionId"];
-function ownKeys$o(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$n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$o(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$o(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$D(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$C(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$D(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$D(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useForm = function useForm(_ref) {
   var formId = _ref.formId,
     _ref$preview = _ref.preview,
@@ -708,7 +706,7 @@ var useForm = function useForm(_ref) {
     options = _objectWithoutProperties$1(_ref, _excluded$f);
   return useQuery([QUERY_KEYS.QUESTIONS, preview ? "preview/".concat(formId) : formId, language], function () {
     return neetoFormApi.getPublicQuestions(formId, language);
-  }, _objectSpread$n({
+  }, _objectSpread$C({
     keepPreviousData: true
   }, options));
 };
@@ -719,14 +717,14 @@ var useFetchQuestions = function useFetchQuestions(_ref2) {
     options = _objectWithoutProperties$1(_ref2, _excluded2$1);
   return useQuery([QUERY_KEYS.QUESTIONS, formId, language], function () {
     return neetoFormApi.getQuestions(formId, language);
-  }, _objectSpread$n({
+  }, _objectSpread$C({
     keepPreviousData: true
   }, options));
 };
 var useCreateForm = function useCreateForm(options) {
   var language = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : i18next.resolvedLanguage;
   var queryClient = useQueryClient();
-  return useMutation(neetoFormApi.createForm, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  return useMutation(neetoFormApi.createForm, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess(form) {
       var _options$onSuccess;
       queryClient.setQueryData(QUERY_KEYS.QUESTIONS, function (forms) {
@@ -746,7 +744,7 @@ var useUpdateForm = function useUpdateForm(options) {
     var id = _ref3.id,
       values = _ref3.values;
     return neetoFormApi.updateForm(id, values);
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess(data, _ref4) {
       var id = _ref4.id;
       queryClient.setQueryData([QUERY_KEYS.QUESTIONS, id, language], assoc("title", data.title));
@@ -766,7 +764,7 @@ var useCreateQuestion = function useCreateQuestion(formId, language) {
   var queryClient = useQueryClient();
   return useMutation(function (payload) {
     return neetoFormApi.createQuestion(formId, filterNonNull(payload));
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
@@ -792,7 +790,7 @@ var useUpdateQuestion = function useUpdateQuestion(formId, language) {
       questionId: questionId,
       payload: filterNonNull(payload)
     });
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
         args[_key2] = arguments[_key2];
@@ -812,7 +810,7 @@ var useDeleteQuestion = function useDeleteQuestion(formId, language) {
   var queryClient = useQueryClient();
   return useMutation(function (questionId) {
     return neetoFormApi.deleteQuestion(formId, questionId);
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
         args[_key3] = arguments[_key3];
@@ -832,7 +830,7 @@ var useReorderQuestions = function useReorderQuestions(formId, language) {
   var queryClient = useQueryClient();
   return useMutation(function (payload) {
     return neetoFormApi.reorderQuestions(formId, filterNonNull(payload));
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess() {
       for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
         args[_key4] = arguments[_key4];
@@ -859,7 +857,7 @@ var useForms = function useForms() {
       page: page,
       pageSize: pageSize
     });
-  }, _objectSpread$n({
+  }, _objectSpread$C({
     keepPreviousData: true
   }, options));
 };
@@ -867,7 +865,7 @@ var useDeleteForm = function useDeleteForm(options) {
   return useMutationWithInvalidation(function (_ref7) {
     var id = _ref7.id;
     return neetoFormApi.destroyForm(id);
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     keysToInvalidate: [[QUERY_KEYS.FORMS], function (_, _ref8) {
       var id = _ref8.id;
       return [QUERY_KEYS.QUESTIONS, id];
@@ -886,7 +884,7 @@ var useSubmission = function useSubmission(_ref11) {
     options = _objectWithoutProperties$1(_ref11, _excluded5);
   return useQuery([QUERY_KEYS.SUBMISSION, formId, submissionId], function () {
     return neetoFormApi.getPublicSubmission(formId, submissionId);
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     keepPreviousData: true
   }));
 };
@@ -896,7 +894,7 @@ var useCreateSubmission = function useCreateSubmission(options) {
     var formId = _ref12.formId,
       values = _ref12.values;
     return neetoFormApi.submitPublicForm(formId, values);
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission, _data$submission2;
       for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
@@ -917,7 +915,7 @@ var useUpdateSubmission = function useUpdateSubmission(options) {
     var formId = _ref13.formId,
       values = _ref13.values;
     return neetoFormApi.updatePublicSubmission(formId, values);
-  }, _objectSpread$n(_objectSpread$n({}, options), {}, {
+  }, _objectSpread$C(_objectSpread$C({}, options), {}, {
     onSuccess: function onSuccess() {
       var _data$submission3;
       for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
@@ -1022,7 +1020,7 @@ function _defineProperty$5(obj, key, value) {
   return obj;
 }
 
-function ownKeys$n(e, r) {
+function ownKeys$C(e, r) {
   var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
     var o = Object.getOwnPropertySymbols(e);
@@ -1035,9 +1033,9 @@ function ownKeys$n(e, r) {
 function _objectSpread2(e) {
   for (var r = 1; r < arguments.length; r++) {
     var t = null != arguments[r] ? arguments[r] : {};
-    r % 2 ? ownKeys$n(Object(t), !0).forEach(function (r) {
+    r % 2 ? ownKeys$C(Object(t), !0).forEach(function (r) {
       _defineProperty$5(e, r, t[r]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$n(Object(t)).forEach(function (r) {
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$C(Object(t)).forEach(function (r) {
       Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
@@ -9929,6 +9927,13 @@ useWith(path, [split(".")]);
 var isFunction$1 = function isFunction(obj) {
   return typeof obj === "function";
 };
+var fieldWithFallback = function fieldWithFallback(question, fieldName) {
+  var hasRichContent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var fallback = question["".concat(fieldName, "Fallback")];
+  var field = question[fieldName];
+  var isFieldEmpty = hasRichContent ? isEditorEmpty(field) : isEmpty(field);
+  return isFieldEmpty && isNotNil(fallback) ? fallback : field;
+};
 
 /** @type {import("neetocommons/react-utils").ZustandStoreHook} */
 var useBuildFormStore = create$2(withImmutableActions(function (set) {
@@ -11567,13 +11572,6 @@ var getActiveQuestionKindDetails = function getActiveQuestionKindDetails(_ref) {
 var generateArray = function generateArray(start, end) {
   return range(start, end + 1);
 };
-var isElementOverflowing = function isElementOverflowing(_ref2) {
-  var clientWidth = _ref2.clientWidth,
-    clientHeight = _ref2.clientHeight,
-    scrollWidth = _ref2.scrollWidth,
-    scrollHeight = _ref2.scrollHeight;
-  return scrollHeight > clientHeight || scrollWidth > clientWidth;
-};
 var htmlToPlainText = function htmlToPlainText(htmlContent) {
   var formattedContent = htmlContent.replaceAll(EMPTY_PARAGRAPH_REGEX, "\n");
   var node = document.createElement("div");
@@ -11816,9 +11814,8 @@ var DeleteAlert = function DeleteAlert(_ref) {
     var questionKind = selectedQuestion.kind;
     var independentLabel = INDEPENDENT_LABELS_MAP[questionKind];
     if (isPresent$1(independentLabel)) return independentLabel;
-    var questionLabel = selectedQuestion.label;
-    if (isPresent$1(questionLabel)) return truncate(questionLabel, 40);
-    return isPresent$1(questionLabel) ? truncate(questionLabel, 40) : humanize(questionKind);
+    var questionLabel = fieldWithFallback(selectedQuestion, "label");
+    return truncate(questionLabel, 40);
   };
   var _useDeleteQuestion = useDeleteQuestion(selectedQuestion === null || selectedQuestion === void 0 ? void 0 : selectedQuestion.formId, selectedLanguage, {
       onSuccess: function onSuccess() {
@@ -11845,13 +11842,13 @@ var DeleteAlert = function DeleteAlert(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default.createElement(Alert, {
+  return /*#__PURE__*/jsx(Alert, {
     isOpen: isOpen,
     onClose: onClose,
     isSubmitting: isDeleting,
     submitButtonLabel: t("neetoForm.common.delete"),
     title: t("neetoForm.questions.deleteAlert.title"),
-    message: isPresent$1(selectedQuestion) && /*#__PURE__*/React__default.createElement(Trans, {
+    message: isPresent$1(selectedQuestion) && /*#__PURE__*/jsx(Trans, {
       i18nKey: "neetoForm.questions.deleteAlert.message",
       values: {
         count: languagesCount,
@@ -11890,34 +11887,42 @@ var ChangeLanguageDropdown = function ChangeLanguageDropdown(_ref) {
   var selectedLanguageName = (_findBy = findBy({
     code: currentLanguage
   }, languages)) === null || _findBy === void 0 ? void 0 : _findBy.name;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: t("neetoForm.questions.changeLanguage")
-  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Dropdown, {
-    buttonStyle: "secondary",
-    label: selectedLanguageName
-  }, /*#__PURE__*/React__default.createElement(Dropdown.Menu, null, languages.map(function (_ref2) {
-    var code = _ref2.code,
-      name = _ref2.name;
-    return /*#__PURE__*/React__default.createElement(Dropdown.MenuItem.Button, {
-      isActive: currentLanguage === code,
-      key: code,
-      onClick: function onClick() {
-        return languageChangeHandler(code);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Tooltip, {
+      content: t("neetoForm.questions.changeLanguage"),
+      children: /*#__PURE__*/jsx("div", {
+        children: /*#__PURE__*/jsx(Dropdown, {
+          buttonStyle: "secondary",
+          label: selectedLanguageName,
+          children: /*#__PURE__*/jsx(Dropdown.Menu, {
+            children: languages.map(function (_ref2) {
+              var code = _ref2.code,
+                name = _ref2.name;
+              return /*#__PURE__*/jsx(Dropdown.MenuItem.Button, {
+                isActive: currentLanguage === code,
+                onClick: function onClick() {
+                  return languageChangeHandler(code);
+                },
+                children: name
+              }, code);
+            })
+          })
+        })
+      })
+    }), /*#__PURE__*/jsx(Alert, {
+      isOpen: isUnsavedChangesAlertOpen,
+      message: t("neetoForm.questions.unsavedChangesAlert.message"),
+      submitButtonLabel: t("neetoForm.questions.unsavedChangesAlert.discard"),
+      title: t("neetoForm.questions.unsavedChangesAlert.title"),
+      onClose: function onClose() {
+        return setIsUnsavedChangesAlertOpen(false);
+      },
+      onSubmit: function onSubmit() {
+        onChange(selectedLanguage);
+        setIsUnsavedChangesAlertOpen(false);
       }
-    }, name);
-  }))))), /*#__PURE__*/React__default.createElement(Alert, {
-    isOpen: isUnsavedChangesAlertOpen,
-    message: t("neetoForm.questions.unsavedChangesAlert.message"),
-    submitButtonLabel: t("neetoForm.questions.unsavedChangesAlert.discard"),
-    title: t("neetoForm.questions.unsavedChangesAlert.title"),
-    onClose: function onClose() {
-      return setIsUnsavedChangesAlertOpen(false);
-    },
-    onSubmit: function onSubmit() {
-      onChange(selectedLanguage);
-      setIsUnsavedChangesAlertOpen(false);
-    }
-  }));
+    })]
+  });
 };
 
 var Overview = function Overview(_ref) {
@@ -11927,56 +11932,65 @@ var Overview = function Overview(_ref) {
     selectedLanguage = _ref.selectedLanguage,
     onLanguageChange = _ref.onLanguageChange,
     additionalActionOptions = _ref.additionalActionOptions;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-6 flex-shrink-0 space-y-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "neeto-form-engine-overview-title",
-    lineHeight: "neeto-ui-leading-normal",
-    style: "h2",
-    weight: "neeto-ui-font-semibold"
-  }, title), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-shrink-0 items-center justify-between space-x-1"
-  }, availableLanguages.length > 1 && /*#__PURE__*/React__default.createElement(ChangeLanguageDropdown, {
-    currentLanguage: selectedLanguage,
-    languages: availableLanguages,
-    onChange: onLanguageChange
-  }), isPresent$1(additionalActionOptions) && /*#__PURE__*/React__default.createElement(MoreDropdown, {
-    dropdownButtonProps: {
-      isRounded: true,
-      style: "tertiary"
-    },
-    dropdownProps: {
-      strategy: "fixed",
-      position: "bottom-start"
-    },
-    menuItems: additionalActionOptions
-  }))), /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "neeto-form-engine-overview-description",
-    style: "body2"
-  }, description));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-nano-form-wrapper__overview mb-4 w-full flex-shrink-0 space-y-4 px-6 pt-6",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex items-center justify-between",
+      children: [/*#__PURE__*/jsx(Typography, {
+        "data-cy": "neeto-form-engine-overview-title",
+        lineHeight: "neeto-ui-leading-normal",
+        style: "h2",
+        weight: "neeto-ui-font-semibold",
+        children: title
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-shrink-0 items-center justify-between space-x-1",
+        children: [availableLanguages.length > 1 && /*#__PURE__*/jsx(ChangeLanguageDropdown, {
+          currentLanguage: selectedLanguage,
+          languages: availableLanguages,
+          onChange: onLanguageChange
+        }), isPresent$1(additionalActionOptions) && /*#__PURE__*/jsx(MoreDropdown, {
+          dropdownButtonProps: {
+            isRounded: true,
+            style: "tertiary"
+          },
+          dropdownProps: {
+            strategy: "fixed",
+            position: "bottom-start"
+          },
+          menuItems: additionalActionOptions
+        })]
+      })]
+    }), /*#__PURE__*/jsx(Typography, {
+      "data-cy": "neeto-form-engine-overview-description",
+      style: "body2",
+      children: description
+    })]
+  });
 };
 
 var _excluded$c = ["size", "color"],
   _excluded2 = ["size", "color"],
   _excluded3 = ["size", "color"],
   _excluded4 = ["size", "color"];
+function ownKeys$B(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$B(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$B(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$B(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BadSmiley = function BadSmiley(props) {
   var size = props.size,
     color = props.color,
     other = _objectWithoutProperties$1(props, _excluded$c);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$B(_objectSpread$B({
     fill: "none",
     height: size,
     viewBox: "0 0 48 48",
     width: size
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24c13.234 0 24-10.767 24-24S37.234 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.082 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0c0-.575.468-1.044 1.043-1.044s1.044.469 1.044 1.044c0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 010-2.087 1.045 1.045 0 010 2.087zM24 29.218a13.677 13.677 0 00-10.168 4.52 1.043 1.043 0 101.553 1.394A11.587 11.587 0 0124 31.305c3.3 0 6.44 1.394 8.614 3.826a1.045 1.045 0 001.473.082 1.044 1.044 0 00.082-1.473c-2.57-2.874-6.277-4.523-10.169-4.523z",
-    fill: color
+  }, other), {}, {
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24c13.234 0 24-10.767 24-24S37.234 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.082 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
+      fill: color
+    }), /*#__PURE__*/jsx("path", {
+      d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0c0-.575.468-1.044 1.043-1.044s1.044.469 1.044 1.044c0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 010-2.087 1.045 1.045 0 010 2.087zM24 29.218a13.677 13.677 0 00-10.168 4.52 1.043 1.043 0 101.553 1.394A11.587 11.587 0 0124 31.305c3.3 0 6.44 1.394 8.614 3.826a1.045 1.045 0 001.473.082 1.044 1.044 0 00.082-1.473c-2.57-2.874-6.277-4.523-10.169-4.523z",
+      fill: color
+    })]
   }));
 };
 BadSmiley.defaultProps = {
@@ -11988,17 +12002,19 @@ var OkaySmiley = function OkaySmiley(props) {
   var size = props.size,
     color = props.color,
     other = _objectWithoutProperties$1(props, _excluded2);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$B(_objectSpread$B({
     fill: "none",
     height: size,
     viewBox: "0 0 48 48",
     width: size
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M15.652 22.956a3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13zm0-4.174c.575 0 1.044.469 1.044 1.044 0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043c0-.575.468-1.044 1.043-1.044zm16.696-2.086a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 01-1.044-1.043c0-.575.469-1.044 1.044-1.044a1.044 1.044 0 010 2.087zm2.087 8.349h-20.87a1.044 1.044 0 000 2.086h20.87a1.044 1.044 0 000-2.086z",
-    fill: color
+  }, other), {}, {
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
+      fill: color
+    }), /*#__PURE__*/jsx("path", {
+      d: "M15.652 22.956a3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13zm0-4.174c.575 0 1.044.469 1.044 1.044 0 .575-.469 1.043-1.044 1.043a1.045 1.045 0 01-1.043-1.043c0-.575.468-1.044 1.043-1.044zm16.696-2.086a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.173a1.045 1.045 0 01-1.044-1.043c0-.575.469-1.044 1.044-1.044a1.044 1.044 0 010 2.087zm2.087 8.349h-20.87a1.044 1.044 0 000 2.086h20.87a1.044 1.044 0 000-2.086z",
+      fill: color
+    })]
   }));
 };
 OkaySmiley.defaultProps = {
@@ -12010,17 +12026,19 @@ var GoodSmiley = function GoodSmiley(props) {
   var size = props.size,
     color = props.color,
     other = _objectWithoutProperties$1(props, _excluded3);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$B(_objectSpread$B({
     fill: "none",
     height: size,
     viewBox: "0 0 48 48",
     width: size
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
-    fill: color
-  }), /*#__PURE__*/React__default.createElement("path", {
-    d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0a1.044 1.044 0 012.087 0c0 .575-.469 1.044-1.044 1.044a1.045 1.045 0 01-1.043-1.044zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.174a1.045 1.045 0 01-1.044-1.044 1.044 1.044 0 111.044 1.044zm.265 8.695c-2.175 2.432-5.314 3.826-8.613 3.826a11.59 11.59 0 01-8.615-3.827 1.043 1.043 0 10-1.553 1.394A13.677 13.677 0 0024 35.478c3.892 0 7.599-1.648 10.17-4.521a1.043 1.043 0 10-1.557-1.392z",
-    fill: color
+  }, other), {}, {
+    children: [/*#__PURE__*/jsx("path", {
+      d: "M24 0C10.767 0 0 10.767 0 24s10.767 24 24 24 24-10.767 24-24S37.233 0 24 0zm0 45.913c-12.084 0-21.913-9.83-21.913-21.913 0-12.084 9.83-21.913 21.913-21.913 12.084 0 21.913 9.83 21.913 21.913 0 12.084-9.83 21.913-21.913 21.913z",
+      fill: color
+    }), /*#__PURE__*/jsx("path", {
+      d: "M18.783 19.826a3.134 3.134 0 00-3.13-3.13 3.134 3.134 0 00-3.131 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13zm-4.174 0a1.044 1.044 0 012.087 0c0 .575-.469 1.044-1.044 1.044a1.045 1.045 0 01-1.043-1.044zm17.739-3.13a3.134 3.134 0 00-3.13 3.13 3.134 3.134 0 003.13 3.13 3.134 3.134 0 003.13-3.13 3.134 3.134 0 00-3.13-3.13zm0 4.174a1.045 1.045 0 01-1.044-1.044 1.044 1.044 0 111.044 1.044zm.265 8.695c-2.175 2.432-5.314 3.826-8.613 3.826a11.59 11.59 0 01-8.615-3.827 1.043 1.043 0 10-1.553 1.394A13.677 13.677 0 0024 35.478c3.892 0 7.599-1.648 10.17-4.521a1.043 1.043 0 10-1.557-1.392z",
+      fill: color
+    })]
   }));
 };
 GoodSmiley.defaultProps = {
@@ -12032,18 +12050,31 @@ var Drag = function Drag(props) {
   var size = props.size,
     color = props.color,
     other = _objectWithoutProperties$1(props, _excluded4);
-  return /*#__PURE__*/React__default.createElement("svg", _extends$8({
+  return /*#__PURE__*/jsxs("svg", _objectSpread$B(_objectSpread$B({
     fill: "none",
     height: size,
     viewBox: "0 0 24 24",
     width: size
-  }, other), /*#__PURE__*/React__default.createElement("path", {
-    d: "M8.997 17.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM14.497 17.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM8.997 11.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM14.497 11.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM8.997 5.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5zM14.497 5.5c-.275 0-.5.225-.497.5 0 .275.225.5.5.5s.5-.225.5-.5-.225-.5-.503-.5z",
-    fill: color,
-    stroke: color,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
+  }, other), {}, {
+    children: [/*#__PURE__*/jsx("g", {
+      clipPath: "url(#clip0_6290_43)",
+      fill: color,
+      stroke: color,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "1.5",
+      children: /*#__PURE__*/jsx("path", {
+        d: "M8 12a1 1 0 102 0 1 1 0 00-2 0zM8 18a1 1 0 102 0 1 1 0 00-2 0zM8 6a1 1 0 102 0 1 1 0 00-2 0zM14 12a1 1 0 102 0 1 1 0 00-2 0zM14 18a1 1 0 102 0 1 1 0 00-2 0zM14 6a1 1 0 102 0 1 1 0 00-2 0z"
+      })
+    }), /*#__PURE__*/jsx("defs", {
+      children: /*#__PURE__*/jsx("clipPath", {
+        id: "clip0_6290_43",
+        children: /*#__PURE__*/jsx("path", {
+          d: "M0 0H24V24H0z",
+          fill: color
+        })
+      })
+    })]
   }));
 };
 Drag.defaultProps = {
@@ -12077,11 +12108,6 @@ var Card = function Card(_ref) {
     onEdit = _ref.onEdit,
     onClone = _ref.onClone,
     onDelete = _ref.onDelete;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray$3(_useState, 2),
-    isTooltipEnabled = _useState2[0],
-    setIsTooltipEnabled = _useState2[1];
-  var questionLabelRef = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var _getActiveKindDetails = getActiveKindDetails({
@@ -12089,61 +12115,59 @@ var Card = function Card(_ref) {
       item: question
     }),
     kind = _getActiveKindDetails.kind,
-    label = _getActiveKindDetails.label,
     isSingular = _getActiveKindDetails.isSingular;
+  var label = fieldWithFallback(question, "label");
   var questionLabel = isRichTextQuestion(kind) ? htmlToPlainText(label) : label;
-  useEffect(function () {
-    var element = questionLabelRef.current;
-    if (isNotPresent(element)) return;
-    setIsTooltipEnabled(isElementOverflowing(element));
-  }, [questionLabel]);
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     "data-cy": "neeto-form-engine-".concat(slugify(questionLabel)),
-    className: classnames("neeto-ui-rounded neeto-ui-border-gray-300 flex h-10 w-full items-center justify-between border p-2", {
-      "neeto-ui-border-primary-500 border-2": isActive
+    className: classnames("neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-white neeto-form-nano-form__card flex h-10 w-full items-center justify-between border p-2", {
+      "neeto-ui-border-primary-500 neeto-form-nano-form__card--active": isActive
     }),
     onClick: function onClick() {
       return onSelect(question);
-    }
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between space-x-2"
-  }, /*#__PURE__*/React__default.createElement(Drag, {
-    className: "flex-shrink-0 cursor-move"
-  }), /*#__PURE__*/React__default.createElement(Tooltip, {
-    content: questionLabel,
-    disabled: !isTooltipEnabled,
-    position: "top"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "max-w-md truncate",
-    lineHeight: "neeto-ui-leading-tight",
-    ref: questionLabelRef,
-    style: "h5",
-    weight: "neeto-ui-font-medium"
-  }, questionLabel))), /*#__PURE__*/React__default.createElement(MoreDropdown, {
-    dropdownProps: {
-      strategy: "fixed"
     },
-    menuItems: [{
-      "data-cy": "edit-question",
-      key: "edit",
-      label: t("neetoForm.common.edit"),
-      onClick: onEdit
-    }, {
-      "data-cy": "clone-question",
-      key: "clone",
-      label: t("neetoForm.common.clone"),
-      isVisible: !isSingular && isFunction$1(onClone),
-      onClick: onClone
-    }, {
-      "data-cy": "delete-question",
-      key: "delete",
-      label: t("neetoForm.common.delete"),
-      isVisible: isFunction$1(onDelete),
-      onClick: onDelete
-    }]
-  }));
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex min-w-0 flex-grow items-center gap-1",
+      children: [/*#__PURE__*/jsx(Drag, {
+        className: "neeto-ui-text-gray-600 flex-shrink-0"
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "line-clamp-2 min-w-0 flex-grow truncate break-words",
+        lineHeight: "snug",
+        style: "body2",
+        weight: "medium",
+        children: questionLabel
+      })]
+    }), /*#__PURE__*/jsx(MoreDropdown, {
+      dropdownButtonProps: {
+        className: "shrink-0"
+      },
+      dropdownProps: {
+        strategy: "fixed"
+      },
+      menuItems: [{
+        "data-cy": "edit-question",
+        key: "edit",
+        label: t("neetoForm.common.edit"),
+        onClick: onEdit
+      }, {
+        "data-cy": "clone-question",
+        key: "clone",
+        label: t("neetoForm.common.clone"),
+        isVisible: !isSingular && isFunction$1(onClone),
+        onClick: onClone
+      }, {
+        "data-cy": "delete-question",
+        key: "delete",
+        label: t("neetoForm.common.delete"),
+        isVisible: isFunction$1(onDelete),
+        onClick: onDelete
+      }]
+    })]
+  });
 };
 
+function ownKeys$A(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$A(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$A(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$A(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Questions = function Questions(_ref) {
   var questions = _ref.questions,
     isDeletable = _ref.isDeletable,
@@ -12154,39 +12178,42 @@ var Questions = function Questions(_ref) {
     onClone = _ref.onClone,
     onDelete = _ref.onDelete,
     onSelect = _ref.onSelect;
-  return /*#__PURE__*/React__default.createElement(ConnectedDroppable$1, {
-    droppableId: "droppable"
-  }, function (_ref2) {
-    var droppableProps = _ref2.droppableProps,
-      placeholder = _ref2.placeholder,
-      innerRef = _ref2.innerRef;
-    return /*#__PURE__*/React__default.createElement("div", _extends$8({}, droppableProps, {
-      className: "space-y-2",
-      ref: innerRef
-    }), questions.map(function (question, index) {
-      var _question$id, _question$id2;
-      return /*#__PURE__*/React__default.createElement(PublicDraggable, {
-        index: index,
-        draggableId: "question-".concat((_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId),
-        key: "question-".concat((_question$id2 = question.id) !== null && _question$id2 !== void 0 ? _question$id2 : question.nodeId)
-      }, function (_ref3) {
-        var draggableProps = _ref3.draggableProps,
-          dragHandleProps = _ref3.dragHandleProps,
-          innerRef = _ref3.innerRef;
-        return /*#__PURE__*/React__default.createElement("div", _extends$8({}, draggableProps, dragHandleProps, {
-          ref: innerRef
-        }), /*#__PURE__*/React__default.createElement(Card, {
-          allQuestionKinds: allQuestionKinds,
-          getActiveKindDetails: getActiveKindDetails,
-          onClone: onClone,
-          onEdit: onEdit,
-          onSelect: onSelect,
-          question: question,
-          isActive: equals(selectedQuestion, question),
-          onDelete: isDeletable(question) && onDelete
-        }));
-      });
-    }), placeholder);
+  return /*#__PURE__*/jsx(ConnectedDroppable$1, {
+    droppableId: "droppable",
+    children: function children(_ref2) {
+      var droppableProps = _ref2.droppableProps,
+        placeholder = _ref2.placeholder,
+        innerRef = _ref2.innerRef;
+      return /*#__PURE__*/jsxs("div", _objectSpread$A(_objectSpread$A({}, droppableProps), {}, {
+        className: "space-y-2",
+        ref: innerRef,
+        children: [questions.map(function (question, index) {
+          var _question$id, _question$id2;
+          return /*#__PURE__*/createElement(PublicDraggable, {
+            index: index,
+            draggableId: "question-".concat((_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId),
+            key: "question-".concat((_question$id2 = question.id) !== null && _question$id2 !== void 0 ? _question$id2 : question.nodeId)
+          }, function (_ref3) {
+            var draggableProps = _ref3.draggableProps,
+              dragHandleProps = _ref3.dragHandleProps,
+              innerRef = _ref3.innerRef;
+            return /*#__PURE__*/jsx("div", _objectSpread$A(_objectSpread$A(_objectSpread$A({}, draggableProps), dragHandleProps), {}, {
+              ref: innerRef,
+              children: /*#__PURE__*/jsx(Card, {
+                allQuestionKinds: allQuestionKinds,
+                getActiveKindDetails: getActiveKindDetails,
+                onClone: onClone,
+                onEdit: onEdit,
+                onSelect: onSelect,
+                question: question,
+                isActive: equals(selectedQuestion, question),
+                onDelete: isDeletable(question) && onDelete
+              })
+            }));
+          });
+        }), placeholder]
+      }));
+    }
   });
 };
 
@@ -12267,8 +12294,8 @@ var arrayHelpers = {
   moveItem: moveItem
 };
 
-function ownKeys$m(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$m(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$m(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$m(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$z(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$z(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$z(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$z(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var generateUniqueFieldCode = function generateUniqueFieldCode(type, questions) {
   var fieldCodes = pluck("fieldCode", filterBy({
     kind: type
@@ -12304,7 +12331,7 @@ var handleFieldDragEnd = function handleFieldDragEnd(_ref2) {
   var nextItems = _toConsumableArray$1(items);
   arrayHelpers.moveItem(nextItems, source.index, destination.index);
   var orderedItems = nextItems.map(function (item, index) {
-    return _objectSpread$m(_objectSpread$m({}, item), {}, {
+    return _objectSpread$z(_objectSpread$z({}, item), {}, {
       displayOrder: index
     });
   });
@@ -12318,7 +12345,7 @@ var createFieldData = function createFieldData(_ref3) {
     _ref3$isRequired = _ref3.isRequired,
     isRequired = _ref3$isRequired === void 0 ? undefined : _ref3$isRequired,
     questions = _ref3.questions;
-  return _objectSpread$m(_objectSpread$m({}, defaults), {}, {
+  return _objectSpread$z(_objectSpread$z({}, defaults), {}, {
     metadata: metadata,
     isRequired: isRequired,
     kind: type,
@@ -12335,14 +12362,14 @@ var duplicateFieldData = function duplicateFieldData(_ref4) {
   }, questionKinds);
   var isRequired = item.isRequired,
     kind = item.kind,
-    label = item.label,
     optionsAttributes = item.optionsAttributes;
+  var label = fieldWithFallback(item, "label");
   var defaultAttributeNames = keys(questionKind.defaults || {});
   var defaultAttributes = pick(defaultAttributeNames, item);
   var newQuestionLabel = isRichTextQuestion(kind) ? label : t$4("neetoForm.common.clonedElementLabel", {
     label: label
   });
-  return _objectSpread$m(_objectSpread$m({}, defaultAttributes), {}, {
+  return _objectSpread$z(_objectSpread$z({}, defaultAttributes), {}, {
     isRequired: isRequired,
     kind: kind,
     label: newQuestionLabel,
@@ -12400,11 +12427,13 @@ const SvgNoQuestions = props => /*#__PURE__*/React$2.createElement("svg", _exten
 
 var AddFirstQuestion = function AddFirstQuestion(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex h-full flex-col items-center justify-center py-8"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-6"
-  }, /*#__PURE__*/React__default.createElement(SvgNoQuestions, null)), children);
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex h-full flex-col items-center justify-center py-8",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "mb-6",
+      children: /*#__PURE__*/jsx(SvgNoQuestions, {})
+    }), children]
+  });
 };
 
 var NAME = QUESTION_TYPES.NAME,
@@ -12440,6 +12469,8 @@ var INITIAL_VALUES = {
 };
 
 var _excluded$b = ["label", "name"];
+function ownKeys$y(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$y(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$y(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$y(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -12455,7 +12486,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     var end = element.value.length;
     element.setSelectionRange(end, end);
   };
-  return /*#__PURE__*/React__default.createElement(Textarea, _extends$8({
+  return /*#__PURE__*/jsx(Textarea, _objectSpread$y({
     label: label,
     name: name,
     className: "neeto-form-nano-adaptive-input",
@@ -12473,19 +12504,23 @@ var Block = function Block(_ref) {
   var title = _ref.title,
     children = _ref.children,
     dataCy = _ref.dataCy;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: "mt-4 space-y-4",
-    "data-cy": dataCy
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-between",
-    "data-cy": "properties-header"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    lineHeight: "normal",
-    style: "body1",
-    weight: "semibold"
-  }, title)), /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
-  }, children));
+    "data-cy": dataCy,
+    children: [/*#__PURE__*/jsx("div", {
+      className: "flex items-center justify-between",
+      "data-cy": "properties-header",
+      children: /*#__PURE__*/jsx(Typography, {
+        lineHeight: "normal",
+        style: "body1",
+        weight: "semibold",
+        children: title
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "space-y-4",
+      children: children
+    })]
+  });
 };
 
 var useUpdateEditorContent = function useUpdateEditorContent(_ref) {
@@ -12575,33 +12610,37 @@ var Editor = function Editor() {
     initialValue: initialValue,
     fieldCode: fieldCode
   });
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full cursor-auto"
-  }, /*#__PURE__*/React__default.createElement(Editor$1, {
-    required: true,
-    error: touched ? error : "",
-    id: "editor",
-    initialValue: value,
-    name: fieldName,
-    ref: editorRef,
-    onBlur: function onBlur() {
-      return setTouched(true);
-    },
-    onChange: setValue
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full cursor-auto",
+    children: /*#__PURE__*/jsx(Editor$1, {
+      required: true,
+      error: touched ? error : "",
+      id: "editor",
+      initialValue: value,
+      name: fieldName,
+      ref: editorRef,
+      onBlur: function onBlur() {
+        return setTouched(true);
+      },
+      onChange: setValue
+    })
+  });
 };
 
 var RequiredSwitch = withT(function (_ref) {
   var t = _ref.t;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default.createElement(Switch, {
-    label: t("neetoForm.questions.common.questionFields.field.required"),
-    name: "isRequired"
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full",
+    children: /*#__PURE__*/jsx(Switch, {
+      label: t("neetoForm.questions.common.questionFields.field.required"),
+      name: "isRequired"
+    })
+  });
 });
 
 var _excluded$a = ["maxLength"];
+function ownKeys$x(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$x(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$x(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$x(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var InputWithMaxLength = function InputWithMaxLength(_ref) {
   var maxLength = _ref.maxLength,
     props = _objectWithoutProperties$1(_ref, _excluded$a);
@@ -12615,38 +12654,40 @@ var InputWithMaxLength = function InputWithMaxLength(_ref) {
     }
   }, [value, maxLength, setValue]);
   var shouldShowMaxLength = value && value.length > maxLength - 10;
-  return /*#__PURE__*/React__default.createElement(Input, _extends$8({}, props, shouldShowMaxLength && {
+  return /*#__PURE__*/jsx(Input, _objectSpread$x(_objectSpread$x({}, props), shouldShowMaxLength && {
     maxLength: maxLength
   }));
 };
 
 var FieldCode = withT(function (_ref) {
   var t = _ref.t;
-  return /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(InputWithMaxLength, {
-    required: true,
-    label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
-    name: "fieldCode",
-    helpText: /*#__PURE__*/React__default.createElement(Trans, {
-      i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
-      components: {
-        Link: /*#__PURE__*/React__default.createElement(Button$1, {
-          className: "text-xs",
-          href: FIELD_CODE_DOC,
-          style: "link",
-          target: "_blank"
-        })
-      }
-    }),
-    labelProps: {
-      helpIconProps: {
-        icon: Info,
-        className: "cursor-pointer",
-        onClick: function onClick() {
-          return window.open(FIELD_CODE_DOC, "_blank");
+  return /*#__PURE__*/jsx("div", {
+    children: /*#__PURE__*/jsx(InputWithMaxLength, {
+      required: true,
+      label: t("neetoForm.questions.common.questionFields.field.fieldCode"),
+      name: "fieldCode",
+      helpText: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoForm.questions.common.questionFields.field.fieldCodeHelpDescription",
+        components: {
+          Link: /*#__PURE__*/jsx(Button$1, {
+            className: "text-xs",
+            href: FIELD_CODE_DOC,
+            style: "link",
+            target: "_blank"
+          })
+        }
+      }),
+      labelProps: {
+        helpIconProps: {
+          icon: Info,
+          className: "cursor-pointer",
+          onClick: function onClick() {
+            return window.open(FIELD_CODE_DOC, "_blank");
+          }
         }
       }
-    }
-  }));
+    })
+  });
 });
 
 var Form$1 = function Form(_ref) {
@@ -12704,43 +12745,50 @@ var Form$1 = function Form(_ref) {
     setErrors({});
     setTouched({});
   };
-  return /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    isClearable: true,
-    isSearchable: true,
-    defaultValue: buildDefaultValueForKind(questionKind),
-    innerRef: initialFocusRef,
-    isDisabled: isEdit,
-    name: "kind",
-    options: buildKindOptions(questionKinds),
-    label: t("neetoForm.questions.common.questionFields.field.questionType"),
-    onChange: handleKindChange
-  }), isRichTextQuestion(kind) ? /*#__PURE__*/React__default.createElement(Editor, {
-    isLabelDisabled: isLabelDisabled
-  }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React__default.createElement(FormikAdaptiveInput, {
-    required: true,
-    disabled: isLabelDisabled,
-    name: "label",
-    placeholder: DEFAULT_PLACEHOLDERS[kind],
-    label: t("neetoForm.questions.common.questionFields.field.question")
-  }), shouldShowPlaceholder && /*#__PURE__*/React__default.createElement(FormikAdaptiveInput, {
-    name: "placeholder",
-    label: t("neetoForm.questions.common.questionFields.field.placeholder")
-  }), hasAdditionalData && renderAdditionalData({
-    kind: kind,
-    questionProps: questionProps
-  })), !isRequired && /*#__PURE__*/React__default.createElement(Block, {
-    dataCy: "settings-card",
-    title: t("neetoForm.common.settings")
-  }, /*#__PURE__*/React__default.createElement(RequiredSwitch, null)), shouldShowFieldCode && /*#__PURE__*/React__default.createElement(Block, {
-    dataCy: "advanced-properties-card",
-    title: t("neetoForm.common.advancedProperties")
-  }, /*#__PURE__*/React__default.createElement(FieldCode, null)))));
+  return /*#__PURE__*/jsx(Pane.Body, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "w-full space-y-4",
+      children: [/*#__PURE__*/jsx(Select, {
+        isClearable: true,
+        isSearchable: true,
+        defaultValue: buildDefaultValueForKind(questionKind),
+        innerRef: initialFocusRef,
+        isDisabled: isEdit,
+        name: "kind",
+        options: buildKindOptions(questionKinds),
+        label: t("neetoForm.questions.common.questionFields.field.questionType"),
+        onChange: handleKindChange
+      }), isRichTextQuestion(kind) ? /*#__PURE__*/jsx(Editor, {
+        isLabelDisabled: isLabelDisabled
+      }) : /*#__PURE__*/jsxs("div", {
+        className: "space-y-6",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "space-y-4",
+          children: [/*#__PURE__*/jsx(FormikAdaptiveInput, {
+            required: true,
+            disabled: isLabelDisabled,
+            name: "label",
+            placeholder: DEFAULT_PLACEHOLDERS[kind],
+            label: t("neetoForm.questions.common.questionFields.field.question")
+          }), shouldShowPlaceholder && /*#__PURE__*/jsx(FormikAdaptiveInput, {
+            name: "placeholder",
+            label: t("neetoForm.questions.common.questionFields.field.placeholder")
+          }), hasAdditionalData && renderAdditionalData({
+            kind: kind,
+            questionProps: questionProps
+          })]
+        }), !isRequired && /*#__PURE__*/jsx(Block, {
+          dataCy: "settings-card",
+          title: t("neetoForm.common.settings"),
+          children: /*#__PURE__*/jsx(RequiredSwitch, {})
+        }), shouldShowFieldCode && /*#__PURE__*/jsx(Block, {
+          dataCy: "advanced-properties-card",
+          title: t("neetoForm.common.advancedProperties"),
+          children: /*#__PURE__*/jsx(FieldCode, {})
+        })]
+      })]
+    })
+  });
 };
 
 /* eslint-disable @bigbinary/neeto/file-name-and-export-name-standards */
@@ -12783,8 +12831,8 @@ var formValidationSchema = yup.object().shape({
 });
 
 var _excluded$9 = ["question", "onClose", "questions", "handleSelect", "buildRequestArgs"];
-function ownKeys$l(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$l(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$l(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$l(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$w(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$w(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$w(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$w(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Add = function Add(_ref) {
   var question = _ref.question,
     onClose = _ref.onClose,
@@ -12813,7 +12861,7 @@ var Add = function Add(_ref) {
     isCreating = _useCreateQuestion.isLoading;
   var handleSubmit = function handleSubmit(values) {
     var displayOrder = question ? question.displayOrder + 1 : questions.length;
-    createQuestion(_objectSpread$l({
+    createQuestion(_objectSpread$w({
       language: language,
       neetoFormQuestion: mergeLeft({
         displayOrder: displayOrder
@@ -12828,29 +12876,39 @@ var Add = function Add(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Pane.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "add-question-pane-header",
-    style: "h2"
-  }, t("neetoForm.questions.common.primaryPanel.addQuestion"))), /*#__PURE__*/React__default.createElement(Form$2, {
-    formikProps: {
-      initialValues: INITIAL_VALUES,
-      validationSchema: formValidationSchema,
-      onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Form$1, _objectSpread$l(_objectSpread$l({}, props), {}, {
-    question: question,
-    questions: questions
-  })), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(ActionBlock, {
-    cancelButtonProps: {
-      onClick: onClose
-    },
-    isSubmitting: isCreating
-  })))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "add-question-pane-header",
+        style: "h2",
+        children: t("neetoForm.questions.common.primaryPanel.addQuestion")
+      })
+    }), /*#__PURE__*/jsx(Form$2, {
+      formikProps: {
+        initialValues: INITIAL_VALUES,
+        validationSchema: formValidationSchema,
+        onSubmit: handleSubmit
+      },
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Form$1, _objectSpread$w({}, _objectSpread$w(_objectSpread$w({}, props), {}, {
+          question: question,
+          questions: questions
+        }))), /*#__PURE__*/jsx(Pane.Footer, {
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              onClick: onClose
+            },
+            isSubmitting: isCreating
+          })
+        })]
+      })
+    })]
+  });
 };
 
 var _excluded$8 = ["question", "onClose"];
-function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$v(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$v(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$v(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$v(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Edit = function Edit(_ref) {
   var question = _ref.question,
     onClose = _ref.onClose,
@@ -12886,25 +12944,35 @@ var Edit = function Edit(_ref) {
       }
     });
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Pane.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
-    "data-cy": "edit-question-pane-header",
-    style: "h2"
-  }, t("neetoForm.questions.common.editQuestion"))), /*#__PURE__*/React__default.createElement(Form$2, {
-    formikProps: {
-      initialValues: question,
-      validationSchema: formValidationSchema,
-      onSubmit: handleSubmit
-    }
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Form$1, _extends$8({}, _objectSpread$k({
-    question: question
-  }, props), {
-    isEdit: true
-  })), /*#__PURE__*/React__default.createElement(Pane.Footer, null, /*#__PURE__*/React__default.createElement(ActionBlock, {
-    cancelButtonProps: {
-      onClick: onClose
-    },
-    isSubmitting: isUpdating
-  })))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(Pane.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        "data-cy": "edit-question-pane-header",
+        style: "h2",
+        children: t("neetoForm.questions.common.editQuestion")
+      })
+    }), /*#__PURE__*/jsx(Form$2, {
+      formikProps: {
+        initialValues: question,
+        validationSchema: formValidationSchema,
+        onSubmit: handleSubmit
+      },
+      children: /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(Form$1, _objectSpread$v(_objectSpread$v({}, _objectSpread$v({
+          question: question
+        }, props)), {}, {
+          isEdit: true
+        })), /*#__PURE__*/jsx(Pane.Footer, {
+          children: /*#__PURE__*/jsx(ActionBlock, {
+            cancelButtonProps: {
+              onClick: onClose
+            },
+            isSubmitting: isUpdating
+          })
+        })]
+      })
+    })]
+  });
 };
 
 var FileGroup = function FileGroup(_ref) {
@@ -12912,7 +12980,7 @@ var FileGroup = function FileGroup(_ref) {
     label = _ref.label,
     checked = _ref.checked,
     handleAllowedFileTypesChange = _ref.handleAllowedFileTypesChange;
-  return /*#__PURE__*/React__default.createElement(Checkbox, {
+  return /*#__PURE__*/jsx(Checkbox, {
     checked: checked,
     label: label,
     name: name,
@@ -12958,34 +13026,40 @@ var FileUpload$1 = function FileUpload() {
       allowedFileTypes: allowedFileTypes
     }));
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default.createElement(Checkbox$1, {
-    id: "multipleFilesAllowed",
-    label: t("neetoForm.fileUpload.enableMultipleFilesUpload"),
-    name: "multipleFilesAllowed"
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    style: "body1",
-    weight: "semibold"
-  }, t("neetoForm.fileUpload.fileTypes")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex space-x-4"
-  }, FILE_GROUPS.map(function (_ref2) {
-    var name = _ref2.name,
-      label = _ref2.label;
-    return /*#__PURE__*/React__default.createElement(FileGroup, {
-      handleAllowedFileTypesChange: handleAllowedFileTypesChange,
-      label: label,
-      name: name,
-      checked: isFileTypeEnabled(name, allowedFileTypes),
-      key: name
-    });
-  }))));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w-full",
+      children: /*#__PURE__*/jsx(Checkbox$1, {
+        id: "multipleFilesAllowed",
+        label: t("neetoForm.fileUpload.enableMultipleFilesUpload"),
+        name: "multipleFilesAllowed"
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col space-y-3",
+      children: [/*#__PURE__*/jsx(Typography, {
+        style: "body1",
+        weight: "semibold",
+        children: t("neetoForm.fileUpload.fileTypes")
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex space-x-4",
+        children: FILE_GROUPS.map(function (_ref2) {
+          var name = _ref2.name,
+            label = _ref2.label;
+          return /*#__PURE__*/createElement(FileGroup, {
+            handleAllowedFileTypesChange: handleAllowedFileTypesChange,
+            label: label,
+            name: name,
+            checked: isFileTypeEnabled(name, allowedFileTypes),
+            key: name
+          });
+        })
+      })]
+    })]
+  });
 };
 
-function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$u(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$u(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$u(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$u(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultConfig = {
   strict: true,
   matchKey: "value"
@@ -12993,7 +13067,7 @@ var defaultConfig = {
 var findOptionByValue = function findOptionByValue(value) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var configObject = _objectSpread$j(_objectSpread$j({}, defaultConfig), config);
+  var configObject = _objectSpread$u(_objectSpread$u({}, defaultConfig), config);
   var matchKey = configObject.matchKey,
     strict = configObject.strict;
   return options.find(function (option) {
@@ -13007,7 +13081,7 @@ var filterOptionsByValues = function filterOptionsByValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  var configObject = _objectSpread$j(_objectSpread$j({}, defaultConfig), config);
+  var configObject = _objectSpread$u(_objectSpread$u({}, defaultConfig), config);
   var matchKey = configObject.matchKey,
     strict = configObject.strict;
   return options.filter(function (option) {
@@ -13025,7 +13099,7 @@ var destroyFromList = function destroyFromList(items, index) {
     var nextItems = _toConsumableArray$1(items);
     nextItems.splice(index, 1);
     if (itemToRemove.id) {
-      nextItems.push(_objectSpread$j(_objectSpread$j({}, itemToRemove), {}, {
+      nextItems.push(_objectSpread$u(_objectSpread$u({}, itemToRemove), {}, {
         _destroy: true
       }));
     }
@@ -13051,6 +13125,8 @@ var formHelpers = {
   pushToList: pushToList
 };
 
+function ownKeys$t(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$t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$t(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Options = function Options(_ref) {
   var questionProps = _ref.questionProps;
   var _useTranslation = useTranslation(),
@@ -13069,88 +13145,106 @@ var Options = function Options(_ref) {
     var nextOptions = formHelpers.destroyFromList(optionsAttributes, index);
     setOptionsAttributes(nextOptions);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default.createElement(FieldArray, {
-    name: "optionsAttributes"
-  }, function (_ref3) {
-    var handlePush = _ref3.handlePush;
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Label, _extends$8({
-      className: "mb-1 block"
-    }, optionLabelProps), t("neetoForm.questions.common.questionFields.field.options")), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex w-2/3 flex-col space-y-2"
-    }, optionsAttributes === null || optionsAttributes === void 0 ? void 0 : optionsAttributes.map(function (option, index) {
-      var _option$id;
-      return !option._destroy && /*#__PURE__*/React__default.createElement("div", {
-        className: "flex items-start gap-1",
-        key: "question-option-".concat((_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : index)
-      }, /*#__PURE__*/React__default.createElement(InputWithMaxLength, {
-        required: true,
-        disabled: freezeOptions,
-        name: "optionsAttributes.".concat(index, ".label"),
-        placeholder: t("neetoForm.questions.common.questionFields.field.numberedOption", {
-          number: index + 1
-        })
-      }), !freezeOptions && /*#__PURE__*/React__default.createElement(Button$1, {
-        "data-cy": "neeto-form-engine-delete-option-button",
-        icon: Delete,
-        size: "small",
-        style: "text",
-        className: classnames({
-          invisible: index < MINIMUM_OPTIONS
-        }),
-        tooltipProps: {
-          position: "top",
-          content: t("neetoForm.common.delete")
-        },
-        onClick: function onClick() {
-          return handleRemoveOption(index);
-        }
-      }));
-    })), !freezeOptions && /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-3 w-full"
-    }, /*#__PURE__*/React__default.createElement(Button$1, {
-      icon: Plus,
-      iconPosition: "left",
-      size: "small",
-      style: "text",
-      label: t("neetoForm.questions.common.questionFields.field.addOption"),
-      onClick: handlePush({
-        label: ""
-      })
-    })));
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "w-full",
+    children: /*#__PURE__*/jsx(FieldArray, {
+      name: "optionsAttributes",
+      children: function children(_ref3) {
+        var handlePush = _ref3.handlePush;
+        return /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx(Label, _objectSpread$t(_objectSpread$t({
+            className: "mb-1 block"
+          }, optionLabelProps), {}, {
+            children: t("neetoForm.questions.common.questionFields.field.options")
+          })), /*#__PURE__*/jsx("div", {
+            className: "flex w-2/3 flex-col space-y-2",
+            children: optionsAttributes === null || optionsAttributes === void 0 ? void 0 : optionsAttributes.map(function (option, index) {
+              var _option$id;
+              return !option._destroy && /*#__PURE__*/jsxs("div", {
+                className: "flex items-start gap-1",
+                children: [/*#__PURE__*/jsx(InputWithMaxLength, {
+                  required: true,
+                  disabled: freezeOptions,
+                  name: "optionsAttributes.".concat(index, ".label"),
+                  placeholder: t("neetoForm.questions.common.questionFields.field.numberedOption", {
+                    number: index + 1
+                  })
+                }), !freezeOptions && /*#__PURE__*/jsx(Button$1, {
+                  "data-cy": "neeto-form-engine-delete-option-button",
+                  icon: Delete,
+                  size: "small",
+                  style: "text",
+                  className: classnames({
+                    invisible: index < MINIMUM_OPTIONS
+                  }),
+                  tooltipProps: {
+                    position: "top",
+                    content: t("neetoForm.common.delete")
+                  },
+                  onClick: function onClick() {
+                    return handleRemoveOption(index);
+                  }
+                })]
+              }, "question-option-".concat((_option$id = option.id) !== null && _option$id !== void 0 ? _option$id : index));
+            })
+          }), !freezeOptions && /*#__PURE__*/jsx("div", {
+            className: "mt-3 w-full",
+            children: /*#__PURE__*/jsx(Button$1, {
+              icon: Plus,
+              iconPosition: "left",
+              size: "small",
+              style: "text",
+              label: t("neetoForm.questions.common.questionFields.field.addOption"),
+              onClick: handlePush({
+                label: ""
+              })
+            })
+          })]
+        });
+      }
+    })
+  });
 };
 
 var RatingItem = function RatingItem(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex w-16 flex-col items-center gap-3"
-  }, children);
+  return /*#__PURE__*/jsx("div", {
+    className: "flex w-16 flex-col items-center gap-3",
+    children: children
+  });
 };
 var Rating$2 = function Rating() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-6"
-  }, /*#__PURE__*/React__default.createElement(RatingItem, null, /*#__PURE__*/React__default.createElement(GoodSmiley, {
-    color: "#00ba88",
-    size: 48
-  }), /*#__PURE__*/React__default.createElement(InputWithMaxLength, {
-    name: "highestRatingLabel"
-  })), /*#__PURE__*/React__default.createElement(RatingItem, null, /*#__PURE__*/React__default.createElement(OkaySmiley, {
-    color: "#f3cd82",
-    size: 48
-  }), /*#__PURE__*/React__default.createElement(InputWithMaxLength, {
-    name: "averageRatingLabel"
-  })), /*#__PURE__*/React__default.createElement(RatingItem, null, /*#__PURE__*/React__default.createElement(BadSmiley, {
-    color: "#f56a58",
-    size: 48
-  }), /*#__PURE__*/React__default.createElement(InputWithMaxLength, {
-    name: "lowestRatingLabel"
-  })))));
+  return /*#__PURE__*/jsx("div", {
+    className: "flex flex-col",
+    children: /*#__PURE__*/jsx("div", {
+      className: "w-full",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex gap-6",
+        children: [/*#__PURE__*/jsxs(RatingItem, {
+          children: [/*#__PURE__*/jsx(GoodSmiley, {
+            color: "#00ba88",
+            size: 48
+          }), /*#__PURE__*/jsx(InputWithMaxLength, {
+            name: "highestRatingLabel"
+          })]
+        }), /*#__PURE__*/jsxs(RatingItem, {
+          children: [/*#__PURE__*/jsx(OkaySmiley, {
+            color: "#f3cd82",
+            size: 48
+          }), /*#__PURE__*/jsx(InputWithMaxLength, {
+            name: "averageRatingLabel"
+          })]
+        }), /*#__PURE__*/jsxs(RatingItem, {
+          children: [/*#__PURE__*/jsx(BadSmiley, {
+            color: "#f56a58",
+            size: 48
+          }), /*#__PURE__*/jsx(InputWithMaxLength, {
+            name: "lowestRatingLabel"
+          })]
+        })]
+      })
+    })
+  });
 };
 
 var StarRating$2 = function StarRating() {
@@ -13163,42 +13257,48 @@ var StarRating$2 = function StarRating() {
     iconType = _useField2[0].value;
     _useField2[1];
     var setIconType = _useField2[2].setValue;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex space-x-4"
-  }, /*#__PURE__*/React__default.createElement(Select, {
-    className: "w-1/2",
-    label: t("neetoForm.common.start"),
-    name: "minValue",
-    options: STAR_RATING_MIN_VALUE_OPTIONS,
-    onChange: function onChange(option) {
-      return setFieldValue("minValue", option === null || option === void 0 ? void 0 : option.value);
-    }
-  }), /*#__PURE__*/React__default.createElement(Select, {
-    className: "w-1/2",
-    label: t("neetoForm.common.end"),
-    name: "maxValue",
-    options: STAR_RATING_MAX_VALUE_OPTIONS,
-    onChange: function onChange(option) {
-      return setFieldValue("maxValue", option === null || option === void 0 ? void 0 : option.value);
-    }
-  })), /*#__PURE__*/React__default.createElement(Label, null, t("neetoForm.common.shape")), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2"
-  }, Object.entries(STAR_RATING_ICONS_MAP).map(function (_ref) {
-    var _ref2 = _slicedToArray$3(_ref, 2),
-      name = _ref2[0],
-      IconType = _ref2[1];
-    var isActive = name === iconType;
-    return /*#__PURE__*/React__default.createElement("div", {
-      key: name,
-      className: classnames("flex h-10 w-10 items-center justify-center gap-2", "neeto-ui-border-gray-800 neeto-ui-rounded-full cursor-pointer border", "transition-all duration-300 ease-in-out", {
-        "neeto-ui-text-gray-800 neeto-ui-bg-gray-200": !isActive,
-        "neeto-ui-text-white neeto-ui-bg-gray-800": isActive
-      }),
-      onClick: function onClick() {
-        return setIconType(name);
-      }
-    }, /*#__PURE__*/React__default.createElement(IconType, null));
-  })));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex space-x-4",
+      children: [/*#__PURE__*/jsx(Select, {
+        className: "w-1/2",
+        label: t("neetoForm.common.start"),
+        name: "minValue",
+        options: STAR_RATING_MIN_VALUE_OPTIONS,
+        onChange: function onChange(option) {
+          return setFieldValue("minValue", option === null || option === void 0 ? void 0 : option.value);
+        }
+      }), /*#__PURE__*/jsx(Select, {
+        className: "w-1/2",
+        label: t("neetoForm.common.end"),
+        name: "maxValue",
+        options: STAR_RATING_MAX_VALUE_OPTIONS,
+        onChange: function onChange(option) {
+          return setFieldValue("maxValue", option === null || option === void 0 ? void 0 : option.value);
+        }
+      })]
+    }), /*#__PURE__*/jsx(Label, {
+      children: t("neetoForm.common.shape")
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex gap-2",
+      children: Object.entries(STAR_RATING_ICONS_MAP).map(function (_ref) {
+        var _ref2 = _slicedToArray$3(_ref, 2),
+          name = _ref2[0],
+          IconType = _ref2[1];
+        var isActive = name === iconType;
+        return /*#__PURE__*/jsx("div", {
+          className: classnames("flex h-10 w-10 items-center justify-center gap-2", "neeto-ui-border-gray-800 neeto-ui-rounded-full cursor-pointer border", "transition-all duration-300 ease-in-out", {
+            "neeto-ui-text-gray-800 neeto-ui-bg-gray-200": !isActive,
+            "neeto-ui-text-white neeto-ui-bg-gray-800": isActive
+          }),
+          onClick: function onClick() {
+            return setIconType(name);
+          },
+          children: /*#__PURE__*/jsx(IconType, {})
+        }, name);
+      })
+    })]
+  });
 };
 
 var CHECKBOX = QUESTION_TYPES.CHECKBOX,
@@ -13219,15 +13319,15 @@ var renderAdditionalData = function renderAdditionalData(_ref2) {
     case CHECKBOX:
     case RADIO:
     case DROPDOWN:
-      return /*#__PURE__*/React__default.createElement(Options, {
+      return /*#__PURE__*/jsx(Options, {
         questionProps: questionProps
       });
     case RATING:
-      return /*#__PURE__*/React__default.createElement(Rating$2, null);
+      return /*#__PURE__*/jsx(Rating$2, {});
     case STAR_RATING:
-      return /*#__PURE__*/React__default.createElement(StarRating$2, null);
+      return /*#__PURE__*/jsx(StarRating$2, {});
     case FILE_UPLOAD:
-      return /*#__PURE__*/React__default.createElement(FileUpload$1, null);
+      return /*#__PURE__*/jsx(FileUpload$1, {});
     default:
       return null;
   }
@@ -13260,8 +13360,8 @@ var buildDefaultValueForKind = function buildDefaultValueForKind(questionKind) {
 };
 
 var _excluded$7 = ["isOpen", "onClose", "action", "question", "availableQuestionKinds"];
-function ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$s(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$s(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$s(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$s(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ManageQuestionPane = function ManageQuestionPane(_ref) {
   var isOpen = _ref.isOpen,
     onClose = _ref.onClose,
@@ -13271,16 +13371,17 @@ var ManageQuestionPane = function ManageQuestionPane(_ref) {
     props = _objectWithoutProperties$1(_ref, _excluded$7);
   var initialFocusRef = useRef(null);
   var Component = resolveActionComponent(action);
-  return /*#__PURE__*/React__default.createElement(Pane, {
+  return /*#__PURE__*/jsx(Pane, {
     initialFocusRef: initialFocusRef,
     isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(Component, _objectSpread$i({
-    availableQuestionKinds: availableQuestionKinds,
-    initialFocusRef: initialFocusRef,
     onClose: onClose,
-    question: question
-  }, props)));
+    children: /*#__PURE__*/jsx(Component, _objectSpread$s({}, _objectSpread$s({
+      availableQuestionKinds: availableQuestionKinds,
+      initialFocusRef: initialFocusRef,
+      onClose: onClose,
+      question: question
+    }, props)))
+  });
 };
 
 var AddQuestion = withT(function (_ref) {
@@ -13288,23 +13389,26 @@ var AddQuestion = withT(function (_ref) {
     onAdd = _ref.onAdd,
     disabledAddButtonTooltipProps = _ref.disabledAddButtonTooltipProps,
     isDisabled = _ref.isDisabled;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  return /*#__PURE__*/jsx(Tooltip, {
     disabled: !isDisabled,
     position: "top",
-    content: (disabledAddButtonTooltipProps === null || disabledAddButtonTooltipProps === void 0 ? void 0 : disabledAddButtonTooltipProps.content) || t("neetoForm.questions.common.primaryPanel.noQuestionLeft")
-  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Button$1, {
-    disabled: isDisabled,
-    icon: Plus,
-    iconPosition: "left",
-    label: t("neetoForm.questions.common.primaryPanel.addQuestion"),
-    style: "link",
-    onClick: onAdd
-  })));
+    content: (disabledAddButtonTooltipProps === null || disabledAddButtonTooltipProps === void 0 ? void 0 : disabledAddButtonTooltipProps.content) || t("neetoForm.questions.common.primaryPanel.noQuestionLeft"),
+    children: /*#__PURE__*/jsx("span", {
+      children: /*#__PURE__*/jsx(Button$1, {
+        disabled: isDisabled,
+        icon: Plus,
+        iconPosition: "left",
+        label: t("neetoForm.questions.common.primaryPanel.addQuestion"),
+        style: "link",
+        onClick: onAdd
+      })
+    })
+  });
 });
 
 var _excluded$6 = ["questionKinds", "onValueChange", "formId", "isDeletable", "isRequiredField", "submitButtonProps", "cancelButtonProps", "isKindAlreadyActive", "getActiveKindDetails", "isDisabledFieldLabel", "disabledAddButtonTooltipProps", "enableFieldCode", "isFormEnabled", "savedTitle", "formTitle", "formDescription", "selectedLanguage", "availableLanguages", "onLanguageChange", "additionalActionOptions", "isReordering", "additionalQuestionKindPattern", "showActionBlock", "buildRequestArgs"];
-function ownKeys$h(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$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$r(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$r(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$r(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$r(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Form = function Form(_ref) {
   var questionKinds = _ref.questionKinds,
     onValueChange = _ref.onValueChange,
@@ -13398,7 +13502,7 @@ var Form = function Form(_ref) {
       questions: questions
     });
     var displayOrder = selectedQuestion.displayOrder + 1;
-    var payload = _objectSpread$h({
+    var payload = _objectSpread$r({
       language: selectedLanguage,
       neetoFormQuestion: mergeLeft({
         displayOrder: displayOrder
@@ -13446,92 +13550,102 @@ var Form = function Form(_ref) {
       richTextFieldsToReset: pluck("fieldCode", richTextQuestions)
     });
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(DeleteAlert, {
-    handleSelect: handleSelect,
-    selectedQuestion: selectedQuestion,
-    isOpen: isDeleteAlertOpen,
-    languagesCount: availableLanguages.length,
-    onClose: function onClose() {
-      return setIsDeleteAlertOpen(false);
-    }
-  }), /*#__PURE__*/React__default.createElement(Form$3, _extends$8({
-    className: "flex h-full flex-col"
-  }, formDomProps, {
-    noValidate: true
-  }), formTitle && /*#__PURE__*/React__default.createElement(Overview, {
-    additionalActionOptions: additionalActionOptions,
-    availableLanguages: availableLanguages,
-    selectedLanguage: selectedLanguage,
-    description: formDescription,
-    title: formTitle,
-    onLanguageChange: handleLanguageChange
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full flex-grow space-y-6 overflow-y-auto"
-  }, hasActiveQuestions ? /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-6",
-    ref: containerRef
-  }, /*#__PURE__*/React__default.createElement(DragDropContext, {
-    onDragEnd: function onDragEnd(_ref3) {
-      var source = _ref3.source,
-        destination = _ref3.destination;
-      return handleFieldDragEnd({
-        source: source,
-        destination: destination,
-        items: questions,
-        setValue: setFieldValue
-      });
-    }
-  }, /*#__PURE__*/React__default.createElement(Questions, {
-    getActiveKindDetails: getActiveKindDetails,
-    isDeletable: isDeletable,
-    questions: questions,
-    selectedQuestion: selectedQuestion,
-    allQuestionKinds: questionKinds,
-    onClone: handleClone,
-    onDelete: handleDelete,
-    onEdit: handleEdit,
-    onSelect: handleSelect
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-8 w-full"
-  }, /*#__PURE__*/React__default.createElement(AddQuestion, {
-    disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
-    isDisabled: isEmpty(availableQuestionKinds),
-    onAdd: handleAdd
-  }))) : /*#__PURE__*/React__default.createElement(AddFirstQuestion, null, /*#__PURE__*/React__default.createElement(AddQuestion, {
-    disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
-    isDisabled: isEmpty(availableQuestionKinds),
-    onAdd: handleAdd
-  }))), (showActionBlock || dirty) && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-border-gray-300 flex flex-shrink-0 justify-end border-t p-6"
-  }, /*#__PURE__*/React__default.createElement(ActionBlock, {
-    submitButtonProps: submitButtonProps,
-    isSubmitting: isReordering,
-    cancelButtonProps: _objectSpread$h({
-      label: t("neetoForm.common.reset"),
-      onClick: resetFormData
-    }, cancelButtonProps)
-  })), /*#__PURE__*/React__default.createElement(ManageQuestionPane, {
-    additionalQuestionKindPattern: additionalQuestionKindPattern,
-    availableQuestionKinds: availableQuestionKinds,
-    buildRequestArgs: buildRequestArgs,
-    enableFieldCode: enableFieldCode,
-    getActiveKindDetails: getActiveKindDetails,
-    handleSelect: handleSelect,
-    isDisabledFieldLabel: isDisabledFieldLabel,
-    isRequiredField: isRequiredField,
-    questions: questions,
-    action: selectedAction,
-    allQuestionKinds: questionKinds,
-    isOpen: isManageQuestionPaneOpen,
-    question: selectedQuestion,
-    onClose: function onClose() {
-      return setIsManageQuestionPaneOpen(false);
-    }
-  })));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(DeleteAlert, {
+      handleSelect: handleSelect,
+      selectedQuestion: selectedQuestion,
+      isOpen: isDeleteAlertOpen,
+      languagesCount: availableLanguages.length,
+      onClose: function onClose() {
+        return setIsDeleteAlertOpen(false);
+      }
+    }), /*#__PURE__*/jsxs(Form$3, _objectSpread$r(_objectSpread$r({
+      className: "neeto-form-nano-form-wrapper flex h-full flex-col"
+    }, formDomProps), {}, {
+      noValidate: true,
+      children: [formTitle && /*#__PURE__*/jsx(Overview, {
+        additionalActionOptions: additionalActionOptions,
+        availableLanguages: availableLanguages,
+        selectedLanguage: selectedLanguage,
+        description: formDescription,
+        title: formTitle,
+        onLanguageChange: handleLanguageChange
+      }), /*#__PURE__*/jsx("div", {
+        className: "neeto-form-nano-form-wrapper__body min-h-0 w-full flex-grow space-y-6 overflow-y-auto px-6 pb-6",
+        children: hasActiveQuestions ? /*#__PURE__*/jsxs("div", {
+          className: "space-y-6",
+          ref: containerRef,
+          children: [/*#__PURE__*/jsx(DragDropContext, {
+            onDragEnd: function onDragEnd(_ref3) {
+              var source = _ref3.source,
+                destination = _ref3.destination;
+              return handleFieldDragEnd({
+                source: source,
+                destination: destination,
+                items: questions,
+                setValue: setFieldValue
+              });
+            },
+            children: /*#__PURE__*/jsx(Questions, {
+              getActiveKindDetails: getActiveKindDetails,
+              isDeletable: isDeletable,
+              questions: questions,
+              selectedQuestion: selectedQuestion,
+              allQuestionKinds: questionKinds,
+              onClone: handleClone,
+              onDelete: handleDelete,
+              onEdit: handleEdit,
+              onSelect: handleSelect
+            })
+          }), /*#__PURE__*/jsx("div", {
+            className: "mb-8 w-full",
+            children: /*#__PURE__*/jsx(AddQuestion, {
+              disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
+              isDisabled: isEmpty(availableQuestionKinds),
+              onAdd: handleAdd
+            })
+          })]
+        }) : /*#__PURE__*/jsx(AddFirstQuestion, {
+          children: /*#__PURE__*/jsx(AddQuestion, {
+            disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
+            isDisabled: isEmpty(availableQuestionKinds),
+            onAdd: handleAdd
+          })
+        })
+      }), (showActionBlock || dirty) && /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-border-gray-300 neeto-form-nano-form-wrapper__footer flex flex-shrink-0 justify-end border-t px-6 py-4",
+        children: /*#__PURE__*/jsx(ActionBlock, {
+          submitButtonProps: submitButtonProps,
+          isSubmitting: isReordering,
+          cancelButtonProps: _objectSpread$r({
+            label: t("neetoForm.common.reset"),
+            onClick: resetFormData
+          }, cancelButtonProps)
+        })
+      }), /*#__PURE__*/jsx(ManageQuestionPane, {
+        additionalQuestionKindPattern: additionalQuestionKindPattern,
+        availableQuestionKinds: availableQuestionKinds,
+        buildRequestArgs: buildRequestArgs,
+        enableFieldCode: enableFieldCode,
+        getActiveKindDetails: getActiveKindDetails,
+        handleSelect: handleSelect,
+        isDisabledFieldLabel: isDisabledFieldLabel,
+        isRequiredField: isRequiredField,
+        questions: questions,
+        action: selectedAction,
+        allQuestionKinds: questionKinds,
+        isOpen: isManageQuestionPaneOpen,
+        question: selectedQuestion,
+        onClose: function onClose() {
+          return setIsManageQuestionPaneOpen(false);
+        }
+      })]
+    }))]
+  });
 };
 
-function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$q(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$q(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$q(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$q(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BuildForm = function BuildForm(_ref) {
   var id = _ref.id,
     onUpdate = _ref.onUpdate,
@@ -13574,7 +13688,8 @@ var BuildForm = function BuildForm(_ref) {
     onLanguageChange = _ref$onLanguageChange === void 0 ? noop$4 : _ref$onLanguageChange,
     _ref$additionalAction = _ref.additionalActionOptions,
     additionalActionOptions = _ref$additionalAction === void 0 ? [] : _ref$additionalAction,
-    additionalQuestionKindPattern = _ref.additionalQuestionKindPattern;
+    additionalQuestionKindPattern = _ref.additionalQuestionKindPattern,
+    className = _ref.className;
   var queryClient = useQueryClient();
   var _useReorderQuestions = useReorderQuestions(id, {
       onSuccess: showThumbsUpToastr
@@ -13608,9 +13723,10 @@ var BuildForm = function BuildForm(_ref) {
     questions = _useFetchQuestions$da2.questions,
     isLoading = _useFetchQuestions.isLoading;
   if (isLoading || showLoader && isQuestionsLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex h-full w-full items-center justify-center py-6"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center py-6",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
   var handleSubmit = function handleSubmit(_ref2, _ref3) {
     var questions = _ref2.questions;
@@ -13646,57 +13762,62 @@ var BuildForm = function BuildForm(_ref) {
   var defaultQuestionKinds = allowAdditionalGuests ? QUESTION_KINDS : removeBy({
     type: QUESTION_KIND.ADDITIONAL_GUESTS.value
   }, QUESTION_KINDS);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "relative h-full"
-  }, /*#__PURE__*/React__default.createElement(Formik, {
-    enableReinitialize: true,
-    initialValues: {
-      questions: questions
-    },
-    onSubmit: handleSubmit
-  }, function (_ref5) {
-    var errors = _ref5.errors,
-      setFieldError = _ref5.setFieldError;
-    return /*#__PURE__*/React__default.createElement(Form, _extends$8({}, _objectSpread$g(_objectSpread$g({}, formDomProps), {}, {
-      additionalActionOptions: additionalActionOptions,
-      additionalQuestionKindPattern: additionalQuestionKindPattern,
-      availableLanguages: availableLanguages,
-      buildRequestArgs: buildRequestArgs,
-      cancelButtonProps: cancelButtonProps,
-      disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
-      enableFieldCode: enableFieldCode,
-      formDescription: formDescription,
-      formTitle: formTitle,
-      getActiveKindDetails: getActiveKindDetails,
-      isDeletable: isDeletable,
-      isDisabledFieldLabel: isDisabledFieldLabel,
-      isFormEnabled: isFormEnabled,
-      isKindAlreadyActive: isKindAlreadyActive,
-      isReordering: isReordering,
-      isRequiredField: isRequiredField,
-      kindUniqueOn: kindUniqueOn,
-      onLanguageChange: onLanguageChange,
-      onValueChange: onValueChange,
-      savedTitle: savedTitle,
-      selectedLanguage: selectedLanguage,
-      showActionBlock: showActionBlock,
-      submitButtonProps: submitButtonProps
-    }), {
-      formId: id,
-      questionKinds: isPresent$1(questionKinds) ? questionKinds : defaultQuestionKinds,
-      onChange: function onChange(event) {
-        if (isEmpty(errors)) return;
-        setFieldError(event.target.name);
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames("neeto-form-nano-form-outer-wrapper relative", className),
+    children: [/*#__PURE__*/jsx(Formik, {
+      enableReinitialize: true,
+      initialValues: {
+        questions: questions
+      },
+      onSubmit: handleSubmit,
+      children: function children(_ref5) {
+        var errors = _ref5.errors,
+          setFieldError = _ref5.setFieldError;
+        return /*#__PURE__*/jsx(Form, _objectSpread$q(_objectSpread$q({}, _objectSpread$q(_objectSpread$q({}, formDomProps), {}, {
+          additionalActionOptions: additionalActionOptions,
+          additionalQuestionKindPattern: additionalQuestionKindPattern,
+          availableLanguages: availableLanguages,
+          buildRequestArgs: buildRequestArgs,
+          cancelButtonProps: cancelButtonProps,
+          disabledAddButtonTooltipProps: disabledAddButtonTooltipProps,
+          enableFieldCode: enableFieldCode,
+          formDescription: formDescription,
+          formTitle: formTitle,
+          getActiveKindDetails: getActiveKindDetails,
+          isDeletable: isDeletable,
+          isDisabledFieldLabel: isDisabledFieldLabel,
+          isFormEnabled: isFormEnabled,
+          isKindAlreadyActive: isKindAlreadyActive,
+          isReordering: isReordering,
+          isRequiredField: isRequiredField,
+          kindUniqueOn: kindUniqueOn,
+          onLanguageChange: onLanguageChange,
+          onValueChange: onValueChange,
+          savedTitle: savedTitle,
+          selectedLanguage: selectedLanguage,
+          showActionBlock: showActionBlock,
+          submitButtonProps: submitButtonProps
+        })), {}, {
+          formId: id,
+          questionKinds: isPresent$1(questionKinds) ? questionKinds : defaultQuestionKinds,
+          onChange: function onChange(event) {
+            if (isEmpty(errors)) return;
+            setFieldError(event.target.name);
+          }
+        }));
       }
-    }));
-  }), isQuestionsLoading && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-100 absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center opacity-75"
-  }, /*#__PURE__*/React__default.createElement(PageLoader, null)));
+    }), isQuestionsLoading && /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-bg-white absolute inset-0 flex items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    })]
+  });
 };
 
 var NeetoFormProvider = function NeetoFormProvider(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+  return /*#__PURE__*/jsx(Fragment, {
+    children: children
+  });
 };
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
@@ -14082,25 +14203,29 @@ var _regeneratorRuntime = /*@__PURE__*/getDefaultExportFromCjs(regenerator);
 var Spinner = function Spinner(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? 24 : _ref$size;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-spinner"
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    fill: "none",
-    height: size,
-    viewBox: "0 0 25 24",
-    width: size,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("path", {
-    d: "M12.5 5.00098V8.75M17.4401 7.04867L14.9888 9.5M19.5008 11.9994H15.5M17.4401 16.9372L14.9888 14.4859M12.5023 18.9979V15M7.5516 16.9372L10.4888 14M5.50391 11.9994H9.5M7.5516 7.04867L10.0029 9.5",
-    stroke: "#87929D",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: "1.5"
-  })));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-spinner",
+    children: /*#__PURE__*/jsx("svg", {
+      fill: "none",
+      height: size,
+      viewBox: "0 0 25 24",
+      width: size,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: /*#__PURE__*/jsx("path", {
+        d: "M12.5 5.00098V8.75M17.4401 7.04867L14.9888 9.5M19.5008 11.9994H15.5M17.4401 16.9372L14.9888 14.4859M12.5023 18.9979V15M7.5516 16.9372L10.4888 14M5.50391 11.9994H9.5M7.5516 7.04867L10.0029 9.5",
+        stroke: "#87929D",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: "1.5"
+      })
+    })
+  });
 };
 var Spinner$1 = /*#__PURE__*/React__default.memo(Spinner);
 
 var _excluded$5 = ["label", "loading", "success", "className"];
+function ownKeys$p(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$p(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$p(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Button = function Button(_ref) {
   var label = _ref.label,
     _ref$loading = _ref.loading,
@@ -14110,19 +14235,23 @@ var Button = function Button(_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$5);
-  return /*#__PURE__*/React__default.createElement("button", _extends$8({
+  return /*#__PURE__*/jsxs("button", _objectSpread$p(_objectSpread$p({
     className: classnames("neeto-form-engine-button", className)
-  }, otherProps), loading && /*#__PURE__*/React__default.createElement(ButtonLoader, null), success && /*#__PURE__*/React__default.createElement(Success$2, null), label);
+  }, otherProps), {}, {
+    children: [loading && /*#__PURE__*/jsx(ButtonLoader, {}), success && /*#__PURE__*/jsx(Success$2, {}), label]
+  }));
 };
 var ButtonLoader = function ButtonLoader() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-button__loader"
-  }, /*#__PURE__*/React__default.createElement(Spinner$1, null));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-button__loader",
+    children: /*#__PURE__*/jsx(Spinner$1, {})
+  });
 };
 var Success$2 = function Success() {
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-button__success"
-  }, /*#__PURE__*/React__default.createElement(Check, null));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-button__success",
+    children: /*#__PURE__*/jsx(Check, {})
+  });
 };
 
 var CALLOUT_STYLES = {
@@ -14150,29 +14279,36 @@ var Callout = function Callout(_ref) {
     primaryButton = callout.primaryButton,
     secondaryButton = callout.secondaryButton;
   if (!isVisible) return null;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     className: classnames("neeto-form-engine-callout", _defineProperty$6({
       "neeto-form-engine-callout--error": style === CALLOUT_STYLES.ERROR,
       "neeto-form-engine-callout--info": style === CALLOUT_STYLES.INFO,
       "neeto-form-engine-callout--static": position === CALLOUT_POSITIONS.STATIC,
       "neeto-form-engine-callout--absolute": position === CALLOUT_POSITIONS.ABSOLUTE
-    }, className, className))
-  }, isPresent$1(onClose) && /*#__PURE__*/React__default.createElement("button", {
-    className: "neeto-form-engine-callout__close",
-    onClick: onClose
-  }, /*#__PURE__*/React__default.createElement(Close, {
-    size: 16
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-callout__content"
-  }, not(isBlank(title)) && /*#__PURE__*/React__default.createElement("h5", null, title), /*#__PURE__*/React__default.createElement("p", null, message)), primaryButton && /*#__PURE__*/React__default.createElement(Button, {
-    label: primaryButton.label,
-    size: "small",
-    onClick: primaryButton.onClick
-  }), secondaryButton && /*#__PURE__*/React__default.createElement(Button, {
-    label: secondaryButton.label,
-    size: "small",
-    onClick: secondaryButton.onClick
-  }), children);
+    }, className, className)),
+    children: [isPresent$1(onClose) && /*#__PURE__*/jsx("button", {
+      className: "neeto-form-engine-callout__close",
+      onClick: onClose,
+      children: /*#__PURE__*/jsx(Close, {
+        size: 16
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-form-engine-callout__content",
+      children: [not(isBlank(title)) && /*#__PURE__*/jsx("h5", {
+        children: title
+      }), /*#__PURE__*/jsx("p", {
+        children: message
+      })]
+    }), primaryButton && /*#__PURE__*/jsx(Button, {
+      label: primaryButton.label,
+      size: "small",
+      onClick: primaryButton.onClick
+    }), secondaryButton && /*#__PURE__*/jsx(Button, {
+      label: secondaryButton.label,
+      size: "small",
+      onClick: secondaryButton.onClick
+    }), children]
+  });
 };
 
 var clearLocalStorageValues = function clearLocalStorageValues(key) {
@@ -15870,9 +16006,9 @@ function _unsupportedIterableToArray$6(o, minLen) { if (!o) return; if (typeof o
 
 function _arrayLikeToArray$6(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty$4(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$4(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var DEFAULT_OPTIONS = {
@@ -15899,7 +16035,7 @@ var DEFAULT_OPTIONS = {
 function formatNumber(input, format, options, metadata) {
   // Apply default options.
   if (options) {
-    options = _objectSpread$f(_objectSpread$f({}, DEFAULT_OPTIONS), options);
+    options = _objectSpread$o(_objectSpread$o({}, DEFAULT_OPTIONS), options);
   } else {
     options = DEFAULT_OPTIONS;
   }
@@ -16044,9 +16180,9 @@ function formatIDD(nationalNumber, carrierCode, countryCallingCode, fromCountry,
   }
 }
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty$3(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$3(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -16158,7 +16294,7 @@ var PhoneNumber = /*#__PURE__*/function () {
   }, {
     key: "format",
     value: function format(_format, options) {
-      return formatNumber(this, _format, options ? _objectSpread$e(_objectSpread$e({}, options), {}, {
+      return formatNumber(this, _format, options ? _objectSpread$n(_objectSpread$n({}, options), {}, {
         v2: true
       }) : {
         v2: true
@@ -17201,20 +17337,20 @@ function parsePhoneNumber(formattedPhoneNumber, defaultCountry, defaultCallingCo
   };
 }
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty$2(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$2(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function parsePhoneNumberWithError$2(text, options, metadata) {
-  return parse$1(text, _objectSpread$d(_objectSpread$d({}, options), {}, {
+  return parse$1(text, _objectSpread$m(_objectSpread$m({}, options), {}, {
     v2: true
   }), metadata);
 }
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -17262,7 +17398,7 @@ function normalizeArguments(args) {
     }
 
     if (arg_2) {
-      options = _objectSpread$c({
+      options = _objectSpread$l({
         defaultCountry: arg_2
       }, options);
     }
@@ -17323,8 +17459,8 @@ var getInvalidTypeError = function getInvalidTypeError(label, type) {
 
 var _excluded$4 = ["kind", "label", "isRequired", "customValidator"];
 var _fieldKindValidatorMa;
-function ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$k(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$k(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$k(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$k(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 yup.addMethod(yup.array, "unique", function () {
   var field, message;
   if (arguments.length > 1) {
@@ -17473,7 +17609,7 @@ var validateFieldValue = function validateFieldValue(_ref14) {
   return function (value) {
     if (!(kind in fieldKindValidatorMap)) return;
     var validator = fieldKindValidatorMap[kind];
-    var schema = customValidator || validator(_objectSpread$b({
+    var schema = customValidator || validator(_objectSpread$k({
       kind: kind,
       label: label,
       isRequired: isRequired
@@ -17510,7 +17646,7 @@ var validateFieldValue = function validateFieldValue(_ref14) {
 };
 
 var MultipleEmailInput = function MultipleEmailInput(_ref) {
-  var _React$createElement;
+  var _jsx2;
   var question = _ref.question,
     customValidator = _ref.customValidator;
   var name = question.id,
@@ -17539,31 +17675,33 @@ var MultipleEmailInput = function MultipleEmailInput(_ref) {
     _useState2 = _slicedToArray$3(_useState, 2),
     isInputVisible = _useState2[0],
     setIsInputVisible = _useState2[1];
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-w-full"
-  }, isInputVisible ? /*#__PURE__*/React__default.createElement(NeetoUIMultiEmailInput, {
-    isRequired: isRequired,
-    label: label,
-    error: meta.touched ? meta.error : "",
-    helpText: t("neetoForm.common.addGuestsHelper"),
-    name: field.name,
-    placeholder: fieldWithFallback(question, "placeholder"),
-    value: field.value,
-    onBlur: function onBlur() {
-      return setTouched(true);
-    },
-    onChange: setValue
-  }) : /*#__PURE__*/React__default.createElement(Button$1, (_React$createElement = {
-    label: label
-  }, _defineProperty$6(_React$createElement, "label", t("neetoForm.common.addGuests")), _defineProperty$6(_React$createElement, "style", "secondary"), _defineProperty$6(_React$createElement, "onClick", function onClick() {
-    return setIsInputVisible(true);
-  }), _React$createElement))));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-input__wrapper",
+    children: /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-w-full",
+      children: isInputVisible ? /*#__PURE__*/jsx(NeetoUIMultiEmailInput, {
+        isRequired: isRequired,
+        label: label,
+        error: meta.touched ? meta.error : "",
+        helpText: t("neetoForm.common.addGuestsHelper"),
+        name: field.name,
+        placeholder: fieldWithFallback(question, "placeholder"),
+        value: field.value,
+        onBlur: function onBlur() {
+          return setTouched(true);
+        },
+        onChange: setValue
+      }) : /*#__PURE__*/jsx(Button$1, (_jsx2 = {
+        label: label
+      }, _defineProperty$6(_jsx2, "label", t("neetoForm.common.addGuests")), _defineProperty$6(_jsx2, "style", "secondary"), _defineProperty$6(_jsx2, "onClick", function onClick() {
+        return setIsInputVisible(true);
+      }), _jsx2))
+    })
+  });
 };
 
-function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$j(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$j(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$j(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$j(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ConditionField = function ConditionField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -17572,30 +17710,31 @@ var ConditionField = function ConditionField(_ref) {
     isRequired = question.isRequired,
     nodeId = question.nodeId;
   var label = fieldWithFallback(question, "label");
-  return /*#__PURE__*/React__default.createElement(Field, {
+  return /*#__PURE__*/jsx(Field, {
     name: name || nodeId,
     validate: validateFieldValue({
       kind: kind,
       label: label,
       isRequired: isRequired,
       customValidator: customValidator
-    })
-  }, function (_ref2) {
-    var meta = _ref2.meta,
-      field = _ref2.field;
-    return /*#__PURE__*/React__default.createElement(Checkbox, _extends$8({}, _objectSpread$a(_objectSpread$a({}, field), {}, {
-      label: label,
-      name: name
-    }), {
-      checked: field.value,
-      error: meta.touched ? meta.error : "",
-      required: isRequired
-    }));
+    }),
+    children: function children(_ref2) {
+      var meta = _ref2.meta,
+        field = _ref2.field;
+      return /*#__PURE__*/jsx(Checkbox, _objectSpread$j(_objectSpread$j({}, _objectSpread$j(_objectSpread$j({}, field), {}, {
+        label: label,
+        name: name
+      })), {}, {
+        checked: field.value,
+        error: meta.touched ? meta.error : "",
+        required: isRequired
+      }));
+    }
   });
 };
 
-function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$i(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$i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$i(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toEmailValues = function toEmailValues() {
   var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return values.map(function (value) {
@@ -17688,7 +17827,7 @@ var generateInitValues = function generateInitValues(_ref7) {
   var valuesMap = {};
   if (initialValues) {
     valuesMap = initialValues.reduce(function (acc, answer) {
-      return _objectSpread$9(_objectSpread$9({}, acc), {}, _defineProperty$6({}, answer.questionId, {
+      return _objectSpread$i(_objectSpread$i({}, acc), {}, _defineProperty$6({}, answer.questionId, {
         value: answer.value,
         optionIds: answer.optionIds
       }));
@@ -17920,8 +18059,8 @@ var getSelectedRating = function getSelectedRating(value) {
 };
 
 var _excluded$3 = ["value"];
-function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$h(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$h(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$h(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$h(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 dayjs.extend(weekOfYear);
 dayjs.extend(weekday);
 dayjs.extend(localeData);
@@ -17936,47 +18075,52 @@ var DateField = function DateField(_ref) {
   var label = fieldWithFallback(question, "label");
   var _QUESTION_KIND$kind$t = QUESTION_KIND[kind.toUpperCase()].type,
     type = _QUESTION_KIND$kind$t === void 0 ? "date" : _QUESTION_KIND$kind$t;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__label-wrapper"
-  }, label && /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-label"
-  }, getLabel(label, isRequired))), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-date-picker"
-  }, /*#__PURE__*/React__default.createElement(Field, {
-    name: name || nodeId,
-    validate: validateFieldValue({
-      kind: kind,
-      label: label,
-      isRequired: isRequired,
-      customValidator: customValidator
-    })
-  }, function (_ref2) {
-    var meta = _ref2.meta,
-      _ref2$field = _ref2.field,
-      value = _ref2$field.value,
-      field = _objectWithoutProperties$1(_ref2$field, _excluded$3),
-      form = _ref2.form;
-    return /*#__PURE__*/React__default.createElement(DatePicker, _extends$8({}, _objectSpread$8(_objectSpread$8({}, field), {}, {
-      type: type
-    }), {
-      dateFormat: "MMM D, YYYY",
-      error: meta.touched ? meta.error : "",
-      placeholder: fieldWithFallback(question, "placeholder"),
-      popupClassName: "neeto-form-engine-date-picker-popup",
-      required: isRequired,
-      size: "small",
-      value: getValidDate(value),
-      onChange: function onChange(date) {
-        form.setFieldValue(name, date ? date.toISOString() : "");
-      }
-    }));
-  })));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-input__wrapper",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-input__label-wrapper",
+      children: label && /*#__PURE__*/jsx("label", {
+        className: "neeto-form-engine-label",
+        children: getLabel(label, isRequired)
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-date-picker",
+      children: /*#__PURE__*/jsx(Field, {
+        name: name || nodeId,
+        validate: validateFieldValue({
+          kind: kind,
+          label: label,
+          isRequired: isRequired,
+          customValidator: customValidator
+        }),
+        children: function children(_ref2) {
+          var meta = _ref2.meta,
+            _ref2$field = _ref2.field,
+            value = _ref2$field.value,
+            field = _objectWithoutProperties$1(_ref2$field, _excluded$3),
+            form = _ref2.form;
+          return /*#__PURE__*/jsx(DatePicker, _objectSpread$h(_objectSpread$h({}, _objectSpread$h(_objectSpread$h({}, field), {}, {
+            type: type
+          })), {}, {
+            dateFormat: "MMM D, YYYY",
+            error: meta.touched ? meta.error : "",
+            placeholder: fieldWithFallback(question, "placeholder"),
+            popupClassName: "neeto-form-engine-date-picker-popup",
+            required: isRequired,
+            size: "small",
+            value: getValidDate(value),
+            onChange: function onChange(date) {
+              form.setFieldValue(name, date ? date.toISOString() : "");
+            }
+          }));
+        }
+      })
+    })]
+  });
 };
 
-function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$g(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$g(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$g(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$g(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmailField = function EmailField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator,
@@ -18005,12 +18149,12 @@ var EmailField = function EmailField(_ref) {
     setValue = _useField2$2.setValue,
     setTouched = _useField2$2.setTouched;
   var handleFieldChange = withEventTargetValue(setValue);
-  return /*#__PURE__*/React__default.createElement(Input$1, _extends$8({}, _objectSpread$7(_objectSpread$7({
+  return /*#__PURE__*/jsx(Input$1, _objectSpread$g(_objectSpread$g({}, _objectSpread$g(_objectSpread$g({
     type: type
   }, field), {}, {
     autoComplete: autoComplete,
     label: label
-  }), {
+  })), {}, {
     error: touched ? error : "",
     name: kind,
     placeholder: fieldWithFallback(question, "placeholder"),
@@ -19512,9 +19656,9 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$6(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$f(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -19550,7 +19694,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [open]); // TODO: Figure out why react-styleguidist cannot create docs if we don't return a jsx element
 
-  return /*#__PURE__*/React__default.createElement(Fragment, null, children(_objectSpread$6(_objectSpread$6({}, props), {}, {
+  return /*#__PURE__*/React__default.createElement(Fragment$1, null, children(_objectSpread$f(_objectSpread$f({}, props), {}, {
     open: open
   })));
 });
@@ -19884,7 +20028,7 @@ var initialState = {
 function useDropzone() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-  var _defaultProps$options = _objectSpread$6(_objectSpread$6({}, defaultProps), options),
+  var _defaultProps$options = _objectSpread$f(_objectSpread$f({}, defaultProps), options),
       accept = _defaultProps$options.accept,
       disabled = _defaultProps$options.disabled,
       getFilesFromEvent = _defaultProps$options.getFilesFromEvent,
@@ -20201,7 +20345,7 @@ function useDropzone() {
           onDrop = _ref2.onDrop,
           rest = _objectWithoutProperties(_ref2, ["refKey", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"]);
 
-      return _objectSpread$6(_objectSpread$6(_defineProperty({
+      return _objectSpread$f(_objectSpread$f(_defineProperty({
         onKeyDown: composeKeyboardHandler(composeEventHandlers(onKeyDown, onKeyDownCb)),
         onFocus: composeKeyboardHandler(composeEventHandlers(onFocus, onFocusCb)),
         onBlur: composeKeyboardHandler(composeEventHandlers(onBlur, onBlurCb)),
@@ -20240,7 +20384,7 @@ function useDropzone() {
         tabIndex: -1
       }, refKey, inputRef);
 
-      return _objectSpread$6(_objectSpread$6({}, inputProps), rest);
+      return _objectSpread$f(_objectSpread$f({}, inputProps), rest);
     };
   }, [inputRef, accept, multiple, onDropCb, disabled]);
   var fileCount = draggedFiles.length;
@@ -20253,7 +20397,7 @@ function useDropzone() {
     maxFiles: maxFiles
   });
   var isDragReject = fileCount > 0 && !isDragAccept;
-  return _objectSpread$6(_objectSpread$6({}, state), {}, {
+  return _objectSpread$f(_objectSpread$f({}, state), {}, {
     isDragAccept: isDragAccept,
     isDragReject: isDragReject,
     isFocused: isFocused && !disabled,
@@ -20269,22 +20413,22 @@ function reducer(state, action) {
   /* istanbul ignore next */
   switch (action.type) {
     case 'focus':
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         isFocused: true
       });
 
     case 'blur':
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         isFocused: false
       });
 
     case 'openDialog':
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         isFileDialogActive: true
       });
 
     case 'closeDialog':
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         isFileDialogActive: false
       });
 
@@ -20292,19 +20436,19 @@ function reducer(state, action) {
       /* eslint no-case-declarations: 0 */
       var isDragActive = action.isDragActive,
           draggedFiles = action.draggedFiles;
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         draggedFiles: draggedFiles,
         isDragActive: isDragActive
       });
 
     case 'setFiles':
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         acceptedFiles: action.acceptedFiles,
         fileRejections: action.fileRejections
       });
 
     case 'reset':
-      return _objectSpread$6(_objectSpread$6({}, state), {}, {
+      return _objectSpread$f(_objectSpread$f({}, state), {}, {
         isFileDialogActive: false,
         isDragActive: false,
         draggedFiles: [],
@@ -20317,8 +20461,8 @@ function reducer(state, action) {
   }
 }
 
-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$6(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 ownKeys$e(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$e(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFileUpload = function useFileUpload(_ref) {
   var disabled = _ref.disabled,
     accept = _ref.accept,
@@ -20418,7 +20562,7 @@ var useFileUpload = function useFileUpload(_ref) {
                   var uploadedFile = findBy({
                     name: file.name
                   }, newFiles);
-                  return _objectSpread$5(_objectSpread$5({}, file), uploadedFile);
+                  return _objectSpread$e(_objectSpread$e({}, file), uploadedFile);
                 })
               });
             } else {
@@ -20477,6 +20621,8 @@ const SvgFileUpload = props => /*#__PURE__*/React$2.createElement("svg", _extend
   d: "M32 26h-6v10h-4V26h-6l8-8 8 8zm6.958-11.816C38.534 6.282 32.012 0 24 0S9.466 6.282 9.042 14.184C3.902 15.11 0 19.596 0 25c0 6.074 4.926 11 11 11h7v-4h-7c-3.86 0-7-3.14-7-7 0-5.594 4.958-7.666 8.866-7.44C12.532 9.124 17.282 4 24 4c6.906 0 11.782 5.594 11.134 13.56C38.624 17.468 44 19.062 44 25c0 3.86-3.14 7-7 7h-7v4h7c6.074 0 11-4.926 11-11 0-5.404-3.902-9.89-9.042-10.816z"
 })));
 
+function ownKeys$d(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$d(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$d(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$d(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DropZone = function DropZone(_ref) {
   var isDragActive = _ref.isDragActive,
     getRootProps = _ref.getRootProps,
@@ -20489,54 +20635,63 @@ var DropZone = function DropZone(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var shouldShowFileSizeLimit = hasFileSizeLimit && maxFileSize;
-  return /*#__PURE__*/React__default.createElement("div", getRootProps({
+  return /*#__PURE__*/jsx("div", _objectSpread$d(_objectSpread$d({}, getRootProps({
     className: classnames(["neeto-form-engine-file-upload__dropzone"], {
       "neeto-form-engine-file-upload__dropzone--drag-active": isDragActive
     })
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-file-upload__dropzone-inner",
-    "data-cy": "file-upload-body"
-  }, /*#__PURE__*/React__default.createElement(SvgFileUpload, {
-    className: "neeto-form-engine-file-upload__upload-icon"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-file-upload__dropzone-content"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-file-upload__upload-label",
-    htmlFor: "file-upload"
-  }, /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoForm.fileUpload.dropzone.chooseOrDragFile",
-    components: {
-      typography: /*#__PURE__*/React__default.createElement(Typography, {
-        component: "span",
-        weight: "semibold"
-      }),
-      span: /*#__PURE__*/React__default.createElement(Typography, {
-        component: "span",
-        weight: "normal"
-      })
-    }
-  }), /*#__PURE__*/React__default.createElement("input", _extends$8({}, getInputProps(), {
-    "data-cy": "file-browse-button"
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-file-upload__dropzone-helper-block"
-  }, !multipleFilesAllowed && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-form-engine-file-upload__dropzone-helper-text",
-    "data-cy": "upload-only-one-file-text",
-    style: "body3"
-  }, t("neetoForm.fileUpload.dropzone.oneFileAllowed")), shouldShowFileSizeLimit && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-form-engine-file-upload__dropzone-helper-text",
-    "data-cy": "maximum-allowed-size-text",
-    style: "body3"
-  }, t("neetoForm.fileUpload.dropzone.maxFileSize", {
-    size: maxFileSize,
-    unit: t("neetoForm.fileUpload.mb")
-  })), allowedFileTypes && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-form-engine-file-upload__dropzone-helper-text",
-    "data-cy": "allowed-files-types-text",
-    style: "body3"
-  }, t("neetoForm.fileUpload.dropzone.allowedFileTypes", {
-    types: allowedFileTypes
-  }))))));
+  })), {}, {
+    children: /*#__PURE__*/jsxs("div", {
+      className: "neeto-form-engine-file-upload__dropzone-inner",
+      "data-cy": "file-upload-body",
+      children: [/*#__PURE__*/jsx(SvgFileUpload, {
+        className: "neeto-form-engine-file-upload__upload-icon"
+      }), /*#__PURE__*/jsxs("div", {
+        className: "neeto-form-engine-file-upload__dropzone-content",
+        children: [/*#__PURE__*/jsxs("label", {
+          className: "neeto-form-engine-file-upload__upload-label",
+          htmlFor: "file-upload",
+          children: [/*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoForm.fileUpload.dropzone.chooseOrDragFile",
+            components: {
+              typography: /*#__PURE__*/jsx(Typography, {
+                component: "span",
+                weight: "semibold"
+              }),
+              span: /*#__PURE__*/jsx(Typography, {
+                component: "span",
+                weight: "normal"
+              })
+            }
+          }), /*#__PURE__*/jsx("input", _objectSpread$d(_objectSpread$d({}, getInputProps()), {}, {
+            "data-cy": "file-browse-button"
+          }))]
+        }), /*#__PURE__*/jsxs("div", {
+          className: "neeto-form-engine-file-upload__dropzone-helper-block",
+          children: [!multipleFilesAllowed && /*#__PURE__*/jsx(Typography, {
+            className: "neeto-form-engine-file-upload__dropzone-helper-text",
+            "data-cy": "upload-only-one-file-text",
+            style: "body3",
+            children: t("neetoForm.fileUpload.dropzone.oneFileAllowed")
+          }), shouldShowFileSizeLimit && /*#__PURE__*/jsx(Typography, {
+            className: "neeto-form-engine-file-upload__dropzone-helper-text",
+            "data-cy": "maximum-allowed-size-text",
+            style: "body3",
+            children: t("neetoForm.fileUpload.dropzone.maxFileSize", {
+              size: maxFileSize,
+              unit: t("neetoForm.fileUpload.mb")
+            })
+          }), allowedFileTypes && /*#__PURE__*/jsx(Typography, {
+            className: "neeto-form-engine-file-upload__dropzone-helper-text",
+            "data-cy": "allowed-files-types-text",
+            style: "body3",
+            children: t("neetoForm.fileUpload.dropzone.allowedFileTypes", {
+              types: allowedFileTypes
+            })
+          })]
+        })]
+      })]
+    })
+  }));
 };
 
 var createDefinition = function (propNames) { return ({
@@ -27846,51 +28001,55 @@ var Progress = function Progress(_ref) {
       transition: transition
     }
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-progress__circle"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-progress__circle-wrapper",
-    style: {
-      height: size
-    }
-  }, /*#__PURE__*/React__default.createElement("svg", {
-    height: size,
-    version: "1.1",
-    viewBox: "0 0 100 100",
-    width: size,
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default.createElement("circle", {
-    strokeWidth: strokeWidth,
-    className: "circle",
-    cx: "50",
-    cy: "50",
-    fill: "transparent",
-    r: radius,
-    stroke: emptyStroke,
-    strokeOpacity: emptyStrokeOpacity
-  })), /*#__PURE__*/React__default.createElement("svg", {
-    height: size,
-    viewBox: "0 0 100 100",
-    width: size,
-    style: {
-      position: "absolute",
-      transform: "rotate(-90deg)",
-      overflow: "visible",
-      top: 0
-    }
-  }, /*#__PURE__*/React__default.createElement(motion.circle, {
-    stroke: stroke,
-    strokeWidth: strokeWidth,
-    variants: variants,
-    animate: "show",
-    cx: "50",
-    cy: "50",
-    fill: "transparent",
-    initial: "hidden",
-    r: radius,
-    strokeDasharray: circumference,
-    strokeDashoffset: fillPercents
-  }))));
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-form-engine-progress__circle",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "neeto-form-engine-progress__circle-wrapper",
+      style: {
+        height: size
+      },
+      children: [/*#__PURE__*/jsx("svg", {
+        height: size,
+        version: "1.1",
+        viewBox: "0 0 100 100",
+        width: size,
+        xmlns: "http://www.w3.org/2000/svg",
+        children: /*#__PURE__*/jsx("circle", {
+          strokeWidth: strokeWidth,
+          className: "circle",
+          cx: "50",
+          cy: "50",
+          fill: "transparent",
+          r: radius,
+          stroke: emptyStroke,
+          strokeOpacity: emptyStrokeOpacity
+        })
+      }), /*#__PURE__*/jsx("svg", {
+        height: size,
+        viewBox: "0 0 100 100",
+        width: size,
+        style: {
+          position: "absolute",
+          transform: "rotate(-90deg)",
+          overflow: "visible",
+          top: 0
+        },
+        children: /*#__PURE__*/jsx(motion.circle, {
+          stroke: stroke,
+          strokeWidth: strokeWidth,
+          variants: variants,
+          animate: "show",
+          cx: "50",
+          cy: "50",
+          fill: "transparent",
+          initial: "hidden",
+          r: radius,
+          strokeDasharray: circumference,
+          strokeDashoffset: fillPercents
+        })
+      })]
+    })
+  });
 };
 
 var FILE_MIME_TYPES = {
@@ -27942,48 +28101,56 @@ var FilePreview = withT(function (_ref) {
     isUploading = _ref.isUploading,
     cancel = _ref.cancel,
     progress = _ref.progress;
-  return /*#__PURE__*/React__default.createElement("li", {
+  return /*#__PURE__*/jsxs("li", {
     className: "neeto-form-engine-file-upload__uploaded-list-item",
-    key: file.url
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-file-upload__file-preview"
-  }, /*#__PURE__*/React__default.createElement(Button$1, {
-    className: classnames("p-0", {
-      invisible: isUploading
-    }),
-    href: file.url,
-    icon: FileGeneric,
-    iconSize: 24,
-    rel: "noreferrer",
-    size: "large",
-    style: "text",
-    target: "_blank"
-  }), isUploading && /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-progress"
-  }, /*#__PURE__*/React__default.createElement(Progress, {
-    percents: progress || 0,
-    size: 20
-  }))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex min-w-0 grow flex-col break-words"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-form-engine-file-upload__file-info-name",
-    style: "body2"
-  }, file.name), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-form-engine-file-upload__file-info-size",
-    style: "body3"
-  }, file.size ? t("neetoForm.fileUpload.fileSizeInMb", {
-    fileSize: convertBytesToMb(file.size)
-  }) : "")), /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("neeto-form-engine-file-upload__actions")
-  }, /*#__PURE__*/React__default.createElement("span", {
-    className: classnames("neeto-form-engine-file-upload__success-indicator", {
-      "neeto-form-engine-file-upload__success-indicator--active": file.url
-    })
-  }, file.url && /*#__PURE__*/React__default.createElement(Check, null)), /*#__PURE__*/React__default.createElement("button", {
-    type: "button",
-    className: classnames("neeto-form-engine-file-upload__button--red neeto-form-engine-file-upload__remove-button"),
-    onClick: cancel
-  }, /*#__PURE__*/React__default.createElement(Close, null))));
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-form-engine-file-upload__file-preview",
+      children: [/*#__PURE__*/jsx(Button$1, {
+        className: classnames("p-0", {
+          invisible: isUploading
+        }),
+        href: file.url,
+        icon: FileGeneric,
+        iconSize: 24,
+        rel: "noreferrer",
+        size: "large",
+        style: "text",
+        target: "_blank"
+      }), isUploading && /*#__PURE__*/jsx("div", {
+        className: "neeto-form-engine-progress",
+        children: /*#__PURE__*/jsx(Progress, {
+          percents: progress || 0,
+          size: 20
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex min-w-0 grow flex-col break-words",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-form-engine-file-upload__file-info-name",
+        style: "body2",
+        children: file.name
+      }), /*#__PURE__*/jsx(Typography, {
+        className: "neeto-form-engine-file-upload__file-info-size",
+        style: "body3",
+        children: file.size ? t("neetoForm.fileUpload.fileSizeInMb", {
+          fileSize: convertBytesToMb(file.size)
+        }) : ""
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("neeto-form-engine-file-upload__actions"),
+      children: [/*#__PURE__*/jsx("span", {
+        className: classnames("neeto-form-engine-file-upload__success-indicator", {
+          "neeto-form-engine-file-upload__success-indicator--active": file.url
+        }),
+        children: file.url && /*#__PURE__*/jsx(Check, {})
+      }), /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: classnames("neeto-form-engine-file-upload__button--red neeto-form-engine-file-upload__remove-button"),
+        onClick: cancel,
+        children: /*#__PURE__*/jsx(Close, {})
+      })]
+    })]
+  }, file.url);
 });
 
 var FileUploadField = function FileUploadField(_ref) {
@@ -28033,42 +28200,47 @@ var FileUploadField = function FileUploadField(_ref) {
   var isUploadingFile = function isUploadingFile(file) {
     return isNotNil(progress[file.name]) && (progress[file.name] !== 100 || !file.url);
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__label-wrapper"
-  }, /*#__PURE__*/React__default.createElement(Label, {
-    className: "neeto-form-engine-label",
-    required: isRequired
-  }, label)), /*#__PURE__*/React__default.createElement(DropZone, {
-    allowedFileTypes: allowedFileTypes,
-    getInputProps: getInputProps,
-    getRootProps: getRootProps,
-    isDragActive: isDragActive,
-    maxFileSize: maxFileSize,
-    multipleFilesAllowed: multipleFilesAllowed
-  }), isNotEmpty(files) && /*#__PURE__*/React__default.createElement("ul", {
-    className: "neeto-form-engine-file-upload__uploaded-list"
-  }, files === null || files === void 0 ? void 0 : files.map(function (file, idx) {
-    return /*#__PURE__*/React__default.createElement(FilePreview, {
-      file: file,
-      cancel: cancel(idx),
-      isUploading: isUploadingFile(file),
-      key: idx,
-      progress: progress[file.name]
-    });
-  })), isNotEmpty(fileRejections) && fileRejections.map(function (file, index) {
-    return /*#__PURE__*/React__default.createElement(Typography, {
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-input__wrapper",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-input__label-wrapper",
+      children: /*#__PURE__*/jsx(Label, {
+        className: "neeto-form-engine-label",
+        required: isRequired,
+        children: label
+      })
+    }), /*#__PURE__*/jsx(DropZone, {
+      allowedFileTypes: allowedFileTypes,
+      getInputProps: getInputProps,
+      getRootProps: getRootProps,
+      isDragActive: isDragActive,
+      maxFileSize: maxFileSize,
+      multipleFilesAllowed: multipleFilesAllowed
+    }), isNotEmpty(files) && /*#__PURE__*/jsx("ul", {
+      className: "neeto-form-engine-file-upload__uploaded-list",
+      children: files === null || files === void 0 ? void 0 : files.map(function (file, idx) {
+        return /*#__PURE__*/createElement(FilePreview, {
+          file: file,
+          cancel: cancel(idx),
+          isUploading: isUploadingFile(file),
+          key: idx,
+          progress: progress[file.name]
+        });
+      })
+    }), isNotEmpty(fileRejections) && fileRejections.map(function (file, index) {
+      return /*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-error-800 neeto-ui-bg-pastel-red neeto-ui-rounded-sm mt-2 inline-block w-full p-1 text-sm",
+        children: renderErrorMessage(file, maxFileSizeInBytes, false)
+      }, index);
+    }), shouldShowError && /*#__PURE__*/jsx(Typography, {
       className: "neeto-ui-text-error-800 neeto-ui-bg-pastel-red neeto-ui-rounded-sm mt-2 inline-block w-full p-1 text-sm",
-      key: index
-    }, renderErrorMessage(file, maxFileSizeInBytes, false));
-  }), shouldShowError && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-error-800 neeto-ui-bg-pastel-red neeto-ui-rounded-sm mt-2 inline-block w-full p-1 text-sm"
-  }, error));
+      children: error
+    })]
+  });
 };
 
-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$6(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 ownKeys$c(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$c(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$c(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$c(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var NameField = function NameField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator,
@@ -28098,12 +28270,12 @@ var NameField = function NameField(_ref) {
     setValue = _useField2$2.setValue,
     setTouched = _useField2$2.setTouched;
   var handleFieldChange = withEventTargetValue(setValue);
-  return /*#__PURE__*/React__default.createElement(Input$1, _extends$8({}, _objectSpread$4(_objectSpread$4({
+  return /*#__PURE__*/jsx(Input$1, _objectSpread$c(_objectSpread$c({}, _objectSpread$c(_objectSpread$c({
     type: type
   }, field), {}, {
     autoComplete: autoComplete,
     label: label
-  }), {
+  })), {}, {
     error: touched ? error : "",
     name: kind,
     placeholder: fieldWithFallback(question, "placeholder"),
@@ -28126,39 +28298,43 @@ var Choices = function Choices(_ref) {
   var isCheckBox = type === "checkbox";
   var ChoiceWrapper = isCheckBox ? "div" : Radio;
   var Component = isCheckBox ? Checkbox : Radio.Item;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-choices__wrapper"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-label"
-  }, label), /*#__PURE__*/React__default.createElement(ChoiceWrapper, {
-    className: "neeto-form-engine-choices",
-    stacked: !isCheckBox
-  }, options.map(function (option, index) {
-    var _value$index;
-    return /*#__PURE__*/React__default.createElement("label", {
-      htmlFor: option.id,
-      key: option.id,
-      className: classnames("neeto-form-engine-choice", {
-        active: false
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-choices__wrapper",
+    children: [/*#__PURE__*/jsx("label", {
+      className: "neeto-form-engine-label",
+      children: label
+    }), /*#__PURE__*/jsx(ChoiceWrapper, {
+      className: "neeto-form-engine-choices",
+      stacked: !isCheckBox,
+      children: options.map(function (option, index) {
+        var _value$index;
+        return /*#__PURE__*/jsx("label", {
+          htmlFor: option.id,
+          className: classnames("neeto-form-engine-choice", {
+            active: false
+          }),
+          children: /*#__PURE__*/jsx(Component, {
+            onChange: onChange,
+            type: type,
+            id: option.id,
+            label: option.label,
+            name: isCheckBox ? "".concat(name, ".").concat(index) : name,
+            value: option.id,
+            checked: isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id
+          })
+        }, option.id);
       })
-    }, /*#__PURE__*/React__default.createElement(Component, {
-      onChange: onChange,
-      type: type,
-      id: option.id,
-      label: option.label,
-      name: isCheckBox ? "".concat(name, ".").concat(index) : name,
-      value: option.id,
-      checked: isCheckBox ? (_value$index = value === null || value === void 0 ? void 0 : value[index]) !== null && _value$index !== void 0 ? _value$index : false : value === option.id
-    }));
-  })), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error",
-    "data-cy": "neeto-form-engine-".concat(type, "-error")
-  }, error));
+    }), !!error && typeof error === "string" && /*#__PURE__*/jsx("p", {
+      className: "neeto-form-engine-input__error",
+      "data-cy": "neeto-form-engine-".concat(type, "-error"),
+      children: error
+    })]
+  });
 };
 var Choices$1 = /*#__PURE__*/React__default.memo(Choices);
 
-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$6(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 ownKeys$b(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$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var OptionsField = function OptionsField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -28181,7 +28357,7 @@ var OptionsField = function OptionsField(_ref) {
       value: option.id
     };
   }) : options.map(function (option) {
-    return _objectSpread$3(_objectSpread$3({}, option), {}, {
+    return _objectSpread$b(_objectSpread$b({}, option), {}, {
       label: fieldWithFallback(option, "label")
     });
   });
@@ -28192,31 +28368,32 @@ var OptionsField = function OptionsField(_ref) {
       return validateField(name);
     });
   };
-  return /*#__PURE__*/React__default.createElement(Field, {
+  return /*#__PURE__*/jsx(Field, {
     name: name,
     validate: validateFieldValue({
       kind: kind,
       label: label,
       isRequired: isRequired,
       customValidator: customValidator
-    })
-  }, function (_ref2) {
-    var meta = _ref2.meta,
-      field = _ref2.field;
-    var onChange = field.onChange,
-      value = field.value;
-    return /*#__PURE__*/React__default.createElement(Component, {
-      isRequired: isRequired,
-      name: name,
-      error: getError(meta),
-      label: getLabel(label, isRequired),
-      options: transformedOptions,
-      type: kind,
-      value: isDropdown ? findBy({
-        value: value
-      }, transformedOptions) || null : value,
-      onChange: isDropdown ? handleSelect : onChange
-    });
+    }),
+    children: function children(_ref2) {
+      var meta = _ref2.meta,
+        field = _ref2.field;
+      var onChange = field.onChange,
+        value = field.value;
+      return /*#__PURE__*/jsx(Component, {
+        isRequired: isRequired,
+        name: name,
+        error: getError(meta),
+        label: getLabel(label, isRequired),
+        options: transformedOptions,
+        type: kind,
+        value: isDropdown ? findBy({
+          value: value
+        }, transformedOptions) || null : value,
+        onChange: isDropdown ? handleSelect : onChange
+      });
+    }
   });
 };
 
@@ -28245,7 +28422,7 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
     _useField2$2 = _useField2[2],
     setValue = _useField2$2.setValue,
     setTouched = _useField2$2.setTouched;
-  return /*#__PURE__*/React__default.createElement(PhoneNumberInput, {
+  return /*#__PURE__*/jsx(PhoneNumberInput, {
     autoComplete: autoComplete,
     label: label,
     value: value,
@@ -28262,6 +28439,8 @@ var PhoneNumberField = function PhoneNumberField(_ref) {
 };
 
 var _excluded$2 = ["name", "label", "error", "lowestRatingLabel", "averageRatingLabel", "highestRatingLabel", "value"];
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Rating = function Rating(_ref) {
   var name = _ref.name,
     label = _ref.label,
@@ -28280,38 +28459,46 @@ var Rating = function Rating(_ref) {
       var Icon = _ref2.icon,
         modifier = _ref2.modifier,
         rating = _ref2.value;
-      return /*#__PURE__*/React__default.createElement(Fragment, {
-        key: rating
-      }, /*#__PURE__*/React__default.createElement("button", {
-        type: "button",
-        className: classnames("neeto-form-engine-rating__item neeto-form-engine-rating__item--".concat(modifier), {
-          active: rating === value
-        }),
-        onClick: handleClick
-      }, /*#__PURE__*/React__default.createElement(Icon, null), /*#__PURE__*/React__default.createElement("label", {
-        className: "neeto-form-engine-label"
-      }, labels[index])), /*#__PURE__*/React__default.createElement("input", _extends$8({
-        name: name,
-        hidden: true,
-        checked: rating === value,
-        type: "radio",
-        value: rating
-      }, other)));
+      return /*#__PURE__*/jsxs(Fragment$1, {
+        children: [/*#__PURE__*/jsxs("button", {
+          type: "button",
+          className: classnames("neeto-form-engine-rating__item neeto-form-engine-rating__item--".concat(modifier), {
+            active: rating === value
+          }),
+          onClick: handleClick,
+          children: [/*#__PURE__*/jsx(Icon, {}), /*#__PURE__*/jsx("label", {
+            className: "neeto-form-engine-label",
+            children: labels[index]
+          })]
+        }), /*#__PURE__*/jsx("input", _objectSpread$a({
+          name: name,
+          hidden: true,
+          checked: rating === value,
+          type: "radio",
+          value: rating
+        }, other))]
+      }, rating);
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-rating"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-label"
-  }, label), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-rating__row"
-  }, render()), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error",
-    "data-cy": "neeto-form-engine-rating-error"
-  }, error));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-rating",
+    children: [/*#__PURE__*/jsx("label", {
+      className: "neeto-form-engine-label",
+      children: label
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-rating__row",
+      children: render()
+    }), !!error && typeof error === "string" && /*#__PURE__*/jsx("p", {
+      className: "neeto-form-engine-input__error",
+      "data-cy": "neeto-form-engine-rating-error",
+      children: error
+    })]
+  });
 };
 var Rating$1 = /*#__PURE__*/React__default.memo(Rating);
 
+function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RatingField = function RatingField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -28319,27 +28506,30 @@ var RatingField = function RatingField(_ref) {
     kind = question.kind,
     isRequired = question.isRequired;
   var label = fieldWithFallback(question, "label");
-  return /*#__PURE__*/React__default.createElement(Field, {
+  return /*#__PURE__*/jsx(Field, {
     name: name,
     validate: validateFieldValue({
       kind: kind,
       label: label,
       isRequired: isRequired,
       customValidator: customValidator
-    })
-  }, function (_ref2) {
-    var meta = _ref2.meta,
-      field = _ref2.field;
-    return /*#__PURE__*/React__default.createElement(Rating$1, _extends$8({}, field, {
-      error: meta.touched ? meta.error : "",
-      label: getLabel(label, isRequired),
-      averageRatingLabel: fieldWithFallback(question, "averageRatingLabel") || RATING_VALUES.AVERAGE.label,
-      highestRatingLabel: fieldWithFallback(question, "highestRatingLabel") || RATING_VALUES.GOOD.label,
-      lowestRatingLabel: fieldWithFallback(question, "lowestRatingLabel") || RATING_VALUES.BAD.label
-    }));
+    }),
+    children: function children(_ref2) {
+      var meta = _ref2.meta,
+        field = _ref2.field;
+      return /*#__PURE__*/jsx(Rating$1, _objectSpread$9(_objectSpread$9({}, field), {}, {
+        error: meta.touched ? meta.error : "",
+        label: getLabel(label, isRequired),
+        averageRatingLabel: fieldWithFallback(question, "averageRatingLabel") || RATING_VALUES.AVERAGE.label,
+        highestRatingLabel: fieldWithFallback(question, "highestRatingLabel") || RATING_VALUES.GOOD.label,
+        lowestRatingLabel: fieldWithFallback(question, "lowestRatingLabel") || RATING_VALUES.BAD.label
+      }));
+    }
   });
 };
 
+function ownKeys$8(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$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RichTextEditor = function RichTextEditor(_ref) {
   var editorRef = _ref.editorRef,
     question = _ref.question,
@@ -28355,45 +28545,50 @@ var RichTextEditor = function RichTextEditor(_ref) {
   var label = fieldWithFallback(question, "label");
   var debouncedPlaceholder = useDebounce(fieldWithFallback(question, "placeholder"), 300);
   var propsToCompare = preview ? ["debouncedPlaceholder", "error"] : ["debouncedPlaceholder"];
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__wrapper"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__label-wrapper"
-  }, label && /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-label"
-  }, getLabel(label, isRequired))), /*#__PURE__*/React__default.createElement(FastField, {
-    debouncedPlaceholder: debouncedPlaceholder,
-    error: errors[name],
-    name: name || nodeId,
-    shouldUpdate: isPropsUnequal(propsToCompare),
-    validate: validateFieldValue({
-      kind: kind,
-      label: label,
-      isRequired: isRequired
-    })
-  }, function (_ref2) {
-    var field = _ref2.field,
-      form = _ref2.form,
-      meta = _ref2.meta;
-    return /*#__PURE__*/React__default.createElement(Editor$1, _extends$8({
-      className: "neeto-form-engine-rich-text-input",
-      error: meta.touched ? meta.error : "",
-      initialValue: field.value,
-      key: debouncedPlaceholder,
-      placeholder: debouncedPlaceholder,
-      ref: editorRef,
-      addons: ["attachments", "block-quote", "code-block", "image-upload"],
-      onBlur: function onBlur() {
-        return form.setFieldTouched(name, true);
-      },
-      onChange: function onChange(value) {
-        return form.setFieldValue(name, value);
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-input__wrapper",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-input__label-wrapper",
+      children: label && /*#__PURE__*/jsx("label", {
+        className: "neeto-form-engine-label",
+        children: getLabel(label, isRequired)
+      })
+    }), /*#__PURE__*/jsx(FastField, {
+      debouncedPlaceholder: debouncedPlaceholder,
+      error: errors[name],
+      name: name || nodeId,
+      shouldUpdate: isPropsUnequal(propsToCompare),
+      validate: validateFieldValue({
+        kind: kind,
+        label: label,
+        isRequired: isRequired
+      }),
+      children: function children(_ref2) {
+        var field = _ref2.field,
+          form = _ref2.form,
+          meta = _ref2.meta;
+        return /*#__PURE__*/jsx(Editor$1, _objectSpread$8({
+          className: "neeto-form-engine-rich-text-input",
+          error: meta.touched ? meta.error : "",
+          initialValue: field.value,
+          placeholder: debouncedPlaceholder,
+          ref: editorRef,
+          addons: ["attachments", "block-quote", "code-block", "image-upload"],
+          onBlur: function onBlur() {
+            return form.setFieldTouched(name, true);
+          },
+          onChange: function onChange(value) {
+            return form.setFieldValue(name, value);
+          }
+        }, editorProps), debouncedPlaceholder);
       }
-    }, editorProps));
-  }));
+    })]
+  });
 };
 
 var _excluded$1 = ["value", "iconType", "label", "rating"];
+function ownKeys$7(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$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var RatingButton = function RatingButton(_ref) {
   var _ref$value = _ref.value,
     value = _ref$value === void 0 ? 0 : _ref$value,
@@ -28406,56 +28601,68 @@ var RatingButton = function RatingButton(_ref) {
   };
   var Icon = ICONS_MAP[iconType];
   var selectedRating = getSelectedRating(value);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
-    className: classnames({
-      active: rating === value
-    }),
-    type: "button",
-    onClick: handleClick
-  }, /*#__PURE__*/React__default.createElement(Icon, {
-    size: 24,
-    className: classnames("neeto-form-engine-star-rating__icon", {
-      "neeto-form-engine-star-rating__icon--active": rating <= selectedRating
-    })
-  }), /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-label"
-  }, label)), /*#__PURE__*/React__default.createElement("input", _extends$8({
-    hidden: true,
-    checked: equals(rating, value),
-    type: "radio",
-    value: rating
-  }, otherProps)));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsxs("button", {
+      className: classnames({
+        active: rating === value
+      }),
+      type: "button",
+      onClick: handleClick,
+      children: [/*#__PURE__*/jsx(Icon, {
+        size: 24,
+        className: classnames("neeto-form-engine-star-rating__icon", {
+          "neeto-form-engine-star-rating__icon--active": rating <= selectedRating
+        })
+      }), /*#__PURE__*/jsx("label", {
+        className: "neeto-form-engine-label",
+        children: label
+      })]
+    }), /*#__PURE__*/jsx("input", _objectSpread$7({
+      hidden: true,
+      checked: equals(rating, value),
+      type: "radio",
+      value: rating
+    }, otherProps))]
+  });
 };
 var RatingButton$1 = /*#__PURE__*/React__default.memo(RatingButton);
 
 var _excluded = ["label", "minValue", "maxValue", "error"];
+function ownKeys$6(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$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), !0).forEach(function (r) { _defineProperty$6(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StarRating = function StarRating(_ref) {
   var label = _ref.label,
     minValue = _ref.minValue,
     maxValue = _ref.maxValue,
     error = _ref.error,
     props = _objectWithoutProperties$1(_ref, _excluded);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__wrapper neeto-form-engine-star-rating"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-input__label-wrapper"
-  }, /*#__PURE__*/React__default.createElement("label", {
-    className: "neeto-form-engine-label"
-  }, label)), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-form-engine-star-rating__row"
-  }, generateArray(minValue, maxValue).map(function (index) {
-    return /*#__PURE__*/React__default.createElement(RatingButton$1, _extends$8({
-      key: index,
-      label: index,
-      rating: index
-    }, props));
-  })), !!error && typeof error === "string" && /*#__PURE__*/React__default.createElement("p", {
-    className: "neeto-form-engine-input__error",
-    "data-cy": "neeto-form-engine-star-rating-error"
-  }, error));
+  return /*#__PURE__*/jsxs("div", {
+    className: "neeto-form-engine-input__wrapper neeto-form-engine-star-rating",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-input__label-wrapper",
+      children: /*#__PURE__*/jsx("label", {
+        className: "neeto-form-engine-label",
+        children: label
+      })
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-form-engine-star-rating__row",
+      children: generateArray(minValue, maxValue).map(function (index) {
+        return /*#__PURE__*/jsx(RatingButton$1, _objectSpread$6({
+          label: index,
+          rating: index
+        }, props), index);
+      })
+    }), !!error && typeof error === "string" && /*#__PURE__*/jsx("p", {
+      className: "neeto-form-engine-input__error",
+      "data-cy": "neeto-form-engine-star-rating-error",
+      children: error
+    })]
+  });
 };
 var StarRating$1 = /*#__PURE__*/React__default.memo(StarRating);
 
+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$6(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 StarRatingField = function StarRatingField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -28466,30 +28673,31 @@ var StarRatingField = function StarRatingField(_ref) {
     maxValue = question.maxValue,
     iconType = question.iconType;
   var label = fieldWithFallback(question, "label");
-  return /*#__PURE__*/React__default.createElement(Field, {
+  return /*#__PURE__*/jsx(Field, {
     name: name,
     validate: validateFieldValue({
       kind: kind,
       label: label,
       isRequired: isRequired,
       customValidator: customValidator
-    })
-  }, function (_ref2) {
-    var meta = _ref2.meta,
-      field = _ref2.field;
-    return /*#__PURE__*/React__default.createElement(StarRating$1, _extends$8({
-      iconType: iconType,
-      maxValue: maxValue,
-      minValue: minValue,
-      name: name,
-      error: meta.touched ? meta.error : "",
-      label: getLabel(label, isRequired)
-    }, field));
+    }),
+    children: function children(_ref2) {
+      var meta = _ref2.meta,
+        field = _ref2.field;
+      return /*#__PURE__*/jsx(StarRating$1, _objectSpread$5({
+        iconType: iconType,
+        maxValue: maxValue,
+        minValue: minValue,
+        name: name,
+        error: meta.touched ? meta.error : "",
+        label: getLabel(label, isRequired)
+      }, field));
+    }
   });
 };
 
-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$6(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 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$6(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 TermsField = function TermsField(_ref) {
   var question = _ref.question,
     customValidator = _ref.customValidator;
@@ -28498,32 +28706,35 @@ var TermsField = function TermsField(_ref) {
     isRequired = question.isRequired,
     nodeId = question.nodeId;
   var label = fieldWithFallback(question, "label", true);
-  return /*#__PURE__*/React__default.createElement(Field, {
+  return /*#__PURE__*/jsx(Field, {
     name: name || nodeId,
     validate: validateFieldValue({
       kind: kind,
       label: label,
       isRequired: isRequired,
       customValidator: customValidator
-    })
-  }, function (_ref2) {
-    var meta = _ref2.meta,
-      field = _ref2.field;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-form-engine-terms"
-    }, /*#__PURE__*/React__default.createElement(Checkbox, _extends$8({}, _objectSpread$2(_objectSpread$2({}, field), {}, {
-      name: name
-    }), {
-      checked: field.value,
-      error: meta.touched ? meta.error : ""
-    }), /*#__PURE__*/React__default.createElement(EditorContent, {
-      content: label
-    })));
+    }),
+    children: function children(_ref2) {
+      var meta = _ref2.meta,
+        field = _ref2.field;
+      return /*#__PURE__*/jsx("div", {
+        className: "neeto-form-engine-terms",
+        children: /*#__PURE__*/jsx(Checkbox, _objectSpread$4(_objectSpread$4({}, _objectSpread$4(_objectSpread$4({}, field), {}, {
+          name: name
+        })), {}, {
+          checked: field.value,
+          error: meta.touched ? meta.error : "",
+          children: /*#__PURE__*/jsx(EditorContent, {
+            content: 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$6(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$6(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 TextField = function TextField(_ref) {
   var _otherProps$onChange;
   var question = _ref.question,
@@ -28558,13 +28769,13 @@ var TextField = function TextField(_ref) {
     setValue = _useField2$2.setValue,
     setTouched = _useField2$2.setTouched;
   var handleFieldChange = withEventTargetValue(setValue);
-  return /*#__PURE__*/React__default.createElement(Component, _extends$8({}, _objectSpread$1(_objectSpread$1({
+  return /*#__PURE__*/jsx(Component, _objectSpread$3(_objectSpread$3({}, _objectSpread$3(_objectSpread$3({
     type: type
   }, field), {}, {
     autoComplete: autoComplete,
     label: label,
     onKeyDown: onKeyDown
-  }), {
+  })), {}, {
     error: touched ? error : "",
     name: slugify(label),
     placeholder: fieldWithFallback(question, "placeholder"),
@@ -28579,18 +28790,11 @@ var TextField = function TextField(_ref) {
 var _QUESTION_TO_COMPONEN;
 var QUESTION_TO_COMPONENT_MAP = (_QUESTION_TO_COMPONEN = {}, _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXT.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.NAME.value, NameField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.EMAIL.value, EmailField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.INTEGER.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DECIMAL.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PHONE.value, PhoneNumberField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.QUESTION.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TEXTAREA.value, TextField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CHECKBOX.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RADIO.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DROPDOWN.value, OptionsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RATING.value, RatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.PARAGRAPH.value, function (_ref) {
   var question = _ref.question;
-  return /*#__PURE__*/React__default.createElement(EditorContent, {
+  return /*#__PURE__*/jsx(EditorContent, {
     content: fieldWithFallback(question, "label", true)
   });
 }), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.TERMS.value, TermsField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.DATE.value, DateField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.STAR_RATING.value, StarRatingField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.ADDITIONAL_GUESTS.value, MultipleEmailInput), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.RICH_TEXT.value, RichTextEditor), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.CONDITION.value, ConditionField), _defineProperty$6(_QUESTION_TO_COMPONEN, QUESTION_KIND.FILE_UPLOAD.value, FileUploadField), _QUESTION_TO_COMPONEN);
 
-var fieldWithFallback = function fieldWithFallback(question, fieldName) {
-  var hasRichContent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var fallback = question["".concat(fieldName, "Fallback")];
-  var field = question[fieldName];
-  var isFieldEmpty = hasRichContent ? isEditorEmpty(field) : isEmpty(field);
-  return isFieldEmpty && isNotNil(fallback) ? fallback : field;
-};
 var getFieldComponent = function getFieldComponent(_ref) {
   var kind = _ref.kind;
   if (kind in QUESTION_TO_COMPONENT_MAP) return QUESTION_TO_COMPONENT_MAP[kind];
@@ -28644,21 +28848,24 @@ const SvgSuccess = props => /*#__PURE__*/React$2.createElement("svg", _extends({
 var Success = function Success() {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "flex h-full w-full flex-col items-center justify-center space-y-4"
-  }, /*#__PURE__*/React__default.createElement(SvgSuccess, null), /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h1"
-  }, t("neetoForm.successPage.title1")), /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h1"
-  }, t("neetoForm.successPage.title2")));
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex h-full w-full flex-col items-center justify-center space-y-4",
+    children: [/*#__PURE__*/jsx(SvgSuccess, {}), /*#__PURE__*/jsx(Typography, {
+      style: "h1",
+      children: t("neetoForm.successPage.title1")
+    }), /*#__PURE__*/jsx(Typography, {
+      style: "h1",
+      children: t("neetoForm.successPage.title2")
+    })]
+  });
 };
 var Success$1 = /*#__PURE__*/React__default.memo(Success);
 
 function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
 function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-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$6(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$6(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 ExternalForm = function ExternalForm(_ref) {
   var _formikInnerRef$curre;
   var _ref$preview = _ref.preview,
@@ -28827,7 +29034,7 @@ var ExternalForm = function ExternalForm(_ref) {
             _context.next = 29;
             return createSubmission({
               formId: formId,
-              values: _objectSpread({
+              values: _objectSpread$2({
                 neetoFormResponse: {
                   responses: responses
                 }
@@ -28930,9 +29137,10 @@ var ExternalForm = function ExternalForm(_ref) {
     mode: "scoped"
   });
   if (isLoading || form.isQuestionsLoading || !!submissionId && submission !== null && submission !== void 0 && submission.isLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "loader flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "loader flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
   var title = form.title,
     _form$questions = form.questions,
@@ -28942,96 +29150,107 @@ var ExternalForm = function ExternalForm(_ref) {
     return !_destroy;
   }) : questions;
   if (displayThankYou && showSuccess) {
-    return /*#__PURE__*/React__default.createElement(Success$1, null);
-  }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showTitle && /*#__PURE__*/React__default.createElement("div", {
-    className: "py-6 text-center"
-  }, /*#__PURE__*/React__default.createElement(Typography, _extends$8({
-    className: "neeto-ui-text-gray-800",
-    style: "h4",
-    weight: "semibold"
-  }, titleProps), formTitle || title)), /*#__PURE__*/React__default.createElement(Formik, {
-    onSubmit: onSubmit,
-    enableReinitialize: true,
-    innerRef: formikInnerRef,
-    initialValues: generateInitValues({
-      questions: questions,
-      initialValues: submission === null || submission === void 0 ? void 0 : submission.responses,
-      localValues: preserveValues ? localValues : initialValues,
-      fieldCodes: enablePreFilling ? getQueryParams({
-        toCamelCase: false
-      }) : {}
-    })
-  }, function (_ref5) {
-    var isSubmitting = _ref5.isSubmitting,
-      errors = _ref5.errors,
-      setFieldError = _ref5.setFieldError,
-      handleReset = _ref5.handleReset;
-    return /*#__PURE__*/React__default.createElement(FormikWrap, {
-      formId: formId,
-      preserveValues: preserveValues,
-      onError: handleScrollToError,
-      onValuesChange: onChange
-    }, /*#__PURE__*/React__default.createElement(Form$3, _extends$8({
-      noValidate: true,
-      ref: mergeRefs(formRef, keyPressRef),
-      className: classnames("neeto-form-engine-form relative space-y-4", _defineProperty$6({}, className, className)),
-      onChange: function onChange(event) {
-        if (isEmpty(errors)) return;
-        setFieldError(event.target.name, "");
-      }
-    }, formDomProps, {
-      onReset: function onReset(e) {
-        return _onReset(e, handleReset);
-      }
-    }), (submission === null || submission === void 0 ? void 0 : submission.isLoading) && /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-ui-bg-gray-100 absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center opacity-75"
-    }, /*#__PURE__*/React__default.createElement(Spinner$2, null)), renderedQuestions.map(function (question) {
-      var _question$id;
-      var FieldComponent = getFieldComponent(question);
-      return /*#__PURE__*/React__default.createElement(FieldComponent, {
-        editorProps: editorProps,
-        editorRef: editorRef,
-        preview: preview,
-        question: question,
-        customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
-        key: (_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId,
-        autoComplete: buildAutoCompleteAttribute(question.kind, autoCompleteKinds, formDomProps)
-      });
-    }), showEmptyState && isEmpty(renderedQuestions) && /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col items-center justify-center gap-y-4 py-8"
-    }, /*#__PURE__*/React__default.createElement(SvgNoQuestions, null), /*#__PURE__*/React__default.createElement(Typography, {
-      style: "h3",
-      weight: "semibold"
-    }, t("neetoForm.questions.common.notFound"))), footer, !isEmpty(renderedQuestions) && /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-8 flex items-center justify-between"
-    }, cancelButtonProps && /*#__PURE__*/React__default.createElement(Button$1, _extends$8({
-      label: t("neetoForm.common.cancel"),
-      style: "secondary"
-    }, cancelButtonProps)), /*#__PURE__*/React__default.createElement("div", {
-      className: "flex gap-x-2"
-    }, renderButtonsInOrder([/*#__PURE__*/React__default.createElement(Button$1, _extends$8({
-      disabled: isSubmitting || isSubmitted,
-      key: "submit",
-      label: t("neetoForm.common.submit"),
-      loading: isSubmitting,
-      type: "submit"
-    }, submitButtonProps)), /*#__PURE__*/React__default.createElement(Button$1, _extends$8({
-      key: "reset",
-      label: t("neetoForm.common.reset"),
-      style: "secondary",
-      type: "reset"
-    }, resetButtonProps))], isPresent$1(cancelButtonProps))))), !customSubmitHandler && /*#__PURE__*/React__default.createElement(Callout, {
-      callout: {
-        isVisible: isPresent$1(error),
-        title: t("neetoForm.callouts.submitError"),
-        message: error
-      },
-      onClose: function onClose() {
-        return setError(null);
+    return /*#__PURE__*/jsx(Success$1, {});
+  }
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [showTitle && /*#__PURE__*/jsx("div", {
+      className: "py-6 text-center",
+      children: /*#__PURE__*/jsx(Typography, _objectSpread$2(_objectSpread$2({
+        className: "neeto-ui-text-gray-800",
+        style: "h4",
+        weight: "semibold"
+      }, titleProps), {}, {
+        children: formTitle || title
+      }))
+    }), /*#__PURE__*/jsx(Formik, {
+      onSubmit: onSubmit,
+      enableReinitialize: true,
+      innerRef: formikInnerRef,
+      initialValues: generateInitValues({
+        questions: questions,
+        initialValues: submission === null || submission === void 0 ? void 0 : submission.responses,
+        localValues: preserveValues ? localValues : initialValues,
+        fieldCodes: enablePreFilling ? getQueryParams({
+          toCamelCase: false
+        }) : {}
+      }),
+      children: function children(_ref5) {
+        var isSubmitting = _ref5.isSubmitting,
+          errors = _ref5.errors,
+          setFieldError = _ref5.setFieldError,
+          handleReset = _ref5.handleReset;
+        return /*#__PURE__*/jsxs(FormikWrap, {
+          formId: formId,
+          preserveValues: preserveValues,
+          onError: handleScrollToError,
+          onValuesChange: onChange,
+          children: [/*#__PURE__*/jsxs(Form$3, _objectSpread$2(_objectSpread$2({
+            noValidate: true,
+            ref: mergeRefs(formRef, keyPressRef),
+            className: classnames("neeto-form-engine-form relative space-y-4", _defineProperty$6({}, className, className)),
+            onChange: function onChange(event) {
+              if (isEmpty(errors)) return;
+              setFieldError(event.target.name, "");
+            }
+          }, formDomProps), {}, {
+            onReset: function onReset(e) {
+              return _onReset(e, handleReset);
+            },
+            children: [(submission === null || submission === void 0 ? void 0 : submission.isLoading) && /*#__PURE__*/jsx("div", {
+              className: "neeto-ui-bg-gray-100 absolute bottom-0 left-0 right-0 top-0 flex items-center justify-center opacity-75",
+              children: /*#__PURE__*/jsx(Spinner$2, {})
+            }), renderedQuestions.map(function (question) {
+              var _question$id;
+              var FieldComponent = getFieldComponent(question);
+              return /*#__PURE__*/createElement(FieldComponent, {
+                editorProps: editorProps,
+                editorRef: editorRef,
+                preview: preview,
+                question: question,
+                customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
+                key: (_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId,
+                autoComplete: buildAutoCompleteAttribute(question.kind, autoCompleteKinds, formDomProps)
+              });
+            }), showEmptyState && isEmpty(renderedQuestions) && /*#__PURE__*/jsxs("div", {
+              className: "flex flex-col items-center justify-center gap-y-4 py-8",
+              children: [/*#__PURE__*/jsx(SvgNoQuestions, {}), /*#__PURE__*/jsx(Typography, {
+                style: "h3",
+                weight: "semibold",
+                children: t("neetoForm.questions.common.notFound")
+              })]
+            }), footer, !isEmpty(renderedQuestions) && /*#__PURE__*/jsxs("div", {
+              className: "mt-8 flex items-center justify-between",
+              children: [cancelButtonProps && /*#__PURE__*/jsx(Button$1, _objectSpread$2({
+                label: t("neetoForm.common.cancel"),
+                style: "secondary"
+              }, cancelButtonProps)), /*#__PURE__*/jsx("div", {
+                className: "flex gap-x-2",
+                children: renderButtonsInOrder([/*#__PURE__*/jsx(Button$1, _objectSpread$2({
+                  disabled: isSubmitting || isSubmitted,
+                  label: t("neetoForm.common.submit"),
+                  loading: isSubmitting,
+                  type: "submit"
+                }, submitButtonProps), "submit"), /*#__PURE__*/jsx(Button$1, _objectSpread$2({
+                  label: t("neetoForm.common.reset"),
+                  style: "secondary",
+                  type: "reset"
+                }, resetButtonProps), "reset")], isPresent$1(cancelButtonProps))
+              })]
+            })]
+          })), !customSubmitHandler && /*#__PURE__*/jsx(Callout, {
+            callout: {
+              isVisible: isPresent$1(error),
+              title: t("neetoForm.callouts.submitError"),
+              message: error
+            },
+            onClose: function onClose() {
+              return setError(null);
+            }
+          })]
+        });
       }
-    }));
-  }));
+    })]
+  });
 };
 
 var dist = {};
@@ -31559,13 +31778,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var _default = dist.default = _Linkify2.default;
 
 var linkifyDecorator = function linkifyDecorator(decoratedHref, decoratedText, key) {
-  return /*#__PURE__*/React__default.createElement("a", {
+  return /*#__PURE__*/jsx("a", {
     className: "neeto-ui-text-primary-500 hover:underline",
     href: decoratedHref,
-    key: key,
     rel: "noreferrer",
-    target: "_blank"
-  }, decoratedText);
+    target: "_blank",
+    children: decoratedText
+  }, key);
 };
 var filterResponses = removeBy({
   kind: QUESTION_KIND.ADDITIONAL_GUESTS.value,
@@ -31574,27 +31793,33 @@ var filterResponses = removeBy({
 
 var FileUpload = function FileUpload(_ref) {
   var files = _ref.files;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-2"
-  }, files === null || files === void 0 ? void 0 : files.map(function (_ref2, index) {
-    var url = _ref2.url,
-      name = _ref2.name;
-    return /*#__PURE__*/React__default.createElement(Typography, {
-      className: "break-all",
-      key: index,
-      style: "body2"
-    }, /*#__PURE__*/React__default.createElement(_default, {
-      componentDecorator: function componentDecorator() {
-        return linkifyDecorator(url, name, index);
-      }
-    }, url));
-  }));
+  return /*#__PURE__*/jsx("div", {
+    className: "space-y-2",
+    children: files === null || files === void 0 ? void 0 : files.map(function (_ref2, index) {
+      var url = _ref2.url,
+        name = _ref2.name;
+      return /*#__PURE__*/jsx(Typography, {
+        className: "break-all",
+        style: "body2",
+        children: /*#__PURE__*/jsx(_default, {
+          componentDecorator: function componentDecorator() {
+            return linkifyDecorator(url, name, index);
+          },
+          children: url
+        })
+      }, index);
+    })
+  });
 };
 
+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$6(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 getValue = function getValue(_ref) {
   var value = _ref.value,
     kind = _ref.kind;
-  if (isEmpty(value)) return /*#__PURE__*/React__default.createElement("i", null, t$4("neetoForm.common.unanswered"));
+  if (isEmpty(value)) return /*#__PURE__*/jsx("i", {
+    children: t$4("neetoForm.common.unanswered")
+  });
   if (kind === QUESTION_KIND.DATE.value) {
     return value && dateFormat.date(value);
   }
@@ -31638,51 +31863,58 @@ var Submission = function Submission(_ref2) {
   var renderSubmittedValue = function renderSubmittedValue(kind, value) {
     switch (kind) {
       case QUESTION_KIND.RICH_TEXT.value:
-        return /*#__PURE__*/React__default.createElement(EditorContent, {
+        return /*#__PURE__*/jsx(EditorContent, {
           content: getEditorContent(getValue({
             value: value,
             kind: kind
           }))
         });
       case QUESTION_KIND.PHONE.value:
-        return isPresent$1(value) ? /*#__PURE__*/React__default.createElement(PhoneNumber$1, {
+        return isPresent$1(value) ? /*#__PURE__*/jsx(PhoneNumber$1, {
           value: value,
           showEmoji: true
         }) : "-";
       case QUESTION_KIND.FILE_UPLOAD.value:
-        return isPresent$1(value) ? /*#__PURE__*/React__default.createElement(FileUpload, {
+        return isPresent$1(value) ? /*#__PURE__*/jsx(FileUpload, {
           files: value
         }) : "-";
       default:
-        return /*#__PURE__*/React__default.createElement(Typography, _extends$8({
+        return /*#__PURE__*/jsx(Typography, _objectSpread$1(_objectSpread$1({
           weight: "semibold"
-        }, answerProps), /*#__PURE__*/React__default.createElement(_default, {
-          componentDecorator: linkifyDecorator
-        }, getValue({
-          value: value,
-          kind: kind
-        })));
+        }, answerProps), {}, {
+          children: /*#__PURE__*/jsx(_default, {
+            componentDecorator: linkifyDecorator,
+            children: getValue({
+              value: value,
+              kind: kind
+            })
+          })
+        }));
     }
   };
   if (isLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
-  }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("mx-auto flex h-full w-full flex-col items-start", _defineProperty$6({}, className, className))
-  }, filteredResponses.map(function (_ref3) {
-    var kind = _ref3.kind,
-      label = _ref3.label,
-      value = _ref3.value;
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "mb-4",
-      key: label
-    }, /*#__PURE__*/React__default.createElement(Typography, _extends$8({
-      style: "h5",
-      weight: "light"
-    }, questionLabelProps), label), renderSubmittedValue(kind, value));
-  }));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
+  }
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("mx-auto flex h-full w-full flex-col items-start", _defineProperty$6({}, className, className)),
+    children: filteredResponses.map(function (_ref3) {
+      var kind = _ref3.kind,
+        label = _ref3.label,
+        value = _ref3.value;
+      return /*#__PURE__*/jsxs("div", {
+        className: "mb-4",
+        children: [/*#__PURE__*/jsx(Typography, _objectSpread$1(_objectSpread$1({
+          style: "h5",
+          weight: "light"
+        }, questionLabelProps), {}, {
+          children: label
+        })), renderSubmittedValue(kind, value)]
+      }, label);
+    })
+  });
 };
 
 var getPreFillableQuestions = function getPreFillableQuestions(questions) {
@@ -31746,6 +31978,8 @@ var buildQueryParameters = function buildQueryParameters(responses, questions) {
   return queryParameters;
 };
 
+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$6(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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -31830,81 +32064,94 @@ var UrlBuilder = function UrlBuilder(_ref) {
     mode: "scoped"
   });
   if (isLoading || form.isQuestionsLoading) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
   var title = form.title,
     questions = form.questions;
   var modifiedQuestions = getPreFillableQuestions(questions);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, showTitle && /*#__PURE__*/React__default.createElement("div", {
-    className: "py-6 text-center"
-  }, /*#__PURE__*/React__default.createElement(Typography, _extends$8({
-    className: "neeto-ui-text-gray-800",
-    style: "h4",
-    weight: "semibold"
-  }, titleProps), formTitle || title)), /*#__PURE__*/React__default.createElement(Formik, {
-    onSubmit: onSubmit,
-    enableReinitialize: true,
-    initialValues: generateInitValues({
-      questions: modifiedQuestions
-    }),
-    innerRef: formikInnerRef
-  }, function (_ref3) {
-    var isSubmitting = _ref3.isSubmitting,
-      errors = _ref3.errors,
-      setFieldError = _ref3.setFieldError,
-      handleReset = _ref3.handleReset;
-    return /*#__PURE__*/React__default.createElement(FormikWrap, {
-      formId: formId,
-      preserveValues: false,
-      onError: handleScrollToError,
-      onValuesChange: onChange
-    }, /*#__PURE__*/React__default.createElement(Form$3, _extends$8({
-      noValidate: true,
-      ref: mergeRefs(formRef, keyPressRef),
-      className: classnames("neeto-form-engine-form relative space-y-4", className),
-      onChange: function onChange(event) {
-        if (isEmpty(errors)) return;
-        setFieldError(event.target.name, "");
-      }
-    }, formDomProps, {
-      onReset: function onReset(e) {
-        return _onReset(e, handleReset);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [showTitle && /*#__PURE__*/jsx("div", {
+      className: "py-6 text-center",
+      children: /*#__PURE__*/jsx(Typography, _objectSpread(_objectSpread({
+        className: "neeto-ui-text-gray-800",
+        style: "h4",
+        weight: "semibold"
+      }, titleProps), {}, {
+        children: formTitle || title
+      }))
+    }), /*#__PURE__*/jsx(Formik, {
+      onSubmit: onSubmit,
+      enableReinitialize: true,
+      initialValues: generateInitValues({
+        questions: modifiedQuestions
+      }),
+      innerRef: formikInnerRef,
+      children: function children(_ref3) {
+        var isSubmitting = _ref3.isSubmitting,
+          errors = _ref3.errors,
+          setFieldError = _ref3.setFieldError,
+          handleReset = _ref3.handleReset;
+        return /*#__PURE__*/jsx(FormikWrap, {
+          formId: formId,
+          preserveValues: false,
+          onError: handleScrollToError,
+          onValuesChange: onChange,
+          children: /*#__PURE__*/jsxs(Form$3, _objectSpread(_objectSpread({
+            noValidate: true,
+            ref: mergeRefs(formRef, keyPressRef),
+            className: classnames("neeto-form-engine-form relative space-y-4", className),
+            onChange: function onChange(event) {
+              if (isEmpty(errors)) return;
+              setFieldError(event.target.name, "");
+            }
+          }, formDomProps), {}, {
+            onReset: function onReset(e) {
+              return _onReset(e, handleReset);
+            },
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "neeto-form-engine-questions-wrapper space-y-4 overflow-auto pr-4",
+              children: [modifiedQuestions.map(function (question) {
+                var _question$id;
+                var FieldComponent = getFieldComponent(question);
+                return /*#__PURE__*/createElement(FieldComponent, {
+                  editorProps: editorProps,
+                  editorRef: editorRef,
+                  question: question,
+                  customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
+                  key: (_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId,
+                  autoComplete: buildAutoCompleteAttribute(question.kind, autoCompleteKinds, formDomProps)
+                });
+              }), showEmptyState && isEmpty(modifiedQuestions) && /*#__PURE__*/jsxs("div", {
+                className: "flex flex-col items-center justify-center gap-y-4 py-8",
+                children: [/*#__PURE__*/jsx(SvgNoQuestions, {}), /*#__PURE__*/jsx(Typography, {
+                  style: "h3",
+                  weight: "semibold",
+                  children: t("neetoForm.questions.common.notFound")
+                })]
+              })]
+            }), !isEmpty(modifiedQuestions) && /*#__PURE__*/jsxs("div", {
+              className: "mt-8 flex items-center justify-start gap-x-2",
+              children: [/*#__PURE__*/jsx(Button$1, _objectSpread({
+                disabled: isSubmitting,
+                label: t("neetoForm.common.generateLink"),
+                loading: isSubmitting,
+                type: "submit"
+              }, submitButtonProps)), resetButtonProps && /*#__PURE__*/jsx(Button$1, _objectSpread({
+                label: t("neetoForm.common.reset"),
+                style: "secondary",
+                type: "reset"
+              }, resetButtonProps)), cancelButtonProps && /*#__PURE__*/jsx(Button$1, _objectSpread({
+                label: t("neetoForm.common.cancel")
+              }, cancelButtonProps))]
+            })]
+          }))
+        });
       }
-    }), /*#__PURE__*/React__default.createElement("div", {
-      className: "neeto-form-engine-questions-wrapper space-y-4 overflow-auto pr-4"
-    }, modifiedQuestions.map(function (question) {
-      var _question$id;
-      var FieldComponent = getFieldComponent(question);
-      return /*#__PURE__*/React__default.createElement(FieldComponent, {
-        editorProps: editorProps,
-        editorRef: editorRef,
-        question: question,
-        customValidator: customValidator === null || customValidator === void 0 ? void 0 : customValidator(question),
-        key: (_question$id = question.id) !== null && _question$id !== void 0 ? _question$id : question.nodeId,
-        autoComplete: buildAutoCompleteAttribute(question.kind, autoCompleteKinds, formDomProps)
-      });
-    }), showEmptyState && isEmpty(modifiedQuestions) && /*#__PURE__*/React__default.createElement("div", {
-      className: "flex flex-col items-center justify-center gap-y-4 py-8"
-    }, /*#__PURE__*/React__default.createElement(SvgNoQuestions, null), /*#__PURE__*/React__default.createElement(Typography, {
-      style: "h3",
-      weight: "semibold"
-    }, t("neetoForm.questions.common.notFound")))), !isEmpty(modifiedQuestions) && /*#__PURE__*/React__default.createElement("div", {
-      className: "mt-8 flex items-center justify-start gap-x-2"
-    }, /*#__PURE__*/React__default.createElement(Button$1, _extends$8({
-      disabled: isSubmitting,
-      label: t("neetoForm.common.generateLink"),
-      loading: isSubmitting,
-      type: "submit"
-    }, submitButtonProps)), resetButtonProps && /*#__PURE__*/React__default.createElement(Button$1, _extends$8({
-      label: t("neetoForm.common.reset"),
-      style: "secondary",
-      type: "reset"
-    }, resetButtonProps)), cancelButtonProps && /*#__PURE__*/React__default.createElement(Button$1, _extends$8({
-      label: t("neetoForm.common.cancel")
-    }, cancelButtonProps)))));
-  }));
+    })]
+  });
 };
 
 var useFormSubmission = function useFormSubmission(_ref) {