@bigbinary/neeto-payments-frontend 1.4.15 → 1.4.16

package/dist/index.cjs.js

@@ -9,28 +9,45 @@ var reactUtils = require('@bigbinary/neeto-commons-frontend/react-utils');
 var neetoFiltersFrontend = require('@bigbinary/neeto-filters-frontend');
 var Header = require('@bigbinary/neeto-molecules/Header');
 var SubHeader = require('@bigbinary/neeto-molecules/SubHeader');
-var neetoui = require('@bigbinary/neetoui');
+var Tab = require('@bigbinary/neetoui/Tab');
+var Typography = require('@bigbinary/neetoui/Typography');
 var reactI18next = require('react-i18next');
 var reactQuery = require('react-query');
 var devtools = require('react-query/devtools');
 var constants = require('@bigbinary/neeto-commons-frontend/constants');
+var Toastr = require('@bigbinary/neetoui/Toastr');
 var neetoIcons = require('@bigbinary/neeto-icons');
+var Button = require('@bigbinary/neetoui/Button');
+var Modal = require('@bigbinary/neetoui/Modal');
 var axios = require('axios');
 var utils$3 = require('@bigbinary/neeto-commons-frontend/utils');
 var ramda = require('ramda');
 var reactRouterDom = require('react-router-dom');
 var DateFormat = require('@bigbinary/neeto-molecules/DateFormat');
+var Tag = require('@bigbinary/neetoui/Tag');
+var Tooltip = require('@bigbinary/neetoui/Tooltip');
 var CopyToClipboardButton = require('@bigbinary/neeto-molecules/CopyToClipboardButton');
 var Columns = require('@bigbinary/neeto-molecules/Columns');
 var PageLoader = require('@bigbinary/neeto-molecules/PageLoader');
 var TableWrapper = require('@bigbinary/neeto-molecules/TableWrapper');
+var Table = require('@bigbinary/neetoui/Table');
+var NoData = require('@bigbinary/neetoui/NoData');
 var require$$0 = require('util');
+var Pane = require('@bigbinary/neetoui/Pane');
 var reactRouterDom$1 = require('react-router-dom/cjs/react-router-dom');
 var classNames = require('classnames');
+var Spinner = require('@bigbinary/neetoui/Spinner');
+var Alert = require('@bigbinary/neetoui/Alert');
 var neetointegrations = require('neetointegrations');
-var formik = require('@bigbinary/neetoui/formik');
+var Label = require('@bigbinary/neetoui/Label');
+var Select = require('@bigbinary/neetoui/formik/Select');
+var Form = require('@bigbinary/neetoui/formik/Form');
+var ActionBlock = require('@bigbinary/neetoui/formik/ActionBlock');
 var yup = require('yup');
+var Radio = require('@bigbinary/neetoui/Radio');
+var Input = require('@bigbinary/neetoui/formik/Input');
 var MoreDropdown = require('@bigbinary/neeto-molecules/MoreDropdown');
+var QRCodeImage = require('qrcode.react');
 var initializers = require('@bigbinary/neeto-commons-frontend/initializers');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -57,15 +74,34 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Header__default = /*#__PURE__*/_interopDefaultLegacy(Header);
 var SubHeader__default = /*#__PURE__*/_interopDefaultLegacy(SubHeader);
+var Tab__default = /*#__PURE__*/_interopDefaultLegacy(Tab);
+var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
+var Toastr__default = /*#__PURE__*/_interopDefaultLegacy(Toastr);
+var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Modal__default = /*#__PURE__*/_interopDefaultLegacy(Modal);
 var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
 var DateFormat__default = /*#__PURE__*/_interopDefaultLegacy(DateFormat);
+var Tag__default = /*#__PURE__*/_interopDefaultLegacy(Tag);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var CopyToClipboardButton__default = /*#__PURE__*/_interopDefaultLegacy(CopyToClipboardButton);
 var PageLoader__default = /*#__PURE__*/_interopDefaultLegacy(PageLoader);
 var TableWrapper__default = /*#__PURE__*/_interopDefaultLegacy(TableWrapper);
+var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
+var NoData__default = /*#__PURE__*/_interopDefaultLegacy(NoData);
 var require$$0__default = /*#__PURE__*/_interopDefaultLegacy(require$$0);
+var Pane__default = /*#__PURE__*/_interopDefaultLegacy(Pane);
 var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+var Spinner__default = /*#__PURE__*/_interopDefaultLegacy(Spinner);
+var Alert__default = /*#__PURE__*/_interopDefaultLegacy(Alert);
+var Label__default = /*#__PURE__*/_interopDefaultLegacy(Label);
+var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
+var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form);
+var ActionBlock__default = /*#__PURE__*/_interopDefaultLegacy(ActionBlock);
 var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
