@bigbinary/neeto-molecules 3.3.11 → 3.3.13

package/dist/cjs/NeetoWidget.js

@@ -3,13 +3,12 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var i18next = require('i18next');
 var ramda = require('ramda');
-var React = require('react');
 var reactQuery = require('@tanstack/react-query');
 var Info = require('@bigbinary/neeto-icons/Info');
 var Callout = require('@bigbinary/neetoui/Callout');
 var reactI18next = require('react-i18next');
-var _extends = require('@babel/runtime/helpers/extends');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var React = require('react');
 var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
 var usePrevious = require('@bigbinary/neeto-commons-frontend/react-utils/usePrevious');
@@ -17,6 +16,7 @@ var Button = require('@bigbinary/neetoui/Button');
 var Toastr = require('@bigbinary/neetoui/Toastr');
 var Typography = require('@bigbinary/neetoui/Typography');
 var PageLoader = require('./PageLoader.js');
+var jsxRuntime = require('react/jsx-runtime');
 var Select = require('@bigbinary/neetoui/Select');
 var CopyToClipboardButton = require('./CopyToClipboardButton.js');
 var _commonjsHelpers = require('./_commonjsHelpers-68cdf74f.js');
@@ -59,10 +59,8 @@ function _interopNamespace(e) {
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var Info__default = /*#__PURE__*/_interopDefaultLegacy(Info);
 var Callout__default = /*#__PURE__*/_interopDefaultLegacy(Callout);
-var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var usePrevious__default = /*#__PURE__*/_interopDefaultLegacy(usePrevious);
@@ -154,58 +152,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["default"].createElement(React__default["default"].Fragment, null, widgets.includes(WIDGET_TYPES.changelog) && /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.changelogHelp",
-    values: {
-      helpLink: WIDGET_HELP_LINKS.changelog
-    },
-    components: {
-      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-        className: "mb-2",
-        style: "body2"
-      }),
-      a: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-        href: WIDGET_HELP_LINKS.changelog,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  }), widgets.includes(WIDGET_TYPES.chat) && /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.chatHelp",
-    values: {
-      helpLink: WIDGET_HELP_LINKS.chat
-    },
-    components: {
-      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-        className: "mb-2",
-        style: "body2"
-      }),
-      a: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-        href: WIDGET_HELP_LINKS.chat,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  }), widgets.includes(WIDGET_TYPES.replay) && /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoMolecules.widget.email.body.values.embedCode.replayHelp",
-    values: {
-      helpLink: WIDGET_HELP_LINKS.replay
-    },
-    components: {
-      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-        className: "mb-2",
-        style: "body2"
-      }),
-      a: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-        href: WIDGET_HELP_LINKS.replay,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  }));
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [widgets.includes(WIDGET_TYPES.changelog) && /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoMolecules.widget.email.body.values.embedCode.changelogHelp",
+      values: {
+        helpLink: WIDGET_HELP_LINKS.changelog
+      },
+      components: {
+        p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "mb-2",
+          style: "body2"
+        }),
+        a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          href: WIDGET_HELP_LINKS.changelog,
+          rel: "noreferrer",
+          style: "link",
+          target: "_blank"
+        })
+      }
+    }), widgets.includes(WIDGET_TYPES.chat) && /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoMolecules.widget.email.body.values.embedCode.chatHelp",
+      values: {
+        helpLink: WIDGET_HELP_LINKS.chat
+      },
+      components: {
+        p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "mb-2",
+          style: "body2"
+        }),
+        a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          href: WIDGET_HELP_LINKS.chat,
+          rel: "noreferrer",
+          style: "link",
+          target: "_blank"
+        })
+      }
+    }), widgets.includes(WIDGET_TYPES.replay) && /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+      i18nKey: "neetoMolecules.widget.email.body.values.embedCode.replayHelp",
+      values: {
+        helpLink: WIDGET_HELP_LINKS.replay
+      },
+      components: {
+        p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+          className: "mb-2",
+          style: "body2"
+        }),
+        a: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          href: WIDGET_HELP_LINKS.replay,
+          rel: "noreferrer",
+          style: "link",
+          target: "_blank"
+        })
+      }
+    })]
+  });
 };
 
 var prism = {exports: {}};
