@bunnyapp/components 1.0.73-beta.9 → 1.0.76

package/dist/cjs/index.js

@@ -154,7 +154,7 @@ var BrandContext = react.createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.73-beta.9';
+var PACKAGE_VERSION = '1.0.75';
 var createRequestHeaders = function (token) {
     var headers = common.createClientDevHeaders(token);
     // Add the components version header
@@ -19779,31 +19779,31 @@ var StateTag = function (_a) {
     if (transactionStateRenderer) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactionStateRenderer(state) });
     }
-    return jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
+    return (jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
 };
 var getColor = function (state) {
     switch (state) {
-        case common.TransactionState.not_due:
-            return 'yellow';
-        case common.TransactionState.voided:
-            return 'black';
-        case common.TransactionState.ready:
-            return 'orange';
-        case common.TransactionState.preparing:
-            return 'purple';
-        case common.TransactionState.unapplied:
-        case common.TransactionState.partially_applied:
-        case common.TransactionState.applied:
-            return 'blue';
-        case common.TransactionState.due:
-        case common.TransactionState.unpaid:
-            return 'orange';
-        case common.TransactionState.failed:
-            return 'red';
-        case common.TransactionState.paid:
-            return 'green';
+        case common.FrontendTransaction.TransactionState.not_due:
+            return "yellow";
+        case common.FrontendTransaction.TransactionState.voided:
+            return "black";
+        case common.FrontendTransaction.TransactionState.ready:
+            return "orange";
+        case common.FrontendTransaction.TransactionState.preparing:
+            return "purple";
+        case common.FrontendTransaction.TransactionState.unapplied:
+        case common.FrontendTransaction.TransactionState.partially_applied:
+        case common.FrontendTransaction.TransactionState.applied:
+            return "blue";
+        case common.FrontendTransaction.TransactionState.due:
+        case common.FrontendTransaction.TransactionState.unpaid:
+            return "orange";
+        case common.FrontendTransaction.TransactionState.failed:
+            return "red";
+        case common.FrontendTransaction.TransactionState.paid:
+            return "green";
         default:
-            return 'blue';
+            return "blue";
     }
 };
 
