@bigbinary/neeto-integrations-frontend 2.12.3 → 2.12.4

package/dist/index.cjs.js

@@ -7,21 +7,21 @@ var DisconnectAlert = require('@bigbinary/neeto-molecules/IntegrationDisconnectA
 var WalkthroughModal = require('@bigbinary/neeto-molecules/IntegrationWalkthroughModal');
 var React = require('react');
 var classnames = require('classnames');
-var i18next = require('i18next');
 var neetoCist = require('@bigbinary/neeto-cist');
 var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
+var i18next = require('i18next');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
 var reactQuery = require('react-query');
 var axios = require('axios');
+var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
+var formik = require('@bigbinary/neetoui/formik');
 var utils = require('@bigbinary/neeto-commons-frontend/utils');
 var misc = require('@bigbinary/neeto-icons/misc');
-var neetoui = require('@bigbinary/neetoui');
-var reactI18next = require('react-i18next');
-var formik = require('@bigbinary/neetoui/formik');
 var ramda = require('ramda');
 var yup = require('yup');
-var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
-var neetoIcons = require('@bigbinary/neeto-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -51,8 +51,8 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var i18next__default = /*#__PURE__*/_interopDefaultLegacy(i18next);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
-var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
+var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
 
 function _extends$1() {
   _extends$1 = Object.assign ? Object.assign.bind() : function (target) {
@@ -119,7 +119,7 @@ var Manage$1 = reactUtils.withT(function (_ref) {
     className: "neeto-ui-border-gray-300 neeto-ui-rounded-xl mt-10 w-full space-y-4 border p-6"
   }, Icon && /*#__PURE__*/React__default["default"].createElement(Icon, {
     className: "neeto-ui-text-gray-600",
-    size: 60
+    size: 48
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-2"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -632,15 +632,14 @@ var GoogleCalendar = function GoogleCalendar(_ref) {
     isOpen: true,
     onClose: handleClose
   }, activeTab === STEPS.connect && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "w-full max-w-2xl mx-auto"
+    className: "mx-auto w-full max-w-3xl"
   }, /*#__PURE__*/React__default["default"].createElement(misc.GoogleCalendar, {
-    size: 42
+    size: 48
   }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "mt-6 mb-3 neeto-ui-text-gray-800",
-    style: "h2",
-    weight: "semibold"
+    className: "mb-4 mt-2",
+    style: "h2"
   }, t("neetoIntegrations.google.connect.title")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex flex-col items-start w-full pt-2"
+    className: "flex w-full flex-col items-start"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Callout, {
     className: "block leading-5"
   }, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
@@ -652,7 +651,7 @@ var GoogleCalendar = function GoogleCalendar(_ref) {
       selectCheckbox: t("neetoIntegrations.google.connect.selectCheckbox")
     }
   })), permissionImage && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "my-4 border neeto-ui-border-gray-300"
+    className: "neeto-ui-border-gray-300 neeto-ui-rounded-md my-4 overflow-hidden border"
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: permissionImage
   }))), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
@@ -1080,7 +1079,7 @@ var Modal = function Modal(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(Stepper, {
     steps: steps
   })), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, {
-    className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-items-center neeto-ui-flex-grow"
+    className: "neeto-ui-flex neeto-ui-justify-center neeto-ui-flex-grow"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "neeto-ui-w-full py-10"
   }, children)));
@@ -1182,23 +1181,23 @@ var Connect = reactUtils.withT(function (_ref) {
     children = _ref.children,
     secondaryButtonProps = _ref.secondaryButtonProps;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto w-full max-w-lg"
+    className: "mx-auto w-full max-w-3xl"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-6 flex flex-col gap-y-2"
   }, /*#__PURE__*/React__default["default"].createElement(Icon, {
     size: 48
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 mb-0.5 mt-6",
-    style: "h2",
-    weight: "semibold"
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex flex-col gap-y-1"
+  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    style: "h2"
   }, title), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-700 mb-8",
-    style: "body1",
-    weight: "normal"
-  }, description), children, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-start space-x-4"
+    style: "body2"
+  }, description))), children, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "flex w-full items-center gap-x-3"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
     label: t("neetoIntegrations.common.connect"),
     onClick: onConnect
