@bigbinary/neeto-email-notifications-frontend 2.2.22 → 2.2.23

package/dist/NeetoEmailNotificationForm.js

@@ -1,71 +1,1600 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useRef } from 'react';
-import { isNotEmpty, isNotPresent, noop } from '@bigbinary/neeto-cist';
-import EmailForm from '@bigbinary/neeto-molecules/EmailForm';
-import Spinner from '@bigbinary/neetoui/Spinner';
-import { prop, isEmpty, pick, mergeLeft, mergeDeepLeft } from 'ramda';
-import { useTranslation } from 'react-i18next';
-import { useQuery } from '@tanstack/react-query';
-import { DEFAULT_STALE_TIME } from '@bigbinary/neeto-commons-frontend/constants';
-import { useMutationWithInvalidation } from '@bigbinary/neeto-commons-frontend/react-utils';
-import axios from 'axios';
+import { memo, useState, useRef, Fragment, useEffect, useLayoutEffect, useContext, createElement, createContext } from 'react';
+import { isPresent, findBy, noop, hyphenate, isNotEmpty, notEqualsDeep, isNotPresent } from '@bigbinary/neeto-cist';
+import classnames from 'classnames';
+import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
+import EditorContent from '@bigbinary/neeto-editor/EditorContent';
+import Typography from '@bigbinary/neetoui/Typography';
+import Button from '@bigbinary/neetoui/Button';
+import { S as SvgAvatarPlaceholder, P as PropTypes, a as Papa, u as useFetchEmailNotifications, b as useUpdateEmailNotification, c as useResetEmailNotificationToDefault } from './emailNotificationApi-rMt-NHkm.js';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { useFormikContext, Field } from 'formik';
+import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
+import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
+import Radio from '@bigbinary/neetoui/formik/Radio';
+import { prop, isEmpty, mergeLeft, uniqBy, mergeRight, pluck, equals, pick, mergeDeepLeft } from 'ramda';
+import { Trans, useTranslation } from 'react-i18next';
+import { t as t$1 } from 'i18next';
+import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import * as yup from 'yup';
 import { string } from 'yup';