+var Radio__default = /*#__PURE__*/_interopDefaultLegacy(Radio);
+var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 var MoreDropdown__default = /*#__PURE__*/_interopDefaultLegacy(MoreDropdown);
+var QRCodeImage__default = /*#__PURE__*/_interopDefaultLegacy(QRCodeImage);
 
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
@@ -129,7 +165,7 @@ var queryClient = new reactQuery.QueryClient({
       staleTime: constants.DEFAULT_STALE_TIME,
       keepPreviousData: true,
       onError: function onError(error) {
-        return neetoui.Toastr.error(error);
+        return Toastr__default["default"].error(error);
       }
     }
   }
@@ -794,28 +830,28 @@ var ExportModal$2 = function ExportModal(_ref) {
   var onClose = function onClose() {
     return setShowExportModal(false);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+  return /*#__PURE__*/React__default["default"].createElement(Modal__default["default"], {
     onClose: onClose,
     isOpen: showExportModal
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h2"
-  }, t("neetoPayments.export.title.account"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.export.title.account"))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.account"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, {
+  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.account"))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Footer, {
     className: "space-x-2"
-  }, downloadUrl ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, downloadUrl ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: downloadUrl,
     icon: neetoIcons.Download,
     label: t("neetoPayments.common.download"),
     onClick: onClose
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isFileLoading,
     label: t("neetoPayments.common.export"),
     loading: isFileLoading,
     onClick: handleGenerateClick
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isFileLoading,
     label: t("neetoPayments.common.cancel"),
     style: "text",
@@ -920,12 +956,12 @@ var preProcessStatus = function preProcessStatus(type, status) {
 };
 var renderStatus = ramda.curry(function (type, status, record) {
   var processedStatus = preProcessStatus(type, status, record);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     content: i18next.t("neetoPayments.tooltipContent.".concat(type, ".").concat(processedStatus)),
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-fit"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+  }, /*#__PURE__*/React__default["default"].createElement(Tag__default["default"], {
     label: i18next.t("neetoPayments.tagLabels.".concat(type, ".").concat(processedStatus)),
     style: getTagStyle(processedStatus)
   })));
@@ -938,7 +974,7 @@ var renderFullName = function renderFullName(_, _ref) {
 var renderEmail = function renderEmail(email) {
   return /*#__PURE__*/React__default["default"].createElement(CopyButtonWrapper, {
     content: email
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: "mailto:".concat(email),
     label: email,
     style: "link"
@@ -953,7 +989,7 @@ var renderDate = function renderDate(date) {
 var IdentifierButton = function IdentifierButton(_ref) {
   var href = _ref.href,
     label = _ref.label;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: href,
     label: label,
     size: "small",
@@ -1207,7 +1243,7 @@ var List$6 = function List(_ref) {
   if (dataSize <= 0 || !neetoCist.isPresent(accounts)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], {
       title: tab === TAB$5.all ? t("neetoPayments.emptyState.account") : t("neetoPayments.emptyState.accountWithStatus", {
         status: tab
       })
@@ -1215,7 +1251,7 @@ var List$6 = function List(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     fixedHeight: true,
     allowRowClick: false,
     columnData: getVisibleColumnData(columnData),
@@ -1284,8 +1320,8 @@ var AccountsDashboard = function AccountsDashboard() {
       placeholder: t("neetoPayments.common.search"),
       className: "w-80"
     }
-  }), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, null, TABS$5.map(function (item) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+  }), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(Tab__default["default"], null, TABS$5.map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement(Tab__default["default"].Item, {
       active: tab === item,
       key: item,
       onClick: function onClick() {
@@ -1294,7 +1330,7 @@ var AccountsDashboard = function AccountsDashboard() {
     }, t("neetoPayments.common.".concat(item)));
   })), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     className: "mt-4",
-    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
     }, tab === TAB$5.all ? t("neetoPayments.countOf.account", {
@@ -1467,12 +1503,12 @@ var renderIdentifier$2 = function renderIdentifier() {
   }));
 };
 ramda.curry(function (type, kind) {
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     content: i18next.t("neetoPayments.tooltipContent.".concat(type, ".").concat(kind)),
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-fit"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tag, {
+  }, /*#__PURE__*/React__default["default"].createElement(Tag__default["default"], {
     label: i18next.t("neetoPayments.tagLabels.".concat(type, ".").concat(kind)),
     style: "secondary"
   })));
@@ -1485,12 +1521,12 @@ var renderSplitIdentifier = function renderSplitIdentifier(_ref2) {
   }, /*#__PURE__*/React__default["default"].createElement(IdentifierButton$1, {
     href: buildStripeSplitLink(identifier, isLive),
     label: identifier
-  })) : /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  })) : /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     content: i18next.t("neetoPayments.tooltipContent.identifierUnavailable"),
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "text-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
   }, i18next.t("neetoPayments.common.notAvailable"))));
 };
