@bigbinary/neeto-molecules 1.3.2 → 1.3.3

package/dist/EmailForm.js

@@ -1,9 +1,10 @@
 import React, { useState, useRef, useContext } from 'react';
 import classnames from 'classnames';
+import { isPresent, isNotEmpty, noop } from '@bigbinary/neeto-cist';
+import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { EditorContent, isEditorEmpty, FormikEditor } from '@bigbinary/neeto-editor';
+import { Typography, Button, Callout, Pane, Toastr, Input as Input$1 } from '@bigbinary/neetoui';
 import { useFormikContext, Field } from 'formik';
-import { isNotEmpty, noop, isPresent } from '@bigbinary/neeto-cist';
-import { isEditorEmpty, FormikEditor, EditorContent } from '@bigbinary/neeto-editor';
-import { Callout, Button, Typography, Pane, Toastr, Input as Input$1 } from '@bigbinary/neetoui';
 import { Select, Input, MultiEmailInput, Radio, ActionBlock, Form } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { t } from 'i18next';
@@ -11,832 +12,129 @@ import { prop } from 'ramda';
 import * as yup from 'yup';
 import { string } from 'yup';
 import { Info, Download, Upload } from '@bigbinary/neeto-icons';
-import { withT } from '@bigbinary/neeto-commons-frontend/react-utils';
 import { useDropzone } from 'react-dropzone';
 import Papa from 'papaparse';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils';
 import DynamicVariables from '@bigbinary/neeto-molecules/DynamicVariables';
 
-function _typeof(o) {
-  "@babel/helpers - typeof";
+var propTypes = {exports: {}};
 
-  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
-    return typeof o;
-  } : function (o) {
-    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
-  }, _typeof(o);
-}
+var reactIs = {exports: {}};
 
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null) return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== undefined) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object") return res;
-    throw new TypeError("@@toPrimitive must return a primitive value.");
-  }
-  return (hint === "string" ? String : Number)(input);
-}
+var reactIs_production_min = {};
 
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
-}
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
-  if (key in obj) {
-    Object.defineProperty(obj, key, {
-      value: value,
-      enumerable: true,
-      configurable: true,
-      writable: true
-    });
-  } else {
-    obj[key] = value;
-  }
-  return obj;
+var hasRequiredReactIs_production_min;
+
+function requireReactIs_production_min () {
+	if (hasRequiredReactIs_production_min) return reactIs_production_min;
+	hasRequiredReactIs_production_min = 1;
+var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
+	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
+	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
+	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
+	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
+	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
+	return reactIs_production_min;
 }
 
-var INITIAL_FORM_VALUES = {
-  sendTo: [],
-  sendToId: "",
-  sendToCc: [],
-  sendToBcc: [],
-  replyTo: "",
-  showCopyEmails: false,
-  subject: "",
-  message: ""
-};
-var EMAIL_FORM_VALIDATION_SCHEMA = yup.object({
-  subject: yup.string().required(t("neetoMolecules.emailForm.errors.subjectRequired")),
-  message: yup.string().test("message", t("neetoMolecules.emailForm.errors.messageRequired"), function (value) {
-    return !isEditorEmpty(value);
-  })
-});
-var SEND_TO_FIELD_VALIDATION = yup.object({
-  sendTo: yup.array().min(1, t("neetoMolecules.emailForm.errors.required", {
-    entity: t("neetoMolecules.emailForm.fields.sendToEmailAddress")
-  })).test("all-emails-valid", t("neetoMolecules.emailForm.errors.invalidEmailAddress"), function (emails) {
-    return emails === null || emails === void 0 ? void 0 : emails.every(prop("valid"));
-  }).nullable()
-});
-var SEND_TO_ID_FIELD_VALIDATION = yup.object({
-  sendToId: yup.string().required(t("neetoMolecules.emailForm.errors.required", {
-    entity: t("neetoMolecules.emailForm.labels.sendTo")
-  }))
-});
-var REPLY_TO_FIELD_VALIDATION = yup.object({
-  replyTo: yup.string().nullable().email(t("neetoMolecules.emailForm.errors.invalidEmailAddress")).required(t("neetoMolecules.emailForm.errors.required", {
-    entity: t("neetoMolecules.emailForm.fields.replyToEmailAddress")
-  }))
-});
-var EDITOR_ADDONS = ["highlight", "emoji", "code-block", "block-quote", "image-upload", "divider", "video-embed"];
+var reactIs_development = {};
 
