@bigbinary/neeto-molecules 3.3.10 → 3.3.12

package/dist/EmailPreview.js

@@ -1,4 +1,4 @@
-import React__default from 'react';
+import { memo } from 'react';
 import classnames from 'classnames';
 import { isPresent } from '@bigbinary/neeto-cist';
 import withT from '@bigbinary/neeto-commons-frontend/react-utils/withT';
@@ -6,8 +6,9 @@ import EditorContent from '@bigbinary/neeto-editor/EditorContent';
 import Typography from '@bigbinary/neetoui/Typography';
 import Button from '@bigbinary/neetoui/Button';
 import { p as propTypes } from './index-e5588516.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var MemoizedEditorContent = /*#__PURE__*/React__default.memo(EditorContent);
+var MemoizedEditorContent = /*#__PURE__*/memo(EditorContent);
 var EmailPreview = withT(function (_ref) {
   var t = _ref.t,
     _ref$to = _ref.to,
@@ -20,74 +21,88 @@ var EmailPreview = withT(function (_ref) {
     _ref$className = _ref.className,
     className = _ref$className === void 0 ? "" : _ref$className,
     customContent = _ref.customContent;
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsxs("div", {
     "data-cy": "email-preview-card",
     "data-testid": "email-preview",
-    className: classnames("neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border", className)
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex gap-2",
-    "data-cy": "email-send-to-preview",
-    "data-testid": "email-to-block"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.to"), ":"), isPresent(to) ? /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    lineHeight: "normal",
-    style: "body2"
-  }, to.join(", ")) : /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
-  })), from && /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-2 pt-3"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.from"), ":"), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    "data-cy": "email-send-from-preview",
-    lineHeight: "normal",
-    style: "body2"
-  }, from)), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex items-center gap-2 pt-3"
-  }, /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-500",
-    lineHeight: "normal",
-    style: "body2"
-  }, t("neetoMolecules.emailPreview.subject"), ":"), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
-    "data-cy": "email-subject-preview",
-    lineHeight: "normal",
-    style: "body2"
-  }, subject || /*#__PURE__*/React__default.createElement("span", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
-  })))), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
-    "data-cy": "email-body-preview-container"
-  }, body ? /*#__PURE__*/React__default.createElement(MemoizedEditorContent, {
-    content: body
-  }) : /*#__PURE__*/React__default.createElement("div", {
-    className: "space-y-4"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
-  })), customContent && customContent, actionButtonText && /*#__PURE__*/React__default.createElement("div", {
-    className: "mt-6 flex w-full items-center justify-center"
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    className: "pointer-events-none",
-    label: actionButtonText
-  })), logo && /*#__PURE__*/React__default.createElement("img", {
-    alt: t("neetoMolecules.emailPreview.logoAltText"),
-    className: "h-20 w-36 object-cover",
-    "data-cy": "company-logo-preview",
-    src: logo
-  })));
+    className: classnames("neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border", className),
+    children: [/*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6",
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "flex gap-2",
+        "data-cy": "email-send-to-preview",
+        "data-testid": "email-to-block",
+        children: [/*#__PURE__*/jsxs(Typography, {
+          className: "neeto-ui-text-gray-500",
+          lineHeight: "normal",
+          style: "body2",
+          children: [t("neetoMolecules.emailPreview.to"), ":"]
+        }), isPresent(to) ? /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+          lineHeight: "normal",
+          style: "body2",
+          children: to.join(", ")
+        }) : /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40"
+        })]
+      }), from && /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2 pt-3",
+        children: [/*#__PURE__*/jsxs(Typography, {
+          className: "neeto-ui-text-gray-500",
+          lineHeight: "normal",
+          style: "body2",
+          children: [t("neetoMolecules.emailPreview.from"), ":"]
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+          "data-cy": "email-send-from-preview",
+          lineHeight: "normal",
+          style: "body2",
+          children: from
+        })]
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex items-center gap-2 pt-3",
+        children: [/*#__PURE__*/jsxs(Typography, {
+          className: "neeto-ui-text-gray-500",
+          lineHeight: "normal",
+          style: "body2",
+          children: [t("neetoMolecules.emailPreview.subject"), ":"]
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "neeto-ui-text-gray-800 min-w-0 flex-grow break-words",
+          "data-cy": "email-subject-preview",
+          lineHeight: "normal",
+          style: "body2",
+          children: subject || /*#__PURE__*/jsx("span", {
+            className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed",
+      "data-cy": "email-body-preview-container",
+      children: [body ? /*#__PURE__*/jsx(MemoizedEditorContent, {
+        content: body
+      }) : /*#__PURE__*/jsxs("div", {
+        className: "space-y-4",
+        children: [/*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72"
+        }), /*#__PURE__*/jsx("div", {
+          className: "neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80"
+        })]
+      }), customContent && customContent, actionButtonText && /*#__PURE__*/jsx("div", {
+        className: "mt-6 flex w-full items-center justify-center",
+        children: /*#__PURE__*/jsx(Button, {
+          className: "pointer-events-none",
+          label: actionButtonText
+        })
+      }), logo && /*#__PURE__*/jsx("img", {
+        alt: t("neetoMolecules.emailPreview.logoAltText"),
+        className: "h-20 w-36 object-cover",
+        "data-cy": "company-logo-preview",
+        src: logo
+      })]
+    })]
+  });
 });
 EmailPreview.propTypes = {
   /**

package/dist/EmailPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmailPreview.js","sources":["../src/components/EmailPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { EditorContent } from \"neetoeditor\";\nimport { Typography, Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst MemoizedEditorContent = React.memo(EditorContent);\n\nconst EmailPreview = withT(\n  ({\n    t,\n    to = [],\n    from,\n    subject,\n    body,\n    actionButtonText,\n    logo,\n    className = \"\",\n    customContent,\n  }) => (\n    <div\n      data-cy=\"email-preview-card\"\n      data-testid=\"email-preview\"\n      className={classnames(\n        \"neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border\",\n        className\n      )}\n    >\n      <div className=\"neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6\">\n        <div\n          className=\"flex gap-2\"\n          data-cy=\"email-send-to-preview\"\n          data-testid=\"email-to-block\"\n        >\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.to\")}:\n          </Typography>\n          {isPresent(to) ? (\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {to.join(\", \")}\n            </Typography>\n          ) : (\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40\" />\n          )}\n        </div>\n        {from && (\n          <div className=\"flex items-center gap-2 pt-3\">\n            <Typography\n              className=\"neeto-ui-text-gray-500\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {t(\"neetoMolecules.emailPreview.from\")}:\n            </Typography>\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              data-cy=\"email-send-from-preview\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {from}\n            </Typography>\n          </div>\n        )}\n        <div className=\"flex items-center gap-2 pt-3\">\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.subject\")}:\n          </Typography>\n          <Typography\n            className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n            data-cy=\"email-subject-preview\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {subject || (\n              <span className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40\" />\n            )}\n          </Typography>\n        </div>\n      </div>\n      <div\n        className=\"neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed\"\n        data-cy=\"email-body-preview-container\"\n      >\n        {body ? (\n          <MemoizedEditorContent content={body} />\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80\" />\n          </div>\n        )}\n        {customContent && customContent}\n        {actionButtonText && (\n          <div className=\"mt-6 flex w-full items-center justify-center\">\n            <Button className=\"pointer-events-none\" label={actionButtonText} />\n          </div>\n        )}\n        {logo && (\n          <img\n            alt={t(\"neetoMolecules.emailPreview.logoAltText\")}\n            className=\"h-20 w-36 object-cover\"\n            data-cy=\"company-logo-preview\"\n            src={logo}\n          />\n        )}\n      </div>\n    </div>\n  )\n);\n\nEmailPreview.propTypes = {\n  /**\n   * The value of the send-to field.\n   */\n  to: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * The value of the send-from field.\n   */\n  from: PropTypes.string,\n  /**\n   * The subject of the email.\n   */\n  subject: PropTypes.string,\n  /**\n   * The body of the email.\n   */\n  body: PropTypes.string,\n  /**\n   * The text to be shown in the action button.\n   */\n  actionButtonText: PropTypes.string,\n  /**\n   * Source link for the company logo.\n   */\n  logo: PropTypes.string,\n  /**\n   * To pass custom content that will be rendered above the action button.\n   */\n  customContent: PropTypes.string,\n};\n\nexport default EmailPreview;\n"],"names":["MemoizedEditorContent","React","memo","EditorContent","EmailPreview","withT","_ref","t","_ref$to","to","from","subject","body","actionButtonText","logo","_ref$className","className","customContent","createElement","classnames","Typography","lineHeight","style","isPresent","join","content","Button","label","alt","src","propTypes","PropTypes","arrayOf","string"],"mappings":"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"}
+{"version":3,"file":"EmailPreview.js","sources":["../src/components/EmailPreview.jsx"],"sourcesContent":["import { memo } from \"react\";\n\nimport classnames from \"classnames\";\nimport { isPresent } from \"neetocist\";\nimport withT from \"neetocommons/react-utils/withT\";\nimport { EditorContent } from \"neetoeditor\";\nimport { Typography, Button } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst MemoizedEditorContent = memo(EditorContent);\n\nconst EmailPreview = withT(\n  ({\n    t,\n    to = [],\n    from,\n    subject,\n    body,\n    actionButtonText,\n    logo,\n    className = \"\",\n    customContent,\n  }) => (\n    <div\n      data-cy=\"email-preview-card\"\n      data-testid=\"email-preview\"\n      className={classnames(\n        \"neeto-ui-border-gray-300 neeto-ui-shadow-m neeto-ui-bg-white flex flex-1 flex-col border\",\n        className\n      )}\n    >\n      <div className=\"neeto-ui-border-gray-300 space-y-3 divide-y divide-gray-200 border-b p-6\">\n        <div\n          className=\"flex gap-2\"\n          data-cy=\"email-send-to-preview\"\n          data-testid=\"email-to-block\"\n        >\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.to\")}:\n          </Typography>\n          {isPresent(to) ? (\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {to.join(\", \")}\n            </Typography>\n          ) : (\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full mt-2 h-2 w-40\" />\n          )}\n        </div>\n        {from && (\n          <div className=\"flex items-center gap-2 pt-3\">\n            <Typography\n              className=\"neeto-ui-text-gray-500\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {t(\"neetoMolecules.emailPreview.from\")}:\n            </Typography>\n            <Typography\n              className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n              data-cy=\"email-send-from-preview\"\n              lineHeight=\"normal\"\n              style=\"body2\"\n            >\n              {from}\n            </Typography>\n          </div>\n        )}\n        <div className=\"flex items-center gap-2 pt-3\">\n          <Typography\n            className=\"neeto-ui-text-gray-500\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {t(\"neetoMolecules.emailPreview.subject\")}:\n          </Typography>\n          <Typography\n            className=\"neeto-ui-text-gray-800 min-w-0 flex-grow break-words\"\n            data-cy=\"email-subject-preview\"\n            lineHeight=\"normal\"\n            style=\"body2\"\n          >\n            {subject || (\n              <span className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40\" />\n            )}\n          </Typography>\n        </div>\n      </div>\n      <div\n        className=\"neeto-ui-text-gray-800 flex flex-1 flex-col justify-between space-y-6 p-6 pr-10 text-base leading-relaxed\"\n        data-cy=\"email-body-preview-container\"\n      >\n        {body ? (\n          <MemoizedEditorContent content={body} />\n        ) : (\n          <div className=\"space-y-4\">\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-40 max-w-full md:w-72\" />\n            <div className=\"neeto-ui-bg-gray-300 neeto-ui-rounded-full h-2 w-48 max-w-full md:w-80\" />\n          </div>\n        )}\n        {customContent && customContent}\n        {actionButtonText && (\n          <div className=\"mt-6 flex w-full items-center justify-center\">\n            <Button className=\"pointer-events-none\" label={actionButtonText} />\n          </div>\n        )}\n        {logo && (\n          <img\n            alt={t(\"neetoMolecules.emailPreview.logoAltText\")}\n            className=\"h-20 w-36 object-cover\"\n            data-cy=\"company-logo-preview\"\n            src={logo}\n          />\n        )}\n      </div>\n    </div>\n  )\n);\n\nEmailPreview.propTypes = {\n  /**\n   * The value of the send-to field.\n   */\n  to: PropTypes.arrayOf(PropTypes.string),\n  /**\n   * The value of the send-from field.\n   */\n  from: PropTypes.string,\n  /**\n   * The subject of the email.\n   */\n  subject: PropTypes.string,\n  /**\n   * The body of the email.\n   */\n  body: PropTypes.string,\n  /**\n   * The text to be shown in the action button.\n   */\n  actionButtonText: PropTypes.string,\n  /**\n   * Source link for the company logo.\n   */\n  logo: PropTypes.string,\n  /**\n   * To pass custom content that will be rendered above the action button.\n   */\n  customContent: PropTypes.string,\n};\n\nexport default EmailPreview;\n"],"names":["MemoizedEditorContent","memo","EditorContent","EmailPreview","withT","_ref","t","_ref$to","to","from","subject","body","actionButtonText","logo","_ref$className","className","customContent","_jsxs","classnames","children","Typography","lineHeight","style","isPresent","_jsx","join","content","Button","label","alt","src","propTypes","PropTypes","arrayOf","string"],"mappings":"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"}

