@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/OptionFields.js

@@ -1,6 +1,6 @@
-import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useState } from 'react';
+import { useState, createElement } from 'react';
 import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import { isNotEmpty, noop, slugify } from '@bigbinary/neeto-cist';
 import Plus from '@bigbinary/neeto-icons/Plus';
@@ -12,26 +12,32 @@ import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import Delete from '@bigbinary/neeto-icons/Delete';
 import Edit from '@bigbinary/neeto-icons/Edit';
 import Reorder from '@bigbinary/neeto-icons/Reorder';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Modal from '@bigbinary/neetoui/Modal';
 import Textarea from '@bigbinary/neetoui/Textarea';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useFormikContext } from 'formik';
 import i18next from 'i18next';
 import ImageUpload from '@bigbinary/neeto-icons/ImageUpload';
 import Input from '@bigbinary/neetoui/Input';
 
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), !0).forEach(function (r) { _defineProperty(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__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", _objectSpread$4(_objectSpread$4({
     className: "neeto-ui-text-gray-400 absolute bottom-0 left-0 top-0 my-auto -ml-6 h-6 cursor-grab opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100",
     "data-cy": "drag-handle",
     "data-testid": "drag-handle"
-  }, props), /*#__PURE__*/React__default.createElement(Reorder, {
-    size: 24,
-    strokeWidth: 2
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(Reorder, {
+      size: 24,
+      strokeWidth: 2
+    })
   }));
 };
 
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(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 BlockOption = withT(function (_ref) {
   var t = _ref.t,
     innerRef = _ref.innerRef,
@@ -43,49 +49,54 @@ var BlockOption = withT(function (_ref) {
     index = _ref.index,
     onEdit = _ref.onEdit,
     handleDeleteClick = _ref.handleDeleteClick;
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", _objectSpread$3(_objectSpread$3(_objectSpread$3({
     ref: innerRef
-  }, draggableProps, dragHandleProps), /*#__PURE__*/React__default.createElement("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"
-  }, /*#__PURE__*/React__default.createElement(DragHandle, dragHandleProps), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "flex-grow leading-4",
-    "data-cy": "address-text-field",
-    "data-testid": "address-text-field",
-    style: "body2"
-  }, label), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
-    "data-cy": "address-field-edit-button",
-    "data-testid": "address-field-edit-button",
-    icon: Edit,
-    size: "small",
-    style: "text",
-    tooltipProps: {
-      content: t("neetoMolecules.common.actions.edit"),
-      position: "top"
-    },
-    onClick: function onClick() {
-      return onEdit(index);
-    }
-  }), !hideDeleteOption && /*#__PURE__*/React__default.createElement(Button, {
-    className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
-    "data-cy": "address-field-delete-button",
-    "data-testid": "address-field-delete-button",
-    icon: Delete,
-    size: "small",
-    style: "text",
-    tooltipProps: {
-      content: t("neetoMolecules.common.actions.delete"),
-      position: "top"
-    },
-    onClick: function onClick() {
-      return handleDeleteClick({
-        index: index
-      });
-    }
-  }))));
+  }, 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: [/*#__PURE__*/jsx(DragHandle, _objectSpread$3({}, dragHandleProps)), /*#__PURE__*/jsx(Typography, {
+        className: "flex-grow leading-4",
+        "data-cy": "address-text-field",
+        "data-testid": "address-text-field",
+        style: "body2",
+        children: label
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100",
+        children: [/*#__PURE__*/jsx(Button, {
+          className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
+          "data-cy": "address-field-edit-button",
+          "data-testid": "address-field-edit-button",
+          icon: Edit,
+          size: "small",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoMolecules.common.actions.edit"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return onEdit(index);
+          }
+        }), !hideDeleteOption && /*#__PURE__*/jsx(Button, {
+          className: "neeto-ui-rounded hover:neeto-ui-bg-gray-400 p-1",
+          "data-cy": "address-field-delete-button",
+          "data-testid": "address-field-delete-button",
+          icon: Delete,
+          size: "small",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoMolecules.common.actions.delete"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return handleDeleteClick({
+              index: index
+            });
+          }
+        })]
+      })]
+    })
+  }));
 });
 
 var BulkOptionModal = function BulkOptionModal(_ref) {
@@ -107,47 +118,54 @@ var BulkOptionModal = function BulkOptionModal(_ref) {
     setOptionsString("");
     onClose();
   };
-  return /*#__PURE__*/React__default.createElement(Modal, {
+  return /*#__PURE__*/jsxs(Modal, {
     isOpen: isOpen,
-    onClose: handleClose
-  }, /*#__PURE__*/React__default.createElement(Modal.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h3"
-  }, t("neetoMolecules.optionFields.bulkOption.title"))), /*#__PURE__*/React__default.createElement(Modal.Body, null, /*#__PURE__*/React__default.createElement(Textarea, {
-    className: "my-2",
-    "data-cy": "bulk-add-options-textarea",
-    "data-testid": "bulk-add-options-textarea",
-    label: t("neetoMolecules.optionFields.bulkOption.label"),
-    placeholder: t("neetoMolecules.optionFields.bulkOption.label"),
-    rows: 8,
-    value: optionsString,
-    helpText: /*#__PURE__*/React__default.createElement(Trans, {
-      i18nKey: "neetoMolecules.optionFields.bulkOption.helpText",
-      components: {
-        Link: /*#__PURE__*/React__default.createElement(Button, {
-          className: "text-xs",
-          href: bulkAddHelpDocUrl,
-          style: "link",
-          target: "_blank"
-        })
-      }
-    }),
-    onChange: function onChange(e) {
-      return setOptionsString(e.target.value);
-    }
-  })), /*#__PURE__*/React__default.createElement(Modal.Footer, {
-    className: "gap-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "bulk-add-options-done-button",
-    "data-testid": "bulk-add-options-done-button",
-    label: t("neetoMolecules.common.actions.submit"),
-    onClick: handleSave
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "bulk-add-options-cancel-button",
-    "data-testid": "bulk-add-options-cancel-button",
-    label: t("neetoMolecules.common.actions.cancel"),
-    style: "text",
-    onClick: handleClose
-  })));
+    onClose: handleClose,
+    children: [/*#__PURE__*/jsx(Modal.Header, {
+      children: /*#__PURE__*/jsx(Typography, {
+        style: "h3",
+        children: t("neetoMolecules.optionFields.bulkOption.title")
+      })
+    }), /*#__PURE__*/jsx(Modal.Body, {
+      children: /*#__PURE__*/jsx(Textarea, {
+        className: "my-2",
+        "data-cy": "bulk-add-options-textarea",
+        "data-testid": "bulk-add-options-textarea",
+        label: t("neetoMolecules.optionFields.bulkOption.label"),
+        placeholder: t("neetoMolecules.optionFields.bulkOption.label"),
+        rows: 8,
+        value: optionsString,
+        helpText: /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoMolecules.optionFields.bulkOption.helpText",
+          components: {
+            Link: /*#__PURE__*/jsx(Button, {
+              className: "text-xs",
+              href: bulkAddHelpDocUrl,
+              style: "link",
+              target: "_blank"
+            })
+          }
+        }),
+        onChange: function onChange(e) {
+          return setOptionsString(e.target.value);
+        }
+      })
+    }), /*#__PURE__*/jsxs(Modal.Footer, {
+      className: "gap-x-2",
+      children: [/*#__PURE__*/jsx(Button, {
+        "data-cy": "bulk-add-options-done-button",
+        "data-testid": "bulk-add-options-done-button",
+        label: t("neetoMolecules.common.actions.submit"),
+        onClick: handleSave
+      }), /*#__PURE__*/jsx(Button, {
+        "data-cy": "bulk-add-options-cancel-button",
+        "data-testid": "bulk-add-options-cancel-button",
+        label: t("neetoMolecules.common.actions.cancel"),
+        style: "text",
+        onClick: handleClose
+      })]
+    })]
+  });
 };
 
 var DEFAULT_OPTION_LABEL = i18next.t("neetoMolecules.optionFields.defaultOption");
