@bigbinary/neeto-molecules 1.19.10-beta → 1.19.11

package/dist/cjs/NeetoWidget.js

@@ -5,7 +5,7 @@ var i18next = require('i18next');
 var ramda = require('ramda');
 var React = require('react');
 var neetoIcons = require('@bigbinary/neeto-icons');
-var neetoui = require('@bigbinary/neetoui');
+var Callout = require('@bigbinary/neetoui/Callout');
 var reactI18next = require('react-i18next');
 var reactQuery = require('react-query');
 var _extends = require('@babel/runtime/helpers/extends');
@@ -13,15 +13,24 @@ var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var classnames = require('classnames');
 var neetoCist = require('@bigbinary/neeto-cist');
 var usePrevious = require('@bigbinary/neeto-commons-frontend/react-utils/usePrevious');
+var Toastr = require('@bigbinary/neetoui/Toastr');
+var Typography = require('@bigbinary/neetoui/Typography');
 var PageLoader = require('./PageLoader.js');
+var Button = require('@bigbinary/neetoui/Button');
+var Select = require('@bigbinary/neetoui/Select');
 var CopyToClipboardButton = require('./CopyToClipboardButton.js');
 var Prism = require('prismjs');
 require('prismjs/themes/prism-tomorrow.css');
 var formik = require('formik');
-var formik$1 = require('@bigbinary/neetoui/formik');
+var Pane = require('@bigbinary/neetoui/Pane');
+var Input = require('@bigbinary/neetoui/formik/Input');
+var MultiEmailInput = require('@bigbinary/neetoui/formik/MultiEmailInput');
 var axios = require('axios');
 var yup = require('yup');
+var Label = require('@bigbinary/neetoui/Label');
 var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
+var Switch = require('@bigbinary/neetoui/Switch');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('./inject-css-80a5faa3.js');
 require('@bigbinary/neeto-commons-frontend/utils/general');
@@ -49,14 +58,25 @@ function _interopNamespace(e) {
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+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);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 var Prism__default = /*#__PURE__*/_interopDefaultLegacy(Prism);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+var MultiEmailInput__default = /*#__PURE__*/_interopDefaultLegacy(MultiEmailInput);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
 var withT__default = /*#__PURE__*/_interopDefaultLegacy(withT);
+var Switch__default = /*#__PURE__*/_interopDefaultLegacy(Switch);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 
 var NEETO_WIDGET_USER_IDENTITY_KEY = "NeetoWidgetUserIdentity";
 var SESSION_CONTEXT_KEY = "NeetoReplayWidgetSessionContext";
@@ -137,7 +157,7 @@ var ChatWidgetBody = function ChatWidgetBody(_ref) {
       helpLink: WIDGET_HELP_LINKS.changelog
     },
     components: {
-      p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "mb-2",
         style: "body2"
       }),
@@ -154,7 +174,7 @@ var ChatWidgetBody = function ChatWidgetBody(_ref) {
       helpLink: WIDGET_HELP_LINKS.chat
     },
     components: {
-      p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "mb-2",
         style: "body2"
       }),
@@ -171,7 +191,7 @@ var ChatWidgetBody = function ChatWidgetBody(_ref) {
       helpLink: WIDGET_HELP_LINKS.replay
     },
     components: {
-      p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "mb-2",
         style: "body2"
       }),
@@ -223,11 +243,11 @@ var CodeBlock = function CodeBlock(_ref) {
     className: classnames__default["default"](["relative", className])
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-bg-primary-100 neeto-ui-rounded-lg flex w-full flex-wrap items-center justify-between gap-2 rounded-b-none p-3"
-  }, title && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, 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(neetoui.Select, {
+  }, title), selectedFramework && /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     className: "w-40",
     "data-testid": "framework-select",
     options: FRAMEWORK_SELECT_OPTIONS,