package/dist/EmojiPicker.js

@@ -1,12 +1,13 @@
-import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useState } from 'react';
+import { useState } from 'react';
 import SmileFaceGrey from '@bigbinary/neeto-icons/SmileFaceGrey';
 import Dropdown from '@bigbinary/neetoui/Dropdown';
 import { useTranslation } from 'react-i18next';
 import { Picker } from 'emoji-mart';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import { jsx } from 'react/jsx-runtime';
 
 var fetch = function fetch() {
   return axios.get("https://cdn.jsdelivr.net/npm/@emoji-mart/data");
@@ -47,7 +48,7 @@ var EmojiPickerMenu = function EmojiPickerMenu(_ref) {
       theme: "light"
     });
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     ref: createPicker,
     style: {
       minWidth: "350px"
@@ -55,6 +56,8 @@ var EmojiPickerMenu = function EmojiPickerMenu(_ref) {
   });
 };
 
+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 EmojiPicker = function EmojiPicker(_ref) {
   var onSelect = _ref.onSelect,
     dropdownProps = _ref.dropdownProps,
@@ -70,7 +73,7 @@ var EmojiPicker = function EmojiPicker(_ref) {
     setIsOpen(false);
     onSelect(emoji);
   };
-  return /*#__PURE__*/React__default.createElement(Dropdown, _extends({
+  return /*#__PURE__*/jsx(Dropdown, _objectSpread(_objectSpread({
     isOpen: isOpen,
     closeOnEsc: true,
     closeOnSelect: false,
@@ -97,8 +100,10 @@ var EmojiPicker = function EmojiPicker(_ref) {
     onClose: function onClose() {
       return setIsOpen(false);
     }
-  }, dropdownProps), /*#__PURE__*/React__default.createElement(EmojiPickerMenu, {
-    onEmojiSelect: onEmojiClick
+  }, dropdownProps), {}, {
+    children: /*#__PURE__*/jsx(EmojiPickerMenu, {
+      onEmojiSelect: onEmojiClick
+    })
   }));
 };
 

package/dist/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sources":["../src/components/EmojiPicker/api.js","../src/components/EmojiPicker/constants.js","../src/components/EmojiPicker/hooks/useEmojiData.js","../src/components/EmojiPicker/EmojiPickerMenu.jsx","../src/components/EmojiPicker/index.jsx"],"sourcesContent":["import axios from \"axios\";\n\nconst fetch = () => axios.get(\"https://cdn.jsdelivr.net/npm/@emoji-mart/data\");\n\nconst emojiPickerApi = { fetch };\n\nexport default emojiPickerApi;\n","export const QUERY_KEYS = { EMOJI_DATA: \"emoji-data\" };\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport emojiPickerApi from \"../api\";\nimport { QUERY_KEYS } from \"../constants\";\n\nexport const useEmojiData = () =>\n  useQuery({\n    queryKey: [QUERY_KEYS.EMOJI_DATA],\n    queryFn: emojiPickerApi.fetch,\n  });\n","import React from \"react\";\n\nimport { Picker } from \"emoji-mart\";\nimport PropTypes from \"prop-types\";\n\nimport { useEmojiData } from \"./hooks/useEmojiData\";\n\nconst EmojiPickerMenu = ({ onEmojiSelect }) => {\n  const { data } = useEmojiData();\n\n  const createPicker = ref => {\n    new Picker({\n      autoFocus: true,\n      data,\n      native: true,\n      onEmojiSelect,\n      previewPosition: \"none\",\n      ref: { current: ref },\n      skinTonePosition: \"none\",\n      style: { maxWidth: \"100%\" },\n      theme: \"light\",\n    });\n  };\n\n  return <div ref={createPicker} style={{ minWidth: \"350px\" }} />;\n};\n\nEmojiPickerMenu.propTypes = { onEmojiSelect: PropTypes.func };\n\nexport default EmojiPickerMenu;\n","import React, { useState } from \"react\";\n\nimport { SmileFaceGrey } from \"neetoicons\";\nimport { Dropdown } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport EmojiPickerMenu from \"./EmojiPickerMenu\";\n\nconst EmojiPicker = ({ onSelect, dropdownProps, open = false }) => {\n  const { t } = useTranslation();\n  const [isOpen, setIsOpen] = useState(open);\n\n  const onEmojiClick = emoji => {\n    setIsOpen(false);\n    onSelect(emoji);\n  };\n\n  return (\n    <Dropdown\n      {...{ isOpen }}\n      closeOnEsc\n      closeOnSelect={false}\n      dropdownProps={{ className: \"neeto-ui-shadow-s z-10\" }}\n      position=\"bottom-start\"\n      strategy=\"fixed\"\n      buttonProps={{\n        \"data-cy\": \"emoji-picker-dropdown-icon\",\n        icon: SmileFaceGrey,\n        tooltipProps: {\n          content: t(\"neetoMolecules.common.emojiPicker\"),\n          position: \"top\",\n        },\n        onClick: () => setIsOpen(true),\n        style: \"text\",\n      }}\n      onClickOutside={() => setIsOpen(false)}\n      onClose={() => setIsOpen(false)}\n      {...dropdownProps}\n    >\n      <EmojiPickerMenu onEmojiSelect={onEmojiClick} />\n    </Dropdown>\n  );\n};\n\nEmojiPicker.propTypes = {\n  /**\n   * Function to be called when an emoji is selected\n   */\n  onSelect: PropTypes.func,\n  /**\n   * Props to be passed to the dropdown component.\n   */\n  dropdownProps: PropTypes.shape({\n    strategy: PropTypes.oneOf(Object.values([\"absolute\", \"fixed\"])),\n  }),\n  /**\n   * Whether to open the emoji picker by default or not.\n   */\n  open: PropTypes.bool,\n};\n\nexport default EmojiPicker;\n"],"names":["fetch","axios","get","emojiPickerApi","QUERY_KEYS","EMOJI_DATA","useEmojiData","useQuery","queryKey","queryFn","EmojiPickerMenu","_ref","onEmojiSelect","_useEmojiData","data","createPicker","ref","Picker","autoFocus","previewPosition","current","skinTonePosition","style","maxWidth","theme","React","createElement","minWidth","EmojiPicker","onSelect","dropdownProps","_ref$open","open","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","onEmojiClick","emoji","Dropdown","_extends","closeOnEsc","closeOnSelect","className","position","strategy","buttonProps","icon","SmileFaceGrey","tooltipProps","content","onClick","onClickOutside","onClose"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.js","sources":["../src/components/EmojiPicker/api.js","../src/components/EmojiPicker/constants.js","../src/components/EmojiPicker/hooks/useEmojiData.js","../src/components/EmojiPicker/EmojiPickerMenu.jsx","../src/components/EmojiPicker/index.jsx"],"sourcesContent":["import axios from \"axios\";\n\nconst fetch = () => axios.get(\"https://cdn.jsdelivr.net/npm/@emoji-mart/data\");\n\nconst emojiPickerApi = { fetch };\n\nexport default emojiPickerApi;\n","export const QUERY_KEYS = { EMOJI_DATA: \"emoji-data\" };\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport emojiPickerApi from \"../api\";\nimport { QUERY_KEYS } from \"../constants\";\n\nexport const useEmojiData = () =>\n  useQuery({\n    queryKey: [QUERY_KEYS.EMOJI_DATA],\n    queryFn: emojiPickerApi.fetch,\n  });\n","import { Picker } from \"emoji-mart\";\nimport PropTypes from \"prop-types\";\n\nimport { useEmojiData } from \"./hooks/useEmojiData\";\n\nconst EmojiPickerMenu = ({ onEmojiSelect }) => {\n  const { data } = useEmojiData();\n\n  const createPicker = ref => {\n    new Picker({\n      autoFocus: true,\n      data,\n      native: true,\n      onEmojiSelect,\n      previewPosition: \"none\",\n      ref: { current: ref },\n      skinTonePosition: \"none\",\n      style: { maxWidth: \"100%\" },\n      theme: \"light\",\n    });\n  };\n\n  return <div ref={createPicker} style={{ minWidth: \"350px\" }} />;\n};\n\nEmojiPickerMenu.propTypes = { onEmojiSelect: PropTypes.func };\n\nexport default EmojiPickerMenu;\n","import { useState } from \"react\";\n\nimport { SmileFaceGrey } from \"neetoicons\";\nimport { Dropdown } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport EmojiPickerMenu from \"./EmojiPickerMenu\";\n\nconst EmojiPicker = ({ onSelect, dropdownProps, open = false }) => {\n  const { t } = useTranslation();\n  const [isOpen, setIsOpen] = useState(open);\n\n  const onEmojiClick = emoji => {\n    setIsOpen(false);\n    onSelect(emoji);\n  };\n\n  return (\n    <Dropdown\n      {...{ isOpen }}\n      closeOnEsc\n      closeOnSelect={false}\n      dropdownProps={{ className: \"neeto-ui-shadow-s z-10\" }}\n      position=\"bottom-start\"\n      strategy=\"fixed\"\n      buttonProps={{\n        \"data-cy\": \"emoji-picker-dropdown-icon\",\n        icon: SmileFaceGrey,\n        tooltipProps: {\n          content: t(\"neetoMolecules.common.emojiPicker\"),\n          position: \"top\",\n        },\n        onClick: () => setIsOpen(true),\n        style: \"text\",\n      }}\n      onClickOutside={() => setIsOpen(false)}\n      onClose={() => setIsOpen(false)}\n      {...dropdownProps}\n    >\n      <EmojiPickerMenu onEmojiSelect={onEmojiClick} />\n    </Dropdown>\n  );\n};\n\nEmojiPicker.propTypes = {\n  /**\n   * Function to be called when an emoji is selected\n   */\n  onSelect: PropTypes.func,\n  /**\n   * Props to be passed to the dropdown component.\n   */\n  dropdownProps: PropTypes.shape({\n    strategy: PropTypes.oneOf(Object.values([\"absolute\", \"fixed\"])),\n  }),\n  /**\n   * Whether to open the emoji picker by default or not.\n   */\n  open: PropTypes.bool,\n};\n\nexport default EmojiPicker;\n"],"names":["fetch","axios","get","emojiPickerApi","QUERY_KEYS","EMOJI_DATA","useEmojiData","useQuery","queryKey","queryFn","EmojiPickerMenu","_ref","onEmojiSelect","_useEmojiData","data","createPicker","ref","Picker","autoFocus","previewPosition","current","skinTonePosition","style","maxWidth","theme","_jsx","minWidth","EmojiPicker","onSelect","dropdownProps","_ref$open","open","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","onEmojiClick","emoji","Dropdown","_objectSpread","closeOnEsc","closeOnSelect","className","position","strategy","buttonProps","icon","SmileFaceGrey","tooltipProps","content","onClick","onClickOutside","onClose","children"],"mappings":"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"}

package/dist/EmojiReactions.js

@@ -1,11 +1,12 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useMemo } from 'react';
+import { useMemo } from 'react';
 import classnames from 'classnames';
 import { noop } from '@bigbinary/neeto-cist';
 import Tooltip from '@bigbinary/neetoui/Tooltip';
 import Typography from '@bigbinary/neetoui/Typography';
 import { pluck } from 'ramda';
 import { useTranslation } from 'react-i18next';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 var groupBy = function groupBy(objectArray, groupKey) {
   return objectArray.reduce(function (data, obj) {
@@ -28,42 +29,52 @@ var EmojiReactions = function EmojiReactions(_ref) {
   var groupedReactions = useMemo(function () {
     return groupBy(reactions || [], "unified");
   }, [reactions]);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, Object.entries(groupedReactions).map(function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      unified = _ref3[0],
-      grouped = _ref3[1];
-    var groupedNames = pluck("userName", reactions).join(", ");
-    var reaction = grouped[0];
-    return /*#__PURE__*/React__default.createElement(Tooltip, {
-      key: unified,
-      position: "top",
-      content: /*#__PURE__*/React__default.createElement("div", {
-        className: "flex flex-col items-center justify-center"
-      }, /*#__PURE__*/React__default.createElement("div", {
-        className: "neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center"
-      }, reaction["native"]), /*#__PURE__*/React__default.createElement("p", {
-        className: "text-center text-xs"
-      }, t("neetoMolecules.reactions.content", {
-        groupedNames: groupedNames
-      })))
-    }, /*#__PURE__*/React__default.createElement("div", {
-      "data-cy": "emoji-reactions-".concat(reaction.unified),
-      className: classnames(["neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1", emojiBoxStyle], {
-        "opacity-80": isUpdating
-      }),
-      onClick: function onClick() {
-        return !isUpdating && onReactionClick({
-          "native": reaction["native"],
-          unified: reaction.unified
-        }, grouped);
-      }
-    }, /*#__PURE__*/React__default.createElement(Typography, {
-      className: "space-x-2 text-sm",
-      style: "body2"
-    }, /*#__PURE__*/React__default.createElement("span", {
-      className: emojiSize
-    }, reaction["native"]), /*#__PURE__*/React__default.createElement("span", null, grouped.length))));
-  }));
+  return /*#__PURE__*/jsx(Fragment, {
+    children: Object.entries(groupedReactions).map(function (_ref2) {
+      var _ref3 = _slicedToArray(_ref2, 2),
+        unified = _ref3[0],
+        grouped = _ref3[1];
+      var groupedNames = pluck("userName", reactions).join(", ");
+      var reaction = grouped[0];
+      return /*#__PURE__*/jsx(Tooltip, {
+        position: "top",
+        content: /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col items-center justify-center",
+          children: [/*#__PURE__*/jsx("div", {
+            className: "neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center",
+            children: reaction["native"]
+          }), /*#__PURE__*/jsx("p", {
+            className: "text-center text-xs",
+            children: t("neetoMolecules.reactions.content", {
+              groupedNames: groupedNames
+            })
+          })]
+        }),
+        children: /*#__PURE__*/jsx("div", {
+          "data-cy": "emoji-reactions-".concat(reaction.unified),
+          className: classnames(["neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1", emojiBoxStyle], {
+            "opacity-80": isUpdating
+          }),
+          onClick: function onClick() {
+            return !isUpdating && onReactionClick({
+              "native": reaction["native"],
+              unified: reaction.unified
+            }, grouped);
+          },
+          children: /*#__PURE__*/jsxs(Typography, {
+            className: "space-x-2 text-sm",
+            style: "body2",
+            children: [/*#__PURE__*/jsx("span", {
+              className: emojiSize,
+              children: reaction["native"]
+            }), /*#__PURE__*/jsx("span", {
+              children: grouped.length
+            })]
+          })
+        })
+      }, unified);
+    })
+  });
 };
 
 export { EmojiReactions as default };

