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

package/dist/v2/NeetoEmailNotificationForm.js

@@ -0,0 +1,2031 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import React__default, { createContext, forwardRef, createElement, useContext, useState, useRef, memo, Fragment, useId, useEffect, useLayoutEffect } from 'react';
+import { Callout, Button, Typography, Sheet, Toastr, DropdownMenu, Popover, Tooltip, Input, Spinner } from '@bigbinary/neeto-atoms';
+import { findBy, noop, hyphenate, isNotEmpty, isPresent, notEqualsDeep, isNotPresent } from '@bigbinary/neeto-cist';
+import { MultiEmailInput, BlockNavigation, Switch, Form, RadioGroup, ActionBlock, Select, Input as Input$1 } from '@bigbinary/neeto-atoms/formik';
+import classnames from 'classnames';
+import { useFormikContext, Field } from 'formik';
+import { globalProps } from '@bigbinary/neeto-commons-frontend/v2/initializers';
+import FormikEditor from '@bigbinary/neeto-editor/v2/FormikEditor';
+import { prop, isEmpty, mergeLeft, uniqBy, mergeRight, omit, pluck, equals, pick, mergeDeepLeft } from 'ramda';
+import { Trans, useTranslation } from 'react-i18next';
+import { t } from 'i18next';
+import { isEditorEmpty } from '@bigbinary/neeto-editor/v2/utils';
+import * as yup from 'yup';
+import { string } from 'yup';
+import _typeof from '@babel/runtime/helpers/typeof';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useDropzone } from 'react-dropzone';
+import { withT } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
+import { a as Papa, P as PropTypes, S as SvgAvatarPlaceholder, u as useFetchEmailNotifications, b as useUpdateEmailNotification, c as useResetEmailNotificationToDefault } from '../emailNotificationApi-rMt-NHkm.js';
+import 'stream';
+import { joinHyphenCase, hyphenize, buildUrl, withEventTargetValue } from '@bigbinary/neeto-commons-frontend/v2/utils/general';
+import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbPage, BreadcrumbLink, BreadcrumbSeparator } from '@bigbinary/neeto-atoms/primitives';
+import { Link, useHistory } from 'react-router-dom';
+import useFuncDebounce from '@bigbinary/neeto-commons-frontend/v2/react-utils/useFuncDebounce';
+import useQueryParams from '@bigbinary/neeto-commons-frontend/v2/react-utils/useQueryParams';
+import useUpdateEffect from '@bigbinary/neeto-commons-frontend/v2/react-utils/useUpdateEffect';
+import { getQueryParams } from '@bigbinary/neeto-commons-frontend/v2/utils';
+import { withT as withT$1 } from '@bigbinary/neeto-commons-frontend/react-utils';
+import EditorContent from '@bigbinary/neeto-editor/v2/EditorContent';
+import '@tanstack/react-query';
+import '@bigbinary/neeto-commons-frontend/constants';
+import 'axios';
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toCamelCase = (string) => string.replace(
+  /^([A-Z])|[\s-_]+(\w)/g,
+  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const toPascalCase = (string) => {
+  const camelCase = toCamelCase(string);
+  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+};
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const hasA11yProp = (props) => {
+  for (const prop in props) {
+    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+      return true;
+    }
+  }
+  return false;
+};
+
+const LucideContext = createContext({});
+const useLucideContext = () => useContext(LucideContext);
+
+const Icon = forwardRef(
+  ({ color, size, strokeWidth, absoluteStrokeWidth, className = "", children, iconNode, ...rest }, ref) => {
+    const {
+      size: contextSize = 24,
+      strokeWidth: contextStrokeWidth = 2,
+      absoluteStrokeWidth: contextAbsoluteStrokeWidth = false,
+      color: contextColor = "currentColor",
+      className: contextClass = ""
+    } = useLucideContext() ?? {};
+    const calculatedStrokeWidth = absoluteStrokeWidth ?? contextAbsoluteStrokeWidth ? Number(strokeWidth ?? contextStrokeWidth) * 24 / Number(size ?? contextSize) : strokeWidth ?? contextStrokeWidth;
+    return createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size ?? contextSize ?? defaultAttributes.width,
+        height: size ?? contextSize ?? defaultAttributes.height,
+        stroke: color ?? contextColor,
+        strokeWidth: calculatedStrokeWidth,
+        className: mergeClasses("lucide", contextClass, className),
+        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(
+        `lucide-${toKebabCase(toPascalCase(iconName))}`,
+        `lucide-${iconName}`,
+        className
+      ),
+      ...props
+    })
+  );
+  Component.displayName = toPascalCase(iconName);
+  return Component;
+};
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$6 = [
+  ["path", { d: "M12 15V3", key: "m9g1x1" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
+  ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
+];
+const Download = createLucideIcon("download", __iconNode$6);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$5 = [
+  ["path", { d: "M12 3v12", key: "1x0j5s" }],
+  ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
+  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
+];
+const Upload = createLucideIcon("upload", __iconNode$5);
+
+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",
+    variant: "info",
+    children: [/*#__PURE__*/jsxs("ul", {
+      className: "flex list-outside list-disc flex-col gap-y-1 leading-normal font-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"),
+      variant: "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: "text-destructive items",
+      "data-testid": "file-input-error-message",
+      variant: "body3",
+      children: message
+    }, code);
+  });
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  return /*#__PURE__*/jsx(Sheet, {
+    isOpen: isOpen,
+    onClose: onClose,
+    "aria-describedby": undefined,
+    "data-testid": "bulk-upload-pane",
+    children: /*#__PURE__*/jsxs("div", {
+      tabIndex: 0,
+      children: [/*#__PURE__*/jsx(Sheet.Header, {
+        children: /*#__PURE__*/jsx(Sheet.Title, {
+          "data-testid": "bulk-upload-header",
+          children: t("neetoMolecules.shareViaLink.bulkUpload")
+        })
+      }), /*#__PURE__*/jsx(Sheet.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("border-primary flex cursor-pointer flex-col items-center rounded-md border border-dashed p-2 transition duration-500 ease-in-out hover:bg-muted", {
+              "border-muted": isDragActive,
+              "border-destructive bg-destructive/10 hover:bg-destructive/10": fileRejections.length
+            })
+          })), {}, {
+            children: [/*#__PURE__*/jsxs("div", {
+              className: "flex flex-col items-center gap-y-3 p-4",
+              children: [/*#__PURE__*/jsx(Upload, {
+                className: "text-primary",
+                size: 32
+              }), /*#__PURE__*/jsx("input", _objectSpread$1$3(_objectSpread$1$3({}, getInputProps()), {}, {
+                "data-testid": "csv-upload-input"
+              })), isDragActive ? /*#__PURE__*/jsx(Typography, {
+                variant: "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, {
+                        variant: "link"
+                      })
+                    }
+                  })
+                }), /*#__PURE__*/jsxs(Typography, {
+                  className: "text-muted-foreground",
+                  variant: "body3",
+                  children: [/*#__PURE__*/jsx(Trans, {
+                    i18nKey: "neetoMolecules.shareViaLink.bulkUploadPane.supportedFormat",
+                    values: {
+                      fileType: "csv"
+                    },
+                    components: {
+                      code: /*#__PURE__*/jsx("code", {
+                        className: "bg-background m-0 border-s-0 p-0 text-sm"
+                      })
+                    }
+                  }), " ", fileSize && t("neetoMolecules.shareViaLink.bulkUploadPane.supportedSize", {
+                    fileSize: fileSize
+                  })]
+                })]
+              })]
+            }), errors]
+          }))]
+        })
+      }), /*#__PURE__*/jsx(Sheet.Footer, {
+        className: "flex items-center gap-x-2",
+        children: /*#__PURE__*/jsx(Button, {
+          "data-testid": "bulk-upload-cancel-button",
+          label: t("neetoMolecules.common.actions.cancel"),
+          type: "reset",
+          variant: "ghost",
+          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("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: "w-full",
+    "data-testid": "send-to-text-field",
+    children: [showUploadCsvButton && /*#__PURE__*/jsx("div", {
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsx(Button, {
+        "data-testid": "bulk-upload-button",
+        icon: Upload,
+        label: t("neetoMolecules.shareViaLink.bulkUpload"),
+        size: "sm",
+        variant: "link",
+        onClick: function onClick() {
+          return setIsBulkUploadPaneOpen(true);
+        }
+      })
+    }), showSendToField && /*#__PURE__*/jsx("div", {
+      className: "border-border 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: "sm",
+          variant: "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: "border-border w-full border-b pb-1",
+        children: /*#__PURE__*/jsx(MultiEmailInput, _objectSpread$a({
+          name: "sendToBcc"
+        }, ccInputProps))
+      }), (showCopyEmails || showBccField) && /*#__PURE__*/jsx("div", {
+        className: "border-border 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);
+      }
+    })]
+  });
+};
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$4 = [
+  [
+    "path",
+    { d: "M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1", key: "ezmyqa" }
+  ],
+  [
+    "path",
+    {
+      d: "M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1",
+      key: "e1hn23"
+    }
+  ]
+];
+const Braces = createLucideIcon("braces", __iconNode$4);
+
+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 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(DropdownMenu, _objectSpread$9(_objectSpread$9({
+    customTarget: /*#__PURE__*/jsx(Button, _objectSpread$9({
+      "data-testid": "dynamic-variables-button",
+      icon: Braces,
+      size: "icon",
+      variant: "outline"
+    }, buttonProps))
+  }, dropdownProps), {}, {
+    dropdownProps: _objectSpread$9({
+      className: "min-w-56"
+    }, dropdownProps === null || dropdownProps === void 0 ? void 0 : dropdownProps.dropdownProps),
+    children: /*#__PURE__*/jsx("div", {
+      className: "flex max-w-[22.5rem] min-w-[11.5rem] flex-col gap-1.5 p-2",
+      "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, {
+              variant: "h6",
+              children: label
+            }), /*#__PURE__*/jsx("hr", {
+              className: "border-border flex flex-grow"
+            })]
+          }), /*#__PURE__*/jsx("div", {
+            className: "flex flex-wrap items-center gap-2",
+            "data-testid": joinHyphenCase("dynamic-variables-list", label),
+            children: variables.map(function (item) {
+              return /*#__PURE__*/jsx("button", {
+                className: "border-border text-foreground hover:border-primary hover:text-primary focus-visible:border-primary focus-visible:text-primary rounded-md border p-1.5 text-start transition-colors select-none focus:outline-none",
+                "data-testid": joinHyphenCase("dynamic-variables-list-item", item.label),
+                onClick: function onClick() {
+                  return onVariableClick(item);
+                },
+                children: item.label
+              }, item.label);
+            })
+          })]
+        }, label);
+      })
+    })
+  }));
+};
+
+var Breadcrumbs = withT(function (_ref) {
+  var t = _ref.t,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$hasTrailingSepar = _ref.hasTrailingSeparator,
+    hasTrailingSeparator = _ref$hasTrailingSepar === void 0 ? false : _ref$hasTrailingSepar,
+    className = _ref.className;
+  return /*#__PURE__*/jsx(Breadcrumb, {
+    "aria-label": t("neetoMolecules.breadcrumbs.breadcrumbAriaLabel"),
+    className: classnames("mb-4", className),
+    children: /*#__PURE__*/jsx(BreadcrumbList, {
+      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(React__default.Fragment, {
+          children: [/*#__PURE__*/jsx(BreadcrumbItem, {
+            "data-testid": "header-breadcrumb",
+            children: isCurrentPage ? /*#__PURE__*/jsx(BreadcrumbPage, {
+              "data-testid": "".concat(hyphenize(text), "-breadcrumb"),
+              children: text
+            }) : /*#__PURE__*/jsx(BreadcrumbLink, {
+              asChild: true,
+              children: /*#__PURE__*/jsx(Link, {
+                "data-testid": "".concat(hyphenize(text), "-breadcrumb"),
+                to: link,
+                children: text
+              })
+            })
+          }), !isCurrentPage && /*#__PURE__*/jsx(BreadcrumbSeparator, {})]
+        }, index);
+      })
+    })
+  });
+});
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$3 = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
+  ["path", { d: "M12 17h.01", key: "p32p05" }]
+];
+const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$3);
+
+var SIZE = {
+  "default": 16,
+  large: 18
+};
+
+var _excluded$5 = ["label"];
+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,
+    className = _ref.className,
+    _ref$iconColor = _ref.iconColor,
+    iconColor = _ref$iconColor === void 0 ? "currentColor" : _ref$iconColor,
+    _ref$icon = _ref.icon,
+    IconComponent = _ref$icon === void 0 ? CircleQuestionMark : _ref$icon,
+    side = _ref.side,
+    sideOffset = _ref.sideOffset,
+    align = _ref.align,
+    alignOffset = _ref.alignOffset;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var position = align && align !== "center" ? "".concat(side, "-").concat(align) : side;
+  return /*#__PURE__*/jsx(Popover, {
+    alignOffset: alignOffset,
+    position: position,
+    sideOffset: sideOffset,
+    className: "!max-w-[calc(100vw-2rem)]",
+    closeDelay: 150,
+    collisionPadding: 12,
+    openDelay: 0,
+    trigger: /*#__PURE__*/jsx("button", {
+      "data-testid": "help-popover-button",
+      type: "button",
+      className: classnames("inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0", className),
+      children: /*#__PURE__*/jsx(IconComponent, {
+        color: iconColor,
+        size: SIZE[size]
+      })
+    }),
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col",
+      onClick: function onClick(event) {
+        return event.stopPropagation();
+      },
+      children: [title && /*#__PURE__*/jsx(Typography, {
+        asChild: true,
+        variant: "body2",
+        weight: "semibold",
+        children: /*#__PURE__*/jsx("h3", {
+          className: "mb-2",
+          "data-testid": "help-popover-title",
+          children: title
+        })
+      }), typeof description === "string" ? /*#__PURE__*/jsx(Typography, {
+        color: "muted",
+        "data-testid": "help-popover-description",
+        variant: "body2",
+        children: description
+      }) : description, helpLinkProps && function () {
+        var linkLabel = helpLinkProps.label,
+          restLinkProps = _objectWithoutProperties(helpLinkProps, _excluded$5);
+        return /*#__PURE__*/jsx(Button, {
+          asChild: true,
+          className: "mt-3 self-start",
+          variant: "link",
+          children: /*#__PURE__*/jsx("a", _objectSpread$8(_objectSpread$8({
+            "data-testid": "help-popover-link-button",
+            rel: "noreferrer",
+            target: "_blank"
+          }, restLinkProps), {}, {
+            children: linkLabel !== null && linkLabel !== void 0 ? linkLabel : t("neetoMolecules.common.viewHelpArticle")
+          }))
+        });
+      }()]
+    })
+  });
+};
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$2 = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "19", cy: "12", r: "1", key: "1wjl8i" }],
+  ["circle", { cx: "5", cy: "12", r: "1", key: "1pcz8c" }]
+];
+const Ellipsis = createLucideIcon("ellipsis", __iconNode$2);
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode$1 = [
+  ["circle", { cx: "12", cy: "12", r: "1", key: "41hilf" }],
+  ["circle", { cx: "12", cy: "5", r: "1", key: "gxeob9" }],
+  ["circle", { cx: "12", cy: "19", r: "1", key: "lyex9k" }]
+];
+const EllipsisVertical = createLucideIcon("ellipsis-vertical", __iconNode$1);
+
+var DEFAULT_TOOLTIP_PROPS = {
+  disabled: true,
+  position: "bottom"
+};
+
+var _excluded$2$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 Submenu = withT(function (_ref) {
+  var t = _ref.t,
+    label = _ref.label,
+    _ref$menuItems = _ref.menuItems,
+    menuItems = _ref$menuItems === void 0 ? [] : _ref$menuItems;
+  return /*#__PURE__*/jsx(DropdownMenu.SubMenu, {
+    label: label,
+    triggerProps: {
+      "aria-haspopup": "menu"
+    },
+    contentProps: {
+      "aria-label": t("neetoMolecules.moreDropdown.submenuAriaLabel", {
+        label: label
+      })
+    },
+    children: menuItems.map(function (_ref2) {
+      var _ref2$isVisible = _ref2.isVisible,
+        isVisible = _ref2$isVisible === void 0 ? true : _ref2$isVisible,
+        key = _ref2.key,
+        itemProps = _objectWithoutProperties(_ref2, _excluded$2$1);
+      if (!isVisible) return null;
+      return /*#__PURE__*/jsx(MenuItem, _objectSpread$2$1({}, itemProps), key !== null && key !== void 0 ? key : hyphenate(itemProps.label || "menu-item"));
+    })
+  });
+});
+
+var _excluded$1$1 = ["onClick", "label", "type", "hasSubItems", "menuItems", "dropdownProps"];
+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 = function MenuItem(_ref) {
+  var onClick = _ref.onClick,
+    label = _ref.label,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? "menuItem" : _ref$type,
+    _ref$hasSubItems = _ref.hasSubItems,
+    hasSubItems = _ref$hasSubItems === void 0 ? false : _ref$hasSubItems,
+    menuItems = _ref.menuItems,
+    dropdownProps = _ref.dropdownProps,
+    menuItemProps = _objectWithoutProperties(_ref, _excluded$1$1);
+  if (type === "divider") return /*#__PURE__*/jsx(DropdownMenu.Divider, {
+    role: "separator"
+  });
+  if (hasSubItems) {
+    return /*#__PURE__*/jsx(Submenu, _objectSpread$1$2({}, _objectSpread$1$2({
+      dropdownProps: dropdownProps,
+      label: label,
+      menuItems: menuItems
+    }, menuItemProps)));
+  }
+  return /*#__PURE__*/jsx(DropdownMenu.MenuItem, _objectSpread$1$2(_objectSpread$1$2({
+    onClick: onClick,
+    role: "menuitem"
+  }, menuItemProps), {}, {
+    children: label
+  }));
+};
+
+var _excluded$4 = ["isRounded", "size", "tooltipProps", "variant"],
+  _excluded2$1 = ["className"],
+  _excluded3 = ["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 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,
+    _dropdownButtonProps$ = dropdownButtonProps.size,
+    buttonSize = _dropdownButtonProps$ === void 0 ? "icon" : _dropdownButtonProps$,
+    customTooltipProps = dropdownButtonProps.tooltipProps,
+    _dropdownButtonProps$2 = dropdownButtonProps.variant,
+    variant = _dropdownButtonProps$2 === void 0 ? "ghost" : _dropdownButtonProps$2,
+    buttonProps = _objectWithoutProperties(dropdownButtonProps, _excluded$4);
+  var tooltipProps = mergeRight(DEFAULT_TOOLTIP_PROPS, customTooltipProps);
+  var TargetIcon = isVertical ? EllipsisVertical : Ellipsis;
+  var contentClassName = dropdownProps.className,
+    restDropdownProps = _objectWithoutProperties(dropdownProps, _excluded2$1);
+  var isDropdownDisabled = isDisabled || dropdownProps.disabled;
+  var triggerClassName = classnames("shrink-0", {
+    "rounded-full": isRoundedButton
+  });
+  if (isDropdownDisabled && !tooltipProps.disabled) {
+    return /*#__PURE__*/jsx(Tooltip, {
+      content: tooltipProps.content,
+      position: tooltipProps.position || "bottom",
+      children: /*#__PURE__*/jsx("span", {
+        children: /*#__PURE__*/jsx(Button, _objectSpread$7({
+          variant: variant,
+          disabled: true,
+          className: triggerClassName,
+          "data-dropdown-button-style": "more-dropdown",
+          "data-testid": "more-dropdown-button",
+          icon: TargetIcon,
+          size: buttonSize
+        }, buttonProps))
+      })
+    });
+  }
+  return /*#__PURE__*/jsxs(DropdownMenu, _objectSpread$7(_objectSpread$7({
+    customTarget: /*#__PURE__*/jsx(Button, _objectSpread$7({
+      variant: variant,
+      "aria-haspopup": "menu",
+      "aria-label": t("neetoMolecules.moreDropdown.buttonAriaLabel"),
+      className: triggerClassName,
+      "data-dropdown-button-style": "more-dropdown",
+      disabled: isDropdownDisabled,
+      icon: TargetIcon,
+      size: buttonSize
+    }, buttonProps)),
+    dropdownProps: {
+      "aria-label": t("neetoMolecules.moreDropdown.menuAriaLabel"),
+      className: contentClassName
+    }
+  }, restDropdownProps), {}, {
+    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, _excluded3);
+      if (!isVisible) return null;
+      return /*#__PURE__*/jsx(MenuItem, _objectSpread$7({}, menuItemProps), key !== null && key !== void 0 ? key : hyphenate(menuItemProps.label || "menu-item"));
+    }), menuBottomChildren]
+  }));
+};
+
+/**
+ * @license lucide-react v1.7.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
+  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
+];
+const Search$1 = createLucideIcon("search", __iconNode);
+
+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", "className", "label"];
+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,
+    className = _ref.className,
+    label = _ref.label,
+    inputProps = _objectWithoutProperties(_ref, _excluded$3);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var queryParams = useQueryParams({
+    toCamelCase: false
+  });
+  var history = useHistory();
+  var inputId = useId();
+  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 () {
+    var _queryParams$searchPa;
+    if (!enableUrlSync) return;
+    var searchParamValue = (_queryParams$searchPa = queryParams === null || queryParams === void 0 ? void 0 : queryParams[searchParamName]) !== null && _queryParams$searchPa !== void 0 ? _queryParams$searchPa : "";
+    setInternalValue(searchParamValue);
+  }, [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 pathname = history.location.pathname;
+    if (trimmedValue) {
+      history.push(buildUrl(pathname, mergeLeft(_defineProperty({}, searchParamName, trimmedValue), queryParams)));
+    } else {
+      history.push(buildUrl(pathname, omit([searchParamName], queryParams)));
+    }
+  };
+  var handleDebouncedSearchTermChange = useFuncDebounce(function (trimmedValue) {
+    if (onSearch) onSearch(trimmedValue);else if (enableUrlSync) handleSearchQueryParams(trimmedValue);
+  }, debounceTime);
+  useUpdateEffect(function () {
+    handleDebouncedSearchTermChange(trimmedValue);
+  }, [trimmedValue]);
+  var prevValueRef = useRef(value);
+  if (value !== undefined && value !== prevValueRef.current) {
+    setInternalValue(value);
+    prevValueRef.current = 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: className,
+    label: label,
+    id: inputId,
+    placeholder: t("neetoMolecules.common.actions.search"),
+    prefix: /*#__PURE__*/jsx(Search$1, {}),
+    type: "search",
+    value: internalValue,
+    onChange: handleOnChange
+  }, inputProps));
+};
+
+var SIZES = {
+  nano: "nano"};
+var DROPDOWN_BUTTON_SIZES = {
+  nano: "icon-sm",
+  small: "icon"
+};
+
+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("--nv-header-height", "".concat(height, "px"));
+    };
+    updateHeaderHeight();
+    window.addEventListener("resize", updateHeaderHeight);
+    return function () {
+      window.removeEventListener("resize", updateHeaderHeight);
+      document.body.style.removeProperty("--nv-header-height");
+    };
+  }, []);
+  var isNano = size === SIZES.nano;
+  var hasBreadcrumbs = isNotEmpty(breadcrumbs);
+  var TitleTag = isNano ? "h3" : "h1";
+  return /*#__PURE__*/jsxs("div", {
+    "data-testid": dataTestId,
+    ref: headerRef,
+    className: classnames("flex min-h-0 w-full shrink-0 flex-row items-start justify-between gap-4 pt-10 pb-6", "flex-wrap lg:flex-nowrap", className),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "flex flex-wrap",
+      children: [hasBreadcrumbs && /*#__PURE__*/jsx(Breadcrumbs, {
+        breadcrumbs: breadcrumbs
+      }), /*#__PURE__*/jsx("div", {
+        className: classnames("flex w-full flex-row items-center gap-3", hasBreadcrumbs ? "mt-0" : "-mt-1 max-lg:-mt-2.5 max-md:-mt-2 max-sm:-mt-1"),
+        children: /*#__PURE__*/jsx(Typography, {
+          asChild: true,
+          variant: isNano ? "h4" : "h2",
+          weight: "semibold",
+          children: /*#__PURE__*/jsxs(TitleTag, {
+            "data-testid": "main-header",
+            children: [title, isPresent(titleHelpPopoverProps) && /*#__PURE__*/jsx(HelpPopover, _objectSpread$5({
+              className: "ms-2 inline-flex align-middle",
+              side: "right"
+            }, titleHelpPopoverProps)), renderDropdown(function (_ref2) {
+              var _ref2$dropdownButtonP = _ref2.dropdownButtonProps,
+                dropdownButtonProps = _ref2$dropdownButtonP === void 0 ? {} : _ref2$dropdownButtonP,
+                dropdownProps = _objectWithoutProperties(_ref2, _excluded$2);
+              return /*#__PURE__*/jsx("span", {
+                className: "ms-2 inline-flex align-middle",
+                children: /*#__PURE__*/jsx(MoreDropdown, _objectSpread$5({
+                  dropdownButtonProps: _objectSpread$5({
+                    size: DROPDOWN_BUTTON_SIZES[size]
+                  }, dropdownButtonProps)
+                }, dropdownProps))
+              });
+            })]
+          })
+        })
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: classnames("flex items-center gap-3 empty:hidden", "flex-wrap justify-start md:flex-nowrap md:justify-end"),
+      children: [searchProps && /*#__PURE__*/jsx(Search, _objectSpread$5({
+        enableUrlSync: true,
+        className: classnames("min-w-[12.6rem] grow-0", searchProps.className)
+      }, searchProps)), actionBlock && /*#__PURE__*/jsx("div", {
+        className: "flex shrink-0 items-center justify-end gap-3 max-[360px]:shrink max-[360px]:flex-wrap max-[360px]:justify-start",
+        children: actionBlock
+      })]
+    })]
+  });
+};
+
+var MobilePreviewHeader = withT$1(function (_ref) {
+  var t = _ref.t,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$message = _ref.message,
+    message = _ref$message === void 0 ? "" : _ref$message;
+  return /*#__PURE__*/jsx("div", {
+    className: classnames("bg-muted px-6 py-5", className),
+    "data-testid": "mobile-preview-header",
+    children: /*#__PURE__*/jsx(Typography, {
+      variant: "body2",
+      children: message || t("neetoMolecules.mobilePreview.message")
+    })
+  });
+});
+MobilePreviewHeader.propTypes = {
+  className: PropTypes.string,
+  message: PropTypes.node
+};
+
+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("bg-background neeto-ui-theme--light relative flex flex-1 flex-col rounded-lg px-6 py-8", className),
+    children: [/*#__PURE__*/jsx("div", {
+      className: "absolute -end-1.5 -top-1.5 z-10 min-w-max rounded-ss-md rounded-se-md rounded-es-md px-3 py-1.5 text-center text-sm font-medium text-[#49545c] shadow-[0px_3px_4px_0px_#00000026] [background:#ffee6a] after:absolute after:end-0 after:top-full after:-z-20 after:[border-width:0_0_12px_6px] after:border-solid after:[border-color:transparent_#ddd06b] after:content-['']",
+      children: t("neetoMolecules.emailPreview.previewMessage")
+    }), /*#__PURE__*/jsxs("div", {
+      className: "w-full pb-4",
+      children: [/*#__PURE__*/jsx(Typography, {
+        className: "text-foreground min-w-0 grow space-x-2 leading-normal break-words",
+        "data-testid": "email-subject-preview",
+        variant: "h4",
+        children: /*#__PURE__*/jsx("span", {
+          children: subject || /*#__PURE__*/jsx("span", {
+            className: "bg-muted h-2 w-40 rounded-full"
+          })
+        })
+      }), /*#__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: "flex flex-col gap-1",
+          children: [isPresent(from) ? /*#__PURE__*/jsx(Typography, {
+            variant: "h6",
+            weight: "medium",
+            children: from
+          }) : /*#__PURE__*/jsxs("div", {
+            className: "flex gap-2",
+            children: [/*#__PURE__*/jsx("span", {
+              className: "bg-muted h-2 w-24 rounded-full"
+            }), /*#__PURE__*/jsx("span", {
+              className: "bg-muted h-2 w-24 rounded-full"
+            })]
+          }), isPresent(to) ? /*#__PURE__*/jsx(Typography, {
+            className: "text-muted-foreground line-clamp-1",
+            "data-testid": "email-to-block",
+            variant: "nano",
+            children: to.join(", ")
+          }) : /*#__PURE__*/jsx("span", {
+            className: "bg-muted h-2 w-16 rounded-full",
+            "data-testid": "email-to-block"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "bg-muted flex flex-1 flex-col justify-between gap-y-6 rounded px-6 py-4 text-base leading-relaxed",
+      "data-testid": "email-body-preview-container",
+      children: /*#__PURE__*/jsxs("div", {
+        className: "bg-background 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: "bg-muted h-2 w-48 max-w-full rounded-full md:w-80"
+          }), /*#__PURE__*/jsx("div", {
+            className: "bg-muted h-2 w-40 max-w-full rounded-full md:w-72"
+          }), /*#__PURE__*/jsx("div", {
+            className: "bg-muted h-2 w-48 max-w-full rounded-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 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("neetoMolecules.emailForm.errors.subjectRequired")),
+  message: yup.string().test("message", t("neetoMolecules.emailForm.errors.messageRequired"), function (value) {
+    return !isEditorEmpty(value);
+  })
+});
+var sendToFieldValidation = function sendToFieldValidation(maxEmails) {
+  var validation = yup.array().test("all-emails-valid", t("neetoMolecules.emailForm.errors.invalidEmailAddress"), function (emails) {
+    return emails === null || emails === void 0 ? void 0 : emails.every(prop("valid"));
+  }).test("max-email-count", t("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("neetoMolecules.emailForm.errors.required", {
+      entity: t("neetoMolecules.emailForm.fields.sendToEmailAddress")
+    })).nullable(),
+    sendToCc: validation,
+    sendToBcc: validation
+  });
+};
+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"];
+
+/* 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: _objectSpread$3({
+      className: "reply-to-help-icon"
+    }, isPresent(popoverProps) ? {
+      popoverProps: _objectSpread$3(_objectSpread$3({}, popoverProps), {}, {
+        description: popoverProps.description || t("neetoMolecules.emailForm.tooltips.replyTo")
+      })
+    } : {
+      tooltipProps: {
+        content: t("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(value) {
+        return setFieldValue("replyTo", value !== null && value !== void 0 ? 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")
+    },
+    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"
+      },
+      dropdownProps: {
+        className: "overflow-y-auto"
+      },
+      variables: subjectVariables,
+      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 _globalProps$user;
+  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 = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _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("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(RadioGroup, {
+          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(RadioGroup.Item, {
+              label: label,
+              value: value,
+              key: value
+            });
+          })
+        }), /*#__PURE__*/jsx(SendToField, {
+          showBccField: showBccField,
+          showCcField: showCcField,
+          showSendToTextField: showSendToTextField
+        }), showReplyToField && /*#__PURE__*/jsx("div", {
+          className: "border-border 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: "border-border 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: "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: "bg-background 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", {
+        children: /*#__PURE__*/jsx(Button, {
+          disabled: disabled,
+          "data-testid": "reset-to-default-button",
+          label: t("neetoMolecules.emailForm.labels.resetToDefault"),
+          loading: isResetting,
+          variant: "secondary",
+          onClick: function onClick() {
+            resetForm();
+            handleResetToDefault();
+          }
+        })
+      })]
+    })]
+  });
+};
+
+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: "flex h-[calc(100dvh-64px)] flex-grow flex-col overflow-y-auto lg:flex-row",
+        children: [/*#__PURE__*/jsxs("div", {
+          className: "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: "bg-muted 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))
+        })]
+      });
+    }
+  });
+};
+
+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 _globalProps$user;
+  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", {
+    "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, {
+        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 = globalProps.user) === null || _globalProps$user === void 0 ? void 0 : _globalProps$user.email)
+          }),
+          onSubmit: onSubmit
+        }, formikProps),
+        children: children
+      })
+    })
+  });
+};
+
+var FORM_VALIDATION_SCHEMA = {
+  isEnabled: yup["boolean"]()
+};
+var DEFAULT_FIELDS_VISIBILITY = {
+  showSendToField: true,
+  showReplyToField: false,
+  showSendToAsRadio: false,
+  showBccField: false,
+  showCcField: false
+};
+
+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), 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);
+};
+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 parseEmailsOptions = function parseEmailsOptions() {
+  var emailOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return emailOptions.map(prop("label"));
+};
+var parseEmailNotificationData = function parseEmailNotificationData(data, sendToOptions) {
+  var _sendToOptions$;
+  var notifyEmails = data.notifyEmails,
+    notifyCcEmails = data.notifyCcEmails,
+    notifyBccEmails = data.notifyBccEmails,
+    replyToId = data.replyToId,
+    customFields = data.customFields,
+    rest = _objectWithoutProperties(data, _excluded$1);
+  var parsed = _objectSpread$1(_objectSpread$1({}, customFields), rest);
+  parsed.sendTo = notifyEmails ? createEmailOptions(notifyEmails) : [];
+  parsed.sendToCc = notifyCcEmails ? createEmailOptions(notifyCcEmails) : [];
+  parsed.sendToBcc = notifyCcEmails ? createEmailOptions(notifyBccEmails) : [];
+  parsed.replyTo = replyToId || customFields["replyTo"];
+  parsed.sendToId = customFields["sendToId"] || (sendToOptions === null || sendToOptions === void 0 || (_sendToOptions$ = sendToOptions[0]) === null || _sendToOptions$ === void 0 ? void 0 : _sendToOptions$.value) || "";
+  parsed.showCopyEmails = !!(notifyCcEmails !== null && notifyCcEmails !== void 0 && notifyCcEmails.length || notifyBccEmails !== null && notifyBccEmails !== void 0 && notifyBccEmails.length);
+  return parsed;
+};
+var packEmailPayload = function packEmailPayload(values, isReplyToDropdownField, isDisabledByUser) {
+  values.id;
+    var isEnabled = values.isEnabled,
+    sendTo = values.sendTo,
+    sendToCc = values.sendToCc,
+    sendToBcc = values.sendToBcc,
+    showCopyEmails = values.showCopyEmails,
+    replyTo = values.replyTo,
+    message = values.message,
+    subject = values.subject,
+    sendFrom = values.sendFrom,
+    sendToId = values.sendToId,
+    rest = _objectWithoutProperties(values, _excluded2);
+  var payload = {
+    isEnabled: isEnabled
+  };
+  if (isEnabled) {
+    payload = _objectSpread$1({}, payload);
+    payload.notifyEmails = parseEmailsOptions(sendTo);
+    payload.notifyBccEmails = showCopyEmails ? parseEmailsOptions(sendToBcc) : [];
+    payload.notifyCcEmails = showCopyEmails ? parseEmailsOptions(sendToCc) : [];
+    if (isReplyToDropdownField) {
+      payload.replyToId = replyTo;
+    } else {
+      rest.replyTo = replyTo;
+    }
+    payload.message = message;
+    payload.subject = subject;
+    payload.customFields = _objectSpread$1(_objectSpread$1({}, rest), {}, {
+      disabledByUser: false
+    });
+    if (isNotEmpty(sendToId)) {
+      payload.customFields = mergeLeft(payload.customFields, {
+        sendToId: sendToId
+      });
+    }
+    payload.sendFrom = sendFrom;
+  } else {
+    payload.customFields = {
+      disabledByUser: isDisabledByUser
+    };
+  }
+  return payload;
+};
+var renderText = function renderText(text, fallbackTranslation) {
+  return isEmpty(text) ? fallbackTranslation : text;
+};
+var generateDefaultValues = function generateDefaultValues(data) {
+  var _data$defaultAttribut, _data$defaultAttribut2;
+  if (!(data !== null && data !== void 0 && data.defaultAttributes)) {
+    return null;
+  }
+  var currentDataFields = ["id", "customFields", "notifyCcEmails", "notifyBccEmails", "replyToId"];
+  var currentDataOverlay = pick(currentDataFields, data);
+  var normalizedDefaults = _objectSpread$1(_objectSpread$1({}, data.defaultAttributes), {}, {
+    message: ((_data$defaultAttribut = data.defaultAttributes.message) === null || _data$defaultAttribut === void 0 || (_data$defaultAttribut2 = _data$defaultAttribut.replaceAll) === null || _data$defaultAttribut2 === void 0 ? void 0 : _data$defaultAttribut2.call(_data$defaultAttribut, "<br />", "<br>")) || data.defaultAttributes.message
+  });
+  return mergeLeft(currentDataOverlay, normalizedDefaults);
+};
+
+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), 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,
+    emailNotificationParams = _ref$emailNotificatio === void 0 ? {} : _ref$emailNotificatio,
+    _ref$emailPreviewProp = _ref.emailPreviewProps,
+    emailPreviewProps = _ref$emailPreviewProp === void 0 ? {} : _ref$emailPreviewProp,
+    _ref$emailFormProps = _ref.emailFormProps,
+    emailFormProps = _ref$emailFormProps === void 0 ? {} : _ref$emailFormProps,
+    _ref$emailFormikProps = _ref.emailFormikProps,
+    emailFormikProps = _ref$emailFormikProps === void 0 ? {} : _ref$emailFormikProps,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? "" : _ref$title,
+    _ref$notificationTogg = _ref.notificationToggleLabel,
+    notificationToggleLabel = _ref$notificationTogg === void 0 ? "" : _ref$notificationTogg,
+    _ref$breadcrumbs = _ref.breadcrumbs,
+    breadcrumbs = _ref$breadcrumbs === void 0 ? [] : _ref$breadcrumbs,
+    _ref$helpPopoverProps = _ref.helpPopoverProps,
+    helpPopoverProps = _ref$helpPopoverProps === void 0 ? {} : _ref$helpPopoverProps,
+    _ref$tooltipProps = _ref.tooltipProps,
+    tooltipProps = _ref$tooltipProps === void 0 ? {} : _ref$tooltipProps,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$fieldsVisibility = _ref.fieldsVisibility,
+    fieldsVisibility = _ref$fieldsVisibility === void 0 ? {} : _ref$fieldsVisibility,
+    _ref$blockNavigation = _ref.blockNavigation,
+    blockNavigation = _ref$blockNavigation === void 0 ? false : _ref$blockNavigation,
+    _ref$onSuccess = _ref.onSuccess,
+    onSuccess = _ref$onSuccess === void 0 ? noop : _ref$onSuccess,
+    children = _ref.children;
+  var editorRef = useRef();
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useFetchEmailNotific = useFetchEmailNotifications(emailNotificationParams),
+    _useFetchEmailNotific2 = _useFetchEmailNotific.data,
+    data = _useFetchEmailNotific2 === void 0 ? {} : _useFetchEmailNotific2,
+    isLoading = _useFetchEmailNotific.isLoading;
+  var _useUpdateEmailNotifi = useUpdateEmailNotification(),
+    updateEmailNotification = _useUpdateEmailNotifi.mutate,
+    isSubmitting = _useUpdateEmailNotifi.isPending;
+  var _useResetEmailNotific = useResetEmailNotificationToDefault(),
+    resetToDefault = _useResetEmailNotific.mutate,
+    isResetting = _useResetEmailNotific.isPending;
+  var handleSubmit = function handleSubmit(values) {
+    var _emailFormProps$reply;
+    var isDisabledByUser = data.isEnabled && !values.isEnabled;
+    var isReplyToDropdownField = (emailFormProps === null || emailFormProps === void 0 || (_emailFormProps$reply = emailFormProps.replyToFieldProps) === null || _emailFormProps$reply === void 0 ? void 0 : _emailFormProps$reply.options) !== undefined;
+    var body = mergeDeepLeft(packEmailPayload(values, isReplyToDropdownField, isDisabledByUser), emailNotificationParams);
+    updateEmailNotification(body, {
+      onSuccess: onSuccess
+    });
+  };
+  if (isLoading || isNotPresent(data)) {
+    return /*#__PURE__*/jsx("div", {
+      className: "flex h-full w-full items-center justify-center",
+      children: /*#__PURE__*/jsx(Spinner, {})
+    });
+  }
+  var newDefaultAttributes = generateDefaultValues(data);
+  var defaultValues = parseEmailNotificationData(newDefaultAttributes, emailFormProps === null || emailFormProps === void 0 || (_emailFormProps$sendT = emailFormProps.sendToFieldProps) === null || _emailFormProps$sendT === void 0 ? void 0 : _emailFormProps$sendT.options);
+  defaultValues.defaultAttributes = data.defaultAttributes;
+  var formattedTitle = renderText(title, t("neetoEmailNotifications.emailNotification.title"));
+  var formattedNotificationToggleLabel = renderText(notificationToggleLabel, t("neetoEmailNotifications.emailNotification.notificationToggleLabel"));
+  var customValidationSchema = emailFormikProps.validationSchema,
+    formikProps = _objectWithoutProperties(emailFormikProps, _excluded);
+  var handleResetToDefault = function handleResetToDefault() {
+    resetToDefault(emailNotificationParams, {
+      onSuccess: function onSuccess(_ref2) {
+        var _editorRef$current;
+        var emailNotification = _ref2.emailNotification;
+        return editorRef === null || editorRef === void 0 || (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.editor) === null || _editorRef$current === void 0 || (_editorRef$current = _editorRef$current.commands) === null || _editorRef$current === void 0 ? void 0 : _editorRef$current.setContent(emailNotification.message);
+      }
+    });
+  };
+  return /*#__PURE__*/jsx("div", {
+    className: "min-w-0 grow overflow-y-auto",
+    children: /*#__PURE__*/jsx(EmailFormComponent, _objectSpread(_objectSpread({}, _objectSpread({
+      blockNavigation: blockNavigation,
+      emailPreviewProps: emailPreviewProps,
+      formikProps: formikProps,
+      tooltipProps: tooltipProps
+    }, mergeLeft(fieldsVisibility, DEFAULT_FIELDS_VISIBILITY))), {}, {
+      isLoading: isSubmitting,
+      validationSchema: customValidationSchema || FORM_VALIDATION_SCHEMA,
+      emailFormProps: _objectSpread({
+        editorRef: editorRef,
+        handleResetToDefault: handleResetToDefault,
+        isResetting: isResetting,
+        defaultValues: defaultValues
+      }, emailFormProps),
+      headerProps: {
+        title: formattedTitle,
+        titleHelpPopoverProps: helpPopoverProps,
+        breadcrumbs: breadcrumbs
+      },
+      initialValues: parseEmailNotificationData(data, emailFormProps === null || emailFormProps === void 0 || (_emailFormProps$sendT2 = emailFormProps.sendToFieldProps) === null || _emailFormProps$sendT2 === void 0 ? void 0 : _emailFormProps$sendT2.options),
+      switchProps: {
+        label: formattedNotificationToggleLabel,
+        disabled: disabled,
+        "data-testid": "receive-email-notification-switch"
+      },
+      onSubmit: handleSubmit,
+      children: children
+    }))
+  });
+};
+
+export { NeetoEmailNotificationForm as default };
+//# sourceMappingURL=NeetoEmailNotificationForm.js.map