-/* eslint-disable @bigbinary/neeto/use-zustand-for-global-state-management */
-var EmailFormContext = /*#__PURE__*/React.createContext({
-  showSendToField: false,
-  showSendToAsRadio: false,
-  showReplyToField: false
-});
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-var ReplyToField = function ReplyToField(_ref) {
-  var replyToOptions = _ref.replyToOptions;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var isDropdownField = isNotEmpty(replyToOptions);
-  var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue;
-  if (isDropdownField) {
-    return /*#__PURE__*/React.createElement(Select, {
-      isClearable: true,
-      className: "w-full",
-      "data-testid": "replyToOptions",
-      label: t("neetoMolecules.emailForm.labels.replyTo"),
-      name: "replyTo",
-      options: replyToOptions,
-      labelProps: {
-        helpIconProps: _defineProperty(_defineProperty({
-          icon: Info
-        }, "data-testid", "reply-to-tooltip"), "tooltipProps", {
-          content: t("neetoMolecules.emailForm.tooltips.replyTo")
-        })
-      },
-      onChange: function onChange(data) {
-        var _data$value;
-        return setFieldValue("replyTo", (_data$value = data === null || data === void 0 ? void 0 : data.value) !== null && _data$value !== void 0 ? _data$value : "");
-      }
-    });
-  }
-  return /*#__PURE__*/React.createElement(Input, {
-    autoFocus: true,
-    required: true,
-    className: "w-full",
-    "data-testid": "replyToInput",
-    label: t("neetoMolecules.emailForm.labels.replyTo"),
-    name: "replyTo",
-    placeholder: t("neetoMolecules.emailForm.placeholders.emailPlaceholder"),
-    size: "large",
-    labelProps: {
-      helpIconProps: _defineProperty(_defineProperty({
-        icon: Info
-      }, "data-testid", "reply-to-tooltip"), "tooltipProps", {
-        content: t("neetoMolecules.emailForm.tooltips.replyTo")
-      })
-    }
-  });
-};
+var hasRequiredReactIs_development;
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+function requireReactIs_development () {
+	if (hasRequiredReactIs_development) return reactIs_development;
+	hasRequiredReactIs_development = 1;
 
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
 
-function _arrayWithoutHoles(arr) {
-  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
-}
 
-function _iterableToArray(iter) {
-  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
+	if (process.env.NODE_ENV !== "production") {
+	  (function() {
 
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
+	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+	// nor polyfill, then a plain number is used for performance.
+	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+	// (unstable) APIs that have been removed. Can we remove the symbols?
 
-function _nonIterableSpread() {
-  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
 
-function _toConsumableArray(arr) {
-  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
-}
+	function isValidElementType(type) {
+	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+	}
 
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
+	function typeOf(object) {
+	  if (typeof object === 'object' && object !== null) {
+	    var $$typeof = object.$$typeof;
 
-function _iterableToArrayLimit(r, l) {
-  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
-  if (null != t) {
-    var e,
-      n,
-      i,
-      u,
-      a = [],
-      f = !0,
-      o = !1;
-    try {
-      if (i = (t = t.call(r)).next, 0 === l) {
-        if (Object(t) !== t) return;
-        f = !1;
-      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
-    } catch (r) {
-      o = !0, n = r;
-    } finally {
-      try {
-        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
-      } finally {
-        if (o) throw n;
-      }
-    }
-    return a;
-  }
-}
+	    switch ($$typeof) {
+	      case REACT_ELEMENT_TYPE:
+	        var type = object.type;
 
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
+	        switch (type) {
+	          case REACT_ASYNC_MODE_TYPE:
+	          case REACT_CONCURRENT_MODE_TYPE:
+	          case REACT_FRAGMENT_TYPE:
+	          case REACT_PROFILER_TYPE:
+	          case REACT_STRICT_MODE_TYPE:
+	          case REACT_SUSPENSE_TYPE:
+	            return type;
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
-}
+	          default:
+	            var $$typeofType = type && type.$$typeof;
 
-var ALLOWED_FILE_TYPES = [".csv"];
-var ONE_MEGABYTE_IN_BYTES = 1024 * 1024;
-var DOWNLOAD_SAMPLE_EMAIL_CSV_FILE = "https://d2v7kzglnr2dnh.cloudfront.net/others/sample-bulk-email.csv";
+	            switch ($$typeofType) {
+	              case REACT_CONTEXT_TYPE:
+	              case REACT_FORWARD_REF_TYPE:
+	              case REACT_LAZY_TYPE:
+	              case REACT_MEMO_TYPE:
+	              case REACT_PROVIDER_TYPE:
+	                return $$typeofType;
 
-var Requirements = withT(function (_ref) {
-  var t = _ref.t,
-    fileSize = _ref.fileSize;
-  return /*#__PURE__*/React.createElement(Callout, {
-    className: "flex flex-col items-center py-6",
-    style: "info"
-  }, /*#__PURE__*/React.createElement("ul", {
-    className: "list-outside list-disc space-y-1 font-normal leading-normal"
-  }, fileSize && /*#__PURE__*/React.createElement("li", null, t("neetoMolecules.shareViaLink.requirements.fileTypeAndSize", {
-    limit: fileSize
-  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Trans, {
-    components: {
-      strong: /*#__PURE__*/React.createElement("strong", {
-        className: "font-semibold"
-      })
-    },
-    i18nKey: "neetoMolecules.shareViaLink.requirements.shouldContainColumns"
-  }))), /*#__PURE__*/React.createElement(Button, {
-    href: DOWNLOAD_SAMPLE_EMAIL_CSV_FILE,
-    icon: Download,
-    iconPosition: "left",
-    label: t("neetoMolecules.shareViaLink.bulkUploadPane.downloadSampleCSV"),
-    style: "link"
-  }));
-});
-var Requirements$1 = /*#__PURE__*/React.memo(Requirements);
+	              default:
+	                return $$typeof;
+	            }
 
-var BulkUploadPane = function BulkUploadPane(_ref) {
-  var _fileRejections$;
-  var isOpen = _ref.isOpen,
-    fileType = _ref.fileType,
-    fileSize = _ref.fileSize,
-    onClose = _ref.onClose,
-    handleFileSubmit = _ref.handleFileSubmit;
-  var _useDropzone = useDropzone({
-      accept: fileType,
-      maxFiles: 1,
-      maxSize: fileSize * ONE_MEGABYTE_IN_BYTES,
-      onDrop: function onDrop(files) {
-        return files[0] && handleFileSubmit(files[0]);
-      }
-    }),
-    getRootProps = _useDropzone.getRootProps,
-    getInputProps = _useDropzone.getInputProps,
-    isDragActive = _useDropzone.isDragActive,
-    fileRejections = _useDropzone.fileRejections;
-  var errors = (_fileRejections$ = fileRejections[0]) === null || _fileRejections$ === void 0 ? void 0 : _fileRejections$.errors.map(function (_ref2) {
-    var message = _ref2.message,
-      code = _ref2.code;
-    return /*#__PURE__*/React.createElement(Typography, {
-      className: "neeto-ui-text-error-500 items",
-      "data-cy": "file-input-error-message",
-      key: code,
-      style: "body3"
-    }, message);
-  });
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  return /*#__PURE__*/React.createElement(Pane, {
-    "data-testid": "bulk-upload-pane",
-    isOpen: isOpen,
-    onClose: onClose
-  }, /*#__PURE__*/React.createElement("div", {
-    tabIndex: 0
-  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
-    "data-testid": "bulk-upload-header",
-    style: "h2",
-    weight: "semibold"
-  }, t("neetoMolecules.shareViaLink.bulkUpload"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React.createElement(Requirements$1, {
-    fileSize: fileSize
-  }), /*#__PURE__*/React.createElement("div", getRootProps({
-    className: classnames("flex flex-col p-2 border neeto-ui-border-primary-500 border-dashed neeto-ui-rounded-md transition duration-500 ease-in-out hover:neeto-ui-bg-gray-100 cursor-pointer items-center", {
-      "neeto-ui-border-gray-100": isDragActive,
-      "neeto-ui-border-error neeto-ui-bg-pastel-red hover:neeto-ui-bg-pastel-red": fileRejections.length
-    })
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center space-y-3 p-4"
-  }, /*#__PURE__*/React.createElement(Upload, {
-    className: "neeto-ui-text-primary-500",
-    size: 32
-  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
-    "data-cy": "csv-upload-input",
-    "data-testid": "csv-upload-input"
-  })), isDragActive ? /*#__PURE__*/React.createElement(Typography, {
-    style: "body2"
-  }, t("neetoMolecules.shareViaLink.bulkUploadPane.dropFileHere")) : /*#__PURE__*/React.createElement("div", {
-    className: "flex flex-col items-center space-y-1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full items-center justify-center gap-x-1"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.dragNDrop",
-    components: {
-      Button: /*#__PURE__*/React.createElement(Button, {
-        style: "link"
-      })
-    }
-  })), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-700",
-    style: "body3"
-  }, fileType && /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.supportedFormat",
-    values: {
-      fileType: fileType
-    },
-    components: {
-      code: /*#__PURE__*/React.createElement("code", {
-        className: "neeto-ui-typography neeto-ui-text-body3 neeto-ui-bg-white m-0 border-l-0 p-0"
-      })
-    }
-  }), " ", fileSize && t("neetoMolecules.shareViaLink.bulkUploadPane.supportedSize", {
-    fileSize: fileSize
-  })))), errors))), /*#__PURE__*/React.createElement(Pane.Footer, {
-    className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React.createElement(Button, {
-    "data-cy": "bulk-upload-cancel-button",
-    "data-testid": "bulk-upload-cancel-button",
-    label: t("neetoMolecules.common.actions.cancel"),
-    style: "text",
-    type: "reset",
-    onClick: onClose
-  }))));
-};
+	        }
 
-var isValidEmail = function isValidEmail(email) {
-  return string().email().isValidSync(email);
-};
-var createEmailOptions = function createEmailOptions() {
-  var emails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return emails.map(function (email) {
-    return {
-      label: email,
-      value: email,
-      valid: isValidEmail(email)
-    };
-  });
-};
-var parseCsvEmails = function parseCsvEmails(file, onSuccess) {
-  Papa.parse(file, {
-    header: true,
-    skipEmptyLines: true,
-    transformHeader: function transformHeader(h) {
-      return h.toLowerCase().replace(/\W/g, "");
-    },
-    complete: function complete(results) {
-      var _results$meta$fields;
-      var isEmailFieldPresent = (_results$meta$fields = results.meta.fields) === null || _results$meta$fields === void 0 ? void 0 : _results$meta$fields.includes("email");
-      if (isEmailFieldPresent) {
-        var emails = results.data.filter(prop("email")).map(function (item) {
-          return item.email.trim();
-        });
-        onSuccess(createEmailOptions(emails));
-      } else {
-        Toastr.error(t("neetoMolecules.sendToFields.errors.invalidCsv"));
-      }
-    }
-  });
-};
-
-var SendToFields = function SendToFields(_ref) {
-  var emailInputProps = _ref.emailInputProps,
-    ccInputProps = _ref.ccInputProps,
-    bccInputProps = _ref.bccInputProps,
-    _ref$showUploadCsvBut = _ref.showUploadCsvButton,
-    showUploadCsvButton = _ref$showUploadCsvBut === void 0 ? false : _ref$showUploadCsvBut,
-    _ref$showCcBccButton = _ref.showCcBccButton,
-    showCcBccButton = _ref$showCcBccButton === void 0 ? false : _ref$showCcBccButton;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isBulkUploadPaneOpen = _useState2[0],
-    setIsBulkUploadPaneOpen = _useState2[1];
-  var sendToFieldRef = useRef();
-  var _useFormikContext = useFormikContext(),
-    _useFormikContext$val = _useFormikContext.values,
-    showCopyEmails = _useFormikContext$val.showCopyEmails,
-    existingSendToEmails = _useFormikContext$val[emailInputProps.name || "sendTo"],
-    setFieldValue = _useFormikContext.setFieldValue;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var handleCSVFile = function handleCSVFile(file) {
-    try {
-      var _sendToFieldRef$curre;
-      var onSuccess = function onSuccess(values) {
-        return setFieldValue(emailInputProps.name || "sendTo", [].concat(_toConsumableArray(existingSendToEmails), _toConsumableArray(values)));
-      };
-      parseCsvEmails(file, onSuccess);
-      setIsBulkUploadPaneOpen(false);
-      (_sendToFieldRef$curre = sendToFieldRef.current) === null || _sendToFieldRef$curre === void 0 ? void 0 : _sendToFieldRef$curre.focus();
-    } catch (error) {
-      Toastr.error(error);
-    }
-  };
-  var handelCcBccButtonClick = function handelCcBccButtonClick(e) {
-    e.stopPropagation();
-    setFieldValue("showCopyEmails", !showCopyEmails);
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: "relative w-full flex-col gap-2"
-  }, showUploadCsvButton && /*#__PURE__*/React.createElement(Button, {
-    className: "absolute top-0 right-1",
-    "data-testid": "bulk-upload-button",
-    icon: Upload,
-    label: t("neetoMolecules.shareViaLink.bulkUpload"),
-    size: "small",
-    style: "link",
-    onClick: function onClick() {
-      return setIsBulkUploadPaneOpen(true);
-    }
-  }), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
-    "data-testid": "emails",
-    name: "sendTo",
-    ref: sendToFieldRef
-  }, emailInputProps, {
-    suffix: showCcBccButton && /*#__PURE__*/React.createElement(Button, {
-      "data-cy": "cc-bcc-button",
-      "data-testid": "cc-bcc-button",
-      label: t("neetoMolecules.emailForm.labels.ccBcc"),
-      size: "small",
-      style: "link",
-      onClick: handelCcBccButtonClick
-    })
-  })), showCopyEmails && /*#__PURE__*/React.createElement("div", {
-    className: "mt-5 flex w-full flex-col gap-6"
-  }, /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
-    name: "sendToBcc"
-  }, ccInputProps)), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
-    name: "sendToCc"
-  }, bccInputProps))), /*#__PURE__*/React.createElement(BulkUploadPane, {
-    fileSize: globalProps.endUserUploadedFileSizeLimitInMb,
-    fileType: ALLOWED_FILE_TYPES,
-    handleFileSubmit: handleCSVFile,
-    isOpen: isBulkUploadPaneOpen,
-    onClose: function onClose() {
-      return setIsBulkUploadPaneOpen(false);
-    }
-  }));
-};
-
-var SendToField = withT(function (_ref) {
-  var t = _ref.t;
-  return /*#__PURE__*/React.createElement(SendToFields, {
-    showCcBccButton: true,
-    showUploadCsvButton: true,
-    bccInputProps: {
-      label: t("neetoMolecules.emailForm.labels.bCc"),
-      name: "sendToBcc",
-      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
-    },
-    ccInputProps: {
-      label: t("neetoMolecules.emailForm.labels.cc"),
-      name: "sendToCc",
-      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
-    },
-    emailInputProps: {
-      id: "sendTo",
-      name: "sendTo",
-      label: t("neetoMolecules.emailForm.labels.sendTo"),
-      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails"),
-      required: true
-    }
-  });
-});
-
-var SubjectField = function SubjectField(_ref) {
-  var name = _ref.name,
-    text = _ref.text,
-    updateText = _ref.updateText,
-    _ref$subjectVariables = _ref.subjectVariables,
-    subjectVariables = _ref$subjectVariables === void 0 ? [] : _ref$subjectVariables,
-    error = _ref.error,
-    _ref$required = _ref.required,
-    required = _ref$required === void 0 ? false : _ref$required;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isFieldFocusedOnce = _useState2[0],
-    setIsFieldFocusedOnce = _useState2[1];
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var tagClickHandler = function tagClickHandler(_ref2) {
-    var slug = _ref2.key;
-    var textAreaElement = document.querySelector("textarea[name=".concat(name, "]"));
-    var splitIndex = isFieldFocusedOnce && textAreaElement ? textAreaElement.selectionEnd : text.length;
-    var updatedSubject = [text.slice(0, splitIndex), " {{".concat(slug, "}}"), text.slice(splitIndex)].join("");
-    updateText(updatedSubject);
-  };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input$1, {
-    error: error,
-    name: name,
-    required: required,
-    label: t("neetoMolecules.emailForm.labels.subject"),
-    size: "large",
-    value: text,
-    suffix: /*#__PURE__*/React.createElement(DynamicVariables, {
-      variables: subjectVariables,
-      dropdownProps: {
-        className: "neeto-ui-dropdown__popup overflow-y-auto",
-        buttonSize: "small"
-      },
-      onVariableClick: tagClickHandler
-    }),
-    onChange: withEventTargetValue(updateText),
-    onFocus: function onFocus() {
-      return setIsFieldFocusedOnce(true);
-    }
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-600 mt-2",
-    "data-cy": "subject-input-variable-label",
-    style: "body3"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    components: {
-      span: /*#__PURE__*/React.createElement("span", {
-        className: "font-semibold"
-      })
-    },
-    i18nKey: "neetoMolecules.emailForm.helpText",
-    values: {
-      type: "subject"
-    }
-  })));
-};
-
-var EmailForm = function EmailForm(_ref) {
-  var _ref$messageVariables = _ref.messageVariables,
-    messageVariables = _ref$messageVariables === void 0 ? [] : _ref$messageVariables,
-    _ref$subjectVariables = _ref.subjectVariables,
-    subjectVariables = _ref$subjectVariables === void 0 ? [] : _ref$subjectVariables,
-    handleCancel = _ref.handleCancel,
-    isLoading = _ref.isLoading,
-    _ref$replyToOptions = _ref.replyToOptions,
-    replyToOptions = _ref$replyToOptions === void 0 ? [] : _ref$replyToOptions,
-    _ref$sendToOptions = _ref.sendToOptions,
-    sendToOptions = _ref$sendToOptions === void 0 ? [] : _ref$sendToOptions,
-    _ref$isUpdating = _ref.isUpdating,
-    isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
-    _ref$showFields = _ref.showFields,
-    showFields = _ref$showFields === void 0 ? true : _ref$showFields,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? "" : _ref$className;
-  var _useTranslation = useTranslation(),
-    t = _useTranslation.t;
-  var _useContext = useContext(EmailFormContext),
-    showSendToField = _useContext.showSendToField,
-    showSendToAsRadio = _useContext.showSendToAsRadio,
-    showReplyToField = _useContext.showReplyToField;
-  var _useFormikContext = useFormikContext(),
-    setFieldValue = _useFormikContext.setFieldValue,
-    dirty = _useFormikContext.dirty;
-  var showSendToRadioField = showSendToField && showSendToAsRadio && isNotEmpty(sendToOptions);
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "email-form",
-    className: classnames("flex flex-1 flex-col items-start gap-2", _defineProperty({}, className, className))
-  }, showFields && /*#__PURE__*/React.createElement("div", {
-    className: "flex w-full flex-col items-start justify-start gap-6"
-  }, /*#__PURE__*/React.createElement(Field, {
-    name: "subject"
-  }, function (_ref2) {
-    var value = _ref2.field.value,
-      error = _ref2.meta.error;
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(SubjectField, {
-      error: t(error),
-      name: "subject",
-      subjectVariables: subjectVariables,
-      required: true,
-      text: value,
-      updateText: function updateText(text) {
-        return setFieldValue("subject", text);
-      }
-    }));
-  }), showSendToRadioField ? /*#__PURE__*/React.createElement(Radio, {
-    "data-testid": "send-to-id",
-    label: t("neetoMolecules.emailForm.labels.sendTo"),
-    labelProps: {
-      required: true
-    },
-    name: "sendToId"
-  }, sendToOptions.map(function (_ref3) {
-    var label = _ref3.label,
-      value = _ref3.value;
-    return /*#__PURE__*/React.createElement(Radio.Item, {
-      label: label,
-      value: value,
-      key: value
-    });
-  })) : /*#__PURE__*/React.createElement(SendToField, null), showReplyToField && /*#__PURE__*/React.createElement(ReplyToField, {
-    replyToOptions: replyToOptions
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React.createElement(FormikEditor, {
-    isMenuCollapsible: true,
-    required: true,
-    addons: EDITOR_ADDONS,
-    "data-cy": "message-input-field",
-    id: "form_message",
-    label: t("neetoMolecules.emailForm.labels.message"),
-    name: "message",
-    variables: messageVariables
-  }), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-500 mt-2",
-    "data-cy": "message-input-variable-label",
-    style: "body3"
-  }, /*#__PURE__*/React.createElement(Trans, {
-    i18nKey: "neetoMolecules.emailForm.helpText",
-    values: {
-      type: "message"
-    },
-    components: {
-      span: /*#__PURE__*/React.createElement("span", {
-        className: "font-semibold"
-      })
-    }
-  })))), /*#__PURE__*/React.createElement(ActionBlock, {
-    className: "mt-6 w-full justify-start",
-    cancelButtonProps: {
-      disabled: false,
-      onClick: handleCancel,
-      className: "ml-3"
-    },
-    submitButtonProps: {
-      loading: isLoading,
-      disabled: !dirty || isUpdating
-    }
-  }));
-};
-
-var getValidationSchema = function getValidationSchema(_ref) {
-  var showSendToField = _ref.showSendToField,
-    showReplyToField = _ref.showReplyToField,
-    showSendToAsRadio = _ref.showSendToAsRadio,
-    customValidations = _ref.customValidations;
-  var schema = EMAIL_FORM_VALIDATION_SCHEMA.clone();
-  if (showSendToField) {
-    schema = schema.concat(showSendToAsRadio ? SEND_TO_ID_FIELD_VALIDATION : SEND_TO_FIELD_VALIDATION);
-  }
-  if (showReplyToField) schema = schema.concat(REPLY_TO_FIELD_VALIDATION);
-  return schema.shape(customValidations);
-};
-
-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 EmailFormProvider = function EmailFormProvider(_ref) {
-  var _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
-    _ref$initialValues = _ref.initialValues,
-    initialValues = _ref$initialValues === void 0 ? INITIAL_FORM_VALUES : _ref$initialValues,
-    children = _ref.children,
-    formikProps = _ref.formikProps,
-    _ref$validationSchema = _ref.validationSchema,
-    customValidations = _ref$validationSchema === void 0 ? {} : _ref$validationSchema,
-    _ref$showSendToField = _ref.showSendToField,
-    showSendToField = _ref$showSendToField === void 0 ? false : _ref$showSendToField,
-    _ref$showReplyToField = _ref.showReplyToField,
-    showReplyToField = _ref$showReplyToField === void 0 ? false : _ref$showReplyToField,
-    _ref$showSendToAsRadi = _ref.showSendToAsRadio,
-    showSendToAsRadio = _ref$showSendToAsRadi === void 0 ? false : _ref$showSendToAsRadi;
-  return /*#__PURE__*/React.createElement("div", {
-    "data-testid": "email-form-provider"
-  }, /*#__PURE__*/React.createElement(EmailFormContext.Provider, {
-    value: {
-      showSendToField: showSendToField,
-      showSendToAsRadio: showSendToAsRadio,
-      showReplyToField: showReplyToField
-    }
-  }, /*#__PURE__*/React.createElement(Form, {
-    formikProps: _objectSpread({
-      enableReinitialize: true,
-      validationSchema: getValidationSchema({
-        showSendToField: showSendToField,
-        showReplyToField: showReplyToField,
-        showSendToAsRadio: showSendToAsRadio,
-        customValidations: customValidations
-      }),
-      initialValues: _objectSpread(_objectSpread({}, initialValues), {}, {
-        replyTo: initialValues.replyTo || globalProps.user.email
-      }),
-      onSubmit: onSubmit
-    }, formikProps)
-  }, children)));
-};
-
-var propTypes = {exports: {}};
-
-var reactIs = {exports: {}};
-
-var reactIs_production_min = {};
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_production_min;
-
-function requireReactIs_production_min () {
-	if (hasRequiredReactIs_production_min) return reactIs_production_min;
-	hasRequiredReactIs_production_min = 1;
-var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b?
-	Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119;
-	function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}reactIs_production_min.AsyncMode=l;reactIs_production_min.ConcurrentMode=m;reactIs_production_min.ContextConsumer=k;reactIs_production_min.ContextProvider=h;reactIs_production_min.Element=c;reactIs_production_min.ForwardRef=n;reactIs_production_min.Fragment=e;reactIs_production_min.Lazy=t;reactIs_production_min.Memo=r;reactIs_production_min.Portal=d;
-	reactIs_production_min.Profiler=g;reactIs_production_min.StrictMode=f;reactIs_production_min.Suspense=p;reactIs_production_min.isAsyncMode=function(a){return A(a)||z(a)===l};reactIs_production_min.isConcurrentMode=A;reactIs_production_min.isContextConsumer=function(a){return z(a)===k};reactIs_production_min.isContextProvider=function(a){return z(a)===h};reactIs_production_min.isElement=function(a){return "object"===typeof a&&null!==a&&a.$$typeof===c};reactIs_production_min.isForwardRef=function(a){return z(a)===n};reactIs_production_min.isFragment=function(a){return z(a)===e};reactIs_production_min.isLazy=function(a){return z(a)===t};
-	reactIs_production_min.isMemo=function(a){return z(a)===r};reactIs_production_min.isPortal=function(a){return z(a)===d};reactIs_production_min.isProfiler=function(a){return z(a)===g};reactIs_production_min.isStrictMode=function(a){return z(a)===f};reactIs_production_min.isSuspense=function(a){return z(a)===p};
-	reactIs_production_min.isValidElementType=function(a){return "string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};reactIs_production_min.typeOf=z;
-	return reactIs_production_min;
-}
-
-var reactIs_development = {};
-
-/** @license React v16.13.1
- * react-is.development.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var hasRequiredReactIs_development;
-
-function requireReactIs_development () {
-	if (hasRequiredReactIs_development) return reactIs_development;
-	hasRequiredReactIs_development = 1;
-
-
-
-	if (process.env.NODE_ENV !== "production") {
-	  (function() {
-
-	// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
-	// nor polyfill, then a plain number is used for performance.
-	var hasSymbol = typeof Symbol === 'function' && Symbol.for;
-	var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
-	var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
-	var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
-	var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
-	var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
-	var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
-	var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
-	// (unstable) APIs that have been removed. Can we remove the symbols?
-
-	var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
-	var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
-	var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
-	var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
-	var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
-	var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
-	var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
-	var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
-	var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
-	var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
-	var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
-
-	function isValidElementType(type) {
-	  return typeof type === 'string' || typeof type === 'function' || // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
-	  type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
-	}
-
-	function typeOf(object) {
-	  if (typeof object === 'object' && object !== null) {
-	    var $$typeof = object.$$typeof;
-
-	    switch ($$typeof) {
-	      case REACT_ELEMENT_TYPE:
-	        var type = object.type;
-
-	        switch (type) {
-	          case REACT_ASYNC_MODE_TYPE:
-	          case REACT_CONCURRENT_MODE_TYPE:
-	          case REACT_FRAGMENT_TYPE:
-	          case REACT_PROFILER_TYPE:
-	          case REACT_STRICT_MODE_TYPE:
-	          case REACT_SUSPENSE_TYPE:
-	            return type;
-
-	          default:
-	            var $$typeofType = type && type.$$typeof;
-
-	            switch ($$typeofType) {
-	              case REACT_CONTEXT_TYPE:
-	              case REACT_FORWARD_REF_TYPE:
-	              case REACT_LAZY_TYPE:
-	              case REACT_MEMO_TYPE:
-	              case REACT_PROVIDER_TYPE:
-	                return $$typeofType;
-
-	              default:
-	                return $$typeof;
-	            }
-
-	        }
-
-	      case REACT_PORTAL_TYPE:
-	        return $$typeof;
-	    }
-	  }
+	      case REACT_PORTAL_TYPE:
+	        return $$typeof;
+	    }
+	  }
 
 	  return undefined;
 	} // AsyncMode is deprecated along with isAsyncMode
@@ -1711,315 +1009,1017 @@ function requireFactoryWithTypeCheckers () {
 	          return false;
 	        }
 
-	        return true;
-	      default:
-	        return false;
-	    }
-	  }
+	        return true;
+	      default:
+	        return false;
+	    }
+	  }
+
+	  function isSymbol(propType, propValue) {
+	    // Native Symbol.
+	    if (propType === 'symbol') {
+	      return true;
+	    }
+
+	    // falsy value can't be a Symbol
+	    if (!propValue) {
+	      return false;
+	    }
+
+	    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
+	    if (propValue['@@toStringTag'] === 'Symbol') {
+	      return true;
+	    }
+
+	    // Fallback for non-spec compliant Symbols which are polyfilled.
+	    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
+	      return true;
+	    }
+
+	    return false;
+	  }
+
+	  // Equivalent of `typeof` but with special handling for array and regexp.
+	  function getPropType(propValue) {
+	    var propType = typeof propValue;
+	    if (Array.isArray(propValue)) {
+	      return 'array';
+	    }
+	    if (propValue instanceof RegExp) {
+	      // Old webkits (at least until Android 4.0) return 'function' rather than
+	      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
+	      // passes PropTypes.object.
+	      return 'object';
+	    }
+	    if (isSymbol(propType, propValue)) {
+	      return 'symbol';
+	    }
+	    return propType;
+	  }
+
+	  // This handles more types than `getPropType`. Only used for error messages.
+	  // See `createPrimitiveTypeChecker`.
+	  function getPreciseType(propValue) {
+	    if (typeof propValue === 'undefined' || propValue === null) {
+	      return '' + propValue;
+	    }
+	    var propType = getPropType(propValue);
+	    if (propType === 'object') {
+	      if (propValue instanceof Date) {
+	        return 'date';
+	      } else if (propValue instanceof RegExp) {
+	        return 'regexp';
+	      }
+	    }
+	    return propType;
+	  }
+
+	  // Returns a string that is postfixed to a warning about an invalid type.
+	  // For example, "undefined" or "of type array"
+	  function getPostfixForTypeWarning(value) {
+	    var type = getPreciseType(value);
+	    switch (type) {
+	      case 'array':
+	      case 'object':
+	        return 'an ' + type;
+	      case 'boolean':
+	      case 'date':
+	      case 'regexp':
+	        return 'a ' + type;
+	      default:
+	        return type;
+	    }
+	  }
+
+	  // Returns class name of the object, if any.
+	  function getClassName(propValue) {
+	    if (!propValue.constructor || !propValue.constructor.name) {
+	      return ANONYMOUS;
+	    }
+	    return propValue.constructor.name;
+	  }
+
+	  ReactPropTypes.checkPropTypes = checkPropTypes;
+	  ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+
+	  return ReactPropTypes;
+	};
+	return factoryWithTypeCheckers;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var factoryWithThrowingShims;
+var hasRequiredFactoryWithThrowingShims;
+
+function requireFactoryWithThrowingShims () {
+	if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
+	hasRequiredFactoryWithThrowingShims = 1;
+
+	var ReactPropTypesSecret = requireReactPropTypesSecret();
+
+	function emptyFunction() {}
+	function emptyFunctionWithReset() {}
+	emptyFunctionWithReset.resetWarningCache = emptyFunction;
+
+	factoryWithThrowingShims = function() {
+	  function shim(props, propName, componentName, location, propFullName, secret) {
+	    if (secret === ReactPropTypesSecret) {
+	      // It is still safe when called from React.
+	      return;
+	    }
+	    var err = new Error(
+	      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
+	      'Use PropTypes.checkPropTypes() to call them. ' +
+	      'Read more at http://fb.me/use-check-prop-types'
+	    );
+	    err.name = 'Invariant Violation';
+	    throw err;
+	  }	  shim.isRequired = shim;
+	  function getShim() {
+	    return shim;
+	  }	  // Important!
+	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
+	  var ReactPropTypes = {
+	    array: shim,
+	    bigint: shim,
+	    bool: shim,
+	    func: shim,
+	    number: shim,
+	    object: shim,
+	    string: shim,
+	    symbol: shim,
+
+	    any: shim,
+	    arrayOf: getShim,
+	    element: shim,
+	    elementType: shim,
+	    instanceOf: getShim,
+	    node: shim,
+	    objectOf: getShim,
+	    oneOf: getShim,
+	    oneOfType: getShim,
+	    shape: getShim,
+	    exact: getShim,
+
+	    checkPropTypes: emptyFunctionWithReset,
+	    resetWarningCache: emptyFunction
+	  };
+
+	  ReactPropTypes.PropTypes = ReactPropTypes;
+
+	  return ReactPropTypes;
+	};
+	return factoryWithThrowingShims;
+}
+
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+if (process.env.NODE_ENV !== 'production') {
+  var ReactIs = requireReactIs();
+
+  // By explicitly using `prop-types` you are opting into new development behavior.
+  // http://fb.me/prop-types-in-prod
+  var throwOnDirectAccess = true;
+  propTypes.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
+} else {
+  // By explicitly using `prop-types` you are opting into new production behavior.
+  // http://fb.me/prop-types-in-prod
+  propTypes.exports = requireFactoryWithThrowingShims()();
+}
+
+var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
+var EmailPreview = withT(function (_ref) {
+  var t = _ref.t,
+    _ref$to = _ref.to,
+    to = _ref$to === void 0 ? [] : _ref$to,
+    from = _ref.from,
+    subject = _ref.subject,
+    body = _ref.body,
+    productName = _ref.productName,
+    actionButtonText = _ref.actionButtonText,
+    logo = _ref.logo,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-cy": "email-preview-card",
+    "data-testid": "email-preview",
+    className: classnames("neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border", className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex gap-2",
+    "data-cy": "email-send-to-preview",
+    "data-testid": "email-to-block"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.to"), ":"), isPresent(to) ? /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    lineHeight: "normal",
+    style: "body2"
+  }, to.join(", ")) : /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
+  })), from && /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2 pt-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.from"), ":"), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    "data-cy": "email-send-from-preview",
+    lineHeight: "normal",
+    style: "body2"
+  }, from)), /*#__PURE__*/React.createElement("div", {
+    className: "flex items-center gap-2 pt-3"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500",
+    lineHeight: "normal",
+    style: "body2"
+  }, t("neetoMolecules.emailPreview.subject"), ":"), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+    "data-cy": "email-subject-preview",
+    lineHeight: "normal",
+    style: "body2"
+  }, subject || /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
+    "data-cy": "email-body-preview-container"
+  }, body ? /*#__PURE__*/React.createElement(MemoizedEditorContent, {
+    content: body
+  }) : /*#__PURE__*/React.createElement("div", {
+    className: "space-y-4"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80 max-w-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72 max-w-full"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80 max-w-full"
+  })), actionButtonText && /*#__PURE__*/React.createElement("div", {
+    className: "mt-6 flex w-full items-center justify-center"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "pointer-events-none",
+    label: actionButtonText
+  })), logo && /*#__PURE__*/React.createElement("img", {
+    alt: t("neetoMolecules.emailPreview.logoAltText"),
+    className: "h-20 w-36 object-cover",
+    "data-cy": "company-logo-preview",
+    src: logo
+  })), productName && /*#__PURE__*/React.createElement("div", {
+    className: "neeto-ui-bg-gray-100 mt-auto p-2",
+    "data-testid": "product-name-block"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-600 text-center leading-6",
+    style: "body3"
+  }, t("neetoMolecules.emailPreview.poweredBy"), /*#__PURE__*/React.createElement("span", {
+    className: "neeto-ui-text-gray-800 font-medium"
+  }, productName))));
+});
+EmailPreview.propTypes = {
+  /**
+   * The value of the send-to field.
+   */
+  to: propTypes.exports.arrayOf(propTypes.exports.string),
+  /**
+   * The value of the send-from field.
+   */
+  from: propTypes.exports.string,
+  /**
+   * The subject of the email.
+   */
+  subject: propTypes.exports.string,
+  /**
+   * The body of the email.
+   */
+  body: propTypes.exports.string,
+  /**
+   * The name of the neeto product to be previewed.
+   */
+  productName: propTypes.exports.string,
+  /**
+   * The text to be shown in the action button.
+   */
+  actionButtonText: propTypes.exports.string,
+  /**
+   * Source link for the company logo.
+   */
+  logo: propTypes.exports.string
+};
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
 
