@bigbinary/neeto-form-frontend 4.4.17 → 4.4.19

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-COZendlM.js');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var dnd = require('@hello-pangea/dnd');
@@ -23,9 +23,9 @@ 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 _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var index = require('../index-Beo6ztaM.js');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var i18next = require('i18next');
 var uuid = require('uuid');
 var NoData = require('@bigbinary/neetoui/NoData');
@@ -60,6 +60,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');
@@ -299,7 +321,9 @@ var Card = function Card(_ref) {
     onEdit = _ref.onEdit,
     onClone = _ref.onClone,
     onDelete = _ref.onDelete,
-    canManageQuestions = _ref.canManageQuestions;
+    canManageQuestions = _ref.canManageQuestions,
+    _ref$extraMenuItems = _ref.extraMenuItems,
+    extraMenuItems = _ref$extraMenuItems === void 0 ? [] : _ref$extraMenuItems;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTooltipEnabled = _useState2[0],
@@ -365,7 +389,7 @@ var Card = function Card(_ref) {
           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"),
@@ -373,19 +397,20 @@ var Card = function Card(_ref) {
           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,
     allQuestionKinds = _ref.allQuestionKinds,
     getActiveKindDetails = _ref.getActiveKindDetails,
+    getQuestionMenuExtras = _ref.getQuestionMenuExtras,
     selectedQuestion = _ref.selectedQuestion,
     onEdit = _ref.onEdit,
     onClone = _ref.onClone,
@@ -399,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) {
@@ -410,10 +435,11 @@ var Questions = function Questions(_ref) {
             isDragDisabled: !canManageQuestions,
             key: "question-".concat((_question$id2 = question.id) !== null && _question$id2 !== void 0 ? _question$id2 : question.nodeId)
           }, function (_ref3) {
+            var _getQuestionMenuExtra;
             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.jsx("div", _objectSpread$j(_objectSpread$j(_objectSpread$j({}, draggableProps), dragHandleProps), {}, {
               ref: innerRef,
               children: /*#__PURE__*/jsxRuntime.jsx(Card, {
                 allQuestionKinds: allQuestionKinds,
@@ -423,6 +449,7 @@ var Questions = function Questions(_ref) {
                 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
               })
@@ -447,8 +474,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);
 };
@@ -533,7 +560,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
     });
   });
@@ -555,7 +582,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
@@ -587,7 +614,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,
@@ -700,9 +727,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,
@@ -721,7 +773,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",
@@ -735,8 +787,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,
@@ -750,14 +802,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")
@@ -765,8 +817,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;
@@ -786,7 +838,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);
         },
@@ -798,7 +850,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);
         },
@@ -811,7 +863,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
       },
@@ -956,8 +1008,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);
@@ -971,7 +1023,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
   }));
 };
@@ -1031,6 +1083,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,
@@ -1152,10 +1206,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, {
@@ -2660,16 +2719,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) ? {
@@ -2811,7 +2885,8 @@ var Form = function Form(_ref) {
     questionsFromCache = _ref.questionsFromCache,
     onMutateSuccess = _ref.onMutateSuccess,
     advancedFeatures = _ref.advancedFeatures,
-    isPictureChoiceEnabled = _ref.isPictureChoiceEnabled;
+    isPictureChoiceEnabled = _ref.isPictureChoiceEnabled,
+    getQuestionMenuExtras = _ref.getQuestionMenuExtras;
   var containerRef = React.useRef();
   var _useStateWithDependen = reactUtils.useStateWithDependency(questionsFromCache),
     _useStateWithDependen2 = _slicedToArray(_useStateWithDependen, 2),
@@ -3000,6 +3075,7 @@ var Form = function Form(_ref) {
             children: /*#__PURE__*/jsxRuntime.jsx(Questions, {
               canManageQuestions: canManageQuestions,
               getActiveKindDetails: getActiveKindDetails,
+              getQuestionMenuExtras: getQuestionMenuExtras,
               isDeletable: isDeletable,
               questions: questions,
               selectedQuestion: selectedQuestion,
@@ -3085,7 +3161,8 @@ var BuildForm = function BuildForm(_ref) {
     _ref$canManageQuestio = _ref.canManageQuestions,
     canManageQuestions = _ref$canManageQuestio === void 0 ? false : _ref$canManageQuestio,
     _ref$isPictureChoiceE = _ref.isPictureChoiceEnabled,
-    isPictureChoiceEnabled = _ref$isPictureChoiceE === void 0 ? false : _ref$isPictureChoiceE;
+    isPictureChoiceEnabled = _ref$isPictureChoiceE === void 0 ? false : _ref$isPictureChoiceE,
+    getQuestionMenuExtras = _ref.getQuestionMenuExtras;
   var queryClient = reactQuery.useQueryClient();
   var _useForm = constants.useForm({
       formId: id,
@@ -3132,6 +3209,7 @@ var BuildForm = function BuildForm(_ref) {
       formDescription: formDescription,
       formTitle: formTitle,
       getActiveKindDetails: getActiveKindDetails,
+      getQuestionMenuExtras: getQuestionMenuExtras,
       helpDocUrls: helpDocUrls,
       hostSpecificData: hostSpecificData,
       isDisabledFieldLabel: isDisabledFieldLabel,