@bigbinary/neeto-form-frontend 4.4.18 → 4.4.20

package/dist/cjs/BuildForm.js

@@ -6,7 +6,7 @@ var neetoCist = require('@bigbinary/neeto-cist');
 var Spinner = require('@bigbinary/neetoui/Spinner');
 var ramda = require('ramda');
 var constants = require('../constants-D5JlvWws.js');
-var yup = require('../yup-DfKhsn0t.js');
+var yup = require('../yup-DhAn6Gfl.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var dnd = require('@hello-pangea/dnd');
@@ -23,6 +23,7 @@ var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
 var Dropdown = require('@bigbinary/neetoui/Dropdown');
 var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var Equals = require('@bigbinary/neeto-icons/Equals');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var index = require('../index-Beo6ztaM.js');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -60,6 +61,28 @@ var Slider = require('@bigbinary/neetoui/Slider');
 var HelpPopover = require('@bigbinary/neeto-molecules/HelpPopover');
 require('@bigbinary/neeto-commons-frontend/constants');
 require('axios');
+require('@bigbinary/neeto-icons/Address');
+require('@bigbinary/neeto-icons/Calendar');
+require('@bigbinary/neeto-icons/Captcha');
+require('@bigbinary/neeto-icons/Checkbox');
+require('@bigbinary/neeto-icons/DropdownClosed');
+require('@bigbinary/neeto-icons/Email');
+require('@bigbinary/neeto-icons/FileUpload');
+require('@bigbinary/neeto-icons/Group');
+require('@bigbinary/neeto-icons/Hash');
+require('@bigbinary/neeto-icons/Header');
+require('@bigbinary/neeto-icons/Location');
+require('@bigbinary/neeto-icons/LongText');
+require('@bigbinary/neeto-icons/MessageSquare');
+require('@bigbinary/neeto-icons/NeetoInvisible');
+require('@bigbinary/neeto-icons/PhoneRing');
+require('@bigbinary/neeto-icons/Radio');
+require('@bigbinary/neeto-icons/Rating');
+require('@bigbinary/neeto-icons/Scale');
+require('@bigbinary/neeto-icons/Sms');
+require('@bigbinary/neeto-icons/Terms');
+require('@bigbinary/neeto-icons/TextLines');
+require('@bigbinary/neeto-icons/UserRoundedRect');
 require('dompurify');
 require('@bigbinary/neeto-icons/Plus');
 require('zustand');
@@ -313,7 +336,8 @@ var Card = function Card(_ref) {
       allQuestionKinds: allQuestionKinds,
       item: question
     }),