@@ -2170,19 +2170,23 @@ var SyntaxHighlighter = function SyntaxHighlighter(_ref) {
   React.useEffect(function () {
     Prism.highlightAll();
   }, [code]);
-  return /*#__PURE__*/React__default["default"].createElement("pre", {
-    className: className
-  }, /*#__PURE__*/React__default["default"].createElement("code", {
-    className: "language-".concat(language)
-  }, code));
+  return /*#__PURE__*/jsxRuntime.jsx("pre", {
+    className: className,
+    children: /*#__PURE__*/jsxRuntime.jsx("code", {
+      className: "language-".concat(language),
+      children: code
+    })
+  });
 };
-var SyntaxHighlighter$1 = /*#__PURE__*/React__default["default"].memo(SyntaxHighlighter);
+var SyntaxHighlighter$1 = /*#__PURE__*/React.memo(SyntaxHighlighter);
 
 var CodeBlock = function CodeBlock(_ref) {
   var _ref$title = _ref.title,
-    title = _ref$title === void 0 ? /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-      i18nKey: "neetoMolecules.codeblock.codeSnippet"
-    })) : _ref$title,
+    title = _ref$title === void 0 ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+        i18nKey: "neetoMolecules.codeblock.codeSnippet"
+      })
+    }) : _ref$title,
     codeString = _ref.codeString,
     _ref$showCopyButton = _ref.showCopyButton,
     showCopyButton = _ref$showCopyButton === void 0 ? true : _ref$showCopyButton,
@@ -2197,35 +2201,39 @@ var CodeBlock = function CodeBlock(_ref) {
   var _ref2 = frameworkProps !== null && frameworkProps !== void 0 ? frameworkProps : {},
     selectedFramework = _ref2.selectedFramework,
     setSelectedFramework = _ref2.setSelectedFramework;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](["relative", className])