@@ -235,7 +255,7 @@ var CodeBlock = function CodeBlock(_ref) {
     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(neetoui.Button, {
+  }, sendViaEmail ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     style: "text",
     label: t("neetoMolecules.widget.installation.snippet.sendViaEmail"),
     onClick: sendViaEmail
@@ -401,7 +421,7 @@ var CodeSnippet = function CodeSnippet(_ref) {
       var valid = _ref2.valid;
       return !valid;
     }, formData.emails)) {
-      neetoui.Toastr.error(t("neetoMolecules.widget.email.fields.emails.invalidError"));
+      Toastr__default["default"].error(t("neetoMolecules.widget.email.fields.emails.invalidError"));
       return;
     }
     emailMutation.mutate({
@@ -425,37 +445,37 @@ var CodeSnippet = function CodeSnippet(_ref) {
     }
     return props;
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, {
+  return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], {
     isOpen: isPaneOpen,
     onClose: onClose
   }, /*#__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(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__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(neetoui.Pane.Body, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, 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(formik$1.MultiEmailInput, {
+  }, /*#__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(formik$1.Input, {
+  }), /*#__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(neetoui.Typography, {
+  }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, body), /*#__PURE__*/React__default["default"].createElement(CodeBlock, renderCodeBlockProps()))), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Footer, {
+  }, 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(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: emailMutation.isLoading,
     label: t("neetoMolecules.widget.email.actions.send"),
     loading: emailMutation.isLoading,
     type: "submit"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     label: t("neetoMolecules.widget.email.actions.cancel"),
     style: "text",
     onClick: onClose
@@ -509,13 +529,13 @@ var TooltipSwitch = withT__default["default"](function (_ref) {
     widget = _ref.widget,
     selectedWidgets = _ref.selectedWidgets,
     updateSelectedWidgets = _ref.updateSelectedWidgets;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     disabled: enabledClientApps.includes(widget),
     placement: "right",
     content: t("neetoMolecules.widget.tooltips.productIsDisabled", {
       productName: "neeto".concat(neetoCist.capitalize(widget))
     })
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Switch, {
+  }, /*#__PURE__*/React__default["default"].createElement(Switch__default["default"], {
     checked: selectedWidgets.includes(widget),
     disabled: !enabledClientApps.includes(widget),
     onChange: function onChange() {
@@ -539,7 +559,7 @@ var SelectionSwitches = function SelectionSwitches(_ref) {
     selectedWidgets: selectedWidgets,
     updateSelectedWidgets: updateSelectedWidgets,
     widget: primaryWidget
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, "neeto", neetoCist.capitalize(primaryWidget))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }), /*#__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", {
@@ -550,7 +570,7 @@ var SelectionSwitches = function SelectionSwitches(_ref) {
       selectedWidgets: selectedWidgets,
       updateSelectedWidgets: updateSelectedWidgets,
       widget: widget
-    }), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, null, "neeto", neetoCist.capitalize(widget)));
+    }), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], null, "neeto", neetoCist.capitalize(widget)));
   })));
 };
 
@@ -619,7 +639,7 @@ var EmbedCode = function EmbedCode(_ref) {
       onSuccess: function onSuccess() {
         var productName = "neeto".concat(neetoCist.capitalize(widget));
         var response = isEnabled ? "neetoMolecules.widget.installation.enabled" : "neetoMolecules.widget.installation.disabled";
-        neetoui.Toastr.success(t(response, {
+        Toastr__default["default"].success(t(response, {
           productName: productName
         }));
       }
@@ -641,7 +661,7 @@ var EmbedCode = function EmbedCode(_ref) {
           }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
             i18nKey: "neetoMolecules.widget.email.body.values.embedCode.mainText",
             components: {
-              p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
                 className: "mb-2",
                 style: "body2"
               })
@@ -657,7 +677,7 @@ var EmbedCode = function EmbedCode(_ref) {
               helpEmail: INSTALLATION_HELP_EMAIL
             },
             components: {
-              p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
                 className: "mb-2",
                 style: "body2"
               }),
@@ -680,7 +700,7 @@ var EmbedCode = function EmbedCode(_ref) {
           }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
             i18nKey: "neetoMolecules.widget.email.body.values.userIdentity",
             components: {
-              p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
                 className: "mb-2",
                 style: "body2"
               }),
@@ -708,7 +728,7 @@ var EmbedCode = function EmbedCode(_ref) {
               sessionContextKbUrl: NEETO_REPLAY_CONFIGURE_URL
             },
             components: {
-              p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+              p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
                 className: "mb-2",
                 style: "body2"
               }),
@@ -729,7 +749,7 @@ var EmbedCode = function EmbedCode(_ref) {
   };
   var handleSendViaEmail = function handleSendViaEmail(selectedEmail) {
     if (ramda.isEmpty(selectedWidgets)) {
-      neetoui.Toastr.error(t("neetoMolecules.widget.installation.snippet.disabledError"));
+      Toastr__default["default"].error(t("neetoMolecules.widget.installation.snippet.disabledError"));
       return;
     }
     setEmailType(selectedEmail);
@@ -744,7 +764,7 @@ var EmbedCode = function EmbedCode(_ref) {
     return "neetoMolecules.widget.installation.instructions.placement.selectedWidgets";
   };
   var embedHelpTextTranslationComponents = {
-    fontBold: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    fontBold: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       component: "span",
       style: "body2",
       weight: "semibold"
@@ -814,7 +834,7 @@ var EmbedCode = function EmbedCode(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
     i18nKey: "neetoMolecules.widget.installation.instructions.userIdentity",
     components: {
-      p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         style: "body2"
       }),
       Link: /*#__PURE__*/React__default["default"].createElement("a", {
@@ -838,7 +858,7 @@ var EmbedCode = function EmbedCode(_ref) {
   })), /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
     i18nKey: "neetoMolecules.widget.installation.instructions.sessionContext",
     components: {
-      p: /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      p: /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         style: "body2"
       }),
       Link: /*#__PURE__*/React__default["default"].createElement("a", {
@@ -864,7 +884,7 @@ var Main = function Main(props) {
   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(neetoui.Callout, {
+  }, /*#__PURE__*/React__default["default"].createElement(EmbedCode$1, props)) : /*#__PURE__*/React__default["default"].createElement(Callout__default["default"], {
     icon: neetoIcons.Info,
     style: "info"
   }, t("neetoMolecules.widget.developmentInfo"));