@@ -165,11 +183,11 @@ var randomId = function randomId() {
   return Math.random().toString(36).substring(2, 13);
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(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 attachPosition = function attachPosition(options) {
   return options.map(function (option, index) {
-    return _objectSpread(_objectSpread({}, option), {}, {
+    return _objectSpread$2(_objectSpread$2({}, option), {}, {
       position: index + 1
     });
   });
@@ -281,6 +299,8 @@ var useOptionFields = function useOptionFields(_ref) {
   };
 };
 
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(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 InputOption = function InputOption(_ref) {
   var shouldFocus = _ref.shouldFocus,
     _ref$hideDeleteOption = _ref.hideDeleteOption,
@@ -299,61 +319,68 @@ var InputOption = function InputOption(_ref) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var Component = isTextArea ? Textarea : Input;
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/jsx("div", _objectSpread$1(_objectSpread$1(_objectSpread$1({
     ref: innerRef
-  }, draggableProps, dragHandleProps, {
-    "data-cy": "form-block-options"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "nf-input-options group relative mb-2 flex items-center gap-2"
-  }, /*#__PURE__*/React__default.createElement(DragHandle, dragHandleProps), isPictureChoice && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, index === 0 ? /*#__PURE__*/React__default.createElement("img", {
-    className: "neeto-ui-rounded-sm h-8 w-8 cursor-pointer overflow-hidden object-cover",
-    "data-testid": "picture-choice-option",
-    src: "https://i.pravatar.cc/300"
-  }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "hover:neeto-ui-bg-gray-100 neeto-ui-border-primary-600 neeto-ui-text-primary-800 neeto-ui-rounded-sm flex h-8 w-8 cursor-pointer items-center justify-center border border-dashed transition-all duration-300 ease-in-out"
-  }, /*#__PURE__*/React__default.createElement(ImageUpload, {
-    size: 16
-  }))), /*#__PURE__*/React__default.createElement(Component, {
-    disabled: disabled,
-    autoFocus: shouldFocus,
-    "data-cy": "option-input-".concat(index),
-    "data-testid": isTextArea ? "textarea-option" : "input-option",
-    placeholder: t("neetoMolecules.optionFields.optionName"),
-    value: label,
-    suffix: !hideDeleteOption && /*#__PURE__*/React__default.createElement(Button, {
-      disabled: disabled,
-      className: "p-0.5",
-      "data-cy": "delete-option-button-".concat(index),
-      "data-testid": "delete-option-button",
-      icon: Delete,
-      size: "small",
-      style: "text",
-      tooltipProps: {
-        content: t("neetoMolecules.common.actions.delete"),
-        position: "top"
-      },
-      onClick: function onClick() {
-        return onDelete({
-          index: index
-        });
-      }
-    }),
-    onBlur: function onBlur(_ref2) {
-      var target = _ref2.target;
-      return _onChange(index, target.value, true);
-    },
-    onChange: function onChange(_ref3) {
-      var target = _ref3.target;
-      return _onChange(index, target.value);
-    },
-    onFocus: function onFocus(_ref4) {
-      var target = _ref4.target;
-      return target.select();
-    },
-    onKeyDown: onKeyDown(index)
-  })));
+  }, draggableProps), dragHandleProps), {}, {
+    "data-cy": "form-block-options",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "nf-input-options group relative mb-2 flex items-center gap-2",
+      children: [/*#__PURE__*/jsx(DragHandle, _objectSpread$1({}, dragHandleProps)), isPictureChoice && /*#__PURE__*/jsx(Fragment, {
+        children: index === 0 ? /*#__PURE__*/jsx("img", {
+          className: "neeto-ui-rounded-sm h-8 w-8 cursor-pointer overflow-hidden object-cover",
+          "data-testid": "picture-choice-option",
+          src: "https://i.pravatar.cc/300"
+        }) : /*#__PURE__*/jsx("div", {
+          className: "hover:neeto-ui-bg-gray-100 neeto-ui-border-primary-600 neeto-ui-text-primary-800 neeto-ui-rounded-sm flex h-8 w-8 cursor-pointer items-center justify-center border border-dashed transition-all duration-300 ease-in-out",
+          children: /*#__PURE__*/jsx(ImageUpload, {
+            size: 16
+          })
+        })
+      }), /*#__PURE__*/jsx(Component, {
+        disabled: disabled,
+        autoFocus: shouldFocus,
+        "data-cy": "option-input-".concat(index),
+        "data-testid": isTextArea ? "textarea-option" : "input-option",
+        placeholder: t("neetoMolecules.optionFields.optionName"),
+        value: label,
+        suffix: !hideDeleteOption && /*#__PURE__*/jsx(Button, {
+          disabled: disabled,
+          className: "p-0.5",
+          "data-cy": "delete-option-button-".concat(index),
+          "data-testid": "delete-option-button",
+          icon: Delete,
+          size: "small",
+          style: "text",
+          tooltipProps: {
+            content: t("neetoMolecules.common.actions.delete"),
+            position: "top"
+          },
+          onClick: function onClick() {
+            return onDelete({
+              index: index
+            });
+          }
+        }),
+        onBlur: function onBlur(_ref2) {
+          var target = _ref2.target;
+          return _onChange(index, target.value, true);
+        },
+        onChange: function onChange(_ref3) {
+          var target = _ref3.target;
+          return _onChange(index, target.value);
+        },
+        onFocus: function onFocus(_ref4) {
+          var target = _ref4.target;
+          return target.select();
+        },
+        onKeyDown: onKeyDown(index)
+      })]
+    })
+  }));
 };
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var OptionFields = function OptionFields(_ref) {
   var options = _ref.options,
     error = _ref.error,
@@ -423,92 +450,99 @@ var OptionFields = function OptionFields(_ref) {
     var _option$id, _option$position;
     return option.altId || ((_option$id = option.id) === null || _option$id === void 0 ? void 0 : _option$id.toString()) || ((_option$position = option.position) === null || _option$position === void 0 ? void 0 : _option$position.toString()) || slugify(option.label);
   };
-  return /*#__PURE__*/React__default.createElement("form", {
+  return /*#__PURE__*/jsxs("form", {
     onSubmit: function onSubmit(e) {
       return e.preventDefault();
-    }
-  }, /*#__PURE__*/React__default.createElement(DragDropContext, {
-    onDragEnd: handleDragEnd
-  }, /*#__PURE__*/React__default.createElement(Droppable, {
-    droppableId: "neeto-molecules-option-fields-".concat(name),
-    isDropDisabled: !draggable
-  }, function (_ref3) {
-    var innerRef = _ref3.innerRef,
-      droppableProps = _ref3.droppableProps,
-      placeholder = _ref3.placeholder;
-    return /*#__PURE__*/React__default.createElement("div", _extends({
-      ref: innerRef
-    }, droppableProps), visibleOptions.map(function (option, index) {
-      return /*#__PURE__*/React__default.createElement(Draggable, {
-        index: index,
-        draggableId: getUniqueOptionId(option),
-        isDragDisabled: !draggable,
-        key: getUniqueOptionId(option)
-      }, function (_ref4) {
-        var innerRef = _ref4.innerRef,
-          draggableProps = _ref4.draggableProps,
-          dragHandleProps = _ref4.dragHandleProps;
-        return editable ? /*#__PURE__*/React__default.createElement(InputOption, {
-          dragHandleProps: dragHandleProps,
-          draggableProps: draggableProps,
-          hideDeleteOption: hideDeleteOption,
-          index: index,
-          innerRef: innerRef,
-          isPictureChoice: isPictureChoice,
-          isTextArea: isTextArea,
-          name: name,
-          shouldFocus: shouldFocus,
+    },
+    children: [/*#__PURE__*/jsxs(DragDropContext, {
+      onDragEnd: handleDragEnd,
+      children: [/*#__PURE__*/jsx(Droppable, {
+        droppableId: "neeto-molecules-option-fields-".concat(name),
+        isDropDisabled: !draggable,
+        children: function children(_ref3) {
+          var innerRef = _ref3.innerRef,
+            droppableProps = _ref3.droppableProps,
+            placeholder = _ref3.placeholder;
+          return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({
+            ref: innerRef
+          }, droppableProps), {}, {
+            children: [visibleOptions.map(function (option, index) {
+              return /*#__PURE__*/createElement(Draggable, {
+                index: index,
+                draggableId: getUniqueOptionId(option),
+                isDragDisabled: !draggable,
+                key: getUniqueOptionId(option)
+              }, function (_ref4) {
+                var innerRef = _ref4.innerRef,
+                  draggableProps = _ref4.draggableProps,
+                  dragHandleProps = _ref4.dragHandleProps;
+                return editable ? /*#__PURE__*/jsx(InputOption, {
+                  dragHandleProps: dragHandleProps,
+                  draggableProps: draggableProps,
+                  hideDeleteOption: hideDeleteOption,
+                  index: index,
+                  innerRef: innerRef,
+                  isPictureChoice: isPictureChoice,
+                  isTextArea: isTextArea,
+                  name: name,
+                  shouldFocus: shouldFocus,
+                  disabled: !isEditable,
+                  label: option.label,
+                  onChange: handleChange,
+                  onDelete: handleDeleteClick,
+                  onKeyDown: handleKeyDown
+                }) : /*#__PURE__*/jsx(BlockOption, {
+                  dragHandleProps: dragHandleProps,
+                  draggableProps: draggableProps,
+                  handleDeleteClick: handleDeleteClick,
+                  hideDeleteOption: hideDeleteOption,
+                  index: index,
+                  innerRef: innerRef,
+                  onEdit: onEdit,
+                  label: option.label
+                });
+              });
+            }), error && /*#__PURE__*/jsx(Typography, {
+              className: "neeto-ui-input__error",
+              "data-testid": "validation-error-container",
+              style: "body3",
+              children: error
+            }), placeholder]
+          }));
+        }
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mt-4 flex items-center justify-between",
+        children: [/*#__PURE__*/jsx(Button, _objectSpread({
+          "data-cy": "add-option-link",
+          "data-testid": "add-option-link",
           disabled: !isEditable,
-          label: option.label,
-          onChange: handleChange,
-          onDelete: handleDeleteClick,
-          onKeyDown: handleKeyDown
-        }) : /*#__PURE__*/React__default.createElement(BlockOption, {
-          dragHandleProps: dragHandleProps,
-          draggableProps: draggableProps,
-          handleDeleteClick: handleDeleteClick,
-          hideDeleteOption: hideDeleteOption,
-          index: index,
-          innerRef: innerRef,
-          onEdit: onEdit,
-          label: option.label
-        });
-      });
-    }), error && /*#__PURE__*/React__default.createElement(Typography, {
-      className: "neeto-ui-input__error",
-      "data-testid": "validation-error-container",
-      style: "body3"
-    }, error), placeholder);
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-4 flex items-center justify-between"
-  }, /*#__PURE__*/React__default.createElement(Button, _extends({
-    "data-cy": "add-option-link",
-    "data-testid": "add-option-link",
-    disabled: !isEditable,
-    icon: Plus,
-    iconPosition: "left",
-    label: t("neetoMolecules.optionFields.addOption"),
-    size: "small",
-    style: "link",
-    onClick: handleAddOption
-  }, buttonProps)), bulkActionProps.enabled && /*#__PURE__*/React__default.createElement(Button, {
-    "data-cy": "add-bulk-option-link",
-    "data-testid": "add-bulk-option-link",
-    disabled: !isEditable,
-    label: t("neetoMolecules.optionFields.addBulk"),
-    size: "small",
-    style: "text",
-    onClick: function onClick() {
-      return setIsBulkOptionModalOpen(true);
-    }
-  }))), /*#__PURE__*/React__default.createElement(BulkOptionModal, {
-    bulkAddHelpDocUrl: bulkActionProps.bulkAddHelpDocUrl,
-    handleBulkAdd: handleBulkAddOption,
-    isOpen: isBulkOptionModalOpen,
-    onClose: function onClose() {
-      return setIsBulkOptionModalOpen(false);
-    }
-  }));
+          icon: Plus,
+          iconPosition: "left",
+          label: t("neetoMolecules.optionFields.addOption"),
+          size: "small",
+          style: "link",
+          onClick: handleAddOption
+        }, buttonProps)), bulkActionProps.enabled && /*#__PURE__*/jsx(Button, {
+          "data-cy": "add-bulk-option-link",
+          "data-testid": "add-bulk-option-link",
+          disabled: !isEditable,
+          label: t("neetoMolecules.optionFields.addBulk"),
+          size: "small",
+          style: "text",
+          onClick: function onClick() {
+            return setIsBulkOptionModalOpen(true);
+          }
+        })]
+      })]
+    }), /*#__PURE__*/jsx(BulkOptionModal, {
+      bulkAddHelpDocUrl: bulkActionProps.bulkAddHelpDocUrl,
+      handleBulkAdd: handleBulkAddOption,
+      isOpen: isBulkOptionModalOpen,
+      onClose: function onClose() {
+        return setIsBulkOptionModalOpen(false);
+      }
+    })]
+  });
 };
 
 export { OptionFields as default };