-  }, /*#__PURE__*/React__default["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["default"].createElement(Typography__default["default"], {
-    className: "m-0 flex-shrink-0",
-    "data-cy": "code-block-title-text",
-    style: "h4"
-  }, title), selectedFramework && /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
-    className: "w-40",
-    "data-testid": "framework-select",
-    options: FRAMEWORK_SELECT_OPTIONS,
-    value: selectedFramework,
-    onChange: setSelectedFramework
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "ml-auto flex flex-shrink-0 items-center justify-end gap-2"
-  }, sendViaEmail ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    style: "text",
-    label: t("neetoMolecules.widget.installation.snippet.sendViaEmail"),
-    onClick: sendViaEmail
-  }) : null, showCopyButton && /*#__PURE__*/React__default["default"].createElement(CopyToClipboardButton, {
-    label: t("neetoMolecules.widget.installation.snippet.copy"),
-    style: "primary",
-    value: codeString
-  }))), /*#__PURE__*/React__default["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__*/jsxRuntime.jsxs("div", {
+    className: classnames__default["default"](["relative", className]),
+    children: [/*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(Typography__default["default"], {
+        className: "m-0 flex-shrink-0",
+        "data-cy": "code-block-title-text",
+        style: "h4",
+        children: title
+      }), selectedFramework && /*#__PURE__*/jsxRuntime.jsx(Select__default["default"], {
+        className: "w-40",
+        "data-testid": "framework-select",
+        options: FRAMEWORK_SELECT_OPTIONS,
+        value: selectedFramework,
+        onChange: setSelectedFramework
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "ml-auto flex flex-shrink-0 items-center justify-end gap-2",
+        children: [sendViaEmail ? /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+          style: "text",
+          label: t("neetoMolecules.widget.installation.snippet.sendViaEmail"),
+          onClick: sendViaEmail
+        }) : null, showCopyButton && /*#__PURE__*/jsxRuntime.jsx(CopyToClipboardButton, {
+          label: t("neetoMolecules.widget.installation.snippet.copy"),
+          style: "primary",
+          value: codeString
+        })]
+      })]
+    }), /*#__PURE__*/jsxRuntime.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() {
@@ -2352,6 +2360,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__default["default"](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,
@@ -2404,41 +2414,53 @@ var CodeSnippet = function CodeSnippet(_ref) {
     }
     return props;
   };
-  return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
+  return /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"], {
     onClose: onClose,
-    isOpen: isPaneOpen
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Formik, {
-    initialValues: getEmailWidgetSnippetFormInitialValues(subject),
-    validationSchema: getEmailWidgetSnippetValidationSchema(),
-    onSubmit: handleSubmit
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Form, null, /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    style: "h2"
-  }, t("neetoMolecules.widget.email.title"))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full space-y-4"
-  }, /*#__PURE__*/React__default["default"].createElement(MultiEmailInput__default["default"], {
-    required: true,
-    label: t("neetoMolecules.widget.email.fields.emails.label"),
-    name: "emails",
-    placeholder: t("neetoMolecules.widget.email.fields.emails.placeholder")
-  }), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
-    required: true,
-    label: t("neetoMolecules.widget.email.fields.subject.label"),
-    name: "subject",
-    type: "text"
-  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    style: "body2"
-  }, body), /*#__PURE__*/React__default["default"].createElement(CodeBlock, renderCodeBlockProps()))), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Footer, {
-    className: "gap-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    disabled: emailMutation.isPending,
-    label: t("neetoMolecules.widget.email.actions.send"),
-    loading: emailMutation.isPending,
-    type: "submit"
-  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-    label: t("neetoMolecules.widget.email.actions.cancel"),
-    style: "text",
-    onClick: onClose
-  })))));
+    isOpen: isPaneOpen,
+    children: /*#__PURE__*/jsxRuntime.jsx(formik.Formik, {
+      initialValues: getEmailWidgetSnippetFormInitialValues(subject),
+      validationSchema: getEmailWidgetSnippetValidationSchema(),
+      onSubmit: handleSubmit,
+      children: /*#__PURE__*/jsxRuntime.jsxs(formik.Form, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Header, {
+          children: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+            style: "h2",
+            children: t("neetoMolecules.widget.email.title")
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Pane__default["default"].Body, {
+          children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            className: "w-full space-y-4",
+            children: [/*#__PURE__*/jsxRuntime.jsx(MultiEmailInput__default["default"], {
+              required: true,
+              label: t("neetoMolecules.widget.email.fields.emails.label"),
+              name: "emails",
+              placeholder: t("neetoMolecules.widget.email.fields.emails.placeholder")
+            }), /*#__PURE__*/jsxRuntime.jsx(Input__default["default"], {
+              required: true,
+              label: t("neetoMolecules.widget.email.fields.subject.label"),
+              name: "subject",
+              type: "text"
+            }), /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2",
+              children: body
+            }), /*#__PURE__*/jsxRuntime.jsx(CodeBlock, _objectSpread$3({}, renderCodeBlockProps()))]
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(Pane__default["default"].Footer, {
+          className: "gap-x-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            disabled: emailMutation.isPending,
+            label: t("neetoMolecules.widget.email.actions.send"),
+            loading: emailMutation.isPending,
+            type: "submit"
+          }), /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+            label: t("neetoMolecules.widget.email.actions.cancel"),
+            style: "text",
+            onClick: onClose
+          })]
+        })]
+      })
+    })
+  });
 };
 
 var useForceUpdate = function useForceUpdate() {
@@ -2453,8 +2475,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__default["default"](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__default["default"](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 reactQuery.useQuery({
     queryKey: [QUERY_KEYS.apiKey],
@@ -2478,7 +2500,7 @@ var useFetchConfigurations = function useFetchConfigurations() {
 };
 var useUpdateConfigurations = function useUpdateConfigurations() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return useMutationWithInvalidation__default["default"](updateWidgetConfiguration, _objectSpread({
+  return useMutationWithInvalidation__default["default"](updateWidgetConfiguration, _objectSpread$2({
     keysToInvalidate: [[QUERY_KEYS.configuration]]
   }, options));
 };
@@ -2489,19 +2511,20 @@ var TooltipSwitch = withT__default["default"](function (_ref) {
     widget = _ref.widget,
     selectedWidgets = _ref.selectedWidgets,
     updateSelectedWidgets = _ref.updateSelectedWidgets;
-  return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
+  return /*#__PURE__*/jsxRuntime.jsx(Tooltip__default["default"], {
     disabled: enabledClientApps.includes(widget),
     placement: "right",
     content: t("neetoMolecules.widget.tooltips.productIsDisabled", {
       productName: "neeto".concat(neetoCist.capitalize(widget))
+    }),
+    children: /*#__PURE__*/jsxRuntime.jsx(Switch__default["default"], {
+      checked: selectedWidgets.includes(widget),
+      disabled: !enabledClientApps.includes(widget),
+      onChange: function onChange() {
+        return updateSelectedWidgets(widget);
+      }
     })
-  }, /*#__PURE__*/React__default["default"].createElement(Switch__default["default"], {
-    checked: selectedWidgets.includes(widget),
-    disabled: !enabledClientApps.includes(widget),
-    onChange: function onChange() {
-      return updateSelectedWidgets(widget);
-    }
-  }));
+  });
 });
 
 var SelectionSwitches = function SelectionSwitches(_ref) {
@@ -2510,30 +2533,39 @@ var SelectionSwitches = function SelectionSwitches(_ref) {
     primaryApp = _ref.primaryApp,
     enabledClientApps = _ref.enabledClientApps;
   var primaryWidget = WIDGET_TYPES_VALUES.includes(primaryApp) ? primaryApp : "";
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mb-4 flex w-full flex-wrap items-center justify-between gap-6"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex items-center space-x-2"
-  }, neetoCist.isNotEmpty(primaryWidget) && /*#__PURE__*/React__default["default"].createElement(TooltipSwitch, {
-    enabledClientApps: enabledClientApps,
-    selectedWidgets: selectedWidgets,
-    updateSelectedWidgets: updateSelectedWidgets,
-    widget: primaryWidget
-  }), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, "neeto", neetoCist.capitalize(primaryWidget))), /*#__PURE__*/React__default["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["default"].createElement("div", {
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "mb-4 flex w-full flex-wrap items-center justify-between gap-6",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex items-center space-x-2",
-      key: index
-    }, /*#__PURE__*/React__default["default"].createElement(TooltipSwitch, {
-      enabledClientApps: enabledClientApps,
-      selectedWidgets: selectedWidgets,
-      updateSelectedWidgets: updateSelectedWidgets,
-      widget: widget
-    }), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, "neeto", neetoCist.capitalize(widget)));
-  })));
+      children: [neetoCist.isNotEmpty(primaryWidget) && /*#__PURE__*/jsxRuntime.jsx(TooltipSwitch, {
+        enabledClientApps: enabledClientApps,
+        selectedWidgets: selectedWidgets,
+        updateSelectedWidgets: updateSelectedWidgets,
+        widget: primaryWidget
+      }), /*#__PURE__*/jsxRuntime.jsxs(Label__default["default"], {
+        children: ["neeto", neetoCist.capitalize(primaryWidget)]
+      })]
+    }), /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsxs("div", {
+          className: "flex items-center space-x-2",
+          children: [/*#__PURE__*/jsxRuntime.jsx(TooltipSwitch, {
+            enabledClientApps: enabledClientApps,
+            selectedWidgets: selectedWidgets,
+            updateSelectedWidgets: updateSelectedWidgets,
+            widget: widget
+          }), /*#__PURE__*/jsxRuntime.jsxs(Label__default["default"], {
+            children: ["neeto", neetoCist.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__default["default"](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,
@@ -2616,90 +2648,93 @@ var EmbedCode = function EmbedCode(_ref) {
           subject: t("neetoMolecules.widget.email.fields.subject.values.embedCode", {
             widgetList: getSortedPrefixedWidgets(selectedWidgets)
           }),
-          body: /*#__PURE__*/React__default["default"].createElement("div", {
-            ref: bodyRef
-          }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.embedCode.mainText",
-            components: {
-              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-                className: "mb-2",
-                style: "body2"
-              })
-            },
-            values: {
-              val: getWidgetDescriptions(selectedWidgets)
-            }
-          }), /*#__PURE__*/React__default["default"].createElement(ChatWidgetBody, {
-            widgets: selectedWidgets
-          }), /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.embedCode.supportText",
-            values: {
-              helpEmail: INSTALLATION_HELP_EMAIL
-            },
-            components: {
-              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-                className: "mb-2",
-                style: "body2"
-              }),
-              mail: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-                href: "mailto:".concat(INSTALLATION_HELP_EMAIL),
-                rel: "noreferrer",
-                style: "link",
-                target: "_blank"
-              })
-            }
-          }))
+          body: /*#__PURE__*/jsxRuntime.jsxs("div", {
+            ref: bodyRef,
+            children: [/*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.embedCode.mainText",
+              components: {
+                p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                  className: "mb-2",
+                  style: "body2"
+                })
+              },
+              values: {
+                val: getWidgetDescriptions(selectedWidgets)
+              }
+            }), /*#__PURE__*/jsxRuntime.jsx(ChatWidgetBody, {
+              widgets: selectedWidgets
+            }), /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.embedCode.supportText",
+              values: {
+                helpEmail: INSTALLATION_HELP_EMAIL
+              },
+              components: {
+                p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                  className: "mb-2",
+                  style: "body2"
+                }),
+                mail: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  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["default"].createElement("div", {
-            ref: bodyRef
-          }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.userIdentity",
-            components: {
-              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-                className: "mb-2",
-                style: "body2"
-              }),
-              configureLink: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-                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__*/jsxRuntime.jsx("div", {
+            ref: bodyRef,
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.userIdentity",
+              components: {
+                p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                  className: "mb-2",
+                  style: "body2"
+                }),
+                configureLink: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  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["default"].createElement("div", {
-            ref: bodyRef
-          }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-            i18nKey: "neetoMolecules.widget.email.body.values.sessionContext",
-            values: {
-              sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
-            },
-            components: {
-              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-                className: "mb-2",
-                style: "body2"
-              }),
-              configureLink: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-                href: NEETO_REPLAY_CONFIGURE_URL,
-                rel: "noreferrer",
-                style: "link",
-                target: "_blank"
-              })
-            }
-          }))
+          body: /*#__PURE__*/jsxRuntime.jsx("div", {
+            ref: bodyRef,
+            children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+              i18nKey: "neetoMolecules.widget.email.body.values.sessionContext",
+              values: {
+                sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
+              },
+              components: {
+                p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+                  className: "mb-2",
+                  style: "body2"
+                }),
+                configureLink: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+                  href: NEETO_REPLAY_CONFIGURE_URL,
+                  rel: "noreferrer",
+                  style: "link",
+                  target: "_blank"
+                })
+              }
+            })
+          })
         };
       case EMAIL_TYPES["null"]:
         return previousEmailType !== EMAIL_TYPES["null"] ? getSnippetProps(previousEmailType) : {};