@@ -1509,17 +1545,17 @@ var renderTransferIdentifier = function renderTransferIdentifier() {
     href: identifier.startsWith("py") ? buildStripeTransferLink(identifier, account === null || account === void 0 ? void 0 : account.identifier, isLive) : buildStripeTransactionLink(identifier, isLive)
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "text-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  }, /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     position: "top",
     content: i18next.t("neetoPayments.tooltipContent.connectedTransactionUnavailable")
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
   }, i18next.t("neetoPayments.common.notAvailable"))));
 };
 var renderPlatformIdentifier = ramda.curry(function (setPaneStatus, data) {
   return /*#__PURE__*/React__default["default"].createElement(CopyButtonWrapper, {
     content: data === null || data === void 0 ? void 0 : data.identifier
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     label: data === null || data === void 0 ? void 0 : data.identifier,
     size: "small",
     style: "link",
@@ -1544,12 +1580,12 @@ var renderAccountIdentifier = function renderAccountIdentifier(_ref4) {
   }));
 };
 var renderSplitDate = function renderSplitDate(date) {
-  return neetoCist.isPresent(date) ? renderDate(date) : /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  return neetoCist.isPresent(date) ? renderDate(date) : /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     content: i18next.t("neetoPayments.tooltipContent.dateUnavailable"),
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "text-center"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
   }, i18next.t("neetoPayments.common.notAvailable"))));
 };
@@ -2051,28 +2087,28 @@ var ExportModal$1 = function ExportModal(_ref) {
   var onClose = function onClose() {
     return setShowExportModal(false);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+  return /*#__PURE__*/React__default["default"].createElement(Modal__default["default"], {
     onClose: onClose,
     isOpen: showExportModal
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h2"
-  }, t("neetoPayments.export.title.".concat(kind)))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.export.title.".concat(kind)))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.".concat(kind)))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, {
+  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.".concat(kind)))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Footer, {
     className: "space-x-2"
-  }, downloadUrl ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, downloadUrl ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: downloadUrl,
     icon: neetoIcons.Download,
     label: t("neetoPayments.common.download"),
     onClick: onClose
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isFileLoading,
     label: t("neetoPayments.common.export"),
     loading: isFileLoading,
     onClick: handleGenerateClick
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isFileLoading,
     label: t("neetoPayments.common.cancel"),
     style: "text",
@@ -4516,7 +4552,7 @@ var SubTable = function SubTable(_ref) {
     className: className || "ml-12 max-w-3xl"
   }, /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: false
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     fixedHeight: true,
     columnData: isSplitKind(kind) ? SPLIT_COLUMNS : REFUND_COLUMNS,
     pagination: false,
@@ -4539,14 +4575,14 @@ var ExpandedRow = function ExpandedRow() {
     className: "my-2 space-y-2"
   }, !ramda.isEmpty(splits) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "ml-12",
     style: "h3"
   }, i18next.t("neetoPayments.common.splits")), /*#__PURE__*/React__default["default"].createElement(SubTable, {
     data: splits
   })), !ramda.isEmpty(refunds) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-4"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "ml-12",
     style: "h3"
   }, i18next.t("neetoPayments.title.refund")), /*#__PURE__*/React__default["default"].createElement(SubTable, {
@@ -4651,19 +4687,19 @@ var Details = function Details(_ref) {
     live = _useFetchStripePlatfo3.live,
     _useFetchStripePlatfo4 = _useFetchStripePlatfo3.splits,
     splits = _useFetchStripePlatfo4 === void 0 ? [] : _useFetchStripePlatfo4;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Pane, _extends$1({}, paneProps, {
+  return /*#__PURE__*/React__default["default"].createElement(Pane__default["default"], _extends$1({}, paneProps, {
     size: "large"
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h2"
-  }, "Transaction Details")), /*#__PURE__*/React__default["default"].createElement(neetoui.Pane.Body, null, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "Transaction Details")), /*#__PURE__*/React__default["default"].createElement(Pane__default["default"].Body, null, isLoading ? /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null) : /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full space-y-6 p-2"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "w-full space-y-2"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.transactionPane.transactionId")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.transactionPane.transactionId")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, renderIdentifier$2({
@@ -4671,30 +4707,30 @@ var Details = function Details(_ref) {
     live: live
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.transactionPane.amount")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.transactionPane.amount")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, amount)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.transactionPane.netAmount")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.transactionPane.netAmount")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, netAmount)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
   }, t("neetoPayments.transactionPane.status")), renderStatus("transaction", status)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.transactionPane.paidOn")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.transactionPane.paidOn")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
-  }, renderDate(paymentAt)))), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, renderDate(paymentAt)))), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h3"
   }, "Splits"), /*#__PURE__*/React__default["default"].createElement(SubTable, {
     className: "ml-0 w-full",
@@ -4790,7 +4826,7 @@ var List$5 = function List(_ref) {
   if (!isStripeAccountConnected && dataSize <= 0 || !neetoCist.isPresent(data)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], {
       title: tab === TAB$4.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
         status: tab
       })
@@ -4802,7 +4838,7 @@ var List$5 = function List(_ref) {
   });
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     fixedHeight: true,
     allowRowClick: false,
     columnData: visibleColumns,
@@ -4906,8 +4942,8 @@ var Dashboard = function Dashboard(_ref) {
       placeholder: searchKeywordProps.placeholder,
       className: "w-80"
     }
-  })), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, null, tabs.map(function (item) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+  })), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(Tab__default["default"], null, tabs.map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement(Tab__default["default"].Item, {
       active: tab === item,
       key: item,
       onClick: function onClick() {
@@ -4916,7 +4952,7 @@ var Dashboard = function Dashboard(_ref) {
     }, t("neetoPayments.common.".concat(item)));
   })), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     className: "mt-4",
