@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/NeetoWidget.js

@@ -1,13 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import i18next, { t } from 'i18next';
 import { values, last, pluck, identity, any, assoc, prop, fromPairs, isEmpty } from 'ramda';
-import React__default, { useEffect, useState, useRef } from 'react';
 import { useMutation, useQuery, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import Info from '@bigbinary/neeto-icons/Info';
 import Callout from '@bigbinary/neetoui/Callout';
 import { Trans, useTranslation } from 'react-i18next';
-import _extends from '@babel/runtime/helpers/extends';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { memo, useEffect, useState, useRef } from 'react';
 import classnames from 'classnames';
 import { capitalize, noop, isNotEmpty } from '@bigbinary/neeto-cist';
 import usePrevious from '@bigbinary/neeto-commons-frontend/react-utils/usePrevious';
@@ -15,6 +14,7 @@ import Button from '@bigbinary/neetoui/Button';
 import Toastr from '@bigbinary/neetoui/Toastr';
 import Typography from '@bigbinary/neetoui/Typography';
 import PageLoader from './PageLoader.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import Select from '@bigbinary/neetoui/Select';
 import CopyToClipboardButton from './CopyToClipboardButton.js';
 import { c as commonjsGlobal } from './_commonjsHelpers-1c8beb5f.js';
@@ -108,58 +108,60 @@ var USE_NEETO_WIDGET_NPM_PAGE_URL = "https://www.npmjs.com/package/@bigbinary/re
 
 var ChatWidgetBody = function ChatWidgetBody(_ref) {
   var widgets = _ref.widgets;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, widgets.includes(WIDGET_TYPES.changelog) && /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.changelogHelp",
-    values: {
-      helpLink: WIDGET_HELP_LINKS.changelog
-    },
-    components: {
-      p: /*#__PURE__*/React__default.createElement(Typography, {
-        className: "mb-2",
-        style: "body2"
-      }),
-      a: /*#__PURE__*/React__default.createElement(Button, {
-        href: WIDGET_HELP_LINKS.changelog,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  }), widgets.includes(WIDGET_TYPES.chat) && /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.chatHelp",
-    values: {
-      helpLink: WIDGET_HELP_LINKS.chat
-    },
-    components: {
-      p: /*#__PURE__*/React__default.createElement(Typography, {
-        className: "mb-2",
-        style: "body2"
-      }),
-      a: /*#__PURE__*/React__default.createElement(Button, {
-        href: WIDGET_HELP_LINKS.chat,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  }), widgets.includes(WIDGET_TYPES.replay) && /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.replayHelp",
-    values: {
-      helpLink: WIDGET_HELP_LINKS.replay
-    },
-    components: {
-      p: /*#__PURE__*/React__default.createElement(Typography, {
-        className: "mb-2",
-        style: "body2"
-      }),
-      a: /*#__PURE__*/React__default.createElement(Button, {
-        href: WIDGET_HELP_LINKS.replay,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  }));
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [widgets.includes(WIDGET_TYPES.changelog) && /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoMolecules.widget.email.body.values.embedCode.changelogHelp",
+      values: {
+        helpLink: WIDGET_HELP_LINKS.changelog
+      },
+      components: {
+        p: /*#__PURE__*/jsx(Typography, {
+          className: "mb-2",
+          style: "body2"
+        }),
+        a: /*#__PURE__*/jsx(Button, {
+          href: WIDGET_HELP_LINKS.changelog,
+          rel: "noreferrer",
+          style: "link",
+          target: "_blank"
+        })
+      }
+    }), widgets.includes(WIDGET_TYPES.chat) && /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoMolecules.widget.email.body.values.embedCode.chatHelp",
+      values: {
+        helpLink: WIDGET_HELP_LINKS.chat
+      },
+      components: {
+        p: /*#__PURE__*/jsx(Typography, {
+          className: "mb-2",
+          style: "body2"
+        }),
+        a: /*#__PURE__*/jsx(Button, {
+          href: WIDGET_HELP_LINKS.chat,
+          rel: "noreferrer",
+          style: "link",
+          target: "_blank"
+        })
+      }
+    }), widgets.includes(WIDGET_TYPES.replay) && /*#__PURE__*/jsx(Trans, {
+      i18nKey: "neetoMolecules.widget.email.body.values.embedCode.replayHelp",
+      values: {
+        helpLink: WIDGET_HELP_LINKS.replay
+      },
+      components: {
+        p: /*#__PURE__*/jsx(Typography, {
+          className: "mb-2",
+          style: "body2"
+        }),
+        a: /*#__PURE__*/jsx(Button, {
+          href: WIDGET_HELP_LINKS.replay,
+          rel: "noreferrer",
+          style: "link",
+          target: "_blank"
+        })
+      }
+    })]
+  });
 };
 
 var prism = {exports: {}};