@@ -19824,7 +19824,7 @@ var TransactionDownload = function (_a) {
     var downloadTransactionLink = react.useContext(TransactionsListContext).downloadTransactionLink;
     var downloadFile = useDownloadFile();
     var isMobile = common.useIsMobile();
-    var isClickable = transaction.kind === 'INVOICE' || downloadTransactionLink !== undefined;
+    var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
     var downloadLink = downloadTransactionLink
         ? downloadTransactionLink(transaction.transactionableId)
         : "".concat(apiHost, "/api/pdf/invoice/").concat(transaction.transactionableId);
@@ -19833,7 +19833,7 @@ var TransactionDownload = function (_a) {
     return (jsxRuntime.jsx("div", __assign({ onClick: function (e) {
             e.stopPropagation();
             downloadFile(downloadLink, token);
-        } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? '' : 'bunny-show-on-hover'), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
+        } }, { children: jsxRuntime.jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "bunny-show-on-hover"), color: darkMode ? common.WHITE : common.SLATE_600 }) })));
 };
 
 var TransactionGridCell = defaultStyled.div.withConfig({
@@ -19855,25 +19855,29 @@ var TransactionsEmptyState = function () {
 
 var Text$k = antd.Typography.Text;
 var isInvoice = function (transaction) {
-    return transaction.kind === 'INVOICE';
+    return transaction.kind === "INVOICE";
+};
+var isQuote = function (transaction) {
+    return transaction.kind === "QUOTE";
 };
 var TransactionRowTitle = function (_a) {
     var transaction = _a.transaction;
-    if (!isInvoice(transaction)) {
+    if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, {});
     }
-    return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
+    return (jsxRuntime.jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 
 function transactionDateToDisplay(transaction, transactionDateType) {
-    if (transaction.kind === common.TransactionKind.PAYMENT) {
+    var _a, _b;
+    if (transaction.kind === "PAYMENT") {
         return transaction.createdAt;
     }
-    else if (transaction.kind !== common.TransactionKind.REFUND && transactionDateType === 'dueAt') {
-        return transaction.transactionable.dueAt || '';
+    else if (transaction.kind !== "REFUND" && transactionDateType === "dueAt") {
+        return (_a = transaction.transactionable) === null || _a === void 0 ? void 0 : _a.dueAt;
     }
-    else if (transactionDateType === 'issuedAt') {
-        return transaction.transactionable.issuedAt || '';
+    else if (transactionDateType === "issuedAt") {
+        return (_b = transaction.transactionable) === null || _b === void 0 ? void 0 : _b.issuedAt;
     }
     else {
         return transaction.createdAt;
@@ -19887,29 +19891,29 @@ var TransactionsListDesktop = function (_a) {
     var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
     // Columns to show
-    var showDate = columns.includes('date');
-    var showTitle = columns.includes('title');
-    var showAccountName = columns.includes('accountName');
-    var showDownload = columns.includes('download');
-    var showAmount = columns.includes('amount');
-    var showState = columns.includes('state');
+    var showDate = columns.includes("date");
+    var showTitle = columns.includes("title");
+    var showAccountName = columns.includes("accountName");
+    var showDownload = columns.includes("download");
+    var showAmount = columns.includes("amount");
+    var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsxRuntime.jsx(TransactionsEmptyState, {});
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
             var _a, _b;
             var isClickable = onTransactionClick !== undefined;
-            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
+            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
                     onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
                 }, style: {
                     backgroundColor: index % 2 === 0
-                        ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
-                        : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
+                        ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                        : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
                 } }, { children: [!showDate &&
                         !showTitle &&
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsxRuntime.jsx(TransactionGridCell, { right: false }), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+                        !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsxRuntime.jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: false }, { children: jsxRuntime.jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsxRuntime.jsx(TransactionGridCell, { right: false })), showDownload && (jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(Text$j, { children: common.formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
         }) }));
 };
 
@@ -19919,24 +19923,25 @@ var TransactionsListMobile = function (_a) {
     var _b = react.useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
     var _c = react.useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
-    var showAmount = columns.includes('amount');
-    var showDate = columns.includes('date');
-    var showTitle = columns.includes('title');
-    var showAccountName = columns.includes('accountName');
-    var showDownload = columns.includes('download');
-    var showState = columns.includes('state');
+    var showAmount = columns.includes("amount");
+    var showDate = columns.includes("date");
+    var showTitle = columns.includes("title");
+    var showAccountName = columns.includes("accountName");
+    var showDownload = columns.includes("download");
+    var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsxRuntime.jsx(TransactionsEmptyState, {});
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
             var _a;
-            var isClickable = transaction.kind === 'INVOICE';
-            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
+            var isClickable = transaction.kind === "INVOICE";
+            return (jsxRuntime.jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
                     onTransactionClick(transaction);
                 }, style: {
                     backgroundColor: index % 2 === 0
-                        ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
-                        : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
-                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
+                        ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                        : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+                } }, { children: [jsxRuntime.jsx(TransactionGridCell, { children: jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsxRuntime.jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsxRuntime.jsx(StateTag, { state: transaction.state })] }))), jsxRuntime.jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsxRuntime.jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showDate && (jsxRuntime.jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsxRuntime.jsx(Text$i, { children: "\u00B7" }), showAmount && (jsxRuntime.jsx(Text$i, { children: common.formatCurrency(transaction.transactionable.amount ||
+                                                transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsxRuntime.jsx(TransactionGridCell, __assign({ right: true }, { children: jsxRuntime.jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
 
@@ -20066,9 +20071,9 @@ function TransactionsDisplay(_a) {
 }
 
 function Quotes(_a) {
-    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ['date', 'title', 'amount', 'download', 'state'] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
+    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date", "title", "amount", "download", "state"] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
         return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-    } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? 'There are no quotes' : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? 'shadow-md' : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? 'Past quotes' : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
+    } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? "There are no quotes" : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? "shadow-md" : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? "Past quotes" : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
     var apiHost = react.useContext(BunnyContext).apiHost;
     var _l = react.useState(null), component = _l[0], setComponent = _l[1];
     var contextValues = {
@@ -20094,27 +20099,27 @@ function Quotes(_a) {
         filterTransactions: filterQuotes,
         sortTransactions: sort,
         downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
-        transactionDateType: 'createdAt', // Required for the transactions list, but doesn't affect quotes
+        transactionDateType: "createdAt", // Required for the transactions list, but doesn't affect quotes
     };
     function quoteStateRenderer(state) {
         var getColor = function (state) {
             switch (state) {
-                case 'ACCEPTED':
-                    return 'green';
-                case 'IN_APPROVAL':
-                    return 'orange';
-                case 'APPROVED':
-                    return 'green';
-                case 'REJECTED':
-                    return 'red';
-                case 'DRAFT':
-                case 'SHARED':
-                case 'VIEWED':
+                case "ACCEPTED":
+                    return "green";
+                case "IN_APPROVAL":
+                    return "orange";
+                case "APPROVED":
+                    return "green";
+                case "REJECTED":
+                    return "red";
+                case "DRAFT":
+                case "SHARED":
+                case "VIEWED":
                 default:
-                    return 'blue';
+                    return "blue";
             }
         };
-        return jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
+        return (jsxRuntime.jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
     }
     function handleQuoteClick(quote) {
         onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
@@ -20132,11 +20137,11 @@ function QuotesWrapper() {
     var token = useToken();
     var filterFromContext = react.useContext(TransactionsListContext).filter;
     // Local state
-    var _a = react.useState(''), search = _a[0], setSearch = _a[1];
-    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : '');
+    var _a = react.useState(""), search = _a[0], setSearch = _a[1];
+    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
     // Queries
     var data = reactQuery.useQuery({
-        queryKey: ['quotes', token, filter],
+        queryKey: ["quotes", token, filter],
         queryFn: function () { return getQuotes({ token: token, apiHost: apiHost, filter: filter }); },
         placeholderData: reactQuery.keepPreviousData,
     }).data;
@@ -20144,7 +20149,7 @@ function QuotesWrapper() {
         return null;
     // filter out quotes in draft state, they are not viewable
     var quotes = data.nodes.filter(function (quote) {
-        return quote.state !== 'DRAFT';
+        return quote.state !== "DRAFT";
     });
     var quotesAsTransactions = quotes.map(function (quote) {
         var _a, _b;
@@ -20152,7 +20157,7 @@ function QuotesWrapper() {
             transactionableId: quote.id,
             state: quote.state,
             amount: quote.amount || quote.amountDue,
-            kind: 'QUOTE',
+            kind: "QUOTE",
             currencyId: quote.currencyId,
             transactionable: {
                 number: quote.number,

package/dist/cjs/src/components/PaymentForm/CheckoutFooter.d.ts

@@ -1,7 +1,7 @@
-import { FormattedInvoice, Invoice, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PluginData, Quote } from '@bunnyapp/common';
 declare const CheckoutFooter: ({ quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, plugin, paymentHoldOptions, }: {
     quote?: Quote | undefined;
-    invoice?: FormattedInvoice | Invoice | undefined;
+    invoice?: FormattedInvoice | undefined;
     onPaymentSuccess?: ((response: any) => void) | undefined;
     onPaymentHoldSuccess?: ((response: any) => void) | undefined;
     plugin: PluginData | undefined;

package/dist/cjs/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts

@@ -1,9 +1,9 @@
-import { FormattedInvoice, Invoice, PaymentMethod, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PaymentMethod, PluginData, Quote } from '@bunnyapp/common';
 export declare function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymentMethod, plugin, }: {
     onPaymentSuccess?: (response: any) => void;
     onPaymentError?: (error: any) => void;
     quote?: Quote;
-    invoice?: FormattedInvoice | Invoice;
+    invoice?: FormattedInvoice;
     storedPaymentMethod?: PaymentMethod;
     plugin: PluginData | undefined;
 }): {

package/dist/cjs/src/components/PaymentForm/PaymentForm.d.ts

@@ -1,6 +1,6 @@
-import { FormattedInvoice, Invoice, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PluginData, Quote } from '@bunnyapp/common';
 export declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, onPaymentHoldSuccess, quote, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, entityId, overrideToken, customCheckoutFunction, currencyId: currencyIdFromProps, paymentHoldOptions, }: {
-    invoice?: FormattedInvoice | Invoice | undefined;
+    invoice?: FormattedInvoice | undefined;
     quote?: Quote | undefined;
     onFail: (error: any) => void;
     onPaymentSuccess?: (() => void) | undefined;

package/dist/cjs/src/components/PaymentForm/Stripe/hooks/usePay.d.ts

@@ -1,9 +1,9 @@
-import { FormattedInvoice, Invoice, PaymentMethod, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PaymentMethod, PluginData, Quote } from "@bunnyapp/common";
 export declare function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymentMethod, plugin, }: {
     onPaymentSuccess?: (response: any) => void;
     onPaymentError?: (error: any) => void;
     quote?: Quote;
-    invoice?: FormattedInvoice | Invoice;
+    invoice?: FormattedInvoice;
     storedPaymentMethod?: PaymentMethod;
     plugin: PluginData | undefined;
 }): {

package/dist/cjs/src/components/Quotes/Quotes.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Transaction } from '@bunnyapp/common';
-import { ShadowType } from '../../types/shadowType';
-import { TransactionListColumnType } from '../Transactions/transactionsList/TransactionsListDesktop';
+import { FrontendTransaction as T } from "@bunnyapp/common";
+import { ShadowType } from "../../types/shadowType";
+import { TransactionListColumnType } from "../Transactions/transactionsList/TransactionsListDesktop";
 declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, quoteComponent, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
     /** A custom component to render instead of the default invoice component */
     quoteComponent?: React.ReactNode;
@@ -22,7 +22,7 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     /** A custom class name to apply to the search bar */
     searchBarClassName?: string;
     /** A function to call when a quote is clicked */
-    onQuoteClick?: (quote: Transaction) => void;
+    onQuoteClick?: (quote: T.Transaction) => void;
     /** Whether to hide the display showing the quote */
     suppressQuoteDisplay?: boolean;
     /** A custom style to apply to the component */
@@ -30,9 +30,9 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     /** A filter to apply to the quotes. Docs on filter: https://docs.bunny.com/developer/getting-started/using-filters-in-queries */
     filter?: string;
     /** A function to filter the quotes. Runs on the client side. */
-    filterQuotes?: (quote: Transaction) => boolean;
+    filterQuotes?: (quote: T.Transaction) => boolean;
     /** A function to sort the quotes. Runs on the client side. */
-    sort?: (a: Transaction, b: Transaction) => number;
+    sort?: (a: T.Transaction, b: T.Transaction) => number;
     /** Message to display when there are no quotes */
     noQuotesMessage?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/components/Quotes/Quotes.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Quotes from './Quotes';
+import type { Meta, StoryObj } from "@storybook/react";
+import Quotes from "./Quotes";
 declare const meta: Meta<typeof Quotes>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/cjs/src/components/Transactions/Transactions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Transaction, TransactionKind } from '@bunnyapp/common';
+import { FrontendTransaction as T, TransactionKind } from '@bunnyapp/common';
 import { ShadowType } from '../../types/shadowType';
 import { TransactionListColumnType } from './transactionsList/TransactionsListDesktop';
 import { TransactionDateType } from './TransactionsListContext';
@@ -23,7 +23,7 @@ export default function Transactions({ transactionComponent, showSearchBar, show
     /** A custom class name to apply to the search bar */
     searchBarClassName?: string;
     /** A function to call when a transaction is clicked */
-    onTransactionClick?: (transaction: Transaction) => void;
+    onTransactionClick?: (transaction: T.Transaction) => void;
     /** Whether to hide the display showing the transaction */
     suppressTransactionDisplay?: boolean;
     /** The kinds of transactions to show */
@@ -40,14 +40,14 @@ export default function Transactions({ transactionComponent, showSearchBar, show
      * Filtering is applied on the client side.
      * This is useful to have more control over the filtering logic.
      */
-    filterTransactions?: (transaction: Transaction) => boolean;
+    filterTransactions?: (transaction: T.Transaction) => boolean;
     /** A function to sort the transactions. Runs on the client side. */
-    sortTransactions?: (transactionA: Transaction, transactionB: Transaction) => number;
+    sortTransactions?: (transactionA: T.Transaction, transactionB: T.Transaction) => number;
     /** The type of date to display for transactions if applicable. Payments will always only show createdAt date. */
     transactionDateType?: TransactionDateType;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function TransactionsDisplay({ transactions, onSearchValueChanged, search, }: {
-    transactions: Transaction[];
+    transactions: T.Transaction[];
     onSearchValueChanged: (value: string) => void;
     search: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/components/Transactions/TransactionsListContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Transaction, TransactionKind } from '@bunnyapp/common';
-import { ShadowType } from '../../types/shadowType';
-import { TransactionListColumnType } from './transactionsList/TransactionsListDesktop';
+import { FrontendTransaction as T, TransactionKind } from "@bunnyapp/common";
+import { ShadowType } from "../../types/shadowType";
+import { TransactionListColumnType } from "./transactionsList/TransactionsListDesktop";
 export type TransactionsContextValues = {
     showSearchBar?: boolean;
     showTitle?: boolean;
@@ -13,17 +13,17 @@ export type TransactionsContextValues = {
     shadow?: ShadowType;
     searchBarClassName?: string;
     useModal?: boolean;
-    onTransactionClick?: (transaction: Transaction) => void;
-    onTransactionDisplayClose?: (transaction: Transaction | null) => void;
+    onTransactionClick?: (transaction: T.Transaction) => void;
+    onTransactionDisplayClose?: (transaction: T.Transaction | null) => void;
     suppressTransactionDisplay?: boolean;
     kindsToShow?: TransactionKind[];
     style?: React.CSSProperties;
     filter?: string;
     noTransactionsMessage?: string;
     downloadTransactionLink?: (id: string) => string;
-    filterTransactions?: (transaction: Transaction) => boolean;
-    sortTransactions?: (transactionA: Transaction, transactionB: Transaction) => number;
+    filterTransactions?: (transaction: T.Transaction) => boolean;
+    sortTransactions?: (transactionA: T.Transaction, transactionB: T.Transaction) => number;
     transactionDateType: TransactionDateType;
 };
-export type TransactionDateType = 'createdAt' | 'issuedAt' | 'dueAt';
+export type TransactionDateType = "createdAt" | "issuedAt" | "dueAt";
 export declare const TransactionsListContext: import("react").Context<TransactionsContextValues>;

package/dist/cjs/src/components/Transactions/transactionsList/TransactionDownload.d.ts

@@ -1,6 +1,6 @@
-import { Transaction } from '@bunnyapp/common';
+import { FrontendTransaction as T } from "@bunnyapp/common";
 declare const TransactionDownload: ({ transaction, token, apiHost, }: {
-    transaction: Transaction;
+    transaction: T.Transaction;
     token?: string | undefined;
     apiHost: string;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/src/components/Transactions/transactionsList/TransactionTitle.d.ts

@@ -1,5 +1,5 @@
-import { Transaction } from '@bunnyapp/common';
-declare const TransactionRowTitle: ({ transaction }: {
-    transaction: Transaction;
+import { FrontendTransaction as T } from "@bunnyapp/common";
+declare const TransactionRowTitle: ({ transaction, }: {
+    transaction: T.Transaction;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TransactionRowTitle;

package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts

@@ -1,7 +1,7 @@
-import { Transaction } from '@bunnyapp/common';
-export type TransactionListColumnType = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
+import { FrontendTransaction as T } from "@bunnyapp/common";
+export type TransactionListColumnType = "date" | "title" | "state" | "amount" | "download" | "accountName";
 declare const TransactionsListDesktop: ({ transactions, onTransactionClick, }: {
-    transactions: Transaction[];
-    onTransactionClick?: ((transaction: Transaction) => void) | undefined;
+    transactions: T.Transaction[];
+    onTransactionClick?: ((transaction: T.Transaction) => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TransactionsListDesktop;

package/dist/cjs/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts

@@ -1,6 +1,6 @@
-import { Transaction } from '@bunnyapp/common';
+import { FrontendTransaction as T } from "@bunnyapp/common";
 declare const TransactionsListMobile: ({ transactions, onTransactionClick, }: {
-    transactions: Transaction[];
-    onTransactionClick: (transaction: Transaction) => void;
+    transactions: T.Transaction[];
+    onTransactionClick: (transaction: T.Transaction) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TransactionsListMobile;

package/dist/cjs/src/components/Transactions/transactionsList/utils.d.ts

@@ -1,3 +1,3 @@
-import { Transaction } from '@bunnyapp/common';
-import { TransactionDateType } from '../TransactionsListContext';
-export declare function transactionDateToDisplay(transaction: Transaction, transactionDateType: TransactionDateType): string;
+import { FrontendTransaction as T } from "@bunnyapp/common";
+import { TransactionDateType } from "../TransactionsListContext";
+export declare function transactionDateToDisplay(transaction: T.Transaction, transactionDateType: TransactionDateType): any;

package/dist/cjs/src/graphql/queries/getTransactions.d.ts

@@ -1,3 +1,3 @@
-import { Transaction } from '@bunnyapp/common';
-declare const getTransactions: (filter: string, apiHost: string, token?: string) => Promise<Transaction[]>;
+import { FrontendTransaction as T } from '@bunnyapp/common';
+declare const getTransactions: (filter: string, apiHost: string, token?: string) => Promise<T.Transaction[]>;
 export default getTransactions;

package/dist/esm/index.js

@@ -4,7 +4,7 @@ import { Markup } from 'interweave';
 import { ConfigProvider, Spin, Button, Tag, Typography, Dropdown, Input, Checkbox, Skeleton, Collapse, Modal, Form, Tooltip, Drawer, Card as Card$1, Divider, Select, Image, Radio, Space, Popconfirm, Table } from 'antd';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CheckCircleFilled, CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 import styled from 'styled-components';
-import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, request as request$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, sortSubscriptionCharges, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
+import { DEFAULT_ACCENT_COLOR, DEFAULT_BRAND_COLOR, DEFAULT_SECONDARY_COLOR, DEFAULT_TOP_NAV_IMAGE_URL, gqlRequest as gqlRequest$1, createClientDevHeaders, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory, useIsMobile, isColorTooDark, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, useErrorNotification, invokePlugin, useAllErrorFormats, formatCurrency, GRAY_500, GRAY_200, useSuccessNotification, getFormattedInvoice, PAYABLE_INVOICE_STATES, BreakpointNumbers, request as request$1, useGraphQLmutation, useInfoNotification, formatDate, FrontendTransaction, SLATE_600, WHITE, TransactionKind, SLATE_500, PRIMARY_COLOR, Lists, sortSubscriptionCharges, getAccount, StringUtils, BillingPeriod, ChargeType, SubscriptionState as SubscriptionState$2, PERIOD_LABELS, PricingStyle, PricingModel, SLATE_100, MODAL_MAX_HEIGHT, DataInterval, QuoteChangeKind, TAG_COLORS } from '@bunnyapp/common';
 import { QueryClient, QueryClientProvider, useQuery, useQueryClient, useMutation, keepPreviousData } from '@tanstack/react-query';
 import theme from 'antd/lib/theme/index.js';
 import { RecoilRoot } from 'recoil';
@@ -143,7 +143,7 @@ var BrandContext = createContext({
 });
 
 // This will be replaced at build time by rollup-plugin-replace
-var PACKAGE_VERSION = '1.0.73-beta.9';
+var PACKAGE_VERSION = '1.0.75';
 var createRequestHeaders = function (token) {
     var headers = createClientDevHeaders(token);
     // Add the components version header
@@ -19768,31 +19768,31 @@ var StateTag = function (_a) {
     if (transactionStateRenderer) {
         return jsx(Fragment, { children: transactionStateRenderer(state) });
     }
-    return jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
+    return (jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
 };
 var getColor = function (state) {
     switch (state) {
-        case TransactionState.not_due:
-            return 'yellow';
-        case TransactionState.voided:
-            return 'black';
-        case TransactionState.ready:
-            return 'orange';
-        case TransactionState.preparing:
-            return 'purple';
-        case TransactionState.unapplied:
-        case TransactionState.partially_applied:
-        case TransactionState.applied:
-            return 'blue';
-        case TransactionState.due:
-        case TransactionState.unpaid:
-            return 'orange';
-        case TransactionState.failed:
-            return 'red';
-        case TransactionState.paid:
-            return 'green';
+        case FrontendTransaction.TransactionState.not_due:
+            return "yellow";
+        case FrontendTransaction.TransactionState.voided:
+            return "black";
+        case FrontendTransaction.TransactionState.ready:
+            return "orange";
+        case FrontendTransaction.TransactionState.preparing:
+            return "purple";
+        case FrontendTransaction.TransactionState.unapplied:
+        case FrontendTransaction.TransactionState.partially_applied:
+        case FrontendTransaction.TransactionState.applied:
+            return "blue";
+        case FrontendTransaction.TransactionState.due:
+        case FrontendTransaction.TransactionState.unpaid:
+            return "orange";
+        case FrontendTransaction.TransactionState.failed:
+            return "red";
+        case FrontendTransaction.TransactionState.paid:
+            return "green";
         default:
-            return 'blue';
+            return "blue";
     }
 };
 
@@ -19813,7 +19813,7 @@ var TransactionDownload = function (_a) {
     var downloadTransactionLink = useContext(TransactionsListContext).downloadTransactionLink;
     var downloadFile = useDownloadFile();
     var isMobile = useIsMobile();
-    var isClickable = transaction.kind === 'INVOICE' || downloadTransactionLink !== undefined;
+    var isClickable = transaction.kind === "INVOICE" || downloadTransactionLink !== undefined;
     var downloadLink = downloadTransactionLink
         ? downloadTransactionLink(transaction.transactionableId)
         : "".concat(apiHost, "/api/pdf/invoice/").concat(transaction.transactionableId);
@@ -19822,7 +19822,7 @@ var TransactionDownload = function (_a) {
     return (jsx("div", __assign({ onClick: function (e) {
             e.stopPropagation();
             downloadFile(downloadLink, token);
-        } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? '' : 'bunny-show-on-hover'), color: darkMode ? WHITE : SLATE_600 }) })));
+        } }, { children: jsx(ArrowDownToLine, { className: "".concat(isMobile ? "" : "bunny-show-on-hover"), color: darkMode ? WHITE : SLATE_600 }) })));
 };
 
 var TransactionGridCell = defaultStyled.div.withConfig({
@@ -19844,25 +19844,29 @@ var TransactionsEmptyState = function () {
 
 var Text$k = Typography.Text;
 var isInvoice = function (transaction) {
-    return transaction.kind === 'INVOICE';
+    return transaction.kind === "INVOICE";
+};
+var isQuote = function (transaction) {
+    return transaction.kind === "QUOTE";
 };
 var TransactionRowTitle = function (_a) {
     var transaction = _a.transaction;
-    if (!isInvoice(transaction)) {
+    if (!isInvoice(transaction) && !isQuote(transaction)) {
         return jsx(Fragment, {});
     }
-    return (jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: '11px' } }, { children: transaction.transactionable.number })));
+    return (jsx(Text$k, __assign({ className: "bunny-text-slate-400", style: { fontSize: "11px" } }, { children: transaction.transactionable.number })));
 };
 
 function transactionDateToDisplay(transaction, transactionDateType) {
-    if (transaction.kind === TransactionKind.PAYMENT) {
+    var _a, _b;
+    if (transaction.kind === "PAYMENT") {
         return transaction.createdAt;
     }
-    else if (transaction.kind !== TransactionKind.REFUND && transactionDateType === 'dueAt') {
-        return transaction.transactionable.dueAt || '';
+    else if (transaction.kind !== "REFUND" && transactionDateType === "dueAt") {
+        return (_a = transaction.transactionable) === null || _a === void 0 ? void 0 : _a.dueAt;
     }
-    else if (transactionDateType === 'issuedAt') {
-        return transaction.transactionable.issuedAt || '';
+    else if (transactionDateType === "issuedAt") {
+        return (_b = transaction.transactionable) === null || _b === void 0 ? void 0 : _b.issuedAt;
     }
     else {
         return transaction.createdAt;
@@ -19876,29 +19880,29 @@ var TransactionsListDesktop = function (_a) {
     var _c = useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
     // Columns to show
-    var showDate = columns.includes('date');
-    var showTitle = columns.includes('title');
-    var showAccountName = columns.includes('accountName');
-    var showDownload = columns.includes('download');
-    var showAmount = columns.includes('amount');
-    var showState = columns.includes('state');
+    var showDate = columns.includes("date");
+    var showTitle = columns.includes("title");
+    var showAccountName = columns.includes("accountName");
+    var showDownload = columns.includes("download");
+    var showAmount = columns.includes("amount");
+    var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsx(TransactionsEmptyState, {});
     return (jsx(Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
             var _a, _b;
             var isClickable = onTransactionClick !== undefined;
-            return (jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
+            return (jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
                     onTransactionClick === null || onTransactionClick === void 0 ? void 0 : onTransactionClick(transaction);
                 }, style: {
                     backgroundColor: index % 2 === 0
-                        ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
-                        : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
+                        ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                        : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
                 } }, { children: [!showDate &&
                         !showTitle &&
                         !showState &&
                         !showAmount &&
                         !showDownload &&
-                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && jsx(TransactionGridCell, { right: false }), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$j, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
+                        !showAccountName && (jsx(TransactionGridCell, { children: jsx(Text$j, { children: "No columns selected" }) })), showDate && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) }) }))), showTitle && (jsx(Fragment, { children: jsxs(TransactionGridCell, __assign({ right: false, className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [jsx(Text$j, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })) })), showAccountName && (jsx(TransactionGridCell, __assign({ right: false }, { children: jsx(Text$j, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }) }))), !showDate && !showTitle && !showAccountName && (jsx(TransactionGridCell, { right: false })), showDownload && (jsx(TransactionGridCell, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })), showState ? (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(StateTag, { state: transaction.state }) }))) : null, showAmount && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(Text$j, { children: formatCurrency(((_b = transaction === null || transaction === void 0 ? void 0 : transaction.transactionable) === null || _b === void 0 ? void 0 : _b.amount) || transaction.amount, transaction.currencyId) }) })))] }), index));
         }) }));
 };
 
@@ -19908,24 +19912,25 @@ var TransactionsListMobile = function (_a) {
     var _b = useContext(TransactionsListContext), columns = _b.columns, transactionDateType = _b.transactionDateType;
     var _c = useContext(BunnyContext), apiHost = _c.apiHost, darkMode = _c.darkMode;
     var token = useToken();
-    var showAmount = columns.includes('amount');
-    var showDate = columns.includes('date');
-    var showTitle = columns.includes('title');
-    var showAccountName = columns.includes('accountName');
-    var showDownload = columns.includes('download');
-    var showState = columns.includes('state');
+    var showAmount = columns.includes("amount");
+    var showDate = columns.includes("date");
+    var showTitle = columns.includes("title");
+    var showAccountName = columns.includes("accountName");
+    var showDownload = columns.includes("download");
+    var showState = columns.includes("state");
     if ((transactions === null || transactions === void 0 ? void 0 : transactions.length) === 0)
         return jsx(TransactionsEmptyState, {});
     return (jsx(Fragment, { children: transactions === null || transactions === void 0 ? void 0 : transactions.map(function (transaction, index) {
             var _a;
-            var isClickable = transaction.kind === 'INVOICE';
-            return (jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && 'cursor-pointer', " bunny-show-on-hover-container"), onClick: function () {
+            var isClickable = transaction.kind === "INVOICE";
+            return (jsxs("div", __assign({ className: "bunny-contents ".concat(isClickable && "cursor-pointer", " bunny-show-on-hover-container"), onClick: function () {
                     onTransactionClick(transaction);
                 }, style: {
                     backgroundColor: index % 2 === 0
-                        ? "var(--row-background".concat(darkMode ? '-dark' : '', ")")
-                        : "var(--row-background-alternate".concat(darkMode ? '-dark' : '', ")"),
-                } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$i, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$i, { children: "\u00B7" }), showAmount && (jsx(Text$i, { children: formatCurrency(transaction.transactionable.amount || transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
+                        ? "var(--row-background".concat(darkMode ? "-dark" : "", ")")
+                        : "var(--row-background-alternate".concat(darkMode ? "-dark" : "", ")"),
+                } }, { children: [jsx(TransactionGridCell, { children: jsxs("div", __assign({ className: "bunny-flex bunny-flex-col bunny-gap-2" }, { children: [(showTitle || showState) && (jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showTitle && (jsxs(Fragment, { children: [jsx(Text$i, { children: lodashExports.capitalize(transaction.kind.toLowerCase()) }), jsx(TransactionRowTitle, { transaction: transaction })] })), showState && jsx(StateTag, { state: transaction.state })] }))), jsxs("div", __assign({ className: "bunny-flex bunny-items-center bunny-gap-2" }, { children: [showAccountName && jsx(Text$i, { children: (_a = transaction.account) === null || _a === void 0 ? void 0 : _a.name }), showAccountName && showDate && jsx(Text$i, { children: "\u00B7" }), showDate && (jsx(TransactionDate, { date: transactionDateToDisplay(transaction, transactionDateType) })), showDate && showAmount && jsx(Text$i, { children: "\u00B7" }), showAmount && (jsx(Text$i, { children: formatCurrency(transaction.transactionable.amount ||
+                                                transaction.amount, transaction.currencyId) }))] }))] })) }), showDownload && (jsx(TransactionGridCell, __assign({ right: true }, { children: jsx(TransactionDownload, { transaction: transaction, token: token, apiHost: apiHost }) })))] }), index));
         }) }));
 };
 
@@ -20055,9 +20060,9 @@ function TransactionsDisplay(_a) {
 }
 
 function Quotes(_a) {
-    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ['date', 'title', 'amount', 'download', 'state'] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
+    var className = _a.className, _b = _a.columns, columns = _b === void 0 ? ["date", "title", "amount", "download", "state"] : _b, filter = _a.filter, filterQuotes = _a.filterQuotes, _c = _a.sort, sort = _c === void 0 ? function (a, b) {
         return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-    } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? 'There are no quotes' : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? 'shadow-md' : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? 'Past quotes' : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
+    } : _c, _d = _a.noQuotesMessage, noQuotesMessage = _d === void 0 ? "There are no quotes" : _d, onQuoteClick = _a.onQuoteClick, quoteComponent = _a.quoteComponent, searchBarClassName = _a.searchBarClassName, _e = _a.shadow, shadow = _e === void 0 ? "shadow-md" : _e, _f = _a.showSearchBar, showSearchBar = _f === void 0 ? true : _f, _g = _a.showTitle, showTitle = _g === void 0 ? true : _g, _h = _a.title, title = _h === void 0 ? "Past quotes" : _h, style = _a.style, _j = _a.suppressQuoteDisplay, suppressQuoteDisplay = _j === void 0 ? false : _j, _k = _a.useModal, useModal = _k === void 0 ? false : _k;
     var apiHost = useContext(BunnyContext).apiHost;
     var _l = useState(null), component = _l[0], setComponent = _l[1];
     var contextValues = {
@@ -20083,27 +20088,27 @@ function Quotes(_a) {
         filterTransactions: filterQuotes,
         sortTransactions: sort,
         downloadTransactionLink: function (id) { return "".concat(apiHost, "/api/pdf/quote/").concat(id); },
-        transactionDateType: 'createdAt', // Required for the transactions list, but doesn't affect quotes
+        transactionDateType: "createdAt", // Required for the transactions list, but doesn't affect quotes
     };
     function quoteStateRenderer(state) {
         var getColor = function (state) {
             switch (state) {
-                case 'ACCEPTED':
-                    return 'green';
-                case 'IN_APPROVAL':
-                    return 'orange';
-                case 'APPROVED':
-                    return 'green';
-                case 'REJECTED':
-                    return 'red';
-                case 'DRAFT':
-                case 'SHARED':
-                case 'VIEWED':
+                case "ACCEPTED":
+                    return "green";
+                case "IN_APPROVAL":
+                    return "orange";
+                case "APPROVED":
+                    return "green";
+                case "REJECTED":
+                    return "red";
+                case "DRAFT":
+                case "SHARED":
+                case "VIEWED":
                 default:
-                    return 'blue';
+                    return "blue";
             }
         };
-        return jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) }));
+        return (jsx(CustomizedTag, __assign({ color: getColor(state) }, { children: lodashExports.capitalize(lodashExports.startCase(state)) })));
     }
     function handleQuoteClick(quote) {
         onQuoteClick === null || onQuoteClick === void 0 ? void 0 : onQuoteClick(quote);
@@ -20121,11 +20126,11 @@ function QuotesWrapper() {
     var token = useToken();
     var filterFromContext = useContext(TransactionsListContext).filter;
     // Local state
-    var _a = useState(''), search = _a[0], setSearch = _a[1];
-    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : '');
+    var _a = useState(""), search = _a[0], setSearch = _a[1];
+    var filter = filterFromContext || (search ? "filter: \"quote.id is ".concat(search, "\"") : "");
     // Queries
     var data = useQuery({
-        queryKey: ['quotes', token, filter],
+        queryKey: ["quotes", token, filter],
         queryFn: function () { return getQuotes({ token: token, apiHost: apiHost, filter: filter }); },
         placeholderData: keepPreviousData,
     }).data;
@@ -20133,7 +20138,7 @@ function QuotesWrapper() {
         return null;
     // filter out quotes in draft state, they are not viewable
     var quotes = data.nodes.filter(function (quote) {
-        return quote.state !== 'DRAFT';
+        return quote.state !== "DRAFT";
     });
     var quotesAsTransactions = quotes.map(function (quote) {
         var _a, _b;
@@ -20141,7 +20146,7 @@ function QuotesWrapper() {
             transactionableId: quote.id,
             state: quote.state,
             amount: quote.amount || quote.amountDue,
-            kind: 'QUOTE',
+            kind: "QUOTE",
             currencyId: quote.currencyId,
             transactionable: {
                 number: quote.number,

package/dist/esm/src/components/PaymentForm/CheckoutFooter.d.ts

@@ -1,7 +1,7 @@
-import { FormattedInvoice, Invoice, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PluginData, Quote } from '@bunnyapp/common';
 declare const CheckoutFooter: ({ quote, invoice, onPaymentSuccess, onPaymentHoldSuccess, plugin, paymentHoldOptions, }: {
     quote?: Quote | undefined;
-    invoice?: FormattedInvoice | Invoice | undefined;
+    invoice?: FormattedInvoice | undefined;
     onPaymentSuccess?: ((response: any) => void) | undefined;
     onPaymentHoldSuccess?: ((response: any) => void) | undefined;
     plugin: PluginData | undefined;

package/dist/esm/src/components/PaymentForm/DemoPay/hooks/usePay.d.ts

@@ -1,9 +1,9 @@
-import { FormattedInvoice, Invoice, PaymentMethod, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PaymentMethod, PluginData, Quote } from '@bunnyapp/common';
 export declare function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymentMethod, plugin, }: {
     onPaymentSuccess?: (response: any) => void;
     onPaymentError?: (error: any) => void;
     quote?: Quote;
-    invoice?: FormattedInvoice | Invoice;
+    invoice?: FormattedInvoice;
     storedPaymentMethod?: PaymentMethod;
     plugin: PluginData | undefined;
 }): {

package/dist/esm/src/components/PaymentForm/PaymentForm.d.ts

@@ -1,6 +1,6 @@
-import { FormattedInvoice, Invoice, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PluginData, Quote } from '@bunnyapp/common';
 export declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, onPaymentHoldSuccess, quote, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, entityId, overrideToken, customCheckoutFunction, currencyId: currencyIdFromProps, paymentHoldOptions, }: {
-    invoice?: FormattedInvoice | Invoice | undefined;
+    invoice?: FormattedInvoice | undefined;
     quote?: Quote | undefined;
     onFail: (error: any) => void;
     onPaymentSuccess?: (() => void) | undefined;

package/dist/esm/src/components/PaymentForm/Stripe/hooks/usePay.d.ts

@@ -1,9 +1,9 @@
-import { FormattedInvoice, Invoice, PaymentMethod, PluginData, Quote } from '@bunnyapp/common';
+import { FormattedInvoice, PaymentMethod, PluginData, Quote } from "@bunnyapp/common";
 export declare function usePay({ onPaymentSuccess, onPaymentError, quote, invoice, storedPaymentMethod, plugin, }: {
     onPaymentSuccess?: (response: any) => void;
     onPaymentError?: (error: any) => void;
     quote?: Quote;
-    invoice?: FormattedInvoice | Invoice;
+    invoice?: FormattedInvoice;
     storedPaymentMethod?: PaymentMethod;
     plugin: PluginData | undefined;
 }): {

package/dist/esm/src/components/Quotes/Quotes.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Transaction } from '@bunnyapp/common';
-import { ShadowType } from '../../types/shadowType';
-import { TransactionListColumnType } from '../Transactions/transactionsList/TransactionsListDesktop';
+import { FrontendTransaction as T } from "@bunnyapp/common";
+import { ShadowType } from "../../types/shadowType";
+import { TransactionListColumnType } from "../Transactions/transactionsList/TransactionsListDesktop";
 declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, quoteComponent, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
     /** A custom component to render instead of the default invoice component */
     quoteComponent?: React.ReactNode;
@@ -22,7 +22,7 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     /** A custom class name to apply to the search bar */
     searchBarClassName?: string;
     /** A function to call when a quote is clicked */
-    onQuoteClick?: (quote: Transaction) => void;
+    onQuoteClick?: (quote: T.Transaction) => void;
     /** Whether to hide the display showing the quote */
     suppressQuoteDisplay?: boolean;
     /** A custom style to apply to the component */
@@ -30,9 +30,9 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     /** A filter to apply to the quotes. Docs on filter: https://docs.bunny.com/developer/getting-started/using-filters-in-queries */
     filter?: string;
     /** A function to filter the quotes. Runs on the client side. */
-    filterQuotes?: (quote: Transaction) => boolean;
+    filterQuotes?: (quote: T.Transaction) => boolean;
     /** A function to sort the quotes. Runs on the client side. */
-    sort?: (a: Transaction, b: Transaction) => number;
+    sort?: (a: T.Transaction, b: T.Transaction) => number;
     /** Message to display when there are no quotes */
     noQuotesMessage?: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/Quotes/Quotes.stories.d.ts

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import Quotes from './Quotes';
+import type { Meta, StoryObj } from "@storybook/react";
+import Quotes from "./Quotes";
 declare const meta: Meta<typeof Quotes>;
 export default meta;
 type Story = StoryObj<typeof meta>;

package/dist/esm/src/components/Transactions/Transactions.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Transaction, TransactionKind } from '@bunnyapp/common';
+import { FrontendTransaction as T, TransactionKind } from '@bunnyapp/common';
 import { ShadowType } from '../../types/shadowType';
 import { TransactionListColumnType } from './transactionsList/TransactionsListDesktop';
 import { TransactionDateType } from './TransactionsListContext';
@@ -23,7 +23,7 @@ export default function Transactions({ transactionComponent, showSearchBar, show
     /** A custom class name to apply to the search bar */
     searchBarClassName?: string;
     /** A function to call when a transaction is clicked */
-    onTransactionClick?: (transaction: Transaction) => void;
+    onTransactionClick?: (transaction: T.Transaction) => void;
     /** Whether to hide the display showing the transaction */
     suppressTransactionDisplay?: boolean;
     /** The kinds of transactions to show */
@@ -40,14 +40,14 @@ export default function Transactions({ transactionComponent, showSearchBar, show
      * Filtering is applied on the client side.
      * This is useful to have more control over the filtering logic.
      */
-    filterTransactions?: (transaction: Transaction) => boolean;
+    filterTransactions?: (transaction: T.Transaction) => boolean;
     /** A function to sort the transactions. Runs on the client side. */
-    sortTransactions?: (transactionA: Transaction, transactionB: Transaction) => number;
+    sortTransactions?: (transactionA: T.Transaction, transactionB: T.Transaction) => number;
     /** The type of date to display for transactions if applicable. Payments will always only show createdAt date. */
     transactionDateType?: TransactionDateType;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function TransactionsDisplay({ transactions, onSearchValueChanged, search, }: {
-    transactions: Transaction[];
+    transactions: T.Transaction[];
     onSearchValueChanged: (value: string) => void;
     search: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/esm/src/components/Transactions/TransactionsListContext.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-import { Transaction, TransactionKind } from '@bunnyapp/common';
-import { ShadowType } from '../../types/shadowType';
-import { TransactionListColumnType } from './transactionsList/TransactionsListDesktop';
+import { FrontendTransaction as T, TransactionKind } from "@bunnyapp/common";
+import { ShadowType } from "../../types/shadowType";
+import { TransactionListColumnType } from "./transactionsList/TransactionsListDesktop";
 export type TransactionsContextValues = {
     showSearchBar?: boolean;
     showTitle?: boolean;
@@ -13,17 +13,17 @@ export type TransactionsContextValues = {
     shadow?: ShadowType;
     searchBarClassName?: string;
     useModal?: boolean;
-    onTransactionClick?: (transaction: Transaction) => void;
-    onTransactionDisplayClose?: (transaction: Transaction | null) => void;
+    onTransactionClick?: (transaction: T.Transaction) => void;
+    onTransactionDisplayClose?: (transaction: T.Transaction | null) => void;
     suppressTransactionDisplay?: boolean;
     kindsToShow?: TransactionKind[];
     style?: React.CSSProperties;
     filter?: string;
     noTransactionsMessage?: string;
     downloadTransactionLink?: (id: string) => string;
-    filterTransactions?: (transaction: Transaction) => boolean;
-    sortTransactions?: (transactionA: Transaction, transactionB: Transaction) => number;
+    filterTransactions?: (transaction: T.Transaction) => boolean;
+    sortTransactions?: (transactionA: T.Transaction, transactionB: T.Transaction) => number;
     transactionDateType: TransactionDateType;
 };
-export type TransactionDateType = 'createdAt' | 'issuedAt' | 'dueAt';
+export type TransactionDateType = "createdAt" | "issuedAt" | "dueAt";
 export declare const TransactionsListContext: import("react").Context<TransactionsContextValues>;

package/dist/esm/src/components/Transactions/transactionsList/TransactionDownload.d.ts

@@ -1,6 +1,6 @@
-import { Transaction } from '@bunnyapp/common';
+import { FrontendTransaction as T } from "@bunnyapp/common";
 declare const TransactionDownload: ({ transaction, token, apiHost, }: {
-    transaction: Transaction;
+    transaction: T.Transaction;
     token?: string | undefined;
     apiHost: string;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/src/components/Transactions/transactionsList/TransactionTitle.d.ts

@@ -1,5 +1,5 @@
-import { Transaction } from '@bunnyapp/common';
-declare const TransactionRowTitle: ({ transaction }: {
-    transaction: Transaction;
+import { FrontendTransaction as T } from "@bunnyapp/common";
+declare const TransactionRowTitle: ({ transaction, }: {
+    transaction: T.Transaction;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TransactionRowTitle;

package/dist/esm/src/components/Transactions/transactionsList/TransactionsListDesktop.d.ts

@@ -1,7 +1,7 @@
-import { Transaction } from '@bunnyapp/common';
-export type TransactionListColumnType = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
+import { FrontendTransaction as T } from "@bunnyapp/common";
+export type TransactionListColumnType = "date" | "title" | "state" | "amount" | "download" | "accountName";
 declare const TransactionsListDesktop: ({ transactions, onTransactionClick, }: {
-    transactions: Transaction[];
-    onTransactionClick?: ((transaction: Transaction) => void) | undefined;
+    transactions: T.Transaction[];
+    onTransactionClick?: ((transaction: T.Transaction) => void) | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TransactionsListDesktop;

package/dist/esm/src/components/Transactions/transactionsList/TransactionsListMobile.d.ts

@@ -1,6 +1,6 @@
-import { Transaction } from '@bunnyapp/common';
+import { FrontendTransaction as T } from "@bunnyapp/common";
 declare const TransactionsListMobile: ({ transactions, onTransactionClick, }: {
-    transactions: Transaction[];
-    onTransactionClick: (transaction: Transaction) => void;
+    transactions: T.Transaction[];
+    onTransactionClick: (transaction: T.Transaction) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default TransactionsListMobile;

package/dist/esm/src/components/Transactions/transactionsList/utils.d.ts

@@ -1,3 +1,3 @@
-import { Transaction } from '@bunnyapp/common';
-import { TransactionDateType } from '../TransactionsListContext';
-export declare function transactionDateToDisplay(transaction: Transaction, transactionDateType: TransactionDateType): string;
+import { FrontendTransaction as T } from "@bunnyapp/common";
+import { TransactionDateType } from "../TransactionsListContext";
+export declare function transactionDateToDisplay(transaction: T.Transaction, transactionDateType: TransactionDateType): any;

package/dist/esm/src/graphql/queries/getTransactions.d.ts

@@ -1,3 +1,3 @@
-import { Transaction } from '@bunnyapp/common';
-declare const getTransactions: (filter: string, apiHost: string, token?: string) => Promise<Transaction[]>;
+import { FrontendTransaction as T } from '@bunnyapp/common';
+declare const getTransactions: (filter: string, apiHost: string, token?: string) => Promise<T.Transaction[]>;
 export default getTransactions;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { FormattedInvoice, FormattedQuote, Transaction, Invoice as Invoice$1, Quote as Quote$1, PluginData, TransactionKind, PaymentMethod } from '@bunnyapp/common';
+import { FormattedInvoice, FormattedQuote, FrontendTransaction, Quote as Quote$1, PluginData, TransactionKind, PaymentMethod } from '@bunnyapp/common';
 import { QueryClient } from '@tanstack/react-query';
 import { ThemeConfig } from 'antd';
 import * as react from 'react';
@@ -33,7 +33,7 @@ declare global {
 
 declare function Quote({ id, invoiceQuoteViewComponent, onInvoiceDownloadError, onPaymentSuccess, shadow, className, hideDownloadButton, onQuoteLoaded, }: InvoiceQuoteContextProps): react_jsx_runtime.JSX.Element;
 
-type TransactionListColumnType = 'date' | 'title' | 'state' | 'amount' | 'download' | 'accountName';
+type TransactionListColumnType = "date" | "title" | "state" | "amount" | "download" | "accountName";
 
 declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuotesMessage, onQuoteClick, quoteComponent, searchBarClassName, shadow, showSearchBar, showTitle, title, style, suppressQuoteDisplay, useModal, }: {
     /** A custom component to render instead of the default invoice component */
@@ -55,7 +55,7 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     /** A custom class name to apply to the search bar */
     searchBarClassName?: string;
     /** A function to call when a quote is clicked */
-    onQuoteClick?: (quote: Transaction) => void;
+    onQuoteClick?: (quote: FrontendTransaction.Transaction) => void;
     /** Whether to hide the display showing the quote */
     suppressQuoteDisplay?: boolean;
     /** A custom style to apply to the component */
@@ -63,15 +63,15 @@ declare function Quotes({ className, columns, filter, filterQuotes, sort, noQuot
     /** A filter to apply to the quotes. Docs on filter: https://docs.bunny.com/developer/getting-started/using-filters-in-queries */
     filter?: string;
     /** A function to filter the quotes. Runs on the client side. */
-    filterQuotes?: (quote: Transaction) => boolean;
+    filterQuotes?: (quote: FrontendTransaction.Transaction) => boolean;
     /** A function to sort the quotes. Runs on the client side. */
-    sort?: (a: Transaction, b: Transaction) => number;
+    sort?: (a: FrontendTransaction.Transaction, b: FrontendTransaction.Transaction) => number;
     /** Message to display when there are no quotes */
     noQuotesMessage?: string;
 }): react_jsx_runtime.JSX.Element;
 
 declare const PaymentForm: ({ invoice, onFail, onPaymentSuccess, onPaymentHoldSuccess, quote, accountId, onSavePaymentMethod, onRemovePaymentMethod, onSetDefaultPaymentMethod, entityId, overrideToken, customCheckoutFunction, currencyId: currencyIdFromProps, paymentHoldOptions, }: {
-    invoice?: FormattedInvoice | Invoice$1 | undefined;
+    invoice?: FormattedInvoice | undefined;
     quote?: Quote$1 | undefined;
     onFail: (error: any) => void;
     onPaymentSuccess?: (() => void) | undefined;
@@ -117,7 +117,7 @@ declare function BunnyProvider({ children, darkMode, queryClient, apiHost, token
     configProviderProps?: ThemeConfig | undefined;
 }): react_jsx_runtime.JSX.Element;
 
-type TransactionDateType = 'createdAt' | 'issuedAt' | 'dueAt';
+type TransactionDateType = "createdAt" | "issuedAt" | "dueAt";
 
 declare function Transactions({ transactionComponent, showSearchBar, showTitle, title, columns, className, shadow, searchBarClassName, useModal, onTransactionClick, suppressTransactionDisplay, kindsToShow, style, filter, noTransactionsMessage, filterTransactions, sortTransactions, transactionDateType, }: {
     /** A custom component to render instead of the default invoice component */
@@ -139,7 +139,7 @@ declare function Transactions({ transactionComponent, showSearchBar, showTitle,
     /** A custom class name to apply to the search bar */
     searchBarClassName?: string;
     /** A function to call when a transaction is clicked */
-    onTransactionClick?: (transaction: Transaction) => void;
+    onTransactionClick?: (transaction: FrontendTransaction.Transaction) => void;
     /** Whether to hide the display showing the transaction */
     suppressTransactionDisplay?: boolean;
     /** The kinds of transactions to show */
@@ -156,9 +156,9 @@ declare function Transactions({ transactionComponent, showSearchBar, showTitle,
      * Filtering is applied on the client side.
      * This is useful to have more control over the filtering logic.
      */
-    filterTransactions?: (transaction: Transaction) => boolean;
+    filterTransactions?: (transaction: FrontendTransaction.Transaction) => boolean;
     /** A function to sort the transactions. Runs on the client side. */
-    sortTransactions?: (transactionA: Transaction, transactionB: Transaction) => number;
+    sortTransactions?: (transactionA: FrontendTransaction.Transaction, transactionB: FrontendTransaction.Transaction) => number;
     /** The type of date to display for transactions if applicable. Payments will always only show createdAt date. */
     transactionDateType?: TransactionDateType;
 }): react_jsx_runtime.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.0.73-beta.9",
+  "version": "1.0.76",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -64,13 +64,11 @@
   },
   "peerDependencies": {
     "@ant-design/icons": "^5.6.1",
-    "@bunnyapp/common": "^1.0.66-beta.12",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
-    "@pdf-viewer/react": "^1.7.2",
     "@stripe/react-stripe-js": "^3.0.0",
     "@stripe/stripe-js": "^5.2.0",
     "@tanstack/react-query": "^5.59.20",
@@ -92,6 +90,8 @@
     ]
   },
   "dependencies": {
+    "@bunnyapp/common": "^1.0.66-beta.10",
+    "@pdf-viewer/react": "^1.7.2",
     "msw-storybook-addon": "^2.0.4"
   }
 }