-    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
     }, tab === TAB$4.all ? t("neetoPayments.countOf.".concat(kind), {
@@ -5071,28 +5107,28 @@ var ExportModal = function ExportModal(_ref) {
   var onClose = function onClose() {
     return setShowExportModal(false);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Modal, {
+  return /*#__PURE__*/React__default["default"].createElement(Modal__default["default"], {
     onClose: onClose,
     isOpen: showExportModal
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Header, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Header, null, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h2"
-  }, t("neetoPayments.export.title.payout"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.export.title.payout"))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Body, null, isFileLoading ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.export.pleaseWait")) : /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.payout"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Modal.Footer, {
+  }, downloadUrl ? t("neetoPayments.export.fileReady") : t("neetoPayments.export.download.payout"))), /*#__PURE__*/React__default["default"].createElement(Modal__default["default"].Footer, {
     className: "space-x-2"
-  }, downloadUrl ? /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, downloadUrl ? /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: downloadUrl,
     icon: neetoIcons.Download,
     label: t("neetoPayments.common.download"),
     onClick: onClose
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isFileLoading,
     label: t("neetoPayments.common.export"),
     loading: isFileLoading,
     onClick: handleGenerateClick
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isFileLoading,
     label: t("neetoPayments.common.cancel"),
     style: "text",
@@ -5158,7 +5194,7 @@ var renderPayoutIdentifier$1 = ramda.curry(function (route, _ref) {
     id = _ref$id === void 0 ? "" : _ref$id;
   return /*#__PURE__*/React__default["default"].createElement(CopyButtonWrapper, {
     content: identifier
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     label: identifier,
     size: "small",
     style: "link",
@@ -5329,13 +5365,13 @@ var List$4 = function List(_ref) {
   if (dataSize <= 0 || !neetoCist.isPresent(payouts)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], {
       title: t("neetoPayments.emptyState.payouts.".concat(tab))
     }));
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     fixedHeight: true,
     allowRowClick: false,
     columnData: getVisibleColumnData(columnData),
@@ -5406,8 +5442,8 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
       placeholder: t("neetoPayments.common.search"),
       className: "w-80"
     }
-  }), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, null, TABS$3.map(function (item) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+  }), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(Tab__default["default"], null, TABS$3.map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement(Tab__default["default"].Item, {
       active: tab === item,
       key: item,
       onClick: function onClick() {
@@ -5416,7 +5452,7 @@ var PayoutsDashboard = function PayoutsDashboard(_ref) {
     }, t("neetoPayments.common.".concat(item)));
   })), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     className: "mt-4",
-    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
     }, tab === TAB$3.all ? t("neetoPayments.countOf.payout", {
@@ -5540,55 +5576,55 @@ var PayoutsPage = function PayoutsPage(_ref) {
     className: "w-full space-y-2"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.payoutId")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.payoutId")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, renderPayoutIdentifier(identifier, live))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.status")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.status")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, renderStatus("payout", status, {}))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.amount")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.amount")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, amount)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
   }, t("neetoPayments.payoutsPage.arrivalDate")), renderDate(arrivalDate)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.createdAt")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.createdAt")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, renderDate(createdAt))), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.destinationId")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.destinationId")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, destinationIdentifier)), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.automatic")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.automatic")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, isAutomatic ? t("neetoPayments.common.yes") : t("neetoPayments.common.no"))), neetoCist.isPresent(failureMessage) && /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex items-center space-x-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "body2"