-	  function isSymbol(propType, propValue) {
-	    // Native Symbol.
-	    if (propType === 'symbol') {
-	      return true;
-	    }
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
 
-	    // falsy value can't be a Symbol
-	    if (!propValue) {
-	      return false;
-	    }
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
 
-	    // 19.4.3.5 Symbol.prototype[@@toStringTag] === 'Symbol'
-	    if (propValue['@@toStringTag'] === 'Symbol') {
-	      return true;
-	    }
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
 
-	    // Fallback for non-spec compliant Symbols which are polyfilled.
-	    if (typeof Symbol === 'function' && propValue instanceof Symbol) {
-	      return true;
-	    }
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 
-	    return false;
-	  }
+var INITIAL_FORM_VALUES = {
+  sendTo: [],
+  sendToId: "",
+  sendToCc: [],
+  sendToBcc: [],
+  replyTo: "",
+  showCopyEmails: false,
+  subject: "",
+  message: ""
+};
+var EMAIL_FORM_VALIDATION_SCHEMA = yup.object({
+  subject: yup.string().required(t("neetoMolecules.emailForm.errors.subjectRequired")),
+  message: yup.string().test("message", t("neetoMolecules.emailForm.errors.messageRequired"), function (value) {
+    return !isEditorEmpty(value);
+  })
+});
+var SEND_TO_FIELD_VALIDATION = yup.object({
+  sendTo: yup.array().min(1, t("neetoMolecules.emailForm.errors.required", {
+    entity: t("neetoMolecules.emailForm.fields.sendToEmailAddress")
+  })).test("all-emails-valid", t("neetoMolecules.emailForm.errors.invalidEmailAddress"), function (emails) {
+    return emails === null || emails === void 0 ? void 0 : emails.every(prop("valid"));
+  }).nullable()
+});
+var SEND_TO_ID_FIELD_VALIDATION = yup.object({
+  sendToId: yup.string().required(t("neetoMolecules.emailForm.errors.required", {
+    entity: t("neetoMolecules.emailForm.labels.sendTo")
+  }))
+});
+var REPLY_TO_FIELD_VALIDATION = yup.object({
+  replyTo: yup.string().nullable().email(t("neetoMolecules.emailForm.errors.invalidEmailAddress")).required(t("neetoMolecules.emailForm.errors.required", {
+    entity: t("neetoMolecules.emailForm.fields.replyToEmailAddress")
+  }))
+});
+var EDITOR_ADDONS = ["highlight", "emoji", "code-block", "block-quote", "image-upload", "divider", "video-embed"];
 