@@ -2124,19 +2126,23 @@ var SyntaxHighlighter = function SyntaxHighlighter(_ref) {
   useEffect(function () {
     Prism.highlightAll();
   }, [code]);
-  return /*#__PURE__*/React__default.createElement("pre", {
-    className: className
-  }, /*#__PURE__*/React__default.createElement("code", {
-    className: "language-".concat(language)
-  }, code));
+  return /*#__PURE__*/jsx("pre", {
+    className: className,
+    children: /*#__PURE__*/jsx("code", {
+      className: "language-".concat(language),
+      children: code
+    })
+  });
 };
-var SyntaxHighlighter$1 = /*#__PURE__*/React__default.memo(SyntaxHighlighter);
+var SyntaxHighlighter$1 = /*#__PURE__*/memo(SyntaxHighlighter);
 
 var CodeBlock = function CodeBlock(_ref) {
   var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Trans, {
-      i18nKey: "neetoMolecules.codeblock.codeSnippet"
-    })) : _ref$title,
+    title = _ref$title === void 0 ? /*#__PURE__*/jsx("div", {
+      children: /*#__PURE__*/jsx(Trans, {
+        i18nKey: "neetoMolecules.codeblock.codeSnippet"
+      })
+    }) : _ref$title,
     codeString = _ref.codeString,
     _ref$showCopyButton = _ref.showCopyButton,
     showCopyButton = _ref$showCopyButton === void 0 ? true : _ref$showCopyButton,
@@ -2151,35 +2157,39 @@ var CodeBlock = function CodeBlock(_ref) {
   var _ref2 = frameworkProps !== null && frameworkProps !== void 0 ? frameworkProps : {},
     selectedFramework = _ref2.selectedFramework,
     setSelectedFramework = _ref2.setSelectedFramework;
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: classnames(["relative", className])
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-rounded-lg neeto-ui-border-gray-200 neeto-ui-bg-gray-50 flex w-full flex-wrap items-center justify-between gap-2 rounded-b-none border p-3"
-  }, title && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "m-0 flex-shrink-0",
-    "data-cy": "code-block-title-text",
-    style: "h4"
-  }, title), selectedFramework && /*#__PURE__*/React__default.createElement(Select, {
-    className: "w-40",
-    "data-testid": "framework-select",
-    options: FRAMEWORK_SELECT_OPTIONS,
-    value: selectedFramework,
-    onChange: setSelectedFramework
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "ml-auto flex flex-shrink-0 items-center justify-end gap-2"
-  }, sendViaEmail ? /*#__PURE__*/React__default.createElement(Button, {
-    style: "text",
-    label: t("neetoMolecules.widget.installation.snippet.sendViaEmail"),
-    onClick: sendViaEmail
-  }) : null, showCopyButton && /*#__PURE__*/React__default.createElement(CopyToClipboardButton, {
-    label: t("neetoMolecules.widget.installation.snippet.copy"),
-    style: "primary",
-    value: codeString
-  }))), /*#__PURE__*/React__default.createElement(SyntaxHighlighter$1, {
-    className: "neeto-ui-bg-gray-800 neeto-ui-rounded-lg m-0 rounded-t-none",
-    code: codeString,
-    language: "javascript"
-  }));
+  return /*#__PURE__*/jsxs("div", {
+    className: classnames(["relative", className]),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-rounded-lg neeto-ui-border-gray-200 neeto-ui-bg-gray-50 flex w-full flex-wrap items-center justify-between gap-2 rounded-b-none border p-3",
+      children: [title && /*#__PURE__*/jsx(Typography, {
+        className: "m-0 flex-shrink-0",
+        "data-cy": "code-block-title-text",
+        style: "h4",
+        children: title
+      }), selectedFramework && /*#__PURE__*/jsx(Select, {
+        className: "w-40",
+        "data-testid": "framework-select",
+        options: FRAMEWORK_SELECT_OPTIONS,
+        value: selectedFramework,
+        onChange: setSelectedFramework
+      }), /*#__PURE__*/jsxs("div", {
+        className: "ml-auto flex flex-shrink-0 items-center justify-end gap-2",
+        children: [sendViaEmail ? /*#__PURE__*/jsx(Button, {
+          style: "text",
+          label: t("neetoMolecules.widget.installation.snippet.sendViaEmail"),
+          onClick: sendViaEmail
+        }) : null, showCopyButton && /*#__PURE__*/jsx(CopyToClipboardButton, {
+          label: t("neetoMolecules.widget.installation.snippet.copy"),
+          style: "primary",
+          value: codeString
+        })]
+      })]
+    }), /*#__PURE__*/jsx(SyntaxHighlighter$1, {
+      className: "neeto-ui-bg-gray-800 neeto-ui-rounded-lg m-0 rounded-t-none",
+      code: codeString,
+      language: "javascript"
+    })]
+  });
 };
 
 var buildEmbedWidgetScript = function buildEmbedWidgetScript() {
@@ -2306,6 +2316,8 @@ var useEmailEmbedCode = function useEmailEmbedCode(onSuccess) {
   });
 };
 
