@bigbinary/neeto-molecules 4.0.123 → 4.0.125

package/dist/CopyToClipboardButton.js

@@ -1,7 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
 import classnames from 'classnames';
 import { copyToClipboard } from '@bigbinary/neeto-commons-frontend/utils/general';
 import Copy from '@bigbinary/neeto-icons/Copy';
@@ -18,11 +18,13 @@ var TOOLTIP_CONFIG = {
   hideAfter: TIME_OUT,
   position: "top"
 };
+var BUTTON_SIZES = {
+  medium: "medium"};
 
 var css = ".neeto-molecules-copy-button{display:flex;justify-content:space-between}.neeto-molecules-copy-button .neeto-ui-btn:active,.neeto-molecules-copy-button .neeto-ui-btn:focus,.neeto-molecules-copy-button .neeto-ui-btn:hover{box-shadow:none}.neeto-molecules-copy-button--active{background:rgba(var(--neeto-ui-success-500));color:rgba(var(--neeto-ui-white))}.neeto-molecules-copy-button--active.neeto-ui-btn:active,.neeto-molecules-copy-button--active.neeto-ui-btn:focus,.neeto-molecules-copy-button--active.neeto-ui-btn:hover{background:rgba(var(--neeto-ui-success-500));box-shadow:none;color:rgba(var(--neeto-ui-white))}";
 n(css,{});
 
-var _excluded = ["className", "icon", "label", "successLabel", "tooltipContent", "successTooltipContent", "value", "style", "tooltipProps", "onClick"];
+var _excluded = ["className", "icon", "label", "successLabel", "tooltipContent", "successTooltipContent", "value", "style", "size", "tooltipProps", "onClick"];
 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 CopyToClipboardButton = function CopyToClipboardButton(_ref) {
@@ -36,6 +38,8 @@ var CopyToClipboardButton = function CopyToClipboardButton(_ref) {
     successTooltipContent = _ref.successTooltipContent,
     value = _ref.value,
     style = _ref.style,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? BUTTON_SIZES.medium : _ref$size,
     tooltipProps = _ref.tooltipProps,
     onClick = _ref.onClick,
     otherProps = _objectWithoutProperties(_ref, _excluded);
@@ -57,11 +61,12 @@ var CopyToClipboardButton = function CopyToClipboardButton(_ref) {
       setIsChecked(false);
     }, TIME_OUT); // Reset copied state after 2 seconds
   };
-  useEffect(function () {
+  useLayoutEffect(function () {
     if (!ref.current) return;
+    ref.current.style.minWidth = "";
     var buttonWidth = ref.current.clientWidth;
     ref.current.style.minWidth = "".concat(buttonWidth, "px");
-  }, []);
+  }, [size]);
   var tooltipOptions = label ? null : mergeAll([TOOLTIP_CONFIG, {
     content: isChecked ? successTooltipContent || t("neetoMolecules.common.copied") : tooltipContent || t("neetoMolecules.common.copyToClipboard")
   }, tooltipProps]);
@@ -69,13 +74,14 @@ var CopyToClipboardButton = function CopyToClipboardButton(_ref) {
   var buttonIcon = isChecked ? Check : icon;
   return /*#__PURE__*/jsx(Button, _objectSpread({
     ref: ref,
+    size: size,
     style: style,
     "data-cy": "copy-to-clipboard-button",
     "data-testid": "copy-button",
     icon: buttonIcon,
     label: buttonLabel,
     tooltipProps: tooltipOptions,
-    className: classnames("neeto-molecules-copy-button", _defineProperty(_defineProperty({}, className, className), "neeto-molecules-copy-button--active", isChecked)),
+    className: classnames("neeto-molecules-copy-button", _defineProperty(_defineProperty(_defineProperty({}, className, className), "neeto-molecules-copy-button--active", isChecked), "neeto-molecules-copy-button--".concat(size), size)),
     onClick: onHandleClick
   }, otherProps));
 };