-  }, t("neetoPayments.payoutsPage.failureMessage")), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, t("neetoPayments.payoutsPage.failureMessage")), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     className: "neeto-ui-text-black font-medium",
     style: "body2"
   }, failureMessage)))), isAutomatic && /*#__PURE__*/React__default["default"].createElement(Dashboard$1, _extends$1({}, isPlatformEnabled, {
@@ -5607,18 +5643,18 @@ var renderIdentifier$1 = function renderIdentifier() {
     identifier = _ref$identifier === void 0 ? "" : _ref$identifier;
   var isTemporaryIdentifier = identifier.startsWith("temp_");
   if (isTemporaryIdentifier) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+    return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
       content: i18next.t("neetoPayments.tooltipContent.paymentIdentifierUnavailable"),
       position: "top"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "text-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       style: "body2"
     }, i18next.t("neetoPayments.common.notAvailable"))));
   }
   return /*#__PURE__*/React__default["default"].createElement(CopyButtonWrapper, {
     content: identifier
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: "https://dashboard.razorpay.com/app/payments/".concat(identifier),
     label: identifier,
     size: "small",
@@ -5740,8 +5776,8 @@ var FilterWrapper = function FilterWrapper(_ref) {
       placeholder: searchKeywordProps.placeholder,
       className: "w-80"
     }
-  })), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(neetoui.Tab, null, tabs.map(function (item) {
-    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tab.Item, {
+  })), isTabsVisible && /*#__PURE__*/React__default["default"].createElement(Tab__default["default"], null, tabs.map(function (item) {
+    return /*#__PURE__*/React__default["default"].createElement(Tab__default["default"].Item, {
       active: tab === item,
       key: item,
       onClick: function onClick() {
@@ -5750,7 +5786,7 @@ var FilterWrapper = function FilterWrapper(_ref) {
     }, t("neetoPayments.common.".concat(item)));
   })), /*#__PURE__*/React__default["default"].createElement(SubHeader__default["default"], {
     className: "mt-4",
-    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+    leftActionBlock: neetoCist.isPresent(dataSize) && /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       className: "neeto-ui-gray-800 mr-2 font-semibold",
       component: "h4"
     }, tab === "all" ? t("neetoPayments.countOf.".concat(kind), {
@@ -5794,7 +5830,7 @@ var renderIdentifier = function renderIdentifier() {
     receiptUrl = _ref$receiptUrl === void 0 ? "" : _ref$receiptUrl;
   return /*#__PURE__*/React__default["default"].createElement(CopyButtonWrapper, {
     content: identifier
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     href: receiptUrl,
     label: identifier,
     size: "small",
@@ -5804,7 +5840,7 @@ var renderIdentifier = function renderIdentifier() {
 };
 var truncatedText = function truncatedText(_ref2) {
   var identifier = _ref2.identifier;
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+  return /*#__PURE__*/React__default["default"].createElement(Tooltip__default["default"], {
     content: identifier,
     position: "top"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -6132,7 +6168,7 @@ var List$3 = function List(_ref) {
   if (!(account !== null && account !== void 0 && account.isConnected) && views <= 0 || !neetoCist.isPresent(payments)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], {
       title: tab === TAB$2.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
         status: tab
       })
@@ -6140,7 +6176,7 @@ var List$3 = function List(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: views > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     fixedHeight: true,
     allowRowClick: false,
     columnData: visibleColumns,
@@ -6717,7 +6753,7 @@ var RazorpayPaymentButton = function RazorpayPaymentButton(_ref) {
     };
     createRazorpayOrder(payload);
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isLoading,
     label: label || t("neetoPayments.common.pay"),
     loading: isLoading,
@@ -6830,7 +6866,7 @@ var SquareCard = function SquareCard(_ref) {
       "pointer-events-none": disabled,
       "text-center": !card
     })
-  }, !card && /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null));
+  }, !card && /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null));
 };
 
 var TAB$1 = {
@@ -7018,7 +7054,7 @@ var List$2 = function List(_ref) {
   if (!(squareAccount !== null && squareAccount !== void 0 && squareAccount.isConnected) && dataSize <= 0 || !neetoCist.isPresent(data)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], {
       title: tab === TAB$1.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
         status: tab
       })
@@ -7026,7 +7062,7 @@ var List$2 = function List(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: dataSize > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     columnData: columnData,
     fixedHeight: true,
     allowRowClick: false,
@@ -7121,7 +7157,7 @@ var PaymentKindRestrictionAlert = function PaymentKindRestrictionAlert(_ref) {
     _ref$onClose = _ref.onClose,
     onClose = _ref$onClose === void 0 ? neetoCist.noop : _ref$onClose,
     otherProps = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, _extends$1({
+  return /*#__PURE__*/React__default["default"].createElement(Alert__default["default"], _extends$1({
     isOpen: isOpen,
     onClose: onClose,
     message: STRIPE_ALERT_PAYMENT_KIND_CONTENT[paymentKind].message,
@@ -7220,6 +7256,7 @@ var AccountForm = function AccountForm(_ref) {
     returnUrl = _ref.returnUrl;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isPolling = _useState2[0],
@@ -7267,7 +7304,7 @@ var AccountForm = function AccountForm(_ref) {
   if (isLoading) {
     return /*#__PURE__*/React__default["default"].createElement(PageLoader__default["default"], null);
   }
-  return /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  return /*#__PURE__*/React__default["default"].createElement(Form__default["default"], {
     formikProps: {
       enableReinitialize: true,
       initialValues: INITIAL_VALUES,
@@ -7276,18 +7313,23 @@ var AccountForm = function AccountForm(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Select, {
+  }, /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
     required: true,
     helpText: t("neetoPayments.integrationModal.form.helpText"),
     label: t("neetoPayments.integrationModal.form.label"),
     name: "country",
     options: buildCountryOptions(countries),
     placeholder: t("neetoPayments.integrationModal.form.placeholder")
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
-    disabled: isCreating || isPolling,
-    label: submitButtonLabel,
-    loading: isCreating || isPolling,
-    type: "submit"
+  }), /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
+    cancelButtonProps: {
+      onClick: function onClick() {
+        return history.goBack();
+      }
+    },
+    isSubmitting: isCreating || isPolling,
+    submitButtonProps: {
+      label: submitButtonLabel
+    }
   })));
 };
 
@@ -7301,22 +7343,22 @@ var AccountDetails = function AccountDetails(_ref) {
     t = _useTranslation.t;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "mb-6 space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     style: "h5",
     weight: "medium"
   }, t("neetoPayments.integrationModal.account.title")), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "grid grid-cols-4 gap-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "neeto-ui-text-gray-800"
-  }, t("neetoPayments.common.id")), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, t("neetoPayments.common.id")), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "neeto-ui-text-gray-800 col-span-3"
-  }, stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.identifier), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.identifier), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "neeto-ui-text-gray-800"
-  }, t("neetoPayments.common.email")), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, t("neetoPayments.common.email")), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "neeto-ui-text-gray-800 col-span-3"
-  }, stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.email), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.email), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "neeto-ui-text-gray-800"
-  }, t("neetoPayments.common.country")), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, t("neetoPayments.common.country")), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "neeto-ui-text-gray-800 col-span-3"
   }, stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.country)));
 };