+function ownKeys$3(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$3(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$3(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$3(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CodeSnippet = function CodeSnippet(_ref) {
   var isPaneOpen = _ref.isPaneOpen,
     onClose = _ref.onClose,
@@ -2358,41 +2370,53 @@ var CodeSnippet = function CodeSnippet(_ref) {
     }
     return props;
   };
-  return /*#__PURE__*/React__default.createElement(Pane, {
+  return /*#__PURE__*/jsx(Pane, {
     onClose: onClose,
-    isOpen: isPaneOpen
-  }, /*#__PURE__*/React__default.createElement(Formik, {
-    initialValues: getEmailWidgetSnippetFormInitialValues(subject),
-    validationSchema: getEmailWidgetSnippetValidationSchema(),
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React__default.createElement(Form, null, /*#__PURE__*/React__default.createElement(Pane.Header, null, /*#__PURE__*/React__default.createElement(Typography, {
-    style: "h2"
-  }, t("neetoMolecules.widget.email.title"))), /*#__PURE__*/React__default.createElement(Pane.Body, null, /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React__default.createElement(MultiEmailInput, {
-    required: true,
-    label: t("neetoMolecules.widget.email.fields.emails.label"),
-    name: "emails",
-    placeholder: t("neetoMolecules.widget.email.fields.emails.placeholder")
-  }), /*#__PURE__*/React__default.createElement(Input, {
-    required: true,
-    label: t("neetoMolecules.widget.email.fields.subject.label"),
-    name: "subject",
-    type: "text"
-  }), /*#__PURE__*/React__default.createElement(Typography, {
-    style: "body2"
-  }, body), /*#__PURE__*/React__default.createElement(CodeBlock, renderCodeBlockProps()))), /*#__PURE__*/React__default.createElement(Pane.Footer, {
-    className: "gap-x-2"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    disabled: emailMutation.isPending,
-    label: t("neetoMolecules.widget.email.actions.send"),
-    loading: emailMutation.isPending,
-    type: "submit"
-  }), /*#__PURE__*/React__default.createElement(Button, {
-    label: t("neetoMolecules.widget.email.actions.cancel"),
-    style: "text",
-    onClick: onClose
-  })))));
+    isOpen: isPaneOpen,
+    children: /*#__PURE__*/jsx(Formik, {
+      initialValues: getEmailWidgetSnippetFormInitialValues(subject),
+      validationSchema: getEmailWidgetSnippetValidationSchema(),
+      onSubmit: handleSubmit,
+      children: /*#__PURE__*/jsxs(Form, {
+        children: [/*#__PURE__*/jsx(Pane.Header, {
+          children: /*#__PURE__*/jsx(Typography, {
+            style: "h2",
+            children: t("neetoMolecules.widget.email.title")
+          })
+        }), /*#__PURE__*/jsx(Pane.Body, {
+          children: /*#__PURE__*/jsxs("div", {
+            className: "w-full space-y-4",
+            children: [/*#__PURE__*/jsx(MultiEmailInput, {
+              required: true,
+              label: t("neetoMolecules.widget.email.fields.emails.label"),
+              name: "emails",
+              placeholder: t("neetoMolecules.widget.email.fields.emails.placeholder")
+            }), /*#__PURE__*/jsx(Input, {
+              required: true,
+              label: t("neetoMolecules.widget.email.fields.subject.label"),
+              name: "subject",
+              type: "text"
+            }), /*#__PURE__*/jsx(Typography, {
+              style: "body2",
+              children: body
+            }), /*#__PURE__*/jsx(CodeBlock, _objectSpread$3({}, renderCodeBlockProps()))]
+          })
+        }), /*#__PURE__*/jsxs(Pane.Footer, {
+          className: "gap-x-2",
+          children: [/*#__PURE__*/jsx(Button, {
+            disabled: emailMutation.isPending,
+            label: t("neetoMolecules.widget.email.actions.send"),
+            loading: emailMutation.isPending,
+            type: "submit"
+          }), /*#__PURE__*/jsx(Button, {
+            label: t("neetoMolecules.widget.email.actions.cancel"),
+            style: "text",
+            onClick: onClose
+          })]
+        })]
+      })
+    })
+  });
 };
 
 var useForceUpdate = function useForceUpdate() {
@@ -2407,8 +2431,8 @@ var useForceUpdate = function useForceUpdate() {
   };
 };
 
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var useFetchApiKey = function useFetchApiKey() {
   return useQuery({
     queryKey: [QUERY_KEYS.apiKey],
@@ -2432,7 +2456,7 @@ var useFetchConfigurations = function useFetchConfigurations() {
 };
 var useUpdateConfigurations = function useUpdateConfigurations() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useMutationWithInvalidation(updateWidgetConfiguration, _objectSpread({
+  return useMutationWithInvalidation(updateWidgetConfiguration, _objectSpread$2({
     keysToInvalidate: [[QUERY_KEYS.configuration]]
   }, options));
 };
@@ -2443,19 +2467,20 @@ var TooltipSwitch = withT(function (_ref) {
     widget = _ref.widget,
     selectedWidgets = _ref.selectedWidgets,
     updateSelectedWidgets = _ref.updateSelectedWidgets;
-  return /*#__PURE__*/React__default.createElement(Tooltip, {
+  return /*#__PURE__*/jsx(Tooltip, {
     disabled: enabledClientApps.includes(widget),
     placement: "right",
     content: t("neetoMolecules.widget.tooltips.productIsDisabled", {
       productName: "neeto".concat(capitalize(widget))
+    }),
+    children: /*#__PURE__*/jsx(Switch, {
+      checked: selectedWidgets.includes(widget),
+      disabled: !enabledClientApps.includes(widget),
+      onChange: function onChange() {
+        return updateSelectedWidgets(widget);
+      }
     })
-  }, /*#__PURE__*/React__default.createElement(Switch, {
-    checked: selectedWidgets.includes(widget),
-    disabled: !enabledClientApps.includes(widget),
-    onChange: function onChange() {
-      return updateSelectedWidgets(widget);
-    }
-  }));
+  });
 });
 
 var SelectionSwitches = function SelectionSwitches(_ref) {
@@ -2464,30 +2489,39 @@ var SelectionSwitches = function SelectionSwitches(_ref) {
     primaryApp = _ref.primaryApp,
     enabledClientApps = _ref.enabledClientApps;
   var primaryWidget = WIDGET_TYPES_VALUES.includes(primaryApp) ? primaryApp : "";
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-4 flex w-full flex-wrap items-center justify-between gap-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center space-x-2"
-  }, isNotEmpty(primaryWidget) && /*#__PURE__*/React__default.createElement(TooltipSwitch, {
-    enabledClientApps: enabledClientApps,
-    selectedWidgets: selectedWidgets,
-    updateSelectedWidgets: updateSelectedWidgets,
-    widget: primaryWidget
-  }), /*#__PURE__*/React__default.createElement(Label, null, "neeto", capitalize(primaryWidget))), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-wrap items-center gap-6 sm:justify-end"
-  }, WIDGET_TYPES_VALUES.map(function (widget, index) {
-    return primaryApp !== widget && /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
+    className: "mb-4 flex w-full flex-wrap items-center justify-between gap-6",
+    children: [/*#__PURE__*/jsxs("div", {
       className: "flex items-center space-x-2",
-      key: index
-    }, /*#__PURE__*/React__default.createElement(TooltipSwitch, {
-      enabledClientApps: enabledClientApps,
-      selectedWidgets: selectedWidgets,
-      updateSelectedWidgets: updateSelectedWidgets,
-      widget: widget
-    }), /*#__PURE__*/React__default.createElement(Label, null, "neeto", capitalize(widget)));
-  })));
+      children: [isNotEmpty(primaryWidget) && /*#__PURE__*/jsx(TooltipSwitch, {
+        enabledClientApps: enabledClientApps,
+        selectedWidgets: selectedWidgets,
+        updateSelectedWidgets: updateSelectedWidgets,
+        widget: primaryWidget
+      }), /*#__PURE__*/jsxs(Label, {
+        children: ["neeto", capitalize(primaryWidget)]
+      })]
+    }), /*#__PURE__*/jsx("div", {
+      className: "flex flex-wrap items-center gap-6 sm:justify-end",
+      children: WIDGET_TYPES_VALUES.map(function (widget, index) {
+        return primaryApp !== widget && /*#__PURE__*/jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsx(TooltipSwitch, {
+            enabledClientApps: enabledClientApps,
+            selectedWidgets: selectedWidgets,
+            updateSelectedWidgets: updateSelectedWidgets,
+            widget: widget
+          }), /*#__PURE__*/jsxs(Label, {
+            children: ["neeto", capitalize(widget)]
+          })]
+        }, index);
+      })
+    })]
+  });
 };
 
