@bigbinary/neeto-molecules 4.0.55 → 4.0.57

package/dist/OptionFields.js

@@ -3,27 +3,29 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useState, useRef } from 'react';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { useField, FieldArray } from 'formik';
-import { isNotPresent, slugify, findIndexById, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { slugify, isNotPresent, findIndexById, isNotEmpty, noop } from '@bigbinary/neeto-cist';
 import Plus from '@bigbinary/neeto-icons/Plus';
 import Button from '@bigbinary/neetoui/Button';
-import { identity, reject, prop, pluck, clone, insert, move, assocPath, remove, append, isEmpty } from 'ramda';
+import { isEmpty, identity, reject, prop, pluck, clone, insert, move, assocPath, remove, append } from 'ramda';
 import { useTranslation, Trans } from 'react-i18next';
 import Modal from '@bigbinary/neetoui/Modal';
 import Textarea from '@bigbinary/neetoui/Textarea';
 import Typography from '@bigbinary/neetoui/Typography';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import i18next, { t } from 'i18next';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { n } from './inject-css-C2dztUxs.js';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import Edit from '@bigbinary/neeto-icons/Edit';
+import Editor from '@bigbinary/neeto-editor/Editor';
+import Checkbox$1 from '@bigbinary/neetoui/Checkbox';
 import Drag from '@bigbinary/neeto-icons/Drag';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Copy from '@bigbinary/neeto-icons/Copy';
 import Delete from '@bigbinary/neeto-icons/Delete';
-import Input from '@bigbinary/neetoui/formik/Input';
-import Textarea$1 from '@bigbinary/neetoui/formik/Textarea';
 import ImageUploader from '@bigbinary/neeto-image-uploader-frontend/ImageUploader';
 import classnames from 'classnames';
+import Input from '@bigbinary/neetoui/formik/Input';
+import Textarea$1 from '@bigbinary/neetoui/formik/Textarea';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { n } from './inject-css-C2dztUxs.js';
+import Edit from '@bigbinary/neeto-icons/Edit';
 
 var BulkOptionModal = function BulkOptionModal(_ref) {
   var isOpen = _ref.isOpen,
@@ -94,39 +96,407 @@ var BulkOptionModal = function BulkOptionModal(_ref) {
   });
 };
 