-	  // Equivalent of `typeof` but with special handling for array and regexp.
-	  function getPropType(propValue) {
-	    var propType = typeof propValue;
-	    if (Array.isArray(propValue)) {
-	      return 'array';
-	    }
-	    if (propValue instanceof RegExp) {
-	      // Old webkits (at least until Android 4.0) return 'function' rather than
-	      // 'object' for typeof a RegExp. We'll normalize this here so that /bla/
-	      // passes PropTypes.object.
-	      return 'object';
-	    }
-	    if (isSymbol(propType, propValue)) {
-	      return 'symbol';
-	    }
-	    return propType;
-	  }
+/* eslint-disable @bigbinary/neeto/use-zustand-for-global-state-management */
+var EmailFormContext = /*#__PURE__*/React.createContext({
+  showSendToField: false,
+  showSendToAsRadio: false,
+  showReplyToField: false
+});
 
-	  // This handles more types than `getPropType`. Only used for error messages.
-	  // See `createPrimitiveTypeChecker`.
-	  function getPreciseType(propValue) {
-	    if (typeof propValue === 'undefined' || propValue === null) {
-	      return '' + propValue;
-	    }
-	    var propType = getPropType(propValue);
-	    if (propType === 'object') {
-	      if (propValue instanceof Date) {
-	        return 'date';
-	      } else if (propValue instanceof RegExp) {
-	        return 'regexp';
-	      }
-	    }
-	    return propType;
-	  }
+var ReplyToField = function ReplyToField(_ref) {
+  var replyToOptions = _ref.replyToOptions;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isDropdownField = isNotEmpty(replyToOptions);
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue;
+  if (isDropdownField) {
+    return /*#__PURE__*/React.createElement(Select, {
+      isClearable: true,
+      className: "w-full",
+      "data-testid": "replyToOptions",
+      label: t("neetoMolecules.emailForm.labels.replyTo"),
+      name: "replyTo",
+      options: replyToOptions,
+      labelProps: {
+        helpIconProps: _defineProperty(_defineProperty({
+          icon: Info
+        }, "data-testid", "reply-to-tooltip"), "tooltipProps", {
+          content: t("neetoMolecules.emailForm.tooltips.replyTo")
+        })
+      },
+      onChange: function onChange(data) {
+        var _data$value;
+        return setFieldValue("replyTo", (_data$value = data === null || data === void 0 ? void 0 : data.value) !== null && _data$value !== void 0 ? _data$value : "");
+      }
+    });
+  }
+  return /*#__PURE__*/React.createElement(Input, {
+    autoFocus: true,
+    required: true,
+    className: "w-full",
+    "data-testid": "replyToInput",
+    label: t("neetoMolecules.emailForm.labels.replyTo"),
+    name: "replyTo",
+    placeholder: t("neetoMolecules.emailForm.placeholders.emailPlaceholder"),
+    size: "large",
+    labelProps: {
+      helpIconProps: _defineProperty(_defineProperty({
+        icon: Info
+      }, "data-testid", "reply-to-tooltip"), "tooltipProps", {
+        content: t("neetoMolecules.emailForm.tooltips.replyTo")
+      })
+    }
+  });
+};
 