package/dist/CopyToClipboardButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CopyToClipboardButton.js","sources":["../src/components/CopyToClipboardButton/constants.js","../src/components/CopyToClipboardButton/index.jsx"],"sourcesContent":["const TIME_OUT = 2000;\n\nconst TOOLTIP_CONFIG = {\n  trigger: \"click mouseenter\",\n  hideAfter: TIME_OUT,\n  position: \"top\",\n};\n\nconst BUTTON_STYLES = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  text: \"text\",\n};\n\nexport { TOOLTIP_CONFIG, TIME_OUT, BUTTON_STYLES };\n","import { useState, useEffect, useRef } from \"react\";\n\nimport classnames from \"classnames\";\nimport { copyToClipboard } from \"neetocommons/utils/general\";\nimport { Copy, Check } from \"neetoicons\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { mergeAll } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { TOOLTIP_CONFIG, TIME_OUT, BUTTON_STYLES } from \"./constants\";\nimport \"./copyToClipboard.scss\";\n\nconst CopyToClipboardButton = ({\n  className,\n  icon = Copy,\n  label = \"\",\n  successLabel,\n  tooltipContent,\n  successTooltipContent,\n  value,\n  style,\n  tooltipProps,\n  onClick,\n  ...otherProps\n}) => {\n  const { t } = useTranslation();\n\n  const [isChecked, setIsChecked] = useState(false);\n\n  const ref = useRef();\n\n  const onHandleClick = event => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (onClick) onClick(event);\n    else copyToClipboard(value, { showToastr: false });\n\n    setIsChecked(true);\n    setTimeout(() => {\n      setIsChecked(false);\n    }, TIME_OUT); // Reset copied state after 2 seconds\n  };\n\n  useEffect(() => {\n    if (!ref.current) return;\n    const buttonWidth = ref.current.clientWidth;\n    ref.current.style.minWidth = `${buttonWidth}px`;\n  }, []);\n\n  const tooltipOptions = label\n    ? null\n    : mergeAll([\n        TOOLTIP_CONFIG,\n        {\n          content: isChecked\n            ? successTooltipContent || t(\"neetoMolecules.common.copied\")\n            : tooltipContent || t(\"neetoMolecules.common.copyToClipboard\"),\n        },\n        tooltipProps,\n      ]);\n\n  const buttonLabel =\n    isChecked && label\n      ? successLabel || t(\"neetoMolecules.common.copied\")\n      : label;\n  const buttonIcon = isChecked ? Check : icon;\n\n  return (\n    <Button\n      {...{ ref, style }}\n      data-cy=\"copy-to-clipboard-button\"\n      data-testid=\"copy-button\"\n      icon={buttonIcon}\n      label={buttonLabel}\n      tooltipProps={tooltipOptions}\n      className={classnames(\"neeto-molecules-copy-button\", {\n        [className]: className,\n        \"neeto-molecules-copy-button--active\": isChecked,\n      })}\n      onClick={onHandleClick}\n      {...otherProps}\n    />\n  );\n};\n\nCopyToClipboardButton.propTypes = {\n  /**\n   * To provide additional classnames to the button.\n   */\n  className: PropTypes.string,\n  /**\n   * To provide the icon to be passed to the button. Defaults to the Copy icon.\n   */\n  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /**\n   * To provide the label to the button. By default there is no label.\n   */\n  label: PropTypes.string,\n  /**\n   * The label of button when the value is copied to clipboard. Defaults to 'Copied'.\n   */\n  successLabel: PropTypes.string,\n  /**\n   * The value to be copied to clipboard. (required)\n   */\n  value: PropTypes.string,\n  /**\n   * To specify the style of the Button.\n   */\n  style: PropTypes.oneOf(Object.values(BUTTON_STYLES)),\n  /**\n   * The content of the tooltip when the value is copied to clipboard. Defaults to 'Copy to clipboard'.\n   */\n  tooltipContent: PropTypes.string,\n  /**\n   * The content of the tooltip when the value is copied to clipboard. Defaults to 'Copied'.\n   */\n  successTooltipContent: PropTypes.string,\n};\n\nexport default CopyToClipboardButton;\n"],"names":["TIME_OUT","TOOLTIP_CONFIG","trigger","hideAfter","position","CopyToClipboardButton","_ref","className","_ref$icon","icon","Copy","_ref$label","label","successLabel","tooltipContent","successTooltipContent","value","style","tooltipProps","onClick","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isChecked","setIsChecked","ref","useRef","onHandleClick","event","preventDefault","stopPropagation","copyToClipboard","showToastr","setTimeout","useEffect","current","buttonWidth","clientWidth","minWidth","concat","tooltipOptions","mergeAll","content","buttonLabel","buttonIcon","Check","_jsx","Button","_objectSpread","classnames","_defineProperty"],"mappings":"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"}
+{"version":3,"file":"CopyToClipboardButton.js","sources":["../src/components/CopyToClipboardButton/constants.js","../src/components/CopyToClipboardButton/index.jsx"],"sourcesContent":["const TIME_OUT = 2000;\n\nconst TOOLTIP_CONFIG = {\n  trigger: \"click mouseenter\",\n  hideAfter: TIME_OUT,\n  position: \"top\",\n};\n\nconst BUTTON_STYLES = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  text: \"text\",\n};\n\nconst BUTTON_SIZES = {\n  small: \"small\",\n  medium: \"medium\",\n  large: \"large\",\n};\n\nexport { TOOLTIP_CONFIG, TIME_OUT, BUTTON_STYLES, BUTTON_SIZES };\n","import { useState, useLayoutEffect, useRef } from \"react\";\n\nimport classnames from \"classnames\";\nimport { copyToClipboard } from \"neetocommons/utils/general\";\nimport { Copy, Check } from \"neetoicons\";\nimport { Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { mergeAll } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport {\n  TOOLTIP_CONFIG,\n  TIME_OUT,\n  BUTTON_STYLES,\n  BUTTON_SIZES,\n} from \"./constants\";\nimport \"./copyToClipboard.scss\";\n\nconst CopyToClipboardButton = ({\n  className,\n  icon = Copy,\n  label = \"\",\n  successLabel,\n  tooltipContent,\n  successTooltipContent,\n  value,\n  style,\n  size = BUTTON_SIZES.medium,\n  tooltipProps,\n  onClick,\n  ...otherProps\n}) => {\n  const { t } = useTranslation();\n\n  const [isChecked, setIsChecked] = useState(false);\n\n  const ref = useRef();\n\n  const onHandleClick = event => {\n    event.preventDefault();\n    event.stopPropagation();\n\n    if (onClick) onClick(event);\n    else copyToClipboard(value, { showToastr: false });\n\n    setIsChecked(true);\n    setTimeout(() => {\n      setIsChecked(false);\n    }, TIME_OUT); // Reset copied state after 2 seconds\n  };\n\n  useLayoutEffect(() => {\n    if (!ref.current) return;\n    ref.current.style.minWidth = \"\";\n    const buttonWidth = ref.current.clientWidth;\n    ref.current.style.minWidth = `${buttonWidth}px`;\n  }, [size]);\n\n  const tooltipOptions = label\n    ? null\n    : mergeAll([\n        TOOLTIP_CONFIG,\n        {\n          content: isChecked\n            ? successTooltipContent || t(\"neetoMolecules.common.copied\")\n            : tooltipContent || t(\"neetoMolecules.common.copyToClipboard\"),\n        },\n        tooltipProps,\n      ]);\n\n  const buttonLabel =\n    isChecked && label\n      ? successLabel || t(\"neetoMolecules.common.copied\")\n      : label;\n  const buttonIcon = isChecked ? Check : icon;\n\n  return (\n    <Button\n      {...{ ref, size, style }}\n      data-cy=\"copy-to-clipboard-button\"\n      data-testid=\"copy-button\"\n      icon={buttonIcon}\n      label={buttonLabel}\n      tooltipProps={tooltipOptions}\n      className={classnames(\"neeto-molecules-copy-button\", {\n        [className]: className,\n        \"neeto-molecules-copy-button--active\": isChecked,\n        [`neeto-molecules-copy-button--${size}`]: size,\n      })}\n      onClick={onHandleClick}\n      {...otherProps}\n    />\n  );\n};\n\nCopyToClipboardButton.propTypes = {\n  /**\n   * To provide additional classnames to the button.\n   */\n  className: PropTypes.string,\n  /**\n   * To provide the icon to be passed to the button. Defaults to the Copy icon.\n   */\n  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /**\n   * To provide the label to the button. By default there is no label.\n   */\n  label: PropTypes.string,\n  /**\n   * The label of button when the value is copied to clipboard. Defaults to 'Copied'.\n   */\n  successLabel: PropTypes.string,\n  /**\n   * The value to be copied to clipboard. (required)\n   */\n  value: PropTypes.string,\n  /**\n   * To specify the style of the Button.\n   */\n  style: PropTypes.oneOf(Object.values(BUTTON_STYLES)),\n  /**\n   * To specify the size of the Button. Defaults to 'medium'.\n   */\n  size: PropTypes.oneOf(Object.values(BUTTON_SIZES)),\n  /**\n   * The content of the tooltip when the value is copied to clipboard. Defaults to 'Copy to clipboard'.\n   */\n  tooltipContent: PropTypes.string,\n  /**\n   * The content of the tooltip when the value is copied to clipboard. Defaults to 'Copied'.\n   */\n  successTooltipContent: PropTypes.string,\n};\n\nexport default CopyToClipboardButton;\n"],"names":["TIME_OUT","TOOLTIP_CONFIG","trigger","hideAfter","position","BUTTON_SIZES","small","medium","CopyToClipboardButton","_ref","className","_ref$icon","icon","Copy","_ref$label","label","successLabel","tooltipContent","successTooltipContent","value","style","_ref$size","size","tooltipProps","onClick","otherProps","_objectWithoutProperties","_excluded","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isChecked","setIsChecked","ref","useRef","onHandleClick","event","preventDefault","stopPropagation","copyToClipboard","showToastr","setTimeout","useLayoutEffect","current","minWidth","buttonWidth","clientWidth","concat","tooltipOptions","mergeAll","content","buttonLabel","buttonIcon","Check","_jsx","Button","_objectSpread","classnames","_defineProperty"],"mappings":"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"}

