@justifi/webcomponents 5.0.0 → 5.2.0

package/dist/esm/pagination-menu.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host } from './index-29fcfdf5.js';
 import { E as ExtendedPagingDefaults } from './Pagination-afc8f96d.js';
-import { F as buttonLink, G as buttonDisabled } from './parts-186d437f.js';
+import { O as buttonLink, P as buttonDisabled } from './parts-93f379ab.js';
 
 const PaginationMenu = class {
     constructor(hostRef) {

package/dist/esm/{parts-186d437f.js → parts-93f379ab.js}

@@ -57,7 +57,15 @@ const tableError = `table-error ${text} ${backgroundColor}`;
 // Loading spinner
 const loadingSpinner = `loading-spinner`;
 // Badge
-const badge = `badge ${text}`;
+const badge = `badge ${fontFamily}`;
+const badgePrimary = `${badge} badge-primary`;
+const badgeSecondary = `${badge} badge-secondary`;
+const badgeSuccess = `${badge} badge-success`;
+const badgeDanger = `${badge} badge-danger`;
+const badgeWarning = `${badge} badge-warning`;
+const badgeInfo = `${badge} badge-info`;
+const badgeLight = `${badge} badge-light`;
+const badgeDark = `${badge} badge-dark`;
 // Dropdown-menu
 const dropdownMenu = `dropdown-menu ${text}`;
 // Radio List Item
@@ -65,8 +73,9 @@ const radioListItem = `radio-list-item ${text}`;
 // Skeleton
 const skeleton = `skeleton`;
 // Component specific
-// This allows the billing form to be hidden, for example
+// This allows specific sections of a component to be hidden, for example
 // ::part(billing-form) { display: none; }
 const billingForm = `billing-form`;
+const checkoutSummary = `checkout-summary`;
 
-export { card as A, heading5 as B, dropdownMenu as C, inputDisabled as D, inputGroup as E, buttonLink as F, buttonDisabled as G, inputRadioInvalid as H, inputRadioCheckedFocused as I, inputRadioChecked as J, inputRadioFocused as K, inputRadio as L, inputCheckboxInvalid as M, inputCheckboxCheckedFocused as N, inputCheckboxFocused as O, inputCheckboxChecked as P, inputCheckbox as Q, tooltip as R, tooltipInner as S, tooltipIcon as T, inputFocused as a, inputInvalid as b, input as c, textDanger as d, heading1 as e, buttonLoading as f, buttonPrimary as g, heading2 as h, inputInvalidAndFocused as i, buttonSecondary as j, tableHeadCell as k, label as l, getAlternateTableCellPart as m, table as n, tableCell as o, tableEmpty as p, tableError as q, loadingSpinner as r, skeleton as s, text as t, alertDanger as u, heading3 as v, badge as w, heading4 as x, billingForm as y, radioListItem as z };
+export { tooltipInner as $, tableEmpty as A, tableError as B, loadingSpinner as C, alertDanger as D, checkoutSummary as E, heading3 as F, heading4 as G, billingForm as H, radioListItem as I, card as J, heading5 as K, dropdownMenu as L, inputDisabled as M, inputGroup as N, buttonLink as O, buttonDisabled as P, inputRadioInvalid as Q, inputRadioCheckedFocused as R, inputRadioChecked as S, inputRadioFocused as T, inputRadio as U, inputCheckboxInvalid as V, inputCheckboxCheckedFocused as W, inputCheckboxFocused as X, inputCheckboxChecked as Y, inputCheckbox as Z, tooltip as _, inputFocused as a, tooltipIcon as a0, inputInvalid as b, input as c, textDanger as d, heading1 as e, buttonLoading as f, buttonPrimary as g, heading2 as h, inputInvalidAndFocused as i, buttonSecondary as j, tableHeadCell as k, label as l, getAlternateTableCellPart as m, badge as n, badgePrimary as o, badgeSecondary as p, badgeSuccess as q, badgeDanger as r, skeleton as s, text as t, badgeWarning as u, badgeInfo as v, badgeLight as w, badgeDark as x, table as y, tableCell as z };

package/dist/esm/payment-details-core.entry.js

@@ -1,10 +1,25 @@
-import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
-import { b as formatCurrency, a as formatDate, f as formatTime, s as snakeCaseToHumanReadable } from './utils-54543523.js';
-import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState } from './utils-d7633e66.js';
-import { w as badge } from './parts-186d437f.js';
+import { h, r as registerInstance, c as createEvent } from './index-29fcfdf5.js';
+import { b as formatDate, a as formatTime, s as snakeCaseToHumanReadable } from './utils-b76d791e.js';
+import { M as MapPaymentStatusToBadge } from './payments-status-82466054.js';
+import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState } from './utils-7fb6331d.js';
 import { S as StyledHost } from './styled-host-32228b45.js';