package/dist/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":["../src/components/EmojiReactions/utils.js","../src/components/EmojiReactions/index.jsx"],"sourcesContent":["export const groupBy = (objectArray, groupKey) =>\n  objectArray.reduce((data, obj) => {\n    (data[obj[groupKey]] = data[obj[groupKey]] || []).push(obj);\n\n    return data;\n  }, {});\n","import React, { useMemo } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { pluck } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { groupBy } from \"./utils\";\n\nconst EmojiReactions = ({\n  isUpdating,\n  reactions,\n  onReactionClick = noop,\n  emojiSize = \"text-sm\",\n  emojiBoxStyle = \"neeto-ui-bg-white py-1 px-2\",\n}) => {\n  const { t } = useTranslation();\n  const groupedReactions = useMemo(\n    () => groupBy(reactions || [], \"unified\"),\n    [reactions]\n  );\n\n  return (\n    <>\n      {Object.entries(groupedReactions).map(([unified, grouped]) => {\n        const groupedNames = pluck(\"userName\", reactions).join(\", \");\n        const reaction = grouped[0];\n\n        return (\n          <Tooltip\n            key={unified}\n            position=\"top\"\n            content={\n              <div className=\"flex flex-col items-center justify-center\">\n                <div className=\"neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center\">\n                  {reaction.native}\n                </div>\n                <p className=\"text-center text-xs\">\n                  {t(\"neetoMolecules.reactions.content\", { groupedNames })}\n                </p>\n              </div>\n            }\n          >\n            <div\n              data-cy={`emoji-reactions-${reaction.unified}`}\n              className={classNames(\n                [\n                  \"neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1\",\n                  emojiBoxStyle,\n                ],\n                { \"opacity-80\": isUpdating }\n              )}\n              onClick={() =>\n                !isUpdating &&\n                onReactionClick(\n                  {\n                    native: reaction.native,\n                    unified: reaction.unified,\n                  },\n                  grouped\n                )\n              }\n            >\n              <Typography className=\"space-x-2 text-sm\" style=\"body2\">\n                <span className={emojiSize}>{reaction.native}</span>\n                <span>{grouped.length}</span>\n              </Typography>\n            </div>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n};\n\nEmojiReactions.propTypes = {\n  /**\n   * Array of reactions to be displayed\n   */\n  reactions: PropTypes.arrayOf(\n    PropTypes.shape({\n      native: PropTypes.string,\n      unified: PropTypes.string,\n      userName: PropTypes.string,\n    })\n  ),\n  /**\n   * Callback function to be called when user click on an existing reaction\n   */\n  onReactionClick: PropTypes.func,\n  /**\n   * Size of the emoji\n   */\n  emojiSize: PropTypes.string,\n  /**\n   * Emoji picker box style\n   */\n  emojiBoxStyle: PropTypes.string,\n  /**\n   * Use this flag to block click action while backend is updating.\n   */\n  isUpdating: PropTypes.bool,\n};\n\nexport default EmojiReactions;\n"],"names":["groupBy","objectArray","groupKey","reduce","data","obj","push","EmojiReactions","_ref","isUpdating","reactions","_ref$onReactionClick","onReactionClick","noop","_ref$emojiSize","emojiSize","_ref$emojiBoxStyle","emojiBoxStyle","_useTranslation","useTranslation","t","groupedReactions","useMemo","React","createElement","Fragment","Object","entries","map","_ref2","_ref3","_slicedToArray","unified","grouped","groupedNames","pluck","join","reaction","Tooltip","key","position","content","className","concat","classNames","onClick","Typography","style","length"],"mappings":"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"}
+{"version":3,"file":"EmojiReactions.js","sources":["../src/components/EmojiReactions/utils.js","../src/components/EmojiReactions/index.jsx"],"sourcesContent":["export const groupBy = (objectArray, groupKey) =>\n  objectArray.reduce((data, obj) => {\n    (data[obj[groupKey]] = data[obj[groupKey]] || []).push(obj);\n\n    return data;\n  }, {});\n","import { useMemo } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { pluck } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { groupBy } from \"./utils\";\n\nconst EmojiReactions = ({\n  isUpdating,\n  reactions,\n  onReactionClick = noop,\n  emojiSize = \"text-sm\",\n  emojiBoxStyle = \"neeto-ui-bg-white py-1 px-2\",\n}) => {\n  const { t } = useTranslation();\n  const groupedReactions = useMemo(\n    () => groupBy(reactions || [], \"unified\"),\n    [reactions]\n  );\n\n  return (\n    <>\n      {Object.entries(groupedReactions).map(([unified, grouped]) => {\n        const groupedNames = pluck(\"userName\", reactions).join(\", \");\n        const reaction = grouped[0];\n\n        return (\n          <Tooltip\n            key={unified}\n            position=\"top\"\n            content={\n              <div className=\"flex flex-col items-center justify-center\">\n                <div className=\"neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center\">\n                  {reaction.native}\n                </div>\n                <p className=\"text-center text-xs\">\n                  {t(\"neetoMolecules.reactions.content\", { groupedNames })}\n                </p>\n              </div>\n            }\n          >\n            <div\n              data-cy={`emoji-reactions-${reaction.unified}`}\n              className={classNames(\n                [\n                  \"neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1\",\n                  emojiBoxStyle,\n                ],\n                { \"opacity-80\": isUpdating }\n              )}\n              onClick={() =>\n                !isUpdating &&\n                onReactionClick(\n                  {\n                    native: reaction.native,\n                    unified: reaction.unified,\n                  },\n                  grouped\n                )\n              }\n            >\n              <Typography className=\"space-x-2 text-sm\" style=\"body2\">\n                <span className={emojiSize}>{reaction.native}</span>\n                <span>{grouped.length}</span>\n              </Typography>\n            </div>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n};\n\nEmojiReactions.propTypes = {\n  /**\n   * Array of reactions to be displayed\n   */\n  reactions: PropTypes.arrayOf(\n    PropTypes.shape({\n      native: PropTypes.string,\n      unified: PropTypes.string,\n      userName: PropTypes.string,\n    })\n  ),\n  /**\n   * Callback function to be called when user click on an existing reaction\n   */\n  onReactionClick: PropTypes.func,\n  /**\n   * Size of the emoji\n   */\n  emojiSize: PropTypes.string,\n  /**\n   * Emoji picker box style\n   */\n  emojiBoxStyle: PropTypes.string,\n  /**\n   * Use this flag to block click action while backend is updating.\n   */\n  isUpdating: PropTypes.bool,\n};\n\nexport default EmojiReactions;\n"],"names":["groupBy","objectArray","groupKey","reduce","data","obj","push","EmojiReactions","_ref","isUpdating","reactions","_ref$onReactionClick","onReactionClick","noop","_ref$emojiSize","emojiSize","_ref$emojiBoxStyle","emojiBoxStyle","_useTranslation","useTranslation","t","groupedReactions","useMemo","_jsx","_Fragment","children","Object","entries","map","_ref2","_ref3","_slicedToArray","unified","grouped","groupedNames","pluck","join","reaction","Tooltip","position","content","_jsxs","className","concat","classNames","onClick","Typography","style","length"],"mappings":"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"}