-	  // Returns a string that is postfixed to a warning about an invalid type.
-	  // For example, "undefined" or "of type array"
-	  function getPostfixForTypeWarning(value) {
-	    var type = getPreciseType(value);
-	    switch (type) {
-	      case 'array':
-	      case 'object':
-	        return 'an ' + type;
-	      case 'boolean':
-	      case 'date':
-	      case 'regexp':
-	        return 'a ' + type;
-	      default:
-	        return type;
-	    }
-	  }
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
 
-	  // Returns class name of the object, if any.
-	  function getClassName(propValue) {
-	    if (!propValue.constructor || !propValue.constructor.name) {
-	      return ANONYMOUS;
-	    }
-	    return propValue.constructor.name;
-	  }
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
 
-	  ReactPropTypes.checkPropTypes = checkPropTypes;
-	  ReactPropTypes.resetWarningCache = checkPropTypes.resetWarningCache;
-	  ReactPropTypes.PropTypes = ReactPropTypes;
+function _arrayWithoutHoles(arr) {
+  if (Array.isArray(arr)) return _arrayLikeToArray(arr);
+}
 
-	  return ReactPropTypes;
-	};
-	return factoryWithTypeCheckers;
+function _iterableToArray(iter) {
+  if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
 }
 
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
 
-var factoryWithThrowingShims;
-var hasRequiredFactoryWithThrowingShims;
+function _nonIterableSpread() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-function requireFactoryWithThrowingShims () {
-	if (hasRequiredFactoryWithThrowingShims) return factoryWithThrowingShims;
-	hasRequiredFactoryWithThrowingShims = 1;
+function _toConsumableArray(arr) {
+  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
+}
 
-	var ReactPropTypesSecret = requireReactPropTypesSecret();
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
 
-	function emptyFunction() {}
-	function emptyFunctionWithReset() {}
-	emptyFunctionWithReset.resetWarningCache = emptyFunction;
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
 
-	factoryWithThrowingShims = function() {
-	  function shim(props, propName, componentName, location, propFullName, secret) {
-	    if (secret === ReactPropTypesSecret) {
-	      // It is still safe when called from React.
-	      return;
-	    }
-	    var err = new Error(
-	      'Calling PropTypes validators directly is not supported by the `prop-types` package. ' +
-	      'Use PropTypes.checkPropTypes() to call them. ' +
-	      'Read more at http://fb.me/use-check-prop-types'
-	    );
-	    err.name = 'Invariant Violation';
-	    throw err;
-	  }	  shim.isRequired = shim;
-	  function getShim() {
-	    return shim;
-	  }	  // Important!
-	  // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
-	  var ReactPropTypes = {
-	    array: shim,
-	    bigint: shim,
-	    bool: shim,
-	    func: shim,
-	    number: shim,
-	    object: shim,
-	    string: shim,
-	    symbol: shim,
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
 
-	    any: shim,
-	    arrayOf: getShim,
-	    element: shim,
-	    elementType: shim,
-	    instanceOf: getShim,
-	    node: shim,
-	    objectOf: getShim,
-	    oneOf: getShim,
-	    oneOfType: getShim,
-	    shape: getShim,
-	    exact: getShim,
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
 
-	    checkPropTypes: emptyFunctionWithReset,
-	    resetWarningCache: emptyFunction
-	  };
+var ALLOWED_FILE_TYPES = [".csv"];
+var ONE_MEGABYTE_IN_BYTES = 1024 * 1024;
+var DOWNLOAD_SAMPLE_EMAIL_CSV_FILE = "https://d2v7kzglnr2dnh.cloudfront.net/others/sample-bulk-email.csv";
 
-	  ReactPropTypes.PropTypes = ReactPropTypes;
+var Requirements = withT(function (_ref) {
+  var t = _ref.t,
+    fileSize = _ref.fileSize;
+  return /*#__PURE__*/React.createElement(Callout, {
+    className: "flex flex-col items-center py-6",
+    style: "info"
+  }, /*#__PURE__*/React.createElement("ul", {
+    className: "list-outside list-disc space-y-1 font-normal leading-normal"
+  }, fileSize && /*#__PURE__*/React.createElement("li", null, t("neetoMolecules.shareViaLink.requirements.fileTypeAndSize", {
+    limit: fileSize
+  })), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(Trans, {
+    components: {
+      strong: /*#__PURE__*/React.createElement("strong", {
+        className: "font-semibold"
+      })
+    },
+    i18nKey: "neetoMolecules.shareViaLink.requirements.shouldContainColumns"
+  }))), /*#__PURE__*/React.createElement(Button, {
+    href: DOWNLOAD_SAMPLE_EMAIL_CSV_FILE,
+    icon: Download,
+    iconPosition: "left",
+    label: t("neetoMolecules.shareViaLink.bulkUploadPane.downloadSampleCSV"),
+    style: "link"
+  }));
+});
+var Requirements$1 = /*#__PURE__*/React.memo(Requirements);
 
-	  return ReactPropTypes;
-	};
-	return factoryWithThrowingShims;
-}
+var BulkUploadPane = function BulkUploadPane(_ref) {
+  var _fileRejections$;
+  var isOpen = _ref.isOpen,
+    fileType = _ref.fileType,
+    fileSize = _ref.fileSize,
+    onClose = _ref.onClose,
+    handleFileSubmit = _ref.handleFileSubmit;
+  var _useDropzone = useDropzone({
+      accept: fileType,
+      maxFiles: 1,
+      maxSize: fileSize * ONE_MEGABYTE_IN_BYTES,
+      onDrop: function onDrop(files) {
+        return files[0] && handleFileSubmit(files[0]);
+      }
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive,
+    fileRejections = _useDropzone.fileRejections;
+  var errors = (_fileRejections$ = fileRejections[0]) === null || _fileRejections$ === void 0 ? void 0 : _fileRejections$.errors.map(function (_ref2) {
+    var message = _ref2.message,
+      code = _ref2.code;
+    return /*#__PURE__*/React.createElement(Typography, {
+      className: "neeto-ui-text-error-500 items",
+      "data-cy": "file-input-error-message",
+      key: code,
+      style: "body3"
+    }, message);
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/React.createElement(Pane, {
+    "data-testid": "bulk-upload-pane",
+    isOpen: isOpen,
+    onClose: onClose
+  }, /*#__PURE__*/React.createElement("div", {
+    tabIndex: 0
+  }, /*#__PURE__*/React.createElement(Pane.Header, null, /*#__PURE__*/React.createElement(Typography, {
+    "data-testid": "bulk-upload-header",
+    style: "h2",
+    weight: "semibold"
+  }, t("neetoMolecules.shareViaLink.bulkUpload"))), /*#__PURE__*/React.createElement(Pane.Body, null, /*#__PURE__*/React.createElement("div", {
+    className: "w-full space-y-4"
+  }, /*#__PURE__*/React.createElement(Requirements$1, {
+    fileSize: fileSize
+  }), /*#__PURE__*/React.createElement("div", getRootProps({
+    className: classnames("flex flex-col p-2 border neeto-ui-border-primary-500 border-dashed neeto-ui-rounded-md transition duration-500 ease-in-out hover:neeto-ui-bg-gray-100 cursor-pointer items-center", {
+      "neeto-ui-border-gray-100": isDragActive,
+      "neeto-ui-border-error neeto-ui-bg-pastel-red hover:neeto-ui-bg-pastel-red": fileRejections.length
+    })
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center space-y-3 p-4"
+  }, /*#__PURE__*/React.createElement(Upload, {
+    className: "neeto-ui-text-primary-500",
+    size: 32
+  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
+    "data-cy": "csv-upload-input",
+    "data-testid": "csv-upload-input"
+  })), isDragActive ? /*#__PURE__*/React.createElement(Typography, {
+    style: "body2"
+  }, t("neetoMolecules.shareViaLink.bulkUploadPane.dropFileHere")) : /*#__PURE__*/React.createElement("div", {
+    className: "flex flex-col items-center space-y-1"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full items-center justify-center gap-x-1"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.dragNDrop",
+    components: {
+      Button: /*#__PURE__*/React.createElement(Button, {
+        style: "link"
+      })
+    }
+  })), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-700",
+    style: "body3"
+  }, fileType && /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.supportedFormat",
+    values: {
+      fileType: fileType
+    },
+    components: {
+      code: /*#__PURE__*/React.createElement("code", {
+        className: "neeto-ui-typography neeto-ui-text-body3 neeto-ui-bg-white m-0 border-l-0 p-0"
+      })
+    }
+  }), " ", fileSize && t("neetoMolecules.shareViaLink.bulkUploadPane.supportedSize", {
+    fileSize: fileSize
+  })))), errors))), /*#__PURE__*/React.createElement(Pane.Footer, {
+    className: "flex items-center space-x-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "bulk-upload-cancel-button",
+    "data-testid": "bulk-upload-cancel-button",
+    label: t("neetoMolecules.common.actions.cancel"),
+    style: "text",
+    type: "reset",
+    onClick: onClose
+  }))));
+};
 
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
+var isValidEmail = function isValidEmail(email) {
+  return string().email().isValidSync(email);
+};
+var createEmailOptions = function createEmailOptions() {
+  var emails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return emails.map(function (email) {
+    return {
+      label: email,
+      value: email,
+      valid: isValidEmail(email)
+    };
+  });
+};
+var parseCsvEmails = function parseCsvEmails(file, onSuccess) {
+  Papa.parse(file, {
+    header: true,
+    skipEmptyLines: true,
+    transformHeader: function transformHeader(h) {
+      return h.toLowerCase().replace(/\W/g, "");
+    },
+    complete: function complete(results) {
+      var _results$meta$fields;
+      var isEmailFieldPresent = (_results$meta$fields = results.meta.fields) === null || _results$meta$fields === void 0 ? void 0 : _results$meta$fields.includes("email");
+      if (isEmailFieldPresent) {
+        var emails = results.data.filter(prop("email")).map(function (item) {
+          return item.email.trim();
+        });
+        onSuccess(createEmailOptions(emails));
+      } else {
+        Toastr.error(t("neetoMolecules.sendToFields.errors.invalidCsv"));
+      }
+    }
+  });
+};
 