-import { S as Spinner } from './spinner-879489b3.js';
-import { M as MapPaymentStatusToBadge } from './payments-status-a7c18f2a.js';
+import { S as Skeleton } from './skeleton-3bcb2b5d.js';
+import './badge-b034e71b.js';
+import './parts-93f379ab.js';
+
+const PaymentDetailsLoading = () => (h("div", { class: "row gap-3" },
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "35%", height: "30px" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "70%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "100%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "80%" }))));
 
 const PaymentDetailsCore = class {
     constructor(hostRef) {
@@ -43,15 +58,14 @@ const PaymentDetailsCore = class {
         });
     }
     render() {
-        var _a;
-        return (h(StyledHost, { key: '7550877e5bc7bf30d0964d496b07c39f57ea23c7' }, this.loading && h(Spinner, { key: '320d191ef2cbd736158382f693bd4e1b2676a850' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
-            this.payment && (h("justifi-details", { key: 'cc147622d2821fb3070d3acb17dabbe0d6acb44e', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '102fbe95740cfcbeed7d79c500841e4e69644c1b', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPaymentStatusToBadge(this.payment.status) }), title: `${formatCurrency(this.payment.amount)} ${(_a = this.payment) === null || _a === void 0 ? void 0 : _a.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '1f6b55ebbc0abb37ced9cda26b193a779f7ba4a9', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cb64b263862128ef00b4923cdfd986ee63d40670', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '4a245ba3ad052ef015d7c5c2abb8d05051e0784a', title: "ID", value: this.payment.id })), h("div", { key: '9721335ed8558618cae9685f83c68e2eff8dfb8b', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8c460e5675898d68ceb335a56da05b459b81b112', sectionTitle: "Details" }), h("div", { key: '1094ca8b231926460913bbabd9c9816e04d5bb1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'e9640bbcf361dbeead436eea32a69fa962e34663', title: "Amount", value: formatCurrency(this.payment.amount) }), h(DetailItem, { key: 'ffa1411af9d4d78dbeaedcf7c12ce7d7c1e6eb53', title: "Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: 'c5843ff4773b7a2be2afdd659226dd46096f585d', title: "Refunded", value: formatCurrency(this.payment.amount_refunded) }), h(DetailItem, { key: '8ec788ae9ed769f6af4f32882d72d10877d1de30', title: "Net", value: formatCurrency(this.payment.balance) }), h(DetailItem, { key: 'ddd659af132d2628b8187d81ea72fc604e7ea7a8', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '15cb99e66dfc876d65aa8d446564f873aef1ef8a', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '499a906f13648cd49a3bf92ccadcc01f0fb430f6', title: "Processing Fees", value: formatCurrency(this.payment.fee_amount) }), h(DetailItem, { key: '75ab13ff4c06f0f58dec6c0fcaad692d6d03b68b', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'aeb538897b387e4811d35dde9fb19a5813c1c049', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
-            h(DetailSectionTitle, { key: '4c8aa277b28bb1ffaf5fbada3a35f284ee2fabb2', sectionTitle: "Payment Method" }),
-            h("div", { key: 'ce52033a650a4f5db13e5c3cdf97191bcb3539b1', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '168e45e35fc2e11adbf6881b17ebfd36d0a54a71', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '38af59143d2961cdc29b03e46af06b720dad3c8e', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '07518b2789187d2ae0b3f5edc6510a4b44798154', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '724207946a3e0b1b1cfe00bf0e77bfcd2f8c5982', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: '34deb890ddf58566794fcb451d4d422d31f3f8b7', title: "Cardholder", value: this.payment.payment_method.payersName }))
+        return (h(StyledHost, { key: '714fd2a97e2879dddbaacda6d5289b3985aaeea5' }, this.loading && h(PaymentDetailsLoading, { key: '7f6d24755cea9f3b86cdcaecec470513532f37cc' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && !this.errorMessage &&
+            this.payment && (h("justifi-details", { key: '9f3403ce5744053a04c1a6cde0c58a41f15547ac', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '310f3e1087843e2c10aa49b9fb7e6be734168f1d', slot: "head-info", badge: MapPaymentStatusToBadge(this.payment.status), title: this.payment.formattedPaymentAmount(this.payment.amount) }, h(EntityHeadInfoItem, { key: '5ed10250e7e04961e2fc57a017eea58e26429378', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payment.updated_at)} ${formatTime(this.payment.updated_at)}` }), h(EntityHeadInfoItem, { key: 'cd304828a7e38c8ad9fceb15b56391489a9eb938', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payment.created_at)} ${formatTime(this.payment.created_at)}` }), h(EntityHeadInfoItem, { key: '5b70635442c6c76d978d40095d81cda6f7b00cfc', title: "ID", value: this.payment.id })), h("div", { key: '54558d6e59548048a548a83578d1a94694515bde', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '0780b044b54ba041e9632f94acdfe71411454297', sectionTitle: "Details" }), h("div", { key: 'e1426b161aad05e561414d6a4c77cb28d3e7c157', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '8a390a81e9b91d6582ee01a93743a8cb4fba57f4', title: "Amount", value: this.payment.formattedPaymentAmount(this.payment.amount) }), h(DetailItem, { key: '8bffacbde88bd44cbdc213b7f24b93087e533670', title: "Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: '78f5773c98118c39dab6df14fd9beafd7f06df1d', title: "Refunded", value: this.payment.formattedPaymentAmount(this.payment.amount_refunded) }), h(DetailItem, { key: 'c620ecf5b7dd9f9896a4a454cc8b507b4c344f45', title: "Net", value: this.payment.formattedPaymentAmount(this.payment.balance) }), h(DetailItem, { key: '4b7529e27aecf2560d305dc6f906b4ae1f26c2d2', title: "Status", value: MapPaymentStatusToBadge(this.payment.status) }), h(DetailItem, { key: '1807f3f518b3ddf1296f8c2802b8e66a7a7e8401', title: "Payment ID", value: this.payment.id }), h(DetailItem, { key: '79183af038116750f07bd65bc843a879a6275961', title: "Processing Fees", value: this.payment.formattedPaymentAmount(this.payment.fee_amount) }), h(DetailItem, { key: 'a2a6b8a345068a57e8e647b5f5efa9da5c870697', title: "Statement Descriptor", value: this.payment.statement_descriptor }), h(DetailItem, { key: 'e3c7479795cd85029e1f90b4f7e0e5cfd0cf9099', title: "Description", value: this.payment.description })), this.payment.payment_method.card && [
+            h(DetailSectionTitle, { key: '7d49ed552d5b2dc87e6596e025e9c877b838b25a', sectionTitle: "Payment Method" }),
+            h("div", { key: '9a435008ea2746b11281bd237e9a38f471e9a11d', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '9b22fcb2e38f690dfb963b783d2139813a920ddc', title: "ID", value: this.payment.payment_method.card.id }), h(DetailItem, { key: '27ed56e879c9598226373f9086f79cd0cc72a9fe', title: "Payment Type", value: "Card" }), h(DetailItem, { key: '9868b544973455fad8af21f4de2936a6d61b21a7', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: '80716a8fe5b7bd933b930b35674dfe111948ef62', title: "Brand", value: snakeCaseToHumanReadable(this.payment.payment_method.card.brand) }), h(DetailItem, { key: 'f0c0e2107b079bc6c898c91e5bd6a111b327c419', title: "Cardholder", value: this.payment.payment_method.payersName }))
         ], this.payment.payment_method.bank_account && [
-            h(DetailSectionTitle, { key: 'fbc24139e24a3d72624db86e30d0ce7b602cafe1', sectionTitle: "Payment Method" }),
-            h("div", { key: 'cba8888ffd57b95d82ab307f5de83c61f16a75b8', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '5d7bbf52c0b06be00bdca98df4926dfa5c7ee25f', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: '19f2450384c28970a69a13aa623a0360c7818f46', title: "Last 4 Numbers", value: this.payment.payment_method.lastFourDigits }), h(DetailItem, { key: 'c81914830e67c477c2407112e74afaa127c406c2', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: '5c8581983f368d84d6d9044d49ea2cab923b6615', title: "Account Owner", value: this.payment.payment_method.payersName }))
-        ], h(DetailSectionTitle, { key: 'c8ed7c6c2480365d7fec6c388103aeb1c3622c44', sectionTitle: 'Metadata' }), h("div", { key: 'cca65ed21900b912ea4a22b2e852d0c46946efd1', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: 'c96c267005a5ee26064d7cd6c03768f83442dfc6', metadata: this.payment.metadata })))))));
+            h(DetailSectionTitle, { key: '1f2d289d3c79b1c496f10ded116ab193d9c4ade0', sectionTitle: "Payment Method" }),
+            h("div", { key: '9b898ec3ccf34e225d465b46a0a645d46f696c91', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '71acc9fe7bca4f922075a33968229919b9660ec0', title: "ID", value: this.payment.payment_method.bank_account.id }), h(DetailItem, { key: 'cd62b8e0e55a9888f1d06a107173516af1f65e9e', title: "Last 4 Numbers", value: this.payment.last_four_digits }), h(DetailItem, { key: '22e2dcefcb76363ca9254392e825a4612c65ac1c', title: "Bank Name", value: this.payment.payment_method.bank_account.brand }), h(DetailItem, { key: 'a6e633cb3e5b82ed9c887b16a346dac257db22dc', title: "Account Owner", value: this.payment.payment_method.payersName }))
+        ], h(DetailSectionTitle, { key: '10d02e4d3e09b50644f7a5c1bb0beca7f0747c0e', sectionTitle: 'Metadata' }), h("div", { key: '119445b2570c4b736b4c9bb0daf88a3047b3ee97', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '794df4cfc8808ea62e6b97127fee7349698e264e', metadata: this.payment.metadata })))))));
     }
     static get watchers() { return {
         "getPaymentDetails": ["updateOnPropChange"]

package/dist/esm/{payment-provisioning-actions-0635eff7.js → payment-provisioning-actions-a262ee82.js}

@@ -174,5 +174,35 @@ const makePostIdentity = ({ authToken, service }) => async ({ payload, onSuccess
         return final();
     }
 };
+// Bank Account API Actions
+const makePostBankAccount = ({ authToken, service }) => async ({ payload, onSuccess, onError, final = () => { } }) => {
+    var _a;
+    try {
+        const response = await service.postBankAccount(authToken, payload);
+        if (!response.error) {
+            onSuccess(response);
+        }
+        else {
+            const responseError = getErrorMessage(response.error);
+            const code = getErrorCode((_a = response.error) === null || _a === void 0 ? void 0 : _a.code);
+            return onError({
+                error: responseError,
+                code,
+                severity: ComponentErrorSeverity.ERROR,
+            });
+        }
+    }
+    catch (error) {
+        const code = getErrorCode(error === null || error === void 0 ? void 0 : error.code);
+        return onError({
+            error: error.message || error,
+            code,
+            severity: ComponentErrorSeverity.ERROR,
+        });
+    }
+    finally {
+        return final();
+    }
+};
 
-export { makePostProvisioning as a, makePatchBusiness as b, makeGetIdentity as c, makePatchIdentity as d, makePostIdentity as e, makeGetBusiness as m };
+export { makePostProvisioning as a, makePatchBusiness as b, makePostBankAccount as c, makeGetIdentity as d, makePatchIdentity as e, makePostIdentity as f, makeGetBusiness as m };

package/dist/esm/{payment.service-45f90e06.js → payment.service-92b90855.js}

@@ -1,9 +1,8 @@
-import { A as Api } from './Api-391d00e2.js';
-import './Checkout-0b4086f8.js';
+import { A as Api, c as config } from './Api-0cac5b8a.js';
+import './Checkout-d476bb83.js';
 import './Pagination-afc8f96d.js';
-import './Payment-4f72d277.js';
-import './SubAccount-99a00594.js';
-import { c as config } from './config-187b3ae1.js';
+import './Payment-47630113.js';
+import './SubAccount-f31349a9.js';
 
 class PaymentService {
     async fetchPayments(accountId, authToken, params, apiOrigin) {

package/dist/esm/payments-list-core.entry.js

@@ -1,16 +1,17 @@
 import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
-import './Checkout-0b4086f8.js';
+import './Checkout-d476bb83.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
-import './Payment-4f72d277.js';
-import './SubAccount-99a00594.js';
-import { n as table, o as tableCell } from './parts-186d437f.js';
-import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types-01dcdcbd.js';
-import { p as paymentTableColumns, a as paymentTableCells } from './payments-table-d6fbab5b.js';
+import './Payment-47630113.js';
+import './SubAccount-f31349a9.js';
+import { y as table, z as tableCell } from './parts-93f379ab.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types-948c3b14.js';
+import { p as paymentTableColumns, a as paymentTableCells } from './payments-table-c0bb25b6.js';
 import { o as onQueryParamsChange, q as queryParams } from './payments-list-params-state-b3dab8bc.js';
+import './utils-b76d791e.js';
 import './Dispute-5fd28ec9.js';
-import './spinner-879489b3.js';
-import './payments-status-a7c18f2a.js';
-import './utils-54543523.js';
+import './spinner-b83f3a87.js';
+import './payments-status-82466054.js';
+import './badge-b034e71b.js';
 import './index-a47fdc7f.js';
 
 const PaymentsListCore = class {
@@ -96,7 +97,7 @@ const PaymentsListCore = class {
         return combinedParams;
     }
     render() {
-        return (h("div", { key: '6d3aeab1a53d5a9f73ed770de5d936e290189a9e' }, h("div", { key: 'f9750011da7c0bf0e4bc5eb91fc5c54489798890', class: "table-wrapper" }, h("table", { key: '7361cc478802a1de5513bf92ea9ec7f105168d55', class: "table table-hover", part: table }, h("thead", { key: '239402e85ae6537f4fc605b06f9f747233aef37a', class: "table-head sticky-top" }, h("tr", { key: 'f3330dae27878b313848a057d1094e094bdd66f4', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1441e8920b68c7cf759188694b1cbc65a2c37795', class: "table-body" }, h(TableLoadingState, { key: '55bf8e8b8c6c859ce363ce30fb6db75f328ebca1', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '20d7f82636bc4b1a54a56ca89f2444261e26c0d6', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: '10c160fafc746dece6e3837aa43021e48d7f49b9', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '058476cc6c3369cf4700203c28f3d2c9c002656b', class: "sticky-bottom" }, h("tr", { key: '87c051940f9e49e64d661d12f5387ef5263091b4', class: "table-light align-middle" }, h("td", { key: '06fe26d1f9d57c6598fe71ebb9b48780a35fba5a', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: 'd23dedce32252f08d0a24eb4a474e9ee62ebd0e1', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '6ae0c491d9ba248e878f65915448b715ae1c3381' }, h("div", { key: '3e2a5fe63f83d7a45c44486bc7dc7e2493b29520', class: "table-wrapper" }, h("table", { key: '3523e917bd342db707671ce9069a17618b20d1f8', class: "table table-hover", part: table }, h("thead", { key: 'e3436965637929742b7b827627504f8b4776cd7c', class: "table-head sticky-top" }, h("tr", { key: 'edf671796c2a0ad5b1fc9d6e3c3c0210f841946d', class: "table-light text-nowrap" }, this.paymentsTable.columnData.map((column) => column))), h("tbody", { key: '1cc99781f6a96dd3597fa32c31e2dff6861cc945', class: "table-body" }, h(TableLoadingState, { key: '0b1e2a89902ca170252139807512d2d91f2260f0', columnSpan: this.paymentsTable.columnData.length, isLoading: this.loading }), h(TableEmptyState, { key: '1857d904b79a0a5b9276846a6b0afd5fe54b72f0', isEmpty: this.showEmptyState, columnSpan: this.paymentsTable.columnData.length }), h(TableErrorState, { key: 'da42e70686ca49cef71bce6fd596bd18f1f1f365', columnSpan: this.paymentsTable.columnData.length, errorMessage: this.errorMessage }), this.showRowData && this.paymentsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'e6dd57881b2643442d61c01a5308529ba1e24dc0', class: "sticky-bottom" }, h("tr", { key: '6dfb87ce0ba57057505e961825bb54bbe5d29910', class: "table-light align-middle" }, h("td", { key: 'a47bd709a0296308c7348cda14bf1d2958f10feb', part: tableCell, colSpan: this.paymentsTable.columnData.length }, h("pagination-menu", { key: '0db007e310d5ca49bd05b5dbc7673cc2276b9ce3', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],

package/dist/esm/payments-status-82466054.js

@@ -0,0 +1,56 @@
+import { h } from './index-29fcfdf5.js';
+import { B as Badge, a as BadgeVariant } from './badge-b034e71b.js';
+
+const MapPaymentStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        succeeded: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'This payment was successfully captured',
+            text: 'Succeeded',
+        },
+        authorized: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This card payment was authorized, but not captured. It could still succeed or fail.',
+            text: 'Authorized',
+        },
+        pending: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'This ACH payment was processed, but the funds have not settled. It could still succeed or fail.',
+            text: 'Pending',
+        },
+        achFailed: {
+            variant: BadgeVariant.DANGER,
+            title: 'The funds couldn\'t be collected for this ACH payment (in addition to the original payment, an ACH return and fee will appear in a payout)',
+            text: 'ACH Failed',
+        },
+        failed: {
+            variant: BadgeVariant.DANGER,
+            title: 'This card payment did not go through (it will not appear in a payout)',
+            text: 'Failed',
+        },
+        canceled: {
+            variant: BadgeVariant.DANGER,
+            title: 'This payment was canceled',
+            text: 'Canceled',
+        },
+        disputed: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The account holder disputed this payment. The amount has been returned and a fee assessed.',
+            text: 'Disputed',
+        },
+        fully_refunded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'The full amount of this payment has been refunded',
+            text: 'Fully Refunded',
+        },
+        partially_refunded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'A portion of this payment has been refunded',
+            text: 'Partially Refunded',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
+};
+
+export { MapPaymentStatusToBadge as M };

package/dist/esm/{payments-table-d6fbab5b.js → payments-table-c0bb25b6.js}

@@ -1,7 +1,7 @@
 import { h } from './index-29fcfdf5.js';
-import { M as MapPaymentStatusToBadge } from './payments-status-a7c18f2a.js';
-import { c as convertToLocal, b as formatCurrency } from './utils-54543523.js';
-import { k as tableHeadCell, m as getAlternateTableCellPart } from './parts-186d437f.js';
+import { M as MapPaymentStatusToBadge } from './payments-status-82466054.js';
+import { c as convertToLocal } from './utils-b76d791e.js';
+import { k as tableHeadCell, m as getAlternateTableCellPart } from './parts-93f379ab.js';
 
 const defaultColumnsKeys = 'created_at,amount,status,payment_type,description,payers_name,last_four_digits';
 const paymentTableColumns = {
@@ -14,15 +14,15 @@ const paymentTableColumns = {
     last_four_digits: () => (h("th", { part: tableHeadCell, scope: "col", title: "The brand and last 4 digits of the payment method" }, "Payment Method")),
 };
 const paymentTableCells = {
-    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" }, convertToLocal(value, { showDisplayDate: true })),
-        h("div", { class: "fw-bold" }, convertToLocal(value, { showTime: true })))),
-    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value, true, true))),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPaymentStatusToBadge(value) })),
-    payment_type: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    description: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    payers_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    last_four_digits: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value))
+    created_at: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) },
+        h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showDisplayDate: true })),
+        h("div", { class: "fw-bold" }, convertToLocal(payment.created_at, { showTime: true })))),
+    amount: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.formattedPaymentAmount(payment.amount))),
+    status: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPaymentStatusToBadge(payment.status))),
+    payment_type: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payment_type)),
+    description: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.description)),
+    payers_name: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.payers_name)),
+    last_four_digits: (payment, index) => (h("td", { part: getAlternateTableCellPart(index) }, payment.last_four_digits)),
 };
 
 export { paymentTableCells as a, defaultColumnsKeys as d, paymentTableColumns as p };

package/dist/esm/payout-details-core.entry.js

@@ -1,11 +1,26 @@
-import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
-import { b as formatCurrency, a as formatDate, f as formatTime } from './utils-54543523.js';
-import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState } from './utils-d7633e66.js';
-import { B as Button } from './button-1886a33d.js';
+import { h, r as registerInstance, c as createEvent } from './index-29fcfdf5.js';
+import { b as formatDate, a as formatTime } from './utils-b76d791e.js';
+import { a as EntityHeadInfo, b as EntityHeadInfoItem, D as DetailSectionTitle, c as DetailItem, C as CodeBlock, E as ErrorState } from './utils-7fb6331d.js';
+import { B as Button } from './button-8a02823c.js';
 import { S as StyledHost } from './styled-host-32228b45.js';
-import { w as badge } from './parts-186d437f.js';
-import { S as Spinner } from './spinner-879489b3.js';
-import { M as MapPayoutStatusToBadge } from './payouts-status-cd58e525.js';
+import { M as MapPayoutStatusToBadge } from './payouts-status-b98c8297.js';
+import { S as Skeleton } from './skeleton-3bcb2b5d.js';
+import './parts-93f379ab.js';
+import './badge-b034e71b.js';
+
+const PayoutDetailsLoading = () => (h("div", { class: "row gap-3" },
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "35%", height: "30px" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "70%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "40%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "100%" })),
+    h("div", { class: "col-12" },
+        h(Skeleton, { width: "80%" }))));
 
 const PayoutDetailsCore = class {
     constructor(hostRef) {
@@ -59,7 +74,7 @@ const PayoutDetailsCore = class {
     }
     render() {
         var _a;
-        return (h(StyledHost, { key: '00dce2f3bddb29647880b82a2055580346b7ff38' }, this.loading && h(Spinner, { key: 'de524e2f77fb4dd20f4fcb7dff41f256f3ee74b5' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'c0b7449ff0e5773be97fb27485638acdce79b50a', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '1aa8719fb989c9993ac30803440d16ce3590038e', slot: "head-info", badge: h("span", { slot: 'badge', part: badge, innerHTML: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status) }), title: `${formatCurrency(this.payout.amount)} ${this.payout.currency.toUpperCase()}` }, h(EntityHeadInfoItem, { key: '30c9240747e66e38056cd870e5703b4d027b3ea2', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '2d93c5594c1451a3d566afe0431da34994ccc94a', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'd9116166e2c7f95e8a7e110146f492bf0329e01e', title: "ID", value: this.payout.id }), h("div", { key: '9b3c12058b396637632c3d46a24ed426a1bd518c', class: "m-4" }, h(Button, { key: 'eaf5339cb60b3ae759b0ca94ffb07f20f044feec', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '61372b0167f0a07231fd1cf69d61f156e42c3a0a', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '6113095a35b746b7b03e15af9e195fe7247148c0', sectionTitle: "Details" }), h("div", { key: 'dcdc2cf2c73516e603492aae6f81a12a2dd10d1f', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '797cf1e1b4a0521ff01a8c985c260b998ad3d3e9', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'bd3162d95fa4a98e2db4e42a9de39c91ca209b45', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'adef2b9dcbad873f570530761cf887c9a4efa052', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '8c6ca766f17f9dd140fa0778fecd648a72244b92', title: "Amount", value: formatCurrency(this.payout.amount) }), h(DetailItem, { key: '4c4448677902c19011cf36b0d71d85eb54083bbf', title: "Fee", value: formatCurrency(this.payout.fees_total) })), h(DetailSectionTitle, { key: '7f4a0ed8518b957cbfcfb15e5ea62963e5ba5013', sectionTitle: "Account" }), h("div", { key: '3d878a54ddffb40e55610224fc97f182f4255e51', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'd9eb8870ca1b4bf0c04bcb2f3b4362ebf9712a88', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'f320a0fb646a5352173341083f384bd6d7a30a61', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '35cc07ec9ee8e3155606851eeb9864d9f6df6e05', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: 'ac0962b80347b619e4cc534781df397d9bc510e2', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '65db983d9504b912f12cefc7eea7a5bc8e9f3d73', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'bc94a109cf5e2c4dcd32972387a4b167b85d8ccc', sectionTitle: 'Metadata' }), h("div", { key: '1918677f3559ff779b3f1613ee9b2367110f4648', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '2b5dd103cebe0960bdcc6a68f7389780e9d1029b', metadata: this.payout.metadata })))))));
+        return (h(StyledHost, { key: 'ace7565dae883381e2668214e01cc949470f4a6a' }, this.loading && h(PayoutDetailsLoading, { key: '9412e6135da55bddc2964b87065f212bdb1399eb' }), !this.loading && this.errorMessage && ErrorState(this.errorMessage), !this.loading && this.payout && (h("justifi-details", { key: 'df9b5bf40cc35a5366e9b1ed296b0e289a9f182c', "error-message": this.errorMessage }, h(EntityHeadInfo, { key: '64575c2f0be0beaf72094c0dfe9a343fdcd25c88', slot: "head-info", badge: MapPayoutStatusToBadge((_a = this.payout) === null || _a === void 0 ? void 0 : _a.status), title: this.payout.formattedPaymentAmount(this.payout.amount) }, h(EntityHeadInfoItem, { key: 'c95da0d064416dd0fbdff948c92dcd2b116e1da5', classes: "border-1 border-end", title: "Updated At", value: `${formatDate(this.payout.updated_at)} ${formatTime(this.payout.updated_at)}` }), h(EntityHeadInfoItem, { key: '765da16cba8659fecc6a4c11b2856f8b1edc3a32', classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.payout.created_at)} ${formatTime(this.payout.created_at)}` }), h(EntityHeadInfoItem, { key: 'ff60105de95f6ef897618a5e7cef2fb39257b9c5', title: "ID", value: this.payout.id }), h("div", { key: '8444116278f29220fe7260d6849ed7db2296d4b4', class: "m-4" }, h(Button, { key: '686e61a3ea27b62024e3544c32542e9ca710c96f', variant: "secondary", class: "btn btn-outline-secondary d-flex align-items-center", onClick: this.downloadCSV }, "Export CSV"))), h("div", { key: '5d70b7fcd4ac63002659ffc08c3c18e4b18e3f46', slot: 'detail-sections' }, h(DetailSectionTitle, { key: '8d17ae90696880259707d0500873127c7f134339', sectionTitle: "Details" }), h("div", { key: '80111eb713f6b643a415aaf66accfdb9e279fe03', class: "d-table gap-2 w-100" }, h(DetailItem, { key: 'a7c7809a862b315960fd3f7aa5c73c45efb55512', title: "Date paid", value: formatDate(this.payout.deposits_at) }), h(DetailItem, { key: 'b9b03681675854eb3f0d1445f45b1e20a648ded4', title: "Statement Description", value: this.payout.description }), h(DetailItem, { key: 'fa34b24385e0638d7ccd8ceb7382a1f113f0c966', title: "Payout Method", value: this.payout.delivery_method }), h(DetailItem, { key: '6acc6435f7f8b277abd35a8ac90e01556aaab18e', title: "Amount", value: this.payout.formattedPaymentAmount(this.payout.amount) }), h(DetailItem, { key: '560cedeb5230503e74e90bb3e531aed21d317f6c', title: "Fee", value: this.payout.formattedPaymentAmount(this.payout.fees_total) })), h(DetailSectionTitle, { key: '42e2d36cb570acad67366e65316a22dac8f4d4fc', sectionTitle: "Account" }), h("div", { key: 'f2eebf080a48ba0d818363c09269689e201ed5fc', class: "d-table gap-2 w-100" }, h(DetailItem, { key: '6064911935f9e3ef75db3ec7707dd3a182c98c5c', title: "ID", value: this.payout.account_id }), h(DetailItem, { key: 'eb44916f2659dfc6d81f4e995b3f34527d15e6c2', title: "Account Type", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '0dbf8e17dfbc1ff1cd70be1d67a6907b91478a98', title: "Institution", value: this.payout.bank_account.account_type }), h(DetailItem, { key: '2b377f8749d66f6fd58f5a8437c1e21fbb774706', title: "Routing Number", value: this.payout.bank_account.routing_number }), h(DetailItem, { key: '886cc82be28c9cd86200adf78a61846fece1cf40', title: "Account Number", value: this.payout.bank_account.account_number_last4 })), h(DetailSectionTitle, { key: 'ec5c8ab11778eff8b89be26f85c7172d38b5d4b3', sectionTitle: 'Metadata' }), h("div", { key: '9c72eeee6fb33e536c8425ba1dd6d4a0c8b066ce', class: "d-table gap-2 w-100" }, h(CodeBlock, { key: '85ea6096635c9bb6c8fc0b5298dd4cbb6411392c', metadata: this.payout.metadata })))))));
     }
     static get watchers() { return {
         "getPayout": ["getPayoutWatcher"]

package/dist/esm/payouts-list-core.entry.js

@@ -1,17 +1,18 @@
 import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
-import './Checkout-0b4086f8.js';
+import './Checkout-d476bb83.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
-import './Payment-4f72d277.js';
-import './SubAccount-99a00594.js';
+import './Payment-47630113.js';
+import './SubAccount-f31349a9.js';
 import { a as ComponentErrorCodes, C as ComponentErrorSeverity } from './ComponentError-3ce7f437.js';
-import { n as table, o as tableCell } from './parts-186d437f.js';
-import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types-01dcdcbd.js';
-import { p as payoutTableColumns, a as payoutTableCells } from './payouts-table-2e61a116.js';
+import { y as table, z as tableCell } from './parts-93f379ab.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types-948c3b14.js';
+import { p as payoutTableColumns, a as payoutTableCells } from './payouts-table-4382a264.js';
 import { o as onQueryParamsChange, q as queryParams } from './payouts-list-params-state-49618e7a.js';
+import './utils-b76d791e.js';
 import './Dispute-5fd28ec9.js';
-import './spinner-879489b3.js';
-import './utils-54543523.js';
-import './payouts-status-cd58e525.js';
+import './spinner-b83f3a87.js';
+import './payouts-status-b98c8297.js';
+import './badge-b034e71b.js';
 import './index-a47fdc7f.js';
 
 const PayoutsListCore = class {
@@ -147,7 +148,7 @@ const PayoutsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'b32c27e9cd63eebde1bbce6634eeb8be1c804db8' }, h("div", { key: '842d7df46f21510c872e34234d70a3adef80ebd9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: '3fb2afe1a78cbb39f896d1833a06c4c976e53292', class: "table table-hover", part: table }, h("thead", { key: '65e335052e013f6bd2ddd154b0772d813b03e02f', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '0d113369ff9e4a1933b8c0f699e03ab3812d30d4', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: '64eea2dda7fe52844a39fe4a78840444959c9bf8', class: "table-body" }, h(TableLoadingState, { key: '3f3fb69c8105de8374e57e7279ad0d3e4e88f777', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'df74f8ea143edbfb57efee6952c7ddffc690db8e', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'd12c61e243397de8024c8fe13e518ae3328b5d95', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '23f8f411959eb2464a4f0d75830adedf5cc9d15b', class: "sticky-bottom" }, h("tr", { key: '63a62a4743ef38050ef9d6f2870fc74b5a011568', class: "table-light align-middle" }, h("td", { key: '23a7b62618db1dd52da8c43627f7d512c2f18bc1', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: '3c401e3d08d930cc19c5a09e1b34c740f2dd833b', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: 'c546790efb9cc49a78063b3761a9c92038acedd5' }, h("div", { key: '60cc337e0c1c4eb7eb59599cdd0520e4031d1ce9', class: "table-wrapper", part: "table-wrapper" }, h("table", { key: 'e7188291031c23dd5bb7f843b4adebb2c5f2675e', class: "table table-hover", part: table }, h("thead", { key: 'eb3a3b5af4016ae73da8af381e778fe433e683c6', class: "table-head sticky-top", part: "table-head" }, h("tr", { key: '9352fcc352a8ea33aa1d49844e092f89a9863ce9', class: "table-light text-nowrap", part: "table-head-row" }, this.payoutsTable.columnData.map((column) => column))), h("tbody", { key: 'c924a2a65215845c119f3339b7905a6d7c3cc1fa', class: "table-body" }, h(TableLoadingState, { key: '1d811e44a1319a102a0c56a62c56dda13eb6463e', columnSpan: this.payoutsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: '4dacb3d2cf264c1c367a465cb04221be6b2f1e21', isEmpty: this.showEmptyState, columnSpan: this.payoutsTable.columnKeys.length }), h(TableErrorState, { key: 'b294b854e12adcf39c32aaaa34b260775c5195b3', columnSpan: this.payoutsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.payoutsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: '668400d517551fa89af74f655befc11a091a0de0', class: "sticky-bottom" }, h("tr", { key: 'b59f6342dccf4c34cbdbddcce7cb4e1c12116fe1', class: "table-light align-middle" }, h("td", { key: '022afdd48ae81ec33f85c90e045d197f0e2f90ec', part: tableCell, colSpan: this.payoutsTable.columnData.length }, h("pagination-menu", { key: 'a7e7a1ccdc238af532608626b25123fcd93a6206', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],

package/dist/esm/payouts-status-b98c8297.js

@@ -0,0 +1,51 @@
+import { h } from './index-29fcfdf5.js';
+import { B as Badge, a as BadgeVariant } from './badge-b034e71b.js';
+
+const MapPayoutStatusToBadge = (status) => {
+    const statusToBadgeProps = {
+        canceled: {
+            variant: BadgeVariant.DANGER,
+            title: 'Transfer to your bank account failed',
+            text: 'Canceled',
+        },
+        failed: {
+            variant: BadgeVariant.DANGER,
+            title: 'Transfer to your bank account failed',
+            text: 'Failed',
+        },
+        forwarded: {
+            variant: BadgeVariant.SECONDARY,
+            title: 'This payout initially failed; the funds have been forwarded to your next successful payout',
+            text: 'Forwarded',
+        },
+        in_transit: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'Transfer to your bank account has been initiated',
+            text: 'In Transit',
+        },
+        paid: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'Successfully deposited into your bank account',
+            text: 'Paid',
+        },
+        pending: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'Batched and scheduled to be transferred',
+            text: 'Pending',
+        },
+        scheduled: {
+            variant: BadgeVariant.PRIMARY,
+            title: 'Batched and scheduled to be transferred',
+            text: 'Scheduled',
+        },
+        withdrawn: {
+            variant: BadgeVariant.SUCCESS,
+            title: 'Negative payout balance successfully withdrawn from your bank account',
+            text: 'Withdrawn',
+        },
+    };
+    const badgeProps = statusToBadgeProps[status];
+    return h(Badge, Object.assign({}, badgeProps));
+};
+
+export { MapPayoutStatusToBadge as M };

package/dist/esm/{payouts-table-2e61a116.js → payouts-table-4382a264.js}

@@ -1,7 +1,7 @@
 import { h } from './index-29fcfdf5.js';
-import { c as convertToLocal, b as formatCurrency } from './utils-54543523.js';
-import { M as MapPayoutStatusToBadge } from './payouts-status-cd58e525.js';
-import { m as getAlternateTableCellPart, k as tableHeadCell } from './parts-186d437f.js';
+import { c as convertToLocal } from './utils-b76d791e.js';
+import { M as MapPayoutStatusToBadge } from './payouts-status-b98c8297.js';
+import { m as getAlternateTableCellPart, k as tableHeadCell } from './parts-93f379ab.js';
 
 const defaultColumnsKeys = 'created_at,amount,status,payments_total,refunds_total,fees_total,other_total,csv';
 const payoutTableColumns = {
@@ -16,19 +16,17 @@ const payoutTableColumns = {
     csv: () => (h("th", { part: tableHeadCell, scope: "col", title: "Export CSV" })),
 };
 const payoutTableCells = (downloadCSV) => ({
-    created_at: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("div", { class: "fw-bold" },
-            convertToLocal(value, { showDisplayDate: true }),
-            " "))),
-    sub_account_name: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, value)),
-    payments_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    refunds_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    fees_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    other_total: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    amount: (value, index) => (h("td", { part: getAlternateTableCellPart(index) }, formatCurrency(value))),
-    status: (value, index) => (h("td", { part: getAlternateTableCellPart(index), innerHTML: MapPayoutStatusToBadge(value) })),
-    csv: (value, index) => (h("td", { part: getAlternateTableCellPart(index) },
-        h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(value); } }, "CSV"))),
+    created_at: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) },
+        h("div", { class: "fw-bold" }, convertToLocal(payout.created_at, { showDisplayDate: true })))),
+    sub_account_name: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.sub_account_name)),
+    payments_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.payments_total))),
+    refunds_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.refunds_total))),
+    fees_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.fees_total))),
+    other_total: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.other_total))),
+    amount: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, payout.formattedPaymentAmount(payout.amount))),
+    status: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) }, MapPayoutStatusToBadge(payout.status))),
+    csv: (payout, index) => (h("td", { part: getAlternateTableCellPart(index) },
+        h("a", { href: "#", onClick: (event) => { event.preventDefault(); downloadCSV(payout); } }, "CSV"))),
 });
 
 export { payoutTableCells as a, defaultColumnsKeys as d, payoutTableColumns as p };