-  }, buttonProps)), neetoCist.isNotEmpty(secondaryButtonProps) && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
+  }, buttonProps)), secondaryButtonProps && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
     style: "secondary"
   }, secondaryButtonProps))));
 });
@@ -1206,23 +1205,23 @@ Connect.prototypes = {
   /**
    * To specify the Icon to be shown
    */
-  Icon: propTypesExports.PropTypes.node,
+  Icon: PropTypes.node,
   /**
    * To specify the title of the connect component
    */
-  title: propTypesExports.PropTypes.string,
+  title: PropTypes.string,
   /**
    * To specify the description for connect component
    */
-  description: propTypesExports.PropTypes.string,
+  description: PropTypes.string,
   /**
    * To specify the props for the connect button
    */
-  buttonProps: propTypesExports.PropTypes.object,
+  buttonProps: PropTypes.object,
   /**
    * Handler function that is triggered when the connect button is clicked.
    */
-  onConnect: propTypesExports.PropTypes.func
+  onConnect: PropTypes.func
 };
 
 var isYouTubeLink = function isYouTubeLink(videoUrl) {
@@ -1248,43 +1247,38 @@ var Demo = function Demo(_ref) {
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
   var renderVideo = function renderVideo(videoUrl) {
-    return isYouTubeLink(videoUrl) ? /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "intrinsic-container intrinsic-container-16x9"
-    }, /*#__PURE__*/React__default["default"].createElement("iframe", {
+    return isYouTubeLink(videoUrl) ? /*#__PURE__*/React__default["default"].createElement("iframe", {
       allowFullScreen: true,
-      className: "border-none",
+      className: "aspect-video border-none",
       frameBorder: "0",
       id: "ytplayer",
       src: videoUrl,
-      type: "text/html",
-      title: renderText(iframeTitle, t("neetoIntegrations.demo.iFrameTitle"))
-    })) : /*#__PURE__*/React__default["default"].createElement("video", {
+      title: renderText(iframeTitle, t("neetoIntegrations.demo.iFrameTitle")),
+      type: "text/html"
+    }) : /*#__PURE__*/React__default["default"].createElement("video", {
       autoPlay: true,
       controls: true,
       muted: true,
-      className: "max-w-3xl cursor-pointer md:max-w-xl",
+      className: "neeto-ui-rounded-xl aspect-video w-full max-w-3xl cursor-pointer",
       id: "walkthrough-video"
     }, /*#__PURE__*/React__default["default"].createElement("source", {
       src: videoUrl
     }));
   };
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "mx-auto max-w-3xl md:max-w-xl"
+    className: "mx-auto w-full max-w-3xl"
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-6 flex flex-col gap-y-1"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 mt-4 py-2",
-    style: "h2",
-    weight: "semibold"
+    style: "h2"
   }, renderText(title, t("neetoIntegrations.demo.title"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "body2",
-    weight: "light"
-  }, renderText(subtitle, t("neetoIntegrations.demo.subtitle"))), children, videoUrl && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "py-10"
-  }, renderVideo(videoUrl)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-start space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+    style: "body2"
+  }, renderText(subtitle, t("neetoIntegrations.demo.subtitle")))), children, videoUrl && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "mb-8"
+  }, renderVideo(videoUrl)), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
     label: t("neetoIntegrations.common.finish"),
     onClick: onClose
-  })));
+  }));
 };
 Demo.prototypes = {
   /**
@@ -1347,13 +1341,13 @@ var Finish = reactUtils.withT(function (_ref) {
     secondaryButtonProps = _ref$secondaryButtonP === void 0 ? {} : _ref$secondaryButtonP,
     children = _ref.children;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "neeto-ui-w-full mx-auto max-w-lg"
+    className: "mx-auto w-full max-w-3xl"
   }, /*#__PURE__*/React__default["default"].createElement(SvgSuccess, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    className: "neeto-ui-text-gray-800 mb-8 mt-4",
+    className: "mb-6 mt-4",
     style: "h2",
     weight: "semibold"
   }, title), children, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex w-full items-start space-x-2"
+    className: "flex w-full items-center gap-x-2"
   }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, _extends$1({
     onClick: onClick,
     label: t("neetoIntegrations.common.continue")