@@ -7385,13 +7427,13 @@ var AccountProcessing = function AccountProcessing(_ref) {
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(AccountDetails, null), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex flex-col items-start space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isPolling,
     href: buildRefreshUrl(stripeAccount === null || stripeAccount === void 0 ? void 0 : stripeAccount.id, returnUrl),
     label: buttonLabel(),
     loading: isPolling,
     size: "small"
-  }), !isPolling && !isAccountProcessingFailed && /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  }), !isPolling && !isAccountProcessingFailed && /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     disabled: isStripeAccountDestroying || isPolling,
     label: t("neetoPayments.integrationModal.anotherAccount"),
     size: "small",
@@ -7399,7 +7441,7 @@ var AccountProcessing = function AccountProcessing(_ref) {
     onClick: function onClick() {
       return setIsAlertOpen(true);
     }
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+  })), /*#__PURE__*/React__default["default"].createElement(Alert__default["default"], {
     isOpen: isAlertOpen,
     title: t("neetoPayments.integrationModal.alert.changeTitle"),
     message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
@@ -7433,11 +7475,11 @@ var Configure = function Configure(_ref) {
     className: "mx-auto w-full max-w-lg space-y-8"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(SvgStripe, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgStripe, null), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "configure-payment-title",
     style: "h2",
     weight: "semibold"
-  }, t("neetoPayments.integrationModal.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, t("neetoPayments.integrationModal.title")), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "leading-snug"
   }, connectDescription)), neetoCist.isPresent(stripeAccount) ? /*#__PURE__*/React__default["default"].createElement(AccountProcessing, {
     onAccountCreated: handleStripeAccountCreated,
@@ -9081,29 +9123,29 @@ var Connect = function Connect(_ref) {
     className: "mx-auto w-full max-w-lg space-y-8"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-2"
-  }, /*#__PURE__*/React__default["default"].createElement(SvgStripe, null), /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgStripe, null), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
     "data-cy": "configure-payment-title",
     style: "h2",
     weight: "semibold"
-  }, t("neetoPayments.integrationModal.title")), /*#__PURE__*/React__default["default"].createElement(neetoui.Label, {
+  }, t("neetoPayments.integrationModal.title")), /*#__PURE__*/React__default["default"].createElement(Label__default["default"], {
     className: "leading-snug"
-  }, t("neetoPayments.integrationModal.subtitle"))), /*#__PURE__*/React__default["default"].createElement(neetoui.Radio, {
+  }, t("neetoPayments.integrationModal.subtitle"))), /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], {
     stacked: true,
     value: selectedOption,
     onChange: function onChange(event) {
       return setSelectedOption(event.target.value);
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Radio.Item, {
+  }, /*#__PURE__*/React__default["default"].createElement(Radio__default["default"].Item, {
     className: "neeto-ui-border-black w-96 py-2",
     label: t("neetoPayments.integrationModal.createAccount"),
     name: "accountMethod",
     value: INTEGRATION_METHOD.createNewAccount
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Radio.Item, {
+  }), /*#__PURE__*/React__default["default"].createElement(Radio__default["default"].Item, {
     className: "neeto-ui-border-black w-96 py-2",
     label: t("neetoPayments.integrationModal.connectAccount"),
     name: "accountMethod",
     value: INTEGRATION_METHOD.useExistingAccount
-  })), /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  })), /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     label: t("neetoPayments.common.continue"),
     onClick: handleSubmit
   }));