package/dist/ErrorPage.js

@@ -1,12 +1,13 @@
-import _extends$3 from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { shallow } from 'zustand/shallow';
 import * as React from 'react';
-import React__default, { useEffect } from 'react';
+import { useEffect } from 'react';
 import { useErrorDisplayStore } from '@bigbinary/neeto-commons-frontend/react-utils/useDisplayErrorPage';
 import Button from '@bigbinary/neetoui/Button';
 import Typography from '@bigbinary/neetoui/Typography';
 import { Helmet } from 'react-helmet';
 import { useTranslation, Trans } from 'react-i18next';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _path$2, _path2$1;
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
@@ -77,6 +78,8 @@ var ERRORS = {
   }
 };
 
+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 ErrorPage = function ErrorPage(_ref) {
   var _ref$homeUrl = _ref.homeUrl,
     homeUrl = _ref$homeUrl === void 0 ? "/" : _ref$homeUrl,
@@ -117,43 +120,53 @@ var ErrorPage = function ErrorPage(_ref) {
     (_window$NeetoChat = window.NeetoChat) === null || _window$NeetoChat === void 0 ? void 0 : (_window$NeetoChat$con = _window$NeetoChat.contextualHelp) === null || _window$NeetoChat$con === void 0 ? void 0 : _window$NeetoChat$con.maximizeWidget();
     (_window$NeetoChat2 = window.NeetoChat) === null || _window$NeetoChat2 === void 0 ? void 0 : (_window$NeetoChat2$co = _window$NeetoChat2.contextualHelp) === null || _window$NeetoChat2$co === void 0 ? void 0 : _window$NeetoChat2$co.openWidget();
   };
-  return /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/jsx("div", {
     className: "flex min-h-screen w-full flex-col items-center justify-center",
-    "data-cy": "error-page-container"
-  }, /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col gap-8 p-4 sm:flex-row sm:gap-20 sm:p-6"
-  }, /*#__PURE__*/React__default.createElement(Image, {
-    className: "w-full max-w-[150px] sm:max-w-[250px]",
-    "data-cy": "error-image"
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col"
-  }, /*#__PURE__*/React__default.createElement(Helmet, null, /*#__PURE__*/React__default.createElement("title", null, t(titleKey))), /*#__PURE__*/React__default.createElement(Typography, {
-    className: "mb-4",
-    "data-cy": "title",
-    style: "h2",
-    weight: "semibold"
-  }, /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: errorKey
-  })), showNeetoChatWidget && /*#__PURE__*/React__default.createElement(Typography, {
-    className: "mb-6",
-    "data-cy": "title",
-    style: "body2"
-  }, /*#__PURE__*/React__default.createElement(Trans, {
-    i18nKey: "neetoMolecules.errorPage.contactUs",
-    components: {
-      button: /*#__PURE__*/React__default.createElement(Button, {
-        style: "link",
-        onClick: openChatWidget
-      })
-    }
-  })), /*#__PURE__*/React__default.createElement("div", {
-    className: "flex flex-col items-start space-y-3"
-  }, /*#__PURE__*/React__default.createElement(Button, _extends$3({
-    href: homeUrl,
-    label: t("neetoMolecules.errorPage.backToHome"),
-    size: "large",
-    style: "primary"
-  }, backToHomeButtonProps)), children))));
+    "data-cy": "error-page-container",
+    children: /*#__PURE__*/jsxs("div", {
+      className: "flex flex-col gap-8 p-4 sm:flex-row sm:gap-20 sm:p-6",
+      children: [/*#__PURE__*/jsx(Image, {
+        className: "w-full max-w-[150px] sm:max-w-[250px]",
+        "data-cy": "error-image"
+      }), /*#__PURE__*/jsxs("div", {
+        className: "flex flex-col",
+        children: [/*#__PURE__*/jsx(Helmet, {
+          children: /*#__PURE__*/jsx("title", {
+            children: t(titleKey)
+          })
+        }), /*#__PURE__*/jsx(Typography, {
+          className: "mb-4",
+          "data-cy": "title",
+          style: "h2",
+          weight: "semibold",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: errorKey
+          })
+        }), showNeetoChatWidget && /*#__PURE__*/jsx(Typography, {
+          className: "mb-6",
+          "data-cy": "title",
+          style: "body2",
+          children: /*#__PURE__*/jsx(Trans, {
+            i18nKey: "neetoMolecules.errorPage.contactUs",
+            components: {
+              button: /*#__PURE__*/jsx(Button, {
+                style: "link",
+                onClick: openChatWidget
+              })
+            }
+          })
+        }), /*#__PURE__*/jsxs("div", {
+          className: "flex flex-col items-start space-y-3",
+          children: [/*#__PURE__*/jsx(Button, _objectSpread({
+            href: homeUrl,
+            label: t("neetoMolecules.errorPage.backToHome"),
+            size: "large",
+            style: "primary"
+          }, backToHomeButtonProps)), children]
+        })]
+      })]
+    })
+  });
 };
 
 export { ErrorPage as default };