+function ownKeys$1(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$1(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EmbedCode = function EmbedCode(_ref) {
   var showSessionContext = _ref.showSessionContext,
     showUserIdentity = _ref.showUserIdentity,
@@ -2570,90 +2604,93 @@ var EmbedCode = function EmbedCode(_ref) {
           subject: t("neetoMolecules.widget.email.fields.subject.values.embedCode", {
             widgetList: getSortedPrefixedWidgets(selectedWidgets)
           }),
-          body: /*#__PURE__*/React__default.createElement("div", {
-            ref: bodyRef
-          }, /*#__PURE__*/React__default.createElement(Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.embedCode.mainText",
-            components: {
-              p: /*#__PURE__*/React__default.createElement(Typography, {
-                className: "mb-2",
-                style: "body2"
-              })
-            },
-            values: {
-              val: getWidgetDescriptions(selectedWidgets)
-            }
-          }), /*#__PURE__*/React__default.createElement(ChatWidgetBody, {
-            widgets: selectedWidgets
-          }), /*#__PURE__*/React__default.createElement(Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.embedCode.supportText",
-            values: {
-              helpEmail: INSTALLATION_HELP_EMAIL
-            },
-            components: {
-              p: /*#__PURE__*/React__default.createElement(Typography, {
-                className: "mb-2",
-                style: "body2"
-              }),
-              mail: /*#__PURE__*/React__default.createElement(Button, {
-                href: "mailto:".concat(INSTALLATION_HELP_EMAIL),
-                rel: "noreferrer",
-                style: "link",
-                target: "_blank"
-              })
-            }
-          }))
+          body: /*#__PURE__*/jsxs("div", {
+            ref: bodyRef,
+            children: [/*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.embedCode.mainText",
+              components: {
+                p: /*#__PURE__*/jsx(Typography, {
+                  className: "mb-2",
+                  style: "body2"
+                })
+              },
+              values: {
+                val: getWidgetDescriptions(selectedWidgets)
+              }
+            }), /*#__PURE__*/jsx(ChatWidgetBody, {
+              widgets: selectedWidgets
+            }), /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.embedCode.supportText",
+              values: {
+                helpEmail: INSTALLATION_HELP_EMAIL
+              },
+              components: {
+                p: /*#__PURE__*/jsx(Typography, {
+                  className: "mb-2",
+                  style: "body2"
+                }),
+                mail: /*#__PURE__*/jsx(Button, {
+                  href: "mailto:".concat(INSTALLATION_HELP_EMAIL),
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })]
+          })
         };
       case EMAIL_TYPES.userIdentity:
         return {
           emailType: EMAIL_TYPES.userIdentity,
           enabledWidgets: enabledWidgets,
           subject: t("neetoMolecules.widget.email.fields.subject.values.userIdentity"),
-          body: /*#__PURE__*/React__default.createElement("div", {
-            ref: bodyRef
-          }, /*#__PURE__*/React__default.createElement(Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.userIdentity",
-            components: {
-              p: /*#__PURE__*/React__default.createElement(Typography, {
-                className: "mb-2",
-                style: "body2"
-              }),
-              configureLink: /*#__PURE__*/React__default.createElement(Button, {
-                rel: "noreferrer",
-                style: "link",
-                target: "_blank",
-                href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
-              })
-            },
-            values: {
-              userIdentityKbUrl: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
-            }
-          }))
+          body: /*#__PURE__*/jsx("div", {
+            ref: bodyRef,
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.userIdentity",
+              components: {
+                p: /*#__PURE__*/jsx(Typography, {
+                  className: "mb-2",
+                  style: "body2"
+                }),
+                configureLink: /*#__PURE__*/jsx(Button, {
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank",
+                  href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
+                })
+              },
+              values: {
+                userIdentityKbUrl: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
+              }
+            })
+          })
         };
       case EMAIL_TYPES.sessionContext:
         return {
           codeString: SAMPLE_CONTEXT_CODE_STRING,
           subject: t("neetoMolecules.widget.email.fields.subject.values.sessionContext"),
-          body: /*#__PURE__*/React__default.createElement("div", {
-            ref: bodyRef
-          }, /*#__PURE__*/React__default.createElement(Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.sessionContext",
-            values: {
-              sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
-            },
-            components: {
-              p: /*#__PURE__*/React__default.createElement(Typography, {
-                className: "mb-2",
-                style: "body2"
-              }),
-              configureLink: /*#__PURE__*/React__default.createElement(Button, {
-                href: NEETO_REPLAY_CONFIGURE_URL,
-                rel: "noreferrer",
-                style: "link",
-                target: "_blank"
-              })
-            }
-          }))
+          body: /*#__PURE__*/jsx("div", {
+            ref: bodyRef,
+            children: /*#__PURE__*/jsx(Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.sessionContext",
+              values: {
+                sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
+              },
+              components: {
+                p: /*#__PURE__*/jsx(Typography, {
+                  className: "mb-2",
+                  style: "body2"
+                }),
+                configureLink: /*#__PURE__*/jsx(Button, {
+                  href: NEETO_REPLAY_CONFIGURE_URL,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })
         };
       case EMAIL_TYPES["null"]:
         return previousEmailType !== EMAIL_TYPES["null"] ? getSnippetProps(previousEmailType) : {};
@@ -2678,18 +2715,18 @@ var EmbedCode = function EmbedCode(_ref) {
     return "neetoMolecules.widget.installation.instructions.placement.selectedWidgets";
   };
   var embedHelpTextTranslationComponents = {
-    fontBold: /*#__PURE__*/React__default.createElement(Typography, {
+    fontBold: /*#__PURE__*/jsx(Typography, {
       component: "span",
       style: "body2",
       weight: "semibold"
     }),
-    widgetNpmLink: /*#__PURE__*/React__default.createElement(Button, {
+    widgetNpmLink: /*#__PURE__*/jsx(Button, {
       href: USE_NEETO_WIDGET_NPM_PAGE_URL,
       rel: "noreferrer",
       style: "link",
       target: "_blank"
     }),
-    Link: /*#__PURE__*/React__default.createElement(Button, {
+    Link: /*#__PURE__*/jsx(Button, {
       href: WIDGET_KB_HELP_URL[primaryApp],
       rel: "noreferrer",
       style: "link",
@@ -2697,111 +2734,127 @@ var EmbedCode = function EmbedCode(_ref) {
     })
   };
   if (isLoadingApiKey || isLoadingConfigurations) {
-    return /*#__PURE__*/React__default.createElement("div", {
-      className: "h-full w-full"
-    }, /*#__PURE__*/React__default.createElement(PageLoader, null));
+    return /*#__PURE__*/jsx("div", {
+      className: "h-full w-full",
+      children: /*#__PURE__*/jsx(PageLoader, {})
+    });
   }
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto mb-10 w-full flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: classnames("mx-auto", maxWidth)
-  }, shouldShowSwitches() && /*#__PURE__*/React__default.createElement(SelectionSwitches, {
-    enabledClientApps: enabledClientApps,
-    primaryApp: primaryApp,
-    selectedWidgets: selectedWidgets,
-    updateSelectedWidgets: updateSelectedWidgets
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-8 w-full flex-grow flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto mb-2 w-full",
-    "data-testid": "embed-code-block"
-  }, /*#__PURE__*/React__default.createElement(CodeBlock, {
-    className: "neeto-ui-rounded-lg",
-    codeString: getEmbedCodeString(),
-    sendViaEmail: function sendViaEmail() {
-      return handleSendViaEmail(EMAIL_TYPES.embedCode);
-    },
-    title: /*#__PURE__*/React__default.createElement("div", null, t("neetoMolecules.widget.title.embedCode"))
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default.createElement(Trans, {
-    components: embedHelpTextTranslationComponents,
-    i18nKey: getSelectedWidgetsInstructionsKey(),
-    values: {
-      widgetList: getSortedPrefixedWidgets(selectedWidgets)
-    }
-  }))), shouldShowUserIdentity ? /*#__PURE__*/React__default.createElement("div", {
-    className: "mb-8 w-full flex-grow flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto mb-2 w-full"
-  }, /*#__PURE__*/React__default.createElement(CodeBlock, {
-    className: "neeto-ui-rounded-lg",
-    frameworkProps: {
-      selectedFramework: selectedFramework,
-      setSelectedFramework: setSelectedFramework
-    },
-    title: t("neetoMolecules.widget.title.userIdentity"),
-    codeString: getSampleUserIdentity(enabledWidgets, selectedFramework.value),
-    sendViaEmail: function sendViaEmail() {
-      return handleSendViaEmail(EMAIL_TYPES.userIdentity);
-    }
-  })), /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.widget.installation.instructions.userIdentity",
-    components: {
-      p: /*#__PURE__*/React__default.createElement(Typography, {
-        style: "body2"
-      }),
-      Link: /*#__PURE__*/React__default.createElement(Button, {
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank",
-        href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
-      })
-    }
-  })) : null, shouldShowSessionContext ? /*#__PURE__*/React__default.createElement("div", {
-    className: "w-full flex-grow flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "mx-auto mb-2 w-full"
-  }, /*#__PURE__*/React__default.createElement(CodeBlock, {
-    className: "neeto-ui-rounded-lg",
-    codeString: SAMPLE_CONTEXT_CODE_STRING,
-    title: t("neetoMolecules.widget.title.sessionContext"),
-    sendViaEmail: function sendViaEmail() {
-      return handleSendViaEmail(EMAIL_TYPES.sessionContext);
-    }
-  })), /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.widget.installation.instructions.sessionContext",
-    components: {
-      p: /*#__PURE__*/React__default.createElement(Typography, {
-        style: "body2"
-      }),
-      Link: /*#__PURE__*/React__default.createElement(Button, {
-        href: NEETO_REPLAY_CONFIGURE_URL,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  })) : null), /*#__PURE__*/React__default.createElement(CodeSnippet, _extends({
-    isPaneOpen: !!emailType && isNotEmpty(selectedWidgets),
-    onClose: function onClose() {
-      return setEmailType(EMAIL_TYPES["null"]);
-    }
-  }, getSnippetProps(emailType))));
+  return /*#__PURE__*/jsxs("div", {
+    className: "mx-auto mb-10 w-full flex-col items-center justify-start",
+    children: [/*#__PURE__*/jsxs("div", {
+      className: classnames("mx-auto", maxWidth),
+      children: [shouldShowSwitches() && /*#__PURE__*/jsx(SelectionSwitches, {
+        enabledClientApps: enabledClientApps,
+        primaryApp: primaryApp,
+        selectedWidgets: selectedWidgets,
+        updateSelectedWidgets: updateSelectedWidgets
+      }), /*#__PURE__*/jsxs("div", {
+        className: "mb-8 w-full flex-grow flex-col items-center justify-start",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "mx-auto mb-2 w-full",
+          "data-testid": "embed-code-block",
+          children: /*#__PURE__*/jsx(CodeBlock, {
+            className: "neeto-ui-rounded-lg",
+            codeString: getEmbedCodeString(),
+            sendViaEmail: function sendViaEmail() {
+              return handleSendViaEmail(EMAIL_TYPES.embedCode);
+            },
+            title: /*#__PURE__*/jsx("div", {
+              children: t("neetoMolecules.widget.title.embedCode")
+            })
+          })
+        }), /*#__PURE__*/jsx("div", {
+          className: "w-full",
+          children: /*#__PURE__*/jsx(Trans, {
+            components: embedHelpTextTranslationComponents,
+            i18nKey: getSelectedWidgetsInstructionsKey(),
+            values: {
+              widgetList: getSortedPrefixedWidgets(selectedWidgets)
+            }
+          })
+        })]
+      }), shouldShowUserIdentity ? /*#__PURE__*/jsxs("div", {
+        className: "mb-8 w-full flex-grow flex-col items-center justify-start",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "mx-auto mb-2 w-full",
+          children: /*#__PURE__*/jsx(CodeBlock, {
+            className: "neeto-ui-rounded-lg",
+            frameworkProps: {
+              selectedFramework: selectedFramework,
+              setSelectedFramework: setSelectedFramework
+            },
+            title: t("neetoMolecules.widget.title.userIdentity"),
+            codeString: getSampleUserIdentity(enabledWidgets, selectedFramework.value),
+            sendViaEmail: function sendViaEmail() {
+              return handleSendViaEmail(EMAIL_TYPES.userIdentity);
+            }
+          })
+        }), /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoMolecules.widget.installation.instructions.userIdentity",
+          components: {
+            p: /*#__PURE__*/jsx(Typography, {
+              style: "body2"
+            }),
+            Link: /*#__PURE__*/jsx(Button, {
+              rel: "noreferrer",
+              style: "link",
+              target: "_blank",
+              href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
+            })
+          }
+        })]
+      }) : null, shouldShowSessionContext ? /*#__PURE__*/jsxs("div", {
+        className: "w-full flex-grow flex-col items-center justify-start",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "mx-auto mb-2 w-full",
+          children: /*#__PURE__*/jsx(CodeBlock, {
+            className: "neeto-ui-rounded-lg",
+            codeString: SAMPLE_CONTEXT_CODE_STRING,
+            title: t("neetoMolecules.widget.title.sessionContext"),
+            sendViaEmail: function sendViaEmail() {
+              return handleSendViaEmail(EMAIL_TYPES.sessionContext);
+            }
+          })
+        }), /*#__PURE__*/jsx(Trans, {
+          i18nKey: "neetoMolecules.widget.installation.instructions.sessionContext",
+          components: {
+            p: /*#__PURE__*/jsx(Typography, {
+              style: "body2"
+            }),
+            Link: /*#__PURE__*/jsx(Button, {
+              href: NEETO_REPLAY_CONFIGURE_URL,
+              rel: "noreferrer",
+              style: "link",
+              target: "_blank"
+            })
+          }
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsx(CodeSnippet, _objectSpread$1({
+      isPaneOpen: !!emailType && isNotEmpty(selectedWidgets),
+      onClose: function onClose() {
+        return setEmailType(EMAIL_TYPES["null"]);
+      }
+    }, getSnippetProps(emailType)))]
+  });
 };
-var EmbedCode$1 = /*#__PURE__*/React__default.memo(EmbedCode);
+var EmbedCode$1 = /*#__PURE__*/memo(EmbedCode);
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var queryClient = new QueryClient();
 var Main = function Main(props) {
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var shouldRenderEmbedCode = window.globalProps.ssoEnabled;
-  return shouldRenderEmbedCode ? /*#__PURE__*/React__default.createElement(QueryClientProvider, {
-    client: queryClient
-  }, /*#__PURE__*/React__default.createElement(EmbedCode$1, props)) : /*#__PURE__*/React__default.createElement(Callout, {
+  return shouldRenderEmbedCode ? /*#__PURE__*/jsx(QueryClientProvider, {
+    client: queryClient,
+    children: /*#__PURE__*/jsx(EmbedCode$1, _objectSpread({}, props))
+  }) : /*#__PURE__*/jsx(Callout, {
     icon: Info,
-    style: "info"
-  }, t("neetoMolecules.widget.developmentInfo"));
+    style: "info",
+    children: t("neetoMolecules.widget.developmentInfo")
+  });
 };
 
 var NeetoWidget = {