@bigbinary/neeto-form-frontend 4.4.18 → 4.4.20

package/dist/BuildForm.js

@@ -4,7 +4,7 @@ import { isPresent, truncate, findBy, isNotPresent, slugify, existsBy, findById,
 import Spinner from '@bigbinary/neetoui/Spinner';
 import { equals, path, when, assoc, includes, isEmpty, reject, keys, pick, omit, evolve, map, mergeLeft, isNil, pipe, filter, isNotNil, values, uniq, join, pathSatisfies, assocPath, dissoc, append, pluck, test, paths, difference, prop, startsWith, split, last, either, F, T } from 'ramda';
 import { k as useDeleteQuestion, Q as QUESTION_TYPES, b as useForm, l as useCreateQuestion, m as useUpdateQuestion, C as CAPTCHA_TYPES, n as useReorderQuestions, i as QUERY_KEYS } from './constants-Cj0XxE8a.js';
-import { j as QUESTION_ACTIONS, k as INDEPENDENT_LABELS_MAP, l as buildDisplayLabel, m as isElementOverflowing, n as Drag, o as SELECTABLE_KINDS, p as isAutoGeneratedQuestion, q as isRichTextQuestion, r as SPOT_QUESTION_FIELD_CODE, N as NON_BASIC_LATIN_CHARACTERS_REGEX, s as RESERVED_FIELD_CODES, t as renameKey, f as LABEL_FIELDS, u as isDefaultLanguage, v as buildAddQuestionButtonProps, w as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, M as MIN_WORDS_SWITCH_LABEL_PROPS, x as MIN_WORDS, y as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, z as NON_HIDEABLE_FIELDS, B as NON_READ_ONLY_FIELDS, O as OPINION_LABEL_MAX_LENGTH, G as RICH_TEXT_QUESTIONS, e as ADDRESS_FIELD_WIDTHS, A as ADDRESS_FIELD_TYPES, H as generateDefaultOptions, J as MINIMUM_ADDRESS_FIELDS, K as getDeletedRecords, T as randomId, U as getActiveRecords, V as FILE_TYPES_MAP, W as FILE_GROUPS, X as OPINION_SCALE_MIN_VALUE_OPTIONS, Y as OPINION_SCALE_MAX_VALUE_OPTIONS, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, Z as MINIMUM_OPTIONS, _ as IMAGE_HEIGHT_SLIDER_DEFAULTS, $ as RATING_OPTIONS, a0 as STAR_RATING_MIN_VALUE_OPTIONS, a1 as STAR_RATING_MAX_VALUE_OPTIONS, a2 as STAR_RATING_ICONS_MAP, a3 as buildDisabledAddButtonHelpPopoverProps, a4 as buildReorderPayload, a5 as QUESTIONS_INITIAL_VALUE, a6 as isMandatoryField, a7 as QUESTION_KINDS, a as QUESTION_KIND, a8 as getActiveQuestionKindDetails, a9 as DEFAULT_AVAILABLE_LANGUAGES, aa as DEFAULT_ADVANCED_FEATURES } from './yup-B3JGBWm7.js';
+import { j as QUESTION_ACTIONS, k as INDEPENDENT_LABELS_MAP, l as buildDisplayLabel, m as isElementOverflowing, n as SELECTABLE_KINDS, o as isAutoGeneratedQuestion, p as isRichTextQuestion, q as SPOT_QUESTION_FIELD_CODE, N as NON_BASIC_LATIN_CHARACTERS_REGEX, r as RESERVED_FIELD_CODES, s as renameKey, f as LABEL_FIELDS, t as isDefaultLanguage, u as buildAddQuestionButtonProps, v as validateEditorContent, F as FIELD_CODES_REJECT_CHARS_REGEX, M as MIN_WORDS_SWITCH_LABEL_PROPS, w as MIN_WORDS, x as isImmutableField, Q as QUESTIONS_WITHOUT_FIELD_CODE, y as NON_HIDEABLE_FIELDS, z as NON_READ_ONLY_FIELDS, O as OPINION_LABEL_MAX_LENGTH, B as RICH_TEXT_QUESTIONS, e as ADDRESS_FIELD_WIDTHS, A as ADDRESS_FIELD_TYPES, G as generateDefaultOptions, H as MINIMUM_ADDRESS_FIELDS, J as getDeletedRecords, K as randomId, T as getActiveRecords, U as FILE_TYPES_MAP, V as FILE_GROUPS, W as OPINION_SCALE_MIN_VALUE_OPTIONS, X as OPINION_SCALE_MAX_VALUE_OPTIONS, D as DEFAULT_CHOICE_QUESTION_ATTRIBUTES, Y as MINIMUM_OPTIONS, Z as IMAGE_HEIGHT_SLIDER_DEFAULTS, _ as RATING_OPTIONS, $ as STAR_RATING_MIN_VALUE_OPTIONS, a0 as STAR_RATING_MAX_VALUE_OPTIONS, a1 as STAR_RATING_ICONS_MAP, a2 as buildDisabledAddButtonHelpPopoverProps, a3 as buildReorderPayload, a4 as QUESTIONS_INITIAL_VALUE, a5 as isMandatoryField, a6 as QUESTION_KINDS, a as QUESTION_KIND, a7 as getActiveQuestionKindDetails, a8 as DEFAULT_AVAILABLE_LANGUAGES, a9 as DEFAULT_ADVANCED_FEATURES } from './yup-bkiiTZT4.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef, useEffect, createElement } from 'react';
 import { Droppable, Draggable, DragDropContext } from '@hello-pangea/dnd';
@@ -21,6 +21,7 @@ import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import Equals from '@bigbinary/neeto-icons/Equals';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { i as isFunction, f as fieldWithFallback, c as isNameQuestion } from './index-DhtQJpD_.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -58,6 +59,28 @@ import Slider from '@bigbinary/neetoui/Slider';
 import HelpPopover from '@bigbinary/neeto-molecules/HelpPopover';
 import '@bigbinary/neeto-commons-frontend/constants';
 import 'axios';
+import '@bigbinary/neeto-icons/Address';
+import '@bigbinary/neeto-icons/Calendar';
+import '@bigbinary/neeto-icons/Captcha';
+import '@bigbinary/neeto-icons/Checkbox';
+import '@bigbinary/neeto-icons/DropdownClosed';
+import '@bigbinary/neeto-icons/Email';
+import '@bigbinary/neeto-icons/FileUpload';
+import '@bigbinary/neeto-icons/Group';
+import '@bigbinary/neeto-icons/Hash';
+import '@bigbinary/neeto-icons/Header';
+import '@bigbinary/neeto-icons/Location';
+import '@bigbinary/neeto-icons/LongText';
+import '@bigbinary/neeto-icons/MessageSquare';
+import '@bigbinary/neeto-icons/NeetoInvisible';
+import '@bigbinary/neeto-icons/PhoneRing';
+import '@bigbinary/neeto-icons/Radio';
+import '@bigbinary/neeto-icons/Rating';
+import '@bigbinary/neeto-icons/Scale';
+import '@bigbinary/neeto-icons/Sms';
+import '@bigbinary/neeto-icons/Terms';
+import '@bigbinary/neeto-icons/TextLines';
+import '@bigbinary/neeto-icons/UserRoundedRect';
 import 'dompurify';
 import '@bigbinary/neeto-icons/Plus';
 import 'zustand';
@@ -292,7 +315,8 @@ var Card = function Card(_ref) {
       allQuestionKinds: allQuestionKinds,
       item: question
     }),