package/dist/EmailForm.js

@@ -5,19 +5,18 @@ import classnames from 'classnames';
 import { useFormikContext, Field } from 'formik';
 import { isPresent, isNotEmpty, notEqualsDeep, noop } from '@bigbinary/neeto-cist';
 import FormikEditor from '@bigbinary/neeto-editor/FormikEditor';
-import Typography from '@bigbinary/neetoui/Typography';
 import Button from '@bigbinary/neetoui/Button';
 import ActionBlock from '@bigbinary/neetoui/formik/ActionBlock';
 import Radio from '@bigbinary/neetoui/formik/Radio';
 import { prop, equals, pluck, isEmpty } from 'ramda';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import { t } from 'i18next';
 import { isEditorEmpty } from '@bigbinary/neeto-editor/utils';
 import * as yup from 'yup';
 import Select from '@bigbinary/neetoui/formik/Select';
 import Input from '@bigbinary/neetoui/formik/Input';
 import _typeof from '@babel/runtime/helpers/typeof';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import SendToFields from './SendToFields.js';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { withEventTargetValue } from '@bigbinary/neeto-commons-frontend/utils/general';
@@ -32,6 +31,7 @@ import { n } from './inject-css-C2dztUxs.js';
 import Form from '@bigbinary/neetoui/formik/Form';
 import '@bigbinary/neeto-commons-frontend/react-utils/withT';
 import '@bigbinary/neeto-editor/EditorContent';