-    isSingular = _getActiveKindDetails.isSingular;
+    isSingular = _getActiveKindDetails.isSingular,
+    KindIcon = _getActiveKindDetails.icon;
   var questionLabel = yup.buildDisplayLabel(question);
   React.useEffect(function () {
     var element = questionLabelRef.current;
@@ -321,68 +345,66 @@ var Card = function Card(_ref) {
     setIsTooltipEnabled(yup.isElementOverflowing(element));
   }, [questionLabel]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: "flex items-center gap-0.5",
-    children: [canManageQuestions && /*#__PURE__*/jsxRuntime.jsx(yup.Drag, {
-      className: "neeto-ui-text-gray-400 hover:neeto-ui-text-gray-500 transition-all ease-in-out duration-300 shrink-0 cursor-grab -ml-1",
-      size: 16
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-      "data-testid": "neeto-form-engine-".concat(neetoCist.slugify(questionLabel)),
-      className: classnames("neeto-ui-rounded neeto-ui-border-gray-300 neeto-ui-bg-white neeto-form-nano-form__card flex h-10 grow items-center justify-between gap-1 border p-2 overflow-hidden", {
-        "neeto-ui-border-primary-500 neeto-form-nano-form__card--active": isActive
-      }),
-      onClick: function onClick() {
-        return onSelect(question);
-      },
-      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex min-w-0 grow items-center gap-1",
-        children: /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
-          content: questionLabel,
-          disabled: !isTooltipEnabled,
-          position: "top",
-          children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
-            className: "line-clamp-2 min-w-0 grow truncate break-words",
-            "data-testid": "".concat(neetoCist.slugify(questionLabel), "-question-card-label"),
-            lineHeight: "snug",
-            ref: questionLabelRef,
-            style: "body2",
-            weight: "medium",
-            children: questionLabel
-          })
+    "data-testid": "neeto-form-engine-".concat(neetoCist.slugify(questionLabel)),
+    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 gap-2 overflow-hidden border p-2", {
+      "neeto-ui-border-primary-500 neeto-form-nano-form__card--active": isActive
+    }),
+    onClick: function onClick() {
+      return onSelect(question);
+    },
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex min-w-0 grow items-center gap-2",
+      children: [KindIcon && /*#__PURE__*/jsxRuntime.jsx(KindIcon, {
+        className: "neeto-ui-text-gray-600 shrink-0",
+        "data-testid": "question-card-kind-icon",
+        size: 16
+      }), /*#__PURE__*/jsxRuntime.jsx(Tooltip, {
+        content: questionLabel,
+        disabled: !isTooltipEnabled,
+        position: "top",
+        children: /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "min-w-0 grow truncate",
+          "data-testid": "".concat(neetoCist.slugify(questionLabel), "-question-card-label"),
+          lineHeight: "snug",
+          ref: questionLabelRef,
+          style: "body2",
+          weight: "medium",
+          children: questionLabel
         })
-      }), canManageQuestions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
-        dropdownButtonProps: {
-          className: "shrink-0"
-        },
-        dropdownProps: {
-          strategy: "fixed"
-        },
-        menuItems: [{
-          "data-testid": "edit-question",
-          key: "edit",
-          label: t("neetoForm.common.edit"),
-          onClick: onEdit
-        }, {
-          "data-testid": "clone-question",
-          key: "clone",
-          label: t("neetoForm.common.clone"),
-          isVisible: !isSingular && index.isFunction(onClone),
-          onClick: onClone
-        }].concat(_toConsumableArray(extraMenuItems), [{
-          "data-testid": "delete-question",
-          key: "delete",
-          label: t("neetoForm.common.delete"),
-          isVisible: index.isFunction(onDelete),
-          onClick: function onClick() {
-            return onDelete(question);
-          }
-        }])
       })]
+    }), canManageQuestions && /*#__PURE__*/jsxRuntime.jsx(MoreDropdown, {
+      dropdownButtonProps: {
+        className: "shrink-0"
+      },
+      dropdownProps: {
+        strategy: "fixed"
+      },
+      menuItems: [{
+        "data-testid": "edit-question",
+        key: "edit",
+        label: t("neetoForm.common.edit"),
+        onClick: onEdit
+      }, {
+        "data-testid": "clone-question",
+        key: "clone",
+        label: t("neetoForm.common.clone"),
+        isVisible: !isSingular && index.isFunction(onClone),
+        onClick: onClone
+      }].concat(_toConsumableArray(extraMenuItems), [{
+        "data-testid": "delete-question",
+        key: "delete",
+        label: t("neetoForm.common.delete"),
+        isVisible: index.isFunction(onDelete),
+        onClick: function onClick() {
+          return onDelete(question);
+        }
+      }])
     })]
   });
 };
 