@@ -2724,18 +2759,18 @@ var EmbedCode = function EmbedCode(_ref) {
     return "neetoMolecules.widget.installation.instructions.placement.selectedWidgets";
   };
   var embedHelpTextTranslationComponents = {
-    fontBold: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+    fontBold: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
       component: "span",
       style: "body2",
       weight: "semibold"
     }),
-    widgetNpmLink: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    widgetNpmLink: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       href: USE_NEETO_WIDGET_NPM_PAGE_URL,
       rel: "noreferrer",
       style: "link",
       target: "_blank"
     }),
-    Link: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
       href: WIDGET_KB_HELP_URL[primaryApp],
       rel: "noreferrer",
       style: "link",
@@ -2743,111 +2778,127 @@ var EmbedCode = function EmbedCode(_ref) {
     })
   };
   if (isLoadingApiKey || isLoadingConfigurations) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "h-full w-full"
-    }, /*#__PURE__*/React__default["default"].createElement(PageLoader, null));
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "h-full w-full",
+      children: /*#__PURE__*/jsxRuntime.jsx(PageLoader, {})
+    });
   }
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto mb-10 w-full flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"]("mx-auto", maxWidth)
-  }, shouldShowSwitches() && /*#__PURE__*/React__default["default"].createElement(SelectionSwitches, {
-    enabledClientApps: enabledClientApps,
-    primaryApp: primaryApp,
-    selectedWidgets: selectedWidgets,
-    updateSelectedWidgets: updateSelectedWidgets
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mb-8 w-full flex-grow flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto mb-2 w-full",
-    "data-testid": "embed-code-block"
-  }, /*#__PURE__*/React__default["default"].createElement(CodeBlock, {
-    className: "neeto-ui-rounded-lg",
-    codeString: getEmbedCodeString(),
-    sendViaEmail: function sendViaEmail() {
-      return handleSendViaEmail(EMAIL_TYPES.embedCode);
-    },
-    title: /*#__PURE__*/React__default["default"].createElement("div", null, t("neetoMolecules.widget.title.embedCode"))
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full"
-  }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    components: embedHelpTextTranslationComponents,
-    i18nKey: getSelectedWidgetsInstructionsKey(),
-    values: {
-      widgetList: getSortedPrefixedWidgets(selectedWidgets)
-    }
-  }))), shouldShowUserIdentity ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mb-8 w-full flex-grow flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto mb-2 w-full"
-  }, /*#__PURE__*/React__default["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["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoMolecules.widget.installation.instructions.userIdentity",
-    components: {
-      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-        style: "body2"
-      }),
-      Link: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank",
-        href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
-      })
-    }
-  })) : null, shouldShowSessionContext ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full flex-grow flex-col items-center justify-start"
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto mb-2 w-full"
-  }, /*#__PURE__*/React__default["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["default"].createElement(reactI18next.Trans, {
-    i18nKey: "neetoMolecules.widget.installation.instructions.sessionContext",
-    components: {
-      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-        style: "body2"
-      }),
-      Link: /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
-        href: NEETO_REPLAY_CONFIGURE_URL,
-        rel: "noreferrer",
-        style: "link",
-        target: "_blank"
-      })
-    }
-  })) : null), /*#__PURE__*/React__default["default"].createElement(CodeSnippet, _extends__default["default"]({
-    isPaneOpen: !!emailType && neetoCist.isNotEmpty(selectedWidgets),
-    onClose: function onClose() {
-      return setEmailType(EMAIL_TYPES["null"]);
-    }
-  }, getSnippetProps(emailType))));
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: "mx-auto mb-10 w-full flex-col items-center justify-start",
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default["default"]("mx-auto", maxWidth),
+      children: [shouldShowSwitches() && /*#__PURE__*/jsxRuntime.jsx(SelectionSwitches, {
+        enabledClientApps: enabledClientApps,
+        primaryApp: primaryApp,
+        selectedWidgets: selectedWidgets,
+        updateSelectedWidgets: updateSelectedWidgets
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mb-8 w-full flex-grow flex-col items-center justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "mx-auto mb-2 w-full",
+          "data-testid": "embed-code-block",
+          children: /*#__PURE__*/jsxRuntime.jsx(CodeBlock, {
+            className: "neeto-ui-rounded-lg",
+            codeString: getEmbedCodeString(),
+            sendViaEmail: function sendViaEmail() {
+              return handleSendViaEmail(EMAIL_TYPES.embedCode);
+            },
+            title: /*#__PURE__*/jsxRuntime.jsx("div", {
+              children: t("neetoMolecules.widget.title.embedCode")
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "w-full",
+          children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
+            components: embedHelpTextTranslationComponents,
+            i18nKey: getSelectedWidgetsInstructionsKey(),
+            values: {
+              widgetList: getSortedPrefixedWidgets(selectedWidgets)
+            }
+          })
+        })]
+      }), shouldShowUserIdentity ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "mb-8 w-full flex-grow flex-col items-center justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "mx-auto mb-2 w-full",
+          children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoMolecules.widget.installation.instructions.userIdentity",
+          components: {
+            p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2"
+            }),
+            Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              rel: "noreferrer",
+              style: "link",
+              target: "_blank",
+              href: enabledWidgets.chat ? NEETO_CHAT_USER_IDENTITY_URL : NEETO_REPLAY_CONFIGURE_URL
+            })
+          }
+        })]
+      }) : null, shouldShowSessionContext ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "w-full flex-grow flex-col items-center justify-start",
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "mx-auto mb-2 w-full",
+          children: /*#__PURE__*/jsxRuntime.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__*/jsxRuntime.jsx(reactI18next.Trans, {
+          i18nKey: "neetoMolecules.widget.installation.instructions.sessionContext",
+          components: {
+            p: /*#__PURE__*/jsxRuntime.jsx(Typography__default["default"], {
+              style: "body2"
+            }),
+            Link: /*#__PURE__*/jsxRuntime.jsx(Button__default["default"], {
+              href: NEETO_REPLAY_CONFIGURE_URL,
+              rel: "noreferrer",
+              style: "link",
+              target: "_blank"
+            })
+          }
+        })]
+      }) : null]
+    }), /*#__PURE__*/jsxRuntime.jsx(CodeSnippet, _objectSpread$1({
+      isPaneOpen: !!emailType && neetoCist.isNotEmpty(selectedWidgets),
+      onClose: function onClose() {
+        return setEmailType(EMAIL_TYPES["null"]);
+      }
+    }, getSnippetProps(emailType)))]
+  });
 };