package/dist/esm/{schema-validations-c7d4f9df.js → schema-validations-5b0ac96b.js}

@@ -285,4 +285,4 @@ const profitAndLossStatementValidation = (volume, documents, allowOptionalFields
     }
 };
 
-export { nicknameValidation as A, accountTypeValidation as B, accountNumberValidation as C, routingNumberValidation as D, voidedCheckValidation as E, governmentIdValidation as F, ss4Validation as G, otherDocumentValidation as H, balanceSheetValidation as I, bankStatementValidation as J, profitAndLossStatementValidation as K, EntityDocument as L, EntityDocumentStorage as M, EntityDocumentType as N, businessClassificationValidation as a, businessNameValidation as b, dateOfIncorporationValidation as c, doingBusinessAsValidation as d, emailValidation as e, paymentVolumeValidation as f, whenServiceReceivedValidation as g, recurringPaymentsValidation as h, industryValidation as i, recurringPaymentsPercentageValidation as j, lineTwoValidation as k, lineOneValidation as l, cityValidation as m, stateValidation as n, otherPaymentDetailsValidation as o, phoneValidation as p, postalValidation as q, revenueValidation as r, seasonalBusinessValidation as s, taxIdValidation as t, identityNameValidation as u, identityTitleValidation as v, websiteUrlValidation as w, dobValidation as x, ssnValidation as y, bankNameValidation as z };
+export { governmentIdValidation as A, ss4Validation as B, otherDocumentValidation as C, balanceSheetValidation as D, bankStatementValidation as E, profitAndLossStatementValidation as F, EntityDocument as G, EntityDocumentStorage as H, bankNameValidation as I, nicknameValidation as J, accountTypeValidation as K, accountNumberValidation as L, routingNumberValidation as M, EntityDocumentType as N, businessClassificationValidation as a, businessNameValidation as b, dateOfIncorporationValidation as c, doingBusinessAsValidation as d, emailValidation as e, paymentVolumeValidation as f, whenServiceReceivedValidation as g, recurringPaymentsValidation as h, industryValidation as i, recurringPaymentsPercentageValidation as j, lineTwoValidation as k, lineOneValidation as l, cityValidation as m, stateValidation as n, otherPaymentDetailsValidation as o, phoneValidation as p, postalValidation as q, revenueValidation as r, seasonalBusinessValidation as s, taxIdValidation as t, identityNameValidation as u, identityTitleValidation as v, websiteUrlValidation as w, dobValidation as x, ssnValidation as y, voidedCheckValidation as z };