-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), true).forEach(function (r) { _defineProperty(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$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), true).forEach(function (r) { _defineProperty(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 Questions = function Questions(_ref) {
   var questions = _ref.questions,
     isDeletable = _ref.isDeletable,
@@ -402,7 +424,7 @@ var Questions = function Questions(_ref) {
       var droppableProps = _ref2.droppableProps,
         placeholder = _ref2.placeholder,
         innerRef = _ref2.innerRef;
-      return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$i(_objectSpread$i({}, droppableProps), {}, {
+      return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$j(_objectSpread$j({}, droppableProps), {}, {
         className: "space-y-2",
         ref: innerRef,
         children: [questions.map(function (question, index) {
@@ -417,20 +439,30 @@ var Questions = function Questions(_ref) {
             var draggableProps = _ref3.draggableProps,
               dragHandleProps = _ref3.dragHandleProps,
               innerRef = _ref3.innerRef;
-            return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread$i(_objectSpread$i(_objectSpread$i({}, draggableProps), dragHandleProps), {}, {
+            return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread$j(_objectSpread$j({}, draggableProps), {}, {
+              className: "flex items-center gap-1",
               ref: innerRef,
-              children: /*#__PURE__*/jsxRuntime.jsx(Card, {
-                allQuestionKinds: allQuestionKinds,
-                canManageQuestions: canManageQuestions,
-                getActiveKindDetails: getActiveKindDetails,
-                onClone: onClone,
-                onEdit: onEdit,
-                onSelect: onSelect,
-                question: question,
-                extraMenuItems: (_getQuestionMenuExtra = getQuestionMenuExtras === null || getQuestionMenuExtras === void 0 ? void 0 : getQuestionMenuExtras(question)) !== null && _getQuestionMenuExtra !== void 0 ? _getQuestionMenuExtra : [],
-                isActive: ramda.equals(selectedQuestion, question),
-                onDelete: isDeletable(question) && onDelete
-              })
+              children: [canManageQuestions && /*#__PURE__*/jsxRuntime.jsx("span", _objectSpread$j(_objectSpread$j({}, dragHandleProps), {}, {
+                className: "neeto-ui-text-gray-400 hover:neeto-ui-text-gray-500 shrink-0 cursor-grab transition-all duration-300 ease-in-out",
+                "data-testid": "question-card-drag-handle",
+                children: /*#__PURE__*/jsxRuntime.jsx(Equals, {
+                  size: 16
+                })
+              })), /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: "min-w-0 grow",
+                children: /*#__PURE__*/jsxRuntime.jsx(Card, {
+                  allQuestionKinds: allQuestionKinds,
+                  canManageQuestions: canManageQuestions,
+                  getActiveKindDetails: getActiveKindDetails,
+                  onClone: onClone,
+                  onEdit: onEdit,
+                  onSelect: onSelect,
+                  question: question,
+                  extraMenuItems: (_getQuestionMenuExtra = getQuestionMenuExtras === null || getQuestionMenuExtras === void 0 ? void 0 : getQuestionMenuExtras(question)) !== null && _getQuestionMenuExtra !== void 0 ? _getQuestionMenuExtra : [],
+                  isActive: ramda.equals(selectedQuestion, question),
+                  onDelete: isDeletable(question) && onDelete
+                })
+              })]
             }));
           });
         }), placeholder]
@@ -452,8 +484,8 @@ var arrayHelpers = {
 };
 
 var _excluded$b = ["fields"];
-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), true).forEach(function (r) { _defineProperty(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$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), true).forEach(function (r) { _defineProperty(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 isChoiceQuestion = function isChoiceQuestion(question) {
   return ramda.includes(question === null || question === void 0 ? void 0 : question.kind, yup.SELECTABLE_KINDS);
 };
@@ -538,7 +570,7 @@ var handleFieldDragEnd = function handleFieldDragEnd(_ref4) {
   var nextItems = _toConsumableArray(items);
   arrayHelpers.moveItem(nextItems, source.index, destination.index);
   var orderedItems = nextItems.map(function (item, index) {
-    return _objectSpread$h(_objectSpread$h({}, item), {}, {
+    return _objectSpread$i(_objectSpread$i({}, item), {}, {
       displayOrder: index
     });
   });
@@ -560,7 +592,7 @@ var createFieldData = function createFieldData(_ref5) {
     selectedLanguage: selectedLanguage,
     isUsingDefaultQuestionKinds: isUsingDefaultQuestionKinds
   });
-  return _objectSpread$h(_objectSpread$h(_objectSpread$h({}, modifiedDefaultValues), {}, {
+  return _objectSpread$i(_objectSpread$i(_objectSpread$i({}, modifiedDefaultValues), {}, {
     metadata: metadata
   }, typeof isRequired === "boolean" && {
     isRequired: isRequired
@@ -592,7 +624,7 @@ var duplicateFieldData = function duplicateFieldData(_ref6) {
   var newQuestionLabel = yup.isRichTextQuestion(kind) ? label : i18next.t("neetoForm.common.clonedElementLabel", {
     label: label
   });
-  return _objectSpread$h(_objectSpread$h({}, defaultAttributes), {}, {
+  return _objectSpread$i(_objectSpread$i({}, defaultAttributes), {}, {
     isRequired: isRequired,
     kind: kind,
     label: newQuestionLabel,
@@ -705,9 +737,34 @@ var useHelpDoc = function useHelpDoc(key) {
   return buildForm.useBuildFormStore(ramda.path(["formState", "helpDocUrls", key]));
 };
 
+var KindOption = function KindOption(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    Icon = _ref.icon;
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "flex items-start gap-2",
+    children: [Icon && /*#__PURE__*/jsxRuntime.jsx(Icon, {
+      className: "neeto-ui-text-gray-700 mt-0.5 shrink-0",
+      "data-testid": "kind-option-icon",
+      size: 16
+    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex min-w-0 flex-col",
+      children: [/*#__PURE__*/jsxRuntime.jsx(Typography, {
+        style: "body2",
+        children: label
+      }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+        className: "neeto-ui-text-gray-600 mt-0.5",
+        "data-testid": "kind-option-description",
+        style: "body3",
+        children: description
+      })]
+    })]
+  });
+};
+
 var _excluded$a = ["label", "name"];
-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), true).forEach(function (r) { _defineProperty(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$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), true).forEach(function (r) { _defineProperty(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; }
 var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   var label = _ref.label,
     name = _ref.name,
@@ -726,7 +783,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     var end = element.value.length;
     element.setSelectionRange(end, end);
   };
-  return /*#__PURE__*/jsxRuntime.jsx(Textarea$1, _objectSpread$g({
+  return /*#__PURE__*/jsxRuntime.jsx(Textarea$1, _objectSpread$h({
     label: label,
     name: name,
     className: "neeto-form-nano-adaptive-input",
@@ -740,8 +797,8 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
   }, otherProps));
 };
 
-function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(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), true).forEach(function (r) { _defineProperty(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 LabelWithPlaceholder = function LabelWithPlaceholder(_ref) {
   var kind = _ref.kind,
     isLabelDisabled = _ref.isLabelDisabled,
@@ -755,14 +812,14 @@ var LabelWithPlaceholder = function LabelWithPlaceholder(_ref) {
   var shouldShowPlaceholder = ramda.includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "space-y-4",
-    children: [/*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, _objectSpread$f({
+    children: [/*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, _objectSpread$g({
       required: true,
       disabled: isLabelDisabled,
       label: t("neetoForm.questions.common.questionFields.field.question"),
       name: "label",
       placeholder: DEFAULT_PLACEHOLDERS[kind],
       onChange: utils.withEventTargetValue(handleLabelChange)
-    }, labelProps)), shouldShowPlaceholder && /*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, _objectSpread$f({
+    }, labelProps)), shouldShowPlaceholder && /*#__PURE__*/jsxRuntime.jsx(FormikAdaptiveInput, _objectSpread$g({
       className: "neeto-form-nano-placeholder-input neeto-form-nano-placeholder-input-".concat(kind),
       name: "placeholder",
       label: t("neetoForm.questions.common.questionFields.field.placeholder")
@@ -770,8 +827,8 @@ var LabelWithPlaceholder = function LabelWithPlaceholder(_ref) {
   });
 };
 
-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), true).forEach(function (r) { _defineProperty(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; }
+function ownKeys$f(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$f(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$f(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$f(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Name = function Name(_ref) {
   var isLabelDisabled = _ref.isLabelDisabled,
     _handleLabelChange = _ref.handleLabelChange;
@@ -791,7 +848,7 @@ var Name = function Name(_ref) {
       label: t("neetoForm.common.splitAsFirstAndLastNames"),
       name: "isSplitMode"
     }), isSplitMode && !usesCustomSubmissionComponent ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$e(_objectSpread$e({}, commonProps), {}, {
+      children: [/*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$f(_objectSpread$f({}, commonProps), {}, {
         handleLabelChange: function handleLabelChange(value) {
           return _handleLabelChange(value, yup.LABEL_FIELDS.FIRST_NAME);
         },
@@ -803,7 +860,7 @@ var Name = function Name(_ref) {
           label: t("neetoForm.questions.common.questionFields.field.firstNamePlaceholder"),
           name: "firstNamePlaceholder"
         }
-      })), /*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$e(_objectSpread$e({}, commonProps), {}, {
+      })), /*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$f(_objectSpread$f({}, commonProps), {}, {
         handleLabelChange: function handleLabelChange(value) {
           return _handleLabelChange(value, yup.LABEL_FIELDS.LAST_NAME);
         },
@@ -816,7 +873,7 @@ var Name = function Name(_ref) {
           name: "lastNamePlaceholder"
         }
       }))]
-    }) : /*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$e(_objectSpread$e({}, commonProps), {}, {
+    }) : /*#__PURE__*/jsxRuntime.jsx(LabelWithPlaceholder, _objectSpread$f(_objectSpread$f({}, commonProps), {}, {
       labelProps: {
         name: yup.LABEL_FIELDS.FULL_NAME
       },
@@ -961,8 +1018,8 @@ var RequiredSwitch = reactUtils.withT(function (_ref) {
 });
 
 var _excluded$9 = ["maxLength"];
-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), true).forEach(function (r) { _defineProperty(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; }
+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), true).forEach(function (r) { _defineProperty(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 InputWithMaxLength = function InputWithMaxLength(_ref) {
   var maxLength = _ref.maxLength,
     props = _objectWithoutProperties(_ref, _excluded$9);
@@ -976,7 +1033,7 @@ var InputWithMaxLength = function InputWithMaxLength(_ref) {
     }
   }, [value, maxLength, setValue]);
   var shouldShowMaxLength = value && value.length > maxLength - 10;
-  return /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$d(_objectSpread$d({}, props), shouldShowMaxLength && {
+  return /*#__PURE__*/jsxRuntime.jsx(Input, _objectSpread$e(_objectSpread$e({}, props), shouldShowMaxLength && {
     maxLength: maxLength
   }));
 };
@@ -1036,6 +1093,8 @@ var Textarea = function Textarea() {
   });
 };
 
+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), true).forEach(function (r) { _defineProperty(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 Form$1 = function Form(_ref) {
   var questions = _ref.questions,
     initialFocusRef = _ref.initialFocusRef,
@@ -1157,10 +1216,15 @@ var Form$1 = function Form(_ref) {
         isClearable: true,
         isSearchable: true,
         defaultValue: buildDefaultValueForKind(questionKind),
+        filterOption: filterKindOption,
         innerRef: initialFocusRef,
         isDisabled: isEdit,
         name: "kind",
         options: buildKindOptions(questionKinds),
+        formatOptionLabel: function formatOptionLabel(option, _ref3) {
+          var context = _ref3.context;
+          return context === "menu" ? /*#__PURE__*/jsxRuntime.jsx(KindOption, _objectSpread$d({}, option)) : option.label;
+        },
         label: t("neetoForm.questions.common.questionFields.field.questionType"),
         onChange: handleKindChange
       }), yup.isRichTextQuestion(kind) ? /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -2665,16 +2729,31 @@ var getQuestionKind = function getQuestionKind(questionKinds, pattern) {
 var buildKindOptions = function buildKindOptions(kinds) {
   return kinds.map(function (_ref3) {
     var label = _ref3.label,
-      type = _ref3.type;
+      type = _ref3.type,
+      icon = _ref3.icon,
+      description = _ref3.description,
+      searchTerms = _ref3.searchTerms;
     return {
       label: label,
       value: transformValueForOption({
         label: label,
         type: type
-      })
+      }),
+      icon: icon,
+      description: description,
+      searchTerms: searchTerms
     };
   });
 };
+var filterKindOption = function filterKindOption(option, rawInput) {
+  var _option$data$searchTe, _option$data;
+  var query = rawInput === null || rawInput === void 0 ? void 0 : rawInput.trim().toLowerCase();
+  if (!query) return true;
+  var searchTerms = (_option$data$searchTe = (_option$data = option.data) === null || _option$data === void 0 ? void 0 : _option$data.searchTerms) !== null && _option$data$searchTe !== void 0 ? _option$data$searchTe : [];
+  return searchTerms.some(function (term) {
+    return term.includes(query);
+  });
+};
 var extractKindFromOption = ramda.pipe(ramda.split("-"), ramda.last);
 var buildDefaultValueForKind = function buildDefaultValueForKind(questionKind) {
   return neetoCist.isPresent(questionKind) ? {