-var EmbedCode$1 = /*#__PURE__*/React__default["default"].memo(EmbedCode);
+var EmbedCode$1 = /*#__PURE__*/React.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__default["default"](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 reactQuery.QueryClient();
 var Main = function Main(props) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var shouldRenderEmbedCode = window.globalProps.ssoEnabled;
-  return shouldRenderEmbedCode ? /*#__PURE__*/React__default["default"].createElement(reactQuery.QueryClientProvider, {
-    client: queryClient
-  }, /*#__PURE__*/React__default["default"].createElement(EmbedCode$1, props)) : /*#__PURE__*/React__default["default"].createElement(Callout__default["default"], {
+  return shouldRenderEmbedCode ? /*#__PURE__*/jsxRuntime.jsx(reactQuery.QueryClientProvider, {
+    client: queryClient,
+    children: /*#__PURE__*/jsxRuntime.jsx(EmbedCode$1, _objectSpread({}, props))
+  }) : /*#__PURE__*/jsxRuntime.jsx(Callout__default["default"], {
     icon: Info__default["default"],
-    style: "info"
-  }, t("neetoMolecules.widget.developmentInfo"));
+    style: "info",
+    children: t("neetoMolecules.widget.developmentInfo")
+  });
 };
 
 var NeetoWidget = {