-if (process.env.NODE_ENV !== 'production') {
-  var ReactIs = requireReactIs();
+var SendToFields = function SendToFields(_ref) {
+  var emailInputProps = _ref.emailInputProps,
+    ccInputProps = _ref.ccInputProps,
+    bccInputProps = _ref.bccInputProps,
+    _ref$showUploadCsvBut = _ref.showUploadCsvButton,
+    showUploadCsvButton = _ref$showUploadCsvBut === void 0 ? false : _ref$showUploadCsvBut,
+    _ref$showCcBccButton = _ref.showCcBccButton,
+    showCcBccButton = _ref$showCcBccButton === void 0 ? false : _ref$showCcBccButton;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isBulkUploadPaneOpen = _useState2[0],
+    setIsBulkUploadPaneOpen = _useState2[1];
+  var sendToFieldRef = useRef();
+  var _useFormikContext = useFormikContext(),
+    _useFormikContext$val = _useFormikContext.values,
+    showCopyEmails = _useFormikContext$val.showCopyEmails,
+    existingSendToEmails = _useFormikContext$val[emailInputProps.name || "sendTo"],
+    setFieldValue = _useFormikContext.setFieldValue;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var handleCSVFile = function handleCSVFile(file) {
+    try {
+      var _sendToFieldRef$curre;
+      var onSuccess = function onSuccess(values) {
+        return setFieldValue(emailInputProps.name || "sendTo", [].concat(_toConsumableArray(existingSendToEmails), _toConsumableArray(values)));
+      };
+      parseCsvEmails(file, onSuccess);
+      setIsBulkUploadPaneOpen(false);
+      (_sendToFieldRef$curre = sendToFieldRef.current) === null || _sendToFieldRef$curre === void 0 ? void 0 : _sendToFieldRef$curre.focus();
+    } catch (error) {
+      Toastr.error(error);
+    }
+  };
+  var handelCcBccButtonClick = function handelCcBccButtonClick(e) {
+    e.stopPropagation();
+    setFieldValue("showCopyEmails", !showCopyEmails);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "relative w-full flex-col gap-2"
+  }, showUploadCsvButton && /*#__PURE__*/React.createElement(Button, {
+    className: "absolute top-0 right-1",
+    "data-testid": "bulk-upload-button",
+    icon: Upload,
+    label: t("neetoMolecules.shareViaLink.bulkUpload"),
+    size: "small",
+    style: "link",
+    onClick: function onClick() {
+      return setIsBulkUploadPaneOpen(true);
+    }
+  }), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    "data-testid": "emails",
+    name: "sendTo",
+    ref: sendToFieldRef
+  }, emailInputProps, {
+    suffix: showCcBccButton && /*#__PURE__*/React.createElement(Button, {
+      "data-cy": "cc-bcc-button",
+      "data-testid": "cc-bcc-button",
+      label: t("neetoMolecules.emailForm.labels.ccBcc"),
+      size: "small",
+      style: "link",
+      onClick: handelCcBccButtonClick
+    })
+  })), showCopyEmails && /*#__PURE__*/React.createElement("div", {
+    className: "mt-5 flex w-full flex-col gap-6"
+  }, /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    name: "sendToBcc"
+  }, ccInputProps)), /*#__PURE__*/React.createElement(MultiEmailInput, _extends({
+    name: "sendToCc"
+  }, bccInputProps))), /*#__PURE__*/React.createElement(BulkUploadPane, {
+    fileSize: globalProps.endUserUploadedFileSizeLimitInMb,
+    fileType: ALLOWED_FILE_TYPES,
+    handleFileSubmit: handleCSVFile,
+    isOpen: isBulkUploadPaneOpen,
+    onClose: function onClose() {
+      return setIsBulkUploadPaneOpen(false);
+    }
+  }));
+};
 