package/dist/esm/{skeleton-8f71cdf7.js → skeleton-3bcb2b5d.js}

@@ -1,5 +1,5 @@
 import { h } from './index-29fcfdf5.js';
-import { s as skeleton } from './parts-186d437f.js';
+import { s as skeleton } from './parts-93f379ab.js';
 
 const Skeleton = ({ component = 'div', height, width, className, styles = {}, }) => {
     const combinedStyle = Object.assign(Object.assign({}, styles), { width,

package/dist/esm/{spinner-879489b3.js → spinner-b83f3a87.js}

@@ -1,5 +1,5 @@
 import { h } from './index-29fcfdf5.js';
-import { r as loadingSpinner } from './parts-186d437f.js';
+import { C as loadingSpinner } from './parts-93f379ab.js';
 
 const Spinner = () => {
     return (h("div", { class: "d-flex justify-content-center" },

package/dist/esm/table-filters-menu.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h } from './index-29fcfdf5.js';
-import { B as Button } from './button-1886a33d.js';
-import { C as dropdownMenu } from './parts-186d437f.js';
+import { B as Button } from './button-8a02823c.js';
+import { L as dropdownMenu } from './parts-93f379ab.js';
 
 const hasFilters = (params) => {
     const paginationKeys = ['after_cursor', 'before_cursor'];
@@ -31,7 +31,7 @@ const TableFiltersMenu = class {
         this.showClearButton = hasFilters(this.params);
     }
     render() {
-        return (h("div", { key: 'b50b85bc459e9f217a70c49505479944572b5daf', class: "d-flex gap-2" }, h("div", { key: 'eedc2d34795d42f10b1db7b7f163096f06b519ff', class: "dropdown pb-3" }, h(Button, { key: '97d365b9c8ac6e5f33fa98768ffa55b988c90a17', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: 'e0f52c3aeb555de14d1e999818468debc59a9fa7', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: 'bd83ec6ea2949b2313078431c91c711682c5ed53', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '08a53808fffd6f029ac83229fa86d13bacf39a7b' })))), h("div", { key: 'f28533474420ac5d80ba3ab6bb5e919ebf644779' }, h(Button, { key: 'cde26e935489d12a34758cf766bcb87296e0f5e8', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
+        return (h("div", { key: 'ee398b42698ce14cd7d7ac914fe05ecf827adb90', class: "d-flex gap-2" }, h("div", { key: 'd097692b7b7dba1da5b141fccf472a454f008988', class: "dropdown pb-3" }, h(Button, { key: 'bfdc5605e6f771b5492ebecb3a9e857e561c9351', variant: "primary", type: "button dropdown-toggle", ref: (el) => (this.anchorButton = el), class: "btn btn-primary dropdown-toggle", "data-test-id": "open-filters-button", "data-bs-toggle": "dropdown" }, "Filters"), h("custom-popper", { key: '7974738ccf48f25886eb22838744e8761a8aab89', offset: [20, 10], strategy: "fixed", anchorRef: this.anchorButton, trigger: "click" }, h("form", { key: '0f099e12ea159a912874894cdb5533f7bb64a356', class: "dropdown-menu", part: dropdownMenu, "data-test-id": "filter-menu", ref: (el) => (this.menu = el), onSubmit: (e) => e.preventDefault() }, h("slot", { key: '525abf57ddb5a3ab0606037f0538f08ddf6a370b' })))), h("div", { key: '5381355037c7703a4c89015cd0a5ee34e652e221' }, h(Button, { key: 'e304b0f033a95757a9682257c2e4ff6793cd7cdd', variant: "secondary", onClick: () => this.clearParams(), hidden: !this.showClearButton, "data-test-id": "clear-filters-button" }, "Clear Filters"))));
     }
     static get watchers() { return {
         "params": ["watchParamsHandler"]

package/dist/esm/terminals-list-core.entry.js

@@ -1,14 +1,16 @@
 import { r as registerInstance, c as createEvent, h } from './index-29fcfdf5.js';
-import './Checkout-0b4086f8.js';
+import './Checkout-d476bb83.js';
 import { p as pagingDefaults } from './Pagination-afc8f96d.js';
-import './Payment-4f72d277.js';
-import './SubAccount-99a00594.js';
-import { n as table, o as tableCell } from './parts-186d437f.js';
-import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types-01dcdcbd.js';
-import { t as terminalTableColumns, a as terminalTableCells } from './terminals-table-8e42977c.js';
+import './Payment-47630113.js';
+import './SubAccount-f31349a9.js';
+import { y as table, z as tableCell } from './parts-93f379ab.js';
+import { T as TableClickActions, a as Table, b as TableLoadingState, c as TableEmptyState, d as TableErrorState } from './event-types-948c3b14.js';
+import { t as terminalTableColumns, a as terminalTableCells } from './terminals-table-8f1c2146.js';
 import { o as onQueryParamsChange, q as queryParams } from './terminals-list-params-state-2c48d35f.js';
+import './utils-b76d791e.js';
 import './Dispute-5fd28ec9.js';
-import './spinner-879489b3.js';
+import './spinner-b83f3a87.js';
+import './badge-b034e71b.js';
 import './index-a47fdc7f.js';
 
 const TerminalsListCore = class {
@@ -131,7 +133,7 @@ const TerminalsListCore = class {
         return !this.showEmptyState && !this.showErrorState && !this.loading;
     }
     render() {
-        return (h("div", { key: 'a293f76edb152df4636282a1bdb64526743ba62b' }, h("div", { key: '91c87549f3da243bcbc5e8c3f30690b4f3568312', class: "table-wrapper" }, h("table", { key: 'b8666ef07d7cddecfd576520004cb9ae369816d0', class: "table table-hover", part: table }, h("thead", { key: '82f882e9c8ad8cb8b86fdd8054b2db202f31aee6', class: "table-head sticky-top" }, h("tr", { key: 'db96b27008b1cdfb394f7480d163ba98a564e654', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: 'afe168ca0facd25953f8e23c82ee40b37ff56418', class: "table-body" }, h(TableLoadingState, { key: 'fa4a276edaa35687efd922d987b51248670aad4c', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a7450b6fc3b6e659c46c57c4bb1e06c8102da809', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '89894e4c62d1ec4b4d10f1ca8fd50098e655dcf1', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'ba93ff43a8562b4e77b48a0a026d75d9f84e5249', class: "sticky-bottom" }, h("tr", { key: 'bd75b89450eec1db55c7e92b2e79eab559605bba', class: "table-light align-middle" }, h("td", { key: 'b27b8a0bbe6c2d38393684752809d5e909948567', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '959649b1f3c8099c5b929543557823eccd3e9dd9', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
+        return (h("div", { key: '6d26b39501a43d464cdf017f18a277f761f7091e' }, h("div", { key: '1742f9eec4c84c80563d9e52829cda195f6d0f35', class: "table-wrapper" }, h("table", { key: 'c286d9fe9e0e42631f281820f4d01bf3a0530a37', class: "table table-hover", part: table }, h("thead", { key: '313503778cc7867e9c1276b8ac65d06367efa9b8', class: "table-head sticky-top" }, h("tr", { key: 'fbc26ae3d1ac4600c03c171c3e77624e66fa7915', class: "table-light text-nowrap" }, this.terminalsTable.columnData.map((column) => column))), h("tbody", { key: '458b4d6639c232a169a37e1920c5765f461fc5ed', class: "table-body" }, h(TableLoadingState, { key: 'ceeef6c53322679adff07b9bb336d9597dd573c7', columnSpan: this.terminalsTable.columnKeys.length, isLoading: this.loading }), h(TableEmptyState, { key: 'a1ef7bd86fd98c0320539a4c146d41de07901145', isEmpty: this.showEmptyState, columnSpan: this.terminalsTable.columnKeys.length }), h(TableErrorState, { key: '5f6cbd7d7e2d09ebb38677f1b141ccbdbac70a9f', columnSpan: this.terminalsTable.columnKeys.length, errorMessage: this.errorMessage }), this.showRowData && this.terminalsTable.rowData.map((data, index) => (h("tr", { "data-test-id": "table-row", "data-row-entity-id": this.entityId[index], onClick: this.rowClickHandler }, data)))), this.paging && (h("tfoot", { key: 'cc1e06c683ad4bb83e80bd960342773cb3c78cd7', class: "sticky-bottom" }, h("tr", { key: 'e83f5fa8207affced7c4cd507aab27ba48e7df52', class: "table-light align-middle" }, h("td", { key: 'f1b6214fc5455ca39cdf2369636b07ad18b54d3d', part: tableCell, colSpan: this.terminalsTable.columnData.length }, h("pagination-menu", { key: '5ef057eef49aaa9081b9de5ea8c48e996fa5e35a', paging: Object.assign(Object.assign({}, this.paging), { handleClickPrevious: this.handleClickPrevious, handleClickNext: this.handleClickNext }) })))))))));
     }
     static get watchers() { return {
         "queryParams": ["updateOnPropChange"],