+import '@bigbinary/neetoui/Typography';
 import './index-DAYCJu79.js';
 import './_commonjsHelpers-BFTU3MAI.js';
 import '@babel/runtime/helpers/toConsumableArray';
@@ -111,7 +111,9 @@ var EDITOR_ADDONS = ["highlight", "emoji", "code-block", "block-quote", "image-u
 var EmailFormContext = /*#__PURE__*/createContext({
   showSendToField: false,
   showSendToAsRadio: false,
-  showReplyToField: 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; }
@@ -190,6 +192,7 @@ var ReplyToField = function ReplyToField(_ref) {
   return /*#__PURE__*/jsx(Input, {
     labelProps: labelProps,
     autoFocus: true,
+    nakedInput: true,
     required: true,
     className: "w-full",
     "data-testid": "replyToInput",
@@ -261,43 +264,30 @@ var SubjectField = function SubjectField(_ref) {
     var updatedSubject = [text.slice(0, splitIndex), " {{".concat(variable, "}}"), text.slice(splitIndex)].join("");
     updateText(updatedSubject);
   };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx(Input$1, {
-      error: error,
-      name: name,
-      onBlur: onBlur,
-      required: required,
-      label: t("neetoMolecules.emailForm.labels.subject"),
-      size: "large",
-      value: text,
-      suffix: /*#__PURE__*/jsx(DynamicVariables, {
-        variables: subjectVariables,
-        dropdownProps: {
-          className: "neeto-ui-dropdown__popup overflow-y-auto",
-          buttonSize: "small"
-        },
-        onVariableClick: tagClickHandler
-      }),
-      onChange: withEventTargetValue(updateText),
-      onFocus: function onFocus() {
-        return setIsFieldFocusedOnce(true);
-      }
-    }), /*#__PURE__*/jsx(Typography, {
-      className: "neeto-ui-text-gray-600 mt-2",
-      "data-cy": "subject-input-variable-label",
-      style: "body3",
-      children: /*#__PURE__*/jsx(Trans, {
-        components: {
-          span: /*#__PURE__*/jsx("span", {
-            className: "font-semibold"
-          })
-        },
-        i18nKey: "neetoMolecules.emailForm.helpText",
-        values: {
-          type: "subject"
-        }
-      })
-    })]
+  return /*#__PURE__*/jsx(Input$1, {
+    error: error,
+    name: name,
+    onBlur: onBlur,
+    required: required,
+    nakedInput: true,
+    label: t("neetoMolecules.emailForm.labels.subject"),
+    placeholder: t("neetoMolecules.emailForm.placeholders.subject"),
+    value: text,
+    suffix: /*#__PURE__*/jsx(DynamicVariables, {
+      buttonProps: {
+        className: "m-1"
+      },
+      variables: subjectVariables,
+      dropdownProps: {
+        className: "neeto-ui-dropdown__popup overflow-y-auto",
+        buttonSize: "small"
+      },
+      onVariableClick: tagClickHandler
+    }),
+    onChange: withEventTargetValue(updateText),
+    onFocus: function onFocus() {
+      return setIsFieldFocusedOnce(true);
+    }
   });
 };
 
@@ -358,86 +348,80 @@ var EmailForm = function EmailForm(_ref) {
     "data-cy": "email-form",
     "data-testid": "email-form",
     className: classnames("neeto-notification-email-wrapper__form-container flex flex-1 flex-col items-start gap-2 !pb-0", _defineProperty({}, className, className)),
-    children: [showFields && /*#__PURE__*/jsxs("div", {
-      className: "flex w-full flex-col items-start justify-start gap-6",
-      children: [/*#__PURE__*/jsx(Field, {
-        name: "subject",
-        children: function children(_ref2) {
-          var _ref2$field = _ref2.field,
-            value = _ref2$field.value,
-            onBlur = _ref2$field.onBlur,
-            _ref2$meta = _ref2.meta,
-            error = _ref2$meta.error,
-            touched = _ref2$meta.touched;
-          return /*#__PURE__*/jsx("div", {
-            className: "w-full",
-            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);
-              }
-            })
-          });
-        }
-      }), showSendToRadioField && /*#__PURE__*/jsx(Radio, {
-        "data-testid": "send-to-id",
-        label: t("neetoMolecules.emailForm.labels.sendTo"),
-        labelProps: {
-          required: true
-        },
-        name: "sendToId",
-        children: sendToFieldOptions.map(function (_ref3) {
-          var label = _ref3.label,
-            value = _ref3.value;
-          return /*#__PURE__*/createElement(Radio.Item, {
-            label: label,
-            value: value,
-            key: value
-          });
-        })
-      }), /*#__PURE__*/jsx(SendToField, {
-        showBccField: showBccField,
-        showCcField: showCcField,
-        showSendToTextField: showSendToTextField
-      }), showReplyToField && /*#__PURE__*/jsx(ReplyToField, _objectSpread$2({
-        options: replyToOptions
-      }, replyToFieldProps)), /*#__PURE__*/jsxs("div", {
-        className: "w-full",
-        "data-cy": "message-input-container",
-        children: [/*#__PURE__*/jsx(FormikEditor, {
-          required: true,
-          addons: editorAddons,
-          "data-cy": "message-input-field",
-          id: "form_message",
-          label: t("neetoMolecules.emailForm.labels.message"),
-          name: "message",
-          ref: editorRef,
-          variables: messageVariables,
-          shouldUpdate: function shouldUpdate(nextProps, prevProps) {
-            return notEqualsDeep(nextProps.variables, prevProps.variables);
-          }
-        }), /*#__PURE__*/jsx(Typography, {
-          className: "neeto-ui-text-gray-500 mt-2",
-          "data-cy": "message-input-variable-label",
-          style: "body3",
-          children: /*#__PURE__*/jsx(Trans, {
-            i18nKey: "neetoMolecules.emailForm.helpText",
-            values: {
-              type: "message"
-            },
-            components: {
-              span: /*#__PURE__*/jsx("span", {
-                className: "font-semibold"
+    children: [/*#__PURE__*/jsx("div", {
+      className: "w-full grow",
+      children: showFields && /*#__PURE__*/jsxs("div", {
+        className: "flex w-full flex-col items-start justify-start gap-5",
+        children: [showSendToRadioField && /*#__PURE__*/jsx(Radio, {
+          className: "pb-2",
+          "data-testid": "send-to-id",
+          label: t("neetoMolecules.emailForm.labels.sendTo"),
+          labelProps: {
+            required: true
+          },
+          name: "sendToId",
+          children: sendToFieldOptions.map(function (_ref2) {
+            var label = _ref2.label,
+              value = _ref2.value;
+            return /*#__PURE__*/createElement(Radio.Item, {
+              label: label,
+              value: value,
+              key: value
+            });
+          })
+        }), /*#__PURE__*/jsx(SendToField, {
+          showBccField: showBccField,
+          showCcField: showCcField,
+          showSendToTextField: showSendToTextField
+        }), showReplyToField && /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-border-gray-200 w-full border-b pb-1",
+          children: /*#__PURE__*/jsx(ReplyToField, _objectSpread$2({
+            options: replyToOptions
+          }, replyToFieldProps))
+        }), /*#__PURE__*/jsx(Field, {
+          name: "subject",
+          children: function children(_ref3) {
+            var _ref3$field = _ref3.field,
+              value = _ref3$field.value,
+              onBlur = _ref3$field.onBlur,
+              _ref3$meta = _ref3.meta,
+              error = _ref3$meta.error,
+              touched = _ref3$meta.touched;
+            return /*#__PURE__*/jsx("div", {
+              className: "neeto-notification-email-subject-block neeto-ui-border-gray-200 w-full border-b pb-1",
+              children: /*#__PURE__*/jsx(SubjectField, {
+                onBlur: onBlur,
+                subjectVariables: subjectVariables,
+                required: true,
+                error: touched && error ? t(error) : undefined,
+                name: "subject",
+                text: value,
+                updateText: function updateText(text) {
+                  return setFieldValue("subject", text);
+                }
               })
+            });
+          }
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-notification-email-message-block w-full",
+          "data-cy": "message-input-container",
+          children: /*#__PURE__*/jsx(FormikEditor, {
+            required: true,
+            addons: editorAddons,
+            "data-cy": "message-input-field",
+            hideSlashCommands: false,
+            id: "form_message",
+            menuType: "none",
+            name: "message",
+            placeholder: t("neetoMolecules.emailForm.placeholders.message"),
+            ref: editorRef,
+            variables: messageVariables,
+            shouldUpdate: function shouldUpdate(nextProps, prevProps) {
+              return notEqualsDeep(nextProps.variables, prevProps.variables);
             }
           })
         })]
-      })]
+      })
     }), /*#__PURE__*/jsxs("div", {
       className: "neeto-ui-bg-white neeto-notification-email-wrapper__action-block z-10 flex w-full justify-between py-6 lg:sticky lg:bottom-0",
       children: [/*#__PURE__*/jsx(ActionBlock, {
@@ -463,7 +447,7 @@ var EmailForm = function EmailForm(_ref) {
   });
 };
 
-var css = ".neeto-notification-email-wrapper{height:calc(100vh - 64px);height:calc(100dvh - 64px)}";
+var css = ".neeto-notification-email-wrapper{height:calc(100vh - 64px);height:calc(100dvh - 64px)}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__control{border:none}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__control--is-focused{box-shadow:none!important}.neeto-notification-email-outer-wrapper .neeto-ui-react-select__container .neeto-ui-react-select__value-container{padding-left:0}.neeto-notification-email-message-block .neeto-editor,.neeto-notification-email-message-block .neeto-editor-error{border:none;padding:0}.neeto-notification-email-message-block p.is-editor-empty{font-size:14px}.neeto-notification-email-subject-block .neeto-ui-input__suffix{padding:0}.neeto-molecules-email-preview-ribbon{background:#ffee6a;border-bottom-left-radius:6px;border-top-left-radius:6px;border-top-right-radius:6px;box-shadow:0 3px 4px 0 rgba(0,0,0,.149);color:#49545c;font-size:14px;font-weight:500;min-width:-moz-max-content;min-width:max-content;padding:6px 12px;position:absolute;right:-6px;text-align:center;top:-6px;z-index:10}.neeto-molecules-email-preview-ribbon:after{border-color:transparent #ddd06b;border-style:solid;border-width:0 0 12px 6px;content:\"\";left:auto;position:absolute;right:0;top:100%;z-index:-20}";
 n(css,{});
 
 function ownKeys$1(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; }