-var DEFAULT_OPTION_LABEL = i18next.t("neetoMolecules.optionFields.defaultOption");
-var IMAGE_UPLOAD_CONFIG = {
-  maxImageSize: 1,
-  allowedImageTypes: {
-    "image/jpg": [".jpg", ".jpeg"],
-    "image/png": [".png"],
-    "image/svg": [".svg"]
-  }
-};
-var INPUT_TYPES = {
-  TEXT: "text",
-  NUMBER: "number"
+var Checkbox = function Checkbox(_ref) {
+  var name = _ref.name,
+    optionIndex = _ref.optionIndex;
+  var checkboxName = name.replace(".label", ".selected");
+  var _useField = useField(checkboxName),
+    _useField2 = _slicedToArray(_useField, 3),
+    value = _useField2[0].value;
+    _useField2[1];
+    var setValue = _useField2[2].setValue;
+  return /*#__PURE__*/jsx("div", {
+    className: "flex h-8 flex-shrink-0 items-center",
+    children: /*#__PURE__*/jsx(Checkbox$1, {
+      checked: value || false,
+      "data-testid": "checkbox-option-".concat(optionIndex),
+      onChange: function onChange(e) {
+        setValue(e.target.checked);
+      }
+    })
+  });
 };
-var OPTION_ACTIONS = {
-  UPDATE_IMAGE: "update_image",
-  UPDATE_VALUES: "update_values",
-  UPDATE_LABEL: "update_label",
-  DELETE: "delete",
-  REORDER: "reorder",
-  ADD: "add",
-  BULK_ADD: "bulk_add",
-  CLONE: "clone"
+
+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), true).forEach(function (r) { _defineProperty(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 DragHandle = function DragHandle(props) {
+  return /*#__PURE__*/jsx("div", _objectSpread$8(_objectSpread$8({
+    className: "neeto-ui-text-gray-500 flex h-8 flex-shrink-0 cursor-grab items-center",
+    "data-cy": "drag-handle",
+    "data-testid": "drag-handle"
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Drag, {
+      size: 16,
+      strokeWidth: 2
+    })
+  }));
 };
 
-var FormError = function FormError(_ref) {
-  var error = _ref.error;
-  if (isNotPresent(error) || typeof error !== "string") return null;
-  return /*#__PURE__*/jsx(Typography, {
-    className: "neeto-ui-input__error",
-    "data-testid": "validation-error-container",
-    style: "body3",
-    children: error
+var OptionActions = withT(function (_ref) {
+  var t = _ref.t,
+    disabled = _ref.disabled,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    optionIndex = _ref.optionIndex,
+    id = _ref.id,
+    arrayHelpers = _ref.arrayHelpers,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/jsxs("div", {
+    className: "flex items-center gap-1 ".concat(className),
+    children: [!hideCloneOption && /*#__PURE__*/jsx(Button, {
+      disabled: disabled,
+      className: "p-0.5",
+      "data-cy": "clone-option-button-".concat(optionIndex),
+      "data-testid": "clone-option-button-".concat(optionIndex),
+      icon: Copy,
+      size: "small",
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.common.actions.clone"),
+        position: "top",
+        touch: ["hold", 500]
+      },
+      onClick: function onClick() {
+        return onClone(id);
+      }
+    }), !hideDeleteOption && /*#__PURE__*/jsx(Button, {
+      disabled: disabled,
+      className: "p-0.5",
+      "data-cy": "delete-option-button-".concat(optionIndex),
+      "data-testid": "delete-option-button-".concat(optionIndex),
+      icon: Delete,
+      size: "small",
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.common.actions.delete"),
+        position: "top",
+        touch: ["hold", 500]
+      },
+      onClick: function onClick() {
+        return onDelete(id, arrayHelpers);
+      }
+    })]
   });
+});
+
+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), true).forEach(function (r) { _defineProperty(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 EditorOption = function EditorOption(_ref) {
+  var innerRef = _ref.innerRef,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    isDraggable = _ref.isDraggable,
+    optionIndex = _ref.optionIndex,
+    isCheckboxEnabled = _ref.isCheckboxEnabled,
+    name = _ref.name,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    shouldFocus = _ref.shouldFocus,
+    _onChange = _ref.onChange,
+    _onBlur = _ref.onBlur,
+    id = _ref.id,
+    arrayHelpers = _ref.arrayHelpers,
+    hideCloneOption = _ref.hideCloneOption,
+    hideDeleteOption = _ref.hideDeleteOption,
+    onClone = _ref.onClone,
+    onDelete = _ref.onDelete;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 1),
+    field = _useField2[0];
+  return /*#__PURE__*/jsx("div", _objectSpread$7(_objectSpread$7({
+    ref: innerRef
+  }, _objectSpread$7(_objectSpread$7({}, draggableProps), dragHandleProps)), {}, {
+    "data-cy": "form-block-options",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "nf-input-options group relative mb-2 flex items-start gap-1",
+      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$7(_objectSpread$7({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), isCheckboxEnabled && /*#__PURE__*/jsx(Checkbox, {
+        name: name,
+        optionIndex: optionIndex
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex w-full items-start gap-2",
+        children: [/*#__PURE__*/jsx(Editor, {
+          disabled: disabled,
+          name: name,
+          placeholder: placeholder,
+          autoFocus: shouldFocus,
+          className: "flex-1",
+          "data-cy": "editor-option-".concat(optionIndex),
+          "data-testid": "editor-option-".concat(optionIndex),
+          initialValue: field.value,
+          onChange: function onChange(value) {
+            return _onChange({
+              id: id,
+              value: value
+            });
+          },
+          onBlur: function onBlur(value) {
+            _onChange({
+              id: id,
+              value: value,
+              isOnBlur: true
+            });
+            _onBlur === null || _onBlur === void 0 || _onBlur(id, value);
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: "absolute right-2 top-2",
+          children: /*#__PURE__*/jsx(OptionActions, {
+            arrayHelpers: arrayHelpers,
+            disabled: disabled,
+            hideCloneOption: hideCloneOption,
+            hideDeleteOption: hideDeleteOption,
+            id: id,
+            onClone: onClone,
+            onDelete: onDelete,
+            optionIndex: optionIndex
+          })
+        })]
+      })]
+    })
+  }));
+};
+
+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), true).forEach(function (r) { _defineProperty(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 ImageOption = function ImageOption(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    optionIndex = _ref.optionIndex,
+    disabled = _ref.disabled,
+    placeholder = _ref.placeholder,
+    shouldFocus = _ref.shouldFocus,
+    onKeyDown = _ref.onKeyDown,
+    _onChange = _ref.onChange,
+    _onBlur = _ref.onBlur,
+    onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
+    arrayHelpers = _ref.arrayHelpers,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
+    innerRef = _ref.innerRef,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    isDraggable = _ref.isDraggable,
+    isCheckboxEnabled = _ref.isCheckboxEnabled,
+    isEditor = _ref.isEditor;
+  var imageFieldName = name.replace(".label", ".image");
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 1),
+    field = _useField2[0];
+  var _useField3 = useField(imageFieldName),
+    _useField4 = _slicedToArray(_useField3, 3);
+    _useField4[0];
+    var image = _useField4[1].value,
+    setValue = _useField4[2].setValue;
+  var handleImageChange = function handleImageChange(changedImage) {
+    var imageValue = isEmpty(changedImage === null || changedImage === void 0 ? void 0 : changedImage.url) ? null : changedImage;
+    setValue(imageValue, false);
+    _onChange({
+      id: id,
+      value: imageValue,
+      isOnBlur: false,
+      fieldType: "image"
+    });
+  };
+  return /*#__PURE__*/jsx("div", _objectSpread$6(_objectSpread$6({
+    ref: innerRef
+  }, _objectSpread$6(_objectSpread$6({}, draggableProps), dragHandleProps)), {}, {
+    "data-cy": "form-block-options",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "nf-input-options group relative mb-2 flex items-start gap-1",
+      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$6(_objectSpread$6({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), isCheckboxEnabled && /*#__PURE__*/jsx(Checkbox, {
+        name: name,
+        optionIndex: optionIndex
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames("flex w-full items-center justify-center", {
+          "pointer-events-none opacity-80": disabled
+        }),
+        children: /*#__PURE__*/jsxs("div", {
+          className: "neeto-ui-rounded-lg neeto-ui-border-gray-200 neeto-molecules-option-fields__image-option neeto-ui-bg-white group relative flex w-full flex-col gap-2 border p-2 pr-8",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "neeto-molecules-option-fields__image-uploader-container flex-shrink-0",
+            "data-testid": "picture-choice-option-".concat(optionIndex),
+            children: /*#__PURE__*/jsx(ImageUploader, {
+              className: "neeto-molecules-option-fields__image-uploader w-full",
+              isOptionsDisabled: disabled,
+              src: image === null || image === void 0 ? void 0 : image.url,
+              uploadConfig: IMAGE_UPLOAD_CONFIG,
+              onUploadComplete: handleImageChange
+            }, image === null || image === void 0 ? void 0 : image.url)
+          }), /*#__PURE__*/jsx("div", {
+            className: "w-full",
+            children: isEditor ? /*#__PURE__*/jsx(Editor, {
+              disabled: disabled,
+              name: name,
+              placeholder: placeholder,
+              autoFocus: shouldFocus,
+              className: "flex-1",
+              "data-cy": "editor-option-".concat(optionIndex),
+              "data-testid": "editor-option-".concat(optionIndex),
+              initialValue: field.value,
+              onChange: function onChange(value) {
+                return _onChange({
+                  id: id,
+                  value: value
+                });
+              },
+              onBlur: function onBlur(value) {
+                _onChange({
+                  id: id,
+                  value: value,
+                  isOnBlur: true
+                });
+                _onBlur === null || _onBlur === void 0 || _onBlur(id, value);
+              }
+            }) : /*#__PURE__*/jsx(Input, _defineProperty(_defineProperty({
+              disabled: disabled,
+              name: name,
+              onBlur: _onBlur,
+              onKeyDown: onKeyDown,
+              placeholder: placeholder,
+              autoFocus: shouldFocus,
+              "data-cy": "option-input-".concat(optionIndex),
+              "data-testid": "input-option-".concat(optionIndex),
+              onFocus: function onFocus(_ref2) {
+                var target = _ref2.target;
+                return target.select();
+              }
+            }, "onBlur", function onBlur(event) {
+              _onChange({
+                id: id,
+                value: event.target.value,
+                isOnBlur: true
+              });
+              _onBlur === null || _onBlur === void 0 || _onBlur(id, event.target.value);
+              for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                args[_key - 1] = arguments[_key];
+              }
+              field.onBlur.apply(field, [event].concat(args));
+            }), "onChange", function onChange(_ref3) {
+              var target = _ref3.target;
+              return _onChange({
+                id: id,
+                value: target.value
+              });
+            }))
+          }), /*#__PURE__*/jsx("div", {
+            className: "absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100",
+            children: /*#__PURE__*/jsx(OptionActions, {
+              arrayHelpers: arrayHelpers,
+              disabled: disabled,
+              hideCloneOption: hideCloneOption,
+              hideDeleteOption: hideDeleteOption,
+              id: id,
+              onClone: onClone,
+              onDelete: onDelete,
+              optionIndex: optionIndex
+            })
+          })]
+        })
+      })]
+    })
+  }));
+};
+
+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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var InputOption = function InputOption(_ref) {
+  var shouldFocus = _ref.shouldFocus,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
+    innerRef = _ref.innerRef,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    onKeyDown = _ref.onKeyDown,
+    onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
+    _onChange = _ref.onChange,
+    optionIndex = _ref.optionIndex,
+    disabled = _ref.disabled,
+    isTextArea = _ref.isTextArea,
+    id = _ref.id,
+    isDraggable = _ref.isDraggable,
+    name = _ref.name,
+    placeholder = _ref.placeholder,
+    _onBlur = _ref.onBlur,
+    arrayHelpers = _ref.arrayHelpers,
+    _ref$isCheckboxEnable = _ref.isCheckboxEnabled,
+    isCheckboxEnabled = _ref$isCheckboxEnable === void 0 ? false : _ref$isCheckboxEnable;
+  var Component = isTextArea ? Textarea$1 : Input;
+  var _useField = useField(name),
+    _useField2 = _slicedToArray(_useField, 1),
+    field = _useField2[0];
+  return /*#__PURE__*/jsx("div", _objectSpread$5(_objectSpread$5({
+    ref: innerRef
+  }, _objectSpread$5(_objectSpread$5({}, draggableProps), dragHandleProps)), {}, {
+    "data-cy": "form-block-options",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "nf-input-options group relative mb-2 flex items-start gap-1",
+      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$5(_objectSpread$5({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), isCheckboxEnabled && /*#__PURE__*/jsx(Checkbox, {
+        name: name,
+        optionIndex: optionIndex
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex w-full items-start gap-2",
+        children: /*#__PURE__*/jsx(Component, {
+          disabled: disabled,
+          name: name,
+          onKeyDown: onKeyDown,
+          placeholder: placeholder,
+          autoFocus: shouldFocus,
+          className: "flex-1",
+          "data-cy": "option-input-".concat(optionIndex),
+          "data-testid": "".concat(isTextArea ? "textarea-option" : "input-option", "-").concat(optionIndex),
+          suffix: /*#__PURE__*/jsx(OptionActions, {
+            arrayHelpers: arrayHelpers,
+            disabled: disabled,
+            hideCloneOption: hideCloneOption,
+            hideDeleteOption: hideDeleteOption,
+            id: id,
+            onClone: onClone,
+            onDelete: onDelete,
+            optionIndex: optionIndex
+          }),
+          onChange: function onChange(_ref2) {
+            var target = _ref2.target;
+            return _onChange({
+              id: id,
+              value: target.value
+            });
+          },
+          onFocus: function onFocus(_ref3) {
+            var target = _ref3.target;
+            return target.select();
+          },
+          onBlur: function onBlur(event) {
+            _onChange({
+              id: id,
+              value: event.target.value,
+              isOnBlur: true
+            });
+            _onBlur === null || _onBlur === void 0 || _onBlur(id, event.target.value);
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+              args[_key - 1] = arguments[_key];
+            }
+            field.onBlur.apply(field, [event].concat(args));
+          }
+        })
+      })]
+    })
+  }));
 };
 
 var getOrderedOptions = function getOrderedOptions() {
@@ -204,11 +574,160 @@ var getMultiInputError = function getMultiInputError(isMultiInput, meta) {
   return null;
 };
 
-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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MultiInputOption = withT(function (_ref) {
+  var shouldFocus = _ref.shouldFocus,
+    _ref$hideDeleteOption = _ref.hideDeleteOption,
+    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
+    _ref$hideCloneOption = _ref.hideCloneOption,
+    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
+    innerRef = _ref.innerRef,
+    draggableProps = _ref.draggableProps,
+    dragHandleProps = _ref.dragHandleProps,
+    _onKeyDown = _ref.onKeyDown,
+    onDelete = _ref.onDelete,
+    onClone = _ref.onClone,
+    _onChange = _ref.onChange,
+    optionIndex = _ref.optionIndex,
+    disabled = _ref.disabled,
+    id = _ref.id,
+    isDraggable = _ref.isDraggable,
+    name = _ref.name,
+    placeholder = _ref.placeholder,
+    _onBlur = _ref.onBlur,
+    arrayHelpers = _ref.arrayHelpers,
+    _ref$inputConfig = _ref.inputConfig,
+    inputConfig = _ref$inputConfig === void 0 ? [] : _ref$inputConfig,
+    isCheckboxEnabled = _ref.isCheckboxEnabled;
+  return /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({
+    ref: innerRef
+  }, _objectSpread$4(_objectSpread$4({}, draggableProps), dragHandleProps)), {}, {
+    "data-cy": "form-block-multi-options",
+    "data-testid": "form-block-multi-options",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "nf-multi-input-options group relative mb-2 flex items-center gap-1",
+      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$4(_objectSpread$4({}, dragHandleProps), {}, {
+        "data-testid": "drag-handle-".concat(optionIndex)
+      })), isCheckboxEnabled && /*#__PURE__*/jsx(Checkbox, {
+        name: name,
+        optionIndex: optionIndex
+      }), /*#__PURE__*/jsx("div", {
+        className: "flex flex-1 flex-col gap-2",
+        children: /*#__PURE__*/jsx("div", {
+          className: "flex gap-2",
+          children: inputConfig.map(function (config, inputIndex) {
+            var _field$value;
+            var inputName = "".concat(name.replace(".label", ""), ".values.").concat(inputIndex);
+            var inputType = config.type || INPUT_TYPES.TEXT;
+            var isNumberType = inputType === INPUT_TYPES.NUMBER;
+            var _useField = useField(inputName),
+              _useField2 = _slicedToArray(_useField, 1),
+              field = _useField2[0];
+            return /*#__PURE__*/jsx("div", {
+              className: "flex-1",
+              children: /*#__PURE__*/jsx(Input, _objectSpread$4(_objectSpread$4({
+                disabled: disabled,
+                autoFocus: shouldFocus && inputIndex === 0,
+                "data-cy": "multi-option-input-".concat(optionIndex, "-").concat(inputIndex),
+                "data-testid": "multi-option-input-".concat(optionIndex, "-").concat(inputIndex)
+              }, isNumberType && {
+                min: config.min,
+                max: config.max
+              }), {}, {
+                name: inputName,
+                type: inputType,
+                value: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : config.defaultValue,
+                placeholder: config.placeholder || "".concat(placeholder, " ").concat(inputIndex + 1),
+                onFocus: function onFocus(_ref2) {
+                  var target = _ref2.target;
+                  return target.select();
+                },
+                onBlur: function onBlur(event) {
+                  return handleInputBlur(event, {
+                    id: id,
+                    inputIndex: inputIndex,
+                    onChange: _onChange,
+                    onBlur: _onBlur,
+                    field: field,
+                    config: config
+                  });
+                },
+                onChange: function onChange(_ref3) {
+                  var target = _ref3.target;
+                  return _onChange({
+                    id: id,
+                    value: target.value,
+                    inputIndex: inputIndex
+                  });
+                },
+                onKeyDown: function onKeyDown(event) {
+                  return isNumberType ? handleNumberKeyDown(event, _onKeyDown) : _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
+                }
+              }))
+            }, inputIndex);
+          })
+        })
+      }), /*#__PURE__*/jsx(OptionActions, {
+        arrayHelpers: arrayHelpers,
+        disabled: disabled,
+        hideCloneOption: hideCloneOption,
+        hideDeleteOption: hideDeleteOption,
+        id: id,
+        onClone: onClone,
+        onDelete: onDelete,
+        optionIndex: optionIndex
+      })]
+    })
+  }));
+});
+
+var DEFAULT_OPTION_LABEL = i18next.t("neetoMolecules.optionFields.defaultOption");
+var IMAGE_UPLOAD_CONFIG = {
+  maxImageSize: 1,
+  allowedImageTypes: {
+    "image/jpg": [".jpg", ".jpeg"],
+    "image/png": [".png"],
+    "image/svg": [".svg"]
+  }
+};
+var INPUT_TYPES = {
+  TEXT: "text",
+  NUMBER: "number"
+};
+var OPTION_ACTIONS = {
+  UPDATE_IMAGE: "update_image",
+  UPDATE_VALUES: "update_values",
+  UPDATE_LABEL: "update_label",
+  DELETE: "delete",
+  REORDER: "reorder",
+  ADD: "add",
+  BULK_ADD: "bulk_add",
+  CLONE: "clone"
+};
+var OPTION_MAP = {
+  multiInput: MultiInputOption,
+  pictureChoice: ImageOption,
+  editor: EditorOption,
+  input: InputOption
+};
+
+var FormError = function FormError(_ref) {
+  var error = _ref.error;
+  if (isNotPresent(error) || typeof error !== "string") return null;
+  return /*#__PURE__*/jsx(Typography, {
+    className: "neeto-ui-input__error",
+    "data-testid": "validation-error-container",
+    style: "body3",
+    children: error
+  });
+};
+
+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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var attachPosition = function attachPosition(options) {
   return options.map(function (option, index) {
-    return _objectSpread$5(_objectSpread$5({}, option), {}, {
+    return _objectSpread$3(_objectSpread$3({}, option), {}, {
       position: index
     });
   });
@@ -318,7 +837,7 @@ var useOptionFields = function useOptionFields(_ref) {
   var handleAddOption = function handleAddOption() {
     var id = randomId();
     var position = options.length;
-    var newOption = _objectSpread$5(_objectSpread$5({
+    var newOption = _objectSpread$3(_objectSpread$3({
       id: "draft-".concat(id),
       altId: "alt-".concat(id),
       label: isNewItemsPrefilled ? _generateLabel(itemLabel, options) : "",
@@ -355,7 +874,7 @@ var useOptionFields = function useOptionFields(_ref) {
     var optionToClone = options[index];
     if (!optionToClone) return;
     var newId = randomId();
-    var clonedOption = _objectSpread$5(_objectSpread$5({}, optionToClone), {}, {
+    var clonedOption = _objectSpread$3(_objectSpread$3({}, optionToClone), {}, {
       id: "draft-".concat(newId),
       altId: "alt-".concat(newId),
       label: isMultiInput ? optionToClone.label : t("neetoMolecules.optionFields.clonedOption", {
@@ -396,78 +915,11 @@ var useOptionFields = function useOptionFields(_ref) {
   };
 };
 
-var css = ".neeto-molecules-option-fields__image-uploader img{max-height:100px}";
-n(css,{});
-
-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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var DragHandle = function DragHandle(props) {
-  return /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({
-    className: "neeto-ui-text-gray-500 flex h-8 flex-shrink-0 cursor-grab items-center",
-    "data-cy": "drag-handle",
-    "data-testid": "drag-handle"
-  }, props), {}, {
-    children: /*#__PURE__*/jsx(Drag, {
-      size: 16,
-      strokeWidth: 2
-    })
-  }));
-};
-
-var OptionActions = withT(function (_ref) {
-  var t = _ref.t,
-    disabled = _ref.disabled,
-    _ref$hideCloneOption = _ref.hideCloneOption,
-    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
-    _ref$hideDeleteOption = _ref.hideDeleteOption,
-    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
-    optionIndex = _ref.optionIndex,
-    id = _ref.id,
-    arrayHelpers = _ref.arrayHelpers,
-    onClone = _ref.onClone,
-    onDelete = _ref.onDelete,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  return /*#__PURE__*/jsxs("div", {
-    className: "flex items-center gap-1 ".concat(className),
-    children: [!hideCloneOption && /*#__PURE__*/jsx(Button, {
-      disabled: disabled,
-      className: "p-0.5",
-      "data-cy": "clone-option-button-".concat(optionIndex),
-      "data-testid": "clone-option-button-".concat(optionIndex),
-      icon: Copy,
-      size: "small",
-      style: "text",
-      tooltipProps: {
-        content: t("neetoMolecules.common.actions.clone"),
-        position: "top",
-        touch: ["hold", 500]
-      },
-      onClick: function onClick() {
-        return onClone(id);
-      }
-    }), !hideDeleteOption && /*#__PURE__*/jsx(Button, {
-      disabled: disabled,
-      className: "p-0.5",
-      "data-cy": "delete-option-button-".concat(optionIndex),
-      "data-testid": "delete-option-button-".concat(optionIndex),
-      icon: Delete,
-      size: "small",
-      style: "text",
-      tooltipProps: {
-        content: t("neetoMolecules.common.actions.delete"),
-        position: "top",
-        touch: ["hold", 500]
-      },
-      onClick: function onClick() {
-        return onDelete(id, arrayHelpers);
-      }
-    })]
-  });
-});
+var css = ".neeto-molecules-option-fields__image-uploader img{max-height:100px}";
+n(css,{});
 
-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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var BlockOption = withT(function (_ref) {
   var t = _ref.t,
     innerRef = _ref.innerRef,
@@ -484,16 +936,21 @@ var BlockOption = withT(function (_ref) {
     id = _ref.id,
     isDraggable = _ref.isDraggable,
     optionIndex = _ref.optionIndex,
-    arrayHelpers = _ref.arrayHelpers;
-  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
+    arrayHelpers = _ref.arrayHelpers,
+    isCheckboxEnabled = _ref.isCheckboxEnabled,
+    name = _ref.name;
+  return /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2(_objectSpread$2({
     ref: innerRef
   }, draggableProps), dragHandleProps), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: "neeto-ui-border-gray-400 hover:neeto-ui-bg-gray-200 neeto-ui-rounded-sm shadow-xs group relative mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-colors duration-300 ease-in-out",
       "data-cy": "address-field-block",
-      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$3(_objectSpread$3({}, dragHandleProps), {}, {
+      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$2(_objectSpread$2({}, dragHandleProps), {}, {
         "data-testid": "drag-handle-".concat(optionIndex)
-      })), /*#__PURE__*/jsx(Typography, {
+      })), isCheckboxEnabled && /*#__PURE__*/jsx(Checkbox, {
+        name: name,
+        optionIndex: optionIndex
+      }), /*#__PURE__*/jsx(Typography, {
         className: "flex-grow truncate leading-4",
         "data-cy": "address-text-field",
         "data-testid": "address-text-field",
@@ -531,310 +988,8 @@ var BlockOption = withT(function (_ref) {
   }));
 });
 
-var ImageOption = function ImageOption(_ref) {
-  var id = _ref.id,
-    name = _ref.name,
-    optionIndex = _ref.optionIndex,
-    disabled = _ref.disabled,
-    field = _ref.field,
-    placeholder = _ref.placeholder,
-    shouldFocus = _ref.shouldFocus,
-    onKeyDown = _ref.onKeyDown,
-    _onChange = _ref.onChange,
-    _onBlur = _ref.onBlur,
-    onDelete = _ref.onDelete,
-    onClone = _ref.onClone,
-    arrayHelpers = _ref.arrayHelpers,
-    _ref$hideDeleteOption = _ref.hideDeleteOption,
-    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
-    _ref$hideCloneOption = _ref.hideCloneOption,
-    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption;
-  var imageFieldName = name.replace(".label", ".image");
-  var _useField = useField(imageFieldName),
-    _useField2 = _slicedToArray(_useField, 3);
-    _useField2[0];
-    var image = _useField2[1].value,
-    setValue = _useField2[2].setValue;
-  var handleImageChange = function handleImageChange(changedImage) {
-    var imageValue = isEmpty(changedImage === null || changedImage === void 0 ? void 0 : changedImage.url) ? null : changedImage;
-    setValue(imageValue, false);
-    _onChange({
-      id: id,
-      value: imageValue,
-      isOnBlur: false,
-      fieldType: "image"
-    });
-  };
-  return /*#__PURE__*/jsx("div", {
-    className: classnames("flex w-full items-center justify-center", {
-      "pointer-events-none opacity-80": disabled
-    }),
-    children: /*#__PURE__*/jsxs("div", {
-      className: "neeto-ui-rounded-lg neeto-ui-border-gray-200 neeto-molecules-option-fields__image-option neeto-ui-bg-white group relative flex w-full flex-col gap-2 border p-2 pr-8",
-      children: [/*#__PURE__*/jsx("div", {
-        className: "neeto-molecules-option-fields__image-uploader-container flex-shrink-0",
-        "data-testid": "picture-choice-option-".concat(optionIndex),
-        children: /*#__PURE__*/jsx(ImageUploader, {
-          className: "neeto-molecules-option-fields__image-uploader w-full",
-          isOptionsDisabled: disabled,
-          src: image === null || image === void 0 ? void 0 : image.url,
-          uploadConfig: IMAGE_UPLOAD_CONFIG,
-          onUploadComplete: handleImageChange
-        }, image === null || image === void 0 ? void 0 : image.url)
-      }), /*#__PURE__*/jsx("div", {
-        className: "w-full",
-        children: /*#__PURE__*/jsx(Input, _defineProperty({
-          disabled: disabled,
-          name: name,
-          onBlur: _onBlur,
-          onKeyDown: onKeyDown,
-          placeholder: placeholder,
-          autoFocus: shouldFocus,
-          "data-cy": "option-input-".concat(optionIndex),
-          "data-testid": "input-option-".concat(optionIndex),
-          onChange: function onChange(_ref2) {
-            var target = _ref2.target;
-            return _onChange({
-              id: id,
-              value: target.value
-            });
-          },
-          onFocus: function onFocus(_ref3) {
-            var target = _ref3.target;
-            return target.select();
-          }
-        }, "onBlur", function onBlur(event) {
-          _onChange({
-            id: id,
-            value: event.target.value,
-            isOnBlur: true
-          });
-          _onBlur === null || _onBlur === void 0 || _onBlur(id, event.target.value);
-          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            args[_key - 1] = arguments[_key];
-          }
-          field.onBlur.apply(field, [event].concat(args));
-        }))
-      }), /*#__PURE__*/jsx("div", {
-        className: "absolute right-3 top-1/2 flex -translate-y-1/2 items-center gap-1 opacity-0 transition-opacity duration-200 group-hover:opacity-100",
-        children: /*#__PURE__*/jsx(OptionActions, {
-          arrayHelpers: arrayHelpers,
-          disabled: disabled,
-          hideCloneOption: hideCloneOption,
-          hideDeleteOption: hideDeleteOption,
-          id: id,
-          onClone: onClone,
-          onDelete: onDelete,
-          optionIndex: optionIndex
-        })
-      })]
-    })
-  });
-};
-
-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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var InputOption = function InputOption(_ref) {
-  var shouldFocus = _ref.shouldFocus,
-    _ref$hideDeleteOption = _ref.hideDeleteOption,
-    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
-    _ref$hideCloneOption = _ref.hideCloneOption,
-    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
-    innerRef = _ref.innerRef,
-    draggableProps = _ref.draggableProps,
-    dragHandleProps = _ref.dragHandleProps,
-    isPictureChoice = _ref.isPictureChoice,
-    onKeyDown = _ref.onKeyDown,
-    onDelete = _ref.onDelete,
-    onClone = _ref.onClone,
-    _onChange = _ref.onChange,
-    optionIndex = _ref.optionIndex,
-    disabled = _ref.disabled,
-    isTextArea = _ref.isTextArea,
-    id = _ref.id,
-    isDraggable = _ref.isDraggable,
-    name = _ref.name,
-    placeholder = _ref.placeholder,
-    _onBlur = _ref.onBlur,
-    arrayHelpers = _ref.arrayHelpers;
-  var Component = isTextArea ? Textarea$1 : Input;
-  var _useField = useField(name),
-    _useField2 = _slicedToArray(_useField, 1),
-    field = _useField2[0];
-  return /*#__PURE__*/jsx("div", _objectSpread$2(_objectSpread$2({
-    ref: innerRef
-  }, _objectSpread$2(_objectSpread$2({}, draggableProps), dragHandleProps)), {}, {
-    "data-cy": "form-block-options",
-    children: /*#__PURE__*/jsxs("div", {
-      className: "nf-input-options group relative mb-2 flex items-start gap-1",
-      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$2(_objectSpread$2({}, dragHandleProps), {}, {
-        "data-testid": "drag-handle-".concat(optionIndex)
-      })), isPictureChoice ? /*#__PURE__*/jsx(ImageOption, {
-        arrayHelpers: arrayHelpers,
-        disabled: disabled,
-        field: field,
-        hideCloneOption: hideCloneOption,
-        hideDeleteOption: hideDeleteOption,
-        id: id,
-        name: name,
-        onBlur: _onBlur,
-        onChange: _onChange,
-        onClone: onClone,
-        onDelete: onDelete,
-        onKeyDown: onKeyDown,
-        optionIndex: optionIndex,
-        placeholder: placeholder,
-        shouldFocus: shouldFocus
-      }) : /*#__PURE__*/jsx(Component, {
-        disabled: disabled,
-        name: name,
-        onKeyDown: onKeyDown,
-        placeholder: placeholder,
-        autoFocus: shouldFocus,
-        "data-cy": "option-input-".concat(optionIndex),
-        "data-testid": "".concat(isTextArea ? "textarea-option" : "input-option", "-").concat(optionIndex),
-        suffix: /*#__PURE__*/jsx(OptionActions, {
-          arrayHelpers: arrayHelpers,
-          disabled: disabled,
-          hideCloneOption: hideCloneOption,
-          hideDeleteOption: hideDeleteOption,
-          id: id,
-          onClone: onClone,
-          onDelete: onDelete,
-          optionIndex: optionIndex
-        }),
-        onChange: function onChange(_ref2) {
-          var target = _ref2.target;
-          return _onChange({
-            id: id,
-            value: target.value
-          });
-        },
-        onFocus: function onFocus(_ref3) {
-          var target = _ref3.target;
-          return target.select();
-        },
-        onBlur: function onBlur(event) {
-          _onChange({
-            id: id,
-            value: event.target.value,
-            isOnBlur: true
-          });
-          _onBlur === null || _onBlur === void 0 || _onBlur(id, event.target.value);
-          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-            args[_key - 1] = arguments[_key];
-          }
-          field.onBlur.apply(field, [event].concat(args));
-        }
-      })]
-    })
-  }));
-};
-
 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), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var MultiInputOption = withT(function (_ref) {
-  var shouldFocus = _ref.shouldFocus,
-    _ref$hideDeleteOption = _ref.hideDeleteOption,
-    hideDeleteOption = _ref$hideDeleteOption === void 0 ? false : _ref$hideDeleteOption,
-    _ref$hideCloneOption = _ref.hideCloneOption,
-    hideCloneOption = _ref$hideCloneOption === void 0 ? false : _ref$hideCloneOption,
-    innerRef = _ref.innerRef,
-    draggableProps = _ref.draggableProps,
-    dragHandleProps = _ref.dragHandleProps,
-    _onKeyDown = _ref.onKeyDown,
-    onDelete = _ref.onDelete,
-    onClone = _ref.onClone,
-    _onChange = _ref.onChange,
-    optionIndex = _ref.optionIndex,
-    disabled = _ref.disabled,
-    id = _ref.id,
-    isDraggable = _ref.isDraggable,
-    name = _ref.name,
-    placeholder = _ref.placeholder,
-    _onBlur = _ref.onBlur,
-    arrayHelpers = _ref.arrayHelpers,
-    _ref$inputConfig = _ref.inputConfig,
-    inputConfig = _ref$inputConfig === void 0 ? [] : _ref$inputConfig;
-  return /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1({
-    ref: innerRef
-  }, _objectSpread$1(_objectSpread$1({}, draggableProps), dragHandleProps)), {}, {
-    "data-cy": "form-block-multi-options",
-    "data-testid": "form-block-multi-options",
-    children: /*#__PURE__*/jsxs("div", {
-      className: "nf-multi-input-options group relative mb-2 flex items-center gap-1",
-      children: [isDraggable && /*#__PURE__*/jsx(DragHandle, _objectSpread$1(_objectSpread$1({}, dragHandleProps), {}, {
-        "data-testid": "drag-handle-".concat(optionIndex)
-      })), /*#__PURE__*/jsx("div", {
-        className: "flex flex-1 flex-col gap-2",
-        children: /*#__PURE__*/jsx("div", {
-          className: "flex gap-2",
-          children: inputConfig.map(function (config, inputIndex) {
-            var _field$value;
-            var inputName = "".concat(name.replace(".label", ""), ".values.").concat(inputIndex);
-            var inputType = config.type || INPUT_TYPES.TEXT;
-            var isNumberType = inputType === INPUT_TYPES.NUMBER;
-            var _useField = useField(inputName),
-              _useField2 = _slicedToArray(_useField, 1),
-              field = _useField2[0];
-            return /*#__PURE__*/jsx("div", {
-              className: "flex-1",
-              children: /*#__PURE__*/jsx(Input, _objectSpread$1(_objectSpread$1({
-                disabled: disabled,
-                autoFocus: shouldFocus && inputIndex === 0,
-                "data-cy": "multi-option-input-".concat(optionIndex, "-").concat(inputIndex),
-                "data-testid": "multi-option-input-".concat(optionIndex, "-").concat(inputIndex)
-              }, isNumberType && {
-                min: config.min,
-                max: config.max
-              }), {}, {
-                name: inputName,
-                type: inputType,
-                value: (_field$value = field.value) !== null && _field$value !== void 0 ? _field$value : config.defaultValue,
-                placeholder: config.placeholder || "".concat(placeholder, " ").concat(inputIndex + 1),
-                onFocus: function onFocus(_ref2) {
-                  var target = _ref2.target;
-                  return target.select();
-                },
-                onBlur: function onBlur(event) {
-                  return handleInputBlur(event, {
-                    id: id,
-                    inputIndex: inputIndex,
-                    onChange: _onChange,
-                    onBlur: _onBlur,
-                    field: field,
-                    config: config
-                  });
-                },
-                onChange: function onChange(_ref3) {
-                  var target = _ref3.target;
-                  return _onChange({
-                    id: id,
-                    value: target.value,
-                    inputIndex: inputIndex
-                  });
-                },
-                onKeyDown: function onKeyDown(event) {
-                  return isNumberType ? handleNumberKeyDown(event, _onKeyDown) : _onKeyDown === null || _onKeyDown === void 0 ? void 0 : _onKeyDown(event);
-                }
-              }))
-            }, inputIndex);
-          })
-        })
-      }), /*#__PURE__*/jsx(OptionActions, {
-        arrayHelpers: arrayHelpers,
-        disabled: disabled,
-        hideCloneOption: hideCloneOption,
-        hideDeleteOption: hideDeleteOption,
-        id: id,
-        onClone: onClone,
-        onDelete: onDelete,
-        optionIndex: optionIndex
-      })]
-    })
-  }));
-});
-
 var OptionField = function OptionField(_ref) {
   var option = _ref.option,
     editable = _ref.editable,
@@ -848,9 +1003,11 @@ var OptionField = function OptionField(_ref) {
     onEdit = _ref.onEdit,
     draggable = _ref.draggable,
     disabled = _ref.disabled,
+    isCheckboxEnabled = _ref.isCheckboxEnabled,
     isPictureChoice = _ref.isPictureChoice,
     isTextArea = _ref.isTextArea,
     isMultiInput = _ref.isMultiInput,
+    isEditor = _ref.isEditor,
     inputConfig = _ref.inputConfig,
     shouldFocus = _ref.shouldFocus,
     isEditable = _ref.isEditable,
@@ -861,69 +1018,40 @@ var OptionField = function OptionField(_ref) {
     optionIndex = _ref.optionIndex,
     onBlur = _ref.onBlur,
     arrayHelpers = _ref.arrayHelpers;
-  if (!editable) {
-    return /*#__PURE__*/jsx(BlockOption, {
-      arrayHelpers: arrayHelpers,
-      dragHandleProps: dragHandleProps,
-      draggableProps: draggableProps,
-      handleDeleteClick: handleDeleteClick,
-      hideCloneOption: hideCloneOption,
-      hideDeleteOption: hideDeleteOption,
-      innerRef: innerRef,
-      onEdit: onEdit,
-      optionIndex: optionIndex,
-      id: option.id,
-      isDraggable: draggable && !disabled,
-      label: option.label,
-      onClone: handleCloneClick
-    });
-  }
-  if (isMultiInput) {
-    return /*#__PURE__*/jsx(MultiInputOption, {
-      arrayHelpers: arrayHelpers,
-      dragHandleProps: dragHandleProps,
-      draggableProps: draggableProps,
-      hideCloneOption: hideCloneOption,
-      hideDeleteOption: hideDeleteOption,
-      innerRef: innerRef,
-      inputConfig: inputConfig,
-      name: name,
-      onBlur: onBlur,
-      option: option,
-      optionIndex: optionIndex,
-      shouldFocus: shouldFocus,
-      disabled: !isEditable || disabled,
-      id: option.id,
-      isDraggable: draggable && !disabled,
-      placeholder: generatePlaceholder(itemLabel, optionIndex),
-      onChange: handleChange,
-      onClone: handleCloneClick,
-      onDelete: handleDeleteClick,
-      onKeyDown: handleKeyDown
-    });
-  }
-  return /*#__PURE__*/jsx(InputOption, {
+  var commonProps = {
+    id: option.id,
     arrayHelpers: arrayHelpers,
     dragHandleProps: dragHandleProps,
     draggableProps: draggableProps,
     hideCloneOption: hideCloneOption,
     hideDeleteOption: hideDeleteOption,
     innerRef: innerRef,
-    isPictureChoice: isPictureChoice,
-    isTextArea: isTextArea,
+    isCheckboxEnabled: isCheckboxEnabled,
     name: name,
-    onBlur: onBlur,
     optionIndex: optionIndex,
-    shouldFocus: shouldFocus,
-    disabled: !isEditable || disabled,
-    id: option.id,
     isDraggable: draggable && !disabled,
+    onClone: handleCloneClick
+  };
+  var Component = isMultiInput && OPTION_MAP.multiInput || isPictureChoice && OPTION_MAP.pictureChoice || isEditor && OPTION_MAP.editor || OPTION_MAP.input;
+  return editable ? /*#__PURE__*/jsx(Component, _objectSpread$1(_objectSpread$1({}, _objectSpread$1(_objectSpread$1({}, commonProps), {}, {
+    inputConfig: inputConfig,
+    isEditor: isEditor,
+    isTextArea: isTextArea,
+    onBlur: onBlur,
+    option: option,
+    shouldFocus: shouldFocus
+  })), {}, {
+    disabled: !isEditable || disabled,
     placeholder: generatePlaceholder(itemLabel, optionIndex),
     onChange: handleChange,
-    onClone: handleCloneClick,
     onDelete: handleDeleteClick,
     onKeyDown: handleKeyDown
-  });
+  })) : /*#__PURE__*/jsx(BlockOption, _objectSpread$1(_objectSpread$1({}, _objectSpread$1(_objectSpread$1({}, commonProps), {}, {
+    handleDeleteClick: handleDeleteClick,
+    onEdit: onEdit
+  })), {}, {
+    label: option.label
+  }));
 };
 
 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; }
@@ -954,12 +1082,16 @@ var OptionFields = function OptionFields(_ref) {
     isDeleteOptionEnabled = _ref$isDeleteOptionEn === void 0 ? true : _ref$isDeleteOptionEn,
     _ref$isCloneOptionEna = _ref.isCloneOptionEnabled,
     isCloneOptionEnabled = _ref$isCloneOptionEna === void 0 ? false : _ref$isCloneOptionEna,
+    _ref$isCheckboxEnable = _ref.isCheckboxEnabled,
+    isCheckboxEnabled = _ref$isCheckboxEnable === void 0 ? false : _ref$isCheckboxEnable,
     _ref$isPictureChoice = _ref.isPictureChoice,
     isPictureChoice = _ref$isPictureChoice === void 0 ? false : _ref$isPictureChoice,
     _ref$isTextArea = _ref.isTextArea,
     isTextArea = _ref$isTextArea === void 0 ? false : _ref$isTextArea,
     _ref$isMultiInput = _ref.isMultiInput,
     isMultiInput = _ref$isMultiInput === void 0 ? false : _ref$isMultiInput,
+    _ref$isEditor = _ref.isEditor,
+    isEditor = _ref$isEditor === void 0 ? false : _ref$isEditor,
     _ref$inputConfig = _ref.inputConfig,
     inputConfig = _ref$inputConfig === void 0 ? [] : _ref$inputConfig,
     _ref$shouldDestroy = _ref.shouldDestroy,
@@ -1017,7 +1149,7 @@ var OptionFields = function OptionFields(_ref) {
   // This condition only needed for server id generated types
   var isEditable = true;
   if (shouldDestroy) isEditable = options.every(prop("id") || error);
-  var orderedOptions = getOrderedOptions(options, destroyFlagName);
+  var orderedOptions = getOrderedOptions(options);
   var filteredOptions = orderedOptions.filter(function (_ref2) {
     var deleted = _ref2[destroyFlagName];
     return !deleted;
@@ -1042,7 +1174,9 @@ var OptionFields = function OptionFields(_ref) {
     itemLabel: itemLabel,
     onEdit: onEdit,
     onBlur: onBlur,
-    shouldFocus: shouldFocus
+    shouldFocus: shouldFocus,
+    isCheckboxEnabled: isCheckboxEnabled,
+    isEditor: isEditor
   };
 
   // To fix the element positioned incorrectly while dragging when in a pane or modal.