-    isSingular = _getActiveKindDetails.isSingular;
+    isSingular = _getActiveKindDetails.isSingular,
+    KindIcon = _getActiveKindDetails.icon;
   var questionLabel = buildDisplayLabel(question);
   useEffect(function () {
     var element = questionLabelRef.current;
@@ -300,68 +324,66 @@ var Card = function Card(_ref) {
     setIsTooltipEnabled(isElementOverflowing(element));
   }, [questionLabel]);
   return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center gap-0.5",
-    children: [canManageQuestions && /*#__PURE__*/jsx(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__*/jsxs("div", {
-      "data-testid": "neeto-form-engine-".concat(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__*/jsx("div", {
-        className: "flex min-w-0 grow items-center gap-1",
-        children: /*#__PURE__*/jsx(Tooltip, {
-          content: questionLabel,
-          disabled: !isTooltipEnabled,
-          position: "top",
-          children: /*#__PURE__*/jsx(Typography, {
-            className: "line-clamp-2 min-w-0 grow truncate break-words",
-            "data-testid": "".concat(slugify(questionLabel), "-question-card-label"),
-            lineHeight: "snug",
-            ref: questionLabelRef,
-            style: "body2",
-            weight: "medium",
-            children: questionLabel
-          })
+    "data-testid": "neeto-form-engine-".concat(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__*/jsxs("div", {
+      className: "flex min-w-0 grow items-center gap-2",
+      children: [KindIcon && /*#__PURE__*/jsx(KindIcon, {
+        className: "neeto-ui-text-gray-600 shrink-0",
+        "data-testid": "question-card-kind-icon",
+        size: 16
+      }), /*#__PURE__*/jsx(Tooltip, {
+        content: questionLabel,
+        disabled: !isTooltipEnabled,
+        position: "top",
+        children: /*#__PURE__*/jsx(Typography, {
+          className: "min-w-0 grow truncate",
+          "data-testid": "".concat(slugify(questionLabel), "-question-card-label"),
+          lineHeight: "snug",
+          ref: questionLabelRef,
+          style: "body2",
+          weight: "medium",
+          children: questionLabel
         })
-      }), canManageQuestions && /*#__PURE__*/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 && isFunction(onClone),
-          onClick: onClone
-        }].concat(_toConsumableArray(extraMenuItems), [{
-          "data-testid": "delete-question",
-          key: "delete",
-          label: t("neetoForm.common.delete"),
-          isVisible: isFunction(onDelete),
-          onClick: function onClick() {
-            return onDelete(question);
-          }
-        }])
       })]
+    }), canManageQuestions && /*#__PURE__*/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 && isFunction(onClone),
+        onClick: onClone
+      }].concat(_toConsumableArray(extraMenuItems), [{
+        "data-testid": "delete-question",
+        key: "delete",
+        label: t("neetoForm.common.delete"),
+        isVisible: 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,
@@ -381,7 +403,7 @@ var Questions = function Questions(_ref) {
       var droppableProps = _ref2.droppableProps,
         placeholder = _ref2.placeholder,
         innerRef = _ref2.innerRef;
-      return /*#__PURE__*/jsxs("div", _objectSpread$i(_objectSpread$i({}, droppableProps), {}, {
+      return /*#__PURE__*/jsxs("div", _objectSpread$j(_objectSpread$j({}, droppableProps), {}, {
         className: "space-y-2",
         ref: innerRef,
         children: [questions.map(function (question, index) {
@@ -396,20 +418,30 @@ var Questions = function Questions(_ref) {
             var draggableProps = _ref3.draggableProps,
               dragHandleProps = _ref3.dragHandleProps,
               innerRef = _ref3.innerRef;
-            return /*#__PURE__*/jsx("div", _objectSpread$i(_objectSpread$i(_objectSpread$i({}, draggableProps), dragHandleProps), {}, {
+            return /*#__PURE__*/jsxs("div", _objectSpread$j(_objectSpread$j({}, draggableProps), {}, {
+              className: "flex items-center gap-1",
               ref: innerRef,
-              children: /*#__PURE__*/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: equals(selectedQuestion, question),
-                onDelete: isDeletable(question) && onDelete
-              })
+              children: [canManageQuestions && /*#__PURE__*/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__*/jsx(Equals, {
+                  size: 16
+                })
+              })), /*#__PURE__*/jsx("div", {
+                className: "min-w-0 grow",
+                children: /*#__PURE__*/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: equals(selectedQuestion, question),
+                  onDelete: isDeletable(question) && onDelete
+                })
+              })]
             }));
           });
         }), placeholder]
@@ -431,8 +463,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 includes(question === null || question === void 0 ? void 0 : question.kind, SELECTABLE_KINDS);
 };
@@ -517,7 +549,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
     });
   });
@@ -539,7 +571,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
@@ -571,7 +603,7 @@ var duplicateFieldData = function duplicateFieldData(_ref6) {
   var newQuestionLabel = isRichTextQuestion(kind) ? label : t("neetoForm.common.clonedElementLabel", {
     label: label
   });
-  return _objectSpread$h(_objectSpread$h({}, defaultAttributes), {}, {
+  return _objectSpread$i(_objectSpread$i({}, defaultAttributes), {}, {
     isRequired: isRequired,
     kind: kind,
     label: newQuestionLabel,
@@ -684,9 +716,34 @@ var useHelpDoc = function useHelpDoc(key) {
   return useBuildFormStore(path(["formState", "helpDocUrls", key]));
 };
 
+var KindOption = function KindOption(_ref) {
+  var label = _ref.label,
+    description = _ref.description,
+    Icon = _ref.icon;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-start gap-2",
+    children: [Icon && /*#__PURE__*/jsx(Icon, {
+      className: "neeto-ui-text-gray-700 mt-0.5 shrink-0",
+      "data-testid": "kind-option-icon",
+      size: 16
+    }), /*#__PURE__*/jsxs("div", {
+      className: "flex min-w-0 flex-col",
+      children: [/*#__PURE__*/jsx(Typography, {
+        style: "body2",
+        children: label
+      }), description && /*#__PURE__*/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,
@@ -705,7 +762,7 @@ var FormikAdaptiveInput = function FormikAdaptiveInput(_ref) {
     var end = element.value.length;
     element.setSelectionRange(end, end);
   };
-  return /*#__PURE__*/jsx(Textarea$1, _objectSpread$g({
+  return /*#__PURE__*/jsx(Textarea$1, _objectSpread$h({
     label: label,
     name: name,
     className: "neeto-form-nano-adaptive-input",
@@ -719,8 +776,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,
@@ -734,14 +791,14 @@ var LabelWithPlaceholder = function LabelWithPlaceholder(_ref) {
   var shouldShowPlaceholder = includes(kind, QUESTIONS_WITH_PLACEHOLDERS);
   return /*#__PURE__*/jsxs("div", {
     className: "space-y-4",
-    children: [/*#__PURE__*/jsx(FormikAdaptiveInput, _objectSpread$f({
+    children: [/*#__PURE__*/jsx(FormikAdaptiveInput, _objectSpread$g({
       required: true,
       disabled: isLabelDisabled,
       label: t("neetoForm.questions.common.questionFields.field.question"),
       name: "label",
       placeholder: DEFAULT_PLACEHOLDERS[kind],
       onChange: withEventTargetValue(handleLabelChange)
-    }, labelProps)), shouldShowPlaceholder && /*#__PURE__*/jsx(FormikAdaptiveInput, _objectSpread$f({
+    }, labelProps)), shouldShowPlaceholder && /*#__PURE__*/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")
@@ -749,8 +806,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;
@@ -770,7 +827,7 @@ var Name = function Name(_ref) {
       label: t("neetoForm.common.splitAsFirstAndLastNames"),
       name: "isSplitMode"
     }), isSplitMode && !usesCustomSubmissionComponent ? /*#__PURE__*/jsxs(Fragment, {
-      children: [/*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$e(_objectSpread$e({}, commonProps), {}, {
+      children: [/*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$f(_objectSpread$f({}, commonProps), {}, {
         handleLabelChange: function handleLabelChange(value) {
           return _handleLabelChange(value, LABEL_FIELDS.FIRST_NAME);
         },
@@ -782,7 +839,7 @@ var Name = function Name(_ref) {
           label: t("neetoForm.questions.common.questionFields.field.firstNamePlaceholder"),
           name: "firstNamePlaceholder"
         }
-      })), /*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$e(_objectSpread$e({}, commonProps), {}, {
+      })), /*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$f(_objectSpread$f({}, commonProps), {}, {
         handleLabelChange: function handleLabelChange(value) {
           return _handleLabelChange(value, LABEL_FIELDS.LAST_NAME);
         },
@@ -795,7 +852,7 @@ var Name = function Name(_ref) {
           name: "lastNamePlaceholder"
         }
       }))]
-    }) : /*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$e(_objectSpread$e({}, commonProps), {}, {
+    }) : /*#__PURE__*/jsx(LabelWithPlaceholder, _objectSpread$f(_objectSpread$f({}, commonProps), {}, {
       labelProps: {
         name: LABEL_FIELDS.FULL_NAME
       },
@@ -940,8 +997,8 @@ var RequiredSwitch = 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);
@@ -955,7 +1012,7 @@ var InputWithMaxLength = function InputWithMaxLength(_ref) {
     }
   }, [value, maxLength, setValue]);
   var shouldShowMaxLength = value && value.length > maxLength - 10;
-  return /*#__PURE__*/jsx(Input, _objectSpread$d(_objectSpread$d({}, props), shouldShowMaxLength && {
+  return /*#__PURE__*/jsx(Input, _objectSpread$e(_objectSpread$e({}, props), shouldShowMaxLength && {
     maxLength: maxLength
   }));
 };
@@ -1015,6 +1072,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,
@@ -1136,10 +1195,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__*/jsx(KindOption, _objectSpread$d({}, option)) : option.label;
+        },
         label: t("neetoForm.questions.common.questionFields.field.questionType"),
         onChange: handleKindChange
       }), isRichTextQuestion(kind) ? /*#__PURE__*/jsxs(Fragment, {
@@ -2644,16 +2708,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 = pipe(split("-"), last);
 var buildDefaultValueForKind = function buildDefaultValueForKind(questionKind) {
   return isPresent(questionKind) ? {