@@ -9175,13 +9217,15 @@ var StripeConnect = function StripeConnect(_ref) {
 };
 
 var VALIDATION_SCHEMA$1 = yup__namespace.object({
-  upiId: yup__namespace.string().matches(/^[a-zA-Z0-9.-]{2,256}@[a-zA-Z0-9][a-zA-Z0-9-]{1,63}$/, i18next.t("neetoPayments.upi.form.validation.invalidUpi")).required(i18next.t("neetoPayments.upi.form.validation.required"))
+  upiId: yup__namespace.string().matches(/^[a-zA-Z0-9.-]{2,256}@[a-zA-Z][a-zA-Z]{2,64}$/, i18next.t("neetoPayments.upi.form.validation.invalidUpi")).required(i18next.t("neetoPayments.upi.form.validation.required"))
 });
 
-var Add = reactUtils.withT(function (_ref) {
-  var t = _ref.t,
-    handleCreateUpiId = _ref.handleCreateUpiId;
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+var Add = function Add(_ref) {
+  var handleCreateUpiId = _ref.handleCreateUpiId;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var history = reactRouterDom.useHistory();
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Form__default["default"], {
     formikProps: {
       initialValues: {
         upiId: ""
@@ -9191,15 +9235,22 @@ var Add = reactUtils.withT(function (_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "space-y-3"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     className: "w-64",
-    label: t("neetoPayments.common.upiId"),
-    name: "upiId"
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Button, {
-    label: t("neetoPayments.upi.form.add"),
-    type: "submit"
+    label: t("neetoPayments.upi.form.enterUpi"),
+    name: "upiId",
+    placeholder: t("neetoPayments.upi.form.enterUpi")
+  }), /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
+    cancelButtonProps: {
+      onClick: function onClick() {
+        return history.goBack();
+      }
+    },
+    submitButtonProps: {
+      label: t("neetoPayments.upi.form.add")
+    }
   }))));
-});
+};
 
 var getColumnData = function getColumnData(handleDeleteClick) {
   return [{
@@ -9210,7 +9261,7 @@ var getColumnData = function getColumnData(handleDeleteClick) {
     render: function render(_, upiId) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "flex items-center justify-between gap-3"
-      }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         className: "w-4/5",
         style: "body2"
       }, upiId.address), /*#__PURE__*/React__default["default"].createElement(MoreDropdown__default["default"], {
@@ -9262,10 +9313,10 @@ var List$1 = function List(_ref) {
   if (ramda.isEmpty(upiIds)) {
     return null;
   }
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     columnData: getColumnData(handleOpenDeleteModal),
     rowData: upiIds
-  }), /*#__PURE__*/React__default["default"].createElement(neetoui.Alert, {
+  }), /*#__PURE__*/React__default["default"].createElement(Alert__default["default"], {
     isOpen: isAlertOpen,
     title: t("neetoPayments.upi.alert.title"),
     message: /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
@@ -9293,14 +9344,10 @@ var UpiConnect = function UpiConnect(_ref) {
     handleDeleteUpiId = _ref$handleDeleteUpiI === void 0 ? neetoCist.noop : _ref$handleDeleteUpiI,
     _ref$handleCreateUpiI = _ref.handleCreateUpiId,
     handleCreateUpiId = _ref$handleCreateUpiI === void 0 ? neetoCist.noop : _ref$handleCreateUpiI;
-  var _useTranslation = reactI18next.useTranslation(),
-    t = _useTranslation.t;
-  if (isLoading) return /*#__PURE__*/React__default["default"].createElement(neetoui.Spinner, null);
+  if (isLoading) return /*#__PURE__*/React__default["default"].createElement(Spinner__default["default"], null);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "flex w-full max-w-3xl flex-col items-start space-y-6"
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
-    style: "h2"
-  }, t("neetoPayments.common.upiIds")), /*#__PURE__*/React__default["default"].createElement(Add, {
+  }, /*#__PURE__*/React__default["default"].createElement(Add, {
     handleCreateUpiId: handleCreateUpiId
   }), /*#__PURE__*/React__default["default"].createElement(List$1, {
     handleDeleteUpiId: handleDeleteUpiId,
@@ -9352,7 +9399,7 @@ var UpiMarkAsPaidButton = function UpiMarkAsPaidButton(_ref) {
       payableId: payableId
     });
   };
-  return /*#__PURE__*/React__default["default"].createElement(neetoui.Button, {
+  return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
     label: t("neetoPayments.upi.payment.buttons.markAsPaid"),
     loading: isLoading,
     onClick: handleClick
@@ -9363,11 +9410,15 @@ var VALIDATION_SCHEMA = yup__namespace.object({
   transactionId: yup__namespace.string().required(i18next.t("neetoPayments.upi.payment.transaction.required")).min(6, i18next.t("neetoPayments.upi.payment.transaction.sixCharacters")).max(6, i18next.t("neetoPayments.upi.payment.transaction.sixCharacters"))
 });
 
+var vpaIdToQrCodeValue = function vpaIdToQrCodeValue(vpaId) {
+  return "upi://pay?pa=".concat(vpaId);
+};
+
 function ownKeys$2(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$2(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$2(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$2(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var UpiPayment = function UpiPayment(_ref) {
-  var _ref$vpas = _ref.vpas,
-    vpas = _ref$vpas === void 0 ? [] : _ref$vpas,
+  var _ref$fee = _ref.fee,
+    fee = _ref$fee === void 0 ? {} : _ref$fee,
     _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? neetoCist.noop : _ref$onSubmit,
     _ref$onBackClick = _ref.onBackClick,
@@ -9375,7 +9426,7 @@ var UpiPayment = function UpiPayment(_ref) {
     payableId = _ref.payableId;
   var _useTranslation = reactI18next.useTranslation(),
     t = _useTranslation.t;
-  var vpaIds = ramda.pluck("address", vpas).join(" ");
+  var vpaIds = ramda.pluck("address", fee === null || fee === void 0 ? void 0 : fee.vpas);
   var _useCreateUpiPayment = useCreateUpiPayment({}),
     createPayment = _useCreateUpiPayment.mutate;
   var handleSubmit = function handleSubmit(values) {
@@ -9385,7 +9436,7 @@ var UpiPayment = function UpiPayment(_ref) {
     createPayment(payload);
     onSubmit(values);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(formik.Form, {
+  return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Form__default["default"], {
     className: "space-y-4",
     formikProps: {
       onSubmit: handleSubmit,
@@ -9394,29 +9445,41 @@ var UpiPayment = function UpiPayment(_ref) {
       },
       validationSchema: VALIDATION_SCHEMA
     }
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, null, /*#__PURE__*/React__default["default"].createElement(reactI18next.Trans, {
-    components: {
-      b: /*#__PURE__*/React__default["default"].createElement("strong", null)
-    },
-    values: {
-      vpaIds: vpaIds
-    },
-    i18nKey: vpas.length > 1 ? "neetoPayments.upi.payment.vpasText" : "neetoPayments.upi.payment.vpaText"
-  })), /*#__PURE__*/React__default["default"].createElement(formik.Input, {
+  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+    style: "body1"
+  }, t("neetoPayments.upi.payment.vpaText", {
+    count: vpaIds.length
+  })), neetoCist.isPresent(vpaIds) && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "grid grid-cols-1 gap-8 gap-y-4 sm:grid-cols-2"
+  }, vpaIds.map(function (vpaId) {
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "flex flex-col items-center justify-center",
+      key: vpaId
+    }, /*#__PURE__*/React__default["default"].createElement(QRCodeImage__default["default"], {
+      size: 256,
+      style: {
+        width: 80,
+        height: 80
+      },
+      value: vpaIdToQrCodeValue(vpaId)
+    }), /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+      className: "mt-2 w-full break-words text-center",
+      style: "body2"
+    }, vpaId));
+  })), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
     required: true,
     label: t("neetoPayments.upi.payment.transaction.label"),
     name: "transactionId",
     placeholder: t("neetoPayments.upi.payment.transaction.placeholder")
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "flex space-x-4"
-  }, /*#__PURE__*/React__default["default"].createElement(formik.Button, {
-    label: t("neetoPayments.upi.payment.buttons.submit"),
-    type: "submit"
-  }), /*#__PURE__*/React__default["default"].createElement(formik.Button, {
-    label: t("neetoPayments.upi.payment.buttons.back"),
-    style: "secondary",
-    onClick: onBackClick
-  }))));
+  }), /*#__PURE__*/React__default["default"].createElement(ActionBlock__default["default"], {
+    cancelButtonProps: {
+      label: t("neetoPayments.upi.payment.buttons.back"),
+      onClick: onBackClick
+    },
+    submitButtonProps: {
+      label: t("neetoPayments.upi.payment.buttons.submit")
+    }
+  })));
 };
 
 var TAB = {
@@ -9590,7 +9653,7 @@ var List = function List(_ref) {
   if (!neetoCist.isPresent(payments)) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "flex h-full w-full items-center justify-center"
-    }, /*#__PURE__*/React__default["default"].createElement(neetoui.NoData, {
+    }, /*#__PURE__*/React__default["default"].createElement(NoData__default["default"], {
       title: tab === TAB.all ? t("neetoPayments.emptyState.".concat(kind)) : t("neetoPayments.emptyState.".concat(kind, "WithStatus"), {
         status: tab
       })
@@ -9598,7 +9661,7 @@ var List = function List(_ref) {
   }
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper__default["default"], {
     hasPagination: views > ((_pageProperties$tab = pageProperties[tab]) === null || _pageProperties$tab === void 0 ? void 0 : _pageProperties$tab.pageSize)
-  }, /*#__PURE__*/React__default["default"].createElement(neetoui.Table, {
+  }, /*#__PURE__*/React__default["default"].createElement(Table__default["default"], {
     fixedHeight: true,
     allowRowClick: false,
     columnData: visibleColumns,