-import { jsx } from 'react/jsx-runtime';
+import Select from '@bigbinary/neetoui/formik/Select';
+import Input$1 from '@bigbinary/neetoui/formik/Input';
+import _typeof from '@babel/runtime/helpers/typeof';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import Upload from '@bigbinary/neeto-icons/Upload';
+import Toastr from '@bigbinary/neetoui/Toastr';
+import MultiEmailInput from '@bigbinary/neetoui/formik/MultiEmailInput';
+import Pane from '@bigbinary/neetoui/Pane';
+import { useDropzone } from 'react-dropzone';
+import Download from '@bigbinary/neeto-icons/Download';
+import Callout from '@bigbinary/neetoui/Callout';
+import 'stream';
+import { joinHyphenCase, hyphenize, buildUrl, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
+import Input from '@bigbinary/neetoui/Input';
+import Braces from '@bigbinary/neeto-icons/Braces';
+import Dropdown from '@bigbinary/neetoui/Dropdown';
+import Tooltip from '@bigbinary/neetoui/Tooltip';
+import BlockNavigation from '@bigbinary/neetoui/formik/BlockNavigation';
+import Switch from '@bigbinary/neetoui/formik/Switch';
+import { withT as withT$1 } from '@bigbinary/neeto-commons-frontend/react-utils';
+import { Link, useHistory } from 'react-router-dom';
+import Help from '@bigbinary/neeto-icons/Help';
+import Popover from '@bigbinary/neetoui/Popover';
+import MenuHorizontal from '@bigbinary/neeto-icons/MenuHorizontal';
+import MenuVertical from '@bigbinary/neeto-icons/MenuVertical';
+import useFuncDebounce from '@bigbinary/neeto-commons-frontend/react-utils/useFuncDebounce';
+import useQueryParams from '@bigbinary/neeto-commons-frontend/react-utils/useQueryParams';
+import useUpdateEffect from '@bigbinary/neeto-commons-frontend/react-utils/useUpdateEffect';
+import Search$1 from '@bigbinary/neeto-icons/Search';
+import { getQueryParams } from '@bigbinary/neeto-commons-frontend/utils';
+import Form from '@bigbinary/neetoui/formik/Form';
+import Spinner from '@bigbinary/neetoui/Spinner';
+import '@tanstack/react-query';
+import '@bigbinary/neeto-commons-frontend/constants';
+import 'axios';
+
+var MemoizedEditorContent = /*#__PURE__*/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,
+    actionButtonText = _ref.actionButtonText,
+    logo = _ref.logo,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    customContent = _ref.customContent;
+  return /*#__PURE__*/jsxs("div", {
+    "data-testid": "email-preview-card",
+    className: classnames("neeto-ui-bg-white neeto-ui-rounded-lg neeto-ui-theme--light neeto-notification-email-wrapper__preview relative flex flex-1 flex-col px-6 py-8", className),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-email-preview-ribbon",
+      children: t("neetoMolecules.emailPreview.previewMessage")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "w-full pb-4",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "neeto-ui-text-gray-800 min-w-0 grow space-x-2 break-words",
+        "data-testid": "email-subject-preview",
+        lineHeight: "normal",
+        style: "h4",
+        children: /*#__PURE__*/jsx("span", {
+          children: subject || /*#__PURE__*/jsx("span", {
+            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
+          })
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mt-4 flex items-center gap-2",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "shrink-0",
+          children: /*#__PURE__*/jsx(SvgAvatarPlaceholder, {})
+        }), /*#__PURE__*/jsxs("div", {
+          className: "neeto-ui-flex-col flex gap-1",
+          children: [isPresent(from) ? /*#__PURE__*/jsx(Typography, {
+            style: "h6",
+            weight: "medium",
+            children: from
+          }) : /*#__PURE__*/jsxs("div", {
+            className: "flex gap-2",
+            children: [/*#__PURE__*/jsx("span", {
+              className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full h-2 w-24"
+            }), /*#__PURE__*/jsx("span", {
+              className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full h-2 w-24"
+            })]
+          }), isPresent(to) ? /*#__PURE__*/jsx(Typography, {
+            className: "neeto-ui-text-gray-500 line-clamp-1",
+            "data-testid": "email-to-block",
+            style: "nano",
+            children: to.join(", ")
+          }) : /*#__PURE__*/jsx("span", {
+            className: "neeto-ui-bg-gray-100 neeto-ui-rounded-full h-2 w-16",
+            "data-testid": "email-to-block"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-rounded neeto-ui-bg-gray-100 flex flex-1 flex-col justify-between gap-y-6 px-6 py-4 text-base leading-relaxed",
+      "data-testid": "email-body-preview-container",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "neeto-ui-bg-white w-full p-6 md:p-8 2xl:mx-auto 2xl:max-w-lg",
+        children: [body ? /*#__PURE__*/jsx(MemoizedEditorContent, {
+          className: "whitespace-normal",
+          content: body
+        }) : /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col gap-y-4",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72"
+          }), /*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
+          })]
+        }), customContent && customContent, actionButtonText && /*#__PURE__*/jsx("div", {
+          className: "mt-6 flex w-full items-center justify-center",
+          children: /*#__PURE__*/jsx(Button, {
+            className: "pointer-events-none",
+            label: actionButtonText
+          })
+        }), logo && /*#__PURE__*/jsx("img", {
+          alt: t("neetoMolecules.emailPreview.logoAltText"),
+          className: "h-20 w-36 object-cover",
+          "data-testid": "company-logo-preview",
+          src: logo
+        })]
+      })
+    })]
+  });
+});
+EmailPreview.propTypes = {
+  /**
+   * The value of the send-to field.
+   */
+  to: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * The value of the send-from field.
+   */
+  from: PropTypes.string,
+  /**
+   * The subject of the email.
+   */
+  subject: PropTypes.string,
+  /**
+   * The body of the email.
+   */
+  body: PropTypes.string,
+  /**
+   * The text to be shown in the action button.
+   */
+  actionButtonText: PropTypes.string,
+  /**
+   * Source link for the company logo.
+   */
+  logo: PropTypes.string,
+  /**
+   * To pass custom content that will be rendered above the action button.
+   */
+  customContent: PropTypes.string
+};
+
+var CSV_FILE_SIZE_IN_KB = 32;
+var ONE_KILOBYTE_IN_BYTES = 1024;
+var DOWNLOAD_SAMPLE_EMAIL_CSV_FILE = "https://d2v7kzglnr2dnh.cloudfront.net/others/sample-bulk-email.csv";
+
+var Requirements = withT(function (_ref) {
+  var t = _ref.t,
+    fileSize = _ref.fileSize;
+  return /*#__PURE__*/jsxs(Callout, {
+    className: "flex flex-col items-center py-6",
+    style: "info",
+    children: [/*#__PURE__*/jsxs("ul", {
+      className: "flex list-outside list-disc flex-col gap-y-1 font-normal leading-normal",
+      children: [fileSize && /*#__PURE__*/jsx("li", {
+        children: t("neetoMolecules.shareViaLink.requirements.fileTypeAndSize", {
+          limit: fileSize
+        })
+      }), /*#__PURE__*/jsx("li", {
+        children: /*#__PURE__*/jsx(Trans, {
+          components: {
+            strong: /*#__PURE__*/jsx("strong", {
+              className: "font-semibold"
+            })
+          },
+          i18nKey: "neetoMolecules.shareViaLink.requirements.shouldContainColumns"
+        })
+      })]
+    }), /*#__PURE__*/jsx(Button, {
+      href: DOWNLOAD_SAMPLE_EMAIL_CSV_FILE,
+      icon: Download,
+      iconPosition: "left",
+      label: t("neetoMolecules.shareViaLink.bulkUploadPane.downloadSampleCSV"),
+      style: "link"
+    })]
+  });
+});
+var Requirements$1 = /*#__PURE__*/memo(Requirements);
+
+function ownKeys$1$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var BulkUploadPane = function BulkUploadPane(_ref) {
+  var _fileRejections$;
+  var isOpen = _ref.isOpen,
+    fileSize = _ref.fileSize,
+    onClose = _ref.onClose,
+    handleFileSubmit = _ref.handleFileSubmit;
+  var _useDropzone = useDropzone({
+      accept: {
+        "text/csv": []
+      },
+      maxFiles: 1,
+      maxSize: fileSize * ONE_KILOBYTE_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__*/jsx(Typography, {
+      className: "neeto-ui-text-error-500 items",
+      "data-testid": "file-input-error-message",
+      style: "body3",
+      children: message
+    }, code);
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Pane, {
+    isOpen: isOpen,
+    onClose: onClose,
+    "data-testid": "bulk-upload-pane",
+    children: /*#__PURE__*/jsxs("div", {
+      tabIndex: 0,
+      children: [/*#__PURE__*/jsx(Pane.Header, {
+        children: /*#__PURE__*/jsx(Typography, {
+          "data-testid": "bulk-upload-header",
+          style: "h2",
+          weight: "semibold",
+          children: t("neetoMolecules.shareViaLink.bulkUpload")
+        })
+      }), /*#__PURE__*/jsx(Pane.Body, {
+        children: /*#__PURE__*/jsxs("div", {
+          className: "flex w-full flex-col gap-y-4",
+          children: [/*#__PURE__*/jsx(Requirements$1, {
+            fileSize: fileSize
+          }), /*#__PURE__*/jsxs("div", _objectSpread$1$3(_objectSpread$1$3({}, 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
+            })
+          })), {}, {
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex flex-col items-center gap-y-3 p-4",
+              children: [/*#__PURE__*/jsx(Upload, {
+                className: "neeto-ui-text-primary-500",
+                size: 32
+              }), /*#__PURE__*/jsx("input", _objectSpread$1$3(_objectSpread$1$3({}, getInputProps()), {}, {
+                "data-testid": "csv-upload-input"
+              })), isDragActive ? /*#__PURE__*/jsx(Typography, {
+                style: "body2",
+                children: t("neetoMolecules.shareViaLink.bulkUploadPane.dropFileHere")
+              }) : /*#__PURE__*/jsxs("div", {
+                className: "flex flex-col items-center gap-y-1",
+                children: [/*#__PURE__*/jsx("div", {
+                  className: "flex w-full items-center justify-center gap-x-1",
+                  children: /*#__PURE__*/jsx(Trans, {
+                    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.dragNDrop",
+                    components: {
+                      Button: /*#__PURE__*/jsx(Button, {
+                        style: "link"
+                      })
+                    }
+                  })
+                }), /*#__PURE__*/jsxs(Typography, {
+                  className: "neeto-ui-text-gray-700",
+                  style: "body3",
+                  children: [/*#__PURE__*/jsx(Trans, {
+                    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.supportedFormat",
+                    values: {
+                      fileType: "csv"
+                    },
+                    components: {
+                      code: /*#__PURE__*/jsx("code", {
+                        className: "neeto-ui-typography neeto-ui-text-body3 neeto-ui-bg-white m-0 border-s-0 p-0"
+                      })
+                    }
+                  }), " ", fileSize && t("neetoMolecules.shareViaLink.bulkUploadPane.supportedSize", {
+                    fileSize: fileSize
+                  })]
+                })]
+              })]
+            }), errors]
+          }))]
+        })
+      }), /*#__PURE__*/jsx(Pane.Footer, {
+        className: "flex items-center gap-x-2",
+        children: /*#__PURE__*/jsx(Button, {
+          "data-testid": "bulk-upload-cancel-button",
+          label: t("neetoMolecules.common.actions.cancel"),
+          style: "text",
+          type: "reset",
+          onClick: onClose
+        })
+      })]
+    })
+  });
+};
+
+var isValidEmail$1 = function isValidEmail(email) {
+  return string().email().isValidSync(email);
+};
+var createEmailOptions$1 = function createEmailOptions() {
+  var emails = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return emails.map(function (email) {
+    return {
+      label: email,
+      value: email,
+      valid: isValidEmail$1(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$1(emails));
+      } else {
+        Toastr.error(t$1("neetoMolecules.sendToFields.errors.invalidCsv"));
+      }
+    }
+  });
+};
+
+function ownKeys$a(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$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+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,
+    _ref$showCcField = _ref.showCcField,
+    showCcField = _ref$showCcField === void 0 ? false : _ref$showCcField,
+    _ref$showBccField = _ref.showBccField,
+    showBccField = _ref$showBccField === void 0 ? false : _ref$showBccField,
+    _ref$showSendToField = _ref.showSendToField,
+    showSendToField = _ref$showSendToField === void 0 ? true : _ref$showSendToField;
+  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 || _sendToFieldRef$curre.focus();
+    } catch (error) {
+      Toastr.error(error);
+    }
+  };
+  var handelCcBccButtonClick = function handelCcBccButtonClick(e) {
+    e.stopPropagation();
+    setFieldValue("showCopyEmails", !showCopyEmails);
+  };
+  return /*#__PURE__*/jsxs("div", {
+    className: "relative w-full flex-col gap-2",
+    "data-testid": "send-to-text-field",
+    children: [showUploadCsvButton && /*#__PURE__*/jsx(Button, {
+      className: "absolute end-1 top-0",
+      "data-testid": "bulk-upload-button",
+      icon: Upload,
+      label: t("neetoMolecules.shareViaLink.bulkUpload"),
+      size: "small",
+      style: "link",
+      onClick: function onClick() {
+        return setIsBulkUploadPaneOpen(true);
+      }
+    }), showSendToField && /*#__PURE__*/jsx("div", {
+      className: "neeto-ui-border-gray-200 w-full border-b pb-1",
+      children: /*#__PURE__*/jsx(MultiEmailInput, _objectSpread$a(_objectSpread$a({
+        name: "sendTo",
+        ref: sendToFieldRef
+      }, emailInputProps), {}, {
+        suffix: showCcBccButton && /*#__PURE__*/jsx(Button, {
+          "data-testid": "cc-bcc-button",
+          label: t("neetoMolecules.emailForm.labels.ccBcc"),
+          size: "small",
+          style: "link",
+          onClick: handelCcBccButtonClick,
+          onKeyDown: function onKeyDown(event) {
+            return event.stopPropagation();
+          }
+        })
+      }))
+    }), (showCopyEmails || showCcField || showBccField) && /*#__PURE__*/jsxs("div", {
+      className: "mt-5 flex w-full flex-col gap-5",
+      children: [(showCopyEmails || showCcField) && /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-border-gray-200 w-full border-b pb-1",
+        children: /*#__PURE__*/jsx(MultiEmailInput, _objectSpread$a({
+          name: "sendToBcc"
+        }, ccInputProps))
+      }), (showCopyEmails || showBccField) && /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-border-gray-200 w-full border-b pb-1",
+        children: /*#__PURE__*/jsx(MultiEmailInput, _objectSpread$a({
+          name: "sendToCc"
+        }, bccInputProps))
+      })]
+    }), /*#__PURE__*/jsx(BulkUploadPane, {
+      fileSize: CSV_FILE_SIZE_IN_KB,
+      handleFileSubmit: handleCSVFile,
+      isOpen: isBulkUploadPaneOpen,
+      onClose: function onClose() {
+        return setIsBulkUploadPaneOpen(false);
+      }
+    })]
+  });
+};
+
+var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=true===r.prepend?"prepend":"append",d=true===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
+
+var css$5 = ".neeto-molecules-dynamic-variables{display:flex;flex-direction:column;gap:.375rem;max-width:22.5rem;min-width:11.5rem;padding:.5rem}.neeto-molecules-dynamic-variables__list{align-items:center;display:flex;flex-wrap:wrap;gap:.5rem}.neeto-molecules-dynamic-variables__list button{border:1px solid rgb(var(--neeto-ui-gray-300));border-radius:var(--neeto-ui-rounded-md);color:rgb(var(--neeto-ui-black));padding:.375rem;text-align:start;transition:var(--neeto-ui-transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}@media (prefers-reduced-motion:reduce){.neeto-molecules-dynamic-variables__list button{transition:none}}.neeto-molecules-dynamic-variables__list button:focus,.neeto-molecules-dynamic-variables__list button:focus-visible,.neeto-molecules-dynamic-variables__list button:hover{border-color:rgb(var(--neeto-ui-primary-800));box-shadow:none;color:rgb(var(--neeto-ui-primary-800));outline:none}";
+n(css$5,{});
+
+var parseVariables = function parseVariables() {
+  var variableArr = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  var uncategorized = [];
+  var groupedVariables = [];
+  var categorySet = new Set();
+  variableArr.forEach(function (variable) {
+    var category = variable.category,
+      label = variable.label,
+      variables = variable.variables;
+    if (category && variables) {
+      var parsedVariables = variables.map(mergeLeft({
+        category: category,
+        categoryLabel: label
+      }));
+      if (!categorySet.has(category)) {
+        categorySet.add(category);
+        groupedVariables.push({
+          label: label,
+          variables: parsedVariables
+        });
+      } else {
+        var existingGroup = findBy({
+          label: label
+        }, groupedVariables);
+        existingGroup.variables = uniqBy(prop("key"), existingGroup.variables.concat(parsedVariables));
+      }
+    } else {
+      uncategorized.push(variable);
+    }
+  });
+  if (!isEmpty(uncategorized)) {
+    groupedVariables.push({
+      label: !isEmpty(groupedVariables) ? "Others" : null,
+      variables: uncategorized
+    });
+  }
+  return groupedVariables;
+};
+
+var _excluded$6 = ["onVariableClick", "variables", "buttonProps"];
+function ownKeys$9(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$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Menu$2 = Dropdown.Menu;
+var DynamicVariables = function DynamicVariables(_ref) {
+  var _ref$onVariableClick = _ref.onVariableClick,
+    onVariableClick = _ref$onVariableClick === void 0 ? noop : _ref$onVariableClick,
+    _ref$variables = _ref.variables,
+    variables = _ref$variables === void 0 ? [] : _ref$variables,
+    buttonProps = _ref.buttonProps,
+    dropdownProps = _objectWithoutProperties(_ref, _excluded$6);
+  if (isEmpty(variables)) {
+    return null;
+  }
+  var parsedVariables = parseVariables(variables);
+  return /*#__PURE__*/jsx(Dropdown, _objectSpread$9(_objectSpread$9({
+    appendTo: function appendTo() {
+      return document.body;
+    },
+    buttonStyle: "secondary",
+    icon: Braces,
+    strategy: "fixed",
+    zIndex: 99999,
+    buttonProps: _objectSpread$9({
+      "data-testid": "dynamic-variables-button"
+    }, buttonProps)
+  }, dropdownProps), {}, {
+    children: /*#__PURE__*/jsx(Menu$2, {
+      children: /*#__PURE__*/jsx("div", {
+        className: "neeto-molecules-dynamic-variables",
+        "data-testid": "dynamic-variables-list",
+        children: parsedVariables.map(function (_ref2) {
+          var label = _ref2.label,
+            variables = _ref2.variables;
+          return /*#__PURE__*/jsxs(Fragment, {
+            children: [label && /*#__PURE__*/jsxs("div", {
+              className: "flex flex-row items-center gap-x-2",
+              children: [/*#__PURE__*/jsx(Typography, {
+                style: "h6",
+                children: label
+              }), /*#__PURE__*/jsx("hr", {
+                className: "neeto-ui-border-gray-200 flex flex-grow"
+              })]
+            }), /*#__PURE__*/jsx("div", {
+              className: "neeto-molecules-dynamic-variables__list",
+              "data-testid": joinHyphenCase("dynamic-variables-list", label),
+              children: variables.map(function (item) {
+                return /*#__PURE__*/jsx("button", {
+                  "data-testid": joinHyphenCase("dynamic-variables-list-item", item.label),
+                  onClick: function onClick() {
+                    return onVariableClick(item);
+                  },
+                  children: item.label
+                }, item.label);
+              })
+            })]
+          }, label);
+        })
+      })
+    })
+  }));
+};
+
+var css$4 = ".neeto-molecules-breadcrumb{align-items:center;display:flex;flex-direction:row;justify-content:flex-start;line-height:1}.neeto-molecules-breadcrumb a{text-decoration:none;transition:all .3s ease-in-out}@media (prefers-reduced-motion:reduce){.neeto-molecules-breadcrumb a{transition:none}}.neeto-molecules-breadcrumb a:focus-visible{border-radius:var(--neeto-ui-rounded-sm);outline:3px solid rgba(var(--neeto-ui-primary-500),50%)}.neeto-molecules-breadcrumb-separator{font-size:.75rem;line-height:1rem;margin-inline:.75rem}.neeto-molecules-breadcrumbs-wrap{display:flex;flex-wrap:wrap;gap:.375rem 0;margin-block-end:2.5rem}@media screen and (max-width:768px){.neeto-molecules-breadcrumbs-wrap{margin-block-end:1rem}}.neeto-molecules-breadcrumbs-list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}";
+n(css$4,{});
+
+var Breadcrumbs = withT$1(function (_ref) {
+  var t = _ref.t,
+    breadcrumbs = _ref.breadcrumbs,
+    _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
+    hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar,
+    className = _ref.className;
+  return /*#__PURE__*/jsx("nav", {
+    "aria-label": t("neetoMolecules.breadcrumbs.breadcrumbAriaLabel"),
+    className: classnames("neeto-molecules-breadcrumbs-wrap", className),
+    children: /*#__PURE__*/jsx("ol", {
+      className: "neeto-molecules-breadcrumbs-list",
+      children: breadcrumbs.map(function (_ref2, index) {
+        var text = _ref2.text,
+          _ref2$link = _ref2.link,
+          link = _ref2$link === void 0 ? "#" : _ref2$link;
+        var isLast = index + 1 === breadcrumbs.length;
+        var isCurrentPage = isLast && !hasTrailingSeparator;
+        return /*#__PURE__*/jsxs("li", {
+          className: "neeto-molecules-breadcrumb",
+          "data-testid": "header-breadcrumb",
+          children: [isCurrentPage ? /*#__PURE__*/jsx(Typography, {
+            "aria-current": "page",
+            className: "neeto-ui-text-gray-700 neeto-molecules-breadcrumb-link",
+            component: "span",
+            "data-testid": "".concat(hyphenize(text), "-breadcrumb"),
+            style: "body2",
+            weight: "normal",
+            children: text
+          }) : /*#__PURE__*/jsx(Link, {
+            to: link,
+            children: /*#__PURE__*/jsx(Typography, {
+              className: "neeto-ui-text-gray-700 hover:neeto-ui-text-gray-800 neeto-molecules-breadcrumb-link",
+              component: "span",
+              "data-testid": "".concat(hyphenize(text), "-breadcrumb"),
+              style: "body2",
+              weight: "normal",
+              children: text
+            })
+          }), !isCurrentPage && /*#__PURE__*/jsx("span", {
+            "aria-hidden": "true",
+            className: "neeto-molecules-breadcrumb-separator neeto-ui-text-black",
+            children: "/"
+          })]
+        }, index);
+      })
+    })
+  });
+});
+
+var SIZE = {
+  "default": 16,
+  large: 20
+};
+
+var _excluded$5 = ["title", "size", "description", "helpLinkProps", "popoverProps", "className", "iconColor", "icon"];
+function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var HelpPopover = function HelpPopover(_ref) {
+  var title = _ref.title,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "large" : _ref$size,
+    description = _ref.description,
+    helpLinkProps = _ref.helpLinkProps,
+    popoverProps = _ref.popoverProps,
+    className = _ref.className,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? "currentColor" : _ref$iconColor,
+    _ref$icon = _ref.icon,
+    IconComponent = _ref$icon === void 0 ? Help : _ref$icon,
+    otherProps = _objectWithoutProperties(_ref, _excluded$5);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var popoverRef = useRef();
+  return /*#__PURE__*/jsxs(Fragment$1, {
+    children: [/*#__PURE__*/jsx(Button, _objectSpread$8(_objectSpread$8({}, otherProps), {}, {
+      "data-testid": "help-popover-button",
+      icon: function icon() {
+        return /*#__PURE__*/jsx(IconComponent, {
+          color: iconColor,
+          size: SIZE[size]
+        });
+      },
+      ref: popoverRef,
+      style: "text",
+      className: classnames("neeto-molecule-help-popover-trigger neeto-ui-rounded-full bg-transparent p-0", className)
+    })), /*#__PURE__*/jsx(Popover, _objectSpread$8(_objectSpread$8({
+      appendTo: function appendTo() {
+        return document.body;
+      },
+      reference: popoverRef
+    }, popoverProps), {}, {
+      children: /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col",
+        onClick: function onClick(event) {
+          return event.stopPropagation();
+        },
+        children: [title && /*#__PURE__*/jsx(Popover.Title, {
+          "data-testid": "help-popover-title",
+          children: title
+        }), typeof description === "string" ? /*#__PURE__*/jsx(Typography, {
+          "data-testid": "help-popover-description",
+          lineHeight: "normal",
+          style: "body2",
+          children: description
+        }) : description, helpLinkProps && /*#__PURE__*/jsx(Button, _objectSpread$8(_objectSpread$8({
+          className: "neeto-ui-mt-3",
+          "data-testid": "help-popover-link-button",
+          label: t("neetoMolecules.common.viewHelpArticle"),
+          size: "small"
+        }, helpLinkProps), {}, {
+          style: "link",
+          target: "_blank"
+        }))]
+      })
+    }))]
+  });
+};
+
+var MENU_ITEM_TYPES = {
+  menuItem: "menuItem",
+  divider: "divider"
+};
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom",
+  touch: ["hold", 500]
+};
+
+var _excluded$2$1 = ["t", "label", "key"],
+  _excluded2$1 = ["isVisible", "key"];
+function ownKeys$2$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MenuItem$1 = Dropdown.MenuItem,
+  Menu$1 = Dropdown.Menu;
+var Submenu = withT$1(function (_ref) {
+  var t = _ref.t,
+    label = _ref.label,
+    key = _ref.key,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$2$1);
+  return /*#__PURE__*/jsx(Dropdown, _objectSpread$2$1(_objectSpread$2$1({
+    appendTo: "parent",
+    position: "left",
+    trigger: "hover",
+    customTarget: /*#__PURE__*/jsx(MenuItem$1.Button, {
+      "aria-haspopup": "menu",
+      role: "menuitem",
+      children: label
+    })
+  }, menuItemProps.dropdownProps), {}, {
+    children: /*#__PURE__*/jsx(Menu$1, {
+      "aria-label": t("neetoMolecules.moreDropdown.submenuAriaLabel", {
+        label: label
+      }),
+      role: "menu",
+      children: menuItemProps.menuItems.map(function (_ref2) {
+        var _ref2$isVisible = _ref2.isVisible,
+          isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+          key = _ref2.key,
+          menuItemProps = _objectWithoutProperties(_ref2, _excluded2$1);
+        if (!isVisible) return null;
+        return /*#__PURE__*/jsx(MoreDropdownMenuItem, _objectSpread$2$1({}, menuItemProps), key);
+      })
+    })
+  }), key);
+});
+
+var _excluded$1$1 = ["onClick", "label", "type", "hasSubItems"];
+function ownKeys$1$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var MenuItem = Dropdown.MenuItem,
+  Divider = Dropdown.Divider;
+var MoreDropdownMenuItem = function MoreDropdownMenuItem(_ref) {
+  var onClick = _ref.onClick,
+    label = _ref.label,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? MENU_ITEM_TYPES.menuItem : _ref$type,
+    _ref$hasSubItems = _ref.hasSubItems,
+    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$1$1);
+  if (type === MENU_ITEM_TYPES.divider) {
+    return /*#__PURE__*/jsx(Divider, {
+      role: "separator"
+    });
+  }
+  if (hasSubItems) {
+    return /*#__PURE__*/jsx(Submenu, _objectSpread$1$2({}, _objectSpread$1$2({
+      label: label
+    }, menuItemProps)));
+  }
+  return /*#__PURE__*/jsx(MenuItem.Button, _objectSpread$1$2(_objectSpread$1$2({}, _objectSpread$1$2({
+    onClick: onClick
+  }, menuItemProps)), {}, {
+    role: "menuitem",
+    children: label
+  }));
+};
+
+var css$3 = ".neeto-ui-btn.neeto-ui-btn--icon-only[data-dropdown-button-style=more-dropdown],.neeto-ui-btn.neeto-ui-btn--icon-only[data-testid=column-menu-button]{--neeto-ui-btn-icon-size:1.25rem;--neeto-ui-btn-padding-x:0;--neeto-ui-btn-padding-y:0;height:1.75rem;justify-content:center;width:1.75rem}.neeto-ui-btn.neeto-ui-btn--icon-only.neeto-ui-btn--size-medium[data-dropdown-button-style=more-dropdown],.neeto-ui-btn.neeto-ui-btn--icon-only.neeto-ui-btn--size-medium[data-testid=column-menu-button]{--neeto-ui-btn-icon-size:1.5rem;--neeto-ui-btn-padding-x:0;--neeto-ui-btn-padding-y:0;height:2rem;justify-content:center;width:2rem}.neeto-ui-btn.neeto-ui-btn--icon-only.neeto-ui-btn--size-large[data-dropdown-button-style=more-dropdown],.neeto-ui-btn.neeto-ui-btn--icon-only.neeto-ui-btn--size-large[data-testid=column-menu-button]{--neeto-ui-btn-icon-size:1.875rem;--neeto-ui-btn-padding-x:0;--neeto-ui-btn-padding-y:0;height:2.5rem;justify-content:center;width:2.5rem}.neeto-ui-btn.neeto-molecule-moredropdown--rounded[data-dropdown-button-style=more-dropdown]{border-radius:100%}";
+n(css$3,{});
+
+var _excluded$4 = ["isRounded"],
+  _excluded2$2 = ["isVisible", "key"];
+function ownKeys$7(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$7(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$7(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$7(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Menu = Dropdown.Menu;
+var MoreDropdown = function MoreDropdown(_ref) {
+  var _ref$dropdownButtonPr = _ref.dropdownButtonProps,
+    dropdownButtonProps = _ref$dropdownButtonPr === void 0 ? {} : _ref$dropdownButtonPr,
+    _ref$isVertical = _ref.isVertical,
+    isVertical = _ref$isVertical === void 0 ? false : _ref$isVertical,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    _ref$dropdownProps = _ref.dropdownProps,
+    dropdownProps = _ref$dropdownProps === void 0 ? {} : _ref$dropdownProps,
+    menuTopChildren = _ref.menuTopChildren,
+    menuBottomChildren = _ref.menuBottomChildren,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var isRoundedButton = dropdownButtonProps.isRounded,
+    buttonProps = _objectWithoutProperties(dropdownButtonProps, _excluded$4);
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, dropdownButtonProps.tooltipProps);
+  var targetIcon = isVertical ? MenuVertical : MenuHorizontal;
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/jsx(Tooltip, _objectSpread$7(_objectSpread$7({}, tooltipProps), {}, {
+      children: /*#__PURE__*/jsx("span", {
+        children: /*#__PURE__*/jsx(Button, _objectSpread$7({
+          disabled: true,
+          "data-dropdown-button-style": "more-dropdown",
+          "data-testid": "more-dropdown-button",
+          icon: targetIcon,
+          iconPosition: "right",
+          size: "medium",
+          style: "text",
+          className: classnames({
+            "neeto-molecule-moredropdown--rounded": isRoundedButton
+          })
+        }, buttonProps))
+      })
+    }));
+  }
+  return /*#__PURE__*/jsx(Dropdown, _objectSpread$7(_objectSpread$7({
+    className: "flex",
+    disabled: isDisabled,
+    icon: targetIcon,
+    zIndex: 99999,
+    buttonProps: _objectSpread$7({
+      "data-dropdown-button-style": "more-dropdown",
+      className: classnames("min-h-0 flex-shrink-0 neeto-molecule-moredropdown-btn", {
+        "neeto-molecule-moredropdown--rounded": isRoundedButton
+      }),
+      style: "text",
+      tooltipProps: {
+        content: t("neetoMolecules.moreDropdown.tooltip"),
+        position: "top",
+        touch: ["hold", 500]
+      },
+      "aria-haspopup": "menu",
+      "aria-label": t("neetoMolecules.moreDropdown.buttonAriaLabel")
+    }, buttonProps)
+  }, dropdownProps), {}, {
+    children: /*#__PURE__*/jsxs(Menu, {
+      "aria-label": t("neetoMolecules.moreDropdown.menuAriaLabel"),
+      role: "menu",
+      children: [menuTopChildren, menuItems.map(function (_ref2) {
+        var _ref2$isVisible = _ref2.isVisible,
+          isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+          key = _ref2.key,
+          menuItemProps = _objectWithoutProperties(_ref2, _excluded2$2);
+        if (!isVisible) return null;
+        return /*#__PURE__*/jsx(MoreDropdownMenuItem, _objectSpread$7({}, menuItemProps), key !== null && key !== void 0 ? key : hyphenate(menuItemProps.label));
+      }), menuBottomChildren]
+    })
+  }));
+};
 
-var EMAIL_NOTIFICATIONS_BASE_URL = "neeto_email_notifications/email_notification";
-var RESET_EMAIL_NOTIFICATIONS_TO_DEFAULT_URL = "".concat(EMAIL_NOTIFICATIONS_BASE_URL, "/reset_to_default");
+var css$2 = ".neeto-molecules-search__wrapper input[type=search]::-webkit-search-cancel-button:hover,.neeto-molecules-search__wrapper input[type=search]::-webkit-search-decoration:hover{cursor:pointer}";
+n(css$2,{});
 
-var fetch = function fetch(params) {
-  return axios.get(EMAIL_NOTIFICATIONS_BASE_URL, {
-    params: params
+var getInitialSearchValue = function getInitialSearchValue(_ref) {
+  var _ref$initialValue = _ref.initialValue,
+    initialValue = _ref$initialValue === void 0 ? "" : _ref$initialValue,
+    enableUrlSync = _ref.enableUrlSync,
+    searchParamName = _ref.searchParamName;
+  if (enableUrlSync) {
+    var _queryParams$searchPa;
+    var queryParams = getQueryParams({
+      toCamelCase: false
+    });
+    return (_queryParams$searchPa = queryParams[searchParamName]) !== null && _queryParams$searchPa !== void 0 ? _queryParams$searchPa : "";
+  }
+  return initialValue;
+};
+
+var _excluded$3 = ["value", "debounceTime", "onSearch", "onChange", "enableUrlSync", "searchParamName"];
+function ownKeys$6(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$6(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$6(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$6(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Search = function Search(_ref) {
+  var value = _ref.value,
+    _ref$debounceTime = _ref.debounceTime,
+    debounceTime = _ref$debounceTime === void 0 ? 300 : _ref$debounceTime,
+    onSearch = _ref.onSearch,
+    onChange = _ref.onChange,
+    _ref$enableUrlSync = _ref.enableUrlSync,
+    enableUrlSync = _ref$enableUrlSync === void 0 ? false : _ref$enableUrlSync,
+    _ref$searchParamName = _ref.searchParamName,
+    searchParamName = _ref$searchParamName === void 0 ? "search_term" : _ref$searchParamName,
+    inputProps = _objectWithoutProperties(_ref, _excluded$3);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var queryParams = useQueryParams({
+    toCamelCase: false
   });
+  var history = useHistory();
+  var _useState = useState(getInitialSearchValue({
+      initialValue: value,
+      enableUrlSync: enableUrlSync,
+      searchParamName: searchParamName
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalValue = _useState2[0],
+    setInternalValue = _useState2[1];
+  var trimmedValue = value === null || value === void 0 ? void 0 : value.trim();
+  useUpdateEffect(function () {
+    if (!enableUrlSync || isPresent(queryParams === null || queryParams === void 0 ? void 0 : queryParams[searchParamName])) return;
+    setInternalValue("");
+  }, [queryParams === null || queryParams === void 0 ? void 0 : queryParams[searchParamName]]);
+  var handleSearchQueryParams = function handleSearchQueryParams(trimmedValue) {
+    if (!trimmedValue && !(queryParams !== null && queryParams !== void 0 && queryParams[searchParamName])) return;
+    if (trimmedValue === (queryParams === null || queryParams === void 0 ? void 0 : queryParams[searchParamName])) return;
+    var searchParams = {};
+    var pathname = window.location.pathname;
+    if (trimmedValue) searchParams = _defineProperty({}, searchParamName, trimmedValue);else queryParams === null || queryParams === void 0 || delete queryParams[searchParamName];
+    history.push(buildUrl(pathname, mergeLeft(searchParams, queryParams)));
+  };
+  var handleDebouncedSearchTermChange = useFuncDebounce(function (trimmedValue) {
+    if (onSearch) onSearch(trimmedValue);else if (enableUrlSync) handleSearchQueryParams(trimmedValue);
+  }, debounceTime);
+  useUpdateEffect(function () {
+    handleDebouncedSearchTermChange(trimmedValue);
+  }, [trimmedValue]);
+  if (value !== undefined && internalValue !== value) {
+    setInternalValue(value);
+  }
+  var handleOnChange = function handleOnChange(e) {
+    var _e$target$value;
+    var trimmedValue = (_e$target$value = e.target.value) === null || _e$target$value === void 0 ? void 0 : _e$target$value.trim();
+    onChange === null || onChange === void 0 || onChange(e);
+    setInternalValue(e.target.value);
+    if ((internalValue === null || internalValue === void 0 ? void 0 : internalValue.trim()) !== trimmedValue) {
+      handleDebouncedSearchTermChange(trimmedValue);
+    }
+  };
+  useEffect(function () {
+    return handleDebouncedSearchTermChange.cancel;
+  }, []);
+  return /*#__PURE__*/jsx(Input, _objectSpread$6({
+    className: "neeto-molecules-search__wrapper",
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/jsx(Search$1, {}),
+    type: "search",
+    value: internalValue,
+    onChange: handleOnChange
+  }, inputProps));
 };
-var update = function update(payload) {
-  return axios.put(EMAIL_NOTIFICATIONS_BASE_URL, payload);
+
+var SIZES = {
+  nano: "nano",
+  small: "small"
 };
-var resetToDefault = function resetToDefault(params) {
-  return axios.post(RESET_EMAIL_NOTIFICATIONS_TO_DEFAULT_URL, params);
+var DROPDOWN_BUTTON_SIZES = {
+  nano: "small",
+  small: "medium"
 };
-var emailNotificationsApi = {
-  fetch: fetch,
-  update: update,
-  resetToDefault: resetToDefault
+
+var css$1 = ":root{--neeto-molecules-main-header-height:6.25rem;--neeto-molecules-main-header-with-breadcrumbs-height:8.25rem;--neeto-molecules-effective-header-height:0px}.neeto-molecules-header{align-items:flex-start;background:rgb(var(--neeto-ui-white));display:flex;flex-direction:row;flex-shrink:0;gap:1rem;justify-content:space-between;padding:2.5rem 0 1.5rem;width:100%}@media screen and (max-width:1024px){.neeto-molecules-header{flex-wrap:wrap}}.neeto-molecules-header .neeto-molecules-header__toggle-menubar-btn{margin-inline-end:.5rem}.neeto-molecules-header .neeto-molecules-header__left{align-items:flex-start;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start}.neeto-molecules-header .neeto-molecules-header__left-data-wrap{display:flex;flex-wrap:wrap}.neeto-molecules-header .neeto-molecules-header__page-title{align-items:center;display:flex;flex-direction:row;gap:.75rem;margin-top:-.25rem;width:100%}.neeto-molecules-header .neeto-molecules-header__page-title .neeto-molecule-help-popover-trigger,.neeto-molecules-header .neeto-molecules-header__page-title .neeto-molecule-moredropdown-btn{margin-inline-start:.5rem;vertical-align:middle}@media screen and (max-width:1024px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.625rem}}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.5rem}}@media screen and (max-width:576px){.neeto-molecules-header .neeto-molecules-header__page-title{margin-top:-.25rem}}.neeto-molecules-header .neeto-molecules-header__page-title h1{line-height:var(--neeto-ui-leading-tight)}.neeto-molecules-header .neeto-molecules-header__right{align-items:center;display:flex;gap:.75rem;justify-content:flex-end}.neeto-molecules-header .neeto-molecules-header__right:empty{display:none;visibility:hidden}@media screen and (max-width:768px){.neeto-molecules-header .neeto-molecules-header__right{flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header .neeto-molecules-header__right .neeto-ui-btn{flex-shrink:0}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__search-input{flex-grow:0;min-width:12.6rem}.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{align-items:center;display:flex;flex-shrink:0;gap:.75rem;justify-content:flex-end}@media screen and (max-width:360px){.neeto-molecules-header .neeto-molecules-header__right .neeto-molecules-header__action-block{flex-shrink:1;flex-wrap:wrap;justify-content:flex-start}}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-breadcrumbs-wrap{margin:0 0 1rem}.neeto-molecules-header--has-breadcrumbs .neeto-molecules-header__page-title{margin-top:0}.neeto-molecules-header--nano,.neeto-molecules-header--small{flex-shrink:0;min-height:0}.neeto-molecules-header--nano .neeto-molecules-header__page-title{margin-top:0}";
+n(css$1,{});
+
+var _excluded$2 = ["dropdownButtonProps"];
+function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$5(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$5(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$5(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var Header = function Header(_ref) {
+  var title = _ref.title,
+    _ref$titleHelpPopover = _ref.titleHelpPopoverProps,
+    titleHelpPopoverProps = _ref$titleHelpPopover === void 0 ? {} : _ref$titleHelpPopover,
+    searchProps = _ref.searchProps,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    actionBlock = _ref.actionBlock,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$renderDropdown = _ref.renderDropdown,
+    renderDropdown = _ref$renderDropdown === void 0 ? noop : _ref$renderDropdown,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? "small" : _ref$size,
+    _ref$dataTestid = _ref["data-testid"],
+    dataTestId = _ref$dataTestid === void 0 ? "neeto-molecules-header" : _ref$dataTestid;
+  var headerRef = useRef(null);
+  useLayoutEffect(function () {
+    var updateHeaderHeight = function updateHeaderHeight() {
+      if (!headerRef.current) return;
+      var height = headerRef.current.offsetHeight;
+      document.body.style.setProperty("--neeto-molecules-effective-header-height", "".concat(height, "px"));
+    };
+    updateHeaderHeight();
+    window.addEventListener("resize", updateHeaderHeight);
+    return function () {
+      return window.removeEventListener("resize", updateHeaderHeight);
+    };
+  }, []);
+  return /*#__PURE__*/jsxs("div", {
+    "data-testid": dataTestId,
+    ref: headerRef,
+    className: classnames(["neeto-molecules-header", {
+      "neeto-molecules-header--has-breadcrumbs": isNotEmpty(breadcrumbs),
+      "neeto-molecules-header--small": size === SIZES.small,
+      "neeto-molecules-header--nano": size === SIZES.nano
+    }, className]),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "neeto-molecules-header__left",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "neeto-molecules-header__left-data-wrap",
+        children: [isNotEmpty(breadcrumbs) && /*#__PURE__*/jsx(Breadcrumbs, {
+          breadcrumbs: breadcrumbs
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-molecules-header__page-title",
+          children: /*#__PURE__*/jsxs(Typography, {
+            "data-testid": "main-header",
+            lineHeight: "tight",
+            style: size === SIZES.nano ? "h3" : "h1",
+            weight: "semibold",
+            children: [title, isPresent(titleHelpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$5({}, titleHelpPopoverProps)), renderDropdown(function (_ref2) {
+              var _ref2$dropdownButtonP = _ref2.dropdownButtonProps,
+                dropdownButtonProps = _ref2$dropdownButtonP === void 0 ? {} : _ref2$dropdownButtonP,
+                dropdownProps = _objectWithoutProperties(_ref2, _excluded$2);
+              return /*#__PURE__*/jsx(MoreDropdown, _objectSpread$5({
+                dropdownButtonProps: _objectSpread$5({
+                  size: DROPDOWN_BUTTON_SIZES[size]
+                }, dropdownButtonProps)
+              }, dropdownProps));
+            })]
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-molecules-header__right",
+      children: [searchProps && /*#__PURE__*/jsx(Search, _objectSpread$5({
+        enableUrlSync: true,
+        className: classnames(["neeto-molecules-header__search-input", searchProps.className])
+      }, searchProps)), actionBlock && /*#__PURE__*/jsx("div", {
+        className: "neeto-molecules-header__action-block",
+        children: actionBlock
+      })]
+    })]
+  });
 };
 
-var QUERY_KEYS = {
-  NEETO_EMAIL_NOTIFICATIONS: "neeto-email-notifications"
+var MobilePreviewHeader = function MobilePreviewHeader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames(["neeto-ui-bg-gray-200 px-6 py-5", className]),
+    "data-testid": "mobile-preview-header",
+    children: /*#__PURE__*/jsx(Typography, {
+      lineHeight: "normal",
+      style: "body2",
+      children: message || t("neetoMolecules.mobilePreview.message")
+    })
+  });
 };
 
-var useFetchEmailNotifications = function useFetchEmailNotifications(params) {
-  return useQuery({
-    queryKey: [QUERY_KEYS.NEETO_EMAIL_NOTIFICATIONS, params["notificationHolderId"], params["customFields"]],
-    queryFn: function queryFn() {
-      return emailNotificationsApi.fetch(params);
+var INITIAL_FORM_VALUES = {
+  sendTo: [],
+  sendToId: "",
+  sendToCc: [],
+  sendToBcc: [],
+  replyTo: "",
+  showCopyEmails: false,
+  subject: "",
+  message: "",
+  isEnabled: false
+};
+var EMAIL_FORM_VALIDATION_SCHEMA = yup.object({
+  subject: yup.string().required(t$1("neetoMolecules.emailForm.errors.subjectRequired")),
+  message: yup.string().test("message", t$1("neetoMolecules.emailForm.errors.messageRequired"), function (value) {
+    return !isEditorEmpty(value);
+  })
+});
+var sendToFieldValidation = function sendToFieldValidation(maxEmails) {
+  var validation = yup.array().test("all-emails-valid", t$1("neetoMolecules.emailForm.errors.invalidEmailAddress"), function (emails) {
+    return emails === null || emails === void 0 ? void 0 : emails.every(prop("valid"));
+  }).test("max-email-count", t$1("neetoMolecules.emailForm.errors.maxEmails", {
+    count: maxEmails
+  }), function (emails) {
+    return (emails === null || emails === void 0 ? void 0 : emails.length) <= maxEmails;
+  });
+  return yup.object({
+    sendTo: validation.min(1, t$1("neetoMolecules.emailForm.errors.required", {
+      entity: t$1("neetoMolecules.emailForm.fields.sendToEmailAddress")
+    })).nullable(),
+    sendToCc: validation,
+    sendToBcc: validation
+  });
+};
+var SEND_TO_ID_FIELD_VALIDATION = yup.object({
+  sendToId: yup.string().required(t$1("neetoMolecules.emailForm.errors.required", {
+    entity: t$1("neetoMolecules.emailForm.labels.sendTo")
+  }))
+});
+var REPLY_TO_FIELD_VALIDATION = yup.object({
+  replyTo: yup.string().nullable().email(t$1("neetoMolecules.emailForm.errors.invalidEmailAddress")).required(t$1("neetoMolecules.emailForm.errors.required", {
+    entity: t$1("neetoMolecules.emailForm.fields.replyToEmailAddress")
+  }))
+});
+var EDITOR_ADDONS = ["highlight", "emoji", "code-block", "block-quote", "image-upload", "divider", "video-embed"];
+
+/* eslint-disable @bigbinary/neeto/use-zustand-for-global-state-management */
+var EmailFormContext = /*#__PURE__*/createContext({
+  showSendToField: false,
+  showSendToAsRadio: false,
+  showReplyToField: false,
+  showCcField: false,
+  showBccField: false
+});
+
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getValidationSchema = function getValidationSchema(_ref) {
+  var showSendToField = _ref.showSendToField,
+    showReplyToField = _ref.showReplyToField,
+    showSendToAsRadio = _ref.showSendToAsRadio,
+    customValidations = _ref.customValidations,
+    maxEmails = _ref.maxEmails;
+  var schema = EMAIL_FORM_VALIDATION_SCHEMA.clone();
+  if (showSendToField) {
+    schema = schema.concat(showSendToAsRadio ? SEND_TO_ID_FIELD_VALIDATION : sendToFieldValidation(maxEmails));
+  }
+  if (showReplyToField) schema = schema.concat(REPLY_TO_FIELD_VALIDATION);
+  var isYupObject = customValidations.type === "object";
+  if (isYupObject) {
+    var customFields = customValidations.fields || {};
+    schema = schema.shape(customFields);
+  } else if (_typeof(customValidations) === "object") {
+    schema = schema.shape(customValidations);
+  }
+  return schema;
+};
+var getReplyToFieldLabelProps = function getReplyToFieldLabelProps(_ref2) {
+  var popoverProps = _ref2.popoverProps;
+  return {
+    helpIconProps: _defineProperty(_defineProperty(_defineProperty({}, "data-testid", "reply-to-tooltip"), "tooltipProps", !isPresent(popoverProps) && {
+      content: t$1("neetoMolecules.emailForm.tooltips.replyTo"),
+      touch: ["hold", 500]
+    }), "popoverProps", isPresent(popoverProps) && _objectSpread$3(_objectSpread$3({}, popoverProps), {}, {
+      appendTo: "parent",
+      description: popoverProps.description || t$1("neetoMolecules.emailForm.tooltips.replyTo")
+    }))
+  };
+};
+var resolveContent = function resolveContent(content, func, variable) {
+  if (typeof func === "function") {
+    return func(content, variable);
+  }
+  return content;
+};
+var normalizeHtmlString = function normalizeHtmlString(str) {
+  if (typeof str !== "string") return str;
+  return str.replace(/\uFEFF/g, "").replace(/\r\n|\r/g, "\n").replace(/&nbsp;/g, " ").replace(/[\t ]+/g, " ").replace(/\s*\n\s*/g, "\n").replace(/\n+/g, "\n").replace(/>\s+</g, "><").trim();
+};
+
+var ReplyToField = function ReplyToField(_ref) {
+  var _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    _ref$popoverProps = _ref.popoverProps,
+    popoverProps = _ref$popoverProps === void 0 ? {} : _ref$popoverProps;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue;
+  var isDropdownField = isNotEmpty(options);
+  var labelProps = getReplyToFieldLabelProps({
+    popoverProps: popoverProps
+  });
+  if (isDropdownField) {
+    return /*#__PURE__*/jsx(Select, {
+      labelProps: labelProps,
+      options: options,
+      isClearable: true,
+      className: "w-full",
+      "data-testid": "reply-to-select-field",
+      label: t("neetoMolecules.emailForm.labels.replyTo"),
+      name: "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__*/jsx(Input$1, {
+    labelProps: labelProps,
+    autoFocus: true,
+    nakedInput: true,
+    required: true,
+    className: "w-full",
+    "data-testid": "reply-to-input-field",
+    label: t("neetoMolecules.emailForm.labels.replyTo"),
+    name: "replyTo",
+    placeholder: t("neetoMolecules.emailForm.placeholders.emailPlaceholder"),
+    size: "large",
+    onChange: function onChange(event) {
+      var _event$target$value;
+      return setFieldValue("replyTo", (_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.toLowerCase());
+    }
+  });
+};
+
+var SendToField = function SendToField(_ref) {
+  var showBccField = _ref.showBccField,
+    showCcField = _ref.showCcField,
+    showSendToTextField = _ref.showSendToTextField;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  if (!showSendToTextField && !showBccField && !showCcField) return null;
+  return /*#__PURE__*/jsx(SendToFields, {
+    showCcBccButton: true,
+    showBccField: showSendToTextField ? false : showBccField,
+    showCcField: showSendToTextField ? false : showCcField,
+    showSendToField: showSendToTextField,
+    bccInputProps: {
+      label: t("neetoMolecules.emailForm.labels.bCc"),
+      name: "sendToBcc",
+      placeholder: t("neetoMolecules.emailForm.placeholders.commaSeparatedEmails")
     },
-    staleTime: DEFAULT_STALE_TIME,
-    select: prop("emailNotification"),
-    enabled: isNotEmpty(params)
+    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,
+    onBlur = _ref.onBlur;
+  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,
+      category = _ref2.category;
+    var textAreaElement = document.querySelector("textarea[name=".concat(name, "]"));
+    var splitIndex = isFieldFocusedOnce && textAreaElement ? textAreaElement.selectionEnd : text.length;
+    var variable = category ? "".concat(category, ".").concat(slug) : slug;
+    var updatedSubject = [text.slice(0, splitIndex), " {{".concat(variable, "}}"), text.slice(splitIndex)].join("");
+    updateText(updatedSubject);
+  };
+  return /*#__PURE__*/jsx(Input, {
+    error: error,
+    name: name,
+    onBlur: onBlur,
+    required: required,
+    nakedInput: true,
+    label: t("neetoMolecules.emailForm.labels.subject"),
+    placeholder: t("neetoMolecules.emailForm.placeholders.subject"),
+    value: text,
+    suffix: /*#__PURE__*/jsx(DynamicVariables, {
+      buttonProps: {
+        className: "m-1"
+      },
+      variables: subjectVariables,
+      dropdownProps: {
+        className: "neeto-ui-dropdown__popup overflow-y-auto",
+        buttonSize: "small"
+      },
+      onVariableClick: tagClickHandler
+    }),
+    onChange: withEventTargetValue(updateText),
+    onFocus: function onFocus() {
+      return setIsFieldFocusedOnce(true);
+    }
+  });
+};
+
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var 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,
+    handleResetToDefault = _ref.handleResetToDefault,
+    isLoading = _ref.isLoading,
+    replyToFieldProps = _ref.replyToFieldProps,
+    sendToFieldProps = _ref.sendToFieldProps,
+    replyToOptions = _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$isResetting = _ref.isResetting,
+    isResetting = _ref$isResetting === void 0 ? false : _ref$isResetting,
+    _ref$showFields = _ref.showFields,
+    showFields = _ref$showFields === void 0 ? true : _ref$showFields,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$editorAddons = _ref.editorAddons,
+    editorAddons = _ref$editorAddons === void 0 ? EDITOR_ADDONS : _ref$editorAddons,
+    showResetToDefaultButton = _ref.showResetToDefaultButton,
+    _ref$editorRef = _ref.editorRef,
+    editorRef = _ref$editorRef === void 0 ? null : _ref$editorRef,
+    _ref$defaultValues = _ref.defaultValues,
+    defaultValues = _ref$defaultValues === void 0 ? {} : _ref$defaultValues;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useContext = useContext(EmailFormContext),
+    showSendToField = _useContext.showSendToField,
+    showSendToAsRadio = _useContext.showSendToAsRadio,
+    showReplyToField = _useContext.showReplyToField,
+    showCcField = _useContext.showCcField,
+    showBccField = _useContext.showBccField;
+  var _useFormikContext = useFormikContext(),
+    setFieldValue = _useFormikContext.setFieldValue,
+    values = _useFormikContext.values,
+    resetForm = _useFormikContext.resetForm;
+  var normalizedValues = _objectSpread$2(_objectSpread$2({}, values), {}, {
+    message: normalizeHtmlString(values.message)
+  });
+  var normalizedDefaultValues = _objectSpread$2(_objectSpread$2({}, defaultValues), {}, {
+    message: normalizeHtmlString(defaultValues === null || defaultValues === void 0 ? void 0 : defaultValues.message)
+  });
+  normalizedDefaultValues.replyTo || (normalizedDefaultValues.replyTo = globalProps.user.email);
+  var disabled = equals(normalizedValues, normalizedDefaultValues);
+  var sendToFieldOptions = (sendToFieldProps === null || sendToFieldProps === void 0 ? void 0 : sendToFieldProps.options) || sendToOptions;
+  var showSendToRadioField = showSendToField && showSendToAsRadio && isNotEmpty(sendToFieldOptions);
+  var showSendToTextField = showSendToField && !showSendToRadioField;
+  return /*#__PURE__*/jsxs("div", {
+    "data-testid": "email-form",
+    className: classnames("neeto-notification-email-wrapper__form-container flex flex-1 flex-col items-start gap-2 !pb-0", _defineProperty({}, className, className)),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w-full grow",
+      children: showFields && /*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col items-start justify-start gap-5",
+        children: [showSendToRadioField && /*#__PURE__*/jsx(Radio, {
+          className: "pb-2",
+          "data-testid": "send-to-id",
+          label: t("neetoMolecules.emailForm.labels.sendTo"),
+          labelProps: {
+            required: true
+          },
+          name: "sendToId",
+          children: sendToFieldOptions.map(function (_ref2) {
+            var label = _ref2.label,
+              value = _ref2.value;
+            return /*#__PURE__*/createElement(Radio.Item, {
+              label: label,
+              value: value,
+              key: value
+            });
+          })
+        }), /*#__PURE__*/jsx(SendToField, {
+          showBccField: showBccField,
+          showCcField: showCcField,
+          showSendToTextField: showSendToTextField
+        }), showReplyToField && /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-border-gray-200 w-full border-b pb-1",
+          children: /*#__PURE__*/jsx(ReplyToField, _objectSpread$2({
+            options: replyToOptions
+          }, replyToFieldProps))
+        }), /*#__PURE__*/jsx(Field, {
+          name: "subject",
+          children: function children(_ref3) {
+            var _ref3$field = _ref3.field,
+              value = _ref3$field.value,
+              onBlur = _ref3$field.onBlur,
+              _ref3$meta = _ref3.meta,
+              error = _ref3$meta.error,
+              touched = _ref3$meta.touched;
+            return /*#__PURE__*/jsx("div", {
+              className: "neeto-notification-email-subject-block neeto-ui-border-gray-200 w-full border-b pb-1",
+              children: /*#__PURE__*/jsx(SubjectField, {
+                onBlur: onBlur,
+                subjectVariables: subjectVariables,
+                required: true,
+                error: touched && error ? t(error) : undefined,
+                name: "subject",
+                text: value,
+                updateText: function updateText(text) {
+                  return setFieldValue("subject", text);
+                }
+              })
+            });
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-notification-email-message-block w-full",
+          "data-testid": "message-input-container",
+          children: /*#__PURE__*/jsx(FormikEditor, {
+            required: true,
+            addons: editorAddons,
+            "data-testid": "message-input-field",
+            hideSlashCommands: false,
+            id: "form_message",
+            menuType: "fixed",
+            name: "message",
+            placeholder: t("neetoMolecules.emailForm.placeholders.message"),
+            ref: editorRef,
+            variables: messageVariables,
+            shouldUpdate: function shouldUpdate(nextProps, prevProps) {
+              return notEqualsDeep(nextProps.variables, prevProps.variables);
+            }
+          })
+        })]
+      })
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-bg-white neeto-notification-email-wrapper__action-block z-10 flex w-full justify-between py-6 lg:sticky lg:bottom-0",
+      children: [/*#__PURE__*/jsx(ActionBlock, {
+        cancelButtonProps: {
+          onClick: handleCancel
+        },
+        isSubmitting: isLoading || isUpdating
+      }), showResetToDefaultButton && /*#__PURE__*/jsx("div", {
+        className: "neeto-ui-action-block__wrapper",
+        children: /*#__PURE__*/jsx(Button, {
+          disabled: disabled,
+          "data-testid": "reset-to-default-button",
+          label: t("neetoMolecules.emailForm.labels.resetToDefault"),
+          loading: isResetting,
+          style: "tertiary",
+          onClick: function onClick() {
+            resetForm();
+            handleResetToDefault();
+          }
+        })
+      })]
+    })]
   });
 };
-var useUpdateEmailNotification = function useUpdateEmailNotification() {
-  return useMutationWithInvalidation(function (params) {
-    return emailNotificationsApi.update(params);
-  }, {
-    keysToInvalidate: [function (_, _ref) {
-      var notificationHolderId = _ref.notificationHolderId;
-      return [QUERY_KEYS.NEETO_EMAIL_NOTIFICATIONS, notificationHolderId];
-    }]
+
+var css = ".neeto-notification-email-wrapper{height:calc(100vh - 64px);height:calc(100dvh - 64px)}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__control{border:none}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__control--is-focused{box-shadow:none!important}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__value-container{padding-left:0}.neeto-notification-email-message-block p.is-editor-empty{font-size:14px}.neeto-notification-email-subject-block .neeto-ui-input__suffix{padding:0}.neeto-molecules-email-preview-ribbon{background:#ffee6a;border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;box-shadow:0 3px 4px 0 rgba(0,0,0,.149);color:#49545c;font-size:14px;font-weight:500;min-width:-moz-max-content;min-width:max-content;padding:6px 12px;position:absolute;right:-6px;text-align:center;top:-6px;z-index:10}.neeto-molecules-email-preview-ribbon:after{border-color:transparent #ddd06b;border-style:solid;border-width:0 0 12px 6px;content:\"\";left:auto;position:absolute;right:0;top:100%;z-index:-20}";
+n(css,{});
+
+function ownKeys$1$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var EmailFormComponent = function EmailFormComponent(_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,
+    validationSchema = _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,
+    _ref$blockNavigation = _ref.blockNavigation,
+    blockNavigation = _ref$blockNavigation === void 0 ? true : _ref$blockNavigation,
+    _ref$showCcField = _ref.showCcField,
+    showCcField = _ref$showCcField === void 0 ? false : _ref$showCcField,
+    _ref$showBccField = _ref.showBccField,
+    showBccField = _ref$showBccField === void 0 ? false : _ref$showBccField,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
+    _ref$maxEmails = _ref.maxEmails,
+    maxEmails = _ref$maxEmails === void 0 ? 10 : _ref$maxEmails,
+    _ref$emailFormProps = _ref.emailFormProps,
+    emailFormProps = _ref$emailFormProps === void 0 ? {} : _ref$emailFormProps,
+    _ref$emailPreviewProp = _ref.emailPreviewProps,
+    emailPreviewProps = _ref$emailPreviewProp === void 0 ? {} : _ref$emailPreviewProp,
+    _ref$headerProps = _ref.headerProps,
+    headerProps = _ref$headerProps === void 0 ? {} : _ref$headerProps,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+    _ref$switchProps = _ref.switchProps,
+    switchProps = _ref$switchProps === void 0 ? {} : _ref$switchProps,
+    _ref$mobilePreviewPro = _ref.mobilePreviewProps,
+    mobilePreviewProps = _ref$mobilePreviewPro === void 0 ? {} : _ref$mobilePreviewPro;
+  var formatBody = emailPreviewProps.formatBody,
+    formatSubject = emailPreviewProps.formatSubject,
+    bodyVariables = emailPreviewProps.bodyVariables,
+    subjectVariables = emailPreviewProps.subjectVariables;
+  var shouldShowFields = function shouldShowFields(values) {
+    return isEmpty(switchProps) || values.isEnabled;
+  };
+  return /*#__PURE__*/jsx(EmailFormProvider, {
+    formikProps: formikProps,
+    initialValues: initialValues,
+    maxEmails: maxEmails,
+    onSubmit: onSubmit,
+    showBccField: showBccField,
+    showCcField: showCcField,
+    showReplyToField: showReplyToField,
+    showSendToAsRadio: showSendToAsRadio,
+    showSendToField: showSendToField,
+    validationSchema: validationSchema,
+    children: function children(_ref2) {
+      var _values$sendTo;
+      var values = _ref2.values,
+        isSubmitting = _ref2.isSubmitting;
+      return /*#__PURE__*/jsxs("div", {
+        className: "neeto-notification-email-wrapper flex flex-grow flex-col overflow-y-auto lg:flex-row",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "neeto-notification-email-wrapper__form-wrapper flex w-full flex-col px-5 md:px-10 lg:h-full lg:w-1/2 lg:overflow-y-auto",
+          children: [blockNavigation && /*#__PURE__*/jsx(BlockNavigation, {}), isNotEmpty(headerProps) && /*#__PURE__*/jsx(Header, _objectSpread$1$1({
+            className: "px-0",
+            size: "small"
+          }, headerProps)), isNotEmpty(switchProps) && /*#__PURE__*/jsx("div", {
+            className: "flex items-center justify-between gap-y-0.5 pb-6",
+            children: /*#__PURE__*/jsx(Tooltip, _objectSpread$1$1(_objectSpread$1$1({
+              disabled: !(switchProps !== null && switchProps !== void 0 && switchProps.disabled),
+              position: "top"
+            }, tooltipProps), {}, {
+              children: /*#__PURE__*/jsx("div", {
+                className: "flex items-center gap-2",
+                children: /*#__PURE__*/jsx(Switch, _objectSpread$1$1({
+                  "data-testid": "switch",
+                  name: "isEnabled"
+                }, switchProps))
+              })
+            }))
+          }), shouldShowFields(values) && _children, /*#__PURE__*/jsx(EmailForm, _objectSpread$1$1({
+            isLoading: isSubmitting || isLoading,
+            isUpdating: isSubmitting || isLoading,
+            showFields: shouldShowFields(values)
+          }, emailFormProps))]
+        }), shouldShowFields(values) && /*#__PURE__*/jsx(MobilePreviewHeader, _objectSpread$1$1({
+          className: "lg:hidden"
+        }, mobilePreviewProps)), shouldShowFields(values) && /*#__PURE__*/jsx("div", {
+          className: "neeto-notification-email-wrapper__preview-wrapper neeto-ui-bg-gray-100 w-full px-6 py-10 lg:w-1/2 lg:overflow-y-auto",
+          children: /*#__PURE__*/jsx(EmailPreview, _objectSpread$1$1({
+            body: resolveContent(values.message, formatBody, bodyVariables),
+            from: values.sendFrom,
+            to: pluck("value", (_values$sendTo = values === null || values === void 0 ? void 0 : values.sendTo) !== null && _values$sendTo !== void 0 ? _values$sendTo : []),
+            subject: resolveContent(values.subject, formatSubject, subjectVariables)
+          }, emailPreviewProps))
+        })]
+      });
+    }
   });
 };
-var useResetEmailNotificationToDefault = function useResetEmailNotificationToDefault() {
-  return useMutationWithInvalidation(emailNotificationsApi.resetToDefault, {
-    keysToInvalidate: [function (_, _ref2) {
-      var notificationHolderId = _ref2.notificationHolderId,
-        customFields = _ref2.customFields;
-      return [QUERY_KEYS.NEETO_EMAIL_NOTIFICATIONS, notificationHolderId, customFields];
-    }]
+
+function ownKeys$4(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$4(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$4(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$4(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var 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,
+    _ref$showCcField = _ref.showCcField,
+    showCcField = _ref$showCcField === void 0 ? false : _ref$showCcField,
+    _ref$showBccField = _ref.showBccField,
+    showBccField = _ref$showBccField === void 0 ? false : _ref$showBccField,
+    _ref$maxEmails = _ref.maxEmails,
+    maxEmails = _ref$maxEmails === void 0 ? 10 : _ref$maxEmails;
+  return /*#__PURE__*/jsx("div", {
+    className: "neeto-notification-email-outer-wrapper",
+    "data-testid": "email-form-provider",
+    children: /*#__PURE__*/jsx(EmailFormContext.Provider, {
+      value: {
+        showSendToField: showSendToField,
+        showSendToAsRadio: showSendToAsRadio,
+        showReplyToField: showReplyToField,
+        showCcField: showCcField,
+        showBccField: showBccField
+      },
+      children: /*#__PURE__*/jsx(Form, {
+        className: "neeto-notification-email-inner-wrapper",
+        formikProps: _objectSpread$4({
+          enableReinitialize: true,
+          validationSchema: getValidationSchema({
+            showSendToField: showSendToField,
+            showReplyToField: showReplyToField,
+            showSendToAsRadio: showSendToAsRadio,
+            customValidations: customValidations,
+            maxEmails: maxEmails
+          }),
+          initialValues: _objectSpread$4(_objectSpread$4({}, initialValues), {}, {
+            replyTo: initialValues.replyTo || globalProps.user.email
+          }),
+          onSubmit: onSubmit
+        }, formikProps),
+        children: children
+      })
+    })
   });
 };
 
@@ -83,7 +1612,7 @@ var DEFAULT_FIELDS_VISIBILITY = {
 var _excluded$1 = ["notifyEmails", "notifyCcEmails", "notifyBccEmails", "replyToId", "customFields"],
   _excluded2 = ["id", "isEnabled", "sendTo", "sendToCc", "sendToBcc", "showCopyEmails", "replyTo", "message", "subject", "sendFrom", "sendToId"];
 function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var isValidEmail = function isValidEmail(email) {
   return string().email().isValidSync(email);
 };
@@ -180,7 +1709,7 @@ var generateDefaultValues = function generateDefaultValues(data) {
 
 var _excluded = ["validationSchema"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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 NeetoEmailNotificationForm = function NeetoEmailNotificationForm(_ref) {
   var _emailFormProps$sendT, _emailFormProps$sendT2;
   var _ref$emailNotificatio = _ref.emailNotificationParams,
@@ -256,7 +1785,7 @@ var NeetoEmailNotificationForm = function NeetoEmailNotificationForm(_ref) {
   };
   return /*#__PURE__*/jsx("div", {
     className: "min-w-0 grow overflow-y-auto",
-    children: /*#__PURE__*/jsx(EmailForm, _objectSpread(_objectSpread({}, _objectSpread({
+    children: /*#__PURE__*/jsx(EmailFormComponent, _objectSpread(_objectSpread({}, _objectSpread({
       blockNavigation: blockNavigation,
       emailPreviewProps: emailPreviewProps,
       formikProps: formikProps,