-  // By explicitly using `prop-types` you are opting into new development behavior.
-  // http://fb.me/prop-types-in-prod
-  var throwOnDirectAccess = true;
-  propTypes.exports = requireFactoryWithTypeCheckers()(ReactIs.isElement, throwOnDirectAccess);
-} else {
-  // By explicitly using `prop-types` you are opting into new production behavior.
-  // http://fb.me/prop-types-in-prod
-  propTypes.exports = requireFactoryWithThrowingShims()();
-}
+var SendToField = withT(function (_ref) {
+  var t = _ref.t;
+  return /*#__PURE__*/React.createElement(SendToFields, {
+    showCcBccButton: true,
+    showUploadCsvButton: true,
+    bccInputProps: {
+      label: t("neetoMolecules.emailForm.labels.bCc"),
+      name: "sendToBcc",
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
+    },
+    ccInputProps: {
+      label: t("neetoMolecules.emailForm.labels.cc"),
+      name: "sendToCc",
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
+    },
+    emailInputProps: {
+      id: "sendTo",
+      name: "sendTo",
+      label: t("neetoMolecules.emailForm.labels.sendTo"),
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails"),
+      required: true
+    }
+  });
+});
 
-var MemoizedEditorContent = /*#__PURE__*/React.memo(EditorContent);
-var EmailPreview = withT(function (_ref) {
-  var t = _ref.t,
-    _ref$to = _ref.to,
-    to = _ref$to === void 0 ? [] : _ref$to,
-    from = _ref.from,
-    subject = _ref.subject,
-    body = _ref.body,
-    productName = _ref.productName,
-    actionButtonText = _ref.actionButtonText,
-    logo = _ref.logo,
+var SubjectField = function SubjectField(_ref) {
+  var name = _ref.name,
+    text = _ref.text,
+    updateText = _ref.updateText,
+    _ref$subjectVariables = _ref.subjectVariables,
+    subjectVariables = _ref$subjectVariables === void 0 ? [] : _ref$subjectVariables,
+    error = _ref.error,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isFieldFocusedOnce = _useState2[0],
+    setIsFieldFocusedOnce = _useState2[1];
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var tagClickHandler = function tagClickHandler(_ref2) {
+    var slug = _ref2.key;
+    var textAreaElement = document.querySelector("textarea[name=".concat(name, "]"));
+    var splitIndex = isFieldFocusedOnce && textAreaElement ? textAreaElement.selectionEnd : text.length;
+    var updatedSubject = [text.slice(0, splitIndex), " {{".concat(slug, "}}"), text.slice(splitIndex)].join("");
+    updateText(updatedSubject);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input$1, {
+    error: error,
+    name: name,
+    required: required,
+    label: t("neetoMolecules.emailForm.labels.subject"),
+    size: "large",
+    value: text,
+    suffix: /*#__PURE__*/React.createElement(DynamicVariables, {
+      variables: subjectVariables,
+      dropdownProps: {
+        className: "neeto-ui-dropdown__popup overflow-y-auto",
+        buttonSize: "small"
+      },
+      onVariableClick: tagClickHandler
+    }),
+    onChange: withEventTargetValue(updateText),
+    onFocus: function onFocus() {
+      return setIsFieldFocusedOnce(true);
+    }
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-600 mt-2",
+    "data-cy": "subject-input-variable-label",
+    style: "body3"
+  }, /*#__PURE__*/React.createElement(Trans, {
+    components: {
+      span: /*#__PURE__*/React.createElement("span", {
+        className: "font-semibold"
+      })
+    },
+    i18nKey: "neetoMolecules.emailForm.helpText",
+    values: {
+      type: "subject"
+    }
+  })));
+};
+
+var EmailForm = function EmailForm(_ref) {
+  var _ref$messageVariables = _ref.messageVariables,
+    messageVariables = _ref$messageVariables === void 0 ? [] : _ref$messageVariables,
+    _ref$subjectVariables = _ref.subjectVariables,
+    subjectVariables = _ref$subjectVariables === void 0 ? [] : _ref$subjectVariables,
+    handleCancel = _ref.handleCancel,
+    isLoading = _ref.isLoading,
+    _ref$replyToOptions = _ref.replyToOptions,
+    replyToOptions = _ref$replyToOptions === void 0 ? [] : _ref$replyToOptions,
+    _ref$sendToOptions = _ref.sendToOptions,
+    sendToOptions = _ref$sendToOptions === void 0 ? [] : _ref$sendToOptions,
+    _ref$isUpdating = _ref.isUpdating,
+    isUpdating = _ref$isUpdating === void 0 ? false : _ref$isUpdating,
+    _ref$showFields = _ref.showFields,
+    showFields = _ref$showFields === void 0 ? true : _ref$showFields,
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useContext = useContext(EmailFormContext),
+    showSendToField = _useContext.showSendToField,
+    showSendToAsRadio = _useContext.showSendToAsRadio,
+    showReplyToField = _useContext.showReplyToField;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    dirty = _useFormikContext.dirty;
+  var showSendToRadioField = showSendToField && showSendToAsRadio && isNotEmpty(sendToOptions);
   return /*#__PURE__*/React.createElement("div", {
-    "data-cy": "email-preview-card",
-    "data-testid": "email-preview",
-    className: classnames("neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border", className)
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "flex gap-2",
-    "data-cy": "email-send-to-preview",
-    "data-testid": "email-to-block"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.to"), ":"), isPresent(to) ? /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    lineHeight: "normal",
-    style: "body2"
-  }, to.join(", ")) : /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
-  })), from && /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-2 pt-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.from"), ":"), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    "data-cy": "email-send-from-preview",
-    lineHeight: "normal",
-    style: "body2"
-  }, from)), /*#__PURE__*/React.createElement("div", {
-    className: "flex items-center gap-2 pt-3"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.subject"), ":"), /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    "data-cy": "email-subject-preview",
-    lineHeight: "normal",
-    style: "body2"
-  }, subject || /*#__PURE__*/React.createElement("span", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
-  })))), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
-    "data-cy": "email-body-preview-container"
-  }, body ? /*#__PURE__*/React.createElement(MemoizedEditorContent, {
-    content: body
-  }) : /*#__PURE__*/React.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-72"
+    "data-testid": "email-form",
+    className: classnames("flex flex-1 flex-col items-start gap-2", _defineProperty({}, className, className))
+  }, showFields && /*#__PURE__*/React.createElement("div", {
+    className: "flex w-full flex-col items-start justify-start gap-6"
+  }, /*#__PURE__*/React.createElement(Field, {
+    name: "subject"
+  }, function (_ref2) {
+    var value = _ref2.field.value,
+      error = _ref2.meta.error;
+    return /*#__PURE__*/React.createElement("div", {
+      className: "w-full"
+    }, /*#__PURE__*/React.createElement(SubjectField, {
+      error: t(error),
+      name: "subject",
+      subjectVariables: subjectVariables,
+      required: true,
+      text: value,
+      updateText: function updateText(text) {
+        return setFieldValue("subject", text);
+      }
+    }));
+  }), showSendToRadioField ? /*#__PURE__*/React.createElement(Radio, {
+    "data-testid": "send-to-id",
+    label: t("neetoMolecules.emailForm.labels.sendTo"),
+    labelProps: {
+      required: true
+    },
+    name: "sendToId"
+  }, sendToOptions.map(function (_ref3) {
+    var label = _ref3.label,
+      value = _ref3.value;
+    return /*#__PURE__*/React.createElement(Radio.Item, {
+      label: label,
+      value: value,
+      key: value
+    });
+  })) : /*#__PURE__*/React.createElement(SendToField, null), showReplyToField && /*#__PURE__*/React.createElement(ReplyToField, {
+    replyToOptions: replyToOptions
   }), /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-80"
-  })), actionButtonText && /*#__PURE__*/React.createElement("div", {
-    className: "mt-6 flex w-full items-center justify-center"
-  }, /*#__PURE__*/React.createElement(Button, {
-    className: "pointer-events-none",
-    label: actionButtonText
-  })), logo && /*#__PURE__*/React.createElement("img", {
-    alt: t("neetoMolecules.emailPreview.logoAltText"),
-    className: "h-20 w-36 object-cover",
-    "data-cy": "company-logo-preview",
-    src: logo
-  })), productName && /*#__PURE__*/React.createElement("div", {
-    className: "neeto-ui-bg-gray-100 mt-auto p-2",
-    "data-testid": "product-name-block"
-  }, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-600 text-center leading-6",
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(FormikEditor, {
+    isMenuCollapsible: true,
+    required: true,
+    addons: EDITOR_ADDONS,
+    "data-cy": "message-input-field",
+    id: "form_message",
+    label: t("neetoMolecules.emailForm.labels.message"),
+    name: "message",
+    variables: messageVariables
+  }), /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-ui-text-gray-500 mt-2",
+    "data-cy": "message-input-variable-label",
     style: "body3"
-  }, t("neetoMolecules.emailPreview.poweredBy"), /*#__PURE__*/React.createElement("span", {
-    className: "neeto-ui-text-gray-800 font-medium"
-  }, productName))));
-});
-EmailPreview.propTypes = {
-  /**
-   * The value of the send-to field.
-   */
-  to: propTypes.exports.arrayOf(propTypes.exports.string),
-  /**
-   * The value of the send-from field.
-   */
-  from: propTypes.exports.string,
-  /**
-   * The subject of the email.
-   */
-  subject: propTypes.exports.string,
-  /**
-   * The body of the email.
-   */
-  body: propTypes.exports.string,
-  /**
-   * The name of the neeto product to be previewed.
-   */
-  productName: propTypes.exports.string,
-  /**
-   * The text to be shown in the action button.
-   */
-  actionButtonText: propTypes.exports.string,
-  /**
-   * Source link for the company logo.
-   */
-  logo: propTypes.exports.string
+  }, /*#__PURE__*/React.createElement(Trans, {
+    i18nKey: "neetoMolecules.emailForm.helpText",
+    values: {
+      type: "message"
+    },
+    components: {
+      span: /*#__PURE__*/React.createElement("span", {
+        className: "font-semibold"
+      })
+    }
+  })))), /*#__PURE__*/React.createElement(ActionBlock, {
+    className: "mt-6 w-full justify-start",
+    cancelButtonProps: {
+      disabled: false,
+      onClick: handleCancel,
+      className: "ml-3"
+    },
+    submitButtonProps: {
+      loading: isLoading,
+      disabled: !dirty || isUpdating
+    }
+  }));
+};
+
+var getValidationSchema = function getValidationSchema(_ref) {
+  var showSendToField = _ref.showSendToField,
+    showReplyToField = _ref.showReplyToField,
+    showSendToAsRadio = _ref.showSendToAsRadio,
+    customValidations = _ref.customValidations;
+  var schema = EMAIL_FORM_VALIDATION_SCHEMA.clone();
+  if (showSendToField) {
+    schema = schema.concat(showSendToAsRadio ? SEND_TO_ID_FIELD_VALIDATION : SEND_TO_FIELD_VALIDATION);
+  }
+  if (showReplyToField) schema = schema.concat(REPLY_TO_FIELD_VALIDATION);
+  return schema.shape(customValidations);
+};
+
+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 EmailFormProvider = function EmailFormProvider(_ref) {
+  var _ref$onSubmit = _ref.onSubmit,
+    onSubmit = _ref$onSubmit === void 0 ? noop : _ref$onSubmit,
+    _ref$initialValues = _ref.initialValues,
+    initialValues = _ref$initialValues === void 0 ? INITIAL_FORM_VALUES : _ref$initialValues,
+    children = _ref.children,
+    formikProps = _ref.formikProps,
+    _ref$validationSchema = _ref.validationSchema,
+    customValidations = _ref$validationSchema === void 0 ? {} : _ref$validationSchema,
+    _ref$showSendToField = _ref.showSendToField,
+    showSendToField = _ref$showSendToField === void 0 ? false : _ref$showSendToField,
+    _ref$showReplyToField = _ref.showReplyToField,
+    showReplyToField = _ref$showReplyToField === void 0 ? false : _ref$showReplyToField,
+    _ref$showSendToAsRadi = _ref.showSendToAsRadio,
+    showSendToAsRadio = _ref$showSendToAsRadi === void 0 ? false : _ref$showSendToAsRadi;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "email-form-provider"
+  }, /*#__PURE__*/React.createElement(EmailFormContext.Provider, {
+    value: {
+      showSendToField: showSendToField,
+      showSendToAsRadio: showSendToAsRadio,
+      showReplyToField: showReplyToField
+    }
+  }, /*#__PURE__*/React.createElement(Form, {
+    formikProps: _objectSpread({
+      enableReinitialize: true,
+      validationSchema: getValidationSchema({
+        showSendToField: showSendToField,
+        showReplyToField: showReplyToField,
+        showSendToAsRadio: showSendToAsRadio,
+        customValidations: customValidations
+      }),
+      initialValues: _objectSpread(_objectSpread({}, initialValues), {}, {
+        replyTo: initialValues.replyTo || globalProps.user.email
+      }),
+      onSubmit: onSubmit
+    }, formikProps)
+  }, children)));
 };
 
 export { EmailForm, EmailFormProvider, EmailPreview };